/* Mobile-only opt-in layer: legacy dark styles and desktop layout stay intact. */
.mobile-theme-control { display: none; }
@media screen and (max-width: 800px) {
  .mobile-theme-control:not([hidden]) {
    display: flex; justify-content: flex-end; align-items: center; gap: 8px;
    padding: calc(8px + env(safe-area-inset-top)) 17px 8px;
    background: #061725; color: #eef8f4; font-size: 12px;
  }
  .mobile-theme-control select {
    min-height: 44px; padding: 8px 12px; border: 1px solid #527085;
    border-radius: 8px; background: #0c2232; color: #fff; font: inherit;
  }
  .mobile-theme-control select:focus-visible { outline: 3px solid #1875f5; outline-offset: 2px; }
  :root[data-mobile-theme="light"] {
    --mobile-ink: #102033; --mobile-muted: #435c70;
    --mobile-line: #c3d3dc; --mobile-paper: #fff; --mobile-soft: #eef4f7;
    color-scheme: light;
  }
  :root[data-mobile-theme="light"] body,
  :root[data-mobile-theme="light"] .app-shell,
  :root[data-mobile-theme="light"] .app-content,
  :root[data-mobile-theme="light"] .mobile-theme-control,
  :root[data-mobile-theme="light"] .site-legal-footer {
    background: #f7f9fa; color: var(--mobile-ink);
  }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell,.legal-page) { color: var(--mobile-ink); }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell,.legal-page) :is(h1,h2,h3,h4,strong,b,legend,dd) { color: var(--mobile-ink)!important; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell,.legal-page) :is(p,small,label,dt,li,.cost-note,.legend,.readonly-note,.agenda-export-help,.reservation-detail-readonly,.news-summary-line) { color: var(--mobile-muted)!important; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell,.legal-page) a { color: #086c50; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(input:not([type=checkbox]):not([type=radio]),select,textarea),
  :root[data-mobile-theme="light"] .mobile-theme-control select {
    background: #fff!important; border-color: #829bad!important; color: var(--mobile-ink)!important; color-scheme: light;
  }
  :root[data-mobile-theme="light"] body :is(input,textarea)::placeholder { color: #526b7e!important; opacity: 1; }
  :root[data-mobile-theme="light"] option { background: #fff; color: #102033; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(
    .form-card,.request-card,.dashboard-clock,.working-now,.daily-reservations,.weekly-labor,.empty-panel,
    .settings-card,.settings-summary>*,.tiles>article,.report-kpis>article,.quick-links>a,.settings-menu-card,
    .data-list article,.expense-summary article,.expense-list>article,.expense-review,.reservation-summary article,
    .reservation-list article,.dashboard-arrivals article,.room-breakdown article,.staff-table-card,.staff-detail,
    .report-section,.report-card,.hours-record,.period-actions,.hours-selection-help,.hours-day-filter a,
    .hours-summary a,.mobile-card,.mobile-empty,.employee-month-meter,.week-hour-card,.week-hour-empty,
    .next-shift-card>div,.workday-row,.featured-open,.workday-news,.team-day,.agenda-list article,
    .news-post,.new-post,.news-overview,.absence-summary>div,.absence-list-panel,.absence-create,
    .absence-history,.absence-help,.function-add,.function-editor-list,.reservation-detail-card,
    .availability-calendar article,.availability-calendar.multi-select label,.availability-choice,
    .hours-mobile-summary article,.my-hours-list>article,.availability-time-fields,.mobile-accordion-toggle,.roster-matrix,
    .room-tabs a,.day-nav a,.day-nav input,.activity-log-list article,.legal-document
  ) { background: #fff!important; border-color: var(--mobile-line)!important; color: var(--mobile-ink)!important; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(
    .record-detail,.absence-decision,.team-day>header,.roster-head,.staff-table-head,.hours-row.heading,
    .report-row.heading,.reservation-detail-note,.notification-help,.function-lane article,.correction-box
  ) { background: #eef4f7!important; border-color: var(--mobile-line)!important; color: var(--mobile-ink)!important; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(
    .team-shift.is-mine,.availability-calendar article.beschikbaar,.availability-calendar.multi-select label.beschikbaar,
    .availability-choice label:has(input:checked),.hours-day-filter a.active,
    .hours-summary a.active,.room-tabs a.active,.agenda-tabs a.active,.mobile-accordion-toggle[aria-expanded=true],
    .function-lane article.present,.reservation-roster-card,.unscheduled-present,.next-reservation
  ) { background: #e7f8f1!important; border-color: #39a882!important; color: #075b40!important; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(
    .agenda-tabs,.agenda-tabs a,.team-shift,.team-time,.team-day>header,.news-tabs,.news-summary-line,
    .absence-tabs,.absence-request-card,.sickness-card,.absence-history article,.function-editor-list>form,
    .reservation-detail-list div,.reservation-detail-card>header,.mail-test-card dl>div,.staff-account-actions,
    .hours-record details,.dashboard>header,.mobile-shell>header,.post-manage
  ) { border-color: var(--mobile-line); }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(
    .team-time,.agenda-week>div strong,.workday-row>div span,.week-hour-total em,.month-meter-copy span,
    .reservation-detail-list dd,.absence-summary span,.hours-record>.hours-row,.news-tabs a,.agenda-tabs a,
    .news-content>p,.mobile-close,.reservation-detail-header a,.function-usage strong
  ) { color: var(--mobile-ink)!important; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(
    .workday-news>div em,.reservation-none,.week-bars i span,.team-day-shifts>p,
    .hours-record>.hours-row>span::before,.activity-log-list time span,.calendar-head span,.function-lane>span,
    .hours-summary.status-tabs a.active span,.hours-record>.hours-row>span:nth-child(3),
    .employee-reservations-readonly .section-title>span,.employee-week-hours>.section-title span,.agenda-week span
  ) { color: var(--mobile-muted)!important; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(
    .agenda-export-all,.agenda-shift-export,.employee-month-meter .section-title a,.hours-record summary,
    .hours-selection-help button,.own-shift summary,.month-nav a,.news-tabs a.active,.post-manage>summary,
    .workday-section .section-title a,.my-hours-list summary,.employee-hours-page .hours-total i
  ) { color: #086c50!important; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(.agenda-export-all,.agenda-tabs,.agenda-week>a,.mobile-close,.reservation-detail-header a) { background: #fff; border-color: #829bad; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(.day-cell.unavailable,.availability-calendar article.niet_beschikbaar,.tags i,.status.gearchiveerd) { background: #e6edf1; color: #344e61; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(.news-meta>i,.team-day>header span,.activity-ip,.status.actief,.reservation-detail-status) { background: #e0f5eb; color: #075b40; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(.clock-warning,.birthday-banner,.function-lane article.concept,.report-kpis>article.attention,.status.geblokkeerd) { background: #fff5df!important; border-color: #bb8d35!important; color: #704600!important; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(.clock-warning strong,.birthday-banner small,.week-hour-total em.minus,.pending) { color: #704600!important; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(.birthday-banner>i,.availability-calendar button) { background: #e6edf1; color: #344e61; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(.availability-calendar button[value=beschikbaar],.team-shift em,.week-hour-total em.plus) { color: #086c50; }
  :root[data-mobile-theme="light"] body .availability-calendar button[value=niet_beschikbaar] { color: #a3293d; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(.error-box,.flash.error,.danger,.hours-delete) { background: #fff0f2!important; border-color: #c66172!important; color: #9f2438!important; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(.success-box,.flash.success) { background: #e7f8ef!important; border-color: #3c9b72!important; color: #075b40!important; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) .invalid-field { background: #fff4f5!important; border-color: #b1263d!important; color: #102033!important; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) .field-error-text { color: #a3293d!important; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(.button:not(.secondary):not(.danger):not(.text-button),.mobile-primary) { background: #1264cf!important; border-color: #1264cf!important; color: #fff!important; text-shadow: none!important; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(.button:not(.secondary):not(.danger):not(.text-button),.mobile-primary):hover { background: #0c53b0!important; color: #fff!important; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(.secondary,.button.secondary,.ghost) { background: #fff!important; border-color: #829bad!important; color: #214b6b!important; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(.button.danger,button.danger,a.danger) { background: #fff0f2!important; border-color: #c66172!important; color: #9f2438!important; }
  :root[data-mobile-theme="light"] body :is(.dashboard,.mobile-shell) :is(button:disabled,.button[aria-disabled=true]) { opacity: .65; }
  :root[data-mobile-theme="light"] .mobile-bottom-nav { background: #fffffff5; border-color: #c3d3dc; }
  :root[data-mobile-theme="light"] .mobile-bottom-nav a { color: #365268; }
  :root[data-mobile-theme="light"] .mobile-bottom-nav a.active { background: #e0f5eb; color: #075b40; }
  :root[data-mobile-theme="light"] .site-legal-footer a { color: #435c70; }
  :root[data-mobile-theme="light"] body .mobile-theme-control label,
  :root[data-mobile-theme="light"] body .team-time i { color: #435c70; }
  :root[data-mobile-theme="light"] body .availability-calendar.multi-select label.niet_beschikbaar { background: #e6edf1!important; }
  :root[data-mobile-theme="light"] body .availability-calendar.multi-select label.selected>span { background: #087d57; color: #fff; }
  :root[data-mobile-theme="light"] body .availability-calendar label i { color: #155aaa; }
  :root[data-mobile-theme="light"] body .featured-open em { color: #fff; }
  :root[data-mobile-theme="light"] body .today-actions>a { color: #102033; }
  :root[data-mobile-theme="light"] .month-meter-ring { background: conic-gradient(#16c784 calc(var(--progress)*1%),#dfe9e5 0); }
  :root[data-mobile-theme="light"] .month-meter-ring::before { background: #fff; }
  :root[data-mobile-theme="light"] .week-bars { border-color: #c3d3dc; background-image: linear-gradient(#dde7ec 1px,transparent 1px); }
  :root[data-mobile-theme="light"] .floor-map { background-color: #f5f8fa; }
  :root[data-mobile-theme="light"] .reservation-roster-row { background: #f1f8f5; }
  :root[data-mobile-theme="light"] .app-notification-popup { background: #fff; color: #102033; }
  :root[data-mobile-theme="light"] .app-notification-popup :is(p,small,button) { color: #435c70; }
  :root[data-mobile-theme="light"] .legal-page { background: #f7f9fa; }
  :root[data-mobile-theme="light"] .legal-document { background: #fff; border-color: #c3d3dc; }
  :root[data-mobile-theme="light"] :is(.legal-lead,.legal-contact,.legal-back) { background: #eef8f3; color: #102033!important; border-color: #b8d9ce; }
  :root[data-mobile-theme="light"] .retention-row:nth-child(even) { background: #f1f5f7; }
}
@media screen and (max-width:800px) {
  :root[data-mobile-theme="light"] body .dashboard.roster-page :is(.week-strip a,.roster-toolbar,.weekend-cell:not(.available):not(.unavailable),.add-shift) { background:#f1f5f7!important; border-color:#b9ccd8!important; color:#102033!important; }
  :root[data-mobile-theme="light"] body .dashboard.roster-page .week-strip a.active { background:#e4f1ff!important; border-color:#1264cf!important; }
  :root[data-mobile-theme="light"] body .dashboard.roster-page .person-color .shift-card { background:hsl(var(--person-hue) 72% 94%)!important; color:#102033!important; border-left-color:hsl(var(--person-hue) 65% 42%)!important; }
  :root[data-mobile-theme="light"] body .dashboard.roster-page .person-color .shift-card:hover { background:hsl(var(--person-hue) 72% 89%)!important; }
  :root[data-mobile-theme="light"] body .dashboard.roster-page .reservation-initials { color:#075b40!important; }
}

@media screen and (max-width:800px) { :root[data-mobile-theme=light] body .dashboard.roster-page .week-strip a span { color:#435c70!important; } }