/* ═══════════════════════════════════════════════════════════════════════════
   EXANAUT RESPONSIVE — Media Queries, Mobile Overrides
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ TABLET ═══ */
@media (max-width: 960px) {
    .hud-header-row {
        flex-wrap: wrap;
        height: auto;
        gap: calc(6px * var(--font-scale));
        padding: calc(6px * var(--font-scale)) calc(10px * var(--font-scale));
        justify-content: center;
    }

    /* Brand and user center on row 1, controls drop to row 2 */
    .hud-logo {
        flex: 0 0 auto;
        order: 1;
    }
    .hud-header-right {
        flex: 0 0 auto;
        order: 2;
        margin-left: 0;
    }
    .hud-controls {
        flex: 1 1 100%;
        order: 3;
        justify-content: center;
        gap: calc(8px * var(--font-scale));
        padding: calc(2px * var(--font-scale)) 0 0;
    }

    /* Limit grid to 2 columns max on tablet */
    .hud-grid.stations-3,
    .hud-grid.stations-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Tighter dock -->  */
    .hud-dock {
        padding: calc(4px * var(--font-scale)) calc(8px * var(--font-scale));
    }
    .dock-shift-hint {
        display: none;
    }
}

/* ═══ MOBILE ═══ */
@media (max-width: 768px) {
    /* Lock page scroll */
    body {
        overflow: hidden;
        height: 100svh;
        overscroll-behavior-y: none;
    }

    .hud-container {
        display: flex;
        flex-direction: column;
        height: 100svh;
        min-height: 100svh;
        overflow: hidden;
    }

    /* ── HEADER ── */
    .hud-header {
        flex: 0 0 auto;
        z-index: 100;
        position: sticky;
        top: 0;
        background: var(--hull);
    }

    .hud-header-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: calc(6px * var(--font-scale));
        padding: calc(6px * var(--font-scale)) calc(10px * var(--font-scale));
    }

    /* All header items center on mobile */
    .hud-logo {
        flex: 0 0 auto;
        order: 1;
    }

    .hud-header-right {
        flex: 0 0 auto;
        order: 2;
        margin-left: 0;
    }

    /* Display controls: full-width centered row below brand + user */
    .hud-controls {
        flex: 1 1 100%;
        order: 3;
        justify-content: center;
        gap: calc(8px * var(--font-scale));
        padding: calc(4px * var(--font-scale)) 0 0;
    }

    /* Notification bar responsive */
    .hud-notification-bar {
        padding: calc(2px * var(--font-scale)) calc(6px * var(--font-scale)) calc(3px * var(--font-scale));
    }
    .notification-console {
        max-width: 100%;
    }

    /* ── GRID: horizontal swipe gallery on mobile ── */
    .hud-grid {
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: calc(8px * var(--font-scale));
        gap: calc(8px * var(--font-scale));
        min-height: 0;
    }

    .hud-grid .hud-station {
        flex: 0 0 100%;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: none;
        overflow: hidden;
        grid-column: auto;
        grid-row: auto;
    }

    /* Single station fills vertical space */
    .hud-grid .hud-station:only-child {
        flex: 1 1 auto;
        height: 100%;
    }

    .hud-grid .hud-station .hud-station-header {
        flex: 0 0 auto;
    }

    .hud-grid .hud-station .hud-station-tabs {
        flex: 0 0 auto;
    }

    .hud-grid .hud-station .hud-station-content {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
        max-height: none;
    }

    /* ── DOCK ── */
    .hud-dock {
        flex: 0 0 auto;
        padding: calc(4px * var(--font-scale)) calc(6px * var(--font-scale));
        gap: 0;
        z-index: 1000;
        position: sticky;
        bottom: 0;
    }

    .dock-row-main {
        gap: calc(4px * var(--font-scale));
        min-width: 0;
        flex-wrap: nowrap;
    }

    .dock-section {
        gap: calc(4px * var(--font-scale));
        min-width: 0;
        flex-shrink: 1;
    }

    .dock-shift-hint {
        display: none;
    }

    .hud-dock-divider {
        display: none;
    }

    .hud-station-hotkey {
        padding: calc(4px * var(--font-scale)) calc(8px * var(--font-scale));
        font-size: var(--xxs-font);
    }

    .hud-dept-btn {
        font-size: var(--xxs-font);
        padding: calc(3px * var(--font-scale)) calc(5px * var(--font-scale));
        flex: 1 1 auto;
        min-width: 0;
    }

    .hud-dept-buttons {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── COLLAPSE BEHAVIOR ── */
    .hud-station-header.collapsed .hud-dept-buttons {
        display: none;
    }

    /* ── MODALS: fullscreen on mobile ── */
    .modal-overlay {
        align-items: stretch;
        justify-content: stretch;
        overflow: hidden;
        padding: 0;
    }

    .modal {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-content {
        flex: 1 1 auto;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Mini-modals stay compact even on mobile */
    .modal-mini {
        align-items: center;
        justify-content: center;
        padding: calc(16px * var(--font-scale));
    }

    .modal-mini .modal {
        width: min(380px, 90vw);
        height: auto;
        max-height: 80vh;
        border-radius: var(--radius);
    }

    /* Arbiter modal fullscreen on mobile */
    .arbiter-modal {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
    }

    /* Login card uses clamp() padding in components.css — no breakpoint needed */

    /* ── SECTION COMPONENTS on mobile ── */

    /* Stepper: vertical stack on mobile */
    .exa-stepper {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .exa-step {
        flex-direction: row;
        align-items: center;
        text-align: left;
        width: 100%;
        padding-left: 0;
    }
    .exa-step-label {
        margin-top: 0;
        margin-left: var(--space-sm);
        white-space: normal;
        text-overflow: unset;
        overflow: visible;
    }
    .exa-step-connector {
        position: absolute;
        top: calc(28px * var(--font-scale));
        left: calc(14px * var(--font-scale) - 1px);
        right: auto;
        width: 2px;
        height: var(--space-md);
    }

    /* Timeline: ensure no horizontal overflow */
    .exa-timeline {
        padding-left: calc(16px * var(--font-scale));
    }

    /* Tile grid: single column on mobile */
    .exa-tile-grid {
        grid-template-columns: 1fr !important;
    }

    /* Console log: full width, tighter */
    .console-log {
        font-size: var(--xxs-font);
    }
}

/* ═══ NARROW MOBILE ═══ */
@media (max-width: 480px) {
    /* Hide dock section labels on very narrow screens only */
    .dock-control-label {
        display: none;
    }
}

@media (max-width: 1100px) {
    .hud-dock {
        justify-content: center;
    }
}

/* ═══ BRIDGE IMMERSIVE ═══ */
.bridge-frame.immersive-active {
  height: 100vh;  /* fallback */
  height: 100svh;
}

@media (max-width: 600px) {
  /* Modal fullscreen takeover below 600px per spec */
  .modal-overlay.open .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100svh !important;
    max-height: 100svh !important;
    border-radius: 0 !important;
    margin: 0;
  }
}

@media (max-width: 768px) {
  /* Popover mobile containment */
  .exa-popover-body {
    max-width: 90vw;
    left: 5vw !important;
    right: 5vw !important;
  }
  .exa-popconfirm {
    max-width: 90vw;
  }

  /* Card grid → single column on mobile */
  .exa-card-grid {
    grid-template-columns: 1fr !important;
  }

  /* Tile grid: compact 2-column on tablet, hidden on phone */
  .exa-tile-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);
  }
  .exa-tile {
    padding: var(--space-xs);
  }
  .exa-tile-value {
    font-size: calc(14px * var(--font-scale));
  }
}

@media (max-width: 480px) {
  /* Tile grid completely hidden on phones — KPIs are desktop pattern */
  .exa-tile-grid {
    display: none;
  }
}