/**
 * Oakscroft ERP — Unified Theme System (Dark Acid Rain / Cyber-Premium)
 * Primary Background: Void #0A0F1A
 * Neon Accents: Electric Cyan #00E5FF, Matrix Green #00FF41, Neon Magenta #FF00FF, Flash Yellow #FFFF00
 * High Contrast White/Neon Text — NO GREY CARDS, NO WHITE CARDS
 */

/* ==========================================================================
   1. ROOT THEME VARIABLES
   ========================================================================== */
:root, [data-theme="light"] {
    /* LIGHT MODE — Clean, Premium, High Readability */
    --theme-mode: light;
    --bg: #F5F7FA;
    --surface: #FFFFFF;
    --text: #111827;
    --text-secondary: #64748B;
    --border: #E2E8F0;

    --cyan: #00E5FF;
    --green: #00FF41;
    --magenta: #FF00FF;
    --yellow: #FFFF00;

    /* Semantic & Functional Aliases */
    --bg-base: #F5F7FA;
    --bg-color: #F5F7FA;
    --surface-primary: #FFFFFF;
    --surface-secondary: #F8FAFC;
    --surface-glass: #FFFFFF;
    --surface-glass-solid: #FFFFFF;
    --surface-glass-hover: #F8FAFC;
    --surface-elevated: #FFFFFF;
    --glass-bg: #FFFFFF;
    --glass-bg-hover: #F8FAFC;
    --glass-border: #E2E8F0;
    --glass-border-hover: #CBD5E1;
    --border-glass: #E2E8F0;
    --border-glass-strong: #CBD5E1;

    --text-primary: #111827;
    --text-main: #111827;
    --text-muted: #64748B;
    --text-labels: #64748B;
    --text-headings: #111827;

    /* Accents — Refined Neon Accents on Clean Light Surfaces */
    --accent-primary: #00E5FF;
    --accent-hover: #00B4D8;
    --accent-cyan: #00E5FF;
    --accent-green: #00FF41;
    --accent-yellow: #FFFF00;
    --accent-magenta: #FF00FF;
    --accent-red: #EF4444;
    --accent-blue: #00E5FF;
    --accent-blue-hover: #00B4D8;
    --accent-blue-subtle: rgba(0, 229, 255, 0.08);
    --accent-blue-border: rgba(0, 229, 255, 0.25);
    --accent-emerald: #00FF41;
    --accent-emerald-subtle: rgba(0, 255, 65, 0.08);
    --accent-amber: #FFFF00;
    --accent-amber-subtle: rgba(255, 255, 0, 0.08);
    --accent-rose: #EF4444;
    --accent-rose-subtle: rgba(239, 68, 68, 0.08);
    --accent-purple: #FF00FF;

    /* Soft Shadows & Clean Borders */
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 10px 25px -5px rgba(0, 0, 0, 0.04);
    --card-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 16px 32px -4px rgba(0, 0, 0, 0.08);
    --cyan-glow-subtle: 0 0 0 1px rgba(0, 229, 255, 0.25);

    /* Inputs */
    --input-bg: #FFFFFF;
    --input-border: #E2E8F0;
    --input-text: #111827;
    --input-placeholder: #94A3B8;

    /* Tables */
    --table-header-bg: #F8FAFC;
    --table-border: #E2E8F0;
    --table-row-hover: #F8FAFC;
    --table-row-selected: #EFF6FF;
}

