/**
 * AIPanel — Mobile Responsive Overrides
 * Sprint 3b-C: Fixes all dashboard views for mobile (<768px)
 * v18 — 2026-04-08
 */

/* ═══════════════════════════════════════
   1. GLOBAL LAYOUT
   ═══════════════════════════════════════ */
@media (max-width: 767px) {
    /* Reduce main content padding */
    .main-content .p-8 {
        padding: 1rem !important;
    }

    /* Page titles: stack vertically */
    .mb-8.flex.items-center.justify-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
    }

    /* Page title text smaller */
    .text-3xl {
        font-size: 1.5rem !important;
    }

    /* Buttons full width on mobile */
    .mb-8 > button,
    .mb-8 > div > button,
    .mb-8 > a {
        width: 100%;
        justify-content: center;
    }

    /* Top bar: hide text labels, tighter spacing */
    header .flex.items-center.gap-5 {
        gap: 0.75rem;
    }
    /* Hide "Expert" label on mobile */
    header label .text-gray-500.uppercase {
        display: none;
    }
    /* Hide user name on mobile topbar */
    header #userMenuBtn span.text-sm {
        display: none;
    }
    header #userMenuBtn svg.w-4 {
        display: none;
    }

    /* Server context in header - truncate */
    #activeServerHeader .text-emerald-500 {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #noServerHeader {
        font-size: 0.6875rem;
    }
}

/* ═══════════════════════════════════════
   2. TABLES → CARD VIEW ON MOBILE
   ═══════════════════════════════════════ */
@media (max-width: 767px) {
    /* Generic table responsive */
    .bg-panel table,
    .bg-panel thead,
    .bg-panel tbody,
    .bg-panel th,
    .bg-panel td,
    .bg-panel tr {
        display: block;
    }
    .bg-panel thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    .bg-panel tbody tr {
        padding: 1rem;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        position: relative;
    }
    .bg-panel tbody td {
        padding: 0.25rem 0 !important;
        border: none !important;
        font-size: 0.8125rem;
    }
    .bg-panel tbody td:first-child {
        font-weight: 700;
        font-size: 0.9375rem;
        padding-bottom: 0.5rem !important;
    }

    /* Action buttons row */
    .bg-panel tbody td:last-child {
        padding-top: 0.75rem !important;
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
    .bg-panel tbody td .btn-delete-server {
        opacity: 1 !important;
    }
}

/* ═══════════════════════════════════════
   3. DASHBOARD SPECIFIC
   ═══════════════════════════════════════ */
@media (max-width: 767px) {
    /* Stats row */
    .grid.grid-cols-1.md\:grid-cols-3 {
        gap: 0.75rem;
    }

    /* Dashboard controls stack */
    #dashControls {
        width: 100%;
        flex-wrap: wrap;
    }
    #dashControls button {
        flex: 1;
        min-width: 0;
    }

    /* Metrics gauges - 1 col */
    .grid.grid-cols-1.md\:grid-cols-2 {
        gap: 0.75rem;
    }

    /* Extra info row - 2 col on mobile (already 2 col) */
    .grid.grid-cols-2.md\:grid-cols-4 {
        gap: 0.5rem;
    }
    .grid.grid-cols-2.md\:grid-cols-4 > div {
        padding: 0.625rem;
    }

    /* Health score card - stack */
    #healthScoreCard .flex.items-center.gap-4 {
        flex-wrap: wrap;
    }

    /* Services grid - 2 cols on mobile */
    #servicesList {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    .service-badge {
        padding: 8px 10px !important;
        font-size: 0.6875rem;
    }
}

/* ═══════════════════════════════════════
   4. SECURITY TABS + SCAN SECTION
   ═══════════════════════════════════════ */
