/**
 * Traci brand shell — header & sidebar #2C3543 (matches loader).
 */
:root {
  --traci-primary: #2C3543;
  --traci-primary-dark: #242b36;
  --traci-submenu: #1e242d;
  --traci-accent: #5c6b7f;
  --traci-sidebar-width: 210px;
  --traci-sidebar-mini-width: 68px;
}

/* Map tools menu button — brand colors */
body.traci-theme {
  --map-tools-btn-bg: var(--traci-primary);
  --map-tools-btn-bg-hover: var(--traci-primary-dark);
  --map-tools-btn-border: transparent;
  /* Header user menu (see styles.css) */
  --user-menu-header-bg: var(--traci-primary);
  --user-menu-accent: var(--traci-accent);
  --user-menu-primary: var(--traci-primary);
  --user-menu-primary-contrast: #ffffff;
  /* Generic brand tokens for pages that follow the active theme */
  --brand-primary: var(--traci-primary);
  --brand-primary-dark: var(--traci-primary-dark);
  --brand-accent: var(--traci-accent);
  --brand-header-bg: var(--traci-primary);
  --brand-focus-ring: rgba(44, 53, 67, 0.15);
}


/* ── Sidebar shell: outer .main-sidebar matches inner .sidebar ─────────── */
body.traci-theme .main-sidebar,
body.traci-theme .left-side {
  width: var(--traci-sidebar-width) !important;
  overflow-x: visible !important;
  overflow-y: auto !important;
  /* Below main-header/logo so TR is not covered by the sidebar top pad */
  z-index: 1030 !important;
}

body.traci-theme .main-header {
  z-index: 1040 !important;
}

body.traci-theme .main-header .logo {
  z-index: 1041 !important;
  position: relative;
}

body.traci-theme .main-sidebar > .sidebar {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

body.traci-theme .sidebar-menu {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.traci-theme .sidebar-menu > li {
  width: 100%;
}

body.traci-theme .sidebar-menu > li > a {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 8px 8px 12px !important;
}

body.traci-theme .sidebar-menu .treeview-menu > li > a {
  padding: 6px 8px 6px 16px !important;
}

body.traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  height: 46px !important;
}

body.traci-theme .sidebar-menu > li > .treeview-menu {
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* ── Collapsed sidebar rail (mini mode) ────────────────────────────────────
   Same mechanism as the Accent France sidebar: the whole row lights up and a
   3px accent bar marks it on the left edge. Every row carries that border in
   transparent, so the icon never shifts when a row becomes active. Sizes are
   roomier here: a wider rail, taller rows and centred icons. */
@media (min-width: 768px) {
  body.traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu {
    padding: 8px 0 !important;
  }

  body.traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li {
    margin: 2px 0 !important;
  }

  body.traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li > a,
  body.skin-blue .traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
    border-left: 3px solid transparent !important;
    background-color: transparent !important;
  }

  body.traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a,
  body.traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li.active > a,
  body.traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li.menu-open > a,
  body.traci-theme.skin-blue.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a,
  body.traci-theme.skin-blue.sidebar-mini.sidebar-collapse .sidebar-menu > li.active > a,
  body.skin-blue .traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li.active > a {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-left-color: color-mix(in srgb, var(--traci-accent) 55%, #ffffff) !important;
  }

  /* Icons: one size, centred in the rail (the border is part of the row box) */
  body.traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .fa,
  body.traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .glyphicon,
  body.traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .ion {
    width: auto !important;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  /* Flyout label / submenu line up with the taller rows */
  body.traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right-container),
  body.skin-blue .traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right-container) {
    z-index: 1041 !important;
    min-height: 46px !important;
    padding: 11px 14px !important;
  }

  body.traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu,
  body.skin-blue .traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
    top: 46px !important;
  }
}

