/* ============================================================================
   FDMS — Centralized Light / Dark Theme System
   Single source of truth for theming across the entire application.
   Toggle mechanism: <html class="light"> / <html class="dark">
   (matches the Rubick template's existing `.dark` variant convention —
   see /public/dist/css/app.css for the ~330 built-in `.dark …` rules this
   file builds on top of).
   Loaded AFTER app.css so these rules win ties by source order, and use
   `html.dark …` / `html.light …` selectors (higher specificity than the
   bare `:root`/class selectors most pages use) so they win outright.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------------------- */
:root {
    /* Brand accents used as opaque colored bands (table headers, gradient
       headers) stay constant — those never sit directly on the page
       background so they don't need to shift between themes. */
    --fdms-green: #0e3e0e;
    --fdms-teal: #0d4a56;
    --fdms-gold: #C9A84C;
    --fdms-gold-lt: #e2c06a;

    /* Light theme (default) */
    color-scheme: light;
    --fdms-page-bg: #eef1f4;
    --fdms-surface: #ffffff;
    --fdms-surface-alt: #f8faf8;
    --fdms-surface-2: #f1f5f9;
    --fdms-text: #1e293b;
    --fdms-text-strong: #0f172a;
    --fdms-text-soft: #334155;
    --fdms-muted: #64748b;
    --fdms-faint: #94a3b8;
    --fdms-danger: #c0392b;
    --fdms-amber: #7a5c00;
    --fdms-purple: #5a2d99;
    --fdms-border: rgba(14, 62, 14, 0.12);
    --fdms-border-soft: #e2e8f0;
    --fdms-input-bg: #ffffff;
    --fdms-input-border: rgba(14, 62, 14, 0.15);
    --fdms-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
    --fdms-shadow-lg: 0 10px 34px rgba(15, 23, 42, 0.1);
    --fdms-scrollbar-track: #f1f5f9;
    --fdms-scrollbar-thumb: #cbd5e1;
    --fdms-overlay: rgba(15, 23, 42, 0.45);
}

html.dark {
    color-scheme: dark;
    /* Not pure black anywhere — layered dark-navy surfaces for depth */
    --fdms-page-bg: #0a121d;
    --fdms-surface: #101b2a;
    --fdms-surface-alt: #16233664;
    --fdms-surface-2: #1a2a40;
    --fdms-text: #e6ecf3;
    --fdms-text-strong: #f7f9fb;
    --fdms-text-soft: #cdd7e3;
    --fdms-muted: #94a6bd;
    --fdms-faint: #71839c;
    /* Brand green/teal keep their identity but brighten enough to read on
       dark navy — used for text, focus rings and small accent lines. The
       opaque colored *bands* (headers) are hardcoded separately and are
       intentionally left alone since they don't need to change. */
    --fdms-green: #4ADE80;
    --fdms-teal: #5EEAD4;
    --fdms-danger: #f87171;
    --fdms-amber: #fbbf24;
    --fdms-purple: #c4b5fd;
    --fdms-border: rgba(255, 255, 255, 0.1);
    --fdms-border-soft: rgba(255, 255, 255, 0.1);
    --fdms-input-bg: #142235;
    --fdms-input-border: rgba(255, 255, 255, 0.14);
    --fdms-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
    --fdms-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.6);
    --fdms-scrollbar-track: #0f1a28;
    --fdms-scrollbar-thumb: #33455e;
    --fdms-overlay: rgba(2, 6, 12, 0.65);
}

/* Smooth theme-switch cross-fade, native compositor path (Chrome/Edge 111+).
   theme.js wraps the class flip in document.startViewTransition() when
   available — the browser snapshots the before/after frame and blends them
   on the GPU, so the click response is instant with no main-thread style
   recalculation, however large the page is. This just tunes the timing. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .32s;
    animation-timing-function: ease;
}

/* Fallback for browsers without View Transitions support (Firefox, older
   Safari): the old `* { transition }` approach, scoped to visual properties
   only so it never fights transform-based hover/parallax effects. Toggled
   on for ~400ms by theme.js, then removed. */
html.theme-transition,
html.theme-transition * {
    transition: background-color .28s ease, border-color .28s ease,
        color .28s ease, box-shadow .28s ease, fill .28s ease, stroke .28s ease !important;
}

/* ---------------------------------------------------------------------------
   2. Scrollbar
   --------------------------------------------------------------------------- */
html.dark ::-webkit-scrollbar-track { background: var(--fdms-scrollbar-track); }
html.dark ::-webkit-scrollbar-thumb { background: var(--fdms-scrollbar-thumb); }
html.dark { scrollbar-color: var(--fdms-scrollbar-thumb) var(--fdms-scrollbar-track); }

