@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800&family=JetBrains+Mono:wght@400;500;600;700&family=Cairo:wght@400;500;600;700;800&display=swap');

/* ═══════════════════════════════════════════════════════════════════════
   OTS DESIGN SYSTEM — Matching ots.com reference
   3 Themes: Light (default) · Warm · Dark
   ═══════════════════════════════════════════════════════════════════════ */

:root, [data-theme="light"] {
  --bg:         #eef0f3;
  --bg2:        #ffffff;
  --bg3:        #e9ecf1;
  --surface:    #ffffff;
  --surface2:   #f6f8fa;
  --surface-h:  #eef1f5;
  --border:     #e2e6ec;
  --border2:    #d3d9e2;
  --accent:     #2563eb;
  --accent2:    #1e40af;
  --accent-h:   #1d4ed8;
  --accent-glow:rgba(37,99,235,0.09);
  --accent-glow2:rgba(37,99,235,0.18);
  --green:      #1f9d57;
  --green-bg:   rgba(31,157,87,0.10);
  --yellow:     #c77700;
  --yellow-bg:  rgba(199,119,0,0.10);
  --red:        #e23744;
  --red-bg:     rgba(226,55,68,0.09);
  --cyan:       #0e7490;
  --cyan-bg:    rgba(14,116,144,0.08);
  --purple:     #7c3aed;
  --purple-bg:  rgba(124,58,237,0.08);
  --text:       #1c2230;
  --text2:      #515b6e;
  --text3:      #8a93a6;
  --shadow:     0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
  --shadow-lg:  0 10px 30px rgba(16,24,40,0.10);
  --glass:      rgba(255,255,255,0.95);
  --nav-bg:     #ffffff;
  --nav-border: #e2e6ec;
  --nav-active: var(--accent);
  --nav-text:   #515b6e;
  --nav-text-h: #1c2230;
  --input-bg:   #ffffff;
  --logo-bg:    rgba(255,255,255,0.18);
  --meta-color: #e23744;
  /* Brand bar = the login hero's accent gradient (was solid red). */
  --brand:      var(--accent);
  --brand-grad: linear-gradient(150deg, var(--accent) 0%, var(--accent2) 100%);
  --brand-text: #ffffff;
}

[data-theme="warm"] {
  --bg:         #1a1410;
  --bg2:        #221c16;
  --bg3:        #2c241c;
  --surface:    #2c241c;
  --surface2:   #352c22;
  --surface-h:  #40352a;
  --border:     #3e3428;
  --border2:    #554838;
  --accent:     #d4875a;
  --accent2:    #c07040;
  --accent-h:   #e09468;
  --accent-glow:rgba(212,135,90,0.1);
  --accent-glow2:rgba(212,135,90,0.2);
  --green:      #4ade80;
  --green-bg:   rgba(74,222,128,0.08);
  --yellow:     #fbbf24;
  --yellow-bg:  rgba(251,191,36,0.07);
  --red:        #fb7185;
  --red-bg:     rgba(251,113,133,0.07);
  --cyan:       #67e8f9;
  --cyan-bg:    rgba(103,232,249,0.06);
  --purple:     #c084fc;
  --purple-bg:  rgba(192,132,252,0.06);
  --text:       #f0e8df;
  --text2:      #b8a490;
  --text3:      #7a6b5c;
  --shadow:     0 2px 12px rgba(0,0,0,0.25);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.35);
  --glass:      rgba(34,28,22,0.92);
  --nav-bg:     #221c16;
  --nav-border: #3e3428;
  --nav-active: var(--accent);
  --nav-text:   #b8a490;
  --nav-text-h: #f0e8df;
  --input-bg:   #2c241c;
  --logo-bg:    rgba(255,255,255,0.16);
  --meta-color: #e23744;
  --brand:      var(--accent);
  --brand-grad: linear-gradient(150deg, var(--accent) 0%, var(--accent2) 100%);
  --brand-text: #ffffff;
}

[data-theme="dark"] {
  --bg:         #0c0e14;
  --bg2:        #12151e;
  --bg3:        #1a1e2a;
  --surface:    #1a1e2a;
  --surface2:   #222838;
  --surface-h:  #2a3148;
  --border:     #2a3048;
  --border2:    #3a4260;
  --accent:     #6b8aff;
  --accent2:    #8b6cff;
  --accent-h:   #7d9aff;
  --accent-glow:rgba(107,138,255,0.1);
  --accent-glow2:rgba(107,138,255,0.2);
  --green:      #34d399;
  --green-bg:   rgba(52,211,153,0.08);
  --yellow:     #fbbf24;
  --yellow-bg:  rgba(251,191,36,0.07);
  --red:        #f87171;
  --red-bg:     rgba(248,113,113,0.07);
  --cyan:       #22d3ee;
  --cyan-bg:    rgba(34,211,238,0.06);
  --purple:     #c084fc;
  --purple-bg:  rgba(192,132,252,0.06);
  --text:       #e2e8f0;
  --text2:      #8b96b0;
  --text3:      #505c78;
  --shadow:     0 2px 12px rgba(0,0,0,0.3);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.45);
  --glass:      rgba(18,21,30,0.92);
  --nav-bg:     #12151e;
  --nav-border: #2a3048;
  --nav-active: var(--accent);
  --nav-text:   #8b96b0;
  --nav-text-h: #e2e8f0;
  --input-bg:   #1a1e2a;
  --logo-bg:    rgba(255,255,255,0.16);
  --meta-color: #e23744;
  --brand:      var(--accent);
  --brand-grad: linear-gradient(150deg, var(--accent) 0%, var(--accent2) 100%);
  --brand-text: #ffffff;
}

/* ── Smooth theme transitions ── */
html { transition: background-color 0.4s ease; }
html *, html *::before, html *::after {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.25s ease, box-shadow 0.3s ease;
}
canvas, svg, img, video, .no-trans { transition: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --radius:    10px;
  --radius-sm: 7px;
  --radius-lg: 14px;
  --font-body: 'DM Sans', 'Cairo', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --nav-h:     56px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body); background: var(--bg);
  color: var(--text); min-height: 100vh; line-height: 1.6; overflow-x: hidden;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════
   TOP NAVIGATION BAR (horizontal, matching screenshot)
   ═══════════════════════════════════════════════════════════════════════ */
.app-layout { display: flex; flex-direction: column; min-height: 100vh; }

.top-nav {
  height: var(--nav-h); background: var(--brand-grad); color: var(--brand-text);
  border-bottom: none;
  display: flex; align-items: center;
  padding: 0 14px; gap: 8px;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Hamburger that opens the side drawer (all screen sizes) */
.menu-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 10px;
  border: none; background: rgba(255,255,255,0.12); cursor: pointer;
  color: #fff; flex-shrink: 0;
}
.menu-toggle:hover { background: rgba(255,255,255,0.22); }
.menu-toggle svg { width: 22px; height: 22px; }

.nav-logo {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; flex-shrink: 0;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-logo-icon {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--logo-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff; font-weight: 800;
}
.nav-logo-icon svg { width: 18px; height: 18px; }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.nav-logo-title { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: 0.5px; }
.nav-logo-sub { font-size: 8.5px; color: rgba(255,255,255,0.7); font-weight: 500; letter-spacing: 0.5px; }

/* White controls on the brand (accent gradient) bar */
.top-nav .nav-btn { color: #fff; }
.top-nav .nav-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }
.top-nav .nav-dot { box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }

.nav-items {
  display: flex; align-items: center; gap: 2px;
  flex: 1; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav-items::-webkit-scrollbar { display: none; }

.nav-link {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; color: var(--nav-text);
  text-decoration: none; white-space: nowrap;
  position: relative;
}
.nav-link:hover { color: var(--nav-text-h); background: var(--surface-h); }
.nav-link.active { color: var(--nav-active); font-weight: 700; }
.nav-link.active::after {
  content: ''; position: absolute; bottom: -9px; left: 12px; right: 12px;
  height: 2px; background: var(--accent); border-radius: 1px;
}
.nav-link .nav-icon { font-size: 14px; opacity: 0.7; }
.nav-link.active .nav-icon { opacity: 1; }

.nav-badge-sm {
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--red); color: #fff;
  border-radius: 8px; font-size: 9px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
}

.nav-right {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto; flex-shrink: 0; padding-left: 12px;
}

.nav-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); flex-shrink: 0;
}

