/* MudBlazor overrides that apply across the application. */

/* ---- Checkboxes ---- */

/* Every checkbox is primary, ticked or not, so a list of them reads as one set of choices. Color="Primary"
   only reaches the ticked state, and a grid's select column takes no colour at all. A checkbox that sets
   its own colour for both states (UncheckedColor too, as the red confirmations do) keeps it. */
.mud-checkbox .mud-icon-button.mud-default-text:not(.mud-disabled) {
    color: var(--mud-palette-primary);
}

/* ---- Tables and data grids ---- */

/* A quiet header in the page's own colours rather than a coloured bar. Every table header, including the
   raw th of a MudSimpleTable. */
table th,
.mud-table-root .mud-table-head .mud-table-cell {
    background-color: var(--ms-surface-2);
    color: var(--mud-palette-text-secondary);
    font-family: var(--ms-font-ui);
    font-size: .75rem;
    font-weight: 600;
    border-bottom: 1px solid var(--ms-line-strong);
}

/* MudBlazor paints a fixed header's cells with the surface colour from a far more specific rule. A data grid
   renders its "no records" row as a th too, and that one is content rather than a heading. */
.mud-table-sticky-header th:not(.mud-table-empty-row) {
    background-color: var(--ms-surface-2) !important;
}

/* A fixed header sticks as one block, as MudBlazor's fixed footer does. MudBlazor makes each header cell sticky,
   and Chrome rounds those cells to pixels one by one, so a column edge at a fraction of a pixel could leave a
   1px gap showing the white table until the next repaint. Child combinators keep a nested grid's header out. */
.mud-table-sticky-header > .mud-table-container > * > .mud-table-root > .mud-table-head,
.mud-table-sticky-header > .mud-table-container > .mud-table-root > .mud-table-head {
    position: sticky;
    top: 0;
    z-index: 2;
}

.mud-table-sticky-header > .mud-table-container > * > .mud-table-root > .mud-table-head :is(.mud-table-cell, .mud-table-loading),
.mud-table-sticky-header > .mud-table-container > .mud-table-root > .mud-table-head :is(.mud-table-cell, .mud-table-loading) {
    position: static;
}

/* MudBlazor's loading bar is one header cell spanning 1000 columns. Under table-layout: fixed that lays the
   table out as 1000 columns, and while it shows, every column without a width of its own shrinks to a pixel.
   Out of the table's layout it lies along the header's bottom edge instead; a header that does not stick holds
   it by being relative. */
.mud-table-root > .mud-table-head {
    position: relative;
}

.mud-table-root > .mud-table-head .mud-table-loading,
.mud-table-sticky-header > .mud-table-container > * > .mud-table-root > .mud-table-head .mud-table-loading,
.mud-table-sticky-header > .mud-table-container > .mud-table-root > .mud-table-head .mud-table-loading {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
}

/* The header of a grid inside an expanded row, set apart from the outer one. */
.sub-grid table th {
    background-color: var(--mud-palette-background-gray) !important;
}

/* Column dividers, in grids that have them, sit on each cell's left edge in the header and the body alike.
   MudBlazor draws the body's on the right edge, which lands a pixel off the header's. */
.mud-table-bordered .mud-table-head th + th {
    border-left: 1px solid var(--mud-palette-table-lines);
}

.mud-table-bordered .mud-table-container .mud-table-root .mud-table-body .mud-table-row .mud-table-cell:not(:last-child),
.mud-simple-table.mud-table-bordered .mud-table-container table tbody tr td {
    border-right: none;
}

.mud-table-bordered .mud-table-container .mud-table-root .mud-table-body .mud-table-row .mud-table-cell + .mud-table-cell,
.mud-simple-table.mud-table-bordered .mud-table-container table tbody tr td + td {
    border-left: 1px solid var(--mud-palette-table-lines);
}

table th:first-child {
    border-top-left-radius: var(--mud-default-borderradius);
}

table th:last-child {
    border-top-right-radius: var(--mud-default-borderradius);
}

