/* ============ StockPro — design responsive (PC, tablette, téléphone) ============ */
:root{--p:#2563eb;--p2:#4f46e5;--ok:#16a34a;--ko:#dc2626;--wa:#d97706;--bg:#f3f5fa;--s:#fff;--s2:#f8fafc;--d:#0f172a;--m:#64748b;--b:#e6eaf2;--sh:0 1px 2px rgba(16,24,40,.05),0 8px 22px rgba(16,24,40,.06);--sw:256px}
body.dark{--bg:#0a0f1c;--s:#111a2e;--s2:#0e1729;--d:#e5eaf5;--m:#8b9ab5;--b:#22304a;--sh:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.3)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:14px/1.5 -apple-system,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--d);-webkit-font-smoothing:antialiased}
h1{letter-spacing:-.3px}h3{margin:16px 0 10px}img{max-width:100%}.muted{color:var(--m)}a{color:var(--p)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- Menu latéral ---------- */
.side{position:fixed;inset:0 auto 0 0;width:var(--sw);background:linear-gradient(180deg,#0b1220,#101a30);color:#cbd5e1;padding:14px 12px 16px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;z-index:30;transition:transform .26s ease,box-shadow .26s}
.side::-webkit-scrollbar{width:6px}.side::-webkit-scrollbar-thumb{background:#243352;border-radius:6px}
.side h2{margin:4px 6px 12px;color:#fff;font-size:18px;display:flex;align-items:center;gap:8px;line-height:1.2}
.side .who{color:#e2e8f0;padding:10px 12px;margin-bottom:6px;border-radius:12px;background:#0e1830;border:1px solid #1b2a4a;line-height:1.3}.side .who small{color:#8ea0c0}
.side a{display:flex;align-items:center;gap:8px;color:#b6c2d9;text-decoration:none;padding:10px 12px;border-radius:10px;position:relative;transition:background .15s,color .15s}
.side a:hover{background:#1a2742;color:#fff}
.side a.on{background:linear-gradient(90deg,rgba(37,99,235,.38),rgba(79,70,229,.12));color:#fff;font-weight:600}
.side a.on::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:#60a5fa}
.side .grp{color:#64748b;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:16px 10px 4px}
.side .out{margin-top:auto;color:#fca5a5}.nb{margin-left:auto;background:#dc2626;color:#fff;border-radius:99px;font-size:11px;font-weight:700;padding:1px 8px}
.gs{width:100%;margin:6px 0 4px;padding:10px 12px;border-radius:10px;border:1px solid #223153;background:#0e1830;color:#e2e8f0}.gs::placeholder{color:#7d8db0}.gs:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.25)}
#gsr{background:var(--s);color:var(--d);border-radius:10px;max-height:260px;overflow:auto;box-shadow:0 12px 30px rgba(0,0,0,.35)}
#gsr a{display:block;padding:8px 12px;color:var(--d);border-bottom:1px solid var(--b);font-size:13px;border-radius:0}#gsr a:hover{background:var(--s2);color:var(--d)}#gsr small{color:var(--p);font-weight:700;margin-right:6px}

/* ---------- Barre du haut + bouton hamburger animé ---------- */
.topbar{position:fixed;top:0;left:var(--sw);right:0;height:58px;display:flex;align-items:center;gap:14px;padding:0 22px;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--b);z-index:20;transition:left .26s ease}
body.dark .topbar{background:rgba(17,26,46,.82)}
#tbt{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip{margin-left:auto;background:var(--s2);border:1px solid var(--b);border-radius:99px;padding:6px 14px;font-size:13px;white-space:nowrap}
#menu{width:42px;height:42px;border-radius:12px;border:1px solid var(--b);background:var(--s2);cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0;flex:0 0 auto;transition:background .15s}
#menu:hover{background:var(--b)}#menu i{display:block;width:20px;height:2px;background:var(--d);border-radius:2px;transition:transform .25s,opacity .2s}
body.menu-open #menu i:nth-child(1){transform:translateY(7px) rotate(45deg)}body.menu-open #menu i:nth-child(2){opacity:0}body.menu-open #menu i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.collapsed .side{transform:translateX(-105%)}body.collapsed .topbar{left:0}body.collapsed main{margin-left:0}
#ov{display:none}
main{margin-left:var(--sw);padding:82px 28px 40px;max-width:1800px;transition:margin .26s ease;min-width:0}
main>*{animation:rise .3s ease both}main>*:nth-child(2){animation-delay:.04s}main>*:nth-child(3){animation-delay:.08s}main>*:nth-child(n+4){animation-delay:.12s}

/* ---------- Composants ---------- */
.bar{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}.bar h1{flex:1;margin:0;font-size:24px;min-width:200px}
.card{background:var(--s);border:1px solid var(--b);border-radius:16px;padding:18px;box-shadow:var(--sh);overflow-x:auto}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:18px}
.kpi{position:relative;padding-left:22px}.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(var(--p),#7c3aed)}.kpi span{font-size:12.5px}.kpi b{display:block;font-size:26px;margin-top:4px;letter-spacing:-.5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border:0;border-radius:10px;padding:10px 18px;font:inherit;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(37,99,235,.3);transition:transform .12s,box-shadow .12s,filter .12s;text-decoration:none}
.btn:hover{filter:brightness(1.08);box-shadow:0 5px 14px rgba(37,99,235,.38)}.btn:active{transform:scale(.97)}
.btn.sec{background:var(--s2);color:var(--d);border:1px solid var(--b);box-shadow:none}.btn.sec:hover{background:var(--b)}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--b);border-radius:10px;font:inherit;background:var(--s);color:var(--d);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--p);box-shadow:0 0 0 3px rgba(37,99,235,.18)}
input[type=checkbox],input[type=radio]{width:auto}input[type=file]{padding:8px}input[type=color]{padding:3px;height:42px}
#q{max-width:270px}label{display:block;margin-bottom:12px;font-weight:600;font-size:13px}label input,label select,label textarea{margin-top:5px;font-weight:400}textarea{resize:vertical}
table{width:100%;border-collapse:separate;border-spacing:0}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--m);padding:10px 12px;background:var(--s2);border-bottom:1px solid var(--b)}
th:first-child{border-radius:10px 0 0 10px}th:last-child{border-radius:0 10px 10px 0}
td{padding:12px;border-bottom:1px solid var(--b)}tbody tr:last-child td{border-bottom:0}tbody tr:hover td{background:var(--s2)}.empty{text-align:center;color:var(--m);padding:28px}
.act{white-space:nowrap;text-align:right}.act button{background:var(--s2);color:var(--d);border:1px solid var(--b);border-radius:8px;padding:6px 10px;margin-left:4px;cursor:pointer;font:inherit;transition:.12s}
.act button:hover{border-color:var(--p);color:var(--p)}.act button.ok{background:var(--ok);color:#fff;border-color:var(--ok)}.act button.ok:hover{color:#fff;filter:brightness(1.1)}
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;background:#e2e8f0;color:#334155;white-space:nowrap}
.b-ok,.b-validated,.b-received,.b-IN{background:#dcfce7;color:#15803d}.b-low,.b-OUT{background:#fee2e2;color:#b91c1c}.b-draft{background:#fef3c7;color:#b45309}.b-converted{background:#dbeafe;color:#1d4ed8}
body.dark .badge{background:#1e293b;color:#cbd5e1}body.dark .b-ok,body.dark .b-validated,body.dark .b-received,body.dark .b-IN{background:#14532d66;color:#86efac}body.dark .b-low,body.dark .b-OUT{background:#7f1d1d66;color:#fca5a5}body.dark .b-draft{background:#78350f66;color:#fcd34d}body.dark .b-converted{background:#1e3a8a66;color:#93c5fd}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tot{text-align:right;font-size:15px;line-height:1.9}.grprow{background:var(--s2)}.mbox table input,.mbox table select{min-width:70px}
#modal{display:none;position:fixed;inset:0;background:rgba(8,12,24,.55);backdrop-filter:blur(3px);z-index:50;align-items:center;justify-content:center;padding:16px}#modal.on{display:flex;animation:fade .15s}
.mbox{background:var(--s);color:var(--d);border-radius:18px;padding:24px;width:100%;max-width:520px;max-height:92vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.35);animation:rise .22s}.mbox.wide{max-width:980px}.mbox h2{margin-top:0}
.foot{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:#0f172a;color:#fff;padding:12px 22px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.3);display:none;z-index:99;max-width:92vw;text-align:center}#toast.err{background:var(--ko)}
.err{background:#fee2e2;color:var(--ko);padding:8px 12px;border-radius:8px;margin-bottom:12px}

/* ---------- Page de connexion ---------- */
.login{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:16px;background:radial-gradient(circle at 18% 18%,rgba(59,130,246,.45),transparent 42%),radial-gradient(circle at 85% 80%,rgba(124,58,237,.35),transparent 40%),linear-gradient(135deg,#0b1220,#1e3a8a)}
.login main{margin:0}.box{width:min(400px,92vw);padding:30px;border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.4)}.box h1{margin:0 0 4px;font-size:26px}.box .btn{width:100%}

/* ---------- Tablette et petits écrans : menu hamburger (tiroir) ---------- */
@media(max-width:1024px){
  .side{transform:translateX(-105%);width:290px;max-width:86vw}.side.open{transform:none;box-shadow:0 0 50px rgba(0,0,0,.5)}
  body.collapsed .side{transform:translateX(-105%)}body.collapsed .side.open{transform:none}
  .topbar{left:0!important;padding:0 14px}main,body.collapsed main{margin-left:0;padding:76px 16px 32px}
  #ov{display:block;position:fixed;inset:0;background:rgba(8,12,24,.55);backdrop-filter:blur(2px);z-index:28;opacity:0;pointer-events:none;transition:opacity .25s}#ov.on{opacity:1;pointer-events:auto}
  .side a{padding:12px}input,select,textarea{font-size:16px}.bar h1{flex:1 1 100%;font-size:21px}
  .bar input,.bar select,#q{flex:1 1 45%;max-width:none}.bar .btn{flex:1 1 auto}.btn,.act button{min-height:40px}.two{grid-template-columns:1fr}
}
/* ---------- Téléphone : fiches, formulaires plein écran ---------- */
@media(max-width:700px){
  .chip{display:none}.grid{grid-template-columns:repeat(2,1fr);gap:10px}.kpi{padding-left:18px}.kpi b{font-size:19px}.card{padding:12px;border-radius:14px}
  table:not(.nostack){min-width:0}table:not(.nostack) thead{display:none}table:not(.nostack),table:not(.nostack) tbody{display:block}
  table:not(.nostack) tr{display:block;border:1px solid var(--b);border-radius:12px;margin-bottom:10px;padding:4px 12px;background:var(--s)}
  table:not(.nostack) td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;border-bottom:1px solid var(--b);padding:8px 0;text-align:right}
  table:not(.nostack) td:last-child{border-bottom:0}table:not(.nostack) td::before{content:attr(data-label);font-weight:600;color:var(--m);text-align:left;flex:0 0 38%;font-size:12px}
  table:not(.nostack) td[data-label=""]::before,table:not(.nostack) td.act::before,table:not(.nostack) td.empty::before{display:none}
  table:not(.nostack) td.act{justify-content:flex-end;flex-wrap:wrap;gap:6px}table:not(.nostack) td.empty{display:block;text-align:center}
  table:not(.nostack) td input,table:not(.nostack) td select{width:58%;margin:0}table:not(.nostack) tr:hover td{background:none}table.nostack{min-width:560px}
  #modal{padding:0}.mbox,.mbox.wide{max-width:none;width:100%;height:100%;max-height:100%;border-radius:0;padding:16px 16px 0}
  .foot{position:sticky;bottom:0;background:var(--s);padding:12px 0;margin-top:14px;border-top:1px solid var(--b);z-index:2}.foot .btn{flex:1}
  #toast{left:12px;right:12px;bottom:14px;transform:none}.tot{text-align:left}
}
/* ---------- Grands écrans ---------- */
@media(min-width:1500px){main{padding-left:36px;padding-right:36px}.grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.bar label{margin:0;display:flex;align-items:center;gap:6px;white-space:nowrap}.bar label input{margin-top:0}.bar input[type=checkbox]{flex:none}