/*
 * Links wie unter Bootstrap 4: unterstrichen erst beim Darüberfahren. Bootstrap 5 unterstreicht
 * jeden Link dauerhaft. Komponenten, die als Link gebaut sind, bleiben auch beim Darüberfahren
 * ohne Strich – so hat es Bootstrap 4 für dieselben Klassen gehalten.
 */
a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.btn:hover,
.nav-link:hover,
.navbar-brand:hover,
.dropdown-item:hover,
.page-link:hover,
.list-group-item-action:hover,
.badge:hover {
    text-decoration: none;
}

.table-striped td {
    border-bottom-width: 0
}

/* sticky footer */

main > .container {
    padding: 60px 15px 0;
}

.footer {
    background-color: #f5f5f5;
}

.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}

code {
    font-size: 80%;
}

/* Pulse-Animation für Einsatzbereitschaft-Button wenn noch nicht ausgefüllt */
@keyframes btn-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(13, 110, 253, 0); }
    100% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0); }
}

.btn-pulse {
    animation: btn-pulse 1.8s ease-in-out infinite;
}

/*
 * Grüne Variante für den Knopf, der die Geräte-Authentifizierung einschaltet. Die Schattenfarbe
 * ist Bootstraps .btn-success (#198754); keyframes kennen keine Variablen aus dem Element.
 */
@keyframes btn-pulse-success {
    0%   { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(25, 135, 84, 0); }
    100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

.btn-pulse-success {
    animation: btn-pulse-success 1.8s ease-in-out infinite;
}

/* Wer Bewegung abbestellt hat, bekommt den Knopf ohne Puls - sichtbar bleibt er ohnehin. */
@media (prefers-reduced-motion: reduce) {
    .btn-pulse,
    .btn-pulse-success {
        animation: none;
    }
}

/*
 * Setup-Code eines Stationsgeräts.
 *
 * Acht Zeichen, die jemand vom Bildschirm abliest und auf einem Tablet eintippt. Deshalb
 * groß, weit gesetzt und dicktengleich: in einer Proportionalschrift sind 0 und O kaum
 * auseinanderzuhalten – das Alphabet vermeidet solche Paare zwar, aber wer den Code abliest,
 * weiß das nicht und rätselt trotzdem.
 */
.setup-code-anzeige {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    /* Ein Antippen markiert den ganzen Code und nicht nur eine Gruppe. */
    user-select: all;
}

/*
 * Das zugehörige Eingabefeld. text-transform wirkt nur auf die Anzeige – abgeschickt wird,
 * was getippt wurde, und normalisiert wird ohnehin serverseitig in
 * DeviceAuth::setupCodeNormalisieren().
 */
.setup-code-feld {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.4rem;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

/*
 * Kachel-Hilfsklassen aus dem früheren SB-Admin-2-Theme.
 *
 * Bootstrap 5 kennt sie nicht; die Kacheln im Admin-Menü, die API-Schlüssel, der AVV-Entwurf und
 * der VEWA-Import bauen darauf. Maße wie bisher, Farben aus Bootstraps eigenen Variablen.
 */
.text-xs { font-size: .7rem; }

.text-gray-100 { color: var(--bs-gray-100) !important; }
.text-gray-200 { color: var(--bs-gray-200) !important; }
.text-gray-300 { color: var(--bs-gray-300) !important; }
.text-gray-400 { color: var(--bs-gray-400) !important; }
.text-gray-500 { color: var(--bs-gray-500) !important; }
.text-gray-600 { color: var(--bs-gray-600) !important; }
.text-gray-700 { color: var(--bs-gray-700) !important; }
.text-gray-800 { color: var(--bs-gray-800) !important; }
.text-gray-900 { color: var(--bs-gray-900) !important; }

.border-left-primary   { border-left: .25rem solid var(--bs-primary) !important; }
.border-left-secondary { border-left: .25rem solid var(--bs-secondary) !important; }
.border-left-success   { border-left: .25rem solid var(--bs-success) !important; }
.border-left-info      { border-left: .25rem solid var(--bs-info) !important; }
.border-left-warning   { border-left: .25rem solid var(--bs-warning) !important; }
.border-left-danger    { border-left: .25rem solid var(--bs-danger) !important; }

.chart-area {
    position: relative;
    height: 10rem;
    width: 100%;
}

@media (min-width: 768px) {
    .chart-area { height: 20rem; }
}

/*
 * Auswahllisten (Tom Select, classes/functiones/js/auswahl.js): an der Station hat die Anmeldung
 * einen grünen, die Abmeldung einen roten Rahmen – auch in der Stationskontrolle mit denselben IDs.
 */
#anmeldung-userid + .ts-wrapper { border: 2px solid var(--bs-success); }
#abmeldung-userid + .ts-wrapper { border: 2px solid var(--bs-danger); }