:root {
  --lm-navy: #080F29; --lm-blue-grey: #323F4B; --lm-grey: #52606D; --lm-mid-grey: #7B8794;
  --lm-light-grey: #9AA5B1; --lm-offwhite: #F5F7FA; --lm-white: #FFFFFF; --lm-orange: #FF6A20;
  --lm-navy-08: rgba(8, 15, 41, 0.08); --border-hairline: rgba(154, 165, 177, 0.35);
  --border-input: rgba(82, 96, 109, 0.35); --shadow-card-sm: 0 8px 22px -12px rgba(8, 15, 41, 0.35);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --font: "Mozilla Text", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--lm-offwhite); color: var(--lm-grey); font-family: var(--font); font-weight: 300; font-size: 16px; line-height: 1.55; }
a { color: var(--lm-navy); }
h1 { color: var(--lm-navy); font-weight: 600; font-size: 28px; line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.01em; }
h2 { color: var(--lm-navy); font-weight: 500; font-size: 18px; margin: 32px 0 12px; }
/* In de iOS-app loopt de pagina onder de statusbalk door (viewport-fit=cover): een vaste donkerblauwe strook houdt de klok leesbaar. In een gewone browser is de hoogte 0. */
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: var(--lm-navy); pointer-events: none; z-index: 40; }
.accent-rule { width: 48px; height: 2px; background: var(--lm-orange); margin: 0 0 20px; }
.muted { color: var(--lm-mid-grey); font-size: 14px; }
.error { color: #B3261E; font-weight: 400; }
.warn { color: var(--lm-blue-grey); font-size: 13px; margin: 4px 0; }

.top { background: var(--lm-navy); color: var(--lm-offwhite); padding: calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left)); }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; }
.langtog { display: flex; gap: 4px; }
.langtog .lang { background: transparent; color: var(--lm-light-grey); border: 1px solid rgba(245, 247, 250, 0.35); border-radius: 0; min-width: 40px; height: 36px; font: 500 12px var(--font); letter-spacing: 0.08em; cursor: pointer; }
.langtog .lang.on { background: var(--lm-offwhite); color: var(--lm-navy); border-color: var(--lm-offwhite); }
.nav { display: flex; flex-wrap: wrap; gap: 2px 18px; border-top: 1px solid rgba(245, 247, 250, 0.12); padding: 10px 0; }
.nav a, .nav .linkbtn { color: var(--lm-offwhite); text-decoration: none; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; background: none; border: 0; padding: 4px 0; font-family: var(--font); cursor: pointer; }
.nav .linkbtn { color: var(--lm-light-grey); }
.nav-side { display: flex; align-items: center; gap: 8px 16px; margin-left: auto; }

.wrap { max-width: 880px; margin: 0 auto; padding: 28px calc(16px + env(safe-area-inset-right)) calc(64px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border: 1.5px solid var(--lm-navy); border-radius: 0; background: transparent; color: var(--lm-navy); font: 600 13px var(--font); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 160ms var(--ease), color 160ms var(--ease); }
.btn:hover, .btn:focus-visible { background: var(--lm-navy); color: var(--lm-offwhite); }
.btn[disabled] { opacity: 0.5; cursor: default; }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 12px; }

.login { max-width: 420px; margin: 8vh auto 0; }
.login .btn { margin-top: 12px; width: 100%; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.tile { display: flex; flex-direction: column; gap: 8px; min-height: 120px; padding: 20px; background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); text-decoration: none; color: var(--lm-navy); }
.tile-title { font-weight: 500; font-size: 18px; }
.tile.soon { color: var(--lm-mid-grey); background: rgba(255, 255, 255, 0.6); box-shadow: none; border: 1px dashed var(--border-hairline); }
.badge { align-self: flex-start; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lm-blue-grey); border-bottom: 2px solid var(--lm-orange); }
.ext-arrow { margin-left: 0.35em; font-size: 0.9em; }
/* op de tegel staat het pijltje in de rechterbovenhoek en breekt de titel niet af bij het streepje in E-mailhandtekening */
.tile-external { position: relative; }
.tile-external .tile-title { white-space: nowrap; font-size: 16px; }
.tile-external .ext-arrow { position: absolute; top: 21px; right: 6px; margin: 0; color: var(--lm-mid-grey); }
.tile-note { font-size: 13px; color: var(--lm-mid-grey); margin-top: auto; }

.details { margin: 0; background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); }
.details .row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-hairline); }
.details .row:last-child { border-bottom: 0; }
.details dt { color: var(--lm-mid-grey); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
.details dd { margin: 0; color: var(--lm-navy); font-weight: 400; overflow-wrap: anywhere; }

/* Beheerschermen met brede tabellen: op een groot scherm krijgen ze de ruimte, zodat de kolommen naast elkaar passen zonder zijwaarts te scrollen. */
.wrap.wide { max-width: 1560px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.admin-bar { position: sticky; top: env(safe-area-inset-top); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 10px 0; margin-bottom: 12px; background: var(--lm-offwhite); border-bottom: 1px solid var(--border-hairline); }
.admin-bar .muted { margin: 0; }
/* In Instellingen staat de balk boven de tabel en loopt hij mee met de pagina: een vaste balk kwam over de laatste rij van de tabel te liggen. */
.admin-bar.static { position: static; }
[data-view="hours-settings"] .table-wrap { margin-bottom: 0; container-type: inline-size; }
/* Opslaan onder de tabel, altijd onderin beeld (ook als onderaan bijzonder verlof is uitgeklapt); in de normale stroom, dus nooit over de laatste rij heen. */
.save-bar { position: sticky; bottom: 0; z-index: 6; margin: 0 0 24px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: var(--lm-offwhite); border-top: 1px solid var(--border-hairline); }
.save-bar .toolbar p { margin: 0; }
/* een rij die in beeld wordt gescrold (scrollIntoView, toetsenbord) komt boven de balk te liggen, niet eronder */
.settings-table tr.person, .settings-table tr.detail { scroll-margin-bottom: 84px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-hairline); margin-bottom: 16px; }
.tab { min-height: 44px; padding: 0 18px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--lm-grey); font: 600 13px var(--font); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.tab[aria-selected="true"] { color: var(--lm-navy); border-bottom-color: var(--lm-orange); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.search { flex: 1 1 260px; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--border-input); border-radius: 0; font: 400 15px var(--font); background: var(--lm-white); }
.filter { flex: 0 1 180px; min-width: 0; min-height: 44px; padding: 0 10px; border: 1px solid var(--border-input); border-radius: 0; font: 400 15px var(--font); color: var(--lm-navy); background: var(--lm-white); }
.count { margin: 0 0 12px; }

.table-wrap { overflow-x: auto; background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); }
/* Safari en Chrome op macOS verbergen de schuifbalk; zo is zichtbaar dat de tabel zijwaarts scrolt */
.table-wrap::-webkit-scrollbar { height: 12px; }
.table-wrap::-webkit-scrollbar-track { background: var(--lm-navy-08); }
.table-wrap::-webkit-scrollbar-thumb { background: var(--lm-blue-grey); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
.people-table { width: 100%; min-width: 1000px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.people-table th, .people-table td { padding: 8px 12px; text-align: left; vertical-align: middle; background: var(--lm-white); border-bottom: 1px solid var(--border-hairline); }
.people-table th { font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-blue-grey); white-space: nowrap; }
.people-table td { color: var(--lm-navy); font-weight: 400; overflow-wrap: break-word; }
.people-table .col-name { position: sticky; left: 0; z-index: 1; min-width: 150px; max-width: 200px; box-shadow: 1px 0 0 var(--border-hairline); }
.people-table th.col-name { z-index: 2; }
.people-table td:nth-child(2) { min-width: 130px; }
.people-table .col-check { text-align: center; width: 1%; white-space: nowrap; }
.people-table .col-ms { min-width: 230px; }
.people-table .col-ms input { width: 100%; min-height: 36px; padding: 0 8px; border: 1px solid var(--border-input); border-radius: 0; font: 400 14px var(--font); background: var(--lm-white); }
.people-table .col-status { min-width: 130px; font-size: 13px; color: var(--lm-blue-grey); }
.role-legend { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; font-size: 14px; color: var(--lm-navy); }
.people-table input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--lm-navy); vertical-align: middle; }
.people-table input[disabled] { opacity: 0.45; }
.sort { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.sort::after { content: ""; width: 0; height: 0; border: 4px solid transparent; opacity: 0; }
th[aria-sort="ascending"] .sort::after { border-bottom: 5px solid var(--lm-navy); border-top: 0; opacity: 1; }
th[aria-sort="descending"] .sort::after { border-top: 5px solid var(--lm-navy); border-bottom: 0; opacity: 1; }
.people-table tr.inactive td { color: var(--lm-mid-grey); }
.people-table tr.dirty td { background: #FFF4EC; }
.people-table tr.dirty .col-name { box-shadow: inset 3px 0 0 var(--lm-orange), 1px 0 0 var(--border-hairline); }
.people-table tr.error .col-status { color: #B3261E; font-weight: 400; }
.people-table tr.error .col-name { box-shadow: inset 3px 0 0 #B3261E, 1px 0 0 var(--border-hairline); }
.log { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.log li { padding: 8px 0; border-bottom: 1px solid var(--border-hairline); }
.log time { color: var(--lm-mid-grey); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Mijn uren */
.week-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.week-label { flex: 1 1 140px; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; color: var(--lm-navy); }
.week-label .muted { font-size: 13px; }
.week-nav .btn.small { min-width: 44px; min-height: 44px; }
.week-total { margin: 8px 0 12px; color: var(--lm-navy); }
.days { display: flex; flex-direction: column; gap: 12px; }
.day { background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); padding: 14px 16px 16px; }
.day.today { box-shadow: inset 3px 0 0 var(--lm-orange), var(--shadow-card-sm); }
.day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.day-head h2 { margin: 0; font-size: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.day-head .badge { text-transform: uppercase; }
.day-total { color: var(--lm-navy); font-weight: 500; white-space: nowrap; }
.day-empty { margin: 0 0 8px; }
.hour-list { list-style: none; padding: 0; margin: 0 0 10px; }
.hour-entry { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--border-hairline); }
.hour-main { display: flex; justify-content: space-between; gap: 12px; color: var(--lm-navy); font-weight: 500; }
.hour-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; }
.hour-meta .hour-project { color: var(--lm-navy); font-weight: 400; overflow-wrap: anywhere; }
.hour-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.status { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 2px solid var(--lm-light-grey); color: var(--lm-blue-grey); }
.status.ok { border-bottom-color: #2E7D32; }
.status.warn { border-bottom-color: var(--lm-orange); }
.status.err { border-bottom-color: #B3261E; color: #B3261E; }
.status.info { border-bottom-color: var(--lm-navy); }
.edit-date { margin: 0 0 16px; color: var(--lm-navy); font-weight: 500; }
.hour-form { background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); padding: 18px 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-blue-grey); }
.field input, .field select, .field textarea { width: 100%; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border-input); border-radius: 0; font: 400 16px var(--font); color: var(--lm-navy); background: var(--lm-white); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-row .field:nth-child(3) { grid-column: 1 / -1; }
.btn.primary { background: var(--lm-navy); color: var(--lm-offwhite); }
.btn.primary:hover, .btn.primary:focus-visible { background: var(--lm-blue-grey); border-color: var(--lm-blue-grey); }
.other-project { display: flex; flex-direction: column; gap: 14px; }
.other-project[hidden], .hour-form [hidden] { display: none; }
.hour-computed { margin: 0; color: var(--lm-navy); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn.danger { border-color: #B3261E; color: #B3261E; }
.btn.danger:hover, .btn.danger:focus-visible { background: #B3261E; color: var(--lm-white); }
.btn.add { margin-top: 2px; }

/* Mijn verlof en verlof beoordelen */
.tabs { overflow-x: auto; }
.tab { white-space: nowrap; }
a.tab { display: inline-flex; align-items: center; text-decoration: none; }
.balance { background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); padding: 16px; margin: 0 0 16px; }
.balance h2 { margin: 0 0 10px; font-size: 16px; }
.stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-blue-grey); }
.stat strong { color: var(--lm-navy); font-weight: 500; overflow-wrap: anywhere; }
.stat.big strong { font-size: 24px; font-weight: 600; line-height: 1.2; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; margin-top: 14px; }
.leave-list { margin-top: 0; }
.leave-list .hour-entry:first-child { border-top: 0; }
.leave-list, .leave-recents { background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); padding: 4px 16px; }
.leave-item .hour-main span:first-child { overflow-wrap: anywhere; }
.preview-title { font-size: 14px; margin: 4px 0 0; }
.preview { background: var(--lm-offwhite); padding: 10px 12px; min-height: 44px; }
.preview p { margin: 4px 0; }
.preview-days { list-style: none; margin: 0 0 8px; padding: 0; font-size: 14px; }
.preview-days li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--border-hairline); }
.preview-total, .preview-after { color: var(--lm-navy); }
.leave-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.leave-card { background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.leave-card p { margin: 0; color: var(--lm-navy); }
.leave-card header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.leave-card h3 { margin: 0; color: var(--lm-navy); font-weight: 500; font-size: 18px; }
.leave-card h4 { margin: 0 0 4px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-blue-grey); font-weight: 500; }
.leave-card textarea { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border-input); border-radius: 0; font: 400 15px var(--font); color: var(--lm-navy); background: var(--lm-white); }
.leave-card .also { border-top: 1px solid var(--border-hairline); padding-top: 8px; }
.also-off { list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--lm-navy); }
.leave-recents { list-style: none; margin: 0; }
.leave-recent, .appt-recent { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--border-hairline); }
.leave-recent:first-child, .appt-recent:first-child { border-top: 0; }

