/* Custom CSS for alphaonboard */

/* General Body and Scrollbar Styles */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar for overflow elements */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05); /* Very subtle transparent track */
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(147, 51, 234, 0.4); /* Purple-500 with transparency */
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.05); /* Match track background for subtle effect */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(147, 51, 234, 0.6); /* Darker purple on hover */
}


/* --- Buttons --- */
.btn {
    @apply flex items-center justify-center px-5 py-2 rounded-full font-medium text-sm transition-all duration-300 ease-in-out shadow-lg transform active:scale-95;
}

.btn-primary {
    @apply btn bg-gradient-to-r from-purple-600 to-indigo-600 text-white hover:from-purple-700 hover:to-indigo-700 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75;
}

.btn-secondary {
    @apply btn bg-transparent border border-purple-400 text-purple-200 hover:bg-purple-700/30 hover:border-purple-500 hover:text-white hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75;
}

.btn-danger {
    @apply btn bg-red-600 text-white hover:bg-red-700 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-75;
}

.btn-icon {
    @apply h-5 w-5 transition-transform duration-200 ease-in-out;
}

.btn-icon-only {
    @apply p-2 rounded-full hover:bg-white/10 transition-colors duration-200 ease-in-out;
}

/* --- Forms --- */
.form-label {
    @apply block text-gray-200 text-sm font-medium mb-2;
}

.form-input {
    @apply w-full p-3 rounded-xl bg-white/10 border border-white/20 text-gray-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent transition-all duration-300 ease-in-out shadow-inner-lg;
}
.form-input:focus {
    @apply bg-white/15; /* Slightly lighter background on focus */
}

.shadow-inner-lg {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.15); /* More pronounced inner shadow */
}

/* --- Modals --- */
.modal {
    @apply fixed inset-0 flex items-center justify-center p-4 z-50;
}

.modal-backdrop {
    @apply fixed inset-0 bg-black bg-opacity-70 backdrop-blur-sm transition-opacity duration-300 ease-out;
}

.modal-content {
    @apply bg-gradient-to-br from-indigo-800 to-purple-800 p-8 rounded-2xl shadow-2xl relative z-10 w-full max-w-lg border border-white/20;
}

/* --- Client Card --- */
.client-card {
    @apply bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-6 shadow-xl flex flex-col justify-between transition-all duration-300 ease-in-out transform hover:scale-[1.01] hover:shadow-2xl hover:border-purple-400 cursor-pointer;
}

.client-card-title {
    @apply text-2xl font-bold text-gray-50 mb-2 truncate;
}

.client-card-company {
    @apply text-purple-200 text-sm mb-4 flex items-center;
}

.client-card-progress {
    @apply text-purple-100 text-sm mt-4 flex items-center;
}


/* --- Animations --- */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slide-in-right {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slide-out-right {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

@keyframes slide-in-down {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes scale-in {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes scale-out {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.9); opacity: 0; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes pulse-once {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}


.animate-fade-in { animation: fade-in 0.3s ease-out forwards; }
.animate-slide-in-right { animation: slide-in-right 0.4s ease-out forwards; }
.animate-slide-out-right { animation: slide-out-right 0.4s ease-in forwards; }
.animate-scale-in { animation: scale-in 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } /* Ease-out-back like effect */
.animate-scale-out { animation: scale-out 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards; } /* Ease-in-quad like effect */
.animate-fade-in-down { animation: slide-in-down 0.5s ease-out forwards; }
.animate-pulse-once { animation: pulse-once 0.5s ease-out forwards; }

.group:hover .group-hover\:rotate-90 {
    transform: rotate(90deg);
}

.group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
}

.group:hover .group-hover\:animate-shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

/* Notification styles */
.notification {
    @apply relative flex items-center p-4 rounded-xl shadow-lg border-l-4 pr-10 transition-all duration-300 ease-out animate-slide-in-down;
    min-width: 250px;
    max-width: 350px;
    background-color: rgba(255, 255, 255, 0.15); /* Glassmorphism effect */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.notification.success {
    @apply border-green-500 text-green-100;
}

.notification.error {
    @apply border-red-500 text-red-100;
}

.notification.warning {
    @apply border-yellow-500 text-yellow-100;
}

.notification.info {
    @apply border-blue-500 text-blue-100;
}

.notification-close-btn {
    @apply absolute top-1 right-1 p-1 rounded-full text-white/50 hover:bg-white/20 hover:text-white transition-colors duration-200 ease-in-out;
}

/* Specific Lucide icon animations */
.lucide-heart.liked {
    fill: #ef4444; /* Red-500 */
    stroke: #ef4444;
    animation: pulse-once 0.5s ease-out forwards;
}
.lucide-refresh-cw.rotating {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}