@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@500;600;700&display=swap');

/* ===================================
   School Facility Maintenance System
   Main Styles
   =================================== */

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --ui-font-scale: 1;
    --ui-zoom: 1;
    --app-bg: #f8fafc;
    --app-bg-alt: #eef2ff;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-muted: #f8fafc;
    --card-color: #ffffff;
    --muted-card: #f5f3ff;
    --text-light: #111827;
    --muted-text: #6b7280;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --primary-color: #6d28d9;
    --primary-dark: #5b21b6;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --accent-cancel: #9ca3af;
    --border: #e5e7eb;
    --shadow-sm: 0 18px 45px rgba(15, 23, 42, 0.06);
    --shadow-card: 0 22px 60px rgba(15, 23, 42, 0.07);
    --header-height: 76px;
    --motion-fast: 180ms;
    --motion-normal: 260ms;
    --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --shell-header-bg: linear-gradient(135deg, #4c1d95 0%, #6d28d9 52%, #7c3aed 100%);
    --shell-header-border: rgba(124, 58, 237, 0.34);
    --shell-header-text: #ffffff;
    --shell-panel-bg: rgba(255, 255, 255, 0.14);
    --shell-border: rgba(255, 255, 255, 0.18);

    /* ===== DESIGN_SYSTEM.md §21 Design Tokens ===== */
    /* §2.1 Brand / Primary (Violet) — theme-invariant */
    --color-primary-50: #f5f3ff;
    --color-primary-100: #f3e8ff;
    --color-primary-200: #ddd6fe;
    --color-primary-300: #c4b5fd;
    --color-primary-400: #a78bfa;
    --color-primary-500: #8b5cf6;
    --color-primary-600: #7c3aed;
    --color-primary-700: #6d28d9;
    --color-primary-800: #5b21b6;
    --color-primary-900: #4c1d95;
    --color-primary: var(--color-primary-600);
    --color-primary-hover: var(--color-primary-700);
    --color-primary-active: var(--color-primary-800);

    /* §2.3 Semantic / Status — theme-invariant */
    --color-success: #10b981;
    --color-success-bg: #ecfdf5;
    --color-warning: #f59e0b;
    --color-warning-bg: #fffbeb;
    --color-danger: #dc2626;
    --color-danger-bg: #fef2f2;
    --color-info: #3b82f6;
    --color-info-bg: #eff6ff;

    /* §2.2 Neutrals (Slate) — light values (default/light-theme) */
    --color-neutral-0: #ffffff;
    --color-neutral-50: #f8fafc;
    --color-neutral-100: #f1f5f9;
    --color-neutral-200: #e5e7eb;
    --color-neutral-300: #d1d5db;
    --color-neutral-400: #9ca3af;
    --color-neutral-500: #6b7280;
    --color-neutral-700: #374151;
    --color-neutral-900: #111827;

    /* §2.4 Theme Resolution role tokens — derive from neutrals above */
    --surface-page: var(--color-neutral-50);
    --surface-card: var(--color-neutral-0);
    --text-heading: var(--color-neutral-900);
    --text-body: var(--color-neutral-700);
    --text-muted: var(--color-neutral-500);
    --border-default: var(--color-neutral-200);
    --color-text: var(--text-body);
    --color-text-muted: var(--text-muted);
    --color-border: var(--border-default);
    --color-surface: var(--surface-card);
    --color-background: var(--surface-page);

    /* §3.2 Typography scale */
    --font-family-base: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;

    /* §4 Spacing scale (8px base unit) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    /* Aliases for the --spacing-* names already referenced in layout.css */
    --spacing-xs: var(--space-1);
    --spacing-sm: var(--space-2);
    --spacing-md: var(--space-4);
    --spacing-lg: var(--space-6);
    --spacing-xl: var(--space-8);
    --spacing-2xl: var(--space-12);

    /* §5 Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    --border-width-hairline: 1px;
    --border-width-thick: 2px;
    --border-color-default: var(--border-default);
    --border-color-focus: var(--color-primary-600);
    --border-style: solid;

    /* §21.5 Shadow focus ring (base xs/sm/md/lg live in color-scheme.css) */
    --shadow-focus: 0 0 0 3px var(--color-primary-100);

    /* §21.6 Opacity Tokens */
    --opacity-disabled: 0.5;
    --opacity-overlay-backdrop: 0.5;
    --opacity-hover-fill: 0.08;
    --opacity-active-fill: 0.12;
    --opacity-skeleton-base: 0.6;

    /* §21.7 Z-Index Scale */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky-header: 200;
    --z-drawer: 300;
    --z-modal-backdrop: 400;
    --z-modal: 410;
    --z-toast: 500;
    --z-tooltip: 600;

    /* §21.8 Transition Tokens */
    --transition-base: color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
    --transition-transform: transform var(--motion-normal) var(--motion-ease);

    /* §21.9 Animation Duration Tokens */
    --duration-instant: 100ms;
    --duration-fast: 150ms;
    --duration-base: 220ms;
    --duration-slow: 300ms;
    --duration-toast-visible: 4000ms;
    --duration-skeleton-pulse: 1500ms;
}

