/* public/schermen/werkruimte/tv.css — het TV-dashboard: één vast scherm van 1920×1080 (ontwerp: docs/ontwerp/tv/01-tv.html, spec.md).
   Maten, letters en kleuren zijn die van het goedgekeurde ontwerp; kleuren komen uit de variabelen van de huid (basis.css), nooit als hexwaarde. Alles staat onder .tv-dash. */
.tv-view{position:fixed;inset:0;background:var(--bg);overflow:hidden}
.tv-view:not(.active){display:none}
.tv-stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0}
.tv-dash{width:1920px;height:1080px;position:relative;padding:40px 44px 36px;display:grid;grid-template-rows:300px minmax(0,1fr) 200px;gap:20px;font-size:19px;overflow:hidden;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--tekst);line-height:1.45;-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
.tv-dash *{box-sizing:border-box}
.tv-dash b{font-weight:600}

/* bovenbalk: verborgen tot de muis naar boven beweegt */
.tv-topbar{position:absolute;left:0;right:0;top:0;height:60px;z-index:5;box-shadow:0 6px 20px rgba(17,24,39,.08);background:var(--vlak);border-bottom:1px solid var(--rand);display:flex;align-items:center;gap:22px;padding:0 44px;font-size:17px;color:var(--grijs);transform:translateY(-100%);transition:transform .25s}
.tv-topbar.toon{transform:none}
.tv-topbar.huid{background:var(--vlak);font-size:17px;line-height:1.45}   /* .huid is alleen voor de knop (.huid .knop); de balk houdt zijn eigen vlak en lettergrootte */
.tv-topbar b{color:var(--tekst)}
.tv-topbar .tv-chip{font-size:14px}

/* kaarten en chips */
.tv-kaart{background:var(--vlak);border:1px solid var(--rand);border-radius:16px;padding:22px 26px;display:flex;flex-direction:column;gap:12px;min-height:0}
.tv-t{font-size:21px;white-space:nowrap;font-weight:600;display:flex;justify-content:space-between;align-items:baseline}
.tv-t span{font-size:16px;color:var(--grijs);font-weight:500}
.tv-k{font-size:16px;color:var(--grijs)}
.tv-chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border-radius:8px;padding:3px 10px;font-weight:600;font-size:17px;font-variant-numeric:tabular-nums}
.tv-chip.op{background:var(--groen-100);color:var(--groen-900)}.tv-chip.neer{background:var(--koraal-100);color:var(--koraal-900)}.tv-chip.gelijk{background:var(--grijs-300);color:var(--grijs-900)}
.tv-kan{flex:none;display:block;object-fit:contain}

