/* ===================================================================
   Health Up — Retail Dashboard styles.
   Token names keep the legacy `--dn-*` prefix (DN Center 2019 is the
   sister wholesale entity); values are remapped to the Health Up
   palette in the :root block below.
   ================================================================ */

/* ── Font ─────────────────────────────────────────────────────── */
@font-face {
  font-family: "Noto Sans Thai";
  src: url("./fonts/NotoSansThai-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Health Up tokens ─────────────────────────────────────────────
   Color palette sampled from healthup.co.th (May 2026):
   - Primary teal   #21B6A0  → mapped to legacy --dn-purple-600 so the
                                full theme reskins without touching every
                                CSS rule and template class.
   - Deep teal      #0f6c60 / #187b77 / #14716a — header gradient
   - Accent orange  #F16823 — CTA / leak alerts / hover highlights
   - Ink navy       #14191F — body text
   - Reey is the marketing wordmark font; we use Noto Sans Thai for the
     dashboard body since Reey doesn't carry Thai glyphs.
   ───────────────────────────────────────────────────────────────── */
:root {
  /* "purple" tokens are kept for backwards compatibility; they now hold
     the Health Up teal palette. */
  --dn-purple-900:#0a4f47; --dn-purple-800:#0E7C68; --dn-purple-700:#0f6c60;
  --dn-purple-600:#14A38B; --dn-purple-500:#1FB57A; --dn-purple-400:#4dd0bd;
  --dn-purple-200:#a8e8db; --dn-purple-100:#cef1e8; --dn-purple-050:#e6f7f2;
  --dn-header-grad: linear-gradient(135deg,#0E7C68,#14A38B);
  /* orange tuned to the Sales Recovery Center prototype (#FF8F5E / #F15A29) */
  --dn-orange-700:#d1490f; --dn-orange-600:#F15A29; --dn-orange-500:#ff7d2e;
  --dn-orange-400:#FF8F5E; --dn-orange-100:#ffe4d2;
  /* semantic */
  --dn-success-600:#1a8870; --dn-success-400:#48bda3; --dn-success-300:#21B6A0;
  --dn-danger-600:#dc2626;  --dn-danger-500:#ef4444;
  --dn-info-500:#0ea5e9;
  /* neutrals */
  --dn-ink:#14191F; --dn-ink-2:#1a2028;
  --dn-text-2:#525a66; --dn-text-3:#6b7280; --dn-text-mute:#9ca3af;
  --dn-text-mute-purple:#9eb6b1; --dn-fg-on-dark:#fff;
  --dn-bg:#fff; --dn-bg-alt:#f5f5f5; --dn-bg-soft:#f8faf9;
  --dn-bg-input:#eef2f0; --dn-bg-page:#f5f7f6; --dn-bg-chip:#eaf4f1;
  --dn-border:#dcdfde; --dn-border-2:#ebeeed; --dn-border-3:#e0e4e3;
  --dn-footer-bg:#14191F;
  /* radii / shadow / type */
  --dn-radius-xs:3px;  --dn-radius-sm:8px; --dn-radius:10px;
  --dn-radius-md:15px; --dn-radius-lg:20px; --dn-radius-xl:25px;
  --dn-radius-pill:999px;
  --dn-shadow-sm: 0 4px 6px rgba(20,25,31,.08);
  --dn-shadow:    0 4px 8px rgba(20,25,31,.10);
  --dn-shadow-md: 0 4px 10px rgba(20,25,31,.10);
  --dn-shadow-lg: 0 10px 20px -5px rgba(20,25,31,.125);
  --dn-shadow-xl: 0 15px 30px 0 rgba(20,25,31,.18);
  --dn-shadow-cta:0 4px 6px rgba(33,182,160,.35);
  --dn-font-family: "Noto Sans Thai","Prompt",-apple-system,
                    BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family: var(--dn-font-family);
  font-size: 15px;
  background: var(--dn-bg-page);
  color: var(--dn-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--dn-purple-600); text-decoration: none; }
a:hover { color: var(--dn-purple-700); }

/* ── Nav (purple gradient header) ─────────────────────────────── */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--dn-header-grad);
  color: #fff;
  padding: 12px 22px;
  gap: 1rem;
  box-shadow: var(--dn-shadow-md);
  position: sticky; top: 0; z-index: 50;
  flex-wrap: wrap;
}
.nav-brand {
  font-weight: 700;
  font-size: 19px;
  color: #fff;
  letter-spacing: .01em;
  display: flex; align-items: center; gap: 10px;
}
/* Health Up logo is rendered as a real <img class="nav-logo"> in base.html;
   the wholesale-era pseudo-element below is intentionally disabled. */
.nav-brand::before { content: none; }
.nav-links { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; row-gap: .5rem; }
.nav-links > a {
  color: rgba(255,255,255,.85);
  font-size: 15px;
  font-weight: 500;
  padding: 4px 0;
  position: relative;
  transition: color .15s;
  white-space: nowrap;
}
.nav-links > a:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--dn-orange-400);
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
}
.nav-user {
  color: #fff;
  font-weight: 500;
  background: rgba(255,255,255,.14);
  padding: 5px 14px;
  border-radius: var(--dn-radius-pill);
  font-size: 14px;
}
.btn-logout {
  background: var(--dn-orange-600) !important;
  color: #fff !important;
  padding: 7px 18px !important;
  border-radius: var(--dn-radius-pill) !important;
  font-weight: 500;
  font-size: 14px;
  transition: background .15s, transform .1s;
}
.btn-logout:hover {
  background: var(--dn-orange-700) !important;
  text-decoration: none !important;
  color: #fff !important;
}

