/* =====================================================================
   lab - Zeichentafel (werkzeuge/zeichentafel/app.css)
   Whiteboard fuer Beamer und Tafel. App im Fokus: kompakte lab-Leiste
   oben (Marke, Klapp-Knopf, Dunkelmodus), darunter die ausklappbare
   Werkzeugleiste und die Tafel; im Vollbild-Modus alles auf dem Schirm.
   ===================================================================== */

.lab_zt_buehne {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Die Tafel reicht bis an den unteren Schirmrand - der Platz unter der
   Hauptspalte bleibt frei (app.js rechnet die Hoehe auf das Fenster). */
.lab_main_zt {
  padding-bottom: 0;
}

/* ---------- Kompakte lab-Leiste (App im Fokus, AGENTS.md 5.7) ---------- */

.lab_zt_kopf {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 0.75rem;
  padding: 0.25rem 0.4rem;
  box-shadow: var(--lab-shadow-1);
}

.lab_zt_kopf_titel {
  font-family: var(--lab-mono);
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--grey600-color);
  padding: 0 0.4rem;
  white-space: nowrap;
}

.lab_zt_kopf_abstand { flex: 1 1 auto; }

/* Klapp-Knopf: Chevron zeigt zugeklappt nach unten (wie im Writer) */
.lab_zt_klapp .lab_icon { transition: transform 0.15s ease; }
.lab_zt_buehne.is_leiste_zu .lab_zt_klapp .lab_icon { transform: rotate(180deg); }
.lab_zt_buehne.is_leiste_zu .lab_zt_leiste { display: none; }

/* ---------- Werkzeugleiste ---------- */

/* Regler und Pruefknoepfe in der Akzentfarbe (kein Browser-Blau) */
.lab_zt_buehne input[type="range"],
.lab_zt_buehne input[type="checkbox"] {
  accent-color: var(--bt-color);
}

.lab_zt_leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.25rem;
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 0.75rem;
  padding: 0.35rem 0.5rem;
  box-shadow: var(--lab-shadow-1);
}

.lab_zt_gruppe {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0 0.5rem;
}

.lab_zt_gruppe + .lab_zt_gruppe {
  border-left: 1px solid var(--lab-border-color);
}

.lab_zt_knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  background: none;
  color: var(--grey600-color);
  cursor: pointer;
}

.lab_zt_knopf:hover {
  background: var(--div-color);
  color: var(--blk-color);
}

.lab_zt_knopf.is_aktiv {
  background: var(--bt-color);
  color: var(--bt-f-color);
}

.lab_zt_knopf:focus-visible {
  outline: 2px solid var(--bt-color);
  outline-offset: 1px;
}

