/*
 * report-food.css — MyBest24 Food Report Styles
 *
 * Owns: tab bar, weekly bar chart, food animated icon column, pro upsell block.
 * Does NOT own: daily ring styles (stage.css + report.js inline SVG),
 *               stage panel shell (stage.css).
 *
 * Load after stage.css in index.html:
 *   <link rel="stylesheet" href="report-food.css">
 *
 * CSS variable reference — all from styles.css :root or body.dark-mode:
 *   --accent-color    #46a5ce (same in both modes)
 *   --text-main       near-black (light) / white (dark)
 *   --text-muted      warm brown (light) / gray (dark)
 *   --bg-panel        panel background
 *   --box-border      border color
 *   --color-report-neutral / -warning / -danger  (added to styles.css :root)
 *
 * Desktop-first. @media (max-width: 600px) overrides at bottom.
 * Shared .report-* classes (tabs, bars, day columns) are also used by
 * report-activity.css — keep them generic, not food-specific.
 */


/* ── Food panel body — fixed height so top position stays consistent ──────── */
/* stage.css sets max-height: 70vh — match it as a min-height so the panel
   body is always the same height whether daily or weekly tab is active.
   Without this, the panel shrinks on weekly (less content) and the top
   of the panel slides down toward the bottom of the screen. */
#food-panel .stage-panel-body {
    min-height: 70vh;
    min-height: 70dvh; /* iOS Safari: dvh excludes browser chrome */
}

/* ── Tab bar ──────────────────────────────────────────────────────────────── */

.report-tab-bar {
    display: flex;
    gap: 4px;
    padding: 10px 16px 12px;
    border-bottom: 1px solid var(--box-border);
}

.report-tab {
    flex: 1;
    padding: 6px 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.report-tab--active {
    color: var(--text-main);
    border-bottom-color: var(--accent-color);
}


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

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

.report-weekly-headline {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 12px 0 0;
    text-align: center;
}


/* ── Weekly section — base layout (compact + expanded) ───────────────────── */
/*
   In compact mode: plain block, no icon column visible.
   In expanded mode (.stage-panel-expanded ancestor): row with icon on left.
   The .report-food-chart-section wrapper has data-nutrient for future targeting.
*/

/* Food chart sections: block in compact, flex row with icon left in expanded.
   Uses #food-panel ID for maximum specificity — same pattern as report-activity.css. */
/* Always flex-row so icon sits inline. */
.report-food-chart-section {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    margin-top: 20px;
}

#food-panel.stage-panel-expanded .report-food-chart-section {
    gap: 12px;
}

/* ── Food animated icon column ────────────────────────────────────────────── */

/* Icon column: always visible in weekly view (compact and expanded) */
.report-food-icon-col {
    display: flex;
    flex-shrink: 0;
    width: 48px;
    align-items: center;
    justify-content: center;
    padding-top: 36px;
}

.report-food-chart-content {
    flex: 1;
    min-width: 0;
}

/* Food chart icon — static PNG, scaled 4× via image-rendering:pixelated.
   Mono filter from --icon-accent-filter; no multicolor for food weekly. */
.report-food-chart-anim {
    display: block;
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    filter: var(--icon-accent-filter);
}


/* ── Section title ────────────────────────────────────────────────────────── */

.report-weekly-section-title {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
    padding: 0 2px;
}

/* ── Bar strip — 7-day row ────────────────────────────────────────────────── */

.report-weekly-bars {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    padding: 8px 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0; /* prevents bars collapsing on narrow panels */
}

.report-day-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 32px;
}

/* Today column: accent ring so the eye lands on today without reading labels. */
.report-day-col--today .report-bar-track {
    box-shadow: 0 0 0 1px var(--accent-color);
}

.report-day-bars-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    height: 72px;
    justify-content: flex-end;
}

.report-bar-track {
    width: 22px;
    height: 56px;
    background: color-mix(in srgb, var(--accent-color) 50%, transparent);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

/* Bar fill: starts at height:0% (set inline in JS).
   JS animates to data-target-height on tab switch (reveal animation).
   Transition matches report-activity.css and box-reveal-animation.css curves. */
.report-bar-fill {
    width: 100%;
    border-radius: 5px;
    transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    /* background set inline — data-driven per day and per nutrient */
}

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

/* Overage annotation: color is set inline (matches bar fill) so it
   responds to the same danger/warning/neutral threshold as the bar. */
.report-bar-overage {
    font-size: 0.58rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
}

.report-day-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 6px;
    text-align: center;
    white-space: nowrap;
}

