/* Motopp Planner — huisstijl (PRD par. 12).
   Stijl afgeleid van de Motopp PersonalScore-app: licht/warm, witte kaarten,
   zwart als accent, linker-zijbalk. Alle opmaak leeft in deze laag. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-700.woff2") format("woff2"); }

:root {
  --bg: #f6f4f1;            /* warm gebroken-wit, paginakleur */
  --surface: #ffffff;       /* kaarten */
  --surface-2: #faf9f7;     /* subtiele hover/zebra */
  --text: #141414;
  --muted: #7c7873;         /* secundaire tekst */
  --label: #9a958d;         /* uppercase micro-labels */
  --border: #e7e3dd;        /* warme lichte rand */
  --border-strong: #d9d3ca;
  --accent: #141414;        /* zwart — primaire knoppen/accent */
  --accent-hover: #2e2c29;

  /* status */
  --green: #1e9e5a;  --green-bg: #e7f4ec;
  --orange: #c9791f; --orange-bg: #fbf1e3;
  --red: #d1453b;    --red-bg: #fbeceb;
  --purple: #7c5cd6;

  /* aliassen die de kalender-/tabelregels hergebruiken */
  --primary: #141414;
  --primary-light: #f1efea;
  --warn-bg: #fbf1e3;
  --warn-border: #e3b877;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(20,18,15,.04), 0 1px 3px rgba(20,18,15,.05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text); background: var(--bg);
  font-family: "Inter", system-ui, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* ---------- Layout: zijbalk + content ---------- */
body.has-sidebar { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
body.no-sidebar { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }

.sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 1.1rem .75rem 1rem;
}
.sidebar .brand { display: flex; align-items: center; gap: .45rem; padding: .3rem .6rem 1.1rem; }
.sidebar .brand a { text-decoration: none; display: flex; align-items: center; gap: .45rem; }
.brand .sub { font-weight: 500; font-size: .95rem; color: var(--muted); letter-spacing: -.01em; }
.brand-logo { height: 24px; width: auto; display: block; }

.side-nav { display: flex; flex-direction: column; gap: .1rem; overflow-y: auto; }
.side-nav a {
  display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem;
  border-radius: var(--radius-sm); color: var(--text); text-decoration: none;
  font-size: .92rem; font-weight: 500; line-height: 1.1;
}
.side-nav a:hover { background: var(--surface-2); }
.side-nav a.active { background: var(--primary-light); font-weight: 600; }
.side-nav a svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none;
                  stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.side-nav a.active svg { opacity: 1; }
.nav-section { padding: 1rem .65rem .3rem; font-size: .67rem; font-weight: 700;
               letter-spacing: .09em; text-transform: uppercase; color: var(--label); }

/* Taalwissel (NL/EN): stil segmentje boven het gebruikersblok. Zwart is het
   enige accent (actieve taal), conform het ontwerp-document. */
.lang-switch { margin-top: auto; padding: 0 .6rem .7rem; }
.lang-switch form { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-2);
                    border: 1px solid var(--border); border-radius: 999px; }
.lang-switch button { border: none; background: none; font: inherit; font-size: .7rem;
                      font-weight: 600; letter-spacing: .04em; color: var(--muted);
                      padding: .18rem .55rem; border-radius: 999px; cursor: pointer; }
.lang-switch button:hover { color: var(--text); }
.lang-switch button[aria-pressed="true"] { background: var(--accent); color: #fff;
                                           font-weight: 700; cursor: default; }
/* Zelfde segment, maar los gecentreerd (inlogpagina, zonder zijbalk). */
.lang-switch.centered { margin-top: 1rem; padding: 0; text-align: center; }

.side-foot { margin-top: 0; padding-top: .9rem; border-top: 1px solid var(--border);
             display: flex; align-items: center; gap: .6rem; }
.side-foot .avatar { width: 32px; height: 32px; border-radius: 50%; flex: none;
                     background: var(--accent); color: #fff; display: grid; place-items: center;
                     font-weight: 700; font-size: .8rem; text-transform: uppercase; }
