/*
    Global CSS is deliberately minimal: everything themeable lives in the MudTheme
    (Client/Theme/AppTheme.cs). What remains here is Blazor framework chrome that
    renders outside the MudBlazor component tree.
*/

/* Blazor form-validation classes, emitted by EditForm outside MudBlazor's control. */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mud-palette-success);
}

.invalid {
    outline: 1px solid var(--mud-palette-error);
}

.validation-message {
    color: var(--mud-palette-error);
}

/* Rendered by the Blazor runtime itself, before/outside the app. */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

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

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

/*
    Two rules that must be global because they style markup MudBlazor renders itself
    (a MudTable row via RowClassFunc, and a group-footer cell via GroupFooterClass),
    which page-scoped CSS cannot reach. Previously these were duplicated inside
    component <style> blocks and re-injected on every render.
*/
.mud-table-cell-custom-group-footer {
    padding-bottom: 50px;
    text-align: right;
}

.mud-table-row.selected,
tr.selected {
    background-color: var(--mud-palette-dark) !important;
}

    tr.selected > td {
        color: var(--mud-palette-dark-text) !important;
    }

        tr.selected > td .mud-input {
            color: var(--mud-palette-dark-text) !important;
        }