/* src/config/theme.css */
/* Complete Visual Design System: High-Visibility Typography, Light Theme & Dark Mode */

/* ═══════ TYPOGRAPHY FOUNDATION (OUTFIT) ═══════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

*, *::before, *::after {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

input, select, textarea, button {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Tabular Numerics for Currencies, Quantities, and Invoices */
.tabular-nums,
[id*="total"],
[id*="balance"],
[id*="debit"],
[id*="count"],
[id*="price"],
[id*="qty"],
td.text-right,
th.text-right,
.inv-badge {
    font-variant-numeric: tabular-nums lining-nums;
    -moz-font-feature-settings: "tnum" 1, "lnum" 1;
    -webkit-font-feature-settings: "tnum" 1, "lnum" 1;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: -0.015em;
}

/* Headings */
h1, h2, h3, h4 {
    letter-spacing: -0.025em;
}

/* ═══════ THEME COLOR TOKENS ═══════ */
:root, html.theme-dark {
    color-scheme: dark;
    --color-bg: #030712;
    --color-canvas-gradient: radial-gradient(ellipse at top, #0f172a 0%, #030712 100%);
    --color-card-bg: rgba(15, 23, 42, 0.85);
    --color-card-border: rgba(51, 65, 85, 0.65);
    --color-text-primary: #f8fafc;
    --color-text-secondary: #94a3b8;
    --color-text-muted: #64748b;
    --glass-bg: rgba(15, 23, 42, 0.82);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: blur(24px);
}

html.theme-light {
    color-scheme: light !important;
    --color-bg: #f8fafc;
    --color-canvas-gradient: radial-gradient(ellipse at top, #e0f2fe 0%, #f1f5f9 100%);
    --color-card-bg: #ffffff;
    --color-card-border: #e2e8f0;
    --color-text-primary: #0f172a;
    --color-text-secondary: #334155;
    --color-text-muted: #64748b;
    --glass-bg: #ffffff;
    --glass-border: #e2e8f0;
    --glass-blur: none;
}

/* Base Body Styles */
body {
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s ease;
}

/* ═══════ COMPONENT FOUNDATION (both themes) ═══════
   :where() keeps specificity at 0 so Tailwind utilities (w-[100px], !h-[44px])
   on the element override defaults, while explicit .pl-9 / .pl-10 / #paid-amount
   rules guarantee icon & right-aligned number spacing in both themes. */
:where(.premium-input) {
    display: block;
    width: 100%;
    height: 48px;
    min-height: 48px;
    padding: 11px 14px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    background-color: rgba(15, 23, 42, 0.85);
    border: 1.5px solid rgba(51, 65, 85, 0.85);
    color: #f1f5f9;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.premium-input.pl-9 {
    padding-left: 2.25rem !important;
    padding-right: 0.875rem !important;
}
.premium-input.pl-10 {
    padding-left: 2.5rem !important;
    padding-right: 0.875rem !important;
}
#paid-amount {
    padding-left: 2.25rem !important;
    padding-right: 0.875rem !important;
    height: 46px !important;
    min-height: 46px !important;
}
:where(.premium-input):focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3.5px rgba(56, 189, 248, 0.2);
}
:where(.premium-input)::placeholder { color: #64748b; font-weight: 500; }
:where(.premium-input):disabled { opacity: 0.55; cursor: not-allowed; }
:where(input[type="date"].premium-input, input[type="month"].premium-input) { cursor: pointer; }

:where(.glass-panel) {
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.6);
    border-radius: 22px;
}

