@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  /* "Clean Clinical" palette. Sidebar/header and card surfaces are both
     pure white — separated from the page only by a hairline border. */
  --sidebar:        #ffffff;
  --sidebar2:        #f1f5f9;
  --sidebar-border:  #e2e8f0;
  --sidebar-border2: #cbd5e1;

  /* Light content canvas */
  --page:    #f8fafc;
  --card:    #ffffff;
  --card2:   #f1f5f9;
  --border:  #e2e8f0;
  --border2: #cbd5e1;

  /* Accent — two blues split by job, not by section. #accent (#0e7490)
     is the one that ever sits under or as text: buttons, links, table
     headers, focus rings — it clears 5.3:1+ everywhere it's used.
     #0891b2 only measures ~3.5:1, so it's reserved for accent-tint (a
     background wash with no text-contrast requirement of its own,
     since the accent text sitting on top of it uses --accent directly). */
  --accent:         #0e7490;
  --accent-tint:    #e0f2f7;
  --accent-sidebar: var(--accent);

  --text:  #1e293b;
  --text2: #64748b;
  --text3: #64748b;
  --text-inverse: #ffffff;

  /* Status colors: one value per status (all clear AA as text on white —
     no separate vivid/ink split needed the way the old palette required). */
  --green:      #15803d;
  --green-ink:  #15803d;
  --red:        #dc2626;
  --red-ink:    #dc2626;
  --amber:      #b45309;
  --amber-ink:  #b45309;
  --purple:     #7c3aed;
  --purple-ink: #7c3aed;

  /* Warning callout component (e.g. price notices) — snapped to the
     same warning family as --amber for one consistent "caution" hue. */
  --warn-bg:     #fef3e8;
  --warn-border: #f3cd9e;
  --warn-text:   #b45309;

  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* Legacy aliases — dashboard.js, distributors.js, reps.js, orders.js,
     rep-portfolio.js, order-drawer.js and index.html reference these
     variable names directly in inline styles. Every one of those usages
     is on the light content canvas, so they all map to the single-accent
     / light-surface tokens above rather than needing their own values. */
  --teal:     var(--accent);
  --teal2:    var(--accent);
  --surface:  var(--card);
  --surface2: var(--card2);
  --surface3: var(--border);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--page); color: var(--text); font-family: var(--font-body); min-height: 100vh; overflow-x: hidden; }

/* ── LOGIN SCREEN ──────────────────────────────────────────────── */
/* Light, matching the app interior — the dark "brand moment" version
   became an orphaned one-off once the sidebar itself went light. */
