/* Relationship Explorer — page-specific styles
   Built on top of the global theme; design tokens declared at file scope. */

/* ============== Design tokens (page scope) ============== */
/* These used to be literal hexes mirroring Theme.cs, which meant the page could follow neither
   dark mode nor the operator theme. They are now aliases onto the real palette, so the Explorer
   themes like the rest of the app and shares a colour language with SetupStructureRail. */
.rx-page {
    /* Primary palette */
    --color-primary: var(--mud-palette-text-primary);
    --color-secondary: var(--wgt-status-info);
    --color-success: var(--wgt-status-good);
    --color-warning: var(--wgt-status-warning);
    --color-error: var(--wgt-status-critical);

    /* Surfaces */
    --color-bg-gray: var(--mud-palette-background-gray);
    --color-gray-light: var(--mud-palette-background-gray);
    --color-surface: var(--mud-palette-surface);

    /* Text */
    --color-fg-1: var(--mud-palette-text-primary);
    --color-fg-2: var(--mud-palette-text-secondary);
    --color-fg-3: var(--mud-palette-text-secondary);

    /* Lines */
    --color-border: var(--mud-palette-table-lines);
    --color-table-lines: var(--mud-palette-table-lines);

    /* Entity-type hues — the identity axis of the graph. Declared once here because three
       consumers read them: the legend swatches, the right-panel accents, and the Cytoscape
       stylesheet (which resolves them through a probe element at init — see graphInterop.js).
       Mapped onto the validated --wgt-cat and --wgt-status sets rather than private hexes, so
       they re-step correctly in dark mode. */
    --rx-type-client: var(--wgt-cat-1);
    --rx-type-agreement: var(--wgt-status-good);
    --rx-type-property: var(--wgt-cat-2);
    --rx-type-assetcategory: var(--wgt-cat-5);
    --rx-type-assettype: var(--wgt-cat-4);
    --rx-type-asset: var(--wgt-cat-other);
    --rx-type-job: var(--wgt-seq-2);
    --rx-type-defect: var(--wgt-status-critical);
    --rx-type-contact: var(--wgt-cat-3);
    --rx-type-user: var(--wgt-cat-other);

    /* The rail's node recipe (.ssr-node.is-filled): a pale tint of the hue, a saturated hue
       border, dark text. Applied per type below and mirrored in the Cytoscape stylesheet. */
    --rx-tint-fill: 8%;
    --rx-tint-border: 35%;

    /* Shape */
    --radius: var(--mud-default-borderradius);
    --radius-pill: 999px;

    /* Shadow */
    --shadow-1: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.06);
    --shadow-3: 0 10px 20px rgba(0,0,0,.08), 0 3px 6px rgba(0,0,0,.06);

    /* Typography */
    --font-base: 'Roboto', 'Montserrat', 'Helvetica', 'Arial', sans-serif;

    /* Motion */
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
}

/* ============== Page shell ============== */
.rx-page {
    --rx-left-w: 280px;
    --rx-right-w: 320px;
    display: grid;
    grid-template-columns: var(--rx-left-w) 1fr var(--rx-right-w);
    grid-template-rows: 56px 1fr 88px;
    grid-template-areas:
        "toolbar toolbar toolbar"
        "left    canvas  right"
        "left    insights right";
    height: calc(100vh - 64px);
    background: var(--color-bg-gray);
    overflow: hidden;
    font-family: var(--font-base);
    color: var(--color-fg-1);
}

/* Collapsed panel rail width (driven by data attributes on .rx-page) */
.rx-page[data-left-collapsed="true"] {
    --rx-left-w: 44px;
}

.rx-page[data-right-collapsed="true"] {
    --rx-right-w: 44px;
}

/* ============== Toolbar ============== */
.rx-toolbar {
    grid-area: toolbar;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 16px;
    box-shadow: var(--shadow-1);
    z-index: 5;
}

/* Back button — sits at the far left, tucked against the edge and coloured
   to match the toolbar's muted controls rather than the accent palette. */
.rx-back {
    margin-left: -8px;
    color: var(--color-secondary);
}

.rx-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 16px;
    border-right: 1px solid var(--color-border);
    height: 100%;
}

.rx-brand-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    /* Accent, not --color-primary: that token is now text-primary, which inverts to near-white in
       dark mode and would leave a white glyph on a white tile. */
    background: var(--color-secondary);
    color: var(--mud-palette-primary-text);
    display: grid;
    place-items: center;
}

    .rx-brand-icon .mud-icon-root {
        font-size: 18px;
    }

