/* ═══════════════════════════════════════════════════════════════════════════
   Frissekompas — één ontwerpsysteem.

   Huisstijl van Frissekom: wit vlak, zwarte inkt, lime (#dcff00) als
   markeerkleur en nooit als tekstkleur. Zwart is de interactiekleur.

   Opbouw van dit bestand:
    1. Lettertype en tokens        8. Vandaag
    2. Basis                       9. Mijn week
    3. Omlijsting                 10. Takenformulier en venster
    4. Paginastructuur            11. Projectbord
    5. Bediening                  12. Beheer
    6. Terugkoppeling             13. Inloggen en fouten
    7. Taken                      14. Kleine schermen

   Vuistregels: gebruik de tokens, geen losse maten. Eén soort knop per
   betekenis. Geen inline style — de Content-Security-Policy staat het niet
   toe, en het houdt alles hier bij elkaar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Lettertype en tokens ─────────────────────────────────────────────── */

@font-face { font-family: 'Brockmann'; src: url('/assets/fonts/Brockmann-Regular.otf') format('opentype');       font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Brockmann'; src: url('/assets/fonts/Brockmann-RegularItalic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Brockmann'; src: url('/assets/fonts/Brockmann-Medium.otf') format('opentype');        font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Brockmann'; src: url('/assets/fonts/Brockmann-SemiBold.otf') format('opentype');      font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Brockmann'; src: url('/assets/fonts/Brockmann-Bold.otf') format('opentype');          font-weight: 700; font-style: normal; font-display: swap; }

:root {
    /* Kleur */
    --bg:          #ffffff;
    --surface:     #ffffff;
    --surface-2:   #f5f5f5;
    --surface-3:   #ebebeb;
    --border:      rgba(0,0,0,.12);
    --ink:         #000000;
    --ink-2:       #262626;
    --muted:       #6b6b6b;
    --lime:        #dcff00;
    --lime-soft:   #f7ffb8;
    --green:       #1a9c54;
    --green-soft:  #e6f4ec;
    --red:         #c73838;
    --red-soft:    #fdeaea;
    --amber:       #8a5a10;
    --amber-soft:  #fdf3e3;
    --blue:        #1a4fb4;
    --blue-soft:   #e8effc;

    /* Tekst */
    --font:     'Brockmann', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fs-xs:    11px;   /* labels, chips */
    --fs-sm:    12.5px; /* meta, hulptekst */
    --fs-md:    14px;   /* lopende tekst, taken */
    --fs-lg:    16px;   /* kaartkoppen */
    --fs-xl:    26px;   /* paginakop */

    /* Ruimte: steeds een stap van 4 */
    --s1: 4px;  --s2: 8px;  --s3: 12px;  --s4: 16px;  --s5: 24px;  --s6: 32px;

    /* Vorm */
    --radius:    10px;
    --radius-sm: 7px;
    --pill:      999px;
    --line:      2px solid var(--ink);  /* het kader van de huisstijl */

    /* Bediening */
    --control-h:    36px;
    --control-h-sm: 28px;

    /* Zijmarge van de pagina: 16px op een telefoon, tot 40px op een groot scherm. */
    --gutter: clamp(16px, 2.2vw, 40px);
}

/* ── 2. Basis ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: var(--fs-md); -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    font-size: var(--fs-md);
    line-height: 1.45;
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

strong, b { font-weight: 700; }
code { font-size: .9em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* Zichtbare focus voor wie met het toetsenbord werkt. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--lime); }

/* ── 3. Omlijsting: zwarte rail links, canvas rechts ────────────────────── */

.fk-app { display: flex; align-items: stretch; min-height: 100vh; }

.fk-side {
    position: sticky; top: 0; align-self: flex-start;
    flex: 0 0 88px; width: 88px; height: 100vh;
    background: var(--ink); color: #fff;
    display: flex; flex-direction: column; align-items: center;
    padding: var(--s4) var(--s2); gap: var(--s5); z-index: 60;
}

.fk-logo { display: flex; padding: 2px; border-radius: var(--radius-sm); }
.fk-logo img { width: 30px; height: 30px; display: block; filter: brightness(0) invert(1); }
.fk-logo:hover img { opacity: .75; }

.fk-nav { display: flex; flex-direction: column; gap: var(--s1); width: 100%; }

.fk-navitem {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: var(--s3) var(--s1) 10px; border-radius: var(--radius);
    color: rgba(255,255,255,.62); text-decoration: none; text-align: center;
}
.fk-navitem:hover { color: #fff; background: rgba(255,255,255,.08); }
.fk-navitem.active, .fk-navitem.active:hover { color: var(--ink); background: var(--lime); }
.fk-navlbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; line-height: 1.2; }

.fk-canvas { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.fk-top {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: flex-end;
    min-height: 60px; padding: var(--s2) var(--s5);
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid var(--border);
    backdrop-filter: saturate(1.4) blur(6px);
}
.fk-top-right { display: flex; align-items: center; gap: var(--s3); }

.fk-profile {
    display: inline-flex; align-items: center; gap: var(--s2);
    padding: 4px var(--s3) 4px 4px; border: 1px solid transparent; border-radius: var(--pill);
    color: var(--ink); text-decoration: none;
}
.fk-profile:hover { background: var(--surface-2); border-color: var(--border); }
.fk-profile.active { background: var(--lime-soft); border-color: var(--ink); }

.fk-me {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--lime); color: var(--ink); box-shadow: 0 0 0 1px var(--ink);
    font-size: var(--fs-xs); font-weight: 700;
}
.fk-who { display: flex; flex-direction: column; line-height: 1.15; font-size: var(--fs-sm); font-weight: 600; }
.fk-who small { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* ── 4. Paginastructuur ──────────────────────────────────────────────────── */

.page {
    width: 100%;
    /* De volle breedte van het canvas. De zijmarge groeit mee met het scherm,
       zodat het op een laptop niet krap en op een groot scherm niet kaal oogt. */
    padding: var(--s5) var(--gutter) var(--s6);
}
.page-wide { /* alle pagina's zijn nu breed; blijft staan voor bestaande sjablonen */ }

.footer { width: 100%; margin-top: auto; padding: var(--s4) var(--gutter) var(--s5); color: var(--muted); font-size: var(--fs-xs); }

.crumbs { margin-bottom: var(--s2); font-size: var(--fs-sm); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

/* Paginakop: titel en toelichting links, de belangrijkste actie rechts. */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.page-title { display: inline-block; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.3px; line-height: 1.15; }
.page-title::after { content: ""; display: block; height: 6px; margin-top: 3px; background: var(--lime); border-radius: 2px; }
.page-lead { margin-top: var(--s2); color: var(--muted); font-size: var(--fs-sm); }
.page-actions { display: flex; align-items: center; gap: var(--s2); }

/* Sectie: een lijst met een kleine hoofdletterkop. */
.sec { margin-bottom: var(--s5); }
.sec-t {
    display: flex; align-items: center; gap: var(--s2);
    margin-bottom: 10px;
    font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.sec-t .n { font-size: var(--fs-xs); color: var(--muted); background: var(--surface-2); border-radius: var(--pill); padding: 1px 8px; letter-spacing: 0; }
.sec-t.is-late, .sec-t.is-late .n { color: var(--red); }
.sec-t.is-late .n { background: var(--red-soft); }
.sec-hint { margin: -6px 0 10px; color: var(--muted); font-size: var(--fs-sm); }
.sec-more { margin-top: 10px; font-size: var(--fs-sm); }
.sec-more a { font-weight: 600; text-decoration: none; }
.sec-more a:hover { text-decoration: underline; }

/* Kaart: het 2px kader van de huisstijl, voor op zichzelf staande blokken. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--s4); margin-bottom: var(--s4); }
.card { background: var(--surface); border: var(--line); border-radius: var(--radius); padding: var(--s5); margin-bottom: var(--s4); }
.cards > .card { margin-bottom: 0; }
.card-title { font-size: var(--fs-lg); font-weight: 700; }
.card-note { margin: var(--s1) 0 var(--s4); color: var(--muted); font-size: var(--fs-sm); }
.card-form { max-width: 680px; }

.profile-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: var(--s4); margin-bottom: var(--s4); align-items: stretch; }
.profile-top > .card { margin-bottom: 0; }

/* ── Profielfoto ── */
/* Foto naast de tekst als er ruimte is; is de kaart smal, dan komt de tekst
   eronder in plaats van in een smal kolommetje ernaast te worden geperst. */
.photo-card { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); align-items: flex-start; }
.photo-current { flex: 0 0 auto; }
.photo-body { flex: 1 1 220px; min-width: 0; }
.photo-body .form-row { gap: var(--s2); }

/* Een bestandskiezer die eruitziet als een gewone knop. Het echte veld ligt
   er onzichtbaar overheen, zodat klikken, toetsenbord en voorlezen werken. */
.file-btn { position: relative; overflow: hidden; }
.file-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.file-btn:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--lime); }

/* ── Bijsnijvenster ── */
.cropdialog {
    width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
    margin: auto; padding: var(--s5);
    border: var(--line); border-radius: 14px; background: var(--surface); color: var(--ink);
    box-shadow: 8px 8px 0 rgba(0,0,0,.15);
}
.cropdialog::backdrop { background: rgba(0,0,0,.55); }

.crop-stage {
    position: relative; width: 100%; max-width: 360px; aspect-ratio: 1;
    margin: var(--s3) auto; border-radius: var(--radius); overflow: hidden;
    background: var(--surface-3); cursor: grab; touch-action: none; user-select: none;
}
.crop-stage.is-dragging { cursor: grabbing; }
.crop-stage canvas { display: block; width: 100%; height: 100%; }
/* De ronde markering: wat buiten de cirkel valt is gedimd, zo zie je hoe
   de foto er als rondje uit komt te zien. */
.crop-stage::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    box-shadow: 0 0 0 999px rgba(0,0,0,.45); outline: 2px solid #fff; outline-offset: -2px;
}
.crop-stage:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--lime); }

