/**
 * DzBarber (دزباربر) - Master Artisan Design System
 * Bespoke Algerian Barber Craft · Anti-AI Slop · Zero SaaS Clichés
 * Standards: https://impeccable.style/
 */

:root {
    --canvas: #07090D;
    --surface-1: #0C1017;
    --surface-2: #121722;
    --surface-3: #182030;
    --surface-card: #131824;
    --surface-banner: rgba(0, 0, 0, 0.6);
    
    --border-hairline: rgba(255, 255, 255, 0.06);
    --border-subtle: #192132;
    --border-card: rgba(255, 255, 255, 0.08);
    --border-brass: rgba(201, 148, 42, 0.35);
    --border-brass-bright: rgba(224, 168, 52, 0.6);

    --brass-primary: #C9942A;
    --brass-hover: #DFAB3E;
    --brass-deep: #8F6516;
    --brass-muted: rgba(201, 148, 42, 0.10);
    --brass-gradient: linear-gradient(180deg, #DEAB40 0%, #B8831E 100%);
    --brass-gradient-hover: linear-gradient(180deg, #E8B954 0%, #C9942A 100%);

    --text-primary: #F1F5F9;
    --text-secondary: #8E9FB5;
    --text-tertiary: #5A6A80;
    --text-price: #FBBF24;

    --status-open: #10B981;
    --status-busy: #F59E0B;
    --status-closed: #EF4444;
}

/* Light Mode Design Tokens (Warm Stone & Architectural Paper Craft) */
html.light, :root[data-theme="light"] {
    --canvas: #F8FAFC;
    --surface-1: #FFFFFF;
    --surface-2: #F1F5F9;
    --surface-3: #E2E8F0;
    --surface-card: #F8FAFC;
    --surface-banner: #F1F5F9;
    
    --border-hairline: rgba(15, 23, 42, 0.08);
    --border-subtle: #CBD5E1;
    --border-card: #E2E8F0;
    --border-brass: rgba(180, 83, 9, 0.35);
    --border-brass-bright: rgba(180, 83, 9, 0.6);

    --brass-primary: #B45309;
    --brass-hover: #D97706;
    --brass-deep: #78350F;
    --brass-muted: rgba(180, 83, 9, 0.08);
    --brass-gradient: linear-gradient(180deg, #D97706 0%, #B45309 100%);
    --brass-gradient-hover: linear-gradient(180deg, #F59E0B 0%, #D97706 100%);

    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-tertiary: #64748B;
    --text-price: #92400E;

    --status-open: #047857;
    --status-busy: #B45309;
    --status-closed: #DC2626;
}

/* Base Setup */
html {
    background-color: var(--canvas);
    color: var(--text-primary);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -0.01em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html[dir="ltr"] {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html[dir="rtl"] {
    font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, sans-serif;
}

body {
    background-color: var(--canvas);
    min-height: 100vh;
    overflow-x: hidden;
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(201, 148, 42, 0.035) 0%, transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
    background-size: 100% 100%, 100% 32px;
}

html.light body {
    background-color: #F8FAFC !important;
    background-image: none !important;
    color: #0F172A !important;
}

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

html[dir="ltr"] body {
    direction: ltr;
    text-align: left;
}

/* Typography & Tabular Figures */
.tabular-nums, [data-tabular] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

code, kbd, samp, pre {
    font-family: 'JetBrains Mono', monospace;
}

/* Browser Surfaces Theming */
::selection {
    background: rgba(201, 148, 42, 0.35);
    color: #FFFFFF;
}

input, textarea, select {
    caret-color: var(--brass-hover);
}

/* Autofill Theme Harmony (Kill Webkit Yellow/White Glare) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--text-primary);
    -webkit-box-shadow: 0 0 0px 1000px var(--surface-1) inset;
    box-shadow: 0 0 0px 1000px var(--surface-1) inset;
    transition: background-color 5000s ease-in-out 0s;
}

:focus-visible {
    outline: 2px solid var(--brass-primary);
    outline-offset: 2px;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--canvas);
}
::-webkit-scrollbar-thumb {
    background: #171E2D;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--brass-deep);
}

/* High-Craft Surfaces */
.craft-surface, .obsidian-card {
    background-color: var(--surface-1);
    border: 1px solid var(--border-hairline);
    border-radius: 0.875rem;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.7), inset 0 1px 0 0 rgba(255, 255, 255, 0.03);
}

.craft-surface-interactive {
    transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.craft-surface-interactive:hover {
    border-color: var(--border-brass);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.8), 0 0 16px -2px rgba(201, 148, 42, 0.12);
}

/* Bespoke Salon Pass Card (Artisanal depth, non-slop architecture) */
.salon-craft-card {
    background: var(--surface-1);
    border: 1px solid var(--border-hairline);
    border-radius: 0.875rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.65), inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}
.salon-craft-card:hover {
    border-color: var(--border-brass);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -4px rgba(0, 0, 0, 0.85), 0 0 20px -3px rgba(201, 148, 42, 0.12);
}

/* Tactile Buttons */
.btn-brass, .btn-gold {
    background: var(--brass-gradient);
    color: #07090D;
    font-weight: 700;
    border-radius: 0.625rem;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(201, 148, 42, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-brass:hover, .btn-gold:hover {
    background: var(--brass-gradient-hover);
    box-shadow: 0 4px 16px rgba(201, 148, 42, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transform: translateY(-1px);
}
.btn-brass:active, .btn-gold:active {
    transform: scale(0.985);
}

.btn-brass-outline {
    background: transparent;
    color: var(--brass-hover);
    border: 1px solid var(--border-brass);
    font-weight: 600;
    border-radius: 0.625rem;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-brass-outline:hover {
    background: var(--brass-muted);
    border-color: var(--brass-primary);
    color: #FFFFFF;
}

.btn-surface {
    background: var(--surface-2);
    color: var(--text-primary);
    border: 1px solid var(--border-hairline);
    border-radius: 0.625rem;
    font-weight: 600;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-surface:hover {
    background: var(--surface-3);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Color utilities */
.text-gold { color: var(--brass-primary) !important; }
.border-gold { border-color: var(--brass-primary) !important; }
.bg-gold { background-color: var(--brass-primary) !important; }

/* Crisp Boarding Pass Ticket Aesthetic for Queue */
.ticket-pass {
    background: var(--surface-1);
    border: 1px solid var(--border-hairline);
    border-radius: 0.875rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.ticket-pass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #8F6516, #DFAB3E, #8F6516);
}

/* Ticket Side Perforation Notches */
.ticket-perforations {
    position: relative;
    border-top: 1px dashed rgba(255, 255, 255, 0.10);
    margin: 1.25rem -1.5rem;
    padding: 1.25rem 1.5rem 0 1.5rem;
}
.ticket-perforations::before,
.ticket-perforations::after {
    content: '';
    position: absolute;
    top: -9px;
    width: 18px;
    height: 18px;
    background: var(--canvas);
    border-radius: 50%;
    border: 1px solid var(--border-hairline);
    z-index: 10;
}
.ticket-perforations::before { left: -9px; }
.ticket-perforations::after { right: -9px; }

/* Pulsing Status Dot */
@keyframes statusDotPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.35);
        opacity: 0.55;
    }
}
.status-dot-pulse {
    animation: statusDotPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Smooth Touch & Mobile Ergonomics */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
    button, a.btn-brass, a.btn-surface, input, select {
        min-height: 44px;
    }
}

/* Cockpit Big Button */
.cockpit-action-btn {
    background: var(--brass-gradient);
    color: #07090D;
    border: 1px solid #DFAB3E;
    box-shadow: 0 4px 18px rgba(201, 148, 42, 0.3);
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.cockpit-action-btn:hover {
    background: var(--brass-gradient-hover);
    box-shadow: 0 6px 26px rgba(201, 148, 42, 0.45);
    transform: translateY(-1px);
}
.cockpit-action-btn:active {
    transform: translateY(1px);
}

/* Subtle Active Chair Indicator */
.chair-serving-border {
    border-color: var(--brass-primary) !important;
    box-shadow: 0 0 20px -2px rgba(201, 148, 42, 0.2);
}

/* Toast System */
#dz-toast-container {
    position: fixed;
    bottom: 5.5rem;
    left: 1.25rem;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}
@media (min-width: 1024px) {
    #dz-toast-container {
        bottom: 1.5rem;
    }
}
.dz-toast {
    pointer-events: auto;
    min-width: 280px;
    max-width: 380px;
    background: #0C1017;
    border: 1px solid var(--border-brass);
    padding: 0.75rem 1rem;
    border-radius: 0.625rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85);
    color: #F1F5F9;
    font-size: 0.8125rem;
}

/* =====================================================================
 * LIGHT MODE ARTISAN OVERRIDES (Impeccable Architectural Warm Paper)
 * Standards: https://impeccable.style/
 * ===================================================================== */
html.light body {
    background-color: var(--canvas) !important;
    color: var(--text-primary) !important;
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(180, 83, 9, 0.04) 0%, transparent 60%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.02) 1px, transparent 1px);
    background-size: 100% 100%, 100% 32px;
}

html.light ::selection {
    background: rgba(180, 83, 9, 0.2);
    color: #0F172A;
}

html.light ::-webkit-scrollbar-track {
    background: #F1F5F9;
}
html.light ::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}
html.light ::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* Navigation & Header Surfaces */
nav {
    min-height: 58px;
}
nav, nav * {
    box-sizing: border-box;
}

/* Base Nav Links (Strict Single-Line & Balanced Height) */
.nav-link-inactive {
    color: #94A3B8;
    white-space: nowrap !important;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    line-height: 1.25;
}
.nav-link-inactive:hover {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.05);
}

.nav-link-active {
    color: #FBBF24 !important;
    background-color: rgba(201, 148, 42, 0.12) !important;
    border: 1px solid rgba(201, 148, 42, 0.3) !important;
    white-space: nowrap !important;
    font-weight: 700 !important;
    display: inline-flex;
    align-items: center;
    line-height: 1.25;
}

html.light nav {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid #E2E8F0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

html.light nav a,
html.light nav button {
    white-space: nowrap !important;
}

html.light .nav-link-inactive {
    color: #475569 !important;
    border-color: transparent !important;
}
html.light .nav-link-inactive:hover {
    color: #0F172A !important;
    background-color: #F1F5F9 !important;
}

html.light .nav-link-active {
    color: #92400E !important;
    background-color: #FEF3C7 !important;
    border-color: #FDE68A !important;
    box-shadow: 0 1px 2px rgba(180, 83, 9, 0.05) !important;
}

html.light nav a.text-slate-300,
html.light nav .text-slate-300 {
    color: #475569 !important;
}
html.light nav a.text-slate-200,
html.light nav .text-slate-200 {
    color: #0F172A !important;
}

html.light nav a:hover {
    color: #0F172A !important;
}

/* ==========================================================================
   Executive Dashboard Sidebar & Topbar (Admin & Barber Console)
   ========================================================================== */
.dashboard-sidebar {
    background-color: #090C13;
    border-color: rgba(255, 255, 255, 0.08);
}
.dashboard-topbar {
    background-color: rgba(8, 10, 15, 0.95);
    border-color: rgba(255, 255, 255, 0.07);
}

.sidebar-nav-item.active-admin {
    background-color: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.28);
    color: #34D399 !important;
}
.sidebar-nav-item.active-barber {
    background-color: rgba(201, 148, 42, 0.14);
    border: 1px solid rgba(201, 148, 42, 0.32);
    color: #FBBF24 !important;
}
.sidebar-nav-item.inactive {
    color: #94A3B8;
    border: 1px solid transparent;
}
.sidebar-nav-item.inactive:hover {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.04);
}

