/* Pajill — Stripe Design System */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── FONTS ────────────────────────────────────────────────── */
/* sohne-var and SourceCodePro @font-face blocks removed:
   b.stripecdn.com is not in the CSP font-src directive so both
   requests were blocked and generated console warnings.
   font-family declarations retain their system/web-safe fallbacks. */

/* ── 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: 'Inter', 'sohne-var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: -0.006em;
  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 ─────────────────────────────────────────────── */
/* dvh = dynamic viewport height (accounts for iPhone Safari URL bar).
   Falls back to 100vh on browsers that don't support dvh yet. */
#app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
#sidebar { width: 240px; min-height: 100vh; min-height: 100dvh; 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); }

/* ── WhatsApp brand icon (sidebar) — always-visible green badge ───────── */
.wa-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: #25D366;       /* WhatsApp brand green — fully opaque */
  color: #ffffff;             /* SVG uses currentColor — renders white logo */
  flex-shrink: 0;
  opacity: 1 !important;      /* override global .nav-item .icon { opacity:.85 } so it never dims */
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
/* Keep the badge fully visible regardless of inactive/active icon-opacity rules */
.nav-item .wa-nav-icon,
.nav-item.active .wa-nav-icon { opacity: 1 !important; }
.nav-item:hover .wa-nav-icon {
  transform: scale(1.05);
  box-shadow: 0 0 0 4px rgba(37,211,102,.30), 0 2px 8px rgba(37,211,102,.35);  /* soft WhatsApp glow */
}
.nav-item.active .wa-nav-icon {
  background: #0F8A6E;        /* darker WA green — clearly distinct active state */
  box-shadow: 0 0 0 3px rgba(37,211,102,.35);
}
/* Force the logo WHITE inside the green badge.
   The injected SVG carries class="wa-brand" (which sets color:#25D366 for inline
   widget logos) — without this override the logo renders green-on-green = invisible. */
.wa-nav-icon svg,
.wa-nav-icon svg.wa-brand,
.wa-nav-icon svg path {
  fill: #ffffff !important;
  color: #ffffff !important;
}
.wa-nav-icon svg { width: 19px; height: 19px; display: block; }