[data-theme="dark"] {
    /* DARK MODE — Exact Acid Rain Cyber-Premium Reference Palette */
    --theme-mode: dark;
    --bg: #0A0F1A;
    --surface: #0A0F1A;
    --text: #FFFFFF;
    --text-secondary: #C4CCD8;
    --border: rgba(0, 229, 255, 0.20);

    --cyan: #00E5FF;
    --green: #00FF41;
    --magenta: #FF00FF;
    --yellow: #FFFF00;

    /* Functional & Semantic Aliases */
    --bg-base: #0A0F1A;
    --bg-color: #0A0F1A;
    --surface-primary: #0A0F1A;
    --surface-secondary: #0D1527;
    --surface-glass: #0A0F1A;
    --surface-glass-solid: #0A0F1A;
    --surface-glass-hover: #0D1527;
    --surface-elevated: #0D1527;
    --glass-bg: #0A0F1A;
    --glass-bg-hover: #0D1527;
    --glass-border: rgba(0, 229, 255, 0.20);
    --glass-border-hover: rgba(0, 229, 255, 0.35);
    --border-glass: rgba(0, 229, 255, 0.20);
    --border-glass-strong: rgba(0, 229, 255, 0.35);
    --border-accent-cyan: rgba(0, 229, 255, 0.40);
    
    /* High Visibility Typography */
    --text-primary: #FFFFFF;
    --text-main: #FFFFFF;
    --text-muted: #8F9AAA;
    --text-labels: #AEB8C6;
    --text-headings: #00E5FF;

    /* Exact Acid Rain Neon Accents */
    --accent-primary: #00E5FF;
    --accent-hover: #33EBFF;
    --accent-cyan: #00E5FF;
    --accent-green: #00FF41;
    --accent-yellow: #FFFF00;
    --accent-magenta: #FF00FF;
    --accent-red: #FF3B30;
    --accent-blue: #00E5FF;
    --accent-blue-hover: #33EBFF;
    --accent-blue-subtle: rgba(0, 229, 255, 0.12);
    --accent-blue-border: rgba(0, 229, 255, 0.30);
    --accent-emerald: #00FF41;
    --accent-emerald-subtle: rgba(0, 255, 65, 0.12);
    --accent-amber: #FFFF00;
    --accent-amber-subtle: rgba(255, 255, 0, 0.12);
    --accent-rose: #FF3B30;
    --accent-rose-subtle: rgba(255, 59, 48, 0.12);
    --accent-purple: #FF00FF;

    /* Subtle Dark Cyber Shadows & Glows */
    --card-shadow: 0 12px 35px rgba(0, 0, 0, 0.65), 0 0 15px rgba(0, 229, 255, 0.05);
    --card-shadow-hover: 0 16px 42px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 229, 255, 0.12);
    --cyan-glow-subtle: 0 0 0 1px rgba(0, 229, 255, 0.25), 0 0 16px rgba(0, 229, 255, 0.12);

    /* Inputs */
    --input-bg: #060B14;
    --input-border: rgba(0, 229, 255, 0.25);
    --input-text: #FFFFFF;
    --input-placeholder: #8F9AAA;

    /* Tables */
    --table-header-bg: #070D18;
    --table-border: rgba(0, 229, 255, 0.12);
    --table-row-hover: rgba(0, 229, 255, 0.05);
    --table-row-selected: rgba(0, 229, 255, 0.09);
}

/* ==========================================================================
   2. DARK ACID RAIN IS THE PERMANENT THEME
   Light Mode has been removed. All [data-theme="dark"] selectors below
   remain active because head.php forces data-theme="dark" on <html>.
   ========================================================================== */
/* ==========================================================================
   3. GLOBAL DARK MODE OVERRIDES (VOID BACKGROUND & HIGH CONTRAST)
   ========================================================================== */
[data-theme="dark"] body {
    background-color: #0A0F1A !important;
    background-image: 
        radial-gradient(circle at 12% 0%, rgba(0, 229, 255, 0.05) 0%, transparent 45%),
        radial-gradient(circle at 88% 10%, rgba(0, 255, 65, 0.03) 0%, transparent 45%),
        radial-gradient(circle at 50% 90%, rgba(0, 229, 255, 0.02) 0%, transparent 50%) !important;
    background-attachment: fixed !important;
    color: #FFFFFF !important;
}

/* Headings: Electric Cyan #00E5FF */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #00E5FF !important;
}

[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] label {
    color: inherit;
}

[data-theme="dark"] .subtitle,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .summary-label,
[data-theme="dark"] .info-label,
[data-theme="dark"] .filter-label,
[data-theme="dark"] .footer-version,
[data-theme="dark"] .footer-credit,
[data-theme="dark"] .footer-brand {
    color: #C4CCD8 !important;
}

