/* ==========================================================================
   Planbord
   --------------------------------------------------------------------------
   Fase A gaf de Gantt zijn hiërarchie, groepskoppen, filters en leesbare
   balken. Fase B zet er een gedeelde tijdas boven, een belastingstrook
   onder, en een sleeplaag met spookbalk en pool.

   De maten staan als custom properties bovenaan. De rijhoogtes zijn geen
   smaakkwestie: de linkerkolom en de tijdlijn tekenen dezelfde rijen en
   moeten op de pixel gelijk lopen, anders schuift het raster.
   ========================================================================== */

/* app.css zet globaal `button { background:#111; color:#fff }`. Elke knop
   hieronder die een lichte achtergrond krijgt maar zijn kleur niet zelf
   zet, wordt daarmee witte tekst op wit. Deze basisregel staat vóór alle
   andere en geeft knoppen binnen de applicatieschermen een leesbare
   uitgangswaarde; de accentknoppen verderop overschrijven hem gewoon.

   Dit was een echte fout, en mijn eigen rendercontrole zag hem niet omdat
   die alleen planning.css laadde en niet app.css.

   `:where()` en niet `:is()`: :where telt niet mee voor de specificiteit,
   dus deze regel weegt precies even zwaar als de `button`-regel in app.css
   (en wint op volgorde, want planning.css laadt later), terwijl élke
   klasseregel hieronder hem overschrijft. Met `:is()` zou deze regel juist
   zwaarder wegen dan bijvoorbeeld `.adm-go` en zou de accentkleur van de
   knoppen er nooit doorkomen. */
:where(.planboard, .setup, .tree-page, .adm, .pick, .pb-ask, .pb-pool,
    .assignment-panel, .app-switch-menu, .list-view) button {
    color: var(--pb-ink);
    background: #fff;
    border: 1px solid var(--pb-line-strong);
}

/* Zonder dit drijven de twee kolommen uit elkaar: een namenrij is een
   <button> (die standaard border-box is) en een balkrij een <div> (die
   content-box is), dus telde de onderrand er aan één kant wél bij op en
   aan de andere niet. Eén pixel per rij, na twintig rijen twintig. */
.planboard, .planboard *, .planboard *::before, .planboard *::after { box-sizing: border-box; }

:root {
    --pb-row-h: 36px;
    --pb-group-h: 32px;
    --pb-load-h: 38px;
    --pb-label-w: 268px;
    --pb-axis-h: 44px;

    --pb-ink: #12171c;
    --pb-ink-2: #56616b;
    --pb-ink-3: #8a949d;
    --pb-line: #e3e7ea;
    --pb-line-strong: #c9d0d5;
    --pb-surface: #fff;
    --pb-surface-2: #f6f8f9;
    --pb-surface-3: #eceff1;
    --pb-accent: #1f5c7a;
    --pb-danger: #a32b22;
    --pb-ok: #4a7a52;
    --pb-weekend: rgba(18, 23, 28, 0.045);
    --pb-holiday: rgba(163, 43, 34, 0.09);
}

/* ---------- de balk bovenaan ---------- */

.app-nav {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 0 16px; height: 48px; background: var(--pb-ink); color: #fff;
}
.app-brand {
    display: inline-flex; align-items: center; gap: 8px;
    color: #fff; text-decoration: none; font-weight: 700; font-size: 14px;
    letter-spacing: -.01em; white-space: nowrap;
}
.app-links { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.app-links a {
    color: rgba(255, 255, 255, .72); text-decoration: none;
    padding: 5px 11px; border-radius: 6px; font-size: 13px;
}
.app-links a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.app-links a.is-active { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; }
.app-nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.app-tenant {
    font-size: 12px; color: rgba(255, 255, 255, .62);
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 20px; padding: 2px 10px;
}
.app-nav-right form { margin: 0; }
.app-nav-right button {
    background: none; border: 1px solid rgba(255, 255, 255, .3); color: #fff;
    border-radius: 6px; padding: 4px 11px; font-size: 12.5px; cursor: pointer;
}
.app-nav-right button:hover { background: rgba(255, 255, 255, .12); }

@media (max-width: 720px) {
    .app-nav { height: auto; padding: 8px 12px; gap: 10px; }
    .app-tenant { display: none; }
}

/* ---------- weergaveschakelaar ---------- */

.view-switcher { display: flex; gap: 4px; padding: 8px 16px; border-bottom: 1px solid var(--pb-line); }
.view-switcher button { padding: 6px 12px; border: 1px solid #ddd; background: #fff; color: #333; cursor: pointer; }
.view-switcher button.active { background: #111; color: #fff; }

/* ---------- werkbalk ---------- */

.board-toolbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 9px 16px; background: var(--pb-surface-2); border-bottom: 1px solid var(--pb-line);
}
.tb-field { display: flex; align-items: center; gap: 6px; }
.tb-field > span {
    font-size: 11px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--pb-ink-3);
}
.tb-field select,
.tb-range input {
    border: 1px solid var(--pb-line-strong); border-radius: 6px;
    padding: 4px 8px; font-size: 12px; background: #fff; color: var(--pb-ink);
}
.tb-spacer { flex: 1 1 auto; }

.tb-zoom { display: flex; border: 1px solid var(--pb-line-strong); border-radius: 6px; overflow: hidden; }
.tb-zoom button {
    background: #fff; border: 0; border-right: 1px solid var(--pb-line);
    padding: 4px 11px; font-size: 12px; cursor: pointer; color: var(--pb-ink-2);
}
.tb-zoom button:last-child { border-right: 0; }
.tb-zoom button:hover { background: var(--pb-surface-3); }
.tb-zoom button[aria-pressed="true"] { background: var(--pb-accent); color: #fff; font-weight: 600; }

.tb-nav { display: flex; gap: 4px; }
.tb-nav button {
    border: 1px solid var(--pb-line-strong); background: #fff; border-radius: 6px;
    padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--pb-ink);
}
.tb-nav button:hover { background: var(--pb-surface-3); }
.tb-range { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pb-ink-2); }

/* ---------- opgeslagen weergaven ---------- */

.pb-views {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 7px 16px; border-bottom: 1px solid var(--pb-line); background: #fff;
}
.pb-view {
    display: inline-flex; align-items: center;
    border: 1px solid var(--pb-line-strong); border-radius: 6px; overflow: hidden;
}
.pb-view > button {
    background: #fff; border: 0; padding: 4px 10px;
    font-size: 12px; cursor: pointer; color: var(--pb-ink-2);
}
.pb-view > button:hover { background: var(--pb-surface-3); }
.pb-view.is-active { border-color: var(--pb-accent); }
.pb-view.is-active > button { background: var(--pb-accent); color: #fff; font-weight: 600; }
.pb-view-shared { font-size: 8px; vertical-align: middle; opacity: .6; }
.pb-view-x {
    background: none; border: 0; border-left: 1px solid var(--pb-line);
    padding: 4px 7px; font-size: 13px; line-height: 1; cursor: pointer;
    color: var(--pb-ink-3);
}
.pb-view-x:hover { color: var(--pb-danger); }
.pb-view-add {
    background: none; border: 1px dashed var(--pb-line-strong); border-radius: 6px;
    padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--pb-ink-3);
}
.pb-view-add:hover { color: var(--pb-ink-2); border-color: var(--pb-ink-3); }
.pb-view-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.pb-view-form input[type="text"] {
    border: 1px solid var(--pb-line-strong); border-radius: 6px;
    padding: 4px 8px; font-size: 12px; width: 190px;
}
.pb-view-form label { display: inline-flex; align-items: center; gap: 4px; color: var(--pb-ink-2); }
.pb-view-form button {
    border: 1px solid var(--pb-line-strong); background: #fff; border-radius: 6px;
    padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.pb-view-form .pb-view-save { background: var(--pb-accent); border-color: var(--pb-accent); color: #fff; font-weight: 600; }

/* ---------- filterbalk ---------- */

.board-filters {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 16px; border-bottom: 1px solid var(--pb-line); background: #fff;
}
.filter-search {
    border: 1px solid var(--pb-line-strong); border-radius: 6px;
    padding: 5px 9px; font-size: 12px; width: 250px;
}
.filter-drop { position: relative; }
.filter-drop > summary {
    list-style: none; cursor: pointer; user-select: none;
    border: 1px solid var(--pb-line-strong); border-radius: 6px;
    padding: 5px 10px; font-size: 12px; background: #fff;
}
.filter-drop > summary::-webkit-details-marker { display: none; }
.filter-drop > summary::after { content: " \25BE"; color: var(--pb-ink-3); }
.filter-drop[open] > summary { background: var(--pb-surface-3); }
.filter-n {
    display: inline-block; min-width: 16px; text-align: center;
    background: var(--pb-accent); color: #fff; border-radius: 9px;
    font-size: 10.5px; font-weight: 700; padding: 0 5px; margin-left: 3px;
}
.filter-menu {
    position: absolute; top: calc(100% + 5px); left: 0; z-index: 40;
    min-width: 230px; max-height: 300px; overflow-y: auto;
    background: #fff; border: 1px solid var(--pb-line-strong);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(18, 23, 28, .12); padding: 5px;
}
.filter-menu label {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 7px; border-radius: 5px; cursor: pointer; font-size: 12.5px;
}
.filter-menu label:hover { background: var(--pb-surface-2); }
.filter-swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.filter-meta { margin-left: auto; font-size: 10.5px; color: var(--pb-ink-3); }
.filter-menu label.is-member { padding-left: 22px; }
.filter-group { font-weight: 600; }
.filter-empty { margin: 6px 8px; font-size: 12px; color: var(--pb-ink-3); }

.filter-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: #e0ebf1; color: var(--pb-accent);
    border: 1px solid rgba(31, 92, 122, .28); border-radius: 20px;
    padding: 2px 4px 2px 10px; font-size: 11.5px; font-weight: 600;
}
.filter-chip button {
    background: none; border: 0; cursor: pointer; color: inherit;
    font-size: 14px; line-height: 1; padding: 0 4px; opacity: .7;
}
.filter-chip button:hover { opacity: 1; }
.filter-clear {
    background: none; border: 1px solid var(--pb-line-strong); border-radius: 6px;
    padding: 3px 9px; font-size: 11.5px; cursor: pointer; color: var(--pb-ink-2);
}

/* ==========================================================================
   Het gesplitste scherm
   ========================================================================== */

.pb-split {
    display: flex; flex-direction: column; min-height: 0;
    /* Geen vaste hoogte: het bord groeit mee met het venster, maar blijft
       bruikbaar op een klein scherm en loopt niet eindeloos door op een
       groot. */
    height: clamp(440px, calc(100vh - 232px), 1040px);
    background: #fff; border-bottom: 1px solid var(--pb-line);
}

/* Livewire-root van GanttView. */
.pb-gantt { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; position: relative; }

.pb-gantt-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 16px; border-bottom: 1px solid var(--pb-line); background: #fff;
}
.pb-gantt-count { font-size: 12px; color: var(--pb-ink-2); }
.pb-gantt-bar button {
    border: 1px solid var(--pb-line-strong); background: #fff; border-radius: 6px;
    padding: 3px 9px; font-size: 11.5px; cursor: pointer; color: var(--pb-ink-2);
}
.pb-gantt-bar button:hover { background: var(--pb-surface-3); }
.pb-gantt-bar button.is-active { background: var(--pb-accent); border-color: var(--pb-accent); color: #fff; }
.pb-conflict-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--pb-danger) !important; border-color: rgba(163, 43, 34, .35) !important; }
.pb-conflict-btn.is-active { background: var(--pb-danger) !important; border-color: var(--pb-danger) !important; color: #fff !important; }
.pb-conflict-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 7px; }
.pb-gantt-n { font-weight: 700; }

