/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD - rebuilt from ground zero to mirror Master-template.html element
   for element. Every card, tile, title and bar copies the template's exact
   design + size:

     · Stat tile   → template `bg-[#f5f5f5] rounded-xl p-6 space-y-4`
                     label `text-xs uppercase tracking-wider #6b7280`
                     value `display-voice text-2xl #111111`
     · Chart card  → template `border border-[#e5e7eb] rounded-xl p-6 bg-white`
                     title `display-voice text-lg #111111`
     · Canvas      → template `bg-white` (grey tiles only read on a white page)
     · Bars        → track `bg-[#e5e7eb] h-2 rounded-full`, fill `bg-[#111111]`
     · Heatmap     → `grid gap-1`, cells `aspect-square rounded-sm`, mono tones
     · Line chart  → path `stroke:#111111 stroke-width:2.5`, faint area

   All class names / IDs are kept exactly as js/dashboard.js emits them.
   ══════════════════════════════════════════════════════════════════════════ */

/* Canvas + tile/card fills. Template runs a pure-white page with #f5f5f5 tiles;
   the dark closure (#101010) raises tiles/cards one step for the same contrast. */
#screen-dashboard {
  --canvas: #FFFFFF;
  --tile:   #F5F5F5;   /* template surface-card */
  --card:   #FFFFFF;
  --hair:   #E5E7EB;   /* template hairline */
  /* Monochrome categorical ramp (donuts / heatmap / bars). */
  --chart-1: #111111;
  --chart-2: #565C66;
  --chart-3: #868C96;
  --chart-4: #B4B9C1;
  --chart-5: #E5E7EB;
  background: var(--canvas);
}
[data-dark] #screen-dashboard {
  --canvas: #101010;
  --tile:   #1F1F1F;
  --card:   #1A1A1A;
  --hair:   #272A30;
  --chart-1: #F3F4F6;
  --chart-2: #C2C7CE;
  --chart-3: #9198A2;
  --chart-4: #656B75;
  --chart-5: #313539;
}

/* ── Header ── */
.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
/* Template page title: `display-voice text-3xl/4xl tracking-tighter`. */
.dash-title {
  font-family: var(--display-font);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1.1;
}

/* Filter row - template pill/segmented control, on a hairline track. */
.dash-filter-row {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  background: var(--tile);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 5px;
}
.dash-filter-row select {
  flex: 1;
  min-width: 150px;
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.dash-filter-row select:hover { background: var(--card); }
.dash-filter-row select:focus { background: var(--card); color: var(--text); }

/* ── Body - template `max-w-[1200px] mx-auto space-y-12` (roomier gaps). ── */
.dash-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4px 2px 32px;
}

/* ══════════════════════════════════════════════════════════════════════════
   STAT TILES (KPI) - template `bg-[#f5f5f5] rounded-xl p-6 space-y-4`
   ══════════════════════════════════════════════════════════════════════════ */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 16px;
  flex-shrink: 0;
}
.kpi-card {
  background: var(--tile);
  border: 0;
  border-radius: var(--r-lg);         /* rounded-xl / 12px */
  padding: 24px;                       /* p-6 */
  display: flex;
  flex-direction: column;
  gap: 16px;                           /* space-y-4 */
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.kpi-card:hover { transform: translateY(-2px); }

.kpi-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
/* Template stat label: `text-xs font-medium uppercase tracking-wider #6b7280`. */
.kpi-card .label {
  font-size: 12px;
  font-weight: 500;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Template stat value: `display-voice text-2xl` (24px, 600, tight). */
.kpi-card .val {
  font-family: var(--display-font);
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Icon chip - single neutral tone (native monochrome); ic-* kept but untinted. */
.kpi-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
/* Mini progress bar - template `bg-[#e5e7eb] h-2 rounded-full` + `bg-[#111]`. */
.kpi-mini-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--hair);
  overflow: hidden;
  margin-top: -4px;
}
.kpi-mini-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--text);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══════════════════════════════════════════════════════════════════════════
   CHART CARDS - template `border border-[#e5e7eb] rounded-xl p-6 bg-white`
   ══════════════════════════════════════════════════════════════════════════ */
