/* ===========================================================================
   DataHUB — الحركة والتفاعل والإشعارات.
   القاعدة: الحالة النهائيّة هي الأصل. كلّ حركةٍ تبدأ من حالةٍ فارغة تُفرض أثناء الحركة وحدها
   (animation-fill-mode: both)، فإن لم تجرِ الحركة ظهر العنصر كما هو. ومن طلب تقليل الحركة لا يراها.
   =========================================================================== */
:root{ --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1) }

@keyframes fxUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fxIn{from{opacity:0}to{opacity:1}}
@keyframes fxPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes fxBar{from{transform:scaleX(0)}to{transform:none}}
@keyframes fxDraw{from{stroke-dasharray:0 4000}}
@keyframes fxTab{from{transform:scaleX(0)}to{transform:none}}
@keyframes fxSpin{to{transform:rotate(360deg)}}
@keyframes fxGlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes fxFloat{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-14px,10px) rotate(6deg)}}
@keyframes fxRing{0%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-4deg)}75%,100%{transform:rotate(0)}}
@keyframes fxPulse{0%{box-shadow:0 0 0 0 rgba(19,76,248,.45)}70%{box-shadow:0 0 0 8px rgba(19,76,248,0)}100%{box-shadow:0 0 0 0 rgba(19,76,248,0)}}
@keyframes fxRipple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
@keyframes fxToast{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes fxTimer{from{transform:scaleX(1)}to{transform:scaleX(0)}}

@media (prefers-reduced-motion:no-preference){
  /* ===== دخول الصفحة: أجزاؤها تتوالى ===== */
  .view-enter{animation:none}
  .view-enter > *{animation:fxUp .5s var(--ease-out) both;animation-delay:calc(var(--i,0) * 55ms)}
  .view-enter > :nth-child(1){--i:0} .view-enter > :nth-child(2){--i:1} .view-enter > :nth-child(3){--i:2}
  .view-enter > :nth-child(4){--i:3} .view-enter > :nth-child(5){--i:4} .view-enter > :nth-child(6){--i:5}
  .view-enter > :nth-child(n+7){--i:6}
  /* البطاقات في الشبكات والشرائط تتوالى كذلك */
  :is(.wgs,.wgs4,.kpi,.stats,.cards,.bts,.syss,.psn-g,.jrn,.incs,.newg) > *{animation:fxPop .45s var(--ease-out) both;animation-delay:calc(120ms + var(--j,0) * 45ms)}
  :is(.wgs,.wgs4,.kpi,.stats,.cards,.bts,.syss,.psn-g,.jrn,.incs,.newg) > :nth-child(2){--j:1}
  :is(.wgs,.wgs4,.kpi,.stats,.cards,.bts,.syss,.psn-g,.jrn,.incs,.newg) > :nth-child(3){--j:2}
  :is(.wgs,.wgs4,.kpi,.stats,.cards,.bts,.syss,.psn-g,.jrn,.incs,.newg) > :nth-child(4){--j:3}
  :is(.wgs,.wgs4,.kpi,.stats,.cards,.bts,.syss,.psn-g,.jrn,.incs,.newg) > :nth-child(5){--j:4}
  :is(.wgs,.wgs4,.kpi,.stats,.cards,.bts,.syss,.psn-g,.jrn,.incs,.newg) > :nth-child(6){--j:5}
  :is(.wgs,.wgs4,.kpi,.stats,.cards,.bts,.syss,.psn-g,.jrn,.incs,.newg) > :nth-child(n+7){--j:6}
  .res-l > *, .tasks > *, .evx > li{animation:fxUp .4s var(--ease-out) both}
  .res-l > :nth-child(-n+8), .tasks > :nth-child(-n+8){animation-delay:calc(160ms + var(--k,0) * 35ms)}
  .res-l > :nth-child(2),.tasks > :nth-child(2){--k:1} .res-l > :nth-child(3),.tasks > :nth-child(3){--k:2} .res-l > :nth-child(4),.tasks > :nth-child(4){--k:3}
  .res-l > :nth-child(5),.tasks > :nth-child(5){--k:4} .res-l > :nth-child(6),.tasks > :nth-child(6){--k:5} .res-l > :nth-child(7),.tasks > :nth-child(7){--k:6}

  /* الرسوم ترسم نفسها: الحلقات والأشرطة */
  .dn circle:not(.dn-b){animation:fxDraw 1.1s var(--ease-out) .15s both}
  .qbar i,.dom-bar i,.cab-fill i{transform-origin:right center;animation:fxBar .9s var(--ease-out) .2s both}
  [dir="ltr"] .qbar i{transform-origin:left center}
  .tabs button.on::after{animation:fxTab .28s var(--ease-out) both}
  .sb-link.active::after{animation:fxPop .3s var(--ease-spring) both}
  .stp li.on{animation:fxPulse 2.4s ease-out 1s 2}

  /* الظاهر من الأسفل عند التمرير — تُفرض الحالة الفارغة قبل ظهوره فقط (gov-fx.js) */
  .fx-rv{opacity:0;transform:translateY(16px)}
  .fx-rv.fx-in{opacity:1;transform:none;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}

  /* ما يجري الآن يدور */
  .fx-spin .ic,.pill .ic.fx-spin{animation:fxSpin 1.1s linear infinite}
  .jrn li em.live{animation:fxPulse 1.6s ease-out infinite;border-radius:99px;padding:0 .4rem}
}

/* ===== التفاعل: ما يُضغط يستجيب ===== */
.btn{position:relative;overflow:hidden;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform .12s var(--ease),box-shadow .2s var(--ease)}
.btn:active:not(:disabled){transform:scale(.97)}
.btn .rip{position:absolute;border-radius:50%;width:240%;aspect-ratio:1;pointer-events:none;background:currentColor;opacity:.18;
  transform:translate(-50%,-50%) scale(0);animation:fxRipple .55s var(--ease-out) forwards}
.btn-primary:hover{box-shadow:0 1px 0 0 rgba(31,35,40,.1),0 6px 18px -4px rgba(19,76,248,.55)}
/* البطاقات القابلة للضغط ترتفع قليلًا ويضيء إطارها بالأزرق */
:is(.gc,.res,.sys,.bt,.psn-c,.hprod,.stat.click,.newg button,.wg,.kpi>.kc,.lin-n,.jrn li){transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),border-color .2s var(--ease-out),background-color .2s var(--ease)}
:is(.gc,.res,.sys,.bt,.psn-c,.hprod,.newg button,.lin-n):hover{transform:translateY(-2px);border-color:var(--brand-300);
  box-shadow:0 8px 22px -10px rgba(19,76,248,.35)}
