/*
 * ronnoco.css — Ronnoco Distributor Leads Design System
 * Version 2.0 | Professional CRM UI
 */

/* ─────────────────────────────────────────────────────────────────
   1. RESET + BASE
───────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Brand */
  --ronnoco-navy:     #071e42;
  --ronnoco-blue:     #0a2d6e;
  --ronnoco-blue-lt:  #0e3880;
  --ronnoco-accent:   #e8a020;

  /* Neutrals */
  --bg:           #f4f6f9;
  --surface:      #ffffff;
  --surface-2:    #f8f9fb;
  --surface-3:    #eef0f4;
  --border:       #dde1e9;
  --border-strong:#b4bccc;

  /* Text */
  --text:         #0f1923;
  --text-2:       #4a5568;
  --text-3:       #8898aa;
  --text-inv:     #ffffff;

  /* Semantic */
  --blue:         #1249a8;
  --blue-bg:      #dbeafe;
  --blue-text:    #1e40af;
  --green:        #15803d;
  --green-bg:     #dcfce7;
  --green-text:   #14532d;
  --amber:        #b45309;
  --amber-bg:     #fef3c7;
  --amber-text:   #78350f;
  --red:          #b91c1c;
  --red-bg:       #fee2e2;
  --red-text:     #7f1d1d;
  --purple:       #7c3aed;
  --purple-bg:    #ede9fe;
  --purple-text:  #4c1d95;

  /* Radius */
  --r-sm:   4px;
  --r:      8px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;

  /* Shadow */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow:     0 4px 12px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.05);
  --shadow-md:  0 8px 24px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  --shadow-lg:  0 20px 48px rgba(0,0,0,.13), 0 4px 16px rgba(0,0,0,.07);

  /* Type scale */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;

  /* Spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
}

html, body { height: 100%; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

hr.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--sp-4) 0;
}

.hidden { display: none !important; }
.muted  { color: var(--text-3); }

body.auth-locked #pg-main,
body.auth-locked #pg-settings,
body.auth-locked #pg-help {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   2. TOPBAR / HEADER
───────────────────────────────────────────────────────────────── */
.topbar {
  background: linear-gradient(135deg, #071e42 0%, #0b2f66 55%, #0e3880 100%);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding: 0 var(--sp-6);
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(11,47,102,.35);
}

/* Brand */
.brand { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }

.brand-mark {
  height: 36px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-mark img {
  height: 36px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  object-fit: contain;
}

.brand-mark-text {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -.5px;
}

.brand-title {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: .01em;
  line-height: 1.1;
}

.brand-sub {
  font-size: var(--text-xs);
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
  margin-top: 1px;
}

/* Role switcher */
.role-switcher {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.role-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 500;
  white-space: nowrap;
}

.role-switcher select {
  font-size: var(--text-sm);
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--r);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.role-switcher select:hover {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.18);
}

.role-switcher select option {
  color: var(--text);
  background: #fff;
}

.assigned-view {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r);
  padding: 5px 10px;
}

/* Top right controls */
.top-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  flex-shrink: 0;
}
.conn-dot.live { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.5); }
.conn-dot.err  { background: #ef4444; }
.conn-dot.warn { background: #f59e0b; }

/* Topbar buttons */
.topbar .btn {
  border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.10);
  font-size: var(--text-sm);
}

.topbar .btn:hover {
  background: rgba(255,255,255,.20);
  border-color: rgba(255,255,255,.45);
  color: #fff;
}

#auth-badge {
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.25);
  font-size: var(--text-xs);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────
   3. NAVIGATION TABS
───────────────────────────────────────────────────────────────── */
.tabs {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--sp-6);
  display: flex;
  gap: 0;
  align-items: flex-end;
  position: sticky;
  top: 62px;
  z-index: 90;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.tab {
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 14px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-3);
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  letter-spacing: .01em;
}

.tab:hover:not(.on) {
  color: var(--text-2);
  border-bottom-color: var(--border);
}

