/* Pajill — Stripe Design System */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── FONTS ────────────────────────────────────────────────── */
@font-face {
  font-family: "sohne-var";
  src: url("https://b.stripecdn.com/mkt-statics-srv/assets/v1/f965fdf4.woff2") format("woff2-variations");
  font-weight: 1 900;
  font-display: swap;
}
@font-face {
  font-family: "SourceCodePro";
  src: url("https://b.stripecdn.com/mkt-statics-srv/assets/v1/1a930247.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ── ARABIC FONT — Tajawal loaded via <link> in app.js HEAD ─ */
/* @import removed — use <link rel="preconnect"> for performance */

/* Apply Tajawal to the entire page when RTL / Arabic is active */
html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
  font-family: 'Tajawal', 'Segoe UI', 'Arial', sans-serif !important;
  letter-spacing: 0 !important;
  word-spacing: 0.02em;
}

/* Arabic-specific font size bumps — Tajawal reads slightly small */
html[dir="rtl"] body                { font-size: 15px; }
html[dir="rtl"] .nav-label          { font-size: 14px; font-weight: 700; }
html[dir="rtl"] .nav-section-label  { font-size: 11px; font-weight: 700; }
html[dir="rtl"] .page-hdr h1,
html[dir="rtl"] .page-title h1      { font-size: 22px; font-weight: 900; letter-spacing: 0 !important; }
html[dir="rtl"] .field-label        { font-size: 13px; font-weight: 700; }
html[dir="rtl"] .field-input,
html[dir="rtl"] .field-select,
html[dir="rtl"] .field-textarea     { font-size: 14.5px; font-family: 'Tajawal', sans-serif !important; }
html[dir="rtl"] .btn                { font-size: 14px; font-weight: 700; letter-spacing: 0 !important; }
html[dir="rtl"] .btn-sm             { font-size: 13px; }
html[dir="rtl"] .badge,
html[dir="rtl"] .tbl-pill,
html[dir="rtl"] .status-badge       { font-size: 12px; font-weight: 700; }
html[dir="rtl"] .tbl-primary        { font-size: 14px; font-weight: 700; }
html[dir="rtl"] .tbl-secondary      { font-size: 12px; }
html[dir="rtl"] .card-title,
html[dir="rtl"] .section-header h3  { font-size: 16px; font-weight: 800; }
html[dir="rtl"] .hdr-user-name      { font-size: 13.5px; font-weight: 700; }
html[dir="rtl"] .kpi-label          { font-size: 12px; font-weight: 700; }
html[dir="rtl"] .kpi-val            { font-family: 'Tajawal', sans-serif; }
html[dir="rtl"] .empty-state h3     { font-size: 16px; font-weight: 800; }
html[dir="rtl"] .empty-state p      { font-size: 14px; }
html[dir="rtl"] .modal-header h2    { font-size: 17px; font-weight: 800; }
html[dir="rtl"] .stat-chip          { font-family: 'Tajawal', sans-serif; }
html[dir="rtl"] .filter-chip        { font-size: 13px; font-weight: 700; }
html[dir="rtl"] .sb-logo-name       { font-size: 15px; font-weight: 900; letter-spacing: 0 !important; }
html[dir="rtl"] .sb-logo-sub        { font-size: 11px; font-weight: 500; }
html[dir="rtl"] .data-table th      { font-size: 12px; font-weight: 800; }
html[dir="rtl"] .data-table td      { font-size: 13.5px; }

/* Keep numbers LTR inside Arabic text */
html[dir="rtl"] .tbl-id,
html[dir="rtl"] [style*="font-family:monospace"],
html[dir="rtl"] .mono               { font-family: 'SourceCodePro', monospace !important; direction: ltr; unicode-bidi: embed; }

/* ═══════════════════════════════════════════════════════════
   PAJILL — ENTERPRISE COLOR DESIGN TOKENS
   Light theme (default). Dark theme overrides in [data-theme="dark"].
   Do not use hardcoded hex colors in components — reference tokens.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Primary Action Color — Professional Navy Blue ── */
  --accent:        #2563eb;   /* primary blue */
  --accent-dark:   #1d4ed8;   /* pressed / darker */
  --accent-hover:  rgba(37, 99, 235, 0.08);
  --accent-glow:   rgba(37, 99, 235, 0.18);

  /* ── Surface & Background ── */
  --bg:     #f8fafc;    /* page background — cool off-white */
  --card:   #ffffff;    /* card / panel surface */
  --card2:  #f1f5f9;    /* elevated surface / table header / input bg */
  --border: #e2e8f0;    /* default border */
  --border2: #edf2f7;   /* lighter dividers */

  /* ── Text Hierarchy ── */
  --text:   #0f172a;    /* primary text — WCAG AAA on white */
  --sub:    #475569;    /* secondary text — WCAG AA */
  --muted:  #94a3b8;    /* tertiary / placeholder — WCAG AA large */
  --nav:    #64748b;

  /* ── Sidebar (always dark regardless of theme) ── */
  --sidebar-bg:          #0f1e2e;
  --sidebar-hover:       rgba(255,255,255,0.07);
  --sidebar-active:      rgba(37, 99, 235, 0.22);
  --sidebar-text:        rgba(255,255,255,0.72);
  --sidebar-active-text: #ffffff;

  /* ── Semantic Status Colors ── */
  --green:  #16a34a;
  --amber:  #d97706;
  --red:    #dc2626;
  --blue:   #2563eb;
  --cyan:   #0891b2;

  /* ── Status Badge Tokens — light theme ── */
  --s-neutral-bg:  rgba(100, 116, 139, 0.10); --s-neutral-tx:  #334155; --s-neutral-bd:  rgba(100,116,139,.22);
  --s-blue-bg:     rgba(37,  99, 235, 0.08);  --s-blue-tx:     #1e40af; --s-blue-bd:     rgba(37, 99,235,.20);
  --s-violet-bg:   rgba(109, 40, 217, 0.08);  --s-violet-tx:   #5b21b6; --s-violet-bd:   rgba(109,40,217,.20);
  --s-cyan-bg:     rgba(8,  145, 178, 0.08);  --s-cyan-tx:     #0e7490; --s-cyan-bd:     rgba(8, 145,178,.20);
  --s-teal-bg:     rgba(13, 148, 136, 0.09);  --s-teal-tx:     #0f766e; --s-teal-bd:     rgba(13,148,136,.22);
  --s-amber-bg:    rgba(217,119,  6, 0.10);   --s-amber-tx:    #92400e; --s-amber-bd:    rgba(217,119,6,.25);
  --s-orange-bg:   rgba(234, 88, 12, 0.10);   --s-orange-tx:   #9a3412; --s-orange-bd:   rgba(234,88,12,.22);
  --s-green-bg:    rgba(22, 163, 74, 0.10);   --s-green-tx:    #15803d; --s-green-bd:    rgba(22,163,74,.22);
  --s-red-bg:      rgba(220, 38, 38, 0.08);   --s-red-tx:      #991b1b; --s-red-bd:      rgba(220,38,38,.20);

  /* ── Alert Tokens — light theme ── */
  --alert-info-bg:    rgba(37,  99, 235, 0.06); --alert-info-bd:    rgba(37, 99,235,.22); --alert-info-tx:    #1e40af;
  --alert-warn-bg:    rgba(217,119,  6, 0.08);  --alert-warn-bd:    rgba(217,119,6,.28);  --alert-warn-tx:    #78350f;
  --alert-success-bg: rgba(22, 163, 74, 0.07);  --alert-success-bd: rgba(22,163,74,.22);  --alert-success-tx: #14532d;
  --alert-danger-bg:  rgba(220, 38, 38, 0.06);  --alert-danger-bd:  rgba(220,38,38,.20);  --alert-danger-tx:  #7f1d1d;

  /* ── Shadows ── */
  --radius: 10px;
  --shadow:    0 4px 12px -2px rgba(15,23,42,.08), 0 2px 6px -2px rgba(15,23,42,.05);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.05);
  --shadow-lg: 0 20px 48px -12px rgba(15,23,42,.16), 0 8px 24px -6px rgba(15,23,42,.08);
}