:root[data-theme-resolved='dark'] {
    --app-bg: #0b1120;
    --app-bg-alt: #111827;
    --surface: #111827;
    --surface-raised: #172033;
    --surface-muted: #111827;
    --card-color: #111827;
    --muted-card: #172033;
    --text-light: #f8fafc;
    --muted-text: #94a3b8;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --border: #243047;
    --shadow-sm: 0 18px 45px rgba(2, 8, 23, 0.32);
    --shadow-card: 0 24px 60px rgba(2, 8, 23, 0.42);

    /* §2.2 Neutrals — dark values */
    --color-neutral-0: #0b1120;
    --color-neutral-50: #111827;
    --color-neutral-100: #172033;
    --color-neutral-200: #243047;
    --color-neutral-300: #334155;
    --color-neutral-400: #64748b;
    --color-neutral-500: #94a3b8;
    --color-neutral-700: #cbd5e1;
    --color-neutral-900: #f8fafc;

    --bg-white: #ffffff;
    --bg-primary: #111827;
    --bg-secondary: #172033;
    --text-tertiary: #94a3b8;
    --table-header-bg: #172033;
    --table-header-text: #f8fafc;
    --table-row-hover: #1a2233;
    --table-border: #243047;
    --shell-header-bg: linear-gradient(180deg, #1b1031 0%, #121a2d 100%);
    --shell-header-border: rgba(148, 163, 184, 0.22);
    --shell-header-text: #f8fafc;
    --shell-panel-bg: rgba(15, 23, 42, 0.46);
    --shell-border: rgba(148, 163, 184, 0.22);
}

:root[data-theme-resolved='light'] {
    --app-bg: #f8fafc;
    --app-bg-alt: #eef2ff;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-muted: #f8fafc;
    --card-color: #ffffff;
    --muted-card: #f5f3ff;
    --text-light: #111827;
    --muted-text: #6b7280;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --border: #e5e7eb;
    --shadow-sm: 0 18px 45px rgba(15, 23, 42, 0.06);
    --shadow-card: 0 24px 60px rgba(15, 23, 42, 0.08);

    /* §2.2 Neutrals — light values */
    --color-neutral-0: #ffffff;
    --color-neutral-50: #f8fafc;
    --color-neutral-100: #f1f5f9;
    --color-neutral-200: #e5e7eb;
    --color-neutral-300: #d1d5db;
    --color-neutral-400: #9ca3af;
    --color-neutral-500: #6b7280;
    --color-neutral-700: #374151;
    --color-neutral-900: #111827;

    --bg-white: #ffffff;
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    /* Was #94a3b8 (~2.8:1 on white, fails WCAG AA) — looks like it was copied
       from the dark-theme block above instead of using a light-appropriate
       muted tone. Readability fix (2026-09-22): matches --muted-text/
       --color-neutral-500 already used elsewhere in this same block. */
    --text-tertiary: #6b7280;
    --table-header-bg: #f5f3ff;
    --table-header-text: #111827;
    --table-row-hover: #f8fafc;
    --table-border: #e5e7eb;
    --shell-header-bg: linear-gradient(135deg, #4c1d95 0%, #6d28d9 52%, #7c3aed 100%);
    --shell-header-border: rgba(124, 58, 237, 0.34);
    --shell-header-text: #ffffff;
    --shell-panel-bg: rgba(255, 255, 255, 0.14);
    --shell-border: rgba(255, 255, 255, 0.18);
}

:root[data-theme-resolved='light'] .text-muted {
    color: #64748b !important;
}

html, body {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: calc(14px * var(--ui-font-scale));
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--app-bg);
    zoom: 1;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', 'Inter', 'Segoe UI', sans-serif;
    letter-spacing: -0.01em;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* App Footer (DESIGN_SYSTEM.md §15) */
.app-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    padding: var(--space-4, 16px) clamp(20px, 4vw, 48px);
    border-top: 1px solid var(--border-default, var(--border));
    background: transparent;
    font-size: var(--text-xs, 0.75rem);
    color: var(--text-muted, var(--muted-text));
    transition: margin-left var(--transition-speed, 0.25s) ease-in-out;
}

.app-footer-system {
    font-weight: 600;
}

/* Motion sensitivity (DESIGN_SYSTEM.md §18/§19/§27) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Fluid workspace for logged-in pages (desktop/laptop/tablet). */
body[data-user-role] .container {
    max-width: none;
    margin: 0;
}

/* Navbar */

.navbar {
    background: transparent;
    padding: 0;
    position: static; /* flows normally with page */
    margin-left: 0;
    width: 100%;
    height: var(--header-height);
    max-height: var(--header-height);
    z-index: 1000;
    transition: left 0.3s ease-in-out;
    overflow: visible;
}

.navbar-dark {
    background: var(--shell-header-bg);
    border-bottom: 1px solid var(--shell-header-border);
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(16px);
    height: var(--header-height);
    max-height: var(--header-height);
    display: flex;
    align-items: center;
    overflow: visible;
}

.navbar-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    gap: 20px;
    overflow: visible;
}

body[data-user-role] .navbar-container {
    max-width: none;
    margin: 0;
    padding-left: clamp(16px, 2.4vw, 34px);
    padding-right: clamp(16px, 2.4vw, 34px);
}

body[data-user-role] main.container {
    width: calc(100% - var(--sidebar-width));
    max-width: calc(100% - var(--sidebar-width));
    margin-left: var(--sidebar-width);
    margin-right: 0;
    padding: 28px clamp(16px, 2.4vw, 34px) 40px;
    overflow-x: hidden;
    box-sizing: border-box;
}

body[data-user-role] #sidebar.collapsed ~ main.container {
    width: calc(100% - var(--sidebar-width-collapsed));
    max-width: calc(100% - var(--sidebar-width-collapsed));
    margin-left: var(--sidebar-width-collapsed);
}