/* ── Collapsed sidebar flyout (mini mode): no gap between label and submenu ─ */
@media (min-width: 768px) {
  body.traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li {
    position: relative !important;
    overflow: visible !important;
  }

  body.traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right-container,
  body.traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container {
    display: none !important;
  }

  /* Flyout title for every top-level item (with or without submenu) */
  body.traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right-container),
  body.skin-blue .traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right-container) {
    display: block !important;
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    width: var(--traci-sidebar-width) !important;
    min-height: 40px !important;
    line-height: 24px !important;
    z-index: 1041 !important;
    background-color: var(--traci-primary) !important;
    color: #ffffff !important;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    opacity: 1 !important;
  }

  /* Keep title flush with submenu when children exist */
  body.traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover:has(> .treeview-menu) > a > span:not(.pull-right-container),
  body.skin-blue .traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover:has(> .treeview-menu) > a > span:not(.pull-right-container) {
    border-bottom-right-radius: 0 !important;
  }

  /* Overlap sidebar edge so the cursor can reach the flyout without losing :hover */
  body.traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right-container)::before {
    content: '' !important;
    position: absolute !important;
    left: -12px !important;
    top: 0 !important;
    width: 12px !important;
    height: 100% !important;
  }

  body.traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu,
  body.skin-blue .traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
    display: block !important;
    position: absolute !important;
    left: 100% !important;
    top: 40px !important;
    width: var(--traci-sidebar-width) !important;
    z-index: 1040 !important;
    background-color: var(--traci-submenu) !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    border-top: 0 !important;
    border-bottom-right-radius: 4px !important;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25) !important;
  }

  /* Bridge vertical gap between label row and submenu items */
  body.traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu::before {
    content: '' !important;
    position: absolute !important;
    top: -8px !important;
    left: -12px !important;
    right: 0 !important;
    height: 8px !important;
    background: transparent !important;
  }

  body.traci-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover::after {
    content: '' !important;
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    width: var(--traci-sidebar-width) !important;
    bottom: auto !important;
    height: 100% !important;
    min-height: 40px !important;
    z-index: 1038 !important;
    pointer-events: none !important;
  }
}

@media (min-width: 768px) {
  body.traci-theme .main-header .logo {
    width: var(--traci-sidebar-width) !important;
  }

  body.traci-theme .main-header .navbar {
    margin-left: var(--traci-sidebar-width) !important;
  }

  body.traci-theme .content-wrapper,
  body.traci-theme .right-side,
  body.traci-theme .main-footer {
    margin-left: var(--traci-sidebar-width) !important;
  }

  body.traci-theme.sidebar-mini.sidebar-collapse .main-sidebar {
    width: var(--traci-sidebar-mini-width) !important;
    overflow: visible !important;
  }

  body.traci-theme.sidebar-mini.sidebar-collapse .main-header .logo {
    width: var(--traci-sidebar-mini-width) !important;
  }

  body.traci-theme.sidebar-mini.sidebar-collapse .main-header .navbar {
    margin-left: var(--traci-sidebar-mini-width) !important;
  }

  body.traci-theme.sidebar-mini.sidebar-collapse .content-wrapper,
  body.traci-theme.sidebar-mini.sidebar-collapse .right-side,
  body.traci-theme.sidebar-mini.sidebar-collapse .main-footer {
    margin-left: var(--traci-sidebar-mini-width) !important;
  }
}

body.traci-theme .main-header,
body.traci-theme .main-header .logo,
body.traci-theme.skin-blue .main-header .navbar,
body.traci-theme .skin-blue .main-header .navbar {
  background-color: var(--traci-primary) !important;
}

body.traci-theme.skin-blue .main-header .navbar .sidebar-toggle:hover,
body.traci-theme .skin-blue .main-header .navbar .sidebar-toggle:hover {
  background-color: rgba(0, 0, 0, 0.15) !important;
}

body.traci-theme.skin-blue .main-header .logo:hover,
body.traci-theme .skin-blue .main-header .logo:hover {
  background-color: var(--traci-primary-dark) !important;
}

