/* id-reports.css — هوية «الشريطان» لشاشات التقارير والأمان والحوكمة (وكيل rep، 2026-11-04).
   مركز التقارير نفسه في reports.css؛ هنا: تقييمات الكباتن، المشاكل، التقرير الشامل،
   لوحة القيادة، استهلاك الخرائط، مركز الأمان، والحوكمة وERP.
   كل لون رمز. --sec لون قسم الشاشة (تقارير / أمان / حوكمة) — للتمييز لا للزخرفة. */

:root[data-view="reports"], :root[data-view="issues"], :root[data-view="analytics"],
:root[data-view="exec-dashboard"], :root[data-view="maps-usage"] { --sec: var(--c-reports); }
:root[data-view^="security-"] { --sec: var(--c-security); }
:root[data-view="approvals"], :root[data-view="documents"], :root[data-view="contracts"], :root[data-view="pmo"],
:root[data-view="audit-log"], :root[data-view="crm-leads"], :root[data-view="inventory"] { --sec: var(--c-gov); }
/* الكلاسيكي الفاتح: الزجاج الأبيض يختفي على الفاتح */
:is(:root[data-view="reports"], :root[data-view="issues"], :root[data-view="analytics"], :root[data-view="exec-dashboard"],
    :root[data-view="maps-usage"], :root[data-view="approvals"], :root[data-view="documents"], :root[data-view="contracts"],
    :root[data-view="pmo"], :root[data-view="audit-log"], :root[data-view="crm-leads"], :root[data-view="inventory"]):not([data-theme="dark"]) #content { --glass: var(--surface-2); --glass-2: var(--surface-2); --line: var(--border-soft); --line-2: var(--border); }

/* ── الرأس: أيقونة القسم بجانب العنوان ── */
.page-head.idr-head { align-items: center; }
.page-head.idr-head > .idr-ic { --c: var(--sec, var(--c-reports)); }
.page-head.idr-head > .idr-ic + div { flex: 1; min-width: 240px; }
.idr-ic svg { width: 24px; height: 24px; }
.page-head.idr-head h1 { font-size: 26px; margin-bottom: 4px; }

/* ── مجموعة شاشات هذا الملف ── */
:is(:root[data-view="reports"], :root[data-view="issues"], :root[data-view="analytics"], :root[data-view="exec-dashboard"],
    :root[data-view="maps-usage"], :root[data-view="approvals"], :root[data-view="documents"], :root[data-view="contracts"],
    :root[data-view="pmo"], :root[data-view="audit-log"], :root[data-view="crm-leads"], :root[data-view="inventory"]) #content {
  /* دخول متتابع للأقسام مرة عند الفتح */
  & > *, & > .mu > *, & > .an-root > * { animation: idr-rise var(--t-slow, .42s) var(--ease, ease) both; }
  & > :nth-child(2), & > .mu > :nth-child(2) { animation-delay: 45ms; }
  & > :nth-child(3), & > .mu > :nth-child(3) { animation-delay: 90ms; }
  & > :nth-child(4), & > .mu > :nth-child(4) { animation-delay: 135ms; }
  & > :nth-child(5), & > .mu > :nth-child(5) { animation-delay: 180ms; }
  & > :nth-child(6), & > .mu > :nth-child(6) { animation-delay: 225ms; }
  & > :nth-child(n+7), & > .mu > :nth-child(n+7) { animation-delay: 270ms; }
  &.no-anim > *, &.no-anim > .mu > * { animation: none; }

  /* بطاقات المؤشّرات: شريط بلون القسم وارتفاع خفيف عند المرور */
  .kpi { position: relative; overflow: hidden; transition: transform var(--t, .24s) var(--ease, ease), border-color var(--t, .24s); }
  .kpi::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; opacity: .85;
    background: linear-gradient(to left, var(--kc, var(--sec)), transparent 75%); }
  .kpi.good { --kc: var(--good); } .kpi.warn { --kc: var(--warn); } .kpi.crit { --kc: var(--crit); }
  .kpi:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--kc, var(--sec)) 40%, var(--border)); }
  .kpi .v { font-variant-numeric: tabular-nums; }

  /* لوحات: خطّ علوي بلون القسم + عنوان بنقطة */
  .panel { position: relative; }
  .panel-head h3 { display: flex; align-items: center; gap: 9px; }
  .panel-head h3::before { content: ""; width: 4px; height: 16px; border-radius: 4px; background: var(--sec); box-shadow: 0 0 10px var(--sec); flex: none; }
  .tbl-wrap thead th, .data-tbl thead th { background: var(--glass); }
  .tbl-wrap tbody tr, .data-tbl tbody tr { transition: background var(--t-fast, .16s); }

  /* حالة فارغة: أهدأ وأوضح */
  .empty { border-radius: var(--r-lg); }

  /* شرائح الفترة: ككبسولات الهوية */
  .filter-bar { gap: 6px; }
  .filter-bar .chip:not(.active):hover { color: var(--text); border-color: color-mix(in srgb, var(--sec) 45%, var(--border)); }
}
@keyframes idr-rise { from { opacity: 0; transform: translateY(10px); } }