@media (max-width: 992px) {
    body[data-user-role] .navbar-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    body[data-user-role] main.container,
    body[data-user-role] #sidebar.collapsed ~ main.container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (max-width: 768px) {
    body[data-user-role] .navbar {
        margin-left: var(--sidebar-width-collapsed);
        width: calc(100% - var(--sidebar-width-collapsed));
    }

    body[data-user-role] .navbar-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    body[data-user-role] main.container,
    body[data-user-role] #sidebar.collapsed ~ main.container {
        margin-left: var(--sidebar-width-collapsed);
        max-width: calc(100% - var(--sidebar-width-collapsed));
        width: calc(100% - var(--sidebar-width-collapsed));
        padding-left: 12px;
        padding-right: 12px;
    }
}


.navbar-brand {
    font-size: 18px;
    font-weight: 800;
    color: var(--shell-header-text);
    text-decoration: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    min-height: var(--header-height);
    line-height: 1.1;
    gap: 0;
    white-space: nowrap;
}

.navbar-brand-logo {
    display: block;
    height: 70px;
    width: auto;
    object-fit: contain;
}

.navbar-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: min(46vw, 640px);
    margin-left: -2px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.navbar-brand-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--shell-header-text);
}

.navbar-brand-school {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    opacity: 0.92;
    line-height: 1.15;
    color: var(--shell-header-text);
}

.navbar-left {
    display: flex;
    align-items: center;
    height: var(--header-height);
}

/* header removed: this button no longer sits inside the dark navbar, it floats
   over the light page (positioning lives in sidebar.css, which both shells
   load). The old palette was built for a dark backdrop — white glyph on
   rgba(255,255,255,0.14) with a white border — which over a light workspace is
   a white icon on white. Repainted as the PHILCST purple on white so it is
   legible standing alone. Size, radius and layout are unchanged. */
.sidebar-toggle-mobile {
    display: none;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(124, 58, 237, 0.24);
    border-radius: 10px;
    background: #ffffff;
    color: #5b21b6;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.sidebar-toggle-mobile svg {
    width: 20px;
    height: 20px;
    display: block;
}

.sidebar-toggle-mobile:hover {
    background: #f5f3ff;
    border-color: rgba(124, 58, 237, 0.44);
}


.navbar-right {
    display: flex;
    align-items: center;
    height: var(--header-height);
    gap: 14px;
}

.network-signal-indicator {
    display: none !important;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(251, 191, 36, 0.42);
    background: rgba(113, 63, 18, 0.24);
    color: #fde68a;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.14);
}

.network-signal-indicator.is-visible {
    display: none !important;
}

.network-signal-indicator[data-state='offline'] {
    border-color: rgba(248, 113, 113, 0.5);
    background: rgba(127, 29, 29, 0.3);
    color: #fecaca;
}

.network-signal-logo-wrap {
    position: relative;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.network-signal-logo {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 50%;
    z-index: 1;
}

.network-signal-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-right-color: currentColor;
    opacity: 0.9;
    animation: networkSignalSpin 0.9s linear infinite;
}

.network-signal-indicator[data-state='offline'] .network-signal-ring {
    animation-duration: 0.7s;
}

.network-signal-text {
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

@keyframes networkSignalSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.nav-links {
    display: flex;
    gap: 20px;
    align-items: center;
    height: var(--header-height);
    line-height: var(--header-height);
}

.nav-links a {
    color: #c5d3ea;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    height: var(--header-height);
    line-height: var(--header-height);
    padding: 0 8px;
}

.nav-links a:hover {
    color: #f8fbff;
}

.logout-link {
    color: #c5d3ea;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    height: var(--header-height);
    line-height: var(--header-height);
    padding: 0 8px;
}

.logout-link:hover {
    color: #f8fbff;
}

.navbar-menu a.active {
    color: var(--primary-color);
    background: rgba(138, 43, 226, 0.15);
}

/* Main Content */
main {
    margin-left: 260px;
    padding: 32px clamp(16px, 2.2vw, 32px) 44px;
    /* header removed: this subtracted the bar's height because <main> used to
       sit below a static .navbar that consumed the first 76px of the page. With
       the bar gone <main> starts at y=0, so a full-viewport floor is correct —
       calc(100vh - 76px) would now leave the page 76px short. The 32px top
       padding is the content's own spacing and is deliberately kept. */
    min-height: 100vh;
    transition: margin-left 0.3s ease-in-out;
    background: var(--app-bg);
    color: var(--text-primary);
}

:root[data-theme-resolved='light'] main {
    background: var(--app-bg);
}

:root[data-theme-resolved='dark'] .navbar-dark {
    background: var(--shell-header-bg);
    border-bottom: 1px solid var(--shell-header-border);
    box-shadow: 0 12px 36px rgba(2, 8, 23, 0.28);
}

:root[data-theme-resolved='dark'] .navbar-brand,
:root[data-theme-resolved='dark'] .nav-links a,
:root[data-theme-resolved='dark'] .logout-link {
    color: var(--shell-header-text);
}

:root[data-theme-resolved='dark'] .nav-links a:hover,
:root[data-theme-resolved='dark'] .logout-link:hover {
    color: #ffffff;
}

/* Notification and User Profile Styling */
.notification-wrapper {
    display: flex;
    align-items: center;
    height: var(--header-height);
    line-height: var(--header-height);
}

.theme-toggle-wrapper {
    display: flex;
    align-items: center;
    height: var(--header-height);
    line-height: var(--header-height);
}

.theme-toggle-button {
    width: 40px;
    height: 40px;
    border: 1px solid var(--shell-border);
    border-radius: 12px;
    background: var(--shell-panel-bg);
    color: var(--shell-header-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.theme-toggle-button:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.32);
    color: #ffffff;
}

.theme-toggle-button:focus-visible {
    outline: 2px solid #a855f7;
    outline-offset: 2px;
}

.theme-toggle-icon {
    width: 19px;
    height: 19px;
    display: block;
}

:root[data-theme-resolved='light'] .theme-toggle-button {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.24);
}