/* Lang switcher */
.lang-switch { display:flex; align-items:center; gap:.4rem; font-size:13px; }
.lang-switch a { color: rgba(255,255,255,.7); }
.lang-switch a:hover { color: #fff; }
.lang-switch .lang-active { color:#fff; font-weight:700; text-decoration:underline;
  text-decoration-color: var(--dn-orange-400); text-underline-offset:4px; }
.lang-switch span { color: rgba(255,255,255,.4); }

/* ── Main ─────────────────────────────────────────────────────── */
main {
  padding: 28px 32px 60px;
  max-width: 1480px;
  margin: 0 auto;
}

/* ── Flash ────────────────────────────────────────────────────── */
.flash {
  padding: 12px 18px;
  border-radius: var(--dn-radius);
  margin-bottom: 1rem;
  font-weight: 500;
  box-shadow: var(--dn-shadow-sm);
  border: 1px solid transparent;
}
.flash-success {
  background: #e8f7ea;
  color: var(--dn-success-600);
  border-color: #c8ecce;
}
.flash-success::before { content: "✓ "; font-weight: 700; }
.flash-error {
  background: #ffeaea;
  color: var(--dn-danger-600);
  border-color: #ffc8c8;
}
.flash-error::before { content: "✕ "; font-weight: 700; }

/* ── Page header ──────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.page-header h2 {
  font-size: 26px;
  font-weight: 700;
  color: var(--dn-ink);
  line-height: 1.2;
}

/* ── Filter bar ───────────────────────────────────────────────── */
.filter-bar { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.filter-bar select,
.filter-bar input[type=text] {
  padding: 9px 14px;
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-pill);
  background: #fff;
  color: var(--dn-ink);
  font-family: inherit;
  font-size: 14px;
  min-width: 180px;
  transition: border-color .15s, box-shadow .15s;
  cursor: pointer;
}
.filter-bar select:hover { border-color: var(--dn-purple-400); }
.filter-bar select:focus,
.filter-bar input[type=text]:focus {
  outline: none;
  border-color: var(--dn-purple-600);
  box-shadow: 0 0 0 3px var(--dn-purple-100);
}
.filter-bar button {
  padding: 9px 20px;
  background: var(--dn-purple-600);
  color: #fff;
  border: none;
  border-radius: var(--dn-radius-pill);
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .1s;
  box-shadow: var(--dn-shadow-cta);
}
.filter-bar button:hover {
  background: var(--dn-purple-700);
  transform: translateY(-1px);
}
.btn-export {
  padding: 9px 20px;
  background: var(--dn-orange-600);
  color: #fff;
  border-radius: var(--dn-radius-pill);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 4px 6px rgba(254,125,64,.32);
  transition: background .15s, transform .1s;
}
.btn-export:hover {
  background: var(--dn-orange-700);
  color: #fff;
  transform: translateY(-1px);
}
.btn-export::before { content: "⤓"; font-weight: 700; }

/* ── Segment cards ────────────────────────────────────────────── */
.segment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 2.25rem;
}
.segment-card {
  background: #fff;
  border-radius: var(--dn-radius-lg);
  padding: 20px 22px 18px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--dn-shadow-md);
  border-left-width: 6px !important;     /* keep functional color coding, refine width */
  border-left-style: solid !important;   /* color comes from inline style */
  transition: transform .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.segment-card::after {
  /* subtle purple glow on hover */
  content:""; position:absolute; inset:0;
  background: var(--dn-purple-050); opacity:0; transition: opacity .15s;
  pointer-events:none;
}
.segment-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: var(--dn-shadow-lg);
}
.segment-card > * { position: relative; z-index: 1; }
.seg-name {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.seg-metrics {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  margin-top: 2px;
}
.seg-count {
  font-size: 28px;
  font-weight: 700;
  color: var(--dn-ink);
  line-height: 1.1;
}
.seg-count::after {
  content: ""; display: inline;
}
.seg-rev {
  font-size: 14px;
  color: var(--dn-text-2);
  font-weight: 500;
}
.seg-desc {
  font-size: 13px;
  color: var(--dn-text-2);
  line-height: 1.6;
  flex: 1;
  margin-top: 4px;
}
.seg-action {
  font-size: 13px;
  color: var(--dn-ink-2);
  padding-top: 10px;
  margin-top: 6px;
  line-height: 1.5;
  display: flex; gap: 6px; align-items: flex-start;
  border-top-width: 1px !important;
  border-top-style: solid !important;
}
.seg-action-label {
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

/* ── Tables ───────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  background: #fff;
  border-radius: var(--dn-radius-lg);
  box-shadow: var(--dn-shadow-md);
  margin-bottom: 1.25rem;
}
table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
th {
  background: var(--dn-bg-alt);
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--dn-border-2);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dn-text-2);
}
th:first-child { padding-left: 22px; }
th:last-child  { padding-right: 22px; }
td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--dn-border-2);
  vertical-align: middle;
  font-size: 14px;
  color: var(--dn-ink);
}
td:first-child { padding-left: 22px; }
td:last-child  { padding-right: 22px; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--dn-purple-050); }
td strong { color: var(--dn-ink); font-weight: 700; }
td a { color: var(--dn-purple-600); font-weight: 500; }
td a:hover { color: var(--dn-purple-700); text-decoration: underline;
  text-decoration-color: var(--dn-orange-400); text-underline-offset: 3px; }

/* ── Badge ────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--dn-radius-pill);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: .01em;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

/* ── Text utils ───────────────────────────────────────────────── */
.text-danger { color: var(--dn-danger-600); font-weight: 600; }
.text-warn   { color: var(--dn-orange-500); font-weight: 600; }
.text-muted  { color: var(--dn-text-mute); }
.result-count {
  margin-bottom: 1rem;
  color: var(--dn-text-2);
  font-size: 13px;
  background: #fff;
  padding: 10px 16px;
  border-radius: var(--dn-radius-pill);
  display: inline-block;
  box-shadow: var(--dn-shadow-sm);
}

/* ── Action cell (customer table) ─────────────────────────────── */
.action-cell {
  font-size: 12px;
  color: var(--dn-text-2);
  max-width: 220px;
  font-style: italic;
}

/* ── Pagination ───────────────────────────────────────────────── */
.pagination { display: flex; gap: .6rem; margin-top: 1rem; }
.pagination a {
  padding: 9px 18px;
  background: #fff;
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-pill);
  text-decoration: none;
  color: var(--dn-purple-600);
  font-weight: 500;
  font-size: 14px;
  box-shadow: var(--dn-shadow-sm);
  transition: background .15s, border-color .15s;
}
.pagination a:hover {
  background: var(--dn-purple-050);
  border-color: var(--dn-purple-400);
}

/* ── Login ────────────────────────────────────────────────────── */
body.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--dn-header-grad);
  background-attachment: fixed;
  position: relative;
}
body.login-page::before {
  /* soft orange halo */
  content:""; position:absolute; inset:0;
  background: radial-gradient(60% 50% at 80% 20%, rgba(254,125,64,.18), transparent 60%),
              radial-gradient(50% 40% at 10% 90%, rgba(255,255,255,.10), transparent 60%);
  pointer-events: none;
}
.login-box {
  background: #fff;
  border-radius: var(--dn-radius-lg);
  padding: 36px 32px 32px;
  width: 400px;
  box-shadow: var(--dn-shadow-xl);
  position: relative;
  z-index: 1;
}
.login-box::before {
  /* Health Up logo is rendered as <img class="login-logo"> in login.html;
     this pseudo-element is disabled but kept (specificity targets below). */
  content: none;
  /* legacy values retained as comments for future ref:
     content: ""; width:56px; height:56px;
     background: var(--dn-header-grad); border-radius:16px; margin:0 auto 18px;
     background-image: url("img/dn-logo-stack.png");
     box-shadow: var(--dn-shadow-cta); */
}
.login-box h1 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--dn-ink);
  text-align: center;
}
.login-sub {
  color: var(--dn-text-2);
  margin-bottom: 1.75rem;
  font-size: 14px;
  text-align: center;
}
.login-box label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--dn-ink-2);
  font-size: 13px;
}
.login-box input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-pill);
  margin-bottom: 1rem;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--dn-ink);
  transition: border-color .15s, box-shadow .15s;
}
.login-box input::placeholder { color: var(--dn-text-mute-purple); }
.login-box input:focus {
  outline: none;
  border-color: var(--dn-purple-600);
  box-shadow: 0 0 0 3px var(--dn-purple-100);
}
.login-box button {
  width: 100%;
  padding: 13px;
  background: var(--dn-purple-600);
  color: #fff;
  border: none;
  border-radius: var(--dn-radius-pill);
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  margin-top: 6px;
  box-shadow: var(--dn-shadow-cta);
  transition: background .15s, transform .1s;
}
.login-box button:hover { background: var(--dn-purple-700); transform: translateY(-1px); }
.login-lang { justify-content:flex-end; margin-bottom:.75rem; }
.login-lang a { color: var(--dn-text-mute); }
.login-lang span { color: var(--dn-border); }
.login-lang .lang-active {
  color: var(--dn-purple-600);
  text-decoration-color: var(--dn-orange-400);
}

