/* فريق التصميم البصري (ب): التفاعل، الهاتف، درج التفاصيل، صفحة الأعمال
   المبدأ: كل فعل يجيب فورًا (ضغطة، وميض، حركة تشرح ما تغيّر)، بهدوء ودون ألوان جديدة. */

/* ─────────── استجابة لمسية فورية ─────────── */
.btn, .chip, .seg button, .qchip, .prog5 button, .tab, .tab-new, .tcard, .tasks-tbl tr.click, .date-btn { -webkit-tap-highlight-color: transparent; }
.btn:active, .chip:active, .qchip:active, .seg button:active, .prog5 button:active { transform: scale(.96); }
.is-pressed { animation: vb-press .28s var(--ease); }
@keyframes vb-press { 40% { transform: scale(.93); } }
.tasks-tbl tbody tr.click:active { background: var(--surface-3); }
.save-state.saved { animation: fade .3s var(--ease); }
details.fold[open] > .fold-b { animation: vb-unfold .24s var(--ease); }
@keyframes vb-unfold { from { opacity: 0; transform: translateY(-4px); } }

/* ─────────── انتقالات العرض (View Transitions) ─────────── */
@media (prefers-reduced-motion: no-preference) {
  /* بين الصفحات: المحتوى وحده يتبدّل، والإطار ثابت */
  html[data-vt="route"] .content { view-transition-name: page; }
  html[data-vt="route"]::view-transition-old(page) { animation: vb-out .12s ease-in both; }
  html[data-vt="route"]::view-transition-new(page) { animation: vb-in .34s var(--ease) both; }
  html[data-vt="route"]::view-transition-group(page) { animation-duration: .34s; }
  /* الدرج: ينزلق من الحافة، وعنوان العمل يطير من سطره إلى رأس الدرج */
  html[data-vt="drawer"] .drawer, html[data-vt="drawer"] .scrim { transition: none; }
  html[data-vt="drawer"] .drawer.on { view-transition-name: drawer; }
  html[data-vt="drawer"] .drawer.on .title-in { view-transition-name: task-hero; }
  ::view-transition-new(drawer):only-child { animation: vb-drawer-in .38s var(--ease) both; }
  ::view-transition-old(drawer):only-child { animation: vb-drawer-out .26s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-group(task-hero) { animation-duration: .38s; animation-timing-function: var(--ease); }
  ::view-transition-old(task-hero), ::view-transition-new(task-hero) { block-size: 100%; inline-size: auto; left: auto; right: 0; }
  ::view-transition-group(root) { animation-duration: .26s; }
}
@keyframes vb-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes vb-out { to { opacity: 0; } }
@keyframes vb-drawer-in { from { transform: translateX(-100%); } }
@keyframes vb-drawer-out { to { transform: translateX(-100%); } }

/* ─────────── درج التفاصيل ─────────── */
.drawer:focus, .drawer:focus-visible { outline: none; box-shadow: var(--sh-3); border-radius: 0; }
.drawer-h .row1 .org-badge { box-shadow: 0 0 0 1px var(--line); }

/* زر التاريخ: نص عربي «الخميس 8 أكتوبر»، والنقر يفتح المنتقي الأصلي */
.date-btn {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 36px; max-width: 100%; padding: 0 11px; border-radius: var(--r);
  font-weight: 500; font-size: var(--fs-ui); color: var(--ink); cursor: pointer; white-space: nowrap; transition: background .15s, box-shadow .15s;
}
.date-btn .i { color: var(--ink-4); }
.date-btn .dv { overflow: hidden; text-overflow: ellipsis; }
.date-btn:hover { background: var(--hover); }
.date-btn:focus-within { background: var(--field-bg); box-shadow: 0 0 0 1px var(--accent), var(--ring); }
.date-btn.is-empty .dv { color: var(--ink-3); font-weight: 400; }
.date-btn > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; appearance: none; font-size: 16px; }
.props .due-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 4px 0; }
.due-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qchips { display: flex; gap: 6px; flex-wrap: wrap; padding-inline-start: 6px; }
.qchip {
  position: relative; height: 28px; padding: 0 11px; border-radius: 99px; border: 1px dashed var(--line-2); background: transparent;
  color: var(--ink-2); font-size: var(--fs-xs); font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .12s var(--ease);
}
.qchip:hover { border-style: solid; border-color: var(--line-3); background: var(--surface); color: var(--ink); }
.qchip.on { border-style: solid; border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.dates-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 6px; width: 100%; padding: 4px 0; }
.dates-3 .d3 { display: flex; flex-direction: column; min-width: 0; }
.dates-3 .d3l { font-size: 12px; line-height: 1.4; color: var(--ink-3); padding-inline-start: 11px; }
.dates-3 .date-btn { height: 34px; font-size: 13.5px; }
.dates-3 .date-btn .i { display: none; }

