/* =====================================================
   C-CONNECT GLOBAL STYLESHEET v3.0
   Glassmorphism | Forest Green Theme | Calm & Elegant
   ===================================================== */

/* ==================== CSS RESET & BASE ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}







/* ==================== CSS VARIABLES — C-Connect Design System ==================== */
/* Built for the new UI/UX redesign. Green-primary, multi-accent, mobile-first.     */
/* Typography: Syne (headings/labels) + DM Sans (body). Light mode default.         */

:root {

    /* ===================================================
       BRAND — Primary Green
       Used for: main CTAs, nav active state, links,
       connect buttons, success actions, brand identity
    =================================================== */
    --primary-color:        #2d7a3a;   /* Forest green — main brand */
    --primary-hover:        #3a9e4a;   /* Lighter green — hover state */
    --primary-light:        #4db860;   /* Even lighter — active press */
    --primary-dim:          rgba(45, 122, 58, 0.09);   /* Tinted bg / chips */
    --primary-glow:         rgba(45, 122, 58, 0.20);   /* Box-shadow glow */
    --primary-border:       rgba(45, 122, 58, 0.18);   /* Subtle border tint */


    /* ===================================================
       ACCENT 1 — Indigo
       Used for: messages, identity/profile fields,
       edit actions, profile completion, links
    =================================================== */
    --indigo-color:         #4f5fcc;
    --indigo-hover:         #6270e0;
    --indigo-dim:           rgba(79, 95, 204, 0.09);
    --indigo-glow:          rgba(79, 95, 204, 0.18);
    --indigo-border:        rgba(79, 95, 204, 0.18);


    /* ===================================================
       ACCENT 2 — Amber
       Used for: academic info (dept, year), campus board
       events, warnings, "coming soon" badges
    =================================================== */
    --amber-color:          #d97706;
    --amber-hover:          #b45309;
    --amber-dim:            rgba(217, 119, 6, 0.09);
    --amber-glow:           rgba(217, 119, 6, 0.18);
    --amber-border:         rgba(217, 119, 6, 0.18);


    /* ===================================================
       ACCENT 3 — Coral
       Used for: errors, likes, danger actions,
       unread indicators, cancel/remove actions
    =================================================== */
    --coral-color:          #e05c5c;
    --coral-hover:          #c94f4f;
    --coral-dim:            rgba(224, 92, 92, 0.09);
    --coral-glow:           rgba(224, 92, 92, 0.18);
    --coral-border:         rgba(224, 92, 92, 0.18);


    /* ===================================================
       ACCENT 4 — Teal
       Used for: connections, people suggestions,
       mutual connections, online status
    =================================================== */
    --teal-color:           #0d8a8a;
    --teal-hover:           #0a6e6e;
    --teal-dim:             rgba(13, 138, 138, 0.09);
    --teal-glow:            rgba(13, 138, 138, 0.18);
    --teal-border:          rgba(13, 138, 138, 0.18);


    /* ===================================================
       SEMANTIC ALIASES
       Map to accents above — use these for intent-based
       situations rather than colour-specific names
    =================================================== */
    --success-color:        var(--primary-color);   /* Green = success */
    --danger-color:         var(--coral-color);     /* Coral = danger/error */
    --warning-color:        var(--amber-color);     /* Amber = warning */
    --info-color:           var(--indigo-color);    /* Indigo = info/neutral action */


    /* ===================================================
       BACKGROUNDS — Light Mode
    =================================================== */
    --bg-primary:           #f5f7f5;   /* Page base — very slightly green-tinted white */
    --bg-secondary:         #ffffff;   /* Card/surface — pure white */
    --bg-tertiary:          #eef1ee;   /* Recessed areas, input fields */
    --bg-hover:             #e8ebe8;   /* Row/item hover state */

    --bg-gradient-start:    #f5f7f5;
    --bg-gradient-end:      #eef1ee;

    /* Hero banner (used on profile, dashboard hero card) */
    --bg-banner:            linear-gradient(135deg, #0f2027, #203a43, #2c5364);


    /* ===================================================
       GLASS / FROSTED EFFECTS
       Used for sticky topbars, bottom nav, modals
    =================================================== */
    --glass-bg:             rgba(255, 255, 255, 0.93);
    --glass-border:         rgba(0, 0, 0, 0.07);
    --glass-shadow:         rgba(0, 0, 0, 0.055);


    /* ===================================================
       TEXT — Light Mode
    =================================================== */
    --text-primary:         #111a12;   /* Near-black with green undertone */
    --text-secondary:       #3a4e3b;   /* Medium — subheadings, labels */
    --text-tertiary:        #5c6e5d;   /* Lighter body text */
    --text-muted:           #8fa08f;   /* Placeholders, timestamps, hints */


    /* ===================================================
       BORDERS
    =================================================== */
    --border-color:         rgba(0, 0, 0, 0.07);    /* Default hairline */
    --border-subtle:        rgba(0, 0, 0, 0.12);    /* Slightly more visible */
    --border-strong:        rgba(0, 0, 0, 0.20);    /* Focused inputs, emphasis */


    /* ===================================================
       BORDER RADIUS
    =================================================== */
    --radius-xs:            8px;
    --radius-sm:            12px;
    --radius-md:            18px;
    --radius-lg:            22px;
    --radius-xl:            28px;
    --radius-full:          9999px;   /* Pills, toggles, avatars */


    /* ===================================================
       SHADOWS
    =================================================== */
    --shadow-xs:            0 1px 4px  rgba(0, 0, 0, 0.04);
    --shadow-sm:            0 2px 10px rgba(0, 0, 0, 0.055);
    --shadow-md:            0 5px 22px rgba(0, 0, 0, 0.09);
    --shadow-lg:            0 10px 36px rgba(0, 0, 0, 0.13);

    /* Coloured glow shadows — match to element accent */
    --shadow-green:         0 4px 18px rgba(45, 122, 58, 0.22);
    --shadow-indigo:        0 4px 18px rgba(79, 95, 204, 0.22);
    --shadow-amber:         0 4px 18px rgba(217, 119, 6, 0.22);
    --shadow-coral:         0 4px 18px rgba(224, 92, 92, 0.22);
    --shadow-teal:          0 4px 18px rgba(13, 138, 138, 0.22);


    /* ===================================================
       TYPOGRAPHY
    =================================================== */
    --font-display:         'Syne', sans-serif;    /* Headings, labels, buttons, nav */
    --font-body:            'DM Sans', sans-serif; /* Body text, inputs, captions */

    --text-xs:              10px;
    --text-sm:              12px;
    --text-base:            14px;
    --text-md:              16px;
    --text-lg:              20px;
    --text-xl:              24px;
    --text-2xl:             28px;
    --text-3xl:             32px;


    /* ===================================================
       TRANSITIONS
    =================================================== */
    --transition-fast:      150ms ease;
    --transition-base:      220ms ease;
    --transition-smooth:    350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce:    300ms cubic-bezier(0.34, 1.56, 0.64, 1);  /* For like/pop animations */


    /* ===================================================
       LAYOUT DIMENSIONS
    =================================================== */
    --sidebar-width:        260px;
    --sidebar-collapsed:    80px;
    --topbar-height:        60px;       /* Slim topbar for mobile */
    --bottom-nav-height:    72px;       /* Nav + safe area padding */
    --max-mobile-width:     390px;      /* Phone shell max-width */
    --content-padding:      18px;       /* Standard horizontal page padding */
}


/* ===================================================
   DARK THEME — .theme-dark
   Applied via JS toggle (Settings > Dark Mode).
   All values tuned to match the light palette's
   intent — green stays primary, accents stay warm.
=================================================== */
.theme-dark {

    /* Brand green shifts lighter for dark bg contrast */
    --primary-color:        #4db860;
    --primary-hover:        #5dd670;
    --primary-light:        #7ee896;
    --primary-dim:          rgba(77, 184, 96, 0.12);
    --primary-glow:         rgba(77, 184, 96, 0.22);
    --primary-border:       rgba(77, 184, 96, 0.22);

    --indigo-color:         #818cf8;
    --indigo-hover:         #a5b4fc;
    --indigo-dim:           rgba(129, 140, 248, 0.12);
    --indigo-glow:          rgba(129, 140, 248, 0.22);
    --indigo-border:        rgba(129, 140, 248, 0.22);

    --amber-color:          #fbbf24;
    --amber-hover:          #f59e0b;
    --amber-dim:            rgba(251, 191, 36, 0.12);
    --amber-glow:           rgba(251, 191, 36, 0.22);
    --amber-border:         rgba(251, 191, 36, 0.22);

    --coral-color:          #f87171;
    --coral-hover:          #ef4444;
    --coral-dim:            rgba(248, 113, 113, 0.12);
    --coral-glow:           rgba(248, 113, 113, 0.22);
    --coral-border:         rgba(248, 113, 113, 0.22);

    --teal-color:           #2dd4bf;
    --teal-hover:           #14b8a6;
    --teal-dim:             rgba(45, 212, 191, 0.12);
    --teal-glow:            rgba(45, 212, 191, 0.22);
    --teal-border:          rgba(45, 212, 191, 0.22);

    /* Semantic — auto-follow accent updates above */
    --success-color:        var(--primary-color);
    --danger-color:         var(--coral-color);
    --warning-color:        var(--amber-color);
    --info-color:           var(--indigo-color);

    /* Backgrounds */
    --bg-primary:           #0d0f0e;   /* Deep near-black with green cast */
    --bg-secondary:         #161a16;   /* Card/surface */
    --bg-tertiary:          #1e231e;   /* Recessed/input fields */
    --bg-hover:             #252b25;   /* Hover state */

    --bg-gradient-start:    #0d0f0e;
    --bg-gradient-end:      #1e231e;
    --bg-banner:            linear-gradient(135deg, #060b0d, #0d1a20, #162830);

    /* Glass */
    --glass-bg:             rgba(22, 26, 22, 0.94);
    --glass-border:         rgba(255, 255, 255, 0.06);
    --glass-shadow:         rgba(0, 0, 0, 0.40);

    /* Text */
    --text-primary:         #eef2ee;
    --text-secondary:       #b8ccb9;
    --text-tertiary:        #8aa08b;
    --text-muted:           #5a705b;

    /* Borders */
    --border-color:         rgba(255, 255, 255, 0.07);
    --border-subtle:        rgba(255, 255, 255, 0.11);
    --border-strong:        rgba(255, 255, 255, 0.20);

    /* Shadows */
    --shadow-xs:            0 1px 4px  rgba(0, 0, 0, 0.30);
    --shadow-sm:            0 2px 10px rgba(0, 0, 0, 0.40);
    --shadow-md:            0 5px 22px rgba(0, 0, 0, 0.55);
    --shadow-lg:            0 10px 36px rgba(0, 0, 0, 0.70);

    --shadow-green:         0 4px 18px rgba(77, 184, 96, 0.28);
    --shadow-indigo:        0 4px 18px rgba(129, 140, 248, 0.28);
    --shadow-amber:         0 4px 18px rgba(251, 191, 36, 0.28);
    --shadow-coral:         0 4px 18px rgba(248, 113, 113, 0.28);
    --shadow-teal:          0 4px 18px rgba(45, 212, 191, 0.28);
}






/* ==================== GLASS EFFECT UTILITY ==================== */
.glass-effect {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
}

/* ==================== TYPOGRAPHY ==================== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    background-attachment: fixed;
    transition: all var(--transition-base);
    overflow-x: hidden;
    font-weight: 400;
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

a { text-decoration: none;}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9375rem; }

/* ==================== BRAND ELEMENTS ==================== */
.brand-icon,
.brand-icon-small {
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.brand-icon {
    font-size: 0.5em;
}

.brand-icon-small {
    font-size: 0.6em;
}

.brand-c {
    color: var(--primary-color);
    font-weight: 700;
    font-size: inherit;
}

.brand-text {
    color: var(--text-primary);
    font-weight: 600;
    font-size: inherit;
}

/* ==================== DESKTOP SIDEBAR ==================== */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: var(--sidebar-collapsed);
    display: flex;
    flex-direction: column;
    transition: width var(--transition-smooth);
    z-index: 1000;
    overflow: hidden;
}

.sidebar.is-expanded {
    width: var(--sidebar-width);
}

.sidebar__brand {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

.sidebar__logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-size: 1.5rem;
    white-space: nowrap;
    transition: all var(--transition-base);
}

.sidebar__logo:hover {
    transform: translateX(2px);
}

.sidebar__nav {
    flex: 1;
    padding: 2.3rem 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem .8rem;
    margin: 0.5rem .8rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}



.sidebar__link:hover {
    background: var(--bg-hover);
    color: var(--primary-color);
    transform: translateX(4px);
}

.sidebar__link:hover::before {
    transform: translateX(0);
}

.sidebar__link-icon {
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: transform var(--transition-fast);
}

.sidebar__link:hover .sidebar__link-icon {
    transform: scale(1.1);
}

.sidebar__link-text {
    opacity: 0;
    transition: opacity var(--transition-base);
    font-weight: 500;
}

.sidebar.is-expanded .sidebar__link-text {
    opacity: 1;
}

.sidebar__toggle {
    position: absolute;
    right: 1rem;
    top: 1.25rem;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-color);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
    z-index: 10;
}

.sidebar__toggle:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: scale(1.1);
}