.nav-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  border: none; background: transparent; cursor: pointer;
  color: var(--nav-text); font-size: 16px; position: relative;
}
.nav-btn:hover { background: var(--surface-h); color: var(--nav-text-h); }
.nav-btn .dot {
  position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px; background: var(--red);
  border-radius: 50%; display: none;
}

/* Language dropdown */
.lang-dropdown {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 10px 5px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; font-size: 12px; font-weight: 600;
  color: var(--text2); position: relative;
}
.lang-dropdown:hover { border-color: var(--accent); color: var(--text); }
.lang-dropdown .lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--surface);
  border: 1px solid var(--border2); border-top-color: color-mix(in srgb, var(--border2) 55%, #fff 45%);
  border-radius: 18px; padding: 8px; min-width: 158px; overflow: hidden; z-index: 200;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent), 0 20px 46px rgba(0,0,0,.28), 0 6px 14px rgba(0,0,0,.16);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97);
  transition: all 0.18s cubic-bezier(.4,0,.2,1);
}
.lang-dropdown.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.lang-menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 13px; font-size: 13.5px; font-weight: 700; border-radius: 9px;
  color: var(--text); cursor: pointer; border: none;
  background: none; width: 100%; text-align: start;
}
.lang-menu-item:hover { background: var(--surface-h); color: var(--text); }
.lang-menu-item.active { background: var(--accent); color: #fff; }

/* Theme switcher in nav */
.theme-pills {
  display: flex; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface);
}
.theme-pill {
  padding: 5px 8px; border: none; background: transparent;
  cursor: pointer; font-size: 13px; color: var(--text3);
  display: flex; align-items: center; justify-content: center;
}
.theme-pill:hover { background: var(--surface-h); }
.theme-pill.active { background: var(--accent-glow); color: var(--accent); }

/* Mobile hamburger (legacy — drawer replaces it) */
.mobile-toggle {
  display: none; width: 36px; height: 36px; border-radius: 8px;
  border: none; background: var(--surface); cursor: pointer;
  font-size: 18px; color: var(--text2);
  align-items: center; justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   SIDE DRAWER NAV (opens from the hamburger, all screen sizes)
   ═══════════════════════════════════════════════════════════════════════ */
.side-overlay {
  position: fixed; inset: 0; background: rgba(15,18,26,0.5);
  opacity: 0; visibility: hidden; transition: opacity .25s ease; z-index: 300;
}
.side-overlay.active { opacity: 1; visibility: visible; }

.side-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; width: 308px; max-width: 86vw;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; z-index: 301;
  transform: translateX(-100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
  box-shadow: var(--shadow-lg);
}
.side-drawer.open { transform: translateX(0); }
[dir="rtl"] .side-drawer { left: auto; right: 0; border-right: none; border-left: 1px solid var(--border); transform: translateX(100%); }
[dir="rtl"] .side-drawer.open { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; background: var(--brand-grad); color: #fff; flex-shrink: 0;
}
.drawer-head .dh-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.drawer-head .dh-avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.drawer-head .dh-name { font-weight: 700; font-size: 14px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-head .dh-role { font-size: 10px; opacity: .8; font-family: var(--font-mono); text-transform: uppercase; }
.drawer-close { background: rgba(255,255,255,0.14); border: none; color: #fff; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.drawer-close:hover { background: rgba(255,255,255,0.28); }

.drawer-search { padding: 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.drawer-search input {
  width: 100%; height: 42px; border: 1px solid var(--border2); border-radius: 10px;
  background: var(--bg3); padding: 0 14px; font-size: 14px; color: var(--text); font-family: var(--font-body);
}
.drawer-search input:focus { outline: none; border-color: var(--accent); background: var(--surface); }

.drawer-body { flex: 1; overflow-y: auto; padding: 8px 8px 16px; }

.drawer-group { margin-bottom: 2px; }
.drawer-group-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; border: none; background: none; cursor: pointer;
  color: var(--text3); font-size: 11px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; font-family: var(--font-mono); text-align: start;
}
.drawer-group-head .dg-chev { margin-inline-start: auto; transition: transform .2s ease; display: inline-flex; }
.drawer-group.collapsed .dg-chev { transform: rotate(-90deg); }
.drawer-group.collapsed .drawer-links { display: none; }

.drawer-link {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: 10px; margin: 1px 0;
  color: var(--text); text-decoration: none; font-size: 14.5px; font-weight: 600;
}
.drawer-link .dl-ic { display: inline-flex; color: var(--text3); flex-shrink: 0; }
.drawer-link:hover { background: var(--surface-h); }
.drawer-link.active { background: var(--accent-glow); color: var(--accent); }
.drawer-link.active .dl-ic { color: var(--accent); }
.drawer-link .dl-badge { margin-inline-start: auto; min-width: 20px; height: 20px; padding: 0 6px; background: var(--red); color: #fff; border-radius: 10px; font-size: 11px; font-weight: 700; font-family: var(--font-mono); display: inline-flex; align-items: center; justify-content: center; }

.drawer-foot { border-top: 1px solid var(--border); padding: 12px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.drawer-foot .df-label { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); font-family: var(--font-mono); }
.drawer-foot .df-row { display: flex; gap: 8px; }

/* ═══════════════════════════════════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════════════════════════════════ */
.main-content { flex: 1; display: flex; flex-direction: column; }

.page {
  max-width: 1100px; width: 100%;
  margin: 0 auto; padding: 28px 24px; flex: 1;
}

.page-section { font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 1.5px; font-family: var(--font-mono); margin-bottom: 4px; }
.page-title { font-size: 26px; font-weight: 800; line-height: 1.2; margin-bottom: 4px; }
.page-desc { font-size: 14px; color: var(--text2); margin-bottom: 24px; }
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.card + .card { margin-top: 16px; }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border); gap: 12px; flex-wrap: wrap;
}
.card-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card-body { padding: 18px; }

/* ═══════════════════════════════════════════════════════════════════════
   KPI & STAT CARDS
   ═══════════════════════════════════════════════════════════════════════ */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-bottom: 24px;
}
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative; overflow: hidden;
}
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.stat-card.blue::before { background: var(--accent); }
.stat-card.green::before { background: var(--green); }
.stat-card.yellow::before { background: var(--yellow); }
.stat-card.red::before { background: var(--red); }
.stat-card.cyan::before { background: var(--cyan); }
.stat-card.purple::before { background: var(--purple); }
.stat-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }

.stat-icon { font-size: 22px; }
.stat-val { font-size: 28px; font-weight: 800; font-family: var(--font-mono); line-height: 1; }
.stat-label { font-size: 12px; color: var(--text3); font-weight: 500; }
.stat-trend { font-size: 11px; display: flex; align-items: center; gap: 4px; }
.stat-trend.up { color: var(--green); }
.stat-trend.down { color: var(--red); }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative; overflow: hidden;
}
.kpi-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; }
.kpi-card.blue::after { background: var(--accent); }
.kpi-card.green::after { background: var(--green); }
.kpi-card.cyan::after { background: var(--cyan); }
.kpi-card.yellow::after { background: var(--yellow); }
.kpi-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.kpi-value { font-size: 32px; font-weight: 800; font-family: var(--font-mono); line-height: 1; }
.kpi-label { font-size: 12px; color: var(--text3); font-weight: 500; }
.kpi-trend { font-size: 11px; display: flex; align-items: center; gap: 4px; }
.kpi-trend.up { color: var(--green); }

