/* ===== gp_kpi_cards_html (HTML form, scoped) =====
   The form's rules live here because Anvil's server strips a <style> block out
   of an HTML template. Linked eagerly from anvil.yaml native_deps.head_html,
   which is what styles the designer canvas as well as the running app.

   .gp-kpi-grid-inner is the form root, so its own three rules (the base and the
   two @media overrides) stay bare classes and everything below them is scoped
   :where(.gp-kpi-grid-inner), which adds no specificity and so cannot change
   which rule wins. The root gets no position/flex rule: this form is a leaf
   inside the dashboard shell, a plain block child of the shell's .gp-kpi-grid,
   which owns the margin, opacity and reveal transition.

   No order-flip risk. Every class below is declared and worn in this form alone
   — the shell's .gp-kpi-grid is a different class on the mount point div — and
   the section declares no .px-* class, so the dependency theme the runtime
   appends after every head link has nothing here to beat.

   No designer gate is needed: nothing here hides content until JavaScript runs.
   The cards render with their headings and a "-" placeholder on the canvas, the
   same as they do before the first data load. */

:where(.gp-kpi-grid-inner) .gp-kpi-card {
  background: var(--px-bg-card);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--px-border);
  box-shadow: var(--px-shadow);
  position: relative;
  overflow: hidden;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
:where(.gp-kpi-grid-inner) .gp-kpi-card:hover {
  transform: translateY(-3px);
}
:where(.gp-kpi-grid-inner) .gp-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
:where(.gp-kpi-grid-inner) .gp-kpi-card.gp-kpi-revenue::before {
  background: linear-gradient(90deg, var(--px-chart-emerald), transparent);
}
:where(.gp-kpi-grid-inner) .gp-kpi-card.gp-kpi-cost::before {
  background: linear-gradient(90deg, var(--px-chart-coral), transparent);
}
:where(.gp-kpi-grid-inner) .gp-kpi-card.gp-kpi-profit::before {
  background: linear-gradient(90deg, var(--px-chart-cyan), transparent);
}
:where(.gp-kpi-grid-inner) .gp-kpi-card.gp-kpi-margin::before {
  background: linear-gradient(90deg, var(--px-chart-violet), transparent);
}
:where(.gp-kpi-grid-inner) .gp-kpi-card-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--px-text-muted);
  margin-bottom: 0.5rem;
}
:where(.gp-kpi-grid-inner) .gp-kpi-card-value {
  font-family: 'Space Mono', monospace;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}
:where(.gp-kpi-grid-inner) .gp-kpi-revenue .gp-kpi-card-value { color: var(--px-chart-emerald); }
:where(.gp-kpi-grid-inner) .gp-kpi-cost .gp-kpi-card-value { color: var(--px-chart-coral); }
:where(.gp-kpi-grid-inner) .gp-kpi-profit .gp-kpi-card-value { color: var(--px-chart-cyan); }
:where(.gp-kpi-grid-inner) .gp-kpi-margin .gp-kpi-card-value { color: var(--px-chart-violet); }

:where(.gp-kpi-grid-inner) .gp-kpi-sub {
  font-size: 0.7rem;
  color: var(--px-text-muted);
  margin-top: 4px;
}
:where(.gp-kpi-grid-inner) .gp-kpi-sparkline {
  height: 40px;
  margin-top: 0.5rem;
}

.gp-kpi-grid-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 1200px) {
  .gp-kpi-grid-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .gp-kpi-grid-inner { grid-template-columns: 1fr; }
}