/*
 * Canonical sidebar interaction surface.
 * This file is loaded after the legacy theme so every sidebar uses one state
 * model: a soft raised surface and, when active, one left accent rail only.
 */

html body.cases-visual-v2 :is(
  #navMainGroup.nav-main-group > .nav-item,
  #navBottomGroup.nav-bottom-group > .nav-item,
  #pageRoot .settings-layout > .settings-sidebar.ui-frame > .settings-nav-item
) {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  border-image: none !important;
  outline: 0 !important;
  color: var(--v2-muted) !important;
  border-radius: 7px 7px var(--v2-radius-md) var(--v2-radius-md) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.44), rgba(255,255,255,.18)) !important;
  box-shadow:
    -3px -3px 7px -3px rgba(255,255,255,.62),
    3px -3px 7px -3px rgba(255,255,255,.46),
    3px 5px 9px -5px rgba(45,67,85,.30) !important;
  filter: none !important;
  position: relative !important;
  transform: none !important;
  animation: none !important;
  transition: color 140ms ease, background-color 140ms ease, box-shadow 160ms ease, transform 140ms ease !important;
}


html body.cases-visual-v2 :is(
  #navMainGroup.nav-main-group > .nav-item:not(.active),
  #navBottomGroup.nav-bottom-group > .nav-item:not(.active),
  #pageRoot .settings-layout > .settings-sidebar.ui-frame > .settings-nav-item:not(.active)
):is(:hover, :focus-visible) {
  color: #25577d !important;
  background: linear-gradient(145deg, rgba(255,255,255,.52), rgba(225,237,246,.24)) !important;
  box-shadow:
    -4px -4px 8px -4px rgba(255,255,255,.68),
    4px -4px 8px -4px rgba(255,255,255,.50),
    4px 6px 10px -5px rgba(45,67,85,.34) !important;
  transform: translateY(-1px) !important;
}

html body.cases-visual-v2 :is(
  #navMainGroup.nav-main-group > .nav-item.active,
  #navBottomGroup.nav-bottom-group > .nav-item.active,
  #pageRoot .settings-layout > .settings-sidebar.ui-frame > .settings-nav-item.active
),
html body.cases-visual-v2 :is(
  #navMainGroup.nav-main-group > .nav-item.active,
  #navBottomGroup.nav-bottom-group > .nav-item.active,
  #pageRoot .settings-layout > .settings-sidebar.ui-frame > .settings-nav-item.active
):is(:hover, :focus, :focus-visible, :active) {
  color: #1e5f8f !important;
  border: 0 !important;
  outline: 0 !important;
  background: linear-gradient(145deg, rgba(225,235,247,.58), rgba(207,222,238,.30)) !important;
  box-shadow:
    -3px -3px 7px -3px rgba(255,255,255,.62),
    3px -3px 7px -3px rgba(255,255,255,.46),
    3px 5px 9px -5px rgba(45,67,85,.30) !important;
  filter: none !important;
  transform: none !important;
}

/* A real left rail avoids the horizontal raster seams produced by an inset shadow. */
html body.cases-visual-v2 :is(
  #navMainGroup.nav-main-group > .nav-item.active,
  #navBottomGroup.nav-bottom-group > .nav-item.active,
  #pageRoot .settings-layout > .settings-sidebar.ui-frame > .settings-nav-item.active
)::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  border: 0 !important;
  border-left: 3px solid var(--nav-accent, var(--v2-blue)) !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* 2026-08-17 — Keep the last main-nav tile elevation visible.
   Report now inherits the exact same canonical .nav-item surface as Logout;
   the only previous visual mismatch was the scroll group's overflow clipping
   its lower shadow. When the main group is not actually scrollable, allow
   shadows to paint outside the group. */
html body.cases-visual-v2 #navMainGroup.nav-main-group:not(.pactum-scrollable) {
  overflow: visible !important;
}