:where(.card) {
    background-color: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(51, 65, 85, 0.7);
    border-radius: 20px;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

:where(.btn-blue) {
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 60%, #4f46e5 100%);
    color: #ffffff;
    box-shadow: 0 8px 22px -6px rgba(37, 99, 235, 0.55);
}

:where(.btn-press) {
    transition: transform 0.12s ease, filter 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
}
:where(.btn-press):active:not(:disabled) { transform: scale(0.96); }

/* Light-mode tint for the solid CTA used in Print modal / Empty mode */
html.theme-light :where(.btn-blue) {
    box-shadow: 0 8px 20px -6px rgba(37, 99, 235, 0.45);
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME: HIGH-VISIBILITY, ATTRACTIVE, HIGH-CONTRAST SYSTEM
   ═══════════════════════════════════════════════════════════ */

/* 1. Global Canvas & Background */
html.theme-light, 
html.theme-light body {
    background-color: #f8fafc !important;
    background-image: radial-gradient(at 0% 0%, rgba(224, 242, 254, 0.5) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(241, 245, 249, 0.7) 0px, transparent 50%) !important;
    background-attachment: fixed !important;
    color: #0f172a !important;
}

/* Ambient glow orbs in light mode (decorative only — NEVER match backdrop-blur-* cards) */
html.theme-light .absolute.pointer-events-none[class*="blur-"]:not([class*="backdrop-blur"]),
html.theme-light .absolute.animate-pulse-fast:not([class*="backdrop-blur"]) {
    opacity: 0.18 !important;
}

/* Kill frosted-glass haze in light mode: solid surfaces read crisper */
html.theme-light [class*="backdrop-blur"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 2. Sticky Header & Brand (100% Solid, No Ghosting) */
html.theme-light header,
html.theme-light .glass-bar {
    background-color: #ffffff !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05) !important;
    z-index: 50 !important;
}

html.theme-light header p.text-white {
    color: #0f172a !important;
    font-weight: 900 !important;
}

html.theme-light #active-cashier-label {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html.theme-light header button[onclick="showCashierScreen()"] {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

/* 3. Sticky 3-Tab Bar (Solid, Crisp, Elevated) */
html.theme-light div.sticky.top-\[58px\],
html.theme-light div.sticky[class*="top-[58px]"] {
    background-color: #f8fafc !important;
    background: #f8fafc !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 45 !important;
}

html.theme-light div.sticky[class*="top-[58px]"] > div > div,
html.theme-light div.sticky.top-\[58px\] > div > div {
    background-color: #e2e8f0 !important;
    background: #e2e8f0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.05) !important;
    border-radius: 22px !important;
}

html.theme-light #tab-pill {
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
    box-shadow: 0 3px 12px rgba(2, 132, 199, 0.35) !important;
    border: none !important;
}

html.theme-light #tab-pill ~ button.text-white,
html.theme-light #tab-pill ~ button.text-white * {
    color: #ffffff !important;
    font-weight: 900 !important;
}

html.theme-light div.sticky[class*="top-[58px]"] button:not(.text-white),
html.theme-light div.sticky.top-\[58px\] button:not(.text-white) {
    color: #475569 !important;
    font-weight: 800 !important;
}

html.theme-light div.sticky[class*="top-[58px]"] button:not(.text-white):hover,
html.theme-light div.sticky.top-\[58px\] button:not(.text-white):hover {
    color: #0f172a !important;
}

/* 4. Surface & Card Elevation
   NOTE: token-exact selectors ([class~=] / leading-space match) so that
   hover:bg-*, from-slate-*, via-slate-* never trigger these rules. */
html.theme-light .card,
html.theme-light .glass-panel,
html.theme-light :is([class~="bg-slate-900"], [class^="bg-slate-900/"], [class*=" bg-slate-900/"]):not(button):not(input):not(#tab-pill) {
    background-color: #ffffff !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}
html.theme-light .card,
html.theme-light .glass-panel {
    border-width: 1.5px !important;
    border-style: solid !important;
}

/* Small neutral buttons/chips that used bg-slate-900 / bg-slate-800 */
html.theme-light button:is([class~="bg-slate-900"], [class*=" bg-slate-900/"], [class~="bg-slate-800"], [class*=" bg-slate-800/"]):not([class*="bg-gradient"]) {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}
html.theme-light button:is([class~="bg-slate-900"], [class*=" bg-slate-900/"], [class~="bg-slate-800"], [class*=" bg-slate-800/"]):not([class*="bg-gradient"]):hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

html.theme-light :is([class~="bg-slate-950"], [class^="bg-slate-950/"], [class*=" bg-slate-950/"]) {
    background-color: #f1f5f9 !important;
    background-image: none !important;
}

html.theme-light :is([class~="bg-slate-800"], [class^="bg-slate-800/"], [class*=" bg-slate-800/"]):not(button) {
    background-color: #f1f5f9 !important;
}

html.theme-light :is([class*=" border-slate-800"], [class*=" border-slate-700"], [class^="border-slate-"]) {
    border-color: #e2e8f0 !important;
}

/* 5. Typography Hierarchy & Contrast */
html.theme-light .text-white,
html.theme-light .text-slate-100 {
    color: #0f172a !important;
}
html.theme-light .text-slate-200,
html.theme-light .text-slate-300 {
    color: #1e293b !important;
}
html.theme-light .text-slate-400,
html.theme-light .text-slate-500 {
    color: #475569 !important;
}

/* Vibrant Daylight Accent Colors */
html.theme-light .text-sky-400 { color: #0284c7 !important; }
html.theme-light .text-sky-300 { color: #0369a1 !important; }
html.theme-light .text-emerald-400 { color: #059669 !important; }
html.theme-light .text-emerald-300 { color: #047857 !important; }
html.theme-light .text-rose-400 { color: #e11d48 !important; }
html.theme-light .text-rose-300 { color: #be123c !important; }
html.theme-light .text-amber-400 { color: #d97706 !important; }
html.theme-light .text-amber-300 { color: #b45309 !important; }
html.theme-light .text-orange-400 { color: #ea580c !important; }
html.theme-light .text-orange-300 { color: #c2410c !important; }
html.theme-light .text-pink-400 { color: #db2777 !important; }
html.theme-light .text-pink-300 { color: #be185d !important; }
html.theme-light .text-purple-400 { color: #9333ea !important; }
html.theme-light .text-cyan-400 { color: #0891b2 !important; }
html.theme-light .text-teal-400 { color: #0d9488 !important; }
html.theme-light [style*="color:#22d3ee"],
html.theme-light [style*="color: #22d3ee"] { color: #0891b2 !important; }
html.theme-light [style*="color:#fbbf24"],
html.theme-light [style*="color: #fbbf24"] { color: #d97706 !important; }
html.theme-light [style*="color:#2dd4bf"],
html.theme-light [style*="color: #2dd4bf"] { color: #0d9488 !important; }

/* Cylinder Pill Inline Colors */
html.theme-light [style*="color:#38bdf8"],
html.theme-light [style*="color: #38bdf8"] { color: #0284c7 !important; }
html.theme-light [style*="color:#818cf8"],
html.theme-light [style*="color: #818cf8"] { color: #4338ca !important; }
html.theme-light [style*="color:#34d399"],
html.theme-light [style*="color: #34d399"] { color: #059669 !important; }
html.theme-light [style*="color:#fb923c"],
html.theme-light [style*="color: #fb923c"] { color: #c2410c !important; }
html.theme-light [style*="color:#fb7185"],
html.theme-light [style*="color: #fb7185"] { color: #e11d48 !important; }
html.theme-light [style*="color:#c084fc"],
html.theme-light [style*="color: #c084fc"] { color: #7e22ce !important; }
html.theme-light [style*="color:#f472b6"],
html.theme-light [style*="color: #f472b6"] { color: #be185d !important; }

/* Gradient Brand Headings */
html.theme-light .bg-gradient-to-r.from-white.via-sky-100.to-sky-300,
html.theme-light .bg-gradient-to-r.from-white.via-slate-100.to-sky-300 {
    background: linear-gradient(135deg, #0f172a 0%, #0369a1 60%, #0284c7 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* 6. Protected Button Text: Gradient / SOLID CTA Buttons keep pure white text.
   [class~=] = exact token, so translucent tints like bg-rose-500/15 are NOT matched. */
html.theme-light button.btn-blue,
html.theme-light button.btn-blue *,
html.theme-light button[class~="bg-gradient-to-r"],
html.theme-light button[class~="bg-gradient-to-r"] *,
html.theme-light button[class~="bg-gradient-to-br"],
html.theme-light button[class~="bg-gradient-to-br"] *,
html.theme-light button[class~="bg-orange-500"],
html.theme-light button[class~="bg-orange-500"] *,
html.theme-light button[class~="bg-rose-500"],
html.theme-light button[class~="bg-rose-500"] *,
html.theme-light button[class~="bg-rose-600"],
html.theme-light button[class~="bg-rose-600"] *,
html.theme-light button[class~="bg-indigo-600"],
html.theme-light button[class~="bg-indigo-600"] *,
html.theme-light button[class~="bg-sky-500"],
html.theme-light button[class~="bg-sky-500"] *,
html.theme-light button[class~="bg-sky-600"],
html.theme-light button[class~="bg-sky-600"] *,
html.theme-light button[class~="bg-blue-600"],
html.theme-light button[class~="bg-blue-600"] *,
html.theme-light button[class~="bg-emerald-600"],
html.theme-light button[class~="bg-emerald-600"] *,
html.theme-light #tab-pill ~ button.text-white,
html.theme-light #tab-pill ~ button.text-white *,
html.theme-light .peer:checked + div,
html.theme-light [class*="peer-checked:text-white"],
html.theme-light .keep-white,
html.theme-light [style*="background:linear-gradient"] span,
html.theme-light [style*="background: linear-gradient"] span,
html.theme-light [style*="background: linear-gradient"] *,
html.theme-light [style*="background:linear-gradient"] * {
    color: #ffffff !important;
}

/* 7. Form Inputs & Premium Inputs */
html.theme-light .premium-input,
html.theme-light input[type="text"]:not(#login-pass),
html.theme-light input[type="date"],
html.theme-light input[type="month"],
html.theme-light select {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
    border-radius: 15px !important;
}
html.theme-light #login-user,
html.theme-light #login-pass {
    background-color: transparent !important;
    border: none !important;
    color: #0f172a !important;
    box-shadow: none !important;
}
html.theme-light .premium-input::placeholder,
html.theme-light input::placeholder {
    color: #94a3b8 !important;
}
html.theme-light .premium-input:focus,
html.theme-light input[type="text"]:not(#login-pass):focus,
html.theme-light input[type="date"]:focus,
html.theme-light input[type="month"]:focus,
html.theme-light select:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3.5px rgba(14, 165, 233, 0.2) !important;
}

/* Save & Delete Action Buttons (Customer Bar & Bill Cards) */
html.theme-light button[onclick="removeSelectedStore()"],
html.theme-light button[onclick*="openDeleteModal"],
html.theme-light button[class*="bg-rose-500/"] {
    background-color: #ffe4e6 !important;
    border: 1.5px solid #fda4af !important;
    color: #e11d48 !important;
    box-shadow: 0 1px 3px rgba(225, 29, 72, 0.08) !important;
}
html.theme-light button[onclick="removeSelectedStore()"]:hover,
html.theme-light button[onclick*="openDeleteModal"]:hover,
html.theme-light button[class*="bg-rose-500/"]:hover {
    background-color: #fecdd3 !important;
    border-color: #fb7185 !important;
    color: #be123c !important;
}
html.theme-light button[onclick="removeSelectedStore()"] svg,
html.theme-light button[onclick*="openDeleteModal"] svg,
html.theme-light button[class*="bg-rose-500/"] svg {
    color: #e11d48 !important;
    stroke: #e11d48 !important;
}
html.theme-light button[onclick="saveNewStore()"],
html.theme-light button[class*="bg-emerald-500/"] {
    background-color: #d1fae5 !important;
    border: 1.5px solid #6ee7b7 !important;
    color: #047857 !important;
    box-shadow: 0 1px 3px rgba(5, 150, 105, 0.08) !important;
}
html.theme-light button[onclick="saveNewStore()"]:hover,
html.theme-light button[class*="bg-emerald-500/"]:hover {
    background-color: #a7f3d0 !important;
    border-color: #34d399 !important;
    color: #065f46 !important;
}
html.theme-light button[onclick="saveNewStore()"] svg,
html.theme-light button[class*="bg-emerald-500/"] svg {
    color: #047857 !important;
    stroke: #047857 !important;
}

/* 8. Category Selectors (Stores, Hotel, Home) */
html.theme-light input[name="category"] ~ div {
    background-color: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
html.theme-light input[name="category"] ~ div p.text-white {
    color: #0f172a !important;
}
html.theme-light input[name="category"] ~ div p.text-slate-400 {
    color: #475569 !important;
}
html.theme-light input[name="category"][value="store"]:checked ~ div {
    background-color: #f0f9ff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.22), 0 4px 14px rgba(2, 132, 199, 0.12) !important;
}
html.theme-light input[name="category"][value="store"]:checked ~ div p.text-white {
    color: #0284c7 !important;
}
html.theme-light input[name="category"][value="hotel"]:checked ~ div {
    background-color: #fff7ed !important;
    border-color: #ea580c !important;
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.22), 0 4px 14px rgba(234, 88, 12, 0.12) !important;
}
html.theme-light input[name="category"][value="hotel"]:checked ~ div p.text-white {
    color: #ea580c !important;
}
html.theme-light input[name="category"][value="home"]:checked ~ div {
    background-color: #fdf2f8 !important;
    border-color: #db2777 !important;
    box-shadow: 0 0 0 2px rgba(219, 39, 119, 0.22), 0 4px 14px rgba(219, 39, 119, 0.12) !important;
}
html.theme-light input[name="category"][value="home"]:checked ~ div p.text-white {
    color: #db2777 !important;
}

/* 9. Transaction Type Toggle in POS */
html.theme-light [name="tx-type"] ~ div {
    color: #64748b !important;
}
html.theme-light input[name="tx-type"]:checked + div {
    color: #ffffff !important;
}

/* 10. Cylinder Cards & Stepper Controls (Billing Section) */
html.theme-light #billing-section .glass-panel {
    background-color: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
    border-radius: 22px !important;
}

html.theme-light #billing-section .glass-panel p.text-white,
html.theme-light #billing-section .glass-panel p.font-black {
    color: #0f172a !important;
}

html.theme-light #billing-section .glass-panel p.text-slate-400 {
    color: #475569 !important;
}

/* Stepper Lower Shelf: Soft Light Slate Footer */
html.theme-light #billing-section .glass-panel > div:last-child {
    background-color: #f8fafc !important;
    background: #f8fafc !important;
    border-top: 1.5px solid #e2e8f0 !important;
}

/* Stepper Quantity Digits ONLY (never match #paid-amount) */
html.theme-light input[id^="qty-"] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #0f172a !important;
    outline: none !important;
}

/* Minus button */
html.theme-light .glass-panel button.bg-slate-900 {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}
html.theme-light .glass-panel button.bg-slate-900:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}
html.theme-light .glass-panel button.bg-slate-900 svg {
    color: #1e293b !important;
    stroke: #1e293b !important;
}

/* 11. Customer Paid & Balance Card */
html.theme-light #billing-section [class*="bg-emerald-950"] {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
    border: 1.5px solid #a7f3d0 !important;
    box-shadow: 0 4px 20px rgba(5, 150, 105, 0.08) !important;
}
html.theme-light #paid-amount {
    background-color: #ffffff !important;
    border: 1.5px solid #86efac !important;
    color: #047857 !important;
    box-shadow: 0 1px 3px rgba(5, 150, 105, 0.1) !important;
}
html.theme-light #paid-amount:focus {
    border-color: #059669 !important;
    box-shadow: 0 0 0 3.5px rgba(5, 150, 105, 0.2) !important;
}
html.theme-light #calc-balance {
    color: #059669 !important;
}

/* 12. Grand Total & Sticky Bottom Bar (100% Solid Opaque Pure White) */
html.theme-light #bottom-bar {
    background-color: #ffffff !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 2px solid #e2e8f0 !important;
    box-shadow: 0 -12px 35px rgba(15, 23, 42, 0.1) !important;
    z-index: 50 !important;
}
html.theme-light #final-total-label {
    color: #0284c7 !important;
}
html.theme-light #bottom-bar div[class*="text-[2.4rem]"],
html.theme-light #final-total,
html.theme-light #final-total-currency {
    background: linear-gradient(135deg, #0284c7 0%, #1d4ed8 50%, #0f172a 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    filter: drop-shadow(0 1px 2px rgba(2, 132, 199, 0.25)) !important;
}
html.theme-light #bottom-bar div[class*="text-[2.4rem]"] * {
    color: inherit !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}
html.theme-light #bottom-bar .bg-slate-900 {
    background-color: #f1f5f9 !important;
    border: 1.5px solid #cbd5e1 !important;
}
html.theme-light #bottom-item-count {
    color: #0284c7 !important;
}

/* 13. Today's Revenue Hero Card (#today-hero-card) */
html.theme-light #today-hero-card {
    background-color: #ffffff !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 10px 35px rgba(15, 23, 42, 0.08) !important;
}
html.theme-light #today-hero-card > div.relative > div:first-child {
    border-bottom: 1.5px solid #f1f5f9 !important;
}
html.theme-light #today-hero-card .text-sky-400 {
    color: #0284c7 !important;
}
html.theme-light #daily-total {
    color: #0f172a !important;
}
html.theme-light #today-hero-card .text-rose-400 {
    color: #e11d48 !important;
}
html.theme-light #daily-debit {
    color: #e11d48 !important;
}
html.theme-light #today-hero-card .text-emerald-400 {
    color: #047857 !important;
}
html.theme-light #today-hero-card div[class*="text-[2.8rem]"] {
    background: linear-gradient(135deg, #047857 0%, #059669 50%, #0d9488 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    filter: drop-shadow(0 1px 2px rgba(4, 120, 87, 0.25)) !important;
}
html.theme-light #today-hero-card div[class*="text-[2.8rem]"] * {
    color: inherit !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}
html.theme-light #today-date-label {
    background-color: #f1f5f9 !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #334155 !important;
}
html.theme-light #today-hero-card [class*="bg-slate-950"] {
    background-color: #f8fafc !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
}
html.theme-light #daily-bill-count,
html.theme-light #daily-item-count {
    color: #0f172a !important;
}

/* 14. Monthly Revenue Hero Card (#monthly-hero-card) */
html.theme-light #monthly-hero-card {
    background-color: #ffffff !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 10px 35px rgba(15, 23, 42, 0.08) !important;
}
html.theme-light #monthly-label {
    color: #0284c7 !important;
}
html.theme-light #monthly-hero-card div[class*="text-[2.8rem]"] {
    background: linear-gradient(135deg, #0284c7 0%, #1d4ed8 50%, #0f172a 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    filter: drop-shadow(0 1px 2px rgba(2, 132, 199, 0.25)) !important;
}
html.theme-light #monthly-hero-card div[class*="text-[2.8rem]"] * {
    color: inherit !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}
