/*
 * JuDok — Lesbarkeit
 *
 * Die Oberflaeche wird von Menschen bedient, die nicht alle scharf sehen und
 * nicht alle ruhig zielen. Filament liefert die meisten Texte in 14 px und
 * die Zeilenaktionen ohne jede Polsterung aus - beides ist hier angehoben.
 *
 * Die Kontraste sind unveraendert: sie liegen ohnehin weit ueber der Norm
 * (Flie\00DFtext 19:1, Tabellen 19,9:1).
 */

/* ---------------------------------------------------------------- Schrift */

.fi-body,
.fi-main {
    font-size: 16px;
}

.fi-ta-cell,
.fi-ta-header-cell,
.fi-ta-text,
.fi-ta-text-item-label {
    font-size: 16px;
}

/* Die Zusatzzeile unter einer Zelle (Bezirk, Alter, Verfasser) */
.fi-ta-text-item-description,
.fi-ta-record-description {
    font-size: 14px;
}

.fi-sidebar-item-label,
.fi-sidebar-group-label {
    font-size: 16px;
}

.fi-input,
.fi-select-input,
.fi-textarea,
.fi-fo-field-wrp-label,
.fi-fo-field-wrp-hint {
    font-size: 16px;
}

/* Hilfetexte duerfen kleiner sein, aber nicht winzig.
   Filament nennt sie .fi-sc-text - 14 px ist dort schon die Vorgabe,
   hier ausdruecklich festgehalten, damit es nicht still kippt. */
.fi-sc-text {
    font-size: 14px;
}

.fi-btn {
    font-size: 16px;
}

/* Statuszeichen waren mit 12 px das Kleinste auf dem Schirm */
.fi-badge {
    font-size: 14px;
    padding-block: 4px;
    padding-inline: 10px;
}

.fi-modal-heading {
    font-size: 20px;
}

.fi-modal-description {
    font-size: 16px;
}

/* ------------------------------------------------------------ Klickziele */

/*
 * Die Zeilenaktionen waren 51 x 20 Pixel ohne Polsterung. Die WCAG verlangt
 * mindestens 24 x 24; brauchbar wird es ab 44 x 44.
 */
.fi-ta-actions .fi-btn,
.fi-ta-actions .fi-link,
.fi-ta-actions a,
.fi-ta-actions button {
    min-height: 44px;
    min-width: 44px;
    padding-block: 10px;
    padding-inline: 14px;
    border-radius: 8px;
}

/* Die Beschriftung der Zeilenaktion blieb sonst bei 14 px */
.fi-ta-actions .fi-btn,
.fi-ta-actions .fi-link,
.fi-ta-actions a,
.fi-ta-actions button,
.fi-ta-actions .fi-btn-label,
.fi-ta-actions .fi-link-label {
    font-size: 16px;
}

.fi-ta-actions .fi-btn:hover,
.fi-ta-actions .fi-link:hover,
.fi-ta-actions a:hover,
.fi-ta-actions button:hover {
    background-color: rgb(0 0 0 / 0.06);
}

/* Auch die Knoepfe am Seitenkopf und im Fenster */
.fi-btn {
    min-height: 44px;
}

/* Eingabefelder hoch genug, um sie sicher zu treffen.
   Die Huelle allein reicht nicht - das Feld selbst muss wachsen. */
.fi-input-wrp {
    min-height: 44px;
}

.fi-input,
.fi-select-input,
input[type='text'],
input[type='email'],
input[type='date'],
input[type='password'],
input[type='search'],
select {
    min-height: 44px;
    padding-block: 9px;
}

/* Mehrzeilige Felder brauchen keine Mindesthoehe, nur Luft */
.fi-textarea,
textarea {
    padding-block: 10px;
    line-height: 1.6;
}

/* Kaestchen zum Ankreuzen waren 16 px */
.fi-checkbox-input,
.fi-radio-input {
    width: 20px;
    height: 20px;
}

/* --------------------------------------------------------------- Fokus */

/*
 * Wer nicht sicher zielt, arbeitet mit der Tabulatortaste. Dann muss ohne
 * Zweifel erkennbar sein, wo man steht.
 */
/*
 * Kein eigener border-radius: der Umriss folgt der Form des Elements.
 */
:focus-visible {
    outline: 3px solid #b45309 !important;
    outline-offset: 2px !important;
}

/*
 * Bei Eingabefeldern liegt die runde Form nicht am Feld, sondern an seiner
 * Huelle - das Feld selbst hat border-radius 0. Ein Umriss direkt am Feld
 * zieht deshalb eine eckige Kiste um ein rundes Feld. Also die Huelle
 * markieren, sobald das Feld darin den Fokus hat.
 */
.fi-input-wrp:has(:focus-visible) {
    outline: 3px solid #b45309;
    outline-offset: 2px;
}

.fi-input-wrp :focus-visible {
    outline: none !important;
}

/* -------------------------------------------------- Aktionsspalte halten */

/*
 * Groessere Schrift macht die Tabelle breiter. Bei schmalem Fenster fiel die
 * Aktionsspalte hinten aus dem Bild - man sah die Akte, kam aber nicht hinein.
 * Sie bleibt deshalb rechts stehen, auch wenn quer gerollt wird.
 */
.fi-ta table th:last-child,
.fi-ta table td:last-child {
    position: sticky;
    right: 0;
    background-color: #ffffff;
    box-shadow: -10px 0 10px -10px rgb(0 0 0 / 0.25);
}

.fi-ta table tbody tr:nth-child(even) td:last-child {
    background-color: #fafafa;
}

/* ----------------------------------------------------------------- Luft */

.fi-ta-row .fi-ta-cell {
    padding-block: 14px;
}

/* Zeilen im Wechsel leicht absetzen, damit das Auge die Spur haelt */
.fi-ta-row:nth-child(even) {
    background-color: rgb(0 0 0 / 0.02);
}

/* -------------------------------------------------------- Dunkelmodus */

@media (prefers-color-scheme: dark) {
    .fi-ta-actions .fi-btn:hover,
    .fi-ta-actions .fi-link:hover,
    .fi-ta-actions a:hover,
    .fi-ta-actions button:hover {
        background-color: rgb(255 255 255 / 0.08);
    }

    .fi-ta-row:nth-child(even) {
        background-color: rgb(255 255 255 / 0.03);
    }

    :focus-visible {
        outline-color: #fbbf24 !important;
    }
}

@media (prefers-color-scheme: dark) {
    .fi-ta table th:last-child,
    .fi-ta table td:last-child {
        background-color: #18181b;
    }

    .fi-ta table tbody tr:nth-child(even) td:last-child {
        background-color: #1f1f23;
    }
}