:root {
  /* Kleuren voor grafieken: slot 1 en 2 uit het gevalideerde palet. Deze twee
     zijn ook voor kleurenblinden te onderscheiden (ΔE 9,2) en houden genoeg
     contrast met het vlak eronder. Nooit doorschuiven: elke reeks houdt zijn
     eigen kleur, ook als er een wegvalt. */
  --serie-1:     #2a78d6;
  --serie-2:     #eb6834;

  /* Het blauw was bijna zwart (#0b3d91). Dat leest als zwaar en oud; hetzelfde
     blauw dat Kassanext gebruikt is lichter, even goed leesbaar op wit, en
     maakt de twee producten van hetzelfde huis. */
  --blue:        #2563eb;
  --blue-600:    #1d4ed8;
  --blue-700:    #1e40af;
  --blue-50:     #eff5ff;
  --blue-100:    #dbe7fe;

  --ink:         #0f1729;
  --ink-zacht:   #3d4759;
  --muted:       #6b7688;
  --zwak:        #98a2b3;

  /* Lijnen mogen nauwelijks te zien zijn. Wat een vlak begrenst is de ruimte
     eromheen, niet de streep. */
  --line:        #e8edf5;
  --line-fijn:   #f1f4f9;
  --bg:          #f7f9fc;
  --card:        #ffffff;

  --green:       #15803d;
  --green-bg:    #e9f7ef;
  --amber:       #b45309;
  --amber-bg:    #fff6e8;
  --red:         #b91c1c;
  --red-bg:      #fdeced;
  --paars:       #6d28d9;
  --paars-bg:    #f3edfe;

  /* Wat eerder als losse kleur in de regels stond, zodat de donkere modus er
     ook bij kan: invoervelden, rijen die oplichten, stippellijnen, randen om
     gekleurde vlakken en de bovenkant van het inlogscherm. */
  --input-bg:    #ffffff;
  --hover:       #fbfcfe;
  --chip:        #f1f4f9;
  --dash:        #c5cfdd;
  --blue-line:   #d6e2f7;
  --green-line:  #cbeada;
  --amber-line:  #f4e2c0;
  --red-line:    #f6d2d2;
  --amber-chip:  #fef3c7;
  --amber-chip-ink: #92400e;
  --amber-chip-line: #fde68a;
  --logo-donker: #0f2747;
  --login-glans: #e8eefb;
  --papier:      #eef1f6;
  --topbar:      rgba(255,255,255,.85);

  --radius:      14px;
  --radius-klein: 10px;

  /* Zachter en verder weg: een schaduw hoort te suggereren dat iets een laagje
     hoger ligt, niet dat het zweeft. */
  --shadow:      0 1px 2px rgba(15,23,41,.04), 0 1px 3px rgba(15,23,41,.03);
  --shadow-op:   0 4px 6px -2px rgba(15,23,41,.06), 0 12px 28px -8px rgba(15,23,41,.10);
}

/* ── Donkere modus ─────────────────────────────────────────────────────────
   Dezelfde tokens, andere waarden. Wie "Systeem" kiest volgt het apparaat;
   "Licht" of "Donker" dwingt af via data-thema op <html>. */
[data-thema="donker"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="licht"]) { color-scheme: dark; } }

[data-thema="donker"],
:root:not([data-thema="licht"]).systeem-donker {
  --blue:        #6b9cf6;
  --blue-600:    #5b8def;
  --blue-700:    #a9c3fa;
  --blue-50:     #172239;
  --blue-100:    #1f3052;

  --ink:         #e8edf5;
  --ink-zacht:   #c3cbd8;
  --muted:       #8f9bb0;
  --zwak:        #66738a;

  --line:        #273140;
  --line-fijn:   #202936;
  --bg:          #0f141c;
  --card:        #171d28;

  --green:       #5ad38a;
  --green-bg:    #142519;
  --amber:       #f2b544;
  --amber-bg:    #2a2212;
  --red:         #f0706f;
  --red-bg:      #2c1717;
  --paars:       #b8a4f7;
  --paars-bg:    #231c36;

  --shadow:      0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3);
  --shadow-op:   0 4px 6px -2px rgba(0,0,0,.4), 0 12px 28px -8px rgba(0,0,0,.55);

  --input-bg:    #10161f;
  --hover:       #1b2230;
  --chip:        #202937;
  --dash:        #3a4658;
  --blue-line:   #27406a;
  --green-line:  #1f4a2f;
  --amber-line:  #4a3a14;
  --red-line:    #4c2222;
  --amber-chip:  #2a2212;
  --amber-chip-ink: #f2b544;
  --amber-chip-line: #4a3a14;
  --logo-donker: #e8edf5;
  --login-glans: #16203a;
  --papier:      #0b0f16;
  --topbar:      rgba(15,20,28,.85);
}

* { box-sizing: border-box; }

