/*
 * Dark mode — built from scratch, since the vendor admin theme (style.css)
 * ships no dark skin of its own (checked: no dark stylesheet, no
 * prefers-color-scheme, no dark-mode class convention anywhere in it).
 * Bootstrap 5.3 itself DOES compile in a generic [data-bs-theme=dark]
 * variable set (form controls, close-button icon, carousel, accordion
 * icons), which is why this toggle sets data-bs-theme rather than a custom
 * attribute — native Bootstrap components get that for free. Everything
 * below is this admin theme's own hardcoded-light chrome (sidebar, navbar,
 * cards, tables) plus the custom components added this session (stat
 * cards, level cards, classroom lists, scope toggle), none of which read
 * Bootstrap's color variables, so they need explicit overrides here.
 *
 * Scope is deliberately the high-traffic structural surfaces, not a
 * rule-by-rule reskin of all ~30k lines of style.css — same "broad pass,
 * flag exotic vendor widgets as follow-up" approach used for rtl.css.
 * Known gaps: DataTables' own chrome, Choices.js dropdowns, and
 * bootstrap-datepicker's calendar popup render their own light-only
 * markup/CSS and aren't covered here.
 */

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

/* DataTables draws its own row hover/stripe effect as an inset box-shadow
   overlay (rgba(var(--dt-row-hover), .075) etc.) completely separate from
   Bootstrap's --bs-table-hover-* variables below — it's hardcoded to a
   black overlay (--dt-row-hover: 0,0,0 at :root, vendor CSS only flips it
   via a ":root.dark" class this app never applies, since we use
   [data-bs-theme=dark] instead). A black overlay darkens an already-dark
   row further while the text color stays the same, so hovering/striping
   made rows read as text-on-near-black — switching both to a white-based
   overlay lightens the row instead, the same direction Bootstrap's own
   hover variables already go in dark mode. */
[data-bs-theme="dark"] {
  --dt-row-hover: 255, 255, 255;
  --dt-row-stripe: 255, 255, 255;
}

/* This admin theme has its OWN third hover/stripe mechanism on top of both
   Bootstrap's --bs-table-hover-bg variable and DataTables' --dt-row-hover
   box-shadow trick above — a literal hardcoded background-color (#eaeaf1
   for hover, #F4F5F7 for striping), not a variable, and more specific
   than Bootstrap's own rule (3 classes vs 2), so it silently overrode
   both of those fixes. This is what actually painted rows solid light
   gray on hover regardless of either earlier fix. */
[data-bs-theme="dark"] .table.table-hover > tbody > tr:hover > * {
  background-color: rgba(255, 255, 255, 0.07);
}

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

