/* =====================================================================
   Chew - style.mobile.css  (ADDITIVES Mobile-First-Stylesheet)
   ---------------------------------------------------------------------
   Wird NACH style.css geladen und behebt gezielt Mobile-/Small-Screen-
   Probleme per Media-Queries und spezifischeren Regeln. KEIN Re-Write -
   nur Korrekturen oben drauf. Nutzt die bestehenden CSS-Variablen.

   CSP-konform: nur System-Schriften, CSS-Gradients/Formen, kein url()
   auf Fremdquellen, kein Inline-CSS/JS, keine Emojis.

   EINBINDEN (in index.html, direkt NACH der bestehenden style.css):
       <link rel="stylesheet" href="/static/style.mobile.css" />
   Wird die Datei nicht unter /static ausgeliefert, den Pfad an die
   Auslieferung des Backends anpassen.

   OPTIONALE HTML-HINWEISE (nicht zwingend, rein additiv loesbar):
   - Das Wasser-Layout funktioniert ohne HTML-Aenderung. Die Werte-Zelle
     ".water-log .wl .v" enthaelt "<menge> ml" als EIN Span mit Leerzeichen.
     Wir verhindern den Umbruch hier rein per CSS (white-space: nowrap +
     non-breaking via Layout). Eine HTML-Saeuberung ist NICHT noetig.
   - Falls spaeter gewuenscht: ".v" koennte die Einheit in ein eigenes
     <small class="u">ml</small> packen - dann greift die u.a. Regel fuer
     ".water-log .wl .v .u" automatisch. Aktuell nicht erforderlich.
   ===================================================================== */

/* ===================================================================
   0. GLOBAL: kein horizontales Scrollen / Overflow auf Mobil
   =================================================================== */
html, body { max-width: 100%; overflow-x: hidden; }

/* Sicherheitsnetz: niemand soll die Viewport-Breite sprengen. */
@media (max-width: 560px) {
  img, svg, video, canvas, table { max-width: 100%; }
}

/* ===================================================================
   1. WASSER-LAYOUT  (Kernproblem)
   ---------------------------------------------------------------------
   Ab Tablet/Desktop bleibt das nebeneinander (Liste links, Ring rechts).
   Auf schmalen Phones wird umgestapelt: Ring OBEN, Liste DARUNTER -
   volle Breite, nichts quetscht sich, keine zweizeiligen Werte mehr.
   =================================================================== */

/* Werte NIE umbrechen lassen ("200 ml" bleibt einzeilig) - auf allen
   Breiten, damit auch im Nebeneinander-Modus nichts bricht. */
.water-log .wl .v {
  white-space: nowrap;
  flex: 0 0 auto;
}
/* Zeit nicht stauchen, Werte bekommen Vorrang vor dem Loeschen-X. */
.water-log .wl .t {
  white-space: nowrap;
  flex: 0 0 auto;
}
/* Zeile darf nicht horizontal scrollen: Inhalt sauber verteilen. */
.water-log .wl {
  flex-wrap: nowrap;
  gap: var(--s-3);
  overflow: hidden;
}
/* Optional (falls Einheit spaeter als eigenes Element kommt). */
.water-log .wl .v .u {
  color: var(--faint);
  font-weight: 400;
  margin-left: 2px;
}

/* --- Umstapeln auf schmalen Phones --- */
@media (max-width: 560px) {
  .water-main {
    flex-direction: column-reverse;   /* Ring oben, Liste darunter */
    align-items: stretch;
    gap: var(--s-4);
  }
  /* Ring zentriert ueber der Liste, etwas kompakter. */
  .water-main .rings.water {
    --ring: 116px;
    align-self: center;
    margin-bottom: 0;
  }
  /* Liste nimmt die volle Kartenbreite, mehr Luft je Zeile. */
  .water-main .water-log {
    width: 100%;
    flex: none;
    max-height: 168px;
    border-top: 1px solid var(--line-soft);
    padding-top: var(--s-1);
  }
  .water-log .wl {
    padding: 11px 0;          /* groessere Tap-/Lesehoehe */
    font-size: 14px;
  }
  /* Loeschen-X: vollwertiges Tap-Ziel statt schmalem Glyph. */
  .water-log .wl .x {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    font-size: 18px;
    margin-left: var(--s-1);
  }
  /* Die Werte-Zelle soll den verfuegbaren Platz fuellen und rechtsbuendig
     direkt vor dem X sitzen; Zeit bleibt ganz links. */
  .water-log .wl .v {
    margin-left: auto;
    text-align: right;
  }
}

