/*
 * report-activity.css — MyBest24 Weekly Activity Report Styles
 *
 * Owns: section layout (icon col + content), animated type icon,
 *       bar reveal transition, multicolor bar + icon filter overrides,
 *       hours label, bonus annotation.
 *
 * Does NOT own: tab bar, bar track/fill base, day columns, day labels,
 *   bar placeholder — those shared .report-* classes live in report-food.css.
 *
 * Multicolor architecture:
 *   Bar fills — inline style sets mono baseline; CSS !important overrides
 *     per type using body.mode-multicolor + [data-type] on the section.
 *   Animated icons — filter: var(--icon-accent-filter) by default;
 *     body.mode-multicolor + [data-type] overrides with --icon-filter-{type}.
 *   This mirrors the styles.css pattern for current-hour sprites exactly.
 *   No JS is required for color updates — toggling multicolor auto-applies.
 *
 * Icon column visibility: always in DOM, CSS controls show/hide.
 *   Compact  → display:none
 *   Expanded → display:flex  (parent has .stage-panel-expanded)
 */


/* ── Weekly wrapper ─────────────────────────────────────────────────────────── */

.report-activity-weekly-wrap {
    padding: 0 16px 16px;
}


/* ── Section layout — icon column + content ─────────────────────────────────── */
/*
   Each section is a row in expanded mode: [64px icon] [section content].
   In compact mode, icon column is hidden and the layout is a plain block.
   The data-type attribute on .report-activity-section-wrap is the CSS hook
   for multicolor bar and icon filter rules below.
*/

/* Compact: plain block, icon column hidden. Expanded: flex row with icon left.
   Uses #report-panel ID for maximum specificity — guarantees these rules win
   over any inherited flex or display rules from stage.css or report-food.css. */
/* EXACT same pattern as working food weekly layout in report-food.css.
   Compact: block. Expanded: flex row with icon left.
   #report-panel.stage-panel-expanded mirrors #food-panel.stage-panel-expanded. */
.report-activity-section-wrap {
    display: block;
    margin-top: 20px;
}

#report-panel.stage-panel-expanded .report-activity-section-wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

/* Icon column: hidden in compact, shown in expanded */
.report-activity-icon-col {
    display: none;
}

#report-panel.stage-panel-expanded .report-activity-icon-col {
    display: flex;
    flex-shrink: 0;
    width: 72px;
    align-items: center;
    justify-content: center;
    padding-top: 26px;
}

/* Content column: takes remaining width */
.report-activity-section-content {
    flex: 1;
    min-width: 0;
}


/* ── Section header — type label + mini-headline ────────────────────────────── */

.report-activity-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.report-activity-mini-headline {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 400;
    white-space: nowrap;
}


/* ── Small inline icon (compact mode title) ─────────────────────────────────── */
/* Visible in compact. Hidden in expanded — large animated icon takes over. */

.report-activity-type-icon-small {
    width: 14px;
    height: 14px;
    image-rendering: pixelated;
    vertical-align: middle;
    opacity: 0.8;
}

#report-panel.stage-panel-expanded .report-activity-type-icon-small {
    display: none;
}


/* ── Animated type icon ─────────────────────────────────────────────────────── */
/*
   Mono mode: uses global accent filter (same as all other sprite-animation
   elements in the app — no special rule needed).
   Multicolor mode: per-type filter via --icon-filter-{type} vars written by
   colorpicker.js to :root. CSS inheritance delivers the value through [data-type].

   !important required — sprites.js sets element.style.filter inline via RAF
   after stylesheet rules run. Without !important the inline style wins.
   This matches the pattern in styles.css for .status-current .sprite-animation.
*/

.report-activity-type-anim {
    display: block;
    width: 64px;
    height: 64px;
    --icon-size: 64px;
    image-rendering: pixelated;
    filter: var(--icon-accent-filter);
}

