/* ============================================================
   Lagerhaus - Designsystem "Werkstattschild"
   ------------------------------------------------------------
   Leitgedanke: Die App sieht aus, wie das Regal aussieht.
   Jede Zeile traegt links denselben Label-Chip, der physisch
   als QR-Etikett am Gegenstand klebt.

   Entscheidungen aus der UX-Recherche:
   - Touch-Ziele min. 56px (Arbeitshandschuhe)
   - Primaeraktionen in der unteren Bildschirmhaelfte (Daumenzone)
   - Zwei Farbschemata: Hell (Werkbank) und Dunkel (Keller)
   - Keine Web-Fonts: muss ohne Internet starten (PWA offline)
   ============================================================ */

:root {
  /* --- Farbwelt: verzinktes Blech, Graphit, Petrol --------- */
  --zink:        #E6E9E8;
  --zink-tief:   #D5DAD9;
  --papier:      #FFFFFF;
  --stahl:       #B9C1C0;
  --graphit:     #1C2226;
  --text:        #1C2226;
  --text-leise:  #5C686D;

  --petrol:      #0B6E6B;   /* einzige Aktionsfarbe */
  --petrol-hell: #0E8A86;
  --petrol-tief: #075250;

  --gruen:       #2E7D45;
  --bernstein:   #B06E00;
  --rot:         #B3261E;

  /* --- Raster & Radien ------------------------------------ */
  --tap: 56px;              /* Mindesthoehe fuer Handschuhbedienung */
  --radius: 4px;            /* kantig wie ein Blechschild */
  --radius-gross: 10px;
  --rand: 1px solid var(--stahl);

  /* --- Typografie ----------------------------------------- */
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-daten: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --flaeche:     var(--zink);
  --karte:       var(--papier);
  --leiste:      var(--graphit);
  --leiste-text: #E6E9E8;
}

/* --- Kellermodus: dunkel, fuer Abend und Kellerraeume ------ */
:root[data-schema="keller"] {
  --zink:        #171B1E;
  --zink-tief:   #101315;
  --papier:      #1F262A;
  --stahl:       #333D42;
  --text:        #E4E9E8;
  --text-leise:  #93A0A4;
  --petrol:      #21A9A4;
  --petrol-hell: #2EC4BE;
  --petrol-tief: #17807C;
  --gruen:       #4CAF6A;
  --bernstein:   #E0A32E;
  --rot:         #E5675C;
  --leiste:      #0D1012;
  --leiste-text: #E4E9E8;
}

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

html, body {
  margin: 0;
  min-height: 100dvh;
  background: var(--flaeche);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.45;
}

/* ============================================================
   Kopfzeile - schmal, haelt sich aus der Daumenzone heraus
   ============================================================ */
.kopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  background: var(--leiste);
  color: var(--leiste-text);
}
.kopf h1 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kopf .zurueck {
  background: none; border: none; color: inherit;
  font-size: 1.5rem; line-height: 1; padding: 0;
  width: 44px; height: 44px; min-height: 44px; margin: 0;
  display: grid; place-items: center; cursor: pointer;
}
.kopf .netz {
  margin-left: auto;
  font-family: var(--schrift-daten);
  font-size: 0.68rem; letter-spacing: 0.08em;
  padding: 5px 8px; border-radius: var(--radius);
  border: 1px solid currentColor;
  color: var(--bernstein);
}
.kopf .netz[hidden] { display: none; }

/* ============================================================
   Ansichten
   ============================================================ */
.ansicht { display: none; padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
.ansicht.aktiv { display: block; animation: einblenden 0.18s ease-out; }
@keyframes einblenden { from { opacity: 0; transform: translateY(6px); } }

.inhalt { padding: 16px; }

/* Abschnittsmarke: schmale Petrol-Kante + gesperrte Versalien */
.abschnitt {
  display: flex; align-items: baseline; gap: 10px;
  margin: 26px 16px 8px;
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-leise);
}
.abschnitt::before {
  content: ""; width: 14px; height: 3px;
  background: var(--petrol); flex: none;
}
.abschnitt .zaehler {
  margin-left: auto;
  font-family: var(--schrift-daten);
  letter-spacing: 0;
}

