/* ============================================================
   شاشات الدفعة ١ — الهيكل التنظيمي والمستخدمون والدخول
   يقف على tokens.css: لا لون هنا خارج الرموز.
   الاتجاه المنطقي وحده — inline-start لا left.
   ============================================================ */

/* ═══ شريط علوي ═══ */
.topbar{
  background:var(--surface);border-bottom:1px solid var(--line);
  padding:10px 20px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;position:sticky;top:0;z-index:40;
}
.topbar-r{display:flex;align-items:center;gap:14px;min-width:0}
.sys-name{
  font-size:.82rem;font-weight:700;color:var(--ink-2);
  padding-inline-start:14px;border-inline-start:1px solid var(--line);
}
@media(max-width:720px){.sys-name{display:none}}

/* روابط مدير النظام ثمانية، ومجموع عرضها 808 بكسل بعد إطالة
   «الشجرة» إلى «الهيكل التنظيمي». الشريط يظهر من 721 بكسل، فبين
   721 و1100 لا تسع الروابط. وبلا nowrap ينكسر نصّ كل رابط سطرين
   فيعلو الشريط كلّه — والتمرير الأفقي أهون: الروابط تبقى سطراً
   واحداً، ومن ضاقت شاشته مرّرها. */
.topnav{display:flex;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav a{
  flex:0 0 auto;white-space:nowrap;
  color:var(--ink-2);text-decoration:none;font-size:.82rem;font-weight:600;
  padding:8px 11px;border-radius:var(--r);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.topnav a:hover{background:var(--primary-weak);color:var(--primary-ink)}

/* ═══ شريط الصفة النشطة ═══ */
.who-form{margin:0}
.who{
  display:flex;align-items:center;gap:9px;
  background:var(--surface-sunk);border:1px solid var(--line-strong);
  border-radius:var(--r);padding:5px 11px;min-height:38px;
}
.who-lbl{font-size:.66rem;color:var(--ink-3);white-space:nowrap}
.who-now{font-size:.8rem;font-weight:600;color:var(--ink);white-space:nowrap}
.who-btn{
  font-size:.68rem;font-weight:600;color:var(--primary-ink);
  padding:4px 8px;border:1px solid var(--line-strong);border-radius:var(--r);
  white-space:nowrap;
}
.who-btn:hover{border-color:var(--primary);background:var(--primary-weak)}
@media(max-width:600px){
  .topbar{padding:9px 14px;gap:10px}
  .who{padding:4px 8px;gap:6px}
}

/* ═══ الهوية على الجوال: الصفة وحدها ═══
   الاسم كان بلا white-space ولا حدّ عرض، فيلتفّ إلى ستة أسطر
   ويرفع الشريط إلى 128 بكسل، ويدفع الصفة خارج الصندوق فتُقصّ —
   ومعها تجاوز أفقي (408 بكسل على شاشة 380).

   والصفة هي بأي صلاحية يعمل المستخدم الآن، فقصّها خطر تشغيلي
   لا تجميلي. لذا: الصفة تبقى كاملة في الشريط، والاسم ينتقل إلى
   ورقة «المزيد» حيث يظهر كاملاً — والمستخدم يعرف اسمه أصلاً.

   الاسم يبقى في الوسم لقارئ الشاشة وللمكتب؛ الإخفاء بصريّ. */


/* ═══ الغلاف ═══ */
.wrap{max-width:1120px;margin:0 auto;padding:24px 20px 80px}
@media(max-width:600px){.wrap{padding:18px 14px 60px}}

/* ═══ رأس الشاشة ═══ */
.page-h{margin-bottom:22px}
.page-t{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.page-s{font-size:.85rem;color:var(--ink-2);margin-top:3px}

/* ═══ الأقسام والبطاقات ═══ */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:18px;margin-bottom:20px;
}
.card-t{font-size:1rem;font-weight:700;margin-bottom:14px}

/* ═══ الرسائل ═══ */
.flash{
  padding:11px 14px;border-radius:var(--r);margin-bottom:16px;
  font-size:.85rem;font-weight:600;border:1px solid currentColor;
}
.flash-ok{color:var(--ok);background:var(--ok-weak)}
.flash-err{color:var(--danger);background:var(--danger-weak)}

/* ═══ الأزرار ═══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:var(--tap);padding:0 18px;border-radius:var(--r);
  font-size:.88rem;font-weight:600;border:1px solid transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
  white-space:nowrap;text-decoration:none;
}
.btn-primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-weak)}
.btn-danger{border-color:var(--danger);color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:var(--on-status)}
/* الاعتماد والإغلاق خضراء، والإعادة/السحب بنّية — نظام التصميم */
.btn-ok{border-color:var(--ok);color:var(--ok)}
.btn-ok:hover{background:var(--ok);color:var(--on-status)}
.btn-warn{border-color:var(--warn);color:var(--warn)}
.btn-warn:hover{background:var(--warn);color:var(--on-status)}
.btn-sm{min-height:36px;padding:0 13px;font-size:.8rem}

/* ═══ النماذج ═══ */
.form-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:5px;flex:1 1 180px;min-width:0}
.field-lbl{font-size:.74rem;font-weight:600;color:var(--ink-2)}
.field-hint{font-size:.66rem;color:var(--ink-3)}
.input,select.input{
  width:100%;min-height:var(--tap);padding:9px 12px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r);font-size:.88rem;
}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-weak)}
.input-code{font-family:var(--f-num);text-transform:uppercase;direction:ltr;text-align:start}

/* ═══ الشجرة ═══
   الإزاحة بـ padding-inline-start — الاتجاه المنطقي وحده.
   القضيب يرث لون الخط، فيبهت مع الوحدة المعطّلة. */
.tree{list-style:none}
.tree ul{list-style:none;padding-inline-start:0}
.tree-node{position:relative}
.tree-node ul{
  padding-inline-start:var(--rail);
  margin-inline-start:9px;
  border-inline-start:1px solid var(--line);
}
.unit{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 13px;margin-bottom:6px;
  border-inline-start:3px solid var(--line-strong);
}
.unit.lvl-1{border-inline-start-color:var(--primary)}
.unit.lvl-2{border-inline-start-color:var(--brand-taupe)}
.unit.lvl-3{border-inline-start-color:var(--brand-taupe-pale)}
.unit.off{opacity:.55;border-style:dashed}
.unit-code{
  font-family:var(--f-num);font-size:.72rem;font-weight:700;
  color:var(--primary-ink);background:var(--primary-weak);
  padding:3px 7px;border-radius:var(--r);direction:ltr;flex-shrink:0;
}
.unit-name{font-size:.9rem;font-weight:600;min-width:0}
.unit-type{font-size:.68rem;color:var(--ink-3);white-space:nowrap}
.unit-path{
  font-family:var(--f-num);font-size:.64rem;color:var(--ink-3);
  direction:ltr;unicode-bidi:isolate;
}
.unit-off-tag{font-size:.64rem;font-weight:700;color:var(--warn)}
.unit-act{margin-inline-start:auto;display:flex;gap:6px}
@media(max-width:600px){
  .unit{gap:7px;padding:9px 10px}
  .unit-path,.unit-type{display:none}
  .unit-act{margin-inline-start:auto}
  .tree-node ul{padding-inline-start:12px;margin-inline-start:6px}
}

/* ═══ المستخدمون ═══ */
.user{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin-bottom:10px;
}
.user-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.user-name{font-size:.95rem;font-weight:700}
.user-mail{font-family:var(--f-num);font-size:.7rem;color:var(--ink-3);direction:ltr}
.caps{display:flex;flex-direction:column;gap:6px}
.cap{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:var(--surface-sunk);border:1px solid var(--line);
  border-radius:var(--r);padding:7px 11px;
}
.cap-role{font-size:.78rem;font-weight:600}
.cap-at{font-size:.68rem;color:var(--ink-3)}
.cap-unit{font-size:.78rem;color:var(--ink-2)}
.cap-act{margin-inline-start:auto}
.cap-none{
  font-size:.75rem;color:var(--ink-3);font-style:italic;
  padding:7px 0;
}

/* ═══ الدخول ═══ */
.login-wrap{max-width:460px;margin:0 auto;padding-top:24px}
.login-crest{width:120px;margin:0 auto 22px}
.login-t{font-size:1.2rem;font-weight:700;text-align:center;margin-bottom:5px}
.login-s{font-size:.8rem;color:var(--ink-2);text-align:center;margin-bottom:24px}
.login-row{
  display:flex;align-items:center;gap:11px;width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;margin-bottom:8px;text-align:start;
  border-inline-start:3px solid var(--line-strong);
  transition:border-color var(--dur) var(--ease);
}
.login-row:hover{border-color:var(--primary);border-inline-start-color:var(--primary)}
.login-who{min-width:0;flex:1}
.login-nm{display:block;font-size:.9rem;font-weight:600}
.login-cap{display:block;font-size:.72rem;color:var(--ink-2);margin-top:2px}
.login-go{margin-inline-start:auto;font-size:.7rem;color:var(--ink-3);flex-shrink:0}
.login-note{
  margin-top:22px;padding:11px 13px;border:1px dashed var(--line-strong);
  border-radius:var(--r);font-size:.72rem;color:var(--ink-2);text-align:center;
}

