/* Tabellen der Verwaltung. Regeln: /doku/paradigmen-oberflaeche, Abschnitt Tabellen und Listen.
   Volle Breite des Inhaltsbereichs, kein Rollbalken im Inneren, auf schmalen Bildschirmen Karten.
   Die Merkmale stammen aus admin.css. */

table {
    border-collapse: collapse;
    width: 100%;
    margin: var(--abstand-4) 0;
}

/* Eine Messtabelle hat so viele Spalten, wie Faktoren gewaehlt sind. Sie nimmt die Breite, die
   sie braucht, und mindestens die volle; enger wird sie nicht. Damit sie nicht in einem Kasten
   mit eigener Bildlaufleiste steckt, verliert der Inhaltsbereich hier seine Hoechstbreite:
   breiter wird der Bereich, nicht enger die Tabelle → /doku/paradigmen-oberflaeche. */
.inhalt:has(.urltabelle) {
    max-width: 100%;
}

.urltabelle {
    width: auto;
    min-width: 100%;
}

th,
td {
    border: 1px solid var(--linie);
    padding: var(--abstand-2) var(--abstand-3);
    text-align: left;
    vertical-align: top;
}

/* Der Kopf steht unten: bricht eine Beschriftung um, sitzen alle Koepfe trotzdem auf einer Linie. */
th {
    background: var(--flaeche);
    vertical-align: bottom;
}

/* Eine abgelehnte Zeile des Audits traegt eine Marke am Rand. Die Farbe allein sagte es nicht:
   das Ergebnis steht ohnehin als Wort in der Zeile → /doku/barrierefreiheit. */
tr.abgelehnt > td:first-child {
    border-left: 3px solid currentColor;
    font-weight: 600;
}

/* Sortierung ist eine Handlung und darum eine Schaltflaeche: mit der Maus und mit der
   Tastatur zu bedienen. Sie sieht aus wie die Kopfzelle, in der sie steht. */
th > button.sortierung {
    display: block;
    font: inherit;
    font-weight: 700;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    min-height: var(--ziel-klein);
    cursor: pointer;
    text-align: inherit;
    width: 100%;
}

/* Der Pfeil bleibt am letzten Wort haengen, statt allein in eine neue Zeile zu rutschen. */
th[aria-sort="ascending"] > button.sortierung::after {
    content: "\00a0↑";
}

th[aria-sort="descending"] > button.sortierung::after {
    content: "\00a0↓";
}

td.zahl,
th.zahl {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Ein Kopf, den nur ein Vorlesegeraet braucht: die Spalte der Handlungen traegt keinen
   sichtbaren Namen, aber sie hat einen. */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

caption {
    text-align: left;
    color: var(--gedaempft);
    font-size: var(--schrift-klein);
    padding-bottom: var(--abstand-2);
}

.historie-tabelle {
    font-size: var(--schrift-klein);
}

/* Kopfzeile einer Liste: Filter und Suche. Die Felder behalten ihre benannte Breite;
   sie stehen nebeneinander, solange der Platz reicht, und brechen sonst um. */
.tabellenkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--abstand-3) var(--abstand-4);
    margin: var(--abstand-4) 0;
    max-width: none;
}

.tabellenkopf .feld,
.blaetterung .feld {
    margin: 0;
}

.tabellenkopf .schalter,
.blaetterung .schalter {
    margin-bottom: var(--abstand-2);
}

.tabellenkopf .aktionen,
.ansichten .aktionen {
    margin: 0;
}

/* Ein Formular, das sich ueber eine Tabellenzeile erstreckt: seine Felder stehen in den Zellen,
   und ihre Beschriftung leistet der Spaltenkopf. Ohne Aussenabstand, damit die Zeile nur so hoch
   wird wie ihr Inhalt; die Schaltflaechen der Zeile stehen beieinander in einer Leiste
   → /doku/paradigmen-oberflaeche. */
td > .feld,
td > .aktionen {
    margin: 0;
}

/* Die Schaltflaechen einer Zeile stehen enger beieinander als in einer Leiste: die Zeile gehoert
   der Sache, die Handlung steht nur daneben. So bleiben zwei oder drei von ihnen nebeneinander,
   statt die Zeile auf die doppelte Hoehe zu bringen. Die Trefferflaeche bleibt unberuehrt: die
   Hoehe kommt aus der Mindesthoehe der Schaltflaeche, nicht aus ihrem Innenabstand. */
td > .aktionen {
    gap: var(--abstand-2);
}

td > .aktionen button,
td > .aktionen .knopf {
    padding-inline: var(--abstand-3);
}

/* Wo die Tabelle eine Tabelle ist, fordert die Handlungsspalte die Breite einer Reihe: der
   Tabellensatz teilt den freien Platz sonst nach Inhalt auf und laesst die Schaltflaechen
   umbrechen, obwohl daneben Platz frei bleibt. Unterhalb dieser Schwelle stehen ohnehin Karten
   → /doku/paradigmen-oberflaeche. */
@media (min-width: 64rem) {
    td > .aktionen {
        min-width: max-content;
    }
}

/* Alle Bedienelemente einer Leiste enden auf derselben Grundlinie. Ein Feld traegt seine
   Beschriftung darueber und ist darum hoeher als eine Schaltflaeche; zentriert saehe beides
   gegeneinander verschoben aus → /doku/paradigmen-oberflaeche. */
.blaetterung {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--abstand-2) var(--abstand-4);
    margin: var(--abstand-4) 0;
}

/* Der Stand gehoert zur Zeile der Schaltflaechen und nicht auf die Grundlinie des Feldes. */
.blaetterung .stand {
    padding-bottom: var(--abstand-2);
}

.blaetterung .stand {
    color: var(--gedaempft);
    font-size: var(--schrift-klein);
}

.faktorliste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--abstand-3) var(--abstand-5);
    margin-top: var(--abstand-3);
}

.faktorliste .faktor {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--abstand-3);
}

.faktorliste .faktor .schalter {
    margin: 0;
}

.faktorliste .faktor .feld {
    margin: 0;
}

/* Die Gewichte stehen in einer Spalte untereinander, darum eine feste Breite je Feld. */
.faktorliste .faktor .feld input {
    width: var(--breite-winzig);
}

.ansichten {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--abstand-3) var(--abstand-4);
    margin-top: var(--abstand-5);
}

.leer {
    border: 1px dashed var(--linie);
    color: var(--gedaempft);
    padding: var(--abstand-5);
    text-align: center;
}

/* Schmale Bildschirme: jede Tabelle wird zu Karten, statt abgeschnitten oder weggerollt zu werden.
   Die Breite ist am Inhalt gewaehlt, nicht an einem Geraet: eine Tabelle der Verwaltung traegt
   Felder und Schaltflaechen in ihren Zeilen, und darunter passen Kopf und Wert nicht mehr
   nebeneinander. Es ist dieselbe Schwelle, ab der die Handlungsspalte eine Reihe fordert: darueber
   ist die Tabelle eine Tabelle, darunter eine Reihe von Karten. Die Regel gilt fuer jede Tabelle,
   weil jede Tabelle dieselbe Regel hat → /doku/paradigmen-oberflaeche. */
@media (max-width: 64rem) {
    table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    table tr {
        display: block;
        border: 1px solid var(--linie);
        margin-bottom: var(--abstand-4);
    }

    table td {
        display: flex;
        gap: var(--abstand-4);
        border: 0;
        border-bottom: 1px solid var(--linie);
    }

    table td:last-child {
        border-bottom: 0;
    }

    /* In der Karte steht der Kopf vor dem Wert; eine Zahl bleibt darum linksbuendig wie der Rest. */
    table td.zahl {
        text-align: left;
    }

    table td::before {
        content: attr(data-kopf);
        font-weight: 700;
        min-width: 9rem;
    }
}