/* ============================================================================
   Erscheinungsbild „Marktfrisch“ – liegt über style.css.
   Wird unter „Mehr → Darstellung“ pro Gerät ein-/ausgeschaltet (Link #skinCss).
   Warmes Creme als Grund, Basilikumgrün als Leitfarbe, Tomatenrot/Bernstein nur
   wo etwas abläuft, Produktbild links, große Tage-Zahl rechts, Lagerort als Chip.
   ============================================================================ */

:root {
  --bg: #faf6ef;
  --surface: #ffffff;
  --text: #2a2520;
  --muted: #6b6257;
  --border: #e8e0d3;
  --primary: #1f6f45;
  --primary-text: #ffffff;
  --ok: #1f6f45;
  --soon: #b7791f;          /* kräftig genug für Streifen und Punkt (≥ 3:1 auf Creme) */
  --expired: #c6392b;
  --danger: #c6392b;
  --ok-bg: #dcf2e3;   --ok-fg: #155a34;
  --soon-bg: #fbe8c4; --soon-fg: #7a4b06;
  --expired-bg: #fbe0db; --expired-fg: #a4281a;
  --thumb-bg: #f3ede2;
  --track: #eee7da;
  --shadow: 0 1px 2px rgba(60, 40, 20, .06);
  --radius: 16px;
  --loc-s: 55%; --loc-l: 91%; --loc-fs: 45%; --loc-fl: 26%;
  --chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6257' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #191612;
    --surface: #24201a;
    --text: #f1ebe1;
    --muted: #a89f92;
    --border: #3a342b;
    --primary: #4fbf7f;
    --primary-text: #0b2416;
    --ok: #4fbf7f;
    --soon: #f2c063;
    --expired: #ff8a7a;
    --danger: #ff8a7a;
    --ok-bg: #1f3a2b;   --ok-fg: #7fd8a2;
    --soon-bg: #3d2f12; --soon-fg: #f2c063;
    --expired-bg: #41201c; --expired-fg: #ff9b8c;
    --thumb-bg: #2e2923;
    --track: #2e2923;
    --shadow: none;
    --loc-s: 30%; --loc-l: 24%; --loc-fs: 60%; --loc-fl: 80%;
    --chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a89f92' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  }
}

/* ---------------------------------------------------------------- Grundschrift */
body { font-size: 17px; line-height: 1.4; padding-bottom: calc(88px + var(--safe-bottom)); }
h1 { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 1.05rem; font-weight: 800; }
.count { background: var(--border); color: var(--muted); font-weight: 700; }
.muted { color: var(--muted); }

/* ---------------------------------------------------------------- Kopfzeile */
.topbar { background: var(--bg); border-bottom: 0; padding-bottom: .3rem; }
.brand { color: var(--primary); font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em; }
.brand::before { content: "🌿"; margin-right: .3rem; font-size: 1.05rem; }
.brand .tenant { color: var(--muted); font-weight: 500; font-size: .85rem; }
.brand .tenant::before { content: "· "; }
.topbar .topscan { display: none; }   /* Scannen liegt als runder Knopf in der Tab-Leiste */

/* ---------------------------------------------------------------- Tab-Leiste mit Scan-Knopf */
.tabbar { align-items: flex-end; padding: .35rem .3rem var(--safe-bottom); background: var(--surface); border-top: 1px solid var(--border); }
.tabbar a { font-weight: 600; font-size: .74rem; padding: .35rem 0 .55rem; line-height: 1.2; }
.tabbar a.active { color: var(--primary); }
.tabbar .ic { display: block; font-style: normal; font-size: 1.35rem; line-height: 1.25; }
.tabbar a.scan { color: var(--primary); }
.tabbar .ic.fab {
  width: 60px; height: 60px; margin: -34px auto 4px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 6px 16px rgba(31, 111, 69, .45);
  border: 4px solid var(--bg); box-sizing: content-box;
  display: flex; align-items: center; justify-content: center;
}
.tabbar .ic.fab u {
  width: 24px; height: 24px; border: 3px solid var(--primary-text); border-radius: 6px;
  display: block; position: relative; text-decoration: none;
}
.tabbar .ic.fab u::after {
  content: ""; position: absolute; left: -7px; right: -7px; top: 9px; height: 3px;
  background: var(--primary-text); border-radius: 2px;
}
@media (min-width: 900px) {
  .tabbar { padding: 4.2rem .6rem 1rem; align-items: stretch; }
  .tabbar a { font-size: .95rem; padding: .65rem .8rem; }
  .tabbar a.active { background: var(--ok-bg); color: var(--ok-fg); }
  .tabbar a.scan { background: var(--primary); color: var(--primary-text); box-shadow: 0 6px 16px rgba(31, 111, 69, .35); }
  .tabbar a.scan.active { background: var(--primary); color: var(--primary-text); }
  .tabbar .ic.fab { width: 44px; height: 44px; margin: 0; border-width: 0; box-shadow: none; background: rgba(255, 255, 255, .18); }
  .tabbar .ic.fab u { width: 22px; height: 22px; border-width: 3px; }
  .tabbar .ic.fab u::after { top: 8px; height: 3px; left: -6px; right: -6px; }
  body { padding-bottom: 2rem; }
  .topbar { background: var(--bg); }
  .table.items th.on { color: var(--primary); }
  .table.items tbody tr:hover { background: var(--ok-bg); }
}
#toast { bottom: calc(96px + var(--safe-bottom)); }
#toast.error { background: var(--expired); color: var(--bg); }

