/* =========================================================
   KPI SUMMARY STRIP — HARD ISOLATED (TOOLTIP SAFE)
   ---------------------------------------------------------
   LOAD ORDER: MUST LOAD LAST
   ---------------------------------------------------------
   RESPONSIBILITIES:
   ✅ KPI layout + visuals
   ✅ KPI-local tooltip system
   ✅ Z-index authority ABOVE log header
   ❌ Does NOT control table / log behavior
   ---------------------------------------------------------
   This file is intentionally self-contained.
   ========================================================= */

/*
  HARD RULES (DO NOT BREAK):
  ---------------------------------------------------------
  ❌ NO `contain`
  ❌ NO overflow clipping
  ❌ NO parent transforms
  ---------------------------------------------------------
  ✅ KPI strip must sit ABOVE header
  ✅ Tooltips must escape ALL parents
*/

/* =========================================================
   KPI STRIP WRAPPER — STACKING ROOT
   ========================================================= */
#kpi-strip-wrap{
  width:100%;
  max-width:1100px;             /* 🔑 Desktop width lock */
  padding:18px 20px 14px;
  margin-bottom:14px;

  border-bottom:1px solid rgba(99,102,241,.25);

  position:relative;
  z-index:80;
  overflow:visible;

  isolation:isolate;
}

/* =========================================================
   KPI GRID — RESPONSIVE & SEMANTIC
   ---------------------------------------------------------
   Auto-fit prevents over-stretching and mobile weirdness
   ========================================================= */
#kpi-strip-wrap .summary-kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
  align-items:stretch;
}

/* Mobile: single column for readability */
@media (max-width:900px){
  #kpi-strip-wrap .summary-kpi-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   KPI SECTION FRAMING (VISUAL RHYTHM)
   ========================================================= */
.kpi-section{
  margin-bottom:22px;
  padding-bottom:14px;
  border-bottom:1px dashed rgba(99,102,241,.18);
}

.kpi-section:last-child{
  border-bottom:none;
}

.kpi-section-title{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#9aa3ff;
  margin-bottom:10px;
  opacity:.85;
}

/* =========================================================
   KPI CARD
   ========================================================= */
#kpi-strip-wrap .summary-kpi{
  position:relative;
  overflow:visible;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  padding:18px 20px;
  border-radius:18px;

  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.92),
      rgba(2,6,23,.92)
    );

  border:1px solid rgba(99,102,241,.30);

  box-shadow:
    inset 0 0 0 1px rgba(99,102,241,.15),
    0 10px 28px rgba(0,0,0,.65),
    0 0 22px rgba(99,102,241,.25);
}

/* =========================================================
   KPI TEXT HIERARCHY
   ========================================================= */
#kpi-strip-wrap .summary-kpi-label{
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#9aa5bd;
  margin-bottom:6px;
}

#kpi-strip-wrap .summary-kpi-value{
  font-size:1.55rem;
  font-weight:900;
  color:#e7ecf7;
  font-variant-numeric:tabular-nums;
}

#kpi-strip-wrap .summary-kpi-sub{
  margin-top:4px;
  font-size:.7rem;
  letter-spacing:.08em;
  color:#9aa5bd;
}

/* =========================================================
   PROFIT / LOSS STATES
   ========================================================= */
#kpi-strip-wrap .summary-pos{
  color:#4ade80;
  text-shadow:0 0 10px rgba(36,255,135,.45);
}

#kpi-strip-wrap .summary-neg{
  color:#f87171;
  text-shadow:0 0 10px rgba(255,59,107,.35);
}

#kpi-strip-wrap .kpi-neutral{
  color:#e7ecf7;
  text-shadow:none;
}

/* =========================================================
   KPI CONTEXTUAL STYLING
   ========================================================= */

/* Performance KPIs = positive emphasis */
#kpi-strip-wrap .kpi-performance .summary-kpi{
  box-shadow:
    inset 0 0 0 1px rgba(16,185,129,.18),
    0 10px 28px rgba(0,0,0,.65),
    0 0 22px rgba(16,185,129,.18);
}

/* Decision / Gate KPIs = neutral emphasis */
#kpi-strip-wrap .kpi-decision .summary-kpi{
  box-shadow:
    inset 0 0 0 1px rgba(99,102,241,.18),
    0 10px 28px rgba(0,0,0,.65),
    0 0 22px rgba(99,102,241,.18);
}

/* =========================================================
   SHADOW ENGINE STATUS PILL
   ========================================================= */
#kpi-strip-wrap .summary-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.85rem;
  font-weight:900;
  letter-spacing:.04em;
}

#kpi-strip-wrap .summary-pill .dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 8px currentColor;
}

#kpi-strip-wrap .summary-pill.ok{ color:#4ade80; }
#kpi-strip-wrap .summary-pill.warn{ color:#facc15; }

/* =========================================================
   KPI TOOLTIP SYSTEM (LOCAL ONLY)
   ========================================================= */
#kpi-strip-wrap .kpi-tip{
  position:relative;
  cursor:help;
}

#kpi-strip-wrap .kpi-tip::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 12px);
  transform:translate3d(-50%, 6px, 0);

  max-width:280px;
  width:max-content;
  padding:10px 12px;
  border-radius:10px;

  background:rgba(15,23,42,.97);
  border:1px solid rgba(99,102,241,.45);

  box-shadow:
    0 18px 48px rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(99,102,241,.12);

  font-size:.72rem;
  line-height:1.4;
  font-weight:600;
  color:#e7ecf7;

  white-space:normal;
  pointer-events:none;
  opacity:0;

  z-index:999;
  transition:opacity .15s ease, transform .15s ease;
}

#kpi-strip-wrap .kpi-tip::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translate3d(-50%, 2px, 0);

  border-width:6px;
  border-style:solid;
  border-color:
    rgba(15,23,42,.97)
    transparent
    transparent
    transparent;

  opacity:0;
  z-index:1000;
  transition:opacity .15s ease, transform .15s ease;
}

@media (hover:hover){
  #kpi-strip-wrap .kpi-tip:hover::after,
  #kpi-strip-wrap .kpi-tip:hover::before{
    opacity:1;
    transform:translate3d(-50%, 0, 0);
  }
}
/* =========================================================
   DISABLE NATIVE TOOLTIPS
   ========================================================= */
#kpi-strip-wrap [title]::after{
  content:none !important;
}
/* =========================================================
   ENTRY RULES — FINAL HARD NORMALIZATION (AUTHORITATIVE)
   ========================================================= */
#kpi-strip-wrap .kpi-config .summary-kpi-value,
#kpi-strip-wrap .kpi-config .summary-kpi-sub{
  color:#e7ecf7;
  font-weight:600;          /* 🔑 SAME WEIGHT */
  font-size:0.95rem;        /* 🔑 SAME SIZE */
  letter-spacing:normal;    /* 🔑 REMOVE KPI WIDE SPACING */
  line-height:1.25;
}