/* ── أشرطة تنمو عند الدخول (توزيع النجوم، أشرطة الجداول) ── */
:is(:root[data-view="reports"], :root[data-view="issues"]) #content :is(.star-fill, .inline-bar i, .bar-fill) {
  transform-origin: right center; animation: idr-growx .9s var(--ease, ease) both; animation-delay: .15s;
}
:root[dir="ltr"] #content :is(.star-fill, .inline-bar i) { transform-origin: left center; }
@keyframes idr-growx { from { transform: scaleX(0); } }
#content.no-anim :is(.star-fill, .inline-bar i, .bar-fill) { animation: none; }
:root[data-view="reports"] #content .star-fill.low { background: linear-gradient(135deg, var(--crit), color-mix(in srgb, var(--crit) 60%, #fff)); }
:root[data-view="reports"] #content .star-fill.mid { background: linear-gradient(135deg, var(--warn), color-mix(in srgb, var(--warn) 60%, #fff)); }
:root[data-view="reports"] #content .inline-bar i.crit { background: linear-gradient(135deg, var(--crit), color-mix(in srgb, var(--crit) 60%, #fff)); }
:root[data-view="reports"] #content .cmt { transition: transform var(--t, .24s) var(--ease, ease), border-color var(--t, .24s); }
:root[data-view="reports"] #content .cmt:hover { transform: translateY(-2px); }
:root[data-view="reports"] #content .rate { color: var(--bg); font-weight: 800; }

/* ── رسم خطّي قائم بذاته (idrLineChart) ── */
.idr-chart { position: relative; color: var(--sec, var(--primary)); }
.idr-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.idr-chart .rp-gl { stroke: color-mix(in srgb, var(--border) 80%, transparent); stroke-width: 1; stroke-dasharray: 3 4; }
.idr-chart .rp-ax { fill: var(--faint); font-size: 10px; font-family: var(--fbody); }
.idr-fd { opacity: 0; animation: idr-fade .8s var(--ease, ease) .45s forwards; }
@keyframes idr-fade { to { opacity: 1; } }
#content.no-anim .idr-fd { animation: none; opacity: 1; }
.idr-leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.idr-leg span { display: inline-flex; align-items: center; gap: 6px; }
.idr-leg i { width: 14px; height: 3px; border-radius: 2px; }

/* ── استهلاك الخرائط ── */
.mu-banner { display: flex; align-items: flex-start; gap: 10px; border-radius: var(--r-lg); }
.mu-banner .id-live { margin-top: 7px; }

/* ── لوحة القيادة الموحّدة: كل قسم بلونه وأيقونته ── */
:root[data-view="exec-dashboard"] #content .exec-panel { --sec: var(--ec, var(--c-reports)); cursor: pointer;
  transition: transform var(--t, .24s) var(--ease, ease), border-color var(--t, .24s), box-shadow var(--t, .24s); }
:root[data-view="exec-dashboard"] #content .exec-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px 120px at 100% 0, color-mix(in srgb, var(--ec) 10%, transparent), transparent 70%); }
:root[data-view="exec-dashboard"] #content .exec-panel:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ec) 45%, var(--border));
  box-shadow: var(--shadow), 0 22px 40px -26px var(--ec); }
:root[data-view="exec-dashboard"] #content .exec-panel .panel-head h3::before { display: none; }
.exec-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none;
  color: var(--ec); background: color-mix(in srgb, var(--ec) 15%, transparent); }
.exec-ic svg { width: 16px; height: 16px; }
:root[data-view="exec-dashboard"] #content .exec-panel .hint { display: inline-flex; align-items: center; gap: 4px; transition: color var(--t, .24s), transform var(--t, .24s) var(--ease, ease); }
:root[data-view="exec-dashboard"] #content .exec-panel:hover .hint { color: var(--ec); transform: translateX(-3px); }
.exec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.exec-grid > .exec-panel.wide { grid-column: 1 / -1; }
.exec-grid > .exec-panel { margin: 0; }
@media (max-width: 1100px) { .exec-grid { grid-template-columns: 1fr; } }

