/* Dialog-Einheit (Bauleiter 7, 29.10.2026, PR 2 Teil B) — EINE Quelle für Kopf, Rumpf, Fußleiste und Breite aller Dialoge der Kasse.
   Betreiber-Vorgabe (Seitenschablone 28.10.): Kopf = ‹ Zurück links · Titel mittig · ✕ rechts, Fußleiste gleiche Höhe (48 px) mit gleichen Ecken
   im Raster, auf 360 px volle Breite, sonst höchstens 640 px. Breite Dialoge (Getrennt zahlen, Kellnerbericht, Tagesjournal, Tischverwaltung)
   dürfen bis 960 px, weil sie Tabellen/zwei Spalten tragen. Nur Darstellung: keine IDs, Handler oder Logik hängen an dieser Datei.
   Farben ausschließlich aus den Theme-Tokens (hell UND dunkel). Geladen wird sie VOR gestaltung.css (das bleibt das letzte Stylesheet).
   Guard: tests/dialog-kopf-einheitlich.test.ts. Die Betriebskonfiguration (.betriebsSetup-modal) hat ihren eigenen Vollbild-Kopf und ist hier ausgenommen. */

:root {
  --dlg-hoehe: 48px;
  --dlg-breite: 640px;
  --dlg-breit: 960px;
  --dlg-radius: var(--g-radius, 10px);
  --dlg-rand: var(--glass-border, rgba(148, 163, 184, 0.35));
  --dlg-flaeche: var(--bg-card, #ffffff);
  --dlg-flaeche-2: var(--bg-secondary, #ffffff);
}

/* ── Breite ─────────────────────────────────────────────────────────────── */
.modal-overlay .modal:not(.betriebsSetup-modal) {
  width: 100%;
  max-width: var(--dlg-breite);
}
.modal-overlay .modal.g-dialog-breit,
.modal-overlay .modal.modal--breit {
  max-width: var(--dlg-breit);
}
.modal-overlay .modal.g-dialog-mittel,
.modal-overlay .modal.modal--payment {
  max-width: var(--dlg-breite);
  width: 100%;
}
@media (max-width: 640px) {
  .modal-overlay .modal:not(.betriebsSetup-modal),
  .modal-overlay .modal.g-dialog-breit,
  .modal-overlay .modal.g-dialog-mittel,
  .modal-overlay .modal.modal--payment {
    width: 100%;
    max-width: 100%;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
}

/* ── Kopf: ‹ Zurück · Titel · ✕ ─────────────────────────────────────────── */
.modal-overlay .modal:not(.betriebsSetup-modal) > .modal__header,
.dlg-kopf {
  display: grid;
  /* Beide Seitenspalten gleich breit (1fr), mindestens so breit wie ‹ Zurück (rund 88 px): der Titel steht mit oder ohne ‹ Zurück exakt
     in der Mitte und läuft nie in den Knopf. Schmale Geräte (360 px) lassen den Titel umbrechen statt zu überlappen. */
  grid-template-columns: minmax(88px, 1fr) minmax(0, auto) minmax(88px, 1fr);
  /* Zeile fest 48 px: ein umbrechender Titel verändert die Kopfhöhe nicht, das ✕ bleibt an derselben Stelle. */
  grid-template-rows: 48px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  /* 64 px = ‹ Zurück (48 px) + 8 px oben und unten: die Mitte des ✕ liegt bei Dialogen mit und ohne ‹ Zurück auf derselben Höhe. */
  min-height: 64px;
  border-bottom: 1px solid var(--dlg-rand);
  background: var(--dlg-flaeche);
}
.modal-overlay .modal:not(.betriebsSetup-modal) > .modal__header > h2,
.modal-overlay .modal:not(.betriebsSetup-modal) > .modal__header > .modal__title,
.dlg-kopf > .dlg-titel {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  /* Höchstens zwei Zeilen; ein längerer Titel endet mit … und läuft nicht in die Knöpfe. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.modal-overlay .modal:not(.betriebsSetup-modal) > .modal__header > .dlg-zurueck,
.dlg-kopf > .dlg-zurueck {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
.modal-overlay .modal:not(.betriebsSetup-modal) > .modal__header > .modal__close,
.dlg-kopf > .dlg-x {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

/* ‹ Zurück: 48 px hoch, gleiche Ecken wie alle Knöpfe. */
.dlg-zurueck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--dlg-hoehe);
  padding: 0 12px;
  border: 0;
  border-radius: var(--dlg-radius);
  background: transparent;
  color: var(--accent-hover, var(--accent, #4338ca));
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
.dlg-zurueck:hover {
  background: var(--glass-hover, rgba(15, 23, 42, 0.09));
}

/* ✕: sichtbar GEZEICHNET (36 px, gleicher Kreis überall), die Trefferfläche ist 48 px. Das Kreuz wird mit zwei Linien gemalt statt als
   Schriftzeichen: ein Zeichen kann je nach Gerätefont als Lesezeichen- oder Emoji-Symbol erscheinen (Betreiber-Foto Tagesjournal 29.10.). */
.modal__close,
.dlg-x {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--dlg-rand);
  border-radius: 50%;
  background: var(--glass, rgba(15, 23, 42, 0.05));
  color: var(--text-primary, #0b1220);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  flex: 0 0 auto;
  touch-action: manipulation;
}
.modal__close::before,
.dlg-x::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
}
.modal__close::after,
.dlg-x::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--dlg-hoehe);
  height: var(--dlg-hoehe);
  transform: translate(-50%, -50%);
}
.modal__close:hover,
.dlg-x:hover {
  background: var(--red-glow, rgba(185, 28, 28, 0.18));
  color: var(--red, #b91c1c);
  border-color: var(--red, #b91c1c);
}
/* Betriebskonfiguration: das ✕ ist ein echtes Zeichen in 16 px (Schrift ≥ 12 px, WZ-733), die Zeichnung entfällt hier.
   Vorher stand das Zeichen bei font-size 0 — unsichtbar bzw. unter der Mindestschrift (CI-Rot e2e-wz733-schrift). */
.betriebsSetup-modal .modal__close {
  font-size: 16px;
  line-height: 1;
}
.betriebsSetup-modal .modal__close::before,
.betriebsSetup-modal .modal__close::after {
  display: none;
}

/* ── Rumpf ──────────────────────────────────────────────────────────────── */
.modal-overlay .modal:not(.betriebsSetup-modal) > .modal__body {
  padding: 16px;
}
@media (min-width: 641px) {
  .modal-overlay .modal:not(.betriebsSetup-modal) > .modal__body {
    padding: 20px 24px;
  }
}

/* ── Fußleiste: Raster, 48 px, gleiche Ecken ────────────────────────────── */
.modal-overlay .modal:not(.betriebsSetup-modal) > .modal__footer,
.dlg-fuss {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--dlg-rand);
  background: var(--dlg-flaeche);
}
.modal-overlay .modal:not(.betriebsSetup-modal) > .modal__footer > .btn,
.modal-overlay .modal:not(.betriebsSetup-modal) > .modal__footer > .modal-btn,
.dlg-fuss > .btn {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--dlg-hoehe);
  padding: 8px 12px;
  border-radius: var(--dlg-radius);
  font-size: 14px;
  line-height: 1.2;
  white-space: normal;
  flex: none;
}

/* ── Bezahlen: Trinkgeld-Knöpfe in EINER Zeile, Fußleiste 3 + 1 ──────────── */
.tip-section {
  padding: 12px;
}
.tip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.tip-btn {
  box-sizing: border-box;
  flex: none;
  min-width: 0;
  min-height: var(--dlg-hoehe);
  padding: 8px 4px;
  border-radius: var(--dlg-radius);
  font-size: 13px;
  white-space: nowrap;
}
#paymentModal .modal--payment > .modal__footer {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position: static;
}
#paymentModal .modal--payment > .modal__footer > #confirmPayment {
  grid-column: 1 / -1;
  min-height: var(--dlg-hoehe);
  padding: 8px 12px;
  font-size: 15px;
}
#paymentModal .modal--payment > .modal__footer > .btn:not(#confirmPayment) {
  font-size: 13px;
}

