/* ========================================
   MOBILE RESPONSIVE - UNIVERSAL
   ======================================== */

/* Base mobile styles */
@media (max-width: 768px) {
    /* Reset body */
    body {
        font-size: 14px !important;
        padding: 10px !important;
        overflow-x: hidden !important;
    }
    
    /* Container */
    .container, main, section {
        padding: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Headings */
    h1 { font-size: 20px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 16px !important; }
    
    /* Stats grid - 2 columns */
    .stats, .stat-grid, [class*="stats"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .stat-box, [class*="stat"] {
        padding: 12px !important;
    }
    
    .stat-box .value, [class*="stat"] .value {
        font-size: 18px !important;
    }
    
    /* Controls - stack */
    .controls, .toolbar, [class*="controls"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .search-box, [class*="search"] {
        width: 100% !important;
        min-width: auto !important;
    }
    
    .search-box input, [class*="search"] input {
        width: 100% !important;
    }
    
    /* Buttons - full width */
    .btn, button, [class*="btn"] {
        width: 100% !important;
        min-height: 44px !important;
        padding: 12px !important;
        font-size: 14px !important;
    }
    
    /* Filters - wrap */
    .filters, [class*="filter"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .filter-btn, [class*="filter-btn"] {
        flex: 1 1 calc(50% - 10px) !important;
        min-width: auto !important;
    }
    
    /* Cards/Items */
    .cve-item, .card, [class*="item"], [class*="card"] {
        padding: 15px !important;
        margin-bottom: 12px !important;
    }
    
    .cve-header, [class*="header"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    
    .cve-actions, [class*="actions"] {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    .cve-actions button, [class*="actions"] button {
        width: 100% !important;
    }
    
    .cve-meta, [class*="meta"] {
        flex-direction: column !important;
        gap: 8px !important;
        font-size: 12px !important;
    }
    
    /* Pagination */
    .pagination, [class*="pagination"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .pagination button, [class*="pagination"] button {
        width: 100% !important;
    }
    
    /* Modal */
    .modal-content, [class*="modal"] {
        width: 95% !important;
        max-width: none !important;
        padding: 20px !important;
        margin: 10px !important;
    }
    
    /* Tables */
    table {
        font-size: 12px !important;
        display: block !important;
        overflow-x: auto !important;
    }
    
    th, td {
        padding: 8px !important;
    }
    
    /* Fixed elements */
    [style*="position: fixed"], [style*="position:fixed"] {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin-bottom: 10px !important;
    }
    
    /* Images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Forms */
    input, select, textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Hide desktop-only elements */
    .hide-mobile, .desktop-only {
        display: none !important;
    }
    
    /* Show mobile-only elements */
    .show-mobile, .mobile-only {
        display: block !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    body {
        font-size: 13px !important;
        padding: 5px !important;
    }
    
    h1 { font-size: 18px !important; }
    h2 { font-size: 16px !important; }
    
    .stats {
        grid-template-columns: 1fr !important;
    }
    
    .stat-box .value {
        font-size: 16px !important;
    }
    
    .filter-btn {
        flex: 1 1 100% !important;
    }
}

/* Landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .stats {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .modal-content {
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .stats {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}