/* ==========================================================================
   theme.css — Admin panel light / dark theme layer
   --------------------------------------------------------------------------
   Reference: Docs/admin-panel-design-system.md (§10) and
              Docs/admin-panel-theme-preview.html

   Rules of this file:
   1. Light mode is the existing UI. Nothing in this file changes how light
      mode renders: the :root block only declares tokens, and every visual
      override is scoped under html[data-theme="dark"].
   2. The mode lives on <html data-theme="light|dark">, set before first paint
      by the inline script in layouts/include.blade.php.
   3. --theme-color stays server-injected (systemSettings.theme_color). Dark
      mode keeps the raw brand color for filled surfaces and derives a lifted
      --theme-color-text for text and icons (design doc §10.2 decision).
   4. Vendor widgets (Select2, datepickers, SweetAlert2, ...) live in
      theme-dark-vendor.css.
   ========================================================================== */

:root {
    --theme-color-hover: color-mix(in srgb, var(--theme-color) 85%, #000);
    --theme-color-soft: color-mix(in srgb, var(--theme-color) 10%, transparent);
    --theme-color-text: var(--theme-color);
    --on-theme: #ffffff;

    --bg-app: #f8fafc;
    --bg-surface: #ffffff;
    --bg-surface-raised: #ffffff;
    --bg-surface-sunken: #f1f5f9;
    --bg-sidebar: #ffffff;
    --bg-navbar: #ffffff;
    --bg-overlay: rgba(14, 30, 40, .45);

    --border-subtle: #e2e8f0;
    --border-strong: #cbd5e1;
    --border-input: #cbd5e1;

    --text-primary: #0f172a;
    --text-body: #334155;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;

    --success: #15803d;
    --success-soft: rgba(21, 128, 61, .10);
    --danger: #c2352c;
    --danger-soft: rgba(194, 53, 44, .10);
    --warning: #b45309;
    --warning-soft: rgba(180, 83, 9, .13);
    --info: #0e7490;
    --info-soft: rgba(14, 116, 144, .12);
    --neutral: #64748b;
    --neutral-soft: rgba(100, 116, 139, .10);

    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-input: 8px;
    --r-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .02);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .06);
    --shadow-lg: 0 5px 25px rgba(0, 0, 0, .15);
    --shadow-xl: 0 8px 30px rgba(0, 0, 0, .12);

    --chart-grid: #e3ebef;
    --chart-text: #64748b;
}

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

    --theme-color-hover: color-mix(in srgb, var(--theme-color) 82%, #fff);
    --theme-color-soft: color-mix(in srgb, var(--theme-color) 22%, transparent);
    --theme-color-text: color-mix(in srgb, var(--theme-color) 55%, #fff);

    --bg-app: #0d1a22;
    --bg-surface: #16262f;
    --bg-surface-raised: #1d303a;
    --bg-surface-sunken: #101f27;
    --bg-sidebar: #16262f;
    --bg-navbar: #16262f;
    --bg-overlay: rgba(0, 0, 0, .66);

    --border-subtle: #29404c;
    --border-strong: #3a5665;
    --border-input: #3a5665;

    --text-primary: #eef4f7;
    --text-body: #c2d1d9;
    --text-secondary: #8ea3ad;
    --text-muted: #64787f;

    --success: #4ade80;
    --success-soft: rgba(74, 222, 128, .16);
    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, .16);
    --warning: #fbbf24;
    --warning-soft: rgba(251, 191, 36, .17);
    --info: #38bdf8;
    --info-soft: rgba(56, 189, 248, .16);
    --neutral: #8ea3ad;
    --neutral-soft: rgba(142, 163, 173, .16);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .30);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
    --shadow-lg: 0 6px 24px rgba(0, 0, 0, .55);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, .65);

    --chart-grid: #263b46;
    --chart-text: #8ea3ad;

    /* Bootstrap 5.3 variables (data-bs-theme="dark" is also set on <html>;
       these re-point its dark palette onto our tokens). */
    --bs-body-bg: var(--bg-surface);
    --bs-body-bg-rgb: 22, 38, 47;
    --bs-body-color: var(--text-body);
    --bs-body-color-rgb: 194, 209, 217;
    --bs-emphasis-color: var(--text-primary);
    --bs-emphasis-color-rgb: 238, 244, 247;
    --bs-heading-color: var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-secondary-bg: var(--bg-surface-sunken);
    --bs-tertiary-color: var(--text-muted);
    --bs-tertiary-bg: var(--bg-surface-raised);
    --bs-border-color: var(--border-subtle);
    --bs-border-color-translucent: rgba(255, 255, 255, .10);
    --bs-form-control-bg: var(--bg-surface);
    --bs-form-control-disabled-bg: var(--bg-surface-sunken);
}

/* --------------------------------------------------------------------------
   Theme toggle (navbar). Styled in both modes; this is new UI.
   -------------------------------------------------------------------------- */
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.theme-switcher {
    display: flex;
    align-items: center;
}

.theme-toggle {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 .5rem;
    font-size: 1rem;
    line-height: 1;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-input);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.theme-toggle:hover {
    background: var(--theme-color-soft);
    color: var(--theme-color-text);
    border-color: var(--theme-color-text);
}

.theme-toggle:focus {
    outline: none;
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--theme-color-text);
    outline-offset: 2px;
}

.theme-toggle .theme-toggle-dark {
    display: none;
}

html[data-theme="dark"] .theme-toggle .theme-toggle-light {
    display: none;
}

html[data-theme="dark"] .theme-toggle .theme-toggle-dark {
    display: inline-block;
}

@media (max-width: 575.98px) {
    .theme-toggle {
        width: 32px;
        height: 32px;
        margin: 0 .25rem;
    }
}

/* Suppress transitions for the single frame in which the theme flips, so
   every surface changes at once instead of animating at different speeds. */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

/* ---------- Base ---------- */
html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: var(--bg-app);
    color: var(--text-body);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .h1,
