/* 260923-dash: setter dashboard design layer.
 * Loaded LAST (after styles.css, the inline <style>, rep-intel.js and closer-metrics.js CSS).
 * Pure CSS over the existing render functions — no JS, no markup change.
 * Scope: everything under #view-dashboard. Remove the <link> in index.html to roll back.
 */
#view-dashboard {
  --d-card: var(--card, #fff);
  --d-line: hsl(214 32% 91%);
  --d-line-soft: hsl(214 32% 94%);
  --d-ink: hsl(215 28% 17%);
  --d-ink-2: hsl(215 16% 47%);
  --d-ink-3: hsl(215 14% 62%);
  --d-tint: hsl(210 33% 97.5%);
  --d-accent: #155eef;
  --d-accent-soft: rgba(21, 94, 239, 0.08);
  --d-green: hsl(160 84% 36%);
  --d-green-soft: hsla(160 84% 39% / 0.10);
  --d-red: #e03e3e;
  --d-red-soft: rgba(224, 62, 62, 0.08);
  --d-amber: #d98a1e;
  --d-amber-soft: rgba(246, 173, 85, 0.16);
  --d-radius: 14px;
  --d-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.04);
  max-width: 1120px;
  font-variant-numeric: tabular-nums;
}
#view-dashboard.active { display: flex; flex-direction: column; gap: 18px; padding: 24px 28px 40px; }
/* 260923-dash2 (Caleb): leaderboard leads the page; the Sets/Shows/Show%/Commission strip is gone
 * (My numbers carries sets + show rate, commission lives in MY SETS & COMMISSIONS). */
#view-dashboard .dashboard-footer { order: -1; }
#view-dashboard #dashboardHero { display: none; }

/* ── shared card + header language ─────────────────────────────────────── */
#view-dashboard .cm-panel,
#view-dashboard .ri-panel,
#view-dashboard .dashboard-footer > section {
  background: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
  padding: 0;
  margin: 0;
}
#view-dashboard #riShowRatePanel { margin: 0; display: flex; flex-direction: column; gap: 18px; }
#view-dashboard #riShowRatePanel > .ri-panel:first-child { display: none; } /* duplicate show-rate tiles (cm panel owns it) */
#view-dashboard #cmPanel:empty, #view-dashboard #riShowRatePanel:empty { display: none; }

#view-dashboard .cm-h,
#view-dashboard .ri-panel > h3,
#view-dashboard .dashboard-footer .section-header {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  margin: 0;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--d-line-soft);
  font-size: 14px; font-weight: 700; letter-spacing: 0;
  text-transform: none;
  color: var(--d-ink);
  line-height: 1.3;
}
/* rep-intel headers are shipped uppercase; drop it but keep the meaning */
#view-dashboard .ri-panel > h3 { text-transform: none; letter-spacing: 0; }
#view-dashboard .ri-panel > h3::first-letter { text-transform: uppercase; }

/* chips inside headers */
#view-dashboard .cm-chip, #view-dashboard .ri-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px; margin: 0;
  background: var(--d-tint); color: var(--d-ink-2);
  border: 1px solid var(--d-line);
  white-space: nowrap;
}
#view-dashboard .ri-g { background: var(--d-green-soft); color: var(--d-green); border-color: hsla(160 84% 39% / 0.25); }
#view-dashboard .ri-r { background: var(--d-red-soft); color: var(--d-red); border-color: rgba(224, 62, 62, 0.22); }
#view-dashboard .ri-y { background: var(--d-amber-soft); color: var(--d-amber); border-color: rgba(217, 138, 30, 0.25); }
#view-dashboard .ri-b { background: var(--d-accent-soft); color: var(--d-accent); border-color: rgba(21, 94, 239, 0.22); }
#view-dashboard .cm-chip { background: var(--d-accent-soft); color: var(--d-accent); border-color: rgba(21, 94, 239, 0.18); }
#view-dashboard .cm-chip-y { background: var(--d-amber-soft); color: var(--d-amber); border-color: rgba(217, 138, 30, 0.25); }
#view-dashboard .cm-chip-g { background: var(--d-tint); color: var(--d-ink-2); border-color: var(--d-line); }
#view-dashboard .cm-range { font-size: 12px; font-weight: 500; color: var(--d-ink-3); margin-left: auto; }

/* footnotes: one quiet line, not a paragraph block */
#view-dashboard .cm-note, #view-dashboard .ri-note {
  margin: 0; padding: 10px 20px 12px;
  font-size: 11.5px; line-height: 1.5; color: var(--d-ink-3);
  border-top: 1px solid var(--d-line-soft);
}
#view-dashboard .cm-none, #view-dashboard .ri-none {
  padding: 22px 20px; font-size: 13px; font-style: normal; color: var(--d-ink-2);
}