#login-screen {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--page);
  display: flex; align-items: center; justify-content: center;
}
.login-card {
  background: var(--sidebar);
  border: 1px solid var(--sidebar-border);
  border-radius: 16px;
  padding: 40px 36px;
  width: 380px;
  box-shadow: 0 1px 2px rgba(15,26,26,0.05);
}
.login-logo {
  text-align: center;
  margin-bottom: 28px;
}
.login-logo .wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--accent);
  letter-spacing: -0.5px;
}
.login-logo .tagline {
  font-size: 11px;
  color: var(--text2);
  font-family: var(--font-mono);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 4px;
}
.login-logo .country {
  font-size: 12px;
  color: var(--text2);
  font-family: var(--font-mono);
  margin-top: 3px;
}
.login-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 20px;
  text-align: center;
}
.login-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.login-field label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text2);
  font-family: var(--font-mono);
}
.login-field input {
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text);
  font-family: var(--font-body);
  width: 100%;
  transition: border-color 0.15s;
}
.login-field input:focus { outline: none; border-color: var(--accent); }
.login-field input::placeholder { color: var(--text3); }
.login-error {
  display: none;
  background: rgba(220,38,38,0.06);
  border: 1px solid rgba(220,38,38,0.22);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--red-ink);
  margin-bottom: 14px;
}
.login-btn {
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: var(--text-inverse);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 4px;
}
.login-btn:hover:not(:disabled) { background: #0c637a; }
.login-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.login-note {
  text-align: center;
  font-size: 10px;
  color: var(--text2);
  font-family: var(--font-mono);
  margin-top: 16px;
}

/* ── APP SHELL ─────────────────────────────────────────────────── */
.shell { display: flex; height: 100vh; overflow: hidden; }

/* SIDEBAR — light, a tonal step off the page, separated by a hairline
   border rather than a dark surface (see --sidebar in :root). */
.sidebar { width: 220px; min-width: 220px; background: var(--sidebar); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; }
.sidebar-logo { padding: 22px 20px 18px; border-bottom: 1px solid var(--sidebar-border); }
.sidebar-logo .wordmark { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--accent); letter-spacing: -0.5px; }
.sidebar-logo .tagline { font-size: 10px; color: var(--text2); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px; font-family: var(--font-mono); }
.sidebar-logo .country { font-size: 11px; color: var(--text2); font-family: var(--font-mono); margin-top: 3px; }
.sidebar-role { margin: 12px 14px; background: transparent; border: 1px solid var(--sidebar-border); border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; }
.role-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; box-shadow: 0 0 5px rgba(8,145,178,0.4); }
.role-name { font-size: 12px; font-weight: 600; color: var(--text); }
.role-label { font-size: 10px; color: var(--text2); font-family: var(--font-mono); }
.sidebar-section { padding: 16px 14px 4px; font-size: 9px; font-family: var(--font-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--text2); }
.nav-item { margin: 2px 8px; padding: 9px 12px; border-radius: 8px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: all 0.15s; font-size: 13px; font-weight: 500; color: var(--text2); position: relative; }
.nav-item:hover { background: var(--sidebar2); color: var(--text); }
.nav-item.active { background: var(--accent-tint); color: var(--accent); border: 1px solid rgba(8,145,178,0.25); font-weight: 600; }
.nav-item.active::before { content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: var(--accent); border-radius: 0 2px 2px 0; }
.nav-icon { font-size: 15px; width: 18px; text-align: center; }
.nav-badge { margin-left: auto; background: var(--red-ink); color: var(--text-inverse); font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 10px; font-family: var(--font-mono); }
.nav-badge.amber { background: var(--amber-ink); color: var(--text-inverse); }
.nav-badge.teal { background: var(--accent-tint); color: var(--accent); border: 1px solid rgba(8,145,178,0.3); }
.sidebar-bottom { margin-top: auto; padding: 14px; border-top: 1px solid var(--sidebar-border); }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; }
.avatar { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--purple)); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; flex-shrink: 0; }
.user-info .name { font-size: 12px; font-weight: 600; color: var(--text); }
.user-info .region { font-size: 10px; color: var(--text2); font-family: var(--font-mono); }
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border-radius: 8px; background: transparent; border: 1px solid var(--sidebar-border2); color: var(--text2); font-size: 11px; font-family: var(--font-mono); cursor: pointer; transition: all 0.15s; }
.logout-btn:hover { background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.3); color: var(--red-ink); }

/* MAIN (light content canvas) */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--page); }
.topbar { height: 56px; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 24px; gap: 16px; background: var(--page); flex-shrink: 0; }
.topbar-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); }
.topbar-subtitle { font-size: 12px; color: var(--text2); font-family: var(--font-mono); }
.topbar-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.fob-tag { font-size: 10px; font-family: var(--font-mono); color: var(--amber-ink); background: rgba(180,83,9,0.08); border: 1px solid rgba(180,83,9,0.22); padding: 3px 8px; border-radius: 4px; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; transition: all 0.15s; font-family: var(--font-body); }
.btn-primary { background: var(--accent); color: var(--text-inverse); }
.btn-primary:hover:not(:disabled) { background: #0c637a; }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--text2); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--card); color: var(--text); }
.btn-sm { padding: 5px 10px; font-size: 11px; }
.content { flex: 1; overflow-y: auto; padding: 24px; }
.content::-webkit-scrollbar { width: 4px; }
.content::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
.view { display: none; }
.view.active { display: block; }

/* STAT CARDS */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; position: relative; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; box-shadow: 0 1px 2px rgba(15,26,26,0.05); }
.stat-card:hover { border-color: var(--border2); }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.stat-card.total::before   { background: var(--accent); }
.stat-card.pending::before { background: var(--amber); }
.stat-card.partial::before { background: var(--purple); }
.stat-card.fulfilled::before { background: var(--green); }
.stat-card.rate::before { background: linear-gradient(90deg, var(--accent), var(--green)); }
.stat-label { font-size: 10px; color: var(--text2); text-transform: uppercase; letter-spacing: 1px; font-family: var(--font-mono); margin-bottom: 8px; }
.stat-value { font-size: 28px; font-weight: 800; font-family: var(--font-display); line-height: 1; color: var(--text); }
.stat-value.teal   { color: var(--accent); }
.stat-value.amber  { color: var(--amber-ink); }
.stat-value.purple { color: var(--purple-ink); }
.stat-value.green  { color: var(--green-ink); }
.stat-sub   { font-size: 10px; color: var(--text2); margin-top: 6px; font-family: var(--font-mono); }
.stat-trend { font-size: 10px; color: var(--green-ink); margin-top: 2px; }