/* Light Mode Dashboard Sidebar & Topbar */
html.light .dashboard-sidebar {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 2px 0 16px rgba(15, 23, 42, 0.04) !important;
}
html.light .dashboard-topbar {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}
html.light .dashboard-sidebar .text-white,
html.light .dashboard-topbar .text-white {
    color: #0F172A !important;
}
html.light .dashboard-sidebar .text-slate-400,
html.light .dashboard-topbar .text-slate-400 {
    color: #64748B !important;
}
html.light .dashboard-sidebar .bg-black\/20 {
    background-color: #F8FAFC !important;
}

html.light .sidebar-nav-item.active-admin {
    background-color: #ECFDF5 !important;
    border-color: #A7F3D0 !important;
    color: #047857 !important;
}
html.light .sidebar-nav-item.active-admin i {
    color: #059669 !important;
}

html.light .sidebar-nav-item.active-barber {
    background-color: #FEF3C7 !important;
    border-color: #FDE68A !important;
    color: #92400E !important;
}
html.light .sidebar-nav-item.active-barber i {
    color: #B45309 !important;
}

html.light .sidebar-nav-item.inactive {
    color: #475569 !important;
}
html.light .sidebar-nav-item.inactive:hover {
    color: #0F172A !important;
    background-color: #F1F5F9 !important;
}

