/* --- START: NAVIGRO BLUE DARK THEME (TRACCAR 6.15) --- */
html.traccar-navigro-dark {
  color-scheme: dark;
  --navigro-bg: #0b2437;
  --navigro-surface: #0b2437;
  --navigro-surface-soft: #102a3f;
  --navigro-surface-hover: #172f41;
  --navigro-glass: rgba(11, 36, 55, 0.88);
  --navigro-glass-strong: rgba(11, 36, 55, 0.94);
  --navigro-glass-light: rgba(255, 255, 255, 0.08);
  --navigro-text: #e9e7e7;
  --navigro-text-strong: #ffffff;
  --navigro-text-muted: #cad3d7;
  --navigro-text-disabled: rgba(255, 255, 255, 0.38);
  --navigro-border: rgba(255, 255, 255, 0.16);
  --navigro-border-soft: rgba(255, 255, 255, 0.1);
  --navigro-border-strong: #435767;
  --navigro-accent: #1da1f2;
  --navigro-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}

html.traccar-navigro-dark,
html.traccar-navigro-dark body,
html.traccar-navigro-dark #root {
  background: var(--navigro-bg) !important;
  color: var(--navigro-text) !important;
}

html.traccar-navigro-dark body {
  scrollbar-color: var(--navigro-border-strong) var(--navigro-bg);
}

/* Solid application surfaces: pages, sidebars and navigation. */
html.traccar-navigro-dark .MuiPaper-root,
html.traccar-navigro-dark .MuiDrawer-paper,
html.traccar-navigro-dark .MuiAppBar-root,
html.traccar-navigro-dark .MuiBottomNavigation-root,
html.traccar-navigro-dark .MuiAccordion-root,
html.traccar-navigro-dark .MuiAccordionSummary-root,
html.traccar-navigro-dark .MuiAccordionDetails-root {
  background-color: var(--navigro-surface) !important;
  color: var(--navigro-text) !important;
  background-image: none !important;
}

/* Floating surfaces over the map and modal content. */
html.traccar-navigro-dark .MuiDialog-paper,
html.traccar-navigro-dark .MuiPopover-paper,
html.traccar-navigro-dark .MuiMenu-paper,
html.traccar-navigro-dark .MuiSnackbarContent-root,
html.traccar-navigro-dark .MuiCard-root.react-draggable,
html.traccar-navigro-dark .MuiModal-root .MuiPaper-root,
html.traccar-navigro-dark .MuiPopper-root > .MuiPaper-root {
  background: var(--navigro-glass) !important;
  color: var(--navigro-text) !important;
  border: 1px solid var(--navigro-border) !important;
  box-shadow: var(--navigro-shadow) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

html.traccar-navigro-dark .MuiBackdrop-root {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Typography. Explicit status and palette colors remain untouched. */
html.traccar-navigro-dark .MuiTypography-root:not([class*="MuiTypography-color"]),
html.traccar-navigro-dark .MuiListItemText-primary,
html.traccar-navigro-dark .MuiTableCell-root,
html.traccar-navigro-dark .MuiDialogTitle-root,
html.traccar-navigro-dark .MuiDialogContentText-root {
  color: var(--navigro-text) !important;
}

html.traccar-navigro-dark .MuiListItemText-secondary,
html.traccar-navigro-dark .MuiFormHelperText-root,
html.traccar-navigro-dark .MuiInputLabel-root,
html.traccar-navigro-dark .MuiFormLabel-root,
html.traccar-navigro-dark .MuiTableCell-head,
html.traccar-navigro-dark .MuiBreadcrumbs-root,
html.traccar-navigro-dark .Mui-disabled {
  color: var(--navigro-text-muted) !important;
}

/* Inputs use the same blue fill as the page with cool, subtle borders. */
html.traccar-navigro-dark .MuiInputBase-root,
html.traccar-navigro-dark .MuiOutlinedInput-root,
html.traccar-navigro-dark .MuiFilledInput-root,
html.traccar-navigro-dark .MuiSelect-select,
html.traccar-navigro-dark .MuiAutocomplete-inputRoot {
  background-color: var(--navigro-surface) !important;
  color: var(--navigro-text-strong) !important;
}

html.traccar-navigro-dark .MuiInputBase-input,
html.traccar-navigro-dark .MuiSelect-select,
html.traccar-navigro-dark .MuiAutocomplete-input,
html.traccar-navigro-dark textarea {
  color: var(--navigro-text-strong) !important;
  caret-color: var(--navigro-text-strong);
}

html.traccar-navigro-dark .MuiInputBase-input::placeholder,
html.traccar-navigro-dark textarea::placeholder {
  color: rgba(255, 255, 255, 0.52) !important;
  opacity: 1;
}

html.traccar-navigro-dark .MuiOutlinedInput-notchedOutline {
  border-color: var(--navigro-border) !important;
}

html.traccar-navigro-dark .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

html.traccar-navigro-dark .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--navigro-border-strong) !important;
}