/* Moet vóór alles komen: .app, .login-wrap en .modal-wrap zetten zelf een
   display-waarde, en die wint anders van de standaard [hidden]-regel van de
   browser — met een onzichtbare modal-overlay over de hele pagina tot gevolg. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 640; letter-spacing: -.02em; line-height: 1.25; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
a { color: var(--blue); }

/* ── Merk ─────────────────────────────────────────────────────────────────── */
.brand { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.brand strong { display: block; font-size: 15px; }
.brand small { color: var(--muted); font-size: 12px; }

/* Het woordmerk van cloudsys.nl, met dezelfde opmaak en kleuren als daar. */
.logo {
  display: inline-flex; align-items: baseline;
  font-weight: 800; letter-spacing: -0.02em;
  font-size: 26px; line-height: 1.1;
}
.logo .cloud { color: var(--logo-donker); }
.logo .sys   { color: #2563eb; }

/* ── Inloggen ─────────────────────────────────────────────────────────────── */
.login-wrap {
  min-height: 100%;
  display: grid; place-items: center;
  padding: 24px;
  background: radial-gradient(1200px 600px at 50% -10%, var(--login-glans), var(--bg));
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 28px;
  display: grid; gap: 16px;
}
.login-intro { margin: 0; color: var(--muted); font-size: 14px; }

label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
label > span { color: var(--muted); font-weight: 600; }

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(11,61,145,.12);
}
textarea { min-height: 110px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
input[type="checkbox"] { width: auto; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235f6f85' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

/* ── Knoppen ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px;
  font: inherit; font-weight: 570; font-size: 14px; letter-spacing: -.005em;
  border: 1px solid var(--line);
  border-radius: var(--radius-klein);
  background: var(--card); color: var(--ink-zacht);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, box-shadow .12s;
  transition: background .12s, border-color .12s, opacity .12s;
}
.btn:hover:not(:disabled) { background: var(--bg); border-color: var(--dash); color: var(--ink); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: var(--blue-600); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger:hover:not(:disabled) { background: #b02020; }
.btn.ghost { background: transparent; }
.btn.block { width: 100%; }
.btn.sm { padding: 6px 11px; font-size: 13px; border-radius: 8px; }
.icon-btn {
  border: 1px solid var(--line); background: var(--card); border-radius: 9px;
  width: 38px; height: 38px; font-size: 17px; cursor: pointer; color: var(--ink);
}

/* ── Indeling ─────────────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 244px 1fr; min-height: 100%; }

.sidebar {
  background: var(--card);
  border-right: 1px solid var(--line);
  padding: 20px 16px;
  display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 0; height: 100vh;
}
.sidebar nav { display: grid; gap: 1px; align-content: start; flex: 1; overflow-y: auto; }

/* Een menuregel: icoon in een vaste kolom, tekst ernaast, en links plaats voor
   de balk die het actieve item aanwijst. Die balk staat er altijd — hij is
   alleen doorzichtig als het item niet actief is. Zou hij er pas bíj komen,
   dan schoof de tekst een paar pixels op zodra je ergens op klikte. */
.sidebar nav button {
  position: relative;
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center;
  gap: 12px; width: 100%;
  padding: 10px 12px 10px 14px;
  font: inherit; font-weight: 550; font-size: 14.5px;
  color: var(--ink-zacht); text-align: left;
  background: none; border: 0; border-radius: 9px; cursor: pointer;
  transition: background .12s, color .12s;
}
.sidebar nav button::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--blue); opacity: 0;
  transition: opacity .12s;
}
.sidebar nav button:hover { background: var(--bg); color: var(--ink); }
.sidebar nav button.active { background: var(--blue-50); color: var(--blue); font-weight: 650; }
.sidebar nav button.active::before { opacity: 1; }

.nav-ico {
  width: 20px; height: 20px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.sidebar nav button.active .nav-ico { stroke-width: 2; }
.nav-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidebar-foot { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 10px; }
.who { display: flex; align-items: center; gap: 10px; }
.who strong { display: block; font-size: 13px; }
.who small { color: var(--muted); font-size: 12px; }
.avatar {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  /* Vol gekleurd en niet lichtblauw op wit: dit is het enige plekje in de
     zijbalk dat over jóú gaat, en dat mag je zien. */
  border-radius: 50%; background: var(--blue); color: #fff; font-weight: 650;
  font-weight: 700; font-size: 13px;
}

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 32px;
  background: var(--topbar);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
@media (max-width: 700px) { .topbar { padding: 14px 16px; } }
.topbar h1 { flex: 1; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.customer-picker { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.customer-picker select { padding: 7px 30px 7px 10px; }
/* Ruim, en met een maximum: een tabel die over drieduizend pixels uitwaaiert
   leest niemand meer. */
.content { padding: 30px 32px 48px; display: grid; gap: 22px; align-content: start;
           width: 100%; max-width: 1360px; }
@media (max-width: 700px) { .content { padding: 20px 16px 32px; } }

/* ── Kaarten ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 20px 24px; border-bottom: 1px solid var(--line-fijn);
}
.card-head h2 { flex: 1; min-width: 0; }
.card-body { padding: 22px 24px; display: grid; gap: 16px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 16px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
         padding: 20px 22px; box-shadow: var(--shadow); }
/* Een tegel die doorverwijst naar het bijbehorende scherm. */
.stat-klik {
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.stat-klik:hover {
  border-color: var(--blue);
  box-shadow: 0 2px 6px rgba(16,32,54,.08), 0 12px 28px rgba(16,32,54,.10);
}

.stat b { display: block; font-size: 30px; font-weight: 650; letter-spacing: -.03em;
           font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat span { color: var(--muted); font-size: 13.5px; }

/* ── Tabellen ─────────────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--zwak); font-weight: 650;
  padding: 12px 20px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
td { padding: 15px 20px; border-bottom: 1px solid var(--line-fijn); vertical-align: middle; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--hover); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--hover); }
td .sub { display: block; color: var(--muted); font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.right { text-align: right; }
.actions-cell { white-space: nowrap; display: flex; gap: 6px; justify-content: flex-end; }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: -.005em;
  background: var(--chip); color: var(--muted);
}
.badge.blauw  { background: var(--blue-50); color: var(--blue-700); }
.badge.paars  { background: var(--paars-bg); color: var(--paars); }
.badge.ok    { background: var(--green-bg); color: var(--green); }
.badge.warn  { background: var(--amber-bg); color: var(--amber); }
.badge.err,
/* `error` is de naam die je vanzelf typt; hem alleen `err` laten heten levert
   stilletjes een grijs merkje op waar rood hoorde te staan. */
.badge.error { background: var(--red-bg);   color: var(--red); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ── Meldingen ────────────────────────────────────────────────────────────── */
.alert { padding: 11px 14px; border-radius: 9px; font-size: 13.5px; border: 1px solid transparent; }
.alert.error { background: var(--red-bg);   color: var(--red);   border-color: var(--red-line); }
.alert.ok    { background: var(--green-bg); color: var(--green); border-color: var(--green-line); }
.alert.info  { background: var(--blue-50);  color: var(--blue);  border-color: var(--blue-line); }
.alert.warn  { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-line); }

/* Balk terwijl een beheerder in de klantweergave zit */
.peek-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 16px 24px -6px;
  padding: 11px 16px;
  background: var(--amber-bg); color: var(--amber);
  border: 1px solid var(--amber-line); border-radius: 10px;
  font-size: 13.5px;
}
.peek-bar button { margin-left: auto; }

.empty { padding: 44px 20px; text-align: center; color: var(--muted); }
.empty p { margin: 6px 0 16px; }

/* Ondertitel onder een kaartkop, bijvoorbeeld bij welke eindklant je kijkt. */
.card-sub {
  margin: -6px 0 0; padding: 0 16px 12px;
  color: var(--muted); font-size: 12.5px;
}

.hint { color: var(--muted); font-size: 12.5px; margin: 0; }
/* Een hint die om aandacht vraagt, bijvoorbeeld dat Windows hier niet past. */
/* Een hint met uitleg in plaats van een waarschuwing. */
.hint.info-hint {
  color: var(--blue-700);
  background: var(--blue-50);
  border: 1px solid var(--blue-line);
  border-radius: 8px;
  padding: 8px 10px;
}

.hint.warn {
  color: var(--amber-chip-ink);
  background: var(--amber-chip);
  border: 1px solid var(--amber-chip-line);
  border-radius: 8px;
  padding: 8px 10px;
}

/* ── Dialoog ──────────────────────────────────────────────────────────────── */
.modal-wrap {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16,32,54,.42);
  display: grid; place-items: center;
  padding: 20px;
  overflow-y: auto;
}
.modal {
  width: 100%; max-width: 520px;
  background: var(--card); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(16,32,54,.24);
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
}
.modal.wide { max-width: 720px; }
/* Een factuur is 210mm breed; op het scherm is dat bijna 800 pixels. Het
   venster moet dus ruimer zijn dan het gewone brede venster, anders past het
   vel er niet in en valt de rand weg. */
.modal.papier { max-width: 880px; }
.modal-head { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.modal-head h2 { flex: 1; }
/* align-content: start houdt elke rij op zijn eigen hoogte; zonder dit worden
   velden samengedrukt zodra de modal niet op het scherm past, in plaats van
   dat de body gewoon gaat scrollen. */
.modal-body {
  padding: 20px;
  display: grid;
  gap: 14px;
  align-content: start;
  overflow-y: auto;
}
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }
.close-x { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.check-row { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; }
.check-row input { margin: 0; }

/* Keuzelijst met kaarten (pakketten).
   Bewust géén eigen max-height met overflow: zo'n geneste scrollcontainer
   krijgt in een grid min-height:0 en werd bij een krappe modal platgedrukt,
   en verstopte bovendien de onderste pakketten achter een scrollbalk.
   De lijst groeit nu gewoon mee; de modal zelf scrollt. */
.pick-list {
  display: grid;
  gap: 8px;
  padding: 2px;
}
.pick {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; background: var(--card);
  /* Nooit meekrimpen met een krappe modal. */
  min-height: 58px;
  flex: none;
}
.pick:hover { border-color: var(--dash); }
.pick.on { border-color: var(--blue); background: var(--blue-50); box-shadow: 0 0 0 1px var(--blue) inset; }
/* Niet display:none — een verborgen radio is dan in sommige browsers niet meer
   via het label te bedienen. Zo blijft hij bestaan en toetsenbord-bereikbaar. */
.pick input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
}
.pick-main { flex: 1; min-width: 0; }
.pick-main b { display: block; font-size: 14px; }
.pick-main small { color: var(--muted); font-size: 12.5px; }
.pick-price { font-weight: 650; font-size: 14px; white-space: nowrap; }
.pick-price small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; }

/* Prijsoverzicht onderin de bestelpagina */
.prijs-blok {
  background: var(--blue-50);
  border: 1px solid var(--blue-line);
  border-radius: 10px;
  padding: 14px 16px;
}
.prijs-blok:empty { display: none; }
.prijs-regel {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  padding: 3px 0;
  color: var(--ink);
}
.prijs-regel span:last-child { font-variant-numeric: tabular-nums; }
.prijs-regel.totaal {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--blue-line);
  font-weight: 680;
  font-size: 16px;
  color: var(--blue);
}

.secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #16202e; color: #7fe0a8;
  padding: 12px 14px; border-radius: 9px;
  font-size: 14px; word-break: break-all;
  display: flex; align-items: center; gap: 10px;
}
.secret span { flex: 1; }

/* ── Toasts ───────────────────────────────────────────────────────────────── */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: grid; gap: 9px; max-width: 340px; }
.toast {
  background: #16202e; color: #fff;
  padding: 12px 15px; border-radius: 10px;
  font-size: 13.5px; box-shadow: 0 10px 30px rgba(16,32,54,.28);
  animation: pop .18s ease-out;
}
.toast.ok  { background: #0f7a46; }
.toast.err { background: #b02020; }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }

/* ── Laden ────────────────────────────────────────────────────────────────── */
.spinner {
  width: 17px; height: 17px; flex: none;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite;
}
.btn:not(.primary):not(.danger) .spinner { border-color: rgba(0,0,0,.15); border-top-color: var(--blue); }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { padding: 44px; text-align: center; color: var(--muted); }

.scrim { display: none; }
.only-mobile { display: none; }

/* ── Klein scherm ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: 262px; z-index: 50;
    transform: translateX(-100%); transition: transform .22s ease;
  }
  .app.nav-open .sidebar { transform: none; }
  .app.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(16,32,54,.4); z-index: 40; }
  .only-mobile { display: grid; place-items: center; }
  .content { padding: 16px; }
  .topbar { padding: 12px 16px; }
  .grid-2 { grid-template-columns: 1fr; }
  .customer-picker span { display: none; }
}


/* ── Factuurweergave ───────────────────────────────────────────────────────
   Een factuur is een A4 met vaste maten. Op een smal scherm past die niet;
   in plaats van de pagina te laten krimpen — waardoor het briefpapier niet
   meer op de tekst aansluit — verkleinen we het hele vel in één keer. De
   verhoudingen blijven dan kloppen. */
.papier-vlak {
  background: var(--papier);
  padding: 24px 16px;
  overflow: auto;
  display: flex;
  justify-content: center;
}

.papier-vlak .factuur-vel {
  box-shadow: 0 2px 8px rgba(16,32,54,.10), 0 18px 44px rgba(16,32,54,.16);
  flex: none;
}
/* Het vel brengt zijn eigen opmaak mee (inline, zodat de mail er hetzelfde
   uitziet). De tabelstijl van het portaal — celpadding, onderranden,
   hoofdletters in de kop — moet daar niet overheen vallen, anders staat het
   adres in beheer twintig pixels verder naar rechts dan op de pdf. */
.papier-vlak .factuur-vel table { width: auto; font-size: inherit; }
.papier-vlak .factuur-vel table[width="100%"] { width: 100%; }
.papier-vlak .factuur-vel th,
.papier-vlak .factuur-vel td { padding: 0; border: 0; vertical-align: top; text-transform: none; letter-spacing: normal; font-size: inherit; color: inherit; background: transparent; }
.papier-vlak .factuur-vel tr:hover { background: transparent; }

/* Onder de breedte van een A4 plus wat lucht het vel evenredig verkleinen. */
@media (max-width: 900px) {
  .papier-vlak .factuur-vel {
    transform: scale(.68);
    transform-origin: top center;
    margin-bottom: -95mm;   /* de ruimte die door het verkleinen vrijkomt */
  }
}

@media (max-width: 640px) {
  .papier-vlak { padding: 12px 6px; }
  .papier-vlak .factuur-vel {
    transform: scale(.46);
    margin-bottom: -160mm;
  }
}


/* ── Grafieken ─────────────────────────────────────────────────────────────
   Het raster staat op de achtergrond, de lijn is het onderwerp. */
.graf { position: relative; margin: 6px 0 2px; }
.graf svg { width: 100%; height: 150px; display: block; overflow: visible; }

.graf-raster  { stroke: var(--line); stroke-width: 1; }
.graf-aslabel { fill: var(--muted); font-size: 11px; }
.graf-streep  { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.graf-vangst  { cursor: crosshair; }

.graf-tip {
  position: absolute; top: 4px;
  background: var(--ink); color: #fff;
  border-radius: 8px; padding: 8px 10px;
  font-size: 12px; line-height: 1.5;
  pointer-events: none; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(16,32,54,.2);
  transform: translateX(-50%);
  z-index: 2;
}
.graf-tip[style*="right"] { transform: translateX(50%); }
.graf-tip-tijd { color: #b8c2d4; margin-bottom: 4px; }
.graf-tip-rij  { display: flex; align-items: center; gap: 6px; }
.graf-tip-rij strong { margin-left: auto; padding-left: 12px; }

.graf-stip {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; flex: none;
}

.graf-legenda {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted); margin-bottom: 2px;
}
.graf-legenda span { display: inline-flex; align-items: center; gap: 6px; }

.graf-kop {
  display: flex; align-items: baseline; gap: 10px;
  margin: 18px 0 2px;
}
.graf-kop h3 { margin: 0; }
.graf-kop .nu { margin-left: auto; font-size: 13px; color: var(--muted); }
.graf-kop .nu b { color: var(--ink); font-size: 15px; }


/* ── Serverpagina ──────────────────────────────────────────────────────────
   De gegevens in kolommen die meebewegen met de breedte: op een breed scherm
   naast elkaar, op een telefoon onder elkaar. */
.gegevens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 20px;
}
.gegeven > span {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--zwak);
  margin-bottom: 3px;
}
.gegeven > div { font-size: 14px; }
.gegeven .sub { display: block; }

.knoppenrij {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* De kop van de serverpagina: terugknop, naam en status op één regel. */
.card-head h2 { min-width: 0; }

/* ── Support ──────────────────────────────────────────────────────────────── */

/* Het bolletje in het menu bij Support. Absoluut gepositioneerd zodat een
   langere menunaam er niet door verspringt. */
.sidebar nav button { position: relative; }

.nav-badge {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  line-height: 18px;
  text-align: center;
}

/* Een ticket waar de andere kant op wacht valt op zonder schreeuwerig te zijn:
   alleen een streep aan de zijkant en een iets vetter onderwerp. */
tr.onbeantwoord td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
tr.onbeantwoord strong { font-weight: 700; }

.gesprek { display: flex; flex-direction: column; gap: 14px; }

.bericht {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--card);
  max-width: 88%;
}

/* Eigen berichten rechts, die van de ander links: zo is in één oogopslag te
   zien wie aan het woord is, ook zonder de naam te lezen. */
.bericht.eigen  { align-self: flex-end; background: var(--blue-50); border-color: var(--blue-line); }
.bericht.ander  { align-self: flex-start; }

/* Een interne notitie hoort er zichtbaar anders uit te zien dan een bericht
   dat de klant kan lezen — dat verschil mag nooit onduidelijk zijn. */
.bericht.notitie {
  align-self: flex-end;
  background: var(--amber-bg);
  border-color: var(--amber-line);
  border-left: 3px solid var(--amber);
}

.bericht-kop {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 13px;
}
.bericht-kop .sub { margin: 0; margin-left: auto; }

.bericht-tekst {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}

/* "Gesloten door …" — een gebeurtenis, geen bericht. */
.gebeurtenis {
  align-self: center;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  padding: 2px 0;
}
.gebeurtenis span { display: block; font-size: 11.5px; opacity: .8; }

@media (max-width: 640px) {
  .bericht { max-width: 100%; }
}

/* ── Tweestapsverificatie ─────────────────────────────────────────────────── */

.qr-vak {
  display: flex;
  justify-content: center;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 10px 0 16px;
}
.qr-vak svg { max-width: 220px; height: auto; }

/* De sleutel om over te typen: ruim gezet, want dit wordt teken voor teken
   overgenomen en dan telt elke spatie. */
.sleutel {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  letter-spacing: .08em;
  word-break: break-all;
  margin-bottom: 16px;
  user-select: all;
}

.herstelcodes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  letter-spacing: .04em;
  margin: 12px 0;
  user-select: all;
}