.pb-pane-host { display: flex; flex-direction: column; min-height: 0; flex: 0 0 auto; }

/* Eén scroller per pane, in beide richtingen: zo staat de horizontale
   scrollbalk onderaan het paneel in plaats van onder de laatste rij, waar
   je er pas bij komt door eerst naar beneden te scrollen. De namenkolom
   blijft plakken terwijl je door de tijd schuift. */
.pb-pane {
    display: flex; align-items: flex-start; min-height: 0;
    overflow: auto; flex: 1 1 auto;
}
.pb-pane--load { background: var(--pb-surface-2); }
.pb-pane-empty { padding: 26px 20px; color: var(--pb-ink-3); font-size: 13px; }

.pb-pane-head {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 16px; background: var(--pb-surface-3);
    border-bottom: 1px solid var(--pb-line);
    font-size: 11px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--pb-ink-2);
}

.pb-splitter {
    flex: 0 0 auto; height: 9px; cursor: row-resize;
    background: var(--pb-surface-3);
    border-top: 1px solid var(--pb-line-strong); border-bottom: 1px solid var(--pb-line-strong);
    display: flex; align-items: center; justify-content: center;
}
.pb-splitter::after { content: ""; width: 34px; height: 2px; border-radius: 2px; background: var(--pb-line-strong); }

/* ---------- de gedeelde tijdas ---------- */

.pb-axis { display: flex; flex: 0 0 auto; background: var(--pb-surface-2); border-bottom: 1px solid var(--pb-line-strong); }
.pb-axis-pad {
    flex: 0 0 var(--pb-label-w); width: var(--pb-label-w);
    border-right: 1px solid var(--pb-line-strong);
    display: flex; align-items: flex-end; padding: 0 12px 6px;
    font-size: 11px; font-weight: 600; color: var(--pb-ink-3);
}
/* De as scrollt mee maar toont zelf geen scrollbalk: die staat al onder de
   twee panes, en drie scrollbalken onder elkaar leest als een fout. */
.pb-axis-scroll { flex: 1 1 auto; overflow-x: auto; min-width: 0; scrollbar-width: none; }
.pb-axis-scroll::-webkit-scrollbar { display: none; }

.pb-axis-major, .pb-axis-minor { position: absolute; left: 0; right: 0; }
.pb-axis-major { top: 0; height: 21px; }
.pb-axis-minor { top: 21px; height: 23px; }
.pb-major {
    position: absolute; top: 0; height: 21px; display: flex; align-items: center;
    padding-left: 7px; border-left: 1px solid var(--pb-line-strong);
    font-size: 11px; font-weight: 600; color: var(--pb-ink-2);
    white-space: nowrap; overflow: hidden;
}
.pb-minor {
    position: absolute; top: 0; height: 23px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-left: 1px solid var(--pb-line); overflow: hidden;
}
.pb-minor b { font-size: 11px; font-weight: 600; color: var(--pb-ink-2); line-height: 1.05; }
.pb-minor i { font-size: 9px; font-style: normal; color: var(--pb-ink-3); line-height: 1.05; }
.pb-minor.is-today b { color: var(--pb-danger); }

/* De as heeft een eigen canvas-hoogte; de panes laten die door de rijen
   bepalen. */
.pb-axis .pb-canvas { height: var(--pb-axis-h); }

/* ---------- panes: labels en tijdlijn ---------- */

.pb-labels {
    flex: 0 0 var(--pb-label-w); width: var(--pb-label-w);
    border-right: 1px solid var(--pb-line-strong);
    position: sticky; left: 0; z-index: 5; background: #fff;
}
.pb-pane--load .pb-labels { background: var(--pb-surface-2); }
.pb-canvas { position: relative; flex: 0 0 auto; }

.pb-label {
    display: flex; align-items: center; gap: 7px;
    height: var(--pb-row-h);
    /* De inspringing komt van de rij zelf (fase J): bij groeperen op
       project is de linkerkolom een boom die dieper gaat dan twee lagen. */
    padding: 0 10px 0 calc(10px + var(--pb-depth, 0px));
    border: 0; border-bottom: 1px solid var(--pb-line); overflow: hidden;
    width: 100%; background: none; text-align: left; font: inherit; color: inherit;
}
.pb-label--item { cursor: pointer; }
.pb-label--item:hover { background: var(--pb-surface-2); }
.pb-label--item.is-selected { background: #e0ebf1; }
.pb-label--group {
    height: var(--pb-group-h); background: var(--pb-surface-3);
    border-bottom: 1px solid var(--pb-line-strong);
}
/* Een samenvatting dieper in de boom — een fase onder een project — mag
   minder zwaar staan dan de projectkop zelf. */
.pb-label--group.is-nested { background: var(--pb-surface-2); }
.pb-label--group.is-nested .pb-label-name { font-weight: 600; }
.pb-label.is-over .pb-label-name { color: var(--pb-danger); }
.pb-pane--load .pb-label { height: var(--pb-load-h); }

.pb-caret {
    background: none; border: 0; cursor: pointer; color: var(--pb-ink-2);
    width: 16px; flex: 0 0 16px; font-size: 9px; line-height: 1; padding: 0;
    transition: transform .12s ease;
}
.pb-caret.is-open { transform: rotate(90deg); }
.pb-swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 9px; }
.pb-swatch--bar { width: 3px; height: 17px; border-radius: 2px; flex: 0 0 3px; }
.pb-label-text { min-width: 0; flex: 1; }
.pb-label-name {
    display: block; font-size: 12.5px; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-label--group .pb-label-name { font-weight: 700; }
.pb-label-sub {
    display: block; font-size: 10.5px; color: var(--pb-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-label-count { font-size: 10.5px; font-weight: 600; color: var(--pb-ink-3); flex: 0 0 auto; }

/* ---------- raster ---------- */

.pb-backdrop { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.pb-shade { position: absolute; top: 0; bottom: 0; background: var(--pb-weekend); }
.pb-shade.is-holiday { background: var(--pb-holiday); pointer-events: auto; }
.pb-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--pb-line); }
.pb-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--pb-danger); opacity: .7; }

.pb-track {
    position: relative; height: var(--pb-row-h);
    border-bottom: 1px solid var(--pb-line); z-index: 1;
}
.pb-track--group {
    height: var(--pb-group-h); background: var(--pb-surface-3);
    border-bottom: 1px solid var(--pb-line-strong);
}
.pb-track--load { height: var(--pb-load-h); }

/* ---------- balken ---------- */

.pb-bar {
    position: absolute; top: 5px; height: calc(var(--pb-row-h) - 12px);
    border-radius: 4px; display: flex; align-items: center; overflow: hidden;
    /* De kleur komt als custom property uit de blade en niet als inline
       achtergrond. Een inline stijl wint van elke regel hier, en dan kan
       een tijdelijk project zijn lichtere tint niet krijgen zonder
       !important — zie .pb-bar.is-provisional onderaan. */
    background: var(--pb-bar-kleur, var(--pb-accent)); color: #fff; font-size: 11.5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .14); z-index: 2;
    cursor: grab; touch-action: none; user-select: none;
}
body.is-dragging-bar, body.is-dragging-bar .pb-bar { cursor: grabbing; }
/* Een balk die buiten de periode doorloopt krijgt aan die kant een
   vierkante rand — zo is te zien dat je niet naar het echte begin of einde
   kijkt. */