body {
  font-family: 'sohne-var', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ── LAYOUT ─────────────────────────────────────────────── */
#app { display: flex; height: 100vh; overflow: hidden; }
#sidebar { width: 240px; min-height: 100vh; background: var(--sidebar-bg); display: flex; flex-direction: column; flex-shrink: 0; border-right: none; }
#main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
#header { height: 56px; background: var(--bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 24px; gap: 12px; flex-shrink: 0; }
#page-content { flex: 1; overflow-y: auto; background: var(--bg); }
.page-inner { padding: 24px; max-width: 1500px; }

/* ── SIDEBAR ────────────────────────────────────────────── */
.sb-logo { padding: 16px 14px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.sb-logo-icon {
  width: 40px; height: 40px;
  background: #ffffff;
  border-radius: 11px;
  padding: 5px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 14px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.12);
}
.sb-logo-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sb-logo-name { color: #ffffff; font-weight: 800; font-size: 15px; letter-spacing: -0.4px; }
.sb-logo-sub  { color: rgba(255,255,255,0.38); font-size: 10px; font-weight: 500; margin-top: 1px; }
.sb-role-wrap { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sb-role-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 5px; padding-left: 4px; }
.sb-role-select { width: 100%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: #ffffff; padding: 8px 10px; font-size: 13px; font-weight: 600; cursor: pointer; outline: none; transition: border-color 0.15s; }
.sb-role-select:focus { border-color: var(--accent); }
.sb-role-select option { background: #0a2540; color: #ffffff; }
.sb-role-badge { margin-top: 7px; padding: 5px 10px; border-radius: 8px; display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; }
.sb-role-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
nav { flex: 1; padding: 8px 0; overflow-y: auto; }
.nav-section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.3); padding: 12px 16px 4px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; cursor: pointer; color: var(--sidebar-text); font-size: 13.5px; font-weight: 500; margin: 1px 8px; transition: all 0.15s; }
.nav-item:hover { background: var(--sidebar-hover); color: #ffffff; }
.nav-item.active { background: var(--sidebar-active); color: var(--sidebar-active-text); }
.nav-item .icon { font-size: 15px; flex-shrink: 0; opacity: 0.85; }
.nav-item.active .icon { opacity: 1; }
.nav-badge { margin-left: auto; background: var(--red); color: white; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; }
.nav-badge.blue { background: var(--accent); }
.sb-user { border-top: 1px solid rgba(255,255,255,0.07); padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.sb-user-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #1d4ed8); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; flex-shrink: 0; }
.sb-user-name { color: #ffffff; font-size: 13px; font-weight: 600; }
.sb-user-role { color: rgba(255,255,255,0.4); font-size: 11px; }

/* ── HEADER ─────────────────────────────────────────────── */
.breadcrumb { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 13px; }
.breadcrumb .sep { color: var(--muted); }
.breadcrumb .current { color: var(--text); font-weight: 600; }
.breadcrumb .parent { color: var(--muted); }
.req-badge { background: var(--accent-hover); border: 1px solid rgba(37,99,235,0.22); border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 5px; }
.hdr-btn { width: 36px; height: 36px; border-radius: 8px; background: var(--card2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; position: relative; color: var(--sub); transition: all .15s; }
.hdr-btn:hover { background: var(--accent-hover); border-color: rgba(37,99,235,0.28); color: var(--accent); }
.hdr-notif-dot { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 1.5px solid #ffffff; }
.hdr-user { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; background: var(--card2); transition: all .15s; }
.hdr-user:hover { background: var(--accent-hover); border-color: rgba(37,99,235,0.28); }
.hdr-user-av { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #1d4ed8); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: white; }
.hdr-user-name { font-size: 13px; font-weight: 600; color: var(--text); }

/* ── WORKFLOW STEPPER ───────────────────────────────────── */
#stepper { background: var(--card); border-bottom: 1px solid var(--border); padding: 10px 20px; overflow-x: auto; }
.stepper-inner { display: flex; align-items: flex-start; min-width: max-content; }
.step-item { display: flex; align-items: flex-start; }
.step-circle { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.step-circle.done    { background: var(--green); color: #ffffff; }
.step-circle.active  { background: var(--accent); color: white; box-shadow: 0 0 0 3px var(--accent-hover); }
.step-circle.future  { background: var(--border2); color: var(--muted); }
.step-circle.skipped { background: transparent; color: var(--muted); border: 2px dashed var(--border); font-size: 12px; }
.step-label { font-size: 9.5px; font-weight: 500; margin-top: 4px; text-align: center; max-width: 65px; }
.step-label.done    { color: var(--green); font-weight: 600; }
.step-label.active  { color: var(--accent); font-weight: 700; }
.step-label.future  { color: var(--muted); }
.step-label.skipped { color: #94A3B8; text-decoration: line-through; font-style: italic; }
.step-line.skipped  { background: repeating-linear-gradient(90deg,#CBD5E1 0,#CBD5E1 4px,transparent 4px,transparent 8px); }
.step-inner { display: flex; flex-direction: column; align-items: center; width: 70px; }
.step-line { height: 2px; width: 18px; flex-shrink: 0; margin-top: 11px; }
.step-line.done { background: var(--green); }
.step-line.future { background: var(--border2); }

/* ── CARDS ──────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); }
.kpi-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; cursor: pointer; transition: box-shadow 0.2s, border-color .2s, transform .15s; box-shadow: var(--shadow-sm); }
.kpi-card:hover { box-shadow: var(--shadow); border-color: rgba(37,99,235,.22); transform: translateY(-2px); }
.section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.section-header h3 { font-size: 14px; font-weight: 700; color: var(--text); }
.section-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; }

/* ── STATUS BADGES ──────────────────────────────────────────
   Semantic mapping (matches SL[] array order in pages):
   0  New Lead             → neutral slate
   1  Brief Created        → teal (initiated)
   2  Sent to Design       → blue (action — sent)
   3  Design In Progress   → violet (design team)
   4  Design Uploaded      → cyan (file delivered)
   5  Sent to Production   → orange (manufacturing)
   6  Cost In Progress     → amber (calculating)
   7  Cost Sent to Finance → amber (finance pending)
   8  Finance Approved     → green (approved)
   9  Quotation Generated  → blue (document)
   10 Quotation Sent       → cyan (sent to client)
   11 Client Approved      → green strong (won)
   12 Client Rejected      → red (lost)
   13 Revision Required    → amber (warning)
   14 Sent Direct→Prod     → orange (bypass)
   ─────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 9999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.badge-0  { background:var(--s-neutral-bg); color:var(--s-neutral-tx); border:1px solid var(--s-neutral-bd); }
.badge-1  { background:var(--s-teal-bg);    color:var(--s-teal-tx);    border:1px solid var(--s-teal-bd); }
.badge-2  { background:var(--s-blue-bg);    color:var(--s-blue-tx);    border:1px solid var(--s-blue-bd); }
.badge-3  { background:var(--s-violet-bg);  color:var(--s-violet-tx);  border:1px solid var(--s-violet-bd); }
.badge-4  { background:var(--s-cyan-bg);    color:var(--s-cyan-tx);    border:1px solid var(--s-cyan-bd); }
.badge-5  { background:var(--s-orange-bg);  color:var(--s-orange-tx);  border:1px solid var(--s-orange-bd); }
.badge-6  { background:var(--s-amber-bg);   color:var(--s-amber-tx);   border:1px solid var(--s-amber-bd); }
.badge-7  { background:var(--s-amber-bg);   color:var(--s-amber-tx);   border:1px solid var(--s-amber-bd); }
.badge-8  { background:var(--s-green-bg);   color:var(--s-green-tx);   border:1px solid var(--s-green-bd); }
.badge-9  { background:var(--s-blue-bg);    color:var(--s-blue-tx);    border:1px solid var(--s-blue-bd); }
.badge-10 { background:var(--s-cyan-bg);    color:var(--s-cyan-tx);    border:1px solid var(--s-cyan-bd); }
.badge-11 { background:var(--s-green-bg);   color:var(--s-green-tx);   border:1px solid var(--s-green-bd); font-weight:700; }
.badge-12 { background:var(--s-red-bg);     color:var(--s-red-tx);     border:1px solid var(--s-red-bd); }
.badge-13 { background:var(--s-amber-bg);   color:var(--s-amber-tx);   border:1px solid var(--s-amber-bd); }
.badge-14 { background:var(--s-orange-bg);  color:var(--s-orange-tx);  border:1px solid var(--s-orange-bd); }

/* ── BUTTONS ────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: var(--radius); font-size: 14px; font-weight: 600; border: none; cursor: pointer; transition: all 0.18s ease; white-space: nowrap; }
.btn-primary  { background: var(--accent); color: #ffffff; box-shadow: 0 1px 6px var(--accent-glow); }
.btn-primary:hover  { background: var(--accent-dark); box-shadow: 0 3px 12px var(--accent-glow); transform: translateY(-1px); }
.btn-success  { background: var(--green); color: #ffffff; }
.btn-success:hover  { background: #15803d; transform: translateY(-1px); }
.btn-warning  { background: var(--amber); color: #ffffff; }
.btn-warning:hover  { background: #b45309; }
.btn-danger   { background: var(--red); color: white; }
.btn-danger:hover   { background: #b91c1c; }
.btn-orange   { background: #ea580c; color: white; }
.btn-orange:hover   { background: #c2410c; }
.btn-outline  { background: transparent; color: var(--sub); border: 1.5px solid var(--border); }
.btn-outline:hover  { background: var(--accent-hover); border-color: rgba(37,99,235,.3); color: var(--accent); }
.btn-sm { padding: 5px 12px; font-size: 13px; border-radius: 8px; }
.btn-full { width: 100%; justify-content: center; }
.btn-whatsapp { background: #25D366; color: white; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn-call     { background: #00b386; color: #ffffff; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .15s; }
.btn-call:hover { background: #009970; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ── FORM FIELDS ────────────────────────────────────────── */
.field-label { display: block; font-size: 12px; font-weight: 600; color: var(--sub); margin-bottom: 4px; }
.field-input, .field-select, .field-textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text);
  background: var(--card);
  outline: none;
  transition: border-color 0.2s cubic-bezier(0.45,0.05,0.55,0.95), box-shadow 0.2s;
  font-family: inherit;
}
.field-input:focus, .field-select:focus, .field-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.field-input::placeholder, .field-textarea::placeholder { color: var(--muted); }
.field-input[readonly] { background: var(--card2); color: var(--sub); }
.field-textarea { resize: vertical; min-height: 80px; }
.field-select { cursor: pointer; }
.field-select option { background: var(--card); color: var(--text); }
.input-group { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.input-prefix { background: var(--card2); padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--sub); border-right: 1px solid var(--border); display: flex; align-items: center; white-space: nowrap; }
.input-group input { flex: 1; padding: 9px 12px; border: none; outline: none; font-size: 14px; color: var(--text); background: var(--card); font-family: inherit; }
.input-group:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.toggle-group { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; width: fit-content; }
.toggle-opt { padding: 7px 14px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; background: var(--card2); color: var(--sub); transition: all 0.15s; }
.toggle-opt.active { background: var(--accent); color: white; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-row.three { grid-template-columns: 1fr 1fr 1fr; }
.field-row.full { grid-template-columns: 1fr; }
.form-group { margin-bottom: 12px; }

/* ── TABLE ──────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { background: var(--card2); padding: 10px 14px; text-align: left; font-size: 11.5px; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); }
.data-table td { padding: 12px 14px; font-size: 14px; color: var(--text); border-bottom: 1px solid var(--border); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(37,99,235,.03); cursor: pointer; }

/* ── UPLOAD ZONE ────────────────────────────────────────── */
.upload-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 24px; text-align: center; cursor: pointer; transition: all 0.2s; background: var(--card2); }
.upload-zone:hover { border-color: var(--accent); background: var(--accent-hover); }
.upload-zone.has-files { border-color: var(--green); background: rgba(22,163,74,0.06); }
.upload-zone .uz-icon { font-size: 24px; margin-bottom: 8px; }
.upload-zone .uz-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.upload-zone .uz-hint { font-size: 11.5px; color: var(--muted); margin-bottom: 10px; }
.upload-zone .uz-btn { display: inline-block; background: var(--accent); color: white; font-size: 11px; font-weight: 600; padding: 5px 14px; border-radius: 8px; }
.upload-zone .uz-types { font-size: 10.5px; color: var(--muted); margin-top: 6px; }

/* ── FILE ITEM ──────────────────────────────────────────── */
.file-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--card2); border: 1px solid var(--border); border-radius: var(--radius); margin-top: 6px; }
.file-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.file-name { font-size: 12px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { font-size: 10.5px; color: var(--muted); }
.file-ext { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; }

/* ── TIMELINE ───────────────────────────────────────────── */
.timeline { }
.tl-item { display: flex; gap: 10px; padding: 8px 0; position: relative; }
.tl-item:not(:last-child)::before { content:''; position:absolute; left:15px; top:34px; bottom:-2px; width:1px; background:var(--border); }
.tl-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; }
.tl-body { flex: 1; padding-top: 2px; }
.tl-who { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.tl-av { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: white; }
.tl-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.tl-role { font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 9999px; background: var(--accent-hover); color: var(--accent); }
.tl-action { font-size: 12.5px; color: var(--sub); line-height: 1.4; }
.tl-time { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* ── COMMENTS ───────────────────────────────────────────── */
.comment-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.comment-item:last-child { border-bottom: none; }
.c-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; flex-shrink: 0; }
.c-header { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.c-name { font-size: 13px; font-weight: 700; color: var(--text); }
.c-role { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 9999px; }
.c-time { font-size: 11px; color: var(--muted); margin-left: auto; }
.c-text { font-size: 13px; color: var(--sub); line-height: 1.5; background: var(--card2); padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--border); }
.comment-input-row { display: flex; gap: 8px; margin-top: 12px; }

/* ── DESIGN STATUS STEPPER ──────────────────────────────── */
.ds-steps { display: flex; border-bottom: none; }
.ds-step { flex: 1; text-align: center; padding: 8px 4px; font-size: 11px; font-weight: 600; cursor: pointer; border-bottom: 3px solid var(--border); color: var(--muted); transition: all 0.2s; }
.ds-step:hover { color: var(--sub); }
.ds-step.active { border-bottom-color: var(--accent); color: var(--accent); }
.ds-step.done   { border-bottom-color: var(--green); color: var(--green); }

/* ── COST TOTAL BOX ─────────────────────────────────────── */
.cost-total { background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%); border-radius: var(--radius); padding: 16px 20px; color: white; box-shadow: 0 4px 16px rgba(37,99,235,.28); }

/* ── FINANCE FINAL PRICE ────────────────────────────────── */
.fin-final { border-radius: var(--radius); padding: 20px 24px; color: white; transition: background 0.3s; }
.fin-final.unapproved { background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%); box-shadow: 0 4px 16px rgba(37,99,235,.25); }
.fin-final.approved   { background: linear-gradient(135deg, #14532d 0%, #16a34a 100%); box-shadow: 0 4px 16px rgba(22,163,74,.28); }

/* ── TOAST ──────────────────────────────────────────────── */
#toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; min-width: 300px; max-width: 380px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; animation: slideIn 0.3s cubic-bezier(0.22,1,0.36,1); }
@keyframes slideIn { from { transform: translateX(60px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.toast-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.toast-title { font-size: 13px; font-weight: 700; color: var(--text); }
.toast-msg   { font-size: 12px; color: var(--sub); margin-top: 2px; }
.toast-close { cursor: pointer; color: var(--muted); font-size: 18px; padding: 0 4px; margin-left: auto; flex-shrink: 0; }

/* ── MODAL ──────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(7,16,28,.65); display: flex; align-items: center; justify-content: center; z-index: 9000; padding: 24px; }
.modal-box { background: var(--card); border: 1px solid var(--border); border-radius: 16px; max-height: 90vh; overflow: auto; box-shadow: var(--shadow-lg); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-header h3 { font-size: 16px; font-weight: 700; color: var(--text); }
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--muted); transition: color .15s; }
.modal-close:hover { color: var(--red); }
.modal-body { padding: 20px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: var(--card2); border-radius: 0 0 16px 16px; }

/* ── LOADING SPINNER ────────────────────────────────────── */
.spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-overlay { display: flex; align-items: center; justify-content: center; padding: 60px; }

/* ── MISC UTILITIES ─────────────────────────────────────── */
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt20 { margin-top: 20px; }
.mb4 { margin-bottom: 4px; } .mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; } .mb14 { margin-bottom: 14px; } .mb16 { margin-bottom: 16px; }
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap8 { gap: 8px; } .gap10 { gap: 10px; } .gap12 { gap: 12px; } .gap16 { gap: 16px; }
.bold { font-weight: 700; } .text-sm { font-size: 12px; } .text-muted { color: var(--muted); }
.mono { font-family: 'SourceCodePro', 'Courier New', monospace; }
.text-navy { color: var(--accent); } .text-green { color: var(--green); } .text-red { color: var(--red); }
.w100 { width: 100%; }
.sticky-sidebar { position: sticky; top: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.customer-strip { padding: 12px 16px; background: var(--card2); border-radius: var(--radius); border: 1px solid var(--border); display: flex; gap: 24px; flex-wrap: wrap; }
.customer-strip .cs-item .cs-label { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.customer-strip .cs-item .cs-value { font-size: 12.5px; font-weight: 700; color: var(--text); }
.info-row { display: flex; gap: 8px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.info-row:last-child { border-bottom: none; margin-bottom: 0; }
.info-row .ir-label { font-size: 10.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.info-row .ir-value { font-size: 12.5px; font-weight: 600; color: var(--text); }
.page-title h1 { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.4px; font-family: 'SourceCodePro', monospace; }
.page-title p  { font-size: 13px; color: var(--sub); margin-top: 2px; }
.sent-success { background: var(--alert-success-bg); border: 1.5px solid var(--alert-success-bd); border-radius: var(--radius); padding: 14px 20px; display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.sent-success .ss-title { font-size: 13.5px; font-weight: 700; color: var(--alert-success-tx); }
.sent-success .ss-sub   { font-size: 12.5px; color: var(--alert-success-tx); opacity: 0.8; }

/* ── LOGIN PAGE ─────────────────────────────────────────── */
.login-page { min-height: 100vh; background: radial-gradient(ellipse at 20% 50%, rgba(37,99,235,.08) 0%, transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(14,116,144,.05) 0%, transparent 50%), linear-gradient(135deg, #f8fafc 0%, #ffffff 60%, #f0f5ff 100%); display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-box { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 40px; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); }
.login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.login-logo-icon { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 4px 16px rgba(37,99,235,.32); }
.login-logo-name { font-size: 22px; font-weight: 900; color: var(--text); letter-spacing: -0.5px; font-family: 'SourceCodePro', monospace; }
.login-logo-sub  { font-size: 12px; color: var(--muted); }
.login-title { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.login-sub   { font-size: 13px; color: var(--sub); margin-bottom: 24px; }
.login-field { margin-bottom: 16px; }
.login-error { background: rgba(229,62,62,.06); border: 1px solid rgba(229,62,62,.2); border-radius: var(--radius); padding: 10px 14px; font-size: 13px; color: var(--red); margin-bottom: 14px; display: none; }
.login-hint  { margin-top: 20px; background: var(--card2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.login-hint-title { font-size: 11.5px; font-weight: 700; color: var(--sub); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.login-hint table { width: 100%; font-size: 12px; border-collapse: collapse; }
.login-hint td { padding: 3px 6px; color: var(--sub); }
.login-hint td:first-child { font-weight: 700; color: var(--text); }
.login-hint td:nth-child(2) { color: var(--muted); }

/* ── QUOTATION PREVIEW ──────────────────────────────────── */
.quot-hdr { background: linear-gradient(135deg, #0f1e2e 0%, #1e3a5f 60%, #2563eb 100%); color: white; padding: 24px 32px; border-radius: var(--radius) var(--radius) 0 0; }
.quot-body { padding: 24px 32px; background: var(--card); }
.quot-line-table th { background: var(--card2); padding: 10px 12px; text-align: left; font-size: 11.5px; font-weight: 700; color: var(--sub); text-transform: uppercase; border-bottom: 2px solid var(--border); }
.quot-line-table td { padding: 10px 12px; font-size: 12.5px; color: var(--text); border-bottom: 1px solid var(--border); }
.quot-total-bar { background: linear-gradient(90deg, #1e3a5f 0%, #2563eb 100%); color: white; display: flex; justify-content: space-between; padding: 12px 14px; border-radius: var(--radius); margin-top: 8px; }

/* ── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── PIPELINE BARS ──────────────────────────────────────── */
.pipeline-bar { height: 6px; background: var(--border2); border-radius: 3px; }
.pipeline-bar-fill { height: 100%; border-radius: 3px; }

/* ── ALERT BOXES ────────────────────────────────────────── */
.alert { padding: 12px 16px; border-radius: var(--radius); font-size: 13px; display: flex; align-items: flex-start; gap: 10px; line-height: 1.55; }
.alert-info    { background: var(--alert-info-bg);    border: 1px solid var(--alert-info-bd);    color: var(--alert-info-tx); }
.alert-warn    { background: var(--alert-warn-bg);    border: 1px solid var(--alert-warn-bd);    color: var(--alert-warn-tx); }
.alert-success { background: var(--alert-success-bg); border: 1px solid var(--alert-success-bd); color: var(--alert-success-tx); }
.alert-danger  { background: var(--alert-danger-bg);  border: 1px solid var(--alert-danger-bd);  color: var(--alert-danger-tx); }

/* ── HIDDEN / SHOW ──────────────────────────────────────── */
.hidden { display: none !important; }

/* ── NOTIFICATION SYSTEM ────────────────────────────────── */
.notif-wrap { position: relative; }
.notif-count {
  position: absolute; top: -5px; right: -5px;
  min-width: 17px; height: 17px;
  background: var(--red); color: white;
  font-size: 9.5px; font-weight: 800;
  border-radius: 9px; border: 2px solid #ffffff;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; pointer-events: none;
  animation: notif-pop .2s ease;
}
@keyframes notif-pop { from { transform: scale(0); } to { transform: scale(1); } }
.notif-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 340px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 600; overflow: hidden;
  animation: notif-slide .15s cubic-bezier(0.22,1,0.36,1);
}
@keyframes notif-slide { from { opacity:0; transform: translateY(-8px); } to { opacity:1; transform: translateY(0); } }
.notif-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.notif-hdr span { font-size: 13.5px; font-weight: 700; color: var(--text); }
.notif-hdr button {
  font-size: 11px; color: var(--accent); background: none;
  border: none; cursor: pointer; padding: 3px 7px;
  border-radius: 6px; transition: background .12s; font-weight: 600;
}
.notif-hdr button:hover { background: var(--accent-hover); }
#notif-list { max-height: 340px; overflow-y: auto; }
.notif-footer { padding: 8px 14px; border-top: 1px solid var(--border); text-align: center; }
.notif-footer a { font-size: 12px; color: var(--accent); text-decoration: none; font-weight: 500; }
.notif-footer a:hover { text-decoration: underline; }
.notif-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .1s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--card2); }
.notif-item.unread { background: rgba(37,99,235,.05); }
.notif-item.unread:hover { background: rgba(37,99,235,.08); }
.notif-icon {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--card2); display: flex;
  align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.notif-msg { font-size: 11.5px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 3px; }
.notif-time { font-size: 10.5px; color: var(--muted); }
.notif-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 6px; }

.notif-empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* ── FLOATING CHAT BUBBLE ───────────────────────────────── */
.chat-bubble {
  position: fixed; bottom: 28px; right: 28px;
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white; font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(37,99,235,.45);
  z-index: 400; transition: transform .2s cubic-bezier(0.22,1,0.36,1), box-shadow .2s;
  text-decoration: none;
}
.chat-bubble:hover { transform: scale(1.08); box-shadow: 0 10px 32px rgba(37,99,235,.55); }
.chat-bubble-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 20px; height: 20px; background: var(--red); color: white;
  font-size: 11px; font-weight: 800; border-radius: 10px;
  border: 2px solid #ffffff; display: flex;
  align-items: center; justify-content: center; padding: 0 4px;
}

/* ── CHAT INCOMING POPUP ────────────────────────────────── */
.chat-popup {
  position: fixed; bottom: 110px; right: 28px;
  width: 300px; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); z-index: 450;
  overflow: hidden; animation: chatPopupIn .25s cubic-bezier(0.22,1,0.36,1);
  border: 1px solid var(--border);
}
@keyframes chatPopupIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-popup-hdr {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px 8px; border-bottom: 1px solid var(--border);
}
.chat-popup-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: white; flex-shrink: 0;
}
.chat-popup-name { font-size: 13px; font-weight: 600; color: var(--text); }
.chat-popup-role { font-size: 11px; color: var(--sub); }
.chat-popup-body { padding: 9px 12px 11px; font-size: 13px; color: var(--text); line-height: 1.45; word-break: break-word; }
.chat-popup-footer { display: flex; gap: 6px; padding: 0 12px 10px; }
.chat-popup-btn { flex: 1; padding: 5px 0; border-radius: 8px; border: none; font-size: 12px; font-weight: 600; cursor: pointer; }
.chat-popup-btn.open    { background: var(--accent); color: white; }

.chat-popup-btn.dismiss { background: var(--card2); color: var(--sub); }

/* ── CHAT PAGE ──────────────────────────────────────────── */
.chat-layout { display: flex; height: 100%; overflow: hidden; }

/* Left panel */
.chat-left {
  width: 230px; background: #0a2540; flex-shrink: 0;
  display: flex; flex-direction: column; overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,.07);
}
.chat-left-title {
  padding: 14px 16px 10px; font-size: 14px; font-weight: 800;
  color: #ffffff; border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.chat-section-lbl {
  padding: 14px 16px 4px; font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .08em;
}
.chat-room-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px; margin: 1px 6px;
  border-radius: 8px; cursor: pointer; color: rgba(255,255,255,.6);
  font-size: 13px; font-weight: 500; transition: all .12s;
  position: relative;
}
.chat-room-btn:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); }
.chat-room-btn.active { background: rgba(37,99,235,.28); color: #fff; }
.chat-room-btn .unread-pill {
  margin-left: auto; background: var(--red); color: white;
  font-size: 10px; font-weight: 700; border-radius: 9px;
  padding: 1px 6px; min-width: 18px; text-align: center;
}
.online-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.online-dot.on  { background: #00b386; }
.online-dot.off { background: rgba(255,255,255,.25); }
.chat-online-count {
  padding: 10px 16px; margin-top: auto;
  font-size: 11px; color: rgba(255,255,255,.3);
  border-top: 1px solid rgba(255,255,255,.06); flex-shrink: 0;
}

/* Main chat area */
.chat-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--card2); }
.chat-main-hdr {
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; background: var(--card);
}
.chat-main-hdr-title { font-size: 14px; font-weight: 700; color: var(--text); }
.chat-main-hdr-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.chat-online-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chat-online-chip {
  display: flex; align-items: center; gap: 5px;
  background: rgba(0,179,134,.08); border: 1px solid rgba(0,179,134,.2);
  border-radius: 20px; padding: 3px 9px 3px 5px;
  font-size: 11.5px; font-weight: 600; color: #007a5e;
}

/* Messages */
.chat-msgs { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; }
.chat-msg-group { display: flex; gap: 10px; margin-bottom: 14px; }
.chat-av {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: white; margin-top: 1px;
}
.chat-msg-meta { display: flex; align-items: baseline; gap: 7px; margin-bottom: 3px; }
.chat-msg-name { font-size: 13px; font-weight: 700; color: var(--text); }
.chat-msg-role { font-size: 10.5px; color: var(--muted); }
.chat-msg-time { font-size: 10.5px; color: var(--muted); }
.chat-msg-text { font-size: 13.5px; color: var(--sub); line-height: 1.55; white-space: pre-wrap; word-break: break-word; margin-bottom: 2px; }
.chat-msg-group.mine .chat-msg-name { color: var(--accent); }
.chat-day-divider {
  text-align: center; color: var(--muted); font-size: 11.5px; font-weight: 600;
  margin: 10px 0 14px; display: flex; align-items: center; gap: 10px;
}
.chat-day-divider::before, .chat-day-divider::after { content:''; flex:1; height:1px; background: var(--border); }

/* Input area */
.chat-input-area { padding: 12px 20px 16px; border-top: 1px solid var(--border); flex-shrink: 0; background: var(--card); }
.chat-input-wrap {
  display: flex; align-items: flex-end; gap: 10px;
  background: var(--card2); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 8px 10px 8px 14px;
  transition: border-color .2s;
}
.chat-input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-hover); }
.chat-textarea {
  flex: 1; border: none; background: none; font-family: inherit;
  font-size: 13.5px; line-height: 1.5; resize: none; outline: none;
  min-height: 22px; max-height: 120px; color: var(--text);
  overflow-y: auto;
}
.chat-textarea::placeholder { color: var(--muted); }
.chat-send-btn {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--accent);
  border: none; color: white; font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .15s;
}
.chat-send-btn:hover { background: #8855ee; transform: scale(1.08); }
.chat-send-btn:disabled { background: var(--border2); cursor: default; transform: none; }

/* ── INVENTORY ──────────────────────────────────────────── */
.inv-cat-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 500; color: var(--sub);
  cursor: pointer; transition: background .1s; border-radius: 0;
  border-left: 3px solid transparent;
}
.inv-cat-btn:hover { background: var(--card2); color: var(--text); }
.inv-cat-btn.active { background: var(--accent-hover); color: var(--accent); border-left-color: var(--accent); font-weight: 700; }
.inv-cat-count {
  margin-left: auto; min-width: 20px; height: 18px;
  background: var(--card2); color: var(--muted);
  font-size: 10px; font-weight: 700; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
}
.inv-cat-btn.active .inv-cat-count { background: var(--accent); color: white; }

.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.inv-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; transition: box-shadow .2s, transform .15s, border-color .2s;
  position: relative;
}
.inv-card:hover { box-shadow: var(--shadow); border-color: rgba(37,99,235,.22); transform: translateY(-2px); }

.inv-photo-zone {
  height: 160px; background: var(--card2); display: flex; align-items: center;
  justify-content: center; font-size: 52px; border-radius: 8px;
  border: 2px dashed var(--border); cursor: pointer; transition: border-color .15s;
  position: relative; overflow: hidden;
}
.inv-photo-zone:hover { border-color: var(--accent); }
.inv-photo-zone img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.inv-photo-overlay {
  position: absolute; inset: 0; background: rgba(10,37,64,.5); display: none;
  align-items: center; justify-content: center; color: white;
  font-size: 13px; font-weight: 700; border-radius: 6px;
}
.inv-photo-zone:hover .inv-photo-overlay { display: flex; }

/* ── RTL / ARABIC SUPPORT ───────────────────────────────── */
html[dir="rtl"] body { letter-spacing: 0; }
html[dir="rtl"] #app { flex-direction: row-reverse; }
html[dir="rtl"] .sb-logo { flex-direction: row-reverse; }
html[dir="rtl"] .sb-role-badge { flex-direction: row-reverse; }
html[dir="rtl"] .sb-role-label { padding-left: 0; padding-right: 4px; }
html[dir="rtl"] nav .nav-section-label { padding: 12px 24px 4px; text-align: right; }
html[dir="rtl"] .nav-item { flex-direction: row-reverse; padding: 8px 24px 8px 12px; }
html[dir="rtl"] .nav-item .nav-badge { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .sb-user { flex-direction: row-reverse; }
html[dir="rtl"] #header { flex-direction: row-reverse; }
html[dir="rtl"] .breadcrumb { direction: ltr; }
html[dir="rtl"] .notif-dropdown { left: 0; right: auto; }
html[dir="rtl"] .section-header { flex-direction: row-reverse; }
html[dir="rtl"] .section-header h3 { text-align: right; }
html[dir="rtl"] .field-label { text-align: right; display: block; }
html[dir="rtl"] .customer-strip { flex-direction: row-reverse; }
html[dir="rtl"] .cs-item { text-align: right; }
html[dir="rtl"] .flex { flex-direction: row-reverse; }
html[dir="rtl"] .info-row { flex-direction: row-reverse; }
html[dir="rtl"] .ir-label, html[dir="rtl"] .ir-value { text-align: right; }
html[dir="rtl"] .data-table th, html[dir="rtl"] .data-table td { text-align: right; }
html[dir="rtl"] .page-title h1, html[dir="rtl"] .page-title p { text-align: right; }
html[dir="rtl"] .comment-input-row { flex-direction: row-reverse; }
html[dir="rtl"] .alert { flex-direction: row-reverse; }
html[dir="rtl"] .sent-success { flex-direction: row-reverse; }
html[dir="rtl"] .grid-2, html[dir="rtl"] .grid-3 { direction: rtl; }
html[dir="rtl"] .form-group { text-align: right; }
html[dir="rtl"] .field-input, html[dir="rtl"] .field-select, html[dir="rtl"] .field-textarea { text-align: right; direction: rtl; }
html[dir="rtl"] .input-group { flex-direction: row-reverse; }
html[dir="rtl"] #toast-container { left: 24px; right: auto; }
html[dir="rtl"] .toast { flex-direction: row-reverse; }
html[dir="rtl"] .chat-bubble { left: 28px; right: auto; }
html[dir="rtl"] .chat-popup  { left: 28px; right: auto; }

/* ── LANGUAGE TOGGLE ────────────────────────────────────── */
.lang-toggle {
  background: var(--card2); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px; padding: 5px 12px; font-size: 12px;
  font-weight: 700; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 5px; transition: all .2s cubic-bezier(0.45,0.05,0.55,0.95);
  flex-shrink: 0; white-space: nowrap;
}
.lang-toggle:hover { background: var(--accent-hover); border-color: rgba(37,99,235,.3); color: var(--accent); }

/* ── ERP MODULE BADGES — uses design tokens ─────────────── */
.badge-lead-new       { background:var(--s-blue-bg);   color:var(--s-blue-tx);   border:1px solid var(--s-blue-bd); }
.badge-lead-contacted { background:var(--s-cyan-bg);   color:var(--s-cyan-tx);   border:1px solid var(--s-cyan-bd); }
.badge-lead-qualified { background:var(--s-amber-bg);  color:var(--s-amber-tx);  border:1px solid var(--s-amber-bd); }
.badge-lead-proposal  { background:var(--s-violet-bg); color:var(--s-violet-tx); border:1px solid var(--s-violet-bd); }
.badge-lead-won       { background:var(--s-green-bg);  color:var(--s-green-tx);  border:1px solid var(--s-green-bd); font-weight:700; }
.badge-lead-lost      { background:var(--s-red-bg);    color:var(--s-red-tx);    border:1px solid var(--s-red-bd); }
.badge-priority-low    { background:var(--s-neutral-bg); color:var(--s-neutral-tx); border:1px solid var(--s-neutral-bd); }
.badge-priority-medium { background:var(--s-amber-bg);  color:var(--s-amber-tx);   border:1px solid var(--s-amber-bd); }
.badge-priority-high   { background:var(--s-red-bg);    color:var(--s-red-tx);     border:1px solid var(--s-red-bd); }
.badge-source { background:var(--s-neutral-bg); color:var(--s-neutral-tx); border:1px solid var(--s-neutral-bd); }
.badge-proj-active    { background:var(--s-green-bg);   color:var(--s-green-tx);   border:1px solid var(--s-green-bd); }
.badge-proj-on_hold   { background:var(--s-amber-bg);   color:var(--s-amber-tx);   border:1px solid var(--s-amber-bd); }
.badge-proj-completed { background:var(--s-blue-bg);    color:var(--s-blue-tx);    border:1px solid var(--s-blue-bd); }
.badge-proj-cancelled { background:var(--s-neutral-bg); color:var(--s-neutral-tx); border:1px solid var(--s-neutral-bd); }
.badge-task-todo        { background:var(--s-neutral-bg); color:var(--s-neutral-tx); border:1px solid var(--s-neutral-bd); }
.badge-task-in_progress { background:var(--s-blue-bg);    color:var(--s-blue-tx);    border:1px solid var(--s-blue-bd); }
.badge-task-review      { background:var(--s-amber-bg);   color:var(--s-amber-tx);   border:1px solid var(--s-amber-bd); }
.badge-task-done        { background:var(--s-green-bg);   color:var(--s-green-tx);   border:1px solid var(--s-green-bd); }
.badge-inv-draft   { background:var(--s-neutral-bg); color:var(--s-neutral-tx); border:1px solid var(--s-neutral-bd); }
.badge-inv-sent    { background:var(--s-cyan-bg);    color:var(--s-cyan-tx);    border:1px solid var(--s-cyan-bd); }
.badge-inv-partial { background:var(--s-amber-bg);   color:var(--s-amber-tx);   border:1px solid var(--s-amber-bd); }
.badge-inv-paid    { background:var(--s-green-bg);   color:var(--s-green-tx);   border:1px solid var(--s-green-bd); }
.badge-inv-overdue { background:var(--s-red-bg);     color:var(--s-red-tx);     border:1px solid var(--s-red-bd); }

/* ── KANBAN BOARD ───────────────────────────────────────── */
.kanban-board       { display:flex; gap:14px; overflow-x:auto; padding-bottom:12px; }
.kanban-col         { flex:0 0 260px; background: var(--card2); border-radius:var(--radius); border:1px solid var(--border); display:flex; flex-direction:column; max-height:calc(100vh - 260px); }
.kanban-col-header  { padding:12px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; position:sticky; top:0; background: rgba(247,249,252,.95); border-radius:var(--radius) var(--radius) 0 0; z-index:1; }
.kanban-col-title   { font-size:13px; font-weight:700; color: var(--text); flex:1; }
.kanban-col-count   { background:var(--accent-hover); color:var(--accent); font-size:11px; font-weight:700; padding:1px 7px; border-radius:9999px; }
.kanban-col-body    { padding:10px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:8px; }
.kanban-card        { background: var(--card); border-radius:var(--radius); border:1px solid var(--border); padding:11px 12px; cursor:pointer; transition:box-shadow .2s, border-color .2s, transform .15s; }
.kanban-card:hover  { box-shadow: var(--shadow); border-color:rgba(37,99,235,.2); transform: translateY(-1px); }
.kanban-card-title  { font-size:13px; font-weight:600; color: var(--text); margin-bottom:5px; }
.kanban-card-meta   { font-size:11.5px; color: var(--sub); display:flex; flex-direction:column; gap:3px; }

/* ── TABLE LIST PAGE ────────────────────────────────────── */
.list-toolbar       { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border); }
.list-toolbar-title { font-size:15px; font-weight:800; color: var(--text); font-family:'SourceCodePro',monospace; }
.list-tabs          { display:flex; gap:0; border-bottom:1px solid var(--border); padding:0 18px; background:transparent; }
.list-tab           { padding:10px 16px; font-size:13px; font-weight:600; color: var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .2s cubic-bezier(0.45,0.05,0.55,0.95); white-space:nowrap; }
.list-tab.active    { color: var(--accent); border-bottom-color: var(--accent); }
.list-tab:hover:not(.active) { color: var(--sub); }
.list-tab-count     { background: var(--card2); color: var(--muted); font-size:10px; font-weight:700; padding:1px 6px; border-radius:9999px; margin-left:5px; display:inline-block; }
.list-tab.active .list-tab-count { background:var(--accent-hover); color:var(--accent); }

/* Lead card hover */
.lead-row:hover     { background: var(--card2) !important; }

/* ── THEME TOGGLE BUTTON ────────────────────────────────── */
.theme-toggle {
  background: var(--card2); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px; padding: 5px 12px; font-size: 12px;
  font-weight: 700; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 5px; transition: all .2s;
  flex-shrink: 0; white-space: nowrap;
}
.theme-toggle:hover { background: var(--accent-hover); border-color: rgba(37,99,235,.3); color: var(--accent); }

/* ── DARK MODE ──────────────────────────────────────────── */
[data-theme="dark"] {
  /* ── Surfaces ── */
  --bg:      #0b1523;   /* deep navy page bg */
  --card:    #122035;   /* card surface */
  --card2:   #182b42;   /* table headers, elevated cells */
  --border:  rgba(255,255,255,.09);
  --border2: rgba(255,255,255,.06);

  /* ── Text ── */
  --text:    #dde8f4;   /* primary — WCAG AAA on dark bg */
  --sub:     #7299b8;   /* secondary */
  --muted:   #3d6080;   /* tertiary */
  --nav:     #5580a0;

  /* ── Primary Action ── */
  --accent:       #4f8ef7;   /* readable blue on dark bg */
  --accent-dark:  #3b78e8;
  --accent-hover: rgba(79,142,247,0.12);
  --accent-glow:  rgba(79,142,247,0.24);

  /* ── Semantic Status ── */
  --green:  #22c55e;
  --amber:  #f59e0b;
  --red:    #f87171;
  --blue:   #4f8ef7;
  --cyan:   #22d3ee;

  /* ── Status Badge Tokens — dark (lighter, luminous for readability) ── */
  --s-neutral-bg:  rgba(255,255,255,.06);  --s-neutral-tx:  #94a3b8; --s-neutral-bd:  rgba(255,255,255,.10);
  --s-blue-bg:     rgba(79,142,247,.14);   --s-blue-tx:     #93c5fd; --s-blue-bd:     rgba(79,142,247,.28);
  --s-violet-bg:   rgba(167,139,250,.13);  --s-violet-tx:   #c4b5fd; --s-violet-bd:   rgba(167,139,250,.26);
  --s-cyan-bg:     rgba(34,211,238,.11);   --s-cyan-tx:     #67e8f9; --s-cyan-bd:     rgba(34,211,238,.24);
  --s-teal-bg:     rgba(45,212,191,.11);   --s-teal-tx:     #5eead4; --s-teal-bd:     rgba(45,212,191,.24);
  --s-amber-bg:    rgba(251,191,36,.12);   --s-amber-tx:    #fcd34d; --s-amber-bd:    rgba(251,191,36,.26);
  --s-orange-bg:   rgba(251,146,60,.12);   --s-orange-tx:   #fdba74; --s-orange-bd:   rgba(251,146,60,.26);
  --s-green-bg:    rgba(74,222,128,.12);   --s-green-tx:    #86efac; --s-green-bd:    rgba(74,222,128,.26);
  --s-red-bg:      rgba(248,113,113,.12);  --s-red-tx:      #fca5a5; --s-red-bd:      rgba(248,113,113,.26);

  /* ── Alert Tokens — dark ── */
  --alert-info-bg:    rgba(79,142,247,.12);  --alert-info-bd:    rgba(79,142,247,.30);  --alert-info-tx:    #93c5fd;
  --alert-warn-bg:    rgba(245,158,11,.12);  --alert-warn-bd:    rgba(245,158,11,.30);  --alert-warn-tx:    #fcd34d;
  --alert-success-bg: rgba(74,222,128,.11);  --alert-success-bd: rgba(74,222,128,.28);  --alert-success-tx: #86efac;
  --alert-danger-bg:  rgba(248,113,113,.11); --alert-danger-bd:  rgba(248,113,113,.28); --alert-danger-tx:  #fca5a5;
}
[data-theme="dark"] body { background: var(--bg); }
[data-theme="dark"] #header { background: #0b1930; border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] #page-content { background: var(--bg); }
[data-theme="dark"] #stepper { background: #0b1930; border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .hdr-btn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); color: var(--sub); }
[data-theme="dark"] .hdr-btn:hover { background: var(--accent-hover); }
[data-theme="dark"] .hdr-notif-dot { border-color: #0b1930; }
[data-theme="dark"] .hdr-user { border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.04); }
[data-theme="dark"] .hdr-user-name { color: var(--text); }
[data-theme="dark"] .req-badge { background: var(--accent-hover); border-color: rgba(79,142,247,.28); color: var(--accent); }
[data-theme="dark"] .modal-box { background: #162030; border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .modal-header { border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .modal-header h3 { color: var(--text); }
[data-theme="dark"] .modal-footer { background: rgba(0,0,0,.2); border-top-color: rgba(255,255,255,.07); }
[data-theme="dark"] .toast { background: #162030; border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .toast-title { color: var(--text); }
[data-theme="dark"] .field-input, [data-theme="dark"] .field-select, [data-theme="dark"] .field-textarea {
  background: rgba(255,255,255,.05); color: var(--text); border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .field-input:focus, [data-theme="dark"] .field-select:focus, [data-theme="dark"] .field-textarea:focus {
  background: rgba(255,255,255,.08); border-color: var(--accent);
}
[data-theme="dark"] .field-input::placeholder, [data-theme="dark"] .field-textarea::placeholder { color: var(--muted); }
[data-theme="dark"] .field-input[readonly] { background: rgba(255,255,255,.03); color: var(--sub); }
[data-theme="dark"] .field-select option { background: #162030; color: var(--text); }
[data-theme="dark"] select.field-input option, [data-theme="dark"] select option { background: #162030; color: var(--text); }
[data-theme="dark"] .input-group { border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .input-group input { background: rgba(255,255,255,.05); color: var(--text); }
[data-theme="dark"] .input-prefix { background: rgba(255,255,255,.06); border-right-color: rgba(255,255,255,.1); }
[data-theme="dark"] .toggle-opt { background: rgba(255,255,255,.05); color: var(--sub); }
[data-theme="dark"] .btn-outline { color: var(--sub); border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .btn-outline:hover { background: var(--accent-hover); border-color: rgba(79,142,247,.45); color: var(--accent); }
[data-theme="dark"] .data-table th { background: rgba(255,255,255,.04); color: var(--sub); border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .data-table td { color: var(--text); border-bottom-color: rgba(255,255,255,.05); }
[data-theme="dark"] .data-table tr:hover td { background: rgba(255,255,255,.03); }
[data-theme="dark"] .notif-dropdown { background: #162030; border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .notif-hdr span, [data-theme="dark"] .notif-title { color: var(--text); }
[data-theme="dark"] .notif-item:hover { background: rgba(255,255,255,.04); }
[data-theme="dark"] .notif-item.unread { background: rgba(79,142,247,.07); }
[data-theme="dark"] .notif-count { border-color: #091520; }
[data-theme="dark"] .c-text { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); color: var(--sub); }
[data-theme="dark"] .c-name { color: var(--text); }
[data-theme="dark"] .tl-name { color: var(--text); }
[data-theme="dark"] .tl-action { color: var(--sub); }
[data-theme="dark"] .upload-zone { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .upload-zone:hover { background: var(--accent-hover); }
[data-theme="dark"] .upload-zone .uz-title { color: var(--text); }
[data-theme="dark"] .file-item { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .file-name { color: var(--text); }
[data-theme="dark"] .customer-strip { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .customer-strip .cs-value { color: var(--text); }
[data-theme="dark"] .section-header { border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .section-header h3 { color: var(--text); }
[data-theme="dark"] .info-row { border-bottom-color: rgba(255,255,255,.05); }
[data-theme="dark"] .kanban-col { background: rgba(255,255,255,.03); }
[data-theme="dark"] .kanban-col-header { background: rgba(22,32,48,.95); }
[data-theme="dark"] .kanban-col-title, [data-theme="dark"] .kanban-card-title, [data-theme="dark"] .list-toolbar-title { color: var(--text); }
[data-theme="dark"] .kanban-card { background: var(--card); }
[data-theme="dark"] .list-toolbar { border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .list-tabs { border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .list-tab { color: var(--muted); }
[data-theme="dark"] .list-tab-count { background: rgba(255,255,255,.05); color: var(--muted); }
[data-theme="dark"] .login-page { background: radial-gradient(ellipse at 20% 50%, rgba(37,99,235,.12) 0%, transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(8,145,178,.07) 0%, transparent 50%), linear-gradient(135deg, #060f1e 0%, #0b1523 60%, #061020 100%); }
[data-theme="dark"] .login-box { background: rgba(18,32,53,.97); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .login-logo-name, [data-theme="dark"] .login-title, [data-theme="dark"] .page-title h1 { color: var(--text); }
[data-theme="dark"] .quot-body { background: #162030; }
[data-theme="dark"] .chat-main { background: #0d1927; }
[data-theme="dark"] .chat-main-hdr { background: #0d1927; border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .chat-main-hdr-title { color: var(--text); }
[data-theme="dark"] .chat-input-area { background: #0d1927; border-top-color: rgba(255,255,255,.07); }
[data-theme="dark"] .chat-input-wrap { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .chat-textarea { color: var(--text); }
[data-theme="dark"] .chat-msg-name { color: var(--text); }
[data-theme="dark"] .chat-msg-text { color: var(--sub); }
[data-theme="dark"] #user-modal > div, [data-theme="dark"] #import-modal > div { background: var(--card) !important; color: var(--text); }
[data-theme="dark"] #user-modal div[style*="color:#0F172A"], [data-theme="dark"] #user-modal div[style*="color:#374151"] { color: var(--text) !important; }
[data-theme="dark"] #import-modal div[style*="background:#F8FAFC"], [data-theme="dark"] #import-modal div[style*="background:#fff"], [data-theme="dark"] #import-modal div[style*="background:#FAFBFC"] { background: var(--card2) !important; }
[data-theme="dark"] .badge-source, [data-theme="dark"] .badge-proj-cancelled, [data-theme="dark"] .badge-task-todo, [data-theme="dark"] .badge-inv-draft { background: var(--s-neutral-bg); color: var(--s-neutral-tx); border-color: var(--s-neutral-bd); }
[data-theme="dark"] .inv-cat-btn { color: var(--sub); }
[data-theme="dark"] .inv-cat-btn:hover { background: rgba(255,255,255,.05); color: var(--text); }
[data-theme="dark"] .inv-photo-zone { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .pipeline-bar { background: rgba(255,255,255,.07); }
[data-theme="dark"] .lang-toggle, [data-theme="dark"] .theme-toggle { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: var(--text); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }
[data-theme="dark"] .lead-row:hover { background: rgba(255,255,255,.03) !important; }

/* ── EXTRA DEPT CHIPS ───────────────────────────────────── */
.extra-dept-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; background: var(--card2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  font-size: 12.5px; font-weight: 600;
  color: var(--text); transition: all .2s; user-select: none;
}
.extra-dept-chip:hover { border-color: rgba(37,99,235,.3); background: var(--accent-hover); color: var(--accent); }
.extra-dept-chip.selected { border-color: var(--accent); background: var(--accent-hover); color: var(--accent); font-weight: 700; }
.extra-dept-chip input[type="checkbox"] { display: none; }
[data-theme="dark"] .extra-dept-chip { color: var(--sub); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.11); }
[data-theme="dark"] .extra-dept-chip:hover { background: var(--accent-hover); border-color: rgba(79,142,247,.4); color: var(--accent); }
[data-theme="dark"] .extra-dept-chip.selected { background: var(--accent-hover); border-color: var(--accent); color: var(--accent); }

/* Module Access Cards */
.module-access-card {
  display: block;
  padding: 13px 15px;
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  background: var(--card);
  transition: all .18s;
  user-select: none;
  margin-bottom: 8px;
}
.module-access-card:hover { border-color: var(--mac-color, #3B82F6); background: var(--mac-bg, rgba(59,130,246,.06)); }
.module-access-card.mac-active { border-color: var(--mac-color, #3B82F6); background: var(--mac-bg, rgba(59,130,246,.06)); }
.module-access-card input[type="checkbox"] { pointer-events: none; }
[data-theme="dark"] .module-access-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .module-access-card.mac-active { border-color: var(--mac-color, #3B82F6); background: rgba(0,0,0,.2); }

/* ── REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════ */

/* ── TABLET (≤1024px) ───────────────────────────────────── */
@media (max-width: 1024px) {
  #sidebar { width: 200px; }
  .page-inner { padding: 16px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .field-row.three { grid-template-columns: 1fr 1fr; }
  .kanban-board { gap: 10px; }
  .kanban-col { flex: 0 0 220px; }
}

/* ── MOBILE (≤768px) ────────────────────────────────────── */
@media (max-width: 768px) {
  /* Sidebar becomes a slide-in overlay */
  #sidebar {
    position: fixed; inset: 0 auto 0 0;
    width: 260px; z-index: 8000;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
    box-shadow: var(--shadow-lg);
  }
  #sidebar.open { transform: translateX(0); }

  /* Mobile overlay backdrop */
  #sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.45); z-index: 7999;
  }
  #sidebar.open ~ #sidebar-overlay,
  #sidebar-overlay.show { display: block; }

  /* Main fills full width */
  #main { width: 100%; }

  /* Header: show hamburger */
  #menu-toggle { display: flex !important; }

  /* Page inner */
  .page-inner { padding: 12px; }

  /* Grids collapse to single column */
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .field-row, .field-row.three { grid-template-columns: 1fr; }

  /* Tables get horizontal scroll */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 600px; }

  /* Cards go full-width */
  .kpi-card { padding: 14px; }
  .kpi-card .kpi-val { font-size: 22px !important; }

  /* Stepper hides most steps, only active visible */
  #stepper { padding: 8px 12px; }
  .step-label { font-size: 8.5px; max-width: 54px; }
  .step-line { width: 10px; }

  /* Modals go full-screen on mobile */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-box {
    border-radius: 16px 16px 0 0;
    max-height: 92vh; width: 100%;
  }

  /* Leads detail panel goes full screen */
  .detail-panel {
    width: 100% !important;
    left: 0 !important; right: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    top: auto !important; bottom: 0 !important;
    height: 90vh !important; max-height: 90vh !important;
  }

  /* Chat layout */
  .chat-left { width: 100%; position: absolute; z-index: 10; }
  .chat-layout { position: relative; }

  /* Buttons: full-width on mobile forms */
  .btn-mobile-full { width: 100%; justify-content: center; }

  /* Customer/lead stat strips */
  .customer-strip { gap: 12px; }

  /* List toolbar wraps */
  .list-toolbar { flex-wrap: wrap; gap: 8px; }
  .list-tabs { overflow-x: auto; padding-bottom: 0; }

  /* Hide less critical header elements */
  .hdr-lang, .hdr-theme { display: none; }
}

/* ── SMALL MOBILE (≤480px) ──────────────────────────────── */
@media (max-width: 480px) {
  #header { padding: 0 12px; gap: 8px; }
  .page-inner { padding: 8px; }
  .btn { padding: 8px 14px; font-size: 13px; }
  .btn-sm { padding: 5px 10px; font-size: 12px; }
  .modal-header { padding: 14px 16px; }
  .modal-body { padding: 14px 16px; }
  .modal-footer { padding: 12px 16px; }
  .page-title h1 { font-size: 17px !important; }
  .page-title p { font-size: 12px; }
  .data-table th, .data-table td { padding: 8px 10px; font-size: 12.5px; }
  .customer-strip { flex-direction: column; gap: 8px; }
  .kanban-board { gap: 8px; }
  .kanban-col { flex: 0 0 240px; }
}

/* ── PRINT STYLES ───────────────────────────────────────── */
@media print {
  #sidebar, #header, #stepper, .chat-bubble, #toast-container,
  .btn:not(.btn-print), .hdr-btn, .nav-item, #ai-chat-btn { display: none !important; }
  #main { width: 100%; overflow: visible; }
  #page-content { overflow: visible; height: auto; }
  .page-inner { padding: 0; max-width: 100%; }
  .card { box-shadow: none; border: 1px solid #ddd; page-break-inside: avoid; }
  body { font-size: 12px; color: #000; }
}

/* ═══════════════════════════════════════════════════════════
   HAMBURGER / MOBILE MENU TOGGLE
   ═══════════════════════════════════════════════════════════ */
#menu-toggle {
  display: none; width: 36px; height: 36px;
  border-radius: 8px; background: var(--card2);
  border: 1px solid var(--border);
  align-items: center; justify-content: center;
  cursor: pointer; flex-direction: column; gap: 4px;
  padding: 8px; flex-shrink: 0;
}
#menu-toggle span {
  display: block; width: 18px; height: 2px;
  background: var(--sub); border-radius: 2px;
  transition: all 0.2s;
}

/* ═══════════════════════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════════════════════ */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 60px 24px;
  text-align: center; gap: 12px;
}
.empty-state-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--card2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; margin-bottom: 4px;
}
.empty-state-title {
  font-size: 15px; font-weight: 700; color: var(--text); margin: 0;
}
.empty-state-sub {
  font-size: 13px; color: var(--muted); max-width: 320px; line-height: 1.5; margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   SKELETON LOADING
   ═══════════════════════════════════════════════════════════ */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--border2) 25%, var(--card2) 50%, var(--border2) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 6px;
}
.skeleton-text  { height: 14px; margin-bottom: 8px; }
.skeleton-title { height: 20px; margin-bottom: 12px; width: 60%; }
.skeleton-card  { height: 80px; border-radius: var(--radius); }
.skeleton-row   { height: 44px; margin-bottom: 2px; border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════
   FOCUS / ACCESSIBILITY
   ═══════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Remove outline when using mouse */
:focus:not(:focus-visible) { outline: none; }

/* ═══════════════════════════════════════════════════════════
   IMPROVED PAGE HEADER
   ═══════════════════════════════════════════════════════════ */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 12px; padding-top: 4px;
}
.page-header-left { display: flex; flex-direction: column; gap: 2px; }
.page-header-title {
  font-size: 20px; font-weight: 800; color: var(--text);
  letter-spacing: -0.4px;
}
.page-header-sub { font-size: 13px; color: var(--sub); }
.page-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════
   STAT / KPI CARDS — IMPROVED
   ═══════════════════════════════════════════════════════════ */
.stat-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.stat-card-label {
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}
.stat-card-value {
  font-size: 28px; font-weight: 800; color: var(--text);
  letter-spacing: -0.5px; line-height: 1;
}
.stat-card-sub {
  font-size: 12px; color: var(--sub); margin-top: 6px;
}
.stat-card-icon {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.stat-card.green  { border-left: 3px solid #00b386; }
.stat-card.blue   { border-left: 3px solid var(--blue); }
.stat-card.purple { border-left: 3px solid var(--accent); }
.stat-card.amber  { border-left: 3px solid var(--amber); }
.stat-card.red    { border-left: 3px solid var(--red); }

/* ═══════════════════════════════════════════════════════════
   IMPROVED ALERT/BANNER SYSTEM
   ═══════════════════════════════════════════════════════════ */
/* Alert duplicates removed — canonical alert classes are defined above using CSS tokens */
.alert-error { background: var(--alert-danger-bg); border: 1px solid var(--alert-danger-bd); color: var(--alert-danger-tx); }

/* ═══════════════════════════════════════════════════════════
   IMPROVED TABLE — DARK MODE & HOVER
   ═══════════════════════════════════════════════════════════ */
.data-table th { position: sticky; top: 0; z-index: 1; }
.data-table tbody tr { transition: background 0.1s; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 0 0 var(--radius) var(--radius); }

/* ═══════════════════════════════════════════════════════════
   DARK MODE — INLINE STYLE OVERRIDES FOR PAGE COMPONENTS
   These catch hardcoded colors used in JS template literals
   ═══════════════════════════════════════════════════════════ */

/* Common white backgrounds in JS-rendered components */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"] {
  background: var(--card) !important;
}
[data-theme="dark"] [style*="background:#F8FAFC"],
[data-theme="dark"] [style*="background:#F7F9FC"],
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background:#f7f9fc"] {
  background: var(--card2) !important;
}
[data-theme="dark"] [style*="background:#EFF6FF"],
[data-theme="dark"] [style*="background:#F0F4FF"],
[data-theme="dark"] [style*="background:#DBEAFE"] {
  background: rgba(37,99,235,.10) !important;
}
/* Common text colors */
[data-theme="dark"] [style*="color:#0F172A"],
[data-theme="dark"] [style*="color:#1E293B"],
[data-theme="dark"] [style*="color:#111827"],
[data-theme="dark"] [style*="color:#061b31"] {
  color: var(--text) !important;
}
[data-theme="dark"] [style*="color:#374151"],
[data-theme="dark"] [style*="color:#475569"],
[data-theme="dark"] [style*="color:#4B5563"] {
  color: var(--sub) !important;
}
[data-theme="dark"] [style*="color:#64748B"],
[data-theme="dark"] [style*="color:#6B7280"],
[data-theme="dark"] [style*="color:#94A3B8"],
[data-theme="dark"] [style*="color:#9CA3AF"] {
  color: var(--muted) !important;
}
/* Common border colors */
[data-theme="dark"] [style*="border:1px solid #E5E7EB"],
[data-theme="dark"] [style*="border:1px solid #E2E8F0"],
[data-theme="dark"] [style*="border:1px solid #D1D5DB"],
[data-theme="dark"] [style*="border-color:#E5E7EB"],
[data-theme="dark"] [style*="border-color:#E2E8F0"] {
  border-color: var(--border) !important;
}

/* ═══════════════════════════════════════════════════════════
   PAGE-LEVEL CSS DARK MODE FIXES
   For common patterns in page <style> blocks
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] .stat-mini,
[data-theme="dark"] .stat-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-theme="dark"] .stat-card-value,
[data-theme="dark"] .stat-card-label { color: inherit !important; }

/* Leads/Customers detail panel dark mode */
[data-theme="dark"] .detail-panel {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .detail-panel-header {
  background: var(--card) !important;
  border-bottom-color: var(--border) !important;
}

/* ═══════════════════════════════════════════════════════════
   IMPROVED .page-inner CENTERING
   ═══════════════════════════════════════════════════════════ */
.page-inner {
  padding: 24px;
  max-width: 1500px;
  /* No margin: auto here — full width to sidebar already constrains it */
}

/* ═══════════════════════════════════════════════════════════
   DIVIDER UTILITY
   ═══════════════════════════════════════════════════════════ */
.divider {
  height: 1px; background: var(--border);
  margin: 16px 0; border: none;
}
.divider-label {
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: 11.5px; font-weight: 600;
  margin: 16px 0;
}
.divider-label::before, .divider-label::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ═══════════════════════════════════════════════════════════
   PROGRESS BAR UTILITY
   ═══════════════════════════════════════════════════════════ */
.progress-bar {
  height: 6px; background: var(--border2);
  border-radius: 3px; overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 3px;
  transition: width 0.4s ease;
}
.progress-fill.green  { background: #00b386; }
.progress-fill.blue   { background: var(--blue); }
.progress-fill.purple { background: var(--accent); }
.progress-fill.amber  { background: var(--amber); }
.progress-fill.red    { background: var(--red); }

/* ═══════════════════════════════════════════════════════════
   TAB SYSTEM (for multi-tab pages)
   ═══════════════════════════════════════════════════════════ */
.tab-bar {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
  background: var(--card); border-radius: var(--radius) var(--radius) 0 0;
  padding: 0 4px; overflow-x: auto;
}
.tab-btn {
  padding: 10px 16px; font-size: 13px; font-weight: 600;
  color: var(--muted); background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.tab-btn:hover:not(.active) { color: var(--sub); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ═══════════════════════════════════════════════════════════
   INLINE STATUS DOT
   ═══════════════════════════════════════════════════════════ */
.status-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0;
}
.status-dot.green  { background: #00b386; }
.status-dot.amber  { background: var(--amber); }
.status-dot.red    { background: var(--red); }
.status-dot.blue   { background: var(--blue); }
.status-dot.purple { background: var(--accent); }
.status-dot.gray   { background: var(--muted); }

/* ═══════════════════════════════════════════════════════════
   CARD HOVER STATES
   ═══════════════════════════════════════════════════════════ */
.card-hover {
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}
.card-hover:hover {
  box-shadow: var(--shadow);
  border-color: rgba(37,99,235,.22);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════
   IMPROVED SIDEBAR USER SECTION
   ═══════════════════════════════════════════════════════════ */
.sb-user { cursor: pointer; transition: background 0.15s; border-radius: 8px; margin: 4px 8px; }
.sb-user:hover { background: var(--sidebar-hover); }

/* ═══════════════════════════════════════════════════════════
   NOTIFICATION DOT ON NAV ITEMS
   ═══════════════════════════════════════════════════════════ */
.nav-item .nav-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); margin-left: auto; flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   IMPROVED INLINE TABLE WITHIN CARDS
   ═══════════════════════════════════════════════════════════ */
.card > .data-table { margin: -16px; width: calc(100% + 32px); }
.card > .data-table th:first-child { border-radius: var(--radius) 0 0 0; }
.card > .data-table th:last-child  { border-radius: 0 var(--radius) 0 0; }

/* ═══════════════════════════════════════════════════════════
   ADDITIONAL MISSING DARK MODE PATCHES
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] .step-circle.skipped { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.35); }
[data-theme="dark"] .step-label.skipped { color: rgba(255,255,255,.3); }
[data-theme="dark"] .step-line.skipped { background: repeating-linear-gradient(90deg,rgba(255,255,255,.15) 0,rgba(255,255,255,.15) 4px,transparent 4px,transparent 8px); }
[data-theme="dark"] .cost-total { box-shadow: 0 4px 16px rgba(83,58,253,.25); }
[data-theme="dark"] .fin-final.unapproved { box-shadow: 0 4px 16px rgba(83,58,253,.2); }
[data-theme="dark"] .fin-final.approved   { box-shadow: 0 4px 16px rgba(0,179,134,.2); }
[data-theme="dark"] .login-hint { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .login-error { background: rgba(229,62,62,.1); border-color: rgba(229,62,62,.3); }
[data-theme="dark"] .sent-success { background: rgba(0,179,134,.1); border-color: rgba(0,179,134,.3); }
[data-theme="dark"] .sent-success .ss-title { color: #34d399; }
[data-theme="dark"] .sent-success .ss-sub   { color: #10b981; }
[data-theme="dark"] .empty-state-icon { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .empty-state-title { color: var(--text); }
[data-theme="dark"] .divider { background: var(--border); }
[data-theme="dark"] .divider-label { color: var(--muted); }
[data-theme="dark"] .progress-bar { background: rgba(255,255,255,.07); }
[data-theme="dark"] .tab-bar { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .tab-btn { color: var(--muted); }
[data-theme="dark"] .tab-btn.active { color: var(--accent); }
[data-theme="dark"] #menu-toggle { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] #menu-toggle span { background: var(--sub); }

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION (REPEAT AT END FOR SPECIFICITY)
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--border2); }
  .card-hover:hover { transform: none; }
  .kpi-card:hover   { transform: none; }
  .inv-card:hover   { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD-SPECIFIC LAYOUT CLASSES
   ═══════════════════════════════════════════════════════════ */
.section-group-label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 8px; padding-left: 2px;
}
.kpi-grid-7 { display: grid; grid-template-columns: repeat(7,1fr); gap: 10px; }
.kpi-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.kpi-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.dash-main-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; }
.dash-sidebar-col { display: flex; flex-direction: column; gap: 16px; }
.card-toolbar {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.card-toolbar-title { font-size: 14px; font-weight: 800; color: var(--text); }
.card-toolbar-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.count-chip {
  background: var(--card2); color: var(--sub);
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
  border: 1px solid var(--border);
}
.mb20 { margin-bottom: 20px; }

/* Dashboard responsive */
@media (max-width: 1280px) {
  .kpi-grid-7 { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 1024px) {
  .kpi-grid-7 { grid-template-columns: repeat(4,1fr); }
  .kpi-grid-4 { grid-template-columns: repeat(2,1fr); }
  .dash-main-grid { grid-template-columns: 1fr; }
  .dash-sidebar-col { flex-direction: row; flex-wrap: wrap; }
  .dash-sidebar-col > .card { flex: 1; min-width: 260px; }
}
@media (max-width: 768px) {
  .kpi-grid-7, .kpi-grid-4, .kpi-grid-3 { grid-template-columns: repeat(2,1fr); }
  .card-toolbar { gap: 8px; }
  .card-toolbar-actions { margin-left: 0; width: 100%; }
  .card-toolbar-actions input, .card-toolbar-actions select { width: 100% !important; }
}
@media (max-width: 480px) {
  .kpi-grid-7, .kpi-grid-4, .kpi-grid-3 { grid-template-columns: 1fr 1fr; }
}

/* ── DARK MODE: dashboard inline color fixes ─────────────── */
[data-theme="dark"] .card-toolbar { border-bottom-color: var(--border); }
[data-theme="dark"] .card-toolbar-title { color: var(--text); }
[data-theme="dark"] .count-chip { background: rgba(255,255,255,.05); color: var(--muted); border-color: var(--border); }
[data-theme="dark"] .section-group-label { color: var(--muted); }

/* ═══════════════════════════════════════════════════════════
   PROJECTS PAGE — dark mode patches
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] .proj-card { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .proj-name { color: var(--text); }
[data-theme="dark"] .proj-meta { color: var(--sub); }
[data-theme="dark"] .stat-box  { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .stat-box-val { color: var(--text); }
[data-theme="dark"] .stat-box-label { color: var(--sub); }
[data-theme="dark"] .task-row { border-bottom-color: var(--border); }
[data-theme="dark"] .dm-tab-bar { background: var(--card2); border-bottom-color: var(--border); }
[data-theme="dark"] .dm-tab    { color: var(--sub); }
[data-theme="dark"] .dm-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
[data-theme="dark"] .dm-tab:hover:not(.active) { color: var(--text); background: var(--accent-hover); }
[data-theme="dark"] .itm-kpi  { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .itm-kpi-val { color: var(--text); }
[data-theme="dark"] .itm-kpi-lbl { color: var(--muted); }
[data-theme="dark"] .itm-table th { background: rgba(255,255,255,.04); color: var(--sub); border-bottom-color: var(--border); }
[data-theme="dark"] .itm-table td { color: var(--text); border-bottom-color: rgba(255,255,255,.05); }
[data-theme="dark"] .itm-table tr:hover td { background: var(--accent-hover); }
[data-theme="dark"] .itm-btn   { background: var(--card); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .itm-btn:hover { background: var(--card2); }
[data-theme="dark"] .itm-flow-dot { border-color: var(--border); background: var(--card); color: var(--sub); }
[data-theme="dark"] .itm-flow-line { background: var(--border); }
[data-theme="dark"] .warn-banner { background: rgba(253,211,77,.06); border-color: rgba(253,211,77,.2); }

/* ═══════════════════════════════════════════════════════════
   HR PAGE — KPI icon color overrides for dark mode
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] .kpi-navy   { background: rgba(27,79,114,.25);  color: #93C5FD; }
[data-theme="dark"] .kpi-green  { background: rgba(22,101,52,.25);  color: #6EE7B7; }
[data-theme="dark"] .kpi-red    { background: rgba(159,18,57,.25);  color: #FCA5A5; }
[data-theme="dark"] .kpi-amber  { background: rgba(146,64,14,.25);  color: #FCD34D; }
[data-theme="dark"] .kpi-blue   { background: rgba(30,64,175,.25);  color: #93C5FD; }
[data-theme="dark"] .kpi-orange { background: rgba(154,52,18,.25);  color: #FDBA74; }
[data-theme="dark"] .kpi-purple { background: rgba(91,33,182,.25);  color: #C4B5FD; }
[data-theme="dark"] .kpi-teal   { background: rgba(19,78,74,.25);   color: #99F6E4; }
[data-theme="dark"] .device-badge.online  { background: rgba(0,179,134,.15); color: #6EE7B7; }
[data-theme="dark"] .device-badge.offline { background: rgba(229,62,62,.15); color: #FCA5A5; }
[data-theme="dark"] .device-card { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .device-name { color: var(--text); }
[data-theme="dark"] .rate-info h3 { color: var(--text); }
[data-theme="dark"] .rate-info p  { color: var(--muted); }
[data-theme="dark"] .rate-bar-bg  { background: rgba(255,255,255,.08); }

/* ═══════════════════════════════════════════════════════════
   ADDITIONAL INLINE STYLE DARK MODE OVERRIDES
   (covers production, finance, quotation, users, settings JS-rendered HTML)
   ═══════════════════════════════════════════════════════════ */

/* Background: light gray shades */
[data-theme="dark"] [style*="background:#F1F5F9"],
[data-theme="dark"] [style*="background:#FAFBFC"],
[data-theme="dark"] [style*="background:#F4F6F9"],
[data-theme="dark"] [style*="background:#F9FAFB"],
[data-theme="dark"] [style*="background:#F5F5F5"] {
  background: var(--card2) !important;
}

/* Background: very light blues used for info blocks */
[data-theme="dark"] [style*="background:#F0F9FF"],
[data-theme="dark"] [style*="background:#EDE9FE"],
[data-theme="dark"] [style*="background:#F0F4FF"] {
  background: rgba(255,255,255,.04) !important;
}

/* Background: amber/warning tints */
[data-theme="dark"] [style*="background:#FFFBEB"],
[data-theme="dark"] [style*="background:#FFF7ED"],
[data-theme="dark"] [style*="background:#FFEDD5"],
[data-theme="dark"] [style*="background:#FFF3CD"] {
  background: rgba(253,211,77,.06) !important;
}

/* Background: green tints */
[data-theme="dark"] [style*="background:#F0FDF4"],
[data-theme="dark"] [style*="background:#DCFCE7"],
[data-theme="dark"] [style*="background:#D1FAE5"],
[data-theme="dark"] [style*="background:#ECFDF5"] {
  background: rgba(0,179,134,.07) !important;
}

/* Background: red/pink tints */
[data-theme="dark"] [style*="background:#FFF1F2"],
[data-theme="dark"] [style*="background:#FEE2E2"],
[data-theme="dark"] [style*="background:#FFEBEE"] {
  background: rgba(229,62,62,.08) !important;
}

/* Background: purple tints */
[data-theme="dark"] [style*="background:#F5F3FF"],
[data-theme="dark"] [style*="background:#EDE9FE"],
[data-theme="dark"] [style*="background:#F3F4F6"] {
  background: rgba(37,99,235,.07) !important;
}

/* Borders: light */
[data-theme="dark"] [style*="border-color:#FED7AA"],
[data-theme="dark"] [style*="border:1.5px solid #FED7AA"],
[data-theme="dark"] [style*="border:2px solid #FED7AA"] {
  border-color: rgba(253,186,116,.2) !important;
}
[data-theme="dark"] [style*="border:2px solid #BFDBFE"],
[data-theme="dark"] [style*="border:1px solid #BFDBFE"] {
  border-color: rgba(147,197,253,.2) !important;
}
[data-theme="dark"] [style*="border:1px solid #FCD34D"],
[data-theme="dark"] [style*="border:1px solid #FDE68A"] {
  border-color: rgba(252,211,77,.2) !important;
}

/* Text: dark named colors (navy) */
[data-theme="dark"] [style*="color:#1B4F72"],
[data-theme="dark"] [style*="color:#1E40AF"],
[data-theme="dark"] [style*="color:#0369A1"],
[data-theme="dark"] [style*="color:#1D4ED8"] {
  color: var(--blue) !important;
}

/* Text: orange/amber tones — keep readable on dark */
[data-theme="dark"] [style*="color:#9a3412"],
[data-theme="dark"] [style*="color:#92400E"],
[data-theme="dark"] [style*="color:#78350F"],
[data-theme="dark"] [style*="color:#A16207"],
[data-theme="dark"] [style*="color:#B45309"] {
  color: #FCD34D !important;
}

/* Text: red tones */
[data-theme="dark"] [style*="color:#C0392B"],
[data-theme="dark"] [style*="color:#9F1239"],
[data-theme="dark"] [style*="color:#DC2626"] {
  color: var(--red) !important;
}

/* Text: green tones */
[data-theme="dark"] [style*="color:#1E8449"],
[data-theme="dark"] [style*="color:#166534"],
[data-theme="dark"] [style*="color:#065F46"],
[data-theme="dark"] [style*="color:#15803D"] {
  color: #34d399 !important;
}

/* Text: blue — bright/info labels */
[data-theme="dark"] [style*="color:#1E40AF"],
[data-theme="dark"] [style*="color:#2563EB"] {
  color: #93C5FD !important;
}

/* Inline row colors / backgrounds on tr */
[data-theme="dark"] tr[style*="background:#F0F9FF"],
[data-theme="dark"] tr[style*="background:#EFF6FF"] {
  background: rgba(0,115,230,.07) !important;
}

/* Cost input fields */
[data-theme="dark"] input[style*="border:none"],
[data-theme="dark"] input[style*="background:none"],
[data-theme="dark"] input[style*="outline:none"] {
  background: transparent !important;
  color: var(--text) !important;
}

/* Inline tables used in finance/production */
[data-theme="dark"] table[style*="width:100%"] tr[style*="border-bottom:1px solid #F1F5F9"] {
  border-bottom-color: var(--border) !important;
}
[data-theme="dark"] td[style*="color:#374151"] { color: var(--text) !important; }
[data-theme="dark"] td[style*="color:#1E8449"] { color: #34d399 !important; }

/* Sliders */
[data-theme="dark"] input[type="range"] { accent-color: var(--accent); }

/* Linear gradient banners: navy */
[data-theme="dark"] [style*="background:linear-gradient(135deg,#1B4F72"] {
  background: linear-gradient(135deg,#162030 0%,#1a3550 100%) !important;
}

/* Info-row values/labels on dark */
[data-theme="dark"] .ir-label { color: var(--muted) !important; }
[data-theme="dark"] .ir-value { color: var(--text) !important; }
[data-theme="dark"] .info-row { color: var(--text); }

/* Pipeline bars */
[data-theme="dark"] .pipeline-bar { background: rgba(255,255,255,.08); }

/* Monospace SAR amount cells */
[data-theme="dark"] [style*="font-family:monospace"][style*="color:#1B4F72"] { color: var(--accent) !important; }

/* Generic inline padding boxes used as read-only fields */
[data-theme="dark"] div[style*="padding:8px 11px"][style*="background:#F8FAFC"],
[data-theme="dark"] div[style*="padding:8px 11px"][style*="background:#F1F5F9"] {
  background: rgba(255,255,255,.04) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ═══════════════════════════════════════════════════════════
   USERS / SETTINGS page common inline patterns
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] [style*="background:#EFF6FF"][style*="border-radius"] { background: rgba(0,115,230,.08) !important; }
[data-theme="dark"] [style*="background:#FFF1F2"][style*="border-radius"] { background: rgba(229,62,62,.08) !important; }
[data-theme="dark"] [style*="background:#DCFCE7"][style*="border-radius"] { background: rgba(0,179,134,.08) !important; }
[data-theme="dark"] [style*="background:#FEF9C3"][style*="border-radius"] { background: rgba(252,211,77,.07) !important; }

/* ═══════════════════════════════════════════════════════════
   REPORTS PAGE — tab active colour fix for dark
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] .rpt-tab       { color: var(--sub); }
[data-theme="dark"] .rpt-tab:hover { color: var(--text); }
[data-theme="dark"] .rpt-tab.active { color: #5eead4; border-bottom-color: #5eead4; }
[data-theme="dark"] .rpt-table th  { background: rgba(255,255,255,.04); }
[data-theme="dark"] .period-btn.active { background: rgba(94,234,212,.12) !important; border-color: #5eead4 !important; color: #5eead4 !important; }

/* ═══════════════════════════════════════════════════════════
   LOGIN / REGISTER PAGES
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] .login-card  { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .login-logo  { color: var(--text); }
[data-theme="dark"] .register-card { background: var(--card); border-color: var(--border); }

/* ═══════════════════════════════════════════════════════════
   HR-ATTENDANCE, HR-ZK, HR-PAYROLL — dark mode patches
   (covers class-based styles with hardcoded colors)
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] .tab-nav { border-bottom-color: var(--border); }
[data-theme="dark"] .tab-btn { color: var(--sub); }
[data-theme="dark"] .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
[data-theme="dark"] .tab-btn:hover:not(.active) { color: var(--text); }

/* stat-card (attendance/employees) */
[data-theme="dark"] .stat-card { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .stat-card .sc-num { color: var(--text); }
[data-theme="dark"] .stat-card .sc-label { color: var(--muted); }

/* filter-bar inputs */
[data-theme="dark"] .filter-bar input,
[data-theme="dark"] .filter-bar select { background: var(--card); border-color: var(--border); color: var(--text); }

/* quick period buttons */
[data-theme="dark"] .qbtn { background: var(--card); border-color: var(--border); color: var(--sub); }
[data-theme="dark"] .qbtn:hover, [data-theme="dark"] .qbtn.active { border-color: var(--accent); background: var(--accent-hover); color: var(--accent); }

/* attendance table */
[data-theme="dark"] .att-table th { color: var(--sub); border-bottom-color: var(--border); }
[data-theme="dark"] .att-table td { color: var(--text); border-bottom-color: rgba(255,255,255,.04); }
[data-theme="dark"] .att-table tbody tr:hover { background: var(--accent-hover); }

/* Status badges — semi-transparent versions for dark mode */
[data-theme="dark"] .badge-present    { background: rgba(0,179,134,.15); color: #34d399; }
[data-theme="dark"] .badge-late       { background: rgba(252,211,77,.12); color: #FCD34D; }
[data-theme="dark"] .badge-absent     { background: rgba(229,62,62,.15);  color: #FCA5A5; }
[data-theme="dark"] .badge-on_leave   { background: rgba(0,115,230,.12);  color: #93C5FD; }
[data-theme="dark"] .badge-half_day   { background: rgba(252,211,77,.1);  color: #FCD34D; }
[data-theme="dark"] .badge-holiday    { background: var(--s-violet-bg); color: var(--s-violet-tx); }
[data-theme="dark"] .badge-weekend    { background: rgba(255,255,255,.06); color: var(--muted); }
[data-theme="dark"] .badge-missing_checkout { background: rgba(234,88,12,.12); color: #FDBA74; }
[data-theme="dark"] .badge-pending-manager { background: rgba(254,243,195,.08); color: #FCD34D; }
[data-theme="dark"] .badge-pending-hr { background: rgba(0,115,230,.12);  color: #93C5FD; }
[data-theme="dark"] .badge-approved   { background: rgba(0,179,134,.12);  color: #34d399; }
[data-theme="dark"] .badge-rejected   { background: rgba(229,62,62,.12);  color: #FCA5A5; }
[data-theme="dark"] .badge-cancelled  { background: rgba(255,255,255,.05); color: var(--muted); }
[data-theme="dark"] .badge-draft      { background: rgba(252,211,77,.1);  color: #FCD34D; }

/* Source badges */
[data-theme="dark"] .src-zk_device        { background: rgba(0,115,230,.12); color: #93C5FD; }
[data-theme="dark"] .src-manual_entry     { background: rgba(252,211,77,.1); color: #FCD34D; }
[data-theme="dark"] .src-admin_correction { background: var(--s-blue-bg); color: var(--s-blue-tx); }
[data-theme="dark"] .src-leave_system     { background: rgba(0,179,134,.12); color: #34d399; }

/* icon buttons */
[data-theme="dark"] .icon-btn:hover { background: rgba(255,255,255,.07); }
[data-theme="dark"] .icon-btn.edit  { color: var(--blue); }
[data-theme="dark"] .icon-btn.del   { color: var(--red); }

/* stat-strip (inside hr-attendance) */
[data-theme="dark"] .stat-strip .stat-card { background: var(--card); border-color: var(--border); }

/* hr-employees chip filters */
[data-theme="dark"] .chip-all     { border-color: var(--border); background: var(--card); color: var(--sub); }
[data-theme="dark"] .chip-active  { border-color: rgba(0,179,134,.3); background: rgba(0,179,134,.08); color: #34d399; }
[data-theme="dark"] .chip-on_leave { border-color: rgba(0,115,230,.3); background: rgba(0,115,230,.08); color: #93C5FD; }
[data-theme="dark"] .chip-resigned { border-color: rgba(252,211,77,.3); background: rgba(252,211,77,.08); color: #FCD34D; }
[data-theme="dark"] .chip-terminated { border-color: rgba(229,62,62,.3); background: rgba(229,62,62,.08); color: #FCA5A5; }

/* employee table */
[data-theme="dark"] .emp-table tbody tr:hover { background: var(--accent-hover); cursor: pointer; }
[data-theme="dark"] .emp-id   { background: rgba(0,115,230,.1); color: var(--blue); }
[data-theme="dark"] .dept-badge { background: var(--s-blue-bg); color: var(--s-blue-tx); }

/* sc active states (hr page stat cards) */
[data-theme="dark"] .sc.active { background: rgba(0,115,230,.08); border-color: rgba(0,115,230,.35); }
[data-theme="dark"] .sc:hover  { border-color: rgba(0,115,230,.35); }

/* leave type badges in dark mode */
[data-theme="dark"] .ltype-annual     { background: rgba(0,179,134,.1); color: #99F6E4; }
[data-theme="dark"] .ltype-sick       { background: rgba(229,62,62,.1); color: #FCA5A5; }
[data-theme="dark"] .ltype-emergency  { background: rgba(234,88,12,.1); color: #FDBA74; }
[data-theme="dark"] .ltype-unpaid     { background: rgba(255,255,255,.06); color: var(--muted); }
[data-theme="dark"] .ltype-maternity  { background: rgba(157,23,77,.1); color: #F9A8D4; }
[data-theme="dark"] .ltype-paternity  { background: rgba(0,115,230,.1); color: #93C5FD; }
[data-theme="dark"] .ltype-other         { background: var(--s-neutral-bg); color: var(--s-neutral-tx); }
[data-theme="dark"] .ltype-late_arrival  { background: var(--s-orange-bg);  color: var(--s-orange-tx); }
[data-theme="dark"] .ltype-early_leave   { background: var(--s-amber-bg);   color: var(--s-amber-tx); }
[data-theme="dark"] .ltype-short_absence { background: var(--s-neutral-bg); color: var(--s-neutral-tx); }

/* ── users page action buttons ── */
.usr-import-btn:hover { background: rgba(0,115,230,.07) !important; border-color: var(--blue) !important; color: var(--blue) !important; }
.usr-export-btn:hover { background: rgba(0,179,134,.07) !important; border-color: var(--green) !important; color: var(--green) !important; }

/* ═══════════════════════════════════════════════════════════
   INVENTORY PAGE — dark mode
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] .inv-card { background: var(--card); border-color: var(--border); }

/* ═══════════════════════════════════════════════════════════
   CALLS PAGE — dark mode
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] [style*="background:linear-gradient(135deg,#0F172A"] {
  background: linear-gradient(135deg,#060e19 0%,#0a1829 100%) !important;
}

/* ═══════════════════════════════════════════════════════════
   HR-ZK PAGE — dark mode patches
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] .info-banner    { background: rgba(0,115,230,.08); border-color: rgba(0,115,230,.2); color: #93C5FD; }
[data-theme="dark"] .stat-bar .stat-card { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .device-card   { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .device-card:hover { box-shadow: var(--shadow); }
[data-theme="dark"] .dc-name       { color: var(--text); }
[data-theme="dark"] .dc-info-label { color: var(--muted); }
[data-theme="dark"] .dc-info-val   { color: var(--text); }
[data-theme="dark"] .btn-test  { background: rgba(0,115,230,.1); color: #93C5FD; border-color: rgba(0,115,230,.2); }
[data-theme="dark"] .btn-test:hover  { background: rgba(0,115,230,.18); }
[data-theme="dark"] .btn-sync  { background: rgba(0,179,134,.1); color: #34d399; border-color: rgba(0,179,134,.2); }
[data-theme="dark"] .btn-sync:hover  { background: rgba(0,179,134,.18); }
[data-theme="dark"] .btn-edit  { background: var(--card2); color: var(--sub); border-color: var(--border); }
[data-theme="dark"] .btn-edit:hover  { background: var(--border2); }
[data-theme="dark"] .btn-del   { background: rgba(229,62,62,.1); color: var(--red); border-color: rgba(229,62,62,.2); }
[data-theme="dark"] .btn-del:hover   { background: rgba(229,62,62,.18); }
[data-theme="dark"] .toggle-label { color: var(--sub); }
[data-theme="dark"] .toggle-slider { background: rgba(255,255,255,.15); }
[data-theme="dark"] .badge-success   { background: rgba(0,179,134,.12); color: #34d399; }
[data-theme="dark"] .badge-error     { background: rgba(229,62,62,.12); color: var(--red); }
[data-theme="dark"] .badge-partial   { background: rgba(252,211,77,.1); color: #FCD34D; }
[data-theme="dark"] .badge-pending   { background: rgba(252,211,77,.1); color: #FCD34D; }
[data-theme="dark"] .badge-connected { background: rgba(0,179,134,.12); color: #34d399; }
[data-theme="dark"] .badge-offline   { background: rgba(229,62,62,.12); color: var(--red); }
[data-theme="dark"] .badge-mapped    { background: rgba(0,179,134,.12); color: #34d399; }
[data-theme="dark"] .badge-unmapped  { background: rgba(229,62,62,.12); color: var(--red); }
[data-theme="dark"] .badge-conflict  { background: rgba(252,211,77,.1); color: #FCD34D; }
[data-theme="dark"] .badge-auto      { background: rgba(0,115,230,.1); color: #93C5FD; }
[data-theme="dark"] .badge-manual    { background: rgba(252,211,77,.08); color: #FCD34D; }
[data-theme="dark"] .monobadge { background: rgba(255,255,255,.07); color: var(--accent); }
[data-theme="dark"] .filter-bar select { background: var(--card); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .map-table th { color: var(--sub); border-bottom-color: var(--border); }
[data-theme="dark"] .map-table td { color: var(--text); border-bottom-color: rgba(255,255,255,.04); }
[data-theme="dark"] .map-table tbody tr:hover { background: var(--accent-hover); }
[data-theme="dark"] .map-select { background: var(--card); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .map-select.unmapped-highlight { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.06); }
[data-theme="dark"] .log-table th { color: var(--sub); border-bottom-color: var(--border); }
[data-theme="dark"] .log-table td { color: var(--text); border-bottom-color: rgba(255,255,255,.04); }
[data-theme="dark"] .log-table tbody tr:hover { background: var(--accent-hover); }
[data-theme="dark"] .modal-box { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .modal-header { border-bottom-color: var(--border); }
[data-theme="dark"] .modal-header h3 { color: var(--text); }
[data-theme="dark"] .modal-footer { border-top-color: var(--border); background: var(--card2); }
[data-theme="dark"] .field-input, [data-theme="dark"] .field-select { background: var(--card); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .sync-result { background: rgba(0,179,134,.08); border-color: rgba(0,179,134,.2); color: #34d399; }
[data-theme="dark"] .sync-result.error { background: rgba(229,62,62,.08); border-color: rgba(229,62,62,.2); color: var(--red); }
[data-theme="dark"] .test-ok  { background: rgba(0,179,134,.12); color: #34d399; }
[data-theme="dark"] .test-err { background: rgba(229,62,62,.12); color: var(--red); }
[data-theme="dark"] .warning-banner { background: rgba(252,211,77,.06); border-color: rgba(252,211,77,.2); color: #FCD34D; }
[data-theme="dark"] .warning-banner button { color: #FCD34D; }
[data-theme="dark"] .empty-state { color: var(--muted); }
[data-theme="dark"] .empty-state .es-title { color: var(--sub); }
[data-theme="dark"] .loading-row td { color: var(--muted); }
[data-theme="dark"] .expand-btn { background: var(--card2); border-color: var(--border); color: var(--sub); }
[data-theme="dark"] .expand-btn:hover { background: var(--border2); }
[data-theme="dark"] .error-list { background: rgba(229,62,62,.08); border-color: rgba(229,62,62,.2); }
[data-theme="dark"] .error-list li { color: var(--red); }

/* ═══════════════════════════════════════════════════════════
   HR-PAYROLL PAGE — dark mode patches
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] .period-bar { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .period-bar label { color: var(--sub); }
[data-theme="dark"] .period-bar select, [data-theme="dark"] .period-bar input { background: var(--card); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .kpi-row .kpi-card { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .kpi-card .kc-label { color: var(--muted); }
[data-theme="dark"] .kpi-card .kc-value { color: var(--text); }
[data-theme="dark"] .kpi-card .kc-value.green { color: #34d399; }
[data-theme="dark"] .kpi-card .kc-value.red { color: var(--red); }
[data-theme="dark"] .kpi-card .kc-value.blue { color: var(--blue); }
[data-theme="dark"] .pay-table { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .pay-table th { background: var(--card2); color: var(--sub); border-bottom-color: var(--border); }
[data-theme="dark"] .pay-table td { color: var(--text); border-bottom-color: rgba(255,255,255,.04); }
[data-theme="dark"] .pay-table tbody tr:hover { background: var(--accent-hover); }
[data-theme="dark"] .pay-table tfoot tr td { border-top-color: var(--border); background: var(--card2); color: var(--text); }
[data-theme="dark"] .pay-table tr.row-absent { background: rgba(229,62,62,.05); }
[data-theme="dark"] .pay-table tr.row-good   { background: rgba(0,179,134,.05); }
[data-theme="dark"] .num-green { color: #34d399; }
[data-theme="dark"] .num-red   { color: var(--red); }
[data-theme="dark"] .num-bold  { color: var(--text); }
[data-theme="dark"] .emp-name  { color: var(--text); }
[data-theme="dark"] .emp-dept  { color: var(--muted); }
[data-theme="dark"] .badge-finalized { background: rgba(0,179,134,.12); color: #34d399; }
[data-theme="dark"] .badge-paid      { background: rgba(0,115,230,.12); color: #93C5FD; }
[data-theme="dark"] .icon-btn { color: var(--sub); }
[data-theme="dark"] .icon-btn:hover { background: var(--accent-hover); color: var(--accent); }

/* ═══════════════════════════════════════════════════════════
   HR-EMPLOYEES PAGE — additional dark mode patches
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] .page-tabs { border-bottom-color: var(--border); }
[data-theme="dark"] .page-tab  { color: var(--sub); }
[data-theme="dark"] .page-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
[data-theme="dark"] .page-tab:hover:not(.active) { color: var(--text); background: var(--accent-hover); }

/* ═══════════════════════════════════════════════════════════
   APPROVALS PAGE — dark mode patches
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] .ap-kpi { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .ap-kpi-val { color: var(--text); }
[data-theme="dark"] .ap-kpi-lbl { color: var(--muted); }
[data-theme="dark"] .filter-input { background: var(--card); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .sb-pending  { background: rgba(252,211,77,.08); color: #FCD34D; border-color: rgba(252,211,77,.2); }
[data-theme="dark"] .sb-approved { background: rgba(0,179,134,.08); color: #34d399; border-color: rgba(0,179,134,.2); }
[data-theme="dark"] .sb-rejected { background: rgba(229,62,62,.08); color: var(--red); border-color: rgba(229,62,62,.2); }
[data-theme="dark"] .eb-sent   { background: rgba(0,179,134,.08); color: #34d399; border-color: rgba(0,179,134,.2); }
[data-theme="dark"] .eb-failed { background: rgba(229,62,62,.08); color: var(--red); border-color: rgba(229,62,62,.2); }
[data-theme="dark"] .eb-none   { background: rgba(255,255,255,.04); color: var(--muted); border-color: var(--border); }
[data-theme="dark"] .act-timeline li { border-bottom-color: var(--border); }
[data-theme="dark"] .act-time { color: var(--muted); }
[data-theme="dark"] .detail-section-title { color: var(--sub); border-bottom-color: var(--border); }
[data-theme="dark"] .detail-key { color: var(--sub); }
[data-theme="dark"] .detail-val { color: var(--text); }
[data-theme="dark"] .tpl-tab-bar { border-bottom-color: var(--border); }
[data-theme="dark"] .tpl-tab { color: var(--sub); }
[data-theme="dark"] .tpl-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
[data-theme="dark"] .tpl-vars { background: rgba(255,255,255,.04); border-color: var(--border); color: var(--sub); }
[data-theme="dark"] .tpl-vars code { background: rgba(255,255,255,.08); color: var(--accent); }
[data-theme="dark"] .modal-box { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .modal-header { border-bottom-color: var(--border); background: var(--card); }
[data-theme="dark"] .modal-title { color: var(--text); }
[data-theme="dark"] .modal-close { color: var(--muted); }
[data-theme="dark"] .modal-footer { border-top-color: var(--border); }

/* ═══════════════════════════════════════════════════════════
   BUG REPORTS PAGE — dark mode patches
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] .bug-card { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .bug-card:hover { box-shadow: var(--shadow); border-color: rgba(79,142,247,.25); }
[data-theme="dark"] .pp-critical { background: rgba(220,38,38,.12); color: var(--red); }
[data-theme="dark"] .pp-high     { background: rgba(234,88,12,.12); color: #FDBA74; }
[data-theme="dark"] .pp-medium   { background: rgba(217,119,6,.12); color: #FCD34D; }
[data-theme="dark"] .pp-low      { background: rgba(34,197,94,.1); color: #4ade80; }
[data-theme="dark"] .sp-open        { background: rgba(0,115,230,.1); color: #93C5FD; }
[data-theme="dark"] .sp-in_progress { background: rgba(217,119,6,.1); color: #FCD34D; }
[data-theme="dark"] .sp-resolved    { background: rgba(22,163,74,.1); color: #4ade80; }
[data-theme="dark"] .sp-closed      { background: rgba(255,255,255,.05); color: var(--muted); }
[data-theme="dark"] .stat-mini { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .stat-mini:hover, [data-theme="dark"] .stat-mini.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-hover); }
[data-theme="dark"] .stat-mini .val { color: var(--text); }
[data-theme="dark"] .stat-mini .lbl { color: var(--muted); }

/* ═══════════════════════════════════════════════════════════
   CALLS PAGE — dark mode patches
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] .pbx-kpi  { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .pbx-kpi-val { color: var(--text); }
[data-theme="dark"] .pbx-kpi-label { color: var(--sub); }
[data-theme="dark"] .pbx-kpi-sub { color: var(--muted); }
[data-theme="dark"] .agent-card { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .call-row:hover { background: var(--accent-hover) !important; }
[data-theme="dark"] .tab-bar { background: var(--card); border-bottom-color: var(--border); }
[data-theme="dark"] .sync-badge { background: rgba(0,179,134,.08); color: #34d399; border-color: rgba(0,179,134,.2); }
[data-theme="dark"] .sync-badge.stale { background: rgba(252,211,77,.06); color: #FCD34D; border-color: rgba(252,211,77,.2); }

/* ═══════════════════════════════════════════════════════════
   GLOBAL PAGE COMPONENTS v2 — Applied across all modules
   ═══════════════════════════════════════════════════════════ */

/* ── Page Header ──────────────────────────────────────────── */
.page-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px;
  gap: 16px;
  padding-top: 4px;
}
.page-hdr h1 {
  font-size: 21px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 4px;
  letter-spacing: -.35px;
  line-height: 1.2;
}
.page-hdr p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
.page-hdr-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
@media (max-width: 680px) {
  .page-hdr { flex-direction: column; }
  .page-hdr-actions { width: 100%; flex-wrap: wrap; }
  .page-hdr-actions .btn { flex: 1; justify-content: center; }
}

/* ── Filter / Chip Bar ────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 16px;
}
.filter-chip {
  padding: 5px 13px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--sub);
  transition: all .15s;
  white-space: nowrap;
  line-height: 1;
  font-family: inherit;
}
.filter-chip:hover {
  border-color: var(--blue, #0073e6);
  color: var(--blue, #0073e6);
  background: rgba(0,115,230,.04);
}
.filter-chip.active {
  background: var(--blue, #0073e6);
  border-color: var(--blue, #0073e6);
  color: #fff;
}
.filter-chip .fc-count {
  opacity: .7;
  font-weight: 500;
  margin-left: 2px;
}

/* ── Search Box ───────────────────────────────────────────── */
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 7px 12px;
  background: var(--card);
  transition: border-color .15s;
  min-width: 200px;
}
.search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-hover);
}
.search-box svg { color: var(--muted); flex-shrink: 0; }
.search-box input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13.5px;
  color: var(--text);
  font-family: inherit;
  width: 100%;
}
.search-box input::placeholder { color: var(--muted); }

/* ── Empty State ──────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 56px 24px;
  color: var(--muted);
}
.empty-state-icon {
  font-size: 40px;
  margin-bottom: 14px;
  opacity: .7;
}
.empty-state-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--sub);
  margin-bottom: 6px;
}
.empty-state-sub {
  font-size: 13px;
  color: var(--muted);
  max-width: 360px;
  margin: 0 auto 18px;
  line-height: 1.6;
}
.empty-state .btn { margin-top: 4px; }

/* ── Table Container (adds scroll + radius wrapper) ───────── */
.table-wrap {
  overflow-x: auto;
}
.table-wrap .data-table {
  min-width: 620px;
}
/* Queue/list card shorthand */
.list-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* ── Data Table Improvements ──────────────────────────────── */
.data-table th {
  background: var(--card2);
  padding: 11px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: 13px 16px;
  font-size: 13.5px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td {
  background: rgba(0,115,230,.025);
  cursor: pointer;
}
/* ID column monospace pill */
.tbl-id {
  font-weight: 700;
  color: var(--accent);
  font-family: 'SourceCodePro', monospace;
  font-size: 12.5px;
  background: var(--accent-hover);
  border: 1px solid rgba(37,99,235,.18);
  padding: 3px 9px;
  border-radius: 7px;
  display: inline-block;
  white-space: nowrap;
}
/* Primary text in table cell */
.tbl-primary { font-weight: 700; font-size: 13.5px; color: var(--text); }
.tbl-secondary { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
/* Booth/size pill */
.tbl-pill {
  background: var(--card2);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sub);
  white-space: nowrap;
  display: inline-block;
}

/* ── Table Action Buttons ─────────────────────────────────── */
.tbl-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tbl-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--sub);
  font-family: inherit;
  transition: all .15s;
  white-space: nowrap;
}
.tbl-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-hover);
}
.tbl-btn-primary {
  background: var(--accent-hover);
  color: var(--accent);
  border-color: rgba(37,99,235,.30);
}
.tbl-btn-primary:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.tbl-btn-danger {
  background: rgba(220,38,38,.06);
  color: var(--red);
  border-color: rgba(220,38,38,.22);
}
.tbl-btn-danger:hover {
  background: rgba(220,38,38,.13);
  border-color: rgba(220,38,38,.40);
  color: var(--red);
}
.tbl-btn-success {
  background: rgba(0,179,134,.07);
  color: #007a5e;
  border-color: rgba(0,179,134,.25);
}
.tbl-btn-success:hover {
  background: rgba(0,179,134,.14);
}

/* ── Count / Stats Row ────────────────────────────────────── */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.stat-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  flex: 1;
  min-width: 120px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s;
}
.stat-chip:hover { box-shadow: var(--shadow); }
.stat-chip-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.stat-chip-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}
.stat-chip-lbl {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Section Sub-header ───────────────────────────────────── */
.section-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}

/* ── Info Banner ──────────────────────────────────────────── */
.info-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 9px;
  padding: 11px 16px;
  font-size: 12.5px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.info-banner svg { flex-shrink: 0; margin-top: 2px; }
.info-banner.info  { background: rgba(0,115,230,.05); border: 1px solid rgba(0,115,230,.15); color: var(--sub); }
.info-banner.warn  { background: rgba(234,179,8,.06); border: 1px solid rgba(234,179,8,.22); color: #92400E; }
.info-banner.success { background: rgba(0,179,134,.06); border: 1px solid rgba(0,179,134,.2); color: #007a5e; }
.info-banner.orange { background: rgba(234,88,12,.07); border: 1px solid rgba(234,88,12,.22); color: #9a3412; }

/* ── Table Footer Row Count ───────────────────────────────── */
.tbl-footer {
  padding: 8px 16px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--card2);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ── Avatar+Name Cell ─────────────────────────────────────── */
.tbl-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tbl-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

/* ── Dark mode overrides for new components ───────────────── */
[data-theme="dark"] .filter-chip { background: var(--card); border-color: var(--border); color: var(--sub); }
[data-theme="dark"] .filter-chip:hover { border-color: var(--blue); color: var(--blue); background: rgba(0,115,230,.08); }
[data-theme="dark"] .filter-chip.active { background: var(--blue); border-color: var(--blue); color: #fff; }
[data-theme="dark"] .search-box { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .search-box input { color: var(--text); }
[data-theme="dark"] .stat-chip { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .tbl-btn { background: var(--card2); border-color: var(--border); color: var(--sub); }
[data-theme="dark"] .tbl-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-hover); }
[data-theme="dark"] .tbl-btn-primary { background: rgba(79,142,247,.14); color: var(--accent); border-color: rgba(79,142,247,.28); }
[data-theme="dark"] .tbl-btn-primary:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
[data-theme="dark"] .tbl-btn-danger { background: rgba(248,113,113,.10); color: #fca5a5; border-color: rgba(248,113,113,.25); }
[data-theme="dark"] .tbl-btn-danger:hover { background: rgba(248,113,113,.18); border-color: rgba(248,113,113,.45); color: #fca5a5; }
[data-theme="dark"] .tbl-pill { background: var(--card2); border-color: var(--border); color: var(--sub); }
[data-theme="dark"] .tbl-id { background: var(--accent-hover); border-color: rgba(79,142,247,.22); color: var(--accent); }
[data-theme="dark"] .tbl-secondary { color: var(--sub); }  /* --sub #7299b8 is readable; --muted #3d6080 is not */
[data-theme="dark"] .info-banner.info { background: rgba(0,115,230,.08); border-color: rgba(0,115,230,.2); }
[data-theme="dark"] .info-banner.warn { background: rgba(234,179,8,.08); border-color: rgba(234,179,8,.2); color: #FCD34D; }
[data-theme="dark"] .info-banner.success { background: rgba(0,179,134,.08); border-color: rgba(0,179,134,.2); color: #34d399; }
[data-theme="dark"] .info-banner.orange { background: rgba(234,88,12,.1); border-color: rgba(234,88,12,.25); color: #FDBA74; }
[data-theme="dark"] .tbl-footer { background: var(--card2); border-top-color: var(--border); }

/* ═══════════════════════════════════════════════════════════
   FULL MOBILE RESPONSIVE SYSTEM
   Desktop (>1024px) untouched — all rules scoped to ≤1024px
   ═══════════════════════════════════════════════════════════ */

/* ── TABLET (≤1024px) — layout adjustments ─────────────────── */
@media (max-width: 1024px) {
  /* Page header wraps earlier */
  .page-hdr { flex-wrap: wrap; gap: 12px; }

  /* Stats row → 3 col */
  .stats-row { grid-template-columns: repeat(3, 1fr); gap: 10px; }

  /* Settings brand grid → 1 col */
  #root .card > div[style*="grid-template-columns:200px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── MOBILE (≤768px) ─────────────────────────────────────── */
@media (max-width: 768px) {

  /* ─ Global body / page ─────────────────────────────────── */
  body { overflow-x: hidden; }
  #main { min-width: 0; overflow-x: hidden; }

  /* ─ Page header (global .page-hdr) ─────────────────────── */
  .page-hdr {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
  }
  .page-hdr h1 { font-size: 18px !important; }
  .page-hdr p  { font-size: 12.5px; }
  .page-hdr-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  .page-hdr-actions .btn,
  .page-hdr-actions button {
    flex: 1;
    min-width: 120px;
    justify-content: center;
    text-align: center;
  }

  /* ─ Stats row / chips ───────────────────────────────────── */
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-chip { padding: 10px 12px; gap: 8px; }
  .stat-chip .stat-chip-icon { font-size: 18px; }
  .stat-chip .stat-chip-val  { font-size: 18px !important; }
  .stat-chip .stat-chip-label{ font-size: 11px; }

  /* ─ Filter chip row ─────────────────────────────────────── */
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    gap: 6px;
  }
  .filter-chip { flex-shrink: 0; white-space: nowrap; }

  /* ─ Cards ───────────────────────────────────────────────── */
  .card { padding: 14px !important; }
  .card.mb16, .card.mb20 { margin-bottom: 12px !important; }
  .section-header { margin-bottom: 14px; gap: 8px; }
  .section-header h3 { font-size: 14px; }

  /* ─ Table wrapper — always scrollable ──────────────────── */
  .table-wrap, .list-card .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .data-table { min-width: 580px; font-size: 12.5px; }
  .data-table th { padding: 9px 10px; font-size: 11px; white-space: nowrap; }
  .data-table td { padding: 9px 10px; }

  /* ─ Table component classes ─────────────────────────────── */
  .tbl-id     { font-size: 11px; padding: 2px 7px; }
  .tbl-primary{ font-size: 12.5px; }
  .tbl-secondary { font-size: 11px; }
  .tbl-pill   { font-size: 11px; padding: 2px 7px; }
  .tbl-actions{ display: flex; flex-wrap: wrap; gap: 4px; min-width: 80px; }
  .tbl-btn, .tbl-btn-primary, .tbl-btn-danger {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* ─ Form fields — all 1-col on mobile ──────────────────── */
  .field-row,
  .field-row.three,
  .field-row.two { grid-template-columns: 1fr !important; }
  .form-group { margin-bottom: 12px; }
  .field-input, .field-select, .field-textarea {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }
  .field-label { font-size: 12.5px; margin-bottom: 5px; }

  /* ─ Inline style grid overrides (JS-rendered forms) ─────── */
  /* Force any 2-col / 3-col inline grid to single column */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  /* Exception: keep 2-col for small chips/badges */
  .stats-row[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ─ Buttons ─────────────────────────────────────────────── */
  .btn { min-height: 40px; font-size: 13px; }
  .btn-sm { min-height: 34px; font-size: 12.5px; }
  .btn-full, .btn-mobile-full { width: 100% !important; justify-content: center; }

  /* Action button groups — stack vertically */
  .form-actions,
  div[style*="display:flex"][style*="gap"][style*="margin-top"] > .btn + .btn {
    flex-wrap: wrap;
  }

  /* ─ Modals ──────────────────────────────────────────────── */
  .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  .modal-box {
    border-radius: 18px 18px 0 0 !important;
    max-height: 92vh !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-y: auto;
  }
  .modal-header { padding: 14px 16px !important; }
  .modal-body   { padding: 14px 16px !important; }
  .modal-footer {
    padding: 12px 16px !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .modal-footer .btn { flex: 1; min-width: 100px; justify-content: center; }

  /* ─ Header ──────────────────────────────────────────────── */
  #header { padding: 0 12px !important; gap: 8px !important; }
  .hdr-user-name { display: none; }
  .breadcrumb { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }

  /* ─ Workflow stepper ────────────────────────────────────── */
  #stepper { padding: 6px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .stepper-inner { min-width: max-content; }
  .step-label { font-size: 8px; max-width: 48px; }
  .step-line  { width: 8px !important; }

  /* ─ Dashboard KPI grid ──────────────────────────────────── */
  .kpi-grid-7, .kpi-grid-4, .kpi-grid-3 { grid-template-columns: repeat(2,1fr) !important; gap: 8px; }
  .kpi-card { padding: 14px !important; }
  .kpi-val  { font-size: 20px !important; }
  .kpi-label{ font-size: 11px !important; }

  /* ─ List card inside page content ──────────────────────── */
  .list-card { border-radius: 10px; }

  /* ─ Info banners ────────────────────────────────────────── */
  .info-banner { flex-direction: column; gap: 6px; font-size: 12.5px; }

  /* ─ Empty state ─────────────────────────────────────────── */
  .empty-state { padding: 36px 16px; }
  .empty-state h3 { font-size: 14px; }

  /* ─ Section cards with inline grid (settings, sales brief) ─ */
  .card > div[style*="display:grid"],
  .card > div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
  }

  /* ─ Production cost grid ────────────────────────────────── */
  [style*="grid-template-columns"][style*="1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ─ Upload zones — stack on mobile ─────────────────────── */
  [style*="display:flex"][style*="gap"][style*="border:2px dashed"] {
    flex-direction: column !important;
  }

  /* ─ Kanban board ────────────────────────────────────────── */
  .kanban-board { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .kanban-col   { flex: 0 0 240px !important; }

  /* ─ Chat layout ─────────────────────────────────────────── */
  .chat-layout { position: relative; overflow: hidden; }
  .chat-left   { width: 100% !important; position: absolute; top: 0; left: 0; bottom: 0; z-index: 20; transform: translateX(-100%); transition: transform .25s; }
  .chat-left.open { transform: translateX(0); }

  /* ─ Leads / Customer detail panel ──────────────────────── */
  .detail-panel {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    bottom: 0 !important; top: auto !important;
    width: 100% !important;
    height: 90vh !important;
    max-height: 90vh !important;
    border-radius: 18px 18px 0 0 !important;
    z-index: 9000;
  }

  /* ─ Notification dropdown ───────────────────────────────── */
  .notif-dropdown { right: -60px !important; width: 300px !important; }

  /* ─ HR / Attendance specific ────────────────────────────── */
  .hr-tabs, .dm-tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .hr-tab, .dm-tab { flex-shrink: 0; }

  /* ─ Settings logo grid ──────────────────────────────────── */
  #root .card div[style*="grid-template-columns:200px"],
  #root .card div[style*="grid-template-columns: 200px"] {
    grid-template-columns: 1fr !important;
  }

  /* ─ Quotation / Finance summary panels ─────────────────── */
  [style*="display:flex"][style*="gap:20px"],
  [style*="display:flex"][style*="gap: 20px"],
  [style*="display:flex"][style*="gap:24px"],
  [style*="display:flex"][style*="gap: 24px"] {
    flex-wrap: wrap;
  }

  /* ─ Inline 2-panel flex layouts (design, production) ────── */
  [style*="display:flex"][style*="gap:16px"] > div[style*="width:"],
  [style*="display:flex"][style*="gap: 16px"] > div[style*="width:"] {
    width: 100% !important;
    flex-shrink: unset !important;
  }
}

/* ── SMALL MOBILE (≤480px) ──────────────────────────────────── */
@media (max-width: 480px) {
  /* ─ One column everything ──────────────────────────────── */
  .stats-row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .kpi-grid-7, .kpi-grid-4, .kpi-grid-3 { grid-template-columns: 1fr 1fr !important; }

  /* ─ Page header ─────────────────────────────────────────── */
  .page-hdr h1 { font-size: 16px !important; }
  .page-inner  { padding: 8px !important; }

  /* ─ Table even more compact ─────────────────────────────── */
  .data-table { min-width: 520px; font-size: 12px; }
  .data-table th, .data-table td { padding: 7px 8px; }

  /* ─ Buttons ─────────────────────────────────────────────── */
  .btn { font-size: 13px; padding: 9px 14px; }
  .tbl-btn, .tbl-btn-primary, .tbl-btn-danger { font-size: 11.5px; padding: 4px 8px; }

  /* ─ Cards ───────────────────────────────────────────────── */
  .card { padding: 12px !important; }

  /* ─ Stat chips → 2 per row max ─────────────────────────── */
  .stat-chip { padding: 8px 10px; }
  .stat-chip .stat-chip-val { font-size: 16px !important; }

  /* ─ Typography ──────────────────────────────────────────── */
  .page-title h1 { font-size: 16px !important; }
  .section-header h3 { font-size: 13px; }

  /* ─ Modal ───────────────────────────────────────────────── */
  .modal-header h2 { font-size: 15px; }
  .modal-body { padding: 12px !important; }

  /* ─ Breadcrumb ──────────────────────────────────────────── */
  .breadcrumb { max-width: 140px; font-size: 11.5px; }

  /* ─ Notification dropdown ───────────────────────────────── */
  .notif-dropdown { width: 260px !important; right: -80px !important; }

  /* ─ Upload areas ────────────────────────────────────────── */
  .upload-zone { padding: 20px 12px !important; }

  /* ─ Badge pills in tables ───────────────────────────────── */
  .badge, .status-badge, .tbl-pill { font-size: 10.5px; padding: 2px 7px; }

  /* ─ Action buttons in tables — icon only or very short ─── */
  .tbl-actions { gap: 3px; }
}

/* ── TOUCH TARGETS — all clickable elements ─────────────────── */
@media (max-width: 768px) {
  a, button, [role="button"],
  .filter-chip, .nav-item, .tab-item,
  .tbl-btn, .tbl-btn-primary, .tbl-btn-danger,
  select, input[type="checkbox"], input[type="radio"] {
    min-height: 36px;
    touch-action: manipulation;
  }
  /* Checkboxes and radios need adequate tap area */
  input[type="checkbox"], input[type="radio"] {
    width: 18px; height: 18px;
  }
  /* Nav items in sidebar */
  .nav-item { min-height: 44px !important; padding: 10px 14px !important; }
  .nav-item .nav-label { font-size: 13.5px; }
}

/* ── LOGIN PAGE mobile (overrides login.html internal CSS) ───── */
@media (max-width: 820px) {
  /* Handled inside login.html — no override needed */
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE UX v2 — comprehensive responsive layer
   Touch targets · iOS fixes · safe-area · table-to-card · dropdowns
   ═══════════════════════════════════════════════════════════════════ */

/* ── Safe-area handling for notched phones (iPhone X+, etc) ──────── */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
  #sidebar {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal-overlay {
    padding-top: env(safe-area-inset-top);
  }
}

/* ── Universal momentum scroll + smooth touch ──────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ── Hamburger animation when sidebar is open ──────────────────────── */
#sidebar.open ~ #header #menu-toggle span:nth-child(1),
body.sidebar-open #menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.sidebar-open #menu-toggle span:nth-child(2) { opacity: 0; }
body.sidebar-open #menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
#menu-toggle span { transition: transform .2s ease, opacity .15s ease; }

/* ═══════════════════════════════════════════════════════════════════
   TABLET (≤1024px) — compact tables, comfortable touch
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Tables: smaller padding, allow horizontal scroll with shadow hint */
  .data-table th, .data-table td { padding: 10px 12px; font-size: 13px; }
  .table-wrap, .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--card), var(--card)) left center / 20px 100% no-repeat,
      linear-gradient(to right, rgba(0,0,0,.08), transparent) left center / 8px 100% no-repeat,
      linear-gradient(to left,  var(--card), var(--card)) right center / 20px 100% no-repeat,
      linear-gradient(to left,  rgba(0,0,0,.08), transparent) right center / 8px 100% no-repeat;
    background-attachment: local, scroll, local, scroll;
  }

  /* Buttons wrap nicely in toolbars instead of overflowing */
  .list-toolbar, .toolbar, .actions-bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Page header: stacks title + actions on tablet */
  .page-header {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE (≤768px) — full UX overhaul
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── iOS focus zoom prevention — inputs must be ≥16px ──────────── */
  input, select, textarea,
  .field-input, .form-input, .form-control {
    font-size: 16px !important;
  }
  /* But keep small UI affordances readable */
  input[type="checkbox"], input[type="radio"] { font-size: inherit !important; }

  /* ── Touch targets — minimum 44×44 per Apple HIG ──────────────── */
  button, .btn, .btn-icon, .nav-item, .tab,
  a.btn, .hdr-btn, .modal-close, .dropdown-item {
    min-height: 44px;
  }
  /* But preserve compact action chips (with explicit btn-xs/btn-sm sizes) */
  .btn-xs, .btn-sm, .chip-btn { min-height: 36px; }

  /* ── No accidental horizontal scroll on body ──────────────────── */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* ── Page container ─────────────────────────────────────────────── */
  .page-inner, .page-container { padding: 12px; max-width: 100%; }
  .page-header h1, .page-title h1 { font-size: 19px !important; }
  .page-header p,  .page-title p  { font-size: 13px;   }

  /* ── Tables: generic "stack as cards" pattern via [data-label] ──
     Mark up rows like:
        <td data-label="Name">John</td>
     and add `class="data-table responsive-card-table"` for opt-in. */
  table.responsive-card-table { display: block; min-width: 0; }
  table.responsive-card-table thead {
    position: absolute; left: -9999px; top: -9999px; visibility: hidden;
  }
  table.responsive-card-table tbody { display: block; }
  table.responsive-card-table tr {
    display: block;
    margin-bottom: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 4px;
    box-shadow: var(--shadow-sm);
  }
  table.responsive-card-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border: none;
    padding: 8px 12px;
    font-size: 13.5px;
    text-align: right;
  }
  table.responsive-card-table td::before {
    content: attr(data-label);
    flex-shrink: 0;
    color: var(--sub);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-align: left;
  }
  table.responsive-card-table td[data-label=""]::before,
  table.responsive-card-table td:not([data-label])::before { content: ""; padding: 0; }
  /* Action cell gets a top border separator inside the card */
  table.responsive-card-table td.actions,
  table.responsive-card-table td:last-child {
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-top: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* ── Regular (non-opted-in) tables: keep horizontal scroll, but
     guarantee sticky right columns don't break ──────────────────── */
  .data-table th.col-actions,
  .data-table td.col-actions {
    position: static !important;
    box-shadow: none !important;
  }

  /* ── Forms — all field rows collapse and labels go full-width ── */
  .form-row, .form-group-row, .field-group { flex-direction: column !important; }
  .field-input, .form-input, .form-control { width: 100%; }
  .btn-row, .form-actions {
    flex-direction: column-reverse;  /* Primary action on top after submit-flow reverse */
    gap: 10px;
  }
  .btn-row .btn, .form-actions .btn { width: 100%; justify-content: center; }

  /* ── Buttons — utility helpers ────────────────────────────────── */
  .btn-group { flex-wrap: wrap; gap: 8px; }
  .btn-icon-only-mobile span:not(.icon) { display: none; }

  /* ── Modals: bottom-sheet style with rounded top, drag handle ── */
  .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 18px 18px 0 0 !important;
    margin: 0 !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,.18) !important;
  }
  .modal-box::before {
    content: "";
    display: block;
    width: 36px; height: 4px;
    margin: 8px auto 0;
    background: var(--border);
    border-radius: 4px;
  }
  .modal-header { padding: 14px 18px !important; position: sticky; top: 0; z-index: 2; background: var(--card); }
  .modal-body   { padding: 14px 18px !important; }
  .modal-footer {
    padding: 12px 18px !important;
    position: sticky; bottom: 0; z-index: 2; background: var(--card);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 8px;
  }
  .modal-footer .btn { flex: 1 1 auto; min-width: 100px; }

  /* ── Dropdowns / popovers: stay inside viewport ────────────────── */
  .dropdown-menu, .popover, .menu-pop, .spk-actions-menu {
    max-width: calc(100vw - 16px);
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Notification dropdown: full-width sheet on mobile ─────────── */
  #notif-dropdown, .notif-dropdown {
    position: fixed !important;
    left: 8px !important; right: 8px !important;
    width: calc(100vw - 16px) !important;
    top: 60px !important;
    max-height: calc(100vh - 80px);
  }

  /* ── Chat — input always at bottom with safe-area padding ───────── */
  /* (chat.html owns its own slide-in pattern via .mobile-open) */
  .chat-input-wrap, .msg-composer {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0)) !important;
  }
  .chat-msgs, .msg-list, .messages {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* ── KPI / stat cards: compact grid (covers all stat-row variants) ─ */
  .kpi-row, .kpi-grid, .stats-bar, .stat-strip, .stat-row, .itm-kpi-row,
  .pbx-kpi-grid, .team-grid, .rpt-kpi-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .kpi-card { padding: 12px !important; }
  .kpi-card .kpi-val, .kpi-card .kpi-value { font-size: 20px !important; }

  /* ── Status badges — wrap, don't break ─────────────────────────── */
  .status-badge, .badge { white-space: normal; line-height: 1.3; }

  /* ── Workflow stepper: only show current step on mobile ────────── */
  #stepper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .step:not(.active):not(.completed) .step-label { display: none; }

  /* ── Detail panel: full-screen bottom sheet ─────────────────────── */
  .detail-panel, .side-panel {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important; right: 0 !important;
    top: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  /* ── PDF preview: fit and pinch-zoom ───────────────────────────── */
  .pdf-preview, iframe.pdf-frame {
    width: 100% !important;
    height: 70vh;
    touch-action: pan-x pan-y pinch-zoom;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SMALL MOBILE (≤480px) — extra-compact
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .kpi-row, .kpi-grid, .stats-bar, .stat-strip, .stat-row, .itm-kpi-row,
  .pbx-kpi-grid, .team-grid, .rpt-kpi-grid { grid-template-columns: 1fr !important; }
  .page-inner { padding: 10px; }
  .modal-header h2, .modal-header h3 { font-size: 16px; }
  .modal-body  { font-size: 13.5px; }
  /* Sidebar uses a wider drawer for thumb reach */
  #sidebar { width: 280px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE PARITY for new responsive components
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] table.responsive-card-table tr {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
[data-theme="dark"] .modal-box::before { background: rgba(255,255,255,.18); }
@media (max-width: 1024px) {
  [data-theme="dark"] .table-wrap,
  [data-theme="dark"] .table-scroll {
    background:
      linear-gradient(to right, var(--card), var(--card)) left center / 20px 100% no-repeat,
      linear-gradient(to right, rgba(0,0,0,.4), transparent)   left center / 8px 100% no-repeat,
      linear-gradient(to left,  var(--card), var(--card)) right center / 20px 100% no-repeat,
      linear-gradient(to left,  rgba(0,0,0,.4), transparent)   right center / 8px 100% no-repeat;
    background-attachment: local, scroll, local, scroll;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TABLET LANDSCAPE — show partial sidebar (icons + labels collapse)
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  #sidebar { width: 220px; }
  .nav-item { padding: 8px 10px; font-size: 13px; }
  .sb-section { font-size: 11px; padding: 8px 12px 4px; }
}