html.theme-light #monthly-hero-card .bg-rose-500\/10 {
    background-color: #ffe4e6 !important;
    border: 1.5px solid #fecdd3 !important;
}
html.theme-light #monthly-debit {
    color: #e11d48 !important;
}
html.theme-light #monthly-hero-card [class*="bg-slate-950"] {
    background-color: #f8fafc !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
}
html.theme-light #monthly-bill-count,
html.theme-light #monthly-cyl-count,
html.theme-light #monthly-avg {
    color: #0f172a !important;
}

/* All Breakdown Cards in Sales & Monthly */
html.theme-light #sales-section .glass-panel,
html.theme-light #monthly-section .glass-panel,
html.theme-light #monthly-daily-list .glass-panel {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}
html.theme-light #sales-section .glass-panel p,
html.theme-light #monthly-section .glass-panel p {
    color: #0f172a !important;
}

/* Empty State Cards */
html.theme-light .card.text-center {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
}
html.theme-light .card.text-center p.text-white {
    color: #0f172a !important;
}
html.theme-light .card.text-center p.text-slate-400 {
    color: #64748b !important;
}
html.theme-light .card.text-center [class*="bg-slate-800"] {
    background-color: #f0f9ff !important;
    border-color: #bae6fd !important;
}

/* 15. Cashier Selection Profile Modal (#cashier-screen) & Admin Login (#login-screen) */
html.theme-light #cashier-screen,
html.theme-light #login-screen {
    background: radial-gradient(ellipse at top, #dbeafe 0%, #eff6ff 45%, #f8fafc 100%) !important;
}

