/* ════════════════════════════════════════════════════════════════════════
   Trendmetrik · Premium KPI Card System — 2026-06-08
   PR-A v2 (UI Reality Audit follow-up + CEO reference design).

   Referans: C:\Users\srht4\Downloads\KPi  — Trendmetrik premium KPI mockup.

   Design:
   - Beyaz kart + 1px line + 12px radius + soft shadow
   - Hero variant (Ciro / Sipariş): radial+linear blue gradient overlay
   - Sparkline kart altında, kart kenarına kadar uzanır (margin: 0 -16px)
   - JetBrains Mono kpi-value (count-up animation hedef)
   - Sparkline soft draw-in (1s) + end-dot ring (live)
   - Info popover position:fixed, 224px, click-toggle
   - prefers-reduced-motion: all animations off

   Uygulama hedefi:
   - #overviewTab .tm-kpi-card  (Genel Bakış)
   - .tm-live-page .tm-kpi      (Canlı Performans)
   Her ikisini tek tasarım ailesine getirir.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --tmkp-line: #e7ebf1;
  --tmkp-line-strong: #dbe5ef;
  --tmkp-ink: #0f172a;
  --tmkp-ink-2: #475569;
  --tmkp-mute: #94a3b8;
  --tmkp-primary: #0175e4;
  --tmkp-primary-deep: #0163c2;
  --tmkp-success: #16a34a;
  --tmkp-danger: #dc2626;
  --tmkp-accent: #fd751f;
}

html.dark-mode {
  --tmkp-line: #1e293b;
  --tmkp-line-strong: #334155;
  --tmkp-ink: #f1f5f9;
  --tmkp-ink-2: #cbd5e1;
  --tmkp-mute: #64748b;
}

/* ──────────────────────────────────────────────────────────────────────
   1) UNIFIED CARD CHASSIS — applies to BOTH .tm-kpi-card (Overview) and
   .tm-kpi (Live). High-specificity chain to defeat older overrides.
   ────────────────────────────────────────────────────────────────────── */
html body #overviewTab .tm-kpi-card.tm-kpi-card--premium,
html body #overviewTab .tm-kpi-grid--primary > .tm-kpi-card,
html body .tm-live-page .tm-kpi {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  border: 1px solid var(--tmkp-line) !important;
  border-radius: 12px !important;
  padding: 15px 16px 0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden !important;
  min-height: 178px !important;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease !important;
}
html.dark-mode body #overviewTab .tm-kpi-card,
html.dark-mode body #overviewTab .tm-kpi-grid--primary > .tm-kpi-card,
html.dark-mode body .tm-live-page .tm-kpi {
  background: #161c23 !important;
  border-color: var(--tmkp-line) !important;
}

html body #overviewTab .tm-kpi-grid--primary > .tm-kpi-card:hover,
html body .tm-live-page .tm-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.09);
  border-color: var(--tmkp-line-strong);
}

/* ──────────────────────────────────────────────────────────────────────
   2) HEAD: icon + label + (live badge or info button) — both variants
   share the same flex row layout.
   ────────────────────────────────────────────────────────────────────── */
html body #overviewTab .tm-kpi-card .tm-kpi-card__head,
html body .tm-live-page .tm-kpi .tm-kpi__head {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  position: relative !important;
  z-index: 3 !important;
  padding: 0 !important;
}

html body #overviewTab .tm-kpi-card .tm-kpi-card__icon,
html body .tm-live-page .tm-kpi .tm-kpi__icon {
  position: static !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 7px !important;
  background: #f1f5f9 !important;
  color: var(--tmkp-ink-2) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
html body #overviewTab .tm-kpi-card .tm-kpi-card__icon svg,
html body #overviewTab .tm-kpi-card .tm-kpi-card__icon i,
html body .tm-live-page .tm-kpi .tm-kpi__icon svg,
html body .tm-live-page .tm-kpi .tm-kpi__icon i {
  width: 15px !important;
  height: 15px !important;
}

html body #overviewTab .tm-kpi-card .tm-kpi-card__label,
html body .tm-live-page .tm-kpi .tm-kpi__label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--tmkp-ink) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