.tab.on {
  color: var(--ronnoco-blue);
  border-bottom-color: var(--ronnoco-blue);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────
   4. LAYOUT
───────────────────────────────────────────────────────────────── */
.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-6) var(--sp-10);
}

.page { display: none; }
.page.on { display: block; }

/* Page header */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -.3px;
}

.page-sub {
  font-size: var(--text-base);
  color: var(--text-2);
  margin-top: 3px;
}

.section-label {
  font-size: var(--text-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: var(--sp-2);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────
   5. BUTTONS
───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, box-shadow .12s, color .12s;
  line-height: 1.3;
  letter-spacing: .01em;
}

.btn:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}

.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-sm {
  font-size: var(--text-xs);
  padding: 5px 10px;
}

.btn-lg {
  font-size: var(--text-base);
  padding: 10px 20px;
}

.btn-primary {
  background: var(--ronnoco-blue);
  color: #fff;
  border-color: var(--ronnoco-blue);
  box-shadow: 0 1px 4px rgba(18,73,168,.25);
}

.btn-primary:hover {
  background: #0e3e9c;
  border-color: #0e3e9c;
  box-shadow: 0 2px 8px rgba(18,73,168,.35);
}

.btn-success {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

.btn-success:hover { background: #166534; border-color: #166534; }

.btn-danger {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.btn-danger:hover { background: #991b1b; border-color: #991b1b; }

.btn-ghost {
  border-color: transparent;
  background: transparent;
}

.btn-ghost:hover {
  background: var(--surface-3);
  border-color: var(--border);
}

/* ─────────────────────────────────────────────────────────────────
   6. CARDS
───────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-pad { padding: var(--sp-5); }

.card-head {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  background: var(--surface-2);
}

.card-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.01em;
}

.card-sub {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin-top: 1px;
}

/* ─────────────────────────────────────────────────────────────────
   7. BADGES / PILLS / STATUS
───────────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  letter-spacing: .02em;
}

.pill-gray   { background: var(--surface-3); color: var(--text-2); }
.pill-blue   { background: var(--blue-bg);   color: var(--blue-text); }
.pill-green  { background: var(--green-bg);  color: var(--green-text); }
.pill-amber  { background: var(--amber-bg);  color: var(--amber-text); }
.pill-red    { background: var(--red-bg);    color: var(--red-text); }
.pill-purple { background: var(--purple-bg); color: var(--purple-text); }

/* ─────────────────────────────────────────────────────────────────
   8. FORMS / INPUTS
───────────────────────────────────────────────────────────────── */
select.input, input.input {
  font-size: var(--text-sm);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

select.input:focus, input.input:focus {
  border-color: var(--ronnoco-blue);
  box-shadow: 0 0 0 3px rgba(18,73,168,.10);
}

.flbl {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-2);
  margin: 12px 0 4px;
  display: block;
  letter-spacing: .01em;
}

.finp {
  width: 100%;
  font-size: var(--text-base);
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-family: inherit;
  outline: none;
  background: var(--surface);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}

.finp:focus {
  border-color: var(--ronnoco-blue);
  box-shadow: 0 0 0 3px rgba(18,73,168,.10);
}

textarea.finp {
  resize: vertical;
  min-height: 88px;
  line-height: 1.55;
}

/* ─────────────────────────────────────────────────────────────────
   9. FILTER BAR
───────────────────────────────────────────────────────────────── */
.filterbar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.filterbar-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}

.filterbar-row:last-child { margin-bottom: 0; }

.searchwrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.searchwrap input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  font-size: var(--text-sm);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-family: inherit;
  outline: none;
  background: var(--surface);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}

.searchwrap input:focus {
  border-color: var(--ronnoco-blue);
  box-shadow: 0 0 0 3px rgba(18,73,168,.10);
}

.searchwrap::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238898aa' stroke-width='2.2'><circle cx='11' cy='11' r='7'/><path d='m21 21-4-4'/></svg>") no-repeat center/contain;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 12px;
  background: var(--blue-bg);
  color: var(--blue-text);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
}

.chip-x {
  cursor: pointer;
  font-weight: 700;
  opacity: .6;
  transition: opacity .1s;
}

.chip-x:hover { opacity: 1; }

/* ─────────────────────────────────────────────────────────────────
   10. TABLES
───────────────────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

thead tr { background: var(--surface-2); }

th {
  padding: 11px 16px;
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

th.num { text-align: center; }

td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
  font-size: var(--text-sm);
}

td.num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

tbody tr {
  cursor: pointer;
  transition: background .08s;
}

tbody tr:hover td { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }

.col-name { font-weight: 600; color: var(--text); }
.col-sub  { font-size: var(--text-xs); color: var(--text-3); margin-top: 2px; }
.zero     { color: var(--text-3); }

/* ─────────────────────────────────────────────────────────────────
   11. METRIC CARDS
───────────────────────────────────────────────────────────────── */
.metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

@media (max-width: 960px)  { .metrics { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .metrics { grid-template-columns: repeat(2, 1fr); } }

.mcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-4);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, border-color .15s, transform .1s;
}

