/* Dashboard stat (KPI) cards.
 *
 * An icon orb + the metric value sit on one row (.kw-stat__head), label + sub
 * stacked under. A left accent strip + the orb encode the card's accent
 * (--teal/--blue/--purple/--navy/--gold); the icon inside the orb stays WHITE
 * (gold orb uses a dark icon) per the brand rule. Value uses the numeric mono
 * face. Admin dashboard, light theme. */

.kw-stat {
  --kw-stat-accent: var(--kw-blue);

  position: relative;
  display: block;
  padding: 1.125rem 1.25rem;
  background: var(--kw-surface);
  border: 1px solid var(--kw-border-color);
  border-radius: var(--kw-radius-lg);
  box-shadow: var(--kw-shadow-card);
  text-decoration: none;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Accent strip down the inline-start edge (flips under RTL). */
.kw-stat::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; inset-inline-start: 0;
  width: 3px;
  background: var(--kw-stat-accent);
}

.kw-stat:hover {
  transform: translateY(-2px);
  border-color: var(--kw-stat-accent);
  box-shadow: var(--kw-shadow-hover);
}

/* Row 1: icon orb + the big number, side by side. */
.kw-stat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

/* Icon orb — accent-coloured disc, WHITE icon. */
.kw-stat__icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--kw-stat-accent);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--kw-stat-accent) 55%, transparent);
}
.kw-stat__icon .kw-ico { color: #fff; }

.kw-stat__value {
  font-family: var(--kw-font-mono-num);
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--kw-fg);
}

.kw-stat__label {
  margin-top: .625rem;
  font-family: var(--kw-font-mono);
  font-size: .75rem;
  color: var(--kw-fg-muted);
}

.kw-stat__sub {
  margin-top: .2rem;
  font-size: .6875rem;
  color: var(--kw-fg-subtle);
}

/* Accent modifiers. */
.kw-stat--teal   { --kw-stat-accent: var(--kw-teal); }
.kw-stat--blue   { --kw-stat-accent: var(--kw-blue); }
.kw-stat--purple { --kw-stat-accent: var(--kw-violet); }
.kw-stat--violet { --kw-stat-accent: var(--kw-violet); }
.kw-stat--navy   { --kw-stat-accent: var(--kw-navy); }
/* Gold accent uses a dark icon for contrast on the gold orb. */
.kw-stat--gold   { --kw-stat-accent: var(--kw-signal-gold); }
.kw-stat--gold .kw-stat__icon,
.kw-stat--gold .kw-stat__icon .kw-ico { color: #2A1E00; }