/* ===================================================================
   GIKI-OCTET — habillage de la plateforme
   -------------------------------------------------------------------
   Ce fichier REMPLACE le /styles.css de l'application via le dossier
   de surcharge (web.override). Les regles d'origine sont conservees
   telles quelles en tete : les retirer casserait la mise en page.

   L'application est construite avec Material UI, qui injecte ses
   styles a l'execution. Nos regles sont donc chargees AVANT les
   siennes et doivent porter !important pour s'appliquer.

   Les classes .Mui*-* sont des noms globaux stables de Material UI :
   elles ne changent pas d'une version a l'autre, contrairement aux
   classes hachees du type .css-1ab2cd.
   =================================================================== */

/* ---------- Regles d'origine de Traccar : NE PAS SUPPRIMER ---------- */
html, body { height: 100%; }
body { margin: 0; padding: 0; }
.root { display: flex; flex-direction: column; height: 100%; }
@media print { * { height: auto !important; overflow: visible !important; } }

/* ---------- Charte ---------- */
:root {
  --go-petrole:        #0B4F5C;  /* primaire */
  --go-petrole-fonce:  #073A44;  /* survols, bordures */
  --go-petrole-clair:  #4BB3A8;  /* texte et icones sur fond sombre */
  --go-corail:         #F26A4F;  /* accent, actions */
  --go-corail-clair:   #FF8A6F;
  --go-sombre-fond:    #06171B;  /* fond general en theme sombre, teinte petrole */
  --go-sombre-surface: #0D262C;  /* panneaux en theme sombre */
  --go-sur-petrole:    #FFFFFF;  /* texte sur aplat petrole */
}

/* ===================================================================
   1. Barres d'application — l'aplat de marque le plus visible
   =================================================================== */
.MuiAppBar-root,
.MuiAppBar-colorPrimary,
.MuiAppBar-colorDefault {
  background-color: var(--go-petrole) !important;
  background-image: none !important;
  color: var(--go-sur-petrole) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25) !important;
}
.MuiAppBar-root .MuiTypography-root,
.MuiAppBar-root .MuiIconButton-root,
.MuiAppBar-root .MuiSvgIcon-root,
.MuiAppBar-root .MuiButton-root {
  color: var(--go-sur-petrole) !important;
}
/* Onglets de la barre : soulignement corail */
.MuiAppBar-root .MuiTabs-indicator { background-color: var(--go-corail) !important; }
.MuiAppBar-root .MuiTab-root.Mui-selected { color: var(--go-sur-petrole) !important; }

/* ===================================================================
   2. Element selectionne — barre corail a gauche, fond petrole leger
   =================================================================== */
.MuiListItemButton-root.Mui-selected,
.MuiMenuItem-root.Mui-selected,
.MuiListItem-root.Mui-selected {
  background-color: rgba(11, 79, 92, .12) !important;
  box-shadow: inset 3px 0 0 var(--go-corail) !important;
}
.MuiListItemButton-root.Mui-selected:hover,
.MuiMenuItem-root.Mui-selected:hover {
  background-color: rgba(11, 79, 92, .20) !important;
}

/* ===================================================================
   3. Boutons et actions
   =================================================================== */
.MuiButton-containedPrimary {
  background-color: var(--go-petrole) !important;
  color: var(--go-sur-petrole) !important;
}
.MuiButton-containedPrimary:hover { background-color: var(--go-petrole-fonce) !important; }
.MuiButton-containedSecondary,
.MuiFab-root, .MuiFab-primary, .MuiFab-secondary {
  background-color: var(--go-petrole) !important;
  color: #1A1A1A !important;
}
.MuiButton-containedSecondary:hover,
.MuiFab-root:hover { background-color: var(--go-corail-clair) !important; }
.MuiButton-outlinedPrimary {
  color: var(--go-petrole) !important;
  border-color: var(--go-petrole) !important;
}

/* Champs : liseres et libelles au focus */
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--go-petrole) !important;
  border-width: 2px !important;
}
.MuiInputLabel-root.Mui-focused { color: var(--go-petrole) !important; }
.MuiCheckbox-root.Mui-checked,
.MuiRadio-root.Mui-checked,
.MuiSwitch-switchBase.Mui-checked { color: var(--go-petrole) !important; }
.MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
  background-color: var(--go-petrole-clair) !important;
}
.MuiLinearProgress-bar, .MuiCircularProgress-svg { color: var(--go-corail) !important; }
.MuiLinearProgress-bar { background-color: var(--go-corail) !important; }

