/* =============================================================================
   BodyPilot · Component styles (BEM-ish .bp-*)
   ========================================================================= */

/* ── HeaderBar ────────────────────────────────────────────────── */
.bp-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-1);
}
.bp-header-bar__title { font-size: var(--text-large); font-weight: var(--weight-medium); margin-top: 2px; }
.bp-header-bar__actions { display: flex; gap: var(--space-2); align-items: center; }
.bp-header-bar__action {
    width: 44px; height: 44px;           /* iOS-HIG min touch target */
    border-radius: var(--radius-pill);
    background: var(--surface-1);
    color: var(--text-primary);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}
.bp-header-bar__action:hover { background: var(--surface-2); }
.bp-header-bar__action:active { transform: scale(0.94); }

/* ── MacroRings (web component takes care of attributes) ──────── */
bp-macro-rings { display: block; }

/* ── MacroLegend ──────────────────────────────────────────────── */
.bp-macro-legend {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-5);
}
.bp-macro-legend__entry {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;          /* allow child overflow handling */
}
.bp-macro-legend__head { display: flex; align-items: center; gap: 6px; }
.bp-macro-legend__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.bp-macro-legend__label {
    font-size: var(--text-label); letter-spacing: var(--tracking-uppercase-tight);
    text-transform: uppercase; color: var(--text-secondary); font-weight: var(--weight-medium);
}
.bp-macro-legend__value {
    font-size: var(--text-medium); font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Hero (Apple-Watch-style ring with centred value) ─────────── */
/* Single column on every breakpoint: ring on top with the headline number
   centred inside it, then balance-box + macro-legend below in full width.
   Removed the old side-by-side desktop variant — the ring-with-centre is
   visually self-explanatory and the column layout reads better on every
   width than the previous flex row. */
.bp-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}
.bp-hero__col { min-width: 0; }

/* The ring is positioned relative so the absolute-centred number sits
   exactly on top of the SVG geometry. We keep pointer-events off the
   overlay so taps still go through to anything below (none right now,
   but room for an "edit goal" affordance later). */
.bp-hero-ring {
    position: relative;
    width: 220px;
    height: 220px;
    align-self: center;
}
.bp-hero-ring bp-macro-rings { display: block; }
.bp-hero-ring__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 12px;
    pointer-events: none;
}
.bp-hero-ring__caption {
    font-size: var(--text-label);
    letter-spacing: var(--tracking-uppercase);
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
}
.bp-hero-ring__value {
    font-size: 44px;
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    margin-top: 4px;
}
.bp-hero-ring__unit {
    margin-top: 4px;
    font-size: var(--text-small);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ── CalorieStatus ────────────────────────────────────────────── */
.bp-calorie-status { font-size: var(--text-small); margin-top: 4px; font-variant-numeric: tabular-nums; }
.bp-calorie-status--remaining { color: var(--carbs); }
.bp-calorie-status--exact     { color: var(--carbs); }
.bp-calorie-status--warning   { color: var(--warning); }
.bp-calorie-status--danger    { color: var(--danger); }

/* ── MiniStatsGrid ───────────────────────────────────────────── */
.bp-mini-stats-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-5);
}
.bp-mini-stat-card {
    background: var(--surface-1); border-radius: var(--radius-lg); padding: 14px;
}
.bp-mini-stat-card__head { display: flex; justify-content: space-between; align-items: center; }
.bp-mini-stat-card__label {
    font-size: var(--text-label); letter-spacing: 0.14em; color: var(--text-secondary);
    text-transform: uppercase; font-weight: var(--weight-medium);
}
.bp-mini-stat-card__value-row { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; }
.bp-mini-stat-card__value {
    font-size: var(--text-large); font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
}
.bp-mini-stat-card__unit { font-size: 12px; color: var(--text-secondary);
                           font-variant-numeric: tabular-nums; }
.bp-mini-stat-card__footer { font-size: var(--text-micro); color: var(--text-secondary); margin-top: 8px; }

/* Water progress bars */
.bp-water-bars { display: flex; gap: 3px; margin-top: 8px; }
.bp-water-bars__cell { flex: 1; height: 4px; border-radius: 2px; background: var(--divider-strong); }
.bp-water-bars__cell--full    { background: var(--water); }
.bp-water-bars__cell--partial { background: var(--water); opacity: 0.6; }

/* ── Meal section ────────────────────────────────────────────── */
.bp-section-header {
    display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-3);
}
.bp-section-header__label {
    font-size: var(--text-label); letter-spacing: var(--tracking-uppercase);
    color: var(--text-secondary); text-transform: uppercase; font-weight: var(--weight-medium);
}
.bp-section-header__hint { font-size: var(--text-micro); color: var(--text-secondary); }

/* ── Mahlzeit-Hinzufügen-Picker (Today-Seite) ───────────────── */
.bp-add-meal {
    margin-top: 12px;
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: background var(--duration-fast) var(--ease-out);
}
.bp-add-meal[data-open="true"] { background: var(--surface-2); }
.bp-add-meal__trigger {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-medium);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-md);
    text-align: left;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.bp-add-meal__trigger:hover { background: var(--surface-2); color: var(--text-primary); }
