/**
 * Accent France — charte ACCENT violet / lime (cahier des charges MF2, §2 "Design system commun").
 * Same tokens as the Accent France dashboards. Red is reserved for critical alerts
 * (accident, intervention) and never used for decoration.
 * Loaded by index.html when switch_accentfrance.sh is applied.
 */
:root {
  --af-violet: #3d0a4f;
  --af-violet-soft: #5a1270;
  --af-violet-dark: #22052e;
  --af-violet-deep: #170320;
  --af-lime: #b5dc2e;
  --af-lime-bright: #c8ef3f;
  --af-lime-dark: #9fc41f;
  --af-ink: #1f1030;
  --af-tint: #efe8f5;
  --af-bg: #f5f1f9;
  --af-white: #ffffff;
  --af-font: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Corner radius scale, same as the Accent France dashboards */
  --af-radius-card: 16px;
  --af-radius-control: 10px;
  --af-radius-pill: 999px;
}

/* Map tools menu button — brand colors */
body.accentfrance-theme {
  --map-tools-btn-bg: var(--af-violet);
  --map-tools-btn-bg-hover: var(--af-violet-soft);
  --map-tools-btn-border: transparent;
  /* Header user menu (see styles.css) */
  --user-menu-header-bg: radial-gradient(120% 90% at 20% 0%, var(--af-violet-soft) 0%, var(--af-violet) 45%, var(--af-violet-dark) 100%);
  --user-menu-accent: var(--af-lime);
  --user-menu-primary: var(--af-violet);
  --user-menu-primary-contrast: var(--af-white);
  --user-menu-footer-bg: var(--af-bg);
  --user-menu-radius: var(--af-radius-card);
  --user-menu-btn-radius: var(--af-radius-control);
  /* Generic brand tokens for pages that follow the active theme */
  --brand-primary: var(--af-violet);
  --brand-primary-dark: var(--af-violet-dark);
  --brand-accent: var(--af-lime);
  --brand-header-bg: radial-gradient(120% 90% at 20% 0%, var(--af-violet-soft) 0%, var(--af-violet) 45%, var(--af-violet-dark) 100%);
  --brand-focus-ring: rgba(90, 18, 112, 0.15);
  --brand-radius-card: var(--af-radius-card);
  --brand-radius-control: var(--af-radius-control);
}

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

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


body.accentfrance-theme,
.accentfrance-theme {
  background-color: var(--af-bg);
}

body.accentfrance-theme .main-header,
.accentfrance-theme .main-header {
  background-color: var(--af-violet) !important;
  border-bottom: 3px solid var(--af-lime);
}

body.accentfrance-theme .main-header .logo,
body.accentfrance-theme .main-header .navbar,
.accentfrance-theme .main-header .logo,
.accentfrance-theme .main-header .navbar {
  background-color: var(--af-violet) !important;
}

body.accentfrance-theme .main-header .logo .logo-lg,
body.accentfrance-theme .main-header .logo .logo-mini,
.accentfrance-theme .main-header .logo .logo-lg,
.accentfrance-theme .main-header .logo .logo-mini {
  color: var(--af-white) !important;
  font-weight: 700;
}

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

body.accentfrance-theme .sidebar-menu,
.accentfrance-theme .sidebar-menu {
  background-color: var(--af-violet-dark) !important;
  background-image: none !important;
}

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

body.accentfrance-theme .sidebar-menu > li.active > a,
body.accentfrance-theme .sidebar-menu > li.menu-open > a,
body.accentfrance-theme .sidebar-menu > li:hover > a,
.accentfrance-theme .sidebar-menu > li.active > a,
.accentfrance-theme .sidebar-menu > li.menu-open > a,
.accentfrance-theme .sidebar-menu > li:hover > a {
  background-color: rgba(255, 255, 255, 0.12) !important;
  background-image: none !important;
  border-left-color: var(--af-lime) !important;
  color: #ffffff !important;
}

/* Submenu section title — solid bar above expanded items */
body.accentfrance-theme .sidebar-menu > li.treeview.menu-open > a,
body.accentfrance-theme .sidebar-menu > li.treeview.active > a,
.accentfrance-theme .sidebar-menu > li.treeview.menu-open > a,
.accentfrance-theme .sidebar-menu > li.treeview.active > a,
body.skin-blue .accentfrance-theme .sidebar-menu > li.treeview.menu-open > a,
body.skin-blue .accentfrance-theme .sidebar-menu > li.treeview.active > a {
  background-color: var(--af-violet-deep) !important;
  background-image: none !important;
  color: #ffffff !important;
}

