/* ============================================================
   BRAND / THEME TOKENS — Zinc Financial
   Every color on the page traces back to one of these five brand
   hex values (or a validated darker/lighter step of one, called
   out below). Swap the raw hexes here to re-theme the whole site.
   ============================================================ */
:root {
  /* Raw brand hexes */
  --brand-gold: #b99f1d;
  --brand-tan:  #d8caa7;
  --brand-black: #222423;
  --brand-white: #ffffff;
  --brand-gray: #646660;

  /* Accent — single-series UI (goal meter, links, focus ring) */
  --accent:        var(--brand-gold);
  --accent-dim:     #8f7a17; /* darkened step of brand gold — also chart categorical slot 1 */
  --accent-wash:   rgba(185, 159, 29, 0.14);
  --accent-track:  rgba(185, 159, 29, 0.18);

  /* Surfaces */
  --page-plane:    #1a1b1a;
  --surface-1:     var(--brand-black);
  --surface-2:     #2c2e2c;
  --border-hair:   rgba(255, 255, 255, 0.08);
  --border-hair-strong: rgba(255, 255, 255, 0.16);

  /* Ink */
  --text-primary:   var(--brand-white);
  --text-secondary: var(--brand-tan);  /* 9.6:1 contrast on --surface-1 */
  --text-muted:     var(--brand-gray);

  /* Status (fixed, never themed) */
  --status-good:     #0ca30c;
  --status-warning:  #fab219;
  --status-critical: #e66767;

  /* Categorical chart palette — fixed order, CVD-validated on --surface-1.
     A 5th+ lead source folds into --cat-other rather than a new hue. */
  --cat-1: #8f7a17; /* brand gold, darkened for chart contrast */
  --cat-2: #3987e5; /* blue */
  --cat-3: #199e70; /* aqua */
  --cat-4: #9085e9; /* violet */
  --cat-other: var(--brand-gray);

  /* Ordinal ramp (funnel stages) — one hue, light -> dark */
  --funnel-1: var(--brand-tan);
  --funnel-2: var(--brand-gold);
  --funnel-3: #8f7a17;
  --funnel-4: #6b5a12;

  /* Chart chrome */
  --chart-gridline: rgba(255, 255, 255, 0.08);
  --chart-axis-label: var(--brand-gray);

  /* Type */
  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --radius-card: 14px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page-plane);
  color: var(--text-primary);
  font-family: var(--font-sans);
  color-scheme: dark;
}

body {
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px 64px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------------- Masthead ---------------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 40px 0 28px;
  border-bottom: 1px solid var(--border-hair);
  margin-bottom: 40px;
}

.masthead__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.masthead__mark {
  width: 10px;
  height: 34px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-dim));
  flex-shrink: 0;
}

.masthead__titles h1 {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.15;
}

.masthead__titles p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.masthead__controls {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.range-select {
  display: flex;
  align-items: center;
  gap: 10px;
}

.range-select__label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#rangeSelect {
  appearance: none;
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border-hair-strong);
  border-radius: var(--radius-sm);
  padding: 9px 34px 9px 14px;
  font-size: 14px;
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
                    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

#rangeSelect:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.asof {
  font-size: 12px;
  color: var(--text-muted);
}

/* ---------------- Loading / error ---------------- */

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 120px 0;
  color: var(--text-secondary);
  font-size: 14px;
}

/* `.loading { display: flex }` above has the same specificity as the
   browser's default `[hidden] { display: none }` rule, and any author
   rule beats a user-agent rule at equal specificity — so without this,
   setting `.hidden = true` in JS never actually hides the spinner. */
.loading[hidden] {
  display: none;
}

.loading__spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--border-hair-strong);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.error-banner {
  background: rgba(230, 103, 103, 0.1);
  border: 1px solid rgba(230, 103, 103, 0.35);
  color: #f3b9b9;
  border-radius: var(--radius-card);
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 12px;
}

.error-banner strong {
  color: #ffffff;
}

/* ---------------- Goal block ---------------- */

.goal-block {
  background: var(--surface-1);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-card);
  padding: 28px 32px 30px;
  margin-bottom: 40px;
}

.goal-block__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}

.goal-block__title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
}

.goal-block__range {
  font-size: 12px;
  color: var(--text-muted);
}

.goal-meter__track {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: var(--accent-track);
  overflow: hidden;
}

.goal-meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  transition: width 0.6s ease;
}

