/* LIGHT THEME (default) */
:root {
    /* Navbar */
    --navbar-bg: deepskyblue;
    --navbar-text: white;
    --navbar-icon-filter: brightness(0) invert(1);
    
    /* Top Section */
    --top-section-bg: white;
    --search-bg: rgb(230, 230, 230);
    --username-text: #1e293b;
    --greeting-text: #1e293b;
    
    /* Main Content */
    --main-bg: rgba(36, 36, 36, 0.09);
    --card-bg: white;
    --card-title-text: #1e293b;
    --card-description-text: grey;
    --card-accent: orange;
    --card-button-filter: none;
    
    /* Right Panel */
    --panel-heading-text: #1e293b;
    --announcements-bg: white;
    --announcement-title-text: #1e293b;
    --announcement-desc-text: gray;
    --trending-bg: white;
    --trending-text: #1e293b;
    
    /* Dividers */
    --hr-color: rgba(242, 242, 242, 0.86);
    
    /* Buttons */
    --button-bg: deepskyblue;
    --button-text: white;
    
    /* Icons - General */
    --icon-filter: none;
    --toggle-filter: none;  /* For the theme toggle button icon */
}

/* DARK THEME */
body.dark-mode {
    /* Navbar */
    --navbar-bg: #1a2634;
    --navbar-text: #e0e0e0;
    --navbar-icon-filter: brightness(0) invert(1);
    
    /* Top Section */
    --top-section-bg: #1a1a1a;
    --search-bg: rgb(230, 230, 230);
    --username-text: #e0e0e0;
    --greeting-text: #e0e0e0;
    
    /* Main Content */
    --main-bg: #121212;
    --card-bg: #1e1e1e;
    --card-title-text: #e0e0e0;
    --card-description-text: #e0e0e0;
    --card-accent: orange;
    --card-button-filter: brightness(0) invert(1);
    
    /* Right Panel */
    --panel-heading-text: #e0e0e0;
    --announcements-bg: #1e1e1e;
    --announcement-title-text: #e0e0e0;
    --announcement-desc-text: gray;
    --trending-bg: #1e1e1e;
    --trending-text: #e0e0e0;
    
    /* Dividers */
    --hr-color: #a0a0a0;
    
    /* Buttons */
    --button-bg: #60a5fa;
    --button-text: #e0e0e0;
    
    /* Icons - General (invert for dark backgrounds) */
    --icon-filter: brightness(0) invert(1);
    --toggle-filter: brightness(0) invert(1);  /* Toggle icon inverts in dark mode */
}

/* ========== BASE STYLES ========== */
* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', 'Courier New', Courier, monospace;
}

body {
    display: flex;
}

/* ========== NAVBAR ========== */
.navbar {
    background-color: var(--navbar-bg);
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: start;
    height: 100%;
    padding: 15px 70px 0px 15px;
    color: var(--navbar-text);
}

.navbar-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar a {
    color: var(--navbar-text);
    text-decoration: none;
    font-weight: bold;
}

.navbar a img {
    margin: 0px 10px 0px 10px;
}

.home-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.settings-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.Dashboard {
    display: flex;
    gap: 10px;
    flex-direction: row;
    align-items: center;
}

.navbar .icon {
    height: auto;
    width: 25px;
    filter: var(--navbar-icon-filter);
}

.navbar .heading-icon {   
    width: 50px;
    filter: var(--navbar-icon-filter);
}

/* ========== TOP SECTION ========== */
.top-section {
    height: 18%;
    background-color: var(--top-section-bg);
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.084);
}

.search-section {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.search-bar {
    display: flex;
    gap: 10px;  
    margin: 0px 0px 0px 40px;
    width: 50%;
    padding: 10px;
}

.search-bar .search-icon {
    width: 25px;
    filter: var(--icon-filter);
}

.profile-section {
    display: flex;
    gap: 30px;
    margin-right: 60px;
    align-items: center;
}

.profile-section .bell {
    width: 25px;
    filter: var(--icon-filter);
}

/* Theme Toggle Button Styles */
.toggle {
    width: 25px;
    filter: var(--toggle-filter);
}

#toggle {
    background-color: transparent;
    border: none;
    border-radius: 200px;
    cursor: pointer;
}

