/* ============================================================
   IDHAM ERP — Premium Enterprise Design System 2026
   Inspired by Stripe · Linear · Vercel · Raycast · Framer
   RTL Arabic · Dark & Light Mode · ZATCA Compliant
   ============================================================ */

/* ── Google Fonts (Tajawal for Arabic excellence) ─────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ══════════════════════════════════════════════════════════
   DARK MODE (Default) — Deep Space Theme
   ══════════════════════════════════════════════════════════ */
:root {
  /* ── Background Layers ───────────────────────────── */
  --bg-0:        #0B1020;
  --bg-1:        #111827;
  --bg-2:        #181F34;
  --bg-3:        #1E2740;
  --bg-4:        #243050;
  --bg-hover:    rgba(99, 102, 241, 0.08);
  --bg-active:   rgba(99, 102, 241, 0.15);

  /* ── Surface Layers ──────────────────────────────── */
  --surface-sidebar:  #111827;
  --surface-topbar:   rgba(18, 22, 35, 0.75);
  --surface-filter:   rgba(17, 24, 39, 0.9);
  --surface-card:     #181F34;
  --surface-modal:    #131a2e;
  --surface-input:    #0f1623;

  /* ── Brand Colors ────────────────────────────────── */
  --primary:     #6366F1;
  --primary-dim: rgba(99, 102, 241, 0.15);
  --primary-glow: rgba(99, 102, 241, 0.35);
  --secondary:   #4F46E5;

  /* ── Module Colors ───────────────────────────────── */
  --sales:       #3B82F6;
  --sales-dim:   rgba(59, 130, 246, 0.12);
  --sales-glow:  rgba(59, 130, 246, 0.3);

  --purchases:   #F97316;
  --purchases-dim: rgba(249, 115, 22, 0.12);
  --purchases-glow: rgba(249, 115, 22, 0.3);

  --inventory:   #F59E0B;
  --inventory-dim: rgba(245, 158, 11, 0.12);
  --inventory-glow: rgba(245, 158, 11, 0.3);

  --accounting:  #8B5CF6;
  --accounting-dim: rgba(139, 92, 246, 0.12);
  --accounting-glow: rgba(139, 92, 246, 0.3);

  --maintenance: #06B6D4;
  --maintenance-dim: rgba(6, 182, 212, 0.12);
  --maintenance-glow: rgba(6, 182, 212, 0.3);

  --reports:     #6366F1;
  --reports-dim: rgba(99, 102, 241, 0.12);
  --reports-glow: rgba(99, 102, 241, 0.3);

  --hr:          #10B981;
  --hr-dim:      rgba(16, 185, 129, 0.12);
  --hr-glow:     rgba(16, 185, 129, 0.3);

  --crm:         #EC4899;
  --crm-dim:     rgba(236, 72, 153, 0.12);
  --crm-glow:    rgba(236, 72, 153, 0.3);

  /* ── Semantic Colors ─────────────────────────────── */
  --success:     #10B981;
  --success-dim: rgba(16, 185, 129, 0.12);
  --success-glow: rgba(16, 185, 129, 0.35);

  --warning:     #F59E0B;
  --warning-dim: rgba(245, 158, 11, 0.12);
  --warning-glow: rgba(245, 158, 11, 0.35);

  --danger:      #EF4444;
  --danger-dim:  rgba(239, 68, 68, 0.12);
  --danger-glow: rgba(239, 68, 68, 0.35);

  --info:        #3B82F6;
  --info-dim:    rgba(59, 130, 246, 0.12);
  --info-glow:   rgba(59, 130, 246, 0.35);

  /* Keep legacy aliases */
  --orange: var(--purchases);
  --cyan:   var(--maintenance);
  --teal:   #2DD4BF;
  --indigo: var(--reports);
  --lime:   var(--success);
  --warn:   var(--warning);
  --bad:    var(--danger);
  --good:   var(--success);
  --brand:  var(--primary);
  --brand-dim: var(--primary-dim);

  /* ── Text Hierarchy ──────────────────────────────── */
  --text-0:   #FFFFFF;
  --text-1:   #F8FAFC;
  --text-2:   #E2E8F0;
  --text-dim: #94A3B8;
  --text-muted: #64748B;

  /* ── Borders ─────────────────────────────────────── */
  --border:       rgba(255, 255, 255, 0.08);
  --border-soft:  rgba(255, 255, 255, 0.05);
  --border-focus: var(--primary);

  /* ── Typography ──────────────────────────────────── */
  --font-heading: 'IBM Plex Sans Arabic', -apple-system, sans-serif;
  --font-body:    'IBM Plex Sans Arabic', -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Fira Code', monospace;

  /* ── Border Radius ───────────────────────────────── */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-2xl: 32px;

  /* ── Shadows (Dark) ──────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.35);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.6), 0 8px 20px rgba(0,0,0,0.4);

  /* ── Transitions (minimal for performance) ──────── */
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast:   0.05s ease;
  --transition-normal: 0.08s ease;
  --transition-slow:   0.1s ease;

  /* ── Spacing ─────────────────────────────────────── */
  --gap-xs:  6px;
  --gap-sm:  10px;
  --gap-md:  16px;
  --gap-lg:  24px;
  --gap-xl:  32px;
}