/* ── Section headers ──────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
  margin: 2rem 0 1rem;
}
.section-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--dn-ink);
  margin: 0;
}
.stat-header-right { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.last-updated {
  font-size: 13px;
  color: var(--dn-text-2);
  background: var(--dn-bg-alt);
  padding: 5px 12px;
  border-radius: var(--dn-radius-pill);
}
.sub-heading {
  font-size: 17px;
  font-weight: 600;
  color: var(--dn-ink);
  margin: 1rem 0 .75rem;
}

.btn-update {
  padding: 8px 16px;
  background: var(--dn-purple-600);
  color: #fff;
  border: none;
  border-radius: var(--dn-radius-pill);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--dn-shadow-cta);
  transition: background .15s, transform .1s;
}
.btn-update:hover { background: var(--dn-purple-700); transform: translateY(-1px); }
.btn-more {
  padding: 7px 14px;
  background: #fff;
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-pill);
  text-decoration: none;
  color: var(--dn-purple-600);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--dn-shadow-sm);
}
.btn-more:hover { background: var(--dn-purple-050); border-color: var(--dn-purple-400); }

/* ── Delta indicators ─────────────────────────────────────────── */
.delta { font-size: 13px; font-weight: 700; white-space: nowrap; }
.delta.up   { color: var(--dn-success-600); }
.delta.down { color: var(--dn-danger-600); }
.delta.flat { color: var(--dn-text-mute); }
.delta-rev  { font-size: 12px; margin-top: 2px; font-weight: 600; }
.delta-rev.up   { color: var(--dn-success-600); }
.delta-rev.down { color: var(--dn-danger-600); }

/* ── Dot indicator ────────────────────────────────────────────── */
.dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--dn-text-mute);  /* inline `style="background:..."` from template wins */
  box-shadow: 0 0 0 2px rgba(255,255,255,1);
}

/* ── Stats / trend tables ─────────────────────────────────────── */
.stats-table td:first-child { min-width: 200px; }
.seg-char {
  font-size: 12px;
  color: var(--dn-text-2);
  margin-top: 4px;
  line-height: 1.5;
  font-weight: 400;
}
.trend-table th:first-child,
.trend-table td:first-child { min-width: 170px; }
.trend-table td { text-align: center; }
.trend-table td:first-child { text-align: left; font-weight: 500; }
.trend-rev { font-size: 12px; color: var(--dn-text-2); margin-top: 2px; }
.trend-ret { font-size: 11px; color: var(--dn-text-mute); margin-top: 1px; }

/* ── Admin ────────────────────────────────────────────────────── */
.admin-section {
  margin-bottom: 2.5rem;
  background: #fff;
  padding: 24px 26px;
  border-radius: var(--dn-radius-lg);
  box-shadow: var(--dn-shadow-md);
}
.admin-section h3 {
  margin-bottom: 1rem;
  font-size: 18px;
  font-weight: 700;
  color: var(--dn-ink);
}
.assign-form {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  align-items: center;
}
.assign-form input,
.assign-form select {
  padding: 9px 14px;
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-pill);
  font-family: inherit;
  font-size: 14px;
  background: #fff;
}
.assign-form input:focus,
.assign-form select:focus {
  outline: none;
  border-color: var(--dn-purple-600);
  box-shadow: 0 0 0 3px var(--dn-purple-100);
}
.assign-form button {
  padding: 9px 18px;
  background: var(--dn-purple-600);
  color: #fff;
  border: none;
  border-radius: var(--dn-radius-pill);
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--dn-shadow-cta);
}
.assign-form button:hover { background: var(--dn-purple-700); }
.inline-form { display: flex; gap: .4rem; align-items: center; }
.btn-small {
  padding: 5px 12px;
  font-size: 12px;
  background: var(--dn-purple-600);
  color: #fff;
  border: none;
  border-radius: var(--dn-radius-pill);
  font-family: inherit;
  cursor: pointer;
}
.btn-small:hover { background: var(--dn-purple-700); }
.btn-remove { background: var(--dn-danger-600) !important; }
.btn-remove:hover { background: var(--dn-danger-500) !important; }
.btn-icon {
  border: none; background: none; cursor: pointer;
  font-size: 16px; color: var(--dn-success-600);
}

/* ── Opportunities page — overrides for the heavy inline styles ── */

/* Restyle sub-header bar to DN purple */
.op-hdr {
  background: var(--dn-header-grad) !important;
  padding: 20px 32px !important;
}
.op-hdr h1 { font-size: 22px !important; font-weight: 700 !important; }
.op-hdr .sub { font-size: 13px !important; color: rgba(255,255,255,.78) !important; }
.op-bdg {
  border-radius: var(--dn-radius-pill) !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-weight: 500;
}