/* ── مركز الأمان: نفس تصميمه، بلون القسم وأسطح الهوية ── */
:root[data-theme="dark"]:not([data-sidebar-style="classic"]) :is(#scRoot, #scPortal) {
  --inset: var(--surface-2); --raw-bg: var(--glass-2); --track: var(--glass-2);
  --skel: var(--glass); --skel-hi: var(--glass-2); --tip-bg: var(--surface-3);
  --hero-bg: radial-gradient(120% 150% at 88% -10%, color-mix(in srgb, var(--c-security) 13%, var(--surface-2)) 0%, var(--surface-2) 42%, var(--surface) 100%);
  --glass: color-mix(in srgb, var(--surface) 88%, transparent);
}
:root:not([data-sidebar-style="classic"]) #scRoot .sc-sh-eyebrow { color: var(--c-security); }

/* ── التحميل: هيكل يتلألأ بدل سطر «جارٍ التحميل…» ── */
:is(:root[data-view="reports"], :root[data-view="issues"], :root[data-view="analytics"], :root[data-view="exec-dashboard"],
    :root[data-view="approvals"], :root[data-view="documents"], :root[data-view="contracts"], :root[data-view="pmo"],
    :root[data-view="audit-log"], :root[data-view="crm-leads"], :root[data-view="inventory"]) #content :is(.spinner, .loading) {
  position: relative; min-height: 120px; display: grid; place-items: center; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--glass) 0%, var(--glass-2) 40%, var(--glass) 80%); background-size: 200% 100%;
  animation: id-shimmer 1.4s linear infinite; color: var(--faint);
}
#crmKpis > .spinner { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) { #content :is(.spinner, .loading) { animation: none !important; } }

/* ── المشاكل: بطاقات المناطق وأعمدة الاتجاه ── */
:root[data-view="issues"] #content .region-card { cursor: pointer; transition: transform var(--t, .24s) var(--ease, ease), border-color var(--t, .24s), box-shadow var(--t, .24s); }
:root[data-view="issues"] #content .region-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--sec) 45%, var(--border)); box-shadow: var(--shadow), 0 18px 34px -24px var(--sec); }
:root[data-view="issues"] #content .region-card .rv { font-variant-numeric: tabular-nums; }
:root[data-view="issues"] #content .spark span { transform-origin: 50% 100%; animation: idr-growy .7s var(--ease, ease) both; }
:root[data-view="issues"] #content .spark span:nth-child(3n) { animation-delay: 60ms; }
:root[data-view="issues"] #content .spark span:nth-child(3n+1) { animation-delay: 120ms; }
#content.no-anim .spark span { animation: none; }
@keyframes idr-growy { from { transform: scaleY(0); } }
:root[data-view="issues"] #content .rate { color: var(--bg); font-weight: 800; }

/* ── الحوكمة: صفوف تُقرأ وتُنقر ── */
:is(:root[data-view="approvals"], :root[data-view="documents"], :root[data-view="contracts"], :root[data-view="pmo"],
    :root[data-view="audit-log"], :root[data-view="crm-leads"], :root[data-view="inventory"]) #content {
  .data-tbl { box-shadow: var(--shadow); }
  .data-tbl tbody tr:hover { background: color-mix(in srgb, var(--sec) 8%, transparent); }
  .seg-toggle, .emp-chips { animation: none; }
}
:root[data-view="audit-log"] #content .data-tbl td code, :root[data-view="audit-log"] #content .data-tbl td pre { color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  #content > *, #content > .mu > * { animation: none !important; }
  #content :is(.star-fill, .inline-bar i, .spark span) { animation: none !important; }
}
@media (max-width: 640px) {
  :is(:root[data-view="documents"], :root[data-view="crm-leads"], :root[data-view="contracts"], :root[data-view="pmo"]) #content .emp-chips { flex-wrap: wrap; max-width: 100%; }
  :is(:root[data-view="documents"], :root[data-view="crm-leads"]) #content .emp-toolbar { flex-wrap: wrap; }
  .page-head.idr-head > .idr-ic { width: 40px; height: 40px; border-radius: 12px; }
  .page-head.idr-head h1 { font-size: 22px; }
}