.side-foot .who { min-width: 0; }
.side-foot .who b { display: block; font-size: .85rem; font-weight: 600;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-foot .who small { color: var(--muted); font-size: .74rem; }
.side-foot form { margin-left: auto; }
.side-foot button { background: none; border: none; cursor: pointer; color: var(--muted); padding: .3rem; border-radius: 8px; }
.side-foot button:hover { background: var(--surface-2); color: var(--text); }

.app-main { display: flex; flex-direction: column; min-width: 0; }
main { width: 100%; max-width: 1200px; margin: 0 auto; padding: 1.8rem 2rem 3rem; }
body.no-sidebar main { padding: 0; }

/* ---------- Typografie ---------- */
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .4rem; }
h2 { font-size: 1.15rem; font-weight: 600; margin: 1.2rem 0 .5rem; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.head-actions { display: inline-flex; align-items: center; gap: .6rem; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* ---------- Kaarten ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        padding: 1.4rem 1.5rem; margin-bottom: 1.1rem; box-shadow: var(--shadow); }
.card.narrow { max-width: 400px; width: 100%; margin: 0 auto; }
.card-warn { border-color: var(--warn-border); background: var(--warn-bg); box-shadow: none; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

/* KPI-tegels (à la PersonalScore Reports) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        padding: 1.1rem 1.2rem; box-shadow: var(--shadow); }
.stat .num { font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.stat .lbl { display: block; margin-top: .35rem; color: var(--muted); font-size: .85rem; }
.stat .num.pos { color: var(--green); } .stat .num.warn { color: var(--orange); }
.stat .num.neg { color: var(--red); } .stat .num.alt { color: var(--purple); }

/* ---------- Tabellen ---------- */
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table th, .table td { text-align: left; padding: .7rem .75rem; border-bottom: 1px solid var(--border); font-size: .92rem; }
.table thead th { background: transparent; color: var(--label); text-transform: uppercase;
                  font-size: .69rem; letter-spacing: .07em; font-weight: 700; }
.table tbody tr:hover { background: var(--surface-2); }

.week-block { margin-bottom: 1.5rem; }

/* Definitielijst voor detailweergaven (label links, waarde rechts) */
.detail { margin: 0 0 .3rem; }
.detail > div { display: grid; grid-template-columns: 200px 1fr; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--border); }
.detail > div:last-child { border-bottom: none; }
.detail dt { color: var(--muted); font-weight: 500; margin: 0; }
.detail dd { margin: 0; font-weight: 500; }
@media (max-width: 560px) { .detail > div { grid-template-columns: 1fr; gap: .1rem; } }

/* ---------- Formulieren ---------- */
label { display: block; margin-bottom: .8rem; font-weight: 600; font-size: .88rem; }
label input, label select, label textarea {
  display: block; width: 100%; margin-top: .3rem; padding: .5rem .65rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font: inherit; font-weight: 400; background: var(--surface); color: var(--text);
}
label input:focus, label select:focus, label textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(20,18,15,.08);
}
label.checkbox input { display: inline; width: auto; }
label small { font-weight: 400; color: var(--muted); }
/* Checkboxen in (geneste) lijsten — o.a. de trainerkeuze in het sessie-
   formulier en het uitrolformulier: vinkje en naam op één klikbare regel. */
label input[type=checkbox] { display: inline-block; width: auto; margin: 0 .4rem 0 0; }
.checkbox-list, label div[id^="id_"] { font-weight: 400; }
.checkbox-list label, label div[id^="id_"] label {
  display: inline-flex; align-items: center; gap: .1rem;
  margin: 0 1rem .25rem 0; font-weight: 500; cursor: pointer;
}
.errorlist { color: var(--red); font-size: .85rem; margin: .2rem 0 0; padding-left: 1rem; }

/* ---------- Knoppen ---------- */
.btn { display: inline-block; padding: .5rem 1rem; border: 1px solid var(--border-strong);
       border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
       text-decoration: none; font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer;
       transition: background .12s, border-color .12s; }
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-small { padding: .25rem .6rem; font-size: .8rem; }
/* Low-contrast actie (bijv. 'Afmelden' in het sessiepaneel): aanwezig maar
   niet schreeuwerig; wint pas aandacht bij hover/focus. */
.btn-subtle { border-color: var(--border); background: transparent; color: var(--muted);
  font-size: .84rem; }
.btn-subtle:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.btn-block { display: block; text-align: center; margin-bottom: .75rem; }
.btn-link { background: none; border: none; color: var(--text); cursor: pointer;
            text-decoration: underline; font: inherit; padding: 0; }
.btn-link.danger { color: var(--red); }
.inline { display: inline; }

/* ---------- Flash / badges ---------- */
.flash { padding: .65rem .95rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .9rem; }
.flash-success { background: var(--green-bg); border: 1px solid #a9d9bd; color: #14683b; }
.flash-error { background: var(--red-bg); border: 1px solid #eab4af; color: #9c2b23; }
.flash-warning { background: var(--warn-bg); border: 1px solid var(--warn-border); color: #8a5312; }

/* Live conflictwaarschuwingen in het sessieformulier (P2): zelfde taal als
   .flash-warning, maar compact en gestapeld binnen het formulier. */
.conflict-hints { display: grid; gap: .4rem; margin: .1rem 0 1rem; }
.conflict-hints .hint { background: var(--warn-bg); border: 1px solid var(--warn-border);
                        color: #8a5312; padding: .5rem .7rem; border-radius: var(--radius-sm);
                        font-size: .85rem; }
.conflict-hints[hidden] { display: none; }

.badge { background: var(--green-bg); color: var(--green); border-radius: 999px;
         padding: .2rem .65rem; font-size: .75rem; font-weight: 600; }
.badge-muted { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border-strong); }
.issue-badge { background: var(--warn-bg); color: var(--orange); border: 1px solid var(--warn-border);
               border-radius: 999px; padding: .2rem .65rem; font-size: .75rem; font-weight: 700;
               text-decoration: none; white-space: nowrap; }
a.issue-badge:hover { filter: brightness(.96); }

/* ---------- Info-tooltip (subtiel info-icoon naast titel/label) ---------- */
.info-tip { position: relative; display: inline-flex; vertical-align: middle; }
.info-tip-btn { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem;
                padding: 0; margin-left: .4rem; border: none; border-radius: 999px;
                background: none; color: var(--label); cursor: help; line-height: 0; }
.info-tip-btn svg { width: 1.05rem; height: 1.05rem; }
.info-tip-btn:hover { color: var(--muted); }
.info-tip-btn:focus-visible { outline: none; color: var(--text); box-shadow: 0 0 0 3px rgba(20,18,15,.12); }
.info-tip-bubble { position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%);
                   z-index: 40; width: max-content; max-width: 20rem;
                   background: var(--text); color: #fff;
                   font-family: inherit; font-size: .8rem; font-weight: 400; line-height: 1.45;
                   letter-spacing: normal; text-align: left; text-transform: none;
                   padding: .55rem .7rem; border-radius: var(--radius-sm);
                   box-shadow: 0 6px 18px rgba(20,18,15,.20);
                   opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none; }
.info-tip-bubble::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
                           border: 6px solid transparent; border-bottom-color: var(--text); }
