/* Mobile-First School Management App */

/* Reset and base styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    line-height: 1.5;
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Bootstrap 5.1 brand override layer.
   BS 5.1 compiles its primary blue (#0d6efd) into every component — the
   --bs-btn-* hooks only exist from 5.2 — so the brand is re-pinned per class
   here. Utilities need !important because Bootstrap's own utilities carry it. */
a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-hover);
}

.btn-link {
    color: var(--primary);
}

.btn-primary,
.btn-primary:disabled {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-check:checked + .btn-primary {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-check:checked + .btn-outline-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Bootstrap 5.1's .text-primary / .bg-primary / .border-primary are already
   opacity-aware — rgba(var(--bs-primary-rgb), var(--bs-*-opacity)) — and
   --bs-primary-rgb is re-pinned to the brand in tokens.css, so they resolve
   to purple AND respect .bg-opacity-*/.text-opacity-* on their own. Do NOT
   re-declare them with a flat color here: a flat background-color:var(--primary)
   defeats .bg-opacity-10 and turns tinted pills (bg-primary bg-opacity-10
   text-primary) into unreadable solid-purple-on-purple. .link-primary is the
   one exception — Bootstrap hardcodes it, so it needs the brand color. */
.link-primary {
    color: var(--primary) !important;
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.page-link {
    color: var(--primary);
}

.page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--primary);
}

.list-group-item.active {
    background-color: var(--primary);
    border-color: var(--primary);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--primary);
}

.progress-bar {
    background-color: var(--primary);
}

/* One focus ring for every interactive control. */
:is(.btn, .form-control, .form-select, .form-check-input):focus {
    box-shadow: 0 0 0 0.25rem var(--focus-ring);
}

/* Entity create/edit forms: put the small set of operationally important
   fields first, then separate details that can be completed later. */
.entity-form-section {
    min-width: 0;
}

.entity-form-section + .entity-form-section {
    margin-top: 0.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.entity-form-section-header {
    margin-bottom: 1rem;
}

.entity-form-section-header h6 {
    margin-bottom: 0.25rem;
    font-weight: 700;
    color: var(--text-color);
}

.entity-form-section-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.entity-form-actions,
.entity-form-primary-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.entity-form-actions {
    justify-content: space-between;
}

@media (max-width: 575.98px) {
    .entity-form-actions {
        align-items: stretch;
    }

    .entity-form-actions,
    .entity-form-primary-actions {
        width: 100%;
    }

    .entity-form-primary-actions .btn {
        flex: 1 1 0;
    }

    .entity-form-actions > .btn {
        width: 100%;
    }

    .entity-form-actions .btn {
        min-height: 44px;
    }
}

/* Prevent flash of unstyled content during authentication */
.auth-transition {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.auth-transition.loaded {
    opacity: 1;
}

/* Smooth content transitions */
.content-fade-in {
    animation: fadeIn 0.2s ease-in-out;
}

/* Firefox uses the exact same layout path as every other browser.
   (A legacy @-moz-document url-prefix() block used to fork Firefox onto its
   own layout: a global * { transform: translateZ(0) } that re-parented every
   position:fixed element (bottom nav, modals, sheets, toasts) into its nearest
   ancestor's containing block, plus a body scroll-lock + nested inner
   scrollers on mobile. That fork is what made pages unscrollable and broken in
   Firefox - never reintroduce browser-forked layout rules.) */

/* Enhanced loading state transitions */
.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.loading-container.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Smooth page transitions */
.page-container {
    min-height: 100vh;
    background-color: #FFFFFF;
    transition: opacity 0.2s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Color tokens live in tokens.css (loaded before this file). */

/* Dark mode sidebar border */
[data-theme="dark"] .desktop-sidebar {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* Consistent icon sizes */
/* Main toolbar (desktop sidebar + mobile bottom nav) */
/* One uniform icon size across the whole nav — object-fit: contain fits every
   glyph (PNG or SVG) into the same box, so the row reads as one system instead
   of icons that jump size per item. */
.desktop-nav .nav-icon img,
.bottom-nav .nav-icon img {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain;
  vertical-align: middle;
}
.desktop-nav .nav-icon,
.bottom-nav .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
}

/* Page title icons (H1) */
.page-content h1 img.page-title-icon,
.main-content h1 img.page-title-icon {
  display: inline-block;
  width: 38px !important;
  height: 38px !important;
  object-fit: contain;
  vertical-align: middle;
}

.page-content h1 i.page-title-icon,
.main-content h1 i.page-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px !important;
  height: 38px !important;
  font-size: 32px;
  line-height: 1;
  vertical-align: middle;
}


/* Layout for titles that include an icon */
.page-content h1.title-with-icon,
.main-content h1.title-with-icon {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Make Info (Announcements) title icon 20% bigger */
.page-content h1 img.page-title-icon.info-icon,
.main-content h1 img.page-title-icon.info-icon {
  width: 38px !important; /* 32 * 1.2 � 38 */
  height: 38px !important;
}

/* (Removed .desktop-profile-container — the floating top-right avatar was
   replaced by the profile in the sidebar footer, see .sidebar-footer.) */

/* Mobile layout — app shell. The page itself never scrolls: the shell is
   pinned to the viewport and only .main-content scrolls inside it. The
   shell's ONE job is keeping the root unscrollable, so Firefox never
   animates its toolbar (it has no Chrome-style inner-scroller promotion) —
   that is what lets the bottom nav be a fixed bottom-anchored bar again
   (see .bottom-nav). Do NOT hang the nav's position off this shell's bottom
   edge (in-flow row or inset-stretched box): Chrome oversizes the fixed
   layout viewport while its URL bar animates, and anything deriving its
   position from the shell's height/bottom sinks under Chrome's bar. Only a
   bottom-anchored fixed element gets Chrome's visible-bottom glue. */
/* Defense in depth: while the app shell is mounted, the root must never
   scroll (a scrollable root lets mobile browsers animate their dynamic
   toolbars, which un-docks the bottom nav on Android Firefox). Landing and
   auth pages have no .mobile-layout and keep normal document scrolling. */
body:has(.mobile-layout) {
    overflow: hidden;
}

.mobile-layout {
    position: fixed;
    inset: 0; /* size comes from the viewport edges, not a vh/dvh height */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

/* Top header bar for mobile */
.mobile-header {
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.mobile-header h1 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.mobile-header-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.mobile-school-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mobile-school-icon {
    font-size: 1rem;
}

.mobile-school-info h1 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.mobile-header-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0.125rem;
}

.mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Quick-switcher trigger in the mobile header (always visible, costs no
   bottom-nav slot; results render from the top per the dead-zone rule). */
.header-search-btn {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-color);
    font-size: 1.15rem;
}

.header-search-btn:active {
    background: rgba(var(--brand-rgb), 0.1);
}

.header-search-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.mobile-logout-btn {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(0, 0, 0, 0.15) !important;
    border: 2px solid rgba(0, 0, 0, 0.3) !important;
    color: #000000 !important;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem !important;
    font-weight: 900 !important;
    line-height: 1;
}

.mobile-logout-btn .logout-icon {
    color: #000000 !important;
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    line-height: 1;
    display: block !important;
    font-family: 'Arial', sans-serif !important;
}

.mobile-logout-btn:hover {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.mobile-logout-btn:hover .logout-icon {
    color: white !important;
}

.mobile-logout-btn:active {
    transform: scale(0.95);
}

/* Dark mode specific styling */
[data-theme="dark"] .mobile-logout-btn {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .mobile-logout-btn .logout-icon {
    color: #ffffff !important;
}

[data-theme="dark"] .mobile-logout-btn:hover {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}

[data-theme="dark"] .mobile-logout-btn:hover .logout-icon {
    color: white !important;
}

/* Desktop logout button styling - circular like mobile */
.desktop-logout-btn {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: #495057;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
}

.desktop-logout-btn .logout-icon {
    color: #495057 !important;
    font-size: 1.2rem !important;
    font-weight: bold !important;
    line-height: 1;
    display: block !important;
    font-family: 'Arial', sans-serif !important;
}

.desktop-logout-btn:hover {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.desktop-logout-btn:hover .logout-icon {
    color: white !important;
}

.desktop-logout-btn:active {
    transform: scale(0.95);
}

/* Dark mode specific styling for desktop logout */
[data-theme="dark"] .desktop-logout-btn {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #f8f9fa;
}

[data-theme="dark"] .desktop-logout-btn .logout-icon {
    color: #f8f9fa !important;
}

[data-theme="dark"] .desktop-logout-btn:hover {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}

[data-theme="dark"] .desktop-logout-btn:hover .logout-icon {
    color: white !important;
}

/* Main content area — the app's one scroll pane on mobile (the shell above
   never scrolls). min-height:0 lets the flex child actually shrink and scroll. */
.main-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 1rem;
    padding-bottom: calc(max(var(--bottom-nav-height, 70px), 70px) + 40px); /* clear the fixed nav + chat bubble; max() floors a stale 0px var */
    max-width: 100%;
    box-sizing: border-box;
}

/* Bottom navigation for mobile — a bottom-anchored fixed bar. Chrome glues
   `position: fixed; bottom: 0` elements to the VISIBLE bottom through every
   URL-bar animation (its stretched/inset boxes get the oversized layout
   viewport instead — that sank the in-flow nav under Chrome's own bar). And
   a fixed nav is safe in Firefox now for one reason only: the app shell
   keeps the root unscrollable, so Firefox's toolbar never animates (it has
   no Chrome-style inner-scroller promotion). Root lock + bottom anchor is
   the pair that docks the nav in BOTH browsers — remove either and one of
   them breaks. */
.bottom-nav {
    background: var(--nav-bg);
    border-top: 1px solid var(--nav-border);
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10002; /* above scrolled content; the More sheet overlay wins by DOM order */
    min-height: 70px;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
    overflow-x: hidden;
    overflow-y: hidden;
    gap: 0.25rem;
    /* Safe area for iOS devices with home indicator */
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
}

/* Hide scrollbar for Chrome, Safari and Opera */
.bottom-nav::-webkit-scrollbar {
    display: none;
}

/* Subtle gradient indicator to show more content is available */
.bottom-nav::after {
    content: none;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0.25rem 0.5rem 0.375rem 0.5rem;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border-radius: 0.5rem;
    min-width: 75px;
    width: 75px;
    height: 60px;
    position: relative;
    text-align: center;
    line-height: 1.0;
    gap: 0.125rem;
    overflow: hidden;
    flex-shrink: 0;
}

.nav-item.active {
    color: var(--primary);
    background: rgba(var(--brand-rgb), 0.1);
    transform: translateY(-2px);
}

/* Non-color companion cue for the active item (pairs with aria-current="page"). */
.nav-item.active .nav-label {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

.nav-item:hover {
    color: var(--primary);
    background: rgba(var(--brand-rgb), 0.05);
    transform: translateY(-1px);
}

.nav-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    border-radius: 0.5rem;
}

.nav-icon {
    font-size: 1.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.25rem;
    width: 1.25rem;
    margin-top: 0.375rem;
    margin-bottom: 0.125rem;
    flex-shrink: 0;
    text-decoration: none !important;
    border: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    /* Emoji-specific fixes */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-variant-emoji: emoji;
    text-rendering: optimizeSpeed;
}

/* Ensure text content has consistent space and handles overflow */
.nav-item span:not(.nav-icon) {
    display: block;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.6rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
    padding: 0 0.125rem;
}

/* Cards */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}

.card-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    background: var(--surface);
}

.card-body {
    padding: 1rem;
}

/* Buttons */
.btn {
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-secondary {
    background: var(--secondary);
    color: white;
}

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

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

/* Forms */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-color);
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background: var(--card-bg);
    color: var(--text-color);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.1);
}

/* Tables */
.table-container {
    overflow-x: auto;
    margin: 1rem 0;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.table th,
.table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.table th {
    background: var(--surface);
    font-weight: 600;
    color: var(--text-color);
}

.table td {
    color: var(--text-color);
}

/* Responsive design */
@media (min-width: 768px) {
    .mobile-layout {
        /* Desktop stays an in-flow shell: no dynamic browser toolbars to
           track, and position:fixed would detach it from normal flow. */
        position: relative;
        inset: auto;
        flex-direction: row;
        max-width: 100vw;
        width: 100%;
        height: 100vh; /* Ensure full viewport height */
        overflow: hidden; /* Prevent body/page scroll; only content pane scrolls */
    }
    
    /* Real desktop sidebar: a labeled var(--sidebar-w) column with a school-identity
       header (top), the scrolling nav (middle), and the user profile (bottom).
       Was an 80px icon rail that accidentally wore the mobile bottom-nav's
       geometry. */
    .desktop-sidebar {
        width: var(--sidebar-w);
        min-width: var(--sidebar-w);
        max-width: var(--sidebar-w);
        flex: none;
        display: flex;
        flex-direction: column;
        background: var(--surface);
        border-right: 1px solid var(--border);
        padding: 0;
        position: sticky;
        top: 0;
        height: 100vh;
        /* NOT overflow:hidden — that clipped the footer profile menu at the
           sidebar edge (its right-side language buttons were unreachable). The
           nav slot scrolls itself (min-height:0 below); the sidebar stays put
           without clipping, and its z-index keeps the escaping menu above the
           content pane. */
        overflow: visible;
        z-index: 20;
    }

    /* School identity header */
    .sidebar-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
        min-height: 60px;
    }
    .sidebar-brand-icon { font-size: 1.4rem; line-height: 1; }

    /* Quick-switcher trigger between the brand and the nav scroll. */
    .sidebar-search-trigger {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 10px 12px 0;
        padding: 8px 12px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: transparent;
        color: var(--text-muted);
        font-size: var(--text-sm);
        text-align: left;
    }

    .sidebar-search-trigger:hover {
        color: var(--primary);
        border-color: var(--primary);
    }

    .sidebar-search-trigger:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: -2px;
    }

    .sidebar-search-trigger span { flex: 1; }

    .sidebar-search-kbd {
        font-size: var(--text-xs);
        color: var(--text-muted);
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 1px 6px;
        background: transparent;
    }
    .sidebar-brand-text { min-width: 0; display: flex; flex-direction: column; }
    .sidebar-brand-name {
        font-size: var(--text-sm);
        font-weight: 700;
        color: var(--text-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sidebar-brand-role {
        font-size: var(--text-xs);
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Scrolling nav slot. min-height:0 lets a flex child actually scroll
       instead of growing (needed so the 14-item admin nav scrolls internally
       and the sidebar itself never overflows). */
    .sidebar-nav-scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: thin;
        padding: 8px 0;
    }

    /* Priority links mirror the four stable mobile tabs. Secondary destinations
       are progressively disclosed below them instead of becoming a long scroll. */
    .sidebar-priority-items {
        padding-bottom: 8px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--border);
    }

    .sidebar-secondary-sections {
        padding-top: 2px;
    }

    /* Section heading in the desktop sidebar. It is a full-width button so the
       whole label is a comfortable target, not just the chevron. */
    .sidebar-group-heading {
        padding: 9px 16px 9px 24px;
        margin: 2px 0;
        font-size: var(--text-xs);
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-muted);
        opacity: 0.82;
    }

    .sidebar-group-heading:first-child {
        margin-top: 0;
    }

    .sidebar-group-trigger {
        width: 100%;
        min-height: 38px;
        display: flex;
        align-items: center;
        gap: 8px;
        border: 0;
        background: transparent;
        text-align: start;
        cursor: pointer;
    }

    .sidebar-group-trigger:hover {
        color: var(--text-color);
        background: var(--brand-50);
    }

    .sidebar-group-trigger:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: -2px;
    }

    .sidebar-group-trigger > span:first-child {
        flex: 1;
        min-width: 0;
    }

    .sidebar-group-chevron {
        flex: none;
        font-size: 0.75rem;
        transition: transform 0.15s ease;
    }

    .sidebar-group-chevron.expanded {
        transform: rotate(180deg);
    }

    .sidebar-group-items {
        padding-bottom: 4px;
    }

    .sidebar-group-badge,
    .desktop-nav .nav-item .sidebar-nav-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        min-width: 20px;
        min-height: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: #ef4444;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 20px;
        text-align: center;
    }

    .desktop-nav .nav-item .sidebar-nav-badge {
        margin-left: auto;
    }

    /* User profile pinned to the bottom (replaces the floating avatar) */
    .sidebar-footer {
        border-top: 1px solid var(--border);
        padding: 10px 12px;
    }

    .main-content {
        flex: 1;
        padding: 0;
        padding-bottom: 1rem; /* Reset bottom padding for desktop */
        min-width: 0; /* Allow flexbox shrinking */
        overflow-x: hidden; /* Prevent horizontal scroll */
        overflow-y: auto;  /* Scroll only the main content area */
        height: 100vh;     /* Match viewport height so only this area scrolls */
        box-sizing: border-box;
    }

    /* Content container: cap, center, breathe. Every page sits in a capped,
       centered column (--content-max matches the Dashboard's own 1400px grid
       cap). Replaces the old "aggressive gap removal" patches that fought the
       zero-padding full-bleed layout — with real padding they are moot. */
    .main-content .page-content {
        max-width: var(--content-max);
        margin-inline: auto;
        padding: 1.5rem 2rem 4rem;
    }

    /* Opt-out for genuinely full-bleed screens (wide week grids etc.). */
    .main-content .page-content--full {
        max-width: none;
        margin-inline: 0;
    }

    .main-content > *:first-child,
    .main-content .page-content > h1:first-child {
        margin-top: 0 !important;
    }
    
    .mobile-header {
        display: none;
    }
    
    .bottom-nav {
        display: none !important;
    }

    /* .desktop-sidebar sets display:flex above; don't re-declare display here
       (the element is also .desktop-nav, and a later display:block would beat
       the flex column). */

    /* Horizontal labeled rows — explicitly reset the mobile bottom-nav geometry
       (flex-direction:column, width:75px, the translateY pop) that the base
       .nav-item carries. */
    .desktop-nav .nav-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: auto;
        height: 40px;
        padding: 8px 12px;
        margin: 2px 12px;
        gap: 12px;
        border-radius: var(--radius-md);
        text-decoration: none;
        color: var(--text-muted);
        transition: background-color 0.15s, color 0.15s;
        font-size: var(--text-sm);
        font-weight: 500;
        transform: none;
    }

    .desktop-nav .nav-item:hover {
        background: var(--brand-50);
        color: var(--text-color);
        transform: none;
    }

    .desktop-nav .nav-item.active {
        background: var(--brand-100);
        color: var(--primary);
        transform: none;
    }

    .desktop-nav .nav-icon {
        flex: none;
        width: 20px;
        height: 20px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.05rem;
    }

    /* Reset the base `.nav-item span:not(.nav-icon)` (mobile bottom-nav) rule that
       turns the label into a centered flex box: a label wider than the row would
       centre and clip on BOTH ends (e.g. "Ημερολόγιο πληρωμών" lost its first
       letter under the icon). Sidebar labels are start-aligned blocks that ellipsize.
       Selector deliberately (0,3,0) to outrank that (0,2,1) base rule. */
    .desktop-nav .nav-item .nav-label {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        padding: 0;
        text-align: start;
        justify-content: flex-start;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }
}

