@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");
:root{--bg:#060a08;--bg-soft:#0b110d;--card:#0e1511;--card-border:#1c2a20;--green:#4ade80;--green-dim:#22c55e;--text:#f2f5f3;--muted:#9aa8a0;--warn:#fbbf24;--crit:#f87171}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.55;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}

/* topbar */
.topbar{min-height:64px;position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 24px;height:62px;background:rgba(6,10,8,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--card-border)}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;line-height:1.1}
.logo svg{width:30px;height:30px}
.logo .sub{display:block;font-size:9.5px;color:var(--green);font-weight:700;letter-spacing:.12em}
.topbar .right{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--muted)}
.portal-tag{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--green);border:1px solid rgba(74,222,128,.35);padding:4px 10px;border-radius:20px}

.wrap{max-width:1150px;margin:0 auto;padding:26px 22px 80px}

/* commons */
.card{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:22px}
.card h2{font-size:16.5px;font-weight:700;margin-bottom:16px}
.grid2{display:grid;grid-template-columns:400px 1fr;gap:22px;align-items:start}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px;margin-bottom:22px}
.kpi{background:var(--card);border:1px solid var(--card-border);border-radius:13px;padding:14px 17px}
.kpi .l{font-size:10.5px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.kpi .v{font-size:23px;font-weight:800;margin-top:2px}
.kpi .v.g{color:var(--green)} .kpi .v.w{color:var(--warn)} .kpi .v.c{color:var(--crit)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 19px;border-radius:11px;font-size:13.5px;font-weight:700;cursor:pointer;border:1px solid transparent;transition:.15s}
.btn-green{background:var(--green);color:#04170b}
.btn-green:hover{background:#6ee7a0}
.btn-outline{border-color:#2a3a30;background:#0d1410;color:var(--text)}
.btn-outline:hover{border-color:var(--green);color:var(--green)}
.btn-sm{padding:8px 13px;font-size:12.5px}
.btn-big{width:100%;padding:17px;font-size:16px;border-radius:14px}
.btn[disabled]{opacity:.4;cursor:not-allowed}

.field{margin-bottom:13px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:600}
.field select,.field input{width:100%;background:#0a110d;border:1px solid #223428;border-radius:10px;color:var(--text);font-size:14px;padding:10px 12px;outline:none;font-family:inherit}
.field select:focus,.field input:focus{border-color:var(--green)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:11px}

.status{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap}
.st-dispatching,.st-bidding{background:rgba(148,163,184,.14);color:#a8b8c8}
.st-assigned{background:rgba(250,204,21,.12);color:var(--warn)}
.st-pickup,.st-arrived_pickup,.st-loading{background:rgba(96,165,250,.13);color:#7cb5f7}
.st-transit{background:rgba(74,222,128,.14);color:var(--green)}
.st-arrived{background:rgba(74,222,128,.2);color:#8ff0b2}
.st-delivered{background:#bbf7d0;color:#14532d;font-weight:800}
.txt-delivered{color:#15803d;font-weight:800}
body.light .txt-delivered{color:#14532d}

.loadlist{display:grid;gap:12px}
.load{background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:16px 18px;transition:.2s}
.load:hover{border-color:#2c4434}
.load .top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.route{font-size:15.5px;font-weight:700}
.route .arr{color:var(--green);margin:0 6px}
.meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:5px}
.meta b{color:var(--text)}
.price .p{font-size:18px;font-weight:800;color:var(--green);text-align:right;white-space:nowrap}
.price .s{font-size:11px;color:var(--muted);text-align:right}
.actions{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap;align-items:center}
.prog{height:5px;background:#16241b;border-radius:4px;margin-top:11px;overflow:hidden}
.prog i{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#4ade80);transition:width .8s}
.scorebar{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.scorebar .bar{width:90px;height:6px;background:#16241b;border-radius:4px;overflow:hidden}
.scorebar .bar i{display:block;height:100%;background:var(--green)}
.matchpct{font-weight:800;color:var(--green)}

.empty{border:1px dashed #24382c;border-radius:14px;padding:34px;text-align:center;color:var(--muted);font-size:13.5px}
.hint{font-size:11.5px;color:#5f7066;margin-top:10px}
.divider{border:none;border-top:1px solid var(--card-border);margin:16px 0}

/* estimation */
.estimate{background:#0a110d;border:1px dashed #2b4534;border-radius:12px;padding:14px 16px;margin:8px 0 14px;font-size:13px}
.estimate .row{display:flex;justify-content:space-between;padding:2px 0;color:var(--muted)}
.estimate .row b{color:var(--text)}
.estimate .big{font-size:30px;font-weight:800;color:var(--green);text-align:center;margin:8px 0 2px}
.cap{display:flex;justify-content:space-between;font-size:12px;margin-top:8px;color:var(--muted)}
.cap b.h{color:var(--green)} .cap b.m{color:var(--warn)}

/* maps */
.mapbox-el{height:420px;border-radius:14px;overflow:hidden;border:1px solid #1d2d22;background:#0a1310;position:relative}
.mapbox-el.small{height:300px}
.svgmap svg{width:100%;height:100%;display:block}
.maphint{position:absolute;bottom:8px;left:10px;font-size:10px;color:#42544a}
.mapkey{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(6,10,8,.88);backdrop-filter:blur(8px);border:1px solid #2b4534;border-radius:12px;padding:10px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted);z-index:6}
.mapkey input{flex:1;min-width:170px;background:#0a110d;border:1px solid #223428;border-radius:8px;color:var(--text);font-size:12px;padding:8px 11px;outline:none}
.mapkey input:focus{border-color:var(--green)}
.mapkey button{background:var(--green);color:#04170b;border:none;border-radius:8px;font-size:12px;font-weight:700;padding:8px 14px;cursor:pointer}
.mapkey button:hover{background:#6ee7a0}
.mapkey a{color:var(--green);font-size:11.5px;white-space:nowrap}
body.light .mapkey{background:rgba(255,255,255,.92);border-color:#a9d6b8}
body.light .mapkey input{background:#f4f7f4;border-color:#ccd8cf}
.mbx-truck{font-size:20px;filter:drop-shadow(0 0 6px rgba(74,222,128,.8));cursor:default}
.mbx-truck.warn{filter:drop-shadow(0 0 6px rgba(251,191,36,.9))}
.mbx-truck.crit{filter:drop-shadow(0 0 6px rgba(248,113,113,.9))}
.mbx-truck.info{filter:drop-shadow(0 0 7px rgba(56,189,248,.95))}
.mapbox-el .mapboxgl-canvas,.mapbox-el canvas{width:100%!important}
.maplegend{position:absolute;left:10px;bottom:10px;z-index:5;display:flex;gap:10px;flex-wrap:wrap;
  background:rgba(8,14,10,.82);border:1px solid rgba(74,222,128,.25);border-radius:999px;padding:5px 12px;
  font-size:10.5px;color:#cfe7d6;pointer-events:none}
.maplegend span{display:flex;align-items:center;gap:5px}
.maplegend i{width:9px;height:9px;border-radius:50%;display:inline-block}
body.light .maplegend{background:rgba(255,255,255,.88);color:#1d2b22;border-color:rgba(20,80,45,.25)}
.mbx-pt{width:12px;height:12px;border-radius:50%;background:#0a120d;border:2.5px solid #4ade80}

/* modal / toast */
.overlay{position:fixed;inset:0;background:rgba(3,6,4,.74);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:18px}
.modal{background:#0c120e;border:1px solid #24352a;border-radius:18px;padding:26px;max-width:660px;width:100%;max-height:92vh;overflow:auto}
.modal h2{font-size:18px;margin-bottom:5px}
.modal .sub{color:var(--muted);font-size:13px;margin-bottom:16px}
.modal .close{float:right;background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer}
#toasts{position:fixed;bottom:20px;right:20px;z-index:200;display:grid;gap:9px}
.toast{background:#0e1a12;border:1px solid #2b5138;color:#d9efe1;font-size:13px;padding:12px 16px;border-radius:12px;max-width:330px;animation:tin .3s;box-shadow:0 16px 44px rgba(0,0,0,.5)}
@keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* tabs */
.tabs{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.tabs button{border:1px solid var(--card-border);background:var(--card);color:var(--muted);font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:10px;cursor:pointer}
.tabs button.on{border-color:var(--green);color:var(--green);background:rgba(74,222,128,.07)}
.tabs .badge{display:inline-block;min-width:19px;padding:1px 6px;margin-left:6px;border-radius:20px;background:rgba(74,222,128,.15);color:var(--green);font-size:11px}

/* driver */
.driver-wrap{max-width:430px;margin:0 auto;padding:20px 16px 60px}
.driver-job{background:var(--card);border:1px solid var(--card-border);border-radius:20px;padding:26px;text-align:center}
.driver-job .cities{font-size:26px;font-weight:800;line-height:1.3}
.driver-job .down{color:var(--green);font-size:22px;margin:2px 0}
.driver-job .specs{display:flex;justify-content:center;gap:16px;color:var(--muted);font-size:13px;margin:14px 0 20px;flex-wrap:wrap}
.driver-steps{display:grid;gap:8px;margin-top:18px;text-align:left}
.dstep{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted);padding:8px 12px;border-radius:10px}
.dstep.done{color:#bfe9cd}
.dstep.now{background:rgba(74,222,128,.08);color:var(--green);font-weight:700}
.dstep .dot{width:9px;height:9px;border-radius:50%;background:#24382c;flex:none}
.dstep.done .dot,.dstep.now .dot{background:var(--green)}
.sigpad{border:1px dashed #2b4534;border-radius:12px;background:#0a110d;touch-action:none;width:100%;height:140px}

/* tower */
.tower-alert{border-left:3px solid var(--warn);background:var(--card);border-radius:12px;padding:14px 16px;margin-bottom:11px}
.tower-alert.crit{border-left-color:var(--crit)}
.tower-alert .head{display:flex;justify-content:space-between;gap:10px;font-size:14px;font-weight:700;flex-wrap:wrap}
.tower-alert .why{font-size:12.5px;color:var(--muted);margin:5px 0 9px}
.tower-alert .why b{color:var(--warn)}
.tower-alert.crit .why b{color:var(--crit)}

/* launcher */
.launch{max-width:980px;margin:0 auto;padding:60px 24px}
.launch h1{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.launch p.lead{color:var(--muted);font-size:16px;max-width:640px;margin-bottom:38px}
.portals{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.portal{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:26px;transition:.2s;display:block}
.portal:hover{border-color:var(--green);transform:translateY(-3px)}
.portal .ic{font-size:30px;margin-bottom:12px}
.portal h3{font-size:16.5px;margin-bottom:6px}
.portal p{font-size:13px;color:var(--muted)}
.portal .go{display:inline-block;margin-top:12px;color:var(--green);font-weight:700;font-size:13px}

/* ---- DAY MODE (thème clair) ---- */
body{transition:background .25s,color .25s}
body.light{--bg:#f2f5f2;--bg-soft:#e9eeea;--card:#ffffff;--card-border:#d9e3db;--text:#141f18;--muted:#5c6d62;--green:#16a34a;--green-dim:#15803d}
body.light .topbar{background:rgba(245,248,245,.92);border-color:#dbe4dd}
body.light .logo svg path[stroke]{stroke:#1c2a20}
body.light .logo svg path[fill="#d3ded5"]{fill:#9fb3a5}
body.light .field select,body.light .field input,body.light .srow select,body.light .srow input{background:#f4f7f4;border-color:#ccd8cf;color:var(--text)}
body.light .btn-outline{background:#fff;border-color:#c6d3c9;color:var(--text)}
body.light .btn-green{background:#16a34a;color:#fff}
body.light .btn-green:hover{background:#15803d}
body.light .estimate{background:#f4faf5;border-color:#a9d6b8}
body.light .chk{background:#f4f7f4;border-color:#ccd8cf}
body.light .chk.on{background:rgba(22,163,74,.09)}
body.light .ac-list{background:#fff;border-color:#ccd8cf}
body.light .ac-item{border-color:#eef2ee}
body.light .ac-item:hover{background:rgba(22,163,74,.07)}
body.light .tabs button{background:#fff}
body.light .sidebar{background:#edf1ed;border-color:#dbe4dd}
body.light .sidebar .sitem:hover{background:rgba(0,0,0,.04)}
body.light .load:hover{border-color:#b6c9bc}
body.light .prog{background:#e0e7e1}
body.light .mapbox-el{background:#e3e9e4;border-color:#ccd8cf}
body.light .toast{background:#ffffff;border-color:#a9d6b8;color:#1c2a20}
body.light .modal{background:#ffffff;border-color:#d9e3db}
body.light .kpi .v.g{color:#15803d}
body.light .status.st-dispatching,body.light .status.st-bidding{background:rgba(90,110,98,.12);color:#4a5b50}
body.light .scorebar .bar,body.light .split .b{background:#e0e7e1}
body.light .srow{border-color:#eef2ee}
body.light .sigpad{background:#f4faf5;border-color:#a9d6b8}
body.light .toggle{background:#cdd9d0}
body.light .toggle.on{background:#16a34a}
body.light .lives-row{border-color:#eef2ee}
body.light .tower-alert{background:#fff}
body.light .dstep.now{background:rgba(22,163,74,.08)}
body.light .estimate .row.total b,body.light .price .p,body.light .matchpct{color:#15803d}
body.light .badge-urgent{background:rgba(220,38,38,.1);color:#dc2626}
body.light .chk.urgent.on{border-color:#dc2626;color:#dc2626;background:rgba(220,38,38,.06)}
.lang-sel{background:#0d1410;border:1px solid #2a3a30;border-radius:9px;color:var(--muted);font-size:12.5px;padding:6px 8px;cursor:pointer;font-family:inherit;outline:none}
.lang-sel:hover{border-color:var(--green);color:var(--text)}
body.light .lang-sel{background:#fff;border-color:#c6d3c9;color:var(--text)}
.theme-btn{border:1px solid #2a3a30;background:transparent;border-radius:9px;font-size:15px;cursor:pointer;padding:6px 10px;color:var(--muted);line-height:1}
.theme-btn:hover{border-color:var(--green);color:var(--green)}
body.light .theme-btn{border-color:#c6d3c9}

/* ---- formulaire plein écran + autocomplete + urgence ---- */
.wrap.wide{max-width:none;padding:26px 32px 80px}
.bigform{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.ac-wrap{position:relative}
.ac-list{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#0c120e;border:1px solid #24352a;border-radius:11px;z-index:90;max-height:230px;overflow:auto;display:none;box-shadow:0 20px 50px rgba(0,0,0,.55)}
.ac-item{padding:10px 13px;font-size:13px;cursor:pointer;color:var(--muted);border-bottom:1px solid #12201a}
.ac-item:last-child{border-bottom:none}
.ac-item:hover{background:rgba(74,222,128,.08);color:var(--text)}
.ac-item .sub{font-size:11px;color:#54655b}
.chks{display:flex;gap:9px;flex-wrap:wrap;margin:4px 0 14px}
.chk{border:1px solid #223428;background:#0a110d;border-radius:10px;padding:8px 13px;font-size:12.5px;color:var(--muted);cursor:pointer;display:inline-flex;gap:7px;align-items:center;font-weight:600;user-select:none;transition:.15s}
.chk:hover{border-color:#2f4a3a}
.chk.on{border-color:var(--green);color:var(--green);background:rgba(74,222,128,.08)}
.chk.urgent.on{border-color:#f87171;color:#f87171;background:rgba(248,113,113,.08)}
.badge-urgent{font-size:10.5px;font-weight:800;letter-spacing:.05em;padding:3px 9px;border-radius:20px;background:rgba(248,113,113,.15);color:#f87171}

/* ---- layout MAP-FIRST : panneau gauche + carte dominante ---- */
.ops-layout{display:grid;grid-template-columns:430px 1fr;gap:16px;align-items:start}
.ops-left{display:grid;gap:14px;max-height:calc(100vh - 118px);overflow:auto;padding-right:4px;align-content:start}
.ops-map{position:sticky;top:78px;height:calc(100vh - 112px);padding:10px}
.ops-map .mapbox-el{height:calc(100% - 30px)}
.ops-map .maptitle{font-size:12px;letter-spacing:.14em;color:var(--muted);font-weight:700;padding:2px 6px 8px;display:flex;justify-content:space-between}
@media(max-width:1020px){.ops-layout{grid-template-columns:1fr}.ops-map{position:static;height:440px}.ops-left{max-height:none;overflow:visible}}

/* ---- popups de mission (validation 1 clic) ---- */
.notifpop{position:fixed;top:76px;right:18px;z-index:130;width:350px;display:grid;gap:10px;max-width:92vw}
.notifcard{background:#0e1a12;border:1px solid var(--green);border-radius:14px;padding:15px 17px;box-shadow:0 22px 60px rgba(0,0,0,.65);animation:tin .3s}
.notifcard .t{font-weight:800;font-size:13.5px}
.notifcard .b{font-size:12.5px;color:var(--muted);margin:4px 0 11px}
.notifcard .via{font-size:10px;letter-spacing:.1em;color:var(--green);border:1px solid rgba(74,222,128,.35);border-radius:20px;padding:1px 8px;margin-left:8px}
body.light .notifcard{background:#fff}

/* ---- formulaire de devis sticky (expéditeur) ---- */
#quoteCard{position:sticky;top:74px;z-index:70;transition:padding .2s,box-shadow .2s}
#quoteCard.stuck{box-shadow:0 26px 60px rgba(0,0,0,.55);border-color:#2b4534;padding:13px 22px}
#quoteCard.stuck h2{font-size:15px;margin-bottom:9px}
#quoteCard.stuck h2 span{display:none}
#quoteCard.stuck .adv{display:none}
#quoteCard.stuck .bigform{gap:10px}
#quoteCard.stuck .field{margin-bottom:5px}
#quoteCard.stuck .field label{margin-bottom:3px}
#quoteCard.stuck .btn-big{padding:10px;font-size:13.5px;border-radius:11px}
#quoteCard.stuck .estimate{margin:8px 0 10px;padding:10px 14px;max-height:210px;overflow:auto}
body.light #quoteCard.stuck{box-shadow:0 26px 60px rgba(0,0,0,.18);border-color:#a9d6b8}

/* ---- barre de devis flottante ---- */
.floatbar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:96;display:flex;gap:13px;align-items:center;background:rgba(10,17,13,.94);backdrop-filter:blur(12px);border:1px solid #2b4534;border-radius:16px;padding:11px 16px;box-shadow:0 18px 50px rgba(0,0,0,.55);max-width:min(92vw,860px);flex-wrap:wrap;animation:fbin .25s}
@keyframes fbin{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
.floatbar .fb-sum{font-size:13px;color:var(--text);font-weight:600;max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.floatbar .fb-sum .mut{color:var(--muted);font-weight:400}
.floatbar .fb-up{border:1px solid #2a3a30;background:transparent;color:var(--muted);border-radius:9px;padding:7px 11px;cursor:pointer;font-size:12px}
.floatbar .fb-up:hover{border-color:var(--green);color:var(--green)}
body.light .floatbar{background:rgba(255,255,255,.95);border-color:#a9d6b8}
@media(max-width:700px){.floatbar .fb-sum{max-width:200px}}

/* ---- layout avec sidebar ---- */
.layout{display:flex;align-items:stretch}
.sidebar{width:222px;flex:none;border-right:1px solid var(--card-border);background:var(--bg-soft);padding:16px 11px 30px;position:sticky;top:62px;height:calc(100vh - 62px);overflow:auto}
.sidebar .slabel{font-size:10px;letter-spacing:.16em;color:#54655b;margin:18px 11px 6px;text-transform:uppercase;font-weight:700}
.sidebar .slabel:first-child{margin-top:4px}
.sidebar .sitem{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;font-size:13.5px;color:var(--muted);cursor:pointer;border:none;background:none;width:100%;text-align:left;font-weight:600;font-family:inherit}
.sidebar .sitem:hover{color:var(--text);background:rgba(255,255,255,.03)}
.sidebar .sitem.on{background:rgba(74,222,128,.1);color:var(--green)}
.sidebar .sitem .badge{margin-left:auto;min-width:19px;text-align:center;padding:1px 6px;border-radius:20px;background:rgba(74,222,128,.15);color:var(--green);font-size:11px}
.sidebar .sitem .soon{margin-left:auto;font-size:9.5px;color:#54655b;border:1px solid #1c2a20;border-radius:20px;padding:1px 7px}
.main{flex:1;min-width:0}
@media(min-width:901px){.layout .tabs{display:none}}
@media(max-width:900px){.sidebar{display:none}}

/* ---- paramètres ---- */
.set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;align-items:start}
.srow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid #14231a;font-size:13.5px}
.srow:last-child{border-bottom:none}
.srow .sl{color:var(--text);font-weight:600}
.srow .sd{font-size:11.5px;color:var(--muted);font-weight:400;margin-top:1px}
.srow select,.srow input{background:#0a110d;border:1px solid #223428;border-radius:9px;color:var(--text);font-size:13px;padding:8px 11px;font-family:inherit;outline:none;max-width:170px}
.srow select:focus,.srow input:focus{border-color:var(--green)}
.toggle{position:relative;width:40px;height:22px;background:#1f2d24;border-radius:20px;cursor:pointer;transition:.2s;flex:none}
.toggle.on{background:var(--green)}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#f2f5f3;transition:.2s}
.toggle.on::after{left:21px}

@media(max-width:900px){.grid2{grid-template-columns:1fr}.topbar{padding:0 12px}.topbar .right .uname{display:none}}

/* ==== NAV EN TIROIR (hamburger ☰) ==== */
.burger{border:1px solid #2a3a30;background:transparent;color:var(--text);border-radius:9px;font-size:17px;padding:4px 12px;cursor:pointer;margin-right:10px;line-height:1.4}
.burger:hover{border-color:var(--green);color:var(--green)}
body.light .burger{border-color:#c6d3c9}
.layout{display:block}
.sidebar{position:fixed;left:0;top:62px;bottom:0;width:258px;z-index:160;transform:translateX(-105%);transition:transform .22s ease;height:auto;box-shadow:24px 0 60px rgba(0,0,0,.5);display:block;background:var(--bg-soft)}
.sidebar.open{transform:translateX(0)}
.side-backdrop{position:fixed;inset:62px 0 0 0;background:rgba(3,6,4,.5);backdrop-filter:blur(2px);z-index:150;display:none}
.side-backdrop.on{display:block}
.layout .tabs{display:none}
@media(max-width:900px){.sidebar{display:block}}

/* ==== MODE CARTE PLEIN ÉCRAN (vues opérationnelles) ==== */
body.mapfs .wrap{max-width:none;padding:10px 12px 12px}
body.mapfs .ops-layout{grid-template-columns:400px 1fr;gap:12px;height:calc(100vh - 86px)}
body.mapfs .ops-left{position:sticky;top:72px;max-height:100%;overflow:auto}
body.mapfs .ops-map{position:relative;top:0;height:100%;border-radius:14px}
body.mapfs .wrap>.kpis{display:none}
@media(max-width:1020px){
  body.mapfs .ops-layout{height:auto;grid-template-columns:1fr}
  body.mapfs .ops-map{height:68vh}
  body.mapfs .ops-left,.ops-right{position:static;max-height:none;overflow:visible}
}

/* ---- sidebar droite : missions en cours (rail PERSISTANT sur tous les onglets) ---- */
.ops-right{position:sticky;top:72px;max-height:100%;overflow:auto;display:grid;gap:9px;align-content:start;padding-left:2px}
.ops-right.fixedrail{position:fixed;right:12px;top:74px;bottom:12px;width:318px;max-height:none;z-index:45}
body:has(.fixedrail) .main .wrap{padding-right:346px}
@media(max-width:1100px){
  .ops-right.fixedrail{display:none}
  body:has(.fixedrail) .main .wrap{padding-right:12px}
}
@media(min-width:1101px){
  body:has(.fixedrail) .notifpop{right:346px} /* les popups n'écrasent pas le rail missions */
}

/* ==== MISSIONS SPLIT + KANBAN SUPPORT ==== */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:1000px){.split2{grid-template-columns:1fr}}
.mrow{background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:11px 14px;font-size:12.5px}
.mrow.disputed{border-color:#f87171;background:rgba(248,113,113,.07)}
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:start}
@media(max-width:1100px){.kanban{grid-template-columns:repeat(2,1fr)}}
.kcol{background:var(--bg-soft);border:1px solid var(--card-border);border-radius:14px;padding:12px;display:grid;gap:9px;align-content:start;min-height:200px}
.khead{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--muted);padding:2px 4px 6px;border-bottom:1px solid var(--card-border)}
.kcard{background:var(--card);border:1px solid var(--card-border);border-radius:11px;padding:11px 13px;font-size:12.5px}
.kcard.disputed{border-color:#f87171}
body.light .kcol{background:#eef1ee}

/* ==== SIDEBAR ANCRÉE PAR DÉFAUT hors tableau de bord ====
   Sur le dashboard (body.mapfs, carte plein écran) : tiroir + hamburger.
   Sur tous les autres onglets : navigation visible en permanence à gauche. */
@media(min-width:901px){
  body:not(.mapfs) .sidebar{transform:none;box-shadow:none;width:232px;border-right:1px solid var(--card-border)}
  body:not(.mapfs) .burger{display:none}
  body:not(.mapfs) .side-backdrop{display:none!important}
  body:not(.mapfs) .main{margin-left:232px}
}
.ops-right .m-h{font-size:11px;letter-spacing:.16em;color:var(--muted);font-weight:800;padding:4px 4px 2px}
.mcard{background:var(--card);border:1px solid var(--card-border);border-radius:13px;padding:12px 14px;font-size:12.5px}
.mcard.done{border-color:rgba(74,222,128,.45);background:rgba(74,222,128,.05)}
.mcard .m-route{font-weight:800;font-size:13px}
.mcard .m-meta{color:var(--muted);font-size:11px;margin:3px 0 7px}
.mcard .m-eta{font-size:12.5px}
.mcard .m-eta b{color:var(--text)}
.mcard .m-punct{font-weight:700;font-size:12px;margin-top:3px}
body.light .mcard.done{background:rgba(22,163,74,.06)}

/* ---- mise en avant paiement à la livraison ---- */
.paylater{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;user-select:none;
  border:1.5px solid var(--card-border);border-radius:12px;padding:11px 14px;margin:10px 0;transition:all .15s}
.paylater:hover{border-color:var(--green)}
.paylater.on{border-color:var(--green);background:rgba(74,222,128,.08);box-shadow:0 0 0 3px rgba(74,222,128,.12)}
.badge-reco{background:var(--green);color:#08130c;font-size:10px;font-weight:800;letter-spacing:.06em;
  border-radius:999px;padding:2.5px 9px;vertical-align:2px}

/* ---- module chat support ---- */
.chfab{position:fixed;left:18px;bottom:18px;z-index:90;width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;
  background:var(--green);color:#08130c;font-size:22px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.chbadge{position:absolute;top:-4px;right:-4px;background:#f87171;color:#fff;font-size:10px;font-weight:800;border-radius:999px;padding:2px 6px}
.chpanel{position:fixed;left:18px;bottom:18px;z-index:95;width:330px;max-height:460px;display:flex;flex-direction:column;
  background:var(--bg-soft,#0c120e);border:1px solid var(--card-border,#24352a);border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.chhead{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--card-border,#24352a)}
.chhead .chx{margin-left:auto;background:none;border:none;color:var(--muted);font-size:19px;cursor:pointer}
.chtabs{display:flex;gap:5px;padding:7px 10px 0;flex-wrap:wrap}
.chtabs button{background:none;border:1px solid var(--card-border);border-radius:999px;color:var(--muted);font-size:10.5px;padding:3px 9px;cursor:pointer}
.chtabs button.on{border-color:var(--green);color:var(--green)}
.chbody{flex:1;overflow:auto;padding:10px 12px;display:grid;gap:7px;max-height:280px}
.chmsg .chb{font-size:12px;line-height:1.45;border-radius:11px;padding:7px 10px;max-width:88%;display:inline-block}
.chmsg.me{text-align:right}.chmsg.me .chb{background:rgba(74,222,128,.14);border:1px solid rgba(74,222,128,.3)}
.chmsg.ai .chb{background:rgba(56,189,248,.10);border:1px solid rgba(56,189,248,.28)}
.chmsg.ag .chb{background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.3)}
.chmsg.sys .chb{background:none;border:none;color:var(--muted);font-size:10.5px;padding:1px 2px}
.chmsg .cht{color:var(--muted);font-size:9.5px}
.chinput{display:flex;gap:7px;padding:9px 11px;border-top:1px solid var(--card-border)}
.chinput input{flex:1}
.chinbox{display:grid;grid-template-columns:280px 1fr;gap:14px;align-items:start}
.chlist{display:grid;gap:6px;max-height:380px;overflow:auto}
.chitem{border:1px solid var(--card-border);border-radius:10px;padding:8px 11px;font-size:12.5px;cursor:pointer}
.chitem.on{border-color:var(--green)}
.chitem.esc{border-color:#f87171;background:rgba(248,113,113,.06)}
@media(max-width:820px){.chinbox{grid-template-columns:1fr}}

/* ================= IDENTITÉ TRUCKKON ================= */
:root{
  --tk-blue:#2563eb; --tk-cyan:#06b6d4; --tk-green:#22c55e; --tk-lime:#a3e635; --tk-navy:#0f1b33;
  --tk-grad:linear-gradient(92deg,#2563eb 0%,#06b6d4 38%,#22c55e 72%,#a3e635 100%);
}
body,button,input,select,textarea{font-family:"Poppins","Inter",system-ui,sans-serif}
h1,h2,h3,.logo,.kpi .v,.big{font-family:"Poppins","Inter",sans-serif;letter-spacing:-.01em}

/* logo image, bascule dark / light */
.logo{display:flex;align-items:center;gap:10px}
.logo svg{display:none}
.logo-img{height:48px;width:auto;display:block;transition:transform .25s cubic-bezier(.34,1.56,.64,1),filter .25s;
  animation:tkPulse 2s ease-in-out infinite;transform-origin:left center}
.logo:hover .logo-img{animation-play-state:paused;transform:scale(1.09) rotate(-1.5deg);
  filter:drop-shadow(0 0 14px rgba(6,182,212,.55)) drop-shadow(0 0 26px rgba(34,197,94,.3))}
@keyframes tkPulse{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(6,182,212,0))}
  50%{transform:scale(1.035);filter:drop-shadow(0 0 10px rgba(6,182,212,.35))}
}
@media (prefers-reduced-motion:reduce){.logo-img{animation:none}}
.logo .logo-light{display:none}
body.light .logo .logo-dark{display:none}
body.light .logo .logo-light{display:block}
.logo .sub{display:inline-block;font-size:9px;letter-spacing:.18em;color:var(--muted);border:1px solid var(--card-border);border-radius:999px;padding:3px 9px;margin-left:2px}

/* topbar : liseré dégradé signature */
.topbar{border-bottom:none;position:relative}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tk-grad);opacity:.85}

/* boutons : dégradé de marque + relief moderne */
.btn-green{background:linear-gradient(92deg,var(--tk-cyan),var(--tk-green));border:none;color:#04121f;font-weight:700;
  box-shadow:0 6px 18px rgba(6,182,212,.28);transition:transform .12s,box-shadow .12s}
.btn-green:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(34,197,94,.34)}
.btn-outline:hover{border-color:var(--tk-cyan);color:var(--tk-cyan)}
.badge{background:var(--tk-grad);color:#04121f;font-weight:800}
.badge-reco{background:linear-gradient(92deg,var(--tk-cyan),var(--tk-lime));color:#04121f}

/* cards & kpis : coins plus doux, halo subtil */
.card{border-radius:16px;transition:border-color .15s}
.card:hover{border-color:rgba(6,182,212,.35)}
.kpi{border-radius:14px}
.kpi .v.g{background:var(--tk-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* sidebar : item actif au dégradé */
.sitem.on{background:linear-gradient(92deg,rgba(37,99,235,.16),rgba(34,197,94,.14));border-left:3px solid var(--tk-cyan)}
.sitem:hover{color:var(--tk-cyan)}

/* progression & rails */
.prog i{background:var(--tk-grad)}
.paylater.on{border-color:var(--tk-cyan);background:rgba(6,182,212,.07);box-shadow:0 0 0 3px rgba(6,182,212,.12)}
.chfab{background:linear-gradient(135deg,var(--tk-cyan),var(--tk-green))}
.maplegend{border-color:rgba(6,182,212,.3)}
.matchpct{color:var(--tk-cyan)}
.big{background:var(--tk-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
body.light .topbar::after{opacity:1}

/* ---- dashboard shipper : 4 colonnes ---- */
.dash4{display:grid;grid-template-columns:1.2fr .95fr 1.25fr;gap:14px;align-items:start}
.d4col{display:grid;gap:12px;min-width:0}
.d4head{font-size:11px;letter-spacing:.13em;color:var(--muted);font-weight:800;display:flex;align-items:center;gap:8px;text-transform:uppercase}
@media(max-width:1280px){.dash4{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.dash4{grid-template-columns:1fr}}
.tbadge{font-size:9.5px;font-weight:800;letter-spacing:.05em;border-radius:999px;padding:2.5px 8px;vertical-align:1px}
.tbadge.int{background:rgba(74,222,128,.16);color:var(--green);border:1px solid rgba(74,222,128,.35)}
.tbadge.ext{background:rgba(251,191,36,.14);color:#fbbf24;border:1px solid rgba(251,191,36,.35)}

/* ---- pad de signature CMR externe ---- */
.sigpad{width:100%;background:#fff;border:1.5px dashed #94a3b8;border-radius:11px;cursor:crosshair;touch-action:none;display:block}

/* ---- prospection : étiquettes entreprises ---- */
.ptag{display:inline-block;font-size:12px;font-weight:600;border:1.5px solid var(--card-border);border-radius:999px;
  padding:6px 13px;cursor:pointer;transition:all .13s;user-select:none}
.ptag:hover{transform:translateY(-1px);filter:brightness(1.15)}

/* ---- agents IA (robot) ---- */
.agfab{position:fixed;right:344px;bottom:18px;z-index:90;width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#2563eb,#06b6d4 55%,#22c55e);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(37,99,235,.4);animation:tkPulse 2s ease-in-out infinite}
body:not(:has(.fixedrail)) .agfab{right:18px}
.agpanel{position:fixed;right:344px;bottom:18px;z-index:95;width:380px;max-height:540px;display:flex;flex-direction:column;
  background:var(--bg-soft,#0c120e);border:1.5px solid rgba(6,182,212,.4);border-radius:16px;overflow:hidden;box-shadow:0 22px 55px rgba(0,0,0,.55)}
body:not(:has(.fixedrail)) .agpanel{right:18px}
.agico{color:#06b6d4;display:flex}
.agpanel .chbody{max-height:360px}
.agmic{border:1px solid var(--card-border);background:none;border-radius:10px;padding:0 10px;cursor:pointer;font-size:15px}
.agmic.rec{background:#ef4444;border-color:#ef4444;animation:tkPulse 1s infinite}
@media(max-width:900px){.agfab,.agpanel{right:18px}}
/* ---- icônes SVG dégradées ---- */
.tkic{width:1.05em;height:1.05em;vertical-align:-0.16em;display:inline-block;margin-right:1px}
h1 .tkic,h2 .tkic{width:1em;height:1em}
.btn-green .tkic{stroke:#04121f!important}

/* ================= SKIN SHIPPER LIGHT (maquette) ================= */
body.shipper-light.light{background:#f5f7fb;color:#0f1b33}
.shipper-light.light .topbar{background:#fff;border-bottom:1px solid #e8ecf3;box-shadow:0 1px 8px rgba(15,27,51,.04)}
.shipper-light.light .topbar::after{opacity:.5;height:2px}
.shipper-light.light .logo .sub{border:1px solid #dbe3ee;background:#f2f6fb;color:#334155;font-weight:700}
.topsearch{flex:1;max-width:640px;display:flex;align-items:center;gap:9px;background:#f2f5fa;border:1.5px solid #e4e9f2;
  border-radius:12px;padding:9px 14px;margin:0 12px}
.shipper-light.light .topsearch:focus-within{border-color:#06b6d4;background:#fff}
.topsearch input{flex:1;border:none;background:none;outline:none;font-family:Poppins,sans-serif;font-size:13px;color:inherit}
.topsearch kbd{font-size:10.5px;color:#94a3b8;border:1px solid #e2e8f0;border-radius:6px;padding:2px 7px;background:#fff}
.bellbtn{position:relative;border:1.5px solid #e4e9f2;background:#fff;border-radius:11px;width:38px;height:38px;cursor:pointer;font-size:15px}
.bellbtn i{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:#ef4444}
.avat{display:flex;align-items:center;gap:9px;border:1.5px solid #e4e9f2;background:#fff;border-radius:12px;padding:5px 12px 5px 6px;font-size:12px;line-height:1.25;cursor:pointer}
.avat i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#22c55e,#06b6d4);color:#fff;font-style:normal;font-weight:800;display:flex;align-items:center;justify-content:center}
.avat em{color:#64748b;font-style:normal;font-size:10.5px}
.shipper-light.light .sidebar{background:#fff;border-right:1px solid #e8ecf3}
.shipper-light.light .sitem{color:#334155;border-radius:11px;margin:2px 10px;font-weight:600}
.shipper-light.light .sitem:hover{background:#f2f6fb;color:#0f1b33}
.shipper-light.light .sitem.on{background:#e9f9f0;color:#16a34a;border-left:3px solid #22c55e}
.helpcard{margin:18px 12px 10px;border:1.5px solid #e4e9f2;border-radius:14px;padding:13px;font-size:12px;background:#f8fafd}
.helpcard p{color:#64748b;margin:4px 0 9px;font-size:11.5px}
.shipper-light.light .card{background:#fff;border-color:#e8ecf3;box-shadow:0 2px 10px rgba(15,27,51,.04)}
/* --- dashboard dz --- */
.dz-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap;padding:6px 0 16px}
.dz-hello{display:flex;align-items:center;gap:12px;font-size:15px;flex-wrap:wrap}
.dz-org{color:#64748b;font-size:11.5px}
.dz-date{color:#64748b;font-size:12px;border:1px solid #e4e9f2;border-radius:9px;padding:4px 10px;background:#fff}
.dz-title{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.02em;margin:8px 0 4px}
.dz-sub{color:#64748b;font-size:13.5px;max-width:640px}
.dz-cta{display:flex;gap:10px;flex-wrap:wrap;padding-top:6px}
.shipper-light.light .btn-green{background:#22c55e;color:#fff;box-shadow:0 8px 20px rgba(34,197,94,.3)}
.shipper-light.light .btn-outline{background:#fff;border-color:#dbe3ee;color:#0f1b33}
.dz-grid{display:grid;grid-template-columns:1fr 372px;gap:16px;align-items:start}
@media(max-width:1150px){.dz-grid{grid-template-columns:1fr}}
.dz-main,.dz-side{display:grid;gap:16px;min-width:0}
.dz-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.dz-kpis{grid-template-columns:repeat(2,1fr)}}
.dz-kpi{padding:16px 18px}
.dz-kico{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,rgba(34,197,94,.14),rgba(6,182,212,.14));display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:10px}
.dz-klab{font-size:12px;color:#64748b}
.dz-kval{font-size:25px;font-weight:800;letter-spacing:-.02em}
.dz-kfoot{display:flex;align-items:center;gap:8px;font-size:11.5px;margin-top:4px}
.dz-kfoot .g{color:#16a34a;font-weight:700}.dz-kfoot .b{color:#3b82f6;font-weight:700}
.dz-kvs{color:#94a3b8;font-size:10.5px}
.dz-spark{width:82px;height:36px;margin-left:auto}
.dz-card{padding:18px 20px}
.dz-cardhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px}
.dz-cardhead h2{font-size:15px;margin:0}
.dz-cardhead a{font-size:12px;color:#2563eb;font-weight:600}
.dz-n{color:#64748b;font-weight:600;font-size:13px}
.dz-pill{font-size:11.5px;color:#334155;border:1px solid #e4e9f2;border-radius:9px;padding:4px 10px}
.dz-badge{background:#fee2e2;color:#dc2626;border-radius:999px;font-size:11px;font-weight:800;padding:2px 8px}
.dz-row2{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
@media(max-width:900px){.dz-row2{grid-template-columns:1fr}}
/* table missions */
.ztable{display:grid;grid-template-columns:1.6fr .9fr 1.1fr .8fr .8fr 1fr;gap:10px;align-items:center;padding:10px 6px}
.zhead{font-size:10px;letter-spacing:.1em;color:#94a3b8;border-bottom:1px solid #eef2f7;font-weight:700}
.zrow{border-bottom:1px solid #f1f5f9;font-size:12.5px;cursor:pointer;border-radius:10px;transition:background .12s}
.zrow:hover{background:#f8fafd}
.zrow em{color:#94a3b8;font-style:normal;font-size:10.5px}
.zpill{font-size:11px;font-weight:700;border-radius:999px;padding:4px 10px;white-space:nowrap}
.zpill.go{background:#e7f8ee;color:#16a34a}.zpill.wait{background:#e8f0fe;color:#2563eb}
.zpill.ok{background:#eef7f1;color:#15803d}.zpill.warn{background:#fef3e2;color:#d97706}
.zprog{height:7px;background:#eef2f7;border-radius:99px;overflow:hidden;margin-bottom:3px}
.zprog i{display:block;height:100%;border-radius:99px}
/* actions requises */
.zact{display:flex;align-items:center;gap:11px;border:1px solid #eef2f7;border-radius:12px;padding:11px 13px;margin-bottom:9px;font-size:12.5px}
.zact em{color:#64748b;font-style:normal;font-size:11px}
.zact .btn{margin-left:auto;flex:none}
.zaic{width:34px;height:34px;border-radius:10px;background:#fff7ed;display:flex;align-items:center;justify-content:center;font-size:15px;flex:none}
/* favoris */
.zfav{display:flex;align-items:center;gap:11px;border-bottom:1px solid #f1f5f9;padding:9px 2px;font-size:12.5px}
.zfav em{color:#94a3b8;font-style:normal;font-size:10.5px}
.zfavlogo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#0f1b33,#334155);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.zfavr{margin-left:auto;text-align:right}
.zfavr b{color:#16a34a}
.dz-card.bigmap .mapbox-el{height:62vh!important}
/* pages internes en clair : tableaux/inputs déjà couverts par body.light */
.shipper-light.light input,.shipper-light.light select,.shipper-light.light textarea{background:#fff;border-color:#dbe3ee;color:#0f1b33}
.shipper-light.light .subnav,.shipper-light.light .estimate{background:#fff}
@media(max-width:1000px){.topsearch{display:none}}