/* ═══ الفراغ ═══ */
.empty{
  text-align:center;padding:36px 20px;border:1px dashed var(--line-strong);
  border-radius:var(--r);color:var(--ink-2);
}
.empty-t{font-weight:600;margin-bottom:3px;color:var(--ink)}
.empty-s{font-size:.8rem}

/* ═══ لوحة البداية ═══ */
.home-caps{display:flex;flex-direction:column;gap:8px;margin-top:10px}

/* ============================================================
   الدفعة ٢ — الإصدار والرؤية
   لا لون خارج الرموز. الاتجاه المنطقي وحده.
   ============================================================ */

/* ═══ رأس بفعل ═══ */
.page-h-act{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ═══ الشارات ═══
   اللون يحمل معنى واحداً لا اثنين. */
.chip{
  font-size:.68rem;font-weight:700;padding:3px 8px;border-radius:var(--r);
  white-space:nowrap;border:1px solid currentColor;
}
.chip-neutral{color:var(--ink-3);background:var(--surface-sunk)}
.chip-ok{color:var(--ok);background:var(--ok-weak)}
.chip-warn{color:var(--warn);background:var(--warn-weak)}
.chip-danger{color:var(--danger);background:var(--danger-weak)}
.chip-info{color:var(--info);background:var(--info-weak)}

/* ═══ التكاليف الواردة ═══ */
.inbox{list-style:none;display:flex;flex-direction:column;gap:8px}
.ib{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  border-inline-start:3px solid var(--line-strong);
  transition:border-color var(--dur) var(--ease);
}
.ib:hover{border-color:var(--primary);border-inline-start-color:var(--primary)}
.ib-late{border-inline-start-color:var(--warn)}
.ib-link{display:block;padding:13px 15px;text-decoration:none;color:inherit;min-height:var(--tap)}
.ib-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.ib-ref{font-size:.72rem;font-weight:700;color:var(--primary-ink)}
.ib-title{font-size:.95rem;font-weight:600;line-height:1.5;margin-bottom:5px}
.ib-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.72rem;color:var(--ink-3)}
.ib-due-late{color:var(--warn);font-weight:700}

/* ═══ النموذج العمودي ═══ */
.form-v{display:flex;flex-direction:column;gap:16px}
.ta{min-height:150px;resize:vertical;line-height:1.8;font-family:var(--f-ui)}
.form-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ═══ اختيار المُكلَّف — بحث واحد لا أربع قوائم ═══ */
.seek{display:flex;flex-direction:column;gap:6px}
.seek-list{
  list-style:none;max-height:260px;overflow-y:auto;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
}
.seek-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;
  padding:10px 12px;min-height:var(--tap);text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line);text-align:start;
}
.seek-list li:last-child .seek-row{border-bottom:none}
.seek-row:hover{background:var(--primary-weak)}
.seek-nm{font-size:.85rem;font-weight:600}
.seek-cap{font-size:.7rem;color:var(--ink-3);margin-inline-start:auto}
.seek-none{padding:14px;font-size:.78rem;color:var(--ink-3);text-align:center}

.pick{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--primary-weak);border:1px solid var(--primary);
  border-radius:var(--r);padding:11px 13px;min-height:var(--tap);
}
.pick-nm{font-size:.88rem;font-weight:700;color:var(--primary-ink)}
.pick-cap{font-size:.72rem;color:var(--primary-ink)}
.pick-x{
  margin-inline-start:auto;font-size:.72rem;font-weight:600;
  color:var(--primary-ink);text-decoration:underline;
  padding:6px 4px;
}

/* ═══ الرقم المرجعي — بارز وقابل للنسخ ═══ */
.ref-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.ref-box{
  display:flex;align-items:center;gap:11px;
  background:var(--surface);border:1px solid var(--line-strong);
  border-inline-start:3px solid var(--primary);
  border-radius:var(--r);padding:8px 13px;
}
.ref-lbl{font-size:.66rem;color:var(--ink-3);white-space:nowrap}
.ref-no{
  font-size:1.05rem;font-weight:700;color:var(--ink);letter-spacing:.04em;
  padding:4px 6px;border-radius:var(--r);min-height:32px;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.ref-no:hover{background:var(--primary-weak);color:var(--primary-ink)}
.ref-no.is-copied{background:var(--ok-weak);color:var(--ok)}
@media(max-width:600px){
  .ref-box{flex:1 1 100%}
  .ref-no{font-size:1rem}
}

/* ═══ نصّ التكليف ═══ */
.tk-title{font-size:1.2rem;font-weight:700;line-height:1.5;margin-bottom:9px}
.tk-meta{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:.74rem;color:var(--ink-3);
  padding-bottom:13px;border-bottom:1px solid var(--line);margin-bottom:14px;
}
.tk-sep{color:var(--line-strong)}
.tk-body{font-size:.92rem;line-height:1.9;white-space:pre-wrap}

/* ═══ قضيب السلسلة ═══
   القضيب يرث لون الخط، فيبهت مع الحلقة المنتهية. */
.chain{list-style:none;position:relative;padding-inline-start:6px}
.cl{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 0 10px 0;position:relative;
  padding-inline-start:22px;
}
.cl::before{
  content:'';position:absolute;inset-inline-start:4px;top:0;bottom:0;
  width:1px;background:var(--line);
}
.cl:first-child::before{top:50%}
.cl:last-child::before{bottom:50%}
.cl-dot{
  position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;
  background:var(--surface);border:2px solid var(--line-strong);
}
.cl-ok{border-color:var(--ok)}
.cl-warn{border-color:var(--warn)}
.cl-danger{border-color:var(--danger)}
.cl-info{border-color:var(--info)}
.cl-neutral{border-color:var(--line-strong)}
.cl-off{opacity:.5}
.cl-me .cl-nm{color:var(--primary-ink)}
.cl-who{display:flex;flex-direction:column;gap:1px;min-width:0}
.cl-nm{font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cl-unit{font-size:.7rem;color:var(--ink-3)}
.cl-tag{
  font-size:.6rem;font-weight:700;color:var(--ink-3);
  background:var(--surface-sunk);border:1px solid var(--line);
  padding:1px 5px;border-radius:var(--r);
}
.cl-tag-me{color:var(--primary-ink);background:var(--primary-weak);border-color:var(--primary)}
.cl-ended{font-size:.64rem;color:var(--ink-3);font-style:italic}
.chain .chip{margin-inline-start:auto}
@media(max-width:600px){
  .chain .chip{margin-inline-start:0}
  .cl{gap:7px}
}

/* hidden لا يُهزم بـ display من القواعد أعلاه */
[hidden]{display:none!important}

/* ============================================================
   أدوات صغيرة — تُزيل style= المضمّنة التي تحجبها CSP
   ============================================================ */

/* حقل لا يتمدّد في صفّ مرن — للأزرار داخل .form-row */
.field-fixed{flex:0 0 auto}

/* فاصل علوي متوسط — بدل style="margin-top:.." المضمّن */
.mt-2{margin-top:12px}
.mt-3{margin-top:14px}

/* ═══ شريط الأفعال ═══
   يُبنى من آلة الحالة بحسب الموقع؛ كل زر نموذج POST قائم بذاته. */
.acts{display:flex;flex-wrap:wrap;gap:10px}
.act-form{margin:0}
.act-form .btn{width:100%}
@media(max-width:600px){
  .acts{flex-direction:column}
  .act-form{width:100%}
}

/* ═══ الرمز مع اللون — WCAG 1.4.1 ═══
   الحالة تُقرأ بالشكل ولو غاب اللون. الرمز أمام نص الشارة. */
.chip{display:inline-flex;align-items:center;gap:5px}
.chip-g{font-size:.8em;line-height:1;font-weight:400}
.cl-dot{
  display:flex;align-items:center;justify-content:center;
  font-size:7px;line-height:1;color:var(--ink-2);
}

/* ═══ النوافذ — السبب واختيار المُكلَّف ═══ */
.modal{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(20,17,14,.45);
}
.modal-box{
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r);padding:20px;width:100%;max-width:460px;
  max-height:85vh;overflow:auto;
  box-shadow:0 18px 48px rgba(0,0,0,.28);
}
.modal-t{font-size:1rem;font-weight:700;margin-bottom:8px}
.modal-s{font-size:.82rem;color:var(--ink-2);margin-bottom:14px;line-height:1.6}
.modal-in{
  width:100%;padding:10px 12px;border:1px solid var(--line-strong);
  border-radius:var(--r);background:var(--surface);color:var(--ink);
  font:inherit;font-size:.9rem;resize:vertical;
}
.modal-in:focus{outline:2px solid var(--primary);outline-offset:1px}
.modal-err{color:var(--danger);font-size:.8rem;font-weight:600;margin-top:8px}
.modal-acts{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}

/* قائمة اختيار المُكلَّف داخل النافذة */
.pick-list{list-style:none;margin:12px 0 0;max-height:44vh;overflow:auto;
  border:1px solid var(--line);border-radius:var(--r)}
.pick-list li+li{border-top:1px solid var(--line)}
.pick-row{
  display:flex;flex-direction:column;gap:2px;width:100%;text-align:start;
  padding:11px 12px;background:transparent;border:0;cursor:pointer;
  min-height:var(--tap);
}
.pick-row:hover{background:var(--primary-weak)}
.pick-nm{font-size:.88rem;font-weight:600;color:var(--ink)}
.pick-cap{font-size:.72rem;color:var(--ink-3)}
.pick-list .seek-none{padding:12px;font-size:.82rem;color:var(--ink-3);text-align:center}

/* ═══ الحوار — بين طرفي الحلقة فقط ═══
   القفل عقد لا زينة ([ت] ٨). حواري محاذاة مختلفة عن حوار الطرف الآخر. */
.dlg-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.dlg-h .card-t{margin-bottom:0}
/* القفل يحمل عقد السرّية بعد حذف فقرته: زرّ لا span، لأن العنوان
   وحده لا يصل على الجوال — والزرّ يُركَّز بلوحة المفاتيح ويُقرأ
   بقارئ الشاشة عبر aria-label. cursor:help لا pointer: لا ينقل. */
.dlg-lock-fold{min-width:0}
.dlg-lock{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.72rem;font-weight:700;color:var(--ok);
  background:var(--ok-weak);border:1px solid var(--ok);
  padding:3px 9px;border-radius:var(--r);white-space:nowrap;
  cursor:pointer;list-style:none;
  -webkit-tap-highlight-color:transparent;
}
.dlg-lock::-webkit-details-marker{display:none}
.dlg-lock:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.dlg-lock-i{font-size:.8em;line-height:1}
.dlg-lock-txt{
  margin:8px 0 0;font-size:.75rem;color:var(--ink-2);line-height:1.7;
  max-width:46ch;
}
.dlg-empty{font-size:.82rem;color:var(--ink-3);padding:8px 0}
.dlg-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.dlg-msg{
  border:1px solid var(--line);border-radius:var(--r);
  padding:9px 12px;background:var(--surface-sunk);
  max-width:82%;align-self:flex-start;
}
/* حواري: محاذاة للطرف الآخر ولون مميّز — أعرف رسالتي بلمحة */
.dlg-mine{
  align-self:flex-end;background:var(--primary-weak);
  border-color:var(--primary);
}
.dlg-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:3px;flex-wrap:wrap}
.dlg-who{font-size:.78rem;font-weight:700;color:var(--ink)}
.dlg-time{font-size:.68rem;color:var(--ink-3)}
.dlg-body{font-size:.88rem;color:var(--ink);line-height:1.6;white-space:pre-wrap;word-break:break-word}
.dlg-form{display:flex;gap:10px;align-items:flex-end}
.dlg-in{
  flex:1;padding:9px 12px;border:1px solid var(--line-strong);
  border-radius:var(--r);background:var(--surface);color:var(--ink);
  font:inherit;font-size:.88rem;resize:vertical;
}
.dlg-in:focus{outline:2px solid var(--primary);outline-offset:1px}
.dlg-closed{font-size:.8rem;color:var(--ink-3);font-style:italic;padding-top:4px}
@media(max-width:600px){
  .dlg-msg{max-width:100%}
  .dlg-form{flex-direction:column;align-items:stretch}
}

