@font-face {
    font-family: "Stack Sans Text";
    src: url("../fonts/StackSansText.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Stack Sans Notch";
    src: url("../fonts/StackSansNotch.woff2") format("woff2");
    font-weight: 200 700;
    font-display: swap;
}

html, body {
    margin: 0;
    background: var(--paper);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

/* The page keeps room for its scrollbar, so content does not shift sideways when a page gets short enough to stop scrolling. */
html {
    scrollbar-gutter: stable;
}

#app > .portal-loading {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: 0 var(--space-4);
    color: var(--text-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    text-align: center;
}

.portal-loading-title {
    margin-bottom: calc(var(--space-2) * -1);
    color: var(--text-body);
    font-family: var(--font-heading);
    font-size: var(--fs-h4);
    line-height: var(--lh-intro);
    letter-spacing: var(--tracking-tight);
}

.portal-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: var(--blazor-load-percentage, 0%);
    background: var(--surface-accent);
    transition: width 0.2s ease-out;
}

.portal-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-default);
    border-top-color: var(--surface-brand);
    border-radius: 50%;
    animation: portal-loading-spin 0.8s linear infinite;
}

@keyframes portal-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

.portal-loading-reload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    min-width: 8rem;
    height: var(--control-h);
    margin-top: var(--space-2);
    padding: 0 18px;
    border: var(--border-w-strong) solid var(--action-primary);
    border-radius: 0;
    background: var(--action-primary);
    color: var(--white);
    font: inherit;
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.portal-loading-reload:hover {
    background: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
}

.portal-loading-reload:focus-visible {
    outline: 3px solid rgb(40 174 249 / .45);
    outline-offset: 0;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 0 0 env(safe-area-inset-bottom);
    background: var(--surface-inverse);
    color: var(--text-on-dark);
    border-top: 3px solid var(--status-critical);
    box-shadow: var(--shadow-overlay);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    z-index: 2000;
    animation: error-bar-in var(--dur-slow) var(--ease-out);
}

.error-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    box-sizing: border-box;
    max-width: 100%;
    min-height: 64px;
    padding: var(--space-3) var(--space-5);
}

.error-bar-mark {
    flex: 0 0 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--status-critical);
    color: var(--white);
    font-weight: var(--weight-bold);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-bar-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-2);
}

.error-bar-text strong {
    font-weight: var(--weight-medium);
}

.error-bar-text span {
    color: var(--text-on-dark-muted);
}

.error-bar-reload {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: var(--control-h-sm);
    padding: 0 var(--space-4);
    border: var(--border-w-strong) solid var(--white);
    color: var(--white);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.error-bar-reload:hover,
.error-bar-reload:focus-visible {
    background: var(--white);
    color: var(--black-howl);
}

.error-bar-dismiss {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    padding: 0;
    border: var(--border-w) solid var(--border-on-dark);
    background: transparent;
    color: var(--white);
    cursor: pointer;
}

.error-bar-dismiss:hover,
.error-bar-dismiss:focus-visible {
    border-color: var(--white);
}

.error-bar-reload:focus-visible,
.error-bar-dismiss:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

@media (max-width: 599.98px) {
    .error-bar {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr) var(--control-h-sm);
        align-items: start;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .error-bar-mark {
        margin-top: 1px;
    }

    .error-bar-text {
        flex-direction: column;
    }

    .error-bar-reload {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
    }

    .error-bar-dismiss {
        grid-column: 3;
        grid-row: 1;
    }
}

@keyframes error-bar-in {
    from { transform: translateY(100%); }
    to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    #blazor-error-ui {
        animation: none;
    }
}

.portal-appbar .portal-appbar-separator {
    align-self: center;
    height: 22px;
    width: 0;
    margin: 0 14px;
    background: transparent;
    border: 0;
    border-right: var(--border-w) solid var(--border-on-dark);
}

.portal-muted {
    color: var(--text-muted);
    font-size: var(--fs-small);
}

.portal-appname.mud-typography {
    font-size: 20px;
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    white-space: nowrap;
}

.portal-appbar .mud-toolbar {
    padding-left: 17px;
    padding-right: 20px;
}

.portal-logo {
    flex: 0 0 auto;
    margin-left: 0;
}

.portal-appbar .portal-appbar-menu + .portal-appbar-menu,
.portal-appbar .portal-appbar-badge + .portal-appbar-menu {
    margin-left: var(--space-4);
}

.portal-appbar .portal-notifications .mud-icon-button {
    box-sizing: border-box;
    border: var(--border-w) solid var(--border-on-dark);
    border-radius: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--white);
    transition: background var(--dur-fast) var(--ease-out);
}

.portal-appbar .portal-notifications .mud-icon-button:hover {
    background: var(--black-howl-700);
}

.portal-appbar .portal-notifications .mud-icon-root {
    font-size: 16px;
}

.portal-appbar .portal-profile .mud-button-root {
    box-sizing: border-box;
    width: 34px;
    min-width: 0;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    background: var(--daphne);
    color: var(--black-howl);
    font-size: 13px;
    font-weight: var(--weight-medium);
    transition: box-shadow var(--dur-fast) var(--ease-out);
}

.portal-appbar .portal-profile .mud-button-root:hover {
    background: var(--daphne);
    box-shadow: 0 0 0 2px var(--border-on-dark);
}

.portal-alert {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    max-width: 40vw;
    margin-right: var(--space-4);
    padding: 7px 14px 7px 8px;
    background: var(--safflower-scarlet);
    color: var(--white);
    font-size: 13px;
    font-weight: var(--weight-medium);
    line-height: 18px;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out);
}

.portal-alert-link:hover {
    background: var(--scarlet-700);
}