/* Dense cells padded evenly and a little tighter than MudBlazor's 16/24px. */
.mud-table-dense * .mud-table-row .mud-table-cell,
.mud-table-dense * .mud-table-row .mud-table-cell:last-child {
    padding: 6px 12px;
    padding-inline-start: 12px;
    padding-inline-end: 12px;
}

/* The sort, filter and column-menu buttons in a header, compact: at MudBlazor's size the three of them made
   every header wider than its title, and a grid of narrow columns wider than the page. The sort order number
   takes no room until there is one to show. */
.mud-table-head .column-options .mud-icon-button {
    padding: 3px;
}

.mud-table-head .column-options .mud-sort-index.invisible {
    display: none;
}

/* The filter button shows on hovering its header, and stays shown, filled, while a filter is set. Hidden
   rather than removed, so a column does not change width under the pointer. */
.mud-table-head .column-options .filter-button:not(.filtered) {
    opacity: 0;
    transition: opacity 120ms ease;
}

.mud-table-head th:hover .column-options .filter-button,
.mud-table-head .column-options .filter-button:focus-visible {
    opacity: 1;
}

.mud-table-head .column-options .filter-button.filtered {
    color: var(--mud-palette-primary);
}

/* No column menu: sorting cycles by clicking the header and a filter is cleared in its own panel. Grids set
   ShowColumnOptions="false" as they are reworked; this covers the rest until then. */
.mud-table-head .column-options .mud-menu {
    display: none;
}

/* Figures line up on their digits; headers and controls stay in the interface face. Qualified like
   MudBlazor's own typography rule for the cells, which it has to outrank. */
.mud-table-root .mud-table-body .mud-table-cell,
.mud-table-root .mud-table-foot .mud-table-cell {
    font-family: var(--ms-font-data);
    font-variant-numeric: tabular-nums;
}

.mud-table-root .mud-table-foot .mud-table-cell {
    font-weight: 600;
    border-top: 1px solid var(--ms-line-strong);
}

.mud-table-sticky-footer .mud-table-foot .mud-table-cell {
    background-color: var(--ms-surface-2) !important;
}

/* A field in a grid row has a faint line under it, which MudBlazor removes from its cell editor, so an empty cell
   still reads as something to type into. The same line under a field placed in a cell, so a row has one kind. */
.mud-data-grid .mud-table-cell.edit-mode-cell .mud-input.mud-input-underline:before,
.mud-data-grid .mud-table-body .mud-table-cell .mud-input.mud-input-underline:before {
    content: "\00a0";
    border-bottom-color: var(--mud-palette-lines-default);
}

.mud-data-grid .mud-table-row:hover .mud-table-cell.edit-mode-cell .mud-input.mud-input-underline:before,
.mud-data-grid .mud-table-body .mud-table-row:hover .mud-table-cell .mud-input.mud-input-underline:before {
    border-bottom-color: var(--mud-palette-lines-inputs);
}

/* A field placed in a row (a percentage, an owner to pick) reads at the row's size, as MudBlazor's own cell
   editor does, rather than at a form field's. ms-field-dense does the same for a field among small text
   anywhere else, such as a plain table or a step of a dialog laid out like one. */
.mud-table-root .mud-table-body .mud-table-cell .mud-input,
.mud-table-root .mud-table-body .mud-table-cell .mud-input .mud-input-root,
.mud-table-root .mud-table-body .mud-table-cell .mud-input .mud-input-slot,
.ms-field-dense .mud-input,
.ms-field-dense .mud-input .mud-input-root,
.ms-field-dense .mud-input .mud-input-slot {
    font-size: .875rem;
}

/* MudBlazor's own cell editor is dense, so in a vertically centred cell its line sits higher than a field from
   an EditTemplate. One height for both puts every line in the row at the same level. */
.mud-data-grid .mud-table-cell.edit-mode-cell .mud-input-underline > input.mud-input-root-margin-dense,
.mud-data-grid .mud-table-cell.edit-mode-cell .mud-input-underline > div.mud-input-slot.mud-input-root-margin-dense {
    padding-top: 6px;
}

/* ---- Buttons ---- */

