/* =============================================================================
   Agnus Hotel — Theme Tokens (Light / Dark / Auto)
   -----------------------------------------------------------------------------
   This file is the single source of truth for the app's color tokens.
   It must be loaded AFTER bootstrap.css and mdb.min.css so it can win the
   cascade.

   Activation:
       <html data-bs-theme="light|dark"> is set by static/js/theme.js (and a
       FOUC-prevention inline script in pos_base.html). Bootstrap 5.3 reacts
       to data-bs-theme natively; we add `[data-theme="dark"]` as a mirror
       for any non-Bootstrap CSS that wants to key off the same attribute.

   Naming:
       --bs-*         Bootstrap-native tokens (we override values, not names)
       --app-*        Project-specific neutrals/semantics
       --pos-*        Existing POS brand tokens (kept for compatibility)
       --primary-color  Legacy token used by per-template <style> blocks
   ============================================================================= */


/* -----------------------------------------------------------------------------
   LIGHT THEME (default)
   ----------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
    color-scheme: light;

    /* App-level neutrals --------------------------------------------------- */
    --app-surface: #ffffff;
    /* Cards, panels                         */
    --app-surface-2: #f8f9fa;
    /* Page background, subtle fills         */
    --app-elevated: #ffffff;
    /* Modals, popovers, dropdowns           */
    --app-text: #212529;
    --app-text-muted: #6c757d;
    --app-border: #dee2e6;
    --app-link: #0d6efd;
    --app-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

    /* Semantic colors (mirror Bootstrap defaults so apps can use either) --- */
    --app-success: #198754;
    --app-warning: #ffc107;
    --app-danger: #dc3545;
    --app-info: #0dcaf0;

    /* Legacy brand tokens (kept for backwards compatibility) --------------- */
    --primary-color: #2c3e50;
    --pos-primary: #20b2aa;
    /* teal — existing POS brand            */
    --pos-primary-dark: #008b8b;
    --pos-secondary: #48d1cc;
    --pos-accent: #40e0d0;

    /* Page-header / hero accent strip -------------------------------------- */
    --app-accent: linear-gradient(135deg, #20b2aa 0%, #008b8b 100%);
    --app-accent-solid: #20b2aa;
}


/* -----------------------------------------------------------------------------
   DARK THEME
   ----------------------------------------------------------------------------- */
 [data-bs-theme="dark"],
 [data-theme="dark"] {
    color-scheme: dark;

    /* Override Bootstrap 5.3 tokens that don't auto-flip to our taste ------ */
    --bs-body-bg: #23262b;
    --bs-body-color: #e9ecef;
    --bs-body-color-rgb: 233, 236, 239;
    --bs-body-bg-rgb: 35, 38, 43;
    --bs-secondary-bg: #2a2e33;
    --bs-secondary-bg-rgb: 42, 46, 51;
    --bs-tertiary-bg: #282b30;
    --bs-tertiary-bg-rgb: 40, 43, 48;
    --bs-border-color: #3a3f45;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(233, 236, 239, 0.75);
    --bs-tertiary-color: rgba(233, 236, 239, 0.5);
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-heading-color: #ffffff;
    --bs-code-color: #ff8eb1;
    --bs-highlight-bg: #4d3800;

    /* App-level neutrals --------------------------------------------------- */
    --app-surface: #292c31;
    --app-surface-2: #23262b;
    --app-elevated: #32353a;
    --app-text: #e9ecef;
    --app-text-muted: #b8bec6;
    --app-border: #3a3f45;
    --app-link: #6ea8fe;
    --app-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.45);

    /* Semantic colors — slightly desaturated for dark surfaces ------------- */
    --app-success: #4ade80;
    --app-warning: #fbbf24;
    --app-danger: #f87171;
    --app-info: #38bdf8;

    /* Legacy brand tokens -------------------------------------------------- */
    --primary-color: #4a6fa5;
    --pos-primary: #2dd4bf;
    /* brighter teal for dark surfaces      */
    --pos-primary-dark: #14b8a6;
    --pos-secondary: #5eead4;
    --pos-accent: #67e8f9;

    /* Page-header accent — slightly darker teal so white text stays vivid */
    --app-accent: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
    --app-accent-solid: #14b8a6;
}


