:root {
  color-scheme: light dark;
  --rand: #d4d4d8;
  --vlak: #ffffff;
  --achtergrond: #f4f4f5;
  --tekst: #18181b;
  --zacht: #71717a;
  --blauw: #1d4ed8;
  --groen: #15803d;
  --rood: #b91c1c;
  --oranje: #b45309;
}
@media (prefers-color-scheme: dark) {
  :root {
    --rand: #3f3f46; --vlak: #18181b; --achtergrond: #09090b; --tekst: #f4f4f5;
    --zacht: #a1a1aa; --blauw: #60a5fa; --groen: #4ade80; --rood: #f87171; --oranje: #fbbf24;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--achtergrond); color: var(--tekst);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--blauw); }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; }

.kop {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1.25rem; background: var(--vlak); border-bottom: 1px solid var(--rand);
  position: sticky; top: 0; z-index: 10;
}
.kop .merk { font-weight: 700; }

/**
 * De omgeving, altijd in beeld.
 *
 * Twee instanties naast elkaar in twee tabbladen zien er verder identiek uit, en
 * de handelingen in dit paneel (opnieuw importeren, exporteren, een tenant
 * verwijderen) horen niet per ongeluk op de verkeerde te landen. Productie krijgt
 * daarom een gevulde rode balk over de volle breedte van de kop, stage een
 * rustige grijze chip: het verschil moet uit een ooghoek te zien zijn, niet uit
 * het lezen van een woord.
 */
.kop .omgeving {
  padding: .15rem .6rem; border-radius: .4rem; font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--rand);
  color: var(--zacht);
}
.kop .omgeving.productie { background: var(--rood); border-color: var(--rood); color: #fff; }
body.productie .kop { border-bottom: 3px solid var(--rood); }
.kop nav { display: flex; gap: .25rem; margin-left: auto; align-items: center; }
.kop nav a {
  padding: .35rem .7rem; border-radius: .4rem; text-decoration: none; color: var(--tekst);
}
.kop nav a.actief { background: var(--blauw); color: #fff; }

main { max-width: 78rem; margin: 0 auto; padding: 1.25rem; }
h1 { font-size: 1.35rem; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; margin: 1.75rem 0 .75rem; }

.rooster { display: grid; gap: .875rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.kaart {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: .6rem; padding: .9rem 1rem;
}
.kaart h3 { margin: 0 0 .6rem; font-size: .8rem; text-transform: uppercase;
            letter-spacing: .04em; color: var(--zacht); }
.kaart.breed { grid-column: 1 / -1; }

dl.velden { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .9rem; margin: 0; }
dl.velden dt { color: var(--zacht); }
dl.velden dd { margin: 0; overflow-wrap: anywhere; }

.chip {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; border: 1px solid var(--rand);
}
.chip.ok { color: var(--groen); border-color: currentColor; }
.chip.fout { color: var(--rood); border-color: currentColor; }
.chip.let-op { color: var(--oranje); border-color: currentColor; }
.zacht { color: var(--zacht); }
.fout { color: var(--rood); }
.ok { color: var(--groen); }

button, .knop {
  font: inherit; padding: .45rem .85rem; border-radius: .45rem; border: 1px solid var(--rand);
  background: var(--vlak); color: var(--tekst); cursor: pointer; text-decoration: none;
  display: inline-block;
}
button:hover, .knop:hover { border-color: var(--blauw); }
button.primair, .knop.primair { background: var(--blauw); color: #fff; border-color: var(--blauw); }
/* Een knop die iets onomkeerbaars doet, hoort er niet uit te zien als de rest. */
button[data-bevestig] { border-color: var(--rood); color: var(--rood); }
button[data-bevestig]:hover { background: var(--rood); color: #fff; }
button:disabled { opacity: .55; cursor: default; }
.knoppen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

input, select {
  font: inherit; padding: .4rem .55rem; border-radius: .45rem;
  border: 1px solid var(--rand); background: var(--vlak); color: var(--tekst);
}

table { width: 100%; border-collapse: collapse; background: var(--vlak); }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--zacht); }
tbody tr:hover { background: color-mix(in srgb, var(--blauw) 7%, transparent); }
.tabelvak { border: 1px solid var(--rand); border-radius: .6rem; overflow: hidden; }

.url-regel { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.url-regel code {
  flex: 1; min-width: 16rem; padding: .45rem .6rem; background: var(--achtergrond);
  border: 1px solid var(--rand); border-radius: .45rem; overflow-wrap: anywhere;
}

#log {
  height: 21rem; overflow-y: auto; background: #0b0b0d; color: #e4e4e7;
  border-radius: .5rem; padding: .6rem .75rem; font-family: ui-monospace, Menlo, monospace;
  font-size: .8rem; line-height: 1.45;
}
#log .regel { display: flex; gap: .55rem; padding: .05rem 0; }
#log .tijd { color: #71717a; flex: none; }
#log .comp { color: #818cf8; flex: none; }
#log .msg { overflow-wrap: anywhere; }
#log .extra { color: #a1a1aa; }
#log .niveau-error .msg, #log .niveau-error .extra { color: #fca5a5; }
#log .niveau-warn .msg { color: #fcd34d; }
#log .niveau-debug { opacity: .65; }

.uitkomst {
  margin-top: .75rem; padding: .6rem .75rem; border-radius: .45rem;
  border: 1px solid var(--rand); background: var(--achtergrond);
  white-space: pre-wrap; font-family: ui-monospace, Menlo, monospace; font-size: .8rem;
  max-height: 16rem; overflow: auto;
}
.uitkomst:empty { display: none; }
.uitkomst.fout { border-color: var(--rood); color: var(--rood); }

details.ruw { margin-top: 1rem; }
details.ruw pre {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: .5rem;
  padding: .75rem; overflow: auto; max-height: 30rem; font-size: .8rem;
}
.melding {
  padding: .7rem .9rem; border-radius: .5rem; border: 1px solid var(--oranje);
  color: var(--oranje); margin-bottom: 1rem;
}
.melding.fout-melding { border-color: var(--rood); color: var(--rood); }
.melding ul { margin: .4rem 0 .6rem; }
.melding li { margin: .15rem 0; }
.leeg { padding: 2rem; text-align: center; color: var(--zacht); }
.inlog { max-width: 24rem; margin: 4rem auto; }
.inlog form { display: flex; flex-direction: column; gap: .75rem; }