html.theme-light #cashier-screen h1,
html.theme-light #login-screen h1 {
    background: linear-gradient(135deg, #0f172a 0%, #0369a1 60%, #0284c7 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    filter: none !important;
}

html.theme-light #cashier-screen p.text-sky-300\/80,
html.theme-light #login-screen p.text-sky-300\/80 {
    color: #0369a1 !important;
}

/* Brand icon: solid gradient tile with white flame/shield */
html.theme-light #cashier-brand-icon,
html.theme-light #login-screen .group > div.relative {
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 55%, #4f46e5 100%) !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 14px 34px rgba(37, 99, 235, 0.35) !important;
}
html.theme-light #cashier-brand-icon svg,
html.theme-light #login-screen .group > div.relative svg {
    color: #ffffff !important;
    filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.25)) !important;
}
html.theme-light #cashier-screen .group > div.absolute,
html.theme-light #login-screen .group > div.absolute {
    opacity: 0.35 !important;
}

/* Profile card: solid white, crisp border, soft elevation */
html.theme-light #cashier-modal-card {
    background: #ffffff !important;
    border: 1.5px solid #dbe3ee !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
    border-radius: 28px !important;
    opacity: 1 !important;
}

html.theme-light #cashier-modal-title,
html.theme-light #login-screen span.text-sky-200 {
    color: #0369a1 !important;
}
html.theme-light #cashier-modal-title svg {
    color: #0284c7 !important;
}
html.theme-light #cashier-screen .border-slate-800,
html.theme-light #login-screen .border-slate-800 {
    border-color: #e2e8f0 !important;
}