.pb-bar.is-cut-start { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.pb-bar.is-cut-end { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pb-bar.is-selected { outline: 2px solid var(--pb-ink); outline-offset: 1px; }
.pb-bar--rollup {
    top: 9px; height: calc(var(--pb-group-h) - 18px);
    border-radius: 3px; opacity: .9; cursor: default;
}

.pb-bar-progress {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: rgba(255, 255, 255, .26); pointer-events: none;
}
.pb-bar-label {
    position: relative; padding: 0 8px; line-height: 1;
    font-weight: 600; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; flex: 1; pointer-events: none;
}
.pb-bar-warn {
    position: relative; flex: 0 0 auto; margin-right: 9px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--pb-danger); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 14px; text-align: center;
    pointer-events: none;
}
.pb-handle { position: absolute; top: 0; width: 7px; height: 100%; cursor: ew-resize; z-index: 1; }
.pb-handle--start { left: 0; }
.pb-handle--end { right: 0; }
.pb-handle:hover { background: rgba(255, 255, 255, .34); }

/* ---------- koppelingen ---------- */

.pb-arrows {
    position: absolute; left: 0; top: 0; z-index: 4;
    pointer-events: none; overflow: visible;
}
.pb-arrow path { stroke: var(--pb-ink-3); stroke-width: 1.5; }
.pb-arrow polygon { fill: var(--pb-ink-3); }
/* Een keten die niet klopt hoort op te vallen: de opvolger begint dan vóór
   zijn voorganger klaar is. */
.pb-arrow.is-violated path { stroke: var(--pb-danger); stroke-dasharray: 4 3; }
.pb-arrow.is-violated polygon { fill: var(--pb-danger); }

.pb-label-tpl {
    background: none; border: 0; cursor: pointer; padding: 0 4px;
    font-size: 12px; color: var(--pb-ink-3); flex: 0 0 auto;
}
.pb-label-tpl:hover { color: var(--pb-accent); }

/* ---------- vragen die vóór de handeling komen ---------- */

.pb-ask {
    position: fixed; left: 50%; bottom: 66px; transform: translateX(-50%); z-index: 95;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    max-width: min(760px, calc(100vw - 32px));
    background: var(--pb-surface); color: var(--pb-ink);
    border: 1px solid var(--pb-line-strong); border-left: 3px solid var(--pb-accent);
    border-radius: 7px; padding: 9px 12px; font-size: 12.5px;
    box-shadow: 0 8px 26px rgba(18, 23, 28, .2);
}
.pb-ask--warn { border-left-color: var(--pb-danger); }
.pb-ask--link { border-left-color: var(--pb-ok); }
.pb-ask button {
    border: 1px solid var(--pb-line-strong); background: #fff; border-radius: 6px;
    padding: 4px 11px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.pb-ask button:hover { background: var(--pb-surface-3); }
.pb-ask .pb-ask-go {
    background: var(--pb-accent); border-color: var(--pb-accent); color: #fff; font-weight: 600;
}
.pb-ask--warn .pb-ask-go { background: var(--pb-danger); border-color: var(--pb-danger); }
.pb-ask select, .pb-ask input {
    border: 1px solid var(--pb-line-strong); border-radius: 6px;
    padding: 4px 7px; font-size: 12px;
}
.pb-ask input[type="number"] { width: 62px; }
.pb-ask label { display: inline-flex; align-items: center; gap: 5px; color: var(--pb-ink-2); }

/* ---------- koppelingen in het zijpaneel ---------- */

.ap-links { padding: 0 14px 16px; }
.ap-links h4 {
    margin: 4px 0 6px; font-size: 10.5px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: var(--pb-ink-3);
}
.ap-link {
    display: flex; align-items: center; gap: 7px;
    padding: 5px 0; border-top: 1px solid var(--pb-line); font-size: 12.5px;
}
.ap-link-dir {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--pb-ink-3); flex: 0 0 26px;
}
.ap-link-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-link-lag { font-size: 11px; color: var(--pb-ink-3); }
.ap-link button {
    background: none; border: 0; cursor: pointer; color: var(--pb-ink-3);
    font-size: 15px; line-height: 1; padding: 0 3px;
}
.ap-link button:hover { color: var(--pb-danger); }

/* ---------- spookbalk ---------- */

.pb-ghost {
    position: absolute; z-index: 6; pointer-events: none;
    border: 2px dashed var(--pb-ink); border-radius: 4px;
    background: rgba(18, 23, 28, .08);
}
.pb-ghost.is-reassign { border-color: var(--pb-accent); background: rgba(31, 92, 122, .12); }
.pb-ghost-tip {
    position: absolute; left: 0; top: -22px; white-space: nowrap;
    background: var(--pb-ink); color: #fff; border-radius: 4px;
    padding: 2px 7px; font-size: 10.5px; font-weight: 600;
}
.pb-ghost.is-reassign .pb-ghost-tip { background: var(--pb-accent); }

/* ---------- belastingstrook ---------- */

.pb-load-bar {
    position: absolute; bottom: 0; background: var(--pb-ok);
    border-radius: 1.5px 1.5px 0 0; z-index: 2;
}
.pb-load-bar.is-over { background: var(--pb-danger); }
.pb-track--load.is-group { background: rgba(18, 23, 28, .025); }
.pb-label--member { padding-left: 30px; }
.pb-label--member .pb-label-name { font-size: 12px; color: var(--pb-ink-2); }
/* Wat er rood wordt zodra je loslaat — getekend tijdens het slepen, dus
   vóór de schade in plaats van erna. */
.pb-load-warn {
    position: absolute; top: 0; bottom: 0; z-index: 3; pointer-events: none;
    background: rgba(163, 43, 34, .3);
    border-top: 2px solid var(--pb-danger);
}
/* De capaciteitslijn ligt op de hoogte die een volle dag krijgt (62% van
   de rij), zodat alles erboven zichtbaar overbelasting is. */
.pb-caplimit {
    position: absolute; left: 0; right: 0; bottom: 62%; height: 1px;
    background: var(--pb-line-strong); z-index: 1; pointer-events: none;
}

/* ---------- pool met ongepland werk ---------- */

.pb-pool {
    position: absolute; top: 0; right: 0; bottom: 0; width: 238px; max-width: 62%; z-index: 55;
    background: var(--pb-surface-2); border-left: 1px solid var(--pb-line-strong);
    box-shadow: -8px 0 28px rgba(18, 23, 28, .12);
    display: flex; flex-direction: column;
}
.pb-pool header {
    display: flex; align-items: center; gap: 7px;
    padding: 12px 14px; border-bottom: 1px solid var(--pb-line);
    font-size: 11px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--pb-ink-2);
}
.pb-pool-n { color: var(--pb-ink-3); }
.pb-close {
    margin-left: auto; background: none; border: 0; cursor: pointer;
    /* Was --pb-ink-3; dat haalde net geen contrastverhouding 3 tegen de
       lichte kop van de pool. Eén tint donkerder en het klopt. */
    font-size: 19px; line-height: 1; color: var(--pb-ink-2);
}
.pb-close:hover { color: var(--pb-ink); }
.pb-pool-list { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.pb-pool-item {
    background: #fff; border: 1px solid var(--pb-line); border-left: 3px solid var(--pb-line-strong);
    border-radius: 5px; padding: 7px 9px; cursor: grab; touch-action: none;
}
.pb-pool-item:hover { border-color: var(--pb-line-strong); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.pb-pool-name { display: block; font-size: 12px; font-weight: 600; line-height: 1.3; }
.pb-pool-meta { display: block; font-size: 10.5px; color: var(--pb-ink-3); margin-top: 2px; }

/* De boom in de pool (fase H). Inspringen gebeurt met marge en niet met
   padding, zodat de gekleurde linkerrand mee naar binnen schuift en de
   trap ook zichtbaar is als de namen even lang zijn. */
.pb-pool-item { margin-left: var(--pool-indent, 0); }
.pb-pool-item.is-branch { background: var(--pb-surface-3); }
.pb-pool-item.is-branch .pb-pool-name { font-weight: 700; }

/* Een voorouder die zelf al ingepland is staat er alleen als richting: hij
   is sleepbaar (dan gaat zijn tak mee) maar hoeft niet te schreeuwen. */
.pb-pool-item.is-context .pb-pool-name { font-weight: 600; color: var(--pb-ink-2); }
.pb-pool-count { font-weight: 700; color: var(--pb-ink-2); }

/* Tijdelijke projecten in de pool. Ze staan er alleen als je het vinkje
   aanzet, en dan hoor je in één oogopslag te zien welke het zijn — anders
   plan je iets in dat nog niet vaststaat zonder het door te hebben. Een
   onderbroken rand, want de streepjes zeggen "nog niet af" zonder dat het
   op een waarschuwing lijkt. */
.pb-pool-item.is-provisional { border-style: dashed; background: #fbfcfe; }
.pb-pool-tag {
    font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    font-size: 9.5px; color: #445A78;
}
.pb-pool-toggle {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-bottom: 1px solid var(--pb-line);
    font-size: 11px; color: var(--pb-ink-2); cursor: pointer;
}
.pb-pool-toggle input { margin: 0; cursor: pointer; }
.pb-pool-toggle:hover { background: var(--pb-surface-3); }
.pb-pool-toggle .pb-pool-count { margin-left: auto; }

/* Een resource zonder werk. Hij staat er om op te kunnen mikken, dus hij
   hoort zichtbaar leeg te zijn en niet zomaar weggelaten. */
.pb-label--group.is-free .pb-label-name { color: var(--pb-ink-2); }
.pb-label--group.is-free .pb-caret { visibility: hidden; }
.pb-track--group.is-free {
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 7px,
        rgba(18, 23, 28, .035) 7px, rgba(18, 23, 28, .035) 14px
    );
}
.pb-pool-empty { margin: 8px; font-size: 12px; color: var(--pb-ink-3); }
/* Een los onderdeel toevoegen vanaf het bord (fase H). */
.pb-pool-add {
    padding: 9px 8px; border-top: 1px solid var(--pb-line);
    display: flex; flex-direction: column; gap: 5px;
}
.pb-pool-add select, .pb-pool-add input {
    width: 100%; border: 1px solid var(--pb-line-strong); border-radius: 5px;
    padding: 5px 7px; font-size: 11.5px; background: #fff;
}
.pb-pool-add-row { display: flex; gap: 5px; }
.pb-pool-add-go {
    flex: 0 0 auto; width: 30px; background: var(--pb-accent); color: #fff;
    border: 1px solid var(--pb-accent); border-radius: 5px;
    font-size: 15px; line-height: 1; cursor: pointer;
}
.pb-pool-add .ap-error { font-size: 10.5px; }

/* Uit de planning halen. Een randje in de waarschuwkleur is genoeg: het is
   terug te draaien, dus het hoeft niet als een rode knop te schreeuwen. */
/* Koppelen (fase Q): terwijl het bord vraagt om het volgende onderdeel aan
   te wijzen, hoort het er ook naar uit te zien dat je aan het kiezen bent en
   niet aan het slepen. */
.pb-canvas.is-linking .pb-bar { cursor: crosshair; }
.pb-canvas.is-linking .pb-bar:hover {
    outline: 2px solid var(--pb-accent); outline-offset: 1px;
}
.pb-canvas.is-linking .pb-handle { display: none; }
.pb-canvas.is-linking .pb-bar.is-selected {
    outline: 2px dashed var(--pb-accent); outline-offset: 1px; cursor: default;
}

/* Samenvouwen en archiveren op Projecten (fase P). */
.tree-bar {
    display: flex; align-items: center; gap: 7px;
    margin: 14px 0 0; padding-bottom: 8px;
}
.tree-bar button {
    background: #fff; border: 1px solid var(--pb-line-strong); border-radius: 6px;
    padding: 3px 11px; font-size: 12px; cursor: pointer; color: var(--pb-ink-2);
}
.tree-bar button:hover { border-color: var(--pb-accent); color: var(--pb-accent); }
.tree-bar button.is-on { background: var(--pb-accent); border-color: var(--pb-accent); color: #fff; }

.tree-caret {
    background: none; border: 0; cursor: pointer; color: var(--pb-ink-2);
    width: 15px; flex: 0 0 15px; font-size: 9px; line-height: 1; padding: 0;
    display: inline-block; transition: transform .12s ease;
}
.tree-caret.is-open { transform: rotate(90deg); }

.tree-folded {
    margin-left: 8px; font-size: 10.5px;
    /* --pb-ink-3 op --pb-surface-3 komt niet aan contrastverhouding 3. */
    color: var(--pb-ink-2);
    background: var(--pb-surface-3); border-radius: 10px; padding: 1px 8px;
}
.tree-archived, .filter-archived {
    margin-left: 8px; font-size: 10px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #8A5A3C;
    background: #f6ece4; border-radius: 3px; padding: 1px 6px;
}

/* Tijdelijk: verwacht maar nog niet bevestigd. Bewust een andere tint dan
   het archief — dat is "geweest", dit is "misschien nog" — en bewust geen
   rood: er is niets mis, het staat alleen nog niet vast. Blauwgrijs tegen
   #eef1f6 haalt ruim contrastverhouding 4,5. */
.tree-provisional {
    margin-left: 8px; font-size: 10px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #445A78;
    background: #eef1f6; border-radius: 3px; padding: 1px 6px;
}
.tree-table button.is-on {
    border-color: #445A78; color: #445A78; background: #eef1f6;
}
/* Een gearchiveerd project blijft leesbaar maar stapt naar de achtergrond;
   het hoort niet met de lopende projecten mee te schreeuwen. */
.tree-table tr.is-archived .tree-name { color: var(--pb-ink-2); }
.tree-table tr.is-archived { background: var(--pb-surface-2); }

/* De lijstweergave: project per regel, en acties per regel (fase N). */
.list-project { white-space: nowrap; }
.list-project .pb-swatch { display: inline-block; margin-right: 6px; vertical-align: middle; }
.list-dim { color: var(--pb-ink-3); }
.list-actions { text-align: right; width: 34px; }
.list-actions button {
    background: none; border: 1px solid transparent; border-radius: 5px;
    padding: 1px 7px; font-size: 14px; line-height: 1.2; cursor: pointer;
    /* --pb-ink-3 haalde net geen contrastverhouding 3 tegen de lichtgrijze
       achtergrond van een opengeklapte rij; één tint donkerder klopt wel. */
    color: var(--pb-ink-2);
}
.list-actions button:hover { border-color: var(--pb-line-strong); color: var(--pb-ink); }
.list-table tr.is-open { background: var(--pb-surface-2); }
.list-actionrow td { background: var(--pb-surface-2); border-bottom: 1px solid var(--pb-line-strong); }
.list-actionbar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--pb-ink-2);
}
.list-actionbar .ap-unplan { margin-left: auto; border-radius: 6px; padding: 4px 12px; font-size: 12.5px; }

/* Het kleurmenu van de rechtermuisknop (fase L). */
.pb-colormenu {
    position: fixed; z-index: 300; min-width: 170px;
    background: #fff; border: 1px solid var(--pb-line-strong); border-radius: 8px;
    box-shadow: 0 8px 28px rgba(18, 23, 28, .18); padding: 9px 10px;
}
.pb-colormenu-title {
    margin: 0 0 7px; font-size: 11px; font-weight: 700; color: var(--pb-ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
.pb-colormenu-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.pb-colormenu .adm-swatch { width: 100%; height: 20px; }
.pb-colormenu-clear {
    margin-top: 8px; width: 100%; background: none; border: 1px solid var(--pb-line);
    border-radius: 5px; padding: 4px 8px; font-size: 11.5px; cursor: pointer; color: var(--pb-ink-2);
}
.pb-colormenu-clear:hover { border-color: var(--pb-line-strong); color: var(--pb-ink); }

.ap-duration {
    margin: -4px 0 2px; font-size: 11.5px; color: var(--pb-ink-2);
    display: flex; align-items: baseline; gap: 6px;
}
.ap-duration span { color: var(--pb-ink-3); }

.ap-unplan { border-color: rgba(163, 43, 34, .45) !important; color: var(--pb-danger) !important; white-space: nowrap; }
.ap-unplan:hover { background: var(--pb-danger) !important; border-color: var(--pb-danger) !important; color: #fff !important; }

.pb-pool footer {
    padding: 9px 14px; border-top: 1px solid var(--pb-line);
    font-size: 11px; color: var(--pb-ink-3); line-height: 1.5;
}
.pool-chip {
    position: fixed; z-index: 200; pointer-events: none;
    background: var(--pb-ink); color: #fff; border-radius: 5px;
    padding: 5px 9px; font-size: 11.5px; font-weight: 600;
    box-shadow: 0 6px 18px rgba(18, 23, 28, .25);
}
.pool-chip.is-over-track { background: var(--pb-accent); }

/* ---------- melding met ongedaan maken ---------- */

.pb-toast {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 90;
    display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
    background: var(--pb-ink); color: #fff; border-radius: 7px;
    padding: 9px 10px 9px 14px; font-size: 12.5px;
    box-shadow: 0 8px 26px rgba(18, 23, 28, .3);
}
.pb-toast button {
    background: none; border: 1px solid rgba(255, 255, 255, .45); color: inherit;
    border-radius: 5px; padding: 3px 9px; font-size: 12px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.pb-toast button:hover { background: rgba(255, 255, 255, .16); }
.pb-toast .pb-toast-x { border: 0; font-size: 16px; padding: 0 5px; opacity: .7; }

/* ---------- zijpaneel ---------- */

.assignment-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 330px; max-width: 90vw;
    z-index: 60; background: #fff; border-left: 1px solid var(--pb-line-strong);
    box-shadow: -8px 0 28px rgba(18, 23, 28, .12);
    display: flex; flex-direction: column; overflow-y: auto;
}
.assignment-panel header {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 14px; border-bottom: 1px solid var(--pb-line);
}
.assignment-panel h3 { margin: 0; font-size: 15px; line-height: 1.3; }
.ap-eyebrow {
    margin: 0 0 2px; font-size: 10.5px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; color: var(--pb-ink-3);
}
.ap-close {
    margin-left: auto; background: none; border: 0; cursor: pointer;
    font-size: 20px; line-height: 1; color: var(--pb-ink-3);
}
.ap-close:hover { color: var(--pb-ink); }
.ap-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 11px; }
.ap-row { display: flex; gap: 10px; }
.ap-row > .ap-field { flex: 1; min-width: 0; }
.ap-field { display: flex; flex-direction: column; gap: 4px; }
.ap-field > span {
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--pb-ink-3);
}
.ap-field input, .ap-field select, .ap-field textarea {
    border: 1px solid var(--pb-line-strong); border-radius: 6px;
    padding: 5px 8px; font-size: 12.5px; font-family: inherit; width: 100%;
}
.ap-field input[type="range"] { padding: 0; border: 0; }
.ap-error { color: var(--pb-danger); font-size: 11px; font-style: normal; }
.ap-actions { display: flex; align-items: center; gap: 10px; margin-top: 2px; flex-wrap: wrap; }
.ap-save {
    background: var(--pb-accent); color: #fff; border: 0; border-radius: 6px;
    padding: 7px 16px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.ap-save:hover { filter: brightness(1.08); }
.ap-saved { font-size: 11.5px; color: var(--pb-ink-3); }
.ap-readonly { margin: 0; font-size: 12.5px; }
.ap-readonly dt {
    font-weight: 600; color: var(--pb-ink-3); margin-top: 8px;
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
}
.ap-readonly dd { margin: 2px 0 0; }
[x-cloak] { display: none !important; }

/* ---------- lijstweergave ---------- */

.list-view { padding: 12px 16px 24px; }
.list-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12px; color: var(--pb-ink-2); }
.list-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.list-table th {
    text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--pb-line-strong);
    font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--pb-ink-3);
}
.list-table td { padding: 8px 12px; border-bottom: 1px solid var(--pb-line); }
.list-status {
    display: inline-block; color: #fff; border-radius: 10px;
    padding: 1px 8px; font-size: 11px; font-weight: 600;
}
.list-empty { padding: 20px; text-align: center; color: var(--pb-ink-3); }

