/* ═══════════════════════════════════════════════════════════════════════════════
   🎨 ELSAJANA ERP 2026 - THE 7 OFFICIAL MASTER THEMES (WCAG AAA CERTIFIED)
   ═══════════════════════════════════════════════════════════════════════════════
   1. warm_cream        : ورق سيبيا وبيج دافئ (Warm Beige / Sepia Paper - مريح للعين) [☀️ فاتح]
   2. ultra_white       : أبيض مكتبي ناصع (Ultra-Clean White - نهار مكتبي بأعلى وضوح) [☀️ فاتح]
   3. exec_gray         : رمادي تنفيذي بارد (Cool Executive Gray - أناقة الشركات والبنوك) [☀️ فاتح]
   4. midnight_obsidian : كحلي فاحم ملكي (Royal Midnight Navy - كحلي مصرفي سحيق) [🌙 داكن]
   5. mocha_brown       : بني ملكي دافئ (Mocha Royal Brown - فخامة الشوكولاتة الداكنة) [🌙 داكن]
   6. pure_oled         : سواد مطلق فاحم (Pure OLED Black - سواد تام وتوفير بطارية) [🌙 داكن]
   7. slate_twilight    : سليت فحمي مسائي (Twilight Slate - رمادي فحمي مسائي هادئ) [🌙 داكن]
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. 📜 WARM BEIGE / SEPIA PAPER (بيج دافئ وورق سيبيا) ── */
:root[data-theme="warm_cream"],
html[data-theme="warm_cream"],
body[data-theme="warm_cream"],
[data-theme="warm_cream"],
[data-theme="beige"],
[data-theme="warm-alabaster"] {
  --bg-color: #fbf7ee !important;
  --bg-secondary: #f5eedd !important;
  --surface: #ffffff !important;
  --surface-color: #ffffff !important;
  --surface-hover: #f5eedd !important;
  --border: #dcd1be !important;
  --border-color: #dcd1be !important;
  --border-glass: rgba(180, 83, 9, 0.15) !important;
  --bg-dark: #fbf7ee !important;
  --panel-bg: #fdfbf7 !important;
  --text-primary: #1c1917 !important;
  --text-secondary: #382e25 !important;
  --text-muted: #5c4d40 !important;
  --text-main: #1c1917 !important;
  --text-dim: #7c6858 !important;
  --primary-accent: #b45309 !important;
  --accent-color: #b45309 !important;
  --primary: #b45309 !important;
  --amber: #b45309 !important;
  --green: #15803d !important;
  --red: #b91c1c !important;
  --blue: #0369a1 !important;
}

/* ── 2. ⚪ ULTRA-CLEAN WHITE (أبيض ناصع نقي) ── */
:root[data-theme="ultra_white"],
html[data-theme="ultra_white"],
body[data-theme="ultra_white"],
[data-theme="ultra_white"],
[data-theme="pure-platinum"],
[data-theme="white"] {
  --bg-color: #f8fafc !important;
  --bg-secondary: #ffffff !important;
  --surface: #ffffff !important;
  --surface-color: #ffffff !important;
  --surface-hover: #f1f5f9 !important;
  --border: #cbd5e1 !important;
  --border-color: #cbd5e1 !important;
  --border-glass: rgba(0, 0, 0, 0.1) !important;
  --bg-dark: #f8fafc !important;
  --panel-bg: #ffffff !important;
  --text-primary: #0f172a !important;
  --text-secondary: #1e293b !important;
  --text-muted: #475569 !important;
  --text-main: #0f172a !important;
  --text-dim: #64748b !important;
  --primary-accent: #2563eb !important;
  --accent-color: #2563eb !important;
  --primary: #2563eb !important;
  --amber: #b45309 !important;
  --green: #047857 !important;
  --red: #dc2626 !important;
  --blue: #2563eb !important;
}

/* ── 3. 💼 COOL EXECUTIVE GRAY (رمادي تنفيذي بارد) ── */
:root[data-theme="exec_gray"],
html[data-theme="exec_gray"],
body[data-theme="exec_gray"],
[data-theme="exec_gray"],
[data-theme="pearl-platinum"] {
  --bg-color: #f1f5f9 !important;
  --bg-secondary: #ffffff !important;
  --surface: #ffffff !important;
  --surface-color: #ffffff !important;
  --surface-hover: #e2e8f0 !important;
  --border: #cbd5e1 !important;
  --border-color: #cbd5e1 !important;
  --border-glass: rgba(0, 0, 0, 0.1) !important;
  --bg-dark: #f1f5f9 !important;
  --panel-bg: #ffffff !important;
  --text-primary: #0f172a !important;
  --text-secondary: #1e293b !important;
  --text-muted: #475569 !important;
  --text-main: #0f172a !important;
  --text-dim: #64748b !important;
  --primary-accent: #1d4ed8 !important;
  --accent-color: #1d4ed8 !important;
  --primary: #1d4ed8 !important;
  --amber: #b45309 !important;
  --green: #047857 !important;
  --red: #b91c1c !important;
  --blue: #1d4ed8 !important;
}

/* ── 4. 💎 ROYAL MIDNIGHT NAVY (كحلي فاحم ملكي) ── */
:root[data-theme="midnight_obsidian"],
html[data-theme="midnight_obsidian"],
body[data-theme="midnight_obsidian"],
[data-theme="midnight_obsidian"],
[data-theme="midnight-executive"],
[data-theme="navy-kohl"],
[data-theme="navy"] {
  --bg-color: #0a1128 !important;
  --bg-secondary: #0b132b !important;
  --surface: #111c44 !important;
  --surface-color: #111c44 !important;
  --surface-hover: #1c2a5e !important;
  --border: rgba(56, 189, 248, 0.25) !important;
  --border-color: rgba(56, 189, 248, 0.25) !important;
  --border-glass: rgba(56, 189, 248, 0.3) !important;
  --bg-dark: #0a1128 !important;
  --panel-bg: #111c44 !important;
  --text-primary: #ffffff !important;
  --text-secondary: #e0f2fe !important;
  --text-muted: #93c5fd !important;
  --text-main: #ffffff !important;
  --text-dim: #60a5fa !important;
  --primary-accent: #00f2fe !important;
  --accent-color: #00f2fe !important;
  --primary: #00f2fe !important;
  --amber: #fbbf24 !important;
  --green: #10b981 !important;
  --red: #ef4444 !important;
  --blue: #38bdf8 !important;
}

/* ── 5. ☕ MOCHA ROYAL BROWN (بني ملكي دافئ فاخر) ── */
:root[data-theme="mocha_brown"],
html[data-theme="mocha_brown"],
body[data-theme="mocha_brown"],
[data-theme="mocha_brown"],
[data-theme="sepia-brown"],
[data-theme="desert-mocha"],
[data-theme="brown"] {
  --bg-color: #1a0f0a !important;
  --bg-secondary: #26150e !important;
  --surface: #2e1a12 !important;
  --surface-color: #2e1a12 !important;
  --surface-hover: #3d2319 !important;
  --border: #78350f !important;
  --border-color: #78350f !important;
  --border-glass: rgba(245, 158, 11, 0.25) !important;
  --bg-dark: #1a0f0a !important;
  --panel-bg: #2e1a12 !important;
  --text-primary: #fffbeb !important;
  --text-secondary: #fef3c7 !important;
  --text-muted: #fde68a !important;
  --text-main: #fffbeb !important;
  --text-dim: #d4a373 !important;
  --primary-accent: #f59e0b !important;
  --accent-color: #f59e0b !important;
  --primary: #f59e0b !important;
  --amber: #f59e0b !important;
  --green: #34d399 !important;
  --red: #f87171 !important;
  --blue: #38bdf8 !important;
}

/* ── 6. 🖤 PURE OLED BLACK (سواد مطلق فاحم) ── */
:root[data-theme="pure_oled"],
html[data-theme="pure_oled"],
body[data-theme="pure_oled"],
[data-theme="pure_oled"],
[data-theme="obsidian-charcoal"],
[data-theme="midnight"],
[data-theme="black"] {
  --bg-color: #000000 !important;
  --bg-secondary: #050505 !important;
  --surface: #0a0a0a !important;
  --surface-color: #0a0a0a !important;
  --surface-hover: #171717 !important;
  --border: #262626 !important;
  --border-color: #262626 !important;
  --border-glass: rgba(255, 255, 255, 0.15) !important;
  --bg-dark: #000000 !important;
  --panel-bg: #0a0a0a !important;
  --text-primary: #ffffff !important;
  --text-secondary: #f5f5f5 !important;
  --text-muted: #a3a3a3 !important;
  --text-main: #ffffff !important;
  --text-dim: #737373 !important;
  --primary-accent: #10b981 !important;
  --accent-color: #10b981 !important;
  --primary: #10b981 !important;
  --amber: #f59e0b !important;
  --green: #10b981 !important;
  --red: #ef4444 !important;
  --blue: #38bdf8 !important;
}

