/* Design-Tokens der internen Bedienoberflaechen (Skill ui-tresen, ADR-011 §3.1).
 * Dunkles Grundschema: Barlicht/Halbdunkel, helle Flaechen blenden und machen nachtblind.
 *
 * MARKE gegen DOMAENE (01.08.2026). Seit Scheibe 2 stehen die Markenwerte — Flaechen, Text,
 * Akzent, Schrift, Radius — nicht mehr hier, sondern in `core/marke.css`, gemeinsam mit der
 * internen Shell. Vorher hatte diese Datei ihre eigene Palette, und der Akzent war Blau, waehrend
 * die Buchung Gruen trug.
 *
 * 🔴 Was hier BLEIBT, ist die Bedeutung: `--frei`, `--reserviert`, `--belegt`, `--gesperrt`, die
 * Tisch-Fuellungen und die Statusindikatoren. Am Raumplan heisst `belegt = rot`, weil der Tisch
 * besetzt ist — das ist Domaenenwissen und keine Geschmacksfrage.
 */
@import url("../core/marke.8d67ff76d46e.css");

:root {
  /* --- Marke: kommt aus core/marke.css ------------------------------------------------------- */
  --flaeche-0: var(--marke-bg);
  --flaeche-1: var(--marke-karte);
  /* 🔴 `--flaeche-2` bleibt EIGEN. In der Buchung ist die dritte Flaeche eingesenkt (Eingabefeld),
     hier bedeutet sie **erhoeht/aktiv** (aktiver Reiter, Hover). Sie zu tauschen kehrte die
     Tiefenwirkung um: der aktive Reiter saehe eingedrueckt aus statt hervorgehoben. */
  --flaeche-2: #282c35;   /* erhoeht, aktiv */
  --linie:     var(--marke-linie);

  /* Text */
  --text:       var(--marke-text);
  --text-leise: var(--marke-leise);

  /* Status — semantisch benannt, nicht nach Farbe (Skill: nie nur ueber Farbe) */
  --frei:       #3ba55d;
  --reserviert: #d9a441;
  --belegt:     #c94f4f;
  --walk-in:    #4a8fd4;
  --gesperrt:   #6b7280;
  --ausstehend: #8b5cf6;  /* Offline-Queue */
  --event:      #b06cc9;
  --jetzt:      #ff4fa3;  /* Jetzt-Linie — bewusst KEINE Statusfarbe (nicht Blau=Walk-in) */

  /* Status-Schattierung (Mark 19.07.): Raumplan-Tisch-Fills über Helligkeit statt Ampel.
     Fallback; die echten Werte kommen aus Anzeigekonfig (:root-Override, admin-editierbar). */
  --tisch-aktiv:     #c9bd9a;  /* aktiv (angekommen/belegt/walk_in) — warmes Beige */
  --tisch-erwartung: #8b93a3;  /* in Erwartung (reserviert) — helles Grau */
  --tisch-leer:      #1e2229;  /* leer/frei — versinkt im Dunkel */
  --tisch-gesperrt:  #16181d;  /* gesperrt — dunkel + Schloss */
  --tisch-erledigt:  #2f333c;  /* /spiele/-Block vorbei (endet_am <= jetzt) — gedämpft, aber deutlich über dem Hintergrund */

  /* Status-Indikator ●/! (Teil F). Dunkleres Grün, damit es auch auf hellem Beige-Fill liest. */
  --ind-an:   #1d7a4a;  /* anwesend bestätigt — grün, auf hell UND dunkel lesbar */
  --ind-warn: #f2555a;  /* überfällig — rot */

  /* Akzent — das generische Aktiv-Blau: Nav/Reiter aktiv, Auswahl, Regler, "heute". Eigener Name
     (ABNAHME 6), damit das Ändern der Walk-in-STATUSfarbe nicht die halbe Navigation umfärbt.
     Derselbe Ton wie --walk-in, aber zwei Bedeutungen brauchen zwei Namen. */
  /* Seit 01.08.2026 das Filzgruen der Marke statt eines eigenen Blaus. Damit faellt nebenbei die
     alte Doppeldeutigkeit weg: der Akzent hatte denselben Ton wie `--walk-in`, und ein aktiver
     Reiter sah aus wie ein Walk-in-Status. */
  --akzent:     var(--marke-akzent);

  /* Textfarbe AUF den Statusflaechen (dunkler Text auf hellen Statusfarben = lesbar) */
  --auf-status: var(--marke-akzent-text);

  /* Abstaende — eine Skala, keine Zufallswerte */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  /* Trefferflaeche — Minimum fuer alles Antippbare (nasse Hand, kein Cursor) */
  --tap: var(--marke-tap);

  --radius: var(--marke-radius);
  --font: var(--marke-font);
  --schatten: var(--marke-schatten);
}