.wg:hover{border-color:var(--brand-200);box-shadow:0 6px 18px -12px rgba(19,76,248,.4)}
.stats>.stat.click:hover,.kpi>.kc:hover{background:var(--brand-50)}
.wk-table tbody tr{transition:background-color .15s var(--ease)}
.wk-table tbody tr.click:hover,.wk-table tbody tr[data-req]:hover{background:var(--brand-50)}
.sb-link .ic{transition:transform .2s var(--ease-spring),color .2s}
.sb-link:hover .ic{transform:scale(1.15);color:var(--brand-500)}
.tabs button .ic{transition:transform .2s var(--ease-spring)}
.tabs button:hover .ic{transform:translateY(-1px)}
/* الحلقة المقسّمة ومفتاحها: المرور على بندٍ يُبرز قطعته */
.dn circle{transition:opacity .2s var(--ease),stroke-width .2s var(--ease)}
.dn.dn-hl circle:not(.dn-b):not(.on){opacity:.18}
.lgd li[data-k]{cursor:default;transition:background-color .15s;padding:0 .25rem;margin:0 -.25rem}
.lgd li[data-k]:hover{background:var(--brand-50)}
/* أيقونات اللوحات والإحصاء بالأزرق */
.pn-h>.ic,.lgx-t>.ic,.fct-h b .ic,.wsh-s .ic,.home-g .card-head h3 .ic{color:var(--brand-500)}
.stat-i{width:2.25rem;height:2.25rem;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--brand-50);color:var(--brand-500)}
.stat.g .stat-i{background:var(--ok-bg);color:var(--ok)} .stat.w .stat-i{background:var(--warn-bg);color:var(--warn)} .stat.r .stat-i{background:var(--bad-bg);color:var(--bad)}
.jrn li .ic{color:var(--brand-500)}
.jrn li:hover{background:var(--brand-50)}
.empty>.ic{width:2.75rem;height:2.75rem;padding:.7rem;border-radius:50%;background:var(--brand-50);color:var(--brand-500)}

/* ===== الرأس: خطٌّ بألوان الشعار ===== */
.topbar::after{content:'';position:absolute;inset-inline:0;inset-block-end:-1px;height:2px;background:var(--brand-grad);background-size:200% 100%;opacity:.9}
@media (prefers-reduced-motion:no-preference){ .topbar::after{animation:fxGlow 9s ease-in-out infinite} }

/* ===== الرئيسيّة: لافتةٌ زرقاء ترحّب ===== */
.wsh{position:relative;overflow:hidden;padding:1.5rem 1.75rem;border-radius:12px;background:var(--brand-grad);color:#fff;
  align-items:center;margin-bottom:1.25rem;box-shadow:0 14px 34px -18px rgba(19,76,248,.65);isolation:isolate}
