html, body {
    font-family: Roboto, Helvetica, Arial, sans-serif;
}

/* Keyboard focus must always be visible (WCAG 2.4.7). MudBlazor removes the browser outline. */
:focus-visible {
    outline: 3px solid #1565C0 !important;
    outline-offset: 2px;
}

/* FocusOnNavigate moves focus to the page title so that screen readers announce the new page.
   The title is not interactive, so it needs no focus ring. */
h1:focus {
    outline: none !important;
}

.mud-breadcrumb-item.mud-disabled > * {
    color: var(--mud-palette-text-secondary);
}

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.page-header-title {
    min-width: 0;
}

.text-muted {
    color: var(--mud-palette-text-secondary);
}

.numeric {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.app-title:hover {
    text-decoration: none;
}

.org-chip.mud-chip {
    max-width: 45vw;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.8);
}

.org-chip .mud-icon-root {
    color: #fff;
}

.org-chip .mud-chip-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.signout-form {
    padding: 0 8px;
}

.signout-button {
    justify-content: flex-start;
    text-transform: none;
    padding-left: 8px;
}

.stat-tile {
    height: 100%;
}

/* Columns that a phone screen has no room for. The same data is in another column or table. */
@media (max-width: 599.98px) {
    .hide-xs {
        display: none;
    }
}

/* Touch targets of at least 44 px on touch screens (WCAG 2.5.5). */
@media (pointer: coarse) {
    .mud-button-root:not(.mud-chip) {
        min-height: 44px;
    }
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Something went wrong.";
}