:root {
    --app-bg: #07111f;
    --app-bg-accent: #0f1d32;
    --app-surface: rgba(12, 23, 40, 0.88);
    --app-surface-strong: #12243b;
    --app-border: rgba(148, 163, 184, 0.2);
    --app-text: #e8eef7;
    --app-text-soft: #9eb0c9;
    --app-primary: #4db6ff;
    --app-primary-strong: #1486d7;
    --app-btn: #0f6fb3;
    --app-btn-active: #0b5a93;
    --app-success: #4fd1a1;
    --app-danger: #ff6b81;
    --app-surface-opaque: #0c1728;
    --app-shadow: 0 22px 48px rgba(0, 0, 0, 0.32);
    --app-link: #8fd5ff;
    --app-link-hover: #d4edff;
}

html,
body {
    background:
        radial-gradient(circle at top, rgba(77, 182, 255, 0.16), transparent 32%),
        linear-gradient(180deg, #0a1527 0%, var(--app-bg) 46%, #040912 100%);
    color: var(--app-text);
}

body {
    min-height: 100vh;
    /* main grows, so the footer always ends up at the very bottom */
    display: flex;
    flex-direction: column;
}

.app-shell {
    flex: 1 0 auto;
    padding-bottom: 2.5rem;
}

.app-navbar {
    background: rgba(7, 14, 26, 0.86) !important;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.app-navbar {
    padding-top: 10px;
    padding-bottom: 10px;
}

.app-navbar .navbar-brand {
    padding: 0;
}

.app-navbar .navbar-brand img {
    height: 56px;
}

.app-navbar .navbar-collapse {
    padding-top: 0.75rem;
}

/* Bottom of every page; the logos are left out on the login screen. */
.app-footer {
    flex-shrink: 0;
    padding: 1.5rem 0;
    background: rgba(7, 14, 26, 0.86);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.app-footer-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.app-footer-logos img {
    height: 64px;
    max-width: calc(50% - 0.75rem);
    object-fit: contain;
}

/* HoopHelp logo plus an optional club logo, side by side, above the inputs on phones. */
.login-logos {
    gap: 1.5rem;
}

.login-logos img {
    max-height: 200px;
    max-width: calc(50% - 0.75rem);
    min-width: 0;
}

@media (max-width: 767px) {
    .login-logos img {
        max-height: 120px;
    }
}

@media (min-width: 992px) {
    .app-navbar .navbar-collapse {
        padding-top: 0;
    }
}

.app-navbar .nav-link {
    padding: 0.65rem 0.95rem;
    border-radius: 999px;
    color: rgba(232, 238, 247, 0.82) !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus,
.app-navbar .nav-link.active {
    color: #fff !important;
    background-color: rgba(77, 182, 255, 0.14);
    transform: translateY(-1px);
}

.btn-nav {
    background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-strong) 100%) !important;
    border: 0;
    color: #04101d !important;
    font-weight: 700;
    box-shadow: 0 12px 24px rgba(20, 134, 215, 0.28);
}

.btn-nav:hover,
.btn-nav:focus {
    background: linear-gradient(135deg, #79cbff 0%, #2596ea 100%) !important;
    color: #04101d !important;
}

.card,
.panel,
.modal-content,
.breadcrumb,
.table,
.list-group-item,
.dropdown-menu,
.note-editor.note-frame,
.note-toolbar,
.note-editing-area,
.note-statusbar,
.ui-widget-content,
.datepicker-dropdown {
    background-color: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text);
}

.card,
.panel,
.modal-content,
.breadcrumb,
.table-responsive,
.note-editor.note-frame,
.dropdown-menu {
    box-shadow: var(--app-shadow);
}

.card,
.panel,
.modal-content,
.breadcrumb,
.table-responsive {
    border-radius: 18px;
}

.card-header,
.modal-header,
.breadcrumb {
    background: linear-gradient(135deg, rgba(18, 36, 59, 0.94) 0%, rgba(10, 24, 41, 0.92) 100%) !important;
}

.card-body .panel {
    background-color: rgba(12, 23, 40, 0.88);
    border: 1px solid var(--app-border);
}

.bg-light,
.bg-dark,
.table-light,
.table-dark {
    background-color: var(--app-surface-strong) !important;
    color: var(--app-text) !important;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
    --bs-table-striped-color: var(--app-text);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-color: var(--app-text);
    --bs-table-hover-bg: rgba(77, 182, 255, 0.08);
}

.table thead th,
.table tbody td,
.table tbody th {
    border-color: var(--app-border) !important;
}

@media (max-width: 767px) {
    table tr {
        background-color: rgba(12, 23, 40, 0.9);
        border-color: var(--app-border) !important;
    }

    table tr td::before {
        color: var(--app-text-soft) !important;
    }
}

.form-control,
.form-select,
.input-group-text,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.datepicker,
.note-editor .note-editable {
    background-color: rgba(7, 14, 26, 0.9) !important;
    border-color: rgba(148, 163, 184, 0.26) !important;
    color: var(--app-text) !important;
}

.form-control::placeholder,
.form-select::placeholder,
.select2-container--default .select2-search--inline .select2-search__field::placeholder {
    color: rgba(158, 176, 201, 0.72);
}

.form-control:focus,
.form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: rgba(77, 182, 255, 0.74) !important;
    box-shadow: 0 0 0 0.2rem rgba(77, 182, 255, 0.17) !important;
}

.select2-dropdown,
.select2-results__option,
.select2-search__field {
    background-color: #0b1728 !important;
    color: var(--app-text) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--selected {
    background-color: rgba(77, 182, 255, 0.18) !important;
    color: #fff !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: rgba(77, 182, 255, 0.16) !important;
    border: 1px solid rgba(77, 182, 255, 0.3) !important;
    color: #fff !important;
}

.ui-datepicker,
.datepicker-dropdown,
.datepicker table tr td,
.datepicker table tr th {
    background-color: #0b1728 !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-strong) 100%) !important;
    color: #04101d !important;
}

.dashboardPageList .pageList .pageItem a {
    color: var(--app-text);
}

.dashboardPageList .pageList .pageItem a .card {
    background: linear-gradient(155deg, rgba(18, 36, 59, 0.96) 0%, rgba(7, 17, 31, 0.98) 68%);
    border: 1px solid rgba(77, 182, 255, 0.18);
    box-shadow: var(--app-shadow);
}

.dashboardPageList .pageList .pageItem a:hover {
    color: #fff;
}

.dashboardPageList .pageList .pageItem a:hover .card {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(77, 182, 255, 0.4);
}

.alert {
    border: 1px solid transparent;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.alert-success {
    background-color: rgba(79, 209, 161, 0.16);
    border-color: rgba(79, 209, 161, 0.3);
    color: #d7fff0;
}

.alert-danger {
    background-color: rgba(255, 107, 129, 0.16);
    border-color: rgba(255, 107, 129, 0.3);
    color: #ffe0e5;
}

.breadcrumb-item,
.text-muted,
small,
.form-text {
    color: var(--app-text-soft) !important;
}

/* style.css scopes its link colours under `body`, so match that specificity
   here or the light-theme blues win on the dark background. */
body a,
body a:not([href]):not([tabindex]):not(.btn) {
    color: var(--app-link);
    text-decoration: none;
}

body a:hover,
body a:focus,
body a:not([href]):not([tabindex]):not(.btn):hover {
    color: var(--app-link-hover);
    text-decoration: underline;
}

body a:focus-visible {
    outline: 2px solid var(--app-link-hover);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Buttons and nav pills carry their own colours. */
body a.btn,
body a.btn:hover,
body a.btn:focus,
body .nav-link,
body .nav-link:hover,
body .nav-link:focus,
body .breadcrumb-item a,
body .dropdown-item,
body .page-link {
    text-decoration: none;
}

@media (max-width: 767px) {
    body {
        padding-top: 6.5rem;
    }

    .app-shell {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .app-navbar .navbar-collapse {
        margin-top: 0.75rem;
        padding: 1rem;
        border-radius: 18px;
        background: rgba(10, 24, 41, 0.96);
        border: 1px solid var(--app-border);
    }

    .app-navbar .nav-link {
        padding: 0.85rem 1rem;
    }

    .btn-nav {
        width: 100%;
        justify-content: center;
    }
}
/* Buttons ---------------------------------------------------------------
   style.css comes from the light theme: it paints .btn-primary/.btn-info
   pitch black and .btn-default black-on-transparent, and darkly's outline
   buttons are near-black too. All of that disappears against the dark blue
   background. style.css nests its rules under `body`, so match that
   specificity here or the black wins. */
body .btn-primary,
body .btn-info {
    background-color: var(--app-btn);
    border-color: var(--app-btn);
    color: #fff;
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body .btn-primary:hover,
body .btn-primary:focus,
body .btn-info:hover,
body .btn-info:focus {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    color: #04101d;
}

body .btn-primary:active,
body .btn-primary.active,
body .btn-info:active,
body .btn-info.active {
    background-color: var(--app-btn-active);
    border-color: var(--app-btn-active);
    color: #fff;
}

body .btn-primary:disabled,
body .btn-primary.disabled,
body .btn-info:disabled,
body .btn-info.disabled {
    background-color: var(--app-btn);
    border-color: var(--app-btn);
    color: rgba(255, 255, 255, 0.72);
}

/* Icon-only table actions (edit/delete/key) and the "Zurück"/"Abbrechen"
   links — transparent buttons whose whole colour is the FontAwesome glyph. */
body .btn-default {
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--app-link);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body .btn-default:hover,
body .btn-default:focus {
    background-color: rgba(77, 182, 255, 0.14);
    border-color: rgba(77, 182, 255, 0.3);
    color: var(--app-link-hover);
}

body .btn-outline-primary {
    color: var(--app-primary);
    border-color: rgba(77, 182, 255, 0.55);
}

body .btn-outline-primary:hover,
body .btn-outline-primary:focus,
body .btn-outline-primary:active {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    color: #04101d;
}

body .btn-outline-secondary {
    color: var(--app-text-soft);
    border-color: var(--app-border);
}

body .btn-outline-secondary:hover,
body .btn-outline-secondary:focus,
body .btn-outline-secondary:active {
    background-color: rgba(148, 163, 184, 0.16);
    border-color: rgba(148, 163, 184, 0.45);
    color: var(--app-text);
}

/* style.css kills the Bootstrap focus ring on every .btn, which leaves
   keyboard users with no visible focus at all. */
body .btn:focus-visible {
    outline: 2px solid var(--app-link-hover);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * LogViewer (Einstellungen > Logs)
 * ------------------------------------------------------------------------ */

.pulse-highlight,
.pulse-highlight td {
    animation: pulse-bg 2.6s ease-out;
}

@keyframes pulse-bg {
    0% {
        background: rgba(255, 224, 138, 0.35);
    }
    100% {
        background: transparent;
    }
}

.log-viewer {
    max-height: 75vh;
    overflow-y: auto;
    overflow-x: auto;
}

.log-viewer-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8em;
    font-family: monospace;
    color: var(--app-text);
}

.log-viewer-table .log-line-number {
    width: 1%;
    min-width: 45px;
    text-align: right;
    padding: 0 10px 0 8px;
    color: var(--app-text-soft);
    user-select: none;
    border-right: 1px solid var(--app-border);
    background: var(--app-bg-accent);
    white-space: nowrap;
}

.log-viewer-table .log-line-content {
    padding: 0 8px;
    white-space: pre-wrap;
    word-break: break-all;
}

.log-load-bar-wrapper {
    display: block;
    position: sticky;
    top: 0;
    z-index: 100;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
}

.log-load-bar-wrapper--bottom {
    top: auto;
    bottom: 0;
    border-bottom: none;
    border-top: 1px solid var(--app-border);
}

/* die Tooltips der Ladebalken liegen mittig ueber/unter dem Balken, nicht links daneben wie sonst */
body .log-load-bar-wrapper .tt {
    position: relative;
}

body .log-load-bar-wrapper .tt .tttext {
    width: 220px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

body .log-load-bar-wrapper .tt .upper-log-tttext {
    top: 120%;
    bottom: auto;
}

body .log-load-bar-wrapper .tt .lower-log-tttext {
    top: auto;
    bottom: 120%;
}

.log-load-bar {
    display: block;
    width: 100%;
    padding: 4px 0;
    text-align: center;
    color: var(--app-text-soft);
    background: var(--app-bg-accent);
    border: none;
    cursor: pointer;
}

.log-load-bar:hover {
    background: var(--app-surface-strong);
    color: var(--app-text);
}

/* ---------------------------------------------------------------------------
 * Geplante Jobs (Einstellungen > Geplante Jobs)
 * ------------------------------------------------------------------------ */

/* Gruppenzeile pro Modul in der Jobliste */
.scheduledjob-module-row td {
    background: var(--app-bg-accent);
}

/* Zeile kurz hervorheben, nachdem ein Lauf zurueckgeschrieben wurde */
.scheduledjob-updated td {
    transition: background-color 0.4s ease-out;
    background: rgba(255, 224, 138, 0.18);
}

.scheduledjob-output {
    max-height: 400px;
    overflow: auto;
    background: var(--app-bg-accent);
    color: var(--app-text);
    padding: 1rem;
    border-radius: 0.375rem;
}

/* ---------------------------------------------------------------------------
 * Modals
 * ------------------------------------------------------------------------ */

/* --app-surface ist halbtransparent; im Modal schlaegt sonst die Seite
   dahinter durch. Kopf und Koerper bekommen darum deckende Farben. */
.modal-content {
    background-color: var(--app-surface-opaque) !important;
}

.modal-content.grey {
    background-color: var(--app-surface-opaque) !important;
}

.modal-header {
    background: linear-gradient(135deg, #12243b 0%, #0a1829 100%) !important;
}

/* Das Schliessen-Kreuz trug die Linkfarbe des hellen Themes (#002B7F) und war
   auf dunklem Grund praktisch unsichtbar. `.close i` schlaegt `body a`, also
   hier mit hoeherer Spezifitaet nachziehen. */
.modal-header .close i,
.modal-header .close a,
.modal-header .close a i {
    color: var(--app-link);
    text-shadow: none;
}

.modal-header .close a:hover i,
.modal-header .close a:focus i,
.modal-header .close:hover i,
.modal-header .close:focus i {
    color: var(--app-link-hover);
}

.modal-header .close a:focus-visible {
    outline: 2px solid var(--app-link-hover);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Alle Einsaetze ---------------------------------------------------------
   Name und zugehoeriger Knopf stehen in zwei benachbarten Zellen. Ohne feste
   Zeilenhoehe laufen sie auseinander, sobald eine Seite hoeher baut als die
   andere (Knopf gegen Textzeile mit Badges). */
.duty-admin-all-assignments .assignment-line {
    min-height: 2rem;
    margin-bottom: 0.25rem;
}

/* Sprungziel des Zurueck-Knopfs auf "Slots konfigurieren": die fixierte
   Navigation wuerde die angesprungene Karte sonst verdecken. */
.duty-admin-all-assignments .card[id^="event-"] {
    scroll-margin-top: 7rem;
}