/**
 * Nutzer-Darkmode (data-bs-theme="dark").
 * Flächen: dunkles Grau, keine reinen Schwarz-/Weißwerte.
 * Text #E0E0E0 und Sekundärtext #A3A3A3 liegen auf #121212 über 4,5:1.
 * Akzente sind entsättigt, Flächen-Blau bleibt dunkel genug für helle Schrift.
 */

html[data-bs-theme="dark"] {
    color-scheme: dark;
    --dm-bg: #121212;
    --dm-bg-raised: #181818;
    --dm-surface: #1e1e1e;
    --dm-surface-2: #2a2a2a;
    --dm-border: #3a3a3a;
    --dm-text: #e0e0e0;
    --dm-text-secondary: #a3a3a3;
    --dm-accent: #9bb4d0;
    --dm-accent-strong: #3a4a60;
    --dm-accent-hover: #4a5c74;
    --vereins-grau: var(--dm-bg);
    --vereins-text: var(--dm-text);
    --vereins-blau: var(--dm-accent);
    --vereins-blau-hell: #b7c7d6;
    --bs-body-color: var(--dm-text);
    --bs-body-bg: var(--dm-bg);
    --bs-emphasis-color: var(--dm-text);
    --bs-secondary-color: var(--dm-text-secondary);
    --bs-tertiary-color: var(--dm-text-secondary);
    --bs-secondary-bg: var(--dm-surface);
    --bs-tertiary-bg: var(--dm-surface);
    --bs-border-color: var(--dm-border);
    --bs-link-color: var(--dm-accent);
    --bs-link-hover-color: #d5e0ea;
    --bs-link-color-rgb: 155, 180, 208;
    --bs-link-hover-color-rgb: 213, 224, 234;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-heading-color: var(--dm-text);
    --theme-card-bg: var(--dm-surface);
    --theme-card-border: rgba(224, 224, 224, 0.14);
    --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

html.is-native-app:not([data-bs-theme="dark"]) {
    color-scheme: light only;
}

html.is-native-app[data-bs-theme="dark"] {
    color-scheme: dark;
}

html[data-bs-theme="dark"] iframe,
html[data-bs-theme="dark"] .fussballde_widget,
html[data-bs-theme="dark"] .wb-widget-embed {
    color-scheme: light;
}

html[data-bs-theme="dark"] body {
    background: var(--dm-bg);
    background-image: none;
    color: var(--dm-text);
}

html[data-bs-theme="dark"] body.bg-light {
    background-color: var(--dm-bg) !important;
}

html[data-bs-theme="dark"] .app-content,
html[data-bs-theme="dark"] .app-auth-main,
html[data-bs-theme="dark"] .app-guest-info,
html[data-bs-theme="dark"] .app-guest-footer {
    background: transparent;
    color: var(--dm-text);
}

html[data-bs-theme="dark"] .app-sidebar,
html[data-bs-theme="dark"] .app-sidebar-offcanvas,
html[data-bs-theme="dark"] .app-sidebar-link,
html[data-bs-theme="dark"] .app-sidebar-brand,
html[data-bs-theme="dark"] .app-mobile-header {
    color: var(--dm-text);
}

html[data-bs-theme="dark"] .app-sidebar,
html[data-bs-theme="dark"] .app-sidebar-offcanvas {
    background: var(--dm-bg-raised) !important;
}

html[data-bs-theme="dark"] .app-mobile-header {
    background: var(--dm-bg-raised) !important;
    color: var(--dm-text);
    border-bottom-color: var(--dm-border);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

html[data-bs-theme="dark"] .bg-primary,
html[data-bs-theme="dark"] .btn-primary {
    background: var(--dm-accent-strong) !important;
    background-image: none !important;
    border-color: var(--dm-accent-strong) !important;
    color: var(--dm-text) !important;
}

html[data-bs-theme="dark"] .btn-primary:hover,
html[data-bs-theme="dark"] .btn-primary:focus {
    background: var(--dm-accent-hover) !important;
    background-image: none !important;
    border-color: var(--dm-accent-hover) !important;
    color: var(--dm-text) !important;
}

html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .news-article,
html[data-bs-theme="dark"] .portal-event-card-rsvp,
html[data-bs-theme="dark"] .portal-player-card,
html[data-bs-theme="dark"] .portal-event-card,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .list-group-item,
html[data-bs-theme="dark"] .offcanvas:not(.app-sidebar-offcanvas) {
    background: var(--dm-surface) !important;
    color: var(--dm-text);
    border-color: var(--theme-card-border) !important;
}

html[data-bs-theme="dark"] .card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark),
html[data-bs-theme="dark"] .modal-header,
html[data-bs-theme="dark"] .modal-footer,
html[data-bs-theme="dark"] .dropdown-item {
    background-color: transparent;
    color: var(--dm-text);
    border-color: var(--dm-border);
}

html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--dm-surface-2);
    color: var(--dm-text);
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .input-group-text,
html[data-bs-theme="dark"] textarea.form-control {
    background-color: var(--dm-bg-raised);
    color: var(--dm-text);
    border-color: var(--dm-border);
}

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--dm-bg-raised);
    color: var(--dm-text);
    border-color: var(--dm-accent);
    box-shadow: 0 0 0 3px rgba(155, 180, 208, 0.28);
}

