/* Navstar Claims v1.0 — opmaak in de stijl van Navstar Start (v6-opzet):
   witte doorzichtige kopbalk, licht modulemenu, witte kaarten met ronde hoeken op een
   lichtblauwgrijs werkvlak. Navstar-blauw #0088ca als enige kleur, oranje #ff9421 als accent.
   Geen inline stijlen (CSP). */

* { box-sizing: border-box; margin: 0; }
:root {
  --blauw: #0088ca; --blauw-donker: #006a9a; --blauw-diep: #00527a; --blauw-licht: #e6f3fa; --blauw-zacht: #f3f9fd;
  --oranje: #ff9421; --inkt: #14202b; --inkt-zacht: #5c6b7a; --inkt-mist: #94a3b2;
  --rand: #e6ebf0; --rand-zacht: #eef2f6; --wit: #ffffff; --canvas: #f4f7fa;
  --goed: #16a34a; --fout: #e11d48; --let-op: #d97706;
  --kop: "Outfit", "Segoe UI", sans-serif; --tekst: "Inter", "Segoe UI", sans-serif;
  --schaduw: 0 1px 2px rgba(20, 32, 43, .04), 0 10px 30px -18px rgba(20, 32, 43, .18);
  --schaduw-hoog: 0 2px 4px rgba(20, 32, 43, .05), 0 20px 40px -20px rgba(0, 106, 154, .35);
  --verloop: linear-gradient(140deg, #1aa3de, #0088ca 55%, #006a9a);
}
html { font-size: 14.5px; }
body { font-family: var(--tekst); color: var(--inkt); background: var(--canvas); line-height: 1.5;
  min-height: 100vh; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--kop); font-weight: 700; letter-spacing: -.015em; }
a { color: var(--blauw-donker); }
button { font-family: var(--tekst); cursor: pointer; }
[hidden] { display: none !important; }
form.inline { display: inline; }

/* ======================= Kopbalk ======================= */
.kopbalk { height: 64px; display: flex; align-items: center; gap: 1.4rem; padding: 0 1.6rem 0 1.2rem;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rand);
  position: sticky; top: 0; z-index: 30; }
.kop-merk { display: flex; align-items: center; text-decoration: none; }
.kop-logo-beeld { height: 38px; width: auto; display: block; }
.kruimels { display: flex; align-items: center; gap: .5rem; font-size: .86rem; white-space: nowrap;
  padding-left: 1.2rem; border-left: 1px solid var(--rand); }
.kruimels a { color: var(--inkt-zacht); text-decoration: none; font-weight: 600; }
.kruimels a:hover { color: var(--blauw-donker); }
.kruimel-sep { color: var(--inkt-mist); }
.kruimels span:last-child { color: var(--inkt); font-weight: 600; }
.kop-rechts { display: flex; align-items: center; gap: .9rem; margin-left: auto; }
.kopdatum { font-size: .84rem; color: var(--inkt-zacht); white-space: nowrap; font-weight: 500; }
.kop-gebruiker { display: flex; align-items: center; gap: .6rem; padding-left: 1rem; border-left: 1px solid var(--rand); }
.avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: .85rem; color: var(--wit); background: var(--oranje);
  box-shadow: 0 0 0 3px rgba(255, 148, 33, .18); }
.kop-naam { font-weight: 600; font-size: .9rem; }
.kop-knop { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--rand); background: var(--wit);
  color: var(--inkt-zacht); display: flex; align-items: center; justify-content: center; transition: all .15s; }
.kop-knop svg { width: 16px; height: 16px; }
.kop-knop:hover { color: var(--blauw-donker); border-color: var(--blauw); background: var(--blauw-zacht); }

/* ======================= Werkblad: zijnav + inhoud ======================= */
.werkblad { display: flex; min-height: calc(100vh - 64px); }
.zijnav { width: 250px; flex-shrink: 0; background: var(--wit); border-right: 1px solid var(--rand);
  padding: 1.1rem .8rem 1.2rem; display: flex; flex-direction: column; gap: .15rem;
  position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; }
.zijkop { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--inkt-mist);
  padding: 1rem .9rem .4rem; }
.zij-item { display: flex; align-items: center; gap: .7rem; padding: .58rem .9rem; border-radius: 11px;
  color: var(--inkt-zacht); text-decoration: none; font-size: .92rem; font-weight: 600; transition: background .12s, color .12s; }
.zij-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.zij-item:hover { background: var(--blauw-zacht); color: var(--blauw-donker); }
.zij-item.actief { background: var(--verloop); color: var(--wit); box-shadow: 0 10px 20px -12px rgba(0, 106, 154, .8); }
.zijvoet { margin-top: auto; padding: 1rem .9rem 0; font-size: .72rem; color: var(--inkt-mist); }
.inhoud { flex: 1; min-width: 0; padding: 1.6rem 2rem 2.6rem; max-width: 1540px; }

