/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT LOCK  –  src/ui/layout-lock.css
   Kritiske layoutinvarianter for VHF-simulatoren.

   ⚠️  IKKE ENDRE DENNE FILEN uten å oppdatere tilhørende test:
       test/ui/layoutLock.invariant.test.js

   Reglene her er assertert av Jest og vil BRYTE CI ved regresjoner.
   AI-agenter: sjekk testen FØR du endrer noe her.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Desktop (≥ 1025px): fast grid – radioen hopper ALDRI ──────────────── */
@media (min-width: 1025px) {

  /* Kortkolonne: flex, kortene stablet */
  .dashboard-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Hvert kort: klippes ved overflow, vokser ikke */
  .actor-card {
    overflow: hidden !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Radio: flex-barn i dashboard-right, flyter ikke */
  #vhf-wrapper {
    min-height: 0 !important;
    align-self: start !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }
}

/* ─── Mellomstørrelse (1025–1380px): foto skjult, layout stabil ──────────── */
@media (min-width: 1025px) and (max-width: 1380px) {
  .actor-photo { display: none !important; }
  .vessel-info-wrapper { grid-template-columns: 1fr !important; }
}

/* ─── Nettbrett (768–1024px): kolonner kollapser til én ──────────────────── */
@media (max-width: 1024px) {
  .dashboard-left {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Radio øverst på mobil (rekkefølge snus av exerciseUI) */
  #vhf-wrapper {
    order: -1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .actor-card {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }
}

/* ─── Smal mobil (< 480px): kompakt visning ─────────────────────────────── */
@media (max-width: 480px) {
  .actor-card {
    padding: 8px 10px !important;
  }

  .actor-info-group {
    font-size: 0.78rem !important;
  }

  #vhf-wrapper {
    transform: scale(0.92) !important;
    transform-origin: top center !important;
  }
}

/* ─── Lav skjerm (< 600px høyde): kompakt vertikal ─────────────────────── */
@media (max-height: 600px) {
  .actor-card {
    padding: 6px 10px !important;
  }

  .actor-photo {
    display: none !important;
  }

  .dashboard-left {
    gap: 8px !important;
  }
}

/* ─── Kalibreringsscene: full-screen overlay ────────────────────────────────
   KRITISK: Uten position:fixed havner scenen utenfor viewport (y ~ 969px).
   Testet i test/ui/layoutLock.invariant.test.js
   ──────────────────────────────────────────────────────────────────────── */
#calibration-scene:not(.hidden-scene) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow-y: auto !important;
  z-index: 9000 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 40px 20px !important;
}