/* Statistics page — chart tokens tuned against the app's surfaces
 * (dark #1a1c22, light #f2f0fa): one categorical hue per field of study,
 * neutral gray for legacy entries without one, sequential hue = blue. */
:root,
body[data-theme="dark"]{
  --viz-zachranar: #3987e5;
  --viz-osetrovatelstvo: #2fb08e;
  --viz-iny: #d99a3d;
  --viz-unknown: #8e9099;
  --viz-seq: #3987e5;
  --viz-grid: color-mix(in srgb, var(--outline-variant) 60%, transparent);
}
body[data-theme="light"]{
  --viz-zachranar: #2a78d6;
  --viz-osetrovatelstvo: #178f72;
  --viz-iny: #a8721c;
  --viz-unknown: #757680;
  --viz-seq: #2a78d6;
}

.stats-wrap{width:min(1020px, 100%);}

.key-gate h2{margin:0 0 6px; font-size: calc(18px * var(--font-scale)); font-weight:500;}
.key-form{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
.key-form input{
  flex:1 1 240px;
  min-height:44px;
  padding:0 14px;
  border-radius: var(--radius-sm);
  border:1px solid var(--outline-variant);
  background: var(--surface-2);
  color: var(--text);
  font:inherit;
}
.key-error{margin-top:10px; color: var(--bad); font-size: calc(13px * var(--font-scale));}

.filters{display:flex; gap:14px; flex-wrap:wrap; margin:4px 0 2px;}
.chip-group{display:flex; gap:6px; flex-wrap:wrap;}
.chip{
  border:1px solid var(--outline-variant);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: var(--radius-full);
  min-height:34px;
  padding:0 14px;
  font:inherit;
  font-size: calc(13px * var(--font-scale));
  cursor:pointer;
  transition: background-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
.chip:hover{background: var(--surface-3);}
.chip.active{
  background: var(--primary-container);
  border-color: transparent;
  color: var(--on-primary-container);
}

.kpi-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px;}
.kpi{padding:14px 16px;}
.kpi-value{font-size: calc(30px * var(--font-scale)); font-weight:500; line-height:1.2;}
.kpi-label{color: var(--muted); font-size: calc(12.5px * var(--font-scale)); margin-top:2px;}
.kpi-label span{opacity:.85;}

.chart-panel h2{
  margin:0 0 10px;
  font-size: calc(15px * var(--font-scale));
  font-weight:500;
  color: var(--text);
}
.chart-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.legend{display:flex; gap:14px; font-size: calc(12.5px * var(--font-scale)); color: var(--muted);}
.legend-item{display:inline-flex; align-items:center; gap:6px;}
.swatch{width:10px; height:10px; border-radius:3px; display:inline-block;}
.swatch-zachranar{background: var(--viz-zachranar);}
.swatch-osetrovatelstvo{background: var(--viz-osetrovatelstvo);}
.swatch-iny{background: var(--viz-iny);}
.swatch-unknown{background: var(--viz-unknown);}

.chart-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px;}

.trend-chart svg{display:block; width:100%; height:auto;}
.trend-chart .grid-line{stroke: var(--viz-grid); stroke-width:1;}
.trend-chart .axis-label{fill: var(--muted); font-size:11px; font-family:inherit;}
.trend-chart .seg-zachranar{fill: var(--viz-zachranar);}
.trend-chart .seg-osetrovatelstvo{fill: var(--viz-osetrovatelstvo);}
.trend-chart .seg-iny{fill: var(--viz-iny);}
.trend-chart .seg-unknown{fill: var(--viz-unknown);}
.trend-chart .hover-col{fill:transparent; cursor:default;}
.trend-chart .hover-col:hover{fill: color-mix(in srgb, var(--text) 6%, transparent);}

/* Horizontal single-hue bars (magnitude): label / track / direct value. */
.hbar-row{display:grid; grid-template-columns:minmax(70px, 32%) 1fr auto; gap:10px; align-items:center; padding:5px 0;}
.hbar-label{color: var(--muted); font-size: calc(12.5px * var(--font-scale)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hbar-track{height:14px; border-radius:4px; background: var(--surface-3); overflow:hidden;}
.hbar-fill{height:100%; border-radius:4px; background: var(--viz-seq); min-width:2px;}
.hbar-value{font-size: calc(12.5px * var(--font-scale)); color: var(--text); min-width:2ch; text-align:right;}

.stats-table-wrap{max-height:340px; overflow:auto; border:1px solid var(--outline-variant); border-radius: var(--radius-sm);}
.stats-table-wrap table{width:100%; border-collapse:collapse; font-size: calc(13px * var(--font-scale));}
.stats-table-wrap th, .stats-table-wrap td{
  text-align:left;
  padding:8px 12px;
  border-bottom:1px solid var(--outline-variant);
  white-space:nowrap;
}
.stats-table-wrap td:last-child{white-space:normal; word-break:break-all;}
.stats-table-wrap th{position:sticky; top:0; background: var(--surface-2); color: var(--muted); font-weight:500;}

.empty-state{color: var(--muted); text-align:center;}

.chart-tooltip{
  position:fixed;
  z-index:200;
  pointer-events:none;
  background: var(--surface-4);
  border:1px solid var(--outline-variant);
  border-radius: var(--radius-xs);
  box-shadow: var(--elev-2);
  padding:6px 10px;
  font-size:12.5px;
  color: var(--text);
  max-width:280px;
}

#dashboard{display:flex; flex-direction:column; gap:16px;}
#dashboard[hidden], #keyGate[hidden], #statsActions[hidden]{display:none;}
.print-header{display:none;}
.stats-footer a{color: var(--muted);}

/* ---- PDF export: a print-first report layout ---- */
@media print{
  :root{
    --viz-zachranar: #2a78d6;
    --viz-osetrovatelstvo: #178f72;
    --viz-iny: #a8721c;
    --viz-unknown: #757680;
    --viz-seq: #2a78d6;
    --viz-grid: #d5d5dd;
  }
  body, body[data-theme="dark"]{
    background:#ffffff !important;
    color:#1a1b21;
  }
  .wrap{width:100%; padding:0;}
  header, .filters, .stats-actions, .key-gate, .stats-footer, .chart-tooltip{display:none !important;}
  .print-header{display:block; margin-bottom:8px;}
  .print-header h2{margin:0; font-size:20px; color:#1a1b21;}
  .panel{
    background:#ffffff;
    border:1px solid #d5d5dd;
    box-shadow:none;
    break-inside:avoid;
  }
  .kpi-value{color:#1a1b21;}
  .kpi-label, .hbar-label, .legend, .print-header .sub{color:#45464f;}
  .chart-panel h2{color:#1a1b21;}
  .hbar-track{background:#ececf2;}
  .hbar-value, .stats-table-wrap td{color:#1a1b21;}
  .stats-table-wrap{max-height:none; overflow:visible; border-color:#d5d5dd;}
  .stats-table-wrap th{background:#f4f4f8; color:#45464f;}
  .stats-table-wrap th, .stats-table-wrap td{border-color:#e2e2ea;}
  .trend-chart .axis-label{fill:#45464f;}
  .empty-state[hidden]{display:none;}
}