/* ---------- kalender en matrix (ongewijzigd) ---------- */

/* ==================================================================
   De resourcematrix (fase V)

   Per resource een rij, per dag een vakje. De kleur zegt hoe vol de dag
   zit; het getal hoeveel uur erop staat. Stond eerder vol inline-styles
   met Engelse datums erin.
   ================================================================== */
.mtx { overflow-x: auto; padding: 10px 14px 18px; }
.mtx-head, .mtx-rij { display: flex; min-width: max-content; }
.mtx-head { position: sticky; top: 0; z-index: 2; background: var(--pb-surface); }
.mtx-namen {
    width: 190px; flex-shrink: 0; position: sticky; left: 0; z-index: 1;
    background: var(--pb-surface); border-right: 1px solid var(--pb-line);
    display: flex; flex-direction: column; justify-content: center;
    padding: 0 10px; height: 38px;
}
.mtx-head .mtx-namen { border-bottom: 1px solid var(--pb-line); }
.mtx-naam { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.mtx-soort { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--pb-ink-2); }
.mtx-dag {
    width: 46px; flex-shrink: 0; height: 38px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-bottom: 1px solid var(--pb-line); font-size: 10.5px;
}
.mtx-dag.is-weekend { background: var(--pb-surface-2); }
.mtx-dagnaam { font-weight: 700; text-transform: capitalize; }
.mtx-dagnr { color: var(--pb-ink-2); }
.mtx-vak {
    width: 46px; flex-shrink: 0; height: 38px;
    border-right: 1px solid var(--pb-line); border-bottom: 1px solid var(--pb-line);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-variant-numeric: tabular-nums;
}
/* Deze drie kleuren komen uit de oude matrix en zijn gecontroleerd op
   contrast: 4,9 en 6,1 tegen hun eigen achtergrond. */
