/* Reiskosten — opmaak BOVENOP de Dé Plek-huisstijl (huisstijl.css).
   Gespiegeld op werkplek app.css: zelfde shell-layout, sidebar, topbar,
   drawer, tabbar, card, pill, avatar. Werkplek-redactie-specifieke secties
   zijn weggelaten; reiskosten-specifieke utilities staan onderaan. */

/* ── Palet-tokens ─────────────────────────────────────────────────────── */
:root {
  --groen:#13342B; --groen-mid:#1E4D3E; --lichtgroen:#86C79D; --lg-pale:#EFF7F2;
  --lg-soft:#D9ECDF;
  --oranje:#E37A41; --creme:#F4EFE7; --sb-bg:#FAF7F2; --sb-border:rgba(19,52,43,.1);
  --ink:#13342B; --ink-2:#4B6158; --ink-3:#7A8F87; --sidebar-w:240px;
  --rood:#C23B22; --rood-pale:#FDECE8;
  /* Spacing-schaal (4px-ritme) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px; --space-10:64px;
  --gap-card:var(--space-3);
  --pad-card:var(--space-4);
}

body {
  background: var(--creme);
  min-height: 100vh;
}

/* ── Shell frame ────────────────────────────────────────────────────────── */
#app.shell { display: flex; min-height: 100vh; }

/* ── SIDEBAR ────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sb-logo {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--sb-border);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.sb-logo:hover .sb-logo-name { color: var(--oranje); }
.sb-logo:focus-visible { outline: 2px solid var(--oranje); outline-offset: -2px; }

.sb-logo-mark {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--oranje);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 2px 8px rgba(227,122,65,.35); color: #fff;
}
.sb-logo-mark .ico svg { width: 20px; height: 20px; stroke: #fff; }

.sb-logo-text { line-height: 1.2; }
.sb-logo-name { font-size: 15px; font-weight: 700; color: var(--groen); }
.sb-logo-sub  { font-size: 10px; color: var(--ink-3); letter-spacing: .04em; }

.sb-nav { padding: 10px 0; flex: 1; }

.sb-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 12px 18px 4px;
}

.sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: inherit;
  width: 100%;
  text-align: left;
  border-radius: 0;
  transition: all .12s;
  position: relative;
}

.sb-item svg { width: 17px; height: 17px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sb-item:hover { background: rgba(19,52,43,.05); color: var(--groen); }
.sb-item.active {
  background: var(--oranje); color: #fff; font-weight: 700;
  box-shadow: 0 4px 14px rgba(227,122,65,.25);
}
.sb-item.active .ico svg { stroke: #fff; }

.sb-user {
  padding: 14px 18px;
  border-top: 1px solid var(--sb-border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sb-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--groen);
  flex-shrink: 0;
}

.sb-user-info { flex: 1; min-width: 0; }
.sb-user-name { font-size: 13px; font-weight: 700; color: var(--groen); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role { font-size: 11px; color: var(--ink-3); }

.sb-logout {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink-3);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
}

.sb-logout:hover { color: var(--rood); background: var(--rood-pale); }
.sb-logout svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── MAIN ───────────────────────────────────────────────────────────────── */
.main {
  flex: 1;
  padding: 28px 32px;
  background: var(--creme);
  overflow-y: auto;
  min-height: 100vh;
}

/* ── Mobiele topbar — standaard verborgen op desktop ── */
.m-topbar { display: none; }
.m-overlay, .m-drawer { display: none; }
.m-tabbar { display: none; }

@media (max-width: 640px) {
  #app { flex-direction: column; }
  .sidebar { display: none; }
  .main { padding: 16px; padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px) + 8px); }
  .m-topbar { display: flex; }
  .m-overlay, .m-drawer { display: block; }
  .m-tabbar { display: flex; }
}

.m-topbar {
  align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--ink); border-bottom: 3px solid var(--lichtgroen);
  position: sticky; top: 0; z-index: 50;
}
.m-ham { background: none; border: 0; color: var(--creme); cursor: pointer; padding: 4px; display: flex; }
.m-ham .ico svg { width: 22px; height: 22px; stroke: var(--creme); }
.m-brand-mark {
  width: 34px; height: 34px; border-radius: 50%; background: var(--oranje);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(227,122,65,.35);
}
.m-brand-mark .ico svg { width: 18px; height: 18px; stroke: #fff; }
.m-brand { font-weight: 700; color: #fff; font-size: 1.1rem; letter-spacing: -.01em; }
.m-brand-link { display: flex; align-items: center; gap: 14px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.m-brand-link:focus-visible { outline: 2px solid var(--lichtgroen); outline-offset: 4px; border-radius: 8px; }

/* Overlay + slide-in drawer */
.m-overlay {
  position: fixed; inset: 0; background: rgba(19,52,43,.45);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; z-index: 160;
}
.m-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 80%; max-width: 290px;
  background: var(--creme); border-right: 1px solid var(--sb-border);
  transform: translateX(-100%); transition: transform .22s var(--ease);
  z-index: 170; overflow-y: auto; padding: 14px 0;
}
#app.drawer-open .m-overlay { opacity: 1; visibility: visible; }
#app.drawer-open .m-drawer { transform: translateX(0); }

.m-drawer-head { padding: 6px 18px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--sb-border); margin-bottom: 8px; }
.m-drawer-naam { font-size: 15px; font-weight: 700; color: var(--groen); line-height: 1.1; }
.m-drawer-sub { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--ink-3); }

