/* Sinko Consultants documentplatform, prototype.
   Kleuren, letters en maatvoering uit Revatool: navy #0f2546 als drager,
   oranje #f78f20 als enige accent, Archivo voor koppen en IBM Plex Sans voor
   lopende tekst. Afgeronde hoeken in dezelfde maatvoering als Revatool: 14px op
   panelen, kaarten en tabellen, 10px op knoppen, velden en tegels, pilvorm op
   merkjes en staafjes. Eén set variabelen, zodat de vorm overal gelijk blijft. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root {
  --navy:        #1a2644;
  --sterk:       #1e2a3c;
  --tekst:       #3d4757;
  --dim:         #66707f;
  --label:       #6b7381;
  --oranje:      #f9b11a;
  --oranje-diep: #b57c07;
  --oranje-zacht:#fdf7e8;
  --oranje-lijn: #f3e3bd;
  --op-navy:     #a9b7cb;
  --op-navy-dim: #7c8da6;
  --lijn:        #edf0f4;
  --lijn-2:      #e4e8ee;
  --zebra:       #fafbfc;
  --kop-bg:      #f5f7fa;
  --vlak:        #e9edf4;
  --wit:         #ffffff;
  --groen:       #1e7b4f;
  --groen-zacht: #dff2e8;
  --rood:        #b02a23;
  --rood-zacht:  #f8e2e0;
  /* Vormtaal: vier radii en één schaduw, verder niets. Wie een vijfde maat
     nodig denkt te hebben, kiest meestal het verkeerde element. */
  --r:       14px;
  --r-m:     10px;
  --r-s:     7px;
  --r-pil:   999px;
  --cyaan:       #1687b3;
  --cyaan-licht: #18b1d3;
  --schaduw: 0 1px 2px rgba(26, 38, 68, .05);

  --kop:  'Archivo', system-ui, sans-serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--vlak);
  color: var(--tekst);
  font: 14.5px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- raamwerk: zijmenu links, werkvlak rechts ---------- */

/* De zijbalk is sticky en dus 100vh hoog; op een langere pagina zou daaronder
   de lichte achtergrond doorschijnen. Het verloop zet de donkere kolom door tot
   onderaan, ongeacht de paginahoogte. */
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh;
  background: linear-gradient(to right, var(--navy) 232px, var(--vlak) 232px); }

.zij {
  background: var(--navy); color: var(--op-navy);
  display: flex; flex-direction: column; padding: 26px 12px 20px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  /* Op een laag scherm past het menu niet en verschijnt er een schuifbalk. Die
     hoort bij het besturingssysteem en blijft bewust subtiel. Niet via
     ::-webkit-scrollbar: dat zou een altijd zichtbare balk afdwingen, terwijl
     zwevende systeemschuifbalken zwevend horen te blijven. */
  scrollbar-width: thin;
  scrollbar-color: var(--oranje) transparent;
}
.zij .merk {
  display: block; color: var(--wit); padding: 0 10px; margin-bottom: 26px;
}
.zij .merk:hover { text-decoration: none; }
/* Het logo draagt zelf het woordmerk en staat er verder alleen. */
.zij .merk img { width: 100%; max-width: 212px; height: auto; display: block; margin-left: -8px; }

.zij nav { display: flex; flex-direction: column; gap: 1px; }
.zij .groep {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.35); padding: 16px 10px 6px;
}
.zij nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; font-size: 14px; font-weight: 500; color: var(--op-navy);
  border-radius: var(--r-m);
}
.zij nav a:hover { background: rgba(255, 255, 255, .06); color: var(--wit); text-decoration: none; }
/* Het actieve item draagt de oranje toon zelf; een streep aan de zijkant vloekt
   met een afgeronde vorm. */
.zij nav a.actief { background: rgba(247, 143, 32, .16); color: var(--wit); font-weight: 600; }
.zij nav a b { font-weight: inherit; flex: 1; }
.zij nav svg { width: 17px; height: 17px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.zij nav .tel {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .12); color: var(--op-navy); padding: 1px 8px;
  border-radius: var(--r-pil);
}
.zij nav a.actief .tel { background: rgba(255, 255, 255, .2); color: var(--wit); }
.zij nav .tel.let { background: var(--oranje); color: var(--navy); }

.zij .onder {
  margin-top: auto; padding: 14px 10px 4px; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 12.5px; line-height: 1.45;
}
.zij .onder b { display: block; color: var(--wit); font-weight: 600; }
.zij .onder span { display: block; color: rgba(255,255,255,.45); font-size: 11.5px; margin-bottom: 8px; }
.zij .onder a { color: var(--op-navy); font-size: 12px; }

.app > .hoofd { display: flex; flex-direction: column; min-width: 0; position: relative; isolation: isolate; }
/* Branding alleen achter het lichte werkvlak. Het zijmenu blijft volledig effen
   en leesbaar; het icoon is een rustig watermerk, geen tweede navigatielaag. */
.app > .hoofd::before {
  content: ''; position: fixed; z-index: -1; pointer-events: none;
  left: 232px; right: 0; top: 56px; bottom: 0;
  background: url('/static/merk/petrom-watermerk.png') 88% 72% / min(42vw, 580px) no-repeat;
  opacity: .035;
}
.top {
  display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 28px;
  background: var(--wit); border-bottom: 1px solid var(--lijn);
  position: sticky; top: 0; z-index: 20;
}
.top h2 { font-family: var(--kop); font-size: 15px; margin: 0; font-weight: 700;
  letter-spacing: -.01em; color: var(--navy); }

main { max-width: 1200px; margin: 0; padding: 26px 28px 40px; width: 100%; }

/* Contextueel databeheer voor beheerders. De balk staat op ieder relevant
   overzicht op dezelfde plek, zodat toevoegen en wijzigen nooit verstopt zit. */
.beheerbalk { display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  margin: -8px 0 20px; padding: 9px 11px; background: rgba(255,255,255,.78);
  border: 1px solid var(--lijn); border-radius: var(--r-m); backdrop-filter: blur(5px); }
.beheerbalk b { font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--dim); margin-right: 2px; }
.beheerbalk a { font-size: 12.5px; font-weight: 600; color: var(--navy);
  background: var(--vlak); border: 1px solid var(--lijn-2); padding: 5px 9px;
  border-radius: var(--r-pil); }
.beheerbalk a:hover { background: var(--oranje-zacht); border-color: var(--oranje); text-decoration: none; }
.data-raster { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 12px; }
.data-kaart { display: flex; flex-direction: column; gap: 4px; background: var(--wit);
  border: 1px solid var(--lijn); border-radius: var(--r); padding: 17px 18px; box-shadow: var(--schaduw); }
.data-kaart:hover { border-color: var(--oranje); text-decoration: none; }
.data-kaart b { color: var(--navy); }
.data-kaart span { color: var(--dim); font-size: 12px; }
.data-form { max-width: 760px; }
.data-form .vink { flex-direction: row; align-items: center; gap: 9px; }
.data-form .vink input { width: auto; }
.data-archief { margin-top: 18px; }
.data-archief .gevaar { color: var(--rood); }
.inline-form { display: inline; margin: 0; }
.inline-form .alslink { margin-left: 12px; }

/* Onder de 980 past een kolom van 232 pixels er niet meer naast zonder dat de
   inhoud in de knel komt. Het menu klapt dan naar boven: het merk en de
   gebruiker op één regel, daaronder de menu-items als een rij die je opzij
   schuift. Geen uitklapmenu, want dan zit elke navigatie achter een tik extra. */
@media (max-width: 980px) {
  /* minmax(0, 1fr) in plaats van 1fr: een kolom die op auto mag krimpen, laat
     een rij menu-items die niet wil afbreken de hele pagina breder maken. */
  .app { grid-template-columns: minmax(0, 1fr); background: var(--vlak); }
  .app > .hoofd::before { left: 0; top: 145px; background-size: min(68vw, 440px); opacity: .03; }
  .zij {
    position: static; height: auto; overflow: visible; min-width: 0;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 14px 16px 10px; border-right: 0; border-bottom: 3px solid var(--oranje);
  }
  .zij .merk { flex: 1 1 auto; min-width: 0; margin-bottom: 0; padding: 0; }
  .zij .merk img { max-width: 168px; margin-left: 0; }

  /* De gebruiker schuift naar rechts op dezelfde regel als het merk; functie en
     scheidingslijn zijn daar te veel van het goede. */
  .zij .onder {
    order: 2; margin: 0; padding: 0; border-top: 0; text-align: right;
    flex: 0 0 auto; max-width: 44%;
  }
  .zij .onder b { font-size: 12.5px; }
  .zij .onder span { display: none; }
  .zij .onder a { font-size: 11.5px; }

  .zij nav {
    order: 3; flex: 1 0 100%; min-width: 0; flex-direction: row; flex-wrap: nowrap; gap: 6px;
    overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px;
    scrollbar-width: none;
  }
  .zij nav::-webkit-scrollbar { display: none; }
  .zij .groep { display: none; }
  .zij nav a { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; }
}

/* ---------- paginakop ---------- */

.paginakop {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 22px;
}
h1 { font-family: var(--kop); font-weight: 800; font-size: 27px; margin: 0 0 4px;
  letter-spacing: -.025em; color: var(--navy); }
.sub { color: var(--dim); margin: 0; font-size: 14px; }
.kruimel { font-size: 12.5px; color: var(--dim); margin-bottom: 6px; }
.omschrijving {
  background: var(--wit); border-left: 3px solid var(--lijn-2);
  padding: 12px 16px; margin: 0 0 20px; color: var(--sterk); font-size: 14px;
  border-radius: var(--r-m);
}

.knop {
  display: inline-block; background: var(--navy); color: var(--wit);
  padding: 9px 18px; font-size: 14px; font-weight: 600; border: 0; cursor: pointer;
  font-family: inherit; border-radius: var(--r-m);
}
.knop:hover { background: var(--sterk); text-decoration: none; }
.knop.rand { background: transparent; color: var(--navy); border: 1px solid var(--navy); }
.knop.rand:hover { background: var(--lijn-2); }
.knoppen { display: flex; gap: 8px; }

/* ---------- projecten ---------- */

/* Geen doorschijnende rasterachtergrond: bij een oneven aantal projecten bleef
   er anders een grijs vlak over waar geen kaart staat. */
.projecten { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.project { display: block; background: var(--wit); border: 1px solid var(--lijn);
  padding: 18px 20px; color: inherit; border-radius: var(--r); box-shadow: var(--schaduw); }
.project:hover { background: var(--vlak); text-decoration: none; }
.pkop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.project h3 { font-family: var(--kop); font-weight: 700; margin: 0 0 4px; font-size: 16px;
  line-height: 1.35; letter-spacing: -.015em; color: var(--navy); }
.opdrachtgever { color: var(--dim); font-size: 13.5px; margin-bottom: 14px; }
.pvoet { display: flex; gap: 14px; font-size: 12px; color: var(--dim);
  border-top: 1px solid var(--vlak); padding-top: 10px; }
.ref { font-family: var(--mono); font-size: 11px; color: var(--label);
  font-variant-numeric: tabular-nums; }

.status {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  padding: 3px 9px; background: var(--lijn-2); color: var(--sterk);
  border-radius: var(--r-pil);
}
.status.lopend { background: var(--groen-zacht); color: var(--groen); }
.status.afgerond { background: var(--lijn-2); color: var(--dim); }
.status.groot { font-size: 12px; padding: 6px 13px; }

/* ---------- kolommen ---------- */

/* De brede kolom moet kunnen krimpen. Met een kale 1fr houdt een grid-kolom de
   minimale breedte van zijn inhoud aan, en dan duwt een tabel de zijkolom het
   scherm af in plaats van binnen zijn eigen kader te schuiven. Vandaar dat elke
   kolom die tekst draagt hier als minmax(0, 1fr) staat en niet als 1fr; dat is
   geen stijlkeuze maar de enige vorm die wel kan krimpen. */
.kolommen { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px;
  align-items: start; }
@media (max-width: 900px) { .kolommen { grid-template-columns: minmax(0, 1fr); } }

.paneel { background: var(--wit); border: 1px solid var(--lijn); padding: 16px 18px;
  margin-bottom: 16px; border-radius: var(--r); box-shadow: var(--schaduw); }
.paneel.breed { max-width: 720px; }
.paneel h3 { margin: 0 0 12px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--dim); font-weight: 700; }

.mapblok { margin-bottom: 22px; }
.mapblok h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--dim); margin: 0 0 8px; }
.mapblok h3 span { color: var(--dim); font-weight: 400; margin-left: 4px; }

/* ---------- tabellen ---------- */

/* Een tabel met samengevouwen randen negeert border-radius; met separate randen
   en spacing nul ziet het er hetzelfde uit en volgt de hoek wel. */
.lijst { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--wit);
  border: 1px solid var(--lijn); font-size: 13.5px;
  border-radius: var(--r); overflow: hidden; box-shadow: var(--schaduw); }
.lijst.groot { font-size: 13px; }
.lijst th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--dim); padding: 10px 14px; border-bottom: 1px solid var(--lijn);
  background: var(--vlak); font-weight: 700;
}
.lijst td { padding: 10px 14px; border-bottom: 1px solid var(--vlak); vertical-align: middle; }
.lijst tbody tr:last-child td { border-bottom: 0; }
.lijst tbody tr:hover { background: var(--vlak); }
.lijst tr.extern { background: var(--oranje-zacht); }
.lijst tr.extern:hover { background: var(--oranje-lijn); }
.lijst tr.uit { opacity: .5; }
.rechts { text-align: right; }
.acties a { margin-left: 12px; font-size: 12.5px; }
.bnaam small { display: block; color: var(--dim); font-size: 11.5px; }

/* handelingen in het logboek */
.h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; background: var(--lijn-2); color: var(--sterk); white-space: nowrap;
  border-radius: var(--r-pil); display: inline-block; }
.h.gedownload { background: var(--oranje-zacht); color: var(--oranje-diep); }
.h.gedeeld { background: var(--lijn-2); color: var(--navy); }
.h.geupload { background: var(--groen-zacht); color: var(--groen); }
.h.toegang { background: var(--rood-zacht); color: var(--rood); }

.rolmerk { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 9px; background: var(--lijn-2); color: var(--sterk);
  border-radius: var(--r-pil); }
.rolmerk.beheerder { background: var(--navy); color: var(--wit); }
.rolmerk.opdrachtgever { background: var(--oranje-zacht); color: var(--oranje-diep); }

/* ---------- overig ---------- */

.upload { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  background: var(--wit); border: 1px solid var(--lijn); padding: 14px 16px; margin-bottom: 22px;
  border-radius: var(--r-m); }
.upload input[type=file] { font-size: 13px; flex: 1; min-width: 200px; }
.upload select { padding: 7px 10px; border: 1px solid var(--lijn); background: var(--wit);
  font-family: inherit; font-size: 13px; border-radius: var(--r-s); }

.formulier { background: var(--wit); border: 1px solid var(--lijn); padding: 22px;
  max-width: 560px; display: flex; flex-direction: column; gap: 14px;
  border-radius: var(--r); box-shadow: var(--schaduw); }
.formulier label { display: flex; flex-direction: column; gap: 5px; font-size: 13px;
  font-weight: 600; color: var(--sterk); }
.formulier input, .formulier select, .formulier textarea {
  padding: 9px 11px; border: 1px solid var(--lijn); background: var(--wit);
  font-family: inherit; font-size: 14px; font-weight: 400; color: var(--navy);
  border-radius: var(--r-m);
}
.formulier .duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.formulier button { align-self: flex-start; margin-top: 4px; }

/* ---------- feedback ---------- */
.feedback-layout { display: grid; grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
  gap: 24px; align-items: start; }
.feedback-nieuw { position: sticky; top: 78px; max-width: none; }
.feedback-nieuw h2, .feedback-lijstkop h2 { margin: 0; }
.feedback-nieuw .uitleg { margin: -4px 0 2px; color: var(--dim); font-size: 13px; line-height: 1.5; }
.feedback-lijst { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.feedback-lijstkop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.feedback-lijstkop span { color: var(--dim); font-size: 13px; }
.feedback-kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r);
  box-shadow: var(--schaduw); padding: 20px; border-left: 4px solid var(--oranje); }
.feedback-kaart.status-afgerond { border-left-color: var(--groen); }
.feedback-kaart.status-in_uitvoering { border-left-color: var(--cyaan); }
.feedback-kop { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.feedback-kop h2 { margin: 8px 0 0; font-size: 18px; line-height: 1.3; }
.feedback-kop time { color: var(--dim); font-size: 12px; white-space: nowrap; }
.feedback-status.nieuw { background: rgba(249,177,26,.18); color: #8a5700; }
.feedback-status.bekeken { background: var(--lijn-2); color: var(--sterk); }
.feedback-status.in_uitvoering { background: rgba(22,135,179,.12); color: #0b678c; }
.feedback-status.afgerond { background: var(--groen-zacht); color: var(--groen); }
.feedback-meta { color: var(--dim); font-size: 12.5px; margin-top: 8px; }
.feedback-tekst { color: var(--sterk); line-height: 1.6; margin: 16px 0; overflow-wrap: anywhere; }
.feedback-reactie { background: var(--vlak); border-radius: var(--r-m); padding: 14px 16px; }
.feedback-reactie b { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.feedback-reactie p { margin: 7px 0 0; line-height: 1.55; }
.feedback-wacht { color: var(--dim); font-size: 12.5px; font-style: italic; }
.feedback-bijgewerkt { display: block; color: var(--dim); margin-top: 12px; }
.feedback-bewerk { margin-top: 14px; border-top: 1px solid var(--lijn); padding-top: 12px; }
.feedback-bewerk summary { cursor: pointer; color: var(--cyaan); font-weight: 600; font-size: 13px; }
.feedback-bewerk .formulier { box-shadow: none; border: 0; padding: 16px 0 0; max-width: none; }
@media (max-width: 900px) {
  .feedback-layout { grid-template-columns: 1fr; }
  .feedback-nieuw { position: static; }
  .feedback-kop { flex-direction: column; gap: 6px; }
}

.lid { padding: 8px 0; border-bottom: 1px solid var(--vlak); font-size: 13.5px; }
.lid:last-child { border-bottom: 0; }
.lid small { display: block; color: var(--dim); font-size: 12px; }

.logregel { padding: 8px 0; border-bottom: 1px solid var(--vlak); font-size: 13px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.logregel:last-child { border-bottom: 0; }
.logregel small { color: var(--dim); margin-left: auto; font-size: 11.5px; }
.meer { display: inline-block; margin-top: 10px; font-size: 12.5px; }
.leeg { color: var(--dim); font-size: 13px; padding: 6px 0; }

.melding { background: var(--wit); border-left: 3px solid var(--oranje);
  padding: 14px 18px; color: var(--sterk); border-radius: var(--r-m); }
.melding.klein { font-size: 13px; margin-bottom: 20px; }

.cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--lijn); border: 1px solid var(--lijn); margin-bottom: 24px;
  border-radius: var(--r); overflow: hidden; box-shadow: var(--schaduw); }
.cijfer { background: var(--wit); padding: 16px 18px; }
.cijfer b { display: block; font-family: var(--kop); font-weight: 800; font-size: 25px;
  letter-spacing: -.03em; color: var(--navy); }
.cijfer span { font-size: 12px; color: var(--dim); }
.cijfer.let b { color: var(--oranje-diep); }
.cijfer.let { background: var(--oranje-zacht); }

.hash { font-family: var(--mono); font-size: 12px;
  color: var(--sterk); word-break: break-all; margin: 0 0 8px; }
.paneel small { color: var(--dim); font-size: 12px; line-height: 1.45; display: block; }
.link a { font-family: ui-monospace, Menlo, monospace; font-size: 13px; word-break: break-all; }

/* ---------- inlog- en deelpagina ---------- */

.inlogpagina { display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px; position: relative; overflow: hidden;
  background:
    radial-gradient(70% 60% at 88% 96%, rgba(249, 177, 26, .34), transparent 65%),
    radial-gradient(120% 90% at 25% 15%, #254f7d 0%, var(--navy) 55%, #0d1b34 100%); }
.inlogpagina::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('/static/merk/petrom-watermerk.png') calc(100% + 70px) -280px / min(560px, 48vw) no-repeat;
  filter: grayscale(1) brightness(2.4); opacity: .09;
}
.inlogkaart { background: var(--wit); padding: 34px 36px; max-width: 520px; width: 100%;
  border-top: 3px solid var(--oranje); border-radius: var(--r); position: relative; z-index: 1;
  box-shadow: 0 24px 60px rgba(6, 20, 43, .24); }
.inlogkaart.breed { max-width: 560px; }
.merkgroot { width: 100%; max-width: 330px; height: auto; display: block; margin: 0 0 14px -10px; }
.inlogkaart h1 { font-family: var(--kop); font-weight: 700; font-size: 17px; margin: 0 0 6px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.inlogkaart h1 span { font-family: var(--kop); font-weight: 800; letter-spacing: .05em;
  color: var(--oranje); }
.uitleg { color: var(--dim); font-size: 13.5px; margin: 0 0 22px; }
.uitleg.klein { font-size: 12px; margin: 14px 0 0; }

.rolgroep { margin-bottom: 18px; }
.rolgroep h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--dim); margin: 0 0 8px; }
/* Los van elkaar in plaats van aan elkaar geplakt: gestapelde vlakken met een
   gedeelde rand kunnen geen ronde hoek hebben. */
.persoon { display: flex; align-items: center; gap: 12px; padding: 9px 11px;
  border: 1px solid var(--lijn); margin-bottom: 7px; color: inherit;
  border-radius: var(--r-m); }
.persoon:hover { background: var(--vlak); text-decoration: none; }
.persoon .initialen { width: 34px; height: 34px; background: var(--navy); color: var(--wit);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  border-radius: 50%; flex-shrink: 0; }
.persoon b { display: block; font-size: 14px; }
.persoon small { color: var(--dim); font-size: 12px; }

.gedeeldbestand { border: 1px solid var(--lijn); padding: 14px 16px; margin-bottom: 18px;
  border-radius: var(--r-m); }
.gedeeldbestand b { display: block; font-size: 15px; margin-bottom: 3px; }
.gedeeldbestand small { color: var(--dim); font-size: 12.5px; }

/* ── Bestandsbeheer ──────────────────────────────────────────────────────────
   Een documentplatform wordt gescand, niet gelezen: de zoekbalk, de mappen en
   de lijst staan onder elkaar in de volgorde waarin iemand ze gebruikt. */

.zoekbalk {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  background: var(--wit); padding: 12px; margin-bottom: 22px;
}
.zoekbalk input[type="search"] {
  flex: 1 1 240px; min-width: 180px; padding: 9px 11px;
  border: 1px solid var(--lijn-2); background: var(--wit); color: var(--tekst);
  font: inherit; border-radius: var(--r-s);
}
.zoekbalk input[type="search"]:focus,
.zoekbalk select:focus { outline: 2px solid var(--oranje); outline-offset: -1px; }
/* Een keuzelijst is standaard zo breed als zijn langste optie. Met projectnamen
   van vijftig tekens duwt dat de balk het scherm af, dus hij mag krimpen en
   nooit breder worden dan de ruimte die er is. */
.zoekbalk select {
  padding: 9px 10px; border: 1px solid var(--lijn-2); background: var(--wit);
  color: var(--tekst); font: inherit; border-radius: var(--r-s);
  min-width: 0; max-width: 100%; text-overflow: ellipsis;
}
.wisfilter { font-size: 13px; color: var(--dim); }

/* Merkje op een map die aan een project hangt. De bedrijfsruimte krijgt er
   bewust geen: geen merkje betekent gewoon "van het bureau zelf". */
.koppelmerk {
  display: inline-block; margin-left: 7px; padding: 1px 7px;
  background: var(--oranje-zacht); color: var(--oranje);
  border-radius: var(--r-pil); font-family: var(--kop);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  vertical-align: 1px;
}

.sectiekop {
  font-family: var(--kop); font-weight: 700; font-size: 13px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--label); margin: 0 0 10px;
}

.werkbalk { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.werkbalk .upload { flex: 2 1 380px; margin-bottom: 0; }
.nieuwemap {
  flex: 1 1 260px; display: flex; gap: 8px; align-items: center;
  background: var(--wit); padding: 12px; border-radius: var(--r-m);
}
.nieuwemap input {
  flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--lijn-2);
  background: var(--wit); color: var(--tekst); font: inherit; border-radius: var(--r-s);
}
.nieuwemap input:focus { outline: 2px solid var(--oranje); outline-offset: -1px; }

.tip { font-size: 12.5px; color: var(--dim); margin: 0 0 22px; }

/* Het versienummer is een feit over het document, geen sierraad: het staat in
   dezelfde monospace als de referentienummers zodat het als data leest. */
.versiemerk {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  background: var(--lijn); color: var(--dim); padding: 1px 7px; margin-left: 6px;
  vertical-align: 1px; border-radius: var(--r-pil);
}
.versiemerk.actueel { background: var(--groen-zacht); color: var(--groen); }

.bestandslijst thead th {
  font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--label); text-align: left;
  padding: 10px 14px; background: var(--kop-bg); border-bottom: 1px solid var(--lijn-2);
}
.bestandslijst thead th.rechts { text-align: right; }
tr.vervallen td { color: var(--label); }
a.zacht { color: var(--dim); }

.stapel { display: flex; flex-direction: column; gap: 12px; }
.stapel label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--label); }
.stapel input, .stapel select {
  padding: 9px 11px; border: 1px solid var(--lijn-2); background: var(--wit);
  color: var(--tekst); font: 14.5px var(--sans); border-radius: var(--r-s);
}
.stapel input:focus, .stapel select:focus { outline: 2px solid var(--oranje); outline-offset: -1px; }
.stapel .knop { align-self: flex-start; }

.knop.gevaar { background: var(--rood); }
.knop.gevaar:hover { background: #8e211b; }

/* Een handeling in een tabel hoort als handeling te lezen, niet als knop die de
   rij uit elkaar duwt. Vandaar een formulier dat eruitziet als een link. */
.alslink {
  background: none; border: 0; padding: 0; font: inherit; color: var(--navy);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.alslink:hover { color: var(--oranje-diep); }
.alslink.gevaar { color: var(--rood); }
.acties form { display: inline; margin-left: 10px; }

.lid.nu { border-left: 2px solid var(--oranje); padding-left: 9px; }

/* Mapacties zitten achter een uitklap: hernoemen en verwijderen zijn zelden
   nodig en horen het scherm niet permanent te vullen. */
.mapacties { position: relative; }
.mapacties summary { list-style: none; cursor: pointer; }
.mapacties summary::-webkit-details-marker { display: none; }
.mapacties .uitklap {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: 300px;
  background: var(--wit); border: 1px solid var(--lijn-2); padding: 14px;
  display: flex; flex-direction: column; gap: 12px; border-radius: var(--r-m);
  box-shadow: 0 16px 34px -20px rgba(15, 37, 70, .45);
}
.mapacties .uitklap form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mapacties .uitklap input {
  flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--lijn-2);
  background: var(--wit); color: var(--tekst); font: inherit; border-radius: var(--r-s);
}
.mapacties .uitklap input:focus { outline: 2px solid var(--oranje); outline-offset: -1px; }
.mapacties .uitklap small { flex-basis: 100%; color: var(--dim); font-size: 12px; }

.bestandslijst .acties { white-space: nowrap; }

/* Het pad boven een mapnaam is context, geen kop: lichter en kleiner dan de
   mapnaam zelf, zodat het oog bij de naam blijft. */
.mapblok h3 em {
  font-style: normal; font-weight: 400; font-size: 12.5px;
  color: var(--label); letter-spacing: 0; text-transform: none;
}

/* ── Drive-afwerking ─────────────────────────────────────────────────────────
   Deze pagina liep vooruit op de rest: de zachte vorm die hier begon, staat nu
   overal. Wat hier nog apart staat, is de maatvoering van de losse onderdelen. */

.drivebalk {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap; border-bottom: 1px solid var(--lijn-2); margin-bottom: 18px;
}
.drivetabs { display: flex; gap: 4px; flex-wrap: wrap; }
.drivetab {
  padding: 9px 14px 11px; font-size: 13.5px; color: var(--dim);
  border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap;
}
.drivetab:hover { color: var(--navy); text-decoration: none; background: var(--kop-bg); }
.drivetab.aan { color: var(--navy); font-weight: 600; border-bottom-color: var(--oranje); }

.weergavekeuze { display: flex; gap: 2px; padding-bottom: 6px; }
.weergaveknop {
  display: grid; place-items: center; width: 34px; height: 30px; border-radius: 6px;
  color: var(--label);
}
.weergaveknop:hover { background: var(--kop-bg); }
.weergaveknop.aan { background: var(--lijn); color: var(--navy); }
.weergaveknop svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.weergaveknop.aan svg rect { fill: currentColor; stroke: none; }

/* De zoekbalk is de eerste plek waar iemand kijkt, dus die krijgt de vorm van
   een zoekveld en niet die van een formulierregel. */
.zoekbalk {
  border-radius: var(--r-m); background: var(--wit); border: 1px solid var(--lijn-2);
  padding: 8px 10px; gap: 6px;
}
.zoekbalk:focus-within { border-color: var(--oranje); }
.zoekicoon { display: grid; place-items: center; width: 26px; color: var(--label); }
.zoekicoon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.zoekbalk input[type="search"] { border: 0; background: transparent; padding: 8px 4px; }
.zoekbalk input[type="search"]:focus { outline: 0; }
.zoekbalk select { border: 0; background: var(--kop-bg); border-radius: var(--r-s); padding: 8px 9px; }
.zoekbalk select:focus { outline: 2px solid var(--oranje); }
.zoekbalk .knop { border-radius: var(--r-s); }

.cijferrij { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--dim); }
.cijferrij b { font-family: var(--kop); color: var(--navy); font-size: 15px; margin-right: 3px; }

/* De lijst zelf: een raster in plaats van een tabel, zodat een rij als geheel
   kan oplichten en er iets in kan verschijnen bij hover. */
.drivevlak { display: flex; gap: 18px; align-items: flex-start; padding-bottom: 84px; }
.drivehoofd { flex: 1; min-width: 0; }

.drivelijst { background: var(--wit); border-radius: var(--r); box-shadow: var(--schaduw); }
.drivekop { border-radius: var(--r) var(--r) 0 0; }
.driverij:last-child { border-radius: 0 0 var(--r) var(--r); }
.drivekop, .driverij {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: 38px minmax(240px, 3fr) minmax(90px, 1.1fr) minmax(0, 1fr) 130px 80px 76px;
  padding: 0 12px;
}
.drivekop {
  height: 40px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--label); border-bottom: 1px solid var(--lijn-2);
}
.driverij { height: 52px; border-bottom: 1px solid var(--lijn); position: relative; }
.driverij:last-child { border-bottom: 0; }
.driverij:hover { background: var(--kop-bg); }
.driverij.gekozen { background: var(--oranje-zacht); }
.driverij.sleept { opacity: .45; }
.kolomvink { display: grid; place-items: center; }
.kolomnaam { display: flex; align-items: center; gap: 9px; min-width: 0; }
.kolomnaam a {
  color: var(--navy); font-weight: 500; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.bicoon { flex: none; }
/* Mappen staan in dezelfde lijst als de documenten, zoals op een schijf. Ze
   krijgen daarom dezelfde rij en dezelfde uitlijning, met alleen een ander
   icoon en een iets zwaardere naam zodat je ze er meteen uit pikt. */
.mapicoon {
  width: 21px; height: 26px; fill: none; stroke: var(--oranje);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.maprij .kolomnaam a { font-weight: 600; }
.maprij .rechts { font-variant-numeric: normal; }
.maptegel { text-decoration: none; color: var(--navy); }
.maptegel:hover { text-decoration: none; }
/* Een maptegel heeft geen vinkje en geen actieknoppen bovenin. Zonder die
   ruimte zou hij korter zijn dan de tegels ernaast en staat de rij scheef. */
.maptegel::before { content: ''; display: block; height: 22px; }
.maptegel .tegelvlak { padding: 22px 10px 18px; }
.maptegel .mapicoon { width: 34px; height: 42px; }
.maptegel .koppelmerk { margin-left: 0; }
.maptegel .tegelvoet { justify-content: center; }
.drivekop .rechts, .driverij .rechts { text-align: right; }
.driverij .zacht { font-size: 13px; color: var(--dim); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* Ster en driepuntjes verschijnen pas als de rij aandacht krijgt, zodat een
   volle lijst rustig blijft. Wat aan staat blijft altijd zichtbaar. */
.sterknop, .infoknop, .rijmenu summary {
  background: none; border: 0; padding: 4px; cursor: pointer; border-radius: var(--r-s);
  display: grid; place-items: center; color: var(--label);
}
.sterknop:hover, .infoknop:hover, .rijmenu summary:hover { background: var(--lijn); color: var(--navy); }
.ster { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ster.vol { fill: var(--oranje); stroke: var(--oranje); }
.sterform { display: inline; }
.driverij .sterknop:not(.aan), .tegel .sterknop:not(.aan) { opacity: 0; }
.driverij:hover .sterknop, .driverij:focus-within .sterknop,
.tegel:hover .sterknop, .tegel:focus-within .sterknop { opacity: 1; }
.kolomacties { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.infoknop svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; }
.kebab { width: 16px; height: 16px; fill: currentColor; }

.rijmenu { position: relative; }
.rijmenu summary { list-style: none; }
.rijmenu summary::-webkit-details-marker { display: none; }
.menulijst {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; width: 232px;
  background: var(--wit); border: 1px solid var(--lijn-2); border-radius: var(--r-m);
  padding: 6px; display: flex; flex-direction: column;
  box-shadow: 0 18px 40px -22px rgba(15, 37, 70, .5);
}
.menulijst a, .menulijst button {
  display: block; width: 100%; text-align: left; padding: 9px 11px; border-radius: var(--r-s);
  font-size: 13.5px; color: var(--tekst); text-decoration: none; background: none;
  border: 0; cursor: pointer; font-family: inherit;
}
.menulijst a:hover, .menulijst button:hover { background: var(--kop-bg); text-decoration: none; }
.menulijst button.gevaar { color: var(--rood); }
.menulijst form { margin: 0; }

/* Tegels, voor wie op vorm zoekt. */
.drivetegels {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 12px;
}
.tegel {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r);
  padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px;
}
.tegel:hover { border-color: var(--lijn-2); box-shadow: 0 10px 24px -18px rgba(15, 37, 70, .5); }
.tegel.gekozen { border-color: var(--oranje); background: var(--oranje-zacht); }
.tegel.sleept { opacity: .45; }
.tegelkop { display: flex; justify-content: space-between; align-items: center; }
.tegelacties { display: flex; align-items: center; gap: 2px; }
/* Het vlak van een tegel suggereert een blad papier. Een echte miniatuur van de
   eerste pagina zou mooier zijn, maar daar is een rendermotor voor nodig; dit
   leest als document zonder die belofte te doen. */
.tegelvlak {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  padding: 18px 10px 14px; text-align: center; color: var(--navy); text-decoration: none;
  background: linear-gradient(var(--kop-bg), var(--wit)); border-radius: var(--r-m);
  border: 1px solid var(--lijn);
}
.tegelvlak:hover { text-decoration: none; }
.tegelvlak b {
  font-size: 13px; font-weight: 500; line-height: 1.35; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.tegelvoet {
  display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px;
  color: var(--label); border-top: 1px solid var(--lijn); padding-top: 8px;
}

.leegvlak { padding: 44px 20px; text-align: center; color: var(--dim); }

/* Bladeren onder een lange lijst. Links staat waar je bent in het geheel, rechts
   de stappen; die twee horen bij elkaar en staan daarom in één balk. */
.paginering {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-top: 14px;
}
.paginering .tel { font-size: 12.5px; color: var(--dim); }
.paginering .knoppen { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.paginering a, .paginering .nu, .paginering .stap.uit {
  min-width: 32px; height: 32px; padding: 0 9px; border-radius: var(--r-s);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-variant-numeric: tabular-nums; text-decoration: none;
  border: 1px solid transparent;
}
.paginering a { color: var(--tekst); background: var(--wit); border-color: var(--lijn); }
.paginering a:hover { border-color: var(--oranje); color: var(--navy); text-decoration: none; }
.paginering .nu { background: var(--navy); color: var(--wit); font-weight: 600; }
.paginering .stap.uit { color: var(--label); opacity: .5; }
.paginering .gat { color: var(--label); padding: 0 2px; }

/* De sleephint staat los boven de lijst in plaats van naast een sectiekop die
   er niet meer is. */
.sectiehint.los { margin: 0 0 10px; font-size: 12.5px; color: var(--dim); }

/* De balk die opkomt bij een selectie. Zweeft onderin, zodat de lijst niet
   verspringt zodra je iets aanvinkt. */
/* Zwevend onderin het venster in plaats van in de stroom van de pagina: een
   sticky balk komt in een lange lijst boven op de rijen te liggen die je net
   aan het aanvinken bent. */
.bulkbalk {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 40;
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; max-width: 92vw;
  background: var(--navy); color: var(--wit); border-radius: var(--r); padding: 10px 14px;
  box-shadow: 0 22px 44px -20px rgba(15, 37, 70, .75);
}
.bulkbalk[hidden] { display: none; }
.bulkbalk > span { font-weight: 600; margin-right: 4px; white-space: nowrap; }
.bulkbalk .knop.klein { white-space: nowrap; }
.bulkbalk .alslink { white-space: nowrap; }
@media (max-width: 900px) { .bulkbalk { flex-wrap: wrap; max-width: 94vw; } }
.bulkbalk form { display: flex; gap: 6px; align-items: center; margin: 0; }
.bulkbalk select {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  color: var(--wit); padding: 7px 9px; border-radius: var(--r-s); font: inherit; max-width: 190px;
}
.bulkbalk select option { color: var(--tekst); }
.bulkbalk .alslink { color: var(--op-navy); margin-left: 6px; font-size: 13px; }
.bulkbalk .alslink:hover { color: var(--wit); }
.knop.klein { padding: 8px 12px; font-size: 13px; border-radius: var(--r-s); }
.bulkbalk .knop.klein { background: var(--oranje); color: var(--navy); }
.bulkbalk .knop.klein:hover { background: #ffa640; }
.bulkbalk .knop.klein.rand {
  background: transparent; color: var(--wit); border: 1px solid rgba(255,255,255,.35);
}
.bulkbalk .knop.klein.gevaar { background: var(--rood); color: var(--wit); }

/* Detailpaneel rechts. */
.detailpaneel {
  flex: none; width: 306px; background: var(--wit); border-radius: var(--r); padding: 16px;
  box-shadow: var(--schaduw);
  position: sticky; top: 18px; max-height: calc(100vh - 40px); overflow-y: auto;
}
.detailpaneel[hidden] { display: none; }
.paneelkop {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--lijn); margin-bottom: 14px;
}
.paneelkop b { font-family: var(--kop); font-size: 14px; color: var(--navy); }
.paneelblok { margin-bottom: 16px; }
.paneelblok h4 {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--label); margin: 0 0 8px;
}
.paneelblok.kaartje { display: flex; gap: 12px; align-items: center; }
.paneelblok.kaartje b { display: block; font-size: 13.5px; color: var(--navy); line-height: 1.35; }
.paneelblok.kaartje small { color: var(--dim); font-size: 12px; }
.paneelfeiten { display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 12px; margin: 0 0 16px; }
.paneelfeiten dt { font-size: 12px; color: var(--label); }
.paneelfeiten dd { margin: 0; font-size: 12.5px; color: var(--tekst); word-break: break-word; }
.paneelregel { padding: 6px 0; border-bottom: 1px solid var(--lijn); font-size: 12.5px; }
.paneelregel:last-child { border-bottom: 0; }
.paneelregel small { display: block; color: var(--dim); font-size: 11.5px; margin-top: 2px; }
.paneelknoppen { display: flex; gap: 8px; }
.laadt { color: var(--dim); font-size: 13px; }

/* Slepen. */
.werkbalk.sleep {
  outline: 2px dashed var(--oranje); outline-offset: 4px; background: var(--oranje-zacht);
}
.sleephint { font-size: 12.5px; color: var(--label); }

.linkstrook { background: var(--wit); border-radius: var(--r); padding: 6px 14px; margin-bottom: 18px;
  box-shadow: var(--schaduw); }
.linkregel {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--lijn); font-size: 13px;
}
.linkregel:last-child { border-bottom: 0; }

.voorbeeldkader {
  width: 100%; height: 74vh; border: 0; border-radius: var(--r); background: var(--wit);
}
.voorbeeldtekst {
  background: var(--wit); border-radius: var(--r); padding: 22px 24px; overflow-x: auto;
  font: 12.5px/1.7 var(--mono); color: var(--tekst); white-space: pre-wrap; word-break: break-word;
}

@media (max-width: 1180px) {
  /* Op één kolom moeten lijst en detailpaneel de volle breedte pakken; met
     flex-start uit de basisregel kruipen ze samen naar hun eigen inhoud. */
  .drivevlak { flex-direction: column; align-items: stretch; }
  .detailpaneel { width: 100%; position: static; max-height: none; }
  .drivekop, .driverij { grid-template-columns: 34px minmax(160px, 2fr) minmax(0, 1fr) 110px 44px; }
  .drivekop span:nth-child(4), .driverij > span:nth-child(4),
  .drivekop span:nth-child(6), .driverij > span:nth-child(6) { display: none; }
}

/* Een kruimel die als sleepdoel dient moet dat laten zien zodra er iets boven
   hangt; daarbuiten blijft het een gewone link. */
.kruimel a.sleepdoel {
  background: var(--oranje-zacht); outline: 2px solid var(--oranje);
  outline-offset: 2px; border-radius: var(--r-s);
}

.drivebalk.alleenkeuze { justify-content: flex-end; }

.sectiehint { font-size: 12.5px; color: var(--dim); margin-bottom: 10px; }

/* ── Bedrijfsvoering ─────────────────────────────────────────────────────────
   Cijfers en datums, dus rustig en dicht. De enige kleur die hier iets betekent
   is die van urgentie; al het andere blijft grijswaarden op navy. */

/* Signalen op het startscherm. De rand links draagt de urgentie, niet het hele
   vlak: een scherm vol gekleurde blokken leest als paniek en dan kijkt niemand
   meer welk blok het ergste is. */
.signalen { display: grid; gap: 8px; margin-bottom: 26px; }
.signaal {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 14px; align-items: baseline;
  background: var(--wit); padding: 12px 14px; border-left: 3px solid var(--lijn-2);
  color: var(--tekst); text-decoration: none; border-radius: var(--r-m);
}
.signaal:hover { background: var(--kop-bg); text-decoration: none; }
.signaal.kritiek { border-left-color: var(--rood); }
.signaal.letop { border-left-color: var(--oranje); }
.signaal.zacht { border-left-color: var(--lijn-2); }
.signaal .merk {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--label);
}
.signaal b { font-weight: 600; color: var(--navy); }
.signaal .wat { font-size: 13px; color: var(--dim); }
.signaal.kritiek .wat { color: var(--rood); }

.rustig { background: var(--wit); padding: 22px; color: var(--dim); font-size: 13.5px;
  border-radius: var(--r); box-shadow: var(--schaduw); }

/* Een staafje voor voortgang of bezetting. Klein en in de rij, want het is een
   verhouding en geen grafiek. */
.staaf {
  display: inline-block; width: 92px; height: 6px; background: var(--lijn);
  vertical-align: middle; margin-right: 8px; border-radius: var(--r-pil); overflow: hidden;
}
.staaf i { display: block; height: 100%; background: var(--navy); border-radius: var(--r-pil); }
.staaf.let i { background: var(--oranje); }
.staaf.over i { background: var(--rood); }
.staaf.breed { width: 100%; }
td .staaf + small, .balkregel small { color: var(--label); font-size: 11.5px; }
.let, td.let, dd.let { color: var(--rood); }
.cijfer.let b { color: var(--rood); }

.lijst.strak td { vertical-align: middle; }
.lijst.strak td small { display: block; color: var(--label); font-size: 11.5px; margin-top: 1px; }
.lijst.strak thead th {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--label); text-align: left; padding: 10px 14px;
  background: var(--kop-bg); border-bottom: 1px solid var(--lijn-2);
}
.lijst.strak thead th.rechts { text-align: right; }

/* Label links, waarde rechts. De waardekolom moet kunnen krimpen (minmax met
   nul), anders duwt een lang e-mailadres de hele rij buiten het paneel. Wat dan
   nog niet past breekt af; bedragen blijven heel dankzij de harde spatie die
   euro() erin zet. */
.feiten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 14px; margin: 0; }
.feiten dt { font-size: 12px; color: var(--label); }
.feiten dd { margin: 0; font-size: 13px; color: var(--tekst); text-align: right;
  min-width: 0; overflow-wrap: anywhere; }

.mijlpaal { padding: 9px 0; border-bottom: 1px solid var(--lijn); }
.mijlpaal:last-child { border-bottom: 0; }
.mijlpaal b { display: block; font-size: 13px; color: var(--navy); }
.mijlpaal small { display: block; color: var(--label); font-size: 11.5px; }
.mijlpaal .wanneer { font-size: 12px; color: var(--dim); }
.mijlpaal .wanneer.dichtbij { color: var(--oranje-diep); font-weight: 600; }

/* Een vervaldatum draagt zijn eigen urgentie mee, overal op dezelfde manier. */
.verval small { display: block; font-size: 11px; color: var(--label); }
.verval.kritiek { color: var(--rood); }
.verval.kritiek small { color: var(--rood); }
.verval.letop { color: var(--oranje-diep); }
.verval.letop small { color: var(--oranje-diep); }

.soortmerk {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 9px; background: var(--lijn); color: var(--dim);
  border-radius: var(--r-pil); display: inline-block;
}
.soortmerk.zzp { background: var(--oranje-zacht); color: var(--oranje-diep); }
.soortmerk.tijdelijk { background: var(--lijn-2); color: var(--sterk); }

/* Uren per week als staafjes. Genoeg om een patroon te zien, niet meer. */
.urengrafiek { display: flex; gap: 6px; align-items: flex-end; height: 108px; margin-bottom: 10px; }
/* De staaf mag krimpen; zonder min-width nul houdt hij de breedte van zijn
   weeknummer aan en past de rij op een telefoon niet meer. */
.urenstaaf { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  justify-content: flex-end; height: 100%; }
.urenstaaf i { display: block; background: var(--navy); min-height: 2px;
  border-radius: var(--r-s) var(--r-s) 0 0; }
.urenstaaf small {
  display: block; text-align: center; font-family: var(--mono); font-size: 9.5px;
  color: var(--label); margin-top: 4px; overflow: hidden;
}
/* Twaalf weeknummers naast elkaar passen niet op een telefoon. De eerste en de
   laatste geven het bereik, de staafjes doen de rest. Die twee dragen daarvoor
   een eigen klasse: de normlijn staat als eerste in de grafiek, dus met
   :first-child zou je de verkeerde te pakken hebben. */
@media (max-width: 520px) {
  .urenstaaf small { display: none; }
  .urenstaaf.rand small { display: block; }
}

/* Het bezettingsraster: mensen tegen maanden. Horizontaal scrollen mag, de
   pagina zelf niet. */
.rasterhoes { overflow-x: auto; background: var(--wit); margin-bottom: 14px;
  border-radius: var(--r); box-shadow: var(--schaduw); }
.bezettingsraster { width: 100%; border-collapse: collapse; min-width: 900px; }
.bezettingsraster th, .bezettingsraster td {
  padding: 7px 6px; border-bottom: 1px solid var(--lijn); text-align: center;
  font-size: 12px;
}
.bezettingsraster thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--label);
  background: var(--kop-bg); border-bottom: 1px solid var(--lijn-2); font-weight: 600;
}
.bezettingsraster thead th small { display: block; font-size: 9.5px; color: var(--label); }
.bezettingsraster th.nu, .bezettingsraster td.nu { background: var(--oranje-zacht); }
.bezettingsraster .wie {
  text-align: left; min-width: 190px; position: sticky; left: 0; background: var(--wit);
  border-right: 1px solid var(--lijn-2);
}
.bezettingsraster thead .wie { background: var(--kop-bg); }
.bezettingsraster .wie small { display: block; color: var(--label); font-size: 11px; }
.bezettingsraster .vak { min-width: 58px; }
.bezettingsraster .stapel { display: flex; gap: 1px; height: 8px; }
.bezettingsraster .stapel i { display: block; }
.bezettingsraster .pct { display: block; font-size: 10.5px; color: var(--label); margin-top: 3px; }
.bezettingsraster .pct.over { color: var(--rood); font-weight: 600; }
.bezettingsraster .pct.laag { color: var(--oranje-diep); }
.bezettingsraster .vak.leeg::after { content: ''; display: block; height: 8px; }

/* De legenda verklaart de kleuren, de uitleg eronder gaat over de percentages.
   Twee verschillende dingen, dus ze mogen niet als één blok lezen. */
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--dim);
  margin-bottom: 14px; }
.legenda i { display: inline-block; width: 10px; height: 10px; margin-right: 6px;
  vertical-align: -1px; border-radius: 3px; }

.balkregel {
  display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 10px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--lijn); font-size: 12.5px;
}
.balkregel:last-child { border-bottom: 0; }
.balkregel small { display: block; color: var(--label); font-size: 11px; }
.balkregel b { font-family: var(--sans); font-size: 12.5px; text-align: right; }

.kolommen.breed { grid-template-columns: minmax(0, 1fr) 310px; }

.lijst td.rechts, .lijst th.rechts { white-space: nowrap; }
.lijst.strak td:first-child { min-width: 190px; }

/* Status en impact als merkje. Alleen kritiek krijgt echte kleur; als alles
   kleurt, valt niets meer op. */
.status {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 9px; background: var(--lijn); color: var(--dim); white-space: nowrap;
  border-radius: var(--r-pil); display: inline-block;
}
.status.gehaald, .status.beheerst { background: var(--groen-zacht); color: var(--groen); }
.status.open { background: var(--oranje-zacht); color: var(--oranje-diep); }
.status.verschoven { background: var(--lijn-2); color: var(--sterk); }
.status.vervallen { background: var(--lijn); color: var(--label); }

.risicomerk {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 9px; background: var(--lijn); color: var(--dim); white-space: nowrap;
  border-radius: var(--r-pil); display: inline-block;
}
.risicomerk.kritiek { background: var(--rood-zacht); color: var(--rood); }
.risicomerk.fors { background: var(--oranje-zacht); color: var(--oranje-diep); }
.paneel .lijst td small b.let { font-weight: 600; }

.internmerk {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: 1px 8px; background: var(--lijn-2); color: var(--sterk); vertical-align: 1px;
  border-radius: var(--r-pil); display: inline-block;
}

/* Een datum die over twee regels valt is niet meer met de regel eronder te
   vergelijken; dat is precies waar een kolom voor is. */
.lijst td.datum, .lijst th.datum { white-space: nowrap; }

/* De contractnorm als streep door de grafiek: zonder referentie is een reeks
   staven van vergelijkbare hoogte betekenisloos. */
.urengrafiek { position: relative; padding-bottom: 18px; }
.urengrafiek .normlijn {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dashed var(--oranje); pointer-events: none; z-index: 1;
}
.urengrafiek .normlijn::after {
  content: attr(data-norm); position: absolute; right: 0; top: -14px;
  font-size: 10px; color: var(--oranje-diep); background: var(--wit); padding: 0 4px;
}
.urenstaaf { position: relative; z-index: 2; }
.urenstaaf i.boven { background: var(--oranje-diep); }

/* Labels in een feitenlijst horen niet af te breken; dan valt de uitlijning met
   de waarde ernaast weg. */
.feiten dt { white-space: nowrap; }


/* ── Smalle schermen ─────────────────────────────────────────────────────────
   Alles hieronder gaat over ruimte, niet over vorm: dezelfde onderdelen, minder
   marge, en kolommen die onder elkaar vallen zodra ze naast elkaar knellen. */

/* Een tabel is het enige dat op een telefoon echt niet past. Hij mag daarom als
   enige zijwaarts schuiven, in plaats van dat de hele pagina dat doet. */
/* De hoes ligt precies onder de tabel en heeft een eigen witte achtergrond voor
   de schuifschaduw. Zonder dezelfde hoek steekt daar in elke hoek een wit
   vierkantje onder de afgeronde tabelhoek uit. Bij een tabel met een witte
   eerste rij zie je dat niet, bij een tabel met een grijze kopregel wel: dat is
   waarom het bij de ene hoek klopte en bij de andere niet. */
.tabelhoes { overflow-x: auto; overscroll-behavior-x: contain;
  border-radius: var(--r); margin-bottom: 22px; }
/* Als laatste element hoeft er niets onder: dan zorgt het paneel of de pagina
   zelf al voor de afsluiting en zou de marge een gat trekken. */
.tabelhoes:last-child { margin-bottom: 0; }
/* Binnen een paneel is de ruimte krapper, daar hoort een tabel dichter op de
   toelichting eronder te staan. */
.paneel .tabelhoes { margin-bottom: 12px; }
.tabelhoes > .lijst { margin-bottom: 0; }

@media (max-width: 860px) {
  main { padding: 18px 14px 32px; }
  .top { height: 50px; padding: 0 14px; gap: 10px; }
  .top h2 { font-size: 14px; }

  h1 { font-size: 22px; }
  .paginakop { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 18px; }
  .paginakop .knoppen { flex-wrap: wrap; }
  .knop { padding: 10px 16px; }

  /* Een tabel houdt zijn kolombreedtes en schuift binnen zijn eigen kader; de
     hoek en de schaduw verhuizen mee naar dat kader. */
  .tabelhoes {
    border-radius: var(--r); box-shadow: var(--schaduw); background: var(--wit);
    margin-bottom: 16px; -webkit-overflow-scrolling: touch;
  }
  .tabelhoes > .lijst { border-radius: 0; box-shadow: none; border: 0; min-width: 560px; }
  .tabelhoes > .lijst.groot { min-width: 720px; }
  .paneel .tabelhoes { box-shadow: none; }

  .projecten { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cijfers { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .cijfer { padding: 13px 14px; }
  .cijfer b { font-size: 21px; }

  /* Het signaal valt uiteen in drie regels: waar het over gaat, wat het is, en
     wat eraan schort. In die volgorde leest het ook hardop. */
  .signalen { gap: 8px; }
  .signaal { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 14px; }
  .signaal .wat { font-size: 12.5px; }

  .kolommen, .kolommen.breed { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .formulier { padding: 18px 16px; }
  .formulier .duo { grid-template-columns: minmax(0, 1fr); }
  .upload, .nieuwemap { padding: 12px; }
  .werkbalk { gap: 10px; }
  .werkbalk .upload { flex: 1 1 100%; }
  .nieuwemap { flex: 1 1 100%; }

  /* De bestandenlijst houdt op een telefoon alleen naam en grootte over; de
     rest staat in het detailpaneel dat je met de i-knop opent. */
  .drivekop, .driverij { grid-template-columns: 32px minmax(0, 1fr) 74px; gap: 8px; padding: 0 8px; }
  .drivekop span:nth-child(3), .driverij > span:nth-child(3),
  .drivekop span:nth-child(4), .driverij > span:nth-child(4),
  .drivekop span:nth-child(5), .driverij > span:nth-child(5),
  .drivekop span:nth-child(6), .driverij > span:nth-child(6) { display: none; }
  .driverij { height: 56px; }
  .drivetegels { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .drivetabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .drivetabs::-webkit-scrollbar { display: none; }
  .drivebalk { gap: 8px; }
  .drivevlak { padding-bottom: 110px; }
  .detailpaneel { padding: 14px; }

  .bulkbalk { left: 12px; right: 12px; transform: none; max-width: none; bottom: 14px;
    flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .bulkbalk select { max-width: 140px; }

  .inlogpagina { padding: 16px; }
  .inlogpagina::before { background-size: 420px; background-position: calc(100% + 140px) -190px; opacity: .1; }
  .inlogkaart { padding: 24px 20px; }
  .merkgroot { max-width: 250px; margin-left: 0; }

  .lijst th, .lijst td { padding: 9px 11px; }
  .acties a { margin-left: 9px; }
  .balkregel { grid-template-columns: minmax(0, 1fr) 70px auto; gap: 8px; }
  .staaf { width: 62px; }
  .voorbeeldkader { height: 62vh; }
  .voorbeeldtekst { padding: 16px 14px; font-size: 12px; }
  .mapacties .uitklap { width: min(300px, calc(100vw - 40px)); }
}

/* Tot slot de echt smalle telefoon: hier staat het merk alleen op zijn regel,
   anders knijpt de naam van de gebruiker het logo plat. */
@media (max-width: 480px) {
  .zij { padding: 12px 14px 8px; }
  .zij .merk img { max-width: 140px; }
  .zij .onder { max-width: 50%; }
  .knoppen { gap: 6px; }
  .knop { padding: 9px 14px; font-size: 13.5px; }
  h1 { font-size: 20px; }
  .cijfers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .zoekbalk { padding: 7px 8px; }
  .zoekbalk .knop { width: 100%; }
  .drivetegels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Wie beweging heeft uitgezet, krijgt geen vloeiend schuivende lijsten. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* ── Schuifhint ──────────────────────────────────────────────────────────────
   Een kader dat opzij kan schuiven moet dat laten zien, anders mist iemand de
   helft van een tabel. Twee dekkende vlakken schuiven mee met de inhoud, twee
   schaduwen blijven staan: zodra er iets buiten beeld valt, verschijnt aan die
   kant een randje. Kost geen regel JavaScript. */

.tabelhoes, .rasterhoes {
  background-color: var(--wit);
  background-image:
    linear-gradient(to right, var(--wit) 40%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--wit) 40%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(15, 37, 70, .13), rgba(15, 37, 70, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(15, 37, 70, .13), rgba(15, 37, 70, 0));
  background-position: left center, right center, left center, right center;
  background-size: 26px 100%, 26px 100%, 13px 100%, 13px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

@media (max-width: 980px) {
  .zij nav {
    background-color: var(--navy);
    background-image:
      linear-gradient(to right, var(--navy) 40%, rgba(15, 37, 70, 0)),
      linear-gradient(to left, var(--navy) 40%, rgba(15, 37, 70, 0)),
      radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0)),
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0));
    background-position: left center, right center, left center, right center;
    background-size: 22px 100%, 22px 100%, 11px 100%, 11px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
}


/* ── Detailpaneel op een smal scherm ─────────────────────────────────────────
   Naast de lijst is er geen ruimte meer, en eronder zou het paneel buiten beeld
   openen: je tikt op de i en er lijkt niets te gebeuren. Het komt daarom als
   blad omhoog vanaf de onderkant, met de sluitknop die het al had. */

@media (max-width: 980px) {
  .detailpaneel:not([hidden]) {
    position: fixed; inset: auto 0 0 0; z-index: 60; width: auto;
    max-height: 74vh; overflow-y: auto;
    padding: 16px 16px 26px;
    border-radius: var(--r) var(--r) 0 0;
    box-shadow: 0 -20px 44px -20px rgba(15, 37, 70, .6);
  }
  .detailpaneel .paneelkop {
    position: sticky; top: -16px; background: var(--wit); margin-top: -4px;
    padding-top: 6px; z-index: 1;
  }
}

/* ===================================================================== */
/* Petromgroup: de onderdelen die bij de ombouw van Sinko zijn bijgekomen. */
/* Alles houdt dezelfde vier radii en dezelfde kleuren aan als hierboven;  */
/* er komt geen vijfde maat of een losse kleur bij.                        */
/* ===================================================================== */

/* Het woordmerk in de zijbalk. Zolang het echte logo van Petrom er niet is,
   staat de naam er als tekst. Vervangen door een <img> is één regel werk. */
.zij .merk img { display: block; width: 100%; max-width: 168px; height: auto; }
.merkgroot-tekst {
  display: block; font-size: 22px; font-weight: 700; color: var(--navy);
  letter-spacing: .01em; margin-bottom: 18px;
}

/* De wisselaar tussen de twee bv's. Zit onder het merk en niet in het menu,
   want het is geen bestemming maar een context waarin de rest staat. */
.bedrijfswissel { display: flex; gap: 4px; margin: 0 14px 16px; }
.bedrijfswissel a {
  flex: 1; text-align: center; padding: 6px 8px; border-radius: var(--r-s);
  font-size: 12px; font-weight: 600; color: var(--op-navy-dim);
  background: rgba(255, 255, 255, .06);
}
.bedrijfswissel a.actief { background: var(--oranje); color: var(--navy); }

/* Filterrij boven een lijst: discipline, soort, lengte van het venster. */
.filterrij { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 18px; }
.filterrij a {
  padding: 6px 13px; border-radius: var(--r-pil); font-size: 13px; font-weight: 600;
  color: var(--dim); background: var(--wit); border: 1px solid var(--lijn-2);
}
.filterrij a:hover { border-color: var(--oranje-lijn); color: var(--navy); }
.filterrij a.actief { background: var(--navy); border-color: var(--navy); color: var(--wit); }
.filterrij .scheiding { width: 1px; height: 20px; background: var(--lijn-2); margin: 0 6px; }

/* Kaartjes, voor huisvesting: een woning is geen tabelregel maar een plek
   met mensen erin, dus die leest beter als kaart. */
.kaartjes { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; }
.kaartje {
  background: var(--wit); border: 1px solid var(--lijn-2); border-radius: var(--r);
  padding: 18px; box-shadow: var(--schaduw);
}
.kaartje.leeg { border-style: dashed; }
.kaartje h3 { margin: 0 0 2px; font-size: 15px; }
.kaartje .meting { margin: 12px 0; }
.kaartje .mensjes { list-style: none; margin: 12px 0 0; padding: 0; }
.kaartje .mensjes li {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 5px 0; border-top: 1px solid var(--lijn); font-size: 14px;
}
.kaartje .mensjes small { color: var(--dim); }

/* Gegevensblok: label links, waarde rechts. */
.gegevens { display: grid; grid-template-columns: max-content 1fr; gap: 7px 18px; margin: 0; }
.gegevens dt { color: var(--label); font-size: 13px; }
.gegevens dd { margin: 0; font-size: 14px; }

.tweeluik { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .tweeluik { grid-template-columns: 1fr; } }

.zoekform { display: flex; gap: 8px; }
.zoekform input {
  padding: 9px 13px; border: 1px solid var(--lijn-2); border-radius: var(--r-m);
  font: inherit; min-width: 220px;
}

/* Formulier voor een nieuwe factuur. */
.formulier { display: grid; gap: 14px; max-width: 720px; }
.formulier label { display: grid; gap: 5px; font-size: 13px; color: var(--label); font-weight: 600; }
.formulier input, .formulier select, .formulier textarea {
  padding: 9px 12px; border: 1px solid var(--lijn-2); border-radius: var(--r-m);
  font: inherit; color: var(--tekst); background: var(--wit);
}
.formulier .regels { border: 1px solid var(--lijn-2); border-radius: var(--r-m); padding: 14px; }
.formulier .regels legend { font-size: 13px; color: var(--label); font-weight: 600; padding: 0 6px; }
.formulier .regel { display: grid; grid-template-columns: 3fr 1fr 1fr 1.4fr; gap: 8px; margin-bottom: 8px; }
@media (max-width: 700px) { .formulier .regel { grid-template-columns: 1fr 1fr; } }
.formulier .knoppen { display: flex; gap: 10px; }

/* Het factuurblad. Dit is het sjabloon dat Mustafa "volgens onze smaak" wilde:
   het staat los van de rest van de opmaak, want dit is wat de klant ziet. */
.factuurblad {
  background: var(--wit); border: 1px solid var(--lijn-2); border-radius: var(--r);
  padding: 34px; box-shadow: var(--schaduw); max-width: 860px;
}
.factuurblad > header {
  display: flex; justify-content: space-between; gap: 24px;
  padding-bottom: 22px; border-bottom: 2px solid var(--navy); margin-bottom: 22px;
}
.factuurblad h2 { margin: 0 0 4px; font-size: 20px; color: var(--navy); }
.factuurblad .groot { font-size: 19px; font-weight: 700; margin: 0 0 6px; }
.factuurblad .aan { margin-bottom: 24px; }
.factuurblad tfoot td { border-top: 1px solid var(--lijn-2); }
.factuurblad tfoot .totaal td { border-top: 2px solid var(--navy); font-size: 16px; }
@media (max-width: 640px) {
  .factuurblad { padding: 20px; }
  .factuurblad > header { flex-direction: column; }
  .factuurblad > header .rechts { text-align: left; }
}

/* ------------------------------------------------------------ planbord --- */
/* Mensen onder elkaar, weken naast elkaar, kleur per opdrachtgever. Dit is
   het scherm waarvan Mustafa zei dat de lijstversie te veel op een
   boekhoudprogramma leek. */
.legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; font-size: 13px; color: var(--dim); }
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.legenda i { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.legenda i.thuisblok {
  background: repeating-linear-gradient(45deg, #cfd6df 0 4px, #e6eaf0 4px 8px);
}

.planbord { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.planbord th, .planbord td {
  border-bottom: 1px solid var(--lijn); border-right: 1px solid var(--lijn);
  padding: 0; vertical-align: top;
}
.planbord thead th {
  background: var(--kop-bg); text-align: center; padding: 7px 4px;
  position: sticky; top: 0; z-index: 2; font-weight: 600;
}
.planbord thead th b { display: block; font-size: 13px; color: var(--navy); }
.planbord thead th small { display: block; font-size: 11px; color: var(--dim); }
.planbord th.naamkolom {
  position: sticky; left: 0; z-index: 3; background: var(--wit);
  text-align: left; padding: 8px 12px; min-width: 178px; font-weight: 600;
  box-shadow: 1px 0 0 var(--lijn-2);
}
.planbord thead th.naamkolom { background: var(--kop-bg); }
.planbord th.naamkolom small { display: block; font-weight: 400; color: var(--dim); font-size: 12px; }
.planbord tbody td { min-width: 62px; padding: 4px; background: var(--wit); }
.planbord .nu { background: var(--oranje-zacht); }
.planbord thead .nu { background: var(--oranje-lijn); }

.planbord .blok {
  display: block; border-radius: var(--r-s); padding: 3px 7px; margin-bottom: 3px;
  color: var(--wit); font-size: 11px; font-weight: 600; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.planbord .blok.thuis {
  background: repeating-linear-gradient(45deg, #cfd6df 0 5px, #e6eaf0 5px 10px);
  color: var(--tekst);
}

/* --------------------------------------------------------------- inloggen -- */
/* Het inlogscherm was een lijst met namen om uit te kiezen. Nu is het een
   formulier, en dat vraagt om andere maten: één kolom, ruime velden. */
.inlogform { display: grid; gap: 14px; text-align: left; margin: 22px 0 6px; }
.inlogform label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--label); }
.inlogform input {
  padding: 11px 14px; border: 1px solid var(--lijn-2); border-radius: var(--r-m);
  font: inherit; color: var(--tekst); background: var(--wit);
}
.inlogform input:focus { outline: 2px solid var(--oranje); outline-offset: 1px; border-color: var(--oranje); }
.inlogform .knop { margin-top: 4px; justify-content: center; }
.inlogmelding {
  border-radius: var(--r-m); padding: 10px 14px; font-size: 14px; margin: 6px 0 0; text-align: left;
}
.inlogmelding.fout { background: var(--rood-zacht); color: var(--rood); }
.inlogmelding.goed { background: var(--groen-zacht); color: var(--groen); }
.inlogvoet { font-size: 13px; color: var(--dim); margin-top: 16px; }
.inlogvoet a { text-decoration: underline; }

/* Uitnodigingslink in het beheerscherm: lang, dus hij moet kunnen breken en
   in één keer te selecteren zijn. */
.uitnodiging {
  background: var(--oranje-zacht); border: 1px solid var(--oranje-lijn);
  border-radius: var(--r-m); padding: 14px 16px; margin: 14px 0;
}
.uitnodiging code {
  display: block; word-break: break-all; font-size: 12px; margin-top: 8px;
  background: var(--wit); border: 1px solid var(--lijn-2); border-radius: var(--r-s); padding: 9px 11px;
}
.toegangsmerk { font-size: 12px; padding: 3px 9px; border-radius: var(--r-pil); font-weight: 600; }
.toegangsmerk.actief { background: var(--groen-zacht); color: var(--groen); }
.toegangsmerk.wacht  { background: var(--oranje-zacht); color: var(--oranje-diep); }

/* --------------------------------------------------------------- planbord -- */
/* Het bord is bewerkbaar geworden. Dat vraagt om drie dingen die er eerst niet
   waren: een balk met wat er nog ingepland moet worden, zichtbare doelen om
   iets op neer te zetten, en een waarschuwing die verschijnt vóór je loslaat.

   De waarschuwing staat vast onderin beeld en niet naast de muis. Een melding
   die met de muis meebeweegt lees je niet, die ontwijk je. */

.planbord.plannen tbody td { cursor: default; }
.planbord.plannen a.blok { text-decoration: none; cursor: pointer; }
.planbord.plannen a.blok:hover { filter: brightness(1.08); }
.planbord.plannen a.blok.gekozen {
  outline: 2px solid var(--navy); outline-offset: 1px;
}

/* Zodra er een opdracht wordt vastgehouden lichten de lege vakken op. Zonder
   dat zoek je naar waar je hem kwijt kunt. */
.planbord.planmodus tbody td { cursor: copy; }
.planbord.planmodus tbody td.leegvak { background: var(--oranje-zacht); }
.planbord.planmodus tbody td.leegvak.nu { background: var(--oranje-lijn); }

.planbord td.sleepdoel     { box-shadow: inset 0 0 0 2px var(--groen); }
.planbord td.sleepdoellet  { box-shadow: inset 0 0 0 2px var(--oranje-diep); }
.planbord td.sleepdoelfout { box-shadow: inset 0 0 0 2px var(--rood); }

/* De balk met opdrachten die nog bemensing missen. Bij Outsmart staat die
   onderin het scherm en sleep je omhoog; dat werkt, dus dat houden we aan.

   Vast onderin beeld, en dat is geen sierdetail. Met twaalf mensen in het
   raster staat de balk anders onder de vouw: je pakt een opdracht, scrolt
   omhoog terwijl je hem vasthoudt, en zoekt de rij. Slepen en scrollen
   tegelijk gaat niet. Zo blijft het bord bewegen en de balk staan. */
.planbalk {
  position: sticky; bottom: 0; z-index: 20;
  margin-top: 18px; padding-top: 12px;
  background: linear-gradient(to bottom, rgba(233, 237, 244, 0) 0, var(--vlak) 14px);
}
.planbalkkop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.planbalkkop h2 { font-size: 16px; margin: 0; }
.planbalkkop .sub { margin: 0; flex: 1 1 260px; }

.opdrachtrij {
  display: flex; gap: 10px; overflow-x: auto; padding: 10px 2px 12px;
  scrollbar-width: thin;
}
.opdrachtkaart {
  flex: 0 0 auto; width: 232px; text-align: left; cursor: grab;
  background: var(--wit); border: 1px solid var(--lijn-2); border-radius: var(--r-m);
  padding: 11px 13px; font: inherit; color: var(--tekst);
  display: grid; grid-template-columns: 12px 1fr; gap: 2px 9px; align-items: start;
}
.opdrachtkaart:hover { border-color: var(--oranje); }
.opdrachtkaart i {
  grid-row: 1 / span 3; width: 12px; height: 12px; border-radius: 3px; margin-top: 3px;
}
.opdrachtkaart b {
  font-size: 13px; color: var(--navy); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.opdrachtkaart small { font-size: 11.5px; color: var(--dim); line-height: 1.4; }
.opdrachtkaart small.staat { color: var(--groen); }
.opdrachtkaart.gat small.staat { color: var(--oranje-diep); }
.opdrachtkaart.gat { border-left: 3px solid var(--oranje); }
.opdrachtkaart.sleept { opacity: .45; }
.opdrachtkaart.vastgehouden {
  border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy); cursor: grabbing;
}

/* Het formulier is de weg die altijd werkt. Dichtgeklapt, want wie sleept heeft
   hem niet nodig, en wie hem nodig heeft zoekt hem hier. */
.planformulier > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--navy);
  padding: 8px 0; user-select: none;
}
.planformulier .formulier.breed { max-width: 560px; margin-top: 6px; }

.sleepwaarschuwing {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 40; max-width: min(560px, calc(100vw - 32px));
  background: var(--navy); color: var(--wit); font-size: 13px; line-height: 1.45;
  padding: 11px 16px; border-radius: var(--r-m); box-shadow: 0 8px 24px rgba(16,24,40,.22);
}
.sleepwaarschuwing.let  { background: var(--oranje-diep); }
.sleepwaarschuwing.fout { background: var(--rood); }

/* Het paneel waarin je een bestaande inzet bijstelt of weghaalt. */
.inzetpaneel { margin-bottom: 16px; scroll-margin-top: 16px; }
.inzetpaneel .paginakop { margin-bottom: 10px; }
.inzetpaneel h3 { margin: 0; font-size: 15px; }
.inzetpaneel .knoppen { margin-top: 12px; }

.bezwaren { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 6px; }
.bezwaren li { font-size: 13px; color: var(--tekst); display: flex; gap: 9px; align-items: baseline; }
.zwaarte {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: 2px 8px; border-radius: var(--r-pil);
}
.zwaarte.kritiek { background: var(--rood-zacht); color: var(--rood); }
.zwaarte.let     { background: var(--oranje-zacht); color: var(--oranje-diep); }

.melding.goed { border-left-color: var(--groen); }
.melding.fout { border-left-color: var(--rood); }
.melding.let  { border-left-color: var(--oranje-diep); }

@media (max-width: 720px) {
  .opdrachtkaart { width: 196px; }
  /* Op een telefoon is slepen toch geen optie en vreet een vaste balk het halve
     scherm op. Daar staat hij gewoon onderaan de pagina, en gebruik je de
     tik-variant of het formulier. */
  .planbalk { position: static; background: none; }
  .sleepwaarschuwing { left: 12px; right: 12px; bottom: 12px; transform: none; max-width: none; }
}