/* Info trigger (existing .tm-kpi-card__info kept; restyled) */
html body #overviewTab .tm-kpi-card .tm-kpi-card__info,
html body #overviewTab .tm-kpi-card .tm-kpi-card__info--pop {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  bottom: auto !important;
  left: auto !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--tmkp-mute) !important;
  border: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 150ms ease, color 150ms ease !important;
  z-index: 4 !important;
}
html body #overviewTab .tm-kpi-card .tm-kpi-card__info svg,
html body #overviewTab .tm-kpi-card .tm-kpi-card__info i {
  width: 14px !important;
  height: 14px !important;
}
html body #overviewTab .tm-kpi-card .tm-kpi-card__info:hover {
  background: #f1f5f9 !important;
  color: var(--tmkp-ink-2) !important;
}
html body #overviewTab .tm-kpi-card .tm-kpi-card__info[aria-expanded="true"] {
  background: var(--tmkp-primary) !important;
  color: #fff !important;
}

/* ──────────────────────────────────────────────────────────────────────
   3) VALUE + DELTA — JetBrains Mono, monospaced numbers, tight kerning
   ────────────────────────────────────────────────────────────────────── */
html body #overviewTab .tm-kpi-card .tm-kpi-card__value,
html body .tm-live-page .tm-kpi .tm-kpi__value {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: var(--tmkp-ink) !important;
  font-variant-numeric: tabular-nums !important;
  margin-top: 13px !important;
  padding-right: 32px !important;       /* leave room for info icon */
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 3 !important;
}

html body #overviewTab .tm-kpi-card .tm-kpi-card__delta,
html body .tm-live-page .tm-kpi .tm-kpi__row {
  margin-top: 9px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  position: relative !important;
  z-index: 3 !important;
}

html body #overviewTab .tm-kpi-card .tm-kpi-card__delta-badge,
html body .tm-live-page .tm-kpi .tm-kpi__delta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 2px 8px 2px 6px !important;
  border-radius: 999px !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  transition: background 200ms ease !important;
}
html body #overviewTab .tm-kpi-card .tm-kpi-card__delta-badge.positive,
html body #overviewTab .tm-kpi-card .tm-kpi-card__delta-badge--up,
html body .tm-live-page .tm-kpi .tm-kpi__delta.is-up {
  background: #dcfce7 !important;
  color: #15803d !important;
}
html body #overviewTab .tm-kpi-card .tm-kpi-card__delta-badge.negative,
html body #overviewTab .tm-kpi-card .tm-kpi-card__delta-badge--down,
html body .tm-live-page .tm-kpi .tm-kpi__delta.is-down {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}
html body #overviewTab .tm-kpi-card .tm-kpi-card__delta-period,
html body .tm-live-page .tm-kpi .tm-kpi__caption {
  font-size: 11.5px !important;
  color: var(--tmkp-mute) !important;
  font-weight: 500 !important;
}

/* ──────────────────────────────────────────────────────────────────────
   4) SPARKLINE / CHART AREA — pinned to bottom, edge-to-edge
   ────────────────────────────────────────────────────────────────────── */
html body #overviewTab .tm-kpi-card .tm-kpi-card__sparkline,
html body #overviewTab .tm-kpi-card .tm-overview-sparkline,
html body #overviewTab .tm-kpi-card svg[data-sparkline],
html body .tm-live-page .tm-kpi .tm-live-spark {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: calc(100% + 32px) !important;
  height: 62px !important;
  margin: auto -16px 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Sparkline path styling */
#overviewTab .tm-kpi-card .tm-kpi-card__sparkline-line,
.tm-live-page .tm-kpi .tm-kpi-card__sparkline-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Line fade-in — works on existing SVG paths without pathLength attribute.
   For a true left-to-right draw we'd need pathLength="1" on every path; for
   now a smooth opacity fade gives the perceived liveness without breaking
   any current SVG markup. */
@keyframes tmkpFadeIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
#overviewTab .tm-kpi-card .tm-kpi-card__sparkline-line {
  opacity: 0;
  animation: tmkpFadeIn 0.8s cubic-bezier(0.45, 0, 0.2, 1) 250ms forwards;
}
#overviewTab .tm-kpi-card .tm-kpi-card__sparkline-area {
  opacity: 0;
  animation: tmkpFadeIn 0.9s cubic-bezier(0.45, 0, 0.2, 1) 200ms forwards;
}

