/*
 * Farben an Bring! angelehnt (aus deren eigenen CSS-Variablen):
 *   Teal/Grün #338a7e     Gelb #fcbc47 / #fee4a3
 *   Anthrazit #303f47 / #192733 / #324047
 *   Grau      #f0f3f3 #e1e7e8 #afc2c7 #728790     Rot #d94e57
 *
 * Die Farben tragen hier eine Bedeutung, sie sind keine Deko:
 *   grün  = Aktion, Auswahl, erledigt  (--brand)
 *   gelb  = offene Nachfrage, Hinweis  (--attention)
 *   rot   = löschen, überspringen      (--danger)
 *
 * Deshalb ist Grün die Hauptfarbe und Gelb bleibt den offenen „oder“-Fragen
 * vorbehalten. Hell: dunkelgrüne Fläche mit weißem Text. Dunkel: hellgrüne
 * Fläche mit dunklem Text – beides über 4,5:1 geprüft.
 *
 * Aufbau: mobile first. Größere Bildschirme bekommen unten Ergänzungen.
 */

:root {
  --bg: #f0f3f3;
  --surface: #ffffff;
  --surface-2: #f7f9f9;
  --border: #e1e7e8;
  --border-strong: #afc2c7;

  --text: #303f47;
  --text-strong: #192733;
  --muted: #5b717b;

  --brand: #2b766c;
  --brand-strong: #215d55;
  --brand-soft: #e0eeeb;
  --brand-ink: #21645a;
  --on-brand: #ffffff;

  --attention: #fcbc47;
  --attention-soft: #fff4dc;
  --attention-ink: #905b14;

  --danger: #b23a42;
  --danger-soft: #fdecec;

  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(25, 39, 51, .06), 0 10px 24px rgba(25, 39, 51, .05);

  --tap: 48px; /* Mindestgröße für Tippziele */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141e26;
    --surface: #1d2a33;
    --surface-2: #24333d;
    --border: #33454f;
    --border-strong: #4a5f6a;

    --text: #e8eef0;
    --text-strong: #f7fafa;
    --muted: #a3b4bc;

    --brand: #6cbdb0;
    --brand-strong: #8ad0c4;
    --brand-soft: #1f3a37;
    --brand-ink: #7ec9bd;
    --on-brand: #0d2b27;

    --attention: #fcbc47;
    --attention-soft: #3a3122;
    --attention-ink: #f0b95a;

    --danger: #e98a90;
    --danger-soft: #3a2427;

    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 24px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }

/* Muss vor allen display-Regeln stehen und !important sein: Autoren-CSS wie
   .btn { display: inline-flex } schlägt sonst die Browser-Regel
   [hidden] { display: none }, und ausgeblendete Buttons bleiben sichtbar. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 1rem calc(2rem + env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--text);
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

/* minmax(0, 1fr) statt 1fr: sonst ist das Minimum der Spalte min-content und
   die Eingabefelder schieben die ganze Seite breiter als den Bildschirm. */
main { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; }

.topbar { max-width: 720px; margin: 0 auto; padding: 1.5rem 0 1rem; }
.topbar h1 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-strong);
}
.topbar p { margin: .25rem 0 0; color: var(--muted); font-size: .95rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
}

.card h2 {
  margin: 0 0 .2rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.muted { color: var(--muted); font-size: .9rem; }
/* Grundfarbe für Textlinks. Buttons in Linkform behalten über .btn ihre eigene. */
a { color: var(--brand-ink); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }

.banner {
  border-radius: var(--radius-sm);
  padding: .8rem .9rem;
  font-size: .9rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.banner-warn { border-color: var(--attention); background: var(--attention-soft); }

/* ---------- Upload ---------- */

.dropzone {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 1rem;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
  touch-action: manipulation;
}
.dropzone:active, .dropzone.is-over { border-color: var(--brand); background: var(--brand-soft); }
.dropzone-inner p { margin: .3rem 0 0; }
.dropzone-inner p strong { color: var(--text-strong); }
.dropzone img { max-height: 200px; max-width: 100%; border-radius: var(--radius-sm); }
.icon-lg { width: 38px; height: 38px; color: var(--muted); }

.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .85rem; }
.row-tight { margin-top: .6rem; }

/* Galerie, Kamera und Analysieren bleiben immer in einer Zeile – auch bei 320px.
   Kein Umbruch, engere Innenabstände, und der Hauptknopf nimmt den Rest. */
.row-upload { flex-wrap: nowrap; gap: .4rem; }
.row-upload .btn {
  flex: 0 1 auto;
  min-width: 0;
  padding: .7rem .7rem;
  font-size: .95rem;
  white-space: nowrap;
}
.row-upload .btn-primary { flex: 1 1 auto; }

@media (max-width: 360px) {
  .row-upload { gap: .3rem; }
  .row-upload .btn { padding: .7rem .5rem; font-size: .875rem; }
}

.btn {
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  min-height: var(--tap);
  padding: .7rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-decoration: none;
  touch-action: manipulation;
  transition: background .15s, border-color .15s, opacity .15s, transform .08s;
}
.btn:active:not(:disabled) { transform: scale(.98); }
/* Kein opacity: gelb mit halber Deckkraft ist kaum noch lesbar. Stattdessen
   ein eigener, kontrastgeprüfter Ruhezustand. */
.btn:disabled {
  cursor: not-allowed;
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--muted);
}
.btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
.btn-primary:active:not(:disabled) { background: var(--brand-strong); }