/* ---------------------------------------------------------------------------
   3. Theme toggle button (used in the app topbar and the auth pages)
   --------------------------------------------------------------------------- */
.fdms-theme-toggle {
    position: relative;
    width: 38px;
    height: 38px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--fdms-border-soft);
    background: var(--fdms-surface);
    color: var(--fdms-muted);
    cursor: pointer;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease,
        border-color .25s ease, color .25s ease, background .25s ease;
}
.fdms-theme-toggle:hover {
    color: var(--fdms-gold);
    border-color: var(--fdms-gold);
    transform: translateY(-2px) rotate(-8deg);
    box-shadow: 0 8px 20px rgba(201, 168, 76, 0.25);
}
.fdms-theme-toggle:active { transform: translateY(0) rotate(0deg) scale(.94); }
.fdms-theme-toggle svg { width: 17px; height: 17px; display: block; transition: opacity .2s ease, transform .3s ease; }
.fdms-theme-toggle .icon-sun, .fdms-theme-toggle .icon-moon { position: absolute; }
html.dark .fdms-theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(.5); }
html.dark .fdms-theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }
html.light .fdms-theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
html.light .fdms-theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); }

/* ---------------------------------------------------------------------------
   4. Base page chrome (works with the template's own `.dark .content` /
   `.dark .box` / `.dark .side-nav` / `.dark .top-nav` rules already in
   app.css — this layer fills the gaps: page canvas, generic bootstrap
   surfaces, and anything using plain `bg-white` / `text-dark` utilities).
   --------------------------------------------------------------------------- */
html.dark body { background-color: var(--fdms-page-bg); }
html.dark .card,
html.dark .modal-content {
    background-color: var(--fdms-surface) !important;
    color: var(--fdms-text) !important;
    border-color: var(--fdms-border) !important;
}
html.dark .bg-white { background-color: var(--fdms-surface) !important; }
html.dark .text-dark,
html.dark .text-black { color: var(--fdms-text) !important; }
html.dark .card-header,
html.dark .card-footer { background-color: var(--fdms-surface-alt) !important; border-color: var(--fdms-border) !important; }
html.dark hr { border-color: var(--fdms-border); opacity: .5; }
html.dark a { color: var(--fdms-gold-lt); }
html.dark ::placeholder { color: var(--fdms-faint) !important; opacity: 1; }

/* Generic table safety net (on top of the template's own `.dark .table`) */
html.dark table { color: var(--fdms-text); }
html.dark thead { color: var(--fdms-text-strong); }

/* Generic form safety net */
html.dark input:not([type=checkbox]):not([type=radio]):not([type=range]),
html.dark select,
html.dark textarea {
    background-color: var(--fdms-input-bg);
    border-color: var(--fdms-input-border);
    color: var(--fdms-text);
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--fdms-faint); }

/* ---------------------------------------------------------------------------
   5. Select2 (jQuery dropdown plugin used throughout every form)
   --------------------------------------------------------------------------- */
html.dark .select2-container--default .select2-selection--single {
    background-color: var(--fdms-input-bg) !important;
    border-color: var(--fdms-input-border) !important;
}
html.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--fdms-text) !important;
}
html.dark .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--fdms-faint) !important;
}
html.dark .select2-dropdown {
    background-color: var(--fdms-surface) !important;
    border-color: var(--fdms-input-border) !important;
    color: var(--fdms-text) !important;
    box-shadow: var(--fdms-shadow-lg);
}
html.dark .select2-container--default .select2-results__option {
    color: var(--fdms-text) !important;
    background-color: transparent !important;
}
html.dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--fdms-teal) !important;
    color: #fff !important;
}
html.dark .select2-search--dropdown .select2-search__field {
    background-color: var(--fdms-input-bg) !important;
    border-color: var(--fdms-input-border) !important;
    color: var(--fdms-text) !important;
}
html.dark .select2-container--default .select2-selection--multiple {
    background-color: var(--fdms-input-bg) !important;
    border-color: var(--fdms-input-border) !important;
}
html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--fdms-surface-2) !important;
    border-color: var(--fdms-input-border) !important;
    color: var(--fdms-text) !important;
}

/* ---------------------------------------------------------------------------
   6. jQuery UI datepicker (used on production / date-entry forms)
   --------------------------------------------------------------------------- */