/* ═══ الجرس والإشعارات ═══
   الإشعار يتبع السلسلة لا الهيكل — عدّاد ما يُدفع إليّ. */
.bell{position:relative}
.bell-badge{
  display:inline-block;min-width:18px;height:18px;line-height:18px;
  padding:0 5px;margin-inline-start:5px;border-radius:9px;
  background:var(--warn);color:var(--on-status);font-size:.68rem;font-weight:700;
  text-align:center;vertical-align:middle;
}
.ntf-card{padding:0;overflow:hidden}
.ntf-list{list-style:none}
.ntf{border-bottom:1px solid var(--line)}
.ntf:last-child{border-bottom:none}
.ntf-unread{background:var(--primary-weak)}
.ntf-link{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 16px;text-decoration:none;color:inherit;
}
.ntf-link:hover{background:var(--surface-sunk)}
.ntf-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.ntf-text{font-size:.9rem;font-weight:600;color:var(--ink)}
.ntf-ref{font-size:.74rem;color:var(--ink-3)}
.ntf-meta{display:flex;align-items:center;gap:9px;flex-shrink:0}
.ntf-time{font-size:.72rem;color:var(--ink-3);white-space:nowrap}
.ntf-dot{
  width:9px;height:9px;border-radius:50%;background:var(--warn);
  flex-shrink:0;
}

/* ═══ صفحات المصادقة — Passkey ═══ */
.auth-card{
  max-width:420px;margin:8vh auto 0;padding:32px 28px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);text-align:center;
}
.auth-h{font-size:1.3rem;font-weight:700;color:var(--ink);margin-bottom:6px}
.auth-s{font-size:.9rem;color:var(--ink-2);margin-bottom:22px;line-height:1.6}
.btn-lg{width:100%;padding:13px;font-size:1rem;font-weight:600}
.pk-msg{margin-top:16px;font-size:.88rem;min-height:1.2em;line-height:1.5}
.pk-ok{color:var(--ok)}
.pk-err{color:var(--warn)}
.auth-note{margin-top:20px;font-size:.76rem;color:var(--ink-3);line-height:1.6}
/* بطاقة الدعوة — تظهر لمسؤول الإعدادات بعد إنشاء دعوة */
.invite-box{
  margin:14px 0;padding:14px 16px;background:var(--primary-weak);
  border:1px solid var(--primary);border-radius:var(--r);
}
.invite-box .card-t{margin-bottom:6px}
.invite-link{
  font-family:monospace;font-size:.8rem;color:var(--ink);
  word-break:break-all;display:block;margin-top:6px;
  padding:8px;background:var(--surface);border-radius:4px;
}

/* ═══ التقارير ═══ */
.rep-tabs{display:flex;gap:8px;margin-bottom:18px}
.rep-tab{
  padding:7px 15px;border:1px solid var(--line);border-radius:var(--r);
  font-size:.85rem;color:var(--ink-2);text-decoration:none;
}
.rep-tab.on{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.rep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.rep-card{padding:18px}
.rep-table{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:10px}
.rep-table th{
  text-align:right;padding:7px 10px;border-bottom:2px solid var(--line);
  color:var(--ink-3);font-weight:600;font-size:.78rem;
}
.rep-table td{padding:8px 10px;border-bottom:1px solid var(--line)}
.rep-table .num{text-align:left;font-variant-numeric:tabular-nums}
.rep-warn{color:var(--warn);font-weight:700}
/* وسم المؤرشفة */
.tk-archived{
  display:inline-block;margin-inline-start:10px;padding:2px 10px;
  font-size:.7rem;font-weight:600;color:var(--ink-3);
  background:var(--surface-sunk);border:1px solid var(--line);
  border-radius:20px;vertical-align:middle;
}
.archive-form{margin-top:10px}

/* ═══ تصفّح المهام ═══ */
.browse-filters{
  display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
  margin-bottom:16px;padding:16px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);
}
.bf-field{display:flex;flex-direction:column;gap:4px;min-width:150px}
.browse-table td{vertical-align:middle}
.browse-ref{color:var(--primary);text-decoration:none;font-weight:600}
.browse-ref:hover{text-decoration:underline}
.browse-state{
  display:inline-block;padding:2px 10px;border-radius:20px;
  font-size:.72rem;font-weight:600;
}
.st-live{background:var(--primary-weak);color:var(--primary)}
.st-done{background:var(--surface-sunk);color:var(--ink-2)}
.st-arch{background:var(--arch-weak);color:var(--arch)}

/* ═══ الطباعة الرسمية — مطلب حتمي في جهة نظامية ═══
   كل شاشة مهمة تُطبع بتنسيق رسمي: يُخفى التنقّل والأزرار،
   ويبقى المضمون الرسمي — الرقم المرجعي، المهمة، السلسلة. */