.info-tip-btn:hover + .info-tip-bubble,
.info-tip-btn:focus-visible + .info-tip-bubble { opacity: 1; visibility: visible; }

/* Weeknavigatie op het traineeship-detail: blijft bovenaan plakken. */
.week-nav { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: .35rem;
            align-items: center; padding: .55rem .8rem; margin-bottom: 1rem;
            background: var(--bg); border-bottom: 1px solid var(--border); }
.week-nav a { min-width: 1.9rem; text-align: center; padding: .15rem .35rem; border-radius: 6px;
              border: 1px solid var(--border-strong); background: var(--surface);
              color: var(--text); text-decoration: none; font-size: .8rem; font-weight: 600; }
.week-nav a:hover { background: var(--surface-2); }
.week-nav a.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.week-nav .btn { margin-left: auto; }
.week-block { scroll-margin-top: 3.5rem; }
.scope-switch { display: inline-flex; gap: .3rem; margin-bottom: .9rem; }
.filterbar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filterbar select { padding: .45rem .55rem; border: 1px solid var(--border-strong);
                    border-radius: var(--radius-sm); font: inherit; background: var(--surface); }
.filterbar .range { font-weight: 600; }
.filterbar .filter-right { margin-left: auto; }
@media (max-width: 720px) { .filterbar .filter-right { margin-left: 0; } }

/* Groepscode-pill naast de paginatitel op 'Mijn planning' (vaste trainee-groep):
   compacte pill die meelift met de titel, niet klikbaar. */
.group-pill { display: inline-block; vertical-align: middle; margin-left: .55rem;
              padding: .22rem .6rem; border: 1px solid var(--border-strong);
              border-radius: var(--radius-sm); background: var(--surface-2);
              color: var(--text); font-size: .8rem; font-weight: 600; cursor: default; }
.issues { color: var(--orange); margin: .3rem 0; }

/* ---------- Controleweergave ---------- */
/* Bouwt op de bestaande componenten (.stat-tegels, .card, .table). Alleen het
   klik-om-te-filteren-gedrag en het scroll-venster krijgen wat extra opmaak. */

/* KPI-tegels als filterknop: identiek aan .stat, maar klikbaar. */
.stat-filter { width: 100%; text-align: left; font: inherit; cursor: pointer;
  transition: box-shadow .08s ease, border-color .08s ease; }