[data-theme="dark"] strong,
[data-theme="dark"] b {
    color: #FFFFFF !important;
}

/* Interactive Links */
[data-theme="dark"] a:not(.btn):not(.btn-primary):not(.btn-danger):not(.export-btn):not(.btn-filter):not(.btn-print):not(.btn-wa):not(.stat-link):not(.theme-toggle-btn) {
    color: #00E5FF;
}
[data-theme="dark"] a:hover {
    color: #33EBFF;
}

/* ==========================================================================
   4. CARDS & CONTAINERS (VOID DARK SURFACES — NO GREY OR WHITE CARDS!)
   ========================================================================== */
[data-theme="dark"] .card,
[data-theme="dark"] .glass,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .help-card,
[data-theme="dark"] .login-card,
[data-theme="dark"] .header-card,
[data-theme="dark"] .summary-card,
[data-theme="dark"] .top-box,
[data-theme="dark"] .search-box,
[data-theme="dark"] .toolbar,
[data-theme="dark"] .filter-card,
[data-theme="dark"] .table-card,
[data-theme="dark"] .section,
[data-theme="dark"] .filter-bar,
[data-theme="dark"] .hero-summary,
[data-theme="dark"] .target-card,
[data-theme="dark"] .activity-feed,
[data-theme="dark"] .timeline-item,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .chart-container,
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background: #fff"],
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:#ffffff"],
[data-theme="dark"] div[style*="background: #ffffff"] {
    background: #0A0F1A !important;
    background-color: #0A0F1A !important;
    border: 1px solid rgba(0, 229, 255, 0.20) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.65), 0 0 15px rgba(0, 229, 255, 0.05) !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .stat-card:hover,
[data-theme="dark"] .metric-card:hover,
[data-theme="dark"] .top-box:hover {
    border-color: rgba(0, 229, 255, 0.40) !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 229, 255, 0.12) !important;
}

/* Card titles and headers */
[data-theme="dark"] .card h3,
[data-theme="dark"] .metric-title,
[data-theme="dark"] .card-title,
[data-theme="dark"] .secondary-header h4,
[data-theme="dark"] .top-box h4 {
    color: #00E5FF !important;
    border-color: rgba(0, 229, 255, 0.15) !important;
}

[data-theme="dark"] .card h3 i,
[data-theme="dark"] .metric-title i,
[data-theme="dark"] .card-title i,
[data-theme="dark"] .top-box h4 i {
    color: #00E5FF !important;
}

/* Inner summary wells */
[data-theme="dark"] .summary-item,
[data-theme="dark"] .info-row,
[data-theme="dark"] .hero-meta-item,
[data-theme="dark"] .stat-box {
    background: #0D1527 !important;
    border: 1px solid rgba(0, 229, 255, 0.15) !important;
    border-radius: 12px !important;
}

[data-theme="dark"] .summary-val,
[data-theme="dark"] .info-val {
    color: #FFFFFF !important;
}

