/* TeamSpeak Public – eigenes dunkelblaues Theme */

html,
body {
    min-height: 100%;
    background: linear-gradient(135deg, #03101f, #0b2347) fixed !important;
    color: #e5e7eb !important;
}

/* Hauptbereiche transparent halten, damit der Verlauf sichtbar bleibt */
main,
.container,
.container-fluid,
.content,
.content-wrapper {
    background-color: transparent !important;
}

/* Obere Navigation */
.navbar,
.navbar-dark,
.bg-dark {
    background: rgba(6, 16, 29, 0.94) !important;
    border-bottom: 1px solid rgba(192, 192, 192, 0.16) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}

.navbar .nav-link,
.navbar .navbar-brand {
    color: #c8d1db !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-item.active .nav-link {
    color: #ffffff !important;
}

/* Karten, Serverstatus und Adminstatus */
.card {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.card-header {
    background: rgba(6, 16, 29, 0.58) !important;
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.card-body,
.card-footer {
    background-color: transparent !important;
    color: #c8d1db !important;
}

/* Blauen Akzent statt Pink verwenden */


a {
    color: #93c5fd;
}

a:hover,
a:focus {
    color: #ffffff;
}

/* Schaltflächen */
.btn-primary {
    color: #ffffff !important;
    background: linear-gradient(135deg, #087fc4, #35b9ff) !important;
    border-color: #35b9ff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #086aa2, #55c5ff) !important;
    border-color: #55c5ff !important;
    box-shadow: 0 0 18px rgba(85, 183, 255, 0.3) !important;
}

.btn-outline-light:hover {
    color: #06101d !important;
}

/* Abzeichen, Zahlen und Online-Anzeigen */
.badge-primary,
.badge-info {
    background-color: #168dcc !important;
    color: #ffffff !important;
}

/* Dropdown-Menüs, beispielsweise Sprachauswahl */
.dropdown-menu {
    background: #081a2d !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dropdown-item {
    color: #c8d1db !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
    color: #ffffff !important;
    background: rgba(85, 183, 255, 0.16) !important;
}

/* Eingabefelder und Tabellen */
.form-control,
.custom-select,
.table {
    color: #e5e7eb !important;
    background-color: rgba(6, 16, 29, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.form-control:focus,
.custom-select:focus {
    border-color: #55b7ff !important;
    box-shadow: 0 0 0 0.2rem rgba(85, 183, 255, 0.18) !important;
}

.table td,
.table th {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Seitennavigation */
.page-link {
    color: #93c5fd !important;
    background-color: rgba(6, 16, 29, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.page-item.active .page-link {
    color: #ffffff !important;
    background-color: #168dcc !important;
    border-color: #55b7ff !important;
}

/* Allgemeine Sekundärtexte */
.text-muted,
.text-secondary {
    color: #9fb0c2 !important;
}
/* Navigation mit höherer Priorität */
#main-navbar,
#main-navbar.navbar,
#main-navbar.bg-primary {
    background: rgba(6, 16, 29, 0.96) !important;
    border-bottom: 1px solid rgba(192, 192, 192, 0.16) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
}

#main-navbar .navbar-brand,
#main-navbar .nav-link {
    color: #c8d1db !important;
}

#main-navbar .navbar-brand:hover,
#main-navbar .nav-link:hover,
#main-navbar .nav-link:focus {
    color: #ffffff !important;
    background-color: rgba(85, 183, 255, 0.08) !important;
}

/* Aktiver Menüpunkt */
#main-navbar .nav-item.active > .nav-link {
    color: #ffffff !important;
    border-bottom-color: #55b7ff !important;
}

/* Kartenakzent von Pink zu TeamSpeak-Blau */
.card.card-accent,
.card-accent {
    border-top: 2px solid #20aee8 !important;
}

/* Statusanzeigen von Pink zu Blau */
.badge,
.badge-primary,
.badge-info,
.badge-success {
    color: #ffffff !important;
    background: #168dcc !important;
}

/* Footer */
footer,
.footer,
#footer {
    color: #c8d1db !important;
    background: rgba(6, 16, 29, 0.96) !important;
    border-top: 1px solid rgba(192, 192, 192, 0.12) !important;
}

footer a,
.footer a,
#footer a {
    color: #93c5fd !important;
}

footer a:hover,
.footer a:hover,
#footer a:hover {
    color: #ffffff !important;
}
/* Globale Akzentfarbe: Pink durch TeamSpeak-Blau ersetzen */
:root {
    --site-accent-color: #20aee8 !important;
}

.card.card-accent > .card-header::before {
    background-color: #20aee8 !important;
}
/* Gruppenzuweiser – dunkelblaues Design */
.group-assigner .assigner-category {
    border-radius: 4px;
    overflow: hidden;
}

.group-assigner .assigner-category .list-group-item {
    color: #e5e7eb !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Überschrift einer Gruppenkategorie */
.group-assigner .assigner-category .assigner-header {
    color: #ffffff !important;
    background: rgba(6, 16, 29, 0.72) !important;
}

/* Einzelne auswählbare Gruppen */
.group-assigner .list-group-item-action:hover,
.group-assigner .list-group-item-action:focus {
    color: #ffffff !important;
    background: rgba(85, 183, 255, 0.12) !important;
}

/* Kontrollkästchen */
.group-assigner .custom-control-label::before {
    background-color: #081a2d !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}

.group-assigner .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #20aee8 !important;
    border-color: #20aee8 !important;
}

.group-assigner .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(32, 174, 232, 0.2) !important;
}
/* Aktiver Menüpunkt in der Navigation */
#main-navbar .navbar-nav .nav-item.active > .nav-link {
    color: #ffffff !important;
    background: rgba(32, 174, 232, 0.14) !important;
    border-bottom-color: #20aee8 !important;
}

/* Hover für nicht aktive Menüpunkte */
#main-navbar .navbar-nav .nav-item:not(.active) > .nav-link:hover {
    color: #ffffff !important;
    background: #102a43 !important;
}
/* Hover- und Klickzustand der Navigationslinks */
#main-navbar .navbar-nav .nav-item > .nav-link:hover,
#main-navbar .navbar-nav .nav-item > .nav-link:focus,
#main-navbar .navbar-nav .nav-item > .nav-link:active {
    color: #ffffff !important;
    background-color: #102a43 !important;
    background-image: none !important;
    box-shadow: none !important;
}
/* Navigationspunkte: violette Originalfarben vollständig ersetzen */
#main-navbar .nav-item.active,
#main-navbar .nav-item:hover,
#main-navbar .nav-item.dropdown.show {
    background-color: #102a43 !important;
}