.portal-alert-mark {
    flex: 0 0 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--white);
    color: var(--safflower-scarlet);
    font-size: 11px;
    font-weight: var(--weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.portal-alert-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-appbar a:focus-visible,
.portal-appbar .mud-button-root:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

@media (min-width: 960px) {
    .mud-layout:has(> .portal-drawer.mud-drawer--open) {
        min-height: 100vh;
        background: linear-gradient(to right, var(--surface-card) 239px, var(--border-default) 239px, var(--border-default) 240px, transparent 240px) no-repeat;
    }

    .mud-layout:has(> .portal-drawer.mud-drawer--open:not(.mud-drawer--initial)) {
        animation: portal-drawer-column-in 225ms cubic-bezier(0, 0, 0.2, 1);
    }
}

@keyframes portal-drawer-column-in {
    from {
        background-position: -240px 0;
    }
}

.portal-drawer {
    border-right: var(--border-w) solid var(--border-default);
    padding-top: var(--space-5);
}

.portal-nav-heading {
    color: var(--text-muted);
    padding: 0 var(--space-5) 10px;
    line-height: 18px;
    text-transform: uppercase;
}

.portal-nav .mud-nav-link {
    margin: 0;
    border-radius: 0;
    border-left: 3px solid transparent;
    border-right: 0;
    display: flex;
    align-items: center;
    padding: 10px var(--space-5) 10px 21px;
    font-size: var(--fs-small);
    line-height: 21px;
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    box-sizing: border-box;
    width: 100%;
}

.portal-nav .mud-nav-link-text {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-weight: var(--weight-regular);
}

.portal-nav .mud-nav-link .mud-nav-link-expand-icon {
    margin-right: 0;
}

.mud-navmenu.portal-nav .mud-nav-link:hover:not(.mud-nav-link-disabled):not(.active),
.mud-navmenu.portal-nav .mud-nav-link:focus-visible:not(.mud-nav-link-disabled):not(.active) {
    background-color: var(--surface-warm);
}

.mud-navmenu.portal-nav .mud-nav-link {
    transition: background-color var(--dur-fast) var(--ease-out);
}

.mud-navmenu.portal-nav .mud-nav-link:focus-visible {
    outline: 3px solid rgb(40 174 249 / .45);
    outline-offset: -3px;
}

.mud-navmenu.portal-nav .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-navmenu.mud-navmenu-default.portal-nav .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled) {
    background-color: var(--surface-inverse);
    color: var(--text-on-dark);
    font-weight: var(--weight-regular);
    border-left-color: var(--daphne);
}

.mud-navmenu.portal-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-text {
    color: var(--text-on-dark);
    font-weight: var(--weight-regular);
}

.portal-nav .nav-unbuilt.mud-nav-link {
    opacity: 1 !important;
    color: var(--text-body) !important;
    cursor: not-allowed;
    pointer-events: auto;
}

.portal-nav .nav-later.mud-nav-link {
    opacity: 1 !important;
    color: var(--text-subtle) !important;
    cursor: not-allowed;
    pointer-events: auto;
}

.mud-navmenu.portal-nav .mud-nav-group .mud-collapse-container .mud-nav-item > .mud-nav-link {
    padding-left: 37px;
    padding-right: var(--space-5);
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
}

.mud-navmenu.portal-nav .mud-nav-group .mud-collapse-container .mud-nav-link > .nav-badge.mud-chip {
    margin-right: 0;
}

.portal-nav .mud-nav-group > .mud-nav-link > .mud-nav-link-text {
    font-weight: var(--weight-regular);
}

.portal-nav .mud-nav-group > .mud-nav-link .nav-badge.mud-chip {
    margin-right: var(--space-4);
}

.nav-later-label {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    height: auto;
    border-radius: 0;
    font-size: 10px;
    font-weight: var(--weight-regular);
}

.portal-nav .nav-badge.mud-chip {
    margin: 0 0 0 auto;
    height: auto;
    box-sizing: border-box;
    min-width: 23px;
    padding: 1px 7px;
    justify-content: center;
    font-size: var(--fs-caption);
    font-weight: var(--weight-medium);
    border-radius: 0;
}

.portal-nav .mud-nav-item > .mud-nav-link {
    display: flex;
}

.portal-nav .mud-nav-item > .mud-nav-link > .nav-badge.mud-chip {
    margin-left: auto;
}

.nav-badge .mud-chip-content,
.nav-later-label .mud-chip-content {
    font-size: inherit;
    font-weight: inherit;
    line-height: 16px;
}

.nav-badge.mud-chip-outlined {
    color: var(--text-muted);
    border: var(--border-w) solid var(--border-default);
}

.nav-later-label.mud-chip {
    box-sizing: border-box;
    width: 44px;
    height: 16px;
    padding: 0;
    justify-content: center;
    font-size: 9px;
    letter-spacing: var(--tracking-caps);
    color: var(--text-subtle);
    border: var(--border-w) solid var(--border-subtle);
}

.portal-main {
    padding: calc(64px + 40px) 40px 72px;
}

@media (max-width: 959.98px) {
    .portal-main {
        padding: calc(64px + var(--space-5)) var(--space-4) var(--space-7);
    }

    .portal-appbar .mud-toolbar {
        padding-left: var(--space-2);
        padding-right: var(--space-4);
    }

    .portal-appbar .portal-appbar-separator {
        margin: 0 10px;
    }
}

@media (max-width: 599.98px) {
    .mud-typography.mud-typography-h2 {
        font-size: 2rem;
    }

    .portal-alert {
        padding: 8px;
        margin-right: var(--space-3);
    }

    .portal-alert-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .portal-appbar .portal-appbar-badge + .portal-appbar-menu {
        margin-left: var(--space-3);
    }
}

.portal-button {
    border-width: var(--border-w-strong) !important;
    border-color: var(--black-howl) !important;
    border-radius: 0;
    text-transform: none;
    box-sizing: border-box;
    white-space: nowrap;
}

.portal-button .mud-button-label {
    white-space: nowrap;
}

.portal-button-medium.mud-button-root {
    min-width: 8rem;
    min-height: 43px;
    padding: 9px 12px;
    font-size: var(--fs-small);
}

.portal-button-small.mud-button-root {
    min-width: 6rem;
    min-height: 0;
    height: 32px;
    padding: 4px 12px;
    font-size: 13px;
}