/* Entrance — fade up, staggered by JS via inline style */
@keyframes tmkpEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ──────────────────────────────────────────────────────────────────────
   5) HERO VARIANT (accent) — blue gradient with white text
   Applied via .tm-kpi-card--hero (Overview) or .tm-kpi--hero (Live)
   ────────────────────────────────────────────────────────────────────── */
html body #overviewTab .tm-kpi-card.tm-kpi-card--hero,
html body .tm-live-page .tm-kpi.tm-kpi--hero {
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(115, 183, 254, 0.45) 0%, transparent 50%),
    linear-gradient(145deg, #0163c2 0%, #0175e4 58%, #0b5cb0 100%) !important;
  border: 0 !important;
  box-shadow: 0 8px 24px rgba(1, 99, 194, 0.28) !important;
  color: #fff !important;
}
html body #overviewTab .tm-kpi-card.tm-kpi-card--hero:hover,
html body .tm-live-page .tm-kpi.tm-kpi--hero:hover {
  box-shadow: 0 14px 36px rgba(1, 99, 194, 0.34) !important;
}
html body #overviewTab .tm-kpi-card.tm-kpi-card--hero .tm-kpi-card__icon,
html body .tm-live-page .tm-kpi.tm-kpi--hero .tm-kpi__icon {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}
html body #overviewTab .tm-kpi-card.tm-kpi-card--hero .tm-kpi-card__label,
html body .tm-live-page .tm-kpi.tm-kpi--hero .tm-kpi__label {
  color: #fff !important;
}
html body #overviewTab .tm-kpi-card.tm-kpi-card--hero .tm-kpi-card__value,
html body .tm-live-page .tm-kpi.tm-kpi--hero .tm-kpi__value {
  color: #fff !important;
}
html body #overviewTab .tm-kpi-card.tm-kpi-card--hero .tm-kpi-card__info {
  color: rgba(255, 255, 255, 0.75) !important;
}
html body #overviewTab .tm-kpi-card.tm-kpi-card--hero .tm-kpi-card__info:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}
html body #overviewTab .tm-kpi-card.tm-kpi-card--hero .tm-kpi-card__delta-badge,
html body .tm-live-page .tm-kpi.tm-kpi--hero .tm-kpi__delta {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}
html body #overviewTab .tm-kpi-card.tm-kpi-card--hero .tm-kpi-card__delta-period,
html body .tm-live-page .tm-kpi.tm-kpi--hero .tm-kpi__caption {
  color: rgba(255, 255, 255, 0.78) !important;
}
/* Hero sparkline: stroke white */
#overviewTab .tm-kpi-card.tm-kpi-card--hero .tm-kpi-card__sparkline-line,
.tm-live-page .tm-kpi.tm-kpi--hero .tm-kpi-card__sparkline-line {
  stroke: #ffffff;
}
/* Hero ::before stripe (existing) suppressed — we own the background */
#overviewTab .tm-kpi-card.tm-kpi-card--hero::before {
  display: none !important;
}

/* Soft radial glow inside hero — uses ::after so it doesn't conflict with
   pre-existing ::before usages on .tm-kpi-card */
html body #overviewTab .tm-kpi-card.tm-kpi-card--hero::after,
html body .tm-live-page .tm-kpi.tm-kpi--hero::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -70px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 65%);
  pointer-events: none;
  z-index: 1;
}

/* ──────────────────────────────────────────────────────────────────────
   6) LIVE BADGE (existing .tm-live-pulseline / new .tm-kpi-livebadge)
   ────────────────────────────────────────────────────────────────────── */
.tm-kpi-livebadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 2px 8px 2px 7px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.tm-kpi-livebadge .live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tmkp-danger);
  animation: tmkpPulseDot 1.4s ease-in-out infinite;
}
.tm-live-page .tm-kpi.tm-kpi--hero .tm-kpi-livebadge {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
@keyframes tmkpPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.7); }
}

/* ──────────────────────────────────────────────────────────────────────
   7) SKELETON STATE — same chassis, animated shimmer placeholders
   Specificity: 5-class chain mirrors `dashboard-overview-real-spacing` +
   `kpi-card-unification` v1 (which would otherwise keep skeleton at 150px
   while loaded grows to 198-225). Real-deploy audit measured 72px delta;
   here we force both states to the SAME min-height so loaded content
   (value + delta + 62px sparkline) and skeleton placeholder align.
   ────────────────────────────────────────────────────────────────────── */
