/*
 * PixelHobel – gemeinsamer Listen-Standard (.phx-list)
 *
 * Die Form stammt aus der Verwaltung der Nachmittagsbetreuung (com_phbetreuung)
 * und ist hier ohne Komponentenbezug abgelegt, damit alle Arbeitslisten der
 * Schule gleich aussehen und sich gleich bedienen lassen: Kopfzeile mit
 * Sortierung, farbiger Zustandsstreifen links, anklickbare Zeile mit
 * aufklappbaren Einzelheiten, Plaketten, eine Leiste für Sammelaktionen,
 * Seitenblättern und auf schmalen Bildschirmen keine Seitwärtsrollerei.
 *
 * Alle Farben kommen aus den Variablen des Templates (--ars-*). Die Tönungen
 * entstehen per color-mix aus dem jeweiligen Grund – dadurch stimmen Hell- und
 * Dunkelmodus ohne eigene Regeln je Modus.
 *
 * Fachliche Zustände (»bestätigt«, »Warteliste«, …) gehören NICHT hierher: Die
 * Komponente vergibt dafür einen der allgemeinen Modifier (--ok, --offen,
 * --warnung, --info, --neutral) oder setzt in einer eigenen Regel nur die
 * Variable --phx-streifen.
 */

/* --- Kopfzeile über der Liste ----------------------------------------- */
.phx-list-kopf {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between;
  margin: 1.2rem 0 .6rem;
}
.phx-list-kopf__zahl { font-size: .9rem; color: var(--ars-text-soft, #5b6670); }
.phx-list-filter { display: flex; flex-wrap: wrap; gap: .35rem; }
.phx-list-filter__eintrag {
  display: inline-block; padding: .35rem .7rem; border: 1px solid var(--ars-border, #d9dedf);
  border-radius: 999px; text-decoration: none; color: inherit; font-size: .9rem; font-weight: 600;
}
.phx-list-filter__eintrag.is-active {
  background: var(--ars-bordeaux, #94132f); border-color: var(--ars-bordeaux, #94132f); color: #fff;
}

/* --- Leiste für Aktionen auf mehreren Zeilen --------------------------- */
.phx-list-stapel {
  padding: .9rem 1rem; margin-bottom: 1rem; border-radius: 6px;
  background: var(--ars-bg-soft, #f1f6f5);
}
/* Titel links, Zähler rechts: Der Zähler wechselt seinen Text, ohne dass
   Auswahlfeld und Knopf verrutschen. */
.phx-list-stapel__kopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  margin-bottom: .45rem; font-weight: 600; font-size: .9rem;
}
.phx-list-stapel__hinweis { font-weight: 400; color: var(--ars-text-soft, #5b6670); }
.phx-list-stapel__zeile { display: flex; gap: .6rem; }
.phx-list-stapel__zeile select {
  /* 50px: dieselbe Höhe wie Knöpfe (button.css) und Formularfelder
     (form.css) - Auswahlfeld, Knopf und Bereichsmenü sitzen damit auf
     einer Linie. */
  flex: 1 1 auto; min-width: 0; height: 50px; padding: .4rem .6rem; box-sizing: border-box;
  border: 1px solid var(--ars-border, #d9dedf); border-radius: 6px; font: inherit;
  color: var(--ars-text, #20252b); background: var(--ars-bg, #fff);
}
.phx-list-stapel__zeile > button, .phx-list-stapel__zeile > .phx-list-stapel__knopf {
  flex: 0 0 11rem; justify-content: center;
}
@media (max-width: 32rem) {
  .phx-list-stapel__zeile { flex-direction: column; }
  .phx-list-stapel__zeile > button, .phx-list-stapel__zeile > .phx-list-stapel__knopf { flex: 1 1 auto; }
}

/* --- Die Tabelle -------------------------------------------------------
 * Das Anzeigeverhalten steht bewusst ausdrücklich da: Manche Template-Regeln
 * machen Zeilen und Zellen sonst zu Blöcken, und die Liste bricht auseinander.
 */
.phx-list { width: 100%; border-collapse: collapse; font-size: .95rem; display: table; }
.phx-list thead { display: table-header-group; }
.phx-list tbody { display: table-row-group; }
.phx-list tr { display: table-row; }
/* Diese Zeile muss das hidden-Attribut wieder durchlassen: In Browsern, deren
   eingebauter Stil `[hidden] { display:none }` OHNE !important setzt (WebKit-
   Staende, aeltere Engines), gewinnt `.phx-list tr` und aufklappbare Detail-
   zeilen stehen dauerhaft offen. Aktuelles Chromium setzt !important und ist
   nicht betroffen - der Fehler zeigt sich also nur in manchen Browsern.
   Zuerst in com_phrepi aufgefallen (29.08.2026). */
.phx-list tr[hidden] { display: none; }
.phx-list th, .phx-list td {
  display: table-cell; text-align: left; padding: .55rem .6rem; vertical-align: middle;
  border-bottom: 1px solid var(--ars-border, #d9dedf);
}
.phx-list th { background: var(--ars-bg-soft, #f1f6f5); font-size: .9rem; }
.phx-list thead a { text-decoration: none; color: inherit; }
.phx-list thead a:hover { text-decoration: underline; }

/* Zustandsstreifen: eine Variable, die der Modifier setzt. */
.phx-list__zeile > td:first-child { box-shadow: inset 4px 0 0 var(--phx-streifen, transparent); }
.phx-list__zeile--ok { --phx-streifen: var(--ars-gruen, #2e7d32); }
.phx-list__zeile--offen { --phx-streifen: var(--ars-orange, #b75c00); }
.phx-list__zeile--warnung { --phx-streifen: var(--ars-rot, #b3261e); }
.phx-list__zeile--info { --phx-streifen: var(--ars-tuerkis, #018186); }
.phx-list__zeile--neutral { --phx-streifen: var(--ars-grau, #6c757d); }

/* Die ganze Zeile ist anfassbar – nur das Auswahlkästchen bleibt ausgenommen. */
.phx-list tbody .phx-list__zeile { cursor: pointer; }
.phx-list tbody .phx-list__zeile:hover > td { background: var(--ars-bg-soft, #f1f6f5); }
.phx-list tbody .phx-list__zeile:hover .phx-list__aufklappen { text-decoration: underline; }

.phx-list__col-check { width: 2.2rem; text-align: center; cursor: default; }
/* Breitenhelfer für die übrigen Spalten – fachliche Namen bleiben in der
   Komponente, die Maße sind überall dieselben. */
.phx-list__eng { width: 5rem; white-space: nowrap; }
.phx-list__datum { width: 7rem; white-space: nowrap; }
.phx-list__schmal { width: 10rem; }
.phx-list__mittel { width: 14rem; }

.phx-list__aufklappen {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
  color: var(--ars-bordeaux, #94132f); cursor: pointer; text-align: left;
}
.phx-list__aufklappen:hover { text-decoration: underline; }
.phx-list__aufklappen:focus-visible {
  outline: 2px solid var(--ars-bordeaux, #94132f); outline-offset: 2px; border-radius: 3px;
}

.phx-list__detail > td { background: var(--ars-bg-soft, #f1f6f5); }
.phx-list__mobil { display: none; }

/* --- Plaketten ---------------------------------------------------------
 * Getönt aus der jeweiligen Farbe: im Hellen ein heller Grund mit kräftiger
 * Schrift, im Dunkeln von selbst umgekehrt – ohne zweiten Regelsatz.
 */
.phx-badge {
  display: inline-block; font-size: .75rem; font-weight: 700; padding: .12rem .55rem;
  border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--ars-grau, #6c757d) 18%, var(--ars-bg, #fff));
  color: var(--ars-text, #20252b);
}
.phx-badge--ok { background: color-mix(in srgb, var(--ars-gruen, #2e7d32) 18%, var(--ars-bg, #fff)); color: var(--ars-gruen, #2e7d32); }
.phx-badge--offen { background: color-mix(in srgb, var(--ars-orange, #b75c00) 18%, var(--ars-bg, #fff)); color: var(--ars-orange, #b75c00); }
.phx-badge--warnung { background: color-mix(in srgb, var(--ars-rot, #b3261e) 18%, var(--ars-bg, #fff)); color: var(--ars-rot, #b3261e); }
.phx-badge--info { background: color-mix(in srgb, var(--ars-tuerkis, #018186) 18%, var(--ars-bg, #fff)); color: var(--ars-tuerkis, #018186); }
.phx-badge--neutral { background: color-mix(in srgb, var(--ars-grau, #6c757d) 22%, var(--ars-bg, #fff)); color: var(--ars-text-soft, #5b6670); }

/* --- Seiten blättern --------------------------------------------------- */
.phx-list-seiten {
  display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; justify-content: center; margin: 1.2rem 0;
}
.phx-list-seite {
  min-width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .5rem; border: 1px solid var(--ars-border, #d9dedf); border-radius: 6px;
  text-decoration: none; color: inherit;
}
.phx-list-seite.is-active {
  background: var(--ars-bordeaux, #94132f); border-color: var(--ars-bordeaux, #94132f); color: #fff; font-weight: 700;
}
.phx-list-seiten__luecke { padding: 0 .2rem; }

.phx-list-leer { padding: 1.5rem; border-radius: 6px; background: var(--ars-bg-soft, #f1f6f5); }

/* --- Schmale Bildschirme -----------------------------------------------
 * Nebenspalten wandern unter den Namen: Was `--mobil-weg` trägt, verschwindet;
 * die Zusatzzeile `__mobil` erscheint dafür.
 */
@media (max-width: 720px) {
  /* Elementname MIT Klasse: Die Grundregel `.phx-list td` weiter oben ist
     spezifischer als eine einzelne Klasse und würde sonst gewinnen – die
     Nebenspalte bliebe auf dem Handy stehen. Dieselbe Falle wie bei Font
     Awesome, nur gegen die eigene Grundregel. */
  .phx-list th.phx-list__mobil-weg, .phx-list td.phx-list__mobil-weg { display: none; }
  .phx-list__mobil { display: block; font-size: .85rem; color: var(--ars-text-soft, #5b6670); }
  .phx-list__schmal { width: auto; }
}

/* --- Nur für Screenreader ----------------------------------------------
 * Das Template „ars" bringt diese Hilfsklasse nicht mit (sie steckt nur in
 * Cassiopeia). Ohne sie stehen Tabellen-Beschriftungen und Feldnamen, die
 * eigentlich nur vorgelesen werden sollen, sichtbar auf der Seite – 2026-08-23
 * genau so aufgefallen („Anmeldungen zu den Arbeitsgemeinschaften" mitten
 * über der Liste). Sie gehört zum Listen-Baustein, weil jede Arbeitsliste
 * eine <caption> für die Vorlesehilfe trägt.
 */
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}