/* Uren en verlof beheren (batch 2C). Kleuren zijn ingetogen en nooit de enige drager: elk blokje heeft een tekstlabel. */
[hidden] { display: none !important; }
:root {
  --c-vac-bg: #DCE8F5; --c-vac-ink: #12365F; --c-vac-edge: #4A78AE;
  --c-sick-bg: #FBE3E0; --c-sick-ink: #7A1913; --c-sick-edge: #B3261E;
  --c-tvt-bg: #FFE9DB; --c-tvt-ink: #7A3200; --c-tvt-edge: var(--lm-orange);
  --c-special-bg: #ECE8F4; --c-special-ink: #3D2F66; --c-special-edge: #6B5BA6;
  --c-plan-bg: #E4E7EB;
}
.subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.subtab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--lm-navy); color: var(--lm-navy); text-decoration: none; font: 600 13px var(--font); letter-spacing: 0.08em; text-transform: uppercase; }
.subtab[aria-current="page"] { background: var(--lm-navy); color: var(--lm-offwhite); }
.subtab:focus-visible, .tab:focus-visible { outline: 2px solid var(--lm-orange); outline-offset: 2px; }
.picker .person-sel { flex: 1 1 260px; max-width: 420px; }
.filter.year-in { flex: 0 1 110px; }
.period-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.period-nav .btn.small, .filters > .btn.small { min-width: 44px; min-height: 44px; }
.period-nav .filter { flex: 1 1 130px; }
.period-nav .filter.year-in { flex: 0 1 110px; }
.inline-label { display: inline-flex; align-items: center; gap: 8px; color: var(--lm-blue-grey); font-size: 14px; }

.hadm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 14px 0; }
.hadm-stats .stat { background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); padding: 12px 14px; }
.hadm-stats .stat strong { font-size: 20px; font-weight: 600; }
.booking-form { margin: 12px 0; max-width: 520px; }
.booking-list { background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); padding: 4px 16px; }
.booking { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--border-hairline); }
.booking:first-child { border-top: 0; }
.booking .btn { margin-left: auto; }