/* ═══════════════════════════════════════════════════════════════════════
   CHART CARDS
   ═══════════════════════════════════════════════════════════════════════ */
.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.chart-card .chart-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.chart-card .chart-title { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.chart-card .chart-body { padding: 16px; position: relative; min-height: 200px; }

.dashboard-charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 20px; }
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ═══════════════════════════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  background: var(--bg3); color: var(--text3);
  font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; padding: 10px 14px;
  text-align: left; white-space: nowrap; font-family: var(--font-mono);
}
tbody tr { border-bottom: 1px solid var(--border); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--surface-h); }
tbody td { padding: 12px 14px; vertical-align: middle; }
.td-main { font-weight: 600; }
.td-sub { font-size: 11.5px; color: var(--text3); margin-top: 2px; font-family: var(--font-mono); }

/* ═══════════════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  white-space: nowrap; font-family: var(--font-mono);
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge-blue   { background: var(--accent-glow); color: var(--accent); }
.badge-green  { background: var(--green-bg); color: var(--green); }
.badge-yellow { background: var(--yellow-bg); color: var(--yellow); }
.badge-red    { background: var(--red-bg); color: var(--red); }
.badge-cyan   { background: var(--cyan-bg); color: var(--cyan); }
.badge-purple { background: var(--purple-bg); color: var(--purple); }
.badge-gray   { background: rgba(128,128,128,0.07); color: var(--text3); }

/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 9px 18px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: none; text-decoration: none; white-space: nowrap;
  font-family: var(--font-body);
}
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-h); box-shadow: 0 2px 12px var(--accent-glow2); }

.btn-ghost { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--surface-h); border-color: var(--border2); }

.btn-danger { background: var(--red-bg); color: var(--red); border: 1px solid transparent; }
.btn-danger:hover { background: var(--red); color: #fff; }

.btn-success { background: var(--green-bg); color: var(--green); border: 1px solid transparent; }
.btn-success:hover { background: var(--green); color: #fff; }

.btn-warning { background: var(--yellow-bg); color: var(--yellow); }
.btn-warning:hover { background: var(--yellow); color: #fff; }

.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 6px; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════════════ */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.form-full { grid-column: 1 / -1; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 11.5px; font-weight: 700; color: var(--text2); letter-spacing: 0.5px; text-transform: uppercase; font-family: var(--font-mono); }
.form-label .req { color: var(--red); margin-left: 3px; }

.form-input, .form-select, .form-textarea {
  width: 100%; background: var(--input-bg);
  border: 1.5px solid var(--border2); border-radius: 11px;
  padding: 12px 15px; font-size: 14.5px; font-weight: 500; color: var(--text);
  font-family: var(--font-body); appearance: none;
  transition: border-color .14s, box-shadow .14s, background .14s;
}
.form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--text3); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-input::placeholder { color: var(--text3); }
.form-input.input-error, .input-error { border-color: var(--red) !important; box-shadow: 0 0 0 3px var(--red-bg) !important; }
.form-textarea { resize: vertical; min-height: 80px; line-height: 1.6; }
/* ═══ 3D DROPDOWN — rounded, raised, theme-aware (all platform selects) ═══ */
.form-select, select.form-input {
  cursor: pointer; padding: 13px 16px; padding-inline-end: 46px;
  color: var(--text); font-weight: 700; letter-spacing: .2px;
  border: 1px solid var(--border2); border-top-color: color-mix(in srgb, var(--border2) 55%, #fff 45%);
  border-radius: 16px;
  background-color: var(--surface);
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, #fff 10%) 0%, var(--surface) 56%, color-mix(in srgb, var(--surface) 90%, #000 10%) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' stroke='%238b95a8' fill='none' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: center, right 17px center;
  background-size: cover, 14px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),    /* top highlight */
    inset 0 -3px 8px rgba(0,0,0,.08),                            /* bottom inner shadow */
    0 7px 16px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.07);       /* elevation */
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
[dir="rtl"] .form-select, [dir="rtl"] select.form-input { background-position: center, left 17px center; }
.form-select:hover, select.form-input:hover {
  transform: translateY(-1px); border-top-color: color-mix(in srgb, var(--accent) 45%, #fff 55%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 62%, transparent), inset 0 -3px 8px rgba(0,0,0,.10),
    0 12px 24px rgba(0,0,0,.18), 0 3px 6px rgba(0,0,0,.10);
}
.form-select:active, select.form-input:active { transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.10); }
.form-select:focus, select.form-input:focus {
  outline: none; border-color: var(--accent); transform: translateY(0);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent), 0 0 0 3px var(--accent-glow), 0 8px 20px rgba(0,0,0,.16);
}
/* the dropdown list panel + each option (theme-aware) */
.form-select option, select.form-input option {
  background-color: var(--surface); color: var(--text); font-weight: 700; padding: 12px 14px; letter-spacing: .2px;
}
.form-select option:checked, select.form-input option:checked { background: var(--accent); color: #ffffff; }
.form-select option:hover, select.form-input option:hover { background: var(--accent); color: #ffffff; }
.form-select option[disabled], select.form-input option[disabled] { color: var(--text3); }

/* ═══ CUSTOM POPUP SELECT — native <select> enhanced into a popup-window dropdown ═══ */
.csel { position: relative; width: 100%; display: block; }
.csel-auto { width: auto; display: inline-block; min-width: 170px; }
.csel > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; z-index: -1; margin: 0; border: 0; }
.csel-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; width: 100%; cursor: pointer; text-align: start;
  padding: 13px 16px; color: var(--text); font-weight: 700; letter-spacing: .2px; font-size: 14.5px; font-family: var(--font-body);
  border: 1px solid var(--border2); border-top-color: color-mix(in srgb, var(--border2) 55%, #fff 45%); border-radius: 16px;
  background: var(--surface);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, #fff 10%) 0%, var(--surface) 56%, color-mix(in srgb, var(--surface) 90%, #000 10%) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent), inset 0 -3px 8px rgba(0,0,0,.08), 0 7px 16px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.07);
  transition: transform .12s, box-shadow .15s, border-color .15s; }
.csel-auto > .csel-btn { width: auto; min-width: 170px; }
.csel-btn:hover { transform: translateY(-1px); border-top-color: color-mix(in srgb, var(--accent) 45%, #fff 55%); }
.csel.open .csel-btn { border-color: var(--accent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent), 0 0 0 3px var(--accent-glow), 0 8px 20px rgba(0,0,0,.16); }
.csel-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-val.placeholder { color: var(--text3); font-weight: 600; }
.csel-arrow { flex-shrink: 0; color: var(--text3); transition: transform .15s; }
.csel.open .csel-arrow { transform: rotate(180deg); }
.csel-menu { position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: calc(100% + 8px); z-index: 70; display: none;
  min-width: 100%; max-height: 308px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border2); border-top-color: color-mix(in srgb, var(--border2) 55%, #fff 45%);
  border-radius: 16px; padding: 7px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent), 0 18px 44px rgba(0,0,0,.22); }
.csel-auto .csel-menu { inset-inline-start: auto; inset-inline-end: 0; min-width: 230px; width: max-content; max-width: min(86vw, 360px); }
.csel.open .csel-menu { display: block; animation: cselIn .15s ease; }
@keyframes cselIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.csel-opt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: start; cursor: pointer; border: none; background: none;
  padding: 10px 11px; border-radius: 10px; color: var(--text2); font-size: 14px; font-weight: 600; font-family: var(--font-body); white-space: nowrap; }
.csel-opt:hover, .csel-opt:focus { background: var(--surface-h); color: var(--text); outline: none; }
.csel-opt.on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); font-weight: 700; }
.csel-opt.on::after { content: '✓'; margin-inline-start: auto; color: var(--accent); font-weight: 800; font-size: 12px; }
.csel-opt[disabled] { opacity: .45; cursor: default; }
.csel-opt[disabled]:hover { background: none; color: var(--text2); }
.form-hint { font-size: 11px; color: var(--text3); }
.filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.search-wrap { position: relative; }
.search-wrap .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text3); font-size: 14px; pointer-events: none; }
.search-input { padding-left: 36px !important; }