.rx-brand-text {
    line-height: 1.1;
}

.rx-brand-title {
    font: 600 14px var(--font-base);
    color: var(--color-fg-1);
}

.rx-brand-sub {
    font: 400 11.5px var(--font-base);
    color: var(--color-secondary);
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Search field — flatten MudAutocomplete chrome to look like a plain pill */
.rx-search {
    position: relative;
    flex: 0 1 460px;
}

    .rx-search .mud-input-control,
    .rx-search .mud-input-control-input-container {
        margin: 0;
        padding: 0;
    }

    .rx-search .mud-input.mud-input-outlined > input,
    .rx-search .mud-input.mud-input-outlined > .mud-input-slot {
        height: 36px;
        padding: 0 36px 0 38px;
        background: var(--color-gray-light);
        border-radius: var(--radius);
        font: 400 13.5px var(--font-base);
        color: var(--color-fg-1);
        box-sizing: border-box;
    }

    .rx-search .mud-input.mud-input-outlined .mud-input-outlined-border {
        border-color: var(--color-border);
        border-radius: var(--radius);
    }

    .rx-search .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
        border-color: var(--color-secondary);
        border-width: 1px;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-secondary) 18%, transparent);
    }

    .rx-search .mud-input-label {
        display: none;
    }

    .rx-search .mud-input-adornment-start {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-fg-3);
        margin: 0;
        padding: 0;
        z-index: 1;
        pointer-events: none;
    }

    .rx-search .mud-input-adornment-end {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        padding: 0;
    }

    /* The clear (X) button sits inline inside the input. Because the search
       adornment is absolutely positioned at right:4px, give the clear button
       room so the two don't overlap. */
    .rx-search .mud-input.mud-input-outlined .mud-input-clear-button {
        margin-right: 32px;
    }

.rx-toolbar-spacer {
    flex: 1;
}

.rx-control-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 36px;
    border-left: 1px solid var(--color-border);
}

    .rx-control-group:first-of-type {
        border-left: 0;
    }

.rx-control-label {
    font: 500 11px var(--font-base);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-fg-3);
}

.rx-depth {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: hidden;
}

    .rx-depth button {
        width: 24px;
        height: 28px;
        border: 0;
        background: var(--color-surface);
        cursor: pointer;
        color: var(--color-fg-2);
        display: grid;
        place-items: center;
        transition: background var(--dur-fast) var(--ease-standard);
        padding: 0;
    }

        .rx-depth button:hover:not(:disabled) {
            background: var(--color-gray-light);
        }

        .rx-depth button:disabled {
            opacity: .3;
            cursor: not-allowed;
        }

        .rx-depth button .mud-icon-root {
            font-size: 16px;
        }

.rx-depth-value {
    width: 36px;
    text-align: center;
    font: 500 13px var(--font-base);
    color: var(--color-fg-1);
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    padding: 4px 0;
}

.rx-segment {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: hidden;
}

    .rx-segment button {
        background: var(--color-surface);
        border: 0;
        padding: 6px 12px;
        font: 500 11.5px var(--font-base);
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--color-fg-3);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border-right: 1px solid var(--color-border);
        transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
    }

        .rx-segment button:last-child {
            border-right: 0;
        }

        .rx-segment button .mud-icon-root {
            font-size: 16px;
        }

        .rx-segment button:hover {
            background: var(--color-gray-light);
            color: var(--color-fg-1);
        }

        /* Active state uses the rail's filled-node recipe (pale accent tint + accent border +
           accent text) rather than the old near-black chip, which read as a different design
           language sitting inside light chrome. */
        .rx-segment button.is-active {
            background: color-mix(in srgb, var(--color-secondary) var(--rx-tint-fill), var(--color-surface));
            color: var(--color-secondary);
        }

            .rx-segment button.is-active:hover {
                background: color-mix(in srgb, var(--color-secondary) 16%, var(--color-surface));
            }

.rx-icon-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius);
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--color-fg-2);
    transition: background var(--dur-fast) var(--ease-standard);
    padding: 0;
}

    .rx-icon-btn:hover {
        background: var(--color-gray-light);
        color: var(--color-fg-1);
    }

    .rx-icon-btn.is-active {
        background: color-mix(in srgb, var(--color-secondary) var(--rx-tint-fill), var(--color-surface));
        color: var(--color-secondary);
        border-color: color-mix(in srgb, var(--color-secondary) var(--rx-tint-border), var(--color-surface));
    }

    .rx-icon-btn .mud-icon-root {
        font-size: 16px;
    }

