.monacodesk-page {
    display: flex;
    flex-direction: column;
    /* Fill exactly the area MudMainContent leaves below the app bar. Its padding-top is
       calc(var(--mud-appbar-height) - var(--mud-appbar-height)/4), so reserve the same —
       tracks the app-bar height instead of hardcoding, and leaves no dead band at the bottom. */
    height: calc(100dvh - (var(--mud-appbar-height) - var(--mud-appbar-height) / 4));
    min-height: 0;
    color: #243754;
    overflow: hidden;
    box-sizing: border-box;
    /* App-specific named colors for boolean value chips (not part of the MudBlazor
       palette, so kept here as CSS custom properties). */
    --qa-value-true: #adf0c0;   /* pastel green (true) */
    --qa-value-false: #e37f7f;  /* pastel red (false) */
    --qa-value-text: #3f3f46;   /* chip label + icon (matches table key/value text) */
}

    .monacodesk-page .monacodesk-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .monacodesk-page .monacodesk-shell {
        height: 100%;
        min-height: 0;
        padding: 0;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        color: #243754;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Multi-market view fills the same flex space as the other layouts (rather than
       growing the page), so the pagination sits at the bottom near the footer with
       no dead gap when the market list is shorter than the viewport. The list itself
       scrolls internally (see .monacodesk-results-content-multi). */
    .monacodesk-page .monacodesk-shell-multi {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .monacodesk-page .monacodesk-banner {
        flex: 0 0 auto;
        position: relative;
        overflow: hidden;
        margin: 0 0 0.5rem;
        border-radius: 10px;
        color: #243754;
        background: #ffffff;
        border: 1px solid #d9e2ef;
        box-shadow: 0 2px 10px rgba(24, 47, 89, 0.06);
        padding: 4px !important;
        padding-top: 8px !important;
    }

    .monacodesk-page .monacodesk-banner-content {
        position: relative;
        z-index: 1;
    }

    .monacodesk-page .monacodesk-title {
        color: #243754;
        font-weight: 700;
        letter-spacing: 0.01em;
        font-family: "Segoe UI Semibold", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        padding: 0.5rem;
    }

    .monacodesk-page .monacodesk-subtitle {
        max-width: 54rem;
        margin-top: 0.35rem;
        color: #5f7088;
        font-size: 0.95rem;
    }

    .monacodesk-page .monacodesk-actions {
        /* Match the dense field height so the icon buttons center on the same
           vertical band as the dropdowns (not bottom-aligned to them). */
        height: 40px;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.5rem;
        padding: 0;
    }

    .monacodesk-page .monacodesk-actions-slot {
        align-items: center;
        padding-left: 0.5rem;
    }

    /* Single-row filter toolbar: dropdowns + action buttons, a thin separator,
       then the search bar (and view-mode chips). Everything is a direct flex
       child; items wrap to the next line when the row runs out of space. */
    .monacodesk-page .monacodesk-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }

    /* Dropdown width (~ the old lg=2 column); can shrink a little, then wrap.
       Targets the autocomplete root directly — it is the toolbar's flex item
       (MudAutocomplete's Class lands on an inner element, not this root). */
    .monacodesk-page .monacodesk-toolbar > .mud-autocomplete {
        flex: 0 1 12rem;
        min-width: 10rem;
    }

    .monacodesk-page .monacodesk-toolbar-sep {
        align-self: center;
        width: 1px;
        height: 32px;
        background: #d9e2ef;
        margin: 0 0.35rem;
    }

    .monacodesk-page .monacodesk-searchbar {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: nowrap;
    }

        /* Search box: fixed, compact width (matches the compare pages); shrinks a
           little on tight rows but never grows to hog the row. */
        .monacodesk-page .monacodesk-searchbar .monacodesk-search {
            flex: 0 1 14rem;
            min-width: 10rem;
            margin: 0;
        }

    /* Search Configurations has no view-mode chips, so its lone search would float
       in the empty row and draw the eye. Dock it to the far-right corner instead. */
    .monacodesk-page .monacodesk-searchbar-solo {
        margin-left: auto;
    }

        .monacodesk-page .monacodesk-searchbar-solo .monacodesk-search {
            flex: 0 0 24rem;
        }

    /* Search Configurations dropdowns are 15% wider than the shared 12rem default. */
    .monacodesk-page .monacodesk-toolbar-solo > .mud-autocomplete {
        flex-basis: 13.8rem;
    }

    .monacodesk-page .monacodesk-summary {
        flex: 0 0 auto;
        margin: 0 0 0.5rem;
        padding: 0.2rem 0.9rem;
        border-radius: 10px;
        background: #ffffff;
        border: 1px solid #d9e2ef;
        box-shadow: 0 2px 10px rgba(24, 47, 89, 0.04);
    }

    .monacodesk-page .monacodesk-summary-tags {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .monacodesk-page .monacodesk-summary-filters,
    .monacodesk-page .monacodesk-summary-context {
        justify-content: flex-start;
    }

    .monacodesk-page .monacodesk-summary-filters {
        flex-wrap: nowrap;
        gap: 0.35rem;
    }

        .monacodesk-page .monacodesk-summary-filters .mud-chip {
            white-space: nowrap;
        }

    .monacodesk-page .monacodesk-search .mud-input-slot {
        background: #ffffff;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        color: #4f627d;
        /*padding-left: 10px;*/
    }

    /* When the search is enabled (not .mud-disabled), color its magnifier icon and
       resting underline with the theme primary so it clearly reads as active — the
       default muted grey made it look disabled. */
    .monacodesk-page .monacodesk-search .mud-input:not(.mud-disabled) .mud-input-adornment .mud-icon-root {
        color: var(--mud-palette-primary);
    }

    /* Recolor the resting underline via the variable MudBlazor's own ::before rule
       reads (border-bottom uses var(--mud-palette-lines-inputs)); overriding the
       variable is more reliable than fighting the shorthand on the pseudo-element. */
    .monacodesk-page .monacodesk-search .mud-input:not(.mud-disabled) {
        --mud-palette-lines-inputs: var(--mud-palette-primary);
    }

    .monacodesk-page .monacodesk-results {
        position: relative;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        padding: 0;
        background: #ffffff;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid #d9e2ef;
        box-shadow: 0 2px 10px rgba(24, 47, 89, 0.04);
    }

    .monacodesk-page .monacodesk-results-multi {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    .monacodesk-page .monacodesk-results-content {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    .monacodesk-page .monacodesk-results-content-multi {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    .monacodesk-page .monacodesk-market {
        flex: 0 0 auto;
        margin-bottom: 0;
        min-height: auto;
    }

        .monacodesk-page .monacodesk-market .mud-expand-panel {
            border-radius: 0;
            border: 0;
            border-bottom: 1px solid #e6edf7;
            background: #ffffff;
            box-shadow: none;
        }

    .monacodesk-page .monacodesk-market-single {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding: 0.9rem 1rem 0.75rem;
        border-bottom: 1px solid #e6edf7;
        background: #ffffff;
    }

    /* --- Flex-driven table height (no fixed viewport constant).
       Single-table layouts (the two Compare pages and the single-market
       viewer) let the table fill whatever height is left after the header and
       tabs, so it never overflows or clips its container at any window size.
       Scoped to the wrappers that only exist in those layouts, so the
       multi-market scrolling layout is untouched. No component changes needed:
       the last rule overrides the MudTable's fixed inline max-height. --- */
    .monacodesk-page .monacodesk-compare-table-wrap {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .monacodesk-page .monacodesk-compare-table-wrap .mud-tabs,
    .monacodesk-page .monacodesk-market-single .mud-tabs {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

        .monacodesk-page .monacodesk-compare-table-wrap .mud-tabs-panels,
        .monacodesk-page .monacodesk-market-single .mud-tabs-panels {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
        }

            .monacodesk-page .monacodesk-compare-table-wrap .mud-tabs-panels > .mud-tab-panel,
            .monacodesk-page .monacodesk-market-single .mud-tabs-panels > .mud-tab-panel {
                flex: 1 1 auto;
                min-height: 0;
            }

        /* the root table fills the panel and scrolls internally; override the
           fixed viewport-relative height/max-height MudTable sets inline from its Height
           parameter, so the scroll area fills the flex space instead of a fixed px value. */
        .monacodesk-page .monacodesk-compare-table-wrap .monacodesk-table-root,
        .monacodesk-page .monacodesk-market-single .monacodesk-table-root {
            height: 100%;
            min-height: 0;
        }

            .monacodesk-page .monacodesk-compare-table-wrap .monacodesk-table-root > .mud-table-container,
            .monacodesk-page .monacodesk-market-single .monacodesk-table-root > .mud-table-container {
                height: 100% !important;
                max-height: 100% !important;
            }

    .monacodesk-page .monacodesk-market-title {
        flex-wrap: wrap;
        color: #243754;
        font-family: "Segoe UI Semibold", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }

    .monacodesk-page .monacodesk-tabs {
        margin-top: 0.25rem;
    }

        /* MudBlazor 9.x renamed .mud-tabs-toolbar -> .mud-tabs-tabbar */
        .monacodesk-page .monacodesk-tabs .mud-tabs-tabbar {
            padding: 0.25rem;
            border-radius: 8px;
            background: transparent;
        }

        .monacodesk-page .monacodesk-tabs .mud-tabs-tabbar-content {
            gap: 0.25rem;
        }

        /* --- Multi-row (wrapping) tabs, VS-style "Show Tabs in Multiple Rows".
           MudBlazor has no native multi-row mode; these overrides make the
           tab strip wrap onto multiple lines instead of scrolling. (v9.x) --- */
        .monacodesk-page .monacodesk-tabs .mud-tabs-tabbar-content {
            white-space: normal;
            overflow: visible;
        }

        .monacodesk-page .monacodesk-tabs .mud-tabs-tabbar-wrapper {
            width: 100% !important;    /* override MudBlazor's width:max-content */
            flex-wrap: wrap;
            transform: none !important; /* cancel inline translateX scroll offset */
            row-gap: 0.25rem;
        }

        /* scroll arrows are no longer needed once tabs wrap */
        .monacodesk-page .monacodesk-tabs .mud-tabs-scroll-button {
            display: none !important;
        }

        /* the animated underline is JS-positioned for a single row, so hide it;
           the active tab is still indicated by the background/shadow below */
        .monacodesk-page .monacodesk-tabs .mud-tab-slider {
            display: none !important;
        }

        .monacodesk-page .monacodesk-tabs .mud-tab {
            min-height: 38px;
            position: relative;
            /* Default right padding (tabs with no badge). Badged tabs get more via the :has() rule below. */
            padding-right: 1rem;
            /*margin-right: 0.35rem;*/
            border-radius: 6px 6px 0 0;
            /* reserve underline space so the active tab doesn't change height */
            border-bottom: 3px solid transparent;
            font-family: "Segoe UI Semibold", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            font-size: 0.75rem;
            color: #36527b;
        }

            /* Only tabs that actually render a match-count badge reserve room for the
               bubble, so badge-less tabs stay compact. (BadgeData is null when count = 0,
               so no .mud-badge element is emitted for those tabs.) */
            .monacodesk-page .monacodesk-tabs .mud-tab:has(.mud-badge) {
                padding-right: 2.2rem;
            }

            /* Active tab: blue underline + slight elevation (no filled background). */
            .monacodesk-page .monacodesk-tabs .mud-tab.mud-tab-active {
                background: transparent;
                border-bottom-color: #2456a6;
                box-shadow: 0 1px 4px rgba(36, 86, 166, 0.1);
                color: #21457f;
            }

        .monacodesk-page .monacodesk-tabs .mud-badge {
            font-family: "Segoe UI Semibold", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        }

        .monacodesk-page .monacodesk-tabs .mud-badge-root {
            overflow: visible;
        }

            .monacodesk-page .monacodesk-tabs .mud-badge-root .mud-badge {
                top: 50%;
                right: 0.35rem;
                transform: translateY(-50%);
                min-width: 1.45rem;
                height: 1.45rem;
                padding: 0 0.28rem;
                font-size: 0.72rem;
                line-height: 1.45rem;
            }

    .monacodesk-page .monacodesk-tabs .mud-tabs-panels {
        padding: 0.5rem 0.2rem 0.2rem;
    }

    .monacodesk-page .monacodesk-pagination {
        flex: 0 0 auto;
        margin-top: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        border-radius: 0;
        background: #ffffff;
        border-top: 1px solid #e6edf7;
    }

    .monacodesk-page .monacodesk-pagination-row {
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .monacodesk-page .monacodesk-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 100%;
        padding: 3rem 1.5rem;
        border-radius: 10px;
        background: #ffffff;
        border: 1px dashed rgba(36, 86, 166, 0.2);
        text-align: center;
    }

    .monacodesk-page .monacodesk-empty-hint {
        color: rgba(26, 43, 71, 0.75);
    }

    .monacodesk-page .monacodesk-results-placeholder {
        min-height: 100%;
        border-radius: 10px;
        background: #ffffff;
    }

    .monacodesk-page .monacodesk-footer {
        flex: 0 0 auto;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.35rem 0.25rem 0.15rem;
    }

    .monacodesk-page .monacodesk-footer-left {
        color: #5f7088;
        font-size: 0.7rem;
        line-height: 1.25;
    }

    .monacodesk-page .monacodesk-footer-right {
        margin-left: auto;
        margin-right: 1rem;
        font-size: 0.7rem;
        color: #5f7088;
        align-items: flex-end;
    }

    .monacodesk-page .monacodesk-version {
        padding-top: 0.25rem;
    }

    .monacodesk-page .monacodesk-banner .mud-input-control {
        margin-top: 0;
        margin-bottom: 4px;
    }

    .monacodesk-page .monacodesk-banner .mud-input-slot {
        min-height: 32px;
        align-items: center;
        font-family: "Segoe UI", Arial, sans-serif;
        background: #ffffff;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .monacodesk-page .monacodesk-banner .mud-input-outlined {
        min-height: 28px;
    }

    .monacodesk-page .monacodesk-banner .mud-input-adornment {
        margin-top: 0;
        margin-bottom: 0;
    }

    .monacodesk-page .monacodesk-summary .mud-input-control,
    .monacodesk-page .monacodesk-results .mud-input-control,
    .monacodesk-page .monacodesk-pagination .mud-input-control {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }

    .monacodesk-page .monacodesk-banner .mud-button-root {
        min-width: 0;
        height: 36px;
        white-space: nowrap;
        line-height: 1;
        font-family: "Segoe UI Semibold", "Segoe UI", Arial, sans-serif;
        font-size: 0.88rem;
    }

    .monacodesk-page .monacodesk-banner .refresh-button {
        margin-top: 0.4rem;
        margin-right: 0.5rem;
    }

    .monacodesk-page .monacodesk-summary-tags .mud-chip,
    .monacodesk-page .monacodesk-market-title .mud-chip,
    .monacodesk-page .monacodesk-pagination .mud-chip {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }

        .monacodesk-page .monacodesk-summary-tags .mud-chip.mud-chip-color-primary,
        .monacodesk-page .monacodesk-market-title .mud-chip.mud-chip-color-primary {
            background: #eef5ff;
            border-color: #c6daf7;
            color: #2f5f9d;
        }

        .monacodesk-page .monacodesk-summary-tags .mud-chip.mud-chip-color-secondary,
        .monacodesk-page .monacodesk-market-title .mud-chip.mud-chip-color-secondary {
            background: #f3f0ff;
            border-color: #d6ccff;
            color: #6554c0;
        }

        .monacodesk-page .monacodesk-summary-tags .mud-chip.mud-chip-color-info,
        .monacodesk-page .monacodesk-market-title .mud-chip.mud-chip-color-info {
            background: #eefbff;
            border-color: #c9eaf7;
            color: #1f6e8c;
        }

        .monacodesk-page .monacodesk-summary-tags .mud-chip.mud-chip-color-warning,
        .monacodesk-page .monacodesk-market-title .mud-chip.mud-chip-color-warning {
            background: #fff5df;
            border: 1px solid #f5d48f;
            color: #8f5d00;
        }

    /* Boolean value chips use app-specific named colors (--qa-value-* on .monacodesk-page). */
    .monacodesk-page .monacodesk-table .mud-chip {
        margin: 0px !important;
    }

    .monacodesk-page .monacodesk-bool-chip {
        color: var(--qa-value-text) !important;
    }

        .monacodesk-page .monacodesk-bool-chip .mud-icon-root {
            color: var(--qa-value-text) !important;
        }

    .monacodesk-page .monacodesk-bool-true {
        background: var(--qa-value-true) !important;
    }

    .monacodesk-page .monacodesk-bool-false {
        background: var(--qa-value-false) !important;
    }

    .monacodesk-page .monacodesk-results .mud-expansion-panel-header {
        padding: 0.9rem 1rem 0.8rem;
    }

    .monacodesk-page .monacodesk-results .mud-expansion-panel-content {
        padding: 0 1rem 0.75rem;
    }

    .monacodesk-page .monacodesk-table {
        border: 1px solid #d9d9d9;
        border-radius: 6px;
        overflow: hidden;
        background: #ffffff;
        font-size: 0.9rem;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        color: #3f3f46;
    }

    .monacodesk-page .monacodesk-table-root {
        box-shadow: none;
    }

    .monacodesk-page .monacodesk-table-child {
        margin-top: 0.15rem;
        border-color: #e5e7eb;
        background: #ffffff;
    }

    .monacodesk-page .monacodesk-table thead {
        background: #ffffff;
    }

    .monacodesk-page .monacodesk-table th {
        padding: 0.68rem 0.75rem 0.58rem;
        border-bottom: 1px solid #d9d9d9;
        color: #404040;
        font-family: "Segoe UI Semibold", "Segoe UI", Arial, sans-serif;
        font-size: 0.78rem;
        letter-spacing: 0;
        line-height: 1.15;
    }

    .monacodesk-page .monacodesk-table td {
        padding: 0.42rem 0.75rem;
        border-bottom: 1px solid #e5e7eb;
        color: #3f3f46;
        vertical-align: middle;
        line-height: 1.15;
    }

    .monacodesk-page .monacodesk-table tbody tr:hover {
        background: #fafafa;
    }

    .monacodesk-page .monacodesk-table-icon {
        width: 28px;
    }

    /* Bold every table header cell. The four-class selector beats MudBlazor's
       own .mud-table-root .mud-table-head .mud-table-cell rule (0,3,0), which
       otherwise forces the subtitle2 (medium) weight. */
    .monacodesk-page .mud-table-root .mud-table-head .mud-table-cell,
    .monacodesk-page .monacodesk-table-head {
        font-weight: 700;
    }

    .monacodesk-page .monacodesk-table-toggle-cell {
        width: 28px;
        padding-right: 0.2rem !important;
        padding-left: 0.5rem !important;
    }

    .monacodesk-page .monacodesk-table-toggle {
        min-width: 18px;
        width: 18px;
        height: 18px;
        padding: 0;
    }

    .monacodesk-page .monacodesk-table-key-cell,
    .monacodesk-page .monacodesk-table-value-cell,
    .monacodesk-page .monacodesk-table-label-cell {
        line-height: 1.15;
    }

    .monacodesk-page .monacodesk-table-key {
        color: #3f3f46;
        font-weight: 600;
    }

    .monacodesk-page .monacodesk-table-value,
    .monacodesk-page .monacodesk-table-label {
        font-size: 0.88rem;
        color: #3f3f46;
    }

        .monacodesk-page .monacodesk-table-key mark,
        .monacodesk-page .monacodesk-table-value mark,
        .monacodesk-page .monacodesk-table-label mark,
        .monacodesk-page .monacodesk-runtime-param-text mark {
            display: inline;
            font-family: inherit !important;
            font-size: inherit !important;
            font-style: inherit !important;
            font-weight: 500 !important;
            line-height: inherit !important;
            letter-spacing: inherit !important;
            color: inherit !important;
            background: #fff1a8;
            padding: 0;
            border-radius: 2px;
            white-space: inherit;
            word-break: inherit;
            overflow-wrap: inherit;
            box-decoration-break: clone;
        }

    /* Runtime Parameters page: a key can drive several parameters, so they stack one per
       line and keep the monospaced look of the parameter paths they name. */
    .monacodesk-page .monacodesk-runtime-params {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    /* Parameter text plus its copy button on one line; the text is a single flex item so
       the highlighter's spans wrap as one string instead of breaking apart. */
    .monacodesk-page .monacodesk-runtime-param {
        display: flex;
        align-items: flex-start;
        gap: 0.15rem;
    }

    .monacodesk-page .monacodesk-runtime-param-text {
        flex: 0 1 auto;
        min-width: 0;
        font-family: Consolas, "Courier New", monospace;
        font-size: 0.82rem;
        color: #2f5f9d;
        word-break: break-word;
    }

    /* Faint until the row is hovered, so 117 copy buttons stay discoverable without
       competing with the data. */
    .monacodesk-page .monacodesk-runtime-copy {
        flex: 0 0 auto;
        padding: 2px;
        color: #8d9aad;
        opacity: 0.35;
    }

        .monacodesk-page .monacodesk-runtime-copy .mud-icon-root {
            font-size: 0.95rem;
        }

    .monacodesk-page .monacodesk-runtime-table tbody tr:hover .monacodesk-runtime-copy,
    .monacodesk-page .monacodesk-runtime-copy:focus-visible {
        opacity: 1;
    }

    /* Fixed layout so the three columns keep the ColGroup proportions instead of being
       stretched by the longest key, and long keys/parameters wrap inside their cell. */
    .monacodesk-page .monacodesk-runtime-table table {
        table-layout: fixed;
        width: 100%;
    }

    .monacodesk-page .monacodesk-runtime-table td {
        vertical-align: top;
    }

    /* Key and description drop from the shared table sizes (0.9rem / 0.88rem) to match the
       parameter column, so all three columns read at one size. Scoped to this table only —
       the other Monaco Desk tables keep the shared sizes. Sized on the cells because
       MudHighlighter only emits its classed spans while a search is active. */
    .monacodesk-page .monacodesk-runtime-table .monacodesk-table-key-cell,
    .monacodesk-page .monacodesk-runtime-table .monacodesk-table-label-cell {
        font-size: 0.82rem;
    }

    .monacodesk-page .monacodesk-runtime-table .monacodesk-table-key-cell {
        word-break: break-word;
    }

    .monacodesk-page .monacodesk-runtime-table .monacodesk-table-label {
        font-size: inherit;
    }

    /* Sits left of the search box in the toolbar and gives up space to it first. */
    .monacodesk-page .monacodesk-runtime-intro {
        flex: 1 1 18rem;
        min-width: 12rem;
        margin: 0 0 0 0.5rem;
    }

    .monacodesk-page .monacodesk-table-summary {
        color: #14b8a6;
        font-size: 0.88rem;
        font-style: italic;
        white-space: nowrap;
    }

    .monacodesk-page .monacodesk-table-child-wrap {
        padding: 0.35rem 0.5rem 0.45rem !important;
        background: #ffffff;
    }

    .monacodesk-page .monacodesk-table .mud-table-container,
    .monacodesk-page .monacodesk-table .mud-table-root {
        background: transparent;
    }

    .monacodesk-page .monacodesk-table-null-chip {
        height: 1.7rem;
        min-height: 1.7rem;
        border: 1px solid #c7c7c7 !important;
        background: #ffffff !important;
        color: #555 !important;
        border-radius: 999px;
        font-size: 0.82rem;
        line-height: 1;
        margin: 0px !important;
    }

    .monacodesk-page .monacodesk-compare-alert {
        margin-top: -0.5rem;
    }

    .monacodesk-page .monacodesk-refresh-panel {
        height: 100%;
        margin: 0;
        padding: 0.9rem 1rem;
    }

        .monacodesk-page .monacodesk-refresh-panel table {
            table-layout: fixed;
        }

        .monacodesk-page .monacodesk-refresh-panel td:first-child {
            width: 44%;
            color: #5f7088;
            font-family: "Segoe UI Semibold", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        }

        .monacodesk-page .monacodesk-refresh-panel td:last-child {
            color: #243754;
            word-break: break-word;
        }

    .monacodesk-page .monacodesk-compare-table-wrap {
        padding: 0.85rem;
        border-radius: 10px;
        background: #ffffff;
        overflow: hidden;
    }

    .monacodesk-page .monacodesk-compare-subtitle {
        display: block;
        width: 100%;
        max-width: none;
        white-space: nowrap;
    }

    .monacodesk-page .monacodesk-compare-table .mud-table-container,
    .monacodesk-page .monacodesk-compare-table .mud-table-root {
        background: #ffffff;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .monacodesk-page .monacodesk-compare-table table {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
    }

    .monacodesk-page .monacodesk-compare-table th,
    .monacodesk-page .monacodesk-compare-table td {
        max-width: 0;
        overflow: hidden;
    }

    .monacodesk-page .monacodesk-compare-table th {
        white-space: nowrap;
    }

    .monacodesk-page .monacodesk-compare-table .mud-table-body .mud-table-row:hover {
        background: #fafcff;
    }

    .monacodesk-page .monacodesk-compare-table .mud-table-body .mud-table-row.monacodesk-compare-row-diff > td,
    .monacodesk-page .monacodesk-compare-table .mud-table-body .mud-table-row.monacodesk-compare-row-diff:hover > td {
        background: #fff7e6 !important;
    }

    .monacodesk-page .monacodesk-compare-table .monacodesk-table-key,
    .monacodesk-page .monacodesk-compare-table .monacodesk-table-value {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .monacodesk-page .monacodesk-compare-missing {
        color: #8d9aad;
        font-style: italic;
    }

    /* Explicit marker for a key that does not exist on a side, so it is
       distinguishable from a key that is present but has an empty value. */
    .monacodesk-page .monacodesk-compare-absent {
        color: #8d9aad;
        font-style: italic;
        font-size: 0.8rem;
        opacity: 0.85;
    }

    .monacodesk-page .monacodesk-compare-pane {
        height: 100%;
        min-height: calc(100dvh - 22rem);
        padding: 0.9rem 1rem 1rem;
        border-radius: 10px;
        border: 1px solid #d9e2ef;
        background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        box-shadow: 0 2px 10px rgba(24, 47, 89, 0.04);
    }

    .monacodesk-page .monacodesk-compare-pane-left {
        border-top: 4px solid #3f7cd8;
    }

    .monacodesk-page .monacodesk-compare-pane-right {
        border-top: 4px solid #1e9d8b;
    }

    .monacodesk-page .monacodesk-compare-pane-content {
        height: 100%;
    }

    .monacodesk-page .monacodesk-compare-pane-header {
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .monacodesk-page .monacodesk-compare-pane-chips {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .monacodesk-page .monacodesk-compare-empty {
        min-height: calc(100dvh - 28rem);
    }

    .monacodesk-page .refresh-status {
        margin: 10px;
    }

@media (max-width: 960px) {
    .monacodesk-page .monacodesk-summary-filters {
        flex-wrap: wrap;
    }

    .monacodesk-page .monacodesk-summary-tags,
    .monacodesk-page .monacodesk-pagination-row {
        justify-content: flex-start;
    }

    .monacodesk-page .monacodesk-actions {
        justify-content: flex-start;
        align-items: center;
        height: auto;
    }

    .monacodesk-page .monacodesk-compare-pane {
        min-height: auto;
    }

    .monacodesk-page .monacodesk-compare-empty {
        min-height: 18rem;
    }

    .monacodesk-page .monacodesk-compare-subtitle {
        white-space: normal;
    }

    .monacodesk-page .monacodesk-compare-table .mud-table-container,
    .monacodesk-page .monacodesk-compare-table .mud-table-root {
        overflow-x: auto;
    }

    .monacodesk-page .monacodesk-footer {
        flex-direction: column;
        align-items: flex-start;
    }

}