:root[data-theme-resolved='light'] .theme-toggle-button:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.36);
    color: #ffffff;
}

:root[data-theme-resolved='dark'] .theme-toggle-button {
    color: #f8fafc;
}

:root[data-theme-resolved='dark'] .theme-toggle-button:hover {
    color: #ffffff;
}

.header-dashboard-kicker {
    display: none;
    color: var(--shell-header-text);
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2;
}

:root[data-theme-resolved='light'] .header-dashboard-kicker {
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.header-dashboard-kicker.is-visible {
    display: block;
}

@media (max-width: 992px) {
    .header-dashboard-kicker {
        display: none !important;
    }
}

.notification-bell {
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--header-height);
    line-height: var(--header-height);
    padding: 0 8px;
    transition: opacity var(--motion-fast) var(--motion-ease);
}

.notification-bell:hover {
    opacity: 0.8;
}

.bell-icon {
    font-size: 18px;
}

.notification-count {
    position: absolute;
    top: 8px;
    right: 4px;
    background-color: #c026d3;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    flex-shrink: 0;
}

.user-avatar-wrap {
    width: 40px;
    height: 40px;
    background: rgba(139, 92, 246, 0.12);
    background-color: rgba(139, 92, 246, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(139, 92, 246, 0.16);
}

.avatar-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.18);
    background: linear-gradient(145deg, #8b5cf6, #5b21b6);
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
}

