/* Dialog chrome (round 6). Not scoped: MudDialog renders these into the overlay, outside the component
   that declares them. Buttons, chips and segbars come from ui.css. */

.mud-dialog .dh {
    padding: 16px 20px 12px;
    font-size: var(--ui-header);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mud-dialog .dh .crumb {
    margin-left: auto;
    font-size: 12px;
    font-weight: 400;
    color: var(--mud-palette-text-disabled);
    text-align: right;
}

/* a floor so switching panes inside one dialog does not bounce its height around */
.mud-dialog .db {
    padding: 4px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 260px;
}

.mud-dialog .df {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
    align-items: center;
    width: 100%;
}

.mud-dialog .steps {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: var(--mud-palette-text-disabled);
}

.mud-dialog .steps b {
    color: var(--mud-palette-primary);
    font-weight: 500;
}

.mud-dialog .lead {
    font-size: var(--ui-body);
    line-height: 1.5;
}

.mud-dialog .warnbox {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--ui-radius);
    background: rgba(var(--mud-palette-warning-rgb), 0.14);
    color: var(--mud-palette-text-primary);
    font-size: var(--ui-body);
    line-height: 1.45;
    border-left: 3px solid var(--mud-palette-warning);
}

.mud-dialog .results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
}

.mud-dialog .result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--ui-radius);
    font-family: inherit;
    font-size: var(--ui-body);
    letter-spacing: var(--ui-tracking);
    cursor: pointer;
    text-align: left;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    width: 100%;
}

.mud-dialog .result:hover:not(.dis) {
    border-color: var(--mud-palette-primary);
}

.mud-dialog .result.sel {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-info-rgb), 0.12);
}

.mud-dialog .result.dis {
    opacity: 0.45;
    cursor: default;
}

/* identity row in the service editor: read-only, so no pointer and no hover */
.mud-dialog .result.static {
    cursor: default;
    background: var(--mud-palette-background-gray);
}

.mud-dialog .result.static:hover {
    border-color: var(--mud-palette-lines-default);
}

.mud-dialog .result .host {
    margin-left: auto;
    font-size: var(--ui-meta);
    color: var(--mud-palette-text-disabled);
}

.mud-dialog .pickrow {
    display: flex;
    gap: 10px;
    align-items: center;
}

.mud-dialog .pickrow .host-select {
    width: 260px;
    flex: none;
}

.mud-dialog .pickrow .search-field {
    flex: 1;
}

.mud-dialog .grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 720px) {
    .mud-dialog .grid2,
    .mud-dialog .pickrow {
        grid-template-columns: 1fr;
        flex-wrap: wrap;
    }

    .mud-dialog .pickrow .host-select {
        width: 100%;
    }
}

.mud-dialog .dh .back {
    margin-left: -6px;
}

/* tree / list switch above the pane content; pulls up so it reads as the content's toolbar */
.mud-dialog .viewbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: -8px;
}

/* the tree is the tall part of the edit pane, so it scrolls rather than the whole dialog */
.mud-dialog .pane-tree {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--ui-radius);
    max-height: 46vh;
    overflow-y: auto;
}