/* -----------------------------------------------------------------------------
   DEFENSIVE OVERRIDES FOR DARK MODE
   -----------------------------------------------------------------------------
   Many components in the codebase use hardcoded light-only colors via inline
   <style> blocks (Plan 3 will migrate them). These selectors keep the most
   common Bootstrap and MDB components legible in dark mode in the meantime.
   ----------------------------------------------------------------------------- */
[data-bs-theme="dark"] body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Cards / panels --------------------------------------------------------- */
[data-bs-theme="dark"] .card {
    background-color: var(--app-surface);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

/* Bootstrap utility backgrounds — flip in dark mode --------------------- */
/* Many templates use bg-white / bg-light on cards, panels, KPI tiles, and
   alternating table rows. Bootstrap 5.3 keeps these literally white/#f8f9fa
   even under data-bs-theme="dark", so we override them explicitly.        */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-body {
    background-color: var(--app-surface) !important;
    color: var(--bs-body-color) !important;
}

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

/* Children of .bg-light containers (form labels, helper text, small) must
   also flip — Bootstrap doesn't reset their color so they keep inheriting
   from the document, which is fine, but a few module CSS files force dark
   text via specificity. Force readable color here.                        */
[data-bs-theme="dark"] .bg-light label,
[data-bs-theme="dark"] .bg-light .form-label,
[data-bs-theme="dark"] .bg-light .col-form-label,
[data-bs-theme="dark"] .bg-light small,
[data-bs-theme="dark"] .bg-light .form-text {
    color: var(--bs-body-color) !important;
}

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

/* Bootstrap 4 / MDB hard-code .text-muted to #6c757d !important — completely
   invisible on dark surfaces. Override globally to a readable light grey. */
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] small.text-muted,
[data-bs-theme="dark"] span.text-muted,
[data-bs-theme="dark"] p.text-muted {
    color: #adb5bd !important;
}

/* mdb.min.css hard-codes .form-label/.col-form-label color: rgba(0,0,0,.6).
   Force theme body color in dark mode globally. */
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .col-form-label,
[data-bs-theme="dark"] form label {
    color: var(--bs-body-color) !important;
}

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

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

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

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

