/*
 * Site-wide Dark Mode
 * ────────────────────────────────────────────────────────────────────────────
 * Activated by adding the `dark` class to <html> (public/js/dark-mode.js does this
 * before paint). Everything is scoped under `html.dark` so light mode is untouched.
 *
 * Strategy:
 *  1. Remap the CSS custom properties the app already uses (--bg, --card, --text,
 *     --muted, --border, --primary-l, etc.). Most pages read these, so they adapt
 *     automatically.
 *  2. Neutralize the common LITERAL light colors hardcoded across standalone pages
 *     (white backgrounds, near-black text, light slate panels/borders) so pages that
 *     don't use the variables still darken.
 *  3. Keep brand accents (indigo/green/red/amber) and readable contrast; never darken
 *     images, or the print/invoice surfaces (those stay light for printing).
 */

/* ── 1. Variable remap ──────────────────────────────────────────────────── */
html.dark, html.dark :root {
    --bg:#0f172a;          /* app background        */
    --card:#1e293b;        /* cards / panels / bars */
    --text:#e2e8f0;        /* primary text          */
    --muted:#94a3b8;       /* secondary text        */
    --border:#334155;      /* separators            */
    --primary:#818cf8;     /* accent (lighter indigo for dark bg) */
    --primary-l:#312e81;   /* accent tint surface   */
    --success:#34d399;
}

html.dark body {
    background:#0f172a;
    color:#e2e8f0;
}

/* ── 2. Literal-color neutralization ────────────────────────────────────── */
/* White / off-white backgrounds → dark card. Covers inline style="background:#fff"
   and common hex variants used throughout the pages. */
html.dark [style*="background:#fff"],
html.dark [style*="background: #fff"],
html.dark [style*="background:#ffffff"],
html.dark [style*="background: #ffffff"],
html.dark [style*="background:white"],
html.dark [style*="background-color:#fff"],
html.dark [style*="background-color: #fff"],
html.dark [style*="background:#f8fafc"],
html.dark [style*="background:#f1f5f9"],
html.dark [style*="background:#f9fafb"],
html.dark [style*="background:#fafafa"],
html.dark [style*="background:#fff3e0"],
html.dark [style*="background:#eef2ff"],
html.dark [style*="background:#f0fdf4"],
html.dark [style*="background:#fffdf9"] {
    background:#1e293b !important;
    background-color:#1e293b !important;
}

/* Additional light TINT backgrounds used for badges/highlight rows on report pages
   (blue/green/red/amber/purple/cyan tints). Remap to a subtle dark tint so any text on
   them (handled below) stays readable instead of dark-on-light-on-dark clashes. */
html.dark [style*="background:#dbeafe"],
html.dark [style*="background: #dbeafe"],
html.dark [style*="background:#e0e7ff"],
html.dark [style*="background:#eff6ff"],
html.dark [style*="background:#dcfce7"],
html.dark [style*="background: #dcfce7"],
html.dark [style*="background:#d1fae5"],
html.dark [style*="background:#ecfdf5"],
html.dark [style*="background:#fee2e2"],
html.dark [style*="background: #fee2e2"],
html.dark [style*="background:#fef2f2"],
html.dark [style*="background:#fef3c7"],
html.dark [style*="background: #fef3c7"],
html.dark [style*="background:#fef9c3"],
html.dark [style*="background:#fffbeb"],
html.dark [style*="background:#fff7ed"],
html.dark [style*="background:#ede9fe"],
html.dark [style*="background:#f3e8ff"],
html.dark [style*="background:#faf5ff"],
html.dark [style*="background:#ecfeff"],
html.dark [style*="background:#cffafe"] {
    background:#243248 !important;
    background-color:#243248 !important;
}

/* Near-black / slate text → light text. */
html.dark [style*="color:#1e293b"],
html.dark [style*="color: #1e293b"],
html.dark [style*="color:#111"],
html.dark [style*="color:#000"],
html.dark [style*="color:#0f172a"],
html.dark [style*="color:#1f2937"],
html.dark [style*="color:#334155"],
html.dark [style*="color:#374151"],
html.dark [style*="color:#475569"] {
    color:#e2e8f0 !important;
}