/* ══════════════════════════════════════════════════════════
   LIGHT MODE — Premium v2.0
   ══════════════════════════════════════════════════════════ */
body.theme-light {
  /* ── Background Layers: warm slate instead of pure white ── */
  --bg-0:        #EEF2F7;
  --bg-1:        #FFFFFF;
  --bg-2:        #E8EDF5;
  --bg-3:        #D8E1EE;
  --bg-4:        #C5D0E0;
  --bg-hover:    rgba(79, 70, 229, 0.07);
  --bg-active:   rgba(79, 70, 229, 0.13);

  /* ── Surfaces ── */
  --surface-sidebar:  #1e1b4b;
  --surface-topbar:   rgba(255, 255, 255, 0.95);
  --surface-filter:   #FFFFFF;
  --surface-card:     #FFFFFF;
  --surface-modal:    #FFFFFF;
  --surface-input:    #F4F6FB;

  /* ── Brand ── */
  --primary:     #4f46e5;
  --primary-dim: rgba(79, 70, 229, 0.12);
  --primary-glow: rgba(79, 70, 229, 0.3);
  --secondary:   #4338ca;

  /* ── Semantic ── */
  --success:     #059669;
  --success-dim: rgba(5, 150, 105, 0.12);
  --success-glow: rgba(5, 150, 105, 0.3);

  --warning:     #d97706;
  --warning-dim: rgba(217, 119, 6, 0.12);
  --warning-glow: rgba(217, 119, 6, 0.3);

  --danger:      #dc2626;
  --danger-dim:  rgba(220, 38, 38, 0.12);
  --danger-glow: rgba(220, 38, 38, 0.3);

  --info:        #2563eb;
  --info-dim:    rgba(37, 99, 235, 0.12);
  --info-glow:   rgba(37, 99, 235, 0.3);

  /* ── Module Colors ── */
  --sales:       #2563eb;
  --sales-dim:   rgba(37, 99, 235, 0.1);
  --purchases:   #ea580c;
  --purchases-dim: rgba(234, 88, 12, 0.1);
  --inventory:   #d97706;
  --inventory-dim: rgba(217, 119, 6, 0.1);
  --accounting:  #7c3aed;
  --accounting-dim: rgba(124, 58, 237, 0.1);
  --maintenance: #0891b2;
  --maintenance-dim: rgba(8, 145, 178, 0.1);
  --reports:     #4f46e5;
  --reports-dim: rgba(79, 70, 229, 0.1);
  --hr:          #059669;
  --hr-dim:      rgba(5, 150, 105, 0.1);
  --crm:         #db2777;
  --crm-dim:     rgba(219, 39, 119, 0.1);

  --brand: var(--primary);
  --brand-dim: var(--primary-dim);
  --orange: var(--purchases);
  --cyan:   var(--maintenance);
  --warn:   var(--warning);
  --bad:    var(--danger);
  --good:   var(--success);

  /* ── Text: MUCH darker for readability ── */
  --text-0:     #0A0E1A;
  --text-1:     #111827;
  --text-2:     #1e293b;
  --text-dim:   #374151;
  --text-muted: #4b5563;

  /* ── Borders: visible strong lines ── */
  --border:       #c5cfe3;
  --border-soft:  #dce4f0;
  --border-focus: var(--primary);

  /* ── Shadows: stronger depth ── */
  --shadow-xs: 0 1px 3px rgba(10, 14, 26, 0.08);
  --shadow-sm: 0 2px 8px rgba(10, 14, 26, 0.08), 0 1px 2px rgba(10, 14, 26, 0.05);
  --shadow-md: 0 4px 16px rgba(10, 14, 26, 0.10), 0 2px 4px rgba(10, 14, 26, 0.06);
  --shadow-lg: 0 8px 32px rgba(10, 14, 26, 0.12), 0 4px 8px rgba(10, 14, 26, 0.07);
  --shadow-xl: 0 20px 48px rgba(10, 14, 26, 0.14), 0 8px 16px rgba(10, 14, 26, 0.09);
}

