/* SG Köln-Worringen Look (Blau/Gelb) - Pendant zu kiosk/ui/style.py,
   fürs Tablet auf große Touch-Ziele und eine responsive Kachel-Ansicht
   angepasst. */

:root {
  /* Erzwingt helle native Steuerelemente (Auswahllisten, Kontrollkaestchen,
     Bildlaufleisten, ...), unabhaengig vom Dunkelmodus des Systems/Browsers -
     das Pendant zur QPalette in kiosk/ui/style.py. Ohne diese Zeile
     uebernimmt der Browser bei aktiviertem System-Dunkelmodus fuer solche
     Elemente automatisch dunkle Standardfarben, obwohl diese App gar keinen
     Dunkelmodus vorsieht (siehe auch die Farbangaben unten, die genau
     deshalb ueberall explizit gesetzt werden). */
  color-scheme: light;

  --blau: #2f55a8;
  --blau-dunkel: #1c3a75;
  --blau-hell: #e8edf9;
  --gelb: #fbf315;
  --gelb-dunkel: #e6de00;
  --grau-hintergrund: #f3f4f8;
  --grau-rand: #d8dbe3;
  --text-dunkel: #20242c;
  --rot: #b3261e;
  --gruen: #14632c;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--grau-hintergrund);
  color: var(--text-dunkel);
  font-family: "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
  font-size: 16px;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

button, input {
  font-family: inherit;
  font-size: inherit;
}

/* Runde 35: "user-select: none" oben auf <html, body> (bewusst gesetzt,
   damit beim Antippen der Kassen-Oberflaeche nichts versehentlich als Text
   markiert wird) wird von Formularfeldern geerbt - auf manchen
   Android-Tablets/WebViews fuehrt das dazu, dass zwar die Bildschirm-
   tastatur (inkl. Zahlenblock bei inputmode="decimal") erscheint, Tippen
   aber nicht im Feld ankommt (beobachtet beim "Gegeben"-Feld im
   Bezahlen-Dialog, betrifft aber alle Eingabefelder gleichermassen - z.B.
   Kassensturz "Gezaehlt", Schiedsrichter/Einzahlen/Ausgaben/Entnahmen
   "Betrag"). Fuer alle Eingabe-Elemente (auch Textarea/Select) wird die
   normale Text-Interaktion deshalb ausdruecklich wieder erlaubt.
   -webkit-user-select bleibt fuer Safari/aeltere WebViews wichtig, auch
   wenn die App primaer auf Android/Chrome zielt. */
input, textarea, select {
  -webkit-user-select: text;
  user-select: text;
}

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

/* -------------------- Kopfleiste -------------------- */
#kopfleiste {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--blau);
  color: white;
  padding: 10px 16px;
  flex-wrap: wrap;
}
#kopfleiste img.logo {
  height: 34px;
}
#kopfleiste .titel {
  font-size: 16px;
  font-weight: 700;
}
#kopfleiste .app-version {
  font-size: 12px;
  opacity: 0.85;
}
#kopfleiste select {
  background: white;
  color: var(--text-dunkel);
  border: none;
  border-radius: 6px;
  padding: 8px 10px;
  font-weight: 600;
}
#kopfleiste .spacer {
  flex: 1;
}
#kopfleiste .sync-status {
  font-weight: 600;
  font-size: 13px;
}
#kopfleiste button.btn-update-verfuegbar {
  background: var(--gelb);
  border: 2px solid var(--gelb-dunkel);
  color: var(--text-dunkel);
  font-weight: 700;
}
#kopfleiste button.btn-beenden {
  color: var(--rot);
  font-weight: 700;
}

button.btn {
  background: white;
  color: var(--blau-dunkel);
  border: 1px solid var(--grau-rand);
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
}
#kopfleiste button.btn {
  border: none;
}
button.btn:active {
  background: var(--gelb);
  color: var(--text-dunkel);
}
button.btn:disabled {
  opacity: 0.5;
  cursor: default;
}
button.btn-primaer {
  background: var(--blau);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 16px;
  font-size: 18px;
  font-weight: 700;
}
button.btn-primaer:active {
  background: var(--blau-dunkel);
}