.stat-filter:hover:not(:disabled) { border-color: var(--border-strong); }
.stat-filter:disabled { cursor: default; }
.stat-filter[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* Filternotitie boven de lijst (verschijnt bij een actief filter). */
.filter-note { margin: -.4rem 0 1.1rem; color: var(--muted); font-size: .9rem; }
.allclear { color: var(--green); font-weight: 600; margin: .2rem 0 1.1rem; }

/* Traineeship als inklapbare kaart (zelfde patroon als de verplaats-tools). */
.ts-fold { padding: 0; margin-bottom: .7rem; }
.ts-fold > summary { cursor: pointer; padding: 1rem 1.5rem; display: flex; align-items: center;
  gap: .6rem; font-weight: 600; }
.ts-fold > summary:hover { background: var(--surface-2); border-radius: var(--radius); }
.ts-fold[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.ts-right { margin-left: auto; display: flex; align-items: center; gap: .7rem; font-weight: 400; }
.ts-meta { color: var(--muted); font-size: .82rem; }
.ts-body { padding: 1rem 1.5rem 1.3rem; }
.ts-body .issues { margin-top: 0; }
.members-fold { margin-top: .9rem; }
.members-fold > summary { cursor: pointer; color: var(--muted); }

/* Scroll-venster: lange conflictlijsten krijgen een vaste hoogte met scroll;
   de tabelkop blijft plakken zodat de kolommen leesbaar blijven. */
.conflict-scroll { max-height: 22rem; overflow-y: auto; border: 1px solid var(--border);
  border-radius: var(--radius-sm); }
.conflict-table { margin: 0; }
.conflict-table thead th { position: sticky; top: 0; background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--border); }
.conflict-table td.nowrap { white-space: nowrap; }
.type-tag { display: inline-block; font-size: .69rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: .12rem .5rem; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.type-tag.warn { color: var(--orange); background: var(--warn-bg); border-color: var(--warn-border); }
.type-tag.neg { color: var(--red); background: var(--red-bg); border-color: var(--red); }

/* Conflictbundel: één oorzaak per regel, uitklapbaar naar de losse gevallen (U1). */
.bundle { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: .5rem; }
.bundle > summary { cursor: pointer; padding: .55rem .8rem; display: flex; align-items: center;
  gap: .6rem; flex-wrap: wrap; }
.bundle > summary:hover { background: var(--surface-2); }
.bundle-title { font-weight: 600; }
.bundle-count { margin-left: auto; color: var(--muted); font-size: .82rem; white-space: nowrap; }
.bundle-body { padding: .3rem .9rem .7rem; border-top: 1px solid var(--border); }
.bundle-items { margin: .5rem 0; padding-left: 1.1rem; }
.bundle-items li { margin: .15rem 0; }
.bundle-dismiss, .bundle-restore { display: inline; }
.bundle-dismiss .btn-link { color: var(--muted); }

/* 'Bewust genegeerd'-sectie onderaan de controleweergave. */
.ignored-fold > summary { cursor: pointer; padding: 1rem 1.5rem; font-weight: 600; color: var(--muted); }
.ignored-list { list-style: none; margin: 0; padding: 0; }
.ignored-list li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .4rem 0; border-top: 1px solid var(--border); }
.ignored-list .bundle-restore { margin-left: auto; }

/* Knoppenrij (bevestigingsstap uitrol e.d.). */
.form-actions { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; flex-wrap: wrap; }
.form-actions form { margin: 0; }

/* Kantoorbezetting (F7): KPI's boven een weekraster van vijf dagkolommen. */
.office-kpi-day { margin: -.4rem 0 1rem; }
.kpi-max { color: var(--muted); font-weight: 400; }
.office-nav { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.office-nav .range { font-weight: 600; }
.office-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; }
.office-day { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  display: flex; flex-direction: column; overflow: hidden; }
.office-day.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.office-day-head { width: 100%; text-align: left; font: inherit; cursor: pointer; border: 0;
  background: var(--surface-2); padding: .6rem .7rem; display: flex; flex-direction: column; gap: .2rem;
  border-bottom: 1px solid var(--border); }
.office-day-head:hover { background: var(--border); }
.office-date { font-weight: 600; font-size: .82rem; }
.office-holiday { font-size: .72rem; color: var(--orange); }
.office-totals { font-size: .78rem; color: var(--muted); }
.office-totals strong { color: var(--text); font-size: 1rem; }
.office-day-body { padding: .5rem .6rem; display: flex; flex-direction: column; gap: .35rem; }
.office-group > summary { cursor: pointer; font-size: .82rem; display: flex; align-items: center; gap: .4rem; }
.office-group ul { margin: .3rem 0 .2rem 1.2rem; padding: 0; font-size: .8rem; }
.office-group ul li { margin: .1rem 0; }
.office-group .dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; border: 1px solid; }
.office-empty { font-size: .8rem; margin: .2rem 0; }

@media (max-width: 720px) {
  .office-week { overflow-x: auto; -webkit-overflow-scrolling: touch; grid-auto-flow: column;
    grid-template-columns: none; grid-auto-columns: minmax(9rem, 1fr); }
}

/* Mobiel: het week-/maandraster scrolt horizontaal binnen de kaart in plaats
   van vijf onleesbaar smalle kolommen te persen (de pagina zelf scrolt niet). */