@media (max-width: 480px) {
  .herstelcodes { grid-template-columns: 1fr; }
}

/* ── Tabbladen in een venster ─────────────────────────────────────────────── */

.tabs {
  display: flex;
  gap: 2px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  overflow-x: auto;
}

.tabs .tab {
  border: 0;
  background: none;
  padding: 11px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  /* De lijn onder het actieve tabblad valt samen met de rand van de balk;
     zo lijkt het tabblad aan het vlak eronder vast te zitten. */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tabs .tab:hover  { color: var(--ink); }
.tabs .tab.actief { color: var(--blue); border-bottom-color: var(--blue); }

/* ── Contactpersonen ──────────────────────────────────────────────────────── */

.contactkaart {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--card);
}

.contactkaart label { margin-bottom: 10px; }
.contactkaart .check-row { font-size: 13.5px; }

/* Het klantnummer in de lijst: smal en rustig, het is een kenmerk en geen
   gegeven waar je op leest. */
.klantnr { color: var(--muted); font-size: 13px; }

/* De tabbalk onder de kop, boven de inhoud. Plakt aan de bovenkant zodat je
   bij een lange instellingenpagina kunt blijven wisselen zonder te scrollen. */
#subnav.subnav {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 0 24px;
}

@media (max-width: 720px) {
  #subnav.subnav { padding: 0 14px; }
}