.portal-button.mud-button-root {
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.portal-button.mud-button-outlined:hover {
    background: var(--black-howl);
    color: var(--white);
}

.portal-button.mud-button-filled-primary:hover {
    background-color: var(--action-primary-hover);
    border-color: var(--action-primary-hover) !important;
}

.portal-button.mud-button-root:disabled,
.portal-button.mud-button-root.mud-disabled,
.portal-button.mud-button-root[aria-disabled="true"] {
    border-color: var(--border-default) !important;
    color: var(--text-subtle) !important;
}

.portal-button.mud-button-outlined:disabled,
.portal-button.mud-button-outlined.mud-disabled,
.portal-button.mud-button-outlined[aria-disabled="true"] {
    background: transparent;
}

.portal-card-title {
    font-family: var(--font-heading);
    font-weight: var(--weight-regular);
    font-size: var(--fs-h4);
    letter-spacing: var(--tracking-tight);
}

.portal-page-head {
    flex-wrap: wrap;
    row-gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.portal-tiles,
.portal-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

.portal-panels {
    margin-top: var(--space-4);
}

@media (min-width: 600px) {
    .portal-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .portal-panels {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    }
}

.portal-panels > .portal-panel {
    height: 100%;
}

.portal-panel {
    border-color: var(--border-default);
}

.portal-panel > .mud-card-content {
    padding: var(--space-5);
}

.portal-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 32px;
    margin-bottom: var(--space-3);
}

.portal-panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.portal-tile {
    display: block;
    box-sizing: border-box;
    min-width: 0;
    padding: var(--space-5);
    background: var(--surface-card);
    border: var(--border-w) solid var(--border-default);
    color: var(--text-body);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out);
}

.portal-tile-link:hover {
    border-color: var(--black-howl);
}

.portal-tile-label.mud-typography {
    display: block;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 18px;
}

.portal-shortcut-label.mud-typography {
    flex: 1 1 auto;
    min-width: 0;
}

.portal-notfound-title {
    max-width: 440px;
}

.portal-tile-value.mud-typography {
    margin-top: var(--space-3);
    font-variant-numeric: tabular-nums;
}

.portal-activity.mud-simple-table table * tr > td {
    padding: 10px var(--space-4) 10px 0;
    border-bottom: var(--border-w) solid var(--border-subtle);
    font-size: var(--fs-small);
    line-height: 20px;
    vertical-align: top;
}

.portal-activity.mud-simple-table table * tr:last-child > td {
    border-bottom: none;
}

.portal-activity.mud-simple-table table * tr > td:last-child {
    padding-right: 0;
}

.portal-activity-time {
    white-space: nowrap;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.portal-activity-person {
    white-space: nowrap;
}

@media (max-width: 599.98px) {
    .portal-tile,
    .portal-panel > .mud-card-content {
        padding: var(--space-4);
    }

    .portal-activity.mud-simple-table table * tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: var(--space-3);
        padding: 10px 0;
        border-bottom: var(--border-w) solid var(--border-subtle);
    }

    .portal-activity.mud-simple-table table * tr:last-child {
        border-bottom: none;
    }

    .portal-activity.mud-simple-table table * tr > td {
        padding: 0;
        border-bottom: none;
    }

    .portal-activity.mud-simple-table table * tr > td.portal-activity-text {
        grid-column: 1 / -1;
        padding-top: var(--space-1);
    }
}

.portal-shortcut {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    box-sizing: border-box;
    min-height: 50px;
    border-bottom: var(--border-w) solid var(--border-subtle);
}

.portal-shortcut:last-of-type {
    border-bottom: none;
}

.portal-shortcut-edit .mud-input-control {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.portal-shortcut-edit .mud-checkbox > .mud-button-root {
    padding: 4px 8px 4px 0;
}

.portal-shortcut-edit .mud-checkbox .mud-typography {
    font-size: var(--fs-small);
}

.portal-shortcut-add {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-3);
    padding-top: var(--space-3);
}

.portal-shortcut-add .mud-input-control {
    flex: 1 1 10rem;
    min-width: 0;
    margin: 0;
}

.portal-notfound {
    min-height: calc(100vh - 64px - 112px);
    text-align: center;
}

.portal-notfound-actions {
    flex-wrap: wrap;
    margin-top: var(--space-2);
}

.portal-notfound-code {
    font-family: var(--font-mono);
    letter-spacing: 0.1em;
    color: var(--micros-blue);
}

.portal-forbidden-meta {
    display: grid;
    grid-template-columns: auto auto;
    gap: 8px 18px;
    padding: 12px 16px;
    text-align: left;
    background: var(--surface-card);
    border-color: var(--border-default);
}

.portal-forbidden-text {
    max-width: 460px;
}

.portal-forbidden-value {
    font-family: var(--font-mono);
}

.count-sync {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: var(--fs-caption);
    color: var(--text-muted);
    white-space: nowrap;
}

.count-sync b {
    font-family: var(--font-mono);
    font-weight: var(--weight-regular);
    color: var(--text-body);
}

.count-card-head {
    box-sizing: border-box;
    height: 76px;
    padding: 0 24px;
    gap: var(--space-5);
}

.count-search {
    max-width: 260px;
}

.count-filter {
    max-width: 260px;
}

.count-search .mud-input.mud-input-outlined .mud-input-outlined-border,
.count-filter .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-width: var(--border-w) !important;
    border-color: var(--border-default) !important;
    border-radius: 0;
}

.count-search .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border,
.count-filter .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border,
.count-table .count-input .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border,
.count-table .count-date .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--black-howl) !important;
    box-shadow: 0 0 0 3px rgb(40 174 249 / .45);
}

.count-table {
    border-top: var(--border-w) solid var(--border-default);
}

.count-table th {
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--fs-caption);
    vertical-align: bottom;
}

.count-table td {
    vertical-align: middle;
}

.count-table .mud-table-head .mud-table-cell {
    background: var(--surface-warm);
    border-bottom: var(--border-w) solid var(--border-default);
    line-height: 1.25;
    padding: 12px 8px;
    vertical-align: bottom;
}

.count-table .mud-table-head .count-group-row .mud-table-cell {
    background: var(--surface-card);
}

.count-group-row th {
    text-align: center;
}

.count-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.count-group-toggle:focus-visible {
    outline: 3px solid rgb(40 174 249 / .45);
    outline-offset: 0;
}

.count-table .count-group-start {
    border-left: var(--border-w) solid var(--border-default);
}

.count-attid {
    font-family: var(--font-mono);
    color: var(--micros-blue);
}

.autotask-link {
    color: var(--text-link);
    text-underline-offset: 3px;
}

.autotask-link:hover,
.autotask-link:hover .count-attid {
    color: var(--text-link-hover);
}

.contract-icon-button.mud-icon-button {
    margin-left: var(--space-1);
    vertical-align: middle;
}