.bp-add-meal__plus {
    width: 28px; height: 28px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bp-add-meal[data-open="true"] .bp-add-meal__plus { background: var(--surface-3); }
.bp-add-meal__caret {
    margin-left: auto;
    color: var(--text-tertiary);
    transition: transform var(--duration-fast) var(--ease-out);
}
.bp-add-meal[data-open="true"] .bp-add-meal__caret {
    transform: rotate(180deg);
    color: var(--text-secondary);
}
.bp-add-meal__options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 0 8px 10px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--duration-base) var(--ease-out),
                opacity var(--duration-fast) var(--ease-out),
                padding var(--duration-base) var(--ease-out);
}
.bp-add-meal[data-open="true"] .bp-add-meal__options {
    max-height: 200px;
    opacity: 1;
    padding: 4px 8px 10px;
}
.bp-add-meal__option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 8px;
    background: var(--surface-1);
    color: var(--text-primary);
    border: 1px solid var(--divider-subtle);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}
.bp-add-meal__option:hover {
    background: var(--surface-3);
    border-color: var(--divider-strong);
}
.bp-add-meal__option:active { transform: scale(0.98); }
.bp-add-meal__option-label {
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
}
.bp-add-meal__option-hint {
    font-size: var(--text-micro);
    color: var(--text-tertiary);
    font-weight: var(--weight-regular);
}
@media (max-width: 480px) {
    .bp-add-meal__options { grid-template-columns: repeat(2, 1fr); }
}

.bp-meal-row--link {
    border-radius: var(--radius-md);
    margin: 0 -8px;
    padding-left: 8px !important;
    padding-right: 8px !important;
    border-bottom: 1px solid var(--divider-subtle);
    transition: background var(--duration-fast) var(--ease-out);
}
.bp-meal-row--link:hover { background: var(--surface-2); }
.bp-meal-row--link:active { background: var(--surface-3); }
.bp-meal-row__chevron {
    color: var(--text-tertiary);
    flex-shrink: 0;
    margin-left: 4px;
    transition: color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}
.bp-meal-row--link:hover .bp-meal-row__chevron {
    color: var(--text-secondary);
    transform: translateX(2px);
}

.bp-meal-row {
    display: flex; align-items: center; gap: var(--space-3); padding: 12px 0;
    border-bottom: 1px solid var(--divider-subtle);
}
.bp-meal-row:last-child { border-bottom: 0; }
.bp-meal-row__time {
    width: 40px;
    font-size: var(--text-label); letter-spacing: var(--tracking-uppercase-tight);
    color: var(--text-secondary); text-transform: uppercase;
}
.bp-meal-row__content { flex: 1; min-width: 0; }
.bp-meal-row__name {
    font-size: var(--text-body); font-weight: var(--weight-medium);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bp-meal-row__meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.bp-meal-row__macros {
    font-size: var(--text-micro); color: var(--text-secondary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bp-meal-row--empty .bp-meal-row__time { color: var(--text-tertiary); }
.bp-meal-row--empty .bp-meal-row__name { color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }

/* ── QuickAddBar ─────────────────────────────────────────────── */
/* Three equal call-to-action tiles. Previously the Scanner tile was an
   inverse "primary" — that broke the symmetry without adding clarity (all
   three actions are equally common entry points into Mahlzeit-Hinzufügen).
   Equal styling makes the bar read like a coherent toolbar instead of a
   primary + two add-ons. */
.bp-quick-add-bar {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-2); margin-top: var(--space-4);
}
.bp-quick-add-btn {
    background: var(--surface-2); color: var(--text-primary);
    padding: 16px 8px; border-radius: var(--radius-md);
    font-size: 12px; font-weight: var(--weight-medium);
    min-height: 56px;                 /* clear iOS-HIG touch target */
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    transition: background var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}
.bp-quick-add-btn:hover { background: var(--surface-3); }
.bp-quick-add-btn:active { transform: scale(0.97); }
/* Legacy primary variant kept for callers that still set it; renders
   identical to the default tiles now. */
.bp-quick-add-btn--primary {
    background: var(--surface-2); color: var(--text-primary);
}

/* ── FoodSearchResult ────────────────────────────────────────── */
.bp-food-search-result {
    background: var(--surface-1); border-radius: var(--radius-md); padding: 14px 16px;
    display: flex; gap: 14px; align-items: center; margin-bottom: var(--space-2);
}
.bp-food-search-result__image {
    width: 44px; height: 44px; border-radius: var(--radius-sm);
    background: var(--surface-2); flex-shrink: 0; object-fit: cover;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-tertiary);
}
.bp-food-search-result__image::before {
    content: "";
    width: 18px; height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20a8 8 0 1 0-8-8'/><path d='M12 4v4'/><path d='M16 6l-2 2'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20a8 8 0 1 0-8-8'/><path d='M12 4v4'/><path d='M16 6l-2 2'/></svg>") no-repeat center / contain;
}
.bp-food-search-result__content { flex: 1; min-width: 0; }
.bp-food-search-result__name {
    font-size: var(--text-medium); font-weight: var(--weight-medium);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center; gap: 6px;
}
.bp-food-search-result__fav {
    color: var(--streak);
    display: inline-flex;
    flex-shrink: 0;
}
.bp-food-search-result__brand {
    font-size: var(--text-small); color: var(--text-secondary);
    display: flex; align-items: center; gap: 6px; margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bp-food-search-result__right { text-align: right; flex-shrink: 0; }
.bp-food-search-result__kcal {
    font-size: var(--text-medium); font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
}
.bp-food-search-result__kcal-unit { font-size: var(--text-micro); color: var(--text-secondary); font-weight: var(--weight-regular); margin-left: 2px; }
.bp-food-search-result__macros { font-size: var(--text-micro); color: var(--text-secondary);
                                 font-variant-numeric: tabular-nums; margin-top: 2px; }
.bp-source-badge {
    display: inline-block; font-size: var(--text-label);
    border-radius: var(--radius-pill); padding: 2px 8px;
    letter-spacing: var(--tracking-uppercase-tight); text-transform: uppercase;
    font-weight: var(--weight-medium);
}
.bp-source-badge--openfoodfacts { background: #00BFA533; color: #00BFA5; }
.bp-source-badge--usda          { background: #4A90E233; color: #4A90E2; }
.bp-source-badge--edamam        { background: #FF6B3533; color: #FF6B35; }
.bp-source-badge--fatsecret     { background: #FFD60A33; color: #FFD60A; }
.bp-source-badge--user          { background: #A8FF3533; color: #A8FF35; }
.bp-source-badge--recipe        { background: #FF8A3533; color: #FF8A35; }

/* ── GoalWizard ───────────────────────────────────────────────── */
.bp-goal-wizard { background: var(--surface-1); border-radius: var(--radius-xl); padding: 28px; }
.bp-goal-wizard__progress { display: flex; gap: 8px; margin-bottom: var(--space-5); }
.bp-goal-wizard__dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3);
    transition: background var(--duration-fast) var(--ease-out);
}
.bp-goal-wizard__dot--active { background: var(--kcal); }
.bp-goal-wizard__title { font-size: var(--text-large); font-weight: var(--weight-medium); margin-bottom: 8px; }
.bp-goal-wizard__hint { color: var(--text-secondary); margin-bottom: var(--space-6); }
.bp-goal-wizard__actions {
    display: flex; justify-content: space-between; margin-top: var(--space-6); gap: var(--space-3);
}

/* ── Form elements ───────────────────────────────────────────── */
/* Minimum font-size 16 px so iOS Safari doesn't zoom the viewport when
   an input is focused — anything below 16 px triggers automatic zoom
   that is hard to recover from on a PWA in standalone mode. */
.bp-input {
    width: 100%; padding: 12px 16px;
    background: var(--surface-2); color: var(--text-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-medium);              /* 16 px */
    min-height: 44px;                           /* iOS-HIG */
    -moz-appearance: textfield;
}
.bp-input::placeholder { color: var(--text-tertiary); }
.bp-input[type="number"]::-webkit-outer-spin-button,
.bp-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Time/date pickers on iOS Safari render the value text in system-grey
   against our dark surfaces — almost invisible. We have to:
   1. Disable the native UA rendering (-webkit-appearance: none) so it
      stops painting its own pill background and overriding the text
      colour with the `field` keyword.
   2. Style each sub-pseudo-element individually — colouring just
      ::-webkit-datetime-edit is NOT enough on iOS; the hour/minute
      fields are separate pseudo-elements with their own UA color. */
.bp-input[type="time"],
.bp-input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    color: var(--text-primary);
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
}
.bp-input--time {
    width: 140px;
    max-width: 140px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
/* WebKit/iOS — every sub-pseudo of the time/date editor must be
   re-coloured, otherwise individual fields render in the UA grey. */
.bp-input::-webkit-date-and-time-value,
.bp-input::-webkit-datetime-edit,
.bp-input::-webkit-datetime-edit-fields-wrapper,
.bp-input::-webkit-datetime-edit-text,
.bp-input::-webkit-datetime-edit-hour-field,
.bp-input::-webkit-datetime-edit-minute-field,
.bp-input::-webkit-datetime-edit-second-field,
.bp-input::-webkit-datetime-edit-ampm-field,
.bp-input::-webkit-datetime-edit-day-field,
.bp-input::-webkit-datetime-edit-month-field,
.bp-input::-webkit-datetime-edit-year-field {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
/* Selected field highlight (when the user taps it) — make it readable
   against our dark surfaces. */
.bp-input::-webkit-datetime-edit-hour-field:focus,
.bp-input::-webkit-datetime-edit-minute-field:focus,
.bp-input::-webkit-datetime-edit-ampm-field:focus {
    background-color: var(--kcal);
    color: var(--text-inverse);
    outline: none;
}
.bp-input::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
    opacity: 0.7;
}
:root[data-theme="light"] .bp-input::-webkit-calendar-picker-indicator {
    filter: none;
}

/* Layout for the reminder-time list on the Notifications card */
.bp-notif-times {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bp-notif-times__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
}
.bp-notif-times__row .label {
    flex-shrink: 0;
    margin: 0;
}

.bp-select {
    width: 100%; padding: 12px 16px;
    background: var(--surface-2); color: var(--text-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-medium);
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236b6b6b' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.bp-form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.bp-form-row__label {
    font-size: var(--text-label); letter-spacing: var(--tracking-uppercase);
    color: var(--text-secondary); text-transform: uppercase; font-weight: var(--weight-medium);
}

.bp-button-primary {
    background: var(--text-primary); color: var(--text-inverse);
    padding: 14px 24px; border-radius: var(--radius-md);
    font-size: var(--text-medium); font-weight: var(--weight-medium);
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.bp-button-primary:hover { opacity: 0.88; }
.bp-button-primary:active { transform: scale(0.97); }
.bp-button-primary--block { display: flex; width: 100%; }

.bp-button-secondary {
    background: var(--surface-2); color: var(--text-primary);
    padding: 14px 24px; border-radius: var(--radius-md);
    font-size: var(--text-medium); font-weight: var(--weight-medium);
    transition: background var(--duration-fast) var(--ease-out);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.bp-button-secondary:hover { background: var(--surface-3); }

.bp-button-ghost {
    color: var(--text-secondary); padding: 14px 8px;
    font-size: var(--text-medium); font-weight: var(--weight-medium);
}

/* ── WeeklyHeatmap ───────────────────────────────────────────── */
.bp-weekly-heatmap { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bp-weekly-heatmap__cell {
    aspect-ratio: 1; border-radius: var(--radius-xs); background: var(--surface-2);
}
.bp-weekly-heatmap__cell--low      { background: rgba(255, 55, 95, 0.3); }
.bp-weekly-heatmap__cell--mid      { background: rgba(255, 55, 95, 0.6); }
.bp-weekly-heatmap__cell--in-range { background: var(--carbs); }
.bp-weekly-heatmap__cell--over     { background: rgba(255, 214, 10, 0.6); }

/* ── NotificationToast ───────────────────────────────────────── */
.bp-toast-host {
    position: fixed; inset: auto 16px calc(env(safe-area-inset-bottom) + 16px) 16px;
    display: flex; flex-direction: column; gap: 8px; z-index: var(--z-toast);
    pointer-events: none;
}
.bp-toast {
    background: var(--surface-1); border-radius: var(--radius-md);
    padding: 14px 16px; display: flex; gap: 12px; align-items: center;
    color: var(--text-primary); font-size: var(--text-body);
    animation: bp-toast-in var(--duration-base) var(--ease-out);
    pointer-events: auto;
}
.bp-toast--success { color: var(--success); }
.bp-toast--error   { color: var(--danger); }
.bp-toast--info    { color: var(--info); }
@keyframes bp-toast-in {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ── Tabler-Icon helper class ─────────────────────────────────── */
.ti {
    font-family: 'tabler-icons';
    font-style: normal; font-weight: var(--weight-regular);
    line-height: 1;
}

/* ── Page transition helpers ─────────────────────────────────── */
.bp-fade-in {
    animation: bp-fade var(--duration-fast) var(--ease-out);
}
@keyframes bp-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* =============================================================================
   Additions (Iteration 1+2)
   ========================================================================= */

/* ── Bilanz-Box im Hero (Aufnahme − Workout) ─────────────────── */
.bp-bilanz {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--surface-2);
    border-radius: var(--radius-md);
    display: grid;
    gap: 6px;
    text-align: left;          /* never inherit Hero's centred text on mobile */
}
.bp-bilanz__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-small);
}
.bp-bilanz__row .label { flex-shrink: 1; min-width: 0; }
.bp-bilanz__num {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Water Buttons (Today MiniStat) ─────────────────────────── */
.bp-water-buttons {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}
.bp-water-btn {
    flex: 1;
    background: var(--surface-2);
    color: var(--text-primary);
    padding: 8px 6px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
    transition: background var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}
.bp-water-btn:hover { background: var(--surface-3); }
.bp-water-btn:active { transform: scale(0.97); }

/* ── Placeholder MiniStat (Whoop verbunden, aber noch keine Daten) ── */
.bp-mini-stat-card--placeholder {
    background: transparent;
    border: 1px dashed var(--divider-strong);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.bp-mini-stat-card--placeholder .bp-mini-stat-card__head { color: var(--text-tertiary); }
.bp-mini-stat-card--placeholder .bp-mini-stat-card__label { color: var(--text-tertiary); }
.bp-mini-stat-card--placeholder .bp-mini-stat-card__footer { color: var(--text-tertiary); }

/* ── Connect-CTA MiniStat (Whoop noch nicht verbunden) ──────
   A tappable card-as-link that invites the user to set up Whoop, instead
   of just rendering grey "nicht verbunden" text. Same dimensions as a
   value card so the 2×2 grid stays geometrically consistent. */
.bp-mini-stat-card--connect {
    background: var(--surface-1);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
    text-decoration: none;
}
.bp-mini-stat-card--connect:hover { background: var(--surface-2); }
.bp-mini-stat-card--connect:active { transform: scale(0.98); }
.bp-mini-stat-card__cta {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surface-2);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    align-self: flex-start;
    transition: background var(--duration-fast) var(--ease-out);
}
.bp-mini-stat-card--connect:hover .bp-mini-stat-card__cta { background: var(--surface-3); }

/* ── MealRow als Link nutzbar ────────────────────────────────── */
a.bp-meal-row,
a.bp-meal-row:hover,
a.bp-meal-row:visited {
    color: inherit;
    text-decoration: none;
}

/* ── Stats-Section (Stats-Page) ──────────────────────────────── */
.bp-stats-section {
    margin-top: 24px;
    padding: 24px;
    background: var(--surface-1);
    border-radius: var(--radius-xl);
}
.bp-stats-section .bp-section-header { margin-bottom: 18px; }

.bp-weekly-heatmap-labels {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-top: 10px;
    text-align: center;
    font-size: 10px;
    line-height: 1.4;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* On desktop the heatmap is wider */
@media (min-width: 1024px) {
    .bp-weekly-heatmap { max-width: 720px; }
    .bp-weekly-heatmap-labels { max-width: 720px; }
}

/* ── Top-Foods List (Stats-Page) ─────────────────────────────── */
.bp-top-foods { display: flex; flex-direction: column; }
.bp-top-food-row {
    display: grid;
    grid-template-columns: 44px 1fr max-content;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--divider-subtle);
}
.bp-top-food-row:last-child { border-bottom: 0; }
.bp-top-food-row__rank {
    font-size: var(--text-label);
    letter-spacing: var(--tracking-uppercase-tight);
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: var(--weight-medium);
}
.bp-top-food-row__name {
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bp-top-food-row__kcal {
    color: var(--text-secondary);
    font-size: var(--text-small);
}

/* ── Admin Settings Group ──────────────────────────────────── */
.bp-setting-group__hint {
    color: var(--text-secondary);
    font-size: var(--text-small);
    margin: 4px 0 18px;
    line-height: 1.55;
}
.bp-setting-group__rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bp-setting-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px;
    align-items: center;
}
.bp-setting-row__label {
    font-size: var(--text-label);
    letter-spacing: var(--tracking-uppercase-tight);
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: var(--weight-medium);
}
.bp-setting-row__field {
    display: flex;
    gap: 8px;
}
.bp-setting-row__input {
    flex: 1;
    padding: 12px 14px;
    font-size: var(--text-medium);   /* 16 px — avoid iOS auto-zoom on focus */
    min-height: 44px;
}
.bp-setting-row__save {
    padding: 10px 16px;
    font-size: 12px;
}

@media (max-width: 640px) {
    .bp-setting-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* ── Whoop / OAuth Setup-Wizard ──────────────────────────────── */
.bp-wizard {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.bp-wizard__step {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 16px;
    align-items: flex-start;
}
.bp-wizard__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-primary);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
}
.bp-wizard__num--done {
    background: var(--success);
    color: var(--text-inverse);
}
.bp-wizard__step--done .bp-wizard__title { color: var(--success); }
.bp-wizard__body { min-width: 0; }
.bp-wizard__title {
    font-size: var(--text-medium);
    font-weight: var(--weight-medium);
    margin-bottom: 6px;
}
.bp-wizard__hint {
    color: var(--text-secondary);
    font-size: var(--text-small);
    line-height: 1.55;
    margin: 0 0 12px;
}
.bp-wizard__body .bp-button-secondary,
.bp-wizard__body .bp-button-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 13px;
}

/* Copy-Row (Redirect-URL anzeigen + kopieren) */
.bp-copy-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    border-radius: var(--radius-md);
    padding: 8px 8px 8px 14px;
}
.bp-copy-row__code {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-primary);
    overflow-x: auto;
    white-space: nowrap;
    user-select: all;
}
.bp-copy-row__btn {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 12px;
}

/* ── Disabled / locked setting inputs ───────────────────────── */
.bp-setting-row__input:disabled {
    cursor: not-allowed;
    color: var(--text-tertiary);
}
.bp-setting-row__input:disabled::placeholder {
    color: var(--text-secondary);
}
.bp-setting-row__reveal {
    padding: 10px 14px;
    font-size: 12px;
    white-space: nowrap;
}

/* ── Bilanz: Total-Zeile + Hint ──────────────────────────────── */
.bp-bilanz__row--total {
    border-top: 1px solid var(--divider-strong);
    padding-top: 8px;
    margin-top: 4px;
}
.bp-bilanz__row--total .label {
    color: var(--text-primary);
}
.bp-bilanz__hint {
    margin-top: 8px;
    font-size: var(--text-label);
    letter-spacing: var(--tracking-uppercase-tight);
    text-transform: uppercase;
    color: var(--text-tertiary);
}

/* ── Goal-Option Radio Cards ─────────────────────────────────── */
.bp-goal-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface-2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
}
.bp-goal-option:hover { background: var(--surface-3); }
.bp-goal-option:has(input:checked) {
    background: var(--surface-3);
    box-shadow: inset 3px 0 0 var(--kcal);
}
.bp-goal-option input[type="radio"] {
    margin-top: 4px;
    flex-shrink: 0;
    accent-color: var(--kcal);
}

/* ─────────────────────────────────────────────────────────────────────────
   Food Add / Search Layout
   ───────────────────────────────────────────────────────────────────────── */

/* =============================================================================
   Hinzufügen-Seite  (Mahlzeit-Add)
   ========================================================================= */

.bp-add-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Search Bar ──────────────────────────────────────────────── */
.bp-add-search {
    display: flex;
    align-items: center;
    background: var(--surface-1);
    border: 1px solid var(--divider-subtle);
    border-radius: var(--radius-pill);
    padding: 4px 6px 4px 18px;
    transition: border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}
.bp-add-search:focus-within {
    border-color: var(--divider-strong);
    background: var(--surface-2);
}
.bp-add-search__icon { color: var(--text-secondary); flex-shrink: 0; }
.bp-add-search__input {
    flex: 1;
    padding: 14px 12px;
    background: transparent;
    color: var(--text-primary);
    font-size: var(--text-medium);
    border: 0;
    outline: 0;
    min-width: 0;
}
.bp-add-search__input:focus-visible { box-shadow: none; }
.bp-add-search__input::placeholder { color: var(--text-tertiary); }
.bp-add-search__scan {
    width: 40px; height: 40px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.bp-add-search__scan:hover { background: var(--surface-3); color: var(--kcal); }

/* ── Section Lead (label + count) ────────────────────────────── */
.bp-add-section-lead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 8px 4px 6px;
}
.bp-add-section-lead__hint {
    font-size: var(--text-micro);
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

/* ── Library-Tabs (Favoriten / Zuletzt) ──────────────────────── */
.bp-library-tabs {
    display: flex;
    gap: 4px;
    background: var(--surface-1);
    padding: 4px;
    border-radius: var(--radius-pill);
    margin: 12px 0 10px;
}
.bp-library-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.bp-library-tab:hover { color: var(--text-primary); }
.bp-library-tab--active {
    background: var(--surface-2);
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.bp-library-tab__count {
    font-size: var(--text-micro);
    color: var(--text-tertiary);
    background: var(--surface-2);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-variant-numeric: tabular-nums;
    min-width: 22px;
    text-align: center;
}
.bp-library-tab--active .bp-library-tab__count {
    background: var(--surface-3);
    color: var(--text-secondary);
}
.bp-library-empty {
    padding: 28px 18px;
    text-align: center;
    background: var(--surface-1);
    border: 1px solid var(--divider-subtle);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
}

/* ── Quick-Suggestion Pills (Empty State Trefferliste) ────────── */
.bp-add-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.bp-add-suggest__pill {
    padding: 8px 14px;
    background: var(--surface-1);
    border: 1px solid var(--divider-subtle);
    color: var(--text-primary);
    border-radius: var(--radius-pill);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}
.bp-add-suggest__pill:hover {
    background: var(--surface-2);
    border-color: var(--divider-strong);
}

/* ── Result Card (Trefferliste) ─────────────────────────────── */
.bp-food-search-result {
    width: 100%;
    text-align: left;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}
.bp-food-search-result:hover {
    background: var(--surface-2);
    border-color: var(--divider-subtle);
}
.bp-food-search-result:active { transform: scale(0.995); }
.bp-food-search-result--active {
    background: var(--surface-2);
    border-color: var(--kcal);
    box-shadow: 0 0 0 1px var(--kcal-dim);
}

/* ── Empty State (Detail-Panel) ───────────────────────────────── */
.bp-add-empty {
    background: var(--surface-1);
    border: 1px solid var(--divider-subtle);
    border-radius: var(--radius-xl);
    padding: 36px 24px;
    text-align: center;
    color: var(--text-secondary);
}
.bp-add-empty__icon {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
}
.bp-add-empty__title {
    font-size: var(--text-medium);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    margin-bottom: 4px;
}
.bp-add-empty__hint { font-size: var(--text-small); line-height: 1.55; }
.bp-add-empty__divider {
    display: flex; align-items: center; gap: 10px;
    color: var(--text-tertiary);
    font-size: var(--text-micro);
    letter-spacing: var(--tracking-uppercase);
    text-transform: uppercase;
    margin: 22px 0 14px;
}
.bp-add-empty__divider::before,
.bp-add-empty__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--divider-subtle);
}

/* ── Detail Panel ─────────────────────────────────────────────── */
.bp-add-detail {
    background: var(--surface-1);
    border: 1px solid var(--divider-subtle);
    border-radius: var(--radius-xl);
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Header: Name + Brand/Source + Favorite */
.bp-add-detail__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.bp-add-detail__name {
    font-size: 22px;
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: 1.25;
}
.bp-add-detail__brand {
    color: var(--text-secondary);
    font-size: var(--text-small);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.bp-add-detail__brand-meta {
    font-size: var(--text-label);
    letter-spacing: var(--tracking-uppercase-tight);
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: var(--weight-medium);
}

.bp-icon-btn {
    width: 38px; height: 38px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
}
.bp-icon-btn:hover { background: var(--surface-3); color: var(--text-primary); }
.bp-icon-btn--active { color: var(--streak); }
.bp-icon-btn--active svg { fill: currentColor; }

/* Hero: Live kcal-Wert für die aktuelle Menge */
.bp-add-hero {
    padding: 18px 18px 16px;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(53, 200, 255, 0.07), transparent 60%),
        var(--surface-2);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.bp-add-hero__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.bp-add-hero__kcal {
    font-size: 38px;
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.bp-add-hero__kcal-unit {
    font-size: var(--text-medium);
    color: var(--text-secondary);
    font-weight: var(--weight-regular);
    margin-left: 4px;
}
.bp-add-hero__amount {
    font-size: var(--text-small);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Macro-Bars: 3 schmale Streifen mit Werten daneben */
.bp-add-macros {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.bp-add-macro {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    align-items: center;
    gap: 12px;
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
}
.bp-add-macro__label {
    font-size: var(--text-label);
    letter-spacing: var(--tracking-uppercase-tight);
    text-transform: uppercase;
    font-weight: var(--weight-medium);
}
.bp-add-macro__bar {
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    overflow: hidden;
}
.bp-add-macro__bar-fill {
    height: 100%;
    border-radius: inherit;
    transition: width var(--duration-base) var(--ease-out);
}
.bp-add-macro__val {
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    min-width: 48px;
    text-align: right;
}
.bp-add-macro--protein .bp-add-macro__label,
.bp-add-macro--protein .bp-add-macro__bar-fill { color: var(--protein); background-color: var(--protein); }
.bp-add-macro--carbs   .bp-add-macro__label,
.bp-add-macro--carbs   .bp-add-macro__bar-fill { color: var(--carbs); background-color: var(--carbs); }
.bp-add-macro--fat     .bp-add-macro__label,
.bp-add-macro--fat     .bp-add-macro__bar-fill { color: var(--fat); background-color: var(--fat); }
.bp-add-macro--protein .bp-add-macro__label,
.bp-add-macro--carbs   .bp-add-macro__label,
.bp-add-macro--fat     .bp-add-macro__label { background-color: transparent; }

/* Section labels for the form rows */
.bp-add-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bp-add-section__label {
    font-size: var(--text-label);
    letter-spacing: var(--tracking-uppercase);
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: var(--weight-medium);
}

/* Mengen-Stepper: minus / number / plus */
.bp-add-stepper {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    background: var(--surface-2);
    border-radius: var(--radius-md);
    padding: 4px;
    gap: 4px;
}
.bp-add-stepper__btn {
    width: 100%; height: 44px;
    border-radius: calc(var(--radius-md) - 4px);
    background: transparent;
    color: var(--text-primary);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--duration-fast) var(--ease-out);
}
.bp-add-stepper__btn:hover { background: var(--surface-3); }
.bp-add-stepper__btn:disabled { color: var(--text-tertiary); cursor: not-allowed; }
.bp-add-stepper__value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    padding: 0 8px;
}
.bp-add-stepper__input {
    width: 100%;
    text-align: center;
    background: transparent;
    color: var(--text-primary);
    font-size: 22px;
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
    border: 0;
    outline: 0;
    -moz-appearance: textfield;
    padding: 0;
}
.bp-add-stepper__input:focus-visible { box-shadow: none; }
.bp-add-stepper__input::-webkit-outer-spin-button,
.bp-add-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bp-add-stepper__unit {
    font-size: var(--text-small);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.bp-add-portion-hint {
    font-size: var(--text-micro);
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
    margin-top: -2px;
}

/* Portion-Pills (½ Stück, 1 Stück, 2 Stück, 3 Stück) */
.bp-add-amount-portions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.bp-add-amount-quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.bp-quick-amount {
    background: var(--surface-2);
    color: var(--text-secondary);
    padding: 10px 8px;
    border-radius: var(--radius-md);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}
.bp-quick-amount:hover {
    background: var(--surface-3);
    color: var(--text-primary);
}
.bp-quick-amount--active {
    background: var(--surface-3);
    color: var(--text-primary);
    border-color: var(--divider-strong);
}
.bp-quick-amount--portion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px;
    color: var(--text-primary);
}
.bp-quick-amount__sub {
    font-size: var(--text-micro);
    color: var(--text-tertiary);
    font-weight: var(--weight-regular);
}

/* Mahlzeit-Picker: Pill-Group mit gefülltem aktiv-State */
.bp-meal-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    background: var(--surface-2);
    padding: 4px;
    border-radius: var(--radius-md);
}
.bp-meal-pill {
    background: transparent;
    color: var(--text-secondary);
    padding: 10px 4px;
    border-radius: calc(var(--radius-md) - 4px);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.bp-meal-pill:hover { color: var(--text-primary); }
.bp-meal-pill--active {
    background: var(--surface-0);
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Premium Submit-CTA: zeigt live kcal + Mahlzeit-Kontext */
.bp-add-submit {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--text-primary);
    color: var(--text-inverse);
    border-radius: var(--radius-md);
    font-size: var(--text-medium);
    font-weight: var(--weight-medium);
    text-align: left;
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}
.bp-add-submit:hover { opacity: 0.88; }
.bp-add-submit:active { transform: scale(0.99); }
.bp-add-submit:disabled { background: var(--surface-3); color: var(--text-secondary); cursor: not-allowed; transform: none; }
.bp-add-submit__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.bp-add-submit__lead {
    font-size: var(--text-label);
    letter-spacing: var(--tracking-uppercase-tight);
    text-transform: uppercase;
    color: rgba(10, 10, 10, 0.55);
    font-weight: var(--weight-medium);
}
.bp-add-submit:disabled .bp-add-submit__lead { color: var(--text-tertiary); }
.bp-add-submit__main {
    font-size: var(--text-medium);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bp-add-submit__kcal {
    font-size: var(--text-medium);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
    background: rgba(10, 10, 10, 0.08);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.bp-add-submit:disabled .bp-add-submit__kcal { background: var(--surface-2); color: var(--text-tertiary); }

/* Custom-Food Drawer (inline statt prompt) */
.bp-add-custom {
    background: var(--surface-1);
    border: 1px solid var(--divider-subtle);
    border-radius: var(--radius-xl);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.bp-add-custom__title {
    font-size: var(--text-large);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
}
.bp-add-custom__hint {
    font-size: var(--text-small);
    color: var(--text-secondary);
}
.bp-add-custom__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.bp-add-custom__grid .bp-form-row { margin-bottom: 0; }
.bp-add-custom__grid .bp-form-row--full { grid-column: 1 / -1; }
.bp-add-custom__actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.bp-add-custom__actions > * { flex: 1; }

/* Desktop: 2-Spalten — Search links, Detail rechts sticky */
@media (min-width: 1024px) {
    .bp-add-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 28px;
    }
    .bp-add-search-col { min-width: 0; }
    .bp-add-detail-col { min-width: 0; }
    .bp-add-detail-col > #bp-add-detail-host {
        position: sticky;
        top: 24px;
    }
    .bp-add-detail { padding: 24px 24px 26px; }
    .bp-add-detail__name { font-size: 24px; }
    /* Sheet UI is mobile-only — hide handle + backdrop on desktop. */
    .bp-add-detail__sheet-handle { display: none; }
    .bp-add-sheet-backdrop { display: none; }
}

/* ── Mobile bottom-sheet (<1024px) ───────────────────────────────
   The detail column converts into a fixed bottom-sheet so the user
   never has to scroll past the result list to see kcal/macros and
   the submit button. The sheet opens automatically when a result is
   tapped (or "Eigenes Lebensmittel"); backdrop tap + drag-handle tap
   + Escape close it. Submit success navigates away, which also
   collapses the sheet implicitly. */
@media (max-width: 1023px) {
    .bp-add-detail-col {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-modal);
        max-height: 88vh;
        overflow: hidden;
        background: var(--surface-1);
        border-top-left-radius: var(--radius-xl);
        border-top-right-radius: var(--radius-xl);
        transform: translateY(100%);
        transition: transform var(--duration-base) var(--ease-out);
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .bp-add-detail-col--open { transform: translateY(0); }
    .bp-add-detail-col > #bp-add-detail-host {
        max-height: 88vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Grip-bar at the top — iOS-style affordance + tappable close target */
    .bp-add-detail__sheet-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 10px 0 6px;
        background: transparent;
    }
    .bp-add-detail__sheet-grip {
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--divider-strong);
    }
    .bp-add-detail { padding: 4px 18px 22px; }

    .bp-add-sheet-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: calc(var(--z-modal) - 1);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--duration-base) var(--ease-out);
    }
    .bp-add-sheet-backdrop--open {
        opacity: 1;
        pointer-events: auto;
    }
    /* Stop body scroll behind sheet — applied to <html> via JS so iOS
       respects the lock even with momentum-scroll in flight. */
    html.bp-sheet-open, html.bp-sheet-open body {
        overflow: hidden;
        touch-action: none;
    }
}

/* ── Macro Color Indicators (P/C/F überall) ──────────────────── */
.bp-macro-p, .bp-macro--protein { color: var(--kcal); }
.bp-macro-c, .bp-macro--carbs   { color: var(--carbs); }
.bp-macro-f, .bp-macro--fat     { color: var(--fat); }


/* =============================================================================
   Mahlzeit-Detail-Seite (#/meals/:id)
   ========================================================================= */

.bp-meal-detail {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bp-meal-item {
    background: var(--surface-1);
    border: 1px solid var(--divider-subtle);
    border-radius: var(--radius-md);
    padding: 14px 14px 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}
.bp-meal-item:hover { background: var(--surface-2); }
.bp-meal-item--editing {
    flex-direction: column;
    align-items: stretch;
    border-color: var(--divider-strong);
    background: var(--surface-2);
}
.bp-meal-item__main { flex: 1; min-width: 0; }
.bp-meal-item__name {
    font-size: var(--text-medium);
    font-weight: var(--weight-medium);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bp-meal-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    font-size: var(--text-small);
    color: var(--text-secondary);
}
.bp-meal-item__sep { color: var(--text-tertiary); }
.bp-meal-item__actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.bp-icon-btn--danger:hover { background: rgba(255, 69, 58, 0.15); color: var(--danger); }

.bp-meal-item__editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bp-meal-item__editor-actions {
    display: flex;
    gap: 8px;
}
.bp-meal-item__editor-actions > * { flex: 1; }

/* Footer-Action: gesamte Mahlzeit löschen */
.bp-meal-detail__delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px auto 0;
    padding: 10px 16px;
    color: var(--danger);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    background: transparent;
    border-radius: var(--radius-md);
    transition: background var(--duration-fast) var(--ease-out);
}
.bp-meal-detail__delete:hover { background: rgba(255, 69, 58, 0.1); }

/* ── SW Update-Banner ─────────────────────────────────────────
   Slim, fixed at the bottom (above the iOS home-bar via safe-area
   inset). Always visible while a new SW is waiting — independent
   of which page is mounted. Tappable target stays ≥ 44 px high. */
.bp-sw-update-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    z-index: var(--z-toast);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 12px 18px;
    background: var(--surface-2);
    color: var(--text-primary);
    border-radius: var(--radius-pill);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    font-size: var(--text-body);
    animation: bp-sw-update-banner-in var(--duration-base) var(--ease-out);
}
.bp-sw-update-banner__text {
    font-weight: var(--weight-medium);
}
.bp-sw-update-banner__btn {
    flex-shrink: 0;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    background: var(--text-primary);
    color: var(--text-inverse);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    min-height: 36px;
    transition: opacity var(--duration-fast) var(--ease-out);
}
.bp-sw-update-banner__btn:hover { opacity: 0.85; }
.bp-sw-update-banner__btn:disabled { opacity: 0.6; cursor: default; }

@keyframes bp-sw-update-banner-in {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ── Tabs (used on the Account-Page) ──────────────────────────
   Horizontal pill-bar at the top of a page. The bar scrolls
   horizontally on narrow screens so it never wraps awkwardly.
   Active state inverts to make selection obvious at a glance. */
.bp-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 2px;
}
.bp-tabs::-webkit-scrollbar { display: none; }

.bp-tab {
    flex-shrink: 0;
    padding: 10px 18px;
    min-height: 40px;
    border-radius: var(--radius-pill);
    background: var(--surface-1);
    color: var(--text-secondary);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}
.bp-tab:hover  { background: var(--surface-2); color: var(--text-primary); }
.bp-tab:active { transform: scale(0.96); }
.bp-tab--active {
    background: var(--text-primary);
    color: var(--text-inverse);
}
.bp-tab--active:hover { background: var(--text-primary); opacity: 0.9; }

.bp-tab-panel { display: none; }
.bp-tab-panel--active { display: block; }