/* Multicolor: per-type icon filter — one rule per type */
body.mode-multicolor .report-activity-section-wrap[data-type="SLEEP"]     .report-activity-type-anim { filter: var(--filter-type-sleep, var(--icon-accent-filter))     !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="WORK"]      .report-activity-type-anim { filter: var(--filter-type-work, var(--icon-accent-filter))      !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="FITNESS"]   .report-activity-type-anim { filter: var(--filter-type-fitness, var(--icon-accent-filter))   !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="SELF_CARE"] .report-activity-type-anim { filter: var(--filter-type-self-care, var(--icon-accent-filter)) !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="FAMILY"]    .report-activity-type-anim { filter: var(--filter-type-family, var(--icon-accent-filter))    !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="FUN"]       .report-activity-type-anim { filter: var(--filter-type-fun, var(--icon-accent-filter))       !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="FREE"]      .report-activity-type-anim { filter: var(--filter-type-free, var(--icon-accent-filter))      !important; }


/* ── Bar reveal transition ──────────────────────────────────────────────────── */
/*
   Bars start at height:0% (set inline in JS template). JS sets them to their
   target height with a per-section stagger (reportActivityRevealBars).
   This transition turns that height change into the grow animation.

   cubic-bezier(0.22, 1, 0.36, 1) = fast-out-slow-finish, same curve as
   box-reveal-animation.css for visual consistency across the app.
*/

.report-bar-fill {
    transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .report-bar-fill {
        transition: none;
    }
}


/* ── Multicolor bar fills ───────────────────────────────────────────────────── */
/*
   In mono mode, bar fill color is set inline (background: var(--accent-color)).
   In multicolor mode, CSS !important overrides the inline style per type.

   Normal bars   → type's effect color (full saturation)
   Bonus bars    → type's effect color at 60% mix (lighter — signals "extra")

   Bonus bars have class .report-bar-fill--bonus added by JS in reportActivityBuildDayBar.
   Normal bars: no extra class, targeted with :not(.report-bar-fill--bonus).

   These rules follow the exact same specificity pattern as styles.css multicolor
   block rules — [data-type] on an ancestor, !important to beat inline style.
*/

/* Normal bars (under or at standard) */
body.mode-multicolor .report-activity-section-wrap[data-type="SLEEP"]     .report-bar-fill:not(.report-bar-fill--bonus) { background: var(--color-sleep-effect)     !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="WORK"]      .report-bar-fill:not(.report-bar-fill--bonus) { background: var(--color-work-effect)      !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="FITNESS"]   .report-bar-fill:not(.report-bar-fill--bonus) { background: var(--color-fitness-effect)   !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="SELF_CARE"] .report-bar-fill:not(.report-bar-fill--bonus) { background: var(--color-self-care-effect) !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="FAMILY"]    .report-bar-fill:not(.report-bar-fill--bonus) { background: var(--color-family-effect)    !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="FUN"]       .report-bar-fill:not(.report-bar-fill--bonus) { background: var(--color-fun-effect)       !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="FREE"]      .report-bar-fill:not(.report-bar-fill--bonus) { background: var(--color-free-effect)      !important; }

/* Bonus bars (over standard) — lighter tint of the type's effect color */
body.mode-multicolor .report-activity-section-wrap[data-type="SLEEP"]     .report-bar-fill.report-bar-fill--bonus { background: color-mix(in srgb, var(--color-sleep-effect)     60%, white) !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="WORK"]      .report-bar-fill.report-bar-fill--bonus { background: color-mix(in srgb, var(--color-work-effect)      60%, white) !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="FITNESS"]   .report-bar-fill.report-bar-fill--bonus { background: color-mix(in srgb, var(--color-fitness-effect)   60%, white) !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="SELF_CARE"] .report-bar-fill.report-bar-fill--bonus { background: color-mix(in srgb, var(--color-self-care-effect) 60%, white) !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="FAMILY"]    .report-bar-fill.report-bar-fill--bonus { background: color-mix(in srgb, var(--color-family-effect)    60%, white) !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="FUN"]       .report-bar-fill.report-bar-fill--bonus { background: color-mix(in srgb, var(--color-fun-effect)       60%, white) !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="FREE"]      .report-bar-fill.report-bar-fill--bonus { background: color-mix(in srgb, var(--color-free-effect)      60%, white) !important; }


/* ── Hours label — above each bar ───────────────────────────────────────────── */

.report-activity-day-hours {
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    line-height: 1;
    min-height: 10px;
    display: block;
    text-align: center;
}

/* Invisible placeholder — reserves the same vertical space as the hours label
   on empty-day columns so all day labels stay horizontally aligned. */
.report-activity-day-hours--hidden {
    visibility: hidden;
}


