/* Overzicht — teletekst. Zwarte grond, kleurbanden met vaste paginanummers, Bedstead voor nummers en koppen.
   Rood betekent kapot en niets anders. Drie lettergroottes. Geen kaarten, geen schaduwen, vierkante hoeken. */

@font-face { font-family: "Bedstead"; src: url("/static/fonts/bedstead.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Bedstead"; src: url("/static/fonts/bedstead-bold.woff2") format("woff2"); font-weight: 700; font-display: block; }

:root {
  color-scheme: dark;
  --grond: #05070c; --vlak: #0c1120; --regel: #1b2234; --regel-sterk: #2c3650;
  --inkt: #f2f4f8; --zacht: #b4bccb; --stil: #8d97aa;
  --rood: #ff4b4b; --groen: #3ee06e; --geel: #ffe03a; --cyaan: #33e1ff; --magenta: #ff5ad9; --blauw: #2b4fe0; --wit: #f2f4f8;
  --tt: "Bedstead", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --t1: .8125rem; --t2: .9375rem; --t3: 1.25rem;
  --band: 2.25rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--regel-sterk) var(--grond); scroll-padding-top: 3.75rem; }
body { margin: 0; background: var(--grond); color: var(--inkt); font: var(--t2)/1.5 var(--sans); font-variant-numeric: tabular-nums;
  caret-color: var(--geel); padding-bottom: 3.5rem; }
