:root {
  --paars: #3A2E68;
  --paars-donker: #271F47;
  --paars-licht: #EBEAF0;
  --grijs-bg: #F4F5F7;
  --grijs-rand: #E2E4E9;
  --tekst: #1F2430;
  --tekst-zacht: #616679;
  --groen: #1E8A5F;
  --groen-bg: #E6F5EE;
  --amber: #B4770E;
  --amber-bg: #FBF0DD;
  --rood: #B23B3B;
  --rood-bg: #FBEAEA;
  --blauw: #2E6BA6;
  --blauw-bg: #E7F0F8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--grijs-bg);
  color: var(--tekst);
}

header.topbalk {
  background: var(--paars-donker);
  color: white;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header.topbalk .titel {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

nav.hoofdnav {
  background: var(--paars);
  display: flex;
  gap: 0;
  padding: 0 1rem;
  flex-wrap: wrap;
}

nav.hoofdnav a {
  color: white;
  text-decoration: none;
  padding: 0.7rem 1rem;
  font-size: 0.92rem;
  font-weight: 500;
  opacity: 0.88;
  border-bottom: 3px solid transparent;
}

nav.hoofdnav a:hover,
nav.hoofdnav a.actief {
  opacity: 1;
  border-bottom: 3px solid white;
}

nav.subnav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

nav.subnav a {
  color: var(--paars-donker);
  text-decoration: none;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  background: white;
  border: 1px solid var(--grijs-rand);
}

nav.subnav a.actief,
nav.subnav a:hover {
  background: var(--paars);
  color: white;
  border-color: var(--paars);
}

main {
  padding: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Smalle pagina's (zoals wachtwoord wijzigen): flash-meldingen, titel en
   paneel krijgen dan allemaal dezelfde, smalle breedte, zodat niets breder
   oogt dan het formulier eronder. */
main.smal {
  max-width: 420px;
}

main.smal .paneel {
  max-width: none;
}

h1.paginatitel {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  margin: 0 0 1.2rem 0;
}

h1.paginatitel .balk {
  width: 5px;
  height: 1.4rem;
  background: var(--paars);
  border-radius: 3px;
  display: inline-block;
}

.kaarten-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.kaart {
  background: white;
  border-radius: 10px;
  border-top: 4px solid var(--paars);
  box-shadow: 0 1px 3px rgba(20, 15, 40, 0.06);
  padding: 1.1rem 1.2rem;
}

.kaart h3 {
  margin: 0 0 0.6rem 0;
  font-size: 1rem;
  color: var(--tekst);
}

.kaart .waarde {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--paars-donker);
  margin-bottom: 0.4rem;
}

.kaart .waarde.overboekt {
  display: inline-block;
  color: var(--rood);
  background: var(--rood-bg);
  border-radius: 6px;
  padding: 0.05rem 0.5rem;
}

/* Tabbladen binnen een pagina (bijvoorbeeld Overzicht/Registraties bij
   Planning & Realisatie), zodat een lang onderdeel niet altijd op de
   pagina hoeft te staan. */
.tabbladen {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.tabblad-knop {
  padding: 0.45rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--grijs-rand);
  background: white;
  color: var(--tekst);
  font-size: 0.85rem;
  cursor: pointer;
}

.tabblad-knop.actief {
  background: var(--paars);
  color: white;
  border-color: var(--paars);
}

/* Kaarten-grid voor de rapportages-overzichtspagina (O-9): klikbare kaarten
   met een gekleurde bovenrand per rapportage, zodat het geheel in één
   oogopslag overzichtelijk is. */
.rapport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.rapport-kaart {
  display: block;
  background: white;
  border-radius: 10px;
  border-top: 4px solid var(--paars);
  box-shadow: 0 1px 3px rgba(20, 15, 40, 0.06);
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.rapport-kaart:hover {
  box-shadow: 0 4px 10px rgba(20, 15, 40, 0.12);
  transform: translateY(-1px);
}

.rapport-kaart h3 {
  margin: 0 0 0.4rem 0;
  font-size: 1.02rem;
  color: var(--tekst);
}

.rapport-kaart p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--tekst-zacht);
}

.rapport-kaart.kleur-groen { border-top-color: var(--groen); }
.rapport-kaart.kleur-amber { border-top-color: var(--amber); }
.rapport-kaart.kleur-rood { border-top-color: var(--rood); }
.rapport-kaart.kleur-blauw { border-top-color: var(--blauw); }

.pil {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
}

.pil::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.pil.groen { background: var(--groen-bg); color: var(--groen); }
.pil.amber { background: var(--amber-bg); color: var(--amber); }
.pil.rood { background: var(--rood-bg); color: var(--rood); }
.pil.blauw { background: var(--blauw-bg); color: var(--blauw); }
.pil.paars { background: var(--paars-licht); color: var(--paars-donker); }

.maandnav {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.maandnav-label {
  font-weight: 700;
  color: var(--paars-donker);
  min-width: 9rem;
  text-align: center;
}

.filterbalk {
  background: white;
  border: 1px solid var(--grijs-rand);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: flex-end;
}

.filterbalk .veld {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--tekst-zacht);
}

.filterbalk select,
.filterbalk input,
form.inline select,
form.inline input,
.formulier select,
.formulier input {
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--grijs-rand);
  font-size: 0.88rem;
}

