/* Shell: white bars separated by hairlines instead of shadows. */
.mud-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mud-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
}

.mud-nav-link {
    border-radius: 0 16px 16px 0;
    margin-right: 8px;
}

.mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: #E8F0FE;
    color: #1967D2;
}

.mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: #1967D2;
}

.mud-button-filled {
    box-shadow: none;
}

code {
    font-family: "Roboto Mono", Consolas, monospace;
    font-size: 0.8125rem;
    background: none;
}

/* Page header: title on the left, page actions on the right, outside of any card. */
.page-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    min-height: 40px;
    margin-bottom: 16px;
}

.page-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    margin-bottom: 8px;
}

/* Filled input without underline in a section header: fixed width next to the actions,
   all corners rounded, as high as a medium button. */
.flat-filter {
    flex: 0 0 350px;
}

.flat-filter .mud-input.mud-input-filled {
    height: 36.5px;
    align-items: center;
    border-radius: 4px;
}

.flat-filter .mud-input-slot.mud-input-root {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Tables: gray header row, hairline row separators. */
.mud-table-head .mud-table-cell {
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.mud-table-empty-row .mud-table-cell {
    color: var(--mud-palette-text-secondary);
    text-align: center;
    padding: 32px 16px;
}

/* Expand arrow of an expandable row; the icon is a block so it does not add a line box to the row height. */
.mud-table-cell.expand-cell {
    width: 1px;
    padding-right: 0 !important;
}

.expand-cell .mud-icon-root {
    display: block;
}

.mud-table-cell.avatar-cell {
    width: 1px;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0 !important;
}

.avatar-cell .mud-avatar {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
}

.mud-table-cell.one-line {
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Content of an expanded row spans all columns. Without containment its max-content width
   (long JSON lines) is added to the spanned columns and the auto table layout redistributes
   the widths, squeezing the other columns. With it the content only fills the width the rows set. */
.row-detail {
    contain: inline-size;
}

.row-detail code {
    word-break: break-all;
}

/* Key-value tables inside cards. */
.kv-table td:first-child {
    width: 160px;
    color: var(--mud-palette-text-secondary);
}

.page-tabs .mud-tabs-tabbar {
    background: transparent;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.page-tabs .mud-tab {
    min-width: 0;
    padding: 6px 16px;
}

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

/* SQL editor and JSON of a row. */
.mono .mud-input > textarea.mud-input-root,
pre.json {
    font-family: "Roboto Mono", Consolas, monospace;
    font-size: 0.8125rem;
}

/* SQL editor as a terminal: light gray text on near-black, in both themes. */
.terminal .mud-input.mud-input-filled,
.terminal .mud-input.mud-input-filled:hover,
.terminal .mud-input.mud-input-filled.mud-focused {
    background-color: #1E1E1E !important;
    border-radius: 4px;
}

.terminal .mud-input,
.terminal .mud-input > textarea.mud-input-root {
    color: #D4D4D4;
    caret-color: #D4D4D4;
}

.terminal .mud-input > textarea.mud-input-root::placeholder {
    color: #8A8A8A;
    opacity: 1;
}

.terminal .mud-input.mud-disabled,
.terminal .mud-input.mud-disabled > textarea.mud-input-root {
    color: #8A8A8A;
}

pre.json {
    margin: 0;
    padding: 12px;
    max-height: 480px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    background-color: var(--mud-palette-background);
    border-radius: 4px;
}

/* Circuit failure banner; Blazor switches it to display: block. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    padding: 12px 24px;
    background-color: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    font-family: Roboto, sans-serif;
    font-size: 0.875rem;
}

#blazor-error-ui .reload {
    margin-left: 16px;
    color: inherit;
    font-weight: 500;
}