/* The laptop dashboard (owner, 2026-10-15 — design «A3»): a side menu over a day/night sky, a top bar, and a home of
   figures, charts and what needs doing. Only while body.desk-on is set by desk.js.
   Its parts (menu, bar, home) are drawn at every width — on a phone they exist only while desk.js runs its phone layout
   (desk-ph.css, 2026-10-17); what places them beside a fixed menu is laptop-only (min-width:1100px blocks). */
body.desk-on{
  --d-navy:#2B3484;--d-side:264px;
  --bg:#eef1fa;--card-bg:#fff;--line:#e2e6f3;--text:#0f1430;--muted:#646b88;--panel-bg:#f6f7fb;--th-bg:#f3f4f9;--input-bg:#fff;
  --d-ink2:#3b4262;--d-faint:#7a809a;--d-line2:#f0f1f6;
  --d-ok:#0f7a4a;--d-ok-s:#e8f5ee;--d-warn:#a85b00;--d-warn-s:#fdf3e4;--d-bad:#c4302b;--d-bad-s:#fcecea;--d-info-s:#eef0fa;--d-link:#2B3484;
  --d-sh:0 1px 1px rgba(15,20,48,.04),0 2px 6px rgba(15,20,48,.04);
  background:var(--bg);
}
html.desk-dark body.desk-on{
  --bg:#131843;--card-bg:#1a2052;--line:#2a3170;--text:#eceefb;--muted:#97a0cf;--panel-bg:#1d2458;--th-bg:#1d2458;--input-bg:#1d2458;--b:#8592ff;
  --d-ink2:#cdd2ee;--d-faint:#8189bd;--d-line2:#222a62;
  --d-ok:#3ddc97;--d-ok-s:rgba(61,220,151,.12);--d-warn:#f2b45a;--d-warn-s:rgba(242,180,90,.13);--d-bad:#ff7b7b;--d-bad-s:rgba(255,123,123,.13);--d-info-s:rgba(127,140,255,.14);--d-link:#a9b3ff;
  --d-sh:0 1px 0 rgba(0,0,0,.25),0 2px 8px rgba(0,0,0,.18);
}
@media (min-width:1100px){
body.desk-on #appContent{padding-inline-start:var(--d-side);font-family:'IBM Plex Sans Arabic',Tahoma,sans-serif;min-height:100vh}
/* the menu's colour down to the very end of the page */
[dir="rtl"] body.desk-on #appContent{background:linear-gradient(to left,#131843 var(--d-side),var(--bg) var(--d-side))!important}
[dir="ltr"] body.desk-on #appContent{background:linear-gradient(to right,#131843 var(--d-side),var(--bg) var(--d-side))!important}
}
body.desk-on #dash:before,body.desk-on #dash:after{display:none!important}
/* the old top bar, tabs, dock, banner, KPI row and section tabs give way to the menu and the new home */
body.desk-on #appContent>header,body.desk-on .bec-dock,body.desk-on #v59PendingBanner,body.desk-on #dash .v40-kpis,body.desk-on #dashRecvBar,
body.desk-on #dash .dashboard-actions{display:none!important}
body.desk-on.desk-tools #dash .dashboard-actions{display:block!important}
body.desk-on.desk-tools #dash .dash-cat-tabs,body.desk-on.desk-tools #deskHome,body.desk-on.desk-tools #v40Dashboard,body.desk-on.desk-tools .desk-more{display:none!important}
@media (min-width:1100px){
body.desk-on .wrap{max-width:none;padding:0 32px 40px!important;position:relative;z-index:1}
body.desk-on #appContent>.wrap>nav{display:none!important}
body.desk-on .app-footer{position:relative;z-index:1} /* already beside the menu (inside #appContent): centred under the page, no second offset */
}