/* ── Bonus annotation — "+Xh" above bar when hours exceed standard ──────────── */
/* Accent color signals positive (extra) — distinct from food's warning/danger. */

.report-bar-bonus {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--accent-color);
    white-space: nowrap;
    line-height: 1;
}

/* In multicolor mode, bonus annotation color matches the type's effect color */
body.mode-multicolor .report-activity-section-wrap[data-type="SLEEP"]     .report-bar-bonus { color: var(--color-sleep-effect); }
body.mode-multicolor .report-activity-section-wrap[data-type="WORK"]      .report-bar-bonus { color: var(--color-work-effect); }
body.mode-multicolor .report-activity-section-wrap[data-type="FITNESS"]   .report-bar-bonus { color: var(--color-fitness-effect); }
body.mode-multicolor .report-activity-section-wrap[data-type="SELF_CARE"] .report-bar-bonus { color: var(--color-self-care-effect); }
body.mode-multicolor .report-activity-section-wrap[data-type="FAMILY"]    .report-bar-bonus { color: var(--color-family-effect); }
body.mode-multicolor .report-activity-section-wrap[data-type="FUN"]       .report-bar-bonus { color: var(--color-fun-effect); }
body.mode-multicolor .report-activity-section-wrap[data-type="FREE"]      .report-bar-bonus { color: var(--color-free-effect); }


/* ── Mobile ─────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .report-activity-section-header {
        flex-wrap: wrap;
        gap: 2px;
    }
    .report-activity-mini-headline {
        flex-basis: 100%;
        white-space: normal;
    }
}


/* ── Multicolor: daily ring icons ────────────────────────────────────────────
   Applied to the activity type img inside each ring cell — both compact and
   expanded daily view. The ring cells already have data-type so no JS needed.
   !important required: stage.css may set filter on .stage-ring-icon directly. */

body.mode-multicolor #report-rings .stage-ring-cell[data-type="SLEEP"]     .stage-ring-icon { filter: var(--filter-type-sleep, var(--icon-accent-filter))     !important; }
body.mode-multicolor #report-rings .stage-ring-cell[data-type="WORK"]      .stage-ring-icon { filter: var(--filter-type-work, var(--icon-accent-filter))      !important; }
body.mode-multicolor #report-rings .stage-ring-cell[data-type="FITNESS"]   .stage-ring-icon { filter: var(--filter-type-fitness, var(--icon-accent-filter))   !important; }
body.mode-multicolor #report-rings .stage-ring-cell[data-type="SELF_CARE"] .stage-ring-icon { filter: var(--filter-type-self-care, var(--icon-accent-filter)) !important; }
body.mode-multicolor #report-rings .stage-ring-cell[data-type="FAMILY"]    .stage-ring-icon { filter: var(--filter-type-family, var(--icon-accent-filter))    !important; }
body.mode-multicolor #report-rings .stage-ring-cell[data-type="FUN"]       .stage-ring-icon { filter: var(--filter-type-fun, var(--icon-accent-filter))       !important; }
body.mode-multicolor #report-rings .stage-ring-cell[data-type="FREE"]      .stage-ring-icon { filter: var(--filter-type-free, var(--icon-accent-filter))      !important; }


/* ── Multicolor: daily ring SVG fill (the progress arc stroke) ───────────────
   stroke: var(--color-TYPE-effect) matches the canvas-pipeline tint used in
   the 24-box grid — same palette, consistent look across the whole app. */

body.mode-multicolor #report-rings .stage-ring-cell[data-type="SLEEP"]     .stage-ring-fill { stroke: var(--color-sleep-effect)     !important; }
body.mode-multicolor #report-rings .stage-ring-cell[data-type="WORK"]      .stage-ring-fill { stroke: var(--color-work-effect)      !important; }
body.mode-multicolor #report-rings .stage-ring-cell[data-type="FITNESS"]   .stage-ring-fill { stroke: var(--color-fitness-effect)   !important; }
body.mode-multicolor #report-rings .stage-ring-cell[data-type="SELF_CARE"] .stage-ring-fill { stroke: var(--color-self-care-effect) !important; }
body.mode-multicolor #report-rings .stage-ring-cell[data-type="FAMILY"]    .stage-ring-fill { stroke: var(--color-family-effect)    !important; }
body.mode-multicolor #report-rings .stage-ring-cell[data-type="FUN"]       .stage-ring-fill { stroke: var(--color-fun-effect)       !important; }
body.mode-multicolor #report-rings .stage-ring-cell[data-type="FREE"]      .stage-ring-fill { stroke: var(--color-free-effect)      !important; }


