:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #111820; --color-surface: #1b2530; --color-surface-soft: #202d3a;
  --color-control: #14202b; --color-text: #edf2f7; --color-muted: #b0bfce;
  --color-border: #405062; --color-danger: #ed786f; --color-success: #81d59a;
  --color-primary-hover: #f39b56; --shadow: 0 4px 24px #0004;
}
[data-theme="dark"] :is(.report-item.resolved,.availability-stat,.availability-chip,.availability-modal,.modal-body,.account-default-panel,.candidature-card,.availability-referee-card,.availability-filter-panel,.quiz-answer,.badge,.availability-day-row,.availability-panel,.availability-table,.calendar-day,.calendar-event) { background: var(--color-surface); color: var(--color-text); }
[data-theme="dark"] :is(.notice.warning,.club-warning,.match-report-link,.badge.off,.quiz-answer.wrong) { color: #ffb48f; background: #412c23; }
[data-theme="dark"] :is(.badge.ok,.quiz-answer.correct,.availability-chip) { color: #a1e7b5; background: #203a2c; }
[data-theme="dark"] :is(input,select,textarea) { background: var(--color-control); color: var(--color-text); }
[data-theme="dark"] .button.danger { color: #1b1515; }
.preserve-lines { white-space: pre-wrap; overflow-wrap: anywhere; }
@media print { [data-theme-toggle] { display:none; } :root[data-theme="dark"] { --color-bg: white; --color-surface: white; --color-surface-soft:white; --color-text:black; --color-muted:#444; color-scheme:light; } }

[data-theme="dark"] :is(.custom-select-search,.availability-range-fallback,.availability-mini-table > div,.availability-calendar-day,.availability-day-title,.availability-day-row h2,.availability-subtitle,.availability-chip,.date-chip,.date-chip button,.calendar-slot,.calendar-slot.temporary,.candidature-message,.badge.status,.flash.success,.flash.error) { background: var(--color-surface-soft); color: var(--color-text); }
[data-theme="dark"] .availability-calendar-day.outside { background: var(--color-bg); }

[data-theme="dark"] body { background: var(--color-bg); }
[data-theme="dark"] .site-header { background: #1b2530f5; }
.site-header { flex-wrap: wrap; gap: 12px; }
.nav { flex-wrap: wrap; gap: 12px; }