/* ── Desktop data-table recipe ───────────────────────────────────────────────
   Shared treatment for the admin entity tables (Students, Payments, Classes,
   Teachers, Classrooms). Add `table-data` (+ `table-hover`) to the <table> and
   `table-data-wrap` to its `.table-responsive` wrapper. Denser rows, a sticky
   header, and a brand-tint row hover — the "real admin tool" feel. Desktop only
   (the tables are d-md-block; mobile shows cards). See docs/design-system.md. */
@media (min-width: 768px) {
    /* Density. Both classes in the selector (.table.table-data) so it outranks
       the app's own `.table td { padding: 0.75rem }` rules (equal specificity
       otherwise, and they appear later in the file). */
    .table.table-data > :not(caption) > * > * {
        padding: 0.4rem 0.75rem;
        font-size: var(--text-sm);
        vertical-align: middle;
    }

    /* Sticky header. Works once the wrapper is overflow:visible (below) so the
       scroll ancestor is the content pane, not the .table-responsive box.
       Bootstrap's default cell background is transparent, so the header MUST be
       forced opaque (!important beats striped/scoped cell-bg rules) and sit
       above the rows scrolling under it — otherwise the row shows through the
       sticky title. */
    .table-data thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--card-bg) !important;
        box-shadow: inset 0 -1px 0 var(--border);
    }
    /* Belt-and-suspenders: paint the row/section behind the cells too. */
    .table-data thead,
    .table-data thead tr {
        background-color: var(--card-bg);
    }
}

/* Brand-tint hover via Bootstrap's own hover variable (tables carry
   `table-hover`), so it composes with striping instead of fighting it. */
.table-data {
    --bs-table-hover-bg: var(--brand-50);
}
[data-theme="dark"] .table-data {
    --bs-table-hover-bg: rgba(var(--brand-rgb), 0.10);
}

/* Whole-row-clickable tables (row opens the detail modal). The brand-tint
   hover already comes from --bs-table-hover-bg above; this just adds the
   pointer and a keyboard focus ring. Actions cell stops propagation in markup. */
.table-data tbody tr.row-clickable {
    cursor: pointer;
}
.table-data tbody tr.row-clickable:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* Health dots — at-a-glance recency status (God observability surfaces; see
   docs/design-system.md "Status dots"). Color states map to
   SchoolActivityLevel: active (≤48h) / quiet (≤14d) / dormant / never. */
.health-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
}
.health-dot--active { background: var(--success); }
.health-dot--quiet { background: var(--warning); }
.health-dot--dormant { background: var(--danger); }
.health-dot--never { background: var(--text-muted); opacity: 0.45; }

/* Tappable cards — the mobile mirror of .row-clickable: the card IS the row,
   tapping it opens the same target as the desktop row-click. Touch has no
   hover, so the affordance is a chevron (markup) + an instant :active tint;
   no transform on press (background feedback reads better during the Blazor
   Server roundtrip and never jitters). Controls inside the card live only in
   .card-action-row and stop propagation in markup. */