/* KPI numbers / stats: High Contrast White & Neon */
[data-theme="dark"] .stat,
[data-theme="dark"] .metric-value,
[data-theme="dark"] .card h2,
[data-theme="dark"] .top-box p,
[data-theme="dark"] .stat-val {
    color: #FFFFFF !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .stat-link {
    color: #00E5FF !important;
    font-weight: 600 !important;
}
[data-theme="dark"] .stat-link:hover {
    color: #33EBFF !important;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

/* Highlighted positive stats */
[data-theme="dark"] .highlight-green,
[data-theme="dark"] .money[style*="color:green"],
[data-theme="dark"] .money[style*="color: green"],
[data-theme="dark"] .text-success,
[data-theme="dark"] .metric-positive {
    color: #00FF41 !important;
    text-shadow: 0 0 10px rgba(0, 255, 65, 0.3) !important;
}

/* Warnings / Attention stats */
[data-theme="dark"] .text-warning,
[data-theme="dark"] .money[style*="color:orange"],
[data-theme="dark"] .metric-warning {
    color: #FFFF00 !important;
    text-shadow: 0 0 10px rgba(255, 255, 0, 0.3) !important;
}

/* Special indicators / Magenta */
[data-theme="dark"] .text-magenta,
[data-theme="dark"] .metric-special {
    color: #FF00FF !important;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.3) !important;
}

/* ==========================================================================
   5. HEADERS, TOOLBARS & NAVIGATION
   ========================================================================== */
[data-theme="dark"] header,
[data-theme="dark"] .app-header,
[data-theme="dark"] .header-top,
[data-theme="dark"] .header-bar,
[data-theme="dark"] .topbar {
    background: #0A0F1A !important;
    border: 1px solid rgba(0, 229, 255, 0.20) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .brand-meta h1,
[data-theme="dark"] .header-top h1,
[data-theme="dark"] .title-area h2,
[data-theme="dark"] .page-title,
[data-theme="dark"] .logo {
    color: #00E5FF !important;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
}

[data-theme="dark"] .logo span,
[data-theme="dark"] .brand-meta p,
[data-theme="dark"] .header-top .subtitle,
[data-theme="dark"] .title-area p {
    color: #C4CCD8 !important;
}

/* Welcome user pills */
[data-theme="dark"] .welcome-text,
[data-theme="dark"] .user,
[data-theme="dark"] .user-meta {
    color: #C4CCD8 !important;
}
[data-theme="dark"] .welcome-text span,
[data-theme="dark"] .user strong {
    color: #FFFFFF !important;
}
[data-theme="dark"] .user,
[data-theme="dark"] .welcome-text {
    background: #0D1527 !important;
    border: 1px solid rgba(0, 229, 255, 0.20) !important;
    border-radius: 12px;
}

/* Clocks */
[data-theme="dark"] .live-clock-box,
[data-theme="dark"] .live-clock {
    background: #0D1527 !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important;
    color: #00E5FF !important;
    border-radius: 12px;
}
[data-theme="dark"] #digital-clock,
[data-theme="dark"] #liveClock {
    color: #00E5FF !important;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}

/* Navigation Buttons */
[data-theme="dark"] .btn-nav,
[data-theme="dark"] .btn-back,
[data-theme="dark"] .btn-header-link,
[data-theme="dark"] .btn-action:not(.btn-logout) {
    background: #0D1527 !important;
    border: 1px solid rgba(0, 229, 255, 0.20) !important;
    border-radius: 12px !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .btn-nav:hover,
[data-theme="dark"] .btn-back:hover,
[data-theme="dark"] .btn-header-link:hover,
[data-theme="dark"] .btn-action:hover {
    background: #111C33 !important;
    color: #00E5FF !important;
    border-color: #00E5FF !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.2) !important;
}

/* Logout Button */
[data-theme="dark"] .btn-logout {
    background: rgba(255, 59, 48, 0.1) !important;
    border: 1px solid rgba(255, 59, 48, 0.3) !important;
    color: #FF6B6B !important;
    border-radius: 12px !important;
}
[data-theme="dark"] .btn-logout:hover {
    background: rgba(255, 59, 48, 0.22) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 14px rgba(255, 59, 48, 0.35) !important;
}

/* WhatsApp Button */
[data-theme="dark"] .btn-wa {
    background: linear-gradient(135deg, #00A844 0%, #00FF41 100%) !important;
    color: #0A0F1A !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 255, 65, 0.3) !important;
}
[data-theme="dark"] .btn-wa:hover {
    background: #00FF41 !important;
    box-shadow: 0 6px 22px rgba(0, 255, 65, 0.45), 0 0 16px rgba(0, 255, 65, 0.25) !important;
    color: #0A0F1A !important;
}

/* ==========================================================================
   6. FORMS, INPUTS & DROPDOWNS (HIGH CONTRAST CYBER SURFACES)
   ========================================================================== */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .select-modern,
[data-theme="dark"] .select-filter,
[data-theme="dark"] .input-field,
[data-theme="dark"] .date-input,
[data-theme="dark"] #raw_address {
    background-color: #060B14 !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important;
    color: #FFFFFF !important;
    border-radius: 12px !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #8F9AAA !important;
}

/* Focus State with Electric Cyan Glow */
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] .select-modern:focus,
[data-theme="dark"] .input-field:focus,
[data-theme="dark"] #raw_address:focus {
    border-color: #00E5FF !important;
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.25), 0 0 16px rgba(0, 229, 255, 0.20) !important;
    outline: none !important;
    background-color: #070E1A !important;
}