.drawer-link {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 18px; background: none; border: 0; cursor: pointer; font: inherit;
  color: var(--ink); font-weight: 600; font-size: 15px;
}
.drawer-link:hover { background: rgba(19,52,43,.05); }
.drawer-link.active { color: var(--groen); background: rgba(134,199,157,.25); box-shadow: inset 3px 0 0 var(--oranje); }
.drawer-link .ico svg { width: 18px; height: 18px; }
.drawer-logout { color: var(--rood); }
.drawer-grouplbl { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 14px 18px 4px; }

@media (prefers-reduced-motion: reduce) {
  .m-overlay, .m-drawer { transition: none; }
}

/* ── Mobiele sticky onderbalk (tabbar) ── */
.m-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--wit); border-top: 1px solid var(--sb-border);
  box-shadow: 0 -2px 10px rgba(19,52,43,.06);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.m-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 8px 2px 7px; background: none; border: 0; cursor: pointer; font: inherit;
  color: var(--ink-3); border-top: 2px solid transparent;
}
.m-tab .ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m-tab span { font-size: 10px; font-weight: 600; letter-spacing: .01em; }
.m-tab.active { color: var(--oranje); border-top-color: var(--oranje); }

/* ── Icon wrapper ───────────────────────────────────────────────────────── */
.ico { display: inline-flex; }

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header { margin-bottom: 18px; }
.page-header h1 { font-size: 22px; font-weight: 700; color: var(--groen); }
.page-header p { color: var(--ink-2); font-size: 13px; }
.sectie-leeg { color: var(--ink-3); font-size: 13px; padding: 8px 0; }

/* ── Laad-indicator ─────────────────────────────────────────────────────── */
.loading { text-align: center; padding: 56px; color: var(--ink-3); font-weight: 500; }

/* ── Welkom ─────────────────────────────────────────────────────────────── */
.welkom { display: flex; align-items: center; gap: 18px; margin: 4px 0 26px; }
.avatar-xl { width: 58px; height: 58px; border-radius: 50%; background: var(--lichtgroen); color: var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px; letter-spacing: -.02em; flex: none; }
.welkom h1 { margin: 2px 0 0; }
.welkom .sub { color: var(--ink-2); font-weight: 500; margin-top: 2px; }

/* ── Secties ─────────────────────────────────────────────────────────────── */
.sectie { margin-bottom: var(--gap-card); }

/* Pill-knop */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: #ffffff; border: 1.5px solid rgba(19,52,43,.18); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; transition: all .15s; }
.pill:hover { border-color: var(--oranje); color: var(--oranje); transform: translateY(-1px); }

/* Documenten */
ul.links { list-style: none; margin: 0; padding: 0; }
ul.links li { border-top: 1px solid var(--sb-border); }
ul.links li:first-child { border-top: none; }
ul.links a { display: block; padding: 11px 2px; color: var(--ink); text-decoration: none; font-weight: 500; transition: color .15s; }
ul.links a:hover { color: var(--oranje); }
ul.links li span { display: block; padding: 11px 2px; color: var(--ink); font-weight: 500; }

/* Gestaffelde fade-in */
.reveal { opacity: 0; transform: translateY(10px); animation: rkIn .5s forwards; }
@keyframes rkIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; transform: none; } }

/* Beheer-view: gecentreerde desktop-container (geen sidebar-shell) */
#app.beheer-view { max-width: 1100px; margin: 0 auto; padding: 28px 32px; }
@media (max-width: 640px) { #app.beheer-view { padding: 16px; } }

/* ── Compacte kaart-dichtheid ──────────────────────────────────────────── */
.sectie > .card-header { padding: var(--space-3) var(--space-4); }
.sectie > .card-body   { padding: var(--pad-card); }
.sectie > .card-header h3 {
  font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink);
}
.card-header .kaart-actie {
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 600; color: var(--oranje);
}
.card-header .kaart-actie:hover { text-decoration: underline; }

