/* SentinelForge — Mobile Responsive Overrides
 * Loaded after sentinel_ops.css on all pages.
 * Breakpoints: 768px (tablet), 480px (phone)
 */

/* ═══════════════════════════════════════════════
   GLOBAL MOBILE FIXES
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {
    html, body { max-width: 100vw; overflow-x: hidden; }
    img { max-width: 100% !important; height: auto !important; }
    .nav { overflow-x: hidden; }
}

@media (max-width: 768px) {
    /* Unlock scroll on body */
    html, body { overflow: auto; height: auto; }

    /* Stack the grid into a single column */
    .ops-grid {
        display: flex;
        flex-direction: column;
        height: auto;
        width: 100%;
        grid-template-rows: unset;
        grid-template-columns: unset;
        grid-template-areas: unset;
    }

    /* ── Command Bar ── */
    .command-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px;
        position: sticky;
        top: 0;
        z-index: 200;
    }
    .cmd-logo { font-size: 12px; }
    .cmd-metric { display: none; } /* Hide DST/Kp on mobile */
    .cmd-weather { display: none; } /* Hide space weather on mobile */
    .cmd-divider { display: none; }
    .cmd-spacer { flex: 0; }
    .command-bar a {
        font-size: 9px !important;
        padding: 3px 6px !important;
        margin-right: 4px !important;
    }
    .cmd-alerts { font-size: 10px; padding: 3px 8px; }

    /* ── Globe Zone ── */
    .globe-zone {
        width: 100%;
        height: 50vh;
        min-height: 300px;
        position: relative;
    }
    .globe-controls { flex-wrap: wrap; gap: 4px; top: 8px; left: 8px; }
    .globe-btn { padding: 4px 7px; font-size: 9px; }
    .chat-overlay { display: none; } /* Hide chat on small screens */

    /* ── Gauge Panel ── */
    .gauge-panel {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        overflow: visible;
    }
    .gauge-card { padding: 8px 10px; }
    .gauge-svg { width: 40px; height: 40px; }
    .gauge-value { font-size: 14px; }
    .gauge-label { font-size: 8px; }
    .gauge-trend { font-size: 8px; }

    /* ── Ground Network ── */
    .ground-zone {
        flex-direction: column;
        width: 100%;
        height: auto;
    }
    .ground-map { min-height: 200px; }
    .ground-sites { max-height: 300px; }
    .site-name { font-size: 11px; }
    .site-stats { gap: 8px; font-size: 9px; }

    /* ── Inventory Panel ── */
    .inventory-zone {
        width: 100%;
        height: auto;
        min-height: 400px;
    }
    .inv-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .inv-tab { padding: 6px 8px; font-size: 8px; }
    .inv-content { max-height: 500px; }
    .inv-summary { grid-template-columns: repeat(2, 1fr); }
    .inv-stat-value { font-size: 14px; }
    .inv-table { font-size: 9px; }
    .inv-table th { font-size: 8px; padding: 3px 4px; }
    .inv-table td { padding: 3px 4px; font-size: 9px; }

    /* ── Alert Toasts ── */
    .alert-stack { top: 50px; right: 8px; left: 8px; }
    .alert-toast { max-width: 100%; font-size: 10px; padding: 6px 10px; }

    /* ── Site Modal ── */
    .site-modal-content { width: 95vw; max-height: 90vh; }
    .site-modal-header { padding: 10px 14px; font-size: 12px; }
    .site-modal-body { padding: 10px 14px; }
    .site-modal-body table { font-size: 9px; }

    /* ── Map Tooltip ── */
    .map-tooltip { min-width: 280px; max-width: 90vw; font-size: 9px; }
    .map-tooltip .tt-name { font-size: 11px; }
}

/* ═══════════════════════════════════════════════
   PROGRAMMER'S REFERENCE
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Nav bar wrap */
    .nav { flex-wrap: wrap; padding: 8px 12px; gap: 6px; }
    .nav .logo { font-size: 12px; }
    .nav .logo span { font-size: 10px; margin-left: 4px; }
    .nav a { font-size: 8px; padding: 3px 6px; }

    /* Hero */
    .hero { padding: 24px 16px 12px; }
    .hero h1 { font-size: 20px; }
    .hero .subtitle { font-size: 11px; }

    /* Content */
    .content { padding: 0 12px 24px; }
    .section h2 { font-size: 13px; flex-wrap: wrap; }
    .section h2 span { display: block; margin-left: 0 !important; margin-top: 2px; }

    /* Tables */
    .spec-table td { padding: 4px 6px; font-size: 10px; }
    .spec-table td:first-child { width: auto; white-space: normal; min-width: 80px; }

    /* YAML block */
    .yaml-block { font-size: 8px; line-height: 1.7; padding: 8px; }

    /* Info/Warning boxes */
    .info-box, .warning-box { font-size: 10px; padding: 8px 10px; }

    /* Schematic images */
    .section img { border-radius: 4px !important; }

    /* 2-col info grid → single column */
    .section > div[style*="grid-template-columns: 1fr 1fr"],
    .section > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Terminal */
    #termBody { height: 280px; }
    #terminal.maximized #termBody { height: calc(100vh - 36px); }

    /* Code blocks */
    code { font-size: 9px; padding: 1px 4px; word-break: break-all; }

    /* Footer */
    .footer { font-size: 8px; padding: 8px 12px; }
}

/* ═══════════════════════════════════════════════
   SLINGSHOT CATALOG
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Filter chips scroll */
    .filter-bar, div[style*="gap:8px"][style*="flex-wrap:wrap"] {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
}

/* ═══════════════════════════════════════════════
   TECHNICIAN GUIDE
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {
    .proc-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════
   UNIVERSAL — EXTRA SMALL (Phone Portrait)
   ═══════════════════════════════════════════════ */

@media (max-width: 480px) {
    .gauge-panel { grid-template-columns: 1fr; }
    .inv-summary { grid-template-columns: 1fr 1fr; }
    .ground-map { min-height: 160px; }
    .globe-zone { height: 40vh; min-height: 250px; }
    .hero h1 { font-size: 18px; }
    .section h2 { font-size: 12px; }
    .spec-table td:first-child { min-width: 60px; font-size: 9px; }
}

/* ═══════════════════════════════════════════════
   UNIVERSAL — Touch Target Minimums
   ═══════════════════════════════════════════════ */

@media (pointer: coarse) {
    .globe-btn { min-height: 36px; min-width: 36px; display: flex; align-items: center; justify-content: center; }
    .inv-tab { min-height: 36px; display: flex; align-items: center; }
    .sf-filter-pill { min-height: 28px; display: flex; align-items: center; padding: 4px 10px !important; font-size: 10px !important; }
    .site-modal-close { width: 36px; height: 36px; }
    .spec-table tr[data-dd] { min-height: 40px; }
    .pipe-hotspot { min-height: 32px; min-width: 48px; }
}