/* ==========================================================================
   Einkaufsliste – app.css
   Designprinzip: einhändig im Laden bedienbar. Große Tap-Flächen,
   Eingabe unten am Daumen, ruhige Flächen, eine einzige Akzentfarbe.
   ========================================================================== */

:root {
  --bg:        #F3F5F1;
  --surface:   #FFFFFF;
  --surface-2: #EAEEE8;
  --ink:       #141A16;
  --ink-2:     #5A6560;
  --ink-3:     #8E9A93;
  --line:      #DEE4DB;
  --accent:    #1F6B43;
  --accent-on: #FFFFFF;
  --accent-soft:#E2EFE7;
  --danger:    #A8392F;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  /* von JS gesetzt: Tastaturhöhe und gemessene Höhe der Eingabeleiste */
  --kb: 0px;
  --composerH: 78px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
          system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #111714;
    --surface:   #1A221D;
    --surface-2: #222C26;
    --ink:       #ECF1EC;
    --ink-2:     #9AA8A0;
    --ink-3:     #6E7C74;
    --line:      #2A342D;
    --accent:    #5BC98B;
    --accent-on: #0C150F;
    --accent-soft:#1E2E25;
    --danger:    #E1766A;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior-y: none;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

[hidden] { display: none !important; }

.icon {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.icon circle { fill: currentColor; stroke: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================ Setup ============================ */

.setup {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: calc(var(--sat) + 32px) 24px calc(var(--sab) + 32px);
}
.setup__inner { width: 100%; max-width: 380px; }
.setup__title {
  margin: 0 0 6px;
  font-size: 30px; font-weight: 680; letter-spacing: -0.02em;
}
.setup__lead { margin: 0 0 28px; color: var(--ink-2); }
.setup__error {
  margin: 14px 0 0; color: var(--danger); font-size: 15px;
}

.field { display: block; margin-bottom: 18px; }
.field__label {
  display: block; margin-bottom: 6px;
  font-size: 14px; font-weight: 560; color: var(--ink-2);
}
.field__input {
  width: 100%;
  padding: 13px 14px;
  font: inherit; font-size: 17px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  appearance: none;
}
.field__input:focus { border-color: var(--accent); outline: none; }
select.field__input { background-image: none; }

.btn {
  font: inherit; font-size: 17px; font-weight: 600;
  padding: 14px 20px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn--primary { background: var(--accent); color: var(--accent-on); }
.btn--primary:active { filter: brightness(0.92); }
.btn--block { display: block; width: 100%; }
.btn--ghostDanger {
  background: transparent; color: var(--danger); border-color: var(--line);
}

/* ============================ App-Grundlayout ============================ */

.app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: calc(var(--sat) + 10px) calc(var(--sar) + 14px) 10px calc(var(--sal) + 18px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.topbar--scrolled { border-bottom-color: var(--line); }

.topbar__title {
  flex: 1; margin: 0;
  font-size: 21px; font-weight: 660; letter-spacing: -0.015em;
}
.topbar__actions { display: flex; gap: 2px; }

.iconbtn {
  position: relative;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  background: none; border: 0; border-radius: 50%;
  color: var(--ink-2); cursor: pointer;
}
.iconbtn:active { background: var(--surface-2); }
.iconbtn[data-state="on"] { color: var(--accent); }
.iconbtn__slash {
  position: absolute; left: 9px; top: 50%;
  width: 24px; height: 1.9px;
  background: currentColor; border-radius: 2px;
  transform: rotate(-45deg);
}

.syncdot {
  position: absolute; left: calc(var(--sal) + 18px); bottom: 2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  opacity: 0; transition: opacity .25s;
}
.syncdot--busy { opacity: 1; animation: pulse 1.1s ease-in-out infinite; }
.syncdot--error { opacity: 1; background: var(--danger); animation: none; }
@keyframes pulse { 50% { opacity: .25; } }

/* ======================== Ladenfilter ========================= */

.filter {
  position: sticky; z-index: 15;
  top: calc(var(--sat) + 52px);
  display: flex; gap: 7px;
  overflow-x: auto;
  padding: 6px calc(var(--sar) + 16px) 10px calc(var(--sal) + 16px);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  scrollbar-width: none;
}
.filter::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  font: inherit; font-size: 15px; font-weight: 540;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
  white-space: nowrap; cursor: pointer;
}
.chip__n {
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.chip--on {
  color: var(--accent-on); background: var(--accent); border-color: var(--accent);
}
.chip--on .chip__n { color: color-mix(in srgb, var(--accent-on) 72%, transparent); }

/* ============================ Liste ============================ */

.list {
  flex: 1;
  padding: 0 calc(var(--sar) + 12px)
           calc(var(--composerH) + var(--kb) + 24px) calc(var(--sal) + 12px);
}

/* Laden: oberste Gliederungsebene, deutlich kräftiger als die Abteilung */
.shop {
  display: flex; align-items: baseline; gap: 9px;
  padding: 28px 8px 2px;
}
.shop:first-child { padding-top: 10px; }
.shop__name {
  font-size: 21px; font-weight: 660; letter-spacing: -0.018em;
  color: var(--ink);
}
.shop__count {
  font-size: 14px; font-weight: 560; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.cat {
  display: flex; align-items: baseline; gap: 8px;
  padding: 16px 8px 8px;
}
.cat__name {
  font-size: 14px; font-weight: 620; color: var(--ink-2);
  letter-spacing: -0.005em;
}
.cat__count {
  font-size: 13px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.cat__rule { flex: 1; height: 1px; background: var(--line); }

.group { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; }

/* --- Zeile --- */
.row { position: relative; overflow: hidden; }
.row + .row .row__face::before {
  content: ""; position: absolute; left: 62px; right: 0; top: 0; height: 1px;
  background: var(--line);
}

.row__face {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 60px;
  padding: 10px 14px;
  background: var(--surface);
  transition: transform .22s cubic-bezier(.22,.9,.3,1);
  touch-action: pan-y;
}
.row--swiping .row__face { transition: none; }
.row--open .row__face { transform: translateX(-88px); }

.row__qty {
  flex: none;
  min-width: 36px; height: 36px;
  display: grid; place-items: center;
  padding: 0 8px;
  font-size: 15px; font-weight: 640;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: var(--accent-soft);
  border: 0; border-radius: 11px;
  cursor: pointer;
}
.row__qty:active { filter: brightness(.94); }

.row__name {
  flex: 1; min-width: 0;
  font-size: 18px; font-weight: 520; letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.row__by {
  font-size: 13px; color: var(--ink-3); margin-top: 1px;
}

.row__check {
  flex: none;
  width: 27px; height: 27px;
  border: 1.9px solid var(--line); border-radius: 50%;
  background: transparent;
  display: grid; place-items: center;
}
.row__check svg {
  width: 15px; height: 15px; fill: none;
  stroke: var(--accent-on); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 20; stroke-dashoffset: 20;
}

.row--done .row__face { background: var(--surface); }
.row--done .row__name { color: var(--ink-3); }
/* Durchstreichen nur auf dem Produktnamen – von einem Elternelement
   vererbt ließe es sich beim Namenszusatz nicht wieder abschalten. */
.row--done .row__text { text-decoration: line-through; }
.row--done .row__qty { color: var(--ink-3); background: var(--surface-2); }
.row--done .row__check { background: var(--accent); border-color: var(--accent); }
.row--done .row__check svg { stroke-dashoffset: 0; transition: stroke-dashoffset .24s ease-out; }

.row__delete {
  position: absolute; inset: 0 0 0 auto;
  width: 88px;
  display: grid; place-items: center;
  background: var(--danger); color: #fff;
  font-size: 15px; font-weight: 600;
  border: 0; cursor: pointer;
}

/* --- Erledigt-Block --- */
.doneHead {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 26px 8px 8px;
  background: none; border: 0;
  font: inherit; font-size: 14px; font-weight: 620; color: var(--ink-2);
  text-align: left; cursor: pointer;
}
.doneHead__chev {
  width: 16px; height: 16px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s;
}
.doneHead--open .doneHead__chev { transform: rotate(90deg); }

.empty { padding: 72px 24px; text-align: center; }
.empty__head { margin: 0 0 4px; font-size: 18px; font-weight: 560; }
.empty__sub { margin: 0; color: var(--ink-3); }

/* ============================ Eingabe unten ============================ */

.composer {
  position: fixed; z-index: 30;
  left: 0; right: 0;
  bottom: var(--kb);
  padding: 8px calc(var(--sar) + 12px) calc(var(--sab) + 10px) calc(var(--sal) + 12px);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-top: 1px solid var(--line);
  transition: bottom .18s ease-out;
}
.composer--kb { padding-bottom: 10px; }

.composer__bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 5px 5px 18px;
}
.composer__bar:focus-within { border-color: var(--accent); }

.composer__input {
  flex: 1; min-width: 0;
  padding: 11px 0;
  font: inherit; font-size: 17px;
  color: var(--ink); background: none; border: 0; outline: none;
}
.composer__input::placeholder { color: var(--ink-3); }

.composer__btn {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-on);
  border: 0; border-radius: 50%; cursor: pointer;
}
.composer__btn:active { filter: brightness(.92); }
.composer__btn:disabled { opacity: .35; }

.suggest {
  display: flex; gap: 7px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scrollbar-width: none;
}
.suggest::-webkit-scrollbar { display: none; }
.suggest__chip {
  flex: none;
  padding: 8px 14px;
  font: inherit; font-size: 15px; font-weight: 520;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
  white-space: nowrap; cursor: pointer;
}
.suggest__chip:active { background: var(--accent-soft); border-color: var(--accent); }

/* ============================ Sheets & Toast ============================ */

.scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(8, 14, 10, .42);
  animation: fade .18s ease-out;
}
@keyframes fade { from { opacity: 0; } }

.sheet {
  position: fixed; z-index: 50;
  left: 0; right: 0; bottom: 0;
  padding: 10px calc(var(--sar) + 20px) calc(var(--sab) + 20px) calc(var(--sal) + 20px);
  background: var(--bg);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  animation: rise .26s cubic-bezier(.22,.9,.3,1);
}
@keyframes rise { from { transform: translateY(100%); } }

.sheet__grab {
  width: 38px; height: 4px; margin: 0 auto 20px;
  background: var(--line); border-radius: 2px;
}
.sheet__row { display: flex; gap: 10px; margin-top: 6px; }
.sheet__row .btn { flex: 1; }

.menuitem {
  display: block; width: 100%;
  padding: 16px 4px;
  font: inherit; font-size: 17px; text-align: left;
  color: var(--ink); background: none;
  border: 0; border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.menuitem:last-of-type { border-bottom: 0; }
.menuitem--danger { color: var(--danger); }
.menuinfo {
  margin: 14px 0 0; font-size: 13px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.toast {
  position: fixed; z-index: 60;
  left: 50%; bottom: calc(var(--composerH) + var(--kb) + 16px);
  transform: translateX(-50%);
  max-width: calc(100vw - 40px);
  padding: 11px 18px;
  font-size: 15px; font-weight: 520;
  color: var(--bg); background: var(--ink);
  border-radius: 999px;
  animation: rise 0.2s ease-out;
}

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