.rx-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--color-gray-light);
    border: 1px solid var(--color-border);
    font: 500 12px var(--font-base);
    color: var(--color-fg-1);
}

.rx-user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--mud-palette-primary-text);
    display: grid;
    place-items: center;
    font: 600 10.5px var(--font-base);
}

/* ============== Left panel ============== */
.rx-left {
    grid-area: left;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rx-left-head {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.rx-left-head-main {
    flex: 1 1 auto;
    min-width: 0;
}

.rx-left-kicker {
    font: 500 10.5px var(--font-base);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-fg-3);
}

.rx-left-title {
    font: 600 16px var(--font-base);
    color: var(--color-fg-1);
    margin-top: 2px;
    line-height: 1.3;
}

.rx-left-empty {
    padding: 16px;
    color: var(--color-fg-3);
    font: 400 12.5px var(--font-base);
}

.rx-filter-row {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.rx-filter-chip {
    font: 500 11px var(--font-base);
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-fg-2);
    transition: all var(--dur-fast) var(--ease-standard);
}

    .rx-filter-chip .mud-icon-root {
        font-size: 13px;
    }

    .rx-filter-chip:hover {
        background: var(--color-gray-light);
    }

    .rx-filter-chip.is-active {
        background: color-mix(in srgb, var(--color-secondary) var(--rx-tint-fill), var(--color-surface));
        color: var(--color-secondary);
        border-color: color-mix(in srgb, var(--color-secondary) var(--rx-tint-border), var(--color-surface));
    }

        .rx-filter-chip.is-active.tone-defect {
            background: color-mix(in srgb, var(--color-error) var(--rx-tint-fill), var(--color-surface));
            color: var(--color-error);
            border-color: color-mix(in srgb, var(--color-error) var(--rx-tint-border), var(--color-surface));
        }

.rx-tree {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.rx-tree-section {
    padding: 4px 0;
}

    .rx-tree-section + .rx-tree-section {
        border-top: 1px solid var(--color-table-lines);
        margin-top: 4px;
        padding-top: 8px;
    }

.rx-tree-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    cursor: pointer;
    font: 500 11px var(--font-base);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-fg-3);
    user-select: none;
}

    .rx-tree-group-head .rx-chev {
        transition: transform var(--dur-fast) var(--ease-standard);
        display: inline-flex;
    }

        .rx-tree-group-head .rx-chev .mud-icon-root {
            font-size: 16px;
        }

    .rx-tree-group-head.is-collapsed .rx-chev {
        transform: rotate(-90deg);
    }

.rx-tree-group-count {
    margin-left: auto;
    background: var(--color-gray-light);
    color: var(--color-fg-2);
    font: 500 10.5px var(--font-base);
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    letter-spacing: .02em;
}

.rx-tree-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 28px;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

    .rx-tree-item.is-root {
        padding-left: 14px;
    }

    .rx-tree-item:hover {
        background: var(--color-gray-light);
    }

    .rx-tree-item.is-selected {
        background: color-mix(in srgb, var(--color-secondary) 6%, var(--color-surface));
        border-left-color: var(--color-secondary);
    }

        .rx-tree-item.is-selected .rx-tree-label {
            color: var(--color-primary);
            font-weight: 500;
        }

.rx-tree-glyph {
    flex-shrink: 0;
}

.rx-tree-body {
    flex: 1;
    min-width: 0;
}