@media print {
  /* يُخفى ما ليس من الوثيقة */
  .topbar, .topnav, .who-form, .bell, .ref-h .btn,
  .action-bar, .dlg-form, .archive-form, .browse-filters,
  .rep-tabs, button, .btn, form { display: none !important; }

  body { background: #fff; color: #000; font-size: 12pt; }
  .card { border: 1px solid #000; box-shadow: none; page-break-inside: avoid; }

  /* الرقم المرجعي بارز في الطباعة — يدخل المعاملة الورقية */
  .ref-no { font-size: 14pt; font-weight: 700; color: #000; }
  .ref-lbl { color: #000; }

  /* السلسلة تبقى — عمود العمل الرسمي */
  .chain, .tk-title, .tk-meta, .dialogue { color: #000; }

  /* رأس رسمي للطباعة */
  .print-header { display: block !important; text-align: center; margin-bottom: 16pt; }

  a { color: #000; text-decoration: none; }
  a[href]:after { content: ""; }  /* لا نطبع الروابط الطويلة */
}
/* الرأس الرسمي يظهر عند الطباعة فقط */
.print-header { display: none; }

/* زر الخروج — دائم في الشريط */
.logout-form{display:inline-block;margin-inline-start:8px}
.logout-btn{
  padding:6px 14px;font-size:.82rem;font-weight:600;
  color:var(--ink-2);background:transparent;
  border:1px solid var(--line);border-radius:var(--r);cursor:pointer;
}
.logout-btn:hover{background:var(--surface-sunk);color:var(--ink)}

/* ═══ سجل التدقيق ═══ */
.audit-count{font-size:.8rem;color:var(--ink-3);margin-bottom:10px}
.audit-table{font-size:.82rem}
.audit-time{white-space:nowrap;color:var(--ink-2)}
.audit-evt{
  display:inline-block;padding:2px 9px;border-radius:20px;
  background:var(--surface-sunk);font-size:.74rem;font-weight:600;
}
.audit-role,.audit-unit{color:var(--ink-2);font-size:.78rem}
.audit-reason{color:var(--ink-2);max-width:280px}
.audit-pager{display:flex;gap:8px;justify-content:center;margin-top:16px}

/* ═══ الرتبة وتعديل البيانات ═══ */
.user-rank{
  display:inline-block;padding:1px 8px;margin-inline-end:6px;
  font-size:.72rem;font-weight:700;color:var(--primary);
  background:var(--primary-weak);border-radius:20px;
}
.user-off{opacity:.55}
.user-off-tag{
  display:inline-block;padding:2px 9px;font-size:.7rem;font-weight:600;
  color:var(--warn);background:var(--surface-sunk);border-radius:20px;
}
.user-edit{
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  margin:8px 0;padding:8px;background:var(--surface-sunk);border-radius:var(--r);
}
.input-sm{padding:5px 9px;font-size:.82rem;min-width:120px}
.unit-rename{display:flex;gap:5px;align-items:center;margin-inline-end:8px}
.unit-rename .input-sm{min-width:160px}

/* ═══ سبب آخر فعل ═══ */
.reason-note{
  margin-bottom:16px;padding:12px 14px;
  background:var(--warn-weak);border:1px solid var(--warn);
  border-radius:var(--r);border-inline-start-width:4px;
}
.reason-h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:5px}
.reason-evt{font-size:.8rem;font-weight:700;color:var(--warn)}
.reason-by{font-size:.74rem;color:var(--ink-3)}
.reason-body{margin:0;font-size:.9rem;color:var(--ink);line-height:1.7}

/* موقعك من التكليف — شريحة لا فقرة. المعلومة هي هي، والسطر يذهب. */
.tk-tag{
  display:inline-block;margin-top:10px;
  padding:3px 10px;border-radius:20px;
  background:var(--surface-sunk);border:1px solid var(--line-strong);
  font-size:.72rem;font-weight:700;color:var(--ink-2);
}

/* ═══ سلسلة الأسباب ═══
   التنبيه أعلاه للحاضر، وهذه للتاريخ: كل إرجاع أو سحب أو إعادة تعيين
   على حلقة أنا طرفها. <details> أصيل بلا سكربت — CSP لا يُخترق. */
.rs-sum{
  display:flex;align-items:center;gap:9px;
  min-height:var(--tap);cursor:pointer;list-style:none;
}
.rs-sum::-webkit-details-marker{display:none}
.rs-sum .card-t{margin:0}
.rs-sum::after{
  content:'▾';margin-inline-start:auto;
  color:var(--ink-3);font-size:.8rem;
  transition:transform var(--dur) var(--ease);
}
.rs[open] .rs-sum::after{transform:rotate(180deg)}
.rs-count{
  min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--warn-weak);color:var(--warn);
  font-size:.68rem;font-weight:700;display:grid;place-items:center;
}
.rs-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.rs-item{
  padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--r);
  border-inline-start:3px solid var(--line-strong);
}
/* ما وقع على حلقتي أنا — يُميَّز، فالباقي سياق */
.rs-item.rs-mine{border-inline-start-color:var(--warn)}
.rs-h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:4px}
.rs-evt{font-size:.8rem;font-weight:700;color:var(--ink)}
.rs-mine .rs-evt{color:var(--warn)}
.rs-by{font-size:.74rem;color:var(--ink-2)}
.rs-at{font-size:.72rem;color:var(--ink-3)}
.rs-on{font-size:.72rem;color:var(--ink-3);margin-bottom:4px}
.rs-body{margin:0;font-size:.88rem;color:var(--ink);line-height:1.7}

/* ═══ الغوص من لوحة القياس ═══
   السطر كلّه هدف اللمس، لا الرقم: الرقم أعرضه ثلاثون بكسلاً على
   الجوال — أقلّ من نصف حدّ اللمس (44). والرابط في الخلية الأولى
   يحمل النصّ، فيقرؤه قارئ الشاشة ويُفتح في تبويب جديد. */
.rep-row a,.rep-table a{color:inherit;text-decoration:none}
.row-link{cursor:pointer;transition:background var(--dur) var(--ease)}
.row-link:hover{background:var(--primary-weak)}
.row-link:focus-within{background:var(--primary-weak)}
.row-link a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* دلالة القابلية للفتح: سهم خفيف في نهاية السطر عند اللمس */
.row-link td:first-child{position:relative}
.row-link:hover td:first-child::after,
.row-link:focus-within td:first-child::after{
  content:'‹';margin-inline-start:6px;color:var(--primary);font-weight:700;
}

/* الرقم الحاكم في البطاقة العلوية — رابط بلا مظهر رابط */
.kpi-a{color:inherit;text-decoration:none}
.kpi-a:hover,.kpi-a:focus-visible{color:var(--primary-ink)}

/* لافتة الغوص — سطر واحد: ماذا، وعلى مَن، وبكم. بلا شرح. */
.drill-bar{
  margin-bottom:14px;padding:9px 12px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--primary-weak);border:1px solid var(--line-strong);
  border-radius:var(--r);border-inline-start-width:4px;
}
.drill-m{font-size:.85rem;font-weight:700;color:var(--ink)}
.drill-sep{color:var(--ink-3)}
.drill-e{font-size:.85rem;color:var(--ink-2)}
.drill-n{
  min-width:22px;height:22px;padding:0 7px;border-radius:11px;
  background:var(--surface);color:var(--ink);
  font-size:.72rem;font-weight:700;display:grid;place-items:center;
}
.drill-cut{font-size:.7rem;color:var(--ink-3)}
.drill-x{
  margin-inline-start:auto;
  width:var(--tap);height:28px;display:grid;place-items:center;
  color:var(--ink-3);text-decoration:none;font-size:.9rem;
  border-radius:var(--r);
}
.drill-x:hover,.drill-x:focus-visible{background:var(--surface);color:var(--ink)}

/* ═══ بطاقة «التكاليف الواردة» — النظرة الواحدة ═══
   الترتيب البصري يتبع ترتيب الأهمية: العجلة، ثم ماذا، ثم من ومتى. */
.ib-clock{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 10px;border-radius:20px;
  font-size:.75rem;font-weight:700;
  color:var(--ink-2);background:var(--surface-sunk);
}
.ib-clock::before{content:"◷";font-size:.85em;opacity:.8}
/* المتأخّر بلون التأخير من الهوية — يُرى قبل أن يُقرأ */
.ib-clock-late{color:var(--on-status);background:var(--warn)}
.ib-late{border-inline-start:4px solid var(--warn)}

.ib-sep{color:var(--line);margin:0 2px}
.ib-from{font-weight:600;color:var(--ink-2)}
/* الحالة تبقى ظاهرة، لكنها لا تزاحم الموعد */
.ib-state{
  margin-inline-start:auto;font-size:.72rem;color:var(--ink-3);
}
.ib-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* اسم المستخدم برتبته في الشريط — الهوية قبل الصفة */
.who-user{
  font-weight:700;color:var(--ink);
  padding-inline-end:8px;margin-inline-end:8px;
  border-inline-end:1px solid var(--line);
}

/* ═══ الهوية على الجوال: الصفة وحدها ═══
   الاسم كان بلا white-space ولا حدّ عرض، فيلتفّ إلى ستة أسطر
   ويرفع الشريط إلى 128 بكسل، ويدفع الصفة خارج الصندوق فتُقصّ —
   ومعها تجاوز أفقي (408 بكسل على شاشة 380).

   والصفة هي بأي صلاحية يعمل المستخدم الآن، فقصّها خطر تشغيلي
   لا تجميلي. لذا: الصفة كاملة في الشريط، والاسم في ورقة «المزيد»
   حيث يظهر كاملاً — والمستخدم يعرف اسمه أصلاً.

   الاسم يبقى في الوسم لقارئ الشاشة وللمكتب؛ الإخفاء بصريّ.
   وموضع هذه الكتلة بعد تعريف .who-user مقصود: تغلبه بالترتيب
   لا بـ !important. */
@media(max-width:720px){
  .who-user{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .who-lbl{display:none}
  .who{min-width:0;flex-shrink:1}
  .who-now{
    font-size:.76rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  /* الشريط لا يتمدّد رأسياً مهما طالت الصفة */
  .topbar{flex-wrap:nowrap}
  .topbar-r{flex-shrink:1;min-width:0}
  .topbar-r:first-child{flex-shrink:0}
}

/* أضيق الأجهزة (≤360): «مسؤول إعدادات المنظومة» يحتاج 157 بكسل
   ولا يجد إلا 142 — ينقصه 15. وزرّ الخروج يأخذ 54 بكسل وهو
   موجود في ورقة «المزيد» أصلاً، فيُخفى من الشريط هنا وحده.
   الصفة أولى بالمساحة: هي ما يتغيّر، والخروج ثابت في الورقة. */
@media(max-width:360px){
  .topbar{padding:9px 10px;gap:8px}
  .who{padding:4px 7px}
  .logout-form{display:none}
}

/* ═══ لوحة القياس ═══ */
.kpi-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;margin-bottom:18px;
}
.kpi{
  padding:16px 18px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);
}
.kpi-lead{border-color:var(--primary);background:var(--primary-weak)}
.kpi-warn{border-color:var(--warn)}
.kpi-v{font-size:1.9rem;font-weight:700;color:var(--ink);line-height:1.1;
       font-variant-numeric:tabular-nums}
.kpi-l{font-size:.84rem;font-weight:600;color:var(--ink-2);margin-top:4px}
.kpi-s{font-size:.74rem;color:var(--ink-3);margin-top:2px}
.score-table{font-size:.82rem}
.score-table th{white-space:nowrap}
.score-sub{color:var(--ink-3);font-size:.76rem}

/* نافذة التأكيد — رسالة الأثر متعددة الأسطر تُعرض كما كُتبت */
#confirm-modal .modal-s{white-space:pre-line;line-height:1.9;text-align:start}
#confirm-modal .modal-t{color:var(--ink)}

/* ============================================================
   الدفعة ٣ — التنقّل السفلي والوضع
   «لا شريط جانبي ولا هامبرجر: التنقل في الأسفل حيث اليد.»
   المكوّنات منقولة من نظام التصميم المعتمد — لا اجتهاد فيها.
   ============================================================ */

/* ═══ التنقّل السفلي — الجوال وحده ═══
   ثابت أسفل الشاشة، يحترم قصّة الآيفون (safe-area). */
.tabbar{
  display:none;
  position:fixed;inset-inline:0;bottom:0;z-index:50;
  background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 4px;min-height:56px;justify-content:center;
  color:var(--ink-3);font-size:.62rem;font-weight:600;
  text-decoration:none;position:relative;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
/* «التكاليف الواردة» أطول من «التكاليف الواردة» بثلاثين بكسلاً. القياس على
   الخطّ المضمّن: عند 360 بكسل والحشو 4 لا يبقى إلا 2.6 بكسل هامشاً،
   وعند 320 يفيض فينكسر السطر ويعلو الشريط. فنُضيّق الحشو ونُصغّر
   الخطّ درجةً على الشاشات الضيّقة وحدها — 74.2 من 76 عند 320. */
@media(max-width:400px){
  .tab{padding-inline:2px;font-size:.58rem}
}
.tab svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7}
/* الصفحة الحالية: لون + شريط علوي — الشكل مع اللون لا اللون وحده */
.tab[aria-current="page"]{color:var(--primary)}
.tab[aria-current="page"]::before{
  content:'';position:absolute;top:0;inset-inline:22%;height:2px;background:var(--primary);
}
.tab-dot{
  position:absolute;top:5px;inset-inline-end:20%;
  min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--danger);color:var(--on-status);
  font-family:var(--f-num);font-size:.58rem;font-weight:700;
  display:grid;place-items:center;
}