/* الإنجاز: خمس شرائح فقط، تمتلئ حتى القيمة المختارة */
.prog5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; width: min(100%, 340px); padding: 3px; border-radius: var(--r); background: var(--surface-3); }
.prog5 button {
  position: relative; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-3); cursor: pointer;
  font-size: var(--fs-xs); font-weight: 500; font-variant-numeric: tabular-nums; transition: background .22s var(--ease), color .22s, box-shadow .22s, transform .12s var(--ease);
}
.prog5 button:hover { color: var(--ink); background: var(--surface); }
.prog5 button.fill { background: var(--accent-soft); color: var(--accent-ink); }
.prog5 button.on { background: var(--primary); color: var(--on-primary); box-shadow: 0 1px 2px rgba(41, 74, 109, .25); }
.prog5 button.on[data-prog="100"] { background: var(--green-ink); }

/* رابط العمل: حقل بارز، وزر «فتح» لا يعمل إلا مع رابط صالح */
.work-link { margin-top: 12px; padding: 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); transition: border-color .2s, background .2s; }
.work-link.ok { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.work-link > label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.work-link > label .i { color: var(--accent); }
.wl-row { display: flex; gap: 8px; }
.wl-row .input { flex: 1; min-width: 0; text-align: left; }
.wl-open { flex: none; }
.wl-open[aria-disabled] { opacity: .45; cursor: default; box-shadow: none; }
.wl-hint { margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-3); }
.wl-hint:empty { display: none; }

/* ملاحظات تنظيم البيانات: سطر خافت داخل الدرج، بلا لون إنذار */
.hints { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hints li { display: flex; align-items: flex-start; gap: 7px; font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-3); }
.hints .i { color: var(--ink-4); margin-top: 3px; }

/* البريف: مطوي، وسطره الأول ظاهر في العنوان */
details.fold.brief { border-bottom: 1px solid var(--line); }
details.fold.brief > summary .brief-peek { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
details.fold.brief .textarea { min-height: 150px; }

/* ─────────── صفحة الأعمال ─────────── */
.tasks-tbl .t-org { display: flex; align-items: flex-start; gap: 10px; }
.tasks-tbl .t-org .org-badge { margin-top: 1px; }
.tasks-tbl .t-org .tt { min-width: 0; }
.tasks-tbl tbody tr.is-current td { background: var(--accent-soft); }
.tasks-tbl tbody tr.is-current td:first-child { box-shadow: inset -3px 0 0 var(--accent); }
.tbl tbody tr.click:focus-visible { outline: none; box-shadow: none; }
.tbl tbody tr.click:focus-visible td { background: var(--surface-2); }
.tbl tbody tr.click:focus-visible td:first-child { box-shadow: inset -3px 0 0 var(--accent); }
.tasks-bar .f-more { display: contents; }
.tasks-bar .f-toggle { display: none; }
.f-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--primary); color: var(--on-primary); font-size: 11px; font-variant-numeric: tabular-nums; }
.f-n:empty { display: none; }
.tasks-bar #gateChip:empty { display: none; }

