/* ============ نوافذ التفاصيل والتقارير ============ */
.ent-modal .modal-head.ent-mh { align-items: flex-start; gap: 12px; }
.ent-head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; flex: 1; }
.ent-ht { min-width: 0; flex: 1; }
.ent-ht h3 { font-size: 16px; line-height: 1.4; margin: 0; overflow-wrap: anywhere; }
.ent-ht p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.ent-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.ent-av { width: 46px; height: 46px; font-size: 15px; flex: none; }
.ent-ic { width: 46px; height: 46px; border-radius: 12px; flex: none; }
.ent-ic .ic { width: 22px; height: 22px; }
.ent-modal .modal-foot { flex-wrap: wrap; align-items: center; }
.ent-modal .modal-foot .ent-sp { flex: 1; }
.ent-report.modal.wide { width: min(980px, 100%); }

/* مؤشرات صغيرة */
.ent-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 14px 0; }
.ent-tile { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ent-tile > span { font-size: 12px; color: var(--muted); }
.ent-tile > b { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.ent-tile > small { font-size: 11.5px; color: var(--muted); }
.ent-tile.info > b { color: var(--info); }
.ent-tile.warn > b { color: var(--warn); }
.ent-tile.bad > b { color: var(--bad); }
.ent-tile.bad { border-color: color-mix(in srgb, var(--bad) 35%, var(--border)); }

/* بيانات مفتاح ← قيمة */
.ent-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; font-size: 13px; margin: 6px 0 4px; }
.ent-kv > div > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.ent-kv > div > div { overflow-wrap: anywhere; }
.ent-mono { font-size: 11.5px; word-break: break-all; }

.ent-sec { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; margin: 20px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.ent-sec .ic { width: 16px; height: 16px; color: var(--primary); }
.ent-sec > span { flex: 1; }
.ent-sec em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px; padding: 0 8px; }
.ent-label { font-size: 12px; color: var(--muted); margin: 0 0 6px; }
.ent-empty { color: var(--muted); font-size: 13px; padding: 10px 0; }
.ent-bad { color: var(--bad); font-weight: 600; }
.ent-warn { color: var(--warn); font-weight: 600; }
.ent-neg { color: var(--bad); }
.ent-pct { font-size: 12px; min-width: 36px; text-align: end; }
.ent-end { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ent-btns { flex-wrap: wrap; margin-top: 10px; }
.ent-load { margin: 0 0 12px; font-size: 12.5px; }
.ent-load .bar { margin-top: 6px; }

/* عناصر قوائم قابلة للضغط */
.ent-list .li { padding-inline: 8px; margin-inline: -8px; border-radius: 10px; }
.ent-list .li.ent-click { cursor: pointer; transition: background .12s; }
.ent-list .li.ent-click:hover { background: var(--surface-2); }
.ent-list .li-ic, .ent-list .ent-ic { width: 32px; height: 32px; border-radius: 9px; }
.ent-list .ent-ic .ic { width: 16px; height: 16px; }
.ent-link { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; background: none; border: 0; padding: 0; font: inherit; color: var(--primary); cursor: pointer; text-align: start; }
.ent-link:hover > span:not(.tag):not(.avatar) { text-decoration: underline; }
.ent-link .tag { color: var(--muted); }

/* مراحل قابلة للضغط */
.ent-flow { margin-bottom: 4px; }
.ent-flow button.flow-step { font: inherit; font-size: 12.5px; cursor: pointer; transition: border-color .12s, color .12s; }
.ent-flow button.flow-step:hover { border-color: var(--primary); color: var(--primary); }
.ent-flow button.flow-step.past:hover { background: var(--primary-soft); }

/* الخط الزمني */
.ent-tl { display: flex; flex-direction: column; padding-top: 6px; }
.ent-tl-i { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; padding-bottom: 14px; align-items: start; }
.ent-tl-i::before { content: ''; position: absolute; inset-inline-start: 8px; top: 18px; bottom: 0; width: 2px; background: var(--border); }
.ent-tl-i:last-child { padding-bottom: 0; }
.ent-tl-i:last-child::before { display: none; }
.ent-tl-i > i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); margin-top: 1px; position: relative; z-index: 1; }
.ent-tl-i.done > i { background: var(--primary); border-color: var(--primary); }
.ent-tl-i.now > i { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.ent-tl-i.warn > i { background: var(--warn); border-color: var(--warn); }
.ent-tl-i.bad > i { background: var(--bad); border-color: var(--bad); }
.ent-tl-i b { display: block; font-size: 13px; font-weight: 600; }
.ent-tl-i.todo b { color: var(--muted); font-weight: 500; }
.ent-tl-i span { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.ent-tl-i time { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* إصدارات المخطط */
.ent-rev { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
.ent-rev.on { background: var(--primary); border-color: transparent; color: var(--primary-ink); }

/* رسالة تنبيه */
.ent-alert { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.ent-alert .ic { width: 16px; height: 16px; flex: none; }
.ent-alert.bad { background: var(--bad-soft); color: var(--bad); }
.ent-alert.info { background: var(--info-soft); color: var(--info); }

/* أعمدة الأشهر */
.ent-mbars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: end; margin-bottom: 4px; }
.ent-mbars button { background: none; border: 1px solid transparent; border-radius: 8px; padding: 4px 1px 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; font: inherit; color: var(--muted); }
.ent-mbars button:hover { background: var(--surface-2); }
.ent-mbars button.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.ent-mb { height: 64px; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.ent-mb i { width: 32%; max-width: 8px; border-radius: 3px 3px 0 0; background: var(--s1); }
.ent-mb i + i { background: var(--s2); }
.ent-mbars small { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ent-cmp { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.ent-cmp > div { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ent-cmp span { color: var(--muted); }

/* جداول التقارير */
.ent-rt table { font-size: 13px; }
.ent-rt th.ent-r, .ent-rt td.ent-r { text-align: end; white-space: nowrap; }
.ent-rt tr.ent-total td { font-weight: 700; background: var(--surface-2); border-top: 2px solid var(--border); }
.ent-rt tr.clickable { cursor: pointer; }
.ent-rt tr.clickable:hover td { background: var(--primary-soft); }

/* زر رجوع: السهم عكس اتجاه التقدّم */
.ent-back .ic-chev { transform: scaleX(-1); }
[dir="ltr"] .ent-back .ic-chev { transform: none; }

/* الدفع الإلكتروني */
.ent-pay.modal { width: min(500px, 100%); }
.ent-pay-amt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px; border-radius: 12px; background: linear-gradient(135deg, var(--primary-soft), var(--surface-2)); border: 1px solid var(--border); margin-bottom: 14px; }
.ent-pay-amt span { font-size: 12.5px; color: var(--muted); }
.ent-pay-amt b { font-size: 26px; font-weight: 700; }
.ent-pay-ms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ent-pay-m { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; transition: border-color .12s, background .12s; min-width: 0; }
.ent-pay-m .ic { width: 22px; height: 22px; color: var(--muted); }
.ent-pay-m b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ent-pay-m:hover { border-color: var(--primary); }
.ent-pay-m.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.ent-pay-m.on .ic { color: var(--primary); }
.ent-pay-hint { font-size: 12.5px; color: var(--muted); margin: 10px 0 12px; min-height: 20px; }
.ent-pay-sum { padding-top: 10px; border-top: 1px dashed var(--border); }
.ent-pay-run { display: flex; align-items: center; gap: 18px; padding: 18px 4px; }
.ent-spin { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--primary); animation: ent-spin .8s linear infinite; }
@keyframes ent-spin { to { transform: rotate(360deg); } }
.ent-pay-step { color: var(--faint); transition: color .25s; font-size: 13.5px; }
.ent-pay-step .ic { width: 16px; height: 16px; opacity: .35; }
.ent-pay-step.on { color: var(--ok); }
.ent-pay-step.on .ic { opacity: 1; }
.ent-pay-ok { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px 0 16px; }
.ent-pay-ok h3 { font-size: 18px; margin: 4px 0 0; }
.ent-pay-ok p { margin: 0; font-size: 13px; }
.ent-pay-check { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); animation: ent-pop .45s cubic-bezier(.2, 1.4, .4, 1); box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok-soft) 60%, transparent); }
.ent-pay-check .ic { width: 32px; height: 32px; stroke-width: 2.6; }
@keyframes ent-pop { from { transform: scale(.3); opacity: 0; } }

@media (max-width: 640px) {
  .ent-kv { grid-template-columns: minmax(0, 1fr); }
  .ent-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ent-av, .ent-ic { width: 40px; height: 40px; }
  .ent-modal .modal-body { padding: 14px 16px; }
  .ent-modal .modal-head, .ent-modal .modal-foot { padding-inline: 16px; }
  .ent-cmp > div { grid-template-columns: 64px minmax(0, 1fr); }
  .ent-cmp b { grid-column: 2; }
  .ent-mbars { gap: 2px; }
  .ent-mbars small { font-size: 9px; }
  .ent-tl-i { grid-template-columns: 18px minmax(0, 1fr); }
  .ent-tl-i time { grid-column: 2; }
}