/* ══════════════════════════════════════════════════════════
   GLOBAL RESET & BASE
   ══════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.6;
  direction: rtl;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--transition-slow), color var(--transition-normal);
}

/* Light mode: heavier base font weight */
body.theme-light {
  font-weight: 500;
  color: var(--text-1);
}

/* ══════════════════════════════════════════════════════════
   CARD SYSTEM — Premium with gradient top borders
   ══════════════════════════════════════════════════════════ */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
  position: relative;
}

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

body.theme-light .card::before {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(124, 92, 255, 0.2);
}

body.theme-light .card:hover {
  border-color: rgba(79, 70, 229, 0.3);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Light mode: stronger card borders and bolder text */
body.theme-light .card {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
body.theme-light .card-title,
body.theme-light .section-title,
body.theme-light h1, body.theme-light h2,
body.theme-light h3, body.theme-light h4 {
  color: var(--text-0);
  font-weight: 800;
}
body.theme-light label,
body.theme-light th {
  color: var(--text-2);
  font-weight: 700;
}
body.theme-light td {
  color: var(--text-1);
  font-weight: 600;
}

/* Colored top-border gradient cards */
.card.accent-primary { border-top: 2px solid var(--primary); }
.card.accent-sales    { border-top: 2px solid var(--sales); }
.card.accent-purchases { border-top: 2px solid var(--purchases); }
.card.accent-inventory { border-top: 2px solid var(--inventory); }
.card.accent-accounting { border-top: 2px solid var(--accounting); }
.card.accent-success  { border-top: 2px solid var(--success); }
.card.accent-danger   { border-top: 2px solid var(--danger); }
.card.accent-warning  { border-top: 2px solid var(--warning); }
.card.accent-info     { border-top: 2px solid var(--info); }

/* Dark mode: colored card glow */
.card.glow-primary:hover { box-shadow: var(--shadow-lg), 0 0 24px var(--primary-glow); }
.card.glow-sales:hover   { box-shadow: var(--shadow-lg), 0 0 24px var(--sales-glow); }
.card.glow-success:hover { box-shadow: var(--shadow-lg), 0 0 24px var(--success-glow); }
.card.glow-warning:hover { box-shadow: var(--shadow-lg), 0 0 24px var(--warning-glow); }
.card.glow-danger:hover  { box-shadow: var(--shadow-lg), 0 0 24px var(--danger-glow); }

.card-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.02);
}

body.theme-light .card-header {
  background: rgba(0,0,0,0.01);
}

.card-header h3 {
  color: var(--text-0);
  font-weight: 700;
  font-size: 15px;
  font-family: var(--font-heading);
  letter-spacing: -0.2px;
}

.card-body {
  padding: 24px;
  color: var(--text-1);
}

/* ══════════════════════════════════════════════════════════
   BUTTON SYSTEM — Gradient, Outline, Ghost with Glow
   ══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
  user-select: none;
  line-height: 1;
  letter-spacing: -0.1px;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
  transition: opacity var(--transition-fast);
}

.btn:hover::after { opacity: 1; }

/* Primary */
.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, #5B5CEB 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 14px var(--primary-glow);
  border-color: transparent;
}

.btn-primary:hover {
  box-shadow: 0 6px 18px var(--primary-glow);
}

.btn-primary:active { opacity: 0.9; }