html.theme-light #cashier-list button {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

html.theme-light #cashier-list button:hover {
    background-color: #f8fafc !important;
    border-color: #7dd3fc !important;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.12) !important;
}

html.theme-light #cashier-list button[class*="from-sky-950"],
html.theme-light #cashier-list button[class*="border-sky-400"] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border: 2px solid #0284c7 !important;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.2) !important;
}

html.theme-light #cashier-list button span {
    color: #0f172a !important;
}

html.theme-light #cashier-list div[class*="from-sky-400"],
html.theme-light #cashier-list div[class*="from-sky-400"] * {
    color: #ffffff !important;
}

html.theme-light #cashier-list .rounded-full[class*="bg-slate-800"] {
    background-color: #f1f5f9 !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #64748b !important;
}

html.theme-light #cashier-list .rounded-full[class*="bg-sky-500"] {
    background-color: #e0f2fe !important;
    border: 1.5px solid #7dd3fc !important;
    color: #0284c7 !important;
}

html.theme-light #cashier-list span[class*="text-emerald-400"] {
    color: #047857 !important;
    background-color: #d1fae5 !important;
    border-color: #6ee7b7 !important;
}

/* Card buttons in Sales List (Print, Edit, Delete) */
html.theme-light .card button[class*="bg-slate-800"] {
    background-color: #f1f5f9 !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #1e293b !important;
    font-weight: 800 !important;
}
html.theme-light .card button[class*="bg-slate-800"]:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Monthly Daily Breakdown */
html.theme-light #monthly-daily-list .card {
    background-color: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
