:root {
    --hos-orange-dark: #FF5C01;
    --hos-orange-light: #FFAA00;
    --hos-grey: #6B6B6B;
    --hos-black: #2F2F2F;
    --hos-white: #FFFFFF;
    --hos-orange-soft: #FFF4EC;
    --hos-orange-50:  #FFE7D6;
    --hos-orange-100: #FFCBA3;
    --hos-grey-line: #E8E6E3;
    --hos-grey-bg:   #F7F6F4;
    --hos-grey-300:  #D4D2CF;
    /* Weekend had acht losse grijstinten door de app heen; op een ander scherm viel het
       verschil met een gewone dag weg (feedback Rueben). Nu nog twee: één tint voor alle
       cellen in het raster en een donkerdere voor de koprijen.
       LET OP: in het raster moet ELKE rijsoort dezelfde tint krijgen. Wie alleen mag
       kijken ziet de secties ingeklapt en dus andere rijsoorten dan een teamlead; met
       verschillende tinten werd de weekendkolom daardoor vlekkerig en leek hij
       doorschijnend. --hos-weekend-soft blijft alleen voor de koprij-varianten. */
    --hos-weekend:   #ECE7DE;   /* dagcellen */
    --hos-weekend-soft: #EFEAE1; /* rustige rijen: samenvatting, spacers */
    --hos-weekend-head: #DCD6CB; /* koprijen */
    /* Vandaag: een doorlopende oranje laag over de hele kolom. Als box-shadow en niet
       als background, want dagcellen krijgen via een inline-stijl een fase-tint mee en
       die zou een achtergrond uit de stylesheet overschrijven. */
    --hos-today-laag: rgba(255, 106, 0, 0.10);
  }

  html, body { font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--hos-black); }
  body { background: var(--hos-white); }

  .hos-topbar {
    background: var(--hos-black); color: var(--hos-white);
    padding: 12px 20px; display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    border-bottom: 3px solid var(--hos-orange-dark);
  }
  .hos-brand { display: flex; align-items: center; gap: 16px; }
  .hos-brand .wordmark { font-weight: 600; font-size: 16px; letter-spacing: 0.2px; line-height: 1; }
  .hos-brand .product { font-size: 12px; color: var(--hos-orange-light); font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; margin-top: 2px; }
  .hos-tabs { display: flex; gap: 6px; margin-left: 12px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.18); }
  .hos-tab {
    background: transparent; color: rgba(255,255,255,0.65);
    border: 1px solid rgba(255,255,255,0.20); border-radius: 4px;
    padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
    font-family: inherit; transition: all 0.12s;
  }
  .hos-tab:hover { color: var(--hos-white); border-color: rgba(255,255,255,0.45); }
  .hos-tab.active { background: var(--hos-orange-dark); color: var(--hos-white); border-color: var(--hos-orange-dark); }
  .hos-tab-group { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: rgba(255,255,255,0.42); align-self: center; margin: 0 2px 0 4px; white-space: nowrap; }
  .hos-tab-sep { width: 1px; align-self: stretch; background: rgba(255,255,255,0.22); margin: 4px 6px; }

  .hos-page { padding: 16px 20px 24px; }

  /* Grid */
  /* Vaste kolomlayout: de breedte komt UITSLUITEND uit het <colgroup>, nooit uit de inhoud.
     Zonder dit verdeelt de browser de resterende wrapper-breedte over de kolommen naar rato
     van de langste tekst -> dagkolommen werden ongelijk en te breed. */
  /* De breedte MOET een definitieve lengte zijn, anders valt de browser terug op de automatische
     layout en groeien kolommen alsnog mee met hun inhoud. --meta-w komt uit applyColVis (som van
     de zichtbare meta-kolommen), --day-count uit renderGrid. */
  .grid-table { border-collapse: separate; border-spacing: 0; font-size: 11.5px;
                table-layout: fixed;
                width: calc(var(--meta-w, 431px) + var(--day-count, 182) * var(--day-w)); }
  /* Dagbreedte = één variabele op #grid-wrapper, zodat de regelaar geen her-render nodig heeft. */
  #grid-wrapper { --day-w: 40px; }
  #grid-cols col.gc-day { width: var(--day-w); }
  #grid-cols col.gc-pers2   { width: 100px; }
  #grid-cols col.gc-klant   { width: 120px; }
  #grid-cols col.gc-project { width: 145px; }
  /* De inhoud is één letter (A/B/C), maar de KOP moet "Label" voluit kunnen tonen.
     56px is het minimum waarop kop + oogje passen. Kost ±22px bevroren breedte t.o.v. 34px. */
  #grid-cols col.gc-label   { width: 56px;  }
  #grid-cols col.gc-fase    { width: 88px;  }
  /* Producer: alleen op het Design & Makers-bord (klasse show-producer op #grid-wrapper). */
  #grid-cols col.gc-producer { width: 130px; }
  #grid-cols col.gc-notes   { width: 220px; }
  #grid-cols col.gc-open    { width: 44px;  }
  /* Verborgen velden (oogje): bij een vaste layout moet de BREEDTE op de <col> naar 0,
     de td-regels verderop zorgen alleen nog dat de inhoud niet uitsteekt. */
  #grid-wrapper.hide-pers2   #grid-cols col.gc-pers2,
  #grid-wrapper.hide-klant   #grid-cols col.gc-klant,
  #grid-wrapper.hide-project #grid-cols col.gc-project,
  #grid-wrapper.hide-label   #grid-cols col.gc-label,
  #grid-wrapper.hide-fase    #grid-cols col.gc-fase,
  #grid-wrapper.hide-producer #grid-cols col.gc-producer,
  #grid-wrapper.hide-notes   #grid-cols col.gc-notes { width: 0; }

  /* Zoombanden: hoe smaller de kolom, hoe minder tekst er nog in past.
     Kleur en blokhoogte blijven altijd de dragers van de informatie.
     xs = 22/25px · s = 28/31px · m = 34/37px · l = 40px en breder */
  /* xs (t/m 34px): geen tekst. Eén afgekapte letter is ruis, kleur en hoogte zeggen genoeg.
     De samenvattingsblokken krimpen hier evenredig mee, zodat de rij niet onnodig hoog blijft. */
  #grid-wrapper[data-zoom="xs"] .asg-name-fill,
  #grid-wrapper[data-zoom="xs"] .sum-blk .sum-cli,
  #grid-wrapper[data-zoom="xs"] .sum-blk .sum-line2 { display: none; }
  #grid-wrapper[data-zoom="xs"] .sum-blk { height: calc(var(--h, 28) * 0.55px); min-height: 7px; }
  #grid-wrapper[data-zoom="xs"] .sum-stack { min-height: 16px; }
  #grid-wrapper[data-zoom="xs"] thead .head-day-row td.head-day .wd { display: none; }
  #grid-wrapper[data-zoom="xs"] thead .head-day-row td.head-day .dn { font-size: 9.5px; }
  /* s (37-46px): uren wel, actienaam niet. In de samenvatting blijft de opdrachtgever staan —
     dat is daar de enige plek waar je 'm kunt zien. */
  #grid-wrapper[data-zoom="s"] .asg-name-fill.has-hrs .asg-txt,
  #grid-wrapper[data-zoom="s"] .sum-blk .sum-txt { display: none; }
  #grid-wrapper[data-zoom="s"] thead .head-day-row td.head-day .dn { font-size: 10px; }

  /* Afwezigheidsblokken: afkorting bij smalle kolommen, volledige naam zodra het past.
     De omschakeling gaat via data-labels op #grid-wrapper (gezet in applyDayWidth), zodat
     schuiven met de regelaar geen hertekening nodig heeft. */
  .ga-full { display: none; }
  #grid-wrapper[data-labels="full"] .ga-short { display: none; }
  #grid-wrapper[data-labels="full"] .ga-full { display: inline; }

  /* Breedteregelaar in de balk */
  .zoomgrp { display: inline-flex; align-items: stretch; border: 1px solid var(--hos-grey-line); border-radius: 4px; overflow: hidden; background: var(--hos-white); }
  .zoomgrp button {
    border: none; background: var(--hos-white); font-size: 14px; font-weight: 700;
    width: 26px; cursor: pointer; color: var(--hos-black); font-family: inherit; line-height: 1; padding: 0;
  }
  .zoomgrp button:hover { background: var(--hos-orange-soft); color: var(--hos-orange-dark); }
  .zoomgrp button:disabled { color: var(--hos-grey-300); cursor: default; background: var(--hos-white); }
  .zoomgrp input[type=range] {
    width: 84px; margin: 0 3px; padding: 0; border: none; background: none;
    accent-color: var(--hos-orange-dark); align-self: center; height: 16px; cursor: pointer;
  }
  .zoomgrp input[type=range]:focus { outline: 2px solid var(--hos-orange-dark); outline-offset: 1px; }
  .zoomgrp .zoom-lvl {
    display: flex; align-items: center; justify-content: center; min-width: 46px;
    font-size: 10.5px; font-weight: 600; color: var(--hos-grey);
    border-left: 1px solid var(--hos-grey-line); cursor: pointer; user-select: none;
    font-variant-numeric: tabular-nums;
  }
  .zoomgrp .zoom-lvl:hover { color: var(--hos-orange-dark); background: var(--hos-orange-soft); }

  /* Vooruitblik-stepper in de balk — zelfde vormtaal als de breedteregelaar hierboven. */
  .horizongrp { display: inline-flex; align-items: stretch; border: 1px solid var(--hos-grey-line); border-radius: 4px; overflow: hidden; background: var(--hos-white); }
  .horizongrp .horizon-cap {
    display: flex; align-items: center; padding: 0 7px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; color: var(--hos-grey);
    background: var(--hos-grey-bg); border-right: 1px solid var(--hos-grey-line);
  }
  .horizongrp button {
    border: none; background: var(--hos-white); font-size: 11px; font-weight: 700;
    width: 24px; cursor: pointer; color: var(--hos-black); font-family: inherit; line-height: 1; padding: 0;
  }
  .horizongrp button:hover:not(:disabled) { background: var(--hos-orange-soft); color: var(--hos-orange-dark); }
  .horizongrp button:disabled { color: var(--hos-grey-300); cursor: default; background: var(--hos-white); }
  .horizongrp .horizon-lvl {
    display: flex; align-items: center; justify-content: center; min-width: 48px;
    font-size: 10.5px; font-weight: 700; color: var(--hos-black); cursor: pointer;
    font-variant-numeric: tabular-nums; user-select: none;
  }
  .horizongrp .horizon-lvl:hover { color: var(--hos-orange-dark); background: var(--hos-orange-soft); }
  /* Boven een jaar vooruit: zichtbaar dat je in zwaar gebied zit, maar niet geblokkeerd. */
  .horizongrp .horizon-lvl.heavy { color: #8A4B00; background: #FDF0DC; box-shadow: inset 0 -2px 0 #E8A33D; }
  .horizongrp .horizon-lvl.heavy::after { content: "!"; font-size: 9px; margin-left: 3px; vertical-align: top; font-weight: 800; }
  /* Bezig met een zware her-render: de cursor vertelt dat het scherm niet dood is. */
  body.horizon-busy, body.horizon-busy .horizongrp button, body.horizon-busy .horizon-lvl { cursor: progress; }
  .grid-table th, .grid-table td {
    border-right: 1px solid var(--hos-grey-line);
    border-bottom: 1px solid var(--hos-grey-line);
    padding: 0; box-sizing: border-box; background: var(--hos-white);
  }
  thead .week-row th {
    position: sticky; top: 0; z-index: 5; height: 26px;
    background: var(--hos-black); color: var(--hos-white);
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px;
    border-right-color: rgba(255,255,255,0.15);
  }
  thead .day-row th {
    position: sticky; top: 26px; z-index: 5; height: 38px;
    background: var(--hos-grey-bg); color: var(--hos-black);
    font-size: 11px; font-weight: 600;
    padding: 4px 6px; text-align: left;
    white-space: nowrap;
  }
  thead .day-row th.day-num { text-align: center; }

  /* Breedtes staan in het <colgroup> hierboven; deze regels zijn alleen nog voor uitlijning
     en voor tabellen zonder colgroup. Waarden gelijkhouden met #grid-cols en COL_W. */
  .col-pers2   { width: 100px; }
  .col-klant   { width: 120px; }
  .col-project { width: 145px; }
  .col-label   { width: 56px;  text-align: center; }
  .col-fase    { width: 88px;  }
  .col-producer { width: 130px; }
  .col-notes   { width: 220px; }
  .col-open    { width: 44px;  text-align: center; }

  .sticky-1 { position: sticky; left: 0;     z-index: 3; }
  /* Alle meta-kolommen (t/m Bekijk/bewerk) blijven bevroren bij horizontaal scrollen.
     Linkse offset = cumulatieve breedte van de zichtbare kolommen ervoor (gezet in applyColVis). */
  #grid-wrapper .col-pers2   { position: sticky; left: var(--sl-pers2, 0px);   z-index: 3; }
  #grid-wrapper .col-klant   { position: sticky; left: var(--sl-klant, 0px);   z-index: 3; }
  #grid-wrapper .col-project { position: sticky; left: var(--sl-project, 0px); z-index: 3; }
  #grid-wrapper .col-label   { position: sticky; left: var(--sl-label, 0px);   z-index: 3; }
  #grid-wrapper .col-fase    { position: sticky; left: var(--sl-fase, 0px);    z-index: 3; }
  #grid-wrapper .col-producer { position: sticky; left: var(--sl-producer, 0px); z-index: 3; }
  #grid-wrapper .col-notes   { position: sticky; left: var(--sl-notes, 0px);   z-index: 3; }
  #grid-wrapper .col-open    { position: sticky; left: var(--sl-open, 0px);    z-index: 3; }
  .sticky-2, .sticky-3 { position: sticky; z-index: 3; }
  thead .day-row .sticky-1, thead .day-row .sticky-2, thead .day-row .sticky-3 { z-index: 6; }
  thead .week-row .corner { position: sticky; left: 0; z-index: 7; background: var(--hos-orange-dark);
                            border-right: 2px solid rgba(255,255,255,0.15); }

  .meta-cell {
    padding: 6px 8px; vertical-align: middle;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 11.5px; line-height: 1.3;
  }
  .meta-cell { background: var(--hos-white); }
  /* Rechterrand van het bevroren meta-blok (na 'Bekijk/bewerk') */
  #grid-wrapper .meta-cell.col-open, #grid-wrapper .subhead-row td.col-open { border-right: 2px solid var(--hos-grey-line) !important; }

  /* Volledig leesbare tekstkolommen (geen afkapping) */
  .meta-cell.col-klant, .meta-cell.col-project, .meta-cell.col-producer {
    white-space: normal; overflow: visible; text-overflow: clip;
    line-height: 1.2; padding-top: 4px; padding-bottom: 4px; word-break: break-word;
  }
  .meta-cell.col-notes { white-space: normal; overflow: visible; padding: 3px 5px; }

  /* Bewerkbaar Notes-veld (enige bewerkbare kolom) */
  .notes-edit {
    font-size: 11.5px; line-height: 1.25; min-height: 22px;
    padding: 3px 6px; border-radius: 4px; border: 1px solid transparent;
    cursor: text; white-space: normal; word-break: break-word;
  }
  .notes-edit:hover { border-color: var(--hos-grey-line); background: var(--hos-grey-bg); }
  .notes-edit:focus { outline: none; border-color: var(--hos-orange-dark); background: var(--hos-white); }
  .notes-edit:empty::before { content: 'Notitie\2026'; color: var(--hos-grey-300); }

  /* "Bekijk/bewerk project"-link */
  /* Icoon i.p.v. het woord "Bekijk/bewerk": scheelt 86px bevroren breedte per rij. */
  .proj-open-link {
    display: inline-block; font-size: 13px; font-weight: 600; line-height: 1;
    color: var(--hos-orange-dark); cursor: pointer; text-decoration: none;
    padding: 4px 0; width: 28px; text-align: center;
    border: 1px solid var(--hos-grey-line); border-radius: 4px; white-space: nowrap;
  }
  .proj-open-link:hover { background: var(--hos-orange-soft); border-color: var(--hos-orange-dark); }

  /* Performance: browser slaat off-screen project-rijen over */
  tr.project-row { content-visibility: auto; contain-intrinsic-size: auto 36px; }

  /* Day cell with 4 sub-blocks of 0.25 each */
  /* Breedte komt uit #grid-cols col.gc-day (= --day-w). Hier alleen nog hoogte/uitlijning. */
  .day-cell {
    vertical-align: top;
    padding: 0; height: 36px;
    position: relative;
  }
  .subcells { display: flex; flex-direction: column; height: 100%; width: 100%; }
  .subcell {
    flex: 1 1 25%; min-height: 8px;
    border-bottom: 1px dashed rgba(0,0,0,0.05);
    cursor: crosshair;
    position: relative;
    user-select: none;
  }
  .subcell:last-child { border-bottom: none; }
  .subcell:hover { background: var(--hos-orange-dark); }
  .subcell.is-selected { background: var(--hos-orange-100) !important; outline: 1px solid var(--hos-orange-dark); }
  /* Hele dagcel meer accent bij hover */
  .day-cell:hover { background: var(--hos-orange-soft); }

  /* Week-grens: 2px oranje left-border op cellen waar een nieuwe week begint (maandag) */
  td.day-week-start, th.day-week-start { border-left: 2px solid var(--hos-orange-dark) !important; }
  .subcell.has-asg { background: transparent; cursor: grab; }
  /* Doel-dag oplichten tijdens het verslepen van een blok */
  .subcell.move-target { outline: 2px dashed var(--hos-orange-dark); outline-offset: -2px; background: var(--hos-orange-100) !important; }
  body.asg-moving, body.asg-moving * { cursor: grabbing !important; user-select: none !important; }
  .subcell.has-asg .asg-fill {
    position: absolute; inset: 0; padding: 0 3px;
    display: flex; align-items: center;
    font-size: 8.5px; line-height: 1; font-weight: 600;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  /* Uren-cel: één blok per dag met het urental, gekleurd op werkdruk */
  .subcell.hour-sub { display: flex; align-items: center; justify-content: center; text-align: center; }
  .hour-fill { font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; }
  .hour-fill small { font-size: 7px; font-weight: 600; margin-left: 1px; opacity: 0.75; }
  .subcell.hour-sub.ws-low  { background: #5BBF5B; color: #0E2A0E; }
  .subcell.hour-sub.ws-mid  { background: #FFAA00; color: #1F1300; }
  .subcell.hour-sub.ws-over { background: #D32F2F; color: #FFFFFF; box-shadow: inset 0 0 0 1px #FF6B6E; }
  /* Actienaam in dag-cel */
  .asg-name-fill { font-size: 10px; font-weight: 700; line-height: 1.1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; padding: 0 2px; display: block; }
  /* Uren + naam gesplitst: uren krimpen nooit, alleen de naam kort af met … */
  .asg-name-fill.has-hrs { display: flex; align-items: baseline; gap: 3px; }
  .asg-name-fill.has-hrs .asg-hrs { flex: 0 0 auto; font-weight: 800; }
  .asg-name-fill.has-hrs .asg-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* Gestapelde dagblokken (meerdere assignments per dag) */
  .day-stack { display: flex; flex-direction: column; gap: 2px; min-height: 44px; height: auto; padding: 2px 0; }
  /* Blokken NIET laten meegroeien: hoogte = inline px (proportioneel aan uren). flex:0 0 auto met !important wint van .proj-plan-table .subcell{flex:1 1 25%} */
  .day-stack .subcell.hour-sub { flex: 0 0 auto !important; min-height: 14px; justify-content: flex-start; padding: 0 3px; border-bottom: none; overflow: hidden; box-sizing: border-box; border-radius: 3px; margin: 0 1px; }
  .day-stack .subcell.hour-sub:not(.has-asg) { min-height: 34px; height: 34px; }
  /* Vul-cel onder de blokjes: groeit mee zodat je op een dag met al werk nóg uren kunt inplannen */
  .day-stack .subcell.day-filler { flex: 1 1 auto !important; min-height: 18px; border-bottom: none; cursor: crosshair; }
  /* De rail links (border-left, kleur per fase) vervangt de oude slagschaduw als scheiding. */
  .day-stack .subcell.blocked-block { border-radius: 3px; margin: 0 1px; }
  /* Herorden-hint: dagcel waar je binnen sleept om de volgorde te wijzigen */
  .day-cell.reorder-active, .role-day-cell.reorder-active { box-shadow: inset 0 0 0 2px var(--hos-orange-dark); }
  /* Herordening binnen een dag */
  .subcell.reorder-target { outline: 2px solid var(--hos-orange-dark) !important; outline-offset: -2px; background: var(--hos-orange-100) !important; }
  /* Groepscheidingsbalk Strategie / Creatie */
  .role-group-sep td { padding: 0 !important; }
  /* Werkdruk-knop actief */
  #btn-toggle-workload.active, [data-action='toggle-proj-workload'].active { background: var(--hos-orange-dark); color: var(--hos-white); border-color: var(--hos-orange-dark); }

  .day-cell.weekend { background: var(--hos-weekend); }
  .day-cell.weekend .subcell:hover { background: var(--hos-orange-dark); }
  /* Elke rijsoort in het raster krijgt dezelfde laag, anders is de kolom onderbroken.
     Een kijker ziet de secties ingeklapt en dus vooral .section-spacer en .subhead-spacer;
     die markeerden vandaag eerder helemaal niet, waardoor het bij hem nauwelijks opviel. */
  .grid-table td.day-cell.is-today,
  .grid-table td.section-spacer.is-today,
  .grid-table td.summary-cell.is-today,
  .grid-table td.subhead-spacer.is-today,
  .grid-table td.section-weekcell.is-today {
    box-shadow: inset 0 0 0 999px var(--hos-today-laag);
  }
  /* Geblokkeerde dag (algemene actie: vakantie e.d.) */
  .day-cell.ga-blocked, .role-day-cell.ga-blocked { padding: 0; text-align: center; vertical-align: middle; }
  .ga-block-lbl { display: inline-block; font-size: 7.5px; font-weight: 800; letter-spacing: 0.3px; color: inherit; }
  thead .day-row th.weekend { background: var(--hos-weekend-head); }

  /* Geblokkeerd-rij: uren die de persoon op een ander planningsbord staat (informatief, niet plan-/sleepbaar) */
  .blocked-row td.meta-cell { background: #F4F3EF; }
  .blocked-tag { display: inline-block; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: #5C574E; background: #E8E6E0; border: 1px solid #C9C4B9; border-radius: 3px; padding: 0 5px; margin-right: 4px; }
  /* Geblokkeerd = arcering, niet donkerte. Zelfde taal als afwezigheid. */
  .blocked-row .subcell.blocked-block {
    display: flex; align-items: center; justify-content: center; cursor: default;
    color: #5C574E; border-radius: 4px; border-left: 3px solid #A8A29A;
    background-color: #E9E7E1;
    background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0 3px, transparent 3px 7px);
  }
  .blocked-row .subcell.blocked-block:hover { filter: none; }
  .blocked-row .day-cell:hover { background: transparent; }

  /* Section header row - stil & strak, oranje alleen als accent links */
  .section-row td {
    background: #FAFAF7; color: #1A1A1A;
    padding: 4px 14px; cursor: pointer; user-select: none;
    border-bottom: 1px solid #E5E5E0;
    border-top: 1px solid #E0E0DA;
    height: 24px;
  }
  .section-row td.sticky-1 {
    position: sticky; left: 0; z-index: 4;
    background: #FAFAF7; color: #1A1A1A;
    font-weight: 700; letter-spacing: 0.4px; font-size: 11.5px;
    text-transform: uppercase;
    box-shadow: inset 3px 0 0 var(--hos-orange-dark);
    border-left: none;
    border-right: none;
    border-top: none !important;
    border-bottom: none !important;
    padding-left: 11px;
  }
  .section-row .section-handle { display: inline-flex; align-items: center; gap: 8px; }
  .section-row .arrow { display: inline-block; transition: transform 0.15s; font-size: 10px; color: #555; }
  .section-row.collapsed .arrow { transform: rotate(-90deg); }
  .section-row .section-count {
    font-weight: 500; font-size: 10px; letter-spacing: 0.3px;
    background: #ECECE5; color: #555;
    padding: 1px 7px; border-radius: 999px;
    text-transform: none;
  }
  .section-row td.section-spacer {
    background: #FAFAF7; padding: 0;
    border-right-color: #EDEDE8;
  }
  .section-row td.section-spacer.weekend { background: var(--hos-weekend); }
  /* Weektotaal direct op de naam-rij (vervangt de aparte 'Per week'-rij) */
  .section-row td.section-weekcell {
    background: #FAFAF7; padding: 0;
    text-align: center; font-weight: 700; font-size: 11px;
    border-right: 1px solid #E0E0DA;
    border-left: 1px solid #EDEDE8;
  }
  .section-row td.section-weekcell.ws-low  { background: #5BBF5B; color: #0E2A0E; }
  .section-row td.section-weekcell.ws-mid  { background: #FFAA00; color: #1F1300; }
  .section-row td.section-weekcell.ws-over { background: #D32F2F; color: #FFFFFF; box-shadow: inset 0 0 0 1px #FF6B6E; }

  /* Sticky top calendar (thead) - charcoal week-band + witte dag-rij */
  thead .head-week-row td {
    position: sticky; top: 0; z-index: 6;
    background: #2C2C2C; color: var(--hos-white);
    height: 22px; padding: 0;
    border-bottom: 1px solid var(--hos-orange-dark);
    border-right: 1px solid rgba(255,255,255,0.08);
  }
  thead .head-week-row td.head-label {
    left: 0; z-index: 7;
    background: #2C2C2C; color: rgba(255,255,255,0.55);
    padding: 4px 14px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,0.10) !important;
  }
  thead .head-week-row td.head-weekcell {
    text-align: center; font-size: 11px; font-weight: 700;
    letter-spacing: 0.3px;
  }
  thead .head-day-row td {
    position: sticky; top: 22px; z-index: 6;
    background: var(--hos-white); color: #1A1A1A;
    height: 28px; padding: 0;
    border-bottom: 1px solid #D9D9D5;
    border-right: 1px solid #ECECE5;
  }
  thead .head-day-row td.head-label {
    left: 0; z-index: 7;
    background: var(--hos-white); color: #666;
    padding: 4px 14px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    white-space: nowrap;
    border-right: 1px solid #D9D9D5 !important;
  }
  thead .head-day-row td.head-day {
    text-align: center; font-size: 10.5px; padding: 2px 0;
    color: #1A1A1A; background: var(--hos-white);
  }
  thead .head-day-row td.head-day .wd { font-size: 9px; color: #888; display: block; line-height: 1; }
  thead .head-day-row td.head-day .dn { font-weight: 700; font-size: 11px; line-height: 1.1; color: #1A1A1A; }
  thead .head-day-row td.head-day.weekend { background: var(--hos-weekend-soft); }
  thead .head-day-row td.head-day.weekend .wd { color: #A8A8A0; }
  thead .head-day-row td.head-day.weekend .dn { color: #555; }
  thead .head-day-row td.head-day.is-today { outline: 2px dashed var(--hos-orange-dark); outline-offset: -2px; }

  /* Werkdruk-strook - neutraal, gekleurde cellen doen het werk */
  .workload-row td {
    background: #F4F4EF;
    padding: 0; height: 22px;
    border-top: none;
    border-bottom: 1px solid #E5E5E0;
  }
  .workload-row td.workload-label {
    position: sticky; left: 0; z-index: 4;
    background: #F4F4EF; color: #888;
    padding: 4px 14px; font-size: 10.5px; font-weight: 500;
    text-transform: none; letter-spacing: 0;
    white-space: nowrap;
    border-right: 1px solid #E0E0DA !important;
    box-shadow: inset 3px 0 0 var(--hos-orange-dark);
    border-left: none;
    border-top: none !important;
    border-bottom: none !important;
    padding-left: 11px;
  }
  .workload-row td.workload-label .wl-icon { display: none; }
  .workload-row td.workload-cell {
    text-align: center; font-size: 11px; font-weight: 700;
    border-right: 1px solid #E5E5E0;
  }
  /* Werkdruk kleur-classes - specificity .workload-row td.ws-X om bg-override te winnen */
  .workload-row td.ws-empty { background: #F4F4EF; color: #C8C7C0; }
  .workload-row td.ws-low   { background: #5BBF5B; color: #0E2A0E; }
  /* Gradatie: rustiger groen bij lage bezetting, vol groen richting 8u */
  .workload-row td.ws-low.ws-p25 { background: #D8EED8; color: #1E4620; }
  .workload-row td.ws-low.ws-p50 { background: #B5E0B5; color: #173A19; }
  .workload-row td.ws-low.ws-p75 { background: #8CCF8C; color: #11300F; }
  .workload-row td.ws-mid   { background: #FFAA00; color: #1F1300; }
  .workload-row td.ws-over  { background: #D32F2F; color: #FFFFFF; box-shadow: inset 0 0 0 1px #FF6B6E; }
  /* Algemene legend pills (buiten workload-row) gebruiken zelfde kleuren */
  .legend-pill.ws-low   { background: #5BBF5B; color: #0E2A0E; border-color: #5BBF5B; }
  .legend-pill.ws-mid   { background: #FFAA00; color: #1F1300; border-color: #FFAA00; }
  .legend-pill.ws-over  { background: #D32F2F; color: #FFFFFF; border-color: #D32F2F; }

  /* Samenvatting-rij: alle projecten van de persoon samengevoegd per dag (alleen-lezen) */
  .summary-row td { background: #FFFBF6; padding: 0; border-bottom: 2px solid #E5E5E0; vertical-align: top; }
  .summary-row td.summary-label {
    position: sticky; left: 0; z-index: 4;
    background: #FFFBF6; color: var(--hos-orange-dark);
    padding: 6px 14px 6px 11px; font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap;
    border-right: 1px solid #E0E0DA !important;
    box-shadow: inset 3px 0 0 var(--hos-orange-dark);
    vertical-align: middle;
    cursor: pointer; user-select: none;
  }
  .summary-row td.summary-label:hover { background: var(--hos-orange-soft); }
  /* Eigen pijl, los van die naast de naam: hiermee klap je alleen de samenvatting in. */
  .summary-row .summary-handle { display: inline-flex; align-items: center; gap: 7px; }
  .summary-row .summary-handle .arrow {
    display: inline-block; font-size: 10px; color: var(--hos-orange-dark);
    transition: transform 0.15s;
  }
  .summary-row.collapsed .summary-handle .arrow { transform: rotate(-90deg); }
  /* Je eigen samenvatting: klein merkje in het label, verder niets extra's in de dagcellen. */
  .summary-row .summary-you {
    display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 9px;
    background: var(--hos-orange-dark); color: #fff; font-size: 9px; font-weight: 800;
    letter-spacing: 0.4px; text-transform: uppercase;
  }
  /* Ingeklapt: alleen het strookje met de pijl blijft over. */
  .summary-row.collapsed td { height: 20px; }
  .summary-row.collapsed td.summary-label { padding-top: 2px; padding-bottom: 2px; }
  .summary-row td.summary-cell { border-right: 1px solid #EFEDE8; }
  .summary-row td.summary-cell.weekend { background: var(--hos-weekend); }
  .sum-stack { display: flex; flex-direction: column; gap: 2px; padding: 2px 0; min-height: 30px; }
  /* Twee regels: opdrachtgever boven, uren + project/actie eronder. Daarom kolom-layout
     en een hogere minimumhoogte dan de projectrijen (daar staat de klant al in de meta-kolom). */
  /* Krap gehouden: elke pixel marge/padding is een teken minder van de klantnaam.
     margin 1 + rail 2 + padding 3 laat op 40px ~30px tekst over i.p.v. 23px. */
  .sum-blk {
    flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center;
    margin: 0 1px; padding: 1px 3px; border-radius: 3px;
    height: calc(var(--h, 28) * 1px);
    font-size: 10px; font-weight: 600; overflow: hidden;
    box-sizing: border-box; cursor: default;
  }
  .sum-blk .sum-cli {
    font-size: 8.5px; font-weight: 800; letter-spacing: 0; text-transform: uppercase;
    opacity: 0.82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15;
  }
  .sum-blk .sum-line2 { display: flex; align-items: baseline; gap: 3px; line-height: 1.15; min-width: 0; }
  .sum-blk .sum-hrs { flex: 0 0 auto; font-weight: 800; }
  .sum-blk .sum-txt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Per-section week-row (Wk 19 - mei, etc.) - zwart/wit, boven de dag-rij */
  .section-weekrow td {
    background: var(--hos-black); color: var(--hos-white);
    padding: 0; height: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }
  .section-weekrow td.section-weekrow-label {
    position: sticky; left: 0; z-index: 4;
    background: var(--hos-black); color: rgba(255,255,255,0.55);
    padding: 4px 14px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    white-space: nowrap;
    border-right: 2px solid var(--hos-orange-dark) !important;
  }
  .section-weekrow td.section-weekcell {
    text-align: center; font-size: 11px; font-weight: 700;
    letter-spacing: 0.3px;
    border-right: 1px solid rgba(255,255,255,0.10);
  }

  /* Per-section day-row (dag + datum, geen weeknummer) - zwart/wit tapje */
  .section-dayrow td {
    background: var(--hos-black);
    padding: 0; height: 30px;
    border-bottom: 1px solid var(--hos-black);
  }
  .section-dayrow td.section-dayrow-label {
    position: sticky; left: 0; z-index: 4;
    background: var(--hos-black); color: var(--hos-white);
    padding: 4px 14px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    white-space: nowrap;
    border-right: 2px solid var(--hos-orange-dark) !important;
  }
  .section-dayrow td.section-day {
    text-align: center; font-size: 10.5px; padding: 2px 0;
    color: var(--hos-white); background: var(--hos-black);
    border-right-color: rgba(255,255,255,0.10);
  }
  .section-dayrow td.section-day .wd { font-size: 9px; color: rgba(255,255,255,0.55); display: block; line-height: 1; }
  .section-dayrow td.section-day .dn { font-weight: 700; font-size: 11px; line-height: 1.1; color: var(--hos-white); }
  .section-dayrow td.section-day.weekend { background: #1F1F1F; }
  .section-dayrow td.section-day.is-today { outline: 2px dashed var(--hos-orange-dark); outline-offset: -2px; }

  /* Per-day werkdruk cellen (1 cel per dag, smal) */
  .workload-row td.workload-cell-day {
    text-align: center; font-size: 10px; font-weight: 700;
    border-right: 1px solid #E5E5E0;
    overflow: hidden;
  }
  .workload-row.workload-weekly td { border-top: 1px solid #E5E5E0; }
  .workload-row.workload-weekly td.workload-label { font-size: 10px; }

  /* Per-section column header row */
  .subhead-row td {
    background: var(--hos-grey-bg); color: var(--hos-grey);
    font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase; padding: 5px 8px;
    border-bottom: 1px solid var(--hos-grey-line);
    white-space: nowrap;
  }
  .subhead-row td.sticky-1,
  .subhead-row td.col-pers2, .subhead-row td.col-klant, .subhead-row td.col-project,
  .subhead-row td.col-label, .subhead-row td.col-fase, .subhead-row td.col-producer,
  .subhead-row td.col-notes,
  .subhead-row td.col-open { background: var(--hos-grey-bg); }
  .subhead-row td.subhead-spacer { padding: 0; }
  .subhead-row td.subhead-spacer.weekend { background: var(--hos-weekend); }
  /* De kolomkop-rij is tegelijk het handvat voor de projectregels eronder. */
  .subhead-row td { cursor: pointer; user-select: none; }
  #grid-wrapper .subhead-row td:hover { background: var(--hos-orange-soft); }
  .subhead-row .proj-handle { flex: 0 0 auto; display: inline-flex; align-items: center; margin-right: 5px; }
  .subhead-row .proj-handle .arrow {
    display: inline-block; font-size: 10px; color: var(--hos-orange-dark); transition: transform 0.15s;
  }
  .subhead-row.collapsed .proj-handle .arrow { transform: rotate(-90deg); }
  /* Dicht: de rij is nog steeds de enige manier om weer open te klappen, dus iets nadrukkelijker. */
  #grid-wrapper .subhead-row.collapsed td { border-bottom: 1px solid var(--hos-grey-300); }
  /* De naam-rij is alleen nog kop + weektotalen, geen knop meer. */
  .section-row td { cursor: default; }

  /* Phase pill */
  .phase-pill {
    display: inline-block; padding: 1px 7px; border-radius: 3px;
    font-size: 10.5px; font-weight: 500;
    border: 1px solid var(--hos-grey-line);
  }

  /* Modals */
  .modal-bg { background: rgba(47,47,47,0.45); }
  .modal-bg.hidden { display: none; }
  .modal-card {
    background: var(--hos-white); border-radius: 6px;
    border-top: 4px solid var(--hos-orange-dark);
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  }
  .modal-card h2 { color: var(--hos-black); font-weight: 600; margin-bottom: 4px; }

  /* Forms */
  input, select, textarea {
    border: 1px solid var(--hos-grey-line); padding: 6px 9px; border-radius: 4px;
    width: 100%; font-size: 13px; background: var(--hos-white);
    font-family: inherit; color: var(--hos-black);
  }
  input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--hos-orange-dark); outline-offset: -1px; border-color: var(--hos-orange-dark);
  }
  label {
    display: block; font-size: 11px; font-weight: 600; margin-bottom: 3px; margin-top: 10px;
    color: var(--hos-grey); text-transform: uppercase; letter-spacing: 0.4px;
  }

  .btn {
    padding: 7px 14px; border-radius: 4px; cursor: pointer; font-size: 13px;
    border: 1px solid transparent; font-weight: 600; font-family: inherit;
    transition: background-color 0.12s, color 0.12s, border-color 0.12s;
    line-height: 1.2;
  }
  .btn-primary { background: var(--hos-orange-dark); color: var(--hos-white); }
  .btn-primary:hover { background: #E04F00; }
  .btn-secondary {
    background: var(--hos-white); color: var(--hos-black);
    border-color: var(--hos-grey-line);
  }
  .btn-secondary:hover { background: var(--hos-grey-bg); border-color: var(--hos-grey-300); }
  .btn-ghost {
    background: transparent; color: var(--hos-white);
    border-color: rgba(255,255,255,0.25);
  }
  .btn-ghost:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.45); }
  .btn-danger { background: #B83A1A; color: var(--hos-white); }
  .btn-danger:hover { background: #94290E; }

  .filter-bar {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding: 10px 0 14px;
  }
  .filter-bar select { width: auto; min-width: 140px; padding-right: 28px; font-size: 12px; }
  .filter-bar .filter-label {
    font-size: 11px; font-weight: 600; color: var(--hos-grey);
    text-transform: uppercase; letter-spacing: 0.4px;
  }

  .legend-pill {
    padding: 3px 10px; border-radius: 999px; font-size: 11px;
    display: inline-block; font-weight: 500;
    border: 1px solid var(--hos-grey-line);
  }
  .legend-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
                padding: 12px; background: var(--hos-grey-bg); border-radius: 6px;
                margin-top: 14px; font-size: 11px; }
  .legend-bar .legend-title {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--hos-grey); margin-right: 4px;
  }

  .grid-wrapper {
    background: var(--hos-white);
    border: 1px solid var(--hos-grey-line);
    border-radius: 6px; overflow: auto; max-height: 78vh;
  }

  .drawer { background: var(--hos-white); box-shadow: -8px 0 32px rgba(0,0,0,0.15);
            border-left: 4px solid var(--hos-orange-dark); }
  .project-card { border: 1px solid var(--hos-grey-line); border-radius: 6px;
                  padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
  .project-card:hover { border-color: var(--hos-orange-dark); background: var(--hos-orange-soft); }
  .filter-chip {
    padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
    border: 1px solid var(--hos-grey-line); background: var(--hos-white);
    color: var(--hos-black); cursor: pointer;
  }
  .filter-chip.active { background: var(--hos-orange-dark); color: var(--hos-white); border-color: var(--hos-orange-dark); }

  .text-muted { color: var(--hos-grey); }
  .view-range { font-size: 11px; color: var(--hos-grey); margin-left: auto; }
  .truncate-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ============ Planning Project view ============ */
  .hos-pageview[hidden] { display: none; }

  /* WoW fase-kleuren — lichte tint + gekleurde rail links + donkere tekst uit dezelfde familie.
     Verzadigd groen/oranje/rood is voorbehouden aan de UREN; fases mogen die kleuren niet lenen. */
  .wow-ophalen   { background: #EBEBE8; color: #4B4841; border-color: #9E9A93; }
  .wow-begrijpen { background: #DFF1E7; color: #16624A; border-color: #12946A; }
  .wow-bepalen   { background: #DEEBF4; color: #1B4C68; border-color: #2A7CA8; }
  .wow-bouwen    { background: #FAE4E7; color: #7B2735; border-color: #C7566A; }
  .wow-pre       { background: #FCEDF0; color: #7E3446; border-color: #E09FAC; }
  .wow-post      { background: #F5E1E4; color: #6A2130; border-color: #A2455A; }
  .wow-bewegen   { background: #F6EEDA; color: #5F4E17; border-color: #C9A63C; }
  /* In de legenda dragen de pillen dezelfde rail als de blokjes in het raster. */
  .legend-pill.wow-ophalen, .legend-pill.wow-begrijpen, .legend-pill.wow-bepalen,
  .legend-pill.wow-bouwen, .legend-pill.wow-pre, .legend-pill.wow-post,
  .legend-pill.wow-bewegen { border-left-width: 3px; border-radius: 4px; font-weight: 600; }

  /* ============ Planning Project (Optie A) ============ */
  /* Klant-sectie balk */
  /* Klantbalk = navigatie, geen inhoud. Daarom een rij met een accentstreep i.p.v. een
     volvlak oranje blok: dicht is de streep grijs, open kleurt hij oranje mee. */
  .client-section { margin-bottom: 0; }
  .client-header {
    background: var(--hos-white); color: #1F1E1C;
    padding: 8px 14px; cursor: pointer; user-select: none;
    font-weight: 700; letter-spacing: 0.06em; font-size: 12.5px;
    text-transform: uppercase;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--hos-grey-line);
    box-shadow: inset 3px 0 0 var(--hos-grey-300);
    transition: background 0.12s, box-shadow 0.12s, color 0.12s;
  }
  .client-header:hover { background: var(--hos-orange-soft); }
  .client-header.open { box-shadow: inset 3px 0 0 var(--hos-orange-dark); color: var(--hos-orange-dark); background: #FFFCFA; }
  .client-header .arrow { display: inline-block; transition: transform 0.15s; font-size: 10px; color: var(--hos-grey-300); }
  .client-header.open .arrow { color: var(--hos-orange-dark); }
  .client-header .section-count {
    font-weight: 500; font-size: 10.5px; letter-spacing: 0;
    background: var(--hos-grey-bg); color: var(--hos-grey);
    padding: 1px 8px; border-radius: 999px;
    text-transform: none; margin-left: auto;
    font-variant-numeric: tabular-nums;
  }
  .client-body { margin: 0 0 6px 0; padding-left: 0; }

  /* Project-sectie balk binnen klant */
  .proj-section { margin-bottom: 0; }
  .proj-section-header {
    background: var(--hos-white); color: var(--hos-black);
    padding: 7px 12px; cursor: pointer; user-select: none;
    margin-left: 14px;
    box-shadow: inset 2px 0 0 #E4E0D9;
    border-bottom: 1px solid #F0EEE9;
    font-weight: 600; font-size: 13px;
    display: flex; align-items: center; gap: 9px;
    transition: background 0.12s, box-shadow 0.12s;
  }
  .proj-section-header:hover { background: var(--hos-orange-soft); }
  .proj-section-header.open { box-shadow: inset 2px 0 0 var(--hos-orange-dark); }
  .proj-section-header .arrow { color: var(--hos-grey-300); font-size: 10px; }
  .proj-section-header.open .arrow { color: var(--hos-orange-dark); }
  .proj-section-header .proj-status {
    font-weight: 500; font-size: 10.5px; color: var(--hos-grey);
    text-transform: capitalize;
    background: none; padding: 0; border-radius: 0; margin-left: auto;
  }
  .proj-section-header .proj-fase {
    font-weight: 700; font-size: 10px;
    padding: 2px 8px; border-radius: 999px; margin-left: 8px;
    border: 1px solid transparent; border-left-width: 3px;
  }

  /* Detail van uitgeklapt project */
  .proj-detail {
    border: 1px solid var(--hos-grey-line); border-radius: 4px;
    margin: 6px 0 14px 0; overflow: hidden; background: var(--hos-white);
  }
  .proj-detail-toolbar {
    padding: 8px 12px; background: var(--hos-grey-bg);
    border-bottom: 1px solid var(--hos-grey-line);
    display: flex; gap: 6px;
  }

  /* Elke projecttijdlijn is één kijkvenster met dezelfde opzet als het teamplanning-grid:
     de horizontale scrollbar zit onderaan de box (dus altijd binnen bereik, ook nu de
     tijdlijn zes maanden breed is), de week/dag-header blijft boven staan en de rolkolom
     links. Daarvoor moet de box zelf de scroll-container zijn: vandaar de max-height.
     De accordeon eromheen scrollt met de pagina mee, zie #proj-grid-wrapper hieronder. */
  .proj-planning-area { overflow: auto; max-height: 62vh; background: var(--hos-white); overscroll-behavior-x: contain; }
  #proj-grid-wrapper { overflow: visible; max-height: none; }

  .proj-plan-table thead .week-row th:not(.role-col-corner) { position: sticky; top: 0; z-index: 6; }
  .proj-plan-table thead .day-row th:not(.role-col-corner) { position: sticky; top: 26px; z-index: 6; }
  /* Eerste kolom bevriezen. Sticky cellen moeten een DEKKENDE achtergrond hebben, anders
     schijnen de dagcellen eronder door; die staat op elk van deze regels al ingesteld. */
  .proj-plan-table th.role-col-corner { position: sticky; left: 0; top: 0; z-index: 8; }
  /* De hoekcel van de dagrij zakt onder die van de weekrij (26px hoog). */
  .proj-plan-table th.role-col-corner-dag { top: 26px; height: 38px; }
  .proj-plan-table td.phase-band-label,
  .proj-plan-table .role-row td.role-cell,
  .proj-plan-table tr.wl-row td.wl-name-cell { position: sticky; left: 0; z-index: 4; }
  /* Volle-breedte scheidingsrij: de CEL kan niet sticky (die is net zo breed als zijn rij en
     heeft dus geen ruimte om te schuiven), dus schuift de INHOUD mee met de scroll. */
  .proj-plan-table tr.wl-sep-row td.wl-sep .wl-sep-inner {
    position: sticky; left: 12px; display: inline-flex; align-items: center; white-space: nowrap;
  }
  /* float:right werkt niet binnen een flex-container én zou de link tienduizend pixels naar
     rechts duwen; naast het label is hij nu juist altijd zichtbaar. */
  .proj-plan-table tr.wl-sep-row td.wl-sep .wl-restore { float: none; margin-left: 14px; }

  /* Planning tabel: weken+dagen boven, rollen als rijen */
  /* Zelfde aanpak als het teamplanning-grid (zie .grid-table): de kolombreedte komt UITSLUITEND
     uit het <colgroup>. Zonder table-layout:fixed herberekent de browser de breedtes naar rato
     van de inhoud, waardoor de bevroren 'Rol'-kolom en de dagkoppen uit elkaar gingen lopen
     zodra je horizontaal scrolde — en per machine/lettertype net iets anders. */
  .proj-plan-table { border-collapse: separate; border-spacing: 0; font-size: 11.5px;
                     table-layout: fixed;
                     width: calc(200px + var(--pp-days, 182) * 56px); }
  .proj-plan-table col.pp-role { width: 200px; }
  .proj-plan-table col.pp-day  { width: 56px; }
  .proj-plan-table th, .proj-plan-table td {
    border-right: 1px solid var(--hos-grey-line);
    border-bottom: 1px solid var(--hos-grey-line);
    padding: 0; box-sizing: border-box; background: var(--hos-white);
  }
  /* Ook hier :not(.role-col-corner): deze selector is specifieker dan die van de
     hoekcel en zette daar z-index 6 op, waardoor de weeklabels eroverheen schoven
     in plaats van eronderdoor. */
  .proj-plan-table thead .week-row th:not(.role-col-corner) {
    background: var(--hos-black); color: var(--hos-white);
    font-size: 11px; font-weight: 700; height: 26px;
    border-right-color: rgba(255,255,255,0.10);
  }
  /* :not(.role-col-corner) is hier essentieel. Zonder die uitzondering raakt deze regel
     ook de bevroren hoekcel van de dagrij, en omdat hij specifieker is dan
     .proj-plan-table th.role-col-corner won hij daarvan: de hoekcel werd 56px in plaats
     van 200px, waardoor de dagkolommen onder de Rol-kolom door schoven. */
  .proj-plan-table thead .day-row th:not(.role-col-corner) {
    width: 56px; min-width: 56px;
    background: var(--hos-grey-bg); color: var(--hos-black);
    font-size: 10.5px; height: 38px; padding: 4px 6px; text-align: center;
  }
  .proj-plan-table thead .day-row th.weekend { background: var(--hos-weekend); }
  .proj-plan-table thead .day-row th.is-today { outline: 2px dashed var(--hos-orange-dark); outline-offset: -2px; }
  .proj-plan-table thead .day-row th .wd { font-size: 9px; color: var(--hos-grey); display: block; line-height: 1; }
  .proj-plan-table thead .day-row th .dn { font-weight: 700; font-size: 11px; line-height: 1.1; }

  .proj-plan-table th.role-col-corner {
    width: 200px; min-width: 200px;
    background: var(--hos-black); color: var(--hos-white);
    font-size: 11px; font-weight: 700; text-align: left; padding: 4px 12px;
    text-transform: uppercase; letter-spacing: 0.5px;
    border-right: 2px solid var(--hos-black) !important;
  }

  /* Rol-rij */
  .proj-plan-table .role-row td.role-cell {
    width: 200px; min-width: 200px; padding: 8px 12px;
    background: var(--hos-grey-bg); cursor: pointer;
    border-right: 2px solid var(--hos-grey-line) !important;
    transition: background 0.12s;
  }
  .proj-plan-table .role-row td.role-cell:hover { background: var(--hos-orange-soft); }
  .proj-plan-table .role-row td.role-cell .rname {
    font-size: 9.5px; font-weight: 700; color: var(--hos-grey);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;
  }
  .proj-plan-table .role-row td.role-cell .rval { font-size: 13px; font-weight: 600; color: var(--hos-black); display: flex; align-items: center; gap: 5px; }
  .proj-plan-table .role-row td.role-cell .rval.empty { color: var(--hos-grey-300); font-style: italic; font-weight: 400; }
  /* Doorklik: de NAAM gaat naar de teamplanning, de rest van de cel blijft de rol-editor openen. */
  .rval-link { border-bottom: 1px dashed var(--hos-orange-dark); color: var(--hos-orange-dark); cursor: pointer; }
  .rval-link:hover { background: var(--hos-orange-soft); }
  .rval-go { font-size: 11px; color: var(--hos-orange-dark); opacity: 0; transition: opacity 0.12s; pointer-events: none; }
  .role-cell:hover .rval-go { opacity: 1; }

  /* Terugweg-balk bij een actief persoon-/projectfilter in de teamplanning */
  .focus-bar {
    display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
    padding: 7px 12px; font-size: 12px;
    background: var(--hos-orange-soft); border: 1px solid var(--hos-orange-100);
    border-radius: 6px; color: var(--hos-black);
  }
  .focus-bar[hidden] { display: none; }
  .focus-bar .focus-what { font-weight: 700; }
  .focus-bar .focus-act { margin-left: auto; cursor: pointer; font-weight: 600; color: var(--hos-orange-dark); text-decoration: underline; }
  .focus-bar .focus-act:hover { color: #E04F00; }

  .proj-plan-table .role-row td.role-day-cell {
    width: 56px; min-width: 56px; height: 38px;
    vertical-align: top; padding: 0;
  }
  .proj-plan-table .role-row td.role-day-cell.weekend { background: var(--hos-weekend); }
  .proj-plan-table .role-row td.role-day-cell.is-today { outline: 2px dashed var(--hos-orange-dark); outline-offset: -2px; }
  .proj-plan-table .role-row td.role-day-cell.empty-role {
    background: repeating-linear-gradient(45deg, #FBFBFA, #FBFBFA 4px, #F4F4F2 4px, #F4F4F2 8px);
    opacity: 0.6;
  }
  .proj-plan-table .role-row td.role-day-cell.inactive {
    background: repeating-linear-gradient(45deg, #F4F4F2, #F4F4F2 4px, #EAE9E5 4px, #EAE9E5 8px);
    cursor: not-allowed;
  }
  .proj-plan-table .role-row td.role-day-cell:not(.inactive):not(.empty-role):hover { background: var(--hos-orange-soft); }
  .proj-plan-table .role-row td.role-day-cell .subcells { display: flex; flex-direction: column; height: 100%; width: 100%; }
  .proj-plan-table .role-row td.role-day-cell .subcell {
    flex: 1 1 25%; min-height: 8px; cursor: crosshair;
    border-bottom: 1px dashed rgba(0,0,0,0.04);
    user-select: none; position: relative;
  }
  .proj-plan-table .role-row td.role-day-cell .subcell:last-child { border-bottom: none; }
  .proj-plan-table .role-row td.role-day-cell .subcell:hover { background: var(--hos-orange-dark); }
  .proj-plan-table .role-row td.role-day-cell .subcell.is-selected {
    background: var(--hos-orange-100) !important; outline: 1px solid var(--hos-orange-dark);
  }
  .proj-plan-table .role-row td.role-day-cell .subcell.has-asg { cursor: grab; }

  /* Fase-balk boven de rollen (WOW-fases als gekleurde blokken over de tijdlijn) */
  .proj-plan-table .phase-band-row td { padding: 0; min-height: 26px; border-bottom: 2px solid var(--hos-black); }
  .proj-plan-table td.phase-band-label {
    width: 200px; min-width: 200px;
    background: var(--hos-black); color: var(--hos-white);
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 4px 12px; border-right: 2px solid var(--hos-black) !important;
  }
  .proj-plan-table td.phase-band-cell {
    text-align: center; font-size: 10px; font-weight: 700;
    letter-spacing: 0.4px; text-transform: uppercase;
    border-right: 1px solid rgba(0,0,0,0.10);
    white-space: nowrap; overflow: hidden; cursor: pointer;
  }
  .proj-plan-table td.phase-band-cell:hover { filter: brightness(1.08); box-shadow: inset 0 0 0 2px rgba(0,0,0,0.25); }
  .proj-plan-table td.phase-band-empty { background: var(--hos-grey-bg); cursor: pointer; }
  .proj-plan-table td.phase-band-empty:hover { background: var(--hos-orange-soft); }
  /* Per-dag fase-cellen (klikbaar voor 'belangrijk moment') */
  .proj-plan-table td.phase-band-day {
    width: 56px; min-width: 56px; text-align: center; vertical-align: middle;
    padding: 0 1px; cursor: pointer; position: relative; overflow: visible;
    border-right: 1px solid rgba(0,0,0,0.08);
  }
  .proj-plan-table td.phase-band-day:hover { box-shadow: inset 0 0 0 2px rgba(0,0,0,0.3); }
  .proj-plan-table td.phase-band-day.phase-band-empty:hover { background: var(--hos-orange-soft); box-shadow: none; }
  .phase-band-name {
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    white-space: nowrap; overflow: visible; pointer-events: none;
    position: absolute; left: 4px; top: 50%; transform: translateY(-50%); z-index: 1;
  }
  .moment-badge {
    display: block; background: #34495E; color: #fff;
    font-size: 9px; font-weight: 800; line-height: 1.3; letter-spacing: 0.2px;
    text-align: center; border-radius: 3px; padding: 1px 3px; margin: 1px 0; box-shadow: 0 0 0 1.5px #34495E;
    position: relative; z-index: 2;
    /* Volledige momentnamen ("Interne voorbereiding") zijn breder dan de dagkolom van 56px. Een lang woord
       breekt binnen de badge af in plaats van er overheen te lopen; de kolom blijft even breed. */
    overflow-wrap: anywhere; hyphens: auto;
  }
  .moment-badge[draggable="true"] { cursor: grab; }
  .moment-badge.dragging { opacity: 0.4; cursor: grabbing; }
  body.view-only .moment-badge[draggable="true"] { cursor: pointer; }
  .proj-plan-table td.phase-band-day.moment-drop-hover { box-shadow: inset 0 0 0 2px var(--hos-orange-dark); }
  /* Belangrijk-moment modal */
  .moment-people { display: grid; grid-template-columns: 1fr; gap: 3px; max-height: 240px; overflow-y: auto; padding: 6px 2px; border: 1px solid var(--hos-grey-line); border-radius: 4px; }
  .moment-person { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; margin: 0; cursor: pointer; padding: 2px 4px; }
  .moment-person input { width: auto; margin: 0; }
  .moment-person .mp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .moment-person .mp-hours { width: 62px; padding: 2px 5px; font-size: 12px; text-align: right; }
  .moment-person .mp-hours:disabled { background: #f0f0ee; color: #bbb; }
  .moment-people-empty { padding: 10px; font-size: 12px; color: var(--hos-grey); }
  .moment-ex-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--hos-grey); margin: 2px 0 4px; }
  .moment-ex-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid var(--hos-grey-line); border-radius: 4px; margin-bottom: 4px; cursor: pointer; }
  .moment-ex-row.editing { border-color: var(--hos-orange-dark); background: var(--hos-orange-soft); }
  .moment-ex-row:hover { background: var(--hos-orange-soft); }
  .moment-ex-code { display: inline-block; min-width: 26px; text-align: center; background: #34495E; color: #fff; font-size: 10px; font-weight: 800; border-radius: 3px; padding: 1px 4px; }
  .moment-ex-name { flex: 1; font-size: 12px; color: var(--hos-black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .moment-ex-del { background: none; border: none; color: var(--hos-grey); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
  .moment-ex-del:hover { color: #D32F2F; }

  /* Werkdruk per persoon — rijen onderaan dezelfde planningstabel (vakjes uitgelijnd op de dagen) */
  .proj-plan-table tr.wl-sep-row td.wl-sep {
    background: #3A3A3A; color: var(--hos-white);
    padding: 5px 12px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    border-top: 2px solid var(--hos-orange-dark);
  }
  .proj-plan-table tr.wl-row td.wl-name-cell {
    width: 200px; min-width: 200px; padding: 4px 12px;
    background: var(--hos-grey-bg); font-size: 12px; font-weight: 600;
    border-right: 2px solid var(--hos-grey-line) !important;
  }
  .wl-name-inner { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
  .wl-name-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wl-eye { cursor: pointer; opacity: 0.4; font-size: 12px; flex: none; }
  .wl-row:hover .wl-eye { opacity: 0.7; }
  .wl-eye:hover { opacity: 1 !important; }
  .wl-restore { float: right; text-transform: none; letter-spacing: 0; font-weight: 600; cursor: pointer; opacity: 0.85; }
  .wl-restore:hover { opacity: 1; text-decoration: underline; }
  /* Wit hoofd-oog op de donkere 'Werkdruk per persoon'-balk (toggelt het hele blok) */
  .wl-master-eye { display: inline-block; margin-right: 8px; cursor: pointer; filter: brightness(0) invert(1); opacity: 0.95; vertical-align: -1px; }
  .wl-master-eye.off { opacity: 0.5; }
  .wl-master-eye:hover { opacity: 1; }
  .wl-collapsed-hint { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.7; margin-left: 6px; }
  .proj-plan-table tr.wl-row td.wl-cell2 {
    width: 56px; min-width: 56px; height: 22px;
    text-align: center; font-size: 10px; font-weight: 700;
    background: var(--hos-white);
  }
  .proj-plan-table tr.wl-row td.wl-cell2.ws-empty { background: var(--hos-grey-bg); color: var(--hos-grey-300); }
  .proj-plan-table tr.wl-row td.wl-cell2.ws-low   { background: #5BBF5B; color: #0E2A0E; }
  .proj-plan-table tr.wl-row td.wl-cell2.ws-mid   { background: #FFAA00; color: #1F1300; }
  .proj-plan-table tr.wl-row td.wl-cell2.ws-over  { background: #D32F2F; color: #FFFFFF; }

  .proj-empty-msg { padding: 40px; text-align: center; color: var(--hos-grey); }

  /* ===== Tab: Nog te plannen ===== */
  .teplannen-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 4px 14px; flex-wrap: wrap; }
  .teplannen-title { font-size: 18px; font-weight: 700; color: var(--hos-black); }
  .teplannen-sub { font-size: 12.5px; color: var(--hos-grey); margin-top: 2px; max-width: 580px; }
  .teplannen-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; padding: 4px; }
  .teplannen-empty { padding: 48px; text-align: center; color: var(--hos-grey); border: 1px dashed var(--hos-grey-line); border-radius: 8px; }
  .tp-card {
    border: 1px solid var(--hos-grey-line); border-left: 4px solid var(--hos-orange-dark);
    border-radius: 8px; background: var(--hos-white); padding: 14px 16px;
    display: flex; flex-direction: column; gap: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  .tp-card-main { display: flex; flex-direction: column; gap: 4px; }
  .tp-client { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--hos-orange-dark); }
  .tp-name { font-size: 15px; font-weight: 700; color: var(--hos-black); }
  .tp-missing-row { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
  .tp-missing-label { font-size: 10.5px; font-weight: 600; color: var(--hos-grey); text-transform: uppercase; letter-spacing: 0.3px; margin-right: 2px; }
  .tp-chip { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
  .tp-missing { background: var(--hos-orange-soft); color: #A23C00; border: 1px solid var(--hos-orange-100); }
  .tp-ok { background: #E6F7EE; color: #0B7A43; border: 1px solid #9BE0BC; }
  .tp-card-actions { display: flex; gap: 8px; }
  .tp-card-actions .btn { flex: 1 1 auto; }

  /* ===== Tab: Alle projecten (tijdlijn) ===== */
  .alle-title { font-size: 18px; font-weight: 700; color: var(--hos-black); }
  .alle-sub { font-size: 12.5px; color: var(--hos-grey); }
  .alle-search { font-size: 12px; }
  .alle-table { border-collapse: separate; border-spacing: 0; font-size: 11px; }
  .alle-table td { border-right: 1px solid var(--hos-grey-line); border-bottom: 1px solid var(--hos-grey-line); padding: 0; box-sizing: border-box; background: var(--hos-white); }
  .alle-week-row td { position: sticky; top: 0; z-index: 6; background: var(--hos-black); color: #fff; height: 24px; font-size: 11px; font-weight: 700; text-align: center; letter-spacing: 0.3px; border-right: 1px solid rgba(255,255,255,0.12); }
  .alle-day-row td { position: sticky; top: 24px; z-index: 6; background: var(--hos-grey-bg); color: var(--hos-black); height: 32px; text-align: center; }
  .alle-day-row td.weekend { background: var(--hos-weekend); }
  .alle-day-row td.is-today { outline: 2px dashed var(--hos-orange-dark); outline-offset: -2px; }
  .alle-day { width: 22px; min-width: 22px; max-width: 22px; }
  .alle-day .wd { font-size: 8px; color: var(--hos-grey); display: block; line-height: 1; }
  .alle-day .dn { font-size: 10px; font-weight: 700; line-height: 1.15; }
  .alle-table td.day-week-start { border-left: 2px solid var(--hos-orange-dark) !important; }
  .alle-corner, .alle-corner-2, .alle-meta { width: 240px; min-width: 240px; max-width: 240px; position: sticky; left: 0; }
  .alle-corner { z-index: 7; background: var(--hos-orange-dark); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 12px; text-align: left; border-right: 2px solid var(--hos-black) !important; }
  .alle-corner-2 { z-index: 7; background: var(--hos-grey-bg); border-right: 2px solid var(--hos-grey-line) !important; }
  .alle-meta { z-index: 3; padding: 5px 12px; cursor: pointer; border-right: 2px solid var(--hos-grey-line) !important; }
  .alle-prow:hover .alle-meta { background: var(--hos-orange-soft); }
  .alle-meta .alle-metainner { display: flex; align-items: center; gap: 8px; }
  .alle-meta .alle-text { flex: 1; min-width: 0; }
  .alle-meta .alle-client { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--hos-orange-dark); }
  .alle-meta .alle-name { display: block; font-size: 13px; font-weight: 600; color: var(--hos-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .alle-eye { flex: 0 0 auto; font-size: 14px; line-height: 1; opacity: 0.35; cursor: pointer; padding: 2px; border-radius: 4px; }
  .alle-eye:hover { opacity: 1; background: var(--hos-orange-100); }
  .alle-filter { font-size: 11px; padding: 5px 8px; border: 1px solid var(--hos-grey-line); border-radius: 4px; background: #fff; max-width: 170px; }
  /* Functie-multiselect (vinkjes-dropdown) */
  .alle-multi { position: relative; display: inline-block; }
  .alle-multi-btn { cursor: pointer; text-align: left; min-width: 120px; }
  .alle-multi-btn.active { border-color: var(--hos-orange-dark); color: var(--hos-orange-dark); font-weight: 600; }
  .alle-multi-panel { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; background: #fff; border: 1px solid var(--hos-grey-line); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.14); padding: 6px; min-width: 200px; max-height: 320px; overflow-y: auto; }
  .alle-multi-opt { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 5px 7px; border-radius: 4px; cursor: pointer; }
  .alle-multi-opt:hover { background: var(--hos-orange-soft); }
  .alle-multi-opt input { width: auto; margin: 0; }
  /* Personen-kolom bij actief functie-filter */
  .alle-people-h, .alle-people { width: 150px; min-width: 150px; max-width: 150px; position: sticky; left: 240px; }
  .alle-people-h { z-index: 7; background: var(--hos-orange-dark); color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 4px 10px; text-align: left; border-right: 2px solid var(--hos-black) !important; }
  .alle-people { z-index: 3; background: #FBFBFA; font-size: 11.5px; color: var(--hos-black); padding: 4px 10px; border-right: 2px solid var(--hos-grey-line) !important; white-space: normal; line-height: 1.25; }
  .alle-prow:hover .alle-people { background: var(--hos-orange-soft); }
  .alle-people .ppl-empty { color: var(--hos-grey); }
  /* ===== Algemeen-tabblad ===== */
  .ga-teller { margin: 6px 4px 16px; border: 1px solid var(--hos-grey-line); border-radius: 6px; overflow: hidden; }
  .ga-teller-title { background: var(--hos-grey-bg); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--hos-black); padding: 7px 12px; border-bottom: 1px solid var(--hos-grey-line); }
  .ga-teller table { border-collapse: collapse; width: 100%; }
  .ga-teller th, .ga-teller td { padding: 5px 10px; font-size: 12px; text-align: center; border-bottom: 1px solid #EFEFEA; }
  .ga-teller th { background: #FBFBFA; font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--hos-grey); }
  .ga-teller td.ga-person, .ga-teller th.ga-person { text-align: left; font-weight: 600; }
  .ga-teller td.ga-num-0 { color: #C9C9C4; }
  .ga-teller-empty { padding: 16px; text-align: center; color: var(--hos-grey); font-size: 12px; }
  /* Sub-tabs (Algemeen: Vakantie / Rollen & capaciteit) */
  .ga-subtabs { display: inline-flex; gap: 2px; background: var(--hos-grey-bg); border: 1px solid var(--hos-grey-line); border-radius: 8px; padding: 3px; }
  .ga-subtab { font-size: 12px; font-weight: 600; padding: 6px 14px; border: none; background: transparent; color: var(--hos-grey); border-radius: 6px; cursor: pointer; white-space: nowrap; }
  .ga-subtab:hover { color: var(--hos-black); }
  .ga-subtab.active { background: #fff; color: var(--hos-black); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
  /* Capaciteit-per-persoon paneel (Algemeen) */
  .cap-panel { border: 1px solid var(--hos-grey-line); border-radius: 6px; margin: 0 4px 12px; overflow: hidden; }
  .cap-title { background: var(--hos-grey-bg); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--hos-black); padding: 7px 12px; border-bottom: 1px solid var(--hos-grey-line); }
  .cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; padding: 10px 12px; }
  .cap-item { display: flex; align-items: center; gap: 8px; margin: 0; }
  .cap-item .cap-name { flex: 1; font-size: 12px; font-weight: 600; color: var(--hos-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cap-item .cap-input { width: 64px; padding: 4px 6px; font-size: 12px; text-align: right; }
  /* Team-paneel: capaciteit + rollen per persoon */
  .team-list { padding: 4px 0; }
  .team-row { display: flex; align-items: center; gap: 10px; padding: 5px 12px; border-bottom: 1px solid #EFEFEA; }
  .team-row:last-child { border-bottom: none; }
  .team-name { width: 150px; min-width: 150px; font-size: 12.5px; font-weight: 600; color: var(--hos-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .team-cap { display: inline-flex; align-items: center; gap: 4px; }
  .team-cap .cap-input { width: 52px; padding: 3px 5px; font-size: 12px; text-align: right; }
  .team-cap .team-cap-u { font-size: 10px; color: var(--hos-grey); }
  .team-roles { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
  .role-chip {
    font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
    border: 1px solid var(--hos-grey-line); background: var(--hos-white); color: var(--hos-grey);
    cursor: pointer; transition: all 0.12s; white-space: nowrap;
  }
  .role-chip:hover { border-color: var(--hos-orange-dark); color: var(--hos-black); }
  .role-chip.on { background: var(--hos-orange-dark); color: var(--hos-white); border-color: var(--hos-orange-dark); }
  .ga-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 4px 10px; }
  .ga-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--hos-black); }
  .ga-legend-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
  .ga-tl-table { border-collapse: separate; border-spacing: 0; }
  .ga-tl-name { width: 200px; min-width: 200px; max-width: 200px; position: sticky; left: 0; z-index: 3; background: #FAFAF7; font-size: 12.5px; font-weight: 600; padding: 4px 12px; border-right: 2px solid var(--hos-grey-line) !important; box-shadow: inset 3px 0 0 var(--hos-orange-dark); }
  .ga-tl-row:hover .ga-tl-name { background: var(--hos-orange-soft); }
  .ga-tl-day { width: 26px; min-width: 26px; height: 30px; border-right: 1px solid #EDEDE8; border-bottom: 1px solid #EDEDE8; cursor: crosshair; padding: 0; }
  .ga-tl-day.weekend { background: var(--hos-weekend); }
  .ga-tl-day.is-today { outline: 2px dashed var(--hos-orange-dark); outline-offset: -2px; }
  .ga-tl-day.day-week-start { border-left: 2px solid var(--hos-grey-line); }
  .ga-tl-day.is-selected { background: var(--hos-orange-100) !important; outline: 1px solid var(--hos-orange-dark); outline-offset: -1px; }
  .ga-tl-day.ga-filled { cursor: grab; }
  .ga-tl-day.move-target { outline: 2px dashed var(--hos-orange-dark); outline-offset: -2px; }
  /* Kleur komt inline mee uit GA_TYPES (lichte tint + arcering), dus hier geen vaste tekstkleur. */
  .ga-tl-day .ga-fill { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; font-size: 7.5px; font-weight: 800; }
  .alle-prow { height: 34px; }
  .alle-block { text-align: center; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; }
  .alle-gap { background: repeating-linear-gradient(45deg, #FBFBFA, #FBFBFA 4px, #F4F4F2 4px, #F4F4F2 8px); }
  .alle-empty { padding: 40px; text-align: center; color: var(--hos-grey); }

  /* ===== Rol-planning: persoon-secties ===== */
  .alle-table tr.role-sec-row td { border-bottom: 1px solid var(--hos-grey-line); }
  .alle-table td.role-sec-label { position: sticky; left: 0; z-index: 4; background: var(--hos-orange-dark); color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; font-size: 12px; padding: 6px 12px; border-right: 2px solid var(--hos-black) !important; white-space: nowrap; }
  .alle-table td.role-sec-cell { background: #FAFAF7; }
  .alle-table td.role-sec-cell.weekend { background: var(--hos-weekend); }
  .role-sec-count { font-weight: 500; font-size: 10px; background: rgba(255,255,255,0.22); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }

  /* Volle-breedte scheidingsbalken (rolgroep in het gecombineerde tabblad, klantbalk in Alle
     projecten). De CEL kan niet sticky: die is net zo breed als zijn rij en heeft dus geen
     ruimte om te schuiven — het label scrolde daardoor gewoon uit beeld terwijl Opdrachtgever,
     Project en Fase wel bleven staan. Sticky moet dus op de INHOUD. Zelfde truc als
     .proj-plan-table .wl-sep-inner. */
  .row-sep-inner {
    position: sticky; left: 14px; display: inline-flex; align-items: center;
    white-space: nowrap; z-index: 1;
  }

  /* ===== Veld-zichtbaarheid (oogje) ===== */
  /* Kolommen worden NIET verwijderd (dat breekt de colspan-koppen), maar
     ingeklapt naar breedte 0 zodat de 9 kolomsloten en de dag-uitlijning blijven kloppen. */
  #grid-wrapper.hide-pers2 .col-pers2,
  #grid-wrapper.hide-klant .col-klant,
  #grid-wrapper.hide-project .col-project,
  #grid-wrapper.hide-label .col-label,
  #grid-wrapper.hide-fase .col-fase,
  #grid-wrapper.hide-producer .col-producer,
  #grid-wrapper.hide-notes .col-notes {
    width: 0 !important; min-width: 0 !important; max-width: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
    border-left-width: 0 !important; border-right-width: 0 !important;
    font-size: 0 !important; line-height: 0 !important;
    overflow: hidden !important; white-space: nowrap !important;
  }
  /* Child-elementen met een eigen font-size (fase-pill, oog-icoon, label-span)
     volledig verbergen zodat de kolom echt naar breedte 0 inklapt. */
  #grid-wrapper.hide-pers2 .col-pers2 > *,
  #grid-wrapper.hide-klant .col-klant > *,
  #grid-wrapper.hide-project .col-project > *,
  #grid-wrapper.hide-label .col-label > *,
  #grid-wrapper.hide-fase .col-fase > *,
  #grid-wrapper.hide-producer .col-producer > *,
  #grid-wrapper.hide-notes .col-notes > * { display: none !important; }

  /* Oogje in de kolomkop (Photoshop-stijl: klik = verbergen) */
  /* "Welke dag is het vandaag?" moet je in één oogopslag zien, ook op een scherm waar de
     lichte tinten wegvallen. In elke dag-koprij krijgt vandaag daarom een vol oranje vlak. */
  thead .head-day-row td.head-day.is-today,
  thead .day-row th.is-today,
  .alle-day-row td.is-today,
  .proj-plan-table thead .day-row th.is-today {
    background: var(--hos-orange-dark) !important; outline: none !important;
  }
  thead .head-day-row td.head-day.is-today .wd, thead .day-row th.is-today .wd,
  .alle-day-row td.is-today .wd, .proj-plan-table thead .day-row th.is-today .wd { color: rgba(255,255,255,0.8) !important; }
  thead .head-day-row td.head-day.is-today .dn, thead .day-row th.is-today .dn,
  .alle-day-row td.is-today .dn, .proj-plan-table thead .day-row th.is-today .dn { color: #fff !important; }

  .subhead-row td .colhead { display: flex; align-items: center; gap: 5px; justify-content: space-between; }
  .subhead-row td.col-label { padding-left: 5px; padding-right: 5px; }
  .subhead-row td.col-label .colhead { justify-content: center; gap: 3px; }
  .subhead-row td.col-label .colhead-lbl { font-size: 9px; letter-spacing: 0.2px; }
  .colhead-lbl { overflow: hidden; text-overflow: ellipsis; }
  .col-eye {
    cursor: pointer; font-size: 11px; line-height: 1; opacity: 0.3;
    flex: 0 0 auto; user-select: none;
  }
  .subhead-row td:hover .col-eye { opacity: 0.65; }
  .col-eye:hover { opacity: 1 !important; }

  .fieldvis-wrap { position: relative; display: inline-block; }
  .fieldvis-btn { display: inline-flex; align-items: center; gap: 6px; }
  .fieldvis-pop {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    background: var(--hos-white); border: 1px solid var(--hos-grey-line);
    border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    padding: 8px; min-width: 190px;
  }
  .fieldvis-pop.hidden { display: none; }
  .fieldvis-pop .fv-title {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--hos-grey); padding: 2px 6px 6px;
  }
  .fieldvis-pop label {
    display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 6px;
    font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0;
    color: var(--hos-black); border-radius: 4px; cursor: pointer;
  }
  .fieldvis-pop label:hover { background: var(--hos-orange-soft); }
  .fieldvis-pop input[type=checkbox] { width: auto; margin: 0; }

  /* ===== Admin-tab: compacte gebruikerslijst ===== */
  .admin-legend { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 2px 0 12px; font-size: 11.5px; color: var(--hos-grey); }
  .admin-legend b { color: var(--hos-orange-dark); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; margin-right: 5px; }
  .admin-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
  .admin-table th { text-align: left; padding: 4px 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--hos-grey); border-bottom: 2px solid var(--hos-grey-line); }
  .admin-table td { padding: 3px 8px; border-bottom: 1px solid var(--hos-grey-line); vertical-align: middle; }
  .admin-table tbody tr:not(.adm-group):hover td { background: var(--hos-grey-bg); }
  .admin-table tr.adm-group td { background: var(--hos-white); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--hos-orange-dark); padding: 14px 8px 4px; border-bottom: 2px solid var(--hos-grey-line); }
  .admin-table tr.adm-group td span { color: var(--hos-grey); font-weight: 600; }
  .admin-table select { padding: 2px 4px; font-size: 12px; border: 1px solid var(--hos-grey-line); border-radius: 4px; background: var(--hos-white); }
  .admin-table select[data-field='team'] { min-width: 130px; }
  .admin-table select[data-field='rol'] { min-width: 96px; }
  .admin-table input { padding: 2px 6px; font-size: 12px; border: 1px solid var(--hos-grey-line); border-radius: 4px; }
  .adm-naam { font-weight: 700; }
  .adm-mail { color: var(--hos-grey); font-size: 11.5px; }
  .adm-chip { display: inline-block; white-space: nowrap; margin: 1px 3px 1px 0; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--hos-grey-line); background: transparent; color: var(--hos-grey); }
  .adm-chip:hover { border-color: var(--hos-orange-dark); color: var(--hos-black); }
  .adm-chip.on { background: var(--hos-orange-dark); border-color: var(--hos-orange-dark); color: #fff; }
  .adm-icon { background: none; border: none; cursor: pointer; font-size: 13px; line-height: 1; color: var(--hos-grey); padding: 3px 5px; border-radius: 4px; }
  .adm-icon:hover { color: var(--hos-orange-dark); background: var(--hos-grey-bg); }
  .adm-icon.adm-del:hover { color: #D32F2F; }
  .adm-icon[disabled] { opacity: 0.3; cursor: default; }
  /* ===== Inlogscherm + notificatie ===== */
  .login-overlay { position: fixed; inset: 0; z-index: 200; background: var(--hos-black); display: flex; align-items: center; justify-content: center; }
  .login-overlay.hidden { display: none; }
  /* Wachtwoord tonen/verbergen (oogje) */
  .pw-wrap { position: relative; }
  .pw-wrap input { padding-right: 38px; }
  .pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; margin: 0; background: none; border: none; cursor: pointer; color: #8a8a8a; }
  .pw-eye:hover { color: var(--hos-black); }
  .pw-eye.on { color: var(--hos-orange-dark); }
  .pw-eye svg { width: 18px; height: 18px; display: block; }
  .lead-badge { display: inline-block; background: var(--hos-orange-dark); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 0.5px; border-radius: 3px; padding: 1px 4px; vertical-align: middle; }
  .role-badge { display: inline-block; background: #E8E8E3; color: #666; font-size: 9px; font-weight: 700; letter-spacing: 0.3px; border-radius: 3px; padding: 1px 4px; vertical-align: middle; }
  .login-card { background: #fff; border-radius: 10px; border-top: 4px solid var(--hos-orange-dark); padding: 28px; width: 360px; max-width: 92vw; box-shadow: 0 18px 50px rgba(0,0,0,0.4); }
  .login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
  .login-title { font-weight: 700; font-size: 16px; color: var(--hos-black); }
  .login-sub { font-size: 11px; color: var(--hos-orange-dark); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
  .login-card label { margin-top: 12px; }
  .login-error { background: #FDECEA; color: #B3261E; border: 1px solid #F5C6C2; border-radius: 6px; padding: 8px 10px; font-size: 12px; margin-top: 12px; }
  .login-error.hidden { display: none; }
  .app-toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--hos-black); color: #fff; padding: 9px 16px; border-radius: 999px; font-size: 12px; font-weight: 600; opacity: 0; pointer-events: none; transition: all 0.25s; z-index: 300; }
  .app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* ===== Project-formulier (team + fases) ===== */
  .form-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--hos-grey); margin: 16px 0 8px; border-bottom: 1px solid var(--hos-grey-line); padding-bottom: 5px; }
  .form-section-hint { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--hos-grey-300); margin-left: 6px; }
  .roles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
  .role-field label { margin-top: 0; }
  .role-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0; }
  .role-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--hos-orange-soft); border: 1px solid var(--hos-orange-100); color: var(--hos-black); border-radius: 999px; padding: 2px 4px 2px 9px; font-size: 12px; font-weight: 600; }
  .role-chip button { background: none; border: none; cursor: pointer; color: var(--hos-grey); font-size: 14px; line-height: 1; padding: 0 2px; }
  .role-chip button:hover { color: var(--hos-orange-dark); }
  .chip-input { font-size: 12px; padding: 5px 8px; }
  .phases-grid { display: flex; flex-direction: column; gap: 6px; }
  .phase-row { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 8px; align-items: center; }
  .phase-row .phase-name { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
  .phase-row .phase-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
  .phase-row input { font-size: 12px; padding: 5px 8px; }

  /* Uren per rol & fase */
  .hours-head, .hours-row { display: grid; grid-template-columns: 116px 58px repeat(6, 1fr) 104px; gap: 4px; align-items: center; }
  .hours-head { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--hos-grey); padding: 4px 0 5px; border-bottom: 1px solid var(--hos-grey-line); }
  .hours-head .hours-fase { display: flex; align-items: center; gap: 3px; justify-content: center; }
  .hours-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: 0 0 auto; }
  .hours-row { padding: 2px 0; }
  .hours-role { font-weight: 600; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hours-input { padding: 4px 4px; font-size: 11px; width: 100%; text-align: center; }
  .hours-total-in { font-weight: 700; background: var(--hos-grey-bg); }
  .hours-preview { display: flex; flex-direction: column; gap: 2px; }
  .hours-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--hos-grey-bg); }
  .hours-bar span { display: block; height: 100%; }
  .hours-num { font-size: 9.5px; font-weight: 600; color: var(--hos-grey); text-align: center; }
  .hours-num.hours-over { color: #D32F2F; }
  .hours-muted { color: var(--hos-grey-300); font-size: 10px; text-align: center; }
  .hours-empty { padding: 16px; text-align: center; color: var(--hos-grey); font-size: 12px; border: 1px dashed var(--hos-grey-line); border-radius: 6px; }
  /* Notities alleen voor teamlead/admin: affordance neutraliseren voor de rest */
  body.geen-notities .notes-edit { cursor: default; }
  body.geen-notities .notes-edit:hover { border-color: transparent; background: transparent; }
  body.geen-notities .notes-edit:empty::before { content: ''; }
  /* Alleen-lezen gebruikers: bewerk-affordances verbergen/neutraliseren (zachte vergrendeling) */
  body.geen-projectbeheer [data-action='edit-project'] { display: none !important; }
  body.view-only [data-action='add-moment'] { cursor: default; }
  body.view-only .subcell:not(.has-asg) { cursor: default; }
  /* Planner en kijker: geen plan-cursor in de urenrasters (uren plannen is teamlead/admin) */
  body.geen-urenplanning .subcell:not(.has-asg) { cursor: default; }
  body.geen-urenplanning .subcell:not(.has-asg):hover { background: inherit; }
  body.geen-urenplanning .subcell.has-asg { cursor: pointer; }
  /* Over-8u-markering: rode streep RECHTS, zodat hij niet botst met de fase-rail links. */
  .subcell.has-asg.over-cap { box-shadow: inset -3px 0 0 0 #D32F2F; }
  .sum-blk.over-cap-sum { box-shadow: inset -3px 0 0 0 #D32F2F; }
  .asg-name-fill b { font-weight: 800; }
  /* Algemeen blok (WERK/PERS/vakantie…): blokkeert de dag, niet plan-/sleepbaar */
  .subcell.ga-block { cursor: default; }
  .subcell.ga-block:hover { filter: none; }