/* Checkmark below day label — shown in cal chart when both goals are met.
   Placeholder span reserves identical vertical space on non-target days
   so all labels stay aligned across every day column.
   applyUIIcon always renders at native 16px — element must match. */
.report-day-check {
    display: block;
    width: 16px;
    height: 16px;
    margin: 3px auto 0;
}

img.report-day-check {
    image-rendering: pixelated;
    filter: var(--icon-accent-filter);
    opacity: 0.9;
}


/* ── Empty day placeholder — outlined bar shape ───────────────────────────── */
/* Matches bar track dimensions (22×56px, border-radius 5px) so the outline
   sits exactly where a filled bar would appear. Border at 50% accent opacity
   signals "data could be here" without looking like an error. */

.report-day-col--empty .report-bar-placeholder {
    width: 22px;
    height: 56px;
    border-radius: 5px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 50%, transparent);
}


/* ── Pro upsell ───────────────────────────────────────────────────────────── */

.report-pro-upsell {
    padding: 24px 16px;
    text-align: center;
}

.report-pro-upsell p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 10px;
}

.report-pro-link {
    font-size: 0.82rem;
    color: var(--accent-color);
    text-decoration: none;
    opacity: 0.85;
}

.report-pro-link:hover {
    opacity: 1;
}


/* ── Pro badge — shared across all pro panels ─────────────────────────────── */
.badge-pro {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    border-radius: 4px;
    padding: 1px 5px;
    opacity: 0.85;
    vertical-align: middle;
    margin-left: 6px;
}


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

@media (max-width: 600px) {
    .report-bar-track {
        width: 18px;
        height: 48px;
    }

    .report-day-bars-wrap {
        height: 62px;
    }

    .report-day-col {
        min-width: 28px;
    }
}

/* ── 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. */

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

/* ── Food daily rings — equal size, side by side ─────────────────────────────
   Replaces the old stacked big-ring layout with two equal rings matching
   the report daily view style (stage-ring-svg / stage-ring-icon pattern).
   Number is white/bold/large below the ring; label is small/muted below that. */

/* Row container: two rings side by side, centered in the left column */
.food-rings-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    justify-content: center;
}

/* Each ring cell: ring wrap + label + number stacked */
.food-ring-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Label — small caps, muted, below ring */
.food-ring-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
}

/* Number — white, bold, large, clearly readable at a glance */
.food-ring-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    text-align: center;
    line-height: 1;
}

/* Small unit suffix (g for protein) — slightly smaller, same weight */
.food-ring-unit {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 2px;
}


/* ── Goals section — optional thin border ────────────────────────────────────
   Remove the .food-goals-bordered class from the HTML to disable the border.
   Keep it to show a subtle 1px accent-color border around the goals block.   */

.food-goals-bordered {
    border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
    border-radius: 8px;
    padding: 8px 10px;
}


/* ── Food ring sizing — 88px (2× the 44px report rings) ─────────────────────
   The stage-ring-* classes from stage.css default to 44px. These overrides
   apply only inside food ring cells so report rings are unaffected.
   applyStaticAtlasToElement produces a 16px canvas tile — image-rendering:pixelated
   + width/height:32px scales it 2× cleanly inside the larger ring. */

.food-ring-cell .stage-ring-wrap {
    width: 88px;
    height: 88px;
}

.food-ring-cell .stage-ring-svg {
    width: 88px;
    height: 88px;
}

.food-ring-cell .stage-ring-icon {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}


/* ── Remove up/down spinner arrows from goal number inputs ───────────────────
   Spinners obscure the typed value in compact view. User can still click and
   type a new number directly. Works across Chrome/Safari/Firefox. */

#food-cal-goal::-webkit-inner-spin-button,
#food-cal-goal::-webkit-outer-spin-button,
#food-protein-goal::-webkit-inner-spin-button,
#food-protein-goal::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#food-cal-goal,
#food-protein-goal {
    -moz-appearance: textfield; /* Firefox */
}