.count-table .mud-table-container {
    overflow-x: visible;
}

.count-table .mud-table-root {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

/* The loading bar of a server-paged table spans many columns; out of the table layout it cannot take width from the real columns. */
.count-table .mud-table-container {
    position: relative;
}

.count-table .mud-table-container .mud-table-root .mud-table-head th.mud-table-loading {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 0;
    border: 0;
}

.count-table.mud-table-dense .mud-table-head th.mud-table-cell,
.count-table.mud-table-dense .mud-table-body td.mud-table-cell {
    padding: 12px 8px;
    white-space: normal;
    font-size: 13px;
}

.count-table.mud-table-dense .mud-table-head th.mud-table-cell {
    letter-spacing: 0.06em;
    font-size: 11px;
    font-weight: var(--weight-medium);
    color: var(--text-muted);
}

.count-table.mud-table-dense .mud-table-body td.mud-table-cell:last-child {
    text-align: right;
}

.count-table.mud-table-dense .mud-table-body td.count-idcell {
    padding-right: 0;
    white-space: nowrap;
}

.count-idcell .count-arrow {
    margin-left: 6px;
}

.count-arrow {
    color: var(--micros-blue);
    font-size: 10px;
}

.count-number {
    display: inline-block;
    box-sizing: border-box;
    min-width: 28px;
    height: 24px;
    padding: 0 4px;
    line-height: 22px;
    text-align: center;
    background: var(--white);
    border: var(--border-w) solid var(--border-default);
    font-family: var(--font-mono);
    font-size: 13px;
}

.count-table .count-input.mud-input-control {
    display: block;
    box-sizing: border-box;
    width: 52px;
    min-width: 52px;
    margin: 0;
}

.count-table .count-input .mud-input.mud-input-outlined {
    width: 100%;
    border-radius: 0;
}

.count-table .count-input .mud-input.mud-input-outlined .mud-input-outlined-border,
.count-table .count-date .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-width: var(--border-w) !important;
    border-color: var(--border-default) !important;
    border-radius: 0;
}

.count-table .count-input .mud-input.mud-input-outlined > input.mud-input-root {
    box-sizing: border-box;
    height: 28px;
    padding: 0 8px;
    font-size: 13px;
    font-family: inherit;
    text-align: left;
}

.count-vps .count-input.mud-input-control {
    width: 34px;
    min-width: 34px;
}

.count-vps .count-input .mud-input.mud-input-outlined > input.mud-input-root {
    height: 24px;
    padding: 0 4px;
    font-family: var(--font-mono);
    text-align: center;
}

.count-table .count-date {
    display: block;
    box-sizing: border-box;
    width: 140px;
    max-width: 140px;
    min-width: 140px;
    margin: 0;
}

.count-table .count-date .mud-input-adornment-end {
    margin-left: 0;
}

.count-table .count-date .mud-input-adornment-end .mud-icon-button {
    padding: 0;
}

.count-table .count-date .mud-input-adornment-end .mud-icon-root {
    font-size: 18px;
}

.count-table .count-date .mud-input.mud-input-outlined > input.mud-input-root {
    padding-right: 0;
}

.count-table .count-date .mud-input-control {
    width: 100%;
    margin: 0;
}

.count-table .count-date .mud-input.mud-input-outlined {
    width: 100%;
}

.count-table .count-date .mud-input.mud-input-outlined > input.mud-input-root {
    box-sizing: border-box;
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    font-family: inherit;
}

.count-delta {
    font-family: var(--font-mono);
}

.count-delta-up {
    color: var(--micros-blue);
}

.count-delta-down {
    color: var(--text-body);
}

.count-delta-zero {
    color: var(--text-muted);
}

.count-last-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    white-space: nowrap;
}

.count-last-count > span:first-child {
    flex: 0 1 auto;
}

.count-table td.mud-table-cell:nth-last-child(-n+3) {
    white-space: nowrap;
}

.count-stale {
    color: var(--scarlet-700);
}

.count-stale-marker.mud-avatar {
    width: 16px;
    height: 16px;
    font-size: 11px;
    font-weight: var(--weight-bold);
    vertical-align: middle;
}

.count-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.count-table td.count-wrap {
    overflow-wrap: normal;
}

.mud-dialog-container .mud-dialog.contract-dialog {
    width: 640px;
}

.contract-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.contract-section-title.mud-typography {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text-muted);
}

.contract-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-6);
    margin: 0;
}

.contract-values dt {
    font-size: 12px;
    color: var(--text-muted);
}

.contract-values dd {
    margin: 0;
    font-weight: var(--weight-medium);
    overflow-wrap: anywhere;
}

.count-page-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4) var(--space-6);
    margin-bottom: var(--space-6);
}

.count-syncs {
    display: flex;
    gap: var(--space-6);
    margin-left: auto;
    padding-top: var(--space-1);
}

.count-card .count-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    min-height: 76px;
    padding: var(--space-3) var(--space-5);
    gap: var(--space-3) var(--space-4);
}

.count-card .count-card-title {
    margin-right: var(--space-2);
    white-space: nowrap;
}

.count-card .count-filter {
    flex: 0 0 236px;
    max-width: none;
}

.count-card .count-search {
    flex: 1 1 220px;
    max-width: 340px;
}

.count-card .count-filter.mud-input-control,
.count-card .count-search.mud-input-control {
    margin: 0;
}

.count-card .count-result {
    margin-left: auto;
    white-space: nowrap;
}

.count-card .count-search .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border,
.count-card .count-filter .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border,
.count-grid .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-width: var(--border-w-strong) !important;
    border-color: var(--micros-blue) !important;
}

.count-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.count-table.count-grid .mud-table-container {
    overflow: auto;
    max-height: calc(100vh - 220px);
    min-height: 120px;
    scrollbar-gutter: stable;
}

/* Every column has a width; the minimum is their sum, so a narrow screen scrolls instead of squeezing a column. */
.count-table.count-grid .mud-table-root {
    min-width: 1260px;
}

.count-table.count-grid.count-vps .mud-table-root {
    min-width: 0;
}

.count-table.count-grid.count-grid-empty .mud-table-head {
    display: none;
}

.count-grid td.count-name {
    overflow-wrap: anywhere;
}

