/*
 * theme-dark.css
 * All dark-theme overrides scoped to [data-theme="dark"].
 * Removing this file (or toggling the attribute) fully reverts to the light theme.
 */

/* ------------------------------------------------------------------
   CARDS & CONTAINERS — "liquid glass" effect
   ------------------------------------------------------------------ */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light {
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    color: #e8e8ed;
}

[data-theme="dark"] .bg-secondary {
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    color: #e8e8ed;
}

/* Any dark/black text flips to white in dark mode, regardless of parent */
[data-theme="dark"] .text-black,
[data-theme="dark"] .text-dark {
    color: #ffffff !important;
}

/* Muted text gets a softer tone instead of gray-on-glass */
[data-theme="dark"] .bg-white .text-muted,
[data-theme="dark"] .bg-light .text-muted {
    color: rgba(232, 232, 237, 0.6) !important;
}

/* Primary (teal-ish) headings inside glass cards stay readable */
[data-theme="dark"] .bg-white .text-primary,
[data-theme="dark"] .bg-light .text-primary {
    color: #6cc5ec !important;
}

/* ------------------------------------------------------------------
   THEME TOKENS — overrides for table/chart colors
   ------------------------------------------------------------------ */
[data-theme="dark"] {
    --table-header-bg: rgba(255, 255, 255, 0.08);
    --table-header-fg: #e8e8ed;
    --table-row-fg: #e8e8ed;
    --chart-axis-color: #e8e8ed;
    --chart-grid-color: rgba(255, 255, 255, 0.08);
    --chart-bar-start: rgba(108, 197, 236, 1);
    --chart-bar-end: rgba(31, 110, 145, 1);
    --chart-bar-border: #6cc5ec;
    /* Neutral surface & interaction tokens — dark counterparts of the site.css defaults */
    --surface-muted-bg: rgba(255, 255, 255, 0.10);
    --surface-muted-border: rgba(255, 255, 255, 0.15);
    --row-hover-bg: rgba(255, 255, 255, 0.06);
    --hover-bg: rgba(255, 255, 255, 0.10);
    --dark-hover-bg: rgba(255, 255, 255, 0.14);
    --loading-bg: rgba(255, 255, 255, 0.08);
    --danger-soft-bg: rgba(220, 53, 69, 0.22);
    --scrollbar-track: rgba(255, 255, 255, 0.05);
    --scrollbar-thumb: rgba(255, 255, 255, 0.25);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.40);
}

    /* Table body cells inherit the theme-aware row foreground */
    [data-theme="dark"] .table {
        color: var(--table-row-fg);
    }

        /* Every body cell carries .bg-white, so the generic glass-card rule wraps each
   one in a border + blur + shadow — that's the faint grid between cells. Flatten
   them into a single surface, keeping only a subtle horizontal row separator. */
        [data-theme="dark"] .table > tbody > tr > td.bg-white {
            border: 0 solid rgba(255, 255, 255, 0.07);
            border-bottom-width: 1px;
            box-shadow: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

    /* Whole-row hover, bright enough to read and above the .bg-white !important base */
    [data-theme="dark"] .table-hover > tbody > tr:hover > td.bg-white {
        background: rgba(0, 31, 51, 0.80) !important;
        color: #ffffff;
    }

    /* Fixed light thead utility → dark glass (Bootstrap themes .table itself,
   but .table-light is a fixed utility that stays bright otherwise) */
    [data-theme="dark"] .table-light {
        --bs-table-bg: rgba(255, 255, 255, 0.08);
        --bs-table-color: #e8e8ed;
        --bs-table-border-color: rgba(255, 255, 255, 0.12);
    }

    [data-theme="dark"] .table-header-cell {
        background-color: var(--table-header-bg);
        color: var(--table-header-fg);
    }

    /* Tender Types table (Merchant Settings): sit transparently on the glass card
   instead of Bootstrap's opaque dark table bg, with light text, a readable
   stripe and themed borders. */
    [data-theme="dark"] .tender-table {
        --bs-table-bg: transparent;
        --bs-table-color: #e8e8ed;
        --bs-table-striped-color: #e8e8ed;
        --bs-table-striped-bg: rgba(255, 255, 255, 0.07);
        --bs-table-border-color: rgba(255, 255, 255, 0.12);
    }

        [data-theme="dark"] .tender-table thead tr {
            color: #ffffff;
        }

    /* Inventory list tables (Items / Categories / Tax Rates / Stock Movements):
   inventory-tables.css hardcodes light header text, borders and a light hover.
   Retint for dark — transparent over the glass card, light header text, subtle
   separators, and a dark row hover matching the transactions table. */
    [data-theme="dark"] .inventory-table {
        --bs-table-bg: transparent;
        --bs-table-color: var(--table-row-fg);
        border-color: rgba(255, 255, 255, 0.12);
    }

        [data-theme="dark"] .inventory-table th {
            color: var(--table-header-fg);
            border-bottom-color: rgba(255, 255, 255, 0.15);
        }

        [data-theme="dark"] .inventory-table td {
            border-bottom-color: rgba(255, 255, 255, 0.08);
        }

        [data-theme="dark"] .inventory-table tbody tr:hover {
            background-color: rgba(0, 31, 51, 0.80);
        }

    /* Invoice list table: Bootstrap 5.3 dark paints every cell with the opaque
   --bs-body-bg, which reads as a solid slab on the glass card. Flatten to
   transparent with the same separators and hover as the other list tables. */
    [data-theme="dark"] #invoicesTable .table {
        --bs-table-bg: transparent;
        --bs-table-color: var(--table-row-fg);
        --bs-table-border-color: rgba(255, 255, 255, 0.08);
        --bs-table-hover-bg: rgba(0, 31, 51, 0.80);
        --bs-table-hover-color: #ffffff;
    }

    /* Invoice status pills: the light-theme ink colors are too dark to read
   over the soft tints on glass — lighten ink, nudge the tint up. */
    [data-theme="dark"] .inv-status-dot {
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
    }

    [data-theme="dark"] .inv-status--paid {
        color: #4ade80;
        background-color: rgba(34, 197, 94, 0.18);
    }

    [data-theme="dark"] .inv-status--cancelled {
        color: #f87171;
        background-color: rgba(239, 68, 68, 0.18);
    }

    [data-theme="dark"] .inv-status--outstanding {
        color: #fbbf24;
        background-color: rgba(245, 158, 11, 0.18);
    }

    [data-theme="dark"] .inv-status--pending {
        color: #93c5fd;
        background-color: rgba(59, 130, 246, 0.18);
    }

    [data-theme="dark"] .inv-status--unknown {
        color: #d1d5db;
        background-color: rgba(156, 163, 175, 0.18);
    }

    /* ------------------------------------------------------------------
   FORMS — glass inputs matching the liquid-glass surfaces
   ------------------------------------------------------------------ */
    [data-theme="dark"] .form-control,
    [data-theme="dark"] .form-select {
        background-color: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.15);
        color: #e8e8ed;
    }

        [data-theme="dark"] .form-control::placeholder {
            color: rgba(232, 232, 237, 0.5);
        }

        [data-theme="dark"] .form-control:focus,
        [data-theme="dark"] .form-select:focus {
            background-color: rgba(255, 255, 255, 0.09);
            border-color: rgba(108, 197, 236, 0.6);
            color: #e8e8ed;
        }

    [data-theme="dark"] .input-group-text {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.15);
        color: #e8e8ed;
    }

    /* Native <option> popups: the browser paints the list with the select's own
   background, and the translucent glass fill above composites to near-white
   there — light text on a light list. Give options an opaque surface instead. */
    [data-theme="dark"] select option,
    [data-theme="dark"] select optgroup {
        background-color: #111827;
        color: #e8e8ed;
    }

    [data-theme="dark"] select option:disabled {
        color: rgba(232, 232, 237, 0.45);
    }

    /* Checkboxes, radios & switches — glass box unchecked, brand accent checked.
   Bootstrap compiles :checked to a fixed #0d6efd, so it needs an explicit override. */
    [data-theme="dark"] .form-check-input {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.3);
        transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }

        [data-theme="dark"] .form-check-input:hover:not(:disabled) {
            border-color: rgba(108, 197, 236, 0.6);
        }

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

        /* site.css uses a white halo on focus — invisible/harsh on dark */
        [data-theme="dark"] .form-check-input:focus {
            border-color: rgba(108, 197, 236, 0.6);
            box-shadow: 0 0 0 0.2rem rgba(69, 183, 233, 0.3);
        }

        [data-theme="dark"] .form-check-input:disabled {
            background-color: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.15);
        }

    [data-theme="dark"] .form-check-label {
        color: #e8e8ed;
    }

    /* ------------------------------------------------------------------
   BUTTONS — fixed light / outline-dark variants read poorly on dark
   ------------------------------------------------------------------ */
    [data-theme="dark"] .btn-light {
        --bs-btn-bg: rgba(255, 255, 255, 0.12);
        --bs-btn-border-color: rgba(255, 255, 255, 0.15);
        --bs-btn-color: #e8e8ed;
        --bs-btn-hover-bg: rgba(255, 255, 255, 0.20);
        --bs-btn-hover-border-color: rgba(255, 255, 255, 0.22);
        --bs-btn-hover-color: #ffffff;
    }

    [data-theme="dark"] .btn-outline-dark {
        --bs-btn-color: #e8e8ed;
        --bs-btn-border-color: rgba(255, 255, 255, 0.35);
        --bs-btn-hover-bg: rgba(255, 255, 255, 0.12);
        --bs-btn-hover-border-color: rgba(255, 255, 255, 0.5);
        --bs-btn-hover-color: #ffffff;
    }

    /* Outline primary/danger — the light-theme #1f6e91 and #dc3545 are too dark to
   read on the glass surfaces. Lighter ink, faint tinted fill, solid on hover. */
    [data-theme="dark"] .btn-outline-primary {
        --bs-btn-color: #6cc5ec;
        --bs-btn-bg: rgba(108, 197, 236, 0.08);
        --bs-btn-border-color: rgba(108, 197, 236, 0.45);
        --bs-btn-hover-bg: rgba(108, 197, 236, 0.22);
        --bs-btn-hover-border-color: #6cc5ec;
        --bs-btn-hover-color: #ffffff;
        --bs-btn-active-bg: rgba(108, 197, 236, 0.32);
        --bs-btn-active-border-color: #6cc5ec;
        --bs-btn-active-color: #ffffff;
        --bs-btn-disabled-color: rgba(108, 197, 236, 0.4);
        --bs-btn-disabled-border-color: rgba(108, 197, 236, 0.18);
    }

    [data-theme="dark"] .btn-outline-danger {
        --bs-btn-color: #ff9a9a;
        --bs-btn-bg: rgba(255, 154, 154, 0.08);
        --bs-btn-border-color: rgba(255, 154, 154, 0.45);
        --bs-btn-hover-bg: rgba(220, 53, 69, 0.85);
        --bs-btn-hover-border-color: #ff9a9a;
        --bs-btn-hover-color: #ffffff;
        --bs-btn-active-bg: #dc3545;
        --bs-btn-active-border-color: #ff9a9a;
        --bs-btn-active-color: #ffffff;
        --bs-btn-disabled-color: rgba(255, 154, 154, 0.4);
        --bs-btn-disabled-border-color: rgba(255, 154, 154, 0.18);
    }

    /* ------------------------------------------------------------------
   MODALS & OFFCANVAS — opaque glass panels
   ------------------------------------------------------------------ */
    [data-theme="dark"] .modal-content,
    [data-theme="dark"] .offcanvas {
        background: rgba(20, 28, 38, 0.92);
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #e8e8ed;
    }

    [data-theme="dark"] .modal-header,
    [data-theme="dark"] .modal-footer,
    [data-theme="dark"] .offcanvas-header {
        border-color: rgba(255, 255, 255, 0.1);
    }

    /* Section headings + separators inside the panels: .text-secondary is a
   fixed gray in Bootstrap 5.3 (doesn't flip with the theme) and the border
   utilities land heavier than the panel's own 10% white borders. */
    [data-theme="dark"] .modal-content .text-secondary,
    [data-theme="dark"] .offcanvas .text-secondary {
        color: rgba(232, 232, 237, 0.75) !important;
    }

    [data-theme="dark"] .modal-content .border-top,
    [data-theme="dark"] .modal-content .border-bottom,
    [data-theme="dark"] .offcanvas .border-top,
    [data-theme="dark"] .offcanvas .border-bottom {
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    /* ------------------------------------------------------------------
   PAGINATION PILLS — shared by the Invoices / Orders / Transactions /
   Inventory list tables (pagination.css + inline copies hardcode light grays)
   ------------------------------------------------------------------ */
    [data-theme="dark"] .pagination-pill .page-pill {
        color: rgba(232, 232, 237, 0.8);
    }

        [data-theme="dark"] .pagination-pill .page-pill:hover:not(.active) {
            background-color: rgba(108, 197, 236, 0.15);
            color: #6cc5ec;
        }

    [data-theme="dark"] .pagination-pill .page-pill-nav {
        color: rgba(232, 232, 237, 0.65);
    }

    [data-theme="dark"] .pagination-pill .page-pill.disabled {
        color: rgba(232, 232, 237, 0.3);
    }

    [data-theme="dark"] .pagination-pill .page-pill-ellipsis {
        color: rgba(232, 232, 237, 0.5);
    }

    /* ------------------------------------------------------------------
   TOASTS — soft translucent surfaces
   ------------------------------------------------------------------ */
    [data-theme="dark"] .toast {
        background: rgba(20, 28, 38, 0.92);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #e8e8ed;
    }

    [data-theme="dark"] .toast-header {
        background: rgba(255, 255, 255, 0.06);
        color: #e8e8ed;
        border-color: rgba(255, 255, 255, 0.1);
    }

    /* ------------------------------------------------------------------
   SELECT DATE COMPONENT - Pre-selected buttons
   (.iv-* are the Invoice toolbar's copies of the .sd-* classes)
   ------------------------------------------------------------------ */
    [data-theme="dark"] .sd-chip,
    [data-theme="dark"] .iv-chip {
        border: 1px solid #1375a0;
        background: #1375a0;
        color: #FFF;
        font-size: 0.8125rem;
        font-weight: 500;
        padding: 0.35rem 0.85rem;
        border-radius: 999px;
        transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    }

        [data-theme="dark"] .sd-chip:hover,
        [data-theme="dark"] .iv-chip:hover {
            background: #1ba8e4;
            border: 1px solid #1ba8e4;
            color: #111827;
        }

    [data-theme="dark"] .sd-chip.active,
    [data-theme="dark"] .iv-chip.active {
        background: #111827;
        border-color: #111827;
        color: #ffffff;
    }

    /* SelectDate.cshtml hardcodes light grays for the field icon and the active
   filter chips that SelectDate.js renders — both stay bright on dark. */
    [data-theme="dark"] .sd-field-icon,
    [data-theme="dark"] .iv-field-icon {
        color: rgba(232, 232, 237, 0.65);
    }

    [data-theme="dark"] .sd-active-chip,
    [data-theme="dark"] .iv-active-chip {
        background: rgba(255, 255, 255, 0.10);
        border-color: rgba(255, 255, 255, 0.15);
        color: #e8e8ed;
    }

        [data-theme="dark"] .sd-active-chip:hover,
        [data-theme="dark"] .iv-active-chip:hover {
            background: rgba(255, 255, 255, 0.16);
            border-color: rgba(255, 255, 255, 0.25);
        }

        [data-theme="dark"] .sd-active-chip .bi,
        [data-theme="dark"] .sd-active-chip-label,
        [data-theme="dark"] .iv-active-chip .bi,
        [data-theme="dark"] .iv-active-chip-label {
            color: rgba(232, 232, 237, 0.65);
        }

/* ------------------------------------------------------------------
   ORDER ITEM PICKER - typeahead dropdown
------------------------------------------------------------------ */
    [data-theme="dark"] .order-picker-item {
        background: #111827 !important;
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

        [data-theme="dark"] .order-picker-item:hover {
            background: #1c2635 !important;
        }

    [data-theme="dark"] .order-picker-empty {
        color: rgba(232, 232, 237, 0.6);
    }

    /* The dropdown itself scrolls (max-height + overflow-y in Create.css). Its light
   background showed through the translucent global scrollbar, so tint the surface
   and give the bar its own colors — Firefox first, then the WebKit pseudo-elements
   which override the wider global div::-webkit-scrollbar rules in site.css. */
    [data-theme="dark"] .order-picker-results {
        background: #111827;
        border-color: rgba(255, 255, 255, 0.12);
        scrollbar-width: thin;
        scrollbar-color: rgba(108, 197, 236, 0.45) rgba(255, 255, 255, 0.06);
    }

    [data-theme="dark"] .order-picker-results::-webkit-scrollbar {
        width: 10px;
        margin: 0;
    }

    [data-theme="dark"] .order-picker-results::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.06);
        border-radius: 0 0.5rem 0.5rem 0;
        margin: 0;
    }

    [data-theme="dark"] .order-picker-results::-webkit-scrollbar-thumb {
        background: rgba(108, 197, 236, 0.45);
        background-clip: padding-box;
        border: 2px solid transparent;
        border-radius: 10px;
        margin: 0;
    }

    [data-theme="dark"] .order-picker-results::-webkit-scrollbar-thumb:hover {
        background: rgba(108, 197, 236, 0.75);
        background-clip: padding-box;
    }

