/**
 * Der Tischplan mit Belegung - EINMAL fuer Tresen und Verwaltung.
 *
 * Gehoert zu tischplan-ansicht.js. Warum eine eigene Datei, steht dort im
 * Kopf: Zwei Kopien derselben Ansicht laufen auseinander.
 *
 * ZWEI DINGE MACHEN DIESE DATEI BESONDERS:
 *
 * 1. ALLE REGELN HAENGEN AN #tischplan-fenster. Die Verwaltung hat eigene
 *    `.tplan-*`-Klassen fuer ihren EINRICHTUNGSPLAN (Tische ziehen) - unter
 *    anderem `.tplan-stuhl`, `.tplan-seite` und `.tplan-plan`, alle mit
 *    anderer Bedeutung. Ohne die Qualifizierung wuerden sich beide mischen.
 *
 * 2. DIE FARBEN KOMMEN AUS BEIDEN WELTEN. Der Tresen nennt sie `--text`,
 *    `--karte`, `--aktion`; die Verwaltung dieselben Dinge `--v-text`,
 *    `--v-karte`, `--v-aktion`. Deshalb werden hier eigene Namen gesetzt, die
 *    sich nehmen, was da ist: `var(--text, var(--v-text))` heisst "nimm
 *    --text, und wenn es die nicht gibt, --v-text".
 *    So sieht der Plan in beiden Oberflaechen gleich aus, ohne dass eine von
 *    beiden ihre Variablen umbenennen muss.
 */

#tischplan-fenster {
  --tp-text:   var(--text,       var(--v-text));
  --tp-leise:  var(--text-leise, var(--v-leise));
  --tp-karte:  var(--karte,      var(--v-karte));
  --tp-grund:  var(--grund,      var(--v-grund));
  --tp-linie:  var(--linie,      var(--v-linie));
  --tp-aktion: var(--aktion,     var(--v-aktion));
  --tp-gut:    var(--gut,        var(--v-gut));
  --tp-rund:   var(--rund-klein, 10px);
  --tp-tipp:   var(--tippflaeche, 48px);
}

#tischplan-fenster {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background: var(--tp-grund);
}
#tischplan-fenster[hidden] { display: none; }

#tischplan-fenster .tplan-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--tp-karte);
  border-bottom: 1px solid var(--tp-linie);
  flex: 0 0 auto;
}
/* KLEINER UND HELLER (Andreas 03.10.2026): Der Titel ist eine Angabe, keine
   Ueberschrift - der Plan darunter ist die Hauptsache. */
#tischplan-fenster .tplan-titel { font-size: 15px; font-weight: 600; color: var(--tp-leise); }
/* Drucken und Schliessen stehen nebeneinander rechts im Kopf, die Tageswahl
   in der Mitte - alle drei Gruppen mit demselben Behaelter. */
#tischplan-fenster .tplan-kopf-knoepfe { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
/* Der Titel darf schrumpfen, die Knoepfe nicht (Andreas 03.10.2026: der Tag
   steht links, die Tageswahl daneben - beides muss nebeneinander passen). */
#tischplan-fenster .tplan-titel { flex: 1 1 auto; min-width: 0; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
#tischplan-fenster .tplan-zu, #tischplan-fenster .tplan-seite-zu {
  width: var(--tp-tipp);
  height: var(--tp-tipp);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--tp-leise);
  cursor: pointer;
}
#tischplan-fenster .tplan-zu svg, #tischplan-fenster .tplan-seite-zu svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}

/* Darunter: links das Feld, rechts der Plan. */
#tischplan-fenster .tplan-koerper {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

/* DAS FELD LINKS (Andreas 03.10.2026 ausdruecklich: *"Nichts mit unten
   drunter."*) Erscheint erst beim Antippen eines Tisches. */