/* Native select options */
[data-theme="dark"] select option {
    background-color: #0A0F1A !important;
    color: #FFFFFF !important;
}

/* Cart & Quantity Controls */
[data-theme="dark"] .qty-wrapper {
    background: #060B14 !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important;
    border-radius: 12px;
}
[data-theme="dark"] .btn-qty {
    background: #0D1527 !important;
    border: 1px solid rgba(0, 229, 255, 0.20) !important;
    color: #00E5FF !important;
    border-radius: 8px;
}
[data-theme="dark"] .btn-qty:hover {
    background: #00E5FF !important;
    color: #0A0F1A !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}
[data-theme="dark"] .qty-input {
    background: transparent !important;
    color: #FFFFFF !important;
    border: none !important;
}
[data-theme="dark"] #couponDisplay {
    background: #0D1527 !important;
    border: 1px solid rgba(0, 229, 255, 0.20) !important;
    color: #00FF41 !important;
    border-radius: 12px;
}

/* Add Product Button */
[data-theme="dark"] .btn-add-product {
    background: rgba(0, 229, 255, 0.12) !important;
    border: 1px solid #00E5FF !important;
    color: #00E5FF !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
}
[data-theme="dark"] .btn-add-product:hover {
    background: #00E5FF !important;
    color: #0A0F1A !important;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.45) !important;
}

/* Selected Product Cards / Cart */
[data-theme="dark"] .selected-product-card,
[data-theme="dark"] .cart-table,
[data-theme="dark"] .product-item,
[data-theme="dark"] .cart-item-row {
    background: #0D1527 !important;
    border: 1px solid rgba(0, 229, 255, 0.20) !important;
    border-radius: 12px !important;
    color: #FFFFFF !important;
}
[data-theme="dark"] .product-item-header {
    color: #00E5FF !important;
}

/* Counter Sale Card */
[data-theme="dark"] .counter-sale-card {
    background: #0A0F1A !important;
    border: 1px solid rgba(0, 229, 255, 0.20) !important;
}
[data-theme="dark"] .toggle-wrapper {
    color: #FFFFFF !important;
}
[data-theme="dark"] .custom-switch {
    background: #060B14 !important;
    border: 1px solid rgba(0, 229, 255, 0.3) !important;
}
[data-theme="dark"] .switch-box:checked + .custom-switch {
    background: #00FF41 !important;
    border-color: #00FF41 !important;
    box-shadow: 0 0 12px rgba(0, 255, 65, 0.45) !important;
}

/* Primary Action Buttons (Save Customer / Print Selected / Login) */
[data-theme="dark"] #submitBtn,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary-action,
[data-theme="dark"] #loginBtn,
[data-theme="dark"] #saveBtn,
[data-theme="dark"] .btn-submit,
[data-theme="dark"] .btn-print,
[data-theme="dark"] #printBtnTop,
[data-theme="dark"] #printBtnBottom {
    background: linear-gradient(135deg, #00B4D8 0%, #0077B6 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(0, 229, 255, 0.40) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 18px rgba(0, 229, 255, 0.3) !important;
    font-weight: 700 !important;
}

[data-theme="dark"] #submitBtn:hover,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary-action:hover,
[data-theme="dark"] #loginBtn:hover,
[data-theme="dark"] #saveBtn:hover,
[data-theme="dark"] .btn-print:hover,
[data-theme="dark"] #printBtnTop:hover,
[data-theme="dark"] #printBtnBottom:hover {
    background: linear-gradient(135deg, #00E5FF 0%, #0096C7 100%) !important;
    box-shadow: 0 6px 24px rgba(0, 229, 255, 0.5), 0 0 16px rgba(0, 229, 255, 0.25) !important;
    color: #0A0F1A !important;
}