.rx-tree-label {
    font: 400 12.5px var(--font-base);
    color: var(--color-fg-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rx-tree-sub {
    font: 400 11px var(--font-base);
    color: var(--color-fg-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rx-tree-flag {
    flex-shrink: 0;
    display: inline-flex;
}

    .rx-tree-flag .mud-icon-root {
        font-size: 14px;
    }

/* ============== Canvas ============== */
.rx-canvas {
    grid-area: canvas;
    position: relative;
    overflow: hidden;
    /* The graph well, matching SetupStructureRail's --ssr-well: a shade off the page surface,
       derived from the palette so it inverts with the theme. */
    background: radial-gradient(circle at 50% 50%, var(--color-surface) 0%, var(--color-bg-gray) 100%);
}

    .rx-canvas::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, var(--color-table-lines) 1px, transparent 1.5px);
        background-size: 24px 24px;
        background-position: 0 0;
        opacity: .55;
        pointer-events: none;
        z-index: 1;
    }

.rx-canvas-host {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.rx-canvas-empty {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    color: var(--color-fg-3);
}

.rx-canvas-corner {
    position: absolute;
    z-index: 4;
    display: flex;
    gap: 6px;
}

    .rx-canvas-corner.tr {
        top: 12px;
        right: 12px;
    }

    .rx-canvas-corner.bl {
        bottom: 12px;
        left: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .rx-canvas-corner.br {
        bottom: 12px;
        right: 12px;
    }

    .rx-canvas-corner.tl {
        top: 12px;
        left: 12px;
    }

.rx-system-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-fg-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}

.rx-zoom {
    display: inline-flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

    .rx-zoom button {
        width: 32px;
        height: 32px;
        border: 0;
        background: var(--color-surface);
        cursor: pointer;
        color: var(--color-fg-2);
        display: grid;
        place-items: center;
        border-bottom: 1px solid var(--color-border);
        padding: 0;
    }

        .rx-zoom button:last-child {
            border-bottom: 0;
        }

        .rx-zoom button:hover {
            background: var(--color-gray-light);
        }

        .rx-zoom button .mud-icon-root {
            font-size: 18px;
        }

.rx-zoom-level {
    font: 500 10.5px var(--font-base);
    color: var(--color-fg-3);
    text-align: center;
    padding: 2px 0;
    background: var(--color-gray-light);
    border-bottom: 1px solid var(--color-border);
    letter-spacing: .04em;
}

.rx-legend {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}

.rx-legend-title {
    font: 500 10.5px var(--font-base);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-fg-3);
    margin-bottom: 2px;
}

.rx-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 400 12px var(--font-base);
    color: var(--color-fg-1);
}

.rx-glyph-wrap {
    width: 18px;
    display: grid;
    place-items: center;
}

.rx-minimap {
    background: color-mix(in srgb, var(--color-surface) 96%, transparent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    width: 180px;
    height: 120px;
    overflow: hidden;
    position: relative;
}

.rx-minimap-label {
    position: absolute;
    bottom: 4px;
    left: 6px;
    font: 500 9.5px var(--font-base);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-fg-3);
    pointer-events: none;
    z-index: 2;
}

.rx-minimap-host {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.rx-minimap-close {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 4px;
    background: color-mix(in srgb, var(--color-surface) 85%, transparent);
    color: var(--color-fg-2);
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
    transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

    .rx-minimap-close:hover {
        background: color-mix(in srgb, var(--color-secondary) var(--rx-tint-fill), var(--color-surface));
        color: var(--color-secondary);
    }

    .rx-minimap-close .mud-icon-root {
        font-size: 14px;
    }

.rx-canvas-floating {
    box-shadow: var(--shadow-1);
}

/* cytoscape-navigator inner styles */
.rx-minimap .cytoscape-navigator {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
}

/* ============== Right panel ============== */
.rx-right {
    grid-area: right;
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rx-right-head {
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

/* ============== Panel collapse / expand ============== */
/* Collapse button shown in panel headers when expanded */
.rx-collapse-btn {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-fg-3);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-standard);
}

    .rx-collapse-btn:hover {
        background: var(--color-gray-light);
        color: var(--color-fg-1);
        border-color: var(--color-fg-3);
    }

    .rx-collapse-btn .mud-icon-root {
        font-size: 18px;
    }

/* Right panel header button is absolutely positioned (header has no flex row) */
.rx-right-head .rx-collapse-btn {
    position: absolute;
    top: 12px;
    right: 12px;
}

/* When collapsed the panel becomes a slim vertical rail */
.rx-left.is-collapsed,
.rx-right.is-collapsed {
    align-items: center;
    padding: 10px 0;
}

.rx-collapse-rail {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    color: var(--color-fg-3);
    transition: color var(--dur-fast) var(--ease-standard);
}

    .rx-collapse-rail:hover {
        color: var(--color-fg-1);
    }

    .rx-collapse-rail .mud-icon-root {
        font-size: 20px;
    }

.rx-collapse-rail-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font: 600 11px var(--font-base);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.rx-right-kind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 10.5px var(--font-base);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-fg-3);
    margin-bottom: 6px;
}

.rx-right-title {
    font: 600 18px var(--font-base);
    color: var(--color-fg-1);
    line-height: 1.3;
}

.rx-right-code {
    font: 500 11.5px monospace;
    color: var(--color-fg-3);
    letter-spacing: .04em;
    margin-top: 2px;
}

.rx-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    width: 100%;
    padding: 7px 12px;
    border-radius: var(--radius);
    font: 500 12px var(--font-base);
    letter-spacing: .04em;
    text-transform: uppercase;
    gap: 8px;
    box-sizing: border-box;
}

.rx-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Status pills use the shared, theme-adaptive --status-* triplets from utilities.css rather than
   private rgba() tints, so they read the same here as everywhere else in the app. */
.rx-status.tone-active {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

    .rx-status.tone-active .rx-status-dot {
        background: var(--color-success);
        box-shadow: 0 0 0 3px var(--status-success-border);
    }

.rx-status.tone-warn {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

    .rx-status.tone-warn .rx-status-dot {
        background: var(--color-warning);
        box-shadow: 0 0 0 3px var(--status-warning-border);
    }

.rx-status.tone-defect {
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

    .rx-status.tone-defect .rx-status-dot {
        background: var(--color-error);
        box-shadow: 0 0 0 3px var(--status-error-border);
    }

.rx-status.tone-neutral {
    background: var(--color-gray-light);
    color: var(--color-fg-2);
}

    .rx-status.tone-neutral .rx-status-dot {
        background: var(--color-fg-3);
    }

.rx-right-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px 18px;
}

.rx-right-empty {
    padding: 24px 18px;
    color: var(--color-fg-3);
    text-align: center;
    font: 400 12.5px var(--font-base);
}

.rx-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.rx-stat {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px;
    background: var(--color-surface);
}

.rx-stat-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 500 10.5px var(--font-base);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-fg-3);
}

    .rx-stat-label .mud-icon-root {
        font-size: 14px;
    }

.rx-stat-value {
    font: 600 22px var(--font-base);
    color: var(--color-fg-1);
    margin-top: 6px;
    letter-spacing: -.01em;
}

    .rx-stat-value.tone-defect, .rx-stat-value.tone-error {
        color: var(--color-error);
    }

    .rx-stat-value.tone-success {
        color: var(--color-success);
    }

    .rx-stat-value.tone-warn, .rx-stat-value.tone-warning {
        color: var(--color-warning);
    }

.rx-section {
    margin-top: 18px;
}

.rx-section-head {
    font: 500 10.5px var(--font-base);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-fg-3);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rx-meta-row {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    font-size: 12.5px;
    align-items: flex-start;
}

    .rx-meta-row .rx-meta-key {
        width: 110px;
        color: var(--color-fg-3);
        flex-shrink: 0;
    }

    .rx-meta-row .rx-meta-val {
        color: var(--color-fg-1);
        flex: 1;
        word-break: break-word;
    }

.rx-dash {
    margin-top: 18px;
    border-top: 1px solid var(--color-border);
    padding-top: 14px;
}

.rx-dash-head {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    background: none;
    border: 0;
    padding: 2px 0;
    cursor: pointer;
    font: 500 10.5px var(--font-base);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-fg-3);
}

    .rx-dash-head:hover {
        color: var(--color-fg-1);
    }

