/* ==========================================================
   Bohn Plays Music - Timetable Styling
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root {
    --bpm-red: #e31b23;          
    --bpm-red-hover: #b81218;    
    --bpm-gold: #d4af37;         
    --bpm-gold-hover: #f3e5ab;   
    --bpm-champagne: #dfd5c6;    
    
    --bg-box: #181818;           
    --border-box: #2A2724;       
    --text-main: #ffffff;        
    --text-muted: #aba7a3;       
}

html, body {
    background: radial-gradient(circle at 50% 35%, #36302c 0%, #161413 55%, #050505 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
    color: var(--text-main) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.bpm-logo {
    max-height: 45px;
    width: auto;
    display: inline-block;
}

input[type="date"], 
input[type="time"], 
input[type="datetime-local"] {
    color-scheme: dark !important;
    color: #ffffff !important;
    background-color: #0d0d0d !important;
}

h1, h2, h3, h4, h5, h6, strong, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #ffffff !important;
    font-weight: 700;
}

.text-muted {
    color: var(--text-muted) !important;
}

.card {
    background-color: var(--bg-box) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: inset 0 0 0 1px var(--border-box), 0px 25px 60px rgba(0, 0, 0, 0.6) !important;
    color: var(--text-main) !important;
}

.card-header {
    background-color: #242424 !important;
    border-bottom: 1px solid var(--border-box) !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    color: #ffffff !important;
    font-weight: 600;
}

.btn {
    border-radius: 6px !important;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

.btn-primary, .btn-success {
    background-color: var(--bpm-red) !important;
    border: 1px solid var(--bpm-red) !important;
    color: #ffffff !important;
}

.btn-primary:hover, .btn-success:hover {
    background-color: var(--bpm-red-hover) !important;
    border-color: var(--bpm-red-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(227, 27, 35, 0.4);
}

.btn-outline-secondary {
    color: var(--bpm-champagne) !important;
    border-color: var(--border-box) !important;
}

.btn-outline-secondary:hover {
    background-color: var(--border-box) !important;
    color: #ffffff !important;
}

.form-control, .form-select {
    background-color: #0d0d0d !important;
    border: 1px solid var(--border-box) !important;
    color: #ffffff !important;
    border-radius: 6px;
}

.form-control::placeholder {
    color: #666666 !important;
}

.form-control:focus, .form-select:focus {
    background-color: #050505 !important;
    border-color: var(--bpm-red) !important;
    box-shadow: 0 0 0 0.25rem rgba(227, 27, 35, 0.25) !important;
    color: #ffffff !important;
}

.input-group-text {
    background-color: #242424 !important;
    border: 1px solid var(--border-box) !important;
    color: var(--bpm-champagne) !important;
}

.list-group-item {
    background-color: #121212 !important;
    border: 1px solid var(--border-box) !important;
    color: var(--text-main) !important;
    border-radius: 6px !important;
    margin-bottom: 8px;
}

.badge.bg-success {
    background-color: #10b981 !important;
}

.badge.bg-warning {
    background-color: var(--bpm-gold) !important;
    color: #000000 !important;
}

.border-top {
    border-top-color: var(--border-box) !important;
}

/* 💬 FIX: Kommentare im Dark Mode hervorragend lesbar machen */
.comment-item {
    color: var(--bpm-champagne) !important;
}
.comment-item b {
    color: #ffffff !important;
}

/* 🔔 FIX: Alert-Boxen mit klarem, dunklem Text auf hellem Grund */
.alert-success {
    background-color: #d1e7dd !important;
    border-color: #badbcc !important;
    color: #0f5132 !important;
}
.alert-success strong, .alert-success span, .alert-success div {
    color: #0f5132 !important;
}

.alert-danger {
    background-color: #f8d7da !important;
    border-color: #f5c2c7 !important;
    color: #842029 !important;
}
.alert-danger strong, .alert-danger span, .alert-danger div {
    color: #842029 !important;
}

@media print {
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }
    .btn, form, nav, .card-header button, input, textarea, .no-print {
        display: none !important;
    }
    .card {
        background: #ffffff !important;
        color: #000000 !important;
        box-shadow: none !important;
        border: none !important;
    }
    .card-header {
        background: #ffffff !important;
        color: #000000 !important;
        border-bottom: 2px solid #000 !important;
        font-size: 1.5rem;
    }
    .list-group-item {
        background: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #ccc !important;
    }
    h1, h2, h3, h4, h5, h6, strong, .text-muted {
        color: #000000 !important;
    }
}