/* Mobile Top App Bar & Drawer Sheet */
.mobile-drawer-sheet {
    background-color: rgba(12, 16, 23, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
html.light .mobile-drawer-sheet {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1) !important;
}
html.light .mobile-drawer-sheet .text-white {
    color: #0F172A !important;
}
html.light .mobile-drawer-sheet .text-slate-200,
html.light .mobile-drawer-sheet .text-slate-300 {
    color: #334155 !important;
}
html.light .mobile-drawer-sheet .text-slate-400 {
    color: #64748B !important;
}
html.light .mobile-drawer-sheet a:hover {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
}

/* Mobile Bottom Ergonomic Navigation Bar */
.mobile-bottom-bar {
    background-color: rgba(8, 10, 15, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}
html.light .mobile-bottom-bar {
    background-color: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid #E2E8F0 !important;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06) !important;
}

.mobile-tab-item {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
}
.mobile-tab-item:active {
    transform: scale(0.90);
}
.mobile-tab-item.active {
    color: var(--brass-primary);
}
html.light .mobile-tab-item.active {
    color: #92400E !important;
}
.mobile-tab-item.active .tab-icon-wrap {
    background-color: var(--brass-muted);
    border: 1px solid var(--border-brass);
}
html.light .mobile-tab-item.active .tab-icon-wrap {
    background-color: rgba(180, 83, 9, 0.08) !important;
    border-color: rgba(180, 83, 9, 0.25) !important;
}
.mobile-tab-item.inactive {
    color: var(--text-secondary);
}
html.light .mobile-tab-item.inactive {
    color: #64748B !important;
}
html.light .mobile-tab-item.inactive:hover {
    color: #0F172A !important;
}

html.light aside {
    background-color: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid #E2E8F0 !important;
    box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.04) !important;
}

html.light aside a {
    color: #64748B !important;
}

html.light footer {
    background-color: #F1F5F9 !important;
    border-top: 1px solid #E2E8F0 !important;
    color: #475569 !important;
}
html.light footer .text-white {
    color: #0F172A !important;
}
html.light footer .text-slate-400 {
    color: #64748B !important;
}
html.light footer a:hover {
    color: #92400E !important;
}

/* Primary Card Surfaces */
html.light .craft-surface,
html.light .obsidian-card,
html.light .salon-craft-card,
html.light .ticket-pass,
html.light .faq-item {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(15, 23, 42, 0.03) !important;
}

html.light .faq-item .text-white {
    color: #0F172A !important;
}
html.light .faq-item .text-slate-400 {
    color: #64748B !important;
}
html.light .faq-item .bg-white\/\[0\.02\] {
    background-color: #F8FAFC !important;
}

html.light .salon-craft-card:hover {
    border-color: #B45309 !important;
    box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.1), 0 0 16px -2px rgba(180, 83, 9, 0.15) !important;
}

