/* Sitewide Design-Ergaenzungen zu MDBootstrap. Wird in _Layout.cshtml geladen, gilt also auf jeder
   Seite - im Gegensatz zu home.css, das nur auf der Marketing-Startseite eingebunden wird. */

:root {
    --tmv-accent: #0b5d75;
    --tmv-accent-dark: #073e4d;
    --tmv-accent-light: #eaf3f5;
}

.btn-primary {
    background-color: var(--tmv-accent);
    border-color: var(--tmv-accent);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--tmv-accent-dark);
    border-color: var(--tmv-accent-dark);
}

/* Groß dargestelltes Status-Icon auf Hinweis-/Bestaetigungsseiten (Logout, ConfirmEmail, ...). */
.tmv-icon-xl {
    font-size: 2.5rem;
}

/* Karte fuer eine unwiderrufliche/gefaehrliche Aktion (z. B. Konto loeschen). */
.tmv-danger-card {
    border: 1px solid rgba(220, 53, 69, .35);
    background-color: rgba(220, 53, 69, .04);
}

/* Pill-Navigation, z. B. im "Mein Konto"-Bereich. */
.tmv-pill-nav .nav-link {
    color: #495057;
    border-radius: .5rem;
    font-weight: 500;
}

.tmv-pill-nav .nav-link.active {
    background-color: var(--tmv-accent);
    color: #fff;
}

.tmv-pill-nav .nav-link:not(.active):hover {
    background-color: var(--tmv-accent-light);
}

/* Runde Icon-Kachel vor einer Card-Ueberschrift (z. B. "Mein Konto"-Unterseiten). */
.tmv-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--tmv-accent-light);
    color: var(--tmv-accent);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.tmv-danger-card .tmv-icon-badge {
    background-color: rgba(220, 53, 69, .12);
    color: #dc3545;
}

/* Große, klickbare Modul-Karte auf dem Voting-Hub (Views/Voting/Index.cshtml) - die ganze Karte ist
   ein Link, daher deutliches Hover-/Focus-Feedback statt reinem Text-Link-Verhalten. */
.tmv-module-card {
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.tmv-module-card:hover,
.tmv-module-card:focus-visible {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
    border-color: var(--tmv-accent);
    transform: translateY(-1px);
}

/* Dezente rote Markierung fuer eine moeglicherweise durch Mehrfachteilnahme verfaelschte
   Ergebnis-Zeile (Views/Voting/Results.cshtml, ResultRowViewModel.IsSuspicious). Bewusst zurueckhaltend
   (leichter Ton statt kraeftigem Rot) - es ist nur ein Hinweis, kein Beweis. */
.tmv-suspicious-row {
    background-color: rgba(220, 53, 69, .06);
    border-color: rgba(220, 53, 69, .35) !important;
}

/* Zweiter, von tmv-suspicious-row bewusst GETRENNTER Hinweis (Views/Voting/Results.cshtml,
   ResultRowViewModel.DeviceClassClusterSize, siehe DeviceClassMatcher) - deutlich schwaecheres Signal
   als der Geraete-Fingerprint, deshalb gestrichelt statt durchgezogen und in Gelb/Amber statt Rot. Kann
   gleichzeitig mit tmv-suspicious-row auf derselben Zeile stehen (beide Klassen sind unabhaengig). */
.tmv-deviceclass-row {
    border-style: dashed !important;
    border-color: rgba(240, 173, 78, .55) !important;
}

/* Durchsuchbare Personen-Auswahl (Views/Meetings/_SlotRow.cshtml, wwwroot/js/roster.js): die
   aufklappende Liste ueberlagert per position:absolute den nachfolgenden Seiteninhalt. Ohne einen
   explizit gesetzten, undurchsichtigen Hintergrund wirkte sie transparent - Namen/Text aus der
   dahinterliegenden Karte schienen durch. */
.tmv-combo-list {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .25rem;
    overflow: hidden;
}

.tmv-combo-option {
    background-color: #fff;
}

.tmv-combo-option:hover,
.tmv-combo-option:focus {
    background-color: var(--tmv-accent-light);
}

/* Dropdown "Wer darf abstimmen?" (Views/ClubSettings/Index.cshtml): die zweite Option ist auf
   schmalen Handy-Bildschirmen zu lang fuer eine Zeile im nativen <select>. Etwas kleinere, aber fuer
   ALLE drei Optionen einheitliche Schrift statt nur fuer die eine lange - sieht sonst uneinheitlich
   aus. Nur unterhalb des md-Breakpoints, auf dem Desktop ist genug Platz. */
@media (max-width: 767.98px) {
    #votingAccessMode {
        font-size: .875rem;
    }
}