/* ── Multicolor: daily ring track (faint type-color tint) ───────────────────
   Matches the 12% mix used for the global accent track in stage.css so the
   visual weight is identical — just hue-shifted per type. */

body.mode-multicolor #report-rings .stage-ring-cell[data-type="SLEEP"]     .stage-ring-track { stroke: color-mix(in srgb, var(--color-sleep-effect)     12%, transparent) !important; }
body.mode-multicolor #report-rings .stage-ring-cell[data-type="WORK"]      .stage-ring-track { stroke: color-mix(in srgb, var(--color-work-effect)      12%, transparent) !important; }
body.mode-multicolor #report-rings .stage-ring-cell[data-type="FITNESS"]   .stage-ring-track { stroke: color-mix(in srgb, var(--color-fitness-effect)   12%, transparent) !important; }
body.mode-multicolor #report-rings .stage-ring-cell[data-type="SELF_CARE"] .stage-ring-track { stroke: color-mix(in srgb, var(--color-self-care-effect) 12%, transparent) !important; }
body.mode-multicolor #report-rings .stage-ring-cell[data-type="FAMILY"]    .stage-ring-track { stroke: color-mix(in srgb, var(--color-family-effect)    12%, transparent) !important; }
body.mode-multicolor #report-rings .stage-ring-cell[data-type="FUN"]       .stage-ring-track { stroke: color-mix(in srgb, var(--color-fun-effect)       12%, transparent) !important; }
body.mode-multicolor #report-rings .stage-ring-cell[data-type="FREE"]      .stage-ring-track { stroke: color-mix(in srgb, var(--color-free-effect)      12%, transparent) !important; }


/* ── Multicolor: weekly compact small icon (visible when NOT expanded) ───────
   The large animated icon (report-activity-type-anim) handles expanded mode.
   This rule colors the small static icon shown in compact weekly. */

body.mode-multicolor .report-activity-section-wrap[data-type="SLEEP"]     .report-activity-type-icon-small { filter: var(--filter-type-sleep, var(--icon-accent-filter))     !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="WORK"]      .report-activity-type-icon-small { filter: var(--filter-type-work, var(--icon-accent-filter))      !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="FITNESS"]   .report-activity-type-icon-small { filter: var(--filter-type-fitness, var(--icon-accent-filter))   !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="SELF_CARE"] .report-activity-type-icon-small { filter: var(--filter-type-self-care, var(--icon-accent-filter)) !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="FAMILY"]    .report-activity-type-icon-small { filter: var(--filter-type-family, var(--icon-accent-filter))    !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="FUN"]       .report-activity-type-icon-small { filter: var(--filter-type-fun, var(--icon-accent-filter))       !important; }
body.mode-multicolor .report-activity-section-wrap[data-type="FREE"]      .report-activity-type-icon-small { filter: var(--filter-type-free, var(--icon-accent-filter))      !important; }


/* ── Goal section — inline label + 1-row textarea ───────────────────────────
   Reduces visual weight of the goal area so Log Activity gets more prominence.
   Padding-bottom compensates for the removed textarea row (keeps same total
   vertical rhythm so Log Activity stays in roughly the same position). */

.report-goal-section {
    padding-bottom: 12px; /* negative space where the 2nd row used to be */
}

/* Same spacing below Log Activity as below Goal — consistent rhythm before Today's Activity */
.report-log-activity-section {
    padding-bottom: 12px;
}

.report-goal-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.report-goal-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Textarea fills remaining width */
.report-goal-row .stage-goal-input {
    flex: 1;
    min-width: 0;
    resize: none;
}


/* ── Cally row — expanded view padding ──────────────────────────────────────
   In the 600px expanded panel, the Cally bubble and sprite go edge-to-edge.
   Adding horizontal padding gives the bubble breathing room on the left and
   the sprite room on the right, matching the screenshot. */

#report-panel.stage-panel-expanded .stage-cally-row {
    padding-left: 20px;
    padding-right: 20px;
}