/* ======================= Paginakop + KPI's ======================= */
.paginakop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.3rem; }
.paginakop h1 { font-size: 1.7rem; font-weight: 800; }
.paginakop-acties { display: flex; align-items: center; gap: .6rem; }
.paginakop-acties .knop-licht, .paginakop-acties .knop-blauw { text-decoration: none; }
.paginakop-titel { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.status-woord { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: 1rem;
  color: var(--inkt-zacht); }

.kpi-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.kpi { background: var(--wit); border: 1px solid var(--rand); border-radius: 16px; padding: 1rem 1.1rem;
  display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .9rem; row-gap: .1rem;
  box-shadow: var(--schaduw); position: relative; overflow: hidden; }
.kpi::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%;
  background: var(--blauw-zacht); }
.kpi-icoon { grid-row: 1 / 3; width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center;
  justify-content: center; background: var(--verloop); color: var(--wit); box-shadow: 0 8px 16px -8px rgba(0, 106, 154, .7); }
.kpi-icoon svg { width: 22px; height: 22px; }
.kpi-goed .kpi-icoon { background: linear-gradient(140deg, #34d399, #16a34a); box-shadow: 0 8px 16px -8px rgba(22, 163, 74, .7); }
.kpi-let-op .kpi-icoon { background: linear-gradient(140deg, #fbbf24, #f59e0b); box-shadow: 0 8px 16px -8px rgba(245, 158, 11, .7); }
.kpi-label { font-size: .74rem; font-weight: 600; color: var(--inkt-zacht); position: relative; z-index: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-waarde { font-family: var(--kop); font-size: 1.5rem; font-weight: 800; line-height: 1.15; color: var(--inkt);
  position: relative; z-index: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi-waarde small { font-size: .85rem; font-weight: 600; color: var(--inkt-mist); margin-left: .2rem; }
.kpi-sub { grid-column: 2; font-size: .74rem; color: var(--inkt-mist); position: relative; z-index: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ======================= Panelen ======================= */
.paneel { background: var(--wit); border: 1px solid var(--rand); border-radius: 18px; margin-bottom: 1.2rem;
  overflow: hidden; box-shadow: var(--schaduw); }
.paneelkop { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.3rem .8rem; }
.paneelkop h2 { font-size: 1.08rem; font-weight: 700; }
.paneelkop-extra { margin-left: auto; font-size: .76rem; color: var(--inkt-mist); white-space: nowrap; font-weight: 600; }
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.raster-2 .paneel { margin-bottom: 0; align-self: start; }   /* kaart zo hoog als de inhoud, geen lege kaart */
.paneel-bedragen .veldrij { grid-template-columns: 14rem minmax(0, 1fr); }
.paneel-bedragen .velden { padding-bottom: .4rem; }
.paneel-bedragen .bedragen { padding-top: .6rem; }
.raster-2 + .paneel { margin-top: 1.2rem; }

/* Tabbalk */
.tabbalk { display: inline-flex; flex-wrap: wrap; gap: .25rem; background: var(--wit); border: 1px solid var(--rand);
  border-radius: 99px; padding: .25rem; margin-bottom: 1.2rem; box-shadow: var(--schaduw); }
.tab { background: none; border: 0; border-radius: 99px; padding: .45rem 1rem; font-size: .84rem; font-weight: 600;
  color: var(--inkt-zacht); transition: all .12s; text-decoration: none; white-space: nowrap; }
.tab:hover { color: var(--inkt); background: var(--canvas); }
.tab.actief { color: var(--wit); background: var(--verloop); box-shadow: 0 6px 14px -8px rgba(0, 106, 154, .8); }
.tab-teller { font-size: .7rem; opacity: .75; margin-left: .3rem; }

/* ======================= Tabellen ======================= */
.tabel { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; table-layout: fixed; }
.tabel th { text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--inkt-mist); padding: .45rem 1rem; border-top: 1px solid var(--rand-zacht); border-bottom: 1px solid var(--rand-zacht);
  background: #fafcfd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabel td { padding: .7rem 1rem; border-bottom: 1px solid var(--rand-zacht); vertical-align: middle; }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr { transition: background .12s; }
.tabel tbody tr:hover { background: var(--blauw-zacht); }
.tabel td:first-child, .tabel th:first-child { padding-left: 1.3rem; }
.tabel td:last-child, .tabel th:last-child { padding-right: 1.3rem; }
.tabel tfoot td { font-weight: 700; border-top: 1px solid var(--rand); border-bottom: 0; background: #fafcfd; }
.getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cel-klip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cel-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cel-status .stip, .gegevens .stip { vertical-align: middle; margin-right: .45rem; position: relative; top: -1px; }
.cel-acties { text-align: right; white-space: nowrap; }
.cel-acties .knop-licht + .knop-licht { margin-left: .4rem; }
.tabel a.nummer { font-weight: 700; color: var(--inkt); text-decoration: none; }
.tabel a.nummer:hover { color: var(--blauw-donker); }
.zacht { color: var(--inkt-zacht); }
.leegmelding { color: var(--inkt-zacht); font-size: .88rem; padding: .9rem 1.3rem; }

/* Claimoverzicht: smallere celranden en breedtes nagerekend op 1440 px (nummer 13 tekens vet,
   status "In behandeling" met stip, kop "Te ontvangen"); klant en soort mogen omlopen. */
.tabel-claims td, .tabel-claims th { padding-left: .75rem; padding-right: .75rem; }
.tabel-claims .c-nummer { width: 12%; }
.tabel-claims .c-klant { width: 17%; }
.tabel-claims .c-lev { width: 10%; }
.tabel-claims .c-soort { width: 12%; }
.tabel-claims .c-periode { width: 13%; }
.tabel-claims .c-bedrag { width: 10.75%; }
.tabel-claims .c-status { width: 14.5%; }
.tabel-claims a.nummer { font-size: .84rem; letter-spacing: -.01em; }
.cel-wrap { white-space: normal; word-break: break-word; line-height: 1.35; }
@media (max-width: 1250px) { .tabel-claims .c-periode, .tabel-claims .c-periode-cel { display: none; visibility: collapse; } }

.tabel-bijlagen .b-grootte { width: 7rem; }
.tabel-bijlagen .b-door { width: 10rem; }
.tabel-bijlagen .b-tijd { width: 10rem; }
.tabel-bijlagen .b-acties { width: 9.5rem; }
.bestand-ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: .45rem; color: var(--blauw); }

.tabel-verloop .v-tijd { width: 10rem; }
.tabel-verloop .v-wie { width: 11rem; }
.tabel-verloop td { vertical-align: top; word-break: break-word; }

.tabel-logboek .l-tijd { width: 10rem; }
.tabel-logboek .l-wie { width: 18rem; }
.tabel-logboek .l-ip { width: 10rem; }

.tabel-beheer td { padding: .45rem 1rem; }
.tabel-beheer .invoer { max-width: none; padding: .4rem .7rem; font-size: .88rem; }
.tabel-beheer .bh-naam { width: 40%; }
.tabel-beheer .bh-code { width: 18%; }
.tabel-beheer .bh-actief { width: 14%; }
.tabel-beheer .bh-acties { width: 28%; }
.tabel-soorten .bs-naam { width: 26%; }
.tabel-soorten .bs-uitleg { width: 48%; }
.tabel-soorten .bs-actief { width: 10%; }
.tabel-soorten .bs-acties { width: 16%; }

/* ======================= Kleine elementen ======================= */
.stip { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; background: var(--inkt-mist); }
.stip.groen { background: var(--goed); box-shadow: 0 0 0 3px rgba(22, 163, 74, .16); }
.stip.rood { background: var(--fout); box-shadow: 0 0 0 3px rgba(225, 29, 72, .16); }
.stip.oranje { background: var(--let-op); box-shadow: 0 0 0 3px rgba(217, 119, 6, .16); }
.stip.blauw { background: var(--blauw); box-shadow: 0 0 0 3px rgba(0, 136, 202, .16); }
.stip.grijs { background: #cbd5e1; }

.knop-licht, .knop-blauw { display: inline-flex; align-items: center; justify-content: center; border-radius: 99px;
  padding: .5rem 1rem; font-size: .84rem; font-weight: 600; border: 1px solid var(--rand); background: var(--wit);
  color: var(--inkt); transition: all .12s; white-space: nowrap; text-decoration: none; line-height: 1.3; }
.knop-licht:hover { border-color: var(--blauw); color: var(--blauw-donker); }
.knop-blauw { background: var(--verloop); color: var(--wit); border-color: transparent;
  box-shadow: 0 6px 14px -8px rgba(0, 106, 154, .9); }
.knop-blauw:hover { filter: brightness(1.06); }
.knop-licht.klein, .knop-blauw.klein { padding: .35rem .8rem; font-size: .78rem; }
.knop-rond { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(0, 136, 202, .3); background: var(--wit); color: var(--blauw-donker); margin-left: .35rem;
  transition: all .12s; vertical-align: middle; }
.knop-rond svg { width: 15px; height: 15px; }
.knop-rond:hover { background: var(--blauw-licht); border-color: var(--blauw); }
.knop-rond.rood:hover { background: #fff1f2; border-color: var(--fout); color: var(--fout); }

.info-knop { background: none; border: 0; color: var(--blauw); font-size: .95rem; line-height: 1; padding: 0 .15rem; }
.info-knop:hover { color: var(--blauw-donker); }
.info-ballon { position: absolute; z-index: 60; background: var(--inkt); color: var(--wit); font-size: .8rem;
  line-height: 1.45; padding: .75rem .95rem; border-radius: 12px; box-shadow: 0 12px 30px rgba(15, 23, 42, .28);
  max-width: 26rem; }

.exact-stand { margin: -.6rem 0 1.1rem; font-size: .88rem; }
.melding { padding: .75rem 1.1rem; border-radius: 12px; margin-bottom: 1.1rem; font-weight: 600; font-size: .9rem; }
.melding.goed { background: #ecfdf3; color: #15803d; }
.melding.fout { background: #fff1f2; color: #be123c; }
.melding ul { margin: .35rem 0 0 1.2rem; font-weight: 500; }

/* Filterpaneel */
.filterpaneel { background: var(--wit); border: 1px solid var(--rand); border-radius: 18px; padding: .9rem 1.1rem; margin: -.4rem 0 1.3rem;
  box-shadow: var(--schaduw); display: flex; flex-direction: column; gap: .6rem; }
.filter-rij { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filterpaneel select, .filter-zoek { padding: .45rem .8rem; border: 1px solid var(--rand); border-radius: 99px; background: var(--wit);
  font-family: var(--tekst); font-size: .84rem; color: var(--inkt); max-width: 16rem; }
.filter-zoek { flex: 1 1 18rem; min-width: 14rem; max-width: none; }
.filter-zoek:focus, .filterpaneel select:focus { outline: none; border-color: var(--blauw); box-shadow: 0 0 0 3px rgba(0, 136, 202, .15); }
.filter-wis { font-size: .82rem; font-weight: 600; }
.filter-stand { margin-left: auto; font-size: .8rem; color: var(--inkt-mist); font-weight: 600; white-space: nowrap; }

/* ======================= Detailpagina ======================= */
.gegevens { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: .55rem 1rem; padding: .1rem 1.3rem 1.2rem;
  font-size: .92rem; align-items: baseline; }
.gegevens dt { color: var(--inkt-zacht); }
.gegevens dd { min-width: 0; word-break: break-word; }
.gegevens .tekstblok { white-space: pre-wrap; }
.bedragen { padding: .1rem 1.3rem 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
.bedrag-regel { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .95rem; }
.bedrag-regel strong { font-family: var(--kop); font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bedrag-regel.eigen { border-top: 1px solid var(--rand-zacht); padding-top: .7rem; margin-top: .2rem; }
.bedrag-regel.eigen strong { color: var(--blauw-donker); }
.verdeling { color: var(--inkt-zacht); font-size: .88rem; }

.upload-rij { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.3rem 1.2rem; flex-wrap: wrap;
  border-top: 1px solid var(--rand-zacht); }
.bestand-kies { cursor: pointer; }
.bestand-gekozen { font-size: .82rem; flex: 1; min-width: 12rem; }
.opmerkingen { padding: 0 1.3rem; display: flex; flex-direction: column; gap: .7rem; }
.opmerking { background: var(--canvas); border-radius: 12px; padding: .75rem .95rem; }
.opmerking-kop { font-size: .78rem; color: var(--inkt-mist); font-weight: 600; margin-bottom: .25rem; }
.opmerking-tekst { font-size: .9rem; white-space: pre-wrap; word-break: break-word; }
.opmerking-form { padding: .9rem 1.3rem 1.2rem; display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.opmerking-form .invoer { max-width: none; }

/* ======================= Formulier ======================= */
.velden { padding: .1rem 1.3rem 1.2rem; display: flex; flex-direction: column; gap: .85rem; }
.veldrij { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: .4rem 1rem; align-items: center; }
.veldnaam { font-size: .88rem; font-weight: 600; color: var(--inkt-zacht); }
.veldwaarde { min-width: 0; }
.invoer { width: 100%; max-width: 26rem; padding: .5rem .8rem; border: 1px solid var(--rand); border-radius: 10px; background: #f8fafc;
  font-family: var(--tekst); font-size: .92rem; color: var(--inkt); outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s; }
.invoer:focus { border-color: var(--blauw); background: var(--wit); box-shadow: 0 0 0 3px rgba(0, 136, 202, .15); }
textarea.invoer { max-width: none; min-height: 4.5rem; resize: vertical; line-height: 1.45; }
.invoer.kort { max-width: 9.5rem; }
.invoer.bedrag { max-width: 11.5rem; text-align: right; }
.invoer.code { max-width: 9rem; }
.invoer.breed { flex: 2 1 16rem; }
.bedrag-invoer { display: flex; align-items: center; gap: .5rem; }
.euroteken { color: var(--inkt-zacht); font-weight: 600; }
.periode-rij { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .88rem; color: var(--inkt-zacht); }
.keuze-pillen { display: flex; flex-wrap: wrap; gap: .4rem; }
.keuze-pil { position: relative; }
.keuze-pil input { position: absolute; opacity: 0; width: 0; height: 0; }
.keuze-pil span { display: inline-block; padding: .4rem .9rem; border-radius: 99px; border: 1px solid var(--rand); background: var(--wit);
  font-size: .84rem; font-weight: 600; color: var(--inkt-zacht); cursor: pointer; user-select: none; transition: all .12s; }
.keuze-pil input:checked + span { background: var(--verloop); color: var(--wit); border-color: transparent;
  box-shadow: 0 6px 14px -8px rgba(0, 106, 154, .9); }
.keuze-pil input:focus-visible + span { outline: 2px solid var(--blauw); outline-offset: 2px; }
.form-voet { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.2rem; }
.veldrij-boven { align-items: start; }
.veldrij-boven .veldnaam { padding-top: .5rem; }
.klantkiezer { display: flex; flex-direction: column; gap: .55rem; }
.kiezer-rij { display: flex; gap: .5rem; flex-wrap: wrap; }
.kiezer-rij .invoer { flex: 1 1 10rem; max-width: none; }
.kiezer-rij .invoer.kort { flex: 0 1 11rem; }
.kiezer-meer { font-size: .8rem; margin: 0; }
.keuze-pil[hidden] { display: none; }
.tabelfilter { padding: 0 1.3rem .6rem; }
.tabelfilter .invoer { max-width: 22rem; padding: .4rem .8rem; font-size: .86rem; }
.toon-alle { display: inline-block; margin-top: .35rem; font-size: .8rem; font-weight: 600; text-decoration: none; }
.toon-alle:hover { text-decoration: underline; }
.tabel-beheer .bl-naam { width: 34%; }
.tabel-beheer .bl-code { width: 13%; }
.tabel-beheer .bl-goederen { width: 15%; }
.tabel-beheer .bl-actief { width: 12%; }
.tabel-beheer .bl-acties { width: 26%; }
.tabel-beheer .vast { padding: .4rem 0; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toevoeg-rij { display: flex; gap: .5rem; padding: .8rem 1.3rem 1.2rem; flex-wrap: wrap; align-items: center;
  border-top: 1px solid var(--rand-zacht); }
.toevoeg-rij .invoer { max-width: none; flex: 1 1 10rem; }
.toevoeg-rij .zacht { flex: 1 1 20rem; font-size: .88rem; }

/* ======================= Claimregels, inlezen, afspraken (v1.1) ======================= */
.tabel-regels .r-mee { width: 2.6rem; }
.tabel-regels .r-code { width: 9%; }
.tabel-regels .r-oms { width: 21%; }
.tabel-regels .r-ean { width: 12.5%; }
.tabel-regels .r-aantal { width: 7.5%; }
.tabel-regels .r-per { width: 9.5%; }
.tabel-regels .r-tot { width: 10.5%; }
.tabel-regels .r-actie { width: 4rem; }
.tabel-regels td { padding-top: .45rem; padding-bottom: .45rem; }
.cel-invoer { max-width: 7rem; padding: .3rem .5rem; font-size: .86rem; text-align: right; margin-left: auto; }
.regel-form { display: flex; gap: .5rem; padding: .8rem 1.3rem 1.2rem; flex-wrap: wrap; align-items: center;
  border-top: 1px solid var(--rand-zacht); }
.regel-form .invoer { max-width: none; flex: 1 1 8rem; }
.regel-form .invoer.breed { flex: 2 1 14rem; }
.regel-form .invoer.bedrag { flex: 0 1 7rem; }
.upload-los { border-top: 0; padding-top: .2rem; }
.melding-in-paneel { margin: 0 1.3rem 1.2rem; }
.vinkje { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; }
.vinkje input { accent-color: var(--blauw); width: 16px; height: 16px; }
.afspraak-form { gap: .6rem; }
.afspraak-rij { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.afspraak-rij .invoer { max-width: none; flex: 1 1 9rem; }
.afspraak-rij .invoer.breed { flex: 2 1 14rem; }
.afspraak-rij .invoer.bedrag { flex: 0 1 7rem; }
.afspraak-rij .invoer.kort { flex: 0 1 9.5rem; }
.afspraak-rij .zacht { font-size: .86rem; }
.tabel-afspraken .a-lev { width: 13%; }
.tabel-afspraken .a-klant { width: 12%; }
.tabel-afspraken .a-ean { width: 11%; }
.tabel-afspraken .a-code { width: 9%; }
.tabel-afspraken .a-oms { width: 18%; }
.tabel-afspraken .a-bedrag { width: 9.5%; }
.tabel-afspraken .a-geldig { width: 13%; }
.tabel-afspraken .a-actie { width: 4rem; }

/* ======================= Postvak (v2.0) ======================= */
.tabel-postvak .p-stip { width: 2.4rem; }
.tabel-postvak .p-datum { width: 9.5rem; }
.tabel-postvak .p-van { width: 20%; }
.tabel-postvak .p-claim { width: 10rem; }
.tabel-postvak .p-richting { width: 7rem; }
.tabel-postvak .cel-stip { padding-right: 0; }
.tabel-postvak .regel-kort { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabel-postvak tr.ongelezen td { font-weight: 600; }
.tabel-postvak tr.ongelezen .regel-kort, .tabel-postvak tr.ongelezen .zacht { font-weight: 400; }
.h1-klip { max-width: 60vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.4rem; }
.paneel-koppel { padding: .9rem 1.3rem; }
.koppel-rij { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; font-size: .92rem; }
.koppel-rij .invoer { max-width: 28rem; flex: 1 1 16rem; padding: .4rem .7rem; font-size: .88rem; }
.mail { background: var(--wit); border: 1px solid var(--rand); border-radius: 18px; margin-bottom: 1rem; padding: 1rem 1.3rem 1.1rem;
  box-shadow: var(--schaduw); }
.mail.uit { border-left: 4px solid var(--blauw); }
.mail-kop { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.mail-wie { display: flex; flex-direction: column; min-width: 0; font-size: .9rem; }
.mail-wie strong, .mail-wie .zacht { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-meta { font-size: .82rem; white-space: nowrap; }
.mail-tekst { white-space: pre-wrap; word-break: break-word; font-size: .92rem; line-height: 1.55; max-height: 28rem; overflow: auto; }
.mail-bijlagen { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.chip-knop { border: 0; border-left: 1px solid rgba(0, 136, 202, .25); background: var(--blauw-licht); color: var(--blauw-donker);
  font-size: .76rem; font-weight: 600; padding: .32rem .55rem; cursor: pointer; }
.chip-knop:hover { background: var(--blauw); color: var(--wit); }
.keuze-lijst { display: flex; flex-direction: column; gap: .35rem; }
.knoppen-rij { display: flex; gap: .5rem; flex-wrap: wrap; }
.zij-item .zij-teller { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--inkt-mist); background: var(--canvas);
  border-radius: 99px; padding: .08rem .55rem; }
.zij-item.actief .zij-teller { background: rgba(255, 255, 255, .22); color: var(--wit); }

/* ======================= Postvak v2.3: lijst links, gesprek rechts ======================= */
.tabbalk .tab-stand { align-self: center; margin-left: .8rem; font-size: .78rem; white-space: nowrap; padding-right: .6rem; }
.postvak-raster { display: grid; grid-template-columns: 25rem 10px minmax(0, 1fr); gap: 0 .5rem; align-items: start; }
.splitter { width: 10px; align-self: stretch; cursor: col-resize; border-radius: 99px; position: relative; }
.splitter::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; border-radius: 99px; background: var(--rand); transition: background .12s; }
.splitter:hover::before, body.sleept .splitter::before { background: var(--blauw); }
body.sleept { cursor: col-resize; user-select: none; }
.label-chip { display: inline-block; font-size: .7rem; font-weight: 600; line-height: 1.5; padding: 0 .5rem; border-radius: 6px;
  background: var(--rand-zacht); color: var(--inkt-zacht); margin-right: .35rem; vertical-align: 1px; white-space: nowrap; max-width: 9rem;
  overflow: hidden; text-overflow: ellipsis; }
.label-chip.groot { font-size: .76rem; padding: .1rem .6rem; }
.gesprek-titelrij { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.gesprek-knoppen { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.label-menu { position: relative; }
.label-menu summary { list-style: none; cursor: pointer; display: inline-flex; }
.label-menu summary::-webkit-details-marker { display: none; }
.label-menu[open] summary { border-color: var(--blauw); color: var(--blauw-donker); }
.label-lijst { position: absolute; z-index: 20; top: calc(100% + .4rem); left: 0; background: var(--wit); border: 1px solid var(--rand);
  border-radius: 14px; box-shadow: var(--schaduw-hoog); padding: .7rem .9rem; display: flex; flex-direction: column; gap: .35rem;
  min-width: 16rem; max-height: 22rem; overflow-y: auto; }
.label-lijst .vinkje { font-size: .86rem; }
.label-lijst .knop-blauw { align-self: flex-start; margin-top: .3rem; }
.mail-lijst { position: sticky; top: 80px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; margin-bottom: 0; }
.lijst-zoek { display: flex; align-items: center; gap: .5rem; padding: .75rem .9rem; border-bottom: 1px solid var(--rand-zacht); }
.lijst-zoek .invoer { max-width: none; border-radius: 99px; padding: .45rem .95rem; font-size: .88rem; }
.mail-rijen { overflow-y: auto; }
.mail-rij { display: flex; flex-direction: column; gap: .12rem; padding: .7rem 1rem .7rem 1.1rem; border-bottom: 1px solid var(--rand-zacht);
  text-decoration: none; color: var(--inkt); transition: background .12s; }
.mail-rij:last-child { border-bottom: 0; }
.mail-rij:hover { background: var(--blauw-zacht); }
.mail-rij.actief { background: var(--blauw-licht); box-shadow: inset 3px 0 0 var(--blauw); }
.rij-kop { display: flex; justify-content: space-between; gap: .6rem; font-size: .86rem; }
.rij-wie { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--inkt-zacht); }
.rij-datum { white-space: nowrap; color: var(--inkt-mist); font-size: .78rem; }
.rij-onderwerp { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rij-aantal { font-size: .74rem; color: var(--inkt-mist); font-weight: 400; }
.mail-rij.ongelezen .rij-wie, .mail-rij.ongelezen .rij-onderwerp { font-weight: 700; color: var(--inkt); }
.rij-voet { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--inkt-mist); }
.rij-snippet { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rij-voet svg { width: 13px; height: 13px; flex: none; }
.rij-claim { white-space: nowrap; color: var(--blauw-donker); font-weight: 600; }
.lees-leeg { margin-bottom: 0; }
.gesprek { margin-bottom: 0; }
.gesprek-kop { padding: 1.1rem 1.3rem .9rem; border-bottom: 1px solid var(--rand-zacht); display: flex; flex-direction: column; gap: .7rem; }
.gesprek-titel { font-size: 1.25rem; font-weight: 700; word-break: break-word; }
.bericht { border-bottom: 1px solid var(--rand-zacht); }
.bericht-kop { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: .8rem; padding: .9rem 1.3rem; cursor: pointer; align-items: start; }
.bericht-kop:hover { background: var(--blauw-zacht); }
.avatar.klein { width: 36px; height: 36px; font-size: .8rem; }
.bericht.uit .avatar.klein { background: var(--blauw); box-shadow: 0 0 0 3px rgba(0, 136, 202, .18); }
.bericht-wie { display: flex; flex-direction: column; min-width: 0; font-size: .9rem; }
.bericht-naam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bericht-naam .adres { font-size: .82rem; }
.bericht-aan, .bericht-snippet { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .82rem; }
.bericht-snippet { display: none; }
.bericht.ingeklapt .bericht-snippet { display: block; }
.bericht.ingeklapt .bericht-aan, .bericht.ingeklapt .bericht-inhoud { display: none; }
.bericht-datum { font-size: .8rem; white-space: nowrap; }
.bericht-inhoud { padding: 0 1.3rem 1.2rem calc(1.3rem + 36px + .8rem); }
.gesprek-acties { display: flex; gap: .5rem; padding: 1rem 1.3rem; flex-wrap: wrap; }
.antwoord-form { border-top: 1px solid var(--rand-zacht); padding-top: 1.1rem; }
.antwoord-form .form-voet { margin-top: .4rem; }
@media (max-width: 1100px) { .postvak-raster { grid-template-columns: 1fr !important; } .splitter { display: none; } .mail-lijst { position: static; max-height: none; } }

/* ======================= Loginpagina ======================= */
.login-pagina { display: flex; justify-content: center; align-items: center; padding: 2rem; min-height: 100vh;
  overflow: hidden; position: relative; background: #eff6f9; }
.merken-achtergrond { position: fixed; inset: 0; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-around; gap: 4rem; padding: 4rem; pointer-events: none; z-index: 0; }
.merken-achtergrond img { width: 110px; opacity: .07; filter: grayscale(100%); }
.login-container { display: flex; background: var(--wit); border-radius: 24px; overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .05); width: 100%; max-width: 1100px; min-height: 650px;
  position: relative; z-index: 10; }
.login-formzijde { flex: 1; padding: 4rem 3.5rem; display: flex; flex-direction: column; justify-content: center;
  max-width: 520px; margin: 0 auto; width: 100%; }
.login-formzijde h1 { font-size: 2.3rem; font-weight: 800; margin-bottom: .5rem; }
.intro-tekst { color: var(--inkt-zacht); margin-bottom: 2rem; }
.melding-fout { background: var(--fout); color: var(--wit); border-radius: 8px; padding: .7rem 1rem; font-size: .9rem;
  font-weight: 600; margin-bottom: 1.2rem; text-align: center; }
.veld { margin-bottom: 1.5rem; }
.veld label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .5rem; }
.invoer-met-icoon { position: relative; }
.invoer-met-icoon svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px;
  color: var(--inkt-zacht); }
.login-formzijde input[type=text] { width: 100%; padding: .8rem 1rem; font-size: 1rem; font-family: var(--tekst);
  border: 2px solid var(--rand); border-radius: 10px; background: #f8fafc; outline: none;
  transition: border-color .2s, box-shadow .2s; }
.login-formzijde .invoer-met-icoon input[type=text] { padding-left: 2.7rem; }
.login-formzijde input[type=text]:focus { border-color: var(--blauw); background: var(--wit);
  box-shadow: 0 0 0 3px rgba(0, 136, 202, .2); }
.code-invoer { letter-spacing: .5em; text-align: center; font-size: 1.4rem; }
.knop-primair { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: .85rem 1.5rem;
  font-size: 1rem; font-weight: 600; color: var(--wit); background: var(--blauw); border: 0; border-radius: 10px;
  transition: all .25s; }
.knop-primair:hover { background: var(--blauw-donker); transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0, 0, 0, .1); }
.pijl { font-size: 1.1rem; line-height: 1; }
.of-scheiding { display: flex; align-items: center; margin: 1.5rem 0; color: #94a3b8; font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; }
.of-scheiding::before, .of-scheiding::after { content: ""; flex: 1; border-bottom: 1px solid var(--rand); }
.of-scheiding span { padding: 0 12px; }
.knop-terug { display: flex; align-items: center; justify-content: center; gap: .7rem; width: 100%;
  padding: .8rem; border: 1px solid var(--rand); border-radius: 10px; text-decoration: none; color: var(--inkt);
  font-size: .95rem; font-weight: 600; background: var(--wit); transition: all .2s; }
.knop-terug:hover { background: #f8fafc; border-color: #cbd5e1; }
.login-fotozijde { flex: 1.1; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0088ca, #00527a); }
.login-fotozijde video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 3.5rem;
  background: linear-gradient(135deg, rgba(0, 110, 170, .76), rgba(0, 58, 92, .74)); }
.overlay-logo { height: 50px; width: auto; align-self: flex-start; margin-bottom: 1.5rem; }
.foto-overlay h2 { color: var(--wit); font-size: 2.5rem; font-weight: 700; line-height: 1.15; margin-bottom: 1rem; }
.foto-overlay p { color: rgba(255, 255, 255, .88); font-size: .95rem; max-width: 26rem; }

/* ======================= Klein scherm ======================= */
@media (max-width: 1100px) { .raster-2 { grid-template-columns: 1fr; } .raster-2 .paneel { margin-bottom: 0; } }
@media (max-width: 900px) {
  .login-fotozijde { display: none; } .login-container { min-height: 0; }
  .kopbalk { flex-wrap: wrap; height: auto; padding: .6rem .9rem; gap: .6rem; }
  .kruimels, .kopdatum, .kop-naam { display: none; }
  .werkblad { flex-direction: column; }
  .zijnav { width: auto; height: auto; position: static; flex-direction: row; flex-wrap: wrap; padding: .5rem .6rem;
    border-right: 0; border-bottom: 1px solid var(--rand); }
  .zijkop, .zijvoet { display: none; }
  .zij-item { padding: .45rem .7rem; font-size: .84rem; }
  .inhoud { padding: 1rem .9rem 2rem; }
  .tabel-claims .c-soort, .tabel-claims .c-periode { display: none; visibility: collapse; }
  .gegevens, .veldrij { grid-template-columns: 1fr; gap: .2rem; }
}

/* v2.0b: snippet onder het onderwerp, brede mailvelden */
.tabel-postvak .regel-kort { display: block; font-size: .77rem; color: var(--inkt-mist); font-weight: 400; margin-top: .1rem; }
.velden .invoer.breed { max-width: none; }