@media (max-width: 720px) {
  .cal, .month { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cal-head, .cal-allday, .cal-body { min-width: 660px; }
  .month-head, .month-row { min-width: 700px; }
}

/* Feestdagen in de kalender: vrij = warme oranje badge, werkdag-bij-Motopp
   (Bevrijdingsdag) = neutrale outline-badge. */
.holiday-badge { display: block; margin-top: .2rem; padding: .05rem .4rem; border-radius: 4px;
                 font-size: .72rem; font-weight: 600; line-height: 1.35; width: fit-content;
                 background: var(--warn-bg); border: 1px solid var(--warn-border); color: #8a5312; }
.holiday-badge.holiday-workday { background: var(--surface-2); border-color: var(--border-strong);
                                 color: var(--muted); }
.holiday-badge small { font-weight: 500; }

/* Hint bij een lege kalenderperiode: wijs naar de eerstvolgende sessie. */
.cal-hint { padding: .55rem .95rem; border-radius: var(--radius-sm); margin-bottom: 1rem;
            font-size: .9rem; background: var(--surface-2); border: 1px solid var(--border); }
.cal-hint a { color: var(--text); font-weight: 600; }

/* Agenda-koppeling (iCal): bewust afwijkende knop — accentrand + icoon, zodat
   hij opvalt tussen de neutrale navigatieknoppen zonder een volle knop te zijn.
   Staat rechts op de weeknavigatie-rij (net links van de traineeship-filter). */
.feed-btn { display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem; border: 1.5px solid var(--accent); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--accent); text-decoration: none;
  font-weight: 600; font-size: .88rem; transition: background .12s, color .12s; }
.feed-btn:hover { background: var(--surface-2); }
.feed-btn-ico { font-size: 1rem; line-height: 1; }
.filterbar .feed-btn { margin-left: auto; }

/* Afwezigheid-actie rechts onder de kalender (trainee). */
.cal-absence-bar { display: flex; justify-content: flex-end; margin: .8rem 0 0; }

.count-badge { display: inline-block; min-width: 1.25rem; text-align: center; padding: 0 .3rem;
  border-radius: 999px; background: var(--accent); color: #fff; font-size: .72rem;
  font-weight: 700; line-height: 1.25rem; }

/* Bulk-verplaatsen op het traineeship-detail (planner). */
.move-tools { padding: .9rem 1.5rem; }
.move-tools summary { cursor: pointer; font-weight: 600; }
.move-form { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; margin-top: .9rem; }
.move-form label { margin-bottom: 0; }
.move-form input, .move-form select { width: auto; min-width: 10rem; }
.move-form .input-narrow { min-width: 5.5rem; width: 5.5rem; }

/* Teams-link bovenaan het meetingformulier (planners zien geen aparte detailpagina). */
.teams-link { margin: 0 0 .8rem; }

/* ---------- Outlook-achtige kalender ---------- */
.card-flat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
             overflow: hidden; box-shadow: var(--shadow); }
.cal-head, .cal-allday, .cal-body { display: grid; grid-template-columns: 56px repeat(var(--cols), 1fr); }
.cal-gutter { border-right: 1px solid var(--border); }
.cal-dayhead { padding: .5rem .6rem; font-weight: 600; border-right: 1px solid var(--border);
               border-bottom: 1px solid var(--border); background: var(--surface); }
.cal-dayhead .daynum { display: inline-block; min-width: 1.7rem; text-align: center; font-size: 1.05rem; }
.cal-dayhead.today { color: var(--primary); }
.cal-dayhead.today .daynum { background: var(--primary); color: #fff; border-radius: 50%; padding: .15rem 0; }
.cal-allday { border-bottom: 2px solid var(--border); background: var(--surface-2); }
.cal-allday .cal-gutter { font-size: .65rem; color: var(--muted); text-align: right; padding: .25rem .35rem; }
.cal-alldaycell { padding: .25rem .3rem; border-right: 1px solid var(--border); min-height: 1.8rem; }
.cal-alldaycell.today { background: var(--primary-light); }
.office-chip { display: inline-block; border: 1px solid; border-radius: 4px; padding: .05rem .4rem;
               font-size: .74rem; font-weight: 600; margin: 0 .2rem .15rem 0; }
a.office-chip { color: var(--text); text-decoration: none; cursor: pointer; }
a.office-chip:hover { filter: brightness(.95); }
.office-total { font-size: .78rem; font-weight: 700; color: var(--orange); white-space: nowrap; }
a.office-total { text-decoration: none; cursor: pointer; }
a.office-total:hover { text-decoration: underline; }
.cal-body { position: relative; }
.cal-axis { background: var(--surface); }
.cal-hourlabel { position: relative; }
.cal-hourlabel span { position: absolute; top: -0.55em; right: .4rem; font-size: .72rem; color: var(--muted); }
.cal-daycol { position: relative; border-right: 1px solid var(--border);
              background-image: linear-gradient(to bottom, var(--border) 1px, transparent 1px); }
.cal-daycol.today { background-color: var(--primary-light); }
.cal-event { position: absolute; display: block; overflow: hidden; box-sizing: border-box;
             border-radius: 6px; border: 1px solid rgba(0,0,0,.06); border-left: 4px solid;
             padding: .2rem .35rem; font-size: .74rem; line-height: 1.25; color: var(--text);
             text-decoration: none; }
.cal-event:hover { filter: brightness(.97); z-index: 5; }
/* Sessie waarvoor de trainee zich heeft afgemeld ('Mijn planning'): grijs en
   gedimd, met een 'Afwezig'-markering. */
.cal-event-absent { color: var(--muted); }
.cal-event-absent .ev-title { text-decoration: line-through; text-decoration-color: var(--border-strong); }
.cal-event-absent .ev-absent { font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); }
.cal-event .ev-time { font-weight: 700; font-size: .68rem; display: block; }
.cal-event .ev-title { font-weight: 600; display: block; }
.cal-event .ev-sub { color: #4a4640; display: block; font-size: .68rem; }

/* Maandraster */
.month-head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--primary-light); }
.month-head div { padding: .45rem .55rem; font-weight: 600; color: var(--text); font-size: .8rem;
                  text-transform: capitalize; border-right: 1px solid var(--border); }
.month-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.month-cell { min-height: 108px; border-right: 1px solid var(--border); border-top: 1px solid var(--border);
              padding: .25rem .3rem; overflow: hidden; }
