/* ========== InsightsPage.kt ========== */

/* LazyPageLayout: max 1000dp, 8/16px horizontal padding, 16px gap between children. */
.insights-page-shell {
    max-width: 1000px;
    margin: 0 auto;
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 600px) {
    .insights-page-shell {
        padding: 16px;
    }
}

/* "Your Progress" — headlineSmall SemiBold */
.insights-page-title {
    color: #2e2c28;
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

/* ── Stat cards ────────────────────────────────────────────────────────────── */

/* Small screen: 2 rows of 2 cards each (Arrangement.spacedBy(12.dp) in Compose). */
.insights-stat-grid-small {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.insights-stat-row {
    display: flex;
    gap: 12px;
}

.insights-stat-row .insights-stat-card {
    flex: 1;
}

/* Large screen: single row of 4 cards (Arrangement.spacedBy(16.dp)). */
.insights-stat-grid-large {
    display: none;
    gap: 16px;
}

@media (min-width: 600px) {
    .insights-stat-grid-small {
        display: none;
    }

    .insights-stat-grid-large {
        display: flex;
    }

    .insights-stat-grid-large .insights-stat-card {
        flex: 1;
    }
}

/* StatCard: Card, surface bg, 16dp rounded, elevation 1dp. */
.insights-stat-card {
    background: #fefefe;
    border-radius: 16px;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
}

/* Row(Alignment.CenterVertically, spacedBy(6.dp)): icon-box + uppercase label. */
.insights-stat-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

/* Box 28dp × 28dp, iconColor @ 12% alpha, 8dp rounded — contains the 16dp icon. */
.insights-stat-icon-box {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* labelSmall, 1.2sp letterSpacing, Medium weight, onSurface@80%. */
.insights-stat-title {
    color: rgba(46, 44, 40, 0.8);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
}

/* headlineMedium Bold, onSurface. */
.insights-stat-value {
    color: #2e2c28;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px;
}

/* bodySmall, onSurface@82%. */
.insights-stat-subtitle {
    color: rgba(46, 44, 40, 0.82);
    font-size: 12px;
    margin: 0;
}

/* ── Shared card container (NonClickableCardContainer) ──────────────────────── */

/* surfaceContainerHighest bg, 1dp onSurface@8% border, 20dp rounded, no elevation. */
.insights-card {
    background: #fbfaf7;
    border: 1px solid rgba(46, 44, 40, 0.08);
    border-radius: 20px;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
}

/* ── Training Minutes chart card ─────────────────────────────────────────────  */

/* Row(SpaceBetween, CenterVertically): title + toggle. */
.insights-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

/* titleMedium SemiBold. */
.insights-chart-title {
    color: #2e2c28;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

/* ChartViewToggle: Row with surfaceContainerHigh bg, 8dp rounded, 3dp inner padding. */
.insights-chart-toggle {
    display: flex;
    background: #ede8e3;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

/* Each toggle button: labelSmall, no background when unselected. */
.insights-chart-toggle-btn {
    padding: 5px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(46, 44, 40, 0.7);
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* Selected: primary bg, onPrimary text, SemiBold. */
.insights-chart-toggle-btn-selected {
    background: #006a8e;
    color: #ffffff;
    font-weight: 600;
}

/* Period navigation row: Row(SpaceBetween, CenterVertically). */
.insights-chart-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

/* IconButton 32dp. */
.insights-chart-nav-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2e2c28;
    padding: 0;
    transition: background-color 0.15s ease;
}

.insights-chart-nav-btn:hover {
    background: rgba(46, 44, 40, 0.08);
}

.insights-chart-nav-btn-disabled {
    color: rgba(46, 44, 40, 0.3);
    cursor: default;
}

.insights-chart-nav-btn-disabled:hover {
    background: none;
}

/* bodySmall, onSurface@70%, center-aligned. */
.insights-chart-period-label {
    color: rgba(46, 44, 40, 0.7);
    font-size: 12px;
    text-align: center;
    flex: 1;
}

/* ── Bar chart ────────────────────────────────────────────────────────────── */

.insights-chart-area {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Y-axis + bars side by side (Arrangement.spacedBy(6.dp)). */
.insights-chart-row {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

/* Y-axis: 32dp wide, relative for absolute-positioned labels. */
.insights-y-axis {
    width: 32px;
    flex-shrink: 0;
    height: 140px;
    position: relative;
}

/* Each Y label: 10sp, onSurface@72%, right-aligned, absolute at computed top. */
.insights-y-label {
    position: absolute;
    right: 0;
    font-size: 10px;
    color: rgba(46, 44, 40, 0.72);
    transform: translateY(-50%);
    white-space: nowrap;
}

/* Bars container: grows to fill remaining width, 140px tall, relative for grid lines. */
.insights-bars-container {
    flex: 1;
    height: 140px;
    display: flex;
    align-items: flex-end;
    position: relative;
    gap: 5px;
}

/* Grid lines: absolute, full width, 1dp onSurface@6%. */
.insights-grid-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(46, 44, 40, 0.06);
    pointer-events: none;
}

/* Each bar column: flex 1, full height, relative for tooltip, centered horizontally. */
.insights-bar-col {
    flex: 1;
    height: 140px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

/* Bar: full width, vertical gradient primary → primary@65%, 4dp top-rounded corners. */
.insights-bar {
    width: 100%;
    background: linear-gradient(to bottom, #006a8e, rgba(0, 106, 142, 0.65));
    border-radius: 4px 4px 0 0;
    transition: opacity 0.15s ease;
}

.insights-bar-dimmed {
    opacity: 0.25;
}

/* Ghost stub for zero-value bars: 3px tall, primary@12% alpha. */
.insights-bar-stub {
    width: 100%;
    height: 3px;
    background: rgba(0, 106, 142, 0.12);
    border-radius: 2px;
}

/* Floating tooltip above selected bar. */
.insights-tooltip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    white-space: nowrap;
}

/* Tooltip card: inverseSurface@88% bg, 8dp rounded, elevation 4dp. */
.insights-tooltip-label {
    background: rgba(47, 48, 51, 0.88);
    color: rgba(241, 240, 232, 0.65);
    font-size: 10px;
    font-weight: 500;
    margin: 0;
    padding: 8px 10px 2px;
    border-radius: 8px 8px 0 0;
    width: 100%;
    box-sizing: border-box;
}

.insights-tooltip-value {
    background: rgba(47, 48, 51, 0.88);
    color: #f1f0e8;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    padding: 0 10px 8px;
    border-radius: 0 0 8px 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 100%;
    box-sizing: border-box;
}

/* Downward caret pointing at bar. */
.insights-tooltip-caret {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgba(47, 48, 51, 0.88);
    margin-top: -1px;
}

/* X-axis labels row: spacer matching Y-axis width + labels container. */
.insights-x-axis {
    display: flex;
    gap: 6px;
}

.insights-x-axis-spacer {
    width: 32px;
    flex-shrink: 0;
}

.insights-x-labels {
    flex: 1;
    display: flex;
    gap: 5px;
}

/* Each X label: 11sp, onSurface@72%, center-aligned. */
.insights-x-label {
    flex: 1;
    text-align: center;
    font-size: 11px;
    color: rgba(46, 44, 40, 0.72);
    min-width: 0;
    overflow: hidden;
}

/* ── Weekly summaries ─────────────────────────────────────────────────────── */

.insights-weekly-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* "Weekly Summaries" titleMedium SemiBold. */
.insights-weekly-title {
    color: #2e2c28;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

/* WeekSummaryCard: NonClickableCardContainer, no padding override (padding added by children). */
.insights-week-card {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 4dp primary accent bar on the left for the current week. */
.insights-week-accent-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #006a8e;
    border-radius: 20px 0 0 20px;
}

/* Small screen: stats section full-width header with surfaceContainerHigh bg.
   Large screen: stats left (42%), workouts right (58%), side-by-side. */
.insights-week-stats {
    background: #fcfbf9;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.insights-week-divider {
    height: 1px;
    background: rgba(46, 44, 40, 0.1);
}

.insights-week-workouts {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@media (min-width: 600px) {
    .insights-week-card {
        flex-direction: row;
    }

    .insights-week-stats {
        width: 42%;
        flex-shrink: 0;
    }

    .insights-week-divider {
        width: 1px;
        height: auto;
    }

    .insights-week-workouts {
        flex: 1;
        padding: 16px 16px 16px 12px;
    }
}

/* Relative week pill: "This Week" / "Last Week" / "N Weeks Ago". */
.insights-week-pill {
    color: #2e2c28;
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
}

/* Current week: Box with primary@12% bg, 6dp rounded. */
.insights-week-pill-current {
    background: rgba(0, 106, 142, 0.12);
    color: #006a8e;
    border-radius: 6px;
    padding: 3px 8px;
}

/* Week date range: bodySmall, onSurface@82%. */
.insights-week-date {
    color: rgba(46, 44, 40, 0.82);
    font-size: 12px;
}

/* Change percent badge: Box 6dp rounded, positive=green@10%, negative=error@10%. */
.insights-change-badge {
    display: inline-block;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    width: fit-content;
    margin-top: 4px;
}

.insights-change-badge-pos {
    background: rgba(42, 125, 78, 0.1);
    color: #2a7d4e;
}

.insights-change-badge-neg {
    background: rgba(176, 0, 32, 0.1);
    color: #b00020;
}

/* Total minutes: titleLarge Bold, primary color. */
.insights-week-total {
    color: #006a8e;
    font-size: 22px;
    font-weight: 700;
    margin: 4px 0 0;
}

/* Sessions + avg time row. */
.insights-week-meta {
    display: flex;
    gap: 12px;
    margin-top: 2px;
}

.insights-week-meta-item {
    display: flex;
    align-items: center;
    gap: 3px;
    color: rgba(46, 44, 40, 0.82);
    font-size: 12px;
}

/* "WORKOUTS" label: labelSmall 1.2sp letterSpacing, onSurface@50%. */
.insights-workouts-label {
    color: rgba(46, 44, 40, 0.5);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
}

/* Each workout row: Box, focus area color@6% bg, 8dp rounded. */
.insights-workout-row {
    border-radius: 8px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* 7dp circle dot in focus area color. */
.insights-workout-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Weekday text: labelSmall Medium, onSurface@50%, fixed 24dp width. */
.insights-workout-day {
    color: rgba(46, 44, 40, 0.5);
    font-size: 11px;
    font-weight: 500;
    width: 24px;
    flex-shrink: 0;
}

/* Focus area: bodySmall Medium, onSurface. */
.insights-workout-area {
    flex: 1;
    color: #2e2c28;
    font-size: 12px;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Duration: labelSmall SemiBold, in focus area color. */
.insights-workout-dur {
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}