/* UXPOLISH_CSS_V1 (2026-09-05) — البنية الأساسية للمكوّنات التي يبنيها ux_polish.js
   (رأس المهمة، التنقّل السريع، فواصل الأيام، الحالة الفارغة). مستقلة عن الثيم:
   الأبعاد والتخطيط هنا، والألوان عبر متغيّرات --uxp-* بقيم فاتحة افتراضية
   يعيد الثيم الداكن تعريفها (theme-v2.css). فلا يظهر مكوّن عاريًا في أي ثيم. */
:root {
  --uxp-ink: #16283E;
  --uxp-muted: #64748B;
  --uxp-faint: #94A3B8;
  --uxp-surface: #FFFFFF;
  --uxp-surface-2: #F6F8FC;
  --uxp-border: #E4E8F2;
  --uxp-border-strong: #D3DAE8;
  --uxp-brand: #0F4C81;
  --uxp-brand-soft: #EAF1F8;
  --uxp-accent: #0EB8A6;
  --uxp-danger: #D92D20;
  --uxp-warn: #8A4E05;
  --uxp-ok: #12996B;
}

/* ── رأس المهمة ── */
.uxt-hero { padding: 14px 20px 0; border-bottom: 1px solid var(--uxp-border); margin-bottom: 4px; color: var(--uxp-ink); }
.uxt-hero-main { display: flex; flex-direction: column; gap: 10px; }
.uxt-title { margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; color: var(--uxp-ink); text-wrap: balance; }
.uxt-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.uxt-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 999px;
  background: var(--uxp-surface-2); border: 1px solid var(--uxp-border); color: var(--uxp-ink);
  font-size: 12.5px; font-weight: 600; line-height: 1.2; text-decoration: none; font-family: inherit; cursor: default;
}
.uxt-chip img { width: 20px !important; height: 20px !important; border-radius: 50%; object-fit: cover; flex: none; }
a.uxt-chip:hover { border-color: var(--uxp-brand); color: var(--uxp-brand); }
.uxt-status { cursor: pointer; background: var(--uxt-c, var(--uxp-muted)); color: var(--ui-on-solid, #FFFFFF); border-color: transparent; }
.uxt-status:hover { filter: brightness(1.08); }
.uxt-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.85); }
.uxt-due.is-late { background: rgba(217,45,32,.12); color: var(--uxp-danger); border-color: rgba(217,45,32,.30); }
.uxt-due.is-soon { background: rgba(217,126,15,.14); color: var(--uxp-warn); border-color: rgba(217,126,15,.35); }
.uxt-due.is-ok { background: rgba(18,153,107,.12); color: var(--uxp-ok); border-color: rgba(18,153,107,.28); }
.uxt-label { background: var(--uxp-brand-soft); color: var(--uxp-brand); border-color: transparent; }

/* ── التنقّل السريع ── */
.uxt-nav { display: flex; gap: 2px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.uxt-nav::-webkit-scrollbar { display: none; }
.uxt-nav a {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 9px 12px;
  color: var(--uxp-muted); font-size: 13.5px; font-weight: 600; border-bottom: 2px solid transparent;
  text-decoration: none; margin-bottom: -1px;
}
.uxt-nav a b { font-weight: 700; font-size: 11.5px; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--uxp-brand-soft); color: var(--uxp-brand); text-align: center; }
.uxt-nav a:hover { color: var(--uxp-brand); border-bottom-color: var(--uxp-border-strong); }
.uxt-has-hero .page-title h1 { font-size: 13px; font-weight: 600; color: var(--uxp-muted); }
.uxt-has-hero .task-title-left { display: none; }
.uxt-hero.uxt-in-modal { padding-top: 4px; }

/* ── التعليقات ── */
.comment-highlight-section { position: relative; }
.uxt-day { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; color: var(--uxp-muted); font-size: 12px; font-weight: 600; }
.uxt-day::before, .uxt-day::after { content: ''; flex: 1; height: 1px; background: var(--uxp-border); }
.uxt-day span { padding: 2px 10px; border-radius: 999px; background: var(--uxp-surface-2); }
.comment-highlight-section.uxt-mine > .comment-container { background: rgba(14,184,166,.07); border-inline-start: 3px solid var(--uxp-accent); border-radius: 0 10px 10px 0; }
.uxt-hint { font-size: 11.5px; color: var(--uxp-faint); padding: 4px 6px 0; text-align: left; direction: rtl; }

/* ── الحالة الفارغة ── */
.uxp-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%; text-align: center; }
.uxp-empty .uxp-empty-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--uxp-brand-soft); color: var(--uxp-brand); display: grid; place-items: center; font-size: 22px; }
.uxp-empty .uxp-empty-t { color: var(--uxp-ink); font-weight: 600; }
.uxp-empty .uxp-empty-s { color: var(--uxp-muted); font-size: 13px; }
.uxp-empty .uxp-empty-cta { margin-top: 4px; }

@media (min-width: 992px) {
  .task-view-modal-body .col-lg-4.order-lg-last { position: sticky; top: 8px; align-self: flex-start; max-height: calc(100vh - 24px); overflow-y: auto; scrollbar-width: thin; }
}
@media (max-width: 767px) {
  .uxt-title { font-size: 19px; }
  .uxt-nav { mask-image: linear-gradient(to left, var(--ui-text, #000) 88%, transparent); -webkit-mask-image: linear-gradient(to left, var(--ui-text, #000) 88%, transparent); padding-inline-end: 8px; }
}

/* ── UXPOLISH_FILES (الجولة 3): مرفق غير صوري داخل التعليق كان صندوقًا رماديًا 250px بأيقونة عملاقة — يصير بطاقة مدمجة ── */
.timeline-images .file-mockup.optg-file-mockup,
.timeline-images .file-mockup { width: 150px !important; height: 104px !important; min-height: 0 !important; padding: 10px !important; display: grid; place-items: center; border-radius: 10px; }
.timeline-images .file-mockup svg, .timeline-images .file-mockup i { width: 34px !important; height: 34px !important; }
.timeline-images .optg-file-ext-badge { font-size: 10px; }