/* Base styles & Smooth Scroll */
body {
    @apply bg-gray-950 text-gray-100 font-sans selection:bg-blue-600 selection:text-white min-h-screen;
    background-image: radial-gradient(circle at 15% 15%, rgba(37, 99, 235, 0.08) 0%, transparent 40%),
                      radial-gradient(circle at 85% 85%, rgba(59, 130, 246, 0.05) 0%, transparent 40%);
}

/* Custom Scrollbar for better UI feel */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(17, 24, 39, 0.6);
}
::-webkit-scrollbar-thumb {
    background: rgba(75, 85, 99, 0.5);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.7);
}

/* Glassmorphism effect */
.bg-opacity-50 {
    background-color: rgba(31, 41, 55, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.backdrop-blur-sm {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Header styling */
.header {
    background-color: rgba(17, 24, 39, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(55, 65, 81, 0.6);
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3);
}

/* Button variants */
.btn-primary {
    @apply bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-semibold shadow-lg shadow-blue-600/25 transition-all duration-200 transform hover:-translate-y-0.5 active:translate-y-0;
}

/* Card layout for PDF books */
.book-card {
    background: linear-gradient(145deg, rgba(31, 41, 55, 0.7) 0%, rgba(17, 24, 39, 0.8) 100%);
    border: 1px solid rgba(75, 85, 99, 0.3);
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.book-card:hover {
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-4px);
    box-shadow: 0 20px 35px -10px rgba(37, 99, 235, 0.2);
}

/* Form inputs */
.input-field {
    @apply w-full px-4 py-2.5 bg-gray-900/80 border border-gray-700 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200;
}

/* Responsive grid */
.grid-cols-1 {
    @apply grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6;
}

/* Modal and Box enhancements */
#auth-modal > div, #add-book-modal > div, #settings-modal > div, #crop-modal > div, #social-modal > div {
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(75, 85, 99, 0.4);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    animation: modalScale 0.25s ease-out forwards;
}

@keyframes modalScale {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Sidebar and Panel container styling */
aside, #messages-section {
    background: rgba(31, 41, 55, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(75, 85, 99, 0.3);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Toast Notification Animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(100%) scale(0.9);
    }
}

.toast-animate-in {
    animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-animate-out {
    animation: slideOut 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Utility classes */
.mb-4 {
    @apply mb-4;
}
.text-xl {
    @apply text-xl font-bold tracking-tight;
}
.font-bold {
    @apply font-bold;
}
.text-gray-400 {
    @apply text-gray-400;
}