.rx-dash-card {
    margin-top: 12px;
    width: 100%;
    box-sizing: border-box;
    height: 260px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

    .rx-dash-card.rx-dash-card-tall {
        height: 340px;
    }

.rx-actions {
    display: flex;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid var(--color-border);
    background: var(--color-gray-light);
}

.rx-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: 500 13px var(--font-base);
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: var(--radius);
    border: 0;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-standard);
}

    .rx-btn:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

    .rx-btn .mud-icon-root {
        font-size: 16px;
    }

.rx-btn-primary {
    background: var(--color-secondary);
    color: var(--mud-palette-primary-text);
}

    .rx-btn-primary:hover:not(:disabled) {
        background: color-mix(in srgb, var(--color-secondary) 85%, var(--mud-palette-text-primary));
    }

.rx-btn-outlined {
    background: var(--color-surface);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
}

    .rx-btn-outlined:hover:not(:disabled) {
        background: var(--color-gray-light);
    }

    .rx-btn-outlined.is-active {
        background: color-mix(in srgb, var(--color-secondary) var(--rx-tint-fill), var(--color-surface));
        color: var(--color-secondary);
        border-color: color-mix(in srgb, var(--color-secondary) var(--rx-tint-border), var(--color-surface));
    }

/* ============== Insights bar (bottom) ============== */
.rx-insights {
    grid-area: insights;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

.rx-insights-col {
    padding: 12px 16px;
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
}

    .rx-insights-col:last-child {
        border-right: 0;
    }

.rx-insights-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 500 10.5px var(--font-base);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-fg-3);
    margin-bottom: 6px;
}

    .rx-insights-head .mud-icon-root {
        font-size: 14px;
    }

