/*
 * Untermenü der Einstellungen.
 *
 * Mitarbeiter und Fuhrpark sind Stammdaten – einmal eingerichtet, danach
 * selten angefasst. Sie liegen deshalb unter den Einstellungen und nicht
 * mehr im Hauptmenü zwischen den Dingen, die täglich gebraucht werden.
 *
 * Struktur, keine Gestaltung: Aussehen und Farben stehen in app.css, dort
 * ist das Untermenü der Protokolle bereits gestaltet. Hier steht nur, was
 * für Verweise statt Schaltflächen zusätzlich nötig ist – und wann das
 * Untermenü offen steht.
 */

/* Offen, solange einer der drei Bereiche angezeigt wird. Ohne das klappte es
   zu, sobald man von den Einstellungen zu den Mitarbeitern wechselt – und der
   Weg zurück zum Fuhrpark wäre weg. */
.seitenleiste .nav-untermenue.offen {
    display: grid;
    gap: 2px;
}

/* Die Einträge sind Verweise, keine Schaltflächen: dieselbe Form wie dort. */
.seitenleiste .nav-untermenue a {
    padding: 7px 9px;
    border-radius: 5px;
    background: transparent;
    color: #89969d;
    font-size: 11px;
    text-decoration: none;
}

.seitenleiste .nav-untermenue a:hover {
    background: rgba(255, 255, 255, .04);
    color: #d7dde0;
}

.seitenleiste .nav-untermenue a.aktiv {
    background: rgba(255, 159, 10, .1);
    color: #ffc04a;
}

/* Die Leiste im Inhalt trägt auf schmalen Geräten dieselbe Aufgabe. Dort ist
   das Untermenü der Seitenleiste ausgeblendet – sie wird von app.css nur in
   diesem Bereich überhaupt eingeblendet, deshalb steht auch hier alles im
   selben Umbruch. Gestaltet ist dort nur `button`; für Verweise muss die
   Form nachgezogen werden, sonst stehen sie linksbündig und flach. */
@media (max-width: 860px) {
    /* Wem keiner der drei Bereiche offensteht, dem wird die Leiste versteckt.
       Ohne diese Regel gewönne das display:grid des Umbruchs. */
    .einstellungen-navigation[hidden] { display: none !important; }

    .einstellungen-navigation a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 38px;
        padding: 6px 5px;
        border-radius: 6px;
        color: #9da8ae;
        font-size: 11px;
        text-align: center;
        text-decoration: none;
    }

    .einstellungen-navigation a.aktiv {
        background: rgba(255, 159, 10, .14);
        color: #ffc04a;
        box-shadow: inset 0 0 0 1px rgba(255, 159, 10, .22);
    }
}