body.accentfrance-theme .sidebar-menu > li.treeview.menu-open,
body.accentfrance-theme .sidebar-menu > li.treeview.active,
.accentfrance-theme .sidebar-menu > li.treeview.menu-open,
.accentfrance-theme .sidebar-menu > li.treeview.active {
  background-color: var(--af-violet-deep) !important;
}

body.accentfrance-theme .sidebar-menu > li > .treeview-menu,
.accentfrance-theme .sidebar-menu > li > .treeview-menu {
  background-color: var(--af-violet-deep) !important;
  background-image: none !important;
}

body.accentfrance-theme .treeview-menu > li > a,
body.accentfrance-theme .treeview-menu > li > a > span,
.accentfrance-theme .treeview-menu > li > a,
.accentfrance-theme .treeview-menu > li > a > span {
  color: #ffffff !important;
  opacity: 1 !important;
}

body.accentfrance-theme .sidebar-menu .treeview-menu > li.active > a,
body.accentfrance-theme .sidebar-menu .treeview-menu > li > a:hover,
body.accentfrance-theme .treeview-menu > li.active > a,
body.accentfrance-theme .treeview-menu > li > a:hover,
.accentfrance-theme .sidebar-menu .treeview-menu > li.active > a,
.accentfrance-theme .sidebar-menu .treeview-menu > li > a:hover,
.accentfrance-theme .treeview-menu > li.active > a,
.accentfrance-theme .treeview-menu > li > a:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--af-white) !important;
}

body.accentfrance-theme .content-wrapper,
.accentfrance-theme .content-wrapper {
  background-color: var(--af-bg) !important;
}

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

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

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

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

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

body.accentfrance-theme.skin-blue .sidebar a,
body.skin-blue .accentfrance-theme .sidebar a {
  color: #ffffff !important;
  opacity: 1 !important;
}

body.accentfrance-theme.skin-blue .treeview-menu > li > a,
body.accentfrance-theme.skin-blue .treeview-menu > li > a > span,
body.skin-blue .accentfrance-theme .treeview-menu > li > a,
body.skin-blue .accentfrance-theme .treeview-menu > li > a > span {
  color: #ffffff !important;
  opacity: 1 !important;
}

body.accentfrance-theme.skin-blue .treeview-menu > li.active > a,
body.accentfrance-theme.skin-blue .treeview-menu > li > a:hover,
body.skin-blue .accentfrance-theme .treeview-menu > li.active > a,
body.skin-blue .accentfrance-theme .treeview-menu > li > a:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--af-white) !important;
}

body.accentfrance-theme .box.box-primary {
  border-top-color: var(--af-violet) !important;
}

body.accentfrance-theme .btn-primary {
  background-color: var(--af-violet) !important;
  border-color: var(--af-violet-dark) !important;
  color: var(--af-white) !important;
}

body.accentfrance-theme .btn-primary:hover,
body.accentfrance-theme .btn-primary:focus,
body.accentfrance-theme .btn-primary:active {
  background-color: var(--af-violet-soft) !important;
  border-color: var(--af-violet) !important;
}

/* Positive / search actions: lime with dark text (white on lime is unreadable). */
body.accentfrance-theme .btn-success {
  background-color: var(--af-lime) !important;
  border-color: var(--af-lime-dark) !important;
  color: var(--af-ink) !important;
}

body.accentfrance-theme .btn-success:hover,
body.accentfrance-theme .btn-success:focus,
body.accentfrance-theme .btn-success:active {
  background-color: var(--af-lime-bright) !important;
  border-color: var(--af-lime) !important;
  color: var(--af-ink) !important;
}

body.accentfrance-theme .btn-info {
  background-color: var(--af-violet-soft) !important;
  border-color: var(--af-violet) !important;
  color: var(--af-white) !important;
}

body.accentfrance-theme .btn-info:hover,
body.accentfrance-theme .btn-info:focus {
  background-color: var(--af-violet) !important;
}

/* AdminLTE / Bootstrap accents (default #3c8dbc blue) */
body.accentfrance-theme .form-control:focus {
  border-color: var(--af-violet-soft) !important;
  box-shadow: 0 0 0 2px rgba(90, 18, 112, 0.15) !important;
}

body.accentfrance-theme .label-primary,
body.accentfrance-theme .bg-light-blue,
body.accentfrance-theme .progress-bar {
  background-color: var(--af-violet) !important;
}

body.accentfrance-theme .nav-pills > li.active > a,
body.accentfrance-theme .nav-pills > li.active > a:hover {
  border-top-color: var(--af-lime) !important;
  color: var(--af-violet) !important;
}