.mcard:hover {
  box-shadow: var(--shadow);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.mcard.active {
  border-color: var(--ronnoco-blue);
  box-shadow: 0 0 0 2px rgba(18,73,168,.15), var(--shadow);
}

.m-lbl {
  font-size: var(--text-xs);
  color: var(--text-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.m-val {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
  line-height: 1.05;
  letter-spacing: -.5px;
}

.m-sub {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────────
   12. RESPONSE / PROGRESS CHARTS
───────────────────────────────────────────────────────────────── */
.resp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

@media (max-width: 900px) { .resp-grid { grid-template-columns: 1fr; } }

.resp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-sm);
}

.resp-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.resp-sub {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-bottom: var(--sp-4);
}

.resp-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: 9px;
}

.resp-row:last-child { margin-bottom: 0; }

.resp-name {
  font-size: var(--text-sm);
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resp-track {
  height: 8px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}

.resp-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ronnoco-blue), #60a5fa);
  transition: width .4s ease;
}

.resp-bar.warn { background: linear-gradient(90deg, var(--amber), #fbbf24); }

.resp-val {
  font-size: var(--text-xs);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.resp-empty {
  font-size: var(--text-sm);
  color: var(--text-3);
  padding: var(--sp-2) 0;
}

/* ─────────────────────────────────────────────────────────────────
   13. LEAD LIST (sidebar)
───────────────────────────────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--sp-4);
  align-items: start;
}

@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.list-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
  padding-right: 2px;
}

/* Lead list card */
.lcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .1s, border-color .12s, box-shadow .12s;
}

.lcard:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}

.lcard.sel {
  border-color: var(--ronnoco-blue);
  box-shadow: 0 0 0 2px rgba(18,73,168,.15), var(--shadow);
  background: #f0f5ff;
}

.lcard.dim { opacity: .5; }

.lc-id {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--text-xs);
  color: var(--blue-text);
  margin-bottom: 3px;
  font-weight: 600;
  letter-spacing: .02em;
}

.lc-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 2px;
}

.lc-rep {
  font-size: var(--text-xs);
  color: var(--text-2);
  margin-bottom: 6px;
}

.lc-rep.warn { color: var(--amber); }

.lc-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────────
   14. LEAD DETAIL — HEADER
───────────────────────────────────────────────────────────────── */
.crumb {
  font-size: var(--text-sm);
  color: var(--text-2);
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: var(--sp-3);
}

.crumb a {
  color: var(--ronnoco-blue);
  cursor: pointer;
  font-weight: 500;
}

.crumb a:hover { text-decoration: underline; }

.detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

/* Store / customer identity block */
.lead-identity {
  flex: 1;
  min-width: 0;
}

.lead-cohort-tag {
  font-size: var(--text-xs);
  color: var(--text-3);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}

