/* ========== WorkoutOverviewPage.kt ========== */

/* PageLayout(maxWidthIn=600dp): centered column, 16dp padding, items centered. */
.workout-overview-shell {
    max-width: 600px;
    margin: 0 auto;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
}

/* Extra bottom clearance on the CTA button (and the OR/Restart section that replaces it)
   so it reads as the primary action and doesn't blend into the summary card below.
   16px gap + 16px margin-bottom = 32px total separation. */
.workout-overview-shell > .primary-button,
.workout-overview-shell > .workout-overview-or-section {
    margin-bottom: 16px;
}

/* RestartButtonComponent: "OR" label + OutlinedButton below the Continue button. */
.workout-overview-or-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.workout-overview-or-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(46, 44, 40, 0.5);
    letter-spacing: 0.06em;
    margin: 0;
}

/* SummaryCard: Card(16dp round, elevation 1dp, surface bg), Row with SpaceEvenly stats + edit. */
.workout-summary-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    padding: 12px 20px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.workout-summary-stats {
    flex: 1;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

/* SummaryStatItem: Row(vertically centered, spacedBy 10dp) with icon + Column of value/label. */
.workout-summary-stat {
    display: flex;
    align-items: center;
    gap: 10px;
}

.workout-summary-divider {
    width: 1px;
    height: 48px;
    background: rgba(46, 44, 40, 0.1);
}

/* titleMedium Bold (value) + bodySmall onSurface@60% (label). */
.workout-summary-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #2e2c28;
    margin: 0;
}

.workout-summary-stat-label {
    font-size: 12px;
    color: rgba(46, 44, 40, 0.6);
    margin: 0;
}

/* TextButton(Edit): primary text, no background, 8dp border-radius. */
.workout-edit-button {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: #006a8e;
    font-size: 12px;
    font-weight: 500;
    padding: 8px;
    border-radius: 8px;
    transition: background-color 0.15s ease;
    flex-shrink: 0;
}

.workout-edit-button:hover {
    background: rgba(0, 106, 142, 0.08);
}

/* WorkoutProgressBar: Column(spacedBy 4dp), bodyMedium Bold label, CustomLinearProgressIndicator. */
.workout-progress-section {
    width: 100%;
}

.workout-progress-label {
    font-size: 14px;
    font-weight: 700;
    color: #2e2c28;
    margin: 0 0 6px;
}

.workout-progress-track {
    height: 8px;
    background: rgba(0, 106, 142, 0.12);
    border-radius: 4px;
    overflow: hidden;
}

.workout-progress-fill {
    height: 100%;
    background: linear-gradient(to right, #006a8e, #0096c7);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* White card shared by Focus Areas and Exercises sections. */
.workout-section-card {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    overflow: hidden;
}

/* Card header row used at the top of .workout-section-card. */
.workout-section-card-header {
    padding: 14px 16px 10px;
    font-size: 14px;
    font-weight: 700;
    color: #2e2c28;
    margin: 0;
    border-bottom: 1px solid rgba(46, 44, 40, 0.06);
}

/* FocusAreasSection chips sit inside a card with inner padding. */
.workout-focus-chips-container {
    padding: 12px 16px 16px;
}

.workout-focus-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* FocusArea chip: Row(.clip(RoundedCornerShape(50))), primary@10% bg, primary text, 12dp/6dp pad. */
.workout-focus-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 106, 142, 0.1);
    color: #006a8e;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background-color 0.15s ease;
}

.workout-focus-chip:hover {
    background: rgba(0, 106, 142, 0.18);
}

/* Exercises list container — full width. */
.workout-overview-exercises {
    width: 100%;
}

/* Wrapper div that holds the left gradient border via ::before.
   Gradient mirrors exerciseItemBorderGradient: bottom=primaryBlue@90% → top=lerp(LightBlue,White,0.15). */
.workout-exercise-wrapper {
    position: relative;
    padding-left: 3px;
}

.workout-exercise-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #26a6cf, rgba(0, 106, 142, 0.9));
}

/* ListItem: Row, 64px leading image, headline + supporting content, optional trailing. */
.workout-exercise-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
}

.workout-exercise-item-completed {
    opacity: 0.7;
}

/* 64x64px image box — compact enough to show 6–7 exercises at a glance (overview context). */
.workout-exercise-thumbnail {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    position: relative;
    background: rgba(0, 106, 142, 0.08);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.workout-exercise-thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.workout-exercise-placeholder-text {
    font-size: 22px;
    font-weight: 700;
    color: rgba(0, 106, 142, 0.35);
    text-transform: uppercase;
    user-select: none;
}

/* 22px circle badge at top-left. Dark semi-transparent bg so it's readable over any image. */
.workout-exercise-number-badge {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.workout-exercise-info {
    flex: 1;
    min-width: 0;
}

/* titleMedium Bold. */
.workout-exercise-name {
    font-size: 16px;
    font-weight: 700;
    color: #2e2c28;
    margin: 0 0 2px;
}

/* Sanskrit name — italic subtitle, no parentheses needed. */
.workout-exercise-sanskrit {
    font-size: 12px;
    font-style: italic;
    color: rgba(46, 44, 40, 0.5);
    margin: 0 0 3px;
}

/* bodyMedium supporting content row. */
.workout-exercise-duration {
    font-size: 14px;
    color: rgba(46, 44, 40, 0.7);
    margin: 0;
}

.workout-exercise-duration-bold {
    font-weight: 700;
    color: #2e2c28;
}

/* 28dp circle trailing "completed" badge. */
.workout-exercise-done-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 106, 142, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Divider between exercises — 3px wrapper + 16px item padding + 64px thumbnail + 12px gap = 95px. */
.workout-exercise-divider {
    height: 1px;
    background: rgba(46, 44, 40, 0.1);
    margin-left: 95px;
}

/* FocusAreaDetailDialog: extra "Benefits" label above the second body paragraph. */
.workout-focus-dialog-benefits-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(46, 44, 40, 0.6);
    margin: 8px 0 2px;
}