/* Basic Tailwind CSS styles for authentication pages */

/* This is a minimal CSS file to ensure basic styling works */
/* The main Tailwind CSS is loaded via CDN in the layout */

/* Additional custom styles can be added here */
.filament-form .fi-input {
    @apply border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm;
}

.filament-form .fi-btn {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
}

/* Floating Label Styles */
.floating-label-group {
    position: relative;
    z-index: 0;
    width: 100%;
    margin-bottom: 1.25rem; /* mb-5 */
}

.floating-input {
    display: block;
    padding: 0.625rem 0; /* py-2.5 px-0 */
    width: 100%;
    font-size: 0.875rem; /* text-sm */
    color: #111827; /* text-gray-900 */
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid #d1d5db; /* border-gray-300 */
    appearance: none;
    outline: none;
    transition: border-color 0.3s ease;
}

.floating-input:focus {
    border-bottom-color: #4e8cf9;
    outline: none;
    box-shadow: none;
}

.floating-input:focus + .floating-label,
.floating-input:not(:placeholder-shown) + .floating-label {
    transform: translateY(-1.5rem) scale(0.75);
    color: #4e8cf9;
}

.floating-label {
    position: absolute;
    top: 0.75rem; /* top-3 */
    left: 0;
    z-index: -10;
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* text-gray-500 */
    transform-origin: 0 0;
    transition: transform 0.3s ease, color 0.3s ease;
    pointer-events: none;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .floating-input {
        color: white;
        border-bottom-color: #4b5563; /* dark:border-gray-600 */
    }
    
    .floating-input:focus {
        border-bottom-color: #4e8cf9;
    }
    
    .floating-label {
        color: #9ca3af; /* dark:text-gray-400 */
    }
    
    .floating-input:focus + .floating-label,
    .floating-input:not(:placeholder-shown) + .floating-label {
        color: #4e8cf9;
    }
}

/* Override Filament form styles for floating inputs */
.filament-form .floating-input {
    border: 0 !important;
    border-bottom: 2px solid #d1d5db !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.625rem 0 !important;
}

.filament-form .floating-input:focus {
    border-bottom-color: #4e8cf9 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Hide default Filament labels for floating inputs */
.filament-form .floating-label-group .fi-fo-field-wrp-label {
    display: none !important;
}

/* Remove autofill background styling */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: #111827 !important;
    background-color: transparent !important;
    background-image: none !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Dark mode autofill styling */
@media (prefers-color-scheme: dark) {
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-text-fill-color: white !important;
    }
}

/* For Firefox autofill */
input:-moz-autofill {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Remove autofill background for floating inputs specifically */
.floating-input:-webkit-autofill,
.floating-input:-webkit-autofill:hover,
.floating-input:-webkit-autofill:focus,
.floating-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: #111827 !important;
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: 2px solid #d1d5db !important;
    transition: background-color 5000s ease-in-out 0s;
}

.floating-input:-webkit-autofill:focus {
    border-bottom-color: #4e8cf9 !important;
}

/* Dark mode for floating inputs */
@media (prefers-color-scheme: dark) {
    .floating-input:-webkit-autofill,
    .floating-input:-webkit-autofill:hover,
    .floating-input:-webkit-autofill:focus,
    .floating-input:-webkit-autofill:active {
        -webkit-text-fill-color: white !important;
        border-bottom-color: #4b5563 !important;
    }
    
    .floating-input:-webkit-autofill:focus {
        border-bottom-color: #4e8cf9 !important;
    }
}

/* Custom validation error styling */
.custom-error {
    animation: fadeInError 0.3s ease-in-out;
    font-weight: 500;
}

@keyframes fadeInError {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Error state for floating inputs */
.floating-input.border-red-500 {
    border-bottom-color: #ef4444 !important;
}

.floating-input.border-red-500:focus {
    border-bottom-color: #dc2626 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Dark mode error styling */
@media (prefers-color-scheme: dark) {
    .floating-input.dark\:border-red-500 {
        border-bottom-color: #f87171 !important;
    }
    
    .floating-input.dark\:border-red-500:focus {
        border-bottom-color: #ef4444 !important;
    }
}

/* Error state label styling */
.floating-input.border-red-500 + label,
.floating-input.dark\:border-red-500 + label {
    color: #ef4444 !important;
}

.floating-input.border-red-500:focus + label,
.floating-input.dark\:border-red-500:focus + label {
    color: #dc2626 !important;
}

/* Smooth transitions for error states */
.floating-input {
    transition: border-color 0.3s ease, color 0.3s ease;
}

.floating-label {
    transition: transform 0.3s ease, color 0.3s ease;
}