/* Modals, popovers, offcanvas ------------------------------------------- */
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas {
    background-color: var(--app-elevated);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

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

[data-bs-theme="dark"] .popover {
    --bs-popover-bg: var(--app-elevated);
    --bs-popover-border-color: var(--bs-border-color);
    --bs-popover-header-bg: var(--bs-tertiary-bg);
    --bs-popover-body-color: var(--bs-body-color);
    --bs-popover-header-color: var(--bs-emphasis-color);
}

/* Dropdowns -------------------------------------------------------------- */
[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: var(--app-elevated);
    --bs-dropdown-color: var(--bs-body-color);
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
    --bs-dropdown-link-hover-color: var(--bs-emphasis-color);
    --bs-dropdown-divider-bg: var(--bs-border-color);
    --bs-dropdown-header-color: var(--bs-secondary-color);
    --bs-dropdown-border-color: var(--bs-border-color);
    /* mdb.min.css and the legacy bootstrap.css hardcode background:#fff and
       color:#212529 directly on .dropdown-menu / .dropdown-item, bypassing the
       BS5 var system. Force the dark palette explicitly. */
    background-color: var(--app-elevated) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item-text {
    color: var(--bs-body-color) !important;
    background-color: transparent !important;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item:focus {
    color: var(--bs-emphasis-color) !important;
    background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item.active,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item:active {
    color: #fff !important;
    background-color: var(--bs-primary, #0d6efd) !important;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item.text-danger {
    color: #ff6b6b !important;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-header,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item-text {
    color: var(--bs-secondary-color) !important;
}

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

/* List groups ------------------------------------------------------------ */
[data-bs-theme="dark"] .list-group {
    --bs-list-group-bg: var(--app-surface);
    --bs-list-group-color: var(--bs-body-color);
    --bs-list-group-border-color: var(--bs-border-color);
    --bs-list-group-action-hover-bg: var(--bs-tertiary-bg);
}

/* MDB hard-codes background:#fff and color:#4f4f4f directly on .list-group-item
   (bypasses the BS5 var system), so override it explicitly in dark mode. */
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--app-surface) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .list-group-item-action:hover {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Tables ---------------------------------------------------------------- */
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.07);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-hover-color: var(--bs-body-color);
    /* MDB hard-codes color:#4f4f4f directly on .table — must override here */
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .table> :not(caption)>*>* {
    background-color: transparent;
    color: var(--bs-body-color) !important;
}

/* MDB also sets color on hover — restore readable color */
[data-bs-theme="dark"] .table-hover>tbody>tr:hover>*,
[data-bs-theme="dark"] .table-hover>tbody>tr:hover>* a {
    color: var(--bs-body-color) !important;
}

/* Catch tables that don't use .table at all but rely on browser defaults
   or inline striping with white. Force any inline white row bg to surface. */
[data-bs-theme="dark"] table {
    color: var(--bs-body-color);
}

/* NOTE: do NOT use [style*="white"] here — the substring matcher catches
   `white-space:nowrap` etc and overrides table-variant row backgrounds.
   The catch-all block below already handles inline white backgrounds via
   precise `background:`/`background-color:` prefixes. */
[data-bs-theme="dark"] tbody tr:nth-of-type(odd)>* {
    --bs-table-accent-bg: rgba(255, 255, 255, 0.03);
}

/* Catch-all: any element with an inline white background.
   Some templates still set background:white sticky cells, etc.        */
[data-bs-theme="dark"] [style*="background:#fff"]:not(.brand-keep),
[data-bs-theme="dark"] [style*="background: #fff"]:not(.brand-keep),
[data-bs-theme="dark"] [style*="background:#FFF"]:not(.brand-keep),
[data-bs-theme="dark"] [style*="background: #FFF"]:not(.brand-keep),
[data-bs-theme="dark"] [style*="background:white"]:not(.brand-keep),
[data-bs-theme="dark"] [style*="background: white"]:not(.brand-keep),
[data-bs-theme="dark"] [style*="background-color:#fff"]:not(.brand-keep),
[data-bs-theme="dark"] [style*="background-color: #fff"]:not(.brand-keep),
[data-bs-theme="dark"] [style*="background-color:white"]:not(.brand-keep),
[data-bs-theme="dark"] [style*="background-color: white"]:not(.brand-keep) {
    background-color: var(--app-surface) !important;
    background-image: none !important;
    color: var(--bs-body-color) !important;
}

/* Same idea for .bg-light / .bg-white set as a card-header (already
   covered above) plus any stray inline `style="background:#f8f9fa"`. */
[data-bs-theme="dark"] [style*="background:#f8f9fa"],
[data-bs-theme="dark"] [style*="background: #f8f9fa"],
[data-bs-theme="dark"] [style*="background-color:#f8f9fa"],
[data-bs-theme="dark"] [style*="background-color: #f8f9fa"],
[data-bs-theme="dark"] [style*="background:#fafbfc"],
[data-bs-theme="dark"] [style*="background: #fafbfc"] {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* .data-table — custom report table used in Dashboard, Guest, etc.
   Several templates set hardcoded zebra/hover with !important. Win the
   cascade in dark mode by being more specific AND using !important.    */
[data-bs-theme="dark"] .data-table thead th {
    background: var(--bs-tertiary-bg) !important;
    color: var(--bs-emphasis-color) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .data-table tbody td {
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
    background: transparent !important;
}

[data-bs-theme="dark"] .data-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.04) !important;
}

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

/* Generic table-hover rescue for dark tables (`.table-dark` or any table
   inside a dark surface) — give a visible hover lift.                    */
[data-bs-theme="dark"] .table-hover>tbody>tr:hover>* {
    --bs-table-accent-bg: rgba(255, 255, 255, 0.09) !important;
    color: var(--bs-emphasis-color);
}

[data-bs-theme="dark"] .table-dark.table-hover>tbody>tr:hover>* {
    --bs-table-accent-bg: rgba(255, 255, 255, 0.12) !important;
}

/* Page header (used on the home dashboard) — uses var(--app-accent),
   which is defined in :root. NO !important so per-module page-header
   colors (e.g. stock_management.css uses orange) can win.            */
.page-header {
    background: var(--app-accent, var(--app-accent-solid, #20b2aa));
}

.page-header,
.page-header * {
    color: #ffffff;
}

.page-header .text-muted,
.page-header small {
    color: rgba(255, 255, 255, 0.8);
}

/* Forms ----------------------------------------------------------------- */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] textarea.form-control,
[data-bs-theme="dark"] input.form-control {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-link-color);
    box-shadow: 0 0 0 0.25rem rgba(110, 168, 254, 0.25);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--bs-tertiary-color);
}

[data-bs-theme="dark"] .input-group-text {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* Buttons — outline variants -------------------------------------------- */
/* Bootstrap's outline-secondary uses #6c757d for color AND border, which is
   near-invisible on dark surfaces. Lighten both to a readable grey/slate.
   Hover/active states keep a solid fill so the button is clearly clickable. */
[data-bs-theme="dark"] .btn-outline-secondary {
    color: #ced4da !important;
    border-color: #6c757d !important;
    background-color: transparent !important;
}

[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-secondary:focus {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

[data-bs-theme="dark"] .btn-outline-secondary.active,
[data-bs-theme="dark"] .btn-outline-secondary:active,
[data-bs-theme="dark"] .btn-check:checked+.btn-outline-secondary,
[data-bs-theme="dark"] .show>.btn-outline-secondary.dropdown-toggle {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

[data-bs-theme="dark"] .btn-outline-secondary.disabled,
[data-bs-theme="dark"] .btn-outline-secondary:disabled {
    color: #6c757d !important;
    border-color: #495057 !important;
    background-color: transparent !important;
}

/* Pagination ------------------------------------------------------------ */
[data-bs-theme="dark"] .page-link {
    background-color: var(--app-surface);
    color: var(--bs-link-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-tertiary-color);
}

/* Breadcrumb / navs / tabs --------------------------------------------- */
[data-bs-theme="dark"] .breadcrumb {
    --bs-breadcrumb-divider-color: var(--bs-tertiary-color);
}

[data-bs-theme="dark"] .nav-tabs {
    --bs-nav-tabs-link-active-bg: var(--app-surface);
    --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
    --bs-nav-tabs-border-color: var(--bs-border-color);
    --bs-nav-tabs-link-hover-border-color: var(--bs-border-color);
}

/* Generic nav-tabs / nav-pills readability — Bootstrap defaults make
   inactive tabs use --bs-link-color (blue) which clashes with cards.
   Force a body-color text for inactive tabs in BOTH modes so all three
   tabs are equally readable.                                            */
.nav-tabs .nav-link,
.nav-pills .nav-link {
    color: var(--bs-body-color);
}

.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
    color: var(--bs-emphasis-color);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--bs-emphasis-color);
    font-weight: 600;
}

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

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    color: var(--bs-emphasis-color);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--app-surface);
    color: var(--bs-emphasis-color);
    border-color: var(--bs-border-color) var(--bs-border-color) var(--app-surface);
}

/* Links — Bootstrap 4 / MDB hard-code a { color: #007bff } bypassing the
   CSS variable system, so dark mode gets near-invisible navy. Override
   globally to the light-blue token set in the dark theme vars above.   */
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.nav-btn):not(.page-header-btn):not(.system-btn) {
    color: var(--bs-link-color, #6ea8fe);
}
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.nav-btn):not(.page-header-btn):not(.system-btn):hover {
    color: var(--bs-link-hover-color, #8bb9fe);
}

/* System-btn tiles — coloured gradient backgrounds always use white text */
[data-bs-theme="dark"] .system-btn,
[data-bs-theme="dark"] .system-btn:hover,
[data-bs-theme="dark"] .system-btn:focus {
    color: #fff !important;
}

/* Alerts (preserve semantic colors but tone backgrounds for dark) ------ */
[data-bs-theme="dark"] .alert {
    border-color: var(--bs-border-color);
}

/* Hide light-mode-only logo variants in dark, etc. --------------------- */
[data-bs-theme="dark"] .theme-light-only {
    display: none !important;
}

[data-bs-theme="light"] .theme-dark-only,
:root .theme-dark-only {
    display: none !important;
}


/* -----------------------------------------------------------------------------
   MODULE CSS DARK-MODE OVERRIDES
   -----------------------------------------------------------------------------
   The shared module stylesheets (fl8-compact.css, payroll_common.css,
   guest_management.css, stock_management.css, accounts_management.css, etc.)
   were written before dark mode existed and hardcode light surface colors.
   The block below redirects those classes to theme tokens when the active
   theme is dark, without rewriting each module file. Each module's BRAND
   color (gradients, primary buttons) is intentionally preserved — only
   structural neutrals (cards, tables, borders, body text) are flipped.
   ============================================================================= */

/* --- FL8 compact (shared report toolkit) -------------------------------- */
[data-bs-theme="dark"] .fl8-wrap,
[data-bs-theme="dark"] .fl8-section,
[data-bs-theme="dark"] .fl8-page-header {
    background: transparent;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .fl8-card,
[data-bs-theme="dark"] .fl8-filter-card,
[data-bs-theme="dark"] .fl8-table-wrap,
[data-bs-theme="dark"] .fl8-stat,
[data-bs-theme="dark"] .fl8-stats>* {
    background: var(--app-surface) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .fl8-card-title,
[data-bs-theme="dark"] .fl8-section-header,
[data-bs-theme="dark"] .fl8-name-link,
[data-bs-theme="dark"] .fl8-amount,
[data-bs-theme="dark"] .fl8-code {
    color: var(--bs-emphasis-color) !important;
}

/* fl8-code (booking reference pill) — bg #e8eeff is near-white in dark
   mode; swap to a translucent accent tint and use accent text color. */
[data-bs-theme="dark"] .fl8-code {
    background: rgba(99, 132, 255, 0.18) !important;
    color: #a8b9ff !important;
}

[data-bs-theme="dark"] .fl8-code:hover {
    color: #c8d2ff !important;
}

[data-bs-theme="dark"] .fl8-date,
[data-bs-theme="dark"] .fl8-empty {
    color: var(--bs-secondary-color) !important;
}

/* The notice carries a pale yellow ground of its own that its dark text is
   readable on. Recolouring only the text left light grey on pale yellow, so
   the surface has to move with it. */
[data-bs-theme="dark"] .fl8-notice {
    background: rgba(224, 168, 0, 0.12) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .fl8-table {
    background: var(--app-surface) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .fl8-table th {
    background: var(--bs-tertiary-bg) !important;
    color: var(--bs-emphasis-color) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .fl8-table thead th.th-key {
    background: rgba(99, 132, 255, 0.18) !important;
    color: #a8b9ff !important;
    border-color: var(--bs-border-color) !important;
}

/* Guest list .gst-table dark-mode overrides — same pattern as fl8-table */
[data-bs-theme="dark"] .gst-table thead th {
    background: var(--bs-tertiary-bg) !important;
    color: var(--bs-emphasis-color) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .gst-table thead th.th-key {
    background: rgba(99, 132, 255, 0.18) !important;
    color: #a8b9ff !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .gst-table tbody td {
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .gst-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .gst-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .gst-table td.td-key-name,
[data-bs-theme="dark"] .gst-table td.td-key-name a {
    color: #a8b9ff !important;
}

[data-bs-theme="dark"] .gst-table td.td-date {
    color: var(--bs-secondary-color, #adb5bd) !important;
}

[data-bs-theme="dark"] .fl8-table td {
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

/* Visible alternating stripe in dark mode — --bs-tertiary-bg is too close
   to the surface color, so use a translucent white overlay instead. */
[data-bs-theme="dark"] .fl8-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .fl8-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .fl8-pill,
[data-bs-theme="dark"] .fl8-pills>* {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .fl8-pill.active,
[data-bs-theme="dark"] .fl8-pills .active {
    background: var(--app-accent, var(--pos-primary)) !important;
    color: #fff !important;
    border-color: var(--app-accent, var(--pos-primary)) !important;
}

[data-bs-theme="dark"] .fl8-btn-ghost {
    background: transparent;
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* fl8-hdr-btn color is forced to #fff !important in fl8-compact.css */

/* --- Payroll common ----------------------------------------------------- */
[data-bs-theme="dark"] .dashboard-card,
[data-bs-theme="dark"] .info-card,
[data-bs-theme="dark"] .stat-card,
[data-bs-theme="dark"] .financial-card,
[data-bs-theme="dark"] .summary-section,
[data-bs-theme="dark"] .form-section,
[data-bs-theme="dark"] .table-section,
[data-bs-theme="dark"] .search-section,
[data-bs-theme="dark"] .employee-list-section {
    background: var(--app-surface) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .info-card-title,
[data-bs-theme="dark"] .form-section-title,
[data-bs-theme="dark"] .summary-header,
[data-bs-theme="dark"] .summary-label,
[data-bs-theme="dark"] .summary-value,
[data-bs-theme="dark"] .employee-info,
[data-bs-theme="dark"] .employee-header,
[data-bs-theme="dark"] .nav-section-title {
    color: var(--bs-emphasis-color) !important;
}

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

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

/* --- Guest management -------------------------------------------------- */
[data-bs-theme="dark"] .guest-card,
[data-bs-theme="dark"] .guest-table {
    background: var(--app-surface) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .guest-card-header {
    background: var(--bs-tertiary-bg) !important;
    color: var(--bs-emphasis-color) !important;
    border-color: var(--bs-border-color) !important;
}

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

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

/* The guest module hardcodes a dark navbar in light mode (#212529). In dark
   mode the existing dark navbar still works, but normalize the border. */
[data-bs-theme="dark"] .guest-bg-secondary {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* --- Stock management -------------------------------------------------- */
[data-bs-theme="dark"] .table-container,
[data-bs-theme="dark"] .table-responsive {
    background: var(--app-surface) !important;
    border-color: var(--bs-border-color) !important;
}

/* --- Accounts management ----------------------------------------------- */
[data-bs-theme="dark"] .nav-section,
[data-bs-theme="dark"] .breadcrumb-custom {
    background: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

/* --- Generic fallbacks for common patterns ----------------------------- */
[data-bs-theme="dark"] .page-header,
[data-bs-theme="dark"] .dashboard-header {
    color: var(--bs-emphasis-color);
}

[data-bs-theme="dark"] .header-actions,
[data-bs-theme="dark"] .summary-info {
    color: var(--bs-body-color);
}

/* Tables explicitly set bg via gradient on thead in module CSS */
[data-bs-theme="dark"] .table thead th {
    background: var(--bs-tertiary-bg) !important;
    color: var(--bs-emphasis-color) !important;
    border-color: var(--bs-border-color) !important;
}

/* Bootstrap contextual table variants — force readable colors in dark mode.
   These classes (.table-light/.table-secondary/etc) hard-code light bg + dark
   fg via CSS vars on the element, which leaks into our dark theme.        */
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light>th,
[data-bs-theme="dark"] .table-light>td,
[data-bs-theme="dark"] thead.table-light,
[data-bs-theme="dark"] thead.table-light>tr>th,
[data-bs-theme="dark"] tr.table-light>th,
[data-bs-theme="dark"] tr.table-light>td {
    --bs-table-bg: var(--bs-tertiary-bg) !important;
    --bs-table-color: var(--bs-emphasis-color) !important;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04) !important;
    --bs-table-striped-color: var(--bs-body-color) !important;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.07) !important;
    --bs-table-hover-color: var(--bs-body-color) !important;
    --bs-table-border-color: var(--bs-border-color) !important;
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-emphasis-color) !important;
}

[data-bs-theme="dark"] .table-secondary,
[data-bs-theme="dark"] .table-secondary>th,
[data-bs-theme="dark"] .table-secondary>td,
[data-bs-theme="dark"] tr.table-secondary>th,
[data-bs-theme="dark"] tr.table-secondary>td {
    --bs-table-bg: var(--bs-secondary-bg) !important;
    --bs-table-color: var(--bs-body-color) !important;
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Contextual variants (.table-success/-danger/-warning/-info) — MDB hard-
   codes a light pastel `background-color` and `color:#000` directly on the
   row. In dark mode this produces light-text-on-light-pastel which is
   unreadable. Keep a low-opacity tint of the variant color and force a
   readable foreground. */
[data-bs-theme="dark"] .table-success,
[data-bs-theme="dark"] tr.table-success>th,
[data-bs-theme="dark"] tr.table-success>td {
    background-color: rgba(40, 167, 69, 0.18) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .table-danger,
[data-bs-theme="dark"] tr.table-danger>th,
[data-bs-theme="dark"] tr.table-danger>td {
    background-color: rgba(220, 53, 69, 0.20) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .table-warning,
[data-bs-theme="dark"] tr.table-warning>th,
[data-bs-theme="dark"] tr.table-warning>td {
    background-color: rgba(255, 193, 7, 0.18) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .table-info,
[data-bs-theme="dark"] tr.table-info>th,
[data-bs-theme="dark"] tr.table-info>td {
    background-color: rgba(13, 202, 240, 0.18) !important;
    color: var(--bs-body-color) !important;
}

/* Striped variant rows — bake the stripe into the cell background by
   stacking a translucent dark overlay onto the variant tint. We must
   neutralise MDB's box-shadow mechanism so the inset overlay doesn't
   replace the variant color. */
[data-bs-theme="dark"] .table-striped>tbody>tr.table-success>*,
[data-bs-theme="dark"] .table-striped>tbody>tr.table-danger>*,
[data-bs-theme="dark"] .table-striped>tbody>tr.table-warning>*,
[data-bs-theme="dark"] .table-striped>tbody>tr.table-info>*,
[data-bs-theme="dark"] .table-striped>tbody>tr.table-secondary>* {
    --mdb-table-accent-bg: transparent !important;
    --mdb-table-striped-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    box-shadow: none !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd).table-success>* {
    background-color: rgba(40, 167, 69, 0.28) !important;
}

[data-bs-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd).table-danger>* {
    background-color: rgba(220, 53, 69, 0.30) !important;
}

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

[data-bs-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd).table-info>* {
    background-color: rgba(13, 202, 240, 0.28) !important;
}

/* Hover variant rows — apply a stronger tint that's still readable. */
[data-bs-theme="dark"] .table-hover>tbody>tr.table-success:hover>* {
    --mdb-table-accent-bg: transparent !important;
    --mdb-table-hover-bg: transparent !important;
    box-shadow: none !important;
    background-color: rgba(40, 167, 69, 0.38) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .table-hover>tbody>tr.table-danger:hover>* {
    --mdb-table-accent-bg: transparent !important;
    --mdb-table-hover-bg: transparent !important;
    box-shadow: none !important;
    background-color: rgba(220, 53, 69, 0.40) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .table-hover>tbody>tr.table-warning:hover>* {
    --mdb-table-accent-bg: transparent !important;
    --mdb-table-hover-bg: transparent !important;
    box-shadow: none !important;
    background-color: rgba(255, 193, 7, 0.38) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .table-hover>tbody>tr.table-info:hover>* {
    --mdb-table-accent-bg: transparent !important;
    --mdb-table-hover-bg: transparent !important;
    box-shadow: none !important;
    background-color: rgba(13, 202, 240, 0.38) !important;
    color: var(--bs-body-color) !important;
}

/* Generic fallback: any inline-styled white/light background row in dark mode.
   Any <td>/<tr>/<th> still rendering near-white due to module CSS or inline
   bg gets the surface color and readable foreground.                       */
[data-bs-theme="dark"] table th,
[data-bs-theme="dark"] table td {
    color: var(--bs-body-color);
}

/* Date inputs (often have white backgrounds in module CSS) */
[data-bs-theme="dark"] .date-input-container input,
[data-bs-theme="dark"] input[type="date"],
[data-bs-theme="dark"] input[type="datetime-local"],
[data-bs-theme="dark"] input[type="time"] {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
    color-scheme: dark;
}

/* Loading overlay backdrops */
[data-bs-theme="dark"] .loading-overlay {
    background-color: rgba(0, 0, 0, 0.65) !important;
}

[data-bs-theme="dark"] .loading-content {
    background: var(--app-elevated) !important;
    color: var(--bs-body-color) !important;
}


/* -----------------------------------------------------------------------------
   PER-PAGE OPT-OUT (light lock)
   -----------------------------------------------------------------------------
   For pages that must remain in light mode regardless of the active theme
   (e.g. complex heatmaps, color-coded reports), add data-theme-locked="light"
   to a wrapping element. Tokens reset to their light values inside.
   ----------------------------------------------------------------------------- */
[data-theme-locked="light"] {
    color-scheme: light;
    --bs-body-bg: #ffffff;
    --bs-body-color: #212529;
    --bs-secondary-bg: #e9ecef;
    --bs-tertiary-bg: #f8f9fa;
    --bs-border-color: #dee2e6;
    --bs-emphasis-color: #000000;
    --bs-link-color: #0d6efd;

    --app-surface: #ffffff;
    --app-surface-2: #f8f9fa;
    --app-elevated: #ffffff;
    --app-text: #212529;
    --app-text-muted: #6c757d;
    --app-border: #dee2e6;
    --app-link: #0d6efd;

    --primary-color: #2c3e50;
}


/* -----------------------------------------------------------------------------
   PRINT
   -----------------------------------------------------------------------------
   Always print on white paper with black text, regardless of active theme.
   WeasyPrint applies @media print by default, so this block also governs PDFs.
   ----------------------------------------------------------------------------- */
@media print {

    :root,
    [data-bs-theme="dark"],
    [data-theme="dark"] {
        color-scheme: light;
        --bs-body-bg: #ffffff !important;
        --bs-body-color: #000000 !important;
        --bs-secondary-bg: #ffffff !important;
        --bs-tertiary-bg: #ffffff !important;
        --bs-border-color: #000000 !important;
        --bs-emphasis-color: #000000 !important;

        --app-surface: #ffffff !important;
        --app-surface-2: #ffffff !important;
        --app-elevated: #ffffff !important;
        --app-text: #000000 !important;
        --app-text-muted: #000000 !important;
        --app-border: #000000 !important;
    }

    body {
        background: #ffffff !important;
        color: #000000 !important;
    }

    /* Neutralise hard-coded dark-mode overrides that bypass the variable
       system (templates often write `[data-bs-theme="dark"] .x { background:
       #222 !important }`). On paged-media output we want a white page with
       legible black text irrespective of the active theme. */
    [data-bs-theme="dark"],
    [data-bs-theme="dark"] *,
    [data-theme="dark"],
    [data-theme="dark"] * {
        background-color: transparent !important;
        background-image: none !important;
        color: #000000 !important;
        border-color: #000000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        filter: none !important;
    }

    [data-bs-theme="dark"] html,
    [data-bs-theme="dark"] body,
    [data-theme="dark"] html,
    [data-theme="dark"] body {
        background: #ffffff !important;
    }
}

/* Select2 — dark-mode override.
   select2.min.css hard-codes light backgrounds and dark grey text on the
   rendered selection box and dropdown panel. Force theme tokens so the
   selected text and search input are readable against dark backgrounds. */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--app-surface) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered,
[data-bs-theme="dark"] .select2-container--default .select2-selection__placeholder {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--bs-body-color) transparent transparent transparent !important;
}

[data-bs-theme="dark"] .select2-dropdown {
    background-color: var(--app-surface) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-search--dropdown .select2-search__field,
[data-bs-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field {
    background-color: var(--app-surface) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

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

[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: rgba(255, 255, 255, 0.09) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true],
[data-bs-theme="dark"] .select2-container--default .select2-results__option--selected {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bs-tertiary-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}