/* SECTION */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.section-title::before { content: ''; width: 3px; height: 14px; background: var(--accent); border-radius: 2px; }

/* TABLE — solid accent header frames a fully white body, so status
   colors are the only saturated thing at row level. */
.table-wrap { background: #ffffff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(15,26,26,0.05); }
table { width: 100%; border-collapse: collapse; }
thead th { background: var(--accent); padding: 10px 14px; text-align: left; font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.9); border-bottom: none; white-space: nowrap; }
tbody tr { background: #ffffff; border-bottom: 1px solid var(--border); transition: background 0.1s; cursor: pointer; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--card2); }
tbody td { padding: 11px 14px; font-size: 12px; color: var(--text); vertical-align: middle; }
.td-mono { font-family: var(--font-mono); font-size: 11px; color: #334155; font-weight: 500; }
.td-name { font-weight: 600; font-size: 13px; }
.td-sub  { font-size: 10px; color: var(--text2); margin-top: 1px; font-family: var(--font-mono); }

/* BADGES */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 20px; font-size: 10px; font-weight: 600; font-family: var(--font-mono); white-space: nowrap; }
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; }
.badge-logged    { background: rgba(180,83,9,0.10);   color: var(--amber-ink);  border: 1px solid rgba(180,83,9,0.25); }
.badge-logged::before { background: var(--amber); }
.badge-assigned  { background: rgba(8,145,178,0.10); color: var(--accent);     border: 1px solid rgba(8,145,178,0.25); }
.badge-assigned::before { background: var(--accent); }
.badge-partial   { background: rgba(124,58,237,0.10); color: var(--purple-ink); border: 1px solid rgba(124,58,237,0.25); }
.badge-partial::before { background: var(--purple); }
.badge-supplied  { background: rgba(21,128,61,0.10);  color: var(--green-ink);  border: 1px solid rgba(21,128,61,0.28); }
.badge-supplied::before { background: var(--green); }

/* PROGRESS */
.progress-wrap { display: flex; align-items: center; gap: 8px; }
.progress-bar  { flex: 1; height: 4px; background: var(--card2); border-radius: 2px; overflow: hidden; min-width: 60px; }
.progress-fill { height: 100%; border-radius: 2px; }
.fill-green  { background: var(--green); }
.fill-amber  { background: var(--amber); }
.fill-purple { background: var(--purple); }
.fill-teal   { background: var(--accent); }
.progress-pct { font-size: 10px; font-family: var(--font-mono); color: var(--text2); width: 28px; text-align: right; }

/* VALUE SUMMARY ROW */
.value-summary-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.value-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 22px; position: relative; overflow: hidden; box-shadow: 0 1px 2px rgba(15,26,26,0.05); }
.value-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.value-card.ordered::before  { background: var(--accent); }
.value-card.fulfilled::before { background: var(--green); }
.value-label  { font-size: 10px; color: var(--text2); text-transform: uppercase; letter-spacing: 1px; font-family: var(--font-mono); margin-bottom: 6px; }
.value-amount { font-size: 26px; font-weight: 800; font-family: var(--font-display); color: var(--accent); line-height: 1; }
.value-card.fulfilled .value-amount { color: var(--green-ink); }
.value-sub    { font-size: 10px; color: var(--text2); margin-top: 6px; font-family: var(--font-mono); }