button, .knop {
  background: var(--paars);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

button:hover, .knop:hover { background: var(--paars-donker); }

button.klein, .knop.klein { padding: 0.3rem 0.65rem; font-size: 0.78rem; }
button.gevaar, .knop.gevaar { background: var(--rood); }
button.secundair, .knop.secundair { background: white; color: var(--paars); border: 1px solid var(--paars); }

table.tabel {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(20, 15, 40, 0.06);
}

table.tabel th {
  background: var(--paars-licht);
  color: var(--paars-donker);
  text-align: left;
  padding: 0.6rem 0.8rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

table.tabel td {
  padding: 0.55rem 0.8rem;
  border-top: 1px solid var(--grijs-rand);
  font-size: 0.88rem;
}

table.tabel tr:hover td { background: #FAFAFC; }

.tabel-scroll {
  overflow-x: auto;
  padding-bottom: 0.3rem;
}

table.dag-tabel {
  font-size: 0.78rem;
}

table.dag-tabel th, table.dag-tabel td {
  padding: 0.22rem 0.3rem;
  text-align: center;
  white-space: nowrap;
  min-width: 2rem;
}

table.dag-tabel th.naam-kolom, table.dag-tabel td.naam-cel {
  text-align: left;
  white-space: normal;
  min-width: 10rem;
}

table.dag-tabel th.weekend, table.dag-tabel td.weekend {
  background: #FAFAFC;
  color: var(--tekst-zacht);
}

table.dag-tabel tr.medewerker-rij td {
  font-weight: 700;
  background: var(--paars-licht);
}

table.dag-tabel tr.medewerker-rij td.weekend {
  background: var(--paars-licht);
}

/* Dag buiten het standaard werkdagenpatroon van de medewerker (nieuw
   wensidee van Jan, 2026-09-18) - een schuine streep, duidelijk te
   onderscheiden van een gewone weekenddag, die voor iedereen geldt. */
table.dag-tabel td.niet-werkdag {
  background: repeating-linear-gradient(
    135deg, var(--grijs-bg), var(--grijs-bg) 4px, #FFFFFF 4px, #FFFFFF 8px
  );
  color: var(--tekst-zacht);
}

table.dag-tabel tr.medewerker-rij td.niet-werkdag {
  background: repeating-linear-gradient(
    135deg, var(--paars-licht), var(--paars-licht) 4px, #FFFFFF 4px, #FFFFFF 8px
  );
}

table.jaar-tabel {
  font-size: 0.78rem;
  /* table.tabel zet overflow:hidden voor afgeronde hoeken, maar dat breekt
     position:sticky op de naam-kolom (de sticky-berekening pakt dan de tabel
     zelf als scroll-ancestor i.p.v. .tabel-scroll). Voor deze brede,
     horizontaal scrollende tabel is de vastgezette kolom belangrijker dan de
     afgeronde hoek. */
  overflow: visible;
}

table.jaar-tabel th, table.jaar-tabel td {
  padding: 0.2rem 0.3rem;
  text-align: center;
  white-space: nowrap;
  min-width: 2rem;
}

table.jaar-tabel th.naam-kolom, table.jaar-tabel td.naam-cel {
  text-align: left;
  white-space: normal;
  min-width: 11rem;
  position: sticky;
  left: 0;
  z-index: 2;
  background: white;
  box-shadow: 2px 0 4px rgba(20, 15, 40, 0.08);
}

table.jaar-tabel th.naam-kolom { background: var(--paars-licht); }

table.jaar-tabel th.maand-start, table.jaar-tabel td.maand-start {
  border-left: 2px solid var(--grijs-rand);
}

table.jaar-tabel th.feestdag, table.jaar-tabel td.feestdag {
  background: var(--amber-bg);
}

table.jaar-tabel th.buiten-dienstverband, table.jaar-tabel td.buiten-dienstverband {
  background: var(--grijs-bg);
  color: var(--tekst-zacht);
}

table.jaar-tabel tr.medewerker-rij td {
  font-weight: 700;
  background: var(--paars-licht);
}

table.jaar-tabel tr.medewerker-rij td.naam-cel { background: var(--paars-licht); }

table.jaar-tabel tr.samenvatting-rij td {
  background: #FAFAFC;
  color: var(--tekst-zacht);
}

table.jaar-tabel tr.samenvatting-rij td.naam-cel {
  background: #FAFAFC;
  font-weight: 700;
  color: var(--tekst);
}

table.jaar-tabel td.overboekt,
table.tabel td.overboekt {
  background: var(--rood-bg);
  color: var(--rood);
  font-weight: 700;
}

table.jaar-tabel tr.nieuwe-regel-rij td {
  background: var(--groen-bg);
}

table.jaar-tabel tr.nieuwe-regel-rij td.naam-cel {
  background: var(--groen-bg);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

table.jaar-tabel tr.nieuwe-regel-rij select {
  font-size: 0.74rem;
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
  border: 1px solid var(--grijs-rand);
  max-width: 100%;
}

table.jaar-tabel input.week-invoer {
  /* Op verzoek van Jan (2026-09-16): de weekkolommen van het jaaroverzicht
     veel compacter - dit gold al voor de invoerrij "Regel toevoegen", maar
     de urenvelden van de bestaande regels erboven hadden nog geen eigen
     breedte en vielen terug op de (veel bredere) browserstandaard voor een
     number-veld, wat de hele tabel onnodig breed maakte. */
  width: 2.8rem;
  padding: 0.15rem 0.2rem;
  font-size: 0.74rem;
  border-radius: 4px;
  border: 1px solid var(--grijs-rand);
  text-align: center;
}

.trend-grid {
  display: grid;
  /* min(420px, 100%) i.p.v. een vaste 420px: op een smartphone (smaller dan
     420px) krimpt de kolom gewoon mee met het scherm in plaats van de hele
     pagina breder te maken dan het scherm (D-9) - de grafiek zelf schaalt al
     mee dankzij width:100% op de svg, maar kon daar door de vaste
     minimumbreedte van de grid-kolom niet aan toekomen. */
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 1.2rem;
}

.trend-team {
  border-top: 1px solid var(--grijs-rand);
  padding-top: 1rem;
  margin-top: 1rem;
}

.trend-team:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.trend-team h3 {
  margin: 0 0 0.6rem 0;
  font-size: 0.95rem;
  color: var(--paars-donker);
}

.trend-grafiek-kop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.78rem;
  color: var(--tekst-zacht);
  margin-bottom: 0.2rem;
}

.trend-grafiek svg {
  width: 100%;
  height: auto;
  display: block;
}

.trend-vlak-klanten { fill: var(--groen); fill-opacity: 0.55; }
.trend-vlak-intern { fill: var(--paars); fill-opacity: 0.55; }
.trend-vlak-verlof { fill: var(--blauw); fill-opacity: 0.55; }
.trend-lijn-totaal { fill: none; stroke: var(--paars-donker); stroke-width: 1.2; }

.trend-x-as text {
  font-size: 6px;
  fill: var(--tekst-zacht);
}

.trend-legenda {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.76rem;
  color: var(--tekst-zacht);
  margin-top: 0.3rem;
}

.trend-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.trend-legenda .bolletje {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
}

.trend-legenda .bolletje.klanten { background: var(--groen); }
.trend-legenda .bolletje.intern { background: var(--paars); }
.trend-legenda .bolletje.verlof { background: var(--blauw); }
.trend-legenda .bolletje.plan { background: var(--blauw); }
.trend-legenda .bolletje.real { background: var(--paars-donker); }

/* Vernieuwde rapportages (R-11/R-12/R-13/R-14): eenvoudige lijngrafiek
   (gepland vs. gerealiseerd) en een heatmap-tabel, beide zonder externe
   grafiekbibliotheek - zelfde aanpak als de bestaande trendgrafiek per team. */
.rapport-sectie { margin-bottom: 1.4rem; }
.rapport-sectie h2 { margin-top: 0; }
.rapport-sectie h3 { font-size: 0.92rem; margin: 1.1rem 0 0.4rem; color: var(--tekst-zacht); }
.rapport-subsectie { border-top: 1px dashed var(--grijs-rand); padding-top: 1rem; margin-top: 1rem; }
.rapport-subsectie:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.trend-lijn-plan { fill: none; stroke: var(--blauw); stroke-width: 1.4; }
.trend-lijn-real { fill: none; stroke: var(--paars-donker); stroke-width: 1.4; }

table.weektabel td, table.heatmap-tabel td { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.weektabel th, table.heatmap-tabel th { text-align: center; white-space: nowrap; }
table.heatmap-tabel td:first-child, table.weektabel td:first-child { text-align: left; }

.heat-pct-0, .heat-uren-0 { background: #F7F7F9; color: #9A9FAE; }
.heat-pct-1 { background: var(--rood-bg); color: var(--rood); }
.heat-pct-2 { background: var(--amber-bg); color: var(--amber); }
.heat-pct-3 { background: #EAF6EF; color: var(--groen); }
.heat-pct-4 { background: var(--groen-bg); color: var(--groen); font-weight: 600; }
.heat-uren-1 { background: #EDE9F5; color: var(--paars-donker); }
.heat-uren-2 { background: #D6CCE9; color: var(--paars-donker); }
.heat-uren-3 { background: #B39FD4; color: white; }
.heat-uren-4 { background: var(--paars); color: white; font-weight: 600; }

tr.totaal-rij td { font-weight: 700; border-top: 2px solid var(--grijs-rand); }

.kaart-lijst {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.paneel {
  background: white;
  border: 1px solid var(--grijs-rand);
  border-radius: 10px;
  padding: 1.2rem;
  margin-bottom: 1.2rem;
  /* Een brede tabel (bijvoorbeeld "Bezetting per team") mag op een smartphone
     binnen dit paneel horizontaal scrollen, in plaats van de hele pagina
     breder te maken dan het scherm (D-9) - dat laatste dwong de browser om
     de hele pagina (inclusief de grafieken erboven/eronder) uit te zoomen. */
  overflow-x: auto;
}

.paneel h2 {
  margin-top: 0;
  font-size: 1.05rem;
  color: var(--paars-donker);
}

/* Pop-up-formulieren (PR-34), gebouwd op het ingebouwde <dialog>-element -
   geen extra afhankelijkheid nodig. */
dialog.dialoog {
  border: none;
  border-radius: 10px;
  padding: 1.4rem;
  width: min(30rem, 92vw);
  box-shadow: 0 8px 30px rgba(20, 15, 40, 0.25);
}

dialog.dialoog::backdrop {
  background: rgba(20, 15, 40, 0.45);
}

dialog.dialoog h2 {
  margin-top: 0;
  font-size: 1.05rem;
  color: var(--paars-donker);
}

dialog.dialoog .veld {
  margin-bottom: 0.7rem;
}

dialog.dialoog .veld label {
  display: block;
  margin-bottom: 0.2rem;
}

dialog.dialoog input, dialog.dialoog select {
  width: 100%;
}

.flash {
  padding: 0.6rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.88rem;
}

.flash.ok { background: var(--groen-bg); color: var(--groen); }
.flash.fout { background: var(--rood-bg); color: var(--rood); }

.meter-balk {
  background: var(--grijs-rand);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
  margin-top: 0.3rem;
}

.meter-balk .vulling {
  background: var(--paars);
  height: 100%;
}

.subtiel { color: var(--tekst-zacht); font-size: 0.82rem; }

.badge-rol {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--paars-licht);
  color: var(--paars-donker);
}

.badge-skill {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--paars-licht);
  color: var(--paars-donker);
  margin: 0.1rem 0.2rem 0.1rem 0;
}

/* Organogram: eenvoudige, zelfgebouwde boomweergave (geen externe libraries nodig) */
.organogram {
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

ul.org-niveau {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 1.4rem 0 0 0;
}

.organogram > ul.org-niveau {
  padding-top: 0;
}

li.org-knoop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

li.org-knoop ul.org-niveau::before {
  content: "";
  display: block;
  width: 1px;
  height: 1.4rem;
  background: var(--grijs-rand);
  margin: 0 auto;
}

.org-kaart {
  background: white;
  border: 1px solid var(--grijs-rand);
  border-top: 3px solid var(--paars);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  min-width: 150px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(20, 15, 40, 0.06);
}

.org-naam {
  font-weight: 700;
  color: var(--paars-donker);
  font-size: 0.88rem;
  margin-bottom: 0.2rem;
}

.org-detail {
  font-size: 0.76rem;
  color: var(--tekst-zacht);
  margin-bottom: 0.15rem;
}

.org-kaart {
  min-width: 190px;
  text-align: left;
}

.org-kaart-kop {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: center;
  margin-bottom: 0.2rem;
}

.org-toggle {
  background: var(--paars-licht);
  color: var(--paars-donker);
  border: 1px solid var(--grijs-rand);
  border-radius: 4px;
  width: 1.3rem;
  height: 1.3rem;
  line-height: 1;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  flex: none;
}

.org-naam { text-align: center; width: 100%; }

.org-ledenlijst {
  list-style: none;
  margin: 0.3rem 0 0 0;
  padding: 0.35rem 0 0 0;
  border-top: 1px dashed var(--grijs-rand);
  font-size: 0.76rem;
  color: var(--tekst);
}

.org-ledenlijst li { padding: 0.05rem 0; }

li.org-knoop.samengevouwen > ul.org-niveau { display: none; }

.print-only { display: none; }

/* Afdrukken: chrome (koptekst, navigatie, filters, knoppen) weglaten, inhoud
   volle breedte geven zodat rapportages en het organogram netjes op papier/PDF
   passen. */
@media print {
  header.topbalk, nav.hoofdnav, nav.subnav, .no-print { display: none !important; }
  main { max-width: 100%; padding: 0; margin: 0; }
  body { background: white; }
  .paneel { border: none; box-shadow: none; padding: 0; margin-bottom: 1rem; }
  .organogram { overflow: visible; page-break-inside: avoid; }
  ul.org-niveau { gap: 0.7rem; }
  a.knop, button { display: none !important; }
  .print-only { display: block; }
}

/* Organogram: op één A4-pagina (liggend) laten passen bij afdrukken/PDF - de
   inhoud wordt vóór het afdrukken (via JS, zie organogram.html) automatisch
   verkleind met een schaalfactor die op de werkelijke breedte/hoogte van de
   boom is gebaseerd, in plaats van een vast lettertype/marge-aanname. Een
   "named page" zodat alleen het organogram liggend afdrukt, en andere
   afdrukbare pagina's (rapportages) hun eigen (staande) paginaformaat houden. */
@page organogram {
  size: A4 landscape;
  margin: 10mm;
}

.organogram-afdrukpagina {
  page: organogram;
}