/* =============================================================
   ONE SET — Component Styles
   App-specific layout and component rules.
   ============================================================= */


/* ----- LOGIN / AUTH PAGES ----- */

.auth-container {
    max-width: 420px;
    margin: 0 auto;
    padding-top: 12vh;
}

.auth-container .auth-brand {
    font-family: 'Bitter', serif;
    font-weight: 700;
    font-size: 2.4rem;
    color: var(--accent-primary);
    letter-spacing: -0.02em;
}

.auth-container .auth-tagline {
    color: var(--text-secondary);
    font-size: 1.05rem;
    font-weight: 300;
}

.auth-container .card {
    border-radius: 8px;
}

.auth-container .form-control {
    padding: 0.65rem 0.85rem;
    font-size: 1rem;
}

.auth-container .btn-primary {
    padding: 0.6rem 1rem;
    font-size: 1rem;
}

.auth-hint {
    font-size: 0.82rem;
    color: var(--text-secondary);
}


/* Scheduled next workout card (session summary) */
.scheduled-next-card {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    background-color: color-mix(in srgb, var(--accent-positive) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-positive) 25%, transparent);
}

/* Calendar connection status dot */
.calendar-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.calendar-status-dot.connected {
    background-color: var(--accent-positive);
}
.calendar-status-dot.disconnected {
    background-color: var(--text-secondary);
}


/* ----- CALENDAR PICKER ----- */

.calendar-picker {
    max-width: 100%;
}

/* Legend */
.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.calendar-legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.legend-preferred { background-color: var(--accent-primary); }
.legend-available { background-color: var(--accent-positive); }
.legend-rest {
    background-color: var(--text-secondary);
    opacity: 0.5;
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 2px,
        var(--bg-primary) 2px, var(--bg-primary) 3px
    );
}

/* Week row */
.calendar-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}

/* Day cell */
.calendar-day {
    position: relative;
    min-height: 85px;
    padding: 0.4rem 0.45rem;
    border-radius: 6px;
    background-color: var(--bg-secondary);
    border: 1.5px solid transparent;
    transition: border-color 0.12s ease, background-color 0.12s ease;
    overflow: hidden;
}

/* Day header (name + number) */
.calendar-day-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.25rem;
}

.calendar-day-name {
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}

.calendar-day-num {
    font-family: 'Bitter', serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

/* Preferred day window label */
.calendar-day-window {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--accent-primary);
    margin-bottom: 0.2rem;
}

/* Event conflict bars */
.calendar-day-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.calendar-event-bar {
    font-size: 0.65rem;
    padding: 0.12rem 0.3rem;
    border-radius: 3px;
    background-color: color-mix(in srgb, var(--text-secondary) 15%, transparent);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-event-more {
    font-size: 0.62rem;
    color: var(--text-secondary);
    padding: 0 0.3rem;
}

/* State: spacer (days before today) */
.calendar-day-spacer {
    background-color: transparent;
    border-color: transparent;
    min-height: 0;
    pointer-events: none;
}

/* State: today */
.calendar-day-today:not(.calendar-day-rest) {
    border-color: var(--text-secondary);
}
.calendar-day-today .calendar-day-num {
    color: var(--accent-primary);
}

/* State: rest period (selectable but discouraged) */
.calendar-day-rest {
    opacity: 0.55;
    background: repeating-linear-gradient(
        -45deg,
        var(--bg-secondary),
        var(--bg-secondary) 4px,
        color-mix(in srgb, var(--text-secondary) 8%, var(--bg-secondary)) 4px,
        color-mix(in srgb, var(--text-secondary) 8%, var(--bg-secondary)) 6px
    );
}
.calendar-day-rest.calendar-day-selectable:hover {
    opacity: 0.8;
}
.calendar-day-rest.calendar-day-selected {
    opacity: 0.85 !important;
}

/* State: preferred day (only when selectable) */
.calendar-day-preferred.calendar-day-selectable {
    background-color: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-secondary));
    border-color: color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

/* State: selectable — clear interactive affordance */
.calendar-day-selectable {
    cursor: pointer;
    border-color: color-mix(in srgb, var(--accent-positive) 30%, transparent);
}
.calendar-day-selectable:hover {
    border-color: var(--accent-primary);
    background-color: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-secondary));
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* State: unavailable (too many conflicts) */
.calendar-day-unavailable:not(.calendar-day-rest) {
    opacity: 0.45;
    pointer-events: none;
}

