/* ═══════════════════════════════════════════════════════════
   SeltaPrep — Global Mobile Responsive CSS
   Applied via link tag in all templates
   ═══════════════════════════════════════════════════════════ */

/* ─── Tablet ─── */
@media (max-width: 1024px) {
    .container, .main-container, main, .content {
        max-width: 100% !important;
        padding: 15px !important;
    }
}

/* ─── Mobile (≤ 768px) ─── */
@media (max-width: 768px) {
    * { box-sizing: border-box; }
    
    html, body {
        font-size: 14px !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    body {
        padding: 8px !important;
        margin: 0 !important;
    }
    
    /* Container */
    .container, .main-container, main, .content, .wrapper {
        padding: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Navbar */
    .navbar, .nav, .header, .topbar, .admin-header {
        flex-wrap: wrap !important;
        padding: 10px !important;
        gap: 8px !important;
    }
    
    /* Grid/Row → Stack */
    .row, .grid, .columns, .flex-row, [class*="grid-"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .col, .column, [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
    
    /* Cards */
    .card, .box, .panel, .widget, .stat-card {
        padding: 12px !important;
        margin: 6px 0 !important;
        width: 100% !important;
    }
    
    /* Tables */
    table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        font-size: 12px !important;
    }
    
    th, td { padding: 6px 8px !important; }
    
    /* Buttons */
    .btn, button, input[type="submit"], .btn-primary {
        min-height: 42px !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 6px 0 !important;
    }
    
    /* Forms */
    input, select, textarea {
        font-size: 16px !important;
        width: 100% !important;
        padding: 10px !important;
        max-width: 100% !important;
    }
    
    /* Headings */
    h1 { font-size: 20px !important; }
    h2 { font-size: 17px !important; }
    h3 { font-size: 15px !important; }
    
    /* Images */
    img { max-width: 100% !important; height: auto !important; }
    
    /* Hide/Show */
    .desktop-only, .hide-mobile { display: none !important; }
    .mobile-only { display: block !important; }
    
    /* Sidebar */
    .sidebar, .side-menu, .sidebar-menu {
        width: 100% !important;
        position: relative !important;
        margin-bottom: 10px !important;
    }
    
    /* Modal */
    .modal, .popup, .dialog {
        width: 95% !important;
        margin: 10px auto !important;
        padding: 15px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    /* Padding/Margin reduce */
    .p-4, .p-5 { padding: 10px !important; }
    .m-4, .m-5 { margin: 6px 0 !important; }
    .mt-4, .mt-5 { margin-top: 6px !important; }
    .mb-4, .mb-5 { margin-bottom: 6px !important; }
}

/* ─── Small Phone (≤ 480px) ─── */
@media (max-width: 480px) {
    body { font-size: 13px !important; }
    h1 { font-size: 18px !important; }
    h2 { font-size: 16px !important; }
    
    .container, .main-container { padding: 6px !important; }
    .card { padding: 10px !important; }
    .btn, button { font-size: 13px !important; }
    
    th, td { padding: 5px 6px !important; font-size: 11px !important; }
}

/* ─── Default: hide mobile-only ─── */
.mobile-only { display: none; }