/* VPS contract names are host names; they read best on one line. */
.count-table.count-grid.mud-table-dense .mud-table-body td.mud-table-cell.count-contract {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Numbers next to a group border get room on both sides of it. */
.count-table.count-grid.mud-table-dense .mud-table-head th.mud-table-cell.count-group-start,
.count-table.count-grid.mud-table-dense .mud-table-body td.mud-table-cell.count-group-start {
    padding-left: 12px;
}

.count-table.count-grid.mud-table-dense .mud-table-head th.mud-table-cell:has(+ .count-group-start),
.count-table.count-grid.mud-table-dense .mud-table-body td.mud-table-cell:has(+ .count-group-start) {
    padding-right: 12px;
}

.count-grid col.count-col-id {
    width: 104px;
}

.count-grid col.count-col-name {
    width: 148px;
}

.count-grid col.count-col-domain {
    width: 130px;
}

.count-grid col.count-col-service {
    width: 164px;
}

.count-grid col.count-col-contract {
    width: 140px;
}

.count-grid col.count-col-last {
    width: 112px;
}

.count-grid col.count-col-number {
    width: 56px;
}

.count-grid col.count-col-input {
    width: 64px;
}

.count-grid col.count-col-att {
    width: 48px;
}

.count-grid col.count-col-delta {
    width: 56px;
}

.count-ad col.count-col-delta {
    width: 64px;
}

.count-grid col.count-col-total {
    width: 88px;
}

.count-grid col.count-col-period {
    width: 76px;
}

.count-grid col.count-col-date {
    width: 152px;
}

.count-grid col.count-col-actions {
    width: 120px;
}

/* VPS has three groups of three numbers; its columns are a little narrower to fit beside the menu at 1600 pixels. */
.count-vps col.count-col-name {
    width: 136px;
}

.count-vps col.count-col-contract {
    width: 132px;
}

.count-vps col.count-col-last {
    width: 108px;
}

.count-vps col.count-col-input {
    width: 60px;
}

.count-vps col.count-col-att {
    width: 44px;
}

.count-vps col.count-col-delta {
    width: 64px;
}

.count-vps col.count-col-collapsed {
    width: 76px;
}

.count-vps col.count-col-period {
    width: 84px;
}

.count-table.count-grid.mud-table-dense .mud-table-head th.mud-table-cell {
    padding: 10px 6px;
    letter-spacing: 0.04em;
}

.count-table.count-grid.mud-table-dense .mud-table-body td.mud-table-cell {
    padding: 8px 6px;
}

.count-table.count-grid.mud-table-dense .mud-table-head th.mud-table-cell:first-child,
.count-table.count-grid.mud-table-dense .mud-table-body td.mud-table-cell:first-child {
    padding-left: var(--space-4);
}

.count-table.count-grid.mud-table-dense .mud-table-head th.mud-table-cell:last-child,
.count-table.count-grid.mud-table-dense .mud-table-body td.mud-table-cell:last-child {
    padding-right: var(--space-4);
}

.count-table.count-grid .mud-table-head .mud-table-cell {
    background: var(--surface-warm);
}

.count-table.count-grid .mud-table-head .count-group-row .mud-table-cell {
    height: 34px;
    box-sizing: border-box;
    padding-top: 8px;
    padding-bottom: 8px;
    background: var(--surface-card);
    vertical-align: middle;
}

.count-table.count-grid.count-vps .mud-table-head .count-column-row .mud-table-cell {
    top: 34px;
}

.count-grid .count-num {
    text-align: right;
}

.count-grid .mud-table-body .mud-table-row {
    transition: background-color var(--dur-fast) var(--ease-out);
}

.count-grid .mud-table-body .mud-table-row:hover,
.count-grid .mud-table-body .mud-table-row:hover > td.count-idcell,
.count-grid .mud-table-body .mud-table-row:hover > td.count-actioncell {
    background-color: var(--ink-50);
}

.count-grid .mud-table-body td.count-idcell,
.count-grid .mud-table-body td.count-actioncell {
    background-color: var(--surface-card);
}

.count-grid .count-idcell {
    position: sticky;
    left: 0;
    z-index: 1;
}

.count-grid .count-actioncell {
    position: sticky;
    right: 0;
    z-index: 1;
    box-shadow: inset var(--border-w) 0 0 var(--border-subtle);
}

.count-table.count-grid .mud-table-head th.count-idcell,
.count-table.count-grid .mud-table-head th.count-actioncell {
    z-index: 3;
}

.count-grid .mud-table-body .count-row-busy,
.count-grid .mud-table-body .count-row-busy > td.count-idcell,
.count-grid .mud-table-body .count-row-busy > td.count-actioncell {
    background-color: var(--micros-blue-soft);
}

.count-grid .count-attid {
    font-size: 13px;
}

.count-grid .count-number {
    min-width: 0;
    height: auto;
    padding: 0;
    line-height: inherit;
    text-align: right;
    background: none;
    border: none;
    font-variant-numeric: tabular-nums;
}

.count-grid .count-delta {
    font-variant-numeric: tabular-nums;
}

.count-grid .count-delta-up,
.count-grid .count-delta-down {
    font-weight: var(--weight-bold);
}

.count-table.count-grid .count-input.mud-input-control {
    width: 56px;
    min-width: 56px;
    margin-left: auto;
}

.count-table.count-grid.count-vps .count-input.mud-input-control {
    width: 46px;
    min-width: 46px;
}

.count-table.count-grid .count-input .mud-input.mud-input-outlined > input.mud-input-root {
    height: 28px;
    padding: 0 6px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.count-table.count-grid .count-input-edited .mud-input.mud-input-outlined {
    background: var(--micros-blue-soft);
}

.count-table.count-grid .count-input-edited .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--micros-blue) !important;
}

