/* Overview / Executive Dashboard -- "more alive, more professional" pass.
   Layers on top of executive-dashboard-fix.css / style.css without touching their selectors:
   smooth (bezier) trend curves with a gradient fill and a pulsing "live" marker on the latest
   point, a staggered fade/slide-in for KPI cards and panels on load, trend arrows on KPI values,
   and bars/reliability meters that grow in instead of appearing already full. Pure presentation
   -- no data, id, or class that overview.js relies on for logic was touched. */

/* ---------- KPI cards: staggered entrance + trend arrow ---------- */
.exec-dashboard .exec-kpi{
  animation:execKpiIn .5s cubic-bezier(.22,1,.36,1) both;
}
.exec-dashboard .exec-kpi:nth-child(1){animation-delay:.02s}
.exec-dashboard .exec-kpi:nth-child(2){animation-delay:.07s}
.exec-dashboard .exec-kpi:nth-child(3){animation-delay:.12s}
.exec-dashboard .exec-kpi:nth-child(4){animation-delay:.17s}
.exec-dashboard .exec-kpi:nth-child(5){animation-delay:.22s}
.exec-dashboard .exec-kpi:nth-child(6){animation-delay:.27s}
@keyframes execKpiIn{
  from{opacity:0;transform:translateY(10px) scale(.98)}
  to{opacity:1;transform:none}
}
.exec-dashboard .exec-kpi-trend{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:6px;
  font-size:10px;
  vertical-align:middle;
  padding:2px 5px;
  border-radius:6px;
  line-height:1;
}
.exec-dashboard .exec-kpi-trend.good{color:#0f7a4a;background:#e3f7ec}
.exec-dashboard .exec-kpi-trend.bad{color:#c23b3b;background:#fce9e9}

/* ---------- Panels: fade/slide in, slightly after the KPI row ---------- */
.exec-dashboard .exec-panel{
  animation:execPanelIn .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay:.18s;
}
.exec-dashboard .exec-grid-two .exec-panel:nth-child(2){animation-delay:.26s}
@keyframes execPanelIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* ---------- Line charts: smooth curve draw-in + gradient + live pulse ---------- */
.exec-svg-live .exec-line{
  stroke-width:3;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:2200;
  stroke-dashoffset:2200;
  animation:execDrawLine 1.1s cubic-bezier(.3,.9,.4,1) .1s forwards;
}
.exec-svg-live .exec-area{
  opacity:0;
  animation:execFadeArea .8s ease-out .5s forwards;
}
@keyframes execDrawLine{to{stroke-dashoffset:0}}
@keyframes execFadeArea{to{opacity:1}}
.exec-svg-live .exec-dot{
  fill:#fff;
  stroke-width:2.5;
  opacity:0;
  animation:execDotIn .35s ease-out forwards;
  animation-delay:calc(.15s + var(--i,0) * .06s);
}
.exec-svg-live g:nth-of-type(1) .exec-dot{--i:0}
.exec-svg-live g:nth-of-type(2) .exec-dot{--i:1}
.exec-svg-live g:nth-of-type(3) .exec-dot{--i:2}
.exec-svg-live g:nth-of-type(4) .exec-dot{--i:3}
.exec-svg-live g:nth-of-type(5) .exec-dot{--i:4}
.exec-svg-live g:nth-of-type(6) .exec-dot{--i:5}
.exec-svg-live g:nth-of-type(7) .exec-dot{--i:6}
.exec-svg-live g:nth-of-type(8) .exec-dot{--i:7}
.exec-svg-live g:nth-of-type(9) .exec-dot{--i:8}
.exec-svg-live g:nth-of-type(10) .exec-dot{--i:9}
.exec-svg-live g:nth-of-type(11) .exec-dot{--i:10}
.exec-svg-live g:nth-of-type(12) .exec-dot{--i:11}
@keyframes execDotIn{from{opacity:0;r:1}to{opacity:1}}
.exec-svg-live .exec-dot-last{
  transition:r .15s ease;
}
.exec-svg-live .exec-dot-last:hover{r:8}
.exec-svg-live .exec-dot-pulse{
  transform-box:fill-box;
  transform-origin:center;
  opacity:.55;
  animation:execPulseRing 2.4s ease-out .9s infinite;
}
@keyframes execPulseRing{
  0%{transform:scale(.55);opacity:.55}
  75%{transform:scale(2.1);opacity:0}
  100%{transform:scale(2.1);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .exec-dashboard .exec-kpi,.exec-dashboard .exec-panel,
  .exec-svg-live .exec-line,.exec-svg-live .exec-area,.exec-svg-live .exec-dot,
  .exec-svg-live .exec-dot-pulse{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}
}

/* ---------- Bars / reliability meters: animated grow-in ---------- */
.exec-bar-row>i>em,
.exec-reliability em{
  transition:width .9s cubic-bezier(.22,1,.36,1);
}

/* ---------- Heatmap: subtle pop-in + hover lift ---------- */
.exec-heatmap-row span{
  transition:transform .15s ease,box-shadow .15s ease;
}
.exec-heatmap-row span:hover{
  transform:scale(1.08);
  box-shadow:0 4px 10px rgba(15,35,65,.18);
  cursor:default;
}