.lead-store-name {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -.4px;
  margin-bottom: 4px;
}

.lead-contact-name {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 6px;
}

.lead-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px var(--sp-4);
  font-size: var(--text-sm);
  color: var(--text-2);
  margin-bottom: var(--sp-3);
}

.lead-contact-row span {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ─────────────────────────────────────────────────────────────────
   15. LEAD DETAIL — PIPELINE STRIP
───────────────────────────────────────────────────────────────── */
.pipe {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
  gap: 4px;
  box-shadow: var(--shadow-sm);
}

.pipe-cell {
  flex: 1;
  padding: 10px 6px;
  text-align: center;
  border-radius: var(--r);
  min-width: 0;
  background: var(--surface-3);
  transition: background .15s;
}

.pipe-cell.done     { background: var(--green-bg); }
.pipe-cell.current  { background: var(--blue-bg); box-shadow: inset 0 0 0 2px var(--ronnoco-blue); }
.pipe-cell.lost     { background: var(--red-bg); }
.pipe-cell.won      { background: var(--green-bg); }
.pipe-cell.upcoming { background: transparent; }

.pipe-glyph { font-size: 15px; margin-bottom: 4px; }
.pipe-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text);
  margin-bottom: 2px;
}

.pipe-meta {
  font-size: 10px;
  color: var(--text-3);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}

.pipe-cell.done    .pipe-label,
.pipe-cell.done    .pipe-glyph,
.pipe-cell.done    .pipe-meta    { color: var(--green-text); }
.pipe-cell.current .pipe-label,
.pipe-cell.current .pipe-glyph,
.pipe-cell.current .pipe-meta   { color: var(--blue-text); }
.pipe-cell.current .pipe-label  { font-weight: 700; }
.pipe-cell.lost    .pipe-label,
.pipe-cell.lost    .pipe-glyph,
.pipe-cell.lost    .pipe-meta   { color: var(--red-text); }
.pipe-cell.won     .pipe-label,
.pipe-cell.won     .pipe-glyph,
.pipe-cell.won     .pipe-meta   { color: var(--green-text); }
.pipe-cell.upcoming .pipe-label,
.pipe-cell.upcoming .pipe-glyph,
.pipe-cell.upcoming .pipe-meta  { color: var(--text-3); }

.pipe-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}

.pipe-actions .btn { flex: 1; min-width: 130px; justify-content: center; }

/* ─────────────────────────────────────────────────────────────────
   16. LEAD DETAIL — INFO GRID
───────────────────────────────────────────────────────────────── */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

@media (max-width: 700px) { .info-grid { grid-template-columns: 1fr; } }

.info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.info-card-header {
  padding: 10px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.info-tbl {
  width: 100%;
  border: none;
  font-size: var(--text-sm);
}

.info-tbl td {
  padding: 10px 16px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  vertical-align: top;
  cursor: default;
  font-size: var(--text-sm);
}

.info-tbl tr:last-child td { border-bottom: none; }
.info-tbl tr:hover td { background: none; }

.info-tbl td:first-child {
  color: var(--text-3);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  width: 44%;
  padding-right: var(--sp-2);
  padding-top: 12px;
}

.info-tbl td:nth-child(2) {
  color: var(--text);
  font-weight: 500;
  font-size: var(--text-base);
}

/* ─────────────────────────────────────────────────────────────────
   17. LEAD DETAIL — TIMELINE / ACTIVITY
───────────────────────────────────────────────────────────────── */
.tl-body {
  border-left: 2px solid var(--border);
  padding-left: var(--sp-5);
  max-height: 420px;
  overflow-y: auto;
}

.tl-item {
  position: relative;
  margin-bottom: var(--sp-5);
}

.tl-item:last-child { margin-bottom: 0; }

.tl-dot {
  position: absolute;
  left: calc(-1 * var(--sp-5) - 5px);
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--text-3);
  box-shadow: 0 0 0 2px var(--border);
}

