/**
 * Demo analytics dashboard (templates/page-analytics.php).
 *
 * Sunrise-pop system, matching the hub: warm paper ground, grape ink,
 * hairline borders, pill chrome, rounded cards with soft shadows, and the
 * four-color sunstripe under the topbar. Charts are dependency-free
 * HTML/SVG rendered by assets/js/analytics.js: thin marks, recessive
 * grids, direct labels, and a table-view twin on every chart.
 */

:root {
  --dpa-paper: #FFFBF4;
  --dpa-cream: #FFF7EA;
  --dpa-ink: #251C35;
  --dpa-plum: #33204A;
  --dpa-muted: #6B6377;
  --dpa-faint: #9A93A6;
  --dpa-line: #EFE6D9;
  --dpa-line-strong: #DFD3C2;
  --dpa-tint: #FBF3E6;
  --dpa-coral: #FF6B5B;
  --dpa-coral-deep: #E8503F;
  --dpa-coral-tint: #FFEEE9;
  --dpa-tangerine: #FF8A3D;
  --dpa-sun: #FFC933;
  --dpa-aqua: #17C3B2;
  --dpa-aqua-deep: #0E8A7D;
  --dpa-sky: #5BC4FF;
  --dpa-lilac: #B487FF;
  --dpa-ok: #0E8A7D;
  --dpa-ok-tint: #E2F7F4;
  --dpa-err: #C64B3C;
  --dpa-err-tint: #FDEAE6;
  --dpa-neutral: #8D8498;
  --dpa-neutral-tint: #F1EDF6;
  --dpa-grid: #EFE6D9;
  --dpa-sunrise: linear-gradient(90deg, #FF8A3D 0 25%, #FF6B5B 25% 50%, #FFC933 50% 75%, #17C3B2 75% 100%);
  --dpa-shadow-soft: 0 1px 2px rgba(37, 28, 53, 0.08), 0 4px 12px rgba(37, 28, 53, 0.05);
  --dpa-radius: 16px;
  --dpa-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.dpa-body {
  background: linear-gradient(180deg, #FFF3DC 0%, var(--dpa-paper) 420px);
  color: var(--dpa-ink);
  min-height: 100vh;
  font-family: var(--dpa-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.dpa-body a { color: inherit; }
.dpa-body :focus-visible { outline: 2px solid var(--dpa-coral); outline-offset: 2px; border-radius: 4px; }

/* ── Topbar (hub idiom) ─────────────────────────────────── */

.dpa-topbar {
  background: var(--dpa-paper);
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  gap: 12px;
}
.dpa-brand { display: inline-flex; align-items: center; gap: 12px; height: 100%; }
.dpa-brand-logo { display: inline-flex; align-items: center; }
.dpa-brand-logo img { display: block; height: 50px; width: auto; }
.dpa-demo-pill {
  font-weight: 800; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dpa-ink); background: var(--dpa-sun);
  border: 1px solid rgba(37, 28, 53, 0.15); border-radius: 100px; padding: 5px 11px;
}
.dpa-topnav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dpa-topnav a {
  font-weight: 600; font-size: 13px; color: var(--dpa-plum); text-decoration: none;
  border: 1.5px solid var(--dpa-line); border-radius: 100px; padding: 8px 16px;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.dpa-topnav a:nth-of-type(3n+1):hover { background: var(--dpa-coral-tint); border-color: var(--dpa-coral); color: #C0392B; box-shadow: 0 2px 10px rgba(255, 107, 91, 0.25); }
.dpa-topnav a:nth-of-type(3n+2):hover { background: #E2F7F4; border-color: var(--dpa-aqua); color: var(--dpa-aqua-deep); box-shadow: 0 2px 10px rgba(23, 195, 178, 0.25); }
.dpa-topnav a:nth-of-type(3n):hover { background: #F0E7FF; border-color: var(--dpa-lilac); color: #7C4DC4; box-shadow: 0 2px 10px rgba(180, 135, 255, 0.3); }
.dpa-sunstripe { height: 4px; background: var(--dpa-sunrise); }
@media (max-width: 640px) {
  .dpa-topbar { height: auto; padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
  .dpa-brand-logo img { height: 42px; }
}

/* ── Page frame ─────────────────────────────────────────── */

.dpa-wrap { max-width: min(1280px, 94vw); margin: 0 auto; padding: 44px clamp(16px, 2.5vw, 32px) 72px; }
.dpa-eyebrow { font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dpa-coral-deep); margin-bottom: 12px; }
.dpa-head h1 { font-weight: 800; font-size: clamp(38px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 14px; }
.dpa-sub { font-size: 16px; color: var(--dpa-muted); max-width: 640px; line-height: 1.6; margin-bottom: 36px; }
.dpa-h2 { font-weight: 800; font-size: 24px; letter-spacing: -0.01em; margin-bottom: 6px; }
.dpa-note { font-size: 13.5px; color: var(--dpa-muted); margin-bottom: 16px; max-width: 640px; line-height: 1.55; }
.dpa-section { margin-top: 44px; }
.dpa-foot { font-size: 12px; color: var(--dpa-muted); margin-top: 52px; line-height: 1.6; }

/* ── KPI tiles ──────────────────────────────────────────── */

.dpa-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.dpa-tile {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--dpa-paper); border: 1px solid var(--dpa-line);
  border-radius: var(--dpa-radius); padding: 16px 18px 14px;
  box-shadow: var(--dpa-shadow-soft);
}
.dpa-tile-label { font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dpa-muted); }
.dpa-tile-value { font-weight: 800; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.02em; line-height: 1.05; }
.dpa-tile-value.dpa-good { color: var(--dpa-ok); }
.dpa-tile-sub { font-size: 12px; color: var(--dpa-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1080px) { .dpa-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .dpa-kpis { grid-template-columns: repeat(2, 1fr); } .dpa-tile-sub { white-space: normal; } }

/* ── Cards & rows ───────────────────────────────────────── */

.dpa-row { display: grid; gap: 16px; }
.dpa-row-2 { grid-template-columns: 1fr 1fr; }
.dpa-row-months { grid-template-columns: 1fr; }
@media (max-width: 900px) { .dpa-row-2, .dpa-row-months { grid-template-columns: 1fr; } }
.dpa-row + .dpa-card, .dpa-card + .dpa-row { margin-top: 16px; }

.dpa-card {
  position: relative;
  background: var(--dpa-paper); border: 1px solid var(--dpa-line);
  border-radius: var(--dpa-radius); padding: 20px 22px 18px;
  box-shadow: var(--dpa-shadow-soft);
  min-width: 0;
}
.dpa-card-h { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; margin-bottom: 14px; padding-right: 64px; }
.dpa-card-sub { font-size: 12.5px; color: var(--dpa-muted); margin: -10px 0 14px; }

/* Table-view toggle: the accessibility twin of every chart. */
.dpa-tbtn {
  position: absolute; top: 16px; right: 16px;
  font-family: var(--dpa-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.04em;
  color: var(--dpa-muted); background: transparent;
  border: 1.5px solid var(--dpa-line); border-radius: 100px; padding: 5px 12px; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dpa-tbtn:hover, .dpa-tbtn[aria-pressed="true"] { background: var(--dpa-tint); color: var(--dpa-ink); border-color: var(--dpa-line-strong); }

/* ── Horizontal bar chart (HTML marks) ──────────────────── */

.dpa-bars { display: flex; flex-direction: column; gap: 12px; }
.dpa-bar-row { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 12px; }
.dpa-bar-name { font-weight: 600; font-size: 13px; color: var(--dpa-ink); text-align: right; line-height: 1.25; }
.dpa-bar-name small { display: block; font-weight: 500; font-size: 11px; color: var(--dpa-muted); }
.dpa-bar-track { position: relative; display: flex; align-items: center; gap: 8px; min-height: 26px; }
.dpa-bar-mark {
  height: 18px; border-radius: 0 4px 4px 0; flex: none;
  transition: filter 0.12s;
}
.dpa-bar-row:hover .dpa-bar-mark, .dpa-bar-track:focus-visible .dpa-bar-mark { filter: brightness(1.08) saturate(1.05); }
.dpa-bar-val { font-weight: 700; font-size: 13px; color: var(--dpa-ink); white-space: nowrap; }
.dpa-bar-val small { font-weight: 500; font-size: 11.5px; color: var(--dpa-muted); }
.dpa-bar-zero { font-size: 12px; color: var(--dpa-faint); }
@media (max-width: 560px) {
  .dpa-bar-row { grid-template-columns: 92px 1fr; gap: 8px; }
  .dpa-bar-name { font-size: 12px; }
}

/* ── Stacked status bars ────────────────────────────────── */

.dpa-stack { display: flex; align-items: center; gap: 2px; height: 18px; }
.dpa-stack-seg { height: 100%; flex: none; transition: filter 0.12s; }
.dpa-stack-seg:first-child { border-radius: 4px 0 0 4px; }
.dpa-stack-seg:last-child { border-radius: 0 4px 4px 0; }
.dpa-stack-seg:only-child { border-radius: 4px; }
.dpa-stack-seg:hover { filter: brightness(1.08); }
.dpa-rate { font-weight: 700; font-size: 12.5px; color: var(--dpa-muted); white-space: nowrap; }
.dpa-rate strong { color: var(--dpa-ink); font-weight: 800; }

/* Status summary row: three labeled figures over one 100% dollar bar. */
.dpa-status-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.dpa-status-fig { display: flex; flex-direction: column; gap: 3px; border-left: 3px solid var(--dpa-line); padding-left: 12px; }
.dpa-status-fig .dpa-sf-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; }
.dpa-status-fig .dpa-sf-value { font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }
.dpa-status-fig .dpa-sf-sub { font-size: 12px; color: var(--dpa-muted); }
.dpa-status-fig.is-accepted { border-left-color: var(--dpa-ok); }
.dpa-status-fig.is-accepted .dpa-sf-label { color: var(--dpa-ok); }
.dpa-status-fig.is-pending { border-left-color: var(--dpa-neutral); }
.dpa-status-fig.is-pending .dpa-sf-label { color: var(--dpa-neutral); }
.dpa-status-fig.is-declined { border-left-color: var(--dpa-err); }
.dpa-status-fig.is-declined .dpa-sf-label { color: var(--dpa-err); }
@media (max-width: 560px) { .dpa-status-figs { grid-template-columns: 1fr; } }

/* Legend: icon + label, never color alone. */
.dpa-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.dpa-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--dpa-muted); }
.dpa-legend-swatch { width: 14px; height: 10px; border-radius: 3px; flex: none; }

/* ── Writer × region matrix ─────────────────────────────── */

.dpa-matrix-scroll { overflow-x: auto; }
.dpa-matrix-grid { display: grid; gap: 4px; min-width: 560px; }
.dpa-mx-corner { min-height: 30px; }
.dpa-mx-col {
  font-weight: 700; font-size: 11px; letter-spacing: 0.02em; color: var(--dpa-ink);
  display: flex; align-items: flex-end; justify-content: center; gap: 5px;
  padding-bottom: 6px; text-align: center; line-height: 1.2;
}
.dpa-mx-row { font-weight: 600; font-size: 13px; color: var(--dpa-ink); display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; white-space: nowrap; }
.dpa-mx-cell {
  display: flex; align-items: center; justify-content: center;
  min-height: 40px; border-radius: 10px;
  font-weight: 800; font-size: 14px; color: var(--dpa-ink);
  transition: filter 0.12s, box-shadow 0.12s;
}
.dpa-mx-cell.is-empty { background: var(--dpa-tint); color: var(--dpa-faint); font-weight: 500; font-size: 12px; }
.dpa-mx-cell:hover { filter: brightness(1.04); box-shadow: inset 0 0 0 1.5px rgba(37, 28, 53, 0.18); }

/* ── Line chart (SVG) ───────────────────────────────────── */

.dpa-line-wrap { position: relative; }
.dpa-line-wrap svg { display: block; width: 100%; height: auto; }
.dpa-line-grid { stroke: var(--dpa-grid); stroke-width: 1; }
.dpa-line-axis { fill: var(--dpa-muted); font-family: var(--dpa-sans); font-size: 11px; font-variant-numeric: tabular-nums; }
.dpa-line-path { fill: none; stroke: var(--dpa-coral-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dpa-line-area { fill: var(--dpa-coral); opacity: 0.1; }
.dpa-line-dot { fill: var(--dpa-coral-deep); stroke: var(--dpa-paper); stroke-width: 2; }
.dpa-line-cross { stroke: var(--dpa-line-strong); stroke-width: 1; }
.dpa-line-endlabel { fill: var(--dpa-ink); font-family: var(--dpa-sans); font-weight: 700; font-size: 12px; }

/* ── Region / status chips (shared with the table) ──────── */

.dpa-region-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; }
.dpa-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(37, 28, 53, 0.12); }
.dpa-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 700; font-size: 11.5px; letter-spacing: 0.02em;
  border-radius: 100px; padding: 4px 11px; white-space: nowrap;
}
.dpa-status-accepted { background: var(--dpa-ok-tint); color: var(--dpa-ok); }
.dpa-status-pending { background: var(--dpa-neutral-tint); color: #5F5870; }
.dpa-status-declined { background: var(--dpa-err-tint); color: var(--dpa-err); }

/* ── Tables (the proposals table + every chart's table view) ── */

.dpa-table-card { padding: 8px 6px; }
.dpa-table-scroll { overflow-x: auto; }
.dpa-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dpa-table th {
  font-weight: 700; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--dpa-muted); text-align: left; padding: 12px 14px 10px; border-bottom: 1px solid var(--dpa-line-strong);
  white-space: nowrap;
}
.dpa-table td { padding: 11px 14px; border-bottom: 1px solid var(--dpa-line); vertical-align: middle; white-space: nowrap; }
.dpa-table tbody tr:last-child td { border-bottom: 0; }
.dpa-table tbody tr:hover td { background: var(--dpa-tint); }
.dpa-td-donor { font-weight: 700; }
.dpa-td-date { color: var(--dpa-muted); }
.dpa-num { text-align: right; font-variant-numeric: tabular-nums; }
.dpa-view { font-weight: 700; font-size: 12.5px; color: var(--dpa-coral-deep); text-decoration: none; }
.dpa-view:hover { text-decoration: underline; }

/* Chart table views are compact. */
.dpa-tview { display: none; }
.dpa-tview.is-open { display: block; }
.dpa-tview table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dpa-tview th { font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dpa-muted); text-align: left; padding: 8px 10px 6px; border-bottom: 1px solid var(--dpa-line-strong); }
.dpa-tview td { padding: 7px 10px; border-bottom: 1px solid var(--dpa-line); }
.dpa-tview tr:last-child td { border-bottom: 0; }
.dpa-tview .dpa-num { text-align: right; }
.dpa-chart.is-hidden { display: none; }

/* ── Tooltip ────────────────────────────────────────────── */

.dpa-tooltip {
  position: fixed; z-index: 600; pointer-events: none;
  background: var(--dpa-ink); color: #FFF5EC;
  border-radius: 10px; padding: 9px 12px;
  font-family: var(--dpa-sans); font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 6px 16px rgba(37, 28, 53, 0.35);
  opacity: 0; transform: translateY(3px); transition: opacity 0.12s, transform 0.12s;
  max-width: 260px;
}
.dpa-tooltip.is-on { opacity: 1; transform: translateY(0); }
.dpa-tooltip .dpa-tt-title { font-weight: 800; font-size: 12px; margin-bottom: 3px; }
.dpa-tooltip .dpa-tt-row { display: flex; align-items: baseline; gap: 8px; }
.dpa-tooltip .dpa-tt-row .dpa-tt-key { display: inline-block; width: 12px; height: 3px; border-radius: 2px; align-self: center; flex: none; }
.dpa-tooltip .dpa-tt-row strong { font-weight: 800; }
.dpa-tooltip .dpa-tt-row span { color: rgba(255, 245, 236, 0.75); }