@charset "UTF-8";
/* ==========================================================================
   Bankert Portal · planning.css — module Weekplanning
   ========================================================================== */

.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line)}
.weeknav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.weeknav .label{min-width:150px;text-align:center;line-height:1.15}
.weeknav .label b{font-family:var(--f-display);font-size:20px;display:block}
.weeknav .label small{color:var(--muted);font-size:13px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.legendbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.filters{display:flex;gap:4px;flex-wrap:wrap}
.filters button{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;background:none;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.filters button.on{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
.hint{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.planbox .msg{margin:12px 16px 0}

.gridscroll{overflow-x:auto}
.grid{display:grid;grid-template-columns:232px repeat(7,minmax(128px,1fr));min-width:1140px}
.grid>.head{background:var(--surface);padding:10px 10px 8px;border-bottom:1px solid var(--line-strong);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.grid>.head:first-child{position:sticky;left:0;z-index:3;border-right:1px solid var(--line)}
.grid>.head small{display:block;text-transform:none;letter-spacing:0;font-weight:500}
.dayhead{display:grid}
.dayhead b{font-family:var(--f-display);font-size:24px;color:var(--ink);letter-spacing:0;line-height:1.05}
.grid .dayhead b small{display:inline;font-size:13px;color:var(--muted);margin-left:4px;font-family:var(--f-body)}
.dayhead.weekend{background:var(--weekend)}
.dayhead.today{background:var(--today);box-shadow:inset 0 3px 0 var(--brand-bright)}
.dayhead em{font-style:normal;font-size:11px;color:var(--accent);font-weight:700}
.daytag{display:flex;align-items:center;gap:4px;margin-top:4px;padding:2px 6px;border-radius:5px;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.daytag .i{flex:none}
.daytag.holiday{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
.daytag.holiday.closed{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.daytag.birthday{background:var(--leave-bg);color:var(--leave-fg)}
.fixedblock.holiday{border-style:dashed}

.person{padding:12px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:flex-start;min-width:0;background:var(--surface);position:sticky;left:0;z-index:1;border-right:1px solid var(--line)}
.pinfo{min-width:0;display:grid;gap:2px;flex:1}
.pinfo b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinfo span,.pinfo small{font-size:12.5px;color:var(--muted)}
.pinfo .meter{margin-top:4px;height:5px}

.cell{border-bottom:1px solid var(--line);border-left:1px solid var(--line);padding:6px;display:flex;flex-direction:column;gap:5px;min-height:112px;min-width:0;transition:background .12s}
.cell.weekend{background:var(--weekend)}
.cell.today{background:var(--today)}
.cell.fixed{background:repeating-linear-gradient(135deg,transparent 0 7px,color-mix(in srgb,var(--line) 70%,transparent) 7px 8px)}
.cell.over{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--brand-bright)}
.load{display:flex;justify-content:space-between;align-items:center;min-height:24px;font-size:12px;color:var(--muted)}
.cellmenu>summary{width:24px;height:24px;border-radius:6px;border:1px dashed var(--line-strong);background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;opacity:.55}
.cell:hover .cellmenu>summary,.cellmenu>summary:focus-visible,.cellmenu[open]>summary{opacity:1}
.cellmenu>summary:hover,.cellmenu[open]>summary{border-style:solid;border-color:var(--accent);color:var(--accent)}
.cellmenu>.planmenu-list{position:fixed;z-index:40}
.req-note{display:flex;align-items:center;gap:6px;margin:0 0 12px}
.fixedblock{border-radius:6px;padding:6px 8px;background:var(--surface-2);border:1px solid var(--line);font-size:12px}
.fixedblock span{display:block;font-weight:600}
.fixedblock small{color:var(--muted)}

.event{border-radius:7px;padding:6px 7px 7px;cursor:pointer;display:grid;gap:3px;font-size:12.5px;border:1px solid;user-select:none;min-width:0}
.event.work{background:var(--work-bg);color:var(--work-fg);border-color:color-mix(in srgb,var(--work-edge) 40%,transparent)}
.event.appointment{background:var(--appt-bg);color:var(--appt-fg);border-color:color-mix(in srgb,var(--appt-edge) 40%,transparent)}
.event.leave{background:var(--leave-bg);color:var(--leave-fg);border-color:color-mix(in srgb,var(--leave-edge) 45%,transparent)}
.event:hover{border-color:currentColor}
.event.dragging{opacity:.4}
.event.readonly{cursor:default}
.event strong{font-size:13px;line-height:1.25;overflow-wrap:anywhere;color:var(--ink)}
.emeta{display:flex;align-items:center;gap:4px;font-weight:600}
.emeta .t{flex:1;min-width:0}
.emeta .warnicon{color:var(--danger)}
.grip{border:0;background:none;color:inherit;opacity:.6;cursor:grab;padding:2px;display:grid;place-items:center;touch-action:none;border-radius:4px}
.grip:hover{opacity:1}
.etype{display:flex;align-items:center;gap:5px;font-size:11.5px;opacity:.85}
.grid .empty{grid-column:1/-1}
.planfoot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 16px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line)}
.planfoot span{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Dialogen van de planning */
fieldset.people{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
fieldset.offdays label{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:10px;font-size:14px}
fieldset.offdays select{min-height:36px;padding:6px 8px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface)}
.stafflist{display:grid;padding-top:8px}
.stafflist>div{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.stafflist>div>span{flex:1;min-width:0;display:grid}
.stafflist small{color:var(--muted);font-size:12.5px}
.edittools{display:flex;gap:8px;flex-wrap:wrap;padding-top:4px}

@media (max-width:640px){.weeknav .label{min-width:0;text-align:left}}

/* ---------- Weergaveknoppen: Week / Maand / Kwartaal / Jaar ---------- */
.modetabs{display:inline-flex;gap:2px;margin-top:12px;padding:3px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface)}
.modetabs button{border:0;background:none;border-radius:7px;padding:6px 16px;font:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer}
.modetabs button:hover{color:var(--ink)}
.modetabs button.on{background:var(--accent);color:var(--accent-ink)}

/* ---------- Overzichten (maand / kwartaal / jaar) ---------- */
.ovbox .msg{margin:12px 16px 0}
.ov-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.ov-legend span{display:inline-flex;align-items:center;gap:6px}
.ov-dot{width:10px;height:10px;border-radius:3px;display:inline-block}
/* kleur per bezetting */
.ov-dot.room,.meter.ov-room i,.ov-weeks i.ov-room{background:var(--ok)}
.ov-dot.busy,.meter.ov-busy i,.ov-weeks i.ov-busy{background:var(--leave-edge)}
.ov-dot.full,.meter.ov-full i,.ov-weeks i.ov-full{background:var(--brand-mid)}
.ov-dot.over,.meter.ov-over i,.ov-weeks i.ov-over{background:var(--danger)}
.ov-weeks i.ov-none{background:var(--line)}
.ov-pill.ov-room{background:var(--ok-bg);color:var(--ok)}
.ov-pill.ov-busy{background:var(--leave-bg);color:var(--leave-fg)}
.ov-pill.ov-full{background:var(--accent-soft);color:var(--accent)}
.ov-pill.ov-over{background:var(--danger-bg);color:var(--danger)}
.ov-pill.ov-none{background:var(--surface-2);color:var(--muted)}
.ov-t-busy{color:var(--leave-fg)}.ov-t-full{color:var(--accent)}.ov-t-over{color:var(--danger)}

/* Jaar */
.ov-year{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;padding:16px}
.ov-month{display:grid;gap:6px;text-align:left;font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.ov-month:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.ov-month.now{border-color:var(--brand-bright);box-shadow:inset 0 3px 0 var(--brand-bright)}
.ov-month.past{opacity:.6}
.ov-mhead{display:flex;align-items:center;gap:8px}
.ov-mhead b{font-family:var(--f-display);font-size:19px}
.ov-mhead em{font-style:normal;font-size:11px;font-weight:700;color:var(--accent)}
.ov-mhead .pill{margin-left:auto}
.ov-month strong{font-family:var(--f-display);font-size:34px;line-height:1}
.ov-month strong small{font-size:16px;color:var(--muted);margin-left:2px}
.ov-month>small{color:var(--muted);font-size:12.5px}
.ov-weeks{display:flex;align-items:flex-end;gap:4px;height:28px;margin-top:2px}
.ov-weeks i{flex:1;border-radius:3px 3px 0 0;opacity:.85}

/* Kwartaal */
.ov-quarter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px}
@media (max-width:900px){.ov-quarter{grid-template-columns:minmax(0,1fr)}}
.ov-qcol{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);min-width:0}
.ov-qhead{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;width:100%;text-align:left;font:inherit;color:inherit;background:var(--surface-2);border:0;border-bottom:1px solid var(--line);padding:12px 14px;cursor:pointer}
.ov-qhead:hover b{color:var(--accent)}
.ov-qhead span{display:grid}
.ov-qhead b{font-family:var(--f-display);font-size:19px}
.ov-qhead small{color:var(--muted);font-size:12.5px}
.ov-qhead strong{font-family:var(--f-display);font-size:28px}
.ov-qhead strong small{font-size:14px}
.ov-qhead .meter{grid-column:1/-1}
.ov-wlist{display:grid}
.ov-wrow{display:grid;grid-template-columns:minmax(0,1fr) 80px 46px;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0;border-bottom:1px solid var(--line);padding:9px 14px;cursor:pointer}
.ov-wrow:last-child{border-bottom:0}
.ov-wrow:hover{background:var(--surface-2)}
.ov-wrow.now{box-shadow:inset 3px 0 0 var(--brand-bright);background:var(--today)}
.ov-wrow.past{opacity:.6}
.ov-wlabel{display:grid;min-width:0}
.ov-wlabel small{color:var(--muted);font-size:12px}
.ov-pct{font-weight:700;text-align:right}

/* Maand: medewerkers × weken */
.ov-scroll{overflow-x:auto;padding:16px}
.ov-heat{display:grid;gap:4px;min-width:600px}
.ov-th{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 4px;align-self:end}
.ov-th.wk{display:grid;text-align:left;font:inherit;background:none;border:0;border-radius:8px;cursor:pointer;padding:6px 8px;color:var(--ink)}
.ov-th.wk b{font-size:14px}
.ov-th.wk small{font-size:12px;color:var(--muted);letter-spacing:0;text-transform:none}
.ov-th.wk:hover{background:var(--surface-2)}
.ov-th.wk.now{background:var(--today);box-shadow:inset 0 3px 0 var(--brand-bright)}
.ov-name{display:flex;align-items:center;font-weight:600;padding:0 4px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-name.team{font-family:var(--f-display);font-size:17px;border-top:1px solid var(--line-strong);padding-top:6px}
.ov-cell{display:grid;align-content:center;gap:1px;min-height:52px;border-radius:8px;border:1px solid transparent;font:inherit;color:inherit;text-align:center;cursor:pointer;background:var(--surface-2)}
.ov-cell[tabindex="-1"]{cursor:default}
.ov-cell b{font-size:16px}
.ov-cell small{font-size:11.5px;opacity:.8}
.ov-cell.ov-room{background:var(--ok-bg);color:var(--ok)}
.ov-cell.ov-busy{background:var(--leave-bg);color:var(--leave-fg)}
.ov-cell.ov-full{background:var(--accent-soft);color:var(--accent)}
.ov-cell.ov-over{background:var(--danger-bg);color:var(--danger)}
.ov-cell.ov-none{color:var(--muted)}
.ov-cell[data-action]:hover{border-color:currentColor}

/* Menu "Inplannen" */
.planmenu{position:relative}
.planmenu>summary{list-style:none;cursor:pointer}
.planmenu>summary::-webkit-details-marker{display:none}
.planmenu>summary .chev{font-size:12px;margin-left:2px;transition:transform .15s}
.planmenu[open]>summary .chev{transform:rotate(180deg)}
.planmenu[data-disabled]>summary{opacity:.5;cursor:not-allowed}
.planmenu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:270px;display:grid;padding:6px;background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow)}
.planmenu-list button{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;font:inherit;color:var(--ink);background:none;border:0;border-radius:8px;padding:9px 10px;cursor:pointer}
.planmenu-list button:hover,.planmenu-list button:focus-visible{background:var(--accent-soft)}
.planmenu-list .i{margin-top:2px;color:var(--accent);flex:none}
.planmenu-list span{display:grid}
.planmenu-list small{color:var(--muted);font-size:12.5px}
@media (max-width:640px){.planmenu-list{left:0;right:auto}}

/* Vaardigheden en liftbemanning */
fieldset.skills{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
fieldset.skills .check span,.check.wash span{display:grid;line-height:1.25}
fieldset.skills small,.check.wash small{color:var(--muted);font-size:12.5px;font-weight:400}
.skilltags{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.skilltag{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
fieldset.crew{display:grid;gap:12px}
fieldset.crew .f small{font-weight:400;color:var(--muted)}
.crewsum{list-style:none;margin:0;padding:10px 12px;border-radius:10px;background:var(--surface-2);display:grid;gap:4px;font-size:13.5px}
.crewsum li{display:flex;gap:8px;align-items:baseline}
.crewsum .num{color:var(--muted);font-weight:600;min-width:42px}