/* ── Food rings — expanded view: 128px ───────────────────────────────────────
   Compact view stays at 88px (defined above). Expanded-only override.
   Icon scales to 48px (3× the 16px tile) for clean pixelated rendering. */

#food-panel.stage-panel-expanded .food-ring-cell .stage-ring-wrap,
#food-panel.stage-panel-expanded .food-ring-cell .stage-ring-svg {
    width: 128px;
    height: 128px;
}

#food-panel.stage-panel-expanded .food-ring-cell .stage-ring-icon {
    width: 48px;
    height: 48px;
}


/* ── Goal inputs — ensure 4-digit values are fully visible ───────────────────
   The input inherits a narrow width from the goals column. Setting min-width
   ensures "2295" or "192" never gets clipped regardless of panel width. */

#food-cal-goal,
#food-protein-goal {
    min-width: 72px;
    width: 80%;
}


/* ─────────────────────────────────────────────────────────────────────────────
   Body Weight — daily goals section
   Injected into <div id="food-weight-section"> by reportFoodRenderWeightSection().
   Placed above the food log section in the daily view.
   ───────────────────────────────────────────────────────────────────────────── */

.food-weight-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

/* Unit toggle pill — styled like .badge-pro but interactive */
.food-weight-unit-toggle {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--accent-color);
    background: none;
    border: 1px solid var(--accent-color);
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.food-weight-unit-toggle:hover  { opacity: 1; }
.food-weight-unit-toggle:active { opacity: 0.6; }

.food-weight-inputs {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.food-weight-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Number input — matches the width of food goal inputs (#food-cal-goal pattern) */
.food-weight-num-input {
    width: 72px;
    min-width: 60px;
    box-sizing: border-box;
}

/* Hide native number spinners — same pattern as #food-cal-goal */
.food-weight-num-input::-webkit-inner-spin-button,
.food-weight-num-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.food-weight-num-input { -moz-appearance: textfield; }

/* Delta — sits inline after the two inputs, baseline-aligned */
.food-weight-delta {
    font-size: 0.78rem;
    color: var(--text-muted);
    padding-bottom: 5px;  /* align visually with input text baseline */
    white-space: nowrap;
}

.food-weight-delta--met {
    color: var(--accent-color);
    font-weight: 600;
}


/* ─────────────────────────────────────────────────────────────────────────────
   Body Weight — weekly sparkline chart
   Prepended to .report-food-weekly-wrap, above the calorie/protein bar charts.
   ───────────────────────────────────────────────────────────────────────────── */

.food-weight-chart-section {
    margin-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 4px;
}

.food-weight-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.food-weight-chart-empty {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 6px 0 4px;
}

/* Net change badge in chart header — accent for loss (most common goal),
   warning amber for gain, matching the food bar chart color system */
.food-weight-net {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.food-weight-net--down { color: var(--accent-color); }
.food-weight-net--up   { color: var(--color-report-warning, #c9913d); }

/* SVG container — scales with panel width, overflow:visible so edge dots don't clip */
.food-weight-sparkline {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* SVG element styles via CSS — vars resolve correctly for inline SVG */
.food-weight-sparkline-line {
    stroke: var(--accent-color);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.food-weight-goal-line {
    stroke: var(--accent-color);
    stroke-width: 1;
    stroke-dasharray: 4 3;
    opacity: 0.35;
}

.food-weight-dot {
    fill: var(--accent-color);
    opacity: 0.6;
}
.food-weight-dot--today { opacity: 1; }

/* SVG text — font-family:inherit picks up the app's font stack */
.food-weight-day-label {
    fill: var(--text-muted, rgba(255, 255, 255, 0.5));
    font-size: 7px;
    text-anchor: middle;
    font-family: inherit;
}
.food-weight-day-label--today {
    fill: var(--accent-color);
    font-weight: 700;
}

/* Today's value label (shown above the today dot only) */
.food-weight-val-label {
    fill: var(--text-main, #fff);
    font-size: 7.5px;
    font-weight: 600;
    text-anchor: middle;
    font-family: inherit;
}

@media (prefers-reduced-motion: reduce) {
    /* sparkline has no transitions, nothing to suppress here */
}