/**
 * Validierungsstile für das Anmeldeformular
 * Unterstützt die reine JavaScript-Validierung
 */

/* Grundlegende Formularstile */
label {
    font-weight: 500;
}

/* Fehlerstile für Eingabefelder */
input.error, 
select.error, 
textarea.error {
    border: 1px solid #dc3545 !important;
    padding-right: 2rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(0.375em + 0.1875rem) center !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
}

/* Validierungsstile für gültige Eingabefelder */
input.valid, 
select.valid, 
textarea.valid {
    border: 1px solid #28a745 !important;
    padding-right: 2rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(0.375em + 0.1875rem) center !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
}

/* Spezielle Behandlung für Selects */
select.error {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: right calc(2.375em + 0.1875rem) center, right 0.75rem center !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem), 8px 10px !important;
    padding-right: 3rem !important;
}

select.valid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: right calc(2.375em + 0.1875rem) center, right 0.75rem center !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem), 8px 10px !important;
    padding-right: 3rem !important;
}

/* Fehlermeldung-Tooltip-Stil */
.validationerror {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #dc3545 !important;
    margin-top: 0.1rem !important;
    margin-bottom: 0.25rem !important;
    font-size: 14px !important;
    font-weight: normal !important;
    padding: 0.3rem !important;
    background-color: rgba(220, 53, 69, 0.05) !important;
    border-radius: 0.25rem !important;
    border-left: 3px solid #dc3545 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    z-index: 1000 !important;
    width: 100% !important;
    max-width: 520px !important;
    clear: both !important;
    position: relative !important;
    text-align: left !important;
    margin-left: 0 !important;
}

/* Nur Input-Felder mit Fehlern erhalten einen roten Rahmen */
input.error:not([type="checkbox"]):not([type="radio"]),
textarea.error,
select.error {
    border-color: #dc3545 !important;
}

/* Checkboxen und Radio-Buttons bekommen keine visuellen Indikatoren */
input[type="checkbox"].error,
input[type="radio"].error,
input[type="checkbox"].valid,
input[type="radio"].valid,
select.valid {
    border-color: initial !important;
    background-image: none !important;
}

/* Nur reguläre Input-Felder erhalten einen grünen Rahmen, wenn gültig */
input.valid:not([type="checkbox"]):not([type="radio"]),
textarea.valid {
    border-color: #28a745 !important;
}

/* Spezielle Positionierung für Datums-Fehlermeldungen */
input[type="date"] + .validationerror,
.date-picker + .validationerror,
input[type="text"][data-role="datepicker"] + .validationerror,
#birthdate0 + .validationerror {
    margin-top: 0.15rem !important;
    margin-bottom: 0.5rem !important;
    clear: both !important;
    margin-left: 0 !important;
}

/* Positionierung für Radio-Button-Gruppen und Wochenauswahl */
.form-check-inline + .validationerror,
.form-check + .validationerror,
.btn-group-toggle + .validationerror,
.validationerror[data-for="curso0[]"],
.validationerror[data-for="alumno"],
.validationerror[data-for="nadar"],
.validationerror[data-for="piscinas"],
.validationerror[data-for="socorrista"],
.validationerror[data-for="idioma"],
.col-auto > .validationerror {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    margin-left: 0 !important;
    display: block !important;
    clear: both !important;
    width: 100% !important;
    text-align: left !important;
}

/* Für Textarea-Felder */
textarea + .validationerror,
.validationerror[data-for="observaciones"],
.validationerror[data-for="como"] {
    margin-top: 0.15rem !important;
    margin-bottom: 0.5rem !important;
    margin-left: 22em !important;
    width: 100% !important;
    clear: both !important;
    text-align: left !important;
}

/* Stellen Sie sicher, dass die Fehlermeldung immer unter dem Input erscheint */
.col-sm-9 .validationerror,
.col-sm-8 .validationerror,
.col-sm-6 .validationerror {
    margin-left: 0 !important;
    width: 100% !important;
    text-align: left !important;
}

/* Zusätzliche Stile für Radio-Buttons und Checkboxen */
.radio.error, 
.checkbox.error {
    color: #dc3545;
}

.radio.valid,
.checkbox.valid {
    color: #28a745;
}

/* Hervorhebung für Radio-Gruppen mit Fehlern */
input[type="radio"].error + label,
input[type="checkbox"].error + label {
    color: #dc3545;
    font-weight: bold;
}

/* Responsive-Anpassungen für Labels */
@media (max-width: 768px) {
    label {
        text-align: left;
    }
    
    .validationerror {
        max-width: 100%;
    }
}

/* Fehlermeldungscontainer nach Radio/Checkbox-Gruppen */
.form-check-inline + .validationerror,
.form-check + .validationerror {
    margin-top: 0.25rem !important;
    margin-left: 1.5rem !important;
}

/* Ausrichtung der Labels je nach Bildschirmgröße */
@media (min-width: 768px) {
    /* Für größere Bildschirme: Rechts ausgerichtet */
    .col-form-label, 
    label.col-sm-3 {
        text-align: right !important;
        padding-right: 1rem !important;
    }
}

@media (max-width: 767px) {
    /* Für kleinere Bildschirme: Links ausgerichtet */
    .col-form-label, 
    label.col-sm-3 {
        text-align: left !important;
    }
}

/* Submit-Button ohne Validierungszeichen */
button.btn-dsb + .validationerror {
    display: none !important;
}

/* Submit-Button niemals rot markieren */
button.is-invalid, 
button.btn-dsb.is-invalid {
    border-color: var(--colorHex-dsbBlue) !important;
    box-shadow: none !important;
    background-color: var(--colorHex-dsbBlue) !important;
}

/* Rote Beschriftung für Radiobuttons und Checkboxen entfernen */
.form-check .form-check-label {
    color: #212529 !important; /* Standard Textfarbe */
    font-weight: normal !important;
}

/* Bootstrap-Validierungs-Icons für korrekte Eingaben */
.was-validated .form-control:valid, .form-control.is-valid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Anpassungen für das DSB-Formular */
.form-row {
    position: relative;
    margin-bottom: 0.1rem;
}

/* Verbesserungen für Radio-Buttons */
.btn-group-toggle .form-check-input {
    width: 16px !important;
    height: 16px !important;
}

.form-check-label {
    margin-left: 0.5rem;
}

/* Klasse für die Container, die direkt nach den Formularfeldern kommen */
.input-field-container {
    position: relative;
}

/* Labels rechtsbündig auf breiten Bildschirmen */
@media (min-width: 768px) {
    form#formins .col-form-label,
    form#formins label.col-sm-3 {
        text-align: right !important;
        padding-right: 1rem !important;
    }
}

/* Labelausrichtung in Formularen allgemein */
form .col-form-label {
    padding-top: calc(0.375rem + 1px);
    /* padding-bottom: calc(0.375rem + 1px); */
    padding-bottom: 0;
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
}

/* Überschreibe die Standard-Label-Ausrichtung */
.form-group label {
    text-align: left;
}

@media (min-width: 768px) {
    .form-group label {
        text-align: right !important;
    }
}

/* Allgemeine Positionierung für Eingabefelder */
input:not([type="radio"]):not([type="checkbox"]) + .validationerror,
textarea + .validationerror,
select + .validationerror {
    margin-top: 0.15rem !important;
    margin-bottom: 0.5rem !important;
} 

input#infoKursFundort + div.validationerror {
    margin-left: 9em!important;
}