.sidebar.is-expanded .sidebar__toggle i {
    transform: rotate(180deg);
}

.sidebar:not(.is-expanded) .sidebar__link::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 1rem;
    padding: 0.625rem 1rem;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    font-size: 0.875rem;
    border-radius: var(--radius-md);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

.sidebar:not(.is-expanded) .sidebar__link:hover::after {
    opacity: 1;
}


/* Active state for sidebar links */
.sidebar__link.active {
    background: var(--bg-hover);
    color: var(--primary-color);
    font-weight: 600;
}

.sidebar__link.active::before {
    transform: translateX(0);
}

/* When collapsed, show a dot indicator */
.sidebar:not(.is-expanded) .sidebar__link.active .sidebar__link-icon::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--primary-color);
}

.sidebar__link-icon {
    position: relative;
}

/* ==================== TOP BAR ==================== */
.topbar {
    position: fixed;
    top: 0;
    left: var(--sidebar-collapsed);
    right: 0;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    transition: left var(--transition-smooth);
    z-index: 999;
}

.sidebar.is-expanded ~ .topbar {
    left: var(--sidebar-width);
}

.topbar__container {
    width: 100%;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar__left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.topbar__center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.topbar__center a {
    pointer-events: auto;
}

.topbar__menu-btn {
    display: none;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.topbar__menu-btn:hover {
    background: var(--bg-hover);
    transform: scale(1.05);
}

.topbar__brand {
    display: flex;
    text-decoration: none;
    font-size: 1.375rem;
    align-items: center;
    gap: 0.375rem;
    transition: transform var(--transition-fast);
}

.topbar__brand:hover {
    transform: translateX(-10%) scale(1.05);
}

/* Mobile override */
@media (max-width: 768px) {
    .topbar__center {
        position: static;
        transform: none;
    }
    
    .topbar__brand:hover {
        transform: scale(1.05);
    }
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.topbar__icon-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.topbar__icon-btn:hover {
    background: var(--bg-hover);
    color: var(--primary-color);
    transform: translateY(-2px);
}

.topbar__icon-btn i {
    font-size: 1.25rem;
}

.topbar__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--danger-color);
    color: white;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 0 5px;
    box-shadow: 0 2px 8px rgba(198, 61, 61, 0.3);
}

.topbar__theme-toggle {
    background: var(--bg-hover) !important;
}

.topbar__theme-toggle:hover {
    background: var(--primary-color) !important;
    color: white !important;
}

.topbar__theme-toggle:hover i {
    transform: rotate(180deg);
}

.topbar__profile {
    position: relative;
}

.topbar__profile-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    border: 1px solid var(--border-color);
    background: var(--bg-hover);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.topbar__profile-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.topbar__avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: var(--shadow-xs);
}