.crop-controls { display: flex; align-items: center; justify-content: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); }
.crop-zoom { display: flex; align-items: center; gap: var(--s2); flex: 1 1 200px; font-weight: 700; }
.crop-zoom input[type="range"] { flex: 1; accent-color: var(--ink); }

/* Paneel: rustiger dan een kaart, voor bijzaken in een zijkolom. */
.panel { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s4); background: var(--surface); }
.panel-note { background: var(--amber-soft); border-color: #ecd9ac; font-size: var(--fs-sm); color: var(--amber); }
.panel-quiet { background: var(--surface-2); border-color: transparent; }

.stack > * + * { margin-top: var(--s3); }
.stack-sm > * + * { margin-top: var(--s2); }

/* ── 5. Bediening ────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--control-h); padding: 0 14px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface-2); color: var(--ink);
    font: 600 var(--fs-sm)/1 var(--font); white-space: nowrap;
    text-decoration: none; cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--lime); border-color: var(--ink); text-decoration: none; }

.btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }

.btn-ghost { background: transparent; }

.btn-danger { background: transparent; border-color: var(--red); color: var(--red); }
.btn-danger:hover { background: var(--red); border-color: var(--red); color: #fff; }

.btn-sm { min-height: var(--control-h-sm); padding: 0 10px; font-size: var(--fs-xs); border-radius: var(--radius-sm); }
.btn-full { width: 100%; }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border: none; border-radius: 50%;
    background: transparent; color: var(--muted); font: 600 16px/1 var(--font); cursor: pointer;
}
.icon-btn:hover { background: var(--red-soft); color: var(--red); }

.link-add { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-decoration: none; }
.link-add:hover { color: var(--ink); text-decoration: underline; }

input[type="text"], input[type="email"], input[type="date"], select {
    min-height: var(--control-h); padding: 0 10px;
    border: 1px solid rgba(0,0,0,.22); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink);
    font: 400 var(--fs-md) var(--font);
}
input::placeholder { color: #9a9a9a; }
input:hover, select:hover { border-color: rgba(0,0,0,.45); }
input:focus, select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--lime); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--red); }
select:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }

.form-group { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.form-group input, .form-group select { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink); }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.form-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.addbar { margin-top: var(--s4); }
.inline { display: inline-flex; align-items: center; gap: 6px; }
.inline-form { display: flex; align-items: center; gap: 6px; }
.inline-form input[type="text"], .inline-form select { min-height: var(--control-h-sm); font-size: var(--fs-sm); flex: 1 1 auto; min-width: 0; }
.inline-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); min-width: 64px; }
input.wide { min-width: 260px; }

/* Segmentknop: een paar samenhangende keuzes, zoals de weekwissel. */
.segmented { display: inline-flex; border: 1px solid rgba(0,0,0,.22); border-radius: var(--radius); overflow: hidden; }
.segmented a { display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 12px; font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.segmented a + a { border-left: 1px solid rgba(0,0,0,.22); }
.segmented a:hover { background: var(--lime); }
.segmented a[aria-current="true"] { background: var(--ink); color: #fff; }

/* Popover op basis van <details>: werkt zonder JavaScript. */
.popover { position: relative; }
.popover > summary { list-style: none; }
.popover > summary::-webkit-details-marker { display: none; }
.popover-body {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
    width: min(420px, 90vw); padding: var(--s5);
    background: var(--surface); border: var(--line); border-radius: var(--radius);
    box-shadow: 6px 6px 0 rgba(0,0,0,.12);
}
.popover-title { font-size: var(--fs-lg); font-weight: 700; }

/* ── 6. Terugkoppeling ───────────────────────────────────────────────────── */

.alert { padding: var(--s3) var(--s4); border-radius: var(--radius); font-size: var(--fs-sm); margin-bottom: var(--s4); border: 1px solid; }
.alert-ok    { background: var(--green-soft); border-color: #bfe3cd; color: #146b3c; }
.alert-error { background: var(--red-soft);   border-color: #f1c4c4; color: var(--red); }
.alert-info  { background: var(--lime-soft);  border-color: var(--ink); color: var(--ink); }

/* Chips: allemaal dezelfde maat, elk met één betekenis. */
.tag, .badge, .pill, .st, .event {
    display: inline-flex; align-items: center; white-space: nowrap;
    padding: 1px 8px; border-radius: var(--pill); border: 1px solid transparent;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; line-height: 1.6;
}

.tag-late  { background: var(--red-soft); color: var(--red); border-color: #f1c4c4; }
.tag-today { background: var(--lime); color: var(--ink); border-color: var(--ink); }

.badge-projectlead { background: var(--lime); color: var(--ink); border-color: var(--ink); }
.badge-admin    { background: var(--ink); color: #fff; }
.badge-user     { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.badge-readonly { background: var(--surface); color: var(--muted); border-color: var(--border); }

.pill-ok  { background: var(--lime); color: var(--ink); border-color: var(--ink); }
.pill-off { background: var(--surface-2); color: var(--muted); border-color: var(--border); }

/* Projectstatussen (CONCEPT.md §7) en taakstatussen. */
.st-nieuw, .st-open      { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.st-on_track, .st-klaar  { background: var(--green-soft); color: #146b3c; border-color: #bfe3cd; }
.st-risico, .st-bezig    { background: var(--amber-soft); color: var(--amber); border-color: #ecd9ac; }
.st-geblokkeerd          { background: var(--red-soft); color: var(--red); border-color: #f1c4c4; }
.st-afgerond             { background: var(--blue-soft); color: var(--blue); border-color: #c6d8f7; }

/* Datum bij een taak. */
.due { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.due.is-late { color: var(--red); font-weight: 700; }

.empty, .day-empty { color: var(--muted); font-size: var(--fs-sm); }
.empty-box {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
    padding: var(--s4) var(--s5); border: 1px dashed rgba(0,0,0,.25); border-radius: var(--radius);
    color: var(--muted); font-size: var(--fs-sm);
}

.progress { height: 6px; background: var(--surface-3); border-radius: var(--pill); overflow: hidden; }
.progress-bar { display: block; height: 100%; background: var(--green); border-radius: var(--pill); }
.w-0{width:0}.w-5{width:5%}.w-10{width:10%}.w-15{width:15%}.w-20{width:20%}.w-25{width:25%}.w-30{width:30%}
.w-35{width:35%}.w-40{width:40%}.w-45{width:45%}.w-50{width:50%}.w-55{width:55%}.w-60{width:60%}.w-65{width:65%}
.w-70{width:70%}.w-75{width:75%}.w-80{width:80%}.w-85{width:85%}.w-90{width:90%}.w-95{width:95%}.w-100{width:100%}

/* ── 7. Taken ────────────────────────────────────────────────────────────── */

/* Een lijst taken: aaneengesloten rijen in één kader. */
.tasklist { list-style: none; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }

.task { display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s4); min-height: 52px; }
.task + .task { border-top: 1px solid var(--border); }
.task:hover { background: #fafafa; }

.task-check, .task-del { display: flex; flex: 0 0 auto; }
.task-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.task-title { font-size: var(--fs-md); font-weight: 500; overflow-wrap: anywhere; }
.task-meta { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-who { color: var(--ink); font-weight: 600; }

.task-del { opacity: 0; transition: opacity .12s; }
.task:hover .task-del, .task:focus-within .task-del { opacity: 1; }

.task.is-done .task-title { color: var(--muted); text-decoration: line-through; }
.task.is-done { background: #fcfcfc; }
.task.is-late { box-shadow: inset 3px 0 0 var(--red); }

/* Afvinkrondje — overal hetzelfde, groen als het af is. */
.check {
    position: relative; flex: 0 0 auto;
    width: 22px; height: 22px; padding: 0;
    border: 2px solid rgba(0,0,0,.28); border-radius: 50%;
    background: var(--surface); cursor: pointer;
    transition: border-color .12s, background .12s;
}
.check:hover { border-color: var(--green); background: var(--green-soft); }
.check.is-on { background: var(--green); border-color: var(--green); }
.check.is-on::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; }
.check.is-static { cursor: default; opacity: .7; }
.check.is-static:hover { border-color: rgba(0,0,0,.28); background: var(--surface); }
.check-sm { width: 16px; height: 16px; }
.check-sm.is-on::after { font-size: 9px; }

/* ── 8. Vandaag ──────────────────────────────────────────────────────────── */

.daybar { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); padding: var(--s3) var(--s4); background: var(--surface-2); border-radius: var(--radius); }
.daybar-text { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); }
.daybar .progress { flex: 1 1 200px; }

.today-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--s5); align-items: start; }
/* Zonder rechterkolom (geen aandacht/ongepland) loopt het overzicht vol breed. */
.today-grid.solo { grid-template-columns: 1fr; }
/* De secties vloeien in kolommen zodra er ruimte is: op een breed scherm
   staan 'Eerst dit', 'Vandaag' en 'Komende dagen' naast elkaar, zodat je
   de hele dag in één blik ziet zonder te scrollen. */
.today-main { min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 0 var(--s5); align-items: start; }
.today-side { position: sticky; top: 80px; }

.plainlist { list-style: none; }
.attn { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; }
.attn + .attn { border-top: 1px solid var(--border); }
.attn-name { font-weight: 600; font-size: var(--fs-md); }
.attn-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); }

.me-line { font-size: var(--fs-sm); margin-top: 2px; overflow-wrap: anywhere; }

/* ── 9. Mijn week ────────────────────────────────────────────────────────── */

.days {
    display: grid;
    /* Zoveel dagkolommen als er passen: op een breed scherm maandag t/m
       vrijdag naast elkaar, op een smal scherm onder elkaar. */
    grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
    gap: var(--s5) var(--s4);
    align-items: start;
}
.day { min-width: 0; }

/* In een smalle dagkolom komt de datum onder de taak, net als op een telefoon. */
.day .task {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
    grid-template-areas: "check body del" "check due del";
    column-gap: var(--s3); row-gap: 2px; align-items: start;
}
.day .task > .task-check, .day .task > .check { grid-area: check; margin-top: 2px; }
.day .task > .task-body { grid-area: body; }
.day .task > .due { grid-area: due; }
.day .task > .task-del { grid-area: del; }
.day .task-meta { white-space: normal; }
.day-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.day-name { font-size: var(--fs-lg); font-weight: 700; }
.day-name span { font-weight: 400; color: var(--muted); font-size: var(--fs-sm); margin-left: 4px; }
.day-add { margin-left: auto; }
.day.is-past .day-name { color: var(--muted); }
.day.is-today .tasklist { border: var(--line); }
.day-empty { padding: 2px 0 var(--s1); }

/* ── 10. Takenformulier en venster ───────────────────────────────────────── */

.taskform { display: flex; flex-direction: column; gap: var(--s1); }

.step { position: relative; border: none; padding: var(--s3) 0 var(--s3) 44px; }
.step + .step { border-top: 1px solid var(--border); }
.step legend { display: flex; align-items: center; gap: var(--s2); float: left; width: 100%; margin: 0 0 var(--s2) -44px; font-size: var(--fs-md); font-weight: 700; }
.step legend + * { clear: both; }
.step-n {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 30px; height: 30px; margin-right: 6px; border-radius: 50%;
    border: 2px solid var(--ink); background: var(--surface); font-size: var(--fs-sm); font-weight: 700;
}
.step.is-done .step-n { background: var(--lime); font-size: 0; }
.step.is-done .step-n::after { content: "✓"; font-size: 13px; }
.step.has-error .step-n { border-color: var(--red); background: var(--red-soft); color: var(--red); font-size: var(--fs-sm); }
.step.has-error .step-n::after { content: none; }

.step input[type="text"] { width: 100%; font-size: var(--fs-lg); min-height: 44px; }
.field-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s2); }
.field-row select { width: 100%; min-width: 0; }
.field-foot { display: flex; justify-content: space-between; gap: var(--s3); }
.field-hint { margin-top: 6px; color: var(--muted); font-size: var(--fs-sm); }
.field-count { margin-top: 6px; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.field-count.is-over { color: var(--red); font-weight: 700; }
.field-error { margin-top: 6px; color: var(--red); font-size: var(--fs-sm); font-weight: 600; }
.field-static { font-weight: 600; min-height: var(--control-h); display: flex; align-items: center; }
.field-inline { display: flex; align-items: center; gap: var(--s2); margin-top: 10px; font-size: var(--fs-sm); color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-pick {
    display: inline-flex; align-items: baseline; gap: 6px;
    min-height: var(--control-h); padding: 0 12px;
    border: 1px solid rgba(0,0,0,.22); border-radius: var(--pill);
    background: var(--surface); color: var(--ink); font: 600 var(--fs-sm) var(--font); cursor: pointer;
    align-items: center;
}
.chip-pick small { font-weight: 400; color: var(--muted); }
.chip-pick:hover { border-color: var(--ink); background: var(--lime-soft); }
.chip-pick[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip-pick[aria-pressed="true"] small { color: rgba(255,255,255,.7); }

.taskform-foot { margin-top: var(--s2); padding-top: var(--s4); border-top: var(--line); display: flex; flex-direction: column; gap: var(--s3); }
.taskform-summary { font-size: var(--fs-sm); color: var(--muted); min-height: 1.4em; }
.taskform-summary b { color: var(--ink); }
.taskform-actions { display: flex; justify-content: flex-end; gap: var(--s2); }

.taskdialog {
    width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
    margin: auto; padding: var(--s5);
    border: var(--line); border-radius: 14px; background: var(--surface); color: var(--ink);
    box-shadow: 8px 8px 0 rgba(0,0,0,.15);
}
.taskdialog::backdrop { background: rgba(0,0,0,.45); }
.taskdialog-head { margin-bottom: var(--s2); }
.taskdialog-head h2 { font-size: 20px; font-weight: 700; }
.taskdialog-head p { color: var(--muted); font-size: var(--fs-sm); }

/* ── 11. Projectbord (teamleden-bord uit CONCEPT.md) ─────────────────────── */

.pmx-board { display: flex; gap: var(--s3); align-items: flex-start; overflow-x: auto; padding-bottom: var(--s3); }

.pmx-col { flex: 1 1 280px; min-width: 280px; max-width: 400px; display: flex; flex-direction: column; border: var(--line); border-radius: var(--radius); background: var(--surface); }
.pmx-col.unassigned { border-style: dashed; }

.pmx-col-head { display: flex; align-items: center; gap: var(--s2); padding: 10px var(--s3); margin: -2px -2px 0; background: var(--ink); color: #fff; border-radius: var(--radius) var(--radius) 0 0; cursor: pointer; user-select: none; }
.pmx-col-head .av { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 10px; font-weight: 700; box-shadow: 0 0 0 2px var(--lime); }
.pmx-col.unassigned .av { background: var(--surface-2); color: var(--muted); box-shadow: none; }
.pmx-col-nm { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmx-col-n { flex: 0 0 auto; padding: 1px 8px; border-radius: var(--pill); background: var(--lime); color: var(--ink); font-size: var(--fs-xs); font-weight: 700; }

.pmx-col-body { display: flex; flex-direction: column; min-height: 64px; }
.pmx-col-body.drop-hover, .cell-children.drop-hover { background: var(--lime-soft); }
.pmx-col-empty { padding: var(--s4); text-align: center; color: var(--muted); font-size: var(--fs-sm); }

.pmx-col.folded { flex: 0 0 56px; min-width: 56px; max-width: 56px; background: var(--ink); overflow: hidden; cursor: pointer; }
.pmx-col.folded .pmx-col-head { flex-direction: column; margin: 0; padding: 10px 6px; border-radius: 0; }
.pmx-col.folded .pmx-col-nm, .pmx-col.folded .pmx-col-body { display: none; }
.pmx-col.folded.is-empty .av { opacity: .45; }

.cell { background: var(--surface); }
.cell > summary { list-style: none; }
.cell > summary::-webkit-details-marker { display: none; }
.cell[draggable="true"] { cursor: grab; }
.cell.dragging { opacity: .4; }

.pmx-col-body > .cell-project + .cell-project { border-top: 1px solid var(--border); }
.cell-head { display: flex; align-items: flex-start; gap: var(--s2); padding: 10px var(--s3); cursor: pointer; }
.cell-head:hover { background: var(--surface-2); }
.cell-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cell-sub { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-title { font-size: var(--fs-md); font-weight: 600; line-height: 1.3; }
.cell-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cell-project.is-done .cell-title { color: var(--muted); text-decoration: line-through; }

.cell-project[open] > .cell-head { background: var(--lime-soft); }
.cell-body { border-top: 1px solid var(--border); background: #fcfcfc; }
.cell-children { display: flex; flex-direction: column; }

.cell-service { border-bottom: 1px solid var(--border); }
.cell-service > .cell-head { padding: var(--s2) var(--s3); }
.cell-service > .cell-head .cell-title { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; }
.cell-service.is-done > .cell-head .cell-title { color: var(--muted); text-decoration: line-through; }
.count { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); background: var(--surface-3); border-radius: var(--pill); padding: 0 7px; }

.cell-task { padding: 7px var(--s3) 7px var(--s4); border-top: 1px solid rgba(0,0,0,.06); }
.cell-task:hover { background: var(--surface); }
.tk-row { display: flex; align-items: center; gap: var(--s2); }
.tk-title { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-task.is-done .tk-title { color: var(--muted); text-decoration: line-through; }
.cell-task.is-late { box-shadow: inset 3px 0 0 var(--red); }
.cell-task .due { font-size: var(--fs-xs); }

/* ── Gezichten: profielfoto of initialen, overal dezelfde vorm ── */
.avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
    object-fit: cover; vertical-align: middle;
    background: var(--lime); color: var(--ink);
    box-shadow: 0 0 0 1px var(--ink);
    font-size: var(--fs-xs); font-weight: 700; line-height: 1;
}
img.avatar { background: var(--surface-2); }
.avatar.is-empty { background: var(--surface-2); color: var(--muted); box-shadow: none; }
.avatar-xs { width: 22px; height: 22px; font-size: 9px; box-shadow: none; }
.avatar-xs.is-initials { background: var(--ink); color: #fff; }
.avatar-sm { width: 32px; height: 32px; }
.avatar-col { width: 26px; height: 26px; font-size: 10px; background: #fff; box-shadow: 0 0 0 2px var(--lime); }
.avatar-xl { width: 112px; height: 112px; font-size: 34px; box-shadow: 0 0 0 2px var(--ink); }
.task-who .avatar-xs { width: 16px; height: 16px; font-size: 7.5px; margin-right: 2px; vertical-align: -3px; }

.cell-add { padding: 6px var(--s3) 6px var(--s4); }
.cell-admin { border-top: 1px dashed var(--border); padding: var(--s2) var(--s3); }
.cell-admin > summary { list-style: none; cursor: pointer; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cell-admin > summary::-webkit-details-marker { display: none; }
.cell-admin > summary::before { content: "▸ "; }
.cell-admin[open] > summary::before { content: "▾ "; }
.cell-admin > summary:hover { color: var(--ink); }
.cell-admin > .stack-sm { margin-top: var(--s2); }

/* ── 12. Beheer: tabellen, gegevenslijst, audit ─────────────────────────── */

.tablewrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td { text-align: left; padding: 10px var(--s3); border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.table tbody tr:hover { background: var(--lime-soft); }
.table tbody tr:last-child td { border-bottom: none; }
.table select { min-height: var(--control-h-sm); font-size: var(--fs-sm); }
.row-inactive { opacity: .5; }
.detail { color: var(--muted); }

.datalist { display: grid; grid-template-columns: 150px 1fr; gap: 10px var(--s4); }
.datalist dt { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); align-self: center; }
.datalist dd { font-size: var(--fs-md); min-width: 0; overflow-wrap: anywhere; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 10px; margin: var(--s4) 0; }
.stat { display: flex; flex-direction: column; gap: 6px; padding: var(--s3) var(--s4); border: var(--line); border-radius: var(--radius); }
.stat .v { font-size: 24px; font-weight: 700; line-height: 1; }
.stat .l { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

.event { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.event-login_success { background: var(--lime); color: var(--ink); border-color: var(--ink); }
.event-login_denied, .event-access_denied, .event-rate_limited { background: var(--red-soft); color: var(--red); border-color: #f1c4c4; }
.event-user_deactivated { background: var(--amber-soft); color: var(--amber); border-color: #ecd9ac; }

/* ── 13. Inloggen en fouten ──────────────────────────────────────────────── */

.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--s4); }
.login-card { width: 100%; max-width: 380px; padding: 40px 36px; border: var(--line); border-radius: var(--radius); background: var(--surface); text-align: center; }
.login-logo { display: flex; justify-content: center; margin-bottom: var(--s4); }
/* Het beeldmerk is van zichzelf donker blauwgroen; zwart past bij de rest. */
.login-logo .brand-logo { height: 42px; width: auto; display: block; filter: brightness(0); }
.login-card h1 { font-size: 20px; font-weight: 700; margin-bottom: var(--s1); }
.login-subtitle { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--s5); }
.login-card .alert { text-align: left; }

.btn-google { width: 100%; min-height: 44px; background: var(--surface); border: var(--line); font-size: var(--fs-md); }
.btn-google:hover { background: var(--lime); }
.btn-google .g { color: #1a73e8; font-weight: 700; }
.btn-google:hover .g { color: var(--ink); }

.errorpage { max-width: 460px; margin: 12vh auto 0; text-align: center; padding: var(--s4); }
.errorpage-code { font-size: 56px; font-weight: 700; line-height: 1; color: var(--lime); -webkit-text-stroke: 1.5px var(--ink); }
.errorpage h1 { font-size: 20px; margin: var(--s3) 0 var(--s2); }
.errorpage-message { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--s5); }

/* ── 14. Kleine schermen ─────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .today-grid { grid-template-columns: 1fr; }
    .today-side { position: static; }
}

@media (max-width: 760px) {
    .fk-side { flex-basis: 60px; width: 60px; padding: var(--s3) 6px; }
    .fk-navlbl, .fk-who { display: none; }
    .fk-profile { padding: 3px; }
    .fk-top { padding: var(--s2) var(--s3); }
    .page { padding: var(--s4) var(--s3) var(--s5); }
    .page-head { align-items: flex-start; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .field-row, .form-pair { grid-template-columns: 1fr; }
    .datalist { grid-template-columns: 1fr; gap: 2px 0; }
    .datalist dd { margin-bottom: 10px; }
    /* Op een telefoon komt de datum onder de titel in plaats van ernaast,
       zodat de tekst de volle breedte houdt. */
    .task {
        display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
        grid-template-areas: "check body del" "check due del";
        column-gap: var(--s3); row-gap: 2px; align-items: start;
    }
    .task > .task-check, .task > .check { grid-area: check; margin-top: 2px; }
    .task > .task-body { grid-area: body; }
    .task > .due { grid-area: due; }
    .task > .task-del { grid-area: del; opacity: 1; }
    .task-meta { white-space: normal; }
    .step { padding-left: 0; }
    .step legend { margin-left: 0; }
    input.wide { min-width: 0; width: 100%; }
}

/* ── Bedrijfslogo's (admin) ──────────────────────────────────────────────── */
.logolijst { list-style: none; display: flex; flex-direction: column; }
/* Zoekveld boven de bedrijvenlijst. */
.bedrijf-zoek { display: flex; align-items: center; gap: var(--s3); margin: var(--s3) 0 var(--s2); }
.bedrijf-zoek-veld { flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 12px; border: 1.5px solid var(--ink); border-radius: 8px;
                     font: inherit; font-size: var(--fs-md); background: var(--surface); color: var(--ink); }
.bedrijf-zoek-veld:focus { outline: 2px solid var(--lime); outline-offset: 2px; }
.bedrijf-zoek-n { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.logo-rij[hidden] { display: none; }
/* De eerste zichtbare rij na filteren heeft geen lijn erboven. */
.logo-rij.is-eerste { border-top: none; }
.logo-rij { display: flex; align-items: center; gap: var(--s3); padding: 10px 0; border-top: 1px solid var(--border); }
.logo-rij:first-child { border-top: none; }
.logo-naam { flex: 1 1 auto; min-width: 0; font-size: var(--fs-md); font-weight: 600;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-acties { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s2); }
.logo-upload { display: flex; align-items: center; gap: var(--s2); }
/* Huisstijlkleur: een net kleurvakje dat meteen opslaat. Leeg = nog geen kleur. */
.logo-kleur { display: flex; align-items: center; gap: 4px; margin: 0; }
.kleur-vak { position: relative; display: inline-flex; width: 30px; height: 30px; border: 1.5px solid var(--ink);
             border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--surface); }
.kleur-vak:focus-within { outline: 2px solid var(--lime); outline-offset: 2px; }
.kleur-vak input[type="color"] { width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer;
                                 -webkit-appearance: none; appearance: none; }
.kleur-vak input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.kleur-vak input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 0; }
.kleur-vak input[type="color"]::-moz-color-swatch { border: 0; border-radius: 0; }
/* Nog geen kleur: wit vakje met een schuine streep, zoals 'geen'. */
.logo-kleur.is-leeg .kleur-vak { border-color: var(--border); border-style: dashed; }
.logo-kleur.is-leeg .kleur-vak::after { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1.5px;
                                        background: rgba(0,0,0,.25); transform: rotate(45deg); pointer-events: none; }
.logo-kleur.is-bezig { opacity: .5; pointer-events: none; }
.kleur-hex { width: 84px; height: 30px; padding: 0 8px; border: 1.5px solid var(--border); border-radius: 8px;
             font: 500 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); background: var(--surface); }
.kleur-hex:focus { outline: none; border-color: var(--ink); }
.kleur-hex[aria-invalid="true"] { border-color: #c73838; background: #fff1f1; }
.kleur-wis { width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%; background: transparent;
             color: var(--muted); font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; }
.kleur-wis:hover { background: rgba(212,24,61,.12); color: #c73838; }
/* Alleen nog naam + kleurvakje: dat past ook op een telefoon op één regel;
   een lange naam breekt dan af in plaats van weg te vallen. */
@media (max-width: 640px) {
    .logo-naam { white-space: normal; }
}


/* ── Potloodje in de bedrijfsrij (bord en Mijn week) ──
   Onopvallend: verschijnt als je over de rij gaat (op een touchscreen altijd
   een beetje). Neemt wel altijd zijn plek in, zodat er niets verspringt. */
.bk-edit { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
           width: 18px; height: 20px; padding: 0; margin: 0; border: 0; border-radius: 0; background: none;
           color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .12s; }
.cell-head:hover .bk-edit, .tk-head:hover .bk-edit, .mw-group-head:hover .bk-edit,
.bk-edit:focus-visible { opacity: 1; }
.bk-edit:hover { color: var(--ink); }
.bk-edit:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
@media (hover: none) { .bk-edit { opacity: .6; } }

/* ── Popup: kleur en tekstkleur van een bedrijf ── */
.bk-dialog { width: min(400px, calc(100vw - 32px)); margin: auto; padding: 22px;
             border: 2px solid #000; border-radius: 14px; background: #fff; color: #000;
             box-shadow: 8px 8px 0 rgba(0,0,0,.15); }
.bk-dialog::backdrop { background: rgba(0,0,0,.45); }
.bk-dialog h2 { margin: 0 0 14px; font-size: 17px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
/* Het voorbeeld ziet eruit als de kop van een kaart. */
.bk-voorbeeld { display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px;
                border: 1.5px solid #000; border-radius: 8px; background: #fff; color: #000; }
.bk-voorbeeld-naam { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; line-height: 22px; overflow-wrap: anywhere; }
.bk-voorbeeld-n { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; line-height: 22px; opacity: .8; font-variant-numeric: tabular-nums; }
.bk-lbl { display: block; margin: 16px 0 6px; padding: 0; font-size: 12px; font-weight: 700; }
.bk-rij { display: flex; align-items: center; gap: 6px; }
.bk-rij .kleur-hex { width: 110px; }
.bk-fout { margin: 6px 0 0; font-size: 12.5px; color: #c73838; }
.bk-tekst { margin: 0; padding: 0; border: 0; min-width: 0; }
/* Drie knoppen naast elkaar, de gekozen is zwart. */
.bk-keuzes { display: inline-flex; border: 1.5px solid #000; border-radius: 8px; overflow: hidden; }
.bk-keuze { position: relative; margin: 0; }
.bk-keuze input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bk-keuze span { display: block; padding: 6px 12px; font-size: 12.5px; font-weight: 600; line-height: 1.3; cursor: pointer; }
.bk-keuze + .bk-keuze span { border-left: 1.5px solid #000; }
.bk-keuze input:checked + span { background: #000; color: #fff; }
.bk-keuze input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: -3px; }
.bk-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.bk-acties .bk-wis { margin-right: auto; }
.bk-acties .bk-wis[hidden] { display: none; }
.bk-acties .bk-annuleer:first-child, .bk-wis[hidden] + .bk-annuleer { margin-left: auto; }

/* Gebruikersbeheer: koppeling met Simplicate. */
.mw-koppel select { max-width: 240px; }
.koppel-waarschuwing { margin-top: 4px; font-size: var(--fs-xs); font-weight: 600; color: #c73838; }

/* ── Innovatie-pot ─────────────────────────────────────────────────────── */
/* Het lampje onderaan in de linkerbalk: voor iedereen, om een idee in te sturen. */
.fk-idee { margin-top: auto; width: 100%; border: 0; background: none; font-family: inherit; cursor: pointer; }
.fk-idee:hover .fk-ico { color: var(--lime); }
.fk-idee:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
/* Teller met nieuwe ideeën op de tab 'Innovatie-pot' (alleen projectlead). */
.fk-ico-wrap { position: relative; display: inline-flex; }
.fk-nav-n { position: absolute; top: -6px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px;
            border-radius: 20px; background: var(--lime); color: var(--ink); border: 1.5px solid var(--ink);
            font-size: 9.5px; font-weight: 700; line-height: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.fk-navitem.active .fk-nav-n { background: var(--ink); color: var(--lime); }

/* Het venster om een idee op te schrijven. */
.idee-dialog { width: min(480px, calc(100vw - 32px)); }
.idee-uitleg { margin: 0 0 4px; font-size: 13px; line-height: 1.45; color: #6b6b6b; }
.idee-tekst { width: 100%; min-height: 120px; resize: vertical; padding: 10px 12px; border: 1.5px solid var(--ink);
              border-radius: 8px; font: inherit; font-size: 13.5px; line-height: 1.45; background: #fff; color: #000; }
.idee-tekst:focus { outline: 2px solid var(--lime); outline-offset: 1px; }
.idee-teller { min-height: 16px; margin-top: 4px; font-size: 11.5px; color: var(--muted); text-align: right; }
.idee-dialog .idee-annuleer { margin-left: auto; }
.idee-melding { position: fixed; left: 50%; bottom: 24px; z-index: 200; transform: translate(-50%, 12px); opacity: 0;
                pointer-events: none; transition: transform .18s, opacity .18s;
                max-width: calc(100vw - 32px); padding: 11px 16px; border-radius: 12px; background: #000; color: #fff;
                font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.idee-melding.is-open { transform: translate(-50%, 0); opacity: 1; }

/* De pagina van de projectlead: dezelfde kaartjes als in Mijn week. */
.idee-bar, .idee-lijst, .idee-leeg { max-width: 640px; }
.idee-tag-nieuw { background: var(--lime); color: var(--ink); }
.idee-lijst { display: flex; flex-direction: column; gap: 8px; }
.idee-kaart { border: 1.5px solid var(--ink); border-radius: 8px; background: var(--surface); overflow: hidden; }
.idee-kop { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-bottom: 1.5px solid var(--ink); }
.idee-van { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 20px; overflow-wrap: break-word; }
.idee-nieuw { flex: 0 0 auto; padding: 0 7px; border-radius: 20px; background: var(--lime); border: 1px solid var(--ink);
              font-size: 10px; font-weight: 700; line-height: 16px; }
.idee-wanneer { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: var(--muted); line-height: 20px; }
.idee-weg { margin: 0; }
.idee-x { display: inline-flex; align-items: center; justify-content: flex-end; width: 2ch; height: 20px; padding: 0;
          border: 0; background: none; font-family: inherit; font-size: 15px; font-weight: 500; line-height: 20px;
          color: var(--muted); cursor: pointer; }
.idee-x:hover { color: #c73838; }
.idee-x:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
.idee-body { padding: 9px 9px 10px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.idee-kaart.is-nieuw .idee-kop { background: var(--lime-soft); }