.mtx-vak.status-under { background: var(--pb-surface); color: var(--pb-ink-3); }
.mtx-vak.status-ok { background: #e6f7ee; color: #0a6b3c; }
.mtx-vak.status-over { background: #fdeaea; color: #98211a; font-weight: 700; }
.mtx-niets { padding: 26px; text-align: center; color: var(--pb-ink-3); }


/* ---------- smalle schermen ---------- */

@media (max-width: 900px) {
    :root { --pb-label-w: 170px; }
    .board-toolbar, .board-filters, .pb-gantt-bar { padding-left: 12px; padding-right: 12px; }
    .filter-search { width: 100%; }
    .pb-split { height: clamp(380px, calc(100vh - 300px), 900px); }
}


/* ==========================================================================
   Fase E — bediening
   ========================================================================== */

/* ---------- wegwijzer op een leeg bord ---------- */

.pb-onboard {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin: 0; padding: 12px 16px;
    background: #e0ebf1; border-bottom: 1px solid var(--pb-line);
    font-size: 13px; color: var(--pb-ink);
}
.pb-onboard p { margin: 0; max-width: 70ch; line-height: 1.5; }
.pb-onboard-go {
    margin-left: auto; white-space: nowrap;
    background: var(--pb-accent); color: #fff; text-decoration: none;
    border-radius: 6px; padding: 6px 14px; font-size: 12.5px; font-weight: 600;
}
.pb-onboard-go:hover { filter: brightness(1.08); }

/* ---------- project aanmaken vanaf de werkbalk ---------- */

.tb-project-add {
    border: 1px dashed var(--pb-line-strong); background: #fff; border-radius: 6px;
    padding: 4px 11px; font-size: 12px; cursor: pointer; color: var(--pb-ink-2);
}
.tb-project-add:hover { border-color: var(--pb-accent); color: var(--pb-accent); }
.tb-project { display: inline-flex; align-items: center; gap: 6px; }
.tb-project input {
    border: 1px solid var(--pb-line-strong); border-radius: 6px;
    padding: 4px 8px; font-size: 12px; width: 190px;
}
.tb-project button {
    border: 1px solid var(--pb-line-strong); background: #fff; border-radius: 6px;
    padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.tb-project .tb-project-go {
    background: var(--pb-accent); border-color: var(--pb-accent); color: #fff; font-weight: 600;
}

/* ---------- Aan de slag ---------- */

.setup { max-width: 920px; margin: 0 auto; padding: 24px 16px 48px; }
.setup h1 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.01em; }
.setup h2 { margin: 26px 0 8px; font-size: 15px; }
.setup h3 { margin: 0 0 4px; font-size: 12.5px; }
.setup header p { margin: 0; max-width: 72ch; color: var(--pb-ink-2); line-height: 1.55; }

.setup-checks { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 4px; }
.setup-checks li {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 11px; border: 1px solid var(--pb-line); border-radius: 6px;
    font-size: 13px; color: var(--pb-ink-2); background: #fff;
}
.setup-checks li.is-done { color: var(--pb-ink); border-color: color-mix(in srgb, var(--pb-ok) 35%, transparent); }
.setup-mark {
    width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--pb-surface-3); color: var(--pb-ink-3); font-size: 11px; font-weight: 700;
}
.setup-checks li.is-done .setup-mark { background: var(--pb-ok); color: #fff; }

.setup-ok, .setup-result {
    background: #e0ebf1; border-radius: 8px; padding: 14px 16px; margin: 18px 0;
    font-size: 13px; line-height: 1.55;
}
.setup-result ul { margin: 6px 0 10px; padding-left: 20px; }
.setup-result h2 { margin-top: 0; }

.setup-run { border-top: 1px solid var(--pb-line); padding-top: 4px; }
.setup-run > p { color: var(--pb-ink-2); font-size: 13px; max-width: 72ch; line-height: 1.55; }
.setup-plan {
    display: grid; gap: 14px; margin: 16px 0;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.setup-plan > div {
    border: 1px solid var(--pb-line); border-radius: 8px; padding: 12px 14px; background: #fff;
}
.setup-plan p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.5; }
.setup-note { color: var(--pb-ink-3); font-size: 11.5px !important; }
.setup-tree { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px !important; }
.setup-tree span { color: var(--pb-ink-2); }
.setup-tree .deep { padding-left: 14px; }
.setup-toggle { display: flex; align-items: center; gap: 7px; font-size: 13px; margin: 6px 0 14px; }
.setup-go {
    background: var(--pb-accent); color: #fff; border: 0; border-radius: 7px;
    padding: 9px 20px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.setup-go:hover { filter: brightness(1.08); }
.setup-current table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.setup-current th {
    text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--pb-line-strong);
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--pb-ink-3);
}
.setup-current td { padding: 7px 10px; border-bottom: 1px solid var(--pb-line); }

/* ---------- projectenscherm ---------- */

.tree-page { max-width: 1040px; margin: 0 auto; padding: 22px 16px 48px; }
.tree-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.tree-head h1 { margin: 0 0 4px; font-size: 21px; letter-spacing: -.01em; }
.tree-head p { margin: 0; color: var(--pb-ink-2); font-size: 13px; max-width: 64ch; }
.tree-new {
    margin-left: auto; white-space: nowrap;
    background: var(--pb-accent); color: #fff; border: 0; border-radius: 7px;
    padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.tree-new:hover { filter: brightness(1.08); }

.tree-notice {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
    background: #e0ebf1; border-radius: 7px; padding: 9px 12px; font-size: 12.5px;
}
.tree-notice button { margin-left: auto; background: none; border: 0; font-size: 16px; cursor: pointer; color: var(--pb-ink-3); }
.tree-empty {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--pb-surface-2); border: 1px solid var(--pb-line);
    border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; font-size: 13px;
}
.tree-empty p { margin: 0; max-width: 64ch; }
.tree-go {
    margin-left: auto; background: var(--pb-accent); color: #fff; text-decoration: none;
    border-radius: 6px; padding: 6px 14px; font-size: 12.5px; font-weight: 600;
}

.tree-form {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--pb-accent); border-radius: 8px;
    padding: 11px 13px; margin-bottom: 14px; font-size: 12.5px;
}
.tree-form-where { font-weight: 700; color: var(--pb-accent); }
.tree-form input[type="text"], .tree-form select {
    border: 1px solid var(--pb-line-strong); border-radius: 6px; padding: 5px 9px; font-size: 12.5px;
}
.tree-form input[type="text"] { width: 240px; }
.tree-form label { display: inline-flex; align-items: center; gap: 5px; color: var(--pb-ink-2); }
.tree-form button {
    border: 1px solid var(--pb-line-strong); background: #fff; border-radius: 6px;
    padding: 5px 12px; font-size: 12.5px; cursor: pointer;
}
.tree-form .tree-form-go { background: var(--pb-accent); border-color: var(--pb-accent); color: #fff; font-weight: 600; }

.tree-table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.tree-table th {
    text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--pb-line-strong);
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--pb-ink-3);
}
.tree-table td { padding: 6px 10px; border-bottom: 1px solid var(--pb-line); vertical-align: middle; }
.tree-table tr.is-project { background: var(--pb-surface-2); }
.tree-table tr.is-project .tree-name { font-weight: 700; }
.tree-indent { display: inline-flex; align-items: center; gap: 6px; }
.tree-branch { color: var(--pb-ink-3); }
.tree-level {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--pb-ink-2);
}
.tree-level::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--lvl); }
.tree-actions { text-align: right; white-space: nowrap; }
.tree-actions button {
    border: 1px solid var(--pb-line); background: #fff; border-radius: 5px;
    padding: 3px 8px; font-size: 11.5px; cursor: pointer; color: var(--pb-ink-2); margin-left: 3px;
}
.tree-actions button:hover { background: var(--pb-surface-3); color: var(--pb-ink); }
.tree-actions .tree-del:hover { border-color: var(--pb-danger); color: var(--pb-danger); }
.tree-actions-head { text-align: right; }
.tree-none { padding: 26px; text-align: center; color: var(--pb-ink-3); }

/* ------------------------------------------------------------------
   Het menu achter drie puntjes (fase U)

   Zes knoppen naast elkaar per regel liepen op een smal scherm over
   drie regels, en dan is de lijst niet meer te lezen. Verplaatsen
   blijft ernaast staan: dat doe je een paar keer achter elkaar.
   ------------------------------------------------------------------ */
.tree-move { width: 24px; text-align: center; padding: 3px 0 !important; }
.rm { position: relative; display: inline-block; }
.rm-dots {
    /* Groter dan het lijkt: een raakvlak van 28 bij 26 is op een
       aanraakscherm nog te doen, terwijl de puntjes zelf klein zijn. */
    min-width: 28px; height: 26px; font-size: 15px; line-height: 1;
}
.rm-pop {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 80;
    min-width: 208px; padding: 5px;
    background: var(--pb-surface); border: 1px solid var(--pb-line-strong);
    border-radius: 8px; box-shadow: 0 10px 28px rgba(18, 23, 28, .16);
    display: flex; flex-direction: column; gap: 1px;
    text-align: left; white-space: normal;
}
/* Onderaan de lijst zou het menu buiten beeld vallen; dan klapt hij
   naar boven. Welke van de twee het wordt, bepaalt de JavaScript pas
   als hij weet hoe hoog het menu is geworden. */
.rm-pop.is-up { top: auto; bottom: calc(100% + 4px); }
.rm-pop button {
    display: block; width: 100%; text-align: left; margin: 0 !important;
    border: 0 !important; background: none; border-radius: 5px;
    padding: 7px 10px !important; font-size: 12.5px; color: var(--pb-ink) !important;
}
.rm-pop button:hover { background: var(--pb-surface-3); }
.rm-pop .rm-del { color: var(--pb-danger) !important; }
.rm-pop .rm-del:hover { background: rgba(176, 58, 46, .08); }

/* ------------------------------------------------------------------
   De duur van een onderdeel (fase U)
   ------------------------------------------------------------------ */
.tree-duration { white-space: nowrap; }
.tree-duur {
    border: 1px solid transparent; background: none; border-radius: 5px;
    padding: 3px 7px; font-size: 12px; cursor: pointer; color: var(--pb-ink);
    font-variant-numeric: tabular-nums;
}
.tree-duur:hover { border-color: var(--pb-line-strong); background: var(--pb-surface-3); }
.tree-duur.is-unset { color: var(--pb-ink-3); }
.tree-duur-form { display: inline-flex; align-items: center; gap: 4px; }
.tree-duur-form input {
    width: 84px; border: 1px solid var(--pb-accent); border-radius: 5px;
    padding: 3px 7px; font-size: 12.5px;
}
.tree-duur-form button {
    border: 1px solid var(--pb-line); background: #fff; border-radius: 5px;
    padding: 3px 7px; font-size: 12px; cursor: pointer; color: var(--pb-ink-2);
}

/* ------------------------------------------------------------------
   De kleur van één regel (fase U)

   Tien vierkantjes per regel maakten de lijst onleesbaar en de kleur
   die er stond juist moeilijk te vinden. Nu staat alleen die ene er,
   en zit de rest achter een klik.
   ------------------------------------------------------------------ */