/* ═══ ورقة «المزيد» ═══
   الروابط تختلف بحسب الصفة: الموظف يرى قليلاً ومدير النظام يرى الكل.
   فبدل تبويبات متغيّرة العدد — أربعة ثوابت ورابعها يفتح الباقي. */
.sheet{
  position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;
  background:rgba(20,17,14,.45);
}
.sheet-box{
  width:100%;background:var(--surface);
  border-top:1px solid var(--line-strong);
  border-radius:var(--r) var(--r) 0 0;
  padding:8px 0 calc(8px + env(safe-area-inset-bottom));
  max-height:80vh;overflow:auto;
}
.sheet-grip{
  width:36px;height:4px;border-radius:2px;background:var(--line-strong);
  margin:6px auto 10px;
}
.sheet-t{
  font-size:.7rem;font-weight:700;color:var(--ink-3);
  padding:0 18px 8px;letter-spacing:.06em;
}
.sheet-link{
  display:flex;align-items:center;gap:10px;
  padding:0 18px;min-height:var(--tap);
  font-size:.9rem;font-weight:600;color:var(--ink);
  text-decoration:none;border-top:1px solid var(--line);
}
.sheet-link:hover{background:var(--primary-weak);color:var(--primary-ink)}
.sheet-badge{
  margin-inline-start:auto;min-width:20px;height:20px;padding:0 6px;
  border-radius:10px;background:var(--warn);color:var(--on-status);
  font-family:var(--f-num);font-size:.66rem;font-weight:700;
  display:grid;place-items:center;
}
.sheet-form{margin:0;border-top:1px solid var(--line)}
.sheet-form .sheet-link{width:100%;border-top:none;text-align:start;background:none}

/* ═══ مبدّل الوضع ═══ */
.mode-btn{
  display:inline-grid;place-items:center;
  width:var(--tap);height:var(--tap);flex-shrink:0;
  border:1px solid var(--line);border-radius:var(--r);color:var(--ink-2);
}
.mode-btn:hover{background:var(--surface-sunk);color:var(--ink);border-color:var(--line-strong)}
.mode-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
/* أيقونة واحدة تظهر بحسب الوضع — لا سكربت يبدّل الرسم */
.mode-sun{display:none}
[data-mode="dark"] .mode-sun{display:block}
[data-mode="dark"] .mode-moon{display:none}
.sheet-link .mode-btn{width:auto;height:auto;border:none}

/* ═══ التبديل عند 720px ═══
   نفس العتبة التي يختفي عندها اسم النظام — الشريط عندها يضيق فعلاً. */
