/* «لوحة التحكم» — the customer dashboard, three columns (owner 2026-10-19, approved study 15).
   Orders rail · the order chat · «ملفات البرمجة | تفاصيل طلبي». Phone: one column with tabs. Built by dashboard.js (.d2).
   Light by default; dark = html.dk (dashboard.js keeps it in step with html[data-theme] and the device setting).
   html.pwp-dash = the dashboard is on screen: Marzouq is the dock in the rail, never the floating bubble. */

/* ── tokens ── */
.d2,.d2-gmodal{--bg:#F4F5F7;--card:#fff;--side:#fff;--ink:#14171B;--ink2:#2A2F37;--mute:#5D6672;--faint:#9AA3AE;--line:#E3E6EB;--line2:#D6DAE0;--fill:#F1F3F5;--on:#fff;
  --red:#C8141F;--redS:#FFF6F6;--green:#1F8A4C;--greenS:#E3F4EA;--amber:#8A6515;--amberS:#F4ECD8;--sky:#1F5FA8;--skyS:#F2F7FD;--logline:#B7CDEB;
  --sh:0 1px 2px rgba(20,23,27,.05),0 10px 30px -18px rgba(20,23,27,.25);--shL:0 24px 50px -20px rgba(20,23,27,.4);
  --f:'IBM Plex Sans','Noto Sans Arabic',system-ui,sans-serif;--fn:'IBM Plex Mono',ui-monospace,monospace;--far:'Changa','Noto Sans Arabic',system-ui,sans-serif;--ease:cubic-bezier(.2,.8,.2,1)}