/* Dividers, tables and expandable sections. */
html.traccar-navigro-dark .MuiDivider-root,
html.traccar-navigro-dark .MuiTableCell-root,
html.traccar-navigro-dark .MuiAccordion-root::before,
html.traccar-navigro-dark .MuiAccordionSummary-root,
html.traccar-navigro-dark .MuiAccordionDetails-root {
  border-color: var(--navigro-border-soft) !important;
}

html.traccar-navigro-dark .MuiTableRow-root:hover,
html.traccar-navigro-dark .MuiListItemButton-root:hover,
html.traccar-navigro-dark .MuiMenuItem-root:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

html.traccar-navigro-dark .MuiListItemButton-root.Mui-selected,
html.traccar-navigro-dark .MuiListItemButton-root.Mui-selected:hover,
html.traccar-navigro-dark .MuiMenuItem-root.Mui-selected,
html.traccar-navigro-dark .MuiMenuItem-root.Mui-selected:hover {
  background-color: rgba(255, 255, 255, 0.11) !important;
}

/* Buttons and navigation retain semantic success/error colors. */
html.traccar-navigro-dark .MuiButton-outlined:not([class*="MuiButton-outlinedError"]):not([class*="MuiButton-outlinedSuccess"]),
html.traccar-navigro-dark .MuiButton-text:not([class*="MuiButton-textError"]):not([class*="MuiButton-textSuccess"]) {
  color: var(--navigro-text) !important;
  border-color: var(--navigro-border-strong) !important;
}

html.traccar-navigro-dark .MuiIconButton-root:not([class*="MuiIconButton-color"]),
html.traccar-navigro-dark .MuiBottomNavigationAction-root,
html.traccar-navigro-dark .MuiTab-root {
  color: var(--navigro-text-muted) !important;
}

html.traccar-navigro-dark .MuiIconButton-root:hover,
html.traccar-navigro-dark .MuiBottomNavigationAction-root:hover,
html.traccar-navigro-dark .MuiTab-root:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--navigro-text-strong) !important;
}

html.traccar-navigro-dark .MuiBottomNavigationAction-root.Mui-selected,
html.traccar-navigro-dark .MuiTab-root.Mui-selected {
  color: var(--navigro-text-strong) !important;
}

html.traccar-navigro-dark .MuiTooltip-tooltip {
  background: rgba(14, 43, 71, 0.94) !important;
  color: var(--navigro-text) !important;
  border: 1px solid var(--navigro-border-soft);
  box-shadow: var(--navigro-shadow);
}

/* MapLibre and Mapbox controls follow the same transparent blue language. */
html.traccar-navigro-dark .maplibregl-ctrl-group,
html.traccar-navigro-dark .mapboxgl-ctrl-group,
html.traccar-navigro-dark .maplibregl-ctrl-geocoder,
html.traccar-navigro-dark .mapboxgl-ctrl-geocoder,
html.traccar-navigro-dark .maplibregl-style-list,
html.traccar-navigro-dark .mapboxgl-style-list {
  background: var(--navigro-glass-strong) !important;
  color: var(--navigro-text) !important;
  border: 1px solid var(--navigro-border) !important;
  box-shadow: var(--navigro-shadow) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

html.traccar-navigro-dark .maplibregl-ctrl-group button,
html.traccar-navigro-dark .mapboxgl-ctrl-group button,
html.traccar-navigro-dark .maplibregl-style-list button,
html.traccar-navigro-dark .mapboxgl-style-list button {
  background-color: transparent !important;
  color: var(--navigro-text) !important;
  border-color: var(--navigro-border-soft) !important;
}

html.traccar-navigro-dark .maplibregl-ctrl-group button:hover,
html.traccar-navigro-dark .mapboxgl-ctrl-group button:hover,
html.traccar-navigro-dark .maplibregl-style-list button:hover,
html.traccar-navigro-dark .mapboxgl-style-list button:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

html.traccar-navigro-dark .maplibregl-ctrl-geocoder input,
html.traccar-navigro-dark .mapboxgl-ctrl-geocoder input {
  color: var(--navigro-text-strong) !important;
}

html.traccar-navigro-dark .maplibregl-ctrl-geocoder input::placeholder,
html.traccar-navigro-dark .mapboxgl-ctrl-geocoder input::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

html.traccar-navigro-dark .maplibregl-ctrl-geocoder .suggestions,
html.traccar-navigro-dark .mapboxgl-ctrl-geocoder .suggestions,
html.traccar-navigro-dark .suggestions-wrapper .suggestions {
  background: var(--navigro-glass-strong) !important;
  color: var(--navigro-text) !important;
  border: 1px solid var(--navigro-border) !important;
}

html.traccar-navigro-dark .maplibregl-ctrl-geocoder .suggestions > li > a,
html.traccar-navigro-dark .mapboxgl-ctrl-geocoder .suggestions > li > a {
  color: var(--navigro-text) !important;
}

html.traccar-navigro-dark .maplibregl-ctrl-geocoder .suggestions > .active > a,
html.traccar-navigro-dark .maplibregl-ctrl-geocoder .suggestions > li > a:hover,
html.traccar-navigro-dark .mapboxgl-ctrl-geocoder .suggestions > .active > a,
html.traccar-navigro-dark .mapboxgl-ctrl-geocoder .suggestions > li > a:hover {
  background-color: var(--navigro-surface-hover) !important;
}

html.traccar-navigro-dark .maplibregl-popup-content,
html.traccar-navigro-dark .mapboxgl-popup-content {
  background: var(--navigro-glass-strong) !important;
  color: var(--navigro-text) !important;
  border: 1px solid var(--navigro-border) !important;
  box-shadow: var(--navigro-shadow) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

html.traccar-navigro-dark .maplibregl-popup-anchor-top .maplibregl-popup-tip,
html.traccar-navigro-dark .mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
  border-bottom-color: var(--navigro-glass-strong) !important;
}

html.traccar-navigro-dark .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
html.traccar-navigro-dark .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
  border-top-color: var(--navigro-glass-strong) !important;
}

html.traccar-navigro-dark .maplibregl-popup-anchor-left .maplibregl-popup-tip,
html.traccar-navigro-dark .mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
  border-right-color: var(--navigro-glass-strong) !important;
}

html.traccar-navigro-dark .maplibregl-popup-anchor-right .maplibregl-popup-tip,
html.traccar-navigro-dark .mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
  border-left-color: var(--navigro-glass-strong) !important;
}

html.traccar-navigro-dark *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html.traccar-navigro-dark *::-webkit-scrollbar-track {
  background: var(--navigro-bg);
}

html.traccar-navigro-dark *::-webkit-scrollbar-thumb {
  background: var(--navigro-border-strong);
  border: 2px solid var(--navigro-bg);
  border-radius: 8px;
}

html.traccar-navigro-dark *::-webkit-scrollbar-thumb:hover {
  background: #587084;
}
/* --- END: NAVIGRO BLUE DARK THEME (TRACCAR 6.15) --- */