/* Shared themes for tracker, admin login, and admin setup. */
:root {
  color-scheme: dark;
  --theme-focus: #f4b3bc;
  --theme-error: #ffb4bd;
  --theme-success: #9cdfac;
  --theme-win-hover: #173e2c;
  --theme-loss-hover: #431e26;
}
:root[data-theme="nights-out"] {
  --bg: #000000; --surface: #101012; --surface-light: #1a1a1e;
  --surface-hover: #25252b; --input-bg: #08080b; --row-alt: #141418;
  --summary-bg: #202026; --summary-alt: #27272e;
  --text: #f5f5f7; --text-secondary: #c3c3cd; --text-muted: #a1a1ae;
  --border: #303039; --border-light: #454551;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f0f4f8; --surface: #ffffff; --surface-light: #e6edf3;
  --surface-hover: #dce6ef; --input-bg: #f7f9fc; --row-alt: #f0f5f9;
  --summary-bg: #e3ebf3; --summary-alt: #d8e3ee;
  --text: #122330; --text-secondary: #344f63; --text-muted: #51697b;
  --border: #b9c9d6; --border-light: #90a5b6;
  --accent: #b82734; --accent-dark: #941d28; --accent-soft: rgba(184,39,52,.12);
  --win: #23753d; --loss: #b82734;
  --theme-focus: #9c2330; --theme-error: #9d2030; --theme-success: #216b38;
  --theme-win-hover: #d4eedc; --theme-loss-hover: #f9dce0;
  --shadow: 0 12px 35px rgba(22,45,65,.10);
}
:root[data-theme="pine"] {
  --bg: #071612; --surface: #102a22; --surface-light: #19382e;
  --surface-hover: #244b3e; --input-bg: #0a2019; --row-alt: #132e25;
  --summary-bg: #1b3d31; --summary-alt: #234b3d;
  --text: #ecf6f0; --text-secondary: #b8d1c4; --text-muted: #96b7a5;
  --border: #305043; --border-light: #496c5c;
}
:root[data-theme="overtime"] {
  --bg: #100c1d; --surface: #211a34; --surface-light: #2d2444;
  --surface-hover: #3c3058; --input-bg: #171127; --row-alt: #251d3a;
  --summary-bg: #342847; --summary-alt: #3c2f54;
  --text: #f3effb; --text-secondary: #c9bedc; --text-muted: #afa0c5;
  --border: #493b60; --border-light: #64517c;
}
/* Semantic feedback colors also adapt to light surfaces. */
.editor-message, .warning-text, .error { color: var(--theme-error); }
.success-message { color: var(--theme-success); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--theme-focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .win-button:not(.selected):hover { background: var(--theme-win-hover); color: var(--theme-success); }
  .loss-button:not(.selected):hover { background: var(--theme-loss-hover); color: var(--theme-error); }
}
.utility-bar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 0 0 12px; width: 100%; position: relative; z-index: 10; }
.utility-menu { position: relative; }
.utility-toggle, .utility-action {
  display: inline-flex; width: 44px; height: 44px; min-height: 44px; align-items: center; justify-content: center;
  padding: 0; list-style: none; cursor: pointer; color: var(--text-secondary); background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: none; flex-shrink: 0;
}
.utility-toggle::-webkit-details-marker { display: none; }
.utility-toggle:hover, .utility-action:hover { background: var(--surface-hover); box-shadow: none; transform: none; }
.utility-toggle svg, .utility-action svg { width: 21px; height: 21px; }
.theme-panel {
  position: absolute; right: 0; top: 52px; z-index: 20; width: min(272px, calc(100vw - 32px));
  padding: 16px; background: var(--surface); color: var(--text); border: 1px solid var(--border-light);
  border-radius: 14px; box-shadow: var(--shadow); text-align: left;
}
.theme-panel fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.theme-panel legend { font: 700 20px "Barlow Condensed", Arial, sans-serif; margin-bottom: 10px; color: var(--text); }
.theme-panel .theme-choice { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 2px 0; padding: 8px; font: 500 14px "Inter", Arial, sans-serif; color: var(--text); cursor: pointer; border-radius: 8px; }
.theme-choice:hover { background: var(--surface-hover); }
.theme-choice input { width: 18px; height: 18px; min-height: 18px; padding: 0; margin: 0; accent-color: var(--accent); box-shadow: none; }
.theme-swatch { width: 22px; height: 22px; border: 1px solid var(--text-muted); border-radius: 50%; flex-shrink: 0; }
.theme-panel .theme-note { margin: 10px 0 0; color: var(--text-muted); font: 400 12px/1.5 "Inter", Arial, sans-serif; }
.auth-shell { position: relative; }
.auth-shell { flex-direction: column; }
.auth-shell > .utility-bar { max-width: 430px; }
:root[data-theme="light"] .badge { background: var(--accent-soft); color: var(--accent); }