/* CRITICAL chain — must include `.tm-kpi-card.tmv2-metric-card` to defeat
   `dashboard-overview-real-spacing-2026-06-07.css:44` which sets min-h:80px
   on loaded cards via 6-class chain. Without `.tmv2-metric-card` here, our
   rule loses at specificity (0,0,2,2,5) vs theirs (0,0,2,2,6) — and only
   skeletons get sized, leading to the 24-82px hydrate jump we observed. */
html body #tmv2App #overviewTab .overview-content-compact-2026-06-07 .overview-dash-v2 .kpi-cards-wrapper .tm-kpi-card.tm-kpi-card--skeleton,
html body #tmv2App #overviewTab .overview-content-compact-2026-06-07 .overview-dash-v2 .kpi-cards-wrapper .tm-kpi-card.tmv2-metric-card,
html body #tmv2App #overviewTab .overview-content-compact-2026-06-07 .overview-dash-v2 .kpi-cards-wrapper .tm-kpi-card.tmv2-kpi,
html body #tmv2App #overviewTab .overview-content-compact-2026-06-07 .overview-dash-v2 .kpi-cards-wrapper .tm-kpi-card,
html body #tmv2App #overviewTab .overview-content-compact-2026-06-07 .tm-kpi-grid--primary > .tm-kpi-card,
html body #overviewTab .tm-kpi-grid--primary > .tm-kpi-card,
html body #overviewTab #kpi-skeleton-loader .tm-kpi-card,
html body #overviewTab .tm-kpi-card.tm-kpi-card--skeleton,
html body #overviewTab .tm-kpi-card.tmv2-metric-card,
html body #overviewTab .tm-kpi-card.tmv2-kpi,
html body #overviewTab .tm-kpi-card {
  min-height: 222px !important;     /* matches measured loaded height @ 1440 */
  padding: 15px 16px 0 !important;
  border-radius: 12px !important;
}
@keyframes tmkpSkelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
html body #overviewTab .tm-kpi-card.tm-kpi-card--skeleton::before,
html body #overviewTab #kpi-skeleton-loader .tm-kpi-card::before {
  content: "";
  position: absolute !important;
  top: 18px !important;
  left: 50px !important;
  width: 50% !important;
  height: 12px !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg, #e7ebf1 0%, #f1f5f9 50%, #e7ebf1 100%) !important;
  background-size: 200% 100% !important;
  animation: tmkpSkelShimmer 1.4s ease-in-out infinite !important;
  display: block !important;
  opacity: 1 !important;
}
html body #overviewTab .tm-kpi-card.tm-kpi-card--skeleton::after,
html body #overviewTab #kpi-skeleton-loader .tm-kpi-card::after {
  content: "";
  position: absolute !important;
  top: 50px !important;
  left: 16px !important;
  width: 60% !important;
  height: 24px !important;
  border-radius: 6px !important;
  background: linear-gradient(90deg, #e7ebf1 0%, #f1f5f9 50%, #e7ebf1 100%) !important;
  background-size: 200% 100% !important;
  animation: tmkpSkelShimmer 1.4s ease-in-out infinite 0.15s !important;
  display: block !important;
  opacity: 1 !important;
}

/* ──────────────────────────────────────────────────────────────────────
   8) RESPONSIVE — mirror reference (1100 → 2-col; 640 → 1-col)
   Keeps existing #overviewTab .tm-kpi-grid--primary chains.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  html body #overviewTab .tm-kpi-grid--primary,
  html body #overviewTab #kpi-actual-content .tm-kpi-grid--primary,
  html body #overviewTab #kpi-skeleton-loader .tm-kpi-grid--primary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* Mobile 2-col ≤ 575.98 — uses .kpi-cards-wrapper + .tm-kpi-grid double-class
   to beat the unification + ui-polish chains that also live at this breakpoint. */