body.traci-theme .main-sidebar,
body.traci-theme .left-side,
body.traci-theme .sidebar,
body.traci-theme.skin-blue .main-sidebar,
body.traci-theme.skin-blue .left-side,
body.traci-theme.skin-blue .sidebar,
body.skin-blue .traci-theme .main-sidebar,
body.skin-blue .traci-theme .left-side,
body.skin-blue .traci-theme .sidebar {
  background-color: var(--traci-primary) !important;
  background-image: none !important;
}

body.traci-theme .sidebar-menu,
body.traci-theme.skin-blue .sidebar-menu,
body.skin-blue .traci-theme .sidebar-menu {
  background-color: var(--traci-primary) !important;
  background-image: none !important;
}

body.traci-theme .sidebar-menu > li > a,
body.traci-theme .sidebar-menu > li > a > span,
body.traci-theme.skin-blue .sidebar-menu > li > a,
body.skin-blue .traci-theme .sidebar-menu > li > a {
  color: #ffffff !important;
  opacity: 1 !important;
  border-left: 3px solid transparent;
}

body.traci-theme .sidebar-menu > li:hover > a,
body.traci-theme .sidebar-menu > li.active > a,
body.traci-theme .sidebar-menu > li.menu-open > a,
body.traci-theme.skin-blue .sidebar-menu > li:hover > a,
body.traci-theme.skin-blue .sidebar-menu > li.active > a,
body.traci-theme.skin-blue .sidebar-menu > li.menu-open > a,
body.skin-blue .traci-theme .sidebar-menu > li:hover > a,
body.skin-blue .traci-theme .sidebar-menu > li.active > a,
body.skin-blue .traci-theme .sidebar-menu > li.menu-open > a {
  background-color: rgba(255, 255, 255, 0.08) !important;
  background-image: none !important;
  border-left-color: var(--traci-accent) !important;
  color: #ffffff !important;
}

body.traci-theme .sidebar-menu > li.treeview.menu-open > a,
body.traci-theme .sidebar-menu > li.treeview.active > a,
body.traci-theme.skin-blue .sidebar-menu > li.treeview.menu-open > a,
body.traci-theme.skin-blue .sidebar-menu > li.treeview.active > a,
body.skin-blue .traci-theme .sidebar-menu > li.treeview.menu-open > a,
body.skin-blue .traci-theme .sidebar-menu > li.treeview.active > a {
  background-color: var(--traci-submenu) !important;
  color: #ffffff !important;
}

body.traci-theme .sidebar-menu > li.treeview.menu-open,
body.traci-theme .sidebar-menu > li.treeview.active,
body.skin-blue .traci-theme .sidebar-menu > li.treeview.menu-open,
body.skin-blue .traci-theme .sidebar-menu > li.treeview.active {
  background-color: var(--traci-submenu) !important;
}

body.traci-theme .sidebar-menu > li > .treeview-menu,
body.traci-theme.skin-blue .sidebar-menu > li > .treeview-menu,
body.skin-blue .traci-theme .sidebar-menu > li > .treeview-menu {
  background-color: var(--traci-submenu) !important;
  background-image: none !important;
}

body.traci-theme .treeview-menu > li > a,
body.traci-theme .treeview-menu > li > a > span,
body.skin-blue .traci-theme .treeview-menu > li > a {
  color: rgba(255, 255, 255, 0.85) !important;
  opacity: 1 !important;
}

body.traci-theme .sidebar-menu .treeview-menu > li.active > a,
body.traci-theme .sidebar-menu .treeview-menu > li > a:hover,
body.skin-blue .traci-theme .sidebar-menu .treeview-menu > li.active > a,
body.skin-blue .traci-theme .sidebar-menu .treeview-menu > li > a:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

body.traci-theme.skin-blue .sidebar a,
body.skin-blue .traci-theme .sidebar a {
  color: rgba(255, 255, 255, 0.85) !important;
  opacity: 1 !important;
}

body.traci-theme .header-lang__badge {
  background: var(--traci-primary) !important;
}