/* Status-Indikator ●/! — EINE Quelle (Regel 02) für Kachel (.rp-ind), Ankunftszeile (.ank-ind)
   und /spiele/-Block (.sp-ind): Farbe kommt aus --ind-*, die dunkle Kontur (text-shadow) umrandet
   das Symbol, damit es auf hellem (Beige) wie dunklem Fill liest. Position bleibt beim Consumer. */
.status-ind { font-weight: 900; line-height: 1; font-size: 1.08em;
  text-shadow: 0 0 2px rgba(0,0,0,.9), 0 0 1px rgba(0,0,0,.95); }
.status-ind.an { color: var(--ind-an); }
.status-ind.ueberfaellig { color: var(--ind-warn); }

/* Grundhaltung fuer jede Seite, die die Tokens laedt. Zurueckhaltung ist die Gestaltung. */
.ui-dunkel {
  background: var(--flaeche-0);
  color: var(--text);
  font-family: var(--font);
  font-variant-numeric: tabular-nums;   /* Uhrzeiten/Zahlen untereinander */
}
.ui-dunkel a { color: var(--akzent); }
.ui-dunkel h1 { font-size: 1.2rem; margin: 0 0 var(--s3); }

/* Einheitliche Navigation zwischen den Ansichten */
.hauptnav { display: flex; gap: var(--s2); margin: 0 0 var(--s4); flex-wrap: wrap; }
.hauptnav a {
  min-height: var(--tap); display: inline-flex; align-items: center;
  padding: 0 var(--s4); text-decoration: none;
  background: var(--flaeche-1); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--radius); font-size: .95rem;
}
.hauptnav a.aktiv { background: var(--flaeche-2); border-color: var(--akzent); color: var(--akzent); }

/* §2b: Eine Zeile — ORT links (wo bin ich), SICHT rechts (was mache ich hier), Editor abgesetzt.
   Der --flaeche-1-Hintergrund grenzt die Leiste als Einheit vom Inhalt ab. 50 px bleiben (10c). */
.kopfleiste { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  background: var(--flaeche-1); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 0 var(--s2); margin: 0 0 var(--s3); min-height: var(--tap); }
.ort { display: flex; align-items: center; flex: 0 0 auto; }        /* bleibt immer sichtbar */
.ort a { min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 var(--s3);
  text-decoration: none; color: var(--text-leise); font-size: .98rem; border-radius: var(--radius); }