/* Success */
.btn-success {
  background: linear-gradient(135deg, var(--success) 0%, #00B87A 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 14px var(--success-glow);
}
.btn-success:hover { box-shadow: 0 6px 18px var(--success-glow); }

/* Danger */
.btn-danger {
  background: linear-gradient(135deg, var(--danger) 0%, #E0425C 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 14px var(--danger-glow);
}
.btn-danger:hover { box-shadow: 0 6px 18px var(--danger-glow); }

/* Warning */
.btn-warning {
  background: linear-gradient(135deg, var(--warning) 0%, #E89A30 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 14px var(--warning-glow);
}
.btn-warning:hover { box-shadow: 0 6px 18px var(--warning-glow); }

/* Secondary */
.btn-secondary {
  background: var(--bg-2);
  color: var(--text-0);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
  background: var(--bg-3);
  border-color: rgba(124, 92, 255, 0.3);
}

body.theme-light .btn-secondary {
  background: var(--bg-1);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--text-0);
}

/* Outline */
.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}
.btn-outline:hover {
  background: var(--primary-dim);
  box-shadow: 0 0 16px var(--primary-glow);
}

/* Sizes */
.btn-sm  { padding: 6px 14px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-lg  { padding: 12px 28px; font-size: 15px; border-radius: var(--radius-lg); }
.btn-xl  { padding: 14px 36px; font-size: 16px; border-radius: var(--radius-lg); }
.btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--radius-md); }
.btn-icon.sm { width: 30px; height: 30px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-icon.lg { width: 44px; height: 44px; font-size: 18px; }

/* ══════════════════════════════════════════════════════════
   FORM INPUTS — Modern with Focus Glow
   ══════════════════════════════════════════════════════════ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
}

.form-group label {
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.1px;
}

.input, select, textarea {
  width: 100%;
  height: 42px;
  padding: 0 16px;
  background: var(--surface-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-0);
  font-family: var(--font-body);
  font-size: 13.5px;
  outline: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
  -webkit-appearance: none;
}

body.theme-light .input,
body.theme-light select,
body.theme-light textarea {
  background: var(--bg-1);
  border-color: var(--border);
}

textarea {
  height: auto;
  padding: 12px 16px;
  resize: vertical;
  min-height: 80px;
}

.input::placeholder { color: var(--text-dim); font-size: 13px; }

.input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-dim), 0 2px 8px rgba(0,0,0,0.1);
  background: var(--bg-2);
}

body.theme-light .input:focus,
body.theme-light select:focus,
body.theme-light textarea:focus {
  background: var(--bg-1);
  box-shadow: 0 0 0 3px var(--primary-dim);
}

.input.mono { font-family: var(--font-mono); letter-spacing: 0.3px; }

/* Input sizes */
.input-sm { height: 34px; padding: 0 12px; font-size: 12.5px; border-radius: var(--radius-sm); }
.input-lg { height: 48px; padding: 0 20px; font-size: 15px; border-radius: var(--radius-lg); }

/* Input states */
.input.error, select.error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-dim); }
.input.success, select.success { border-color: var(--success); box-shadow: 0 0 0 3px var(--success-dim); }

/* ══════════════════════════════════════════════════════════
   BADGE SYSTEM — Status Pills with Glow
   ══════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-family: var(--font-heading);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Status badges */
.badge.good, .badge.success {
  background: var(--success-dim);
  color: var(--success);
  border: 1px solid rgba(0, 208, 132, 0.2);
}

body.theme-light .badge.good,
body.theme-light .badge.success {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border-color: rgba(5, 150, 105, 0.2);
}

.badge.warn, .badge.warning {
  background: var(--warning-dim);
  color: var(--warning);
  border: 1px solid rgba(255, 184, 77, 0.2);
}

body.theme-light .badge.warn,
body.theme-light .badge.warning {
  background: rgba(245, 158, 11, 0.1);
  color: #D97706;
  border-color: rgba(217, 119, 6, 0.2);
}

.badge.bad, .badge.danger {
  background: var(--danger-dim);
  color: var(--danger);
  border: 1px solid rgba(255, 92, 122, 0.2);
}

