/*
 * Dark-theme component patches.
 *
 * The palette flip lives in tokens.css ([data-theme="dark"] block) and handles
 * everything that draws its colour from a token. This file only patches the
 * components that HARDCODED colours (hex / rgba / named) instead of using
 * tokens — those don't flip on their own and would otherwise stay bright or
 * lose contrast on a dark background.
 *
 * Every rule is scoped under [data-theme="dark"], which also raises its
 * specificity above the original single-class rule, so load order vs. the
 * page-specific stylesheets doesn't matter.
 *
 * Conventions for status tints below:
 *   green  → bg rgba(46,204,113,.x)   text #7fd3a3
 *   blue   → bg rgba(74,158,255,.x)   text #8fb9f0
 *   amber  → bg rgba(217,165,33,.x)   text #e3c069
 *   red    → bg rgba(214,69,58,.x)    text #ef8b7f
 *   orange → bg rgba(240,116,41,.x)   text #e0a06a
 */

/* ===========================================================================
   layout.css — chrome
   =========================================================================== */

/* Admin impersonation banner used neutral-900 (now light) as a dark fill. */
[data-theme="dark"] .impersonation-banner {
    background: var(--color-elevated);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}
[data-theme="dark"] .impersonation-banner a { color: var(--color-good); }

/* Flash messages — pale tint bg + dark text. */
[data-theme="dark"] .flash-success { background: rgba(46, 204, 113, 0.14); border-color: rgba(46, 204, 113, 0.30); color: #7fd3a3; }
[data-theme="dark"] .flash-error   { background: rgba(214, 69, 58, 0.14);  border-color: rgba(214, 69, 58, 0.30);  color: #ef8b7f; }
[data-theme="dark"] .flash-warning { background: rgba(217, 165, 33, 0.14); border-color: rgba(217, 165, 33, 0.30); color: #e3c069; }
[data-theme="dark"] .flash-info    { background: rgba(74, 158, 255, 0.14); border-color: rgba(74, 158, 255, 0.30); color: #8fb9f0; }

/* ===========================================================================
   components.css
   =========================================================================== */

/* Dark-fill components that used neutral-900 (now light) as a background. */
[data-theme="dark"] .zone-card { background: var(--color-elevated); }
[data-theme="dark"] .btn-dark {
    background: var(--color-neutral-200);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
[data-theme="dark"] .btn-dark:hover { background: var(--color-neutral-300); }
[data-theme="dark"] .dl-range-toggle button.active {
    background: var(--color-neutral-300);
    color: var(--color-text);
}

/* Insight boxes — translucent tint + dark text. */
[data-theme="dark"] .insight-box.is-good { background: rgba(46, 204, 113, 0.16); color: #7fd3a3; }
[data-theme="dark"] .insight-box.is-warn { background: rgba(217, 165, 33, 0.16); color: #e3c069; }
[data-theme="dark"] .insight-box.is-bad  { background: rgba(214, 69, 58, 0.16);  color: #ef8b7f; }

/* Blue "info panel" surfaces (#f3f6fe bg / #dfe7fb borders). */
[data-theme="dark"] .profile-panel,
[data-theme="dark"] .dl-panel {
    background: var(--color-elevated);
    border-color: var(--color-border);
}
[data-theme="dark"] .dl-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .profile-rows,
[data-theme="dark"] .profile-row { border-color: var(--color-border); }
[data-theme="dark"] .dl-note { color: #e0a06a; }

/* Confidence pills + status-todo head + added-test chip. */
[data-theme="dark"] .confidence-pill.is-high   { background: rgba(46, 204, 113, 0.16); color: #7fd3a3; }
[data-theme="dark"] .confidence-pill.is-medium { background: rgba(217, 165, 33, 0.16); color: #e3c069; }
[data-theme="dark"] .zone-state-todo-head { color: #e3c069; }
[data-theme="dark"] .test-item-added { background: rgba(46, 204, 113, 0.20); color: #7fd3a3; }

/* ===========================================================================
   analytics.css
   =========================================================================== */

/* Percentile box — fully hardcoded white card + dark green numerals. */
[data-theme="dark"] .percentile-box {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .percentile-kicker,
[data-theme="dark"] .percentile-desc,
[data-theme="dark"] .percentile-dist-label { color: var(--color-text-muted); }
[data-theme="dark"] .percentile-number,
[data-theme="dark"] .percentile-dist-pct { color: var(--color-primary); }
[data-theme="dark"] .percentile-dist-item { border-right-color: var(--color-border); }

/* Feasibility badges — pale pastels + dark text. */
[data-theme="dark"] .feasibility-already_capable { background: rgba(46, 204, 113, 0.14); color: #7fd3a3; }
[data-theme="dark"] .feasibility-achievable      { background: rgba(46, 204, 113, 0.14); color: #7fd3a3; }
[data-theme="dark"] .feasibility-stretch         { background: rgba(217, 165, 33, 0.16); color: #e3c069; }
[data-theme="dark"] .feasibility-ambitious       { background: rgba(214, 69, 58, 0.16);  color: #ef8b7f; }

/* Alert. */
[data-theme="dark"] .alert-danger {
    background: rgba(214, 69, 58, 0.16);
    color: #ef8b7f;
    border-color: rgba(214, 69, 58, 0.30);
}

/* ===========================================================================
   plan.css — calendar phase badges (pale bg + dark text pairs)
   =========================================================================== */
[data-theme="dark"] .plan-cal-base     { background: rgba(46, 204, 113, 0.18);  color: #7fd3a3; }
[data-theme="dark"] .plan-cal-build    { background: rgba(74, 158, 255, 0.18);  color: #8fb9f0; }
[data-theme="dark"] .plan-cal-peak     { background: rgba(214, 69, 58, 0.18);   color: #ef8b7f; }
[data-theme="dark"] .plan-cal-taper    { background: rgba(217, 165, 33, 0.18);  color: #e3c069; }
[data-theme="dark"] .plan-cal-recovery { background: rgba(150, 155, 164, 0.18); color: #cdd1d8; }

/* ===========================================================================
   progress.css
   =========================================================================== */
[data-theme="dark"] .score-range-mid { background: rgba(240, 140, 40, 0.18); color: #e0a06a; }

/* ===========================================================================
   settings.css
   =========================================================================== */
[data-theme="dark"] .badge-warn     { background: rgba(217, 165, 33, 0.16); color: #e3c069; }
[data-theme="dark"] .flash-error    { background: rgba(214, 69, 58, 0.14);  border-color: rgba(214, 69, 58, 0.30);  color: #ef8b7f; }
[data-theme="dark"] .flash-warning  { background: rgba(217, 165, 33, 0.14); border-color: rgba(217, 165, 33, 0.30); color: #e3c069; }

/* ===========================================================================
   wellness.css — level badges + trend
   =========================================================================== */
[data-theme="dark"] .level-excellent { background: rgba(46, 204, 113, 0.18); color: #7fd3a3; }
[data-theme="dark"] .level-fair      { background: rgba(217, 165, 33, 0.18); color: #e3c069; }
[data-theme="dark"] .level-poor      { background: rgba(214, 69, 58, 0.18);  color: #ef8b7f; }
[data-theme="dark"] .trend-bad       { background: rgba(214, 69, 58, 0.15); }

/* ===========================================================================
   activity_detail.css
   =========================================================================== */
[data-theme="dark"] .wind-map-arrow { color: #d99a5e; }

/* ===========================================================================
   auth.css — login/register error box (#fdf0ee bg, #f0c6be border)
   =========================================================================== */
[data-theme="dark"] .auth-card .form-errors {
    background: rgba(214, 69, 58, 0.14);
    border-color: rgba(214, 69, 58, 0.30);
    color: #ef8b7f;
}

/* ===========================================================================
   training.css — the heaviest offender: pale-tint badges with dark text.
   (Token-based neutral fills here flip automatically and are NOT listed.)
   =========================================================================== */

/* Confidence progress tracks (pale fills). */
[data-theme="dark"] .conf-crush     { --conf-track: rgba(46, 204, 113, 0.20); }
[data-theme="dark"] .conf-solid     { --conf-track: rgba(74, 158, 255, 0.20); }
[data-theme="dark"] .conf-improving { --conf-track: rgba(240, 180, 41, 0.20); }
[data-theme="dark"] .conf-low       { --conf-track: rgba(229, 62, 62, 0.20); }

/* Calendar day-session status chips. */
[data-theme="dark"] .day-session.status-done   { background: rgba(46, 204, 113, 0.18); color: #7fd3a3; }
[data-theme="dark"] .day-session.status-missed { background: rgba(229, 62, 62, 0.18);  color: #ef8b7f; }
[data-theme="dark"] .day-session.status-today  { background: rgba(240, 180, 41, 0.18); color: #e3c069; }
[data-theme="dark"] .day-check { color: #5fc78e; }

/* Plan-summary phase pills (rgba tint + dark text). */
[data-theme="dark"] .ps-phase-build    { background: rgba(196, 120, 92, 0.24); color: #d99a78; }
[data-theme="dark"] .ps-phase-peak     { background: rgba(123, 94, 167, 0.28); color: #b69ad9; }
[data-theme="dark"] .ps-phase-taper    { background: rgba(138, 126, 110, 0.28); color: #c4b59e; }
[data-theme="dark"] .ps-phase-recovery { background: rgba(107, 154, 184, 0.24); color: #8fbcd9; }

/* Workout-zone pills. */
[data-theme="dark"] .wz-mp   { background: rgba(46, 204, 113, 0.18);  color: #7fd3a3; }
[data-theme="dark"] .wz-steady { background: rgba(80, 160, 120, 0.22); color: #8fc9a8; }
[data-theme="dark"] .wz-thr  { background: rgba(196, 120, 92, 0.24);  color: #d99a78; }
[data-theme="dark"] .wz-int  { background: rgba(160, 80, 80, 0.28);   color: #e08a8a; }
[data-theme="dark"] .wz-easy { background: rgba(92, 108, 160, 0.24);  color: #9aa8d9; }

/* Confidence-trend + day-actual chips. */
[data-theme="dark"] .conf-trend-ahead   { background: rgba(46, 204, 113, 0.18);  color: #7fd3a3; }
[data-theme="dark"] .conf-trend-ontrack { background: rgba(74, 158, 255, 0.18);  color: #8fb9f0; }
[data-theme="dark"] .conf-trend-behind  { background: rgba(240, 116, 41, 0.18);  color: #e0a06a; }
[data-theme="dark"] .day-actual         { background: rgba(46, 204, 113, 0.18);  color: #7fd3a3; }
[data-theme="dark"] .day-actual-extra   { background: rgba(92, 140, 196, 0.20);  color: #8fb9f0; }

/* Pace-adaptation banner — the .is-up/.is-down modifiers hardcode near-white
   fills (#f6faf8 / #faf8f2) that don't flip, leaving light text unreadable on a
   white card. Re-tint as faint green/amber washes over the dark surface; the
   border-left accent already flips via --color-good / --color-warn. */
[data-theme="dark"] .adaptation-banner.is-up   { background: rgba(46, 204, 113, 0.08); }
[data-theme="dark"] .adaptation-banner.is-down { background: rgba(217, 165, 33, 0.08); }

/* Home — same-point week trend pills. */
[data-theme="dark"] .spw-trend.spw-down { background: rgba(240, 116, 41, 0.18); color: #e0a06a; }
[data-theme="dark"] .spw-trend.spw-up   { background: rgba(46, 204, 113, 0.18); color: #7fd3a3; }
[data-theme="dark"] .vol-delta.vol-up   { color: #7fd3a3; }
[data-theme="dark"] .vol-delta.vol-down { color: #ef8b7f; }