/* Shared controls. The light palette stays the default. */
button.theme-toggle {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--theme-surface, #fff);
  color: var(--ink);
  cursor: pointer;
}
button.theme-toggle[hidden] { display: none; }
.theme-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-auth-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.theme-auth-title h1 { min-width: 0; overflow-wrap: anywhere; }

/* The switch fits inside the home identity area, alongside the existing logo. */
.volunteer-home .volunteer-top.has-theme-toggle {
  grid-template-columns: 58px minmax(0, 1fr);
  column-gap: 8px;
}
.volunteer-home .has-theme-toggle .volunteer-identity {
  display: flow-root;
  grid-area: 1 / 2 / 3;
  min-width: 0;
}
.volunteer-home .has-theme-toggle .volunteer-event {
  font-size: clamp(17px, 4.3vw, 22px);
}
.volunteer-home .has-theme-toggle .volunteer-context { display: block; font-size: 12px; line-height: 14px; }
.volunteer-home .has-theme-toggle .volunteer-round:not([hidden]) {
  display: inline-block;
  margin-inline-start: 5px;
  vertical-align: top;
}
.volunteer-home .has-theme-toggle .theme-toggle {
  float: right;
  margin-inline-start: 8px;
  border-color: #ffffff60;
  color: var(--glacier);
  background: transparent;
}
@media (max-width: 365px) {
  .volunteer-home .volunteer-top.has-theme-toggle {
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 6px;
  }
  .volunteer-home .has-theme-toggle .volunteer-brand .charte-logo { width: 52px; }
  .volunteer-home .has-theme-toggle .theme-toggle { margin-inline-start: 6px; }
  .volunteer-home .has-theme-toggle .volunteer-challenge { font-size: 11px; }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #081828;
  --ink: #edf6fc;
  --muted: #b5cbdc;
  --line: #36546b;
  --navy: #0b2844;
  --navy2: #163650;
  --blue: #9bdff4;
  --cyan: #19354d;
  --green: #b8ebcb;
  --red: #ffcbce;
  --violet: #153650;
  --violet-dark: #0b2844;
  --violet-pale: #19354d;
  --shadow: none;
  --theme-surface: #10273c;
  --theme-field: #7a9ab2;
  --theme-action-text: #092137;
  --theme-action-hover: #b7eafb;
  --theme-good-bg: #183d33;
  --theme-warn-bg: #45351d;
  --theme-warn-text: #ffe0a8;
  --theme-hatch: #533e21;
  --theme-error-bg: #482a35;
  background: var(--paper);
  color: var(--ink);
}
html[data-theme="dark"] body { background-color: var(--paper); color: var(--ink); }
html[data-theme="dark"] :is(input:not([type="radio"], [type="checkbox"]), select, textarea) {
  background-color: var(--theme-surface);
  color: var(--ink);
  border-color: var(--theme-field);
}
html[data-theme="dark"] :is(input, textarea)::placeholder { color: var(--muted); }
html[data-theme="dark"] dialog {
  background: var(--theme-surface);
  color: var(--ink);
  border-color: var(--line);
}

/* Administration surfaces, actions and semantic states. */
html[data-theme="dark"] .admin-page :is(.topbar, .panel, .stat, .entity-card, .modal-head, .modal-actions, .btn) {
  background: var(--theme-surface);
}
html[data-theme="dark"] .admin-page :is(.entity-card:hover, .entity-card.selected, .connected-round-row.selected, .btn:hover, .event-summary, .data-table th, .round-index, .mini-avatar, .credential, .deletion-name, .scope-picker, .helper) {
  background: var(--cyan);
  border-color: var(--line);
}
html[data-theme="dark"] .admin-page :is(.entity-card.selected, .connected-round-row.selected) {
  box-shadow: inset 3px 0 var(--blue);
}
html[data-theme="dark"] .admin-page :is(.data-table td, .round-row, .management-card) { border-color: var(--line); }
html[data-theme="dark"] .admin-page .btn.ghost,
html[data-theme="dark"] .admin-page .management-tabs .btn { background: transparent; }
html[data-theme="dark"] .admin-page .management-tabs .btn[aria-selected="true"] { color: var(--blue); }
html[data-theme="dark"] .admin-page :is(.helper, .round-index, .mini-avatar) { color: var(--blue); }
html[data-theme="dark"] .admin-page :is(.event-summary small, .participant-status-item.empty) { color: var(--muted); }
html[data-theme="dark"] .admin-page .btn.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--theme-action-text);
}
html[data-theme="dark"] .admin-page .btn.primary:hover { background: var(--theme-action-hover); }
html[data-theme="dark"] .admin-page .btn.destructive {
  background: var(--theme-error-bg);
  color: var(--red);
  border-color: var(--red);
}
html[data-theme="dark"] .admin-page .badge { background: var(--cyan); color: var(--muted); }
html[data-theme="dark"] .admin-page .badge.blue { color: var(--blue); }
html[data-theme="dark"] .admin-page :is(.badge.green, #feedback, .race-success) {
  background: var(--theme-good-bg);
  color: var(--green);
}
html[data-theme="dark"] .admin-page :is(.notice, .prototype-tag, .badge.orange, .round-row.is-final, .round-row.is-final .round-index) {
  background: var(--theme-warn-bg);
  color: var(--theme-warn-text);
  border-color: var(--theme-warn-text);
}
html[data-theme="dark"] .admin-page :is(.error, .badge.red, #feedbackError) {
  background: var(--theme-error-bg);
  color: var(--red);
}
html[data-theme="dark"] .admin-page .participant-status-item.good { color: var(--green); }
html[data-theme="dark"] .admin-page .participant-status-item.bad { color: var(--red); }
html[data-theme="dark"] .admin-page .participant-status-item.neutral { color: var(--blue); }
html[data-theme="dark"] .admin-page :is(.participant-status-item.review, .participant-status-unavailable) { color: var(--theme-warn-text); }
html[data-theme="dark"] #wizardRows tr { background: var(--theme-good-bg); color: var(--green); }
html[data-theme="dark"] #wizardRows tr.has-conflict { background: var(--theme-warn-bg); color: var(--theme-warn-text); }
html[data-theme="dark"] .helloasso-conflict {
  background: repeating-linear-gradient(135deg, var(--theme-hatch) 0 7px, var(--theme-warn-bg) 7px 14px);
}
html[data-theme="dark"] .helloasso-conflict small { color: var(--theme-warn-text); }