/* كانبان: سحب بالفأرة وباللمس (SortableJS) */
.col-list { display: flex; flex-direction: column; gap: 8px; min-height: 96px; border-radius: var(--r); }
.col-list .tcard { margin-bottom: 0; }
.col-list:has(.tcard) .col-empty { display: none; }
.board .tcard { user-select: none; -webkit-user-select: none; }
.tcard .top { min-width: 0; }
.tcard .top > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard.is-current { border-color: var(--accent-line); box-shadow: 0 0 0 2px var(--accent-soft); }
.tcard.is-chosen { box-shadow: var(--sh-2); }
.tcard.is-ghost { background: var(--accent-soft); border: 1.5px dashed var(--accent-line); box-shadow: none; }
.tcard.is-ghost > * { visibility: hidden; }
.tcard.is-drag { rotate: -2deg; scale: 1.03; opacity: 1 !important; box-shadow: var(--sh-3) !important; cursor: grabbing; }
.is-dragging .col { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.is-dragging .col.drop { box-shadow: inset 0 0 0 2px var(--accent-line); }
.tcard.flash { animation: vb-card-flash 1.4s ease-out; }
@keyframes vb-card-flash { 0%, 30% { background: var(--flash); } }

/* ─────────── شريط الهاتف السفلي ─────────── */
.tabbar { display: none; }

/* ─────────── اللمس: المعلومة ظاهرة، والأهداف لا تقل عن 44 بكسل ─────────── */
@media (hover: none) {
  .cell-edit .caret { opacity: .65; }
}
@media (pointer: coarse) {
  .qchip::after, .prog5 button::after { content: ''; position: absolute; inset: -7px -2px; }
  .qchip { height: 32px; padding: 0 13px; }
  .prog5 button { height: 36px; }
  .date-btn, .dates-3 .date-btn { height: 44px; }
  .drawer .props .pval > .select { height: 44px; }
  .drawer .input, .drawer .select, .drawer .textarea { font-size: 16px; }
  .drawer .btn.sm { height: 44px; }
  .drawer-h .btn.icon.sm { width: 44px; height: 44px; }
  /* خارج الدرج أيضًا: لا زر صغير ولا رقاقة دون 40 بكسل تحت الإصبع */
  .btn.sm, .chip, .risk-act { height: 40px; }
  .btn.icon.sm { width: 40px; }
  .btn.link { padding: 10px 8px; margin: -10px -8px; }
  .list-editor .tag { height: 36px; }
  .list-editor .tag button { width: 32px; height: 32px; }
  .seg button { height: 36px; }
}

/* ─────────── الهاتف (≤ 640) ─────────── */
@media (max-width: 640px) {
  .tabbar {
    position: fixed; z-index: 30; inset-inline: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--bg-glass); border-top: 1px solid var(--line);
    -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px);
  }
  .tab {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px;
    border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 11.5px; font-weight: 500; line-height: 1.3; cursor: pointer; text-decoration: none;
  }
  .tab .i { width: 22px; height: 22px; padding: 3px 16px; box-sizing: content-box; border-radius: 99px; transition: background .2s var(--ease), color .2s, transform .12s var(--ease); }
  .tab.on { color: var(--ink); }
  .tab.on .i { background: var(--accent-soft); color: var(--primary); }
  .tab:active .i { transform: scale(.9); }
  .tab-n {
    position: absolute; top: 0; left: calc(50% - 26px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
    background: var(--danger); color: var(--on-primary); font-size: 11px; font-weight: 600; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg);
  }
  .tab-new {
    justify-self: center; align-self: center; width: 54px; height: 54px; margin-top: -20px; border: 0; border-radius: 18px; display: grid; place-items: center;
    background: var(--primary); color: var(--on-primary); cursor: pointer; box-shadow: 0 10px 24px -8px rgba(41, 74, 109, .55), 0 0 0 5px var(--bg);
    transition: transform .12s var(--ease), background .15s;
  }
  .tab-new .i { width: 26px; height: 26px; }
  .tab-new:active { transform: scale(.92); background: var(--primary-hover); }
  /* القائمة و«عمل جديد» انتقلا إلى الشريط السفلي */
  .menu-btn, #newBtn { display: none !important; }
  .topbar { padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); }
  .content { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .toasts { left: 12px; right: 12px; bottom: calc(86px + env(safe-area-inset-bottom)); }
  .toast { max-width: none; }

  /* شريط الأدوات: بحث + أعمالي + تصفية، والباقي خلف زر واحد */
  .tasks-bar { gap: 8px; margin-bottom: 12px; }
  .tasks-bar .search { flex: 1 1 0; width: auto; min-width: 0; max-width: none; height: 44px; }
  .tasks-bar .search input { font-size: 16px; }
  .tasks-bar .chip.mine, .tasks-bar .f-toggle { height: 44px; padding: 0 14px; }
  .tasks-bar .f-toggle { display: inline-flex; }
  .tasks-bar #gateChip { flex-basis: 100%; }
  .tasks-bar #gateChip .chip { height: 40px; }
  .tasks-bar .f-more { display: none; }
  .tasks-bar.f-open .f-more {
    display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--surface); box-shadow: var(--sh-1); animation: vb-unfold .24s var(--ease);
  }
  .tasks-bar .f-more .select.sm { flex: 1 1 40%; min-width: 0; height: 44px; font-size: 16px; }
  .tasks-bar .f-more .chip, .tasks-bar .f-more .btn { height: 44px; }
  .tasks-bar .f-more .seg { flex: 1 1 100%; display: flex; }
  .tasks-bar .f-more .seg button { flex: 1; justify-content: center; height: 44px; }
  .tasks-bar .grow, .tasks-bar .count, .tasks-bar .export { display: none !important; }

  /* بطاقة العمل: العنوان، ثم المطلوب حاليًا، ثم المسؤول والموعد والحالة */
  .tasks-tbl thead { display: none; }
  .tasks-tbl, .tasks-tbl tbody { display: block; width: 100%; }
  .tasks-tbl tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title status" "act act" "owner due";
    gap: 8px 12px; align-items: center; padding: 14px 16px 8px; border-bottom: 1px solid var(--line);
  }
  .tasks-tbl tr:last-child { border-bottom: 0; }
  .tasks-tbl tr.group-row { display: block; padding: 0; }
  .tasks-tbl td, .tasks-tbl th { display: block; padding: 0 !important; border: 0 !important; min-width: 0 !important; max-width: none !important; }
  .tasks-tbl .group-row td { padding: 9px 16px !important; }
  .tasks-tbl td.rank, .tasks-tbl td.prog { display: none; }
  .tasks-tbl tr > td:nth-child(2) { grid-area: title; }
  .tasks-tbl tr > td:nth-child(3) { grid-area: owner; }
  .tasks-tbl tr > td:nth-child(4) { grid-area: due; justify-self: end; }
  .tasks-tbl tr > td:nth-child(5) { grid-area: status; justify-self: end; align-self: start; }
  .tasks-tbl tr > td:nth-child(4) .cell-edit { justify-content: flex-end; }
  .tasks-tbl tr > td:nth-child(6) { grid-area: act; }
  .tasks-tbl .t-org .tt > span { font-size: 15px; font-weight: 600; }
  .tasks-tbl .title small { max-width: none; }
  .tasks-tbl tbody tr.is-current td { background: transparent; }
  .tasks-tbl tbody tr.is-current { background: var(--accent-soft); }
  .tasks-tbl tbody tr.is-current td:first-child { box-shadow: none; }
  .tasks-tbl .cell-edit { min-height: 44px; margin: 0 -6px; }
  .tasks-tbl td:nth-child(5) .cell-edit { min-height: 32px; margin: -4px -6px 0; }
  .tasks-tbl td:nth-child(5) .cell-edit > select { inset: -6px -4px; height: auto; width: auto; } /* هدف لمس 44 دون تكبير الشارة */
  .tasks-tbl .cell-edit .who span { white-space: nowrap; }
  .tasks-tbl td.act .cell-text { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-sm); }
  .tasks-tbl td.act .cell-text.empty-val { color: var(--ink-3); }
  .tasks-tbl td.act .cell-input { height: 44px; font-size: 16px; }
  .board .tcard { padding: 13px 14px; }

  /* الدرج على الهاتف */
  .props { grid-template-columns: 96px minmax(0, 1fr); column-gap: 8px; }
  .props .pl .i { display: none; }
  .dates-3 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dates-3 .d3 { flex-direction: row; align-items: center; gap: 4px; }
  .dates-3 .d3l { flex: 0 0 52px; padding: 0; }
  .wl-open { min-width: 76px; }
  .drawer-h { padding-top: calc(12px + env(safe-area-inset-top)); }
  .drawer-b { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
}

/* ─────────── تقليل الحركة ─────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ─────────── درج العمل: شارات السجل الهادئة + «كرّر هذا العمل» ─────────── */
.ins-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ins-chips[hidden] { display: none; }
.drawer-h .btn[data-act=repeat] { gap: 6px; }
@media (max-width: 560px) { .drawer-h .rep-l { display: none; } }

/* ─────────── الإعدادات: وزن الأعمال ─────────── */
.wt-set { margin-top: 16px; }
.wt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 8px 24px; }
.wt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; }
.wt-n { font-size: var(--fs-ui); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-seg { flex: none; }
.wt-seg button { min-width: 56px; justify-content: center; }

/* ─────────── التقرير الأسبوعي: سطر تلقائي من السجل ─────────── */
.wk-auto { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 14px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-sm); color: var(--ink-2); }
.wk-auto[hidden] { display: none; }
.wk-auto .i { color: var(--ink-3); }
.wk-auto small { font-size: var(--fs-xs); }