/* ── Getrennt zahlen / Durch N teilen: keine grauen Flächen ─────────────── */
.split-col {
  background: var(--dlg-flaeche);
  border: 1px solid var(--dlg-rand);
}
.split-col__header {
  border-bottom: 1px solid var(--dlg-rand);
}
.split-item {
  background: var(--dlg-flaeche-2);
  border: 1px solid var(--dlg-rand);
  min-height: var(--dlg-hoehe);
}
.split-item:hover {
  background: var(--glass-hover, rgba(15, 23, 42, 0.09));
}
.split-item__qty-ctrl {
  background: var(--glass, rgba(15, 23, 42, 0.05));
  border: 1px solid var(--dlg-rand);
}
.split-item__qty-btn {
  width: 36px;
  height: 36px;
  color: var(--text-primary);
}
.split-item__btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--dlg-rand);
  background: var(--glass, rgba(15, 23, 42, 0.05));
  color: var(--accent-hover, var(--accent));
}
.split-item__btn:hover {
  background: var(--accent-glow, rgba(67, 56, 202, 0.22));
  border-color: var(--accent);
  color: var(--accent-hover, var(--accent));
}
.fs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 10px;
  border: 1px solid var(--dlg-rand);
  border-radius: var(--dlg-radius);
  background: var(--dlg-flaeche-2);
}
.fs-row__name {
  min-width: 78px;
  font-size: 13px;
  color: var(--text-muted, #42556e);
}
.fs-row__betrag {
  min-width: 72px;
}
.fs-row__wahl {
  display: flex;
  flex: 1 1 160px;
  gap: 8px;
}
.fs-method-btn {
  box-sizing: border-box;
  flex: 1;
  min-height: var(--dlg-hoehe);
  padding: 8px;
  border: 1px solid var(--dlg-rand);
  border-radius: var(--dlg-radius);
  background: var(--glass, rgba(15, 23, 42, 0.05));
  color: var(--text-primary, #0b1220);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.fs-method-btn--aktiv {
  border-color: var(--green, #15803d);
  background: var(--green-glow, rgba(21, 128, 61, 0.2));
}

/* ── Kassenlade: vier gleich große Kacheln im Raster ────────────────────── */
.drawer-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 14px; /* Gerätedurchgang 2: die Typ-Kacheln klebten am Betragsfeld */
}
.drawer-type-grid > .drawer-reason-btn {
  box-sizing: border-box;
  justify-content: center;
  min-height: 96px;
  padding: 10px 8px;
  border-radius: var(--dlg-radius);
  text-align: center;
}
.drawer-type-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.drawer-type-desc {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-secondary);
}
.drawer-balance:empty {
  display: none;
}
.drawer-subreason-btn {
  min-height: var(--dlg-hoehe);
  border-radius: var(--dlg-radius);
}
.drawer-reason-btn--active .drawer-type-label,
.drawer-reason-btn--active .drawer-type-desc {
  color: inherit;
}

/* ── Gutschein: kurzer Hinweis, große Betragsknöpfe ─────────────────────── */
.vs-typ-zeile {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.vs-typ-zeile > .vs-type-btn {
  flex-direction: row;
  justify-content: center;
  min-height: var(--dlg-hoehe);
  padding: 8px 12px;
  border-radius: var(--dlg-radius);
  font-size: 14px;
  font-weight: 600;
}
.vs-type-grid > .vs-type-btn {
  min-height: var(--dlg-hoehe);
  padding: 8px 12px;
  border-radius: var(--dlg-radius);
  font-size: 14px;
  font-weight: 600;
  flex-direction: row;
  justify-content: center;
}
.vs-type-grid > .vs-type-btn--active {
  border-color: var(--accent);
  background: var(--accent-glow, rgba(67, 56, 202, 0.22));
  color: var(--accent-hover, var(--accent));
}
.vs-quick-values,
.vs-typ-zeile + .vs-value-row + .g-reihe-umbruch-eng {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
}
.vs-qv-btn {
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--dlg-hoehe);
  padding: 8px;
  border-radius: var(--dlg-radius);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.vs-legal__mehr {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.vs-legal__mehr > summary {
  min-height: 32px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  color: var(--accent-hover, var(--accent));
}

/* ── Warenkorb-Aktionsknöpfe: nichts abschneiden, gleich hoch ───────────── */
.cart-actions {
  grid-auto-rows: minmax(var(--dlg-hoehe), auto);
}
.cart-actions > .cart-btn {
  min-height: var(--dlg-hoehe);
  padding: 8px 10px;
  overflow: visible;
  white-space: normal;
  line-height: 1.15;
  text-align: center;
  font-size: 14px;
  border-radius: var(--dlg-radius);
  overflow-wrap: anywhere;
}
.am-gast-grid {
  grid-auto-rows: minmax(var(--dlg-hoehe), auto);
}
.am-gast-btn {
  box-sizing: border-box;
  min-height: var(--dlg-hoehe);
  padding: 8px 6px;
  border-radius: var(--dlg-radius);
  font-size: 14px;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}
.am-gast-toggle {
  min-height: var(--dlg-hoehe);
  border-radius: var(--dlg-radius);
}
@media (max-width: 480px) {
  .am-gast-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* TISCH-V3 (Betreiber 04.11.2026): drei Spalten, mehr Warenkorb sichtbar */
  }
}

/* ── Anzeige anpassen (theme.js, vorher ein kleines schwebendes Fenster) ─── */
#kfFxMenu {
  z-index: 2147483002;
}
#kfFxMenu .modal {
  max-width: 480px;
}
.fx-feld {
  display: block;
  margin: 12px 0 4px;
  font-size: 14px;
  font-weight: 600;
}
.fx-feld:first-child {
  margin-top: 0;
}
.fx-regler {
  width: 100%;
  min-height: var(--dlg-hoehe);
}
.fx-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--dlg-hoehe);
  cursor: pointer;
}
.fx-modus {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--dlg-hoehe);
  padding: 8px 12px;
  border: 1px solid var(--dlg-rand);
  border-radius: var(--dlg-radius);
  background: var(--glass, rgba(15, 23, 42, 0.05));
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.fx-tipp {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

/* ── Kassen-Assistent: mittiger Dialog statt Schwebefenster über dem Warenkorb ── */
.kf-ai-panel {
  left: 0;
  right: 0;
  /* GESTALT-37 (Gerätedurchgang 29./30.10., V3 360 px, gemessen): der Assistent begann bei y=0 unter dem Testbetrieb-Banner. */
  top: var(--kf-banner-h, 0px);
  bottom: 0;
  margin: auto;
  width: min(640px, 100%);
  height: min(640px, 100%);
  max-height: none;
  border-radius: var(--radius-xl, 16px);
  box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.45), var(--shadow-lg);
}
.kf-ai-panel > .kf-ai-header {
  display: grid;
  grid-template-columns: minmax(var(--dlg-hoehe), auto) minmax(0, 1fr) minmax(var(--dlg-hoehe), auto);
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  /* 64 px = ‹ Zurück (48 px) + 8 px oben und unten: die Mitte des ✕ liegt bei Dialogen mit und ohne ‹ Zurück auf derselben Höhe. */
  min-height: 64px;
}
.kf-ai-panel > .kf-ai-header > .dlg-zurueck {
  grid-column: 1;
}
.kf-ai-panel > .kf-ai-header > .kf-ai-header__title {
  grid-column: 2;
  text-align: center;
  flex: none;
}
.kf-ai-panel > .kf-ai-header > .kf-ai-close {
  grid-column: 3;
  justify-self: end;
}
.kf-ai-header__icon {
  margin-right: 4px;
}
.kf-ai-btn {
  min-height: var(--dlg-hoehe);
  border-radius: var(--dlg-radius);
}
@media (max-width: 480px) {
  .kf-ai-panel {
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: none;
  }
}
@media (min-width: 900px) {
  .kf-ai-panel {
    width: 55vw;
    height: 70vh;
    right: 0;
  }
}