.goal-block__figures {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.goal-figure {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.goal-figure--pct {
  align-items: center;
  text-align: center;
}

.goal-figure--right {
  align-items: flex-end;
  text-align: right;
  margin-left: auto;
}

.goal-figure__value {
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.01em;
  font-variant-numeric: proportional-nums;
}

.goal-figure--pct .goal-figure__value {
  color: var(--accent);
}

.goal-figure__label {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ---------------- Stat groups & grid ---------------- */

.stat-group {
  margin-bottom: 36px;
}

.stat-group__title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-card {
  background: var(--surface-1);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-card);
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.stat-card--wide {
  grid-column: span 2;
}

.stat-card__label {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.35;
  font-weight: 500;
}

.stat-card__value {
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -0.01em;
  font-variant-numeric: proportional-nums;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-card__value--na {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 22px;
}

.stat-card__sub {
  font-size: 11.5px;
  color: var(--text-muted);
}

/* ---------------- Chart blocks (shared shell) ---------------- */

.chart-block {
  margin-bottom: 36px;
}

.chart-card {
  background: var(--surface-1);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-card);
  padding: 22px 24px 20px;
}

.chart-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 16px;
}

/* Leads/MQLs by Lead Source stack vertically (Leads on top). */
.pie-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.source-bar-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Funnel & Conversion: a compact trend chart beside the stat cards. */
.funnel-combo {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 16px;
  align-items: stretch;
}

.funnel-combo__chart {
  display: flex;
  flex-direction: column;
}

.funnel-combo__chart .chart-card__body {
  flex: 1;
  display: flex;
  align-items: center;
}

/* Conversion Funnel: wide, with the two stacked source pies beside it. */
.funnel-pies {
  display: grid;
  grid-template-columns: minmax(380px, 2fr) minmax(300px, 1fr);
  gap: 16px;
  align-items: start;
}

.funnel-pies__funnel .chart-card__title,
.funnel-pies__funnel .stat-group__title {
  margin-bottom: 16px;
}

.funnel-pies__pies .stat-group__title {
  margin-bottom: 14px;
}

/* ---------------- Trend / bar chart (SVG) ---------------- */

/* viewBox + width:100%/height:auto scales the SVG to fill its card at its
   own aspect ratio -- a literal height attribute alongside width:100%
   would instead center-and-shrink it (SVG's default preserveAspectRatio). */
.chart-svg {
  display: block;
  width: 100%;
  height: auto;
}

.chart-gridline {
  stroke: var(--chart-gridline);
  stroke-width: 1;
}

.chart-bar--accent {
  fill: var(--accent);
}

.chart-value-label {
  fill: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.chart-axis-label {
  fill: var(--chart-axis-label);
  font-size: 11px;
}

/* ---------------- Funnel chart ---------------- */

.chart-funnel-band--1 { fill: var(--funnel-1); }
.chart-funnel-band--2 { fill: var(--funnel-2); }
.chart-funnel-band--3 { fill: var(--funnel-3); }
.chart-funnel-band--4 { fill: var(--funnel-4); }

.chart-funnel-value {
  font-size: 20px;
  font-weight: 650;
  font-variant-numeric: proportional-nums;
}
.chart-funnel-value--1,
.chart-funnel-value--2 { fill: #0b0b0b; }
.chart-funnel-value--3,
.chart-funnel-value--4 { fill: #ffffff; }

.chart-funnel-label {
  font-size: 12px;
  font-weight: 500;
}
.chart-funnel-label--1,
.chart-funnel-label--2 { fill: rgba(11, 11, 11, 0.7); }
.chart-funnel-label--3,
.chart-funnel-label--4 { fill: rgba(255, 255, 255, 0.75); }

.chart-funnel-connector {
  stroke: var(--border-hair-strong);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.chart-funnel-rate {
  fill: var(--text-primary);
  font-size: 15px;
  font-weight: 650;
  font-variant-numeric: proportional-nums;
}

/* ---------------- Pie chart ---------------- */

.pie-chart {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

.pie-chart__svg {
  flex-shrink: 0;
  width: 130px;
  height: 130px;
  display: block;
}

.pie-chart__slice {
  stroke: var(--surface-1);
  stroke-width: 2;
}

.pie-chart__empty {
  fill: none;
  stroke: var(--border-hair-strong);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.pie-chart__info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-width: 140px;
}

.pie-chart__total {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pie-chart__total-value {
  font-size: 38px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  font-variant-numeric: proportional-nums;
  line-height: 1.1;
}

.pie-chart__total-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pie-chart__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pie-chart__legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.pie-chart__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.pie-chart__legend-label {
  color: var(--text-secondary);
  flex: 1;
}

.pie-chart__legend-count {
  color: var(--text-primary);
  font-weight: 600;
  font-variant-numeric: proportional-nums;
}

/* ---------------- Source bar chart (horizontal) ---------------- */

.source-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.source-bar-chart__row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 10px;
}

.source-bar-chart__label {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-bar-chart__track {
  position: relative;
  height: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
}

.source-bar-chart__fill {
  height: 100%;
  border-radius: 4px;
}

.source-bar-chart__na {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.source-bar-chart__value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: proportional-nums;
  text-align: right;
  min-width: 64px;
}

/* ---------------- Footer ---------------- */

.page-footer {
  margin-top: auto;
  padding-top: 40px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 1080px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 800px) {
  .page { padding: 0 20px 48px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card--wide { grid-column: span 2; }
  .goal-block__figures { flex-direction: column; align-items: flex-start; }
  .goal-figure--right, .goal-figure--pct { align-items: flex-start; text-align: left; margin-left: 0; }
  .source-bar-row { grid-template-columns: 1fr; }
  .funnel-combo,
  .funnel-pies { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .masthead { padding: 28px 0 22px; }
  .masthead__titles h1 { font-size: 19px; }
  .stat-card__value { font-size: 23px; }
  .goal-figure__value { font-size: 24px; }
  .source-bar-chart__row { grid-template-columns: 72px 1fr auto; }
}