@media(max-width:720px){
  .topnav{display:none}
  .tabbar{display:flex}
  /* مساحة تحت المحتوى بقدر الشريط + القصّة */
  .wrap{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}

/* ═══ الطباعة — الشريط السفلي والورقة ليسا من الوثيقة ═══ */
@media print{
  .tabbar,.sheet,.mode-btn{display:none!important}
  .wrap{padding-bottom:0}
}

/* نصّ لقارئ الشاشة وحده — الزرّ الأيقوني يحتاج اسماً مقروءاً */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================
   الدفعة ٤ — الجداول العريضة على الجوال
   ------------------------------------------------------------
   المنهج: بطاقة لكل صفّ، بلا تكرار للوسم.
   الجدول نفسه يُعاد تخطيطه؛ عنوان كل عمود يُحقن من data-lbl
   على الخلية. فمصدر واحد للحقيقة: الخادم يبني الجدول مرّة،
   والشاشة تعرضه بشكلين.

   لماذا لا تمرير أفقي؟ الجدول ذو العشرة أعمدة على 380 بكسل
   يحتاج ثلاث شاشات عرضاً — والمقارنة بالعين تسقط حين يغيب
   عمود الاسم عن الرؤية. ولماذا لا إخفاء أعمدة؟ لأن المخفيّ
   في لوحة القياس هو الرقم المطلوب نفسه.
   ============================================================ */
@media(max-width:720px){

  /* الجداول القابلة للتحويل — تُعلَّم بـ data-stack */
  table[data-stack]{display:block;width:100%}
  /* الرأس يُخفى تماماً: عناوين الأعمدة انتقلت إلى data-lbl.
     display:none لا clip — الأخير يُبقي صندوقاً يُبلغ عن تجاوز. */
  table[data-stack] thead{display:none}
  table[data-stack] tbody{display:block;width:100%}
  table[data-stack] tr{
    display:block;width:100%;
    background:var(--surface);
    border:1px solid var(--line);border-radius:var(--r);
    padding:11px 13px;margin-bottom:8px;
  }
  table[data-stack] td{
    display:flex;align-items:baseline;gap:10px;
    padding:4px 0;border:none;
    font-size:.85rem;
  }
  /* عنوان العمود يسبق القيمة — من data-lbl لا من ::before ثابت */
  table[data-stack] td::before{
    content:attr(data-lbl);
    flex:0 0 42%;
    font-size:.74rem;font-weight:600;color:var(--ink-3);
  }
  /* الخلية الأولى رأس البطاقة: بلا عنوان، وأبرز */
  table[data-stack] td:first-child{
    padding-bottom:8px;margin-bottom:5px;
    border-bottom:1px solid var(--line);
    font-size:.95rem;font-weight:700;
  }
  table[data-stack] td:first-child::before{display:none}

  /* استثناء: سجل التدقيق رأس بطاقته الرقم المرجعي لا الوقت —
     فالرقم هو ما يُبحث به ويُملى في الهاتف. ولأن ترتيب أعمدة
     المكتب لا يُمَسّ، الترتيب هنا بصريّ بـ order لا بنقل الوسم.
     الصفّ flex ليعمل order، والاتجاه عمودي فتبقى البطاقة بطاقة. */
  table[data-stack] tr:has(.audit-ref){
    display:flex;flex-direction:column;
  }
  table[data-stack] .audit-ref{
    order:-1;
    padding-bottom:8px;margin-bottom:5px;
    border-bottom:1px solid var(--line);
    font-size:.95rem;font-weight:700;
  }
  table[data-stack] .audit-ref::before{display:none}
  /* والوقت يستعيد عنوانه وهيئته العادية بعد أن فقد صدارته */
  table[data-stack] tr:has(.audit-ref) td:first-child{
    padding-bottom:4px;margin-bottom:0;border-bottom:none;
    font-size:.85rem;font-weight:400;
  }
  table[data-stack] tr:has(.audit-ref) td:first-child::before{display:block}
  /* الأرقام داخل البطاقة: الخلية تبقى عربية ليصطفّ عنوانها مع
     أخواتها على اليمين، واللاتينية تُعزل على القيمة وحدها بـ
     plaintext. .num تفرض direction:ltr على الخلية كلها، فلولا
     هذا النقض لقفز العنوان العربي إلى الجهة المقابلة. */
  table[data-stack] td.num{
    direction:rtl;text-align:start;
    font-family:var(--f-num);
    unicode-bidi:plaintext;
  }
  /* خلية فارغة لا تشغل سطراً */
  table[data-stack] td:empty{display:none}

  /* لوحة القياس: بطاقتان في الصفّ بدل أربع مكدّسة */
  .kpi-grid{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:12px 13px}
  .kpi-v{font-size:1.45rem}
  .kpi-l{font-size:.78rem}
  .kpi-s{font-size:.68rem}

  /* تبويبات الفترة: تملأ العرض ولا تتكدّس */
  .rep-tabs{gap:6px}
  .rep-tab{
    flex:1;text-align:center;padding:0 8px;
    min-height:var(--tap);display:flex;align-items:center;justify-content:center;
    font-size:.8rem;
  }

  /* شبكة التقارير: عمود واحد — جداولها أزواج أصلاً */
  .rep-grid{grid-template-columns:1fr;gap:12px}

  /* مُرقِّم سجل التدقيق: زرّان بمقاس اللمس */
  .audit-pager .btn{flex:1;min-height:var(--tap)}
}

/* ═══ الطباعة: الجدول جدول دائماً ═══
   الوثيقة الرسمية تُطبع بأعمدتها — البطاقات شكل شاشة لا ورق. */
@media print{
  table[data-stack]{display:table}
  table[data-stack] thead{display:table-header-group}
  table[data-stack] tbody{display:table-row-group}
  table[data-stack] tr{display:table-row;border:none;padding:0;margin:0}
  table[data-stack] td{display:table-cell;padding:8px 10px}
  table[data-stack] td::before{display:none}
}

/* ============================================================
   الدفعة ٥ — المرشّحات والنوافذ وصفوف التعديل
   ============================================================ */

/* ═══ المرشّحات المطويّة ═══
   <details> أصيل: لا سكربت، فلا سطر يخضع لـ CSP أصلاً.
   على المكتب تبقى مفتوحة دائماً كما كانت — الطيّ للجوال وحده. */
.filters-fold{margin-bottom:16px}
.filters-sum{
  display:none;align-items:center;gap:9px;
  min-height:var(--tap);padding:0 14px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r);
  font-size:.85rem;font-weight:600;color:var(--ink);
  list-style:none;
}
.filters-sum::-webkit-details-marker{display:none}
.filters-sum::after{
  content:'▾';margin-inline-start:auto;
  color:var(--ink-3);font-size:.8rem;
  transition:transform var(--dur) var(--ease);
}
.filters-fold[open] .filters-sum::after{transform:rotate(180deg)}
.filters-n{
  min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--primary-weak);color:var(--primary-ink);
  font-size:.68rem;font-weight:700;display:grid;place-items:center;
}
.filters-fold .browse-filters{margin-bottom:0}

@media(max-width:720px){
  /* الملخّص يظهر، والمحتوى يُطوى تحته */
  .filters-sum{display:flex}
  .filters-fold:not([open]) .browse-filters{display:none}
  .browse-filters{margin-top:8px;padding:14px}
  .bf-field{min-width:0;flex:1 1 100%}
  .browse-filters .btn{width:100%;margin-top:4px}

  /* ═══ النوافذ كورقة سفلية ═══
     النافذة الوسطى على الجوال تُغطّى بلوحة المفاتيح؛ والسفلية
     قرب الإبهام كالتنقّل. */
  .modal{align-items:flex-end;padding:0}
  .modal-box{
    max-width:none;border-radius:var(--r) var(--r) 0 0;
    max-height:88vh;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  }
  .modal-acts{flex-direction:column-reverse;gap:8px}
  .modal-acts .btn{width:100%}

  /* ═══ صفّ تعديل المستخدم وحقل الوحدة ═══
     كانا flex أفقياً فيتكدّسان ويطيلان البطاقة. */
  .user-edit{flex-direction:column;align-items:stretch;gap:8px}
  .user-edit .input-sm{min-width:0;width:100%;min-height:var(--tap)}
  .user-edit .btn{width:100%}
  .unit-rename{flex-direction:column;align-items:stretch;gap:6px;margin-inline-end:0;width:100%}
  .unit-rename .input-sm{min-width:0;width:100%;min-height:var(--tap)}

  /* .btn-sm يعطي 36 بكسل — دون العتبة. الحجم الصغير مقبول على
     المكتب (الفأرة دقيقة)، أما الإصبع فيحتاج 44. [ت] ٨٫٣ */
  .btn-sm{min-height:var(--tap)}

  /* بطاقة المستخدم والوحدة: أفعالها تملأ العرض */
  .cap{flex-wrap:wrap}
  .cap-act{margin-inline-start:0;width:100%}
  .cap-act .btn{width:100%}
  .unit-act{width:100%;margin-inline-start:0}
  .unit-act .btn{flex:1}
}


/* ============================================================
   الدفعة ٦ — الصفحات العامة: شاشة منقسمة
   ------------------------------------------------------------
   لماذا الانقسام؟ الشاشات العريضة (١٦٠٠+) تترك عموداً مركزياً
   غارقاً في فراغ. واللوحة الملوّنة تملأ النصف وتحمل الهوية،
   فيبقى النصف الآخر أبيض خالصاً للإجراء وحده — تباين وظيفي:
   «من نحن» مقابل «ما تفعل».

   على الجوال ينقلب إلى عمود واحد: اللوحة تتقلّص إلى ترويسة،
   والإجراء يليها، والخطة تُطوى.
   ============================================================ */
:root{
  /* اللوحة من هوية النظام — brand-taupe المعتّم — لا من ألوان
     داخل ملفّ الشعار. نظام التصميم لا يحوي أزرق إطلاقاً. */
  /* اللوحة = --brand-trunk #845B31 نفسه.
     وهو لون فاتح نسبياً، فألوان النصّ الداكنة والذهبية تسقط
     عليه. أُعيد ضبط الطقم كلّه على أفتح الدرجات:
       أبيض 5.96 · كريمي 5.66 · رملي فاتح 5.14 — كلها فوق 4.5.
     والذهبي الفاتح (3.20) والنخلة (3.47) أُبدلا بالكريمي. */
  --id-panel:#845B31;   --id-panel-2:#6E4B28;
  --id-gold:#845B31;
  --id-gold-lt:#FFF8EF;   /* كان ذهبياً — يسقط على الذهبي */
  --id-sand-lt:#F5EDE2;   /* رُفع من #E4DDD3 (4.42) إلى 5.14 */
  --id-green-lt:#FFF8EF;  /* كان نخلة — يسقط */
  --id-on:#FFFFFF;
}
[data-mode="dark"]{
  --id-panel:#5C3F21;  --id-panel-2:#4A3219;
  --id-gold:#D9B98E;
}