.cf { position: relative; display: inline-block; }
.cf-current {
    width: 22px; height: 22px; border-radius: 5px; padding: 0; cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .18);
    font-size: 12px; line-height: 1; color: var(--pb-ink-3);
}
.cf-current.is-none { background: #fff; }
.cf-current:hover { box-shadow: 0 0 0 2px var(--pb-surface), 0 0 0 3.5px var(--pb-line-strong); }
.cf-pop {
    position: absolute; left: 0; top: calc(100% + 5px); z-index: 80;
    width: 232px; padding: 10px;
    background: var(--pb-surface); border: 1px solid var(--pb-line-strong);
    border-radius: 8px; box-shadow: 0 10px 28px rgba(18, 23, 28, .16);
}
.cf-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.cf-swatch {
    height: 22px; border-radius: 4px; padding: 0; cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .18);
}
.cf-swatch.is-on { box-shadow: 0 0 0 2px var(--pb-surface), 0 0 0 3.5px var(--pb-ink-2); }
.cf-pick {
    display: flex; align-items: center; gap: 7px; margin-top: 9px;
    font-size: 11.5px; color: var(--pb-ink-2); cursor: pointer;
}
.cf-pick input[type="color"] {
    width: 34px; height: 24px; padding: 1px; cursor: pointer;
    border: 1px solid var(--pb-line); border-radius: 5px; background: #fff;
}
.cf-row { display: flex; gap: 5px; margin-top: 7px; }
.cf-row input {
    flex: 1; min-width: 0; border: 1px solid var(--pb-line); border-radius: 5px;
    padding: 4px 7px; font-size: 11.5px;
}
.cf-row input.is-bad { border-color: var(--pb-danger); }
.cf-go {
    border: 1px solid var(--pb-line-strong); background: var(--pb-surface-3);
    border-radius: 5px; padding: 4px 9px; font-size: 11.5px; cursor: pointer;
    color: var(--pb-ink);
}
.cf-bad { margin: 6px 0 0; font-size: 11px; color: var(--pb-danger); }
.cf-clear {
    width: 100%; margin-top: 8px; border: 1px solid var(--pb-line);
    background: #fff; border-radius: 5px; padding: 5px; cursor: pointer;
    font-size: 11.5px; color: var(--pb-ink-2);
}
.cf-clear:hover { background: var(--pb-surface-3); color: var(--pb-ink); }
.tree-rename { display: inline-flex; align-items: center; gap: 5px; }
.tree-rename input { border: 1px solid var(--pb-accent); border-radius: 5px; padding: 3px 7px; font-size: 12.5px; }
.tree-rename button { border: 1px solid var(--pb-line-strong); background: #fff; border-radius: 5px; padding: 3px 8px; font-size: 11.5px; cursor: pointer; }

/* ---------- beheerschermen ---------- */

.adm { font-size: 13px; }
.adm-intro { color: var(--pb-ink-2); max-width: 74ch; line-height: 1.55; margin: 0 0 16px; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.adm-table th {
    text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--pb-line-strong);
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--pb-ink-3);
}
.adm-table td { padding: 7px 10px; border-bottom: 1px solid var(--pb-line); }
.adm-table tr.is-member td:first-child { color: var(--pb-ink-2); }
.adm-tag {
    display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 600;
    background: var(--pb-surface-3); color: var(--pb-ink-2); border-radius: 10px; padding: 1px 8px;
}
.adm-row-actions { text-align: right; }
.adm-row-actions button, .adm-del {
    background: none; border: 1px solid var(--pb-line); border-radius: 5px;
    padding: 2px 8px; font-size: 13px; line-height: 1.2; cursor: pointer; color: var(--pb-ink-3);
}
.adm-row-actions button:hover, .adm-del:hover { border-color: var(--pb-danger); color: var(--pb-danger); }
.adm-none { padding: 20px; text-align: center; color: var(--pb-ink-3); }
.adm-warn { color: var(--pb-ink-2); font-size: 12.5px; margin-top: 12px; }