.topbar__username {
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 500;
}

.topbar__profile-arrow {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    transition: transform var(--transition-fast);
}

.topbar__profile.is-open .topbar__profile-arrow {
    transform: rotate(180deg);
}

.topbar__dropdown {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    min-width: 220px;
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: all var(--transition-base);
}

.topbar__profile.is-open .topbar__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.topbar__dropdown-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    font-weight: 500;
}

.topbar__dropdown-item:hover {
    background: var(--bg-hover);
    color: var(--primary-color);
    transform: translateX(4px);
}

.topbar__dropdown-item--danger {
    color: var(--danger-color);
}

.topbar__dropdown-item--danger:hover {
    background: rgba(198, 61, 61, 0.1);
    color: var(--danger-color);
}

.topbar__dropdown-item i {
    font-size: 1.125rem;
    width: 24px;
}

.topbar__dropdown-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 0.75rem 0;
}

/* ==================== BOTTOM NAVIGATION (MOBILE) ==================== */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-height);
    z-index: 1000;
    padding: 0.5rem;
}

.bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--text-tertiary);
    text-decoration: none;
    font-size: 0.6875rem;
    font-weight: 600;
    transition: all var(--transition-fast);
    border-radius: var(--radius-md);
    position: relative;
}

.bottom-nav__item i {
    font-size: 1.25rem;
    transition: transform var(--transition-fast);
}

.bottom-nav__item:hover {
    color: var(--primary-color);
}

.bottom-nav__item:hover i {
    transform: scale(1.1);
}

.bottom-nav__item--primary {
    color: white;
    position: relative;
    z-index: 10;
}

.bottom-nav__primary-bg {
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: var(--radius-full);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    box-shadow: 0 8px 24px rgba(45, 80, 22, 0.3);
    transition: all var(--transition-fast);
}

.bottom-nav__item--primary:hover .bottom-nav__primary-bg {
    transform: translate(-50%, -50%) scale(1.1);
}

.bottom-nav__item--primary i {
    font-size: 1.5rem;
}

/* ==================== MOBILE MENU ==================== */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    visibility: hidden;
}

.mobile-menu.is-open {
    visibility: visible;
}

/* Modification needed --------------- mobile hamburger menu */
.mobile-menu__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 8, .0); /* Increased opacity */
    backdrop-filter: blur(0px); /* Reduced blur */
    opacity: 0;
    transition: opacity var(--transition-base);
}

.mobile-menu.is-open .mobile-menu__overlay {
    opacity: 1;
}

.mobile-menu__content {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 300px;
    max-width: 85%;
    background: var(--bg-primary); /* Changed from glass-bg */
    border-right: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);  /* Hidden */
    display: flex;
    flex-direction: column;
    z-index: 2001
}

.mobile-menu.is-open .mobile-menu__content {
    transform: translateX(0);
}

.mobile-menu__header {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

.mobile-menu__brand {
    text-decoration: none;
    font-size: 1.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.mobile-menu__close {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.mobile-menu__close:hover {
    background: var(--bg-hover);
    color: var(--primary-color);
    transform: rotate(90deg);
}

.mobile-menu__nav {
    flex: 1;
    padding: 2rem 1.25rem;
    overflow-y: auto;
}

.mobile-menu__link {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.mobile-menu__link:hover {
    background: var(--bg-hover);
    color: var(--primary-color);
    transform: translateX(8px);
}

.mobile-menu__link i {
    font-size: 1.25rem;
    width: 28px;
}

/* ==================== GUEST NAVIGATION ==================== */
.guest-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height);
    z-index: 1000;
}

.guest-nav__container {
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.guest-nav__brand {
    text-decoration: none;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: transform var(--transition-fast);
}

.guest-nav__brand:hover {
    transform: translateX(4px);
}

.guest-nav__links {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.guest-nav__link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--transition-fast);
    position: relative;
}

.guest-nav__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-color);
    transform: scaleX(0);
    transition: transform var(--transition-fast);
}

.guest-nav__link:hover {
    color: var(--primary-color);
}

