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

/*a, .btn-link {*/
/*    color: #006bb7;*/
/*}*/

a {
    text-decoration: none;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


:root,
:root.light {
    --bg-color: #f7f5f2;
    --surface: #ffffff;
    --text-grey: #9a9a9a;
    --text-primary: #0e0e0e;
    --border-color: #cacaca;
}

/* Pie chart legend list (used by the home dashboard cards and their detail dialogs) */
.ui-pie-legend-list {
    flex: 0 0 auto;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.75rem;
}

.ui-pie-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ui-pie-legend-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
}

.ui-pie-legend-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-pie-legend-count {
    font-weight: 700;
    margin-left: auto;
    padding-left: 6px;
    white-space: nowrap;
}

/* Fixed-height master/detail layout for the statistics detail dialogs:
   header (date/year filter + chart) stays put, only the two table panels below scroll. */
.ui-stat-dialog {
    display: flex;
    flex-direction: column;
    height: 72vh;
    max-height: 680px;
    min-height: 460px;
}

.ui-stat-dialog-header {
    flex: 0 0 auto;
}

.ui-stat-dialog-header .rz-chart {
    height: 220px;
}

.ui-stat-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: 16px;
    margin-top: 12px;
}

.ui-stat-master-panel,
.ui-stat-detail-panel {
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}

.ui-stat-master-panel {
    flex: 0 0 38%;
    min-width: 220px;
}

.ui-stat-detail-panel {
    flex: 1 1 auto;
    min-width: 0;
}

.ui-stat-master-panel table thead th,
.ui-stat-detail-panel table thead th {
    position: sticky;
    top: 0;
    background: var(--mud-palette-surface, #fff);
    z-index: 1;
}

.ui-stat-master-row {
    cursor: pointer;
}

.ui-stat-master-row.selected {
    background-color: var(--mud-palette-primary-hover, rgba(25, 118, 210, 0.08));
}

/* Use Class (not Style) to narrow MudDatePicker fields: MudBlazor's picker copies the
   component's Style string onto the popup calendar's own paper too, which would shrink
   the calendar popup to the same width as the field. Class is not shared with the popup. */
.ui-stat-date-field {
    width: 175px;
}