@media (max-width: 767px) {
    /* Scrollable horizontal tabs */
    .flex.flex-wrap.gap-2.mb-6,
    .flex.gap-2.mb-6,
    .border-b.border-gray-800 .flex {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.5rem;
    }
    .flex.flex-wrap.gap-2.mb-6::-webkit-scrollbar,
    .flex.gap-2.mb-6::-webkit-scrollbar {
        display: none;
    }
    /* Tab buttons: don't shrink */
    .flex.flex-wrap.gap-2.mb-6 > button,
    .flex.gap-2.mb-6 > button {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }

    /* Security scan section: stack vertically */
    #tab-scanners .bg-panel .flex.items-center.justify-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }
    #tab-scanners .bg-panel .flex.items-center.gap-3 {
        width: 100%;
        flex-direction: column;
    }
    #tab-scanners #scanPath {
        width: 100% !important;
    }
    #tab-scanners #fullScanBtn {
        width: 100%;
        justify-content: center;
    }
    #fullAuditBtn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════
   5. METRICS CHARTS
   ═══════════════════════════════════════ */
@media (max-width: 767px) {
    /* Chart containers full width */
    .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Canvas height reduction */
    canvas {
        max-height: 200px !important;
    }
}

/* ═══════════════════════════════════════
   6. DOMAINS / FILES — CARD MODE
   ═══════════════════════════════════════ */
@media (max-width: 767px) {
    /* Domain cards stack */
    .grid.grid-cols-1.lg\:grid-cols-2,
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }

    /* Domain detail sections stack */
    .grid.grid-cols-1.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* File manager path bar */
    .flex.items-center.gap-2.text-sm.text-gray-400 {
        flex-wrap: wrap;
        font-size: 0.75rem;
    }
}

/* ═══════════════════════════════════════
   7. MODALS
   ═══════════════════════════════════════ */
@media (max-width: 767px) {
    /* Modals full width on mobile */
    .sm\:max-w-lg,
    .sm\:max-w-xl,
    .sm\:max-w-2xl,
    .sm\:max-w-3xl {
        max-width: calc(100vw - 2rem) !important;
        margin: 1rem !important;
    }
}

/* ═══════════════════════════════════════
   8. TOUCH TARGETS
   ═══════════════════════════════════════ */
@media (max-width: 767px) {
    /* Minimum touch target 44px */
    button, a.sidebar-item, .pricing-btn, .nav-cta {
        min-height: 44px;
    }

    /* Larger click areas for action buttons */
    .text-indigo-400.hover\:text-indigo-300,
    .text-rose-400.hover\:text-rose-300 {
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        background: rgba(99,102,241,0.05);
    }
}

/* ═══════════════════════════════════════
   9. ADMIN PANEL
   ═══════════════════════════════════════ */
@media (max-width: 767px) {
    /* Admin stats cards */
    .grid.grid-cols-2.lg\:grid-cols-5 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Admin tab buttons */
    .grid.grid-cols-5 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem;
    }
}

/* ═══════════════════════════════════════
   10. MAIL / BACKUP / CRON
   ═══════════════════════════════════════ */
@media (max-width: 767px) {
    /* Horizontal scroll for wide code blocks */
    pre, code, .font-mono {
        overflow-x: auto;
        word-break: break-all;
    }

    /* DNS record tables */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }

    /* Tab grids */
    .grid.grid-cols-4,
    .grid.grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ═══════════════════════════════════════
   11. CONTACT FORM
   ═══════════════════════════════════════ */
@media (max-width: 767px) {
    .max-w-2xl {
        max-width: 100% !important;
    }
}

/* ═══════════════════════════════════════
   12. DROPDOWNS ON MOBILE
   ═══════════════════════════════════════ */
@media (max-width: 767px) {
    .user-dropdown {
        position: fixed !important;
        left: 1rem !important;
        right: 1rem !important;
        top: auto !important;
        bottom: 1rem !important;
        max-width: none !important;
        width: auto !important;
        border-radius: 1rem !important;
        max-height: 60vh;
        overflow-y: auto;
    }
}

/* ═══════════════════════════════════════
   13. WORDPRESS MANAGER
   ═══════════════════════════════════════ */
@media (max-width: 767px) {
    /* WP sites grid */
    .grid.gap-4[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════
   14. ACCOUNT PAGE
   ═══════════════════════════════════════ */
@media (max-width: 767px) {
    .max-w-3xl {
        max-width: 100% !important;
    }
    /* 2FA QR code fit */
    .max-w-3xl img {
        max-width: 200px;
        margin: 0 auto;
        display: block;
    }
}