html.dark .ui-widget.ui-widget-content {
    background: var(--fdms-surface);
    border-color: var(--fdms-input-border);
    color: var(--fdms-text);
}
html.dark .ui-datepicker .ui-datepicker-header {
    background: linear-gradient(135deg, var(--fdms-teal) 0%, var(--fdms-green) 100%);
    border: none;
}
html.dark .ui-datepicker .ui-datepicker-title,
html.dark .ui-datepicker-prev, html.dark .ui-datepicker-next { color: var(--fdms-gold-lt); }
html.dark .ui-datepicker td { color: var(--fdms-text); }
html.dark .ui-datepicker td a,
html.dark .ui-datepicker td span { color: var(--fdms-text); background: transparent; }
html.dark .ui-state-default, html.dark .ui-widget-content .ui-state-default {
    background: var(--fdms-surface-2); border-color: var(--fdms-border); color: var(--fdms-text);
}
html.dark .ui-state-hover, html.dark .ui-state-active {
    background: var(--fdms-gold) !important; color: #071E27 !important; border-color: var(--fdms-gold) !important;
}

/* ---------------------------------------------------------------------------
   7. SweetAlert2 popups (used for every success / error / confirm dialog)
   --------------------------------------------------------------------------- */
html.dark .swal2-popup {
    background: var(--fdms-surface) !important;
    color: var(--fdms-text) !important;
}
html.dark .swal2-title, html.dark .swal2-html-container { color: var(--fdms-text) !important; }
html.dark .swal2-close { color: var(--fdms-muted) !important; }
html.dark .swal2-input, html.dark .swal2-textarea {
    background: var(--fdms-input-bg) !important; color: var(--fdms-text) !important;
    border-color: var(--fdms-input-border) !important;
}

/* ---------------------------------------------------------------------------
   8. Feather / tooltip niceties
   --------------------------------------------------------------------------- */
html.dark [title]:hover::before { color: var(--fdms-gold-lt); }

/* ============================================================================
   9. Legacy custom "fdms-*" page components — dark-mode overrides.
   These class names are a consistent design system repeated verbatim across
   most CRUD pages (index / add / edit / wizard forms). They hardcode literal
   light-only colors, so we retheme the shared vocabulary centrally here
   instead of editing dozens of files. `html.dark X` beats a page's own
   bare `.X` rule on specificity alone, so no !important arms race is needed
   except where a page rule already used one.
   ============================================================================ */

/* -- shared tokens the pages already read from (border / muted text) -- */
html.dark { --fdms-border: rgba(255, 255, 255, 0.12); }

/* -- index / listing pages -- */
html.dark .fdms-topbar { border-color: rgba(255, 255, 255, .08); }
html.dark .fdms-top-btn-toggle {
    background: var(--fdms-surface-2) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    color: var(--fdms-text-soft) !important;
}
html.dark .fdms-top-btn-toggle:hover { border-color: var(--fdms-gold-lt) !important; color: var(--fdms-gold-lt) !important; background: rgba(255, 255, 255, .06); }
html.dark .fdms-filter-panel.open { border-color: rgba(255, 255, 255, .08); }
html.dark .fdms-filter-inner { background: linear-gradient(135deg, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, .015) 100%); }
html.dark .fdms-filter-label,
html.dark .fdms-context-label,
html.dark .fdms-per-page { color: var(--fdms-muted); }
html.dark .fdms-filter-input,
html.dark .fdms-per-page select {
    color: var(--fdms-text);
    background: var(--fdms-input-bg);
    border-color: rgba(255, 255, 255, .16);
}
html.dark .fdms-table-wrap { border-color: rgba(255, 255, 255, .1); box-shadow: var(--fdms-shadow-lg); }
html.dark .fdms-table tbody tr { border-bottom-color: rgba(255, 255, 255, .06); }
html.dark .fdms-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .025); }
html.dark .fdms-table tbody tr:nth-child(odd) { background: var(--fdms-surface); }
html.dark .fdms-table tbody tr:hover { background: rgba(201, 168, 76, .09) !important; }
html.dark .fdms-table tbody td { color: var(--fdms-text-soft); }
html.dark .fdms-serial { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: var(--fdms-gold-lt); }
html.dark .fdms-empty { color: var(--fdms-faint); }
html.dark .fdms-table-footer { background: var(--fdms-surface-alt); border-color: rgba(255, 255, 255, .08); }
html.dark .fdms-showing { color: var(--fdms-faint); background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .08); }
html.dark .fdms-section-head { border-color: rgba(255, 255, 255, .08); background: linear-gradient(90deg, rgba(255, 255, 255, .03) 0%, transparent 100%); }
html.dark .fdms-section-head h2 { color: var(--fdms-gold-lt); }
html.dark .fdms-context-bar { background: rgba(13, 74, 86, .12); border-color: rgba(255, 255, 255, .08); }
html.dark .fdms-context-value { color: var(--fdms-gold-lt); }