/* Filter buttons */
[data-theme="dark"] .btn-filter,
[data-theme="dark"] .search-btn,
[data-theme="dark"] .btn-blue {
    background: #0D1527 !important;
    color: #00E5FF !important;
    border: 1px solid #00E5FF !important;
    border-radius: 10px !important;
}
[data-theme="dark"] .btn-filter:hover,
[data-theme="dark"] .search-btn:hover,
[data-theme="dark"] .btn-blue:hover {
    background: #00E5FF !important;
    color: #0A0F1A !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.35) !important;
}

/* Reset / Gray buttons */
[data-theme="dark"] .btn-reset,
[data-theme="dark"] .reset-btn,
[data-theme="dark"] .btn-gray {
    background: #0D1527 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #C4CCD8 !important;
    border-radius: 10px !important;
}
[data-theme="dark"] .btn-reset:hover,
[data-theme="dark"] .reset-btn:hover,
[data-theme="dark"] .btn-gray:hover {
    background: #111C33 !important;
    color: #FFFFFF !important;
}

/* Export Excel / CSV Buttons */
[data-theme="dark"] .export-btn {
    border: 1px solid rgba(0, 229, 255, 0.25) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

/* Address preview box in parse-customer */
[data-theme="dark"] .address-box {
    background: #0D1527 !important;
    border: 1px solid rgba(0, 229, 255, 0.20) !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   7. TABLES & QUEUE DATA (HIGH CONTRAST VOID TABLE)
   ========================================================================== */
[data-theme="dark"] table {
    background: #0A0F1A !important;
    border-color: rgba(0, 229, 255, 0.15) !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] th {
    background: #070D18 !important;
    color: #00E5FF !important;
    border-bottom: 1px solid rgba(0, 229, 255, 0.25) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[data-theme="dark"] td {
    background: transparent !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid rgba(0, 229, 255, 0.10) !important;
}

[data-theme="dark"] tbody tr:hover td {
    background: rgba(0, 229, 255, 0.05) !important;
}

/* Checkbox selected row highlight */
[data-theme="dark"] tr.row-selected td,
[data-theme="dark"] tr:has(input[type="checkbox"]:checked) td {
    background: rgba(0, 229, 255, 0.08) !important;
}

/* Mobile responsive card rows in duplicate check / my customers */
@media (max-width: 768px) {
    [data-theme="dark"] tbody tr {
        background: #0A0F1A !important;
        border: 1px solid rgba(0, 229, 255, 0.20) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
    }
    [data-theme="dark"] tbody tr:hover {
        background: #0D1527 !important;
    }
}

/* ==========================================================================
   8. BADGES & STATUS INDICATORS
   ========================================================================== */
/* Purchase Badge */
[data-theme="dark"] .purchase-badge,
[data-theme="dark"] .badge-id {
    background: rgba(0, 229, 255, 0.12) !important;
    color: #00E5FF !important;
    border: 1px solid rgba(0, 229, 255, 0.35) !important;
    font-family: monospace;
    font-weight: 700;
}

/* Pending Print Badge (Yellow Attention) */
[data-theme="dark"] .status-pending,
[data-theme="dark"] .badge-pending,
[data-theme="dark"] .badge-warning,
[data-theme="dark"] .status-badge {
    background: rgba(255, 255, 0, 0.12) !important;
    color: #FFFF00 !important;
    border: 1px solid rgba(255, 255, 0, 0.35) !important;
    text-shadow: 0 0 10px rgba(255, 255, 0, 0.25);
    font-weight: 700;
}

/* Printed / Success Badge (Matrix Green) */
[data-theme="dark"] .status-printed,
[data-theme="dark"] .badge-printed,
[data-theme="dark"] .badge-success {
    background: rgba(0, 255, 65, 0.12) !important;
    color: #00FF41 !important;
    border: 1px solid rgba(0, 255, 65, 0.35) !important;
    text-shadow: 0 0 10px rgba(0, 255, 65, 0.25);
    font-weight: 700;
}

/* Resigned Status (Red) — Always Prominent */
[data-theme="dark"] .badge-danger,
[data-theme="dark"] .badge-resigned,
[data-theme="dark"] .status-resigned,
[data-theme="dark"] span.badge-resigned {
    background: rgba(255, 59, 48, 0.15) !important;
    color: #FF3B30 !important;
    border: 1px solid rgba(255, 59, 48, 0.40) !important;
    font-weight: 700;
}

/* Default / Neutral Badge */
[data-theme="dark"] .badge-default,
[data-theme="dark"] .badge-generic {
    background: #0D1527 !important;
    color: #C4CCD8 !important;
    border: 1px solid rgba(0, 229, 255, 0.15) !important;
}

/* Queue count pill in print queue */
[data-theme="dark"] .queue-stats-badge {
    background: #0D1527 !important;
    border: 1px solid rgba(0, 229, 255, 0.20) !important;
    color: #C4CCD8 !important;
}
[data-theme="dark"] .queue-stats-badge strong {
    color: #FFFF00 !important;
}

/* Action buttons inside table */
[data-theme="dark"] .btn-view-customer,
[data-theme="dark"] .view-btn {
    background: rgba(0, 229, 255, 0.12) !important;
    color: #00E5FF !important;
    border: 1px solid rgba(0, 229, 255, 0.3) !important;
    border-radius: 8px !important;
}
[data-theme="dark"] .btn-view-customer:hover,
[data-theme="dark"] .view-btn:hover {
    background: #00E5FF !important;
    color: #0A0F1A !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.35) !important;
}

[data-theme="dark"] .btn-delete-customer {
    background: rgba(255, 59, 48, 0.12) !important;
    color: #FF6B6B !important;
    border: 1px solid rgba(255, 59, 48, 0.3) !important;
    border-radius: 8px !important;
}

/* Progress bar in customer-saved */
[data-theme="dark"] .progress-track {
    background: #060B14 !important;
    border: 1px solid rgba(0, 229, 255, 0.2) !important;
}
[data-theme="dark"] .progress-fill {
    background: linear-gradient(90deg, #00E5FF 0%, #00FF41 100%) !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.5) !important;
}

/* Dialog text in customer-saved */
[data-theme="dark"] .dialogue-text {
    color: #FFFFFF !important;
}
[data-theme="dark"] .salesgirl-name {
    color: #00E5FF !important;
    text-shadow: 0 0 16px rgba(0, 229, 255, 0.35);
}

/* Alert Boxes */
[data-theme="dark"] .alert-box,
[data-theme="dark"] .error {
    border-radius: 12px !important;
}
[data-theme="dark"] .alert-success {
    background: rgba(0, 255, 65, 0.1) !important;
    border: 1px solid rgba(0, 255, 65, 0.35) !important;
    color: #00FF41 !important;
}
[data-theme="dark"] .alert-error,
[data-theme="dark"] .error {
    background: rgba(255, 59, 48, 0.1) !important;
    border: 1px solid rgba(255, 59, 48, 0.35) !important;
    color: #FF6B6B !important;
}

/* ==========================================================================
   10. MOBILE RESPONSIVE OPTIMIZATION
   ========================================================================== */
@media (max-width: 768px) {
    header, .app-header, .header-top, .header-bar {
        padding: 12px 14px !important;
    }
    .user-meta, .header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
}



/* ==========================================================================
   11. REDUCED MOTION PREFERENCE
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

/* ==========================================================================
   12. STRICT PRINT PROTECTION (PHYSICAL LABELS MUST NEVER BE DARK)
   ========================================================================== */
@media print {
    html,
    body,
    [data-theme="dark"],
    [data-theme="dark"] body {
        background: #ffffff !important;
        color: #000000 !important;
    }
    [data-theme="dark"] * {
        background-color: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
        color: #000000 !important;
    }
}