/* Dunkelblaue Trennlinien zwischen den Menüpunkten */
@media (min-width: 992px) {
    #main-navbar .navbar-nav {
        border-left-color: rgba(192, 192, 192, 0.16) !important;
    }

    #main-navbar .navbar-nav li {
        border-right-color: rgba(192, 192, 192, 0.16) !important;
    }
}

/* Untere Markierung */
#main-navbar .nav-item::after {
    border-bottom-color: #20aee8 !important;
}
/* Impressum im Footer dezent darstellen */
.footer > div:first-child a {
    color: #9fb0c2 !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

.footer > div:first-child a:hover,
.footer > div:first-child a:focus {
    color: #ffffff !important;
    text-decoration: underline !important;
}
/* Textauswahl auf der Website verhindern */
body {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Eingabefelder bleiben bedienbar */
input,
textarea,
select {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}
/* Footer bei kurzen Seiten am unteren Bildschirmrand halten */
html {
    min-height: 100%;
}

body {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

.footer {
    width: 100%;
    margin-top: auto !important;
    flex-shrink: 0;
}
/* Benutzerinformationen im Viewer */
.popover {
    background-color: #0b223b !important;
    border-color: rgba(85, 183, 255, 0.22) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35) !important;
}

.popover-header {
    color: #ffffff !important;
    background-color: #081a2d !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.popover-body {
    color: #c8d1db !important;
    background-color: #0b223b !important;
}

/* Pfeil des Infofensters */
.bs-popover-right > .arrow::after {
    border-right-color: #0b223b !important;
}

.bs-popover-left > .arrow::after {
    border-left-color: #0b223b !important;
}

.bs-popover-top > .arrow::after {
    border-top-color: #0b223b !important;
}

.bs-popover-bottom > .arrow::after {
    border-bottom-color: #0b223b !important;
}
/* Login- und Dialogfenster */
.modal-content {
    color: #e5e7eb !important;
    background-color: #0b223b !important;
    border: 1px solid rgba(85, 183, 255, 0.22) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
}

.modal-header {
    color: #ffffff !important;
    background-color: #081a2d !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.modal-body {
    color: #e5e7eb !important;
    background-color: #0b223b !important;
}

.modal-footer {
    background-color: #0b223b !important;
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* Schließen-Symbol */
.modal .close {
    color: #ffffff !important;
    text-shadow: none !important;
    opacity: 0.65;
}

.modal .close:hover {
    color: #ffffff !important;
    opacity: 1;
}

/* Eingabefeld im Loginfenster */
.modal .form-control {
    color: #ffffff !important;
    background-color: #071624 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.modal .form-control::placeholder {
    color: #9fb0c2 !important;
}

/* Senden-Schaltfläche */
.modal .btn-secondary,
.modal .input-group-append .btn {
    color: #ffffff !important;
    background-color: #168dcc !important;
    border-color: #20aee8 !important;
}

.modal .btn-secondary:hover,
.modal .input-group-append .btn:hover {
    background-color: #20aee8 !important;
}

/* Hintergrund hinter dem geöffneten Dialog */
.modal-backdrop.show {
    opacity: 0.72 !important;
}
/* Kein oberer Abstand bei der ersten aktuell sichtbaren Admingruppe */
.admin-status.admin-status-grouped
> .first-visible-admin-group
> .group-name {
    margin-top: 0 !important;
}