:root {
    --bg-color: #f4f6f9;
    --text-color: #333;
    --glass-bg: rgba(255,255,255,0.25);
    --glass-border: 1px solid rgba(255,255,255,0.3);
    --card-shadow: 0 8px 32px rgba(0,0,0,0.1);
    --sidebar-bg: linear-gradient(160deg, #00897B 0%, #004D40 100%);
    --sidebar-text: #ffffff;
    --brand-teal: #00897B;
    --brand-teal-light: #00C9A7;
    --brand-orange: #F4A261;
    
    /* ── 8pt Grid Spacing System Tokens ── */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;

    /* ── 60-30-10 Layout Color Ratios ── */
    --color-surface-60: #f8fafc;
    --color-structure-30: #ffffff;
    --color-accent-10: #00C9A7;
}

.dark-mode {
    --bg-color: #1a1a2e;
    --text-color: #e0e0e0;
    --glass-bg: rgba(0,0,0,0.3);
    --glass-border: 1px solid rgba(255,255,255,0.1);
    --card-shadow: 0 8px 32px rgba(0,0,0,0.5);
    --sidebar-bg: linear-gradient(180deg, #1a3c34 0%, #0d1f1a 100%);
    --sidebar-text: #e0e0e0;

    --color-surface-60: #0f172a;
    --color-structure-30: #1e293b;
    --color-accent-10: #00C9A7;
}

/* ── 8pt Grid Utility Classes ── */
.p-grid-1 { padding: var(--space-1) !important; }
.p-grid-2 { padding: var(--space-2) !important; }
.p-grid-3 { padding: var(--space-3) !important; }
.p-grid-4 { padding: var(--space-4) !important; }

.m-grid-1 { margin: var(--space-1) !important; }
.m-grid-2 { margin: var(--space-2) !important; }
.m-grid-3 { margin: var(--space-3) !important; }
.m-grid-4 { margin: var(--space-4) !important; }

.gap-grid-1 { gap: var(--space-1) !important; }
.gap-grid-2 { gap: var(--space-2) !important; }
.gap-grid-3 { gap: var(--space-3) !important; }

body {
    background: var(--bg-color);
    color: var(--text-color);
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background 0.3s, color 0.3s;
}

/* ---- SIDEBAR ---- */
.glass-sidebar {
    min-width: 260px;
    width: clamp(260px, 18vw, 300px);
    background: var(--sidebar-bg);
    min-height: 100vh;
    transition: margin 0.3s;
    color: var(--sidebar-text);
}

    .glass-sidebar .list-group-item {
        background: transparent;
        color: var(--sidebar-text);
        border: none;
        font-weight: 500;
    }

        .glass-sidebar .list-group-item:hover {
            background: rgba(255,255,255,0.15);
        }

    .glass-sidebar .sidebar-heading a {
        color: var(--sidebar-text) !important;
    }

    .glass-sidebar .border-top {
        border-color: rgba(255,255,255,0.2) !important;
    }

/* Top navbar for mobile */
.glass-navbar {
    background: var(--glass-bg);
    border-bottom: var(--glass-border);
}

/* Cards */
.glass-card {
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
}

/* Mobile Drawer managed via _Layout.cshtml */

/* ── Text Dark Override ── ensures heading text adapts to theme */
.text-dark-override {
    color: var(--text-color) !important;
}

/* ── Primary Soft Button ── */
.btn-primary-soft {
    background: linear-gradient(135deg, #00C9A7, #008B74) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
    padding: 10px 24px !important;
    box-shadow: 0 4px 14px rgba(0, 201, 167, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary-soft:hover {
    background: linear-gradient(135deg, #00b395, #007763) !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(0, 201, 167, 0.45) !important;
}

.btn-primary-soft:active {
    transform: scale(0.97) !important;
}

/* ── Mobile Layout Optimization ── */
@media (max-width: 768px) {
    #primaryTransitionWrapper.container-fluid.p-4 {
        padding-left: 6px !important;
        padding-right: 6px !important;
        padding-top: 10px !important;
        padding-bottom: 20px !important;
    }
}