/* ═══════════════════════════════════════════════════════════════
   RAVEN AI FUSION — PanelShell Styles
   frontend/css/panel_shell.css  ?v=20260610p1

   Styles for the PanelShell single-workspace panel manager.
   ALL z-indexes reference --rv-z-* tokens from tokens.css.
   ALL animations use transform/opacity only (GPU-safe; no
   width/height/top/left animated — passes UIK-CSS test).

   Load order: after ui_kit.css (in index.html).

   Spec: dev-dev-docs/ux/2026-06-10-ux-overhaul-implementation-spec.md §8.6 / FE-2
   PRD:  dev-docs/ux/PRD-ux-overhaul.md  Epic A1
   ═══════════════════════════════════════════════════════════════ */


/* ── VIEW TOGGLE HIDE (bimodal split eliminated) ─────────────── */

.rv-panel-shell-hidden {
  display: none !important;
}


/* ── BOTTOM PANEL COLLAPSED DEFAULT (Epic A3) ────────────────── */

#bottom-panel.rv-panel-shell-bottom-collapsed {
  /* Collapse to header-height only; use max-height + overflow clip */
  max-height: 0;
  overflow: hidden;
  /* No animated width/height — we use max-height with a clip approach.
     Design choice: use display:none equivalent via max-height:0 + overflow:hidden.
     This is NOT a CSS transition so it doesn't violate the GPU-safe rule.
     The panel can be un-collapsed via JS by removing this class. */
}


/* ── PANEL LAYER (full-viewport overlay container) ───────────── */

.rv-panel-layer,
#panel-layer {
  position: absolute;
  inset: 0;
  /* pointer-events:none so the map stays interactive through gaps.
     Individual panels re-enable pointer-events via their own rules. */
  pointer-events: none;
  z-index: var(--rv-z-dock);  /* dock panels sit at this base layer */
  overflow: hidden;           /* clip dragged panels that go offscreen */
}


/* ── TAB STRIP (minimized panels) ────────────────────────────── */

.rv-panel-tab-strip,
#panel-tab-strip {
  position: fixed;
  bottom: 0;
  left: var(--rv-sidebar-w, 252px);
  right: 0;
  height: 36px;
  display: flex;
  align-items: center;
  gap: var(--rv-space-1);
  padding: 0 var(--rv-space-3);
  background: var(--rv-color-bg-panel);
  border-top: 1px solid var(--rv-color-border-bright);
  z-index: calc(var(--rv-z-dock) + 5);
  pointer-events: auto;
  overflow-x: auto;
  overflow-y: hidden;
}

.rv-panel-tab-strip:empty {
  display: none;
}

.rv-panel-tab {
  flex-shrink: 0;
  padding: var(--rv-space-1) var(--rv-space-3);
  background: var(--rv-color-bg-card);
  border: 1px solid var(--rv-color-border-bright);
  border-radius: var(--rv-r-base) var(--rv-r-base) 0 0;
  color: var(--rv-color-text-secondary);
  font-size: var(--rv-fs-xs);
  font-family: var(--rv-font-mono, monospace);
  letter-spacing: var(--rv-ls-wider);
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  transition:
    background-color var(--rv-dur-fast) var(--rv-ease-default),
    color            var(--rv-dur-fast) var(--rv-ease-default);
  /* No width/height/top/left animated */
}

.rv-panel-tab:hover,
.rv-panel-tab:focus-visible {
  background: var(--rv-color-bg-card-hover);
  color: var(--rv-color-accent);
  outline: 1px solid var(--rv-color-accent-border);
  outline-offset: -1px;
}


/* ── BASE PANEL ──────────────────────────────────────────────── */

.rv-panel {
  position: absolute;
  pointer-events: auto;
  background: var(--rv-color-bg-panel);
  border: 1px solid var(--rv-color-border-bright);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Enter: opacity + transform (GPU-safe) */
  opacity: 0;
  transition:
    opacity   var(--rv-dur-normal) var(--rv-ease-out),
    transform var(--rv-dur-normal) var(--rv-ease-spring);
}

.rv-panel--visible {
  opacity: 1;
  transform: none !important;
}

.rv-panel--exiting {
  opacity: 0;
  transition:
    opacity   var(--rv-dur-fast) var(--rv-ease-in),
    transform var(--rv-dur-fast) var(--rv-ease-in);
}

