/* ═══════════════════════════════════════════════════════════════
   RAVEN AI FUSION — Intelligence-Cycle Navigation Styles
   frontend/css/nav_cycle.css  ?v=20260621p1

   FE-3: Styling for the intel-cycle nav rendered by nav_cycle.js.

   Design constraints:
   - Military dark theme; uses --rv-* tokens where available,
     falling back to existing --bg-*, --text-*, --accent vars.
   - All animations use transform + opacity only (GPU-safe).
   - Font floor: nothing below --rv-fs-xs (0.78rem ≈ 12.5px).
   - All interactive elements are <button> (a11y — resolves F-09).
   ═══════════════════════════════════════════════════════════════ */

/* ── Legacy group hiding ─────────────────────────────────────── */

/* When NavCycle is active the old geo/cmd groups are hidden.
   They remain in the DOM so existing JS callers still find
   elements by id — visibility only suppressed.              */
.rv-nc-legacy-hidden {
  display: none !important;
}

/* ── Root nav container ──────────────────────────────────────── */

#intel-cycle-nav,
.rv-nc-root {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  /* Contain all group sections */
  overflow: hidden;
}

/* ── Group section ───────────────────────────────────────────── */

.rv-nc-group {
  border-bottom: 1px solid var(--rv-color-border, var(--border-color, rgba(255,255,255,0.08)));
  overflow: hidden;
}

.rv-nc-group:last-child {
  border-bottom: none;
}

/* ── Group header (button) ───────────────────────────────────── */

