/* ============================================================================
 * isr_panels.css — Phase 11 ISR panel fixes (frontend-builder, 2026-06-12)
 * ----------------------------------------------------------------------------
 * Owned by the ISR/imagery cluster. Loaded AFTER style.css and panel_shell.css
 * so these panel-scoped rules win the cascade WITHOUT editing style.css globals.
 *
 * Covers UI-review items:
 *   1  Imagery Catalog detail — real image viewer (large preview, fit-to-panel)
 *   2  Spatial Rules — embedded panel "half the screen blank" layout fix
 *   3  Change Detection — list/detail layout fill in narrow dock
 *   4b Terrain Analysis — in-panel explainer styling
 *   5  ISR Sensors / FMV — in-browser hls.js player + STREAM OFFLINE state
 * ==========================================================================*/

/* ── Item 2 + 5 (shared): make embedded fullscreen/modal hosts fill height ──
 * When a modal is re-hosted by PanelShell (_embedModalInHost adds
 * .rv-panel-embedded), the inner box must stretch to the panel host height.
 * style.css gives .isr-fullscreen-modal / .modal a content-sized height; in a
 * dock/sheet host that left the lower half blank. Force full height here. */
.rv-panel-embedded .isr-fullscreen-modal,
.rv-panel-embedded .fusion-spatial-modal {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}

/* ── Item 2: Spatial Rules embedded layout ──────────────────────────────────
 * The fusion-spatial-modal is a .modal with a fixed 720px width and the body a
 * fixed max-height:78vh. Inside a dock panel (often < 720px and not 78vh tall)
 * that produced the "half the panel doesn't show up" gap: the modal box did not
 * fill the host and the body's 78vh cap left dead space below. Make the modal a
 * flex column that fills the host and let the body flex to consume remaining
 * height with its own scroll. */
.rv-panel-embedded .fusion-spatial-modal {
  display: flex !important;
  flex-direction: column !important;
}
.rv-panel-embedded .fusion-spatial-modal > .modal-header {
  flex: 0 0 auto;
}
.rv-panel-embedded .fusion-spatial-body {
  flex: 1 1 auto !important;
  max-height: none !important;   /* drop the 78vh cap that left a blank lower half */
  min-height: 0 !important;      /* allow the flex child to shrink + scroll */
  overflow-y: auto !important;
}

/* ── Item 3: Change Detection embedded layout ───────────────────────────────
 * change-detect-modal is registered as a DOCK panel (narrow). Its body uses a
 * fixed two-column grid (1fr 1fr) with min-height:480px/max-height:65vh applied
 * via inline styles on a child div. In a narrow dock the two columns squeezed
 * the detection LIST into a sliver — making it look like "only one item shows".
 * When embedded, fill the host and stack the columns vertically so the full
 * list is readable; restore an internal scroll. The inline grid lives on the
 * div directly inside .modal-body, so target that. */
.rv-panel-embedded #change-detect-modal .modal,
.rv-panel-embedded.modal#change-detect-modal,
#change-detect-modal.rv-panel-embedded .modal {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
#change-detect-modal.rv-panel-embedded .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
/* The inline-styled grid wrapper: when embedded (always a narrow dock), STACK
 * the list above the detail so the full detection list is readable. A viewport
 * media query cannot be used — the panel is narrow while the viewport is wide,
 * so we key off .rv-panel-embedded directly. The list gets a bounded height and
 * its own scroll; the detail fills the rest. This is what made it look like
 * "only one detection shows" — the list column was crushed in the 2-col grid. */
#change-detect-modal.rv-panel-embedded .modal-body > div[style*="grid"] {
  height: 100% !important;
  max-height: none !important;
  grid-template-columns: 1fr !important;       /* stack vertically */
  grid-template-rows: minmax(160px, 42%) 1fr !important;
}
#change-detect-modal.rv-panel-embedded .modal-body > div[style*="grid"] > div:first-child {
  border-right: none !important;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
}
/* Ensure the detection list column never collapses; give it real height so all
 * seeded detections render (not just the first). */
#change-detect-modal #cd-list {
  max-height: none;
}