.card-tappable {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; /* we paint our own pressed state */
    touch-action: manipulation;               /* no double-tap-zoom delay */
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.card-tappable:active {
    background-color: var(--brand-50);
    border-color: rgba(var(--brand-rgb), 0.35);
}
[data-theme="dark"] .card-tappable:active {
    background-color: rgba(var(--brand-rgb), 0.12);
}
.card-tappable:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
@media (hover: hover) {
    .card-tappable:hover {
        border-color: rgba(var(--brand-rgb), 0.35);
        box-shadow: var(--shadow-md);
    }
}

/* The "this opens" glyph: <i class="bi bi-chevron-right card-tappable-chevron"
   aria-hidden="true"> in the card's header row. */
.card-tappable-chevron {
    color: var(--text-muted);
    font-size: var(--text-base);
    flex-shrink: 0;
    align-self: center;
}
.card-tappable:active .card-tappable-chevron {
    color: var(--primary);
}

/* The only place interactive controls may live inside a tappable card:
   keyline-separated, max two controls, every control a full-height touch
   target with @onclick:stopPropagation="true" in markup. */
.card-action-row {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}
.card-action-row .btn {
    flex: 1;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Mobile card lists: the last card must clear the fixed bottom nav +
   support-chat bubble (the ~80px dead zone). */
.card-list-bottom-pad {
    padding-bottom: 6rem;
}

/* Tap-to-call / tap-to-email (Components/ContactLink.razor). Brand ink is the whole
   affordance — contact details that look like the muted text around them read as
   inert, which is what they used to be. Vertical padding enlarges the touch target
   without disturbing the line box of the small contact blocks these sit in. */
.contact-link {
    color: var(--primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding-block: 4px;
    word-break: break-word;
}
.contact-link:hover,
.contact-link:focus-visible,
.contact-link:active {
    color: var(--primary-hover);
    text-decoration: underline;
}
.contact-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Entity avatar tile on cards — icon-tile rule: background and ink come from
   the SAME --entity-* hue pair, so the tile can never clash. Initials only,
   aria-hidden (the name text follows right after it). */
.card-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 700;
    flex-shrink: 0;
    background: var(--entity-brand-bg);
    color: var(--entity-brand-fg);
}
.card-avatar--students { background: var(--entity-students-bg); color: var(--entity-students-fg); }
.card-avatar--classes  { background: var(--entity-classes-bg);  color: var(--entity-classes-fg); }
.card-avatar--teachers { background: var(--entity-teachers-bg); color: var(--entity-teachers-fg); }
.card-avatar--parents  { background: var(--entity-parents-bg);  color: var(--entity-parents-fg); }

/* "/" search-hotkey hint — a subtle key badge pinned to the right of a tagged
   search box on desktop. Hidden on mobile, and while the field is engaged
   (:focus-within) so it never fights the clear button or typed text. */
.search-hotkey-wrap {
    position: relative;
}
.search-hotkey-key {
    display: none;
}
@media (min-width: 768px) {
    .search-hotkey-wrap .form-control {
        padding-right: 2.25rem;
    }
    .search-hotkey-key {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1;
        color: var(--text-muted);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 4px;
        pointer-events: none;
        z-index: 2;
    }
    .search-hotkey-wrap:focus-within .search-hotkey-key {
        display: none;
    }
}

/* At lg+ drop the wrapper's horizontal scroll box, which would otherwise trap
   position:sticky (the wrapper is exactly as tall as the table, so a sticky
   header inside it never engages); below lg keep .table-responsive's
   overflow-x for graceful horizontal scroll.

   The columns do NOT always fit at lg+ — Greek labels push e.g. the Classes
   table past the content pane at laptop widths, and main's overflow-x:hidden
   then clipped the Actions column with no way to scroll. So on pages that
   contain a data table, the content pane itself becomes the horizontal
   scroller: `auto` shows a scrollbar only when a table genuinely overflows,
   and sticky headers keep working because main is the sticky scroll ancestor
   either way. */
@media (min-width: 992px) {
    .table-responsive.table-data-wrap {
        overflow: visible;
    }
    main.main-content:has(.table-data-wrap) {
        overflow-x: auto;
    }
}

/* Theme toggle */
.theme-toggle {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--border);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.theme-toggle:hover {
    background: var(--primary);
    transform: scale(1.1);
}

.theme-icon {
    position: absolute;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Light mode - show sun, hide moon */
.theme-toggle .sun-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.theme-toggle .moon-icon {
    opacity: 0;
    transform: rotate(180deg) scale(0.5);
}

/* Dark mode - hide sun, show moon */
.theme-toggle.dark .sun-icon {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
}

.theme-toggle.dark .moon-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Payment Status Colors */
.payment-status-paid {
    background: linear-gradient(135deg, #10B981, #065F46);
    color: white;
    border: none;
}

.payment-status-paid-today {
    background: linear-gradient(135deg, #10B981, #065F46);
    color: white;
    border: none;
    animation: celebration-glow 3s ease-in-out;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

/* Pending is amber everywhere: the payment modals already use bg-warning, and blue
   here made the same payment change color between the list and the modal. */
.payment-status-pending {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: white;
    border: none;
}

.payment-status-overdue {
    background: linear-gradient(135deg, #EF4444, #B91C1C);
    color: white;
    border: none;
    animation: pulse-warning 2s infinite;
}

@keyframes pulse-warning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

@keyframes celebration-glow {
    0% { 
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
        transform: scale(1);
    }
    25% { 
        box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);
        transform: scale(1.05);
    }
    50% { 
        box-shadow: 0 0 25px rgba(16, 185, 129, 0.5);
        transform: scale(1.02);
    }
    75% { 
        box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);
        transform: scale(1.05);
    }
    100% { 
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
        transform: scale(1);
    }
}

/* Payment card enhancements */
.payment-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-left: 4px solid transparent;
}

.payment-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.payment-card.status-paid {
    border-left-color: #10B981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), var(--card-bg));
}

/* Table row enhancements for paid payments */
.table tbody tr.payment-row-paid {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), var(--bg-color));
    border-left: 4px solid #10B981;
}

.table tbody tr.payment-row-paid-today {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), var(--bg-color));
    border-left: 4px solid #10B981;
    animation: subtle-celebration 2s ease-in-out;
}

@keyframes subtle-celebration {
    0%, 100% { 
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), var(--bg-color));
    }
    50% { 
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), var(--bg-color));
    }
}

.payment-card.status-pending {
    border-left-color: #3B82F6;
}

.payment-card.status-overdue {
    border-left-color: #EF4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), var(--card-bg));
}

.payment-card.status-partial {
    border-left-color: #F59E0B;
}

/* Payment statistics cards */
.stats-card.paid {
    background: linear-gradient(135deg, #10B981, #065F46);
    color: white;
}

.stats-card.pending {
    background: linear-gradient(135deg, #3B82F6, #1E40AF);
    color: white;
}

.stats-card.overdue {
    background: linear-gradient(135deg, #EF4444, #B91C1C);
    color: white;
}

.stats-card.total {
    background: linear-gradient(135deg, #6B7280, #374151);
    color: white;
}

/* Utility classes */
.text-muted {
    color: var(--text-muted);
}

.mb-4 {
    margin-bottom: 1rem;
}

.mt-4 {
    margin-top: 1rem;
}

.hidden {
    display: none;
}

@media (max-width: 767px) {
    .desktop-nav {
        display: none;
    }
    
    /* Ensure bottom navigation is always visible on mobile */
    .bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Hide desktop-only navigation items on mobile */
    .nav-item.desktop-only {
        display: none !important;
    }
    
    /* Mobile-specific optimizations */
    .btn {
        min-height: 44px; /* Touch target size */
        font-size: 1rem;
    }
    
    .table th,
    .table td {
        padding: 0.5rem 0.25rem;
        font-size: 0.875rem;
    }
    
    .card {
        margin-bottom: 0.75rem;
        border-radius: 0.75rem;
    }
    
    /* Improve readability on small screens */
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.25rem;
    }
    
    .form-control,
    .form-select {
        font-size: 1rem; /* Prevent zoom on iOS */
        padding: 0.875rem;
        border-radius: 0.5rem;
        border: 2px solid var(--border);
        transition: all 0.2s ease;
    }
    
    .form-control:focus,
    .form-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.1);
        transform: translateY(-1px);
    }
    
    .form-label {
        font-weight: 600;
        color: var(--text-color);
        margin-bottom: 0.5rem;
    }
    
    /* Mobile filter styles */
    .filter-controls .row > div {
        margin-bottom: 1rem;
    }
    
    .filter-summary {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }
    
    .table-responsive {
        border-radius: 0.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Announcements Styles */
.announcements-container {
    max-width: 100%;
}

.announcement-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.announcement-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.announcement-card.priority-urgent {
    border-left: 4px solid #EF4444;
}

.announcement-card.priority-high {
    border-left: 4px solid #F59E0B;
}

.announcement-card.priority-normal {
    border-left: 4px solid #10B981;
}

.announcement-card.priority-low {
    border-left: 4px solid #6B7280;
}

.announcement-card .card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

/* Remove Bootstrap dropdown caret from all dropdowns */
.dropdown-toggle::after {
    display: none;
}

/* Remove Bootstrap select dropdown arrow */
.form-select,
select.form-select,
.form-select:focus,
select.form-select:focus {
    background-image: none !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* MobilePickerSelect inside a Bootstrap input-group: the wrapper div must
   flex like the select it wraps (Bootstrap only targets bare .form-select
   children), or it wraps onto its own line below the input-group addon.
   The tiny basis is `flex-basis`, not Bootstrap's `width: 1%`: it stops a
   long option label wrapping the shell onto its own line (input-groups are
   flex-wrap: wrap, so an auto basis wraps before it shrinks), while staying
   on the main axis. Some input-groups flip to flex-direction: column on
   mobile (.class-selector on /attendance); there `width: 1%` would be the
   cross axis and would collapse the control to a sliver, but a basis is
   just the height and align-items: stretch still gives it full width. */
.input-group > .mobile-picker-select-shell {
    flex: 1 1 1%;
    min-width: 0;
}

.input-group > .mobile-picker-select-shell:not(:first-child) > .form-select,
.input-group > .mobile-picker-select-shell:not(:first-child) > .mobile-picker-trigger {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .mobile-picker-select-shell:not(:last-child) > .form-select,
.input-group > .mobile-picker-select-shell:not(:last-child) > .mobile-picker-trigger {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Fix dropdown z-index issues */
.dropdown-menu {
    z-index: 1060 !important;
}

.dropdown {
    position: relative;
}

/* Ensure payment cards don't interfere with dropdowns */
.payment-card .dropdown-menu {
    z-index: 1070 !important;
}

/* Mobile card view dropdown fixes */
.d-lg-none .card-body .dropdown-menu {
    z-index: 1080 !important;
}

/* Fix header dropdown appearing behind table rows */
.card-header .dropdown-menu {
    z-index: 1090 !important;
}

/* Ensure table rows don't create stacking context issues */
.table tbody tr {
    position: relative;
    z-index: 1;
}

/* The rule above makes every row a sibling stacking context, so a row's open
   dropdown (z-index 1060, but trapped inside its own row's context) paints
   UNDER the rows that follow it. Lift the row that owns the open menu. */
.table tbody tr:has(.dropdown-menu.show) {
    z-index: 5;
}

/* Header area should have higher z-index */
.card-header {
    position: relative;
    z-index: 10;
}

/* Force dropdown menus to appear above everything */
.card-header .dropdown {
    position: relative;
    z-index: 11;
}

/* Fix mobile payment card dropdown z-index - STRONGER FIX */
.payment-card .dropdown {
    position: relative;
    z-index: 9999 !important;
}

.payment-card .dropdown-menu {
    z-index: 9999 !important;
    position: absolute !important;
}

/* Target Bootstrap dropdown specifically in mobile cards */
.d-lg-none .payment-card .dropdown-menu {
    z-index: 9999 !important;
    position: absolute !important;
    /* Force dropdown to always appear above */
    bottom: 100% !important;
    top: auto !important;
    margin-bottom: 0.25rem !important;
}

/* Ensure parent containers don't clip dropdown */
.payment-card {
    position: relative;
    overflow: visible !important;
}

/* Fix container clipping for mobile payment cards */
.d-lg-none .card-body {
    overflow: visible !important;
}

.d-lg-none .card {
    overflow: visible !important;
}

/* Ensure sufficient padding at bottom of payment container */
.d-lg-none .card-body {
    padding-bottom: 3rem !important;
}

/* Fix Parents.razor dropdown z-index - STRONGER FIX */
.parent-card {
    position: relative;
    overflow: visible !important;
}

.parent-card .dropdown {
    position: relative;
    z-index: 9999 !important;
}

.parent-card .dropdown-menu {
    z-index: 9999 !important;
    position: absolute !important;
}

.parent-card .card-header {
    position: relative;
    z-index: 9998 !important;
    overflow: visible !important;
}

.parent-card .card-header .dropdown {
    position: relative;
    z-index: 9999 !important;
}

.parent-card .card-header .dropdown-menu {
    z-index: 9999 !important;
    position: absolute !important;
}

/* Ensure parent containers don't clip */
.col-md-6.col-lg-4 {
    position: relative;
    overflow: visible !important;
}

/* Target Bootstrap dropdown classes directly */
.parent-card .dropdown-toggle[data-bs-toggle="dropdown"] + .dropdown-menu {
    z-index: 9999 !important;
}

/* Parent-card action menus must open upward and stack above the card
   grid and the fixed mobile nav; every value here is load-bearing. */
.parent-card .dropdown-menu.show {
    z-index: 999999 !important;
    position: absolute !important;
    top: auto !important;
    bottom: 100% !important;
    left: auto !important;
    right: 0 !important;
    transform: none !important;
    margin-bottom: 0.25rem !important;
    background-color: white !important;
    border: 2px solid #007bff !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    min-width: 160px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Priority badges */
.priority-urgent .card-header {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), var(--surface));
}

.priority-high .card-header {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), var(--surface));
}

.priority-normal .card-header {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), var(--surface));
}

.priority-low .card-header {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.1), var(--surface));
}