/* Flat: colour says what a button does, a shadow adds nothing. */
.mud-button-filled,
.mud-button-filled:hover,
.mud-button-filled:active,
.mud-button-filled:focus-visible {
    box-shadow: none;
}

/* Avbryt and the like, a step quieter than the ink: text 6:1 or more and border 3:1 or more against the dialog
   and its action bar in both themes. */
.mud-button-outlined.mud-button-outlined-default:not(:disabled) {
    color: var(--mud-palette-text-secondary);
    border-color: var(--ms-ink-3);
}

.mud-button-outlined.mud-button-outlined-default:not(:disabled):hover {
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-text-secondary);
}

/* ---- Alerts ---- */

/* A bar down the leading edge and a wash of the same colour, with the text in ink. Warning washes in the
   brighter amber, so it cannot be mistaken for an error at a glance; its icon keeps the darker one. */
.mud-alert-text-normal, .mud-alert-outlined-normal { --ms-tone: var(--mud-palette-text-secondary); --ms-tone-ink: var(--mud-palette-text-secondary); }
.mud-alert-text-info, .mud-alert-outlined-info { --ms-tone: var(--mud-palette-info); --ms-tone-ink: var(--mud-palette-info); }
.mud-alert-text-success, .mud-alert-outlined-success { --ms-tone: var(--mud-palette-success); --ms-tone-ink: var(--mud-palette-success); }
.mud-alert-text-warning, .mud-alert-outlined-warning { --ms-tone: var(--ms-warning-accent); --ms-tone-ink: var(--mud-palette-warning); }
.mud-alert-text-error, .mud-alert-outlined-error { --ms-tone: var(--mud-palette-error); --ms-tone-ink: var(--mud-palette-error); }

.mud-alert[class*="mud-alert-text-"],
.mud-alert[class*="mud-alert-outlined-"] {
    border: 1px solid color-mix(in srgb, var(--ms-tone) 40%, transparent);
    border-left: 4px solid var(--ms-tone);
    background-color: color-mix(in srgb, var(--ms-tone) 10%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
}

:root[data-theme="dark"] .mud-alert[class*="mud-alert-text-"],
:root[data-theme="dark"] .mud-alert[class*="mud-alert-outlined-"] {
    background-color: color-mix(in srgb, var(--ms-tone) 16%, var(--mud-palette-surface));
}

.mud-alert[class*="mud-alert-text-"] .mud-alert-icon,
.mud-alert[class*="mud-alert-outlined-"] .mud-alert-icon {
    color: var(--ms-tone-ink);
}

/* ---- Fields: the label above the box ---- */

/* A field with a label gets it on a line of its own above the box, and one kind of box whichever variant it was
   declared with. A field without one - a grid cell's editor, a search box - keeps MudBlazor's own form. The
   :has() guards are what keep the two apart. */
.mud-input-control:has(> .mud-input-control-input-container > .mud-input-label) {
    margin-top: 0;
}

.mud-input-control:has(> .mud-input-control-input-container > .mud-input-label) > .mud-input-control-input-container {
    display: flex;
    flex-direction: column;
}

.mud-input-control > .mud-input-control-input-container > label.mud-input-label.mud-input-label-inputcontrol {
    position: static;
    order: -1;
    transform: none !important;
    max-width: 100%;
    margin: 0 0 5px;
    padding: 0 !important;
    background: none;
    color: var(--mud-palette-text-primary);
    font-family: var(--ms-font-ui);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.3;
    pointer-events: auto;
}

/* Lighter than the label in weight and colour, so the field's name and the note under it read as two things. */
.mud-input-control .mud-input-helper-text {
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
    font-family: var(--ms-font-ui);
    font-weight: 400;
    letter-spacing: 0;
}

.mud-input-control > .mud-input-control-input-container > .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: var(--mud-palette-primary);
}

/* The underlined variant drawn as the outlined box. */
.mud-input-control:has(> .mud-input-control-input-container > .mud-input-label) div.mud-input.mud-input-underline {
    margin-top: 0;
    padding: 0 12px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
}

