/* W14 — Snapshot row layout (Total User Tickets / SLA / NPS Score).
   Per spec §3:
     3 visible → equal thirds, full width
     2 visible → ~45% each, justified center
     1 visible → ~40%, centered
     0 visible → container is omitted entirely (handled in SnapshotRow.razor) */

.snapshot-row {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 24px 0;
}

.snapshot-tile {
    position: relative;
    flex: 0 1 33%;
    min-width: 220px;
    max-width: 360px;
    padding: 20px 24px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    text-align: center;
}

.snapshot-tile__hide-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    transition: opacity 120ms ease;
}

.snapshot-tile:hover .snapshot-tile__hide-icon,
.snapshot-tile:focus-within .snapshot-tile__hide-icon {
    opacity: 1;
}

.snapshot-tile__header {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 12px;
}

.snapshot-tile__numbers {
    display: flex;
    justify-content: space-around;
    align-items: baseline;
}

.snapshot-tile__metric {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.snapshot-tile__big {
    font-size: 36px;
    font-weight: 700;
    color: #0C78B9; /* RG blue per brand palette */
    line-height: 1.1;
}

.snapshot-tile__big--solo {
    margin: 8px 0;
}

.snapshot-tile__label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
}

.snapshot-tile__footer {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    margin-top: 12px;
}

.snapshot-tile__error {
    font-size: 13px;
    color: var(--mud-palette-warning);
    padding: 12px 0;
}