/* Etiquettes */
.MuiChip-colorPrimary {
  background-color: var(--go-petrole) !important;
  color: var(--go-sur-petrole) !important;
}

/* ===================================================================
   4. Theme sombre — teinte petrole au lieu du gris neutre
   C'est ce qui fait qu'il devient TON theme sombre et pas celui
   que tout le monde a.
   =================================================================== */
@media (prefers-color-scheme: dark) {
  body { background: var(--go-sombre-fond) !important; }
}
/* Material UI pose cette couleur de fond sur le corps quelle que soit
   la preference du systeme quand le mode sombre est active cote
   serveur : on neutralise le gris par notre teinte. */
body[style*="rgb(18, 18, 18)"],
body[style*="#121212"] { background: var(--go-sombre-fond) !important; }

.MuiPaper-root[class*="elevation"] { background-image: none !important; }

/* ===================================================================
   5. Details qui signent l'ensemble
   =================================================================== */
*::selection { background: var(--go-corail); color: #FFFFFF; }
* { scrollbar-color: var(--go-petrole-clair) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--go-petrole-clair);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-track { background: transparent; }

/* Accessibilite : le focus clavier doit rester visible partout */
/* Le contour corail sur un champ texte se lit comme une erreur de saisie :
   on le reserve aux elements cliquables, et en petrole. */
a:focus-visible,
button:focus-visible,
.MuiButtonBase-root:focus-visible {
  outline: 2px solid var(--go-petrole-clair) !important;
  outline-offset: 2px !important;
}

/* Lien "Traccar" du pied de page de connexion, aux couleurs de la marque */
a { color: var(--go-petrole-clair); }


/* ===================================================================
   6. Ecran de connexion — formulaire pose a meme le fond
   -------------------------------------------------------------------
   Pas de carte blanche : elle creait une rupture au milieu du fond
   petrole. Le formulaire est transparent, les champs sont de simples
   plages translucides, le logo est pose directement sur la couleur.
   Moins d'elements, moins de bordures, moins de ruptures.

   :has(> form) ne vise que le panneau du formulaire de connexion : les
   autres panneaux de l'application ne sont pas touches.
   =================================================================== */
.MuiPaper-root:has(> form) {
  background-color: var(--go-petrole) !important;
  background-image: none !important;
  box-shadow: none !important;
}
.MuiPaper-root:has(> form) > form {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Logo pose a meme le fond, sans bandeau ni cadre */
img[src$="logo.svg"] {
  display: block !important;
  width: min(260px, 72%) !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 auto 36px !important;
  padding: 0 !important;
  background: none !important;
}

/* Champs lisibles sur fond fonce : plage translucide, texte clair,
   un seul trait sous le champ plutot qu'un cadre complet. */
.MuiPaper-root:has(> form) .MuiOutlinedInput-root {
  background: rgba(255, 255, 255, .10) !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
}
.MuiPaper-root:has(> form) .MuiOutlinedInput-notchedOutline {
  border-color: rgba(255, 255, 255, .28) !important;
}
.MuiPaper-root:has(> form) .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: rgba(255, 255, 255, .5) !important;
}
.MuiPaper-root:has(> form) .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #FFFFFF !important;
  border-width: 1.5px !important;
}
.MuiPaper-root:has(> form) .MuiInputBase-input { color: #FFFFFF !important; }
.MuiPaper-root:has(> form) .MuiInputLabel-root { color: rgba(255, 255, 255, .75) !important; }
.MuiPaper-root:has(> form) .MuiInputLabel-root.Mui-focused { color: #FFFFFF !important; }
.MuiPaper-root:has(> form) .MuiIconButton-root { color: rgba(255, 255, 255, .75) !important; }
.MuiPaper-root:has(> form) .MuiSvgIcon-root { color: rgba(255, 255, 255, .75) !important; }

/* Bouton de connexion : corail, la seule couleur vive de l'ecran */
.MuiPaper-root:has(> form) .MuiButton-root:not(.Mui-disabled) {
  background-color: var(--go-corail) !important;
  color: #17222A !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.MuiPaper-root:has(> form) .MuiButton-root.Mui-disabled {
  background-color: rgba(255, 255, 255, .12) !important;
  color: rgba(255, 255, 255, .45) !important;
}

/* En-tete de l'ecran de connexion : selecteur de langue et icones
   fondus dans le fond plutot que poses dessus comme des corps etrangers. */
body:has(.MuiPaper-root > form) .MuiSelect-select,
body:has(.MuiPaper-root > form) .MuiInputBase-root,
body:has(.MuiPaper-root > form) .MuiOutlinedInput-root {
  color: #FFFFFF !important;
}
body:has(.MuiPaper-root > form) > .MuiPaper-root:not(:has(> form)),
body:has(.MuiPaper-root > form) .MuiSelect-select {
  background: rgba(255, 255, 255, .10) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
body:has(.MuiPaper-root > form) .MuiSvgIcon-root {
  color: rgba(255, 255, 255, .8) !important;
}

/* Sur petit ecran, Traccar supprime son panneau de marque : on colore
   alors la page elle-meme, sinon le logo blanc reste invisible. */
@media (max-width: 599.95px) {
  body:has(.MuiPaper-root > form) {
    background-color: var(--go-petrole) !important;
  }
}

/* ===================================================================
   8. Interface principale — ce que l'ecran de suivi montre reellement
   -------------------------------------------------------------------
   Constate sur capture : pas de barre d'application sur cet ecran. Les
   seules zones d'habillage sont le bandeau du panneau de gauche, la
   navigation du bas et les commandes de la carte.

   Principe : la carte est le contenu, l'habillage l'encadre sans lui
   disputer l'attention. Le corail reste reserve a ce qui demande une
   action, pour qu'il garde sa valeur de signal.
   =================================================================== */

/* Bandeau du panneau lateral : recherche et ajout d'appareil */
.MuiToolbar-root {
  background-color: var(--go-petrole) !important;
  color: #FFFFFF !important;
}
.MuiToolbar-root .MuiSvgIcon-root,
.MuiToolbar-root .MuiIconButton-root { color: #FFFFFF !important; }
.MuiToolbar-root .MuiInputBase-root {
  background: rgba(255, 255, 255, .14) !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  padding-inline: 10px !important;
}
.MuiToolbar-root .MuiInputBase-input::placeholder {
  color: rgba(255, 255, 255, .72) !important;
  opacity: 1 !important;
}
/* Ajouter un appareil est l'action principale de ce bandeau : corail. */
.MuiToolbar-root:has(.MuiInputBase-root) > .MuiIconButton-root:last-child {
  background: var(--go-corail) !important;
  color: #17222A !important;
  border-radius: 9px !important;
}
.MuiToolbar-root:has(.MuiInputBase-root) > .MuiIconButton-root:last-child .MuiSvgIcon-root {
  color: #17222A !important;
}

/* Navigation du bas : aplat petrole, onglet actif en corail */
.MuiBottomNavigation-root {
  background-color: var(--go-petrole) !important;
  border-top: 1px solid rgba(255, 255, 255, .12) !important;
}
.MuiBottomNavigationAction-root { color: rgba(255, 255, 255, .72) !important; }
.MuiBottomNavigationAction-root .MuiSvgIcon-root { color: inherit !important; }
.MuiBottomNavigationAction-root.Mui-selected {
  color: var(--go-corail) !important;
  background: rgba(255, 255, 255, .07) !important;
}

/* Commandes de la carte : leurs icones sont des images de fond, les
   recolorer les rend illisibles. On garde donc leur fond clair et on les
   signe par une bordure et un survol petrole. */
.maplibregl-ctrl-group,
.mapboxgl-ctrl-group {
  border: 1.5px solid var(--go-petrole) !important;
  border-radius: 9px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22) !important;
  overflow: hidden !important;
}
.maplibregl-ctrl-group button:hover,
.mapboxgl-ctrl-group button:hover {
  background-color: color-mix(in srgb, var(--go-petrole) 16%, white) !important;
}


/* ===================================================================
   9. Liste des appareils
   -------------------------------------------------------------------
   Retenue voulue : la pastille d'etat (en ligne / hors ligne) et le
   niveau de batterie portent un sens operationnel. Les recolorer aux
   couleurs de la marque leur ferait perdre leur lisibilite immediate.
   Seule l'icone de l'appareil, qui n'encode rien, prend le petrole.
   =================================================================== */
.MuiListItem-root .MuiAvatar-root,
.MuiListItemButton-root .MuiAvatar-root {
  background-color: color-mix(in srgb, var(--go-petrole) 14%, transparent) !important;
  color: var(--go-petrole) !important;
}
.MuiListItem-root .MuiAvatar-root .MuiSvgIcon-root,
.MuiListItemButton-root .MuiAvatar-root .MuiSvgIcon-root {
  color: var(--go-petrole) !important;
}


/* ===================================================================
   10. Rail lateral (direction A)
   -------------------------------------------------------------------
   La barre d'onglets du bas devient une colonne fixe a gauche, et le
   reste de l'interface se decale pour lui faire place.

   UNIQUEMENT au-dessus de 900 px : sur un telephone, un rail de 76 px
   mangerait un cinquieme de la largeur. La barre du bas y reste la
   bonne reponse — chaque support garde le geste qui lui convient.

   Repere de retour en arriere : sudo design-appliquer
   =================================================================== */
@media (min-width: 900px) {

  /* Place faite au rail.
     On vise [class*="-page"] : les classes generees par l'application
     portent un suffixe tire du nom du composant source (-page, -sidebar,
     -header, -footer). Plus stable que l'empreinte qui precede, et plus
     sur qu'un selecteur generique. */
  /* Le decalage doit porter sur le PANNEAU, pas sur la page : sans cela le
     rail se contente de recouvrir sa bordure gauche, et l'icone du vehicule
     comme le debut de l'immatriculation disparaissent dessous. */
  [class*="-sidebar"] {
    margin-left: 76px !important;
  }

  .MuiBottomNavigation-root {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 76px !important;
    height: auto !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    padding-top: 84px !important;   /* place pour le monogramme */
    background-color: var(--go-petrole) !important;
    border-top: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, .10) !important;
    z-index: 1300 !important;
    background-image: url('/marque-rail.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center calc(100% - 26px) !important;
    background-size: 36px auto !important;
  }

  /* Monogramme de la marque en tete du rail */
  /* Marque en tete du rail. En image de fond plutot qu'en pseudo-element :
     celui-ci ne s'affichait pas sur ce composant, et un fond ne depend
     d'aucune structure interne — donc rien a recasser a la mise a jour.
     Posee EN PIED : le haut du rail est recouvert par l'en-tete du panneau,
     qui s'etend jusqu'au bord gauche. Le raccord petrole est volontaire. */
  .MuiBottomNavigationAction-root {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    flex: 0 0 auto !important;
    border-radius: 12px !important;
    padding: 0 !important;
  }
  .MuiBottomNavigationAction-root.Mui-selected {
    background: rgba(255, 255, 255, .14) !important;
    color: #FFFFFF !important;
  }
  .MuiBottomNavigationAction-label {
    font-size: 9px !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
  }
  .MuiBottomNavigationAction-root.Mui-selected .MuiBottomNavigationAction-label {
    font-size: 9px !important;
  }
}


/* ===================================================================
   11. Liste des vehicules — densite et hierarchie
   -------------------------------------------------------------------
   Structure reelle d'une ligne, relevee dans le DOM :
     .MuiListItemButton-root
       .MuiListItemAvatar-root > .MuiAvatar-root     icone du vehicule
       .MuiListItemText-primary                      immatriculation
       .MuiListItemText-secondary > [class*="-success"]  etat
       button > svg[class*="-error"]                 batterie

   Trois niveaux de lecture : l'immatriculation d'abord, l'etat ensuite,
   les indicateurs a droite. Les couleurs d'etat restent celles de
   l'application : vert pour en ligne, rouge pour une alerte. Les
   repeindre aux couleurs de la marque ferait perdre a l'exploitant
   l'information qu'il doit lire d'un coup d'oeil.
   =================================================================== */
[class*="-list"] .MuiListItemButton-root {
  padding: 13px 18px !important;
  border-bottom: 1px solid #ECF1F2 !important;
  align-items: flex-start !important;
  gap: 2px !important;
}

[class*="-list"] .MuiListItemAvatar-root {
  min-width: 42px !important;
  margin-top: 2px !important;
}
[class*="-list"] .MuiAvatar-root {
  width: 34px !important;
  height: 34px !important;
}

/* L'immatriculation : c'est elle qu'on cherche du regard */
[class*="-list"] .MuiListItemText-primary {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  line-height: 1.25 !important;
}

/* L'etat, en retrait */
[class*="-list"] .MuiListItemText-secondary {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  margin-top: 2px !important;
}

/* Les indicateurs de droite, discrets tant que tout va bien */
[class*="-list"] .MuiListItemButton-root > .MuiIconButton-root {
  align-self: center !important;
  padding: 4px !important;
}

/* Survol : un simple voile petrole, sans deplacement */
[class*="-list"] .MuiListItemButton-root:hover {
  background-color: rgba(11, 79, 92, .055) !important;
}


/* ===================================================================
   12. Fiche vehicule posee sur la carte
   -------------------------------------------------------------------
   Relevee a l'ecran apres selection : un titre, un tableau
   libelle/valeur (horodatage, adresse, vitesse, distance), un lien
   « Plus de details », puis une rangee d'actions.

   Traitement : un bandeau petrole porte le nom du vehicule, le tableau
   gagne en lisibilite avec des chiffres alignes, et les actions
   conservent leurs couleurs porteuses de sens — le rouge de la
   suppression reste rouge.
   =================================================================== */
.MuiCard-root {
  border-radius: 14px !important;
  box-shadow: 0 8px 30px rgba(10, 40, 48, .24) !important;
  overflow: hidden !important;
  border: 0 !important;
}

/* Bandeau de tete : composant d'en-tete standard, ou premier bloc portant
   un titre selon les versions — on vise les deux. */
.MuiCard-root .MuiCardHeader-root,
.MuiCard-root > div:first-child:has(> .MuiTypography-root) {
  background: var(--go-petrole) !important;
  padding: 13px 16px !important;
}
.MuiCard-root .MuiCardHeader-title,
.MuiCard-root .MuiCardHeader-root .MuiTypography-root,
.MuiCard-root > div:first-child:has(> .MuiTypography-root) .MuiTypography-root {
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}
.MuiCard-root .MuiCardHeader-root .MuiIconButton-root,
.MuiCard-root .MuiCardHeader-root .MuiSvgIcon-root,
.MuiCard-root > div:first-child:has(> .MuiTypography-root) .MuiIconButton-root,
.MuiCard-root > div:first-child:has(> .MuiTypography-root) .MuiSvgIcon-root {
  color: rgba(255, 255, 255, .8) !important;
}

/* Tableau libelle / valeur */
.MuiCard-root .MuiTableCell-root {
  border-bottom: 1px solid #EDF2F3 !important;
  padding: 9px 16px !important;
  font-size: 13px !important;
}
/* Le :not(:has(a)) exclut la ligne « Plus de details », qui est un lien
   loge dans une premiere cellule et se retrouvait traite en libelle.
   Pas de capitales : sur deux mots elles forcent un retour a la ligne,
   et elles alourdissent une fiche qu'on lit d'un coup d'oeil. */
.MuiCard-root .MuiTableRow-root > .MuiTableCell-root:first-child:not(:has(a)) {
  color: #6C838A !important;
  font-size: 12px !important;
  width: 36% !important;
  white-space: nowrap !important;
}
.MuiCard-root .MuiTableCell-root:has(a) {
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}
.MuiCard-root .MuiTableRow-root > .MuiTableCell-root:last-child {
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  font-weight: 500 !important;
  color: #15272C !important;
}

/* Liens de la fiche : adresse, plus de details */
.MuiCard-root .MuiLink-root,
.MuiCard-root a {
  color: var(--go-petrole) !important;
  text-decoration-color: rgba(11, 79, 92, .4) !important;
}

/* Rangee d'actions : espacee, le rouge de la suppression preserve */
.MuiCardActions-root {
  padding: 10px 12px !important;
  gap: 4px !important;
  border-top: 1px solid #EDF2F3 !important;
}