/* ─── Brand primary override (loaded AFTER Shoelace theme) ────────────
 * Shoelace's light.css defines --sl-color-primary-* on :root. This file
 * MUST load after that CDN link in index.html or the blue defaults win.
 * The sidebar's active-tab accent is teal #30a5bf; overriding the full
 * 50-950 ramp keeps every derived tint/shade (row hover -50, selected
 * -100, hover-hover -200, focus ring -600) coherent with the sidebar.
 * ── Do not merge back into style.css; the load-order split is the fix. */
:root {
  --sl-color-primary-50:  #ecf9fc;
  --sl-color-primary-100: #cff1f7;
  --sl-color-primary-200: #a3e1ea;
  --sl-color-primary-300: #6dccdd;
  --sl-color-primary-400: #47b7cd;
  --sl-color-primary-500: #37acc0;
  --sl-color-primary-600: #30a5bf; /* anchor — matches sidebar --admin-sidebar-accent */
  --sl-color-primary-700: #237e93;
  --sl-color-primary-800: #1e6577;
  --sl-color-primary-900: #185361;
  --sl-color-primary-950: #0f3844;
}

/* ─── sl-radio-button selected state ──────────────────────────────────
 * Shoelace's default checked-state is a solid primary fill — with the teal
 * palette, hover and selected end up visually similar (both are teal-tinted
 * light bg). Make the selected state read as a "pressed" default button:
 * neutral-100 fill + teal border + teal text. Hover on non-checked stays
 * as a lighter neutral tint so the two states are clearly distinct. */
sl-radio-button:not([checked])::part(button):hover {
  background-color: var(--sl-color-neutral-50);
  color: var(--sl-color-neutral-900);
  border-color: var(--sl-color-neutral-300);
}
sl-radio-button[checked]::part(button) {
  background-color: var(--sl-color-neutral-100);
  color: var(--sl-color-primary-700);
  border-color: var(--sl-color-primary-600);
  font-weight: 600;
}
sl-radio-button[checked]::part(button):hover {
  background-color: var(--sl-color-neutral-100);
  color: var(--sl-color-primary-700);
  border-color: var(--sl-color-primary-600);
}