.month-cell[data-day-url] { cursor: pointer; }
.month-cell[data-day-url]:hover { background: var(--primary-light); }
.month-cell.other-month[data-day-url]:hover { background: var(--primary-light); }
.month-cell .daynum { text-align: right; font-size: .8rem; font-weight: 600; color: var(--muted); }
.month-cell .daynum a { color: inherit; text-decoration: none; }
.month-cell .daynum a:hover span { text-decoration: underline; }
.month-cell.today .daynum span { background: var(--primary); color: #fff; border-radius: 50%;
                                 display: inline-block; min-width: 1.5rem; text-align: center; padding: .1rem 0; }
.month-cell.other-month { background: var(--surface-2); }
.month-cell.other-month .daynum { color: #c3beb5; }
.month-chip { display: block; border-left: 3px solid; border-radius: 4px; padding: .08rem .3rem;
              font-size: .72rem; margin-bottom: .18rem; color: var(--text); text-decoration: none;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.month-chip:hover { filter: brightness(.97); }
.month-chip-absent { color: var(--muted); text-decoration: line-through;
  text-decoration-color: var(--border-strong); }
.month-chip-absent strong { font-weight: 700; }
.chip-office { font-size: .7rem; }

/* ---------- Afwezigheid (afmeld-flows in het sessiepaneel) ---------- */
/* De losse Afwezigheid-pagina is opgegaan in 'Mijn planning': afmelden gebeurt
   inline in het slide-over-paneel van een sessie, meerdaags via de periode-
   modal, beheren via het paneel 'Mijn afmeldingen'. Onderstaande stijlen
   bedienen die fragmenten. */

/* Geraakte sessies in de periodemodal + live preview. */
.abs-affected { margin: .3rem 0 .8rem; padding-left: 1.1rem; font-size: .9rem; }
.abs-affected li { margin: .15rem 0; }
.abs-preview-title { margin: .6rem 0 .2rem; }
.abs-daterange { display: flex; gap: .8rem; flex-wrap: wrap; }
.abs-daterange label { flex: 1 1 10rem; margin-bottom: .6rem; }

/* Reden als chip-keuze + notitie in de afmeld-modals. De selectors zijn bewust
   specifiek (.chip-group .chip …) zodat ze de generieke modal-formulierregels
   (.modal-panel form label/input) overrulen in zowel de modal als de fallback. */
.abs-field { margin-top: 1.1rem; }
.abs-field-label { font-size: .82rem; font-weight: 700; margin-bottom: .5rem; }
.abs-optional { color: var(--label); font-weight: 500; }
.chip-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.modal-panel form .chip-group .chip,
.chip-group .chip { display: inline-flex; margin: 0; font-weight: 600; cursor: pointer; }
.modal-panel form .chip-group .chip input,
.chip-group .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip-group .chip span { display: inline-block; padding: .4rem .75rem; border-radius: 999px;
  font-size: .82rem; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); transition: background .12s, border-color .12s, color .12s; }
.chip-group .chip input:hover + span { background: var(--surface-2); }
.chip-group .chip input:checked + span,
.chip-group .chip:has(input:checked) span { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-group .chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(20,18,15,.12); }
.modal-panel form textarea.abs-note,
.abs-note { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: .5rem .65rem; font: inherit; font-weight: 400; background: var(--surface); color: var(--text);
  resize: vertical; }
.abs-note:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(20,18,15,.08); }

/* 'Mijn afmeldingen': compacte lijst in het slide-over-paneel. */
.abs-mine { display: flex; flex-direction: column; gap: .4rem; }
.abs-mine-item { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: .6rem .9rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.abs-mine-item form { margin: 0; }

/* Eigen aan-/afwezigheid van de trainee in het sessiepaneel: statusregel met
   stip, subtiele 'Afmelden'-knop en een inline accordion met de redenvelden
   (geen tweede laag bovenop het paneel). */
.own-attendance { margin: 1.1rem 0 0; padding: .9rem 1rem; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.own-status { margin: 0; display: flex; align-items: center; gap: .5rem;
  font-size: .92rem; font-weight: 600; }
.own-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.own-status.is-present { color: var(--green); }
.own-status.is-present .own-dot { background: var(--green); }
.own-status.is-absent { color: #8a5312; }
.own-status.is-absent .own-dot { background: var(--orange); }
.own-substatus { margin: .3rem 0 0 1.05rem; font-size: .82rem; }
.own-attendance form { margin: .8rem 0 0; }
.own-report { margin-top: .8rem; }
.own-report summary { list-style: none; cursor: pointer; }
.own-report summary::-webkit-details-marker { display: none; }
.own-report[open] summary { color: var(--text); background: var(--surface-2);
  border-color: var(--border-strong); }
.own-report form { margin-top: .2rem; }
.own-report-actions { margin-top: 1rem; }

/* Aanwezigheidslijst per sessie (trainers/planner). */
.attendance-list { list-style: none; margin: .4rem 0 0; padding: 0; }
.attendance-list > li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .45rem 0; border-top: 1px solid var(--border); }
.att-state { flex: none; font-size: .72rem; font-weight: 700; border-radius: 999px;
  padding: .15rem .6rem; white-space: nowrap; }
.att-state.aanwezig { background: var(--green-bg); color: var(--green); }
.att-state.afwezig { background: var(--red-bg); color: var(--red); }
.att-reason { color: var(--muted); font-size: .82rem; }
.att-actions { margin-left: auto; }
.att-mark { position: relative; }
.att-mark > summary { cursor: pointer; font-size: .8rem; color: var(--muted); list-style: none; }
.att-mark > summary::-webkit-details-marker { display: none; }
.att-mark > summary:hover { color: var(--text); text-decoration: underline; }
/* 'Intrekken' krijgt exact dezelfde stijl als de 'Afmelden…'-summary hierboven. */
.att-undo { background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  font-size: .8rem; color: var(--muted); text-decoration: none; }
.att-undo:hover { color: var(--text); text-decoration: underline; }
.att-form { display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0 .3rem;
  padding: .7rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); }
.att-form label { margin-bottom: 0; font-size: .82rem; }
.att-form .radio-row { display: flex; gap: 1rem; font-weight: 500; }
.att-form .radio-row label { display: inline-flex; align-items: center; gap: .3rem; }

/* Losse gasten bij een sessie (buiten de security group). Het toevoegformulier
   zit achter een uitklap (details.guest-add), met dezelfde stijl als 'Afmelden…'
   bij de aanwezigheid (.att-mark/.att-form). */
.guest-list { list-style: none; margin: .4rem 0 0; padding: 0; }
.guest-list > li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  justify-content: space-between; padding: .45rem 0; border-top: 1px solid var(--border); }
.guest-add { margin-top: .6rem; }
.guest-add > .att-form button { align-self: flex-start; }
/* De uitklap-knop moet duidelijk als knop leesbaar zijn (niet het grijze
   summary-linkje van .att-mark): omrand, met een '+'-teken ervoor. */
.guest-add > summary { display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  font-weight: 600; font-size: .85rem; cursor: pointer; }
.guest-add > summary::before { content: "+"; font-size: 1.05em; line-height: 1; }
.guest-add > summary:hover { background: var(--surface-2); color: var(--text);
  text-decoration: none; }
.guest-add[open] > summary { margin-bottom: .6rem; }

/* Afwezigheidsoverzicht (weektabel per traineeship). */
.abs-cell-mark { display: inline-block; font-size: .74rem; font-weight: 600;
  background: var(--red-bg); color: #9c2b23; border-radius: 4px; padding: .05rem .4rem;
  margin: 0 .15rem .15rem 0; white-space: nowrap; }
