/* GeoFleet — design system (thème sombre, marque blanche) */
:root{
  --bg:#0b1220; --bg2:#111a2e; --panel:#16213a; --panel2:#1b2742; --line:#243352;
  --txt:#e8eefc; --muted:#8fa1c7; --brand:#2563eb; --brand2:#3b82f6;
  --ok:#10b981; --warn:#f59e0b; --err:#ef4444; --info:#0ea5e9; --purple:#8b5cf6;
  --radius:12px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--txt);font:14px/1.45 "Segoe UI",Roboto,-apple-system,Helvetica,Arial,sans-serif;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand2);text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#26344f;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- Connexion ---------- */
#login{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:
  radial-gradient(900px 600px at 15% 10%,#16305c 0%,transparent 60%),
  radial-gradient(800px 500px at 85% 90%,#0e2a4d 0%,transparent 55%),var(--bg);z-index:50}
.login-card{width:920px;max-width:94vw;display:grid;grid-template-columns:1.05fr .95fr;background:var(--panel);
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.login-left{padding:38px 36px;background:linear-gradient(160deg,#0f2244,#0c1729)}
.login-right{padding:38px 36px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:.2px}
.logo .dot{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#0ea5e9);
  display:grid;place-items:center;font-size:16px}
.login-left h1{font-size:25px;margin:26px 0 10px;line-height:1.25}
.login-left p{color:var(--muted);margin:0 0 22px}
.feat{display:flex;gap:10px;margin:11px 0;color:#cfe0ff;font-size:13.5px}
.feat b{display:block;color:#fff}
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11.5px;background:#173262;color:#93c5fd;border:1px solid #24437a}
label{display:block;font-size:12.5px;color:var(--muted);margin:14px 0 6px}
input,select,textarea{width:100%;padding:10px 12px;background:#0e1729;border:1px solid var(--line);
  border-radius:9px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.18)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel2);cursor:pointer;transition:.15s;white-space:nowrap}
.btn:hover{background:#22314f;border-color:#2f4266}
.btn.primary{background:linear-gradient(135deg,var(--brand),#1d4ed8);border-color:#1d4ed8;font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ok{background:#0d4f3c;border-color:#12795a}
.btn.danger{background:#5a1a1a;border-color:#8c2626}
.btn.sm{padding:6px 10px;font-size:12.5px;border-radius:8px}
.btn.block{width:100%}
.hint{font-size:12px;color:var(--muted)}
.alert{padding:10px 12px;border-radius:9px;background:#3a1a1a;border:1px solid #7f2b2b;color:#ffd9d9;font-size:13px;margin-top:12px}
.demo-accounts{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.demo-accounts .btn{justify-content:flex-start;font-size:12.5px;padding:7px 10px;margin-bottom:6px;width:100%}

/* ---------- Structure ---------- */
#app{display:none;height:100%;grid-template-columns:236px 1fr;grid-template-rows:56px 1fr}
#app.on{display:grid}
.sidebar{grid-row:1/3;background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 12px;overflow-y:auto}
.sidebar .logo{margin:2px 4px 16px}
.nav{display:flex;flex-direction:column;gap:3px}
.nav .sec{font-size:10.5px;letter-spacing:1.3px;color:#8597bb;margin:14px 8px 6px;text-transform:uppercase}
.nav button{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;background:none;border:0;
  cursor:pointer;color:#c8d6f2;text-align:start;width:100%;font-size:13.5px}
.nav button:hover{background:#18233c}
.nav button.active{background:linear-gradient(90deg,rgba(37,99,235,.28),rgba(37,99,235,.06));color:#fff;
  box-shadow:inset 3px 0 0 var(--brand)}
.nav .ico{width:18px;text-align:center;opacity:.9}
.sidebar .foot{margin-top:auto;font-size:11.5px;color:#8597bb;padding:10px 8px}
.topbar{display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--bg2);border-bottom:1px solid var(--line)}
.topbar .search{position:relative;width:320px}
.topbar .search input{padding:8px 12px;background:#0e1729}
.search-res{position:absolute;top:40px;left:0;right:0;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow);max-height:330px;overflow:auto;z-index:30;display:none}
.search-res.on{display:block}
.search-res div{padding:9px 12px;cursor:pointer;border-bottom:1px solid #1d2942;font-size:13px}
.search-res div:hover{background:#1d2b48}
.spacer{flex:1}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;background:var(--panel2);
  border:1px solid var(--line);font-size:12.5px;cursor:pointer}
.chip:hover{border-color:var(--brand)}
.bell{position:relative}
.bell .count{position:absolute;top:-6px;right:-6px;background:var(--err);color:#fff;border-radius:20px;font-size:10.5px;
  padding:1px 5px;min-width:17px;text-align:center}
main{overflow:auto;padding:18px 20px 30px;position:relative}
.view{display:none}
.view.on{display:block}
.view.full{padding:0}
h2.title{margin:0 0 4px;font-size:19px}
.subtitle{color:var(--muted);font-size:13px;margin-bottom:16px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:14px}
.cards{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.card h3{margin:0 0 8px;font-size:13.5px;color:var(--muted);font-weight:600}
.kpi{font-size:26px;font-weight:700;letter-spacing:.3px}
.kpi small{font-size:12.5px;color:var(--muted);font-weight:500;margin-inline-start:6px}
.card .delta{font-size:12px;margin-top:4px;color:var(--ok)}
.card .delta.bad{color:#f87171}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:9px 10px;text-align:start;border-bottom:1px solid #1d2942;white-space:nowrap}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px;position:sticky;top:0;
  background:var(--panel);z-index:2}
tbody tr:hover{background:#18233c}
.table-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:auto;max-height:62vh}
.pill{padding:3px 9px;border-radius:20px;font-size:11.5px;display:inline-block}
.pill.ok{background:#0c3a2c;color:#6ee7b7}.pill.warn{background:#3d2c08;color:#fcd34d}
.pill.err{background:#3d1414;color:#fca5a5}.pill.info{background:#0b3550;color:#7dd3fc}.pill.mute{background:#26324c;color:#a8b7d6}
.state{display:inline-flex;align-items:center;gap:7px}
.dotst{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.dotst.moving{background:var(--ok);box-shadow:0 0 0 4px rgba(16,185,129,.16)}
.dotst.parked{background:var(--warn);box-shadow:0 0 0 4px rgba(245,158,11,.14)}
.dotst.offline{background:#64748b}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.toolbar input,.toolbar select{width:auto;min-width:120px;padding:7px 10px}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.tabs button{background:none;border:0;padding:9px 12px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent}
.tabs button.active{color:#fff;border-bottom-color:var(--brand)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.panel+.panel{margin-top:14px}
.empty{padding:26px;text-align:center;color:var(--muted)}
canvas.chart{width:100%;height:180px}

/* ---------- Carte ---------- */
#mapwrap{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:290px 1fr 330px}
.map-side{background:var(--bg2);border-right:1px solid var(--line);overflow-y:auto;padding:12px}
.map-right{background:var(--bg2);border-left:1px solid var(--line);overflow-y:auto;padding:12px}
#mapcanvas{position:relative;background:#0a1526;cursor:grab;min-width:0;min-height:0;overflow:hidden}
/* Le canevas est hors du flux : sa taille en pixels ne doit jamais élargir la colonne de la grille. */
#map{position:absolute;top:0;right:0;bottom:0;left:0;display:block}
#mapcanvas.dragging{cursor:grabbing}
.map-ctrl{position:absolute;top:12px;inset-inline-end:12px;display:flex;flex-direction:column;gap:6px;z-index:5}
.map-ctrl button{width:34px;height:34px;border-radius:9px;background:rgba(22,33,58,.92);border:1px solid var(--line);
  cursor:pointer;font-size:15px}
.map-legend{position:absolute;bottom:12px;inset-inline-start:12px;background:rgba(15,23,42,.9);border:1px solid var(--line);
  border-radius:10px;padding:9px 12px;font-size:12px;z-index:5;display:flex;gap:14px;flex-wrap:wrap;max-width:70%}
.map-legend span{display:flex;align-items:center;gap:6px}
.map-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.obj{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;cursor:pointer;border:1px solid transparent}
.obj:hover{background:#18233c}
.obj.active{background:#1d2b48;border-color:var(--brand)}
.obj .nm{flex:1;min-width:0}
.obj .nm b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.obj .nm span{font-size:11.5px;color:var(--muted)}
.obj .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex:0 0 auto}
.timeline{position:absolute;bottom:14px;inset-inline:16px;background:rgba(15,23,42,.94);border:1px solid var(--line);
  border-radius:12px;padding:10px 14px;display:none;align-items:center;gap:12px;z-index:6}
.timeline.on{display:flex}
.timeline input[type=range]{flex:1}
.pt-item{padding:7px 9px;border-radius:8px;font-size:12.5px;cursor:pointer}
.pt-item:hover{background:#1d2b48}
.pt-item.sel{background:#22366b}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:13px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;text-align:end}
.toggle{display:flex;align-items:center;gap:8px;font-size:13px;padding:5px 0;color:#c8d6f2}
.toggle input{width:auto}

/* ---------- Modale / tiroir ---------- */
#modal{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(3,7,18,.6);display:none;align-items:center;justify-content:center;z-index:60}
#modal.on{display:flex}
.modal-box{width:660px;max-width:94vw;max-height:88vh;overflow:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:20px 22px}
.modal-box h3{margin:0 0 4px;font-size:17px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
#drawer{position:fixed;top:0;inset-inline-end:0;height:100%;width:400px;background:var(--bg2);border-inline-start:1px solid var(--line);
  transform:translateX(105%);transition:.22s;z-index:55;overflow-y:auto;padding:16px}
#drawer.on{transform:none}
#drawer .close{position:absolute;top:10px;inset-inline-end:12px}
#toast{position:fixed;bottom:18px;inset-inline-end:18px;display:flex;flex-direction:column;gap:8px;z-index:80}
.toast{background:var(--panel2);border:1px solid var(--line);border-inline-start:3px solid var(--brand);
  padding:11px 14px;border-radius:10px;box-shadow:var(--shadow);font-size:13px;max-width:340px;animation:slide .25s}
.toast.ok{border-inline-start-color:var(--ok)}.toast.err{border-inline-start-color:var(--err)}
@keyframes slide{from{opacity:0;transform:translateX(20px)}}

/* ---------- Divers ---------- */
.spin{width:15px;height:15px;border:2px solid #ffffff55;border-top-color:#fff;border-radius:50%;
  display:inline-block;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
[dir=rtl] body{font-family:"Segoe UI","Tahoma",sans-serif}
[dir=rtl] .nav button.active{box-shadow:inset -3px 0 0 var(--brand)}
[dir=rtl] #drawer{transform:translateX(-105%)}
@media(max-width:1150px){#mapwrap{grid-template-columns:240px 1fr 0}.map-right{display:none}}
@media(max-width:900px){#app{grid-template-columns:64px 1fr}.nav button span:not(.ico){display:none}
  .sidebar .logo b{display:none}.login-card{grid-template-columns:1fr}.login-left{display:none}}

/* ============================== surcouche de bienvenue ============================== */
.welcome{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(2,6,23,.72);display:none;align-items:center;justify-content:center;z-index:60;padding:20px}
.welcome.on{display:flex}
.wb{background:var(--card);border:1px solid var(--line);border-radius:16px;max-width:720px;width:100%;padding:26px;position:relative;max-height:90vh;overflow:auto}
.wb-x{position:absolute;top:12px;right:12px;background:transparent;border:0;color:var(--muted);font-size:16px;cursor:pointer}
.wb h2{margin:10px 0 4px;font-size:22px}
.wb .sub{color:var(--muted);margin:0 0 18px;font-size:14px}
.wgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.wcard{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px}
.wcard .ico{font-size:20px}
.wcard b{display:block;margin:6px 0 4px;font-size:14px}
.wcard span{color:var(--muted);font-size:12.5px;line-height:1.5}
.wfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap}
.wcheck{color:var(--muted);font-size:13px;display:flex;gap:8px;align-items:center}
.rawnav button.nouveau::after{content:"nouveau";margin-left:6px;font-size:9px;text-transform:uppercase;background:var(--brand);color:#fff;border-radius:6px;padding:1px 5px;letter-spacing:.4px}
@media(max-width:640px){.wb{padding:20px}.wgrid{grid-template-columns:1fr}}
/* replay : la légende de la carte s'efface derrière la barre de lecture au lieu de la chevaucher */
.map-legend:has(~ .timeline.on){display:none}
/* liste des véhicules : actions en grille 4 × 2, colonne collée à droite pour rester visible au défilement horizontal */
.dv-act-grille{display:grid;grid-template-columns:repeat(4,30px);gap:4px}
.dv-act-grille .btn.sm{padding:4px 0;min-width:0;width:30px;justify-content:center}
#dvTable td.dv-act,#dvTable th:last-child{position:sticky;inset-inline-end:0;background:var(--panel);box-shadow:-6px 0 8px -6px rgba(0,0,0,.5);z-index:1}
#dvTable th:last-child{z-index:3;top:0}

/* ============================== téléphone (≤ 640 px) ==============================
   La colonne principale ne doit jamais dépasser l'écran : minmax(0,1fr) au lieu de 1fr
   (une grille en 1fr prend la largeur minimale de son contenu le plus large). */
#app{grid-template-columns:236px minmax(0,1fr)}
@media(max-width:900px){#app{grid-template-columns:64px minmax(0,1fr)}}
@media(max-width:640px){
  #app{grid-template-columns:52px minmax(0,1fr)}
  .sidebar{padding:12px 6px}
  .topbar{gap:6px;padding:0 8px;min-width:0}
  .topbar .search{width:auto;flex:1;min-width:0}
  .topbar .spacer{display:none}
  #liveTxt,#userName{display:none}
  #userChip{padding:6px 8px}
  main{padding:14px 10px 24px}
  .cards{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .grid[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important}
  .grid > *{min-width:0}
  main .btn{white-space:normal;text-align:start}
  main pre,main code{white-space:pre-wrap;word-break:break-word}
  /* carte : liste des véhicules au-dessus, carte en dessous */
  #mapwrap{grid-template-columns:1fr;grid-template-rows:minmax(0,34%) minmax(0,1fr) 0}
  #mapwrap > :first-child{overflow:auto;border-bottom:1px solid var(--line)}
  .modal-box{width:calc(100vw - 16px) !important;max-width:none !important}
  #drawer{width:100vw !important;max-width:100vw !important}
}
/* barre latérale réduite (≤ 900 px) : on garde les boutons du pied sous forme d'icône, on masque les textes tronqués */
@media(max-width:900px){
  .sidebar .foot #sideTenant,.sidebar .foot #sidePlan,.sidebar .foot > div:last-child{display:none}
  .sidebar .foot .row{flex-direction:column;align-items:center}
  #pushBtn,#whatsnew,#pwaInstall{width:38px;overflow:hidden;white-space:nowrap;justify-content:flex-start;padding:6px 9px;gap:20px}
}

/* Fiche du véhicule sur écran étroit (≤ 1150 px : tablettes, téléphones, petits portables).
   La colonne de droite disparaît faute de place ; la fiche s'ouvre alors par-dessus la carte
   quand on choisit un véhicule, et se ferme par ✕. Sur téléphone, c'est un volet en bas d'écran. */
.fiche-fermer{display:none;float:right;margin:-4px -4px 4px 8px;background:var(--bg3,#1e293b);border:1px solid var(--line);
  color:inherit;border-radius:8px;width:32px;height:32px;font-size:15px;cursor:pointer}
@media(max-width:1150px){
  #mapwrap.avec-fiche .map-right{display:block;position:absolute;top:0;right:0;bottom:0;width:min(330px,92vw);
    z-index:8;box-shadow:-8px 0 24px rgba(0,0,0,.35)}
  #mapwrap.avec-fiche .fiche-fermer{display:block}
}
@media(max-width:640px){
  #mapwrap.avec-fiche .map-right{top:auto;left:0;width:auto;max-height:58%;border-left:0;border-top:1px solid var(--line);
    border-radius:14px 14px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.35)}
}
[dir=rtl] #mapwrap.avec-fiche .map-right{right:auto;left:0}
@media(max-width:640px){[dir=rtl] #mapwrap.avec-fiche .map-right{right:0}}
[dir=rtl] .fiche-fermer{float:left;margin:-4px 8px 4px -4px}

/* ===== Accessibilité (N12, WCAG 2.1 AA) ===== */
#forgot{color:#60a5fa}
.evitement{position:fixed;top:-60px;left:8px;z-index:100;background:var(--brand);color:#fff;padding:10px 16px;border-radius:8px;
  font-weight:600;text-decoration:none;transition:top .15s}
.evitement:focus{top:8px}
[dir=rtl] .evitement{left:auto;right:8px}
#main:focus{outline:none}
#main:focus-visible{outline:2px solid #60a5fa;outline-offset:-2px}
.lecteur-seul{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bell .count{background:#dc2626 !important}
/* indicateur de focus clavier net et contrasté sur tous les éléments interactifs */
button:focus-visible,a:focus-visible,[tabindex]:focus-visible,summary:focus-visible,.obj:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #60a5fa;outline-offset:1px}