/* CHARTS */
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.chart-card  { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; box-shadow: 0 1px 2px rgba(15,26,26,0.05); }
.chart-title { font-size: 12px; font-weight: 600; font-family: var(--font-display); color: var(--text); margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
.chart-legend { display: flex; gap: 12px; }
.legend-item  { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text2); font-family: var(--font-mono); }
.legend-dot   { width: 8px; height: 8px; border-radius: 2px; }
.bar-chart-svg { width: 100%; display: block; overflow: visible; }
.donut-wrap { display: flex; align-items: center; gap: 20px; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; }
.donut-item { display: flex; align-items: center; gap: 8px; }
.donut-color { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.donut-item-label { font-size: 11px; color: var(--text2); font-family: var(--font-mono); }
.donut-item-val { font-size: 13px; font-weight: 700; color: var(--text); margin-left: auto; }

/* FORM */
.form-layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.form-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 22px; box-shadow: 0 1px 2px rgba(15,26,26,0.05); }
.form-card-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.form-grid { display: grid; gap: 14px; }
.form-grid-2 { grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text2); font-family: var(--font-mono); font-weight: 500; }
.field-input { background: var(--page); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--text); font-family: var(--font-body); transition: border-color 0.15s; width: 100%; }
.field-input:focus { outline: none; border-color: var(--accent); }
select.field-input { cursor: pointer; }
.field-input::placeholder { color: var(--text3); }

/* PRODUCT ROWS */
.product-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
/* Product rows read as the active editable area of the New Order form:
   a hairline step off the white form-card, with a stronger border, so
   they're visually distinct even though every surface here is "white". */
.product-row-header { display: grid; grid-template-columns: 1fr 100px 120px 28px; gap: 8px; padding: 0 10px 6px; }
.product-row { display: grid; grid-template-columns: 1fr 100px 120px 28px; gap: 8px; align-items: end; background: #fbfdfe; border: 1px solid var(--border2); border-radius: 8px; padding: 10px; }
.product-row-label { font-size: 10px; color: var(--text2); font-family: var(--font-mono); margin-bottom: 4px; }
.mini-input { background: #ffffff; border: 1px solid var(--border2); border-radius: 6px; padding: 7px 8px; font-size: 12px; color: var(--text); width: 100%; font-family: var(--font-body); }
.mini-input:focus { outline: none; border-color: var(--accent); }
.mini-input[readonly] { color: var(--text2); cursor: default; }
.del-btn { width: 28px; height: 28px; background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.2); border-radius: 6px; color: var(--red-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: background 0.15s; flex-shrink: 0; }
.del-btn:hover { background: rgba(220,38,38,0.16); }
.add-product-btn { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; background: rgba(8,145,178,0.06); border: 1px dashed rgba(8,145,178,0.3); color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; margin-top: 8px; }
.add-product-btn:hover { background: rgba(8,145,178,0.12); }

/* ENTRY MODE TABS (Paste Text toggle) */
.entry-mode-bar { display: flex; gap: 0; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; width: fit-content; }
.entry-mode-tab { padding: 6px 16px; font-size: 11px; font-weight: 600; font-family: var(--font-mono); color: var(--text2); cursor: pointer; transition: all 0.15s; background: transparent; border: none; }
.entry-mode-tab.active { background: var(--accent-tint); color: var(--accent); }
.entry-mode-tab:hover:not(.active) { color: var(--text); background: var(--card2); }
.paste-panel { display: none; }
.paste-textarea { width: 100%; min-height: 140px; background: var(--page); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 12px; color: var(--text); font-family: var(--font-mono); resize: vertical; line-height: 1.6; }
.paste-textarea:focus { outline: none; border-color: var(--accent); }
.paste-textarea::placeholder { color: var(--text3); }
.parse-hint { font-size: 10px; color: var(--text2); font-family: var(--font-mono); margin-top: 6px; line-height: 1.6; }
.parse-result { font-size: 11px; font-family: var(--font-mono); margin-top: 8px; display: none; }

/* SUMMARY */
.order-summary { display: flex; flex-direction: column; gap: 12px; }
.summary-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; box-shadow: 0 1px 2px rgba(15,26,26,0.05); }
.summary-title { font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1px; color: var(--text2); margin-bottom: 14px; }
.summary-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border); }
.summary-row:last-of-type { border-bottom: none; }
.summary-key { font-size: 11px; color: var(--text2); }
.summary-val { font-size: 12px; font-weight: 600; color: var(--text); font-family: var(--font-mono); }
.summary-total { margin-top: 12px; padding: 12px; background: var(--accent-tint); border: 1px solid rgba(8,145,178,0.3); border-radius: 8px; text-align: center; }
.summary-total-label { font-size: 10px; color: var(--text2); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1px; }
.summary-total-sub { font-size: 9px; color: var(--amber-ink); font-family: var(--font-mono); margin-top: 2px; }
.summary-total-val { font-size: 24px; font-weight: 800; color: var(--accent); font-family: var(--font-display); margin-top: 2px; }