html.theme-light #monthly-daily-list .text-slate-800 {
    color: #0f172a !important;
    font-weight: 900 !important;
}
html.theme-light #monthly-daily-list .text-sky-700 {
    color: #0284c7 !important;
    font-weight: 900 !important;
}
html.theme-dark #monthly-daily-list .text-slate-800 {
    color: #f8fafc !important;
}
html.theme-dark #monthly-daily-list .text-sky-700 {
    color: #38bdf8 !important;
}
html.theme-dark #monthly-daily-list .bg-sky-100 {
    background-color: #1e293b !important;
}

/* 16. Admin Dashboard: Overview KPI Cards, Reports, and Tables */
html.theme-light #sec-overview .border-l-4 {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}
html.theme-light #sec-overview .border-l-4 .text-white,
html.theme-light #dash-month-rev,
html.theme-light #dash-rev,
html.theme-light #dash-bills,
html.theme-light #dash-cyls,
html.theme-light #dash-cashier {
    color: #0f172a !important;
    font-weight: 900 !important;
}
html.theme-light #sec-overview .border-l-purple-400 { border-left-color: #9333ea !important; }
html.theme-light #sec-overview .border-l-sky-400 { border-left-color: #0284c7 !important; }
html.theme-light #sec-overview .border-l-indigo-400 { border-left-color: #4f46e5 !important; }
html.theme-light #sec-overview .border-l-emerald-400 { border-left-color: #059669 !important; }
html.theme-light #sec-overview .border-l-amber-400 { border-left-color: #d97706 !important; }
html.theme-light #sec-overview .border-l-purple-400 p:first-child { color: #6b21a8 !important; font-weight: 900 !important; }
html.theme-light #sec-overview .border-l-sky-400 p:first-child { color: #0369a1 !important; font-weight: 900 !important; }
html.theme-light #sec-overview .border-l-indigo-400 p:first-child { color: #4338ca !important; font-weight: 900 !important; }
html.theme-light #sec-overview .border-l-emerald-400 p:first-child { color: #047857 !important; font-weight: 900 !important; }
html.theme-light #sec-overview .border-l-amber-400 p:first-child { color: #b45309 !important; font-weight: 900 !important; }