/* ═══ الهيكل ═══
   شبكة لا flex: الخطة شقيق للوحة (لتنتقل أسفل الإجراء على
   الجوال)، والشبكة تضعها في خانة اللوحة نفسها بلا تموضع مطلق
   ولا تداخل. عمودان × صفّان:
     [ الإجراء | اللوحة  ]   الصفّ الأول
     [ الإجراء | الخطة   ]   الصفّ الثاني *@ */
/* عمودان بـ flex، واللوحة عمود داخلي يضمّ الهوية والخطة معاً.
   جرّبتُ شبكة بصفّين فتراكبت اللوحة والخطة في الخانة نفسها:
   الأشرطة المطويّة تخفي التراكب، وفتحها يطبع الخطة فوق الشعار.
   الحاوية الواحدة تمنع ذلك بنيوياً — لا تموضع ولا تراكب. */
.pub{
  min-height:100dvh;
  display:flex;
  background:var(--surface);
}
.pub-act{flex:1;order:1}
.pub-side{
  flex:0 0 42%;order:2;
  display:flex;flex-direction:column;
  background:var(--id-panel);
  position:relative;overflow:hidden;
  /* اللوحة لا تتجاوز الشاشة: المحتوى الزائد (الخطة المفتوحة)
     يُمرَّر داخلها بدل أن يمدّ الصفحة كلها. */
  max-height:100dvh;
}
.plan-wrap{overflow-y:auto;min-height:0}
/* شريط تمرير خفيف يليق باللوحة */
.plan-wrap::-webkit-scrollbar{width:5px}
.plan-wrap::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.28);border-radius:3px;
}
.plan-wrap{
  background:transparent;padding:0 40px 34px;
  margin-top:auto;position:relative;z-index:1;
  text-align:start;   /* التوسيط للترويسة والمقولة، لا للقوائم */
}

/* ── اللوحة: الهوية ── */
/* الترويسة تتوسّط اللوحة أفقياً: الشعار والجهة واسم النظام
   في محور واحد، والمقولة تحتها. */
.pub-id{
  color:var(--id-on);
  padding:34px 40px 0;
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  /* حين لا خطة بعدها (صفحة الخطأ) تمتدّ لتملأ العمود، فلا
     تقف في منتصفه وتترك فجوة بيضاء تحتها. */
  flex:1 1 auto;
}
/* وحين توجد خطة، تأخذ اللوحة قدر محتواها والخطة تكمل العمود */
.pub-side:has(.plan-wrap) .pub-id{flex:0 0 auto}
/* واجهة مبنى القيادة — مرّة واحدة أسفل اللوحة، لا تُكرَّر:
   تكرار واجهة معمارية يحيلها ورق جدران. */
/* واجهة مبنى القيادة — تمتدّ بعرض اللوحة كاملاً أسفلها، مرّة
   واحدة بلا تكرار. الشفافية ٢٦٪ لتُرى فعلاً: عند ١٣٪ كانت
   شبحاً باهتاً لا يُقرأ. */
.pub-side::after{
  content:'';position:absolute;inset-inline:0;bottom:0;
  height:auto;aspect-ratio:595 / 260;
  background:url('../img/back.svg') bottom center / 100% auto no-repeat;
  opacity:.26;filter:brightness(0) invert(1);
  pointer-events:none;
}
.pub-side > *{position:relative;z-index:1}

.pub-crest{
  width:160px;height:auto;display:block;margin:0 auto 22px;
  filter:brightness(0) invert(1);
}
/* الجهة أولاً وأبرز: النظام أداة، والقيادة هي صاحبة الشأن.
   فالجهة كبيرة بيضاء، واسم النظام تحتها أصغر وأخفت. */
.pub-org{
  font-size:1.34rem;font-weight:700;line-height:1.55;
  margin:0 0 8px;color:var(--id-on);
}
.pub-t{
  font-size:.9rem;font-weight:600;line-height:1.6;
  margin:0 0 20px;color:var(--id-sand-lt);
  letter-spacing:.01em;
}
.pub-rule{
  height:1px;background:rgba(255,255,255,.38);
  margin:4px auto 22px;width:150px;
}

/* المقولة داخل اللوحة — أبرز عنصر بعد الشعار */
/* المقولة: أبرز عنصر نصّي في اللوحة بعد الجهة.
   حجم أكبر، وزن أثقل، تباعد أسطر أوسع، وعلامة اقتباس مرسومة
   تفصلها بصرياً عمّا حولها. */
.pub-quote{
  margin:0 auto auto;max-width:540px;
  position:relative;padding-top:28px;
}
  /* علامة الاقتباس بيضاء: الذهبي عليها لا يُرى */
.pub-quote::before{
  content:'❝';
  position:absolute;top:-6px;inset-inline-start:50%;
  transform:translateX(50%);
  font-size:2.4rem;line-height:1;
  color:#FFFFFF;opacity:.42;
}
.pub-quote p{
  font-size:1.18rem;font-weight:600;line-height:1.95;
  margin:0 0 14px;color:var(--id-on);
  letter-spacing:.005em;
}
.pub-quote cite{
  display:block;font-style:normal;
  font-size:.84rem;font-weight:700;
  color:var(--id-gold-lt);
  padding-top:14px;position:relative;
}
.pub-quote cite::before{
  content:'';position:absolute;top:0;inset-inline-start:50%;
  transform:translateX(50%);
  width:46px;height:1px;background:#FFFFFF;opacity:.55;
}

/* الخطة أسفل اللوحة.
   هي شقيق للوحة في الوسم لا ابن لها — ليتسنّى نقلها أسفل
   الإجراء على الجوال. وعلى المكتب تُموضَع فوق اللوحة بصرياً. */
.plan{max-width:none}
.plan-fold{margin-bottom:14px}
.plan-sum{
  display:flex;align-items:center;gap:9px;
  min-height:var(--tap);cursor:pointer;list-style:none;
  font-size:.9rem;font-weight:600;color:var(--id-on);
}
.plan-sum::-webkit-details-marker{display:none}
.plan-sum::after{
  content:'▾';margin-inline-start:auto;
  color:#FFFFFF;font-size:.78rem;
  transition:transform var(--dur) var(--ease);
}
.plan-fold[open] .plan-sum::after{transform:rotate(180deg)}
/* النقاط تميّز الأشرطة الثلاثة. اللون وحده لا يكفي هنا: طقم
   الألوان كلّه صار أبيضَ لأن الذهبي والأخضر يسقطان على اللوحة.
   فالتمييز بالشكل — مصمتة، محلّقة، نصف مصمتة. */
.plan-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:#FFFFFF;
}
.plan-fold:nth-of-type(2) .plan-dot{
  background:transparent;box-shadow:inset 0 0 0 1.5px #FFFFFF;
}
.plan-fold:nth-of-type(3) .plan-dot{
  background:#FFFFFF;opacity:.5;
}
.plan-body{padding-top:12px}
.plan-fold:not([open]) .plan-body{display:none}
.plan-lbl{
  font-size:.68rem;font-weight:700;letter-spacing:.09em;
  color:#FFFFFF;margin-bottom:5px;
}
.plan-txt{
  font-size:.86rem;line-height:1.95;margin:0 0 16px;
  color:var(--id-sand-lt);
}
.plan-txt:last-child{margin-bottom:0}
.plan-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.plan-list li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:.84rem;line-height:1.7;color:var(--id-sand-lt);
}
.plan-list li::before{
  content:'';width:4px;height:4px;border-radius:50%;
  background:#FFFFFF;opacity:.75;flex-shrink:0;margin-top:9px;
}
.plan-num{
  font-family:var(--f-num);font-size:.72rem;font-weight:700;
  color:#FFFFFF;flex-shrink:0;min-width:14px;margin-top:1px;
}