/* State: selected */
.calendar-day-selected {
    border-color: var(--accent-primary) !important;
    background-color: color-mix(in srgb, var(--accent-primary) 15%, var(--bg-secondary)) !important;
    opacity: 1 !important;
}
.calendar-day-selected .calendar-day-num {
    color: var(--accent-primary);
}

/* Confirm bar below calendar */
.calendar-selected-confirm {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    background-color: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-secondary));
    border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

/* Day detail panel (shown when a day is clicked) */
.calendar-day-detail {
    margin-top: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--card-border);
}

.detail-events-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.detail-event-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.88rem;
    padding: 0.25rem 0;
}

.detail-event-time {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--text-secondary);
    min-width: 3.5rem;
    font-variant-numeric: tabular-nums;
}

.detail-event-name {
    color: var(--text-primary);
}

.detail-slots-header {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.detail-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.detail-slot-btn {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    border: 1px solid var(--card-border);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.12s ease;
    font-variant-numeric: tabular-nums;
}

.detail-slot-btn:hover {
    border-color: var(--accent-primary);
    background-color: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-primary));
}

.detail-slot-btn.active {
    border-color: var(--accent-primary);
    background-color: var(--accent-primary);
    color: #fff;
}

/* Mobile list view — hidden on desktop, shown on mobile */
.calendar-mobile-list {
    display: none;
}

.calendar-mobile-day {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0.85rem;
    border-radius: 6px;
    margin-bottom: 4px;
    background-color: var(--bg-secondary);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.calendar-mobile-day:active {
    transform: scale(0.99);
}

.calendar-mobile-day-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.calendar-mobile-day-date {
    font-family: 'Bitter', serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.calendar-mobile-day-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.calendar-mobile-day-events {
    text-align: right;
    font-size: 0.78rem;
    color: var(--text-secondary);
    max-width: 45%;
}

.calendar-mobile-day-events div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile list: preferred */
.calendar-mobile-day.mobile-preferred {
    background-color: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-secondary));
    border-color: color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

/* Mobile list: rest period */
.calendar-mobile-day.mobile-rest {
    opacity: 0.55;
    background: repeating-linear-gradient(
        -45deg,
        var(--bg-secondary),
        var(--bg-secondary) 4px,
        color-mix(in srgb, var(--text-secondary) 8%, var(--bg-secondary)) 4px,
        color-mix(in srgb, var(--text-secondary) 8%, var(--bg-secondary)) 6px
    );
}

/* Mobile list: selected */
.calendar-mobile-day.mobile-selected {
    border-color: var(--accent-primary) !important;
    background-color: color-mix(in srgb, var(--accent-primary) 15%, var(--bg-secondary)) !important;
    opacity: 1 !important;
}

/* Mobile list: section header (week separator) */
.calendar-mobile-week-header {
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    padding: 0.5rem 0.25rem 0.25rem;
}

.calendar-mobile-window-tag {
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--accent-primary);
}

/* Schedule container on dashboard — spacing when populated */
#schedule-container:not(:empty) {
    margin-bottom: 1.5rem;
}

/* Event bar time label */
.event-time {
    font-weight: 600;
    color: var(--text-primary);
    opacity: 0.7;
}

/* Rest period warning in confirm bar */
.calendar-rest-warning {
    font-size: 0.8rem;
    color: var(--accent-primary);
    margin-bottom: 0.5rem;
    line-height: 1.35;
}

/* Loading skeleton for calendar */
.calendar-skeleton {
    padding: 0.5rem 0;
}