html[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--dm-text-secondary);
}

html[data-bs-theme="dark"] .form-control:disabled,
html[data-bs-theme="dark"] .form-control[readonly] {
    background: var(--dm-surface);
    color: var(--dm-text-secondary);
}

html[data-bs-theme="dark"] .form-text,
html[data-bs-theme="dark"] .text-muted {
    color: var(--dm-text-secondary) !important;
}

html[data-bs-theme="dark"] .text-dark,
html[data-bs-theme="dark"] .portal-edit-player-sport-info__value,
html[data-bs-theme="dark"] .portal-edit-player-actions__item-label {
    color: var(--dm-text) !important;
}

html[data-bs-theme="dark"] .bg-white,
html[data-bs-theme="dark"] .bg-light {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

html[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--dm-text);
    --bs-table-border-color: var(--dm-border);
    --bs-table-striped-bg: rgba(224, 224, 224, 0.04);
    --bs-table-striped-color: var(--dm-text);
    --bs-table-hover-bg: rgba(224, 224, 224, 0.06);
    --bs-table-hover-color: var(--dm-text);
    color: var(--dm-text);
}

html[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--dm-text);
    --bs-table-bg: var(--dm-bg-raised);
    --bs-table-border-color: var(--dm-border);
    --bs-table-hover-bg: var(--dm-surface-2);
    --bs-table-hover-color: var(--dm-text);
    color: var(--dm-text);
}

html[data-bs-theme="dark"] .statistik-sticky-col {
    background: var(--dm-bg);
    color: var(--dm-text);
    box-shadow: 1px 0 0 var(--dm-border);
}

html[data-bs-theme="dark"] .statistik-table thead .statistik-sticky-col {
    background: var(--dm-bg-raised);
    color: var(--dm-text);
}

html[data-bs-theme="dark"] .card:has(> .card-header.bg-primary) > .card-body,
html[data-bs-theme="dark"] .card:has(> .card-header.bg-secondary) > .card-body,
html[data-bs-theme="dark"] .card:has(> .card-header.bg-primary) > .table-responsive,
html[data-bs-theme="dark"] .card:has(> .card-header.bg-secondary) > .table-responsive {
    background: var(--dm-surface) !important;
    color: var(--dm-text);
}

html[data-bs-theme="dark"] .app-subnav-wrap {
    background: var(--dm-bg-raised);
    border-color: var(--dm-border);
}

html[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: var(--dm-border);
}

html[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--dm-text-secondary);
}

html[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background: var(--dm-surface);
    border-color: var(--dm-border) var(--dm-border) var(--dm-surface);
    color: var(--dm-text);
}

html[data-bs-theme="dark"] .portal-edit-player-section-title,
html[data-bs-theme="dark"] .portal-edit-player-form-actions,
html[data-bs-theme="dark"] .portal-edit-player-actions__item {
    border-color: var(--dm-border);
}

html[data-bs-theme="dark"] .portal-edit-player-actions__item,
html[data-bs-theme="dark"] .portal-kader-profile-card,
html[data-bs-theme="dark"] .portal-calendar-day,
html[data-bs-theme="dark"] .portal-event-card-rsvp__times,
html[data-bs-theme="dark"] .portal-event-card-rsvp__countdown,
html[data-bs-theme="dark"] .portal-event-card-rsvp__footer,
html[data-bs-theme="dark"] .portal-event-feature-icons,
html[data-bs-theme="dark"] .portal-thumb-bar__btn,
html[data-bs-theme="dark"] .portal-ride-form__row {
    background: var(--dm-surface);
    color: var(--dm-text);
    border-color: var(--dm-border);
}

html[data-bs-theme="dark"] .portal-rsvp-vote {
    background: var(--dm-surface);
    color: var(--dm-text-secondary);
    border-color: var(--dm-border);
}

html[data-bs-theme="dark"] button.portal-rsvp-vote:hover:not(.portal-rsvp-vote--readonly):not(.is-active) {
    background: var(--dm-surface-2);
}

html[data-bs-theme="dark"] .portal-rsvp-vote.is-active--yes,
html[data-bs-theme="dark"] button.portal-rsvp-vote:hover:not(.portal-rsvp-vote--readonly).is-active--yes {
    background: #2f6b4f;
    color: var(--dm-text);
}

html[data-bs-theme="dark"] .portal-rsvp-vote.is-active--open,
html[data-bs-theme="dark"] button.portal-rsvp-vote:hover:not(.portal-rsvp-vote--readonly).is-active--open {
    background: #4a4a4a;
    color: var(--dm-text);
}

