/* Alleen de app-ondergrond en bediening veranderen; Excel-/planningkleuren blijven ongemoeid. */
html[data-theme="dark"] { --muted:#a9b7c8; background:#101722; color-scheme:dark; }
html[data-theme="dark"] body { background:#101722; color:#eef2f7; }
html[data-theme="dark"] header, html[data-theme="dark"] nav,
html[data-theme="dark"] .hero, html[data-theme="dark"] .card,
html[data-theme="dark"] .tile, html[data-theme="dark"] .planrow,
html[data-theme="dark"] .qr, html[data-theme="dark"] .existingPlanningWeekHeader {
  background:#1d2938; color:#eef2f7; border-color:#36465b;
}
html[data-theme="dark"] .row, html[data-theme="dark"] td,
html[data-theme="dark"] th, html[data-theme="dark"] .weekLeaveRow,
html[data-theme="dark"] .employeePlanningDay, html[data-theme="dark"] .homePlanningDay,
html[data-theme="dark"] .planningActions { border-color:#36465b !important; }
html[data-theme="dark"] .muted, html[data-theme="dark"] .small,
html[data-theme="dark"] .stat .label, html[data-theme="dark"] label,
html[data-theme="dark"] th, html[data-theme="dark"] .appVersion,
html[data-theme="dark"] .headerLoggedEmployee,
html[data-theme="dark"] .planningWeekMarker,
html[data-theme="dark"] .weekLeaveDate,
html[data-theme="dark"] .vdwLogisticsDate,
html[data-theme="dark"] .vdwLogisticsEmpty,
html[data-theme="dark"] .deliveryHeroDate,
html[data-theme="dark"] .deliveryHeroCustomer,
html[data-theme="dark"] .deliveryHeroProject,
html[data-theme="dark"] .deliveryHeroEmpty,
html[data-theme="dark"] .planningHoursLine,
html[data-theme="dark"] .workedHours,
html[data-theme="dark"] .adminGateDivider,
html[data-theme="dark"] .hero p { color:#a9b7c8; }
html[data-theme="dark"] .employeePlanningItem,
html[data-theme="dark"] .planningUnifiedItem,
html[data-theme="dark"] .homePlanRow,
html[data-theme="dark"] #planning .planrow,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .person,
html[data-theme="dark"] .workorder,
html[data-theme="dark"] .timer,
html[data-theme="dark"] .sickDayBox,
html[data-theme="dark"] .vdwLogisticsSection,
html[data-theme="dark"] .deliveryHeroItem,
html[data-theme="dark"] .deliveryNotice,
html[data-theme="dark"] .homeDeliveryNotice,
html[data-theme="dark"] .status,
html[data-theme="dark"] .loggedbar,
html[data-theme="dark"] .manualOrder {
  background:#253449; color:#eef2f7; border-color:#3b5069;
}
html[data-theme="dark"] .sickDayBox.active { background:#1a3a32; border-color:#407f60; }
html[data-theme="dark"] .deliveryHeroToggle { background:#374b63; color:#eef2f7; }
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .back,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .companyButton,
html[data-theme="dark"] .taskbtn,
html[data-theme="dark"] .oldOrdersButton { background:#35475e; color:#f2f6fb; border-color:#536780; }
html[data-theme="dark"] .primary,
html[data-theme="dark"] .formrow button { background:#377de7; color:#fff; }
html[data-theme="dark"] input, html[data-theme="dark"] select,
html[data-theme="dark"] textarea, html[data-theme="dark"] .searchBox,
html[data-theme="dark"] .formrow input,
html[data-theme="dark"] .filters input,
html[data-theme="dark"] .filters select,
html[data-theme="dark"] .adminGateLogin input {
  background:#182536; color:#eef2f7; border-color:#52647a;
}
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color:#a9b7c8; opacity:1; }
html[data-theme="dark"] nav button { color:#eef2f7; }
html[data-theme="dark"] .ok { background:#1a3a32; color:#d5f4df; }
html[data-theme="dark"] .warn, html[data-theme="dark"] .overtime { background:#4a3b21; color:#ffe3a4; }
html[data-theme="dark"] .error { background:#4c282d; color:#ffd5d9; }
html[data-theme="dark"] .weekBad, html[data-theme="dark"] .danger { color:#ff9e9e; }
/* Badges, dots en gekleurde planningcellen behouden hun bestaande Excel-kleur en tekstcontrast. */
.settingsRow { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.settingsRow select { width:auto; min-width:135px; padding:10px; border-radius:9px; }
@media(max-width:520px){ .settingsRow { align-items:stretch; flex-direction:column; } .settingsRow select { width:100%; } }
@media print {
  html[data-theme="dark"] body, html[data-theme="dark"] .card,
  html[data-theme="dark"] .qr, html[data-theme="dark"] .person {
    background:#fff; color:#111827;
  }
}