/* ===================================================================
   Wholesale CRM — restyled for DN Online design system.
   Drop-in replacement for static/style.css. Templates unchanged.
   Tokens (--dn-*) embedded inline so you don't need a second file.
   ================================================================ */

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

/* ── DN tokens ────────────────────────────────────────────────── */
:root {
  /* purple */
  --dn-purple-900:#3d2670; --dn-purple-800:#5a3996; --dn-purple-700:#6944ad;
  --dn-purple-600:#6d44ff; --dn-purple-500:#7853fe; --dn-purple-400:#8d6dff;
  --dn-purple-200:#c9bcff; --dn-purple-100:#ece6ff; --dn-purple-050:#f5f1ff;
  --dn-header-grad: linear-gradient(90deg,#5a3996,#6d44ff);
  /* orange */
  --dn-orange-700:#f96e20; --dn-orange-600:#fe7d40; --dn-orange-500:#ff7f00;
  --dn-orange-400:orange;  --dn-orange-100:#ffe7d8;
  /* semantic */
  --dn-success-600:#43a047; --dn-success-400:#6dd586; --dn-success-300:#39cd00;
  --dn-danger-600:#ff2147;  --dn-danger-500:#ff0000;
  --dn-info-500:#1877f2;
  /* neutrals */
  --dn-ink:#2e3847; --dn-ink-2:#3c4043;
  --dn-text-2:#666f7d; --dn-text-3:#777; --dn-text-mute:#9e9e9e;
  --dn-text-mute-purple:#a59eb8; --dn-fg-on-dark:#fff;
  --dn-bg:#fff; --dn-bg-alt:#f5f5f5; --dn-bg-soft:#f8f9fa;
  --dn-bg-input:#e8e5ed; --dn-bg-page:#f5f5f5; --dn-bg-chip:#f2f4fa;
  --dn-border:#ddd; --dn-border-2:#ebebeb; --dn-border-3:#dee2e6;
  --dn-footer-bg:#2e3847;
  /* 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(0,0,0,.10);
  --dn-shadow:    0 4px 8px rgba(0,0,0,.10);
  --dn-shadow-md: 0 4px 10px rgba(0,0,0,.10);
  --dn-shadow-lg: 0 10px 20px -5px rgba(0,0,0,.125);
  --dn-shadow-xl: 0 15px 30px 0 rgba(0,0,0,.25);
  --dn-shadow-cta:0 4px 6px rgba(109,68,255,.35);
  --dn-font-family: "Noto Sans Thai","MyFont","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;
}
.nav-brand::before {
  content: "";
  width: 30px; height: 30px;
  background: #fff;
  border-radius: 7px;
  background-image: url("img/dn-logo-stack.png");
  background-size: 22px;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}
.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 {
  /* mini DN brand mark above title */
  content: "";
  display: block;
  width: 56px; height: 56px;
  background: var(--dn-header-grad);
  border-radius: 16px;
  margin: 0 auto 18px;
  background-image: url("img/dn-logo-stack.png");
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-blend-mode: normal;
  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; }

  /* The mobile bottom tabbar handles global nav at this size, so the top
     bar doesn't need to stick. Letting it scroll away frees the top of the
     viewport for the in-page sticky submenu (.cd-submenu) — which can now
     attach cleanly at top:0 instead of fighting for space with a wrapped
     nav of unpredictable height. */
  nav { position: static; }
  .cd-submenu { top: 0; }
  h3.cd-section { scroll-margin-top: 60px; }   /* just the submenu's own height */

  /* 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) {
  /* Reserve room for the fixed .mobile-tabbar (~64px + safe-area inset on
     home-indicator phones). 40px was leaving the last table rows hidden
     behind the tabbar. */
  main { padding: 16px 12px max(80px, calc(env(safe-area-inset-bottom) + 70px)); }

  /* 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-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;
  }
}

/* ── Usage analytics page ──────────────────────────────────────────────────
   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-cust { background: #ede7fa; color: var(--dn-purple-700); }
.usage-tag-rep  { background: #fff1e0; color: var(--dn-orange-700, #a44400); }
.usage-recent details {
  display: inline-block;
  vertical-align: top;
}
.usage-recent details pre {
  margin: 4px 0 0;
  padding: 6px 8px;
  background: var(--dn-bg-alt);
  border-radius: 6px;
  font-size: 11px;
  max-width: 320px;
  overflow-x: auto;
}

/* 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);
}

/* Zone top-100 panel — green-tint rows for products the customer has bought
   in the last 30 days, so reps can scan "already winning" vs "gap" at a
   glance. Matches the .usage-stale tint pattern. */
tr.cd-zone-bought td {
  background: #ecfdf5;
}

/* ── Customer-detail in-page submenu ──────────────────────────────────────
   Sticky pill row beneath the global navbar (which is `position: sticky;
   top: 0; z-index: 50` — see line ~78 above). Pure CSS — anchor jumps
   only; no JS needed. Pills don't wrap on mobile — the strip scrolls
   horizontally instead. */
.cd-submenu {
  position: sticky;
  top: 56px;             /* below the global nav (padding 12px + ~24-32px brand) */
  z-index: 9;            /* below nav's 50 so any nav dropdowns win */
  background: #fff;
  padding: 8px 0;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--dn-border);
}
.cd-submenu-pills {
  list-style: none;
  margin: 0;
  padding: 0 4px;
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}
.cd-submenu-pills li { flex-shrink: 0; }
.cd-submenu-pills a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;           /* ~32 px tall — compact but still tappable */
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-pill);
  background: var(--dn-bg-alt, #f8fafc);
  color: var(--dn-text-2, #64748b);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cd-submenu-pills a:hover {
  background: var(--dn-purple-600);
  color: #fff;
  border-color: var(--dn-purple-600);
}
.cd-pill-count {
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
  padding: 1px 7px;
  border-radius: var(--dn-radius-pill);
  font-size: 11px;
  font-weight: 700;
}
.cd-submenu-pills a:hover .cd-pill-count {
  background: rgba(255, 255, 255, 0.25);
}

/* Anchor offset so clicked sections clear the sticky submenu instead of
   landing behind it. 64px = ~56px global nav + 8px breathing room. */
h3.cd-section { scroll-margin-top: 64px; }

/* Dashboard banner — shown to a supervisor with no team assigned. */
.dash-no-team {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  padding: 12px 16px;
  border-radius: 8px;
  margin: 0 0 1rem;
}
.dash-no-team strong { color: #92400e; font-size: 15px; }
.dash-no-team p { margin: 4px 0 0; color: #78350f; font-size: 13px; }

/* 30-day segment-rank trajectory arrow on /customers.
   Sits next to the segment badge — kept small + monospaced so the badge
   column stays a predictable width. Colours mirror the trajectory status
   palette on the customer-detail page. */
.traj-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
}
.traj-up        { color: #16a34a; }   /* green */
.traj-up-fast   { color: #15803d; }   /* darker green */
.traj-down      { color: #f97316; }   /* orange */
.traj-down-fast { color: #dc2626; }   /* red */

/* ── Sticky table header (opt-in via class="sticky-header") ────────────
   Header row stays at the top of the viewport as the page scrolls — so
   when the rep is deep in /customers they still know which column is
   which. Sits below the global sticky nav (top: 56px). On mobile the
   nav becomes static (PR #19), so the header pins to top: 0.

   Important caveat: `position: sticky` finds its containing block at
   the nearest ancestor with `overflow != visible`. `.table-wrap` ships
   with `overflow-x: auto` (horizontal scroll on narrow screens), which
   silently neuters sticky against the viewport on desktop. The `:has()`
   rule below strips that overflow on desktop wraps that contain a
   sticky-header table, and re-asserts overflow-x at mobile widths where
   horizontal page-scroll would be unusable. `:has()` ships in Chrome 105+,
   Firefox 121+, Safari 15.4+ — within the support window for this app. */
.table-wrap:has(> table.sticky-header) {
  overflow: visible;
}
@media (max-width: 900px) {
  .table-wrap:has(> table.sticky-header) {
    overflow-x: auto;
  }
}
table.sticky-header thead th {
  position: sticky;
  top: 56px;                    /* below the 56-px global sticky nav */
  z-index: 5;                   /* below nav's 50, above body content */
  background: var(--dn-bg-alt, #f1f5f9);
  box-shadow: 0 1px 0 var(--dn-border);
}
@media (max-width: 900px) {
  table.sticky-header thead th { top: 0; }
}

/* ── Sortable tables (sortable.js opt-in via class="sortable") ─────────── */
table.sortable th.sortable-th {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 18px;
}
table.sortable th.sortable-th:hover {
  background: rgba(124, 58, 237, 0.06);
}
table.sortable th.sortable-th::after {
  content: '⇅';
  position: absolute;
  right: 5px; top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  opacity: 0.25;
  font-weight: 400;
}
table.sortable th.sort-asc::after  { content: '▲'; opacity: 0.85; color: var(--dn-purple-600, #7c3aed); }
table.sortable th.sort-desc::after { content: '▼'; opacity: 0.85; color: var(--dn-purple-600, #7c3aed); }

/* ── Trajectory status line + RFM sparklines (segment-history section) ── */
.cd-traj {
  margin: 0 0 .75rem;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}
.cd-traj-stable    { background: #f1f5f9; color: #475569; }
.cd-traj-new       { background: #f1f5f9; color: #475569; }
.cd-traj-up        { background: #dcfce7; color: #166534; }
.cd-traj-up_fast   { background: #bbf7d0; color: #14532d; }
.cd-traj-down      { background: #ffedd5; color: #9a3412; }
.cd-traj-down_fast { background: #fecaca; color: #991b1b; }

.cd-spark-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: .75rem;
}
.cd-spark {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--dn-bg-alt, #f8fafc);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  min-width: 0;
}
.cd-spark-label { color: var(--dn-text-2, #64748b); font-weight: 600; }
.cd-spark-svg {
  width: 80px; height: 26px; flex-shrink: 0;
  stroke: var(--dn-purple-600, #7c3aed);
  stroke-width: 1.5;
  fill: none;
}
.cd-spark-now {
  font-weight: 700;
  color: var(--dn-ink, #0f172a);
  margin-left: auto;
}
.cd-spark-delta { font-size: 11px; color: var(--dn-text-2, #64748b); }
.cd-spark-delta.up   { color: #15803d; }
.cd-spark-delta.down { color: #b91c1c; }

@media (max-width: 600px) {
  .cd-spark-grid { grid-template-columns: 1fr; }
}

/* ── Mobile-first accordion sections on customer detail ─────────────────────
   Each section is wrapped in <details class="cd-section-acc" open>. On
   desktop it's locked open and styled identically to the previous h3 +
   content (the disclosure triangle is hidden and a JS guard ignores
   summary clicks). On mobile only the keep-open section (Reorder due)
   is expanded; the rest collapse with a chevron + count/hint summary. */
details.cd-section-acc {
  display: block;
}
details.cd-section-acc > summary {
  list-style: none;
  display: block;
}
details.cd-section-acc > summary::-webkit-details-marker {
  display: none;
}
details.cd-section-acc > summary > h3 {
  /* Keep the existing cd-section spacing — h3 already has its own margin */
  display: inline-block;
  width: 100%;
}
.cd-section-hint {
  font-size: 13px;
  font-weight: 400;
  color: var(--dn-text-2, #64748b);
  margin-left: 8px;
}

@media (min-width: 901px) {
  /* Desktop: summary acts as a heading, not a toggle. */
  details.cd-section-acc > summary { cursor: default; }
}

@media (max-width: 900px) {
  /* Sticky pill submenu redundant when each section is its own toggle. */
  .cd-submenu { display: none; }

  /* Top 3 KPIs only on mobile (revenue 12m, last order/recency, credit).
     Cards 4-6 (orders, avg basket, returns/visits) are hidden — pinch
     zoom or rotate if the rep needs the full set. */
  .kpi-grid .kpi-card:nth-child(n+4) { display: none; }

  details.cd-section-acc > summary {
    cursor: pointer;
    padding: 4px 0 4px 24px;
    position: relative;
    -webkit-tap-highlight-color: rgba(0,0,0,0.04);
  }
  details.cd-section-acc > summary::before {
    content: '';
    position: absolute; left: 4px; top: 50%;
    width: 0; height: 0;
    border-left: 6px solid var(--dn-text-2, #64748b);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transform: translateY(-50%);
    transition: transform 0.15s;
  }
  details.cd-section-acc[open] > summary::before {
    transform: translateY(-50%) rotate(90deg);
  }
  /* Stack the hint under the heading on mobile */
  .cd-section-hint {
    display: block;
    margin: 2px 0 0;
    font-size: 12px;
  }
}