/*
 * Training Plans — non-scoped styles shared across the plan library list, plan editor,
 * Apply Plan wizard dialog, and future Training Plans surfaces. Promoted from
 * TrainingPlanList.razor.css in story 31-10 because Blazor scoped CSS does NOT apply to
 * MudDialog-portaled content (the dialog renders under MudBlazor's overlay root, outside
 * the scoped boundary).
 */

/* ── Plan library card chrome ──────────────────────────────────────────────── */

.plan-purple-button {
    background-color: #7e57c2;
    color: white;
}

.plan-list .mud-paper {
    transition: background-color 0.15s;
}

.plan-list .mud-paper:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.plan-draft-chip {
    background-color: rgba(126, 87, 194, 0.15);
    color: #7e57c2;
    font-size: 11px;
    height: 20px;
}

/* ── Apply Plan Wizard — step indicator (mockup Screen 4B) ─────────────────── */

.wizard-steps {
    display: flex;
    gap: 24px;
    padding: 4px 0 16px 0;
    border-bottom: 1px solid var(--mud-palette-divider);
    margin-bottom: 16px;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.wizard-step.active {
    color: #7e57c2;
    font-weight: 600;
}

.wizard-step.done {
    color: var(--mud-palette-text-secondary);
}

.wizard-step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mud-palette-text-disabled);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.wizard-step.active .wizard-step-num {
    background: #7e57c2;
}

.wizard-step.done .wizard-step-num {
    background: var(--mud-palette-text-secondary);
}

/* ── Apply Plan Wizard — styled radio chrome (mockup Screen 4B) ────────────── */

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.radio-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    cursor: pointer;
}

/* 31-10 ships a single Start-only radio that is checked+disabled; the click affordance
   would mislead. Restore default cursor when the row contains a disabled input. */
.radio-row:has(input:disabled) {
    cursor: default;
}

.radio-row.selected {
    border-color: #7e57c2;
    background: rgba(126, 87, 194, 0.05);
}

.radio-row input[type="radio"] {
    margin-top: 3px;
    accent-color: #7e57c2;
}

.radio-row .radio-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.radio-row .radio-desc {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

/* ── Apply Plan Wizard — info-blurb (neutral + plan-purple variant) ────────── */

.info-blurb {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(25, 118, 210, 0.08);
    border-left: 3px solid #1976d2;
    font-size: 12px;
    color: var(--mud-palette-text-primary);
    margin-top: 12px;
}

.info-blurb.plan {
    background: rgba(126, 87, 194, 0.08);
    border-left-color: #7e57c2;
}

/* 31-13: warn-tinted variant for validation errors. Mirrors mockup Screen 10's warn blurb
   below the date-picker error helper text. */
.info-blurb.warn {
    background: rgba(229, 57, 53, 0.08);
    border-left-color: #d32f2f;
}

/* ── Apply Plan Wizard — Step 2 summary strip (31-13, mockup Screen 5) ───── */

.preview-summary-strip {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
    padding: 10px;
    background: var(--mud-palette-background-grey);
    border-radius: 6px;
}

.preview-summary-cell {
    flex: 1;
}

.preview-summary-label {
    font-size: 9px;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
}

.preview-summary-value {
    font-size: 12px;
    font-weight: 600;
}

.preview-summary-count {
    color: var(--mud-palette-primary);
}

.summary-divider {
    height: 40px;
    width: 1px;
    background: var(--mud-palette-divider);
}

/* ── Apply Plan Wizard — Step 2 mini matrix (31-13, mockup Screen 5) ─────── */

.preview-matrix-mini {
    width: 100%;
    font-size: 9px;
    border-collapse: collapse;
    background: white;
}

.preview-matrix-mini th,
.preview-matrix-mini td {
    padding: 3px 4px;
    border: 1px solid var(--mud-palette-divider);
    text-align: center;
    height: 32px;
    vertical-align: top;
}

.preview-matrix-mini th {
    background: var(--mud-palette-background-grey);
    font-weight: 700;
    font-size: 9px;
}

.preview-matrix-mini td.skipped {
    background: repeating-linear-gradient(45deg, #f5f5f5 0px, #f5f5f5 4px, #e0e0e0 4px, #e0e0e0 5px);
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.preview-matrix-mini td.future {
    background: rgba(126, 87, 194, 0.04);
}

.preview-matrix-mini td.race {
    background: rgba(229, 57, 53, 0.1);
    font-weight: 700;
    color: #d32f2f;
}

.preview-matrix-mini td.end {
    background: rgba(25, 118, 210, 0.08);
    font-weight: 600;
}

.preview-matrix-mini td .race-label {
    text-transform: uppercase;
    font-size: 9px;
    margin-bottom: 2px;
}

/* ── Apply Plan Wizard — preview-card-tiny (one per planned workout in a cell) ── */

.preview-card-tiny {
    font-size: 8px;
    padding: 1px 3px;
    border-radius: 2px;
    background: #fff3e0;
    color: var(--mud-palette-text-primary);
    margin: 1px 0;
    border-left: 2px solid #fb8c00;
}

.preview-card-tiny.swim {
    background: #e3f2fd;
    border-left-color: #1976d2;
}

.preview-card-tiny.bike {
    background: #f3e5f5;
    border-left-color: #8e24aa;
}

.preview-card-tiny.run {
    background: #fff3e0;
    border-left-color: #fb8c00;
}

/* P4 (review): multi-sport / unknown discipline. Neutral gray-purple distinct from run. */
.preview-card-tiny.multi {
    background: #ede7f6;
    border-left-color: #5e35b1;
}