/**
 * Fleet brand shell — header & sidebar #11939b (matches loader).
 */
:root {
  --fleet-primary: #11939b;
  --fleet-primary-dark: #0d737a;
  --fleet-submenu: #0a5c63;
  --fleet-accent: #4db8c0;
  --fleet-sidebar-width: 210px;
  --fleet-sidebar-mini-width: 68px;
}

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


/* ── Sidebar shell: outer .main-sidebar matches inner .sidebar ─────────── */
body.fleet-theme .main-sidebar,
body.fleet-theme .left-side {
  width: var(--fleet-sidebar-width) !important;
  overflow-x: visible !important;
  overflow-y: auto !important;
  z-index: 1030 !important;
}

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

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

body.fleet-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.fleet-theme .sidebar-menu {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

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

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

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



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

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

  body.fleet-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right-container,
  body.fleet-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.fleet-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right-container),
  body.skin-blue .fleet-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(--fleet-sidebar-width) !important;
    min-height: 40px !important;
    line-height: 24px !important;
    z-index: 1041 !important;
    background-color: var(--fleet-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.fleet-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover:has(> .treeview-menu) > a > span:not(.pull-right-container),
  body.skin-blue .fleet-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.fleet-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.fleet-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu,
  body.skin-blue .fleet-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(--fleet-sidebar-width) !important;
    z-index: 1040 !important;
    background-color: var(--fleet-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.fleet-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.fleet-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover::after {
    content: '' !important;
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    width: var(--fleet-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.fleet-theme .main-header .logo {
    width: var(--fleet-sidebar-width) !important;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body.fleet-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.fleet-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.fleet-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.fleet-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.fleet-theme.fixed .content-wrapper > .content-header {
  flex: 0 0 auto;
}

body.fleet-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.fleet-theme.fixed .content-wrapper > .content {
  flex: 1 1 auto;
  min-height: 0 !important;
  height: auto !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.fleet-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.fleet-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.fleet-theme router-outlet + * {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Map / alert shell: stretch routed views to full content height */
body.fleet-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.fleet-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.fleet-theme section.content {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Map pages: full-height flex shell, no inset padding */
body.fleet-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.fleet-theme app-map-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
}

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

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

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

body.fleet-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.fleet-theme .content-wrapper.app-shell-content--map .app-map-backdrop app-leaflet,
body.fleet-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.fleet-theme .content-wrapper.app-shell-content--map .app-map-backdrop #global-map,
body.fleet-theme .content-wrapper.app-shell-content--map .app-map-backdrop .leaflet-fullscreen-on,
body.fleet-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.fleet-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.fleet-theme .content-wrapper.app-shell-content--map .app-map-backdrop .map-tools-menu,
body.fleet-theme .content-wrapper.app-shell-content--map .app-map-backdrop .map-tools-menu * {
  pointer-events: auto !important;
}

/* MAP_TOOLS_BTN_THEME */
body.fleet-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.fleet-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.fleet-theme .content-wrapper.app-shell-content--map .app-map-backdrop .map-tools-menu-hamburger i {
  color: #ffffff !important;
}

body.fleet-theme .content-wrapper.app-shell-content--map .app-map-backdrop .map-tools-menu-hamburger:hover,
body.fleet-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 (~50px) + breathing room */
body.fleet-theme .content-wrapper.app-shell-content--map .leaflet-top,
body.fleet-theme .content-wrapper.app-shell-content--map .app-map-backdrop .leaflet-top {
  top: 62px !important;
}




body.fleet-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.fleet-theme .content-wrapper.app-shell-content--map > .content.app-page-layer > *,
body.fleet-theme .content-wrapper.app-shell-content--map > .content.app-page-layer > * * {
  pointer-events: none !important;
}

body.fleet-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell:not(.afs-shell--video-active) .afs-shell__panel,
body.fleet-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 / affectation-calendar overlays sit outside the shell panel
 * but under the page layer.
 * Must beat: .app-page-layer > * * { pointer-events: none !important }
 */
body.fleet-theme .content-wrapper.app-shell-content--map > .content.app-page-layer .track-player-modal-overlay,
body.fleet-theme .content-wrapper.app-shell-content--map > .content.app-page-layer .track-player-modal-overlay *,
body.fleet-theme .content-wrapper.app-shell-content--map > .content.app-page-layer .assignments-modal-overlay,
body.fleet-theme .content-wrapper.app-shell-content--map > .content.app-page-layer .assignments-modal-overlay *,
body.fleet-theme .content-wrapper.app-shell-content--map > .content.app-page-layer .map-export-overlay,
body.fleet-theme .content-wrapper.app-shell-content--map > .content.app-page-layer .map-export-overlay *,
body.fleet-theme .content-wrapper.app-shell-content--map > .content.app-page-layer app-track-control,
body.fleet-theme .content-wrapper.app-shell-content--map > .content.app-page-layer app-track-control *,
body.fleet-theme .content-wrapper.app-shell-content--map > .content.app-page-layer #trackPlayerMap,
body.fleet-theme .content-wrapper.app-shell-content--map > .content.app-page-layer #trackPlayerMap *,
body.fleet-theme .content-wrapper.app-shell-content--map > .content.app-page-layer .modal,
body.fleet-theme .content-wrapper.app-shell-content--map > .content.app-page-layer .modal * {
  pointer-events: auto !important;
}

body.afs-assignments-calendar-open.fleet-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell:not(.afs-shell--video-active) .afs-shell__panel,
body.afs-assignments-calendar-open.fleet-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell:not(.afs-shell--video-active) .afs-shell__panel *,
body.afs-map-export-open.fleet-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell:not(.afs-shell--video-active) .afs-shell__panel,
body.afs-map-export-open.fleet-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.fleet-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map .save_path,
body.fleet-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map .rt-vehicle-hud,
body.fleet-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map .rt-vehicle-hud *,
body.fleet-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map .leaflet-bottom,
body.fleet-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map .leaflet-top,
body.fleet-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map button,
body.fleet-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map a[href] {
  pointer-events: auto !important;
}

body.fleet-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.fleet-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.fleet-theme .content-wrapper.app-shell-content--padded {
  background: #f2f2f2 !important;
}

body.fleet-theme .content-wrapper.app-shell-content--padded router-outlet + *,
body.fleet-theme .content-wrapper.app-shell-content--padded > .content.app-page-layer > *:not(router-outlet),
body.fleet-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.fleet-theme .content-wrapper.app-shell-content--padded > .content.app-page-layer > router-outlet {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
}

body.fleet-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.fleet-theme .app-shell-content--map app-map-shell .afs-shell__map {
  background: transparent !important;
  pointer-events: none !important;
}

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

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

body.fleet-theme .app-shell-content--map app-map-shell,
body.fleet-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.fleet-theme app-map-shell .afs-shell__chrome,
body.fleet-theme .map-floating-panel__chrome {
  background: var(--fleet-primary) !important;
  border-bottom: 1px solid var(--fleet-primary-dark) !important;
  color: #fff !important;
}

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

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

body.fleet-theme app-map-shell .afs-shell__icon-btn:hover,
body.fleet-theme app-map-shell .afs-shell__dock > summary:hover,
body.fleet-theme app-map-shell .afs-shell__dock-item:hover,
body.fleet-theme app-map-shell .afs-shell__dock-item.is-active,
body.fleet-theme .map-floating-panel__icon-btn:hover,
body.fleet-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;
}


/* ── Collapsed sidebar rail (mini mode) — same look as Accent France / Traci ──
   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. Roomier metrics: wider rail, 46px rows, centred icons. */
@media (min-width: 768px) {

  body.fleet-theme.sidebar-mini.sidebar-collapse .sidebar-menu {
    padding: 8px 0 !important;
  }

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

  body.fleet-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li > a,
  body.skin-blue .fleet-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 46px !important;
    padding: 0 !important;
    border-left: 3px solid transparent !important;
    background-color: transparent !important;
  }

  body.fleet-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a,
  body.fleet-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li.active > a,
  body.fleet-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li.menu-open > a,
  body.fleet-theme.skin-blue.sidebar-mini.sidebar-collapse .sidebar-menu > li.active > a,
  body.skin-blue .fleet-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(--brand-accent, #ffffff) 55%, #ffffff) !important;
  }

  /* Icons: one size, centred in the rail */
  body.fleet-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .fa,
  body.fleet-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .glyphicon,
  body.fleet-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.fleet-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right-container),
  body.skin-blue .fleet-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right-container) {
    min-height: 46px !important;
    padding: 11px 14px !important;
  }

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


/* Map export: lift backdrop above page-layer shell while dialog is open */
body.afs-map-export-open.fleet-theme .content-wrapper.app-shell-content--map > .app-map-backdrop {
  z-index: 50000 !important;
  pointer-events: auto !important;
}
body.afs-map-export-open.fleet-theme .content-wrapper.app-shell-content--map > .app-map-backdrop .map-export-overlay,
body.afs-map-export-open.fleet-theme .content-wrapper.app-shell-content--map > .app-map-backdrop .map-export-overlay * {
  pointer-events: auto !important;
}
body.afs-map-export-open.fleet-theme .content-wrapper.app-shell-content--map > .content.app-page-layer {
  pointer-events: none !important;
}