.user-profile-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-name {
    color: #f0f6ff;
    font-weight: 600;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-title {
    color: #b4c3dd;
    font-size: 11px;
    line-height: 1.2;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive adjustment for main on mobile */
@media (max-width: 768px) {
    .navbar {
        margin-left: 0;
    }
    
    main {
        margin-left: 70px;
    }
    
    .nav-links {
        gap: 12px;
    }

    .user-profile-meta {
        display: none;
    }
}

@media (max-width: 480px) {
    .navbar {
        margin-left: 0;
    }
    
    main {
        margin-left: 60px;
    }
    
    .nav-links {
        display: none;
    }
    
    .navbar-right {
        gap: 12px;
    }
}

/* Authenticated mobile header and content: force true phone layout */
@media (max-width: 768px) {
    body[data-user-role] .sidebar-toggle-mobile {
        display: inline-flex;
    }

    body[data-user-role] .navbar-left {
        gap: 6px;
    }

    /* DEPRECATED (Phase 5.2 QA): height/min-height/max-height:64px here is dead code —
       header-redesign.css's identical selector at this same breakpoint loads later and
       sets 76px, so it always wins. Left commented (not deleted) pending a later cleanup pass.
    body[data-user-role] .navbar,
    body[data-user-role] .navbar-dark,
    body[data-user-role] .navbar-container {
        height: 64px;
        min-height: 64px;
        max-height: 64px;
    }
    */

    body[data-user-role] .navbar {
        margin-left: 0 !important;
        width: 100% !important;
    }

    body[data-user-role] .navbar-container {
        padding-left: 10px;
        padding-right: 10px;
        gap: 8px;
    }

    /* DEPRECATED (Phase 5.2 QA): overridden by header-redesign.css's later-loaded 76px rule.
    body[data-user-role] .navbar-left,
    body[data-user-role] .navbar-right {
        height: 64px;
        min-height: 64px;
    }

    body[data-user-role] .navbar-brand {
        min-height: 64px;
        gap: 6px;
    }
    */

    body[data-user-role] .navbar-brand-logo {
        height: 48px;
        width: auto;
    }

    body[data-user-role] .navbar-brand-text {
        max-width: calc(100vw - 170px);
        margin-left: 0;
    }

    body[data-user-role] .navbar-brand-title {
        font-size: 10px;
        line-height: 1.08;
        letter-spacing: 0.02em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body[data-user-role] .navbar-brand-school {
        font-size: 9px;
        line-height: 1.05;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body[data-user-role] .notification-bell,
    body[data-user-role] .theme-toggle-wrapper,
    body[data-user-role] .notification-wrapper {
        height: 64px;
        line-height: 64px;
    }

    body[data-user-role] .network-signal-indicator {
        padding: 4px 7px;
        gap: 6px;
    }

    body[data-user-role] .network-signal-logo-wrap {
        width: 20px;
        height: 20px;
    }

    body[data-user-role] .network-signal-logo {
        width: 13px;
        height: 13px;
    }

    body[data-user-role] .network-signal-text {
        font-size: 11px;
    }

    body[data-user-role] .theme-toggle-button {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    body[data-user-role] .notification-bell {
        padding: 0 4px;
    }

    body[data-user-role] .bell-icon {
        font-size: 19px;
    }

    body[data-user-role] main,
    body[data-user-role] main.container,
    body[data-user-role] #sidebar.collapsed ~ main.container {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px;
        padding-right: 10px;
        /* header removed: the removed bar used to sit above <main> in flow and
           kept the menu button clear of the content. The button is now fixed at
           top:14px and is 38px tall, so reserve 14 + 38 + 12 = 64px of top
           padding for it. Desktop keeps its original 32px — the button is
           display:none above this breakpoint. */
        padding-top: 64px;
    }
}

@media (max-width: 480px) {
    body[data-user-role] .navbar-container {
        padding-left: 8px;
        padding-right: 8px;
    }

    body[data-user-role] .navbar-brand-logo {
        height: 42px;
    }

    body[data-user-role] .navbar-brand-text {
        max-width: calc(100vw - 118px);
    }

    body[data-user-role] .navbar-brand-school,
    body[data-user-role] .theme-toggle-wrapper {
        display: none;
    }

    body[data-user-role] .network-signal-text {
        display: none;
    }

    body[data-user-role] .sidebar-toggle-mobile {
        width: 34px;
        height: 34px;
    }
}

/* Cards */
.card {
    background: var(--card-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 24px;
    margin-top: 20px;
    /* Base edge for every generic card. The light-mode block further down
       re-states this with !important; both are pointed at the same token so
       the two can never drift apart. */
    border: 1px solid var(--purple-border, rgba(229, 231, 235, 0.95));
}

.card-header {
    padding: 28px 30px 20px;
    border-bottom: 1px solid var(--purple-border-light, #f3f4f6);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.card-header h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-light, #111827);
}

.card-header .btn {
    font-size: 13px;
    white-space: nowrap;
    max-width: 180px;
}

/* Override utility classes for card-header */
.card-header.d-flex {
    align-items: flex-start !important;
}

.card-body {
    padding: 24px 28px 28px;
}

.week-pagination-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.week-page-btn {
    border: 1px solid rgba(138, 43, 226, 0.35);
    background: var(--card-color);
    color: #5b21b6;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease);
}

.week-page-btn:hover:not(:disabled) {
    background: var(--muted-card);
    border-color: #8A2BE2;
}

.week-page-btn.active {
    background: #8A2BE2;
    border-color: #8A2BE2;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(138, 43, 226, 0.25);
}

.week-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.card-footer {
    padding: 15px 20px;
    background: var(--light);
    border-top: 1px solid var(--border);
}

/* Forms */
.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #374151;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--purple-control, #d1d5db);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
    color: #111827;
    font-size: 14px;
    font-family: inherit;
    transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}

.form-control {
    background: linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
    color: #111827;
    border: 1px solid var(--purple-control, #d1d5db);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* SearchableSelect dropdown */
.search-item:hover {
    background: rgba(139, 92, 246, 0.15);
    color: #f0eaff;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}


.btn-primary {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(109, 40, 217, 0.18);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #5b21b6 100%);
}

.btn-success {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: #ffffff;
}

.btn-danger {
    background: linear-gradient(135deg, #fb7185 0%, #ef4444 100%);
    color: #ffffff;
}

/* UI_BROWSER_DIALOG_REPLACEMENT — completes the existing btn-primary/
   btn-success/btn-danger/btn-secondary set with the "Yellow = Warning"
   convention used by the reusable system-modal dialogs. */
.btn-warning {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1f2937;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
}

/* Outline tier of the button system. .btn-primary above is the filled purple;
   this is its light-surface counterpart, so the two read as one family. The
   light-mode block near the end of this file restates these with the same
   tokens — both are kept in step deliberately. */
.btn-secondary {
    background: var(--card-color);
    color: var(--primary-purple-dark, var(--text-light));
    border-color: var(--purple-control, var(--border));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.btn-secondary:hover {
    background: var(--purple-hover, var(--muted-card));
    border-color: var(--primary-purple, var(--border));
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Alerts */
.alert {
    padding: 13px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.alert-success {
    background: rgba(16, 185, 129, 0.16);
    color: #9df5d0;
    border: 1px solid rgba(16, 185, 129, 0.42);
}

.alert-danger {
    background: rgba(239, 68, 68, 0.16);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.45);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.16);
    color: #fde68a;
    border: 1px solid rgba(245, 158, 11, 0.42);
}

.alert-info {
    background: rgba(168, 85, 247, 0.16);
    color: #e9d5ff;
    border: 1px solid rgba(196, 181, 253, 0.45);
}

/* Table */
.table {
    width: 100%;
    border-collapse: collapse;
    background: #0f1a2e;
    border-radius: 12px;
    overflow: hidden;
}

.table th,
.table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    color: #dce7fb;
}

.table th {
    background: #172744;
    font-weight: 600;
    color: #c4d3ec;
}

.table tbody tr:hover {
    background: rgba(168, 85, 247, 0.12);
}

.reports-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.reports-table {
    width: 100%;
    border-collapse: collapse;
    background: #0f1a2e;
    /* Outer frame of the table only. The th/td rules below keep their neutral
       grey so row separators stay light and no cell reads as purple. */
    border: 1px solid var(--purple-border, rgba(148, 163, 184, 0.25));
}

.reports-table th,
.reports-table td {
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    text-align: left;
    color: #dce7fb;
}

.reports-table th {
    background: #172744;
    font-weight: 700;
}

.reports-table tbody tr:hover {
    background: rgba(168, 85, 247, 0.12);
}

:root[data-theme-resolved='dark'] .form-control,
:root[data-theme-resolved='dark'] .form-group input,
:root[data-theme-resolved='dark'] .form-group select,
:root[data-theme-resolved='dark'] .form-group textarea {
    background: #111827;
    color: #e5e7eb;
    border-color: #374151;
}

:root[data-theme-resolved='dark'] .form-control::placeholder,
:root[data-theme-resolved='dark'] .form-group input::placeholder,
:root[data-theme-resolved='dark'] .form-group textarea::placeholder {
    color: #9ca3af;
}

:root[data-theme-resolved='dark'] input[type='date']::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.3);
}

:root[data-theme-resolved='dark'] .reports-table,
:root[data-theme-resolved='dark'] #reports-container table {
    background: #111827 !important;
    border-color: #374151 !important;
}

:root[data-theme-resolved='dark'] .reports-table th,
:root[data-theme-resolved='dark'] .reports-table td,
:root[data-theme-resolved='dark'] #reports-container table th,
:root[data-theme-resolved='dark'] #reports-container table td {
    color: #e5e7eb !important;
    border-color: #374151 !important;
}

:root[data-theme-resolved='dark'] .reports-table th,
:root[data-theme-resolved='dark'] #reports-container table thead,
:root[data-theme-resolved='dark'] #reports-container table th {
    background: #1f2937 !important;
}

:root[data-theme-resolved='dark'] .reports-table tbody tr:hover,
:root[data-theme-resolved='dark'] #reports-container table tbody tr:hover {
    background: #1a2233 !important;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    font-weight: 700;
}

.badge-primary {
    background: rgba(138, 43, 226, 0.15);
    color: var(--primary-color);
}

.badge-info {
    background: rgba(168, 85, 247, 0.16);
    color: #e9d5ff;
}

.badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.badge-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

/* Readability fix (2026-09-22): .badge-info/.badge-warning/.badge-danger and
   .alert-success/.alert-info above are leftover dark-mode-era pairings (pale
   text on an equally pale tinted background — e.g. badge-warning's own
   --warning-color #f59e0b as text on a 10%-alpha wash of that same color).
   Most pages never notice because a page-specific stylesheet (e.g.
   maintenance-dashboard.css's .badge-info, or color-scheme.css's
   .alert-warning/.alert-danger which already resolve dark via --text-primary)
   happens to win the cascade there. Pages with no such patch — Activity Logs'
   action badges, Report a Problem's success alert — rendered near-invisible
   text. Text-only override, same backgrounds, reusing the dark-on-light-
   pastel pairings already established elsewhere in this file/app (e.g.
   .badge-success, .alert-danger via color-scheme.css). */
:root[data-theme-resolved='light'] .badge-info {
    color: #6a1bbe;
}
:root[data-theme-resolved='light'] .badge-warning {
    color: #92400e;
}
:root[data-theme-resolved='light'] .badge-danger {
    color: #991b1b;
}
:root[data-theme-resolved='light'] .alert-success {
    color: #065f46;
}
:root[data-theme-resolved='light'] .alert-info {
    color: #6a1bbe;
}

/* Stats Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: linear-gradient(180deg, rgba(138, 43, 226, 0.05), rgba(138, 43, 226, 0.02));
    padding: 18px 20px;
    border-radius: 10px;
    border: 1px solid rgba(138, 43, 226, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-left {
    display: flex;
    flex-direction: column;
}

.stat-card h3 {
    font-size: 13px;
    color: var(--muted-text);
    margin-bottom: 8px;
}

.stat-card .stat-value {
    font-size: 34px;
    font-weight: 800;
    color: var(--text-light);
}

.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    font-size: 20px;
}

.stat-sub { color: var(--muted-text); font-size:13px; margin-top:6px }

.stat-card.low-stock { background: linear-gradient(180deg, #dc2626, #b91c1c); }

.stat-card.low-stock .stat-value { color: #fee2e2; }

.stat-card .doc-icon { background: rgba(138, 43, 226, 0.1); color: #f59e0b }

.stat-card .users-icon { background: rgba(138, 43, 226, 0.1); color: var(--primary-color) }

.stat-card .fixed-icon { background: rgba(16, 185, 129, 0.1); color: var(--success-color) }

.stat-card .check-icon { background: rgba(138, 43, 226, 0.1); color: #8A2BE2 }

/* Summary Cards */
.summary-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.summary-card {
    width: 280px;
    height: 140px;
    background: var(--card-color);
    border: 1px solid rgba(138, 43, 226, 0.15);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    transition: all 0.2s ease;
}

.summary-card:hover {
    border-color: rgba(138, 43, 226, 0.3);
    background: var(--muted-card);
}

.summary-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.summary-card-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.summary-card-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 6px;
}

.summary-card-desc {
    font-size: 12px;
    color: var(--muted-text);
    margin: 0;
}

.summary-card-icon {
    font-size: 24px;
    opacity: 0.7;
}

/* Alert Card */
.summary-card-alert {
    background: linear-gradient(135deg, #8b2020 0%, #7a1a1a 100%);
    border-color: rgba(255,100,100,0.2);
}

.summary-card-alert:hover {
    background: linear-gradient(135deg, #9a2a2a 0%, #8a2a2a 100%);
    border-color: rgba(255,100,100,0.3);
}

.summary-card-alert .summary-card-title {
    color: #ffb3b3;
}

.summary-card-alert .summary-card-value {
    color: #ffcccc;
}

.summary-card-alert .summary-card-desc {
    color: #ff9999;
}

.summary-card-alert .summary-card-icon {
    opacity: 1;
    color: #ffb3b3;
}

/* Clickable Action Cards */
.summary-card-action {
    cursor: pointer;
}

.summary-card-action:hover {
    border-color: rgba(74, 158, 255, 0.3);
    background: #222b3d;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(74, 158, 255, 0.1);
}

.summary-card-action:active {
    transform: translateY(0);
}

/* Utilities */
.text-center {
    text-align: center;
}

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

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

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

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

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

.mt-sm { margin-top: 10px; }
.mt-md { margin-top: 20px; }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: 10px; }
.mb-md { margin-bottom: 20px; }

.d-flex {
    display: flex;
}

.justify-between {
    justify-content: space-between;
}

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

.gap-sm {
    gap: 10px;
}

/* Loading */
.loading {
    text-align: center;
    padding: 40px;
    color: var(--muted-text);
}

/* Generic inline spinner (referenced by UI.showLoading() in utils.js — previously unstyled) */
.spinner {
    width: 28px;
    height: 28px;
    margin: 0 auto;
    border: 3px solid var(--border-default, rgba(148, 163, 184, 0.35));
    border-radius: 50%;
    border-top-color: var(--color-primary-600, var(--primary-color));
    animation: spin 0.6s linear infinite;
}

.ui-empty-state {
    text-align: center;
    border: 1px dashed rgba(148, 163, 184, 0.4);
    border-radius: 12px;
    background: rgba(17, 33, 59, 0.45);
    padding: 22px 16px;
    color: var(--muted-text);
}

.ui-empty-state strong {
    display: block;
    color: #dce8fc;
    margin-bottom: 6px;
}

.ui-empty-state a {
    color: #93c5fd;
    font-weight: 700;
    text-decoration: none;
}

.ui-empty-state a:hover {
    color: #dbeafe;
    text-decoration: underline;
}

.ui-skeleton-list {
    display: grid;
    gap: 10px;
}

.ui-skeleton-row {
    height: 14px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.2), rgba(148, 163, 184, 0.08), rgba(148, 163, 184, 0.2));
    background-size: 200% 100%;
    animation: ui-shimmer 1.3s linear infinite;
}

.ui-skeleton-row.w-90 { width: 90%; }
.ui-skeleton-row.w-75 { width: 75%; }
.ui-skeleton-row.w-55 { width: 55%; }
.ui-skeleton-row.w-40 { width: 40%; }

.ui-fade-in {
    animation: ui-fade-in var(--motion-normal) var(--motion-ease) both;
}

@keyframes ui-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes ui-fade-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Notification */
.notification-wrapper { 
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}


.notification-bell { 
    background: transparent; 
    border: none; 
    color: #d8e5fb; 
    position: relative; 
    cursor: pointer; 
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    height: 100%;
    transition: color 0.2s ease;
}

.notification-bell:hover {
    color: #ffffff;
}

.notification-count { 
    position: absolute; 
    top: 8px; 
    right: 4px; 
    background: #dc2626; 
    color: white; 
    font-size: 11px; 
    padding: 2px 6px; 
    border-radius: 12px; 
    display:flex; 
    align-items:center; 
    justify-content:center;
    font-weight: 700;
}

.notification-dropdown { 
    position: absolute; 
    right: 0; 
    top: calc(100% + 8px);
    width: 320px; 
    background: var(--card-color); 
    border: 1px solid var(--border); 
    box-shadow: var(--shadow-sm); 
    border-radius: 14px; 
    display: none; 
    max-height: 360px; 
    overflow: auto;
    z-index: 1001;
    color: var(--text-light);
}

.notification-dropdown.show { 
    display: block; 
}

.notification-header { 
    display:flex; 
    justify-content:space-between; 
    padding:12px 14px; 
    border-bottom:1px solid var(--border); 
    color:var(--text-light);
    background-color: var(--muted-card);
}

.notification-see-all {
    font-size: 12px;
    color: var(--primary-color);
    text-decoration: none;
}

.notification-tabs {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--muted-card);
}