.lab_zt_zeile {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.lab_zt_zahl {
  min-width: 1.6rem;
  font-family: var(--lab-mono);
  font-size: 0.8rem;
  color: var(--grey600-color);
  text-align: right;
}

/* ---------- Farbfelder ---------- */

.lab_zt_farben {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* ---------- Textgroesse (nur bei aktivem Text-Werkzeug sichtbar) ---------- */

.lab_zt_textgr {
  width: auto;
  min-width: 1.9rem;
  padding: 0 0.4rem;
  font-family: var(--lab-mono);
  font-size: 0.78rem;
}

/* Schriftart und -groesse als kompakte Auswahlfelder in der Leiste */
.lab_zt_auswahl {
  height: 2.3rem;
  padding: 0 0.3rem;
  font-size: 0.82rem;
  color: var(--blk-color);
  background: var(--div-color);
  border: var(--lab-border);
  border-radius: 0.55rem;
  max-width: 9.5rem;
}

.lab_zt_groesse {
  max-width: 4rem;
}

.lab_zt_auswahl:focus-visible {
  outline: 2px solid var(--bt-color);
  outline-offset: 1px;
}

.lab_zt_nur_text {
  display: none;
}

/* Sichtbar beim Text-Werkzeug und solange mit dem Verschieben-Werkzeug
   Textobjekte gewaehlt sind (Format aendern wie die Farbe) */
.lab_zt_buehne.is_text .lab_zt_nur_text,
.lab_zt_buehne.is_textwahl .lab_zt_nur_text {
  display: flex;
}

/* Schriftproben in der Auswahlliste (wo der Browser Optionen stylen darf) */
#zt_schrift option[value="arial"] { font-family: Arial, sans-serif; }
#zt_schrift option[value="verdana"] { font-family: Verdana, sans-serif; }
#zt_schrift option[value="times"] { font-family: "Times New Roman", serif; }
#zt_schrift option[value="georgia"] { font-family: Georgia, serif; }
#zt_schrift option[value="courier"] { font-family: "Courier New", monospace; }
#zt_schrift option[value="schreib"] { font-family: "Segoe Script", "Comic Sans MS", cursive; }

/* ---------- Auswahl loeschen (nur mit gewaehlten Objekten sichtbar) ---------- */

.lab_zt_nur_wahl {
  display: none;
}

.lab_zt_buehne.is_wahl .lab_zt_nur_wahl {
  display: inline-flex;
  font-family: var(--lab-mono);
  font-size: 0.74rem;
}

/* ---------- Farbpaletten: Stift- und Marker-Farben ----------
   Beide Reihen liegen im Behaelter; das aktive Werkzeug entscheidet,
   welche sichtbar ist (Textmarker bringt eigene Farben mit). */

.lab_zt_farbe[data-palette="marker"] { display: none; }

.lab_zt_buehne.is_marker .lab_zt_farbe[data-palette="stift"] { display: none; }
.lab_zt_buehne.is_marker .lab_zt_farbe[data-palette="marker"] { display: inline-block; }

.lab_zt_farbe {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--ct-color);
  outline: 1px solid var(--lab-border-color);
  padding: 0;
  cursor: pointer;
}

.lab_zt_farbe.is_aktiv {
  outline: 2px solid var(--bt-color);
  outline-offset: 1px;
}

.lab_zt_farbe:focus-visible {
  outline: 2px solid var(--bt-color);
  outline-offset: 2px;
}

/* ---------- Eigene Tafelfarbe (Farbwaehl-Feld als Chip) ---------- */

.lab_zt_eigene {
  width: 2.3rem;
  height: 2.3rem;
  padding: 0.35rem;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  background: none;
  cursor: pointer;
}

/* Die Vorschau des Browsers flach machen (Kachel statt Hochformat) */
.lab_zt_eigene::-webkit-color-swatch-wrapper { padding: 0; }
.lab_zt_eigene::-webkit-color-swatch { border: 1px solid var(--lab-border-color); border-radius: 0.35rem; }
.lab_zt_eigene::-moz-color-swatch { border: 1px solid var(--lab-border-color); border-radius: 0.35rem; }

.lab_zt_eigene:hover { background: var(--div-color); }

.lab_zt_eigene:focus-visible {
  outline: 2px solid var(--bt-color);
  outline-offset: 1px;
}

/* ---------- Zeichenflaeche ---------- */

.lab_zt_flaeche {
  position: relative;
  border: var(--lab-border);
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--div-color);
  /* Hoehe wird von app.js gesetzt (Platz unter der Kopfzeile) */
}

.lab_zt_flaeche canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;
}

.lab_zt_flaeche canvas:first-of-type {
  z-index: 1;   /* Untergrund unter der Zeichnung */
}

.lab_zt_flaeche canvas:last-of-type {
  z-index: 2;   /* Zeichnung faengt die Zeiger-Ereignisse */
}

.lab_zt_flaeche.is_verschieben canvas:last-of-type {
  cursor: move;
}

/* ---------- Text-Eingabe auf der Tafel (mehrzeilig, in-place) ----------
   Das Feld liegt durchsichtig INNERHALB der Textbox auf der Tafel
   (gestrichelte Umrandung zeigt die Bearbeitung) und uebernimmt
   Schrift, Groesse, Farbe und Ausrichtung vom gezeichneten Text;
   Lage und Breite stellt app.js aus dem Kasten ein, die Hoehe aus
   dem umgebrochenen Inhalt. Der Text bricht weich um - genauso wie
   spaeter auf dem Canvas (dieselbe Umbruchrechnung). */

.lab_zt_eingabe {
  position: absolute;
  z-index: 3;
  min-width: 3rem;     /* leeres Feld bleibt anklickbar */
  padding: 0 2px;     /* app.js rechnet das beim Ankerpunkt ein */
  white-space: pre-wrap;
  overflow-wrap: break-word;
  overflow: hidden;
  resize: none;
  line-height: 1.25;
  border: none;
  outline: 2px dashed var(--bt-color);
  outline-offset: 1px;
  background: transparent;
  color: var(--blk-color);   /* app.js stellt die Werkzeugfarbe ein */
}

.lab_zt_eingabe:focus-visible {
  outline: 2px dashed var(--bt-color);
  outline-offset: 1px;
}

/* ---------- Dialog: Funktion zeichnen ---------- */

.lab_zt_dialog {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 2.5rem;
  transform: translateX(-50%);
  width: min(24rem, 92%);
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 0.75rem;
  box-shadow: var(--lab-shadow-2);
  padding: 0.9rem 1rem;
}

