/* Saalhelfer — was allein diese Anwendung betrifft.
 *
 * Tafel und Bausteine stehen in `gemeinsam/`: dort die Farben, Maße, Felder,
 * Knöpfe, Reiter und Schirme, hier die Abschnitte, die Pflegetabellen und
 * das Raster der Einteilung.
 *
 * **Die Farben der Sparten stehen nicht hier.** Sie sind Eingaben des
 * Benutzers, stehen im Stand und werden am Element gesetzt (Vorgabe § 2).
 * Was hier an Farbe steht, kommt aus der Tafel.
 */

:root {
  /* Der Ton dieser Anwendung — der des Sachgebiets „Justizverwaltung“ auf der
     Übersicht, derselbe, den `public/icon.svg` als Hexwert trägt. */
  --ton-app: var(--ton-blau);
}

/* ------------------------------------------------------------ Der Grundriss */

.hauptteil { padding: 0 16px 16px; max-width: 2200px; margin: 0 auto; }

.ansicht { display: flex; flex-direction: column; gap: 16px; }

/* Eine Datei schwebt über dem Fenster. */
body.ablage .hauptteil { outline: 2px dashed var(--ton-app); outline-offset: -2px; }

/* Die Zahl am Reiter „Prüfung“. Sie steht im Wort und nicht in der Ecke wie
   `knopf__zahl`: Ein Reiter ist breit genug, und in der Ecke überdeckte sie
   den Rand der Leiste. */
.reiter__zahl {
  display: inline-block;
  min-width: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--fehler);
  color: var(--auf-farbe);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.reiter__zahl[hidden] { display: none; }
.reiter__zahl--warnung { background: var(--warnung); }

/* -------------------------------------------------------------- Abschnitte */

.abschnitt {
  --farbe: var(--ton-app);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--farbe);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
  padding: 12px 16px 16px;
}

.abschnitt__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.abschnitt__titel {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--farbe);
}

.abschnitt__werkzeuge { display: flex; gap: 8px; align-items: center; }

.abschnitt__hinweis {
  margin: 0 0 12px;
  max-width: 90ch;
  font-size: 13px;
  color: var(--text-leise);
}
.abschnitt__hinweis[hidden] { display: none; }
.abschnitt__hinweis--fuss { margin: 12px 0 0; }

.abschnitt__leiste { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.abschnitt__zahl { font-size: 12px; color: var(--text-leise); font-variant-numeric: tabular-nums; }

.filter { max-width: 280px; }

/* Gericht und Geltung: drei Felder nebeneinander. */
.felder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 320px));
  gap: 12px 16px;
}

/* Feld und Knopf zum Anlegen, das Ziel von Alt+N. */
.anlegen { display: flex; gap: 6px; align-items: center; }
.anlegen .eingabe { width: auto; }
.anlegen__feld { width: 200px; }

/* ----------------------------------------------------------- Die Tabellen */

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabelle--schmal { width: auto; min-width: 480px; }

.tabelle th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-leise);
  padding: 4px 6px;
  border-bottom: 1px solid var(--linie-stark);
  white-space: nowrap;
}

.tabelle td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--linie);
  vertical-align: middle;
}

.tabelle tbody tr:hover { background: color-mix(in srgb, var(--primaer) 5%, transparent); }

.tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; width: 1%; white-space: nowrap; }
.tabelle .mitte { text-align: center; width: 1%; }
.tabelle .werkzeuge { width: 1%; white-space: nowrap; text-align: right; }
.tabelle .breit { width: 40%; }

.tabelle abbr { text-decoration: none; cursor: help; }

/* Die Felder einer Tabellenzeile so breit wie ihr Inhalt und nicht wie die
   Spalte: Eine Auswahl über die halbe Breite liest sich wie eine Überschrift. */
.tabelle .eingabe { width: auto; max-width: 100%; }

.eingabe--saal { width: 7ch; }
.eingabe--nummer { width: 10ch; }
.eingabe--groesse { width: 7ch; }

.kreuz { width: 18px; height: 18px; accent-color: var(--primaer); cursor: pointer; }

.schieber__paar { display: inline-flex; gap: 2px; margin-right: 6px; }
.schieber { min-width: 30px; justify-content: center; padding: 4px 6px; }

/* Die Farbe einer Sparte: Wähler und daneben ein Muster, wie die Zelle aussieht. */
.farbwahl__huelle { display: inline-flex; align-items: center; gap: 8px; }

.farbwahl {
  width: 40px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  background: var(--eingabe-grund);
  cursor: pointer;
}

.sparte__muster {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--linie-stark);
  border-radius: 4px;
  font-size: 12px;
}