body.accentfrance-theme input[type='checkbox'],
body.accentfrance-theme input[type='radio'] {
  accent-color: var(--af-violet);
}

/* Date range picker (ngx-daterangepicker-material) */
body.accentfrance-theme .md-drppicker td.active,
body.accentfrance-theme .md-drppicker td.active:hover,
body.accentfrance-theme .md-drppicker .ranges ul li button.active,
body.accentfrance-theme .md-drppicker .btn,
body.accentfrance-theme .md-drppicker .btn:focus,
body.accentfrance-theme .md-drppicker .btn:hover {
  background-color: var(--af-violet) !important;
  color: var(--af-white) !important;
}

body.accentfrance-theme .md-drppicker td.in-range {
  background-color: var(--af-tint) !important;
}

body.accentfrance-theme .nav-tabs-custom > .nav-tabs > li.active {
  border-top-color: var(--af-lime) !important;
}

body.accentfrance-theme .pagination > .active > a {
  background-color: var(--af-violet) !important;
  border-color: var(--af-violet) !important;
}

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

/* Collapsed sidebar flyout — title for leaf items and parents */
body.accentfrance-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right-container),
body.skin-blue .accentfrance-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right-container),
.accentfrance-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right-container) {
  background-color: var(--af-violet-dark) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

body.accentfrance-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu,
body.skin-blue .accentfrance-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu,
.accentfrance-theme.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
  background-color: var(--af-violet-deep) !important;
  background-image: none !important;
}

body.accentfrance-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.accentfrance-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.accentfrance-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.accentfrance-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: var(--af-bg) !important;
}

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

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

body.accentfrance-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: var(--af-bg) !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.accentfrance-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.accentfrance-theme router-outlet + * {
  width: 100% !important;
  box-sizing: border-box !important;
}

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

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

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

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

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

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

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

body.accentfrance-theme .content-wrapper.app-shell-content--map .app-map-backdrop .map-tools-menu-hamburger:hover,
body.accentfrance-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.accentfrance-theme .content-wrapper.app-shell-content--map .app-map-backdrop .leaflet-top,
body.accentfrance-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.accentfrance-theme .track-player-modal-overlay #trackPlayerMap .leaflet-top,
body.accentfrance-theme .track-player-modal-overlay .leaflet-top {
  top: 10px !important;
}




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

body.accentfrance-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell:not(.afs-shell--video-active) .afs-shell__panel,
body.accentfrance-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.accentfrance-theme .content-wrapper.app-shell-content--map > .content.app-page-layer .track-player-modal-overlay,
body.accentfrance-theme .content-wrapper.app-shell-content--map > .content.app-page-layer .track-player-modal-overlay * {
  pointer-events: auto !important;
}

body.afs-track-player-open.accentfrance-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.accentfrance-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.accentfrance-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map .save_path,
body.accentfrance-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map .rt-vehicle-hud,
body.accentfrance-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map .rt-vehicle-hud *,
body.accentfrance-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map .leaflet-bottom,
body.accentfrance-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map .leaflet-top,
body.accentfrance-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map button,
body.accentfrance-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map a[href] {
  pointer-events: auto !important;
}

body.accentfrance-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(760px, calc(100% - 24px)) !important;
  max-width: calc(100% - 24px) !important;
  z-index: 900 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(61, 10, 79, 0.16) !important;
  border-radius: var(--af-radius-card) !important;
  box-shadow: 0 12px 32px rgba(31, 16, 48, 0.18) !important;
  backdrop-filter: blur(8px) !important;
  /* Clip the violet / lime brand stripe to the rounded corners */
  overflow: hidden !important;
}

body.accentfrance-theme .main-header .navbar-nav > .user-menu > #ProgressBar {
  background: rgba(181, 220, 46, 0.22);
}

body.accentfrance-theme #Progress {
  background-color: var(--af-lime) !important;
}

body.accentfrance-theme .events-loading-spinner {
  border-color: rgba(61, 10, 79, 0.18);
  border-top-color: var(--af-lime);
}

/* ngx-loading overlay — lime on violet, not the default Angular red */
body.accentfrance-theme .ngx-wrapper .backdrop,
body.accentfrance-theme ngx-loading .backdrop {
  background-color: rgba(23, 3, 32, 0.45) !important;
}

body.accentfrance-theme .ngx-wrapper svg circle,
body.accentfrance-theme ngx-loading svg circle,
body.accentfrance-theme .ngx-wrapper .spinner-circle,
body.accentfrance-theme ngx-loading .sk-circle,
body.accentfrance-theme ngx-loading .sk-circle-swish {
  stroke: var(--af-lime) !important;
  border-color: var(--af-lime) !important;
}

body.accentfrance-theme .content-wrapper.app-shell-content--map app-map-shell .afs-shell__map .rt-vehicle-hud .rt-vehicle-hud__shell {
  background: transparent !important;
  backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Non-map pages: content must paint above any leftover map stacking context */
body.accentfrance-theme .content-wrapper.app-shell-content--padded {
  background: var(--af-bg) !important;
}

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

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

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

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

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

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

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

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

/* ══════════════════════════════════════════════════════════════════════
 * Typography — Open Sans (loaded in index.html)
 * Only sans-serif declarations are replaced; monospace / digital faces
 * (Consolas, Inconsolata, Auto Digital, dashboard eyebrows…) are kept.
 * ══════════════════════════════════════════════════════════════════════ */
body.accentfrance-theme {
  --jqx-font-family: var(--af-font);
  font-family: var(--af-font);
}

body.accentfrance-theme h1, body.accentfrance-theme h2, body.accentfrance-theme h3,
body.accentfrance-theme h4, body.accentfrance-theme h5, body.accentfrance-theme h6,
body.accentfrance-theme .h1, body.accentfrance-theme .h2, body.accentfrance-theme .h3,
body.accentfrance-theme .h4, body.accentfrance-theme .h5, body.accentfrance-theme .h6,
body.accentfrance-theme .main-header .logo,
body.accentfrance-theme .sidebar-menu,
body.accentfrance-theme .tooltip,
body.accentfrance-theme .popover,
body.accentfrance-theme .leaflet-container,
body.accentfrance-theme .md-drppicker,
body.accentfrance-theme mat-checkbox,
/* jqWidgets (Verdana by default) */
body.accentfrance-theme .jqx-widget,
body.accentfrance-theme .jqx-widget-content,
body.accentfrance-theme .jqx-fill-state-normal,
body.accentfrance-theme .jqx-gauge-label,
body.accentfrance-theme .jqx-gauge-caption,
body.accentfrance-theme .jqx-knob-label,
body.accentfrance-theme .jqx-chart-axis-text,
body.accentfrance-theme .jqx-chart-label-text,
body.accentfrance-theme .jqx-chart-tooltip-text,
body.accentfrance-theme .jqx-chart-legend-text,
body.accentfrance-theme .jqx-chart-axis-description,
body.accentfrance-theme .jqx-chart-title-text,
body.accentfrance-theme .jqx-chart-title-description,
body.accentfrance-theme .jqx-validator-hint,
body.accentfrance-theme .jqx-switchbutton-label,
body.accentfrance-theme .jqx-treemap-rectangle-parent,
body.accentfrance-theme .jqx-bar-gauge-tooltip,
body.accentfrance-theme .jqx-time-picker,
body.accentfrance-theme .jqx-split-layout,
/* Components that pin their own sans-serif font */
body.accentfrance-theme .daily-visit-report-container .daily-visit-report,
body.accentfrance-theme .dms-demo,
body.accentfrance-theme .adas-demo,
body.accentfrance-theme #rts,
body.accentfrance-theme .driver-history-container,
body.accentfrance-theme app-dashborad-fuels .button-1,
body.accentfrance-theme app-dashborad-fuels .button-2,
body.accentfrance-theme app-import-export p,
body.accentfrance-theme app-mileage-hour .content,
body.accentfrance-theme app-info-device div,
body.accentfrance-theme app-info-device form,
body.accentfrance-theme app-info-device input,
body.accentfrance-theme app-info-device select,
body.accentfrance-theme app-info-device textarea,
body.accentfrance-theme app-info-device label,
body.accentfrance-theme app-info-device p {
  font-family: var(--af-font) !important;
}

/* Corner radius: shared by all brands, see src/styles.css (--app-radius-*). */

/* ══════════════════════════════════════════════════════════════════════
 * Side spacing
 * AdminLTE here draws the collapsed sidebar 72px wide but only offsets the
 * content by 50px, so the sidebar covered 22px of the page gutter.
 * ══════════════════════════════════════════════════════════════════════ */
body.accentfrance-theme.sidebar-mini.sidebar-collapse .content-wrapper,
body.accentfrance-theme.sidebar-mini.sidebar-collapse .main-footer {
  margin-left: 72px !important;
}

/* Full-height non-map pages (events, scoring…): same gutter on the right as on the left */
body.accentfrance-theme .content-wrapper.app-shell-content:not(.app-shell-content--padded):not(.app-shell-content--map) > .content.app-page-layer {
  padding-right: var(--app-content-gutter, 15px) !important;
}