/* ---------- side menu ---------- */
.desk-side{position:fixed;top:0;bottom:0;inset-inline-start:0;width:var(--d-side);z-index:40;color:#c9cdea;background:#131843;overflow:hidden;isolation:isolate;box-shadow:0 0 40px rgba(19,24,67,.22)}
html.desk-dark .desk-side{box-shadow:none}
html.desk-dark .desk-top{border-bottom-color:rgba(133,146,255,.08)}
.desk-side-in{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding:18px 16px 14px;overflow:auto;scrollbar-width:none}
.desk-side-in::-webkit-scrollbar{display:none}
.desk-brand{display:flex;flex-direction:column;align-items:center;gap:7px;padding:4px 8px 12px;margin:0 4px 8px;border-bottom:1px solid rgba(255,255,255,.10);cursor:pointer}
.desk-brand img{width:118px;height:auto;filter:brightness(0) invert(1);opacity:.97}
.desk-brand span{font-size:9.5px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:#aab2e8;white-space:nowrap}
.desk-nav,.desk-grp-h{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:7px 12px;border-radius:10px;color:#c9cdea;font-size:13.5px;font-weight:500;cursor:pointer;font-family:inherit}
.desk-nav .aic,.desk-grp-h .aic{width:18px;height:18px;opacity:.85;flex-shrink:0}
.desk-nav:hover,.desk-grp-h:hover{background:rgba(255,255,255,.06);color:#fff}
.desk-nav.on{background:rgba(255,255,255,.11);color:#fff;font-weight:600}
.desk-nav.on::before{content:"";position:absolute;inset-inline-start:-16px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:#9aa6ff}
[dir="ltr"] .desk-nav.on::before{border-radius:3px 0 0 3px}
.desk-c{margin-inline-start:auto;font-size:11px;font-weight:600;color:#c9cdea;background:rgba(255,255,255,.09);border-radius:7px;padding:1px 7px;min-width:24px;text-align:center}
.desk-c.r{background:#e5484d;color:#fff}
/* the main sections as sectors (owner, 2026-10-18: «الأقسام الرئيسية لازم تبقى أكبر … شكلها sectors وتكون واضحة»): a band with
   the section's own colour tile, bigger white title, and its items hanging from a guide line in the same colour */
.desk-grp{margin-top:10px;--g1:#6f8bff;--g2:#3f5ff0}
.desk-grp[data-g="inv"]{--g1:#5b8cff;--g2:#2f5bea}
.desk-grp[data-g="proc"]{--g1:#ffb547;--g2:#e8830f}
.desk-grp[data-g="eng"]{--g1:#2fd3b4;--g2:#0e9f87}
.desk-grp[data-g="ops"]{--g1:#b18cff;--g2:#7c4dff}
.desk-grp-h{font-size:14.5px;font-weight:700;color:#fff;padding:7px 10px;gap:11px;letter-spacing:.1px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);border-radius:13px;transition:background .2s,border-color .2s}
.desk-grp-h:hover{background:rgba(255,255,255,.12)}
.desk-grp.open .desk-grp-h{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.18)}
.desk-grp-h .gi{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;color:#fff;background:linear-gradient(135deg,var(--g1),var(--g2));box-shadow:0 4px 12px -4px var(--g2),inset 0 1px 0 rgba(255,255,255,.28)}
.desk-grp-h .gi .aic{width:17px;height:17px;opacity:1}
.desk-grp-b>div{position:relative;margin-inline-start:24px;padding-inline-start:10px}
.desk-grp-b>div::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--g1),color-mix(in srgb,var(--g1) 25%,transparent));transform-origin:top}

/* ---- motion (owner, 2026-10-18: «icons احترافية وفيها motion pro على قد ما تقدر») ---- */
/* the tile: lifts and glows on hover, a light sweeps across it */
.desk-grp-h .gi{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.3,1.5,.5,1),box-shadow .35s}
.desk-grp-h .gi::after{content:"";position:absolute;inset:-60%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);transform:translateX(-75%);transition:transform 0s}
.desk-grp-h:hover .gi,.desk-grp.opening .gi{transform:translateY(-1px) scale(1.07);box-shadow:0 8px 18px -6px var(--g2),0 0 0 3px color-mix(in srgb,var(--g1) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.desk-grp-h:hover .gi::after,.desk-grp.opening .gi::after{transform:translateX(75%);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.desk-grp-h:active .gi{transform:scale(.94);transition-duration:.12s}
.gsv{width:18px;height:18px;overflow:visible}
.gsv *{transform-box:fill-box;transform-origin:center}
/* المخزون: the lid lifts off the box */
.gsv .p-lid{transform-origin:0% 100%;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.gsv .p-body{transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.desk-grp-h:hover .gsv .p-lid,.desk-grp.opening .gsv .p-lid{transform:translateY(-2.4px) rotate(-9deg)}
.desk-grp-h:hover .gsv .p-body,.desk-grp.opening .gsv .p-body{transform:translateY(.6px)}
/* المشتريات: the cart rolls forward and back, its wheels turning */
.gsv .p-wheel{stroke-dasharray:2.2 1.3}
.desk-grp-h:hover .gsv .p-cart,.desk-grp.opening .gsv .p-cart{animation:gsvRoll .9s cubic-bezier(.3,.8,.3,1)}
.desk-grp-h:hover .gsv .p-wheel,.desk-grp.opening .gsv .p-wheel{animation:gsvWheel .9s cubic-bezier(.3,.8,.3,1)}
@keyframes gsvRoll{0%{transform:none}35%{transform:translateX(2.6px) rotate(-4deg)}65%{transform:translateX(-1px) rotate(1.5deg)}100%{transform:none}}
@keyframes gsvWheel{0%{transform:none}35%{transform:translateX(2.6px) rotate(220deg)}65%{transform:translateX(-1px) rotate(300deg)}100%{transform:rotate(360deg)}}
/* المهندسين: the engineer lifts his helmet */
.desk-grp-h:hover .gsv .p-hat,.desk-grp.opening .gsv .p-hat{animation:gsvHat .85s cubic-bezier(.3,.9,.3,1)}
@keyframes gsvHat{0%{transform:none}40%{transform:translateY(-2.6px) rotate(-14deg)}70%{transform:translateY(-.6px) rotate(4deg)}100%{transform:none}}
/* التشغيل: the gear turns */
.gsv .p-gear{transition:transform .9s cubic-bezier(.3,1.25,.4,1)}
.desk-grp-h:hover .gsv .p-gear{transform:rotate(90deg)}
.desk-grp.opening .gsv .p-gear{transform:rotate(180deg)}
/* the chevron */
.desk-grp-h .chev{transition:transform .35s cubic-bezier(.3,1.4,.5,1),opacity .2s}
.desk-grp-h:hover .chev{opacity:1}
/* opening a section: its line draws down and its items come in one after another */
.desk-grp.opening .desk-grp-b>div::before{animation:gsvLine .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes gsvLine{from{transform:scaleY(0)}to{transform:none}}
.desk-grp.opening .desk-grp-b .desk-nav{animation:gsvIn .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 45ms + 70ms)}
@keyframes gsvIn{from{opacity:0;transform:translateX(var(--gsv-x,-10px))}to{opacity:1;transform:none}}
[dir="rtl"] .desk-side{--gsv-x:10px}
/* the items' icons: drawn again on hover, lifted a little; the selected one in its section's colour */
.desk-nav .aic{transition:transform .3s cubic-bezier(.3,1.5,.5,1),color .25s,filter .25s}
.desk-nav:hover .aic{transform:translateY(-1px) scale(1.08);opacity:1;animation:gsvDraw .75s ease-out}
@keyframes gsvDraw{from{stroke-dasharray:64;stroke-dashoffset:64}to{stroke-dasharray:64;stroke-dashoffset:0}}
.desk-grp .desk-nav.on .aic{color:var(--g1);opacity:1;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--g1) 70%,transparent))}
.desk-nav{transition:background .2s,color .2s,transform .15s}
.desk-nav:active{transform:scale(.98)}
/* a closed section with something red inside: its count breathes */
.desk-grp:not(.open) .desk-grp-h .desk-c.r{animation:gsvPulse 2.6s ease-out infinite}
@keyframes gsvPulse{0%{box-shadow:0 0 0 0 rgba(229,72,77,.6)}70%{box-shadow:0 0 0 7px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
/* the first time the menu shows: the tiles pop in one by one */
body.desk-intro .desk-grp-h .gi{animation:gsvPop .6s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--gi,0) * 90ms + 150ms)}
@keyframes gsvPop{from{opacity:0;transform:scale(.4) rotate(-20deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.desk-side *,.desk-side *::before,.desk-side *::after{animation:none!important;transition:none!important}}
.desk-grp.open .desk-grp-b>div{padding-top:5px;padding-bottom:2px}
.desk-grp .desk-nav.on::before{inset-inline-start:-10.5px;background:var(--g1)}
.desk-grp-h .chev{margin-inline-start:auto;transition:transform .25s;opacity:.7}
.desk-side .bec-sky.bare .scene{display:none}
/* …and the day sky's light horizon would sit behind the last words: it turns navy instead */
.desk-side .bec-sky.bare::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,33,92,0) 30%,rgba(27,33,92,.94) 72%,#1b215c)} /* no room for the city under a long menu: the sky alone (fitSky) */
.desk-grp.open .desk-grp-h .chev{transform:rotate(90deg)}
[dir="rtl"] .desk-grp-h .chev{transform:rotate(180deg)}[dir="rtl"] .desk-grp.open .desk-grp-h .chev{transform:rotate(90deg)}
.desk-grp-h .desk-c{display:none}.desk-grp:not(.open) .desk-grp-h .desk-c{display:inline-block}
.desk-grp-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.desk-grp.open .desk-grp-b{grid-template-rows:1fr}
.desk-grp-b>div{overflow:hidden}

/* ---------- top bar ---------- */
.desk-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:20px;margin:0 -32px 8px;padding:12px 32px;min-height:68px;background:color-mix(in srgb,var(--bg) 86%,transparent);border-bottom:1px solid var(--line);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
.desk-title{display:flex;flex-direction:column;gap:1px;min-width:max-content;flex:1 0 auto}
.desk-title small{white-space:nowrap;font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--d-faint)}
.desk-title b{font-size:17px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.desk-search{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;background:var(--card-bg);border:1px solid var(--line);border-radius:12px;padding:10px 14px;flex:0 1 460px;min-width:170px;color:var(--d-faint);font-size:13px;box-shadow:var(--d-sh);cursor:pointer;font-family:inherit;transition:border-color .2s,box-shadow .2s}
.desk-search:hover{border-color:#9aa6ff;box-shadow:0 0 0 3px rgba(133,146,255,.15)}
.desk-search span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.desk-acts{display:flex;align-items:center;gap:10px;flex:1 1 0;justify-content:flex-end;min-width:max-content}
.desk-who-t{display:flex;flex-direction:column;min-width:0}
.desk-search kbd{margin-inline-start:auto;font-family:inherit;font-size:11px;font-weight:500;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.desk-ib{all:unset;box-sizing:border-box;width:40px;height:40px;border-radius:12px;background:var(--card-bg);border:1px solid var(--line);display:grid;place-items:center;color:var(--d-ink2);position:relative;box-shadow:var(--d-sh);cursor:pointer;font-size:12px;font-weight:700}
.desk-ib .aic{width:18px;height:18px}
.desk-ib .n{position:absolute;top:-5px;inset-inline-end:-5px;min-width:18px;height:18px;border-radius:9px;background:#e5484d;color:#fff;font-size:11px;font-weight:500;display:grid;place-items:center;padding:0 4px;box-shadow:0 0 0 2px var(--bg)}
.desk-tsw{all:unset;position:relative;width:64px;height:34px;border-radius:99px;border:1px solid var(--line);background:linear-gradient(180deg,#9fb4ff,#dfe6ff);box-shadow:var(--d-sh);cursor:pointer;overflow:hidden;transition:background .6s;flex-shrink:0}
html.desk-dark .desk-tsw{background:linear-gradient(180deg,#0f1440,#2a3392)}
.desk-tsw i{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff6c9,#ffd25e 60%,#f6a93b);box-shadow:0 0 12px rgba(255,200,90,.8);transition:all .6s cubic-bezier(.45,.05,.25,1)}
html.desk-dark .desk-tsw i{right:34px;background:radial-gradient(circle at 40% 35%,#fffdf2,#f0ead2 70%,#d9d0b0);box-shadow:0 0 10px rgba(220,225,255,.6)}
.desk-tsw b{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:0;transition:opacity .6s}
html.desk-dark .desk-tsw b{opacity:.9}
/* the name (owner, 2026-10-16 — look «1» of three): a card like the bar's buttons; a navy avatar with a light running
   round it, the role as a small badge, a chevron for the account card it opens */
.desk-who{position:relative;display:flex;align-items:center;gap:10px;height:46px;box-sizing:border-box;padding:4px;padding-inline-end:10px;border-radius:14px;flex:none;
  background:var(--card-bg);border:1px solid var(--line);box-shadow:var(--d-sh);color:var(--text);transition:border-color .2s ease,box-shadow .2s ease}
.desk-who:hover,.desk-who:focus-visible{outline:none;border-color:color-mix(in srgb,#2B3484 30%,var(--line));box-shadow:0 8px 20px -8px rgba(43,52,132,.35)}
html.desk-dark .desk-who:hover,html.desk-dark .desk-who:focus-visible{border-color:rgba(133,146,255,.45)}
.desk-who::after{content:"";width:14px;height:14px;margin-inline-start:2px;flex:none;background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
.desk-who b{display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:700;color:var(--text)}
.desk-who small{display:inline-block;width:max-content;margin-top:3px;padding:1px 8px;border-radius:99px;background:var(--d-info-s);color:var(--d-link);font-size:11px;font-weight:600}
.desk-av{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.4px;
  background:linear-gradient(140deg,#5361d6,#2B3484 55%,#1a2166);box-shadow:0 2px 6px rgba(43,52,132,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.desk-av::before{content:"";position:absolute;inset:-4px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(56,189,248,0) 0deg,rgba(56,189,248,0) 150deg,#6d7cff 260deg,#38bdf8 330deg,rgba(56,189,248,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px),#000 calc(100% - 1px),transparent 100%);mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px),#000 calc(100% - 1px),transparent 100%);animation:dkRing 2.6s linear infinite}
html.desk-dark .desk-av::before{background:conic-gradient(from 0deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,0) 150deg,#8592ff 260deg,#fff 340deg,rgba(255,255,255,0) 360deg)}
.desk-av::after{content:"";position:absolute;inset-inline-start:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;background:#3ddc84;border:2px solid var(--card-bg);box-shadow:0 0 7px rgba(61,220,132,.75)}
@keyframes dkRing{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.desk-av::before{animation:none}}
.desk-ib.wide{width:auto;padding:0 12px;gap:7px;display:inline-flex;align-items:center;font-size:13px;font-weight:700;font-family:inherit}
.desk-ib.out{color:var(--d-bad)}

/* ---------- home ---------- */
#deskHome{display:block}
.dh-hello{display:flex;align-items:flex-end;gap:16px;margin:8px 0 22px}
.dh-hello h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-.3px;color:var(--text)}
.dh-hello p{margin:6px 0 0;color:var(--muted);font-size:13.5px}.dh-hello p b{color:var(--d-ink2);font-weight:600}
.dh-acts{margin-inline-start:auto;display:flex;gap:10px}
.dh-btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:10px 16px;font-weight:600;font-size:13.5px;border:1px solid var(--line);background:var(--card-bg);color:var(--text);box-shadow:var(--d-sh);cursor:pointer;font-family:inherit}
.dh-btn .aic{width:17px;height:17px}
.dh-btn.p{background:#2B3484;border-color:#2B3484;color:#fff;box-shadow:0 1px 2px rgba(43,52,132,.3),0 8px 20px -6px rgba(43,52,132,.45)}
.dh-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:20px}
.dh-kpi{all:unset;box-sizing:border-box;background:var(--card-bg);border:1px solid var(--line);border-radius:16px;padding:16px 18px 14px;box-shadow:var(--d-sh);display:flex;flex-direction:column;gap:10px;min-width:0;cursor:pointer;transition:transform .15s,box-shadow .15s;font-family:inherit}
.dh-kpi:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(15,20,48,.05),0 12px 28px -10px rgba(15,20,48,.18)}
.dh-kpi .h{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-kpi .h .aic{width:16px;height:16px;color:var(--d-faint);flex-shrink:0}
.dh-kpi .row{display:flex;align-items:flex-end;gap:10px;min-height:32px}
.dh-kpi .v{font-size:30px;font-weight:600;letter-spacing:-.8px;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.dh-kpi.bad .v{color:var(--d-bad)}
.dh-kpi .spark{margin-inline-start:auto;height:30px;width:72px}
.dh-kpi .f{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}
.dh-grid{display:grid;gap:20px;margin-bottom:20px}
.dh-g1{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.dh-g2{grid-template-columns:repeat(3,minmax(0,1fr))}
.dh-g3{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,.95fr)}
.dh-card{background:var(--card-bg);border:1px solid var(--line);border-radius:16px;box-shadow:var(--d-sh);min-width:0}
.dh-ch{display:flex;align-items:center;gap:10px;padding:16px 20px 0}
.dh-ch h3{margin:0;font-size:14.5px;font-weight:600;color:var(--text)}
.dh-ch .sub{font-size:12px;font-weight:500;color:var(--muted)}
.dh-ch .end{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.dh-link{all:unset;color:var(--d-link);font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap}
.dh-link .aic{width:15px;height:15px}
.dh-seg{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:3px}
.dh-seg button{all:unset;padding:4px 11px;border-radius:7px;font-size:12px;color:var(--muted);font-weight:500;cursor:pointer}
.dh-seg button.on{background:var(--card-bg);color:var(--text);box-shadow:var(--d-sh);font-weight:600}
.dh-cb{padding:14px 20px 18px}
.dh-legend{display:flex;gap:16px;font-size:12px;font-weight:500;color:var(--d-ink2)}
.dh-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-inline-end:6px;vertical-align:-1px}
.dh-big{display:flex;align-items:baseline;gap:10px;margin:2px 0 6px}
.dh-big b{font-size:24px;font-weight:600;letter-spacing:-.4px;color:var(--text);font-variant-numeric:tabular-nums}.dh-big span{font-size:12.5px;font-weight:500;color:var(--muted)}
.dh-al{list-style:none;margin:0;padding:6px 8px 8px}
.dh-al li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px}
.dh-al li:hover{background:var(--bg)}
.dh-al .pr{width:4px;align-self:stretch;border-radius:4px;flex-shrink:0}
.dh-al .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--bg);color:var(--d-ink2);flex-shrink:0}
html.desk-dark .dh-al .ic,html.desk-dark .dh-kpi .h .aic,html.desk-dark .dh-feed .ic{color:#a9b3ff}
.dh-al .ic .aic{width:17px;height:17px}
.dh-al b{display:block;font-size:13.5px;font-weight:600;color:var(--text)}
.dh-al small{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.dh-al .go{all:unset;margin-inline-start:auto;font-size:12px;font-weight:600;color:var(--d-link);border:1px solid var(--line);border-radius:9px;padding:6px 11px;white-space:nowrap;background:var(--card-bg);cursor:pointer}
.dh-empty{padding:26px 20px;text-align:center;color:var(--muted);font-size:13px}
.dh-b-h{display:flex;align-items:center;gap:12px;padding:18px 20px 0}
.dh-b-tag{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-weight:600;font-size:15px;color:#fff;background:linear-gradient(135deg,#4553b8,#1b2158);flex-shrink:0}
.dh-b-h h4{margin:0;font-size:15px;font-weight:600;color:var(--text)}.dh-b-h .d{font-size:12px;font-weight:500;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-b-body{padding:14px 20px 18px}
.dh-meter{display:flex;justify-content:space-between;font-size:12.5px;font-weight:500;color:var(--muted);margin-bottom:8px}.dh-meter b{color:var(--text);font-weight:600}
.dh-track{height:6px;border-radius:99px;background:var(--d-line2);overflow:hidden}.dh-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#6c79e0,#2B3484)}
.dh-mini{display:grid;grid-template-columns:repeat(4,1fr);margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.dh-mini div{padding:10px 8px;text-align:center;border-inline-start:1px solid var(--line)}.dh-mini div:first-child{border-inline-start:0}
.dh-mini b{display:block;font-size:17px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}.dh-mini span{font-size:11px;font-weight:500;color:var(--muted)}
.dh-t{width:100%;border-collapse:collapse;min-width:0}
.dh-t th{font-size:11.5px;color:var(--muted);font-weight:500;text-align:right;padding:0 8px 8px;background:none;border:0;white-space:nowrap}
.dh-t td{padding:9px 8px;border:0;border-top:1px solid var(--d-line2);font-size:13px;white-space:nowrap;text-align:center;color:var(--text);font-variant-numeric:tabular-nums}
.dh-t th:first-child,.dh-t td:first-child{text-align:start;padding-inline-start:20px;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.dh-t th:last-child,.dh-t td:last-child{padding-inline-end:20px}
.dh-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;border-radius:99px;padding:3px 10px;white-space:nowrap}
.p-bad{background:var(--d-bad-s);color:var(--d-bad)}.p-warn{background:var(--d-warn-s);color:var(--d-warn)}.p-ok{background:var(--d-ok-s);color:var(--d-ok)}
.dh-feed{list-style:none;margin:0;padding:8px 20px 14px}
.dh-feed li{display:flex;gap:12px;padding:9px 0;position:relative}
.dh-feed li::before{content:"";position:absolute;inset-inline-start:15px;top:36px;bottom:-9px;width:1px;background:var(--line)}
.dh-feed li:last-child::before{display:none}
.dh-feed .ic{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:var(--d-info-s);color:#2B3484;flex-shrink:0;z-index:1;border:3px solid var(--card-bg)}
.dh-feed .ic .aic{width:14px;height:14px}
.dh-feed div{font-size:13px;line-height:1.55;color:var(--d-ink2)}.dh-feed time{display:block;font-size:11.5px;font-weight:500;color:var(--d-faint)}
.dh-donut{display:flex;align-items:center;gap:18px}
.dh-dl{flex:1;display:flex;flex-direction:column;gap:9px;font-size:12.5px;font-weight:500;color:var(--text);min-width:0}
.dh-dl div{display:flex;align-items:center;gap:8px}.dh-dl b{margin-inline-start:auto;font-weight:600}
.dh-dl span.nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-s3{display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.dh-s3 div{padding:10px 12px;border-inline-start:1px solid var(--line)}.dh-s3 div:first-child{border-inline-start:0}
.dh-s3 b{display:block;font-size:17px;font-weight:600;color:var(--text)}.dh-s3 span{font-size:11.5px;font-weight:500;color:var(--muted)}
/* the detailed panels of the old home, as cards under the new home */
.desk-more{display:flex;align-items:center;gap:10px;margin:8px 0 12px;color:var(--text)}
.desk-more h2{margin:0;font-size:16px;font-weight:600}.desk-more span{color:var(--muted);font-size:12.5px;font-weight:500}
@media (min-width:1100px){body.desk-on #v40Dashboard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}}
body.desk-on #v40Dashboard>.v40-panel{margin:0!important;border-radius:16px!important;border:1px solid var(--line)!important;background:var(--card-bg)!important;box-shadow:var(--d-sh)!important}
@media (min-width:1100px){body.desk-on #v40Dashboard>.v40-panel.open{grid-column:1/-1}}
body.desk-on #v40Dashboard>.v40-panel.dh-flash{animation:dhFlash 1.6s ease}
@keyframes dhFlash{0%,100%{box-shadow:var(--d-sh)}30%{box-shadow:0 0 0 3px rgba(133,146,255,.55)}}
/* the windows open beside the menu, as pages */
@media (min-width:1100px){
body.desk-on .po-mgmt,body.desk-on .review-modal,body.desk-on .orders-modal,body.desk-on .limits-modal,body.desk-on .pr-modal,body.desk-on .proc-modal,body.desk-on .gr-modal,
body.desk-on .rep-modal,body.desk-on .modal,body.desk-on .v61-modal,body.desk-on .v62-modal,body.desk-on .v63-modal,body.desk-on .v65-modal,body.desk-on .v70-modal{inset-inline-start:var(--d-side)!important;background:rgba(10,14,40,.28)!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
}
/* the tools of a section (reports, settings …) as a page */
body.desk-on.desk-tools #dash .dashboard-actions{margin-top:6px}
body.desk-on #dash .dashboard-actions>.hint{display:none}
body:not(.desk-on) #deskToolsHead{display:none}
@media (min-width:1100px){body.desk-on .quick-actions{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important}}
@media (prefers-reduced-motion:reduce){.dh-kpi{transition:none}}
/* off the laptop layout (phone, narrow window, signed out): the new parts are not there */
body:not(.desk-on) .desk-side,body:not(.desk-on) .desk-top,body:not(.desk-on) #deskHome,body:not(.desk-on) .desk-more{display:none!important}
@media (min-width:1100px){
/* a smaller laptop: the figure's note takes two lines instead of being cut */
.dh-kpi .f{white-space:normal;line-height:1.4;align-items:flex-start}
.dh-kpi .f .dh-dot{margin-top:6px}
/* «يحتاج إجراء» keeps the height of the chart beside it and scrolls */
.dh-al{max-height:330px;overflow:auto} /* the -webkit- scrollbar in win.css (a standard scrollbar-width here would switch it off) */
}

@media all{
/* the switch: a sun by day (with a cloud), a moon with its craters by night (with stars) */
.desk-tsw i{background:none!important;box-shadow:none!important;overflow:visible}
.desk-tsw i svg{position:absolute;inset:0;width:24px;height:24px;transition:opacity .5s ease,transform .6s cubic-bezier(.45,.05,.25,1)}
.desk-tsw .sun{opacity:1;transform:none;filter:drop-shadow(0 0 4px rgba(255,190,80,.85))}
.desk-tsw .sun g{transform-origin:12px 12px;animation:dkRays 14s linear infinite}
.desk-tsw .moon{opacity:0;transform:rotate(-120deg) scale(.4);filter:drop-shadow(0 0 4px rgba(220,225,255,.7))}
html.desk-dark .desk-tsw .sun{opacity:0;transform:rotate(120deg) scale(.4)}
html.desk-dark .desk-tsw .moon{opacity:1;transform:none}
.desk-tsw .cl{position:absolute;left:7px;top:10px;width:24px;height:13px;opacity:.95;transition:opacity .5s,transform .6s;filter:drop-shadow(0 1px 1px rgba(60,80,160,.25))}
html.desk-dark .desk-tsw .cl{opacity:0;transform:translateX(-10px)}
@keyframes dkRays{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.desk-tsw .sun g{animation:none}}
}

/* a refresh on a laptop: nothing of the old layout shows before desk.js starts (≤ 5 s safety in the page head) */
html.desk-pre body:not(.desk-on) #appContent{visibility:hidden}
html.desk-pre body:not(.desk-on){background:#eef1fa}

/* tables fit their window on a laptop (owner, 2026-10-16: «هنا في لخبطة»): the old 1000px floor made every table in a window
   narrower than that slide sideways (two side-by-side tables, a 1280px screen); now a table is as wide as its box and
   only one that truly cannot fit scrolls */
@media (min-width:1100px){body.desk-on table:not(.keep-wide){min-width:0}}
/* a smaller laptop: a little less padding so the widest tables (reorder 13 columns, purchases 11) still fit */
@media (min-width:1100px) and (max-width:1400px){body.desk-on th,body.desk-on td{padding:8px 6px}}
/* An icon alone in a tile or a round button sits exactly in its middle (owner, 2026-10-18: the phone shortcuts' icons
   were off-centre). The page's general `.aic{margin-inline-end:6px}` (meant for an icon before a word) pushed each one 3px. */
body.desk-on .desk-ib>.aic,body.desk-on .desk-menu-btn>.aic,body.desk-on #deskShort .t>.aic,body.desk-on .ic>.aic{margin:0}