.dash-grid-two {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  min-height: 220px;
}
.dash-grid-two-even { grid-template-columns: 1fr 1fr; }
.dash-grid-three {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  min-height: 210px;
}
@media (max-width: 768px) { .dash-grid-two { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .dash-grid-three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .dash-grid-three { grid-template-columns: 1fr; } }

.dash-widget {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);          /* rounded-xl / 12px */
  padding: 24px;                        /* p-6 */
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
/* Template card title: `display-voice text-lg #111111` (18px). space-y-6 gap. */
.dash-widget-title {
  font-family: var(--display-font);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: var(--display-track);
  flex-wrap: wrap;
  gap: 12px;
}
.dash-widget-title-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ── Scope toggle (Overview / Today) - segmented pill, monochrome. ── */
.scope-toggle {
  display: inline-flex;
  background: var(--tile);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.scope-btn {
  border: none;
  background: transparent;
  color: var(--dim);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.scope-btn:hover { color: var(--text); }
.scope-btn.active { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(17,17,17,0.06); }
[data-dark] .scope-btn.active { box-shadow: 0 1px 2px rgba(0,0,0,0.3); }

/* ══════════════════════════════════════════════════════════════════════════
   HEATMAP - template `grid gap-1`, cells `aspect-square rounded-sm`, mono tones
   ══════════════════════════════════════════════════════════════════════════ */
.heatmap-container { flex: 1; display: flex; align-items: center; min-width: 0; }
.heatmap-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-columns: 1fr;
  gap: 4px;                            /* gap-1 */
  width: 100%;
}
.hm-cell {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 3px;                  /* rounded-sm */
  transition: transform 0.15s ease, filter 0.2s ease;
  cursor: pointer;
}
.hm-cell:hover { transform: scale(1.2); filter: brightness(1.08); z-index: 10; }
/* Template density ramp: #e5e7eb → #898989 → #111111 (empty is faint hairline). */
.hm-i0 { background: var(--hair); opacity: 0.6; }
[data-dark] .hm-i0 { background: #22252A; opacity: 1; }
.hm-i1 { background: var(--chart-5); }
.hm-i2 { background: var(--chart-4); }
.hm-i3 { background: var(--chart-2); }
.hm-i4 { background: var(--chart-1); }
.hm-legend { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--dim); }
.hm-legend-cell { width: 11px; height: 11px; border-radius: 3px; }

/* ══════════════════════════════════════════════════════════════════════════
   LINE CHARTS - template path `stroke:#111111 stroke-width:2.5`, faint area
   ══════════════════════════════════════════════════════════════════════════ */
.chart-grid { stroke: var(--hair); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.6; }
[data-dark] .chart-grid { opacity: 0.4; }
.chart-y-axis {
  position: absolute;
  left: 0; top: 4px; bottom: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  color: var(--dim);
  opacity: 0.7;
  pointer-events: none;
}

.activity-chart-wrap,
.accuracy-chart-wrap,
.speed-chart-wrap {
  flex: 1; display: flex; flex-direction: column; height: 100%;
  min-height: 150px; gap: 8px; position: relative;
}
.activity-svg, .accuracy-svg, .speed-svg { width: 100%; flex: 1; min-height: 120px; overflow: visible; }

.activity-area { fill: url(#activityFill); }
.accuracy-area { fill: url(#accuracyFill); }
.speed-area    { fill: url(#speedFill); }

.activity-line, .accuracy-line, .speed-line {
  fill: none;
  stroke: var(--text);
  stroke-width: 2.5;                   /* template stroke-width 2.5 */
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.activity-dot, .accuracy-dot, .speed-dot {
  fill: var(--card);
  stroke: var(--text);
  stroke-width: 1.75;
  vector-effect: non-scaling-stroke;
  transition: r 0.15s ease;
}
.activity-dot:hover, .accuracy-dot:hover, .speed-dot:hover { r: 4.5; }
.activity-dot.is-today, .accuracy-dot.is-today, .speed-dot.is-today { fill: var(--text); stroke: var(--card); }

.activity-x-labels, .accuracy-x-labels, .speed-x-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 500;
  color: var(--dim);
  padding: 0 2px;
}
.activity-x-labels span, .accuracy-x-labels span, .speed-x-labels span { flex: 1; text-align: center; }
.activity-x-labels span:first-child, .accuracy-x-labels span:first-child, .speed-x-labels span:first-child { text-align: left; }
.activity-x-labels span:last-child, .accuracy-x-labels span:last-child, .speed-x-labels span:last-child { text-align: right; }

/* ══════════════════════════════════════════════════════════════════════════
   DONUT + LEGEND - template conic donut with a `w-2 h-2 rounded-full` legend
   ══════════════════════════════════════════════════════════════════════════ */
.pie-chart-wrap { display: flex; align-items: center; gap: 28px; justify-content: center; flex: 1; }
@media (max-width: 480px) { .pie-chart-wrap { flex-direction: column; gap: 18px; } }
.pie-svg-container { width: 112px; height: 112px; flex-shrink: 0; position: relative; }
.pie-svg-container svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pie-svg-container svg path,
.pie-svg-container svg circle { stroke: var(--card); stroke-width: 1.5; transition: opacity 0.2s ease; }
.pie-svg-container svg path:hover,
.pie-svg-container svg circle:hover { opacity: 0.85; }

.pie-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.pie-center-val { font-family: var(--display-font); font-size: 24px; font-weight: 600; letter-spacing: -0.04em; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.pie-center-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); margin-top: 4px; }

.pie-legend { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pie-legend-item { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.pie-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pie-legend-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pie-legend-label { color: var(--text); font-weight: 600; font-size: 13px; }
.pie-legend-val { font-family: 'JetBrains Mono', monospace; color: var(--dim); font-size: 11px; }

/* ══════════════════════════════════════════════════════════════════════════
   SYLLABUS PACING GAUGE
   ══════════════════════════════════════════════════════════════════════════ */
.pacing-wrap { display: flex; align-items: center; gap: 22px; flex: 1; }
.pacing-gauge-box { position: relative; width: 104px; height: 104px; flex-shrink: 0; }
.pacing-gauge { width: 100%; height: 100%; transform: rotate(-90deg); }
.pacing-gauge-track { fill: none; stroke: var(--hair); stroke-width: 11; }
.pacing-gauge-fill { fill: none; stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.pacing-gauge-fill.pacing-good, .pacing-gauge-fill.pacing-bad { stroke: var(--text); }
.pacing-gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pacing-gauge-val { font-family: var(--display-font); font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.pacing-gauge-label { font-size: 9.5px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }
.pacing-stats { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.pacing-stat-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; }
.pacing-stat-row span { color: var(--dim); flex-shrink: 0; }
.pacing-stat-row strong { color: var(--text); font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pacing-stat-row strong.pacing-good, .pacing-stat-row strong.pacing-bad { color: var(--text); }

/* ══════════════════════════════════════════════════════════════════════════
   WEAK-CHAPTER LEADERBOARD - rows with template `bg-[#e5e7eb]`/`bg-[#111]` bars
   ══════════════════════════════════════════════════════════════════════════ */
.leaderboard-list { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.lb-row { display: flex; align-items: center; gap: 14px; }
.lb-rank {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--tile); color: var(--dim);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.lb-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lb-label { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-bar-track { height: 8px; border-radius: 999px; background: var(--hair); overflow: hidden; }
.lb-bar-fill { height: 100%; border-radius: 999px; background: var(--text); transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.lb-bar-fill.lb-good, .lb-bar-fill.lb-warn, .lb-bar-fill.lb-bad { background: var(--text); }
.lb-stats { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.lb-pct { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--text); }
.lb-pct.lb-good, .lb-pct.lb-warn, .lb-pct.lb-bad { color: var(--text); }
.lb-count { font-size: 11px; color: var(--dim); white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════
   STUDY TIME & MOCK TESTS
   ══════════════════════════════════════════════════════════════════════════ */
.study-tests-wrap { display: flex; flex-direction: column; gap: 24px; }
.study-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* Inner stat tiles reuse the template stat-tile look: #f5f5f5 fill, no border. */
.study-tile { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--tile); border: 0; border-radius: var(--r-md); }
.study-tile-icon { width: 32px; height: 32px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; background: var(--card); color: var(--dim); }
.study-tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.study-tile-val { font-family: var(--display-font); font-size: 20px; font-weight: 600; color: var(--text); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.study-tile-label { font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.study-by-subject { display: flex; flex-direction: column; gap: 12px; }
.sbs-list { display: flex; flex-direction: column; gap: 12px; }
.sbs-row { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 14px; }
.sbs-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbs-bar-track { height: 8px; border-radius: 999px; background: var(--hair); overflow: hidden; }
.sbs-bar-fill { height: 100%; border-radius: 999px; background: var(--text); transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.sbs-val { font-size: 12px; font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }
@media (max-width: 560px){ .sbs-row { grid-template-columns: 84px 1fr auto; gap: 8px; } }

.mtrend-box { display: flex; flex-direction: column; gap: 12px; }
.mtrend-title { font-size: 12px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em; }
.mtrend { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.mtrend-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.mtrend-bar-wrap { flex: 1; width: 100%; max-width: 40px; display: flex; align-items: flex-end; }
.mtrend-bar { width: 100%; border-radius: 6px 6px 3px 3px; background: var(--text); min-height: 4px; transition: height 0.5s cubic-bezier(0.16,1,0.3,1); }
.mtrend-bar.good, .mtrend-bar.low { background: var(--text); }
.mtrend-pct { font-size: 11px; font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; }
@media (max-width: 640px){ .study-tiles { grid-template-columns: repeat(2, 1fr); } }

/* ══════════════════════════════════════════════════════════════════════════
   EMPTY STATES
   ══════════════════════════════════════════════════════════════════════════ */
.dash-empty-inline {
  flex: 1; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--dim); font-size: 13px; font-weight: 500; padding: 20px;
}
.dash-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--dim); font-size: 13px; font-weight: 500;
  background: color-mix(in srgb, var(--card) 80%, transparent);
  backdrop-filter: blur(2px);
  border-radius: var(--r-lg);
  z-index: 5;
}

@media (prefers-reduced-motion: reduce){
  .kpi-mini-bar-fill, .lb-bar-fill, .sbs-bar-fill, .mtrend-bar, .pacing-gauge-fill { transition: none; }
}