html.dk .d2,html.dk .d2-gmodal{--bg:#0E0F11;--card:#16171A;--side:#121316;--ink:#ECECEE;--ink2:#B9BBC0;--mute:#9A9DA3;--faint:#7C7F86;--line:#2C2E33;--line2:#3A3D43;--fill:#1C1D21;--on:#26282C;
  --red:#D7262F;--redS:#2A1416;--green:#5CC487;--greenS:#13201A;--amber:#E5A44C;--amberS:#2A1C0F;--sky:#6AA9E0;--skyS:#141B23;--logline:#2A4566;--sh:0 0 40px rgba(0,0,0,.35);--shL:0 0 40px rgba(0,0,0,.55)}
html.pwp-dash,html.pwp-dash body{background:#F4F5F7}
html.pwp-dash.dk,html.pwp-dash.dk body{background:#0E0F11}

/* Marzouq is only the dock here (owner 2026-10-19): no floating bubble on the dashboard */
html.pwp-dash .pwp-chat,html.pwp-dash .mzk{display:none!important}

/* the page frame: wider than the other account tabs */
@media (min-width:821px){
  html.pwp-dash #app .shell .content{max-width:1480px!important;padding:14px 20px 22px!important}
  html.pwp-dash #dashBar .dsb-in{max-width:1480px;padding-top:8px}
  html.pwp-dash #mzHello:not(:empty){max-width:1480px;padding:0 20px}
}

.d2{color:var(--ink);font:14px/1.6 var(--f);display:flex;flex-direction:column;gap:16px}
.d2 *{box-sizing:border-box}
.d2 :is(.d2-oc,.d2-sum button,.d2-tools button,.d2-ptabs button,.d2-fseg button,.d2-x,.d2-opt,.d2-dl,.d2-btn){font-family:inherit;color:inherit;background:none;border:0;cursor:pointer;margin:0}
.d2 img{display:block;max-width:100%}
.d2-n{font-family:var(--fn);direction:ltr;unicode-bidi:isolate}
.d2 [hidden]{display:none!important}
[dir=rtl] .d2 :is(h2,h3,h4,h6,.d2-colh,.d2-ptabs button,.d2-fseg button,.d2-sum button,.d2-btn,.d2-pill,.d2-rdh,.d2-tools button,.d2-opt b){font-family:var(--far)}

/* ── hello header ── */
.d2-head{position:relative;display:flex;align-items:center;gap:10px 18px;padding:10px 12px 10px 20px;border-radius:16px;min-height:0;overflow:hidden;color:#F2F3F5;border:1px solid #2A2F37;
  background:radial-gradient(120% 220% at 10% 100%,#3A1418,#14171B 60%);box-shadow:0 14px 34px -26px rgba(0,0,0,.6)}
[dir=rtl] .d2-head{padding:10px 20px 10px 12px}
[dir=ltr] .d2-head{background:radial-gradient(120% 220% at 90% 100%,#3A1418,#14171B 60%)}
/* the hello card is a slim bar (owner 2026-10-19): name · line · the count chips, so the order chat gets the height */
.d2-hi{display:flex;align-items:baseline;gap:4px 12px;min-width:0;flex:0 1 auto}
.d2-hi h2{margin:0;font-size:19px;line-height:1.3;color:#F2F3F5;letter-spacing:-.01em;white-space:nowrap}
.d2-hi p{margin:0;color:#A6ADB8;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.d2-sum{display:flex;gap:6px;flex-wrap:wrap;flex:0 1 auto;min-width:0}
.d2-sum button,.d2-sum a{display:flex;align-items:center;gap:7px;padding:4px 11px;border-radius:999px;background:#22262D!important;border:1px solid #2A2F37!important;color:#F2F3F5!important;font-size:12.5px;text-decoration:none;transition:border-color .2s}
.d2-sum button:hover,.d2-sum a:hover{border-color:#4A515C!important}
.d2-sum b{font-family:var(--fn)}
.d2-sum i{width:8px;height:8px;border-radius:50%;background:#F2F3F5}
.d2-sum i.you{background:#E5323C}.d2-sum i.team{background:#6AA9E0}.d2-sum i.book{background:#E5A44C}
.d2-art{margin-inline-start:auto;position:relative;flex:none;display:flex;align-items:center}
.d2-art .d2-lg{width:64px;height:auto;filter:drop-shadow(0 6px 10px rgba(227,38,47,.25))}
.d2-art .d2-hcar{position:absolute;inset-inline-end:0;bottom:-30px;width:220px;height:auto;object-fit:contain}
.d2-art .d2-drawn svg{width:220px;height:auto}
[dir=rtl] .d2 .d2-drawn svg{transform:scaleX(-1)}

/* ── the three columns ── */
.d2-grid{display:grid;grid-template-columns:290px minmax(0,1fr) 340px;gap:16px;height:max(480px,calc(100vh - var(--acc-top,64px) - 28px));height:max(480px,calc(100svh - var(--acc-top,64px) - 28px))}
.d2-col{background:var(--card);border:1px solid var(--line);border-radius:20px;min-height:0;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--sh)}
.d2-rail,.d2-side{background:var(--side)}
html.dk .d2-col{box-shadow:none}
.d2-colh{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px 10px;font-size:12.5px;color:var(--mute);font-weight:600;letter-spacing:.04em}

/* orders rail */
.d2-olist{flex:1;overflow:auto;padding:2px 10px 10px;display:flex;flex-direction:column;gap:7px;scrollbar-width:thin}
.d2-oc{position:relative;display:grid!important;grid-template-columns:62px minmax(0,1fr);gap:3px 10px;align-items:center;padding:10px;border-radius:14px;border:1px solid transparent!important;text-align:start;transition:background .2s,border-color .2s,transform .25s var(--ease)}
.d2-oc:hover{background:var(--fill)!important}
.d2-oc.on{background:var(--on)!important;border-color:var(--line2)!important;box-shadow:var(--sh)}
.d2-oc.on:before{content:'';position:absolute;inset-inline-start:-10px;top:16px;bottom:16px;width:3px;border-radius:3px;background:var(--red)}
html.dk .d2-oc.on{box-shadow:none}
.d2-oc.rec{border:1.5px dashed var(--line2)!important}
.d2-oc-img{grid-row:span 3;width:62px;height:40px;object-fit:contain;display:block}
.d2-oc-img.d2-drawn svg{width:62px;height:auto}
.d2-oc-nm{font-weight:600;font-size:13.5px;line-height:1.3;display:flex;gap:6px;align-items:baseline;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d2-oc-nm small{font:500 11.5px var(--fn);color:var(--mute)}
.d2-oc-mt{font-size:11.5px;color:var(--mute);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d2-oc-st{font-size:11.5px;display:flex;align-items:center;gap:6px;line-height:1.3;font-weight:500;color:var(--ink2);min-width:0}
.d2-oc-st i,.d2-pill i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--faint)}
.d2-oc-st.you{color:var(--red)}
:is(.d2-oc-st,.d2-pill).you i{background:var(--red)}:is(.d2-oc-st,.d2-pill).team i{background:var(--sky)}:is(.d2-oc-st,.d2-pill).book i{background:var(--amber)}:is(.d2-oc-st,.d2-pill).done i{background:var(--green)}
.d2-oc-bd{position:absolute;top:8px;inset-inline-end:8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font:700 10.5px var(--fn);font-style:normal;display:grid;place-items:center}
.d2-newo{margin:4px 10px 10px;height:40px;border-radius:12px;border:1px dashed var(--line2);color:var(--mute)!important;font-size:12.5px;display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none!important;flex:none}
.d2-newo:hover{color:var(--ink)!important;border-color:var(--ink)}
.d2-rail [data-mzrail]{flex:none;width:calc(100% - 20px)!important;margin:0 10px 10px!important}

/* chat column */
.d2-chatc{position:relative}
.d2-chatc.flash{box-shadow:0 0 0 3px rgba(200,20,31,.45);transition:box-shadow .3s}
.d2-bar{padding:10px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:7px;container:d2bar/inline-size;background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--fill) 45%,var(--card)));flex:none}
.d2-top{display:flex;align-items:center;gap:10px 12px;min-width:0;flex-wrap:wrap}
.d2-car{width:58px;height:36px;object-fit:contain;flex:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))}
.d2-car.d2-drawn svg{width:58px;height:auto}
.d2-id{min-width:130px;flex:1}
.d2-id h3{margin:0;font-size:17px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.d2-id h3 small{font:500 13px var(--fn);color:var(--mute);margin-inline-start:8px}
.d2-meta{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d2-pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--fill);color:var(--ink2)}
.d2-pill.you{background:var(--redS);color:var(--red)}.d2-pill.team{background:var(--skyS);color:var(--sky)}.d2-pill.book{background:var(--amberS);color:var(--amber)}.d2-pill.done{background:var(--greenS);color:var(--green)}
/* «شروحات جهازك · الفاتورة · التفاصيل»: one line of their own, equal width, full names; icon over the name when narrow */
/* the order's tools are small buttons in its title row (owner 2026-10-19), not a row of their own */
.d2-tools{flex:none;display:flex;gap:6px}
.d2 .d2-tools button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;justify-content:center;min-width:0;border-radius:8px;font-weight:600;font-size:12px;color:var(--ink2);white-space:nowrap;border:1px solid var(--line2);background:var(--card);transition:background .15s,color .15s,border-color .15s}
.d2 .d2-tools button:hover{background:var(--fill);color:var(--ink);border-color:var(--faint)}
.d2-tools svg{width:15px;height:15px;color:var(--mute);flex:none}
.d2-tools span{overflow:hidden;text-overflow:ellipsis}
/* a narrow chat column: the tools show their icon only (the name is in the tooltip); on a phone they get their own line */
@container d2bar (max-width:700px){.d2 .d2-tools button{width:32px;padding:0}.d2-tools span{display:none}}
@container d2bar (max-width:480px){.d2-tools{flex:1 1 100%}.d2 .d2-tools button{flex:1;width:auto;padding:0 6px}.d2-tools span{display:inline}}
/* the facts: one slim line «الجهاز · الرقم التسلسلي · كود الـ Strategy · آخر تحديث» */
.d2-facts{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0;font-size:12.5px;line-height:1.5;min-width:0}
.d2-f{display:inline-flex;align-items:baseline;gap:6px;min-width:0;max-width:100%}
/* every fact carries its dot, and the row is pulled back by one dot's room inside a clipping box: the dot that would start
   a line (the first fact, or the first one after a wrap on a phone) falls outside and is never seen */
.d2-facts{overflow:hidden}
.d2-frow{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0;margin-inline-start:-23px;min-width:0}
.d2-f:before{content:"";align-self:center;width:3px;height:3px;border-radius:50%;background:var(--faint);margin:0 10px;flex:none}
.d2-f small{font-size:11.5px;color:var(--mute);font-weight:500;white-space:nowrap}
.d2-f b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);min-width:0}
.d2-row{display:flex;align-items:center;gap:14px;justify-content:space-between}
.d2-st{list-style:none;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));position:relative;flex:1;max-width:600px;margin:0;padding:0}
.d2-st:before,.d2-st:after{content:"";position:absolute;top:8px;height:2px;border-radius:2px;inset-inline-start:calc(50%/var(--n))}
.d2-st:before{inset-inline-end:calc(50%/var(--n));background:var(--line2)}
.d2-st:after{width:calc((100% - 100%/var(--n)) * var(--p));background:var(--green)}
.d2-st li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;font-size:11px;line-height:1.35;color:var(--mute);min-width:0;margin:0}
.d2-st li i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:700 9.5px var(--fn);font-style:normal;background:var(--card);border:2px solid var(--line2);color:var(--mute)}
.d2-st li.ok{color:var(--ink2)}.d2-st li.ok i{background:var(--green);border-color:var(--green);color:#fff}
.d2-st li.cur{color:var(--red);font-weight:700}.d2-st li.cur i{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 0 0 3px var(--redS)}
.d2-st li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:0 2px}
.d2-st li small{font:500 10.5px var(--f);color:var(--faint)}
.d2-ptabs{display:none}
.d2-next{display:flex;gap:10px;align-items:center;min-height:34px;padding:3px 4px 3px 12px;border-radius:10px;background:var(--fill);border:1px solid var(--line)}
[dir=rtl] .d2-next{padding:3px 12px 3px 4px}
.d2-next.you{background:var(--redS);border-color:color-mix(in srgb,var(--red) 25%,transparent)}
.d2-next>div{flex:1;min-width:0;display:flex;align-items:baseline;gap:2px 8px;flex-wrap:wrap;line-height:1.4;padding:3px 0}
.d2-next small{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--red);white-space:nowrap}
.d2-next b{font-size:13px;color:var(--ink)}
.d2-next span{color:var(--mute);font-size:12px}
.d2-next .d2-btn{min-height:30px;padding-block:0;font-size:12.5px;flex:none}
.d2-chatwrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.d2-chat{flex:1;min-height:0;display:flex;flex-direction:column}
.d2-chat .mm-pick,.d2-nochat{flex:1;display:grid;place-items:center;color:var(--mute);font-size:14px;padding:30px;text-align:center}
.d2-chat .mx-chat{height:auto!important;flex:1;min-height:0;border:0!important;border-radius:0!important;background:var(--card)!important}
.d2-chat .mx-head{display:none}
.d2-chat .chat-box{background:var(--bg)!important;padding:16px 18px}
.d2-chat .msg-bub{max-width:min(76%,560px)}
.d2-chat .mx-tip{display:none}
.d2-chat .mx-row{gap:6px}
.d2-chat .mx-row textarea{flex:1;min-width:0}
.d2-chat .pe-btn.mx-emo,.d2-chat .mx-attach,.d2-chat .mx-send{width:42px!important;height:42px!important;flex:none}
.d2-chat .mx-comp{background:var(--card)!important;border-top:1px solid var(--line)!important}
.d2-chat .msg-name{color:var(--mute);font-weight:600}
html.dk .d2-chat .msg-row.them:not(.bot) .msg-bub{background:color-mix(in srgb,var(--sky) 14%,var(--card))!important;border-color:color-mix(in srgb,var(--sky) 40%,transparent)!important}

