/* ============================================================================
   NUTRITION — DESKTOP LAYOUT (min-width:1024px only; mobile untouched)
   Problem: on desktop the page stacks every block full-width in a flex column,
   so on wide screens the AI meal card + dashboard stretch thin with big
   dead-space, and the page runs very tall. Fix: cap + centre the content, put
   the calorie/macro dashboard and the AI meal idea side-by-side, and run the
   four meals across one row so the width is used and the page is shorter.
   ============================================================================ */
@media (min-width: 1024px) {
    .nutrition-page .nut-content {
        width: 100%;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Top row: calorie/macros card (left half) + the Breakfast/Lunch/Dinner/Snack
           meal cards (right half). Meal Idea spans full width beneath. */
        grid-template-areas:
            "dash  meals"
            "ai    ai";
        align-items: stretch;
        gap: 1rem;
    }
    /* Consistent gaps + no clipping: clear the mobile max-height so the inner
       list flexes to fill each meal card; even spacing between the four cards. */
    .nutrition-page .nut-meals-grid { gap: 1rem !important; }
    .nutrition-page .nut-meal-items { max-height: none !important; }
    .nutrition-page .nut-dash { margin: 0 !important; }
    .nutrition-page .nut-ai-box { margin-top: 0 !important; }
    /* dash + meals share the row height so the kcal box bottom aligns with Dinner/Snacks */
    .nutrition-page .nut-dash      { grid-area: dash;  margin: 0; align-self: stretch; }
    .nutrition-page .nut-ai-box    { grid-area: ai;    margin: 0; width: 100%; }
    .nutrition-page .nut-meals-grid{ grid-area: meals; margin: 0; align-self: stretch; grid-template-columns: 1fr 1fr; min-height: 0; }

    /* FIXED meal cards: adding food scrolls INSIDE the card instead of growing the box. */
    .nutrition-page .nut-meal-col   { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
    .nutrition-page .nut-meal-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

    /* Water on the SAME line as the "0 / 2544 kcal" — a wide, thin pill at the top-right
       of the dash (was a tall box below). */
    .nutrition-page .nut-dash-top { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 1rem !important; }
    .nutrition-page .nut-dash-cal-col { flex: 1 1 auto !important; min-width: 0 !important; }
    .nutrition-page .nut-water-btn2 {
        flex: 0 0 auto !important;
        display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0.5rem !important;
        width: auto !important; min-width: 200px !important;
        height: auto !important; padding: 0.45rem 0.9rem !important;
        align-self: flex-start !important;
    }
    .nutrition-page .nut-water-btn2 small { margin: 0 !important; opacity: 0.75; }
}

/* Mid-desktop (1024–1320): meals 2×2 is roomier than 4-across */
@media (min-width: 1024px) and (max-width: 1320px) {
    .nutrition-page .nut-meals-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   MEMBER TIMETABLE — condense rows. The render uses inline padding:1rem per cell
   so rows are very tall for little data; tighten with !important (beats inline).
   ============================================================================ */
#timetable-body .class-row td { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
#timetable-body .class-row td > div { line-height: 1.2 !important; }
#timetable-body .class-row td > div + div { margin-top: 0.15rem !important; }