/* Nested Cards & Grid Item Surfaces */
html.light .bg-\[\#07090D\],
html.light .bg-\[\#07090E\],
html.light .bg-\[\#080A0F\],
html.light .bg-\[\#090C12\],
html.light .bg-\[\#0A0D14\],
html.light .bg-\[\#0B0F16\],
html.light .bg-\[\#0B0F17\],
html.light .bg-\[\#0C1017\],
html.light .bg-\[\#0E121B\],
html.light .bg-\[\#0E131E\],
html.light .bg-\[\#101520\],
html.light .bg-\[\#111622\],
html.light .bg-\[\#12151E\],
html.light .bg-\[\#121722\],
html.light .bg-\[\#131824\],
html.light .bg-\[\#141A26\],
html.light .bg-\[\#151A26\],
html.light .bg-\[\#161A26\],
html.light .bg-\[\#182030\],
html.light .bg-\[\#0F131D\] {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
}

/* Inner Summary Banners & Overlays */
html.light .bg-black\/40,
html.light .bg-black\/50,
html.light .bg-black\/60,
html.light .bg-black\/70,
html.light .bg-black\/75,
html.light .bg-black\/80,
html.light .bg-black\/85,
html.light .bg-\[\#090B10\]\/95 {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
}

/* Gradients */
html.light .from-\[\#141A26\] {
    --tw-gradient-from: #FFFFFF !important;
}
html.light .to-\[\#0E121B\] {
    --tw-gradient-to: #F1F4F9 !important;
}

/* Borders */
html.light .border-white\/\[0\.04\],
html.light .border-white\/\[0\.05\],
html.light .border-white\/\[0\.06\],
html.light .border-white\/\[0\.07\],
html.light .border-white\/\[0\.08\],
html.light .border-white\/\[0\.1\],
html.light .border-white\/\[0\.12\] {
    border-color: #E2E8F0 !important;
}

html.light .bg-white\/\[0\.02\],
html.light .bg-white\/\[0\.03\],
html.light .bg-white\/\[0\.04\],
html.light .bg-white\/\[0\.05\],
html.light .bg-white\/\[0\.06\] {
    background-color: #F1F5F9 !important;
}

/* High-Contrast Light Mode Typography */
html.light .text-white {
    color: #0F172A !important;
}
html.light .text-slate-100 {
    color: #1E293B !important;
}
html.light .text-slate-200 {
    color: #334155 !important;
}
html.light .text-slate-300 {
    color: #475569 !important;
}
html.light .text-slate-400 {
    color: #64748B !important;
}
html.light .text-slate-500 {
    color: #64748B !important;
}

/* Universal Light Mode Contrast for Amber / Brass Accents */
html.light .text-amber-300,
html.light .text-amber-400,
html.light .text-amber-500,
html.light .text-yellow-400,
html.light .text-yellow-500 {
    color: #92400E !important; /* Deep warm brass - AAA contrast on light */
}
html.light .text-amber-400\/90,
html.light .text-amber-400\/80 {
    color: #B45309 !important;
}

html.light a.text-amber-400,
html.light a.text-amber-300,
html.light a[class*="text-amber"] {
    color: #92400E !important;
}
html.light a.text-amber-400:hover,
html.light a.text-amber-300:hover,
html.light a[class*="text-amber"]:hover {
    color: #78350F !important;
}

html.light .text-emerald-400 {
    color: #047857 !important;
}
html.light .text-rose-400 {
    color: #BE123C !important;
}
html.light .text-sky-400 {
    color: #0369A1 !important;
}

/* Light Mode Badges & Soft Tints */
html.light .bg-amber-400\/10,
html.light .bg-amber-400\/15,
html.light .bg-amber-400\/20,
html.light .bg-amber-500\/10 {
    background-color: rgba(180, 83, 9, 0.08) !important;
}
html.light .border-amber-400,
html.light .border-amber-400\/20,
html.light .border-amber-400\/25,
html.light .border-amber-400\/30,
html.light .border-amber-400\/40,
html.light .border-amber-500\/25 {
    border-color: rgba(180, 83, 9, 0.25) !important;
}

html.light .bg-emerald-400\/10,
html.light .bg-emerald-500\/10 {
    background-color: rgba(4, 120, 87, 0.08) !important;
}
html.light .border-emerald-400\/20,
html.light .border-emerald-400\/25,
html.light .border-emerald-400\/30 {
    border-color: rgba(4, 120, 87, 0.25) !important;
}

/* Checked & Selected States */
html.light .peer:checked ~ div,
html.light .peer:checked ~ label,
html.light label:has(input:checked) {
    border-color: #B45309 !important;
    background-color: rgba(180, 83, 9, 0.05) !important;
}

/* Inputs, Textareas & Selects */
html.light input,
html.light textarea,
html.light select {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
html.light input:focus,
html.light textarea:focus,
html.light select:focus {
    border-color: #B45309 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.15) !important;
}
html.light input::placeholder,
html.light textarea::placeholder {
    color: #94A3B8 !important;
}

/* Buttons in Light Mode */
html.light .btn-brass {
    background: linear-gradient(180deg, #D97706 0%, #B45309 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid #92400E !important;
    box-shadow: 0 4px 12px rgba(180, 83, 9, 0.22) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
html.light .btn-brass,
html.light .btn-brass *,
html.light .btn-brass span,
html.light .btn-brass i,
html.light .btn-brass strong {
    color: #FFFFFF !important;
}
html.light .btn-brass:hover {
    background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 16px rgba(180, 83, 9, 0.28) !important;
}

html.light .btn-surface {
    background: #FFFFFF;
    color: #0F172A;
    border-color: #CBD5E1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
html.light .btn-surface:hover {
    background: #F8FAFC;
    border-color: #94A3B8;
}

html.light .btn-brass-outline {
    background: transparent !important;
    color: #92400E !important;
    border: 1px solid #92400E !important;
}
html.light .btn-brass-outline:hover {
    background: rgba(180, 83, 9, 0.08) !important;
    color: #78350F !important;
}
html.light .btn-brass-outline * {
    color: #92400E !important;
}

/* Auth & Navigation Anchor Links */
html.light a.text-amber-400,
html.light a.text-amber-300,
html.light .craft-surface a.text-amber-400,
html.light .craft-surface a.text-amber-300 {
    color: #B45309 !important;
    font-weight: 700 !important;
}
html.light a.text-amber-400:hover,
html.light a.text-amber-300:hover,
html.light .craft-surface a.text-amber-400:hover,
html.light .craft-surface a.text-amber-300:hover {
    color: #78350F !important;
    text-decoration: underline !important;
}

/* Quick Demo & Auth Boxes */
.quick-demo-box {
    background-color: #141A26;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
html.light .quick-demo-box {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
}
html.light .quick-demo-box .text-amber-400 {
    color: #92400E !important;
}
.quick-demo-btn {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.quick-demo-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
}
html.light .quick-demo-btn {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
html.light .quick-demo-btn:hover {
    background-color: #F1F5F9 !important;
    border-color: #94A3B8 !important;
}
html.light .quick-demo-btn .text-white,
html.light .quick-demo-btn .text-slate-200 {
    color: #0F172A !important;
}
html.light .quick-demo-btn .text-amber-300,
html.light .quick-demo-btn .text-amber-400 {
    color: #92400E !important;
}
html.light .quick-demo-btn .text-emerald-300,
html.light .quick-demo-btn .text-emerald-400 {
    color: #047857 !important;
}
html.light .quick-demo-btn .text-slate-400 {
    color: #64748B !important;
}

.craft-input {
    background-color: #141A26;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}
.craft-input:focus {
    border-color: rgba(201, 148, 42, 0.6);
}
html.light .craft-input {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
html.light .craft-input:focus {
    border-color: #B45309 !important;
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.15) !important;
}

.role-tabs-wrap {
    background-color: #161A26;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
html.light .role-tabs-wrap {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
}
.role-tab-btn.active {
    background-color: #D97706;
    color: #0F172A;
}
html.light .role-tab-btn.active {
    background: linear-gradient(180deg, #D97706 0%, #B45309 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(180, 83, 9, 0.25) !important;
}
.role-tab-btn.inactive {
    color: #94A3B8;
}
.role-tab-btn.inactive:hover {
    color: #FFFFFF;
}
html.light .role-tab-btn.inactive {
    color: #475569 !important;
}
html.light .role-tab-btn.inactive:hover {
    color: #0F172A !important;
}

/* Universal Checkbox & Radio Polish */
html.light input[type="checkbox"],
html.light input[type="radio"],
html.light .calc-checkbox {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    accent-color: #B45309 !important;
    color: #B45309 !important;
}
html.light input[type="checkbox"]:checked,
html.light input[type="radio"]:checked,
html.light .calc-checkbox:checked {
    background-color: #B45309 !important;
    border-color: #B45309 !important;
    accent-color: #B45309 !important;
    color: #FFFFFF !important;
}

/* Interactive Calculator & Pricing Matrix Specifics */
.calc-card {
    background-color: var(--surface-card, #131824);
    border: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
    transition: all 0.2s ease;
}
.calc-card:hover {
    border-color: var(--border-brass-bright, rgba(201, 148, 42, 0.6));
}
.calc-card:has(input:checked),
.calc-card.active,
.calc-card.is-selected {
    border-color: var(--brass-primary, #C9942A);
    background-color: var(--brass-muted, rgba(201, 148, 42, 0.1));
}

html.light .calc-card {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
html.light .calc-card:hover {
    border-color: #B45309 !important;
    background-color: #FFFFFF !important;
}
html.light .calc-card:has(input:checked),
html.light .calc-card.active,
html.light .calc-card.is-selected {
    border-color: #B45309 !important;
    background-color: #FFFBEB !important;
    box-shadow: 0 2px 10px rgba(180, 83, 9, 0.12) !important;
}
html.light .calc-card .text-white {
    color: #0F172A !important;
}
html.light .calc-card:hover .text-white {
    color: #92400E !important;
}
html.light .calc-card:has(input:checked) .text-white,
html.light .calc-card.is-selected .text-white {
    color: #78350F !important;
    font-weight: 700 !important;
}
html.light .calc-card .text-slate-400 {
    color: #64748B !important;
}
html.light .calc-card:has(input:checked) .text-slate-400,
html.light .calc-card.is-selected .text-slate-400 {
    color: #92400E !important;
}
html.light .calc-card .text-amber-400 {
    color: #92400E !important;
}
html.light .calc-card:has(input:checked) .text-amber-400,
html.light .calc-card.is-selected .text-amber-400 {
    color: #78350F !important;
    font-weight: 800 !important;
}

.calc-banner {
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
html.light .calc-banner {
    background-color: #F8FAFC !important;
    border-color: #CBD5E1 !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}
html.light .calc-banner .text-white {
    color: #0F172A !important;
}
html.light .calc-banner .text-slate-400 {
    color: #64748B !important;
}
html.light .calc-banner .text-amber-400 {
    color: #92400E !important;
}
html.light .calc-banner .bg-white\/\[0\.08\],
html.light .calc-banner .bg-white\/10 {
    background-color: #CBD5E1 !important;
}

/* Salon Detail Booking Components */
.chair-card,
.salon-service-card {
    background-color: #151A26;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
}
.chair-card:hover,
.salon-service-card:hover {
    border-color: var(--border-brass-bright);
}
.peer:checked ~ .chair-card,
.salon-service-card:has(input:checked),
.salon-service-card.is-selected {
    border-color: var(--brass-primary);
    background-color: var(--brass-muted);
}

html.light .chair-card,
html.light .salon-service-card {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
html.light .chair-card:hover,
html.light .salon-service-card:hover {
    border-color: #B45309 !important;
    background-color: #FFFFFF !important;
}
html.light .peer:checked ~ .chair-card,
html.light .salon-service-card:has(input:checked),
html.light .salon-service-card.is-selected {
    border-color: #B45309 !important;
    background-color: #FFFBEB !important;
    box-shadow: 0 2px 10px rgba(180, 83, 9, 0.12) !important;
}
html.light .chair-card .text-white,
html.light .salon-service-card .text-white {
    color: #0F172A !important;
}
html.light .chair-card:hover .text-white,
html.light .salon-service-card:hover .text-white {
    color: #92400E !important;
}
html.light .peer:checked ~ .chair-card .text-white,
html.light .salon-service-card:has(input:checked) .text-white,
html.light .salon-service-card.is-selected .text-white {
    color: #78350F !important;
    font-weight: 700 !important;
}
html.light .chair-card .text-slate-400,
html.light .salon-service-card .text-slate-400 {
    color: #64748B !important;
}
html.light .salon-service-card:has(input:checked) .text-slate-400,
html.light .salon-service-card.is-selected .text-slate-400 {
    color: #92400E !important;
}
html.light .chair-card .text-slate-200,
html.light .chair-card .text-slate-300,
html.light .salon-service-card .text-slate-200,
html.light .salon-service-card .text-slate-300 {
    color: #334155 !important;
}
html.light .chair-card .text-amber-400,
html.light .salon-service-card .text-amber-400 {
    color: #92400E !important;
}
html.light .salon-service-card:has(input:checked) .text-amber-400,
html.light .salon-service-card.is-selected .text-amber-400 {
    color: #78350F !important;
    font-weight: 800 !important;
}
html.light .salon-service-card .text-amber-300,
html.light .salon-service-card .bg-amber-400\/15 {
    color: #92400E !important;
    background-color: #FEF3C7 !important;
    border-color: #FDE68A !important;
}

.salon-summary-box {
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
html.light .salon-summary-box {
    background-color: #F8FAFC !important;
    border-color: #CBD5E1 !important;
}
html.light .salon-summary-box .text-white {
    color: #0F172A !important;
}
html.light .salon-summary-box .text-slate-300,
html.light .salon-summary-box .text-slate-400 {
    color: #64748B !important;
}
html.light .salon-summary-box .text-amber-400 {
    color: #92400E !important;
}

.salon-sticky-bar {
    background-color: rgba(9, 11, 16, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
html.light .salon-sticky-bar {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14) !important;
}
html.light .salon-sticky-bar .text-white {
    color: #0F172A !important;
}
html.light .salon-sticky-bar .text-slate-300 {
    color: #475569 !important;
}
html.light .salon-sticky-bar .text-emerald-400 {
    color: #047857 !important;
}

/* Table Contrast Overrides in Light Mode */
html.light thead tr {
    border-bottom: 2px solid #E2E8F0 !important;
    background-color: #F8FAFC !important;
}
html.light thead th {
    color: #475569 !important;
    font-weight: 700 !important;
}
html.light tbody tr {
    border-bottom: 1px solid #E2E8F0 !important;
}
html.light tbody tr:hover {
    background-color: #F8FAFC !important;
}
html.light table tbody td strong.text-white {
    color: #0F172A !important;
}
html.light table tbody td span.text-slate-400 {
    color: #64748B !important;
}
html.light table tbody td.text-slate-300 {
    color: #334155 !important;
}
html.light table tbody td.text-slate-400 {
    color: #64748B !important;
}
html.light table tbody td.text-amber-400 {
    color: #92400E !important;
    font-weight: 800 !important;
}
html.light table tbody td.text-white {
    color: #0F172A !important;
    font-weight: 700 !important;
}

/* Hero Photo Covers in Light Mode (Keeps Crisp Light Contrast over Dark Image Overlays) */
html.light .salon-hero-cover .text-white {
    color: #FFFFFF !important;
}
html.light .salon-hero-cover .text-slate-300,
html.light .salon-hero-cover .text-slate-200 {
    color: #E2E8F0 !important;
}
html.light .salon-hero-cover .text-slate-400 {
    color: #CBD5E1 !important;
}
html.light .salon-hero-cover .text-amber-400 {
    color: #FBBF24 !important;
}
html.light .salon-hero-cover .bg-black\/75,
html.light .salon-hero-cover .bg-black\/80,
html.light .salon-hero-cover .bg-black\/85 {
    background-color: rgba(15, 23, 42, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

/* Modals & Dropdowns */
html.light .craft-modal {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15) !important;
}

html.light .ticket-perforations::before,
html.light .ticket-perforations::after {
    background: var(--canvas) !important;
    border-color: #E2E8F0 !important;
}

html.light .dz-toast {
    background: #FFFFFF;
    color: #0F172A;
    border-color: #B45309;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
}
html.light .dz-toast .text-slate-100 {
    color: #0F172A !important;
}

/* ── PWA & Mobile Touch Optimization (Instant Response, Zero Tap Latency) ── */
* {
    -webkit-tap-highlight-color: transparent;
}

button, a, input, select, textarea, label {
    touch-action: manipulation;
}

/* Ensure bottom space for PWA floating island nav on mobile */
@media (max-width: 1023px) {
    main, .dashboard-canvas {
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Native hardware acceleration for smooth 60fps scrolling and tap animations */
.pwa-floating-bar, .craft-surface, .plan-card, .clean-stat-card {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ── Deep Frosted Glass Bottom Bar (Zero Bleed-Through) ── */
.pwa-bar-shell {
    background: rgba(9, 13, 23, 0.96) !important;
    backdrop-filter: blur(36px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(36px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 20px 48px -6px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 24px -4px rgba(245, 158, 11, 0.12) !important;
}

html.light .pwa-bar-shell {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(36px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(36px) saturate(200%) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
}

/* ── Light Mode Cockpit & Executive Cards ── */
html.light .kpi-card, :root[data-theme="light"] .kpi-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.05) !important;
}
html.light .kpi-card::before, :root[data-theme="light"] .kpi-card::before {
    background: radial-gradient(circle at 80% 0%, rgba(217, 119, 6, 0.05) 0%, transparent 60%) !important;
}
html.light .kpi-card:hover, :root[data-theme="light"] .kpi-card:hover {
    border-color: rgba(217, 119, 6, 0.35) !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08) !important;
}
html.light .chair-active-card, :root[data-theme="light"] .chair-active-card {
    background: #FFFFFF !important;
    border: 1.5px solid rgba(217, 119, 6, 0.45) !important;
    box-shadow: 0 10px 30px -5px rgba(217, 119, 6, 0.12), 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}
html.light .chair-active-card::before, :root[data-theme="light"] .chair-active-card::before {
    background: linear-gradient(90deg, transparent, #D97706, #F59E0B, #D97706, transparent) !important;
}
html.light .chair-empty-card, :root[data-theme="light"] .chair-empty-card {
    background: #F8FAFC !important;
    border: 1.5px dashed #CBD5E1 !important;
}
html.light .chair-tab.inactive, :root[data-theme="light"] .chair-tab.inactive {
    color: #475569 !important;
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}
html.light .chair-tab.inactive:hover, :root[data-theme="light"] .chair-tab.inactive:hover {
    color: #0F172A !important;
    background: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
}
html.light .chair-tab.active, :root[data-theme="light"] .chair-tab.active {
    background: #D97706 !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 10px rgba(217, 119, 6, 0.3) !important;
}
html.light .amount-badge, :root[data-theme="light"] .amount-badge {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
}
html.light .elapsed-chip, :root[data-theme="light"] .elapsed-chip {
    background: #FEF3C7 !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    color: #92400E !important;
}
html.light .cockpit-breadcrumb, :root[data-theme="light"] .cockpit-breadcrumb {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    color: #475569 !important;
}
html.light .status-pill-group, :root[data-theme="light"] .status-pill-group {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
}
html.light .status-pill, :root[data-theme="light"] .status-pill {
    color: #64748B !important;
}
html.light .status-pill:hover, :root[data-theme="light"] .status-pill:hover {
    color: #0F172A !important;
    background: #F1F5F9 !important;
}
html.light .sound-btn, :root[data-theme="light"] .sound-btn {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    color: #64748B !important;
}
html.light .sound-btn.sound-on, :root[data-theme="light"] .sound-btn.sound-on {
    color: #B45309 !important;
    background: #FEF3C7 !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}
html.light .btn-start-day, :root[data-theme="light"] .btn-start-day {
    background: #FEF3C7 !important;
    border-color: rgba(245, 158, 11, 0.45) !important;
    color: #92400E !important;
}
html.light .btn-walkin, :root[data-theme="light"] .btn-walkin {
    background: #FFFBEB !important;
    border-color: rgba(245, 158, 11, 0.45) !important;
    color: #92400E !important;
}
html.light .btn-next-client, :root[data-theme="light"] .btn-next-client {
    background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.35) !important;
}
html.light .queue-row, :root[data-theme="light"] .queue-row {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
}
html.light .queue-row:hover, :root[data-theme="light"] .queue-row:hover {
    background: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
}
html.light .queue-rank, :root[data-theme="light"] .queue-rank {
    background: #FEF3C7 !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    color: #92400E !important;
}
html.light .bg-amber-400\/8,
html.light .bg-amber-400\/10,
:root[data-theme="light"] .bg-amber-400\/8,
:root[data-theme="light"] .bg-amber-400\/10 {
    background-color: #FEF3C7 !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #92400E !important;
}

.mobile-bottom-fade {
    background: linear-gradient(to top, rgba(7, 9, 13, 0.95) 0%, rgba(7, 9, 13, 0.7) 50%, transparent 100%);
}
html.light .mobile-bottom-fade,
:root[data-theme="light"] .mobile-bottom-fade {
    background: linear-gradient(to top, rgba(248, 250, 252, 0.96) 0%, rgba(248, 250, 252, 0.7) 50%, transparent 100%) !important;
}

/* ── Bank & SaaS Subscription Light Mode Tokens ── */
html.light .bank-pass-card.bank-baridimob,
:root[data-theme="light"] .bank-pass-card.bank-baridimob {
    background: linear-gradient(135deg, #ECFDF5 0%, #FFFFFF 100%) !important;
    border: 1.5px solid #86EFAC !important;
    box-shadow: 0 4px 18px -2px rgba(16, 185, 129, 0.12) !important;
}
html.light .bank-pass-card.bank-ccp,
:root[data-theme="light"] .bank-pass-card.bank-ccp {
    background: linear-gradient(135deg, #FFFBEB 0%, #FFFFFF 100%) !important;
    border: 1.5px solid #FDE68A !important;
    box-shadow: 0 4px 18px -2px rgba(245, 158, 11, 0.12) !important;
}
html.light .bank-number-box,
:root[data-theme="light"] .bank-number-box {
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
html.light .bank-number-val,
:root[data-theme="light"] .bank-number-val {
    color: #0F172A !important;
}
html.light .bank-card-label,
:root[data-theme="light"] .bank-card-label {
    color: #475569 !important;
}
html.light .bank-holder-val,
:root[data-theme="light"] .bank-holder-val {
    color: #0F172A !important;
}
html.light .bank-amount-val,
:root[data-theme="light"] .bank-amount-val {
    color: #B45309 !important;
}
html.light .receipt-dropzone,
:root[data-theme="light"] .receipt-dropzone {
    background: #F8FAFC !important;
    border-color: #CBD5E1 !important;
}
html.light .receipt-dropzone:hover,
:root[data-theme="light"] .receipt-dropzone:hover {
    border-color: #D97706 !important;
    background: #FFFBEB !important;
}