/* Teacher-specific mobile improvements */
@media (max-width: 767px) {
    /* Mobile announcements */
    .announcement-card .card-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .announcement-card .dropdown {
        margin-top: 0.5rem;
        align-self: flex-end;
    }
    
    .announcements-container {
        margin-top: 1rem;
    }
    
    /* Mobile attendance improvements */
    .attendance-summary {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem;
    }
    
    .attendance-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.5rem;
        width: 100%;
    }
    
    .attendance-stats .badge {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
        flex: 1;
        text-align: center;
        min-width: 80px;
    }
    
    /* Mobile-friendly attendance buttons */
    .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .btn-group .btn {
        flex: 1;
        min-width: 70px;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        border-radius: 0.375rem;
    }
    
    /* Improve attendance form controls on mobile */
    .attendance-controls .row {
        margin: 0 -0.5rem;
    }
    
    .attendance-controls .col-md-6,
    .attendance-controls .col-md-4 {
        padding: 0 0.5rem;
        margin-bottom: 1rem;
    }
    
    /* Student attendance table on mobile */
    .table-responsive {
        border-radius: 0.75rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.875rem;
        box-shadow: var(--shadow-sm);
    }
    
    .table td {
        padding: 0.75rem 0.5rem;
        vertical-align: middle;
        border-bottom: 1px solid var(--border);
    }
    
    .table td:first-child {
        min-width: 120px;
        font-weight: 500;
    }
    
    /* Mobile attendance progress */
    .progress {
        height: 8px;
        border-radius: 4px;
        margin-bottom: 0.5rem;
    }
    
    /* Enhanced mobile cards for teachers */
    .attendance-card,
    .announcement-card {
        margin-bottom: 1rem;
        border-radius: 0.75rem;
        box-shadow: var(--shadow);
        border: 1px solid var(--border);
    }
    
    .attendance-card .card-header,
    .announcement-card .card-header {
        padding: 1rem;
        border-radius: 0.75rem 0.75rem 0 0;
        background: var(--surface);
    }
    
    .attendance-card .card-body,
    .announcement-card .card-body {
        padding: 1rem;
    }
    
    /* Teacher navigation enhancements */
    
    /* Floating action button for quick access */
    .teacher-fab {
        position: fixed;
        bottom: 90px;
        right: 1rem;
        width: 56px;
        height: 56px;
        background: var(--primary);
        border-radius: 50%;
        box-shadow: var(--shadow-md);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: white;
        z-index: 50;
        transition: all 0.3s ease;
    }
    
    .teacher-fab:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(var(--brand-rgb), 0.4);
    }
}

/* Desktop Header Layout */
.desktop-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.school-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.school-icon {
    font-size: 1.5rem;
    background: var(--surface);
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
}

.school-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-color);
}

.desktop-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.desktop-controls .btn {
    white-space: nowrap;
}

/* Responsive adjustments for desktop header */
@media (max-width: 992px) and (min-width: 768px) {
    .desktop-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .desktop-controls {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Ultra-Compact Mobile Admin Filter Styles */
.compact-filter-container {
    background: rgba(var(--bs-primary-rgb), 0.03);
    border-radius: 0.75rem;
    padding: 0.75rem;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.1);
}

.compact-select {
    font-size: 0.875rem;
    min-width: 110px;
    max-width: 140px;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
}

.compact-add-btn {
    min-width: 36px;
    white-space: nowrap;
    font-weight: 600;
}

.filter-status-compact {
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(var(--bs-primary-rgb), 0.1);
}

.badge-sm {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
}

/* Mobile optimizations */
@media (max-width: 576px) {
    .compact-filter-container {
        padding: 0.5rem;
        margin: 0 -0.25rem 1rem -0.25rem;
    }
    
    .compact-select {
        min-width: 100px;
        max-width: 120px;
        font-size: 0.8rem;
    }
    
    .filter-status-compact {
        padding-top: 0.375rem;
        margin-top: 0.375rem;
    }
}

/* Enhanced Time Picker Styles */
.time-picker-input {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
    font-weight: 600;
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.time-picker-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
    background: var(--bg-color);
}

.time-picker-input:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.time-picker-input.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
    background: rgba(239, 68, 68, 0.05);
}

.time-picker-input.is-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* Enhanced Input Group Styling for Time Pickers */
.time-picker-input + .input-group-text {
    background: var(--surface);
    border: 2px solid var(--border);
    border-left: none;
    border-radius: 0 0.5rem 0.5rem 0;
    transition: all 0.2s ease;
    padding: 0.75rem 1rem;
}

.time-picker-input:focus + .input-group-text {
    border-color: var(--primary);
    background: rgba(var(--brand-rgb), 0.05);
}

.time-picker-input:hover + .input-group-text {
    border-color: var(--primary);
}

.time-picker-input.is-invalid + .input-group-text {
    border-color: var(--danger);
    background: rgba(239, 68, 68, 0.05);
}

/* Time Display Enhancement */
.time-picker-input ~ small.text-muted {
    font-weight: 500;
    margin-top: 0.375rem;
    display: block;
}

.time-picker-input ~ small.text-success {
    font-weight: 600;
    margin-top: 0.375rem;
    display: block;
}

/* Session Form Enhancements */
.session-form-container .card {
    border: 2px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: var(--shadow);
}

.session-form-container .card-header {
    background: linear-gradient(135deg, var(--surface), var(--bg-color));
    border-bottom: 2px solid var(--border);
    border-radius: 0.75rem 0.75rem 0 0;
    padding: 1.25rem;
}

.session-form-container .card-body {
    padding: 1.5rem;
}

/* Session Duration Display */
.session-duration {
    background: linear-gradient(135deg, var(--success), #059669);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

/* Time Validation Feedback */
.time-validation-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
}

/* Desktop Enhancement for Time Pickers */
@media (min-width: 768px) {
    .time-picker-input {
        font-size: 1.125rem;
        padding: 0.875rem 1rem;
    }
    
    .time-picker-input + .input-group-text {
        padding: 0.875rem 1.25rem;
    }
    
    .session-form-container {
        max-width: 800px;
        margin: 0 auto;
    }
}

/* Mobile Optimizations for Time Pickers */
@media (max-width: 767px) {
    .time-picker-input {
        font-size: 1rem;
        padding: 0.75rem;
        border-width: 2px;
    }
    
    .time-picker-input + .input-group-text {
        padding: 0.75rem;
    }
    
    /* Ensure time inputs don't trigger zoom on iOS */
    .time-picker-input::-webkit-datetime-edit {
        padding: 0;
        margin: 0;
    }
    
    .time-picker-input::-webkit-datetime-edit-fields-wrapper {
        padding: 0;
    }
}

/* Custom Time Picker Dropdown Styles */
.custom-time-picker {
    background: var(--card-bg);
    border-radius: 0.5rem;
    padding: 0.75rem;
    border: 2px solid var(--border);
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem; /* Extra space for dropdown to open below */
    position: relative;
    overflow: visible;
}

.custom-time-picker:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.custom-time-picker.has-error {
    border-color: var(--danger);
    background: rgba(239, 68, 68, 0.05);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.time-hour-select,
.time-minute-select {
    font-weight: 600;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
    font-size: 1.1rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background: var(--bg-color);
    transition: all 0.2s ease;
    padding: 0.75rem 0.5rem;
    
    /* Force consistent dropdown positioning */
    position: relative;
    z-index: 1000;
    
    /* Webkit browsers */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Force dropdown to open below */
    overflow: visible;
}

.time-hour-select:focus,
.time-minute-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.15);
    outline: none;
    position: relative;
    z-index: 1001;
}

.time-hour-select:hover,
.time-minute-select:hover {
    border-color: var(--primary);
}

.time-hour-select.is-invalid,
.time-minute-select.is-invalid {
    border-color: var(--danger);
    background: rgba(239, 68, 68, 0.05);
}

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

.time-display .badge {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
}

/* The custom arrow image is stripped by the global .form-select
   background-image:none rule; only the spacing remains meaningful. */
.time-hour-select,
.time-minute-select {
    padding-right: 2.5rem;
}

/* Dark mode adjustments for custom time picker */
[data-theme="dark"] .custom-time-picker {
    background: var(--card-bg);
    border-color: var(--border);
}


/* Dropdown positioning fixes */
.custom-time-picker .row {
    position: relative;
    z-index: 100;
}

.custom-time-picker .col-6 {
    position: relative;
}



/* Session form container adjustments */
.session-form-container .card-body {
    padding-bottom: 3rem; /* Extra padding at bottom for dropdowns */
    position: relative;
    overflow: visible;
}

/* Modal body adjustments to prevent clipping */
.modal-body {
    overflow: visible;
    padding-bottom: 3rem; /* Extra space for dropdowns */
}

/* Mobile optimizations for custom time picker */
@media (max-width: 767px) {
    .custom-time-picker {
        padding: 0.5rem;
        margin-bottom: 2.5rem; /* Override with more space on mobile for dropdowns */
    }
    
    .time-hour-select,
    .time-minute-select {
        font-size: 1rem;
        padding: 0.625rem 2.25rem 0.625rem 0.5rem;
    }
    
    .time-display .badge {
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
    }
    
    .session-form-container .card-body {
        padding-bottom: 4rem; /* More space on mobile */
    }
    
    .modal-body {
        padding-bottom: 4rem; /* More space on mobile */
    }
}

