/* ═══ Dashboards v3 — BI Canvas (تبويبات + شبكة 12 عمود + ثيم رسوم موحّد) ═══ */

/* ── جيل واحد: إخفاء كل القديم في لوحة التحكم للأدوار الأربعة ── */
body.dv2-hr #page-dashboard > :not(#dv2-hr),
body.dv2-sysadmin #page-dashboard > :not(#dv2-sys),
body.dv2-manager #page-dashboard > :not(#mgr-dashboard),
body.dv2-manager #mgr-dashboard > :not(#dv2-manager),
body.dv2-finance #page-dashboard > :not(#fin-dashboard),
body.dv2-finance #fin-dashboard > :not(#dv2-finance) { display: none !important; }
body.dv2-employee #page-dashboard > :not(#dv2-employee) { display: none !important; }
body.dv2-manager #mgr-dashboard, body.dv2-finance #fin-dashboard { display: block !important; }

/* ── الكانفس ── */
.dv2c { background: #F4F6F9; border-radius: 16px; padding: 12px; margin: 2px 0 18px;
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', 'Segoe UI', sans-serif; }
.dv2c, .dv2c * { box-sizing: border-box; }
.dv2c .num, .dv2c table td, .dv2c .dv2-kpi-val { font-variant-numeric: tabular-nums; }

/* ── الحركة (DNA حركة barezz.com: دخول متدرج + نمو + lift) ── */
@keyframes dv2in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes dv2grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dv2chip { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dv2-cell { animation: dv2in .5s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
.dv2-insight { animation: dv2chip .4s ease-out both; }
.dv2-insight:nth-child(2) { animation-delay: 90ms; }
.dv2-bar-fill, .dv2-bt-fill, .dv2-fn-bar, .dv2-target-fill {
  transform-origin: right; animation: dv2grow .7s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--i, 0) * 55ms + 180ms);
}
.dv2-card { transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; }
.dv2-card:hover { box-shadow: 0 6px 20px rgba(16,24,40,.09); border-color: #D8E0E9; }
.dv2-clickable:hover, .dv2-kpi.dv2-clickable:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(16,24,40,.12); }
.dv2-pulse-row, .dv2-bt-row, .dv2-action { transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.dv2-bt-row:hover { background: #F8FAFC; }
.dv2-tab { transition: all .2s cubic-bezier(.16,1,.3,1); }
.dv2-tab.on { background: linear-gradient(135deg, #1a2847 0%, #27406B 100%); box-shadow: 0 3px 10px rgba(26,40,71,.28); }
.dv2-cta { transition: background .15s ease, transform .12s ease; }
.dv2-cta:active { transform: scale(.95); }
@media (prefers-reduced-motion: reduce) {
  .dv2-cell, .dv2-insight, .dv2-bar-fill, .dv2-bt-fill, .dv2-fn-bar, .dv2-target-fill { animation: none !important; }
  .dv2-card, .dv2-clickable, .dv2-tab, .dv2-cta { transition: none !important; }
}
/* التحديث الحي الصامت: لا حركة دخول إطلاقاً (الأرقام تعدّ من قيمتها السابقة فقط) */
.dv2-nofx .dv2-cell, .dv2-nofx .dv2-insight, .dv2-nofx .dv2-bar-fill,
.dv2-nofx .dv2-bt-fill, .dv2-nofx .dv2-fn-bar, .dv2-nofx .dv2-target-fill { animation: none !important; }

/* ── مودال drill: دخول scale+fade ── */
@keyframes dv2modal { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
.dv2-drill { animation: dv2modal .22s cubic-bezier(.16,1,.3,1) both; }
.dv2-drill-bg { animation: dv2chip .18s ease-out both; }

/* ── الوضع الداكن (الكانفس فقط — لا يلمس بقية النظام) ── */
body.dv2-dark .dv2c { background: #0F1522; }
body.dv2-dark .dv2-card { background: #161D2E; border-color: #243049; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
body.dv2-dark .dv2-card:hover { border-color: #31415F; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
body.dv2-dark .dv2-card-h { color: #E6EBF3; }
body.dv2-dark .dv2-kpi-val { color: #F1F5FA; }
body.dv2-dark .dv2-kpi-lbl, body.dv2-dark .dv2-card-h .sub { color: #8FA0B8; }
body.dv2-dark .dv2-topbar { background: rgba(15,21,34,.92); }
body.dv2-dark .dv2-tab { background: #161D2E; border-color: #243049; color: #B9C5D6; }
body.dv2-dark .dv2-tab:hover { border-color: #4A9DEC; }
body.dv2-dark .dv2-filt input, body.dv2-dark .dv2-filt select,
body.dv2-dark .dv2-filt .dv2-reload { background: #161D2E; border-color: #243049; color: #D7DFEA; }
body.dv2-dark .dv2-bar-track, body.dv2-dark .dv2-bt-bar, body.dv2-dark .dv2-target-bar { background: #243049; }
body.dv2-dark .dv2-bar-lbl, body.dv2-dark .dv2-pulse-lbl { color: #B9C5D6; }
body.dv2-dark .dv2-bar-val, body.dv2-dark .dv2-bt-val, body.dv2-dark .dv2-pulse-val,
body.dv2-dark .dv2-strip-num { color: #E6EBF3; }
body.dv2-dark .dv2c table.dv2-tbl th { background: #161D2E; border-color: #243049; }
body.dv2-dark .dv2c table.dv2-tbl td { color: #C4CFDD; border-color: #1E2940; }
body.dv2-dark .dv2-pulse-row, body.dv2-dark .dv2-action { background: #1B2336; }
body.dv2-dark .dv2-pulse-row:hover, body.dv2-dark .dv2-bt-row:hover { background: #20294013; background: #202940; }
body.dv2-dark .dv2-strip-day { background: #1B2336; border-color: #243049; }
body.dv2-dark .dv2-strip-day.wknd { background: #131A29; }
body.dv2-dark .dv2-heat-cell { background: #1B2336; color: #C4CFDD; }
body.dv2-dark .dv2-heat-head { background: none; }
body.dv2-dark .dv2-skel { background: linear-gradient(90deg,#1B2336 25%,#222C44 50%,#1B2336 75%); background-size: 200% 100%; }
body.dv2-dark .dv2-empty { color: #5D6F89; }
body.dv2-dark .dv2-drill { background: #161D2E; }
body.dv2-dark .dv2-drill-h { color: #E6EBF3; border-color: #243049; }
/* النصوص المظلمة المكتوبة inline داخل المكوّنات (كحلي/رمادي غامق) → فاتحة */
body.dv2-dark .dv2c [style*="color:#1a2332"], body.dv2-dark .dv2c [style*="color: #1a2332"],
body.dv2-dark .dv2c .who { color: #E6EBF3 !important; }
body.dv2-dark .dv2c [style*="color:#475569"], body.dv2-dark .dv2c .what { color: #A6B4C8 !important; }
body.dv2-dark .dv2c .dv2-bt-name { color: #E6EBF3; }
body.dv2-dark .dv2-action.sev-red { background: #2A1A1E; }
body.dv2-dark .dv2-action.sev-amber { background: #292113; }
body.dv2-dark .dv2-insight.red { background: #2A1A1E; border-color: #4A2329; color: #F1A8A8; }
body.dv2-dark .dv2-insight.amber { background: #292113; border-color: #4A3A18; color: #F4CB76; }
body.dv2-dark .dv2-insight.info { background: #14233D; border-color: #1F3A66; color: #9CC4F5; }
body.dv2-dark .dv2-note { background: #292113; border-color: #4A3A18; color: #F4CB76; }
/* إضافات v5.1 في الوضع الداكن: رقائق الاتجاه + إشارة حالة KPI + النبض */
body.dv2-dark .dv2-kpi-delta.good { background: #11271F; color: #7FE3BD; }
body.dv2-dark .dv2-kpi-delta.bad  { background: #2A1A1E; color: #F1A8A8; }
body.dv2-dark .dv2-kpi.s-bad::before  { background: linear-gradient(180deg, rgba(214,59,59,.14), transparent); }
body.dv2-dark .dv2-kpi.s-warn::before { background: linear-gradient(180deg, rgba(245,158,11,.13), transparent); }
body.dv2-dark .dv2-pulse-row { background: #1B2336; border-color: #243049; }
body.dv2-dark .dv2-pulse-row:hover { background: #202940; border-color: #31415F; }
body.dv2-dark .dv2-pulse-dot { box-shadow: 0 0 0 3px rgba(143,160,184,.12); }
body.dv2-dark .dv2-pulse-row.sev-red { background: #2A1A1E; border-color: #4A2329; border-inline-start-color: #D63B3B; }
body.dv2-dark .dv2-pulse-row.sev-amber { background: #292113; border-color: #4A3A18; border-inline-start-color: #F59E0B; }
body.dv2-dark .dv2-pulse-row.sev-red .dv2-pulse-val { color: #F1A8A8; }
body.dv2-dark .dv2-pulse-row.sev-amber .dv2-pulse-val { color: #F4CB76; }

/* ── الشريط العلوي المثبّت: تبويبات + فلاتر ── */
.dv2-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgba(244,246,249,.92); backdrop-filter: blur(6px);
  padding: 6px 2px 10px; margin-bottom: 4px;
}
.dv2-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.dv2-tab {
  border: 1px solid #E0E6ED; background: #fff; color: #475569;
  border-radius: 10px; padding: 7px 14px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: all .15s; white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
.dv2-tab i { width: 14px; height: 14px; }
.dv2-tab:hover { border-color: #1a2847; }
.dv2-tab.on { background: #1a2847; color: #fff; border-color: #1a2847; }
.dv2-tab.on i { color: var(--gold-light, #f0d498); }
.dv2-filt { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; flex-wrap: wrap; }
.dv2-filt input[type="month"], .dv2-filt select {
  border: 1px solid #E0E6ED; border-radius: 9px; padding: 6px 9px;
  font-size: 12px; font-family: inherit; color: #1a2332; background: #fff;
}
.dv2-filt .dv2-reload {
  background: #fff; color: #1a2847; border: 1px solid #E0E6ED; border-radius: 9px;
  padding: 6px 11px; font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: border-color .15s;
}
.dv2-filt .dv2-reload:hover { border-color: #1a2847; }

/* ── منتقي الشهر المخصّص ── */
.dv2-mp { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #E0E6ED; border-radius: 9px;
  background: #fff; color: #1a2332; font-family: inherit; font-size: 12.5px; font-weight: 800;
  padding: 6px 11px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.dv2-mp:hover { border-color: #1a2847; box-shadow: 0 2px 8px rgba(16,24,40,.08); }
.dv2-mp > i:first-child { width: 14px; height: 14px; color: #C8973E; }
.dv2-mp .cv { width: 13px; height: 13px; color: #94A3B8; }
.dv2-mp-pop { position: absolute; z-index: 1200; background: #fff; border: 1px solid #E4EAF3; border-radius: 14px;
  box-shadow: 0 20px 54px -18px rgba(15,23,42,.42); padding: 12px; width: 250px;
  animation: dv2in .16s cubic-bezier(.16,1,.3,1) both; }
.dv2-mp-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dv2-mp-y { font-weight: 900; font-size: 15.5px; color: #1a2332; font-variant-numeric: tabular-nums; }
.dv2-mp-nav { width: 30px; height: 30px; border-radius: 8px; border: 1px solid #E4EAF3; background: #F8FAFC;
  color: #1a2847; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .13s; }
.dv2-mp-nav:hover { background: #EEF2F6; }
.dv2-mp-nav i { width: 16px; height: 16px; }
.dv2-mp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dv2-mp-m { padding: 9px 4px; border-radius: 9px; border: 1px solid #EEF2F6; background: #fff; color: #334155;
  font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .12s; }
.dv2-mp-m:hover { background: #F4F8FC; border-color: #C9D6E2; transform: translateY(-1px); }
.dv2-mp-m.cur { border-color: #BF9000; color: #8a6d00; }
.dv2-mp-m.sel { background: linear-gradient(135deg, #1F4E79, #14365B); color: #fff; border-color: #1F4E79; box-shadow: 0 6px 14px -6px rgba(31,78,121,.5); }
/* الوضع الداكن */
body.dv2-dark .dv2-mp { background: #161D2E; border-color: #243049; color: #D7DFEA; }
.dv2-mp-pop.dv2-dark { background: #161D2E; border-color: #243049; }
.dv2-mp-pop.dv2-dark .dv2-mp-y { color: #E6EBF3; }
.dv2-mp-pop.dv2-dark .dv2-mp-nav { background: #1B2336; border-color: #243049; color: #D7DFEA; }
.dv2-mp-pop.dv2-dark .dv2-mp-m { background: #161D2E; border-color: #243049; color: #C4CFDD; }
.dv2-mp-pop.dv2-dark .dv2-mp-m:hover { background: #202940; }
.dv2-mp-pop.dv2-dark .dv2-mp-m.cur { color: #E3B341; border-color: #6b5410; }

/* ── سطر الاستنتاجات الذكية ── */
.dv2-insights { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.dv2-insight {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700;
  border-radius: 10px; padding: 8px 13px; cursor: default; border: 1px solid transparent;
}
.dv2-insight.red   { background: #FDF1F0; color: #9B2226; border-color: #F5CFCB; }
.dv2-insight.amber { background: #FFF8EB; color: #92400E; border-color: #F8E3B5; }
.dv2-insight.info  { background: #EFF6FF; color: #1E40AF; border-color: #D6E6FB; }
.dv2-insight i { width: 14px; height: 14px; flex-shrink: 0; }
.dv2-note {
  font-size: 12px; color: #92400E; background: #FFF8EB; border: 1px solid #F8E3B5;
  border-radius: 9px; padding: 6px 12px; margin-bottom: 10px; display: inline-block; font-weight: 700;
}

/* ── الشبكة 12 عمود ── */
.dv2-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 96px; gap: 12px; grid-auto-flow: dense;
}
.dv2-cell { grid-column: span 3; grid-row: span 1; min-width: 0; }
.c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; }
.c5 { grid-column: span 5; } .c6 { grid-column: span 6; } .c8 { grid-column: span 8; }
.c12 { grid-column: span 12; }
.r1 { grid-row: span 1; } .r2 { grid-row: span 2; } .r3 { grid-row: span 3; } .r4 { grid-row: span 4; }

/* ── البطاقة ── */
.dv2-card {
  background: #fff; border: 1px solid #E5EAF0; border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16,24,40,.06); padding: 12px 14px;
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
}
.dv2-card-h {
  display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800;
  color: #1a2847; margin-bottom: 8px; flex-shrink: 0;
}
.dv2-card-h i { width: 15px; height: 15px; color: #C8973E; }
.dv2-card-h .sub { font-size: 11px; color: #94A3B8; font-weight: 600; margin-inline-start: auto; white-space: nowrap; }
.dv2-card-b { flex: 1; min-height: 0; overflow-y: auto; }
.dv2-card-b.center { display: flex; align-items: center; justify-content: center; }
.dv2-card-b::-webkit-scrollbar { width: 4px; }
.dv2-card-b::-webkit-scrollbar-thumb { background: #E0E6ED; border-radius: 4px; }
.dv2-clickable { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.dv2-clickable:hover { box-shadow: 0 4px 14px rgba(16,24,40,.1); transform: translateY(-1px); }

/* ── بطاقة KPI ── */
.dv2-kpi { position: relative; }
.dv2-kpi-lbl { font-size: 11px; color: #64748B; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.dv2-kpi-lbl i { width: 13px; height: 13px; color: #C8973E; flex-shrink: 0; }
.dv2-kpi-val { font-size: 28px; font-weight: 800; color: #1a2332; line-height: 1.15; margin-top: 3px; letter-spacing: -.5px; }
.dv2-kpi-val .u { font-size: 13px; color: #94A3B8; font-weight: 700; }
.dv2-kpi-delta { font-size: 11px; font-weight: 800; margin-top: 3px; display: flex; align-items: center; gap: 4px; min-height: 14px; }
.dv2-kpi-delta.flat { color: #94A3B8; }
/* رقائق الاتجاه: خلفية ملوّنة تُقرأ بلمحة (صعود/هبوط عن الشهر الماضي) */
.dv2-kpi-delta.good, .dv2-kpi-delta.bad { width: max-content; max-width: 100%; align-self: flex-start;
  padding: 1.5px 8px; border-radius: 7px; }
.dv2-kpi-delta.good { color: #0F7A55; background: #E5F8F1; }
.dv2-kpi-delta.bad  { color: #B82A2A; background: #FDECEA; }
.dv2-target { margin-top: 6px; }
.dv2-target-bar { height: 5px; border-radius: 4px; background: #EEF2F6; overflow: hidden; position: relative; }
.dv2-target-fill { height: 100%; border-radius: 4px; }
.dv2-target-lbl { font-size: 10px; color: #94A3B8; margin-top: 3px; font-weight: 600; }
.dv2-spark { position: absolute; bottom: 0; left: 0; right: 0; height: 30px; opacity: .45; pointer-events: none; }
/* إشارة قرار: حدّ علوي + تدرّج خفيف يميّز حالة المؤشر فوراً */
.dv2-kpi.s-bad  { border-top: 2.5px solid #D63B3B; }
.dv2-kpi.s-warn { border-top: 2.5px solid #F59E0B; }
.dv2-kpi.s-good { border-top: 2px solid #16B582; }
.dv2-kpi.s-bad::before, .dv2-kpi.s-warn::before { content: ""; position: absolute; inset: 0 0 auto 0;
  height: 38px; border-radius: 11px 11px 0 0; pointer-events: none; z-index: 0; }
.dv2-kpi.s-bad::before  { background: linear-gradient(180deg, rgba(214,59,59,.08), transparent); }
.dv2-kpi.s-warn::before { background: linear-gradient(180deg, rgba(245,158,11,.08), transparent); }
.dv2-kpi > * { position: relative; z-index: 1; }

/* ── أشرطة أفقية بقيمة مباشرة ── */
.dv2-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.dv2-bar-lbl { width: 105px; color: #475569; font-weight: 700; flex-shrink: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv2-bar-track { flex: 1; height: 14px; background: #F1F5F9; border-radius: 7px; overflow: hidden; }
.dv2-bar-fill { height: 100%; border-radius: 7px; background: #1a2847; min-width: 2px; }
.dv2-bar-val { min-width: 52px; text-align: left; color: #1a2332; font-weight: 800; font-size: 11.5px; white-space: nowrap; }

/* ── bar-in-table ── */
.dv2-bt { width: 100%; font-size: 12px; }
.dv2-bt-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #F5F7FA; cursor: pointer; }
.dv2-bt-row:last-child { border-bottom: none; }
.dv2-bt-name { flex: 1; min-width: 0; font-weight: 700; color: #1a2332; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv2-bt-meta { font-size: 11px; color: #94A3B8; white-space: nowrap; }
.dv2-bt-bar { width: 76px; height: 10px; background: #F1F5F9; border-radius: 5px; overflow: hidden; flex-shrink: 0; }
.dv2-bt-fill { height: 100%; border-radius: 5px; }
.dv2-bt-val { min-width: 46px; text-align: left; font-weight: 800; font-size: 11.5px; white-space: nowrap; }

/* ── القمع ── */
.dv2-funnel { display: flex; flex-direction: column; gap: 2px; }
.dv2-fn-row { display: flex; align-items: center; gap: 8px; }
.dv2-fn-lbl { width: 64px; font-size: 11.5px; font-weight: 700; color: #475569; flex-shrink: 0; }
.dv2-fn-wrap { flex: 1; }
.dv2-fn-bar { height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 800; min-width: 44px; transition: width .4s; }
.dv2-fn-conv { font-size: 10.5px; color: #94A3B8; font-weight: 700; padding: 1px 0 3px 0; margin-inline-start: 72px; }
.dv2-fn-conv b { color: #1a2847; }

/* ── heatmap ── */
.dv2-heat { display: grid; gap: 3px; font-size: 11px; }
.dv2-heat-cell { border-radius: 5px; text-align: center; padding: 5px 2px; font-weight: 800;
  color: #1a2332; background: #F6F8FA; min-width: 0; }
.dv2-heat-head { background: none; color: #94A3B8; font-weight: 700; padding: 2px; font-size: 10px; }

/* ── شريط التغطية ── */
.dv2-strip { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.dv2-strip-day { text-align: center; border: 1px solid #EEF2F6; border-radius: 8px;
  padding: 5px 2px 4px; background: #FBFCFE; position: relative; }
.dv2-strip-day.has { background: #FFF7ED; border-color: #FED7AA; }
.dv2-strip-day.heavy { background: #FFF1F0; border-color: #FDA4A4; }
.dv2-strip-day.wknd { background: #F4F6F9; opacity: .7; }
.dv2-strip-dow { font-size: 9px; color: #94A3B8; font-weight: 700; }
.dv2-strip-num { font-size: 12.5px; font-weight: 800; color: #1a2332; }
.dv2-strip-cnt { font-size: 9.5px; font-weight: 800; color: #B45309; min-height: 12px; }
.dv2-strip-day[data-names]:hover::after {
  content: attr(data-names); position: absolute; bottom: calc(100% + 6px); right: 0;
  background: #1a2332; color: #fff; font-size: 11px; padding: 6px 10px;
  border-radius: 8px; white-space: pre; z-index: 60; min-width: 110px; text-align: right;
}

/* ── donuts مصغّرة (العهد) ── */
.dv2-minidonuts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-around; align-items: center; height: 100%; }
.dv2-md { text-align: center; }
.dv2-md-lbl { font-size: 11px; font-weight: 700; color: #475569; margin-top: 4px; }
.dv2-md-sub { font-size: 10px; color: #94A3B8; }

/* ── قوائم الأفعال/الاعتماد ── */
.dv2-action { display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  border-radius: 9px; margin-bottom: 6px; border-inline-start: 3px solid #CBD5E1;
  background: #FAFBFD; font-size: 12.5px; }
.dv2-action.sev-red { border-inline-start-color: #D63B3B; background: #FFF7F7; }
.dv2-action.sev-amber { border-inline-start-color: #F59E0B; background: #FFFAF0; }
.dv2-action .who { font-weight: 800; color: #1a2332; }
.dv2-action .what { color: #475569; }
.dv2-cta { background: rgba(26,40,71,.06); color: #1a2847; border: 1px solid rgba(26,40,71,.14);
  border-radius: 8px; padding: 3px 11px; font-size: 11.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; white-space: nowrap; transition: background .15s; }
.dv2-cta:hover { background: rgba(26,40,71,.13); }
.dv2-cta.ok { background: #E5F8F1; color: #0F7A55; border-color: #B9EBD8; }
.dv2-cta.no { background: #FDECEA; color: #B82A2A; border-color: #F6C9C5; }

/* ── chips ── */
.dv2-chip { display: inline-block; padding: 2px 9px; border-radius: 7px; font-size: 10.5px; font-weight: 800; }
.dv2-chip.gray { background: #F1F5F9; color: #475569; }
.dv2-chip.green { background: #E5F8F1; color: #0F7A55; }
.dv2-chip.amber { background: #FEF3C7; color: #92400E; }
.dv2-chip.red { background: #FDECEA; color: #B82A2A; }
.dv2-chip.blue { background: #E4EFFE; color: #1745A8; }

/* ── الجداول ── */
.dv2c table.dv2-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.dv2c table.dv2-tbl th { font-size: 10.5px; color: #94A3B8; font-weight: 700; text-align: right;
  padding: 4px 8px; border-bottom: 1px solid #EEF2F6; position: sticky; top: 0; background: #fff; }
.dv2c table.dv2-tbl td { padding: 6px 8px; border-bottom: 1px solid #F5F7FA; color: #334155; }
.dv2c table.dv2-tbl tr:last-child td { border-bottom: none; }

/* ── نبض/حالة ── */
.dv2-pulse-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border-radius: 10px; margin-bottom: 6px; background: #FAFBFD; cursor: pointer;
  border: 1px solid #EEF2F6; transition: border-color .15s, background .15s, transform .15s; font-size: 12.5px; }
.dv2-pulse-row:hover { border-color: #C9D6E2; background: #F3F8FC; transform: translateX(-2px); }
/* صفوف عاجلة في النبض: خلفية + حدّ جانبي بالخطورة */
.dv2-pulse-row.sev-red { background: #FFF6F6; border-color: #F6D4D1; border-inline-start: 3px solid #D63B3B; }
.dv2-pulse-row.sev-amber { background: #FFFAF0; border-color: #F6E2BB; border-inline-start: 3px solid #F59E0B; }
.dv2-pulse-row.sev-red:hover { background: #FFEEEC; }
.dv2-pulse-row.sev-amber:hover { background: #FFF4E0; }
.dv2-pulse-row.sev-red .dv2-pulse-val { color: #B82A2A; }
.dv2-pulse-row.sev-amber .dv2-pulse-val { color: #B45309; }
.dv2-pulse-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(148,163,184,.13); }
.dv2-pulse-lbl { font-weight: 700; color: #1a2332; min-width: 0; }
.dv2-pulse-val { margin-inline-start: auto; font-weight: 800; font-size: 13px; color: #1a2332; white-space: nowrap; }

/* ── skeleton / empty ── */
.dv2-skel { border-radius: 12px; background: linear-gradient(90deg,#EAEEF3 25%,#F5F7FA 50%,#EAEEF3 75%);
  background-size: 200% 100%; animation: dv2sh 1.2s infinite; height: 100%; }
@keyframes dv2sh { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .dv2-skel { animation: none; } }
.dv2-empty { text-align: center; color: #94A3B8; font-size: 12px; padding: 14px 8px; }

/* ── drill modal ── */
.dv2-drill-bg { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 1080;
  display: flex; align-items: center; justify-content: center; padding: 18px; }
.dv2-drill { background: #fff; border-radius: 14px; width: min(680px, 100%);
  max-height: 80vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(15,23,42,.3); }
.dv2-drill-h { display: flex; align-items: center; gap: 8px; padding: 14px 18px;
  border-bottom: 1px solid #EEF2F6; font-weight: 800; color: #1a2847; font-size: 14px; }
.dv2-drill-b { overflow-y: auto; padding: 8px 18px 16px; }

/* ── canvas charts ── */
.dv2-ch { position: relative; width: 100%; height: 100%; min-height: 0; }

/* ── تجاوب ── */
@media (max-width: 1024px) {
  .dv2-grid { grid-template-columns: repeat(6, 1fr); }
  .c5, .c6, .c8, .c12 { grid-column: span 6; }
  .c2 { grid-column: span 3; } .c3, .c4 { grid-column: span 3; }
  .dv2-strip { grid-template-columns: repeat(7, 1fr); }
  .dv2-filt { margin-inline-start: 0; }
}
@media (max-width: 600px) {
  .dv2-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 94px; gap: 10px; }
  .c2, .c3 { grid-column: span 1; }
  .c4, .c5, .c6, .c8, .c12 { grid-column: span 2; }
  /* الأرقام الكبيرة (المبالغ) كانت تُقصّ في خانة الجوال الضيّقة — تصغير + منع الفيض */
  .dv2-kpi-val { font-size: 18px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dv2-kpi-val .u { font-size: 10.5px; }
  .dv2-kpi-lbl { font-size: 10.5px; }
  .dv2-kpi-delta { font-size: 10px; }
  .dv2-card { padding: 11px 12px; }
  .dv2-bar-lbl { width: 80px; }
}
/* هواتف ضيّقة جداً: تصغير قيمة المؤشر لتظهر المبالغ كاملة بلا قصّ */
@media (max-width: 380px) {
  .dv2-kpi-val { font-size: 16px; }
  .dv2-kpi-val .u { font-size: 10px; }
}