/* Filter bar */
.op-fb { background: #fff !important; padding: 14px 32px !important;
  border-bottom: 1px solid var(--dn-border-2) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.op-fg label {
  font-size: 11px !important;
  color: var(--dn-text-2) !important;
  font-weight: 600 !important;
}
.op-fg select,
.op-fg input[type=text] {
  border: 1px solid var(--dn-border) !important;
  border-radius: var(--dn-radius-pill) !important;
  padding: 8px 28px 8px 14px !important;
  font-size: 14px !important;
  font-family: inherit;
  color: var(--dn-ink) !important;
}
.op-fg select:focus,
.op-fg input:focus {
  border-color: var(--dn-purple-600) !important;
  box-shadow: 0 0 0 3px var(--dn-purple-100) !important;
}
.op-fg input[type=text] { padding: 8px 14px !important; min-width: 200px !important; }
.op-btn {
  border-radius: var(--dn-radius-pill) !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-family: inherit;
  font-weight: 500;
}
.op-btn-r {
  background: var(--dn-bg-alt) !important;
  color: var(--dn-text-2) !important;
  border-color: var(--dn-border) !important;
}
.op-btn-r:hover { background: #ececec !important; }
.op-btn-e {
  background: var(--dn-purple-600) !important;
  color: #fff !important;
  border-color: var(--dn-purple-600) !important;
  box-shadow: var(--dn-shadow-cta);
}
.op-btn-e:hover { background: var(--dn-purple-700) !important; }

/* Stats bar */
.op-sb { padding: 16px 32px !important; gap: 36px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--dn-border-2) !important; }
.op-st .v { font-size: 24px !important; color: var(--dn-ink) !important; }
.op-st .l { font-size: 11px !important; color: var(--dn-text-2) !important;
  font-weight: 600 !important; }

/* Tabs */
.op-tabs { background: #fff !important;
  border-bottom: 1px solid var(--dn-border-2) !important;
  padding: 0 24px; }
.op-tab {
  padding: 12px 22px !important;
  font-size: 14px !important;
  font-family: inherit;
  color: var(--dn-text-2) !important;
  border-bottom: 3px solid transparent !important;
  font-weight: 500;
}
.op-tab.active {
  color: var(--dn-purple-600) !important;
  border-bottom-color: var(--dn-purple-600) !important;
  font-weight: 700 !important;
}

/* Split panel — left list */
.op-lp { border-right: 1px solid var(--dn-border-2) !important; }
.op-lp-hd { background: var(--dn-bg-alt) !important;
  color: var(--dn-text-2) !important;
  font-size: 12px !important; padding: 10px 16px !important; }
.op-search-wrap { padding: 10px 14px !important; }
.op-search-wrap input {
  border: 1px solid var(--dn-border) !important;
  border-radius: var(--dn-radius-pill) !important;
  padding: 8px 14px !important;
  font-family: inherit;
  font-size: 13px !important;
}
.op-search-wrap input:focus {
  outline: none;
  border-color: var(--dn-purple-600) !important;
  box-shadow: 0 0 0 3px var(--dn-purple-100);
}
.op-ci { padding: 11px 16px !important; }
.op-ci:hover { background: var(--dn-purple-050) !important; }
.op-ci.active {
  background: var(--dn-purple-100) !important;
  border-left: 3px solid var(--dn-purple-600) !important;
}
.op-ci-name { font-size: 14px !important; }
.op-ci-sub { font-size: 12px !important; color: var(--dn-text-2) !important; }
.op-badge {
  border-radius: var(--dn-radius-pill) !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
}
.op-badge.miss { background: #ffe5e5 !important; color: var(--dn-danger-600) !important;
  border-color: #ffb8b8 !important; }
.op-badge.ok { background: #e8f7ea !important; color: var(--dn-success-600) !important;
  border-color: #c8ecce !important; }

/* Right panel */
.op-rp { background: var(--dn-bg-page) !important; }
.op-det-hd { padding: 18px 22px !important; border-bottom-color: var(--dn-border-2) !important; }
.op-det-hd h3 { font-size: 18px !important; color: var(--dn-ink) !important; }
.op-det-sub { color: var(--dn-text-2) !important; }

/* Product tiles */
.op-tile { border-radius: var(--dn-radius-sm) !important; padding: 9px 8px !important; }
.op-tile.bought { background: #e8f7ea !important; border-color: #c8ecce !important; }
.op-tile.miss   { background: #ffe5e5 !important; border-color: #ffb8b8 !important; }
.op-tile.bought .op-tile-name { color: var(--dn-success-600) !important; }
.op-tile.miss   .op-tile-name { color: var(--dn-danger-600) !important; }

/* Item table */
.op-item-tbl { border-radius: var(--dn-radius-lg) !important;
  box-shadow: var(--dn-shadow-md) !important; }
.op-item-tbl th {
  background: var(--dn-bg-alt) !important;
  font-size: 12px !important;
  color: var(--dn-text-2) !important;
  border-bottom: 1px solid var(--dn-border-2) !important;
  padding: 12px 14px !important;
}
.op-item-tbl td { padding: 11px 14px !important; font-size: 14px !important;
  border-bottom: 1px solid var(--dn-border-2) !important; }
.op-item-tbl tr:hover td { background: var(--dn-purple-050) !important; }
.op-item-tbl tr.sel-item td { background: var(--dn-purple-100) !important; }
.op-btn-gap {
  background: var(--dn-purple-600) !important;
  border-radius: var(--dn-radius-pill) !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-family: inherit;
  font-weight: 500;
  box-shadow: var(--dn-shadow-cta);
}
.op-btn-gap:hover { background: var(--dn-purple-700) !important; }
.op-gap-tbl th { background: var(--dn-bg-alt) !important;
  color: var(--dn-text-2) !important;
  border-bottom-color: var(--dn-border-2) !important; }

/* ===================================================================
   Customer Detail page (CR-001) + supporting widgets
   ================================================================ */

/* Back link (used on detail pages) */
.cd-back, .back-link {
  font-size: 13px;
  color: var(--dn-purple-600);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-pill);
  box-shadow: var(--dn-shadow-sm);
  margin-bottom: 1rem;
}
.cd-back:hover, .back-link:hover {
  background: var(--dn-purple-050);
  border-color: var(--dn-purple-400);
  color: var(--dn-purple-700);
}

/* Customer detail header strip */
.cd-header {
  background: #fff;
  border-radius: var(--dn-radius-lg);
  padding: 22px 26px;
  margin-bottom: 1.25rem;
  box-shadow: var(--dn-shadow-md);
  border-left: 6px solid var(--dn-purple-600);
}
.cd-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--dn-ink);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  line-height: 1.25;
}
.cd-header h2 .badge { font-size: 13px; padding: 5px 14px; }
.cd-meta {
  color: var(--dn-text-2);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 8px;
}
.cd-meta code {
  background: var(--dn-purple-050);
  color: var(--dn-purple-700);
  padding: 2px 8px;
  border-radius: var(--dn-radius-xs);
  font-family: "SFMono-Regular","Menlo","Consolas",monospace;
  font-size: 13px;
}
.cd-contact {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  margin-bottom: 10px;
}
.cd-contact a {
  color: var(--dn-purple-600);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cd-line {
  color: var(--dn-success-300);
  font-weight: 500;
}
.cd-action {
  background: var(--dn-purple-050);
  color: var(--dn-purple-700);
  padding: 10px 14px;
  border-radius: var(--dn-radius);
  font-size: 13px;
  font-weight: 500;
  border-left: 3px solid var(--dn-purple-600);
  margin-top: 10px;
}

/* Section heading on detail page */
.cd-section {
  font-size: 18px;
  font-weight: 700;
  color: var(--dn-ink);
  margin: 1.75rem 0 .85rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cd-section::before {
  content: "";
  width: 4px;
  height: 18px;
  background: var(--dn-purple-600);
  border-radius: 2px;
}

/* Customer-detail link in lists (reorders / visits / customers) */
.cd-link {
  color: var(--dn-purple-600);
  font-weight: 500;
  text-decoration: none;
}
.cd-link:hover {
  color: var(--dn-purple-700);
  text-decoration: underline;
  text-decoration-color: var(--dn-orange-400);
  text-underline-offset: 3px;
}

/* KPI grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 1.5rem;
}
.kpi-card {
  background: #fff;
  border-radius: var(--dn-radius-lg);
  padding: 16px 18px 14px;
  box-shadow: var(--dn-shadow-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 96px;
  transition: transform .15s, box-shadow .15s;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); }
.kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--dn-text-2);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--dn-ink);
  line-height: 1.1;
  margin-top: 2px;
}
.kpi-trend {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}
.kpi-trend.trend-up   { color: var(--dn-success-600); }
.kpi-trend.trend-down { color: var(--dn-danger-600); }
.kpi-trend.trend-flat { color: var(--dn-text-mute); }
.kpi-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--dn-text-2);
  line-height: 1.4;
}

/* 24-month revenue trend card */
.trend-card {
  background: #fff;
  border-radius: var(--dn-radius-lg);
  padding: 18px 22px 16px;
  box-shadow: var(--dn-shadow-md);
  margin-bottom: 1.75rem;
}
.trend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.trend-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dn-ink);
}
.trend-yoy {
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--dn-radius-pill);
  background: var(--dn-bg-alt);
}
.trend-yoy.trend-up   { background: #e8f7ea; color: var(--dn-success-600); }
.trend-yoy.trend-down { background: #ffe5e5; color: var(--dn-danger-600); }
.trend-yoy.trend-flat { background: var(--dn-bg-alt); color: var(--dn-text-2); }

.trend-svg {
  width: 100%;
  height: 220px;
  display: block;
}
.trend-grid {
  stroke: var(--dn-border-2);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.trend-axis-label {
  fill: var(--dn-text-mute);
  font-size: 10px;
  font-family: var(--dn-font-family);
}
.trend-year-sep {
  stroke: var(--dn-border);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: .6;
}
.trend-year-label {
  fill: var(--dn-text-2);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--dn-font-family);
}
.trend-fill {
  fill: var(--dn-purple-600);
  opacity: .12;
}
.trend-line {
  fill: none;
  stroke: var(--dn-purple-600);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.trend-hover {
  fill: transparent;
  cursor: crosshair;
}
.trend-hover.hl {
  fill: var(--dn-purple-600);
  opacity: .08;
}

.trend-detail {
  min-height: 40px;
  margin-top: 8px;
  padding: 8px 0 0;
  border-top: 1px solid var(--dn-border-2);
}
.trend-compare {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  color: var(--dn-text-2);
}
.trend-compare[hidden] { display: none; }
.tc-entry strong {
  color: var(--dn-ink);
  font-weight: 600;
  margin-right: 6px;
}
.tc-delta {
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--dn-radius-pill);
  font-size: 12px;
}
.tc-delta.trend-up   { background: #e8f7ea; color: var(--dn-success-600); }
.tc-delta.trend-down { background: #ffe5e5; color: var(--dn-danger-600); }
.tc-delta.trend-flat { background: var(--dn-bg-alt); color: var(--dn-text-2); }

.trend-xaxis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--dn-text-mute);
  margin-top: 4px;
  padding: 0 2px;
}

/* "num" cell — right-align (opportunity_detail uses this) */
td.num, th.num { text-align: right; white-space: nowrap; }

/* ===================================================================
   Responsive — tablet (≤900px) and phone (≤600px)
   Keep wide tables horizontally scrollable inside .table-wrap (already
   set above); the rest collapses to single-column.
   ================================================================ */

@media (max-width: 1100px) {
  /* Opportunities: split panel was 320px + 1fr — drop sidebar width */
  .op-split { grid-template-columns: 260px 1fr !important; }
  .op-grid  { grid-template-columns: repeat(4, 1fr) !important; }
}

@media (max-width: 900px) {
  /* Tighter page padding */
  main { padding: 20px 18px 50px; }

  /* Nav: shrink chips, smaller gap, hide language span separator */
  nav { padding: 10px 14px; }
  .nav-brand { font-size: 17px; gap: 8px; }
  .nav-brand::before { width: 26px; height: 26px; background-size: 18px; }
  .nav-links { gap: .75rem; row-gap: .4rem; width: 100%; }
  .nav-links > a { font-size: 14px; padding: 2px 0; }
  .nav-user {
    font-size: 13px; padding: 4px 10px;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }
  .btn-logout { padding: 5px 12px !important; font-size: 13px; }

  /* Page header stacks vertically */
  .page-header { flex-direction: column; align-items: stretch; gap: .75rem; }
  .page-header h2 { font-size: 22px; }
  .filter-bar { width: 100%; }
  .filter-bar select, .filter-bar input[type=text] { flex: 1; min-width: 0; }

  /* Customer-detail header */
  .cd-header { padding: 18px 18px; }
  .cd-header h2 { font-size: 20px; }
  .cd-contact { gap: 10px; font-size: 13px; }

  /* Segments + KPIs reflow to 2 columns minimum */
  .segment-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
  .segment-card { padding: 16px 18px; }
  .seg-count { font-size: 24px; }

  .kpi-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .kpi-card { padding: 14px 16px 12px; min-height: 86px; }
  .kpi-value { font-size: 20px; }

  /* Section + sub headings */
  .section-header h3 { font-size: 17px; }
  .sub-heading { font-size: 15px; }
  .cd-section { font-size: 16px; margin: 1.25rem 0 .65rem; }

  /* Trend card */
  .trend-card { padding: 16px 16px 14px; }
  .trend-title { font-size: 14px; }
  .trend-svg { height: 200px; }

  /* Opportunities */
  .op-hdr { padding: 14px 18px !important; }
  .op-hdr h1 { font-size: 18px !important; }
  .op-fb, .op-sb { padding: 12px 18px !important; }
  .op-sb { gap: 22px !important; }
  .op-tabs { padding: 0 12px; }
  .op-tab { padding: 10px 14px !important; font-size: 13px !important; }
  .op-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 720px) {
  /* Opportunities split → stack into two rows, list above, detail below */
  .op-split {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto;
    height: auto !important;
    overflow: visible !important;
  }
  .op-lp {
    border-right: none !important;
    border-bottom: 1px solid var(--dn-border-2) !important;
    max-height: 360px;
  }
}

@media (max-width: 600px) {
  main { padding: 16px 12px 40px; }

  /* Nav stacks: brand on top row, links below, links wrap */
  nav {
    padding: 10px 12px;
    flex-direction: column;
    align-items: stretch;
    gap: .55rem;
  }
  .nav-brand { font-size: 16px; }
  .nav-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .35rem .75rem;
    align-items: center;
  }
  .nav-links > a { font-size: 13px; padding: 1px 0; }
  .nav-links > a:hover { text-underline-offset: 5px; }
  .nav-user {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 12px;
  }
  .lang-switch { grid-column: 1; justify-self: start; }
  .btn-logout {
    grid-column: 2;
    justify-self: end;
    padding: 4px 12px !important;
    font-size: 12px;
  }

  /* Page header smaller */
  .page-header h2 { font-size: 19px; }
  .filter-bar { gap: .4rem; }
  .filter-bar select, .filter-bar input[type=text] {
    padding: 8px 12px; font-size: 13px; min-width: 0; width: 100%;
  }
  .filter-bar button, .btn-export, .btn-update, .btn-more {
    padding: 8px 14px !important; font-size: 13px !important;
  }

  /* Cards reflow to single column */
  .segment-grid { grid-template-columns: 1fr; gap: 10px; }
  .segment-card { padding: 14px 16px; }

  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi-card { padding: 12px 14px 10px; min-height: 78px; }
  .kpi-label { font-size: 10px; }
  .kpi-value { font-size: 18px; }
  .kpi-sub { font-size: 11px; }

  /* Customer-detail header */
  .cd-header { padding: 16px; border-left-width: 4px; }
  .cd-header h2 { font-size: 18px; gap: 8px; }
  .cd-header h2 .badge { font-size: 11px; padding: 4px 10px; }
  .cd-meta { font-size: 13px; }
  .cd-action { padding: 10px 12px; font-size: 12px; }
  .cd-back, .back-link { font-size: 12px; padding: 5px 12px; }

  /* Tables: tighter cells, slightly smaller type — horizontal scroll keeps
     full width via .table-wrap. */
  th { padding: 9px 10px; font-size: 11px; }
  th:first-child { padding-left: 14px; }
  th:last-child  { padding-right: 14px; }
  td { padding: 9px 10px; font-size: 13px; }
  td:first-child { padding-left: 14px; }
  td:last-child  { padding-right: 14px; }
  .badge { padding: 3px 9px; font-size: 11px; }
  .result-count { padding: 8px 14px; font-size: 12px; }

  /* Trend chart */
  .trend-card { padding: 14px 12px 12px; }
  .trend-svg { height: 170px; }
  .trend-yoy { font-size: 11px; padding: 3px 10px; }
  .trend-xaxis { font-size: 10px; }
  .trend-xaxis span:nth-child(3),
  .trend-xaxis span:nth-child(5) { display: none; }  /* thin out labels */
  .trend-compare { gap: 10px; font-size: 12px; }
  .tc-delta { font-size: 11px; padding: 2px 8px; }

  /* Login */
  .login-box { width: 100%; max-width: 360px; padding: 28px 22px 24px; }
  .login-box h1 { font-size: 20px; }

  /* Opportunities */
  .op-hdr { padding: 12px 14px !important; flex-wrap: wrap; }
  .op-hdr h1 { font-size: 16px !important; }
  .op-hdr .sub { font-size: 12px !important; }
  .op-bdg { font-size: 11px !important; padding: 4px 10px !important; }
  .op-fb { padding: 10px 14px !important; }
  .op-fg { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .op-fg select, .op-fg input[type=text] { width: 100%; min-width: 0 !important; }
  .op-sb { padding: 12px 14px !important; gap: 18px !important; }
  .op-st .v { font-size: 18px !important; }
  .op-st .l { font-size: 10px !important; }
  .op-grid { grid-template-columns: repeat(2, 1fr) !important; padding: 12px; }
  .op-tile-name { font-size: 11px; }
  .op-lp-hd { padding: 8px 14px !important; }
  .op-ci { padding: 10px 14px !important; }
  .op-det-hd { padding: 14px !important; }

  /* Admin permissions table — wide; keep horizontal scroll only */
  .admin-section { padding: 18px 16px; }
  .admin-section h3 { font-size: 16px; }
  .assign-form input, .assign-form select { width: 100%; }

  /* Section heading bar (decorative purple stripe) gets thinner */
  .cd-section::before { width: 3px; height: 16px; }
}

@media (max-width: 400px) {
  /* Below this point: hide non-essential cells if a table gets really cramped.
     Keep horizontal scroll as primary fallback. */
  .nav-links { grid-template-columns: 1fr 1fr 1fr; }
  .kpi-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   Bottom tab bar (mobile only).
   Activated by placing <nav class="mobile-tabbar"> at the end of <body>;
   on ≤900px we hide the primary nav links in the top header and reveal
   the fixed bottom bar instead. Sales reps then reach all common pages
   with their thumb, while the top header stays compact: brand + user
   chip + lang + logout.
   ================================================================ */

.mobile-tabbar { display: none; }
.mt-sheet { display: none; }

@media (max-width: 900px) {
  /* Top nav: hide nav links (Dashboard/Customers/…). The user chip,
     lang switch, and logout button remain so identity + session stay
     reachable without opening any sheet. */
  .nav-links > a:not(.btn-logout) { display: none !important; }
  /* User chip + lang + logout cluster on one row, right-aligned */
  nav { flex-wrap: nowrap; align-items: center; }
  .nav-links {
    flex: 1; justify-content: flex-end;
    gap: .55rem; row-gap: 0;
    flex-wrap: nowrap;
  }
  .nav-user {
    max-width: 130px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Make the bottom bar visible and reserve space for it */
  main { padding-bottom: 90px; }
  body { padding-bottom: 0; }

  .mobile-tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    /* explicit top:auto — base `nav` rule sets top:0 for the sticky
       header, which would otherwise stretch the fixed tabbar to fill
       the viewport when combined with bottom:0. */
    top: auto;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--dn-border-2);
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
    padding: 6px 4px max(8px, env(safe-area-inset-bottom));
    z-index: 100;
    font-family: var(--dn-font-family);
    /* override the generic `nav` flex/gap/padding defaults */
    gap: 0;
  }
  .mt-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 2px;
    color: var(--dn-text-2);
    font-size: 10.5px;
    font-weight: 500;
    text-decoration: none;
    background: none; border: 0;
    cursor: pointer;
    font-family: inherit;
    transition: color .15s;
    min-height: 50px;
  }
  .mt-tab .mt-ic {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    font-size: 18px;
    border-radius: 14px;
    transition: background .15s, transform .12s;
  }
  .mt-tab .mt-lbl {
    line-height: 1.2;
    white-space: nowrap;
  }
  .mt-tab:hover { color: var(--dn-purple-600); }
  .mt-tab.active {
    color: var(--dn-purple-600);
    font-weight: 700;
  }
  .mt-tab.active .mt-ic {
    background: var(--dn-purple-100);
    color: var(--dn-purple-700);
  }
  .mt-tab:active .mt-ic { transform: scale(0.9); }

  /* "More" sheet overlay — opens above bottom bar with extra nav items */
  .mt-sheet {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(0,0,0,.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
  }
  .mt-sheet.open {
    opacity: 1;
    pointer-events: auto;
  }
  .mt-sheet-panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-radius: 18px 18px 0 0;
    padding: 16px 18px max(24px, env(safe-area-inset-bottom));
    box-shadow: 0 -12px 32px rgba(0,0,0,.18);
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.22,.7,.3,1);
    max-height: 78vh;
    overflow-y: auto;
  }
  .mt-sheet.open .mt-sheet-panel { transform: translateY(0); }
  .mt-sheet-panel::before {
    content: "";
    display: block;
    width: 44px; height: 4px;
    background: var(--dn-border);
    border-radius: 2px;
    margin: -4px auto 14px;
  }
  .mt-sheet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
  }
  .mt-sheet-item {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 14px;
    background: var(--dn-bg-alt);
    border-radius: 12px;
    color: var(--dn-ink);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: background .15s;
  }
  .mt-sheet-item:hover { background: var(--dn-purple-050); }
  .mt-sheet-item.active {
    background: var(--dn-purple-100);
    color: var(--dn-purple-700);
  }
  .mt-sheet-item .mt-ic {
    width: 32px; height: 32px;
    background: #fff;
    display: grid; place-items: center;
    border-radius: 10px;
    font-size: 16px;
    flex-shrink: 0;
  }
  .mt-sheet-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
  }
  .mt-sheet-link {
    display: block;
    padding: 10px 12px;
    border-radius: var(--dn-radius-sm);
    color: var(--dn-text);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
  }
  .mt-sheet-link:hover { background: var(--dn-bg-alt); }
  .mt-sheet-link.active {
    background: var(--dn-purple-050);
    color: var(--dn-purple-700);
    font-weight: 600;
  }
  .mt-sheet-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--dn-border-2);
  }
  .mt-sheet-foot .mt-lang {
    font-size: 13px;
    color: var(--dn-text-2);
  }
  .mt-sheet-foot .mt-lang a {
    color: var(--dn-text-2);
    text-decoration: none;
  }
  .mt-sheet-foot .mt-lang a.active {
    color: var(--dn-purple-700);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--dn-orange-400);
    text-underline-offset: 3px;
  }
  .mt-sheet-foot .mt-logout {
    background: var(--dn-orange-600);
    color: #fff;
    padding: 8px 18px;
    border-radius: var(--dn-radius-pill);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }
}