/* side column: «ملفات البرمجة | تفاصيل طلبي» */
.d2-fh{display:none}
.d2-fseg{display:flex;gap:3px;margin:12px 12px 10px;padding:3px;border-radius:12px;background:var(--fill);border:1px solid var(--line);flex:none}
/* the tabs and the hide button share one row; the button and the slim strip exist on computers only (below) */
.d2-fsr{display:flex;align-items:center;gap:8px;margin:12px 12px 10px;flex:none}
.d2-fsr .d2-fseg{margin:0;flex:1;min-width:0}
.d2-fseg button{flex:1;height:34px;border-radius:9px;font-weight:600;font-size:12.5px;color:var(--mute)}
.d2-fseg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.d2-fscroll{flex:1;overflow:auto;padding:0 12px 14px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.d2-note{font-size:12.5px;color:var(--ink2);background:var(--fill);border-radius:12px;padding:9px 11px;display:flex;gap:8px;line-height:1.6}
.d2-note svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--mute)}
.d2-pin{border-radius:14px;border:1px solid var(--line);padding:10px 11px;display:flex;align-items:center;gap:10px;background:var(--fill)}
.d2-tx{flex:1;min-width:0}
.d2-tx b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);text-align:start}
.d2-tx small{display:block;font-size:11px;color:var(--mute);line-height:1.45}
.d2-pin .d2-tx b{white-space:normal}
.d2-fi{width:34px;height:38px;border-radius:9px;display:grid;place-items:center;font:700 9.5px var(--fn);flex:none;background:var(--redS);color:var(--red)}
.d2-fi.lg{background:var(--skyS);color:var(--sky)}.d2-fi.st{background:var(--amberS);color:var(--amber)}.d2-fi.td{background:var(--fill);color:var(--ink2);border:1px solid var(--line)}
.d2-rd{border-radius:16px;border:1px solid var(--line);overflow:hidden;background:var(--card);flex:none}
.d2-rd.cur{border-color:var(--red)}
.d2-rdh{display:flex;align-items:center;gap:8px;padding:9px 11px;font-size:12.5px;font-weight:600;background:var(--fill);color:var(--ink)}
.d2-rd.cur .d2-rdh{background:var(--redS)}
.d2-gs{margin-inline-start:auto;font-size:11px;color:var(--green);display:flex;align-items:center;gap:4px;font-weight:600}
.d2-gs.w{color:var(--red)}.d2-gs.t{color:var(--sky)}
.d2-fr{display:flex;align-items:center;gap:10px;padding:9px 11px;border-top:1px solid var(--line)}
.d2-fr.wait .d2-tx b{color:var(--mute);font-weight:500}
.d2-dl{width:34px;height:34px;border-radius:10px!important;display:grid;place-items:center;background:var(--red)!important;color:#fff!important;flex:none;box-shadow:0 2px 0 #8E0E16;transition:transform .2s}
.d2-dl:hover{transform:translateY(-1px)}
.d2-dl svg{width:16px;height:16px}
.d2-tdn{font:700 10.5px var(--fn);padding:3px 7px;border-radius:7px;background:var(--fill);border:1px solid var(--line);color:var(--ink2)}
.d2-seen,.d2-sent{font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap}
.d2-seen{background:var(--greenS);color:var(--green)}.d2-sent{background:var(--fill);color:var(--mute)}
.d2-todo{border:1px solid var(--line);border-radius:14px;padding:10px 11px;display:flex;flex-direction:column;gap:6px}
.d2-todo small{font-size:11px;font-weight:700;color:var(--mute);letter-spacing:.04em}
.d2-todo ol{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:5px;margin:0;padding:0}
.d2-todo li{counter-increment:s;font-size:12.5px;display:flex;gap:8px;align-items:center;color:var(--ink2);margin:0}
.d2-todo li:before{content:counter(s);width:19px;height:19px;border-radius:50%;background:var(--fill);border:1px solid var(--line2);display:grid;place-items:center;font:700 10px var(--fn);flex:none}
.d2-todo li.ok{color:var(--green)}
.d2-none{color:var(--mute);font-size:13px;padding:16px 12px;border:1px dashed var(--line2);border-radius:14px;text-align:center}
.d2-drop{display:flex!important;gap:12px;align-items:center;border:2px dashed var(--logline);background:var(--skyS);color:var(--sky)!important;border-radius:14px;padding:13px 14px;cursor:pointer;margin:0!important;letter-spacing:0!important;font-weight:400!important;flex:none}
.d2-drop:hover{border-color:var(--sky)}
.d2-drop span{display:flex;flex-direction:column}
.d2-drop b{font-size:13px;color:var(--sky)}
.d2-drop small{font-size:11px;color:var(--mute)}
.d2-drop input{display:none}
.d2-lbl{font-size:11px;font-weight:700;color:var(--mute);letter-spacing:.04em;margin:6px 2px -2px}
.d2-opt{border-radius:14px;border:1px solid var(--line)!important;padding:11px!important;text-align:start;display:flex;flex-direction:column;gap:3px;background:var(--card)!important;transition:border-color .2s,transform .2s var(--ease)}
.d2-opt:hover{border-color:var(--ink)!important;transform:translateY(-2px)}
.d2-opt b{font-size:13px}.d2-opt small{font-size:11.5px;color:var(--mute);line-height:1.45}
.d2-bkg{border-radius:16px;overflow:hidden;border:1px solid var(--line);flex:none}
.d2-bkg-d{display:flex;gap:12px;align-items:center;padding:14px;background:linear-gradient(135deg,var(--amberS),var(--card))}
.d2-bkg-d b{display:block;font-size:13.5px;color:var(--ink)}.d2-bkg-d small{display:block;color:var(--mute);font-size:12px}
.d2-cal{width:52px;border-radius:12px;background:var(--card);border:1px solid var(--line);text-align:center;overflow:hidden;flex:none}
.d2-cal small{display:block;background:var(--red);color:#fff!important;font-size:10px;font-weight:700;padding:2px}
.d2-cal b{font:700 22px var(--fn)!important;display:block;padding:3px 0}
.d2-bkg-s{padding:9px 14px;font-size:12px;color:var(--ink2)}
.d2-acts{display:flex;gap:8px;flex-wrap:wrap}
.d2-acts>*{flex:1}
.d2-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 14px;border-radius:12px;font-weight:700;font-size:13px;white-space:nowrap;text-decoration:none!important;background:var(--card)!important;color:var(--ink)!important;border:1px solid var(--line2)!important;box-shadow:0 3px 0 #B9C1CB;transition:transform .2s var(--ease)}
html.dk .d2-btn{box-shadow:0 3px 0 #0A0B0D}
.d2-btn svg{width:16px;height:16px}
.d2-btn.red{background:var(--red)!important;color:#fff!important;border-color:#B01019!important;box-shadow:0 3px 0 #8E0E16}
.d2-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.3)}
.d2-btn:disabled{opacity:.6}
.d2-wide{width:100%;margin-top:8px}
/* «تفاصيل طلبي» */
.d2-isec{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--card);flex:none}
.d2-isec h6{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--mute);letter-spacing:.02em}
.d2-iv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px dashed var(--line);font-size:13px}
.d2-iv:first-of-type{border-top:0}
.d2-iv span{color:var(--mute);flex:none}.d2-iv b{font-weight:600;text-align:end;min-width:0;overflow-wrap:anywhere;color:var(--ink)}
.d2-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.d2-chips span{font-size:12px;padding:5px 10px;border-radius:9px;background:var(--fill);border:1px solid var(--line);color:var(--ink)}
.d2-inote{margin:0;font-size:13px;line-height:1.7;color:var(--ink2)}