/* ── hero ───────────────────────────────────────────────────────────────── */
#view-dashboard .dashboard-hero.data-card {
  border-radius: var(--d-radius);
  border: 1px solid var(--d-line);
  box-shadow: var(--d-shadow);
  cursor: default;
  background: var(--d-card);
}
#view-dashboard .dashboard-hero.data-card::before { display: none; }
#view-dashboard .dashboard-hero.data-card:hover { transform: none; box-shadow: var(--d-shadow); border-color: var(--d-line); }
#view-dashboard .dh-strip { min-height: 96px; }
#view-dashboard .dh-strip .dh-identity {
  flex: 0 0 280px;
  padding: 18px 22px;
  gap: 14px;
  border-right: 1px solid var(--d-line-soft);
  background: linear-gradient(135deg, rgba(21, 94, 239, 0.07) 0%, rgba(21, 94, 239, 0) 65%);
}
#view-dashboard .dh-strip .dh-avatar-sm {
  width: 46px; height: 46px; font-size: 16px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(21, 94, 239, 0.28);
}
#view-dashboard .dh-strip .dh-name-block { gap: 5px; }
#view-dashboard .dh-strip .dh-name-text { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
#view-dashboard .dh-strip .dh-name-block::after {
  content: 'Setter';
  font-size: 11.5px; font-weight: 500; color: var(--d-ink-2); white-space: nowrap;
}
/* the period is already in the top-bar dropdown and the "My numbers" header */
#view-dashboard .dh-strip .dh-period-chip-sm { display: none; }
#view-dashboard .dh-strip .dh-kpi {
  align-items: flex-start; gap: 6px;
  padding: 18px 22px;
  border-right: 1px solid var(--d-line-soft);
}
#view-dashboard .dh-strip .dh-kpi-val { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
#view-dashboard .dh-strip .dh-kpi-val.dh-kpi-cash { color: var(--d-green); }
#view-dashboard .dh-strip .dh-kpi-lbl { font-size: 11px; letter-spacing: .06em; font-weight: 600; color: var(--d-ink-2); }

/* ── attention row ──────────────────────────────────────────────────────── */
#view-dashboard .attention-row { gap: 14px; }
#view-dashboard .attention-row .data-card {
  border-radius: var(--d-radius);
  border: 1px solid rgba(217, 138, 30, 0.35);
  background: linear-gradient(90deg, rgba(246, 173, 85, 0.14) 0%, var(--d-card) 60%);
  box-shadow: var(--d-shadow);
  padding: 14px 18px 14px 22px;
  gap: 4px;
  min-height: 0;
}
#view-dashboard .attention-row .data-card[data-state="needs-outcome"] { box-shadow: var(--d-shadow); }
#view-dashboard .attention-row .data-card[data-state="needs-outcome"]:hover { box-shadow: 0 6px 18px rgba(217, 138, 30, 0.18); border-color: rgba(217, 138, 30, 0.55); }
#view-dashboard .attention-row .data-card::before { width: 5px; border-radius: var(--d-radius) 0 0 var(--d-radius); }
#view-dashboard .attention-row .dc-status { display: inline-block; width: auto; align-self: flex-start; font-size: 10.5px; letter-spacing: .08em; padding: 3px 9px; background: var(--d-amber-soft); border: 1px solid rgba(217, 138, 30, 0.3); color: var(--d-amber); }
#view-dashboard .attention-row .dc-head { justify-content: flex-start; }
#view-dashboard .attention-row .dc-title-text { font-size: 16px; font-weight: 700; color: var(--d-ink); }
#view-dashboard .attention-row .dc-meta { font-size: 12px; color: var(--d-ink-2); }

