:root {
    /* Spacing System */
    --space-xs: 2px;
    --space-tn: 4px;
    --space-sm: 8px;
    --space-md-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Radii */
    --radius-pill: 50px;
    --radius-card: 12px;
    --radius-btn: 6px;
    --radius-badge: 4px;

    /* Fonts */
    --font-weight-heavy: 600;
    --font-weight-medium: 500;
    --font-weight-normal: 400;

    /* ===The Brand Colors)=== */
    --brand-dark: #191A19;
    --brand-white: #e1f0e8;
    --brand-primary: #134611;
    --brand-secondary: #3e8914;

    /* ===How colors are applied=== */

    /* --- Backgrounds & Surfaces --- */
    --bg-base: var(--brand-dark);
    --bg-surface: #222422;          /* Slightly lighter for standard cards */
    --bg-surface-raised: #2a2e2a;   /* Lighter still for dropdowns/modals */
    --bg-surface-primary: var(--brand-primary); /* For heavily branded containers */

    /* --- Typography --- */
    --text-main: var(--brand-white);
    --text-muted: #8f9e95;          /* A desaturated, tinted grey based on the white */
    --text-inverse: var(--brand-dark); /* For text sitting on top of light backgrounds */
    --text-on-primary: #ffffff;     /* Pure white for maximum contrast on primary buttons */

    /* --- Borders & Dividers --- */
    --border-subtle: #252725;       /* Faint lines between list items or table rows */
    --border-default: #333833;      /* Standard card and input borders */
    --border-hover: #4a524a;        /* When a user hovers over an interactive card/input */
    --border-focus: var(--brand-secondary); /* Bright ring for keyboard accessibility */

    /* --- Interactive States: Primary --- */
    --primary-base: var(--brand-primary);
    --primary-hover: #1b6318;       /* Lighter green for hover */
    --primary-active: #0b2b0a;      /* Darker, "pressed" green for active clicks */
    --primary-disabled: #273826;    /* Desaturated, low-contrast green */

    /* --- Interactive States: Secondary --- */
    --secondary-base: var(--brand-secondary);
    --secondary-hover: #4da819;     /* Lighter, vibrant leaf green */
    --secondary-active: #2f690f;    /* Darker, "pressed" vibrant green */
    --secondary-disabled: #354a2b;  /* Desaturated */

    /* --- Semantic / Status Feedback --- */
    /* Muted tones to fit the dark theme without being painfully bright */
    --status-error: #d9534f;        
    --status-error-bg: #4a1c1c;     /* Faded red background for error toast notifications */
    --status-warning: #f0ad4e;      
    --status-warning-bg: #fff3cd;   /* Faded yellow/orange background */
    --status-info: #5bc0de;
    --status-success: var(--brand-secondary); /* Tied back to your brand */
    --status-success-bg: #d4edda;

    /* --- Overlays & Shadows --- */
    --overlay-dark: #191a19cc;      /* 80% opacity dark background for modal backdrops */
    --overlay-light: #e1f0e80d;     /* 5% opacity white for subtle table row striping */
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);

    /* ===DATA VISUALIZATION (Chart Colors)=== */
    /* Shuffled, balanced rainbow spectrum anchored by the brand greens */
    --chart-1: var(--brand-secondary); /* 1. Brand Green (Starts strong) */
    --chart-2: #2672bd;                /* 2. Blue (Cool contrast) */
    --chart-3: #e07a24;                /* 3. Orange (Warm contrast) */
    --chart-4: #953b96;                /* 4. Purple (Cool contrast) */
    --chart-5: #cf9e17;                /* 5. Gold (Warm contrast) */
    --chart-6: var(--brand-primary);   /* 6. Dark Brand Green (Deep anchor) */
    --chart-7: #c4437a;                /* 7. Pink/Magenta (Bright contrast) */
    --chart-8: #158c7a;                /* 8. Teal (Cool contrast) */
    --chart-9: #d14545;                /* 9. Red (Warm contrast) */
    --chart-10: #5844a8;               /* 10. Indigo (Deep cool finish) */
    
    --chart-other: #858b87;            /* 11. Muted, desaturated gray-green for 'Other' */

    /* === SURFACE TEXTURES === */
    /* Micro-Mesh Pattern (White dots at 4% opacity) */
    --pattern-mesh: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3h1v1H1V3zm2-2h1v1H3V1z' fill='%23ffffff' fill-opacity='0.04' fill-rule='evenodd'/%3E%3C/svg%3E");
    
    /* Soft Top Lighting (Fades from 4% white at the top to transparent at the bottom) */
    --surface-lighting: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%);

    /* Fluid Type Scale — clamp(mobile-floor, viewport-relative, desktop-ceiling) */
    --text-2xs:  clamp(0.5rem,  1.1vw, 0.55rem);   /* micro-labels */
    --text-xs:   clamp(0.6rem,  1.4vw, 0.65rem);   /* captions, badges       */
    --text-sm:   clamp(0.7rem,  1.7vw, 0.75rem);   /* labels, subtitles      */
    --text-base: clamp(0.8rem,  1.9vw, 0.85rem);   /* secondary body text    */
    --text-md:   clamp(0.85rem, 2.1vw, 0.9rem);    /* primary body / inputs  */
    --text-lg:   clamp(0.9rem,  2.3vw, 0.95rem);   /* large body             */
    --text-xl:   clamp(1rem,    2.5vw, 1.1rem);    /* section headings h3    */
    --text-2xl:  clamp(1.1rem,  3vw,   1.25rem);   /* card titles            */
    --text-3xl:  clamp(1.25rem, 4vw,   1.5rem);    /* page headings          */
    --text-4xl:  clamp(1.5rem,  5vw,   1.75rem);   /* Extra Large KPIs       */
}