/* -------------------- Tabs -------------------- */
#tabs {
  display: flex;
  gap: 4px;
  background: white;
  border-bottom: 1px solid var(--grau-rand);
  padding: 8px 12px 0 12px;
}
#tabs button {
  background: transparent;
  border: none;
  padding: 10px 20px;
  font-weight: 700;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  color: var(--text-dunkel);
  cursor: pointer;
}
#tabs button.aktiv {
  background: var(--blau);
  color: white;
}

/* Unter-Reiterleiste "Mehr" (Runde 30): buendelt die selteneren
   Ansichten (Schiedsrichter/Einzahlen/Ausgaben/Entnahmen/
   Nachbestellungen/Termine/Feedback), etwas dezenter als die
   Haupt-Reiterleiste, damit der Unterschied zwischen Haupt- und
   Unter-Ebene erkennbar bleibt. */
#mehr-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--grau-hintergrund);
  border-bottom: 1px solid var(--grau-rand);
  padding: 6px 12px;
}
#mehr-tabs button {
  background: transparent;
  border: none;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  color: var(--text-dunkel);
  cursor: pointer;
}
#mehr-tabs button.aktiv {
  background: var(--blau);
  color: white;
}

#ansicht {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* -------------------- Kassenvorschlag-Banner -------------------- */
.kassenvorschlag-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--gelb);
  color: var(--text-dunkel);
  padding: 10px 16px;
  flex-wrap: wrap;
}
.kassenvorschlag-banner.versteckt {
  display: none;
}
.kassenvorschlag-banner span {
  font-weight: 700;
  flex: 1;
}
.kassenvorschlag-aktionen {
  display: flex;
  gap: 8px;
}

.karte {
  background: white;
  border: 1px solid var(--grau-rand);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

/* -------------------- Login -------------------- */
#login-view {
  max-width: 480px;
  margin: 24px auto;
  text-align: center;
}
#login-view img.logo {
  height: 64px;
  margin-bottom: 8px;
}
#login-view h1 {
  color: var(--blau-dunkel);
  font-size: 20px;
  margin: 0 0 20px 0;
}
.nutzer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.nutzer-grid button {
  background: white;
  color: var(--text-dunkel);
  border: 2px solid var(--grau-rand);
  border-radius: 12px;
  padding: 18px 8px;
  font-size: 16px;
  font-weight: 700;
  min-height: 72px;
  cursor: pointer;
}
.nutzer-grid button:active {
  background: var(--blau-hell);
  border-color: var(--blau);
}
.pin-anzeige {
  font-size: 32px;
  letter-spacing: 10px;
  padding: 12px;
  min-height: 48px;
}
.pin-fehler {
  color: var(--rot);
  font-weight: 700;
  min-height: 24px;
}
.tastatur {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}
.tastatur button {
  padding: 20px 8px;
  font-size: 20px;
  border-radius: 10px;
  border: 1px solid var(--grau-rand);
  background: white;
  color: var(--text-dunkel);
  cursor: pointer;
}
.tastatur button:active {
  background: var(--blau-hell);
}
.tastatur button.ok {
  background: var(--blau);
  color: white;
  border: none;
}

/* -------------------- Verkauf -------------------- */
#verkauf-view {
  display: flex;
  gap: 16px;
  height: 100%;
}
#produkt-spalte {
  flex: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#kategorie-umschalter {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.kat-umschalt-btn {
  flex: 1;
  border: 2px solid var(--grau-rand);
  background: white;
  color: var(--text-dunkel);
  border-radius: 8px;
  padding: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.kat-umschalt-btn.aktiv {
  background: var(--blau);
  border-color: var(--blau-dunkel);
  color: white;
}
#produkt-grid {
  flex: 1;
  display: grid;
  /* Runde 39: Kacheln um 10% verkleinert (119px statt 132px Mindestbreite,
     Schrift/Innenabstand proportional angepasst), auf Nutzerwunsch
     ("Kacheln generell 10% verkleinern") - zusammen mit der neuen
     Getraenke-/Speisen-Umschaltung oben passen dadurch spuerbar mehr
     Kacheln ohne Scrollen auf den Bildschirm. */
  grid-template-columns: repeat(auto-fill, minmax(119px, 1fr));
  gap: 7px;
  align-content: start;
  overflow-y: auto;
}
.produkt-kachel {
  background: white;
  color: var(--text-dunkel);
  border: 2px solid var(--grau-rand);
  border-radius: 13px;
  padding: 7px;
  font-weight: 700;
  min-height: 83px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.produkt-kachel:active {
  background: var(--gelb);
  border-color: var(--gelb-dunkel);
}
.produkt-kachel-name {
  font-size: 12px;
  line-height: 1.15;
}
.produkt-kachel-preis {
  font-size: 13px;
}
.kategorie-titel {
  grid-column: 1 / -1;
  color: var(--blau-dunkel);
  font-weight: 700;
  padding-top: 6px;
}

#warenkorb-spalte {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 260px;
}
#warenkorb-liste {
  flex: 1;
  overflow-y: auto;
  background: white;
  border: 1px solid var(--grau-rand);
  border-radius: 8px;
}
.warenkorb-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid #eceef2;
}
.warenkorb-zeile .name {
  flex: 1;
}
.warenkorb-zeile button.mini {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--grau-rand);
  background: white;
  font-weight: 700;
}
/* Runde 38 (Feedback #2): Checkbox "Marke vorhanden" zum Pfand-Erlass je
   Warenkorb-Zeile. */
