/* Tabs with a count badge (animal detail): MudBlazor floats the badge over the corner of the tab, so it covers the next tab and long counts ("99+") get clipped.
   Here the badge flows inside the tab, after its label, and the tab grows to fit it. Apply with Class="badged-tabs" on the MudTabs. */
.badged-tabs .mud-tab {
    overflow: visible;
    white-space: nowrap;
}

.badged-tabs .mud-tab .mud-tab-badge,
.badged-tabs .mud-tab .mud-badge-root,
.badged-tabs .mud-tab .mud-badge-wrapper {
    position: static;
    display: inline-flex;
    align-items: center;
    overflow: visible;
    margin-inline-start: 8px;
}

.badged-tabs .mud-tab .mud-badge {
    position: static;
    inset: auto;
    transform: none;
    min-width: 22px;
    width: auto;
    padding: 0 7px;
    white-space: nowrap;
    overflow: visible;
}

/* The count must read at a glance: bigger, bold, centered. */
.badged-tabs .mud-tab .mud-badge {
    min-height: 22px;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 0.2px;
    justify-content: center;
}

/* White on the yellow "warning" badge is hard to read: dark text there. */
.badged-tabs .mud-tab .mud-badge.mud-theme-warning {
    color: rgba(0, 0, 0, 0.87) !important;
}