.guest-nav__link:hover::after {
    transform: scaleX(1);
}

.guest-nav__btn {
    padding: 0.75rem 1.75rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: var(--shadow-sm);
}

.guest-nav__btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.guest-nav__btn i {
    transition: transform var(--transition-fast);
}

.guest-nav__btn:hover i {
    transform: translateX(4px);
}

.guest-nav__theme-toggle {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-color);
    background: var(--bg-hover);
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.guest-nav__theme-toggle:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: scale(1.1);
}

.guest-nav__theme-toggle:hover i {
    transform: rotate(180deg);
}

.guest-nav__mobile-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.guest-nav__mobile-toggle:hover {
    background: var(--bg-hover);
}

.guest-nav__mobile-menu {
    display: none;
    padding: 1.5rem;
    border-top: 1px solid var(--border-subtle);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
}

.guest-nav__mobile-link {
    display: block;
    padding: 1rem 1.25rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.guest-nav__mobile-link:hover {
    background: var(--bg-hover);
    color: var(--primary-color);
}

.guest-nav__mobile-link--primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    font-weight: 600;
    text-align: center;
}

/* ==================== MAIN CONTENT ==================== */
.main-content {
    margin-left: var(--sidebar-collapsed);
    margin-top: var(--topbar-height);
    min-height: calc(100vh - var(--topbar-height));
    padding: 2.5rem;
    transition: margin-left var(--transition-smooth);
}

.sidebar.is-expanded ~ .topbar ~ .main-content,
.sidebar.is-expanded ~ .main-content {
    margin-left: var(--sidebar-width);
}

/* ==================== FLASH MESSAGES ==================== */
.flash-container {
    position: fixed;
    top: calc(var(--topbar-height) + 1.5rem);
    right: 1.5rem;
    z-index: 1100;
    max-width: 420px;
}

