/* =============================================================================
   dark-mode.css — HRIS dark theme
   Load AFTER tokens.css, site.css / public-layout.css, in every layout.

   Most of the app already reads colour from CSS custom properties (Bootstrap's
   --bs-* vars, or this project's --hris-* tokens), so redefining those tokens
   under [data-bs-theme="dark"] (done in tokens.css) already re-themes the
   majority of the UI for free. This file covers everything Bootstrap's dark
   mode intentionally does NOT auto-adjust (brand colours, .text-dark,
   .bg-white/.bg-light, and this project's own color-mix(..., #fff) literals),
   plus the toggle button itself.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Theme toggle button — visible in both themes
   --------------------------------------------------------------------------- */
.topbar-btn-theme {
    color: var(--hris-bsgray-700);
}

    .topbar-btn-theme:hover {
        color: var(--bs-primary);
    }

.public-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    opacity: .85;
    transition: background .15s ease, opacity .15s ease;
}

    .public-theme-toggle:hover {
        background: rgba(255, 255, 255, .15);
        opacity: 1;
    }

.auth-theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-toast);
    padding: 0;
}

/* ---------------------------------------------------------------------------
   GLOBAL SAFETY NETS — these four apply everywhere in the app, admin AND
   public, without needing to know every view's markup. Bootstrap dark mode
   deliberately leaves brand colours (--bs-primary), .text-dark, and the
   literal .bg-white/.bg-light utilities untouched — so anything using them
   stays exactly as bright/dark as in light mode unless we override it here.
   --------------------------------------------------------------------------- */

/* 1) Soften brand-red text so it's readable on dark surfaces instead of
      full-saturation red-on-black. Buttons/badges (backgrounds) are NOT
      touched — only text usage of the primary colour. */
