/* Enhanced CBAM Client Styles */

/* Glassmorphism and backdrop effects */
.backdrop-blur-lg {
    backdrop-filter: blur(16px);
}

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

/* Custom animations */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse-slow {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.2; }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-pulse-slow {
    animation: pulse-slow 4s ease-in-out infinite;
}

/* Enhanced form styles */
.form-input-enhanced {
    @apply w-full pl-12 pr-4 py-4 border-2 border-gray-200 rounded-2xl focus:ring-4 focus:ring-cbam-blue/20 focus:border-cbam-blue transition-all duration-300 text-lg placeholder-gray-400 bg-white/50 backdrop-blur-sm;
}

.form-input-enhanced:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.15);
}

/* Enhanced buttons */
.btn-gradient {
    @apply relative overflow-hidden;
}

.btn-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn-gradient:hover::before {
    left: 100%;
}

/* Card hover effects */
.card-enhanced {
    @apply bg-white/70 backdrop-blur-lg rounded-3xl shadow-xl border border-white/50 transition-all duration-300;
}

.card-enhanced:hover {
    @apply shadow-2xl;
    transform: translateY(-5px);
}

/* Enhanced Navigation Styles */

/* Main navigation items */
.nav-item {
    @apply flex items-center w-full px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 group;
}

.nav-item-main {
    @apply text-gray-700 hover:bg-blue-50 hover:text-cbam-blue;
}

.nav-item-main.active {
    @apply bg-gradient-to-r from-cbam-blue to-cbam-light-blue text-white shadow-md;
}

.nav-item-main.active .nav-icon svg {
    @apply text-white;
}

.nav-item-secondary {
    @apply text-gray-600 hover:bg-gray-100 hover:text-gray-800 text-xs;
}

.nav-item-danger {
    @apply text-gray-600 hover:bg-red-50 hover:text-red-600 text-xs;
}

/* Navigation icons */
.nav-icon {
    @apply flex-shrink-0 mr-3;
}

.nav-icon svg {
    @apply transition-colors duration-200;
}

/* Navigation text */
.nav-text {
    @apply flex-1;
}

/* Submenu styles */
.nav-section {
    @apply relative;
}

.nav-toggle {
    @apply w-full justify-between;
}

.nav-toggle.submenu-open {
    @apply bg-blue-50 text-cbam-blue;
}

.nav-submenu {
    @apply ml-4 mt-1 space-y-1 overflow-hidden transition-all duration-300 ease-in-out;
    max-height: 0;
}

.nav-submenu.expanded {
    max-height: 300px;
}

.nav-subitem {
    @apply flex items-center px-3 py-2 rounded-md text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-800 transition-colors duration-200;
}

.nav-subitem.active {
    @apply bg-cbam-blue text-white;
}

.nav-subitem .nav-icon {
    @apply mr-2;
}

/* Arrow animation */
.nav-arrow {
    @apply transition-transform duration-200;
}

/* Hover effects */
.nav-item:hover .nav-icon svg {
    @apply scale-110;
}

.nav-subitem:hover .nav-icon svg {
    @apply scale-105;
}

/* Enhanced Status Badges */
.status-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold shadow-sm;
}

.status-pending {
    @apply bg-gradient-to-r from-yellow-100 to-orange-100 text-yellow-800 border border-yellow-200;
}

.status-approved {
    @apply bg-gradient-to-r from-green-100 to-emerald-100 text-green-800 border border-green-200;
}

.status-rejected {
    @apply bg-gradient-to-r from-red-100 to-pink-100 text-red-800 border border-red-200;
}

.status-processing {
    @apply bg-gradient-to-r from-blue-100 to-indigo-100 text-blue-800 border border-blue-200;
}

/* Button Variants with enhanced styling */
.btn-primary {
    @apply inline-flex justify-center items-center py-3 px-6 border border-transparent shadow-lg text-sm font-semibold rounded-2xl text-white bg-gradient-to-r from-cbam-blue to-cbam-light-blue hover:from-cbam-light-blue hover:to-cbam-blue focus:outline-none focus:ring-4 focus:ring-cbam-blue/50 transition-all duration-300 transform hover:scale-105;
}

.btn-secondary {
    @apply inline-flex justify-center items-center py-3 px-6 border-2 border-gray-300 shadow-sm text-sm font-semibold rounded-2xl text-gray-700 bg-white/50 backdrop-blur-sm hover:bg-white/80 focus:outline-none focus:ring-4 focus:ring-gray-200 transition-all duration-300;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .nav-link {
        @apply justify-center px-2 py-3;
    }
    
    .nav-link span {
        @apply hidden;
    }

    .card-enhanced {
        @apply rounded-2xl;
    }
    
    .form-input-enhanced {
        @apply text-base py-3;
    }
}

/* Animation classes */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

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

.slide-up {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}


/* ===================================
   ENHANCED SIDEBAR STYLES
   =================================== */

/* Sidebar Container */
#sidebar {
    transition: all 0.3s ease;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

#sidebar::-webkit-scrollbar {
    width: 4px;
}

#sidebar::-webkit-scrollbar-track {
    background: transparent;
}

#sidebar::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.3);
    border-radius: 2px;
}

#sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.5);
}

