/* ==========================================================
   ابن سينا – إدارة الطلبات  |  style.css (feuille commune)
   À inclure dans chaque page :
   <link rel="stylesheet" href="style.css">
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');

:root{--b:#2959A6;--b2:#1D4380;--bl:#E7EEF8;--y:#FEC12C;--yl:#FFF4D6;--bg:#F5F7FA;--card:#fff;--bd:#E3E7EE;--tx:#1B2433;--mu:#6B7688;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0E1522;--card:#141F33;--bd:#263A5C;--tx:#E8EDF5;--mu:#9AA8BF;--bl:#1B2E4D;--yl:#3A3320;--b:#5B8DD6}}
:root[data-theme="dark"]{--bg:#0E1522;--card:#141F33;--bd:#263A5C;--tx:#E8EDF5;--mu:#9AA8BF;--bl:#1B2E4D;--yl:#3A3320;--b:#5B8DD6}
*{box-sizing:border-box;margin:0}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{font-family:Tajawal,Tahoma,sans-serif;background:var(--bg);color:var(--tx);font-size:14px;line-height:1.6}
button,input,select,textarea{font:inherit;color:inherit}
.app{min-height:100vh}
aside{width:250px;background:#2959A6;color:#fff;padding:18px 12px;flex-shrink:0;transition:.2s;position:sticky;top:0;height:100vh;overflow:auto}
.logo{display:flex;gap:10px;align-items:center;padding:4px 8px 18px;border-bottom:1px solid #ffffff22;margin-bottom:12px}
.logo i{width:38px;height:38px;border-radius:8px;background:var(--y);color:#1D4380;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:18px}
.lg{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;display:block}.logo .lg{width:64px;height:64px;background:#fff}.brand .lg{width:40px;height:40px}
.logo b{display:block;font-size:16px}.logo small{opacity:.7;font-size:12px}
aside a{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:8px;color:#ffffffcc;text-decoration:none;cursor:pointer;margin-bottom:2px}
aside a:hover{background:#ffffff14}
aside a.on{background:var(--y);color:#1D4380;font-weight:700}
aside a em{font-style:normal;width:18px;text-align:center}
aside .sub{padding-right:40px;font-size:13px;opacity:.75;padding-block:4px}
body.col aside{width:0;padding:0;overflow:hidden}
main{flex:1;min-width:0}
.top{display:flex;gap:12px;align-items:center;background:var(--card);border-bottom:1px solid var(--bd);padding:10px 24px;position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.ib{width:36px;height:36px;border:1px solid var(--bd);background:var(--card);border-radius:8px;cursor:pointer;position:relative}
.ib .dot{position:absolute;top:6px;left:8px;width:8px;height:8px;border-radius:50%;background:var(--y);border:1px solid var(--b)}
.srch{flex:1;max-width:380px}
input,select,textarea{border:1px solid var(--bd);background:var(--card);border-radius:8px;padding:8px 12px;width:100%;outline:0}
input:focus,select:focus,textarea:focus{border-color:var(--b);box-shadow:0 0 0 3px var(--bl)}
.user{margin-right:auto;display:flex;gap:10px;align-items:center}
.av{width:36px;height:36px;border-radius:50%;background:var(--y);color:#1D4380;display:grid;place-items:center;font-weight:700}
.user small{display:block;color:var(--mu);font-size:12px;line-height:1.2}
.page{display:none;padding:24px;max-width:1280px;margin:0 auto}.page.on{display:block}
.bc{color:var(--mu);font-size:12px;margin-bottom:4px}
.hd{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
h1{font-size:22px;color:var(--b)}h2{font-size:15px;margin-bottom:14px}
.btn{border:1px solid var(--b);background:var(--b);color:#fff;padding:8px 16px;border-radius:8px;cursor:pointer;font-weight:500}
.btn.s{background:var(--card);color:var(--b)}.btn.y{background:var(--y);border-color:var(--y);color:#1D4380;font-weight:700}
.btn.g{border-color:var(--bd);background:transparent;color:var(--mu)}
.card{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:18px;margin-bottom:16px}
.grid{display:grid;gap:16px}.k6{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.g2{grid-template-columns:2fr 1fr}.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
#ov{display:none;position:fixed;inset:0;background:#0007;z-index:40}.xc{display:none;margin-right:auto;background:0;border:0;color:#fff;font-size:24px;cursor:pointer}
@media(max-width:900px){.g2{grid-template-columns:1fr}aside{position:fixed;right:0;top:0;z-index:50;transform:translateX(100%)}body.op aside{transform:none;box-shadow:0 0 30px #0006}body.op #ov{display:block}body.col aside{width:250px;padding:18px 12px}.xc{display:block}}
.kpi{display:flex;gap:12px;align-items:center}.kpi .ic{width:42px;height:42px;border-radius:10px;background:var(--bl);color:var(--b);display:grid;place-items:center;font-size:18px}
.kpi.a .ic{background:var(--yl);color:#8A6100}
.kpi b{font-size:24px;display:block;line-height:1.2}.kpi span{color:var(--mu);font-size:12px}.kpi small{color:var(--b);font-size:11px}
.tb{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.tb>*{width:auto;flex:1;min-width:130px}.tb .btn{flex:0}
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:720px}
th{background:var(--bg);color:var(--mu);font-weight:500;text-align:right;padding:10px 12px;font-size:12px;border-bottom:1px solid var(--bd)}
td{padding:11px 12px;border-bottom:1px solid var(--bd);white-space:nowrap}tr:hover td{background:var(--bl)}
td a{color:var(--b);font-weight:700}
.bdg{padding:2px 10px;border-radius:20px;font-size:12px;font-weight:500;border:1px solid transparent}
.s1{background:var(--bg);color:var(--mu);border-color:var(--bd)}.s2{background:var(--yl);color:#8A6100;border-color:var(--y)}
.s3{background:var(--bl);color:var(--b)}.s4{background:var(--b);color:#fff}.s5{background:var(--b2);color:var(--y)}.s6{background:transparent;color:var(--mu);text-decoration:line-through;border-color:var(--bd)}
.pg{display:flex;justify-content:space-between;align-items:center;padding-top:14px;color:var(--mu)}.pg div{display:flex;gap:4px}
.pg button{min-width:32px;height:32px;border:1px solid var(--bd);background:var(--card);border-radius:6px;cursor:pointer}.pg .on{background:var(--b);color:#fff;border-color:var(--b)}
.bars{display:flex;gap:14px;align-items:flex-end;height:180px;padding-top:10px}.bars div{flex:1;text-align:center;font-size:11px;color:var(--mu);display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.bars i{display:block;background:var(--b);border-radius:4px 4px 0 0;margin-bottom:6px}.bars div:last-child i{background:var(--y)}
.pr{margin-bottom:12px}.pr p{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}.pr u{display:block;height:6px;border-radius:4px;background:var(--bl);text-decoration:none}.pr u i{display:block;height:100%;border-radius:4px;background:var(--b)}
.tl{list-style:none;padding:0;border-right:2px solid var(--bd);margin-right:6px}.tl li{position:relative;padding:0 18px 14px 0}.tl li:before{content:"";position:absolute;right:-7px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--y);border:2px solid var(--b)}.tl small{display:block;color:var(--mu)}
.f{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.f label{display:block;font-size:12px;color:var(--mu);margin-bottom:4px}.f .w{grid-column:1/-1}
.item{border:1px solid var(--bd);border-radius:10px;padding:16px;margin-bottom:12px;background:var(--bg)}.item h3{font-size:14px;display:flex;justify-content:space-between;margin-bottom:12px;color:var(--b)}
.drop{border:1.5px dashed var(--b);border-radius:8px;padding:14px;text-align:center;color:var(--b);background:var(--bl);cursor:pointer}
.bar{display:flex;gap:10px;justify-content:flex-start;padding-top:6px}
.steps{display:flex;margin:6px 0 4px;text-align:center}.steps div{flex:1;position:relative;font-size:12px;color:var(--mu)}
.steps div:before{content:attr(data-n);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--bg);border:2px solid var(--bd);margin:0 auto 6px;position:relative;z-index:1;font-weight:700}
.steps div:after{content:"";position:absolute;top:15px;right:50%;width:100%;height:2px;background:var(--bd)}.steps div:first-child:after{display:none}
.steps .d:before{background:var(--b);border-color:var(--b);color:#fff}.steps .d:after,.steps .c:after{background:var(--b)}
.steps .c:before{background:var(--y);border-color:var(--b);color:#1D4380;box-shadow:0 0 0 4px var(--yl)}.steps .c{color:var(--tx);font-weight:700}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}.meta span{display:block;color:var(--mu);font-size:12px}.meta b{font-weight:500}
.file{display:flex;gap:10px;align-items:center;border:1px solid var(--bd);border-radius:8px;padding:10px;background:var(--card)}.file i{font-style:normal;background:var(--yl);color:#8A6100;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:700}.file div{flex:1;min-width:0}.file small{color:var(--mu);display:block;font-size:11px}
.login{display:none;min-height:100vh;grid-template-columns:1fr 1fr;background:var(--card)}.login.on{display:grid}
.lv{background:var(--b);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:60px;position:relative;overflow:hidden}
.lv:before,.lv:after{content:"";position:absolute;border-radius:50%}.lv:before{width:360px;height:360px;border:50px solid #ffffff10;left:-120px;bottom:-120px}.lv:after{width:90px;height:90px;background:var(--y);opacity:.9;top:60px;left:70px}
.lv h2{font-size:28px;line-height:1.5;margin:20px 0 8px;position:relative}.lv p{opacity:.8;position:relative}
.lf{display:grid;place-items:center;padding:30px}.lf form{width:100%;max-width:360px;display:grid;gap:14px}.lf h1{font-size:26px}
.ck{display:flex;justify-content:space-between;align-items:center;font-size:13px}.ck label{display:flex;gap:6px;align-items:center}.ck input{width:auto}.ck a{color:var(--b)}
@media(max-width:800px){.login.on{grid-template-columns:1fr}.lv{display:none}}

:root{--ytx:#8A6100}:root[data-theme="dark"]{--ytx:#FEC12C}
.s2,.kpi.a .ic,.file i{color:var(--ytx)}
:root[data-theme="dark"] .btn:not(.s):not(.y):not(.g),:root[data-theme="dark"] .s4,:root[data-theme="dark"] .steps .d:before,:root[data-theme="dark"] .pg .on,:root[data-theme="dark"] .tabs .on{color:#0E1522}
.al{display:flex;gap:8px;align-items:center;padding:10px 14px;border-radius:8px;margin-bottom:14px;border:1px solid;font-size:13px}.al button{margin-right:auto;border:0;background:0;cursor:pointer;font-size:18px;color:inherit}
.al.i{background:var(--bl);color:var(--b);border-color:var(--b)}.al.w{background:var(--yl);color:var(--ytx);border-color:var(--y)}.al.o{background:var(--b);color:#fff;border-color:var(--b)}.al.e{background:var(--b2);color:var(--y);border-color:var(--y)}
:root[data-theme="dark"] .al.o{color:#0E1522}
#toasts{position:fixed;bottom:16px;left:16px;display:grid;gap:8px;z-index:40}.ts{background:var(--b2);color:#fff;border-right:4px solid var(--y);padding:10px 16px;border-radius:8px;min-width:240px;font-size:13px;animation:in .2s}.ts.w{background:var(--y);color:#1D4380;border-color:var(--b)}@keyframes in{from{opacity:0;transform:translateY(8px)}}
.mdl{position:fixed;inset:0;background:#0009;display:none;place-items:center;z-index:30}.mdl.on{display:grid}.mdl>div{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:22px;width:min(580px,92vw);max-height:90vh;overflow:auto}
.sw{position:relative;width:40px;height:22px;flex:none;display:inline-block}.sw input{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer;z-index:1;padding:0}.sw i{position:absolute;inset:0;background:var(--bd);border-radius:20px;transition:.2s}.sw i:after{content:"";position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}.sw input:checked+i{background:var(--b)}.sw input:checked+i:after{right:21px;background:var(--y)}
.row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--bd);gap:10px}.row small{display:block;color:var(--mu)}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}.tabs button{border:1px solid var(--bd);background:var(--card);padding:5px 14px;border-radius:20px;cursor:pointer}.tabs .on{background:var(--b);color:#fff;border-color:var(--b)}
.nt{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--bd);align-items:flex-start}.nt.u{background:var(--yl)}.nt div{flex:1}.nt small{color:var(--mu);display:block}
.ic{width:36px;height:36px;border-radius:8px;background:var(--bl);color:var(--b);display:grid;place-items:center;flex:none}
details{border-bottom:1px solid var(--bd);padding:8px 0}summary{cursor:pointer;font-weight:500}details p{color:var(--mu);margin-top:6px}
.thf{position:fixed;top:16px;left:16px;z-index:20}

header.top{top:0;z-index:45;height:60px;padding:0 20px;gap:14px}
.brand{display:flex;gap:10px;align-items:center;color:var(--b)}.brand i{width:34px;height:34px;border-radius:8px;background:var(--b);color:var(--y);display:grid;place-items:center;font-style:normal;font-weight:700}.brand .short{display:none}
.help{flex:1;display:flex;justify-content:center}.hp{display:flex;gap:10px;align-items:center;background:var(--yl);border:1px solid var(--y);border-radius:24px;padding:4px 6px 4px 16px;font-size:12px}.ph{width:28px;height:28px;border-radius:50%;background:var(--y);color:#1D4380;display:grid;place-items:center}.hp b{color:var(--b)}
.acts{display:flex;gap:10px;align-items:center}.dd{position:relative}
.user{margin:0;border:0;background:0;cursor:pointer;text-align:right}
.user:focus-visible{outline:2px solid var(--b);outline-offset:3px;border-radius:8px}
.nb{position:absolute;top:-6px;left:-6px;background:var(--y);color:#1D4380;font-size:10px;font-weight:700;border-radius:10px;min-width:18px;height:18px;display:grid;place-items:center;border:2px solid var(--card)}
.pop{display:none;position:absolute;top:calc(100% + 8px);left:0;width:350px;max-width:92vw;background:var(--card);border:1px solid var(--bd);border-radius:10px;box-shadow:0 8px 28px #0003;z-index:60;overflow:hidden}.pop.on{display:block}
.ph2{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--bd)}.ph2 a,.pf{color:var(--b);cursor:pointer;font-size:12px}.pf{display:block;text-align:center;padding:10px;border-top:1px solid var(--bd);font-weight:700;font-size:13px}
.pop .nt{padding:10px 14px;cursor:pointer;font-size:13px}.pop .nt b{font-weight:500}.pop .nt.u:after{content:"";width:8px;height:8px;border-radius:50%;background:var(--b);flex:none;margin-top:6px}
.mi{display:block;padding:10px 16px;cursor:pointer}.mi:hover{background:var(--bl)}.pop hr{border:0;border-top:1px solid var(--bd)}
.wrap{display:flex;min-height:calc(100vh - 60px)}
aside{top:60px;height:calc(100vh - 60px);padding-top:6px}
.gl{font-size:11px;color:#ffffff80;padding:14px 12px 4px}
aside .ni .lb,aside .si .lb{flex:1}
.bg{background:#ffffff24;color:#fff;border-radius:10px;padding:0 8px;font-size:11px;font-weight:700}.bg.y{background:var(--y);color:#1D4380}.bg.r{background:transparent;border:1px solid #ffffff66}
aside a.on .bg{background:#2959A6;color:var(--y)}
.chev{font-size:13px;transition:.2s}.grp.open .chev{transform:rotate(-90deg)}
.sm{display:none;padding:2px 30px 6px 0}.grp.open .sm{display:block}
aside .si{padding:6px 12px;font-size:13px;opacity:.9;margin:0}aside .si.on{background:#ffffff1f;color:var(--y);font-weight:700}
aside .si.si-add-order{min-height:42px;margin:6px 0 8px;padding:8px 12px;border:1px solid var(--y);border-radius:9px;color:#1D4380;background:var(--y);font-weight:700;opacity:1;box-shadow:0 3px 10px #102f5c40}
aside .si.si-add-order:before{content:"+";display:grid;place-items:center;width:25px;height:25px;flex:0 0 25px;border-radius:7px;color:var(--y);background:#1D4380;font-size:20px;font-weight:700;line-height:1}
aside .si.si-add-order:hover,aside .si.si-add-order:focus-visible{color:#1D4380;background:#ffd95e;border-color:#ffd95e;outline:2px solid #ffffffa8;outline-offset:1px}
aside .si.si-add-order.on{color:#1D4380;background:#ffd95e}
aside .par.on{background:#ffffff1f;color:var(--y);font-weight:700}
.hm{display:none;margin:16px 6px;padding:12px;border:1px solid #ffffff33;border-radius:8px;font-size:12px;color:#ffffffcc}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--bd);border:1px solid var(--bd);overflow:hidden}.cal b{background:var(--bg);padding:6px;text-align:center;font-size:12px;color:var(--mu)}.cal span{background:var(--card);min-height:80px;padding:6px;font-size:12px;min-width:0}.cal u{text-decoration:none;color:var(--mu)}.cal em{display:block;font-style:normal;font-size:10px;background:var(--yl);color:var(--ytx);border-right:3px solid var(--y);padding:1px 6px;margin-top:4px;border-radius:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cal .td u{background:var(--b);color:#fff;border-radius:50%;padding:1px 7px}
@media(max-width:1199px){.hp small{display:none}}
@media(min-width:901px){
body.col aside{width:64px;padding:8px;overflow:visible;z-index:10}
body.col .ni>.lb,body.col .ni>.bg,body.col .ni>.chev{display:none}
body.col .gl{height:1px;background:#ffffff22;margin:10px 6px;font-size:0;padding:0}
body.col .ni{justify-content:center;padding:10px 0}
body.col .grp{position:relative}body.col .grp .sm{display:none}
body.col .grp:hover .sm{display:block;position:absolute;right:100%;top:0;background:#1D4380;min-width:220px;padding:8px;border-radius:8px;box-shadow:0 8px 24px #0005;z-index:60}}
@media(max-width:900px){
aside{top:0;height:100vh}body.col aside{width:250px;padding:18px 12px;overflow:auto}aside{overflow:auto}
.help,.un,.brand .full{display:none}.brand .short{display:block}.hm{display:block}
.acts{flex:none;gap:6px}.acts .tgl{display:inline-grid;place-items:center;flex:0 0 40px;width:40px;height:40px}
.pop{position:fixed;top:60px;left:8px;right:8px;width:auto;max-width:none}.cal span{min-height:56px;padding:3px}.cal em{display:none}}

.o1{background:var(--yl);color:var(--ytx);border-color:var(--y)}.o2{background:#FBE9C8;color:#8A5A12;border-color:#EBC77A}.o3{background:var(--bl);color:var(--b)}.o4{background:var(--b);color:#fff}.o5{background:var(--b2);color:var(--y)}.o6{background:#4B5A62;color:#fff}.o7{background:#FBEAEA;color:#9B3B3B;border-color:#EBC5C5}.og{background:var(--bg);color:var(--mu);border-color:var(--bd)}
:root[data-theme="dark"] .o2{background:#3E3220;color:#EBC77A;border-color:#6B5628}:root[data-theme="dark"] .o7{background:#3B2326;color:#E8A4A4;border-color:#6B3A3F}:root[data-theme="dark"] .o4,:root[data-theme="dark"] .dc.on,:root[data-theme="dark"] .dc.on b,:root[data-theme="dark"] .dc.on small,:root[data-theme="dark"] .kc.on b{color:#0E1522}
.kcs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.kc{flex:1;min-width:110px;background:var(--card);border:1px solid var(--bd);border-top:3px solid transparent;border-radius:8px;padding:8px 12px;cursor:pointer;text-align:right}.kc b{display:block;font-size:18px;color:var(--b)}.kc span{font-size:12px;color:var(--mu)}.kc.on{border-top-color:var(--y);background:var(--yl)}
.dsh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px;flex-wrap:wrap}.dsh h2{margin:0}.dsh>div{display:flex;gap:6px}
.dsc{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.dc{flex:0 0 190px;scroll-snap-align:start;text-align:right;background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:12px 14px;cursor:pointer;display:grid;gap:2px}.dc b{font-size:24px;color:var(--b);line-height:1.2}.dc small{color:var(--mu)}.dc.on{background:var(--b);color:#fff;border-color:var(--b)}.dc.on b{color:var(--y)}.dc.on small{color:#ffffffbb}
.cl{display:none}.f.fs{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.lk{border:0;background:0;color:var(--b);cursor:pointer;font-size:12px;padding:0}td small{display:block;color:var(--mu);font-size:11px}
tr.xr{display:none}tr.xr.on{display:table-row}tr.xr td{background:var(--bg);white-space:normal}
.mini{list-style:none;padding:0;display:flex;gap:10px;flex-wrap:wrap}.mini li{background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:6px 12px;font-size:12px}.mini .dp{color:var(--b);font-weight:700}
.cards{display:none}.oc{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:14px;display:grid;gap:8px}.och,.ocm,.ocr{display:flex;justify-content:space-between;align-items:center;font-size:13px}.och a{color:var(--b);font-weight:700}
.hier{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.hier span{background:var(--bl);color:var(--b);padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700}.hier span:last-child{background:var(--yl);color:var(--ytx)}.hier em{color:var(--mu);font-style:normal}
.steps{min-width:600px}.steps small{display:block;font-size:11px;font-weight:400;color:var(--mu)}
.file b{display:block;overflow:hidden;text-overflow:ellipsis;font-weight:500}.fb{padding:2px 10px;font-size:12px}.item h4{font-size:13px;margin:14px 0 8px}
body.emp .adm{display:none!important}
@media(max-width:1250px){.c1{display:none}}
@media(max-width:760px){.ot{display:none}.cards{display:grid;gap:12px}}

/* ===== Responsive: tous les écrans ===== */
img,svg,video,canvas{max-width:100%}
.grid>*,.card,main,.page{min-width:0}
.tw{max-width:100%;-webkit-overflow-scrolling:touch}
h1,h2,.card,.file div{overflow-wrap:anywhere}
.pg{flex-wrap:wrap;gap:8px}.pg div{flex-wrap:wrap}
.file{min-width:0;flex-wrap:wrap}
aside{height:100vh;height:100dvh}
#toasts{max-width:calc(100vw - 32px)}.ts{min-width:0;max-width:100%}
.mdl>div{width:min(580px,94vw)}
@media(min-width:1600px){.page{max-width:1500px}body{font-size:15px}}
@media(max-width:900px){.top{padding:10px 14px}.page{padding:18px 14px}.srch{max-width:none;min-width:0}}
@media(max-width:600px){
 .page{padding:14px 10px}.top{padding:8px 10px;gap:8px}.card{padding:14px}
 h1{font-size:19px}.ib{width:40px;height:40px}
 input,select,textarea{font-size:16px}
 .hd{align-items:flex-start}.hd .btn{flex:1 1 auto}
 .cal span{min-height:56px;padding:3px;font-size:10px}.cal b{padding:4px 0;font-size:10px}
 .pop{position:fixed;top:60px;left:8px;right:8px;width:auto;max-width:none}
 .user .un{display:none}
 .user .av{display:grid}
}
@media(max-width:380px){.btn{padding:8px 10px}.k6{grid-template-columns:1fr 1fr}.dc{flex-basis:160px}}
@media(max-height:500px) and (orientation:landscape){.lv{padding:24px}.mdl>div{max-height:96vh}}