/* ============================================================
   Signaturelement: die Zeile als Regaletikett
   ============================================================ */
.liste { list-style: none; margin: 0; padding: 0; }

.zeile {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--tap);
  padding: 10px 16px;
  background: var(--karte);
  border: none;
  border-top: var(--rand);
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit; color: var(--text);
  justify-content: flex-start;
}
.liste .zeile:last-child { border-bottom: var(--rand); }
.zeile:active { background: var(--zink-tief); }
.zeile:disabled { opacity: 0.4; cursor: not-allowed; }

/* Akkordeon (Synonyme/Aufgaben-Vorlagen-Kategorien): der Kopf ist eine
   normale ".zeile" mit Pfeil statt Wert (siehe akkordeonKopfErzeugen in
   app.js) - hier nur der aufgeklappte Inhalt darunter. Eigene
   :last-child-Regel noetig, weil der Kopf durch den Geschwister-Inhalt
   nicht mehr selbst :last-child der <li> ist (siehe .liste .zeile:last-
   child oben) - sonst fehlt die untere Randlinie, wenn die letzte Zeile
   aufgeklappt ist. */
.akkordeon-inhalt { background: var(--karte); }
.liste .akkordeon-inhalt:last-child { border-bottom: var(--rand); }

/* Vorlagen-Zeile innerhalb einer aufgeklappten Kategorie - leicht
   eingerueckt, damit die Hierarchie (Kategorie > Vorlage) erkennbar
   bleibt, ohne eine zweite Optik einzufuehren. */
.zeile-eingerueckt { padding-left: 28px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; }

/* Entfernbarer Chip (Synonym-Begriff): derselbe ".chip" wie das Etikett-
   Kuerzel, nur mit eingebettetem "x"-Knopf statt reinem Text. */
.chip-entfernbar { display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; }
.chip-x {
  flex: none;
  background: none; border: none; color: inherit;
  font-size: 1rem; line-height: 1; cursor: pointer;
  width: 20px; height: 20px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  opacity: 0.85;
}
.chip-x:active { background: rgba(0, 0, 0, 0.15); opacity: 1; }

/* Der Label-Chip - dasselbe Kuerzel wie auf dem gedruckten Etikett */
.chip {
  flex: none;
  font-family: var(--schrift-daten);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 6px 7px;
  background: var(--graphit); color: #E6E9E8;
  border-radius: 2px;
  min-width: 64px; text-align: center;
}
.chip[data-typ="material"]     { background: var(--petrol-tief); }
.chip[data-typ="lebensmittel"] { background: var(--gruen); }
.chip[data-typ="ort"]          { background: var(--bernstein); }

/* Suchergebnis-Vorschaubild anstelle des Chips - gleiche Groesse/Position,
   damit die Zeile beim Laden nicht springt (siehe listeFuellen in app.js). */
.miniatur {
  flex: none;
  width: 40px; height: 40px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--graphit);
}

/* Artikel-Detailseite: Referenzfoto oben, volle Breite, begrenzte Hoehe. */
.artikel-foto {
  display: block;
  width: 100%; max-height: 240px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
}

/* Zusaetzliche Foto-Galerie ("Weitere Fotos") - 3 pro Zeile, letzte Kachel
   immer "+ hinzufuegen", auch wenn die Galerie noch leer ist (gleiches
   Prinzip wie der immer sichtbare "Barcode hinzufuegen"-Knopf). */
.foto-galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.foto-galerie button {
  aspect-ratio: 1;
  padding: 0; margin: 0;
  border: none; border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: var(--zink-tief);
}
.foto-galerie button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-galerie .foto-hinzufuegen {
  display: grid; place-items: center;
  border: 1px dashed var(--stahl);
  color: var(--text-leise);
  font-size: 1.8rem; font-weight: 300;
}

/* Foto bearbeiten (Drehen/Zuschneiden, siehe js/fotoBearbeiten.js) - fester
   Rahmen fuer Cropper.js, damit die Eckpunkte zum Ziehen unabhaengig vom
   Bildseitenverhaeltnis immer gut erreichbar sind. Dunkler Hintergrund wie
   bei Cropper ueblich, damit der (transparente) Bereich ausserhalb des
   Zuschnitts sich vom Bild abhebt. */