.lab_zt_dialog_titel {
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: var(--blk-color);
}

.lab_zt_dialog_zeile {
  display: block;
  font-size: 0.85rem;
  color: var(--grey600-color);
  margin-bottom: 0.2rem;
}

.lab_zt_dialog input[type="text"] {
  width: 100%;
  font-family: var(--lab-mono);
}

.lab_zt_graf_hilfe {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--grey600-color);
}

.lab_zt_dialog_reihe {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.lab_zt_flaeche video {
  display: none;   /* wird per JS auf Block gesetzt: nur im Live-Modus */
  position: absolute;
  inset: 0;
  z-index: 0;      /* unter beiden Ebenen, damit darueber gezeichnet werden kann */
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--blk-color);
  pointer-events: none;
}

.lab_zt_flaeche.is_kamera video {
  display: block;
}

/* ---------- Statuszeile: Einblendung auf der Tafel ----------
   Liegt als Karte am unteren Tafelrand (im Markup das letzte Kind der
   Zeichenflaeche), faengt keinen Zeiger und verschwindet, ohne Text. */

.lab_zt_status {
  position: absolute;
  z-index: 3;
  left: 0.75rem;
  bottom: 0.7rem;
  max-width: calc(100% - 1.5rem);
  margin: 0;
  padding: 0.25rem 0.7rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--blk-color);
  background: var(--lab-toolbar-bg);
  border: 1px solid var(--lab-border-color);
  border-radius: 8px;
  box-shadow: var(--lab-shadow-1);
  pointer-events: none;
}

.lab_zt_status:empty {
  display: none;
}

/* ---------- Werkzeug-Tipp (Hover-Info, Vorbild Bildbearbeitung) ----------
   Der native title-Text dient als Quelle und wird waehrend der Anzeige
   geleert, damit der Browser keine zweite Blase zeigt. */

.lab_zt_tip {
  position: fixed;
  z-index: 50;
  max-width: 21rem;
  padding: 0.55rem 0.75rem;
  background: var(--ct-color);
  color: var(--blk-color);
  border: 1px solid var(--lab-border-color);
  border-radius: 10px;
  box-shadow: var(--lab-shadow-2);
  pointer-events: none;   /* die Blase faengt den Zeiger nie ab */
}

.lab_zt_tip_kopf {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.15rem;
}

.lab_zt_tip_name {
  font-weight: 600;
  font-size: 0.86rem;
}

.lab_zt_tip_kuerzel {
  font-family: var(--lab-mono);
  font-size: 0.72rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--lab-border-color);
  border-radius: 5px;
  color: var(--grey600-color);
  white-space: nowrap;
}

.lab_zt_tip_text {
  display: block;
  font-size: 0.8rem;
  line-height: 1.35;
}

/* ---------- Dialog: Tastenkuerzel ---------- */

.lab_zt_hilfe {
  width: min(30rem, 92%);
  /* Der Dialog bleibt immer ganz in der Tafel (oben 2.5rem Abstand):
     ist die Liste laenger als die Tafel, rollt sie IM Dialog - ohne
     diese Grenze scrollt der Fokus auf Schliessen die ganze Tafel
     und der Dialogkopf verschwindet unter dem Rand (overflow hidden). */
  max-height: calc(100% - 5rem);
  overflow: auto;
}

.lab_zt_hilfe_liste {
  margin: 0;
}

.lab_zt_hilfe_liste dt {
  font-family: var(--lab-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey600-color);
  margin-top: 0.55rem;
}

.lab_zt_hilfe_liste dt:first-child {
  margin-top: 0;
}

.lab_zt_hilfe_liste dd {
  margin: 0.15rem 0 0;
  font-size: 0.84rem;
  line-height: 1.6;
}

.lab_zt_hilfe_liste dd span {
  font-family: var(--lab-mono);
  font-size: 0.76rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--lab-border-color);
  border-radius: 5px;
  white-space: nowrap;
}

/* ---------- Vollbild ---------- */

.lab_zt_buehne:fullscreen {
  background: var(--bd-color);
  padding: 0.75rem;
}

.lab_zt_buehne:fullscreen .lab_zt_flaeche {
  flex: 1;
  min-height: 0;
}

/* ---------- Schmal (Handy) ---------- */

@media (max-width: 640px) {
  .lab_zt_gruppe {
    padding: 0 0.3rem;
    /* Eine Gruppe allein ist breiter als der Schirm (Textformat mit
       Schrift, Groesse, Rahmen, Fuellung) - sie bricht in Reihen um */
    flex-wrap: wrap;
  }
}