/* ---------------------------------------------------------------- Knöpfe, Eingaben */
.btn { border-radius: 14px; border-width: 2px; font-weight: 700; padding: .55rem 1rem; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.btn.small { border-radius: 10px; font-weight: 600; }
.btn.big { border-radius: 16px; }
.form input:not([type=radio]), .form select, .form textarea, input[type=search] {
  border-width: 2px; border-radius: 12px; background: var(--surface); padding: .6rem .7rem;
}
fieldset.seg span { border-radius: 999px; font-weight: 600; }
fieldset.seg input:checked + span { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.box, .card { border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------------------------------------------------------------- Werkzeugleiste der Übersicht */
.toolbar { gap: .4rem; }
.toolbar .collapsible { gap: .4rem; }
.ftoggle { height: 38px; border-width: 1.5px; border-radius: 12px; background: var(--surface); padding: 0 .8rem; font-weight: 700; }
.ftoggle.active { background: var(--ok-bg); border-color: var(--primary); color: var(--ok-fg); }
.filterrow .chips.seg { margin: 0; }
.searchbox input { height: 44px; font-size: 16px; }
.searchbox .clear { background: var(--border); color: var(--text); font-weight: 700; }
.searchrow .btn { height: 44px; border: 2px solid var(--primary); color: var(--primary); background: var(--surface); padding: 0 1rem; }
.chips.seg { background: var(--track); border-radius: 13px; padding: 3px; gap: 0; overflow: visible; }
.chips.seg .chip { flex: 1; border: 0; background: transparent; color: var(--muted); border-radius: 10px; padding: .4rem .6rem; font-weight: 600; text-align: center; }
.chips.seg .chip.on { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1.5px var(--primary); }
.chip { border-width: 1.5px; font-weight: 600; font-size: .9rem; padding: .4rem .8rem; background: var(--surface); }
.chip.on { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.chip .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .4rem; vertical-align: 1px; }
.chip .dot.expired { background: var(--expired); }
.chip .dot.soon { background: var(--soon); }
.chip.on .dot { background: var(--primary-text); }
/* Drei Auswahlfelder in einer Zeile; minmax(0,1fr) verhindert, dass lange Optionen die Zeile sprengen */
.selects { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.selects select {
  min-width: 0; height: 38px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface);
  font-weight: 600; font-size: .82rem; padding: 0 1.4rem 0 .55rem; appearance: none; -webkit-appearance: none;
  text-overflow: ellipsis;
  background-image: var(--chev);
  background-repeat: no-repeat; background-position: right .5rem center;
}
@media (max-width: 480px) {
  .selects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .selects select:last-child { grid-column: auto; }
}
/* Druckansicht: „bald“-Zeilen mit textkräftigem Ton statt des Streifen-Bernsteins */
.table.print tr.soon td:nth-child(5), .table.print tr.soon td:nth-child(6) { color: var(--soon-fg); }
.toolbar .tools { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .15rem; }
.toolbar .tools .btn { border-width: 1.5px; background: var(--surface); white-space: nowrap; flex: 0 0 auto; }

/* ---------------------------------------------------------------- Karten */
.card {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: .65rem; row-gap: .15rem;
  align-items: center; padding: .6rem .65rem; margin-bottom: .45rem; border: 1px solid var(--border);
  content-visibility: auto; contain-intrinsic-size: 96px;
}
.card.expired { border-left: 5px solid var(--expired); }
.card.soon { border-left: 5px solid var(--soon); }
.card .thumb {
  display: flex; grid-row: 1 / 4; grid-column: 1; width: 56px; height: 56px; border-radius: 12px;
  background: var(--thumb-bg); align-items: center; justify-content: center; position: relative; overflow: visible;
}
.card .thumb img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: #fff; }
.card .thumb .glyph { font-size: 1.7rem; line-height: 1; }
.card .thumb em {
  position: absolute; right: -7px; top: -7px; background: var(--primary); color: var(--primary-text);
  font-style: normal; font-weight: 800; font-size: .72rem; line-height: 1; padding: 4px 6px;
  border-radius: 999px; border: 2px solid var(--surface);
}
.card .qty { display: none; }                    /* Stückzahl sitzt als Pille am Bild */
.card.nothumb { grid-template-columns: minmax(0, 1fr) auto; }
.card-main { display: contents; }
.card-main strong {
  grid-column: 2; grid-row: 1; white-space: normal; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-size: 1rem; font-weight: 700; line-height: 1.25;
}
.card.nothumb .card-main strong { grid-column: 1; }
.card-main .muted {
  grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: .15rem .35rem; align-items: center;
  font-size: .82rem; line-height: 1.3;
}
.card.nothumb .card-main .muted { grid-column: 1 / 3; }
.card-main .sep { margin: 0; }
.card-main b { font-weight: 600; }
.card-main b.expired { color: var(--expired); }
.card-main b.soon { color: var(--soon-fg); }
.card .badge { grid-column: 3; grid-row: 1; align-self: start; }
.card.nothumb .badge { grid-column: 2; }
.card.selectable { grid-template-columns: 24px minmax(0, 1fr) auto; }
.card.selectable input[type=checkbox] { grid-row: 1 / 3; grid-column: 1; }
.card.selectable .card-main strong { grid-column: 2; }
.card.selectable .card-main .muted { grid-column: 2 / 4; }
.card.selectable .badge { grid-column: 3; }
.card.selectable:has(input:checked) { border-color: var(--primary); background: var(--ok-bg); }

/* Lagerort-Chip: Farbton je Ort (--h aus dem Schlüssel), Pastell mit dunkler Schrift */
.loc {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-weight: 600; font-size: .78rem;
  background: hsl(var(--h) var(--loc-s) var(--loc-l)); color: hsl(var(--h) var(--loc-fs) var(--loc-fl));
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.card-main strong .loc { font-size: .9rem; white-space: normal; }

/* ---------------------------------------------------------------- Ablauf-Badges: große Zahl, kleines Wort */
.badge {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 58px; padding: 4px 8px; border-radius: 12px; font-weight: 700; font-size: .7rem;
  line-height: 1.1; white-space: nowrap; color: var(--muted); background: var(--border);
}
.badge b { display: block; font-size: 1.25rem; line-height: 1.05; font-weight: 800; }
.badge small { font-size: .7rem; font-weight: 700; }
.badge small::before { content: none; }
.badge.ok { background: var(--ok-bg); color: var(--ok-fg); }
.badge.soon { background: var(--soon-bg); color: var(--soon-fg); }
.badge.expired { background: var(--expired-bg); color: var(--expired-fg); }
.badge.unknown, .badge.empty { background: var(--track); color: var(--muted); font-size: .78rem; padding: 6px 8px; }
/* In Überschriften (Behälter, Vorrat) und Tabellen einzeilig bleiben */
h2 .badge, .fill h2 .badge, .shop .badge { flex-direction: row; gap: .3em; min-width: 0; padding: 3px 9px; }
h2 .badge b, .fill h2 .badge b { display: inline; font-size: .9rem; }
.fill { border-left-width: 5px; }

/* ---------------------------------------------------------------- Artikel- und Detailseiten */
.head p.muted { font-size: .9rem; }
.pinfo { border-radius: var(--radius); box-shadow: var(--shadow); }
.pinfo img { border-radius: 12px; }
.nutri { font-weight: 800; border-radius: 7px; }
.row.actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.row.actions .btn { text-align: center; padding: .65rem .5rem; font-size: .95rem; }
.banner { border-radius: 14px; background: var(--ok-bg); border-color: transparent; color: var(--ok-fg); }
.banner .btn { background: var(--surface); color: var(--text); }
.banner .btn.primary { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.banner .btn.danger { color: var(--danger); border-color: var(--danger); }
.bulkedit .btn { white-space: nowrap; }
dl dt { font-size: .82rem; }

/* ---------------------------------------------------------------- Einkaufsliste, Statistik */
.shop .qtyctl .qty { color: var(--primary); }
.shop .qtyctl button { border-width: 1.5px; font-weight: 700; }
.tile { border-radius: var(--radius); box-shadow: var(--shadow); }
.tile strong { font-weight: 800; }
.tile.bad strong { color: var(--expired); }
.bar i.ok { background: var(--primary); }
.bar i.bad { background: var(--expired); }

/* ---------------------------------------------------------------- Scan */
.scan video { border-radius: var(--radius); }
.scan form input { border-width: 2px; border-radius: 12px; }

/* ---------------------------------------------------------------- Druck: klassisch bleiben */
@media print {
  body { background: #fff; padding: 0; font-size: 11pt; }
  .card { box-shadow: none; }
}