/* Student Schedule Override Styles */
.student-overrides-section {
    border-left: 4px solid var(--primary);
    padding-left: 1rem;
    margin-bottom: 2rem;
}

.student-overrides-section h6 {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.override-card {
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.override-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.override-card.border-success {
    border-color: var(--success);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), var(--card-bg));
}

.override-card.border-secondary {
    border-color: var(--secondary);
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.05), var(--card-bg));
}

/* Enhanced dropdown for override actions */
.override-card .dropdown-menu {
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
}

.override-card .dropdown-item {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.override-card .dropdown-item:hover {
    background: var(--surface);
    transform: translateX(2px);
}

/* Form validation feedback */
.form-select:invalid {
    border-color: var(--danger);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6 1.4 1.4m0-1.4-1.4 1.4'/%3e%3c/svg%3e");
}

.form-select:valid {
    border-color: var(--success);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='m2.3 6.73.7-.4 1.8-2.8.5-.8.6-1 .1-.2c.1-.2.2-.3.3-.4.1-.1.2-.2.3-.3.1-.1.3-.1.4-.1s.2 0 .3.1c.1.1.2.2.2.3s0 .2-.1.3l-.7 1.2-2.2 3.6c-.1.1-.2.2-.3.3-.1.1-.2.1-.3.1s-.2 0-.3-.1c-.1-.1-.2-.2-.2-.3s0-.2.1-.3z'/%3e%3c/svg%3e");
}

/* Mobile optimizations for schedule overrides */
@media (max-width: 767px) {
    .student-overrides-section {
        padding-left: 0.75rem;
        margin-bottom: 1.5rem;
    }
    
    .override-card {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .override-card .d-flex {
        flex-direction: column !important;
        gap: 1rem;
    }
    
    .override-card .dropdown {
        align-self: flex-end;
    }
    
    /* Stack form fields on mobile */
    .row .col-md-6 {
        margin-bottom: 1rem;
    }
}

/* Fix Payment Overview dropdown button visibility */
.card-header .btn-outline-secondary {
    border-color: var(--primary) !important;
    color: white !important;
    background-color: var(--primary) !important;
}

.card-header .btn-outline-secondary:hover {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: white !important;
    transform: translateY(-1px);
}

.card-header .btn-outline-secondary:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important;
}

/* Mobile Date Picker Styles */
.mobile-date-container {
    position: relative;
    width: 100%;
}

.mobile-date-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.5rem;
    border: 2px solid var(--border);
    background: var(--card-bg);
    color: transparent;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
}

.mobile-date-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.15);
    outline: none;
    color: var(--text-color);
}

.mobile-date-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 0.5rem;
    cursor: pointer;
    pointer-events: none;
    z-index: 1;
    transition: all 0.2s ease;
}

.mobile-date-container:hover .mobile-date-overlay {
    border-color: var(--primary);
    background: rgba(var(--brand-rgb), 0.05);
}

.mobile-date-container:focus-within .mobile-date-overlay {
    opacity: 0;
    pointer-events: none;
}

/* Mobile date picker improvements */
@media (max-width: 767px) {
    .mobile-date-input {
        font-size: 1rem; /* Prevent zoom on iOS */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    
    .mobile-date-overlay {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
    }
}

/* ============================= */
/* Enhanced Dark Mode Support   */
/* ============================= */

/* Fix Bootstrap components that don't adapt to dark mode */
[data-theme="dark"] .badge.bg-light {
    background-color: var(--bs-gray-700) !important;
    color: var(--bs-light) !important;
    border: 1px solid var(--bs-gray-600);
}

[data-theme="dark"] .table-light {
    background-color: var(--bs-gray-800) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .table-light th,
[data-theme="dark"] .table-light td {
    border-color: var(--bs-gray-600) !important;
}

/* Card improvements for dark mode */
[data-theme="dark"] .card {
    background-color: var(--bs-gray-900);
    border-color: var(--bs-gray-700);
    color: var(--bs-light);
}

[data-theme="dark"] .card-header {
    background-color: var(--bs-gray-800);
    border-bottom-color: var(--bs-gray-700);
    color: var(--bs-light);
}

[data-theme="dark"] .card-body {
    color: var(--bs-light);
}

/* Form improvements for dark mode */
[data-theme="dark"] .form-control {
    background-color: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
    color: var(--bs-light);
}

[data-theme="dark"] .form-control:focus {
    background-color: var(--bs-gray-700);
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-rgb), 0.25);
    color: var(--bs-light);
}

/* App-wide dark-mode select convention: selects stay LIGHT in dark mode,
   matching MobilePickerSelect. A dark control invites the OS black popup
   menu and unreadable pickers on mobile. !important so stray page-level
   dark overrides cannot flip individual dropdowns back to dark. */
[data-theme="dark"] select,
[data-theme="dark"] .form-select {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #111827 !important;
    color-scheme: light;
}

[data-theme="dark"] select:focus,
[data-theme="dark"] .form-select:focus {
    background-color: #ffffff !important;
    border-color: var(--bs-primary) !important;
    color: #111827 !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-rgb), 0.25) !important;
}

/* Keep native picker popups readable across the app instead of falling back to black browser menus */
select,
.form-select,
.compact-select,
.time-hour-select,
.time-minute-select {
    color-scheme: light;
}

select option,
select optgroup,
.form-select option,
.form-select optgroup,
.compact-select option,
.compact-select optgroup,
.time-hour-select option,
.time-hour-select optgroup,
.time-minute-select option,
.time-minute-select optgroup {
    background-color: #ffffff;
    color: #111827;
}

/* Desktop dropdowns render their option popup IN-PAGE ("customizable
   select", Chromium 135+). The native popup is an OS-level window created
   with the OS/browser color scheme, so in dark mode it paints a black
   rectangle before our forced-light options draw — a black flash on every
   desktop dropdown open. base-select moves the picker into the page's top
   layer instead: no OS window, no flash, the panel is fully styleable, and
   it escapes modal overflow clipping. Grouping the selects with
   ::picker(select) is deliberate: a browser that doesn't know ::picker
   drops the entire rule, so unsupported browsers (Firefox) keep the native
   popup and the chevron-strip appearance:none above. The selector list
   repeats the chevron-strip rule's selectors (incl. :focus) so base-select
   out-cascades its appearance:none in every state. Desktop only — mobile
   hides native selects behind the MobilePickerSelect modal. */
@media (min-width: 768px) {
    select,
    .form-select,
    select.form-select,
    .form-select:focus,
    select.form-select:focus,
    ::picker(select) {
        appearance: base-select;
    }

    ::picker(select) {
        margin-top: 4px;
        padding: 6px;
        border: 1px solid #d1d5db;
        border-radius: 12px;
        background: #ffffff;
        color: #111827;
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    }

    /* Same affordance as the mobile trigger's ▾ (base-select re-adds a real
       picker icon; the stripped Bootstrap background-image stays stripped). */
    select::picker-icon {
        color: #6b7280;
        font-size: 0.85rem;
    }

    select option {
        padding: 8px 12px;
        border-radius: 8px;
        background: #ffffff;
        color: #111827;
    }

    select option:hover,
    select option:focus {
        background: var(--brand-50);
    }

    select option:checked {
        background: var(--brand-50);
        font-weight: 600;
    }

    select option::checkmark {
        color: var(--primary);
    }
}

[data-theme="dark"] .form-label {
    color: var(--bs-light);
}

/* Dropdown improvements for dark mode */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
}

[data-theme="dark"] .dropdown-item {
    color: var(--bs-light);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--bs-gray-700);
    color: var(--bs-light);
}

[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--bs-gray-600);
}

/* Modal improvements for dark mode */
[data-theme="dark"] .modal-content {
    background-color: var(--bs-gray-900);
    border-color: var(--bs-gray-700);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--bs-gray-700);
    color: var(--bs-light);
}

[data-theme="dark"] .modal-body {
    color: var(--bs-light);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--bs-gray-700);
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Table improvements for dark mode */
[data-theme="dark"] .table {
    color: var(--bs-light);
}

[data-theme="dark"] .table th {
    border-bottom-color: var(--bs-gray-600);
    color: var(--bs-light);
}

[data-theme="dark"] .table td {
    border-bottom-color: var(--bs-gray-700);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .table-hover > tbody > tr:hover > td {
    background-color: rgba(255, 255, 255, 0.075);
}

/* Navigation improvements for dark mode */
[data-theme="dark"] .navbar {
    background-color: var(--bs-gray-900) !important;
}

[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .navbar-nav .nav-link {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .navbar-nav .nav-link:hover,
[data-theme="dark"] .navbar-nav .nav-link:focus {
    color: var(--bs-primary) !important;
}

/* Alert improvements for dark mode */
[data-theme="dark"] .alert {
    border-color: var(--bs-gray-600);
}

[data-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.2);
    border-color: var(--bs-success);
    color: var(--bs-success);
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.2);
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.2);
    border-color: var(--bs-warning);
    color: var(--bs-warning);
}

[data-theme="dark"] .alert-info {
    background-color: rgba(13, 202, 240, 0.2);
    border-color: var(--bs-info);
    color: var(--bs-info);
}

/* Badge improvements for dark mode */
[data-theme="dark"] .badge.bg-secondary {
    background-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

/* Text improvements for dark mode */
[data-theme="dark"] .text-muted {
    color: var(--bs-gray-400) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--bs-light) !important;
}

/* Border improvements for dark mode */
[data-theme="dark"] .border {
    border-color: var(--bs-gray-600) !important;
}

[data-theme="dark"] .border-top {
    border-top-color: var(--bs-gray-600) !important;
}

[data-theme="dark"] .border-bottom {
    border-bottom-color: var(--bs-gray-600) !important;
}

/* List group improvements for dark mode */
[data-theme="dark"] .list-group-item {
    background-color: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
    color: var(--bs-light);
}

[data-theme="dark"] .list-group-item:hover {
    background-color: var(--bs-gray-700);
}

/* Breadcrumb improvements for dark mode */
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-gray-400);
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--bs-gray-300);
}

/* Pagination improvements for dark mode */
[data-theme="dark"] .page-link {
    background-color: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
    color: var(--bs-light);
}

[data-theme="dark"] .page-link:hover {
    background-color: var(--bs-gray-700);
    border-color: var(--bs-gray-500);
    color: var(--bs-light);
}

[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
    color: var(--bs-gray-500);
}

