/*==============================================================================
    style-dark.css - Augenfreundlicher Kontrast & Flächiges Design
    ==============================================================================*/

@media (prefers-color-scheme: dark) {
    :root {
        /* Hintergrund-Töne */
        --rz-bg-main: #1c2530;      
        --rz-bg-input: #2d3a4b;     
        
        /* Text-Farben: 'Muted' als Standard für Lesekomfort */
        --rz-text-main: #adb5bd;    /* Silbergrau statt Reinweiß */
        --rz-text-muted: #868e96;   
        --rz-text-bright: #e9ecef;  /* Weiches Weiß für Fokus-Elemente */
        
        /* Rahmen & Linien */
        --rz-border-color: #3d4b5d;

        /* Bootstrap Overrides */
        --bs-body-bg: var(--rz-bg-main);
        --bs-body-color: var(--rz-text-main);
    }

    /* 1. Haupt-Hintergrund & Basisschrift */
    body, 
    #bfsg-main, 
    .page-content,
    main.container {
        background-color: var(--rz-bg-main) !important;
        color: var(--rz-text-main) !important;
    }

    /* 2. Karten (Login-Box etc.) */
    .card {
        background-color: var(--rz-bg-main) !important;
        border: 1px solid var(--rz-border-color) !important;
        color: var(--rz-text-main) !important;
        box-shadow: none !important;
    }

    /* 3. Typografie & Überschriften */
    h1, h2, h3, h4, h5, h6, 
    main h1, main h2, main h3, main h4, main h5, main h6 {
        color: var(--rz-text-bright) !important;
    }
    
    h1 { color: #6a8cd1 !important; }

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

    /* 4. Formulare & Such-Pille */
    .shadow-sm.d-flex.align-items-center.bg-white {
        background-color: var(--rz-bg-input) !important; 
        border: 1px solid var(--rz-border-color) !important;
    }

    .form-control, 
    .shadow-sm.d-flex.align-items-center.bg-white input {
        background-color: var(--rz-bg-input) !important;
        border: 1px solid var(--rz-border-color) !important;
        color: var(--rz-text-bright) !important;
    }

    .shadow-sm.d-flex.align-items-center.bg-white input {
        background-color: transparent !important;
        border: none !important;
    }

    input::placeholder, .form-control::placeholder {
        color: var(--rz-text-muted) !important;
        opacity: 1;
    }

    .form-control:focus {
        background-color: var(--rz-bg-input) !important;
        border-color: #6a8cd1 !important;
        box-shadow: 0 0 0 0.25rem rgba(106, 140, 209, 0.25) !important;
    }

    /* 5. Icons */
    .shadow-sm.d-flex.align-items-center.bg-white i,
    .text-primary,
    .ti-info-alt {
        color: #6a8cd1 !important;
    }

    /* 6. Buttons (Sämtliche Button-Texte auf weiches Weiß umstellen) */
    .btn {
        --bs-btn-color: var(--rz-text-bright) !important;
        --bs-btn-hover-color: var(--rz-text-bright) !important;
        --bs-btn-active-color: var(--rz-text-bright) !important;
    }

    /* Spezielle Korrektur für Outline-Primary (Rahmenfarbe beibehalten) */
    .btn-outline-primary {
        --bs-btn-border-color: var(--rz-bfsgblau) !important;
        --bs-btn-hover-bg: var(--rz-kuerbisrot) !important;
    }

    /* 7. Tabellen */
    .table {
        --bs-table-color: var(--rz-text-main);
        --bs-table-bg: transparent;
        --bs-table-border-color: var(--rz-border-color);
        --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    }

    .table thead th {
        background-color: rgba(59, 91, 158, 0.2) !important;
        color: #6a8cd1 !important;
    }

    .table-hover tbody tr:hover td {
        color: var(--rz-text-bright) !important;
    }

    /* 8. Popover */
    .popover {
        background-color: var(--rz-bg-input);
        border: 1px solid var(--rz-bfsgblau);
    }
}