/* Eigene Ergänzungen zum Material-Dashboard-Theme für Nez Rouge Solothurn CRM */

/*
 * Material Dashboard schaltet die geschrumpfte Label-Position der
 * "input-group-outline"-Felder nur über JS-Tastatur-Events um (siehe
 * material-dashboard.js). Bei Browser-Autofill feuern diese Events nicht
 * zuverlässig. Dieser Fallback nutzt :has() + :-webkit-autofill, damit das
 * Label auch bei autofill-befüllten Feldern korrekt nach oben rutscht.
 */
.input-group.input-group-outline:has(.form-control:-webkit-autofill) .form-label {
    width: 100%;
    height: 100%;
    font-size: 0.6875rem !important;
    color: #e91e63;
    display: flex;
    line-height: 1.25 !important;
}

.input-group.input-group-outline:has(.form-control:-webkit-autofill) .form-label:before,
.input-group.input-group-outline:has(.form-control:-webkit-autofill) .form-label:after {
    opacity: 1;
    border-top-color: #e91e63;
    box-shadow: inset 0 1px #e91e63;
}

.input-group.input-group-outline:has(.form-control:-webkit-autofill) .form-label + .form-control {
    border-color: #e91e63 !important;
    border-top-color: transparent !important;
    box-shadow: inset 1px 0 #e91e63, inset -1px 0 #e91e63, inset 0 -1px #e91e63;
}