/* ───────────────────────────────────────────────────────────────
   Retail dashboard helpers (Sprint 3+)
   ─────────────────────────────────────────────────────────────── */

.card {
  background: var(--dn-bg);
  border: 1px solid var(--dn-border-2);
  border-radius: var(--dn-radius);
  padding: 18px 22px;
  margin: 16px 0;
  box-shadow: var(--dn-shadow-sm);
}
.card h2 { font-size: 18px; margin: 0 0 12px; color: var(--dn-ink); }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.kpi {
  background: var(--dn-purple-050);
  border: 1px solid var(--dn-purple-100);
  border-radius: var(--dn-radius-sm);
  padding: 12px 14px;
}
.kpi .kpi-label { font-size: 11px; color: var(--dn-text-2); text-transform: uppercase; letter-spacing: .03em; }
.kpi .kpi-value { font-size: 22px; font-weight: 700; color: var(--dn-purple-900); }
.kpi .kpi-value.neg { color: var(--dn-danger-600); }

.muted { color: var(--dn-text-mute); font-size: 13px; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.data-table th, .data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--dn-border-2);
  text-align: left;
}
.data-table thead th {
  background: var(--dn-bg-soft);
  font-weight: 600;
  color: var(--dn-text-2);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .03em;
}
.data-table tr:hover td { background: var(--dn-bg-soft); }
.data-table td.neg { color: var(--dn-danger-600); }