/* ── Kellnerbericht-Abrechnung, Tagesjournal, Tischverwaltung: gleiche Fußleiste ── */
.dlg-fuss > .wr-btn,
.dlg-fuss > .journal-btn {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--dlg-hoehe);
  border-radius: var(--dlg-radius);
}

/* Tischverwaltung: Umschalter Liste/Raumplan in der Werkzeugleiste, gleich hoch wie die übrigen Knöpfe. */
.tm-toggle-btn {
  min-height: 44px;
  border-radius: var(--dlg-radius);
}
.tm-view-toggle {
  flex: 0 0 auto;
}

/* Tischverwaltung hell (Betreiber: „Hell überall"): die Werkzeugleiste trug weiße Schrift auf hellem Grund und war unlesbar. */
.tm-modal {
  background: var(--dlg-flaeche-2);
  border: 1px solid var(--dlg-rand);
  color: var(--text-primary);
}
.tm-modal .tm-toolbar {
  border-bottom: 1px solid var(--dlg-rand);
}
.tm-modal .tm-btn {
  border-radius: var(--dlg-radius);
  font-weight: 600;
}
.tm-modal .tm-btn-secondary {
  background: var(--glass, rgba(15, 23, 42, 0.05));
  color: var(--text-primary);
  border: 1px solid var(--dlg-rand);
}
.tm-modal .tm-btn-secondary:hover {
  background: var(--glass-hover, rgba(15, 23, 42, 0.09));
  color: var(--text-primary);
}
.tm-modal .tm-view-toggle {
  background: var(--glass, rgba(15, 23, 42, 0.05));
  border: 1px solid var(--dlg-rand);
}
.tm-modal .tm-toggle-btn {
  color: var(--text-secondary);
}
.tm-modal .tm-toggle-btn.active {
  color: #fff;
}
.tm-modal .tm-toggle-btn:hover:not(.active) {
  background: var(--glass-hover, rgba(15, 23, 42, 0.09));
  color: var(--text-primary);
}
.tm-modal .tm-count,
.tm-modal .tm-empty,
.tm-modal .tm-group-header,
.tm-modal .tm-group-empty {
  /* text-secondary statt text-muted: dunkel war Muted-Grau 3,7:1 auf dem Grund (Gerätedurchgang 2). */
  color: var(--text-secondary);
}
.tm-modal .tm-group-header {
  border-bottom: 1px solid var(--dlg-rand);
}