/* =========================================
   LIGHT THEME OVERRIDE
    Trigger by adding class="light-theme" to <body>
   ========================================= */
.light-theme {
    /* --- Backgrounds & Surfaces --- */
    --bg-base: var(--brand-white);  /* The soft #e1f0e8 mint-white */
    --bg-surface: #ffffff;          /* Pure white for crisp cards */
    --bg-surface-raised: #ffffff;   /* Pure white (relies on shadow for depth here) */
    
    /* --- Typography --- */
    --text-main: var(--brand-dark); /* #191A19 for high contrast reading */
    --text-muted: #6b7a70;          /* A darker grey-green for secondary text */
    --text-inverse: var(--brand-white); 
    
    /* --- Borders & Dividers --- */
    --border-subtle: #d0ded6;       /* Very faint green-tinted grey */
    --border-default: #b5c7bc;      /* Standard borders */
    --border-hover: #8ba395;        /* Darkens slightly on hover */
    /* --border-focus remains var(--brand-secondary) */

    /* --- Semantic / Status Feedback --- */
    /* Slightly darkened to ensure they don't wash out on a white background */
    --status-error-bg: #ffebeb;
    --status-warning-bg: #fff8eb;

    /* --- Overlays & Shadows --- */
    /* Overlays switch to using black with low opacity instead of white */
    --overlay-light: #191a190a;     /* 4% black for subtle table row striping */
    
    /* Shadows must be tighter and slightly darker in light mode to create depth against white */
    --shadow-sm: 0 1px 2px 0 rgba(25, 26, 25, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(25, 26, 25, 0.1), 0 2px 4px -1px rgba(25, 26, 25, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(25, 26, 25, 0.15), 0 4px 6px -2px rgba(25, 26, 25, 0.05);

    /* Swap to a dark mesh pattern for light mode */
    --pattern-mesh: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3h1v1H1V3zm2-2h1v1H3V1z' fill='%23191a19' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
    
    /* Stronger top lighting to create depth against white backgrounds */
    --surface-lighting: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
}

/* =========================================
   GLOBAL LAYOUT
   ========================================= */
*, *::before, *::after {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

/* =========================================
   SCROLLBAR
   ========================================= */
/* Standard for Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) var(--bg-surface);
}

/* Chrome, Edge, and Safari */
::-webkit-scrollbar {
    width: 8px; /* Width of vertical scrollbar */
    height: 8px; /* Height of horizontal scrollbar */
}

::-webkit-scrollbar-track {
    background: var(--bg-surface); /* Background of the track */
}

::-webkit-scrollbar-thumb {
    background-color: var(--border-default); /* The moving part */
    border-radius: var(--radius-pill); /* Makes it match your other UI elements */
    border: 2px solid var(--bg-surface); /* Adds a little "breathing room" around the thumb */
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--border-hover); /* Darken when hovered */
    }

/* =========================================
   BASE CHANGES
   ========================================= */
body {
    min-height: 100vh;

    display: flex;
    flex-direction: column; /* Everything stacks vertically: Nav -> Main -> Footer */
    
    background-color: var(--bg-base);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.app-main {
    max-width: 100%;
    flex: 1;
    padding: var(--space-md) var(--space-md);
}

/* =========================================
   BOOTSTRAP & FLAG ICON OVERRIDE
   ========================================= */
i.bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.fi {
    background-clip: padding-box !important;
    background-size: cover !important;
}

    .fi.shadow-md {
        border-radius: 4px;
        overflow: hidden;
    }

/* =========================================
LAYOUT & UTILITIES
========================================= */
.container {
    width: 100%;
    /*max-width: 1200px;*/
    margin: 0 auto;
    padding: 0 var(--space-md);
}

@media screen and (max-width: 909px) {
    .container {
        margin: 0px;
        padding: 0px;
    }
}

.align-start {
    align-items: flex-start;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-align {
    display: flex;
    align-items: center;
}

.flex-stretch {
    display: flex;
    align-items: stretch;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-grow-1 {
    flex-grow: 1;
    min-width: 0; /* Prevents text truncation from blowing out the flex container */
}

.d-none {
    display: none !important;
}

.text-center {
    text-align: center;
}

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

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

.text-accent {
    color: var(--brand-secondary);
}

.base-bg {
    background-color: var(--bg-base);
}

.negative-margins {
    margin: calc(var(--space-sm) * -1);
    padding: var(--space-sm);
}

@media screen and (max-width: 909px) {
    .negative-margins {
        margin: calc(var(--space-xs) * -1);
        padding: var(--space-xs);
    }
}

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.rounded-pill {
    border-radius: var(--radius-pill);
}

.rounded-card {
    border-radius: var(--radius-card);
}

.rounded-button {
    border-radius: var(--radius-btn);
}

.rounded-badge {
    border-radius: var(--radius-badge);
}

.circle {
    border-radius: 50%;
}

.icon-space {
    margin-right: var(--space-sm);
}

.icon-space-sm {
    margin-right: var(--space-tn);
}

.hover-glow {
    transition: filter 0.3s ease-in-out;
}

    .hover-glow:hover {
        filter: drop-shadow(0px 0px var(--space-tn) var(--brand-white));
    }

.hover-grow {
    transition: transform 0.3s ease;
    transform-origin: center;
}

    .hover-grow:hover {
        transform: scale(1.2);
    }

.hover-grow-sm {
    transition: transform 0.3s ease;
    transform-origin: center;
}

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

.hover-bg-raised {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

    .hover-bg-raised:hover {
        background-color: var(--bg-surface-raised);
    }

.gap-xs {
    gap: var(--space-xs);
}

.gap-sm {
    gap: var(--space-sm);
}

.gap-md {
    gap: var(--space-md);
}

.gap-lg {
    gap: var(--space-lg);
}

.m-0 {
    margin: 0;
}

.m-xs {
    margin: var(--space-xs);
}

.m-tn {
    margin: var(--space-tn);
}

.m-sm {
    margin: var(--space-sm);
}

.m-md-sm {
    margin: var(--space-md-sm);
}

.m-md {
    margin: var(--space-md);
}

.m-lg {
    margin: var(--space-lg);
}

.m-xl {
    margin: var(--space-xl);
}

.mt-xs {
    margin-top: var(--space-xs);
}

.mt-tn {
    margin-top: var(--space-tn);
}

.mt-sm {
    margin-top: var(--space-sm);
}

.mt-md-sm {
    margin-top: var(--space-md-sm);
}

.mt-md {
    margin-top: var(--space-md);
}

.mt-lg {
    margin-top: var(--space-lg);
}

.mt-xl {
    margin-top: var(--space-xl);
}

.ml-xs {
    margin-left: var(--space-xs);
}

.ml-tn {
    margin-left: var(--space-tn);
}

.ml-sm {
    margin-left: var(--space-sm);
}

.ml-md-sm {
    margin-left: var(--space-md-sm);
}

.ml-md {
    margin-left: var(--space-md);
}

.ml-lg {
    margin-left: var(--space-lg);
}

.ml-xl {
    margin-left: var(--space-xl);
}

.mr-xs, .me-xs {
    margin-right: var(--space-xs);
}

.mr-tn, .me-tn {
    margin-right: var(--space-tn);
}

.mr-sm, .me-sm {
    margin-right: var(--space-sm);
}

.mr-md-sm, .me-md-sm {
    margin-right: var(--space-md-sm);
}

.mr-md, .me-md {
    margin-right: var(--space-md);
}

.mr-lg, .me-lg {
    margin-right: var(--space-lg);
}

.mr-xl, .me-xl {
    margin-right: var(--space-xl);
}

.mb-xs {
    margin-bottom: var(--space-xs);
}

.mb-tn {
    margin-bottom: var(--space-tn);
}

.mb-sm {
    margin-bottom: var(--space-sm);
}

.mb-md-sm {
    margin-bottom: var(--space-md-sm);
}

.mb-md {
    margin-bottom: var(--space-md);
}

.mb-lg {
    margin-bottom: var(--space-lg);
}

.mb-xl {
    margin-bottom: var(--space-xl);
}

.ms-xs, .mh-xs {
    margin-left: var(--space-xs);
    margin-right: var(--space-xs);
}

.ms-tn, .mh-tn {
    margin-left: var(--space-tn);
    margin-right: var(--space-tn);
}

.ms-sm, .mh-sm {
    margin-left: var(--space-sm);
    margin-right: var(--space-sm);
}

.ms-md-sm, .mh-md-sm {
    margin-left: var(--space-md-sm);
    margin-right: var(--space-md-sm);
}

.ms-md, .mh-md {
    margin-left: var(--space-md);
    margin-right: var(--space-md);
}

.ms-lg, .mh-lg {
    margin-left: var(--space-lg);
    margin-right: var(--space-lg);
}

.ms-xl, .mh-xl {
    margin-left: var(--space-xl);
    margin-right: var(--space-xl);
}

.mv-xs {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.mv-tn {
    margin-top: var(--space-tn);
    margin-bottom: var(--space-tn);
}

.mv-sm {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.mv-md-sm {
    margin-top: var(--space-md-sm);
    margin-bottom: var(--space-md-sm);
}

.mv-md {
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
}

.mv-lg {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.mv-xl {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.max-w-200 {
    max-width: 200px;
}

.max-w-250 {
    max-width: 250px;
}

.max-w-500 {
    max-width: 500px;
}

.max-h-500 {
    max-height: 500px;
}

.font-weight-heavy {
    font-weight: var(--font-weight-heavy);
}

.font-weight-medium {
    font-weight: var(--font-weight-medium);
}

.font-weight-normal {
    font-weight: var(--font-weight-normal);
}

.text-3xs {
    font-size: var(--text-2xs);
}

.text-xs {
    font-size: var(--text-xs);
}

.text-sm {
    font-size: var(--text-sm);
}

.text-base {
    font-size: var(--text-base);
}

.text-md {
    font-size: var(--text-md);
}

.text-lg {
    font-size: var(--text-lg);
}

.text-xl {
    font-size: var(--text-xl);
}

.text-2xl {
    font-size: var(--text-2xl);
}

.text-3xl {
    font-size: var(--text-3xl);
}

.p-0 {
    padding: 0 !important;
}

.p-xs {
    padding: var(--space-xs);
}

.p-sm {
    padding: var(--space-sm);
}

.p-md-sm {
    padding: var(--space-md-sm);
}

.p-md {
    padding: var(--space-md);
}

.p-lg {
    padding: var(--space-lg);
}

.p-xl {
    padding: var(--space-xl);
}

.border-bottom {
    border-bottom: 1px solid var(--border-subtle);
}

.border-default {
    border: 1px solid var(--border-default);
}

.d-inline-block {
    display: inline-block;
}

.text-decoration-none {
    text-decoration: none;
}

.text-danger {
    color: var(--status-error);
}

.text-success {
    color: var(--status-success);
}

.text-info {
    color: var(--status-info);
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-y-auto {
    overflow-y: auto;
    scrollbar-width: thin; /* Clean scrollbars for the inner pane */
}

.img-70 {
    width: 70px;
    height: 70px;
}

.opacity-25 {
    opacity: 0.25;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-75 {
    opacity: 0.75;
}

.pointer-events-none {
    pointer-events: none;
}

.pointer-events-auto {
    pointer-events: auto;
}

.transition-all {
    transition: all 0.2s ease;
}

/* Helper for text truncation */
.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================
   SURFACE MATERIALS
   ========================================= */
.surface-textured {
    /* Multiple backgrounds: The lighting gradient sits ON TOP of the mesh pattern */
    background-image: var(--surface-lighting), var(--pattern-mesh);
    /* Note: This does NOT override background-color. 
       It safely draws on top of whatever color the element natively has! */
}

/* =========================================
   NAVBAR BASE
   ========================================= */
.navbar {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--bg-surface-primary);
    box-shadow: var(--shadow-sm);
}

.nav-brand {
    gap: var(--space-sm);
    text-decoration: none;
    color: var(--text-main);
}

.nav-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.brand {
    font-weight: 700;
    font-size: var(--text-2xl);
}

.text-mobile {
    display: none;
}

.text-desktop {
    display: inline;
}

/* =========================================
   NAVBAR CONTENT
   ========================================= */
.nav-content {
    flex-grow: 1;
}

/* --- Global Search --- */
.nav-search-wrapper {
    width: 100%;
    max-width: 800px;
    margin-left: var(--space-xl);
    position: relative;
}

.search-icon {
    position: absolute;
    top: 50%;
    left: var(--space-sm);
    transform: translateY(-50%);
    color: var(--text-muted);
    z-index: 5;
}

.search-input {
    width: 80%;
    padding: var(--space-sm) var(--space-md) var(--space-sm) 35px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-btn);
    background-color: var(--bg-base);
    color: var(--text-main);
    transition: all 0.2s ease-in-out;
}

    .search-input:focus {
        width: 100%;
        background-color: var(--bg-surface-raised);
        box-shadow: var(--shadow-lg);
        border-color: var(--border-focus);
        outline: none;
    }

.search-dropdown {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-btn);
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1060;
    display: none;
    background-color: var(--bg-surface-raised);
    box-shadow: var(--shadow-md);
    /* --- Mobile Improvements --- */
    max-height: 80vh; /* Prevents the dropdown from exceeding 70% of screen height */
    overflow-y: auto; /* Enables internal scrollbar */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling for mobile */
}

/* Ensure the category headers are distinct but subtle */
.search-category-header {
    padding: var(--space-tn) var(--space-md);
    background-color: var(--bg-surface);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05rem;
}

.search-result-item {
    padding: 1px var(--space-md);
    text-decoration: none;
    color: var(--text-main);
    transition: background 0.2s ease;
}

    .search-result-item:hover {
        background-color: var(--overlay-light);
    }

.search-subtext {
    min-height: 20px;
    gap: var(--space-tn);
    margin-top: 2px;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.search-footer {
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--border-subtle);
    background-color: var(--bg-base);
    cursor: pointer;
}

    .search-footer:hover {
        background-color: var(--bg-surface-primary);
    }

.link-search-more {
    display: block;
    text-decoration: none;
    color: var(--text-muted);
    font-size: var(--text-base);
    font-weight: 500;
}

.search-footer:hover .link-search-more {
    color: var(--brand-white);
}

/* --- Nav Links & Dropdown --- */
.nav-links {
    margin-left: auto;
    list-style: none;
    gap: var(--space-lg);
}

    .nav-links a {
        display: flex;
        align-items: center;
        text-decoration: none;
        font-weight: 500;
        color: var(--text-muted);
        transition: color 0.2s ease;
    }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--text-main);
        }

    /* SVG icons inline styling */
    .nav-links svg {
        margin-right: 6px;
    }

.dropdown {
    position: relative;
}

.dropdown-content {
    min-width: 180px;
    padding: var(--space-sm) 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1050;
    display: none;
    list-style: none;
    background-color: var(--bg-surface-raised);
    box-shadow: var(--shadow-md);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content li a {
    padding: var(--space-sm) var(--space-lg);
    color: var(--text-main);
}

    .dropdown-content li a:hover {
        background-color: var(--overlay-light);
    }

/* =========================================
   COMPACT TOOLBAR
   ========================================= */
.compact-toolbar {
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.toolbar-sync-area {
    gap: var(--space-sm);
}

.toolbar-controls-area {
    gap: var(--space-sm);
}

.hide-on-mobile {
    display: inline;
}

.hide-on-desktop {
    display: none;
}

/* Specific class for icons so they maintain proper flex alignment on desktop */
.hide-icon-mobile {
    display: inline-flex;
}

@media screen and (max-width: 768px) {
    .hide-on-mobile, .hide-icon-mobile {
        display: none !important;
    }

    .hide-on-desktop {
        display: inline !important;
    }

    /* Forces the sync notification to take the full top row */
    .toolbar-sync-area {
        width: 100%;
        margin-bottom: 2px; /* mobile spacing for new line, not sure how much I like this yet */
    }

    /* Spreads the 3 filter controls evenly across the second row */
    .toolbar-controls-area {
        width: 100%;
        justify-content: space-between;
    }
}

/* =========================================
   SEGMENTED CONTROL (Metric Toggle)
   ========================================= */
.segmented-control {
    display: inline-flex;
    background-color: var(--bg-surface-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    padding: 2px;
}

.segment-btn {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: var(--space-tn) var(--space-sm); /* Very slim padding */
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .segment-btn:hover {
        color: var(--text-main);
    }

    .segment-btn.active {
        background-color: var(--primary-base);
        color: var(--text-on-primary);
        box-shadow: var(--shadow-sm);
    }

/* =========================================
   SIDE PANEL (Drawer)
   ========================================= */
.drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--overlay-dark);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

    .drawer-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

.filter-drawer {
    position: fixed;
    top: 0;
    bottom: 0; /* Anchors firmly to the bottom of the visual viewport */
    right: -350px; /* Slim 350px width */
    width: 100%;
    max-width: 350px;
    height: 100%; /* Fallback for older browsers */
    height: 100dvh; /* Modern fix: Dynamic Viewport Height accounts for the URL bar */
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-lg);
    border-left: 1px solid var(--border-default);
    z-index: 1050;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .filter-drawer.open {
        right: 0;
    }

.drawer-header {
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
}

.drawer-title {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-heavy);
    color: var(--text-main);
}

.drawer-body {
    padding: var(--space-md);
    flex-grow: 1;
    overflow-y: auto;
}

.drawer-footer {
    padding: var(--space-md);
    /* Safe-area-inset adds extra padding at the bottom only if the device has a home bar/notch */
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-subtle);
    background-color: var(--bg-surface-raised);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
}

.drawer-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--text-2xl);
}

    .drawer-close-btn:hover {
        color: var(--text-main);
    }

/* =========================================
   Flash Messages (Alerts)
   ========================================= */
.flash-container {
    margin-bottom: var(--space-lg);
}

.alert {
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-sm);
    border-radius: var(--radius-btn);
    border-left: 4px solid var(--border-default);
    background-color: var(--bg-surface);
    color: var(--brand-dark);
    box-shadow: var(--shadow-sm);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.alert-info {
    background-color: var(--status-info);
}

.alert-success {
    border-left-color: var(--status-success);
    background-color: var(--status-success-bg);
}

.alert-danger {
    border-left-color: var(--status-error);
    background-color: var(--status-error-bg);
    color: var(--text-main);
}

.alert-warning {
    border-left-color: var(--status-warning);
    background-color: var(--status-warning-bg);
}

.alert-close {
    border: none;
    background: none;
    cursor: pointer;
    font-size: var(--text-3xl);
    color: var(--text-muted);
}

    .alert-close:hover {
        color: var(--text-main);
    }

/* =========================================
   FOOTER
   ========================================= */
.app-footer {
    padding: var(--space-md) var(--space-md);
    border-top: 1px solid var(--border-color);
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
    font-size: var(--text-md);
}

.app-footer a {
    text-decoration: none;
    color: var(--text-muted);
}

    .app-footer a:hover {
        color: var(--text-main);
    }

.app-footer svg {
    vertical-align: bottom;
}

.divider {
    margin: 0 var(--space-md);
    color: var(--text-muted);
    opacity: 0.3;
}

.kofi-nav-icon {
    vertical-align: middle;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.social-icon-link:hover .kofi-nav-icon {
    transform: scale(1.1);
    /* Optional: adds a slight color filter boost if your SVG is monochrome */
    filter: brightness(1.2);
}

/* =========================================
   MOBILE RESPONSIVENESS (< 910px)
   ========================================= */
.nav-toggle {
    display: none;
    border: none;
    background: none;
    color: var(--text-main);
    cursor: pointer;
}

@media screen and (max-width: 910px) {
    .app-footer {
        padding: var(--space-sm) var(--space-sm);
        gap: var(--space-tn);
        font-size: var(--text-sm);
    }

    .divider {
        margin: 0 var(--space-tn);
    }

    /* Brand Text Swap */
    .text-desktop {
        display: none;
    }

    .text-mobile {
        display: inline;
    }

    /* Mobile Menu Logic */
    .nav-toggle {
        display: block;
    }

    .nav-content {
        width: 100%;
        padding: var(--space-md) 0;
        border-top: 1px solid var(--border-color);
        position: absolute;
        top: 100%;
        left: 0;
        display: none; /* Hidden until toggled via JS */
        flex-direction: column;
        align-items: stretch;
        background-color: var(--bg-surface);
        box-shadow: var(--shadow-md);
    }

        .nav-content.open {
            display: flex;
        }

        
    /* Search bar needs to span full width on mobile */
    .nav-search-wrapper {
        margin: 0 var(--space-md) var(--space-md) var(--space-md);
        max-width: calc(100% - var(--space-xl));
    }

    /* Stack Nav Links vertically */
    .nav-links {
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

        .nav-links > li > a {
            padding: var(--space-md) var(--space-lg);
            border-bottom: 1px solid var(--border-subtle);
        }

        /* Reverse order the nav items */
        .nav-links li {
            display: flex;
            flex-direction: column;
        }

            /* User Dropdown */
            .nav-links li:nth-child(3) {
                order: 1;
            }

            /* Tools Dropdown */
            .nav-links li:nth-child(2) {
                order: 2;
            }

            /* Guilds */
            .nav-links li:nth-child(1) {
                order: 3;
            }

    /* Dropdown un-floats on mobile */
    .dropdown:hover .dropdown-content {
        display: none; /* Disables hover */
    }

    .dropdown-content {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid var(--border-subtle);
        background-color: var(--bg-base);
        padding-left: var(--space-lg);
    }
}

/* =========================================
   Mobile Stability Fixes
   ========================================= */
/* Prevent the "flicker" by forcing Hardware Acceleration 
      on the main containers that use blur or complex gradients */
.hero-section,
.stats-ribbon,
.bg-opacity-10,
.onboarding-overlay {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}