/*
 * Fitness visual design system
 *
 * Loaded after the feature stylesheets. This file owns the shared visual
 * contract; sport-, health- and coach-specific colours remain in their
 * feature stylesheets.
 */
:root {
    color-scheme: dark;

    /* Core palette */
    --bg: #0f1117;
    --surface: #1a1d27;
    --surface2: #242836;
    --surface-raised: #1d2230;
    --surface-deep: #0c0f17;
    --surface-glass: rgba(20, 23, 32, 0.74);
    --surface-panel: linear-gradient(145deg, rgba(29, 34, 47, 0.96), rgba(20, 24, 34, 0.94));
    --surface-shell: linear-gradient(145deg, rgba(31, 35, 47, 0.78), rgba(15, 17, 23, 0.48));
    --surface-inset: rgba(11, 14, 21, 0.38);
    --surface-kpi: linear-gradient(145deg, rgba(41, 46, 62, 0.98), rgba(26, 31, 43, 0.98));
    --accent: #ff6b35;
    --accent-strong: #ff5b2d;
    --accent-soft: rgba(255, 107, 53, 0.12);
    --accent2: #4ecdc4;
    --accent2-strong: #78e1d8;
    --accent2-soft: rgba(78, 205, 196, 0.12);
    --purple: #a78bfa;
    --purple-soft: rgba(167, 139, 250, 0.12);
    --gold: #facc15;
    --gold-soft: rgba(250, 204, 21, 0.12);
    --success: #4ade80;
    --danger: #ff5d6c;

    /* Content hierarchy */
    --text: #f0f2f8;
    --text-soft: #b8bdca;
    --muted: #9096a8;
    --border: #2d3142;
    --border-soft: rgba(255, 255, 255, 0.075);
    --border-strong: rgba(255, 255, 255, 0.12);
    --border-kpi: rgba(255, 255, 255, 0.13);

    /* Shared geometry and elevation */
    --radius-control: 9px;
    --radius-card: 14px;
    --radius-panel: 16px;
    --radius-shell: 18px;
    --radius-pill: 999px;
    --control-height: 40px;
    --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 12px 30px rgba(0, 0, 0, 0.11);
    --shadow-kpi: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 10px 24px rgba(0, 0, 0, 0.2);
    --shadow-panel: 0 18px 55px rgba(0, 0, 0, 0.16);
    --shadow-dialog: 0 28px 80px rgba(0, 0, 0, 0.52);
    --focus-ring: 0 0 0 3px rgba(255, 107, 53, 0.22);
    --transition-fast: 150ms ease;
}

/* App frame */
body {
    background:
        radial-gradient(circle at 12% -8%, rgba(255, 107, 53, 0.08), transparent 28rem),
        radial-gradient(circle at 92% 8%, rgba(78, 205, 196, 0.055), transparent 32rem),
        var(--bg);
    color: var(--text-soft);
}
header {
    border-color: var(--border-soft);
    background: linear-gradient(135deg, rgba(26, 29, 39, 0.96), rgba(36, 40, 54, 0.9));
}
.header-inner,
main {
    width: 100%;
    max-width: 1600px;
    margin-right: auto;
    margin-left: auto;
}
.settings-panel {
    border-color: var(--border-soft);
    background: var(--surface-panel);
    box-shadow: var(--shadow-dialog);
}
.settings-header { border-color: var(--border-soft); }