.profile-section .profile-pic {
    width: 3rem;
    height: auto;
    border: none;
    border-radius: 100px;
}

.profile-section .username {
    font-weight: bold;
    color: var(--username-text);
}

.greeting-container {
    display: flex;
    flex-direction: column;
}

.left-user-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 0px 0px 0px 30px;
}

.left-user-info .greeting {
    font-weight: bold;
    font-size: medium;
    color: var(--greeting-text);
}

.left-user-info .username-greeting {
    font-size: 2rem;
    font-weight: bold;
    color: var(--greeting-text);
}

.left-user-info .user-pic {
    width: 5rem;
    height: auto;
    border: none;
    border-radius: 100px;
}

.search-bar .search {
    width: 100%;
    background-color: var(--search-bg);
    border: none;
    border-radius: 300px;
    padding: 5px 10px;
}

.user-info-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px;
}

.right-user-info {
    display: flex;
    gap: 25px;
    margin-right: 40px;
}

.right-user-info button {
    background-color: var(--button-bg);
    border: none;
    border-radius: 100px;
    color: var(--button-text);
    font-size: medium;
    font-weight: bolder;
    width: 100%;
    padding: 10px 20px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.right-user-info button:hover {
    opacity: 0.9;
}

/* ========== MAIN CONTENT ========== */
.main-content {
    display: flex;
    background-color: var(--main-bg);
    padding-bottom: 15%;
}

.content-left {
    width: 70%;
    margin: 20px;
}

.content-right {
    width: 30%;
    display: flex;
    flex-direction: column;   
    margin: 20px;
}

/* Project Cards */
.grid-container-left {
    display: grid;
    grid-template: 210px 210px 210px / 350px 350px;
    gap: 20px;
}

.grid-item-card {
    display: flex;
    flex-direction: column;
    background-color: var(--card-bg);
    border-radius: 10px;
    border-left: solid var(--card-accent) 5px;
    padding: 20px;
    transition: background-color 0.3s;
}

.grid-item-card .project-title {
    font-weight: bold;
    color: var(--card-title-text);
}

.grid-item-card .project-description {
    font-size: small;
    color: var(--card-description-text);
}

.buttons {
    align-self: flex-end;
    margin-top: auto;
}

.buttons .project-button {
    width: 18px;
    height: auto;
    filter: var(--card-button-filter);
}

/* Headings */
.heading-container-topleft, 
.heading-container-topright {
    font-size: large;
    font-weight: bold;
    margin-bottom: 10px;
    padding-top: 10px;
    color: var(--panel-heading-text);
}

/* Announcements */
.annoucements-list {
    display: flex;
    flex-direction: column;
    background-color: var(--announcements-bg);
    border-radius: 10px;
    font-size: small;
    padding: 20px;
    gap: 20px;
}

.annoucements-list-item {
    display: flex;
    flex-direction: column;
}

.annoucements-list-item .annoucements-heading {
    font-weight: bold;
    padding-top: 10px;
    color: var(--announcement-title-text);
}

.annoucements-list-item .annoucements-description {
    padding-bottom: 10px;
    color: var(--announcement-desc-text);
    font-size: smaller;
}

/* Trending */
.Trending-list {
    display: flex;
    flex-direction: column;
    background-color: var(--trending-bg);
    border-radius: 10px;
    font-size: small;
    padding: 20px;
    gap: 20px;
}

.trending-list-item {
    display: flex;
    align-items: center;
    color: var(--trending-text);
}

.trending-user-pic {
    width: 20%;
    border-radius: 200px;
    margin: 5px;
}

/* Divider */
hr {
    color: var(--hr-color);
}