body.traci-theme .header-lang__menu > li.is-active .header-lang__badge {
  background: var(--traci-primary-dark) !important;
}

body.traci-theme .header-lang__check {
  color: var(--traci-primary) !important;
}

/* User menu card header — match navbar / sidebar theme (not AdminLTE blue) */
body.traci-theme.skin-blue .main-header li.user-header,
body.traci-theme .main-header li.user-header,
body.traci-theme .navbar-nav > .user-menu > .dropdown-menu > .user-header,
body.traci-theme .navbar-nav > .user-menu > .dropdown-menu > li.user-header {
  background-color: var(--traci-primary) !important;
  background-image: none !important;
}

body.traci-theme .content-wrapper > .content-header {
  flex: 0 0 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

body.traci-theme .content-wrapper > .content {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/*
 * Fill the viewport with body zoom 0.95.
 * AdminLTE already adds padding-top: 50px for the fixed header (border-box),
 * so do NOT also subtract 50px from 100vh — that left a white band at the bottom.
 */
body.traci-theme.fixed .content-wrapper {
  min-height: calc(100vh / 0.95) !important;
  height: calc(100vh / 0.95) !important;
  max-height: calc(100vh / 0.95) !important;
  box-sizing: border-box !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Non-map pages: classic scrollable AdminLTE content (do not use map flex shell) */
body.traci-theme.fixed .content-wrapper.app-shell-content--padded {
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: calc(100vh / 0.95) !important;
  max-height: calc(100vh / 0.95) !important;
  min-height: calc(100vh / 0.95) !important;
  background: #f2f2f2 !important;
}

body.traci-theme.fixed .content-wrapper > .content-header {
  flex: 0 0 auto;
}

body.traci-theme.fixed .content-wrapper.app-shell-content--padded > .content-header {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.traci-theme.fixed .content-wrapper > .content {
  flex: 1 1 auto;
  min-height: 0 !important;
  height: auto !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.traci-theme.fixed .content-wrapper.app-shell-content--padded > .content.app-page-layer {
  display: block !important;
  flex: none !important;
  height: auto !important;
  min-height: calc(100vh / 0.95 - 60px) !important;
  max-height: none !important;
  overflow: visible !important;
  padding: var(--app-content-gutter-top, 15px) 15px 24px var(--app-content-gutter, 15px) !important;
  margin: 0 !important;
  background: #f2f2f2 !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 5 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* router-outlet is a zero-size sibling of the routed view at every nesting level */
body.traci-theme router-outlet {
  display: none !important;
  flex: 0 0 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.traci-theme router-outlet + * {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Map / alert shell: stretch routed views to full content height */
body.traci-theme .content-wrapper.app-shell-content:not(.app-shell-content--padded) > .content.app-page-layer {
  padding-left: var(--app-content-gutter, 15px) !important;
  padding-top: var(--app-content-gutter-top, 15px) !important;
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.traci-theme .content-wrapper.app-shell-content:not(.app-shell-content--padded) router-outlet + * {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
}

body.traci-theme section.content {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Map pages: full-height flex shell, no inset padding */
body.traci-theme .content-wrapper.app-shell-content--map section.content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: var(--app-content-gutter-top, 15px) 0 0 var(--app-content-gutter, 15px) !important;
  margin: 0 !important;
}

body.traci-theme app-map-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
}

body.traci-theme app-map-shell .afs-shell__panel {
  pointer-events: auto !important;
  z-index: 10 !important;
}

body.traci-theme app-map-shell .afs-shell__panel-body .box,
body.traci-theme app-map-shell .afs-shell__panel-body .datatable-container-col {
  width: 100% !important;
  background: #fff !important;
}

/* ── Persistent map backdrop (realtime / historical only) ─────────────── */
body.traci-theme .content-wrapper.app-shell-content {
  position: relative !important;
  overflow: hidden;
}

body.traci-theme .content-wrapper.app-shell-content--map .app-map-backdrop {
  position: absolute;
  inset: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: auto;
  overflow: visible;
  pointer-events: auto;
}

body.traci-theme .content-wrapper.app-shell-content--map .app-map-backdrop app-leaflet,
body.traci-theme .content-wrapper.app-shell-content--map .app-map-backdrop .app-content {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  position: relative !important;
}

body.traci-theme .content-wrapper.app-shell-content--map .app-map-backdrop #global-map,
body.traci-theme .content-wrapper.app-shell-content--map .app-map-backdrop .leaflet-fullscreen-on,
body.traci-theme .content-wrapper.app-shell-content--map .app-map-backdrop .leaflet-pseudo-fullscreen {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 0 !important;
  border: 0 !important;
}

/* Map tools must escape the backdrop stacking context (page layer is z-index 1). */
body.traci-theme .content-wrapper.app-shell-content--map .app-map-backdrop .map-tools-menu {
  position: fixed !important;
  top: auto !important;
  bottom: 28px !important;
  right: 19px !important;
  z-index: 2000 !important;
  pointer-events: auto !important;

}

body.traci-theme .content-wrapper.app-shell-content--map .app-map-backdrop .map-tools-menu,
body.traci-theme .content-wrapper.app-shell-content--map .app-map-backdrop .map-tools-menu * {
  pointer-events: auto !important;
}

/* MAP_TOOLS_BTN_THEME */
body.traci-theme .content-wrapper.app-shell-content--map .app-map-backdrop .map-tools-menu-panel {
  top: auto !important;
  bottom: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 2001 !important;
}

body.traci-theme .content-wrapper.app-shell-content--map .app-map-backdrop .map-tools-menu-hamburger {
  width: 56px !important;
  height: 56px !important;
  font-size: 22px !important;
  border-radius: 10px !important;
  background: var(--map-tools-btn-bg) !important;
  border-color: var(--map-tools-btn-border, transparent) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}

body.traci-theme .content-wrapper.app-shell-content--map .app-map-backdrop .map-tools-menu-hamburger i {
  color: #ffffff !important;
}

body.traci-theme .content-wrapper.app-shell-content--map .app-map-backdrop .map-tools-menu-hamburger:hover,
body.traci-theme .content-wrapper.app-shell-content--map .app-map-backdrop .map-tools-menu-root[open] > .map-tools-menu-hamburger {
  background: var(--map-tools-btn-bg-hover) !important;
  color: #ffffff !important;
}

/* Zoom controls: clear fixed header — global/shell map only (not simulation modal) */
body.traci-theme .content-wrapper.app-shell-content--map .app-map-backdrop .leaflet-top,
body.traci-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map .leaflet-top {
  top: 62px !important;
}

/* Simulation modal map: keep default Leaflet zoom placement */
body.traci-theme .track-player-modal-overlay #trackPlayerMap .leaflet-top,
body.traci-theme .track-player-modal-overlay .leaflet-top {
  top: 10px !important;
}




body.traci-theme .content-wrapper.app-shell-content--map > .content.app-page-layer {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
  pointer-events: none;
}

/* Routed shells pass clicks through to the global map; panel stays interactive */
body.traci-theme .content-wrapper.app-shell-content--map > .content.app-page-layer > *,
body.traci-theme .content-wrapper.app-shell-content--map > .content.app-page-layer > * * {
  pointer-events: none !important;
}

body.traci-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell:not(.afs-shell--video-active) .afs-shell__panel,
body.traci-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell:not(.afs-shell--video-active) .afs-shell__panel * {
  pointer-events: auto !important;
}

/*
 * Track/simulation modals sit outside the shell panel but under the page layer.
 * Must beat: .app-page-layer > * * { pointer-events: none !important }
 */
body.traci-theme .content-wrapper.app-shell-content--map > .content.app-page-layer .track-player-modal-overlay,
body.traci-theme .content-wrapper.app-shell-content--map > .content.app-page-layer .track-player-modal-overlay * {
  pointer-events: auto !important;
}

body.afs-track-player-open.traci-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell:not(.afs-shell--video-active) .afs-shell__panel,
body.afs-track-player-open.traci-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell:not(.afs-shell--video-active) .afs-shell__panel * {
  pointer-events: none !important;
}

/* Map-stage controls (save path, vehicle HUD carousel, leaflet overlays, …) over the backdrop */
body.traci-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map .save_path,
body.traci-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map .rt-vehicle-hud,
body.traci-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map .rt-vehicle-hud *,
body.traci-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map .leaflet-bottom,
body.traci-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map .leaflet-top,
body.traci-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map button,
body.traci-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map a[href] {
  pointer-events: auto !important;
}

body.traci-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map .map-container > .rt-vehicle-hud.historik-result-row-details:not(.detailsToRight):not(.detailsToTop) {
  position: absolute !important;
  top: auto !important;
  bottom: 8px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(560px, 45%) !important;
  max-width: calc(100% - 24px) !important;
  z-index: 900 !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(44, 53, 67, 0.22) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(8px) !important;
}

body.traci-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map .rt-vehicle-hud .rt-vehicle-hud__shell {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 4px !important;
}

/* Non-map pages: content must paint above any leftover map stacking context */
body.traci-theme .content-wrapper.app-shell-content--padded {
  background: #f2f2f2 !important;
}

body.traci-theme .content-wrapper.app-shell-content--padded router-outlet + *,
body.traci-theme .content-wrapper.app-shell-content--padded > .content.app-page-layer > *:not(router-outlet),
body.traci-theme .content-wrapper.app-shell-content--padded app-quick-report-generator {
  display: block !important;
  flex: none !important;
  width: 100% !important;
  min-height: 120px !important;
  height: auto !important;
  max-height: none !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 5 !important;
  overflow: visible !important;
}

body.traci-theme .content-wrapper.app-shell-content--padded > .content.app-page-layer > router-outlet {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
}

body.traci-theme .content-wrapper.app-shell-content--padded .box {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Map-shell map cell uses global backdrop on RT / historical */
body.traci-theme .app-shell-content--map app-map-shell .afs-shell__map {
  background: transparent !important;
  pointer-events: none !important;
}

body.traci-theme .app-shell-content--map app-map-shell .afs-shell__map app-leaflet {
  display: none !important;
}

body.traci-theme .app-shell-content--map app-map-shell .afs-shell {
  background: transparent !important;
}

body.traci-theme .app-shell-content--map app-map-shell,
body.traci-theme .app-shell-content--map app-map-shell .afs-shell {
  pointer-events: none !important;
}

/* Map panel card chrome — match header / sidebar theme (not default blue) */
body.traci-theme app-map-shell .afs-shell__chrome,
body.traci-theme .map-floating-panel__chrome {
  background: var(--traci-primary) !important;
  border-bottom: 1px solid var(--traci-primary-dark) !important;
  color: #fff !important;
}

body.traci-theme app-map-shell .afs-shell__title,
body.traci-theme app-map-shell .afs-shell__title span,
body.traci-theme app-map-shell .afs-shell__title i,
body.traci-theme .map-floating-panel__title,
body.traci-theme .map-floating-panel__title i {
  color: #fff !important;
}

body.traci-theme app-map-shell .afs-shell__icon-btn,
body.traci-theme app-map-shell .afs-shell__dock > summary,
body.traci-theme .map-floating-panel__icon-btn,
body.traci-theme .map-floating-panel__dock > summary {
  color: #fff !important;
}

body.traci-theme app-map-shell .afs-shell__icon-btn:hover,
body.traci-theme app-map-shell .afs-shell__dock > summary:hover,
body.traci-theme app-map-shell .afs-shell__dock-item:hover,
body.traci-theme app-map-shell .afs-shell__dock-item.is-active,
body.traci-theme .map-floating-panel__icon-btn:hover,
body.traci-theme .map-floating-panel__dock > summary:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
}