.calendar-skeleton-legend {
    height: 14px;
    width: 200px;
    border-radius: 4px;
    margin-bottom: 1rem;
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 25%,
        color-mix(in srgb, var(--bg-tertiary) 60%, var(--bg-secondary)) 50%,
        var(--bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.calendar-skeleton-row {
    height: 70px;
    border-radius: 6px;
    margin-bottom: 3px;
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 25%,
        color-mix(in srgb, var(--bg-tertiary) 60%, var(--bg-secondary)) 50%,
        var(--bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.calendar-skeleton-row:nth-child(2) { animation-delay: 0.1s; }
.calendar-skeleton-row:nth-child(3) { animation-delay: 0.2s; }
.calendar-skeleton-row:nth-child(4) { animation-delay: 0.3s; }

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ----- DASHBOARD ----- */

.dash-card {
    transition: box-shadow 0.12s ease;
}

.stat-value {
    font-family: 'Bitter', serif;
    font-weight: 600;
    font-size: 1.8rem;
    color: var(--text-primary);
    line-height: 1.1;
}

.stat-label {
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

/* Rest progress bar */
.rest-bar-track {
    width: 100%;
    height: 6px;
    background-color: var(--bg-tertiary);
    border-radius: 3px;
    margin-top: 0.5rem;
    overflow: hidden;
}

.rest-bar-fill {
    height: 100%;
    background-color: var(--accent-positive);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Rest reasoning text */
.rest-reason {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.35;
    padding-top: 0.25rem;
    border-top: 1px solid var(--divider);
}

/* Disabled start button */
.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--bg-tertiary);
    border-color: var(--card-border);
    color: var(--text-secondary);
    opacity: 1;
    cursor: not-allowed;
}

/* Warning outline — clickable but signals caution */
.btn-outline-warning {
    background-color: transparent;
    border-color: #B8943E;
    color: #B8943E;
}
.btn-outline-warning:hover {
    background-color: #B8943E;
    border-color: #B8943E;
    color: #fff;
}
[data-theme="dark"] .btn-outline-warning {
    border-color: #D4B86A;
    color: #D4B86A;
}
[data-theme="dark"] .btn-outline-warning:hover {
    background-color: #D4B86A;
    border-color: #D4B86A;
    color: var(--bg-primary);
}

/* Danger outline — cancel/destructive actions */
.btn-outline-danger {
    background-color: transparent;
    border-color: var(--accent-negative);
    color: var(--accent-negative);
}
.btn-outline-danger:hover {
    background-color: var(--accent-negative);
    border-color: var(--accent-negative);
    color: #fff;
}

.next-workout-card {
    border-left: 4px solid var(--accent-primary);
}

.next-workout-exercise {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--divider);
    gap: 0.5rem;
    flex-wrap: wrap;
}
.next-workout-exercise:last-child {
    border-bottom: none;
}


/* ----- ACTIVE WORKOUT ----- */

/* Exercise name links — look like text, subtle hover */
.exercise-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.12s ease;
}
.exercise-link:hover {
    color: var(--accent-primary);
}

/* Superset tooltip */
.superset-tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}

.superset-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    background-color: var(--text-primary);
    color: var(--bg-primary);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease 0.8s, visibility 0s linear 1.7s;
}

.superset-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--text-primary);
}

.superset-tooltip-wrap:hover .superset-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease 0.8s, visibility 0s linear 0s;
}

.exercise-card {
    margin-bottom: 1.5rem;
}

.exercise-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.exercise-type-badge {
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    position: relative;
    cursor: help;
}

.exercise-type-badge .info-tooltip {
    display: block;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    background-color: var(--text-primary);
    color: var(--bg-primary);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease 0.8s, visibility 0s linear 1.7s;
}

.exercise-type-badge .info-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--text-primary);
}

.exercise-type-badge:hover .info-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease 0.8s, visibility 0s linear 0s;
}

.set-row {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--divider);
}
.set-row:last-child {
    border-bottom: none;
}

.set-number {
    font-family: 'Bitter', serif;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.85rem;
    min-width: 2rem;
}

.flow-indicator {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rest-indicator {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--accent-positive);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.section-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
}

.warmup-section {
    padding: 0.75rem;
    border-radius: 6px;
    background-color: var(--bg-tertiary);
}

.warmup-label {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text-primary);
    cursor: pointer;
}

.warmup-check:checked + .warmup-label {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.working-set-form {
    padding: 1rem;
    border-radius: 6px;
    background-color: var(--bg-primary);
}


/* ----- PROGRESS CHARTS ----- */

.progress-exercise-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.35rem;
    padding-top: 0.75rem;
}
.progress-exercise-header:first-child {
    padding-top: 0;
}

.progress-exercise-name {
    font-family: 'Bitter', serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.progress-exercise-weight {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}


/* ----- SESSION SUMMARY ----- */

.comparison-table td {
    vertical-align: middle;
}

.progress-arrow {
    color: var(--accent-positive);
    font-weight: 600;
}

.stall-arrow {
    color: var(--accent-negative);
    font-weight: 600;
}


/* ----- HISTORY ----- */

/* Workout color coding (by order_in_cycle) */
:root,
[data-theme="light"] {
    --workout-1: #C4652A;   /* Chest & Back */
    --workout-2: #5B7A4A;   /* Legs A */
    --workout-3: #B8943E;   /* Shoulders & Arms */
    --workout-4: #5B7A4A;   /* Legs B */
}
[data-theme="dark"] {
    --workout-1: #D4976A;
    --workout-2: #7EA66A;
    --workout-3: #D4B86A;
    --workout-4: #7EA66A;
}

/* History filters */
.history-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.filter-pill {
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.12s ease;
    background-color: transparent;
}
.filter-pill:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}
.filter-pill.active {
    background-color: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

/* Color-accented active pills */
.filter-pill.workout-1-pill.active { background-color: var(--workout-1); border-color: var(--workout-1); color: #fff; }
.filter-pill.workout-2-pill.active { background-color: var(--workout-2); border-color: var(--workout-2); color: #fff; }
.filter-pill.workout-3-pill.active { background-color: var(--workout-3); border-color: var(--workout-3); color: #fff; }
.filter-pill.workout-4-pill.active { background-color: var(--workout-4); border-color: var(--workout-4); color: #fff; }

.history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

/* Card as <a> — reset link styles */
a.history-card {
    text-decoration: none;
    color: inherit;
}
a.history-card:hover {
    color: inherit;
}

.history-card {
    display: flex;
    flex-direction: column;
    border-top: 3px solid var(--card-border);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    cursor: pointer;
}
.history-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* Color-coded top border */
.history-card.workout-1 { border-top-color: var(--workout-1); }
.history-card.workout-2 { border-top-color: var(--workout-2); }
.history-card.workout-3 { border-top-color: var(--workout-3); }
.history-card.workout-4 { border-top-color: var(--workout-4); }

.history-card.most-recent {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Header */
.history-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.75rem 0.85rem 0.5rem;
}

.history-card-template {
    font-family: 'Bitter', serif;
    font-weight: 600;
    font-size: 0.95rem;
    display: block;
    line-height: 1.2;
}

.history-card-date {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.history-color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.3rem;
}
.workout-1 .history-color-dot { background-color: var(--workout-1); }
.workout-2 .history-color-dot { background-color: var(--workout-2); }
.workout-3 .history-color-dot { background-color: var(--workout-3); }
.workout-4 .history-color-dot { background-color: var(--workout-4); }

/* Body — exercise list */
.history-card-body {
    flex: 1;
    padding: 0 0.85rem 0.5rem;
}

.history-card-exercise {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.25rem;
    border-bottom: 1px solid var(--divider);
}
.history-card-exercise:last-child {
    border-bottom: none;
}

.history-card-exercise-name {
    font-size: 0.84rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.failure-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--accent-primary);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
    position: relative;
    cursor: help;
}

.failure-badge .info-tooltip {
    display: block;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    background-color: var(--text-primary);
    color: var(--bg-primary);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease 0s, visibility 0s linear 0.15s;
}

.failure-badge .info-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--text-primary);
}

.failure-badge:hover .info-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease 0.8s, visibility 0s linear 0s;
}

.history-card-exercise-data {
    font-size: 0.84rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Footer */
.history-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.85rem;
    border-top: 1px solid var(--divider);
    font-size: 0.75rem;
    color: var(--text-secondary);
}


/* ----- EXERCISE LIBRARY ----- */

.exercise-group-heading {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.exercise-list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--divider);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.12s ease;
}
.exercise-list-row:last-child {
    border-bottom: none;
}
.exercise-list-row:hover {
    background-color: var(--bg-tertiary);
    color: inherit;
}

.exercise-list-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exercise-list-name {
    font-weight: 500;
    font-size: 0.92rem;
}

.exercise-list-arrow {
    font-size: 1.2rem;
    color: var(--text-secondary);
    font-weight: 300;
}

.exercise-superset-tag {
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--accent-primary);
}

.muscle-group-tag {
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    display: inline-block;
}


/* ----- EXERCISE DETAIL ----- */

.exercise-history-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--divider);
}
.exercise-history-row:last-child {
    border-bottom: none;
}

.exercise-history-date {
    font-family: 'Bitter', serif;
    font-weight: 600;
    font-size: 0.85rem;
    min-width: 5rem;
}

.exercise-history-sets {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}

.exercise-history-set {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}


/* ----- WORKOUT WIZARD ----- */

/* Pre-workout summary rows */
.summary-exercise-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--divider);
}
.summary-exercise-row:last-child {
    border-bottom: none;
}

.summary-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    flex-shrink: 0;
}

.summary-flow-connector {
    text-align: center;
    padding: 0.15rem 0;
    background-color: var(--card-bg);
}

/* Wizard step dots */
.wizard-steps {
    display: flex;
    gap: 6px;
    align-items: center;
}

.wizard-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.wizard-dot.done {
    background-color: var(--accent-positive);
}
.wizard-dot.active {
    background-color: var(--accent-primary);
    transform: scale(1.35);
}

/* Superset transition banner */
.superset-banner {
    text-align: center;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    background-color: var(--bg-tertiary);
    border: 1px dashed var(--accent-primary);
}

/* Timer display */
.wizard-timer {
    max-width: 440px;
    margin: 0 auto;
}

.timer-display {
    padding: 1rem 0;
}

.timer-value {
    font-family: 'Bitter', serif;
    font-weight: 700;
    font-size: 4rem;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* Finish screen */
.wizard-finish {
    max-width: 480px;
    margin: 0 auto;
}

.wizard-finish span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--accent-positive);
    color: #fff;
    font-size: 1.6rem;
}


/* ----- EQUIPMENT PREP ----- */

.equip-prep-card .card-header {
    font-size: 0.82rem;
}

.equip-block-row {
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid var(--divider);
}
.equip-block-row:last-child {
    border-bottom: none;
}

.equip-block-exercises {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

.equip-block-items {
    padding-left: 0.15rem;
}

.equip-check {
    flex-shrink: 0;
}

.equip-label {
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.12s ease;
}

.equip-check:checked + .equip-label {
    text-decoration: line-through;
    color: var(--text-secondary);
}

/* Prep screen */
.wizard-prep {
    max-width: 440px;
    margin: 0 auto;
}


/* ----- WORKOUT RESUME ----- */

.resume-banner {
    padding: 0.85rem 1rem;
    border-radius: 6px;
    background-color: color-mix(in srgb, var(--accent-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
}

.resume-icon {
    color: var(--accent-primary);
    font-size: 0.85rem;
}

/* Completed exercise row — muted */
.summary-exercise-done {
    opacity: 0.55;
}

/* Completed step number — green check circle */
.summary-step-done {
    background-color: var(--accent-positive);
    color: #fff;
    font-size: 0.65rem;
}


/* ----- PROGRESSION RECOMMENDATIONS ----- */

/* Workout step: recommendation banner */
.recommendation-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.recommendation-increase {
    background-color: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent);
    color: var(--text-primary);
}

.recommendation-maintain {
    background-color: color-mix(in srgb, var(--accent-positive) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-positive) 30%, transparent);
    color: var(--text-primary);
}

.recommendation-first {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--divider);
    color: var(--text-secondary);
}

.recommendation-icon {
    flex-shrink: 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.recommendation-increase .recommendation-icon {
    color: var(--accent-primary);
}

.recommendation-maintain .recommendation-icon {
    color: var(--accent-positive);
}

/* Session summary: inline recommendation per exercise */
.recommendation-inline {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.recommendation-icon-sm {
    flex-shrink: 0;
    font-size: 0.88rem;
}

/* Session summary: consecutive stall warning */
.stall-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.88rem;
    color: var(--accent-primary);
    line-height: 1.4;
}

/* Exercise detail: stall warning card (larger, standalone) */
.stall-warning-card {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.4;
    background-color: color-mix(in srgb, var(--accent-negative) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-negative) 25%, transparent);
    color: var(--text-primary);
}

.stall-warning-card .recommendation-icon-sm {
    color: var(--accent-negative);
    font-size: 1rem;
}


/* =============================================================
   MOBILE RESPONSIVE
   ============================================================= */