/* Layout and dashboard dark mode */
[data-theme="dark"] body {
    background-color: var(--bs-gray-900) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .mobile-layout {
    background-color: var(--bs-gray-900) !important;
}

[data-theme="dark"] .mobile-header {
    background-color: var(--bs-gray-800) !important;
    border-bottom-color: var(--bs-gray-700) !important;
}

[data-theme="dark"] .mobile-header-content h1,
[data-theme="dark"] .mobile-header-subtitle {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .mobile-school-info {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .main-content {
    background-color: var(--bs-gray-900) !important;
    color: var(--bs-light) !important;
}

/* The critical CSS in _Host.cshtml pins .page-content white (anti-flash);
   this attribute-scoped rule outranks it so dark mode stays dark. */
[data-theme="dark"] .page-content {
    background-color: var(--bs-gray-900) !important;
}

[data-theme="dark"] .bottom-nav {
    background-color: var(--bs-gray-800) !important;
    border-top-color: var(--bs-gray-700) !important;
}

/* Light mode desktop sidebar - near-white surface (was the gray --nav-bg rail) */
.desktop-sidebar {
    background-color: var(--surface) !important;
}

[data-theme="dark"] .desktop-sidebar {
    background-color: var(--bs-gray-800) !important;
    border-right-color: var(--bs-gray-700) !important;
}


/* Navigation links dark mode */
[data-theme="dark"] .nav-link {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link:focus {
    color: var(--bs-primary) !important;
}

[data-theme="dark"] .nav-link.active {
    color: var(--bs-primary) !important;
    background-color: var(--bs-gray-700) !important;
}

/* Mobile navigation dark mode */
[data-theme="dark"] .mobile-nav-item {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .mobile-nav-item:hover {
    color: var(--bs-primary) !important;
    background-color: var(--bs-gray-700) !important;
}

[data-theme="dark"] .mobile-nav-item.active {
    color: var(--bs-primary) !important;
    background-color: var(--bs-gray-700) !important;
}

/* Dashboard cards dark mode */
[data-theme="dark"] .dashboard-card {
    background-color: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-700) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .dashboard-card:hover {
    background-color: var(--bs-gray-750) !important;
    border-color: var(--bs-gray-600) !important;
}

/* Action cards dark mode */
[data-theme="dark"] .action-card {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-700) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .action-card:hover {
    background: var(--bs-gray-700) !important;
    border-color: var(--bs-primary) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
}

[data-theme="dark"] .action-card .card-title {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .action-card .card-description {
    color: var(--bs-gray-300) !important;
}

[data-theme="dark"] .action-card .action-text {
    color: var(--bs-primary) !important;
}

/* Class cards dark mode */
[data-theme="dark"] .class-card {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .class-card.current {
    background: linear-gradient(135deg, rgba(25, 135, 84, 0.2) 0%, var(--bs-gray-800) 100%) !important;
    border-left-color: #198754 !important;
}

[data-theme="dark"] .class-card.upcoming {
    background: linear-gradient(135deg, rgba(var(--brand-rgb), 0.2) 0%, var(--bs-gray-800) 100%) !important;
    border-left-color: var(--primary) !important;
}

[data-theme="dark"] .class-card.past {
    background: var(--bs-gray-800) !important;
    border-left-color: var(--bs-gray-500) !important;
    opacity: 0.7;
}

[data-theme="dark"] .class-card .class-name {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .class-card .class-status {
    color: var(--bs-gray-300) !important;
}

/* Stat cards dark mode */
[data-theme="dark"] .stat-card {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .stat-card:hover {
    background: var(--bs-gray-700) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
}

[data-theme="dark"] .stat-card.paid-card::before {
    background: linear-gradient(135deg, rgba(25, 135, 84, 0.8) 0%, rgba(25, 135, 84, 0.6) 100%) !important;
}

[data-theme="dark"] .stat-card.pending-card::before {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.8) 0%, rgba(255, 193, 7, 0.6) 100%) !important;
}

[data-theme="dark"] .stat-card.overdue-card::before {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.8) 0%, rgba(220, 53, 69, 0.6) 100%) !important;
}

[data-theme="dark"] .stat-card .stat-number {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .stat-card .stat-label {
    color: var(--bs-gray-300) !important;
}

[data-theme="dark"] .stat-card .stat-amount {
    color: var(--bs-gray-400) !important;
}

/* Schedule screens dark mode */
[data-theme="dark"] .overview-card {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .overview-card .overview-content h3 {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .overview-card .overview-content p {
    color: var(--bs-gray-300) !important;
}

/* Today class cards dark mode */
[data-theme="dark"] .today-class-card {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .today-class-card.current {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, var(--bs-gray-800) 100%) !important;
    border-left-color: #10b981 !important;
}

[data-theme="dark"] .today-class-card.upcoming {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, var(--bs-gray-800) 100%) !important;
    border-left-color: #3b82f6 !important;
}

[data-theme="dark"] .today-class-card.past {
    background: var(--bs-gray-800) !important;
    border-left-color: var(--bs-gray-500) !important;
    opacity: 0.7;
}

[data-theme="dark"] .today-class-card .class-time {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .today-class-card .class-name {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .today-class-card .class-details {
    color: var(--bs-gray-300) !important;
}

/* Attendance screens dark mode */
[data-theme="dark"] .student-card-compact {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .student-card-compact.present {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, var(--bs-gray-800) 100%) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
}

[data-theme="dark"] .student-card-compact.absent {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, var(--bs-gray-800) 100%) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

[data-theme="dark"] .student-card-compact.pending {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, var(--bs-gray-800) 100%) !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
}

[data-theme="dark"] .student-card-compact .student-info-compact {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .student-card-compact .student-name {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .student-card-compact .student-details {
    color: var(--bs-gray-300) !important;
}

/* Attendance management cards */
[data-theme="dark"] .attendance-card {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .attendance-setup-card {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .class-selection-card {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .date-selection-card {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

/* Students, Teachers, Classes mobile cards dark mode */
[data-theme="dark"] .student-mobile-card {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .student-mobile-card .card-title {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .student-mobile-card .text-muted {
    color: var(--bs-gray-400) !important;
}

[data-theme="dark"] .teacher-mobile-card {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .teacher-mobile-card .card-title {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .teacher-mobile-card .text-muted {
    color: var(--bs-gray-400) !important;
}

[data-theme="dark"] .class-mobile-card {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .class-mobile-card .card-title {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .class-mobile-card .text-muted {
    color: var(--bs-gray-400) !important;
}

/* Filter controls dark mode */
[data-theme="dark"] .filter-controls {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

/* Announcements dark mode */
[data-theme="dark"] .announcement-card {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .announcement-card.priority-high {
    border-left-color: #dc3545 !important;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, var(--bs-gray-800) 100%) !important;
}

[data-theme="dark"] .announcement-card.priority-medium {
    border-left-color: #ffc107 !important;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, var(--bs-gray-800) 100%) !important;
}

[data-theme="dark"] .announcement-card.priority-low {
    border-left-color: #28a745 !important;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, var(--bs-gray-800) 100%) !important;
}

[data-theme="dark"] .announcement-card .card-text {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .announcement-card .card-header {
    background: var(--bs-gray-700) !important;
    border-bottom-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .announcement-card .card-footer {
    background: var(--bs-gray-700) !important;
    border-top-color: var(--bs-gray-600) !important;
    color: var(--bs-gray-400) !important;
}

/* Parents dark mode */
[data-theme="dark"] .parent-card {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .parent-card .card-header {
    background: var(--bs-gray-700) !important;
    border-bottom-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .parent-card .card-footer {
    background: var(--bs-gray-700) !important;
    border-top-color: var(--bs-gray-600) !important;
    color: var(--bs-gray-400) !important;
}

[data-theme="dark"] .parent-card .parent-info-section {
    color: var(--bs-light) !important;
}

/* Override cards and any remaining specific cards */
[data-theme="dark"] .override-card {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .setup-card {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .classroom-card {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .god-dashboard-card {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

/* User profile dropdown dark mode */
[data-theme="dark"] .user-profile-dropdown .dropdown-toggle {
    background-color: var(--bs-gray-700) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .user-profile-dropdown .dropdown-toggle:hover {
    background-color: var(--bs-gray-600) !important;
}

/* Page titles and headings dark mode */
[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6 {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .page-title {
    color: var(--bs-light) !important;
}

/* Content areas dark mode */
[data-theme="dark"] .content-wrapper {
    background-color: var(--bs-gray-900) !important;
}

[data-theme="dark"] .section-header {
    background-color: var(--bs-gray-800) !important;
    border-bottom-color: var(--bs-gray-700) !important;
    color: var(--bs-light) !important;
}

/* Mobile dashboard specific */
[data-theme="dark"] .mobile-dashboard {
    background-color: var(--bs-gray-900) !important;
}

[data-theme="dark"] .mobile-dashboard-grid {
    background-color: var(--bs-gray-900) !important;
}

/* Comprehensive dark mode - eliminate all white backgrounds */
[data-theme="dark"] * {
    scrollbar-color: var(--bs-gray-600) var(--bs-gray-800);
}

[data-theme="dark"] *::-webkit-scrollbar {
    background-color: var(--bs-gray-800);
}

[data-theme="dark"] *::-webkit-scrollbar-thumb {
    background-color: var(--bs-gray-600);
}

[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
    background-color: var(--bs-gray-500);
}

/* Fix any remaining white backgrounds */
[data-theme="dark"] .bg-white {
    background-color: var(--bs-gray-900) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--bs-gray-800) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .text-white {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .bg-body {
    background-color: var(--bs-gray-900) !important;
}

[data-theme="dark"] .bg-body-secondary {
    background-color: var(--bs-gray-800) !important;
}

[data-theme="dark"] .bg-body-tertiary {
    background-color: var(--bs-gray-800) !important;
}

/* Container and section backgrounds */
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid,
[data-theme="dark"] .container-sm,
[data-theme="dark"] .container-md,
[data-theme="dark"] .container-lg,
[data-theme="dark"] .container-xl,
[data-theme="dark"] .container-xxl {
    background-color: transparent !important;
}

[data-theme="dark"] .row {
    background-color: transparent !important;
}

[data-theme="dark"] .col,
[data-theme="dark"] [class*="col-"] {
    background-color: transparent !important;
}

/* Page and section backgrounds */
[data-theme="dark"] .page-container {
    background-color: var(--bs-gray-900) !important;
}

[data-theme="dark"] .content-section {
    background-color: var(--bs-gray-900) !important;
}

[data-theme="dark"] .panel {
    background-color: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-700) !important;
}

[data-theme="dark"] .section {
    background-color: var(--bs-gray-900) !important;
}

/* Form elements - more comprehensive (selects are pinned light above) */
[data-theme="dark"] input,
[data-theme="dark"] textarea {
    background-color: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
    background-color: var(--bs-gray-700) !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--bs-gray-400) !important;
}

/* Button variants */
[data-theme="dark"] .btn-outline-light {
    border-color: var(--bs-gray-500) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .btn-outline-light:hover {
    background-color: var(--bs-gray-700) !important;
    border-color: var(--bs-gray-500) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .btn-light {
    background-color: var(--bs-gray-700) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .btn-light:hover {
    background-color: var(--bs-gray-600) !important;
    border-color: var(--bs-gray-500) !important;
    color: var(--bs-light) !important;
}

/* Well, panel, and card variations */
[data-theme="dark"] .well {
    background-color: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-700) !important;
}

[data-theme="dark"] .panel-body {
    background-color: var(--bs-gray-800) !important;
}

[data-theme="dark"] .card-img-top {
    background-color: var(--bs-gray-800) !important;
}

/* Tabs and navigation pills */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--bs-gray-600) !important;
}

[data-theme="dark"] .nav-tabs .nav-link {
    background-color: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    background-color: var(--bs-gray-700) !important;
    border-color: var(--bs-gray-500) !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--bs-gray-900) !important;
    border-color: var(--bs-gray-600) var(--bs-gray-600) var(--bs-gray-900) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .nav-pills .nav-link {
    background-color: var(--bs-gray-800) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .nav-pills .nav-link:hover {
    background-color: var(--bs-gray-700) !important;
}

[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--bs-primary) !important;
}

/* Accordion */
[data-theme="dark"] .accordion-item {
    background-color: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
}

[data-theme="dark"] .accordion-header button {
    background-color: var(--bs-gray-800) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .accordion-body {
    background-color: var(--bs-gray-900) !important;
    color: var(--bs-light) !important;
}

/* Progress bars */
[data-theme="dark"] .progress {
    background-color: var(--bs-gray-700) !important;
}

/* Tooltip and popover */
[data-theme="dark"] .tooltip .tooltip-inner {
    background-color: var(--bs-gray-800) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .popover {
    background-color: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
}

[data-theme="dark"] .popover-header {
    background-color: var(--bs-gray-700) !important;
    border-bottom-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .popover-body {
    color: var(--bs-light) !important;
}

/* Offcanvas */
[data-theme="dark"] .offcanvas {
    background-color: var(--bs-gray-900) !important;
}

[data-theme="dark"] .offcanvas-header {
    border-bottom-color: var(--bs-gray-700) !important;
}

/* Toast */
[data-theme="dark"] .toast {
    background-color: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .toast-header {
    background-color: var(--bs-gray-700) !important;
    border-bottom-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

/* Spinner backgrounds */
[data-theme="dark"] .spinner-border {
    color: var(--bs-primary) !important;
}

[data-theme="dark"] .spinner-grow {
    color: var(--bs-primary) !important;
}

/* Any remaining utility classes */
[data-theme="dark"] .bg-transparent {
    background-color: transparent !important;
}

[data-theme="dark"] .text-body {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .text-body-secondary {
    color: var(--bs-gray-400) !important;
}

[data-theme="dark"] .text-body-tertiary {
    color: var(--bs-gray-500) !important;
}

/* Mobile Payment Cards Dark Mode */
[data-theme="dark"] .payment-card {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}


[data-theme="dark"] .payment-card-overdue {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2) 0%, var(--bs-gray-800) 100%) !important;
    border-left-color: #ffc107 !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .payment-card-overdue:hover {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.3) 0%, var(--bs-gray-700) 100%) !important;
    border-color: #ffc107 !important;
}

/* Payment card content dark mode */
[data-theme="dark"] .payment-card .text-muted {
    color: var(--bs-gray-400) !important;
}

[data-theme="dark"] .payment-card .fw-bold {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .payment-priority-indicator {
    background-color: var(--bs-gray-600) !important;
}

/* Mobile-specific overrides */
@media (max-width: 767px) {
    [data-theme="dark"] .mobile-container {
        background-color: var(--bs-gray-900) !important;
    }
    
    [data-theme="dark"] .mobile-card {
        background-color: var(--bs-gray-800) !important;
        border-color: var(--bs-gray-700) !important;
    }
    
    [data-theme="dark"] .mobile-section {
        background-color: var(--bs-gray-900) !important;
    }
}

/* ===========================================================================
   Connection recovery: #components-reconnect-modal
   ---------------------------------------------------------------------------
   This IS Blazor's reconnect dialog. The framework toggles
   components-reconnect-show / hide / failed / rejected on it and fills the two
   attempt spans. The framework's classes say what the CIRCUIT is doing; the
   script (circuitRecovery.js) adds one of its own to say what happens NEXT,
   and the visible state follows the script's class, never the raw terminal one:

     components-reconnect-show  -> quiet top pill, "Reconnecting..."
     reconnect-reloading        -> same pill, now "Refreshing...": the circuit is
                                   gone, nothing would be lost, the page reloads
                                   under it. No button is ever shown here.
     reconnect-needs-user       -> the card. Only when the user must decide:
                                   typing a reload would discard, or no network.

   Painting the card on the framework's terminal class alone showed a button the
   script was about to press itself (pill -> button -> reload, in the field
   report). It is decided first, shown second.

   The pill has no transform and the subtree opts out of the host page's global
   backface-visibility:hidden: together those gave the pill its own compositor
   layer, and Android Chrome left that layer painted after the element was
   hidden - the "pill and card at once" that the log proved never existed in
   the DOM.

   The base rule hides the dialog and each known state opts in, so a state we do
   not style yet (.NET 10 adds paused/resumed) renders as nothing.
   =========================================================================== */

#components-reconnect-modal,
#components-reconnect-modal .reconnect-banner,
#components-reconnect-modal .reconnect-gone,
#components-reconnect-modal .reconnect-refreshing-text {
    display: none;
}

/* Opt out of the global "* { backface-visibility: hidden }" in _Host: it is what
   turns a hidden fixed element into a stale painted layer on Android Chrome. */
#components-reconnect-modal,
#components-reconnect-modal * {
    backface-visibility: visible;
}

/* --- the pill: reconnecting, or refreshing ------------------------------ */

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.reconnect-reloading,
#components-reconnect-modal.reconnect-needs-user {
    display: block;
}

#components-reconnect-modal.components-reconnect-show .reconnect-banner,
#components-reconnect-modal.reconnect-reloading .reconnect-banner {
    position: fixed;
    top: 1rem;
    /* Centred by margins, not by transform: a transform is a compositor layer. */
    left: 1rem;
    right: 1rem;
    margin: 0 auto;
    width: min(420px, 100%);
    z-index: 20000; /* toast tier: above modals and the bottom nav */
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    color: var(--text-color);
    box-shadow: var(--shadow-md);
    font-size: 0.9rem;
    /* Hold the pill back for a beat: most drops resume on the first 1.5s retry, and a
       pill that flashes for a sub-second blip trains people to ignore it. */
    animation: reconnect-appear 0.2s ease 0.8s both;
}

@keyframes reconnect-appear {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Refreshing: the pill is already up; swap its text at once, no second fade. */
#components-reconnect-modal.reconnect-reloading .reconnect-banner {
    animation: none;
    opacity: 1;
}

#components-reconnect-modal.reconnect-reloading .reconnect-banner-text {
    display: none;
}

#components-reconnect-modal.reconnect-reloading .reconnect-refreshing-text {
    display: inline;
}

/* The pill takes the toast slot, so move any live toast out from under it. */
body:has(#components-reconnect-modal.components-reconnect-show) .toast-host,
body:has(#components-reconnect-modal.reconnect-reloading) .toast-host {
    top: 4.25rem;
}

#components-reconnect-modal .reconnect-spinner {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(var(--brand-rgb), 0.25);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: reconnect-spin 0.9s linear infinite;
}

#components-reconnect-modal .reconnect-attempt {
    color: var(--text-muted);
}

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

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal .reconnect-spinner {
        animation: none;
    }

    /* Keep the delay (it is a timing decision, not motion) but drop the fade. */
    #components-reconnect-modal.components-reconnect-show .reconnect-banner {
        animation-duration: 0s;
    }
}

/* --- the card: the user must decide ------------------------------------- */

#components-reconnect-modal.reconnect-needs-user .reconnect-gone {
    display: block;
}

/* Bottom-anchored card, no scrim: the user may still need to read or copy what
   they typed before reloading, and dimming the page hides exactly that. Above
   the sheets, because once the circuit is gone every surface underneath is
   inert and a sheet painting over this would leave no working control at all.
   --bottom-nav-height is only set on pages with MainLayout, so the max() floor
   carries the EmptyLayout pages - same idiom as the fullscreen modal recipe. */
#components-reconnect-modal.reconnect-needs-user .reconnect-gone {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(max(var(--bottom-nav-height, 70px), 70px) + 12px + env(safe-area-inset-bottom, 0px));
    z-index: 2147483647;
    padding: 0 1rem;
}

#components-reconnect-modal .reconnect-gone-card {
    width: min(420px, 100%);
    margin: 0 auto;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    color: var(--text-color);
    box-shadow: var(--shadow-md);
    text-align: center;
}

#components-reconnect-modal .reconnect-gone-card h2 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

#components-reconnect-modal .reconnect-gone-card p {
    margin: 0 0 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

#components-reconnect-modal .reconnect-gone-card .btn {
    width: 100%;
    min-height: 44px;
}

/* Only true when the recovery script found typing a reload would discard. */
#components-reconnect-modal .reconnect-gone-unsaved {
    display: none;
}

#components-reconnect-modal.reconnect-has-unsaved .reconnect-gone-unsaved {
    display: block;
    color: var(--warning);
}

/* The support bubble sits at max z-index over the bottom of the screen. It
   stands down while the card is up, exactly as it does for modals - and the
   card exists only in the needs-user state. */
body:has(#components-reconnect-modal.reconnect-needs-user) .chatbot-widget,
body:has(#components-reconnect-modal.reconnect-needs-user) .chatbot-show-btn {
    display: none;
}

/* === END components-reconnect-modal === */

/* ========================================
   ERROR BOUNDARY STYLES
   ======================================== */

.error-boundary-container {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-content {
    max-width: 500px;
    text-align: center;
    padding: 2rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.error-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.error-content h3 {
    color: var(--bs-danger);
    margin-bottom: 1rem;
}

.error-message {
    margin-bottom: 1rem;
    color: var(--bs-body-color);
}

.error-reasons {
    text-align: left;
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.error-reasons li {
    margin-bottom: 0.5rem;
    color: var(--bs-secondary);
}

.error-actions {
    margin: 1.5rem 0;
}

.error-actions .btn {
    margin: 0 0.5rem 0.5rem 0;
}

.error-details {
    margin-top: 1rem;
    text-align: left;
}

.error-details summary {
    cursor: pointer;
    padding: 0.5rem;
    background: var(--bs-gray-100);
    border-radius: var(--bs-border-radius);
    margin-bottom: 0.5rem;
}

.error-stack {
    background: var(--bs-gray-100);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 1rem;
    font-size: 0.875rem;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Dark theme support for error boundary */
[data-theme="dark"] .error-content {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
}

[data-theme="dark"] .error-details summary {
    background: var(--bs-gray-700);
    color: var(--bs-light);
}

[data-theme="dark"] .error-stack {
    background: var(--bs-gray-700);
    border-color: var(--bs-gray-600);
    color: var(--bs-light);
}

/* Mobile responsive for error boundary */
@media (max-width: 576px) {
    .error-content {
        margin: 1rem;
        padding: 1.5rem;
    }
    
    .error-actions .btn {
        width: 100%;
        margin: 0.25rem 0;
    }
    
    .error-icon {
        font-size: 2rem;
    }
}

/* ========================================
   NATIVE DATE/TIME PICKER STYLES
   ======================================== */

/* Base styling for date inputs */
html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    color: var(--bs-body-color);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    color-scheme: light;
}

input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus {
    border-color: var(--bs-primary);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Remove default calendar icon styling */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    background: transparent;
    color: var(--bs-body-color);
    cursor: pointer;
}

/* Dark theme support */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"] {
    background-color: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
    color-scheme: dark;
}

[data-theme="dark"] input[type="date"]:focus,
[data-theme="dark"] input[type="time"]:focus,
[data-theme="dark"] input[type="datetime-local"]:focus {
    background-color: var(--bs-gray-700) !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-light) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.8;
}

/* Mobile-specific styling */
@media (max-width: 767px) {
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 0.5rem 0.75rem;
        min-height: 44px; /* Better touch target */
    }
    
    /* Force the native picker to use app colors */
    input[type="date"]::-webkit-datetime-edit,
    input[type="time"]::-webkit-datetime-edit,
    input[type="datetime-local"]::-webkit-datetime-edit {
        color: var(--bs-body-color);
        background: transparent;
    }
    
    input[type="date"]::-webkit-datetime-edit-fields-wrapper,
    input[type="time"]::-webkit-datetime-edit-fields-wrapper,
    input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
        background: transparent;
    }
    
    input[type="date"]::-webkit-datetime-edit-text,
    input[type="time"]::-webkit-datetime-edit-text,
    input[type="datetime-local"]::-webkit-datetime-edit-text {
        color: var(--bs-body-color);
        padding: 0 0.25rem;
    }
    
    input[type="date"]::-webkit-datetime-edit-month-field,
    input[type="date"]::-webkit-datetime-edit-day-field,
    input[type="date"]::-webkit-datetime-edit-year-field,
    input[type="time"]::-webkit-datetime-edit-hour-field,
    input[type="time"]::-webkit-datetime-edit-minute-field,
    input[type="datetime-local"]::-webkit-datetime-edit-month-field,
    input[type="datetime-local"]::-webkit-datetime-edit-day-field,
    input[type="datetime-local"]::-webkit-datetime-edit-year-field,
    input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
    input[type="datetime-local"]::-webkit-datetime-edit-minute-field {
        color: var(--bs-body-color);
        background: transparent;
        border-radius: 2px;
        padding: 0 2px;
    }
    
    /* Dark theme mobile styling */
    [data-theme="dark"] input[type="date"]::-webkit-datetime-edit,
    [data-theme="dark"] input[type="time"]::-webkit-datetime-edit,
    [data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit {
        color: var(--bs-light) !important;
    }
    
    [data-theme="dark"] input[type="date"]::-webkit-datetime-edit-text,
    [data-theme="dark"] input[type="time"]::-webkit-datetime-edit-text,
    [data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit-text {
        color: var(--bs-light) !important;
    }
    
    [data-theme="dark"] input[type="date"]::-webkit-datetime-edit-month-field,
    [data-theme="dark"] input[type="date"]::-webkit-datetime-edit-day-field,
    [data-theme="dark"] input[type="date"]::-webkit-datetime-edit-year-field,
    [data-theme="dark"] input[type="time"]::-webkit-datetime-edit-hour-field,
    [data-theme="dark"] input[type="time"]::-webkit-datetime-edit-minute-field,
    [data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit-month-field,
    [data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit-day-field,
    [data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit-year-field,
    [data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
    [data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit-minute-field {
        color: var(--bs-light) !important;
    }
}

/* Browser-specific fixes for picker popups */
@supports (-webkit-appearance: none) {
    /* Webkit browsers (Chrome, Safari, Edge) */
    input[type="date"]::-webkit-calendar-picker-indicator {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3e%3cpath fill='%236c757d' d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px 16px;
        width: 20px;
        height: 20px;
        padding: 0;
        margin: 0;
    }
    
    [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3e%3cpath fill='%23ffffff' d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z'/%3e%3c/svg%3e");
        filter: none;
        opacity: 1;
    }
}


.page-content h1 img.page-title-icon.schedule-icon,
.main-content h1 img.page-title-icon.schedule-icon {
  width: 38px !important;
  height: 38px !important;
}



/* Payments title icon 20% bigger */
.page-content h1 img.page-title-icon.payments-title-icon,
.main-content h1 img.page-title-icon.payments-title-icon {
  width: 38px !important;
  height: 38px !important;
}

.page-content h1 i.page-title-icon.payments-title-icon,
.main-content h1 i.page-title-icon.payments-title-icon {
  width: 38px !important;
  height: 38px !important;
}


/* Title emoji icon (fallback when no image exists) */
.page-title-emoji {
  display: inline-block;
  width: 38px;
  height: 38px;
  font-size: 38px;
  line-height: 38px;
  vertical-align: middle;
  margin-right: 12px;
}

/* Mobile bottom-nav: up to 5 equal slots (top-4 + More), no horizontal scroll.
   Detailed slot/label/icon sizing lives in toolbar-overrides.css. */
.bottom-nav {
  justify-content: stretch !important;
  flex-wrap: nowrap !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  gap: 0 !important;
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.bottom-nav::after {
  content: none;
}

/* Equal flex slots with icon over a small label */
.bottom-nav .nav-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  min-height: 52px !important;                   /* comfortable tap target */
  padding: 4px 2px !important;
  gap: 2px !important;
  align-items: center !important;
  justify-content: center !important;
}

.bottom-nav .nav-icon {
  margin: 0 !important;
  width: 24px !important;
  height: 24px !important;
  font-size: 24px !important; /* emoji/symbol size */
  line-height: 24px !important;
}

/* Force all image-based icons to the same size (one rule covers every icon,
   including the formerly special-cased info/schedule glyphs) */
.bottom-nav .nav-icon img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain;
}

/* Small single-line labels under the icons */
.bottom-nav .nav-item .nav-label {
  display: block !important;
  font-size: clamp(9px, 2.8vw, 11px) !important;
  line-height: 1.15 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Content must clear the bottom-anchored fixed nav plus the floating
   support-chat bubble above it. --bottom-nav-height is measured live by
   MainLayout's ResizeObserver. */
@media (max-width: 767px) {
  .main-content {
    padding-bottom: calc(max(var(--bottom-nav-height, 70px), 70px) + 40px) !important;
  }

  /* Scoped to in-content wrappers only: body also carries .page-content (the
     anti-flash trick), and padding on body re-opens root scrolling, which
     would let mobile browser toolbars animate again. */
  .main-content .page-content {
    padding-bottom: 40px !important; /* light padding for legacy sections that use this wrapper */
  }

  /* Ensure action buttons are visible above toolbar */
  .btn-group, .form-actions, .modal-footer, .action-buttons {
    margin-bottom: 20px !important;
  }
}

/* ============================================================
   Fullscreen mobile modal recipe (docs/design-system.md)
   ============================================================
   Every `modal-fullscreen-md-down` modal on a phone shares one geometry:
   - the dialog fills the *dynamic* viewport (100dvh — 100vh is the browser's
     LARGE viewport and overflows while the URL bar is visible),
   - the flex chain (content > header/body/footer) absorbs however tall the
     header wraps, so no hard-coded max-height guesswork anywhere,
   - the modal SURFACE ends above the fixed bottom nav (z 10002, which paints
     OVER modals at z 1055): the content is height: calc(100% - nav - 12px)
     and the dimmed backdrop shows through the small strip below it — the
     card visibly ends at its footer instead of painting an empty surface
     under the last button.
   - the support-chat bubble (z-max, bottom: 80px) would still overlap the
     footer, so it hides while any Bootstrap modal is open — the sheets
     (EditSheet/MobileNavSheet) already cover it entirely, so "no support
     bubble while an overlay is up" is the established mobile behavior.
     Modals stay at the Bootstrap tier by design — only sheets may use the
     max overlay tier. */
@media (max-width: 767.98px) {
  body:has(.modal.show) .chatbot-widget,
  body:has(.modal.show) .chatbot-show-btn {
    display: none;
  }

  .modal-dialog.modal-fullscreen-md-down {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
  }

  /* max() floors a stale 0px --bottom-nav-height, same as .main-content. */
  .modal-dialog.modal-fullscreen-md-down .modal-content {
    height: calc(100% - max(var(--bottom-nav-height, 70px), 70px) - 12px - env(safe-area-inset-bottom));
    max-height: 100%;
    min-height: 0;
    padding-top: env(safe-area-inset-top);
    border-radius: 0 0 var(--radius-md, 12px) var(--radius-md, 12px);
  }

  .modal-dialog.modal-fullscreen-md-down .modal-header {
    flex-shrink: 0;
  }

  .modal-dialog.modal-fullscreen-md-down .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* The surface already ends above the dead zone, so the generic 20px
     mobile .modal-footer clearance would only waste height here. */
  .modal-dialog.modal-fullscreen-md-down .modal-footer {
    flex-shrink: 0;
    margin-bottom: 0 !important;
  }
}

/* iOS Safari only dispatches click events (which Blazor's delegated @onclick relies on)
   for taps on elements it deems interactive — cursor: pointer is the opt-in for plain
   divs. Without it, tap-outside-to-close overlays are dead on iPhone/iPad. */
.modal-overlay,
.mobile-nav-sheet-overlay,
.edit-sheet-overlay,
.mobile-picker-overlay,
.date-picker-overlay,
.custom-popup-overlay,
.quick-search-overlay {
  cursor: pointer;
}

/* cursor inherits — keep dialog bodies from showing a pointer on desktop */
.modal-overlay .modal-content,
.modal-overlay .modal-dialog,
.mobile-nav-sheet,
.edit-sheet,
.mobile-picker-modal,
.date-picker-modal,
.custom-popup,
.quick-search-panel {
  cursor: auto;
}

/* ============================================================
   "A name is a link" (ux-guidelines §13): an entity name rendered in a
   staff-facing list links to that entity's record via its standard param
   (students?student=, classes?highlight=, teachers?highlight=,
   parents?highlight=). Reads as text until hovered so dense lists stay
   calm; the hover underline says "this opens something". Same visual
   convention as the per-page .student-name-link (guideline 5b).
   ============================================================ */
.entity-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.entity-link:hover,
.entity-link:focus-visible {
  color: var(--primary);
  text-decoration: underline;
}

/* ── Setup-guide arrival banner (.accounts-guide) ────────────────────────────
   Shared by /teachers, /parents and /attendance when the setup hub deep-links
   with a ?setup= intent: explains how the page's key action works on arrival.
   Lives here once (app-wide rule) — do not re-declare in scoped page CSS. */
.accounts-guide {
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text-color);
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
}

.accounts-guide-icon {
    font-size: 1.25rem;
    line-height: 1.4;
}

/* ── Class audience badge (ux-guidelines §14) ───────────────────────────────
   Only Adults classes carry it, right after the class name, in the same spot
   on every surface. Decorative category → the classes entity pair, never a
   status hue. Children's classes render nothing at all.
   ============================================================ */
.class-audience-badge--adults {
  background: var(--entity-classes-bg);
  color: var(--entity-classes-fg);
  font-weight: 600;
  vertical-align: middle;
}

/* ── Settings rows (design-system "Settings rows + EditSheet") ─────────────────
   The one-field-per-row grammar: /parent-family and the student card's
   "Before the lesson" panel. Lives once here; never re-declare per page. */
.settings-rows {
    display: flex;
    flex-direction: column;
}

.settings-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    padding: 0.5rem 1rem;
    background: none;
    border: 0;
    border-top: 1px solid var(--border);
    color: var(--text-color);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.settings-row--static {
    cursor: default;
}

/* Pressed state = brand tint, no transforms (design-system: rest cards stay calm). */
button.settings-row:active {
    background: var(--brand-50);
}

button.settings-row:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

.settings-row-label {
    flex: 0 0 34%;
    max-width: 9.5rem;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.settings-row-value {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    overflow-wrap: anywhere;
}

.settings-row-add {
    color: var(--primary);
    font-weight: 600;
}

.settings-row-chevron {
    color: var(--text-muted);
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .settings-row:hover {
        background: var(--surface);
    }
}

/* "Before the lesson" panel (StudentRecordsPanel): a row value with its provenance line under it,
   and the quiet opt-in link a school that keeps no records sees instead of the panel. */
.student-records-value {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

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

/* ---------------------------------------------------------------------------
   ProductSaleModal — the one admin sale form (store, payments, student card).
   Sizing comes from the shared fullscreen recipe above; this only paints the
   backdrop, the stacked case (mounted inside the student's payment card) and
   the product thumbnail.
   --------------------------------------------------------------------------- */
.product-sale-modal {
  background-color: rgba(0, 0, 0, 0.5);
}

.product-sale-modal.product-sale-modal-stacked {
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1060;
}

.product-sale-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.product-sale-thumb-empty {
  background: var(--surface);
  font-size: 1.5rem;
}