/*
 * The dark theme's own treatment of coloured components. Loaded after the other stylesheets
 * and only active under [data-theme="dark"], so the light theme is untouched.
 *
 * The rule: surfaces stay neutral charcoal, and colour appears as text, icons and thin lines.
 * Filled colour is kept for the one primary action on a page (.btn-primary). Everything else
 * (status buttons, chips, alerts, the active menu item) gets a barely tinted fill with no
 * outline, rather than a bright block.
 */

/* Lines in each hue: the colour at low strength over the surface. */
[data-theme="dark"] {
  --line-primary: color-mix(in srgb, var(--color-primary) 32%, transparent);
  --line-success: color-mix(in srgb, var(--color-success) 30%, transparent);
  --line-warning: color-mix(in srgb, var(--color-warning) 30%, transparent);
  --line-danger:  color-mix(in srgb, var(--color-danger) 30%, transparent);
  --line-info:    color-mix(in srgb, var(--color-info) 30%, transparent);
}

/* ---- Buttons --------------------------------------------------------------------------- */
/* Secondary actions are neutral: no accent-coloured outline. */
[data-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--color-text); --bs-btn-bg: var(--color-surface); --bs-btn-border-color: var(--color-border-strong);
  --bs-btn-hover-color: var(--color-text); --bs-btn-hover-bg: var(--color-surface-alt); --bs-btn-hover-border-color: #44444B;
  --bs-btn-active-color: var(--color-text); --bs-btn-active-bg: var(--color-border); --bs-btn-active-border-color: #44444B;
}
[data-theme="dark"] .btn-outline-primary .bi { color: var(--color-primary); }

/* Status buttons are tinted, not filled. */
[data-theme="dark"] .btn-success,
[data-theme="dark"] .btn-outline-success {
  --bs-btn-color: var(--color-success); --bs-btn-bg: var(--color-success-soft); --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--color-success); --bs-btn-hover-bg: color-mix(in srgb, var(--color-success) 16%, var(--color-surface)); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--color-success); --bs-btn-active-bg: color-mix(in srgb, var(--color-success) 20%, var(--color-surface)); --bs-btn-active-border-color: transparent;
}
[data-theme="dark"] .btn-danger,
[data-theme="dark"] .btn-outline-danger {
  --bs-btn-color: var(--color-danger); --bs-btn-bg: var(--color-danger-soft); --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--color-danger); --bs-btn-hover-bg: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface)); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--color-danger); --bs-btn-active-bg: color-mix(in srgb, var(--color-danger) 20%, var(--color-surface)); --bs-btn-active-border-color: transparent;
}
[data-theme="dark"] .btn-warning,
[data-theme="dark"] .btn-outline-warning {
  --bs-btn-color: var(--color-warning); --bs-btn-bg: var(--color-warning-soft); --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--color-warning); --bs-btn-hover-bg: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface)); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--color-warning); --bs-btn-active-bg: color-mix(in srgb, var(--color-warning) 20%, var(--color-surface)); --bs-btn-active-border-color: transparent;
}
[data-theme="dark"] .btn-info,
[data-theme="dark"] .btn-outline-info {
  --bs-btn-color: var(--color-info); --bs-btn-bg: var(--color-info-soft); --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--color-info); --bs-btn-hover-bg: color-mix(in srgb, var(--color-info) 16%, var(--color-surface)); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--color-info); --bs-btn-active-bg: color-mix(in srgb, var(--color-info) 20%, var(--color-surface)); --bs-btn-active-border-color: transparent;
}
[data-theme="dark"] .btn-success:hover, [data-theme="dark"] .btn-danger:hover,
[data-theme="dark"] .btn-warning:hover, [data-theme="dark"] .btn-info:hover { filter: none; }

/* ---- Chips: a quiet tint, no outline ----------------------------------------------------- */
[data-theme="dark"] .chip--outline { box-shadow: none; }

/* ---- Alerts: a neutral panel; the colour is in the icon and a thin line -------------------- */
[data-theme="dark"] .alert { --bs-alert-color: var(--color-text); }
[data-theme="dark"] .alert-success { --bs-alert-bg: color-mix(in srgb, var(--color-success) 14%, var(--color-surface)); }
[data-theme="dark"] .alert-warning { --bs-alert-bg: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface)); }
[data-theme="dark"] .alert-danger  { --bs-alert-bg: color-mix(in srgb, var(--color-danger) 14%, var(--color-surface)); }
[data-theme="dark"] .alert-info    { --bs-alert-bg: color-mix(in srgb, var(--color-info) 14%, var(--color-surface)); }
[data-theme="dark"] .alert-primary { --bs-alert-bg: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)); }
[data-theme="dark"] .alert-success > .bi:first-child { color: var(--color-success); }
[data-theme="dark"] .alert-warning > .bi:first-child { color: var(--color-warning); }
[data-theme="dark"] .alert-danger  > .bi:first-child { color: var(--color-danger); }
[data-theme="dark"] .alert-info    > .bi:first-child { color: var(--color-info); }
[data-theme="dark"] .alert-primary > .bi:first-child { color: var(--color-primary); }

/* ---- Navigation and current rows: a neutral highlight, the accent only in the icon -------- */
[data-theme="dark"] .sidebar-nav .nav-link.is-active { background: var(--color-surface-alt); color: var(--color-text); border-left-color: transparent; box-shadow: inset 2px 0 0 var(--color-primary); }
[data-theme="dark"] .sidebar-nav .nav-link.is-active .bi { color: var(--color-primary); }
[data-theme="dark"] .nav-link.is-active .nav-count { background: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .list-rows > li.is-current,
[data-theme="dark"] .list-group-item.is-current { background: var(--color-surface-alt); box-shadow: inset 2px 0 0 var(--color-primary); }
[data-theme="dark"] .list-rows li.is-unread { background: var(--color-surface-alt); }

/* ---- Tinted icon bubbles and KPI tiles keep their hue, with less fill -------------------- */
[data-theme="dark"] .icon-bubble { box-shadow: inset 0 0 0 1px var(--color-border); }

/* ---- The reader: with no outline, the tints of right and wrong choices are a little stronger -- */
[data-theme="dark"] .choice.is-answer { background: color-mix(in srgb, var(--color-success) 24%, var(--color-surface)); }
[data-theme="dark"] .choice.is-wrong { background: color-mix(in srgb, var(--color-danger) 24%, var(--color-surface)); }
[data-theme="dark"] .choice.is-picked:not(.is-answer):not(.is-wrong) { background: color-mix(in srgb, var(--color-text) 15%, var(--color-surface)); }
[data-theme="dark"] .answer-box { background: color-mix(in srgb, var(--color-success) 15%, var(--color-surface)); }
[data-theme="dark"] .answer-box.is-corrected { background: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface)); }
[data-theme="dark"] .answer-check { background: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface)); }