/* ── 7. 🌌 TWILIGHT SLATE (سليت فحمي مسائي) ── */
:root[data-theme="slate_twilight"],
html[data-theme="slate_twilight"],
body[data-theme="slate_twilight"],
[data-theme="slate_twilight"],
[data-theme="twilight-indigo"],
[data-theme="slate"] {
  --bg-color: #0f172a !important;
  --bg-secondary: #1e293b !important;
  --surface: #1e293b !important;
  --surface-color: #1e293b !important;
  --surface-hover: #334155 !important;
  --border: #334155 !important;
  --border-color: #334155 !important;
  --border-glass: rgba(56, 189, 248, 0.15) !important;
  --bg-dark: #0f172a !important;
  --panel-bg: #1e293b !important;
  --text-primary: #f8fafc !important;
  --text-secondary: #e2e8f0 !important;
  --text-muted: #94a3b8 !important;
  --text-main: #f8fafc !important;
  --text-dim: #64748b !important;
  --primary-accent: #38bdf8 !important;
  --accent-color: #38bdf8 !important;
  --primary: #38bdf8 !important;
  --amber: #fbbf24 !important;
  --green: #34d399 !important;
  --red: #f87171 !important;
  --blue: #38bdf8 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   🌟 UNIVERSAL CONTRAST & ZERO DARK ISLANDS RULES FOR ALL SCREENS
   ═══════════════════════════════════════════════════════════════════════════════
   Guarantees that when Beige (warm_cream), Ultra White, or Exec Gray is active:
   1. All screens (صرف نقدية، حركة مالية، مبيعات، مشتريات، الجوال) take the exact light background.
   2. All text across all screens is deep, sharp, high contrast, and perfectly readable.
   3. No dark brown or slate backgrounds with black text ever occur!
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Universal Light Theme Enforcements */
html.light-theme,
html.light-theme body,
html[data-theme="warm_cream"] body,
html[data-theme="ultra_white"] body,
html[data-theme="exec_gray"] body {
  background-color: var(--bg-color) !important;
  color: var(--text-main) !important;
}

/* Override all container cards, panels and split wrappers in light mode */
html.light-theme .pos-wrapper,
html.light-theme .main-panel,
html.light-theme .side-panel,
html.light-theme #main-form-panel,
html.light-theme .split-layout-wrapper,
html.light-theme .panel,
html.light-theme .card,
html.light-theme .table-container,
html.light-theme .magical-glass-header,
html.light-theme .bg-slate-950,
html.light-theme .bg-slate-900,
html.light-theme .bg-slate-800,
html.light-theme .mobile-device-outer,
html.light-theme #mobileContainer,
html.light-theme .amount-display-card,
html[data-theme="warm_cream"] .pos-wrapper,
html[data-theme="warm_cream"] .main-panel,
html[data-theme="warm_cream"] .side-panel,
html[data-theme="warm_cream"] #main-form-panel,
html[data-theme="warm_cream"] .split-layout-wrapper {
  background-color: var(--surface) !important;
  background-image: none !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

/* Override all labels and headings in light mode to guarantee high contrast dark text */
html.light-theme .label,
html.light-theme label,
html.light-theme h1, html.light-theme h2, html.light-theme h3, html.light-theme h4, html.light-theme h5,
html.light-theme th, html.light-theme td,
html.light-theme .panel-title,
html.light-theme .setting-title,
html.light-theme .brand-text h1,
html.light-theme .brand-text p,
html[data-theme="warm_cream"] .label,
html[data-theme="warm_cream"] label,
html[data-theme="warm_cream"] th,
html[data-theme="warm_cream"] td {
  color: var(--text-main) !important;
  text-shadow: none !important;
}

/* Override inputs, choices, textareas in light mode */
html.light-theme .form-input,
html.light-theme textarea.form-input,
html.light-theme input:not([type="checkbox"]):not([type="radio"]),
html.light-theme select,
html.light-theme .choices__inner,
html[data-theme="warm_cream"] .form-input,
html[data-theme="warm_cream"] textarea.form-input,
html[data-theme="warm_cream"] .choices__inner {
  background-color: #ffffff !important;
  color: var(--text-main) !important;
  border: 1.5px solid var(--border) !important;
  text-shadow: none !important;
}

html.light-theme .choices__list--dropdown,
html[data-theme="warm_cream"] .choices__list--dropdown {
  background-color: #ffffff !important;
  color: var(--text-main) !important;
  border: 1.5px solid var(--border) !important;
}

html.light-theme .choices__list--dropdown .choices__item--selectable,
html[data-theme="warm_cream"] .choices__list--dropdown .choices__item--selectable {
  color: var(--text-main) !important;
}

/* Specific styling for Beige (warm_cream) screen elements */
html[data-theme="warm_cream"] body {
  background-color: #fbf7ee !important;
}
html[data-theme="warm_cream"] .main-panel,
html[data-theme="warm_cream"] .side-panel,
html[data-theme="warm_cream"] .card,
html[data-theme="warm_cream"] .panel {
  background-color: #ffffff !important;
  border: 1.5px solid #dcd1be !important;
  box-shadow: 0 4px 20px rgba(180, 83, 9, 0.06) !important;
}
html[data-theme="warm_cream"] #amount-local {
  background-color: #fef3c7 !important;
  color: #991b1b !important;
  border: 2px solid #b45309 !important;
}

/* Specific styling for Mocha Royal Brown screen elements */
html[data-theme="mocha_brown"] body {
  background-color: #1a0f0a !important;
  color: #fffbeb !important;
}
html[data-theme="mocha_brown"] .main-panel,
html[data-theme="mocha_brown"] .side-panel,
html[data-theme="mocha_brown"] .card,
html[data-theme="mocha_brown"] .panel,
html[data-theme="mocha_brown"] .split-layout-wrapper {
  background-color: #2b1810 !important;
  border: 1.5px solid #78350f !important;
  color: #fffbeb !important;
}
html[data-theme="mocha_brown"] .label,
html[data-theme="mocha_brown"] label,
html[data-theme="mocha_brown"] h1, html[data-theme="mocha_brown"] h2, html[data-theme="mocha_brown"] h3,
html[data-theme="mocha_brown"] th, html[data-theme="mocha_brown"] td,
html[data-theme="mocha_brown"] .panel-title {
  color: #fffbeb !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
}
html[data-theme="mocha_brown"] .form-input,
html[data-theme="mocha_brown"] textarea.form-input,
html[data-theme="mocha_brown"] input,
html[data-theme="mocha_brown"] select,
html[data-theme="mocha_brown"] .choices__inner {
  background-color: #1f120b !important;
  color: #fffbeb !important;
  border: 1.5px solid #78350f !important;
}
html[data-theme="mocha_brown"] #amount-local {
  background-color: #3b1d11 !important;
  color: #fbbf24 !important;
  border: 2px solid #d97706 !important;
}

/* Mobile Screen Full Theme Compliance (mobile-voucher, mobile-dashboard) */
html[data-theme="warm_cream"] #mobileDeviceOuter,
html[data-theme="warm_cream"] #mobileVoucherApp,
html[data-theme="warm_cream"] .mobile-voucher-header,
html[data-theme="warm_cream"] .mobile-content-card {
  background-color: #fbf7ee !important;
  color: #1c1917 !important;
}

html[data-theme="mocha_brown"] #mobileDeviceOuter,
html[data-theme="mocha_brown"] #mobileVoucherApp,
html[data-theme="mocha_brown"] .mobile-voucher-header,
html[data-theme="mocha_brown"] .mobile-content-card {
  background-color: #1a0f0a !important;
  color: #fffbeb !important;
}

html[data-theme="midnight_obsidian"] #mobileDeviceOuter,
html[data-theme="midnight_obsidian"] #mobileVoucherApp {
  background-color: #0a1128 !important;
  color: #ffffff !important;
}

html[data-theme="pure_oled"] #mobileDeviceOuter,
html[data-theme="pure_oled"] #mobileVoucherApp {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* c:\mynewapp\frontend-pwa\css\theme.css — v5.0 Professional Overhaul */


/* ═══════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES — Design Tokens
   ═══════════════════════════════════════════════════════ */
:root.light-theme {
  /* Core Colors */
  --bg-color:         #f1f5f9 !important;
  --bg-secondary:     #ffffff !important;
  --surface:          #ffffff !important;
  --surface-color:    #ffffff !important;
  --surface-hover:    rgba(241, 245, 249, 0.98) !important;
  --border:           rgba(0, 0, 0, 0.08) !important;
  --border-color:     rgba(0, 0, 0, 0.08) !important;
  --border-highlight: rgba(0, 0, 0, 0.15) !important;
  --glass-bg:         rgba(255, 255, 255, 0.9) !important;
  --glass-border:     rgba(0, 0, 0, 0.08) !important;
  --glass-border-hover: rgba(0, 0, 0, 0.15) !important;

  /* Page specific variable overrides */
  --bg-dark:          #f1f5f9 !important;
  --panel-bg:         #ffffff !important;
  --grn-primary:      #2563eb !important;
  --grn-hover:        #1d4ed8 !important;

  /* Text */
  --text-primary:     #000000 !important;
  --text-secondary:   #1e293b !important;
  --text-muted:       #475569 !important;
  --text-main:        #000000 !important;

  /* Brand Accents — Sleek Light Palette */
  --primary-accent:   #2563eb;   /* Deep Blue */
  --primary-glow:     rgba(37, 99, 235, 0.15);
  --success-color:    #059669;   /* Emerald Deep */
  --success-glow:     rgba(5, 150, 105, 0.15);
  --warning-color:    #d97706;   /* Amber Deep */
  --warning-glow:     rgba(217, 119, 6, 0.15);
  --danger-color:     #dc2626;   /* Red Deep */
  --danger-glow:      rgba(220, 38, 38, 0.15);
  --purple-color:     #7c3aed;   /* Purple Deep */
  --purple-glow:      rgba(124, 58, 237, 0.15);
  --pink-color:       #db2777;   /* Pink Deep */
  --pink-glow:        rgba(219, 39, 119, 0.15);

  /* Shadows */
  --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md:        0 8px 32px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255,255,255,0.8) inset;
  --shadow-lg:        0 20px 60px rgba(0, 0, 0, 0.12);
}

