/* ============================================================================
   Distribution tab — namespaced to #panel-distribution / .dist-* only.
   Keep every selector scoped so nothing leaks into the other tabs.
   ========================================================================== */

#panel-distribution { font-size: 13px; }

.dist-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:4px 0 12px; }
.dist-title { margin:0; font-size:20px; font-weight:650; letter-spacing:-0.01em; }
.dist-sub { font-size:12px; color:#64748b; margin-top:3px; }

.dist-metric-toggle { display:inline-flex; border:1px solid #d8dee7; border-radius:7px; overflow:hidden; flex:0 0 auto; }
.dist-metric-toggle button {
  border:0; background:#fff; padding:7px 15px; font-size:12px; cursor:pointer; color:#475569; font-weight:550;
}
.dist-metric-toggle button.active { background:#1e293b; color:#fff; }
.dist-metric-toggle button + button { border-left:1px solid #d8dee7; }

.dist-warn {
  background:#fff7ed; border:1px solid #fdba74; border-left:4px solid #ea580c;
  border-radius:7px; padding:11px 14px; margin:0 0 14px; font-size:12px; line-height:1.55; color:#7c2d12;
}
.dist-caveat {
  background:#f8fafc; border:1px solid #e2e8f0; border-left:3px solid #94a3b8;
  border-radius:6px; padding:9px 12px; margin:0 0 11px; font-size:11.5px; line-height:1.5; color:#475569;
}

.dist-kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:11px; margin-bottom:16px; }
.dist-kpi { background:#fff; border:1px solid #e6eaf0; border-radius:9px; padding:12px 14px; }
.dist-kpi-label { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:#7c8798; font-weight:600; }
.dist-kpi-value { font-size:22px; font-weight:660; margin-top:5px; letter-spacing:-0.02em; color:#0f172a; }
.dist-kpi-delta { font-size:12px; font-weight:600; margin-top:2px; }
.dist-kpi-sub { font-size:10.5px; color:#94a3b8; margin-top:3px; }

.dist-card { background:#fff; border:1px solid #e6eaf0; border-radius:10px; padding:15px 17px; margin-bottom:15px; }
.dist-card-head { display:flex; align-items:center; gap:11px; margin-bottom:11px; flex-wrap:wrap; }
.dist-card-head h3 { margin:0; font-size:14px; font-weight:640; color:#0f172a; }
.dist-card-sub { font-size:11.5px; color:#94a3b8; }
.dist-card-head .dist-btn-sm { margin-left:auto; }

.dist-chart-wrap { position:relative; height:320px; }
.dist-chart-wrap.sm { height:210px; margin-bottom:12px; }

.dist-table { width:100%; border-collapse:collapse; font-size:12px; }
.dist-table th {
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
  color:#7c8798; font-weight:650; padding:7px 9px; border-bottom:1.5px solid #e6eaf0; white-space:nowrap;
}
.dist-table td { padding:7px 9px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.dist-table tbody tr:hover { background:#f8fafc; }
.dist-table th.r, .dist-table td.r { text-align:right; }
.dist-table .dist-total td { border-top:1.5px solid #cbd5e1; background:#f8fafc; }
.dist-sortable { cursor:pointer; user-select:none; }
.dist-sortable:hover { color:#2563eb; }

.dist-muted { color:#94a3b8; }
.dist-mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; }
.dist-hint { font-size:10.5px; color:#a3adbb; font-weight:400; }
.dist-hint2 {
  display:inline-block; margin-left:4px; width:13px; height:13px; line-height:13px; text-align:center;
  border-radius:50%; background:#e2e8f0; color:#64748b; font-size:9px; cursor:help; font-weight:700;
}
.dist-notcarried { color:#cbd5e1; }
.dist-flag { background:#fef3c7; font-weight:650; border-radius:3px; }

.dx-pos { color:#16a34a; }
.dx-neg { color:#dc2626; }

.dist-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:middle; }

.dist-bar { background:#f1f5f9; border-radius:3px; height:7px; width:100px; overflow:hidden; }
.dist-bar span { display:block; height:100%; background:#2563eb; border-radius:3px; }

.dist-note { font-size:11px; color:#94a3b8; line-height:1.5; margin-top:9px; }
.dist-empty { padding:18px; text-align:center; color:#94a3b8; font-size:12px; }
.dist-err { padding:14px; background:#fef2f2; border:1px solid #fecaca; border-radius:7px; color:#b91c1c; font-size:12px; }

.dist-seg-summary { display:flex; gap:11px; margin-bottom:13px; flex-wrap:wrap; }
.dist-seg-card { background:#f8fafc; border:1px solid #e6eaf0; border-radius:8px; padding:11px 15px; min-width:155px; }

.dist-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; align-items:center; }
.dist-filters select, .dist-filters input {
  border:1px solid #d8dee7; border-radius:6px; padding:6px 9px; font-size:12px; background:#fff; color:#0f172a;
}
.dist-filters input[type=text] { min-width:170px; }

.dist-btn, .dist-btn-sm {
  border:1px solid #cbd5e1; background:#fff; color:#334155; border-radius:6px;
  cursor:pointer; font-weight:560;
}
.dist-btn { padding:6px 15px; font-size:12px; }
.dist-btn-sm { padding:4px 11px; font-size:11px; }
.dist-btn:hover, .dist-btn-sm:hover { background:#f1f5f9; border-color:#94a3b8; }

.dist-pager { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:12px; font-size:12px; color:#64748b; }
.dist-pager button {
  border:1px solid #cbd5e1; background:#fff; border-radius:6px; padding:5px 13px; font-size:12px; cursor:pointer; color:#334155;
}
.dist-pager button:disabled { opacity:.4; cursor:default; }

@media (max-width: 820px) {
  .dist-chart-wrap { height:240px; }
  .dist-table { font-size:11px; }
  .dist-table th, .dist-table td { padding:5px 6px; }
}

/* ── distributor chips above the trend chart ─────────────────────────────── */
.dist-chips { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 11px; }
.dist-chip {
  border:1px solid #d8dee7; background:#fff; color:#94a3b8; border-radius:6px;
  padding:4px 10px; font-size:11px; cursor:pointer; font-weight:560; opacity:.5;
}
.dist-chip.on { color:#0f172a; opacity:1; }
.dist-chip:hover { border-color:#94a3b8; }

/* ── clickable door rows ─────────────────────────────────────────────────── */
.dist-door-row { cursor:pointer; }
.dist-link { color:#2563eb; }
.dist-door-row:hover .dist-link { text-decoration:underline; }
.dist-gap-row td { color:#cbd5e1; font-style:italic; }

/* ── door drill-down drawer ──────────────────────────────────────────────── */
/* Above .topbar (z-index 1000, main.css) so the drawer head + close button
   are never hidden under the fixed nav; the scrim covers the nav too. */
#dist-drawer { position:fixed; inset:0; z-index:1200; }
.dist-drawer-scrim { position:absolute; inset:0; background:rgba(15,23,42,.35); }
.dist-drawer-panel {
  position:absolute; top:0; right:0; bottom:0; width:min(880px,94vw);
  background:#f8fafc; box-shadow:-8px 0 28px rgba(15,23,42,.18);
  overflow-y:auto; padding:20px 22px;
}
.dist-drawer-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.dist-drawer-head h3 { margin:0 0 3px; font-size:17px; font-weight:650; }
.dist-drawer-panel h4 { margin:0 0 8px; font-size:12.5px; font-weight:640; color:#475569; }
.dist-two-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:14px; }
@media (max-width:760px){ .dist-two-col { grid-template-columns:1fr; } }

/* ── sticky headers on long tables ───────────────────────────────────────── */
/* Scroll container so the header sticks to the table, not the viewport —
   several tables share the page and a viewport-sticky header would fight. */
.dist-scroll { max-height: 620px; overflow-y: auto; overflow-x: auto; }
.dist-scroll .dist-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: #fff; box-shadow: inset 0 -1.5px 0 #e6eaf0;
}
.dist-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.dist-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; }
.dist-scroll::-webkit-scrollbar-track { background: #f8fafc; }
/* inside the drawer the surface is grey, so match it */
.dist-drawer-panel .dist-scroll .dist-table thead th { background: #f8fafc; }

/* ── trend chip hint ─────────────────────────────────────────────────────── */
.dist-chip-hint { font-size: 10.5px; color: #b3bcc9; align-self: center; margin-left: 4px; }

/* ── clickable chain rows ────────────────────────────────────────────────── */
.dist-chain-row { cursor: pointer; }
.dist-chain-row:hover .dist-link { text-decoration: underline; }

/* ── map legend + ranked table ───────────────────────────────────────────── */
.dist-legend { margin-left: 8px; white-space: nowrap; }
.dist-legend-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin: 0 4px 0 10px; vertical-align: middle;
}
.dist-geo-table { margin-top: 14px; }
.dist-geo-table h4 { margin: 14px 0 7px; font-size: 12.5px; font-weight: 640; color: #475569; }
.dist-gap-weak td { opacity: .55; }
.dist-basis-toggle { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:11px; color:#7c8798; margin-bottom:10px; }

/* ── verification / provisional-data banners ─────────────────────────────── */
.dist-verify {
  background:#fffbeb; border:1px solid #fcd34d; border-left:4px solid #d97706;
  border-radius:7px; padding:10px 13px; margin:0 0 13px; font-size:12px; line-height:1.55; color:#78350f;
}
.dist-verify.sm { font-size:11.5px; padding:9px 12px; margin-bottom:11px; }
.dist-badge-verify {
  background:#fef3c7; color:#92400e; border:1px solid #fcd34d; border-radius:11px;
  padding:2px 9px; font-size:10px; font-weight:650; text-transform:uppercase; letter-spacing:.03em;
}

/* ── direct-conversion annotations (2026-08-03) ──────────────────────────── */
/* Chains that left the channel because they now buy direct from Skout's.    */
.dist-direct-banner {
  background:#eff6ff; border:1px solid #bfdbfe; border-left:4px solid #2563eb;
  border-radius:7px; padding:10px 13px; margin:0 0 13px; font-size:12px; line-height:1.55; color:#1e3a8a;
}
.dist-badge-direct {
  background:#dbeafe; color:#1d4ed8; border:1px solid #bfdbfe; border-radius:11px;
  padding:2px 9px; font-size:10px; font-weight:650; text-transform:uppercase; letter-spacing:.03em;
  white-space:nowrap;
}
.dist-cat-row { cursor:pointer; }
.dist-cat-sub td { background:#f8fafc; font-size:11.5px; }