html.theme-light #sec-reports .bg-gradient-to-br {
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 50%, #eff6ff 100%) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
}
html.theme-light #sec-reports .bg-gradient-to-br h3 { color: #0f172a !important; font-weight: 900 !important; }
html.theme-light #sec-reports .bg-gradient-to-br p { color: #475569 !important; font-weight: 700 !important; }

/* Admin Data Tables */
html.theme-light table {
    border-color: #e2e8f0 !important;
}
html.theme-light table thead {
    background-color: #f1f5f9 !important;
    border-bottom: 2px solid #cbd5e1 !important;
}
html.theme-light table thead th {
    background-color: #f1f5f9 !important;
    color: #0369a1 !important;
    border-color: #e2e8f0 !important;
    font-weight: 900 !important;
}
html.theme-light table thead th.sticky {
    background-color: #f1f5f9 !important;
    border-right: 1px solid #cbd5e1 !important;
    box-shadow: 3px 0 10px rgba(15, 23, 42, 0.05) !important;
}
html.theme-light table tbody {
    background-color: #ffffff !important;
}
html.theme-light table tbody tr {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #1e293b !important;
}
html.theme-light table tbody tr:hover {
    background-color: #f8fafc !important;
}
html.theme-light table tbody td.sticky {
    background-color: #ffffff !important;
    border-right: 1px solid #f1f5f9 !important;
    box-shadow: 3px 0 10px rgba(15, 23, 42, 0.04) !important;
    color: #0f172a !important;
    font-weight: 800 !important;
}
html.theme-light table tbody tr:hover td.sticky {
    background-color: #f8fafc !important;
}
html.theme-light table tfoot {
    background-color: #f8fafc !important;
    border-top: 2px solid #cbd5e1 !important;
}

