/* analysis.css — Analyse page responsive overrides */

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* Multi-column layouts → stack */
    .grid-3col, .grid-2col {
        grid-template-columns: 1fr !important;
    }
    .flex-row {
        flex-direction: column;
        gap: 10px;
    }
    .flex-col {
        min-width: 100%;
    }

    /* Step cards compact */
    .step-card {
        padding: 12px;
        margin-bottom: 12px;
    }

    /* Metric boxes: 2-col grid on mobile */
    .metric-box {
        padding: 8px 10px;
    }
    .metric-val {
        font-size: var(--text-base);
    }
    .metric-val-xl {
        font-size: var(--text-xl);
    }

    /* Charts: fit viewport, responsive height */
    .chart-wrapper {
        height: 180px !important;
        min-height: 150px;
    }
    canvas {
        max-width: 100%;
    }

    /* Volume section: stack sport stats */
    .volume-sport-grid {
        grid-template-columns: 1fr !important;
    }

    /* Weight chart period buttons: wrap */
    .weight-period-btn {
        padding: 6px 10px;
        font-size: var(--text-xs);
    }

    /* Weight stats: 2-col */
    .weight-stat {
        min-width: 0;
    }

    /* Power curve: stack metrics */
    .power-curve-metrics {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Power curve chart */
    #powerCurveChart {
        height: 200px !important;
    }

    /* Coach feedback: readable */
    .coach-feedback-content {
        font-size: var(--text-sm);
        line-height: 1.6;
    }

    /* Signal cards: full width */
    .signal-card {
        padding: 10px;
    }

    /* Readiness trend section */
    .ts-action {
        padding: 8px 10px;
    }
    .ts-kv-row {
        flex-direction: column;
        gap: 4px;
    }

    /* Buttons touch targets */
    .btn {
        min-height: 44px;
        padding: 10px 16px;
        font-size: var(--text-sm);
    }

    /* EF/Decoupling filter buttons */
    .ef-filter-btn, .dec-filter-btn {
        padding: 6px 10px;
        font-size: var(--text-xs);
    }

    /* Alert banners compact */
    .alert-banner {
        padding: 10px 12px;
        font-size: var(--text-sm);
    }

    /* Gap analysis card */
    .gap-grid {
        grid-template-columns: 1fr !important;
    }
    .gap-dim {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }
    .gap-dim > * {
        min-width: 0;
    }

    /* Durability popup: full screen on mobile */
    #efPopupOverlay .popup-content {
        width: 95vw;
        max-height: 85vh;
    }

    /* Calibration box */
    .calibration-box {
        font-size: var(--text-xs);
    }

    /* Coach history entries */
    .coach-history-entry {
        padding: 8px;
        font-size: var(--text-xs);
    }
}

/* ── Tablet ─────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
    .grid-3col {
        grid-template-columns: 1fr 1fr !important;
    }
}