/* ── My numbers ─────────────────────────────────────────────────────────── */
#view-dashboard .cm-tiles, #view-dashboard .cm-tiles2 {
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--d-line-soft);
}
#view-dashboard .cm-tile {
  border: 0; border-right: 1px solid var(--d-line-soft); border-radius: 0;
  padding: 18px 20px 16px;
  gap: 6px;
}
#view-dashboard .cm-tiles > .cm-tile:last-child, #view-dashboard .cm-tiles2 > .cm-tile:last-child { border-right: 0; }
#view-dashboard .cm-lbl { font-size: 11px; letter-spacing: .06em; font-weight: 600; color: var(--d-ink-2); }
#view-dashboard .cm-big { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--d-ink); }
#view-dashboard .cm-mid { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--d-ink); }
#view-dashboard .cm-sub { font-size: 12px; line-height: 1.45; color: var(--d-ink-2); }
#view-dashboard .cm-warn { color: var(--d-amber); font-weight: 600; }
#view-dashboard .cm-team {
  margin-top: auto; padding-top: 10px;
  font-size: 12px; color: var(--d-ink-2);
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
#view-dashboard .cm-up, #view-dashboard .cm-down {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
}
#view-dashboard .cm-up { color: var(--d-green); background: var(--d-green-soft); }
#view-dashboard .cm-down { color: var(--d-red); background: var(--d-red-soft); }
#view-dashboard .cm-sec { margin: 0; padding: 0; border-top: 0; }
#view-dashboard .cm-sec-h {
  margin: 0; padding: 14px 20px 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--d-ink-2);
  border-top: 1px solid var(--d-line-soft);
  background: var(--d-tint);
}
#view-dashboard .cm-sec .cm-tiles2 { border-top: 1px solid var(--d-line-soft); }
#view-dashboard .cm-panel > .cm-note { border-top: 0; }
#view-dashboard .cm-sec > .cm-note:last-child { border-top: 1px solid var(--d-line-soft); }
#view-dashboard .cm-sec > .cm-note:empty { display: none; }

/* ── Upcoming calls + no-shows lists ────────────────────────────────────── */
#view-dashboard .ri-list { display: flex; flex-direction: column; padding: 4px 0; }
#view-dashboard .ri-li {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 16px;
  padding: 11px 20px;
  border-top: 1px solid var(--d-line-soft);
  font-size: 13px;
  color: var(--d-ink);
  transition: background 120ms ease;
}
#view-dashboard .ri-li:first-child { border-top: 0; }
#view-dashboard .ri-li:hover { background: var(--d-tint); }
#view-dashboard .ri-when { flex: 0 0 124px; min-width: 0; font-weight: 600; font-size: 12.5px; color: var(--d-ink); }
#view-dashboard .ri-who { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-dashboard .ri-who .ri-sub { font-weight: 400; font-size: 12px; color: var(--d-ink-2); }
#view-dashboard .ri-li > .ri-chip { flex: 0 0 auto; }
#view-dashboard .ri-li > .ri-chip + .ri-chip { margin-left: -8px; }

/* action links → real buttons (emoji glyph hidden, label drawn from the href) */
#view-dashboard .ri-li > a {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  border: 1px solid var(--d-line); border-radius: 8px;
  background: var(--d-card); color: var(--d-ink) !important;
  font-size: 12px; font-weight: 600; line-height: 1;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
/* only links we recognise get the icon + clean label; anything else keeps its own text */
#view-dashboard .ri-li > a[href^="tel:"],
#view-dashboard .ri-li > a[href*="/conversations/"],
#view-dashboard .ri-li > a[href*="/contacts/detail/"] { font-size: 0; }
#view-dashboard .ri-li > a[href^="tel:"]::before,
#view-dashboard .ri-li > a[href*="/conversations/"]::before,
#view-dashboard .ri-li > a[href*="/contacts/detail/"]::before {
  content: ''; width: 14px; height: 14px; flex: 0 0 14px;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
#view-dashboard .ri-li > a::after { font-size: 12px; }
#view-dashboard .ri-li > a[href^="tel:"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
#view-dashboard .ri-li > a[href^="tel:"]::after { content: 'Call'; }
#view-dashboard .ri-li > a[href*="/conversations/"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
#view-dashboard .ri-li > a[href*="/conversations/"]::after { content: 'Text'; }
#view-dashboard .ri-li > a[href*="/contacts/detail/"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E"); }
#view-dashboard .ri-li > a[href*="/contacts/detail/"]::after { content: 'GHL'; }
#view-dashboard .ri-li > a:hover { background: var(--d-accent); border-color: var(--d-accent); color: #fff !important; }
#view-dashboard .ri-li > a[href^="tel:"]:hover { background: var(--d-green); border-color: var(--d-green); }
#view-dashboard .ri-li > a + a { margin-left: -8px; }