/* Muted greys stay muted but lift for contrast on dark. */
html.dark [style*="color:#64748b"],
html.dark [style*="color:#6b7280"],
html.dark [style*="color:#94a3b8"],
html.dark [style*="color:#9ca3af"],
html.dark [style*="color:#cbd5e1"] {
    color:#94a3b8 !important;
}

/* Dark ACCENT text (deep blue/green/red/amber/purple used for figures + labels) is too
   low-contrast on a dark surface. Lift each to a lighter, high-contrast variant of the
   SAME hue so reports keep their colour-coding but stay readable in dark mode. */
html.dark [style*="color:#2563eb"],
html.dark [style*="color: #2563eb"],
html.dark [style*="color:#1d4ed8"],
html.dark [style*="color:#1e40af"],
html.dark [style*="color:#3730a3"],
html.dark [style*="color:#4338ca"],
html.dark [style*="color:#4f46e5"],
html.dark [style*="color:#3b82f6"] { color:#93c5fd !important; }   /* blues → light blue */

html.dark [style*="color:#16a34a"],
html.dark [style*="color: #16a34a"],
html.dark [style*="color:#15803d"],
html.dark [style*="color:#166534"],
html.dark [style*="color:#065f46"],
html.dark [style*="color:#059669"],
html.dark [style*="color:#10b981"] { color:#6ee7b7 !important; }   /* greens → light green */

html.dark [style*="color:#dc2626"],
html.dark [style*="color: #dc2626"],
html.dark [style*="color:#b91c1c"],
html.dark [style*="color:#991b1b"],
html.dark [style*="color:#ef4444"] { color:#fca5a5 !important; }   /* reds → light red */

html.dark [style*="color:#b45309"],
html.dark [style*="color: #b45309"],
html.dark [style*="color:#92400e"],
html.dark [style*="color:#a16207"],
html.dark [style*="color:#d97706"],
html.dark [style*="color:#f59e0b"] { color:#fcd34d !important; }   /* ambers → light amber */

html.dark [style*="color:#7c3aed"],
html.dark [style*="color: #7c3aed"],
html.dark [style*="color:#6d28d9"],
html.dark [style*="color:#5b21b6"],
html.dark [style*="color:#8b5cf6"] { color:#c4b5fd !important; }   /* purples → light purple */

html.dark [style*="color:#0e7490"],
html.dark [style*="color:#0891b2"] { color:#67e8f9 !important; }   /* cyans → light cyan */

/* Common helper text classes used on report pages (green/red/blue/amber figures). */
html.dark .green, html.dark .text-green { color:#6ee7b7 !important; }
html.dark .red,   html.dark .text-red   { color:#fca5a5 !important; }
html.dark .blue,  html.dark .text-blue  { color:#93c5fd !important; }
html.dark .amber, html.dark .text-amber { color:#fcd34d !important; }
html.dark .purple { color:#c4b5fd !important; }

/* More light backgrounds used as panels/rows on report pages. */
html.dark [style*="background:#f3f4f6"],
html.dark [style*="background:#e5e7eb"],
html.dark [style*="background:#f5f3ff"],
html.dark [style*="background:#eef2f7"],
html.dark [style*="background:#f8f9fa"] {
    background:#1e293b !important;
    background-color:#1e293b !important;
}

/* Light borders → dark borders (covers #e*, #d1d5db, #d*, #f* light greys used inline). */
html.dark [style*="border:1px solid #e"],
html.dark [style*="border:1.5px solid #e"],
html.dark [style*="border:2px solid #e"],
html.dark [style*="border-bottom:1px solid #e"],
html.dark [style*="border-top:1px solid #e"],
html.dark [style*="border:1px solid #f"],
html.dark [style*="border:1px solid #d1d5db"],
html.dark [style*="border:1px solid #d"],
html.dark [style*="border:1px solid #cbd5e1"],
html.dark [style*="border-color:#e5e7eb"],
html.dark [style*="border-color:#d1d5db"] {
    border-color:#334155 !important;
}
/* Table cells with an inline light border (very common on report tables). */
html.dark td[style*="#d1d5db"], html.dark th[style*="#d1d5db"],
html.dark td[style*="#e5e7eb"], html.dark th[style*="#e5e7eb"] { border-color:#334155 !important; }

/* ── 3. Structural element defaults (class-based, no inline style needed) ── */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark select,
html.dark textarea,
html.dark .fc {
    background:#0f172a !important;
    color:#e2e8f0 !important;
    border-color:#334155 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color:#64748b !important; }

html.dark table { color:#e2e8f0; }
html.dark th,
html.dark thead th { background:#111c33 !important; color:#cbd5e1 !important; }
html.dark td,
html.dark tbody td { border-color:#334155 !important; color:#e2e8f0; }
html.dark tr:hover td { background:#243248 !important; }
/* Table cells often set a light border-bottom via their OWN class CSS; force dark. */
html.dark tbody tr { border-color:#334155 !important; }

/* ── Broad structural defaults so pages that colour text/surfaces via their OWN
   element/class CSS (not inline styles or variables) still read on dark. This is the
   catch-all that fixes the "faded text on dark" reports. ─────────────────────────── */
/* Headings inherit the light body text by default; keep them bright. */
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color:#f1f5f9; }
/* Common white/near-white surface classes used across list & report pages.
   NOTE: background is NOT !important so an element with an inline gradient/brand background
   (e.g. the "Sarika Group" total card) keeps its own colour; plain white class surfaces
   still darken because "html.dark .card" outranks the page's own ".card{background:#fff}". */
html.dark .date-bar, html.dark .stat-card, html.dark .panel,
html.dark .section, html.dark .card, html.dark .toolbar, html.dark .filters,
html.dark .filter-bar, html.dark .summary, html.dark .summary-bar, html.dark .head-bar,
html.dark .topbar, html.dark .content-card, html.dark .white-box, html.dark .info-box,
html.dark .detail-box, html.dark .modal-box, html.dark .modal-content,
html.dark .tg-modal-box, html.dark .modal-card, html.dark .popup-box, html.dark .dialog {
    background:#1e293b;
    border-color:#334155 !important;
    color:#e2e8f0;
}
/* Modal headings/labels: force readable light text (they often have NO explicit colour and
   would otherwise inherit the light body colour onto a still-white modal → invisible). */
html.dark .tg-modal-box h1, html.dark .tg-modal-box h2, html.dark .tg-modal-box h3,
html.dark .tg-modal-box h4, html.dark .tg-modal-box label,
html.dark .modal-box h1, html.dark .modal-box h2, html.dark .modal-box h3,
html.dark .modal-box label { color:#f1f5f9 !important; }
/* Section/panel titles + labels that hardcode slate/grey text. */
html.dark .panel-title, html.dark .section-title, html.dark .card-title,
html.dark .date-bar h2, html.dark .page-title { color:#f1f5f9 !important; }
html.dark .stat-lbl, html.dark .stat-label, html.dark .muted, html.dark .sub,
html.dark .hint, html.dark .note, html.dark .meta, html.dark small { color:#94a3b8 !important; }
/* Stat numbers should stay bright unless they carry a brand colour inline (those are
   handled by the accent-colour rules above). */
html.dark .stat-num, html.dark .stat-value, html.dark .kpi-num { color:#f1f5f9; }
/* Links inside content default to a readable light-indigo (brand links keep inline colour). */
html.dark a:not([class*="btn"]):not([style*="color"]) { color:#a5b4fc; }
/* Cyan accents (used for some stat numbers) → light cyan. */
html.dark [style*="color:#06b6d4"], html.dark [style*="color:#0891b2"],
html.dark [style*="color:#0e7490"] { color:#67e8f9 !important; }

/* ── Secondary / Cancel / Clear buttons ─────────────────────────────────────
   These are light-grey buttons (background #e5e7eb / #e2e8f0 / #f1f5f9 with dark grey
   text). In dark mode the text was being lifted to light while the background stayed
   light-grey → the button (e.g. "Cancel" next to Send) became invisible. Give them a
   proper dark surface with light text. Covers both the shared classes and inline styles. */
html.dark .bc, html.dark .btn.gray, html.dark .btn-gray, html.dark .btn-cancel,
html.dark .btn-secondary, html.dark .mb-cancel, html.dark .btn-light, html.dark .cancel-btn,
html.dark [style*="background:#e5e7eb"], html.dark [style*="background: #e5e7eb"],
html.dark [style*="background:#e2e8f0"], html.dark [style*="background: #e2e8f0"],
html.dark [style*="background:#f1f5f9;color:#374151"],
html.dark [style*="background:#f3f4f6;color:#374151"] {
    background:#334155 !important;
    background-color:#334155 !important;
    color:#e2e8f0 !important;
    border-color:#475569 !important;
}
html.dark .bc:hover, html.dark .btn.gray:hover, html.dark .mb-cancel:hover,
html.dark .btn-secondary:hover { background:#3f4d63 !important; }

/* ── Sidebar primary buttons (Open POS + active nav item) ────────────────────
   These are the most-used navigation buttons. In dark mode the remapped light-indigo
   --primary background left white/indigo text low-contrast (washed out). Give them a
   solid, high-contrast indigo fill with bright white text. */
html.dark .sb-pos {
    background:#4f46e5 !important;   /* solid indigo (not the lightened dark-mode primary) */
    color:#ffffff !important;
    box-shadow:0 2px 10px rgba(79,70,229,.45);
}
html.dark .sb-pos:hover { background:#4338ca !important; }
/* Active/selected sidebar item: filled indigo + white text so it clearly stands out. */
html.dark .sb-item.active {
    background:#4f46e5 !important;
    color:#ffffff !important;
}
html.dark .sb-item.active .sb-icon { filter:none; }
/* Inactive sidebar items: readable light-grey; brighten on hover. */
html.dark .sb-item { color:#cbd5e1 !important; }
html.dark .sb-item:hover { background:#312e81 !important; color:#ffffff !important; }

/* Card/panel hover accents readable on dark. */
html.dark .card, html.dark .section, html.dark .panel, html.dark .stat {
    background:#1e293b;
    border-color:#334155;
}

/* Scrollbars. */
html.dark ::-webkit-scrollbar-track { background:#0f172a; }
html.dark ::-webkit-scrollbar-thumb { background:#334155; border-radius:6px; }

/* ── 4. Surfaces that must STAY light (printable invoices / receipts) ────── */
/* The A5 / 80mm invoice templates are meant to be printed on white paper; never
   darken them even if viewed inside a dark session. A page opts out of dark mode by
   adding data-keep-light to its <body> (see pos_invoice_a5.php / pos_invoice_80mm.php).
   This neutralizes the variable remap AND every literal-color override for that page. */
html.dark body[data-keep-light],
html.dark body[data-keep-light] .invoice-page,
html.dark body[data-keep-light] .receipt {
    background:#ffffff !important;
    color:#1e293b !important;
}
/* Inside a keep-light page, undo the aggressive overrides so it renders exactly as in
   light mode (white surfaces, dark text, light borders). */
html.dark body[data-keep-light] [style*="background:#fff"],
html.dark body[data-keep-light] [style*="background:#ffffff"],
html.dark body[data-keep-light] [style*="background:white"] { background:#ffffff !important; }
html.dark body[data-keep-light] [style*="color:#1e293b"],
html.dark body[data-keep-light] [style*="color:#000"],
html.dark body[data-keep-light] [style*="color:#111"] { color:#1e293b !important; }
html.dark body[data-keep-light] table,
html.dark body[data-keep-light] th,
html.dark body[data-keep-light] td { background:transparent !important; color:#1e293b !important; border-color:#e5e7eb !important; }

/* ── 5. Toggle controls ─────────────────────────────────────────────────── */
/* Web slide switch (used in the top bar next to Logout). */
.dm-switch{position:relative;display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;user-select:none;}
.dm-switch .dm-track{width:42px;height:22px;border-radius:999px;background:#cbd5e1;position:relative;transition:background .2s;flex-shrink:0;}
.dm-switch .dm-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;display:flex;align-items:center;justify-content:center;font-size:.7rem;box-shadow:0 1px 3px rgba(0,0,0,.3);}
html.dark .dm-switch .dm-track{background:#4f46e5;}
html.dark .dm-switch .dm-thumb{transform:translateX(20px);}
.dm-switch .dm-label{font-size:.75rem;font-weight:600;color:var(--muted,#64748b);white-space:nowrap;}

/* Mobile round moon/sun button (used next to the notification bell). */
.dm-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--border,#e2e8f0);background:var(--card,#fff);font-size:1.15rem;cursor:pointer;text-decoration:none;line-height:1;}
html.dark .dm-btn{background:#1e293b;border-color:#334155;}

/* ── 6. Class-based overrides for pages with hardcoded (non-variable) colors ──
   Many standalone pages (mobile dashboard, list/report screens) set light colors on
   CLASSES rather than inline styles or CSS variables. These rules darken the common
   structural classes used across the app. Brand-colored buttons/badges are left alone. */

/* Mobile staff dashboard. */
html.dark .header{background:#1e293b !important;border-bottom-color:#334155 !important;}
html.dark .header-title{color:#e2e8f0 !important;}
html.dark .menu-btn{color:#e2e8f0 !important;}
html.dark .menu-card{color:#e2e8f0 !important;}
html.dark .menu-icon{background:#0f172a !important;border-color:#334155 !important;}
html.dark .menu-card:hover .menu-icon{background:#312e81 !important;border-color:#818cf8 !important;}
html.dark .menu-label{color:#94a3b8 !important;}
html.dark .footer{background:#1e293b !important;border-top-color:#334155 !important;}
html.dark .footer-btn{color:#94a3b8 !important;}
html.dark .notif-btn{color:#e2e8f0 !important;}

/* Generic structural classes reused across list/report pages. */
html.dark .navbar{filter:brightness(.85);}
html.dark .container{color:#e2e8f0;}
html.dark .toolbar,
html.dark .panel-title,
html.dark .card-head{color:#e2e8f0;}
html.dark .btn-sm,
html.dark .fc{color:#e2e8f0;}
html.dark .intro,
html.dark .sc-block,
html.dark .record,
html.dark .stat-card,
html.dark .list,
html.dark .items{background:#1e293b !important;border-color:#334155 !important;color:#e2e8f0 !important;}

/* Empty-state / muted helper text on dark. */
html.dark .empty,
html.dark .rec-meta,
html.dark .c-sub,
html.dark .lbl{color:#94a3b8 !important;}

/* ── 7. Report/summary page containers (class-based light surfaces) ──────────
   Many report screens (Sales Report, Custom Report, Invoices, Deleted Invoices, Top/
   Summary/Fast reports, etc.) define light card/box/table classes in their OWN <style>
   block, so the inline-style neutralizer above can't reach them. Darken the common
   report container classes here so their DATA is readable in dark mode. Brand-colored
   badge chips (.k-label.red/.blue/… ) keep their fill — only surfaces + text adapt. */
html.dark .kpi,
html.dark .k-val,
html.dark .sum-card,
html.dark .summary-bar,
html.dark .bar,
html.dark .box,
html.dark .report-box,
html.dark .rpt-box,
html.dark .data-box,
html.dark .chart-box,
html.dark .card-box,
html.dark .tbl-wrap,
html.dark .table-wrap {
    background:#1e293b !important;
    border-color:#334155 !important;
    color:#e2e8f0 !important;
}
/* Report table header/label cells that use their own light class background. */
html.dark .label-col { background:#111c33 !important; color:#e2e8f0 !important; }
html.dark .val-col   { color:#e2e8f0 !important; }
html.dark .sum-num   { color:#e2e8f0 !important; }
html.dark .sum-lbl   { color:#94a3b8 !important; }
/* KPI value should be bright; its coloured label chip keeps its own fill. */
html.dark .kpi .k-val { color:#f1f5f9 !important; }

/* Report pages that draw a "print" look with a heavy dark border (border:2px solid
   #2d2d2d) and white fill: keep the border but darken the fill + lift text. */
html.dark [style*="border:2px solid #2d2d2d"],
html.dark .kpi[style],
html.dark table[border] { border-color:#475569 !important; }
html.dark table[border] td,
html.dark table[border] th { border-color:#475569 !important; }