/* Übersichtslisten – der gemeinsame Rahmen aller Listen (Anfragen, Aufträge,
   Prüfmittel, Zertifikate): Werkzeugleiste mit Filtern links und Suche rechts,
   Karte mit Tabelle, Zustandszeile, darunter die Blätterleiste
   (Components/ListPager). Was in den Zellen steht – Status-Pillen, Fristen,
   Abdeckung – bleibt im Stylesheet der jeweiligen Seite.

   Global statt im Seiten-CSS: Die Tabelle enthält Zellen aus Komponenten
   (Components/SortHeader), die das isolierte CSS einer Seite nicht erreicht,
   und die Listen sollen sich nicht wieder auseinanderentwickeln. */

/* ---------- Werkzeugleiste ---------- */

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

.list-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.list-chip {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-headings);
    background: var(--calids-color-surface);
    border: 1px solid var(--calids-palette-grey-400);
    border-radius: var(--calids-border-radius-full);
}

    .list-chip:hover {
        border-color: var(--calids-color-primary-500);
    }

    .list-chip.on {
        color: var(--calids-color-primary-500);
        background: var(--calids-color-primary-100);
        border-color: var(--calids-color-primary-100);
    }

/* Auswahlfelder als Filter (Zertifikate) – in der Form der Chips. */
.list-select {
    padding: 6px 12px;
    font-size: 13px;
    color: var(--color-text-headings);
    background: var(--calids-color-surface);
    border: 1px solid var(--calids-palette-grey-400);
    border-radius: var(--calids-border-radius-full);
}

/* ---------- Karte und Tabelle ---------- */

.list-card {
    background: var(--calids-color-surface);
    border: 1px solid var(--calids-palette-grey-400);
    border-radius: var(--calids-border-radius-lg, 10px);
    overflow: hidden;
}

/* Die Tabelle ist die eine Stelle, die breiter werden darf als die Seite. */
.list-table-wrap {
    overflow-x: auto;
}

.list-table {
    width: 100%;
    font-size: 13.5px;
    border-collapse: collapse;
    transition: opacity .15s;
}

    /* Neu laden: Die bisherige Seite bleibt stehen, bis die neue da ist –
       blass, damit klar ist, dass sich gleich etwas ändert. */
    .list-table.busy {
        opacity: .55;
    }

    .list-table th {
        padding: 12px 20px;
        text-align: left;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--color-text-body);
        background: var(--calids-color-surface-container-lowest);
        border-bottom: 1px solid var(--calids-palette-grey-400);
    }

    .list-table td {
        padding: 14px 20px;
        vertical-align: middle;
        border-bottom: 1px solid var(--calids-palette-grey-400);
    }

    .list-table tbody tr:last-child td {
        border-bottom: none;
    }

    .list-table .right {
        text-align: right;
        white-space: nowrap;
    }

    /* Zellinhalt: Hauptzeile, Unterzeile, schlichter Wert. */
    .list-table .main {
        margin: 0 0 2px;
        font-size: 14px;
        font-weight: 700;
        color: var(--color-text-headings);
    }

    .list-table .sub {
        margin: 0;
        font-size: 12px;
        color: var(--color-text-body);
    }

    .list-table .plain {
        margin: 0;
        font-size: 13.5px;
        color: var(--color-text-headings);
    }

/* Die ganze Zeile öffnet den Eintrag. Nicht „.row“ – das ist Bootstraps
   Grid-Zeile und stapelt die Zellen untereinander. */
.link-row {
    cursor: pointer;
}

    .link-row:hover {
        background: var(--calids-color-surface-container-lowest);
    }

/* Karten statt Zeilen (Aufträge des Kunden) – dasselbe Verhalten; den Rahmen
   beim Überfahren setzt die Seite, weil sie die Karte zeichnet. */
.list-cards {
    transition: opacity .15s;
}

    .list-cards.busy {
        opacity: .55;
    }

.link-card {
    cursor: pointer;
}

/* Der Titel ist zusätzlich ein echter Link (oder Knopf): mit der Tastatur
   erreichbar, per Mittelklick oder Strg+Klick in einem neuen Tab. Er sieht aus
   wie Text und unterstreicht sich, sobald die Zeile unter dem Zeiger liegt. */
.row-link {
    display: inline;
    padding: 0;
    font: inherit;
    text-align: left;
    color: inherit;
    text-decoration: none;
}

    .link-row:hover .row-link,
    .link-card:hover .row-link,
    .row-link:focus-visible {
        text-decoration: underline;
    }

/* ---------- Zustände ---------- */

.list-state {
    margin: 0;
    padding: 28px 20px;
    font-size: 13.5px;
    text-align: center;
    color: var(--color-text-body);
}

    .list-state.error {
        color: var(--calids-palette-red-vivid-900, #a61b1b);
    }