/* =====================================================================
   بوابة العميل — اللوحة الجانبية ومساحة العمل (الإصدار الثاني)
   نفس هوية واجهة المكتب: شريطٌ كحليّ بالجنب، والمحتوى ببطاقاتٍ هادئة.
   ===================================================================== */
:root{
 --sb-bg:#0E2B41;--sb-bg-2:#0A2233;--sb-line:#1E4360;--sb-txt:#D8E6F1;
 --sb-dim:#8AA6BC;--sb-hover:#1A3F5B;--sb-pill:#1C4363;--sb-av:#245C86;
 --ring-bg:#E4ECF3;
}
:root[data-theme="dark"]{
 --sb-bg:#08161F;--sb-bg-2:#050F17;--sb-line:#1B3245;--sb-txt:#D3E3F0;
 --sb-dim:#7F97AB;--sb-hover:#16303F;--sb-pill:#1D3A50;--sb-av:#255273;
 --ring-bg:#1E3446;
}

/* ------------------------------------------------------------ الهيكل */
.px{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.px-side{background:var(--sb-bg);color:var(--sb-txt);position:sticky;top:0;height:100vh;
 display:flex;flex-direction:column;z-index:40}
.px-brand{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;border-bottom:1px solid var(--sb-line)}
.px-logo{width:36px;height:36px;border-radius:9px;background:#fff;display:grid;place-items:center;
 flex:0 0 36px;overflow:hidden;color:#0E2B41;font-weight:800;font-size:15px}
.px-logo img{width:100%;height:100%;object-fit:contain}
.px-brand .nm{font-weight:700;color:#fff;font-size:12.8px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.px-brand .sub{font-size:10.4px;color:var(--sb-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.px-nav{flex:1;overflow-y:auto;padding:6px 8px 10px}
.px-nav::-webkit-scrollbar{width:5px}.px-nav::-webkit-scrollbar-thumb{background:var(--sb-pill);border-radius:9px}
.px-grp{font-size:9.6px;color:var(--sb-dim);letter-spacing:.8px;padding:13px 10px 4px;font-weight:700}
.px-it{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;color:var(--sb-txt);
 font-size:12.4px;cursor:pointer;user-select:none;margin:1px 0;transition:background .12s}
.px-it:hover{background:var(--sb-hover);color:#fff}
.px-it.on{background:var(--teal);color:#fff;font-weight:600}
.px-it .ic{width:16px;text-align:center;font-size:12.5px;opacity:.9;flex:0 0 16px}
.px-it .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.px-it .n{min-width:18px;padding:0 6px;border-radius:99px;background:var(--high);color:#fff;
 font-size:9.8px;font-weight:700;line-height:18px;text-align:center}
.px-it .n.calm{background:var(--sb-pill);color:var(--sb-txt)}
.px-it.on .n.calm{background:rgba(255,255,255,.22);color:#fff}
.px-it .chev{font-size:9px;opacity:.65;transition:transform .15s}
.px-it .chev.open{transform:rotate(90deg)}
body[dir="rtl"] .px-it .chev{transform:rotate(180deg)}
body[dir="rtl"] .px-it .chev.open{transform:rotate(90deg)}
.px-subs{margin:2px 0 4px;padding-inline-start:8px;border-inline-start:1px solid var(--sb-line);margin-inline-start:17px}
.px-sub{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:6px;font-size:11.6px;
 color:var(--sb-txt);cursor:pointer;line-height:1.35}
.px-sub:hover{background:var(--sb-hover);color:#fff}
.px-sub.on{background:var(--sb-pill);color:#fff;font-weight:600}
.px-sub .bar{flex:0 0 34px;height:4px;border-radius:9px;background:var(--sb-line);overflow:hidden}
.px-sub .bar i{display:block;height:100%;background:#5FC48C}
.px-sub .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.px-sub .d{width:7px;height:7px;border-radius:50%;background:var(--high);flex:0 0 7px}
.px-user{border-top:1px solid var(--sb-line);padding:10px 12px 12px}
.px-urow{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.px-av{width:32px;height:32px;border-radius:50%;background:var(--sb-av);color:#fff;display:grid;place-items:center;
 font-weight:700;font-size:13px;flex:0 0 32px}
.px-urow .nm{font-size:12px;color:#fff;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.px-urow .rl{font-size:10px;color:var(--sb-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.px-tools{display:flex;gap:6px}
.px-tools button{flex:1;border:1px solid var(--sb-line);background:transparent;color:var(--sb-txt);border-radius:7px;
 padding:5px 6px;font-size:11px;cursor:pointer;font-family:inherit}
.px-tools button:hover{background:var(--sb-hover);color:#fff}

.px-main{min-width:0;display:flex;flex-direction:column}
.px-top{display:flex;align-items:center;gap:10px;padding:12px 22px;background:var(--surface);
 border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;min-height:56px}
.px-top h1{margin:0;font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;min-width:0}
.px-top .crumb{font-size:11px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.px-top .crumb a{color:var(--muted);cursor:pointer;text-decoration:none}
.px-top .crumb a:hover{color:var(--teal)}
.px-top .sp{margin-inline-start:auto;display:flex;gap:6px;align-items:center}
.px-burger{display:none;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:7px;
 width:34px;height:34px;font-size:17px;cursor:pointer}
.px-body{padding:20px 22px 40px;max-width:1280px;width:100%;margin:0 auto}
.px-scrim{display:none}

@media(max-width:980px){
 .px{grid-template-columns:1fr}
 .px-side{position:fixed;inset-block:0;inset-inline-start:0;width:270px;transform:translateX(105%);transition:transform .2s}
 body[dir="ltr"] .px-side{transform:translateX(-105%)}
 .px.nav-open .px-side{transform:none!important}
 .px.nav-open .px-scrim{display:block;position:fixed;inset:0;background:rgba(5,15,23,.45);z-index:35}
 .px-burger{display:inline-grid;place-items:center}
 .px-top{padding:10px 14px}
 .px-body{padding:14px 14px 30px}
}

/* ------------------------------------------------------------ أدوات عامة */
.px-grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-side{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g-side{grid-template-columns:1fr}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}
.px-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);overflow:hidden}
.px-card>.h{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid var(--line)}
.px-card>.h h3{margin:0;font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px}
.px-card>.h .tg{font-size:10px;font-weight:700;color:var(--muted);background:var(--pill);border-radius:99px;padding:1px 8px}
.px-card>.h .acts{margin-inline-start:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.px-card>.b{padding:13px 15px}
.px-card>.b.np{padding:0}
.px-card+.px-card,.px-grid+.px-card,.px-card+.px-grid,.px-grid+.px-grid{margin-top:12px}
.px-empty{padding:26px 14px;text-align:center;color:var(--muted);font-size:12.2px}
.px-load{padding:40px 14px;text-align:center;color:var(--muted);font-size:12.5px}
.px-load:before{content:"";display:block;width:26px;height:26px;margin:0 auto 10px;border-radius:50%;
 border:3px solid var(--line);border-top-color:var(--teal);animation:pxspin .8s linear infinite}
@keyframes pxspin{to{transform:rotate(360deg)}}
.px-muted{color:var(--muted)}
.px-small{font-size:11px}
.px-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.px-sp{margin-inline-start:auto}
.btn.ok{background:var(--low);border-color:var(--low)}
.btn.warn{background:var(--med);border-color:var(--med)}
.btn.danger{background:var(--surface);color:var(--high);border-color:var(--high-line)}
.btn.danger:hover{background:var(--high-bg)}
a.btn{text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:2px 10px;font-size:10.8px;font-weight:700;white-space:nowrap}
.chip.ok{background:var(--low-bg);color:var(--low)}
.chip.wait{background:var(--med-bg);color:var(--med)}
.chip.bad{background:var(--high-bg);color:var(--high)}
.chip.info{background:var(--teal-soft);color:var(--teal)}
.chip.na{background:var(--pill);color:var(--muted)}
.chip.vi{background:var(--violet-bg);color:var(--violet)}
.px-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.px-f{border:1px solid var(--line-2);background:var(--surface);color:var(--muted);border-radius:99px;padding:5px 13px;
 font-size:11.6px;font-weight:600;cursor:pointer;font-family:inherit}
.px-f:hover{color:var(--ink)}
.px-f.on{background:var(--teal);border-color:var(--teal);color:#fff}
.px-f .c{opacity:.75;margin-inline-start:4px}
.px-in{padding:8px 11px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);color:var(--ink);
 font:inherit;font-size:12.5px;outline:none;min-width:0}
.px-in:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}

/* ------------------------------------------------------------ إحصاءات */
.st{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 15px;position:relative;overflow:hidden;
 cursor:default;box-shadow:var(--sh)}
.st.click{cursor:pointer}.st.click:hover{border-color:var(--brand-line)}
.st .ic{position:absolute;inset-inline-end:12px;top:11px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
 font-size:14px;background:var(--teal-soft);color:var(--teal)}
.st.c2 .ic{background:var(--low-bg);color:var(--low)}.st.c3 .ic{background:var(--med-bg);color:var(--med)}
.st.c4 .ic{background:var(--violet-bg);color:var(--violet)}.st.c5 .ic{background:var(--high-bg);color:var(--high)}
.st .l{font-size:11px;color:var(--muted);font-weight:600}
.st .v{font-size:23px;font-weight:700;letter-spacing:-.4px;line-height:1.3;margin-top:3px}
.st .v small{font-size:12px;color:var(--muted);font-weight:600;margin-inline-start:3px}
.st .s{font-size:10.8px;color:var(--muted);margin-top:2px}
.st .pb{margin-top:8px}

.pb{height:7px;border-radius:99px;background:var(--ring-bg);overflow:hidden}
.pb i{display:block;height:100%;border-radius:99px;background:var(--teal);transition:width .4s}
.pb.ok i{background:var(--low)}.pb.wait i{background:var(--med)}.pb.vi i{background:var(--violet)}
.pbl{display:flex;justify-content:space-between;font-size:11.2px;color:var(--muted);margin:9px 0 4px}
.pbl b{color:var(--ink)}

.ring{position:relative;width:118px;height:118px;flex:0 0 118px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .t{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring .t b{font-size:25px;font-weight:800;display:block;line-height:1}
.ring .t span{font-size:10px;color:var(--muted)}
.ring.sm{width:52px;height:52px;flex:0 0 52px}.ring.sm .t b{font-size:12.5px}

/* ------------------------------------------------------------ بطاقات العميل */
.hero{display:flex;gap:16px;align-items:center;padding:18px;background:var(--art);color:#E9F2F9;border-radius:14px;
 position:relative;overflow:hidden;margin-bottom:12px}
.hero:after{content:"";position:absolute;inset-inline-end:-70px;bottom:-90px;width:240px;height:240px;border-radius:50%;background:rgba(78,155,206,.16)}
.hero .lg{width:62px;height:62px;border-radius:14px;background:#fff;display:grid;place-items:center;overflow:hidden;
 color:#0E2B41;font-size:24px;font-weight:800;flex:0 0 62px}
.hero .lg img{width:100%;height:100%;object-fit:contain}
.hero h2{margin:0;font-size:20px;font-weight:700}
.hero .m{font-size:12px;color:#BCD5E7;margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}
.hero .m span{background:rgba(255,255,255,.1);border-radius:99px;padding:1px 10px}
.hero .pc{margin-inline-start:auto;text-align:end;position:relative;z-index:1}
.hero .pc .k{font-size:10.5px;color:#9FC0D8}
.hero .pc .vv{font-size:13px;font-weight:600}
.hero .pc a{color:#fff}
@media(max-width:700px){.hero{flex-wrap:wrap}.hero .pc{margin-inline-start:0;text-align:start}}

.kv2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px 18px}
.kv2 .k{font-size:10.4px;color:var(--muted);margin-bottom:2px}
.kv2 .v{font-size:12.8px;font-weight:600;word-break:break-word}
@media(max-width:900px){.kv2{grid-template-columns:repeat(2,minmax(0,1fr))}}

.fl{display:flex;align-items:center;gap:12px;padding:11px 15px;border-bottom:1px solid var(--line);cursor:pointer}
.fl:last-child{border-bottom:0}
.fl:hover{background:var(--hover)}
.fl .mn{flex:1;min-width:0}
.fl .tt{font-weight:700;font-size:13px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.fl .sb{font-size:11px;color:var(--muted);margin-top:2px;display:flex;gap:10px;flex-wrap:wrap}
.fl .pb{margin-top:7px;max-width:420px}
.fl .rt{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* ------------------------------------------------------------ المطلوب منك */
.todo{display:flex;align-items:center;gap:11px;padding:10px 15px;border-bottom:1px solid var(--line)}
.todo:last-child{border-bottom:0}
.todo .ti{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 34px;font-size:15px;
 background:var(--med-bg);color:var(--med)}
.todo .ti.b{background:var(--teal-soft);color:var(--teal)}.todo .ti.r{background:var(--high-bg);color:var(--high)}
.todo .ti.g{background:var(--low-bg);color:var(--low)}
.todo .tx{flex:1;min-width:0}
.todo .tx b{display:block;font-size:12.6px}
.todo .tx span{font-size:11px;color:var(--muted)}

.ml{display:flex;gap:10px;padding:10px 15px;border-bottom:1px solid var(--line);cursor:pointer}
.ml:last-child{border-bottom:0}
.ml:hover{background:var(--hover)}
.ml .av{width:32px;height:32px;border-radius:50%;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;
 font-weight:700;font-size:12px;flex:0 0 32px}
.ml .av.cl{background:var(--violet-bg);color:var(--violet)}
.ml .bd{flex:1;min-width:0}
.ml .hd{display:flex;gap:6px;align-items:center;font-size:11.4px}
.ml .hd b{font-size:12px}
.ml .hd .at{margin-inline-start:auto;color:var(--muted);font-size:10.4px;white-space:nowrap}
.ml .tx{font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.ml.un .tx{font-weight:700;color:var(--ink)}
.ml .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);align-self:center;flex:0 0 8px}

/* ------------------------------------------------------------ مركز الدردشة */
.chatc{display:grid;grid-template-columns:300px minmax(0,1fr);height:calc(100vh - 140px);min-height:460px;
 background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--sh)}
.chatc.single{grid-template-columns:1fr;height:calc(100vh - 250px)}
.cl-list{border-inline-end:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--surface-2)}
.cl-list .sr{padding:10px;border-bottom:1px solid var(--line)}
.cl-list .sr input{width:100%}
.cl-items{flex:1;overflow-y:auto}
.cl-it{display:flex;gap:10px;padding:11px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.cl-it:hover{background:var(--hover)}
.cl-it.on{background:var(--teal-soft);box-shadow:inset 3px 0 0 var(--teal)}
body[dir="rtl"] .cl-it.on{box-shadow:inset -3px 0 0 var(--teal)}
.cl-it .av{width:38px;height:38px;border-radius:11px;background:var(--sb-bg);color:#fff;display:grid;place-items:center;
 font-size:11px;font-weight:700;flex:0 0 38px}
.cl-it .bd{flex:1;min-width:0}
.cl-it .r1{display:flex;gap:6px;align-items:center}
.cl-it .r1 b{font-size:12.4px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-it .r1 .at{font-size:10px;color:var(--muted);white-space:nowrap}
.cl-it .r2{display:flex;gap:6px;align-items:center;margin-top:3px}
.cl-it .r2 span{flex:1;min-width:0;font-size:11.4px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-it .r2 .n{background:var(--teal);color:#fff;border-radius:99px;font-size:9.8px;font-weight:700;min-width:18px;line-height:18px;
 text-align:center;padding:0 5px}
.cl-it.un .r2 span{color:var(--ink);font-weight:600}
.cv{display:flex;flex-direction:column;min-height:0;min-width:0}
.cv-h{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.cv-h .t{flex:1;min-width:0}
.cv-h .t b{display:block;font-size:13.2px}
.cv-h .t span{font-size:11px;color:var(--muted)}
.cv .msgs{flex:1;min-height:0}
.cv .composer textarea{flex:1;padding:9px 12px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);
 color:var(--ink);font-size:12.8px;font-family:inherit;outline:none;resize:none;height:42px;max-height:140px;line-height:1.5}
.cv .composer textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.day{align-self:center;font-size:10.4px;color:var(--muted);background:var(--surface);border:1px solid var(--line);
 border-radius:99px;padding:2px 11px;margin:4px 0}
.cl-back{display:none}
@media(max-width:860px){
 .chatc{grid-template-columns:1fr;height:calc(100vh - 120px)}
 .chatc.has-open .cl-list{display:none}
 .chatc:not(.has-open) .cv{display:none}
 .cl-back{display:inline-block}
}

/* ------------------------------------------------------------ مساحة الملف */
.fh{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.fh .tt{flex:1;min-width:0}
.fh h2{margin:0;font-size:19px;font-weight:700;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fh .sb{font-size:11.6px;color:var(--muted);margin-top:3px;display:flex;gap:12px;flex-wrap:wrap}
.ftabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto;scrollbar-width:thin}
.ftab{padding:9px 13px;font-size:12.3px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;
 white-space:nowrap;display:flex;align-items:center;gap:6px;user-select:none}
.ftab:hover{color:var(--ink)}
.ftab.on{color:var(--teal);border-bottom-color:var(--teal)}
.ftab .n{background:var(--high);color:#fff;border-radius:99px;font-size:9.6px;font-weight:700;min-width:17px;line-height:17px;
 text-align:center;padding:0 5px}
.ftab .n.calm{background:var(--pill);color:var(--muted)}

.prog{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.prog .bars{flex:1;min-width:240px}

.steps{display:flex;align-items:flex-start;overflow-x:auto;padding:6px 2px 4px}
.stp{flex:0 0 96px;display:flex;flex-direction:column;align-items:center;text-align:center}
.stl{flex:1 1 30px;min-width:24px;height:3px;background:var(--line);margin-top:14px;border-radius:9px}
.stl.on{background:var(--low)}
.stp .c{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface);
 border:2px solid var(--line-2);color:var(--muted);font-size:12px;font-weight:700}
.stp.done .c{background:var(--low);border-color:var(--low);color:#fff}
.stp.current .c{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 0 0 5px var(--teal-soft)}
.stp .l{font-size:11px;margin-top:7px;color:var(--muted);line-height:1.4}
.stp.current .l{color:var(--teal);font-weight:700}
.stp.done .l{color:var(--ink-2)}

.tl{position:relative;padding-inline-start:18px}
.tl:before{content:"";position:absolute;inset-inline-start:5px;top:4px;bottom:4px;width:2px;background:var(--line)}
.tl .e{position:relative;padding:3px 0 10px}
.tl .e:before{content:"";position:absolute;inset-inline-start:-17px;top:7px;width:10px;height:10px;border-radius:50%;
 background:var(--surface);border:2px solid var(--teal)}
.tl .e.back:before{border-color:var(--med)}
.tl .e b{font-size:12px}
.tl .e span{display:block;font-size:10.6px;color:var(--muted)}

/* التوقيعات */
.sg{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:11px;overflow:hidden;box-shadow:var(--sh)}
.sg-h{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.sg-h .ttl{flex:1;min-width:200px}
.sg-h .ttl b{font-size:13px;display:block}
.sg-h .ttl span{font-size:10.8px;color:var(--muted)}
.sg-h .cnt{min-width:150px}
.sg-h .cnt .pb{margin-top:4px}
.sg-h .cnt div:first-child{font-size:11px;color:var(--muted);display:flex;justify-content:space-between}
.sg-r{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,1.3fr) auto;gap:10px;align-items:center;
 padding:10px 14px;border-bottom:1px solid var(--line)}
.sg-r:last-child{border-bottom:0}
.sg-r.mine{background:var(--teal-soft)}
.sg-r .who b{display:block;font-size:12.4px}
.sg-r .who span{font-size:10.8px;color:var(--muted)}
.sg-r .when{font-size:10.8px;color:var(--muted);line-height:1.6}
.sg-r .acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
@media(max-width:760px){.sg-r{grid-template-columns:1fr 1fr}.sg-r .acts{grid-column:1/-1;justify-content:flex-start}}
.ppl{display:flex;gap:8px;flex-wrap:wrap}
.pp{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:7px 11px;background:var(--surface)}
.pp b{font-size:12px}
.pp span{font-size:10.6px;color:var(--muted)}

/* الفريق */
.tm{display:flex;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--sh)}
.tm .av{width:46px;height:46px;border-radius:13px;background:var(--sb-bg);color:#fff;display:grid;place-items:center;
 font-weight:700;font-size:16px;flex:0 0 46px}
.tm .bd{flex:1;min-width:0}
.tm .bd b{font-size:13.2px;display:block}
.tm .rl{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}
.tm .ct{font-size:11.6px;color:var(--ink-2);display:flex;flex-direction:column;gap:2px;margin-top:4px}
.tm .ct a{color:var(--ink-2);text-decoration:none;direction:ltr;unicode-bidi:embed}
.tm .ct a:hover{color:var(--teal)}
.tm .bt{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}

/* الميزان */
.tbw{overflow:auto;max-height:calc(100vh - 260px)}
.tbt{width:100%;border-collapse:separate;border-spacing:0;font-size:11.8px}
.tbt th{position:sticky;top:0;z-index:2;background:var(--surface-2);text-align:start;padding:8px 9px;font-size:10.4px;
 color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap}
.tbt td{padding:6px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbt th.n{text-align:end}
.tbt td.n{text-align:end;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:11.4px}
.tbt tr.l1 td{background:var(--sb-bg);color:#fff;font-weight:700;font-size:12px}
.tbt tr.l2 td{background:var(--teal-soft);font-weight:700;color:var(--teal)}
.tbt tr.ty td{background:var(--surface-2);font-weight:700}
.tbt tr.ac td:first-child{padding-inline-start:26px}
.tbt tr.tot td{background:var(--sb-bg-2);color:#fff;font-weight:800}
.tbt .adj{color:var(--violet)}
.tbt .neg{color:var(--high)}

/* نافذة منبثقة */
.px-modal{position:fixed;inset:0;background:rgba(5,15,23,.55);z-index:100;display:flex;align-items:flex-start;justify-content:center;
 padding:40px 14px;overflow-y:auto}
.px-dlg{background:var(--surface);border-radius:14px;width:100%;max-width:620px;box-shadow:0 20px 50px -10px rgba(0,0,0,.4);
 border:1px solid var(--line)}
.px-dlg.wide{max-width:900px}
.px-dlg .dh{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line)}
.px-dlg .dh h3{margin:0;font-size:14.5px;flex:1}
.px-dlg .dh button{border:0;background:transparent;font-size:20px;color:var(--muted);cursor:pointer;line-height:1}
.px-dlg .db{padding:16px 18px;max-height:calc(100vh - 200px);overflow-y:auto}
.px-dlg .df{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.px-dlg .err{margin:0 0 12px}
.ck{display:flex;align-items:flex-start;gap:8px;padding:6px 2px;font-size:12.3px;cursor:pointer}
.ck input{margin-top:3px;accent-color:var(--teal)}
.ck.dis{opacity:.5;cursor:not-allowed}
.ckg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
@media(max-width:600px){.ckg{grid-template-columns:1fr}}
.fs{font-size:11px;font-weight:700;color:var(--teal);margin:14px 0 6px;letter-spacing:.3px}
.cred{background:var(--surface-2);border:1px dashed var(--line-2);border-radius:10px;padding:12px 14px;font-size:13px;line-height:2}
.cred code{font-family:var(--mono);background:var(--pill);padding:2px 8px;border-radius:6px;font-size:13px;direction:ltr;display:inline-block}

/* الإشعار العابر */
.px-toast{position:fixed;bottom:22px;inset-inline-start:50%;transform:translateX(-50%);background:var(--sb-bg);color:#fff;
 padding:10px 18px;border-radius:10px;font-size:12.5px;z-index:200;box-shadow:0 10px 30px -8px rgba(0,0,0,.45);max-width:90vw}
body[dir="rtl"] .px-toast{transform:translateX(50%)}
.px-toast.bad{background:var(--high)}

/* الشكاوى */
.cmpx{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:10px;box-shadow:var(--sh);overflow:hidden}
.cmpx .hh{display:flex;align-items:center;gap:9px;padding:11px 14px;cursor:pointer;flex-wrap:wrap}
.cmpx .hh b{font-size:13px}
.cmpx .hh .mono{font-size:10.6px;color:var(--muted)}
.cmpx .bb{padding:0 14px 12px;font-size:12.6px;line-height:1.85;white-space:pre-wrap}
.cmpx .rp{margin:0 14px 12px;border-inline-start:3px solid var(--teal);background:var(--teal-soft);border-radius:8px;padding:8px 11px;font-size:12.2px;white-space:pre-wrap}
.cmpx .rp.cl{border-inline-start-color:var(--violet);background:var(--violet-bg)}
.cmpx .rp i{display:block;font-style:normal;font-size:10.4px;color:var(--muted);margin-bottom:2px}
.cmp-steps{display:flex;gap:4px;align-items:center;font-size:10.6px;color:var(--muted)}
.cmp-steps span{padding:1px 8px;border-radius:99px;background:var(--pill)}
.cmp-steps span.on{background:var(--teal);color:#fff}

/* المستخدمون */
.us{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border-bottom:1px solid var(--line)}
.us:last-child{border-bottom:0}
.us.off{opacity:.6}
.us .av{width:40px;height:40px;border-radius:50%;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;
 font-weight:700;font-size:14px;flex:0 0 40px}
.us .bd{flex:1;min-width:0}
.us .bd b{font-size:13px}
.us .ln{font-size:11.2px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;margin-top:2px}
.us .ln a{color:var(--muted);text-decoration:none;direction:ltr;unicode-bidi:embed}
.us .tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.us .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

.ifr{width:100%;height:60vh;border:1px solid var(--line);border-radius:10px;background:#fff}

@media print{
 .px{display:block}
 .px-side,.px-top,.ftabs,.px-filters,.no-print,.composer,.pr-cx{display:none!important}
 .px-body{padding:0;max-width:none}
 .px-card,.sg,.tm,.st{box-shadow:none;break-inside:avoid}
 .tbw{max-height:none;overflow:visible}
 .tbt th{position:static}
 .chatc{height:auto;display:block;border:0}
 .cv .msgs{overflow:visible}
}

/* جدول التوقيعات: الموقّعون × المستندات */
.px-hint{color:var(--violet,#6b4fb5);font-weight:700}
.sm-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--line)}
.sm-wrap{overflow-x:auto}
.sm{width:100%;border-collapse:collapse;font-size:12px;min-width:560px}
.sm th,.sm td{border-bottom:1px solid var(--line);border-inline-start:1px solid var(--line);padding:9px 10px;vertical-align:middle;text-align:center}
.sm thead th{background:var(--surface-2);font-weight:600}
.sm th.sm-g{font-size:11.5px;color:var(--muted);letter-spacing:.2px;text-align:start}
.sm th.sm-g.o{border-bottom:2px solid var(--med,#d68910)}
.sm th b{display:block;font-size:12px;margin:2px 0}
.sm-k{display:block;font-size:10.5px;color:var(--muted);font-weight:400}
.sm .sm-who{text-align:start;min-width:170px}
.sm td.sm-who b{display:block;font-size:12.5px}
.sm td.sm-who span{font-size:10.8px;color:var(--muted)}
.sm tr.mine td{background:var(--info-bg,rgba(27,110,168,.06))}
.sm-n{display:inline-block;margin-top:3px;font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:99px;background:var(--med-bg);color:var(--med)}
.sm-n.ok{background:var(--low-bg);color:var(--low)}
.sm-ic{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:800}
.sm-ic.ok{background:var(--low);color:#fff}
.sm-ic.wait{background:var(--med-bg);color:var(--med);border:1.5px solid var(--med)}
.sm td small{display:block;font-size:10px;color:var(--muted);margin-top:3px}
.sm td.sm-wait .btn{margin:4px 0 0}
.sm td.sm-na{color:var(--muted);background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(127,127,127,.06) 6px 12px)}
.sm-acts{display:flex;gap:4px;justify-content:center;margin-top:4px}
.sm-lnk{border:1px solid var(--line);background:var(--surface);border-radius:6px;font-size:11px;cursor:pointer;padding:1px 6px;color:var(--ink)}