/*!
 * Landing chrome — unique filename (nginx caches /css/ immutable).
 *
 * Hero KPI tiles clipped their bar / spark / meter graphs after
 * 20260908herofit (120px) and 20260910typesize (96px on short desktops)
 * locked max-height with overflow:hidden. Restore enough tile height for
 * the graphs and pin the sparkline to the bottom of every card so it
 * cannot be squeezed out of view. Desktop and phone share the same
 * graph chrome (parity).
 */

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .kpi-card,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card {
  --kpi-graph-h: 2.35rem;
  overflow: hidden !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__bars,
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__avatars,
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__meter,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__bars,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__avatars,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__meter {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
  height: auto !important;
  min-height: 1.15rem !important;
  max-height: none !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__bars,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__bars {
  align-items: flex-end !important;
  gap: 0.22rem !important;
  height: 1.55rem !important;
  min-height: 1.55rem !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__bars span,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__bars span {
  display: block !important;
  width: 0.38rem !important;
  min-height: 0.35rem !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #38bdf8, #6366f1) !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__bars span:nth-child(1),
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__bars span:nth-child(1) { height: 38% !important; }
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__bars span:nth-child(2),
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__bars span:nth-child(2) { height: 52% !important; }
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__bars span:nth-child(3),
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__bars span:nth-child(3) { height: 46% !important; }
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__bars span:nth-child(4),
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__bars span:nth-child(4) { height: 72% !important; }
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__bars span:nth-child(5),
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__bars span:nth-child(5) { height: 96% !important; }

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--compliance .kpi-card__bars span,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--compliance .kpi-card__bars span {
  background: linear-gradient(180deg, #7dd3fc, #38bdf8) !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--compliance .kpi-card__bars span:nth-child(1),
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--compliance .kpi-card__bars span:nth-child(1) { height: 70% !important; }
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--compliance .kpi-card__bars span:nth-child(2),
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--compliance .kpi-card__bars span:nth-child(2) { height: 82% !important; }
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--compliance .kpi-card__bars span:nth-child(3),
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--compliance .kpi-card__bars span:nth-child(3) { height: 76% !important; }
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--compliance .kpi-card__bars span:nth-child(4),
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--compliance .kpi-card__bars span:nth-child(4) { height: 88% !important; }
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--compliance .kpi-card__bars span:nth-child(5),
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--compliance .kpi-card__bars span:nth-child(5) { height: 80% !important; }

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__avatars,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__avatars {
  align-items: center !important;
  min-height: 1.15rem !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__avatars span,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__avatars span {
  display: block !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  min-width: 1.15rem !important;
  min-height: 1.15rem !important;
  border-radius: 999px !important;
  border: 2px solid #0b1224 !important;
  margin-left: -0.35rem !important;
  background: linear-gradient(135deg, #34d399, #0891b2) !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__avatars span:first-child,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__avatars span:first-child {
  margin-left: 0 !important;
  background: linear-gradient(135deg, #38bdf8, #6366f1) !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__avatars span:nth-child(3),
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__avatars span:nth-child(3) {
  background: linear-gradient(135deg, #f472b6, #f59e0b) !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__meter,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__meter {
  width: 100% !important;
  height: 0.42rem !important;
  min-height: 0.42rem !important;
  border-radius: 999px !important;
  background: rgb(251 191 36 / 0.18) !important;
  overflow: hidden !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__meter span,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__meter span {
  display: block !important;
  width: 62% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
}

/* Bottom area-chart: sits inside the tile so overflow:hidden cannot drop it. */
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__spark,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__spark {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: var(--kpi-graph-h) !important;
  min-height: var(--kpi-graph-h) !important;
  max-height: var(--kpi-graph-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: visible !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__spark-fill,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__spark-fill {
  fill: rgb(56 189 248 / 0.28) !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__spark-line,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__spark-line {
  fill: none !important;
  stroke: #67e8f9 !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--revenue .kpi-card__spark-fill,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--revenue .kpi-card__spark-fill {
  fill: rgb(99 102 241 / 0.32) !important;
}
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--revenue .kpi-card__spark-line,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--revenue .kpi-card__spark-line {
  stroke: #a5b4fc !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--workforce .kpi-card__spark-fill,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--workforce .kpi-card__spark-fill {
  fill: rgb(16 185 129 / 0.3) !important;
}
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--workforce .kpi-card__spark-line,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--workforce .kpi-card__spark-line {
  stroke: #6ee7b7 !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--outstanding .kpi-card__spark-fill,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--outstanding .kpi-card__spark-fill {
  fill: rgb(245 158 11 / 0.32) !important;
}
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--outstanding .kpi-card__spark-line,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--outstanding .kpi-card__spark-line {
  stroke: #fcd34d !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--compliance .kpi-card__spark-fill,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--compliance .kpi-card__spark-fill {
  fill: rgb(56 189 248 / 0.3) !important;
}
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--compliance .kpi-card__spark-line,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--compliance .kpi-card__spark-line {
  stroke: #7dd3fc !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__meta-row,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__meta-row {
  position: relative !important;
  z-index: 2 !important;
  margin-top: auto !important;
}

@media (min-width: 901px) {
  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-cc-kpi-row,
  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-hero-visual,
  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .erp-cc-kpi-row,
  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .erp-hero-visual.erp-cc-kpi-row,
  html body.erp-body #landing .erp-hero.erp-hero--command-center .erp-cc-kpi-row,
  html body.erp-body #landing .erp-hero.erp-hero--command-center .erp-hero-visual.erp-cc-kpi-row {
    grid-auto-rows: 148px !important;
  }

  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .kpi-card,
  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card,
  html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card {
    height: 148px !important;
    min-height: 148px !important;
    max-height: 148px !important;
    padding: 0.7rem 0.8rem 2.35rem !important;
  }
}

/* Short desktops: keep Get Started on screen. Overlay sparklines still show
   at 120px; typesize's 96px lock is what hid the graphs. */
@media (min-width: 901px) and (max-height: 800px) {
  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-cc-kpi-row,
  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-hero-visual,
  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .erp-cc-kpi-row,
  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .erp-hero-visual.erp-cc-kpi-row,
  html body.erp-body #landing .erp-hero.erp-hero--command-center .erp-cc-kpi-row,
  html body.erp-body #landing .erp-hero.erp-hero--command-center .erp-hero-visual.erp-cc-kpi-row {
    grid-auto-rows: 120px !important;
  }

  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .kpi-card,
  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card,
  html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card {
    --kpi-graph-h: 1.7rem;
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    padding: 0.45rem 0.7rem 1.7rem !important;
  }

  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__bars,
  html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__bars {
    height: 1rem !important;
    min-height: 1rem !important;
  }

  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__avatars,
  html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__avatars {
    min-height: 1rem !important;
  }
}

@media (max-width: 900px) {
  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card,
  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .kpi-card,
  html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card {
    height: auto !important;
    min-height: 7.5rem !important;
    max-height: none !important;
    padding: 0.85rem 0.9rem 2.45rem !important;
  }
}