/* ═══════════════════════════════════════════════════════════════
   RAVEN AI FUSION — Saved Views + Ops Board Styles
   frontend/css/saved_views.css  ?v=20260611p3

   Styles for the H1 saved-views panel + Ops Board wall-display mode.
   The saved-views list renders inside a PanelShell dock panel host.

   ALL colours / spacing / fonts reference --rv-* tokens (tokens.css).
   ALL animation uses transform/opacity only (GPU-safe).
   Font floor: nothing below --rv-fs-xs (≈11px) — WCAG 2.1 AA (F-19).

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

   Spec: Phase 4 frontend packet A — Epic H1 / A3
   ═══════════════════════════════════════════════════════════════ */

.rv-sv {
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-3);
  padding: var(--rv-space-3);
  font-family: var(--rv-font-ui);
  color: var(--rv-color-text-primary);
}

/* ── Action bar ──────────────────────────────────────────────── */
.rv-sv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rv-space-2);
}

.rv-sv-btn {
  padding: var(--rv-space-2) var(--rv-space-3);
  background: var(--rv-color-bg-card);
  border: 1px solid var(--rv-color-border);
  border-radius: var(--rv-r-md);
  color: var(--rv-color-text-primary);
  font-size: var(--rv-fs-xs);
  font-family: var(--rv-font-ui);
  cursor: pointer;
  transition: background var(--rv-dur-fast) var(--rv-ease-default),
              border-color var(--rv-dur-fast) var(--rv-ease-default);
}

.rv-sv-btn:hover {
  background: var(--rv-color-bg-card-hover);
  border-color: var(--rv-color-border-bright);
}

.rv-sv-btn:focus-visible {
  outline: 2px solid var(--rv-color-accent);
  outline-offset: 1px;
}

.rv-sv-btn--primary {
  border-color: var(--rv-color-accent-border);
  color: var(--rv-color-accent);
  background: var(--rv-color-accent-glow);
}

/* ── List + states ───────────────────────────────────────────── */
.rv-sv-list {
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-2);
}

.rv-sv-loading,
.rv-sv-empty {
  padding: var(--rv-space-4);
  font-size: var(--rv-fs-xs);
  color: var(--rv-color-text-secondary);
  line-height: var(--rv-lh-normal);
  text-align: center;
}

.rv-sv-empty-title {
  font-size: var(--rv-fs-sm);
  font-weight: var(--rv-fw-semibold);
  color: var(--rv-color-text-primary);
  margin-bottom: var(--rv-space-1);
}

.rv-sv-empty-body { font-size: var(--rv-fs-xs); }

/* ── View item ───────────────────────────────────────────────── */
.rv-sv-item {
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-2);
  padding: var(--rv-space-3);
  background: var(--rv-color-bg-card);
  border: 1px solid var(--rv-color-border);
  border-radius: var(--rv-r-md);
  transition: border-color var(--rv-dur-fast) var(--rv-ease-default);
}

.rv-sv-item:hover { border-color: var(--rv-color-border-bright); }

.rv-sv-item-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rv-space-2);
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-family: var(--rv-font-ui);
}

.rv-sv-item-main:focus-visible {
  outline: 2px solid var(--rv-color-accent);
  outline-offset: 2px;
  border-radius: var(--rv-r-sm);
}