.rv-panel--minimized {
  /* Hidden but kept in DOM for restore.
     Use opacity+scale transform, not display:none, so transitions still fire. */
  opacity: 0 !important;
  pointer-events: none;
  transform: translateY(8px) !important;
}


/* ── DOCK PANEL ──────────────────────────────────────────────── */

.rv-panel--dock {
  z-index: var(--rv-z-dock);
  /* Docked right by default — sits flush to the right edge of #main-content */
  top: 0;
  bottom: 0;
  right: 0;
  width: clamp(320px, 30vw, 520px);
  border-radius: 0;
  border-right: none;
  border-top: none;
  border-bottom: none;
  box-shadow: var(--rv-shadow-lg);
  transform: translateX(12px); /* entry: slides from right */
}

.rv-panel--dock.rv-panel--visible {
  transform: translateX(0);
}

.rv-panel--dock.rv-panel--side-left {
  right: auto;
  left: 0;
  border-left: none;
  border-right: 1px solid var(--rv-color-border-bright);
  transform: translateX(-12px); /* entry: slides from left */
}

.rv-panel--dock.rv-panel--side-left.rv-panel--visible {
  transform: translateX(0);
}

.rv-panel--dock.rv-panel--side-bottom {
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: clamp(200px, 35vh, 480px);
  border-bottom: none;
  border-left: none;
  border-right: none;
  transform: translateY(12px); /* entry: slides from bottom */
}

.rv-panel--dock.rv-panel--side-bottom.rv-panel--visible {
  transform: translateY(0);
}


/* ── FLOAT PANEL ─────────────────────────────────────────────── */

.rv-panel--float {
  z-index: var(--rv-z-float);
  top: 80px;
  right: var(--rv-space-5);
  width: clamp(320px, 26vw, 480px);
  min-height: 240px;
  max-height: calc(100vh - 120px);
  border-radius: var(--rv-r-lg);
  box-shadow: var(--rv-shadow-xl), var(--rv-shadow-accent);
  transform: translateY(8px) scale(0.98); /* entry */
  resize: both;
  overflow: auto;
}

.rv-panel--float.rv-panel--visible {
  transform: translateY(0) scale(1);
}

.rv-panel--float.rv-panel--dragging {
  /* While dragging: disable transition so movement is immediate */
  transition: none;
  user-select: none;
  cursor: grabbing;
}


/* ── SHEET PANEL ─────────────────────────────────────────────── */

.rv-panel--sheet {
  z-index: var(--rv-z-sheet);
  /* Full-width bottom sheet (large overlay — migration target for F-08) */
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--rv-topbar-h, 54px);
  border-radius: var(--rv-r-lg) var(--rv-r-lg) 0 0;
  box-shadow: var(--rv-shadow-xl);
  /* Backdrop for sheet panels (they are dialog-grade) */
  background: var(--rv-color-bg-primary);
  transform: translateY(16px); /* entry: slides up from bottom */
}

.rv-panel--sheet.rv-panel--visible {
  transform: translateY(0);
}

/* Optional: sheet backdrop (adds overlay behind the sheet over map) */
.rv-panel--sheet::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--rv-color-bg-overlay);
  z-index: -1;
  opacity: 0;
  transition: opacity var(--rv-dur-normal) var(--rv-ease-out);
  pointer-events: none;
}

.rv-panel--sheet.rv-panel--visible::before {
  opacity: 1;
}


/* ── PANEL HEADER ────────────────────────────────────────────── */

.rv-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--rv-space-2) var(--rv-space-3);
  background: var(--rv-color-bg-card);
  border-bottom: 1px solid var(--rv-color-border-bright);
  flex-shrink: 0;
  min-height: 40px;
}

.rv-panel__header--draggable {
  cursor: grab;
  user-select: none;
}

.rv-panel__header--draggable:active {
  cursor: grabbing;
}

