/* Přehled a grafy (O1-10): dlaždice, karty, odznaky stavu a vlastní SVG grafy z js/charts.js.
   Barvy řad = tmavá varianta kategorické palety skillu dataviz v pevném pořadí, ověřená validátorem proti ploše
   --panel (#1b2230): všechny kontroly prošly. Stavové barvy jsou vyhrazené a vždy s ikonou a textem. */
:root {
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --status-ok: #0ca30c;
  --status-warn: #fab219;
  --status-crit: #d03b3b;
  --chart-grid: #2a3344;
  --chart-axis: #3d4960;
  --chart-tick: #8a93a3;
}

.page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.75rem; margin-bottom: 0.75rem; }
.page-head h1 { margin: 0; }
.updated { font-size: 0.85rem; }

/* --- Dlaždice --- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.tile { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 0.9rem; }
.tile-label { color: var(--muted); font-size: 0.85rem; }
.tile-value { font-size: 1.75rem; font-weight: 600; line-height: 1.2; }
.tile-note { font-size: 0.8rem; }

/* --- Karty --- */
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.card { grid-column: 1 / -1; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 0.9rem; min-width: 0; }
.card.half { grid-column: auto; }
.card-title { font-size: 1rem; margin: 0 0 0.5rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.segmented { display: flex; gap: 0.25rem; margin-bottom: 0.5rem; }
.segmented .button { padding: 0.2rem 0.6rem; font-size: 0.85rem; }
.segmented .button[aria-pressed="true"] { background: var(--panel-2); border-color: var(--accent); }

/* --- Odznaky stavu: barva + ikona + text --- */
.status { white-space: nowrap; }
.status-icon { font-size: 0.75em; }
.status-ok .status-icon { color: var(--status-ok); }
.status-warn .status-icon { color: var(--status-warn); }
.status-crit .status-icon { color: var(--status-crit); }
.status-muted { color: var(--muted); }
.status-warn { color: var(--status-warn); }
.status-crit { color: #f08a8a; }

/* --- Grafy --- */
.chart { margin: 0; }
.chart-plot { position: relative; width: 100%; min-height: 1rem; }
.chart-svg { display: block; overflow: visible; }
.chart-svg:focus-visible, .chart-svg .column:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chart-svg .grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart-svg .axis { stroke: var(--chart-axis); stroke-width: 1; }
.chart-svg .tick { fill: var(--chart-tick); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-svg .end-label { fill: var(--text); font-size: 12px; font-weight: 600; }
.chart-svg .chart-empty { fill: var(--muted); font-size: 13px; }
.chart-svg .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .dot { stroke: var(--panel); stroke-width: 2; }
.chart-svg .crosshair { stroke: var(--chart-tick); stroke-width: 1; }
.chart-svg .hit { fill: transparent; }
.chart-svg .column.hover .bar { opacity: 0.8; }
.chart-svg .column:focus { outline: none; }

.chart-svg .line.s1 { stroke: var(--series-1); } .chart-svg .s1:not(.line) { fill: var(--series-1); }
.chart-svg .line.s2 { stroke: var(--series-2); } .chart-svg .s2:not(.line) { fill: var(--series-2); }
.chart-svg .line.s3 { stroke: var(--series-3); } .chart-svg .s3:not(.line) { fill: var(--series-3); }
.chart-svg .line.s4 { stroke: var(--series-4); } .chart-svg .s4:not(.line) { fill: var(--series-4); }
.chart-svg .line.s5 { stroke: var(--series-5); } .chart-svg .s5:not(.line) { fill: var(--series-5); }
.chart-svg .line.s6 { stroke: var(--series-6); } .chart-svg .s6:not(.line) { fill: var(--series-6); }
.chart-svg .line.s7 { stroke: var(--series-7); } .chart-svg .s7:not(.line) { fill: var(--series-7); }
.chart-svg .line.s8 { stroke: var(--series-8); } .chart-svg .s8:not(.line) { fill: var(--series-8); }

.legend-key.s1, .tooltip-key.s1, .barlist-bar.s1 { background: var(--series-1); }
.legend-key.s2, .tooltip-key.s2 { background: var(--series-2); }
.legend-key.s3, .tooltip-key.s3 { background: var(--series-3); }
.legend-key.s4, .tooltip-key.s4 { background: var(--series-4); }
.legend-key.s5, .tooltip-key.s5 { background: var(--series-5); }
.legend-key.s6, .tooltip-key.s6 { background: var(--series-6); }
.legend-key.s7, .tooltip-key.s7 { background: var(--series-7); }
.legend-key.s8, .tooltip-key.s8 { background: var(--series-8); }

.chart-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; margin: 0 0 0.4rem; padding: 0; font-size: 0.85rem; color: var(--muted); }
.legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend-key { display: inline-block; }
.legend-key.line { width: 14px; height: 2px; border-radius: 1px; }
.legend-key.box { width: 10px; height: 10px; border-radius: 2px; }

.chart-tooltip {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  min-width: 7rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.35rem 0.55rem;
  font-size: 0.8rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.tooltip-title { color: var(--muted); margin-bottom: 0.15rem; }
.tooltip-row { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.tooltip-key { display: inline-block; width: 12px; height: 2px; border-radius: 1px; }

.chart-table { margin-top: 0.4rem; font-size: 0.85rem; }
.chart-table summary { color: var(--muted); cursor: pointer; }
.chart-table .table-wrap { max-height: 18rem; overflow: auto; }

/* Vodorovné pruhy (online podle zóny a classy). */
.barlist-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.barlist-row { display: grid; grid-template-columns: minmax(5rem, 35%) 1fr auto; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.barlist-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barlist-track { height: 12px; }
.barlist-bar { display: block; height: 12px; border-radius: 0 4px 4px 0; }
.barlist-value { font-variant-numeric: tabular-nums; min-width: 2.5rem; text-align: right; }

@media (max-width: 40rem) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-value { font-size: 1.4rem; }
}

@media (forced-colors: active) {
  .chart-svg .line { stroke: CanvasText; }
  .chart-svg .bar, .barlist-bar { fill: CanvasText; background: CanvasText; }
}