/* ==========================================================================
   httpauth-dark.css - Dark Mode Stile für die Login-Box
   Diese Stile werden nur angewendet, wenn der Dark Mode aktiv ist.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    /* Anpassung der Login-Box selbst */
    .wrap {
        background: var(--rz-dunkelblau) !important; /* Dunkler Hintergrund für die Box */
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.1) !important; /* Subtiler heller Schatten */
    }

    /* Anpassung der allgemeinen Formularfelder (wie von Bootstrap verwendet) */
    .form-control {
        background-color: var(--rz-dunkelblau) !important; /* Hintergrundfarbe Dunkelblau */
        color: var(--rz-graublau) !important; /* Textfarbe Hellgrau-Blau */
        border-color: var(--rz-border-dark) !important; /* Dunklerer Rahmen für Kontrast */
    }

    /* Sicherstellen, dass die Textfarbe auch bei Autofill im Dark Mode hell bleibt */
    input:-internal-autofill-selected {
        -webkit-text-fill-color: var(--rz-graublau) !important; /* Textfarbe Hellgrau-Blau bei Autofill */
        background-color: var(--rz-dunkelblau) !important; /* Hintergrundfarbe bei Autofill */
        /* Behalten Sie die Transition bei, um Browser-Autofill-Stile zu überlisten */
        transition: background-color 5000s ease-in-out 0s;
    }

    /* Spezifische Anpassung für die Input-Felder in der Login-Box (`form label input`) im Dark Mode */
    form label input {
        background-color: var(--rz-dunkelblau) !important; /* Hintergrund des Input-Feldes Dunkelblau */
        color: var(--rz-graublau) !important; /* Textfarbe im Input-Feld Hellgrau-Blau */
        border-color: var(--rz-border-dark) !important; /* Randfarbe: Dunklerer Ton für Kontrast */
        
        /* Behalten Sie die Autofill-Überschreibung bei */
        -webkit-text-fill-color: var(--rz-graublau) !important;
        transition: background-color 5000s ease-in-out 0s;
    }

    /* Hover-Effekt für Input-Felder im Dark Mode */
    form label input:hover {
        border-color: var(--rz-hellblau) !important; /* Eine hellere Linkfarbe für den Hover-Rand */
    }

    /* Fokus-Effekt für Input-Felder im Dark Mode */
    form label input:focus {
        border-color: var(--rz-kuerbisrot) !important; /* Kürbisrot als starker Fokus-Indikator */
        box-shadow: 0 0 0 0.25rem var(--rz-focus-shadow-dark) !important; 
        outline: 0 !important;
    }

    /* Platzhaltertext (Placeholder) im Dark Mode */
    .form-control::placeholder {
        color: var(--rz-dark-muted) !important; /* Eine leicht gedämpfte hellere Farbe */
        opacity: 0.8; /* Leichte Transparenz für den Platzhaltercharakter */
    }
    /* Für Firefox (spezifischer Vendor-Prefix) */
    .form-control::-moz-placeholder {
        color: var(--rz-dark-muted) !important;
        opacity: 0.8;
    }

    /* Anpassungen für Checkboxen und Radio-Buttons im Dark Mode */
    .form-check-input {
        border-color: var(--rz-border-dark) !important; /* Rahmenfarbe Dunkelblau */
        background-color: var(--rz-dunkelblau) !important; /* Hintergrund Dunkelblau */
    }

    /* Hover-Effekt für Checkboxen/Radio-Buttons im Dark Mode */
    .form-check-input:hover {
        border-color: var(--rz-hellblau) !important;
    }

    /* Fokus-Effekt für Checkboxen und Radio-Buttons im Dark Mode */
    .form-check-input:focus {
        border-color: var(--rz-kuerbisrot) !important;
        box-shadow: 0 0 0 0.25rem var(--rz-focus-shadow-dark) !important;
        outline: 0 !important;
    }

    /* Wenn Checkbox/Radio ausgewählt ist, sollte der Haken/Punkt hell sein */
    .form-check-input:checked {
        background-color: var(--rz-hellblau) !important; /* Oder eine andere Akzentfarbe für den Haken */
        border-color: var(--rz-hellblau) !important;
    }

    /* Spezifische Anpassung für den "Datei auswählen"-Button im Dark Mode */
    .form-control[type="file"]::-webkit-file-upload-button,
    .form-control[type="file"]::file-selector-button {
        background-color: var(--rz-border-dark) !important; /* Dunklerer Hintergrund für den Button */
        color: var(--rz-graublau) !important; /* Hellerer Text */
        border: 1px solid var(--rz-border-dark) !important; /* Passender dunkler Rand */
    }

    /* Hover- und Fokus-Effekte für den "Datei auswählen"-Button im Dark Mode */
    .form-control[type="file"]::-webkit-file-upload-button:hover,
    .form-control[type="file"]::-webkit-file-upload-button:focus,
    .form-control[type="file"]::file-selector-button:hover,
    .form-control[type="file"]::file-selector-button:focus {
        background-color: var(--rz-hellblau) !important; /* Helle Farbe beim Hover/Fokus */
        border-color: var(--rz-hellblau) !important;
        color: var(--rz-dunkelblau) !important; /* Dunkler Text für Kontrast */
        box-shadow: 0 0 0 0.25rem var(--rz-focus-shadow-dark) !important;
    }
}