.rv-panel__title {
  font-family: var(--rv-font-mono, monospace);
  font-size: var(--rv-fs-sm);
  font-weight: var(--rv-fw-semibold);
  letter-spacing: var(--rv-ls-wider);
  text-transform: uppercase;
  color: var(--rv-color-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.rv-panel__header-actions {
  display: flex;
  align-items: center;
  gap: var(--rv-space-1);
  flex-shrink: 0;
  margin-left: var(--rv-space-2);
}

.rv-panel__mode-controls {
  display: flex;
  gap: var(--rv-space-1);
}


/* ── PANEL CONTROL BUTTONS ───────────────────────────────────── */

.rv-panel__btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rv-r-sm);
  color: var(--rv-color-text-muted);
  font-size: var(--rv-fs-sm);
  cursor: pointer;
  pointer-events: auto;
  transition:
    background-color var(--rv-dur-fast) var(--rv-ease-default),
    border-color     var(--rv-dur-fast) var(--rv-ease-default),
    color            var(--rv-dur-fast) var(--rv-ease-default);
}

.rv-panel__btn:hover,
.rv-panel__btn:focus-visible {
  background: var(--rv-color-bg-card-hover);
  border-color: var(--rv-color-border-bright);
  color: var(--rv-color-text-primary);
  outline: none;
}

.rv-panel__btn--close:hover,
.rv-panel__btn--close:focus-visible {
  background: var(--rv-color-sev-critical-bg);
  border-color: var(--rv-color-sev-critical);
  color: var(--rv-color-sev-critical);
}

.rv-panel__btn--minimize:hover,
.rv-panel__btn--minimize:focus-visible {
  background: var(--rv-color-accent-glow);
  border-color: var(--rv-color-accent-border);
  color: var(--rv-color-accent);
}


/* ── PANEL CONTENT HOST ──────────────────────────────────────── */

.rv-panel__content {
  flex: 1;
  overflow: auto;
  position: relative;
  /* Scrollbar styling to match dark theme */
  scrollbar-width: thin;
  scrollbar-color: var(--rv-color-border-bright) transparent;
}

.rv-panel__content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.rv-panel__content::-webkit-scrollbar-track {
  background: transparent;
}

.rv-panel__content::-webkit-scrollbar-thumb {
  background: var(--rv-color-border-bright);
  border-radius: var(--rv-r-full);
}


/* ── EMBEDDED MODAL OVERRIDE ─────────────────────────────────── */

/*
 * .rv-panel-embedded overrides the .modal-overlay position:fixed so that
 * legacy modals display correctly when moved into a panel content host.
 * This is the Phase 1 re-hosting strategy: tools are not rewritten.
 */
.rv-panel-embedded {
  /* Override position:fixed from .modal-overlay */
  position: static !important;
  /* Override the hidden/display pattern */
  display: block !important;
  /* Remove modal-specific sizing */
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  /* Remove modal overlay background */
  background: transparent !important;
  /* Remove inset/z-index overrides */
  inset: auto !important;
  z-index: auto !important;
  /* Ensure inner .modal box fills the host */
  overflow: auto !important;
  padding: 0 !important;
  align-items: stretch !important;
}

