/* ============================================================
   EMS-COLISGEST — feuille de style (thème logistique)
   Palette : Electric Blue + Orange + Midnight Navy (Logistics).
   Clair & sombre. Typo : Inter (texte) + Poppins (titres).
   ============================================================ */
:root{
  --ems-primary:#1479D1; --ems-primary-600:#0F6BC0; --ems-primary-700:#0B3A66;
  --ems-accent:#FF7A00; --ems-cyan:#00C7D9; --ems-danger:#E5485D; --ems-success:#18B981;
  --ems-bg:#F4F7FA; --ems-surface:#ffffff; --ems-surface-2:#EEF3F8;
  --ems-text:#0A1728; --ems-muted:#637083; --ems-border:#D6E0EA;
  --ems-sidebar:#071426; --ems-sidebar-2:#0B3A66; --ems-sidebar-text:#B9C7D9;
  --ems-focus:rgba(20,121,209,.35);
  --ems-radius:14px;
  --ems-shadow:0 1px 3px rgba(10,23,40,.08),0 8px 24px -12px rgba(10,23,40,.25);
  --ems-shadow-lg:0 6px 16px rgba(10,23,40,.10),0 18px 40px -18px rgba(10,23,40,.38);
  --ems-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ems-font-head:"Poppins","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
[data-bs-theme="dark"]{
  --ems-primary:#3B93E0; --ems-primary-600:#1479D1; --ems-primary-700:#0B3A66;
  --ems-bg:#071426; --ems-surface:#0B1F35; --ems-surface-2:#0E2743;
  --ems-text:#E6EDF5; --ems-muted:#8CA0B8; --ems-border:#1E3350;
  --ems-sidebar:#050F1C; --ems-sidebar-2:#0B3059; --ems-sidebar-text:#AFC2D8;
  --ems-focus:rgba(59,147,224,.45);
  --ems-shadow:0 1px 3px rgba(0,0,0,.4),0 12px 28px -14px rgba(0,0,0,.6);
  --ems-shadow-lg:0 8px 20px rgba(0,0,0,.5),0 22px 48px -18px rgba(0,0,0,.72);
}
*{box-sizing:border-box}
body{background:var(--ems-bg);color:var(--ems-text);font-family:var(--ems-font);margin:0;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,.ems-page-title,.ems-brand-title{font-family:var(--ems-font-head)}

/* ---------- Transitions & états d'interaction globaux ---------- */
a,button,.btn,.ems-nav-link,.ems-card,.ems-kpi,.form-control,.form-select,.ems-live-item{
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .18s ease,transform .08s ease}
/* Anneau de focus clavier homogène (accessibilité) */
:focus-visible{outline:2px solid var(--ems-primary);outline-offset:2px;border-radius:6px}
.btn:focus-visible,.ems-nav-link:focus-visible,.ems-theme-btn:focus-visible,.ems-burger:focus-visible,
.ems-logout:focus-visible,.ems-install:focus-visible{outline:2px solid var(--ems-primary);outline-offset:2px;box-shadow:none}
.form-control:focus-visible,.form-select:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .ems-card:hover,.ems-kpi:hover,.btn:active,.ems-nav-link:active,.ems-install:active{transform:none!important}
}

/* ---------- Shell ---------- */
.ems-shell{display:flex;min-height:100vh}
.ems-sidebar{width:260px;flex-shrink:0;background:linear-gradient(180deg,var(--ems-sidebar),var(--ems-sidebar-2));
  color:var(--ems-sidebar-text);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:1040}
.ems-main{flex:1;margin-left:260px;display:flex;flex-direction:column;min-width:0}
.ems-backdrop{display:none}

/* ---------- Brand ---------- */
.ems-brand{display:flex;align-items:center;gap:.6rem;padding:1rem 1rem;border-bottom:1px solid rgba(255,255,255,.08)}
.ems-brand-mark{background:var(--ems-accent);color:#3a2400;font-weight:800;border-radius:10px;padding:.35rem .5rem;letter-spacing:.5px;box-shadow:0 6px 16px -6px rgba(255,122,0,.6)}
.ems-brand-text{min-width:0}
.ems-brand-title{font-weight:700;letter-spacing:.3px;color:#fff;font-size:.95rem;line-height:1.15;white-space:nowrap}
.ems-brand-sub{font-size:.72rem;opacity:.7;white-space:nowrap}

/* ---------- Nav ---------- */
.ems-nav{padding:.75rem;flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.ems-nav::-webkit-scrollbar{width:8px}
.ems-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:8px}
.ems-nav::-webkit-scrollbar-track{background:transparent}
.ems-nav-link{display:flex;align-items:center;gap:.7rem;color:var(--ems-sidebar-text);text-decoration:none;
  padding:.62rem .8rem;border-radius:10px;margin-bottom:.15rem;font-size:.94rem;white-space:nowrap}
.ems-nav-link i{font-size:1.05rem;opacity:.9;width:1.2rem;text-align:center}
.ems-nav-link:hover{background:rgba(255,255,255,.09);color:#fff}
.ems-nav-link:active{transform:translateY(1px)}
.ems-nav-link.active{background:var(--ems-primary);color:#fff;box-shadow:0 8px 18px -10px rgba(20,121,209,.95)}
.ems-nav-link.active i{opacity:1}
.ems-nav-sep{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;opacity:.55;margin:1rem .8rem .4rem}
/* ---- Accordéons de la sidebar ---- */
.ems-nav-group{margin-top:.35rem}
.ems-nav-group-head{display:flex;align-items:center;width:100%;gap:.5rem;background:transparent;border:0;
  color:#9CA3AF;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  padding:.55rem .8rem .35rem;cursor:pointer;border-radius:8px}
.ems-nav-group-head:hover{color:#cdd7e5}
.ems-nav-group-head span{flex:1;text-align:left}
.ems-group-icon{font-size:.95rem;opacity:.9;width:1.1rem;text-align:center;flex-shrink:0}
.ems-chev{font-size:.8rem;opacity:.8;transition:transform .2s ease}
.ems-chev.rot{transform:rotate(180deg)}
/* Corps repliable : transition fluide via grid-template-rows (0fr -> 1fr), sans plugin */
.ems-nav-group-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.ems-nav-group-body.open{grid-template-rows:1fr}
.ems-nav-group-inner{overflow:hidden;min-height:0}
/* Pastille compteur */
.ems-nav-badge{margin-left:auto;background:var(--ems-primary);color:#fff;font-size:.66rem;font-weight:700;
  line-height:1;padding:.2rem .42rem;border-radius:999px;min-width:1.25rem;text-align:center}
.ems-nav-link.active .ems-nav-badge{background:#fff;color:var(--ems-primary)}
.ems-brand-logo{width:42px;height:42px;object-fit:contain;border-radius:11px;background:transparent;padding:0;flex-shrink:0;box-shadow:0 4px 12px -4px rgba(0,0,0,.5)}
.ems-sidebar-foot{padding:1rem 1.25rem;border-top:1px solid rgba(255,255,255,.08)}
.ems-role-badge{background:rgba(255,255,255,.14);color:#fff}
/* Bouton d'installation PWA */
.ems-install{width:100%;margin-top:.8rem;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  background:var(--ems-accent);color:#3a2400;border:0;font-weight:700;font-size:.86rem;border-radius:10px;
  padding:.58rem .8rem;box-shadow:0 8px 18px -8px rgba(255,122,0,.7);cursor:pointer}
.ems-install:hover{filter:brightness(1.06)}
.ems-install:active{transform:translateY(1px)}
/* Signature — orange néon */
.ems-signature{margin-top:.7rem;font-size:.72rem;font-weight:700;letter-spacing:.5px;color:#ff7a00;
  text-shadow:0 0 6px rgba(255,122,0,.85),0 0 12px rgba(255,122,0,.5)}

/* ---------- Topbar ---------- */
.ems-topbar{position:sticky;top:0;z-index:1020;display:flex;align-items:center;gap:.75rem;
  background:var(--ems-surface);
  background:color-mix(in srgb,var(--ems-surface) 88%,transparent);border-bottom:1px solid var(--ems-border);
  padding:.7rem 1.25rem;backdrop-filter:blur(8px)}
.ems-page-title{font-size:1.15rem;font-weight:700;margin:0}
.ems-theme-btn,.ems-burger{background:var(--ems-surface-2);border:1px solid var(--ems-border);color:var(--ems-text)}
.ems-theme-btn:hover,.ems-burger:hover{border-color:var(--ems-primary);color:var(--ems-primary)}
.ems-logout{background:transparent;border:1px solid var(--ems-border);color:var(--ems-text)}
.ems-logout:hover{background:var(--ems-danger);border-color:var(--ems-danger);color:#fff}

/* ---------- Content ---------- */
.ems-content{padding:1.5rem;max-width:1280px;width:100%}

/* ---------- Cards ---------- */
.ems-card{background:var(--ems-surface);border:1px solid var(--ems-border);border-radius:var(--ems-radius);box-shadow:var(--ems-shadow)}
.ems-card:hover{box-shadow:var(--ems-shadow-lg)}
.ems-card .ems-card-head{padding:1rem 1.25rem;border-bottom:1px solid var(--ems-border);display:flex;align-items:center;gap:.5rem}
.ems-card .ems-card-body{padding:1.25rem}

/* ---------- KPI ---------- */
.ems-kpi{background:var(--ems-surface);border:1px solid var(--ems-border);border-radius:var(--ems-radius);
  padding:1.15rem 1.25rem;box-shadow:var(--ems-shadow);position:relative;overflow:hidden}
.ems-kpi:hover{transform:translateY(-2px);box-shadow:var(--ems-shadow-lg)}
.ems-kpi .ems-kpi-ic{position:absolute;right:.9rem;top:.9rem;font-size:1.7rem;opacity:.16}
.ems-kpi .ems-kpi-val{font-size:1.9rem;font-weight:800;line-height:1;font-family:var(--ems-font-head)}
.ems-kpi .ems-kpi-lab{color:var(--ems-muted);font-size:.85rem;margin-top:.35rem}
.ems-kpi.accent{border-left:4px solid var(--ems-primary)}
.ems-kpi.warn{border-left:4px solid var(--ems-accent)}
.ems-kpi.danger{border-left:4px solid var(--ems-danger)}
.ems-kpi.success{border-left:4px solid var(--ems-success)}
.ems-kpi.info{border-left:4px solid var(--ems-cyan)}

/* ---------- Tables ---------- */
.ems-table{width:100%;border-collapse:separate;border-spacing:0}
.ems-table th{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ems-muted);
  text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--ems-border)}
.ems-table td{padding:.75rem .9rem;border-bottom:1px solid var(--ems-border);vertical-align:middle}
.ems-table tr:hover td{background:var(--ems-surface-2)}
.ems-table tr:last-child td{border-bottom:0}

/* ---------- Badges statut (sémantique palette) ---------- */
.ems-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:600;
  padding:.25rem .6rem;border-radius:999px;border:1px solid transparent}
/* bleu = en mouvement | cyan = nouveau | orange = action requise | vert = succès | rouge = problème */
.st-enregistre{background:#DAF6F9;color:#076D7A} .st-ouvert{background:#DAF6F9;color:#076D7A}
.st-charge{background:#E3F0FB;color:#0B3A66} .st-en_transit{background:#E3F0FB;color:#0B3A66}
.st-taxe{background:#FFEAD5;color:#B25400} .st-en_attente{background:#FFEAD5;color:#B25400} .st-partiel{background:#FFEAD5;color:#B25400}
.st-decharge{background:#DFF6EC;color:#0B7A53} .st-livre{background:#DFF6EC;color:#0B7A53}
.st-conforme{background:#DFF6EC;color:#0B7A53} .st-paye{background:#DFF6EC;color:#0B7A53}
.st-manquant{background:#FCE3E7;color:#B0263A} .st-fantome{background:#FCE3E7;color:#B0263A}
.st-litige{background:#FCE3E7;color:#B0263A} .st-impaye{background:#FCE3E7;color:#B0263A}
[data-bs-theme="dark"] .ems-badge{filter:brightness(.94) saturate(1.05)}

/* ---------- Boutons ---------- */
.btn-ems{background:var(--ems-primary);border-color:var(--ems-primary);color:#fff}
.btn-ems:hover{background:var(--ems-primary-600);border-color:var(--ems-primary-600);color:#fff;box-shadow:0 8px 18px -10px rgba(20,121,209,.85)}
.btn-ems:active{transform:translateY(1px)}
.btn-ems-outline{border:1px solid var(--ems-border);color:var(--ems-text);background:var(--ems-surface)}
.btn-ems-outline:hover{background:var(--ems-surface-2);border-color:var(--ems-primary);color:var(--ems-primary)}
.btn-ems-outline:active{transform:translateY(1px)}
.btn-ems-accent{background:var(--ems-accent);border-color:var(--ems-accent);color:#3a2400;font-weight:600}
.btn-ems-accent:hover{filter:brightness(1.06);color:#3a2400}
.btn-ems-accent:active{transform:translateY(1px)}

/* ---------- Forms ---------- */
.form-label{font-weight:600;font-size:.85rem;margin-bottom:.3rem}
.form-control,.form-select{background:var(--ems-surface);border-color:var(--ems-border);color:var(--ems-text)}
.form-control:focus,.form-select:focus{border-color:var(--ems-primary);box-shadow:0 0 0 .2rem var(--ems-focus)}

/* ---------- Empty state ---------- */
.ems-empty{text-align:center;padding:3rem 1rem;color:var(--ems-muted)}
.ems-empty i{font-size:2.5rem;opacity:.4;display:block;margin-bottom:.5rem}

/* ---------- Toasts ---------- */
.ems-toasts{position:fixed;top:1rem;right:1rem;z-index:1080;display:flex;flex-direction:column;gap:.6rem;max-width:360px}
.ems-toast{display:flex;align-items:center;gap:.6rem;background:var(--ems-surface);border:1px solid var(--ems-border);
  border-left:4px solid var(--ems-muted);border-radius:10px;padding:.8rem 1rem;box-shadow:var(--ems-shadow);animation:slideIn .25s ease}
.ems-toast i{font-size:1.15rem}
.ems-toast-success{border-left-color:var(--ems-success)} .ems-toast-success i{color:var(--ems-success)}
.ems-toast-error{border-left-color:var(--ems-danger)} .ems-toast-error i{color:var(--ems-danger)}
.ems-toast-info{border-left-color:var(--ems-primary)} .ems-toast-info i{color:var(--ems-primary)}
.ems-toast-warning{border-left-color:var(--ems-accent)} .ems-toast-warning i{color:var(--ems-accent)}
.ems-toast-close{margin-left:auto;background:none;border:none;font-size:1.2rem;color:var(--ems-muted);cursor:pointer;line-height:1}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

/* ---------- Scanner ---------- */
.scan-wrap{max-width:520px;margin:0 auto}
#reader{border-radius:var(--ems-radius);overflow:hidden;border:1px solid var(--ems-border)}
.scan-feedback{border-radius:var(--ems-radius);padding:1rem;margin-top:1rem;font-weight:600;text-align:center;transition:.2s}
.scan-ok{background:#DFF6EC;color:#0B7A53} .scan-bad{background:#FCE3E7;color:#B0263A} .scan-warn{background:#FFEAD5;color:#B25400}
.scan-list{max-height:320px;overflow-y:auto}
/* Barre d'actions de segment — toujours visible pendant le scan */
.scan-topbar{position:sticky;top:3.1rem;z-index:1010;background:var(--ems-surface);
  border:1px solid var(--ems-border);border-radius:var(--ems-radius);
  padding:.6rem .75rem;margin-bottom:.75rem;box-shadow:0 4px 14px rgba(0,0,0,.10)}
.scan-topbar .scan-topbar-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.scan-topbar .scan-topbar-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-left:auto}
.scan-topbar .btn{white-space:normal}
.btn-ems-warn{background:transparent;border:1px solid #E0A100;color:#B25400}
.btn-ems-warn:hover{background:#FFEAD5;border-color:#B25400;color:#B25400}
@media (max-width:575.98px){
  .scan-topbar .scan-topbar-actions{margin-left:0;width:100%}
  .scan-topbar .scan-topbar-actions>*{flex:1 1 100%}
  .scan-topbar .scan-topbar-actions .btn{width:100%}
}

/* ---------- Cloche temps réel ---------- */
[x-cloak]{display:none!important}
.ems-live-badge{position:absolute;top:-6px;right:-6px;background:var(--ems-danger);color:#fff;
  font-size:.65rem;font-weight:700;min-width:1.1rem;height:1.1rem;line-height:1.1rem;border-radius:999px;padding:0 .25rem}
.ems-live-panel{position:absolute;right:0;top:calc(100% + .5rem);width:300px;max-height:380px;overflow-y:auto;
  background:var(--ems-surface);border:1px solid var(--ems-border);border-radius:12px;box-shadow:var(--ems-shadow);z-index:1090}
.ems-live-head{padding:.7rem 1rem;border-bottom:1px solid var(--ems-border);font-weight:700;font-size:.85rem}
.ems-live-empty{padding:1.2rem;text-align:center;color:var(--ems-muted);font-size:.9rem}
.ems-live-item{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-bottom:1px solid var(--ems-border);
  text-decoration:none;color:var(--ems-text);font-size:.85rem}
.ems-live-item:last-child{border-bottom:0}
.ems-live-item:hover{background:var(--ems-surface-2)}

/* ---------- Responsive ---------- */
@media (max-width:992px){
  .ems-sidebar{transform:translateX(-100%);transition:transform .25s ease}
  .sidebar-open .ems-sidebar{transform:none}
  .ems-main{margin-left:0}
  .sidebar-open .ems-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1030}
}

/* ---------- Barre de progression de navigation (ressenti instantané) ---------- */
#ems-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:2000;
  background:linear-gradient(90deg,var(--ems-primary,#1479D1),var(--ems-accent,#FCA719));
  box-shadow:0 0 8px rgba(20,121,209,.6);opacity:0;transition:width .2s ease,opacity .3s ease;pointer-events:none}
#ems-progress.active{opacity:1}

/* ---------- Ligne de scan en doublon : surbrillance 1 s ---------- */
@keyframes scanDupFlash{0%{background:#FCE3E7}40%{background:#FCE3E7}100%{background:transparent}}
.scan-list .scan-dup{animation:scanDupFlash 1.1s ease-out;border-radius:8px;
  box-shadow:0 0 0 2px #E5485D inset}