.pfand-erlass-feld {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-dunkel);
  white-space: nowrap;
}
.pfand-erlass-feld input[type="checkbox"] {
  width: 18px;
  height: 18px;
}
#summe {
  font-size: 22px;
  font-weight: 700;
  color: var(--blau-dunkel);
  text-align: right;
  padding: 10px 4px;
}
/* Runde 59: Aktionsknoepfe unter dem Warenkorb als 2er-Raster. Der
   Helferpreis gilt fuer den naechsten Artikel und gehoert damit ueber die
   volle Breite, damit er nicht wie eine der paarweisen Aktionen daneben
   aussieht - die vier uebrigen stehen paarweise (Pfand 2,00/1,00 €,
   Kaffee/Tee). Die margin-bottom der einzelnen Knoepfe entfaellt hier, das
   Raster setzt die Abstaende ueber "gap". */
#aktions-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
#aktions-raster .helferpreis-btn {
  grid-column: 1 / -1;
}
#aktions-raster .btn {
  margin-bottom: 0;
}

.helferpreis-btn {
  width: 100%;
  margin-bottom: 10px;
}
.helferpreis-btn.aktiv {
  background: var(--gelb);
  border: 2px solid var(--gelb-dunkel);
}
/* Kein Umschalter mehr, sondern eine Sofort-Aktion (ein Antippen bucht
   direkt eine pauschale Rückgabe) - deshalb dauerhaft rot statt nur im
   .aktiv-Zustand. Bewusst "button.pfand-rueckgabe-btn" (Element + Klasse)
   statt nur ".pfand-rueckgabe-btn": eine reine Klassen-Selektor-Regel hat
   eine NIEDRIGERE CSS-Spezifität als "button.btn" oben (Element + Klasse)
   und wurde von dessen weißem Hintergrund immer überschrieben, unabhängig
   von der Reihenfolge im Stylesheet - der Knopf blieb dadurch weiß statt
   rot. Mit gleicher Spezifität wie "button.btn" gewinnt diese spätere
   Regel jetzt korrekt per Cascade-Reihenfolge (genau wie bei
   "button.btn-primaer" oben). */
button.pfand-rueckgabe-btn {
  width: 100%;
  margin-bottom: 10px;
  background: var(--rot);
  border: 2px solid var(--rot);
  color: white;
}

/* -------------------- Tabellen (Storno/Kassensturz) -------------------- */
table.liste {
  width: 100%;
  border-collapse: collapse;
  background: white;
}
table.liste th {
  background: var(--blau);
  color: white;
  padding: 8px;
  text-align: left;
}
table.liste td {
  padding: 8px;
  border-bottom: 1px solid #eceef2;
}
table.liste tr.storniert td {
  color: #9aa0ac;
}
table.liste button.btn {
  padding: 6px 10px;
}
table.liste td.fb-status-erledigt {
  color: #1f7a3d;
  font-weight: 700;
}
table.liste td.fb-status-abgelehnt {
  color: #8a8f98;
}
table.liste td.fb-status-in_bearbeitung {
  color: var(--blau-dunkel);
  font-weight: 700;
}

