/*
 * Saját kottáim — light theme refinements (vanilla prototype only).
 *
 * Applies only with <html data-theme="light">; the dark theme is untouched. Matches the light
 * Teljes repertoár list (RepertoireScreen.light.css) and the light home screen.
 * Layout, spacing and typography are unchanged.
 *
 * Contrast (WCAG AA): every text colour ≥ 4.5:1 on the header, hover and selected tints.
 */

:root[data-theme='light'] :is(.my-sheets, .chooser) {
  --color-accent: #176e65;
  --color-accent-hover: #125a53;
  --color-accent-active: #0f4b45;
  --color-accent-soft: rgb(23 110 101 / 8%);
  --color-accent-line: rgb(23 110 101 / 32%);
  --list-row-hover: #f9fafb;
  --list-selected-bg: #eef5f4;
}

/* ---------- Column headings ---------- */

:root[data-theme='light'] .my-sheets .my-sheets__head {
  background: var(--color-table-head-bg);
  border-bottom-color: var(--color-table-head-border);
  font-weight: var(--weight-semibold);
  color: var(--color-table-head-text);
}

/* ---------- Rows ---------- */

:root[data-theme='light'] .my-sheets .my-sheet:hover {
  background: var(--list-row-hover);
}

/* The row action stays quiet, and still shows its own hover on a hovered row */
:root[data-theme='light'] .my-sheets .my-sheet__manage:hover {
  background: var(--color-surface-3);
  color: var(--color-text);
}

/* Sheet in use: a sheet you chose reads in full text colour; the default one stays quieter */
:root[data-theme='light'] .my-sheets .my-sheet__in-use:has(.my-sheet__default) {
  color: var(--color-text-muted);
}

/* Quiet tag; the negative margin keeps the label exactly where it was (no layout shift) */
:root[data-theme='light'] .my-sheets .my-sheet__default {
  margin-inline: calc(-1 * var(--space-1));
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-surface-3);
  color: var(--color-text-muted);
}

/* ---------- Sheet chooser dialog ---------- */

:root[data-theme='light'] .chooser .option:hover {
  background: var(--list-row-hover);
}

/* Selected option: pale teal, matching the expanded song in Teljes repertoár */
:root[data-theme='light'] .chooser .option--checked,
:root[data-theme='light'] .chooser .option--checked:hover {
  background: var(--list-selected-bg);
}