/* ============================================================================
   MGIoT 2028 — Overview "Command Center" premium layer.
   Dense KPI strip with sparklines + real ratio rails, count-up numbers,
   staggered reveal, chart draw-in, skeleton shimmer. Token-driven, RTL-safe,
   full prefers-reduced-motion fallback. Loads after the token/component layers.
   ========================================================================== */

/* ---------- Dense KPI strip ------------------------------------------------ */
#viewOverview .mg-kpi-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(184px,1fr));
  gap:14px;
  margin:0 0 18px;
}
#viewOverview .mg-kpi{
  position:relative;
  background:var(--mg-surface);
  border:1px solid var(--mg-border);
  border-radius:var(--mg-radius-lg);
  padding:16px 18px 14px;
  box-shadow:var(--mg-shadow-sm);
  overflow:hidden;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
/* Left accent rail — the command-center signature */
#viewOverview .mg-kpi::before{
  content:"";
  position:absolute; inset-block:0; inset-inline-start:0;
  width:4px; border-start-start-radius:var(--mg-radius-lg); border-end-start-radius:var(--mg-radius-lg);
  background:var(--_accent,var(--mg-brand));
}
#viewOverview .mg-kpi:hover{
  transform:translateY(-3px);
  box-shadow:var(--mg-shadow-md);
  border-color:var(--_accent,var(--mg-brand));
}
#viewOverview .mg-kpi--brand  { --_accent:var(--mg-brand); }
#viewOverview .mg-kpi--success{ --_accent:var(--mg-success-strip); }
#viewOverview .mg-kpi--info   { --_accent:var(--mg-info-strip); }
#viewOverview .mg-kpi--cyan   { --_accent:var(--mg-cyan); }
#viewOverview .mg-kpi--warn   { --_accent:var(--mg-warn-strip); }

#viewOverview .mg-kpi-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:12px;
}
#viewOverview .mg-kpi-ic{
  width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--_accent) 14%, transparent);
  color:var(--_accent);
}
#viewOverview .mg-kpi-ic svg{ width:20px; height:20px; }

#viewOverview .mg-kpi-delta{
  display:inline-flex; align-items:center; gap:3px;
  font-size:12px; font-weight:800; line-height:1;
  padding:4px 9px; border-radius:var(--mg-radius-pill);
  white-space:nowrap; unicode-bidi:plaintext;
}
#viewOverview .mg-kpi-delta--up  { color:var(--mg-success-text); background:var(--mg-success-bg); }
#viewOverview .mg-kpi-delta--down{ color:var(--mg-danger-text);  background:var(--mg-danger-bg); }
#viewOverview .mg-kpi-delta--flat{ color:var(--mg-text-faint);   background:var(--mg-neutral-bg); }

#viewOverview .mg-kpi-num{
  font-size:clamp(26px,2.6vw,33px); font-weight:800; line-height:1;
  color:var(--mg-text-strong); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  unicode-bidi:plaintext;
}
#viewOverview .mg-kpi-label{
  margin-top:6px; font-size:13px; font-weight:700; color:var(--mg-text-muted);
}
#viewOverview .mg-kpi-rail{ margin-top:12px; height:36px; display:flex; align-items:flex-end; }

/* Sparkline */
#viewOverview .mg-spark{ width:100%; height:36px; display:block; }

/* Real ratio bar */
#viewOverview .mg-ratio{
  position:relative; width:100%; height:8px; border-radius:var(--mg-radius-pill);
  background:var(--mg-neutral-bg); margin-bottom:2px; overflow:hidden;
}
#viewOverview .mg-ratio-fill{
  height:100%; width:var(--w); border-radius:inherit;
  transform-origin:inline-start;
}
#viewOverview .mg-ratio-pct{
  position:absolute; inset-inline-end:0; top:-18px;
  font-size:11px; font-weight:800; color:var(--mg-text-faint);
  font-variant-numeric:tabular-nums;
}

/* ---------- Reveal / stagger entrance ------------------------------------- */
#viewOverview .reveal{ opacity:0; transform:translateY(12px); }
#viewOverview .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 55ms);
}

/* ---------- Ratio bar fill grow ------------------------------------------- */
#viewOverview .mg-kpi.is-in .mg-ratio-fill{ animation:mgRatioGrow .8s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i,0) * 55ms + 120ms); }
@keyframes mgRatioGrow{ from{ width:0; } to{ width:var(--w); } }

/* ---------- Chart / sparkline draw-in ------------------------------------- */
#viewOverview .ov-draw{ stroke-dasharray:1; stroke-dashoffset:1; }
#viewOverview .is-in .ov-draw,
#viewOverview .mg-kpi.is-in .ov-draw{
  animation:ovDraw .95s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:calc(var(--i,0) * 55ms + 160ms);
}
#viewOverview .ov-draw--dash{ animation-delay:calc(var(--i,0) * 55ms + 320ms); }
@keyframes ovDraw{ to{ stroke-dashoffset:0; } }
#viewOverview .ov-dot, #viewOverview .mg-spark-dot{ opacity:0; }
#viewOverview .is-in .ov-dot, #viewOverview .mg-kpi.is-in .mg-spark-dot{
  animation:ovDot .3s ease forwards; animation-delay:calc(var(--i,0) * 55ms + .9s);
}
@keyframes ovDot{ to{ opacity:1; } }

/* ---------- Panels: a touch more depth ------------------------------------ */
#viewOverview .ov-panel{ transition:box-shadow var(--t), transform var(--t); }
#viewOverview .ov-panel:hover{ box-shadow:var(--mg-shadow-md); }

/* ---------- Skeleton loading ---------------------------------------------- */
#viewOverview .ov-skeleton .mg-kpi--skel{ min-height:132px; }
.mg-kpi--skel{ background:var(--mg-surface); border:1px solid var(--mg-border); border-radius:var(--mg-radius-lg); padding:16px 18px; }
.mg-kpi--skel .sk-ic{ width:38px; height:38px; border-radius:11px; }
.mg-kpi--skel .sk-num{ width:60%; height:26px; margin-top:14px; border-radius:8px; }
.mg-kpi--skel .sk-lbl{ width:45%; height:12px; margin-top:10px; border-radius:6px; }
.mg-kpi--skel .sk-rail{ width:100%; height:12px; margin-top:16px; border-radius:6px; }
#viewOverview .ov-skeleton .sk-chart{ height:240px; border-radius:var(--mg-radius-md); }
#viewOverview .ov-skeleton .sk-donut{ height:180px; border-radius:var(--mg-radius-md); }
.sk{
  background:linear-gradient(100deg, var(--mg-neutral-bg) 30%, color-mix(in srgb,var(--mg-neutral-bg) 55%, #fff) 50%, var(--mg-neutral-bg) 70%);
  background-size:200% 100%;
  animation:mgShimmer 1.3s ease-in-out infinite;
}
@keyframes mgShimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* ---------- Reduced motion: everything final, instantly ------------------- */
@media (prefers-reduced-motion: reduce){
  #viewOverview .reveal{ opacity:1; transform:none; transition:none; }
  #viewOverview .ov-draw{ stroke-dashoffset:0 !important; animation:none !important; }
  #viewOverview .ov-dot, #viewOverview .mg-spark-dot{ opacity:1 !important; animation:none !important; }
  #viewOverview .mg-kpi.is-in .mg-ratio-fill{ animation:none; width:var(--w); }
  .sk{ animation:none; }
  #viewOverview .mg-kpi:hover{ transform:none; }
}