/* Topdekzeilen - one small stylesheet, no framework, no external requests.
   Everything is served from this server, so the app also works on a machine
   that cannot reach a CDN. */

:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #16191d;
  --muted: #5b6470;
  --line: #dfe3e8;
  --accent: #14506e;
  --ok-bg: #e8f5ec; --ok-ink: #14663a; --ok-line: #b6ddc4;
  --warn-bg: #fdf3e0; --warn-ink: #7a4d06; --warn-line: #efd6a6;
  --err-bg: #fdecec; --err-ink: #8a1f1f; --err-line: #f0c2c2;
  --info-bg: #e9f1f8; --info-ink: #1c4f74; --info-line: #c0d8ea;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* De inhoud volgt de breedte van het scherm. Een vaste kolom van duizend
   pixels laat op een breed scherm de helft ongebruikt, terwijl juist de
   tabellen en grafieken die ruimte nodig hebben. De bovengrens houdt de
   leesbaarheid vast op een zeer breed scherm; formulieren blijven smal. */
main {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 24px clamp(16px, 3vw, 40px) 64px;
}
main > p:not(.versie), main > .card > p.muted { max-width: 90ch; }

h1 { font-size: 1.6rem; margin: 0 0 6px; }
h2 { font-size: 1.1rem; margin: 0 0 14px; }
p { margin: 0 0 14px; }
code { background: #eceff3; padding: 1px 5px; border-radius: 3px; font-size: 0.9em; }
.muted { color: var(--muted); font-size: 0.92rem; }

/* --- top bar --- */
.topbar {
  display: flex; align-items: center;
  gap: 16px; flex-wrap: wrap;
  background: var(--accent); color: #fff; padding: 12px clamp(16px, 3vw, 40px);
}
/* De rapporten sluiten links aan op de naam; beheer wordt naar rechts
   geduwd. Zo staat wat je dagelijks bekijkt gescheiden van wat je instelt. */
.topbar nav.rapporten { margin-right: auto; }
.topbar nav.beheer { margin-left: auto; }
.topbar nav.beheer a, .topbar nav.beheer .link { opacity: 0.88; }
.topbar nav.beheer a.current { opacity: 1; }
.brand { margin-right: 8px; }
.brand strong { font-size: 1.05rem; }
.brand span { display: block; font-size: 0.8rem; opacity: 0.8; }
.topbar nav { display: flex; align-items: center; gap: 6px; }
.topbar nav a, .topbar nav .link {
  color: #fff; text-decoration: none; padding: 6px 12px; border-radius: 5px;
  font-size: 0.92rem;
}
.topbar nav a:hover, .topbar nav .link:hover { background: rgba(255, 255, 255, 0.15); }
.topbar nav a.current { background: rgba(255, 255, 255, 0.22); font-weight: 600; }
.inline { display: inline; margin: 0; }
.link { background: none; border: 0; cursor: pointer; font: inherit; }

/* --- panels --- */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 20px; margin: 0 0 18px;
}
.card.narrow { max-width: 420px; margin: 48px auto; }
details.card > summary { cursor: pointer; font-weight: 600; }
details.card[open] > summary { margin-bottom: 16px; }
fieldset.sub { border: 0; padding: 12px 0 0; margin: 0; }

/* --- forms --- */
label { display: block; font-weight: 600; font-size: 0.88rem; margin: 0 0 4px; }
label.checkbox, .radios label { font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.radios { display: flex; gap: 20px; margin: 16px 0 4px; }
input[type="text"], input[type="password"], input[type="number"],
input[type="url"], input:not([type]) {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 5px; font: inherit; background: #fff; color: var(--ink);
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
small { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 4px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }

/* Een invoerrij die meeloopt met de breedte: op een breed scherm naast
   elkaar, op een telefoon onder elkaar. De knoppenrij pakt de volle breedte,
   anders komt hij naast het laatste veld te hangen. */
.veldenrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; margin: 0 0 8px; }
.veldenrij .actions { grid-column: 1 / -1; margin: 4px 0 0; }

/* Een totaalregel onder een tabel: hetzelfde lettertype als de koppen, met
   een streep erboven zodat hij niet als een gewone regel leest. */
/* De twee picklijstgroepen moeten op een half meter afstand uit elkaar te
   houden zijn: de een gaat de deur uit, de ander blijft staan. */
.card.groep-verzenden { border-left: 5px solid #14506e; }
.card.groep-inpakken { border-left: 5px solid #b4762a; }
.card.groep-inpakken h2 { color: #8a5a1f; }

table.data tr.totaal th { border-top: 2px solid var(--line); text-align: left; }

/* De downloadknop direct boven een tabel, en de uitklapknop eronder. Kleiner
   dan een gewone actieknop: dit is bediening van de tabel, geen actie. */
.actions.tabelkop { margin: 8px 0 6px; }
.actions.tabelkop .button { padding: 5px 12px; font-size: 0.86rem; }
button.uitklap { margin: 6px 0 16px; padding: 5px 12px; font-size: 0.86rem; }

/* Verklaren in de tabel zelf: compacte velden, geen blokmarge. */
form.verklaar { display: inline; margin: 0; }
table.data select, table.data input[type="text"] {
  font: inherit; font-size: 0.86rem; padding: 4px 6px; border: 1px solid var(--line);
  border-radius: 4px; background: #fff; min-width: 7rem;
}
table.data input.smal { min-width: 5rem; width: 7rem; }
table.data input.breed { min-width: 16rem; width: 100%; }
/* Een invulformulier in een tabel. table.data is een blok met een eigen
   schuifbalk, en zo'n blok krimpt tot zijn inhoud: een veld voor een hele zin
   toelichting blijft dan even smal als een veld voor een bedrag. Hier telt de
   breedte zwaarder dan de schuifbalk - er staan geen kolommen cijfers in die
   naast elkaar moeten blijven staan. */
table.data.vullend { display: table; table-layout: fixed; }
table.data.vullend td.wrap, table.data.vullend th.wrap { max-width: none; }
table.data.vullend th.wrap-smal { max-width: none; }
/* Vaste kolombreedtes: naam, soort en bedrag krijgen wat ze nodig hebben en de
   toelichting houdt de rest. Zonder dit verdeelt table-layout: fixed de
   breedte gelijk en staat er een veld van een halve pagina voor een bedrag
   naast een afgeknepen keuzelijst. */
table.data.vullend th:nth-child(1) { width: 22%; }
table.data.vullend th:nth-child(2) { width: 15rem; }
table.data.vullend th:nth-child(3) { width: 9rem; }
table.data.vullend select, table.data.vullend input[type="text"] {
  width: 100%; min-width: 0;
}
table.data tr.totaal th.num { text-align: right; }

button, .button {
  font: inherit; padding: 9px 18px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  text-decoration: none; display: inline-block;
}
button:hover, .button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { filter: brightness(1.12); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 18px; }
.actions form { margin: 0; }
form.standalone { margin: 0 0 18px; }

/* --- notices and diagnostics --- */
.notice {
  padding: 12px 16px; border-radius: 6px; margin: 0 0 16px;
  border: 1px solid transparent;
}
.notice.ok    { background: var(--ok-bg);   color: var(--ok-ink);   border-color: var(--ok-line); }
.notice.warn  { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.notice.error { background: var(--err-bg);  color: var(--err-ink);  border-color: var(--err-line); }
.notice.info  { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-line); }

.steps { list-style: none; padding: 0; margin: 0; }
.step {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 14px; border-radius: 6px; margin-bottom: 8px;
  border: 1px solid transparent;
}
.step .mark { font-weight: 700; width: 1.2em; flex: none; }
.step.ok    { background: var(--ok-bg);   color: var(--ok-ink);   border-color: var(--ok-line); }
.step.warn  { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.step.error { background: var(--err-bg);  color: var(--err-ink);  border-color: var(--err-line); }

/* --- the phase 0 report --- */
.report h1 { font-size: 1.4rem; }
.report h2 { font-size: 1.15rem; margin-top: 28px; border-top: 1px solid var(--line); padding-top: 18px; }
.report h3 { font-size: 1rem; margin-top: 20px; }
.report table { border-collapse: collapse; width: 100%; margin: 12px 0 18px; font-size: 0.88rem; }
.report th, .report td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; }
.report th { background: #eef1f5; }
.report tr:nth-child(even) td { background: #fafbfc; }
.report blockquote {
  margin: 16px 0; padding: 12px 16px; background: var(--info-bg);
  border-left: 4px solid var(--info-ink); color: var(--info-ink);
}
/* Wide tables scroll inside the panel instead of stretching the page. */
.report { overflow-x: auto; }

/* --- key/value tables on the stock page --- */
table.kv { border-collapse: collapse; margin: 0 0 16px; width: 100%; }
table.kv th, table.kv td {
  text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line);
  font-weight: 400;
}
table.kv th { color: var(--muted); width: 38%; font-weight: 600; }

/* --- row tables: the stock balance preview --- */
table.data {
  border-collapse: collapse; width: 100%; margin: 8px 0 16px; font-size: 0.86rem;
  display: block; overflow-x: auto;
}
table.data th, table.data td {
  border-bottom: 1px solid var(--line); padding: 6px 9px; text-align: left;
  white-space: nowrap;
}
/* Koppen lopen wel terug. Een kolomnaam mag lang zijn zonder dat hij de hele
   tabel meesleept - de cijfers eronder blijven op een regel, want die lezen
   alleen naast elkaar als ze niet afbreken. */
table.data th { white-space: normal; vertical-align: bottom; max-width: 7rem; }
table.data th { background: #eef1f5; font-weight: 600; }
/* Een kolom met lopende tekst erin. De rest van de tabel blijft op een regel -
   getallen naast elkaar lezen alleen als ze niet afbreken - maar een modelnaam
   maakt de kolom anders zo breed dat de rest uit beeld schuift. */
table.data th.wrap, table.data td.wrap {
  white-space: normal; min-width: 9rem; max-width: 16rem;
}
/* Een referentie breekt niet op een spatie - die zitten er niet in - dus moet
   hij middenin een woord mogen afbreken, anders blijft de kolom net zo breed. */
table.data td.wrap code { overflow-wrap: anywhere; }
/* Een korte code hoeft geen ruime kolom. */
/* Smal, maar niet zo smal dat een kop als "CHN model" tot een letter per
   regel wordt geknepen - dat is geen kolom meer maar een streepje tekst. */
table.data th.smal, table.data td.smal {
  max-width: 4.5rem; min-width: 3.5rem; overflow-wrap: anywhere;
}
table.data td.smal { white-space: normal; }
/* Een smallere variant van de teruglopende kolom, voor lijsten waar de tekst
   naast veel getallen staat en de breedte zwaarder weegt dan de leesbaarheid
   van een enkele naam. */
table.data th.wrap-smal, table.data td.wrap-smal {
  white-space: normal; min-width: 6rem; max-width: 12rem;
}
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }

input[type="file"] {
  width: 100%; padding: 8px 10px; border: 1px dashed var(--line);
  border-radius: 5px; background: #fff; font: inherit;
}

/* --- the revenue screen: stat tiles and charts --- */
.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin: 0 0 18px;
}
.tile {
  border: 1px solid var(--line); border-radius: 7px; padding: 12px 14px;
  background: #fbfcfd; display: flex; flex-direction: column; gap: 2px;
}
.tile .label { color: var(--muted); font-size: 0.82rem; }
.tile .figure { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile .delta { font-size: 0.82rem; color: var(--muted); }
.tile .delta.up { color: var(--ok-ink); }
.tile .delta.down { color: var(--err-ink); }

/* The chart is an SVG that scales with the panel; wide ones scroll. */
/* De grafiek schaalt mee met het paneel: hoogte uit de verhouding, niet uit
   een vast getal, zodat hij op een breed scherm groter wordt in plaats van
   uitgerekt. Onder de minimumbreedte schuift het paneel zelf. */
.chart { margin: 0 0 14px; overflow-x: auto; }
.chart svg { display: block; width: 100%; height: auto; min-width: 560px; }
table.data tr.total td { border-top: 2px solid var(--line); font-weight: 600; }

/* Het prijsvergelijk staat per SKU bij elkaar: een lijntje waar de volgende
   SKU begint, zodat je ziet welke regels over hetzelfde zeil gaan. */
table.data tr.blokstart td { border-top: 2px solid var(--line); }

/* De statusmatrix op het instellingenscherm: vier smalle vinkkolommen naast
   een brede statusnaam. De vinkjes iets groter dan standaard - dit is een
   scherm waar je met de muis snel een rij langsgaat en een misklik een jaar
   cijfers verschuift. */
table.data.matrix td.num { text-align: center; }
table.data.matrix input[type="checkbox"] { width: 18px; height: 18px; }
/* De koppen van de vinkkolommen mogen wel afbreken tussen woorden, maar niet
   middenin een woord: "Omzet gereali/seerd" is geen kop meer. */
table.data.matrix th.smal {
  white-space: normal; text-align: center;
  width: 7.5em; max-width: none; min-width: 6em; overflow-wrap: normal;
}
ul.uitleg { margin: 0 0 12px; padding-left: 18px; color: var(--muted); }
ul.uitleg li { margin: 2px 0; }

/* --- de verwachting voor het jaar, onder de tegels --- */
.verwachting {
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 7px; padding: 14px 16px; margin: 0 0 16px; background: #fbfcfd;
}
.verwachting .label { color: var(--muted); font-size: 0.82rem; display: block; }
.verwachting .figure {
  font-size: 1.9rem; font-weight: 600; font-variant-numeric: tabular-nums;
  display: block; margin-bottom: 8px;
}
.verwachting p { margin: 8px 0 0; }
table.kv.compact { margin: 0; }
table.kv.compact th { width: 30%; }
table.kv.compact th, table.kv.compact td { padding: 4px 0; border: 0; }

/* De voettekst met het versienummer. */
.versie { color: var(--muted); font-size: 0.8rem; text-align: right; padding: 8px 0 0; }

/* De voorbeeldmail: leesbaar als brief, niet als code. */
pre.mail {
  background: #fbfcfd; border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 6px; padding: 14px 16px; margin: 0;
  font: 0.95rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  white-space: pre-wrap; max-width: 80ch;
}
select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px;
  background: #fff; font: inherit; min-width: 200px;
}

/* Twee tabellen naast elkaar waar de ruimte het toelaat; eronder als niet. */
.tweeluik {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
  gap: 20px; align-items: start;
}
.tweeluik h3 { margin: 0 0 8px; font-size: 1rem; }

/* De regels die aandacht vragen, aan welke kant dan ook. */
table.data tr.aandacht td { background: var(--warn-bg); }
/* Een streep waar een nieuwe klasse begint: de groepering moet te zien zijn
   zonder de klassenaam bij elke regel te herhalen. */
table.data tr.scheiding td, table.data tr.scheiding th { border-top: 2px solid var(--line); }
.waarschuwing { color: var(--err-ink); font-weight: 600; }

/* --- invoervelden in een raster, zodat een formulier niet een kolom wordt --- */
.velden {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; margin: 0 0 16px;
}
.veld label { display: block; font-weight: 600; margin-bottom: 4px; }
.veld input { width: 100%; }
.veld small { color: var(--muted); display: block; margin-top: 4px; }
label.keuze { display: block; margin: 0 0 16px; font-weight: 600; }
label.keuze small { display: block; font-weight: 400; color: var(--muted); }
input.klein { width: 90px; }

/* --- de leveringenkaart -------------------------------------------------
   Met de hand, net als de grafieken: een kaartbibliotheek zou een script van
   een vreemde server achter het inlogscherm zetten. De tegels komen wel van
   buiten, want anders is er geen kaart. */
.kaart { position: relative; margin: 12px 0 8px; }
.kaart-vlak {
  position: relative; overflow: hidden; height: 520px;
  border: 1px solid var(--line); border-radius: 8px; background: #dfe6ec;
  cursor: grab; touch-action: none;
}
.kaart-vlak.sleept { cursor: grabbing; }
.kaart-wereld { position: absolute; left: 0; top: 0; will-change: transform; }
.kaart-tegel { position: absolute; width: 256px; height: 256px; user-select: none; }
.kaart-stippen { position: absolute; left: 0; top: 0; }
.kaart-stip {
  position: absolute; border-radius: 50%; padding: 0; cursor: pointer;
  background: rgba(20, 80, 110, 0.72); border: 2px solid #fff; color: #fff;
  font: 600 11px/1 system-ui, sans-serif; display: flex;
  align-items: center; justify-content: center;
}
.kaart-stip:hover { background: rgba(20, 80, 110, 0.92); }
.kaart-knoppen {
  position: absolute; z-index: 2; top: 10px; right: 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.kaart-knoppen button { padding: 5px 10px; background: #fff; }
.kaart-uitleg {
  position: absolute; z-index: 2; left: 10px; bottom: 34px; max-width: 320px;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}
.kaart-bron { margin: 6px 0 0; font-size: 0.78rem; }
.jaarkeuze { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.jaarkeuze label { margin: 0; }
.jaarkeuze .link { color: var(--accent); text-decoration: underline; padding: 0; }

/* --- een voortgangsbalk, voor werk dat minuten duurt --- */
.balk {
  height: 8px; border-radius: 4px; background: #e4e9ee; overflow: hidden;
  margin: 0 0 16px;
}
.balk-vol { height: 100%; background: var(--accent); transition: width 0.4s; }
.bezig {
  border: 1px solid var(--info-line); background: var(--info-bg);
  color: var(--info-ink); border-radius: 6px; padding: 12px 16px; margin: 0 0 16px;
}
.bezig p { margin: 0 0 8px; }
.bezig .balk { margin: 0; background: rgba(255, 255, 255, 0.6); }

/* --- inloggen en de eerste keer opstarten -------------------------------
   De vorm van een beheerpaneel: lichte grond, merk erboven, een enkele witte
   kaart in het midden, voetregel eronder. Niets om uit te zoeken.

   Let op de afmetingen van het merkteken: die staan OOK als attribuut op de
   SVG zelf. Staat de maat alleen hier, dan valt het plaatje terug op zijn
   eigen standaard zodra deze stylesheet er nog niet is - en dan vult het het
   scherm. Dat is een keer gebeurd, door een stylesheet die nog in de cache van
   de browser zat. */
body.auth {
  min-height: 100vh;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(24px, 7vh, 72px) 20px 40px;
  background: #f1f2f4;
}
.auth-vak { width: 100%; max-width: 420px; }

.auth-merk { text-align: center; margin: 0 0 18px; }
.auth-merk strong {
  display: block; font-size: 1.7rem; font-weight: 300; letter-spacing: 0.01em;
  color: #8e979f;
}
.auth-merk span { display: block; font-size: 0.85rem; color: var(--accent); }
.auth-teken { width: 56px; height: 56px; margin: 14px auto 0; display: block; }

.auth-kaart {
  background: var(--panel); border: 1px solid #dcdfe3; border-radius: 4px;
  padding: 26px 28px 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.auth-kaart h1 {
  font-size: 1.05rem; font-weight: 600; margin: 0 0 2px; text-align: center;
  color: var(--ink);
}
.auth-onder {
  color: var(--muted); font-size: 0.86rem; margin: 0 0 22px; text-align: center;
}
.auth-kaart .notice { font-size: 0.88rem; }
.auth-formulier label { margin-top: 16px; font-weight: 400; color: #4a545e; }
.auth-formulier > label:first-of-type { margin-top: 0; }
.auth-formulier input[type="password"], .auth-formulier input[type="text"] {
  padding: 10px 12px;
}
button.breed {
  width: 100%; margin-top: 22px; padding: 12px 18px;
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  font-size: 0.9rem;
}

/* Onderaan de kaart: een keuze links, een aanwijzing rechts - net als in het
   beheerpaneel waar dit scherm naar hoort te lijken. */
.auth-regel {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 16px 0 0; font-size: 0.86rem;
}
.auth-regel label {
  margin: 0; font-weight: 400; font-size: 0.86rem; white-space: nowrap;
}
.auth-regel .muted { font-size: 0.8rem; text-align: right; }

/* Het wachtwoordveld met een knop erin. Een tikfout in een veld met bolletjes
   kost drie pogingen, en na een paar pogingen zet de app je eruit. */
.veld-met-knop { position: relative; }
.veld-met-knop input { padding-right: 76px; }
button.toon {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--muted);
  font-size: 0.82rem; font-weight: 600; padding: 6px 9px; border-radius: 4px;
}
button.toon:hover { color: var(--accent); background: #eef1f5; }

.auth-voet {
  margin: 20px 0 0; text-align: center;
  color: #98a1a9; font-size: 0.78rem; line-height: 1.7;
}