/* ════════════════════════════════════════════════════════════════════
   🔌 app-v2-wiring.css — أنماط عناصر الربط الوظيفية فقط
   ────────────────────────────────────────────────────────────────────
   لا يغيّر تصميم dashboard.css (app-v2.css) — يضيف مظهراً متسقاً
   بعناصر عقد التنبيهات (data-notif-*) وحوار حذف الحساب، من tokens فقط.
   نفس فلسفة shell-v2-wiring.css في المحرّر.
   ════════════════════════════════════════════════════════════════════ */

/* ─── لوحة التنبيهات: فتح اللوحة يتبع hidden (العقد) بدل .open فقط ─── */
.notif-panel[hidden]{ display:none; }
#notifWrap.open .notif-panel:not([hidden]){ display:block; }
/* تكبير النص لا يخرج مركز الإشعارات من المساحة الفعلية تحت الجرس. */
@media (min-width:761px){
  .notif-panel { max-block-size:var(--notif-available-height,calc(100dvh - 32px)); overflow-y:auto; }
  .notif-tabs { max-inline-size:100%; flex-wrap:wrap; }
  .notif-tabs .seg-item { height:auto; min-height:26px; }
  #incomingInviteScrim .modal { max-block-size:calc(100dvh - (var(--space-4) * 2)); overflow-y:auto; }
}

/* قائمة التنبيهات المرسومة من العقد (renderNotifications) بمظهر عناصر التصميم */
.notif-list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; max-height:340px; overflow:auto; }
.notif-list [data-notif-item]{
  display:flex; gap:var(--space-3); align-items:flex-start;
  padding:var(--space-3) var(--space-2); border-radius:var(--radius-lg);
  font-size:var(--text-sm); color:var(--text-secondary);
}
.notif-copy { min-width:0; flex:1; padding-inline-end:var(--space-4); overflow-wrap:anywhere; }
.notif-link { display:block; color:inherit; font:inherit; text-decoration:none; }
/* فتح الدعوة فعل مراجعة لا رابط انتقال؛ نحتفظ بهيئة النص نفسها عند استخدام button. */
button.notif-link { border:0; background:transparent; text-align:start; padding:0; width:100%; }
#incomingInviteScrim .modal { overflow-wrap:anywhere; }
/* عنوان دلالي بنفس خط وعرض عنوان الحوار في المرجع الأصلي. */
#incomingInviteScrim .modal-head h2 { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:var(--weight-black); }
.notif-link:focus-visible { outline:2px solid var(--action-bg); outline-offset:2px; border-radius:var(--radius-sm); }
/* القراءة الفردية متاحة بالتركيز وكذلك بالمؤشر؛ فتح السياق يعلّمها مقروءة أيضًا. */
.notif-read-action { position:absolute; inset-inline-end:var(--space-1); top:var(--space-2); width:28px; height:28px; border:var(--border-width) solid var(--text-secondary); border-radius:var(--radius-full); background:var(--surface-1); color:var(--text-primary); opacity:0; }
.notif-item:hover .notif-read-action,
.notif-item:focus-within .notif-read-action { opacity:1; }
.notif-item.unread:hover::after,
.notif-item.unread:focus-within::after { content:none; }
.notif-read-action:focus-visible { outline:2px solid var(--action-bg); outline-offset:2px; }
.notif-list [data-notif-item]:hover{ background: var(--surface-2); }
.notif-list [data-notif-item] .sub{ display:block; font-size:var(--text-xs); color:var(--text-muted); margin-top:2px; }
.notif-list [data-notif-empty]{
  display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
  padding:var(--space-8) var(--space-4); color:var(--text-muted); font-size:var(--text-sm); text-align:center;
}
.notif-list button, .notif-error button{ cursor:pointer; }
.notif-loading{ font-size:var(--text-xs); color:var(--text-muted); margin:0 0 var(--space-2); }
.notif-error{ background:var(--danger-bg); color:var(--danger-fg); border-radius:var(--radius-xl); padding:var(--space-3); margin-bottom:var(--space-2); }
.notif-error p{ margin:0 0 var(--space-2); font-size:var(--text-xs); }
.mark-read[disabled]{ opacity:.45; cursor:default; }

/* شارة غير المقروء: تتبع hidden من العقد (بدل إزالة العنصر) */
.dot-badge[hidden]{ display:none; }

/* ─── أزرار خطرة (الحساب والبيانات + حوار الحذف) — ألوان الحالة من tokens ─── */
.btn-danger{ color: var(--danger-fg); }
.btn-danger:hover{ background: var(--danger-bg); color: var(--danger-fg); }
.btn-danger-solid{ background: var(--danger-fg); border-color: var(--danger-fg); }
.btn-danger-solid:hover{ background: var(--danger-fg); filter: brightness(1.08); }
.btn-danger-solid[disabled]{ opacity:.45; cursor:default; }

/* ─── حوار حذف الحساب (P11) داخل مكوّن modal التصميم ─── */
.del-acc-body{ display:flex; flex-direction:column; }
.del-acc-list{ margin:0 0 var(--space-4); padding-inline-start:var(--space-5); font-size:var(--text-sm); color:var(--text-secondary); display:grid; gap:var(--space-1); }
.del-acc-blockers{ color: var(--danger-fg); }
.del-acc-expected{ direction:ltr; unicode-bidi:isolate; font-family:var(--font-mono, monospace); font-size:var(--text-xs); background:var(--surface-2); padding:2px 6px; border-radius:var(--radius-md); }
.del-acc-status{ font-size:var(--text-xs); color:var(--text-muted); margin:var(--space-2) 0 0; min-height:1.4em; }

/* Phase 5B: عند تكبير النص يبقى الحوار داخل الشاشة ويصبح محتواه قابلًا
   للتمرير الحقيقي. النطاق المكتبي يحفظ baseline الهاتف كما هو. */
@media (min-width: 721px){
  #delAccScrim .modal{
    max-block-size:calc(100dvh - 32px);
    overflow-y:auto;
    margin-block:16px;
    box-sizing:border-box;
  }
  #projectDeleteScrim .modal{
    max-block-size:calc(100dvh - 32px);
    overflow-y:auto;
    margin-block:16px;
    box-sizing:border-box;
  }
}

/* ─── المرحلة 2: حذف مشروع مؤرشف — مشتق من حوار حذف الحساب وتوكنز الخطر ─── */
.arch-actions{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.arch-delete{ color:var(--danger-fg); }
.arch-delete:hover{ background:var(--danger-bg); color:var(--danger-fg); }
.project-delete-body{ display:flex; flex-direction:column; gap:var(--space-3); }
.project-delete-warning{
  margin:0; padding:var(--space-3); border-radius:var(--radius-xl);
  background:var(--danger-bg); color:var(--danger-fg);
  font-size:var(--text-sm); line-height:var(--leading-relaxed, 1.7);
}
.project-delete-name{ unicode-bidi:isolate; font-weight:700; }
.project-delete-expected{
  unicode-bidi:isolate; font-family:var(--font-mono, monospace); font-size:var(--text-xs);
  background:var(--surface-2); padding:2px 6px; border-radius:var(--radius-md);
}
.project-delete-status{
  min-height:1.5em; margin:0; color:var(--text-muted);
  font-size:var(--text-xs); line-height:var(--leading-relaxed, 1.7);
}
.project-delete-status[data-state="error"]{ color:var(--danger-fg); }

/* ─── خيارات «ابدأ من» غير المتاحة بعد ─── */
.seg-item[disabled]{ opacity:.4; cursor:default; }

/* ─── اختيار بلاطة النوع الحالية في وضع «النوع والحالة» ─── */
.type-tile.is-on{ border-color: var(--action-bg); box-shadow: inset 0 0 0 1px var(--action-bg); }

/* ─── a11y: skip-link (مخفي حتى focus) — هدفه main#dashMain ─── */
:focus-visible{
  outline:2px solid var(--action-bg);
  outline-offset:2px;
  box-shadow:var(--focus-ring);
}
.skip-link{ position:fixed; top:8px; inset-inline-start:8px; z-index:120;
  background:var(--action-bg); color:var(--action-fg); padding:10px 16px;
  border-radius:var(--radius-full); font-size:var(--text-sm);
  transform:translateY(-120%); opacity:0; transition:transform var(--duration-fast) var(--ease-soft), opacity var(--duration-fast) var(--ease-soft); }
.skip-link:focus-visible{ transform:translateY(0); opacity:1; }

/* ─── دلالات الـtoast: غير النشط غير مرئي وغير تفاعلي صراحةً (عقد P2) ─── */
.toast{ visibility:hidden; pointer-events:none;
  transition: opacity var(--duration-slow) var(--ease-out), translate var(--duration-slow) var(--ease-out), visibility var(--duration-slow); }
.toast.show{ visibility:visible; pointer-events:auto; }
.toast.show.toast--passive{ pointer-events:none; }

#dashMain:focus{ outline: none; }
/* احترام تقليل الحركة في شريط التقدّم نفسه؛ لا نعطّل حركات الواجهة عالميًا. */
@media (prefers-reduced-motion: reduce){
  .progress i{ transition:none !important; }
}
@media (prefers-reduced-motion: reduce){ .skip-link{ transition:none; } }
@media (prefers-reduced-motion: reduce){ #notifBadge, #notifBtn{ transition:none; animation:none; } }
@media (prefers-reduced-motion: reduce){
  #projectDeleteScrim,
  #projectDeleteScrim *,
  #delAccScrim,
  #delAccScrim *{
    animation:none !important;
    transition:none !important;
  }
}

/* ─── إتاحة إضافية: أهداف لمس ودلالات hidden داخل الحوارات ─── */
#setName{ min-block-size:44px; }
.modal [hidden]{ display:none !important; }
#tourPop .btn-sm{ min-block-size:44px; }
#tourPop .tour-foot{ flex-wrap: wrap; gap: var(--space-2); }

/* ─── أهداف لمس مركز التنبيهات (عقد Fix6) ─── */
#notifBtn{ min-width:44px; min-height:44px; }
.notif-panel .mark-read, .notif-error [data-notif-retry], .notif-list [data-notif-mark-read], .notif-list [data-notif-open]{ min-height:44px; }
@media (max-width: 480px){ .notif-panel{ width: min(92vw, 380px); } }

/* نص حيّ لقارئ الشاشة أثناء التحميل (العقد: skeleton بصري aria-hidden + إعلان حيّ) */
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap; }

/* ─── أهداف لمس الهاتف (عقد P9-B): العناصر التي يضبطها التصميم على 36px
   تُرفع إلى 44px على شاشات اللمس فقط — لا تغيير على سطح المكتب. ─── */
@media (max-width: 760px){
  .filter-pill, .btn-sm, .seg-item{ min-height:44px; }
}

/* ─── م3 (الدفعة 2): صف موعد التسليم — نفس مفردات حقول التصميم، توكنز فقط ─── */
.deadline-row{ display:flex; align-items:center; gap: var(--space-2); }
.deadline-row .control{ flex:1; }
.deadline-row .btn-sm{ min-height:44px; white-space:nowrap; }
#projDeadline::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:.6; }

/* ─── م5 (الدفعة 2): شارة الحضور «يُحرَّر الآن» — عنصر التصميم live-badge نفسه.
   تظهر فقط عند حضور حقيقي طازج (TTL 90s كدلالة المحرر)، وتختفي كلياً عند غيابه. ─── */
.continue-card{ position:relative; }
.live-badge[hidden]{ display:none; }
.person{ position:relative; }
.person .live-badge{ top: var(--space-4); inset-inline-end: var(--space-4); }

/* ─── ت3 (الدفعة 3): سطر توضيح الدعوة — توكنز فقط، بنبرة التصميم ─── */
.invite-note{ font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-relaxed, 1.7);
  margin-top: var(--space-3); }

/* استكمال دعوة اللوحة: نفس مفردات الحقول والأزرار، مع رابط يبقى ظاهرًا عند رفض الحافظة. */
#scrim[data-dialog-mode="invite"] .modal{ max-block-size:calc(100dvh - 32px); overflow-y:auto; }
#inviteWrap .control{ width:100%; min-inline-size:0; min-block-size:44px; }
#inviteWrap .seg{ max-inline-size:100%; flex-wrap:wrap; }
#inviteWrap .invite-note{ margin-block:var(--space-2); }
#inviteWrap [data-dashboard-invite-status]{ min-block-size:20px; color:var(--text-secondary); }
#inviteWrap .invite-result{ display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-3); border:var(--border-width) solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-2); }
#inviteWrap .invite-result .field-label{ margin:0; }
#inviteWrap [data-dashboard-invite-url]{ direction:ltr; text-align:left; unicode-bidi:isolate; }
#inviteWrap .invite-link-actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
#inviteWrap .invite-link-actions .btn{ flex:1; min-block-size:44px; }

/* ─── ت9 (الدفعة 3): صف الموعد كمدخل تعديل — تلميح تفاعلي بتوكنز التصميم ─── */
.deadline.is-actionable{ cursor:pointer; border-radius: var(--radius-lg); transition: background var(--duration-fast) var(--ease-soft); }
.deadline.is-actionable:hover{ background: var(--surface-2); }
.deadline.is-actionable:focus-visible{ outline: 2px solid var(--action-bg); outline-offset: 2px; }

/* ─── Task11: إصلاح overflow النص 200% — لا يمس الهاتف ولا يقصّ أي محتوى ─── */
@media (min-width: 1161px){
  .grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 761px) and (max-width: 1160px){
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 761px){
  .grid > .card{ min-width: 0; }
  .card-foot{ min-width: 0; flex-wrap: wrap; }
  .avatars{ min-width: 0; flex: 0 0 auto; }
  .card-foot .counters{ min-width: 0; white-space: normal; overflow-wrap: anywhere; }
}

/* ─── صورة الحساب: ترث قياس واستدارة مكوّن avatar الحاكم ─── */
.profile-avatar__image{
  display:block;
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
  border-radius:inherit;
}
.profile-photo-settings{
  margin-block:var(--space-4);
}
.profile-photo-settings .field-label{
  display:block;
  margin-block:0 var(--space-1);
}
.profile-photo-settings__hint,
.profile-photo-settings__status{
  display:block;
  color:var(--text-muted);
  font-size:var(--text-xs);
}
.profile-photo-settings__editor{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-block:var(--space-2);
}
.profile-photo-settings__editor .control{
  flex:1 1 18rem;
  min-inline-size:min(100%, 18rem);
  direction:ltr;
  text-align:start;
}
.profile-photo-settings__status{
  min-block-size:1.5em;
}