/* =============================================================
   HOST-Anmeldesystem — app.css
   Bootstrap 5.3 overrides + Custom Styles
   Primärfarbe: #E1232B (HOST-Rot), Grau-O: #B2B2B2
   ============================================================= */

/* --- Variablen -------------------------------------------- */
:root {
    --host-red:        #E1232B;
    --host-red-dark:   #b81b22;
    --host-red-light:  #fdf0f0;
    --host-gray-o:     #B2B2B2;
    --host-bg:         #f4f3f1;
    --host-border:     #e0dedd;
    --host-card-bg:    #ffffff;
}

/* --- Bootstrap-Primary auf HOST-Rot umlegen --------------- */

/* Buttons */
.btn-primary {
    --bs-btn-bg:                var(--host-red);
    --bs-btn-border-color:      var(--host-red);
    --bs-btn-hover-bg:          var(--host-red-dark);
    --bs-btn-hover-border-color:var(--host-red-dark);
    --bs-btn-active-bg:         var(--host-red-dark);
    --bs-btn-active-border-color:var(--host-red-dark);
    --bs-btn-focus-shadow-rgb:  225, 35, 43;
    --bs-btn-disabled-bg:       var(--host-red);
    --bs-btn-disabled-border-color:var(--host-red);
    color: #fff;
}

.btn-outline-primary {
    --bs-btn-color:              var(--host-red);
    --bs-btn-border-color:       var(--host-red);
    --bs-btn-hover-bg:           var(--host-red);
    --bs-btn-hover-border-color: var(--host-red);
    --bs-btn-active-bg:          var(--host-red);
    --bs-btn-active-border-color:var(--host-red);
    --bs-btn-focus-shadow-rgb:   225, 35, 43;
}

/* Hintergründe, Text, Rahmen */
.bg-primary         { background-color: var(--host-red) !important; }
.text-primary       { color: var(--host-red) !important; }
.border-primary     { border-color: var(--host-red) !important; }
.badge.bg-primary   { background-color: var(--host-red) !important; }

/* Progress-Bar */
.progress-bar.bg-primary { background-color: var(--host-red) !important; }

/* Links */
a { color: var(--host-red); }
a:hover { color: var(--host-red-dark); }
/* Ausnahmen: Button-Links, Nav-Links etc. sollen eigene Farbe behalten */
.btn:hover,
.nav-link:hover,
.dropdown-item:hover,
.dropdown-item:focus { color: inherit; }

/* --- Seitenlayout ----------------------------------------- */
body {
    background-color: var(--host-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

/* --- Navbar ----------------------------------------------- */
.navbar-host {
    background-color: #ffffff;
    border-bottom: 3px solid var(--host-red);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    padding-top: 0;
    padding-bottom: 0;
    min-height: 58px;
    position: relative;
    z-index: 1040;
}

.navbar-host .navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1c1c1c;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.01em;
    text-decoration: none;
    padding: 8px 0;
}

.navbar-host .navbar-brand:hover { color: #1c1c1c; }

.navbar-host .navbar-brand-sub {
    font-weight: 400;
    color: #666;
    font-size: 13px;
}

.navbar-host .nav-link {
    color: #555;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 4px;
    transition: background-color 0.15s, color 0.15s;
}

.navbar-host .nav-link:hover {
    color: var(--host-red);
    background-color: var(--host-red-light);
}

.navbar-host .nav-link.active {
    color: var(--host-red);
    font-weight: 500;
}

.navbar-host .navbar-toggler {
    border-color: var(--host-border);
}

.navbar-host .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23555' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown über sticky-top-Elementen anzeigen.
   Popper.js setzt inline z-index auf Dropdowns — deshalb sticky-top
   nach unten ziehen statt das Dropdown hochzuschieben. */
.sticky-top {
    z-index: 100;
}

/* Navbar-Dropdown-Styles */
.navbar-host .dropdown-menu {
    border: 0.5px solid var(--host-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    margin-top: 4px;
}

.navbar-host .dropdown-item {
    font-size: 13px;
    color: #444;
}

.navbar-host .dropdown-item:hover {
    background-color: var(--host-red-light);
    color: var(--host-red);
}

.navbar-host .dropdown-divider {
    border-color: var(--host-border);
}

/* User-Avatar */
.nav-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--host-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

/* --- Karten ----------------------------------------------- */
.card {
    border-color: var(--host-border);
    background-color: var(--host-card-bg);
}

.card-header {
    background-color: #f9f8f7;
    border-bottom-color: var(--host-border);
    font-weight: 500;
}

/* Anmelde-Sidebar-Card: roter Header */
.card-header-primary {
    background-color: var(--host-red);
    color: #fff;
    border-bottom-color: var(--host-red-dark);
}

.card-header-primary h5,
.card-header-primary h6 {
    color: #fff;
    margin-bottom: 0;
}

/* --- Footer ----------------------------------------------- */
footer {
    background-color: #fff !important;
    border-top: 1px solid var(--host-border) !important;
}

footer .text-muted { color: #888 !important; }

/* --- Tabellen --------------------------------------------- */
.table-light > * { background-color: #f9f8f7; }
.table > :not(caption) > * > * { border-color: var(--host-border); }

/* --- Formulare -------------------------------------------- */
.form-control:focus,
.form-select:focus {
    border-color: var(--host-red);
    box-shadow: 0 0 0 0.2rem rgba(225, 35, 43, 0.15);
}

.form-check-input:checked {
    background-color: var(--host-red);
    border-color: var(--host-red);
}

.form-check-input:focus {
    border-color: var(--host-red);
    box-shadow: 0 0 0 0.2rem rgba(225, 35, 43, 0.15);
}

.form-switch .form-check-input:checked {
    background-color: var(--host-red);
    border-color: var(--host-red);
}

/* --- Flash-Meldungen -------------------------------------- */
.alert-info {
    background-color: #eef4fd;
    border-color: #c5d9f5;
    color: #1a4a8a;
}

/* --- Pagination ------------------------------------------- */
.page-link { color: var(--host-red); }
.page-item.active .page-link {
    background-color: var(--host-red);
    border-color: var(--host-red);
}

/* --- Diverses --------------------------------------------- */
.navbar-brand { font-weight: 600; }

/* Login-Seite: Logo-Block */
.host-login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

/* Event-Liste: Akzentlinie oben an Karten */
.event-card-accent {
    border-top: 3px solid var(--host-red);
}

/* Creator-Form: Vorlage-Banner */
.template-banner {
    border-left: 4px solid var(--host-red);
    background-color: var(--host-red-light);
}