.mud-input-control:has(> .mud-input-control-input-container > .mud-input-label) div.mud-input.mud-input-underline::before,
.mud-input-control:has(> .mud-input-control-input-container > .mud-input-label) div.mud-input.mud-input-underline::after {
    display: none;
}

.mud-input-control:has(> .mud-input-control-input-container > .mud-input-label) div.mud-input.mud-input-underline:hover:not(.mud-disabled) {
    border-color: var(--mud-palette-action-default);
}

.mud-input-control:has(> .mud-input-control-input-container > .mud-input-label) div.mud-input.mud-input-underline:focus-within {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.mud-input-control:has(> .mud-input-control-input-container > .mud-input-label) div.mud-input.mud-input-underline.mud-input-error {
    border-color: var(--mud-palette-error);
}

.mud-input-control:has(> .mud-input-control-input-container > .mud-input-label) div.mud-input.mud-input-underline.mud-disabled {
    border-color: var(--mud-palette-action-disabled);
}

/* The outlined border no longer opens a gap for a label sitting in it. */
.mud-input-control:has(> .mud-input-control-input-container > .mud-input-label) .mud-input.mud-input-outlined > .mud-input-outlined-border legend {
    width: 0 !important;
    padding: 0 !important;
}

/* With the label out of the box, the box needs only the height of its text. */
.mud-input-control:has(> .mud-input-control-input-container > .mud-input-label) .mud-input > input.mud-input-root,
.mud-input-control:has(> .mud-input-control-input-container > .mud-input-label) .mud-input > div.mud-input-slot.mud-input-root {
    padding-top: 9px;
    padding-bottom: 9px;
}

.mud-input-control:has(> .mud-input-control-input-container > .mud-input-label) .mud-input > input.mud-input-root-outlined {
    padding-left: 12px;
    padding-right: 12px;
}

/* ---- Number fields: the spin buttons ---- */

/* Inset and in secondary ink like a select's arrow, rather than full ink against the right edge. */
.mud-input-control.mud-input-number-control .mud-input-numeric-spin {
    top: 50%;
    bottom: auto;
    right: 10px;
    gap: 1px;
    transform: translateY(-50%);
}

.mud-input-control.mud-input-number-control .mud-input-numeric-spin button {
    width: 20px;
    height: 14px;
    padding: 0;
    border-radius: 4px;
    color: var(--mud-palette-text-secondary);
}

.mud-input-control.mud-input-number-control .mud-input-numeric-spin button:hover:not(:disabled) {
    background-color: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.mud-input-control.mud-input-number-control .mud-input-numeric-spin button:disabled {
    color: var(--mud-palette-action-disabled);
}

.mud-input-control.mud-input-number-control .mud-input-numeric-spin .mud-icon-root {
    width: 18px;
    height: 18px;
}

.mud-input-control.mud-input-number-control.mud-input-showspin .mud-input:not(.mud-input-adorned-end) > input.mud-input-root {
    padding-right: 36px;
}

/* ---- Tooltips ---- */

/* The same as the side menu's labels: navy in the light theme, light in the dark one. MudBlazor's own pairing
   comes out light on light in the dark palette. */
.mud-tooltip.mud-tooltip-default {
    background-color: var(--ms-shell-tip);
    color: var(--ms-shell-tip-ink);
}

.mud-tooltip.mud-tooltip-default.mud-tooltip-arrow::after {
    border-color: var(--ms-shell-tip) transparent transparent transparent;
}

/* ---- Tabs ---- */

/* A row of labels over a hairline, each as wide as its label, the open one in ink and underlined. The open tab
   draws its own underline: MudBlazor's slider is placed by percentages that assume equal widths. */
.mud-tabs .mud-tabs-tabbar {
    background-color: transparent;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mud-tabs .mud-tabs-tabbar .mud-tabs-tabbar-inner {
    min-height: 44px;
    padding: 0 8px;
}

.mud-tabs .mud-tab {
    min-width: 0 !important;
    min-height: 44px;
    padding: 0 14px;
    color: var(--mud-palette-text-secondary);
    font-family: var(--ms-font-ui);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.mud-tabs .mud-tab:hover {
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-action-default-hover);
}

.mud-tabs .mud-tab.mud-tab-active {
    color: var(--mud-palette-text-primary);
    box-shadow: inset 0 -2px 0 var(--mud-palette-primary);
}

.mud-tabs .mud-tab.mud-tab-active:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.mud-tabs .mud-tab-slider {
    display: none;
}

/* A rounded MudTabs is a card: the card keeps its corners, the tab row and the panel inside it are square. */
.mud-tabs.mud-tabs-rounded .mud-tabs-tabbar,
.mud-tabs.mud-tabs-rounded .mud-tabs-panels,
.mud-tabs.mud-tabs-rounded .mud-tabs-panels > .mud-paper {
    border-radius: 0;
}

/* Segmented, for switching between lists of the same kind (Konsern / Selskaper): add ms-tabs-segmented. */
.mud-tabs.ms-tabs-segmented .mud-tabs-tabbar {
    border-bottom: 0;
}

.mud-tabs.ms-tabs-segmented .mud-tabs-tabbar .mud-tabs-tabbar-inner {
    min-height: 0;
    padding: 0;
}

.mud-tabs.ms-tabs-segmented .mud-tabs-tabbar-wrapper {
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9px;
    background-color: var(--ms-surface-2);
}

.mud-tabs.ms-tabs-segmented .mud-tab {
    min-height: 32px;
    border-radius: 7px;
}

/* The open one in the primary tint, as in the segmented toggle. */
.mud-tabs.ms-tabs-segmented .mud-tab.mud-tab-active {
    background-color: var(--mud-palette-primary-lighten);
    color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
}

/* ---- Menus ---- */

/* A small heading over a group of items in a MudMenu. */
.ms-menu-heading {
    padding: 8px 16px 4px;
    color: var(--ms-ink-3);
    font-family: var(--ms-font-ui);
    font-size: .75rem;
    font-weight: 600;
}

/* ---- Dialogs ---- */

/* One shape for every dialog: a title in one size whichever heading level it was written with, the content,
   and the buttons in a bar of their own at the foot. */
.mud-dialog {
    border-radius: 12px;
}

.mud-dialog .mud-dialog-title {
    padding: 20px 24px 8px;
}

.mud-dialog .mud-dialog-title .mud-typography:first-child,
.mud-dialog .mud-dialog-title > .mud-typography,
.mud-dialog .ms-dialog-back > .mud-typography {
    margin: 0;
    color: var(--mud-palette-text-primary);
    font-family: var(--ms-font-ui);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
}

/* A short line under the title saying what the dialog is about. */
.ms-dialog-sub {
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
    font-size: .875rem;
}

/* A title for a view inside a dialog, with the way back to where it was opened from in front of it. */
.ms-dialog-back {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: -8px;
}

/* Something the title area has to say about the whole view, such as what is not kept. */
.ms-dialog-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
    line-height: 1.45;
}

.ms-dialog-note .material-symbols-outlined {
    color: var(--mud-palette-info);
    font-size: 18px;
}

.mud-dialog .mud-dialog-content {
    padding: 12px 24px 20px;
}

.mud-dialog .mud-dialog-actions {
    gap: 8px;
    padding: 12px 24px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background-color: var(--ms-surface-2);
}

/* Dialogs that wrap their buttons in a padded stack: the bar already has the padding. MudStack renders as a
   plain d-flex div with no class of its own. */
.mud-dialog .mud-dialog-actions > .d-flex {
    padding: 0 !important;
    margin: 0 !important;
}

/* ---- Segmented toggle (MudToggleGroup Class="ms-segmented") ----
   The same look as segmented tabs, for a choice that changes what the rest of the view does. */
.mud-toggle-group.ms-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9px;
    background-color: var(--ms-surface-2);
}

.mud-toggle-group.ms-segmented > .mud-toggle-item {
    min-height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 7px;
    background-color: transparent;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.mud-toggle-group.ms-segmented > .mud-toggle-item:hover {
    color: var(--mud-palette-text-primary);
}

.mud-toggle-group.ms-segmented > .mud-toggle-item.mud-toggle-item-selected {
    background-color: var(--mud-palette-primary-lighten);
    color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
}