/* ── Leaderboard ────────────────────────────────────────────────────────── */
#view-dashboard .dashboard-footer { margin: 0; }
#view-dashboard .dashboard-footer .section-header { margin: 0; }
#view-dashboard .dashboard-footer .section-header::first-letter { text-transform: uppercase; }
#view-dashboard #leaderboardGrid { padding: 20px 20px 14px; }
#view-dashboard .lb-podium {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
  margin-bottom: 14px;
}
#view-dashboard .lb-card {
  border: 1px solid var(--d-line);
  border-radius: 12px;
  background: var(--d-card);
  box-shadow: none;
  padding: 20px 18px 18px;
  gap: 4px;
  transform: none;
  align-items: flex-start; text-align: left;
  position: relative;
  overflow: hidden;
}
#view-dashboard .lb-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
}
#view-dashboard .lb-card-1::before { background: linear-gradient(90deg, #f3b73f, #f6ad55); }
#view-dashboard .lb-card-2::before { background: linear-gradient(90deg, #9aa5b5, #c3cbd6); }
#view-dashboard .lb-card-3::before { background: linear-gradient(90deg, #b8702e, #cd8c4c); }
#view-dashboard .lb-card.is-me { outline: none; border-color: rgba(21, 94, 239, 0.45); box-shadow: 0 0 0 3px var(--d-accent-soft); }
/* rank badge replaces the emoji medal */
#view-dashboard .lb-medal { font-size: 0; line-height: 0; height: 30px; width: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
#view-dashboard .lb-medal::before { font-size: 13px; font-weight: 800; line-height: 1; }
#view-dashboard .lb-card-1 .lb-medal { background: #fbe9c4; color: #8a5a06; }
#view-dashboard .lb-card-2 .lb-medal { background: #e8ecf1; color: #4b5563; }
#view-dashboard .lb-card-3 .lb-medal { background: #f4dfcb; color: #7c4413; }
#view-dashboard .lb-card-1 .lb-medal::before { content: '1'; }
#view-dashboard .lb-card-2 .lb-medal::before { content: '2'; }
#view-dashboard .lb-card-3 .lb-medal::before { content: '3'; }
#view-dashboard .lb-name { font-size: 15px; font-weight: 700; color: var(--d-ink); }
#view-dashboard .lb-card-1 .lb-name { font-size: 15px; }
#view-dashboard .lb-you-pill {
  position: absolute; top: 18px; right: 16px;
  font-size: 10px; letter-spacing: .06em; padding: 3px 8px;
  background: var(--d-accent); color: #fff;
}
#view-dashboard .lb-cash { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--d-green); margin-top: 6px; }
#view-dashboard .lb-card-1 .lb-cash { font-size: 26px; }
#view-dashboard .lb-deals { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--d-ink-2); }
#view-dashboard .lb-rest { gap: 0; border: 1px solid var(--d-line); border-radius: 12px; overflow: hidden; }
#view-dashboard #leaderboardGrid .lb-row {
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  gap: 14px;
  padding: 12px 16px;
  border: 0; border-top: 1px solid var(--d-line-soft); border-radius: 0;
  background: var(--d-card);
  font-size: 13px;
}
#view-dashboard #leaderboardGrid .lb-row:first-child { border-top: 0; }
#view-dashboard #leaderboardGrid .lb-row.is-me { background: var(--d-accent-soft); }
#view-dashboard .lb-rank { font-size: 12px; font-weight: 700; color: var(--d-ink-3); }
#view-dashboard .lb-row-name { font-weight: 600; color: var(--d-ink); }
#view-dashboard .lb-row-cash { color: var(--d-green); font-weight: 700; font-size: 14px; }
#view-dashboard #leaderboardGrid .lb-row-deals { font-size: 12px; color: var(--d-ink-2); min-width: 110px; }
#view-dashboard .lb-empty { padding: 28px 20px; color: var(--d-ink-2); }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #view-dashboard.active { padding: 14px 12px 32px; gap: 14px; }
  #view-dashboard .dh-strip .dh-identity { flex: none; border-right: 0; border-bottom: 1px solid var(--d-line-soft); }
  #view-dashboard .dh-strip .dh-kpi { padding: 14px 16px; }
  #view-dashboard .dh-strip .dh-kpi-val { font-size: 24px; }
  #view-dashboard .cm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-dashboard .cm-tiles > .cm-tile:nth-child(2n) { border-right: 0; }
  #view-dashboard .cm-tiles > .cm-tile:nth-child(-n+2) { border-bottom: 1px solid var(--d-line-soft); }
  #view-dashboard .ri-li { flex-wrap: wrap; padding: 12px 16px; gap: 8px 10px; }
  #view-dashboard .ri-when { flex: 1 1 100%; font-size: 12px; color: var(--d-ink-2); }
  #view-dashboard .ri-who { flex: 1 1 100%; }
  #view-dashboard .ri-who .ri-sub { white-space: normal; }
  #view-dashboard .ri-li > a + a { margin-left: 0; }
  #view-dashboard .lb-podium { grid-template-columns: 1fr; }
  #view-dashboard #leaderboardGrid { padding: 14px 14px 10px; }
}
@media (max-width: 520px) {
  #view-dashboard .cm-tiles, #view-dashboard .cm-tiles2 { grid-template-columns: 1fr; }
  #view-dashboard .cm-tile { border-right: 0 !important; border-bottom: 1px solid var(--d-line-soft); }
  #view-dashboard .cm-tiles > .cm-tile:last-child, #view-dashboard .cm-tiles2 > .cm-tile:last-child { border-bottom: 0; }
}