.flash-message {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.flash-message::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.flash-message--success::before {
    background: var(--success-color);
}

.flash-message--danger::before {
    background: var(--danger-color);
}

.flash-message--warning::before {
    background: var(--warning-color);
}

.flash-message--info::before {
    background: var(--info-color);
}

@keyframes slideInRight {
    from {
        transform: translateX(120%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.flash-message i {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.flash-message--success i { color: var(--success-color); }
.flash-message--danger i { color: var(--danger-color); }
.flash-message--warning i { color: var(--warning-color); }
.flash-message--info i { color: var(--info-color); }

.flash-message span {
    flex: 1;
    color: var(--text-secondary);
    font-weight: 500;
}

.flash-message__close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.flash-message__close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: scale(1.1);
}

/* ==================== FOOTER ==================== */
.footer {
    margin-left: var(--sidebar-collapsed);
    border-top: 1px solid var(--border-subtle);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    padding: 3rem 0;
    transition: margin-left var(--transition-smooth);
    margin-top: 4rem;
}

.sidebar.is-expanded ~ .footer {
    margin-left: var(--sidebar-width);
}

.footer__container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.footer__brand {
    text-align: center;
}

.footer__logo {
    font-size: 1.375rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.footer__tagline {
    color: var(--text-tertiary);
    font-size: 0.9375rem;
    margin: 0;
    font-weight: 500;
}

.footer__links {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.footer__link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    position: relative;
}

.footer__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-color);
    transform: scaleX(0);
    transition: transform var(--transition-fast);
}

.footer__link:hover {
    color: var(--primary-color);
}

.footer__link:hover::after {
    transform: scaleX(1);
}

.footer__credits {
    text-align: center;
    color: var(--text-muted);
}

.footer__credits i {
    color: var(--danger-color);
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1); }
}

/* ==================== BUTTONS ==================== */
.btn {
    padding: 0.875rem 1.75rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9375rem;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:active::before {
    width: 300px;
    height: 300px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

.btn-ghost {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.btn-ghost:hover {
    background: var(--bg-tertiary);
    transform: translateY(-2px);
}

/* ==================== FORMS ==================== */
.form-label {
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.625rem;
    font-size: 0.9375rem;
    display: block;
}

.form-control {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.875rem 1.25rem;
    color: var(--text-primary);
    font-size: 0.9375rem;
    transition: all var(--transition-fast);
    width: 100%;
}

.form-control:focus {
    background: var(--bg-primary);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(45, 80, 22, 0.1);
    outline: none;
    transform: translateY(-2px);
}

.form-control::placeholder {
    color: var(--text-muted);
}

/* ==================== CARDS ==================== */
.card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-xs);
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
    border-color: var(--primary-color);
}

.card-header {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}

.card-body {
    color: var(--text-secondary);
}

/* ==================== BADGES ==================== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.badge-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
}

.badge-success {
    background: var(--success-color);
    color: white;
}

.badge-danger {
    background: var(--danger-color);
    color: white;
}

/* ==================== UTILITIES ==================== */
.text-muted {
    color: var(--text-muted) !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
    transition: background var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* ==================== LOADING STATES ==================== */
.spinner-border {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-rotate 0.75s linear infinite;
}

@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}

/* ==================== HOVER EFFECTS ==================== */
.hover-lift {
    transition: transform var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-4px);
}

.hover-scale {
    transition: transform var(--transition-base);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* ==================== RESPONSIVE DESIGN ==================== */

/* Tablet and below */
@media (max-width: 1024px) {
    :root {
        --topbar-height: 64px;
        --bottom-nav-height: 64px;
    }

    /* Keep sidebar visible on tablet, just make it collapsible */
    .sidebar {
        width: var(--sidebar-collapsed);
    }
    
    .sidebar.is-expanded {
        width: var(--sidebar-width);
        box-shadow: var(--shadow-lg);
    }
    
    .topbar {
        left: var(--sidebar-collapsed);
    }
    
    .sidebar.is-expanded ~ .topbar {
        left: var(--sidebar-width);
    }
    
    .main-content {
        margin-left: var(--sidebar-collapsed);
        padding: 2rem 1.5rem;
    }
    
    .sidebar.is-expanded ~ .topbar ~ .main-content,
    .sidebar.is-expanded ~ .main-content {
        margin-left: var(--sidebar-width);
    }
    
    .footer {
        margin-left: var(--sidebar-collapsed);
    }
    
    .sidebar.is-expanded ~ .footer {
        margin-left: var(--sidebar-width);
    }
    
    .flash-container {
        right: 1rem;
    }
    
    .guest-nav__links {
        display: none;
    }
    
    .guest-nav__mobile-toggle {
        display: block;
    }
    
    .guest-nav__mobile-menu.is-open {
        display: block;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.625rem; }
    h3 { font-size: 1.25rem; }
}

/* Mobile only - below 768px */
@media (max-width: 768px) {
    /* Hide sidebar completely on mobile */
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar.is-expanded {
        transform: translateX(0);
    }
    
    .topbar {
        left: 0;
    }
    
    .main-content {
        margin-left: 0;
        padding: 1.5rem 1rem;
        margin-bottom: var(--bottom-nav-height);
    }
    
    .footer {
        margin-left: 0;
    }
    
    .topbar__menu-btn {
        display: block;
    }
    
    .topbar__brand {
        display: flex;
    }
    
    .topbar__username {
        display: none;
    }
    
    .topbar__theme-toggle {
        display: none;
    }
    
    .bottom-nav {
        display: flex;
    }
    
    .topbar__container {
        padding: 0 1.25rem;
    }
    
    .footer__container {
        padding: 0 1.5rem;
    }
    
    .card {
        padding: 1.5rem;
    }
    
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
}

/* Small mobile */
@media (max-width: 480px) {
    .flash-container {
        top: calc(var(--topbar-height) + 0.75rem);
        left: 0.75rem;
        right: 0.75rem;
    }
    
    .flash-message {
        padding: 1rem;
    }
    
    .main-content {
        padding: 1.25rem 0.875rem;
    }
}

/* ==================== PRELOAD MODE (PREVENT FLASH) ==================== */
.preload-mode * {
    transition: none !important;
}



/* ------ profile.html page styles (for displaying the academic details.. (also used for the user_profile file which is viewing other user's profile).----- */

  /* ── DETAILS — FLOWING NARRATIVE ────────────────────────────
     Replaces the rigid grid. Each piece of info sits as a
     natural inline "fact line" — icon · label · value.
     No boxes, no borders. Whitespace does the separating.
  ── */
  .op-details-flow {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .op-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition-fast);
  }

  .op-detail-row:last-child {
    border-bottom: none;
  }

  .op-detail-row__icon {
    width: 32px; height: 32px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px;
  }

  .op-detail-row__icon svg {
    width: 15px; height: 15px;
    stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }

  /* Icon color variants */
  .op-detail-row__icon--amber {
    background: var(--amber-dim);
    color: var(--amber-color);
  }
  .op-detail-row__icon--indigo {
    background: var(--indigo-dim);
    color: var(--indigo-color);
  }
  .op-detail-row__icon--teal {
    background: var(--teal-dim);
    color: var(--teal-color);
  }
  .op-detail-row__icon--coral {
    background: var(--coral-dim);
    color: var(--coral-color);
  }
  .op-detail-row__icon--green {
    background: var(--primary-dim);
    color: var(--primary-color);
  }

  .op-detail-row__content {
    flex: 1; min-width: 0;
  }

  .op-detail-row__label {
    font-family: var(--font-display);
    font-size: 10px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.9px;
    margin-bottom: 2px;
  }

  .op-detail-row__value {
    font-family: var(--font-display);
    font-size: var(--text-sm); font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
  }

  .op-detail-row__value--empty {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-style: italic;
    font-weight: 400;
  }

  /* Academic sub-line (course type / year) */
  .op-detail-row__sub {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 1px;
  }

  .op-detail-row--highlight {
    border-radius: 10px;
    padding: 10px;
    margin-left: 0;
    margin-bottom: 1px;
  }

  .op-academic-row--highlight{
    background: linear-gradient(
      90deg,
      var(--primary-dim),
      transparent
    );
  }
  .op-email-row--highlight{
    background: linear-gradient(
      90deg,
      var(--indigo-dim),
      transparent
    );
  }
  .op-department-row--highlight{
    background: linear-gradient(
      90deg,
      var(--teal-dim),
      transparent
    );
  }
  .op-location-row--highlight{
    background: linear-gradient(
      90deg,
      var(--coral-dim),
      transparent
    );
  }

.op-section-label__left {
    display: flex; align-items: center; gap: 7px;
  }


.op-section-edit {
    font-family: var(--font-display);
    font-size: var(--text-xs); font-weight: 600;
    color: var(--indigo-color); text-decoration: none;
    display: flex; align-items: center; gap: 3px;
    transition: color var(--transition-fast);
    background: none; border: none; padding: 0; cursor: pointer;
  }
  .op-section-edit svg {
    width: 11px; height: 11px; stroke: currentColor;
    fill: none; stroke-width: 2; stroke-linecap: round;
  }
  .op-section-edit:hover { color: var(--indigo-hover); }