:root { color-scheme: light; }
.top-icon-button { display: grid; place-items: center; padding: 0; }
.top-icon-button svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .moon-svg { fill: none; stroke: currentColor; stroke-width: 1.75; }
.date-control{font-size:14px!important;font-weight:700;letter-spacing:-.1px;cursor:default!important}
.theme-toggle .sun-svg { display: none; }
[data-theme="dark"] .theme-toggle .moon-svg { display: none; }
[data-theme="dark"] .theme-toggle .sun-svg { display: block; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf3f8;
  --muted: #9aaaba;
  --line: #2b3948;
  --paper: #18222d;
  --ground: #101720;
  --accent: #65aaf0;
  --accent-soft: #1c3550;
  --shadow: 0 1px 1px #0004, 0 10px 30px #0003;
}

[data-theme="dark"] body,
[data-theme="dark"] main { background: var(--ground); color: var(--ink); }
[data-theme="dark"] .sidebar { background: #131c26; }
[data-theme="dark"] .topbar { background: #131c26e8; }
[data-theme="dark"] [data-theme="dark"] .event-card { background: #1d2a37; }
[data-theme="dark"] .nav-item { color: #aebbc7; }
[data-theme="dark"] .nav-item:hover,
[data-theme="dark"] .nav-item.active { background: #1b3550; color: #85bcf2; }
[data-theme="dark"] .nav-item.active > span:first-child,
[data-theme="dark"] .link-button,
[data-theme="dark"] .panel-head a { color: #72b2f2; }
[data-theme="dark"] .panel,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .person-card,
[data-theme="dark"] .horse-card,
[data-theme="dark"] .animal-card,
[data-theme="dark"] .location-card,
[data-theme="dark"] .lesson-row,
[data-theme="dark"] .booking-row,
[data-theme="dark"] .filter,
[data-theme="dark"] .soft-button,
[data-theme="dark"] .icon-button,
[data-theme="dark"] .search-field { background: var(--paper); color: var(--ink); }
[data-theme="dark"] .hero-card { background: linear-gradient(110deg,#19334c,#1a2f42 55%,#203747); }
[data-theme="dark"] .hero-card::after { border-color: #315676; }
[data-theme="dark"] .hero-card p:not(.eyebrow),
[data-theme="dark"] .weather small { color: #a8bac9; }
[data-theme="dark"] .schedule-grid,
[data-theme="dark"] .schedule-day,
[data-theme="dark"] .task-row,
[data-theme="dark"] .attention-list article,
[data-theme="dark"] .card-meta,
[data-theme="dark"] .booking-row { border-color: var(--line); }
[data-theme="dark"] .lesson { background: #3c3021; color: #f0d4a7; }
[data-theme="dark"] .filter.active { background: #1d3853; border-color: #315677; color: #7db8f1; }
[data-theme="dark"] .status { background: #183a53; color: #88c5f5; }
[data-theme="dark"] dialog,
[data-theme="dark"] #employeeDialog,
[data-theme="dark"] #taskDialog { background: #17212b; border-color: #344353; color: var(--ink); }
[data-theme="dark"] dialog input,
[data-theme="dark"] dialog select,
[data-theme="dark"] #employeeDialog input,
[data-theme="dark"] #employeeDialog select,
[data-theme="dark"] #taskDialog input,
[data-theme="dark"] #taskDialog select,
[data-theme="dark"] #employeeDialog label,
[data-theme="dark"] #taskDialog label { color: #c4ced7; }
[data-theme="dark"] .dialog-close { color: #a8b4bf; }
[data-theme="dark"] .dialog-close:hover { background: #263646; color: #82baf0; }
[data-theme="dark"] .danger-button { background: #211d22 !important; border-color: #66404a !important; color: #f092a4 !important; }
.task-row { cursor: pointer; border-radius: 7px; padding-left: 6px; padding-right: 6px; }
.task-row:hover { background: #f7f9fb; }
.task-row.done .task-title { text-decoration: line-through; opacity: .62; }
.tasks-panel .task-row{display:flex;gap:14px;min-height:66px;padding:14px 6px;align-items:center}
.tasks-panel .task-row input{flex:0 0 auto}
.tasks-panel .task-title{flex:1 1 auto;min-width:0}
.tasks-panel .task-title strong,.tasks-panel .task-title small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tasks-panel .assignee{flex:0 0 170px;min-width:0}
.tasks-panel .pill{flex:0 0 auto;margin-left:6px}
.priority-high { color: #a84c3c; background: #fae9e4; }
.schedule-day .lesson, .event-card[data-task-id] { cursor: pointer; }
[data-theme="dark"] .task-row:hover { background: #1c2936; }
[data-theme="dark"] .priority-high { color: #f0a08f; background: #4a2825; }
#tasks .filter-row select { width:auto; min-width:145px; margin:0; padding:7px 28px 7px 10px; font-size:12px; }
#tasks .filter-row select:first-of-type { margin-left:auto; }
.schedule-day[data-schedule-date] { transition:background .15s; }
.schedule-day[data-schedule-date]:hover { background:#f8fbfe; }
[data-theme="dark"] .schedule-day[data-schedule-date]:hover { background:#1b2835; }
[data-theme="dark"] .availability-editor legend { color:#c4ced7; }
.calendar-picker { display:flex; align-items:center; gap:7px; margin:0; padding:6px 10px; border:1px solid var(--line); border-radius:9px; background:var(--paper); color:#4d5b60; cursor:pointer; }
.calendar-picker input { width:124px; margin:0; padding:0; border:0; background:transparent; font-size:12px; color:inherit; cursor:pointer; }
[data-theme="dark"] .calendar-picker { color:var(--ink); }
.lesson.task-open { background:#edf5fc; color:#315f87; }
.lesson.task-done { background:#e8f5ef; color:#37745d; opacity:.82; }
.lesson.task-done b { text-decoration:line-through; }
.task-status-check { text-decoration:none; display:inline-block; }
.planning-task-head { display:flex; align-items:flex-start; gap:5px; }
.planning-task-head b { flex:1; min-width:0; }
.planning-task-meta { display:block; margin-top:2px; }
.priority-alert { flex:0 0 18px; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:#c94f3f; color:#fff; font-size:12px; font-weight:800; text-decoration:none; }
.task-type-algemeen { border-left-color:#4388c7 !important; }
.task-type-paardenverzorging { border-left-color:#4b9a7a !important; }
.task-type-les { border-left-color:#8a6bc1 !important; }
.task-type-onderhoud { border-left-color:#cf8a3f !important; }
.planning-legend { display:flex; flex-wrap:wrap; gap:8px 12px; margin-left:auto; font-size:10px; color:var(--muted); }
.planning-legend span::before { content:""; display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; background:#4388c7; }
.planning-legend .legend-done::before { background:#439674; }
.planning-legend .legend-priority::before { background:#c94f3f; }
.planning-legend .general::before { background:#4388c7; }
.planning-legend .care::before { background:#4b9a7a; }
.planning-legend .lesson-type::before { background:#8a6bc1; }
.planning-legend .maintenance::before { background:#cf8a3f; }
[data-theme="dark"] .lesson.task-open { background:#1d3853; color:#9ac8f2; }
[data-theme="dark"] .lesson.task-done { background:#1d4135; color:#9dd8bd; }

/* Weekagenda met tijdlijn */
/* `overflow: hidden` on `main` creates a scroll container and prevents the
   application header from sticking to the viewport. Clip only horizontal
   overflow, without changing the vertical scrolling context. */
.shell,main{max-width:100%;overflow-x:clip}
.schedule-board{overflow:visible}.schedule-grid{display:grid;grid-template-columns:82px repeat(7,minmax(0,1fr));overflow:visible;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.schedule-grid.planning-day-view{grid-template-columns:82px minmax(0,1fr)}.schedule-grid.planning-day-view .planning-day-column{min-width:0}
.planning-time-axis,.planning-day-column{position:relative;min-height:calc(var(--planning-grid-height,1024px) + 44px)}.planning-time-axis{position:sticky;left:0;z-index:3;border-right:1px solid var(--line)}
.planning-axis-head,.planning-day-head{position:sticky;top:70px;z-index:4;height:44px;display:flex;align-items:center;justify-content:center;background:var(--paper);border-bottom:1px solid var(--line)}.planning-axis-head{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}
.planning-day-head{gap:5px}.planning-day-head strong{font-size:12px}.planning-day-head small{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;color:var(--muted)}.planning-day-head.is-today small{background:var(--accent);color:#fff;font-weight:750}
.planning-day-lane{position:relative;height:var(--planning-grid-height,1024px);background:#fff}
.planning-day-column{border-right:1px solid var(--line)}.planning-day-column:last-child{border-right:0}.planning-hour-slot{height:80px;border-bottom:1px solid var(--line)}.planning-hour-slot:hover{background:#2b77b708}
.planning-time-axis>span{position:absolute;right:10px;transform:translateY(-50%);font-size:10px;color:var(--muted)}.planning-time-axis>span:first-of-type{transform:translateY(5px)}.planning-period{position:absolute;left:calc((100% - 40px)/2);z-index:2;padding:3px 5px;border-radius:5px;font-size:9px;font-weight:750;writing-mode:vertical-rl;transform:translate(-50%,-50%) rotate(180deg);letter-spacing:.4px}.period-night{color:#627081;background:#e6ebf1}.period-morning{color:#8b6b21;background:#fff3ce}.period-afternoon{color:#366b88;background:#e7f3fa}.period-evening{color:#76588d;background:#f0e8f6}
.calendar-task{position:absolute;z-index:2;left:5px;right:5px;min-height:18px;margin:0;padding:7px 8px;overflow:hidden;box-shadow:0 2px 7px #18354a16;cursor:grab}.calendar-task:active{cursor:grabbing}.calendar-task .planning-task-head b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calendar-task .planning-task-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calendar-task:hover{z-index:5}.planning-hour-slot{cursor:pointer}
.planning-day-view .calendar-task{right:auto;width:min(160px,calc(100% - 10px))}
.lesson-roster .week-head{display:grid;grid-template-columns:auto auto 34px 190px 34px 166px minmax(0,1fr);justify-content:start;gap:12px;margin-bottom:18px}.lesson-roster .week-head .active{background:#eaf2fb;border-color:#a9cae8;color:#2469ae}.lesson-roster .week-head strong{grid-column:4;text-align:center;white-space:nowrap}.lesson-roster .week-head .calendar-picker{grid-column:6}.lesson-roster .roster-legend{grid-column:7;display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;font-weight:650;white-space:nowrap}.lesson-roster .roster-legend i{width:8px;height:8px;margin-left:7px;border-radius:50%;background:#8a6bc1}.lesson-roster .roster-legend .roster-reservation-dot{background:#cf8a3f}.lesson-roster .roster-item{border:0;border-left:3px solid #8a6bc1;background:#f2edfb;color:#5d4786;text-align:left;font:inherit}.lesson-roster .roster-item span,.lesson-roster .roster-item small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:10px;line-height:1.45}.lesson-roster .roster-item small{opacity:.78}.lesson-roster .roster-reservation{border-left-color:#cf8a3f;background:#fff3e4;color:#97622b}.lesson-roster .roster-item:hover{filter:brightness(.98);z-index:5}
[data-theme="dark"] .lesson-roster .roster-item{background:#1d3853;color:#bca8e2;box-shadow:0 2px 7px #0005}
[data-theme="dark"] .lesson-roster .roster-reservation{background:#1d3853;color:#e1b77f}
[data-theme="dark"] .lesson-roster .roster-item:hover{filter:brightness(1.08)}
.lesson-roster .week-head>:nth-child(1){grid-column:1;grid-row:1}.lesson-roster .week-head>:nth-child(2){grid-column:2;grid-row:1}.lesson-roster .week-head>:nth-child(3){grid-column:3;grid-row:1}.lesson-roster .week-head>:nth-child(4){grid-column:4;grid-row:1}.lesson-roster .week-head>:nth-child(5){grid-column:5;grid-row:1}.lesson-roster .week-head>:nth-child(6){grid-column:6;grid-row:1}.lesson-roster .week-head>:nth-child(7){grid-column:7;grid-row:1}
.lesson-detail-dialog{width:min(520px,calc(100% - 32px))}.lesson-detail-dialog form{padding:34px 32px 30px}.lesson-detail-dialog .dialog-close{left:28px;right:auto}.lesson-detail-dialog h2{padding-top:34px;margin-bottom:8px}.lesson-detail-note{margin:0 0 22px;color:var(--muted);font-size:12px}.lesson-capacity{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:10px;background:#edf5fc;color:#3c6485;font-size:12px;font-weight:700}.lesson-participant-list{display:grid;gap:0;margin:14px 0;padding:0;list-style:none;border-top:1px solid var(--line)}.lesson-participant-list li{display:flex;justify-content:space-between;align-items:center;padding:11px 2px;border-bottom:1px solid var(--line);font-size:13px;font-weight:650}.lesson-participant-list button{border:0;background:transparent;color:#b84d43;font:inherit;font-size:11px;font-weight:750;cursor:pointer}.lesson-add-participant{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-top:16px}.lesson-add-participant select{margin:0}.lesson-add-participant .primary{margin:0;white-space:nowrap}.lesson-full-note{margin:16px 0 0;padding:11px 13px;border-radius:9px;background:#fff3e3;color:#9a5b16;font-size:12px;font-weight:650}.lesson-detail-facts{display:grid;gap:12px;margin:20px 0 0}.lesson-detail-facts div{padding-bottom:12px;border-bottom:1px solid var(--line)}.lesson-detail-facts dt{color:var(--muted);font-size:11px}.lesson-detail-facts dd{margin:2px 0 0;font-size:13px;font-weight:700}
.lesson-capacity-editor{display:flex;align-items:end;gap:10px;margin-top:12px}.lesson-capacity-editor label{flex:1;margin:0}.lesson-capacity-editor input{margin-top:6px}.lesson-capacity-editor .soft-button{margin:0;white-space:nowrap}
#newLessonDialog form{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}#newLessonDialog h2{padding-top:0;margin:0 0 4px}#newLessonDialog form>label,#newLessonDialog .form-grid label{display:block;width:100%;margin:0}#newLessonDialog .form-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0}#newLessonDialog :is(input,select){display:block;width:100%;margin-top:6px}#newLessonDialog .primary.full{margin:2px 0 0}
#newLessonDialog .lesson-form-error,#lessonDetailDialog .lesson-form-error{margin:0;padding:11px 13px;border:1px solid #efb5af;border-radius:9px;background:#fff0ef;color:#b83d36;font-size:12px;font-weight:700}.roster-item{cursor:grab}.roster-item.is-dragging{opacity:.45;cursor:grabbing}.planning-day-lane.is-drop-target{box-shadow:inset 0 0 0 2px #79a8d2}
#lessonScheduleGrid .roster-drop-preview{position:absolute;z-index:4;left:5px;right:5px;display:grid;align-content:center;gap:3px;padding:7px 8px;border:2px dashed #468bc7;border-radius:7px;background:#e9f3fdbc;color:#28669e;pointer-events:none;font-size:10px;overflow:hidden}#lessonScheduleGrid .roster-drop-preview b,#lessonScheduleGrid .roster-drop-preview span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#lessonScheduleGrid .roster-drop-preview.is-unavailable{border-color:#cf625b;background:#fff0efc9;color:#a8433d}
#lessonDetailDialog h2{padding-top:0;margin:0 0 20px}#lessonDetailDialog .lesson-edit-form{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}#lessonDetailDialog .lesson-edit-form>label{display:block;width:100%;margin:0}#lessonDetailDialog .lesson-edit-form :is(input,select){display:block;width:100%;margin-top:6px}#lessonDetailDialog .lesson-edit-form .primary.full{margin:2px 0 0}#lessonDetailDialog .lesson-participants-section{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.toast.roster-error{background:#b83d36}
.schedule-conflict-warning{margin:0;padding:11px 13px;border:1px solid #efb5af;border-radius:9px;background:#fff0ef;color:#b83d36;font-size:12px;font-weight:700}
.planning-hour-slot{background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 19px,#dce5eb88 20px)}
[data-theme="dark"] .planning-time-axis,[data-theme="dark"] .planning-axis-head,[data-theme="dark"] .planning-day-head{background:#17222d}[data-theme="dark"] .planning-day-lane{background:linear-gradient(to bottom,transparent 0,transparent 383px,#192631 383px,#192631 767px,#211f2b 767px,#211f2b 1024px)}

/* De appbalk blijft boven zowel pagina-inhoud als de sticky kalenderkoppen. */
.topbar{z-index:20}
.planning-axis-head,.planning-day-head{z-index:5}

/* Een kwartier is precies 20px hoog. Houd korte afspraken compact maar leesbaar
   en laat de inhoud nooit buiten de kaart vallen. */
.calendar-task{padding:5px 7px;line-height:1.2}
.calendar-task :is(b,span,small){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-task b{font-size:11px}.calendar-task .planning-task-meta,.roster-item span,.roster-item small{margin-top:3px;font-size:10px}
.calendar-task .priority-alert{display:grid;place-items:center;overflow:visible;white-space:normal;line-height:1}
.calendar-task.is-quarter-hour{padding:2px 6px}.calendar-task.has-compact-status .planning-task-head{padding-right:20px}.calendar-task.is-quarter-hour .planning-task-meta,.calendar-task.is-quarter-hour small,.calendar-task.is-quarter-hour .availability-alert{display:none}
.planning-status{display:inline-flex!important;width:max-content;margin-top:4px;padding:2px 5px;border:0;border-radius:5px;background:#dceefc;color:#24669a;font-size:9px!important;font-weight:750;line-height:1.2;cursor:pointer}.planning-status.compact{position:absolute;top:3px;right:3px;align-items:center;justify-content:center;width:16px;height:16px;margin:0;padding:0;border:1px solid currentColor;border-radius:50%;background:#f6fbff;font-size:11px!important}.planning-status.done{background:#dff1e7;color:#287151}[data-theme="dark"] .planning-status{background:#294e6b;color:#b8ddfa}[data-theme="dark"] .planning-status.done{background:#24503d;color:#b7e3c8}[data-theme="dark"] .planning-status.compact{background:#1e3448}
@media(max-width:900px){.schedule-board{overflow:hidden}.schedule-grid{grid-template-columns:70px repeat(7,140px);overflow-x:auto;overflow-y:visible}.planning-legend{flex-basis:100%;justify-content:center}.week-head{flex-wrap:wrap}}

/* Persoonlijke mobiele dagweergave */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.my-day-shell{max-width:720px;margin:0 auto}.my-day-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}.my-day-date-control{display:flex;align-items:center;gap:7px}.my-day-date-control label{margin:0}.my-day-date-control input{margin:0;width:auto}.my-day-progress{padding:20px 22px;border-radius:15px;background:linear-gradient(120deg,#e8f2fb,#f2f7fb);margin-bottom:16px}.my-day-progress>div:first-child{display:flex;justify-content:space-between;gap:12px}.my-day-progress span{color:var(--muted);text-transform:capitalize}.my-day-progress strong{font-size:12px}.progress-track{height:7px;margin-top:14px;background:#d8e5ef;border-radius:8px;overflow:hidden}.progress-track span{display:block;height:100%;width:0;background:var(--accent);border-radius:8px;transition:width .25s}.my-day-list{display:grid;gap:10px}.my-day-card{display:grid;grid-template-columns:58px 1fr 44px;align-items:center;gap:13px;padding:17px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.my-day-card.done{opacity:.68}.my-day-card.done h2{text-decoration:line-through}.my-day-time{align-self:stretch;padding-right:12px;border-right:1px solid var(--line)}.my-day-time strong,.my-day-time span{display:block}.my-day-time strong{font-size:15px;color:var(--accent)}.my-day-time span{font-size:10px;color:var(--muted)}.my-day-task h2{margin:5px 0 2px;font-size:15px}.my-day-task p{margin:0;color:var(--muted);font-size:11px}.my-day-type{font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.4px;color:#4d7ea8}.my-day-check{width:40px;height:40px;border:1px solid #b9cbd9;border-radius:50%;background:#fff;color:#4c83b2;font-size:21px;cursor:pointer}.my-day-check.checked{background:#e3f2eb;border-color:#92c6ae;color:#29805e}.my-day-empty{text-align:center;padding:55px 20px;border:1px dashed var(--line);border-radius:15px;background:var(--paper)}.my-day-empty>span{font-size:28px;color:#4d9a78}.my-day-empty h2{margin:10px 0 3px;font-size:17px}.my-day-empty p{margin:0;color:var(--muted)}
.backup-settings{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}.backup-settings small{display:block;margin-top:3px;color:var(--muted)}.backup-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}.backup-actions .soft-button:last-of-type{grid-column:1/-1;color:#9a5b16}
[data-theme="dark"] .my-day-progress{background:linear-gradient(120deg,#1b3449,#202d38)}[data-theme="dark"] .my-day-check{background:#17222d}
.my-day-shell{max-width:1000px;margin:0}.my-day-heading{align-items:center;margin-bottom:29px}
@media(max-width:600px){#my-day.page{padding:24px 14px 48px}.my-day-heading{align-items:flex-start;flex-direction:column;margin-bottom:18px}.my-day-date-control{width:100%}.my-day-date-control label{flex:1}.my-day-date-control input{width:100%}.my-day-progress{padding:17px}.my-day-card{grid-template-columns:52px 1fr 40px;padding:14px;gap:10px}.my-day-check{width:38px;height:38px}.nav-item[data-page="my-day"]{background:#eef5fb;color:#28699f}.tasks-panel .assignee{display:none}}
@media(max-width:900px){.sidebar{transform:translateX(-100%);transition:.2s;width:260px}.sidebar.open{transform:none;box-shadow:8px 0 30px #24332a20}.menu-button{display:block;border:0;background:none;font-size:19px}main{width:100%;margin-left:0}.topbar{padding:0 20px}.page{padding:30px 20px}}

/* Desktopnavigatie kan als compacte icoonkolom worden gebruikt. */
.sidebar-toggle{display:grid;place-items:center;width:34px;height:34px;margin:0 0 0 3px;padding:0;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--muted);cursor:pointer}.sidebar-toggle svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sidebar-toggle svg.is-right{transform:scaleX(-1)}.sidebar-toggle:hover{background:#eaf2fb;color:#2469ae}@media(min-width:901px){.sidebar,main{transition:width .2s ease,margin-left .2s ease}.sidebar.is-collapsed{width:76px;padding:20px 10px}.sidebar.is-collapsed~main{width:calc(100% - 76px);margin-left:76px}.sidebar.is-collapsed .brand{justify-content:center;padding:0 0 26px}.sidebar.is-collapsed .brand>span:last-child,.sidebar.is-collapsed .nav-label,.sidebar.is-collapsed .nav-item em,.sidebar.is-collapsed .nav-item b{display:none}.sidebar.is-collapsed .nav-item{justify-content:flex-start;gap:0;padding-left:15px;font-size:0}.sidebar.is-collapsed .nav-item>span:first-child{width:15px;font-size:18px}.sidebar.is-collapsed .sidebar-toggle{margin-left:6px}.sidebar.is-collapsed .side-bottom .nav-item{margin-bottom:0}}

/* Lokale login */
.auth-locked{overflow:hidden}.auth-screen{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 20%,#edf5fc,#e4edf6 58%,#dce7f1)}.auth-screen[hidden]{display:none}.auth-card{width:min(420px,100%);padding:34px;border:1px solid #d9e3ec;border-radius:20px;background:#ffffffed;box-shadow:0 28px 90px #1837542b;backdrop-filter:blur(18px)}.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:32px;font-size:18px}.auth-card h1{margin:0 0 8px;font-size:27px;letter-spacing:-.8px}.auth-card form{padding:12px 0 0}.auth-error{min-height:19px;margin:8px 0 0;color:#b2453a;font-size:12px}.auth-card .primary{margin-top:8px;padding:12px}.auth-card label[hidden]{display:none}[data-theme="dark"] .auth-screen{background:radial-gradient(circle at 50% 20%,#22384b,#152330 60%,#101a23)}[data-theme="dark"] .auth-card{background:#17232ef2;border-color:#304353}
@media(max-width:800px){#tasks .filter-row{flex-wrap:wrap}#tasks .filter-row select{min-width:0;flex:1}#tasks .filter-row select:first-of-type{margin-left:0}.availability-row{grid-template-columns:1fr 78px 10px 78px}}

/* Planning: zelfde zichtbare actieve weergave als het lessenrooster. */
#planning .week-head .soft-button.active{background:#eaf2fb;border-color:#a9cae8;color:#2469ae}

#scheduleGrid .calendar-task.is-dragging{opacity:.45;cursor:grabbing}
#scheduleGrid .planning-drop-preview{position:absolute;z-index:4;left:5px;width:min(160px,calc(100% - 10px));display:grid;align-content:center;gap:3px;padding:7px 8px;border:2px dashed #468bc7;border-radius:7px;background:#e9f3fdbc;color:#28669e;pointer-events:none;font-size:10px;overflow:hidden}
#scheduleGrid .planning-drop-preview b,#scheduleGrid .planning-drop-preview span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* Contrastcorrecties voor dynamisch gerenderde panelen. */
:root[data-theme="dark"] :is(.stalkompas-dark-search,.stalkompas-dark-notifications,.stalkompas-dark-task-modal,.stalkompas-dark-fixed-task,.stalkompas-dark-portal-access,.stalkompas-dark-permissions-role){color:#edf4fb!important;border-color:#35485a!important}
:root[data-theme="dark"] .stalkompas-dark-search,:root[data-theme="dark"] .stalkompas-dark-notifications{background:#182532!important;box-shadow:0 20px 56px rgba(0,0,0,.45)!important}
:root[data-theme="dark"] .stalkompas-dark-search-field{overflow:hidden;color:#eef5fb!important;background:#223242!important;border:1px solid #6db5f4!important;border-radius:12px;box-shadow:0 0 0 1px rgba(109,181,244,.14)!important}
:root[data-theme="dark"] .stalkompas-dark-search-field>*{background-color:transparent!important}
:root[data-theme="dark"] .stalkompas-dark-search :is(input[type="search"],input[type="text"]),:root[data-theme="dark"] :is(.stalkompas-dark-fixed-task,.stalkompas-dark-portal-access,.stalkompas-dark-permissions-role) :is(input,select){color:#f2f7fb!important;background:#223242!important;border-color:#40566a!important;color-scheme:dark}
:root[data-theme="dark"] :is(.stalkompas-dark-search,.stalkompas-dark-task-modal)>button:first-child{color:#eaf2f8!important;background:#223242!important;border-color:#5a7287!important}
:root[data-theme="dark"] .stalkompas-dark-search input::placeholder,:root[data-theme="dark"] :is(.stalkompas-dark-fixed-task,.stalkompas-dark-portal-access,.stalkompas-dark-permissions-role) input::placeholder{color:#98aab9!important;opacity:1}
:root[data-theme="dark"] .stalkompas-dark-search input::-webkit-search-decoration,:root[data-theme="dark"] .stalkompas-dark-search input::-webkit-search-cancel-button{-webkit-appearance:none}
:root[data-theme="dark"] .stalkompas-dark-notifications>*,:root[data-theme="dark"] :is(.stalkompas-dark-portal-access,.stalkompas-dark-permissions-role) *{border-color:#40566a!important}
:root[data-theme="dark"] .stalkompas-dark-notification-row{color:#dce7f0!important;background:#1d2c3a!important;border-color:#35485a!important}
:root[data-theme="dark"] .stalkompas-dark-notification-row :is(strong,b){color:#eef5fb!important}
:root[data-theme="dark"] .stalkompas-dark-notification-row :is(p,small,span),:root[data-theme="dark"] :is(.stalkompas-dark-fixed-task,.stalkompas-dark-portal-access,.stalkompas-dark-permissions-role) :is(p,small){color:#aebdca!important}
:root[data-theme="dark"] .stalkompas-dark-notification-row:hover{background:#24384a!important}
:root[data-theme="dark"] :is(.stalkompas-dark-fixed-task,.stalkompas-dark-portal-access,.stalkompas-dark-permissions-role){background:#1c2a38!important}
:root[data-theme="dark"] :is(.stalkompas-dark-fixed-task,.stalkompas-dark-portal-access,.stalkompas-dark-permissions-role) :is(h1,h2,h3,h4,strong,label,legend,span){color:#edf4fb!important}
:root[data-theme="dark"] .stalkompas-dark-portal-access input[type="checkbox"]{accent-color:#2c78ba}

/* Donkere varianten voor vaste panelen die in andere stylesheets een lichte
   achtergrond krijgen. Deze zijn niet afhankelijk van dynamische classes. */
:root[data-theme="dark"] .portal-intro,
:root[data-theme="dark"] .permission-role-bar,
:root[data-theme="dark"] .permission-table-head { background:#18232e; }
:root[data-theme="dark"] .portal-intro :is(h2,p,label,b),
:root[data-theme="dark"] .permission-role-bar :is(strong,small),
:root[data-theme="dark"] .permission-table-head { color:#edf4fb; }
:root[data-theme="dark"] .portal-intro .eyebrow { color:#9fb8cc; }
:root[data-theme="dark"] .portal-intro p:not(.eyebrow),
:root[data-theme="dark"] .permission-role-bar small { color:#b7c9d8; }
:root[data-theme="dark"] .portal-switch { color:#dbe7f1; }
:root[data-theme="dark"] .portal-note { background:#21384e; color:#c2d7e8; }
:root[data-theme="dark"] .portal-rule { border-color:var(--line); }
:root[data-theme="dark"] .portal-domain { color:#dbe7f1; }
:root[data-theme="dark"] .portal-domain strong { color:#89c4f5; }
:root[data-theme="dark"] .permission-check,
:root[data-theme="dark"] .permission-toggle { color:#d5e1eb; }
:root[data-theme="dark"] .permission-row { color:var(--ink); }
:root[data-theme="dark"] .status,
:root[data-theme="dark"] .status.soft { background:#183d5b; color:#b9ddfb; }

/* Locaties gebruiken dezelfde herkenbare icoontegel voor paarden en locaties. */
.location-mark { display:grid; place-items:center; width:43px; height:43px; border-radius:12px; background:#eaf0fb; color:#3979b5; font-size:20px; line-height:1; }
:root[data-theme="dark"] .location-mark { background:#203a56; color:#82bef4; }

/* Meldingen blijven ook in donkere modus één donker, leesbaar vlak. */
:root[data-theme="dark"] .notification-panel { background:#182532; border-color:#35485a; box-shadow:0 18px 45px rgba(0,0,0,.45); }
:root[data-theme="dark"] .notification-panel-head { border-color:#35485a; }
:root[data-theme="dark"] .notification-panel :is(strong,.notification-item) { color:#edf4fb; }
:root[data-theme="dark"] .notification-panel :is(small,.notification-item small) { color:#adbfce; }
:root[data-theme="dark"] .notification-item { background:#1b2a38; border-color:#35485a; color:#edf4fb; }
:root[data-theme="dark"] .notification-item:hover { background:#24384a; }
:root[data-theme="dark"] .notification-item.is-read { opacity:.78; }
:root[data-theme="dark"] .notification-kind { background:#213d58; color:#91c8f6; }
:root[data-theme="dark"] .notification-kind.priority { background:#4a2d31; color:#ffaea1; }
:root[data-theme="dark"] .notification-kind.conflict { background:#4a3b25; color:#f5c67b; }

/* De vaste-taakkeuze is onderdeel van de taakdialoog en volgt direct het thema. */
:root[data-theme="dark"] #taskDialog .planning-template-field { background:#1c2a38; border-color:#40566a; color:#edf4fb; }
:root[data-theme="dark"] #taskDialog .planning-template-field span { color:#aebdca; }
:root[data-theme="dark"] #taskDialog .planning-template-field select { background:#223242; border-color:#40566a; color:#f2f7fb; color-scheme:dark; }
/* Transparant StalKompas-logo: identiek in lichte en donkere modus. */
.brand-logo{position:relative;display:inline-flex;align-items:center;height:46px;width:188px;flex:0 0 188px;overflow:visible}
.brand-logo img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center;background:transparent}
:root[data-theme="dark"] .brand-logo img{filter:drop-shadow(0 3px 9px rgba(0,0,0,.22))}
.auth-brand{margin-bottom:32px}.auth-brand .brand-logo{height:50px;width:205px;flex-basis:205px}
.sidebar.is-collapsed .brand-logo{width:42px;flex-basis:42px;height:42px;overflow:hidden}
.sidebar.is-collapsed .brand-logo img{width:126px;max-width:none;height:42px;object-fit:contain;object-position:left center}
/* Het brede woordmerk staat gecentreerd in de navigatiekop. */
.sidebar .brand{justify-content:center;padding-left:0;padding-right:0}
/* In donkere modus is het zonnetje de duidelijke actie om lichte modus te activeren. */
:root[data-theme="dark"] .theme-toggle .sun-svg{color:#f4c542;stroke:#f4c542;filter:drop-shadow(0 0 4px rgba(244,197,66,.24))}

.organization-overview-actions{padding:0 25px 25px}.organization-overview-actions .primary{margin:0}

.organization-overview-actions{padding:0 25px 25px}.organization-overview-actions .primary{margin:0}

.organization-page-grid{width:min(100%,620px)}.organization-settings-panel #organizationForm{display:block;padding:26px;position:static}.organization-settings-panel #organizationForm>label{display:block;margin:0 0 16px}.organization-settings-panel #organizationForm input,.organization-settings-panel #organizationForm select{width:100%}.organization-settings-panel .organization-hours{margin:0 0 12px}.organization-settings-panel .setting-note{margin:15px 0}.organization-settings-panel .backup-settings{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}@media(max-width:900px){.organization-page-grid{grid-template-columns:1fr}}

/* Dashboard aandacht: maximaal vijf regels per pagina. */
.attention-pagination{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;font-weight:700;white-space:nowrap}
.attention-pagination[hidden]{display:none}
.attention-pagination button{width:27px;height:27px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
.attention-pagination button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.attention-pagination button:disabled{opacity:.35;cursor:default}
.attention-pagination span{min-width:36px;text-align:center}
.attention-empty{padding:18px 0 23px}
:root[data-theme="dark"] .attention-pagination button{background:#162432}


/* v5 — eenduidige navigatieknoppen en vaste sidebar-kop */
.sidebar{overflow:hidden}
.sidebar-header{display:flex;align-items:center;gap:10px;flex:0 0 auto;position:sticky;top:0;z-index:3;padding:0 0 14px;background:inherit}
.sidebar-header .brand{flex:1;min-width:0;padding:0;margin:0}
.sidebar-header .sidebar-toggle{margin-left:auto;flex:0 0 auto}
.sidebar-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-bottom:18px;scrollbar-width:thin}
.sidebar-scroll::-webkit-scrollbar{width:8px}
.sidebar-scroll::-webkit-scrollbar-thumb{background:rgba(116,128,135,.28);border-radius:999px}
.menu-button,.sidebar-toggle{display:grid;place-items:center}
.menu-button svg,.sidebar-toggle svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menu-button svg.is-right,.sidebar-toggle svg.is-right{transform:scaleX(-1)}
.menu-button:hover,.sidebar-toggle:hover{background:#eaf2fb;color:#2469ae}
@media (min-width:901px){
  .sidebar.is-collapsed .sidebar-header{justify-content:center;gap:8px;padding-bottom:12px}
  .sidebar.is-collapsed .sidebar-header .brand{flex:0 0 auto}
  .sidebar.is-collapsed .sidebar-header .sidebar-toggle{margin-left:0}
}


/* v12 — topbar-menu alleen mobiel/tablet */
.topbar{justify-content:space-between}
.date-control{margin-right:auto;text-align:left}
@media (min-width:901px){
  .menu-button{display:none!important}
  .topbar{justify-content:space-between}
  .date-control{margin-right:auto}
}