.count-table.count-grid .count-date .mud-input.mud-input-outlined > input.mud-input-root {
    padding: 0 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.count-grid .count-last-count {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.4;
}

.count-grid .count-last-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.count-grid td.count-wrap {
    overflow-wrap: anywhere;
}

.count-grid .count-actions {
    align-items: stretch;
}

.count-grid .count-actions .portal-button-small.mud-button-root {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 32px;
    padding: 4px 8px;
    line-height: 1.2;
    white-space: normal;
}

.count-empty-hint {
    margin-top: calc(-1 * var(--space-2));
    padding: 0 var(--space-4) var(--space-4);
}

.count-no-contract {
    font-size: var(--fs-caption);
    color: var(--text-muted);
}

.count-outcome {
    font-size: 11px;
    line-height: 1.35;
    text-align: right;
    white-space: normal;
    animation: busy-button-fade-in var(--dur) var(--ease-out);
}

.count-outcome-ok {
    color: var(--micros-blue);
}

.count-outcome-failed {
    color: var(--scarlet-700);
}

.mud-navmenu.portal-nav .mud-nav-link.active .nav-badge.mud-chip-outlined {
    background: transparent;
    color: var(--text-on-dark);
    border-color: var(--border-on-dark);
}

.checks-tabs .mud-tabs-tabbar {
    border-bottom: var(--border-w) solid var(--border-default);
}

.checks-tabs .mud-tabs-tabbar,
.checks-tabs .mud-tabs-tabbar-inner,
.checks-tabs .mud-tabs-tabbar-content,
.checks-tabs .mud-tabs-tabbar-wrapper {
    background: transparent;
}

.checks-tabs .mud-tab {
    text-transform: none;
    font-size: 15px;
    font-weight: var(--weight-regular);
    letter-spacing: normal;
    padding: 12px 20px;
    gap: var(--space-2);
    color: var(--text-muted);
    opacity: 1;
}

.checks-tabs .mud-tab.mud-tab-active {
    color: var(--text-body);
}

.checks-tabs .mud-tab-slider {
    background: var(--fantasy-console-sky);
    height: 3px;
}

.checks-card-head {
    padding: 16px 20px;
    gap: 16px;
    border-bottom: var(--border-w) solid var(--border-default);
}

.checks-card-head .mud-input-control {
    margin: 0;
}

.checks-card-head .mud-input.mud-input-outlined > input.mud-input-root {
    box-sizing: border-box;
    height: auto;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 22px;
}

.checks-card-head .mud-input-adornment .mud-icon-root {
    font-size: 16px;
}

.checks-tab-badge.mud-chip {
    height: auto;
    min-width: 23px;
    padding: 1px 7px;
    justify-content: center;
    border-radius: 0;
    margin: 0 0 0 var(--space-2);
    font-size: var(--fs-caption);
}

.checks-filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 16px;
    margin: 0 0 18px;
    background: var(--white);
    border: var(--border-w) solid var(--border-default);
}

.checks-filter-box {
    box-sizing: border-box;
    padding: 8px 12px;
    min-height: 42px;
    background: var(--white);
    border: var(--border-w) solid var(--border-default);
}

.checks-filter-box .mud-input-control {
    margin: 0;
    width: 100%;
}

.checks-filter .mud-input-control-input-container {
    display: flex;
    flex-direction: column;
}

.checks-filter-box .mud-input-label {
    position: static !important;
    order: -1;
    transform: none !important;
    max-width: none;
    margin-bottom: 4px;
    font-size: var(--fs-caption) !important;
    line-height: 1.2 !important;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-muted);
}

.checks-filter-box .mud-input.mud-input-text {
    margin: 0 !important;
    min-height: 0;
}

.checks-filter-box .mud-input-control-helper-container,
.checks-filter-box .mud-input-helper-text {
    display: none;
}

.checks-filter-box .mud-input-control-input-container {
    min-height: 0;
}

/* The status select reads like the text filters beside it. */
.checks-filter-box .mud-select .mud-input-slot {
    padding: 0;
    height: 18px;
    line-height: 18px;
    font-size: var(--fs-small);
}

.checks-filter-box .mud-input.mud-input-text > input.mud-input-root {
    padding: 0;
    height: 18px;
    line-height: 18px;
    font-size: var(--fs-small);
}

.checks-pill {
    display: inline-block;
    padding: 1px 8px;
    border: var(--border-w) solid var(--border-default);
    font-size: var(--fs-caption);
}

.checks-pill-alert {
    color: var(--white);
    background: var(--black-howl);
    border-color: var(--black-howl);
}

/* Fixed column widths, so a page of other rows keeps every column where it was. */
.checks-table .mud-table-root {
    table-layout: fixed;
    min-width: 1160px;
}

.checks-table.checks-ou-without-users .mud-table-root {
    min-width: 1400px;
}

.checks-table.checks-contract-without-ou .mud-table-root {
    min-width: 1280px;
}

.checks-table col.checks-col-id {
    width: 112px;
}

.checks-table col.checks-col-number {
    width: 88px;
}

.checks-table col.checks-col-contractid {
    width: 120px;
}

.checks-table col.checks-col-date {
    width: 136px;
}

.checks-table col.checks-col-pill {
    width: 152px;
}

.checks-table col.checks-col-status {
    width: 232px;
}

.checks-table col.checks-col-actions {
    width: 152px;
}

.checks-table.checks-contract-without-ou col.checks-col-actions {
    width: 240px;
}

.checks-table td.mud-table-cell.checks-idcell {
    white-space: nowrap;
}

.checks-table td.mud-table-cell.checks-text {
    overflow-wrap: anywhere;
}

.checks-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.checks-status-detail {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--fs-caption);
    color: var(--text-muted);
}

.checks-table th.mud-table-cell {
    padding: 12px 16px;
    font-size: var(--fs-caption);
    letter-spacing: var(--tracking-caps);
    color: var(--text-muted);
    vertical-align: middle;
}

.checks-table td.mud-table-cell {
    padding: 14px 16px;
    font-size: var(--fs-small);
}

.checks-table .mud-table-head .mud-table-cell {
    padding: 12px 16px;
}

.checks-table td.mud-table-cell:last-child {
    text-align: left;
    white-space: nowrap;
}

.management-mono {
    font-family: var(--font-mono);
    font-size: 12px;
}

.management-table .mud-table-root {
    table-layout: auto;
}

.management-table.count-table td.mud-table-cell {
    padding: 14px var(--space-4);
    font-size: var(--fs-small);
    text-align: left;
    white-space: nowrap;
}

.management-table.count-table th.mud-table-cell {
    padding: 12px var(--space-4);
    font-size: var(--fs-caption);
    letter-spacing: var(--tracking-caps);
    color: var(--text-muted);
    vertical-align: middle;
}

.management-table .management-mono {
    font-size: 12px;
}

