/* ═══════════════════════════════════════════════════════════
   Admin Panel - Mobile Responsive Styles
   ═══════════════════════════════════════════════════════════ */

/* Admin Panel Container */
@media (max-width: 768px) {

    /* Admin Panel Hub */
    .admin-panel-container {
        padding: 10px !important;
    }

    .admin-panel-container .admin-dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .admin-panel-container .admin-stat-card {
        padding: 15px !important;
    }

    .admin-panel-container .admin-nav-menu {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    .admin-panel-container .admin-nav-menu button,
    .admin-panel-container .admin-nav-menu a {
        font-size: 0.7rem !important;
        padding: 10px 5px !important;
        text-align: center !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .admin-panel-container .admin-nav-menu button i,
    .admin-panel-container .admin-nav-menu a i {
        font-size: 1.2rem !important;
        margin-right: 0 !important;
    }

    /* Admin Tables */
    .admin-panel-container table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }

    .admin-panel-container table th,
    .admin-panel-container table td {
        padding: 8px 10px !important;
        font-size: 0.8rem !important;
    }

    /* Admin Modal Dialogs */
    .admin-panel-container .modal-content,
    #admin-view .modal-content {
        width: 95% !important;
        max-width: 100% !important;
        margin: 10px !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }

    /* Admin Chart containers */
    .admin-panel-container canvas {
        max-height: 200px !important;
    }

    /* Admin Profile Box */
    .admin-panel-container .admin-profile-box {
        flex-direction: column !important;
        text-align: center !important;
        padding: 15px !important;
    }

    /* Admin Page Title */
    .admin-panel-container h1,
    .admin-panel-container h2 {
        font-size: 1.2rem !important;
    }

    /* Admin form inputs */
    .admin-panel-container .form-input,
    .admin-panel-container .form-select,
    .admin-panel-container textarea {
        font-size: 16px !important;
        /* Prevents zoom on iOS */
    }

    /* Admin Action Buttons */
    .admin-panel-container .admin-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .admin-panel-container .admin-actions .btn {
        flex: 1 !important;
        min-width: 100px !important;
        font-size: 0.8rem !important;
    }

    /* Admin Sidebar */
    .admin-sidebar {
        position: fixed !important;
        left: -300px !important;
        top: 0 !important;
        bottom: 0 !important;
        z-index: 10000 !important;
        transition: left 0.3s ease !important;
        width: 260px !important;
    }

    .admin-sidebar.open {
        left: 0 !important;
    }

    /* Admin tickets, user cards etc. */
    .admin-panel-container .ticket-card,
    .admin-panel-container .user-card,
    .admin-panel-container .content-card {
        padding: 12px !important;
    }

    .admin-panel-container .ticket-card .ticket-actions {
        flex-direction: column !important;
        gap: 6px !important;
    }
}

/* Mobile Bottom Nav - Admin Item Styling */
#mobile-admin-nav {
    color: #ef4444 !important;
}

#mobile-admin-nav i {
    color: #ef4444 !important;
}

#mobile-admin-nav span {
    color: #ef4444 !important;
    font-weight: 600 !important;
}

/* Latest Filter Tabs */
.latest-filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.latest-filter-tabs::-webkit-scrollbar {
    display: none;
}

.latest-filter-btn {
    padding: 8px 18px;
    border-radius: 20px;
    border: 1px solid rgba(139, 92, 246, 0.25);
    background: rgba(255, 255, 255, 0.03);
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.latest-filter-btn:hover {
    background: rgba(139, 92, 246, 0.1);
    color: #a78bfa;
}

.latest-filter-btn.active {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.4);
    color: #a78bfa;
}