/* Shared InPlay V2 application shell.
   Intentionally narrow in scope: mobile tab bar + shell layering only.
   Page-specific visual redesigns stay in their own stylesheets for now. */

body.inplay-v2-shell {
  --ip-shell-accent: var(--ip-accent, #3be477);
  --ip-shell-nav-bg: rgba(5, 16, 10, .98);
  --ip-shell-nav-text: rgba(237, 246, 240, .72);
}

/* The tab bar should sit below toolbar/alert popovers. */
body.inplay-v2-shell .toolbar {
  z-index: 2300 !important;
}
body.inplay-v2-shell .dash-alerts-wrapper,
body.inplay-v2-shell .alerts-wrapper,
body.inplay-v2-shell .alerts-popover {
  z-index: 2310;
}

/* The desktop slideout must cover the fixed toolbar from the very top edge. */
@media (min-width: 769px) {
  body.inplay-v2-shell #sidebar .sb {
    z-index: 4000 !important;
  }

  body.inplay-v2-shell #sidebar .sb__backdrop {
    z-index: 3990 !important;
  }
}

@media (max-width: 768px) {
  body.inplay-v2-shell #mobile-bottombar {
    bottom: 6px !important;
    z-index: 2200 !important;
    background: var(--ip-shell-nav-bg) !important;
    border: 1px solid rgba(59, 228, 119, .10) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .38) !important;
  }

  body.inplay-v2-shell #mobile-bottombar .mb-item {
    background: transparent !important;
    border: 0 !important;
    color: var(--ip-shell-nav-text) !important;
  }

  body.inplay-v2-shell #mobile-bottombar .mb-item svg {
    width: 22px;
    height: 22px;
    fill: none !important;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body.inplay-v2-shell #mobile-bottombar .mb-item.active,
  body.inplay-v2-shell #mobile-bottombar .mb-item.inplay-v2-active {
    color: var(--ip-shell-accent) !important;
  }

  body.inplay-v2-shell #mobile-bottombar .mb-item span {
    color: inherit !important;
  }
}

@media (max-width: 768px) and (display-mode: standalone) {
  body.inplay-v2-shell #mobile-bottombar {
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
}

/* V2 slideout: mirror the primary tabbar naming and line-icon language. */
body.inplay-v2-shell #sidebar .sb__list a.inplay-v2-sidebar-link {
  display: flex;
  align-items: center;
  gap: 11px;
}
body.inplay-v2-shell #sidebar .sb__list a.inplay-v2-sidebar-link > svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
}
body.inplay-v2-shell #sidebar .sb__list li.active > a.inplay-v2-sidebar-link,
body.inplay-v2-shell #sidebar .sb__list a.inplay-v2-sidebar-link[aria-current="page"] {
  color: var(--ip-shell-accent) !important;
  background: rgba(59, 228, 119, .08);
}

/* Embedded V2 pages must have no application chrome at all. */
body.inplay-v2-shell.toolbar-hidden {
  padding-top: 0 !important;
}
body.inplay-v2-shell.toolbar-hidden .toolbar,
body.inplay-v2-shell.toolbar-hidden #mobile-bottombar,
body.inplay-v2-shell.toolbar-hidden #sidebar {
  display: none !important;
}