.notification-tab {
    border: none;
    background: transparent;
    color: var(--muted-text);
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 16px;
    cursor: pointer;
}

.notification-tab.active {
    background: rgba(168, 85, 247, 0.2);
    color: var(--text-light);
}

.clear-notifications {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--muted-text);
    font-size: 12px;
    cursor: pointer;
}

.notification-list { 
    padding: 8px; 
    background: var(--card-color);
}

.notification-item { 
    display:flex; 
    gap:10px; 
    padding:10px; 
    border-radius:6px; 
    cursor:pointer;
    transition: background-color var(--motion-fast) var(--motion-ease);
    position: relative;
}

.notification-item.unread { 
    background: rgba(168, 85, 247, 0.12);
}

.notification-item:hover { 
    background: rgba(148, 163, 184, 0.12);
}

.notification-icon { 
    width:36px; 
    height:36px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    background: rgba(168, 85, 247, 0.16); 
    border-radius: 6px; 
    flex-shrink: 0;
}

.notification-content .notification-title { 
    font-weight:700; 
    color:var(--text-light); 
}

.notification-content .notification-message { 
    color:var(--muted-text); 
    font-size:13px;
}

.notification-time { 
    color:var(--muted-text); 
    font-size:12px;
}

.notification-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a855f7;
    position: absolute;
    right: 10px;
    top: 14px;
}