/* Source chips, upload zones */
.source-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.source-chip { display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text2); cursor: pointer; }
.source-chip:hover { border-color: var(--accent); color: var(--accent); }
.source-chip.active { border-color: var(--accent); background: var(--accent-glow); color: var(--accent); }

.upload-zone { border: 2px dashed var(--border2); border-radius: var(--radius); padding: 36px 20px; text-align: center; cursor: pointer; }
.upload-zone:hover { border-color: var(--accent); background: var(--accent-glow); }
.upload-zone-icon { font-size: 36px; margin-bottom: 12px; }
.upload-zone-text { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.upload-zone-sub { font-size: 12px; color: var(--text3); }

/* ═══════════════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════════════ */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 200; display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s;
  backdrop-filter: blur(4px);
}
.modal-backdrop.active { opacity: 1; visibility: visible; }
.modal {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.modal-backdrop.active .modal { transform: translateY(0); }
.modal-handle { width: 40px; height: 4px; background: var(--border2); border-radius: 2px; margin: 12px auto 0; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-title { font-size: 15px; font-weight: 800; }
.modal-close { width: 32px; height: 32px; border: none; background: var(--surface-h); border-radius: 8px; color: var(--text2); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: var(--red-bg); color: var(--red); }
.modal-body { padding: 20px; }
.modal-footer { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }

/* ═══════════════════════════════════════════════════════════════════════
   CALL TIMER, STATUS FLOW, LEAD/EMPTY/PROGRESS/TABS/TOAST/CHECKBOX
   ═══════════════════════════════════════════════════════════════════════ */
.call-timer { display: flex; align-items: center; gap: 12px; padding: 20px; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 20px; }
.timer-ring { position: relative; width: 80px; height: 80px; }
.timer-ring svg { transform: rotate(-90deg); }
.timer-ring circle { fill: none; stroke-width: 5; }
.timer-ring .track { stroke: var(--border2); }
.timer-ring .progress { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.timer-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--accent); }
.timer-label.urgent { color: var(--red); }
.timer-info { flex: 1; }
.timer-title { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.timer-sub { font-size: 11.5px; color: var(--text3); }

.status-flow { display: flex; align-items: center; overflow-x: auto; padding: 4px 0; -webkit-overflow-scrolling: touch; }
.flow-step { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 80px; position: relative; }
.flow-step + .flow-step::before { content: ''; position: absolute; left: -50%; top: 16px; width: 100%; height: 2px; background: var(--border2); z-index: 0; }
.flow-step.done + .flow-step::before { background: var(--accent); }
.flow-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; background: var(--bg3); border: 2px solid var(--border2); z-index: 1; position: relative; }
.flow-step.done .flow-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.flow-step.current .flow-dot { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); box-shadow: 0 0 12px var(--accent-glow2); }
.flow-label { font-size: 9.5px; color: var(--text3); text-align: center; font-family: var(--font-mono); line-height: 1.3; }
.flow-step.done .flow-label { color: var(--accent); }
.flow-step.current .flow-label { color: var(--text); font-weight: 700; }

.lead-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 10px; }
.lead-card:hover { box-shadow: var(--shadow); }
.lead-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lead-card-name { font-size: 14px; font-weight: 700; }
.lead-card-phone { font-size: 12px; color: var(--text3); font-family: var(--font-mono); margin-top: 2px; }
.lead-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lead-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.empty-state { text-align: center; padding: 48px 20px; color: var(--text3); }
.empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.4; }
.empty-title { font-size: 15px; font-weight: 600; color: var(--text2); margin-bottom: 4px; }
.empty-sub { font-size: 13px; }

.progress { height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.6s; }

.tab-list { display: flex; gap: 2px; background: var(--bg3); border-radius: var(--radius-sm); padding: 3px; overflow-x: auto; }
.tab-btn { padding: 8px 16px; border: none; background: none; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--text3); cursor: pointer; white-space: nowrap; font-family: var(--font-body); }
.tab-btn:hover { color: var(--text2); }
.tab-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.tab-content { display: none; }
.tab-content.active { display: block; }

.toast-container { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: calc(100% - 32px); max-width: 360px; }
.toast { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-lg); width: 100%; animation: toastIn 0.3s forwards; }
.toast.exit { animation: toastOut 0.3s forwards; }
.toast.success { border-color: rgba(45,134,89,0.3); }
.toast.error { border-color: rgba(192,57,43,0.3); }
.toast.warning { border-color: rgba(184,134,11,0.3); }
.toast-icon { font-size: 16px; }
.toast.success .toast-icon { color: var(--green); }
.toast.error .toast-icon { color: var(--red); }
.toast.warning .toast-icon { color: var(--yellow); }

.checkbox-custom { width: 16px; height: 16px; border: 1.5px solid var(--border2); border-radius: 4px; background: var(--input-bg); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.checkbox-custom.checked { background: var(--accent); border-color: var(--accent); }
.checkbox-custom.checked::after { content: '✓'; color: #fff; font-size: 10px; font-weight: 900; }

.product-list { display: flex; flex-direction: column; gap: 8px; }
.product-row { display: flex; align-items: center; gap: 8px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }

/* Notification panel, real-time, ETA, OCR */
.rt-status { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: var(--green); font-family: var(--font-mono); }
.rt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }

/* Notifications — popup card under the bell (matches the filter popups) */
.notification-panel { position: fixed; top: 62px; inset-inline-end: 14px; width: 420px; max-width: calc(100vw - 24px); max-height: min(74vh, 600px);
  background: var(--surface); border: 1px solid var(--border2); border-top-color: color-mix(in srgb, var(--border2) 55%, #fff 45%);
  border-radius: 20px; box-shadow: inset 0 1px 0 color-mix(in srgb,#fff 50%,transparent), 0 24px 60px rgba(0,0,0,.32), 0 8px 18px rgba(0,0,0,.18);
  z-index: 250; display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.98); transition: opacity .18s ease, transform .18s cubic-bezier(.4,0,.2,1), visibility .18s; }
.notification-panel.open { opacity: 1; visibility: visible; transform: none; }
/* Notification rows — bigger & clearer */
.nt-item { display: flex; gap: 11px; align-items: flex-start; padding: 13px 13px; border-radius: 13px; cursor: pointer; transition: background .12s; }
.nt-item:hover { background: var(--surface-h); }
.nt-item.unread { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.nt-ic { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: var(--surface2); color: var(--text2); }
.nt-ic svg { width: 19px; height: 19px; }
.nt-ic.nt-order, .nt-ic.nt-status { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.nt-ic.nt-success { background: var(--green-bg); color: var(--green); }
.nt-ic.nt-warning { background: var(--yellow-bg); color: var(--yellow); }
.nt-ic.nt-lead { background: color-mix(in srgb, var(--cyan) 16%, transparent); color: var(--cyan); }
.nt-body { flex: 1; min-width: 0; }
.nt-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; }
.nt-sub { font-size: 12.5px; color: var(--text2); margin-top: 2px; line-height: 1.45; }
.nt-time { font-size: 11px; color: var(--text3); font-family: var(--font-mono); margin-top: 5px; }
.nt-unread { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 7px; }

.notif-count { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; background: var(--red); color: #fff; border-radius: 10px; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; font-family: var(--font-mono); }

.eta-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px; background: var(--cyan-bg); color: var(--cyan); font-size: 12px; font-weight: 700; font-family: var(--font-mono); }

.ocr-status { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; }
.ocr-status.matched { background: var(--green-bg); color: var(--green); }
.ocr-status.unmatched { background: var(--red-bg); color: var(--red); }
.ocr-status.pending { background: var(--yellow-bg); color: var(--yellow); }

.ocr-queue-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; }
.ocr-queue-badge.queued { background: var(--yellow-bg); color: var(--yellow); }
.ocr-queue-badge.processing { background: var(--accent-glow); color: var(--accent); }
.ocr-queue-badge.completed { background: var(--green-bg); color: var(--green); }
.ocr-queue-badge.failed { background: var(--red-bg); color: var(--red); }

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════ */
.app-footer {
  text-align: center; padding: 24px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text3);
}

/* ═══════════════════════════════════════════════════════════════════════
   UTILS
   ═══════════════════════════════════════════════════════════════════════ */
.font-mono { font-family: var(--font-mono); }
.text-sm { font-size: 12px; } .text-xs { font-size: 11px; }
.text-muted { color: var(--text3); } .text-accent { color: var(--accent); }
.text-green { color: var(--green); } .text-red { color: var(--red); }
.font-bold { font-weight: 700; }
.mt-1 { margin-top: 6px; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 16px; }
.mb-2 { margin-bottom: 12px; } .mb-3 { margin-bottom: 16px; }
.w-full { width: 100%; }
.hidden { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
@keyframes toastIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; transform:translateY(8px); } }
@keyframes countUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }

.animate-fade { animation: fadeIn 0.3s ease; }
.animate-slide { animation: slideUp 0.35s ease; }
.stagger-children > * { opacity: 0; animation: slideUp 0.45s cubic-bezier(0.22,1,0.36,1) forwards; }
.stagger-children > *:nth-child(1) { animation-delay: .04s; }
.stagger-children > *:nth-child(2) { animation-delay: .08s; }
.stagger-children > *:nth-child(3) { animation-delay: .12s; }
.stagger-children > *:nth-child(4) { animation-delay: .16s; }
.stagger-children > *:nth-child(5) { animation-delay: .20s; }
.stagger-children > *:nth-child(6) { animation-delay: .24s; }
.stagger-children > *:nth-child(7) { animation-delay: .28s; }
.stagger-children > *:nth-child(8) { animation-delay: .32s; }

.value-changed { animation: countUp 0.4s ease; color: var(--accent) !important; }

.spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; }

/* ═══════════════════════════════════════════════════════════════════════
   LOGIN
   ═══════════════════════════════════════════════════════════════════════ */
.login-bg { min-height: 100vh; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; }
.login-bg::before { content: ''; position: absolute; top: -20%; right: -10%; width: 50%; height: 50%; background: radial-gradient(circle, var(--accent-glow2) 0%, transparent 70%); pointer-events: none; }
.login-box { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 30px; width: 100%; max-width: 380px; box-shadow: var(--shadow-lg); position: relative; }
.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo-icon { width: 56px; height: 56px; background: var(--logo-bg); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 14px; color: #fff; box-shadow: 0 4px 24px var(--accent-glow2); }
.login-title { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.login-sub { font-size: 13px; color: var(--text3); }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
/* ── TABLET ── */
@media (max-width: 1024px) {
  .page { max-width: 100%; }
  .dashboard-charts { grid-template-columns: 1fr 1fr; }
}

/* ── MOBILE LAYOUT (the side drawer handles nav at every size) ── */
@media (max-width: 900px) {
  .page { padding: 16px; }
  .dashboard-charts, .dashboard-grid { grid-template-columns: 1fr; }
  .stats-grid, .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .nav-logo-sub { display: none; }
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ── PHONE ── */
@media (max-width: 600px) {
  :root { --nav-h: 52px; }
  .page { padding: 12px; }
  .page-title { font-size: 18px; }
  .page-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-header .btn { width: 100%; justify-content: center; }
  .stats-grid, .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .stat-card, .kpi-card { padding: 12px; }
  .stat-val, .kpi-value { font-size: 20px !important; }
  .stat-card .stat-icon { font-size: 18px; }

  /* Forms stack */
  .form-grid, .form-row { grid-template-columns: 1fr !important; }
  .filter-row { flex-direction: column; align-items: stretch; }
  .filter-row > * { width: 100%; }

  /* Dropdowns + popup menus adapt to the screen — bigger touch targets, no overflow */
  .form-select, select.form-input { padding: 14px 16px; padding-inline-end: 46px; border-radius: 14px; }
  .filter-row .form-select, .ocontrols .omonth { width: 100%; min-width: 0; }
  /* Custom popup dropdown menus: fit the viewport, never run off-screen */
  .list-menu-pop, .lang-dropdown .lang-menu {
    min-width: 0; width: max-content; max-width: calc(100vw - 20px); border-radius: 16px;
  }
  .lm-item, .lang-menu-item { padding: 13px 13px; font-size: 14.5px; }
  /* All popups become CENTRED overlays (with a dim backdrop) so they fit any phone */
  .opop.open .opop-menu,
  .csel.open .csel-menu,
  .lang-dropdown.open .lang-menu,
  .list-menu.open .list-menu-pop,
  .notification-panel.open {
    position: fixed !important; left: 50% !important; right: auto !important; inset-inline-end: auto !important;
    top: 50% !important; bottom: auto !important; transform: translate(-50%, -50%) !important;
    width: min(93vw, 410px) !important; max-width: 93vw !important; max-height: 82vh !important; overflow-y: auto;
    margin: 0 !important; border-radius: 20px !important; z-index: 400 !important; animation: none !important;
    box-shadow: 0 0 0 100vmax rgba(0,0,0,.45), 0 18px 50px rgba(0,0,0,.45) !important;
  }
  .notification-panel.open { display: flex !important; }

  /* Buttons */
  .btn-group { flex-wrap: wrap; }
  .btn-group .btn { flex: 1 1 auto; justify-content: center; }
  .card-header { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Tables → stacked cards */
  table.responsive thead { display: none; }
  table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display: block; width: 100%; }
  table.responsive tr {
    margin-bottom: 10px; border: 1px solid var(--border);
    border-radius: 10px; padding: 10px 12px; background: var(--surface);
  }
  table.responsive td {
    padding: 5px 0; border: none; text-align: right;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
  }
  table.responsive td::before {
    content: attr(data-label); font-weight: 700; color: var(--text3);
    font-size: 11px; text-transform: uppercase; letter-spacing: .5px; text-align: left;
  }
  table.responsive td:empty { display: none; }

  /* Tabs scroll */
  .tab-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Modals full-width */
  .modal { max-width: 100%; border-radius: 16px 16px 0 0; }
  .modal-footer { flex-direction: column-reverse; }
  .modal-footer .btn { width: 100%; justify-content: center; }

  /* Touch targets */
  .btn { min-height: 42px; }
  .nav-btn, .icon-btn { min-width: 40px; min-height: 40px; }
  .form-input, .form-select, .form-textarea { font-size: 16px; } /* prevents iOS zoom */

  /* Order/warehouse cards */
  .wh-card, .lead-card, .order-card { padding: 12px !important; }
  .wh-card-actions, .order-actions { flex-wrap: wrap; }
  .wh-card-actions .btn { flex: 1 1 auto; }

  /* Login */
  .login-box { padding: 24px 18px; }
  .auth-card { padding: 24px 18px !important; }
}

/* ── SMALL PHONE ── */
@media (max-width: 380px) {
  .stats-grid, .kpi-grid { grid-template-columns: 1fr !important; }
  .theme-pills { gap: 0; }
  .nav-right { gap: 4px; }
}

@media print {
  .top-nav, .app-footer, .no-print { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .card { border: 1px solid #ccc !important; box-shadow: none !important; background: #fff !important; }
}

/* ═══ CUSTOM CONFIRM DIALOG ═══ */
.confirm-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1100;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;backdrop-filter:blur(4px)}
.confirm-backdrop.active{opacity:1;visibility:visible}
.confirm-box{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:28px 24px;max-width:380px;width:100%;text-align:center;box-shadow:var(--shadow-lg);transform:scale(.92) translateY(10px);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.confirm-backdrop.active .confirm-box{transform:scale(1) translateY(0)}
.confirm-icon{width:56px;height:56px;margin:0 auto 16px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.confirm-icon.danger{background:var(--red-bg);color:var(--red)}
.confirm-icon.primary{background:var(--accent-glow);color:var(--accent)}
.confirm-title{font-size:18px;font-weight:800;margin-bottom:6px;color:var(--text)}
.confirm-msg{font-size:14px;color:var(--text2);margin-bottom:24px;line-height:1.5}
.confirm-actions{display:flex;gap:10px}
.confirm-actions .btn{flex:1;justify-content:center;padding:11px}
@media(max-width:480px){.confirm-box{padding:24px 18px}.confirm-actions{flex-direction:column-reverse}}

/* ═══ MODERN DASHBOARD — sliding stats + chart carousel ═══ */
.dash-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.live-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--green);background:var(--green-bg);padding:5px 11px;border-radius:20px;font-family:var(--font-mono)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
.stat-strip-wrap{position:relative;margin-bottom:18px}
.stat-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px}
.stat-strip::-webkit-scrollbar{display:none}
.mstat{flex:0 0 auto;width:165px;scroll-snap-align:start;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:15px;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.mstat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.mstat::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 60%,var(--accent-glow));opacity:0;transition:opacity .3s}
.mstat:hover::after{opacity:1}
.mstat-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;position:relative;z-index:1}
.mstat-ic.blue{background:var(--accent-glow);color:var(--accent)}
.mstat-ic.green{background:var(--green-bg);color:var(--green)}
.mstat-ic.cyan{background:var(--cyan-bg);color:var(--cyan)}
.mstat-ic.purple{background:var(--purple-bg);color:var(--purple)}
.mstat-ic.yellow{background:var(--yellow-bg);color:var(--yellow)}
.mstat-ic.red{background:var(--red-bg);color:var(--red)}
.mstat-v{font-size:26px;font-weight:800;font-family:var(--font-mono);line-height:1;position:relative;z-index:1}
.mstat-l{font-size:11.5px;color:var(--text3);margin-top:4px;font-weight:500;position:relative;z-index:1}
.mstat-d{font-size:10px;font-family:var(--font-mono);color:var(--text3);margin-top:4px;font-weight:600}
.mstat-d.up{color:var(--green)}.mstat-d.down{color:var(--red)}
.strip-nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text2);cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:var(--shadow);z-index:5}
.strip-nav:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.strip-nav.prev{left:-8px;transform:translateY(-50%) rotate(180deg)}
.strip-nav.next{right:-8px}
@media(hover:hover){.stat-strip-wrap:hover .strip-nav{display:flex}}
[dir=rtl] .strip-nav.prev{left:auto;right:-8px;transform:translateY(-50%) rotate(0)}
[dir=rtl] .strip-nav.next{right:auto;left:-8px;transform:translateY(-50%) rotate(180deg)}
.sa-perf{display:grid;grid-template-columns:repeat(4,1fr);padding:16px}
.sa-perf-item{text-align:center;border-right:1px solid var(--border)}
.sa-perf-item:last-child{border-right:none}
.sa-perf-item .v{font-size:26px;font-weight:800;font-family:var(--font-mono)}
.sa-perf-item .l{font-size:11px;color:var(--text3);margin-top:3px}
[dir=rtl] .sa-perf-item{border-right:none;border-left:1px solid var(--border)}
[dir=rtl] .sa-perf-item:last-child{border-left:none}
.chart-carousel-wrap{margin-bottom:18px}
.chart-carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:14px}
.chart-carousel::-webkit-scrollbar{display:none}
.chart-slide{flex:0 0 100%;scroll-snap-align:center;padding:0 4px}
.chart-card-m{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;height:100%}
.ccm-head{padding:14px 18px;border-bottom:1px solid var(--border);font-size:13px;font-weight:700;color:var(--text2);display:flex;align-items:center;gap:8px}
.ccm-body{padding:18px;height:300px;position:relative}
.ccm-body canvas{max-height:264px}
.carousel-dots{display:flex;justify-content:center;gap:7px;margin-top:12px}
.cdot{width:8px;height:8px;border-radius:50%;border:none;background:var(--border2);cursor:pointer;padding:0;transition:all .2s}
.cdot.active{background:var(--accent);width:22px;border-radius:4px}
.dash-bottom{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mobile-menu-controls{display:none}
.brand-icon{flex-shrink:0}

@media(max-width:900px){
  .dash-bottom{grid-template-columns:1fr}
  .top-nav{gap:6px}
  .nav-logo{margin-inline-end:auto}
  .mobile-toggle{order:5;margin-inline-start:4px}
  .nav-right{order:4;gap:4px}
  .nav-right .theme-pills,.nav-right .lang-dropdown{display:none}
  .mobile-menu-controls{display:block;border-top:1px solid var(--border);margin-top:8px;padding-top:14px}
  .mmc-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);margin:6px 2px 8px;font-family:var(--font-mono)}
  .mobile-menu-controls .theme-pills{display:flex;gap:6px;margin-bottom:6px}
  .mobile-menu-controls .theme-pill{flex:1;justify-content:center;padding:9px;border:1px solid var(--border);border-radius:9px;font-size:12px}
  .mobile-menu-controls .btn-group{display:flex;gap:6px}
  .mobile-menu-controls .btn-group .btn{flex:1}
  .mstat{width:150px}
}
@media(max-width:600px){
  .dash-head{flex-direction:row;align-items:center}
  .mstat{width:140px;padding:13px}
  .mstat-v{font-size:22px}
  .ccm-body{height:260px}
  .ccm-body canvas{max-height:224px}
  .sa-perf{grid-template-columns:repeat(2,1fr);gap:12px 0}
  .sa-perf-item:nth-child(2){border-right:none}
  [dir=rtl] .sa-perf-item:nth-child(2){border-left:none}
}

