/* Admin Specific Styles */

.sidebar-gradient {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
}

/* Re-using glass-effect from custom.css if possible, but defining here for admin isolation if needed or imports */
/* If custom.css is loaded, we don't need to redefine glass-effect if it's identical. 
   Checking existing custom.css: it has glass-effect. 
   I will assume custom.css is NOT loaded on admin page to keep it lightweight, or IS loaded. 
   Let's check the plan. I'll load both or just admin.css. 
   Actually, loading custom.css on admin page is fine. 
   I will only put UNIQUE admin styles here. */

.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.nav-item {
    transition: all 0.3s ease;
}

.nav-item.active {
    background: linear-gradient(135deg, #0ea5e9, #38bdf8);
    color: white;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}

.nav-item.active i {
    color: white;
}

.stats-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
}

/* Animation utilities for Admin (if not in tailored config or custom.css) */
/* The admin page had 'slide-in', 'fade-in', 'bounce-in' in tailwind config extended theme. 
   These should be moved to css or the centralised tailwind config. 
   Let's check tailwind-config.js. It has fade-in, slide-up, slide-down. 
   Admin has 'slide-in' (translateX), 'fade-in' (opacity), 'bounce-in'. 
   I should add these to tailwind-config.js or css. 
   Adding to CSS is easier for now to avoid breaking other pages with config changes, 
   but central config is better. */

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

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

.animate-bounce-in {
    animation: bounceIn 0.6s ease-out;
}

@keyframes slideIn {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== MOBILE RESPONSIVE STYLES ===== */

/* Mobile bottom navigation */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 40;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.mobile-bottom-nav .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 12px;
    border-radius: 12px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    background: none;
}

.mobile-bottom-nav .mobile-nav-item i {
    font-size: 18px;
}

.mobile-bottom-nav .mobile-nav-item.active {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
}

/* Hide bottom nav on large screens */
@media (min-width: 1024px) {
    .mobile-bottom-nav {
        display: none;
    }
}

/* Mobile sidebar as overlay */
@media (max-width: 1023px) {
    #admin-sidebar aside {
        width: 280px;
        max-width: 85vw;
    }

    /* Table responsive */
    .tab-content table {
        font-size: 14px;
    }

    .tab-content th,
    .tab-content td {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Editor adjustments */
    #article-modal .editor-toolbar {
        padding: 6px 8px;
        gap: 2px;
    }

    #article-modal .editor-toolbar button {
        width: 32px;
        height: 32px;
        font-size: 11px;
    }

    /* Floating add button on mobile */
    #new-article-btn-2 {
        position: fixed;
        bottom: 80px;
        right: 16px;
        z-index: 35;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    #new-article-btn-2 i {
        margin: 0;
        font-size: 20px;
    }

    /* Hide the text in FAB on mobile */
    #new-article-btn-2 {
        font-size: 0;
    }

    #new-article-btn-2 i {
        font-size: 20px;
    }

    /* Notification positioning */
    .notification {
        bottom: 70px !important;
    }
}

/* Small mobile tweaks */
@media (max-width: 639px) {
    /* Editor V2 section headers */
    #editor-v2 h3 {
        font-size: 1rem;
    }

    /* Compact filter cards */
    .tab-content .flex-wrap.gap-4 {
        gap: 8px;
    }

    /* Make modals full-screen on small mobile */
    #comments-modal > div,
    #confirm-modal > div {
        max-height: 100vh;
        border-radius: 16px;
    }
}