/* ============================================================================================
   Kontor am Tresen — Anordnung fuer Mitarbeiter UND Mein Bereich (Gruppe D).
   Nur Anordnung und Bindung. Alle Farben, Groessen, Radien und Dauern kommen als Token aus
   tokens.css; alle Bauteile stehen in parts.css. Diese Datei erfindet keinen Wert.

   WARUM SIE UEBERHAUPT NOCH EXISTIERT — eine Luecke, gemeldet.
   Die beiden anderen sind geschlossen: die eigene Huelle mit dem eigenen Rueckweg (jetzt
   .k-seite und die Leiste, §5.5) und die eigenen Formularfelder (jetzt .k-schaltfeld und
   .k-auswahl-teil in parts.css — sie tragen einen Wert, den FormData liest).
     1. Der Kachelblock (D-030) muss die Klassennamen der alten Oberflaeche tragen, weil
        refreshKacheln() in app.js sie sucht. public/app.css faerbt diese Klassen mit ihren
        EIGENEN Variablen (--muted, --line), die innerhalb von .kontor die alte Farbwelt
        holen. Der Abschnitt ganz unten ersetzt diese Regeln — deshalb steht dort Farbe.
        Dazu gehoert die Betriebsart-Auswahl (.d-punkt): drei Moeglichkeiten mit je einem
        erklaerenden Satz. Als Knopfgruppe (§5.11b) waeren die Saetze weg, also ist sie
        eine Radioliste — eine Bauform, die §5.11 nicht kennt. Gemeldet.

   Der Praefix `d-` gehoert Gruppe D. Vier weitere Gruppen bauen gleichzeitig; ein Name
   ohne Praefix koennte zweimal vergeben sein.
   ============================================================================================ */

/* ============================================================================================
   2  FORMULAR
   ============================================================================================ */

.d-form {
  display: block;
}

.kontor .d-hinweis {
  color: var(--ink-3);
  padding: 6px 2px 8px;
}

/* §4.4: >= 12 px zwischen Bedienelementen mit Rahmen. */
.d-formfuss {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 0 8px;
}

/* Das Feld traegt den Wert, der Punkt zeigt ihn. Nicht display:none — ein Feld ohne
   Flaeche ist fuer Tastatur und Vorlesen nicht mehr da.
   Schalter und Auswahl stehen NICHT mehr hier: sie sind seit der Konsolidierung Bauteile
   mit echten Feldern (.k-schaltfeld, .k-auswahl-teil in parts.css). Uebrig bleibt die
   Betriebsart-Auswahl, die die Bibliothek nicht kennt — siehe unten. */
.kachel-modus > input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Der Punkt der Betriebsart-Auswahl (Standard / Auswahl / Keine). Drei Moeglichkeiten mit
   je einem erklaerenden Satz — als Knopfgruppe waeren die Saetze weg.
   Der Eckbogen steht in parts.css: §11.2 Regel 1 laesst keine Ansicht einen setzen. */
.d-punkt {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1px solid var(--rule);
  position: relative;
}

.kachel-modus > input:checked ~ .d-punkt {
  border-color: var(--brass);
}

.kachel-modus > input:checked ~ .d-punkt::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--brass);
}

.kachel-modus > input:focus-visible ~ .d-punkt {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* Der Ueberweisungs-QR eines Lohnzettels. */
.d-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-soft);
}

/* Ein QR-Code braucht in BEIDEN Modi eine helle Flaeche, sonst liest ihn keine Banking-App.
   Das ist derselbe Fall wie der Schalterknopf (§5.11a) und die Schrift auf einer Wischaktion
   (§5.12) — deshalb dasselbe Token, statt wie bisher ein eigenes #fff in dieser Ansicht
   (§11.2 Regel 1: keine Ansicht setzt eine Farbe — und keinen Eckbogen; der steht seit
   dieser Runde in parts.css). */
.d-qr img {
  background: var(--weiss);
}

/* ============================================================================================
   3  MEIN BEREICH — die eine eigene Zeile
   ============================================================================================ */

.d-ich {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 2px 16px;
}

.d-ich-zeichen {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  background: var(--brass-wash);
  color: var(--brass-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.d-ich-text {
  flex: 1;
  min-width: 0;
  display: block;
}

.d-ich-text > span {
  display: block;
}

.d-ich-text > .t4 {
  color: var(--ink-3);
}

/* ============================================================================================
   4  SCHREIBKONFLIKT (§7.2) — steht nicht mehr hier.
   Er stand zweimal im Haus, mit vertauschten Knoepfen. Sein Blatt und seine Regeln liegen
   jetzt in shell.js und parts.css (.k-konflikt*), einmal fuer die ganze App.
   ============================================================================================ */

/* ============================================================================================
   5  DER KACHELBLOCK (D-030)
   Die Klassennamen sind der Vertrag mit refreshKacheln() in public/app.js. Ihr AUSSEHEN
   kommt aus public/app.css und traegt dort die alten Variablen. Innerhalb von .kontor gilt
   stattdessen das hier — Spezifitaet 0,2,0 gegen 0,1,0, und diese Datei wird spaeter
   geladen. app.css bleibt unberuehrt.

   Die vier `border-radius: 0`, die den Eckbogen aus app.css zuruecknehmen, stehen in
   parts.css. §11.2 Regel 1 macht keinen Unterschied zwischen einen Bogen setzen und einen
   Bogen auf 0 setzen: beides ist eine Deklaration in einer Ansicht.
   ============================================================================================ */

.kontor .kachel-block {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.kontor .kachel-block.kachel-locked .kachel-modi,
.kontor .kachel-block.kachel-locked .kachel-list {
  opacity: .3;
}

/* app.css gibt dieser Zeile eine rosa Flaeche mit Rahmen. Innerhalb von .kontor traegt
   Farbe einen Zustand oder ist nicht da (§2.1 Regel 2) — und "Admin sieht alles" ist kein
   Fehler, sondern ein Hinweis. Also Text in Messing, keine Flaeche. */
.kontor .kachel-admin-note {
  color: var(--brass-ink);
  margin: 0;
  padding: 6px 2px 8px;
  background: none;
  border: 0;
}

.kontor .kachel-admin-note[hidden] {
  display: none;
}

.kontor .kachel-modi {
  display: block;
}

.kontor .kachel-list {
  display: block;
  padding-top: 8px;
}

.kontor .kachel-list[hidden] {
  display: none;
}

.kontor .kachel-group {
  display: block;
  margin: 0;
  padding: 8px 0 12px;
  border: 0;
  background: none;
}

.kontor .kachel-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}

.kontor .kachel-group-head > .v1 {
  color: var(--ink-2);
}

.kontor .kachel-bulk {
  display: inline-flex;
  gap: 16px;
}

.kontor .kachel-items {
  display: block;
}

/* Eine Zeile der gruppierten Liste (§5.8) mit einem Haken statt eines Betrags. */
.kontor .kachel-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  background: none;
}

.kontor .kachel-item input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--brass);
}

.kontor .kachel-name {
  flex: 1;
  min-width: 0;
  color: var(--ink);
}

.kontor .kachel-reason {
  flex: 0 0 auto;
  color: var(--ink-3);
}

/* Nicht erreichbar: das Recht dafuer fehlt oben. Kein Durchstreichen — der Grund steht
   daneben als Wort, und Farbe allein traegt hier keinen Zustand (§2.1 Regel 2). */
.kontor .kachel-item.kachel-off .kachel-name {
  color: var(--ink-3);
  text-decoration: none;
}

.kontor .kachel-item.kachel-off input[type="checkbox"] {
  opacity: .3;
}