/* App-schil (Beheer en gastenportaal): witte zijbalk met logo en menu met dunne iconen, het actieve
   item als groen pilletje, bovenaan een titelbalk met de paginatitel in Cormorant, inhoud op kalksteen.
   Het portaal maakt er in portaal.css een bovenbalk (desktop) en een tabbalk onderaan (gsm) van. */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.zijbalk-app { background: var(--wit); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--lijn); }
.zijbalk-logo { display: block; padding: 22px 24px 18px; }
.zijbalk-logo img { width: 150px; display: block; }
.zijbalk-app nav { display: flex; flex-direction: column; padding: 6px 12px; gap: 2px; overflow-y: auto; flex: 1; }
.zijbalk-app nav a { position: relative; text-decoration: none; color: var(--tekst); font-weight: 500; padding: 9px 12px; min-height: 42px; border-radius: var(--rond-klein); display: flex; gap: 12px; align-items: center; transition: color .15s, background .15s; }
.zijbalk-app nav a .icoon { color: var(--grijs); }
.zijbalk-app nav a:hover { color: var(--primair); background: var(--veld); text-decoration: none; }
.zijbalk-app nav a.actief { color: var(--primair); background: var(--primair-licht); font-weight: 600; }
.zijbalk-app nav a.actief .icoon, .zijbalk-app nav a:hover .icoon { color: var(--primair); }
.zijbalk-app nav a .teller { margin-left: auto; background: var(--geel-licht); color: var(--geel); border-radius: 999px; font-size: .72rem; font-weight: 700; padding: 1px 8px; }
.zijbalk-voet { padding: 16px 20px; border-top: 1px solid var(--lijn); display: flex; gap: 10px; align-items: center; }
.zijbalk-voet .wie { flex: 1; min-width: 0; font-size: .85rem; line-height: 1.3; }
.zijbalk-voet .wie a { color: var(--tekst); font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zijbalk-voet .wie span { color: var(--grijs); font-size: .78rem; }

.hoofd { min-width: 0; }
.bovenbalk { display: flex; align-items: center; gap: 12px; padding: 18px 28px; position: sticky; top: 0; z-index: 900; background: rgba(246, 244, 238, .92); backdrop-filter: blur(8px); }
.bovenbalk h1 { font-size: 2.1rem; margin: 0; }
.bovenbalk .acties { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.menu-knop { display: none !important; }
.pagina-inhoud { padding: 4px 28px 60px; max-width: 1880px; }

/* Grote schermen: meer ruimte, iets grotere tekst, meer kolommen waar het kan. */
@media (min-width: 1600px) {
  body { font-size: 15.5px; }
  .app { grid-template-columns: 264px 1fr; }
  .bovenbalk { padding: 22px 40px; }
  .pagina-inhoud { padding: 4px 40px 60px; }
  .tegels { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
  .kolommen { gap: 24px; }
  .stapel { gap: 24px; }
  dialog { width: min(900px, calc(100vw - 24px)); }
}
@media (min-width: 2200px) {
  body { font-size: 16.5px; }
  .app { grid-template-columns: 290px 1fr; }
  .pagina-inhoud { max-width: 2400px; }
  .kolommen { grid-template-columns: minmax(0, 5fr) minmax(0, 2fr); }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .zijbalk-app { position: fixed; z-index: 1100; left: 0; top: 0; width: 260px; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--schaduw-hoog); }
  .zijbalk-app.open { transform: none; }
  .menu-knop { display: inline-flex !important; }
  .bovenbalk { padding: 12px 16px; }
  .bovenbalk h1 { font-size: 1.6rem; }
  .pagina-inhoud { padding: 4px 16px 60px; }
}

/* Aanmeldscherm (Beheer en portaal) */
.aanmeldscherm { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: url("/assets/krans.svg") no-repeat center / min(980px, 150vw), var(--achtergrond); }
.aanmeldscherm .kaart { width: 100%; max-width: 420px; padding: 36px 32px; border-radius: 22px; box-shadow: var(--schaduw-hoog); }
.aanmeldscherm .kaart > img { width: 200px; display: block; margin: 0 auto 14px; }
.aanmeldscherm h1 { text-align: center; font-size: 2.2rem; }
.aanmeldscherm .onder { text-align: center; margin-top: 16px; }

/* Bouwstenen van het dashboard */
.tegels { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: 20px; }
.tegel { background: var(--wit); border-radius: var(--rond); padding: 18px 20px; border: 1px solid var(--lijn); box-shadow: var(--schaduw); display: flex; gap: 16px; align-items: center; }
.tegel .rondje { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1px solid currentColor; }
.tegel .waarde { font-family: var(--font-titel); font-size: 2rem; font-weight: 600; line-height: 1.05; }
.tegel .wat { font-size: .82rem; color: var(--grijs); font-weight: 500; }
a.tegel { color: inherit; text-decoration: none; transition: box-shadow .15s; }
a.tegel:hover { border-color: var(--primair); text-decoration: none; }
.tegel .onder { margin-top: 2px; }
.verschil { font-size: .75rem; font-weight: 600; color: var(--grijs); }
.verschil.plus { color: var(--groen); }
.verschil.min { color: var(--rood); }
.klein-rondje { width: 34px !important; height: 34px !important; border-radius: 50%; display: grid; place-items: center; flex: none; }
/* Gekleurde rondjes: de oude kleurnamen blijven, de tinten komen uit het nieuwe palet. */
.r-blauw { background: var(--blauw-licht); color: var(--blauw); }
.r-geel { background: var(--geel-licht); color: var(--geel); }
.r-oranje { background: var(--oranje-licht); color: var(--oranje); }
.r-paars { background: var(--primair-licht); color: var(--primair); }
.r-groen { background: var(--groen-licht); color: var(--logo); }

.kolommen { display: grid; gap: 20px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.kolommen.half { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.kolommen.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1150px) { .kolommen, .kolommen.half, .kolommen.even { grid-template-columns: 1fr; } }
.stapel { display: grid; gap: 20px; }
.lijstje { list-style: none; margin: 0; padding: 0; }
.lijstje li { padding: 12px 0; border-bottom: 1px solid var(--lijn-zacht); display: flex; gap: 12px; align-items: center; }
.lijstje li:last-child { border-bottom: 0; }
.lijstje .tekst { flex: 1; min-width: 0; }
.lijstje .tekst strong { display: block; font-size: .92rem; font-weight: 600; }
.lijstje .tekst span { font-size: .8rem; color: var(--grijs); }
.lijstje a { color: inherit; }
.filterbalk { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; align-items: end; }
.filterbalk > * { width: auto; }
.filterbalk input[type="search"] { min-width: 240px; }
.tabs { display: inline-flex; gap: 4px; background: var(--wit); padding: 4px; border-radius: 999px; border: 1px solid var(--lijn); margin-bottom: 18px; flex-wrap: wrap; }
.tabs button { border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--grijs); padding: 0 16px; min-height: 38px; border-radius: 999px; cursor: pointer; }
.tabs button.actief { background: var(--primair-licht); color: var(--primair); }

/* Grafieken (SVG) */
.grafiek { width: 100%; height: auto; display: block; }
.grafiek text { font-family: var(--font); font-size: 11px; fill: var(--grijs); }
.donut-vak { display: grid; place-items: center; position: relative; }
.donut-midden { position: absolute; text-align: center; }
.donut-midden strong { display: block; font-family: var(--font-titel); font-size: 2.2rem; font-weight: 600; line-height: 1; }
.donut-midden span { font-size: .8rem; color: var(--grijs); }
.grafiek-legende { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: .82rem; font-weight: 500; color: var(--grijs); }
.grafiek-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }

/* Groepskoppen in het menu van Beheer */
.zijbalk-app nav .menu-groep { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--grijs); padding: 14px 12px 6px; }
.zijbalk-app nav .menu-groep:first-child { padding-top: 4px; }