/* Aktsyn | thema Steen, licht zijmenu (vormgeving v10/v11) */
/* IBM Plex, zelf gehost (app/haal-fonts.sh): de app laadt niets van derden */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../vendor/fonts/IBMPlexSans-Regular-Latin1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../vendor/fonts/IBMPlexSans-Medium-Latin1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../vendor/fonts/IBMPlexSans-SemiBold-Latin1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:500;font-display:swap;src:url('../vendor/fonts/IBMPlexSerif-Medium-Latin1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:600;font-display:swap;src:url('../vendor/fonts/IBMPlexSerif-SemiBold-Latin1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../vendor/fonts/IBMPlexMono-Regular-Latin1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../vendor/fonts/IBMPlexMono-Medium-Latin1.woff2') format('woff2')}
:root{
  --grafiet:#1E2B33; --inkt:#1E2B33; --inkt-zacht:#5A6670;
  --accent:#147A8C; --accent-donker:#10606F; --accent-tint:#E4F1F4;
  --ijs:#A5D8E4; --messing:#D9B75B;
  --papier:#FAF9F6; --wit:#FFFFFF; --zijmenu:#E8E5DE;
  --lijn:#E3DFD6; --rij:#F5F3EE;
  --fout:#B4453A; --fout-vlak:#F8ECEA;
  --serif:'IBM Plex Serif',Georgia,serif;
  --sans:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
#app{min-height:100vh}
body{font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--inkt);background:var(--papier)}
button,select{font:inherit;color:inherit}

/* Aanmelden */
.aanmeld{min-height:100%;display:grid;place-items:center;padding:24px}
.aanmeld-kaart{width:100%;max-width:380px;background:var(--wit);border-radius:14px;padding:36px 32px;box-shadow:0 18px 44px rgba(30,43,51,.08),0 2px 8px rgba(30,43,51,.05)}
.woordmerk{font-family:var(--serif);font-weight:600;font-size:26px;letter-spacing:-.01em}
.woordmerk small{display:block;font-family:var(--sans);font-weight:400;font-size:12px;color:var(--inkt-zacht);letter-spacing:0}
.aanmeld p{margin:18px 0 24px;color:var(--inkt-zacht)}
.knop{border:none;border-radius:8px;padding:10px 18px;cursor:pointer;background:none}
.knop-hoofd{background:var(--accent);color:var(--wit);font-weight:500;width:100%}
.knop-hoofd:hover{background:var(--accent-donker)}
.knop-tekst{color:var(--accent);padding:6px 8px}
.knop-tekst:hover{text-decoration:underline}

/* Schil */
.schil{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.zijmenu{background:var(--zijmenu);padding:20px 14px;display:flex;flex-direction:column;gap:4px}
.zijmenu .woordmerk{font-size:21px;padding:0 10px 18px}
.menu-item{display:block;width:100%;text-align:left;border:none;background:none;text-decoration:none;border-radius:999px;padding:8px 14px;cursor:pointer;color:var(--inkt)}
.menu-item:hover{background:rgba(255,255,255,.5)}
.menu-item[aria-current="page"]{background:var(--wit);font-weight:500}
.zijmenu-voet{margin-top:auto;padding:10px;font-size:12px;color:var(--inkt-zacht)}
.hoofd{display:flex;flex-direction:column;min-width:0}
.balk{display:flex;align-items:center;gap:16px;padding:16px 28px;border-bottom:1px solid var(--lijn);background:var(--papier)}
.balk h1{font-size:18px;font-weight:600;margin-right:auto}
.balk label{font-size:12px;color:var(--inkt-zacht);display:flex;align-items:center;gap:8px}
.balk select{border:1px solid var(--lijn);border-radius:8px;background:var(--wit);padding:6px 10px}
.gebruiker{font-size:12px;color:var(--inkt-zacht)}
.inhoud{padding:24px 28px}
.uitleg{color:var(--inkt-zacht);margin-bottom:16px}

/* Tabel */
.tabel{width:100%;border-collapse:collapse;background:var(--wit);border-radius:12px;overflow:hidden}
.tabel th{font-size:12px;font-weight:500;color:var(--inkt-zacht);text-align:left;padding:10px 14px;background:var(--rij);border-bottom:1px solid var(--lijn)}
.tabel td{padding:10px 14px;border-bottom:1px solid var(--lijn)}
.tabel tr:last-child td{border-bottom:none}
.mono{font-family:var(--mono);font-size:13px}
.zacht{color:var(--inkt-zacht);font-family:var(--sans)}
.label{display:inline-block;white-space:nowrap;font-size:12px;padding:1px 10px;border-radius:999px;background:var(--accent-tint);color:var(--accent-donker)}
.label-achter{background:var(--fout-vlak);color:var(--fout)}
.knop:disabled{opacity:.5;cursor:default}

/* Meldingen */
.melding{border-radius:12px;padding:16px 18px;background:var(--fout-vlak);color:var(--inkt);display:flex;gap:16px;align-items:flex-start}
.melding strong{display:block;color:var(--fout);margin-bottom:2px}
.melding .knop-tekst{margin-left:auto;white-space:nowrap}
.laden{color:var(--inkt-zacht)}
.melding .aftellen{display:block;margin-top:6px;font-size:12px;color:var(--inkt-zacht)}
.voet{padding:12px 28px;font-size:12px;color:var(--inkt-zacht);border-top:1px solid var(--lijn);margin-top:auto}

@media (max-width:760px){
  .schil{grid-template-columns:1fr}
  .zijmenu{flex-direction:row;flex-wrap:wrap;align-items:center}
  .zijmenu .woordmerk{padding:0 10px}
  .zijmenu-voet{display:none}
  .balk{flex-wrap:wrap;padding:12px 16px}
  .inhoud{padding:16px}
  .tabel{display:block;overflow-x:auto}
}