.management-table.count-table td.mud-table-cell.management-wrap {
    white-space: normal;
    max-width: 130px;
}

.status-pill.mud-chip {
    border-radius: 0;
    font-weight: var(--weight-medium);
    height: auto;
    padding: 4px 10px;
    font-size: var(--fs-caption);
}

.status-pill.status-alert {
    background: var(--black-howl);
    color: var(--white);
}

.status-pill.status-ok {
    background: var(--status-ok-bg);
    color: var(--black-howl);
}

.status-pill.status-neutral {
    background: var(--white);
    color: var(--black-howl);
    border: var(--border-w) solid var(--border-default);
}

.queue-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--surface-warm);
    border: var(--border-w) solid var(--border-default);
    color: var(--text-body);
    border-radius: 0;
    padding: 18px 20px;
    font-size: var(--fs-small);
    line-height: 1.5;
}

.queue-notice-icon {
    flex: 0 0 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--black-howl);
    color: var(--white);
    font-weight: var(--weight-bold);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jobs-filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    padding: var(--space-4);
}

.jobs-filter {
    min-width: 0;
}

.count-footnote {
    display: block;
    max-width: 760px;
    margin-top: var(--space-3);
}

.config-card-head {
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border-w) solid var(--border-default);
}

.config-status.mud-chip {
    border-radius: 0;
    font-weight: var(--weight-regular);
}

.config-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px 20px;
    padding: 18px 20px;
}

@media (min-width: 960px) {
    .config-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.basis-vps-card.mud-card {
    max-width: 640px;
}

.basis-vps-card .config-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.config-field {
    box-sizing: border-box;
    padding: 8px 12px;
    border: var(--border-w) solid var(--border-default);
    background: var(--white);
}

.config-label.mud-typography {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    letter-spacing: var(--tracking-caps);
    font-size: var(--fs-caption);
    line-height: 14px;
}

.config-secret {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
}

.config-mono,
.config-mono .mud-typography {
    font-family: var(--font-mono);
    font-size: 12px;
}

.config-error.mud-alert {
    margin: 0 var(--space-5) var(--space-5);
}

.config-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    box-sizing: border-box;
    border: var(--border-w) solid var(--border-default);
    background: var(--surface-warm);
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text-body);
}

.config-notice-inline {
    margin: 0 var(--space-5) var(--space-5);
}

.config-notice-info {
    border-color: var(--status-info-bg);
    border-left: 3px solid var(--status-info);
    background: var(--status-info-bg);
}

.config-notice-warning {
    border-left: 3px solid var(--black-howl);
}

.config-notice .config-notice-mark.mud-icon-root {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.config-notice-info .config-notice-mark.mud-icon-root {
    color: var(--status-info);
}

.config-notice-warning .config-notice-mark.mud-icon-root {
    color: var(--text-body);
}

.config-status.config-status-ok.mud-chip {
    background: var(--status-ok-bg);
    border: var(--border-w) solid var(--status-ok-bg);
    color: var(--black-howl);
    font-size: 12px;
}

.config-field .mud-input-control {
    margin: 0;
}

.config-field .mud-input-underline::before,
.config-field .mud-input-underline::after {
    display: none;
}

.config-field .mud-input-control .mud-input.mud-input-text > input.mud-input-root,
.config-field .mud-input-control .mud-input.mud-input-text > .mud-input-root,
.config-field .mud-input-control .mud-select-input {
    padding: 0;
    height: 18px;
    font-size: 13px;
    line-height: 18px;
}

.config-field .mud-input-control > .mud-input-control-input-container > .mud-input.mud-input-text {
    margin: 0;
    min-height: 0;
}

.config-field .mud-input-control-helper-container {
    padding: 0;
}

.config-field .mud-input-helper-text {
    margin: 0;
}

.config-note {
    display: block;
    margin-top: var(--space-4);
}

.config-card-foot {
    padding: var(--space-4) var(--space-5);
    border-top: var(--border-w) solid var(--border-default);
}

.connection-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3) var(--space-4);
}

.connection-test {
    flex: 1 1 280px;
    min-width: 0;
    font-size: var(--fs-small);
    line-height: 1.4;
}

.connection-test-busy {
    color: var(--text-muted);
}

.connection-test-result {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
    max-width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    border-left: 3px solid transparent;
    color: var(--text-body);
    animation: connection-test-in var(--dur) var(--ease-out);
}

.connection-test-result > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.connection-test-icon.mud-icon-root {
    flex: 0 0 auto;
    font-size: 18px;
    margin-top: 1px;
}

.connection-test-ok {
    background: var(--status-ok-bg);
    border-left-color: var(--fantasy-console-sky);
}

.connection-test-ok .connection-test-icon {
    color: var(--fantasy-console-sky);
}

.connection-test-failed {
    background: var(--status-critical-bg);
    border-left-color: var(--status-critical);
}

.connection-test-failed .connection-test-icon {
    color: var(--status-critical);
}

@keyframes connection-test-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.group-hint {
    min-height: 18px;
    margin-top: 6px;
    font-size: var(--fs-caption);
    line-height: 18px;
}

.group-hint .portal-muted {
    font-size: inherit;
}

.group-hint-invalid {
    color: var(--status-critical);
}

.group-option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--font-body);
    font-size: var(--fs-small);
}

.group-option-id {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
}

.config-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 20px;
    padding: 20px;
    border-top: var(--border-w) solid var(--border-default);
}

.config-actions .config-label.mud-typography {
    text-transform: uppercase;
    margin-bottom: 4px;
}

.config-actions .mud-input-control {
    margin: 0;
}

.config-actions .mud-checkbox {
    display: flex;
    height: 26px;
    margin: 0;
}

.config-actions .mud-checkbox .mud-button-root {
    padding: 0 6px 0 0;
}

.config-system-chip.mud-chip {
    border-radius: 0;
    margin-left: var(--space-2);
}

.config-table th {
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--fs-caption);
    color: var(--text-muted);
    background: var(--surface-warm);
}

.config-row-action {
    text-align: left;
}

.config-placeholder {
    display: inline-block;
    width: 40px;
    height: 10px;
    background: var(--border-subtle);
}

.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-menu-activator:focus-visible,
.mud-main-content a:focus-visible {
    outline: 3px solid rgb(40 174 249 / .45);
    outline-offset: 0;
}