/* ------------------------------------------------------------------
   ORDERS SECTION
------------------------------------------------------------------ */

[data-theme="dark"] .catalog-card-media {
    background-color: #1c2635;
    color: #adb5bd;
}

    [data-theme="dark"] .card {
        background-color: #111827;
        color: #adb5bd;
    }
/* ------------------------------------------------------------------
   SURVEY PAGE
   Survey.cshtml's inline styles hardcode light-theme option colors
   (black label text, light border/hover) — retint for the glass card.
------------------------------------------------------------------ */

[data-theme="dark"] .survey-option {
    border-color: var(--surface-muted-border);
}

    [data-theme="dark"] .survey-option:hover {
        background-color: var(--hover-bg);
    }

    [data-theme="dark"] .survey-option span {
        color: #e8e8ed;
    }

/* ------------------------------------------------------------------
   BRAND LOGO
   The dark MiCamp mark. Swapping the src via content: url() keeps the
   element's Bootstrap responsive classes intact (no duplicated <img>).
   Note: the Identity pages that carry .micamp-logo are anonymous, and
   _Layout only enables the theme for authenticated users, so this rule
   is inert until anonymous pages become theme-aware.
------------------------------------------------------------------ */

[data-theme="dark"] .micamp-logo {
    content: url("/images/Micamp_logo_white.png");
}