/* ── Item 4b: Terrain (and reusable) in-panel explainer ─────────────────── */
.isr-explainer {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(34, 211, 238, 0.06);
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-left: 3px solid var(--accent, #22d3ee);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-primary, #cbd5e1);
}
.isr-explainer strong { color: var(--accent, #22d3ee); }
.isr-explainer-icon { font-size: 1rem; flex-shrink: 0; line-height: 1.2; }

/* ── Item 1: Imagery detail — image viewer ──────────────────────────────────
 * Two-pane layout: large fit-to-panel preview on the left, metadata column on
 * the right. The detail modal body is capped at 70vh and scrolls; the stage
 * fits the image within without distortion (object-fit: contain). */
.isr-img-viewer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
  gap: 16px;
  align-items: start;
}
.isr-img-viewer-stage {
  position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0 10px, transparent 10px 20px),
    #05080f;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  min-height: 300px;
  max-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.isr-img-preview {
  max-width: 100%;
  max-height: 62vh;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  /* GPU-friendly fade-in */
  animation: isr-fade-in 0.25s ease both;
}
@keyframes isr-fade-in {
  from { opacity: 0; transform: scale(0.99); }
  to   { opacity: 1; transform: scale(1); }
}
.isr-img-viewer-loading,
.isr-img-viewer-stage > .isr-loading {
  color: var(--text-muted, #6b7280);
  font-size: 0.82rem;
}
/* Classification tag over the preview (top-left) */
.isr-img-class-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #e5e7eb;
}
.isr-img-class-secret      { color: #f59e0b; border-color: #f59e0b66; }
.isr-img-class-top_secret  { color: #f87171; border-color: #f8717166; }
.isr-img-class-confidential{ color: #60a5fa; border-color: #60a5fa66; }
.isr-img-class-unclassified{ color: #34d399; border-color: #34d39966; }

/* Graceful "no preview" placeholder */
.isr-img-noimg {
  text-align: center;
  color: var(--text-muted, #6b7280);
  padding: 28px 16px;
}
.isr-img-noimg-icon { font-size: 2.6rem; opacity: 0.5; margin-bottom: 8px; }
.isr-img-noimg-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-secondary, #9ca3af);
  margin-bottom: 4px;
}
.isr-img-noimg-sub { font-size: 0.72rem; line-height: 1.5; }

.isr-img-viewer-meta { min-width: 0; }

/* Stack the viewer on narrow widths (embedded dock / small viewport) */
@media (max-width: 720px) {
  .isr-img-viewer-layout { grid-template-columns: 1fr; }
  .isr-img-viewer-stage { max-height: 44vh; }
  .isr-img-preview { max-height: 44vh; }
}

/* ── Item 5: FMV in-browser player ──────────────────────────────────────── */
.fmv-player-wrap { margin: 4px 0 10px; }
.fmv-player-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #05080f;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fmv-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}
.fmv-video.hidden { display: none; }
/* STREAM OFFLINE overlay (clean state when the demo stream is unreachable) */
.fmv-player-offline {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 16px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 4px),
    #070b14;
  color: #9ca3af;
}
.fmv-player-offline.hidden { display: none; }
.fmv-offline-icon { font-size: 2rem; opacity: 0.7; }
.fmv-offline-msg {
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #f59e0b;
}
.fmv-offline-sub { font-size: 0.7rem; line-height: 1.5; color: #6b7280; }
/* KLV telemetry overlay (bottom-left, like a real FMV HUD) */
.fmv-klv-overlay {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 3;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-mono, monospace);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  color: #34d399;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 4px;
  padding: 3px 8px;
  pointer-events: none;
}
.fmv-player-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.fmv-player-actions .btn { text-decoration: none; }

/* ── Item 2 (follow-up fix, 2026-06-14): Spatial Rules viewport-pin override ──
 * ROOT CAUSE: style.css has TWO `.modal` rules — the card-style box (line ~1452)
 * AND a later full-overlay rule (line ~4457: `position:fixed; inset:0; z-index:2000;
 * align-items:center; justify-content:center`). The Spatial Rules inner box is
 * `<div class="modal fusion-spatial-modal">`, so it inherits `position:fixed; inset:0`
 * from that second `.modal`. When PanelShell embeds the OUTER overlay
 * (#spatial-rules-modal gets `.rv-panel-embedded`), the inner `.fusion-spatial-modal`
 * KEEPS `position:fixed; inset:0` — so it escapes the panel host and pins to the
 * viewport, where the panel-layer / topbar stacking clips it → "partially visible".
 * The earlier Item-2 block (display:flex/height/width) never reset position/inset,
 * so the box still floated free.
 *
 * FIX: when embedded, neutralise the viewport-pin (position:static, inset:auto,
 * z-index:auto) and drop the centering so the modal flows + fills the host as a
 * flex column. Scoped to `.rv-panel-embedded` (the embedded state only) — the
 * standalone modal-overlay path is untouched. No viewport media query (a narrow
 * dock in a wide viewport would not match it). */
.rv-panel-embedded .fusion-spatial-modal {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  margin: 0 !important;
}
/* The embedded overlay host (#spatial-rules-modal.rv-panel-embedded) must be a
 * flex column so the inner spatial modal can stretch to fill the panel host. The
 * generic `.rv-panel-embedded` rule sets display:block; force flex here so
 * height:100% on the child resolves against a definite parent. */
#spatial-rules-modal.rv-panel-embedded {
  display: flex !important;
  flex-direction: column !important;
}

/* ── UIR14-3: imagery zoom/pan viewer ─────────────────────────────────────────
   Enlarged stage + wheel-zoom (cursor-anchored) + drag-pan. The JS owns the
   <img> transform, so the zoomable image opts OUT of the fade-in animation
   (CSS animations override inline styles and would clobber the zoom transform). */
.isr-img-viewer-stage { min-height: 460px; max-height: 80vh; }
.isr-img-zoom-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  animation: isr-fade-in 0.25s ease both;
}
.isr-img-zoom-wrap.grabbing { cursor: grabbing; }
.isr-img-zoom-wrap .isr-img-preview {
  animation: none;                 /* JS owns the transform */
  transform-origin: center center;
  transition: none;
  will-change: transform;
  max-width: 100%;
  max-height: 80vh;
  user-select: none;
  -webkit-user-drag: none;
}
.isr-img-zoom-ctrls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.isr-img-zoom-ctrls button {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: var(--text, #e6edf3);
  background: color-mix(in srgb, var(--panel, #11161d) 86%, transparent);
  border: 1px solid var(--border, #2a3340);
  border-radius: 6px;
  cursor: pointer;
  backdrop-filter: blur(3px);
}
.isr-img-zoom-ctrls button:hover { background: var(--accent-dim, rgba(80, 160, 255, 0.18)); }
.isr-img-zoom-hint {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--text-muted, #8a97a6);
  background: color-mix(in srgb, var(--panel, #11161d) 70%, transparent);
  border-radius: 999px;
  pointer-events: none;
}
@media (max-width: 980px) {
  .isr-img-viewer-stage { min-height: 320px; max-height: 50vh; }
  .isr-img-zoom-wrap .isr-img-preview { max-height: 50vh; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WS-C (2026-07-02) — editable imagery annotations + save/share
   Bi-theme via tokens (fallbacks are dark-theme legacy). Every overlay closes
   via ✕ + Escape + click-outside (founder rule ui-every-opener-has-close).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Annotation rows in the imagery detail. */
.isr-ann-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
  font-size: 0.78rem;
}
.isr-ann-main { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.isr-ann-head { font-weight: 600; color: var(--text-primary, #e5e7eb); }
.isr-ann-type {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted, #9ca3af);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 3px;
  padding: 0 4px;
}
.isr-ann-notes { flex: 1 1 100%; color: var(--text-secondary, #cbd5e1); font-size: 0.74rem; }
.isr-ann-ctrls { display: flex; gap: 4px; margin-left: auto; flex-shrink: 0; }

/* Annotation editor overlay (body-mounted). */
.isr-ann-editor-overlay,
.isr-share-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg-primary, #0b0f14) 62%, transparent);
  backdrop-filter: blur(2px);
}
.isr-ann-editor-overlay.hidden { display: none; }
.isr-ann-editor-card,
.isr-share-card {
  width: 460px;
  max-width: 94vw;
  background: var(--bg-elevated, var(--bg-secondary, #111827));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.45);
  overflow: hidden;
}
.isr-ann-editor-head,
.isr-share-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary, #e5e7eb);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.isr-ann-editor-close,
.isr-share-close {
  cursor: pointer;
  color: var(--text-muted, #9ca3af);
  font-size: 1rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
}
.isr-ann-editor-close:hover,
.isr-share-close:hover { color: var(--accent, #22d3ee); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.isr-ann-editor-body { padding: 14px 16px; display: grid; gap: 12px; max-height: 66vh; overflow-y: auto; }
.isr-ann-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
}

/* Share popover. */
.isr-share-body { display: flex; gap: 8px; align-items: center; padding: 14px 16px; }
.isr-share-body .form-control { flex: 1 1 auto; }
.isr-share-hint { padding: 0 16px 14px; font-size: 0.72rem; color: var(--text-muted, #9ca3af); }