.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 12px 0 18px;
  border-bottom: 2px solid var(--dn-border-2);
  align-items: end;
}
.subnav a {
  padding: 8px 16px;
  border-radius: var(--dn-radius-sm) var(--dn-radius-sm) 0 0;
  color: var(--dn-text-2);
  font-weight: 500;
}
.subnav a.active {
  background: var(--dn-purple-600);
  color: #fff;
}
.subnav a:hover:not(.active) { background: var(--dn-purple-050); }

.branch-picker { margin-left: auto; padding-bottom: 4px; }
.branch-picker select {
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-sm);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 14px;
  background: var(--dn-bg);
  max-width: 360px;
}

.hourly-chart, .trend-chart {
  display: block;
  margin-top: 8px;
}
.hourly-chart rect { transition: fill .15s; }
.hourly-chart rect:hover { fill: var(--dn-orange-500); cursor: default; }

@media (max-width: 720px) {
  .subnav { font-size: 13px; }
  .branch-picker select { max-width: 200px; font-size: 13px; }
  .data-table { font-size: 12px; }
  .data-table th, .data-table td { padding: 6px 8px; }
  body main { padding-bottom: 80px; }  /* space for mobile tabbar */
}

/* Sprint 4: zone heatmap + leakage alert row */
.heatmap-scroll { overflow-x: auto; max-width: 100%; }
.heatmap {
  border-collapse: collapse;
  font-size: 11px;
}
.heatmap th, .heatmap td {
  padding: 2px 3px;
  border: 1px solid var(--dn-border-2);
  text-align: center;
}
.heatmap th { background: var(--dn-bg-soft); font-weight: 500; color: var(--dn-text-2); }
.heatmap-row-label {
  text-align: left;
  font-weight: 600;
  background: var(--dn-bg-soft);
  position: sticky; left: 0;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.heatmap-cell { width: 22px; height: 22px; position: relative; }
.heatmap-cell.empty { background: #fafafa; }
.heatmap-cell .heatmap-tip {
  visibility: hidden;
  position: absolute;
  bottom: 100%; left: 50%; transform: translateX(-50%);
  background: var(--dn-ink); color: #fff;
  padding: 4px 8px; border-radius: 4px; font-size: 11px;
  white-space: nowrap; z-index: 10;
}
.heatmap-cell:hover .heatmap-tip { visibility: visible; }

.data-table tr.row-alert td { background: rgba(255, 33, 71, 0.08); }
.data-table tr.row-alert:hover td { background: rgba(255, 33, 71, 0.14); }

/* Sprint 5: zone×group matrix + ramp-status pills */
.matrix { border-collapse: collapse; width: 100%; }
.matrix th, .matrix td {
  border: 1px solid var(--dn-border-2);
  padding: 6px 8px;
  text-align: center;
  min-width: 90px;
}
.matrix th { background: var(--dn-bg-soft); font-size: 12px; }
.matrix-cell { vertical-align: middle; }
.matrix-cell.empty { color: var(--dn-text-mute); background: #fafafa; }
.matrix-rev { font-weight: 700; font-size: 14px; }
.matrix-sub { font-size: 10px; color: var(--dn-text-2); margin-top: 2px; }

.status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--dn-radius-pill);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.status-mature      { background: var(--dn-purple-100); color: var(--dn-purple-800); }
.status-stabilizing { background: var(--dn-orange-100); color: var(--dn-orange-700); }
.status-ramping     { background: #d1fae5; color: #047857; }
.status-unknown     { background: #f3f4f6; color: var(--dn-text-2); }

/* Sprint 6: customer 360 — segment pills, search bar */
.segment-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--dn-radius-pill);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.tier-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--dn-radius-pill);
  background: var(--dn-orange-100);
  color: var(--dn-orange-700);
  font-size: 12px;
  font-weight: 600;
  margin-left: 6px;
}
.search-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.search-bar input[type="search"] {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-sm);
  font-family: inherit;
  font-size: 14px;
}
.search-bar button {
  padding: 8px 16px;
  background: var(--dn-purple-600);
  color: #fff;
  border: 0;
  border-radius: var(--dn-radius-sm);
  cursor: pointer;
  font-size: 14px;
}
.data-table.compact th, .data-table.compact td { font-size: 13px; padding: 6px 10px; }
.data-table.compact th { background: var(--dn-bg-soft); width: 30%; }