@media (max-width: 575.98px) {
  html body #overviewTab .kpi-cards-wrapper .tm-kpi-grid.tm-kpi-grid--primary,
  html body #overviewTab .kpi-cards-wrapper .tm-kpi-grid.tm-kpi-grid--primary.tm-kpi-grid--compact-mobile,
  html body #overviewTab #kpi-actual-content .tm-kpi-grid.tm-kpi-grid--primary,
  html body #overviewTab #kpi-skeleton-loader .tm-kpi-grid.tm-kpi-grid--primary,
  html body #tmv2App #overviewTab .overview-content-compact-2026-06-07 .tm-kpi-grid--primary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  /* Live 2-col mirror */
  html body .tm-live-page .tm-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* Very narrow ≤ 360 — 1-col fallback (still fits hero gradient nicely) */
@media (max-width: 360px) {
  html body #overviewTab .kpi-cards-wrapper .tm-kpi-grid.tm-kpi-grid--primary,
  html body #overviewTab #kpi-actual-content .tm-kpi-grid.tm-kpi-grid--primary,
  html body #overviewTab #kpi-skeleton-loader .tm-kpi-grid.tm-kpi-grid--primary,
  html body .tm-live-page .tm-kpi-row {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile card sizing (≤ 575.98) — compact but readable */
@media (max-width: 575.98px) {
  html body #tmv2App #overviewTab .overview-content-compact-2026-06-07 .overview-dash-v2 .kpi-cards-wrapper .tm-kpi-card.tm-kpi-card--skeleton,
  html body #tmv2App #overviewTab .overview-content-compact-2026-06-07 .overview-dash-v2 .kpi-cards-wrapper .tm-kpi-card.tmv2-metric-card,
  html body #tmv2App #overviewTab .overview-content-compact-2026-06-07 .overview-dash-v2 .kpi-cards-wrapper .tm-kpi-card.tmv2-kpi,
  html body #tmv2App #overviewTab .overview-content-compact-2026-06-07 .overview-dash-v2 .kpi-cards-wrapper .tm-kpi-card,
  html body #tmv2App #overviewTab .overview-content-compact-2026-06-07 .tm-kpi-grid--primary > .tm-kpi-card,
  html body #overviewTab .tm-kpi-grid--primary > .tm-kpi-card,
  html body #overviewTab #kpi-skeleton-loader .tm-kpi-card,
  html body #overviewTab .tm-kpi-card.tm-kpi-card--skeleton,
  html body #overviewTab .tm-kpi-card.tmv2-metric-card,
  html body #overviewTab .tm-kpi-card.tmv2-kpi,
  html body #overviewTab .tm-kpi-card,
  html body .tm-live-page .tm-kpi {
    min-height: 220px !important;     /* mobile skel + loaded both 220 — proven loaded ~225 needs ~220 floor */
    padding: 14px 14px 0 !important;
  }
  html body #overviewTab .tm-kpi-card .tm-kpi-card__value,
  html body .tm-live-page .tm-kpi .tm-kpi__value {
    font-size: 20px !important;
    padding-right: 28px !important;
  }
  html body #overviewTab .tm-kpi-card .tm-kpi-card__icon,
  html body .tm-live-page .tm-kpi .tm-kpi__icon {
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
  }
  html body #overviewTab .tm-kpi-card .tm-kpi-card__icon svg,
  html body #overviewTab .tm-kpi-card .tm-kpi-card__icon i,
  html body .tm-live-page .tm-kpi .tm-kpi__icon svg,
  html body .tm-live-page .tm-kpi .tm-kpi__icon i {
    width: 13px !important;
    height: 13px !important;
  }
  html body #overviewTab .tm-kpi-card .tm-kpi-card__sparkline,
  html body #overviewTab .tm-kpi-card svg[data-sparkline],
  html body .tm-live-page .tm-kpi .tm-live-spark {
    height: 48px !important;
    margin: auto -13px 0 !important;
    width: calc(100% + 26px) !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   9) MOTION RESPECT
   ────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html body #overviewTab .tm-kpi-card .tm-kpi-card__sparkline-line,
  html body #overviewTab .tm-kpi-card .tm-kpi-card__sparkline-area,
  html body .tm-live-page .tm-kpi .tm-kpi-card__sparkline-line {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
  html body #overviewTab .tm-kpi-card,
  html body .tm-live-page .tm-kpi {
    transition: none !important;
  }
  html body #overviewTab .tm-kpi-card:hover,
  html body .tm-live-page .tm-kpi:hover {
    transform: none !important;
  }
  html body #overviewTab .tm-kpi-card.tm-kpi-card--skeleton::before,
  html body #overviewTab .tm-kpi-card.tm-kpi-card--skeleton::after,
  .tm-kpi-livebadge .live-dot {
    animation: none !important;
  }
}