.wsh h1{color:#fff;font-size:1.75rem}
.wsh .kicker{color:rgba(255,255,255,.85)} .wsh .kicker::before{background:rgba(255,255,255,.7)}
.wsh-s{color:rgba(255,255,255,.88)} .wsh-s b{color:#fff} .wsh-s b.bad{color:#FFD7D5}
.wsh-s .ic{color:#fff!important}
.wsh .btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);color:#fff;box-shadow:none;backdrop-filter:blur(4px)}
.wsh .btn .ic{color:#fff}
.wsh .btn:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}
/* أشكال الشعار تسبح في الخلفيّة */
.wsh::before,.wsh::after{content:'';position:absolute;z-index:-1;width:16rem;height:16rem;border-radius:38%;
  background:rgba(255,255,255,.08);transform:rotate(45deg)}
.wsh::before{inset-inline-end:-4rem;inset-block-start:-7rem}
.wsh::after{inset-inline-end:9rem;inset-block-end:-11rem;width:13rem;height:13rem;background:rgba(146,184,242,.16)}
@media (prefers-reduced-motion:no-preference){
  .wsh::before{animation:fxFloat 14s ease-in-out infinite} .wsh::after{animation:fxFloat 18s ease-in-out -4s infinite reverse}
}
.wsh-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}
.wsh-chips a{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .65rem;border-radius:2em;font-size:.8125rem;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;transition:background-color .2s}
.wsh-chips a:hover{background:rgba(255,255,255,.26)}
.wsh-chips b{font-weight:600}

/* ===== الإشعارات: الجرس ومركزها ===== */
.tb-bell.ring .ic{animation:fxRing 1s ease-in-out}
.tb-bell em{background:var(--dn)!important}
.ntf{position:absolute;inset-block-start:calc(100% + .5rem);inset-inline-end:0;z-index:55;width:min(25rem,92vw);
  background:var(--card);border-radius:12px;box-shadow:var(--sh-lg);overflow:hidden;animation:fxPop .18s var(--ease-out) both;transform-origin:top left}
.ntf[hidden]{display:none}
.ntf-h{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--border)}
.ntf-h b{flex:1;font-size:.875rem}
.ntf-h button{font-size:.75rem;color:var(--brand-500);font-weight:500}
.ntf-h button:hover{text-decoration:underline}
.ntf-l{max-height:min(28rem,70vh);overflow:auto}
.ntf-i{display:flex;gap:.65rem;align-items:flex-start;width:100%;text-align:start;padding:.7rem 1rem;border-bottom:1px solid var(--border);
  transition:background-color .15s;position:relative}
.ntf-i:last-child{border-bottom:0}
.ntf-i:hover{background:var(--hover)}
.ntf-i.new{background:var(--brand-50)}
.ntf-i.new::after{content:'';position:absolute;inset-inline-end:.8rem;inset-block-start:1rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--brand-500)}
.ntf-x{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--brand-50);color:var(--brand-500)}
.ntf-x.g{background:var(--ok-bg);color:var(--ok)} .ntf-x.r{background:var(--bad-bg);color:var(--bad)} .ntf-x.w{background:var(--warn-bg);color:var(--warn)}
.ntf-i div{flex:1;min-width:0;padding-inline-end:.75rem}
.ntf-i b{display:block;font-size:.8125rem;font-weight:600;line-height:1.5}
.ntf-i span{display:block;font-size:.75rem;color:var(--ink-2);line-height:1.5}
.ntf-i small{display:block;font-size:.75rem;color:var(--ink-3);margin-top:.15rem}
.ntf-0{padding:2rem 1rem;text-align:center;color:var(--ink-2);font-size:.875rem}

/* ===== التنبيه العائم ===== */
.toast-host{inset-inline:auto 1.25rem;inset-block-end:1.25rem;align-items:stretch;width:min(24rem,calc(100vw - 2.5rem))}
.toast{display:flex;align-items:flex-start;gap:.6rem;text-align:start;padding:.8rem .9rem;border-radius:10px;position:relative;overflow:hidden;
  background:var(--card);color:var(--ink);border:1px solid var(--border);box-shadow:var(--sh-lg);pointer-events:auto;
  animation:fxToast .35s var(--ease-spring) both;font-weight:400;max-width:none}
.toast .ic{width:1.15rem;height:1.15rem;flex:none;margin-top:.1rem;color:var(--brand-500)}
.toast.ok .ic{color:var(--ok)} .toast.err .ic{color:var(--bad)}
.toast.ok{border-inline-start:3px solid var(--ok)} .toast.err{border-inline-start:3px solid var(--dn)} .toast.info{border-inline-start:3px solid var(--brand-500)}
.toast > div{flex:1;min-width:0}
.toast b{display:block;font-size:.875rem;font-weight:600}
.toast span{display:block;font-size:.8125rem;color:var(--ink-2);line-height:1.6}
.toast a{display:inline-block;margin-top:.3rem;font-size:.8125rem;font-weight:600;color:var(--brand-500)}
.toast .t-x{flex:none;color:var(--ink-3);padding:.1rem}
.toast .t-x:hover{color:var(--ink)}
.toast .t-bar{position:absolute;inset-inline:0;inset-block-end:0;height:3px;background:var(--brand-grad);transform-origin:right center}
.toast.ok .t-bar{background:var(--ok)} .toast.err .t-bar{background:var(--dn)}
@media (prefers-reduced-motion:no-preference){ .toast .t-bar{animation:fxTimer var(--t,4s) linear forwards} }
.toast.out{opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media(max-width:860px){ .wsh{padding:1.25rem} .wsh h1{font-size:1.4rem} .toast-host{inset-inline:.75rem} }