/* ═══════════════════════════════════════════════════════════════
   COMMAND-CENTER DASHBOARD
   ═══════════════════════════════════════════════════════════════ */
.dash-cmd .live-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--green);background:var(--green-bg);padding:5px 11px;border-radius:20px;font-family:var(--font-mono)}
.dash-cmd .live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
.dash-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}
.cmd-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.04);overflow:hidden}
.cmd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px;border-bottom:1px solid var(--border)}
.cmd-title{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:800;color:var(--text)}
.cmd-title svg{color:var(--accent)}
.cmd-body{padding:18px}

/* Hero KPIs */
.hero-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.hero-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px;box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.04);border-left:4px solid var(--border2);transition:transform .18s,box-shadow .18s}
.hero-card:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(0,0,0,.10)}
.hero-card.accent-blue{border-left-color:#3b82f6}
.hero-card.accent-green{border-left-color:#2d9b6f}
.hero-card.accent-amber{border-left-color:#d97706}
.hero-card.accent-red{border-left-color:#dc2626}
[dir=rtl] .hero-card{border-left:1px solid var(--border);border-right:4px solid var(--border2)}
[dir=rtl] .hero-card.accent-blue{border-right-color:#3b82f6}
[dir=rtl] .hero-card.accent-green{border-right-color:#2d9b6f}
[dir=rtl] .hero-card.accent-amber{border-right-color:#d97706}
[dir=rtl] .hero-card.accent-red{border-right-color:#dc2626}
.hero-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.hero-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.hero-ic.blue{background:rgba(59,130,246,.12);color:#3b82f6}
.hero-ic.green{background:var(--green-bg);color:var(--green)}
.hero-ic.yellow{background:rgba(217,119,6,.12);color:#d97706}
.hero-ic.red{background:var(--red-bg);color:var(--red)}
.hero-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;font-family:var(--font-mono);padding:4px 9px;border-radius:20px;background:var(--bg3);color:var(--text3)}
.hero-badge.up,.hero-badge.good{background:var(--green-bg);color:var(--green)}
.hero-badge.warn{background:rgba(217,119,6,.12);color:#d97706}
.hero-badge.alert{background:var(--red-bg);color:var(--red)}
.hero-val{font-size:34px;font-weight:800;font-family:var(--font-mono);line-height:1;letter-spacing:-1px}
.hero-label{font-size:12.5px;color:var(--text3);margin-top:5px;font-weight:600}
.hero-spark{height:36px;margin-top:10px}
.hero-sub{font-size:11px;color:var(--text3);margin-top:10px;display:flex;align-items:center;gap:5px}
.split-bar{display:flex;height:7px;border-radius:6px;overflow:hidden;margin-top:12px;background:var(--bg3);gap:2px}
.split-fill.warn{background:#d97706}.split-fill.good{background:#2d9b6f}
.split-legend{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text3);margin-top:7px;font-family:var(--font-mono)}
.split-legend .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-inline-end:4px}
.dot.warn{background:#d97706}.dot.good{background:#2d9b6f}

/* Insights ribbon */
.insights-ribbon{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin-bottom:16px}
.insights-ribbon::-webkit-scrollbar{display:none}
.insights-ribbon:empty{display:none}
.insight{flex:0 0 auto;max-width:440px;display:flex;align-items:flex-start;gap:9px;padding:11px 14px;border-radius:10px;font-size:12.5px;line-height:1.45;border:1px solid;background:var(--surface)}
.insight svg{flex-shrink:0;margin-top:1px}
.insight.warn{border-color:rgba(217,119,6,.4);background:rgba(217,119,6,.07);color:#b45309}
.insight.alert{border-color:rgba(220,38,38,.4);background:rgba(220,38,38,.07);color:#b91c1c}
.insight.info{border-color:var(--border2);background:var(--bg3);color:var(--text2)}
.insight.good{border-color:rgba(45,155,111,.4);background:rgba(45,155,111,.07);color:#15803d}
.ins-x{background:none;border:none;cursor:pointer;color:inherit;opacity:.5;padding:0;display:flex;flex-shrink:0;margin-inline-start:auto}
.ins-x:hover{opacity:1}

/* Pulse cards */
.pulse-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.pulse-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:15px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.pulse-head{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--text3);margin-bottom:9px}
.pulse-head svg{color:var(--accent)}
.pulse-main{font-size:24px;font-weight:800;font-family:var(--font-mono);line-height:1;display:flex;align-items:baseline;gap:5px}
.pulse-main small{font-size:12px;color:var(--text3);font-weight:600}
.pulse-sub{font-size:11px;color:var(--text3);margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pulse-dots{display:flex;gap:5px;margin-top:10px}
.adot{width:9px;height:9px;border-radius:50%}
.adot.on{background:var(--green)}.adot.off{background:var(--border2)}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;font-size:10.5px;font-weight:700}
.chip.red{background:var(--red-bg);color:var(--red)}.chip.green{background:var(--green-bg);color:var(--green)}

/* Pipeline */
.pipeline-row{display:flex;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.pipeline-row::-webkit-scrollbar{display:none}
.pl-node{flex:1;min-width:96px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:10px;text-align:center;transition:all .2s}
.pl-node.muted{opacity:.45}
.pl-node.filled{background:var(--bg3)}
.pl-node.active{background:var(--accent-glow);box-shadow:inset 0 0 0 1.5px var(--accent)}
.pl-node.active .pl-dot{background:var(--accent);color:#fff;border-color:var(--accent);animation:plPulse 2s infinite}
@keyframes plPulse{0%,100%{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 0 6px transparent}}
.pl-dot{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface);border:2px solid var(--border2);color:var(--text2)}
.pl-node.filled .pl-dot{color:var(--accent)}
.pl-name{font-size:10.5px;color:var(--text3);font-weight:600;line-height:1.2}
.pl-count{font-size:17px;font-weight:800;font-family:var(--font-mono)}
.pl-arrow{display:flex;align-items:center;color:var(--border2);flex:0 0 auto}
[dir=rtl] .pl-arrow svg{transform:rotate(180deg)}
.pl-health{display:flex;height:8px;border-radius:6px;overflow:hidden;margin-top:14px;background:var(--bg3);gap:2px}
.plh-seg{height:100%;transition:width .5s}

/* SA perf */
.sa-perf{display:grid;grid-template-columns:repeat(4,1fr);padding:16px}
.sa-perf-item{text-align:center;border-right:1px solid var(--border)}
.sa-perf-item:last-child{border-right:none}
.sa-perf-item .v{font-size:26px;font-weight:800;font-family:var(--font-mono)}
.sa-perf-item .l{font-size:11px;color:var(--text3);margin-top:3px}
[dir=rtl] .sa-perf-item{border-right:none;border-left:1px solid var(--border)}
[dir=rtl] .sa-perf-item:last-child{border-left:none}

/* Analytics grid */
.analytics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.chart-h{height:220px;position:relative}
.funnel-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px;color:var(--border2)}
[dir=rtl] .funnel-row svg{transform:rotate(180deg)}
.fn-step{text-align:center}
.fn-step b{display:block;font-size:20px;font-weight:800;font-family:var(--font-mono);color:var(--text)}
.fn-step span{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}

/* Donut */
.donut-wrap{display:flex;justify-content:center;margin-bottom:12px}
.donut-c{position:relative;width:170px;height:170px}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.donut-center b{font-size:28px;font-weight:800;font-family:var(--font-mono);line-height:1}
.donut-center span{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.status-table{display:flex;flex-direction:column;gap:4px}
.st-row{display:flex;align-items:center;gap:8px;font-size:12px;padding:4px 0}
.st-dot{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.st-name{flex:1;text-transform:capitalize;color:var(--text2)}
.st-row b{font-family:var(--font-mono)}
.st-pct{font-family:var(--font-mono);color:var(--text3);font-size:11px;min-width:34px;text-align:right}
.mini-insight{display:flex;align-items:center;gap:7px;margin-top:10px;padding:9px 11px;border-radius:8px;background:rgba(217,119,6,.08);color:#b45309;font-size:11.5px;line-height:1.4}

/* Agent panel */
.agent-panel{display:flex;flex-direction:column;gap:9px}
.muted-note{color:var(--text3);font-size:12px;text-align:center;padding:18px}
.ag-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name stats" "bar bar" "badge badge";gap:5px 10px;padding:10px;border:1px solid var(--border);border-radius:9px}
.ag-row.off{opacity:.55}
.ag-name{grid-area:name;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.ag-name svg{color:#d97706}
.ag-role{font-size:9px;font-family:var(--font-mono);background:var(--bg3);color:var(--text3);padding:1px 5px;border-radius:5px;font-style:normal}
.ag-stats{grid-area:stats;display:flex;gap:10px;font-family:var(--font-mono);font-size:13px;font-weight:700;align-items:center}
.ag-stats small{font-size:9px;color:var(--text3);margin-inline-start:1px}
.ag-bar{grid-area:bar;height:5px;background:var(--bg3);border-radius:4px;overflow:hidden}
.ag-fill{height:100%;background:var(--accent);border-radius:4px}
.ag-badge{grid-area:badge;justify-self:start;font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.4px}
.ag-badge.on{background:var(--green-bg);color:var(--green)}
.ag-badge.offb{background:var(--bg3);color:var(--text3)}

/* Bottom grid */
.bottom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.empty-mini{flex-direction:column;align-items:center;justify-content:center;gap:8px;height:200px;color:var(--text3);font-size:12.5px;display:flex}
.empty-mini svg{opacity:.4}
.ls-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;text-align:center}
.ls-summary b{display:block;font-size:22px;font-weight:800;font-family:var(--font-mono)}
.ls-summary span{font-size:10px;color:var(--text3)}
.txt-red{color:var(--red)}.txt-green{color:var(--green)}
.ls-alert{display:flex;align-items:center;gap:8px;padding:11px;border-radius:9px;background:var(--red-bg);color:var(--red);font-size:12px;font-weight:600;line-height:1.4}
.ls-ok{display:flex;align-items:center;gap:8px;padding:11px;border-radius:9px;background:var(--green-bg);color:var(--green);font-size:12px;font-weight:600}
.rev-big{font-size:30px;font-weight:800;font-family:var(--font-mono);letter-spacing:-1px;margin-bottom:14px}
.rev-big small{font-size:12px;color:var(--text3);font-weight:600;letter-spacing:0}
.rev-split{display:flex;flex-direction:column;gap:9px}
.rev-item{display:flex;align-items:center;gap:10px}
.rv-ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rv-ic.green{background:var(--green-bg);color:var(--green)}.rv-ic.amber{background:rgba(217,119,6,.12);color:#d97706}.rv-ic.blue{background:rgba(59,130,246,.12);color:#3b82f6}
.rev-item b{font-family:var(--font-mono);font-size:16px;display:block;line-height:1}
.rev-item span{font-size:10.5px;color:var(--text3)}

/* Responsive */
@media(max-width:1280px){
  .analytics-grid,.bottom-grid{grid-template-columns:repeat(2,1fr)}
  .analytics-grid > :last-child,.bottom-grid > :last-child{grid-column:1/-1}
}
@media(max-width:900px){
  .hero-grid,.pulse-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .hero-grid,.pulse-grid,.analytics-grid,.bottom-grid{grid-template-columns:1fr}
  .analytics-grid > :last-child,.bottom-grid > :last-child{grid-column:auto}
  .hero-val{font-size:30px}
  .pl-node{min-width:84px}
  .sa-perf{grid-template-columns:repeat(2,1fr);gap:14px 0}
  .sa-perf-item:nth-child(2){border-right:none}
  [dir=rtl] .sa-perf-item:nth-child(2){border-left:none}
}

/* ── List display controls (three-dots menu) ───────────────────────── */
.list-menu{position:relative;display:inline-block}
.list-menu-btn{padding:6px 9px}
.list-menu-pop{position:absolute;inset-inline-end:0;top:calc(100% + 8px);min-width:206px;background:var(--surface);border:1px solid var(--border2);border-top-color:color-mix(in srgb,var(--border2) 55%,#fff 45%);border-radius:18px;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 50%,transparent),0 20px 46px rgba(0,0,0,.28),0 6px 14px rgba(0,0,0,.16);padding:8px;z-index:60;display:none}
.list-menu.open .list-menu-pop{display:block}
.lm-group{padding:4px 2px;border-bottom:1px solid var(--border)}
.lm-group:last-child{border-bottom:none}
.lm-label{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);font-weight:800;padding:4px 8px 2px}
.lm-item{display:flex;align-items:center;gap:7px;width:100%;text-align:start;background:none;border:none;color:var(--text2);font-size:13.5px;font-weight:700;padding:9px 9px;border-radius:8px;cursor:pointer}
.lm-item:hover{background:var(--surface-h);color:var(--text)}
.lm-item.on{background:var(--accent);color:#fff}
.lm-item.on::after{content:'✓';margin-inline-start:auto;font-weight:800}

/* Round icon action buttons (orders rows) */
.btn-round{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text2);cursor:pointer;text-decoration:none;transition:all .15s;padding:0}
.btn-round:hover{border-color:var(--accent);color:var(--accent);background:var(--surface-h)}
.btn-round-danger:hover{border-color:var(--red);color:var(--red);background:var(--red-bg)}

/* Compact density */
.density-compact table td,.density-compact table th{padding-top:6px;padding-bottom:6px;font-size:12.5px}
.density-compact .td-sub{display:none}

/* Group-by-status header rows */
tr.group-head td{background:var(--surface-h);padding:8px 12px;position:sticky;top:0}

/* ═══════════════════════════════════════════════════════════════════════
   TYPOGRAPHY ENHANCEMENT — larger, cleaner, bolder UI text.
   Appended last so these win over the base rules above. Tuned for clarity
   on the field (warehouse/STM/SA staff reading at a glance).
   ═══════════════════════════════════════════════════════════════════════ */
body { font-size: 15px; }

/* Side menu (drawer) — the primary navigation, made noticeably bigger + bolder */
.side-drawer .drawer-link { font-size: 16px; font-weight: 700; padding-top: 12px; padding-bottom: 12px; }
.side-drawer .drawer-link .dl-ic svg { width: 19px; height: 19px; }
.side-drawer .drawer-group-head { font-size: 12.5px; font-weight: 800; letter-spacing: .7px; color: var(--text2); }
.side-drawer .drawer-head .dh-name { font-size: 15.5px; }
.side-drawer .drawer-head .dh-role { font-size: 11px; }
.side-drawer .drawer-search input { font-size: 15px; }
.side-drawer .drawer-link .dl-badge { font-size: 12px; min-width: 22px; height: 22px; }

/* Page chrome */
.page-section { font-size: 12px; letter-spacing: 1.2px; }
.page-desc    { font-size: 15px; }
.card-title   { font-size: 16px; font-weight: 800; }
.form-label   { font-size: 12.5px; }

/* Controls — cleaner, bolder buttons/badges/tabs */
.btn      { font-size: 14px; font-weight: 700; }
.btn-sm   { font-size: 13px; }
.badge    { font-size: 12px; }
.tab-btn  { font-size: 13.5px; font-weight: 700; }
.text-sm  { font-size: 13px; }
.text-xs  { font-size: 12px; }

/* Generic data tables (the orders table keeps its own larger styling) */
table:not(.otable) tbody td { font-size: 14px; }
table:not(.otable) thead th { font-size: 12.5px; font-weight: 800; }

@media (max-width: 600px) { .page-title { font-size: 21px; } }

/* ═══════════════════════════════════════════════════════════════════════
   DATA TABLE — shared big/clear table for Leads + Call-center (orders look)
   ═══════════════════════════════════════════════════════════════════════ */
.dtable{width:100%;border-collapse:collapse}
.dtable thead th{font-size:15px;font-weight:800;letter-spacing:.2px;color:var(--text);text-align:start;
  padding:15px 14px;border-bottom:2px solid var(--border);white-space:nowrap;background:var(--surface2)}
.dtable tbody td{padding:14px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:14px}
.dtable tbody tr{transition:background .12s}
.dtable tbody tr:hover{background:var(--surface-h)}
.dtable tbody tr td:first-child{border-inline-start:4px solid var(--c,transparent)}
.dtable .td-main{font-weight:700;font-size:15px;color:var(--text)}
.dtable .td-sub{font-size:12px;color:var(--text3);margin-top:3px;display:inline-flex;align-items:center;gap:5px}
.dtable .group-head td{background:var(--bg3);border-inline-start:4px solid var(--c,transparent);padding:9px 14px}
.density-compact .dtable tbody td{padding:8px 12px}
/* coloured status pill (set --c per status) */
.spill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;padding:6px 12px;border-radius:8px;white-space:nowrap;
  color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 35%,transparent)}
.spill::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--c);flex-shrink:0}
/* call-center "Call" button */
.callbtn{display:inline-flex;align-items:center;gap:7px;background:var(--green);color:#fff;border:none;border-radius:10px;
  padding:9px 16px;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 2px 10px color-mix(in srgb,var(--green) 30%,transparent);transition:transform .1s,filter .12s}
.callbtn:hover{filter:brightness(1.05);transform:translateY(-1px)} .callbtn svg{width:16px;height:16px}