/* Breitenstufe „schmal“ (Manager-PIN-Abfragen, kf-abfrage.js): 360 px ab 641 px Bildschirmbreite. Darunter gilt die volle Breite und
   die eckige Form wie bei allen anderen Dialogen (eine Einheit, keine Sonderform). */
@media (min-width: 641px) {
  .modal-overlay .modal.kf-breite-schmal { max-width: 360px; }
}

/* Der dunkle QR-Scanner behält seine dunkle Kopfleiste (weiße Schrift, gestaltung.css) — sonst stünde Weiß auf Weiß. */
.modal-overlay .modal.g-karte-dunkel > .modal__header {
  background: #1a1a2e;
  border-bottom-color: transparent;
}

/* Abfrage (kfAbfrage) auf Seiten OHNE pos.css: Überlagerung und Kastenfläche. Ohne diese Regeln stand die Abfrage im Seitenfluss, ohne Fläche und mit unlesbarem Titel (am Gerät gemessen 01.11.2026). */
.modal-overlay[data-kf-abfrage] {
  position: fixed;
  inset: var(--kf-banner-h, 0px) 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
}
.modal-overlay[data-kf-abfrage] > .modal {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
  background: var(--bg-card, #ffffff);
  color: var(--text-primary, #0b1220);
  border: 1px solid var(--dlg-rand, rgba(148, 163, 184, 0.35));
  border-radius: 12px;
}
.modal-overlay[data-kf-abfrage] .modal__title {
  color: inherit;
}
.modal-overlay[data-kf-abfrage] .modal__body {
  padding: 16px;
}
.modal-overlay[data-kf-abfrage] .form-control {
  box-sizing: border-box;
  padding: 8px 12px;
  font: inherit;
  color: inherit;
  background: var(--bg-secondary, #ffffff);
  border: 1px solid var(--dlg-rand, rgba(148, 163, 184, 0.6));
  border-radius: 8px;
}
.modal-overlay[data-kf-abfrage] .dlg-fuss {
  padding: 8px 12px;
}