/* Der Farbfleck einer Sparte neben ihrem Namen. */
.fleck {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--linie-stark);
  border-radius: 3px;
}

/* ------------------------------------------------------------- Besetzung */

.besetzung { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-right: 6px; vertical-align: middle; }

.marke {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 2px 1px 8px;
  border: 1px solid var(--linie-stark);
  border-radius: 12px;
  font-size: 13px;
  white-space: nowrap;
}

.marke__weg {
  border: 0;
  background: none;
  color: var(--text-leise);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
}
.marke__weg:hover, .marke__weg:focus-visible { color: var(--fehler); }

.besetzung__dazu { vertical-align: middle; }

/* ------------------------------------------------------------ Die Einteilung */

/* Raster links, Liste rechts. Beide rollen für sich und reichen bis an den
   unteren Fensterrand; die Höhen von Kopf- und Reiterleiste misst
   `gemeinsam/leistenhoehen.js`. */
.einteilung {
  --hoehe-arbeit: calc(100dvh - var(--hoehe-kopfleiste, 61px) - var(--hoehe-reiterleiste, 52px) - 28px - var(--hoehe-einteilungskopf));
  --hoehe-einteilungskopf: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: start;
}

/* Die erste Zeile: „gültig ab“ links, der Papierkorb rechts. */
.einteilung__kopf {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
}
/* Nebeneinander, ohne dass Beschriftung und Hinweis umbrechen: In einer
   Flexzeile schrumpften sie sonst vor dem Datumsfeld. */
.feld--zeile { flex-direction: row; align-items: center; gap: 8px; }
.feld--zeile > * { flex: none; white-space: nowrap; }
.feld--zeile .feld__hinweis { margin: 0; }
.feld--zeile input[type="date"] { width: auto; }

/* Ein Ziel zum Ablegen, kein Knopf: Mit der Tastatur leert `Entf`. */
.papierkorb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 2px dashed var(--linie);
  border-radius: var(--rundung);
  color: var(--text-leise);
  font-size: 13px;
}
.papierkorb--ziel { border-color: var(--fehler); color: var(--fehler); background: var(--flaeche); }

.einteilung__raster { min-width: 0; }

.raster__rahmen {
  overflow: auto;
  max-height: var(--hoehe-arbeit);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
.raster__rahmen[hidden] { display: none; }

/* `separate` und nicht `collapse`: Mit zusammenfallenden Rändern verlören
   die stehenbleibenden Köpfe beim Rollen ihre Linien. */
.raster {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.raster th, .raster td {
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.raster thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--flaeche);
  border-bottom: 2px solid var(--linie-stark);
  padding: 4px 6px;
  font-weight: 600;
  vertical-align: bottom;
}

.raster__woche, .raster__tag {
  position: sticky;
  z-index: 1;
  background: var(--flaeche);
  color: var(--text-leise);
  font-weight: 600;
  text-align: center;
}
.raster__woche { left: 0; width: 28px; min-width: 28px; }
.raster__tag { left: 28px; width: 34px; min-width: 34px; border-right: 2px solid var(--linie-stark); }
.raster thead .raster__woche, .raster thead .raster__tag { z-index: 3; }
.raster tbody .raster__woche { vertical-align: middle; font-size: 15px; }

.raster__saal { min-width: 96px; text-align: left; }
.raster__bezeichnung { display: block; font-size: 14px; }
.raster__merkmale {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-leise);
  white-space: nowrap;
}

/* Der kräftige Strich zwischen den Wochen, wie im Muster. */
.raster__wochenbeginn > th, .raster__wochenbeginn > td { border-top: 3px solid var(--text-leise); }

.zelle {
  height: 26px;
  max-width: 150px;
  padding: 2px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  user-select: none;
}

.zelle--fett { font-weight: 700; }

.zelle:focus { outline: 3px solid var(--primaer); outline-offset: -3px; }

.einteilung__leer[hidden] { display: none; }

/* ---------------------------------------------------------------- Die Liste */

.liste {
  width: 290px;
  max-height: var(--hoehe-arbeit);
  display: flex;
  flex-direction: column;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
}

.liste__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 8px 4px 12px;
}
.liste__titel { color: var(--ton-app); }
.liste__filter { padding: 4px 8px 8px; }
.liste__inhalt { overflow: auto; padding: 0 8px 8px; }

/* Eingeklappt bleibt allein der Knopf stehen, das Raster bekommt die Breite. */
.liste--eingeklappt { width: auto; }
.liste--eingeklappt .liste__titel,
.liste--eingeklappt .liste__filter,
.liste--eingeklappt .liste__inhalt { display: none; }
.liste--eingeklappt .liste__kopf { padding: 6px; }

.liste__gruppe + .liste__gruppe { margin-top: 10px; }

.liste__sparte {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-leise);
}

.liste__posten { list-style: none; margin: 0; padding: 0; }

.posten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 2.6em;
  align-items: center;
  gap: 6px;
  padding: 1px 0;
  font-size: 13px;
}

.posten__farbe {
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.posten--widmung .posten__farbe { font-style: italic; }

.posten__nummer { color: var(--text-leise); font-size: 12px; font-variant-numeric: tabular-nums; }
.posten__tage { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ------------------------------------------------------- Die Auswahl an der Zelle */

.zellauswahl {
  position: fixed;
  z-index: 50;
  width: 340px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rundung);
  box-shadow: var(--schatten-schwebend);
}
.zellauswahl[hidden] { display: none; }

.zellauswahl__kopf { margin: 0; font-size: 12px; font-weight: 600; color: var(--text-leise); }

.zellauswahl__liste { list-style: none; margin: 0; padding: 0; overflow: auto; }

.zellauswahl__gruppe {
  padding: 6px 4px 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-leise);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.zellauswahl__posten {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto 2.4em;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.zellauswahl__posten:hover { background: color-mix(in srgb, var(--primaer) 8%, transparent); }
.zellauswahl__posten--markiert,
.zellauswahl__posten--markiert:hover { background: var(--primaer); color: var(--auf-farbe); }

.zellauswahl__fleck {
  height: 16px;
  border: 1px solid var(--linie-stark);
  border-radius: 3px;
  font-size: 9px;
  line-height: 14px;
  text-align: center;
  font-style: italic;
}
.zellauswahl__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zellauswahl__nummer { font-size: 12px; opacity: 0.75; }
.zellauswahl__tage { text-align: right; font-variant-numeric: tabular-nums; }
.zellauswahl__leer { padding: 6px 4px; color: var(--text-leise); font-size: 13px; }

/* ---------------------------------------------------------------- Ziehen */

.zelle[draggable="true"] { cursor: grab; }
.posten { cursor: grab; }
.zelle--ziel { outline: 3px dashed var(--primaer); outline-offset: -3px; }
.liste--ziel { outline: 3px dashed var(--fehler); outline-offset: -3px; }

/* ---------------------------------------------------------------- Prüfung */

/* Die Markierung am Rand einer Zelle mit Befund: ein Dreieck in der Ecke.
   Ein Rahmen ringsum stritte sich mit dem des Schreibzeigers und dem beim
   Ziehen; die Ecke gehört allein dem Befund. Im PDF steht sie nicht. */
.zelle--fehler, .zelle--warnung { position: relative; }
.zelle--fehler::after, .zelle--warnung::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 11px 11px 0;
  border-color: transparent var(--fehler) transparent transparent;
}
.zelle--warnung::after { border-color: transparent var(--warnung) transparent transparent; }

/* Nach einem Sprung aus der Prüfung: die betroffenen Zellen, bis zur nächsten Änderung. */
.zelle--hervor { box-shadow: inset 0 0 0 3px var(--fehler); }
.zelle--hervor.zelle--warnung { box-shadow: inset 0 0 0 3px var(--warnung); }

.befunde { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.befund {
  display: grid;
  grid-template-columns: 5.5em 12em minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px;
  border-left: 4px solid var(--warnung);
  border-radius: 4px;
  background: color-mix(in srgb, var(--warnung) 7%, transparent);
  font-size: 14px;
}
.befund--fehler { border-left-color: var(--fehler); background: color-mix(in srgb, var(--fehler) 7%, transparent); }

.befund__stufe { font-size: 12px; font-weight: 600; color: var(--warnung); }
.befund--fehler .befund__stufe { color: var(--fehler); }
.befund__regel { font-size: 12px; color: var(--text-leise); }

.befund__verweis {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.befund__verweis:hover, .befund__verweis:focus-visible { color: var(--primaer); text-decoration: underline; }

.zaehlungen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px 24px;
  align-items: start;
}

.zaehlung__titel {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-size: 14px;
}

.tabelle--zaehlung { font-size: 13px; }
.tabelle--zaehlung tfoot th { text-align: left; font-weight: 400; color: var(--text-leise); border-bottom: 0; padding: 2px 6px; }
.tabelle--zaehlung tfoot td { border-bottom: 0; padding: 2px 6px; }
.zaehlung__summe th, .zaehlung__summe td { font-weight: 600; color: var(--text); border-top: 1px solid var(--linie-stark); }