/* Light Theme Elements Helper Styling rules */
:root.light-theme body,
:root.light-theme p,
:root.light-theme td,
:root.light-theme th,
:root.light-theme tr,
:root.light-theme label,
:root.light-theme .panel-title,
:root.light-theme .kpi-title,
:root.light-theme .tot-lbl,
:root.light-theme .list-title,
:root.light-theme .list-sub,
:root.light-theme .sidebar-text,
:root.light-theme .header-company-name-top,
:root.light-theme .header-page-title,
:root.light-theme #header-user-name,
:root.light-theme #header-clock,
:root.light-theme #header-user-role,
:root.light-theme .brand-text h1,
:root.light-theme .brand-text p,
:root.light-theme h1,
:root.light-theme h2,
:root.light-theme h3,
:root.light-theme h4,
:root.light-theme h5,
:root.light-theme h6 {
  color: #000000 !important;
  text-shadow: none !important;
}

/* Header widgets override in Light Mode */
:root.light-theme .user-info {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
:root.light-theme #header-user-name {
  color: #000000 !important;
}
:root.light-theme #header-user-role {
  color: #1e3a8a !important; /* Dark Blue */
}
:root.light-theme .clock-container {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
:root.light-theme #header-clock {
  color: #059669 !important; /* High contrast green */
  text-shadow: none !important;
}
:root.light-theme #header-date-mini {
  color: #475569 !important;
}
:root.light-theme #online-users-badge {
  background: rgba(5, 150, 105, 0.1) !important;
  border-color: rgba(5, 150, 105, 0.2) !important;
}
:root.light-theme #online-users-badge span {
  color: #047857 !important;
}
:root.light-theme #online-users-count {
  color: #000000 !important;
}
:root.light-theme #global-exchange-rate-box {
  background: rgba(217, 119, 6, 0.1) !important;
  border-color: rgba(217, 119, 6, 0.2) !important;
}
:root.light-theme #global-exchange-rate-box span {
  color: #b45309 !important;
}
:root.light-theme #global-exchange-rate-val {
  color: #000000 !important;
}
:root.light-theme .islamic-ticker-container {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

:root.light-theme .ambient-bg {
  background: radial-gradient(circle at 50% 50%, #f8fafc 0%, #cbd5e1 100%) !important;
}
:root.light-theme .glass-panel,
:root.light-theme .panel,
:root.light-theme .neo-card,
:root.light-theme .editor-left,
:root.light-theme .info-card,
:root.light-theme .recent-receipts-card,
:root.light-theme .premium-card,
:root.light-theme .action-card,
:root.light-theme .action-row,
:root.light-theme .admin-actions-row,
:root.light-theme .operations-actions-row,
:root.light-theme div[style*="background: rgba(30, 41, 59, 0.4)"],
:root.light-theme div[style*="background: rgba(15, 23, 42, 0.65)"] {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #000000 !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05) !important;
}
:root.light-theme td, :root.light-theme th, :root.light-theme tr {
  border-color: rgba(0, 0, 0, 0.08) !important;
}
:root.light-theme input, :root.light-theme select, :root.light-theme select option, :root.light-theme textarea,
:root.light-theme .v-input,
:root.light-theme .wh-select,
:root.light-theme .qty-input,
:root.light-theme .ctrl-input {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
}
:root.light-theme .h-label,
:root.light-theme .form-label,
:root.light-theme .setting-title,
:root.light-theme .tot-lbl,
:root.light-theme .lbl {
  color: #334155 !important;
  text-shadow: none !important;
}
:root.light-theme .tot-val,
:root.light-theme .val {
  color: #0f172a !important;
}
:root.light-theme input::placeholder {
  color: #64748b !important;
}
/* Choices.js Light Theme Overrides */
:root.light-theme .choices__inner {
  background-color: #ffffff !important;
  border-color: rgba(0,0,0,0.18) !important;
  color: #000000 !important;
}
:root.light-theme .choices__inner .choices__item,
:root.light-theme .choices__inner .choices__item--selectable {
  color: #0f172a !important;
}
:root.light-theme .choices__list--dropdown {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: rgba(0,0,0,0.1) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}
:root.light-theme .choices__list--dropdown .choices__item--selectable {
  color: #1e293b !important;
}
:root.light-theme .choices__item--selectable.is-highlighted,
:root.light-theme .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #e2e8f0 !important;
  color: #000000 !important;
}
:root.light-theme .choices__input {
  color: #000000 !important;
  background-color: transparent !important;
}
:root.light-theme .choices[data-type*="select-one"]::after {
  border-color: #000000 transparent transparent transparent !important;
}
:root.light-theme .choices.is-open[data-type*="select-one"]::after {
  border-color: transparent transparent #000000 transparent !important;
}
:root.light-theme .choices__input::placeholder {
  color: #64748b !important;
}
:root.light-theme .quick-action-btn,
:root.light-theme .quick-action-btn.qa-purple {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  color: #000000 !important;
}
:root.light-theme .quick-action-btn:hover {
  background: #e2e8f0 !important;
  color: #000000 !important;
}
:root.light-theme .list-item {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #000000 !important;
}

/* Vibrant Light Mode Header Glow Colors */
:root.light-theme .premium-header {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}
:root.light-theme .premium-header.header-theme-dashboard { --glow-color: rgba(99, 102, 241, 0.8); }
:root.light-theme .premium-header.header-theme-sales { --glow-color: rgba(16, 185, 129, 0.8); }
:root.light-theme .premium-header.header-theme-purchase { --glow-color: rgba(168, 85, 247, 0.8); }
:root.light-theme .premium-header.header-theme-inventory { --glow-color: rgba(245, 158, 11, 0.8); }
:root.light-theme .premium-header.header-theme-masterdata { --glow-color: rgba(217, 70, 239, 0.8); }
:root.light-theme .premium-header.header-theme-reports { --glow-color: rgba(20, 184, 166, 0.8); }
:root.light-theme .premium-header.header-theme-alarm { --glow-color: rgba(239, 68, 68, 0.8); }
:root.light-theme .premium-header.header-theme-settings { --glow-color: rgba(100, 116, 139, 0.8); }
:root.light-theme .premium-header.header-theme-audit { --glow-color: rgba(244, 114, 182, 0.8); }

/* Light Theme Header Controls Glassmorphism */
:root.light-theme .user-info,
:root.light-theme .clock-container,
:root.light-theme #online-users-badge,
:root.light-theme #global-exchange-rate-box,
:root.light-theme .icon-btn,
:root.light-theme .fullscreen-toggle-btn,
:root.light-theme .theme-toggle-btn,
:root.light-theme .back-arrow-btn {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}

:root.light-theme .icon-btn:hover,
:root.light-theme .fullscreen-toggle-btn:hover,
:root.light-theme .theme-toggle-btn:hover,
:root.light-theme .back-arrow-btn:hover,
:root.light-theme .user-info:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
}

:root.light-theme #header-user-name,
:root.light-theme #header-clock,
:root.light-theme .fullscreen-toggle-btn,
:root.light-theme .theme-toggle-btn,
:root.light-theme .back-arrow-btn {
    color: #0f172a !important;
    text-shadow: none !important;
}

:root.light-theme #header-user-role,
:root.light-theme #header-date-mini {
    color: #334155 !important;
    text-shadow: none !important;
}

:root.light-theme #online-users-badge span,
:root.light-theme #online-users-count {
    color: #047857 !important;
    text-shadow: none !important;
}
:root.light-theme #global-exchange-rate-box span,
:root.light-theme #global-exchange-rate-val {
    color: #b45309 !important;
    text-shadow: none !important;
}

:root.light-theme .global-sidebar {
  background: #ffffff !important;
  border-left: 2.5px solid #000000 !important; /* Bold border */
  box-shadow: -4px 0 25px rgba(0,0,0,0.08) !important;
}
:root.light-theme .sidebar-header {
  border-bottom: 2px solid #000000 !important;
}
:root.light-theme .sidebar-logo-text {
  color: #000000 !important;
  font-weight: 900 !important;
}
:root.light-theme .sidebar-item {
  color: #000000 !important; /* Deep black text */
  transition: all 0.2s ease !important;
}
:root.light-theme .sidebar-item:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #000000 !important;
}
:root.light-theme .sidebar-item.active {
  background: rgba(37, 99, 235, 0.08) !important;
  color: #2563eb !important;
  border-right: 4px solid #2563eb !important;
}
:root.light-theme .sidebar-text {
  color: #000000 !important; /* Bold black text */
  font-weight: 800 !important; /* Thick bold */
  font-size: 19px !important; /* Increased font size by 1 step */
}
:root.light-theme .sidebar-item.active .sidebar-text {
  color: #2563eb !important;
}