.rv-panel-embedded > .modal {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Fullscreen cyber/isr/fusion overlays embedded in sheet panels */
.rv-panel-embedded .modal-fullscreen,
.rv-panel-embedded .cyber-overlay > .modal-fullscreen {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

.rv-panel-modal-wrapper {
  width: 100%;
  height: 100%;
  overflow: auto;
}

/*
 * Phase-10 fusion modals (entity resolution / entity graph / dedup) use a
 * flex-column `.fusion-modal-shell` whose body/graph-canvas children rely on
 * a definite parent height (flex:1 + min-height:0). The legacy `.cmd-embedded`
 * path sized that shell, but the PanelShell re-host (`.rv-panel-embedded`) did
 * not — so `#eg-canvas` collapsed to ~0px height and the D3 graph rendered
 * invisible (SVG height:100% of a zero-height box). Mirror the cmd-embedded
 * sizing here so the embedded fusion shell fills the panel host.
 */
.rv-panel-embedded > .fusion-modal-shell {
  height: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-left: none !important;
  border-right: none !important;
}

/*
 * Item 1 (Entity Resolution): with the shell pinned to 100% height (above),
 * the split-body's left table and right detail pane each scroll internally
 * instead of the whole shell scrolling away. The detail pane (`.fusion-split-
 * right`) is a side-by-side column, so clicking a row low in the list no
 * longer pushes the detail off-screen — it stays in view next to the list.
 * Pin the detail header to the top of the pane's own scroll so the entity
 * name/badges are always the first thing visible when a new entity is picked,
 * regardless of how far the list was scrolled.
 */
/*
 * Item 3 (OSINT Dedup): primary/canonical event marking inside a cluster.
 * The detail endpoint orders events is_primary DESC; the primary member gets
 * a highlighted card + ★ badge so analysts can tell the canonical event from
 * its duplicates. Theme-matched to the existing .dedup-event-card in style.css.
 */
.dedup-event-primary {
  border-color: var(--accent, #22d3ee) !important;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.35) inset;
  background: rgba(34, 211, 238, 0.06) !important;
}
.dedup-primary-badge {
  display: inline-block;
  font-size: var(--rv-fs-xs, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #041016;
  background: var(--accent, #22d3ee);
  border-radius: 3px;
  padding: 1px 5px;
  margin-right: 6px;
  vertical-align: middle;
}
.dedup-compare-canon {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-primary, #e2e8f0);
}

.rv-panel-embedded .fusion-split-right { align-self: stretch; }
.rv-panel-embedded #em-detail-pane .em-detail-header {
  position: sticky;
  top: 0;
  z-index: calc(var(--rv-z-map, 0) + 2); /* local stacking inside the panel scroll context */
  background: var(--bg-panel, #0d1526);
  padding-bottom: 8px;
  margin: -20px -20px 4px;
  padding: 16px 20px 8px;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.06));
}


/* ── ERROR STATE ─────────────────────────────────────────────── */

.rv-panel-error {
  padding: var(--rv-space-4);
  color: var(--rv-color-sev-critical);
  font-size: var(--rv-fs-sm);
  font-family: var(--rv-font-mono, monospace);
  border: 1px solid var(--rv-color-sev-critical);
  border-radius: var(--rv-r-base);
  margin: var(--rv-space-4);
  background: var(--rv-color-sev-critical-bg);
}


/* ── OPS ROOM STUB (placeholder for ops-rooms-panel) ─────────── */

.rv-panel-ops-stub {
  padding: var(--rv-space-4);
  color: var(--rv-color-text-muted);
  font-size: var(--rv-fs-sm);
  font-family: var(--rv-font-mono, monospace);
}

.rv-panel-host-inner {
  width: 100%;
  height: 100%;
}


/* ── RESPONSIVE — tablet-grade (≥768px desktop target) ──────── */

@media (max-width: 900px) {
  .rv-panel--dock {
    width: clamp(280px, 60vw, 480px);
  }

  .rv-panel--float {
    width: clamp(280px, 80vw, 420px);
    right: var(--rv-space-2);
  }
}

@media (max-width: 640px) {
  /* On small screens, dock panels go full-width bottom sheet */
  .rv-panel--dock {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 60vh;
    border-radius: var(--rv-r-lg) var(--rv-r-lg) 0 0;
    transform: translateY(16px);
  }

  .rv-panel--dock.rv-panel--visible {
    transform: translateY(0);
  }

  .rv-panel--float {
    /* Floats go full-width on small screens */
    left: var(--rv-space-2);
    right: var(--rv-space-2);
    width: auto;
    top: 60px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   FIX (2026-06-14): dock-panel chrome occluded by map controls
   ───────────────────────────────────────────────────────────────
   Live evidence: the Saved Views dock panel's close/minimize/mode
   buttons sit under the floating geocoder (#search-container, z:800)
   and other legacy map controls (#map-toolbar 800, #base-layer-picker
   810, #cesium-* 810/820, Leaflet controls 900) — all of which live in
   the SAME #main-content stacking context as #panel-layer but paint
   ABOVE it (panel layer/dock = z:100). elementsFromPoint over the ✕
   returned INPUT#search-input on top, so the close button was visually
   present but un-clickable (closeIsHittable:false).

   Fix: lift #panel-layer above the legacy map-control band (≤900) but
   keep it below the topbar (z:1000). This is safe because #panel-layer
   is pointer-events:none and empty when no panel is open, so the map
   controls remain fully interactive until a panel is actually shown.
   An open panel re-enables pointer-events on itself (.rv-panel) and now
   correctly overlays the controls, exposing its chrome buttons.

   Dock/float/sheet keep their relative order via the --rv-z-* tokens;
   we only raise the shared container's base so the whole PanelShell
   ladder clears the legacy controls. Does not touch style.css. */

.rv-panel-layer,
#panel-layer {
  /* was var(--rv-z-dock)=100; map controls in style.css use 400–900.
     --rv-z-panel-layer (950) clears them and stays under #topbar (1000). */
  z-index: var(--rv-z-panel-layer);
}