@media (max-width: 575.98px) {

    /* --- Dashboard --- */

    /* "Up Next" exercise rows: stack info vertically */
    .next-workout-exercise {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        padding: 0.55rem 0.75rem;
    }
    .next-workout-exercise > *:last-child {
        align-self: flex-end;
        font-size: 0.78rem;
    }

    /* Stat cards — allow wrapping on tiny screens */
    .stat-value {
        font-size: 1.5rem;
    }


    /* --- Active Workout / Wizard --- */

    /* Exercise name — bigger on mobile, it's the screen anchor */
    .wizard-header .h4 {
        font-size: 1.35rem;
    }

    /* "Last session" reference — scannable from arm's length */
    .wizard-header + .recommendation-banner + .card .card-body,
    .wizard-header + .card .card-body {
        font-size: 1rem;
    }

    /* Recommendation banner — prominent on mobile */
    .recommendation-banner {
        font-size: 0.95rem;
        padding: 0.7rem 0.85rem;
    }

    /* Section labels (Warmups, Working Set) */
    .section-label {
        font-size: 0.92rem;
    }

    /* Warmup labels */
    .warmup-label {
        font-size: 1rem;
    }
    .warmup-section .text-muted {
        font-size: 0.85rem;
    }

    /* Working set form — bigger inputs and labels */
    .working-set-form {
        padding: 1rem 0.85rem;
    }
    .working-set-form .form-label {
        font-size: 0.95rem;
    }
    .working-set-form .form-control {
        min-height: 48px;
        font-size: 1.1rem;
    }
    .working-set-form .btn-primary {
        min-height: 48px;
        font-size: 1rem;
    }

    /* Logged set rows — readable */
    .set-row {
        font-size: 1rem;
    }

    /* "What's next" preview */
    .wizard-header ~ div:last-child .text-muted {
        font-size: 0.9rem;
    }

    /* Working set form: 2-row layout on mobile */
    .working-set-form .row.g-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    /* Weight and Reps take one column each (first row) */
    .working-set-form .row.g-2 > .col {
        width: 100%;
        max-width: 100%;
        flex: none;
    }
    /* Failure/RIR and Log button share second row */
    .working-set-form .row.g-2 > .col-auto {
        width: auto;
        max-width: 100%;
        flex: none;
    }
    /* Make Log button fill remaining space */
    .working-set-form .row.g-2 > .col-auto:last-child {
        justify-self: end;
        align-self: end;
    }

    /* Summary exercise rows */
    .summary-exercise-row {
        padding: 0.6rem 0.85rem;
    }

    /* Timer display — slightly smaller on mobile but still big */
    .timer-value {
        font-size: 3.5rem;
    }

    /* Wizard/prep/finish — full width on mobile */
    .wizard-timer,
    .wizard-prep,
    .wizard-finish {
        max-width: 100%;
    }


    /* --- History --- */

    /* History grid single column on mobile */
    .history-grid {
        grid-template-columns: 1fr;
    }

    /* History card exercise names: allow wrapping */
    .history-card-exercise {
        gap: 0.5rem;
    }
    .history-card-exercise-name {
        font-size: 0.8rem;
        min-width: 0;
    }


    /* --- Exercise Library --- */

    .exercise-list-row {
        padding: 0.6rem 0.65rem;
    }
    .exercise-list-name {
        font-size: 0.85rem;
    }

    /* Badges — tighter on mobile */
    .exercise-type-badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.4rem;
        letter-spacing: 0.02em;
    }
    .exercise-superset-tag {
        font-size: 0.62rem;
    }


    /* --- Session Summary --- */

    .comparison-table {
        font-size: 0.88rem;
    }
    .comparison-table td {
        padding: 0.4rem 0.35rem;
    }

    /* Comparison row weights — larger for readability */
    .comparison-row {
        font-size: 0.95rem;
    }

    /* Recommendation + stall warning — readable on mobile */
    .recommendation-inline {
        font-size: 0.85rem;
    }
    .stall-warning {
        font-size: 0.85rem;
    }


    /* --- Calendar Picker --- */

    /* Hide grid view on mobile, show list view */
    .calendar-week {
        display: none;
    }
    .calendar-mobile-list {
        display: block !important;
    }
    .calendar-legend {
        font-size: 0.72rem;
        gap: 0.5rem;
    }
    .calendar-selected-confirm {
        padding: 0.6rem 0.75rem;
    }
    .calendar-rest-warning {
        font-size: 0.78rem;
    }


    /* --- General --- */

    /* Tighter container padding on mobile */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Buttons — minimum touch target */
    .btn-sm {
        min-height: 36px;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .btn-lg {
        width: 100%;
    }

    /* Form inputs — 48px touch target, larger text to prevent iOS zoom */
    .form-control,
    .form-select {
        min-height: 48px;
        font-size: 1.05rem;
    }
    .form-check-input {
        width: 1.35rem;
        height: 1.35rem;
    }
    .form-label {
        font-size: 0.95rem;
    }

    /* Cards — less internal padding on mobile */
    .card-body {
        padding: 1rem;
    }
    .card-header {
        padding: 0.7rem 1rem;
    }

    /* Footer — stack */
    .site-footer .container {
        flex-direction: column;
        gap: 0.25rem;
        text-align: center;
    }
}


/* Mid-size tablets — minor adjustments */
@media (min-width: 576px) and (max-width: 767.98px) {

    .history-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wizard-timer,
    .wizard-prep,
    .wizard-finish {
        max-width: 100%;
    }

    .next-workout-exercise {
        padding: 0.55rem 0.75rem;
    }
}