/* Profiel */
.profiel-rollen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.profiel-rij { display: flex; align-items: center; gap: 12px; }
.prof-info { flex: 1; min-width: 0; }
.prof-naam { font-weight: 700; font-size: 14px; color: var(--ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prof-mail { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Formulier-hulpklassen ─────────────────────────────────────────────── */
.veld { margin-bottom: 4px; }
.acties { display: flex; gap: 8px; margin-top: 12px; }
.sectie-actie { margin: .75rem 0; }
.toggle { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; margin-bottom: .75rem; }
.rij-acties { display: flex; gap: .5rem; align-items: center; }
.subtabs { margin-bottom: 16px; }
input[type="radio"], input[type="checkbox"] { width: auto; padding: 0; flex-shrink: 0; }

/* Zoeklijst */
.zoekveld { margin-bottom: 12px; }
.zoekresultaten { display: flex; flex-direction: column; gap: 6px; }
.zoekrij { text-align: left; background: var(--lg-pale); border: 1px solid var(--sb-border); border-radius: 10px; padding: 10px 14px; cursor: pointer; font: inherit; color: var(--ink); }
.zoekrij:hover { border-color: var(--lichtgroen); }

/* ── Beheer: medewerkerslijst ── */
.beheer-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.beheer-filters .veld { margin-bottom: 0; }
.beheer-filters input.veld { flex: 1 1 200px; min-width: 160px; }
.beheer-filters select.veld { flex: 0 0 auto; }
.mw-lijst { display: flex; flex-direction: column; }
.mw-rij { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--sb-border); padding: 8px 10px; cursor: pointer; font: inherit; color: var(--ink); border-radius: 8px; transition: background .12s; }
.mw-rij:hover { background: var(--lg-pale); }
.mw-rij:last-child { border-bottom: 0; }
.mw-rij .mw-naam { font-weight: 600; flex: 0 0 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-rij .mw-functie { color: var(--ink-2); font-size: 13px; flex: 0 0 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-rij .mw-loc { color: var(--ink-3); font-size: 13px; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-rij.gedimd { opacity: .55; }
@media (max-width: 640px) {
  .mw-rij .mw-functie, .mw-rij .mw-loc { flex-basis: auto; }
  .mw-rij { flex-wrap: wrap; gap: 4px 10px; }
}

/* ── Statusbadge (generiek voor medewerkers) ── */
.statusbadge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 9px; border-radius: 999px; flex: none; }
.statusbadge.actief { background: var(--groen-100, #D9ECDF); color: var(--groen); }
.statusbadge.archief { background: rgba(19,52,43,.08); color: var(--ink-3); }

/* ════════════════════════════════════════════════════════════════════════
   REISKOSTEN-SPECIFIEKE UTILITIES
   ════════════════════════════════════════════════════════════════════════ */

/* ── Status-chip voor declaraties en afstanden ── */
/* Gebruik: <span class="status-chip concept">Concept</span> etc. */
.status-chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  white-space: nowrap;
}
/* Declaratie-statussen */
.status-chip.concept     { background: rgba(19,52,43,.08);  color: var(--ink-3); }
.status-chip.ingediend   { background: #EBF4FF;             color: #1E56A0; }
.status-chip.teruggestuurd { background: var(--rood-pale);  color: var(--rood); }
.status-chip.goedgekeurd { background: var(--lg-soft);      color: var(--groen-mid, #1E4D3E); }
.status-chip.geexporteerd { background: var(--groen-100, #D9ECDF); color: var(--groen); }
/* Afstand-statussen */
.status-chip.onbevestigd { background: #FFF4E5; color: #B45309; }
.status-chip.geverifieerd { background: var(--lg-soft); color: var(--groen-mid, #1E4D3E); }

/* ── Declaratie-lijst (archief) ── */
.decl-lijst { display: flex; flex-direction: column; gap: 0; }
.decl-rij {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; border-top: 1px solid var(--sb-border);
  padding: 10px 0; cursor: pointer; font: inherit; color: var(--ink);
}
.decl-rij:first-child { border-top: 0; }
.decl-rij:hover .decl-periode { color: var(--oranje); }
.decl-periode { font-weight: 700; font-size: 14px; flex: 1; }
.decl-bedrag  { font-weight: 700; font-size: 14px; color: var(--groen); flex: none; }
@media (max-width: 640px) { .decl-bedrag { display: none; } }

/* ── Maand-grid (dag-invoer) ── */
.dag-grid { display: flex; flex-direction: column; gap: 6px; }
.dag-rij {
  display: grid;
  gap: 8px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--sb-border);
}
.dag-rij:first-child { border-top: 0; }

/* Bewerkbaar dag-grid: vaste kolomsporen (géén content-'auto') zodat élke rij
   identiek uitlijnt — anders berekent elk rij-grid de auto-kolommen los. */
.dag-grid-edit .dag-rij {
  grid-template-columns: 150px minmax(150px, 260px) 130px 120px minmax(140px, 1fr) 44px;
}
/* Kop-labels boven de veld-inhoud: inputs hebben 14px padding, dus datum/
   locatie/vervoer-labels evenveel laten inspringen. */
.dag-grid-edit .dag-kop > span:nth-child(-n+3) { padding-left: 14px; }
/* Preview iets naar rechts (label én waarde) voor extra lucht na retour. */
.dag-grid-edit .dag-kop > span:nth-child(5),
.dag-grid-edit .dag-preview { padding-left: 8px; }

/* Read-only dag-grid: eigen sporen (datum/locatie/vervoer/retour/km/bedrag). */
.dag-grid-ro .dag-rij {
  grid-template-columns: 110px minmax(140px, 1fr) 90px 70px 90px 100px;
}

/* In het dag-grid geen onder-marges: zo staan velden netjes op één lijn met de kop */
.dag-rij .veld, .dag-rij input, .dag-rij select { margin-bottom: 0; }
.dag-rij .toggle { margin-bottom: 0; }
/* Verwijder-knop in de laatste kolom, helemaal rechts uitgelijnd */
.dag-rij .dag-verwijder { justify-self: end; }
@media (max-width: 640px) {
  .dag-grid-edit .dag-rij, .dag-grid-ro .dag-rij { grid-template-columns: 1fr 1fr; gap: 6px 8px; }
  .dag-grid-edit .dag-kop > span, .dag-grid-edit .dag-preview { padding-left: 0; }
  .dag-rij .dag-verwijder { grid-column: 2; justify-self: end; }
}
.dag-preview { font-size: 12px; color: var(--ink-2); font-weight: 600; }

/* ── Afstand-tabel ── */
.afstand-lijst { display: flex; flex-direction: column; gap: 0; }
.afstand-rij {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 0; border-top: 1px solid var(--sb-border);
}
.afstand-rij:first-child { border-top: 0; }
.afstand-loc  { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afstand-km   { font-weight: 700; font-size: 14px; color: var(--groen); flex: none; width: 70px; text-align: right; }
.afstand-acties { display: flex; gap: 6px; flex: none; }

/* ── Tarieven-tabel ── */
.tarief-lijst { display: flex; flex-direction: column; gap: 0; }
.tarief-rij {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--sb-border); font-size: 14px;
}
.tarief-rij:first-child { border-top: 0; }
.tarief-type  { font-weight: 700; flex: 0 0 80px; }
.tarief-prijs { color: var(--groen); font-weight: 700; flex: 0 0 90px; }
.tarief-datum { color: var(--ink-3); font-size: 12px; flex: 1; }

/* ── Samenvatting-blok ── */
.samenvatting { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 14px; }
@media (max-width: 640px) { .samenvatting { grid-template-columns: 1fr 1fr; } }
.samenvatting-item { background: var(--lg-pale); border-radius: 10px; padding: 12px 14px; }
.samenvatting-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.samenvatting-waarde { font-size: 18px; font-weight: 700; color: var(--groen); margin-top: 2px; }

/* ── Foutmelding inline ── */
.fout-melding { color: var(--rood); font-size: 13px; font-weight: 600; padding: 8px 0; }
.info-melding { color: var(--ink-2); font-size: 13px; font-weight: 500; padding: 8px 0; }

/* ── Goedkeuren (Fase 3) ───────────────────────────────────────────── */
.gk-tabs { display: flex; gap: 8px; margin: 0 0 16px; }
.gk-tab { padding: 8px 16px; border: 1px solid var(--sb-border); background: #fff; border-radius: 999px; cursor: pointer; font: inherit; }
.gk-tab.active { background: var(--oranje); color: #fff; border-color: transparent; }
.gk-rijen { display: flex; flex-direction: column; gap: 8px; }
.gk-rij { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center;
  width: 100%; text-align: left; padding: 14px 16px; border: 1px solid var(--sb-border);
  border-radius: 12px; background: #fff; cursor: pointer; font: inherit; }
.gk-rij:hover { border-color: var(--oranje); }
.gk-rij-naam { font-weight: 600; }
.gk-rij-totaal { font-variant-numeric: tabular-nums; }
.gk-afstanden { display: flex; flex-direction: column; gap: 8px; }
.afstand-regel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.afstand-badge { padding: 2px 10px; border-radius: 999px; font-size: 12px; }
.afstand-badge.onbevestigd, .afstand-badge.geen { background: #fbe9d6; color: #9a4b06; }
.afstand-badge.geverifieerd { background: #dff3e2; color: #1d6b32; }
.gk-acties { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }