/* ========================================
   THÈME DARK ONYX SECURITY - TRACCAR
   ======================================== */

   :root {
    --onyx-black: #09090B;
    --onyx-dark-gray: #131313;
    --onyx-cyan: #53a9bb;
    --onyx-light-gray: #333333;
  }

/* ========================================
   GLOBAL STYLES
   ======================================== */

/* Force dark background */
body,
html,
#root {
  background-color: var(--onyx-black) !important;
  color: #ffffff !important;
}

/* ========================================
   LOGIN PAGE - CIBLAGE SPÉCIFIQUE
   ======================================== */

/* Login container */
.MuiPaper-root,
.MuiPaper-elevation,
.MuiPaper-rounded {
  background-color: var(--onyx-dark-gray) !important;
  color: #ffffff !important;
}

/* Login form */
.MuiBox-root {
  background-color: transparent !important;
}

/* Sidebar de login (partie gauche avec logo) - CIBLAGE PRÉCIS */
[class*="makeStyles-sidebar"],
[class*="LoginLayout-sidebar"],
[class*="-sidebar"],
div[class*="muiltr"][class*="sidebar"],
.MuiGrid-root[style*="background"] {
  background-color: var(--onyx-black) !important;
  background: var(--onyx-black) !important;
}

/* Login page SVG icons - Change to Onyx cyan */
.options .MuiSvgIcon-root {
  color: var(--onyx-cyan) !important;
  fill: var(--onyx-cyan) !important;
}

/* Supprimer TOUS les fonds bleus (violet, bleu marine, bleu Material Design) */
[style*="rgb(156, 39, 176)"],
[style*="#9c27b0"],
[style*="rgb(25, 118, 210)"],
[style*="#1976d2"],
[style*="rgb(33, 150, 243)"],
[style*="#2196F3"],
[style*="#2196f3"],
div[style*="background-color: rgb(156, 39, 176)"],
div[style*="background: rgb(156, 39, 176)"],
div[style*="background-color:#9c27b0"],
div[style*="background:#9c27b0"],
div[style*="background-color: rgb(25, 118, 210)"],
div[style*="background: rgb(25, 118, 210)"],
div[style*="background-color:#1976d2"],
div[style*="background:#1976d2"],
div[style*="background-color: rgb(33, 150, 243)"],
div[style*="background: rgb(33, 150, 243)"],
div[style*="background-color:#2196F3"],
div[style*="background:#2196F3"],
div[style*="background-color:#2196f3"],
div[style*="background:#2196f3"] {
  background-color: var(--onyx-black) !important;
  background: var(--onyx-black) !important;
}

/* Remplacer la couleur indigo MUI rgb(159, 168, 218) par le bleu Onyx */
[style*="rgb(159, 168, 218)"],
[style*="#9FA8DA"],
[style*="#9fa8da"],
div[style*="background-color: rgb(159, 168, 218)"],
div[style*="background: rgb(159, 168, 218)"],
div[style*="background-color:#9FA8DA"],
div[style*="background:#9FA8DA"],
div[style*="color: rgb(159, 168, 218)"],
div[style*="color:#9FA8DA"] {
  background-color: var(--onyx-cyan) !important;
  background: var(--onyx-cyan) !important;
  color: var(--onyx-cyan) !important;
}

/* ========================================
   BUTTONS
   ======================================== */

/* Primary buttons - Remplacer le violet par le cyan */
.MuiButton-containedPrimary,
.MuiButton-root.MuiButton-containedPrimary {
  background-color: var(--onyx-cyan) !important;
  color: #ffffff !important;
  border: none !important;
}

.MuiButton-containedPrimary:hover,
.MuiButton-root.MuiButton-containedPrimary:hover {
  background-color: var(--onyx-cyan) !important;
}

/* Secondary buttons */
.MuiButton-containedSecondary,
.MuiButton-root.MuiButton-containedSecondary {
  background-color: var(--onyx-light-gray) !important;
  color: #ffffff !important;
  border: none !important;
}

.MuiButton-containedSecondary:hover,
.MuiButton-root.MuiButton-containedSecondary:hover {
  background-color: var(--onyx-cyan) !important;
}

/* Supprimer toutes les couleurs violettes/pourpres */
.MuiButton-root[style*="rgb(156, 39, 176)"],
.MuiButton-root[style*="#9c27b0"],
[style*="rgb(156, 39, 176)"],
[style*="#9c27b0"] {
  background-color: var(--onyx-cyan) !important;
  color: #ffffff !important;
}

/* ========================================
   INPUTS & FORMS
   ======================================== */

/* Text fields */
.MuiTextField-root input,
.MuiOutlinedInput-root,
.MuiInputBase-root {
  color: #ffffff !important;
  background-color: var(--onyx-dark-gray) !important;
}

/* Input borders */
.MuiOutlinedInput-notchedOutline {
  border-color: var(--onyx-light-gray) !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--onyx-cyan) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--onyx-cyan) !important;
}

/* Labels */
.MuiInputLabel-root {
  color: #cccccc !important;
}

.MuiInputLabel-root.Mui-focused {
  color: var(--onyx-cyan) !important;
}

/* ========================================
   SIDEBAR & NAVIGATION
   ======================================== */

/* Sidebar Glassmorphism */
.muiltr-171v8oy-sidebar {
    background-color: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

/* Sidebar */
.MuiDrawer-paper {
  background-color: var(--onyx-dark-gray) !important;
  color: #ffffff !important;
}

/* App bar */
.MuiAppBar-root {
  background-color: var(--onyx-dark-gray) !important;
}

/* Menu items */
.MuiMenuItem-root {
  color: #ffffff !important;
}

.MuiMenuItem-root:hover {
  background-color: var(--onyx-light-gray) !important;
}

/* List items */
.MuiListItem-root {
  color: #ffffff !important;
}

.MuiListItem-root:hover {
  background-color: var(--onyx-light-gray) !important;
}

/* ========================================
   CARDS & PANELS
   ======================================== */

/* Cards */
.MuiCard-root {
  background-color: var(--onyx-dark-gray) !important;
  color: #ffffff !important;
}

/* Dialogs */
.MuiDialog-paper {
  background-color: var(--onyx-dark-gray) !important;
  color: #ffffff !important;
}

/* Popovers */
.MuiPopover-paper {
  background-color: var(--onyx-dark-gray) !important;
  color: #ffffff !important;
}

/* ========================================
   TABLES
   ======================================== */

/* Table */
.MuiTable-root {
  background-color: var(--onyx-dark-gray) !important;
}

/* Table head */
.MuiTableHead-root {
  background-color: var(--onyx-black) !important;
}

/* Table cells */
.MuiTableCell-root {
  color: #ffffff !important;
  border-color: var(--onyx-light-gray) !important;
}

/* Table rows hover */
.MuiTableRow-root:hover {
  background-color: var(--onyx-light-gray) !important;
}

/* ========================================
   LOGOS - GESTION MULTI-ÉCRAN
   ======================================== */

/* Masquer UNIQUEMENT le logo Traccar dans toutes les sidebars */
div[class*="sidebar"] img[src="/logo.svg"],
div[class*="sidebar"] img[src*="/logo.svg"],
.muiltr-b5ygvr-image {
    display: none !important;
}

/* Masquer UNIQUEMENT le logo Traccar dans la barre supérieure (pas les icônes) */
.MuiAppBar-root img[src="/logo.svg"],
.MuiAppBar-root img[src*="/logo.svg"],
.MuiToolbar-root img[src="/logo.svg"],
.MuiToolbar-root img[src*="/logo.svg"] {
    display: none !important;
}

/* --- LOGO 1 : PAGE D'AUTHENTIFICATION (VERTICAL - logo.svg) --- */
/* Cibler toutes les sidebars SAUF celle de la map */
div[class*="sidebar"]:not(.muiltr-1h0hyz5-sidebar)::before {
  content: '' !important;
  display: block !important;
  width: 240px !important;
  height: 120px !important;
  background-image: url('/logo.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: brightness(0) invert(1) !important;
  margin: 20px auto !important;
}

/* --- LOGO 2 : SIDEBAR DE LA MAP (HORIZONTAL - logo-gauche.png) --- */
.muiltr-1h0hyz5-sidebar::before {
  content: '' !important;
  display: block !important;
  width: 200px !important;
  height: 60px !important;
  background-image: url('/logo-gauche.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin: 20px auto !important;
}

/* --- LOGO 3 : BARRE DE NAVIGATION (HORIZONTAL) --- */
.MuiAppBar-root .MuiToolbar-root::before {
    content: '' !important;
    display: inline-block !important;
    width: 150px !important;
    height: 40px !important;
    background-image: url('/logo-gauche.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    margin-right: 20px !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Alternative : Cibler aussi le titre si le Toolbar ne fonctionne pas */
.muiltr-1dkxc8f-title::before {
    content: '' !important;
    display: inline-block !important;
    width: 150px !important;
    height: 40px !important;
    background-image: url('/logo-gauche.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    margin-right: 15px !important;
    vertical-align: middle !important;
}

/* ========================================
   MOBILE FOOTER - NAVIGATION BOTTOM
   ======================================== */

/* Footer background - Desktop ET Mobile */
.muiltr-15y2w92-footer,
.MuiBottomNavigation-root.muiltr-by705p {
  background-color: var(--onyx-light-gray) !important;
}

/* Icônes SVG du footer - blanches par défaut (CIBLAGE PRÉCIS) */
.MuiBottomNavigation-root button:not(.Mui-selected) svg,
.MuiBottomNavigation-root button:not(.Mui-selected) path {
  fill: #ffffff !important;
  color: #ffffff !important;
}

.muiltr-ucn45q.Mui-selected svg,
.muiltr-ucn45q.Mui-selected path,
.MuiBadge-root svg.muiltr-q7mezt,
.MuiBadge-root svg.muiltr-q7mezt path {
    fill: var(--onyx-cyan) !important;
    color: var(--onyx-cyan) !important;
}


/* Badge avec SVG - TOUJOURS CYAN */
.MuiBadge-root svg.muiltr-q7mezt {
  fill: var(--onyx-cyan) !important;
  color: var(--onyx-cyan) !important;
}

/* Hover sur les icônes NON sélectionnées */
.muiltr-15y2w92-footer button:not(.muiltr-q7mezt):hover svg,
.muiltr-15y2w92-footer button:not(.muiltr-q7mezt):hover path,
.MuiBottomNavigation-root button:not(.muiltr-q7mezt):hover svg,
.MuiBottomNavigation-root button:not(.muiltr-q7mezt):hover path {
  fill: var(--onyx-cyan) !important;
  color: var(--onyx-cyan) !important;
}

/* ========================================
   MAP CONTROLS - CONTRÔLES DE LA CARTE
   ======================================== */
/* 1. Groupe de contrôles (Zoom, Boussole, etc.) */
.maplibregl-ctrl-group {
  background-color: var(--onyx-light-gray) !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
  border-radius: 4px !important;
  overflow: hidden;
  color: #ffffff !important; 
}

/* 2. Style des boutons de contrôle */
.maplibregl-ctrl-group button {
  background-color: var(--onyx-light-gray) !important;
  border: none !important;
  color: #ffffff !important; 
}

.maplibregl-ctrl-group button:hover {
  background-color: var(--onyx-dark-gray) !important;
}

/* 3. CORRECTION MAJEURE : Forcer les icônes (SVG encodés) en BLANC */
.maplibregl-ctrl button .maplibregl-ctrl-icon {
  filter: brightness(0) invert(1) !important;
  background-color: transparent !important;
}

/* Cible tous les SVG et PATH des contrôles */
.maplibregl-ctrl-group svg,
.maplibregl-ctrl-group path,
.maplibregl-ctrl-top-right svg,
.maplibregl-ctrl-top-right path {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* 4. Géolocalisation (Geolocate) */
.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon {
  filter: brightness(0) invert(1) !important;
}

.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon {
  filter: none !important; 
}

/* 5. Geocoder (Barre de recherche) */
.maplibregl-ctrl-geocoder {
  background-color: var(--onyx-light-gray) !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
  border-radius: 4px !important;
}

.maplibregl-ctrl-geocoder--input {
  color: #ffffff !important;
}

.maplibregl-ctrl-geocoder--input::placeholder {
  color: #cccccc !important;
}

.maplibregl-ctrl-geocoder--icon,
.maplibregl-ctrl-geocoder--icon-search {
  fill: #ffffff !important;
}

.maplibregl-ctrl-geocoder--suggestion {
  background-color: var(--onyx-dark-gray) !important;
  color: #ffffff !important;
}

.maplibregl-ctrl-geocoder--suggestion:hover {
  background-color: var(--onyx-light-gray) !important;
}

/* 6. Échelle de la carte (Scale) et autres contrôles */
.maplibregl-ctrl-scale {
  background-color: rgba(100, 100, 100, 0.43) !important;
  border-left: 2px solid #b5b5b5 !important;
  border-right: 2px solid #b5b5b5 !important;
  border-bottom: 2px solid #b5b5b5 !important;
  border-top: none !important;
  color: #fff !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Attribution - Fermé par défaut */
.maplibregl-ctrl-attrib.maplibregl-compact {
  background-color: var(--onyx-light-gray) !important;
}

.maplibregl-ctrl-attrib.maplibregl-compact::after {
  background-color: var(--onyx-light-gray) !important;
}

.maplibregl-ctrl-attrib:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-inner {
  display: none !important;
}

.maplibregl-ctrl-attrib-button {
  background-color: var(--onyx-light-gray) !important;
  color: #ffffff !important;
}

.maplibregl-ctrl-attrib-button:hover {
  background-color: var(--onyx-dark-gray) !important;
}

/* Style switcher et notification - Approche avec filtre et overlay */
button.maplibregl-style-switcher,
button.maplibre-ctrl-notification,
button.maplibre-ctrl-notification-off {
  border-radius: 4px !important;
  border: none !important;
  position: relative !important;
  filter: brightness(0) invert(1) !important;
}

/* Créer un fond gris par-dessus avec z-index négatif */
button.maplibregl-style-switcher::after,
button.maplibre-ctrl-notification::after,
button.maplibre-ctrl-notification-off::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-color: var(--onyx-light-gray) !important;
  z-index: -1 !important;
  border-radius: 4px !important;
  filter: brightness(0) invert(1) !important;
}

/* ========================================
   POPUPS DE LA CARTE
   ======================================== */

.maplibregl-popup {
  z-index: 1001 !important;
}

.maplibregl-popup-content {
  background-color: var(--onyx-dark-gray) !important;
  color: #ffffff !important;
  border: 1px solid var(--onyx-cyan) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.maplibregl-popup-tip {
  border-top-color: var(--onyx-dark-gray) !important;
}

.maplibregl-popup-close-button {
  color: var(--onyx-cyan) !important;
  font-size: 20px !important;
  padding: 4px !important;
}

.maplibregl-popup-close-button:hover {
  background-color: var(--onyx-light-gray) !important;
  color: #ffffff !important;
}

/* ========================================
   SCROLLBARS
   ======================================== */

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--onyx-black);
}

::-webkit-scrollbar-thumb {
  background: var(--onyx-light-gray);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--onyx-cyan);
}

/* ========================================
   TOOLTIPS
   ======================================== */

.MuiTooltip-tooltip {
  background-color: var(--onyx-dark-gray) !important;
  color: #ffffff !important;
}

/* ========================================
   SNACKBARS & ALERTS
   ======================================== */

.MuiSnackbar-root {
  background-color: var(--onyx-dark-gray) !important;
}

.MuiAlert-root {
  background-color: var(--onyx-dark-gray) !important;
  color: #ffffff !important;
}

/* ========================================
   CHIPS & BADGES
   ======================================== */

.MuiChip-root {
  background-color: var(--onyx-light-gray) !important;
  color: #ffffff !important;
}

.MuiBadge-badge {
  background-color: var(--onyx-cyan) !important;
  color: #ffffff !important;
}

/* ========================================
   SWITCHES & CHECKBOXES
   ======================================== */

.MuiSwitch-track {
  background-color: var(--onyx-light-gray) !important;
}

.MuiSwitch-thumb {
  background-color: #ffffff !important;
}

.Mui-checked .MuiSwitch-thumb {
  background-color: var(--onyx-cyan) !important;
}

.MuiCheckbox-root {
  color: var(--onyx-light-gray) !important;
}

.MuiCheckbox-root.Mui-checked {
  color: var(--onyx-cyan) !important;
}

/* ========================================
   LOADER
   ======================================== */

.MuiCircularProgress-root {
  color: var(--onyx-cyan) !important;
}

/* ========================================
   DIVIDERS
   ======================================== */

.MuiDivider-root {
  border-color: var(--onyx-light-gray) !important;
}

/* ========================================
   CUSTOM CLASSES
   ======================================== */

.onyx-branding {
  font-family: Arial, sans-serif;
  color: var(--onyx-cyan);
}

.onyx-container {
  background-color: var(--onyx-black);
  padding: 20px;
  border-radius: 8px;
}

/* ========================================
   RESPONSIVE MOBILE
   ======================================== */

@media (max-width: 600px) {
  img[src*="logo"] {
    max-width: 180px !important;
    max-height: 90px !important;
  }

  div[class*="sidebar"]:not(.muiltr-1h0hyz5-sidebar)::before {
    width: 180px !important;
    height: 90px !important;
    margin: 15px auto !important;
  }

  .MuiGrid-root,
  .MuiPaper-root,
  [class*="sidebar"],
  [style*="#2196F3"],
  [style*="#2196f3"],
  [style*="rgb(33, 150, 243)"] {
    background-color: var(--onyx-black) !important;
    background: var(--onyx-black) !important;
  }

  .MuiBottomNavigation-root.muiltr-by705p {
    background-color: var(--onyx-light-gray) !important;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  body {
    background-color: white !important;
    color: black !important;
  }
}

/* ========================================
   AUTRES AJOUTS - CLASSES SPÉCIFIQUES
   ======================================== */

.muiltr-1w3fcd0:autofill {
  box-shadow: 0 0 0 100px var(--onyx-cyan) inset !important;
  -webkit-box-shadow: 0 0 0 100px var(--onyx-cyan) inset !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}

.muiltr-1i9i2du:autofill {
  box-shadow: 0 0 0 100px var(--onyx-cyan) inset !important;
  -webkit-box-shadow: 0 0 0 100px var(--onyx-cyan) inset !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}

.muiltr-bf5opn,
.muiltr-bf5opn *,
[class*="muiltr-bf5opn"] {
  color: var(--onyx-cyan) !important;
  fill: var(--onyx-cyan) !important;
}

div.muiltr-bf5opn,
span.muiltr-bf5opn,
button.muiltr-bf5opn,
a.muiltr-bf5opn {
  color: var(--onyx-cyan) !important;
}

.muiltr-bf5opn svg,
.muiltr-bf5opn svg *,
[class*="muiltr-bf5opn"] svg,
[class*="muiltr-bf5opn"] svg * {
  fill: var(--onyx-cyan) !important;
  color: var(--onyx-cyan) !important;
}

.muiltr-1pj35az.Mui-selected {
  color: var(--onyx-cyan) !important;
}

.muiltr-ucn45q.Mui-selected {
  color: var(--onyx-cyan) !important;
}

.muiltr-ucn45q.Mui-selected svg {
  fill: var(--onyx-cyan) !important;
  color: var(--onyx-cyan) !important;
}

.muiltr-ucn45q:hover {
  color: var(--onyx-cyan) !important;
}

.muiltr-ucn45q:hover svg {
  fill: var(--onyx-cyan) !important;
  color: var(--onyx-cyan) !important;
}

.muiltr-1b50df {
  color: var(--onyx-cyan) !important;
}

.muiltr-1ou85nx {
  color: var(--onyx-cyan) !important;
}

.muiltr-mq8snt {
  color: var(--onyx-cyan) !important;
}

.muiltr-1iju4dv {
  color: var(--onyx-light-gray) !important;
}

.muiltr-fy4icm {
  color: var(--onyx-cyan) !important;
}

.muiltr-1cla113 {
  border-color: var(--onyx-cyan) !important;
  color: var(--onyx-cyan) !important;
}

.muiltr-1k75eh2 {
  color: var(--onyx-cyan) !important;
}

.muiltr-vggnho {
  background-color: var(--onyx-cyan) !important;
}

.muiltr-1d2xk0k {
  color: var(--onyx-cyan) !important;
}

.muiltr-1v2h6d2 {
  border-color: var(--onyx-cyan) !important;
  color: var(--onyx-cyan) !important;
}