/* Sprint 8: admin pills + inline forms */
.inline-form { display: inline-flex; gap: 4px; align-items: center; }
.inline-form input, .inline-form select {
  padding: 4px 8px; font-size: 13px;
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-sm);
}
.inline-form button, .data-table button {
  padding: 4px 10px; font-size: 12px;
  background: var(--dn-purple-600); color: #fff;
  border: 0; border-radius: var(--dn-radius-sm); cursor: pointer;
}
.btn-pill {
  display: inline-block;
  padding: 2px 8px !important;
  border-radius: var(--dn-radius-pill) !important;
  background: var(--dn-purple-100) !important;
  color: var(--dn-purple-800) !important;
  font-size: 11px !important;
  cursor: pointer;
}
.btn-pill:hover { background: var(--dn-orange-100) !important; color: var(--dn-orange-700) !important; }
.nav-export {
  font-size: 12px;
  padding: 4px 10px;
  background: rgba(255,255,255,.12);
  border-radius: var(--dn-radius-pill);
  margin-left: 6px;
}

/* Sprint 8 follow-up: interactive trend chart on /exec
   - circle grows + brightens on hover (or when the larger transparent hit
     target is hovered)
   - a faint vertical guide line drops to the x-axis on hover for context */
.trend-pt-group .trend-pt {
  transition: r .12s ease-out, stroke-width .12s ease-out;
}
.trend-pt-group:hover .trend-pt {
  r: 7;
  stroke-width: 3;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.25));
}
.trend-pt-group:hover .trend-guide { opacity: .55; }
.trend-pt-group .trend-hit { cursor: crosshair; }

/* Pair-highlight + YoY label on /exec revenue trend.
   .trend-paired is applied by inline script in exec.html when the user
   hovers the partner-point 12 months later. */
.trend-pt-group .trend-yoy-label {
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.trend-pt-group:hover .trend-yoy-label { opacity: 1; }
.trend-pt-group:hover .trend-pair-line { opacity: .7; }

.trend-pt-group.trend-paired .trend-pt {
  r: 6;
  stroke: var(--dn-orange-500);
  stroke-width: 3;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.15));
}
.trend-pt-group.trend-paired .trend-guide {
  opacity: .55;
  stroke: var(--dn-orange-500);
}

/* MTD (in-progress month) point: striped fill + slightly transparent so it
   reads as "estimate / not full data" at a glance. */
.trend-pt-partial .trend-pt {
  fill: #94a3b8 !important;
  stroke-dasharray: 2 2;
}
.trend-pt-partial .trend-pt-mtd-badge {
  fill: #64748b;
  font-style: italic;
}