.rv-sv-item-name {
  flex: 1 1 auto;
  font-size: var(--rv-fs-sm);
  font-weight: var(--rv-fw-medium);
  color: var(--rv-color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Kind badges ─────────────────────────────────────────────── */
.rv-sv-badge {
  flex: 0 0 auto;
  padding: 1px var(--rv-space-2);
  font-size: var(--rv-fs-xs);
  font-weight: var(--rv-fw-medium);
  letter-spacing: var(--rv-ls-wide);
  border-radius: var(--rv-r-full);
  border: 1px solid var(--rv-color-border);
  color: var(--rv-color-text-secondary);
  background: var(--rv-color-bg-secondary);
}

.rv-sv-badge--shared {
  color: var(--rv-color-accent);
  border-color: var(--rv-color-accent-border);
  background: var(--rv-color-accent-glow);
}

.rv-sv-badge--ops_board {
  color: var(--rv-color-sev-medium);
  border-color: var(--rv-color-sev-medium);
  background: var(--rv-color-sev-medium-bg);
}

.rv-sv-badge--readonly {
  color: var(--rv-color-text-muted);
  font-style: italic;
}

/* ── Item actions ────────────────────────────────────────────── */
.rv-sv-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rv-space-1);
  padding-top: var(--rv-space-1);
  border-top: 1px solid var(--rv-color-border);
}

.rv-sv-action {
  padding: var(--rv-space-1) var(--rv-space-2);
  background: transparent;
  border: 1px solid var(--rv-color-border);
  border-radius: var(--rv-r-base);
  color: var(--rv-color-text-secondary);
  font-size: var(--rv-fs-xs);
  font-family: var(--rv-font-ui);
  cursor: pointer;
  transition: background var(--rv-dur-fast) var(--rv-ease-default),
              color var(--rv-dur-fast) var(--rv-ease-default);
}

.rv-sv-action:hover {
  background: var(--rv-color-bg-card-hover);
  color: var(--rv-color-text-primary);
}

.rv-sv-action:focus-visible {
  outline: 2px solid var(--rv-color-accent);
  outline-offset: 1px;
}

.rv-sv-action--danger {
  color: var(--rv-color-sev-critical);
  border-color: var(--rv-color-sev-critical);
}

.rv-sv-action--danger:hover {
  background: var(--rv-color-sev-critical-bg);
  color: var(--rv-color-sev-critical);
}

/* ═══════════════════════════════════════════════════════════════
   OPS BOARD MODE — wall-display chrome
   A body class collapses the sidebar + hides topbar chrome and
   maximises the map. Chosen panels stay docked. (PRD A3.)
   We collapse via transform/opacity + display where it is safe to do
   so without animating layout properties on the map itself.
   ═══════════════════════════════════════════════════════════════ */

/* Hide the topbar + sidebar entirely in Ops Board mode. */
body.rv-ops-board-mode #topbar { display: none !important; }
body.rv-ops-board-mode #sidebar { display: none !important; }

/* Reclaim the space the sidebar/topbar occupied so the map is maximal. */
body.rv-ops-board-mode #main-content {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
}

/* Keep the bottom panel collapsed/out of the way on wall displays. */
body.rv-ops-board-mode #bottom-panel { display: none !important; }

/* Floating exit affordance — top-right, above panels. */
.rv-ops-board-exit {
  position: fixed;
  top: var(--rv-space-3);
  right: var(--rv-space-3);
  z-index: var(--rv-z-dialog);
  padding: var(--rv-space-2) var(--rv-space-4);
  background: var(--rv-color-bg-glass);
  backdrop-filter: blur(8px);
  border: 1px solid var(--rv-color-border-bright);
  border-radius: var(--rv-r-full);
  color: var(--rv-color-text-primary);
  font-size: var(--rv-fs-xs);
  font-family: var(--rv-font-ui);
  font-weight: var(--rv-fw-medium);
  cursor: pointer;
  box-shadow: var(--rv-shadow-md);
  opacity: 0.85;
  transition: opacity var(--rv-dur-fast) var(--rv-ease-default),
              transform var(--rv-dur-fast) var(--rv-ease-default);
}

.rv-ops-board-exit:hover {
  opacity: 1;
  transform: scale(1.03);
}

.rv-ops-board-exit:focus-visible {
  outline: 2px solid var(--rv-color-accent);
  outline-offset: 2px;
  opacity: 1;
}

/* ── Topbar saved-views entry inherits .topbar-icon-btn; nothing extra ── */