.ort a.aktiv { color: #fff; font-weight: 700; }
.ort .sep { color: var(--linie); user-select: none; }
/* SICHT weicht bei Enge nach unten, der ORT nie (§2b: bei zu wenig Platz weicht rechts).
   BA13 (Mark 21.07.): linksbündig — kein `margin-left:auto` mehr, das die SICHT nach rechts über
   die volle Breite zog. Alle Kopfleisten-Blöcke packen jetzt nach links. */
.sicht { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.sicht > * { margin: 0; }
.editor-link { min-height: var(--tap); display: inline-flex; align-items: center; margin-left: var(--s3);
  padding: 0 var(--s3); text-decoration: none; color: var(--text-leise); opacity: .65;
  border: 1px solid var(--linie); border-radius: var(--radius); font-size: .9rem; }
.editor-link.aktiv { opacity: 1; color: var(--akzent); background: var(--flaeche-2); border-color: var(--akzent); }

/* Verbindungs-/Datenstand — immer sichtbar (Skill), nicht als verschwindender Toast */
.qbadge {
  background: var(--ausstehend); color: #fff; padding: 2px var(--s2);
  border-radius: 10px; font-size: .8rem; font-weight: 600;
}
.stand-leise { color: var(--text-leise); font-size: .8rem; }
.veraltet { opacity: .55; }   /* veraltete Daten sehen anders aus als frische */

/* Gemeinsames Buchungs-Edit-Popup (BAUAUFTRAG 8) — EINE Optik-Quelle statt Kopie je Seite.
   Dunkel-Tokens + 48-px-Trefferflächen wie der Rest; genutzt von Planung + Raumplan. */
/* Querformat statt Hochformat (Mark 18.07. §2a): zweispaltig ab 640px, am Handy einspaltig.
   48px bleiben (kleiner durch Breite, nicht durch Schrumpfen). Kopf/Meldung/Aktion spannen beide Spalten. */
.buchpop { display: grid; grid-template-columns: 1fr; gap: var(--s2) var(--s4); align-items: start; }
@media (min-width: 640px) { .buchpop { grid-template-columns: 1fr 1fr; } }
.buchpop .editkopf, .buchpop #edit-melden, .buchpop .edit-aktion,
.buchpop .edit-chips, .buchpop .knoepfe, .buchpop label.voll { grid-column: 1 / -1; }
.buchpop .editkopf { font-weight: 700; font-size: 1.05rem; margin: 0; }
.buchpop label { display: flex; flex-direction: column; gap: 3px; font-size: .82rem; color: var(--text-leise); }
.buchpop label.cb { flex-direction: row; align-items: center; gap: var(--s2); color: var(--text); font-size: .95rem; }
/* BAUAUFTRAG 9 Punkt 7: EINE Schriftart für alle Popup-Felder (vorher Labels system-ui, Eingaben
   Arial, Datum monospace). font-family explizit auf die Token-Familie, nicht per Feld. */
.buchpop, .buchpop input, .buchpop select, .buchpop textarea, .buchpop button { font-family: var(--font); }
.buchpop input, .buchpop select, .buchpop textarea {
  min-height: var(--tap); background: var(--flaeche-0); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--radius); padding: 0 var(--s2); font-size: .95rem; }
.buchpop textarea { min-height: calc(var(--tap) * 1.4); padding: var(--s2); }
.buchpop label.cb input[type=checkbox] { min-height: 0; width: 22px; height: 22px; }
.buchpop .edit-melden { margin: 0; font-size: .9rem; color: var(--text); }
.buchpop .edit-melden.konflikt { color: var(--reserviert); font-weight: 700; }
.buchpop .edit-aktion { display: flex; gap: var(--s2); margin-top: var(--s1); }
.buchpop .edit-aktion button { flex: 1; min-height: var(--tap); border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--linie); font-size: .95rem; font-weight: 700; }
.buchpop .edit-aktion button[type=submit] { background: var(--akzent); border-color: var(--akzent); color: var(--auf-status); }
.buchpop .edit-aktion .sekundaer { background: var(--flaeche-2); color: var(--text); font-weight: 400; }
/* Storno: destruktiv, aber ruhig (Outline statt gefüllt) — konkurriert nicht mit dem Akzent-Speichern. */
.buchpop .edit-aktion .storno { background: transparent; color: var(--belegt); border-color: var(--belegt); }
/* Status-Schnellaktionen (A/N usw.) — Outline in ok/warn, dieselbe Semantik wie die Ankunftsspalte. */
.buchpop .edit-aktion .prim { background: transparent; font-weight: 700; }
.buchpop .edit-aktion .prim.ok   { color: #7ede9f; border-color: #3f9d6b; }
.buchpop .edit-aktion .prim.warn { color: var(--reserviert); border-color: var(--reserviert); }

/* BAUAUFTRAG 10: Konflikt-Auflösung (je Gegenpartei ein Verschiebe-Angebot). Popup wie Drag-Overlay. */
.konflikt { display: flex; flex-direction: column; gap: var(--s2); }
.konflikt-y { border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s2); }
.konflikt-y-kopf { margin: 0 0 var(--s1); font-weight: 600; font-size: .9rem; }
.konflikt-move { display: flex; gap: var(--s2); align-items: center; }
.konflikt-move select { flex: 1; min-height: var(--tap); background: var(--flaeche-0); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--radius); padding: 0 var(--s2); }
.konflikt-move button { min-height: var(--tap); border-radius: var(--radius); padding: 0 var(--s3); cursor: pointer;
  background: transparent; border: 1px solid #3f9d6b; color: #7ede9f; font-weight: 700; }
.konflikt-hinweis { font-size: .82rem; color: var(--text-leise); margin: 0; }