/* Sidebar Sections */
.sidebar-section {
    @apply mb-6;
}

.sidebar-section-title {
    @apply text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3 px-3;
}

/* Enhanced Sidebar Items */
.sidebar-item {
    @apply flex items-center w-full px-3 py-2.5 text-sm font-medium rounded-xl transition-all duration-300 group relative overflow-hidden;
    @apply text-gray-700 hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 hover:text-cbam-blue;
}

.sidebar-item::before {
    content: '';
    @apply absolute left-0 top-0 w-1 h-full bg-gradient-to-b from-cbam-blue to-blue-600 transition-all duration-300 opacity-0 scale-y-0;
}

.sidebar-item:hover::before {
    @apply opacity-100 scale-y-100;
}

/* Active State */
.sidebar-item-active {
    @apply bg-gradient-to-r from-cbam-blue to-blue-600 text-white shadow-lg relative;
}

.sidebar-item-active::before {
    @apply opacity-100 scale-y-100;
}

.sidebar-item-active .sidebar-icon svg {
    @apply text-white;
}

/* Child Items (Sub-navigation) */
.sidebar-item-child {
    @apply ml-4 pl-8 relative;
}

.sidebar-item-child::after {
    content: '';
    @apply absolute left-6 top-1/2 w-2 h-px bg-gray-300 transition-colors duration-300;
}

.sidebar-item-child:hover::after {
    @apply bg-cbam-blue;
}

.sidebar-item-child.sidebar-item-active::after {
    @apply bg-white;
}

/* Danger Items (logout, delete actions) */
.sidebar-item-danger {
    @apply text-gray-600 hover:bg-gradient-to-r hover:from-red-50 hover:to-pink-50 hover:text-red-600;
}

.sidebar-item-danger::before {
    @apply bg-gradient-to-b from-red-500 to-red-600;
}

/* Sidebar Icon */
.sidebar-icon {
    @apply flex-shrink-0 mr-3 transition-transform duration-300;
}

.sidebar-item:hover .sidebar-icon {
    @apply transform scale-110;
}

.sidebar-icon svg {
    @apply transition-colors duration-300;
}

/* Sidebar Text */
.sidebar-text {
    @apply flex-1 transition-colors duration-300;
}

/* Sidebar Indicator (for visual feedback) */
.sidebar-indicator {
    @apply absolute right-0 top-1/2 transform -translate-y-1/2 w-1 h-8 bg-white rounded-l-full opacity-0 transition-all duration-300;
}

.sidebar-item-active .sidebar-indicator {
    @apply opacity-100;
}

/* Badge for notifications/counts */
.sidebar-badge {
    @apply ml-auto px-2 py-1 text-xs font-bold bg-cbam-blue text-white rounded-full min-w-[20px] text-center;
}

.sidebar-badge-orange {
    @apply bg-orange-500;
}

.sidebar-badge-red {
    @apply bg-red-500;
}

.sidebar-badge-green {
    @apply bg-green-500;
}

/* Mobile Sidebar */
@media (max-width: 1024px) {
    #sidebar {
        @apply fixed inset-y-0 left-0 z-40 transform -translate-x-full;
    }
    
    #sidebar.sidebar-open {
        @apply translate-x-0;
    }
    
    #sidebar-toggle {
        @apply block;
    }
    
    .sidebar-backdrop {
        @apply fixed inset-0 bg-black bg-opacity-50 z-30;
    }
}

/* Hover Effects for Enhanced UX */
.sidebar-item {
    position: relative;
}

.sidebar-item::after {
    content: '';
    @apply absolute inset-0 rounded-xl bg-gradient-to-r from-transparent via-white/5 to-transparent opacity-0 transition-opacity duration-300;
}

.sidebar-item:hover::after {
    @apply opacity-100;
}

/* Smooth animations for section transitions */
.sidebar-section {
    @apply animate-fade-in;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

/* Focus states for accessibility */
.sidebar-item:focus {
    @apply outline-none ring-2 ring-cbam-blue/50 ring-offset-2 ring-offset-white;
}

/* Loading states */
.sidebar-item.loading {
    @apply opacity-50 pointer-events-none;
}

.sidebar-item.loading .sidebar-icon {
    @apply animate-pulse;
}

/* Preview Modal Styles */
.preview-container {
    min-height: 400px;
    max-height: 70vh;
    overflow: auto;
    background: #f9fafb;
    border-radius: 0.5rem;
    padding: 1rem;
}

.preview-container iframe {
    width: 100%;
    height: 60vh;
    border: none;
    background: white;
    border-radius: 0.375rem;
}

.preview-container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 0.375rem;
}

.preview-container pre {
    background: white;
    padding: 1rem;
    border-radius: 0.375rem;
    overflow-x: auto;
    max-height: 60vh;
    overflow-y: auto;
    font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
}

.preview-container .preview-error {
    text-align: center;
    padding: 3rem;
}

.preview-container .preview-error i {
    color: #ef4444;
    margin-bottom: 1rem;
}

.preview-container .preview-info {
    background: white;
    padding: 2rem;
    border-radius: 0.375rem;
    text-align: center;
}

.preview-container .preview-info i {
    color: #6b7280;
    margin-bottom: 1rem;
}

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

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