/* Light Mode Deeper Icon Colors for High Contrast */
:root.light-theme .sidebar-item[onclick*="settings.php"] .sidebar-icon,
:root.light-theme .sidebar-item[data-href="settings.php"] .sidebar-icon { color: #65a30d !important; } /* Deeper lime */

:root.light-theme .sidebar-item[onclick*="dashboard-pro.php"] .sidebar-icon,
:root.light-theme .sidebar-item[data-href="dashboard-pro.php"] .sidebar-icon { color: #0891b2 !important; } /* Deeper cyan */

:root.light-theme .sidebar-item[onclick*="direct-sales.php"] .sidebar-icon,
:root.light-theme .sidebar-item[data-href="direct-sales.php"] .sidebar-icon { color: #059669 !important; } /* Deeper emerald */

:root.light-theme .sidebar-item[onclick*="purchase.php"] .sidebar-icon,
:root.light-theme .sidebar-item[data-href="purchase.php"] .sidebar-icon { color: #ea580c !important; } /* Deeper orange */

:root.light-theme .sidebar-item[onclick*="inventory-report.php"] .sidebar-icon,
:root.light-theme .sidebar-item[data-href="inventory-report.php"] .sidebar-icon { color: #6d28d9 !important; } /* Deeper purple */

:root.light-theme .sidebar-item[onclick*="vouchers-hub.php"] .sidebar-icon,
:root.light-theme .sidebar-item[data-href="vouchers-hub.php"] .sidebar-icon { color: #d97706 !important; } /* Deeper amber */

:root.light-theme .sidebar-item[onclick*="master-data.php"] .sidebar-icon,
:root.light-theme .sidebar-item[data-href="master-data.php"] .sidebar-icon { color: #db2777 !important; } /* Deeper pink */

:root.light-theme .sidebar-item[onclick*="analytics.php"] .sidebar-icon,
:root.light-theme .sidebar-item[data-href="analytics.php"] .sidebar-icon { color: #0284c7 !important; } /* Deeper sky blue */

:root.light-theme .sidebar-item[onclick*="alarm.php"] .sidebar-icon,
:root.light-theme .sidebar-item[data-href="alarm.php"] .sidebar-icon { color: #dc2626 !important; } /* Deeper red */

:root.light-theme .sidebar-item[onclick*="audit-log.php"] .sidebar-icon,
:root.light-theme .sidebar-item[data-href="audit-log.php"] .sidebar-icon { color: #1e293b !important; } /* Dark slate */

/* Sidebar Hover scale increase */
.sidebar-item:hover .sidebar-icon {
  transform: translateY(-50%) scale(1.3) !important;
}

:root {
  /* Core Colors */
  --bg-color:         #1E293B;
  --bg-secondary:     #0f172a;
  --surface-color:    rgba(15, 23, 42, 0.75);
  --surface-hover:    rgba(30, 41, 59, 0.9);

  /* Text */
  --text-primary:     #f8fafc;
  --text-secondary:   #94a3b8;
  --text-muted:       #64748b;

  /* Brand Accents — Cyberpunk Neon Palette */
  --primary-accent:   #3B82F6;   /* Electric Blue */
  --primary-glow:     rgba(59, 130, 246, 0.3);
  --success-color:    #10B981;   /* Emerald */
  --success-glow:     rgba(16, 185, 129, 0.3);
  --warning-color:    #f59e0b;   /* Amber */
  --warning-glow:     rgba(245, 158, 11, 0.3);
  --danger-color:     #ef4444;   /* Red */
  --danger-glow:      rgba(239, 68, 68, 0.3);
  --purple-color:     #a855f7;   /* Purple */
  --purple-glow:      rgba(168, 85, 247, 0.3);
  --pink-color:       #ec4899;   /* Pink */
  --pink-glow:        rgba(236, 72, 153, 0.3);

  /* Glassmorphism */
  --glass-bg:         rgba(10, 17, 40, 0.7);
  --glass-border:     rgba(34, 211, 238, 0.1);
  --glass-border-hover: rgba(34, 211, 238, 0.3);
  --glass-blur:       16px;

  /* Shadows */
  --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:        0 8px 32px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-lg:        0 20px 60px rgba(0, 0, 0, 0.8);
  --shadow-neon:      0 0 20px var(--primary-glow), 0 0 40px rgba(34, 211, 238, 0.1);

  /* Layout */
  --border-radius:    16px;
  --border-radius-sm: 10px;
  --border-radius-lg: 24px;

  /* Typography */
  --font-base:        'Tajawal', 'Inter', system-ui, sans-serif;
  --font-size:        15px;
  --font-size-sm:     13px;
  --font-size-lg:     18px;

  /* Sidebar dimensions */
  --sb-collapsed:     64px;
  --sb-expanded:      252px;
  --sb-bg:            rgba(2, 5, 16, 0.98);
  --sb-border:        rgba(34, 211, 238, 0.15);
  --sb-item-h:        54px;

  /* Transitions */
  --transition-fast:  all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-med:   all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Background Gradients */
  --bg-grad-1: rgba(34, 211, 238, 0.05);
  --bg-grad-2: rgba(168, 85, 247, 0.05);
  --bg-grad-3: rgba(16, 185, 129, 0.04);
}

/* ── Light Mode Override ── */
:root.light-theme, [data-theme="light"] {
  --bg-color:       #f8fafc;
  --bg-secondary:   #f1f5f9;
  --surface-color:  rgba(255, 255, 255, 0.95);
  --surface-hover:  rgba(241, 245, 249, 0.95);
  
  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  
  --primary-accent: #2563eb;
  --primary-glow:   rgba(37, 99, 235, 0.15);
  --success-color:  #059669;
  --success-glow:   rgba(5, 150, 105, 0.15);
  --warning-color:  #d97706;
  --warning-glow:   rgba(217, 119, 6, 0.15);
  --danger-color:   #dc2626;
  --danger-glow:    rgba(220, 38, 38, 0.15);
  --purple-color:   #7c3aed;
  --purple-glow:    rgba(124, 58, 237, 0.15);
  --pink-color:     #db2777;
  --pink-glow:      rgba(219, 39, 119, 0.15);

  --glass-bg:       rgba(255, 255, 255, 0.85);
  --glass-border:   rgba(15, 23, 42, 0.08);
  --glass-border-hover: rgba(15, 23, 42, 0.15);
  
  --shadow-sm:      0 2px 5px rgba(15, 23, 42, 0.05);
  --shadow-md:      0 8px 25px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255,255,255,0.6) inset;
  --shadow-lg:      0 20px 40px rgba(15, 23, 42, 0.08);
  --shadow-neon:    0 0 15px var(--primary-glow), 0 0 25px rgba(37, 99, 235, 0.05);
  
  --sb-bg:          #ffffff;
  --sb-border:      rgba(15, 23, 42, 0.08);

  --bg-grad-1:      rgba(37, 99, 235, 0.04);
  --bg-grad-2:      rgba(124, 58, 237, 0.04);
  --bg-grad-3:      rgba(5, 150, 105, 0.03);
}

/* ═══════════════════════════════════════════════════════
   GLOBAL RESET & BASE STYLES
   ═══════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Tajawal', 'Inter', system-ui, -apple-system, sans-serif;
}

/* عناصر النماذج تحتاج تصريحاً صريحاً في بعض المتصفحات */
input, select, textarea, button {
  font-family: 'Tajawal', 'Inter', system-ui, -apple-system, sans-serif;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-base);
  font-size: var(--font-size);
  line-height: 1.6;
  background-color: var(--bg-color);
  color: var(--text-primary);
  direction: rtl;
  min-height: 100vh;
  /* Allow natural scrolling — NO overflow:hidden */
  overflow-x: hidden;
  /* Animated background */
  background-image:
    radial-gradient(ellipse at 20% 20%, var(--bg-grad-1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, var(--bg-grad-2) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 0%, var(--bg-grad-3) 0%, transparent 40%);
  background-attachment: fixed;
  margin: 0 !important;
  padding: 0 !important;
}

/* Prevent pull-to-refresh while keeping scroll */
body {
  overscroll-behavior-y: contain;
}

/* ── Body when sidebar is present ── */
html.has-sidebar body,
body.has-sidebar {
  margin-right: var(--sb-collapsed, 62px);
  padding-right: 0 !important;
  transition: margin-right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

html.has-sidebar body.sidebar-open,
body.has-sidebar.sidebar-open {
  margin-right: var(--sb-expanded, 240px);
}

/* ── Page Wrapper for inner scrollable pages ── */
.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-content {
  flex: 1;
  padding: 20px 24px;
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════
   SELECT & FORM ELEMENT FIXES
   ═══════════════════════════════════════════════════════ */
select option {
  background-color: #0a1128;
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════
   GLASSMORPHISM UTILITIES
   ═══════════════════════════════════════════════════════ */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  position: relative;
  transition: var(--transition-med);
}

.glass-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════
   CUSTOM SCROLLBAR — WebKit
   ═══════════════════════════════════════════════════════ */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: rgba(2, 5, 16, 0.5); }
::-webkit-scrollbar-thumb        { background: rgba(34, 211, 238, 0.4); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(34, 211, 238, 0.7); }
::-webkit-scrollbar-corner       { background: transparent; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE MEDIA QUERIES — Base Layout
   ═══════════════════════════════════════════════════════ */
@media screen and (min-width: 768px) {
  body { --font-size: 15px; }
  .page-content { padding: 28px 36px; }
}

@media screen and (min-width: 1200px) {
  .page-content { padding: 32px 48px; }
}

/* ═══════════════════════════════════════════════════════
   GLOBAL ANIMATION KEYFRAMES
   ═══════════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes neonPulse {
  0%, 100% { box-shadow: var(--shadow-md); }
  50%       { box-shadow: var(--shadow-md), 0 0 30px var(--primary-glow); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-10deg) scale(0.9); }
  to   { opacity: 1; transform: rotate(0)      scale(1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes bgShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ═══════════════════════════════════════════════════════
   UTILITY ANIMATION CLASSES
   ═══════════════════════════════════════════════════════ */
.animate-fade-in-up    { animation: fadeInUp    0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-fade-in-down  { animation: fadeInDown  0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-fade-in-right { animation: fadeInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.pulse-glow            { animation: neonPulse   3s ease-in-out infinite; }

/* Stagger helpers */
.stagger-1  { animation-delay: 0.05s; }
.stagger-2  { animation-delay: 0.10s; }
.stagger-3  { animation-delay: 0.15s; }
.stagger-4  { animation-delay: 0.20s; }
.stagger-5  { animation-delay: 0.25s; }
.stagger-6  { animation-delay: 0.30s; }

/* ═══════════════════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════════════════ */
@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }
    body > *:not(#print-area) {
        display: none !important;
    }
    #print-area {
        display: block !important;
        width: 100%;
        background: #fff;
        color: #000;
        margin: 0;
        padding: 0;
    }
    .print-page {
        page-break-after: always;
        background: #fff;
        color: #000;
        box-sizing: border-box;
    }
    .modal-overlay, .toast-container, .quick-add-box { 
        display: none !important; 
    }
}

/* ═══════════════════════════════════════════════════════
   GLOBAL INTERACTION EFFECTS (Hover/Active Zoom)
   ═══════════════════════════════════════════════════════ */
.btn, .btn-primary, .btn-success, .btn-secondary, .btn-ghost, .btn-action, .numpad-btn, .action-tab {
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn:hover:not(:disabled), .btn-primary:hover:not(:disabled), .btn-success:hover:not(:disabled), .btn-secondary:hover:not(:disabled), .btn-action:hover:not(:disabled), .action-tab:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 6px 20px rgba(56, 189, 248, 0.25);
    z-index: 10;
}
.btn:active:not(:disabled), .btn-primary:active:not(:disabled), .btn-success:active:not(:disabled), .btn-secondary:active:not(:disabled), .btn-action:active:not(:disabled), .action-tab:active, .numpad-btn:active {
    transform: scale(0.95) !important;
}
/* Ensure icon-only buttons have a smooth interaction */
.btn-icon, .modal-close, .back-arrow-btn {
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-icon:hover:not(:disabled), .modal-close:hover, .back-arrow-btn:hover {
    transform: scale(1.1);
}
.btn-icon:active:not(:disabled), .modal-close:active, .back-arrow-btn:active {
    transform: scale(0.9) !important;
}


/* =========================================================
   PREMIUM OVERHAUL INJECTED CSS
   ========================================================= */
/* Ambient Animated Background Orbs */
.ambient-bg {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    overflow: hidden; z-index: -1; pointer-events: none;
    background: radial-gradient(circle at 50% 50%, #0c0812 0%, #000000 100%);
}

.orb {
    position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.15;
    animation: floatOrb 20s infinite alternate ease-in-out;
}

.orb-1 { width: 500px; height: 500px; background: var(--primary-accent); top: -5%; right: -5%; }
.orb-2 { width: 450px; height: 450px; background: var(--theme-pink); bottom: -10%; left: -5%; animation-delay: -7s; }
.orb-3 { width: 600px; height: 600px; background: var(--theme-blue); top: 30%; left: 30%; animation-duration: 25s; opacity: 0.1; }

@keyframes floatOrb {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-30px, 30px) scale(0.9); }
    100% { transform: translate(0, 0) scale(1); }
}

/* ═══════════════════════════════════════════════════════
   UNIFIED PREMIUM HEADER - Standardized Across All Pages
   ═══════════════════════════════════════════════════════ */
.premium-header {
    --glow-color: rgba(99, 102, 241, 0.65); /* لون الوهج الافتراضي */
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 16px !important; /* نفس انحناء بطاقات الأرصدة */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255,255,255,0.03) !important;
    
    position: relative !important;
    overflow: hidden !important;
    z-index: 10 !important;
    
    /* توحيد الهوامش */
    margin-top: 20px !important;
    margin-bottom: 25px !important;
    width: 100%;
    height: 110px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    box-sizing: border-box;
    flex-shrink: 0;
    
    /* إضافة الانتقال السلس للمؤثرات اللطيفة دون التأثير على الارتفاع الميكانيكي */
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* تأثير التحليق ملغى بناءً على طلبك - الترويسة ثابتة تماماً */

/* الطبقة العلوية المضيئة الثابتة */
.premium-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--glow-color, rgba(255,255,255,0.5)), transparent);
    opacity: 0.5;
}

/* توهج خلفي ناعم ثابت */
.premium-header::after {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 60%; height: 100%;
    background: radial-gradient(ellipse at top, var(--glow-color, rgba(255,255,255,0.15)) 0%, transparent 70%);
    opacity: 0.5;
    pointer-events: none;
    z-index: -1;
}

@keyframes slideDown { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }

/* --- Page-Specific Header Color Themes (Glows only, keeping premium 0.45 transparent background) --- */
.premium-header.header-theme-dashboard { --glow-color: rgba(99, 102, 241, 0.65); }
.premium-header.header-theme-sales { --glow-color: rgba(16, 185, 129, 0.65); }
.premium-header.header-theme-purchase { --glow-color: rgba(168, 85, 247, 0.65); }
.premium-header.header-theme-inventory { --glow-color: rgba(245, 158, 11, 0.65); }
.premium-header.header-theme-masterdata { --glow-color: rgba(217, 70, 239, 0.65); }
.premium-header.header-theme-reports { --glow-color: rgba(20, 184, 166, 0.65); }
.premium-header.header-theme-alarm { --glow-color: rgba(239, 68, 68, 0.65); }
.premium-header.header-theme-settings { --glow-color: rgba(100, 116, 139, 0.65); }
.premium-header.header-theme-audit { --glow-color: rgba(244, 114, 182, 0.65); }

/* Responsive Header */
@media (max-width: 768px) {
    .premium-header {
        height: auto !important;
        flex-direction: column;
        gap: 12px;
    }
}

.header-brand { display: flex; align-items: center; gap: 12px; }
.brand-icon {
    width: 40px; height: 40px; border-radius: 12px;
    background: linear-gradient(135deg, #38bdf8, #818cf8);
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
    box-shadow: 0 6px 15px rgba(56, 189, 248, 0.4), inset 0 2px 5px rgba(255,255,255,0.3); border: 1px solid rgba(255,255,255,0.2);
}
.brand-text h1 { margin: 0; font-size: 1.1rem; font-weight: 900; color: #fff; letter-spacing: 0.5px; text-shadow: 0 2px 5px rgba(255,255,255,0.1); }
.brand-text p { margin: 0; font-size: 0.75rem; color: #94a3b8; font-weight: 500; }

/* --- Global Reset for Header Alignment --- */
.pos-wrapper, .dash-main, .hub-container, .settings-container, .audit-container, .alarm-main {
    padding-top: 0px !important;
}

/* ==========================================================================
   6 SPECIAL STRATEGIC THEMES (Imperial, Emerald, Cyber, Crystal, Papyrus, Slate)
   ========================================================================== */

/* 1. Theme Imperial (Default Sovereign Dark) */
:root.theme-imperial {
  --bg-color:         #060913 !important;
  --bg-secondary:     #0f1424 !important;
  --surface-color:    rgba(15, 20, 36, 0.75) !important;
  --surface-hover:    rgba(30, 41, 59, 0.9) !important;
  --text-primary:     #f1f5f9 !important;
  --text-secondary:   #94a3b8 !important;
  --primary-accent:   #38bdf8 !important;
  --primary-glow:     rgba(56, 189, 248, 0.3) !important;
  --glass-bg:         rgba(15, 20, 36, 0.7) !important;
  --glass-border:     rgba(56, 189, 248, 0.1) !important;
  --sb-bg:            rgba(6, 9, 19, 0.98) !important;
  --sb-border:        rgba(56, 189, 248, 0.15) !important;
  --bg-grad-1:        rgba(56, 189, 248, 0.05) !important;
  --bg-grad-2:        rgba(129, 140, 248, 0.05) !important;
  --bg-grad-3:        rgba(15, 20, 36, 0.04) !important;
}
:root.theme-imperial .ambient-bg {
  background: radial-gradient(circle at 50% 50%, #060913 0%, #030712 100%) !important;
}

/* 2. Theme Emerald (Accounting Shield) */
:root.theme-emerald {
  --bg-color:         #050c08 !important;
  --bg-secondary:     #0c1a12 !important;
  --surface-color:    rgba(12, 26, 18, 0.75) !important;
  --surface-hover:    rgba(27, 56, 39, 0.9) !important;
  --text-primary:     #e6f4ea !important;
  --text-secondary:   #a3d9c9 !important;
  --primary-accent:   #34d399 !important;
  --primary-glow:     rgba(52, 211, 153, 0.3) !important;
  --glass-bg:         rgba(12, 26, 18, 0.7) !important;
  --glass-border:     rgba(52, 211, 153, 0.1) !important;
  --sb-bg:            rgba(5, 12, 8, 0.98) !important;
  --sb-border:        rgba(52, 211, 153, 0.15) !important;
  --bg-grad-1:        rgba(52, 211, 153, 0.05) !important;
  --bg-grad-2:        rgba(5, 150, 105, 0.05) !important;
  --bg-grad-3:        rgba(12, 26, 18, 0.04) !important;
}
:root.theme-emerald .ambient-bg {
  background: radial-gradient(circle at 50% 50%, #0c1a12 0%, #050c08 100%) !important;
}

/* 3. Theme Cyber (Cyber Obsidian) */
:root.theme-cyber {
  --bg-color:         #000000 !important;
  --bg-secondary:     #080808 !important;
  --surface-color:    rgba(8, 8, 8, 0.85) !important;
  --surface-hover:    rgba(24, 24, 24, 0.9) !important;
  --text-primary:     #00ffcc !important;
  --text-secondary:   #ffffff !important;
  --primary-accent:   #ff00ff !important;
  --primary-glow:     rgba(255, 0, 255, 0.4) !important;
  --glass-bg:         rgba(8, 8, 8, 0.8) !important;
  --glass-border:     #00ffcc !important;
  --glass-border-hover: #ff00ff !important;
  --sb-bg:            #000000 !important;
  --sb-border:        #00ffcc !important;
  --bg-grad-1:        rgba(255, 0, 255, 0.05) !important;
  --bg-grad-2:        rgba(0, 255, 204, 0.05) !important;
  --bg-grad-3:        #000000 !important;
}
:root.theme-cyber .ambient-bg {
  background: #000000 !important;
}

/* 4. Theme Crystal (Ice Crystal) */
:root.theme-crystal {
  --bg-color:         #f0f4f8 !important;
  --bg-secondary:     #ffffff !important;
  --surface-color:    rgba(255, 255, 255, 0.95) !important;
  --surface-hover:    rgba(240, 244, 248, 0.95) !important;
  --text-primary:     #1e293b !important;
  --text-secondary:   #475569 !important;
  --primary-accent:   #0284c7 !important;
  --primary-glow:     rgba(2, 132, 199, 0.15) !important;
  --glass-bg:         rgba(255, 255, 255, 0.85) !important;
  --glass-border:     rgba(2, 132, 199, 0.15) !important;
  --sb-bg:            #ffffff !important;
  --sb-border:        rgba(2, 132, 199, 0.15) !important;
  --bg-grad-1:        rgba(2, 132, 199, 0.04) !important;
  --bg-grad-2:        rgba(14, 165, 233, 0.04) !important;
  --bg-grad-3:        rgba(255, 255, 255, 0.3) !important;
}
:root.theme-crystal body,
:root.theme-crystal p,
:root.theme-crystal td,
:root.theme-crystal th,
:root.theme-crystal tr,
:root.theme-crystal label,
:root.theme-crystal h1,
:root.theme-crystal h2,
:root.theme-crystal h3,
:root.theme-crystal h4,
:root.theme-crystal h5,
:root.theme-crystal h6,
:root.theme-crystal .brand-text h1,
:root.theme-crystal .brand-text p,
:root.theme-crystal .sidebar-text,
:root.theme-crystal .header-company-name-top,
:root.theme-crystal .header-page-title,
:root.theme-crystal #header-user-name,
:root.theme-crystal #header-clock,
:root.theme-crystal #header-user-role,
:root.theme-crystal .kpi-val,
:root.theme-crystal .kpi-title,
:root.theme-crystal .list-sub,
:root.theme-crystal .list-title,
:root.theme-crystal .tot-lbl,
:root.theme-crystal .tot-val,
:root.theme-crystal .val,
:root.theme-crystal .lbl {
  color: #1e293b !important;
  text-shadow: none !important;
}

/* 5. Theme Papyrus (Desert Papyrus) */
:root.theme-papyrus {
  --bg-color:         #f7f2e8 !important;
  --bg-secondary:     #eee6d5 !important;
  --surface-color:    rgba(238, 230, 213, 0.95) !important;
  --surface-hover:    rgba(212, 197, 169, 0.95) !important;
  --text-primary:     #2e1f10 !important;
  --text-secondary:   #4a3728 !important;
  --primary-accent:   #85581A !important;
  --primary-glow:     rgba(133, 88, 26, 0.2) !important;
  --glass-bg:         rgba(238, 230, 213, 0.9) !important;
  --glass-border:     rgba(133, 88, 26, 0.15) !important;
  --sb-bg:            #eee6d5 !important;
  --sb-border:        rgba(133, 88, 26, 0.15) !important;
  --bg-grad-1:        rgba(133, 88, 26, 0.04) !important;
  --bg-grad-2:        rgba(74, 55, 40, 0.04) !important;
  --bg-grad-3:        rgba(238, 230, 213, 0.3) !important;
}
:root.theme-papyrus .ambient-bg {
  background: radial-gradient(circle at 50% 50%, #f7f2e8 0%, #e6dec3 100%) !important;
}
:root.theme-papyrus body,
:root.theme-papyrus p,
:root.theme-papyrus td,
:root.theme-papyrus th,
:root.theme-papyrus tr,
:root.theme-papyrus label,
:root.theme-papyrus h1,
:root.theme-papyrus h2,
:root.theme-papyrus h3,
:root.theme-papyrus h4,
:root.theme-papyrus h5,
:root.theme-papyrus h6,
:root.theme-papyrus .brand-text h1,
:root.theme-papyrus .brand-text p,
:root.theme-papyrus .sidebar-text,
:root.theme-papyrus .header-company-name-top,
:root.theme-papyrus .header-page-title,
:root.theme-papyrus #header-user-name,
:root.theme-papyrus #header-clock,
:root.theme-papyrus #header-user-role,
:root.theme-papyrus .kpi-val,
:root.theme-papyrus .kpi-title,
:root.theme-papyrus .list-sub,
:root.theme-papyrus .list-title,
:root.theme-papyrus .tot-lbl,
:root.theme-papyrus .tot-val,
:root.theme-papyrus .val,
:root.theme-papyrus .lbl {
  color: #2e1f10 !important;
  text-shadow: none !important;
}

/* 6. Theme Slate (Muted Slate) */
:root.theme-slate {
  --bg-color:         #1e293b !important;
  --bg-secondary:     #334155 !important;
  --surface-color:    rgba(51, 65, 85, 0.85) !important;
  --surface-hover:    rgba(71, 85, 105, 0.95) !important;
  --text-primary:     #f8fafc !important;
  --text-secondary:   #cbd5e1 !important;
  --primary-accent:   #38bdf8 !important;
  --primary-glow:     rgba(56, 189, 248, 0.3) !important;
  --glass-bg:         rgba(51, 65, 85, 0.8) !important;
  --glass-border:     rgba(71, 85, 105, 0.15) !important;
  --sb-bg:            #1e293b !important;
  --sb-border:        rgba(71, 85, 105, 0.15) !important;
  --bg-grad-1:        rgba(56, 189, 248, 0.05) !important;
  --bg-grad-2:        rgba(51, 65, 85, 0.05) !important;
  --bg-grad-3:        rgba(51, 65, 85, 0.4) !important;
}

/* ==========================================================================
   🔍 TYPOGRAPHY ENHANCEMENT FOR BETTER READABILITY (BUTTONS +2px, INNER REPORTS +4px)
   ========================================================================== */

/* 1. Enlarge all buttons by 2px (2 degrees) globally */
button,
.btn,
.theme-btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-filter,
.btn-reset,
.curr-btn,
.action-card,
.report-card,
.numpad-btn,
.quick-action-btn {
    font-size: 16px !important;
}

/* 2. Specific button size overrides */
.btn-primary, .btn-secondary {
    font-size: 1.3rem !important; /* was 1.2rem */
}
.numpad-btn {
    font-size: 2.0rem !important; /* was 1.8rem */
}
.theme-btn {
    font-size: 13px !important; /* was 11px */
}
.action-card {
    font-size: 0.92rem !important; /* was 0.8rem */
}

/* 3. Enlarge all fonts in inner report pages by 4px (4 degrees) */
html.inner-report-page body {
    font-size: 19px !important; /* was 15px */
}
html.inner-report-page td {
    font-size: 17px !important; /* was 13px */
}
html.inner-report-page th {
    font-size: 17px !important; /* was 13px */
}
html.inner-report-page p {
    font-size: 19px !important; /* was 15px */
}
html.inner-report-page label {
    font-size: 17px !important; /* was 13px */
}
html.inner-report-page input,
html.inner-report-page select,
html.inner-report-page textarea {
    font-size: 18px !important; /* was 14px */
}
html.inner-report-page h1 { font-size: 30px !important; }
html.inner-report-page h2 { font-size: 24px !important; }
html.inner-report-page h3 { font-size: 20px !important; }
html.inner-report-page h4 { font-size: 18px !important; }

/* Scale metrics cards inside report pages */
html.inner-report-page .kpi-val,
html.inner-report-page .metric-value {
    font-size: 32px !important;
}

/* Scale badges inside report pages */
html.inner-report-page .badge-percent,
html.inner-report-page .badge-negative {
    font-size: 16px !important; /* was 12px */
}
html.inner-report-page .badge-category {
    font-size: 15px !important; /* was 11px */
}

/* Buttons inside the inner report page get +4px instead of +2px */
html.inner-report-page button,
html.inner-report-page .btn,
html.inner-report-page .theme-btn,
html.inner-report-page .btn-primary,
html.inner-report-page .btn-secondary,
html.inner-report-page .btn-success,
html.inner-report-page .btn-filter,
html.inner-report-page .btn-reset,
html.inner-report-page .curr-btn,
html.inner-report-page .quick-action-btn {
    font-size: 18px !important; /* standard button default 14px + 4px */
}

/* 4. Enlarge all fonts in inventory hub page (inventory-report.php) and general report portals (analytics.php) by 2px (2 degrees) */
html.inventory-hub-page body, html.hub-report-page body {
    font-size: 17px !important; /* was 15px */
}
html.inventory-hub-page td, html.hub-report-page td {
    font-size: 15px !important; /* was 13px */
}
html.inventory-hub-page th, html.hub-report-page th {
    font-size: 15px !important; /* was 13px */
}
html.inventory-hub-page p, html.hub-report-page p {
    font-size: 17px !important; /* was 15px */
}
html.inventory-hub-page label, html.hub-report-page label {
    font-size: 15px !important; /* was 13px */
}
html.inventory-hub-page input, html.hub-report-page input,
html.inventory-hub-page select, html.hub-report-page select,
html.inventory-hub-page textarea, html.hub-report-page textarea {
    font-size: 16px !important; /* was 14px */
}
html.inventory-hub-page h1, html.hub-report-page h1 { font-size: 28px !important; }
html.inventory-hub-page h2, html.hub-report-page h2 { font-size: 22px !important; }
html.inventory-hub-page h3, html.hub-report-page h3 { font-size: 18px !important; }
html.inventory-hub-page h4, html.hub-report-page h4 { font-size: 16px !important; }

/* Scale metrics cards inside inventory hub page */
html.inventory-hub-page .kpi-val, html.hub-report-page .kpi-val,
html.inventory-hub-page .metric-value, html.hub-report-page .metric-value {
    font-size: 30px !important;
}

/* Scale badges inside inventory hub page */
html.inventory-hub-page .badge-percent, html.hub-report-page .badge-percent,
html.inventory-hub-page .badge-negative, html.hub-report-page .badge-negative {
    font-size: 14px !important; /* was 12px */
}
html.inventory-hub-page .badge-category, html.hub-report-page .badge-category {
    font-size: 13px !important; /* was 11px */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   UNIVERSAL LIGHT & DARK THEME OVERRIDES FOR ALL INTERNAL SCREENS (7 MASTER THEMES)
   ═══════════════════════════════════════════════════════════════════════════════ */
.light-theme .val { color: var(--text-primary, #0f172a) !important; text-shadow: none !important; }
.light-theme .neo-card-title { color: var(--primary-accent, #0284c7) !important; }

:root.light-theme body,
:root.light-theme .ambient-bg {
    background: var(--bg-color, #f8fafc) !important;
}

:root.light-theme .glass-panel,
:root.light-theme .neo-card,
:root.light-theme .summary-card,
:root.light-theme .filter-panel,
:root.light-theme .chart-card,
:root.light-theme .kpi-card,
:root.light-theme .premium-header,
:root.light-theme .top-header,
:root.light-theme .header-area {
    background: var(--surface, #ffffff) !important;
    border-color: var(--border, rgba(0, 0, 0, 0.1)) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    color: var(--text-primary, #0f172a) !important;
}

:root.light-theme .glass-panel *,
:root.light-theme .neo-card *,
:root.light-theme .summary-card * {
    text-shadow: none !important;
}

:root.light-theme table.pro-table th,
:root.light-theme .pos-grid thead th,
:root.light-theme .ledger-table th,
:root.light-theme .report-table th {
    background: var(--bg-secondary, #f1f5f9) !important;
    color: var(--text-primary, #0f172a) !important;
    border-bottom: 2px solid var(--border, #cbd5e1) !important;
}

:root.light-theme table.pro-table td,
:root.light-theme .pos-grid tbody td,
:root.light-theme .ledger-table td,
:root.light-theme .report-table td {
    color: var(--text-secondary, #1e293b) !important;
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.08)) !important;
}

:root.light-theme table.pro-table tbody tr:hover td,
:root.light-theme .pos-grid tbody tr:hover td,
:root.light-theme .ledger-table tbody tr:hover td,
:root.light-theme .report-table tbody tr:hover td {
    background: var(--surface-hover, rgba(0,0,0,0.03)) !important;
}

:root.light-theme .h-label,
:root.light-theme .form-label,
:root.light-theme .tot-lbl,
:root.light-theme .lbl,
:root.light-theme label,
:root.light-theme .table-header {
    color: var(--text-secondary, #334155) !important;
}

:root.light-theme .tot-val,
:root.light-theme .val {
    color: var(--text-primary, #0f172a) !important;
}

:root.light-theme .h-form-group,
:root.light-theme .control-panel {
    background: transparent !important;
    border-color: var(--border, rgba(0,0,0,0.08)) !important;
}

:root.light-theme .modern-btn {
    color: var(--text-secondary, #1e293b) !important;
}

:root.light-theme .modern-btn:hover {
    color: var(--text-primary, #0f172a) !important;
}

/* Neon text colors correction for light theme */
:root.light-theme .text-emerald-400,
:root.light-theme span[style*="color: #34d399"],
:root.light-theme span[style*="color:#34d399"],
:root.light-theme span[style*="color: #6ee7b7"],
:root.light-theme span[style*="color:#6ee7b7"],
:root.light-theme span[style*="color: #a7f3d0"],
:root.light-theme span[style*="color:#a7f3d0"] {
    color: #047857 !important;
}

:root.light-theme .text-rose-400,
:root.light-theme span[style*="color: #f87171"],
:root.light-theme span[style*="color:#f87171"],
:root.light-theme span[style*="color: #f43f5e"],
:root.light-theme span[style*="color:#f43f5e"] {
    color: #be123c !important;
}

:root.light-theme .text-sky-400,
:root.light-theme span[style*="color: #38bdf8"],
:root.light-theme span[style*="color:#38bdf8"],
:root.light-theme span[style*="color: #7dd3fc"],
:root.light-theme span[style*="color:#7dd3fc"] {
    color: #0369a1 !important;
}

:root.light-theme .text-purple-400,
:root.light-theme span[style*="color: #c084fc"],
:root.light-theme span[style*="color:#c084fc"],
:root.light-theme span[style*="color: #d8b4fe"],
:root.light-theme span[style*="color:#d8b4fe"],
:root.light-theme span[style*="color: #e9d5ff"],
:root.light-theme span[style*="color:#e9d5ff"] {
    color: #6d28d9 !important;
}

:root.light-theme .text-amber-400,
:root.light-theme span[style*="color: #fbbf24"],
:root.light-theme span[style*="color:#fbbf24"],
:root.light-theme span[style*="color: #fef08a"],
:root.light-theme span[style*="color:#fef08a"],
:root.light-theme span[style*="color: #fde047"],
:root.light-theme span[style*="color:#fde047"] {
    color: #b45309 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   🔒 FINAL MASTER 7 THEMES LOCK (HIGHEST PRIORITY AT END OF THEME.CSS)
   Ensures earlier generic :root.light-theme rules never overwrite warm_cream/exec_gray
   ═══════════════════════════════════════════════════════════════════════════════ */
html[data-theme="warm_cream"], html[data-theme="warm-alabaster"], html[data-theme="beige"] {
    --bg-color: #fbf7ee !important;
    --bg-main: #fbf7ee !important;
    --bg-dark: #fbf7ee !important;
    --bg-secondary: #f5eedd !important;
    --surface: #ffffff !important;
    --surface-color: #ffffff !important;
    --surface-hover: #f5eedd !important;
    --panel-bg: #fdfbf7 !important;
    --border: #dcd1be !important;
    --border-color: #dcd1be !important;
    --text-primary: #1c1917 !important;
    --text-secondary: #382e25 !important;
    --text-muted: #5c4d40 !important;
    --text-main: #1c1917 !important;
    --text-dim: #7c6858 !important;
    --primary-accent: #b45309 !important;
    --amber: #b45309 !important;
    --green: #15803d !important;
    --red: #b91c1c !important;
    --blue: #0369a1 !important;
}
html[data-theme="ultra_white"], html[data-theme="pure-platinum"], html[data-theme="white"] {
    --bg-color: #f8fafc !important;
    --bg-main: #f8fafc !important;
    --bg-dark: #f8fafc !important;
    --bg-secondary: #f1f5f9 !important;
    --surface: #ffffff !important;
    --surface-color: #ffffff !important;
    --surface-hover: #f1f5f9 !important;
    --panel-bg: #ffffff !important;
    --border: #cbd5e1 !important;
    --border-color: #cbd5e1 !important;
    --text-primary: #0f172a !important;
    --text-secondary: #1e293b !important;
    --text-muted: #475569 !important;
    --text-main: #0f172a !important;
    --text-dim: #64748b !important;
    --primary-accent: #2563eb !important;
    --amber: #b45309 !important;
    --green: #047857 !important;
    --red: #dc2626 !important;
    --blue: #2563eb !important;
}
html[data-theme="exec_gray"], html[data-theme="pearl-platinum"] {
    --bg-color: #f1f5f9 !important;
    --bg-main: #f1f5f9 !important;
    --bg-dark: #f1f5f9 !important;
    --bg-secondary: #e2e8f0 !important;
    --surface: #ffffff !important;
    --surface-color: #ffffff !important;
    --surface-hover: #e2e8f0 !important;
    --panel-bg: #ffffff !important;
    --border: #cbd5e1 !important;
    --border-color: #cbd5e1 !important;
    --text-primary: #0f172a !important;
    --text-secondary: #1e293b !important;
    --text-muted: #475569 !important;
    --text-main: #0f172a !important;
    --text-dim: #64748b !important;
    --primary-accent: #1d4ed8 !important;
    --amber: #b45309 !important;
    --green: #047857 !important;
    --red: #b91c1c !important;
    --blue: #1d4ed8 !important;
}
html[data-theme="midnight_obsidian"], html[data-theme="midnight-executive"], html[data-theme="navy"] {
    --bg-color: #0a1128 !important;
    --bg-main: #0a1128 !important;
    --bg-dark: #0a1128 !important;
    --bg-secondary: #0b132b !important;
    --surface: #111c44 !important;
    --surface-color: #111c44 !important;
    --surface-hover: #1c2a5e !important;
    --panel-bg: #111c44 !important;
    --border: rgba(56, 189, 248, 0.25) !important;
    --border-color: rgba(56, 189, 248, 0.25) !important;
    --text-primary: #ffffff !important;
    --text-secondary: #e0f2fe !important;
    --text-muted: #93c5fd !important;
    --text-main: #ffffff !important;
    --text-dim: #60a5fa !important;
    --primary-accent: #00f2fe !important;
    --amber: #fbbf24 !important;
    --green: #10b981 !important;
    --red: #ef4444 !important;
    --blue: #38bdf8 !important;
}
html[data-theme="mocha_brown"], html[data-theme="sepia-brown"], html[data-theme="brown"] {
    --bg-color: #1a0f0a !important;
    --bg-main: #1a0f0a !important;
    --bg-dark: #1a0f0a !important;
    --bg-secondary: #26150e !important;
    --surface: #2e1a12 !important;
    --surface-color: #2e1a12 !important;
    --surface-hover: #3d2319 !important;
    --panel-bg: #2e1a12 !important;
    --border: #78350f !important;
    --border-color: #78350f !important;
    --text-primary: #fffbeb !important;
    --text-secondary: #fef3c7 !important;
    --text-muted: #fde68a !important;
    --text-main: #fffbeb !important;
    --text-dim: #d4a373 !important;
    --primary-accent: #f59e0b !important;
    --amber: #f59e0b !important;
    --green: #34d399 !important;
    --red: #f87171 !important;
    --blue: #38bdf8 !important;
}
html[data-theme="pure_oled"], html[data-theme="obsidian-charcoal"], html[data-theme="black"] {
    --bg-color: #000000 !important;
    --bg-main: #000000 !important;
    --bg-dark: #000000 !important;
    --bg-secondary: #050505 !important;
    --surface: #0a0a0a !important;
    --surface-color: #0a0a0a !important;
    --surface-hover: #171717 !important;
    --panel-bg: #0a0a0a !important;
    --border: #262626 !important;
    --border-color: #262626 !important;
    --text-primary: #ffffff !important;
    --text-secondary: #f5f5f5 !important;
    --text-muted: #a3a3a3 !important;
    --text-main: #ffffff !important;
    --text-dim: #737373 !important;
    --primary-accent: #10b981 !important;
    --amber: #f59e0b !important;
    --green: #10b981 !important;
    --red: #ef4444 !important;
    --blue: #38bdf8 !important;
}
html[data-theme="slate_twilight"], html[data-theme="twilight-indigo"], html[data-theme="slate"] {
    --bg-color: #0f172a !important;
    --bg-main: #0f172a !important;
    --bg-dark: #0f172a !important;
    --bg-secondary: #1e293b !important;
    --surface: #1e293b !important;
    --surface-color: #1e293b !important;
    --surface-hover: #334155 !important;
    --panel-bg: #1e293b !important;
    --border: #334155 !important;
    --border-color: #334155 !important;
    --text-primary: #f8fafc !important;
    --text-secondary: #e2e8f0 !important;
    --text-muted: #94a3b8 !important;
    --text-main: #f8fafc !important;
    --text-dim: #64748b !important;
    --primary-accent: #38bdf8 !important;
    --amber: #fbbf24 !important;
    --green: #34d399 !important;
    --red: #f87171 !important;
    --blue: #38bdf8 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   🎯 UNIFIED FINANCIAL RED & GREEN PALETTE (تعميم درجات الأحمر والأخضر من شاشة حركة مالية لكل النظام)
   ═══════════════════════════════════════════════════════════════════════════════ */
:root,
html,
body {
    --scp-red-bg: linear-gradient(135deg, rgba(127, 29, 29, 0.16) 0%, rgba(69, 10, 10, 0.32) 100%);
    --scp-red-bg-hover: linear-gradient(135deg, rgba(127, 29, 29, 0.24) 0%, rgba(69, 10, 10, 0.42) 100%);
    --scp-red-border: rgba(239, 68, 68, 0.55);
    --scp-red-border-hover: rgba(248, 113, 113, 0.85);
    --scp-red-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 12px rgba(239, 68, 68, 0.18), inset 0 1px 0 rgba(254, 202, 202, 0.1);
    --scp-red-shadow-hover: 0 0 18px rgba(239, 68, 68, 0.32), inset 0 0 10px rgba(239, 68, 68, 0.12);
    --scp-red-input-bg: rgba(24, 12, 14, 0.90);
    --scp-red-input-border: rgba(248, 113, 113, 0.55);
    --scp-red-label: #fecaca;
    --scp-red-amount-text: #b91c1c;
    --scp-red-amount-border: #dc2626;

    --scp-green-bg: linear-gradient(135deg, rgba(6, 78, 59, 0.18) 0%, rgba(2, 44, 34, 0.32) 100%);
    --scp-green-bg-hover: linear-gradient(135deg, rgba(6, 78, 59, 0.26) 0%, rgba(2, 44, 34, 0.42) 100%);
    --scp-green-border: rgba(16, 185, 129, 0.55);
    --scp-green-border-hover: rgba(52, 211, 153, 0.85);
    --scp-green-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 12px rgba(16, 185, 129, 0.18), inset 0 1px 0 rgba(167, 243, 208, 0.1);
    --scp-green-shadow-hover: 0 0 18px rgba(16, 185, 129, 0.32), inset 0 0 10px rgba(16, 185, 129, 0.12);
    --scp-green-input-bg: rgba(6, 26, 20, 0.90);
    --scp-green-input-border: rgba(52, 211, 153, 0.55);
    --scp-green-label: #a7f3d0;
}

html body .scp-from-card,
html body .glass-container.glass-red,
html body .account-block.glass-red,
html body .erp-unified-red-box {
    background: var(--scp-red-bg) !important;
    border: 2px solid var(--scp-red-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--scp-red-shadow) !important;
}
html body .scp-from-card:hover,
html body .scp-from-card:focus-within,
html body .glass-container.glass-red:hover,
html body .glass-container.glass-red:focus-within,
html body .account-block.glass-red:hover,
html body .account-block.glass-red:focus-within,
html body .erp-unified-red-box:hover,
html body .erp-unified-red-box:focus-within {
    background: var(--scp-red-bg-hover) !important;
    border-color: var(--scp-red-border-hover) !important;
    box-shadow: var(--scp-red-shadow-hover) !important;
}

html body .scp-to-card,
html body .glass-container.glass-green,
html body .account-block.glass-green,
html body .erp-unified-green-box {
    background: var(--scp-green-bg) !important;
    border: 2px solid var(--scp-green-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--scp-green-shadow) !important;
}
html body .scp-to-card:hover,
html body .scp-to-card:focus-within,
html body .glass-container.glass-green:hover,
html body .glass-container.glass-green:focus-within,
html body .account-block.glass-green:hover,
html body .account-block.glass-green:focus-within,
html body .erp-unified-green-box:hover,
html body .erp-unified-green-box:focus-within {
    background: var(--scp-green-bg-hover) !important;
    border-color: var(--scp-green-border-hover) !important;
    box-shadow: var(--scp-green-shadow-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   👑 ULTRA-CLARITY & +2 GRADE STROKE / BORDER / FONT WEIGHT SYSTEM (تعميم زيادة السمك والوضوح الفائق لكل الشاشات)
   - زيادة سمك خطوط الحواف (Borders) حول الخانات والبطاقات والجداول درجتين (2px solid)
   - زيادة سمك خطوط الأيقونات (SVG Stroke-Width = 2.5px) وسمك الخطوط النصية (800/900)
   - أسود داكن صريح (#000000) في السمات الفاتحة، وأبيض ناصع صريح (#FFFFFF) في السمات الغامقة
   ═══════════════════════════════════════════════════════════════════════════════ */
html body svg:not(.no-thick-stroke) path[stroke],
html body svg:not(.no-thick-stroke) circle[stroke],
html body svg:not(.no-thick-stroke) rect[stroke],
html body svg:not(.no-thick-stroke) line[stroke],
html body svg:not(.no-thick-stroke) polyline[stroke],
html body svg:not(.no-thick-stroke) polygon[stroke],
html body .lucide,
html body .feather {
    stroke-width: 2.5px !important;
}

html body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html body select,
html body textarea,
html body .form-control,
html body .form-input,
html body .pro-field-card,
html body .input-group {
    font-weight: 800 !important;
    border-width: 2px !important;
    border-style: solid !important;
}

html body label,
html body .pro-field-label,
html body .h-label,
html body th,
html body td,
html body button {
    font-weight: 800 !important;
}

/* 🌙 DARK THEMES: Black Input Box (#02040a) + Bright White Text (#ffffff) + Stepped Card Tones */
html:not(.light-theme):not([data-theme="warm_cream"]):not([data-theme="ultra_white"]):not([data-theme="exec_gray"]) body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html:not(.light-theme):not([data-theme="warm_cream"]):not([data-theme="ultra_white"]):not([data-theme="exec_gray"]) body select,
html:not(.light-theme):not([data-theme="warm_cream"]):not([data-theme="ultra_white"]):not([data-theme="exec_gray"]) body textarea,
html:not(.light-theme):not([data-theme="warm_cream"]):not([data-theme="ultra_white"]):not([data-theme="exec_gray"]) body .form-control {
    background-color: #02040a !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.48) !important;
}

html:not(.light-theme):not([data-theme="warm_cream"]):not([data-theme="ultra_white"]):not([data-theme="exec_gray"]) body .pro-field-card,
html:not(.light-theme):not([data-theme="warm_cream"]):not([data-theme="ultra_white"]):not([data-theme="exec_gray"]) body .input-group {
    background-color: #1c2a44 !important;
    border-width: 2px !important;
    border-color: rgba(255, 255, 255, 0.36) !important;
}

/* ☀️ LIGHT THEMES: White Input Box (#ffffff) + Black Text (#000000) + Stepped Warm Beige Cards & Outer Panels */
:root.light-theme body,
html.light-theme body,
html[data-theme="warm_cream"] body,
html[data-theme="ultra_white"] body,
html[data-theme="exec_gray"] body,
:root.light-theme body td,
:root.light-theme body th,
:root.light-theme body label,
:root.light-theme body .pro-field-label,
html[data-theme="warm_cream"] body td,
html[data-theme="warm_cream"] body th,
html[data-theme="warm_cream"] body label,
html[data-theme="ultra_white"] body td,
html[data-theme="ultra_white"] body th,
html[data-theme="ultra_white"] body label,
html[data-theme="exec_gray"] body td,
html[data-theme="exec_gray"] body th,
html[data-theme="exec_gray"] body label {
    color: #000000 !important;
    font-weight: 800 !important;
}

:root.light-theme body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
:root.light-theme body select,
:root.light-theme body textarea,
:root.light-theme body .form-control,
html[data-theme="warm_cream"] body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html[data-theme="warm_cream"] body select,
html[data-theme="warm_cream"] body textarea,
html[data-theme="ultra_white"] body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html[data-theme="ultra_white"] body select,
html[data-theme="ultra_white"] body textarea,
html[data-theme="exec_gray"] body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html[data-theme="exec_gray"] body select,
html[data-theme="exec_gray"] body textarea {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-weight: 900 !important;
    border: 2px solid #000000 !important;
}

:root.light-theme body .pro-field-card,
:root.light-theme body .input-group,
html[data-theme="warm_cream"] body .pro-field-card,
html[data-theme="warm_cream"] body .input-group,
html[data-theme="ultra_white"] body .pro-field-card,
html[data-theme="ultra_white"] body .input-group,
html[data-theme="exec_gray"] body .pro-field-card,
html[data-theme="exec_gray"] body .input-group {
    background-color: #f2e8d5 !important;
    border: 2px solid #473d31 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}