/* ── WhatsApp brand color helper (used in widgets/labels) ── */
.wa-brand { color: #25D366; vertical-align: middle; }

/* ── WhatsApp unread badge (sidebar + future header) ────── */
.sb-wa-badge {
  margin-inline-start: auto;
  background: #EF4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--sidebar-bg, #0a2540);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  line-height: 1;
  letter-spacing: .02em;
}
.sb-wa-badge.pulse {
  animation: wa-badge-pulse .55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes wa-badge-pulse {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0  rgba(239,68,68,.55); }
  40%  { transform: scale(1.35);}
  60%  { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(239,68,68,0); }
  100% { transform: scale(1);   box-shadow: 0 1px 4px rgba(0,0,0,.25); }
}
/* Dark-mode tightening (sidebar is always dark, so this is for consistency) */
[data-theme="dark"] .sb-wa-badge { border-color: #091520; }
[data-theme="dark"] .wa-nav-icon { background: #25D366; opacity: 1 !important; }
[data-theme="dark"] .nav-item.active .wa-nav-icon { background: #0F8A6E; }

.sb-user { border-top: 1px solid rgba(255,255,255,0.07); padding: 12px 14px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.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: 40px; height: 40px; border-radius: 12px;
  background: var(--card2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; cursor: pointer; position: relative;
  color: var(--sub); transition: all .18s ease;
  flex-shrink: 0; outline: none; text-decoration: none;
}
.hdr-btn:hover {
  background: var(--accent-hover);
  border-color: rgba(37,99,235,.32);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37,99,235,.13);
}
.hdr-btn:active { transform: translateY(0) scale(.93); box-shadow: none; }
/* Active / open state — used when AI panel is open */
.hdr-btn.hdr-btn-active {
  background: var(--accent-hover);
  border-color: rgba(37,99,235,.4);
  color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.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; }

/* ── Shared loading-button states (works with bfRun in app.js) ── */
.btn-loading, .btn-done, .btn-failed { transition: background .2s ease, color .2s ease, opacity .2s ease; }
.btn-loading { opacity: .92; cursor: progress !important; pointer-events: none; transform: none !important; }
.btn-loading:hover { transform: none !important; }
.btn-done   { background: var(--green) !important; color: #fff !important; box-shadow: none !important; transform: none !important; }
.btn-failed { background: var(--red)   !important; color: #fff !important; box-shadow: none !important; transform: none !important; }
.btn:disabled { cursor: not-allowed; }
.btn .bf-spin {
  display: inline-block; width: 14px; height: 14px; flex: 0 0 auto;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: bf-spin .6s linear infinite;
  vertical-align: -2px; opacity: .9;
}
@keyframes bf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn .bf-spin { animation-duration: 1.4s; } }

/* ── Shared processing overlay (bfOverlay in app.js) ── */
.bf-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .2s ease; padding: 20px;
}
.bf-overlay.show { opacity: 1; }
.bf-overlay-card {
  background: var(--card, #fff); color: var(--text, #0f172a);
  border: 1px solid var(--border, #e5e7eb); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
  padding: 22px 26px; min-width: 280px; max-width: 380px; width: 100%;
  transform: translateY(8px) scale(.98); transition: transform .2s ease;
}
.bf-overlay.show .bf-overlay-card { transform: translateY(0) scale(1); }
.bf-overlay-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.bf-overlay-title .bf-spin { width: 16px; height: 16px; color: var(--accent, #2563eb); }
.bf-overlay-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.bf-overlay-steps li { display: flex; align-items: center; gap: 9px; font-size: 13px; transition: color .2s ease, opacity .2s ease; }
.bf-overlay-steps li .bf-step-ico { width: 18px; text-align: center; font-size: 13px; flex: 0 0 auto; }
.bf-overlay-steps li.pending { color: var(--muted, #94a3b8); opacity: .7; }
.bf-overlay-steps li.active  { color: var(--text, #0f172a); font-weight: 600; }
.bf-overlay-steps li.active .bf-step-ico { color: var(--accent, #2563eb); }
.bf-overlay-steps li.done    { color: var(--green, #16a34a); }
.bf-overlay-steps li.failed  { color: var(--red, #dc2626); font-weight: 600; }
@media (max-width: 480px) { .bf-overlay-card { min-width: 0; padding: 18px 20px; } }
.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-inline-start: 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-inline-start: 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; }

/* ── HEADER BADGE (unread count on chat / notif icons) ───── */
.hdr-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px;
  background: var(--red); color: #fff;
  font-size: 9.5px; font-weight: 800;
  border-radius: 9px; border: 2px solid var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; pointer-events: none;
  animation: hdr-badge-pop .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes hdr-badge-pop { from { transform: scale(0); } to { transform: scale(1); } }
.hdr-badge.pulse { animation: hdr-badge-pulse .35s ease; }
@keyframes hdr-badge-pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.4); }
}
/* ── AI label chip on AI button ───────────────────────────── */
.hdr-ai-label {
  position: absolute; bottom: -3px; right: -3px;
  background: linear-gradient(135deg, #1B4F72, #2980B9);
  color: #fff; font-size: 7px; font-weight: 800;
  padding: 1px 4px; border-radius: 5px;
  border: 1.5px solid var(--bg); line-height: 1.3;
  pointer-events: none; letter-spacing: .02em;
}
/* ── Header actions group ────────────────────────────────── */
.hdr-actions {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}

/* ── FLOATING CHAT BUBBLE — replaced by header icon ──────── */
/* Kept as display:none so no layout shift if any page still
   references it; removed from DOM via JS */
.chat-bubble { display: none !important; }
.chat-bubble-badge { display: none !important; }

/* ── CHAT INCOMING POPUP ────────────────────────────────── */
.chat-popup {
  position: fixed; top: 66px; right: 16px;
  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(-10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.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-inline-start: 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-inline-start-color: var(--accent); font-weight: 700; }
.inv-cat-count {
  margin-inline-start: 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"] .cs-item { text-align: right; }
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"] .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"] #toast-container { left: 24px; right: auto; }
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); border-color: rgba(37,99,235,.35); box-shadow: 0 4px 14px rgba(37,99,235,.18); }
[data-theme="dark"] .hdr-btn.hdr-btn-active { background: var(--accent-hover); border-color: rgba(37,99,235,.45); box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
[data-theme="dark"] .hdr-badge { border-color: #091520; }
[data-theme="dark"] .hdr-ai-label { border-color: #091520; }
[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;
    left: 0; top: 0; bottom: 0;   /* explicit instead of inset shorthand — iOS compat */
    width: 260px; z-index: 8000;
    height: 100vh; height: 100dvh; /* dvh = no URL-bar overflow on iPhone */
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
    box-shadow: var(--shadow-lg);
    overflow: hidden; /* sidebar itself doesn't scroll — nav inside does */
  }
  #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 on mobile */
  .hdr-lang, .hdr-theme { display: none; }
  /* Compact header action buttons on mobile */
  .hdr-btn { width: 36px; height: 36px; border-radius: 10px; }
  .hdr-actions { gap: 4px; }
}

/* ── 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-inline-start: 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; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 2.3 RESPONSIVE — Tasks, Aging, Dashboard, WA, Notifications,
   Automation, Settings Hub, Recording Player, Timeline
   ═══════════════════════════════════════════════════════════════════ */

/* ── Task widgets (tl-task-widget / tl-aging-*) ──────────────────── */
.tl-task-widget {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── Recording player (BFRecording) ─────────────────────────────── */
.rec-player {
  min-width: 0;
  max-width: 100%;
}

/* ── Automation settings form (tl-auto-*) ───────────────────────── */
.tl-auto-field label { word-break: break-word; }
.tl-auto-card { overflow: hidden; }

/* ── Sales performance dashboard charts ─────────────────────────── */
.bf-dash-chart { min-width: 0; overflow: hidden; }
.bf-chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Round-robin simulation table ───────────────────────────────── */
.rr-sim-table { min-width: 560px; }
.rr-sim-wrap  { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── WhatsApp tab inside lead/customer panel ─────────────────────── */
.dp-wa-section .nc-item { border-radius: 8px !important; }

/* ── Notification center items (nc-*) ───────────────────────────── */
.nc-item { touch-action: manipulation; }
.nc-actions { gap: 3px; }

/* ── Timeline entry ──────────────────────────────────────────────── */
.tl-entry { min-width: 0; }
.tl-entry-body { word-break: break-word; overflow-wrap: anywhere; }

/* ══════════════════════════════════════════════════════════════════
   768px — Primary mobile breakpoint for Phase 2.3 components
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Task / Aging dashboard widgets ───────────────────────────── */
  .tl-task-widget {
    padding: 10px 12px !important;
    min-height: 64px;
  }
  .w-value { font-size: 22px !important; }
  .w-label { font-size: 11px !important; }
  .w-cap   { font-size: 10px !important; }

  /* ── Automation settings panels ────────────────────────────────── */
  .tl-auto-card { padding: 14px !important; }
  .tl-auto-field {
    flex-direction: column !important;
    gap: 6px !important;
  }
  .tl-auto-field .tl-auto-field-ctrl { width: 100% !important; }
  .tl-auto-banner { flex-direction: column; gap: 8px; text-align: center; }
  .tl-auto-banner .ico { font-size: 28px; }

  /* ── Round-robin pool / simulation ─────────────────────────────── */
  .rr-pool-grid {
    grid-template-columns: 1fr !important;
  }
  .rr-candidate-card { padding: 10px 12px !important; }

  /* ── Missed-call dashboard widgets ─────────────────────────────── */
  .mc-dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .mc-widget-card { padding: 12px !important; }

  /* ── Sales performance charts ───────────────────────────────────── */
  .bf-chart-title { font-size: 12px !important; }
  .bf-exec-summary { flex-direction: column !important; gap: 8px !important; }
  .bf-exec-summary-item { min-width: 0 !important; }

  /* ── Notification center nav strip ─────────────────────────────── */
  .nc-nav { flex-wrap: wrap; gap: 4px; }
  .nc-nav-links { margin-left: 0 !important; width: 100%; }
  .nc-nav-link { font-size: 11px; padding: 3px 7px; }
  .nc-toolbar { gap: 4px !important; }
  .nc-toolbar select { font-size: 11px !important; height: 28px !important; }
  .nc-btn { height: 28px !important; font-size: 11px !important; padding: 0 9px !important; }

  /* ── Notification item actions always visible on touch ──────────── */
  .nc-actions { opacity: 1 !important; }
  .nc-item { padding: 12px 12px !important; }
  .nc-title { font-size: 12.5px !important; }
  .nc-msg   { font-size: 11.5px !important; }

  /* ── Lead detail panel – WhatsApp section ───────────────────────── */
  #dp-wa-content .wa-bubble { font-size: 11px !important; padding: 5px 8px !important; }
  #dp-wa-section .detail-section { padding: 12px 14px !important; }

  /* ── Timeline universal renderer ────────────────────────────────── */
  .tl-entry { gap: 8px !important; }
  .tl-icon-wrap { width: 28px !important; height: 28px !important; font-size: 12px !important; }
  .tl-entry-title { font-size: 12.5px !important; }
  .tl-entry-desc  { font-size: 11.5px !important; }
  .tl-entry-meta  { font-size: 10.5px !important; }
  .tl-filter-bar  { flex-wrap: wrap; gap: 6px !important; }
  .tl-filter-bar select,
  .tl-filter-bar input { width: 100% !important; }

  /* ── Task list compact ──────────────────────────────────────────── */
  .tl-task-card { padding: 10px 12px !important; }
  .tl-task-filter-bar { flex-wrap: wrap; gap: 6px !important; }
  .tl-task-filter-bar select,
  .tl-task-filter-bar input { flex: 1 1 140px !important; min-width: 0 !important; }
  .tl-task-badges { flex-wrap: wrap; gap: 4px; }

  /* ── Recording mini-player ──────────────────────────────────────── */
  .rec-player { flex-direction: column !important; gap: 6px !important; }
  .rec-controls { flex-wrap: wrap !important; gap: 4px !important; }

  /* ── Scheduled runner status panel ─────────────────────────────── */
  #sh-sched-status-body .grid,
  #sh-sched-status-body > div > div {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* ── Settings Hub – better mobile nav ──────────────────────────── */
  /* (sh-layout already collapses to column at 768px via inline CSS)  */
  /* Add: sticky search + favorites bar stays visible                  */
  .sh-search-wrap { position: sticky; top: 0; z-index: 10; background: var(--card); }
  .sh-fav-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; padding-bottom: 4px; }

  /* ── WhatsApp inbox – better mobile layout ──────────────────────── */
  /* (wa-root already stacks at 768px via inline CSS)                  */
  .wa-conv-item { padding: 8px 10px !important; }
  .wa-conv-avatar { width: 32px !important; height: 32px !important; font-size: 12px !important; }
  .wa-conv-name { font-size: 12px !important; }
  .wa-thread-title { font-size: 13px !important; }
  .wa-bubble { font-size: 13px !important; }
  .wa-compose-placeholder { font-size: 11px !important; padding: 8px 12px !important; }
  .wa-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wa-tab  { white-space: nowrap; padding: 7px 8px !important; font-size: 11.5px !important; }

  /* ── Leads detail WhatsApp tab ──────────────────────────────────── */
  .wa-window-bar { font-size: 11px !important; padding: 5px 12px !important; }

  /* ── Dashboard (index.html) WA widget ──────────────────────────── */
  #wa-widget-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════════
   480px — Small mobile Phase 2.3 refinements
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Task widgets: single column ────────────────────────────────── */
  #tasks-widget-grid,
  #aging-widget-grid,
  #wa-widget-grid { grid-template-columns: 1fr !important; }

  /* ── Task filter: full-width ────────────────────────────────────── */
  .tl-task-filter-bar select,
  .tl-task-filter-bar input { width: 100% !important; flex: 1 1 100% !important; }

  /* ── Notification center: compact items ─────────────────────────── */
  .nc-item { padding: 10px 10px !important; gap: 8px !important; }
  .nc-icon { width: 30px !important; height: 30px !important; font-size: 14px !important; }
  .nc-stats-strip { font-size: 10px !important; }
  .nc-stat strong { font-size: 13px !important; }

  /* ── WA inbox: tighter mobile ───────────────────────────────────── */
  .wa-sidebar { max-height: 40vh !important; }
  .wa-conv-list { max-height: calc(40vh - 80px); }
  .wa-thread  { min-height: 55vh !important; }
  .wa-bubble  { font-size: 12.5px !important; padding: 6px 9px !important; }
  .wa-msg     { max-width: 85% !important; }
  .wa-messages { padding: 10px !important; gap: 1px !important; }

  /* ── Automation settings: single-column fields ──────────────────── */
  .tl-auto-card { padding: 12px !important; }

  /* ── Settings Hub: nav groups collapse-all by default ───────────── */
  .sh-content-inner { padding: 12px !important; }

  /* ── Sales dashboard: charts full-width ─────────────────────────── */
  .bf-dash-chart { height: 180px !important; }

  /* ── Scheduled runner: single-column status ─────────────────────── */
  #sh-sched-status-body .grid,
  #sh-sched-status-body > div > div {
    grid-template-columns: 1fr !important;
  }

  /* ── Quick task form ────────────────────────────────────────────── */
  .tl-quick-form { padding: 10px !important; }
  .tl-quick-form input,
  .tl-quick-form select,
  .tl-quick-form textarea { font-size: 14px !important; }  /* prevent iOS zoom */

  /* ── Lead aging badge ───────────────────────────────────────────── */
  .tl-aging-badge { flex-wrap: wrap !important; gap: 4px !important; }

  /* ── WhatsApp settings section ──────────────────────────────────── */
  #sh-wa-root { gap: 10px !important; }
  #sh-wa-form { grid-template-columns: 1fr !important; gap: 10px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 2.3 — TASKS PAGE (tasks.html) RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
.tl-task-fab {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 500;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 26px;
  border: none;
  box-shadow: 0 4px 16px rgba(37,99,235,.40);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: transform .15s, box-shadow .15s;
}
.tl-task-fab:active { transform: scale(.93); }
.tl-task-fab.show { display: flex; }

@media (max-width: 768px) {
  .tl-task-fab { display: flex; }
  .tl-task-newbtn { display: none !important; } /* FAB replaces header button on mobile */
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 2.3 — WHATSAPP PAGE (whatsapp.html) RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Nav strip wraps properly */
  .nc-nav { gap: 3px; padding: 6px 8px; }
  .nc-nav-btn { font-size: 11px !important; padding: 3px 8px !important; height: auto !important; }
  .nc-nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .nc-nav-link  { font-size: 10.5px; padding: 3px 6px; }

  /* WA inbox: single panel mode on small phones */
  .wa-sidebar-head { padding: 8px 10px !important; }
  .wa-search { height: 28px !important; font-size: 11.5px !important; }
  .wa-unread-badge { font-size: 9px; padding: 0 4px; min-width: 14px; top: 8px; right: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 2.3 — SETTINGS HUB (settings.html) ENHANCED MOBILE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Save bar: stack buttons */
  .sh-save-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 14px !important;
  }
  .sh-save-bar .btn { flex: 1 1 140px !important; min-width: 0 !important; }

  /* Breadcrumb: truncate long labels */
  .sh-bc-item.active { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* WhatsApp config form grid: single column */
  #sh-wa-form { grid-template-columns: 1fr !important; }

  /* Automation settings: full-width fields */
  .tl-auto-field > :last-child { max-width: 100% !important; width: 100% !important; }

  /* Notification triggers: compact */
  #sh-notif-auto-container .tl-auto-field { padding: 6px 0 !important; }
}

@media (max-width: 480px) {
  .sh-save-bar .btn { width: 100% !important; }
  .sh-save-bar #save-status { width: 100%; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 2.3 — DASHBOARD (dashboard.html) RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Sales funnel / bar charts */
  .bf-funnel-bar   { min-height: 16px !important; }
  .bf-funnel-label { font-size: 10px !important; }

  /* Leader board: 2-column on mobile */
  .bf-leaderboard-grid { grid-template-columns: 1fr 1fr !important; }

  /* Exec summary bullets */
  .bf-exec-bullets { columns: 1 !important; }
}

@media (max-width: 480px) {
  /* Charts: reduce height to fit viewport */
  canvas.bf-bar-chart    { max-height: 180px !important; }
  canvas.bf-donut-chart  { max-height: 160px !important; }
  canvas.bf-funnel-chart { max-height: 200px !important; }

  /* Single-column leader board */
  .bf-leaderboard-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL POLISH — Small-screen fixes found in audit
   ═══════════════════════════════════════════════════════════════════ */

/* Kanban: let the board scroll but keep columns readable */
@media (max-width: 768px) {
  .kanban-board {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
  }
  .kanban-col {
    flex: 0 0 260px !important;
    scroll-snap-align: start;
    max-height: calc(100vh - 180px);
  }
}

/* PBX call logs table: tighter on tablets */
@media (max-width: 1024px) {
  .calls-table .col-recording { display: none; }
}
@media (max-width: 768px) {
  .calls-table .col-ext,
  .calls-table .col-dir { display: none; }
}

/* Speakers table: hide non-critical columns */
@media (max-width: 768px) {
  .spk-table .col-secondary,
  .spk-table .col-activity { display: none; }
}

/* HR attendance: horizontal scroll with shadow indicators */
@media (max-width: 768px) {
  .hr-att-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--card), var(--card)) left  / 20px 100% no-repeat local,
      linear-gradient(to right, rgba(0,0,0,.06), transparent)    left  / 8px  100% no-repeat scroll,
      linear-gradient(to left,  var(--card), var(--card)) right / 20px 100% no-repeat local,
      linear-gradient(to left,  rgba(0,0,0,.06), transparent)    right / 8px  100% no-repeat scroll;
  }
}

/* Floorplan canvas: pinch-zoom support */
@media (max-width: 768px) {
  #fp-canvas-wrap {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
  }
}

/* Chat: input stays at bottom with iOS safe area */
@media (max-width: 768px) {
  .chat-input-area,
  .chat-composer {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    position: sticky;
    bottom: 0;
    background: var(--card);
    z-index: 10;
  }
}

/* Inventory grid: 2-col on tablet, 1-col on mobile */
@media (max-width: 768px) {
  .inv-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
}
@media (max-width: 480px) {
  .inv-grid { grid-template-columns: 1fr !important; }
}

/* Print: hide sidebar on print */
@media print {
  #sidebar, #header, .sh-save-bar, .tl-task-fab { display: none !important; }
  #main { margin-left: 0 !important; }
  .page-inner { padding: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   WCAG DARK MODE — Global form-element contrast fix
   Root cause: existing rules only targeted .field-select / .field-input
   classes. Bare <select>/<input> elements (e.g. bug-report modal, task
   filters, automation dropdowns) were missed → invisible text in dark mode
   because they inherited white/light text while keeping background:white.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. color-scheme: tell the browser which palette to use for native controls.
      This is the most effective fix for iOS Safari which partially ignores
      color CSS on <option> elements. */
input, select, textarea, button {
  color-scheme: light;            /* default: light */
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  color-scheme: dark;             /* in dark mode: system renders controls dark */
}

/* 2. Global bare <select> in dark mode — covers every unclassed select */
[data-theme="dark"] select {
  background-color: var(--card2);
  color: var(--text);
  border-color: var(--border);
}

/* 3. <select> options & optgroups in dark mode */
[data-theme="dark"] select option,
[data-theme="dark"] select optgroup {
  background-color: #162030;      /* matches existing modal-box dark bg */
  color: var(--text);
}

/* 4. Override hardcoded background:white on selects in dark mode.
      These are inline-styled elements in JS-generated HTML (e.g. bug modal). */
[data-theme="dark"] select[style*="background:white"],
[data-theme="dark"] select[style*="background: white"],
[data-theme="dark"] select[style*="background:#fff"],
[data-theme="dark"] select[style*="background: #fff"] {
  background-color: var(--card2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* 5. Override hardcoded background:white on inputs in dark mode */
[data-theme="dark"] input[style*="background:white"],
[data-theme="dark"] input[style*="background: white"],
[data-theme="dark"] input[style*="background:#fff"],
[data-theme="dark"] textarea[style*="background:white"],
[data-theme="dark"] textarea[style*="background: white"] {
  background-color: var(--card2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* 6. Task filter selects (app.js tl-task-filter-bar — no class) */
[data-theme="dark"] .tl-task-filter-bar select,
[data-theme="dark"] .tl-quick-form select,
[data-theme="dark"] .tl-auto-field select,
[data-theme="dark"] .wa-toolbar select,
[data-theme="dark"] .nc-toolbar select,
[data-theme="dark"] .nc-filters select {
  background-color: var(--card2);
  color: var(--text);
  border-color: var(--border);
}

/* 7. Automation settings dropdowns (tl-auto-* components) */
[data-theme="dark"] select.tl-range,
[data-theme="dark"] #tl-auto-form select {
  background-color: var(--card2);
  color: var(--text);
  border-color: var(--border);
}

/* 8. Placeholder text contrast in dark mode */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--muted);
  opacity: 1;                     /* Firefox reduces opacity by default */
}

/* 9. Focus ring in dark mode — ensure visible outline */
[data-theme="dark"] select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ─── Bug Report Modal — light-mode island inside dark-mode page ─── */
/* The modal uses hardcoded background:white; force light rendering     */
#bug-report-modal > div {
  color-scheme: light;            /* force light on the modal container */
  color: #0F172A;                 /* explicit dark text baseline */
}
#bug-report-modal input,
#bug-report-modal select,
#bug-report-modal textarea {
  color-scheme: light;
  color: #374151 !important;      /* always dark text — modal is always white bg */
  background-color: white !important;
}
/* Override the global dark-mode option rule — modal dropdown list must be light */
#bug-report-modal select option,
#bug-report-modal select optgroup {
  background-color: white !important;
  color: #374151 !important;
}



/* ═══════════════════════════════════════════════════════════════════
   Phase 12E.1 — WhatsApp 360° panel (Leads/Customers) — AA contrast,
   explicit light + dark colors. No opacity-based text fading.
   ═══════════════════════════════════════════════════════════════════ */
.wa360 {
  border: 1px solid #BBF7D0;
  background: linear-gradient(180deg, #F0FDF4, var(--card));
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 18px;            /* breathing room before Activity Timeline */
}
.wa360-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,.07);   /* section separator under header */
}
.wa360-logo { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #25D366; color: #fff; flex-shrink: 0; }
.wa360-title { font-size: 14.5px; font-weight: 800; color: #15803D; }
.wa360-badges { margin-inline-start: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.wa360-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; line-height: 1.3; border: 1px solid transparent; }
.wa360-badge--active     { background: #DCFCE7; color: #14532D; }
.wa360-badge--closed     { background: #E2E8F0; color: #334155; }
.wa360-badge--assigned   { background: #DBEAFE; color: #1E3A8A; }
.wa360-badge--unassigned { background: #FEF3C7; color: #854D0E; }
.wa360-badge--slaok      { background: #DCFCE7; color: #14532D; }
.wa360-badge--slabad     { background: #FEE2E2; color: #991B1B; }
.wa360-badge--unread     { background: #FEE2E2; color: #991B1B; }

/* Info grid rows — consistent two-column layout, generous spacing */
.wa360-row {
  display: flex; align-items: baseline; gap: 16px;
  padding: 8px 0; font-size: 12.5px;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.wa360-row:last-of-type { border-bottom: none; }
.wa360-label { color: #64748B; font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; flex: 0 0 116px; max-width: 116px; line-height: 1.5; }
.wa360-val   { color: #0F172A; font-weight: 700; font-size: 13px; text-align: right; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; }

/* Action buttons — separated from the info grid */
.wa360-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.07);
}
.wa360-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 8px; cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: filter .12s, background .12s; line-height: 1.2; }
.wa360-btn:hover { filter: brightness(.95); }
.wa360-btn--wa    { background: #25D366; color: #FFFFFF; border-color: #1EA952; }
.wa360-btn--quote { background: #0369A1; color: #FFFFFF; border-color: #075985; }
.wa360-btn--won   { background: #059669; color: #FFFFFF; border-color: #047857; }
.wa360-btn--lost  { background: #DC2626; color: #FFFFFF; border-color: #B91C1C; }

/* Preview — distinct sub-card with its own breathing room */
.wa360-preview-wrap {
  margin-top: 18px; padding: 12px 14px;
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
}
.wa360-preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wa360-sublabel { font-size: 11.5px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: .06em; }
.wa360-openfull { font-size: 11.5px; color: #128C7E; font-weight: 800; text-decoration: none; }
.wa360-openfull:hover { text-decoration: underline; }
.wa360-preview { display: flex; flex-direction: column; gap: 12px; max-height: 300px; overflow-y: auto; padding: 2px 2px; }
.wa360-preview-loading { text-align: center; color: #64748B; font-size: 12px; padding: 14px; }
/* Fade-in when the preview loads (subtle, <200ms, staggered slightly) */
.wa360-msg { max-width: 82%; animation: wa360FadeIn .18s ease both; }
@keyframes wa360FadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .wa360-msg { animation: none; } }
.wa360-msg--in  { align-self: flex-start; }
.wa360-msg--out { align-self: flex-end; }
.wa360-bubble {
  border-radius: 12px; padding: 9px 13px; border: 1px solid transparent;
  transition: box-shadow .15s ease, transform .15s ease, filter .15s ease;
}
.wa360-bubble:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); transform: translateY(-1px); }
/* Customer (incoming) = blue/gray bubble */
.wa360-msg--in  .wa360-bubble { background: #EEF2F8; border-color: #D5DEEA; border-bottom-left-radius: 4px; }
/* Agent (outgoing) = WhatsApp green, slightly stronger contrast */
.wa360-msg--out .wa360-bubble { background: #C8EFA5; border-color: #A7DD7C; border-bottom-right-radius: 4px; }
.wa360-bubble-text {
  font-size: 13px; white-space: pre-wrap; word-break: break-word;
  color: #0F172A; line-height: 1.55;
  unicode-bidi: plaintext;     /* auto LTR/RTL per message — Arabic + mixed render correctly */
}
.wa360-mediatag { font-size: 12px; color: #0F172A; font-weight: 600; }
.wa360-thumb { max-width: 130px; max-height: 130px; border-radius: 8px; display: block; cursor: pointer; }
.wa360-thumb--sticker { max-width: 96px; max-height: 96px; background: transparent; }
.wa360-meta { font-size: 11.5px; font-weight: 600; color: #64748B; margin-top: 5px; transition: opacity .15s ease; }
.wa360-msg--out .wa360-meta { text-align: right; }
/* Timestamps: hover-only on desktop (pointer:fine), always visible on touch/mobile */
@media (hover: hover) and (pointer: fine) {
  .wa360-meta { opacity: 0; }
  .wa360-msg:hover .wa360-meta { opacity: 1; }
}

/* ── DARK MODE — explicit high-contrast colors (no opacity fading) ── */
[data-theme="dark"] .wa360 {
  border: 1px solid rgba(37,211,102,.28);
  background: #0F172A;
}
[data-theme="dark"] .wa360-title { color: #4ADE80; }
[data-theme="dark"] .wa360-row   { border-bottom-color: rgba(255,255,255,.06); }
[data-theme="dark"] .wa360-label { color: #94A3B8; }
[data-theme="dark"] .wa360-val   { color: #FFFFFF; }
[data-theme="dark"] .wa360-sublabel { color: #94A3B8; }
[data-theme="dark"] .wa360-openfull { color: #4ADE80; }
[data-theme="dark"] .wa360-preview-loading { color: #94A3B8; }
[data-theme="dark"] .wa360-meta  { color: #94A3B8; }
[data-theme="dark"] .wa360-bubble-text { color: #FFFFFF; }
[data-theme="dark"] .wa360-mediatag    { color: #E2E8F0; }
/* Customer (incoming) — dark blue/gray bubble, white text */
[data-theme="dark"] .wa360-msg--in  .wa360-bubble { background: #1E293B; border-color: rgba(148,163,184,.22); }
/* Agent (outgoing) — WhatsApp green (stronger), light text */
[data-theme="dark"] .wa360-msg--out .wa360-bubble { background: #1F5C3C; border-color: rgba(74,222,128,.35); }
[data-theme="dark"] .wa360-bubble:hover { box-shadow: 0 2px 10px rgba(0,0,0,.45); }
[data-theme="dark"] .wa360-msg--out .wa360-bubble-text { color: #E2FDE8; }
[data-theme="dark"] .wa360-msg--out .wa360-mediatag    { color: #E2FDE8; }
/* Badges — dark variants with AA contrast */
[data-theme="dark"] .wa360-badge--active     { background: rgba(34,197,94,.18); color: #4ADE80; }
[data-theme="dark"] .wa360-badge--closed     { background: rgba(148,163,184,.18); color: #CBD5E1; }
[data-theme="dark"] .wa360-badge--assigned   { background: rgba(59,130,246,.20); color: #93C5FD; }
[data-theme="dark"] .wa360-badge--unassigned { background: rgba(217,119,6,.20); color: #FCD34D; }
[data-theme="dark"] .wa360-badge--slaok      { background: rgba(34,197,94,.18); color: #4ADE80; }
[data-theme="dark"] .wa360-badge--slabad     { background: rgba(220,38,38,.20); color: #FCA5A5; }
[data-theme="dark"] .wa360-badge--unread     { background: rgba(220,38,38,.20); color: #FCA5A5; }
/* Dark-mode separators + preview sub-card (match new spacing) */
[data-theme="dark"] .wa360-head    { border-bottom-color: rgba(255,255,255,.09); }
[data-theme="dark"] .wa360-row     { border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .wa360-actions { border-top-color: rgba(255,255,255,.09); }
[data-theme="dark"] .wa360-preview-wrap { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }

/* ── Mobile spacing — comfortable but compact (no excess height) ── */
@media (max-width: 480px) {
  .wa360 { padding: 14px 14px; margin-bottom: 14px; }
  .wa360-row { padding: 7px 0; gap: 12px; }
  .wa360-label { flex-basis: 96px; max-width: 96px; }
  .wa360-preview-wrap { padding: 10px 11px; margin-top: 14px; }
  .wa360-preview { gap: 8px; max-height: 260px; }
  .wa360-msg { max-width: 88%; }
  .wa360-btn { padding: 8px 12px; }   /* keep ≥36px touch target */
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE UX-1A — ENTERPRISE DESIGN SYSTEM  (appended → overrides base above)
   Foundation layer: design tokens, refined dark palette, premium components.
   Token/class based — no markup changes required; lifts every page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · DESIGN TOKENS — 4px spacing, radii, elevation, brand ─────────────── */
:root{
  /* 4px spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  /* radii */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:9999px;
  --radius:12px;
  /* premium elevation (light) */
  --e1:0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.04);
  --e2:0 2px 8px -2px rgba(15,23,42,.08), 0 6px 18px -6px rgba(15,23,42,.06);
  --e3:0 10px 26px -10px rgba(15,23,42,.14), 0 6px 14px -8px rgba(15,23,42,.10);
  --e4:0 28px 60px -18px rgba(15,23,42,.22), 0 14px 30px -12px rgba(15,23,42,.14);
  --shadow:var(--e2); --shadow-sm:var(--e1); --shadow-lg:var(--e4);
  /* premium indigo brand (matches reference) */
  --accent:#4F46E5; --accent-dark:#4338CA;
  --accent-hover:rgba(79,70,229,.07); --accent-glow:rgba(79,70,229,.16);
  --brand:#4F46E5; --brand-2:#6366F1;
  --ring:0 0 0 3px rgba(99,102,241,.20);
  /* refined sidebar (always dark) */
  --sidebar-bg:#0E1626; --sidebar-hover:rgba(255,255,255,.06);
  --sidebar-active:rgba(99,102,241,.20); --sidebar-text:rgba(226,232,240,.74);
  --sidebar-active-text:#ffffff;
}

/* ── 2 · DARK MODE REBUILD — enterprise palette (no pure black) ───────────── */
[data-theme="dark"]{
  --bg:#0B1220;            /* deep slate page bg */
  --card:#111827;          /* card surface */
  --card2:#172033;         /* elevated cell / input / table head */
  --border:#1F2937;        /* default border */
  --border2:#161F2E;       /* subtle divider */
  --text:#E5EAF2;          /* primary text */
  --sub:#9AA7BD;           /* secondary */
  --muted:#5C6B85;         /* tertiary / placeholder */
  --nav:#7E8DA6;
  --accent:#6366F1;        /* readable indigo on dark */
  --accent-dark:#4F46E5;
  --accent-hover:rgba(99,102,241,.14);
  --accent-glow:rgba(99,102,241,.30);
  --green:#10B981; --amber:#F59E0B; --red:#EF4444; --blue:#6366F1; --cyan:#22D3EE;
  --sidebar-bg:#0D1424; --sidebar-hover:rgba(255,255,255,.05);
  --sidebar-active:rgba(99,102,241,.22);
  /* dark elevation (deeper, soft) */
  --e1:0 1px 2px rgba(0,0,0,.36);
  --e2:0 4px 14px -4px rgba(0,0,0,.42), 0 1px 2px rgba(0,0,0,.4);
  --e3:0 12px 30px -12px rgba(0,0,0,.55);
  --e4:0 30px 64px -20px rgba(0,0,0,.68);
  --shadow:var(--e2); --shadow-sm:var(--e1); --shadow-lg:var(--e4);
  --ring:0 0 0 3px rgba(99,102,241,.30);
}

/* ── 3 · TYPOGRAPHY — Inter hierarchy ─────────────────────────────────────── */
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4,.page-hdr h1,.card-toolbar-title,.section-header h3,.modal-header h3{
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif; letter-spacing:-0.02em; font-weight:700;
}
.page-hdr h1{ font-size:22px; line-height:1.2; }
.page-hdr p{ color:var(--sub); font-size:13.5px; }

/* ── 4 · APP SHELL — sidebar & topbar polish ──────────────────────────────── */
#sidebar{ background:var(--sidebar-bg); box-shadow:inset -1px 0 0 rgba(255,255,255,.04); }
.nav-item{
  margin:1px 10px; padding:8px 11px; border-radius:var(--r-sm);
  font-size:13.5px; font-weight:500; gap:11px; position:relative;
  transition:background .14s ease, color .14s ease;
}
.nav-item .icon{ width:20px; text-align:center; font-size:15px; opacity:.92; }
.nav-item:hover{ background:var(--sidebar-hover); color:#fff; }
.nav-item.active{ background:var(--sidebar-active); color:#fff; font-weight:600; }
.nav-item.active::before{
  content:''; position:absolute; left:-10px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:0 3px 3px 0; background:var(--brand-2);
}
.nav-section-label{ font-size:10px; letter-spacing:.09em; opacity:.42; padding:14px 20px 5px; }
.sb-logo-name{ letter-spacing:-.3px; }

#header{
  height:60px; background:var(--card); border-bottom:1px solid var(--border);
  box-shadow:var(--e1); backdrop-filter:saturate(1.2);
  /* backdrop-filter creates a stacking context; without an explicit z-index the header
     (and every dropdown inside it — user menu, notifications, search) paints BELOW
     later positioned page content (e.g. .stat-card). Keep below modals (9000+),
     drawers (8000+) and chat overlays (7999). */
  position:relative; z-index:300;
}
.breadcrumb .current{ font-weight:700; letter-spacing:-.01em; }
.hdr-btn{
  width:40px; height:40px; border-radius:var(--r-sm);
  background:var(--card2); border:1px solid var(--border); color:var(--sub);
  transition:transform .14s ease, box-shadow .16s ease, background .16s, color .16s;
}
.hdr-btn:hover{ background:var(--accent-hover); border-color:var(--accent); color:var(--accent); transform:translateY(-1px); box-shadow:var(--e2); }
.theme-toggle,.lang-toggle{ border-radius:var(--r-sm); border:1px solid var(--border); background:var(--card2); }
.hdr-user{ border-radius:var(--r-pill); border:1px solid var(--border); background:var(--card2); }

/* Global quick-search (added to header by app.js; styled here) */
.hdr-search{ position:relative; flex:0 1 320px; margin-left:4px; }
.hdr-search input{
  width:100%; height:38px; padding:0 12px 0 34px; border-radius:var(--r-sm);
  border:1px solid var(--border); background:var(--card2); color:var(--text);
  font-size:13px; font-family:inherit; outline:none; transition:border-color .16s, box-shadow .16s;
}
.hdr-search input:focus{ border-color:var(--accent); box-shadow:var(--ring); }
.hdr-search .ic{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:13px; pointer-events:none; }
.hdr-search kbd{ position:absolute; right:9px; top:50%; transform:translateY(-50%); font:600 10px/1 'Inter',monospace;
  color:var(--muted); background:var(--card); border:1px solid var(--border); border-radius:5px; padding:3px 5px; }
.hdr-search-pop{
  position:absolute; top:46px; left:0; right:0; z-index:60; max-height:340px; overflow:auto;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--e4); padding:6px; display:none;
}
.hdr-search-pop.show{ display:block; }
.hdr-search-item{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r-sm); cursor:pointer; font-size:13px; color:var(--text); }
.hdr-search-item:hover,.hdr-search-item.sel{ background:var(--accent-hover); color:var(--accent); }
.hdr-search-item .k{ font-size:15px; width:20px; text-align:center; }
.hdr-search-empty{ padding:14px; text-align:center; color:var(--muted); font-size:12.5px; }
@media (max-width:900px){ .hdr-search{ display:none; } }

/* ── 5 · BUTTONS — primary / secondary / success / warning / danger ───────── */
.btn{ border-radius:var(--r-sm); font-weight:600; letter-spacing:-.01em;
  transition:transform .13s ease, box-shadow .17s ease, background .17s ease, border-color .17s; }
.btn:active{ transform:translateY(0) scale(.98); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(79,70,229,.30); }
.btn-primary:hover{ background:var(--accent-dark); transform:translateY(-1px); box-shadow:0 8px 20px -6px rgba(99,102,241,.45); }
.btn-secondary{ background:var(--card2); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover{ background:var(--accent-hover); border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }
.btn-success{ background:var(--green); color:#fff; box-shadow:0 1px 2px rgba(16,185,129,.30); }
.btn-success:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 8px 20px -6px rgba(16,185,129,.4); }
.btn-warning{ background:var(--amber); color:#fff; }
.btn-warning:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 8px 20px -6px rgba(245,158,11,.4); }
.btn-danger{ background:var(--red); color:#fff; }
.btn-danger:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 8px 20px -6px rgba(239,68,68,.4); }
.btn-outline{ background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-hover); }

/* ── 6 · INPUTS — modern SaaS ─────────────────────────────────────────────── */
.field-input,.field-select,.field-textarea,input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{
  border-radius:var(--r-sm);
}
.field-input:focus,.field-select:focus,.field-textarea:focus{ border-color:var(--accent); box-shadow:var(--ring); }
.field-label{ letter-spacing:.01em; }

/* ── 7 · CARDS — premium surfaces ─────────────────────────────────────────── */
.card,.list-card{ border-radius:var(--r-md); box-shadow:var(--e2); border:1px solid var(--border); }
.detail-section{ border-radius:var(--r-md); }
.section-header{ margin-bottom:14px; }

/* ── 8 · KPI / STAT CARDS — executive dashboard ───────────────────────────── */
.kpi-card{
  position:relative; border-radius:var(--r-md); padding:18px 18px 16px;
  border:1px solid var(--border); background:var(--card); box-shadow:var(--e2);
  overflow:hidden; transition:transform .16s ease, box-shadow .18s ease, border-color .16s;
}
.kpi-card::after{ content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2)); opacity:.85; }
.kpi-card:hover{ transform:translateY(-3px); box-shadow:var(--e3); border-color:rgba(99,102,241,.4); }
.tl-task-widget{
  border-radius:var(--r-md); border:1px solid var(--border); background:var(--card);
  box-shadow:var(--e2); padding:16px 18px; transition:transform .16s ease, box-shadow .18s ease, border-color .16s;
}
.tl-task-widget:hover{ transform:translateY(-2px); box-shadow:var(--e3); border-color:rgba(99,102,241,.3); }
/* KPI trend pill + sparkline (design-system components, used where real data exists) */
.kpi-trend{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700;
  padding:2px 8px; border-radius:var(--r-pill); }
.kpi-trend.up{ color:var(--green); background:rgba(16,185,129,.12); }
.kpi-trend.down{ color:var(--red); background:rgba(239,68,68,.12); }
.kpi-trend.flat{ color:var(--muted); background:var(--card2); }
.kpi-spark{ display:block; width:100%; height:34px; margin-top:8px; }
.kpi-foot{ font-size:11px; color:var(--muted); margin-top:8px; display:flex; align-items:center; gap:5px; }

/* ── 9 · TABLES — sticky head, hover, spacing ─────────────────────────────── */
.table-wrap{ border:1px solid var(--border); border-radius:var(--r-md); overflow:auto; box-shadow:var(--e1); }
.data-table th{ background:var(--card2); position:sticky; top:0; z-index:2;
  font-size:11px; letter-spacing:.06em; }
.data-table td{ padding:13px 14px; }
.data-table tbody tr{ transition:background .12s ease; }
.data-table tbody tr:hover td{ background:var(--accent-hover); }

/* ── 10 · BADGES — status / priority / pipeline ───────────────────────────── */
.badge{ font-weight:600; letter-spacing:.01em; padding:3px 10px; }
.badge .dot,.lead-status-dot{ width:6px; height:6px; border-radius:50%; box-shadow:0 0 0 3px rgba(0,0,0,.04); }
.list-tab.active{ color:var(--accent); }
.stat-mini{ border-radius:var(--r-md); border:1px solid var(--border); box-shadow:var(--e1); transition:transform .14s, box-shadow .16s, border-color .14s; }
.stat-mini:hover{ transform:translateY(-2px); box-shadow:var(--e2); border-color:rgba(99,102,241,.32); }
.stat-mini.active{ border-color:var(--accent); box-shadow:var(--ring); }

/* ── 11 · COMPONENT LIBRARY — empty / skeleton / drawer / modal ───────────── */
.ds-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:48px 24px; color:var(--muted); }
.ds-empty .ic{ width:60px; height:60px; border-radius:var(--r-lg); display:grid; place-items:center;
  font-size:28px; background:var(--card2); border:1px solid var(--border); margin-bottom:14px; }
.ds-empty h4{ font-size:15px; color:var(--text); margin-bottom:4px; }
.ds-empty p{ font-size:13px; max-width:340px; }
.ds-skel{ position:relative; overflow:hidden; background:var(--card2); border-radius:var(--r-sm); }
.ds-skel::after{ content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); animation:dsShimmer 1.3s infinite; }
@keyframes dsShimmer{ 100%{ transform:translateX(100%); } }
.ds-skel-line{ height:12px; margin:8px 0; }
.ds-drawer{ position:fixed; top:0; right:0; height:100vh; height:100dvh; width:480px; max-width:96vw;
  background:var(--card); border-left:1px solid var(--border); box-shadow:var(--e4); z-index:9100;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.22,1,.36,1); display:flex; flex-direction:column; }
.ds-drawer.open{ transform:translateX(0); }
.ds-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.ds-drawer-body{ flex:1; overflow:auto; padding:20px; }
.modal-box{ border-radius:var(--r-lg); box-shadow:var(--e4); }
.modal-header h3{ letter-spacing:-.01em; }

/* ── 12 · MICRO-INTERACTIONS / SCROLLBARS ─────────────────────────────────── */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--border); border-radius:var(--r-pill); border:2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover{ background:var(--muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE UX-1A · STAGE 2 — DEPTH, PREMIUM SIDEBAR, EXECUTIVE TABLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dark contrast / readability bump ─────────────────────────────────────── */
[data-theme="dark"]{
  --text:#EAF0F8; --sub:#A9B6CC; --muted:#6B7B96; --border:#243044; --border2:#1A2536;
  --card2:#19243A;
}

/* ── Sidebar · SVG line icons ──────────────────────────────────────────────── */
.nav-item .icon{ width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.nav-svg{ width:19px; height:19px; opacity:.78; transition:opacity .15s, transform .15s; }
.nav-item:hover .nav-svg{ opacity:1; }
.nav-item.active .nav-svg{ opacity:1; color:#fff; }
.nav-emoji{ font-size:15px; line-height:1; }
.nav-label{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-item.active{ box-shadow:inset 0 0 0 1px rgba(99,102,241,.25); }

/* ── Sidebar · logo row + collapse button ──────────────────────────────────── */
.sb-logo{ display:flex; align-items:center; gap:10px; position:relative; }
.sb-logo-txt{ flex:1; min-width:0; }
.sb-collapse{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex-shrink:0;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.65); cursor:pointer; transition:all .15s; }
.sb-collapse:hover{ background:rgba(255,255,255,.12); color:#fff; }
.sb-collapse svg{ width:15px; height:15px; transition:transform .26s cubic-bezier(.4,0,.2,1); }

/* ── Sidebar · smooth collapse ─────────────────────────────────────────────── */
#sidebar{ transition:width .24s cubic-bezier(.4,0,.2,1); }
body.sidebar-collapsed #sidebar{ width:76px; }
body.sidebar-collapsed .sb-logo-txt,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-section-label,
body.sidebar-collapsed .sb-role-wrap,
body.sidebar-collapsed .sb-online-section,
body.sidebar-collapsed .sb-user > div:not(.sb-user-avatar),
body.sidebar-collapsed .sb-user button,
body.sidebar-collapsed .nav-badge,
body.sidebar-collapsed #chat-nav-badge,
body.sidebar-collapsed .sb-wa-badge{ display:none !important; }
body.sidebar-collapsed .sb-logo{ justify-content:center; }
body.sidebar-collapsed .sb-collapse{ position:absolute; right:-4px; top:-4px; }
body.sidebar-collapsed .sb-collapse svg{ transform:rotate(180deg); }
body.sidebar-collapsed .nav-item{ justify-content:center; padding:11px 0; margin:2px 14px; }
body.sidebar-collapsed .nav-item.active::before{ left:-14px; }
body.sidebar-collapsed .sb-user{ justify-content:center; }
/* collapsed → hover tooltip */
body.sidebar-collapsed .nav-item:hover::after{
  content:attr(data-tip); position:absolute; left:64px; top:50%; transform:translateY(-50%);
  background:var(--card); color:var(--text); border:1px solid var(--border); padding:6px 11px;
  border-radius:8px; font-size:12px; font-weight:600; white-space:nowrap; box-shadow:var(--e3); z-index:60; pointer-events:none; }

/* ── Depth & premium surfaces (dark) ───────────────────────────────────────── */
[data-theme="dark"] .card,
[data-theme="dark"] .list-card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .tl-task-widget,
[data-theme="dark"] .stat-mini,
[data-theme="dark"] .modal-box{
  background-image:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 42%);
  box-shadow:var(--e2), inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="dark"] .kpi-card:hover,
[data-theme="dark"] .tl-task-widget:hover{ box-shadow:var(--e3), inset 0 1px 0 rgba(255,255,255,.06); }

/* ── Whitespace & larger KPIs ──────────────────────────────────────────────── */
.page-inner{ padding:28px 30px; max-width:1560px; }
.kpi-grid-7,.kpi-grid-6,.kpi-grid-5,.kpi-grid-4,.kpi-grid-3,.kpi-grid,.tl-dash-kpi-grid{ gap:16px !important; }
.kpi-card{ padding:22px 22px 18px; min-height:120px; }
.tl-task-widget{ padding:18px 20px; }
.section-header,.tl-dash-section,.dash-section-title{ margin-top:8px; }

/* ── Executive tables (HubSpot / Salesforce) ───────────────────────────────── */
.table-wrap{ border-radius:var(--r-lg); }
.data-table th{ padding:13px 16px; font-size:11px; color:var(--muted); font-weight:700;
  background:var(--card2); border-bottom:1px solid var(--border); }
.data-table td{ padding:15px 16px; font-size:13.5px; vertical-align:middle; }
.data-table tbody tr{ transition:background .12s ease, box-shadow .12s ease; }
.data-table tbody tr td:first-child{ box-shadow:inset 2px 0 0 transparent; }
.data-table tbody tr:hover td{ background:var(--accent-hover); }
.data-table tbody tr:hover td:first-child{ box-shadow:inset 2px 0 0 var(--accent); }
.data-table tbody tr:last-child td{ border-bottom:none; }
/* premium status pills inside tables */
.data-table .badge,.lead-row .badge{ padding:4px 11px; font-size:11.5px; }

/* ── Stat-mini polish (leads / dashboards) ─────────────────────────────────── */
.stat-mini{ padding:16px 18px; min-height:84px; }
.stat-row{ gap:16px !important; }

/* ── Buttons get a touch more presence ─────────────────────────────────────── */
.btn{ padding:9px 16px; }
.btn-sm{ padding:6px 12px; }

/* collapsed sidebar — hide every non-icon child (covers injected nav items too) */
body.sidebar-collapsed .nav-item > span:not(.icon){ display:none !important; }
body.sidebar-collapsed .nav-item{ position:relative; }

/* ── Dashboard widget + section-label polish (executive) ───────────────────── */
.tl-task-widget .w-label{ font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.tl-task-widget .w-value{ font-size:28px; font-weight:800; color:var(--text); letter-spacing:-.5px; margin:8px 0 3px; line-height:1; }
.tl-task-widget .w-cap{ font-size:11.5px; color:var(--sub); }
.section-group-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:24px 2px 12px; }
.page-hdr{ margin-bottom:8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE UX-1B — LIGHT REBUILD (FINAL LAYER · overrides everything above)
   Dark mode removed. Single clean enterprise light theme (HubSpot/Salesforce
   Lightning / Zoho). Token-driven → converts every module at once.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · LIGHT TOKEN PALETTE (also neutralises any data-theme="dark") ──────── */
:root, [data-theme="dark"]{
  --bg:#F5F7FB; --card:#FFFFFF; --card2:#F3F4F6; --border:#E5E7EB; --border2:#EEF1F5;
  --text:#111827; --sub:#4B5563; --muted:#6B7280; --nav:#6B7280; --disabled:#9CA3AF;
  --accent:#5B5CEB; --accent-dark:#4F46E5; --accent-hover:rgba(91,92,235,.08); --accent-glow:rgba(91,92,235,.16);
  --brand:#5B5CEB; --brand-2:#6366F1;
  --green:#10B981; --amber:#F59E0B; --red:#EF4444; --blue:#5B5CEB; --cyan:#0891B2;
  --ring:0 0 0 3px rgba(91,92,235,.18);
  --e1:0 1px 2px rgba(16,24,40,.05);
  --e2:0 1px 3px rgba(16,24,40,.07), 0 1px 2px rgba(16,24,40,.04);
  --e3:0 8px 24px -8px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.05);
  --e4:0 24px 48px -16px rgba(16,24,40,.18), 0 8px 20px -8px rgba(16,24,40,.08);
  --shadow:var(--e2); --shadow-sm:var(--e1); --shadow-lg:var(--e4);
  --sidebar-bg:#FFFFFF; --sidebar-text:#4B5563; --sidebar-hover:#F3F4F6;
  --sidebar-active:rgba(91,92,235,.10); --sidebar-active-text:#4F46E5;
  color-scheme:light;
}
html,body{ background:var(--bg); color:var(--text); }
/* kill any leftover dark depth / glow / glass */
.card,.list-card,.kpi-card,.tl-task-widget,.stat-mini,.modal-box,.detail-section,.detail-panel{
  background-image:none !important; background-color:var(--card);
}
/* hide the (now removed) theme toggle, just in case it lingers anywhere */
#theme-toggle-btn,.theme-toggle{ display:none !important; }

/* ── 2 · WHITE SIDEBAR (subtle shadow, SVG icons, soft-indigo active) ──────── */
#sidebar{
  background:#FFFFFF !important; border-right:1px solid var(--border);
  box-shadow:1px 0 0 var(--border), 2px 0 12px rgba(16,24,40,.035);
}
.sb-logo{ border-bottom:1px solid var(--border); padding-bottom:14px; }
.sb-logo-name{ color:var(--text); }
.sb-logo-sub{ color:var(--muted); opacity:1; }
.sb-role-wrap{ background:transparent; }
.sb-role-label{ color:#9CA3AF; }
.nav-section-label{ color:#9CA3AF !important; opacity:1 !important; font-weight:700; }
.nav-item{ color:var(--sub); font-weight:500; }
.nav-item .nav-svg{ color:var(--muted); opacity:1; }
.nav-item:hover{ background:var(--sidebar-hover); color:var(--text); }
.nav-item:hover .nav-svg{ color:var(--text); }
.nav-item.active{ background:var(--sidebar-active); color:var(--accent-dark); box-shadow:none; font-weight:600; }
.nav-item.active .nav-svg{ color:var(--accent-dark); }
.nav-item.active::before{ background:var(--accent); }
.nav-emoji{ filter:grayscale(.15); }
.sb-online-section .nav-section-label{ color:#9CA3AF; }
.sb-user{ border-top:1px solid var(--border); }
.sb-user-name{ color:var(--text); }
.sb-user-role{ color:var(--muted); }
.sb-user button{ color:var(--muted); }
.sb-user button:hover{ color:var(--text); }
.sb-collapse{ background:var(--card2); border:1px solid var(--border); color:var(--muted); }
.sb-collapse:hover{ background:#E5E7EB; color:var(--text); }
body.sidebar-collapsed .nav-item:hover::after{ background:#fff; color:var(--text); border:1px solid var(--border); box-shadow:var(--e3); }
/* WhatsApp brand icon stays green on white */
.wa-nav-icon{ background:#25D366; }

/* ── 3 · TOP BAR (light, clean) ────────────────────────────────────────────── */
#header{ background:#FFFFFF; border-bottom:1px solid var(--border); box-shadow:0 1px 2px rgba(16,24,40,.03); }
.breadcrumb .parent,.breadcrumb .sep{ color:var(--muted); }
.breadcrumb .current{ color:var(--text); }
.hdr-btn{ background:#FFFFFF; border:1px solid var(--border); color:var(--sub); }
.hdr-btn:hover{ background:var(--accent-hover); border-color:var(--accent); color:var(--accent); }
.hdr-user{ background:#FFFFFF; border:1px solid var(--border); }
.hdr-user-name{ color:var(--text); }
.hdr-search input{ background:#FFFFFF; border:1px solid var(--border); color:var(--text); }
.hdr-search input::placeholder{ color:var(--muted); }
.lang-toggle{ background:#FFFFFF; border:1px solid var(--border); color:var(--sub); }

/* ── 4 · CARDS — clean white, subtle border, soft shadow ───────────────────── */
.card,.list-card,.kpi-card,.tl-task-widget,.stat-mini{ background:#FFFFFF; border:1px solid var(--border); box-shadow:var(--e2); }
.kpi-card::after{ opacity:.9; background:linear-gradient(90deg,var(--brand),var(--brand-2)); }  /* slim accent only */
.kpi-card:hover,.tl-task-widget:hover{ box-shadow:var(--e3); border-color:#D8DBF2; }

/* ── 5 · TABLES — Salesforce / HubSpot ─────────────────────────────────────── */
.table-wrap{ background:#FFFFFF; border:1px solid var(--border); }
.data-table th{ background:#F9FAFB; color:var(--muted); border-bottom:1px solid var(--border); }
.data-table td{ color:var(--text); border-bottom:1px solid #F0F2F5; }
.data-table tbody tr:hover td{ background:#F7F8FC; }
.data-table tbody tr:hover td:first-child{ box-shadow:inset 3px 0 0 var(--accent); }

/* ── 6 · FORMS — larger, modern, accessible ────────────────────────────────── */
.field-input,.field-select,.field-textarea,
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea{
  background:#FFFFFF; color:var(--text); border:1px solid #D1D5DB; border-radius:8px; padding:11px 13px; font-size:14px;
}
.field-input::placeholder,textarea::placeholder,input::placeholder{ color:var(--muted); }
.field-input:focus,.field-select:focus,.field-textarea:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--accent); box-shadow:var(--ring); outline:none;
}
.field-label{ color:var(--sub); font-weight:600; font-size:12.5px; }
.field-input[readonly]{ background:#F9FAFB; color:var(--sub); }

/* ── 7 · MODALS / DRAWERS / TOASTS — white ─────────────────────────────────── */
.modal-box,.ds-drawer{ background:#FFFFFF; }
.modal-footer{ background:#F9FAFB; }
.modal-overlay,.mx-modal{ background:rgba(17,24,39,.45); }
.toast{ background:#FFFFFF; border:1px solid var(--border); }

/* ── 8 · BADGES keep their semantic light tints (already light) ────────────── */
.badge{ font-weight:600; }

/* ═══ Phase UX-1C · RTL fix + search icon ═══════════════════════════════════ */
/* dir=rtl already flips flex main-axis; the legacy row-reverse double-flipped it
   (sidebar stuck on the left). Cancel it so the sidebar moves to the RIGHT. */
html[dir="rtl"] #app{ flex-direction:row !important; }
html[dir="rtl"] #header{ flex-direction:row !important; }
html[dir="rtl"] .nav-item{ flex-direction:row !important; padding:8px 11px !important; }
html[dir="rtl"] .sb-logo,
html[dir="rtl"] .sb-user,
html[dir="rtl"] .sb-role-badge,
html[dir="rtl"] .section-header{ flex-direction:row !important; }
/* sidebar border + active rail flip to the inner (left) edge in RTL */
html[dir="rtl"] #sidebar{ border-right:none; border-left:1px solid var(--border);
  box-shadow:-1px 0 0 var(--border), -2px 0 12px rgba(16,24,40,.035); }
html[dir="rtl"] .nav-item.active::before{ left:auto; right:-10px; border-radius:3px 0 0 3px; }
html[dir="rtl"] .nav-section-label{ text-align:right; }
/* collapsed tooltip appears on the left in RTL */
html[dir="rtl"] body.sidebar-collapsed .nav-item:hover::after{ left:auto; right:64px; }

/* header global search — icon + shortcut correctly placed (LTR & RTL) */
.hdr-search .ic{ display:flex; align-items:center; justify-content:center; color:var(--muted); }
.hdr-search input{ padding:0 64px 0 34px; }      /* room for icon (left) + kbd (right) */
html[dir="rtl"] .hdr-search .ic{ left:auto; right:11px; }
html[dir="rtl"] .hdr-search kbd{ right:auto; left:9px; }
html[dir="rtl"] .hdr-search input{ padding:0 34px 0 64px; text-align:right; }

/* ── Fix: long user names must not overflow / wrap the sidebar + header ────── */
.sb-user{ align-items:center; gap:10px; }
.sb-user > div{ min-width:0; }                 /* allow the name block to shrink */
.sb-user-name, .sb-user-role{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; display:block; }
.sb-user > button, .sb-user .sb-user-avatar{ flex-shrink:0; }
.hdr-user{ max-width:230px; }
.hdr-user-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
/* center profile + lead-card names wrap/truncate safely on long company names */
.crm-profile-name{ overflow-wrap:anywhere; }

/* ═══ Phase UX-1D · User profile dropdown menu ══════════════════════════════ */
.hdr-user-wrap{ position:relative; }
.hdr-user{ cursor:pointer; user-select:none; }
.hdr-user-av{ overflow:hidden; padding:0; }
.user-menu{ position:absolute; top:48px; right:0; width:300px; background:#fff; border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--e4,0 24px 48px -16px rgba(16,24,40,.18)); z-index:1000; overflow:hidden;
  opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity .14s ease, transform .14s ease; }
.user-menu.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
html[dir="rtl"] .user-menu{ right:auto; left:0; }
.user-menu-head{ display:flex; gap:12px; align-items:center; padding:16px; background:linear-gradient(180deg,#F7F8FC,#fff); border-bottom:1px solid var(--border); }
.user-menu-av{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; font-weight:800; font-size:20px; overflow:hidden; flex-shrink:0; }
.user-menu-name{ font-size:15px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-menu-email{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.user-menu-tags{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.user-menu-role{ font-size:10.5px; font-weight:700; color:var(--accent-dark); background:rgba(91,92,235,.1); padding:2px 8px; border-radius:9999px; }
.user-menu-username{ font-size:10.5px; font-weight:600; color:var(--muted); background:var(--card2); padding:2px 8px; border-radius:9999px; }
.user-menu-list{ padding:6px; max-height:62vh; overflow:auto; }
.user-menu-item{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px; font-size:13.5px;
  color:var(--text); cursor:pointer; text-decoration:none; transition:background .12s; }
.user-menu-item:hover{ background:var(--card2); }
.user-menu-item .i{ width:20px; text-align:center; font-size:15px; flex-shrink:0; }
.user-menu-item .hint{ margin-left:auto; font-size:11.5px; color:var(--muted); }
html[dir="rtl"] .user-menu-item .hint{ margin-left:0; margin-right:auto; }
.user-menu-sep{ height:1px; background:var(--border); margin:6px 8px; }
.user-menu-signout{ color:var(--red); font-weight:600; }
.user-menu-signout:hover{ background:rgba(239,68,68,.08); }


/* ═══════════════════════════════════════════════════════════════════════════
   PHASE UX-1C — PREMIUM COLORED NAV ICONS + HOVER / ACTIVE MICRO-INTERACTIONS
   Final cascade layer (overrides UX-1A/UX-1B sidebar rules above).
   • Every module gets a distinct, accessible brand color (visible on white).
   • Icons stay colored at rest, on hover, and when active.
   • Hover: icon scale(1.08), item slides translateX(3px), soft tinted bg,
     a colored left accent bar grows in.
   • Active: tinted bg + colored hairline border + full accent bar + colored icon.
   • Works in collapsed (icon-only) mode; tooltips already handled above.
   • WhatsApp keeps its existing green badge (.wa-nav-icon) — untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- 1 · Per-module color tokens (data-page → --nav-c) --------------------- */
.nav-item[data-page="index"],
.nav-item[data-page="dashboard"]      { --nav-c:#6366F1; }   /* Dashboard   · Indigo  */
.nav-item[data-page="leads"]          { --nav-c:#2563EB; }   /* Leads       · Blue    */
.nav-item[data-page="customers"]      { --nav-c:#0891B2; }   /* Customers   · Cyan    */
.nav-item[data-page="tasks"]          { --nav-c:#F97316; }   /* Tasks       · Orange  */
.nav-item[data-page="sales"]          { --nav-c:#7C3AED; }   /* Sales Dash  · Purple  */
.nav-item[data-page="sales_command"],
.nav-item[data-page="command_center"] { --nav-c:#4F46E5; }   /* Command Ctr · Indigo  */
.nav-item[data-page="notifications"]  { --nav-c:#D97706; }   /* Notifs      · Amber   */
.nav-item[data-page="whatsapp"]       { --nav-c:#25D366; }   /* WhatsApp    · Green   */
.nav-item[data-page="mailbox"]        { --nav-c:#EA4335; }   /* Mailbox     · Gmail R */
.nav-item[data-page="email_alerts"]   { --nav-c:#DC2626; }   /* Email Alert · Red     */
.nav-item[data-page="quotation"]      { --nav-c:#059669; }   /* Quotations  · Emerald */
.nav-item[data-page="projects"]       { --nav-c:#1D4ED8; }   /* Projects    · Blue    */
.nav-item[data-page="finance"]        { --nav-c:#16A34A; }   /* Finance     · Green   */
.nav-item[data-page="inventory"]      { --nav-c:#0D9488; }   /* Inventory   · Teal    */
.nav-item[data-page="chat"]           { --nav-c:#0EA5E9; }   /* Team Chat   · Sky     */
.nav-item[data-page="calls"]          { --nav-c:#EA580C; }   /* Call Center · Orange  */
.nav-item[data-page="design"]         { --nav-c:#9333EA; }   /* Design      · Purple  */
.nav-item[data-page="production"]     { --nav-c:#4F46E5; }   /* Production  · Indigo  */
.nav-item[data-page="floorplan"]      { --nav-c:#06B6D4; }   /* Floor Plans · Cyan    */
/* — remaining modules (kept colorful & recognizable) — */
.nav-item[data-page="reports"]        { --nav-c:#8B5CF6; }   /* Reports     · Violet  */
.nav-item[data-page="approvals"]      { --nav-c:#D97706; }   /* Approvals   · Amber   */
.nav-item[data-page="bug_reports"]    { --nav-c:#DC2626; }   /* Bug Reports · Red     */
.nav-item[data-page="speakers"]       { --nav-c:#9333EA; }   /* Speakers    · Purple  */
.nav-item[data-page="marketing"]      { --nav-c:#EC4899; }   /* Marketing   · Pink    */
.nav-item[data-page="users"]          { --nav-c:#2563EB; }   /* Users       · Blue    */
.nav-item[data-page="settings"]       { --nav-c:#475569; }   /* Settings    · Slate   */
.nav-item[data-page="hr"]             { --nav-c:#E11D48; }   /* HR Hub      · Rose    */
.nav-item[data-page="hr_employees"]   { --nav-c:#2563EB; }   /* Employees   · Blue    */
.nav-item[data-page="hr_attendance"]  { --nav-c:#16A34A; }   /* Attendance  · Green   */
.nav-item[data-page="hr_zk"]          { --nav-c:#6366F1; }   /* ZK Devices  · Indigo  */
.nav-item[data-page="hr_leaves"]      { --nav-c:#D97706; }   /* Leaves      · Amber   */
.nav-item[data-page="hr_payroll"]     { --nav-c:#059669; }   /* Payroll     · Emerald */

/* --- 2 · Colored icons (stroke = currentColor = module color) ------------- */
/* overrides the grey `.nav-item .nav-svg{color:var(--muted)}` light-theme rule */
.nav-item .nav-svg{
  color:var(--nav-c, var(--muted));
  opacity:1;
  transition:color .18s ease, transform .2s cubic-bezier(.34,1.4,.5,1);
}
.nav-item:hover  .nav-svg{ color:var(--nav-c, var(--text));        transform:scale(1.08); }
.nav-item.active .nav-svg{ color:var(--nav-c, var(--accent-dark)); transform:scale(1.05); }
/* keep emoji-fallback icons tinted too */
.nav-item .nav-emoji{ filter:none; }

/* --- 3 · Menu-item hover: soft tinted bg + slide ------------------------- */
.nav-item{
  position:relative;
  transition:background .18s ease, color .18s ease,
             transform .18s cubic-bezier(.34,1.3,.5,1);
}
.nav-item:hover{
  background:color-mix(in srgb, var(--nav-c, var(--accent)) 9%, transparent);
  transform:translateX(3px);
}
html[dir="rtl"] .nav-item:hover{ transform:translateX(-3px); }

/* --- 4 · Left accent bar (grows on hover, full on active) ---------------- */
.nav-item::before{
  content:''; position:absolute; left:-10px; top:50%;
  width:3px; height:18px; border-radius:0 3px 3px 0;
  background:var(--nav-c, var(--accent));
  transform:translateY(-50%) scaleY(0); transform-origin:center; opacity:0;
  transition:transform .2s cubic-bezier(.34,1.3,.5,1), opacity .18s ease;
}
.nav-item:hover::before { transform:translateY(-50%) scaleY(.55); opacity:.6; }
.nav-item.active::before{ transform:translateY(-50%) scaleY(1);   opacity:1;
  background:var(--nav-c, var(--accent)); left:-10px; }
html[dir="rtl"] .nav-item::before{ left:auto; right:-10px; border-radius:3px 0 0 3px; }

/* --- 5 · Premium active state (tinted bg + colored hairline) ------------- */
.nav-item.active{
  background:color-mix(in srgb, var(--nav-c, var(--accent)) 12%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--nav-c, var(--accent)) 30%, transparent);
  font-weight:600;
}
.nav-item.active .nav-label{ color:var(--text); }

/* --- 6 · Collapsed (icon-only) mode ------------------------------------- */
body.sidebar-collapsed .nav-item:hover{ transform:none; }     /* no slide when centered */
body.sidebar-collapsed .nav-item::before{ left:-14px; }
body.sidebar-collapsed .nav-item.active::before{ left:-14px; }
html[dir="rtl"] body.sidebar-collapsed .nav-item::before{ left:auto; right:-14px; }
/* icons & active tint already inherit from rules above — colors persist */

/* --- 7 · WhatsApp green badge: add the hover scale parity --------------- */
.nav-item:hover .wa-nav-icon{ transform:scale(1.08); }

/* --- 8 · Respect reduced-motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .nav-item, .nav-svg, .nav-item::before, .wa-nav-icon{ transition:none !important; }
  .nav-item:hover{ transform:none; }
  .nav-item:hover .nav-svg,
  .nav-item:hover .wa-nav-icon{ transform:none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PHASE UX-1C.1 — REVIEW ENHANCEMENTS (post-feedback polish, CSS-only)
   Applies the high-impact, safe sidebar upgrades:
   • Icon-container badges  — each icon sits in a 30px rounded square tinted with
     its module color (Linear / ClickUp style); the WhatsApp solid-green badge is
     preserved untouched via :not(.wa-nav-icon).
   • Hover halo            — soft colored field blooms around the icon badge.
   • Floating active item  — tinted surface + colored hairline + subtle elevation.
   • Section dividers       — uppercase labels with a fading rule line.
   (Skipped on purpose: live count badges & profile-card rebuild need data/HTML;
    collapse stays on its proven width transition to avoid regressions.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- 1 · Icon-container badges (exclude the WhatsApp green badge) --------- */
.nav-item .icon:not(.wa-nav-icon){
  width:30px; height:30px; border-radius:9px;
  background:color-mix(in srgb, var(--nav-c, var(--muted)) 12%, transparent);
  transition:background .18s ease, box-shadow .18s ease,
             transform .2s cubic-bezier(.34,1.3,.5,1);
}
.nav-item .nav-svg{ width:18px; height:18px; }

/* hover — richer tint + soft colored halo (a field, not a glow) */
.nav-item:hover .icon:not(.wa-nav-icon){
  background:color-mix(in srgb, var(--nav-c, var(--accent)) 18%, transparent);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--nav-c, var(--accent)) 8%, transparent);
}
/* active — solid-feel badge so the current module reads instantly */
.nav-item.active .icon:not(.wa-nav-icon){
  background:color-mix(in srgb, var(--nav-c, var(--accent)) 20%, transparent);
}

/* --- 2 · Floating / elevated active item --------------------------------- */
.nav-item.active{
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--nav-c, var(--accent)) 30%, transparent),
             0 4px 12px -4px color-mix(in srgb, var(--nav-c, var(--accent)) 32%, transparent);
}

/* --- 3 · Section-header dividers ----------------------------------------- */
.nav-section-label{
  display:flex; align-items:center; gap:10px;
  letter-spacing:.1em; text-transform:uppercase;
}
.nav-section-label::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, var(--border), transparent);
}
html[dir="rtl"] .nav-section-label::after{
  background:linear-gradient(270deg, var(--border), transparent);
}
body.sidebar-collapsed .nav-section-label::after{ display:none; }

/* --- 4 · Reduced-motion parity for the new badge transitions ------------- */
@media (prefers-reduced-motion: reduce){
  .nav-item .icon:not(.wa-nav-icon){ transition:none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PHASE UX-1C.2 — TINT CALIBRATION (post-review)
   Progressive tint per state (normal → hover → active) instead of a flat value,
   with warm / green / cyan hues calmed since they read heavier at equal alpha.
   Softer active hairline border. Pure variables → one rule set drives all.
   ═══════════════════════════════════════════════════════════════════════════ */

/* default tint ramp (indigo/blue/purple tolerate the higher end) */
.nav-item{ --tn:8%; --th:12%; --ta:16%; }

/* calmer ramp for strong warm / green / cyan / teal / orange modules */
.nav-item[data-page="finance"],
.nav-item[data-page="quotation"],
.nav-item[data-page="inventory"],
.nav-item[data-page="customers"],
.nav-item[data-page="floorplan"],
.nav-item[data-page="tasks"],
.nav-item[data-page="calls"],
.nav-item[data-page="chat"],
.nav-item[data-page="hr_attendance"],
.nav-item[data-page="hr_payroll"],
.nav-item[data-page="notifications"],
.nav-item[data-page="hr_leaves"],
.nav-item[data-page="approvals"]{ --tn:6%; --th:10%; --ta:14%; }

.nav-item .icon:not(.wa-nav-icon){
  background:color-mix(in srgb, var(--nav-c, var(--muted)) var(--tn), transparent);
}
.nav-item:hover .icon:not(.wa-nav-icon){
  background:color-mix(in srgb, var(--nav-c, var(--accent)) var(--th), transparent);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--nav-c, var(--accent)) 7%, transparent);
}
.nav-item.active .icon:not(.wa-nav-icon){
  background:color-mix(in srgb, var(--nav-c, var(--accent)) var(--ta), transparent);
}

/* softer active surround: hairline 18% + lighter elevation */
.nav-item.active{
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--nav-c, var(--accent)) 18%, transparent),
             0 4px 12px -5px color-mix(in srgb, var(--nav-c, var(--accent)) 24%, transparent);
}


/* ═══════════════════════════════════════════════════════════════════════════
   PHASE UX-2A — CRM WORKSPACE & ENTERPRISE DATA GRIDS  (UI-only, final layer)
   One shared design language for tables, status pills and KPI cards across
   Leads / Customers / Quotations / Projects / Tasks. `body`-prefixed selectors
   so this reliably overrides each page's inline <style> without editing them.
   No markup, JS, API, permission, workflow or business-logic changes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── PHASE 2 · ENTERPRISE DATA TABLES ─────────────────────────────────────
   The global .data-table already gets the executive treatment; bring the
   Customers .cust-table (and the Projects .itm-table) up to the same spec:
   sticky header, 56px rows, hover background + left accent rail.            */

/* taller, calmer rows on the shared grid (≈56px) */
body .data-table td{ padding:17px 16px; font-size:13.5px; }
body .data-table th{ padding:13px 16px; }

/* Customers grid → same enterprise spec */
body table.cust-table th{
  position:sticky; top:0; z-index:3;
  padding:13px 16px; font-size:11px; font-weight:700;
  letter-spacing:.06em; color:var(--muted);
  background:var(--card2); border-bottom:1px solid var(--border);
}
body table.cust-table td{
  padding:16px 16px; font-size:13.5px; vertical-align:middle;
  border-bottom:1px solid var(--border);
}
body table.cust-table tbody tr{ transition:background .12s ease, box-shadow .12s ease; }
body table.cust-table tbody tr td:first-child{ box-shadow:inset 2px 0 0 transparent; }
body table.cust-table tbody tr:hover td{ background:var(--accent-hover); cursor:pointer; }
body table.cust-table tbody tr:hover td:first-child{ box-shadow:inset 2px 0 0 var(--accent); }
body table.cust-table tbody tr:last-child td{ border-bottom:none; }

/* Projects items grid → consistent header/rows */
body table.itm-table th{ background:var(--card2); position:sticky; top:0; z-index:2;
  padding:12px 14px; font-size:11px; letter-spacing:.05em; color:var(--muted); }
body table.itm-table td{ padding:13px 14px; }

/* better checkbox selection across every grid */
body .data-table input[type=checkbox],
body .cust-table input[type=checkbox],
body .lead-chk, body .cust-chk{
  width:16px; height:16px; accent-color:var(--accent);
  border-radius:5px; cursor:pointer; vertical-align:middle;
}

/* ─── PHASE 6 · UNIFIED STATUS-PILL SYSTEM ─────────────────────────────────
   One geometry (radius / padding / type / spacing) for every pill family.
   Colours are left untouched — only the shape & typography are unified.     */
body .badge,
body .status-pill,
body .crm-pill,
body [class*="badge-lead-"],
body [class*="badge-proj-"],
body [class*="badge-task-"],
body .itm-status-pill,
body .itm-source-pill,
body .itm-avail-pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:9999px;
  font-size:11.5px; font-weight:600; line-height:1.5;
  letter-spacing:.01em; white-space:nowrap; vertical-align:middle;
}

/* ─── PHASE 7 · KPI / STAT-CARD CONSISTENCY ────────────────────────────────
   Single spacing / radius / shadow / typography for the CRM stat cards
   (Leads .stat-mini, Customers .stat-card, Projects .stat-box & .itm-kpi).  */
body .stat-mini,
body .stat-card,
body .stat-box,
body .itm-kpi{
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:15px 17px;
  box-shadow:var(--e1); cursor:pointer;
  transition:box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
body .itm-kpi{ cursor:default; padding:13px 14px; }
body .stat-mini:hover,
body .stat-card:hover,
body .stat-box:hover{
  box-shadow:var(--e2); border-color:color-mix(in srgb, var(--accent) 30%, transparent);
  transform:translateY(-1px);
}
body .stat-mini.active,
body .stat-card.active{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  background:var(--card);
}

/* unified value typography */
body .stat-mini-val,
body .stat-card .sc-num,
body .stat-box-val,
body .itm-kpi-val{
  font-size:25px; font-weight:800; line-height:1;
  letter-spacing:-.3px; color:var(--text);
  font-variant-numeric:tabular-nums;
}
body .itm-kpi-val{ font-size:22px; }

/* unified label typography */
body .stat-mini-label,
body .stat-card .sc-label,
body .stat-box-label,
body .itm-kpi-lbl{
  font-size:11.5px; font-weight:600; color:var(--sub);
  text-transform:uppercase; letter-spacing:.04em; margin-top:5px;
}
body .itm-kpi-lbl{ font-size:10px; margin-top:3px; }


/* ─── PHASE UX-2A · 3 — SMART FILTER POLISH (UI-only) ──────────────────────
   The shared .list-tabs (Leads / Projects / Tasks) is already a HubSpot-style
   underline tab strip. Add segmented-control affordances: rounded hover pill,
   crisper active state, calmer count chips. Filtering logic untouched.        */
body .list-tab{
  border-radius:8px 8px 0 0;
  transition:color .18s ease, background .18s ease, border-color .18s ease;
}
body .list-tab:hover:not(.active){
  background:var(--accent-hover); color:var(--accent);
}
body .list-tab.active{
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent);
}
body .list-tab-count{
  background:var(--card2); color:var(--muted);
  font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:9999px;
}
body .list-tab.active .list-tab-count{
  background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent);
}


/* ─── PHASE UX-2A · POLISH PASS (self-review + design-director feedback) ────
   (1) Customers segmented filter control  (2) numeric cells tabular + aligned
   (3) slightly punchier KPI value  (4) calmer empty-state. CSS-only.         */

/* (1) Segmented control — iOS / HubSpot style, replaces the old colored buttons */
.cust-seg{
  display:inline-flex; gap:2px; padding:3px;
  background:var(--card2); border:1px solid var(--border); border-radius:10px;
}
.cust-seg-btn{
  border:none; background:transparent; font-family:inherit;
  padding:7px 14px; border-radius:7px; cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--sub);
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.cust-seg-btn:hover:not(.active){ color:var(--text); background:var(--card); }
.cust-seg-btn.active{ background:var(--card); color:var(--accent-dark); box-shadow:var(--e1); }

/* (2) numeric legibility — tabular figures everywhere in grids */
body .data-table td, body .cust-table td{ font-variant-numeric:tabular-nums; }

/* (3) punchier KPI value (26px) while keeping the unified system */
body .stat-mini-val,
body .stat-card .sc-num,
body .stat-box-val{ font-size:26px; }

/* (4) empty-state polish (Customers/Tasks use .empty-state-*) */
body .empty-state-title{ font-size:15px; font-weight:700; color:var(--text); margin-top:4px; }
body .empty-state-sub{ font-size:13px; color:var(--muted); max-width:340px; margin:4px auto 0; }


/* ─── UX-2A · STAGE 1 — CUSTOMER DETAIL WORKSPACE ──────────────────────────
   Customer EDIT opens as an inline full-page profile workspace (not a centered
   modal). Reuses the modal's markup & all its JS/IDs — only presentation +
   a profile header card change. Add-customer stays a normal dialog.          */
.cust-ws-open #cust-modal{
  background:var(--bg); align-items:stretch; justify-content:stretch;
  padding:0; z-index:70;
}
.cust-ws-open #cust-modal .modal-box{
  max-width:none; width:100%; max-height:none; min-height:100vh; margin:0;
  border-radius:0; box-shadow:none; background:var(--bg);
  display:flex; flex-direction:column;
}
.cust-ws-open #cust-modal .modal-header{
  position:sticky; top:0; z-index:6; background:var(--card);
  border-bottom:1px solid var(--border); padding:14px 24px;
}
.cust-ws-open #cust-modal .modal-header h3{ font-size:16px; }
.cust-ws-open #cust-modal .modal-close{ font-size:22px; }
.cust-ws-open #cust-modal .modal-body{
  flex:1; width:100%; max-width:1180px; margin:0 auto; padding:22px 24px;
}
.cust-ws-open #cust-modal .modal-footer{
  position:sticky; bottom:0; background:var(--card);
  border-top:1px solid var(--border); padding:12px 24px;
}

/* two-column workspace on wide screens: details | activity */
@media(min-width:1000px){
  .cust-ws-open #cust-modal .modal-body{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:22px 28px; align-content:start;
  }
  .cust-ws-open #cust-modal #cust-ws-head{ grid-column:1 / -1; }
}
.cust-ws-open #cust-ws-details .grid-2{ grid-template-columns:1fr; }

/* profile header card */
.cust-ws-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:18px 20px; box-shadow:var(--e1);
}
.cust-ws-id{ display:flex; align-items:center; gap:14px; }
.cust-ws-av{
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff; font-weight:800; font-size:18px;
  display:flex; align-items:center; justify-content:center;
}
.cust-ws-name{ font-size:19px; font-weight:800; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cust-ws-sub{ font-size:13px; color:var(--muted); margin-top:2px; }
.cust-ws-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.cw-act{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px;
  border-radius:9px; font-size:13px; font-weight:700; cursor:pointer;
  border:1px solid var(--border); background:var(--card); color:var(--text);
  text-decoration:none; transition:transform .14s ease, box-shadow .16s ease, background .15s ease; font-family:inherit;
}
.cw-act:hover{ transform:translateY(-1px); box-shadow:var(--e2); }
.cw-call{ background:#22C55E; color:#fff; border-color:transparent; }
.cw-wa{ background:#25D366; color:#fff; border-color:transparent; }
.cw-mail{ background:var(--card2); }
.cw-brief{ background:var(--accent); color:#fff; border-color:transparent; }


/* ═══════════════════════════════════════════════════════════════════════════
   UX-2A.1B — CUSTOMER 360 WORKSPACE  (profile-first; reuses Stage-1 shell)
   Visibility model:
     • Add dialog (no .cust-ws-open)      → form only; KPIs/360 hidden
     • Workspace read (.cust-ws-open)     → KPIs + 360 sections; form hidden
     • Workspace edit (+ .cust-editing)   → form + footer; KPIs/360 hidden
   ═══════════════════════════════════════════════════════════════════════════ */

/* override Stage-1 modal-body grid → plain stack; .cust360-grid does the columns */
@media(min-width:1000px){
  .cust-ws-open #cust-modal .modal-body{ display:block; }
}

/* --- visibility state machine ------------------------------------------------ */
#cust-ws-kpis, .cust360-grid{ display:none; }
.cust-ws-open #cust-ws-kpis{
  display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin:2px 0 18px;
}
.cust-ws-open .cust360-grid{
  display:grid; grid-template-columns:minmax(0,0.92fr) minmax(0,1.28fr);
  gap:20px 24px; align-items:start;
}
.cust-ws-open:not(.cust-editing) #cust-ws-details{ display:none; }
.cust-ws-open.cust-editing #cust-ws-kpis,
.cust-ws-open.cust-editing .cust360-grid{ display:none; }
.cust-ws-open:not(.cust-editing) .modal-footer{ display:none; }
#cust-edit-btn{ display:none; }
.cust-ws-open:not(.cust-editing) #cust-edit-btn{ display:inline-flex; align-items:center; gap:6px; }
@media(max-width:999px){
  .cust-ws-open #cust-ws-kpis{ grid-template-columns:repeat(3,1fr); }
  .cust-ws-open .cust360-grid{ grid-template-columns:1fr; }
}

/* --- header edit button ------------------------------------------------------ */
.c360-edit-btn{
  background:var(--accent); color:#fff; border:none; border-radius:8px;
  padding:7px 14px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit;
  margin-inline-start:auto; margin-inline-end:8px; transition:background .15s;
}
.c360-edit-btn:hover{ background:var(--accent-dark); }

/* --- KPI strip --------------------------------------------------------------- */
.c360-kpi{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:13px 14px; box-shadow:var(--e1); min-width:0;
}
.c360-kpi-val{ font-size:22px; font-weight:800; color:var(--text); line-height:1;
  letter-spacing:-.3px; font-variant-numeric:tabular-nums; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.c360-kpi-lbl{ font-size:10.5px; font-weight:600; color:var(--sub);
  text-transform:uppercase; letter-spacing:.04em; margin-top:5px; }

/* --- section cards ----------------------------------------------------------- */
.cust360-left, .cust360-right{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.c360-card{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--e1); overflow:hidden;
}
.c360-card-h{
  display:flex; align-items:center; gap:8px; padding:12px 16px;
  font-size:13px; font-weight:700; color:var(--text);
  border-bottom:1px solid var(--border); background:var(--card2);
}
.c360-card-h span{ flex:0 0 auto; }
.c360-card-b{ padding:14px 16px; }
.c360-mini-btn{
  margin-inline-start:auto; background:var(--accent); color:#fff; border:none;
  border-radius:7px; padding:5px 11px; font-size:11.5px; font-weight:700;
  cursor:pointer; font-family:inherit;
}
.c360-twocol{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media(max-width:1180px){ .c360-twocol{ grid-template-columns:1fr; } }

/* --- properties / ownership rows -------------------------------------------- */
.c360-props{ padding:6px 16px 12px; }
.c360-prop{ display:flex; gap:14px; padding:9px 0; border-bottom:1px solid var(--border2,#eef1f5); }
.c360-prop:last-child{ border-bottom:none; }
.c360-prop .k{ flex:0 0 116px; font-size:11.5px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.03em; padding-top:1px; }
.c360-prop .val{ flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--text);
  overflow-wrap:anywhere; }
.c360-empty{ color:var(--disabled,#9CA3AF); font-weight:500; }

/* --- projects mini-cards ----------------------------------------------------- */
.c360-proj{ border:1px solid var(--border); border-radius:10px; padding:11px 12px;
  margin-bottom:9px; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.c360-proj:last-child{ margin-bottom:0; }
.c360-proj:hover{ border-color:color-mix(in srgb,var(--accent) 35%,transparent); box-shadow:var(--e1); }
.c360-proj-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.c360-proj-name{ font-size:13.5px; font-weight:700; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c360-proj-bar{ height:5px; border-radius:3px; background:var(--card2); margin:9px 0 5px; overflow:hidden; }
.c360-proj-bar span{ display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-dark)); }
.c360-proj-sub{ font-size:11.5px; color:var(--muted); }

/* --- extra quick-action button tints ---------------------------------------- */
.cw-quote{ background:var(--accent); color:#fff; border-color:transparent; }
.cw-task, .cw-note{ background:var(--card2); }

/* UX-2A.1B fix — let a lone channel panel (e.g. WhatsApp when there is no
   email) stretch full width instead of leaving an empty second column. */
.c360-twocol{ display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; }
.c360-twocol > div{ flex:1 1 300px; min-width:0; }

/* UX-2A.1B — explicit "Back to Customers" button in the workspace top bar */
#cust-back-btn{ display:none; }
.cust-ws-open #cust-back-btn{ display:inline-flex; align-items:center; gap:6px; }
.c360-back-btn{
  background:var(--card2); color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:7px 14px; font-size:13px; font-weight:700;
  cursor:pointer; font-family:inherit; margin-inline-start:auto;
  transition:background .15s, border-color .15s, color .15s;
}
.c360-back-btn:hover{ background:var(--accent-hover); border-color:var(--accent); color:var(--accent-dark); }
/* back button now takes the right-push; edit sits next to it */
.c360-edit-btn{ margin-inline-start:8px; }

/* ═══ Phase 20E · Global Smart Search dropdown ═══════════════════════════ */
.hdr-search-pop{ min-width:460px; right:auto; max-height:70vh; padding:6px; }
html[dir="rtl"] .hdr-search-pop{ left:auto; right:0; }
.gs-group{ margin:2px 0 4px; }
.gs-group-hd{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 10px 4px; font:700 10.5px/1 'Inter',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.gs-more{ background:var(--accent-hover); color:var(--accent); font:700 10px/1 'Inter',sans-serif; padding:3px 7px; border-radius:999px; }
.gs-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm); cursor:pointer; }
.gs-item:hover,.gs-item.sel{ background:var(--accent-hover); }
.gs-item-ic{ font-size:15px; width:22px; text-align:center; flex:0 0 22px; }
.gs-item-body{ display:flex; flex-direction:column; min-width:0; flex:1; }
.gs-item-t{ font:600 13px/1.25 'Inter',sans-serif; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-item-s{ font:400 11.5px/1.3 'Inter',sans-serif; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-item.sel .gs-item-t,.gs-item:hover .gs-item-t{ color:var(--accent); }
.gs-item-id{ font:600 10px/1 'Inter',monospace; color:var(--muted); background:var(--bg); padding:3px 6px; border-radius:6px; flex:0 0 auto; }
.gs-direct{ display:flex; align-items:center; gap:11px; padding:11px 12px; margin:2px 0 6px; border-radius:var(--r-md);
  background:linear-gradient(135deg, rgba(91,92,235,.10), rgba(79,70,229,.06)); border:1px solid rgba(91,92,235,.28);
  text-decoration:none; cursor:pointer; }
.gs-direct.sel,.gs-direct:hover{ border-color:var(--accent); box-shadow:var(--ring); }
.gs-direct-ic{ font-size:20px; width:30px; text-align:center; flex:0 0 30px; }
.gs-direct-body{ display:flex; flex-direction:column; min-width:0; flex:1; }
.gs-direct-title{ font:700 13.5px/1.25 'Inter',sans-serif; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-direct-sub{ font:400 11.5px/1.3 'Inter',sans-serif; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-direct-cta{ font:700 11.5px/1 'Inter',sans-serif; color:#fff; background:var(--accent); padding:7px 11px; border-radius:8px; flex:0 0 auto; white-space:nowrap; }
.gs-state{ padding:16px 12px; text-align:center; color:var(--muted); font:500 12.5px/1.4 'Inter',sans-serif; }
.gs-spin{ display:inline-block; width:12px; height:12px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; vertical-align:-2px; animation:gsSpin .6s linear infinite; }
@keyframes gsSpin{ to{ transform:rotate(360deg); } }
.gs-footer{ display:block; text-align:center; padding:10px; margin-top:2px; border-top:1px solid var(--border);
  font:700 12px/1 'Inter',sans-serif; color:var(--accent); text-decoration:none; cursor:pointer; border-radius:0 0 var(--r-md) var(--r-md); }
.gs-footer:hover,.gs-footer.sel{ background:var(--accent-hover); }

/* ═══ Phase 20E.2 · Mobile search button + full-screen overlay ═══════════ */
.hdr-search-mbtn{ display:none; }
@media (max-width:900px){ .hdr-search-mbtn{ display:inline-flex; align-items:center; justify-content:center; } }
.gs-ov{ position:fixed; inset:0; z-index:1000; background:var(--bg); display:none; flex-direction:column; }
.gs-ov.show{ display:flex; }
.gs-ov-bar{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); background:var(--card); box-shadow:var(--e1); }
.gs-ov-bar .gs-ov-ic{ color:var(--muted); display:flex; flex:0 0 auto; }
#gs-ov-input{ flex:1; min-width:0; height:44px; border:1px solid var(--border); border-radius:10px; padding:0 14px; font:500 15px/1 'Inter',sans-serif; color:var(--text); background:var(--bg); }
#gs-ov-input:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.gs-ov-close{ width:42px; height:42px; flex:0 0 42px; border:none; background:transparent; font-size:19px; color:var(--sub); cursor:pointer; border-radius:8px; }
.gs-ov-close:hover{ background:var(--accent-hover); color:var(--accent); }
.gs-ov-body{ flex:1; overflow:auto; padding:12px 14px 36px; -webkit-overflow-scrolling:touch; }
.gs-ov-group{ margin-bottom:14px; }
.gs-ov-gh{ display:flex; align-items:center; justify-content:space-between; padding:8px 4px 6px; font:700 11px/1 'Inter',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.gs-ov-item,.gs-ov-direct{ display:flex; align-items:center; gap:12px; padding:13px 12px; border-radius:12px; text-decoration:none; border:1px solid var(--border); background:var(--card); margin-bottom:8px; }
.gs-ov-item:active{ background:var(--accent-hover); }
.gs-ov-item .ic,.gs-ov-direct .ic{ font-size:20px; width:26px; text-align:center; flex:0 0 26px; }
.gs-ov-item .bd,.gs-ov-direct .bd{ min-width:0; flex:1; }
.gs-ov-item .t,.gs-ov-direct .t{ font:600 14.5px/1.3 'Inter',sans-serif; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-ov-item .s,.gs-ov-direct .s{ font:400 12.5px/1.35 'Inter',sans-serif; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.gs-ov-item .id{ font:600 10.5px/1 'Inter',monospace; color:var(--muted); background:var(--bg); padding:5px 8px; border-radius:7px; flex:0 0 auto; }
.gs-ov-direct{ background:linear-gradient(135deg, rgba(91,92,235,.12), rgba(79,70,229,.06)); border-color:rgba(91,92,235,.3); }
.gs-ov-direct .cta{ font:700 12px/1 'Inter',sans-serif; color:#fff; background:var(--accent); padding:9px 12px; border-radius:8px; white-space:nowrap; flex:0 0 auto; }
.gs-ov-all{ display:block; text-align:center; padding:14px; margin-top:4px; font:700 13px/1 'Inter',sans-serif; color:var(--accent); text-decoration:none; border-top:1px solid var(--border); }

/* Phase 20E.2 P4 — notification deep-link highlight */
.nc-deeplink{ box-shadow:0 0 0 2px var(--accent), var(--e3) !important; border-radius:10px; transition:box-shadow .2s; }