/* ===========================================================================
   Gastrokasse -- Oberfläche

   Auslegung auf ein 10-Zoll-Tablet im Querformat, das mit dem Daumen bedient
   wird: Mindestgröße jeder Tastfläche 44 px, keine Hover-Abhängigkeit, hoher
   Kontrast für Räume mit gedimmtem Licht. Dunkles Grundschema, weil die Kasse
   im Gastraum sonst als Lampe wirkt.
   =========================================================================== */

:root {
  --bg: #11161b;
  --panel: #1a222a;
  --panel-2: #212c35;
  --tile: #26333e;
  --tile-hi: #2f3f4c;
  --line: #33424f;

  --text: #e9eff4;
  --text-dim: #9aabb8;
  --text-mute: #6c7f8d;

  --accent: #f0902a;
  --accent-dark: #b56818;
  --ok: #34a76a;
  --info: #3d8fd0;
  --warn: #d9a13c;
  --danger: #cf4f4f;

  --radius: 10px;
  --gap: 8px;
  --topbar-h: 56px;
  --statusbar-h: 30px;
  --actionbar-h: 72px;

  --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------------------------------------------------------------------------
   Helles Farbschema

   Nicht in der App wählbar, sondern pro Gerät im Verwaltungs-Backend gesetzt:
   das Tablet auf der Terrasse steht in der Sonne und braucht hell, die Theke
   abends dunkel -- und niemand im Gastraum soll daran drehen.

   Bewusst kein reines Weiß: bei acht Stunden Schicht unter Deckenlicht ist ein
   leicht abgesenkter Grundton angenehmer und die Kacheln zeichnen sich besser
   ab. Die Statusfarben bleiben in beiden Schemata dieselben Signale, nur in
   heller Fassung deutlich gesättigter, weil sie sonst auf hellem Grund
   verschwinden.
   --------------------------------------------------------------------------- */

:root[data-theme='light'] {
  --bg: #e8ecf0;
  --panel: #f7f9fb;
  --panel-2: #eef2f5;
  --tile: #ffffff;
  --tile-hi: #dde5ec;
  --line: #c3cdd6;

  --text: #17202a;
  --text-dim: #4a5b6b;
  --text-mute: #6f8296;

  --accent: #d97706;
  --accent-dark: #a35a05;
  --ok: #1c7a4a;
  --info: #1d6fa5;
  --warn: #a86a08;
  --danger: #b3352f;
}

:root[data-theme='light'] .btn--ok { color: #ffffff; }
:root[data-theme='light'] .btn--danger { color: #ffffff; }
:root[data-theme='light'] .btn--primary { color: #24160a; }
:root[data-theme='light'] .btn--pad-warn { background: #f0dede; }

/* Statusfarben der Tischkacheln: auf hellem Grund braucht es Fläche mit
   Weißschrift, sonst sind die Zustände nicht auf einen Blick zu trennen. */
:root[data-theme='light'] .table-tile--free { background-color: #f2f5f8; color: var(--text-mute); }
:root[data-theme='light'] .table-tile--busy { background-color: #cfe0ee; border-color: #6f9dc0; }
:root[data-theme='light'] .table-tile--unfired { background-color: #f7e4bf; border-color: var(--warn); }
:root[data-theme='light'] .table-tile--ready { background-color: #bfe6cf; border-color: var(--ok); }
:root[data-theme='light'] .table-tile--late { background-color: #f4cdcb; border-color: var(--danger); }

:root[data-theme='light'] .line__badge--new { background: #f7e4bf; color: #4a3406; }
:root[data-theme='light'] .line__badge--fired { background: #cfe0ee; color: #123650; }
:root[data-theme='light'] .line__badge--prepared { background: #bfe6cf; color: #0d4429; }
:root[data-theme='light'] .line__badge--served { background: #dfe6ec; color: var(--text-mute); }

:root[data-theme='light'] .srow--s3 { background: #f8e6e5; }
:root[data-theme='light'] .toast--error { background: #f8e6e5; }
:root[data-theme='light'] .toast--ok { background: #dcefe4; }
:root[data-theme='light'] .overlay { background: rgba(30, 40, 50, 0.45); }

:root[data-theme='light'] .ticket__course { color: #24160a; }

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

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  /* Kein Textmarkieren durch Wischen -- das ist eine Kasse, kein Dokument. */
  user-select: none;
  overscroll-behavior: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* --- Grundgerüst ---------------------------------------------------------- */

#app {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr var(--statusbar-h);
  height: 100vh;
  height: 100dvh;
}

.topbar {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 0 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.topbar__venue {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.topbar__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-dim);
}

.topbar__spacer {
  flex: 1;
}

.topbar__staff {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--tile);
  border-radius: 999px;
  font-weight: 600;
}

.topbar__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.main {
  overflow: hidden;
  position: relative;
}

/* Für Ansichten ohne Topbar/Statusbar (Anmeldung): ohne die beiden
   Geschwister würde das Grid-Zeilenraster von #app dieses einzelne Kind sonst
   in die erste Zeile (Kopfzeilenhöhe) einsortieren statt über die volle
   Höhe zu strecken. */
.main--solo {
  grid-row: 1 / -1;
}

.statusbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 10px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-mute);
}

.statusbar__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tile);
  font-weight: 600;
}

.statusbar__pill--online { color: #8fe3b4; }
.statusbar__pill--offline { color: #ffc9c9; background: #4a2626; }
.statusbar__pill--pending { color: #ffe0a8; background: #4a3a1c; }

/* --- Schaltflächen -------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Plastische Tasten

   Am Tablet fehlt der Widerstand einer echten Taste. Ein sichtbarer Sockel und
   ein Eindrücken beim Antippen ersetzen ihn: der Service sieht, dass der Griff
   angekommen ist, ohne auf eine Bestätigung zu warten. Das ist kein Schmuck --
   in einer lauten Küche ist die Rückmeldung durchs Auge die einzige, die bleibt.

   Umgesetzt mit einem harten Schatten als Sockel plus weichem Streuschatten.
   --press-Höhe ist die Sockeltiefe; beim Drücken wandert die Taste genau um
   diesen Betrag nach unten und der Sockel verschwindet -- dadurch bleibt die
   Grundfläche im Layout unverändert und nichts springt.

   Farben als rgba, damit derselbe Effekt in beiden Farbschemata trägt.
   --------------------------------------------------------------------------- */
:root {
  --press: 3px;
  --sockel: rgba(0, 0, 0, 0.45);
  --streu: rgba(0, 0, 0, 0.28);
  --glanz: rgba(255, 255, 255, 0.11);
  --tiefe: rgba(0, 0, 0, 0.12);
}

:root[data-theme='light'] {
  --sockel: rgba(31, 45, 58, 0.28);
  --streu: rgba(31, 45, 58, 0.16);
  --glanz: rgba(255, 255, 255, 0.75);
  --tiefe: rgba(31, 45, 58, 0.07);
}

.btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Verlauf über die Grundfarbe: oben heller, unten dunkler -- das lässt die
     Fläche gewölbt erscheinen, ohne die Farbe selbst festzulegen. */
  background-color: var(--tile);
  background-image: linear-gradient(180deg, var(--glanz) 0%, transparent 45%, var(--tiefe) 100%);
  box-shadow: 0 var(--press) 0 var(--sockel), 0 calc(var(--press) + 2px) 6px var(--streu);
  cursor: pointer;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: transform 70ms ease, box-shadow 70ms ease, filter 90ms ease;
}

.btn:active {
  /* Genau die Sockeltiefe nach unten: die Taste sitzt jetzt auf dem Untergrund. */
  transform: translateY(var(--press));
  box-shadow: 0 0 0 var(--sockel), inset 0 2px 4px rgba(0, 0, 0, 0.25);
  filter: brightness(0.94);
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn.is-disabled {
  opacity: 0.38;
  cursor: default;
  /* Ohne Sockel: eine gesperrte Taste soll nicht drückbar aussehen. */
  box-shadow: none;
  background-image: none;
}
.btn--wide { width: 100%; }
.btn__sub { font-size: 11px; font-weight: 500; color: var(--text-mute); }

.btn--primary { background: var(--accent); border-color: var(--accent-dark); color: #241203; }
.btn--primary .btn__sub { color: #4a2a08; }
.btn--ok { background: var(--ok); border-color: #1f7a4a; color: #04160c; }
.btn--danger { background: var(--danger); border-color: #9b3535; color: #1c0505; }
.btn--ghost { background: transparent; }
.btn--pad { font-size: 22px; min-height: 58px; }
.btn--pad-warn { font-size: 20px; min-height: 58px; background: #43323f; }

/* --- Anmeldung ------------------------------------------------------------
   Nur ein Ziffernblock, mittig. Keine Personenauswahl, kein Textfeld: die PIN
   identifiziert die Person, und eine eingeblendete Systemtastatur verdeckt am
   Tablet die halbe Oberfläche.
   ------------------------------------------------------------------------- */

.login-pin {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 16px;
  overflow: auto;
}

.login-pin__box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, 100%);
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.login-pin__venue {
  font-size: 20px;
  font-weight: 800;
  text-align: center;
}

.login-pin__hint {
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
}

.login-pin__display {
  display: grid;
  place-items: center;
  height: 64px;
  background: var(--bg);
  border-radius: var(--radius);
  font-size: 32px;
  letter-spacing: 0.32em;
  /* Ziffern gleich breit, damit die Punkte beim Tippen nicht wandern. */
  font-variant-numeric: tabular-nums;
}

.login-pin__display.is-busy {
  font-size: 18px;
  letter-spacing: normal;
  color: var(--text-dim);
}

.login-pin__placeholder { color: var(--text-mute); }

/* 3 x 4 Raster: 1-9, dann Löschen, 0, OK. */
.login-pin__pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.login-pin__error {
  padding: 8px 10px;
  border-radius: 8px;
  background: #4a2020;
  color: #ffc9c9;
  font-size: 13px;
  text-align: center;
}

:root[data-theme='light'] .login-pin__error { background: #f8e6e5; color: #7a2420; }

.login__staff {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 92px;
  gap: 10px;
  overflow-y: auto;
  align-content: start;
}

.staff-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--tile);
  cursor: pointer;
  font-weight: 700;
}

.staff-tile.is-selected { border-color: var(--accent); background: var(--tile-hi); }
.staff-tile__badge {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #10161b;
  font-size: 14px;
}
.staff-tile__name { font-size: 13px; color: var(--text-dim); font-weight: 600; }

.login__pin {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--panel);
  border-radius: var(--radius);
}

.pin-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 58px;
  background: var(--bg);
  border-radius: var(--radius);
  font-size: 30px;
  letter-spacing: 0.3em;
}

.numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* --- Tischplan ------------------------------------------------------------ */

.floor {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}

.tabs {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  overflow-x: auto;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.tab {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background-color: var(--tile);
  background-image: linear-gradient(180deg, var(--glanz) 0%, transparent 50%, var(--tiefe) 100%);
  box-shadow: 0 2px 0 var(--sockel), 0 3px 5px var(--streu);
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 70ms ease, box-shadow 70ms ease;
}

.tab:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--sockel), inset 0 2px 4px rgba(0, 0, 0, 0.22);
}

/* Der gewählte Reiter ist eingedrückt: er zeigt einen Zustand, keine Aktion. */
.tab.is-active {
  background-color: var(--accent);
  border-color: var(--accent-dark);
  color: #241203;
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--sockel), inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

.floor__plan {
  position: relative;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 6px;
  padding: 10px;
  overflow: auto;
  min-height: 0;
}

/* Tische im Plan: derselbe Sockel, aber flacher. Sie stehen dicht beieinander,
   und ein zu tiefer Schatten ließe den Plan unruhig wirken. */
.table-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 54px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--tile);
  background-image: linear-gradient(180deg, var(--glanz) 0%, transparent 50%, var(--tiefe) 100%);
  box-shadow: 0 2px 0 var(--sockel), 0 3px 5px var(--streu);
  cursor: pointer;
  overflow: hidden;
  transition: transform 70ms ease, box-shadow 70ms ease, filter 90ms ease;
}

.table-tile:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--sockel), inset 0 2px 4px rgba(0, 0, 0, 0.22);
  filter: brightness(0.95);
}

.table-tile--round { border-radius: 50%; }
.table-tile__code { font-size: 20px; font-weight: 800; letter-spacing: 0.01em; }
.table-tile__meta { font-size: 11px; color: var(--text-mute); }
.table-tile__value { font-size: 12px; font-weight: 700; }

/* Statusfarben mit background-color, nicht mit der Kurzschreibweise: background
   würde das Verlaufsbild der Kachel mitlöschen und den plastischen Eindruck
   ausgerechnet auf den belegten Tischen wegnehmen. */
.table-tile--free { background-color: #1d262e; color: var(--text-mute); }
.table-tile--free .table-tile__code { color: var(--text-dim); }
.table-tile--busy { background-color: #1f3a52; border-color: #2f5f85; }
.table-tile--unfired { background-color: #4a3a12; border-color: var(--warn); }
.table-tile--ready { background-color: #175c39; border-color: var(--ok); }
.table-tile--late {
  background-color: #542020;
  border-color: var(--danger);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  50% { border-color: #ff8f8f; }
}

.table-tile__flag {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 10px;
}

/* --- Bestellansicht ------------------------------------------------------- */

.order {
  display: grid;
  grid-template-columns: 340px 1fr;
  grid-template-rows: 1fr var(--actionbar-h);
  gap: var(--gap);
  height: 100%;
  padding: var(--gap);
  min-height: 0;
}

/* Vier Zeilen: Kopf, Gangleiste, Positionsliste, Fuß.
   Nur die Liste darf wachsen -- bekäme die Gangleiste das 1fr, streckt sie sich
   über die ganze Höhe und drückt die Positionen aus dem Bild. */
.receipt {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  background: var(--panel);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 0;
}

/* Umbrechend, weil neben Tischnummer und Sitzdauer noch Gäste- und
   Zimmerschaltfläche stehen -- auf 340 px Bonbreite reicht eine Zeile nicht. */
.receipt__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.receipt__table { font-size: 22px; font-weight: 800; }
.receipt__guests { font-size: 13px; color: var(--text-dim); }

/* Gangleiste: bestimmt, in welchen Gang die nächsten Buchungen laufen.
   Bricht in eine zweite Zeile um, statt seitlich zu scrollen -- so sieht man
   immer alle Gänge auf einen Blick, ohne schieben zu müssen. */
.course-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}

.course-chip {
  flex: 0 0 auto;
  /* Feste Höhe, nicht nur Mindesthöhe: als Flex-Kind würde die Schaltfläche
     sonst der Leistenhöhe folgen und in die Länge gezogen. */
  height: 38px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--tile);
  background-image: linear-gradient(180deg, var(--glanz) 0%, transparent 50%, var(--tiefe) 100%);
  box-shadow: 0 2px 0 var(--sockel), 0 3px 5px var(--streu);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 70ms ease, box-shadow 70ms ease;
}

.course-chip:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--sockel), inset 0 2px 4px rgba(0, 0, 0, 0.22);
}

/* Der gewählte Gang bleibt eingedrückt -- er zeigt, wohin die nächsten
   Buchungen laufen, und das ist ein Zustand. */
.course-chip.is-active {
  background-color: var(--accent);
  border-color: var(--accent-dark);
  color: #241203;
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--sockel), inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

.receipt__list {
  overflow-y: auto;
  padding: 4px;
  min-height: 0;
}

.receipt__course {
  padding: 6px 8px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.line {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 6px;
  align-items: start;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.line.is-selected { background: var(--tile-hi); outline: 1px solid var(--accent); }
.line--voided { opacity: 0.45; text-decoration: line-through; }
.line__qty { font-weight: 800; text-align: right; }
.line__name { font-weight: 600; line-height: 1.25; }
.line__price { font-variant-numeric: tabular-nums; font-weight: 600; }
.line__mods { font-size: 12px; color: var(--info); }
.line__note { font-size: 12px; color: var(--warn); font-weight: 600; }
.line__badge {
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  vertical-align: 1px;
}
.line__badge--new { background: #4a3a12; color: #ffe0a8; }
.line__badge--fired { background: #1f3a52; color: #b9dcf5; }
.line__badge--prepared { background: #175c39; color: #a8f0c8; }
.line__badge--served { background: #2b3641; color: var(--text-mute); }

.receipt__foot {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}

.receipt__total {
  display: flex;
  justify-content: space-between;
  font-size: 19px;
  font-weight: 800;
}

.receipt__hint { font-size: 11px; color: var(--text-mute); }

/* Artikelbereich */

.picker {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--gap);
  min-height: 0;
}

.picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  grid-auto-rows: 84px;
  gap: 8px;
  padding: 2px;
  overflow-y: auto;
  align-content: start;
  min-height: 0;
}

/* Festes Layout: Kacheln liegen dort, wo sie im Verwaltungs-Backend platziert
   wurden. Spaltenzahl kommt aus den Betriebseinstellungen und wird per Style
   gesetzt. Der Service greift dadurch blind immer an dieselbe Stelle -- das ist
   der ganze Zweck der Übung. */
.picker__grid--fixed {
  grid-auto-rows: 78px;
  grid-auto-flow: dense;
}

/* Artikelkacheln bekommen denselben Sockel wie die Tasten. Der Verlauf liegt als
   Bild über der Grundfarbe -- so wirkt er auch auf einer im Backend gesetzten
   Kachelfarbe, ohne sie zu überschreiben. */
.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--tile);
  background-image: linear-gradient(180deg, var(--glanz) 0%, transparent 45%, var(--tiefe) 100%);
  box-shadow: 0 var(--press) 0 var(--sockel), 0 calc(var(--press) + 2px) 6px var(--streu);
  cursor: pointer;
  text-align: center;
  transition: transform 70ms ease, box-shadow 70ms ease, filter 90ms ease;
}

.product:active {
  transform: translateY(var(--press));
  box-shadow: 0 0 0 var(--sockel), inset 0 2px 4px rgba(0, 0, 0, 0.25);
  filter: brightness(0.94);
}
.product__name { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.product__price { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.product__allergens { font-size: 10px; color: var(--text-mute); letter-spacing: 0.1em; }
.product--soldout { opacity: 0.4; }
.product--soldout::after {
  content: 'AUS';
  position: absolute;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}
.product { position: relative; }

.actionbar {
  grid-column: 1 / -1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
}

/* --- Küchendisplay ------------------------------------------------------- */

.kds {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}

.kds__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  padding: 10px;
  overflow-y: auto;
  align-content: start;
  min-height: 0;
}

.ticket {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}

.ticket--warn { border-color: var(--warn); }
.ticket--late { border-color: var(--danger); }

.ticket__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--panel-2);
}

.ticket__table { font-size: 22px; font-weight: 800; }
.ticket__age { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ticket--warn .ticket__age { color: var(--warn); }
.ticket--late .ticket__age { color: #ff9d9d; }
.ticket__course {
  padding: 3px 10px;
  background: var(--accent);
  color: #241203;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ticket__items { padding: 6px 4px; }

.ticket__item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.ticket__item.is-done { opacity: 0.4; text-decoration: line-through; }
.ticket__item:active { background: var(--tile); }
.ticket__qty { font-size: 18px; font-weight: 800; text-align: right; }
.ticket__name { font-size: 16px; font-weight: 700; line-height: 1.2; }
.ticket__mod { font-size: 13px; color: var(--info); }
.ticket__note { font-size: 13px; font-weight: 700; color: var(--warn); }
.ticket__foot { margin-top: auto; padding: 8px; }

/* --- Serviceübersicht ---------------------------------------------------- */

.service { display: grid; grid-template-rows: auto auto 1fr; height: 100%; }

.service__counters {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  padding: 10px;
}

.counter {
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--panel);
  border-left: 4px solid var(--line);
}

.counter--ready { border-left-color: var(--ok); }
.counter--kitchen { border-left-color: var(--warn); }
.counter--noorder { border-left-color: var(--info); }
.counter--idle { border-left-color: var(--text-mute); }
.counter__value { font-size: 26px; font-weight: 800; line-height: 1; }
.counter__label { font-size: 12px; color: var(--text-dim); }

.service__list { overflow-y: auto; padding: 0 10px 10px; min-height: 0; }

.srow {
  display: grid;
  grid-template-columns: 70px 1fr 130px 100px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  margin-bottom: 6px;
  border-radius: var(--radius);
  background: var(--panel);
  border-left: 4px solid transparent;
  cursor: pointer;
}

.srow--s3 { border-left-color: var(--danger); background: #2b1e1e; }
.srow--s2 { border-left-color: var(--warn); }
.srow--s1 { border-left-color: var(--info); }
.srow__table { font-size: 20px; font-weight: 800; }
.srow__flag { font-size: 13px; font-weight: 700; }
.srow__meta { font-size: 12px; color: var(--text-dim); }

/* --- Dialoge ------------------------------------------------------------- */

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(6, 10, 13, 0.72);
  z-index: 50;
}

.dialog {
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  max-height: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  overflow: hidden;
}

.dialog__head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  font-weight: 700;
}

.dialog__body { padding: 14px 16px; overflow-y: auto; min-height: 0; }
.dialog__foot {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}

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

.chip {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background-color: var(--tile);
  background-image: linear-gradient(180deg, var(--glanz) 0%, transparent 50%, var(--tiefe) 100%);
  box-shadow: 0 2px 0 var(--sockel), 0 3px 5px var(--streu);
  cursor: pointer;
  font-weight: 600;
  transition: transform 70ms ease, box-shadow 70ms ease;
}

.chip:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--sockel), inset 0 2px 4px rgba(0, 0, 0, 0.22);
}

.chip.is-active {
  background-color: var(--accent);
  border-color: var(--accent-dark);
  color: #241203;
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--sockel), inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

.field { display: grid; gap: 5px; margin-bottom: 12px; }
.field__label { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }

.input {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  user-select: text;
}

.group { margin-bottom: 16px; }
.group__title { display: flex; justify-content: space-between; margin-bottom: 6px; font-weight: 700; }
.group__hint { font-size: 12px; color: var(--text-mute); font-weight: 500; }

.toast {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-weight: 600;
  z-index: 80;
}

.toast--error { background: #4a2020; border-color: var(--danger); }
.toast--ok { background: #16452c; border-color: var(--ok); }

.empty {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 30px;
  color: var(--text-mute);
  text-align: center;
}

/* --- Hochformat und kleine Displays -------------------------------------- */

@media (max-width: 820px), (orientation: portrait) {
  .order {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(180px, 38%) 1fr var(--actionbar-h);
  }
  .login { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .srow { grid-template-columns: 60px 1fr 90px; }
  .srow__meta--wide { display: none; }
}