#foto-bearbeiten-container {
  height: 60vh;
  background: var(--graphit);
  border-radius: var(--radius);
  overflow: hidden;
}
#foto-bearbeiten-bild { display: block; max-width: 100%; }

/* Neuanlage-Formular: kleine Vorschau des vorgemerkten Referenzfotos. */
.foto-vormerkung {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 0; font-size: 0.85rem; color: var(--text-leise);
}
.foto-vormerkung img {
  width: 40px; height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

.zeile .haupt { flex: 1; min-width: 0; }
.zeile .titel {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zeile .unter {
  font-size: 0.82rem; color: var(--text-leise);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zeile .wert {
  flex: none;
  font-family: var(--schrift-daten);
  font-weight: 700; font-size: 0.95rem;
  text-align: right;
}

/* Aktionen-Knopf am rechten Rand einer Zeile (z.B. Lagerorte) - <span>
   statt zweiter <button>, damit kein Button im Button verschachtelt
   wird; Klick-Ziel wird per event.target unterschieden. Buendelt
   Bearbeiten/Verschieben/Loeschen hinter einem Bodenblatt statt drei
   einzelner Icons (zu eng fuer Name+Beschreibung auf schmalen Handys). */
.zeile .zeile-aktionen {
  flex: none;
  width: 32px; height: 32px;
  margin-left: 4px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 1.2rem; font-weight: 700;
  color: var(--text-leise);
}

/* Statuskante links - Ampel zusaetzlich zum Text, nicht nur Farbe */
.zeile[data-ampel] { border-left: 5px solid transparent; }
.zeile[data-ampel="rot"]   { border-left-color: var(--rot); }
.zeile[data-ampel="gelb"]  { border-left-color: var(--bernstein); }
.zeile[data-ampel="gruen"] { border-left-color: var(--gruen); }

.leer {
  padding: 20px 16px;
  color: var(--text-leise);
  border-top: var(--rand); border-bottom: var(--rand);
  background: var(--karte);
  font-size: 0.9rem;
}
.leer b { display: block; color: var(--text); font-size: 1rem; margin-bottom: 2px; }

/* ============================================================
   Bedienelemente - alles >= 56px, handschuhtauglich
   ============================================================ */
button, .knopf {
  font: inherit; font-weight: 700;
  min-height: var(--tap);
  padding: 14px 18px;
  border-radius: var(--radius);
  border: none;
  background: var(--petrol); color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
button:active { background: var(--petrol-tief); }
button.leise {
  background: var(--karte); color: var(--text);
  border: var(--rand);
}
button.gefahr { background: var(--rot); }
button:focus-visible, input:focus-visible {
  outline: 3px solid var(--petrol-hell); outline-offset: 2px;
}

input, select, textarea {
  font: inherit;
  width: 100%;
  min-height: var(--tap);
  padding: 14px;
  background: var(--karte);
  color: var(--text);
  border: var(--rand);
  border-radius: var(--radius);
  margin: 6px 0;
}
input::placeholder, textarea::placeholder { color: var(--text-leise); }
textarea { resize: vertical; }

.knopfreihe { display: flex; gap: 10px; }
.knopfreihe > * { flex: 1; }
.breit { width: 100%; }

/* Unauffaellige Alternative zum Block-Knopf, fuer nachrangige Optionen */
.text-link {
  display: inline; min-height: 0;
  background: none; border: none; padding: 0; margin: 8px 0 0;
  font-size: 0.82rem; font-weight: 500; color: var(--text-leise);
  text-decoration: underline; text-underline-offset: 2px;
}
.text-link:active { background: none; color: var(--petrol); }

/* Mengensteller: grosse Flaechen, Wert in der Mitte */
.steller {
  display: grid; grid-template-columns: 84px 1fr 84px;
  gap: 10px; align-items: stretch;
  margin: 18px 0;
}
.steller button { font-size: 1.7rem; min-height: 76px; padding: 0; }
.steller .anzeige {
  display: grid; place-content: center;
  background: var(--karte); border: var(--rand); border-radius: var(--radius);
  color: var(--text);
  font-family: var(--schrift-daten);
  font-size: 1.9rem; font-weight: 700;
}
.steller .anzeige small {
  display: block; text-align: center;
  font-size: 0.72rem; font-weight: 500; color: var(--text-leise);
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ============================================================
   Untere Navigationsleiste - alles in der Daumenzone
   ============================================================ */
.tableiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: end;
  background: var(--leiste);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Handy: nur die 4 festen Punkte + "Mehr" - max. 5 sichtbar, nie scrollbar */
.tableiste .nur-desktop { display: none; }
.tableiste button {
  background: none; color: var(--leiste-text);
  flex-direction: column; gap: 3px;
  min-height: 62px; padding: 8px 4px;
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0.6; border-radius: 0;
}
.tableiste button .zeichen { font-size: 1.3rem; line-height: 1; }
.tableiste button.aktiv { opacity: 1; color: var(--petrol-hell); }
.tableiste button:active { background: rgba(255,255,255,0.08); }

/* Scan-Knopf: erhoehte Mitte, wie der Ausloeser der Kamera-App */
.tableiste .scan {
  background: var(--petrol); color: #fff;
  opacity: 1; border-radius: 50%;
  width: 68px; height: 68px; min-height: 68px;
  margin: 0 auto 10px; padding: 0;
  box-shadow: 0 0 0 5px var(--leiste);
  transform: translateY(-14px);
  font-size: 0.58rem;
}
.tableiste .scan .zeichen { font-size: 1.55rem; }
.tableiste .scan:active { background: var(--petrol-tief); }

/* ============================================================
   Soft Alert - Hinweis ohne Bedienunterbrechung
   (Scanner bleibt aktiv, kein Wegklicken noetig)
   ============================================================ */
.hinweis {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: var(--graphit); color: #E6E9E8;
  border-left: 5px solid var(--petrol-hell);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
}
.hinweis.sichtbar { opacity: 1; transform: translateY(0); }
.hinweis[data-art="fehler"]  { border-left-color: var(--rot); }
.hinweis[data-art="warnung"] { border-left-color: var(--bernstein); }
.hinweis[data-art="erfolg"]  { border-left-color: var(--gruen); }

/* ============================================================
   Bodenblatt - Entscheidungen in Daumenreichweite
   ============================================================ */
.blatt-hintergrund {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10,14,16,0.55);
  display: none;
}
.blatt-hintergrund.offen { display: block; }

.blatt {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: var(--karte);
  border-top-left-radius: var(--radius-gross);
  border-top-right-radius: var(--radius-gross);
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
  max-height: 82dvh; overflow-y: auto;
}
.blatt.offen { transform: translateY(0); }
.blatt .griff {
  width: 42px; height: 4px; border-radius: 2px;
  background: var(--stahl); margin: -8px auto 16px;
}
.blatt h2 { margin: 0 0 4px; font-size: 1.15rem; }
.blatt p  { margin: 0 0 18px; color: var(--text-leise); font-size: 0.92rem; }
.blatt .knopfreihe { flex-direction: column; }

.protokoll {
  max-height: 45vh; overflow-y: auto;
  font-family: var(--schrift-daten); font-size: 0.78rem; line-height: 1.5;
  background: var(--flaeche); border: var(--rand); border-radius: var(--radius);
  padding: 10px; margin-bottom: 16px;
  white-space: pre-wrap; word-break: break-word;
}
.protokoll-fehler { color: var(--rot); }

/* ============================================================
   Assistent
   ============================================================ */
.verlauf {
  padding: 16px 16px 8px;
  min-height: 46dvh;
  display: flex; flex-direction: column; gap: 10px;
}
.blase {
  padding: 12px 14px; border-radius: var(--radius-gross);
  max-width: 84%; font-size: 0.95rem;
}
.blase.ich  { align-self: flex-end; background: var(--petrol); color: #fff;
              border-bottom-right-radius: 2px; }
.blase.hier { align-self: flex-start; background: var(--karte);
              border: var(--rand); border-bottom-left-radius: 2px; }
.blase.tippt { color: var(--text-leise); font-style: italic; }

.eingabeleiste {
  position: fixed; left: 0; right: 0;
  bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 8px; padding: 10px 12px;
  background: var(--flaeche); border-top: var(--rand);
  z-index: 25;
}
.eingabeleiste input { margin: 0; }
.eingabeleiste button { flex: none; width: var(--tap); padding: 0; font-size: 1.25rem; }

/* Vorschlaege statt leerem Feld */
.vorschlaege { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 12px; }
.vorschlaege button {
  flex: none; min-height: 44px; padding: 10px 14px;
  background: var(--karte); color: var(--text); border: var(--rand);
  font-size: 0.85rem; font-weight: 500;
}

/* ============================================================
   Scannen
   ============================================================ */
.scanfeld {
  position: relative;
  background: #000; border-radius: var(--radius);
  overflow: hidden; margin: 0 16px 12px;
  aspect-ratio: 4 / 3;
  display: none;
}
.scanfeld.aktiv { display: block; }
.scanfeld video { width: 100%; height: 100%; object-fit: cover; }
.scanfeld .visier {
  position: absolute; inset: 18% 12%;
  border: 3px solid rgba(255,255,255,0.85);
  border-radius: var(--radius);
}
.scanfeld .visier::after {
  content: ""; position: absolute; left: 0; right: 0; top: 4%;
  height: 2px; background: #0E8A86;
  animation: suchen 2.4s ease-in-out infinite;
}
@keyframes suchen { 50% { top: 96%; } }

.scanhinweis {
  margin: 0 16px 12px;
  padding: 14px 16px;
  background: var(--karte); border: var(--rand); border-radius: var(--radius);
  font-size: 0.88rem; color: var(--text-leise);
}
.scanhinweis b { color: var(--text); }

/* ============================================================
   Anmeldung
   ============================================================ */
.anmeldung {
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 24px;
}
.anmeldung .marke {
  font-family: var(--schrift-daten);
  font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--text-leise); margin-bottom: 6px;
}
.anmeldung h1 {
  margin: 0 0 28px;
  font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em;
}
.anmeldung h1 span { color: var(--petrol); }

/* ============================================================
   Einstellungen
   ============================================================ */
.schemawahl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.schemawahl button {
  flex-direction: column; gap: 6px; font-size: 0.72rem;
  background: var(--karte); color: var(--text); border: var(--rand);
}
.schemawahl button[aria-pressed="true"] {
  border: 2px solid var(--petrol); color: var(--petrol);
}
.reihe {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: var(--tap);
  padding: 12px 16px; background: var(--karte);
  border-top: var(--rand);
}
.reihe:last-of-type { border-bottom: var(--rand); }
.reihe .wert { font-family: var(--schrift-daten); color: var(--text-leise); }

/* ============================================================
   Grosse Schirme: Navigation seitlich statt unten
   ============================================================ */
@media (min-width: 900px) {
  body { font-size: 16px; }
  .tableiste {
    top: 0; bottom: auto; right: auto; width: 116px; height: 100dvh;
    grid-template-columns: 1fr; grid-template-rows: repeat(6, auto);
    align-content: start; gap: 6px; padding-top: 24px;
  }
  /* PC: alle Punkte einzeln sichtbar, kein "Mehr"-Umweg noetig */
  .tableiste .nur-desktop { display: inline-flex; }
  .tableiste .nur-mobil { display: none; }
  /* [hidden] hat als reines Attribut-Selektor weniger Spezifitaet als obige
     Klassen-Regel und wuerde sonst trotz hidden-Attribut ueberstimmt (siehe
     knopf-nav-aufgaben-vorlagen, per JS admin-abhaengig ein-/ausgeblendet). */
  .tableiste [hidden] { display: none !important; }
  .tableiste .scan { transform: none; margin: 12px auto; }
  .kopf, .ansicht, .eingabeleiste { margin-left: 116px; }
  .eingabeleiste { bottom: 0; }
  .ansicht { padding-bottom: 96px; }
  .inhalt, .liste, .abschnitt, .verlauf { max-width: 780px; }
  .hinweis { left: auto; right: 24px; bottom: 24px; max-width: 420px; }
  .blatt { left: 50%; right: auto; transform: translate(-50%, 110%); width: 520px;
           border-radius: var(--radius-gross); bottom: 24px; }
  .blatt.offen { transform: translate(-50%, 0); }
}

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