/* FULFILLMENT */
.order-detail-header { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 16px; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; box-shadow: 0 1px 2px rgba(15,26,26,0.05); }
.order-id { font-family: var(--font-mono); font-size: 11px; color: var(--text2); margin-bottom: 4px; }
.order-customer { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text); }
.order-meta { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.order-meta-item { font-size: 11px; color: var(--text2); font-family: var(--font-mono); display: flex; align-items: center; gap: 4px; }
.order-meta-item span { color: var(--text); }
.fulfillment-search { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
.fulfillment-search input { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 9px 14px; font-size: 13px; color: var(--text); font-family: var(--font-mono); width: 200px; }
.fulfillment-search input:focus { outline: none; border-color: var(--accent); }
.fulfillment-search input::placeholder { color: var(--text3); }
.timeline { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(15,26,26,0.05); }
.timeline-items { display: flex; flex-direction: column; gap: 0; }
.timeline-item { display: flex; gap: 14px; padding-bottom: 16px; position: relative; }
.timeline-item:not(:last-child)::after { content: ''; position: absolute; left: 11px; top: 24px; width: 1px; bottom: 0; background: var(--border); }
.timeline-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--card2); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; z-index: 1; }
.timeline-dot.green { background: rgba(21,128,61,0.12); border-color: var(--green); color: var(--green-ink); }
.timeline-dot.amber { background: rgba(180,83,9,0.12); border-color: var(--amber); color: var(--amber-ink); }
.timeline-dot.teal  { background: rgba(8,145,178,0.12); border-color: var(--accent);  color: var(--accent); }
.timeline-content { flex: 1; }
.timeline-action { font-size: 12px; font-weight: 600; color: var(--text); }
.timeline-detail { font-size: 11px; color: var(--text2); font-family: var(--font-mono); margin-top: 2px; }
.timeline-time   { font-size: 10px; color: var(--text2); font-family: var(--font-mono); margin-top: 1px; }
.update-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.f-batch-qty:invalid { border-color: rgba(220,38,38,0.7) !important; background: rgba(220,38,38,0.05); }

/* FILTERS */
.filter-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.filter-chip { padding: 5px 12px; border-radius: 20px; font-size: 11px; font-family: var(--font-mono); font-weight: 600; cursor: pointer; transition: all 0.15s; border: 1px solid var(--border); background: transparent; color: var(--text2); }
.filter-chip:hover { color: var(--text); border-color: var(--accent); }
.filter-chip.active { background: var(--accent-tint); color: var(--accent); border-color: rgba(8,145,178,0.3); }
.search-input { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; font-size: 12px; color: var(--text); font-family: var(--font-body); width: 200px; }
.search-input:focus { outline: none; border-color: var(--accent); }
.search-input::placeholder { color: var(--text3); }