.mud-button-root.mud-button-filled,
.mud-button-root.mud-button-filled:hover,
.mud-button-root.mud-button-filled:focus,
.mud-button-root.mud-button-filled:active {
    box-shadow: none;
}

.mud-button-root.mud-button-filled {
    font-weight: 500;
    letter-spacing: 0;
    font-synthesis: none;
}

.portal-menu.mud-popover {
    margin-top: 14px;
    min-width: 240px;
    max-width: min(360px, calc(100vw - var(--space-5)));
    border: var(--border-w) solid var(--border-default);
    border-radius: 0;
    box-shadow: var(--shadow-float);
}

.portal-menu .portal-menu-list {
    padding: 0;
}

.portal-menu .portal-menu-list .mud-menu-item + .mud-menu-item,
.portal-menu .portal-menu-list .portal-profile-head + .mud-menu-item {
    border-top: var(--border-w) solid var(--border-subtle);
}

.portal-menu .mud-menu-item {
    padding: 10px var(--space-4);
    font-size: var(--fs-small);
    line-height: 20px;
}

.portal-menu .mud-menu-item .mud-menu-item-text {
    font-size: inherit;
}

.portal-menu .mud-menu-item .mud-icon-root {
    font-size: 18px;
}

.portal-menu .mud-menu-item:hover,
.portal-menu .mud-menu-item:focus-visible {
    background: var(--surface-warm);
}

.portal-menu-heading.mud-typography {
    display: block;
    padding: var(--space-3) var(--space-4) var(--space-1);
    color: var(--text-muted);
    letter-spacing: var(--tracking-caps);
    line-height: 18px;
}

.portal-menu-empty.mud-typography {
    display: block;
    padding: var(--space-2) var(--space-4) var(--space-4);
}

.portal-notification .mud-menu-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.portal-notification-title {
    font-weight: var(--weight-medium);
    color: var(--text-body);
}

.portal-notification-detail,
.portal-profile-detail {
    font-size: var(--fs-caption);
    line-height: 18px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.portal-profile-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-warm);
}

.portal-profile-name {
    font-size: var(--fs-small);
    font-weight: var(--weight-medium);
    color: var(--text-body);
}

.portal-profile-roles {
    margin-top: var(--space-1);
}

.mud-overlay.mud-overlay-dialog > .mud-overlay-scrim.mud-overlay-dark {
    background-color: var(--scrim);
}

.mud-dialog-container .mud-dialog {
    min-width: min(400px, calc(100vw - var(--space-6)));
    max-width: calc(100vw - var(--space-6));
    border: var(--border-w) solid var(--border-default);
    box-shadow: var(--shadow-overlay);
}

.mud-dialog .mud-dialog-title {
    padding: var(--space-5) var(--space-5) var(--space-2);
}

.mud-dialog .mud-dialog-content {
    padding: var(--space-2) var(--space-5);
}

.mud-dialog .mud-dialog-actions {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5) var(--space-5);
}

.mud-dialog .mud-dialog-actions > :not(:first-child) {
    margin-left: 0;
}

.page-loading {
    display: flex;
    justify-content: center;
    padding: 64px 0;
}

.value-loading {
    display: block;
}

.value-loading-value {
    margin-top: var(--space-3);
}

.skeleton {
    display: block;
    flex: 0 0 auto;
    height: 12px;
    background: linear-gradient(90deg, var(--black-howl-10) 0%, var(--ink-50) 50%, var(--black-howl-10) 100%) 0 0 / 200% 100%;
    animation: skeleton-sweep 1.4s ease-in-out infinite;
}

.skeleton-value {
    width: 48px;
    height: 33px;
}

.skeleton-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    box-sizing: border-box;
    border-bottom: var(--border-w) solid var(--border-subtle);
}

.skeleton-row:last-child {
    border-bottom: none;
}

.value-loading-table .skeleton-row {
    height: 37px;
}

.value-loading-links .skeleton-row {
    height: 50px;
    gap: var(--space-3);
}

.skeleton-time {
    width: 112px;
}

.skeleton-person {
    width: 88px;
}

.skeleton-text {
    flex: 1 1 auto;
    max-width: 320px;
}

.skeleton-label-slot {
    flex: 1 1 auto;
    min-width: 0;
}

.skeleton-button {
    width: 6rem;
    height: 32px;
}

@keyframes skeleton-sweep {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
    }
}

.empty-message {
    padding: 16px;
}

.busy-button {
    position: relative;
}

.portal-button.busy-button-active.mud-button-root:disabled,
.portal-button.busy-button-active.mud-button-root.mud-disabled {
    background-color: var(--fantasy-console-sky) !important;
    border-color: var(--fantasy-console-sky) !important;
    color: var(--white) !important;
}

.mud-snackbar.mud-snackbar {
    border-radius: 0;
    border-left: 3px solid transparent;
    box-shadow: var(--shadow-float);
    font-family: var(--font-body);
    font-size: var(--fs-small);
}

.mud-snackbar.mud-alert-filled-success,
.mud-snackbar.mud-alert-filled-info,
.mud-snackbar.mud-alert-filled-normal {
    background-color: var(--surface-inverse);
    color: var(--text-on-dark);
    border-left-color: var(--daphne);
}

.mud-snackbar.mud-alert-filled-warning {
    background-color: var(--surface-inverse);
    color: var(--text-on-dark);
    border-left-color: var(--safflower-scarlet);
}

.mud-snackbar.mud-alert-filled-error {
    background-color: var(--safflower-scarlet);
    color: var(--white);
    border-left-color: var(--scarlet-700);
}

.mud-snackbar.mud-snackbar .mud-snackbar-icon,
.mud-snackbar.mud-snackbar .mud-icon-button {
    color: inherit;
}

.busy-button-active {
    pointer-events: none;
}

.busy-button-label-return {
    animation: busy-button-fade-in 0.2s ease-out;
}

.busy-button-ghost::after {
    content: attr(data-label);
    animation: busy-button-fade-out 0.2s ease-out forwards;
}

.busy-button-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: busy-button-fade-in 0.2s ease-out;
}

.busy-button-spinner .mud-progress-circular {
    color: currentColor;
    width: 18px;
    height: 18px;
}

@keyframes busy-button-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes busy-button-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}