.day-table { width: 100%; min-width: 980px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.day-table th, .day-table td { padding: 8px 12px; text-align: left; vertical-align: top; background: var(--lm-white); border-bottom: 1px solid var(--border-hairline); }
.day-table th { font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-blue-grey); white-space: nowrap; }
.day-table .col-date { position: sticky; left: 0; z-index: 1; min-width: 110px; white-space: nowrap; color: var(--lm-navy); font-weight: 500; box-shadow: 1px 0 0 var(--border-hairline); }
.day-table th.col-date { z-index: 2; }
.day-table tr.we td { background: #F1F3F6; }
.day-table td:nth-child(5) { min-width: 300px; }
.chip { display: block; margin: 0 0 4px; padding: 3px 8px; border-left: 3px solid transparent; font-size: 13px; line-height: 1.4; color: var(--lm-navy); }
.chip:last-child { margin-bottom: 0; }
.chip-val { font-weight: 500; }
.chip-note { color: inherit; opacity: 0.8; font-size: 12px; }
.chip-flag { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: #B3261E; }
.chip.worked { background: var(--lm-navy); color: var(--lm-offwhite); border-left-color: var(--lm-offwhite); }
.chip.worked .chip-flag { color: #FFB4A8; }
.chip.planned { background: var(--c-plan-bg); color: var(--lm-blue-grey); border-left-color: var(--lm-mid-grey); }
.chip.vac { background: var(--c-vac-bg); color: var(--c-vac-ink); border-left-color: var(--c-vac-edge); }
.chip.sick { background: var(--c-sick-bg); color: var(--c-sick-ink); border-left-color: var(--c-sick-edge); }
.chip.tvt { background: var(--c-tvt-bg); color: var(--c-tvt-ink); border-left-color: var(--c-tvt-edge); }
.chip.special { background: var(--c-special-bg); color: var(--c-special-ink); border-left-color: var(--c-special-edge); }
.appt { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--border-hairline); }
.appt:last-child { border-bottom: 0; }
.appt.dirty { background: #FFF4EC; box-shadow: inset 3px 0 0 var(--lm-orange); padding-left: 8px; }
.appt-label { color: var(--lm-navy); }
.appt-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.apptcat { min-height: 36px; padding: 0 8px; border: 1px solid var(--border-input); border-radius: 0; font: 400 14px var(--font); color: var(--lm-navy); background: var(--lm-white); max-width: 100%; }
.apptcat.cat-vakantie { border-left: 4px solid var(--c-vac-edge); }
.apptcat.cat-ziek { border-left: 4px solid var(--c-sick-edge); }
.apptcat.cat-tvt, .apptcat.cat-tvt_plus { border-left: 4px solid var(--c-tvt-edge); }
.apptHrs { width: 64px; min-height: 36px; padding: 0 8px; border: 1px solid var(--border-input); border-radius: 0; font: 400 14px var(--font); text-align: right; background: var(--lm-white); }
.apptHrs[disabled] { opacity: 0.5; }
.hrs-wrap { display: inline-flex; align-items: center; gap: 4px; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0 0 12px; padding: 0; font-size: 14px; color: var(--lm-blue-grey); }
.sw { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; border: 1px solid var(--border-input); }
.sw.mid { background: #FFE2C7; border-left: 4px solid var(--lm-orange); }
.sw.low { background: var(--c-sick-bg); border-left: 4px solid var(--c-sick-edge); }
.ov-table { width: 100%; min-width: 1000px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.ov-table th, .ov-table td { padding: 8px 6px; background: var(--lm-white); border-bottom: 1px solid var(--border-hairline); text-align: left; vertical-align: middle; }
.ov-table th { font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-blue-grey); white-space: nowrap; }
.ov-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ov-table .col-name { position: sticky; left: 0; z-index: 1; min-width: 160px; box-shadow: 1px 0 0 var(--border-hairline); font-weight: 500; }
.ov-table th.col-name { z-index: 2; }
.ov-table td.tot { font-weight: 600; color: var(--lm-navy); }
.ov-table td.state-mid { background: #FFE2C7; box-shadow: inset 3px 0 0 var(--lm-orange); }
.ov-table td.state-low { background: var(--c-sick-bg); box-shadow: inset 3px 0 0 var(--c-sick-edge); }
.ov-table .flag { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lm-navy); }
.ov-table td.state-low .flag { color: var(--c-sick-ink); }
.year-label { font-size: 22px; color: var(--lm-navy); }

.settings-table { min-width: 1100px; }
.settings-table th, .settings-table td { padding: 8px 8px; }
.settings-table td:nth-child(2) { min-width: 110px; }
.settings-table .col-status { min-width: 110px; }
.settings-table th { white-space: normal; vertical-align: bottom; }
.settings-table .col-num input { width: 76px; min-height: 36px; padding: 0 8px; border: 1px solid var(--border-input); border-radius: 0; font: 400 14px var(--font); text-align: right; background: var(--lm-white); }
.settings-table tr.detail td { background: #F7F8FA; }
.settings-table tr.detail.dirty td { background: #FFF4EC; }
.settings-table td.detail-cell { padding: 0; }
/* Het blok bijzonder verlof is zo breed als het zichtbare deel van de kaart en blijft er links in staan als de tabel zijwaarts scrolt:
   de knoppen Verwijderen en Opslaan liggen dus nooit buiten beeld. (De eerste breedte is voor browsers zonder container-eenheden.) */
.detail-inner { position: sticky; left: 0; box-sizing: border-box; width: calc(100vw - 64px); max-width: 100%; padding: 12px 16px; }
@supports (width: 1cqw) { .detail-inner { width: 100cqw; max-width: none; } }
/* Instellingen alleen lezen (planning): de velden blijven leesbaar maar zien er niet uit als invoer */
[data-readonly="1"] input[readonly], [data-readonly="1"] select:disabled { background: var(--lm-offwhite); border-color: var(--border-hairline); color: var(--lm-navy); cursor: default; opacity: 1; }
.sp-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sp-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; padding-bottom: 10px; border-bottom: 1px solid var(--border-hairline); }
.sp-row .sp-f-type { flex: 1 1 170px; } .sp-row .sp-f-start { flex: 1 1 150px; } .sp-row .sp-f-term { flex: 1 1 150px; } .sp-row .sp-f-end { flex: 1 1 150px; }
.sp-row .sp-f-days { flex: 0 1 110px; } .sp-row .sp-f-remark { flex: 3 1 220px; }
.sp-row .sp-outcome { flex: 1 0 100%; margin: 0; font-size: 14px; color: var(--lm-navy); font-weight: 400; }
.sp-row .sp-outcome:empty { display: none; }
.sp-note { margin: 0 0 10px; }
.sp-row [hidden] { display: none; }
.sp-row .sp-error { flex: 1 0 100%; margin: 0; font-size: 13px; }
.sp-row.has-error { box-shadow: inset 3px 0 0 #B3261E; padding-left: 8px; }
.sp-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-save-hint { margin: 8px 0 0; font-size: 13px; }
.sp-row .field input, .sp-row .field select { min-height: 36px; padding: 4px 8px; font-size: 14px; }
.sp-row.removed .field input, .sp-row.removed .field select { text-decoration: line-through; opacity: 0.6; }
.sp-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

/* Startdatum voor saldi (batch 2D): dagen en maanden ervoor staan er wel, maar zonder kleur en met een tekstlabel. */
.start-banner { margin: 0 0 12px; padding: 8px 12px; background: #F1F3F6; border-left: 3px solid var(--lm-mid-grey); color: var(--lm-navy); font-size: 14px; }
.day-table tr.pre td { background: #F7F8FA; color: var(--lm-grey); background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(154, 165, 177, 0.14) 8px 9px); }
.day-table tr.pre .col-date { color: var(--lm-grey); }
.tag-pre { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lm-blue-grey); white-space: normal; }
.day-table tr.start-line td { padding: 6px 12px; background: var(--lm-navy); color: var(--lm-offwhite); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 0; }
.sw.off { background: repeating-linear-gradient(135deg, #F7F8FA 0 4px, #DDE1E6 4px 5px); border-left: 4px solid var(--lm-mid-grey); }
.ov-table td.state-untracked { background: #F1F3F6; color: var(--lm-mid-grey); box-shadow: inset 3px 0 0 var(--lm-light-grey); }
.ov-table td.state-untracked .flag { color: var(--lm-blue-grey); white-space: normal; font-size: 10px; letter-spacing: 0; line-height: 1.2; max-width: 72px; margin-left: auto; text-align: right; }
.settings-table .col-start input { width: 140px; min-height: 36px; padding: 0 8px; border: 1px solid var(--border-input); border-radius: 0; font: 400 14px var(--font); background: var(--lm-white); }
.start-hint { display: block; margin-top: 2px; max-width: 150px; opacity: 1; color: var(--lm-navy); }

/* Overnemen uit de Uren-tool (batch 2D) */
.import-panel { background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); padding: 4px 16px 16px; margin: 0 0 16px; }
.import-panel h2 { margin-top: 12px; }
.import-file { max-width: 420px; margin: 8px 0; }
.import-table { min-width: 900px; }
.import-table tr.nochange td { color: var(--lm-mid-grey); }
.import-table .chg { font-weight: 500; color: var(--lm-navy); }
.import-table .col-carry { min-width: 280px; }
.carry-cell { display: flex; flex-direction: column; gap: 2px; }
.import-panel .form-actions { margin-top: 12px; }

/* Exporteren en afdrukken (batch 2D) */
.export-actions { margin: 8px 0 12px; }
.print-head { display: none; }
@page { size: A4 landscape; margin: 12mm; }
@media print {
  /* Geen menu en geen knoppen, witte achtergrond, een kop met naam, periode en datum. Kleur is nooit de enige drager, dus zonder kleur blijft alles leesbaar. */
  html, body { background: #fff !important; color: #000 !important; font-size: 11px; }
  .top, .tabs, .subtabs, .admin-bar, .filters, .week-nav, .form-actions, .toolbar, .booking-form, .btn, button, h1, .accent-rule,
  .save-bar, [data-role="actions"], [data-role="form-box"], [data-role="workload-box"], [data-role="message"], [data-role="save-status"] { display: none !important; }
  .wrap, .wrap.wide { max-width: none; padding: 0; margin: 0; }
  .print-head { display: block; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid #000; color: #000; }
  .print-head .print-title { display: block; font-size: 16px; font-weight: 600; }
  .table-wrap { overflow: visible; box-shadow: none; background: none; }
  .day-table, .ov-table, .people-table { min-width: 0 !important; width: 100%; font-size: 10px; }
  .day-table th, .day-table td, .ov-table th, .ov-table td { background: #fff !important; background-image: none !important; color: #000 !important; padding: 3px 5px; border-bottom: 1px solid #999; box-shadow: none !important; }
  .day-table .col-date, .ov-table .col-name { position: static; }
  tr { break-inside: avoid; }
  thead { display: table-header-group; }
  .chip, .chip.worked, .chip.planned, .chip.vac, .chip.sick, .chip.tvt, .chip.special { background: none !important; color: #000 !important; border-left: 3px solid #000; padding: 0 5px; font-size: 10px; }
  .chip.vac { border-left-style: double; } .chip.sick { border-left-style: dashed; } .chip.tvt { border-left-style: dotted; }
  .chip-flag, .chip-note, .tag-pre, .ov-table .flag { color: #000 !important; }
  .ov-table td.state-mid, .ov-table td.state-low, .ov-table td.state-untracked { border-left: 3px solid #000; }
  .ov-table td.state-low { border-left-style: double; } .ov-table td.state-untracked { border-left-style: dotted; }
  .day-table tr.start-line td { background: #000 !important; color: #fff !important; }
  .hadm-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0; }
  .hadm-stats .stat { box-shadow: none; border: 1px solid #999; padding: 4px 6px; background: #fff; }
  .hadm-stats .stat strong { font-size: 12px; color: #000; }
  .stat-label, .muted { color: #000; font-size: 10px; }
  .appt-label, .apptcat, .apptHrs, .apptcat option { font-size: 10px; }
  .hadm-stats .stat .muted { font-size: 10px; }
  .apptcat, .apptHrs { border: 0; background: none; appearance: none; -webkit-appearance: none; padding: 0; min-height: 0; color: #000; }
  .appt.dirty { background: none; box-shadow: none; }
  .start-banner { background: none; border-left: 3px solid #000; color: #000; }
  a { color: #000; text-decoration: none; }
}

@media (max-width: 600px) {
  .hadm-stats { grid-template-columns: 1fr 1fr; }
  .subtab { padding: 0 12px; }
}

/* Ontwikkeling (batch 3A): Mijn ontwikkeling voor de medewerker en het tabblad Ontwikkeling voor beheer */
.pop-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.pop-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.pop-facts dt, .pop-totals dt { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-blue-grey); }
.pop-facts dd, .pop-totals dd { margin: 0; color: var(--lm-navy); font-weight: 500; }
.pop-period-field { max-width: 220px; }
.pop-card { background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); padding: 4px 18px 16px; margin: 0 0 16px; }
.pop-card h2 { margin: 14px 0 8px; }
.pop-text { margin: 0 0 8px; color: var(--lm-navy); font-weight: 400; overflow-wrap: anywhere; }
.pop-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.pop-list { margin: 0 0 8px; padding-left: 20px; color: var(--lm-navy); font-weight: 400; }
.pop-list li { margin: 2px 0; overflow-wrap: anywhere; }
.pop-goal { padding: 10px 0 6px; border-top: 1px solid var(--border-hairline); }
.pop-goal:first-of-type { border-top: 0; }
.pop-goal h3 { margin: 0 0 4px; color: var(--lm-navy); font-size: 16px; font-weight: 600; }
.pop-meta { margin: 2px 0; color: var(--lm-grey); font-size: 14px; overflow-wrap: anywhere; }
.pop-meta strong { color: var(--lm-blue-grey); font-weight: 500; }
.pop-bar { display: block; height: 8px; width: 100%; border: 0; border-radius: 4px; overflow: hidden; background: var(--lm-navy-08); appearance: none; -webkit-appearance: none; }
.pop-bar::-webkit-progress-bar { background: var(--lm-navy-08); }
.pop-bar::-webkit-progress-value { background: var(--lm-orange); }
.pop-bar::-moz-progress-bar { background: var(--lm-orange); }
.pop-progress { margin: 0 0 8px; max-width: 420px; }
.pop-progress.inline { margin: 0; min-width: 150px; }
.pop-progress-text { display: block; margin-bottom: 4px; color: var(--lm-blue-grey); font-size: 14px; }
.pop-actions, .pop-sessions { list-style: none; margin: 0; padding: 0; }
.pop-action { display: flex; gap: 6px; align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--border-hairline); }
.pop-action:first-child { border-top: 0; }
.pop-check { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; min-height: 44px; margin: -4px 0 -4px -10px; cursor: pointer; }
.pop-check input { width: 24px; height: 24px; accent-color: var(--lm-navy); }
.pop-action-body { min-width: 0; flex: 1 1 auto; padding-top: 7px; }
.pop-action-text { color: var(--lm-navy); font-weight: 400; overflow-wrap: anywhere; }
.pop-action.done .pop-action-text { text-decoration: line-through; color: var(--lm-grey); }
.pop-status { min-height: 1.5em; margin: 8px 0 0; }
.pop-status.error { color: #B3261E; }
.pop-session { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 14px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--border-hairline); }
.pop-session:first-child { border-top: 0; }
.pop-session-name { color: var(--lm-navy); font-weight: 500; overflow-wrap: anywhere; }
.pop-session-date, .pop-session-hours { color: var(--lm-grey); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pop-session.excluded .pop-session-name, .pop-session.excluded .pop-session-date { text-decoration: line-through; opacity: 0.6; }
.pop-totals { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 12px 0 0; padding-top: 10px; border-top: 2px solid var(--lm-navy-08); }
.pop-totals .grand dd { font-size: 18px; font-weight: 600; }
.pop-edit-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 12px; align-items: start; padding: 12px 0 14px; border-top: 1px solid var(--border-hairline); }
.pop-edit-card:first-of-type { border-top: 0; }
.pop-edit-card .field textarea { min-height: 76px; font: 400 15px var(--font); }
.pop-edit-tick { display: flex; flex-direction: column; gap: 2px; align-self: end; }
.pop-person { margin: 8px 0 0; }
.pop-hours { width: 84px; min-height: 36px; padding: 0 8px; border: 1px solid var(--border-input); border-radius: 0; font: 400 14px var(--font); text-align: right; background: var(--lm-white); }
.pop-sessions-table { min-width: 720px; }
.pop-sessions-table tr.excluded td { color: var(--lm-mid-grey); }
.pop-sessions-table tr.excluded .col-name { text-decoration: line-through; }
.pop-study { max-width: 200px; margin-top: 12px; }
.pop-table { min-width: 860px; }
.pop-table .col-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pop-table td.tot { font-weight: 600; color: var(--lm-navy); }
.import-period { max-width: 360px; margin: 8px 0; }
@media (max-width: 600px) {
  .pop-two { grid-template-columns: 1fr; }
  .pop-card { padding: 4px 14px 14px; }
  .pop-session { grid-template-columns: 1fr auto; }
  .pop-session-main { grid-column: 1 / -1; }
}
@media print { .pop-bar { border: 1px solid #000; } .pop-bar::-webkit-progress-value { background: #000; } }

/* Declaraties (batch 3B): de lijst en het formulier voor de medewerker, en beoordelen, uitbetalen, overzicht en export voor de administratie */
.tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; margin-left: 8px; padding: 0 6px; border-radius: 11px; background: var(--lm-orange); color: var(--lm-navy); font: 600 12px var(--font); letter-spacing: 0; }
.tile-count { align-self: flex-start; padding: 2px 8px; background: var(--lm-orange); color: var(--lm-navy); font-size: 13px; font-weight: 500; border-radius: 11px; }
.exp-toolbar { justify-content: space-between; margin: 0 0 12px; }
.exp-totals { background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); padding: 14px 16px; margin: 0 0 12px; }
.exp-totals .muted { margin: 4px 0 0; }
.exp-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.chip-filter { min-height: 40px; padding: 0 14px; border: 1.5px solid var(--lm-navy); border-radius: 0; background: transparent; color: var(--lm-navy); font: 500 13px var(--font); cursor: pointer; }
.chip-filter[aria-pressed="true"] { background: var(--lm-navy); color: var(--lm-offwhite); }
.chip-filter:focus-visible { outline: 2px solid var(--lm-orange); outline-offset: 2px; }
.exp-sums { margin: 0 0 12px; }
.exp-list { background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); padding: 4px 16px; }
.exp-row { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--border-hairline); }
.exp-row:first-child { border-top: 0; }
.exp-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.exp-reason { margin: 2px 0; overflow-wrap: anywhere; }
.exp-foot { flex-wrap: wrap; }
.exp-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-left: auto; }
.exp-actions .btn.small { min-height: 44px; }
.exp-form { max-width: 640px; }
.exp-block { display: flex; flex-direction: column; gap: 14px; }
.exp-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-blue-grey); }
.exp-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.exp-result { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border-input); border-radius: 0; background: var(--lm-white); color: var(--lm-navy); font: 400 15px var(--font); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.exp-result:hover, .exp-result:focus-visible { background: var(--lm-offwhite); }
.lookup-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.lookup-list[hidden] { display: none; }
.lookup-option { min-height: 44px; display: flex; align-items: center; padding: 8px 12px; border: 1px solid var(--border-input); background: var(--lm-white); color: var(--lm-navy); font: 400 15px var(--font); cursor: pointer; overflow-wrap: anywhere; }
.lookup-option:hover, .lookup-option.active { background: var(--lm-offwhite); border-color: var(--lm-navy); }
.exp-check { min-height: 44px; }
.exp-check input { width: 22px; height: 22px; accent-color: var(--lm-navy); }
.exp-receipt-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.exp-receipt-buttons .btn { min-height: 44px; }
.exp-receipt-buttons ~ input[hidden] { display: none; }
.exp-preview, .exp-receipt { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.exp-receipt-img { display: block; max-width: 100%; max-height: 420px; width: auto; height: auto; border: 1px solid var(--border-hairline); background: var(--lm-white); }
.exp-receipt-link { color: var(--lm-navy); font-weight: 500; }
.exp-receipt p { margin: 0; }
.exp-file { margin: 0; color: var(--lm-navy); overflow-wrap: anywhere; }

.exp-review { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 20px; align-items: start; }
.exp-queue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.exp-item { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--border-input); border-radius: 0; background: var(--lm-white); color: var(--lm-navy); font: 400 14px var(--font); text-align: left; cursor: pointer; }
.exp-item.selected { border-color: var(--lm-navy); box-shadow: inset 4px 0 0 var(--lm-orange); }
.exp-item:focus-visible { outline: 2px solid var(--lm-orange); outline-offset: 2px; }
.exp-item-top { display: flex; justify-content: space-between; gap: 8px; }
.exp-item-meta { color: var(--lm-grey); overflow-wrap: anywhere; }
.exp-item-desc { color: var(--lm-navy); overflow-wrap: anywhere; }
.exp-item-foot { display: flex; align-items: center; gap: 12px; }
.exp-detail { background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); padding: 16px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.exp-detail-title { margin: 0; }
.exp-detail .details { box-shadow: none; border: 1px solid var(--border-hairline); }
.exp-detail h3 { margin: 0 0 6px; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-blue-grey); font-weight: 500; }
.exp-decision { border-top: 1px solid var(--border-hairline); padding-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.exp-decision textarea { min-height: 64px; }
.exp-pay-card { gap: 6px; }
.exp-pay-list { list-style: none; margin: 0; padding: 0; }
.exp-pay-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 4px 6px; padding: 6px 0; border-top: 1px solid var(--border-hairline); color: var(--lm-navy); font-size: 14px; }
.exp-pay-row .pop-check { margin: 0; flex: none; }
.exp-pay-main { overflow-wrap: anywhere; }
.exp-pay-footer { position: sticky; bottom: 0; margin-top: 16px; padding: 12px 0; background: var(--lm-offwhite); border-top: 1px solid var(--border-hairline); display: flex; flex-direction: column; gap: 8px; }
.exp-pay-sum { margin: 0; color: var(--lm-navy); font-weight: 500; }
.exp-batch { margin-bottom: 16px; }
.exp-table { min-width: 0; }
.exp-table .col-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.exp-table tr.tot td { font-weight: 600; color: var(--lm-navy); }
.exp-sum-table { margin: 0 0 20px; }
@media (max-width: 760px) {
  .exp-review { grid-template-columns: 1fr; }
  .exp-actions { margin-left: 0; justify-content: flex-start; }
}
@media print { .tab-count, .tile-count { display: none; } }
.exp-form p:empty, .exp-detail p:empty, .exp-receipt p:empty, .exp-preview p:empty, .exp-decision p:empty, .exp-pay-footer p:empty { display: none; }
.exp-form .field-row { align-items: end; }
.exp-detail .status { align-self: flex-start; }
.exp-block p, .exp-form .hour-computed { margin: 0; }

/* Planning en projecten (batch 4A) */
.proj-link { color: var(--lm-navy); font-weight: 500; overflow-wrap: anywhere; }
.plan-week { margin: 0 0 8px; }
.plan-week-title { margin: 24px 0 10px; font-size: 16px; }
.plan-week-title .muted { font-weight: 300; }
.plan-day-title { margin: 0; font-size: 16px; font-weight: 500; color: var(--lm-navy); }
.plan-day .hour-list { margin: 0; }
.plan-entry:first-child { border-top: 0; padding-top: 0; }
.plan-project { min-width: 0; overflow-wrap: anywhere; }
.plan-time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan-note { margin: 2px 0 0; overflow-wrap: anywhere; }
.plan-empty { margin: 0 0 8px; }
.plan-projects { margin-top: 28px; }
.plan-project-list { list-style: none; margin: 0 0 12px; padding: 0; background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); }
.plan-project-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 16px; border-top: 1px solid var(--border-hairline); min-height: 44px; }
.plan-project-item:first-child { border-top: 0; }
.plan-project-item .proj-link { flex: 1 1 200px; }
.plan-project-item .btn { margin-left: auto; }
.plan-search { margin-top: 16px; }
.plan-search .field input { max-width: 420px; }
.proj-block { margin: 24px 0 0; }
.proj-block h2 { margin: 0 0 12px; font-size: 18px; }
.proj-address { display: flex; flex-direction: column; }
.proj-line.strong { font-weight: 500; }
.proj-sp-form { margin-top: 16px; max-width: 640px; display: flex; flex-direction: column; gap: 10px; }
.proj-sp-form p { margin: 0; }
.proj-team { list-style: none; margin: 0; padding: 4px 16px; background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); }
.proj-member { padding: 12px 0; border-top: 1px solid var(--border-hairline); display: flex; flex-direction: column; gap: 4px; }
.proj-member:first-child { border-top: 0; }
.proj-phone { color: var(--lm-navy); font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
.proj-shifts { list-style: none; margin: 0; padding: 0; font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
.proj-shifts li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.proj-hidden { color: #B3261E; border-bottom-color: #B3261E; }
.proj-actions { margin: 0 0 12px; }
.proj-table { min-width: 0; }
.proj-table th, .proj-table td { padding: 8px 10px; }
.proj-table .col-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.proj-table tr.proj-day td { background: var(--lm-offwhite); }
.proj-table tr.proj-person td { font-weight: 500; }
.proj-table tfoot tr.tot td { font-weight: 600; color: var(--lm-navy); background: var(--lm-white); }
.proj-sub { font-size: 12px; white-space: normal; font-weight: 300; }
.proj-neg { color: #B3261E; }
.proj-toggle { min-height: 44px; font-weight: 500; text-align: left; }
.proj-total { color: var(--lm-navy); font-weight: 500; }
.plan-project-item:empty, .proj-block p:empty { display: none; }
.proj-member .hour-main { align-items: center; flex-wrap: wrap; }
.proj-tabs { gap: 0; }
.proj-tabs .tab { padding: 0 10px; font-size: 12px; letter-spacing: 0.05em; flex: 0 1 auto; }
@media (min-width: 600px) { .proj-tabs { gap: 4px; } .proj-tabs .tab { padding: 0 18px; font-size: 13px; letter-spacing: 0.1em; } }

/* Afspraken (batch 4C) */
.block-title { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border-hairline); }
.appt-sub { color: var(--lm-navy); font-weight: 500; font-size: 16px; margin: 20px 0 10px; }
.appt-item .hour-foot { flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.appt-item .form-actions { margin-left: auto; }
.check-field { flex-direction: row; align-items: center; gap: 10px; }
.check-field label { font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--lm-navy); }
.field .check-field input, .check-field input[type="checkbox"] { width: 22px; min-width: 22px; min-height: 22px; height: 22px; padding: 0; accent-color: var(--lm-navy); }
.appt-card textarea { margin-top: 4px; }
.nav .tab-count { margin-left: 6px; height: 18px; min-width: 18px; font-size: 11px; vertical-align: middle; }

/* Twee omgevingen (batch 4D): Mijn portaal en Beheer. Beheer heeft een oranje balk bovenin en het label Beheer, zodat je altijd ziet waar je bent. */
.top-admin { padding-top: 0; }
.area-bar { margin: 0 calc(-16px - env(safe-area-inset-right)) 12px calc(-16px - env(safe-area-inset-left)); padding: calc(5px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 5px calc(16px + env(safe-area-inset-left)); background: var(--lm-orange); color: var(--lm-navy); font: 600 12px var(--font); letter-spacing: 0.16em; text-transform: uppercase; }
.brand { flex: 0 1 242px; min-width: 0; }
.logo { display: block; width: 100%; max-width: 242px; height: auto; max-height: 22px; object-fit: contain; object-position: left center; }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--lm-orange); }
.nav .switch { padding: 4px 12px; border: 1px solid rgba(245, 247, 250, 0.45); }
.top-admin .nav .switch { border-color: var(--lm-orange); }
.nav .switch:hover, .nav .switch:focus-visible { background: var(--lm-offwhite); color: var(--lm-navy); }
.nav a:focus-visible, .nav .linkbtn:focus-visible, .lang:focus-visible { outline: 2px solid var(--lm-orange); outline-offset: 2px; }
.overview-block { text-decoration: none; }
.overview-block .tile-count[data-empty="1"] { background: transparent; padding-left: 0; color: var(--lm-mid-grey); font-weight: 400; }
.overview-extra:empty { display: none; }

/* Compact menu op de telefoon (batch 4D): onder 720 px toont de kop alleen logo, NL/EN en een knop Menu; het menu is een paneel eronder. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.menu-btn { display: none; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; background: transparent; color: var(--lm-offwhite); border: 1px solid rgba(245, 247, 250, 0.45); border-radius: 0; font: 500 12px var(--font); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.menu-btn[aria-expanded="true"] { background: var(--lm-offwhite); color: var(--lm-navy); }
.menu-btn:focus-visible { outline: 2px solid var(--lm-orange); outline-offset: 2px; }
.menu-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--lm-orange); }
@media (max-width: 719.98px) {
  .top { position: relative; }
  .langtog .lang { min-width: 36px; }
  .top-row { gap: 8px; }
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 30; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 4px 16px 16px; max-height: calc(100vh - 100%); overflow-y: auto;
    background: var(--lm-navy); border-top: 1px solid rgba(245, 247, 250, 0.25); box-shadow: 0 16px 28px -12px rgba(8, 15, 41, 0.55); }
  .nav.open { display: flex; }
  .nav a, .nav .linkbtn { display: flex; align-items: center; min-height: 44px; padding: 0; font-size: 14px; border-bottom: 1px solid rgba(245, 247, 250, 0.1); text-align: left; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--lm-orange); padding-left: 12px; }
  .nav-side { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .nav .switch { margin: 12px 0 0; padding: 0 12px; justify-content: center; border: 1px solid rgba(245, 247, 250, 0.45); }
  .top-admin .nav .switch { border-color: var(--lm-orange); }
  .nav .linkbtn { margin: 4px 0 0; border-bottom: 0; color: var(--lm-light-grey); }
}
@media (min-width: 720px) {
  /* Het menu van Beheer heeft negen items; iets compacter, zodat het op 1280 px op één regel past en op smallere schermen over twee of drie regels loopt, nooit zijwaarts scrolt */
  .nav { gap: 4px 16px; }
  .nav a, .nav .linkbtn { font-size: 12px; letter-spacing: 0.05em; }
  .nav .switch { padding: 3px 10px; }
}

/* Agenda (batch 4D): elke soort heeft een tekstlabel en een eigen ingetogen kleur aan de linkerkant; de kleur is nooit de enige drager. */
.ag-item { position: relative; padding-left: 12px; border-left: 4px solid var(--lm-light-grey); }
.ag-item .ag-kind { align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lm-blue-grey); }
.ag-project { border-left-color: var(--lm-navy); }
.ag-leave { border-left-color: #2E7D32; }
.ag-sick { border-left-color: #B3261E; }
.ag-appointment { border-left-color: #1F5F8B; }
.ag-rentman_appointment { border-left-color: #7B8794; border-left-style: dashed; }
.ag-block { border-left-color: #9AA5B1; border-left-style: dotted; }
.ag-holiday { border-left-color: var(--lm-orange); }
.ag-toggle { margin: 0 0 12px; flex-wrap: wrap; }
.ag-toggle-hint { flex-basis: 100%; }
.ag-overlap { margin: 4px 0; padding: 10px 12px; background: #FFF4EC; border-left: 4px solid var(--lm-orange); color: var(--lm-navy); font-size: 14px; }
.ag-overlap p { margin: 2px 0; }
.ag-overlap-title { font-weight: 500; }
.ag-overlap-list, .ag-rv-list { margin: 4px 0; padding-left: 18px; }
.ag-overlap-list li, .ag-rv-list li { margin: 2px 0; overflow-wrap: anywhere; }
.ag-rv { margin: 10px 0 4px; font-size: 14px; }
.ag-rv h4 { margin: 0 0 4px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--lm-blue-grey); }
.ag-rv p { margin: 2px 0; }
@media print { .ag-overlap, .ag-rv, .ag-toggle { display: none; } }

/* Urenstaat (batch 4D, B3) */
.st-table { min-width: 860px; }
.st-table tr.st-untracked td, .st-table tr.st-future td { font-size: 13px; }
.st-table tr.st-total th, .st-table tr.st-total td { font-weight: 600; border-top: 2px solid var(--lm-navy); }
.st-table th.col-name { font-weight: 500; }
.st-balance { max-width: 460px; margin: 16px 0 8px; }
.st-line { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--border-hairline); }
.st-line dt, .st-line dd { margin: 0; }
.st-line dd { font-variant-numeric: tabular-nums; }
.st-saldo { font-weight: 600; color: var(--lm-navy); border-bottom: 2px solid var(--lm-navy); }
@media print { .st-table { min-width: 0 !important; } .st-line { border-bottom: 1px solid #999; } }

/* Werkdruk (batch 4D, B4), alleen in Beheer. Het niveau staat altijd als tekst; de kleur komt erbij. */
.wl-level { display: inline-block; padding: 1px 8px; border-left: 4px solid var(--lm-navy); font: 600 12px var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--lm-navy); background: var(--c-plan-bg); }
.wl-level.wl-early { border-left-color: var(--lm-orange); background: #FFE2C7; }
.wl-level.wl-limit { border-left-color: var(--c-sick-edge); background: var(--c-sick-bg); color: var(--c-sick-ink); }
.wl-mark { margin-left: 6px; text-decoration: none; }
.wl-marks { list-style: none; margin: 0 0 12px; padding: 0; }
.wl-marks li { padding: 4px 0; }
.workload-block, .workload-person { margin-top: 24px; }
.wl-table { min-width: 640px; }

/* Termijnen en urenstaten uit Excel (batch 4F). De status staat altijd als tekst; de rand is alleen een extra. */
.historic-note { border-left: 4px solid var(--lm-navy); background: var(--lm-white); padding: 8px 12px; margin: 0 0 12px; color: var(--lm-blue-grey); }
.hist-hint { margin-top: 4px; }
.hist-hint .btn { min-height: 32px; padding: 0 12px; margin-top: 4px; }
.sti-list { display: grid; gap: 8px; margin: 12px 0; }
.sti-person { border: 1px solid var(--border-hairline); background: var(--lm-white); padding: 8px 12px; }
.sti-person summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 36px; }
.sti-person.nochange { color: var(--lm-mid-grey); }
.sti-warnings { margin: 8px 0; padding-left: 20px; }
.sti-warnings li { padding: 2px 0; }
.sti-person .table-wrap { margin-top: 8px; }
.expiry-person, .expiry-block, .expiry-blocks { margin-top: 24px; }
.expiry-blocks .expiry-block:first-child { margin-top: 0; }
.expiry-table { min-width: 760px; }
.tm-status { display: inline-block; padding: 1px 8px; border-left: 4px solid var(--lm-navy); font: 600 12px var(--font); letter-spacing: 0.04em; color: var(--lm-navy); background: var(--c-plan-bg); }
.tm-status.tm-vervalt_binnenkort { border-left-color: var(--lm-orange); background: #FFE2C7; }
.tm-status.tm-te_laat_onbevestigd { border-left-color: var(--c-sick-edge); background: var(--c-sick-bg); color: var(--c-sick-ink); }
.tm-status.tm-vervallen { border-left-color: var(--lm-mid-grey); background: var(--lm-offwhite); color: var(--lm-grey); }
.expiry-lines { margin: 12px 0; }
.expiry-list { list-style: none; margin: 0; padding: 0; }
.expiry-list li { padding: 2px 0; }
@media print { .expiry-person, .expiry-blocks, .hist-hint { display: none !important; } }

/* Batch 4F2: benamingen in de agenda, voorgesteld startsaldo, correcties en de invoertermijn */
.apptcat.cat-papadag, .apptcat.cat-bijzonder, .apptcat.cat-roostervrij { border-left: 4px solid var(--lm-navy); }
.apptcat.cat-undecided { border-left: 4px solid var(--lm-orange); }
.appt-basis { display: block; }
.booking.revoked { color: var(--lm-mid-grey); }
.booking.revoked > span:first-child { text-decoration: line-through; }
.label-rules, .entry-window, .undecided-block { margin-top: 24px; }
.lbl-persons { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.lbl-persons li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.lbl-person { min-width: 180px; }
.label-rules details > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.label-rules .apptcat { min-width: 150px; }
.source-excel { border-left: 4px solid var(--lm-navy); padding-left: 6px; }
.source-rentman { border-left: 4px solid var(--lm-orange); padding-left: 6px; }
.st-table td .chip-note, .st-table td.num { white-space: nowrap; }
@media print { .label-rules, .entry-window, .undecided-block { display: none !important; } }

/* Batch 4G: de rasterplanning (planning per maand), het raster per persoon en de eigen maandkalender. Kleur is nooit de enige drager: elke code is een letter, aangevraagd verlof heeft een gestippelde rand. */
:root {
  --rs-p-bg: #DCE6F5; --rs-p-ink: #14264F; --rs-v-bg: #DDEEDF; --rs-v-ink: #17401F; --rs-z-bg: #F9DEDB; --rs-z-ink: #6E160F;
  --rs-a-bg: #EADFF5; --rs-a-ink: #3F2166; --rs-b-bg: #E4E7EB; --rs-b-ink: #2B3640;
}
.rs-code-P, .rm-code-P .rm-badge { background: var(--rs-p-bg); color: var(--rs-p-ink); border-color: var(--rs-p-ink); }
.rs-code-V, .rs-code-v, .rm-code-V .rm-badge, .rm-code-v .rm-badge { background: var(--rs-v-bg); color: var(--rs-v-ink); border-color: var(--rs-v-ink); }
.rs-code-Z, .rm-code-Z .rm-badge { background: var(--rs-z-bg); color: var(--rs-z-ink); border-color: var(--rs-z-ink); }
.rs-code-A, .rm-code-A .rm-badge { background: var(--rs-a-bg); color: var(--rs-a-ink); border-color: var(--rs-a-ink); }
.rs-code-B, .rm-code-B .rm-badge { background: var(--rs-b-bg); color: var(--rs-b-ink); border-color: var(--rs-b-ink); }
.rs-code-v, .rm-code-v .rm-badge, .rs-badge.requested, .rm-line.requested .rm-badge { border-style: dashed; }
.rs-badge, .rm-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px; border: 1.5px solid; font: 600 13px var(--font); line-height: 1; flex: 0 0 auto; }
.rs-legend { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--lm-navy); }
.rs-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.rs-toolbar { align-items: center; }
.rs-nav { display: inline-flex; align-items: center; gap: 8px; }
.rs-month { min-width: 150px; text-align: center; color: var(--lm-navy); font-weight: 500; }
.rs-notices p { margin: 0 0 8px; }
.pad { padding: 16px; margin: 0; }
.rs-wrap { position: relative; }
.rs-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 1150px; width: 100%; font-size: 13px; }
.rs-table th, .rs-table td { padding: 0; border-bottom: 1px solid var(--border-hairline); border-right: 1px solid rgba(154, 165, 177, 0.18); background: var(--lm-white); text-align: center; }
.rs-table th.rs-name { position: sticky; left: 0; z-index: 2; width: 180px; min-width: 180px; text-align: left; padding: 6px 10px; box-shadow: 1px 0 0 var(--border-hairline); font-weight: 500; color: var(--lm-navy); background: var(--lm-white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-table thead th { position: sticky; top: 0; z-index: 3; font-weight: 500; color: var(--lm-blue-grey); padding: 4px 0; background: var(--lm-white); }
.rs-table thead th.rs-name { z-index: 4; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }
.rs-day .rs-wd { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.rs-day .rs-dn { display: block; color: var(--lm-navy); }
.rs-table .rs-dept th { text-align: left; padding: 6px 10px; background: var(--lm-offwhite); color: var(--lm-blue-grey); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; position: sticky; left: 0; }
.rs-table .weekend, .rs-table .holiday { background: repeating-linear-gradient(135deg, #EEF1F5, #EEF1F5 4px, #F6F8FA 4px, #F6F8FA 8px); }
.rs-table th.today, .rs-table td.today { box-shadow: inset 2px 0 0 var(--lm-orange), inset -2px 0 0 var(--lm-orange); }
.rs-table thead th.today .rs-dn { font-weight: 700; text-decoration: underline; text-decoration-color: var(--lm-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rs-cell { height: 32px; }
.rs-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 1px; width: 100%; height: 30px; padding: 0; border: 1.5px solid; border-radius: 0; font: 600 13px var(--font); cursor: pointer; }
.rs-btn:focus-visible { outline: 2px solid var(--lm-orange); outline-offset: -2px; z-index: 1; }
.rs-btn.rs-code-v { border-style: dashed; }
.rs-btn.faint { opacity: 0.7; font-style: italic; }
.rs-btn .rs-n { font-size: 10px; font-weight: 500; }
.rs-panel { position: fixed; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 20; width: 340px; max-height: min(60vh, 440px); overflow: auto; background: var(--lm-white); border-radius: 8px; box-shadow: 0 18px 40px -12px rgba(8, 15, 41, 0.45); padding: 14px 16px 16px; }
.rs-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rs-panel-title { margin: 0 0 10px; font-size: 16px; }
.rs-items { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.rs-item { display: flex; gap: 10px; align-items: flex-start; color: var(--lm-navy); font-weight: 400; }
.rs-item-body { min-width: 0; overflow-wrap: anywhere; }
.rs-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
/* de maandkalender */
.rm-month { background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); padding: 10px 12px 12px; margin: 8px 0 16px; }
.rm-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lm-blue-grey); }
.rm-head-cell { padding: 0 6px; }
.rm-week { margin: 0 0 4px; }
.rm-week-title { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-mid-grey); }
.rm-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.rm-day { min-height: 84px; padding: 4px 6px 6px; background: var(--lm-offwhite); border: 1px solid var(--border-hairline); min-width: 0; }
.rm-day.outside { background: transparent; border-color: transparent; }
.rm-day.weekend { background: repeating-linear-gradient(135deg, #EEF1F5, #EEF1F5 4px, #F6F8FA 4px, #F6F8FA 8px); }
.rm-day.today { box-shadow: inset 3px 0 0 var(--lm-orange); background: var(--lm-white); }
.rm-daytop { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.rm-dayname { display: none; color: var(--lm-blue-grey); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.rm-daynum { color: var(--lm-navy); font-weight: 600; font-size: 14px; }
.rm-holiday { font-size: 11px; color: var(--lm-blue-grey); border-bottom: 2px solid var(--lm-light-grey); }
.rm-lines { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.rm-line { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px 6px; font-size: 12px; color: var(--lm-navy); font-weight: 400; }
.rm-line .rm-badge { min-width: 18px; height: 18px; font-size: 11px; }
.rm-line .rm-text { min-width: 0; overflow-wrap: anywhere; flex: 1 1 60px; }
.rm-line .rm-time, .rm-line .rm-hidden-note { font-size: 11px; flex: 0 0 100%; padding-left: 24px; }
.rm-line.faint .rm-text { font-style: italic; }
.rs-viewswitch { display: inline-flex; gap: 0; margin: 0 0 12px; }
.rs-viewswitch .btn { border-radius: 0; }
.rs-viewswitch .btn[aria-pressed="true"] { background: var(--lm-navy); color: var(--lm-offwhite); }
@media (max-width: 720px) {
  .rs-panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 60vh; border-radius: 8px 8px 0 0; }
  .rs-table { min-width: 1000px; }
  .rs-table th.rs-name { width: 130px; min-width: 130px; }
  .rm-head { display: none; }
  .rm-days { grid-template-columns: 1fr; gap: 2px; }
  .rm-day { min-height: 0; display: flex; gap: 10px; align-items: flex-start; padding: 6px 8px; }
  .rm-day.outside { display: none; }
  .rm-daytop { flex: 0 0 84px; flex-direction: row; }
  .rm-dayname { display: inline; }
  .rm-lines { margin: 0; flex: 1 1 auto; min-width: 0; }
  .rm-line .rm-time, .rm-line .rm-hidden-note { flex: 0 0 auto; padding-left: 0; }
  .rm-none { display: none; }
}
@media print {
  .rs-toolbar, .rs-panel, .rs-notices, .rs-viewswitch, [data-role="panel-box"], [data-role="intro"] { display: none !important; }
  .rs-table { min-width: 0 !important; font-size: 9px; }
  .rs-table th, .rs-table td, .rs-table th.rs-name, .rs-table .rs-dept th { background: #fff !important; background-image: none !important; color: #000 !important; position: static !important; box-shadow: none !important; }
  .rs-table th.rs-name { width: 120px; min-width: 0; }
  .rs-btn, .rs-badge, .rm-badge { background: #fff !important; color: #000 !important; border-color: #000 !important; }
  .rs-table .weekend, .rs-table .holiday { background: #e6e6e6 !important; }
  .rs-legend { color: #000; }
  .rm-month { box-shadow: none; }
  .rm-day { background: #fff !important; border-color: #999; }
}

/* SharePoint op de projectpagina en de uploadpagina (batch 4B) */
.sp-candidate { align-items: flex-start; }
.sp-candidate-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.proj-block h3 { margin: 16px 0 8px; font-size: 15px; color: var(--lm-navy); font-weight: 500; }
.sp-files { margin-top: 12px; }
.sp-file .hour-main { flex-wrap: wrap; }
.sp-name { overflow-wrap: anywhere; text-align: left; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--lm-navy); }
button.sp-name { font-weight: 500; }
.sp-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.sp-uploads { margin-top: 12px; }
.sp-upload { display: flex; flex-direction: column; gap: 6px; }
.sp-progress { width: 100%; height: 8px; appearance: none; -webkit-appearance: none; border: 0; background: var(--lm-navy-08); accent-color: var(--lm-orange); }
.sp-progress::-webkit-progress-bar { background: var(--lm-navy-08); }
.sp-progress::-webkit-progress-value { background: var(--lm-orange); }
.sp-progress::-moz-progress-bar { background: var(--lm-orange); }
.qr-print { margin: 16px 0 0; max-width: 280px; }
.qr { display: block; width: 100%; height: auto; border: 1px solid var(--border-hairline); background: #FFFFFF; }
.qr-caption { margin: 6px 0 0; font-size: 13px; color: var(--lm-grey); overflow-wrap: anywhere; }
@media print {
  body.print-qr * { visibility: hidden; }
  body.print-qr .qr-print, body.print-qr .qr-print * { visibility: visible; }
  body.print-qr .qr-print { position: absolute; left: 0; top: 0; max-width: none; width: 12cm; }
}
.plan-upload { margin-top: 8px; min-height: 36px; }
/* vijf tabbladen op de projectpagina (met Documenten, batch 4B): op een telefoon komen ze over twee regels in plaats van zijwaarts te scrollen */
@media (max-width: 480px) { .proj-tabs { flex-wrap: wrap; overflow-x: visible; gap: 0 4px; } .proj-tabs .tab { padding: 0 12px; } }

/* De stand van Rentman (batch 4H): onder schermen met Rentman-gegevens, en de knop Verversen. Alles is tekst; kleur komt er alleen bij. */
.rm-stamp { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--lm-light-grey, #D9D9D9); }
.rm-stamp .rm-line { margin: 0 0 4px; font-size: 13px; color: var(--lm-mid-grey); }
.rm-stamp .rm-failed, .rm-stamp .rm-backoff { color: #B3261E; font-weight: 400; }
.rm-refresh-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; }
.rm-refresh-box .rm-message { margin: 0; }
.rm-block .rm-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 12px 0; }
.rm-block .rm-facts dt { color: var(--lm-mid-grey); font-size: 14px; }
.rm-block .rm-facts dd { margin: 0; }
@media print { .rm-refresh-box, .rm-block { display: none !important; } .rm-stamp { border-top: 1px solid #000; } .rm-stamp .rm-line { color: #000; font-size: 10px; } }
.rm-block .ov-table { min-width: 0; }

/* Uren die ontbreken (batch 4I): het blok op Start en in Beheer en de markering in de dagtabel. Kleur is nooit de enige drager: er staat altijd tekst bij. */
.reminders-block { margin: 0 0 24px; padding: 16px 20px; background: var(--lm-white); border-radius: 8px; border-left: 4px solid var(--lm-orange); box-shadow: var(--shadow-card-sm); }
.reminders-block h2 { margin: 0 0 8px; }
.rem-list { list-style: none; margin: 8px 0; padding: 0; }
.rem-day { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 8px 0; border-top: 1px solid var(--border-hairline); }
.rem-day:first-child { border-top: 0; }
.rem-what { min-width: 0; overflow-wrap: anywhere; }
.reminders-admin { margin-top: 24px; }
.rem-tag { display: inline-block; margin: 4px 0 0; padding: 1px 8px; border-left: 4px solid var(--lm-orange); background: #FFE2C7; color: var(--lm-navy); font: 500 12px var(--font); }
.rem-tag.rem-verlopen { border-left-color: var(--c-sick-edge); background: var(--c-sick-bg); color: var(--c-sick-ink); }

/* Voorgestelde urenregels (batch 4I, C2): een stippelrand en altijd de tekst "Voorgesteld, nog te bevestigen"; kleur is nooit de enige drager. */
.hour-proposal { margin: 8px 0; padding: 12px 14px; border: 1.5px dashed var(--lm-orange); border-radius: 6px; background: #FFF6EE; }
.hour-proposal[data-status="verlopen"] { border-color: var(--c-sick-edge); background: var(--c-sick-bg); }
.hour-proposal .hour-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hour-proposal .btn.small { min-height: 44px; }
.chip.proposal { border-left: 4px dashed var(--lm-orange); background: #FFF6EE; }
.chip.proposal[data-status="verlopen"] { border-left-color: var(--c-sick-edge); background: var(--c-sick-bg); }
.ov-table td.planned { font-style: italic; }
.reminder-mail-setting { margin-top: 24px; }
.reminder-mail-setting .check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

/* Batch 4J: uren voor meerdere dagen ("Ook voor andere dagen") */
.multi-days { border: 1px solid var(--border-hairline); background: var(--lm-offwhite); }
.multi-days > summary { cursor: pointer; min-height: 44px; padding: 10px 12px; display: flex; align-items: center; font-weight: 500; color: var(--lm-navy); }
.multi-days > summary:focus-visible { outline: 2px solid var(--lm-orange); outline-offset: -2px; }
.md-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 8px 12px; }
.md-body .muted { margin: 0; }
.md-row { border: 0; margin: 0; padding: 0; min-width: 0; }
.md-row legend { padding: 0; margin-bottom: 6px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-blue-grey); }
.md-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.md-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 6px 1px; border: 1px solid var(--border-input); background: var(--lm-white); cursor: pointer; font-size: 12px; text-align: center; }
.md-day input { width: 22px; height: 22px; margin: 0; min-height: 0; }
.md-day.weekend { background: var(--lm-offwhite); }
.md-day.anchor { border-color: var(--lm-navy); border-width: 2px; }
.md-day.off { opacity: 0.5; cursor: default; }
.md-dow { text-transform: uppercase; letter-spacing: 0.04em; color: var(--lm-blue-grey); }
.md-num { font-weight: 600; font-size: 14px; color: var(--lm-navy); }
.md-mon { color: var(--lm-mid-grey); }
.md-sub { margin: 4px 0 6px; font-size: 13px; color: var(--lm-blue-grey); }
.md-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.md-preview { border: 1.5px solid var(--lm-navy); background: var(--lm-white); padding: 4px 14px 14px; }
.md-preview h2 { margin: 12px 0 8px; font-size: 16px; }
.md-summary { font-weight: 500; color: var(--lm-navy); margin: 0 0 8px; }
.md-skipped { margin: 0 0 12px; padding-left: 18px; color: var(--lm-blue-grey); }
.md-preview[hidden], .md-body [hidden] { display: none; }
/* Batch 4J: de urenstaat heeft twee kolommen erbij (Norm na bijzonder verlof): de kopjes mogen over twee of drie regels, zodat de tabel op 1280 px past */
.st-table th.num { white-space: normal; min-width: 5.5em; max-width: 9em; vertical-align: bottom; letter-spacing: 0.04em; line-height: 1.25; }
.st-table th.num sup { white-space: nowrap; }
.st-table td.fixed-note { color: var(--lm-mid-grey); }

/* Batch 4J, H: kleur voor verschil en saldo. Rood en groen zijn de bestaande kleuren voor fout en goed; het teken (+ of -) staat altijd in de tekst, dus ook in zwart-wit en in de afdrukweergave. */
.bal-neg { color: #B3261E; font-weight: 600; }
.bal-pos { color: #2E7D32; font-weight: 600; }
.bal-zero { color: inherit; }
.ov-table td.bal-neg, .ov-table td.bal-pos { font-variant-numeric: tabular-nums; }
/* Afdrukken: de kleur blijft staan (een kleurenprinter toont hem) en in zwart-wit is het teken genoeg; de algemene afdrukregels maken verder alles zwart. */
@media print {
  .bal-neg, .ov-table td.bal-neg, .hadm-stats .stat strong.bal-neg { color: #B3261E !important; font-weight: 700; }
  .bal-pos, .ov-table td.bal-pos, .hadm-stats .stat strong.bal-pos { color: #2E7D32 !important; font-weight: 700; }
  .bal-neg, .bal-pos { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Arbeidstijden (ATW, batch 4K): alleen in Beheer. Een gepland signaal in de rasterplanning heeft een teken (!) in het vakje, een rand en de regel in de toegankelijke naam en het dagpaneel;
   kleur is nooit de enige drager. Donkerrood op wit is meer dan 11:1. */
.rs-atw, .rs-atw-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; height: 14px; padding: 0 2px; background: var(--c-sick-ink); color: #fff; font: 700 11px/14px var(--font); }
.rs-atw { position: absolute; top: -1px; right: -1px; pointer-events: none; }
.rs-btn.has-atw { outline: 2px solid var(--c-sick-edge); outline-offset: -2px; }
.rs-btn.rs-code-atw { background: var(--c-sick-bg); color: var(--c-sick-ink); border-color: var(--c-sick-edge); }
.rs-atw-legend { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; }
.rs-atw-panel { border-top: 1px solid var(--border-hairline); margin-top: 8px; padding-top: 8px; }
.rs-atw-title { margin: 0 0 4px; font-size: 15px; }
.workload-block h3, .atw-person h3 { margin: 20px 0 4px; font-size: 17px; }
.atw-person h4 { margin: 14px 0 4px; font-size: 15px; }
.wl-basis { font: 600 12px var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--lm-blue-grey); }
.atw-early, .atw-help { margin: 14px 0; }
.atw-early summary, .atw-help summary { cursor: pointer; font-weight: 500; color: var(--lm-navy); }
.atw-help ul { margin: 8px 0 0; padding-left: 20px; }
.atw-help li { margin: 4px 0; }

/* Knoppen die niet kunnen (uitgeschakeld) blijven leesbaar: donkergrijze tekst op lichtgrijs is 5,2:1 (minstens 4,5:1 volgens het Lichtmacht Design System), in plaats van een navy knop op de helft van
   zijn dekking. In het voorbeeld van Uren voor meerdere dagen komt de knop "Terug naar het formulier" onder de aanwijzer te staan; zonder overgang is hij nooit halverwege een kleur te zien. */
.btn[disabled], .btn[disabled]:hover, .btn[disabled]:focus-visible, .btn.primary[disabled], .btn.primary[disabled]:hover, .btn.primary[disabled]:focus-visible { opacity: 1; background: #E4E7EB; color: #52606D; border-color: #9AA5B1; cursor: default; }
.md-preview .btn { transition: none; }

/* Nieuwe en te controleren accounts (batch 4S, Beheer, Personen) */
.accounts-block { margin: 0 0 24px; }
.accounts-block h2 { margin: 0 0 4px; }
.account-list { list-style: none; margin: 8px 0 0; padding: 4px 16px; background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); }
.account { padding: 12px 0; border-top: 1px solid var(--border-hairline); }
.account:first-child { border-top: 0; }
.account.attention { border-left: 3px solid var(--lm-orange); padding-left: 12px; margin-left: -16px; }
.account-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; overflow-wrap: anywhere; }
.account-status { margin: 4px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.account-flag { margin: 6px 0 0; }
.account-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 8px; }
.account-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; }
.account-link input { min-width: 0; width: 260px; max-width: 100%; }
.account-link .error { flex-basis: 100%; margin: 0; }

/* Materiaal en vervoer op de projectpagina (batch 4L) */
.mat-searchbox { max-width: 420px; margin: 0 0 8px; }
.mat-group { margin: 0 0 8px; }
.mat-group-title { margin: 24px 0 2px; }
.mat-group-period { margin: 0 0 8px; }
.mat-list { list-style: none; margin: 0; padding: 4px 16px; background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); }
.mat-list.mat-children { margin: 8px 0 0; padding: 0 0 0 16px; background: transparent; box-shadow: none; border-left: 2px solid var(--border-hairline); }
.mat-line { padding: 12px 0; border-top: 1px solid var(--border-hairline); display: flex; flex-direction: column; gap: 4px; }
.mat-list > .mat-line:first-child { border-top: 0; }
.mat-line.mat-short { border-left: 3px solid #B3261E; padding-left: 12px; margin-left: -16px; }
.mat-child { padding: 8px 0; }
.mat-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; color: var(--lm-navy); }
.mat-qty { min-width: 3ch; font-weight: 600; font-variant-numeric: tabular-nums; }
.mat-name { font-weight: 500; overflow-wrap: anywhere; flex: 1 1 160px; }
.mat-shortage { color: #B3261E; border-bottom-color: #B3261E; font-weight: 600; }
.mat-periods { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.mat-periods > div { display: flex; flex-wrap: wrap; gap: 0 8px; }
.mat-periods dt { color: var(--lm-mid-grey); min-width: 84px; }
.mat-periods dd { margin: 0; color: var(--lm-navy); }
.mat-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mat-actions:empty { display: none; }
.veh-function { margin: 0; }
@media (min-width: 700px) {
  .mat-line { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
  .mat-line > .mat-main { flex: 1 1 320px; }
  .mat-line > .mat-periods { flex: 1 1 320px; }
  .mat-line.veh-item { flex-direction: column; }
  .mat-line > .mat-children, .mat-line > .mat-list { flex: 1 1 100%; }
}

/* Defect melden en het overzicht Defecten in Beheer (batch 4L) */
.def-form { background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); padding: 16px; display: flex; flex-direction: column; gap: 14px; margin: 0 0 16px; }
.def-form h2 { margin: 0; }
.def-form p { margin: 0; }
.def-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--lm-navy); }
.def-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-blue-grey); margin: 0 0 6px; }
.def-severity { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.def-severity legend { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-blue-grey); padding: 0; margin-bottom: 6px; }
.def-sev { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--border-input); background: var(--lm-white); color: var(--lm-navy); cursor: pointer; }
.def-sev input { width: 20px; height: 20px; flex: 0 0 auto; }
.def-sev:has(input:checked) { border-color: var(--lm-navy); box-shadow: inset 3px 0 0 var(--lm-navy); }
.def-sev-onveilig:has(input:checked) { border-color: #B00020; box-shadow: inset 3px 0 0 #B00020; }
.def-thumbs { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.def-thumbs li { position: relative; }
.def-thumbs img { display: block; width: 96px; height: 72px; object-fit: cover; border: 1px solid var(--border-hairline); }
.def-thumbs .btn { position: absolute; top: 2px; right: 2px; min-height: 28px; min-width: 28px; padding: 0 6px; background: var(--lm-white); }
.def-sent { color: #1B6B3A; font-weight: 500; margin: 0 0 12px; }
.def-reported { color: #B3261E; border-bottom-color: #B3261E; }
.def-sev-badge.def-badge-onveilig { color: #B00020; border-bottom-color: #B00020; font-weight: 600; }
.def-sev-badge.def-badge-werkt_niet { color: #B4470B; }
.def-already .mat-line { padding: 8px 0; }
.def-already p { margin: 0; }
.defa-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 0 0 16px; }
.defa-filters .field { flex: 0 1 200px; }
.defa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.defa-card { background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.defa-card.onveilig { border-left: 4px solid #B00020; }
.defa-card.afgehandeld { opacity: 0.8; }
.defa-card.highlight { outline: 2px solid var(--lm-orange); }
.defa-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--lm-navy); }
.defa-head strong { font-weight: 600; overflow-wrap: anywhere; }
.defa-desc { margin: 0; color: var(--lm-navy); white-space: pre-wrap; overflow-wrap: anywhere; }
.defa-meta { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; font-size: 14px; }
.defa-meta dt { color: var(--lm-mid-grey); }
.defa-meta dd { margin: 0; color: var(--lm-navy); overflow-wrap: anywhere; }
.defa-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.defa-photos img { display: block; width: 96px; height: 72px; object-fit: cover; border: 1px solid var(--border-hairline); }
.defa-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; }
.defa-actions .field { flex: 1 1 220px; }
.defa-actions select { min-height: 44px; }
.defa-note textarea { min-height: 64px; }
@media (min-width: 900px) { .defa-card { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px 24px; } .defa-card > .defa-head, .defa-card > .defa-desc { grid-column: 1; } .defa-card > .defa-side { grid-column: 2; grid-row: 1 / span 3; } }
.def-repair { color: #7A3A12; border-bottom-color: #B4470B; }

/* Scannen (batch 4L, D) */
.scan-panel { display: flex; flex-direction: column; gap: 14px; margin: 0 0 16px; }
.scan-view { max-width: 480px; }
.scan-video { display: block; width: 100%; max-height: 60vh; background: var(--lm-navy); object-fit: cover; }
.scan-aim { margin: 6px 0 0; }
.scan-manual { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.scan-manual .field p { margin: 4px 0 0; }
.scan-match { gap: 8px; }
.def-repair-line { margin: 0; color: #7A3A12; font-weight: 500; }
.mat-scan { background: var(--lm-white); border-radius: 8px; box-shadow: var(--shadow-card-sm); padding: 16px; margin: 0 0 16px; }
.mat-scan h2 { margin: 0 0 8px; }
.def-scan { display: flex; flex-direction: column; gap: 10px; }
.def-scanned-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.def-scanned-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border-hairline); }
.def-scanned-list li:first-child { border-top: 0; }
.def-scanned-list .btn { min-width: 36px; padding: 0 10px; }

/* To-do per project (batch 4L, E) */
.todo-check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; color: var(--lm-navy); }
.todo-check input { width: 24px; height: 24px; flex: 0 0 auto; }
.todo-item.done .mat-name { text-decoration: line-through; color: var(--lm-mid-grey); }
.todo-details { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.todo-meta { margin: 0; }
.todo-overdue { color: #B3261E; font-weight: 500; }
.todo-done { margin-top: 16px; }
.todo-done summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--lm-navy); font-weight: 500; }
.todo-form textarea { min-height: 76px; }
.todo-mine .mat-line { padding: 8px 0; }