body.theme-light .badge.bad,
body.theme-light .badge.danger {
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
  border-color: rgba(220, 38, 38, 0.2);
}

.badge.indigo, .badge.primary {
  background: var(--primary-dim);
  color: var(--primary);
  border: 1px solid var(--primary-glow);
}

.badge.info {
  background: var(--info-dim);
  color: var(--info);
  border: 1px solid rgba(56, 189, 248, 0.2);
}

.badge.neutral {
  background: var(--bg-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}

/* Module badges */
.badge.sales     { background: var(--sales-dim); color: var(--sales); }
.badge.purchases { background: var(--purchases-dim); color: var(--purchases); }
.badge.inventory { background: var(--inventory-dim); color: var(--inventory); }
.badge.accounting{ background: var(--accounting-dim); color: var(--accounting); }

/* ══════════════════════════════════════════════════════════
   TABLE SYSTEM — Sticky Headers, Hover, Status Pills
   ══════════════════════════════════════════════════════════ */
.table-container {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.table-container::-webkit-scrollbar { height: 6px; }
.table-container::-webkit-scrollbar-track { background: var(--bg-1); }
.table-container::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }

table {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
  font-size: 13.5px;
}

table th {
  background: var(--bg-2);
  color: var(--text-dim);
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

body.theme-light table th {
  background: var(--bg-2);
  color: var(--text-dim);
}

table td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-1);
  vertical-align: middle;
  transition: background var(--transition-fast);
}

table tbody tr:hover td {
  background: var(--bg-hover);
}

table tbody tr:last-child td {
  border-bottom: none;
}

table.data-dense th { padding: 10px 14px; font-size: 11px; }
table.data-dense td { padding: 10px 14px; font-size: 13px; }

/* ══════════════════════════════════════════════════════════
   MODAL SYSTEM — Premium with animations
   ══════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--surface-modal);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

body.theme-light .modal {
  background: var(--bg-1);
  border-color: var(--border);
}

.modal-overlay.active .modal {
  /* no animation for performance */
}

.modal-lg  { max-width: 820px; }
.modal-xl  { max-width: 1100px; }

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.025);
  flex-shrink: 0;
}

body.theme-light .modal-header {
  background: var(--bg-2);
  border-color: var(--border);
}

.modal-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -0.2px;
}

.modal-close {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 16px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.modal-close:hover {
  background: var(--danger-dim);
  color: var(--danger);
  border-color: var(--danger);
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  background: rgba(0,0,0,0.15);
  flex-shrink: 0;
}

body.theme-light .modal-footer {
  background: var(--bg-2);
  border-color: var(--border);
}

/* ══════════════════════════════════════════════════════════
   SKELETON LOADING — Shimmer animation
   ══════════════════════════════════════════════════════════ */
.sk {
  background: var(--bg-3);
  border-radius: var(--radius-xs);
  display: inline-block;
}

@keyframes sk-shimmer {
  0%   { opacity: 1; }
  100% { opacity: 1; }
}

body.theme-light .sk {
  background: #E8EDF5;
}

/* ══════════════════════════════════════════════════════════
   UTILITY — Inline editable cells & profit indicators
   ══════════════════════════════════════════════════════════ */
td.price-editable {
  cursor: cell;
  position: relative;
}
td.price-editable:hover { background: rgba(124, 92, 255, 0.06) !important; }
td.price-editable::after {
  content: '✏️';
  font-size: 10px;
  opacity: 0;
  margin-right: 4px;
  transition: opacity 0.15s;
}
td.price-editable:hover::after { opacity: 0.6; }

.profit-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 6px;
}
.profit-dot.high   { background: var(--success); box-shadow: 0 0 6px var(--success-glow); }
.profit-dot.medium { background: var(--warning); box-shadow: 0 0 6px var(--warning-glow); }
.profit-dot.low    { background: var(--danger);  box-shadow: 0 0 6px var(--danger-glow); }

/* ══════════════════════════════════════════════════════════
   ALERTS — Toast & Banner styles
   ══════════════════════════════════════════════════════════ */