/* REP CARDS */
.rep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.rep-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; cursor: pointer; transition: border-color 0.2s; box-shadow: 0 1px 2px rgba(15,26,26,0.05); }
.rep-card:hover { border-color: var(--border2); }
.rep-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rep-avatar { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--purple)); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: white; flex-shrink: 0; }
.rep-name   { font-size: 13px; font-weight: 600; color: var(--text); }
.rep-region { font-size: 10px; color: var(--text2); font-family: var(--font-mono); }
.rep-stats  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rep-stat   { background: var(--card2); border-radius: 6px; padding: 8px; }
.rep-stat-label { font-size: 9px; color: var(--text2); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.5px; }
.rep-stat-val   { font-size: 16px; font-weight: 800; color: var(--text); font-family: var(--font-display); margin-top: 2px; }
.rep-stat-val.green { color: var(--green-ink); }
.rep-stat-val.amber { color: var(--amber-ink); }
.rep-stat-val.red   { color: var(--red-ink); }
.rep-fulfillment { margin-top: 12px; }
.rep-fulfillment-label { display: flex; justify-content: space-between; margin-bottom: 5px; }
.rep-fulfillment-label span { font-size: 10px; color: var(--text2); font-family: var(--font-mono); }
.rep-bar { height: 6px; background: var(--card2); border-radius: 3px; overflow: hidden; }
.rep-bar-fill { height: 100%; border-radius: 3px; }

/* ORDER DETAIL DRAWER (part of the light content canvas) */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15,26,26,0.45);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.drawer-backdrop.open { opacity: 1; pointer-events: all; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
  width: 680px; max-width: 95vw;
  background: var(--page);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -8px 0 40px rgba(15,26,26,0.18);
}
.drawer.open { transform: translateX(0); }

.drawer-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--card);
}
.drawer-header-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px;
}
.drawer-title { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--text); }
.drawer-subtitle { font-size: 11px; color: var(--text2); font-family: var(--font-mono); margin-top: 3px; }
.drawer-close {
  width: 30px; height: 30px; border-radius: 8px; background: var(--card2);
  border: 1px solid var(--border); color: var(--text2); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  flex-shrink: 0; transition: all 0.15s;
}
.drawer-close:hover { background: rgba(220,38,38,0.12); border-color: rgba(220,38,38,0.3); color: var(--red-ink); }

.drawer-stat-row { display: flex; gap: 10px; }
.drawer-stat {
  flex: 1; background: var(--page); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px;
}
.drawer-stat-label { font-size: 9px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1px; color: var(--text2); margin-bottom: 4px; }
.drawer-stat-val   { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--accent); line-height: 1; }
.drawer-stat-val.green  { color: var(--green-ink); }
.drawer-stat-val.amber  { color: var(--amber-ink); }
.drawer-stat-val.red    { color: var(--red-ink); }

.drawer-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--card); }
.drawer-tab {
  padding: 10px 20px; font-size: 12px; font-weight: 600; color: var(--text2);
  cursor: pointer; transition: all 0.15s; border-bottom: 2px solid transparent;
  margin-bottom: -1px; display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); white-space: nowrap;
}
.drawer-tab:hover { color: var(--text); }
.drawer-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.drawer-tab .tab-count {
  background: var(--card2); border-radius: 10px;
  padding: 1px 6px; font-size: 10px; font-weight: 700;
}
.drawer-tab.active .tab-count { background: var(--accent-tint); color: var(--accent); }

.drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; background: var(--page); }
.drawer-body::-webkit-scrollbar { width: 4px; }
.drawer-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.drawer-panel { display: none; }
.drawer-panel.active { display: block; }

