/* Site-specific styles — overrides theme.css */

.brand a{ text-decoration:none; color:var(--primary-dark); font-weight:800; letter-spacing:-.02em; }
.brand span{ color:var(--accent); }

/* Grafiekkleuren: eerste drie slots van het gevalideerde categorische palet (dataviz-skill).
   Verbruik = blauw, zon = oranje (ook bij Marcel: zelfde grootheid, zelfde kleur), net = aqua. */
.viz-root{
  --series-1:#2a78d6;
  --series-2:#eb6834;
  --series-3:#1baf7a;
}

.block{ margin-bottom:22px; }
.block-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.block-head h2.section{ margin:0; flex:1; }

.pill-live{ background:#eafaf1; color:#1e7d4f; }
.pill-live::before{ content:"●"; margin-right:5px; }
.pill-stale{ background:#f1f3f5; color:var(--muted); }

.tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
.tile{ background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:14px 16px; }
.tile-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
.tile-value{ font-size:26px; font-weight:700; letter-spacing:-.02em; margin-top:4px; color:var(--text); font-variant-numeric:tabular-nums; }
.tile-sub{ font-size:12px; color:var(--muted); margin-top:2px; min-height:1em; }
.tiles-compact{ margin-bottom:14px; }
.tiles-compact .tile{ padding:10px 14px; }
.tiles-compact .tile-value{ font-size:20px; }

/* Dagverloop */
.filter-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.filter-row input[type=date]{ font-family:inherit; font-size:13px; padding:5px 8px; border:1px solid var(--border); border-radius:6px; }
.day-title{ font-size:16px; margin:0 0 0 8px; color:var(--primary-dark); }

.legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--text); }
.legend-item{ display:inline-flex; align-items:center; gap:6px; }
.legend-line{ display:inline-block; width:16px; height:2px; border-radius:1px; }

.chart{ position:relative; width:100%; min-height:300px; }
.chart svg{ display:block; overflow:visible; }
.chart-empty{ padding:40px 0; text-align:center; }
.grid-line{ stroke:var(--border); stroke-width:1; }
.axis-zero{ stroke:var(--muted); stroke-width:1; }
.axis-label{ font-size:11px; fill:var(--muted); font-variant-numeric:tabular-nums; }
.crosshair{ stroke:var(--muted); stroke-width:1; stroke-dasharray:3 3; }
.chart-tip{
  position:absolute; pointer-events:none; background:var(--card-bg); border:1px solid var(--border);
  border-radius:6px; padding:8px 10px; font-size:12px; box-shadow:0 4px 14px rgba(0,0,0,.08); min-width:170px;
}
.chart-tip-time{ font-weight:700; margin-bottom:4px; }
.chart-tip-row{ display:flex; align-items:center; gap:8px; line-height:1.7; font-variant-numeric:tabular-nums; }
.chart-tip-key{ display:inline-block; width:12px; height:2px; border-radius:1px; }

.table-view{ margin-top:12px; }
.table-view summary{ cursor:pointer; font-size:12px; color:var(--muted); }
.table-view table{ margin-top:8px; }
td.num, th.num{ text-align:right; font-variant-numeric:tabular-nums; }

/* Export */
.export label{ display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:4px; }
.export select, .export input[type=date]{ font-family:inherit; font-size:13px; padding:7px 10px; border:1px solid var(--border); border-radius:6px; background:#fff; }
.export .formats{ border:none; padding:0; margin:14px 0; }
.export .formats legend{ font-size:12px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.export .formats label{ font-size:13px; font-weight:400; color:var(--text); display:flex; gap:6px; align-items:center; margin-bottom:4px; }
.hint{ font-size:12px; margin-top:12px; }

@media (max-width:600px){
  main{ padding:16px; }
  .tile-value{ font-size:22px; }
}