.rx-insights-pill {
    margin-left: auto;
    background: var(--color-gray-light);
    color: var(--color-fg-2);
    font: 500 10px var(--font-base);
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    letter-spacing: .02em;
    text-transform: none;
}

.rx-activity-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 4px 0;
    font-size: 12px;
    color: var(--color-fg-1);
    cursor: pointer;
}

    .rx-activity-row:hover {
        background: var(--color-gray-light);
        margin: 0 -8px;
        padding: 4px 8px;
        border-radius: 3px;
    }

.rx-activity-time {
    color: var(--color-fg-3);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    min-width: 56px;
}

.rx-activity-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
    background: var(--color-fg-3);
}

    .rx-activity-dot.kind-defect {
        background: var(--color-error);
    }

    .rx-activity-dot.kind-inspection {
        background: var(--color-success);
    }

    .rx-activity-dot.kind-agreement {
        background: var(--color-warning);
    }

    .rx-activity-dot.kind-routine {
        background: var(--color-secondary);
    }

.rx-activity-text {
    flex: 1;
    min-width: 0;
}

.rx-comp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 400 12px var(--font-base);
    color: var(--color-fg-1);
    padding: 3px 0;
}

.rx-comp-icon {
    width: 16px;
    flex-shrink: 0;
    color: var(--color-success);
    display: grid;
    place-items: center;
}

    .rx-comp-icon.tone-warn {
        color: var(--color-warning);
    }

    .rx-comp-icon.tone-error {
        color: var(--color-error);
    }

    .rx-comp-icon .mud-icon-root {
        font-size: 16px;
    }

.rx-comp-val {
    margin-left: auto;
    color: var(--color-fg-3);
    font-size: 11.5px;
}

/* ============== Glyphs ============== */
.rx-glyph {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}

    /* Swatches read straight from the shared type hues, so the legend can never drift from the
       node colours the Cytoscape stylesheet resolves out of the same custom properties. */
    .rx-glyph.kind-customer, .rx-glyph.kind-client {
        background: var(--rx-type-client);
        border-radius: 50%;
    }

    .rx-glyph.kind-property {
        background: var(--rx-type-property);
    }

    .rx-glyph.kind-agreement {
        background: var(--rx-type-agreement);
    }

    .rx-glyph.kind-assetcategory {
        background: var(--rx-type-assetcategory);
    }

    .rx-glyph.kind-assettype {
        background: var(--rx-type-assettype);
    }

    .rx-glyph.kind-asset {
        background: var(--rx-type-asset);
    }

    .rx-glyph.kind-job {
        background: var(--rx-type-job);
    }

        .rx-glyph.kind-asset.is-defect {
            background: var(--rx-type-defect);
        }

    .rx-glyph.kind-defect {
        background: var(--rx-type-defect);
    }

    .rx-glyph.kind-contact {
        background: var(--rx-type-contact);
    }

/* ============== Suggest list (autocomplete popper) ============== */
.rx-search .mud-popover {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-3);
    margin-top: 4px;
}

/* ============== Context menu ============== */
.rx-context {
    position: absolute;
    z-index: 10;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-3);
    min-width: 200px;
    padding: 4px 0;
}

    .rx-context button {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 8px 14px;
        background: transparent;
        border: 0;
        font: 400 12.5px var(--font-base);
        color: var(--color-fg-1);
        cursor: pointer;
        text-align: left;
    }

        .rx-context button:hover {
            background: var(--color-gray-light);
        }

        .rx-context button .mud-icon-root {
            font-size: 16px;
        }

/* responsive guard */
@media (max-width: 1200px) {
    .rx-page {
        --rx-left-w: 240px;
        --rx-right-w: 280px;
    }

    .rx-page[data-left-collapsed="true"] {
        --rx-left-w: 44px;
    }

    .rx-page[data-right-collapsed="true"] {
        --rx-right-w: 44px;
    }
}