/* Health Up rebrand: nav logo placement + login logo */
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.nav-brand:hover { color: #fff; opacity: .9; }
.nav-logo {
  height: 28px;
  width: auto;
  background: #fff;
  border-radius: var(--dn-radius-sm);
  padding: 3px 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.login-logo {
  display: block;
  max-width: 180px;
  margin: 0 auto 18px;
}

/* Refresh trend chart palette: use teal as primary stroke instead of purple
   (the variable already remaps, but the polyline & circles use hard-coded
   #6d44ff in their inline attrs — override at the class level). */
.trend-chart polyline { stroke: var(--dn-purple-700); }
.trend-chart circle.trend-pt { fill: var(--dn-purple-600); }
.trend-chart circle.trend-pt[fill="#22c55e"] { fill: #16a34a !important; }
.trend-chart circle.trend-pt[fill="#f59e0b"] { fill: #F16823 !important; }
.trend-pt-group.trend-paired .trend-pt { stroke: var(--dn-orange-600); }
.trend-pair-line { stroke: var(--dn-orange-600); }

/* Sales/Finance view toggle in /exec subnav */
.view-toggle {
  margin-left: auto;
  display: inline-flex;
  gap: 2px;
  padding-bottom: 4px;
}
.view-toggle a {
  padding: 6px 12px;
  border-radius: var(--dn-radius-sm);
  font-size: 12px;
  color: var(--dn-text-2);
  border: 1px solid var(--dn-border);
  background: var(--dn-bg);
}
.view-toggle a.active {
  background: var(--dn-purple-600);
  color: #fff;
  border-color: var(--dn-purple-600);
}
.view-toggle a:not(.active):hover { background: var(--dn-purple-050); }

/* ── Usage analytics page (/admin/usage) ───────────────────────────────────
   Small additions on top of the existing .page-header / .kpi-* / .table-wrap
   primitives. Period chips reuse the .filter-bar pill aesthetic. */
.usage-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.usage-period {
  display: inline-flex;
  gap: 6px;
}
.usage-chip {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-pill);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--dn-text-2);
  background: #fff;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.usage-chip:hover { background: var(--dn-bg-alt); }
.usage-chip.active {
  background: var(--dn-purple-600);
  color: #fff;
  border-color: var(--dn-purple-600);
}
tr.usage-stale td {
  color: var(--dn-text-2);
  background: var(--dn-bg-alt);
}
.usage-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--dn-radius-pill);
  background: var(--dn-orange-100, #fdebd3);
  color: var(--dn-orange-700, #a44400);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.usage-tag {
  display: inline-block;
  margin-right: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}
.usage-tag-branch { background: #ede7fa; color: var(--dn-purple-700); }
.usage-tag-zone   { background: #e7f0fa; color: #1d4f91; }
.usage-tag-cust   { background: #fff1e0; color: var(--dn-orange-700, #a44400); }

/* Per-user drill: clickable rows in the per-user table, inline link in the
   recent-activity user cell. .usage-user-link wraps individual <td>
   contents (not the <tr>) so the entire row reads as a clickable button
   with a single hover background — the parent <tr> picks that up via the
   :has() selector, with a fallback hover on the link itself. */
.usage-user-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
tr:has(.usage-user-link):hover { background: var(--dn-bg-alt); }
.usage-user-link:hover { background: var(--dn-bg-alt); }
.usage-user-inline {
  color: var(--dn-purple-700);
  text-decoration: none;
}
.usage-user-inline:hover { text-decoration: underline; }
.usage-hour-bar {
  fill: var(--dn-purple-600);
}
.usage-hour-bar:hover {
  fill: var(--dn-orange-600);
}

.usage-snapshot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 1rem 0 0.75rem;
  padding: 10px 14px;
  border-radius: var(--dn-radius-sm);
  background: var(--dn-bg-alt);
  font-size: 13px;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   Sales Recovery Center rebuild — module skeleton
   Module header, branch picker, planned-section cards, changelog.
   ══════════════════════════════════════════════════════════════════════════ */

.mod-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.mod-head-main { display: flex; align-items: center; gap: 14px; }
.mod-icon {
  font-size: 30px; line-height: 1;
  width: 54px; height: 54px; flex: 0 0 54px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--dn-radius-md);
  background: var(--dn-purple-050); box-shadow: var(--dn-shadow-sm);
}
.mod-title { font-size: 22px; font-weight: 700; color: var(--dn-ink); margin: 0; }
.mod-sub { font-size: 13.5px; color: var(--dn-text-2); margin: 2px 0 0; }

.branch-picker { display: flex; flex-direction: column; gap: 4px; }
.branch-picker label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--dn-text-3);
}
.branch-picker select {
  padding: 9px 14px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-pill);
  background: var(--dn-bg); color: var(--dn-ink); min-width: 220px;
}
.branch-picker select:disabled { opacity: .8; }

.mod-planned-head {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--dn-text-3); margin-bottom: 10px;
}
.mod-sections { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.sec-card { border-left: 4px solid var(--dn-border); }
.sec-card.sec-ready { border-left-color: var(--dn-success-400); }
.sec-card.sec-query { border-left-color: var(--dn-orange-400); }
.sec-card.sec-gap   { border-left-color: var(--dn-danger-500); }
.sec-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sec-label { font-size: 14.5px; font-weight: 600; color: var(--dn-ink); }
.sec-badge { font-size: 11px; font-weight: 600; white-space: nowrap; }
.sec-pending {
  margin-top: 8px; font-size: 12px; color: var(--dn-text-mute);
  border-top: 1px dashed var(--dn-border-2); padding-top: 8px;
}

/* changelog */
.cl-add { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.25rem; }
.cl-add-row { display: flex; gap: 12px; flex-wrap: wrap; }
.cl-add label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--dn-text-2); }
.cl-add .cl-grow { flex: 1 1 240px; }
.cl-add input, .cl-add textarea {
  padding: 8px 12px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-sm);
  background: var(--dn-bg);
}
.cl-add .cta { align-self: flex-start; }
.cl-list { display: flex; flex-direction: column; gap: 12px; }
.cl-entry-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cl-date { font-size: 12px; font-weight: 600; color: var(--dn-text-3); }
.cl-version {
  font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: var(--dn-radius-pill);
  background: var(--dn-purple-050); color: var(--dn-purple-800);
}
.cl-entry-title { font-size: 15px; font-weight: 700; color: var(--dn-ink); }
.cl-body { margin-top: 8px; font-size: 14px; color: var(--dn-text-2); white-space: pre-wrap; }
.cl-meta { margin-top: 8px; font-size: 12px; color: var(--dn-text-mute); }

/* ── /sales module ────────────────────────────────────────────────────────── */
.range-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 1rem; }
.range-pill {
  padding: 7px 16px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-pill);
  background: var(--dn-bg); color: var(--dn-text-2);
}
.range-pill.active { background: var(--dn-purple-600); color: #fff; border-color: var(--dn-purple-600); }
.range-label { font-size: 12px; color: var(--dn-text-mute); margin-left: 4px; }

.sales-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 1.25rem; }
.kpi-tile { display: flex; flex-direction: column; gap: 6px; }
.kpi-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--dn-text-3); }
.kpi-val { font-size: 26px; font-weight: 700; color: var(--dn-ink); line-height: 1.1; }
.kpi-cmp { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--dn-text-3); }
.kpi-delta { font-weight: 700; }
.kpi-delta.up { color: var(--dn-success-600); }
.kpi-delta.down { color: var(--dn-danger-600); }
.kpi-delta.flat { color: var(--dn-text-mute); }

.chart-card { margin-bottom: 1.25rem; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.chart-head h2 { font-size: 15px; font-weight: 700; color: var(--dn-ink); margin: 0; }
.chart-legend { font-size: 12px; color: var(--dn-text-2); display: flex; align-items: center; gap: 6px; }
.chart-legend .lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 8px; }
.chart-legend .lg-now { background: var(--dn-purple-600); }
.chart-legend .lg-prev { background: var(--dn-purple-100); }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-svg .bar-now { fill: var(--dn-purple-600); }
.chart-svg .bar-prev { fill: var(--dn-purple-100); }
.chart-svg .bar-xlabel { fill: var(--dn-text-3); font-size: 11px; }
.chart-svg .bar-vlabel { fill: var(--dn-text-2); font-size: 10px; }
.chart-svg .line-path { stroke: var(--dn-orange-600); stroke-width: 2.5; }
.chart-svg .line-dot { fill: var(--dn-orange-600); }
.forecast-stub { opacity: .95; border: 1px dashed var(--dn-border); }

/* ── /staff module ────────────────────────────────────────────────────────── */
.data-table td.num, .data-table th.num { text-align: right; white-space: nowrap; }
.staff-role { display: block; font-size: 11px; color: var(--dn-text-mute); font-weight: 400; }
.data-table .pending-col { color: var(--dn-text-mute); }
.pending-note { margin-top: 10px; font-size: 12px; color: var(--dn-text-mute); }