html[data-theme="dark"] :is(.race-detail-grid > div, .results-attendance, .results-admin .results-cycle > details, .results-admin .results-check) {
  background: var(--cyan);
  border-color: var(--line);
}
html[data-theme="dark"] :is(.race-detail-grid dt, .race-detail-grid small, .race-note, .score-calculation dt, .results-admin .results-caption, .results-table td::before) {
  color: var(--muted);
}
html[data-theme="dark"] :is(.results-admin pre, .start-admin .start-block) {
  background: var(--theme-surface);
  border-color: var(--line);
}
html[data-theme="dark"] :is(.results-table th, .results-table td, .results-table tr, .results-admin .results-cycle, .race-editor [data-race-preview-area], .start-admin #startHistory li) {
  border-color: var(--line);
}
html[data-theme="dark"] :is(.results-admin .results-error, .club-alert, .capture-post .summit-unknown) { color: var(--red); }
html[data-theme="dark"] :is(.race-editor input:disabled, .race-editor select:disabled) { background: var(--cyan); color: var(--muted); }

/* Volunteer cards, capture controls, alerts and the collective start. */
html[data-theme="dark"] .volunteer-home :is(.app, .clock-card, .restricted-tile, .tile:not(a)) {
  background: var(--theme-surface);
  color: var(--ink);
}
html[data-theme="dark"] .volunteer-home .app { background: var(--paper); }
html[data-theme="dark"] .volunteer-home a.tile { background: #153650; border-color: var(--line); }
html[data-theme="dark"] .volunteer-home a.tile:hover { background: var(--cyan); }
html[data-theme="dark"] .volunteer-home .clock-state { background: var(--theme-warn-bg); color: var(--theme-warn-text); }
html[data-theme="dark"] .volunteer-home .clock-card.running .clock-state { background: var(--theme-good-bg); color: var(--green); }
html[data-theme="dark"] .post-page :is(.card, .panel, .start-app section) { background: var(--theme-surface); }
html[data-theme="dark"] .post-page :is(.person-info, #summary) { background: var(--cyan); color: var(--ink); }
html[data-theme="dark"] .post-page :is(.history-row, .progress-row) { border-color: var(--line); }
html[data-theme="dark"] .start-app { color-scheme: dark; }
html[data-theme="dark"] :is(.start-app .limits, .start-admin .start-help) { color: var(--muted); }
html[data-theme="dark"] :is(.post-page .warning, .start-admin .warning, .post-page .unknown) { color: var(--theme-warn-text); }
html[data-theme="dark"] :is(.start-app .warning, .start-admin .warning, .post-page .unknown) { background: var(--theme-warn-bg); }
html[data-theme="dark"] :is(#confirmation, .start-admin .start-running, .start-admin #startAdminMessage:not(:empty)) {
  background: var(--theme-good-bg);
  color: var(--green);
}
html[data-theme="dark"] :is(.start-admin #startAdminMessage.start-error, .capture-post #message[data-level="error"]) {
  background: var(--theme-error-bg);
  color: var(--red);
  border-color: var(--red);
}
html[data-theme="dark"] .capture-post #message[data-level="pending"] {
  background: var(--theme-warn-bg);
  color: var(--theme-warn-text);
  border-color: var(--theme-warn-text);
}
html[data-theme="dark"] .capture-post #message[data-level="success"] { color: var(--green); }
html[data-theme="dark"] .capture-post :is(main button, dialog button, #save, .back-top),
html[data-theme="dark"] .start-app main button:not(.give-start) { color: var(--theme-action-text); }
html[data-theme="dark"] .capture-post :is(main button:hover, dialog button:hover, #save:hover, .back-top:hover) {
  background: var(--theme-action-hover);
  border-color: var(--theme-action-hover);
}
html[data-theme="dark"] .capture-post :is(.result, .progress-select, #results button, #change, .selected-heading button, #cancelConfirm, .choices span) {
  background: var(--cyan);
  color: var(--ink);
}
html[data-theme="dark"] .capture-post :is(.result:hover, .progress-select:hover, #results button:hover, #change:hover, .selected-heading button:hover, #cancelConfirm:hover, .choices input:checked + span, .progress-badge, .call-button:hover) {
  background: var(--glacier);
  color: var(--theme-action-text);
}

/* The photograph remains behind the account forms in both themes. */
html[data-theme="dark"] .auth-page .card {
  background: var(--theme-surface);
  border-color: var(--line);
}
html[data-theme="dark"] .auth-page h1 { color: var(--ink); }
html[data-theme="dark"] .auth-page .hint { color: var(--muted); }
html[data-theme="dark"] .auth-page button:not(.theme-toggle) { color: var(--theme-action-text); }
html[data-theme="dark"] .auth-page #message { color: var(--red); }