.alert {
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
}
.alert.good   { background: var(--success-dim); color: var(--success); border-color: rgba(0,208,132,0.2); }
.alert.bad    { background: var(--danger-dim);  color: var(--danger);  border-color: rgba(255,92,122,0.2); }
.alert.warn   { background: var(--warning-dim); color: var(--warning); border-color: rgba(255,184,77,0.2); }
.alert.info   { background: var(--info-dim);    color: var(--info);    border-color: rgba(56,189,248,0.2); }
.alert.hidden { display: none !important; }

body.theme-light .alert.bad  { color: #DC2626; background: rgba(239,68,68,0.08); border-color: rgba(220,38,38,0.2); }
body.theme-light .alert.good { color: #059669; background: rgba(16,185,129,0.08); border-color: rgba(5,150,105,0.2); }

/* ══════════════════════════════════════════════════════════
   DIVIDERS
   ══════════════════════════════════════════════════════════ */
.divider-label {
  font-size: 11.5px;
  color: var(--text-dim);
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
}
.divider-label::before,
.divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}

/* ══════════════════════════════════════════════════════════
   UTILITY CLASSES
   ══════════════════════════════════════════════════════════ */
.hidden { display: none !important; }
.text-0 { color: var(--text-0); }
.text-1 { color: var(--text-1); }
.text-2 { color: var(--text-2); }
.text-dim { color: var(--text-dim); }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }
.font-bold    { font-weight: 700; }
.font-semi    { font-weight: 600; }
.font-mono    { font-family: var(--font-mono); }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.flex  { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.w-full { width: 100%; }

/* ══════════════════════════════════════════════════════════
   LOADING SPINNER
   ══════════════════════════════════════════════════════════ */
.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

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

/* ══════════════════════════════════════════════════════════
   FADE ANIMATIONS
   ══════════════════════════════════════════════════════════ */
.animate-fade-in {
  /* animation disabled for performance */
  opacity: 1;
}

@keyframes fadeInUp {
  from { opacity: 1; }
  to   { opacity: 1; }
}

.animate-scale-in {
  /* animation disabled for performance */
  opacity: 1;
}

@keyframes scaleIn {
  from { opacity: 1; }
  to   { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
   SCROLLBAR GLOBAL
   ══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent; }

/* ══════════════════════════════════════════════════════════
   REQ MARKER
   ══════════════════════════════════════════════════════════ */
.req { color: var(--danger); font-weight: 700; }

/* ══════════════════════════════════════════════════════════
   LIGHT MODE — Professional Enhancements
   Stronger text contrast, improved readability
   ══════════════════════════════════════════════════════════ */

/* ── Force dark text everywhere in light mode ─────────── */
body.theme-light {
  color: #0A0A0A;
}

body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light h5,
body.theme-light h6,
body.theme-light .page-title,
body.theme-light .modal-title,
body.theme-light .card-header h3,
body.theme-light .kpi-value,
body.theme-light .inv-kpi-value,
body.theme-light strong,
body.theme-light b {
  color: #000000 !important;
}

body.theme-light .page-subtitle,
body.theme-light .kpi-label,
body.theme-light .inv-kpi-label {
  color: #1A1A2E !important;
}

/* ── Table improvements ──────────────────────────────── */
body.theme-light .data-dense th,
body.theme-light table thead th {
  background: #F0F2F8 !important;
  color: #000000 !important;
  font-weight: 700;
  border-bottom: 2px solid #D1D5DB;
}

body.theme-light .data-dense td,
body.theme-light table tbody td {
  color: #0A0A0A !important;
  border-bottom-color: #E5E7EB;
}

body.theme-light .data-dense tbody tr:hover,
body.theme-light table tbody tr:hover {
  background: #EEF0FF !important;
}

body.theme-light .data-dense tbody tr:nth-child(even) {
  background: #F9FAFB;
}

/* ── Sidebar in light mode ───────────────────────────── */
body.theme-light .sidebar {
  background: #FFFFFF;
  border-left: 1px solid #E5E7EB;
}

body.theme-light .sidebar .nav-item {
  color: #1E293B !important;
  font-weight: 500;
}

body.theme-light .sidebar .nav-item:hover {
  background: rgba(99, 102, 241, 0.06) !important;
  color: #6366F1 !important;
}

body.theme-light .sidebar .nav-item.active {
  background: rgba(99, 102, 241, 0.1) !important;
  color: #6366F1 !important;
  font-weight: 700;
  border-right: 4px solid #6366F1 !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

body.theme-light .sidebar .nav-section-header {
  color: #0F172A !important;
  font-weight: 700;
}

/* ── Input fields ────────────────────────────────────── */
body.theme-light .input,
body.theme-light input[type="text"],
body.theme-light input[type="number"],
body.theme-light input[type="date"],
body.theme-light input[type="email"],
body.theme-light input[type="password"],
body.theme-light input[type="tel"],
body.theme-light select,
body.theme-light textarea {
  background: #F7F8FC !important;
  color: #000000 !important;
  border-color: #D1D5DB !important;
}

body.theme-light .input:focus,
body.theme-light input:focus,
body.theme-light select:focus,
body.theme-light textarea:focus {
  border-color: #5B5CEB !important;
  box-shadow: 0 0 0 3px rgba(91, 92, 235, 0.12) !important;
}

body.theme-light .input::placeholder,
body.theme-light input::placeholder {
  color: #6B7280 !important;
}

/* ── Badges ──────────────────────────────────────────── */
body.theme-light .badge {
  font-weight: 600;
}

/* ── Filter bar ──────────────────────────────────────── */
body.theme-light .filterbar {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
}

body.theme-light .filterbar label {
  color: #1A1A2E !important;
  font-weight: 600;
}

/* ── Modal improvements ──────────────────────────────── */
body.theme-light .modal {
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
}

body.theme-light .modal-header {
  border-bottom-color: #E5E7EB;
}

body.theme-light .modal-footer {
  border-top-color: #E5E7EB;
  background: #F9FAFB;
}

/* ── KPI cards in light mode ─────────────────────────── */
body.theme-light .kpi-card,
body.theme-light .inv-kpi-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
}

body.theme-light .kpi-card:hover,
body.theme-light .inv-kpi-card:hover {
  border-color: #5B5CEB;
  box-shadow: 0 4px 16px rgba(91, 92, 235, 0.08);
}

/* ── Topbar ──────────────────────────────────────────── */
body.theme-light .topbar {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid #E5E7EB;
  backdrop-filter: blur(12px);
}

body.theme-light .topbar * {
  color: #0A0A0A;
}

/* ── Monospace text ──────────────────────────────────── */
body.theme-light .mono {
  color: #0A0A0A !important;
}

/* ── Dim text override ──────────────────────────────── */
body.theme-light .dim,
body.theme-light .page-subtitle,
body.theme-light .kpi-sub {
  color: #1E293B !important;
  font-weight: 500;
}

body.theme-light .text-2,
body.theme-light .kpi-label,
body.theme-light .inv-kpi-label {
  color: #0F172A !important;
  font-weight: 600;
}

body.theme-light .text-muted,
body.theme-light .dim-text,
body.theme-light p.dim {
  color: #334155 !important;
}

/* ── Stronger font weight for body in light mode ────── */
body.theme-light {
  font-weight: 450;
  -webkit-font-smoothing: auto;
}

/* ══════════════════════════════════════════════════════════
   PERFORMANCE & SNAPPY MODE (No Animations, Transitions, or Hover Motion)
   ══════════════════════════════════════════════════════════ */

/* 1. Global eradication of all transition and animation delays/durations */
*, *::before, *::after {
  transition: none !important;
  animation: none !important;
  transition-duration: 0ms !important;
  transition-delay: 0ms !important;
  animation-duration: 0ms !important;
  animation-delay: 0ms !important;
}

/* Make skeletons static to prevent CPU repaint cycles */
.skeleton-row, .sk, .sk-circle {
  animation: none !important;
  background: var(--bg-3) !important;
}

/* 2. Global eradication of hover shifts, translates, and scales (mouse hover motions) */
*:hover, *:focus, *:active {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Disable modal overlay fade/blur effects */
.modal-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(0, 0, 0, 0.7) !important;
  transition: none !important;
}
.modal-overlay:not(.active) {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
.modal-overlay.active {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}
.modal {
  transform: none !important;
  transition: none !important;
}

/* Make toast notifications appear instantly without slide-in */
.toast {
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* Turn off backdrop filters across the entire app */
.topbar, .filterbar, .sidebar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}