::selection { background: var(--geel); color: var(--grond); }
a { color: var(--cyaan); text-decoration: none; text-underline-offset: .2em; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--geel); outline-offset: 2px; }
p { margin: 0 0 .75rem; text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
code { font: .875em/1.4 ui-monospace, "SF Mono", Menlo, monospace; background: var(--vlak); padding: .05rem .3rem; }
strong { font-weight: 650; }
.stil { color: var(--stil); }
.fout { color: var(--rood); }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- kopregel (zoals de eerste regel van teletekst) */
.kop { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: .25rem 1.5rem;
  padding: 0 1.25rem; min-height: 3rem; background: var(--grond); border-bottom: 1px solid var(--regel-sterk); }
.merk { display: inline-flex; align-items: baseline; gap: .6rem; color: var(--inkt); font: 700 var(--t3)/1 var(--tt); }
.merk:hover { text-decoration: none; }
.pnr { color: var(--geel); min-width: 4ch; }
.tabs { display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: baseline; gap: .4rem; padding: .45rem .6rem; color: var(--zacht); white-space: nowrap;
  border-bottom: 3px solid transparent; transition: color .15s ease-out, border-color .15s ease-out; }
.tab .nr { font: 400 var(--t1)/1 var(--tt); color: var(--stil); }
.tab:hover { color: var(--inkt); text-decoration: none; }
.tab.actief { color: var(--inkt); border-bottom-color: currentColor; }
.tab.actief.wit { border-bottom-color: var(--wit); } .tab.actief.cyaan { border-bottom-color: var(--cyaan); }
.tab.actief.groen { border-bottom-color: var(--groen); } .tab.actief.magenta { border-bottom-color: var(--magenta); }
.tab.actief.blauw { border-bottom-color: #6f8cff; }
.tab.actief .nr { color: var(--geel); }
.rechts { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.rechts form { margin: 0; }
.bijgewerkt { color: var(--stil); font-size: var(--t1); white-space: nowrap; }

button { font: 700 var(--t1)/1 var(--tt); letter-spacing: .02em; color: var(--grond); background: var(--wit); border: 0;
  padding: .55rem .8rem; cursor: pointer; transition: background .15s ease-out; }
button:hover { background: var(--geel); }
button:active { transform: translateY(1px); }
button.stil-knop { background: transparent; color: var(--zacht); box-shadow: inset 0 0 0 1px var(--regel-sterk); }
button.stil-knop:hover { color: var(--inkt); background: var(--vlak); }

main { width: min(78rem, 100% - 2.5rem); margin: 1.5rem auto 2rem; }

/* ---------- kleurbanden */
.band { display: flex; align-items: center; gap: .9rem; min-height: var(--band); margin: 0 0 .25rem; padding: .3rem .75rem;
  font: 700 var(--t3)/1.1 var(--tt); color: var(--grond); background: var(--wit); }
.band .nr { font-weight: 400; }
.band { flex-wrap: wrap; row-gap: .15rem; }
.band .titel { min-width: 0; overflow-wrap: break-word; }
.band .titel .stil { color: inherit; opacity: .7; }
.band-rechts { margin-left: auto; font-weight: 400; font-size: var(--t2); text-align: right; }
.band.rood { background: var(--rood); } .band.groen { background: var(--groen); } .band.geel { background: var(--geel); }
.band.cyaan { background: var(--cyaan); } .band.magenta { background: var(--magenta); } .band.wit { background: var(--wit); }
.band.blauw { background: var(--blauw); color: #fff; }
main > section + section, .home + section { margin-top: 2rem; }
h2.sub { font: 700 var(--t2)/1.3 var(--tt); text-transform: uppercase; letter-spacing: .02em; margin: 2rem 0 .5rem;
  padding-bottom: .4rem; border-bottom: 1px solid var(--regel-sterk); }
h2.sub .stil { font: 400 var(--t1)/1.4 var(--sans); text-transform: none; letter-spacing: 0; margin-left: .5rem; }

/* ---------- labels (toestand) */
.label { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 6.5rem; padding: .25rem .45rem;
  font: 700 var(--t1)/1 var(--tt); text-transform: uppercase; letter-spacing: .02em; color: var(--stil);
  box-shadow: inset 0 0 0 1px currentColor; white-space: nowrap; }
.label.rood { color: var(--rood); } .label.groen { color: var(--groen); } .label.geel { color: var(--geel); } .label.stil { color: var(--stil); }
.melding-rij .label.rood, .melding .label.rood { color: var(--grond); background: var(--rood); box-shadow: none; }
.label.letop { color: var(--inkt); }
.label-tekst { color: var(--inkt); text-decoration: underline dotted var(--stil); text-underline-offset: .25em; }

/* ---------- rijen (geen kaarten: regels) */
.rijen { list-style: none; margin: 0; padding: 0; }
.rijen > li { border-bottom: 1px solid var(--regel); }
.rij { display: grid; align-items: center; gap: .3rem 1rem; padding: .6rem .75rem; color: var(--inkt); }
a.rij:hover { background: var(--vlak); text-decoration: none; }
a.rij:hover .plek { color: var(--cyaan); }
.rij.gesprek { grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr) 9rem 7.5rem; }
.rijen .rij.gesprek:not(:has(.label)) { grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr) 7.5rem; }
.rij.gesprek .label { justify-self: stretch; }
.rij.gesprek.gestapeld { grid-template-columns: minmax(0, 1fr) 9rem 7.5rem; }
.rijen .rij.gesprek.gestapeld:not(:has(.label)) { grid-template-columns: minmax(0, 1fr) auto; }
.rij.gesprek.gestapeld .vraag { grid-column: 1 / -1; grid-row: 2; white-space: normal; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.plek { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vraag { color: var(--zacht); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tijd { color: var(--stil); font-size: var(--t1); white-space: nowrap; text-align: right; }
.rij.melding-rij { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
.melding-rij .inhoud p { margin: 0; }
.melding-rij .eind { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.naar { font-size: var(--t1); white-space: nowrap; }
.rij.status { grid-template-columns: minmax(0, 1fr) auto; }
.rij.status .wat { color: var(--zacht); }
.cijfer { font: 700 var(--t3)/1.1 var(--tt); color: var(--inkt); text-align: right; }
.rij.status .cijfer { font-size: var(--t2); }
.cijfer.groen { color: var(--groen); } .cijfer.rood { color: var(--rood); }
.cijfer.groot { font-size: var(--t3); margin-right: .35rem; }
.rij.taak { display: block; }
.rij.site { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
.niets { display: flex; align-items: center; gap: .75rem; padding: .75rem; margin: 0; color: var(--zacht); border-bottom: 1px solid var(--regel); }
.meer { margin: .6rem .75rem 0; font-size: var(--t1); }
.leeg { color: var(--zacht); padding: .75rem; }
.uitleg { color: var(--zacht); font-size: var(--t1); margin: .6rem 0 1rem; max-width: 75ch; }

details.klap { margin: .4rem 0; }
details.klap > summary { cursor: pointer; color: var(--cyaan); font-size: var(--t1); width: fit-content; }
details.klap > summary:hover { text-decoration: underline; }
details.klap.ingekort { margin: 0; }
details.klap.ingekort > summary { list-style: none; color: var(--inkt); font-size: inherit; width: auto; }
details.klap.ingekort > summary::-webkit-details-marker { display: none; }
details.klap.ingekort > summary::after { content: " meer"; color: var(--cyaan); font-size: var(--t1); }
details.klap.ingekort[open] > summary { display: none; }
details.klap.ingekort > p { margin: 0; }

/* ---------- home: twee kolommen */
.home { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.hoofd, .zij { display: grid; gap: 2rem; }
.hoofd section + section, .zij section + section { margin-top: 0; }
.teller { font: 400 var(--t2)/1 var(--tt); }

/* ---------- gesprekken */
.filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 .75rem; }
.filter { font: 700 var(--t1)/1 var(--tt); text-transform: uppercase; color: var(--zacht); padding: .5rem .7rem;
  box-shadow: inset 0 0 0 1px var(--regel-sterk); }
.filter span { font-weight: 400; color: var(--stil); margin-left: .25rem; }
.filter:hover { color: var(--inkt); text-decoration: none; background: var(--vlak); }
.filter.actief { color: var(--grond); background: var(--cyaan); box-shadow: none; }
.filter.actief span { color: var(--grond); }
.zoek { width: 100%; font: inherit; color: var(--inkt); background: var(--vlak); border: 1px solid var(--regel-sterk); border-radius: 0;
  padding: .65rem .8rem; margin: 0 0 .25rem; }
.zoek::placeholder { color: var(--stil); }
.zoek:focus { outline: 2px solid var(--geel); outline-offset: 0; border-color: transparent; }
.rijen li.verborgen, .beurt.verborgen { display: none; }
.terug { margin: 0 0 .75rem; font-size: var(--t1); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; color: var(--zacht); font-size: var(--t1); margin: .75rem 0 1rem; }

.beurt { padding: 1.1rem 0 1.25rem; border-bottom: 1px solid var(--regel-sterk); }
.beurt-kop { display: flex; align-items: center; gap: .6rem; margin: .9rem 0 .4rem; }
.beurt-kop:first-child { margin-top: 0; }
.beurt-kop .tijd { margin-left: auto; }
.wie { font: 700 var(--t1)/1 var(--tt); text-transform: uppercase; letter-spacing: .02em; }
.wie.geel { color: var(--geel); } .wie.cyaan { color: var(--cyaan); }
.gereedschap-rij { display: flex; flex-wrap: wrap; gap: .3rem; }
.gereedschap { font-size: var(--t1); color: var(--stil); box-shadow: inset 0 0 0 1px var(--regel-sterk); padding: .05rem .4rem; }
.tekst { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 80ch; }
.vraagtekst { background: var(--vlak); padding: .65rem .8rem; max-width: calc(80ch + 1.6rem); }
.tussen { border-top: 1px dashed var(--regel-sterk); padding-top: .5rem; margin: .5rem 0; color: var(--zacht); }

/* ---------- gesprekken: inbox (kanalen links, gesprekken rechts) */
.inbox { display: grid; grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr); gap: 2rem; align-items: start; margin-top: .5rem; }
.inbox h2.sub { margin-top: .75rem; }
.inbox-kanalen { position: sticky; top: 3.75rem; max-height: calc(100vh - 8rem); overflow-y: auto; scrollbar-width: thin; }
.rij.kanaal { grid-template-columns: minmax(0, 1fr) auto; }
.rij.kanaal.actief { background: var(--vlak); box-shadow: inset 3px 0 0 var(--cyaan); }
.rij.kanaal.actief .plek { color: var(--cyaan); }
.wacht-teller { color: var(--geel); font-weight: 650; }
.inbox-lijst .filters { margin: .6rem 0; }
.inbox-terug { display: none; }

/* ---------- projecten */
.bord { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 1.5rem; }
.kolom h3 { font: 700 var(--t1)/1 var(--tt); text-transform: uppercase; letter-spacing: .02em; color: var(--zacht);
  margin: .75rem 0 0; padding: .5rem 0; border-bottom: 1px solid var(--regel-sterk); }
.kolom ul { list-style: none; margin: 0; padding: 0; }
.kolom li { padding: .5rem 0; border-bottom: 1px solid var(--regel); }
.tag { font-size: var(--t1); color: var(--stil); box-shadow: inset 0 0 0 1px var(--regel-sterk); padding: 0 .35rem; margin-left: .25rem; white-space: nowrap; }

/* ---------- kosten */
.blokken { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 0 2rem; }
.blok { padding: 1rem 0 .5rem; border-bottom: 1px solid var(--regel-sterk); min-width: 0; }
.blok.breed { grid-column: 1 / -1; }
.blok h2 { font: 700 var(--t2)/1.3 var(--tt); text-transform: uppercase; letter-spacing: .02em; color: var(--magenta); margin: 0 0 .6rem; }
.blok > .rijen { margin-top: .25rem; }

/* ---------- tabellen */
.scroll { overflow-x: auto; margin: .25rem 0 .5rem; }
table { width: 100%; border-collapse: collapse; font-size: var(--t2); }
th { text-align: left; font: 700 var(--t1)/1.2 var(--tt); text-transform: uppercase; letter-spacing: .02em; color: var(--zacht);
  padding: .55rem .6rem; border-bottom: 1px solid var(--regel-sterk); white-space: nowrap; }
td { padding: .55rem .6rem; border-bottom: 1px solid var(--regel); vertical-align: top; }
td.getal { text-align: right; }
td.nowrap { white-space: nowrap; }
tbody tr:hover td { background: var(--vlak); }

/* ---------- meldingen bovenaan */
.melding { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; margin: 0 0 1rem; background: var(--vlak); }

/* ---------- inloggen */
.inlog { width: min(24rem, 100%); margin: 4rem auto; }
.inlog form { display: grid; gap: .6rem; margin-top: 1rem; }
.inlog label { font: 700 var(--t1)/1 var(--tt); text-transform: uppercase; color: var(--zacht); }
.inlog input { font: inherit; color: var(--inkt); background: var(--vlak); border: 1px solid var(--regel-sterk); border-radius: 0; padding: .7rem .8rem; }
.inlog button { padding: .8rem; font-size: var(--t2); }

/* ---------- fastext: vier gekleurde snelknoppen onderaan */
.fastext { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--grond); border-top: 1px solid var(--regel-sterk); padding: .35rem; gap: .35rem;
  padding-bottom: max(.35rem, env(safe-area-inset-bottom)); }
.fastext a { display: flex; align-items: center; justify-content: center; min-height: 2.25rem; padding: 0 .5rem;
  font: 700 var(--t1)/1 var(--tt); text-transform: uppercase; letter-spacing: .02em; color: var(--grond); text-align: center; }
.fastext a:hover { text-decoration: none; filter: brightness(1.12); }
.fastext .rood { background: var(--rood); } .fastext .groen { background: var(--groen); }
.fastext .geel { background: var(--geel); } .fastext .cyaan { background: var(--cyaan); }
.fastext .neutraal { background: var(--vlak); color: var(--zacht); box-shadow: inset 0 0 0 1px var(--regel-sterk); }

/* paginanummer typen: de kop laat zien wat je intikt */
.pnr.typt { color: var(--grond); background: var(--geel); padding: 0 .2rem; }

@media (max-width: 60rem) {
  .home { grid-template-columns: 1fr; }
  .inbox { grid-template-columns: 1fr; gap: 0; }
  .inbox-kanalen { position: static; max-height: none; overflow: visible; }
  .inbox[data-focus="kanalen"] .inbox-lijst, .inbox[data-focus="lijst"] .inbox-kanalen { display: none; }
  .inbox-terug { display: block; margin: .75rem 0 0; }
}
@media (max-width: 40rem) {
  .kop { flex-wrap: wrap; padding: .5rem .9rem 0; gap: .4rem .75rem; position: static; }
  .rechts { margin-left: auto; }
  .bijgewerkt { display: none; }
  .tabs { order: 3; width: calc(100% + 1.8rem); margin: 0 -.9rem; padding: 0 .5rem; border-top: 1px solid var(--regel); }
  main { width: calc(100% - 1.5rem); margin-top: 1rem; }
  .band { font-size: 1.0625rem; padding: .3rem .6rem; gap: .6rem; }
  .rij { padding: .6rem .5rem; }
  .rij.gesprek, .rijen .rij.gesprek:not(:has(.label)) { grid-template-columns: minmax(0, 1fr) auto; }
  .rij.gesprek .vraag { grid-column: 1 / -1; grid-row: 2; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; }
  .rij.gesprek .label { grid-row: 3; justify-self: start; min-width: 0; }
  .rij.gesprek .tijd { grid-column: 2; grid-row: 1; }
  .rij.melding-rij, .rij.site { grid-template-columns: 1fr; }
  .melding-rij .eind { flex-direction: row; justify-content: space-between; }
  .rij.site .tijd { text-align: left; }
  .label { min-width: 0; justify-self: start; }
  .fastext a { font-size: var(--t1); letter-spacing: 0; }
  .rij.gesprek.gestapeld { grid-template-columns: minmax(0, 1fr) auto; }
  .zoek, .inlog input { font-size: 1rem; }
  .naar, .meer a, details.klap > summary { display: inline-block; padding: .6rem 0; }
  details.klap.ingekort > summary { display: block; padding: 0; }
  .rechts button { min-height: 2.75rem; padding: .55rem .6rem; }
  .merk { font-size: 1.0625rem; }
  .scroll table, .scroll tbody, .scroll tr, .scroll td { display: block; }
  .scroll thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .scroll tr { padding: .6rem 0; border-bottom: 1px solid var(--regel); }
  .scroll td { border: 0; padding: .15rem 0; text-align: left; }
  .scroll td.getal { text-align: left; }
  .scroll td[data-label]::before { content: attr(data-label) ": "; color: var(--stil); font-size: var(--t1); }
  tbody tr:hover td { background: none; }
  .fastext .opjou { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }