/* Stijl van de offertemodule — Exclusiva-huisstijl.
   Zakelijk en rustig, maar met duidelijke hiërarchie: donkere navigatiekolom,
   licht werkvlak, en kleur alleen daar waar hij iets betekent.

   Opzet in drie lagen, zodat een kleur of maat op één plek te wijzigen is:
     1. merkkleuren en schalen (de vaste waarden uit het huisstijlhandboek)
     2. rollen ("waar gebruiken we die kleur voor")
     3. componenten (knop, kaart, tabel, ...)
*/

:root {
  /* --- 1. merk: vaste waarden uit het huisstijlhandboek --- */
  --blauw: #008FD0;          /* hoofdkleur, dragend */
  --blauw-donker: #0072a8;   /* hover/actief */
  --blauw-diep: #005b87;
  --blauw-licht: #81CFF0;    /* accent */
  --blauw-vlak: #E2F4FD;     /* arceringen en tekstkaders */
  --oranje: #E59200;         /* spaarzaam: attentie en actie */
  --oranje-vlak: #FDF4E3;

  /* De navigatiekolom is diep blauwzwart: de chrome is donker, het werk is
     licht. Daardoor valt het blauw op waar het iets betekent. */
  --nacht: #0A2233;
  --nacht-op: #123449;       /* hover in de kolom */
  --nacht-lijn: #1d425a;

  --zwart: #0e1b24;
  --grijs-700: #45596a;
  --grijs-500: #6b7f8e;
  --grijs-400: #93a5b2;
  --grijs-300: #d3dee6;
  --grijs-200: #e3ebf1;
  --grijs-100: #eef3f7;
  --grijs-50: #f6f9fb;
  --canvas: #f1f5f8;
  --wit: #ffffff;

  --groen: #12683c;
  --groen-vlak: #e8f5ed;
  --rood: #a3231c;
  --rood-vlak: #fbecea;

  /* --- schalen: één ritme voor de hele applicatie --- */
  --ruimte-1: 4px;
  --ruimte-2: 8px;
  --ruimte-3: 12px;
  --ruimte-4: 16px;
  --ruimte-5: 24px;
  --ruimte-6: 32px;
  --ruimte-7: 48px;

  --rond-s: 6px;
  --rond-m: 10px;
  --rond-l: 14px;
  --rond-vol: 999px;

  --schaduw-s: 0 1px 2px rgba(10, 34, 51, .05);
  --schaduw-m: 0 4px 14px rgba(10, 34, 51, .07);
  --schaduw-l: 0 12px 32px rgba(10, 34, 51, .12);

  /* Helvetica Neue met Arial als terugval — zo schrijft het handboek het voor. */
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --kolom: 244px;            /* breedte van de navigatiekolom */
  --breed: 1240px;           /* leesbreedte van het werkvlak */

  /* --- 2. rollen --- */
  --inkt: var(--zwart);
  --inkt-zacht: var(--grijs-500);
  --lijn: var(--grijs-300);
  --lijn-zacht: var(--grijs-200);
  --vlak: var(--canvas);
  --accent: var(--blauw);
  --accent-donker: var(--blauw-donker);
  --gelukt: var(--groen);
  --gelukt-vlak: var(--groen-vlak);
  --fout: var(--rood);
  --fout-vlak: var(--rood-vlak);
  --waarschuwing: #8a5a00;
  --waarschuwing-vlak: var(--oranje-vlak);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--inkt);
  background: var(--vlak);
  -webkit-font-smoothing: antialiased;
}

/* Eén duidelijke focusring voor alles wat bedienbaar is: wie met het
   toetsenbord werkt moet altijd kunnen zien waar hij is. */
:focus-visible {
  outline: 3px solid var(--blauw-licht);
  outline-offset: 2px;
  border-radius: var(--rond-s);
}

a { color: var(--blauw-diep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--nacht); }

/* Wie geen beweging wil, krijgt geen beweging. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* --- app-indeling: navigatiekolom naast het werkvlak --- */

.app {
  display: grid;
  grid-template-columns: var(--kolom) minmax(0, 1fr);
  min-height: 100vh;
}

.kolom {
  background: var(--nacht);
  color: #cfdde7;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: var(--ruimte-5) var(--ruimte-4);
  gap: var(--ruimte-6);
  overflow-y: auto;
}

.merk {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-2);
  text-decoration: none;
  color: var(--wit);
  padding: 0 var(--ruimte-2);
}
.merk img { height: 26px; width: auto; display: block; }
.merk span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blauw-licht);
}

.kolom nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: auto;
}

.kolom nav a {
  display: flex;
  align-items: center;
  gap: var(--ruimte-3);
  color: #b6c9d6;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 9px var(--ruimte-3);
  border-radius: var(--rond-s);
  transition: background .12s, color .12s;
}
.kolom nav a:hover { background: var(--nacht-op); color: var(--wit); }
.kolom nav a[aria-current="page"] {
  background: var(--nacht-op);
  color: var(--wit);
  box-shadow: inset 3px 0 0 var(--blauw);
}

/* Een dunne scheiding met een eigen kopje maakt duidelijk dat beheer iets
   anders is dan het dagelijkse werk. */
.kolom nav .groep {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7e97a8;
  padding: var(--ruimte-4) var(--ruimte-3) var(--ruimte-1);
  margin-top: var(--ruimte-3);
  border-top: 1px solid var(--nacht-lijn);
}

.gebruiker {
  border-top: 1px solid var(--nacht-lijn);
  padding-top: var(--ruimte-4);
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-3);
  font-size: 13px;
}
.gebruiker .naam { color: var(--wit); font-weight: 600; }
.gebruiker em {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blauw-licht);
  margin-top: 2px;
}
.gebruiker form { margin: 0; }
.gebruiker button {
  background: transparent;
  border-color: var(--nacht-lijn);
  color: #b6c9d6;
  width: 100%;
  min-height: 34px;
  font-size: 13px;
}
.gebruiker button:hover {
  background: var(--nacht-op);
  border-color: var(--nacht-op);
  color: var(--wit);
  box-shadow: none;
}

.werkblad { display: flex; flex-direction: column; min-width: 0; }

main {
  max-width: var(--breed);
  width: 100%;
  margin: 0 auto;
  padding: var(--ruimte-6) var(--ruimte-6) var(--ruimte-7);
  flex: 1;
}

main.gecentreerd {
  max-width: 400px;
  padding-top: 12vh;
}

/* --- paginakop --- */

h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--ruimte-2);
  letter-spacing: -.02em;
}
h2 {
  font-size: 17px;
  font-weight: 700;
  margin: var(--ruimte-6) 0 var(--ruimte-3);
  letter-spacing: -.01em;
}
.ondertitel { color: var(--inkt-zacht); margin: 0 0 var(--ruimte-5); }

/* Kop met titel links en acties rechts; blijft staan bij scrollen zodat de
   knoppen op een lange offerte binnen bereik blijven. */
.paginakop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ruimte-5);
  flex-wrap: wrap;
  padding-bottom: var(--ruimte-4);
  margin-bottom: var(--ruimte-5);
  border-bottom: 1px solid var(--lijn);
}
.paginakop h1 { margin-bottom: var(--ruimte-1); }
.paginakop .ondertitel { margin-bottom: 0; }
.paginakop .acties { display: flex; gap: var(--ruimte-2); flex-wrap: wrap; }

/* Micro-kapitalen boven een titel: zegt wát je voor je hebt. */
.opschrift {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-donker);
  margin: 0 0 var(--ruimte-2);
}

.kaart {
  background: var(--wit);
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--rond-l);
  padding: var(--ruimte-5);
  margin-bottom: var(--ruimte-5);
  box-shadow: var(--schaduw-s);
}
.kaart > h2:first-child { margin-top: 0; }

/* --- kerncijfers op de startpagina --- */

.tegels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--ruimte-4);
  margin-bottom: var(--ruimte-5);
}

.tegel {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--wit);
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--rond-l);
  padding: var(--ruimte-5);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--schaduw-s);
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
a.tegel:hover {
  border-color: var(--blauw-licht);
  box-shadow: var(--schaduw-m);
  transform: translateY(-2px);
}
.tegel .getal {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--nacht);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
a.tegel:hover .getal { color: var(--accent-donker); }
.tegel .label {
  color: var(--inkt-zacht);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: var(--ruimte-2);
}

/* --- statusspoor: waar staat deze offerte in het proces --- */

.statusspoor {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0 0 var(--ruimte-5);
  padding: 0;
  background: var(--wit);
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--rond-l);
  box-shadow: var(--schaduw-s);
  overflow: hidden;
  flex-wrap: wrap;
}

.statusspoor .stap {
  flex: 1 1 180px;
  padding: var(--ruimte-4) var(--ruimte-5);
  border-left: 1px solid var(--lijn-zacht);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.statusspoor .stap:first-child { border-left: none; }

.statusspoor .nr {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grijs-400);
}
.statusspoor .naam { font-weight: 700; color: var(--grijs-500); letter-spacing: -.01em; }
.statusspoor .toelichting { font-size: 12.5px; color: var(--inkt-zacht); }

.statusspoor .stap.klaar { background: var(--grijs-50); }
.statusspoor .stap.klaar .naam { color: var(--grijs-700); }
.statusspoor .stap.klaar .nr { color: var(--gelukt); }

/* De stap waar de offerte nú staat, is de enige met kleurvlak. */
.statusspoor .stap.nu {
  background: var(--blauw-vlak);
  box-shadow: inset 0 3px 0 var(--accent);
}
.statusspoor .stap.nu .nr { color: var(--accent-donker); }
.statusspoor .stap.nu .naam { color: var(--nacht); }

.statusspoor .stap.afgewezen {
  background: var(--fout-vlak);
  box-shadow: inset 0 3px 0 var(--fout);
}
.statusspoor .stap.afgewezen .nr,
.statusspoor .stap.afgewezen .naam { color: var(--fout); }

/* --- formulieren --- */

label {
  display: block;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .01em;
  margin-bottom: var(--ruimte-1);
  color: var(--grijs-700);
}

input[type=text], input[type=email], input[type=password], input[type=file],
input[type=date], input[type=number], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-s);
  font: inherit;
  background: var(--wit);
  color: var(--inkt);
  transition: border-color .12s, box-shadow .12s;
}
textarea { resize: vertical; min-height: 88px; line-height: 1.6; }

input:hover, select:hover, textarea:hover { border-color: var(--grijs-500); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--blauw-vlak);
  outline: none;
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--grijs-100);
  color: var(--inkt-zacht);
  border-color: var(--lijn-zacht);
  cursor: not-allowed;
}
::placeholder { color: var(--grijs-400); }

.veld { margin-bottom: var(--ruimte-4); }

/* --- knoppen --- */

button, .knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-2);
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid var(--accent);
  border-radius: var(--rond-s);
  background: var(--accent);
  color: var(--wit);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .12s;
}
button:hover, .knop:hover {
  background: var(--accent-donker);
  border-color: var(--accent-donker);
  color: var(--wit);
  box-shadow: var(--schaduw-m);
}
button:active, .knop:active { background: var(--blauw-diep); transform: translateY(1px); }
button:disabled, .knop:disabled {
  background: var(--grijs-200);
  border-color: var(--grijs-200);
  color: var(--grijs-500);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.knop-secundair {
  background: var(--wit);
  color: var(--nacht);
  border-color: var(--lijn);
}
.knop-secundair:hover {
  background: var(--grijs-50);
  color: var(--nacht);
  border-color: var(--grijs-500);
  box-shadow: var(--schaduw-s);
}

.knop-klein {
  min-height: 32px;
  padding: var(--ruimte-1) var(--ruimte-3);
  font-size: 13px;
  font-weight: 600;
  background: var(--wit);
  color: var(--grijs-700);
  border: 1px solid var(--lijn);
}
.knop-klein:hover {
  background: var(--grijs-100);
  color: var(--inkt);
  border-color: var(--grijs-500);
  box-shadow: none;
}

/* --- meldingen --- */

/* Meldingen blijven in beeld, ook als je verderop op de pagina staat: na het
   opslaan van een lange offerte keer je terug naar je eigen plek en zou je de
   bevestiging bovenaan anders missen. */
.meldingen {
  position: sticky;
  top: var(--ruimte-4);
  z-index: 15;
  margin-bottom: var(--ruimte-5);
}
.melding {
  padding: var(--ruimte-3) var(--ruimte-4);
  border-radius: var(--rond-m);
  border: 1px solid;
  border-left-width: 3px;
  margin-bottom: var(--ruimte-2);
  box-shadow: var(--schaduw-m);
  transition: opacity .4s ease, transform .4s ease;
}
.melding.verdwijnt {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
.melding.gelukt { background: var(--gelukt-vlak); border-color: #bfe0cd; color: var(--gelukt); }
.melding.fout { background: var(--fout-vlak); border-color: #f0c4c0; color: var(--fout); }
.melding.waarschuwing {
  background: var(--waarschuwing-vlak);
  border-color: #f0dcb4;
  color: var(--waarschuwing);
}

/* Onmiskenbare vermelding dat de bedragen exclusief BTW zijn. */
.btw-banner {
  background: var(--nacht);
  border-radius: var(--rond-m);
  padding: var(--ruimte-3) var(--ruimte-4);
  margin-bottom: var(--ruimte-4);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .01em;
  color: var(--wit);
  box-shadow: inset 3px 0 0 var(--blauw-licht);
}

/* Kleine invoervelden binnen een tabelrij. */
input.mini {
  width: 76px;
  padding: 6px 8px;
  margin-bottom: 0;
}
input.bedrag-invoer { width: 100px; text-align: right; font-variant-numeric: tabular-nums; }

/* --- tabellen --- */

.tabelomhulsel {
  overflow-x: auto;
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--rond-l);
  background: var(--wit);
  box-shadow: var(--schaduw-s);
  margin-bottom: var(--ruimte-5);
}
.kaart .tabelomhulsel {
  border: none;
  box-shadow: none;
  border-radius: 0;
  margin-bottom: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--wit);
}

th, td {
  text-align: left;
  padding: var(--ruimte-3) var(--ruimte-4);
  border-bottom: 1px solid var(--lijn-zacht);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--grijs-50); }

/* Kopregels zonder kleurvlak: één stevige lijn geeft genoeg structuur en de
   cijfers eronder krijgen alle aandacht. */
th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--grijs-500);
  background: var(--wit);
  white-space: nowrap;
  border-bottom: 1.5px solid var(--nacht);
  padding-top: var(--ruimte-4);
}

/* Een offertenummer is één geheel en breekt dus nooit over meerdere regels. */
.nummer { white-space: nowrap; letter-spacing: .01em; }

/* Artikelcodes zijn kenmerken, geen tekst: ze breken nooit af en staan in een
   vaste letterbreedte zodat je ze kunt vergelijken. */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  white-space: nowrap;
  background: var(--grijs-100);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--grijs-700);
}

td.bedrag, th.bedrag { text-align: right; white-space: nowrap; }
td.bedrag { font-variant-numeric: tabular-nums; }
tr.inactief td { color: var(--inkt-zacht); background: var(--grijs-50); }

.miniatuur {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--rond-s);
  display: block;
  background: var(--grijs-50);
}

.specs { font-size: 12px; color: var(--inkt-zacht); max-width: 320px; line-height: 1.5; }

/* --- merkjes en statussen --- */

.merkje {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: var(--rond-vol);
  border: 1px solid var(--lijn);
  background: var(--grijs-50);
  color: var(--grijs-700);
  white-space: nowrap;
}

/* De status van een offerte is het eerste waar iemand naar kijkt; een stip
   plus kleur maakt in één oogopslag duidelijk wat er moet gebeuren. */
.status-merk {
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status-merk::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.status-concept {
  background: var(--grijs-100);
  color: var(--grijs-700);
  border-color: var(--grijs-300);
}
.status-ter-beoordeling {
  background: var(--oranje-vlak);
  color: var(--waarschuwing);
  border-color: #f0dcb4;
}
.status-geaccordeerd {
  background: var(--gelukt-vlak);
  color: var(--gelukt);
  border-color: #bfe0cd;
}
.status-afgekeurd {
  background: var(--fout-vlak);
  color: var(--fout);
  border-color: #f0c4c0;
}
.status-verstuurd {
  background: var(--blauw-vlak);
  color: var(--blauw-diep);
  border-color: var(--blauw-licht);
}
.status-gewonnen {
  background: var(--gelukt-vlak);
  color: var(--gelukt);
  border-color: #bfe0cd;
}
.status-verloren {
  background: var(--grijs-100);
  color: var(--fout);
  border-color: #f0c4c0;
}
/* Geen status maar een markering: verstuurd en de geldigheid is voorbij. */
.status-verlopen {
  background: var(--oranje-vlak);
  color: var(--waarschuwing);
  border-color: #f0dcb4;
  margin-left: 4px;
}

/* Interne gegevens (inkoopprijs/marge) — nooit op de klant-PDF. */
.intern { background: #fbfcfd; }
.intern-kop { color: var(--waarschuwing); }

.uitleg-intern {
  background: var(--waarschuwing-vlak);
  border: 1px solid #f0dcb4;
  border-left: 3px solid var(--oranje);
  color: var(--waarschuwing);
  border-radius: var(--rond-m);
  padding: var(--ruimte-3) var(--ruimte-4);
  font-size: 13px;
  margin-bottom: var(--ruimte-4);
}

/* --- validatierapport --- */

.rapportlijst { margin: 0 0 var(--ruimte-4); padding-left: var(--ruimte-5); }
.rapportlijst li { margin-bottom: var(--ruimte-1); }
.rapport-fout { color: var(--fout); }
.rapport-waarschuwing { color: var(--waarschuwing); }

/* --- voettekst --- */

.voet {
  max-width: var(--breed);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--ruimte-6) var(--ruimte-6);
  color: var(--inkt-zacht);
  font-size: 12px;
}

.rijknoppen {
  display: flex;
  gap: var(--ruimte-2);
  flex-wrap: wrap;
  align-items: center;
}
.rijknoppen form { margin: 0; display: flex; gap: var(--ruimte-2); align-items: center; }
.rijknoppen select { width: auto; padding: 7px 10px; font-size: 13px; min-height: 36px; }
.rijknoppen input[type=password] { width: 150px; padding: 7px 10px; font-size: 13px; }

/* --- inloggen --- */

/* Het inlogscherm staat op het donkere merkvlak: het eerste wat je ziet is
   Exclusiva, niet een leeg formulier. */
body.inlogvlak {
  background: var(--nacht);
  background-image: radial-gradient(circle at 50% 0%, #123449 0%, var(--nacht) 62%);
}
body.inlogvlak .kaart {
  border: none;
  box-shadow: var(--schaduw-l);
  padding: var(--ruimte-6);
}
body.inlogvlak .voet { color: #7e97a8; text-align: center; }

.inlogkop {
  text-align: center;
  margin-bottom: var(--ruimte-6);
}
.inlogkop img { height: 30px; }
.inlogkop .opschrift { margin-top: var(--ruimte-3); color: var(--blauw-licht); }

/* --- kleiner scherm: de kolom wordt een balk --- */

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .kolom {
    height: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ruimte-4);
    padding: var(--ruimte-3) var(--ruimte-4);
    overflow: visible;
    z-index: 20;
  }
  .merk { flex-direction: row; align-items: center; gap: var(--ruimte-3); padding: 0; }
  .merk span { border-left: 1px solid var(--nacht-lijn); padding-left: var(--ruimte-3); }
  .kolom nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--ruimte-1);
    order: 3;
    width: 100%;
    margin: 0;
  }
  .kolom nav a[aria-current="page"] {
    box-shadow: inset 0 -3px 0 var(--blauw);
  }
  .kolom nav .groep { display: none; }
  .gebruiker {
    border-top: none;
    padding-top: 0;
    margin-left: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--ruimte-3);
  }
  .gebruiker em { display: inline; margin-left: var(--ruimte-2); }
  .gebruiker button { width: auto; }
  .meldingen { top: var(--ruimte-2); }
}

@media (max-width: 720px) {
  main { padding: var(--ruimte-5) var(--ruimte-4) var(--ruimte-6); }
  .voet { padding: 0 var(--ruimte-4) var(--ruimte-5); }
  h1 { font-size: 23px; }
  .kaart { padding: var(--ruimte-4); }
  th, td { padding: var(--ruimte-2) var(--ruimte-3); }
  .statusspoor .stap { flex-basis: 100%; border-left: none; border-top: 1px solid var(--lijn-zacht); }
  .statusspoor .stap:first-child { border-top: none; }
  /* Knoppen naast elkaar worden op een telefoon snel te smal. */
  .kaart > form > button, .kaart > button { width: 100%; }
}

/* Eigen wachtwoord wijzigen, onderaan de navigatiekolom bij de naam. */
.eigen-wachtwoord {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  margin: var(--ruimte-2) 0;
}
.eigen-wachtwoord:hover { color: #fff; text-decoration: underline; }

/* --- artikelbeheer --- */

/* De filterrij boven de artikellijst: velden naast elkaar zolang het past,
   en op een telefoon onder elkaar. */
.filterrij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-3);
  align-items: flex-end;
}
.filterrij .veld { margin-bottom: 0; flex: 1 1 180px; }
.filterrij button { flex: 0 0 auto; }

/* Een miniatuur in de lijst: vaste hoogte, zodat de rijen niet gaan dansen
   bij foto's van verschillende verhoudingen. */
.artikelfoto-klein {
  height: 44px;
  width: 64px;
  object-fit: contain;
  display: block;
  background: #fff;
  border: 1px solid var(--lijn-zacht);
  border-radius: 4px;
}

/* De huidige foto in het formulier, groot genoeg om te beoordelen of het de
   juiste machine is. */
.artikelfoto-huidig img {
  max-width: 280px;
  max-height: 200px;
  width: auto;
  height: auto;
  display: block;
  background: #fff;
  border: 1px solid var(--lijn-zacht);
  border-radius: 6px;
  padding: var(--ruimte-2);
}
.artikelfoto-huidig .ondertitel { margin: var(--ruimte-2) 0 var(--ruimte-4); }

/* Verwijderen staat buiten het hoofdformulier: anders zou de browser het als
   tweede verzendknop van hetzelfde formulier kunnen behandelen. Wel met
   ruimte eromheen, zodat niemand het per ongeluk voor Opslaan aanziet. */
.losse-actie { margin: var(--ruimte-4) 0 var(--ruimte-5); }

@media (max-width: 720px) {
  .filterrij .veld { flex-basis: 100%; }
  .filterrij button { width: 100%; }
}

@media print {
  .kolom, .voet, button, .knop { display: none !important; }
  body, .app { background: #fff; display: block; }
  .kaart, .tabelomhulsel { border: none; box-shadow: none; padding: 0; }
}