.btn-ghost { background: var(--surface); color: var(--text); }
.btn-ghost:active:not(:disabled) { background: var(--surface-2); }

.btn-mini { min-height: 40px; padding: .45rem .9rem; font-size: .9rem; }
.btn-mini-danger { color: var(--danger); border-color: var(--border-strong); }

.btn-big {
  width: 100%;
  min-height: 56px;
  padding: 1rem 1.25rem;
  font-size: 1.08rem;
  font-weight: 700;
}
.icon-share { width: 20px; height: 20px; flex: none; }

/* currentColor: dreht sich mit der Textfarbe des Buttons und passt damit auf
   die grüne Fläche wie auf den hellen Ghost-Button, hell und dunkel. */
.spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(128, 128, 128, .4);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.error { color: var(--danger); font-size: .9rem; margin: .75rem 0 0; }
/* Neutrale Rückmeldung, kein Fehler – z. B. "3 Artikel ergänzt". */
.error.hinweis { color: var(--brand-ink); font-weight: 600; }

/* ---------- Nachfragen ---------- */

/* Gelber Balken: hier ist noch eine Entscheidung offen. */
.choice {
  border: 1px solid var(--border);
  border-left: 4px solid var(--attention);
  border-radius: var(--radius-sm);
  padding: .8rem;
  margin-top: .7rem;
  background: var(--surface-2);
}
.choice-raw { margin: 0 0 .6rem; font-size: .9rem; color: var(--muted); }
.choice-options { display: grid; gap: .5rem; }

.chip {
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  min-height: var(--tap);
  width: 100%;
  padding: .7rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--brand);
  background: var(--surface);
  color: var(--text-strong);
  cursor: pointer;
  touch-action: manipulation;
  transition: background .15s, transform .08s;
}
.chip:active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); transform: scale(.98); }
.chip:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.pill {
  font-size: .78rem;
  font-weight: 700;
  color: var(--brand-ink);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: .15rem .55rem;
}
.pill:empty { display: none; }
/* Zähler der offenen Nachfragen – gelb, weil dort noch etwas zu tun ist. */
.pill-attention { color: var(--attention-ink); background: var(--attention-soft); }
.pill-live { color: var(--brand-ink); background: var(--brand-soft); }
.pill-live[data-kind="busy"] { color: var(--muted); background: var(--border); }
.pill-live[data-kind="error"] { color: var(--danger); background: var(--danger-soft); }

/* ---------- Liste ---------- */

.list-head { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: center; }
.list-head .row { margin-top: 0; gap: .4rem; }
/* Nebenaktionen kleiner halten, damit sie auf dem Handy in eine Zeile passen. */
.list-head .btn { min-height: 40px; padding: .45rem .8rem; font-size: .9rem; }

.meta-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; margin: .9rem 0; }
.meta-grid label { display: grid; gap: .25rem; font-size: .82rem; font-weight: 600; color: var(--muted); }

input[type="text"], select {
  font: inherit;
  /* 16px, sonst zoomt iOS Safari beim Antippen in das Feld hinein. */
  font-size: 16px;
  min-height: var(--tap);
  padding: .6rem .75rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  width: 100%;
  min-width: 0;
}
input[type="text"]:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.items { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .4rem .5rem;
  align-items: center;
  padding: .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

/* Auf dem Handy steht der Artikelname zuerst und über die ganze Breite,
   Menge und Einheit darunter – so ist alles bequem antippbar. */
.item-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .4rem; }
.item-fields .field { width: 100%; }
.field-name { grid-column: 1 / -1; order: -1; font-weight: 600; }