.adm-form {
    display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
    margin-top: 16px; padding: 12px 14px;
    background: var(--pb-surface-2); border: 1px solid var(--pb-line); border-radius: 8px;
}
.adm-form label { display: flex; flex-direction: column; gap: 3px; }
.adm-form label > span {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--pb-ink-3);
}
.adm-form input, .adm-form select {
    border: 1px solid var(--pb-line-strong); border-radius: 6px; padding: 5px 8px; font-size: 12.5px;
}
.adm-form input[type="number"] { width: 92px; }
.adm-go {
    background: var(--pb-accent); color: #fff; border: 0; border-radius: 6px;
    padding: 7px 15px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.adm-go:hover { filter: brightness(1.08); }
.adm-note { color: var(--pb-ink-3); font-size: 11.5px; margin-top: 10px; max-width: 74ch; line-height: 1.5; }

.adm-card { border: 1px solid var(--pb-line); border-radius: 8px; margin-bottom: 12px; background: #fff; }
.adm-card-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.adm-card-title {
    background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700;
    color: var(--pb-ink); text-align: left; flex: 1; padding: 0;
}
.adm-steps { margin: 0; padding: 0 12px 10px 32px; }
.adm-steps li { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 12.5px; }
.adm-step-name { font-weight: 600; }
.adm-step-swatch {
    width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px;
    border: 1px solid var(--pb-line-strong);
}
.adm-step-meta { color: var(--pb-ink-3); font-size: 11.5px; }
/* Was `.adm-steps li button`, en dat trof sinds fase H ook de knoppen van
   het bewerkformulier in zo'n stap: die verloren hun rand en werden door
   `margin-left:auto` elk apart naar rechts geduwd. De regel hoort alleen
   over de actieknoppen van de regel te gaan. */
.adm-steps li .adm-row-actions button { font-size: 12.5px; }
.adm-steps li .adm-row-actions button:hover { color: var(--pb-danger); }
.adm-form--step { margin: 0 12px 12px; }


/* ---------- bewerken, kleuren en verwijderen (fase H) ---------- */

/* Een rij die openklapt om bewerkt te worden: hetzelfde formulier als
   onderaan het scherm, maar zonder de eigen achtergrond — de rij eromheen
   geeft al aan waar je zit. */
.adm-form--inline { margin: 0; padding: 8px 0; background: none; border: 0; }
.adm-form--inline input[type="text"] { min-width: 180px; }

.adm-steps li > form { flex: 1 1 100%; }
.adm-steps li .adm-row-actions { margin-left: auto; display: flex; gap: 4px; }
.adm-steps li .adm-row-actions button { margin-left: 0; }

/* Kleurkeuze. Acht vakjes en een kruisje om terug te vallen op de
   automatische kleur; de actieve heeft een ring in plaats van een rand,
   zodat de kleur zelf niet verspringt. */
.adm-swatches { display: inline-flex; gap: 3px; align-items: center; }
.adm-swatch {
    width: 16px; height: 16px; border-radius: 4px; padding: 0;
    border: 1px solid rgba(0, 0, 0, .18); cursor: pointer;
    font-size: 11px; line-height: 1; color: var(--pb-ink-3);
}
.adm-swatch.is-on { box-shadow: 0 0 0 2px var(--pb-surface), 0 0 0 3.5px var(--pb-ink-2); }
.adm-swatch--none { background: #fff; }
.adm-color { width: 44px; padding: 2px; height: 27px; }
.adm-check { flex-direction: row !important; align-items: center; gap: 6px !important; }
.adm-check > span { text-transform: none !important; font-size: 12px !important; font-weight: 500 !important; }

/* Verwijderen van een heel bedrijf. Dit is het zwaarste wat het scherm
   kan, dus het ziet er ook zo uit. */
.adm-danger {
    border: 1px solid var(--pb-danger); border-radius: 8px;
    background: rgba(176, 58, 46, .05); padding: 12px 14px; margin: 6px 0;
}
.adm-danger p { margin: 0 0 8px; line-height: 1.5; }
.adm-danger-list {
    list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px;
    margin: 0 0 10px; padding: 0; font-size: 12px; color: var(--pb-ink-2);
}
.adm-del-go {
    background: var(--pb-danger); color: #fff; border: 1px solid var(--pb-danger);
    border-radius: 6px; padding: 7px 15px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.adm-del-go:hover { filter: brightness(1.08); }
.adm-dim { color: var(--pb-ink-3); font-size: 11.5px; white-space: nowrap; }

/* De werkkalender (fase I). */
.adm-sub {
    font-size: 12.5px; font-weight: 700; margin: 26px 0 8px;
    display: flex; align-items: center; gap: 10px;
}
.adm-year { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--pb-ink-2); }
.adm-year button {
    background: none; border: 1px solid var(--pb-line); border-radius: 4px;
    padding: 1px 6px; font-size: 10px; cursor: pointer; color: var(--pb-ink-3);
}
.adm-year button:hover { border-color: var(--pb-line-strong); color: var(--pb-ink); }
.adm-holidays {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 3px 18px;
}
.adm-holidays li { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; padding: 2px 0; }
.adm-holidays li.is-weekend { color: var(--pb-ink-3); }
.adm-holiday-date {
    font-variant-numeric: tabular-nums; font-weight: 600;
    color: var(--pb-ink-2); min-width: 42px;
}
.adm-holidays li.is-weekend .adm-holiday-date { color: var(--pb-ink-3); font-weight: 500; }

/* Uitnodigen of zelf aanmaken: twee manieren om hetzelfde te bereiken, dus
   twee standen van één formulier en niet twee formulieren onder elkaar. */
.adm-modes { display: inline-flex; margin-top: 18px; border: 1px solid var(--pb-line-strong); border-radius: 7px; overflow: hidden; }
.adm-modes button {
    border: 0; border-right: 1px solid var(--pb-line); border-radius: 0;
    padding: 6px 14px; font-size: 12.5px; cursor: pointer; color: var(--pb-ink-2);
}
.adm-modes button:last-child { border-right: 0; }
.adm-modes button.is-on { background: var(--pb-accent); color: #fff; font-weight: 600; }
.adm-modes + .adm-form { margin-top: 8px; }

/* Het wachtwoord van een zojuist aangemaakt account. Eén keer te zien, dus
   het mag opvallen. */
.adm-cred {
    border: 1px solid var(--pb-accent); border-radius: 8px;
    background: rgba(31, 92, 122, .05); padding: 12px 14px; margin: 16px 0 0;
}
.adm-cred p { margin: 0 0 10px; line-height: 1.5; max-width: 74ch; }
.adm-cred-pairs { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 12px; }
.adm-cred-pairs dt {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--pb-ink-3);
}
.adm-cred-pairs dd { margin: 2px 0 0; font-size: 14px; }
.adm-cred-pairs code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px;
    background: #fff; border: 1px solid var(--pb-line-strong); border-radius: 5px;
    padding: 2px 8px; user-select: all;
}


/* ---------- bedrijven en gebruikers (fase F) ---------- */

.app-switch { position: relative; }
.app-switch > summary {
    list-style: none; cursor: pointer; user-select: none;
    font-size: 12px; color: rgba(255, 255, 255, .8);
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 20px; padding: 3px 12px;
}
.app-switch > summary::-webkit-details-marker { display: none; }
.app-switch > summary::after { content: " \25BE"; opacity: .6; }
.app-switch[open] > summary { background: rgba(255, 255, 255, .14); color: #fff; }
.app-switch-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 80; min-width: 220px;
    background: #fff; border: 1px solid var(--pb-line-strong); border-radius: 8px;
    box-shadow: 0 10px 28px rgba(18, 23, 28, .2); padding: 5px;
}
.app-switch-menu p {
    margin: 4px 8px 6px; font-size: 10.5px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: var(--pb-ink-3);
}
.app-switch-menu form { margin: 0; }
.app-switch-menu button {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: none; border: 0; border-radius: 5px; padding: 6px 8px;
    font-size: 12.5px; text-align: left; cursor: pointer; color: var(--pb-ink);
}
.app-switch-menu button:hover { background: var(--pb-surface-2); }
.app-switch-menu button.is-current { font-weight: 700; }
.app-switch-menu button span { margin-left: auto; color: var(--pb-ok); }
.app-switch-menu a {
    display: block; margin-top: 4px; padding: 6px 8px;
    border-top: 1px solid var(--pb-line); font-size: 12px;
    color: var(--pb-accent); text-decoration: none;
}

.adm-switch {
    background: var(--pb-accent); color: #fff; border: 0; border-radius: 6px;
    padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.adm-switch:hover { filter: brightness(1.08); }
.adm-user { display: block; font-weight: 600; }
.adm-mail { display: block; font-size: 11px; color: var(--pb-ink-3); }
.adm-elsewhere { font-size: 11.5px; color: var(--pb-ink-3); }
.adm-roledesc { display: block; font-size: 10.5px; color: var(--pb-ink-3); margin-top: 3px; max-width: 34ch; }
.adm-table select { border: 1px solid var(--pb-line-strong); border-radius: 6px; padding: 4px 7px; font-size: 12px; }
.adm-preset {
    margin-top: 10px; width: 100%; background: #fff; cursor: pointer;
    border: 1px dashed var(--pb-line-strong); border-radius: 6px;
    padding: 6px 10px; font-size: 12px; color: var(--pb-ink-2);
}
.adm-preset:hover { border-color: var(--pb-accent); color: var(--pb-accent); }
.adm-preset-note { font-size: 10.5px; color: var(--pb-ink-3); line-height: 1.45; margin: 6px 2px 0; }


/* ---------- platformbeheer (fase G) ---------- */

.app-platform {
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    background: #C8743C; color: #fff; border-radius: 4px; padding: 2px 8px;
}
.adm-platform {
    background: #fdf1e8; border: 1px solid rgba(200, 116, 60, .4);
    border-left: 3px solid #C8743C; border-radius: 7px;
    padding: 10px 13px; margin: 0 0 14px; font-size: 12.5px; line-height: 1.55;
    max-width: 78ch;
}
.adm-platform-tag {
    font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    background: #C8743C; color: #fff; border-radius: 3px; padding: 1px 5px; margin-left: 5px;
}
.adm-visitor { font-size: 11.5px; color: #A05426; }

/* ---------- inloghistoriek (platformbeheer) ---------- */

.adm-filters {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0 0 12px;
}
.adm-filters input[type="search"] {
    border: 1px solid var(--pb-line-strong); border-radius: 6px;
    padding: 5px 9px; font-size: 12.5px; min-width: 260px;
}
.adm-filters select {
    border: 1px solid var(--pb-line-strong); border-radius: 6px;
    padding: 5px 7px; font-size: 12.5px; background: #fff;
}
.adm-count { margin-left: auto; font-size: 11.5px; color: var(--pb-ink-3); }

.adm-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.adm-client { font-size: 11.5px; color: var(--pb-ink-2); white-space: nowrap; }

/* Een mislukte poging hoort op te vallen zonder de tabel rood te maken:
   de regel blijft gewoon leesbaar, alleen het label is gekleurd. */
.adm-table tr.is-failed td { background: #fdf4f3; }
.adm-tag--bad { background: var(--pb-danger); color: #fff; border-color: var(--pb-danger); }

.adm-more { margin: 12px 0 0; }
.adm-purge {
    border: 1px solid rgba(163, 43, 34, .35); border-left: 3px solid var(--pb-danger);
    border-radius: 7px; background: #fdf4f3; padding: 10px 13px; margin-top: 10px;
    font-size: 12.5px; max-width: 78ch;
}
.adm-purge p { margin: 0 0 8px; line-height: 1.5; }
.adm-purge button {
    background: #fff; border: 1px solid var(--pb-line-strong); border-radius: 6px;
    padding: 4px 10px; font-size: 12px; cursor: pointer; margin-right: 6px;
}

/* ---------- bedrijf kiezen bij het inloggen ---------- */

.pick { max-width: 420px; margin: 8vh auto; padding: 0 16px; }
.pick h1 { font-size: 19px; margin: 0 0 10px; }
.pick-note { font-size: 12.5px; color: var(--pb-ink-2); line-height: 1.55; margin: 0 0 14px; }
.pick-list { display: flex; flex-direction: column; gap: 7px; }
.pick-list button {
    display: flex; align-items: baseline; gap: 9px; width: 100%; text-align: left;
    background: #fff; border: 1px solid var(--pb-line-strong); border-radius: 7px;
    padding: 10px 13px; font-size: 13.5px; cursor: pointer;
}
.pick-list button:hover { border-color: var(--pb-accent); background: var(--pb-surface-2); }
.pick-list em { margin-left: auto; font-style: normal; font-size: 11px; color: #A05426; }


/* ---------- leesbaarheid van knoppen, expliciet ---------- */

.setup-go, .tree-new, .tree-go, .tree-form-go, .adm-go, .adm-switch,
.ap-save, .pb-ask .pb-ask-go, .tb-project-go, .pb-onboard-go {
    background: var(--pb-accent); border-color: var(--pb-accent); color: #fff;
}
.pb-ask--warn .pb-ask-go { background: var(--pb-danger); border-color: var(--pb-danger); color: #fff; }
.tb-zoom button[aria-pressed="true"],
.pb-gantt-bar button.is-active,
.pb-view.is-active > button { color: #fff; }
.pb-conflict-btn.is-active { color: #fff !important; }
.pb-toast button { color: inherit; background: none; }
.app-nav-right button, .app-nav button { color: #fff; background: none; }

/* ==================================================================
   De weekkalender (fase V)

   Eén kolom per dag, de uren links, en binnen een dag één baan per
   resource. Alles staat absoluut gepositioneerd binnen de dag, want
   de hoogte van een blok is de duur ervan — dat is de hele reden dat
   deze weergave bestaat naast het planbord, dat in dagen rekent.
   ================================================================== */
.cal { padding: 10px 14px 18px; }
.cal-bar {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    padding-bottom: 10px;
}
/* De navigatie stond hier ook; die is weg. Er waren twee datumkeuzes op
   één scherm die los van elkaar bewogen — de werkbalk van het bord doet
   het nu alleen. */
.cal-title { font-size: 13.5px; }
.cal-hint { margin-left: auto; font-size: 11px; color: var(--pb-ink-2); }

/* Horizontaal schuiven in plaats van blokjes platdrukken.
   Zie .cal-day hieronder: een dag met drie banen wordt breder dan zijn
   zevende deel, en dan schuift de week. Liever scrollen dan tekst die
   er niet meer staat. */
.cal-grid {
    display: flex; align-items: flex-start;
    border: 1px solid var(--pb-line); border-radius: 8px;
    overflow-x: auto; overflow-y: hidden;
    background: var(--pb-surface);
}
/* De urenkolom blijft staan tijdens het schuiven; zonder hem weet je
   niet meer hoe laat je kijkt. */
.cal-hours {
    width: 54px; flex-shrink: 0; border-right: 1px solid var(--pb-line);
    position: sticky; left: 0; z-index: 3; background: var(--pb-surface);
}
.cal-hour {
    /* --pb-ink-3 haalde maar 3,1 op wit, en dit is kleine tekst die je
       echt moet kunnen lezen — het is de enige aanduiding van hoe laat
       een blok staat. Eén tint donkerder. */
    height: var(--cal-hour); position: relative;
    font-size: 10.5px; color: var(--pb-ink-2);
}
/* Het label hoort bij de lijn erboven, dus het hangt aan de bovenkant
   van zijn vakje en niet in het midden. */
.cal-hour span { position: absolute; top: -6px; right: 7px; }

.cal-daghead {
    height: 34px; display: flex; align-items: center; justify-content: center; gap: 5px;
    border-bottom: 1px solid var(--pb-line); font-size: 11.5px;
}
.cal-dagnaam { font-weight: 700; text-transform: capitalize; }
.cal-dagnr { color: var(--pb-ink-2); }

/* Een ondergrens per kolom werk.
   Staan er drie dingen naast elkaar op één dag, dan werd elke kolom een
   zevende van een zevende van het scherm — een centimeter — en verdween
   alles behalve de naam. Een dag is nu minstens zo breed als het aantal
   kolommen dat hij nodig heeft; past dat niet, dan schuift de week.
   --cols komt uit de blade en telt de banen plus hun parallelle stromen. */
.cal-day {
    flex: 1 1 0; border-left: 1px solid var(--pb-line);
    min-width: calc(var(--cols, 1) * 132px);
}
.cal-day:first-of-type { border-left: 0; }
.cal-day.is-today .cal-daghead { background: var(--pb-surface-3); }
.cal-day.is-today .cal-dagnaam { color: var(--pb-accent); }
.cal-body { position: relative; }
.cal-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--pb-line); }

/* Een dag waarop niet gewerkt wordt. De reden staat erin — "Zaterdag",
   "Bouwverlof", "O.L.H. Hemelvaart" — want "leeg" en "dicht" zien er
   anders hetzelfde uit en dat is precies de verwarring die je hier
   niet wilt. */
.cal-day.is-closed .cal-body { background: repeating-linear-gradient(
    45deg, transparent, transparent 6px, var(--pb-surface-2) 6px, var(--pb-surface-2) 12px); }
.cal-dicht {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 0 6px;
}
.cal-dicht span {
    font-size: 10.5px; color: var(--pb-ink-2); background: var(--pb-surface);
    border: 1px solid var(--pb-line); border-radius: 10px; padding: 2px 8px;
    text-align: center; line-height: 1.25;
}

.cal-lane { position: absolute; top: 0; bottom: 0; padding: 0 2px; }
.cal-blok {
    /* left en width komen uit de blade: ze hangen af van in welke stroom
       het blok zit en hoeveel stromen die resource die dag gebruikt. */
    position: absolute; margin-left: 2px; overflow: hidden;
    border-radius: 5px; padding: 3px 6px;
    border-left: 3px solid var(--cal-kleur);
    background: color-mix(in srgb, var(--cal-kleur) 13%, #fff);
    font-size: 10.5px; line-height: 1.3; color: var(--pb-ink);
}
.cal-blok b {
    /* Afbreken en niet afkappen: verticaal is er ruimte zat (een hele
       werkdag is ruim 350 px hoog), horizontaal niet. "Herstelling
       spatbord" op twee regels is leesbaar, "Herstelling…" niet. */
    display: block; font-size: 11px; font-weight: 700;
    overflow-wrap: anywhere;
}
.cal-blok-project, .cal-blok-res { display: block; color: var(--pb-ink-2); }

/* Staan er meerdere dingen naast elkaar op één dag, dan wordt een blok
   smal en past er niets meer in dan de naam. Beter weinig en leesbaar
   dan drie afgekapte regels; de rest staat in de tooltip. */
.cal-blok { container-type: inline-size; }
/* Een noodrem, geen gewone toestand: met de ondergrens hierboven is een
   blok minstens ~128 px breed en komt dit niet meer voor. Blijft staan
   voor het geval iemand het venster tot een postzegel verkleint. */
@container (max-width: 96px) {
    .cal-blok-res { display: none; }
}
@container (max-width: 68px) {
    .cal-blok-project { display: none; }
    .cal-blok b { font-size: 10px; }
}

/* Werk dat voorbij het einde van de werkdag loopt. Niet weggerekend tot
   het net past: dan zou de kalender iets anders zeggen dan de
   resourcebelasting eronder. */
.cal-blok.is-over { border: 1px dashed var(--pb-danger); border-left: 3px solid var(--pb-danger); }

.cal-niets { margin: 14px 2px 0; font-size: 12px; color: var(--pb-ink-3); }

/* Uren voorbij het einde van de werkdag. Die staan er alleen als er iets
   doorloopt; ze horen er zichtbaar bij maar niet even hard als de uren
   waarop er echt gewerkt wordt. */
.cal-hour.is-after span { color: var(--pb-ink-3); }
.cal-line.is-after { border-top-style: dotted; }
.cal-eind { position: absolute; left: 0; right: 0; border-top: 1px solid var(--pb-danger); opacity: .45; }

/* ------------------------------------------------------------------
   De dagweergave: hetzelfde raster, één kolom. Die mag breed zijn —
   er is geen reden om een halve dag leeg te laten — maar niet zo breed
   dat één klusje een muur wordt.
   ------------------------------------------------------------------ */
.cal-grid.is-dag .cal-day { max-width: 640px; }

/* ------------------------------------------------------------------
   De maandweergave (fase W)

   Geen urenraster maar een lijstje per dag: in een vakje van een
   centimeter hoog heeft positioneren op de klok geen zin — dan zie je
   zeven streepjes van twee pixels. Wat je eruit wilt halen is wát er
   die dag staat.
   ------------------------------------------------------------------ */
.cal-maand {
    border: 1px solid var(--pb-line); border-radius: 8px; overflow: hidden;
    background: var(--pb-surface);
}
.cal-maand-kop, .cal-maand-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-maand-kop > div {
    padding: 7px 8px; font-size: 11px; font-weight: 700; text-transform: capitalize;
    border-bottom: 1px solid var(--pb-line); border-left: 1px solid var(--pb-line);
}
.cal-maand-kop > div:first-child { border-left: 0; }
.cal-maand-dag {
    min-height: 92px; padding: 5px 6px 7px;
    border-top: 1px solid var(--pb-line); border-left: 1px solid var(--pb-line);
    display: flex; flex-direction: column; gap: 3px;
}
.cal-maand-week > .cal-maand-dag:first-child { border-left: 0; }
/* Dagen van de maand ervoor of erna. Ze horen erbij — werk dat op de
   30e begint en op de 2e eindigt zou anders half wegvallen — maar ze
   staan op de achtergrond. */
.cal-maand-dag.is-buiten { background: var(--pb-surface-2); }
.cal-maand-dag.is-buiten .cal-maand-nr > span:first-child { color: var(--pb-ink-3); }
.cal-maand-dag.is-closed {
    background: repeating-linear-gradient(
        45deg, transparent, transparent 6px, var(--pb-surface-2) 6px, var(--pb-surface-2) 12px);
}
.cal-maand-dag.is-today { box-shadow: inset 0 2px 0 var(--pb-accent); }
.cal-maand-nr {
    display: flex; align-items: baseline; gap: 6px;
    font-size: 11.5px; font-weight: 700;
}
.cal-maand-uren { margin-left: auto; font-weight: 500; font-size: 10.5px; color: var(--pb-ink-2); }
.cal-maand-dicht { margin-left: auto; font-weight: 500; font-size: 10px; color: var(--pb-ink-2); }
.cal-pil {
    border-left: 3px solid var(--cal-kleur);
    background: color-mix(in srgb, var(--cal-kleur) 13%, #fff);
    border-radius: 4px; padding: 2px 6px; font-size: 10.5px; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-meer { font-size: 10px; color: var(--pb-ink-2); padding-left: 3px; }

/* ------------------------------------------------------------------
   De periodeknoppen in de werkbalk (fase W)

   Staan naast de zoomknoppen en zien er bewust hetzelfde uit: het zijn
   twee rijtjes keuzes die samen bepalen wat je ziet. Welke periode en
   hoe fijn — twee vragen, twee antwoorden.
   ------------------------------------------------------------------ */
.tb-period { display: inline-flex; gap: 2px; }
.tb-period button {
    border: 1px solid var(--pb-line); background: #fff;
    padding: 4px 9px; font-size: 11.5px; cursor: pointer; color: var(--pb-ink-2);
}
.tb-period button:first-child { border-radius: 6px 0 0 6px; }
.tb-period button:last-child { border-radius: 0 6px 6px 0; }
.tb-period button:hover { background: var(--pb-surface-3); color: var(--pb-ink); }
.tb-period button[aria-pressed="true"] {
    background: var(--pb-ink); border-color: var(--pb-ink); color: #fff;
}

/* Een opschrift bij de knoppenrijtjes, in dezelfde vorm als bij de
   keuzelijsten links. "Periode" en "Detail" zien er anders hetzelfde
   uit, en dat ze allebei hetzelfde deden was nou net het probleem. */
.tb-group { display: flex; align-items: center; gap: 6px; }
.tb-group-label {
    font-size: 11px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--pb-ink-3);
}

/* De export-knoppen (PDF/Excel) zijn gewone links, geen <button> — het
   resultaat is een bestandsdownload, geen wire:click. Alleen een
   icoontje: een opschrift "Exporteren" met daarnaast "PDF Excel" nam
   meer plek in dan het waard was.

   Ze staan rechts in de balk met de opgeslagen weergaven (margin-left:
   auto duwt ze daarheen), want daar stond toch lege ruimte — in de
   werkbalk eronder kwamen ze op een tweede regel terecht en duwden ze
   het hele bord naar beneden. */
.pb-export { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.pb-export-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 27px; height: 24px;
    border: 1px solid var(--pb-line); border-radius: 6px; background: #fff;
    color: var(--pb-ink-2); text-decoration: none;
}
.pb-export-btn:hover { background: var(--pb-surface-3); border-color: var(--pb-line-strong); }
.pb-export-btn svg { display: block; }

/* Het uurveld naast de datum in het zijpaneel. Smaller dan de datum,
   want er staat maar 09:00 in, en met een klein opschrift: "vanaf" en
   "tot" horen bij de datum ernaast en niet als eigen veld te lezen. */
/* `.ap-row > .ap-field { flex: 1 }` hierboven is (0,2,0) en wint het
   van een losse klasse. Dus even specifiek, en later in het bestand. */
.ap-row > .ap-field--time { flex: 0 0 104px; }
.ap-field--time > span { text-transform: none; letter-spacing: 0; }
.ap-hint { margin: -2px 0 2px; font-size: 11px; color: var(--pb-ink-2); line-height: 1.4; }

/* ==================================================================
   Werk van een tijdelijk project (fase AA)

   Ingepland, maar de opdracht staat nog niet vast. Op het bord was dat
   niet te zien: een balk van een tijdelijk project zag er precies zo
   uit als een bevestigde.

   Niet met `opacity` op de hele balk. Dat maakt hem wel lichter, maar
   het witte opschrift erop verdwijnt dan mee en dat leest niet meer.
   In plaats daarvan een lichte tint van dezelfde kleur, met de rand in
   de volle kleur en donkere letters erin — lichter én leesbaar. De
   kleur zelf komt uit --pb-bar-kleur, die de blade naast de
   achtergrond meegeeft.
   ================================================================== */
.pb-bar.is-provisional {
    background: color-mix(in srgb, var(--pb-bar-kleur, var(--pb-accent)) 22%, #fff);
    border: 1px dashed var(--pb-bar-kleur, var(--pb-accent));
    color: var(--pb-ink);
    box-shadow: none;
    font-style: italic;
}
.pb-bar--rollup.is-provisional { opacity: .75; }

/* De voortgangsbalk binnenin is een witte sluier over de kleur; op een
   lichte tint zou die niets meer voorstellen. */
.pb-bar.is-provisional .pb-bar-progress { background: color-mix(in srgb, var(--pb-bar-kleur, var(--pb-accent)) 26%, transparent); }

/* En de titels links: donkergrijs in plaats van zwart, cursief. Het
   blijft goed leesbaar — --pb-ink-2 haalt 6,3 op wit — maar je ziet in
   één oogopslag welke regels nog niet vaststaan. */
.pb-label.is-provisional .pb-label-name { color: var(--pb-ink-2); font-style: italic; }
.pb-label.is-provisional .pb-swatch { opacity: .55; }