html[data-bs-theme="dark"] .portal-rsvp-vote.is-active--no,
html[data-bs-theme="dark"] button.portal-rsvp-vote:hover:not(.portal-rsvp-vote--readonly).is-active--no {
    background: #8a3a42;
    color: var(--dm-text);
}

html[data-bs-theme="dark"] .portal-event-card-rsvp__meta {
    background: var(--dm-surface);
    color: var(--dm-text);
    border-bottom-color: var(--dm-border);
}

html[data-bs-theme="dark"] .portal-event-feature-icon--idle,
html[data-bs-theme="dark"] .portal-event-feature-icon--idle:hover,
html[data-bs-theme="dark"] .portal-event-feature-icon--idle:focus,
html[data-bs-theme="dark"] .portal-event-fussball-de-btn,
html[data-bs-theme="dark"] .portal-event-fussball-de-btn:hover,
html[data-bs-theme="dark"] .portal-event-fussball-de-btn:focus {
    background: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html[data-bs-theme="dark"] .portal-thumb-bar__btn {
    color: var(--dm-text);
}

html[data-bs-theme="dark"] .portal-page-loader {
    background: rgba(18, 18, 18, 0.78);
}

html[data-bs-theme="dark"] .portal-page-loader__panel {
    background: rgba(30, 30, 30, 0.94);
    color: var(--dm-text);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

html[data-bs-theme="dark"] .color-mode-form {
    margin-top: 1.5rem;
    padding-top: 0.25rem;
}

html[data-bs-theme="dark"] .vereinsspiele-day__header,
html[data-bs-theme="dark"] .vereinsspiele-day--today .vereinsspiele-day__header,
html[data-bs-theme="dark"] .vereinsspiele-day__header i {
    color: var(--dm-text-secondary);
}

html[data-bs-theme="dark"] .vereinsspiele-tile {
    background: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html[data-bs-theme="dark"] .vereinsspiele-tile--today {
    border-color: var(--dm-border);
    box-shadow: none;
}

html[data-bs-theme="dark"] .vereinsspiele-tile__when,
html[data-bs-theme="dark"] .vereinsspiele-tile__meta {
    color: var(--dm-text-secondary);
}

html[data-bs-theme="dark"] .vereinsspiele-tile__title,
html[data-bs-theme="dark"] .vereinsspiele-tile__title a,
html[data-bs-theme="dark"] .event-live-score--inline .event-live-score__score {
    color: var(--dm-text);
}

html[data-bs-theme="dark"] .vereinsspiele-tile__title a:hover {
    color: var(--dm-text);
    text-decoration: underline;
}

html[data-bs-theme="dark"] .vereinsspiele-live-push {
    background: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html[data-bs-theme="dark"] .vereinsspiele-live-push.portal-event-feature-icon--active {
    background: #2f6b4f;
    border-color: #2f6b4f;
    color: var(--dm-text);
}

html[data-bs-theme="dark"] .portal-vereinsspiele-scope-tabs .btn-outline-primary {
    background: var(--dm-bg-raised);
    color: var(--dm-text);
    border-color: var(--dm-border);
}

html[data-bs-theme="dark"] .portal-vereinsspiele-scope-tabs .btn-outline-primary:hover,
html[data-bs-theme="dark"] .portal-vereinsspiele-scope-tabs .btn-outline-primary:focus {
    background: var(--dm-surface-2);
    color: var(--dm-text);
    border-color: var(--dm-border);
}

html[data-bs-theme="dark"] .portal-vereinsspiele-scope-tabs .badge.bg-light {
    background-color: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
}

html[data-bs-theme="dark"] .portal-vereinsspiele-team-select {
    background-color: var(--dm-bg-raised) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html[data-bs-theme="dark"] .portal-vereinsspiele-thumb {
    background: var(--dm-bg-raised);
    border-top-color: var(--dm-border);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.35);
}

html[data-bs-theme="dark"] .portal-vereinsspiele-thumb__btn {
    background: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html[data-bs-theme="dark"] .portal-vereinsspiele-thumb__btn i {
    color: var(--dm-text);
}

html[data-bs-theme="dark"] .portal-vereinsspiele-thumb__btn.is-active,
html[data-bs-theme="dark"] .portal-vereinsspiele-thumb__btn.is-active i {
    background: var(--dm-accent-strong);
    border-color: var(--dm-accent-strong);
    color: var(--dm-text);
}

html[data-bs-theme="dark"] .portal-vereinsspiele-thumb__badge {
    background: var(--dm-surface-2);
    color: var(--dm-text);
}

html[data-bs-theme="dark"] .portal-vereinsspiele-thumb__btn.is-active .portal-vereinsspiele-thumb__badge {
    background: var(--dm-surface);
    color: var(--dm-text);
}