/* Invoices Cards in Admin */
html.theme-light .bill-card-desktop {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #1e293b !important;
}
html.theme-light .bill-card-desktop:hover {
    background-color: #f8fafc !important;
}
html.theme-light .bill-card-mobile {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #1e293b !important;
}
html.theme-light .bill-card-mobile:hover {
    background-color: #f8fafc !important;
}
html.theme-light #sec-bills [class*="bg-slate-950"] {
    background-color: #f1f5f9 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    color: #0369a1 !important;
    font-weight: 900 !important;
}
html.theme-light #btn-prev-bills,
html.theme-light #btn-next-bills {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #1e293b !important;
}
html.theme-light #btn-prev-bills:hover:not(:disabled),
html.theme-light #btn-next-bills:hover:not(:disabled) {
    background-color: #f1f5f9 !important;
}
html.theme-light #bill-page-info {
    color: #475569 !important;
    font-weight: 700 !important;
}

/* Admin Sidebar */
html.theme-light aside {
    background-color: #ffffff !important;
    border-right: 1.5px solid #e2e8f0 !important;
    box-shadow: 2px 0 12px rgba(15, 23, 42, 0.04) !important;
}
html.theme-light #desk-nav-overview,
html.theme-light #desk-nav-reports,
html.theme-light #desk-nav-pricing,
html.theme-light #desk-nav-cashiers,
html.theme-light #desk-nav-stores,
html.theme-light #desk-nav-bills,
html.theme-light #desk-nav-settings {
    color: #475569 !important;
    font-weight: 700 !important;
}
html.theme-light #desk-nav-overview:hover,
html.theme-light #desk-nav-reports:hover,
html.theme-light #desk-nav-pricing:hover,
html.theme-light #desk-nav-cashiers:hover,
html.theme-light #desk-nav-stores:hover,
html.theme-light #desk-nav-bills:hover,
html.theme-light #desk-nav-settings:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}
html.theme-light aside button[class*="bg-sky-500"] {
    background-color: #e0f2fe !important;
    border: 1.5px solid #7dd3fc !important;
    color: #0284c7 !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12) !important;
}

/* Mobile Bottom Nav in Admin */
html.theme-light #mobile-bottom-nav > div {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-top: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06) !important;
}
html.theme-light .admin-nav-btn {
    color: #64748b !important;
}
html.theme-light .admin-nav-btn.text-sky-400 {
    color: #0284c7 !important;
}

/* Theme Toggle Button */
html.theme-light .theme-toggle-btn {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0284c7 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}
html.theme-light .theme-toggle-btn:hover {
    background-color: #f0f9ff !important;
    border-color: #7dd3fc !important;
    color: #0369a1 !important;
}

/* Badge Tags in Light Mode */
html.theme-light [class*="bg-sky-500/"] { background-color: #e0f2fe !important; }
html.theme-light [class*="border-sky-500/"] { border-color: #bae6fd !important; }
html.theme-light .text-sky-300 { color: #0369a1 !important; }

html.theme-light [class*="bg-emerald-500/"] { background-color: #d1fae5 !important; }
html.theme-light [class*="border-emerald-500/"] { border-color: #a7f3d0 !important; }
html.theme-light .text-emerald-400 { color: #059669 !important; }

html.theme-light [class*="bg-rose-500/"] { background-color: #ffe4e6 !important; }
html.theme-light [class*="border-rose-500/"] { border-color: #fecdd3 !important; }
html.theme-light .text-rose-400 { color: #e11d48 !important; }

/* Modals */
html.theme-light #delete-modal-card {
    background-color: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18) !important;
}
html.theme-light #delete-modal-card h3 { color: #0f172a !important; font-weight: 900 !important; }
html.theme-light #delete-modal-card p { color: #475569 !important; font-weight: 700 !important; }
html.theme-light #delete-modal-card button[class*="bg-slate-800"] {
    background-color: #f1f5f9 !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #1e293b !important;
    font-weight: 800 !important;
}
html.theme-light #delete-modal-card button[class*="bg-slate-800"]:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* SweetAlert2 */
html.theme-light .swal2-popup {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15) !important;
}
html.theme-light .swal2-title { color: #0f172a !important; font-weight: 900 !important; }
html.theme-light .swal2-html-container { color: #334155 !important; font-weight: 700 !important; }
html.theme-light .swal2-close { color: #64748b !important; }

/* Scrollbars */
html.theme-light ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-radius: 4px; }
html.theme-light ::-webkit-scrollbar-track { background: #f8fafc !important; }
html.theme-light .scroll-hint::-webkit-scrollbar-track { background: #f1f5f9 !important; }
html.theme-light .scroll-hint::-webkit-scrollbar-thumb { background: #94a3b8 !important; }