.rv-nc-group-header {
  display: flex;
  align-items: center;
  gap: var(--rv-space-2, 8px);
  width: 100%;
  padding: var(--rv-space-2, 8px) var(--rv-space-3, 12px);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--rv-color-text-secondary, var(--text-muted, #8a9ab0));
  font-family: var(--rv-font-mono, var(--font-mono, 'Share Tech Mono', monospace));
  font-size: var(--rv-fs-xs, 0.78rem);
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  /* GPU-safe transition on background + transform */
  transition:
    background-color var(--rv-dur-fast, 120ms) ease,
    color var(--rv-dur-fast, 120ms) ease;
  user-select: none;
}

.rv-nc-group-header:hover,
.rv-nc-group-header:focus-visible {
  background-color: var(--rv-color-surface-hover, rgba(255,255,255,0.04));
  color: var(--rv-color-text-primary, var(--text-primary, #e2e8f0));
  outline: none;
}

.rv-nc-group-header:focus-visible {
  outline: 2px solid var(--rv-color-accent, var(--accent, #00e5ff));
  outline-offset: -2px;
}

/* Active (expanded) state */
.rv-nc-group--open > .rv-nc-group-header {
  color: var(--rv-color-text-primary, var(--text-primary, #e2e8f0));
  background-color: var(--rv-color-surface-active, rgba(0,229,255,0.06));
}

/* ── Group icon ──────────────────────────────────────────────── */

.rv-nc-group-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

/* ── Group label + description ───────────────────────────────── */

.rv-nc-group-label-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.rv-nc-group-label {
  font-size: var(--rv-fs-xs, 0.78rem);
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rv-nc-group-desc {
  font-size: var(--rv-fs-xs, 0.78rem);
  font-weight: 400;
  color: var(--rv-color-text-muted, var(--text-muted, #60708a));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0;
  text-transform: none;
}

/* ── Group chevron ───────────────────────────────────────────── */

.rv-nc-group-chevron {
  font-size: var(--rv-fs-xs, 0.78rem);
  flex-shrink: 0;
  /* Rotate on open — GPU-safe transform */
  display: inline-block;
  transform: rotate(0deg);
  transition: transform var(--rv-dur-fast, 120ms) ease;
}

.rv-nc-group--open > .rv-nc-group-header .rv-nc-group-chevron {
  transform: rotate(90deg);
}

/* ── Group body (items container) ────────────────────────────── */

.rv-nc-group-body {
  /* Collapsed by default — animate via max-height + opacity */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  /* GPU-safe: opacity + transform only; max-height used as bounds limiter */
  transition:
    max-height var(--rv-dur-normal, 220ms) ease,
    opacity var(--rv-dur-fast, 120ms) ease;
  padding: 0;
}

.rv-nc-group--open > .rv-nc-group-body {
  /* 800px accommodates up to ~16 items; actual height is content-driven */
  max-height: 800px;
  opacity: 1;
  padding: var(--rv-space-1, 4px) 0 var(--rv-space-2, 8px);
}

/* ── Nav item wrapper ────────────────────────────────────────── */

.rv-nc-item {
  display: block;
}

/* ── Nav item button (a11y: real <button> element) ───────────── */

.rv-nc-item-btn {
  display: flex;
  align-items: center;
  gap: var(--rv-space-2, 8px);
  width: 100%;
  padding: var(--rv-space-1, 4px) var(--rv-space-3, 12px) var(--rv-space-1, 4px) var(--rv-space-4, 16px);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--rv-color-text-secondary, var(--text-secondary, #aab4c4));
  font-family: var(--rv-font-ui, var(--font-ui, inherit));
  font-size: var(--rv-fs-xs, 0.78rem);
  letter-spacing: 0.02em;
  text-align: left;
  border-left: 2px solid transparent;
  /* GPU-safe transitions */
  transition:
    background-color var(--rv-dur-fast, 120ms) ease,
    color var(--rv-dur-fast, 120ms) ease,
    border-left-color var(--rv-dur-fast, 120ms) ease;
  user-select: none;
}

.rv-nc-item-btn:hover {
  background-color: var(--rv-color-surface-hover, rgba(255,255,255,0.04));
  color: var(--rv-color-text-primary, var(--text-primary, #e2e8f0));
}

.rv-nc-item-btn:focus-visible {
  outline: 2px solid var(--rv-color-accent, var(--accent, #00e5ff));
  outline-offset: -2px;
  color: var(--rv-color-text-primary, var(--text-primary, #e2e8f0));
}

.rv-nc-item-btn--active {
  color: var(--rv-color-accent, var(--accent, #00e5ff));
  border-left-color: var(--rv-color-accent, var(--accent, #00e5ff));
  background-color: var(--rv-color-surface-active, rgba(0,229,255,0.06));
}

/* ── Item icon ───────────────────────────────────────────────── */

.rv-nc-item-icon {
  font-size: 0.82rem;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

/* ── Item label ──────────────────────────────────────────────── */

.rv-nc-item-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--rv-fs-xs, 0.78rem);
}

/* ── Item badge (unread counts, alert totals) ────────────────── */

.rv-nc-item-badge {
  flex-shrink: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background-color: var(--rv-color-danger, var(--sev-critical, #ff4444));
  color: #fff;
  font-size: var(--rv-fs-xs, 0.78rem);
  font-family: var(--rv-font-mono, var(--font-mono, monospace));
  line-height: 16px;
  text-align: center;
}

/* ── Responsive: collapse descriptions on narrow sidebar ─────── */
/* Desktop sidebar width is ~220px; at very narrow widths
   (responsive tablet breakpoint ≥768px per G3 scope) we
   trim description text but keep the group header readable. */

@media (max-width: 900px) {
  .rv-nc-group-desc {
    display: none;
  }
  .rv-nc-group-header {
    padding: var(--rv-space-2, 8px) var(--rv-space-2, 8px);
  }
}

/* ── Sidebar-section animation overrides ─────────────────────── */
/* Ensure the nav-cycle groups slot cleanly inside the existing
   .sidebar-section-body collapsible section.                  */

#sec-navigation-body .rv-nc-root {
  margin: 0;
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════
   UIC-7: Nested item sub-lists (Cameras / Assets / Zones / Weather)
   The legacy accordion body is ADOPTED into .rv-nc-sublist beneath
   its item so the list reads as a true child of that item, rather
   than surfacing at the bottom of the sidebar.
   ══════════════════════════════════════════════════════════════ */

/* ── Item-level chevron (expand/collapse affordance) ─────────── */
.rv-nc-item-chevron {
  font-size: var(--rv-fs-xs, 0.78rem);
  flex-shrink: 0;
  margin-left: auto;            /* push to the right edge of the item */
  color: var(--rv-color-text-muted, var(--text-muted, #60708a));
  /* GPU-safe rotate on expand */
  display: inline-block;
  transform: rotate(0deg);
  transition: transform var(--rv-dur-fast, 120ms) ease;
}

/* Rotate the chevron when the item's sublist is open. The button carries
   .rv-nc-item-btn--active while expanded; the sublist sits as its sibling. */
.rv-nc-item-btn--active .rv-nc-item-chevron {
  transform: rotate(90deg);
  color: var(--rv-color-accent, var(--accent, #00e5ff));
}

/* ── Nested sub-list container ───────────────────────────────── */
.rv-nc-sublist {
  /* Collapsed by default — GPU-safe opacity + max-height bound. */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height var(--rv-dur-normal, 220ms) ease,
    opacity var(--rv-dur-fast, 120ms) ease;
  /* Indent + a subtle rail so it reads as a child of the item above. */
  margin-left: var(--rv-space-4, 16px);
  border-left: 1px solid var(--rv-color-border, var(--border-color, rgba(255,255,255,0.08)));
}

.rv-nc-sublist--open {
  /* Long lists scroll WITHIN the sidebar instead of pushing the rest of the
     nav offscreen. max-height is the animation bound; overflow handles scroll. */
  max-height: 360px;
  opacity: 1;
  overflow-y: auto;
}

/* ── Adopted legacy accordion body inside the sub-list ───────── */
/* The body was authored to sit inside a .nav-accordion; reset the bits that
   relied on that parent so spacing/contrast read correctly when nested. */
.rv-nc-sublist .nav-accordion-body {
  margin: 0;
  padding: var(--rv-space-1, 4px) 0;
  /* .nav-accordion-body.open already provides display:block via legacy CSS;
     keep it block here regardless of any legacy default. */
  display: block;
}

/* Sub-item rows ("➕ Add", "↻ Refresh") and the list rows: nudge the left
   padding so they align under the nested rail rather than the sidebar edge. */
.rv-nc-sublist .nav-sub-item {
  padding-left: var(--rv-space-3, 12px);
  font-size: var(--rv-fs-xs, 0.78rem);
}

.rv-nc-sublist .sidebar-cam-list,
.rv-nc-sublist .sidebar-bm-list {
  padding-left: var(--rv-space-2, 8px);
}

/* Scrollbar styling consistent with the dark theme. */
.rv-nc-sublist::-webkit-scrollbar {
  width: 6px;
}
.rv-nc-sublist::-webkit-scrollbar-thumb {
  background: var(--rv-color-border, rgba(255,255,255,0.12));
  border-radius: 3px;
}

/* ══════════════════════════════════════════════════════════════
   UI-A12: tablet off-canvas nav drawer — click-outside scrim.
   The hamburger (#rv-sidebar-toggle) + off-canvas #sidebar drawer +
   `body.rv-sidebar-collapsed` slide live in style.css's
   `@media (max-width:1024px)` block. This adds the dismiss scrim that
   makes the open drawer satisfy the founder rule (✕ + Escape +
   click-outside): A11yKeys injects #rv-sidebar-scrim and toggles
   .rv-sidebar-scrim--open whenever the drawer is open on tablet.
   Desktop never shows the scrim (display:none below the breakpoint
   guard), so the in-flow sidebar is untouched.
   ══════════════════════════════════════════════════════════════ */
.rv-sidebar-scrim {
  /* Hidden on desktop — only meaningful while the drawer is off-canvas. */
  display: none;
  position: fixed;
  top: var(--rv-topbar-h, 54px);
  inset: var(--rv-topbar-h, 54px) 0 0 0;
  background: var(--rv-color-bg-overlay, rgba(2, 6, 12, 0.55));
  /* Sit just below the sidebar (z 410) so the drawer stays interactive
     while the scrim intercepts taps on the map/content beneath it. */
  z-index: calc(var(--rv-z-sidebar, 410) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--rv-dur-normal, 220ms) var(--rv-ease-out, ease);
}

@media (max-width: 1024px) {
  /* Reveal the scrim element only while the drawer is open on tablet. */
  .rv-sidebar-scrim.rv-sidebar-scrim--open {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
}