[data-bs-theme="dark"] .text-primary {
    color: color-mix(in srgb, var(--bs-primary) 55%, #fff) !important;
}

/* 2) Anchor tags with no explicit colour class inherit Bootstrap's link
      colour, which defaults to --bs-primary — same red-on-black problem for
      every plain <a> (table row links, sidebar "help" links, etc). */
[data-bs-theme="dark"] {
    --bs-link-color: color-mix(in srgb, var(--bs-primary) 55%, #fff);
    --bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 70%, #fff);
}

    /* 3) .text-dark is meant to be "always near-black" by Bootstrap's design —
      used across this app for topbar icons (hamburger, bell, user dropdown).
      On a dark topbar that's a dark icon on a dark background. Make it
      follow the theme's body text colour instead.

      CODE_REVIEW_2026-08-02 M21: .text-dark is ALSO Bootstrap's contrast partner
      for the two contextual backgrounds that stay bright in dark mode
      (--bs-warning-rgb / --bs-info-rgb are declared once in Bootstrap's :root and
      never re-themed), so the blanket override painted near-white text on #ffc107
      and #0dcaf0 — 1.32:1 and 1.59:1 on every `badge bg-warning text-dark` /
      `bg-info text-dark`. Excluding those two lets Bootstrap's own .text-dark
      (rgb(33,37,41)) win again: 9.47:1 on bg-warning, 7.88:1 on bg-info.
      .bg-white / .bg-light are NOT excluded — rules 4 below re-theme them to dark
      surfaces, so .text-dark must follow the body colour there. Nothing is added
      for .bg-*-subtle either: Bootstrap re-themes those to dark in dark mode. */
    [data-bs-theme="dark"] .text-dark:not(.bg-warning):not(.bg-info) {
        color: var(--bs-body-color) !important;
    }

    /* 4) .bg-white / .bg-light are literal (Bootstrap never swaps them for dark
      mode) — used for the admin <main> wrapper, public "quote" boxes,
      mobile drawers, etc. Anything using them keeps its light background
      while surrounding text goes near-white → invisible white-on-white. */
    [data-bs-theme="dark"] .bg-white {
        background-color: var(--hris-surface) !important;
    }

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

/* ---------------------------------------------------------------------------
   Fix the site.css / public-layout.css color-mix(..., #fff) / (..., #000)
   literals — these always mixed toward a fixed white/black regardless of
   theme, so they silently ignored dark mode.
   --------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
    --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 20%, var(--hris-surface));
    --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) 40%, var(--hris-surface));
    --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary) 60%, #fff);
}

    [data-bs-theme="dark"] .accordion-button:not(.collapsed) {
        background: color-mix(in srgb, var(--bs-primary) 15%, var(--hris-surface));
        color: var(--hris-text);
    }

    /* ---------------------------------------------------------------------------
       Admin — topbar / navbar
       --------------------------------------------------------------------------- */
    [data-bs-theme="dark"] .navbar-zindex {
        background: var(--hris-surface) !important;
        box-shadow: 0 1px 0 var(--hris-border), 0 2px 8px rgba(0, 0, 0, 0.35) !important;
    }

    [data-bs-theme="dark"] .topbar-btn {
        background: var(--hris-bsgray-100);
        border-color: var(--hris-bsgray-300);
    }

        [data-bs-theme="dark"] .topbar-btn:hover {
            background: var(--hris-bsgray-150);
            border-color: var(--hris-bsgray-500);
        }

    [data-bs-theme="dark"] .gs-input {
        background-color: var(--hris-gray-100);
        color: var(--hris-gray-800);
    }

        [data-bs-theme="dark"] .gs-input:focus {
            background-color: var(--hris-surface);
        }

    [data-bs-theme="dark"] .gs-results {
        background: var(--hris-surface);
        border-color: var(--hris-border);
    }

    [data-bs-theme="dark"] .gsp-hero,
    [data-bs-theme="dark"] .gsp-sidebar-card,
    [data-bs-theme="dark"] .gsp-group {
        background: var(--hris-surface);
        border-color: var(--hris-border);
    }

    [data-bs-theme="dark"] .gsp-form-group:focus-within {
        background: var(--hris-surface);
    }

    [data-bs-theme="dark"] .gsp-hero-title,
    [data-bs-theme="dark"] .gsp-form-input,
    [data-bs-theme="dark"] .gsp-empty-state h5,
    [data-bs-theme="dark"] .gsp-result-title {
        color: var(--hris-gray-800);
    }

    /* ---------------------------------------------------------------------------
       Dashboard — announcement banner. Had a hardcoded #fff background with no
       dark-mode counterpart.
       --------------------------------------------------------------------------- */
    [data-bs-theme="dark"] .db-announce {
        background: var(--hris-surface);
    }

    [data-bs-theme="dark"] .db-announce__title {
        color: var(--hris-text);
    }

    [data-bs-theme="dark"] .db-announce__text {
        color: var(--hris-gray-500);
    }

    /* ---------------------------------------------------------------------------
       Admin — dropdown internals (Quick Create / Shortcuts / Notifications).
       The .dropdown-menu shell itself is Bootstrap and already dark-mode aware;
       only the hand-rolled header/body/footer blocks used a literal white bg.
       --------------------------------------------------------------------------- */
    [data-bs-theme="dark"] .sc-header,
    [data-bs-theme="dark"] .sc-body,
    [data-bs-theme="dark"] .dropdown-menu-notifications .border-bottom,
    [data-bs-theme="dark"] .dropdown-menu-notifications .border-top {
        background: var(--hris-surface);
        border-color: var(--hris-border) !important;
    }

    [data-bs-theme="dark"] .sc-tab:hover {
        background: var(--hris-bsgray-100);
    }

    /* ---------------------------------------------------------------------------
       Admin — DataTables: the primary-tinted zebra striping / hover reads as a
       muddy pink on a dark row, so swap it for a neutral tint in dark mode.
       --------------------------------------------------------------------------- */
    [data-bs-theme="dark"] .dataTable tbody tr:nth-child(even) {
        background-color: rgba(255, 255, 255, .025);
    }

    [data-bs-theme="dark"] .dataTable tbody tr:hover {
        background-color: rgba(255, 255, 255, .05) !important;
    }

    [data-bs-theme="dark"] .approvals-table thead th,
    [data-bs-theme="dark"] .dataTable thead th {
        border-bottom-color: rgba(255, 255, 255, .08) !important;
    }

    [data-bs-theme="dark"] .approvals-table tbody td,
    [data-bs-theme="dark"] .dataTable tbody td {
        border-bottom-color: rgba(255, 255, 255, .06);
    }

    [data-bs-theme="dark"] .approvals-table tbody tr:hover {
        background-color: var(--hris-bsgray-100) !important;
    }

    [data-bs-theme="dark"] .dataTables_wrapper > .row:last-of-type {
        border-top-color: rgba(255, 255, 255, .08);
    }

    [data-bs-theme="dark"] .dataTables_wrapper .dt-processing,
    [data-bs-theme="dark"] .dataTables_wrapper .dataTables_processing {
        background: rgba(23, 27, 34, .9);
    }

    /* ---------------------------------------------------------------------------
       Table row-action icon buttons — outline/light buttons don't get restyled
       by Bootstrap's dark mode automatically, so they stay near-invisible
       against dark table rows until hover.
       --------------------------------------------------------------------------- */
    [data-bs-theme="dark"] .approvals-table .btn-outline-secondary,
    [data-bs-theme="dark"] .dataTable .btn-outline-secondary,
    [data-bs-theme="dark"] .approvals-table .btn-light,
    [data-bs-theme="dark"] .dataTable .btn-light {
        background-color: var(--hris-bsgray-100);
        border-color: var(--hris-border);
        color: var(--hris-text);
    }

        [data-bs-theme="dark"] .approvals-table .btn-outline-secondary:hover,
        [data-bs-theme="dark"] .dataTable .btn-outline-secondary:hover,
        [data-bs-theme="dark"] .approvals-table .btn-light:hover,
        [data-bs-theme="dark"] .dataTable .btn-light:hover {
            background-color: var(--hris-bsgray-150);
            border-color: var(--bs-primary);
            color: var(--bs-primary);
        }

        [data-bs-theme="dark"] .approvals-table .btn-outline-secondary:disabled,
        [data-bs-theme="dark"] .dataTable .btn-outline-secondary:disabled,
        [data-bs-theme="dark"] .approvals-table .btn-light:disabled,
        [data-bs-theme="dark"] .dataTable .btn-light:disabled {
            opacity: .35;
            background-color: transparent;
            border-color: var(--hris-border);
        }

    /* ---------------------------------------------------------------------------
       Outline buttons — Bootstrap intentionally leaves btn-outline-* colors
       unchanged in dark mode (they're meant to blend with any background), but
       against our dark surfaces they end up near-invisible until hover. Give
       every outline variant a visible border + text color on dark backgrounds.
       --------------------------------------------------------------------------- */
    [data-bs-theme="dark"] .btn-outline-secondary {
        color: var(--hris-gray-500);
        border-color: var(--hris-bsgray-500);
    }

        [data-bs-theme="dark"] .btn-outline-secondary:hover {
            background-color: var(--hris-bsgray-150);
            color: var(--hris-text);
            border-color: var(--hris-bsgray-500);
        }

        [data-bs-theme="dark"] .btn-outline-secondary:disabled {
            color: var(--hris-bsgray-500);
            border-color: var(--hris-bsgray-300);
            opacity: .4;
        }

    [data-bs-theme="dark"] .btn-outline-dark {
        color: var(--hris-gray-500);
        border-color: var(--hris-bsgray-500);
    }

        [data-bs-theme="dark"] .btn-outline-dark:hover {
            background-color: var(--hris-bsgray-150);
            color: var(--hris-text);
            border-color: var(--hris-gray-600);
        }

    [data-bs-theme="dark"] .btn-outline-primary {
        color: color-mix(in srgb, var(--bs-primary) 70%, #fff);
        border-color: color-mix(in srgb, var(--bs-primary) 55%, #fff);
    }

        [data-bs-theme="dark"] .btn-outline-primary:hover {
            background-color: rgba(var(--bs-primary-rgb), .15);
            color: #fff;
            border-color: var(--bs-primary);
        }

    [data-bs-theme="dark"] .btn-outline-success {
        color: #4ade80;
        border-color: #22c55e;
    }

        [data-bs-theme="dark"] .btn-outline-success:hover {
            background-color: rgba(34, 197, 94, .15);
            color: #86efac;
            border-color: #4ade80;
        }

    [data-bs-theme="dark"] .btn-outline-warning {
        color: #fbbf24;
        border-color: #d97706;
    }

        [data-bs-theme="dark"] .btn-outline-warning:hover {
            background-color: rgba(217, 119, 6, .18);
            color: #fcd34d;
            border-color: #fbbf24;
        }

    [data-bs-theme="dark"] .btn-outline-danger {
        color: #fca5a5;
        border-color: #dc2626;
    }

        [data-bs-theme="dark"] .btn-outline-danger:hover {
            background-color: rgba(220, 38, 38, .18);
            color: #fecaca;
            border-color: #f87171;
        }

    /* btn-group-sm outline buttons sit edge-to-edge (Bootstrap collapses their
   shared borders) — make sure the shared border between two dark-invisible
   buttons is still visible, not just the outer edge. */
    [data-bs-theme="dark"] .btn-group-sm > .btn-outline-secondary:not(:last-child),
    [data-bs-theme="dark"] .btn-group-sm > .btn-outline-dark:not(:last-child),
    [data-bs-theme="dark"] .btn-group-sm > .btn-outline-primary:not(:last-child),
    [data-bs-theme="dark"] .btn-group-sm > .btn-outline-success:not(:last-child),
    [data-bs-theme="dark"] .btn-group-sm > .btn-outline-warning:not(:last-child) {
        border-right-color: transparent;
    }

    /* ---------------------------------------------------------------------------
       Admin — DataTables: "Show X entries" length control. DataTables 2.x
       renders this as a native <select>/<label>, not a Bootstrap component, so
       it doesn't inherit dark-mode theming automatically the way .form-select
       does — style it explicitly here.
       --------------------------------------------------------------------------- */
    [data-bs-theme="dark"] .dt-length,
    [data-bs-theme="dark"] .dataTables_wrapper .dataTables_length {
        color: var(--hris-gray-400);
    }

        [data-bs-theme="dark"] .dt-length select,
        [data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select {
            background-color: var(--hris-bsgray-100);
            color: var(--hris-text);
            border-color: var(--hris-border);
        }

            [data-bs-theme="dark"] .dt-length select:focus,
            [data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select:focus {
                border-color: var(--bs-primary);
                box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12);
                outline: none;
            }

    /* Sticky header row — bump contrast against the darker table body so it
       doesn't read as a leftover light band across the top of the table. */
    [data-bs-theme="dark"] .dataTable thead th {
        background: var(--hris-bsgray-150) !important;
        color: var(--hris-gray-600) !important;
    }

        [data-bs-theme="dark"] .dataTable thead th.sorting:hover,
        [data-bs-theme="dark"] .dataTable thead th.sorting_asc:hover,
        [data-bs-theme="dark"] .dataTable thead th.sorting_desc:hover {
            background: rgba(var(--bs-primary-rgb), 0.1) !important;
        }

    /* ---------------------------------------------------------------------------
       Select2 — searchable dropdowns (Department/Branch filters, duplicate
       detector inputs, etc). Select2 ships its own fixed light-theme CSS and
       has no dark-mode awareness at all, so every part of its popup/search/
       results panel needs an explicit override here.
       --------------------------------------------------------------------------- */

    /* Closed/collapsed control — matches the plain .form-select styling */
    [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
        background-color: var(--hris-bsgray-100);
        border-color: var(--hris-border);
        color: var(--hris-text);
    }

    [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered {
        color: var(--hris-text) !important;
    }

    [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__placeholder {
        color: var(--hris-gray-400) !important;
    }

    [data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--focus .select2-selection,
    [data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--open .select2-selection {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12);
    }

    [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__arrow b {
        border-color: var(--hris-gray-400) transparent transparent transparent;
    }

    /* Multi-select tags/chips, if used anywhere */
    [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__choice {
        background-color: var(--hris-bsgray-150);
        border-color: var(--hris-border);
        color: var(--hris-text);
    }

    [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__choice__remove {
        color: var(--hris-gray-400);
    }

    /* Dropdown popup panel (the floating white box) */
    [data-bs-theme="dark"] .select2-dropdown {
        background-color: var(--hris-surface);
        border-color: var(--hris-border);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    }

    /* Base results panel background (was missing — only highlighted/selected
       states were covered, so default rows stayed on Select2's native white
       background with barely-visible grey text). */
    [data-bs-theme="dark"] .select2-results > .select2-results__options {
        background-color: var(--hris-surface);
    }

    [data-bs-theme="dark"] .select2-results__option {
        background-color: var(--hris-surface);
        color: var(--hris-text) !important;
    }

    /* Search input inside the popup — select2-bootstrap-5-theme.min.css sets a
       fixed white background directly on .select2-search__field with higher
       specificity than a bare override, so match its own selector shape and
       force it with !important. */
    [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field,
    [data-bs-theme="dark"] .select2-search--dropdown .select2-search__field.form-control {
        background-color: var(--hris-bsgray-100) !important;
        border-color: var(--hris-border) !important;
        color: var(--hris-text) !important;
    }

        [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field::placeholder {
            color: var(--hris-gray-400) !important;
        }

        [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus {
            border-color: var(--bs-primary) !important;
            box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12) !important;
            outline: none !important;
        }

        /* Wrapper around the search field — select2-bootstrap-5-theme.min.css gives
           this its own padded white background, which shows through as a white
           frame around the (now-dark) input itself. */
        [data-bs-theme="dark"] .select2-search--dropdown {
            background-color: var(--hris-surface) !important;
        }

    /* Results list */
    [data-bs-theme="dark"] .select2-results__option {
        color: var(--hris-text);
    }

    [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted {
        background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
        color: var(--hris-text) !important;
    }

    [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
        background-color: var(--hris-bsgray-150);
        color: var(--hris-text);
    }

    [data-bs-theme="dark"] .select2-results__option .select2-results__group {
        color: var(--hris-gray-400);
        background: var(--hris-bsgray-100);
    }

    [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__message {
        color: var(--hris-gray-400);
    }

    /* Duplicate-detector highlight (tokens.css .dup-highlight-*) already has its
       own fixed light colours — darken them slightly so the highlighted text
       stays legible against the now-dark Select2 results list. */
    [data-bs-theme="dark"] .dup-highlight-match {
        background-color: rgba(13, 110, 253, 0.35);
    }

    [data-bs-theme="dark"] .dup-highlight-exact {
        background-color: rgba(220, 53, 69, 0.35);
    }

    /* Disabled state */
    [data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--disabled .select2-selection {
        background-color: var(--hris-bsgray-100);
        opacity: .65;
    }


    /* ---------------------------------------------------------------------------
       Admin — Approvals / role & permission pages (literal whites + faint
       borders that were tuned for a light background)
       --------------------------------------------------------------------------- */
    [data-bs-theme="dark"] .approvals-section .card-header,
    [data-bs-theme="dark"] .emp-detail-tab-nav,
    [data-bs-theme="dark"] .role-form-section,
    [data-bs-theme="dark"] .perm-category-header,
    [data-bs-theme="dark"] .perm-category-body,
    [data-bs-theme="dark"] .perm-item {
        background: var(--hris-surface) !important;
        border-color: var(--hris-border);
    }

    [data-bs-theme="dark"] .ui-toast {
        background: var(--hris-surface);
        color: var(--hris-gray-800);
    }

    /* ---------------------------------------------------------------------------
       Public site — hero/login/help pages with literal light backgrounds
       --------------------------------------------------------------------------- */
    [data-bs-theme="dark"] .login-page {
        background: var(--hris-surface-muted);
    }

        [data-bs-theme="dark"] .login-page::before {
            opacity: .6;
        }

    [data-bs-theme="dark"] .login-card {
        background: var(--hris-surface);
        border-color: var(--hris-border);
    }

    [data-bs-theme="dark"] .login-logo-badge h1 {
        color: var(--hris-text);
    }

    [data-bs-theme="dark"] .login-input-wrap input {
        background: var(--hris-bsgray-100);
        color: var(--hris-text);
        border-color: var(--hris-border);
    }

        [data-bs-theme="dark"] .login-input-wrap input:focus {
            background: var(--hris-surface);
        }

    [data-bs-theme="dark"] .help-toc-panel,
    [data-bs-theme="dark"] .help-mobile-toc-toggle,
    [data-bs-theme="dark"] .help-mobile-toc-drawer,
    [data-bs-theme="dark"] .manual-body {
        background: var(--hris-surface);
        border-color: var(--hris-border);
    }

    [data-bs-theme="dark"] .help-page-header {
        background: linear-gradient(135deg, color-mix(in srgb, var(--bs-primary) 12%, var(--hris-surface)) 0%, var(--hris-surface) 60%);
        border-color: color-mix(in srgb, var(--bs-primary) 25%, var(--hris-border));
    }

    [data-bs-theme="dark"] .help-page-header-text h1,
    [data-bs-theme="dark"] .login-logo-badge h1,
    [data-bs-theme="dark"] .manual-body h1,
    [data-bs-theme="dark"] .manual-body h2,
    [data-bs-theme="dark"] .manual-body h3,
    [data-bs-theme="dark"] .manual-body strong {
        color: var(--hris-text);
    }

    [data-bs-theme="dark"] .manual-body p,
    [data-bs-theme="dark"] .manual-body li,
    [data-bs-theme="dark"] .manual-body table td,
    [data-bs-theme="dark"] .manual-body blockquote {
        color: var(--hris-gray-700);
    }

    [data-bs-theme="dark"] .manual-body table th {
        background: color-mix(in srgb, var(--bs-primary) 14%, var(--hris-bsgray-100));
        color: var(--hris-text);
        border-bottom-color: color-mix(in srgb, var(--bs-primary) 25%, var(--hris-border));
    }

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

    [data-bs-theme="dark"] .manual-body code {
        background: var(--hris-bsgray-100);
        color: color-mix(in srgb, var(--bs-primary) 65%, #fff);
    }

/* pre/code blocks keep a dark background in BOTH themes (common convention),
   so their text needs to stay light regardless of the active theme */
.manual-body pre code {
    color: #cbd5e1;
}

[data-bs-theme="dark"] .manual-body blockquote {
    background: color-mix(in srgb, var(--bs-primary) 10%, var(--hris-surface));
    border-left-color: var(--bs-primary);
}

[data-bs-theme="dark"] .manual-body img {
    border-color: var(--hris-border);
}

/* ---------------------------------------------------------------------------
   Auth pages (ForgotPassword / ResetPassword / Confirmation)
   --------------------------------------------------------------------------- */
[data-bs-theme="dark"] .auth-page-shell {
    background: var(--hris-surface);
}

    [data-bs-theme="dark"] .auth-page-shell::before {
        opacity: .7;
    }

[data-bs-theme="dark"] .auth-card {
    background: var(--hris-surface);
    border-color: var(--hris-border);
}

[data-bs-theme="dark"] .auth-input-wrap input {
    background: var(--hris-bsgray-100);
    border-color: var(--hris-border);
    color: var(--hris-text);
}

    [data-bs-theme="dark"] .auth-input-wrap input:focus {
        background: var(--hris-surface);
    }

[data-bs-theme="dark"] .auth-theme-toggle {
    background: var(--hris-bsgray-100);
    border-color: var(--hris-border);
    color: var(--hris-text);
}