/* Controls */
button,
input,
select,
textarea { font: inherit; }
select,
input,
textarea {
    border-radius: var(--radius-control);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.btn-primary,
.btn-small-save {
    min-height: var(--control-height);
    padding: 0.5rem 0.9rem;
    border: 1px solid rgba(255, 151, 111, 0.62);
    border-radius: var(--radius-control);
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    font-weight: 750;
    box-shadow: 0 8px 22px rgba(255, 107, 53, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: transform var(--transition-fast), filter var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-secondary,
.btn-small-cancel,
.clear-filters-btn,
.coach-small-button,
.coach-activate-button {
    min-height: var(--control-height);
    border-color: var(--border-soft);
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-soft);
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.btn-primary:hover,
.btn-small-save:hover { filter: brightness(1.07); }
@media (hover: hover) {
    .btn-secondary:hover,
    .btn-small-cancel:hover,
    .clear-filters-btn:hover,
    .coach-small-button:hover,
    .coach-activate-button:hover {
        border-color: rgba(255, 107, 53, 0.34);
        background: rgba(255, 107, 53, 0.07);
        color: var(--text);
    }
}
.btn-xs,
.btn-icon,
.settings-btn,
.chart-tab,
.coach-subnav-button {
    border-radius: var(--radius-control);
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.section-toggle:focus-visible,
.activity-sort-button:focus-visible,
.activity-coach-badge:focus-visible,
.chart-tab:focus-visible,
.coach-subnav-button:focus-visible,
.coach-actual-workout:focus-visible,
.coach-candidate:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

/* Primary navigation */
.section-toggles {
    gap: 0.58rem;
    padding: 0.42rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-panel);
    background: var(--surface-glass);
    box-shadow: var(--shadow-card);
}
.section-toggle {
    min-height: 42px;
    border-color: transparent;
    border-radius: calc(var(--radius-control) + 2px);
    background: rgba(255, 255, 255, 0.025);
    color: var(--text);
}
.section-toggle.active,
.coach-subnav-button.active {
    border-color: rgba(255, 151, 111, 0.72);
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

@media (min-width: 1280px) {
    .section-toggles { flex-wrap: nowrap; }
    .section-toggle {
        flex: 1 1 auto;
        min-width: max-content;
        text-align: center;
        white-space: nowrap;
    }
}

/* Section shells and hero contract */
#goalsBody,
#trainingPlanBody,
#coachBody,
#pbBody,
#healthBody,
#ffBody,
#chartsBody,
#shoesBody {
    padding: clamp(0.9rem, 1.7vw, 1.35rem);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-shell);
    background: var(--surface-shell);
    box-shadow: var(--shadow-panel);
}
.section-hero,
.coach-header.section-hero,
.health-heading.section-hero {
    min-height: 150px;
    margin-bottom: 1rem;
    padding: clamp(1rem, 2vw, 1.4rem);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-panel);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.section-hero h2,
.coach-brand h2 { color: var(--text); }
.section-hero p,
.coach-brand p { color: var(--text-soft); }
.section-hero-badge,
.coach-plan-status,
.health-card-status,
.ff-signal-pill,
.shoe-pill,
.coach-soft-badge {
    border-radius: var(--radius-pill);
    border-color: var(--border-strong);
    background: rgba(9, 12, 18, 0.38);
    color: var(--text-soft);
}
.section-primary-action {
    min-height: var(--control-height);
    border-radius: var(--radius-control);
}

/* Shared panel and card surfaces */
.stats-panel,
.training-plan-command-panel,
.training-plan-info-card,
.health-card,
.health-month-view,
#goalsBody .goals-edit,
#goalsBody .goal-card,
#pbContent .pb-category,
#shoesContent .shoe-card,
.coach-hero,
.coach-panel,
.coach-notes,
.coach-plan-week,
.coach-block-summary,
.coach-block-comparison,
.coach-block-history,
.modal-panel {
    border-color: var(--border-soft);
    border-radius: var(--radius-card);
    background: var(--surface-panel);
    box-shadow: var(--shadow-card);
}
.modal-panel {
    border-color: var(--border-strong);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-dialog);
}
.modal-header { border-color: var(--border-soft); }
.pb-summary-card,
.shoe-summary-card,
#ffBody .fitness-card {
    border-color: var(--border-soft);
    border-radius: var(--radius-card);
    background: var(--surface-panel);
    box-shadow: var(--shadow-card);
}

/* Activity archive and detail use the same card language */
.activity-item,
.detail-header,
.detail-chart-container,
.detail-map,
.detail-notes,
.chart-container,
.route-card,
.shoe-card {
    border-color: var(--border-soft);
    border-radius: var(--radius-card);
    background: var(--surface-panel);
    box-shadow: var(--shadow-card);
}
.activity-item {
    transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}
.activity-item:hover {
    border-color: rgba(255, 107, 53, 0.4);
    background: linear-gradient(145deg, rgba(33, 38, 52, 0.98), rgba(22, 26, 37, 0.96));
    transform: translateY(-1px);
}
.detail-stat,
.health-metric,
.shoe-metric,
.coach-session,
.coach-week-day,
.coach-block-metric,
#trainingPlanBody .training-plan-summary-block,
#chartsBody .stat-card,
#chartsBody .trend-card,
#chartsBody .streak-card,
#chartsBody .race-card {
    border-color: var(--border-soft);
    border-radius: calc(var(--radius-card) - 2px);
    background: var(--surface-inset);
}
.detail-stats { gap: 0.6rem; }
.detail-stats .detail-stat {
    border: 1px solid var(--border-kpi);
    background: var(--surface-kpi);
    box-shadow: var(--shadow-kpi);
}
.coach-notes { border-left: 3px solid var(--accent); }
.coach-session:hover {
    border-color: var(--border-strong);
    border-left-color: var(--coach-type);
    background: rgba(255, 255, 255, 0.035);
}

/* Small visual vocabulary */
.activity-race-badge,
.activity-indoor-badge,
.activity-structured-badge,
.activity-coach-badge,
.activity-shoe-badge,
.activity-route-badge,
.detail-race-badge,
.detail-workout-badge,
.coach-role-badge,
.coach-linked-badge,
.coach-candidate-current,
.ff-model-note span {
    border-radius: var(--radius-pill);
}
.progress-bar,
.goal-bar,
.goal-history-row-bar { background: var(--surface-deep); }
.stats-chart-panel .chart-tabs,
.coach-subnav {
    border-color: var(--border-soft);
    border-radius: var(--radius-card);
    background: var(--surface-glass);
    box-shadow: var(--shadow-card);
}

@media (max-width: 768px) {
    #goalsBody,
    #trainingPlanBody,
    #coachBody,
    #pbBody,
    #healthBody,
    #ffBody,
    #chartsBody,
    #shoesBody {
        padding: 0.72rem;
        border-radius: var(--radius-card);
    }
    .section-toggles { border-radius: calc(var(--radius-card) - 2px); }
    .section-hero,
    .coach-header.section-hero,
    .health-heading.section-hero { border-radius: calc(var(--radius-card) - 1px); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}