/* Explizite Platzierung: der Badge-Streifen spannt über beide Spalten, sonst
   schiebt er den Löschen-Button in eine dritte Zeile statt nach rechts oben. */
.item-fields { grid-column: 1; grid-row: 1; }
.item > .icon-btn { grid-column: 2; grid-row: 1; align-self: center; }
.item-badges { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: .35rem; }

.tag {
  font: inherit;
  font-size: .78rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  touch-action: manipulation;
}
.tag-raw { font-style: italic; }

.icon-btn {
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  width: var(--tap); height: var(--tap);
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  touch-action: manipulation;
  flex: none;
}
.icon-btn:active { color: var(--danger); background: var(--danger-soft); }

.empty-hint { margin: .75rem 0 0; }

/* ---------- Anmelden ---------- */

.login-card { max-width: 420px; margin: 0 auto; }
.login-card form { margin-top: .9rem; }
.login-label { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .25rem; }
input[type="password"] {
  font: inherit;
  font-size: 16px;
  min-height: var(--tap);
  padding: .6rem .75rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  width: 100%;
}
input[type="password"]:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.footer { max-width: 720px; margin: 1.5rem auto 0; text-align: center; font-size: .85rem; }
.footer a { color: var(--muted); }

/* ---------- Teilen ---------- */

.share {
  margin: 1rem -1rem -1rem;
  padding: .9rem 1rem calc(.9rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
  /* Klebt beim Scrollen am unteren Rand, damit der Button auch bei langen
     Listen erreichbar bleibt. */
  position: sticky;
  bottom: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}
.share .muted { margin: .5rem 0 0; text-align: center; }

.share-url {
  margin: .9rem 0 0;
  padding: .65rem .7rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  overflow-wrap: anywhere;
}
.share-url a { color: var(--brand-ink); }

.shared-list { margin: .5rem 0 0; padding-left: 1.3rem; display: grid; gap: .45rem; }
.shared-list li { padding-left: .15rem; }

/* Abhakbare Einkaufsliste auf der geteilten Seite. */
.check-list { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .15rem; }
.check-list li { border-radius: var(--radius-sm); }
.check-list label {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: var(--tap);
  padding: .35rem .5rem;
  cursor: pointer;
  touch-action: manipulation;
}
.check-list input[type="checkbox"] {
  flex: none;
  width: 24px;
  height: 24px;
  accent-color: var(--brand);
  cursor: pointer;
}
.check-list li:active { background: var(--surface-2); }
.check-list .abgehakt span,
.abgehakt label span { color: var(--muted); text-decoration: line-through; }

/* ---------- Schema ---------- */

summary {
  cursor: pointer;
  font-weight: 700;
  font-size: .95rem;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--text-strong);
}
#schema-card p { margin: .6rem 0; }

pre {
  margin: .5rem 0 0;
  padding: .85rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .76rem;
  line-height: 1.5;
  max-height: 300px;
}

/* "hierher ziehen" gibt es auf dem Handy nicht. */
@media (hover: none) {
  .only-desktop { display: none; }
}

/* ---------- ab Tablet ---------- */

@media (min-width: 561px) {
  body { padding-bottom: 4rem; }
  main { gap: 1rem; }
  .topbar { padding: 2.25rem 0 1.25rem; }
  .topbar h1 { font-size: 1.7rem; }
  .card { padding: 1.25rem; }

  .dropzone { min-height: 180px; }
  .dropzone img { max-height: 260px; }

  .meta-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .choice-options { display: flex; flex-wrap: wrap; }
  .chip { width: auto; }

  .item { border-color: transparent; }
  .item:hover { border-color: var(--border); background: var(--surface-2); }
  .item-fields { grid-template-columns: 84px 96px minmax(0, 1fr); }
  .field-name { grid-column: auto; order: 0; }

  .share { position: static; margin: 1.25rem 0 0; padding: 1rem 0 0; border-radius: 0; background: transparent; }
  .share .muted { text-align: left; }

  .btn:hover:not(:disabled) { border-color: var(--brand); }
  .btn-primary:hover:not(:disabled) { background: var(--brand-strong); border-color: var(--brand-strong); }
  .chip:hover { background: var(--brand-soft); }
  .icon-btn:hover { color: var(--danger); background: var(--danger-soft); }
  .tag-choice:hover { background: var(--brand-soft); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}