/* Klikbare afwezigheids-chip: opent de detail-pop-up (reden + intrekken). */
a.abs-cell-mark { text-decoration: none; cursor: pointer; }
a.abs-cell-mark:hover { background: var(--red); color: #fff; }
a.abs-cell-mark:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
/* Grotere, duidelijk klikbare pill-chip in het afwezigheidsoverzicht,
   met een pijltje naar rechts dat aanklikken suggereert. */
a.abs-chip { display: inline-flex; align-items: center; gap: .3rem;
  font-size: .82rem; border-radius: 999px; padding: .28rem .7rem; }
.abs-chip-arrow { font-weight: 700; line-height: 1; opacity: .7;
  transition: transform .12s ease; }
a.abs-chip:hover .abs-chip-arrow { opacity: 1; transform: translateX(2px); }
.abs-hint { margin: -.4rem 0 .8rem; font-size: .85rem; }
.att-reason-hidden { font-style: italic; }
.office-absent { color: var(--muted); font-style: italic; }

/* ---------- Responsief: zijbalk inklappen ---------- */
@media (max-width: 720px) {
  body.has-sidebar { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sidebar .brand { padding: .3rem .6rem; width: 100%; }
  .side-nav { flex-direction: row; flex-wrap: wrap; }
  .nav-section { display: none; }
  .lang-switch { margin: 0 0 0 auto; padding: 0; }
  .side-foot { margin: 0 0 0 .6rem; padding-top: 0; border: none; }
  main { padding: 1.2rem 1rem 2rem; }
}

/* ---------- Kalender-slide-over (sessie-/meetingdetails) ---------- */
/* Het paneel dockt rechts en schuift in; licht en snel, geen zware overlay.
   Zelfde markup als voorheen (calendar-modal.js), alleen de opmaak verschilt. */
.modal-overlay { position: fixed; inset: 0; z-index: 100; display: none;
                 background: rgba(20,18,15,.28); }
.modal-overlay.open { display: block; }
body.modal-open { overflow: hidden; }
.modal-panel { position: absolute; top: 0; right: 0; height: 100%;
               width: min(30rem, 100%); overflow-y: auto;
               background: var(--surface); border-left: 1px solid var(--border);
               box-shadow: -14px 0 40px rgba(20,18,15,.16);
               padding: 1.4rem 1.5rem; animation: slide-in .2s ease-out; }
@keyframes slide-in { from { transform: translateX(2.5rem); opacity: .5; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal-panel { animation: none; } }
@media (max-width: 640px) { .modal-panel { width: 100%; border-left: none; } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between;
              gap: 1rem; margin-bottom: 1rem; }
.modal-head .modal-title { margin: 0; }
.modal-head .muted { margin: .15rem 0 0; font-size: .9rem; }
.modal-x { flex: none; text-decoration: none; color: var(--muted); font-size: 1.5rem;
           line-height: 1; padding: .1rem .35rem; border-radius: 8px; }
.modal-x:hover { background: var(--surface-2); color: var(--text); }
.modal-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.modal-panel form label { display: block; margin-bottom: .9rem; font-size: .9rem; font-weight: 500; }
.modal-panel form input:not([type=checkbox]), .modal-panel form select, .modal-panel form textarea {
  display: block; width: 100%; margin-top: .3rem; }
.danger-btn { border-color: var(--red); color: var(--red); }
.danger-btn:hover { background: var(--red-bg); }

/* Kaartvariant die hetzelfde detailfragment als losse pagina toont. */
.modal-card .modal-actions { margin-top: 1.2rem; }

/* ---------- Notificatiebel (F3) ---------- */
/* Zwevend rechtsonder; onder de kalender-pop-up (z-index 100) zodat een open
   sessie-modal er altijd overheen valt. */
.notif { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90; }
.notif-bell {
  position: relative; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: 0 2px 6px rgba(20,18,15,.10), 0 4px 16px rgba(20,18,15,.08);
  transition: background .1s ease, box-shadow .1s ease;
}
.notif-bell:hover { background: var(--surface-2); }
.notif-bell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.notif-bell svg { width: 24px; height: 24px; }
.notif-dot {
  position: absolute; top: 9px; right: 9px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--red); border: 2px solid var(--surface);
}
.notif-pop {
  position: absolute; right: 0; bottom: 64px; width: min(340px, calc(100vw - 3rem));
  max-height: min(420px, calc(100vh - 8rem)); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(20,18,15,.14), 0 2px 8px rgba(20,18,15,.08);
}
.notif-head {
  padding: .85rem 1rem; font-weight: 600; font-size: .95rem;
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--surface); border-radius: var(--radius) var(--radius) 0 0;
}
.notif-list { list-style: none; margin: 0; padding: .3rem; }
.notif-item a {
  display: block; text-decoration: none; color: var(--text);
  padding: .6rem .7rem; border-radius: var(--radius-sm);
}
.notif-item a:hover { background: var(--surface-2); }
.notif-item.is-unread a { background: var(--primary-light); }
.notif-item.is-unread a:hover { background: var(--border); }
.notif-type {
  display: inline-block; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  padding: .1rem .45rem; border-radius: 999px; margin-bottom: .25rem;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border-strong);
}
.notif-type-moved { background: var(--warn-bg); color: #8a5312; border-color: var(--warn-border); }
.notif-type-cancelled { background: var(--red-bg); color: #9c2b23; border-color: #eab4af; }
.notif-type-created { background: var(--green-bg); color: var(--green); border-color: #a9d9bd; }
.notif-text { display: block; font-size: .9rem; line-height: 1.35; }
.notif-when { display: block; font-size: .8rem; color: var(--muted); margin-top: .15rem; }
/* Oude situatie (doorgestreept) vóór de pijl naar de nieuwe situatie. */
.notif-old { color: var(--label); text-decoration: line-through; }
.notif-arrow { color: var(--muted); }
/* Geannuleerd: de hele regel doorstrepen (de badge blijft leesbaar). */
.notif-item.is-cancelled .notif-text,
.notif-item.is-cancelled .notif-when { text-decoration: line-through; color: var(--muted); }
.notif-empty { padding: 1.1rem 1rem; margin: 0; color: var(--muted); font-size: .9rem; text-align: center; }

/* ---------- Agenda-koppeling-aansporing (eenmalige pop-up) ---------- */
/* Gecentreerde modal die één keer verschijnt na inloggen; puur server-side,
   sluit via de knoppen (geen JS nodig). Boven alle andere lagen (z-index 200). */
.cal-prompt-overlay { position: fixed; inset: 0; z-index: 200;
                      display: flex; align-items: center; justify-content: center;
                      padding: 1.5rem; background: rgba(20,18,15,.38); }
.cal-prompt { background: var(--surface); border: 1px solid var(--border);
              border-radius: var(--radius); box-shadow: 0 18px 50px rgba(20,18,15,.24);
              max-width: 26rem; width: 100%; padding: 1.8rem 1.6rem 1.4rem;
              text-align: center; animation: cal-prompt-in .2s ease-out; }
@keyframes cal-prompt-in { from { transform: translateY(.6rem); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cal-prompt { animation: none; } }
.cal-prompt-icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem;
                   border-radius: 50%; background: var(--primary-light); color: var(--accent);
                   margin-bottom: .9rem; }
.cal-prompt-icon svg { width: 1.6rem; height: 1.6rem; }
.cal-prompt h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.cal-prompt p { margin: 0 0 1.3rem; }
.cal-prompt-actions { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.cal-prompt-actions .btn-block { width: 100%; margin-bottom: 0; }