.tl-dot.contact  { background: var(--ronnoco-blue); box-shadow: 0 0 0 2px var(--blue-bg); }
.tl-dot.advance  { background: var(--green); box-shadow: 0 0 0 2px var(--green-bg); }
.tl-dot.lost     { background: var(--red); box-shadow: 0 0 0 2px var(--red-bg); }
.tl-dot.assign   { background: var(--purple); box-shadow: 0 0 0 2px var(--purple-bg); }

.tl-actor {
  font-weight: 700;
  color: var(--text);
  font-size: var(--text-sm);
}

.tl-action {
  font-size: var(--text-base);
  color: var(--text);
  line-height: 1.45;
  font-weight: 500;
}

.tl-meta {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-top: 3px;
}

.tl-note {
  font-size: var(--text-sm);
  color: var(--blue-text);
  padding: 7px 12px;
  background: var(--blue-bg);
  border-radius: 0 var(--r) var(--r) 0;
  border-left: 3px solid var(--ronnoco-blue);
  margin-top: 6px;
  line-height: 1.55;
}

/* ─────────────────────────────────────────────────────────────────
   18. KANBAN
───────────────────────────────────────────────────────────────── */
.kanban {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-3);
}

@media (max-width: 1200px) { .kanban { grid-template-columns: repeat(3, 1fr); } }
@media (max-width:  720px) { .kanban { grid-template-columns: repeat(2, 1fr); } }

.kcol {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  box-shadow: var(--shadow-sm);
}

.kcol-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-2);
}

.kcol-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
  letter-spacing: .01em;
}

.kcol-count {
  font-size: var(--text-xs);
  color: var(--text-2);
  background: var(--surface);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-weight: 600;
}

.kcol-body {
  padding: var(--sp-2);
  flex: 1;
  overflow-y: auto;
  max-height: 540px;
}

.kcard {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 12px;
  margin-bottom: var(--sp-2);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: background .1s, box-shadow .1s;
  box-shadow: var(--shadow-sm);
}

.kcard:hover {
  background: var(--surface-3);
  box-shadow: var(--shadow);
}

.kcard.stall { border-left: 3px solid var(--amber); }

.kcard-name {
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  font-size: var(--text-base);
}

.kcard-rep {
  color: var(--text-2);
  font-size: var(--text-xs);
  margin-top: 3px;
}

.kcard-rep.warn { color: var(--amber); }

.kcard-meta {
  color: var(--text-3);
  font-size: 10px;
  margin-top: 5px;
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────
   19. DISTRIBUTOR VIEWS
───────────────────────────────────────────────────────────────── */
.lite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}

.lite-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, border-color .15s, transform .1s;
}

.lite-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.lite-stage {
  font-size: var(--text-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 6px;
  font-weight: 600;
}

.lite-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
}

.lite-meta {
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.55;
}

/* ─── Distributor warehouse leads ─── */
.dist-wh-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.dist-wh-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}

.dist-wh-title {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -.3px;
}

.dist-wh-sub {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin-top: 3px;
}

.dist-crumbs {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}

.dist-crumb-sep { color: var(--text-3); font-size: var(--text-sm); }

.dist-section-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text);
  margin: var(--sp-5) 0 var(--sp-3);
  letter-spacing: -.2px;
}

/* Distributor lead accordion */
.dist-acc-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.dist-acc-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s;
}

.dist-acc-item[open] {
  box-shadow: var(--shadow-md);
}

.dist-acc-sum {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  user-select: none;
  background: var(--surface);
  transition: background .1s;
}

.dist-acc-sum:hover { background: var(--surface-2); }
.dist-acc-sum::-webkit-details-marker { display: none; }

.dist-acc-chevron {
  font-size: 12px;
  color: var(--text-3);
  transition: transform .2s;
  flex-shrink: 0;
}

details[open] .dist-acc-chevron { transform: rotate(90deg); }

.dist-acc-main {
  min-width: 0;
  flex: 1;
}

/* Lead summary row — store name large, status badge inline */
.dist-acc-store {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
}

.dist-acc-city {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dist-acc-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Expanded lead body */
.dist-acc-body {
  border-top: 1px solid var(--border);
  padding: var(--sp-5);
  background: var(--surface);
}

/* Two-column layout inside accordion */
.lead-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

@media (max-width: 760px) { .lead-detail-grid { grid-template-columns: 1fr; } }

/* Info section blocks */
.lead-section {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.lead-section-header {
  padding: 9px 14px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.lead-section-body {
  padding: var(--sp-3) var(--sp-4);
}

/* Field rows inside sections */
.lead-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.lead-field:last-child { margin-bottom: 0; }

.lead-field-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 2px;
}

.lead-field-value {
  font-size: var(--text-base);
  color: var(--text);
  font-weight: 500;
  line-height: 1.45;
}

.lead-field-value.prominent {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
}

.lead-field-value.contact {
  font-size: var(--text-md);
  font-weight: 600;
}

/* Rep activity notes */
.rep-activity-section {
  margin-top: var(--sp-4);
}

.rep-activity-header {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.rep-note-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: var(--sp-2);
  border-left: 3px solid var(--ronnoco-blue);
  box-shadow: var(--shadow-sm);
}

.rep-note-item:last-child { margin-bottom: 0; }

.rep-note-meta {
  font-size: var(--text-xs);
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.rep-note-action {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.rep-note-body {
  font-size: var(--text-base);
  color: var(--text-2);
  line-height: 1.55;
}

.no-activity {
  font-size: var(--text-sm);
  color: var(--text-3);
  padding: var(--sp-3);
  text-align: center;
  background: var(--surface-2);
  border-radius: var(--r);
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────
   20. REP SCORECARD
───────────────────────────────────────────────────────────────── */
#view-scorecard .page-title {
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -.5px;
}

#view-scorecard .page-sub { font-size: var(--text-md); }

#view-scorecard .card-title {
  font-size: var(--text-xl);
  font-weight: 700;
}

#view-scorecard table th {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .04em;
  padding: 13px 18px;
}

#view-scorecard table td {
  padding: 14px 18px;
  font-size: var(--text-base);
}

#view-scorecard .col-name {
  font-size: var(--text-md);
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────
   21. NOTICES / BANNERS
───────────────────────────────────────────────────────────────── */
.notice {
  font-size: var(--text-sm);
  padding: 11px 16px;
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
  display: none;
  border: 1px solid transparent;
  font-weight: 500;
}

.notice.show { display: block; }
.notice-ok   { background: var(--green-bg);  color: var(--green-text); border-color: var(--green);  }
.notice-err  { background: var(--red-bg);    color: var(--red-text);   border-color: var(--red);    }
.notice-info { background: var(--blue-bg);   color: var(--blue-text);  border-color: var(--blue);   }
.notice-warn { background: var(--amber-bg);  color: var(--amber-text); border-color: var(--amber);  }

.lost-banner {
  background: var(--red-bg);
  border: 1px solid var(--red);
  border-radius: var(--r-md);
  padding: 11px 16px;
  font-size: var(--text-sm);
  color: var(--red-text);
  margin-bottom: var(--sp-4);
  font-weight: 500;
}

.won-banner {
  background: var(--green-bg);
  border: 1px solid var(--green);
  border-radius: var(--r-md);
  padding: 11px 16px;
  font-size: var(--text-sm);
  color: var(--green-text);
  margin-bottom: var(--sp-4);
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────
   22. MODALS
───────────────────────────────────────────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(11,47,102,.45);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--sp-4);
}

.overlay.open { display: flex; }

.modal {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}

.modal-lg { max-width: 780px; }

.mhdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.mtitle {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.2px;
}

.mclose {
  background: var(--surface-3);
  border: none;
  font-size: 18px;
  color: var(--text-2);
  cursor: pointer;
  line-height: 1;
  padding: 6px 9px;
  border-radius: var(--r);
  transition: background .12s, color .12s;
}

.mclose:hover {
  background: var(--red-bg);
  color: var(--red-text);
}

.mfoot {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

/* Contact method picker */
.methods {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.method {
  padding: 12px var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: background .12s, border-color .12s;
  color: var(--text);
}

.method:hover { background: var(--surface-2); border-color: var(--border-strong); }

.method.on {
  border-color: var(--ronnoco-blue);
  background: var(--blue-bg);
  color: var(--blue-text);
}

.method-glyph { font-size: 20px; margin-bottom: 4px; }
.method-lbl   { font-size: var(--text-xs); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────
   23. AUTH GATE / LOCK SCREEN
───────────────────────────────────────────────────────────────── */
.lock-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: radial-gradient(ellipse at 20% 30%, rgba(18,73,168,.12), transparent 50%),
              radial-gradient(ellipse at 80% 70%, rgba(11,47,102,.10), transparent 50%),
              var(--bg);
}

.lock-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  width: 100%;
  max-width: 360px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

#auth-gate {
  background: radial-gradient(ellipse at 20% 30%, rgba(18,73,168,.12), transparent 50%),
              radial-gradient(ellipse at 80% 70%, rgba(11,47,102,.10), transparent 50%),
              var(--bg);
}

.auth-modal { max-width: 400px; }

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  justify-content: center;
}

.auth-brand-mark {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  background: var(--ronnoco-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  box-shadow: var(--shadow);
}

.auth-brand-text {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.2px;
}

.auth-sub {
  font-size: var(--text-base);
  color: var(--text-2);
  margin-bottom: var(--sp-4);
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────
   24. EMPTY STATE
───────────────────────────────────────────────────────────────── */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-10) var(--sp-5);
  color: var(--text-3);
  text-align: center;
  gap: var(--sp-2);
}

.empty-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-2);
}

.empty-sub {
  font-size: var(--text-sm);
  color: var(--text-3);
  max-width: 300px;
}

/* ─────────────────────────────────────────────────────────────────
   25. SETTINGS PAGE
───────────────────────────────────────────────────────────────── */
.scard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.ssec {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  margin: var(--sp-5) 0 var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.ssec:first-of-type {
  padding-top: 0;
  border-top: none;
  margin-top: 0;
}

/* Access user table */
.au-table { width: 100%; border-collapse: collapse; }
.au-table th {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  text-align: left;
}

.au-table td {
  font-size: var(--text-sm);
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}

.au-table tbody tr:hover td { background: var(--surface-2); }
.au-table tbody tr:last-child td { border-bottom: none; }

/* ─────────────────────────────────────────────────────────────────
   26. UTILITY CLASSES
───────────────────────────────────────────────────────────────── */
.mono { font-family: ui-monospace, Menlo, "Cascadia Code", monospace; }

.email-row {
  display: flex;
  gap: var(--sp-3);
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: var(--r);
  font-size: var(--text-sm);
  margin-bottom: 5px;
  border: 1px solid var(--border);
}

.email-row:last-child { margin-bottom: 0; }

/* Distributor rep chip */
.dist-rep-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: border-color .12s, box-shadow .12s;
}

.dist-rep-chip:hover { border-color: var(--border-strong); }

.dist-rep-chip.on {
  border-color: var(--ronnoco-blue);
  box-shadow: 0 0 0 2px rgba(18,73,168,.12);
  color: var(--ronnoco-blue);
  background: var(--blue-bg);
}

/* ─────────────────────────────────────────────────────────────────
   26b. WAREHOUSE / DISTRIBUTOR CARD CLASSES
   (used by JS renderSubmitted for warehouse tiles)
───────────────────────────────────────────────────────────────── */
.dist-wh-kicker {
  font-size: var(--text-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: 4px;
}

.dist-wh-hero {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 6px;
  letter-spacing: -.2px;
}

/* ─────────────────────────────────────────────────────────────────
   28. BREADCRUMB NAVIGATION
───────────────────────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 10px 0 14px;
  font-size: var(--text-sm);
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5);
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.breadcrumb-link {
  color: var(--ronnoco-blue);
  font-weight: 500;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: var(--r-sm);
  transition: background .12s, color .12s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.breadcrumb-link:hover {
  background: var(--blue-bg);
  color: var(--blue-text);
  text-decoration: none;
}

.breadcrumb-sep {
  color: var(--text-3);
  font-size: var(--text-sm);
  padding: 0 2px;
  user-select: none;
}

.breadcrumb-current {
  color: var(--text);
  font-weight: 600;
  padding: 3px 6px;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumb-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--blue-bg);
  color: var(--blue-text);
}

.breadcrumb-pill.green {
  background: var(--green-bg);
  color: var(--green-text);
}

.breadcrumb-pill.amber {
  background: var(--amber-bg);
  color: var(--amber-text);
}

/* ─────────────────────────────────────────────────────────────────
   29. DISTRIBUTOR REPORTS
───────────────────────────────────────────────────────────────── */
.rpt-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: var(--sp-5);
}

.rpt-header {
  background: linear-gradient(135deg, #071e42 0%, #0b2f66 60%, #0e3880 100%);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  color: #fff;
}

.rpt-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.6);
  margin-bottom: 6px;
}

.rpt-title {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -.3px;
  line-height: 1.15;
  margin-bottom: 4px;
}

.rpt-meta {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.65);
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--sp-5);
}

.rpt-body {
  padding: var(--sp-6);
}

.rpt-section {
  margin-bottom: var(--sp-6);
}

.rpt-section:last-child { margin-bottom: 0; }

.rpt-section-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--ronnoco-blue);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* KPI row */
.rpt-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.rpt-kpi {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  text-align: center;
}

.rpt-kpi-val {
  font-size: 32px;
  font-weight: 800;
  color: var(--ronnoco-blue);
  line-height: 1;
  letter-spacing: -.5px;
  margin-bottom: 4px;
}

.rpt-kpi-val.green  { color: var(--green); }
.rpt-kpi-val.red    { color: var(--red); }
.rpt-kpi-val.amber  { color: var(--amber); }

.rpt-kpi-lbl {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.rpt-kpi-sub {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-top: 3px;
}

/* Data table inside report */
.rpt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-bottom: var(--sp-3);
}

.rpt-table thead tr { background: var(--surface-3); }

.rpt-table th {
  padding: 9px 14px;
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

.rpt-table th.r { text-align: right; }

.rpt-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}

.rpt-table td.r {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.rpt-table tbody tr:hover td { background: var(--surface-2); }
.rpt-table tbody tr:last-child td { border-bottom: none; }

/* Bar chart rows */
.rpt-bar-row {
  display: grid;
  grid-template-columns: 180px 1fr 60px;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: 9px;
}

.rpt-bar-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rpt-bar-track {
  height: 10px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}

.rpt-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ronnoco-blue), #4e8ef7);
  transition: width .4s ease;
}

.rpt-bar-fill.green  { background: linear-gradient(90deg, var(--green), #4ade80); }
.rpt-bar-fill.amber  { background: linear-gradient(90deg, var(--amber), #fbbf24); }
.rpt-bar-fill.red    { background: linear-gradient(90deg, var(--red), #f87171); }

.rpt-bar-val {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rpt-footer {
  padding: var(--sp-4) var(--sp-6);
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.rpt-footer-note {
  font-size: var(--text-xs);
  color: var(--text-3);
}

/* ─────────────────────────────────────────────────────────────────
   27. RESPONSIVE ADJUSTMENTS
───────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .topbar     { padding: 0 var(--sp-4); flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; }
  .tabs       { padding: 0 var(--sp-4); top: 0; }
  .wrap       { padding: var(--sp-4); }
  .page-title { font-size: var(--text-xl); }
  .brand-title{ font-size: 15px; }
  .methods    { grid-template-columns: repeat(2, 1fr); }
}