/* band */
.tv-band{flex-direction:row;gap:28px;padding:22px 28px}
.tv-band-links{width:500px;flex:none;display:flex;flex-direction:column;justify-content:space-between}
.tv-band-label{font-size:18px;color:var(--grijs)}
.tv-band-bedrag{font-size:58px;font-weight:600;letter-spacing:-.035em;line-height:1;margin:4px 0 8px;font-variant-numeric:tabular-nums}
.tv-band-chip{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--grijs)}
.tv-vier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-top:14px;border-top:1px solid var(--lijn)}
.tv-vier>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.tv-vier .tv-vl{font-size:14px;color:var(--grijs);white-space:nowrap}
.tv-vier .tv-vg{font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.tv-vier .tv-chip{font-size:13px;padding:0 6px}
.tv-band-rechts{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.tv-voorop{display:flex;align-items:baseline;gap:16px;white-space:nowrap}
.tv-voorop .tv-resultaat{font-size:24px;font-weight:600;letter-spacing:-.02em}
.tv-voorop .tv-resultaat.op{color:var(--groen-900)}.tv-voorop .tv-resultaat.neer{color:var(--koraal-900)}
.tv-voorop .tv-k{font-size:16px}
.tv-grafiek{flex:1;min-height:0}
.tv-grafiek svg{width:100%;height:100%}
.tv-leg{display:flex;gap:22px;font-size:16px;white-space:nowrap;color:var(--grijs);align-items:center}
.tv-leg i{display:inline-block;width:22px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}

/* midden: tegels links, lijsten rechts */
.tv-mid{display:grid;grid-template-columns:1fr 1fr;gap:20px;min-height:0}
.tv-tegels{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:20px;min-height:0}
.tv-tegels.n2{grid-template-rows:1fr}                                       /* twee winkels: twee tegels over de volle hoogte */
.tv-tegels.n1{grid-template-columns:1fr;grid-template-rows:1fr}
.tv-tegels.n3>.tv-tegel:nth-child(3){grid-column:1 / -1}
.tv-tegel{background:var(--vlak);border:1px solid var(--rand);border-radius:16px;padding:16px 22px;display:flex;flex-direction:column;gap:4px;min-height:0;justify-content:flex-start;min-width:0}
.tv-tegel-kop{font-size:19px;color:var(--grijs);font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:10px}
.tv-tegel-kop>span:first-child{display:flex;align-items:center;gap:10px;min-width:0}
.tv-tegel-kop b{color:var(--tekst);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-tegel-kop .tv-chip{font-size:15px;padding:1px 8px}
.tv-tegel-bedrag{display:flex;align-items:baseline;gap:12px}
.tv-tegel-bedrag .tv-g{font-size:40px;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.tv-tegel-bedrag .tv-k{font-size:15px}
.tv-tegel-lijn{flex:1;min-height:0;display:flex;align-items:flex-end}
.tv-tegel-lijn svg{width:100%;height:auto;max-height:100%}
.tv-lijsten{display:grid;grid-template-columns:1fr 1fr;gap:20px;min-height:0}
.tv-rij{display:grid;align-items:center;gap:14px;padding:7px 0;border-top:1px solid var(--lijn);font-size:20px}
.tv-rij:first-of-type{border-top:0}
.tv-rij>div{min-width:0}.tv-rij .tv-n{font-weight:600}.tv-rij .tv-r{text-align:right;font-variant-numeric:tabular-nums}.tv-rij .tv-k{font-size:14px}
.tv-best{grid-template-columns:22px 48px minmax(0,1fr) 62px}
.tv-order{grid-template-columns:48px minmax(0,1fr) 46px 42px 76px;gap:8px}
.tv-naam{font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-sub{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--grijs)}
.tv-foto{width:48px;height:48px;border-radius:10px;background:var(--grijs-100);border:1px solid var(--lijn);display:flex;align-items:center;justify-content:center;color:var(--grijs-300);overflow:hidden}
.tv-foto img{width:100%;height:100%;object-fit:contain;background:var(--vlak)}
.tv-order .tv-foto{border-radius:8px}
.tv-kanaalcel{display:flex;justify-content:center}
.tv-tijd{font-size:15px;white-space:nowrap}
.tv-naam2{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25;font-size:16px}
.tv-topbar .tv-merk{height:28px;width:auto;display:block}
.tv-topbar .knop{height:34px;font-size:15px}
.tv-stuks{font-size:22px;font-weight:600;white-space:nowrap}
.tv-stuks span{font-size:13px;color:var(--grijs);font-weight:500}
.tv-bedrag{font-size:18px;font-weight:600}
.tv-leeg{color:var(--grijs);font-size:17px;padding:14px 0}

/* week en voet */
.tv-week .tv-grafiek{flex:1;min-height:0}
.tv-voet{position:absolute;right:44px;bottom:10px;font-size:15px;color:var(--grijs)}
.tv-voet .tv-rood{color:var(--koraal-900);font-weight:600}
.tv-leg i.a{background:var(--blauw-900);height:5px}
.tv-leg i.b{height:0;border-top:3px dashed var(--blauw-500);background:none}
.tv-leg i.c{background:var(--blauw-300);height:2px}