/* ── الجانب: الإجراء ── */
.pub-act{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:44px 40px;
  background:var(--surface);
}
.pub-box{width:100%;max-width:380px;text-align:center}
.pub-seal{
  font-size:.66rem;font-weight:700;letter-spacing:.14em;
  color:var(--id-gold);margin-bottom:16px;
}
.pub-h{font-size:1.24rem;font-weight:700;color:var(--ink);margin:0 0 10px}
.pub-lead{
  font-size:.92rem;line-height:1.85;color:var(--ink-2);margin:0 0 26px;
}
.pub-btn{
  width:100%;min-height:58px;font-size:1.04rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
.pub-msg{margin-top:16px;font-size:.88rem;min-height:1.3em;line-height:1.6}
.pub-msg.pk-ok{color:var(--ok)}
.pub-msg.pk-err{color:var(--danger)}
.pub-hint{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  font-size:.76rem;line-height:1.85;color:var(--ink-3);
}
/* التذييل مثبّت أسفل عمود الإجراء بلا margin:auto — الأخير
   يبتلع المساحة المرنة فيدفع الصندوق إلى أعلى العمود بدل وسطه. */
.pub-foot{
  position:absolute;inset-inline:0;bottom:22px;
  font-size:.68rem;color:var(--ink-3);text-align:center;
}
.pub-act{position:relative}

/* ═══ صفحة الخطأ ═══ */
.err-mark{
  width:56px;height:56px;margin:0 auto 18px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--warn-weak);color:var(--warn);
  font-size:1.7rem;font-weight:700;
}
.err-ref{
  margin-top:20px;padding:12px 14px;
  background:var(--surface-sunk);border:1px solid var(--line);
  border-radius:var(--r);text-align:start;
}
.err-ref-l{font-size:.68rem;color:var(--ink-3);margin-bottom:4px}
.err-ref-v{
  font-family:var(--f-num);font-size:.8rem;color:var(--ink);
  word-break:break-all;
}

/* ═══ الشاشات المتوسطة: تضييق اللوحة ═══ */
@media(max-width:1180px){
  .pub-side{flex-basis:46%}
  .pub-id{padding:38px 32px 0}
  .plan-wrap{padding:0 32px 38px}
  .pub-act{padding:38px 32px}
  .pub-crest{width:160px}
  .pub-org{font-size:1.28rem}
  .pub-t{font-size:.88rem}
}

/* ═══ الجوال واللوحي: عمود واحد ═══ */
@media(max-width:900px){
  /* الجوال: عمود واحد — الهوية، ثم الإجراء، ثم الخطة.
     الإجراء يخرج من .pub-side ليقع بينهما. */
  /* الجوال: عمود واحد — الهوية، ثم الإجراء، ثم الخطة.
     .pub-side يبقى حاوية (لتحتفظ بخلفيتها وصورة المبنى)، لكن
     ترتيب أبنائه يُعاد: الهوية أولاً، والخطة أخيراً، والإجراء
     يُقحَم بينهما بـ order على مستوى .pub. */
  /* الجوال: عمود واحد بترتيب — الهوية، ثم الإجراء، ثم الخطة.
     .pub-act شقيق لـ .pub-side، والخطة ابنة لها. فلنقل الإجراء
     بينهما تصير .pub-side حاوية شفّافة (display:contents) —
     عندها يرث أبناؤها ترتيب .pub مباشرةً، فيُقحَم الإجراء.
     ولأن display:contents يُسقط خلفية الحاوية وصورة المبنى،
     تنتقلان إلى .pub-id نفسها. */
  .pub{flex-direction:column}
  .pub-side{display:contents}
  .pub-id{
    order:1;padding:32px 22px 28px;
    background:var(--id-panel);
    position:relative;overflow:hidden;
  }
  .pub-id::after{
    content:'';position:absolute;inset-inline:0;bottom:0;
    height:auto;aspect-ratio:595 / 260;
    background:url('../img/back.svg') bottom center / 100% auto no-repeat;
    opacity:.2;filter:brightness(0) invert(1);pointer-events:none;
  }
  .pub-id > *{position:relative;z-index:1}
  .pub-act{order:2;flex:0 0 auto}
  .plan-wrap{
    order:3;margin-top:0;overflow-y:visible;
    background:var(--id-panel-2);
  }
  .pub-id{
    flex:0 0 auto;padding:32px 22px 28px;
    text-align:center;align-items:center;
  }
  .pub-side::after{opacity:.2}
  .pub-crest{width:132px;margin:0 auto 22px}
  .pub-org{font-size:1.12rem;margin-bottom:8px}
  .pub-t{font-size:.84rem;margin-bottom:22px}
  .pub-rule{margin:0 auto 22px}
  .pub-quote{margin-bottom:0}
  .pub-quote p{font-size:.96rem;line-height:1.95}
  /* الإجراء يلي الهوية مباشرةً — قبل الخطة، فهو المقصود */
  .pub-act{padding:30px 22px 26px}
  .pub-foot{position:static;padding-top:26px}
  .pub-box{max-width:440px}
  /* الخطة تنتقل أسفل الإجراء بصرياً.
     .plan ابن للوحة، فـ order وحده لا ينقلها خارجها. الحلّ:
     اللوحة تصير عموداً مرناً، وترتيب أبنائها يُعاد، و.plan
     يُخرَج من حشو اللوحة بهوامش سالبة ليمتدّ عرضاً كاملاً. */
  .plan-wrap{background:var(--id-panel-2);padding:24px 22px 30px}
  .plan{max-width:none}
  .plan-fold{
    margin-bottom:0;border-bottom:1px solid rgba(255,255,255,.22);
  }
  .plan-fold:last-child{border-bottom:none}
  .plan-sum{padding:4px 0}
  .plan-body{padding-bottom:16px}
  .plan-list{gap:8px}
}

@media(max-width:520px){
  .pub-id{padding:26px 16px 24px}
  .pub-crest{width:112px;margin-bottom:18px}
  .pub-org{font-size:1rem}
  .pub-t{font-size:.8rem}
  .pub-quote p{font-size:.9rem;line-height:1.9}
  .pub-act{padding:26px 16px 22px}
  .plan-wrap{padding:20px 16px 26px}
}

@media print{
  .pub-side::after{display:none}
  .pub{display:block}
}

/* ═══ مفاتيح الدخول — مسار «فقدت جهازي» ═══
   يُبطَل المفقود ويبقى السليم. الإبطال إجراء أمني، فيُعرض بوضوح. */
.keys{
  margin:8px 0;padding:10px 12px;
  background:var(--surface-sunk);border:1px solid var(--line);
  border-radius:var(--r);
}
.keys-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.keys-t{font-size:.8rem;font-weight:600;color:var(--ink-2)}
.keys-n{
  padding:1px 8px;border-radius:20px;font-size:.72rem;font-weight:700;
  background:var(--surface);color:var(--ink-2);border:1px solid var(--line);
}
.keys-all{margin-inline-start:auto;color:var(--danger)}
.keys-none{font-size:.78rem;color:var(--ink-3);margin:0}
.keys-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.key{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:7px 10px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);
}
.key-lbl{font-size:.84rem;font-weight:600;color:var(--ink)}
.key-meta{font-size:.72rem;color:var(--ink-3)}
.key-rev{margin-inline-start:auto;color:var(--danger)}
.pub-lbl{
  display:block;margin:14px 0 5px;font-size:.82rem;
  font-weight:600;color:var(--ink-2);text-align:start;
}
.pub-input{width:100%;margin-bottom:4px}

@media(max-width:600px){
  .key{flex-direction:column;align-items:stretch;gap:4px}
  .key-rev{margin-inline-start:0;align-self:flex-end}
}

/* ═══ بطاقة المستخدم — ملخّص ظاهر وإدارة مطويّة ═══
   ما يُقرأ كثيراً (الهوية والصفات) ظاهر، وما يُستعمل نادراً
   (التعديل والإبطال والتعطيل) مطويّ. <details> بلا سكربت — CSP. */
.user-sum{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:6px 0 4px;
}
.sum-cap{
  padding:2px 10px;border-radius:20px;font-size:.76rem;
  background:var(--surface-sunk);color:var(--ink-2);
  border:1px solid var(--line);
}
.sum-keys{
  margin-inline-start:auto;padding:2px 10px;border-radius:20px;
  font-size:.74rem;font-weight:600;
  background:var(--primary-weak);color:var(--primary-ink);
}
.sum-keys-0{background:var(--warn-weak);color:var(--warn)}

.user-fold{margin-top:8px;border-top:1px solid var(--line)}
.user-fold-sum{
  padding:8px 2px;font-size:.8rem;font-weight:600;
  color:var(--ink-2);cursor:pointer;list-style:none;
  min-height:var(--tap);display:flex;align-items:center;gap:6px;
}
.user-fold-sum::-webkit-details-marker{display:none}
.user-fold-sum::before{content:"▾";font-size:.7em;transition:transform var(--dur) var(--ease)}
.user-fold[open] .user-fold-sum::before{transform:rotate(180deg)}
.user-fold-sum:hover{color:var(--primary)}

.user-fold-body{padding:4px 0 8px}
.fold-sec{
  padding:10px 0;border-top:1px dashed var(--line);
}
.fold-sec:first-child{border-top:none;padding-top:2px}
.fold-t{
  display:flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:700;color:var(--ink-3);
  margin-bottom:7px;letter-spacing:.02em;
}
.fold-t .keys-all{margin-inline-start:auto}
.fold-acts{display:flex;gap:8px;flex-wrap:wrap}

@media(max-width:600px){
  .user-sum{gap:6px}
  .sum-keys{margin-inline-start:0}
}