[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .content-wrapper {
  background-color: #1a1d21;
  color: #dee2e6;
}

/* Login/account-setup pages: .auth-form-light (the centered card holding
   the form) is a hardcoded white box (.auth .auth-form-light { background:
   #ffffff }), separate from and never covered by the generic body/
   content-wrapper rule above — it stayed white while the page around it
   correctly went dark, and headings inside it (already forced light by
   the h1-h6 rule below) ended up white-on-white. */
[data-bs-theme="dark"] .auth .auth-form-light {
  background-color: #22262b;
  color: #dee2e6;
}

/* .auth form .auth-link:hover sets color: initial — the CSS spec's
   "initial" for color is literal black, not "inherit/default", so
   hovering the Forgot Password link forced it back to black regardless
   of theme even after removing its static text-black class. */
[data-bs-theme="dark"] .auth .auth-link:hover {
  color: #94a1da !important;
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .card-title {
  color: #f1f3f5;
}

/* .card .card-title (vendor, 2 classes) hardcodes #010101, and
   .card .card-title.card-title-dash (3 classes) hardcodes #1F1F1F —
   both outrank the generic ".card-title" override above once vendor
   specificity is counted, so headings like "Student Status Breakdown"/
   "Enrollment Breakdown"/"Recent Payments" stayed near-black on a dark
   card. Match/exceed that specificity here. */
[data-bs-theme="dark"] .card .card-title,
[data-bs-theme="dark"] .card .card-title.card-title-dash,
[data-bs-theme="dark"] .card .card-title.card-title-dash.card-subtitle-dash {
  color: #f1f3f5;
}

[data-bs-theme="dark"] .text-muted {
  color: #9aa0a6 !important;
}

[data-bs-theme="dark"] a:not(.btn) {
  color: #7c9fff;
}

/* Sidebar + navbar chrome */
[data-bs-theme="dark"] .app-sidebar,
[data-bs-theme="dark"] .navbar {
  background-color: #15171a;
}
[data-bs-theme="dark"] .app-sidebar {
  border-right-color: rgba(255, 255, 255, 0.08);
}

/* Soft shadow divider instead of a hard 1px line — reads as an
   intentional edge rather than a stray rule, in both themes. !important
   since a hard-coded competing border/shadow further down this vendor
   theme has repeatedly outranked plain overrides elsewhere on this page. */
[data-bs-theme="dark"] .navbar {
  border-bottom: none !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5) !important;
}

/* Bootstrap's --bs-border-color *should* already resolve dark via its own
   [data-bs-theme=dark] variable set, but this pins the dashboard tabs
   row's .border-bottom utility explicitly rather than trusting that
   chain, since several other "should already work" assumptions on this
   page turned out to be wrong once actually screenshotted. */
[data-bs-theme="dark"] .home-tab .border-bottom {
  border-bottom-color: #2a2e33 !important;
}

/* The .navbar element's own background is irrelevant in practice — its
   two direct children, .navbar-brand-wrapper (logo) and
   .navbar-menu-wrapper (everything else: nav items, dropdowns), each
   have their own hardcoded background: #F4F5F7 that fully covers it.
   Setting the parent's background alone (above) visibly does nothing;
   this is the actual fix. */
[data-bs-theme="dark"] .navbar .navbar-brand-wrapper,
[data-bs-theme="dark"] .navbar .navbar-menu-wrapper {
  background-color: #15171a !important;
}

[data-bs-theme="dark"] .navbar-brand-wrapper .navbar-brand {
  color: #7c9fff !important;
}

/* Lighter equivalents of the wordmark's two brand colors (navy/gold,
   see custom.css's .brand-wordmark-line1/-line2) so the two-tone
   logotype still reads clearly against a dark background instead of
   inheriting the plain single navbar-brand color above. Selector is
   deliberately as specific as the rule above (attribute + 2 classes)
   so this wins regardless of stylesheet load order, not just because
   dark.css happens to load last. */
[data-bs-theme="dark"] .navbar-brand-wrapper .brand-wordmark-line1 {
  color: #7c9fff !important;
}
[data-bs-theme="dark"] .navbar-brand-wrapper .brand-wordmark-line2 {
  /* Was a lighter gold (#e0b563) — matches custom.css's light-mode
     switch to blue. A distinct light/sky blue from line1's indigo-blue
     above, so "Watan"/"AMS" still read as two different colors, just
     both blue now instead of navy+gold. */
  color: #5ec8ff !important;
}

/* The floating collapse toggle (.brand-toggle, custom.css) — light-mode
   white circle on a light border reads as a barely-visible dark smudge
   against the dark navbar/sidebar (#15171a, see .app-sidebar/.navbar above),
   so it gets its own dark surface tint rather than the light card color. */
[data-bs-theme="dark"] .brand-toggle {
  background: #232730;
  border-color: rgba(255, 255, 255, 0.12);
  color: #9aa1b5;
}
[data-bs-theme="dark"] .brand-toggle:hover {
  color: #7c9fff;
  border-color: #7c9fff;
}

/* Scroll-position slider (custom.css) — light-mode track/handle read
   as barely-visible dark smudges against the dark navbar. */
[data-bs-theme="dark"] .scroll-progress-track {
  background: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .scroll-progress-handle {
  background: #12151d;
  /* Was a lighter gold (#e2a53f) — matches custom.css's light-mode
     switch to blue. */
  border-color: #5ec8ff;
}


/* template.js toggles this class on the navbar based on scroll position
   (adds it once you scroll past ~97px, removes it back near the top) —
   the base rule hardcodes a white background for that "scrolled" state.
   The .navbar-brand-wrapper/.navbar-menu-wrapper override above already
   covers this state too (same selectors, no "headerLight" qualifier
   needed), this just adds the scrolled-state shadow. */
[data-bs-theme="dark"] .navbar.headerLight {
  background-color: #15171a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .app-sidebar-item {
  color: #c7ccd1;
}

[data-bs-theme="dark"] .app-sidebar-item:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .app-sidebar-item.is-active {
  color: #ffffff;
}

[data-bs-theme="dark"] .app-sidebar-section {
  color: #6c757d;
}

/* Flyout submenu panel — light-mode white card reads as a bright
   floating rectangle against the dark sidebar/page. */
[data-bs-theme="dark"] .app-sidebar-flyout {
  background: #1a1d24;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
[data-bs-theme="dark"] .app-sidebar-flyout-link {
  color: #c7ccd1;
}
[data-bs-theme="dark"] .app-sidebar-flyout-link:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}
[data-bs-theme="dark"] .app-sidebar-flyout-link.is-active {
  color: #7c9fff;
  font-weight: 700;
}
/* Collapsed-state plain-item name tooltip (custom.css) — same dark
   surface as the flyout panel above, for the same reason. */
[data-bs-theme="dark"] .app-sidebar-item:not(.has-flyout)::after {
  background: #1a1d24;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  color: #c7ccd1;
}

[data-bs-theme="dark"] .welcome-text {
  color: #f1f3f5 !important;
}

/* Navbar nav-links/icons (language/theme switchers, bell, hamburger) —
   explicit rather than relying on Bootstrap's --bs-navbar-color variable
   cascade, since this admin theme layers its own navbar CSS on top of
   Bootstrap's and the two don't reliably agree on which one wins. */
[data-bs-theme="dark"] .navbar .nav-link,
[data-bs-theme="dark"] .navbar .nav-link i,
[data-bs-theme="dark"] .navbar-toggler .icon-menu,
[data-bs-theme="dark"] .navbar-toggler .mdi-menu {
  color: #dee2e6;
}

[data-bs-theme="dark"] .navbar .nav-link:hover,
[data-bs-theme="dark"] .navbar .nav-link:hover i {
  color: #ffffff;
}

/* .navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link (5 classes)
   hardcodes color: #212121 — outranks the two-class override above by
   specificity, so the theme icon, language switcher text, bell, and
   hamburger were all still dark-on-dark despite it. Match/exceed it. */
[data-bs-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link,
[data-bs-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link i {
  color: #dee2e6;
}

[data-bs-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link:hover,
[data-bs-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link:hover i {
  color: #ffffff;
}

/* This admin theme's own navbar-dropdown items add a hardcoded light
   border between rows (assumes a light dropdown background). */
[data-bs-theme="dark"] .navbar-dropdown .dropdown-item {
  border-bottom-color: #2a2e33 !important;
}

/* Footer */
[data-bs-theme="dark"] .footer {
  background-color: #15171a;
  color: #adb5bd;
}

[data-bs-theme="dark"] .footer a {
  color: #7c9fff;
}

/* The version pill's light-mode blue tint (public/css/custom.css)
   reads muddy on a dark background — a lighter, more transparent tint
   of the same brand blue instead. */
[data-bs-theme="dark"] .footer-version {
  background: rgba(124, 159, 255, 0.14);
}
[data-bs-theme="dark"] a.footer-version:hover {
  background: rgba(124, 159, 255, 0.22);
}

/* Cards */
[data-bs-theme="dark"] .card {
  --bs-card-bg: #22262b;
  --bs-card-color: #dee2e6;
  --bs-card-cap-bg: #22262b;
  background-color: #22262b;
  color: #dee2e6;
}

[data-bs-theme="dark"] .card-rounded {
  background-color: #22262b;
}

/* Tables */
[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: #dee2e6;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-table-border-color: #2a2e33;
  color: #dee2e6;
  border-color: #2a2e33;
}

[data-bs-theme="dark"] .table thead th {
  color: #adb5bd;
  border-color: #2a2e33;
}

/* Forms */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .choices__inner {
  background-color: #22262b;
  border-color: #3a3f45;
  color: #dee2e6;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: #22262b;
  color: #f1f3f5;
}

/* Choices.js (the searchable "select a student" dropdown, e.g. Call to
   Office) — .choices__inner (the closed control) was already covered
   above, but the actual dropdown panel that opens on click is a
   separate widget with its own hardcoded white background/border, not
   a Bootstrap .dropdown-menu, so it was still a bright white popup
   floating over a dark page. */
[data-bs-theme="dark"] .choices__list--dropdown,
[data-bs-theme="dark"] .choices__list[aria-expanded] {
  background-color: #22262b;
  border-color: #3a3f45;
  color: #dee2e6;
}

[data-bs-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted,
[data-bs-theme="dark"] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .choices__input {
  background-color: #22262b;
  color: #dee2e6;
}

/* .choices[data-type*=select-one] .choices__input (3 selector components)
   is the vendor's actual rule for the search box shown inside an open
   select-one dropdown — it outranks the generic .choices__input override
   above, so the search box stayed white regardless. */
[data-bs-theme="dark"] .choices[data-type*="select-one"] .choices__input {
  background-color: #22262b;
  color: #dee2e6;
  border-bottom-color: #3a3f45;
}

[data-bs-theme="dark"] .choices.is-disabled .choices__inner,
[data-bs-theme="dark"] .choices.is-disabled .choices__input {
  background-color: #2a2e33;
}

[data-bs-theme="dark"] .is-focused .choices__inner,
[data-bs-theme="dark"] .is-open .choices__inner {
  border-color: #7c9fff;
}

[data-bs-theme="dark"] .choices__placeholder {
  color: #9aa0a6;
}

/* The select-one dropdown caret is a CSS border-triangle hardcoded to
   #333 — invisible against the now-dark .choices__inner background. */
[data-bs-theme="dark"] .choices[data-type*="select-one"]::after {
  border-color: #9aa0a6 transparent transparent;
}

[data-bs-theme="dark"] .choices[data-type*="select-one"].is-open::after {
  border-color: transparent transparent #9aa0a6;
}

[data-bs-theme="dark"] .student-choice-badge {
  color: #9aa0a6;
  border-color: #3a3f45;
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: #6c757d;
}

/* Dropdowns (bell, language switcher, user menu) */
[data-bs-theme="dark"] .dropdown-menu {
  background-color: #22262b;
  border-color: #2a2e33;
  color: #dee2e6;
}

[data-bs-theme="dark"] .dropdown-item {
  color: #dee2e6;
}

/* .dropdown-header's text color comes from --bs-dropdown-header-color, a
   vendor CSS variable whose only dark-friendly value (#adb5bd) is scoped
   inside Bootstrap's opt-in .dropdown-menu-dark utility class — a class
   this app's dropdowns never actually carry (theme switching here is via
   [data-bs-theme], not per-dropdown classes). So it stayed pinned at the
   light-mode default (#1F1F1F, near-black) even in dark mode, making the
   user's name in the navbar "Sign Out" dropdown nearly invisible against
   the dark background right above it. The e-mail line below was fine
   because it separately carries .text-muted, which IS already covered. */
[data-bs-theme="dark"] .dropdown-header {
  color: #f1f3f5;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus,
[data-bs-theme="dark"] .dropdown-item.active {
  background-color: rgba(255, 255, 255, 0.08);
  color: #f1f3f5;
}

[data-bs-theme="dark"] .dropdown-divider {
  border-color: #2a2e33;
}

[data-bs-theme="dark"] .preview-item-content h6,
[data-bs-theme="dark"] .preview-item-content p {
  color: inherit;
}

/* Tabs */
[data-bs-theme="dark"] .nav-tabs {
  border-color: #2a2e33;
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
  color: #adb5bd;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  color: #f1f3f5;
  background-color: transparent;
  border-color: #2a2e33 #2a2e33 transparent;
}

/* The dashboard's ".home-tab" tabs (Home/Leaderboard/Payments/Attendance/
   Results) are styled by a separate, more specific vendor rule
   (.home-tab .nav-tabs .nav-item .nav-link, 4 classes) that hardcodes
   color: #212121 and a light border-right — it outranks the generic
   .nav-tabs .nav-link override above by specificity, so it was winning
   even in dark mode and rendering near-black text on a dark background.
   Match its specificity here to actually override it. */
[data-bs-theme="dark"] .home-tab .nav-tabs .nav-item .nav-link {
  color: #adb5bd;
  border-right-color: #2a2e33;
}

[data-bs-theme="dark"] .rtl .home-tab .nav-tabs .nav-item .nav-link {
  border-left-color: #2a2e33;
}

[data-bs-theme="dark"] .home-tab .nav-tabs .nav-item .nav-link.active {
  color: #7c9fff;
}

/* Modals */
[data-bs-theme="dark"] .modal-content {
  background-color: #22262b;
  color: #dee2e6;
}

/* --bs-modal-header-border-color / --bs-modal-footer-border-color are
   hardcoded to #dee2e6 (light grey) with no dark-theme redefinition
   anywhere in this vendor build, unlike most of Bootstrap 5.3's other
   auto-adapting variables — every modal's header/footer divider line
   stayed light-grey against an otherwise-dark modal (Payment Receipt's
   Download/Print/Close footer, most visibly). */
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
  border-color: #2a2e33;
}

[data-bs-theme="dark"] .modal-header .close {
  background: rgba(255, 255, 255, 0.08);
  color: #adb5bd;
}

[data-bs-theme="dark"] .modal-header .close:hover,
[data-bs-theme="dark"] .modal-header .close:focus {
  background: rgba(255, 255, 255, 0.15);
  color: #f1f3f5;
}

/* This session's custom components */
[data-bs-theme="dark"] .auth-switch {
  background: #2a2e33;
}

[data-bs-theme="dark"] .auth-switch-btn {
  color: #c7ccd1;
}

[data-bs-theme="dark"] .auth-switch-btn:hover {
  color: #7c9fff;
}

[data-bs-theme="dark"] .home-tab .nav-tabs.dash-tab-pills {
  background: #2a2e33;
}

[data-bs-theme="dark"] .home-tab .nav-tabs.dash-tab-pills .nav-item .nav-link {
  color: #c7ccd1;
}

[data-bs-theme="dark"] .home-tab .nav-tabs.dash-tab-pills .nav-item .nav-link:hover {
  color: #7c9fff;
}

/* The active pill's box-shadow (a soft "elevation" glow in light mode)
   reads as a harsh, glowing halo against a dark background instead — a
   colored glow only looks like a subtle shadow on a light backdrop.
   Flat active state in dark mode, no shadow. */
[data-bs-theme="dark"] .home-tab .nav-tabs.dash-tab-pills .nav-item .nav-link.active {
  box-shadow: none;
  background: #0d6efd;
}

[data-bs-theme="dark"] .level-book-row,
[data-bs-theme="dark"] .classroom-student-row,
[data-bs-theme="dark"] .leaderboard-row,
[data-bs-theme="dark"] .device-row {
  border-bottom-color: #2a2e33;
}

[data-bs-theme="dark"] .device-row-icon {
  background: #2a2e33;
  color: #c7ccd1;
}

[data-bs-theme="dark"] .rank-badge:not(.rank-1):not(.rank-2):not(.rank-3) {
  background: #3a3f45;
  color: #c7ccd1;
}

[data-bs-theme="dark"] .level-book-bar {
  background: #2a2e33;
}

[data-bs-theme="dark"] .legend-key {
  border-top-color: #2a2e33;
}

/* The notification badge's hardcoded white border (meant to separate it
   from a light navbar) reads as a stray white ring on a dark one. */
[data-bs-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator .count {
  border-color: #15171a;
}

[data-bs-theme="dark"] .badge.border {
  border-color: #3a3f45 !important;
}

[data-bs-theme="dark"] .stat-card {
  box-shadow: none;
}

[data-bs-theme="dark"] .stat-card:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

/* This vendor theme hardcodes .btn-outline-primary's border to #081031 —
   a near-black navy that reads fine on the light theme's white cards but
   is nearly invisible against a dark card background (#22262b, see
   .card above), leaving just faint text with no visible pill boundary.
   Used widely (student/user/class/enrollment/schedule/teacher list
   filters, attendance marking, etc.) so this is a broad fix, not a
   single-component patch. */
[data-bs-theme="dark"] .btn-outline-primary {
  border-color: #5b7cfa;
  color: #8ea3ff;
}
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-primary:focus {
  background: #3d5afe;
  border-color: #3d5afe;
  color: #fff;
}

/* Same root cause as .btn-outline-primary above, across every other
   .btn-outline-* variant this theme ships — each one's resting-state
   border is a dark, desaturated shade of its own color (e.g. danger's
   border is #ad1206, a near-black red), tuned for a white card
   background. Text color varies in how bad it looked: secondary/success/
   info/warning's text was already bright enough to stay legible, just
   paired with an invisible border — brightened border only, kept the
   existing text color. -dark was the other genuinely broken one (both
   border AND text too dark, reported directly: "Change Password"), and
   its own hover fill (a dark navy) would be just as invisible against a
   dark card as the resting border was, so that needs a hover override
   too, unlike the others whose hover fill colors were already bright
   enough on their own. -danger turned out to be a second genuinely
   broken one, reported later ("Suspend Academy"/"Restore") — its
   resting text (#fcbbb6, a washed-out pink, patched in custom.css for
   light mode too) reads poorly against a dark card just like it does
   against a light one, so this needs a text override alongside the
   border like -dark does, not border-only like the others. */
[data-bs-theme="dark"] .btn-outline-secondary { border-color: #05C3FB; }
[data-bs-theme="dark"] .btn-outline-success { border-color: #34B1AA; }
[data-bs-theme="dark"] .btn-outline-info { border-color: #51B1E1; }
[data-bs-theme="dark"] .btn-outline-warning { border-color: #E29E09; }
[data-bs-theme="dark"] .btn-outline-danger { border-color: #F95F53; color: #F95F53; }
[data-bs-theme="dark"] .btn-outline-danger:hover,
[data-bs-theme="dark"] .btn-outline-danger:focus { color: #fff; }

[data-bs-theme="dark"] .btn-outline-dark {
  border-color: #9aa4b2;
  color: #dee2e6;
}
[data-bs-theme="dark"] .btn-outline-dark:hover,
[data-bs-theme="dark"] .btn-outline-dark:focus {
  background: #495057;
  border-color: #495057;
  color: #fff;
}

[data-bs-theme="dark"] .id-card-lang-btn {
  border-color: #495057;
  color: #adb5bd;
}

[data-bs-theme="dark"] .id-card-lang-btn.active {
  background: #3d5afe;
  border-color: #3d5afe;
  color: #ffffff;
}

/* .login-history-scroll (admin/teacher Profile pages) renders the
   browser's plain default scrollbar otherwise — a light gray track/thumb
   that reads as a bright, out-of-place strip against a dark card. */
[data-bs-theme="dark"] .login-history-scroll {
  scrollbar-color: #495057 transparent; /* Firefox */
}
[data-bs-theme="dark"] .login-history-scroll::-webkit-scrollbar {
  width: 8px;
}
[data-bs-theme="dark"] .login-history-scroll::-webkit-scrollbar-track {
  background: transparent;
}
[data-bs-theme="dark"] .login-history-scroll::-webkit-scrollbar-thumb {
  background: #495057;
  border-radius: 999px;
}
[data-bs-theme="dark"] .login-history-scroll::-webkit-scrollbar-thumb:hover {
  background: #5a6169;
}

/* Profile page redesign (admin/profile/show.blade.php,
   teacher/profile/edit.blade.php) — the avatar ring's inner border is a
   hardcoded white, meant to look like a gap between the colored ring and
   the photo on a white card; on a dark card (#22262b) that white ring
   would look like a bright halo instead, so it swaps to match the dark
   card background. .detail-icon/.device-row-icon use the same "brand
   blue at low opacity" treatment on both themes, but #1F3BB3 icon glyphs
   at 10% background opacity lose too much contrast against a dark card —
   same category of issue as the .btn-outline-primary fix above, brought
   in from the start this time instead of reported separately. */
[data-bs-theme="dark"] .avatar-wrapper img,
[data-bs-theme="dark"] .avatar-icon-fallback {
  border-color: #22262b;
}

[data-bs-theme="dark"] .avatar-icon-fallback {
  background: #2a2e33;
  color: #8ea3ff;
}

[data-bs-theme="dark"] .avatar-thumb-icon {
  background: #2a2e33;
  color: #8ea3ff;
}

[data-bs-theme="dark"] .detail-icon,
[data-bs-theme="dark"] .device-row-icon,
[data-bs-theme="dark"] .id-card-unavailable-icon {
  background: rgba(91, 124, 250, .18);
  color: #8ea3ff;
}

/* Navbar avatar icon fallback (partial/{admin,teacher}/navbar.blade.php)
   — the admin version leans on .img-thumbnail's own (already dark-safe)
   background, but its icon color still needs brightening same as
   everywhere else; the teacher version has no .img-thumbnail wrapper at
   all, so its background/border need a dark-mode swap too. */
[data-bs-theme="dark"] .nav-avatar-icon-xs,
[data-bs-theme="dark"] .nav-avatar-icon-lg {
  color: #8ea3ff;
}

[data-bs-theme="dark"] .nav-avatar-icon-xs,
[data-bs-theme="dark"] .nav-avatar-icon-lg {
  background: #2a2e33;
  border-color: rgba(255, 255, 255, .08);
}

/* Class roster modal (custom.css's .roster-* rules) */
[data-bs-theme="dark"] .roster-code-btn {
  color: #7c9fff;
}
[data-bs-theme="dark"] .roster-code-btn:hover {
  color: #a8bfff;
}
[data-bs-theme="dark"] .roster-enrolled-badge {
  color: #adb5bd;
}
[data-bs-theme="dark"] .roster-info-strip {
  background: rgba(124, 159, 255, 0.08);
  border-color: rgba(124, 159, 255, 0.18);
}
[data-bs-theme="dark"] .roster-info-label {
  color: #8a8fa3;
}
[data-bs-theme="dark"] .roster-info-value {
  color: #eef0f6;
}
[data-bs-theme="dark"] .roster-podium-score {
  color: #adb5bd;
}

/* List-page search action buttons (custom.css's .search-action-btn) */
[data-bs-theme="dark"] .search-action-btn {
  border-color: #3a3f45;
  color: #adb5bd;
  background-color: transparent;
}
[data-bs-theme="dark"] .search-action-btn:hover,
[data-bs-theme="dark"] .search-action-btn:focus-visible {
  border-color: #7c9fff;
  color: #7c9fff;
  background-color: rgba(124, 159, 255, 0.08);
}