/* Custom styles for your project */

/* Add smooth transitions to links and buttons for a better user experience */
a,
button {
    transition: all 0.2s ease-in-out;
}

/* Base styles for forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea {
    @apply border border-gray-300 rounded-md shadow-sm p-2;
}

/* Hide the default spinner buttons on number inputs in WebKit browsers (e.g., Chrome, Safari) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide the default spinner buttons on number inputs in Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

/* Custom styles for the list items to add a subtle hover effect */
#levelsList .group:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Ensure the admin panel's nested list items have a distinct look */
#pendingList > div,
#usersList > div {
    @apply border-b border-gray-200 last:border-b-0;
}

/* Add a subtle animation for the toast notifications */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast {
    animation: slideIn 0.3s ease-out forwards;
}

/* General body styling for a clean look and feel */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
}

/* Adjust font sizes for different screen sizes */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
}