html[data-theme="dark"] .h2,
html[data-theme="dark"] .h3,
html[data-theme="dark"] .h4,
html[data-theme="dark"] .h5,
html[data-theme="dark"] .h6 {
    color: var(--text-primary);
}

html[data-theme="dark"] hr {
    border-color: var(--border-subtle);
    opacity: 1;
}

html[data-theme="dark"] code {
    color: #f472b6;
}

html[data-theme="dark"] pre {
    color: var(--text-body);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .18);
}

html[data-theme="dark"] ::selection {
    background: color-mix(in srgb, var(--theme-color) 55%, transparent);
    color: #fff;
}

/* ---------- Utilities that hardcode light colors ---------- */
html[data-theme="dark"] .bg-white {
    background-color: var(--bg-surface) !important;
}

html[data-theme="dark"] .bg-light {
    background-color: var(--bg-surface-sunken) !important;
}

/* Vendor gradient utility (#f4f4f4 → #e4e4e9); shorthand clears the gradient image */
html[data-theme="dark"] .bg-gradient-light {
    background: var(--bg-surface-sunken) !important;
}

html[data-theme="dark"] .bg-body,
html[data-theme="dark"] .bg-body-tertiary {
    background-color: var(--bg-surface-raised) !important;
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-color-dashboard-counter {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-black-50,
html[data-theme="dark"] .text-gray,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-color-dashboard-counter-label,
html[data-theme="dark"] .card .card-description,
html[data-theme="dark"] .card .card-subtitle {
    color: var(--text-secondary) !important;
}

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

html[data-theme="dark"] .text-primary {
    color: color-mix(in srgb, #0d6efd 55%, #fff) !important;
}

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

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

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

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

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-right,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-left,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end {
    border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .border-white {
    border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

html[data-theme="dark"] .shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

/* ---------- Layout shell ---------- */
html[data-theme="dark"] .container-scroller,
html[data-theme="dark"] .page-body-wrapper,
html[data-theme="dark"] .main-panel {
    background-color: var(--bg-app);
}

html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .footer {
    background-color: var(--bg-app) !important;
    color: var(--text-body);
}

html[data-theme="dark"] .footer {
    border-top: 1px solid var(--border-subtle);
}

html[data-theme="dark"] .page-title,
html[data-theme="dark"] .page-header .page-title {
    color: var(--text-primary);
}

html[data-theme="dark"] .breadcrumb {
    background-color: transparent;
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .breadcrumb .breadcrumb-item,
html[data-theme="dark"] .breadcrumb .breadcrumb-item.active,
html[data-theme="dark"] .breadcrumb-item+.breadcrumb-item::before {
    color: var(--text-secondary);
}

/* ---------- Navbar ---------- */
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .navbar .navbar-brand-wrapper,
html[data-theme="dark"] .navbar .navbar-menu-wrapper {
    background: var(--bg-navbar);
}

html[data-theme="dark"] .navbar.default-layout-navbar {
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: none;
}

html[data-theme="dark"] .navbar .navbar-menu-wrapper,
html[data-theme="dark"] .navbar .navbar-menu-wrapper .navbar-toggler,
html[data-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link {
    color: var(--text-secondary);
}

html[data-theme="dark"] .navbar .navbar-menu-wrapper .navbar-toggler:hover,
html[data-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link:hover {
    color: var(--text-primary);
}

html[data-theme="dark"] .navbar .navbar-menu-wrapper .cache-clear span {
    color: var(--text-body);
}

html[data-theme="dark"] .navbar .nav-profile-text p,
html[data-theme="dark"] .navbar .nav-profile-text .text-black {
    color: var(--text-primary) !important;
}

/* Default logos use near-black lettering; give them a soft light plate so
   custom and bundled logos both stay legible on the dark bar. */
html[data-theme="dark"] .navbar .navbar-brand-wrapper .navbar-brand img {
    border-radius: var(--r-md);
    padding: 3px 8px;
}

html[data-theme="dark"] .navbar .navbar-brand-wrapper .brand-logo-mini img {
    padding: 3px;
}

html[data-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu,
html[data-theme="dark"] .navbar-dropdown {
    background-color: var(--bg-surface-raised);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
}

/* Language switcher */
html[data-theme="dark"] .lang-switcher-toggle .lang-switcher-current-flag,
html[data-theme="dark"] .lang-switcher-flag {
    border-color: var(--border-subtle);
    background-color: var(--bg-surface-sunken);
}

html[data-theme="dark"] .dropdown-menu.lang-switcher-menu {
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .lang-switcher-header {
    border-bottom-color: var(--border-subtle);
    color: var(--text-muted);
}

html[data-theme="dark"] .lang-switcher-list::-webkit-scrollbar-thumb {
    background: var(--border-strong);
}

html[data-theme="dark"] .lang-switcher-item:hover {
    background-color: var(--bg-surface-sunken);
}

html[data-theme="dark"] .lang-switcher-name {
    color: var(--text-primary);
}

html[data-theme="dark"] .lang-switcher-code {
    color: var(--text-muted);
}

html[data-theme="dark"] .lang-switcher-flag-fallback,
html[data-theme="dark"] .lang-switcher-item.active {
    background-color: var(--theme-color-soft);
}

html[data-theme="dark"] .lang-switcher-flag-fallback,
html[data-theme="dark"] .lang-switcher-check,
html[data-theme="dark"] .lang-switcher-item.active .lang-switcher-name,
html[data-theme="dark"] .lang-switcher-item.active .lang-switcher-code {
    color: var(--theme-color-text);
}

/* Session year / semester switcher */
html[data-theme="dark"] .sys-trigger-btn {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-input);
    box-shadow: none;
}

html[data-theme="dark"] .sys-trigger-btn:hover {
    background-color: var(--bg-surface-sunken);
    border-color: var(--theme-color-text);
}

html[data-theme="dark"] .sys-icon-container {
    background-color: var(--theme-color-soft);
    color: var(--theme-color-text);
}

html[data-theme="dark"] .sys-label,
html[data-theme="dark"] .sys-arrow,
html[data-theme="dark"] .sys-col-title {
    color: var(--text-muted);
}

html[data-theme="dark"] .sys-value {
    color: var(--text-primary);
}

html[data-theme="dark"] .sys-dropdown-menu {
    background-color: var(--bg-surface-raised);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .sys-col-right {
    border-left-color: var(--border-subtle);
}

html[data-theme="dark"] .sys-list-container::-webkit-scrollbar-thumb {
    background: var(--border-strong);
}

html[data-theme="dark"] .sys-option-btn {
    color: var(--text-body);
}

html[data-theme="dark"] .sys-option-btn:hover {
    background-color: var(--bg-surface-sunken);
}

html[data-theme="dark"] .sys-option-btn.active {
    background-color: var(--theme-color-soft);
    color: var(--theme-color-text);
}

html[data-theme="dark"] .sys-option-badge {
    background-color: var(--bg-surface-sunken);
    color: var(--text-secondary);
}

html[data-theme="dark"] .sys-footer {
    background-color: var(--bg-surface-sunken);
    border-top-color: var(--border-subtle);
}

html[data-theme="dark"] .sys-btn-cancel {
    color: var(--text-secondary);
}

html[data-theme="dark"] .sys-btn-cancel:hover {
    color: var(--text-primary);
    background-color: var(--bg-surface-raised);
}

html[data-theme="dark"] .sys-btn-apply:disabled {
    background-color: var(--border-strong);
    color: var(--text-secondary);
}

/* ---------- Sidebar ---------- */
html[data-theme="dark"] .sidebar {
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-subtle);
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

html[dir="rtl"][data-theme="dark"] .sidebar {
    border-right: 0;
    border-left: 1px solid var(--border-subtle);
}

html[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .18);
}

html[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .28);
}

html[data-theme="dark"] .sidebar .nav .nav-item,
html[data-theme="dark"] .sidebar .nav .nav-item.active,
html[data-theme="dark"] .sidebar .nav .nav-item:hover {
    background: transparent;
}

html[data-theme="dark"] .sidebar .nav .nav-item .nav-link,
html[data-theme="dark"] .sidebar .nav:not(.sub-menu)>.nav-item:hover:not(.nav-category):not(.nav-profile)>.nav-link {
    color: var(--text-body);
}

html[data-theme="dark"] .sidebar .nav.sub-menu .nav-item .nav-link {
    color: var(--text-secondary);
}

html[data-theme="dark"] .sidebar .nav.sub-menu .nav-item .nav-link:hover,
html[data-theme="dark"] .sidebar .nav.sub-menu .nav-item .nav-link:before {
    color: var(--text-primary);
}

html[data-theme="dark"] .sidebar .nav .nav-item .nav-link:hover {
    background-color: var(--theme-color-soft);
    color: var(--text-primary);
}

html[data-theme="dark"] .sidebar .nav .nav-item .nav-link i.menu-icon {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .sidebar .nav .nav-item .nav-link i.menu-arrow {
    color: var(--text-muted);
}

/* A2 from the design doc: active fill derives from the brand, not a fixed blue */
html[data-theme="dark"] .sidebar .nav .nav-item.active>.nav-link,
html[data-theme="dark"] .sidebar .nav .nav-item .nav-link.active {
    background-color: color-mix(in srgb, var(--theme-color) 32%, transparent) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .sidebar .nav .nav-item.active>.nav-link .menu-title,
html[data-theme="dark"] .sidebar .nav .nav-item .nav-link.active .menu-title {
    color: var(--text-primary);
}

html[data-theme="dark"] .sidebar .nav .nav-item.active>.nav-link i.menu-icon,
html[data-theme="dark"] .sidebar .nav .nav-item .nav-link.active i.menu-icon,
html[data-theme="dark"] .sidebar .nav .nav-item.parent-active>.nav-link[data-toggle="collapse"],
html[data-theme="dark"] .sidebar .nav .nav-item.parent-active>.nav-link[data-bs-toggle="collapse"],
html[data-theme="dark"] .sidebar .nav .nav-item.parent-active>.nav-link[data-toggle="collapse"] i.menu-icon,
html[data-theme="dark"] .sidebar .nav .nav-item.parent-active>.nav-link[data-bs-toggle="collapse"] i.menu-icon {
    color: var(--theme-color-text) !important;
}

html[data-theme="dark"] .sidebar .menu-search,
html[data-theme="dark"] .sidebar .sidebar-search .form-control {
    background-color: var(--bg-surface-sunken);
    color: var(--text-primary);
}

html[data-theme="dark"] .sub-category {
    color: var(--text-secondary);
    border-left-color: var(--border-strong);
}

html[data-theme="dark"] .sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link .menu-title,
html[data-theme="dark"] .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse,
html[data-theme="dark"] .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapsing {
    background: var(--bg-surface-raised);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
}

@media (max-width: 991px) {
    html[data-theme="dark"] .sidebar-offcanvas {
        box-shadow: var(--shadow-xl);
    }
}

/* ---------- Cards ---------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .license-alert-card,
html[data-theme="dark"] .al-card,
html[data-theme="dark"] .payment-card {
    background-color: var(--bg-surface);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-sm);
    color: var(--text-body);
}

html[data-theme="dark"] .card .card-title,
html[data-theme="dark"] .card-title {
    color: var(--text-primary);
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
    background-color: var(--bg-surface-sunken);
    border-color: var(--border-subtle);
    color: var(--text-body);
}

html[data-theme="dark"] .accordion .card,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button {
    background-color: var(--bg-surface);
    color: var(--text-body);
    border-color: var(--border-subtle);
    box-shadow: none;
}

html[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--theme-color-soft);
    color: var(--theme-color-text);
}

html[data-theme="dark"] .list-group-item {
    background-color: var(--bg-surface);
    border-color: var(--border-subtle);
    color: var(--text-body);
}

html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--bg-surface-sunken);
    color: var(--text-primary);
}

html[data-theme="dark"] .list-group-item.active {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
    color: var(--on-theme);
}

html[data-theme="dark"] .list-wrapper ul li {
    border-bottom-color: var(--border-subtle);
}

/* Dashboard */
html[data-theme="dark"] .dashboard-card-title {
    color: var(--text-secondary);
}

html[data-theme="dark"] .dashboard-card-value {
    color: var(--text-primary);
}

html[data-theme="dark"] .bg-soft-blue {
    background-color: rgba(96, 165, 250, .16);
    color: #60a5fa;
}

html[data-theme="dark"] .bg-soft-green {
    background-color: var(--success-soft);
    color: var(--success);
}

html[data-theme="dark"] .bg-soft-purple {
    background-color: rgba(167, 139, 250, .16);
    color: #a78bfa;
}

html[data-theme="dark"] .bg-soft-orange {
    background-color: rgba(251, 146, 60, .16);
    color: #fb923c;
}

html[data-theme="dark"] .icon-primary {
    background-color: var(--theme-color-soft) !important;
    color: var(--theme-color-text) !important;
}

html[data-theme="dark"] .chart-menu {
    background-color: var(--bg-surface-sunken);
}

html[data-theme="dark"] .custom-table td {
    border-bottom-color: var(--border-subtle) !important;
    border-top-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .page-section,
html[data-theme="dark"] .filter-group {
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .license-alert-icon-box {
    background-color: var(--warning-soft);
    color: var(--warning);
}

html[data-theme="dark"] .license-alert-title,
html[data-theme="dark"] .license-alert-text-strong,
html[data-theme="dark"] .license-alert-step-title {
    color: var(--text-primary);
}

html[data-theme="dark"] .license-alert-step-link:hover {
    background-color: var(--bg-surface-sunken);
}

html[data-theme="dark"] .license-alert-divider {
    background-color: var(--border-subtle);
}

html[data-theme="dark"] .license-alert-btn-secondary {
    background-color: var(--bg-surface-sunken);
    color: var(--theme-color-text);
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .license-alert-btn-secondary:hover {
    background-color: var(--bg-surface-raised);
    color: var(--text-primary);
}

html[data-theme="dark"] .bg-light-danger {
    background-color: var(--danger-soft) !important;
}

html[data-theme="dark"] .bg-light-warning {
    background-color: var(--warning-soft) !important;
}

html[data-theme="dark"] .policy-card:hover {
    border-color: var(--border-strong) !important;
}

html[data-theme="dark"] .policy-card .policy-icon {
    background: var(--bg-surface-sunken);
    color: var(--text-body);
}

html[data-theme="dark"] .popover-content,
html[data-theme="dark"] .context-menu {
    background-color: var(--bg-surface-raised);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-lg);
    color: var(--text-body);
}

html[data-theme="dark"] .context-menu ul>li {
    color: var(--text-body);
}

html[data-theme="dark"] .syllabus-info-alert {
    background-color: var(--info-soft) !important;
    border-color: color-mix(in srgb, var(--info) 35%, transparent) !important;
    color: var(--text-body) !important;
}

html[data-theme="dark"] .syllabus-info-alert .alert-heading,
html[data-theme="dark"] .syllabus-info-alert .info-text strong {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .syllabus-info-alert .info-text {
    color: var(--text-body) !important;
}

html[data-theme="dark"] .syllabus-info-alert .info-icon {
    color: var(--info) !important;
}

html[data-theme="dark"] .syllabus-info-alert .syllabus-badge {
    background-color: var(--info-soft) !important;
    color: var(--info) !important;
    border-color: color-mix(in srgb, var(--info) 35%, transparent) !important;
}

/* Payment / fee helper blocks (custom.css) */
html[data-theme="dark"] .form-section-title,
html[data-theme="dark"] .total-label,
html[data-theme="dark"] .remove-btn {
    color: var(--text-secondary);
}

html[data-theme="dark"] .fee-item,
html[data-theme="dark"] .mode-tile,
html[data-theme="dark"] .empty-state {
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .fee-item:hover,
html[data-theme="dark"] .fee-item.selected,
html[data-theme="dark"] .total-section {
    background-color: var(--bg-surface-sunken);
}

html[data-theme="dark"] .fee-name {
    color: var(--text-body);
}

html[data-theme="dark"] .fee-price {
    color: var(--text-primary);
}

html[data-theme="dark"] .form-control-custom {
    background-color: var(--bg-surface);
    border-color: var(--border-input);
    color: var(--text-primary);
}

html[data-theme="dark"] .total_paidable_amount {
    background-color: var(--bg-surface-sunken);
}

/* ---------- Tables ---------- */
html[data-theme="dark"] .table {
    --bs-table-bg: var(--bg-surface);
    --bs-table-color: var(--text-body);
    --bs-table-border-color: var(--border-subtle);
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-striped-color: var(--text-body);
    --bs-table-hover-bg: var(--bg-surface-raised);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-active-bg: var(--bg-surface-raised);
    color: var(--text-body);
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table tbody+tbody,
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered th,
html[data-theme="dark"] .table-bordered td {
    border-color: var(--border-subtle) !important;
    color: var(--text-body);
}

html[data-theme="dark"] .table th,
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table .thead-light th,
html[data-theme="dark"] .table .thead-dark th,
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light>th,
html[data-theme="dark"] .table-light>td {
    background-color: var(--bg-surface-sunken);
    color: var(--text-secondary);
}

html[data-theme="dark"] .table tbody tr {
    background-color: var(--bg-surface) !important;
    box-shadow: var(--shadow-sm);
}

html[data-theme="dark"] .table tbody tr>td,
html[data-theme="dark"] .table tbody tr>th {
    background-color: transparent;
}

html[data-theme="dark"] .table tbody tr:hover,
html[data-theme="dark"] .table tbody tr:focus-within {
    box-shadow: var(--shadow-md) !important;
}

html[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--bg-surface-raised) !important;
    color: var(--text-primary);
}

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

html[data-theme="dark"] .table tbody tr.selected,
html[data-theme="dark"] .table tbody tr.table-active {
    background-color: var(--theme-color-soft) !important;
}

html[data-theme="dark"] .al-table thead th,
html[data-theme="dark"] .al-table-footer {
    background-color: var(--bg-surface-sunken);
    border-color: var(--border-subtle);
    color: var(--text-secondary);
}

html[data-theme="dark"] .al-table tbody td {
    border-bottom-color: var(--border-subtle);
}

html[data-theme="dark"] .al-table tbody tr:hover {
    background-color: var(--bg-surface-raised);
}

/* ---------- Forms ---------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] .custom-file-label,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] .form-group .file-upload-info,
html[data-theme="dark"] .al-input {
    background-color: var(--bg-surface);
    border-color: var(--border-input);
    color: var(--text-primary);
}

/* The vendor theme draws selects with a light 1px outline instead of a border
   (status-coloured .border-* selects keep their vendor outline colour) */
html[data-theme="dark"] select.form-control:not(.border-primary):not(.border-secondary):not(.border-success):not(.border-info):not(.border-warning):not(.border-danger) {
    outline-color: var(--border-input);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] .custom-select:focus,
html[data-theme="dark"] .al-input:focus {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--theme-color-text) !important;
    box-shadow: 0 0 0 3px var(--theme-color-soft);
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .al-input::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-select:disabled,
html[data-theme="dark"] .custom-select:disabled {
    background-color: var(--bg-surface-sunken);
    color: var(--text-secondary);
}

html[data-theme="dark"] .form-control-plaintext {
    color: var(--text-primary);
}

html[data-theme="dark"] select.form-control option,
html[data-theme="dark"] select option {
    background-color: var(--bg-surface-raised);
    color: var(--text-primary);
}

html[data-theme="dark"] .form-group>label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .col-form-label,
html[data-theme="dark"] .form-check .form-check-label,
html[data-theme="dark"] .al-label {
    color: var(--text-body);
}

html[data-theme="dark"] label.filter-menu {
    background: var(--bg-surface);
    color: var(--text-secondary);
}

html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .custom-file-label::after,
html[data-theme="dark"] .input-group-append .btn-light,
html[data-theme="dark"] .input-group-prepend .btn-light {
    background-color: var(--bg-surface-sunken);
    border-color: var(--border-input);
    color: var(--text-body);
}

html[data-theme="dark"] .form-text,
html[data-theme="dark"] small.text-muted {
    color: var(--text-secondary) !important;
}

/* StarAdmin custom checkbox / radio helpers */
html[data-theme="dark"] .form-check .form-check-label input[type="checkbox"]+.input-helper:before,
html[data-theme="dark"] .form-check .form-check-label input[type="radio"]+.input-helper:before {
    border-color: var(--border-strong);
}

html[data-theme="dark"] .form-check .form-check-label input[type="checkbox"]:disabled+.input-helper:before,
html[data-theme="dark"] .form-check .form-check-label input[type="checkbox"]:disabled:checked+.input-helper:after {
    border-color: var(--border-subtle);
    background: var(--bg-surface-sunken);
}

html[data-theme="dark"] .form-check-input {
    background-color: var(--bg-surface);
    border-color: var(--border-strong);
}

html[data-theme="dark"] .form-check-input:checked {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}

html[data-theme="dark"] .custom-control-label::before {
    background-color: var(--bg-surface);
    border-color: var(--border-strong);
}

html[data-theme="dark"] .al-switch .al-slider {
    background-color: var(--border-strong);
}

html[data-theme="dark"] .al-icon-upload,
html[data-theme="dark"] .al-toggle-box,
html[data-theme="dark"] .al-info-box,
html[data-theme="dark"] .al-modal-lang {
    background-color: var(--bg-surface-sunken);
    border-color: var(--border-subtle);
    color: var(--text-secondary);
}

html[data-theme="dark"] .al-icon-upload:hover,
html[data-theme="dark"] .al-icon-upload.al-selected {
    background-color: var(--theme-color-soft);
    border-color: var(--theme-color-text);
    color: var(--theme-color-text);
}

/* ---------- Buttons ---------- */
html[data-theme="dark"] .btn-light {
    background-color: var(--bg-surface-sunken);
    border-color: var(--border-subtle);
    color: var(--text-body);
}

html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-light:focus {
    background-color: var(--bg-surface-raised);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

html[data-theme="dark"] .btn-secondary {
    background-color: var(--bg-surface-sunken) !important;
    color: var(--theme-color-text) !important;
    border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--bg-surface-raised) !important;
}

html[data-theme="dark"] .btn-outline-primary:not(:hover):not(:focus):not(.active) {
    color: var(--theme-color-text);
    border-color: var(--theme-color-text);
}

html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-dark,
html[data-theme="dark"] .btn-outline-light {
    color: var(--text-body);
    border-color: var(--border-strong);
}

html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-dark:hover,
html[data-theme="dark"] .btn-outline-light:hover {
    background-color: var(--bg-surface-raised);
    color: var(--text-primary);
}

html[data-theme="dark"] .btn-dark {
    background-color: var(--bg-surface-raised);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

html[data-theme="dark"] .btn-link {
    color: var(--theme-color-text);
}

html[data-theme="dark"] .btn-action-edit {
    background-color: var(--theme-color-soft);
    color: var(--theme-color-text);
}

html[data-theme="dark"] .btn-action-soft-delete {
    background-color: var(--neutral-soft);
    color: var(--neutral);
}

html[data-theme="dark"] .btn-action-soft-delete:hover {
    background-color: var(--border-strong);
    color: #fff;
}

html[data-theme="dark"] .btn-action-hard-delete {
    background-color: var(--danger-soft);
    color: var(--danger);
}

html[data-theme="dark"] .btn-action-restore,
html[data-theme="dark"] .btn-action-success {
    background-color: var(--success-soft);
    color: var(--success);
}

html[data-theme="dark"] .btn-action-view {
    background-color: var(--info-soft);
    color: var(--info);
}

html[data-theme="dark"] .btn-action-edit:hover,
html[data-theme="dark"] .btn-action-hard-delete:hover,
html[data-theme="dark"] .btn-action-restore:hover,
html[data-theme="dark"] .btn-action-success:hover,
html[data-theme="dark"] .btn-action-view:hover {
    color: #fff;
}

html[data-theme="dark"] .btn-close,
html[data-theme="dark"] .close {
    color: var(--text-primary);
    text-shadow: none;
}

html[data-theme="dark"] .al-btn-secondary,
html[data-theme="dark"] .al-btn-outline {
    background-color: var(--bg-surface);
    border-color: var(--border-input);
    color: var(--text-body);
}

html[data-theme="dark"] .al-btn-secondary:hover,
html[data-theme="dark"] .al-btn-outline:hover {
    background-color: var(--bg-surface-sunken);
    color: var(--text-primary);
}

html[data-theme="dark"] .al-btn-light {
    background-color: var(--bg-surface-sunken);
    color: var(--text-body);
}

html[data-theme="dark"] .al-btn-light:hover {
    background-color: var(--bg-surface-raised);
}

html[data-theme="dark"] .al-btn-tint,
html[data-theme="dark"] .al-chip,
html[data-theme="dark"] .al-menu-trigger:hover,
html[data-theme="dark"] .al-upload-card.al-uploaded .al-upload-action {
    background-color: var(--theme-color-soft);
    border-color: color-mix(in srgb, var(--theme-color-text) 35%, transparent);
    color: var(--theme-color-text);
}

html[data-theme="dark"] .al-btn-warning {
    background-color: var(--warning-soft);
    border-color: color-mix(in srgb, var(--warning) 35%, transparent);
    color: var(--warning);
}

/* ---------- Dropdowns ---------- */
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .al-dropdown-menu {
    --bs-dropdown-bg: var(--bg-surface-raised);
    --bs-dropdown-color: var(--text-body);
    --bs-dropdown-border-color: var(--border-subtle);
    --bs-dropdown-link-color: var(--text-body);
    --bs-dropdown-link-hover-color: var(--text-primary);
    --bs-dropdown-link-hover-bg: var(--bg-surface-sunken);
    --bs-dropdown-divider-bg: var(--border-subtle);
    --bs-dropdown-header-color: var(--text-muted);
    background-color: var(--bg-surface-raised);
    border-color: var(--border-subtle);
    color: var(--text-body);
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .dropdown .dropdown-menu {
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .al-dropdown-item {
    color: var(--text-body);
    border-bottom-color: var(--border-subtle);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--bg-surface-sunken);
    color: var(--text-primary);
}

html[data-theme="dark"] .dropdown-item.disabled,
html[data-theme="dark"] .dropdown-item:disabled {
    color: var(--text-muted);
}

html[data-theme="dark"] .dropdown-divider,
html[data-theme="dark"] .al-dropdown-divider {
    border-color: var(--border-subtle);
    background-color: var(--border-subtle);
}

html[data-theme="dark"] .dropdown-header,
html[data-theme="dark"] .al-dropdown-header {
    color: var(--text-muted);
    border-bottom-color: var(--border-subtle);
}

html[data-theme="dark"] .action-column-dropdown-menu {
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--border-subtle) !important;
}

html[data-theme="dark"] .action-column-dropdown-menu .dropdown-item {
    color: var(--text-body) !important;
}

html[data-theme="dark"] .action-column-dropdown-menu .dropdown-item i {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .action-column-dropdown-menu .dropdown-item:hover,
html[data-theme="dark"] .action-column-dropdown-menu .dropdown-item:hover i {
    color: var(--theme-color-text) !important;
}

html[data-theme="dark"] .al-dropdown-item:hover {
    background-color: var(--bg-surface-sunken);
    color: var(--theme-color-text);
}

html[data-theme="dark"] .al-dropdown-item-danger:hover {
    background-color: var(--danger-soft);
    color: var(--danger);
}

html[data-theme="dark"] .al-dropdown-item i {
    color: var(--text-muted);
}

/* Custom search select (custom-search-select.css) */
html[data-theme="dark"] .custom-select-trigger {
    background-color: var(--bg-surface);
    border-color: var(--border-input);
    color: var(--text-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c2d1d9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

html[data-theme="dark"] .custom-select-trigger:focus,
html[data-theme="dark"] .custom-select-search-input:focus {
    border-color: var(--theme-color-text);
    box-shadow: 0 0 0 3px var(--theme-color-soft);
}

html[data-theme="dark"] .custom-select-dropdown {
    background-color: var(--bg-surface-raised);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .custom-select-search-container {
    background-color: var(--bg-surface-sunken);
    border-bottom-color: var(--border-subtle);
}

html[data-theme="dark"] .custom-select-search-input {
    background-color: var(--bg-surface);
    border-color: var(--border-input);
    color: var(--text-primary);
}

html[data-theme="dark"] .custom-select-options-list::-webkit-scrollbar-track {
    background: var(--bg-surface-sunken);
}

html[data-theme="dark"] .custom-select-options-list::-webkit-scrollbar-thumb {
    background: var(--border-strong);
}

html[data-theme="dark"] .custom-select-option {
    color: var(--text-body);
}

html[data-theme="dark"] .custom-select-option:hover {
    background-color: var(--bg-surface-sunken);
    color: var(--text-primary);
}

html[data-theme="dark"] .option-sub-details,
html[data-theme="dark"] .custom-select-no-results {
    color: var(--text-secondary);
}

/* ---------- Modals ---------- */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .al-modal-content {
    --bs-modal-bg: var(--bg-surface-sunken);
    --bs-modal-color: var(--text-body);
    background-color: var(--bg-surface-sunken) !important;
    color: var(--text-body);
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-xl);
}

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

html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .al-modal-footer {
    background-color: var(--bg-surface) !important;
    border-top-color: var(--border-subtle);
}

html[data-theme="dark"] .modal-header {
    border-bottom-color: transparent;
}

html[data-theme="dark"] .modal-header .modal-title,
html[data-theme="dark"] .modal .modal-dialog .modal-content .modal-header .close span {
    color: #fff !important;
}

/* The brand-colored modal header keeps a light close icon */
html[data-theme="dark"] .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html[data-theme="dark"] .modal-backdrop {
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: .66;
}

html[data-theme="dark"] .modal-backdrop.show {
    opacity: .66;
}

html[data-theme="dark"] .al-modal-header {
    background-color: var(--bg-surface-sunken);
    border-bottom-color: var(--border-subtle);
}

html[data-theme="dark"] .al-card-header,
html[data-theme="dark"] .al-card-footer {
    background-color: var(--bg-surface-sunken);
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .al-card,
html[data-theme="dark"] .al-toolbar,
html[data-theme="dark"] .al-divider {
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .al-divider {
    background-color: var(--border-subtle);
}

html[data-theme="dark"] .al-card-title,
html[data-theme="dark"] .al-toggle-title,
html[data-theme="dark"] .al-section-title,
html[data-theme="dark"] .al-upload-title,
html[data-theme="dark"] .al-lang-name,
html[data-theme="dark"] .al-modal-title,
html[data-theme="dark"] .al-modal-lang-name {
    color: var(--text-primary);
}

html[data-theme="dark"] .al-page-subtitle,
html[data-theme="dark"] .al-toggle-desc,
html[data-theme="dark"] .al-info-text,
html[data-theme="dark"] .al-upload-status,
html[data-theme="dark"] .al-lang-code,
html[data-theme="dark"] .al-modal-lang-code {
    color: var(--text-secondary);
}

html[data-theme="dark"] .al-card-title i,
html[data-theme="dark"] .al-modal-title i,
html[data-theme="dark"] .al-upload-status.al-uploaded-text,
html[data-theme="dark"] .al-file-status-pending {
    color: var(--theme-color-text);
}

html[data-theme="dark"] .al-modal-close:hover {
    background-color: var(--bg-surface-raised);
    color: var(--text-primary);
}

html[data-theme="dark"] .al-upload-card,
html[data-theme="dark"] .al-file-row,
html[data-theme="dark"] .al-modal-flag {
    background-color: var(--bg-surface);
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .al-upload-card:hover,
html[data-theme="dark"] .al-upload-card.al-uploaded {
    border-color: var(--theme-color-text);
    background-color: var(--theme-color-soft);
}

html[data-theme="dark"] .al-upload-action {
    background-color: var(--bg-surface-sunken);
    color: var(--text-muted);
}

html[data-theme="dark"] .al-file-row-missing {
    border-color: color-mix(in srgb, var(--warning) 45%, transparent);
    background-color: var(--warning-soft);
}

html[data-theme="dark"] .al-flag-img {
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .al-tint-indigo,
html[data-theme="dark"] .al-badge-yes {
    background-color: rgba(129, 140, 248, .16);
    border-color: transparent;
    color: #a5b4fc;
}

html[data-theme="dark"] .al-tint-emerald,
html[data-theme="dark"] .al-badge-done {
    background-color: var(--success-soft);
    border-color: transparent;
    color: var(--success);
}

html[data-theme="dark"] .al-tint-sky {
    background-color: var(--info-soft);
    color: var(--info);
}

html[data-theme="dark"] .al-tint-rose {
    background-color: var(--danger-soft);
    color: var(--danger);
}

html[data-theme="dark"] .al-tint-amber,
html[data-theme="dark"] .al-badge-missing {
    background-color: var(--warning-soft);
    border-color: transparent;
    color: var(--warning);
}

html[data-theme="dark"] .al-badge-no {
    background-color: var(--neutral-soft);
    border-color: transparent;
    color: var(--neutral);
}

/* Language list: platform coverage chips (inline-styled by platformCoverageFormatter) */
html[data-theme="dark"] .al-coverage-done {
    background-color: var(--success-soft) !important;
    border-color: color-mix(in srgb, var(--success) 35%, transparent) !important;
    color: var(--success) !important;
}

html[data-theme="dark"] .al-coverage-missing {
    background-color: var(--danger-soft) !important;
    border-color: color-mix(in srgb, var(--danger) 35%, transparent) !important;
    color: var(--danger) !important;
}

html[data-theme="dark"] .al-text-rose,
html[data-theme="dark"] .al-dropdown-item-danger,
html[data-theme="dark"] .al-dropdown-item-danger i {
    color: var(--danger) !important;
}

html[data-theme="dark"] .al-text-indigo {
    color: #a5b4fc !important;
}

html[data-theme="dark"] .al-text-emerald,
html[data-theme="dark"] .al-file-status-done {
    color: var(--success) !important;
}

html[data-theme="dark"] .al-text-sky {
    color: var(--info) !important;
}

html[data-theme="dark"] .al-file-status-missing {
    color: var(--warning);
}

/* ---------- Tabs & pills ---------- */
html[data-theme="dark"] .nav-tabs {
    --bs-nav-tabs-border-color: var(--border-subtle);
    --bs-nav-tabs-link-active-bg: var(--bg-surface);
    --bs-nav-tabs-link-active-color: var(--text-primary);
    border-bottom-color: var(--border-subtle);
}

html[data-theme="dark"] .nav-tabs .nav-link {
    background: var(--bg-surface-sunken);
    color: var(--text-secondary);
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .nav-tabs .nav-link:hover,
html[data-theme="dark"] .nav-tabs .nav-link:focus {
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
    background-color: var(--bg-surface);
    color: var(--theme-color-text);
    border-color: var(--border-subtle) var(--border-subtle) var(--bg-surface);
}

html[data-theme="dark"] .nav-tabs .nav-link.disabled {
    color: var(--text-muted);
}

html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .tab-content.tab-content-vertical {
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .nav-pills .nav-link {
    color: var(--text-secondary);
}

html[data-theme="dark"] .nav-pills .nav-link.active,
html[data-theme="dark"] .nav-pills .show>.nav-link {
    background-color: var(--theme-color);
    color: var(--on-theme);
}

/* ---------- Pagination ---------- */
html[data-theme="dark"] .pagination {
    --bs-pagination-bg: var(--bg-surface);
    --bs-pagination-color: var(--text-body);
    --bs-pagination-border-color: var(--border-subtle);
    --bs-pagination-hover-bg: var(--bg-surface-sunken);
    --bs-pagination-hover-color: var(--text-primary);
    --bs-pagination-hover-border-color: var(--border-strong);
    --bs-pagination-focus-bg: var(--bg-surface-sunken);
    --bs-pagination-disabled-bg: var(--bg-surface);
    --bs-pagination-disabled-color: var(--text-muted);
    --bs-pagination-disabled-border-color: var(--border-subtle);
}

html[data-theme="dark"] .page-link,
html[data-theme="dark"] .pagination .page-item .page-link {
    background-color: var(--bg-surface);
    border-color: var(--border-subtle);
    color: var(--text-body);
}

html[data-theme="dark"] .page-link:hover,
html[data-theme="dark"] .pagination .page-item .page-link:hover {
    background-color: var(--bg-surface-sunken);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

html[data-theme="dark"] .page-item.active .page-link,
html[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
    color: var(--on-theme);
}

html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--bg-surface);
    border-color: var(--border-subtle);
    color: var(--text-muted);
}

/* ---------- Badges (comman.css tints tuned for dark surfaces) ---------- */
html[data-theme="dark"] .sub-badge-danger,
html[data-theme="dark"] .badge-danger {
    background-color: var(--danger-soft) !important;
    color: var(--danger) !important;
}

html[data-theme="dark"] .sub-badge-success,
html[data-theme="dark"] .badge-success {
    background-color: var(--success-soft) !important;
    color: var(--success) !important;
}

html[data-theme="dark"] .sub-badge-secondary,
html[data-theme="dark"] .sub-badge-not-generated,
html[data-theme="dark"] .badge-secondary {
    background-color: var(--neutral-soft) !important;
    color: var(--neutral) !important;
}

html[data-theme="dark"] .sub-badge-plan,
html[data-theme="dark"] .badge-plan {
    background-color: rgba(129, 140, 248, .18) !important;
    color: #a5b4fc !important;
}

html[data-theme="dark"] .sub-badge-primary,
html[data-theme="dark"] .badge-primary {
    background-color: var(--theme-color-soft) !important;
    color: var(--theme-color-text) !important;
}

html[data-theme="dark"] .sub-badge-info,
html[data-theme="dark"] .badge-info {
    background-color: var(--info-soft) !important;
    color: var(--info) !important;
}

html[data-theme="dark"] .sub-badge-warning,
html[data-theme="dark"] .badge-warning {
    background-color: var(--warning-soft) !important;
    color: var(--warning) !important;
}

html[data-theme="dark"] .badge-light,
html[data-theme="dark"] .badge-light-secondary {
    background-color: var(--neutral-soft) !important;
    color: var(--text-body) !important;
}

html[data-theme="dark"] .badge-dark {
    background-color: var(--bg-surface-raised) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .badge-light-success {
    background-color: var(--success-soft);
    color: var(--success);
}

html[data-theme="dark"] .badge-light-warning {
    background-color: var(--warning-soft);
    color: var(--warning);
}

html[data-theme="dark"] .badge-academic-year {
    background-color: var(--success-soft);
    color: var(--success);
}

html[data-theme="dark"] .badge-academic-year-non-default,
html[data-theme="dark"] .badge-semester-non-default {
    background-color: var(--warning-soft);
    color: var(--warning);
}

html[data-theme="dark"] .badge-semester {
    background-color: var(--info-soft);
    color: var(--info);
}

/* ---------- Alerts ---------- */
html[data-theme="dark"] .alert {
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .alert-danger {
    color: var(--danger) !important;
    background-color: var(--danger-soft) !important;
    border-color: color-mix(in srgb, var(--danger) 40%, transparent) !important;
}

html[data-theme="dark"] .alert-success {
    color: var(--success);
    background-color: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 40%, transparent);
}

html[data-theme="dark"] .alert-warning {
    color: var(--warning);
    background-color: var(--warning-soft);
    border-color: color-mix(in srgb, var(--warning) 40%, transparent);
}

html[data-theme="dark"] .alert-info {
    color: var(--info);
    background-color: var(--info-soft);
    border-color: color-mix(in srgb, var(--info) 40%, transparent);
}

html[data-theme="dark"] .alert-primary {
    color: var(--theme-color-text);
    background-color: var(--theme-color-soft);
    border-color: color-mix(in srgb, var(--theme-color-text) 40%, transparent);
}

html[data-theme="dark"] .alert-secondary,
html[data-theme="dark"] .alert-light,
html[data-theme="dark"] .alert-dark {
    color: var(--text-body);
    background-color: var(--bg-surface-sunken);
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .alert .alert-link,
html[data-theme="dark"] .alert strong {
    color: inherit;
}

/* ---------- Misc components ---------- */
html[data-theme="dark"] .progress {
    background-color: var(--bg-surface-sunken);
}

html[data-theme="dark"] .popover {
    --bs-popover-bg: var(--bg-surface-raised);
    --bs-popover-border-color: var(--border-subtle);
    --bs-popover-header-bg: var(--bg-surface-sunken);
    --bs-popover-header-color: var(--text-primary);
    --bs-popover-body-color: var(--text-body);
}

html[data-theme="dark"] .wizard>.content {
    background-color: var(--bg-surface-sunken);
    color: var(--text-body);
}

html[data-theme="dark"] .wizard>.steps .disabled a,
html[data-theme="dark"] .wizard>.actions .disabled a {
    background-color: var(--bg-surface-sunken);
    color: var(--text-muted);
}

html[data-theme="dark"] .draggableText {
    border-color: var(--border-strong);
}

html[data-theme="dark"] .fixed-bottom,
html[data-theme="dark"] .sticky-top.bg-white {
    background-color: var(--bg-surface);
}

html[data-theme="dark"] .btn_tag {
    color: var(--text-color, #fff) !important;
    background: var(--bg-surface-sunken, #2b2e4a) !important;
    border-color: var(--border-subtle, #40446b) !important;
}

html[data-theme="dark"] .btn_tag:hover {
    background: var(--theme-color-soft, #3a3e5b) !important;
    color: var(--theme-color-text, #fff) !important;
}