/* Runde 46: Summenzeile je Kasse in der Monatsabrechnung (unter den beiden
   Warengruppen-Zeilen Getränke/Speisen) - hebt sich leicht ab, damit man
   Einzelzeile und Summe im Ausdruck auseinanderhalten kann. */
tr.summe td {
  background: #eef1f8;
}

/* -------------------- Kassensturz -------------------- */
.kennzahl-zeile {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #eceef2;
}
.kennzahl-zeile.gesamt {
  font-weight: 700;
  border-bottom: none;
  border-top: 2px solid var(--blau);
  padding-top: 10px;
}
/* Runde 37: kleine, rein informative Aufteilung "Jugend: X € · Senioren: Y €"
   direkt unter einer kennzahl-zeile im kombinierten Kassensturz - zeigt,
   wie sich der Gesamtbetrag auf die beiden Kassen aufteilt, ohne die
   Haupt-Kennzahl optisch zu ueberladen. */
.kennzahl-aufteilung {
  text-align: right;
  color: #666;
  font-size: 12px;
  margin: -4px 0 4px 0;
}
.kennzahl-aufteilung:empty {
  margin: 0;
}
/* .betrag wird auf <input>-, <select>- (Team-Auswahl bei den Terminen) UND
   <textarea>-Elementen (Feedback-Text/-Antwort) verwendet - alle drei Tags
   brauchen dieselbe explizite Hell-Faerbung, sonst greift bei <select>/
   <textarea> sonst nichts (der Selektor unten war vorher auf "input.betrag"
   beschraenkt und traf weder <select> noch <textarea>). */
input.betrag,
select.betrag,
textarea.betrag {
  width: 100%;
  padding: 10px;
  font-size: 18px;
  background: white;
  color: var(--text-dunkel);
  border: 1px solid var(--grau-rand);
  border-radius: 6px;
  margin: 6px 0 14px 0;
  font-family: inherit;
  resize: vertical;
}

/* -------------------- Overlay / Modal -------------------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}
.overlay.versteckt {
  display: none;
}
.modal {
  background: white;
  border-radius: 12px;
  padding: 20px;
  max-width: 420px;
  width: 100%;
}
.modal h2 {
  margin-top: 0;
  color: var(--blau-dunkel);
  font-size: 17px;
}
.modal .aktionen {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

/* Hilfe-Dialog: breiter und scrollbar, da deutlich mehr Text als die
   uebrigen (kurzen) Modals. */
.modal.hilfe-modal {
  max-width: 640px;
}
.hilfe-inhalt {
  max-height: 65vh;
  overflow-y: auto;
  padding-right: 4px;
}
.hilfe-inhalt h3 {
  color: var(--blau-dunkel);
  font-size: 16px;
  margin: 16px 0 4px 0;
}
.hilfe-inhalt h3:first-child {
  margin-top: 0;
}
.hilfe-inhalt p {
  margin: 0 0 4px 0;
  line-height: 1.4;
}

.hinweis {
  color: #666;
  font-size: 14px;
}

/* -------------------- Auswertung (Runde 43) -------------------- */
/* Zwei Kasse-Kennzahlen-Karten nebeneinander (Jugend/Senioren), fallen auf
   schmalen Bildschirmen automatisch untereinander - siehe main.js
   renderAuswertungKennzahlen(). */
.zwei-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.zwei-spalten .karte {
  margin-bottom: 0;
}

/* Druckansicht (Bestand/Monatsabrechnung, siehe main.js druckenOeffnen()) -
   wird in einem eigenen Browser-Fenster/-Tab verwendet, nicht in dieser
   App selbst, daher hier als eigener, einfacher Block statt @media print. */
.druck-seite {
  font-family: "Segoe UI", Arial, sans-serif;
  color: #20242c;
  padding: 24px;
}
.druck-seite h1 {
  color: #1c3a75;
  font-size: 20px;
  margin-bottom: 4px;
}
.druck-seite h2 {
  color: #1c3a75;
  font-size: 15px;
  margin: 20px 0 6px 0;
}
.druck-seite table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}
.druck-seite th, .druck-seite td {
  border: 1px solid #d8dbe3;
  padding: 4px 8px;
  text-align: left;
  font-size: 13px;
}
.druck-seite th {
  background: #e8edf9;
}
.druck-seite .gesamt-zeile td {
  font-weight: 700;
  border-top: 2px solid #1c3a75;
}