/* an old tune from our records */
.d2-recw{flex:1;overflow:auto;padding:22px;display:grid;place-items:center}
.d2-recc{width:min(560px,100%);border-radius:20px;border:1px solid var(--line);background:var(--card);box-shadow:var(--shL);overflow:hidden}
.d2-rect{position:relative;padding:20px 22px 0;background:radial-gradient(90% 100% at 50% 100%,var(--fill),var(--card));display:grid;place-items:center}
.d2-recimg{width:78%;max-height:200px;object-fit:contain;margin:0 auto -6px}
.d2-badge{position:absolute;top:16px;inset-inline-start:18px;font:600 10.5px var(--fn);letter-spacing:.1em;padding:4px 9px;border-radius:8px;background:#C8141F;color:#fff}
.d2-recb{padding:18px 22px 22px;display:flex;flex-direction:column;gap:12px}
.d2-recb h4{margin:0;font-size:19px;color:var(--ink)}
.d2-q{font-size:13.5px;color:var(--mute)}.d2-q.okk{color:var(--green);font-weight:600}

/* the scroll motion (dashboard.js) */
.d2-smi{will-change:transform,opacity;transform-origin:50% 100%}

/* the guides window */
.d2-gbox{max-width:880px!important}
.d2-gbox .dsh-guide{padding:0;border:0}

/* scrollbars follow the theme */
.d2 *{scrollbar-color:#C3C7CD transparent}
html.dk .d2 *{scrollbar-color:#2C2E33 #0E0F11}

/* ── narrower screens: the side column opens over the chat from its tab ── */
@media (max-width:1480px){.d2-grid{grid-template-columns:260px minmax(0,1fr) 310px}}
@media (max-width:1240px){.d2-grid{grid-template-columns:250px minmax(0,1fr) 300px}}
@media (max-width:1080px){
  .d2-grid{grid-template-columns:240px minmax(0,1fr);position:relative}
  .d2-side{display:none}
  .d2-side.show{display:flex;position:absolute;inset-block:0;inset-inline-end:0;width:min(420px,calc(100% - 254px));z-index:4;box-shadow:var(--shL)}
  .d2-fh{display:flex;padding:8px 10px 0}
  .d2-x{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line)!important;background:var(--card)!important;margin-inline-start:auto}
  .d2-ptabs{display:flex;padding:3px;background:var(--fill);border-radius:11px;gap:2px;flex:none}
  .d2-ptabs button{font-size:12.5px;padding:5px 12px;border-radius:8px;color:var(--mute);display:flex;gap:5px;align-items:center;white-space:nowrap}
  .d2-ptabs button.on{background:var(--card);color:var(--ink);box-shadow:inset 0 -2px 0 var(--red)}
  .d2-ptabs b{font:700 10px var(--fn);background:var(--red);color:#fff;border-radius:7px;padding:0 5px}
}
/* tablets (iPad portrait and landscape 1024): the order's steps take the whole width so their names are not cut,
   the chat / tune files switch goes under them */
@media (min-width:761px) and (max-width:1080px){.d2-row{flex-wrap:wrap;row-gap:8px}.d2-row>.d2-st{flex:1 1 100%;max-width:none}.d2-row>.d2-ptabs{margin-inline-start:auto}}
/* Marzouq's side panel open (marzouq-dock.js, html.mzd-open): on computers the page is 400px narrower, so the same steps
   apply 400px earlier (tablets: the panel is full screen instead) */
@media (min-width:1181px) and (max-width:1640px){html.mzd-open .d2-grid{grid-template-columns:250px minmax(0,1fr) 300px}}
@media (min-width:1181px) and (max-width:1480px){
  html.mzd-open .d2-grid{grid-template-columns:240px minmax(0,1fr);position:relative}
  html.mzd-open .d2-side{display:none}
  html.mzd-open .d2-side.show{display:flex;position:absolute;inset-block:0;inset-inline-end:0;width:min(420px,calc(100% - 254px));z-index:4;box-shadow:var(--shL)}
  html.mzd-open .d2-fh{display:flex;padding:8px 10px 0}
  html.mzd-open .d2-x{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line)!important;background:var(--card)!important;margin-inline-start:auto}
  html.mzd-open .d2-ptabs{display:flex;padding:3px;background:var(--fill);border-radius:11px;gap:2px;flex:none}
  html.mzd-open .d2-ptabs button{font-size:12.5px;padding:5px 12px;border-radius:8px;color:var(--mute);display:flex;gap:5px;align-items:center;white-space:nowrap}
  html.mzd-open .d2-ptabs button.on{background:var(--card);color:var(--ink);box-shadow:inset 0 -2px 0 var(--red)}
  html.mzd-open .d2-ptabs b{font:700 10px var(--fn);background:var(--red);color:#fff;border-radius:7px;padding:0 5px}
}
@media (max-width:760px){
  html.pwp-dash #app .shell .content{padding:10px 12px 90px!important}
  .d2{gap:12px}
  .d2-head{flex-wrap:wrap;padding:10px 56px 10px 14px;border-radius:14px}
  [dir=rtl] .d2-head{padding:10px 14px 10px 56px}
  .d2-hi h2{font-size:18px}
  .d2-hi p{display:none}
  .d2-sum{flex:1 1 100%}
  .d2-art{display:none}
  .d2-grid{display:flex;flex-direction:column;height:auto}
  .d2-rail{border:0!important;background:none!important;overflow:visible;box-shadow:none!important}
  .d2-rail .d2-colh{padding:2px 2px 8px}
  .d2-olist{flex-direction:row;overflow-x:auto;padding:0 0 6px;scroll-snap-type:x mandatory;flex:none}
  .d2-oc{min-width:250px;max-width:280px;background:var(--card)!important;border-color:var(--line)!important;scroll-snap-align:start}
  .d2-oc.on:before{inset-inline:16px;top:auto;bottom:-1px;width:auto;height:3px}
  .d2-newo{display:none}
  .d2-rail [data-mzrail]{width:100%!important;margin:4px 0 0!important}
  .d2-chatc{height:calc(100svh - 120px);min-height:560px}
  .d2-side.show{position:static;width:auto;border-radius:20px;box-shadow:var(--sh)}
  .d2-grid.files .d2-chatwrap{display:none}
  .d2-grid.files .d2-chatc{height:auto;min-height:0}
  .d2-ptabs{scroll-margin-top:calc(var(--acc-top,0px) + 70px)}
  .d2-car{display:none}
  .d2-row{flex-direction:column;align-items:stretch}
  .d2-ptabs{align-self:center}
  .d2-chat .msg-bub{max-width:88%}
  .d2-bar{gap:8px;padding:10px 14px}
  .d2-st li span{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){.d2 *,.d2-gmodal *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* the «رسائل جديدة» line in a chat (it shared the .mx-new button style of the Messages tab) */
.chat-box .mx-day.mx-new{background:none;box-shadow:none;border-radius:0;padding:0;color:inherit;font:inherit;display:flex;align-items:center;gap:10px}
.chat-box .mx-day.mx-new:before,.chat-box .mx-day.mx-new:after{content:'';flex:1;height:1px;background:#F3B7BC}

/* ── dark theme on the rest of account.html (integration 2026-10-19): v2.css keeps its light colour tokens with
   :root:not(#_), so the sign-in page and the boxes drawn with inline light colours are darkened here ── */
html.dk .auth-wrap .page-title,html.dk .content .page-title{color:var(--d-ink)}
html.dk .auth-wrap .page-sub,html.dk .content .page-sub{color:var(--d-mut)}
html.dk .auth-card{background:var(--d-card)!important;border-color:var(--d-line)!important;color:var(--d-ink)}
html.dk .auth-card :is(label,.lbl,.hint-sm,.forgot-link,.auth-or){color:var(--d-mut)}
html.dk .auth-card .auth-or::before,html.dk .auth-card .auth-or::after{background:var(--d-line)}
html.dk .content div[style*="background:#F7F8FA"]{background:var(--d-card)!important;border-color:var(--d-line)!important;color:var(--d-ink)}
html.dk .content div[style*="background:#F7F8FA"] :is(small,.hint){color:var(--d-mut)}
/* phones: the header has no room for the theme button (dashboard.css hides it there); it sits in the hello card's corner */
.d2-head .dsh-theme{display:none}
@media (max-width:820px){.d2-head .dsh-theme{display:grid;place-items:center;position:absolute;top:8px;inset-inline-end:10px;width:34px;height:34px;border-radius:10px;border:1px solid #2A2F37;background:rgba(255,255,255,.06);color:#F2F3F5;cursor:pointer;z-index:2;padding:0}}

/* ── the other tabs: «الطلبات», «الكراج», «الشروحات» (owner 2026-10-19: not full screen, smaller) ──
   On a computer they sit in a narrower centred column; an order is one row (number · car · state · amount · buttons · date),
   its stages open under it; an open garage car shows its photo beside its details; the tutorial videos are smaller cards. */
@media (min-width:821px){
  html.dash-mode:not(.dash-tune) #app .shell .content{max-width:1040px!important}
  html.dash-mode:not(.dash-tune) .content-title{font-size:1.5rem;margin-bottom:14px}
  html.dash-mode .gv-oc-b{display:grid;grid-template-columns:300px minmax(0,1fr);gap:10px 22px;align-items:start}
  html.dash-mode .gv-oc-b>.gv-pic{grid-column:1;grid-row:1/span 8;aspect-ratio:4/3;max-height:none}
  html.dash-mode .gv-oc-b>:not(.gv-pic){grid-column:2}
  html.dash-mode .gv-acts{display:flex;flex-wrap:wrap;gap:8px}
  html.dash-mode .gv-btn{min-height:40px;font-size:.92rem;padding:0 16px;border-radius:10px}
  html.dash-mode .pwpv-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
  html.dash-mode .pwpv-lib{gap:16px}
  html.dash-mode .pwpv-lib h3{font-size:16px;margin-bottom:8px}
  html.dash-mode .pwpv-card b{font-size:13.5px;padding:8px 10px 10px}
  html.dash-mode .pwpv-card .th i{width:28px;height:28px;inset-inline-start:8px;bottom:8px}
  html.dash-mode #contentArea h2{font-size:1.5rem}
}
@media (max-width:820px){
  html.dash-mode .pwpv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  html.dash-mode .pwpv-card b{font-size:13px;padding:7px 9px 9px}
}

/* ── «الملف الشخصي», «عنوان التوصيل», «الأمان», «مواعيدي» (owner 2026-10-19: no big empty spaces): a column of
   760px beside the menu, fields 42px high; invoices on «الطلبات» are slim rows ── */
@media (min-width:821px){
  html:is([data-acctab=profile],[data-acctab=address],[data-acctab=security],[data-acctab=appts]) #contentArea{max-width:760px}
  html:is([data-acctab=profile],[data-acctab=address],[data-acctab=security],[data-acctab=appts]) #contentArea .content-title{font-size:1.5rem;margin-bottom:14px}
  html:is([data-acctab=profile],[data-acctab=address],[data-acctab=security]) #contentArea :is(input:not([type=checkbox]):not([type=radio]),select){height:42px;min-height:0;padding:8px 12px;font-size:.92rem}
  html:is([data-acctab=profile],[data-acctab=address],[data-acctab=security]) #contentArea .g1{margin-bottom:12px}
  html:is([data-acctab=profile],[data-acctab=address],[data-acctab=security]) #contentArea .field-row{gap:12px}
}
html.dash-mode .wait-card{padding:10px 14px;margin-bottom:8px;border-radius:12px;gap:10px}
html.dash-mode .wait-card b{font-size:.92rem}
html.dash-mode .wait-btn{padding:7px 14px;border-radius:9px;font-size:.86rem}
/* an open order on «الطلبات» (computers): its stages in one row, like the dashboard's steps */
@media (min-width:821px){
  html.dash-mode .order-card .otl{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  html.dash-mode .order-card .otl li{padding:20px 6px 0;text-align:center;font-size:.84rem}
  html.dash-mode .order-card .otl li::after{top:0;inset-inline-start:calc(50% - 6px)}
  html.dash-mode .order-card .otl li::before{top:5px;bottom:auto;height:2px;width:100%;inset-inline-start:50%}
  html.dash-mode .order-card .otl li.cur b{margin-top:0;padding:1px 8px}
  html.dash-mode .order-card .oc-amt{padding:8px 12px;margin-top:12px}
}

/* ── 2026-10-19 (evening, owner): the order's steps, «خطوتك الجاية» and facts live at the top of the side column on
   computers, so the chat has the whole height; the column stays in place (owner 2026-10-19: no hiding) ── */
.d2-ordc{display:none;flex-direction:column;gap:10px;padding:12px 12px 0;flex:none}
.d2-ordc .d2-st{max-width:none;flex:none}
.d2-ordc .d2-next{flex-direction:column;align-items:stretch;gap:6px;padding:10px 12px}
.d2-ordc .d2-next>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.d2-ordc .d2-next .d2-btn{width:100%;justify-content:center;min-height:34px}
.d2-cfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.d2-cfacts .d2-f{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.d2-cfacts .d2-f:before{display:none}
.d2-cfacts .d2-f b{max-width:100%}
@media (min-width:1081px){
  html:not(.mzd-open) .d2-bar .d2-ordh,html:not(.mzd-open) .d2-bar .d2-row{display:none}
  html:not(.mzd-open) .d2-side .d2-ordc{display:flex}
}
@media (min-width:1481px){
  html.mzd-open .d2-bar .d2-ordh,html.mzd-open .d2-bar .d2-row{display:none}
  html.mzd-open .d2-side .d2-ordc{display:flex}
}

/* the greeting and its counts in the tabs bar on computers (dashboard.js strip / D.hi); the dark card stays on phones */
.dsb-hi{display:none}
@media (min-width:821px){
  html.pwp-dash .d2-head{display:none}
  .dsb-hi{display:flex;align-items:center;gap:10px;align-self:center;padding-bottom:6px;min-width:0}
  .dsb-hi>b{font:700 15px var(--fb);color:var(--d-ink);white-space:nowrap}
  [dir=rtl] .dsb-hi>b{font-family:var(--far)}
  .dsb-sum{display:flex;gap:6px;flex-wrap:nowrap;min-width:0}
  .dsb-sum :is(button,a){display:flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:var(--d-chip);border:1px solid var(--d-line);color:var(--d-ink);font:500 12.5px var(--fb);text-decoration:none;cursor:pointer;white-space:nowrap;margin:0}
  [dir=rtl] .dsb-sum :is(button,a){font-family:var(--far)}
  .dsb-sum b{font-family:'IBM Plex Mono',ui-monospace,monospace}
  .dsb-sum i{width:8px;height:8px;border-radius:50%;background:var(--d-mut)}
  .dsb-sum i.you{background:#E5323C}.dsb-sum i.team{background:#4D8FD6}.dsb-sum i.book{background:#D99A3E}
  @media (hover:hover) and (pointer:fine){.dsb-sum :is(button,a):hover{border-color:var(--d-mut)}}
}
.d2-ordc .d2-st li span{white-space:normal;line-height:1.25}

/* ── the dark theme on every account page (owner 2026-10-19: colours must match, every button must show) ──
   v2.css locks its light colour tokens with :root:not(#_), so dashboard.css's dark values never reached the account
   pages: labels, hints, ghost buttons and titles kept dark text on the dark page. These win over that lock. */
html.dk:not(#_):not(#_){--paper:#0E1013;--surface:#16181C;--panel:#181B20;--line:#2C2F35;--line2:#2C2F35;--graphite:#ECEDEF;--steel:#A3A9B2;
  --ink2:#C9CDD3;--soft:#1E2126;--ui-edge:#3A3E45;--green:#4FB97A;--amber:#E0A84A;--gold:#E0A84A;--gold-bg:#2A2214;--gold-ln:#5A4A2A;color-scheme:dark}
/* boxes that hard-code white (garage, videos, address form, small buttons): the dark card */
html.dk :is(.addr-form,.gv-oc,.gv-oldc,.gv-form,.gv-part,.gv-notes,.gv-sbtn,.gv-tchip,.gv-x,.pwpv-card,.of-box,.mzh-btn.ghost,.chat-back,.mx-files){background:var(--d-card)!important;color:var(--d-ink)!important;border-color:var(--d-line)!important}
html.dk :is(.gv-part input,.gv-form input,.gv-form select,.gv-form textarea){background:var(--d-chip)!important;color:var(--d-ink)!important;border-color:var(--d-line)!important}
html.dk :is(.btn-ghost-lg,.tbtn,.gv-back){color:var(--d-ink)!important;border-color:#3A3E45!important}
html.dk .gv-sbtn.del,html.dk .addr-acts .del{color:#FF8A8F!important;border-color:#5A2A2E!important}
html.dk .otl li::after{background:var(--d-card)}
html.dk .otl li.done::after{background:var(--red)}
html.dk .dl-warn{background:#2A2214!important;border-color:#5A4A2A!important;color:#F1E3C6!important}
html.dk .wait-card{border-inline-start-color:#E0A84A!important}
html.dk .wait-card span{color:var(--d-mut)!important}
html.dk .action-flag{background:#2A2214!important;border-color:#5A4A2A!important;color:#F1E3C6!important}
html.dk .badge-pending{background:#2A2214;color:#E0A84A}
html.dk #delBox{border-top-color:var(--d-line)!important;color:var(--d-ink)}
html.dk #delBox button[style*="background:#fff"]{background:transparent!important;color:#FF8A8F!important;border-color:#7A3236!important}
/* red words on the dark cards were too dim to read: a lighter red for text only */
html.dk .d2 :is(.d2-oc-st.you,.d2-pill.you,.d2-next small,.d2-gs.w,.d2-fi,.d2-st li.cur){color:#FF7076}
html.dk .d2 .d2-st li.ok i{color:#0E0F11}
html.dk .order-chat.new{color:#FF7076!important;border-color:#7A3236!important}
html.dk .otl li.cur b{color:#FF7076;border-color:#FF7076}
/* the light theme: the small green words a step darker */
html:not(.dk) .d2 :is(.d2-gs,.d2-seen){color:#176B3B}
/* status badges, the order window's buttons and the stars, the garage's red words, in the dark theme */
html.dk .badge-ready,html.dk .badge-paid{background:#13251B;color:#6FD69A}
html.dk .badge-in_progress{background:#14202D;color:#86BBF0}
html.dk :is(.badge-delivered,.badge-cancelled,.badge-pending_payment,.badge-new){background:#22262D;color:#C9CDD3}
html.dk .modal-done{background:var(--d-chip)!important;color:var(--d-ink)!important;border:1px solid var(--d-line)!important}
html.dk .file-row button{background:var(--d-chip)!important;color:var(--d-ink)!important;border-color:var(--d-line)!important}
html.dk #revStars button{background:var(--d-chip)!important;color:var(--d-mut)!important;border-color:var(--d-line)!important}
html.dk :is(.gv-oc-t small,.gv-mods .c,.gv-hero-sub){color:#FF7076}
html.dk #contentArea a:not(.btn-red):not(.wait-btn):not(.gv-btn):not([class*=btn]){color:#FF8A8F}
html.dk [style*="color:#1E7A3C"]{color:#5FCB8C!important}
@media (min-width:821px){html[data-acctab=address] #contentArea textarea{min-height:84px;height:84px}}

/* «ملفات البرمجة | تفاصيل طلبي» (owner 2026-10-19: make it clear they are fixed tabs): a full-width tab bar in the
   style of the page tabs (red line under the chosen one), as the head of the list below it */
.d2-side .d2-fsr{margin:12px 0 0;padding:0 12px;border-bottom:1px solid var(--line);gap:0}
.d2-side .d2-fsr .d2-fseg{background:none;border:0;border-radius:0;padding:0;gap:0}
.d2-side .d2-fseg button{height:42px;border-radius:0;font-size:13.5px;font-weight:600;color:var(--mute);border-bottom:3px solid transparent!important;margin-bottom:-1px!important;box-shadow:none!important;background:none!important;transition:color .15s,border-color .15s}
.d2-side .d2-fseg button.on{color:var(--ink);font-weight:700;border-bottom-color:var(--red)!important}
@media (hover:hover) and (pointer:fine){.d2-side .d2-fseg button:not(.on):hover{color:var(--ink)}}
.d2-side .d2-fseg button:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.d2-side .d2-fscroll{padding-top:12px}
html.dk .d2-side .d2-fseg button.on{border-bottom-color:#FF4A53!important}

/* ── phones (owner 2026-10-19): two buttons under the order. «المحادثة» opens the chat on the whole screen (back button
   and the phone's own back close it); «ملفات البرمجة» takes you to the files, which stay on the page ── */
.d2-fsh{display:none}
.d2-pdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-inline-start:6px;vertical-align:middle}
/* owner 2026-10-20: a new team reply shows on the chat button itself («رد جديد»), not only as a dot on the order card */
.d2-pnew{font-style:normal;font-size:11px;font-weight:700;line-height:1;padding:3px 7px;border-radius:999px;background:var(--red);color:#fff}
@media (max-width:760px){
  .d2 .d2-grid>.d2-side{display:flex!important;position:static;width:auto;border-radius:20px;box-shadow:var(--sh)}
  .d2 .d2-grid .d2-chatc{height:auto!important;min-height:0!important}
  .d2 .d2-chatc .d2-chatwrap{display:none}
  .d2-row>.d2-ptabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-self:stretch;padding:0;background:none;border-radius:0}
  .d2 .d2-row>.d2-ptabs button{height:44px;justify-content:center;border-radius:12px;font-size:14px;font-weight:700;box-shadow:none!important;border:1px solid var(--line)!important;background:var(--card)!important;color:var(--ink)}
  .d2 .d2-row>.d2-ptabs button:first-child{background:var(--red)!important;border-color:var(--red)!important;color:#fff}
  .d2 .d2-row>.d2-ptabs button:first-child .d2-pdot{background:#fff}
  .d2 .d2-row>.d2-ptabs button:first-child .d2-pnew{background:#fff;color:var(--red)}
  html.d2-full,html.d2-full body{overflow:hidden}
  html.d2-full .d2 .d2-grid .d2-chatc{position:fixed;inset:0;z-index:120;height:100dvh!important;margin:0;border:0;border-radius:0;box-shadow:none;transform:none!important;opacity:1!important;display:flex;flex-direction:column;background:var(--card)}
  html.d2-full .d2-chatc>.d2-bar{display:none}
  html.d2-full .d2-chatc .d2-chatwrap{display:flex;flex:1;min-height:0}
  html.d2-full .d2-fsh{display:flex;align-items:center;gap:10px;flex:none;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;border-bottom:1px solid var(--line);background:var(--card)}
  .d2-fsb{display:inline-flex;align-items:center;gap:4px;height:38px;padding:0 12px 0 8px;border-radius:10px;border:1px solid var(--line);background:var(--fill);color:var(--ink);font:600 14px var(--f);cursor:pointer;flex:none}
  [dir=rtl] .d2-fsb{font-family:var(--far);padding:0 8px 0 12px}
  [dir=ltr] .d2-fsb svg{transform:scaleX(-1)}
  .d2-fst{display:flex;flex-direction:column;min-width:0}
  .d2-fst b{font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .d2-fst small{font-size:12px;color:var(--mute)}
  html.d2-full .d2-chat .mx-comp{padding-bottom:calc(10px + env(safe-area-inset-bottom))!important}
  html.d2-full :is(#app .shell .sidebar,.pwp-chat,.mzk,nav.top){visibility:hidden}
}
@media (max-width:760px){.d2 .d2-side .d2-fh{display:none!important}.d2 .d2-side .d2-fsr{margin-top:4px}}


/* ── «طلباتي» (owner 2026-10-19: nicer, smaller, no big boxes): one slim row per order — the car's picture, its name and
   year, «رقم الطلب · البرمجة · التاريخ», the state and the amount; a tap opens its steps, amount and buttons under it ── */
html.dash-mode .order-card.oc2{display:block;padding:0;margin:0 0 8px;border-radius:14px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
@media (hover:hover) and (pointer:fine){html.dash-mode .order-card.oc2:hover{border-color:var(--line2)}}
html.dash-mode .order-card.oc2.open{box-shadow:0 10px 30px -22px rgba(0,0,0,.45)}
.oc2-h{display:grid;grid-template-columns:72px minmax(0,1fr) auto auto 30px;align-items:center;gap:4px 14px;padding:10px 14px;min-height:64px}
.oc2-pic{width:72px;height:44px;display:grid;place-items:center;border-radius:10px;background:var(--soft,#EEF1F4);overflow:hidden}
.oc2-img{width:100%;height:100%;object-fit:contain}
.oc2-img.oc2-logo{width:34px;height:auto;opacity:.75}
.oc2-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.oc2-id b{font-size:15px;font-weight:700;color:var(--graphite);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
[dir=rtl] .oc2-id b{font-family:var(--far)}
.oc2-id b small{font-size:13px;font-weight:600;color:var(--steel);font-family:'IBM Plex Mono',ui-monospace,monospace}
.oc2-id>small{font-size:12.5px;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc2-id .order-num{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600;font-size:12.5px;letter-spacing:0}
.oc2-st{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.oc2-st .badge{margin:0!important;border-radius:999px;padding:3px 10px;font-size:12px}
.oc2-amt.order-total{font-size:15px!important;font-weight:800;white-space:nowrap;color:var(--graphite)!important}
.order-card.oc2 .oc-chev{width:30px;height:30px}
.order-card.oc2 .action-flag{margin:0 14px 10px;border-radius:10px}
.order-card.oc2 .oc-x{padding:4px 14px 0;border-top:1px solid var(--line2);margin:0}
.order-card.oc2 .oc-x .otl{margin-top:14px}
.order-card.oc2 .oc2-acts{display:none;padding:10px 14px 14px;gap:8px}
.order-card.oc2.open .oc2-acts{display:flex}
.order-card.oc2 .oc2-acts .order-chat{margin:0;border-radius:10px;padding:7px 12px;font-size:13px}
.order-card.oc2.upd .oc2-id b::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-inline-start:8px;vertical-align:middle}
.order-card.oc2 .order-num::after{display:none!important}
/* the filter above the list: a slim segmented row */
html.dash-mode .ord-seg,html.dash-mode #contentArea .ord-seg{margin-bottom:10px}
@media (max-width:820px){
  .oc2-h{grid-template-columns:60px minmax(0,1fr) 28px;grid-template-areas:"pic id chev" "pic meta chev";gap:4px 10px;padding:10px 12px}
  .oc2-pic{grid-area:pic;width:60px;height:40px}
  .oc2-id{grid-area:id}
  .oc2-st{grid-area:meta;justify-content:flex-start}
  .oc2-amt{display:none}
  .order-card.oc2 .oc-chev{grid-area:chev}
  .order-card.oc2 .oc-x .otl li{font-size:.86rem}
  .order-card.oc2 .oc2-acts{flex-wrap:wrap}
  .order-card.oc2 .oc2-acts .order-chat{flex:1 1 auto;justify-content:center}
}
html.dk .oc2-pic{background:#22262D}
html.dk .order-card.oc2 .oc-x{border-top-color:var(--d-line)}
/* the filter «الكل · قيد التنفيذ · مكتملة · ملغية»: one row of small pills */
html.dash-mode .mx-seg.oc-seg{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;background:none!important;border:0!important;padding:0 0 2px;margin:0 0 12px;box-shadow:none;scrollbar-width:none}
html.dash-mode .mx-seg.oc-seg::-webkit-scrollbar{display:none}
html.dash-mode .mx-seg.oc-seg button{flex:none;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line)!important;background:var(--panel)!important;color:var(--steel);font-size:13px;font-weight:600;box-shadow:none!important;white-space:nowrap}
html.dash-mode .mx-seg.oc-seg button.on{background:var(--graphite)!important;border-color:var(--graphite)!important;color:var(--paper)!important}
html.dash-mode .mx-seg.oc-seg button em{font-style:normal;opacity:.7;margin-inline-start:4px}
html.dk.dash-mode .mx-seg.oc-seg button{background:var(--d-card)!important;border-color:var(--d-line)!important;color:var(--d-mut)!important}
html.dk.dash-mode .mx-seg.oc-seg button.on{background:#ECEDEF!important;border-color:#ECEDEF!important;color:#0E0F11!important}
@media (max-width:820px){
  .oc2-h{grid-template-areas:"pic id chev" "pic meta chev"}
  .oc2-id>small{white-space:normal;line-height:1.5}
  .oc2-st{grid-area:meta;gap:8px}
  .oc2-amt{display:inline;grid-area:meta;justify-self:end;align-self:center;font-size:14px!important}
  html.dash-mode .wait-card{padding:10px 12px}
  html.dash-mode .wait-card .wait-btn{padding:6px 12px}
}

/* «افتح بتطبيق PWP» (owner 2026-10-20): phones that came from a link to an order chat */
.d2-appbar{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--card);border:1px solid var(--line);
  position:fixed;z-index:300;top:calc(10px + env(safe-area-inset-top));left:12px;right:12px;box-shadow:0 12px 32px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.12);
  animation:d2-appbar-in .32s cubic-bezier(0.23,1,0.32,1) both}
/* it comes down from the top like a phone notification (owner 2026-10-20) and goes back up when closed */
.d2-appbar.still{animation:none}
@keyframes d2-appbar-in{from{transform:translateY(calc(-100% - 24px));opacity:0}to{transform:none;opacity:1}}
.d2-appbar.out{transition:transform .22s cubic-bezier(0.23,1,0.32,1),opacity .22s cubic-bezier(0.23,1,0.32,1);transform:translateY(calc(-100% - 24px));opacity:0}
@media (prefers-reduced-motion:reduce){@keyframes d2-appbar-in{from{opacity:0}to{opacity:1}}.d2-appbar.out{transform:none}}
.d2-appbar img{width:36px;height:36px;border-radius:9px;flex:none}
.d2-appbar-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.d2-appbar-t b{font-size:14px;color:var(--ink)}
.d2-appbar-t span{font-size:12.5px;color:var(--mute)}
.d2-appbar .d2-btn{flex:none;height:36px;padding:0 16px;display:inline-flex;align-items:center;border-radius:10px;text-decoration:none}
.d2-appbar-x{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;color:var(--mute);background:none;border:0;cursor:pointer}
.d2-appbar-x svg{width:16px;height:16px}
[dir=rtl] .d2-appbar-t b,[dir=rtl] .d2-appbar-t span{font-family:var(--far)}
/* a dealer order (owner 2026-10-21): no order chat — the dealer's contact line, and the datalog picker of the upload */
.d2-nochat.d2-dlrc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ink2)}
.d2-dlrc b{font-size:15.5px;color:var(--ink);line-height:1.5}
.d2-dlrc small{color:var(--mute);font-size:12px}
.d2-dlrc .d2-acts{justify-content:center}
.d2-dlrb{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;background:#E2B44C;color:#1A1408;font:700 11.5px var(--far)}
.d2-dlpick{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);margin:0 0 8px}
.d2-dlpick select{font:inherit;font-size:12.5px;border:1px solid var(--line2);border-radius:9px;padding:6px 8px;background:var(--card);color:var(--ink)}