/* ===== Page détail commande ===== */
.onav{display:flex;gap:8px;overflow-x:auto;position:sticky;top:calc(env(safe-area-inset-top,0px) + 57px);z-index:4;background:var(--bg);padding:8px 0;margin:-8px 0 8px}
.onav a{white-space:nowrap;padding:5px 14px;border:1px solid var(--bd);border-radius:20px;background:var(--card);color:var(--tx);cursor:pointer;font-size:13px;text-decoration:none}
.onav a:hover{border-color:var(--b);color:var(--b)}
#detail .card,#detail .item{scroll-margin-top:120px}
.osum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.ok{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:12px 14px;border-top:3px solid var(--b)}
.ok.y{border-top-color:var(--y)}.ok span{display:block;color:var(--mu);font-size:12px}.ok b{font-size:20px;line-height:1.4;display:block}.ok small{color:var(--mu);font-size:12px}
.ok.late b{color:#9B3B3B}
.pbar{height:8px;border-radius:8px;background:var(--bd);overflow:hidden;margin-top:6px}.pbar i{display:block;height:100%;background:var(--b);border-radius:8px}.pbar.y i{background:var(--y)}
.cinfo{display:flex;gap:14px;align-items:center;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--bd);flex-wrap:wrap}
.cinfo .av{width:48px;height:48px;font-size:20px;background:var(--bl);color:var(--b)}.cinfo b{font-size:16px}.cinfo small{display:block;color:var(--mu)}
.item h3{align-items:center;gap:8px;flex-wrap:wrap}.item h3 .ix{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--b);color:#fff;font-size:12px;margin-left:8px}
:root[data-theme="dark"] .item h3 .ix{color:#0E1522}
.item h4{margin:14px 0 8px;font-size:13px;color:var(--mu)}
.file .fb{padding:4px 10px;font-size:12px}
.nvb{display:flex;gap:8px;margin-top:16px;justify-content:space-between}
@media(max-width:600px){#detail .hd>div:last-child{width:100%}#detail .hd>div:last-child .btn{flex:1 1 45%}.ok b{font-size:17px}.nvb .btn{flex:1}}
@media print{aside,.top,.onav,#detail .hd>div:last-child,.nvb,.fb,#ov{display:none!important}.page{padding:0}.card,.item{break-inside:avoid}}
#mc.ed{width:min(760px,96vw)}#mc .f{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.nr{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--bd)}.nr span{color:var(--mu)}.nr b{text-align:left;overflow-wrap:anywhere}
.err{border-color:#C0392B!important;box-shadow:0 0 0 3px #C0392B22}
.drop.dg{background:var(--yl);border-color:var(--y)}.drop input{display:none}.fl{display:grid;gap:6px;margin-top:8px}.fl .file{padding:6px 10px}
@media(max-width:900px){#nsm{position:static!important}}
.item h3.nh{flex-wrap:nowrap}.nh .nl{display:flex;align-items:center;gap:8px}.nh .ix{margin:0!important}
.nw{max-width:900px;margin:auto}.nw .f{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.crow{display:flex;gap:8px}.crow .btn{width:44px;padding:0;font-size:22px;line-height:1;flex:none}
.lkh{display:block;color:var(--mu);font-size:11px;margin-top:4px}.lock,select:disabled{background:var(--bg);color:var(--mu);cursor:not-allowed}
.em{display:block;color:#C0392B;font-size:12px;margin-top:4px}:root[data-theme="dark"] .em{color:#E8A4A4}
.pledge{display:flex;gap:12px;align-items:flex-start;cursor:pointer;margin:0}.pledge input{width:22px;height:22px;padding:0;flex:none;margin-top:2px;accent-color:var(--b)}.pledge-c{padding:14px 18px}
.pbar.big{height:16px;margin:10px 0}.nbar{padding:6px 0 30px}.nbar .btn{padding:12px 28px;font-size:15px}
.file .fb.dl{color:#9B3B3B}
@media(max-width:600px){.nbar{flex-direction:column}.nbar .btn{width:100%;padding:14px}.nw .f{grid-template-columns:1fr}}

/* ===== Page nouvelle commande v2 ===== */
.nwg{max-width:1180px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.nwg .f{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.nws{position:sticky;top:76px}.nws .card:last-child{margin-bottom:0}
.sn{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--b);color:#fff;font-size:12px;margin-left:8px}
:root[data-theme="dark"] .sn{color:#0E1522}
.cnt{color:var(--mu);font-weight:400;font-size:12px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{border:1px solid var(--bd);background:var(--card);color:var(--b);border-radius:20px;padding:3px 12px;font-size:12px;cursor:pointer}
.chip:hover{border-color:var(--b);background:var(--bl)}
.nbn{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;max-width:1180px;margin:0 auto 14px;padding:10px 14px;border:1px solid var(--y);background:var(--yl);color:var(--ytx);border-radius:8px;font-size:13px}
.nbb{display:flex;gap:8px}.nbb .btn{padding:4px 14px}
.nbar{position:sticky;bottom:0;z-index:6;background:var(--bg);border-top:1px solid var(--bd);padding:12px 0!important;margin-top:8px;align-items:center}
.nbar .kh{margin-right:auto;color:var(--mu);font-size:12px}
.nact{display:flex;gap:6px;flex:none}.ib2{padding:3px 10px!important;font-size:12px}
.nh .nl{min-width:0;flex:1}.nsum{color:var(--mu);font-weight:400;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.item.cl2 .nbody{display:none}.item.cl2 h3{margin-bottom:0}
.qty{display:flex;gap:6px;align-items:center}.qty input{text-align:center;flex:1}.qty .btn{width:40px;padding:6px 0;font-size:18px;line-height:1;flex:none}
.th{width:44px;height:44px;border-radius:6px;object-fit:cover;flex:none;border:1px solid var(--bd)}
.drop{display:block}
.lkh.warn{color:#9B3B3B;font-weight:500}:root[data-theme="dark"] .lkh.warn{color:#E8A4A4}
.ckl{list-style:none;padding:0;margin-top:10px;display:grid;gap:4px}
.ckl li{display:flex;gap:8px;font-size:13px;color:var(--mu);cursor:pointer;padding:2px 0}
.ckl li.dn{color:var(--b);font-weight:500}.ckl li:hover{text-decoration:underline}
#sm-mg.neg{color:#9B3B3B}:root[data-theme="dark"] #sm-mg.neg{color:#E8A4A4}
@media(max-width:1000px){.nwg{grid-template-columns:1fr}.nws{position:static}}
@media(max-width:600px){.nwg .f{grid-template-columns:1fr}.nbar{flex-direction:row!important}.nbar .btn{flex:1;width:auto;padding:12px 10px}.nbar .kh{display:none}.nsum{display:none}.ib2 span{display:none}}
@media print{.nws,.nbar,.nbn{display:none}}

/* icônes sidebar */
aside em{display:grid;place-items:center;width:20px;height:20px;flex:none}
aside em svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
aside a{gap:12px}aside a:not(.on):hover em{color:var(--y)}
aside a.on em svg{stroke-width:2}
body.col .ni em svg{width:22px;height:22px}

/* ===== Champs LTR (email, mot de passe, téléphone…) ===== */
.en{direction:ltr;text-align:right}

/* ===== Dashboard (dashboard.php) ===== */
[hidden]:not([hidden=until-found i]){display:none!important}
.dashboard-filters{margin:0}
.dashboard-period-inputs{display:flex;gap:10px;flex-wrap:wrap}
.dashboard-period-inputs:empty{display:none}
.dashboard-period-inputs input{flex:1;min-width:130px}
.ok.d{border-top-color:var(--b2)}.ok.g{border-top-color:var(--mu)}
:root[data-theme="dark"] .ok.d{border-top-color:#8FB1E8}
.chartbox{position:relative;width:100%;min-height:320px}
.dashboard-chart{display:block;width:100%}

/* ===== Dashboard : éléments du nouveau UI ===== */
.dash-kpis{margin-bottom:16px}
.dash-kpis>.card{margin:0}
.kpi small:empty{display:none}
.hd .btn{display:inline-block}

/* ===== Header : icônes, notifications ===== */
.ib svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block;margin:auto}
.ib.has-notification{border-color:var(--y)}
.ib.has-notification svg{color:var(--b)}
@keyframes bellring{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-6deg)}}
.ib.bell-animate svg{animation:bellring .8s ease;transform-origin:50% 0}
.nt svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
a.nt{color:inherit;text-decoration:none}a.nt:hover{background:var(--bl)}
#notificationList{max-height:340px;overflow:auto}
.help strong{color:var(--b)}

/* ===== Compatibilité : messages .alert / .alert-* (scripts existants) + bouton désactivé ===== */
.alert{display:block;padding:10px 14px;border-radius:8px;margin-bottom:14px;border:1px solid var(--bd);background:var(--bg);font-size:13px}
.alert-success{background:var(--b);color:#fff;border-color:var(--b)}
:root[data-theme="dark"] .alert-success{color:#0E1522}
.alert-danger,.alert-error{background:var(--b2);color:var(--y);border-color:var(--y)}
.alert-warning{background:var(--yl);color:var(--ytx);border-color:var(--y)}
.alert-info{background:var(--bl);color:var(--b);border-color:var(--b)}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ===== Alertes : composants du template ===== */
.al{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border:1px solid;border-radius:8px;margin-bottom:12px;font-size:13px}
.al:last-child{margin-bottom:0}
.al .ai{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:currentColor;font-size:13px;font-style:normal;font-weight:700}
.al .ai>b{color:var(--aic,#fff)}
.al>div{flex:1;min-width:0}
.al strong{display:block;font-weight:700}
.al span{opacity:.9}
.al .acts{display:flex;gap:8px;margin-top:8px}
.al .acts a{color:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.al>button{margin-right:auto;border:0;background:transparent;color:inherit;cursor:pointer;font-family:inherit;font-size:20px;line-height:1}
.al.i{--aic:var(--bl);background:var(--bl);color:var(--b);border-color:var(--b)}
.al.w{--aic:var(--yl);background:var(--yl);color:var(--ytx);border-color:var(--y)}
.al.o{--aic:var(--b);background:var(--b);color:#fff;border-color:var(--b)}
.al.e{--aic:var(--b2);background:var(--b2);color:var(--y);border-color:var(--y)}
.al.o .ai{background:var(--y);color:var(--b2);--aic:var(--b2)}
#toasts{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:16px;z-index:110000;display:grid;gap:8px;max-width:calc(100vw - 32px)}
.ts{display:flex;align-items:center;gap:10px;min-width:240px;padding:10px 16px;border-right:4px solid var(--y);border-radius:8px;background:var(--b2);color:#fff;box-shadow:0 6px 20px #0003;font-size:13px}
.ts span{flex:1}
.ts button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:18px;line-height:1}
.ts.i{background:var(--bl);color:var(--b);border-color:var(--b)}
.ts.w{background:var(--y);color:var(--b2);border-color:var(--b)}
.ts.o{background:var(--b);color:#fff;border-color:var(--y)}
.ts.e{background:var(--card);color:var(--tx);border:1px solid var(--bd);border-right:4px solid var(--b)}
.swal2-container{z-index:110000!important}
.swal2-popup{width:min(440px,calc(100vw - 32px))!important;padding:22px!important;border:1px solid var(--bd)!important;border-radius:10px!important;background:var(--card)!important;color:var(--tx)!important;font-family:Tajawal,Tahoma,sans-serif!important}
.swal2-title{color:var(--b)!important;font-family:inherit!important;font-size:17px!important;font-weight:700!important}
.swal2-html-container{color:var(--mu)!important;font-family:inherit!important;font-size:14px!important;line-height:1.7!important}
.swal2-actions{gap:8px!important}
.swal2-actions .swal2-styled{min-height:40px;margin:0!important;padding:8px 16px!important;border:1px solid transparent!important;border-radius:8px!important;font-family:inherit!important;font-size:13px!important;font-weight:700!important}
.swal2-actions .swal2-confirm{background:var(--y)!important;color:var(--b2)!important}
.swal2-actions .swal2-cancel{border-color:var(--bd)!important;background:transparent!important;color:var(--mu)!important}
.swal2-actions .swal2-deny{background:var(--b2)!important;color:var(--y)!important}
.swal2-icon.swal2-success{border-color:var(--b)!important;color:var(--b)!important}
.swal2-icon.swal2-success [class^=swal2-success-line]{background-color:var(--b)!important}
.swal2-icon.swal2-success .swal2-success-ring{border-color:var(--y)!important}
.swal2-icon.swal2-warning{border-color:var(--y)!important;color:var(--ytx)!important}
.swal2-icon.swal2-info{border-color:var(--b)!important;color:var(--b)!important}
.swal2-icon.swal2-error{border-color:var(--y)!important;color:var(--y)!important}
.swal2-icon.swal2-error [class^=swal2-x-mark-line]{background-color:var(--y)!important}
.swal2-toast{width:auto!important;min-width:min(280px,calc(100vw - 32px))!important;padding:10px 16px!important;border:0!important;border-right:4px solid var(--y)!important;border-radius:8px!important;background:var(--b2)!important;color:#fff!important;box-shadow:0 6px 20px #0003!important}
.swal2-toast .swal2-title,.swal2-toast .swal2-html-container{color:inherit!important;font-size:13px!important}
.swal2-toast .swal2-icon.swal2-success{border-color:var(--y)!important;color:var(--y)!important}
.swal2-toast .swal2-icon.swal2-success [class^=swal2-success-line]{background-color:var(--y)!important}
@media(max-width:600px){.swal2-popup{padding:18px!important}.ts{min-width:0;max-width:100%}}

/* ===== users.php : badge statut avec pastille, menu d'options ===== */
.bdg.dt{display:inline-flex;align-items:center;gap:6px}
.bdg.dt:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* éléments de menu (.mi) : texte normal, sans soulignement de lien */
.mi{color:var(--tx);text-decoration:none;font-size:13px}
.mi:focus-visible{outline:2px solid var(--b);outline-offset:-2px}
.mi.dg{color:#9B3B3B}
.mi.dg:hover{background:#FBEAEA}
:root[data-theme="dark"] .mi.dg{color:#E8A4A4}
:root[data-theme="dark"] .mi.dg:hover{background:#3B2326}
.pop[role="menu"]{padding:4px 0}

:root[data-theme="dark"] select option{background:var(--card);color:var(--tx)}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{color:var(--mu);opacity:1}
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator{filter:invert(.8)}
:root[data-theme="dark"] .select2-container--default .select2-selection--single,
:root[data-theme="dark"] .select2-container--default .select2-selection--multiple,
:root[data-theme="dark"] .select2-dropdown,
:root[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field{border-color:var(--bd);background:var(--card);color:var(--tx)}
:root[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
:root[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
:root[data-theme="dark"] .select2-container--default .select2-results__option{color:var(--tx)}
:root[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
:root[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[data-selected]{background:var(--b);color:#fff}
:root[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"],
:root[data-theme="dark"] .select2-container--default .select2-results__option[data-selected="true"]{background:var(--bl);color:var(--tx)}