﻿/* ===== OO StatTile =====
   Kennzahl in einer Card: Symbol links, rechts daneben die große Zahl und darunter die Beschriftung.
   Size (oo-size-xs … oo-size-xl am Root) skaliert die Zahl über --oo-stat-tile-value-size.
   ======================= */

.oo-stat-tile {
    --oo-stat-tile-value-size: calc(var(--oo-font-size-xl) * 1.3);
    /* Kacheln nebeneinander nie schmaler als die Beschriftung braucht; in einem umbrechenden Stack wachsen sie gleichmäßig.
       min() verhindert Überlauf, wenn der Container selbst schmaler als 12rem ist. */
    min-width: min(12rem, 100%);
    flex: 1 1 12rem;
}

/* Im umbrechenden Stack mit StretchItems (stack.css: flex: 1; min-width: 0) die Mindestbreite behalten,
   sonst werden die Kacheln gestaucht statt umzubrechen. Wrap setzt der Stack als Inline-Style. */
.oo-stack[style*="flex-wrap:wrap"] > .oo-stat-tile {
    min-width: min(12rem, 100%);
    flex: 1 1 12rem;
}

.oo-stat-tile__content {
    display: flex;
    align-items: center;
    gap: var(--oo-space-3);
    box-sizing: border-box;
    min-width: 0;
}

.oo-stat-tile__icon {
    flex-shrink: 0;
}

.oo-stat-tile__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.oo-stat-tile__value {
    font-size: var(--oo-stat-tile-value-size);
    font-weight: 600;
    line-height: 1.1;
    /* Die Zahl bricht nur im Notfall; „/ Gesamt“ wandert per <wbr> als Ganzes in die nächste Zeile. */
    overflow-wrap: anywhere;
}

.oo-stat-tile__total {
    white-space: nowrap;
}

.oo-stat-tile__label {
    overflow-wrap: anywhere;
}

.oo-stat-tile__value--loading,
.oo-stat-tile__total,
.oo-stat-tile__label,
.oo-stat-tile__hint {
    color: var(--oo-color-text-subtle);
}

/* ── Größen ────────────────────────────────────────────────────────── */

.oo-stat-tile.oo-size-xs { --oo-stat-tile-value-size: var(--oo-font-size-lg); }
.oo-stat-tile.oo-size-sm { --oo-stat-tile-value-size: var(--oo-font-size-xl); }
.oo-stat-tile.oo-size-md { --oo-stat-tile-value-size: calc(var(--oo-font-size-xl) * 1.15); }
.oo-stat-tile.oo-size-lg { --oo-stat-tile-value-size: calc(var(--oo-font-size-xl) * 1.3); }
.oo-stat-tile.oo-size-xl { --oo-stat-tile-value-size: calc(var(--oo-font-size-xl) * 1.6); }

/* Symbol bei Size Xl größer als die Icon-Stufe Xl; !important wie in icon.css. */
.oo-stat-tile.oo-size-xl .oo-stat-tile__icon { font-size: calc(2.5rem * var(--oo-font-scale, 1)) !important; }

/* Kompakte Kacheln: weniger Innenabstand */
.oo-card.oo-stat-tile.oo-size-xs .oo-card__body,
.oo-card.oo-stat-tile.oo-size-sm .oo-card__body {
    padding: var(--oo-space-3);
}