.notification-footer {
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    background: var(--muted-card);
}

.notification-footer-btn {
    display: block;
    text-align: center;
    background: rgba(168, 85, 247, 0.18);
    color: var(--text-light);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    border: 1px solid var(--border);
}

.notification-footer-btn:hover {
    background: rgba(168, 85, 247, 0.26);
}

.notification-empty {
    padding: 12px;
    color: var(--muted-text);
    text-align: center;
}

:root[data-theme-resolved='dark'] .notification-bell {
    color: #d8e5fb;
}

:root[data-theme-resolved='dark'] .notification-bell:hover {
    color: #ffffff;
}

:root[data-theme-resolved='dark'] .notification-dropdown {
    background: #111b2f;
    border-color: rgba(148, 163, 184, 0.25);
}

@keyframes sfms-card-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Recent Activity */
.recent-activity { display:flex; flex-direction:column; gap:12px }
.activity-item { display:flex; gap:12px; align-items:flex-start }
.activity-avatar { width:36px; height:36px; background: rgba(255,255,255,0.03); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-light); font-weight:700 }
.activity-desc { color:var(--text-light); font-weight:600 }
.activity-meta { color:var(--muted-text); font-size:13px }

/* Dashboard bottom layout */
/* Dashboard bottom layout - MOBILE FIRST (1 column on phones) */
.dashboard-bottom { display:grid; grid-template-columns: 1fr !important; gap:20px }
.chart-card { padding: 20px; }
.chart-canvas { width:100%; height:300px }