/* ── Klantdossier ─────────────────────────────────────────────────────────── */

.kengetallen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.kengetal {
  background: var(--bg);
  border-radius: 10px;
  padding: 14px 16px;
}
.kengetal b    { display: block; font-size: 21px; color: var(--ink); }
.kengetal span { font-size: 12.5px; color: var(--muted); }

/* Een openstaand bedrag hoort op te vallen; dat is waar je naar zoekt. */
.kengetal.let-op    { background: var(--amber-bg); }
.kengetal.let-op b  { color: var(--amber); }

/* ── Logboek ──────────────────────────────────────────────────────────────── */

.logboek { display: flex; flex-direction: column; gap: 12px; }

.logregel {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
  background: var(--card);
}

/* Een taak die nog open staat valt op met een gekleurde rand — anders zoek je
   hem tussen tien gespreksverslagen. */
.logregel.openstaand { border-left-color: var(--amber); background: var(--amber-bg); }

.logkop {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 13.5px;
}
.logkop .sub    { margin: 0; margin-left: auto; }
.logkop .btn.sm { padding: 3px 9px; font-size: 12px; }

.logicoon { font-size: 15px; opacity: .7; }

.logtekst {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14.5px;
  line-height: 1.55;
}

/* Materiaalregels op een werkbon: omschrijving breed, aantal en eenheid smal. */
.matregel {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.matregel input:first-child { flex: 1; min-width: 120px; }
.matregel input { margin: 0; }

@media (max-width: 560px) {
  .matregel { flex-wrap: wrap; }
  .matregel input:first-child { flex-basis: 100%; }
}

/* ── Offertes ──────────────────────────────────────────────────────────────
   Een regel is drie kolommen: links een vakje voor een foto, in het midden
   wat het is met de prijs en daaronder een toelichting over de volle
   breedte, rechts de knoppen om te schuiven en weg te halen. De toelichting
   is vaak een halve zin en moet niet met de prijsvelden om ruimte
   concurreren. */
.offerteregel {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
  background: var(--card);
}
.offerteregel-boven { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.offerteregel-boven > input:first-child { flex: 1 1 220px; min-width: 0; }
.ofregel-velden { min-width: 0; }
.ofregel-velden textarea {
  width: 100%;
  margin: 6px 0 0;
  resize: none;
  min-height: 38px;
  overflow: hidden;
  font: inherit;
  font-size: 13.5px;
}
/* Inleiding en afsluiting zijn lopende tekst, geen code: gewone letter. */
#ofIntro, #ofOutro { font: inherit; font-size: 14px; min-height: 90px; }
.ofregel-aantal  { width: 64px;  text-align: right; }
.ofregel-prijs   { width: 96px;  text-align: right; }
.ofregel-termijn { width: 124px; }
.ofregel-bedrag {
  min-width: 92px;
  text-align: right;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ofregel-knoppen { display: flex; flex-direction: column; gap: 4px; }
.ofregel-knoppen .btn.sm { padding: 4px 8px; line-height: 1.2; }

/* Het fotovakje: leeg een gestippeld vierkant met een camera, gevuld de
   miniatuur met een kruisje in de hoek. Je kunt erop klikken én er iets op
   laten vallen. */
.ofregel-beeld {
  position: relative;
  width: 64px;
  height: 64px;
  border: 1.5px dashed var(--dash);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--zwak);
  cursor: pointer;
  background: var(--bg);
  overflow: hidden;
  transition: border-color .15s, color .15s, background .15s;
}
.ofregel-beeld:hover, .ofregel-beeld.sleep-over { border-color: var(--blue); color: var(--blue); background: var(--blue-50); }
.ofregel-beeld.met-beeld { border-style: solid; border-color: var(--line); background: var(--card); }
.ofregel-beeld.vast { cursor: default; }
.ofregel-beeld.vast:hover { border-color: var(--line); background: var(--card); }
.ofregel-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ofregel-beeld-weg {
  position: absolute; top: 2px; right: 2px;
  width: 20px; height: 20px;
  border: 0; border-radius: 50%;
  background: rgba(15,23,41,.72); color: #fff;
  font-size: 11px; line-height: 20px; padding: 0;
  cursor: pointer;
  display: none;
}
.ofregel-beeld.met-beeld:hover .ofregel-beeld-weg { display: block; }

/* Het valvak voor losse afbeeldingen. */
.sleepvak {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  border: 1.5px dashed var(--dash);
  border-radius: var(--radius);
  color: var(--ink-zacht);
  background: var(--bg);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color .15s, background .15s;
}
.sleepvak svg { flex: none; color: var(--zwak); }
.sleepvak:hover, .sleepvak.sleep-over { border-color: var(--blue); background: var(--blue-50); }
.sleepvak:hover svg, .sleepvak.sleep-over svg { color: var(--blue); }
.sleepvak u { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* De galerij: kaartjes met beeld, bijschrift en knoppen. Een breed beeld
   neemt de hele rij. */
.ofgalerij {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.ofgalerij:empty { display: none; }
.ofbeeldkaart {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ofbeeldkaart.breed { grid-column: 1 / -1; }
.ofbeeldkaart-beeld {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-klein);
  overflow: hidden;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.ofbeeldkaart.breed .ofbeeldkaart-beeld { aspect-ratio: 16 / 7; }
.ofbeeldkaart-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ofbeeldkaart input { margin: 0; font-size: 13.5px; }
.ofbeeldkaart-knoppen { display: flex; gap: 4px; align-items: center; }
.ofbeeldkaart-knoppen .btn.sm { padding: 4px 8px; }
.ofbeeldkaart.bezig .ofbeeldkaart-beeld { color: var(--muted); font-size: 13px; }

/* De knoppenbalk onderaan blijft in beeld: het scherm is lang en Opslaan
   moet niet drie schermen naar beneden staan. */
.ofbalk {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-top: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-op);
}
.ofbalk-samen {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.ofbalk-samen:empty { display: none; }

/* De link voor de klant: adres, kopieerknop, openen. */
.oflink { display: flex; gap: 8px; align-items: center; }
.oflink input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--blue-700); background: var(--blue-50); border-color: var(--blue-line); }
.oflink .btn { white-space: nowrap; }
.ofbezoek { margin-top: 10px; font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ofhandtekening { display: block; max-height: 90px; margin-top: 10px; background: #fff; border-radius: 8px; padding: 6px; border: 1px solid var(--green-line); }

/* ── De blokken in de editor ──────────────────────────────────────────────
   Elk blok is een kaart met een kop (handvat, type, knoppen) en velden. De
   kaart is bewust rustiger dan de pagina zelf: hier werk je, daar kijk je. */
.ofblokken { display: flex; flex-direction: column; gap: 12px; }
.ofblok {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  transition: box-shadow .15s, border-color .15s;
}
.ofblok.sleept { opacity: .5; }
.ofblok.boven { box-shadow: 0 -3px 0 0 var(--blue); }
.ofblok.onder { box-shadow: 0 3px 0 0 var(--blue); }
.ofblok-kop {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 10px;
  border-bottom: 1px solid var(--line-fijn);
  background: var(--bg);
  border-radius: var(--radius) var(--radius) 0 0;
}
.ofblok-handvat { cursor: grab; color: var(--zwak); letter-spacing: -2px; font-size: 16px; padding: 0 2px; user-select: none; }
.ofblok-handvat:active { cursor: grabbing; }
.ofblok-icoon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--blue-50); color: var(--blue-700); font-size: 13px; font-weight: 700; flex: none; }
.ofblok-samenvatting { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.ofblok-knoppen { display: flex; gap: 4px; flex: none; }
.ofblok-knoppen .btn.sm { padding: 4px 8px; }
.ofblok-velden { padding: 14px 14px 16px; }
.ofblok-velden label { margin-bottom: 10px; }
.ofblok-velden textarea, .ofblok-velden .ofregel-details { font: inherit; font-size: 14px; min-height: 40px; resize: none; overflow: hidden; }
.ofblok-velden textarea.groei { min-height: 72px; }
.ofblok-velden .ofregel-details.groei { min-height: 38px; font-size: 13.5px; }
.ofblok-erbij { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.ofblok-erbij .btn.sm { padding: 5px 10px; }

.ofhero { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.ofcontact { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }

/* Een vak waar één beeld in past: de kop, de contactfoto. */
.ofbeeldvak {
  position: relative; overflow: hidden; cursor: pointer;
  border: 1.5px dashed var(--dash); border-radius: 12px; background: var(--bg);
  color: var(--zwak); display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s;
}
.ofbeeldvak.groot { aspect-ratio: 16 / 10; }
.ofbeeldvak.klein { width: 96px; height: 96px; }
.ofbeeldvak.rond { border-radius: 50%; }
.ofbeeldvak:hover, .ofbeeldvak.sleep-over { border-color: var(--blue); background: var(--blue-50); color: var(--blue); }
.ofbeeldvak.met-beeld { border-style: solid; border-color: var(--line); background: var(--card); }
.ofbeeldvak.vast { cursor: default; }
.ofbeeldvak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ofbeeldvak-leeg { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; text-align: center; padding: 10px; }
.ofbeeldvak.klein .ofbeeldvak-leeg span { display: none; }
.ofbeeldvak-weg {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: rgba(15,23,41,.72); color: #fff; font-size: 12px; line-height: 24px; padding: 0; cursor: pointer; display: none;
}
.ofbeeldvak.met-beeld:hover .ofbeeldvak-weg { display: block; }

/* Tegels in de editor */
.oftegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 10px; }
.oftegel { border: 1px solid var(--line); border-radius: var(--radius-klein); padding: 10px; background: var(--bg); }
.oftegel-boven { display: flex; gap: 6px; margin-bottom: 6px; }
.oftegel-icoon { width: 48px; text-align: center; padding-left: 6px; padding-right: 6px; }
.oftegel textarea { background: var(--input-bg); }

/* De modus van een prijsregel */
.ofregel-modus { margin-top: 6px; align-items: flex-start; }
.ofregel-modus .ofregel-details { flex: 1 1 240px; margin: 0; }
.ofvink { display: inline-flex !important; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-zacht); white-space: nowrap; align-self: center; margin: 0; }
.ofvink input { width: auto; margin: 0; }
.ofvink[hidden] { display: none !important; }
/* Wat je typt is gewone tekst, geen label: niet vet. */
.ofblok-velden input, .ofblok-velden textarea, .ofblok-velden select { font-weight: 400; }

/* Het voorbeeld: de echte pagina in een venster. */
.ofvoorbeeld { background: var(--papier); padding: 16px; display: flex; justify-content: center; border-radius: 0 0 var(--radius) var(--radius); }
.ofvoorbeeld iframe { width: 100%; height: 900px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px -14px rgba(15,23,41,.3); transition: width .2s; }
.ofvoorbeeld.mobiel iframe { width: 400px; height: 780px; border-radius: 28px; border: 10px solid #1a2233; }
.ofvoorbeeld.klant { padding: 0; background: transparent; }
.ofvoorbeeld.klant iframe { height: 1200px; border-radius: var(--radius); box-shadow: none; }

/* ── Maatwerk ──────────────────────────────────────────────────────────────
   Kaarten in een raster: elke kaart is één ding dat de klant heeft, met de
   velden die daarbij horen. Geen tabel, want elke kaart heeft andere kolommen. */
.mwraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.mwkaart {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 10px;
}
.mwkaart.uit { opacity: .62; }
.mwkaart-kop { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mwkaart h3 { margin: 0; font-size: 16.5px; font-weight: 650; line-height: 1.3; }
.mwomschrijving { font-size: 14px; color: var(--ink-zacht); line-height: 1.55; }
.mwvelden { display: grid; gap: 6px 14px; grid-template-columns: max-content 1fr; font-size: 13.5px; background: var(--bg); border-radius: var(--radius-klein); padding: 10px 12px; }
.mwveld { display: contents; }
.mwveld > span { color: var(--muted); font-size: 12.5px; padding-top: 1px; }
.mwveld > div { word-break: break-word; }
.mwnotitie { font-size: 13px; color: var(--amber); background: var(--amber-bg); border-radius: var(--radius-klein); padding: 8px 12px; line-height: 1.5; }
.mwnotitie > span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: 2px; }
.mwkaart-voet { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line-fijn); font-size: 14px; }
.mwveldenvorm { margin: 4px 0 6px; padding: 12px; background: var(--bg); border-radius: var(--radius-klein); }
.mwveldrij { display: grid; grid-template-columns: 1fr 2fr auto; gap: 6px; margin-bottom: 6px; }
.mwveldrij input { margin: 0; }
.mwtekst { font: inherit; font-size: 14px; min-height: 70px; }
@media (max-width: 560px) { .mwveldrij { grid-template-columns: 1fr auto; } .mwveldrij input:nth-child(2) { grid-column: 1 / -1; } }

/* ── Weergave (licht/donker) ──────────────────────────────────────────────
   De knop toont wat je krijgt als je klikt: de maan in het licht, de zon in
   het donker. */
#themaKnop { display: inline-grid; place-items: center; }
#themaKnop .thema-zon { display: none; }
[data-thema="donker"] #themaKnop .thema-zon,
:root:not([data-thema="licht"]).systeem-donker #themaKnop .thema-zon { display: block; }
[data-thema="donker"] #themaKnop .thema-maan,
:root:not([data-thema="licht"]).systeem-donker #themaKnop .thema-maan { display: none; }
.thema-keuze { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.thema-keuze button { border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); padding: 7px 14px; border-radius: 8px; cursor: pointer; }
.thema-keuze button.actief { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
/* De offertepagina en de factuur zijn documenten: die blijven licht, ook in het donker. */
.ofvoorbeeld iframe, .papier-vlak .factuur-vel { color-scheme: light; }

/* ── E-mail bij een klant ─────────────────────────────────────────────────── */
.maillijst { display: flex; flex-direction: column; }
.mailrij { display: flex; gap: 12px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--line-fijn); }
.mailrij:first-child { border-top: 0; }
.mailrij.bewaard .mailrij-onderwerp { color: var(--muted); }
.mailrij-tekst { flex: 1; min-width: 0; }
.mailrij-onderwerp { font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; }
.mailrij-onderwerp:hover { text-decoration: underline; }
.mailrij-tekst .sub { display: block; }
.mailrij.bewaard { background: var(--green-bg); margin: 0 -4px; padding-left: 8px; padding-right: 8px; border-radius: 8px; border-top-color: transparent; }
.mailrij .btn.sm { padding: 4px 8px; }
/* De maillezer */
.mailkop { padding: 12px 22px 10px; border-bottom: 1px solid var(--line); font-size: 13.5px; display: grid; gap: 4px; }
.mailkop > div > span:first-child { display: inline-block; width: 64px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.mailinhoud { background: #fff; }
.mailinhoud iframe { width: 100%; height: 320px; border: 0; display: block; }

/* ── Integraties ─────────────────────────────────────────────────────────── */
.intraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.intkaart { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--card); display: flex; flex-direction: column; gap: 8px; }
.intkaart-kop { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.intkaart .hint { flex: 1; }

/* ── Prijscheck en distributeurs ─────────────────────────────────────────── */
.pczoek { display: flex; gap: 8px; }
.pczoek input { flex: 1; font-size: 16px; padding: 12px 14px; }
.pcdistri { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
tr.pcbeste td { background: var(--green-bg); }
.distriraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.distrikaart { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--card); display: grid; gap: 8px; align-content: start; }
.distrikaart label { margin: 0; }
.distrikaart .hint { margin: 0 0 4px; }
.distrikaart label small.hint { display: block; margin-top: 3px; font-size: 12px; }
.distrikaart label em.sub { font-style: normal; }
.distrilijst { font-size: 13px; padding: 8px 10px; border-radius: var(--radius-klein); background: var(--bg); border: 1px solid var(--line-fijn); }
.distrilijst .sub { display: block; margin-top: 3px; }

/* ITdocu op de klantenkaart */
.ittellers { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.ittel { border: 1px solid var(--line); border-radius: var(--radius-klein); padding: 8px 10px; background: var(--bg); }
.ittel strong { display: block; font-size: 20px; line-height: 1.1; }
.ittel span { font-size: 12px; color: var(--muted); }
.itcontacten { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; }
.itdagboek div { padding: 6px 0; border-top: 1px solid var(--line-fijn); font-size: 13px; }
.itdagboek .sub { display: block; }
.itgeheimen { display: flex; flex-direction: column; }
.itgeheim { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line-fijn); }
.itgeheim-tekst { flex: 1; min-width: 0; }
.itgeheim-tekst .sub { display: block; }
.itgeheim-waarde { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 4px 8px; border-radius: var(--radius-klein); background: var(--amber-bg); color: var(--ink); font-size: 14px; user-select: all; }

/* De bibliotheek */
.oflib { display: flex; flex-direction: column; gap: 8px; }
.oflib-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-klein); }
.oflib-item > div { flex: 1; min-width: 0; }
.oflib-item .sub { display: block; }

@media (max-width: 720px) {
  .ofhero, .ofcontact { grid-template-columns: 1fr; }
  .ofblok-samenvatting { display: none; }
  .ofblok-knoppen .btn.sm[data-bewaar] { display: none; }
  .ofvoorbeeld iframe { height: 700px; }
}
.prijs-groep + .prijs-groep { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--blue-line); }

@media (max-width: 720px) {
  .offerteregel { grid-template-columns: 56px minmax(0, 1fr); }
  .ofregel-beeld { width: 56px; height: 56px; }
  .ofregel-knoppen { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
  .offerteregel-boven > input,
  .offerteregel-boven > select { flex: 1 1 auto; }
  .ofregel-bedrag { flex: 1 1 100%; text-align: left; }
  .ofbalk { bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
  .ofbalk-samen { flex-basis: 100%; margin-left: 0; }
}

/* ── Kassa ──────────────────────────────────────────────────────────────────
   Links de mand, rechts de knoppen. Op een aanraakscherm is alles minstens
   zestig pixels hoog: kleiner mis je met een vinger, en dan sla je het
   verkeerde aan terwijl er iemand staat te wachten. */

.kassa-blad {
  display: grid;
  grid-template-columns: minmax(320px, 400px) 1fr;
  gap: 16px;
  align-items: start;
}

.kassa-mand { position: sticky; top: 16px; display: flex; flex-direction: column; }
.kassa-mand .table-scroll { max-height: 46vh; overflow-y: auto; }

.mandtabel td { padding: 10px 8px; vertical-align: middle; }
.mandtabel td.aantal { white-space: nowrap; text-align: center; width: 108px; }
.mandtabel td.aantal span { display: inline-block; min-width: 26px; font-variant-numeric: tabular-nums; }
.leeg-mand { text-align: center; color: var(--muted, #6b7280); padding: 34px 10px; }

.kassa-totaal {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 16px; border-top: 1px solid var(--line, #e5e7eb);
}
.kassa-totaal span { color: var(--muted, #6b7280); }
.kassa-totaal strong { font-size: 30px; font-variant-numeric: tabular-nums; }

.kassa-betalen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 16px; }
.btn.groot { min-height: 60px; font-size: 17px; }

.kassa-zoek {
  width: 100%; padding: 14px 16px; font-size: 17px;
  border: 1px solid var(--line, #e5e7eb); border-radius: 10px;
}
.kassa-groepen { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }

.kassa-knoppen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.kassa-knop {
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  min-height: 84px; padding: 12px 14px; text-align: left;
  border: 1px solid var(--line, #e5e7eb); border-radius: 10px;
  background: var(--card); font: inherit; cursor: pointer;
}
.kassa-knop:hover { border-color: var(--blue, #1e6ed4); }
.kassa-knop:active { transform: translateY(1px); }
.kassa-knop .kn { font-weight: 600; line-height: 1.25; }
.kassa-knop .kp { color: var(--muted, #6b7280); font-variant-numeric: tabular-nums; }

.afreken-bedrag {
  font-size: 40px; font-weight: 700; text-align: center;
  padding: 10px 0 18px; font-variant-numeric: tabular-nums;
}
.snelgeld { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 14px; }
.wisselgeld {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 14px; border-radius: 10px; background: var(--blue-50, #eef3fc); margin-bottom: 14px;
}
.wisselgeld strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.wisselgeld .tekort { color: #c62828; font-weight: 600; }

tr.uit td { opacity: .55; }

@media (max-width: 900px) {
  .kassa-blad { grid-template-columns: 1fr; }
  .kassa-mand { position: static; }
}

.kassa-dagblad { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dagtabel { width: 100%; }
.dagtabel td { padding: 9px 4px; border-bottom: 1px solid var(--line); }
.dagtabel td.right { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dagtabel tr.tot td { font-weight: 700; font-size: 17px; border-top: 2px solid var(--line); }
.dagtabel tr.tot.goed td { color: var(--green); }
.dagtabel tr.tot.mis td { color: #c62828; }
.afsluit-vak h3 { margin: 0 0 12px; font-size: 15px; }
.afsluit-klaar p { margin: 0 0 12px; }

@media (max-width: 900px) { .kassa-dagblad { grid-template-columns: 1fr; } }

.kassa-knop .kp { display: flex; flex-direction: column; gap: 2px; }
.kassa-knop .kx { font-size: 11px; opacity: .7; }
.kassa-subtotalen {
  display: flex; justify-content: space-between;
  padding: 10px 16px 0; color: var(--muted); font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Inklapbare groepen. De kop is een knop, met het pijltje rechts zodat de
   koppen onder elkaar op één lijn beginnen — net als de menu-items eronder. */
.sidebar nav button.nav-group {
  grid-template-columns: 1fr auto;
  margin-top: 12px; padding: 8px 12px 8px 14px;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink); text-transform: none;
}
.sidebar nav button.nav-group:first-child { margin-top: 0; }
.sidebar nav button.nav-group:hover { background: var(--bg); color: var(--ink); }
.sidebar nav button.nav-group::before { display: none; }
.sidebar nav button.nav-group .pijl {
  width: 18px; height: 18px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transform: rotate(90deg); transition: transform .15s ease;
  color: var(--zwak);
}
.sidebar nav button.nav-group.dicht .pijl { transform: rotate(0deg); }
.sidebar nav .nav-items { display: grid; gap: 1px; }

/* De voet: minimaliseren, wie je bent, en eruit. */
.nav-klein, .nav-uit {
  display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 12px;
  width: 100%; padding: 10px 12px 10px 14px;
  font: inherit; font-size: 14px; font-weight: 550; color: var(--ink-zacht);
  background: none; border: 0; border-radius: 9px; cursor: pointer; text-align: left;
}
.nav-klein:hover, .nav-uit:hover { background: var(--bg); color: var(--ink); }
.nav-klein .pijl {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; justify-self: center;
  transition: transform .2s ease;
}
.app.nav-smal .nav-klein .pijl { transform: rotate(180deg); }

/* Ingeklapt: alleen de iconen, netjes in het midden.
 *
 * De tekst verdwijnt maar de knoppen houden dezelfde hoogte en dezelfde plek,
 * zodat je spiergeheugen blijft kloppen — je hoeft niet opnieuw te zoeken waar
 * "Servers" zat. De naam komt terug als tooltip. */
.app.nav-smal { grid-template-columns: 74px 1fr; }
.app.nav-smal .sidebar { padding-left: 10px; padding-right: 10px; }

/* Het woordmerk krimpt mee tot de eerste letter. Hem helemaal weghalen laat
   een gat bovenin en dan lijkt het menu ergens middenin te beginnen. */
.app.nav-smal .brand { align-items: center; }
.app.nav-smal .logo { font-size: 22px; }
.app.nav-smal .logo .cloud { font-size: 0; }
.app.nav-smal .logo .cloud::before { content: 'C'; font-size: 22px; }
.app.nav-smal .logo .sys { font-size: 0; }
.app.nav-smal .logo .sys::before { content: 'S'; font-size: 22px; }
.app.nav-smal .sidebar .nav-tekst,
.app.nav-smal .sidebar .brand small { display: none; }
.app.nav-smal .sidebar nav button,
.app.nav-smal .nav-klein,
.app.nav-smal .nav-uit { grid-template-columns: 20px; justify-content: center; padding: 10px 0 10px 12px; }
.app.nav-smal .sidebar nav button.nav-group {
  grid-template-columns: 1fr; justify-items: center; padding: 8px 0;
  margin-top: 10px; border-top: 1px solid var(--line); border-radius: 0;
}
.app.nav-smal .sidebar nav button.nav-group .pijl { display: none; }
.app.nav-smal .sidebar nav button.nav-group::after {
  content: ''; display: block; width: 16px; height: 2px; border-radius: 2px;
  background: var(--line);
}
.app.nav-smal .who { justify-content: center; }
.app.nav-smal .nav-badge { right: 8px; }

/* ── Uitleg in een zacht vlak ─────────────────────────────────────────────── */
/*
 * Een blok dat vertelt waar een scherm voor is, zonder te schreeuwen. Geen
 * harde rand maar een tint, en het icoon in een eigen rondje ernaast — zo
 * leest het als een terzijde en niet als een waarschuwing. Waarschuwingen zijn
 * de meldingen hieronder; die moeten wél opvallen, en dat kan alleen als het
 * gewone uitlegblok dat níét doet.
 */
.tip {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start;
  background: var(--blue-50); border-radius: var(--radius);
  padding: 18px 20px; color: var(--ink-zacht);
}
.tip .tip-ico {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--card); color: var(--blue);
}
.tip .tip-ico svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.tip strong { display: block; color: var(--ink); font-weight: 640; margin-bottom: 3px; }
.tip p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.tip.groen { background: var(--green-bg); }
.tip.groen .tip-ico { color: var(--green); }
.tip.amber { background: var(--amber-bg); }
.tip.amber .tip-ico { color: var(--amber); }

/* ── Kruimelpad ───────────────────────────────────────────────────────────── */
.kruimels {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--muted); margin-bottom: -6px;
}
.kruimels a { color: var(--muted); text-decoration: none; }
.kruimels a:hover { color: var(--ink); text-decoration: underline; }
.kruimels .scheiding { color: var(--zwak); }
.kruimels strong { color: var(--ink); font-weight: 600; }

/* ── Een kop met een merk ernaast, zoals boven een scherm ─────────────────── */
.schermkop { display: flex; align-items: center; gap: 18px; }
.schermkop .merkvak {
  width: 52px; height: 52px; border-radius: 13px; flex: none;
  display: grid; place-items: center; background: var(--blue-50); color: var(--blue);
  font-weight: 700; font-size: 18px; letter-spacing: -.02em;
}
.schermkop h1 { font-size: 26px; }
.schermkop .sub { color: var(--muted); font-size: 14px; margin-top: 2px; }

/* ── Filterknoppen ────────────────────────────────────────────────────────── */
/* Ronder dan een gewone knop, zodat je ziet dat het een keuze is en geen actie. */
.filterrij { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); font: inherit; font-size: 14px; font-weight: 550;
  color: var(--ink-zacht); cursor: pointer;
}
.filter:hover { background: var(--bg); border-color: var(--dash); }
.filter.aan { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-700); }
.filter svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Pasfoto ──────────────────────────────────────────────────────────────── */

/* Met een foto verdwijnt de achtergrondkleur: die is er alleen om initialen op
   te zetten, en zou anders als randje om de foto blijven staan. */
.avatar.metfoto { background: none; padding: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fotorij { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.fotovak {
  width: 84px; height: 84px; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--blue); color: #fff; font-size: 26px; font-weight: 650;
  letter-spacing: -.02em;
}
.fotovak.metfoto { background: none; }
.fotovak img { width: 100%; height: 100%; object-fit: cover; display: block; }