/* Raedelijn design tokens and the login, lock, shell and help screens, taken from prototype/index.html
   (docs/knowledge/prototype.md). Montserrat Regular and Bold only, as the brand prescribes. */
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

:root{
--coral-100:#E94E1B;--coral-25:#FAD3C6;--coral-shade:#D24310;
--cyan-100:#00B5D9;--cyan-50:#80DAEC;--cyan-25:#BFEDF6;--cyan-shade:#0098B6;
--ink-100:#000000;--ink-75:#404040;--ink-50:#808080;--ink-25:#BFBFBF;
--paper:#FFFFFF;--paper-tint:#F7F7F7;
--ink-65:#595959;--cyan-ink:#007A93;--coral-ink:#C24010;
--font-core:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
--focus-ring:0 0 0 3px var(--cyan-50);
--shadow-card:0 6px 20px rgba(0,0,0,.08);
--ease-out:cubic-bezier(.22,.61,.36,1);
--measure:66ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;font-family:var(--font-core);font-size:17px;line-height:1.65;color:var(--ink-75);background:var(--paper-tint)}
h1,h2,h3{font-weight:700;color:var(--ink-100);line-height:1.06;letter-spacing:-0.02em;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--cyan-ink);text-decoration:none;transition:color 140ms var(--ease-out)}
a:hover{color:var(--coral-100)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* Buttons (design system Button: pill, bold, 2px border) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 24px;font-family:var(--font-core);font-size:17px;font-weight:700;line-height:1;letter-spacing:.005em;border-radius:999px;border:2px solid transparent;cursor:pointer;text-decoration:none;transition:all 140ms var(--ease-out)}
.btn:active{transform:scale(.975)}
.btn-lg{height:56px;padding:0 32px;font-size:19px}
.btn-full{display:flex;width:100%}
.btn-primary{background:var(--cyan-100);color:var(--paper)}
.btn-primary:hover{background:var(--cyan-shade);color:var(--paper)}
.btn-link{background:none;border:0;padding:0;font:inherit;color:var(--cyan-ink);cursor:pointer}
.btn-link:hover{color:var(--coral-100)}

/* Login and lock screen (S1 Inloggen) */
.auth{position:relative;min-height:100vh;padding:136px 64px 120px;background:var(--coral-100);display:flex;align-items:center;justify-content:center}
.auth-logo{position:absolute;left:64px;top:56px;display:block;height:32px;width:auto}
.payoff{position:absolute;left:64px;bottom:56px;color:#fff;font-size:24px;font-style:italic;letter-spacing:-0.01em}
@media (max-height:700px){.payoff{display:none}}
.card{position:relative;width:440px;max-width:100%;background:#fff;border-radius:20px;padding:72px 40px 40px;display:flex;flex-direction:column;gap:28px}
.card-disc{position:absolute;left:50%;top:-48px;margin-left:-48px;width:96px;height:96px;border-radius:999px;border:8px solid #fff;background:var(--coral-100)}
.card-disc::after{content:"";position:absolute;inset:0;background:#fff;clip-path:polygon(20% 27%,84% 50%,20% 73%,34% 50%)}
.card-head{display:flex;flex-direction:column;gap:8px;text-align:center}
.card-head h1{font-size:30px}
.card-head p{font-size:15px;line-height:1.5;color:var(--ink-75)}
.card-error{margin:0;text-align:center;font-size:13px;font-weight:700;color:var(--coral-shade)}
.card-links{display:flex;align-items:center;justify-content:center;gap:24px;font-size:14px}
.card-links .dot{width:4px;height:4px;border-radius:999px;background:var(--ink-25)}

/* Shell (S2 header) */
.shell{min-height:100vh;background:var(--paper-tint);display:flex;flex-direction:column}
.topbar{background:#fff;border-bottom:1px solid var(--ink-25);position:sticky;top:0;z-index:20}
.topbar-inner{position:relative;padding:0 40px;height:80px;display:flex;align-items:center;gap:48px}
.topbar-logo{display:flex}
.topbar-logo img{display:block;height:34px;width:auto}
.nav{display:flex;align-items:center;gap:32px;position:absolute;left:340px;top:0;height:80px}
.nav a{font-size:17px;font-weight:700;color:var(--ink-100);padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--coral-100)}
.nav a[aria-current="page"]{color:var(--coral-100);border-bottom-color:var(--coral-100)}
.topbar-right{display:flex;align-items:center;gap:12px;margin-left:auto;position:relative}
.user-trigger{display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:6px 4px 6px 12px;border:0;border-radius:999px;background:none;font-family:var(--font-core);font-size:14px;font-weight:700;color:var(--ink-100)}
.user-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:180px;padding:6px;background:#fff;border:1px solid var(--ink-25);border-radius:12px;box-shadow:var(--shadow-card)}
.user-menu[hidden]{display:none}
.user-menu button{display:flex;width:100%;align-items:center;gap:10px;padding:8px 12px;border:0;border-radius:6px;background:none;font-family:var(--font-core);font-size:15px;color:var(--ink-100);cursor:pointer;text-align:left}
.user-menu button:hover{background:rgba(0,181,217,.07)}
.page{padding:48px 64px 64px}
.page h1{font-size:38px}

/* Help (public) */
.help{max-width:var(--measure);display:flex;flex-direction:column;gap:16px}
.help h2{font-size:24px;margin-top:16px}

/* Beheer: gebruikers en rollen */
.admin{display:flex;flex-direction:column;gap:16px}
.crumb{font-size:14px;font-weight:700;color:var(--ink-65)}
.hint{font-size:15px;color:var(--ink-65);max-width:var(--measure)}
.notice{padding:12px 16px;border-radius:12px;background:var(--cyan-25);color:var(--ink-100);font-size:15px;font-weight:700}
.notice-error{background:var(--coral-25);color:var(--coral-ink)}
.table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--ink-25);border-radius:12px;font-size:15px}
.table th,.table td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--ink-25)}
.table th{font-size:13px;color:var(--ink-65);text-transform:uppercase;letter-spacing:.04em}
.table tr:last-child td{border-bottom:0}
.roles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.roles li{display:flex;align-items:center;gap:12px}
.roles form{margin:0}
.pill{display:inline-block;padding:2px 12px;border-radius:999px;border:1px solid var(--ink-25);font-size:14px;color:var(--ink-65)}
.pill-on{background:var(--cyan-25);border-color:var(--cyan-100);color:var(--ink-100);font-weight:700}
.maintenance-banner{padding:10px 16px;background:var(--coral-25);color:var(--coral-ink);font-size:15px;text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}