/* projektspezifische Styles */

/* Logo-Umschaltung je nach Hell-/Dunkelmodus (data-bs-theme kommt vom Theme-Switcher) */
html:not([data-bs-theme="dark"]) .logo-dark-mode {
    display: none !important;
}

html[data-bs-theme="dark"] .logo-light-mode {
    display: none !important;
}

/* vanilla-cookieconsent: "Alle akzeptieren"-Button gemäß Vorgabe grün einfärben */
:root {
    --cc-btn-primary-bg: #2da44e;
    --cc-btn-primary-border-color: #2da44e;
    --cc-btn-primary-hover-bg: #248f42;
    --cc-btn-primary-hover-border-color: #248f42;
}

/* QR-Code fuer die TOTP-Einrichtung (zwei_faktor.php) - immer auf weissem Hintergrund mit
   Rand darstellen, unabhaengig vom Hell-/Dunkelmodus. qrcodejs zeichnet die Pixel selbst
   zwar schon fest schwarz/weiss, aber Scanner-Apps brauchen zusaetzlich einen ausreichenden
   weissen Rand ("Quiet Zone") um den Code - den liefert die Karte im Dunkelmodus sonst nicht. */
.totp-qr-frame {
    display: inline-block;
    padding: 16px;
    background: #ffffff;
    border-radius: var(--tblr-border-radius);
}

/* Registrierungs-Fortschrittsanzeige (register_konto/ausbildung/umfeld/einwilligungen.php) -
   die Tabler-Komponente ".steps" ist per Default auf volle Containerbreite gestreckt
   (width:100% + flex:1 1 0 pro Item); hier stattdessen als kompakter, zentrierter Block
   unterhalb des Logo-Schriftzugs. */
.steps-counter {
    max-width: 380px;
    /* eine zweite, aeltere .steps-Regel in tabler.min.css (fuer eine vertikale
       Timeline-Variante) bringt border-left/margin-left/padding-left mit, die mit unserer
       horizontalen Zaehler-Variante kollidieren - hier gezielt zurueckgesetzt. margin-left
       bewusst NICHT einzeln auf 0 gesetzt, sonst wuerde es "margin-inline: auto" (symmetrisch
       links+rechts) direkt danach wieder einseitig auf 0 zurueckdrehen. */
    margin-inline: auto;
    padding-left: 0;
    border-left: none;
}

/* Registrierung Schritt 1: klickbare Rollen-Auswahlkarten */
.role-card {
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.role-card:hover {
    box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), 0.15);
    border-color: var(--tblr-primary) !important;
    color: inherit;
}

.role-card-highlighted {
    border-color: var(--tblr-primary) !important;
    border-width: 2px !important;
}

.role-card-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* 2FA-Verfahren-Auswahl (anmelden_2fa.php) - eigene, explizite Regel statt .role-card
   wiederzuverwenden, weil das hier <button>-Elemente sind (fuer die Auswahl ohne JavaScript per
   normalem Formular-Submit), keine <a>-Tags - Buttons bringen eigenes Browser-Styling mit
   (Hintergrund, Rand, Polsterung), das explizit zurueckgesetzt werden muss, statt sich auf
   Tabler's Kartendarstellung allein zu verlassen. */
.method-tile {
    display: block;
    width: 100%;
    height: 100%;
    padding: 1.25rem;
    background: var(--tblr-card-bg);
    border: var(--tblr-border-width) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-lg);
    text-align: center;
    cursor: pointer;
    color: inherit;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.method-tile:hover {
    box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), 0.15);
    border-color: var(--tblr-primary);
}

/* "Weitere Informationen"-Link im Cookie-Einstellungen-Fenster (app.js, more_info_modal.php) -
   das Praefix "#cc-main" ist hier keine Kosmetik: die Bibliothek hat eine eigene Regel
   "#cc-main button { all: initial; ... }" (ID-Selektor), die eine reine Klassen-Regel in der
   Spezifitaet immer schlagen wuerde, egal was darin steht. Erst die ID im eigenen Selektor
   gleicht das aus. */
#cc-main .pm__section-desc .more-info-trigger {
    display: block;
    margin-top: 6px;
    padding: 0;
    border: none;
    background: none;
    color: var(--tblr-primary);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.8125rem;
}

#cc-main .pm__section-desc .more-info-trigger:hover {
    color: var(--tblr-primary);
    text-decoration: none;
}

/* Passwort-Laengenbalken (password_input() mit strengthBarMinLength, app.js) - der Farbverlauf
   liegt fest auf dem Track, die "-mask" deckt ihn von rechts ab und wird beim Tippen per JS
   schmaler. So zeigt der sichtbare Ausschnitt immer die richtige Verlaufsfarbe fuer den
   aktuellen Fuellstand, statt einen ganzen (gestauchten) Verlauf in eine kurze Breite zu quetschen.
   var(--tblr-bg-surface) ist bewusst gewaehlt, weil .card genau diese Variable fuer ihren
   eigenen Hintergrund nutzt (siehe --tblr-card-bg in tabler.min.css) - die Maske verschmilzt
   dadurch nahtlos mit der Card in Hell- und Dunkelmodus. */
.password-strength-bar {
    position: relative;
    height: 4px;
    margin-top: 8px;
    border-radius: 2px;
    overflow: hidden;
    background: linear-gradient(to right, #d63939, #f59f00, #2fb344);
}

.password-strength-bar-mask {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: var(--tblr-bg-surface);
    transition: width 0.15s ease;
}

/* Passwort-Uebereinstimmungs-Balken (password_input() mit strengthBarMatchField, siehe app.js) -
   bewusst KEIN Farbverlauf wie beim Laengenbalken, sondern binär: durchgehend rot, bis der Wert
   exakt mit dem Referenz-Passwortfeld uebereinstimmt, dann durchgehend gruen. */
.password-match-bar {
    height: 4px;
    margin-top: 8px;
    border-radius: 2px;
    background: #d63939;
    transition: background-color 0.15s ease;
}

.password-match-bar.is-match {
    background: #2fb344;
}