/* 
* Floating Label Fix for Dark Mode
* Completely removes background colors from floating labels in dark mode
*/

/* Override Bootstrap's default floating label implementation to remove background */
[data-theme="dark"] .form-floating > label {
    color: rgba(255, 255, 255, 0.7);
    background-color: transparent !important;
}

[data-theme="dark"] .form-floating > label::after {
    background-color: transparent !important;
    content: "" !important;
}

/* Handle both focused and filled states */
[data-theme="dark"] .form-floating > .form-control:focus ~ label,
[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label,
[data-theme="dark"] .form-floating > .form-select ~ label {
    background-color: transparent !important;
    color: var(--primary-color);
    opacity: 1;
}

/* Handle the ::after pseudo-element specifically */
[data-theme="dark"] .form-floating > .form-control:focus ~ label::after,
[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
[data-theme="dark"] .form-floating > .form-select ~ label::after {
    background-color: transparent !important;
    content: "" !important;
}

/* Additional override for specific Bootstrap classes */
[data-theme="dark"] .form-floating > .form-control,
[data-theme="dark"] .form-floating > .form-select {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--light-color);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Ensure autofill doesn't add a white background */
[data-theme="dark"] .form-floating > .form-control:-webkit-autofill,
[data-theme="dark"] .form-floating > .form-control:-webkit-autofill:hover,
[data-theme="dark"] .form-floating > .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--dark-color) inset !important;
    -webkit-text-fill-color: var(--light-color) !important;
    transition: background-color 5000s ease-in-out 0s;
}