/* ============================================================
   .uk-stat-card — proposed canonical stat-card subsystem (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the location-detail Network-Identity card chrome in
   `public/css/location-detail.css`:

     .network-stat-card          -> .uk-stat-card
       (existing inner spans .stat-label / .stat-value / .stat-sublabel
        migrate to .uk-stat-label / .uk-stat-value / .uk-stat-sublabel
        — see Stat typography section.)

   Owns only the card chrome (bg + border + radius + padding) and the
   optional icon-row layout. The label/value/sublabel typography is provided
   by `.uk-stat-label` / `.uk-stat-value` / `.uk-stat-sublabel`. Grid
   layout sits outside — pair with `.uk-grid-cards` (or any host grid) when
   tiling multiple cards.

   Composes with: `.uk-icon-box` (Icon box section) when paired with
   `--with-icon`; `.uk-stat-label`, `.uk-stat-value`, `.uk-stat-sublabel`
   (Stat typography section) for the inner content.
   ============================================================ */

/* ============================================
   Root — vertical stack (default)
   ============================================ */
.uk-stat-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    min-width: 0;
}

/* ============================================
   Modifier — --with-icon
   ============================================
   Shifts to a row layout: icon-box on the left, uk-stat-card-body
   (label + value + optional sublabel stack) on the right. Body is the
   only required wrapper because it owns the `min-width: 0` so the value's
   `word-break: break-all` works inside flex.
   ============================================ */
.uk-stat-card--with-icon {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-md);
}

.uk-stat-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

/* ============================================
   Modifier — --centered
   ============================================
   Marketing variant: centred text + icon. Use for hero overlay tiles or
   landing splash cards (1-3 cards in a row, value-first layout).
   ============================================ */
.uk-stat-card--centered {
    align-items: center;
    text-align: center;
}

.uk-stat-card--centered .uk-stat-card-body {
    align-items: center;
}

/* ============================================
   Modifier — --compact
   ============================================
   Tighter padding for dense grids (5+ cards across).
   ============================================ */
.uk-stat-card--compact {
    padding: var(--space-md);
}

/* ============================================
   Modifier — --muted
   ============================================
   Drops the card background to the page bg — for contexts where the card
   sits on top of an already-elevated surface (modal, drawer) and the
   double border looks heavy.
   ============================================ */
.uk-stat-card--muted {
    background: var(--color-bg);
}