/* Sehr schmale Geraete (<=360px): Ring weiter verkleinern. */
@media (max-width: 360px) {
  .water-main .rings.water { --ring: 104px; }
  .water-log .wl { font-size: 13.5px; }
}

/* ===================================================================
   2. SEITLICHE TABS  (vtabs)  - kompakter auf kleinen Screens
   =================================================================== */
@media (max-width: 560px) {
  .panel { padding: var(--s-3); gap: var(--s-3); }
  .vtabs { flex: 0 0 88px; }
  .vtab {
    padding: 11px 10px;
    font-size: 12.5px;
    min-height: 44px;          /* Tap-Flaeche */
    display: flex; align-items: center;
  }
  /* vpanels nicht vertikal zentrieren - Inhalt oben ausrichten,
     sonst "springt" der Wasser-Block beim Umstapeln. */
  .vpanels { align-items: stretch; }
}

/* Sehr schmale Geraete: Tabs noch etwas schmaler, ohne zu brechen. */
@media (max-width: 360px) {
  .vtabs { flex-basis: 80px; }
  .vtab { font-size: 12px; padding: 10px 8px; }
  .panel { padding: var(--s-2); gap: var(--s-2); }
}

/* ===================================================================
   3. WASSER-EINGABE  (water-custom)  - Tap & iOS-Zoom
   =================================================================== */
@media (max-width: 560px) {
  .water-custom { margin-top: var(--s-3); gap: var(--s-2); }
  /* >=16px Schrift: verhindert iOS-Auto-Zoom beim Fokus. */
  .water-custom input { font-size: 16px; min-height: 46px; }
  .water-custom .btn { min-height: 46px; white-space: nowrap; }
}

/* ===================================================================
   4. RINGE / MIKRONAEHRSTOFFE  - auf Mini-Screens nicht zu eng
   =================================================================== */
@media (max-width: 360px) {
  /* Mineralstoffe/Vitamine: kleineres Raster, damit 2-3 Spalten passen
     statt mit Scroll/Quetschung. */
  .rings.compact {
    grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
    gap: var(--s-3) var(--s-1);
  }
  /* Grosser Kalorien-Hero-Ring etwas kleiner, damit die Prozentzahl
     nicht den Ring sprengt. */
  .rings.macros .cell:first-child { --ring: 124px; --pct: 27px; }
}

/* ===================================================================
   5. ALLGEMEINE MOBILE-POLITUR
   =================================================================== */
@media (max-width: 560px) {
  /* Karten: etwas weniger Innenabstand, mehr nutzbare Breite. */
  .card { padding: var(--s-4); border-radius: var(--r-md); }

  /* Eingabefelder durchgaengig >=16px (kein iOS-Zoom) + bequeme Hoehe. */
  form input[type="email"],
  form input[type="password"],
  form input[type="text"],
  form input[type="number"],
  form select,
  .search-row input[type="text"],
  .search-row input[type="number"],
  .searchbar input,
  .weight-input {
    font-size: 16px;
    min-height: 46px;
  }

  /* Loesch-/Icon-Buttons als verlaessliche Tap-Ziele. */
  .meal-del { width: 36px; height: 36px; }

  /* Wochenstreifen: nicht zu gedraengt, aber tap-bar. */
  .weeknav-btn { min-width: 44px; min-height: 44px; }

  /* Markenzeile: Datum darf umbrechen statt zu ueberlaufen. */
  .brandrow { row-gap: var(--s-1); }
  .brand-date { font-size: 13px; }
}

/* Mittlere Phones / kleine Tablets (561-720px): das Wasser-Nebeneinander
   bleibt, aber mit etwas mehr Luft und ohne Werte-Umbruch (oben global). */
@media (min-width: 561px) and (max-width: 720px) {
  .water-main .rings.water { --ring: 104px; }
}