/* -- add / edit / wizard form cards -- */
html.dark .fdms-form-card,
html.dark .fdms-wizard-card,
html.dark .fdms-card { background: var(--fdms-surface) !important; box-shadow: var(--fdms-shadow-lg); }
html.dark .fdms-input,
html.dark .fdms-select,
html.dark .fdms-textarea,
html.dark .fdms-pw-group,
html.dark .fdms-pw-group input,
html.dark .fdms-phone-group,
html.dark .fdms-phone-group input {
    color: var(--fdms-text);
    background: var(--fdms-input-bg);
    border-color: rgba(255, 255, 255, .16);
}
html.dark .fdms-phone-group select { background: var(--fdms-surface-2); color: var(--fdms-gold-lt); border-color: rgba(255, 255, 255, .12); }
html.dark .fdms-pw-toggle { background: var(--fdms-surface-2); border-color: rgba(255, 255, 255, .1); color: var(--fdms-faint); }
html.dark .fdms-phone-preview { color: var(--fdms-muted); background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .08); }
html.dark .fdms-phone-preview span { color: var(--fdms-gold-lt); }
html.dark .fdms-hint { color: var(--fdms-faint); }
html.dark .fdms-footer { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .015); }
html.dark .fdms-btn-secondary { background: var(--fdms-surface-2) !important; border-color: rgba(255, 255, 255, .16) !important; color: var(--fdms-text-soft) !important; }
html.dark .fdms-btn-secondary:hover { background: var(--fdms-surface-alt) !important; }
html.dark .fdms-step-bar { background: linear-gradient(135deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .015)); border-color: rgba(255, 255, 255, .08); }
html.dark .fdms-step-label { color: var(--fdms-muted); }
html.dark .fdms-date-cell { background: rgba(13, 74, 86, .18); border-color: rgba(255, 255, 255, .1); color: var(--fdms-gold-lt); }

/* -- generic pill / badge / tag family: keep each page's brand hue but pull
   it toward a legible tint + brighten the ink so it still reads clearly on
   a dark surface, without needing to hand-tune ~40 one-off variants -- */
html.dark [class*="fdms-badge"],
html.dark [class*="-badge"],
html.dark [class*="fdms-status"],
html.dark [class*="fdms-pill"],
html.dark [class*="-pill"],
html.dark [class*="-tag"],
html.dark [class*="fdms-svc-"],
html.dark [class*="tax-type-"] {
    background-color: rgba(255, 255, 255, .08) !important;
    filter: brightness(1.55) saturate(1.15);
}

/* -- brand-teal (#123746) used as a border color on a few pages; on a dark
   surface this is nearly invisible, so brighten it just for dark mode -- */
html.dark .styled-link,
html.dark .styled-links,
html.dark input[type="checkbox"] {
    border-color: #5EEAD4 !important;
}
html.dark .styled-link:hover { color: #5EEAD4 !important; }

/* ---------------------------------------------------------------------------
   10. Yellow hover consistency — the app's brand yellow/gold hover accent
   (#f3d34c / var(--fdms-gold-lt)) must look and behave the same in both
   themes. The Rubick template ships its own `.dark …:hover` rule for the
   sidebar icon glow that silently swaps the yellow for a dark gray — undo
   that specifically, keeping every other color/behavior untouched.
   --------------------------------------------------------------------------- */
html.dark .side-nav>ul>li>.side-menu:hover:not(.side-menu--active):not(.side-menu--open) .side-menu__icon:before {
    background-color: #f3d34c !important;
}
html.dark .mobile-menu .mobile-menu-wrapper-custom .side-menu:hover {
    background-color: rgba(243, 211, 76, 0.12);
}

/* Topbar profile / notification dropdown items (Edit Profile, Logout, each
   notification row) — `.bg-theme-1-hover` already turns these yellow with
   black text on hover; `.dark-bg-dark-3-hover` was silently replacing that
   with a plain dark-gray highlight in Dark Mode. Force the same yellow,
   in both directions (transition lives on the base state, not just :hover,
   so the fade is smooth going in AND out). */
.dropdown-item.bg-theme-1-hover,
.notification-item.bg-theme-1-hover {
    transition: background-color .2s ease, color .2s ease;
}
html.dark .dropdown-item.dark-bg-dark-3-hover:hover,
html.dark .notification-item.dark-bg-dark-3-hover:hover {
    background-color: #f3d34c !important;
    color: #071e27 !important;
}