.outstanding-product-row {
  display: grid;
  grid-template-columns: 1fr 60px 70px 70px 80px;
  gap: 8px; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.outstanding-product-row:hover { background: var(--card); }
.outstanding-product-row:last-child { border-bottom: none; }
.outstanding-product-header {
  background: var(--card); border-radius: 8px 8px 0 0;
}

/* MISC */
.screen-label { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-tint); border: 1px solid rgba(8,145,178,0.25); border-radius: 6px; padding: 4px 10px; font-size: 10px; font-family: var(--font-mono); color: var(--accent); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px; }
.tab-bar { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.tab { padding: 8px 16px; font-size: 12px; font-weight: 600; color: var(--text2); cursor: pointer; transition: all 0.15s; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.alert-banner { background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 12px; color: var(--warn-text); }
.alert-icon { font-size: 16px; flex-shrink: 0; }
.mobile-note { background: var(--card2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; font-size: 11px; color: var(--text2); font-family: var(--font-mono); }
.fob-note { margin-top: 10px; padding: 8px; background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 6px; font-size: 10px; color: var(--warn-text); font-family: var(--font-mono); }

/* ══════════════════════════════════════════════════════════════
   MOBILE — rep screens (New Order, All Orders, Fulfillment, My
   Portfolio) get full treatment since reps use this app on their
   phones as the closest thing to the shelved WhatsApp bot. Manager
   screens (Dashboard, Reps, Distributors, Portfolio Assignment) just
   get the safety-net rules below (stacked grids, scrollable tables)
   rather than a full redesign, since those are desktop-primary.
   ══════════════════════════════════════════════════════════════ */

.mobile-signout { display: none; }
.drawer-table-scroll { overflow-x: auto; }

@media (max-width: 768px) {

  /* Safety net for every table site-wide: scrolls instead of clipping
     or squishing when columns don't fit. */
  .table-wrap { overflow-x: auto; }
  .table-wrap table { min-width: 640px; }
  .drawer-table-scroll table { min-width: 420px; }

  /* Stack every fixed multi-column layout to one column. */
  .form-layout,
  .charts-grid,
  .value-summary-row,
  .rep-grid,
  .form-grid-2,
  .update-form-row,
  .drawer-meta-grid { grid-template-columns: 1fr !important; }

  /* Bigger tap targets everywhere. */
  .btn { padding: 10px 16px; font-size: 13px; }
  .btn-sm { padding: 8px 12px; font-size: 12px; }
  .field-input, .mini-input { padding: 11px 12px; font-size: 14px; }
  .nav-item { padding: 11px 12px; }

  .content { padding: 16px; }
}

/* Product entry rows: name on its own line, qty/price/delete below —
   works from the existing DOM order with no HTML/JS changes. */
@media (max-width: 640px) {
  .product-row-header { display: none; } /* each field already carries its own label */
  .product-row {
    grid-template-columns: 1fr 1fr 34px;
    grid-template-rows: auto auto;
    row-gap: 10px;
  }
  .product-row > *:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  .product-row > *:nth-child(2) { grid-column: 1; grid-row: 2; }
  .product-row > *:nth-child(3) { grid-column: 2; grid-row: 2; }
  .product-row > *:nth-child(4) { grid-column: 3; grid-row: 2; align-self: end; }
}

/* Rep bottom tab bar. Reps have exactly 4 nav items (All Orders, New
   Order, Fulfillment, My Portfolio) — fits a bottom bar cleanly, is
   thumb-reachable, and needs no extra tap to open a menu the way a
   hamburger/off-canvas sidebar would. Managers (7+ items) keep the
   regular sidebar; see the .is-manager block further down. */
@media (max-width: 768px) {
  body.is-rep .shell { flex-direction: column; }
  body.is-rep .sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; min-width: 0; height: 66px;
    flex-direction: row;
    border-right: none; border-top: 1px solid var(--sidebar-border);
    box-shadow: 0 -2px 12px rgba(15,26,26,0.06);
    z-index: 90;
  }
  body.is-rep .sidebar-logo,
  body.is-rep .sidebar-role,
  body.is-rep .sidebar-section,
  body.is-rep .sidebar-bottom { display: none; }

  body.is-rep .nav-item {
    flex: 1; margin: 8px 4px; padding: 6px 2px;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 3px; font-size: 10px; font-weight: 600; text-align: center;
  }
  body.is-rep .nav-item .nav-icon { font-size: 19px; }
  body.is-rep .nav-item.active::before { display: none; } /* the left accent bar reads wrong in a horizontal bar */

  body.is-rep .content { padding-bottom: 84px; } /* clear the fixed bottom bar */

  body.is-rep .mobile-signout {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 10px; right: 12px; z-index: 91;
    width: 34px; height: 34px; border-radius: 8px;
    background: var(--card); border: 1px solid var(--border); color: var(--text2);
    font-size: 15px; cursor: pointer;
  }
}

/* Managers: no bottom bar (too many nav items), just make sure the
   fixed-width sidebar doesn't eat most of a phone screen. Not the full
   rep-level treatment — manager screens are desktop-primary. */
@media (max-width: 768px) {
  body.is-manager .sidebar { width: 180px; min-width: 180px; }
  body.is-manager .content { padding: 16px; }
}