@media (min-width: 1025px) {
    .dashboard-bottom { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 768px) {
    .navbar-menu {
        gap: 10px;
    }
    
    .navbar-menu a {
        padding: 6px 8px;
        font-size: 13px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Light mode: reset hardcoded dark globals ───────────────────────────── */
/* Inputs sit one step below a card in the hierarchy: interactive, so they get
   a visible purple edge, but the lighter control token rather than the card
   token so a form full of fields never out-shouts the panel containing it. */
:root[data-theme-resolved='light'] .form-group input,
:root[data-theme-resolved='light'] .form-group select,
:root[data-theme-resolved='light'] .form-group textarea {
    background: #ffffff;
    color: #1f2937;
    border-color: var(--purple-control, rgba(100, 116, 139, 0.35));
}
:root[data-theme-resolved='light'] .form-group input::placeholder,
:root[data-theme-resolved='light'] .form-group textarea::placeholder {
    color: #9ca3af;
}
:root[data-theme-resolved='light'] .table {
    background: #ffffff;
}
:root[data-theme-resolved='light'] .table th {
    background: #f1f5f9;
    color: #374151;
}
:root[data-theme-resolved='light'] .table td {
    color: #1f2937;
}
:root[data-theme-resolved='light'] .reports-table {
    background: #ffffff;
}
:root[data-theme-resolved='light'] .reports-table th {
    background: #f1f5f9;
    color: #374151;
}
:root[data-theme-resolved='light'] .reports-table td {
    color: #1f2937;
}
/* Secondary button = the outline tier of the purple system: light surface,
   purple edge, purple label. Primary buttons keep their filled purple, so the
   two tiers stay visually distinguishable and not everything reads as solid
   purple. Only colours change — size, padding and radius are untouched, so
   button hit-areas and line wrapping are unaffected. */
:root[data-theme-resolved='light'] .btn-secondary {
    background: #ffffff;
    color: var(--primary-purple-dark, #1e293b);
    border-color: var(--purple-control, rgba(100, 116, 139, 0.25));
}
:root[data-theme-resolved='light'] .btn-secondary:hover {
    background: var(--purple-hover, #cbd5e1);
    color: var(--primary-purple-dark, #0f172a);
    border-color: var(--primary-purple, rgba(100, 116, 139, 0.25));
}
:root[data-theme-resolved='light'] .summary-card-action:hover {
    background: #f1f5f9;
    border-color: rgba(99, 102, 241, 0.2);
}
/* The notification panel is a floating major container — card tier. */
:root[data-theme-resolved='light'] .notification-dropdown {
    background: #ffffff;
    border-color: var(--purple-border, rgba(100, 116, 139, 0.2));
    color: #1f2937;
}

/* ── Light mode: cards, headings, body layout ───────────────────────────── */
/* This is the single highest-leverage rule in the stylesheet: `.card` is the
   generic container class every page reuses, and because this rule carries
   !important it is the declaration that actually paints the border on nearly
   every card in the app. Pointing it at the shared token is therefore what
   gives the whole system one consistent lavender container edge — no per-page
   duplicate rules required.

   Only the border COLOUR changes. Width, style, radius and padding are left
   exactly as they were, so the border box is identical and no layout can
   shift. The !important was already here; it is not being added. */
:root[data-theme-resolved='light'] .card {
    background: #ffffff !important;
    border-color: var(--purple-border, #e2e8f0) !important;
    color: #1e293b !important;
}
/* The header divider is INTERNAL structure, not the outer edge of the card,
   so it takes the lighter token — the outer frame stays the strongest line. */
:root[data-theme-resolved='light'] .card-header {
    background: #f8fafc !important;
    border-bottom-color: var(--purple-border-light, #e2e8f0) !important;
    color: #1e293b !important;
}
:root[data-theme-resolved='light'] .card-body {
    background: #ffffff !important;
    color: #1e293b !important;
}
:root[data-theme-resolved='light'] main.container {
    background: transparent !important;
}
/* This blanket rule forces near-black text on every heading/paragraph/label/
   span in the document so the LIGHT main content is legible. Correct for the
   main content — and wrong for the one surface in this app that is
   deliberately DARK: the sidebar rail.

   It was the actual cause of the unreadable sidebar. `.nav-text` and the
   section-label <span> carry no colour of their own; they are meant to inherit
   from `.nav-link`, which sidebar.css paints with --sidebar-text. But an
   inherited value has NO specificity, so any rule that directly matches the
   element beats it — and this one matched every <span> in the page at (0,2,1).
   The sidebar's own `.nav-section-label span` is only (0,1,1), so it lost here
   too. Result: #1e293b slate text on the #160d29 rail — about 1.3:1.

   The fix excludes the sidebar subtree and nothing else. `:where()` contributes
   ZERO specificity, so `:not(:where(.sidebar *))` holds this selector at
   exactly (0,2,1): every element outside the sidebar resolves precisely as it
   did before, with no re-ordering against any other rule. */
:root[data-theme-resolved='light'] h1:not(:where(.sidebar *)),
:root[data-theme-resolved='light'] h2:not(:where(.sidebar *)),
:root[data-theme-resolved='light'] h3:not(:where(.sidebar *)),
:root[data-theme-resolved='light'] p:not(:where(.sidebar *)),
:root[data-theme-resolved='light'] label:not(:where(.sidebar *)),
:root[data-theme-resolved='light'] span:not(:where(.sidebar *)) {
    color: #1e293b;
}