@font-face{font-family:Tajawal;font-weight:400;font-display:swap;src:url(/fonts/Tajawal-Regular.woff) format("woff")}
@font-face{font-family:Tajawal;font-weight:500;font-display:swap;src:url(/fonts/Tajawal-Medium.woff) format("woff")}
@font-face{font-family:Tajawal;font-weight:700;font-display:swap;src:url(/fonts/Tajawal-Bold.woff) format("woff")}

/* شريط تمرير الصفحة مخفي — التمرير يعمل بالفأرة ولوحة المفاتيح */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{width:0;height:0;display:none}
body{scrollbar-width:none;-ms-overflow-style:none}
body::-webkit-scrollbar{width:0;height:0;display:none}
.wrap{scrollbar-width:none;-ms-overflow-style:none}
.wrap::-webkit-scrollbar{width:0;height:0;display:none}
/* html يرث لون الخلفية نفسه — كان لونه ثابتاً فيظهر شريط داكن أسفل الصفحة */
/* html يأخذ لون خلفية الصفحة (--bg) لا لون البطاقات — الدرجات الثلاث محفوظة:
   --side/--surf للهيدر والبطاقات · --bg للخلفية · --surf2 للمناطق الغائرة */
html{background:#F5F7F6}
html[data-mode=dark]{background:#192D2E}
:root{
  --pri:#449E60; --pri-d:#35804C; --pri-l:#5CB47A; --pri-w:#EAF5EE;
  --ok:#28C76F; --warn:#FF9F43; --bad:#EA5455; --sec:#82868B;
  --ok-w:#E5F8ED; --warn-w:#FFF1E3; --bad-w:#FDEBEB; --sec-w:#F0F1F2;
  --bg:#F5F7F6;--surface:#FFFFFF; --surf:#FFFFFF; --surf2:#FAFBFA; --line:#E4E8E6;
  --ink:#26332C; --ink2:#5A6B62; --ink3:#8A9891;
  --side:#FFFFFF; --side-ink:#5A6B62; --side-head:#A5B1AB;
  --sh:0 1px 2px rgba(38,51,44,.05), 0 6px 18px rgba(38,51,44,.05);
  --r:10px; --r-sm:7px;
  /* أسماء مرادفة تستخدمها لوحة المعلومات */
  --ret:#EA5455; --ret-bg:#FDEBEB; --prog:#FF9F43; --prog-bg:#FFF1E3;
  --done:#28C76F; --new:#82868B; --muted:#8A9891; --navy:#14395A;
}
html[data-mode="dark"]{
  --bg:#192D2E; --surf:#233C3D; --surf2:#1E3334; --line:#31504F;
  --ink:#E4E9E7; --ink2:#AFC0BB; --ink3:#7E948E;
  --side:#233C3D; --side-ink:#AFC0BB; --side-head:#6E8580;
  --pri-w:#2A4A3C; --ok-w:#26443A; --warn-w:#453727; --bad-w:#472F30; --sec-w:#2C4142;
  --sh:0 1px 2px rgba(0,0,0,.2), 0 6px 18px rgba(0,0,0,.18);
}
::selection{background:rgba(68,158,96,.28);color:var(--ink)}
::-moz-selection{background:rgba(68,158,96,.28);color:var(--ink)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

/* ═════ RESET — الروابط الحقيقية ترث لون النص بلا خط ═════ */
a{text-decoration:none}
a:not(.btn):not(.ib):not(.on),a:visited:not(.btn):not(.ib):not(.on){color:inherit}
.snav a.on,.snav a.on:visited,.snav a.on:hover{color:#fff}
a.btn,a.btn:visited,a.btn:hover{color:#fff;text-decoration:none}
a.btn.g,a.btn.g:visited{color:var(--ink2)}
a.ib,a.ib:visited{color:var(--ink2);text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.snav a,.umenu a,.umenu2 a,.ib,.btn,.stl{text-decoration:none!important}

body{font-family:Tajawal,'Segoe UI',Tahoma,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;
  font-size:14.5px;line-height:1.7;-webkit-font-smoothing:antialiased;transition:background .2s,color .2s}
/* الأرقام: تُعرض بترتيبها الصحيح دون فرض محاذاة يسارية على الحاوية.
   direction:ltr مع text-align:right كان يدفعها لليسار في العمود الجانبي. */
/* ═════ الأرقام ═════
   لا direction قسرية: الأرقام تُعرض بترتيبها الصحيح في العربية بطبيعتها،
   وفرض ltr يقلب معنى text-align:start فتنزاح لليسار في كل الشاشات.
   العزل وحده يكفي لمنع النص المحيط من التأثير على ترتيبها. */
.mono{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
  unicode-bidi:isolate;font-size:.92em;letter-spacing:-.01em}
td.ctr .mono,td.ctr.mono{display:block;text-align:center}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}

/* ═════ LOGIN ═════ */
#login{position:fixed;inset:0;z-index:100;display:grid;grid-template-columns:1.05fr .95fr;background:var(--surf)}
.lbrand{position:relative;background:linear-gradient(150deg,#2E6B45 0%,#449E60 55%,#3B8E55 100%);
  color:#fff;display:flex;flex-direction:column;justify-content:center;padding:0 8%;overflow:hidden}
.lbrand::before{content:"";position:absolute;inset:-30% -20% auto auto;width:70%;height:120%;
  background:radial-gradient(circle at 60% 40%,rgba(255,255,255,.14),transparent 62%)}
.lbrand::after{content:"";position:absolute;inset:auto -5% -30% -5%;height:55%;
  background:repeating-linear-gradient(112deg,rgba(255,255,255,.05) 0 1px,transparent 1px 30px);transform:skewY(-5deg)}
.lbrand > *{position:relative}
.lbrand img{width:210px;filter:brightness(0) invert(1);margin-bottom:38px;opacity:.96}
/* شعار الدخول على خلفية خضراء: يُعرض أبيض كاملاً */
.lbrand .modlogo{width:210px;height:auto;margin-bottom:38px;opacity:.96}
.lbrand .modlogo [class^="mod-"]{fill:#FFFFFF !important}
.lbrand h1{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.35;margin-bottom:12px}
.lbrand .s{font-size:15px;font-weight:400;line-height:2.05;color:rgba(255,255,255,.86)}
.lbrand .codes{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.22);
  font-size:12px;letter-spacing:.09em;color:rgba(255,255,255,.72)}
.lform{display:flex;align-items:center;justify-content:center;padding:40px}
.lbox{width:100%;max-width:340px}
.lbox h2{font-size:21px;font-weight:700;margin-bottom:3px}
.lbox .h{color:var(--ink3);font-size:13px;margin-bottom:26px}
.mode-mini{position:absolute;top:20px;left:20px}

/* ═════ FIELDS ═════ */
.fld{margin-bottom:14px}
.fld label{display:block;font-size:12.5px;font-weight:500;color:var(--ink2);margin-bottom:6px}
.fld label .req{color:var(--bad)}
.fld label{display:flex;align-items:center;gap:8px}
.fld label .auto{font-size:10.5px;color:var(--pri);font-weight:500;background:var(--pri-w);
  padding:1px 8px;border-radius:20px;flex:none}
/* حجم موحّد لكل الحقول — الصناديق النصية ترث حجم أبيها فتصغر بلا ضبط */
input,select,textarea{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:13.5px;background:var(--surf);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(68,158,96,.13);outline:none}
input:disabled,textarea:disabled,select:disabled{background:var(--surf2);color:var(--ink3);cursor:not-allowed}
textarea{min-height:84px;resize:vertical;line-height:1.85;font-size:13.5px}
.fld .err,.fx .err{color:var(--bad);font-size:11.5px;margin-top:4px;display:none}
.fld.bad input,.fld.bad textarea,.fld.bad select,
.fx.bad input,.fx.bad textarea,.fx.bad select{border-color:var(--bad);background:var(--bad-w)}
.fld.bad .err,.fx.bad .err{display:block}

/* حقول الأنشطة تأخذ تنسيق الحقول نفسه */
.fx label{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;
  color:var(--ink2);margin-bottom:6px}
.fx label .req{color:var(--bad)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 18px;
  border-radius:var(--r-sm);font-weight:500;font-size:13.5px;background:var(--pri);color:#fff;
  transition:background .15s,transform .06s,box-shadow .15s;box-shadow:0 2px 6px rgba(68,158,96,.22)}
.btn:hover{background:var(--pri-d)}
.btn:active{transform:translateY(1px)}
.btn.w{width:100%;padding:11px}
.btn.g{background:var(--surf);color:var(--ink2);border:1px solid var(--line);box-shadow:none}
.btn.g:hover{background:var(--surf2);color:var(--ink);border-color:var(--ink3)}
.btn.d{background:var(--surf);color:var(--bad);border:1px solid var(--bad);box-shadow:none}
.btn.d:hover{background:var(--bad-w)}
.btn.sm{padding:6px 12px;font-size:12.5px}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* ═════ SHELL ═════ */
#app{display:none;min-height:100%}
#app.on{display:block}
aside{position:fixed;inset-block:0;inset-inline-start:0;width:252px;background:var(--side);
  border-inline-end:1px solid var(--line);display:flex;flex-direction:column;z-index:40;transition:background .2s}
.sbrand{padding:4px 18px 16px;border-bottom:1px solid var(--line);text-align:center}
.sbrand img{width:150px;height:auto;display:block;margin:0 auto 13px}
.sbrand .modlogo{width:200px;height:auto;display:block;margin:0 auto 10px}
html[data-mode="dark"] .sbrand img{filter:brightness(0) invert(.92)}
.sbrand b{display:block;font-size:14.5px;font-weight:700;line-height:1.4}
.sbrand span{display:block;font-size:11.5px;color:var(--ink3)}
.snav{flex:1;overflow-y:auto;padding:14px 10px 20px}
.sfoot{padding:12px 16px 14px;border-top:1px solid var(--line);text-align:center;flex:none}
.sfoot b{display:block;font-size:11px;font-weight:600;color:var(--pri);letter-spacing:.04em;margin-bottom:2px}
.sfoot span{display:block;font-size:10.5px;color:var(--muted);line-height:1.7}
.sfoot .mono{font-size:10.5px;letter-spacing:.02em;text-align:center}
.sfoot .ver{display:block;margin-top:7px;padding-top:7px;border-top:1px solid var(--line);
  font-size:10.5px;color:var(--pri);font-weight:700}
.opt{font-size:10.5px;color:var(--muted);background:var(--surf2);border:1px solid var(--line);
  padding:1px 8px;border-radius:20px;margin-inline-start:5px;font-weight:500}
.sgrp{font-size:10.5px;font-weight:500;color:var(--side-head);letter-spacing:.06em;
  padding:14px 10px 7px;text-transform:none}
.snav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-sm);
  color:var(--side-ink);font-size:13.5px;font-weight:400;cursor:pointer;transition:.14s;margin-bottom:2px}
.snav a:hover{background:var(--pri-w);color:var(--pri-d)}
.snav a.on{background:linear-gradient(275deg,var(--pri),var(--pri-l));color:#fff;font-weight:500;
  box-shadow:0 2px 8px rgba(68,158,96,.3)}
.snav a .ic{width:17px;flex:none;opacity:.85;font-size:15px;text-align:center}
.snav a .badge{margin-inline-start:auto;background:var(--warn-w);color:#B06A15;font-size:10.5px;
  font-weight:700;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px}
.snav a.on .badge{background:rgba(255,255,255,.25);color:#fff}

.wrap{margin-inline-start:252px;min-height:100vh;display:flex;flex-direction:column}
/* الهيدر: مستطيل عائم بفراغ حوله وظل يمنع ظهور المحتوى فوقه عند التمرير */
.topbar{position:sticky;top:12px;z-index:30;background:var(--surf);
  border:1px solid var(--line);border-radius:var(--r);
  margin:12px 16px 18px;padding:11px 20px;display:flex;align-items:center;gap:14px;
  box-shadow:0 2px 10px rgba(38,51,44,.07);transition:background .2s,box-shadow .2s}
.topbar.stuck{box-shadow:0 6px 22px rgba(38,51,44,.16)}
html[data-mode=dark] .topbar{box-shadow:0 2px 10px rgba(0,0,0,.28)}
html[data-mode=dark] .topbar.stuck{box-shadow:0 8px 26px rgba(0,0,0,.42)}
/* شريط يغطي ما خلف الهيدر فلا يظهر المحتوى في الفراغ العلوي */
.wrap::before{content:"";position:fixed;inset-block-start:0;inset-inline:0;height:12px;
  background:var(--bg);z-index:29;pointer-events:none}

.topbar .ttl{flex:1}
.topbar .ttl b{display:block;font-size:16px;font-weight:700;line-height:1.35}
.topbar .ttl span{font-size:12px;color:var(--ink3)}
.tbtn svg{display:block}
.tbtn{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;
  color:var(--ink2);font-size:16px;position:relative;transition:.14s}
.tbtn:hover{background:var(--surf2);color:var(--pri)}
.tbtn .dot{position:absolute;top:5px;inset-inline-start:5px;background:var(--bad);color:#fff;
  font-size:9.5px;font-weight:700;min-width:16px;height:16px;border-radius:9px;display:grid;place-items:center;padding:0 3px}
.uchip{display:flex;align-items:center;gap:9px;padding:5px 10px 5px 5px;border:1px solid var(--line);
  border-radius:26px;background:var(--surf);transition:.14s;cursor:pointer}
.uchip:hover{border-color:var(--pri);background:var(--pri-w)}
/* دائرة المستخدم — منقولة من ثيم التمام: .avatar.bg-light-primary
   خلفية rgba(68,158,96,.12) وأيقونة بلون #449E60 بمقاس 22 بكسل */
.uchip .av{width:32px;height:32px;border-radius:50%;flex:none;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(68,158,96,.12);color:#449E60}
.uchip .av img{width:100%;height:100%;object-fit:cover}
.uchip .n{text-align:right;line-height:1.3}
.uchip .n b{display:block;font-size:12.5px;font-weight:500}
.uchip .n span{font-size:10.5px;color:var(--ink3)}

.umenu{position:absolute;top:calc(100% + 9px);inset-inline-end:0;width:250px;background:var(--surf);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 34px rgba(38,51,44,.16);
  z-index:60;overflow:hidden;display:none}
.umenu.on{display:block}
.umenu .uh{padding:14px;border-bottom:1px solid var(--line);display:flex;gap:11px;align-items:center}
.umenu .uh .av{width:40px;height:40px;border-radius:50%;flex:none;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(68,158,96,.12);color:#449E60}
.umenu .uh .av img{width:100%;height:100%;object-fit:cover}
.umenu .uh b{display:block;font-size:13.5px;font-weight:700}
.umenu .uh span{display:block;font-size:11px;color:var(--ink3);line-height:1.5}
/* الرقم المالي يبدأ من اليمين وترتيب أرقامه محفوظ */
.umenu .uh .mono{display:block;unicode-bidi:isolate}
.umenu .uh > div{min-width:0;flex:1}
.umenu a{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;color:var(--ink2);cursor:pointer}
.umenu a:hover{background:var(--pri-w);color:var(--pri-d)}
.umenu a .ic{width:16px;text-align:center;opacity:.8}
.umenu .sep{height:1px;background:var(--line);margin:4px 0}

main{flex:1;padding:0 28px 40px;width:100%}
.protobar{background:var(--warn-w);border-bottom:1px solid #F0DCC2;padding:6px 24px;font-size:12px;color:#8A5A12}
html[data-mode="dark"] .protobar{border-color:#5A4A2E;color:#E0C48C}

/* ═════ CARDS ═════ */
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  overflow:hidden;transition:background .2s,border-color .2s}
.card + .card{margin-top:16px}
.ch{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap}
.ch h3{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.ch h3 .ic{color:var(--pri);font-size:16px}
.cb{padding:18px}
.note{font-size:12px;color:var(--ink3)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;
  box-shadow:var(--sh);display:flex;align-items:center;gap:14px}
.stat .si{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:19px;flex:none}
.stat b{display:block;font-size:25px;font-weight:700;line-height:1.2}
.stat span{font-size:12px;color:var(--ink3)}
.si.p{background:var(--pri-w);color:var(--pri)} .si.w{background:var(--warn-w);color:var(--warn)}
.si.b{background:var(--bad-w);color:var(--bad)} .si.o{background:var(--ok-w);color:var(--ok)}

/* ═════ TABLE ═════ */
.tw{overflow:auto}
table.g{width:100%;border-collapse:collapse;font-size:13px}
table.g th{background:var(--surf2);color:var(--ink2);font-weight:500;font-size:11.5px;padding:11px 12px;
  text-align:center;white-space:nowrap;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2}
table.g td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.g td.ctr{text-align:center}
table.g tbody tr{transition:background .12s}
table.g tbody tr:hover{background:var(--surf2)}
table.g tbody tr:last-child td{border-bottom:none}
.tt{font-weight:500}
.tsub{font-size:11px;color:var(--ink3);display:block;line-height:1.5}
td.ctr .tsub{text-align:center}
.empty{padding:52px 20px;text-align:center;color:var(--ink3)}
.empty .bi{font-size:38px;opacity:.35;display:block;margin-bottom:10px}
.empty b{display:block;font-size:15px;color:var(--ink);font-weight:700;margin-bottom:5px}

.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:20px;
  font-size:11.5px;font-weight:500;white-space:nowrap}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}
.pill.s1{background:var(--sec-w);color:var(--sec)}
.pill.s2{background:var(--warn-w);color:#B06A15}
.pill.s3{background:var(--bad-w);color:var(--bad)}
.pill.s4{background:var(--ok-w);color:#1E9B55}
.tag{display:inline-block;padding:2px 9px;border-radius:5px;font-size:11px;font-weight:500;
  background:var(--surf2);color:var(--ink2);border:1px solid var(--line)}
.tag.c2{background:var(--warn-w);color:#B06A15;border-color:transparent}
.tag.c3{background:var(--bad-w);color:var(--bad);border-color:transparent}
.ib{width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--line);display:inline-grid;
  place-items:center;background:var(--surf);color:var(--ink2);font-size:14px;transition:.14s;margin-inline-start:3px}
.ib:hover{background:var(--pri);color:#fff;border-color:var(--pri)}

/* ═════ APPROVAL RAIL (signature element) ═════ */
.rail{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px 15px;margin-bottom:16px;box-shadow:var(--sh)}
.railh{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.railh b{font-size:11px;letter-spacing:.08em;color:var(--ink3);font-weight:500}
.rt{display:flex;position:relative}
.rn{flex:1;position:relative;text-align:center;padding-top:36px}
.rn::before{content:"";position:absolute;top:0;inset-inline-end:50%;inset-inline-start:-50%;height:3px;
  background:var(--line);border-radius:3px;z-index:0}
.rn:first-child::before{display:none}
.rn.dn::before{background:var(--pri)}
.rn .k{position:absolute;top:-15px;inset-inline-end:calc(50% - 16px);width:32px;height:32px;
  border-radius:50%;background:var(--surf);border:3px solid var(--line);display:grid;place-items:center;
  font-size:13.5px;font-weight:700;color:var(--ink3);transition:.2s;z-index:2;line-height:1}
.rn.dn .k{background:var(--pri);border-color:var(--pri);color:#fff}
.rn.hr .k{background:var(--warn);border-color:var(--warn);color:#fff;box-shadow:0 0 0 5px var(--warn-w)}
.rn.rr .k{background:var(--bad);border-color:var(--bad);color:#fff;box-shadow:0 0 0 5px var(--bad-w)}
.rn b{display:block;font-size:12.5px;font-weight:500}
.rn span{display:block;font-size:10.5px;color:var(--ink3);margin-top:1px}
.rn.hr b{color:#B06A15} .rn.rr b{color:var(--bad)} .rn.dn b{color:var(--pri-d)}

.banner{border-radius:var(--r);padding:13px 16px;margin-bottom:16px;display:flex;gap:11px;align-items:flex-start}
.banner .bi{font-size:17px;flex:none;line-height:1.4}
.banner b{display:block;font-size:13px;margin-bottom:2px}
.banner p{font-size:13px;line-height:1.7}
.banner.r{background:var(--bad-w);color:#8E2C2D} .banner.r b{color:var(--bad)}
.banner.w{background:var(--warn-w);color:#8A5A12}
.banner.p{background:var(--pri-w);color:var(--pri-d)}

/* ═════ FORM LAYOUT ═════ */
.row{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:15px}
.row.t4{grid-template-columns:repeat(4,1fr)}
.row.t2{grid-template-columns:repeat(2,1fr)}
.row.t1{grid-template-columns:1fr}
.sh{display:flex;align-items:center;gap:11px;margin:24px 0 15px}
.sh::after{content:"";flex:1;height:1px;background:var(--line)}
.sh h4{font-size:13px;font-weight:700;color:var(--pri-d);white-space:nowrap}
.sh .n{font-size:11px;color:var(--pri);background:var(--pri-w);padding:2px 8px;border-radius:20px;font-weight:700}
.steps{display:flex;gap:9px;margin-bottom:20px;flex-wrap:wrap}
.steps button{flex:1;min-width:150px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surf);font-size:12.5px;color:var(--ink3);text-align:right;transition:.14s}
.steps button:hover{border-color:var(--pri)}
.steps button.on{border-color:var(--pri);background:var(--pri-w);color:var(--pri-d);font-weight:500}
.steps button .n{font-weight:700;opacity:.6;margin-inline-end:7px}

.fxrow{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:15px}
.fx{min-width:0}
.fx.sm{flex:1 1 150px}
.fx.md{flex:1 1 300px}
.fx.lg{flex:1 1 100%}
.fx>label{display:block;width:100%;font-size:12.5px;font-weight:600;margin-bottom:6px}
.fx>div{width:100%}
.fx label{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px}
.fx label .req{color:var(--ret);margin-inline-start:3px}
.fx input,.fx select,.fx textarea{width:100%;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surf)}
.fx input:focus,.fx select:focus,.fx textarea:focus{border-color:var(--pri);
  box-shadow:0 0 0 3px rgba(68,158,96,.13);outline:none}
.fx textarea{min-height:78px;resize:vertical;line-height:1.7}
.fx .err{color:var(--ret);font-size:11.5px;margin-top:4px;display:none}
.fx.bad input,.fx.bad textarea{border-color:var(--ret);background:#FEFAFA}
.fx.bad .err{display:block}
.sx{position:relative;width:100%}
.sxbtn{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surf);
  cursor:pointer;font-family:inherit;font-size:inherit;color:var(--ink);text-align:right}
.sxbtn:hover{border-color:var(--pri)}
.sxbtn.open{border-color:var(--pri);box-shadow:0 0 0 3px rgba(68,158,96,.13)}
.sxbtn span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sxbtn i{font-style:normal;color:var(--pri);font-size:11px;transition:transform .15s}
.sxbtn.open i{transform:rotate(180deg)}
.sxbtn:disabled{background:var(--surf2);color:var(--muted);cursor:not-allowed}
.sxbtn:disabled i{color:var(--muted)}
/* عرض القائمة يتبع حقلها — يُضبط في السكربت.
   حدّ أدنى صغير يمنع الانضغاط في الحقول الضيقة جداً. */
.sxpop{position:fixed;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-sm);
  min-width:170px;
  box-shadow:0 12px 34px rgba(38,51,44,.18);z-index:400;padding:5px;display:none;
  max-height:320px;overflow:hidden;display:none;flex-direction:column}
.sxpop.on{display:flex}
.sxpop.on{display:block}
.sxsearch{padding:4px 4px 7px;border-bottom:1px solid var(--line);margin-bottom:5px}
.sxsearch input{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:inherit;font-size:13px;background:var(--surf)}
.sxsearch input:focus{border-color:var(--pri);outline:none}
.sxlist{flex:1;min-height:0;max-height:270px;overflow-y:auto;overflow-x:hidden}
.sxempty{padding:14px;text-align:center;font-size:12.5px;color:var(--muted)}
.sxopt{padding:8px 11px;border-radius:4px;font-size:13.5px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sxopt:hover{background:var(--pri);color:#fff}
.sxopt.on{background:var(--pri-w);color:var(--pri-d);font-weight:600}
.sxopt.on:hover{background:var(--pri);color:#fff}
.permt td{padding:9px 12px}
.permt input[type=checkbox]{width:17px;height:17px;accent-color:var(--pri);cursor:pointer}
.umenu2{position:fixed;width:186px;background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 12px 34px rgba(38,51,44,.2);z-index:420;overflow:hidden;padding:5px}
.umenu2 a{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:13px;
  color:var(--ink2);cursor:pointer;border-radius:var(--r-sm)}
.umenu2 a:hover{background:var(--pri-w);color:var(--pri-d)}
.umenu2 .ic{width:16px;text-align:center;opacity:.85}
.umenu2 .sep{height:1px;background:var(--line);margin:4px 0}
.uinfo{display:flex;gap:16px;align-items:center;padding:4px 0 16px;border-bottom:1px solid var(--line)}
.uinfo-av{width:64px;height:64px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:24px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--pri),var(--navy))}
.uinfo b{display:block;font-size:16px;font-weight:800}
.uinfo span{display:block;font-size:12.5px;color:var(--muted);line-height:1.75}
.pergrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.percard{border:1px solid var(--line);border-radius:var(--r);padding:14px;background:var(--surf2)}
.pername{font-size:13.5px;font-weight:700;margin-bottom:10px}
.perpick{display:flex;gap:5px}
.perpick button{flex:1;padding:7px 0;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surf);color:var(--ink2);font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.perpick button:hover{border-color:var(--pri);color:var(--pri-d)}
.perpick button.on{background:var(--pri);border-color:var(--pri);color:#fff}
.perhint{font-size:11px;color:var(--muted);margin-top:7px;text-align:center}
.numrow{display:flex;gap:18px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.numrow:last-of-type{border-bottom:none}
.numname{width:210px;flex:none}
.numname b{display:block;font-size:13.5px;margin-bottom:5px}
.numname .num{display:inline-block;background:var(--surf2);border:1px solid var(--line);
  border-radius:20px;padding:3px 12px;font-size:12.5px;color:var(--pri-d);font-weight:700}
.numgrid{flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:11px}
.numgrid .fld{margin:0}
@media(max-width:1100px){.numrow{flex-direction:column;gap:10px}.numname{width:auto}
  .numgrid{grid-template-columns:repeat(3,1fr)}}
.pager{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 18px;border-top:1px solid var(--line);background:var(--surf2)}
.pinfo{font-size:12.5px;color:var(--muted)}
.pinfo b{color:var(--ink);font-weight:700}
.pbtns{display:flex;gap:6px;align-items:center}
.pbtns button svg{display:block;margin:auto}
.pbtns button{min-width:34px;height:34px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surf);color:var(--ink2);font-size:13px;font-weight:600;cursor:pointer;
  font-family:inherit;padding:0 9px;transition:.14s}
.pbtns button:hover:not(:disabled){border-color:var(--pri);color:var(--pri-d)}
.pbtns button.on{background:var(--pri);border-color:var(--pri);color:#fff}
.pbtns .pnav{color:var(--muted)}
.pbtns .pnav:hover:not(:disabled){color:var(--pri-d)}
.pbtns button:disabled{opacity:.4;cursor:not-allowed}
.pdots{color:var(--muted);padding:0 3px}
.dbname{font-size:14.5px;font-weight:700;border:1px dashed transparent;border-radius:var(--r-sm);
  padding:3px 8px;background:transparent;width:auto;min-width:190px;font-family:inherit;color:inherit}
.dbname:hover{border-color:var(--line);background:var(--surf2)}
.dbname:focus{border-color:var(--pri);border-style:solid;background:var(--surf);outline:none}
tr.uoff td{opacity:.55}
tr.uoff .tt{text-decoration:line-through;text-decoration-color:var(--line)}
.dbtabs{display:flex;gap:8px;flex-wrap:wrap}
.dbtabs button{padding:9px 18px;border-radius:24px;font-size:13.5px;font-weight:500;
  border:1px solid var(--line);background:var(--surf);color:var(--ink2);cursor:pointer;transition:.15s}
.dbtabs button:hover{border-color:var(--pri);color:var(--pri-d)}
.dbtabs button.on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:700}
td.grip{cursor:grab;color:var(--muted);font-size:15px;user-select:none}
tr[draggable="true"]:hover td.grip{color:var(--pri)}
.prtpick{display:flex;gap:9px;align-items:stretch}
.prtpick input{flex:1;min-width:0}
.prtpick select{flex:1;min-width:0}
.prtpick .sx{flex:1 1 auto;min-width:0;width:auto}
.prtpick .btn{flex:0 0 auto}
.prtpick .btn{white-space:nowrap}
.prt{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:11px}
.prtchip{display:inline-flex;align-items:center;gap:9px;background:var(--pri-w);color:var(--pri-d);
  border:1px solid rgba(68,158,96,.3);border-radius:20px;padding:7px 8px 7px 15px;
  font-size:12.5px;font-weight:600;animation:chipIn .18s ease}
@keyframes chipIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.prtchip .x{background:rgba(68,158,96,.16);border:none;color:var(--pri-d);cursor:pointer;font-size:10px;
  line-height:1;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;transition:.15s}
.prtchip .x:hover{background:var(--ret);color:#fff}
.attach{border:1.5px dashed var(--line);border-radius:var(--r);padding:18px;background:var(--surf2);text-align:center}
.files{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;justify-content:center}
.af{display:flex;align-items:center;gap:8px;background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:7px 11px;font-size:12px}
.af .p{background:var(--bad-w);color:var(--bad);font-size:9px;font-weight:700;padding:2px 5px;border-radius:3px}
.af .x{color:var(--ink3);font-size:14px;line-height:1}
.af .x:hover{color:var(--bad)}

table.m{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:10px}
table.m th{background:var(--surf2);color:var(--ink2);font-weight:500;font-size:11.5px;padding:9px;
  text-align:right;border:1px solid var(--line);white-space:nowrap}
table.m td{border:1px solid var(--line);padding:0}
table.m td input,table.m td select{border:none;border-radius:0;padding:8px 9px;background:transparent}
table.m td input:focus,table.m td select:focus{box-shadow:inset 0 0 0 2px rgba(68,158,96,.18);outline:none}
table.m td.a{width:38px;text-align:center;background:var(--surf2)}
.rd{color:var(--ink3);font-size:15px;padding:5px}
.rd:hover{color:var(--bad)}

.chk{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ck{display:grid;grid-template-columns:1fr 160px 1.2fr;gap:14px;align-items:center;padding:11px 15px;
  border-bottom:1px solid var(--line)}
.ck:last-child{border-bottom:none}
.ck:nth-child(odd){background:var(--surf2)}
.ck .q{font-size:13px;font-weight:500}
.yn{display:flex;gap:7px}
.yn button{flex:1;padding:6px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:12px;
  background:var(--surf);color:var(--ink3);transition:.14s}



.rc{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.rcard{border:1.5px solid var(--line);border-radius:var(--r);padding:13px 15px;cursor:pointer;
  background:var(--surf);transition:.15s}
.rcard:hover{border-color:var(--pri-l)}


.rcard.ro{cursor:default;opacity:.88}
.yn button.ro{cursor:default;opacity:.9}
.rcard b{display:block;font-size:13px;font-weight:700;margin-bottom:2px}
.rcard span{font-size:11.5px;color:var(--ink3);line-height:1.65}
.upick{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.up{padding:6px 13px;border:1px solid var(--line);border-radius:20px;font-size:12px;background:var(--surf);transition:.14s}
.up.on{background:var(--pri);color:#fff;border-color:var(--pri)}

.declare{background:var(--surf2);border:1px solid var(--line);border-radius:var(--r);padding:15px;
  display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.declare input{margin-top:5px;width:17px;height:17px;accent-color:var(--pri);flex:none}
.declare p{font-size:12.5px;line-height:1.9;color:var(--ink2)}

/* ═════ SIGNATURE BLOCK ═════ */
.sigblock{border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;background:var(--surf2);
  text-align:center;max-width:330px}
.sigblock .rank{font-size:12.5px;color:var(--ink2);margin-bottom:6px}
.sigblock .img{height:66px;display:grid;place-items:center;margin-bottom:4px}
.sigblock .img img{max-height:66px;max-width:100%}
html[data-mode="dark"] .sigblock .img img{filter:invert(1) brightness(1.6)}
.sigblock .img .none{font-size:11.5px;color:var(--bad);background:var(--bad-w);padding:5px 12px;border-radius:20px}
.sigblock .nm{font-size:14px;font-weight:700;border-top:1px solid var(--line);padding-top:8px}
.sigblock .job{font-size:11.5px;color:var(--ink3)}
.sigblock .via{font-size:10.5px;color:var(--pri);background:var(--pri-w);display:inline-block;
  padding:2px 9px;border-radius:20px;margin-top:7px}
#fsov{position:fixed;inset:0;z-index:400;background:var(--surf);display:flex;flex-direction:column}
.fsbar{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);
  background:var(--surf2);flex-wrap:wrap}
.fsbar b{font-size:14px}
.fshint{font-size:12px;color:var(--muted)}
.fsbar .sp{flex:1}
.fswrap{flex:1;position:relative;margin:18px;border:2px dashed var(--line);border-radius:var(--r);
  background:#fff;overflow:hidden}
#fspad{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;display:block}
.fsguide i{position:absolute;width:26px;height:26px;border:3px solid var(--pri);opacity:.45}
.fsguide i:nth-child(1){top:12px;right:12px;border-left:0;border-bottom:0}
.fsguide i:nth-child(2){top:12px;left:12px;border-right:0;border-bottom:0}
.fsguide i:nth-child(3){bottom:12px;right:12px;border-left:0;border-top:0}
.fsguide i:nth-child(4){bottom:12px;left:12px;border-right:0;border-top:0}
#pad{border:1.5px dashed var(--line);border-radius:var(--r);background:#fff;touch-action:none;cursor:crosshair;display:block;width:100%}

/* ═════ HIJRI DATEPICKER ═════ */
.dpwrap{position:relative}
.dpin{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surf);cursor:pointer;transition:.14s;
  line-height:1.25;font-size:inherit}
.dpin:hover,.dpin.open{border-color:var(--pri)}
.dpin .ic{color:var(--pri);font-size:14px;line-height:1}
.dpin .v{flex:1;text-align:right}
.dp{position:fixed;width:302px;background:var(--surf);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 14px 38px rgba(38,51,44,.18);
  z-index:70;padding:14px;display:none}
.dp.on{display:block}
.dph{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.dph .mn{background:var(--pri);color:#fff;padding:5px 16px;border-radius:20px;font-size:13px;font-weight:500}
.dph .yr{font-weight:700;font-size:14px}
.dpa{width:30px;height:30px;border:1px solid var(--line);border-radius:var(--r-sm);display:grid;
  place-items:center;color:var(--ink2);font-size:14px}
.dpa:hover{border-color:var(--pri);color:var(--pri)}
.dpg{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.dpg .wd{font-size:10.5px;color:var(--ink3);text-align:center;padding:6px 0;font-weight:500}
.dpg button{aspect-ratio:1;border-radius:var(--r-sm);font-size:12.5px;color:var(--ink);transition:.12s}
.dpg button:hover{background:var(--pri-w);color:var(--pri-d)}
.dpg button.mut{color:var(--ink3);opacity:.5}
.dpg button.tdy{background:var(--pri-w);color:var(--pri-d);font-weight:700}
.dpg button.sel{background:var(--pri);color:#fff;font-weight:700}
.dph .mn,.dph .yr{border:none;background:none}
.dph .mn{background:var(--pri);color:#fff;padding:5px 16px;border-radius:20px;font-size:13px;font-weight:500}
.dph .mn:hover{background:var(--pri-d)}
.dph button.yr{font-weight:700;font-size:14px;padding:5px 12px;border-radius:20px;color:var(--ink)}
.dph button.yr:hover{background:var(--pri-w);color:var(--pri-d)}
.dph.mid{justify-content:center}
.dpm,.dpy{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dpm button,.dpy button{padding:13px 6px;border-radius:var(--r-sm);font-size:13px;
  background:var(--surf2);color:var(--ink);border:1px solid transparent;transition:.12s}
.dpm button:hover,.dpy button:hover{background:var(--pri-w);color:var(--pri-d)}
.dpm button.tdy,.dpy button.tdy{background:var(--pri-w);color:var(--pri-d);font-weight:700}
.dpm button.sel,.dpy button.sel{background:var(--pri);color:#fff;font-weight:700}
.dpf{border-top:1px solid var(--line);margin-top:12px;padding-top:12px;text-align:center}
.dpf button{border:1px solid var(--pri);color:var(--pri);padding:6px 22px;border-radius:var(--r-sm);font-size:12.5px}
.dpf button:hover{background:var(--pri);color:#fff}

/* ═════ DETAIL ═════ */
.dg{display:grid;grid-template-columns:1fr 340px;gap:16px}
/* عمود التسمية يتقلّص بحسب المساحة — كان ثابتاً 165 فيخنق القيم في العمود الجانبي */
dl.kv{display:grid;grid-template-columns:minmax(90px,auto) 1fr;column-gap:14px}
dl.kv dt{white-space:nowrap}
dl.kv dd{text-align:start;word-break:break-word}
dl.kv dt{padding:10px 0;font-size:12.5px;color:var(--ink3);border-bottom:1px solid var(--line)}
dl.kv dd{padding:10px 0;font-size:13.5px;border-bottom:1px solid var(--line)}
dl.kv dt:last-of-type,dl.kv dd:last-of-type{border-bottom:none}
.lf{margin-bottom:18px}
.lf h5{font-size:12px;color:var(--pri);font-weight:700;margin-bottom:5px;letter-spacing:.02em}
.lf p{font-size:13.5px;line-height:1.9;white-space:pre-wrap;color:var(--ink2)}
.tl{position:relative;padding-inline-start:22px}
.tl::before{content:"";position:absolute;top:7px;bottom:7px;inset-inline-start:5px;width:2px;background:var(--line)}
.te{position:relative;padding-bottom:17px}
.te::before{content:"";position:absolute;inset-inline-start:-21px;top:7px;width:10px;height:10px;border-radius:50%;
  background:var(--pri);border:2px solid var(--surf);box-shadow:0 0 0 2px var(--line)}
.te.r::before{background:var(--bad)} .te.g::before{background:var(--ok)}
.te b{font-size:13px;font-weight:500;display:block}
.te span{font-size:11.5px;color:var(--ink3)}
.te p{font-size:12.5px;color:var(--ink2);margin-top:5px;background:var(--surf2);padding:8px 11px;border-radius:var(--r-sm)}

.bar{position:sticky;bottom:0;background:var(--surf);border-top:1px solid var(--line);padding:14px 18px;
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;z-index:10}
.bar .sp{flex:1}
.sgu{display:grid;grid-template-columns:1.5fr 1fr 1.5fr;gap:14px}
@media(max-width:900px){.sgu{grid-template-columns:1fr}}
.sg2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.sg2{grid-template-columns:1fr}}
.sg5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:end}
@media(max-width:1150px){.sg5{grid-template-columns:repeat(2,1fr)}}
.sg4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* ═════ TOAST / MODAL ═════ */
/* ── المحادثة العائمة ── */
.guidefab{position:fixed;top:50%;transform:translateY(-50%);left:0;right:auto;
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 5px;width:28px;
  background:var(--pri);color:#fff;border:none;border-radius:0 8px 8px 0;cursor:pointer;
  box-shadow:3px 0 12px rgba(68,158,96,.28);z-index:120;transition:background .15s}
.guidefab:hover{background:var(--pri-d)}
.guidefab svg{width:15px;height:15px}
.guidefab span{writing-mode:vertical-rl;font-size:9.5px;font-weight:600;letter-spacing:.01em}
@media(max-width:900px){.guidefab{display:none}}
.chatalerts{position:fixed;bottom:96px;left:26px;width:320px;z-index:149;
  display:flex;flex-direction:column;gap:9px}
.chatalert{background:var(--surf);border:1px solid var(--line);border-inline-start:4px solid var(--pri);
  border-radius:var(--r);padding:12px 14px;box-shadow:0 10px 28px rgba(38,51,44,.18);
  cursor:pointer;transition:.15s;animation:up .22s ease}
.chatalert:hover{border-inline-start-color:var(--pri-d);transform:translateY(-2px)}
.ca-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:3px}
.ca-h b{font-size:12.5px;color:var(--pri-d)}
.ca-h span{font-size:11px;color:var(--muted)}
.ca-t{font-size:13px;font-weight:600;margin-bottom:3px}
.ca-m{font-size:12px;color:var(--ink2);line-height:1.6}
.ca-f{font-size:10.5px;color:var(--muted);margin-top:5px}
.ca-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;padding:2px 4px;line-height:1}
.ca-x:hover{color:var(--ret)}
.ca-b{display:flex;gap:7px;margin-top:10px}
.ca-b .btn{flex:1;justify-content:center}
.chatmore{font-size:11.5px;color:var(--muted);text-align:center}
.chatfab{position:fixed;bottom:26px;left:26px;width:54px;height:54px;border-radius:50%;
  background:var(--pri);color:#fff;display:grid;place-items:center;z-index:150;cursor:pointer;
  box-shadow:0 6px 22px rgba(68,158,96,.42);transition:transform .16s,background .16s;border:none}
.chatfab:hover{background:var(--pri-d);transform:translateY(-2px)}
.chatfab.on{background:var(--navy,#14395A)}
.chatcount{position:absolute;top:-3px;right:-3px;min-width:21px;height:21px;border-radius:11px;
  background:var(--ret);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;
  padding:0 5px;border:2px solid var(--surf)}
.chatpanel{position:fixed;bottom:92px;left:26px;width:352px;max-height:min(62vh,540px);
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 18px 46px rgba(38,51,44,.24);z-index:150;display:none;flex-direction:column;overflow:hidden}
.chatpanel.on{display:flex;animation:up .2s ease}
.chathead{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:10px;background:var(--surf2)}
.chathead b{font-size:14px;display:block}
.chathead .note{font-size:11.5px;display:block;max-width:230px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.chatx{background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:4px}
.chatx:hover{color:var(--ret)}
.chatbody{flex:1;overflow-y:auto;padding:14px 16px}
.chatempty{text-align:center;color:var(--muted);font-size:12.5px;padding:26px 10px}
.msg{background:var(--surf2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 12px;margin-bottom:10px}
.msg.mine{background:var(--pri-w);border-color:transparent}
.msg .mh2{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:4px}
.msg .mh2 b{font-size:12.5px;font-weight:600}
.msg .mh2 > .when{font-size:10.5px;color:var(--muted)}
.msg p{font-size:13px;line-height:1.75}
.chatfoot{padding:12px 14px;border-top:1px solid var(--line);display:flex;gap:9px;align-items:flex-end}
.chatfoot textarea{flex:1;resize:none;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surf);font-family:inherit;font-size:13px}
.chatfoot textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(68,158,96,.13);outline:none}
.chatfoot.ro{justify-content:center;text-align:center}
@media(max-width:900px){.chatpanel{width:calc(100vw - 40px);left:20px}.chatfab{left:20px;bottom:20px}}

#offov{position:fixed;inset:0;z-index:500;background:linear-gradient(150deg,#0B2338,#14395A 55%,#1B5137);
  display:grid;place-items:center;padding:24px}
.offbox{background:var(--surf);border-radius:18px;max-width:460px;width:100%;padding:36px 34px;
  text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.officon{width:76px;height:76px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  background:var(--prog-bg);color:var(--prog)}
.offbox h2{font-size:20px;font-weight:800;margin-bottom:10px}
.offbox p{font-size:14px;line-height:2;color:var(--ink2);margin-bottom:18px}
.offnote{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-bottom:18px}

/* ── مؤقّت الخمول ── */
#idleov{position:fixed;inset:0;z-index:480;background:rgba(11,35,56,.55);display:grid;place-items:center}
.idlebox{background:var(--surf);border-radius:18px;padding:32px 34px;text-align:center;max-width:380px;
  box-shadow:0 24px 60px rgba(0,0,0,.3)}
.idlebox h3{font-size:18px;font-weight:800;margin-bottom:8px}
.idlebox p{font-size:13.5px;color:var(--ink2);line-height:1.9;margin-bottom:18px}
.idlering{position:relative;width:132px;height:132px;margin:0 auto 20px}
.idlering svg{transform:rotate(-90deg)}
.idlenum{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;font-weight:800;
  color:var(--pri-d);font-variant-numeric:tabular-nums}
#toast{position:fixed;bottom:24px;left:96px;right:auto;z-index:520;display:flex;flex-direction:column;gap:9px;pointer-events:none}
#toast .ts{pointer-events:auto}
.ts{background:var(--surf);border:1px solid var(--line);border-inline-start:3px solid var(--pri);
  padding:12px 17px;border-radius:var(--r-sm);font-size:13px;box-shadow:0 10px 30px rgba(38,51,44,.18);
  max-width:360px;animation:up .22s ease}
.ts.bad{border-inline-start-color:var(--bad)}
@keyframes up{from{opacity:0;transform:translate(-10px,10px)}to{opacity:1;transform:none}}
#modal{position:fixed;inset:0;background:rgba(25,45,46,.5);z-index:150;display:none;place-items:center;padding:20px}
#modal.on{display:grid}
.mb{background:var(--surf);border-radius:var(--r);width:100%;max-width:660px;max-height:88vh;overflow:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.3)}
.mb .mh{padding:16px 20px;border-bottom:1px solid var(--line);font-weight:700;font-size:15.5px}
.mb .mc{padding:20px}
.mb .mf{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px}

@media(max-width:1100px){.dg{grid-template-columns:1fr}.sg4{grid-template-columns:repeat(2,1fr)}}
/* ══ لوحة المعلومات ══ */
.h-hero{background:linear-gradient(135deg,#0B2338 0%,#14395A 52%,#1B5137 100%);
  border-radius:var(--r);padding:24px 26px;color:#fff;position:relative;overflow:hidden;margin-bottom:16px}
.h-hero::after{content:"";position:absolute;inset:-40% -10% auto auto;width:52%;height:170%;
  background:radial-gradient(circle at 60% 40%,rgba(68,158,96,.32),transparent 62%)}
.h-hero>*{position:relative;z-index:1}
.h-hh{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  margin-bottom:20px;flex-wrap:wrap}
.h-hh b{font-size:18px;font-weight:700;display:block}
.h-hh span{font-size:12.5px;color:#9FB8AC}
.h-hd{text-align:left;font-size:12px;color:#9FB8AC;line-height:1.85}
.h-hd b{display:block;color:#fff;font-size:13.5px}
.h-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14);
  border-radius:var(--r-sm);overflow:hidden}
.h-kpi{background:rgba(11,35,56,.55);padding:16px 18px}
.h-kpi .v{font-size:31px;font-weight:700;line-height:1.15;letter-spacing:-.02em}
.h-kpi .l{font-size:12px;color:#A9BFB4;margin-top:2px}
.h-kpi .d{font-size:11px;margin-top:6px;display:inline-flex;gap:5px;padding:2px 9px;
  border-radius:20px;background:rgba(255,255,255,.12)}
.h-kpi .d.up{color:#7BE0A5} .h-kpi .d.dn{color:#FFB3B4}
.h-row{display:grid;gap:16px;margin-bottom:16px;align-items:stretch}
.h-row>.card{height:100%;display:flex;flex-direction:column;margin-top:0 !important}
.h-row>.card>.ch{min-height:58px;align-items:center;flex:none}
.h-row>.card>.ch h3{flex:none}
.h-row>.card>.ch .note{text-align:left;line-height:1.45}
.h-row>.card>.cb{flex:1}
.h-row.a{grid-template-columns:1.5fr 1fr}
.h-row.b{grid-template-columns:1fr 1fr}
.stl{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer}
.stl:last-child{border-bottom:none}
.stl:hover{background:var(--surf2)}
.stl-n{width:52px;flex:none;font-size:12.5px;font-weight:700;color:var(--muted);text-align:center}
.stl-t{flex:1;min-width:0}
.stl-t b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stl-t span{font-size:11px;color:var(--muted)}
.stl-w{flex:none;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:20px;
  background:var(--surf2);color:var(--ink2);white-space:nowrap}
.stl-w.m{background:var(--prog-bg);color:var(--prog)}
.stl-w.r{background:var(--ret-bg);color:var(--ret)}
.stl-d{flex:none;font-size:11px;color:var(--muted)}
.rk{display:flex;align-items:center;gap:12px;height:56px;border-bottom:1px solid var(--line)}
.rk:last-child{border-bottom:none}
.rk .no{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;flex:none;
  font-size:11.5px;font-weight:700;background:var(--surf2);color:var(--muted)}
.rk.t1 .no{background:#FCF3DC;color:#9A7A22}
.rk.t2 .no{background:#EFF1F3;color:#6E7C88}
.rk.t3 .no{background:#F7ECE2;color:#95643C}
.rk .nm{flex:1;min-width:0}
.rk .nm b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk .nm span{font-size:11px;color:var(--muted)}
.rk .br{width:96px;height:7px;border-radius:9px;background:var(--surf2);overflow:hidden;flex:none}
.rk .br i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--pri-l),var(--pri))}
.rk .br.r i{background:linear-gradient(90deg,#F7A9AA,var(--ret))}
.rk .n{font-size:16px;font-weight:700;width:32px;text-align:center;flex:none;color:var(--pri-d)}
.rk .n.r{color:var(--ret)}
.fn{display:flex;flex-direction:column;gap:10px}
.fn .st{display:flex;align-items:center;gap:12px}
.fn .lb{width:132px;font-size:12.5px;color:var(--muted);flex:none}
.fn .tr{flex:1;height:24px;border-radius:8px;background:var(--surf2);overflow:hidden;position:relative}
.fn .tr i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:8px;
  background:linear-gradient(90deg,var(--pri),var(--pri-l))}
.fn .tr.slow i{background:linear-gradient(90deg,var(--prog),#FFC078)}
.fncb{display:flex;flex-direction:column}
.dnsum{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.dnrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0}
.dnrow b{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px}
.fnsum{margin-top:auto;padding-top:16px}
.fnbar{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-radius:var(--r-sm);overflow:hidden}
.fnbar>div{background:var(--surf2);padding:12px 12px 13px}
.fnbar>div>span{display:block;font-size:11.5px;color:var(--muted);text-align:right}
.fnbar b{display:block;font-size:19px;font-weight:700;line-height:1.35;text-align:center;margin-top:3px}
.fnbar b .num{font-size:21px}
.fnnote{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.fn .vv{width:66px;font-size:12.5px;text-align:left;flex:none;color:var(--ink2);white-space:nowrap}
.fn .vv b{font-size:14.5px;font-weight:700;color:var(--ink)}
.hm{display:grid;gap:4px}
.hm .hd{font-size:10.5px;color:var(--muted);text-align:center;padding-bottom:2px}
.tw-mark{color:var(--muted);font-family:monospace;letter-spacing:-1px}
.hm .rl{font-size:12.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding-inline-end:10px;display:flex;align-items:center;min-width:0}
/* الأرقام: العزل يحفظ ترتيبها، والمحاذاة تتبع سياقها لا تُفرض يساراً */
.num{font-family:inherit;font-variant-numeric:tabular-nums;
  unicode-bidi:isolate;letter-spacing:0;display:inline-block}
.hm .cl{aspect-ratio:3.1;min-height:26px;max-height:32px;border-radius:5px;display:grid;place-items:center;font-size:11.5px;
  font-weight:700;color:#fff}
.hm .cl.z{background:var(--surf2);color:var(--muted);font-weight:400}
.lg{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:12px}
.lg i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-inline-end:5px;vertical-align:-1px}
.rsk{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-sm);
  border:1px solid var(--line);margin-bottom:9px;background:var(--surf2)}
.rsk:last-child{margin-bottom:0}
html[data-mode="dark"] .rsk{background:transparent}
html[data-mode="dark"] .rsk.hi{background:transparent;border-color:#7A3A3B}
html[data-mode="dark"] .rsk.md{background:transparent;border-color:#7A5A2E}
.rsk.hi{border-color:#F3C9C9;background:var(--ret-bg)}
.rsk.md{border-color:#F0DCC0;background:var(--prog-bg)}
.rsk .lv{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-size:12.5px;font-weight:700;color:#fff;background:var(--new)}
.rsk.hi .lv{background:var(--ret)} .rsk.md .lv{background:var(--prog)}
.rsk .tx b{display:block;font-size:12.5px;font-weight:600;line-height:1.5}
.rsk .tx span{font-size:11px;color:var(--ink2);line-height:1.5}
@media(max-width:1250px){.h-row.a,.h-row.b{grid-template-columns:1fr}.h-kpis{grid-template-columns:1fr 1fr}}

/* ── منطقة الطباعة ── */
/* ── زر الخروج داخل قائمة المستخدم يرث شكل روابطها ── */
.umenu .umlogout{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;
  border:none;background:none;font-family:inherit;font-size:13px;color:var(--ink2);
  cursor:pointer;text-align:right}
.umenu .umlogout:hover{background:var(--pri-w);color:var(--pri-d)}
.umenu .umlogout .ic{width:16px;text-align:center;opacity:.85}
/* ── صفوف حسابات العرض في شاشة الدخول ── */
.rlrow{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  margin-bottom:7px;cursor:pointer;transition:.14s}
.rlrow:hover{border-color:var(--pri);background:var(--pri-w)}
.rlrow .rn{font-size:12.5px;font-weight:600}
.rlrow .rr{font-size:11.5px;color:var(--muted);font-family:Consolas,monospace}

/* ── غلاف نافذة منبثقة داخل صفحة Razor ── */
.dlgwrap{position:fixed;inset:0;background:rgba(38,51,44,.45);display:none;place-items:center;
  z-index:70;padding:20px}
.dlgwrap.on{display:grid}
.dlgwrap .dlgbox{background:var(--surf);border-radius:var(--r);width:100%;max-width:520px;
  box-shadow:var(--sh);overflow:hidden}

/* ── رسوم لوحة المعلومات ── */
.donut-wrap{display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:center}
.donut-lg{display:flex;flex-direction:column;gap:8px;min-width:190px}
.donut-lg .lg{display:flex;align-items:center;gap:9px;font-size:12.5px}
.donut-lg .lg i{width:11px;height:11px;border-radius:3px;flex:none}
.donut-lg .lg span{flex:1;color:var(--ink2)}
.donut-lg .lg b{font-weight:700}
.fn{display:flex;align-items:center;gap:11px;padding:7px 0}
.fn .fl{width:120px;flex:none;font-size:12.5px;color:var(--ink2)}
.fn .fb{flex:1;height:9px;background:var(--surf2);border-radius:20px;overflow:hidden}
.fn .fb i{display:block;height:100%;background:linear-gradient(90deg,var(--pri-l),var(--pri));border-radius:20px}
.fn .fv{width:36px;flex:none;text-align:center;font-size:12.5px;font-weight:700}

/* ── روابط شريط الترقيم تأخذ شكل الأزرار ── */
.pbtns a{min-width:34px;height:34px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surf);color:var(--ink2);font-size:13px;font-weight:600;padding:0 9px;
  display:grid;place-items:center;transition:.14s}
.pbtns a:hover{border-color:var(--pri);color:var(--pri-d)}
.pbtns a.pnav{color:var(--muted)}

.umenu2.on{display:block!important}

/* ── أزرار نعم/لا في قائمة التحقق حين تكون خيارات نموذج ── */
.yn label{flex:1;text-align:center;padding:6px;font-size:12px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surf);
  color:var(--ink3);transition:.14s}


.yn label.ro{cursor:default;opacity:.9}
.rcard.ro{cursor:default;opacity:.88}

/* ── جداول نموذج المتابعة التنفيذي ── */
.gwrap{margin-bottom:22px}
.gh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.gh b{font-size:13px;font-weight:700;color:var(--pri-d)}

.lgi{display:flex;align-items:center;gap:9px;font-size:12.5px}
.lgi i{width:11px;height:11px;border-radius:3px;flex:none}
.lgi span{flex:1;color:var(--ink2)}
.lgi b{font-weight:700}

/* ════════ نوافذ منبثقة بنمط تطبيق التمام المعتمد ════════ */
.overlay{position:fixed;inset:0;background:rgba(34,41,47,.5);display:none;
  align-items:center;justify-content:center;z-index:520;padding:24px}
.overlay.open{display:flex;animation:ovfade .18s ease}
.overlay .modal{position:relative;background:var(--surf);border-radius:.357rem;
  box-shadow:0 5px 20px 0 rgba(34,41,47,.18);width:100%;max-width:560px;max-height:90vh;
  display:flex;flex-direction:column;overflow:visible;border:0;
  animation:ovrise .22s cubic-bezier(.4,0,.2,1)}
.overlay .modal--lg{max-width:820px}
.overlay .modal>:first-child{border-top-left-radius:.357rem;border-top-right-radius:.357rem}
.overlay .modal>:last-child{border-bottom-left-radius:.357rem;border-bottom-right-radius:.357rem}
.modal__head{padding:.8rem 1.4rem;background:var(--bg);border-bottom:0;
  display:flex;align-items:center;gap:12px}
.modal__head h3{font-size:15px;font-weight:700;flex:1;display:flex;align-items:center;gap:9px;margin:0}
.modal__head h3 .ic{color:var(--pri)}
.modal__body{padding:1.4rem;overflow-y:auto}
.modal__foot{padding:.8rem 1.4rem;border-top:1px solid rgba(34,41,47,.05);
  display:flex;gap:10px;justify-content:flex-start;background:transparent}
.modal__close{position:absolute;top:0;left:0;z-index:5;width:2.35rem;height:2.35rem;
  border-radius:.357rem;border:none;background:var(--surf);color:var(--ink);
  box-shadow:0 5px 20px 0 rgba(34,41,47,.18);cursor:pointer;display:grid;place-items:center;
  font-size:16px;transition:all .23s ease .1s;transform:translate(-18px,-18px)}
.modal__close:hover,.modal__close:focus{transform:translate(-10px,-10px);
  box-shadow:0 5px 20px 0 rgba(34,41,47,.1);outline:none}
@keyframes ovfade{from{opacity:0}to{opacity:1}}
@keyframes ovrise{from{opacity:0;transform:translateY(18px) scale(.98)}
                  to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:640px){.overlay{padding:0;align-items:flex-end}
  .overlay .modal{max-width:100%;border-radius:.357rem .357rem 0 0}}

/* حقول النوافذ: صفّان متوازنان بدل حقل يملأ العرض */
.modal__body .mrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modal__body .mrow.one{grid-template-columns:1fr}
@media(max-width:560px){.modal__body .mrow{grid-template-columns:1fr}}
.modal__body .fld:last-child{margin-bottom:0}

/* حسابات العرض في شاشة الدخول — عمودان مضغوطان */
#rl{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-height:190px;overflow:auto}
.rlrow{flex-direction:column;align-items:flex-start;gap:2px;padding:7px 10px;margin:0}
.rlrow .rn{font-size:11.5px;line-height:1.4}
.rlrow .rr{font-size:10.5px}

/* روابط التبويبات تأخذ شكل أزرارها */
.dbtabs a{padding:9px 18px;border-radius:24px;font-size:13.5px;font-weight:500;
  border:1px solid var(--line);background:var(--surf);color:var(--ink2);display:inline-block}
.dbtabs a:hover{border-color:var(--pri);color:var(--pri-d)}
.dbtabs a.on{background:var(--pri);border-color:var(--pri);color:#fff}
.perpick form{display:inline}
.btn.sm{padding:6px 14px;font-size:12.5px}

/* حقل الوقت داخل الجداول — مضغوط بعرض محتواه */
.tinput{padding:7px 8px;text-align:center;direction:ltr}
table.m td input[type=time]{border:none;background:transparent;width:100%}

.inline-edit{display:flex;gap:8px;align-items:center}
.inline-edit input{border:1px solid transparent;background:transparent;padding:5px 8px;border-radius:6px}
.inline-edit input:hover{border-color:var(--line);background:var(--surf)}
.inline-edit input:focus{border-color:var(--pri);background:var(--surf)}
.ib.ok{color:var(--ok);font-weight:700}
.ib.ok:hover{border-color:var(--ok);color:#1E9B55}

/* أشرطة الأزرار: النماذج داخلها لا ترفع أزرارها */
form{margin:0}
.overlay .modal form{margin:0}

/* طيّ الشريط الجانبي */
html.side-collapsed aside{transform:translateX(100%);visibility:hidden}
html.side-collapsed .wrap{margin-inline-start:0!important;margin-inline-end:0!important}
/* الحركة عند الطيّ اليدوي فقط — لا عند تحميل الصفحة */
html.side-anim aside{transition:transform .18s ease}

/* عناصر القوائم متطابقة الخط سواء كانت روابط أو أزرار */
.umenu2 a,.umenu2 .umlogout,.umenu a,.umenu .umlogout{
  font-family:inherit;font-size:13px;font-weight:400;line-height:1.7;
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  color:var(--ink2);cursor:pointer;border:none;background:none;
  width:100%;text-align:right;border-radius:var(--r-sm)}
.umenu2 a:hover,.umenu2 .umlogout:hover,.umenu a:hover,.umenu .umlogout:hover{
  background:var(--pri-w);color:var(--pri-d)}



.cmt{margin-inline-start:6px;font-size:12px;opacity:.85}

/* لوحة كل سجل داخل لوح المحادثة */
.chatpane{display:flex;flex-direction:column;flex:1;min-height:0}

/* بطاقات الاختيار تُظهر التحديد من حالة الزر نفسه — تعمل بلا جافاسكربت */
.rcard:has(input:checked){border-color:var(--pri);background:var(--pri-w)}
.rcard.warn:has(input:checked){border-color:var(--bad);background:var(--bad-w)}
.rcard:has(input:checked) b{color:var(--pri-d)}
.yn label:has(input:checked).y{background:var(--ok-w);border-color:var(--ok);color:#1E9B55;font-weight:700}
.yn label:has(input:checked).n{background:var(--bad-w);border-color:var(--bad);color:var(--bad);font-weight:700}
.rcard input,.yn label input{position:absolute;opacity:0;pointer-events:none}
.rcard{position:relative}
.yn label{position:relative}

/* توحيد ارتفاع الأزرار سواء كانت روابط أو أزراراً */
.btn,a.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:38px;padding:0 18px;line-height:1;box-sizing:border-box;white-space:nowrap}
.btn.sm,a.btn.sm{min-height:30px;padding:0 13px;font-size:12.5px}
.af a.x{color:var(--ink3);font-size:13px;padding:0 4px}
.af a.x:hover{color:var(--bad)}


/* شريط أزرار أعلى الشاشة — كل الأزرار بارتفاع واحد مهما اختلف وسمها */
.topbtns{display:flex;gap:9px;margin-bottom:16px;flex-wrap:wrap;align-items:stretch}
.topbtns > form{display:flex;margin:0}
.topbtns .btn,.topbtns form .btn{height:38px;min-height:38px;padding:0 18px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}

/* عمود المستودع: البطاقات متتابعة بفواصل متساوية */
.onecol > div + div{margin-top:16px}
.onecol .card + .card{margin-top:16px}

/* بطاقة الدليل داخل نافذته */
.guidecard{display:flex;align-items:center;gap:14px;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surf2)}
.guidecard .gicon{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--pri-w);color:var(--pri-d)}
.guidecard .gicon svg{width:23px;height:23px}
.guidecard .gtx{display:flex;flex-direction:column;gap:3px}
.guidecard .gtx b{font-size:14px}
.modal__foot{justify-content:flex-start}

/* شبكة البحث: الإدارة أعرض والسرية والحالة أضيق */
.sgsearch{display:grid;grid-template-columns:1fr 1.6fr .85fr .85fr;gap:15px}
@media(max-width:1100px){.sgsearch{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.sgsearch{grid-template-columns:1fr}}

/* ═════ القائمة الجانبية: تمرير خفي ينساب مع مؤشر الفأرة ═════ */
.snav{scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}
.snav::-webkit-scrollbar{width:0;height:0;display:none}
aside{scrollbar-width:none;-ms-overflow-style:none}
aside::-webkit-scrollbar{width:0;display:none}

/* ذيل القائمة: التصميم تحت الاسم مباشرةً بلا خط فاصل */
.sfoot{border-top:none;padding-top:0}
.sfoot .ver{display:none}

/* سهم القائمة المنسدلة لا يتغيّر حجمه أثناء التحميل */
.sx .sxarr,.sx::after{flex:none}
.sxbtn{min-height:38px}

/* ═════ منع قفزة القوائم عند التحميل ═════
   القائمة الأصلية كانت تُرسم ثم يستبدلها السكربت، فترتفع وتنخفض
   ويتحرك السهم. نُخفيها منذ البداية ونعرض هيكلاً بالمقاس نفسه. */
/* القائمة الأصلية تُعرض بمظهر الزر المحسّن حتى يتولّاها السكربت —
   فلا تختفي ولا تقفز، ولا يتأخر ظهور الحقل. */
select:not([data-sx]):not([multiple]){
  width:100%;min-height:38px;padding:0 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surf);color:var(--ink);
  font-family:inherit;font-size:13.5px;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),
                   linear-gradient(135deg,var(--ink3) 50%,transparent 50%);
  background-position:calc(0% + 12px) calc(50% + 2px),calc(0% + 17px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.sx select{display:none !important}
.sx{position:relative}
.sxbtn{width:100%;min-height:38px;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surf);color:var(--ink);font-family:inherit;font-size:13.5px;cursor:pointer}
.sxbtn > span{flex:1;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sxbtn > i{flex:none;font-style:normal;font-size:11px;color:var(--ink3);
  transition:transform .16s;line-height:1}
.sx.on .sxbtn > i{transform:rotate(180deg)}
.sxbtn:disabled{background:var(--surf2);color:var(--muted);cursor:not-allowed}

/* ═════ شعار وزارة الدفاع — مُدرج ليمكن تلوين نصه في الوضع الداكن ═════ */
.modlogo{width:150px;height:auto;display:block;max-width:100%}
.mod-st0{fill:#3c934e}
.mod-st1{fill:#cb3438}
.mod-st2{fill:#fff}
.mod-st3{fill:#056d31}
.mod-st4{fill:#dbbf74}
.mod-st5{fill:#9ea5a9}
.mod-st6{fill:#bec6cb}
.mod-st7{fill:#9e892e}
.mod-st8{fill:#951b15}
.mod-st9{fill:#69767b}

/* في الوضع الداكن يبقى الشعار كما هو ويتحوّل النص إلى الأبيض */
html[data-mode=dark] .mod-st9{fill:#FFFFFF}

/* أيقونة الوضع: قمر في الوضع الفاتح وشمس في الداكن */
.modbtn .ic-sun{display:none}
html[data-mode=dark] .modbtn .ic-moon{display:none}
html[data-mode=dark] .modbtn .ic-sun{display:block}

/* ═════ لوح الإشعارات — ينسدل من الجرس ═════ */
.notifpop{position:fixed;width:380px;max-width:calc(100vw - 24px);z-index:410;display:none;
  background:var(--surf);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 18px 44px rgba(38,51,44,.22)}
.notifpop.on{display:block;animation:ovrise .18s ease}
.np-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;background:var(--pri);color:#fff}
.np-head b{font-size:14.5px;font-weight:700}
.np-count{font-size:11.5px;background:rgba(255,255,255,.18);padding:3px 10px;border-radius:20px}
.np-body{max-height:min(60vh,440px);overflow-y:auto;scrollbar-width:thin}
.np-item{display:block;padding:13px 18px;border-bottom:1px solid var(--line);transition:background .13s}
.np-item:last-child{border-bottom:none}
.np-item:hover{background:var(--pri-w)}
.np-t{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--pri-d);
  margin-bottom:4px}
.np-item.r .np-t{color:var(--ret)}
.np-badge{font-size:10.5px;font-weight:500;color:var(--ink3);background:var(--surf2);
  padding:2px 8px;border-radius:20px}
.np-ttl{display:block;font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.6;
  margin-bottom:3px}
.np-sub{display:block;font-size:11px;color:var(--muted)}
.np-foot{padding:10px 18px;border-top:1px solid var(--line);background:var(--surf2);text-align:center}
.np-empty{padding:34px 18px;text-align:center}
.np-empty .bi{display:block;font-size:26px;color:var(--pri);margin-bottom:8px}
.np-empty b{display:block;font-size:13.5px;margin-bottom:3px}
.np-empty span{font-size:12px;color:var(--muted)}

/* لا قاعدة اتجاه عامة على الخلايا: تطبيقها يقلب ترتيب أيقونات الإجراءات
   لأن خلاياها بلا حروف عربية. تنسيق الأرقام يتكفّل به .mono و.num أصلاً. */



/* حسابات العرض في شاشة الدخول: شرائح صغيرة بالدور فقط */
#rl{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto;
  scrollbar-width:none}
#rl::-webkit-scrollbar{width:0;display:none}
.rlchip{width:100%;text-align:right;padding:9px 13px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surf);color:var(--ink2);cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:500;transition:.14s}
.rlchip:hover{border-color:var(--pri);background:var(--pri-w);color:var(--pri-d)}

/* شبكة البحث والاستعلام: سطران متناسقان */
.sgs1{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.sgs2{display:grid;grid-template-columns:1.5fr .9fr .9fr 1.05fr 1.05fr;gap:15px}
@media(max-width:1100px){.sgs1,.sgs2{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.sgs1,.sgs2{grid-template-columns:1fr}}

/* ستارة شفافة تغلق لوح الإشعارات بأي ضغطة خارجه */
.notifveil{position:fixed;inset:0;z-index:405;display:none;background:transparent}
.notifveil.on{display:block}
.notifpop{z-index:410}

/* أيقونة المستخدم بدل الأحرف */
.uchip .av,.umenu .uh .av{display:grid;place-items:center}
.uchip .av svg,.umenu .uh .av svg{width:22px;height:22px;color:inherit}

/* ═════ نافذة الخمول ═════ */
.kmidle{position:fixed;inset:0;z-index:600;display:none;align-items:center;justify-content:center;
  background:rgba(34,41,47,.55);padding:24px}
.kmidle.on{display:flex}
.kmidle-card{background:var(--surf);border-radius:var(--r);max-width:430px;width:100%;
  padding:34px 30px;text-align:center;box-shadow:0 18px 50px rgba(38,51,44,.3)}
.kmidle-card svg{margin-bottom:18px}
.kmidle-card h3{font-size:17px;font-weight:700;margin-bottom:8px}
.kmidle-card p{font-size:12.5px;color:var(--ink3);line-height:1.9;margin-bottom:20px}
.kmidle-btns{display:flex;gap:10px;justify-content:center}

/* خلية الإجراءات تحتفظ باتجاه الصفحة: العين يميناً ثم ما بعدها */
.g td.ctr:last-child{direction:rtl;unicode-bidi:embed;white-space:nowrap}

/* وسم حالة السجل في الإشعارات */
.np-badge.s1{background:var(--sec-w);color:var(--sec)}
.np-badge.s2{background:var(--warn-w);color:#B5701A}
.np-badge.s3{background:var(--bad-w);color:var(--bad)}
.np-badge.s4{background:var(--ok-w);color:#1E9B55}
.np-badge.s5{background:var(--bad-w);color:var(--bad)}

/* حقول الأرقام: تُظهر أسهم الزيادة والنقصان دائماً */
input[type=number]{-moz-appearance:number-input;appearance:auto}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:inner-spin-button;opacity:1;height:26px;margin-inline-start:4px}

/* حقل الوقت العربي — مضغوط بلا قوائم */
.tfield{padding:2px}
.tfin{width:100%;min-width:88px;text-align:center;padding:7px 6px;
  border:none;background:transparent;font-family:inherit;font-size:12.5px;letter-spacing:.02em}
table.m td .tfin{border:none}
.tfin:focus{box-shadow:inset 0 0 0 2px rgba(68,158,96,.18);outline:none;border-radius:4px}

/* مرشّح الإدارة أعلى لوحة المعلومات */
.dashpick{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.dashpick label{font-size:12.5px;color:var(--ink3);font-weight:500}
.dashpick select,.dashpick .sx{min-width:280px;max-width:420px}

/* قائمة أنواع النشاط تحت زر التسجيل */
.umenu2.shown{display:block !important}

/* عنوان جدول إلزامي ناقص */
.sh.bad h4{color:var(--bad)}
.sh.bad .n{background:var(--bad-w);color:var(--bad);border-color:var(--bad)}
.sh .note{font-size:11px;color:var(--ink3)}
.sh.bad .note{color:var(--bad)}

/* رسائل طلب المعرفة */
.msgs{display:flex;flex-direction:column;gap:10px}
.msg.sys{background:var(--surf2);border-inline-start:3px solid var(--pri-l)}
.msg.sys p{color:var(--ink3);font-size:12.5px}
/* رأس الرسالة: الاسم ثم وسم النوع بفاصل واضح */
.mh2 .who{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.mh2 .who b{white-space:nowrap}
.mh2 .when{white-space:nowrap}
.mkind{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 9px;line-height:1.6;
  border-radius:20px;background:var(--pri-w);color:var(--pri-d);white-space:nowrap}
.msg.sys .mkind{background:var(--sec-w);color:var(--sec)}

/* بطاقة المعرفة داخل رسالة الإنجاز */
.knowcard{display:flex;align-items:center;gap:12px;margin-top:10px;padding:12px 14px;
  border:1px solid var(--pri);border-radius:var(--r);background:var(--pri-w);
  transition:.15s;text-decoration:none}
.knowcard:hover{background:var(--surf);box-shadow:var(--sh)}
.knowcard .kc-i{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--pri);color:#fff;font-size:17px}
.knowcard .kc-t{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.knowcard .kc-t b{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.knowcard .kc-t .mono{font-size:11px;color:var(--ink3)}
.knowcard .kc-a{flex:none;font-size:12px;font-weight:600;color:var(--pri-d);white-space:nowrap}

/* ═════ شاشة دخول لوحة التحكم ═════ */
.adlogin{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.adbox{width:100%;max-width:420px;background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r);padding:32px 30px;box-shadow:0 18px 50px rgba(38,51,44,.12)}
.adhead{text-align:center;margin-bottom:24px}
.adhead .modlogo{width:170px;margin:0 auto 16px}
.adhead h1{font-size:20px;font-weight:700;margin-bottom:6px}
.adhead p{font-size:12.5px;color:var(--ink3);line-height:1.8}
.adbox .fld{margin-bottom:16px}
.adbox .btn.w{margin-top:6px}
.adnote{display:flex;gap:10px;align-items:flex-start;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--line)}
.adnote .ic{font-size:15px;color:var(--pri);flex:none}
.adnote p{font-size:11.5px;color:var(--ink3);line-height:1.9}
.adnote a{color:var(--pri-d);text-decoration:underline}

/* قواعد كلمة المرور */
.pwrules{margin:-6px 0 16px;display:flex;flex-direction:column;gap:6px}
.pr{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink3)}
.pr i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line);flex:none;
  transition:.15s;position:relative}
.pr.on{color:var(--pri-d)}
.pr.on i{background:var(--pri);border-color:var(--pri)}
.pr.on i::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;font-size:9px;line-height:1}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* شبكة صلاحيات مدير النظام */
.permgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:640px){.permgrid{grid-template-columns:1fr}}
.permcard{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surf);transition:.14s}
.permcard:hover{border-color:var(--pri-l)}
.permcard:has(input:checked){border-color:var(--pri);background:var(--pri-w)}
.permcard input{margin-top:3px;width:16px;height:16px;accent-color:var(--pri);flex:none}
.permcard span{display:flex;flex-direction:column;gap:2px}
.permcard b{font-size:13px;font-weight:600}
.permcard .note{font-size:11px;line-height:1.7}
.umenu2 a.dang{color:var(--bad)}
.umenu2 a.dang:hover{background:var(--bad-w)}

/* بطاقات أقسام لوحة التحكم */
.admgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.admcard{display:flex;gap:14px;padding:18px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surf);transition:.15s;align-items:flex-start}
.admcard:hover{border-color:var(--pri);background:var(--pri-w);transform:translateY(-2px);
  box-shadow:var(--sh)}
.ac-i{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--pri-w);color:var(--pri-d);font-size:20px}
.admcard:hover .ac-i{background:var(--pri);color:#fff}
.ac-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.ac-t b{font-size:14px;font-weight:600}
.ac-t .note{font-size:11.5px;line-height:1.7}
.ac-n{margin-top:5px;font-size:11px;font-weight:700;color:var(--pri-d);
  background:var(--pri-w);padding:2px 9px;border-radius:20px;align-self:flex-start}


/* أثناء جلب حقول النوع */
#fieldswrap{transition:opacity .12s}
#fieldswrap.loading{opacity:.45;pointer-events:none}
/* التاريخ والوقت في وسط خانتهما */
.fx .dpin .v{text-align:center;flex:1}
.tfin{text-align:center}

/* وسم لوحة التحكم أسفل هوية النظام في القائمة الجانبية */
.sbrand .sctl{display:inline-block;margin-top:8px;padding:2px 12px;border-radius:20px;
  background:var(--pri);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.02em}

/* أثناء جلب صفحة — خفوت خفيف لا وميض */
#view{transition:opacity .1s ease}
#view.nav-load{opacity:.55}

/* ═════ ستارة التحميل بين الصفحات ═════
   خلفية شفافة تُبقي الصفحة ظاهرة خلفها، ودائرة تدور في وسطها. */
#navveil{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;
  background:rgba(250,252,251,.55);backdrop-filter:blur(1.5px);
  opacity:0;visibility:hidden;transition:opacity .16s ease,visibility .16s}
#navveil.on{opacity:1;visibility:visible}
html[data-mode="dark"] #navveil{background:rgba(18,26,22,.55)}

.nv-spin{display:flex;flex-direction:column;align-items:center;gap:10px}
.nv-spin svg{animation:nvturn .9s linear infinite;transform-origin:50% 50%}
.nv-spin span{font-size:12px;font-weight:600;color:var(--pri-d);letter-spacing:.01em}
.nv-bg{stroke:var(--line)}
.nv-fg{stroke:var(--pri);stroke-dasharray:80 33}
@keyframes nvturn{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .nv-spin svg{animation-duration:2.4s}
}

/* رسالة تحقق في شاشة الدخول */
.lerr{margin:-4px 0 14px;padding:9px 13px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  color:#fff;font-size:12.5px;font-weight:600;line-height:1.7}

/* شريحة مدير النظام في شاشة العرض التوضيحي */
.rlchip.adm{border-color:rgba(255,255,255,.55);font-weight:700}

/* صف العنوان والسرية والنطاق: العنوان أوسع، والسرية أضيق ما يكفي */
.row.rTitle{display:grid;gap:15px;grid-template-columns:minmax(0,1.7fr) minmax(0,.7fr) minmax(0,1.1fr)}
@media(max-width:900px){.row.rTitle{grid-template-columns:1fr}}