* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

[x-cloak] {
    display: none !important;
}
/* Shake animation for errors */
@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-4px);
    }
    75% {
        transform: translateX(4px);
    }
}

.animate-shake {
    animation: shake 0.3s ease-in-out;
}

/* Spin animation for loading */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Fade transitions */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.2s ease-out;
}

/* Scale transitions */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-scale-in {
    animation: scaleIn 0.2s ease-out;
}
/* Style the date picker calendar icon */
input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    color: transparent;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

/* Fix dark mode for date picker */
input[type="date"] {
    color-scheme: light;
}

.dark input[type="date"] {
    color-scheme: dark;
}

/* Custom date input styling */
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

input[type="date"]::-webkit-datetime-edit-text {
    color: inherit;
    padding: 0 0.25rem;
}

input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
    color: inherit;
}

select {
    color-scheme: light dark;
}

select option {
    background-color: inherit;
    color: inherit;
}

@media (prefers-color-scheme: dark) {
    select {
        color-scheme: dark;
    }
}