#tischplan-fenster .tplan-seite {
  position: relative;
  flex: 0 0 300px;
  padding: 14px 16px;
  background: var(--tp-karte);
  border-right: 1px solid var(--tp-linie);
  overflow-y: auto;
}
#tischplan-fenster .tplan-seite[hidden] { display: none; }
#tischplan-fenster .tplan-seite-zu { position: absolute; top: 6px; right: 6px; }
#tischplan-fenster .tplan-seite-name {
  margin: 6px 0 14px;
  font-size: 19px;
  font-weight: 600;
  color: var(--tp-text);
}

/* Eine Reservierung an diesem Tisch - wie die Karte bei OpenTable. */
#tischplan-fenster .tplan-res {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  margin-bottom: 8px;
  border: 1px solid var(--tp-linie);
  border-radius: var(--tp-rund);
  background: var(--tp-karte);
}
#tischplan-fenster .tplan-res-wer { flex: 1; min-width: 0; }
/* UNTEREINANDER, NICHT NEBENEINANDER (beim Ansehen gefunden, 03.10.2026):
   Als Inline-Elemente klebten Name und Uhrzeit zusammen -
   "Susan Brade18:00 Uhr". */
#tischplan-fenster .tplan-res-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--tp-text);
}
#tischplan-fenster .tplan-res-zeit {
  display: block;
  font-size: 14px;
  color: var(--tp-leise);
  margin-top: 2px;
}
#tischplan-fenster .tplan-res-pers {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--tp-leise);
}

/* Die Flaeche mit den Tischen. */
#tischplan-fenster .tplan-buehne {
  flex: 1 1 auto;
  position: relative;
  overflow: auto;
  background: var(--tp-grund);
}
#tischplan-fenster .tplan-plan { position: relative; }

/* EIN TISCH. Nummer oben, darunter der Balken mit der naechsten Uhrzeit -
   genau wie im Screenshot. Wer frei ist, zeigt nur die Nummer. */
#tischplan-fenster .tplan-t {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  border: 1px solid var(--tp-linie);
  border-radius: 6px;
  background: var(--tp-karte);
  color: var(--tp-text);
  font: inherit;
  cursor: pointer;
  /* KEIN overflow:hidden (beim Ansehen gefunden, 03.10.2026): Die Stuehle
     sitzen AUSSERHALB des Tisches - mit overflow:hidden wurden sie
     abgeschnitten, und zwar genau bei den hochkant stehenden Tischen, wo sie
     links und rechts liegen. Andreas: *"Ich würde in jedem Fall auch die
     Stühle einzeichnen."* Sie waren da, man sah sie nur nicht. Die Verwaltung
     hat die Regel aus demselben Grund nicht. */
}
/* BEIM DRUEBERFAHREN BLEIBT DIE FARBE (Andreas 03.10.2026, derselbe Fall
   wie beim Bestellfenster am 22.09.2026): Die allgemeine Regel
   `button:hover` faerbt JEDEN Knopf dunkelblau - auch die Tische und die
   Raumzeilen, die technisch Knoepfe sind, aber wie Flaechen aussehen sollen.
   Andreas: *"Was ich ganz schlimm finde: Wenn man über den Tisch drüber geht,
   wird der blau."* */
#tischplan-fenster .tplan-t:hover { background: var(--tp-karte); }
#tischplan-fenster .tplan-t.sitzt:hover { background: rgba(36,138,61,.10); }
#tischplan-fenster .tplan-raumliste button:hover { background: var(--tp-grund); }
#tischplan-fenster .tplan-raumliste button.aktiv:hover { background: var(--tp-aktion); }
#tischplan-fenster .tplan-raumknopf:hover { background: var(--tp-karte); }
#tischplan-fenster .tplan-zu:hover, #tischplan-fenster .tplan-seite-zu:hover { background: var(--tp-grund); }

#tischplan-fenster .tplan-t.rund { border-radius: 50%; }
#tischplan-fenster .tplan-t-nr { font-size: 14px; font-weight: 600; line-height: 1.1; }
/* DIE UHRZEIT ALS KLEINES SCHILD, NICHT ALS BALKEN (Andreas 03.10.2026):
   *"Dann steht so quer die Uhrzeit auf voller Breite, das verstehe ich
   nicht."* Vorher lief sie von Kante zu Kante und sah aus wie ein Trennstrich
   quer durch den Tisch. Jetzt sitzt sie als Schild unter der Nummer, nur so
   breit wie der Text. */
#tischplan-fenster .tplan-t-zeit {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--tp-text);
  color: var(--tp-karte);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
/* Besetzt heisst: jemand sitzt JETZT dort. */
#tischplan-fenster .tplan-t.sitzt { border-color: var(--tp-gut); background: rgba(36,138,61,.10); }
#tischplan-fenster .tplan-t.sitzt .tplan-t-zeit { background: var(--tp-gut); }
/* Der angetippte Tisch bekommt einen kraeftigen Rahmen. */
#tischplan-fenster .tplan-t.gewaehlt { border-color: var(--tp-aktion); border-width: 2px; }
/* Fuer heute gesperrt. */
#tischplan-fenster .tplan-t.gesperrt { opacity: .45; }

/* Die Stuehle, wie in der Verwaltung - einer je Platz. */
/* Die Stuehle - einer je Platz, wie in der Verwaltung. Etwas kraeftiger als
   dort: Am Tablet schaut man aus einem Meter Entfernung darauf. */
#tischplan-fenster .tplan-stuhl {
  position: absolute;
  background: var(--tp-leise);
  border-radius: 2px;
}

/* DIE RAUMWAHL unten rechts, klappt nach OBEN auf. */
#tischplan-fenster .tplan-raeume {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
}
#tischplan-fenster .tplan-raumknopf {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tp-tipp);
  padding: 0 16px;
  border: 1px solid var(--tp-linie);
  border-radius: var(--tp-rund);
  background: var(--tp-karte);
  color: var(--tp-text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
#tischplan-fenster .tplan-raumknopf svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .15s;
}
#tischplan-fenster .tplan-raumknopf.offen svg { transform: rotate(180deg); }
#tischplan-fenster .tplan-raumliste {
  position: absolute;
  right: 0;
  bottom: calc(var(--tp-tipp) + 8px);
  min-width: 220px;
  border: 1px solid var(--tp-linie);
  border-radius: var(--tp-rund);
  background: var(--tp-karte);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  overflow: hidden;
}
#tischplan-fenster .tplan-raumliste[hidden] { display: none; }
#tischplan-fenster .tplan-raumliste button {
  display: block;
  width: 100%;
  min-height: var(--tp-tipp);
  padding: 0 18px;
  border: none;
  border-bottom: 1px solid var(--tp-linie);
  background: var(--tp-karte);
  color: var(--tp-text);
  font: inherit;
  font-size: 15px;
  text-align: center;
  cursor: pointer;
}
#tischplan-fenster .tplan-raumliste button:last-child { border-bottom: none; }
#tischplan-fenster .tplan-raumliste button.aktiv { background: var(--tp-aktion); color: #fff; }

/* Am Handy nimmt das Feld links die volle Breite - 300 Punkte daneben waeren
   dort die halbe Anzeige. */
@media (max-width: 700px) {
#tischplan-fenster .tplan-seite {
    position: absolute;
    inset: 0;
    z-index: 3;
    flex: none;
    border-right: none;
  }
}

/* ---- GESELLSCHAFTEN IM TISCHPLAN (Andreas 03.10.2026) ----
 *
 * Sitzt eine Gruppe an mehreren Tischen, war im Plan nicht zu sehen, welche
 * zusammengehoeren. Jetzt tragen sie denselben farbigen Rahmen und den Namen
 * des Gastes.
 *
 * KEINE NEUE FARBE: --aktion ist das Blau, das im ganzen System alles
 * Zusammengehoerige markiert. Eine zweite Farbe je Gesellschaft braucht es
 * nicht - der Name unterscheidet sie. */
#tischplan-fenster .tplan-t.gesellschaft {
  border-color: var(--tp-aktion);
  border-width: 2px;
}
#tischplan-fenster .tplan-t-wer {
  max-width: 100%;
  padding: 0 4px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--tp-aktion);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- DER AUSDRUCK (Andreas 03.10.2026) ----
 *
 * *"Es gibt ja nichts Besseres, als wenn die Tische richtig geplant sind, das
 * Personal den Tischplan ausdrucken kann und damit arbeiten kann."*
 *
 * Gedruckt wird GENAU DAS, was am Tablet zu sehen ist - keine zweite
 * Zeichnung, die auseinanderlaufen koennte. Weg muss nur, was auf Papier
 * nichts zu suchen hat: alles ausserhalb des Fensters, die Knoepfe, die
 * Raumwahl und das Feld links.
 *
 * Der Titel BLEIBT: Auf einem Blatt, das am Pass haengt, muss stehen, fuer
 * welchen Tag es gilt. */

/* DIE TAGESKNOEPFE GEHOEREN MIT HIERHER (03.10.2026, beim Vergleich beider
   Oberflaechen gefunden): Am Tresen gibt es `.tag-knopf` schon fuer die
   Tageswahl darunter, in der Verwaltung nicht - dort blieben die Pfeile leere
   Kaesten. Dieselben Werte wie in stil.css, nur auf das Fenster begrenzt. */
#tischplan-fenster .tag-knopf {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: none;
  border-radius: var(--tp-rund);
  background: var(--tp-grund);
  color: var(--tp-text);
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
}
#tischplan-fenster .tag-knopf:hover { background: #e8e8ed; }
#tischplan-fenster .tag-knopf svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* "Heute" ist Text statt Zeichen, also breiter - aber gleich hoch. */
#tischplan-fenster .tag-heute {
  width: auto;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 500;
}
/* Steht man schon auf heute, ist der Knopf abgeschaltet - und sagt das. */
#tischplan-fenster .tag-knopf[disabled] { opacity: .45; cursor: default; }
#tischplan-fenster .tag-knopf[disabled]:hover { background: var(--tp-grund); }

@media print {
html, body { background: #fff !important; height: auto !important; }
body > *:not(#tischplan-fenster) { display: none !important; }

#tischplan-fenster {
    position: static !important;
    height: auto !important;
    background: #fff !important;
  }
#tischplan-fenster .tplan-kopf { border-bottom: 1px solid #999; padding: 0 0 6px; }
#tischplan-fenster .tplan-titel { color: #000; font-size: 13pt; }
  #tischplan-fenster .tplan-kopf-knoepfe,
  #tischplan-fenster .tplan-raeume,
  #tischplan-fenster .tplan-seite { display: none !important; }

  /* ALLES WEISS: Der graue Arbeitshintergrund am Bildschirm wuerde auf dem
     Papier eine volle Seite Toner kosten und nichts aussagen. */
  #tischplan-fenster,
  #tischplan-fenster .tplan-koerper,
  #tischplan-fenster .tplan-buehne,
  #tischplan-fenster .tplan-plan {
    background: #fff !important;
  }
#tischplan-fenster .tplan-koerper { display: block; }
#tischplan-fenster .tplan-buehne { overflow: visible !important; height: auto !important; }
  /* Der Rand von 16 Punkten ist am Bildschirm richtig, auf dem Papier kippt
     er den Plan auf eine zweite Seite (gemessen 03.10.2026). */
#tischplan-fenster .tplan-plan { margin: 0 auto !important; }

  /* Die Tische kommen aus dem Browser ohne Hintergrund - sonst spart er
     Farbe und der belegte Tisch sieht aus wie ein freier. */
#tischplan-fenster .tplan-t, #tischplan-fenster .tplan-stuhl, #tischplan-fenster .tplan-t-zeit {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
#tischplan-fenster .tplan-t { border-color: #666 !important; }
#tischplan-fenster .tplan-t.gesellschaft { border-color: #000 !important; border-width: 2px !important; }
#tischplan-fenster .tplan-t-wer { color: #000 !important; }
}