/* /Account/Pages/Enroll2fa.razor.rz.scp.css */
.mfa-enrollment[b-qvuh6dz7rq] {
    min-height: var(--amx-viewport-h);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-4, 1rem);
    background: var(--bg-primary);
    color: var(--text-primary);
}
.mfa-enrollment-card[b-qvuh6dz7rq] {
    width: 100%;
    max-width: 32rem;
    padding: var(--space-6, 1.5rem);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
}
.mfa-enrollment h1[b-qvuh6dz7rq] { font-size: 1.5rem; }
.mfa-enrollment h2[b-qvuh6dz7rq] { font-size: 1.125rem; }
.mfa-enrollment p[b-qvuh6dz7rq] { color: var(--text-secondary); }
.mfa-enrollment[b-qvuh6dz7rq]  form { display: flex; flex-direction: column; gap: var(--space-3, .75rem); }
.mfa-enrollment[b-qvuh6dz7rq]  input {
    min-height: 44px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm);
    padding: var(--space-2, .5rem);
}
.mfa-enrollment .mfa-enrollment-submit[b-qvuh6dz7rq] {
    min-height: 44px;
    white-space: normal;
    padding: var(--space-3, .75rem);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm);
    background: var(--accent-success-fill);
    /* Preserve the contrast-tested label against global dark-theme control overrides. */
    color: var(--text-on-dark) !important;
    font-weight: 600;
    cursor: pointer;
}
.mfa-enrollment-link[b-qvuh6dz7rq] { display: inline-block; margin-top: 1rem; color: var(--accent-success-text); text-decoration: underline; }
.mfa-enrollment[b-qvuh6dz7rq]  :is(input, button, a):focus-visible { outline: 2px solid var(--border-focus, var(--border-interactive)); outline-offset: 3px; }
.mfa-enrollment-qr[b-qvuh6dz7rq] { width: 200px; height: 200px; max-width: 100%; }
.mfa-enrollment code[b-qvuh6dz7rq] { color: var(--text-primary); overflow-wrap: anywhere; }
.mfa-setup-key[b-qvuh6dz7rq] { user-select: all; }
.mfa-recovery-codes[b-qvuh6dz7rq] { padding-left: 1.5rem; }
.mfa-enrollment .mfa-enrollment-error[b-qvuh6dz7rq], .mfa-enrollment[b-qvuh6dz7rq]  .validation-message, .mfa-enrollment[b-qvuh6dz7rq]  .validation-errors { color: var(--accent-danger-text); }
/* /Account/Shared/ManageNavMenu.razor.rz.scp.css */
.account-manage-nav[b-wh5yvlb5sa]  .nav-link {
    color: var(--accent-link);
    min-height: 24px;
}

.account-manage-nav[b-wh5yvlb5sa]  .nav-link.active {
    color: var(--text-primary);
    background: var(--bg-secondary);
    border-inline-start: 3px solid var(--accent-success-text);
}

.account-manage-nav[b-wh5yvlb5sa]  .nav-link:focus-visible {
    outline: 2px solid var(--accent-success-text);
    outline-offset: -2px;
}
/* /Components/ActionMatrix/ActionMatrixComponent.razor.rz.scp.css */
/* Action Matrix - the schedule grid at the top of an asset's data view.

   Follows DESIGN_LANGUAGE.md: flat fills, hairline borders, one green accent, flat segmented
   toolbar tracks, token-driven so light/dark is a one-file re-point rather than a run of
   per-rule dark overrides. The token block below is the light reference; dark re-points the
   primitives only (§6) and nothing else in this file knows which theme it is in.

   The palette matches AmxStockView's scoped block deliberately - the two sit on the same data
   view page and must read as one surface. */

.action-matrix[b-qxz2b7ynkm] {
    --am-surface: #ffffff;
    --am-fg: #18181b;
    --am-muted: #616776;
    --am-border: #e4e4e7;
    --am-border-strong: #d4d4d8;
    --am-subtle: #f4f4f5;
    /* Hover is deliberately NOT --am-subtle: that grey is the group band's, and a hovered row
       wearing it read as another band. An accent-tinted wash instead, and translucent so it
       layers over the scheduling-window amber rather than replacing it. */
    --am-hover: rgba(21, 128, 61, 0.07);
    --am-accent: #15803d;
    --am-accent-strong: #166534;
    --am-accent-soft: #f0fdf4;

    /* Status colours. These are data, not theme - a status means the same thing in both themes -
       but each still needs a value that clears 3:1 as a meaningful graphic on its own surface,
       hence the re-point below rather than one value for both. */
    --am-ok: var(--amx-action-ok);
    --am-info: var(--amx-action-info);
    --am-warn: var(--amx-action-warn);
    --am-danger: var(--amx-action-danger);

    --am-window: rgba(245, 158, 11, 0.16);
    --am-window-line: #d97706;

    --am-radius-sm: 6px;
    --am-radius-md: 8px;
    --am-radius-lg: 12px;

    display: block;
    margin-bottom: 0.75rem;
    color: var(--am-fg);
    font-size: 0.875rem;
}

[data-theme="dark"] .action-matrix[b-qxz2b7ynkm] {
    --am-surface: #111726;
    --am-fg: #e6e9f2;
    --am-muted: #8e98ad;
    --am-border: #202840;
    --am-border-strong: #2c3552;
    --am-subtle: #1a2136;
    --am-hover: rgba(34, 197, 94, 0.10);
    --am-accent: #22c55e;
    --am-accent-strong: #4ade80;
    --am-accent-soft: rgba(34, 197, 94, 0.12);
    /* Re-pointed in app.css for dark; the names stay so the rules below are unchanged. */
    --am-ok: var(--amx-action-ok);
    --am-info: var(--amx-action-info);
    --am-warn: var(--amx-action-warn);
    --am-danger: var(--amx-action-danger);
    /* A warm tint costs more against a dark ground than against a white one: at the light
       theme's 0.16 the band was the loudest thing on the card in dark, which it is not. */
    --am-window: rgba(245, 158, 11, 0.09);
    --am-window-line: #f0a04b;
}

/* ── Card ───────────────────────────────────────────────────────────────── */

.am-card[b-qxz2b7ynkm] {
    display: flex;
    flex-direction: column;
    background: var(--am-surface);
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.am-head[b-qxz2b7ynkm] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--am-border);
}

.am-head-icon[b-qxz2b7ynkm] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--am-radius-md);
    background: var(--am-accent);
    color: #fff;
    font-size: 0.75rem;
}

.am-titles[b-qxz2b7ynkm] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    flex-wrap: wrap;
}

.am-title[b-qxz2b7ynkm] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--am-fg);
}

/* The period the grid is showing. Without it a user who has paged back is looking at twelve
   months with no year on them. */
.am-period[b-qxz2b7ynkm] {
    font-size: 0.75rem;
    color: var(--am-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.am-head-actions[b-qxz2b7ynkm] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* The primary action, stated here rather than borrowing app.css's .dbd-* buttons: those paint a
   brightness filter and their own dark variants at up to 5 specificity units, and this card wants
   one flat accent fill in both themes. */
.am-primary-btn[b-qxz2b7ynkm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 0.75rem;
    border: 0;
    border-radius: var(--am-radius-md);
    background: var(--am-accent);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 550;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: filter var(--transition-fast, 100ms ease);
}

.am-primary-btn:hover[b-qxz2b7ynkm] {
    filter: brightness(1.06);
    color: #fff;
}

.am-primary-btn:focus-visible[b-qxz2b7ynkm] {
    outline: 2px solid var(--am-accent);
    outline-offset: 2px;
}

/* ── Toolbar ────────────────────────────────────────────────────────────── */

.am-toolbar[b-qxz2b7ynkm] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--am-border);
}

/* Keep the filter summary compact beside the toolbar controls. */
.am-filter-summary[b-qxz2b7ynkm] { margin-left: auto; min-width: 0; max-width: 100%; }

/* The app's flat toolbar track: the rail is the frame, the buttons are flat until touched.
   Same 2px padding / 6px inner radius as the grid header's .view-toggle-buttons, at 32px rather
   than 36 because this one sits inside a card rather than being the page's own toolbar. */
.am-track[b-qxz2b7ynkm] {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 2px;
    gap: 2px;
    align-items: stretch;
    background: var(--am-subtle);
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
}

/* Native radios drive the time-frame track (arrow-key navigation and the group semantics come
   free); the period and fit-height tracks are buttons. One declaration for all of them so a
   button never behaves differently from the one beside it. */
.am-seg[b-qxz2b7ynkm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 30px;
    padding: 0 0.625rem;
    margin: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--am-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition-fast, 100ms ease), color var(--transition-fast, 100ms ease);
}

.am-seg:hover[b-qxz2b7ynkm] {
    background: var(--am-surface);
    color: var(--am-fg);
}

.am-seg:disabled[b-qxz2b7ynkm],
.am-seg.is-disabled[b-qxz2b7ynkm] {
    opacity: 0.45;
    cursor: default;
}

    .am-seg:disabled:hover[b-qxz2b7ynkm],
    .am-seg.is-disabled:hover[b-qxz2b7ynkm] {
        background: transparent;
        color: var(--am-muted);
    }

/* The current one, raised out of the track - same treatment as .view-btn.active. */
.am-seg.is-active[b-qxz2b7ynkm] {
    background: var(--am-surface);
    color: var(--am-accent-strong);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.am-seg:focus-visible[b-qxz2b7ynkm] {
    outline: 2px solid var(--am-accent);
    outline-offset: -1px;
}

/* The radio itself is clipped rather than display:none, which would drop it from the tab order
   and take the keyboard group with it. */
.am-seg-input[b-qxz2b7ynkm] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.am-seg-input:checked + .am-seg[b-qxz2b7ynkm] {
    background: var(--am-surface);
    color: var(--am-accent-strong);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.am-seg-input:focus-visible + .am-seg[b-qxz2b7ynkm] {
    outline: 2px solid var(--am-accent);
    outline-offset: -1px;
}

.am-toolbar-status[b-qxz2b7ynkm] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--am-muted);
}

/* ── Grid ───────────────────────────────────────────────────────────────── */

/* Capped by default so the matrix does not push the rest of the asset page off screen; the
   Fit height toggle lifts the cap. (Both states used to be identical - the toggle set
   `max-height: none; overflow-y: visible`, which is what the container already did.) */
.am-scroll[b-qxz2b7ynkm] {
    overflow: auto;
    max-height: 22rem;
}

.am-scroll.is-fit[b-qxz2b7ynkm] {
    max-height: none;
}

.am-scroll:focus-visible[b-qxz2b7ynkm] {
    outline: 2px solid var(--am-accent);
    outline-offset: -2px;
}

/* border-collapse: separate, not collapse - a collapsed table drops the borders of sticky cells
   as they scroll, because the border belongs to the table rather than to the cell. */
.am-table[b-qxz2b7ynkm] {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 0.8125rem;
    color: var(--am-fg);
}

    .am-table th[b-qxz2b7ynkm],
    .am-table td[b-qxz2b7ynkm] {
        padding: 3px;
        border: 0;
        background: var(--am-surface);
    }

    .am-table thead th[b-qxz2b7ynkm] {
        position: sticky;
        top: 0;
        z-index: 3;
        height: 34px;
        padding: 3px 4px;
        border-bottom: 1px solid var(--am-border-strong);
        font-size: 0.6875rem;
        font-weight: 600;
        line-height: 1.1;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--am-muted);
        text-align: center;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

/* The action type column stays put while the grid scrolls sideways - a year is twelve columns
   and a day view is far more, and a grid of ticks with the name scrolled off belongs to nothing. */
/* Selector weight matters here: `.am-table thead th` above is (0,1,2) and would otherwise win
   both the z-index and the alignment, which is what put the date headers over the frozen corner
   as soon as the grid was scrolled sideways. */
.am-table thead th.am-th-type[b-qxz2b7ynkm] {
    position: sticky;
    left: 0;
    z-index: 4;
    width: 236px;
    min-width: 236px;
    padding: 3px 0.625rem;
    text-align: left;
    border-right: 1px solid var(--am-border-strong);
}

.am-th-date[b-qxz2b7ynkm] {
    position: relative;
    width: 46px;
    min-width: 46px;
}

/* The first period already has the stronger edge of the sticky Action Type column.
   Separate the remaining periods with a quieter line that works over both the
   normal surface and the scheduling-window tint. */
.am-table thead th.am-th-date:nth-child(n+3)[b-qxz2b7ynkm],
.am-table .am-row > td.am-td:nth-child(n+3)[b-qxz2b7ynkm] {
    border-left: 1px solid color-mix(in srgb, var(--am-border) 65%, transparent);
}

    .am-th-date.is-current[b-qxz2b7ynkm] {
        color: var(--am-accent-strong);
        background: var(--am-accent-soft);
    }

        /* An accent bar under the current period, rather than the underlined label it used to
           carry - an underline on a table header reads as a link. */
        .am-th-date.is-current[b-qxz2b7ynkm]::after {
            content: "";
            position: absolute;
            left: 4px;
            right: 4px;
            bottom: -1px;
            height: 2px;
            border-radius: 2px;
            background: var(--am-accent);
        }

    .am-th-date.is-window[b-qxz2b7ynkm] {
        background: var(--am-window);
    }

        .am-th-date.is-window.is-current[b-qxz2b7ynkm] {
            background: var(--am-accent-soft);
        }

/* NOW / DUE, so the two highlighted bands are not carried by their fill alone. */
.am-th-flag[b-qxz2b7ynkm] {
    display: block;
    font-size: 0.5625rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--am-window-line);
}

.am-th-date.is-current .am-th-flag[b-qxz2b7ynkm] {
    color: var(--am-accent-strong);
}

/* A group is a band across the grid rather than a heading followed by a row of empty cells. */
.am-group th[b-qxz2b7ynkm] {
    position: relative;
    z-index: 2;
    height: 26px;
    padding: 0 0.625rem;
    text-align: left;
    background: var(--am-subtle);
    border-top: 1px solid var(--am-border);
    border-bottom: 1px solid var(--am-border);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--am-muted);
    white-space: nowrap;
}

/* The band spans the whole width, so its label has to be stuck to the viewport rather than to
   the cell or it scrolls away with the columns. */
.am-group-label[b-qxz2b7ynkm] {
    display: inline-block;
    position: sticky;
    left: 0.625rem;
}

.am-row > td[b-qxz2b7ynkm],
.am-row > th[b-qxz2b7ynkm] {
    height: 30px;
    border-bottom: 1px solid var(--am-border);
}

/* Painted as a background-image layer rather than a background-color, for two reasons: the
   colour underneath survives (the window band shows through, so it needs no hover rule of its
   own), and the sticky type cell keeps the opaque background-color it must have or the cells
   scrolling under it show through. */
.am-row:hover > td[b-qxz2b7ynkm],
.am-row:hover > th[b-qxz2b7ynkm] {
    background-image: linear-gradient(var(--am-hover), var(--am-hover));
}

.am-td-type[b-qxz2b7ynkm] {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left;
    max-width: 236px;
    padding: 0 0.625rem !important;
    border-right: 1px solid var(--am-border-strong) !important;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.am-archived[b-qxz2b7ynkm] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.3rem;
    color: var(--am-muted);
    font-size: 0.7rem;
    cursor: help;
    vertical-align: -1px;
}

.am-td[b-qxz2b7ynkm] {
    position: relative;
    text-align: center;
}

    .am-td.is-window[b-qxz2b7ynkm] {
        background: var(--am-window);
    }


/* The next one due. An outline rather than the 32% red wash it used to be - the cell is empty,
   so a fill that strong reads as a state the cell is in rather than as a marker on it. */
.am-td.is-next[b-qxz2b7ynkm]::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px dashed var(--am-danger);
    border-radius: var(--am-radius-sm);
    pointer-events: none;
}

.am-cell-btn[b-qxz2b7ynkm] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--am-radius-sm);
    background: transparent;
    color: var(--am-muted);
    font-size: 0.8125rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-fast, 100ms ease);
}

    .am-cell-btn:hover[b-qxz2b7ynkm] {
        background: var(--am-surface);
        box-shadow: inset 0 0 0 1px var(--am-border-strong);
    }

    .am-cell-btn:focus-visible[b-qxz2b7ynkm] {
        outline: 2px solid var(--am-accent);
        outline-offset: -1px;
    }

/* An empty cell you can click used to look exactly like one you cannot. The plus is revealed on
   hover and focus rather than shown at rest, so a sparse year does not become a field of plusses. */
.am-cell-btn.is-empty i[b-qxz2b7ynkm] {
    opacity: 0;
    transition: opacity var(--transition-fast, 100ms ease);
}

.am-cell-btn.is-empty:hover i[b-qxz2b7ynkm],
.am-cell-btn.is-empty:focus-visible i[b-qxz2b7ynkm] {
    opacity: 0.55;
}

.am-cell-btn.is-empty.is-next i[b-qxz2b7ynkm] {
    opacity: 1;
    color: var(--am-danger);
}

.am-status-ok[b-qxz2b7ynkm] { color: var(--am-ok); }
.am-status-info[b-qxz2b7ynkm] { color: var(--am-info); }
.am-status-warn[b-qxz2b7ynkm] { color: var(--am-warn); }
.am-status-danger[b-qxz2b7ynkm] { color: var(--am-danger); }

/* How many actions are in the cell. It used to say "M". */
.am-count[b-qxz2b7ynkm] {
    position: absolute;
    top: -1px;
    right: -3px;
    min-width: 13px;
    height: 13px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--am-accent);
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 700;
    line-height: 13px;
    font-variant-numeric: tabular-nums;
}

/* ── Column hover ──────────────────────────────────────────────────────────
   Reading a row across eighteen columns, the question is which period a mark
   is in; the header is a long way from the cell. So the column under the
   pointer lights up with it, header included, and the two washes cross on the
   cell being pointed at.

   Done in CSS rather than by tracking the hovered column in the component: a
   mouse event per cell would put a round trip through the Blazor circuit on
   every pointer move across the grid.

   One rule per column index because `:nth-child()` cannot take a value from
   the hovered element. The list runs to 24 for the 18 columns
   `ActionMatrixService.DefaultColumnCount` builds, plus room to raise it.
   `:has()` degrades silently where it is unsupported - the column simply does
   not light, which costs nothing that matters.

   The group bands are a single `th colspan`, so they have no cell at these
   indexes and the wash breaks across them, which reads as the section divide
   it is. */
.am-table:has(> tbody > tr > td:nth-child(2):hover) > thead > tr > th:nth-child(2)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(2):hover) > tbody > tr > td:nth-child(2)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(3):hover) > thead > tr > th:nth-child(3)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(3):hover) > tbody > tr > td:nth-child(3)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(4):hover) > thead > tr > th:nth-child(4)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(4):hover) > tbody > tr > td:nth-child(4)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(5):hover) > thead > tr > th:nth-child(5)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(5):hover) > tbody > tr > td:nth-child(5)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(6):hover) > thead > tr > th:nth-child(6)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(6):hover) > tbody > tr > td:nth-child(6)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(7):hover) > thead > tr > th:nth-child(7)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(7):hover) > tbody > tr > td:nth-child(7)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(8):hover) > thead > tr > th:nth-child(8)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(8):hover) > tbody > tr > td:nth-child(8)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(9):hover) > thead > tr > th:nth-child(9)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(9):hover) > tbody > tr > td:nth-child(9)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(10):hover) > thead > tr > th:nth-child(10)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(10):hover) > tbody > tr > td:nth-child(10)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(11):hover) > thead > tr > th:nth-child(11)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(11):hover) > tbody > tr > td:nth-child(11)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(12):hover) > thead > tr > th:nth-child(12)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(12):hover) > tbody > tr > td:nth-child(12)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(13):hover) > thead > tr > th:nth-child(13)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(13):hover) > tbody > tr > td:nth-child(13)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(14):hover) > thead > tr > th:nth-child(14)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(14):hover) > tbody > tr > td:nth-child(14)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(15):hover) > thead > tr > th:nth-child(15)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(15):hover) > tbody > tr > td:nth-child(15)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(16):hover) > thead > tr > th:nth-child(16)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(16):hover) > tbody > tr > td:nth-child(16)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(17):hover) > thead > tr > th:nth-child(17)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(17):hover) > tbody > tr > td:nth-child(17)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(18):hover) > thead > tr > th:nth-child(18)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(18):hover) > tbody > tr > td:nth-child(18)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(19):hover) > thead > tr > th:nth-child(19)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(19):hover) > tbody > tr > td:nth-child(19)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(20):hover) > thead > tr > th:nth-child(20)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(20):hover) > tbody > tr > td:nth-child(20)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(21):hover) > thead > tr > th:nth-child(21)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(21):hover) > tbody > tr > td:nth-child(21)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(22):hover) > thead > tr > th:nth-child(22)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(22):hover) > tbody > tr > td:nth-child(22)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(23):hover) > thead > tr > th:nth-child(23)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(23):hover) > tbody > tr > td:nth-child(23)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(24):hover) > thead > tr > th:nth-child(24)[b-qxz2b7ynkm],
.am-table:has(> tbody > tr > td:nth-child(24):hover) > tbody > tr > td:nth-child(24)[b-qxz2b7ynkm] {
    background-image: linear-gradient(var(--am-hover), var(--am-hover));
}

/* ── Legend ─────────────────────────────────────────────────────────────── */

/* Seven statuses used to share three glyphs and be told apart by colour alone, with nothing on
   the page to decode them. */
.am-legend[b-qxz2b7ynkm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 1rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--am-border);
    background: var(--am-subtle);
}

.am-legend-item[b-qxz2b7ynkm] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    color: var(--am-muted);
    white-space: nowrap;
}

    .am-legend-item i[b-qxz2b7ynkm] {
        font-size: 0.75rem;
        width: 12px;
        text-align: center;
    }

.am-legend-swatch[b-qxz2b7ynkm] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex: 0 0 auto;
}

    .am-legend-swatch.is-window[b-qxz2b7ynkm] {
        background: var(--am-window);
        box-shadow: inset 0 0 0 1px var(--am-window-line);
    }

    .am-legend-swatch.is-next[b-qxz2b7ynkm] {
        border: 1px dashed var(--am-danger);
    }

/* ── Action selection modal ─────────────────────────────────────────────── */

.action-matrix-action-list[b-qxz2b7ynkm] {
    max-height: 60vh;
    overflow-y: auto;
}

.action-matrix-action-choice[b-qxz2b7ynkm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
}

.action-matrix-action-choice-main[b-qxz2b7ynkm] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.action-matrix-action-choice-status[b-qxz2b7ynkm] {
    flex: 0 0 auto;
    color: var(--text-secondary, #6c757d);
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .am-table thead th.am-th-type[b-qxz2b7ynkm] {
        width: 160px;
        min-width: 160px;
    }

    .am-td-type[b-qxz2b7ynkm] {
        max-width: 160px;
    }
}
/* /Components/ActionMatrix/ActionMatrixFilterSummary.razor.rz.scp.css */
.matrix-filter-summary[b-uqryk7wwv3] { display: flex; align-items: center; gap: .5rem; min-width: 0; max-width: min(100%, 30rem); color: var(--text-secondary); font-size: .8125rem; }
.matrix-filter-preview[b-uqryk7wwv3] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.matrix-filter-details[b-uqryk7wwv3] { flex-shrink: 0; border: 1px solid var(--border-interactive); border-radius: var(--radius-sm, 6px); padding: .25rem .5rem; background-color: var(--bg-card); color: var(--text-primary); min-height: 28px; }
.matrix-filter-details:hover[b-uqryk7wwv3] { background-color: var(--bg-hover); }
.matrix-filter-details:focus-visible[b-uqryk7wwv3], .matrix-filter-full-list:focus-visible[b-uqryk7wwv3] { outline: 2px solid var(--border-focus, var(--accent-primary)); outline-offset: 2px; }
.matrix-filter-description[b-uqryk7wwv3] { color: var(--text-primary); overflow-wrap: anywhere; }
.matrix-filter-description p[b-uqryk7wwv3] { margin: .75rem 0 0; }
.matrix-filter-full-list[b-uqryk7wwv3] { max-height: 300px; overflow: auto; padding: .5rem; border: 1px solid var(--border-interactive); border-radius: var(--radius-sm, 6px); }
.matrix-filter-full-list ul[b-uqryk7wwv3] { margin: 0; padding-left: 1.5rem; }
/* /Components/AI/AIModelModal.razor.rz.scp.css */
/* The AI assistant modal.

   Token-driven throughout: the page this came from painted itself in about ninety hard-coded hex
   values, including an indigo accent that belonged to no part of this app and never themed - on a
   dark screen it stayed a white panel. Nothing here sets a colour of its own. */

.ai-modal[b-nvyxoa2q4j] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    min-height: 0;
}

/* ── Actions ──────────────────────────────────────────────────────────── */

.ai-actions[b-nvyxoa2q4j] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.ai-actions .btn i[b-nvyxoa2q4j] {
    margin-right: 0.4rem;
}

/* The pressed state of the Instructions toggle. */
.ai-actions .btn.is-on[b-nvyxoa2q4j] {
    border-color: var(--accent-primary);
    color: var(--accent-link);
}

.ai-train-progress[b-nvyxoa2q4j] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 12rem;
    min-width: 0;
}

.ai-train-bar[b-nvyxoa2q4j] {
    flex: 1 1 auto;
    height: 6px;
    min-width: 6rem;
    background-color: var(--bg-secondary);
}

.ai-train-label[b-nvyxoa2q4j] {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ── Instructions ─────────────────────────────────────────────────────── */

.ai-instructions[b-nvyxoa2q4j] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 0 0 auto;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-secondary);
}

.ai-instructions-label[b-nvyxoa2q4j] {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}

.ai-instructions-hint[b-nvyxoa2q4j] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.ai-instructions-input[b-nvyxoa2q4j] {
    resize: vertical;
}

.ai-instructions-actions[b-nvyxoa2q4j] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* ── Conversation ─────────────────────────────────────────────────────── */

.ai-chat[b-nvyxoa2q4j] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.25rem;
}

.ai-suggestions[b-nvyxoa2q4j] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.ai-suggestion[b-nvyxoa2q4j] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-interactive);
    border-radius: 999px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ai-suggestion i[b-nvyxoa2q4j] {
    color: var(--text-secondary);
}

.ai-suggestion:hover[b-nvyxoa2q4j] {
    background-color: var(--bg-hover);
    border-color: var(--accent-link);
    color: var(--accent-link);
}

.ai-suggestion:hover i[b-nvyxoa2q4j] {
    color: var(--accent-link);
}

.ai-suggestion:focus-visible[b-nvyxoa2q4j] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 2px;
}

.ai-msg[b-nvyxoa2q4j] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    max-width: 46rem;
}

/* The user's own messages sit to the right, the way every chat does it - the direction carries who
   is speaking, so the two do not have to be told apart by colour alone. */
.ai-msg.is-user[b-nvyxoa2q4j] {
    flex-direction: row-reverse;
    margin-left: auto;
}

.ai-msg-avatar[b-nvyxoa2q4j] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.ai-msg-body[b-nvyxoa2q4j] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.ai-msg-meta[b-nvyxoa2q4j] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.6875rem;
    color: var(--text-secondary);
}

.ai-msg.is-user .ai-msg-meta[b-nvyxoa2q4j] {
    justify-content: flex-end;
}

.ai-msg-sender[b-nvyxoa2q4j] {
    font-weight: 600;
}

.ai-msg-bubble[b-nvyxoa2q4j] {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ai-msg.is-user .ai-msg-bubble[b-nvyxoa2q4j] {
    background-color: var(--accent-wash);
    border-color: rgba(var(--accent-primary-rgb), 0.25);
}

.ai-msg-bubble :is(p, ul)[b-nvyxoa2q4j] {
    margin: 0;
}

.ai-msg-bubble :is(p, ul) + :is(p, ul)[b-nvyxoa2q4j] {
    margin-top: 0.5rem;
}

.ai-msg-bubble ul[b-nvyxoa2q4j] {
    padding-left: 1.1rem;
}

.ai-msg-bubble code[b-nvyxoa2q4j] {
    padding: 0.1rem 0.3rem;
    border-radius: var(--radius-sm);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
}

/* ── Thinking ─────────────────────────────────────────────────────────── */

.ai-thinking[b-nvyxoa2q4j] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
}

.ai-thinking-dots[b-nvyxoa2q4j] {
    display: inline-flex;
    gap: 3px;
}

.ai-thinking-dots span[b-nvyxoa2q4j] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--text-muted);
    animation: ai-thinking-bounce-b-nvyxoa2q4j 1.2s infinite ease-in-out;
}

.ai-thinking-dots span:nth-child(2)[b-nvyxoa2q4j] {
    animation-delay: 0.15s;
}

.ai-thinking-dots span:nth-child(3)[b-nvyxoa2q4j] {
    animation-delay: 0.3s;
}

@keyframes ai-thinking-bounce-b-nvyxoa2q4j {
    0%, 60%, 100% {
        opacity: 0.35;
    }

    30% {
        opacity: 1;
    }
}

/* The dots are decoration; the words beside them already say it is thinking. */
@media (prefers-reduced-motion: reduce) {
    .ai-thinking-dots span[b-nvyxoa2q4j] {
        animation: none;
    }
}

/* ── Composer ─────────────────────────────────────────────────────────── */

.ai-composer[b-nvyxoa2q4j] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
}

.ai-composer-field[b-nvyxoa2q4j] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.ai-composer-input[b-nvyxoa2q4j] {
    flex: 1 1 auto;
    min-height: 40px;
    max-height: 8rem;
    resize: none;
}

.ai-composer-send[b-nvyxoa2q4j] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ai-composer-hint[b-nvyxoa2q4j] {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.ai-composer-hint kbd[b-nvyxoa2q4j] {
    padding: 0.05rem 0.3rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.7rem;
}

/* ── Train confirmation ───────────────────────────────────────────────── */

.ai-confirm p[b-nvyxoa2q4j] {
    margin: 0 0 0.5rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.ai-confirm .ai-confirm-meta[b-nvyxoa2q4j] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

/* ── Header ───────────────────────────────────────────────────────────── */
/* Matches the lookup modal's header: icon, name, and a quiet line saying what it is. */

.ai-modal-title[b-nvyxoa2q4j] {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.1rem;
}

.ai-modal-heading[b-nvyxoa2q4j] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.ai-modal-subtitle[b-nvyxoa2q4j] {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* Under each AI answer: that AI wrote it, and a way to report it (AI Playbook principles 4 and 7). */
.ai-msg-note[b-nvyxoa2q4j] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    color: var(--text-secondary);
}

.ai-msg-report[b-nvyxoa2q4j] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 24px;
    padding: 0 0.4rem;
    font: inherit;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
}

.ai-msg-report:hover:not(:disabled)[b-nvyxoa2q4j] {
    color: var(--text-primary);
    border-color: var(--border-color);
}

.ai-msg-report:focus-visible[b-nvyxoa2q4j] {
    outline: 2px solid var(--amx-blue-text);
    outline-offset: 1px;
}

.ai-msg-report:disabled[b-nvyxoa2q4j] {
    cursor: default;
}
/* /Components/AmxEmptyState.razor.rz.scp.css */
/* Centred, flat, token-driven - see DESIGN_LANGUAGE.md. No gradients, no card-on-card shadow: this
   is an absence, not a panel, so it should read quietly. */

.amx-empty-state[b-dltnztmkb8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    /* margin:auto rather than height:100% - it centres on whatever space is free without competing
       with siblings for it. Filling the container would make this and the panel beside it each
       demand the full height and end up splitting it. */
    margin: auto;
    padding: 32px 24px;
    text-align: center;
}

.amx-empty-state.compact[b-dltnztmkb8] {
    gap: 4px;
    padding: 16px 12px;
}

.amx-empty-title[b-dltnztmkb8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--text-primary, #131826);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
}

.amx-empty-state.compact .amx-empty-title[b-dltnztmkb8] {
    font-size: 0.875rem;
}

/* Small and inline before the title, not a badge above it. */
.amx-empty-icon[b-dltnztmkb8] {
    flex: 0 0 auto;
    color: var(--text-muted, #616776);
    font-size: 0.875em;
}

.amx-empty-subtitle[b-dltnztmkb8] {
    /* Deliberately narrow: a single readable line or two beats one long line spanning a wide form. */
    max-width: 42ch;
    margin: 0;
    color: var(--text-secondary, #5b6577);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.amx-empty-actions[b-dltnztmkb8] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 10px;
}
/* /Components/AmxStepRail.razor.rz.scp.css */
/* The Bulk Update rail (.bu-steps), shared. Colours from the page's design-language tokens, falling back
   to the app's own where a page doesn't declare them. */
.amx-step-rail[b-ngodl991jv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 0.65rem 0.85rem;
    list-style: none;
    background: var(--dbd-subtle, var(--bg-secondary));
    border: 1px solid var(--dbd-border, var(--border-color));
    border-radius: 8px;
}

.amx-step[b-ngodl991jv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

/* Hairline connector between steps - a separator, not a decorative rule. */
.amx-step + .amx-step[b-ngodl991jv]::before {
    content: "";
    width: 18px;
    height: 1px;
    margin-right: 0.1rem;
    background: var(--dbd-border-strong, var(--border-interactive));
}

.amx-step-button[b-ngodl991jv] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 24px;
    padding: 2px 4px;
    margin: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    font: inherit;
    color: inherit;
}

button.amx-step-button[b-ngodl991jv] {
    cursor: pointer;
}

button.amx-step-button:hover .amx-step-label[b-ngodl991jv] {
    text-decoration: underline;
    text-underline-offset: 2px;
}

button.amx-step-button:focus-visible[b-ngodl991jv] {
    outline: 2px solid var(--dbd-accent, var(--accent-success-fill));
    outline-offset: 1px;
}

.amx-step-marker[b-ngodl991jv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: 999px;
    color: var(--dbd-muted, var(--text-muted));
    background: var(--dbd-surface, var(--bg-card));
    border: 1px solid var(--dbd-border-strong, var(--border-interactive));
}

.amx-step-label[b-ngodl991jv] {
    font-size: 0.78rem;
    color: var(--dbd-muted, var(--text-muted));
    white-space: nowrap;
}

.amx-step.current .amx-step-marker[b-ngodl991jv] {
    color: #ffffff;
    background: var(--dbd-accent, var(--accent-success-fill));
    border-color: var(--dbd-accent, var(--accent-success-fill));
}

.amx-step.current .amx-step-label[b-ngodl991jv] {
    font-weight: 600;
    color: var(--dbd-fg, var(--text-primary));
}

.amx-step.done .amx-step-marker[b-ngodl991jv] {
    color: var(--dbd-accent-strong, var(--accent-success-text));
    background: var(--dbd-accent-soft, var(--bg-secondary));
    border-color: var(--dbd-accent, var(--accent-success-fill));
}

.amx-step.done .amx-step-label[b-ngodl991jv] {
    color: var(--text-secondary);
}

.amx-step.has-issue .amx-step-marker[b-ngodl991jv] {
    color: var(--accent-danger-text);
    border-color: var(--accent-danger-text);
}

/* On a phone only the current step is named on screen; the others keep their names for screen readers. */
@media (max-width: 560px) {
    .amx-step:not(.current) .amx-step-text[b-ngodl991jv] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}
/* /Components/BulkUpdate/BulkUpdateFieldSelectionComponent.razor.rz.scp.css */
/* Bulk update — step 1 (choose fields).
   Tokens are declared once on the modal root (#bulk-update-modal in BulkUpdateComponent) and
   inherit down here; the fallbacks keep the component readable if it is ever hosted elsewhere. */

.bufs-root[b-glcoo87vz3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* ---- Toolbar: search + live selected count ---- */
.bufs-toolbar[b-glcoo87vz3] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0 0.5rem;
    background: var(--dbd-surface, #ffffff);
}

.bufs-search[b-glcoo87vz3] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.bufs-search-icon[b-glcoo87vz3] {
    position: absolute;
    left: 10px;
    font-size: 0.8rem;
    color: var(--dbd-muted, #71717a);
    pointer-events: none;
}

.bufs-search-input[b-glcoo87vz3] {
    width: 100%;
    height: 36px;
    padding: 8px 32px 8px 30px;
    font-size: 0.85rem;
    color: var(--dbd-fg, #18181b);
    background: var(--dbd-surface, #ffffff);
    border: 1px solid var(--border-interactive, #767d8c);
    border-radius: 8px;
}

.bufs-search-input[b-glcoo87vz3]::placeholder {
    color: var(--dbd-muted, #71717a);
}

.bufs-search-input:focus[b-glcoo87vz3] {
    outline: none;
    border-color: var(--dbd-accent, #15803d);
    box-shadow: var(--bu-focus-ring, 0 0 0 3px rgba(21, 128, 61, .15));
}

.bufs-search-clear[b-glcoo87vz3] {
    position: absolute;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
    color: var(--dbd-muted, #71717a);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
}

.bufs-search-clear:hover[b-glcoo87vz3] {
    color: var(--dbd-fg, #18181b);
    background: var(--dbd-subtle, #f4f4f5);
}

.bufs-search-clear:focus-visible[b-glcoo87vz3] {
    outline: none;
    border-color: var(--dbd-accent, #15803d);
    box-shadow: var(--bu-focus-ring, 0 0 0 3px rgba(21, 128, 61, .15));
}

.bufs-count[b-glcoo87vz3] {
    flex: 0 0 auto;
    font-size: 0.78rem;
    color: var(--dbd-muted, #71717a);
}

/* ---- Selected chips ---- */
.bufs-chips[b-glcoo87vz3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-bottom: 0.25rem;
}

.bufs-chip[b-glcoo87vz3] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.2rem 0.5rem 0.2rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--dbd-accent-strong, #166534);
    background: var(--dbd-accent-soft, #f0fdf4);
    border: 1px solid var(--dbd-accent, #15803d);
    border-radius: 999px;
    transition: background-color 100ms ease;
}

.bufs-chip:hover[b-glcoo87vz3] {
    background: var(--dbd-subtle, #f4f4f5);
}

.bufs-chip:focus-visible[b-glcoo87vz3] {
    outline: none;
    box-shadow: var(--bu-focus-ring, 0 0 0 3px rgba(21, 128, 61, .15));
}

.bufs-chip-label[b-glcoo87vz3] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bufs-chip i[b-glcoo87vz3] {
    flex: 0 0 auto;
    font-size: 0.65rem;
    opacity: 0.75;
}

.bufs-chip:hover i[b-glcoo87vz3] {
    opacity: 1;
}

/* ---- Field rows: flat, hover accent-soft, selected accent tint + tick ---- */
.bufs-list[b-glcoo87vz3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.bufs-row[b-glcoo87vz3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
    text-align: left;
    color: var(--dbd-fg, #18181b);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: background-color 100ms ease, color 100ms ease;
}

.bufs-row:hover[b-glcoo87vz3] {
    background: var(--dbd-accent-soft, #f0fdf4);
}

.bufs-row:focus-visible[b-glcoo87vz3] {
    outline: none;
    border-color: var(--dbd-accent, #15803d);
    box-shadow: var(--bu-focus-ring, 0 0 0 3px rgba(21, 128, 61, .15));
}

.bufs-row.selected[b-glcoo87vz3] {
    background: var(--dbd-accent-soft, #f0fdf4);
    color: var(--dbd-accent-strong, #166534);
    font-weight: 500;
}

/* The tick keeps its space when hidden so rows do not shift as they are selected. */
.bufs-tick[b-glcoo87vz3] {
    flex: 0 0 auto;
    width: 16px;
    font-size: 0.75rem;
    color: var(--dbd-accent-strong, #166534);
    visibility: hidden;
}

.bufs-row.selected .bufs-tick[b-glcoo87vz3] {
    visibility: visible;
}

.bufs-row-label[b-glcoo87vz3] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bufs-list-empty[b-glcoo87vz3] {
    padding: 1.5rem 0.5rem;
    font-size: 0.8rem;
    text-align: center;
    color: var(--dbd-muted, #71717a);
}

/* ---- Empty state (no bulk-updatable fields at all) ---- */
.bufs-empty[b-glcoo87vz3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 180px;
    padding: 1.5rem;
    text-align: center;
}

.bufs-empty-icon[b-glcoo87vz3] {
    margin-bottom: 0.35rem;
    font-size: 1.35rem;
    color: var(--dbd-muted, #71717a);
}

.bufs-empty-title[b-glcoo87vz3] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dbd-fg, #18181b);
}

.bufs-empty-text[b-glcoo87vz3] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--dbd-muted, #71717a);
}
/* /Components/BulkUpdate/BulkUpdateFieldUpdateComponent.razor.rz.scp.css */
/* Bulk update — step 2 (set values).
   Flat token cards, one per field: quiet uppercase caption above its control. Tokens come from
   the modal root (#bulk-update-modal); fallbacks keep this readable if hosted elsewhere. */

.bufu-list[b-nktq6r541z] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
}

.bufu-field[b-nktq6r541z] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 1rem;
    background: var(--dbd-surface, #ffffff);
    border: 1px solid var(--dbd-border, #e4e4e7);
    border-radius: 12px;
    box-shadow: var(--bu-shadow-sm, 0 1px 2px rgba(0, 0, 0, .03));
}

.bufu-label[b-nktq6r541z] {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-secondary, #52525b);
}

.bufu-control[b-nktq6r541z] {
    min-width: 0;
}
/* /Components/Calendar/ActionCalendarContent.razor.rz.scp.css */
.action-calendar-page[b-3t9840guat] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.action-calendar-page[b-3t9840guat]  .amx-cal {
    flex: 1 1 auto;
    height: auto;
}

.action-calendar-status button:focus-visible[b-3t9840guat],
.action-calendar-feedback button:focus-visible[b-3t9840guat] {
    outline: 2px solid var(--border-interactive);
    outline-offset: 2px;
}

.action-calendar-status[b-3t9840guat] {
    display: flex;
    align-items: center;
    gap: var(--space-2, .5rem);
    color: var(--text-secondary);
    font-size: .8125rem;
}

.action-calendar-status.has-message[b-3t9840guat] {
    min-height: 1.5rem;
    padding: var(--space-1, .25rem) 0;
}

.action-calendar-status button[b-3t9840guat],
.action-calendar-feedback button[b-3t9840guat] {
    padding: .25rem .5rem;
    color: var(--accent-success-text);
    background: var(--bg-card);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm, 6px);
}

.action-calendar-feedback[b-3t9840guat] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3, .75rem);
    min-height: 18rem;
}
/* /Components/Calendar/AmxCalendar.razor.rz.scp.css */
/* ========== AMX CALENDAR ==========
   The app's own skin: flat fills, hairline borders,
   one green accent, token-driven so dark mode is a re-point rather than per-rule overrides
   (DESIGN_LANGUAGE.md §1/§5/§6). */

.amx-cal-date-field[b-hn0wmjn3b5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.amx-cal-date-field label[b-hn0wmjn3b5] { font-weight: 600; }

.amx-cal-date-field select[b-hn0wmjn3b5] {
    min-width: 0;
    max-width: 100%;
    min-height: 32px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background: var(--bg-input);
    font: inherit;
}

.amx-cal-date-field select:focus-visible[b-hn0wmjn3b5] {
    outline: 2px solid var(--border-focus, var(--border-interactive));
    outline-offset: 2px;
}

.amx-cal[b-hn0wmjn3b5] {
    --dbd-surface: #ffffff;
    --dbd-fg: #18181b;
    --dbd-muted: var(--text-muted);
    --dbd-border: #e4e4e7;
    --dbd-border-strong: #d4d4d8;
    --dbd-subtle: #f4f4f5;
    --dbd-accent: #15803d;
    --dbd-accent-strong: #166534;
    --dbd-accent-soft: #f0fdf4;
    --dbd-accent-ring: rgba(21, 128, 61, 0.15);
    --text-secondary: #52525b;

    /* Weekend / holiday shading, resolved from NonWorkingDayHelper's classes rather than an
       inline colour so each theme can pick its own weight. */
    --cal-weekend: #f5f5f5;
    --cal-holiday: #f7e4ed;

    /* The current-time line has to read against event fills as well as the ground, so it is its
       own colour rather than the green half the events are already wearing. */
    --cal-now: #dc2626;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .03);
    --transition-fast: 100ms ease;
    --text-xs: .6875rem;
    --text-sm: .8125rem;
    --text-base: .875rem;

    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    background-color: var(--dbd-surface);
    color: var(--dbd-fg);
}

[data-theme="dark"] .amx-cal[b-hn0wmjn3b5] {
    --dbd-surface: #111726;
    --dbd-fg: #e6e9f2;
    --dbd-muted: #98a2b8;
    --dbd-border: #202840;
    --dbd-border-strong: #2c3552;
    --dbd-subtle: #1a2136;
    --dbd-accent: #22c55e;
    --dbd-accent-strong: #4ade80;
    --dbd-accent-soft: rgba(34, 197, 94, 0.12);
    --dbd-accent-ring: rgba(34, 197, 94, 0.25);
    --text-secondary: #98a2b8;

    /* The light shades would blow out on the navy surface, so dark gets its own pair at the
       same relative weight. */
    --cal-weekend: rgba(255, 255, 255, .04);
    --cal-holiday: rgba(236, 72, 153, .12);
    --cal-now: #f87171;
}

/* ---- Toolbar ---- */
.amx-cal-toolbar[b-hn0wmjn3b5] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--dbd-border);
    background-color: var(--dbd-surface);
    flex-wrap: wrap;
}

.amx-cal-nav[b-hn0wmjn3b5] {
    display: flex;
    align-items: center;
    gap: .375rem;
    flex-shrink: 0;
}

.amx-cal-nav-btn[b-hn0wmjn3b5],
.amx-cal-today-btn[b-hn0wmjn3b5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    border: 1px solid var(--dbd-border);
    border-radius: var(--radius-md);
    background-color: var(--dbd-surface);
    color: var(--dbd-fg);
    font-size: var(--text-sm);
    font-weight: 550;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.amx-cal-nav-btn[b-hn0wmjn3b5] {
    width: 32px;
}

.amx-cal-today-btn[b-hn0wmjn3b5] {
    padding: 0 12px;
}

.amx-cal-nav-btn:hover[b-hn0wmjn3b5],
.amx-cal-today-btn:hover[b-hn0wmjn3b5] {
    background-color: var(--dbd-subtle);
    border-color: var(--dbd-border-strong);
}

.amx-cal-nav-btn:focus-visible[b-hn0wmjn3b5],
.amx-cal-today-btn:focus-visible[b-hn0wmjn3b5] {
    outline: none;
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
}

.amx-cal-title[b-hn0wmjn3b5] {
    flex: 1;
    min-width: 0;
    margin: 0;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dbd-fg);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- View switch (§5 Segmented control) ---- */
.amx-cal-views[b-hn0wmjn3b5] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background-color: var(--dbd-subtle);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

/* Clipped, not display:none — the radios stay in the tab order and keep arrow-key movement. */
.amx-cal-view-input[b-hn0wmjn3b5] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.amx-cal-view-label[b-hn0wmjn3b5] {
    display: inline-flex;
    align-items: center;
    height: 26px;
    margin: 0;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 550;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.amx-cal-view-input:checked + .amx-cal-view-label[b-hn0wmjn3b5] {
    background-color: var(--dbd-surface);
    box-shadow: var(--shadow-sm);
    color: var(--dbd-accent-strong);
    font-weight: 600;
}

.amx-cal-view-input:focus-visible + .amx-cal-view-label[b-hn0wmjn3b5] {
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
}

/* ---- Body ---- */
.amx-cal-body[b-hn0wmjn3b5] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.amx-cal-weekdays[b-hn0wmjn3b5] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--dbd-subtle);
    border-bottom: 1px solid var(--dbd-border);
}

.amx-cal-weekday[b-hn0wmjn3b5] {
    padding: .375rem .5rem;
    text-align: center;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-secondary);
}

/* ---- Month grid ----
   Six equal rows that fill the body; the whole grid scrolls only when the cells hit their
   minimum height, so a normal month shows without scrolling. */
.amx-cal-month[b-hn0wmjn3b5] {
    display: grid;
    grid-template-rows: repeat(6, minmax(96px, 1fr));
    flex: 1;
    min-height: 0;
}

.amx-cal-week-row[b-hn0wmjn3b5] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-height: 0;
}

.amx-cal-cell[b-hn0wmjn3b5] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
    min-height: 0;
    padding: .25rem;
    border-right: 1px solid var(--dbd-border);
    border-bottom: 1px solid var(--dbd-border);
    overflow: hidden;
}

.amx-cal-week-row > .amx-cal-cell:last-child[b-hn0wmjn3b5] {
    border-right: none;
}

.amx-cal-cell.is-outside[b-hn0wmjn3b5] {
    background-color: var(--dbd-subtle);
}

.amx-cal-cell.is-outside .amx-cal-daynum[b-hn0wmjn3b5] {
    color: var(--text-secondary);
}

/* Non-working shading. Kept below the outside-month fill in specificity order on purpose:
   a holiday still reads as a holiday when it falls outside the current month. */
.amx-cal-cell.amx-nonworking-weekend[b-hn0wmjn3b5] {
    background-color: var(--cal-weekend);
}

.amx-cal-cell.amx-nonworking-holiday[b-hn0wmjn3b5] {
    background-color: var(--cal-holiday);
}

.amx-cal-daynum[b-hn0wmjn3b5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--dbd-fg);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.amx-cal-daynum:hover[b-hn0wmjn3b5] {
    background-color: var(--dbd-accent-soft);
    color: var(--dbd-accent-strong);
}

.amx-cal-daynum:focus-visible[b-hn0wmjn3b5] {
    outline: none;
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
}

/* Today is the one solid accent mark on the grid. */
.amx-cal-cell.is-today .amx-cal-daynum[b-hn0wmjn3b5] {
    background-color: var(--dbd-accent);
    color: #ffffff;
}

/* Month cells never overflow — the "+n more" button takes over before they can — so no
   scrollbar appears inside a day. A week column holds every event, so that one scrolls. */
.amx-cal-chips[b-hn0wmjn3b5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    overflow: hidden;
}

.amx-cal-cell-week .amx-cal-chips[b-hn0wmjn3b5] {
    overflow: auto;
}

/* ---- Event chip ----
   Colours are data (catalogue / status) and arrive inline; everything else is ours. */
.amx-cal-chip[b-hn0wmjn3b5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 2px 6px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 550;
    text-align: left;
    cursor: pointer;
    transition: filter var(--transition-fast);
}

.amx-cal-chip:hover[b-hn0wmjn3b5] {
    filter: brightness(1.08);
}

.amx-cal-chip:focus-visible[b-hn0wmjn3b5] {
    outline: none;
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
}

.amx-cal-chip-title[b-hn0wmjn3b5] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amx-cal-chip.is-detailed[b-hn0wmjn3b5] {
    padding: .5rem .75rem;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 600;
}

.amx-cal-chip.is-detailed .amx-cal-chip-title[b-hn0wmjn3b5] {
    white-space: normal;
}

.amx-cal-chip-time[b-hn0wmjn3b5],
.amx-cal-chip-desc[b-hn0wmjn3b5] {
    font-size: var(--text-sm);
    font-weight: 400;
    opacity: .9;
}

.amx-cal-more[b-hn0wmjn3b5] {
    align-self: flex-start;
    padding: 1px 4px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.amx-cal-more:hover[b-hn0wmjn3b5] {
    background-color: var(--dbd-subtle);
    color: var(--dbd-fg);
}

/* ---- Time grid (Week / Day) ----
   An hour axis with events placed and sized by when they run. Week and Day differ only in how many
   columns sit beside the gutter, so they share every rule here. */
.amx-cal-tg[b-hn0wmjn3b5] {
    --cal-hour-h: 44px;
    --cal-gutter-w: 56px;

    overflow: hidden;
}

.amx-cal-tg-head[b-hn0wmjn3b5],
.amx-cal-tg-allday[b-hn0wmjn3b5] {
    display: flex;
    flex: 0 0 auto;
    background-color: var(--dbd-surface);
    border-bottom: 1px solid var(--dbd-border);
}

/* A day with thirty all-day events would otherwise push the hour grid off the screen entirely.
   The band takes at most a third of the height and scrolls inside itself. */
.amx-cal-tg-allday[b-hn0wmjn3b5] {
    max-height: 33vh;
    overflow-y: auto;
}

.amx-cal-tg-gutter-head[b-hn0wmjn3b5],
.amx-cal-tg-gutter-label[b-hn0wmjn3b5] {
    flex: 0 0 var(--cal-gutter-w);
    width: var(--cal-gutter-w);
    border-right: 1px solid var(--dbd-border);
}

.amx-cal-tg-gutter-label[b-hn0wmjn3b5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: .25rem .375rem;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
}

/* The columns track is shared by the header, the all-day band and the grid, so the three stay in
   step at any width without any of them being told how many days there are. */
.amx-cal-tg-cols[b-hn0wmjn3b5] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.amx-cal-tg-cols > *[b-hn0wmjn3b5] {
    flex: 1 1 0;
    min-width: 0;
    border-right: 1px solid var(--dbd-border);
}

.amx-cal-tg-cols > *:last-child[b-hn0wmjn3b5] {
    border-right: none;
}

.amx-cal-tg-colhead[b-hn0wmjn3b5] {
    display: flex;
    justify-content: center;
    padding: .25rem;
}

.amx-cal-tg-colhead-btn[b-hn0wmjn3b5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: .25rem .5rem;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.amx-cal-tg-colhead-btn:hover[b-hn0wmjn3b5] {
    background-color: var(--dbd-subtle);
}

.amx-cal-tg-colhead-btn:focus-visible[b-hn0wmjn3b5] {
    outline: none;
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
}

.amx-cal-tg-dow[b-hn0wmjn3b5] {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.amx-cal-tg-daynum[b-hn0wmjn3b5] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dbd-fg);
}

.amx-cal-tg-colhead.is-today .amx-cal-tg-daynum[b-hn0wmjn3b5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    border-radius: 999px;
    background-color: var(--dbd-accent);
    color: #ffffff;
}

.amx-cal-tg-allday-cell[b-hn0wmjn3b5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 28px;
    padding: .1875rem;
}

.amx-cal-tg-scroll[b-hn0wmjn3b5] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.amx-cal-tg-gutter[b-hn0wmjn3b5] {
    flex: 0 0 var(--cal-gutter-w);
    width: var(--cal-gutter-w);
    border-right: 1px solid var(--dbd-border);
}

.amx-cal-tg-hour[b-hn0wmjn3b5] {
    position: relative;
    height: var(--cal-hour-h);
}

/* The label sits on the line it names rather than inside the block below it, so 09:00 marks where
   nine o'clock actually is. The first one would clip off the top, so it is nudged down. */
.amx-cal-tg-hour-label[b-hn0wmjn3b5] {
    position: absolute;
    top: -.5em;
    right: .375rem;
    font-size: var(--text-xs);
    color: var(--dbd-muted);
    background-color: var(--dbd-surface);
}

.amx-cal-tg-hour:first-child .amx-cal-tg-hour-label[b-hn0wmjn3b5] {
    top: .125rem;
}

.amx-cal-tg-col[b-hn0wmjn3b5] {
    position: relative;
}

.amx-cal-tg-slot[b-hn0wmjn3b5] {
    position: relative;
    height: var(--cal-hour-h);
    border-bottom: 1px solid var(--dbd-border);
}

/* Every other line is lighter, so the hour boundaries read as hours and the half-hours as texture
   rather than as twenty-four equally loud rules. */
.amx-cal-tg-slot:nth-child(odd)[b-hn0wmjn3b5] {
    border-bottom-color: var(--dbd-subtle);
}

.amx-cal-tg-col.amx-nonworking-weekend .amx-cal-tg-slot[b-hn0wmjn3b5],
.amx-cal-tg-colhead.amx-nonworking-weekend[b-hn0wmjn3b5],
.amx-cal-tg-allday-cell.amx-nonworking-weekend[b-hn0wmjn3b5] {
    background-color: var(--cal-weekend);
}

.amx-cal-tg-col.amx-nonworking-holiday .amx-cal-tg-slot[b-hn0wmjn3b5],
.amx-cal-tg-colhead.amx-nonworking-holiday[b-hn0wmjn3b5],
.amx-cal-tg-allday-cell.amx-nonworking-holiday[b-hn0wmjn3b5] {
    background-color: var(--cal-holiday);
}

/* An empty slot that can be clicked has to say so (DESIGN_LANGUAGE.md §5): the + appears on hover
   and on keyboard focus, and is never the only way to reach the action. */
.amx-cal-tg-slot-add[b-hn0wmjn3b5],
.amx-cal-add[b-hn0wmjn3b5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--dbd-accent-strong);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-fast), background-color var(--transition-fast);
}

.amx-cal-tg-slot-add[b-hn0wmjn3b5] {
    position: absolute;
    inset: 2px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
}

.amx-cal-tg-slot:hover .amx-cal-tg-slot-add[b-hn0wmjn3b5],
.amx-cal-tg-slot-add:focus-visible[b-hn0wmjn3b5],
.amx-cal-cell:hover .amx-cal-add[b-hn0wmjn3b5],
.amx-cal-add:focus-visible[b-hn0wmjn3b5] {
    opacity: 1;
    background-color: var(--dbd-accent-soft);
}

.amx-cal-tg-slot-add:focus-visible[b-hn0wmjn3b5],
.amx-cal-add:focus-visible[b-hn0wmjn3b5] {
    outline: none;
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
}

.amx-cal-cell-top[b-hn0wmjn3b5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .25rem;
}

.amx-cal-add[b-hn0wmjn3b5] {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    font-size: 10px;
}

/* ---- Timed event ---- */
.amx-cal-tg-event[b-hn0wmjn3b5] {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    overflow: hidden;
    /* Inset so neighbouring columns' events never touch, and so an event sharing its column with
       another still shows the one behind it at the left edge. */
    margin: 1px;
    padding: 2px 5px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 550;
    text-align: left;
    line-height: 1.25;
    cursor: pointer;
    transition: filter var(--transition-fast), box-shadow var(--transition-fast);
}

.amx-cal-tg-event:hover[b-hn0wmjn3b5] {
    z-index: 3;
    filter: brightness(1.08);
    box-shadow: var(--shadow-sm);
}

.amx-cal-tg-event:focus-visible[b-hn0wmjn3b5] {
    outline: 2px solid var(--dbd-fg);
    outline-offset: 1px;
    z-index: 3;
}

.amx-cal-tg-event-time[b-hn0wmjn3b5] {
    font-weight: 600;
    opacity: .9;
}

.amx-cal-tg-event-title[b-hn0wmjn3b5] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amx-cal-tg-now[b-hn0wmjn3b5] {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    height: 2px;
    background-color: var(--cal-now);
    pointer-events: none;
}

/* ---- Drag ---- */
.amx-cal-chip[b-hn0wmjn3b5],
.amx-cal-tg-event[b-hn0wmjn3b5] {
    touch-action: none;
}

.amx-cal-chip.is-dragging[b-hn0wmjn3b5],
.amx-cal-tg-event.is-dragging[b-hn0wmjn3b5] {
    opacity: .4;
}

/* The cell the event is about to land on takes a full accent ring, not just a tint — on a grid of
   shaded weekends and holidays a wash alone is not a reliable signal. */
.amx-cal-cell.is-drop-target[b-hn0wmjn3b5],
.amx-cal-tg-slot.is-drop-target[b-hn0wmjn3b5],
.amx-cal-tg-allday-cell.is-drop-target[b-hn0wmjn3b5] {
    background-color: var(--dbd-accent-soft);
    box-shadow: inset 0 0 0 2px var(--dbd-accent);
}

:global(body.amx-cal-dragging)[b-hn0wmjn3b5] {
    user-select: none;
    cursor: grabbing;
}

/* ---- Narrow screens ---- */
@media (max-width: 720px) {
    .amx-cal-toolbar[b-hn0wmjn3b5] {
        gap: .5rem;
    }

    .amx-cal-title[b-hn0wmjn3b5] {
        order: -1;
        width: 100%;
        flex: none;
    }

    .amx-cal-month[b-hn0wmjn3b5] {
        grid-template-rows: repeat(6, minmax(72px, 1fr));
    }

    .amx-cal-chip[b-hn0wmjn3b5] {
        font-size: 10px;
    }

    .amx-cal-tg[b-hn0wmjn3b5] {
        --cal-gutter-w: 44px;
        --cal-hour-h: 38px;
    }
}
.amx-cal-move-disabled[b-hn0wmjn3b5] {
    margin-left: auto;
    color: var(--text-secondary);
    max-width: 100%;
}

/* The move form is a popover off the toolbar rather than a row of its own, so the calendar keeps
   the height. The disclosure stays a native <details> for keyboard and screen-reader support. */
.amx-cal-toolbar[b-hn0wmjn3b5] { position: relative; }

.amx-cal-move-disclosure[b-hn0wmjn3b5] {
    margin-left: .25rem;
}

.amx-cal-move-toggle[b-hn0wmjn3b5] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-height: 32px;
    padding: .25rem .625rem;
    list-style: none;
    cursor: pointer;
    font-weight: 500;
    font-size: var(--text-base);
    color: var(--dbd-fg);
    background: var(--dbd-surface);
    border: 1px solid var(--dbd-border-strong);
    border-radius: var(--radius-sm);
}

.amx-cal-move-toggle[b-hn0wmjn3b5]::-webkit-details-marker { display: none; }
.amx-cal-move-toggle:hover[b-hn0wmjn3b5],
.amx-cal-move-disclosure[open] > .amx-cal-move-toggle[b-hn0wmjn3b5] { background: var(--dbd-subtle); }

.amx-cal-move-toggle:focus-visible[b-hn0wmjn3b5],
.amx-cal-move :focus-visible[b-hn0wmjn3b5],
.amx-cal-move-submit:focus-visible[b-hn0wmjn3b5] {
    outline: 2px solid var(--border-focus, var(--border-interactive));
    outline-offset: 2px;
}

.amx-cal-move[b-hn0wmjn3b5] {
    position: absolute;
    top: calc(100% - .25rem);
    right: .75rem;
    z-index: 20;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: min(22rem, calc(100vw - 2rem));
    padding: .875rem;
    background: var(--dbd-surface);
    color: var(--dbd-fg);
    border: 1px solid var(--dbd-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

.amx-cal-move-hint[b-hn0wmjn3b5] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.amx-cal-move-field[b-hn0wmjn3b5] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.amx-cal-move-field label[b-hn0wmjn3b5] {
    font-size: var(--text-sm);
    font-weight: 600;
}

.amx-cal-move-field select[b-hn0wmjn3b5],
.amx-cal-move-field input[b-hn0wmjn3b5] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 32px;
    padding: .25rem .5rem;
    border: 1px solid var(--dbd-border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-input, var(--dbd-surface));
    color: var(--dbd-fg);
    font: inherit;
}

.amx-cal-move-actions[b-hn0wmjn3b5] { display: flex; justify-content: flex-end; }

.amx-cal-move-submit[b-hn0wmjn3b5] {
    min-height: 32px;
    padding: .25rem 1rem;
    font: inherit;
    font-weight: 500;
    color: #fff;
    background: var(--dbd-accent-strong);
    border: 1px solid var(--dbd-accent-strong);
    border-radius: var(--radius-sm);
}

.amx-cal-move-submit:disabled[b-hn0wmjn3b5] { opacity: .5; cursor: not-allowed; }

.amx-cal-chip.is-move-selected[b-hn0wmjn3b5],
.amx-cal-tg-event.is-move-selected[b-hn0wmjn3b5] {
    outline: 3px solid var(--border-interactive);
    outline-offset: 1px;
    box-shadow: 0 0 0 1px var(--bg-card);
    text-decoration: underline;
    text-underline-offset: 2px;
    z-index: 5;
}

[data-theme="dark"] .amx-cal-move-submit[b-hn0wmjn3b5] { color: #052e16; }
/* /Components/Calendar/AmxResourceTimeline.razor.rz.scp.css */
/* ========== AMX RESOURCE TIMELINE ==========
   Rows of staff against a time axis — the app's own skin for what the FullCalendar Scheduler used
   to draw. Same token block as AmxCalendar so the two calendar surfaces are one thing in two
   shapes, and so dark mode is a re-point rather than per-rule overrides
   (DESIGN_LANGUAGE.md §1/§5 Matrix-and-schedule-grids/§6). */

.rtl[b-bgkgrxduzq] {
    --dbd-surface: #ffffff;
    --dbd-bg: #fafafa;
    --dbd-fg: #18181b;
    --dbd-muted: var(--text-muted);
    --dbd-border: #e4e4e7;
    --dbd-border-strong: #d4d4d8;
    --dbd-subtle: #f4f4f5;
    --dbd-accent: #15803d;
    --dbd-accent-strong: #166534;
    --dbd-accent-soft: #f0fdf4;
    --dbd-accent-ring: rgba(21, 128, 61, 0.15);
    --text-secondary: #52525b;
    --accent-danger: #dc2626;

    --cal-weekend: #f5f5f5;
    --cal-holiday: #f7e4ed;

    /* The "now" line has to read against event fills as well as the ground, so it is its own
       colour rather than the green accent that half the events are already wearing. */
    --rtl-now: #dc2626;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .03);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, .06);
    --transition-fast: 100ms ease;
    --transition-base: 150ms ease;
    --text-xs: .6875rem;
    --text-sm: .8125rem;
    --text-base: .875rem;

    /* Set per span from the component; the whole grid is laid out from these two. The slot count
       goes with the width because the track has to be sized to exactly the columns it holds — see
       .rtl-ticks. */
    --rtl-slot-w: 46px;
    --rtl-slots: 1;
    --rtl-name-w: 232px;
    --rtl-event-h: 26px;
    --rtl-lane-gap: 3px;

    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    background-color: var(--dbd-surface);
    color: var(--dbd-fg);
    border: 1px solid var(--dbd-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

[data-theme="dark"] .rtl[b-bgkgrxduzq] {
    --dbd-surface: #111726;
    --dbd-bg: #0c111d;
    --dbd-fg: #e6e9f2;
    --dbd-muted: #98a2b8;
    --dbd-border: #202840;
    --dbd-border-strong: #2c3552;
    --dbd-subtle: #1a2136;
    --dbd-accent: #22c55e;
    --dbd-accent-strong: #4ade80;
    --dbd-accent-soft: rgba(34, 197, 94, 0.12);
    --dbd-accent-ring: rgba(34, 197, 94, 0.25);
    --text-secondary: #98a2b8;
    --accent-danger: #f87171;

    --cal-weekend: rgba(255, 255, 255, .04);
    --cal-holiday: rgba(236, 72, 153, .12);
    --rtl-now: #f87171;
}

/* ---- Header ---- */
.rtl-head[b-bgkgrxduzq] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--dbd-border);
}

.rtl-head-icon[b-bgkgrxduzq] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background-color: var(--dbd-accent);
    color: #fff;
    font-size: .875rem;
}

.rtl-head-text[b-bgkgrxduzq] {
    min-width: 0;
}

.rtl-title[b-bgkgrxduzq] {
    margin: 0;
    font-size: var(--text-lg, 1rem);
    font-weight: 600;
    line-height: 1.2;
}

/* The header names the span the grid is showing: a row of "1…31" says nothing about which month
   once the user has paged off this one (DESIGN_LANGUAGE.md §5 Matrix / schedule grids). */
.rtl-period[b-bgkgrxduzq] {
    margin: .125rem 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.rtl-head-count[b-bgkgrxduzq] {
    margin: 0 0 0 auto;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ---- Toolbar ---- */
.rtl-toolbar[b-bgkgrxduzq] {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .625rem 1rem;
    border-bottom: 1px solid var(--dbd-border);
}

.rtl-label[b-bgkgrxduzq] {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-secondary);
}

.rtl-search[b-bgkgrxduzq] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 260px;
    min-width: 200px;
}

.rtl-search-field[b-bgkgrxduzq] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
}

.rtl-search-icon[b-bgkgrxduzq] {
    position: absolute;
    left: .625rem;
    font-size: .75rem;
    color: var(--dbd-muted);
    pointer-events: none;
}

.rtl-search-input[b-bgkgrxduzq] {
    width: 100%;
    padding: .4375rem .625rem .4375rem 1.875rem;
    font-size: var(--text-sm);
    color: var(--dbd-fg);
    background-color: var(--dbd-surface);
    border: 1px solid var(--dbd-border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.rtl-search-input[b-bgkgrxduzq]::placeholder {
    color: var(--dbd-muted);
}

.rtl-search-input:focus-visible[b-bgkgrxduzq] {
    outline: none;
    border-color: var(--dbd-accent);
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
}

/* The browser's own search-clear only appears in some engines, so the control is explicit. */
.rtl-search-input[b-bgkgrxduzq]::-webkit-search-cancel-button {
    display: none;
}

.rtl-search-clear[b-bgkgrxduzq] {
    position: absolute;
    right: .25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: .75rem;
    color: var(--dbd-muted);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.rtl-search-clear:hover[b-bgkgrxduzq] {
    color: var(--dbd-fg);
    background-color: var(--dbd-subtle);
}

.rtl-search-clear:focus-visible[b-bgkgrxduzq] {
    outline: 2px solid var(--dbd-accent);
    outline-offset: 1px;
}

/* ---- Flat toolbar tracks (DESIGN_LANGUAGE.md §5 Toolbar tracks / Segmented control) ---- */
.rtl-track[b-bgkgrxduzq] {
    display: flex;
    align-items: center;
    gap: .125rem;
    padding: .1875rem;
    background-color: var(--dbd-subtle);
    border-radius: 999px;
}

/* Native radios keep arrow-key navigation and checked semantics; only the label is painted. */
.rtl-track-input[b-bgkgrxduzq] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.rtl-track-label[b-bgkgrxduzq] {
    margin: 0;
    padding: .3125rem .75rem;
    font-size: var(--text-sm);
    font-weight: 550;
    color: var(--text-secondary);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.rtl-track-label:hover[b-bgkgrxduzq] {
    color: var(--dbd-fg);
}

.rtl-track-input:checked + .rtl-track-label[b-bgkgrxduzq] {
    color: var(--dbd-fg);
    background-color: var(--dbd-surface);
    box-shadow: var(--shadow-sm);
}

.rtl-track-input:focus-visible + .rtl-track-label[b-bgkgrxduzq] {
    outline: 2px solid var(--dbd-accent);
    outline-offset: 1px;
}

.rtl-nav-btn[b-bgkgrxduzq],
.rtl-today-btn[b-bgkgrxduzq] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 .625rem;
    font-size: var(--text-sm);
    font-weight: 550;
    color: var(--text-secondary);
    background: none;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.rtl-nav-btn:hover:not(:disabled)[b-bgkgrxduzq],
.rtl-today-btn:hover:not(:disabled)[b-bgkgrxduzq] {
    color: var(--dbd-fg);
    background-color: var(--dbd-surface);
}

.rtl-nav-btn:focus-visible[b-bgkgrxduzq],
.rtl-today-btn:focus-visible[b-bgkgrxduzq] {
    outline: 2px solid var(--dbd-accent);
    outline-offset: 1px;
}

/* A paged grid needs a way back, and it says when you are already there. */
.rtl-today-btn:disabled[b-bgkgrxduzq] {
    color: var(--dbd-muted);
    cursor: default;
}

/* ---- Skills filter ----
   Only rendered when the account records skills, so most tenants never see this control. */
.rtl-skills[b-bgkgrxduzq] {
    position: relative;
}

.rtl-skills-btn[b-bgkgrxduzq] {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem .625rem;
    font-size: var(--text-sm);
    font-weight: 550;
    color: var(--text-secondary);
    background-color: var(--dbd-surface);
    border: 1px solid var(--dbd-border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.rtl-skills-btn:hover[b-bgkgrxduzq],
.rtl-skills-btn.is-open[b-bgkgrxduzq] {
    color: var(--dbd-fg);
    background-color: var(--dbd-subtle);
    border-color: var(--dbd-border-strong);
}

.rtl-skills-btn:focus-visible[b-bgkgrxduzq] {
    outline: 2px solid var(--dbd-accent);
    outline-offset: 1px;
}

/* How many skills are still on — a filter that is doing something has to say so, or a timeline
   missing half its rows just looks wrong. */
.rtl-skills-count[b-bgkgrxduzq] {
    padding: 0 .3125rem;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-on-accent, #fff);
    background-color: var(--dbd-accent);
    border-radius: 999px;
}

.rtl-skills-panel[b-bgkgrxduzq] {
    position: absolute;
    top: calc(100% + .25rem);
    right: 0;
    z-index: 10;
    width: 15rem;
    padding: .5rem;
    background-color: var(--dbd-surface);
    border: 1px solid var(--dbd-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.rtl-skills-actions[b-bgkgrxduzq] {
    display: flex;
    gap: .5rem;
    padding-bottom: .375rem;
    margin-bottom: .375rem;
    border-bottom: 1px solid var(--dbd-border);
}

.rtl-skills-link[b-bgkgrxduzq] {
    padding: .125rem .375rem;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--dbd-accent-strong);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.rtl-skills-link:hover[b-bgkgrxduzq] {
    background-color: var(--dbd-accent-soft);
}

.rtl-skills-link:focus-visible[b-bgkgrxduzq] {
    outline: 2px solid var(--dbd-accent);
    outline-offset: 1px;
}

.rtl-skills-list[b-bgkgrxduzq] {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 14rem;
    overflow-y: auto;
}

.rtl-skills-list li[b-bgkgrxduzq] {
    display: flex;
    align-items: center;
    gap: .4375rem;
    padding: .1875rem .25rem;
}

.rtl-skills-list label[b-bgkgrxduzq] {
    margin: 0;
    font-size: var(--text-sm);
    cursor: pointer;
}

.rtl-skills-check[b-bgkgrxduzq] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--dbd-accent);
    cursor: pointer;
}

.rtl-skills-check:focus-visible[b-bgkgrxduzq] {
    outline: 2px solid var(--dbd-accent);
    outline-offset: 2px;
}

.rtl-toggle[b-bgkgrxduzq] {
    display: flex;
    align-items: center;
    gap: .4375rem;
}

.rtl-toggle-input[b-bgkgrxduzq] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--dbd-accent);
    cursor: pointer;
}

.rtl-toggle-input:focus-visible[b-bgkgrxduzq] {
    outline: 2px solid var(--dbd-accent);
    outline-offset: 2px;
}

.rtl-toggle-label[b-bgkgrxduzq] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

/* ---- Explanatory note ---- */
/* The date the grid is laid out on. Deliberately the same rules as .amx-cal-date-field rather than
   a timeline-flavoured variant: it is the same control doing the same job one tab away, and it
   borrows the app's interactive tokens for the select exactly as the calendar's does, so the two
   agree in both themes and under the contrast guard. */
.rtl-date-field[b-bgkgrxduzq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.rtl-date-field label[b-bgkgrxduzq] { font-weight: 600; }

.rtl-date-field select[b-bgkgrxduzq] {
    min-width: 0;
    max-width: 100%;
    min-height: 32px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background: var(--bg-input);
    font: inherit;
}

.rtl-date-field select:focus-visible[b-bgkgrxduzq] {
    outline: 2px solid var(--border-focus, var(--border-interactive));
    outline-offset: 2px;
}

/* Disabled while a load is running, because changing it starts another one. */
.rtl-date-field select:disabled[b-bgkgrxduzq] {
    opacity: 0.6;
    cursor: not-allowed;
}

.rtl-note[b-bgkgrxduzq] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0;
    padding: .5rem 1rem;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    background-color: var(--dbd-subtle);
    border-bottom: 1px solid var(--dbd-border);
}

.rtl-note-icon[b-bgkgrxduzq] {
    margin-top: .1875rem;
    font-size: .75rem;
    color: var(--dbd-muted);
}

/* A truncated grid is a caution, not a fact — it reads as amber rather than as more grey text. */
.rtl-note.is-warning[b-bgkgrxduzq] {
    color: var(--accent-warning-text, #92400e);
    background-color: var(--accent-warning-bg, #fffbeb);
}

.rtl-note.is-warning .rtl-note-icon[b-bgkgrxduzq] {
    color: inherit;
}

[data-theme="dark"] .rtl-note.is-warning[b-bgkgrxduzq] {
    color: var(--accent-warning-text, #fcd34d);
    background-color: var(--accent-warning-bg, rgba(180, 83, 9, .18));
}

/* ---- Grid ---- */
.rtl-scroll[b-bgkgrxduzq] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background-color: var(--dbd-surface);
}

.rtl-headrow[b-bgkgrxduzq],
.rtl-row[b-bgkgrxduzq] {
    display: flex;
    align-items: stretch;
    /* max-content, not 100%: a flex row at 100% would squeeze the slots to fit instead of letting
       the container scroll, which is the same trap table-layout:fixed sets. */
    width: max-content;
    min-width: 100%;
}

/* The header row and the name column both stay put: a wide grid scrolled sideways with the row's
   name gone is a field of bars belonging to nobody. */
.rtl-headrow[b-bgkgrxduzq] {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: var(--dbd-surface);
    border-bottom: 1px solid var(--dbd-border-strong);
}

.rtl-corner[b-bgkgrxduzq],
.rtl-rowhead[b-bgkgrxduzq] {
    position: sticky;
    left: 0;
    z-index: 2;
    flex: 0 0 var(--rtl-name-w);
    width: var(--rtl-name-w);
    padding: .5rem .75rem;
    background-color: var(--dbd-surface);
    border-right: 1px solid var(--dbd-border-strong);
}

.rtl-corner[b-bgkgrxduzq] {
    z-index: 4;
    display: flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-secondary);
}

/* The track has to be exactly as wide as the columns inside it, because everything that is placed
   by percentage — the event bars, the now line — is placed against it, and the drag script reads a
   column width back out of it as lane width / slot count.

   The floor is what makes the two agree when the row is wider than its content: the row is
   min-width:100%, so a growable track would stretch past its columns and every percentage would
   land short of the day it names. The floor also gives .rtl-lane a max-content contribution at all;
   its own children are absolutely positioned, so without it a row would be narrower than the header
   whenever the grid overflows and scrolls. */
.rtl-ticks[b-bgkgrxduzq] {
    display: flex;
    flex: 1 0 auto;
    min-width: calc(var(--rtl-slot-w) * var(--rtl-slots, 1));
}

.rtl-tick[b-bgkgrxduzq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .0625rem;
    /* Grows with the track, so the columns always sum to its width. --rtl-slot-w is the minimum
       rather than the size, which is what lets a wide window fill and a narrow one scroll. */
    flex: 1 0 var(--rtl-slot-w);
    padding: .375rem .125rem;
    border-left: 1px solid var(--dbd-border);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.rtl-tick-main[b-bgkgrxduzq] {
    font-weight: 600;
    color: var(--dbd-fg);
}

.rtl-tick-sub[b-bgkgrxduzq] {
    font-size: var(--text-xs);
    color: var(--dbd-muted);
}

.rtl-tick.is-today .rtl-tick-main[b-bgkgrxduzq] {
    color: var(--dbd-accent-strong);
}

.rtl-tick.is-today[b-bgkgrxduzq] {
    box-shadow: inset 0 -2px 0 var(--dbd-accent);
}

.rtl-tick.amx-nonworking-weekend[b-bgkgrxduzq],
.rtl-lane-slot.amx-nonworking-weekend[b-bgkgrxduzq] {
    background-color: var(--cal-weekend);
}

.rtl-tick.amx-nonworking-holiday[b-bgkgrxduzq],
.rtl-lane-slot.amx-nonworking-holiday[b-bgkgrxduzq] {
    background-color: var(--cal-holiday);
}

/* ---- Rows ---- */
.rtl-row[b-bgkgrxduzq] {
    border-bottom: 1px solid var(--dbd-border);
    min-height: calc(var(--rtl-lanes, 1) * (var(--rtl-event-h) + var(--rtl-lane-gap)) + var(--rtl-lane-gap));
}

.rtl-row:hover .rtl-rowhead[b-bgkgrxduzq],
.rtl-row:hover .rtl-lane-grid[b-bgkgrxduzq] {
    background-color: var(--dbd-subtle);
}

/* The drop target during a drag — an accent wash plus a full ring, so it does not rely on colour
   alone to say where the event is about to land. */
.rtl-row.is-drop-target .rtl-rowhead[b-bgkgrxduzq],
.rtl-row.is-drop-target .rtl-lane[b-bgkgrxduzq] {
    background-color: var(--dbd-accent-soft);
    box-shadow: inset 0 0 0 2px var(--dbd-accent);
}

.rtl-rowhead[b-bgkgrxduzq] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.rtl-rowname[b-bgkgrxduzq] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: 550;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rtl-rowsub[b-bgkgrxduzq] {
    flex: 0 1 auto;
    min-width: 0;
    font-size: var(--text-xs);
    color: var(--dbd-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rtl-rowcount[b-bgkgrxduzq] {
    flex: 0 0 auto;
    min-width: 1.25rem;
    padding: .0625rem .375rem;
    font-size: var(--text-xs);
    font-weight: 600;
    text-align: center;
    color: var(--text-secondary);
    background-color: var(--dbd-subtle);
    border-radius: 999px;
}

.rtl-row.is-unassigned .rtl-rowname[b-bgkgrxduzq] {
    font-style: italic;
    color: var(--text-secondary);
}

/* ---- Lane ---- */
/* Same floor as .rtl-ticks, and for the same reason — see the note there. */
.rtl-lane[b-bgkgrxduzq] {
    position: relative;
    flex: 1 0 auto;
    min-width: calc(var(--rtl-slot-w) * var(--rtl-slots, 1));
    padding: var(--rtl-lane-gap) 0;
}

.rtl-lane-grid[b-bgkgrxduzq] {
    position: absolute;
    inset: 0;
    display: flex;
}

.rtl-lane-slot[b-bgkgrxduzq] {
    flex: 1 0 var(--rtl-slot-w);
    border-left: 1px solid var(--dbd-border);
}

.rtl-lane-slot.is-today[b-bgkgrxduzq] {
    background-color: var(--dbd-accent-soft);
}

.rtl-now[b-bgkgrxduzq] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--rtl-now);
    z-index: 1;
    pointer-events: none;
}

/* ---- Events ---- */
.rtl-event[b-bgkgrxduzq] {
    position: absolute;
    top: calc(var(--rtl-lane-gap) + var(--rtl-lane-index, 0) * (var(--rtl-event-h) + var(--rtl-lane-gap)));
    height: var(--rtl-event-h);
    display: flex;
    align-items: center;
    gap: .375rem;
    min-width: 0;
    padding: 0 .4375rem;
    font-size: var(--text-xs);
    font-weight: 550;
    text-align: left;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    overflow: hidden;
    z-index: 2;
    touch-action: none;
    transition: box-shadow var(--transition-fast), filter var(--transition-fast);
}

/* An event that can be moved says so before it is touched — the cursor is the only affordance a
   positioned bar has, since there is no room on it for a handle. */
.rtl-event[data-tl-move-date="1"][b-bgkgrxduzq],
.rtl-event[data-tl-move-resource="1"][b-bgkgrxduzq] {
    cursor: grab;
}

.rtl-event:hover[b-bgkgrxduzq] {
    filter: brightness(1.06);
    box-shadow: var(--shadow-md);
}

.rtl-event:focus-visible[b-bgkgrxduzq] {
    outline: 2px solid var(--dbd-fg);
    outline-offset: 1px;
}

.rtl-event-title[b-bgkgrxduzq] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rtl-event-time[b-bgkgrxduzq] {
    flex: 0 0 auto;
    opacity: .85;
    font-weight: 500;
}

/* An event running out of the window is cut square on that side, so a bar that stops at the edge
   is not read as work that finishes there. */
.rtl-event.is-clipped-start[b-bgkgrxduzq] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 2px dotted currentColor;
}

.rtl-event.is-clipped-end[b-bgkgrxduzq] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 2px dotted currentColor;
}

.rtl-event.is-dragging[b-bgkgrxduzq] {
    box-shadow: var(--shadow-md);
    opacity: .9;
    cursor: grabbing;
    z-index: 20;
}

/* Text selection across the grid during a drag looks like a bug; suppressed only while dragging. */
:global(body.amx-tl-dragging)[b-bgkgrxduzq] {
    user-select: none;
}

/* ---- Key ---- */
.rtl-key[b-bgkgrxduzq] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .5rem 1rem;
    border-top: 1px solid var(--dbd-border);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.rtl-key-item[b-bgkgrxduzq] {
    display: flex;
    align-items: center;
    gap: .375rem;
}

.rtl-key-swatch[b-bgkgrxduzq] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--dbd-border-strong);
}

.rtl-key-swatch.is-now[b-bgkgrxduzq] {
    width: 3px;
    height: 12px;
    border: 0;
    border-radius: 0;
    background-color: var(--rtl-now);
}

.rtl-key-swatch.is-nonworking[b-bgkgrxduzq] {
    background-color: var(--cal-weekend);
}

.rtl-key-hint[b-bgkgrxduzq] {
    margin-left: auto;
    color: var(--dbd-muted);
}

/* ---- Empty ---- */
.rtl-empty[b-bgkgrxduzq] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 3rem 1.5rem;
    text-align: center;
}

.rtl-empty-icon[b-bgkgrxduzq] {
    font-size: 2rem;
    color: var(--dbd-border-strong);
}

.rtl-empty-title[b-bgkgrxduzq] {
    margin: 0;
    font-size: var(--text-lg, 1rem);
    font-weight: 600;
}

.rtl-empty-text[b-bgkgrxduzq] {
    margin: 0;
    max-width: 34rem;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.rtl-empty-action[b-bgkgrxduzq] {
    margin-top: .25rem;
    padding: .375rem .875rem;
    font-size: var(--text-sm);
    font-weight: 550;
    color: var(--dbd-accent-strong);
    background: none;
    border: 1px solid var(--dbd-border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.rtl-empty-action:hover[b-bgkgrxduzq] {
    border-color: var(--dbd-accent);
    background-color: var(--dbd-accent-soft);
}

.rtl-empty-action:focus-visible[b-bgkgrxduzq] {
    outline: 2px solid var(--dbd-accent);
    outline-offset: 1px;
}

/* ---- Narrow screens ---- */
@media (max-width: 720px) {
    .rtl[b-bgkgrxduzq] {
        --rtl-name-w: 150px;
    }

    .rtl-toolbar[b-bgkgrxduzq] {
        gap: .5rem;
    }

    .rtl-search[b-bgkgrxduzq] {
        flex-basis: 100%;
    }
}

/* ========== MOVE DIALOG ==========
   AmxModal renders its body OUTSIDE this component's root, so the --dbd-* tokens declared on .rtl
   above are not in scope here and every var() using them resolved to nothing — which is why this
   dialog drew with no field borders and mis-coloured labels. app.css carries the same warning
   against .map-modal. Everything below therefore reads the app-wide semantic tokens, which are
   declared on :root and are available wherever the dialog is mounted. */

.rtl-dlg[b-bgkgrxduzq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Caps the body so the move controls stay on screen; only .rtl-dlg-details shrinks. */
    max-height: min(70vh, 40rem);
    min-height: 0;
    font-size: 0.875rem;
    color: var(--text-primary);
}

/* ---- Lede: the two facts the dialog was opened for ---- */
.rtl-dlg-lede[b-bgkgrxduzq] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 2rem;
    flex: 0 0 auto;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--border-color);
}

.rtl-dlg-fact[b-bgkgrxduzq] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.rtl-dlg-fact-label[b-bgkgrxduzq] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}

/* Larger than the detail rows below on purpose: when an event runs and who holds it are the two
   questions the dialog exists to answer. */
.rtl-dlg-fact-value[b-bgkgrxduzq] {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.rtl-dlg-fact-value.is-unassigned[b-bgkgrxduzq] {
    font-style: italic;
    font-weight: 500;
    color: var(--text-secondary);
}

.rtl-dlg-overdue[b-bgkgrxduzq] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-warning-text, #92400e);
    background-color: var(--accent-warning-bg, #fffbeb);
    border-radius: 999px;
    white-space: nowrap;
}

[data-theme="dark"] .rtl-dlg-overdue[b-bgkgrxduzq] {
    color: var(--accent-warning-text, #fcd34d);
    background-color: var(--accent-warning-bg, rgba(180, 83, 9, 0.18));
}

/* ---- Secondary detail: the only region allowed to shrink and scroll ---- */
.rtl-dlg-details[b-bgkgrxduzq] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.rtl-dlg-details:focus-visible[b-bgkgrxduzq] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Two columns so ten report fields read as a summary rather than a long ladder; one column once
   there is no room for two. */
.rtl-dlg-grid[b-bgkgrxduzq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.5rem 2rem;
    margin: 0;
}

.rtl-dlg-row[b-bgkgrxduzq] {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 0.75rem;
    align-items: baseline;
    min-width: 0;
}

.rtl-dlg-row dt[b-bgkgrxduzq] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.rtl-dlg-row dd[b-bgkgrxduzq] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ---- Move: the part the dialog is actually for ---- */
.rtl-dlg-move[b-bgkgrxduzq] {
    flex: 0 0 auto;
    padding-top: 0.875rem;
    border-top: 1px solid var(--border-color);
}

.rtl-dlg-move-title[b-bgkgrxduzq] {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* Side by side when there is room — two halves of one decision, not two separate steps. */
.rtl-dlg-move-fields[b-bgkgrxduzq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.75rem 1.25rem;
    align-items: start;
}

.rtl-dlg-field[b-bgkgrxduzq] {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    min-width: 0;
}

.rtl-dlg-label[b-bgkgrxduzq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}

.rtl-dlg-count[b-bgkgrxduzq] {
    padding: 0 0.3125rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border-radius: 999px;
}

.rtl-dlg-search[b-bgkgrxduzq] {
    position: relative;
    display: flex;
    align-items: center;
}

.rtl-dlg-search-icon[b-bgkgrxduzq] {
    position: absolute;
    left: 0.625rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    pointer-events: none;
}

.rtl-dlg-search-input[b-bgkgrxduzq] {
    width: 100%;
    min-height: 34px;
    padding: 0.4375rem 0.625rem 0.4375rem 1.875rem;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--text-primary);
    background-color: var(--bg-input);
    border: 1px solid var(--border-interactive, var(--border-color));
    border-radius: 8px;
}

.rtl-dlg-search-input[b-bgkgrxduzq]::placeholder {
    color: var(--text-muted);
}

.rtl-dlg-search-input:focus-visible[b-bgkgrxduzq] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

.rtl-dlg-search-input[b-bgkgrxduzq]::-webkit-search-cancel-button {
    display: none;
}

.rtl-dlg-picker[b-bgkgrxduzq] {
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
    /* Tall enough to show that scrolling exists, short enough that the footer stays in view. */
    max-height: 11rem;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-card);
}

.rtl-dlg-option[b-bgkgrxduzq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4375rem 0.625rem;
    font: inherit;
    font-size: 0.8125rem;
    text-align: left;
    color: var(--text-primary);
    background: none;
    border: 0;
    cursor: pointer;
}

.rtl-dlg-option:hover[b-bgkgrxduzq] {
    background-color: var(--bg-hover, var(--bg-secondary));
}

.rtl-dlg-option:focus-visible[b-bgkgrxduzq] {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

.rtl-dlg-option.is-selected[b-bgkgrxduzq] {
    font-weight: 600;
    background-color: var(--bg-secondary);
}

/* Names on this account are email addresses, so a row truncates rather than wrapping to three
   lines — the full value stays on the button's title. */
.rtl-dlg-option-text[b-bgkgrxduzq] {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    flex: 1 1 auto;
    min-width: 0;
}

.rtl-dlg-option-name[b-bgkgrxduzq],
.rtl-dlg-option-sub[b-bgkgrxduzq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rtl-dlg-option-sub[b-bgkgrxduzq] {
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* Which row the event is on now, so "nothing has changed yet" is visible rather than inferred
   from a greyed-out button. */
.rtl-dlg-option-tag[b-bgkgrxduzq] {
    flex: 0 0 auto;
    padding: 0.0625rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border-radius: 999px;
}

.rtl-dlg-option-tick[b-bgkgrxduzq] {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--accent-primary);
}

.rtl-dlg-picker-empty[b-bgkgrxduzq] {
    padding: 0.625rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Says what the primary button will do, once there is something to do. A disabled button explains
   that you cannot act; this explains what acting would change. */
.rtl-dlg-pending[b-bgkgrxduzq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border-radius: 8px;
}

/* ---- Footer ---- */
.rtl-dlg-btn[b-bgkgrxduzq] {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    min-height: 36px;
    padding: 0.4375rem 0.875rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 550;
    border-radius: 8px;
    cursor: pointer;
}

.rtl-dlg-btn:focus-visible[b-bgkgrxduzq] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

.rtl-dlg-btn-ghost[b-bgkgrxduzq] {
    color: var(--text-secondary);
    background: none;
    border: 1px solid var(--border-color);
}

.rtl-dlg-btn-ghost:hover[b-bgkgrxduzq] {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

.rtl-dlg-btn-primary[b-bgkgrxduzq] {
    color: var(--text-on-accent, #fff);
    background-color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
}

.rtl-dlg-btn-primary:hover:not(:disabled)[b-bgkgrxduzq] {
    filter: brightness(0.94);
}

.rtl-dlg-btn-primary:disabled[b-bgkgrxduzq] {
    opacity: 0.45;
    cursor: default;
}

@media (max-width: 640px) {
    .rtl-dlg-row[b-bgkgrxduzq] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .rtl-dlg-overdue[b-bgkgrxduzq] {
        margin-left: 0;
    }
}
/* /Components/Calendar/CalendarModal.razor.rz.scp.css */
.action-calendar-filter[b-1vfb0mgw22] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, .5rem);
    min-height: 32px;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 400;
}

.action-calendar-filter input[b-1vfb0mgw22] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-primary);
}

.action-calendar-filter input:focus-visible[b-1vfb0mgw22] {
    outline: 2px solid var(--border-interactive);
    outline-offset: 2px;
}
/* /Components/Charts/ChartDataGrid.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   The chart data grid

   Scoped to the component, which is the point of it being a component: this was
   two copies of the same stylesheet, one under the report chart page and one
   under the dashboard chart tile, each ending in a comment asking the next person
   to keep them in step. They had already drifted.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Chart data grid — DataGrid's look, verbatim ─────────────────────────
   The bespoke table this replaced hard-coded #dee2e6 / #f1f3f5 / #fafafa, so a
   chart's Data view stayed light-grey on a dark page - and as a <table> it
   could not pick up DataGrid's layout at all, which is a CSS grid driven by
   grid-template-columns on the header row and on every row.

   The markup is now DataGrid's div structure with ARIA table roles (as DataGrid
   itself does), so these are DataGrid's rules copied across - it renders as the
   same grid as the report's own data grid. Values from
   Components/Grid/DataGrid.razor.css and the .amx-grid-wrapper block in app.css;
   keep them in step. */
.data-grid-container[b-4pa63xka0k] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background-color: var(--bg-card, #ffffff);
    border-radius: 8px;
}

/* ── The data pane's own header ──────────────────────────────────────────
   The grid is one of two panes in the split view, so it says what it is holding.
   Sits above .data-grid-content and does not scroll with the rows. */
.data-pane-header[b-4pa63xka0k] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background-color: var(--bg-secondary, #f9fafb);
}

.data-pane-title[b-4pa63xka0k] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary, #131826);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.data-pane-count[b-4pa63xka0k] {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
}

.data-grid-content[b-4pa63xka0k] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background-color: var(--bg-card, #ffffff);
}

.table-container[b-4pa63xka0k] {
    height: 100%;
    width: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    scrollbar-gutter: stable;
}

.table-container:focus-visible[b-4pa63xka0k] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: -2px;
}

.grid-header-row[b-4pa63xka0k] {
    display: grid;
    position: sticky;
    top: -1px;
    z-index: 10;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background-color: var(--app-primary, var(--bg-secondary));
    background-clip: padding-box;
    color: var(--app-primary-ink, var(--text-primary));
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.grid-header-cell[b-4pa63xka0k] {
    padding: 4px 8px;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 600;
    /* The row background ends at the viewport; cells paint every column beyond it.
       Override DataGrid's global light-theme header rule when both grids share a page. */
    background-color: inherit !important;
    color: inherit !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-header-cell:not(:first-child)[b-4pa63xka0k] {
    border-left: 1px solid var(--border-color, #e5e7eb);
}

.grid-header-cell-template[b-4pa63xka0k] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    width: 100%;
    height: 100%;
}

/* Wraps rather than truncates, so a long column name reads in full - the DataGrid
   header behaves the same way. */
.grid-header-cell-template .header-text[b-4pa63xka0k] {
    flex: 1;
    overflow: visible;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.3;
}

.grid-body[b-4pa63xka0k] {
    overflow: visible;
    flex: 1 0 auto;
}

.grid-row[b-4pa63xka0k] {
    display: grid;
    transition: background-color 0.15s ease;
    background-color: var(--bg-card, transparent);
    border-bottom: 1px solid var(--border-light, #f3f4f6);
}

/* Banded in both themes, and hover laid over the band rather than replacing it - the same pair of
   fixes as DataGrid.razor.css, which this grid mirrors. See --grid-row-veil in app.css for why a
   flat hover colour cannot work once rows alternate. */
.grid-row:nth-child(even)[b-4pa63xka0k] {
    background-color: var(--grid-row-band, #f9fafb);
}

.grid-row:hover[b-4pa63xka0k],
.grid-row.is-drillable:focus-visible[b-4pa63xka0k] {
    background-color: color-mix(in srgb,
        var(--grid-row-veil-ink) var(--grid-row-veil-amount), var(--bg-card));
}

.grid-row:nth-child(even):hover[b-4pa63xka0k],
.grid-row:nth-child(even).is-drillable:focus-visible[b-4pa63xka0k] {
    background-color: color-mix(in srgb,
        var(--grid-row-veil-ink) var(--grid-row-veil-amount), var(--grid-row-band));
}

.grid-cell[b-4pa63xka0k] {
    position: relative;
    display: flex;
    align-items: center;
    height: auto;
    min-height: 32px;
    padding: 0.25rem 0.5rem;
    font-size: var(--amx-control-font-size, 0.875rem);
    font-weight: normal;
    line-height: 1.4;
    color: var(--text-primary, #374151);
    background-color: transparent;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Native buttons cover value cells without changing their summary/colour-bar layout. */
.summary-cell-action[b-4pa63xka0k] {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.summary-cell-action:focus-visible[b-4pa63xka0k] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: -2px;
}

.grid-cell:not(:first-child)[b-4pa63xka0k] {
    border-left: 1px solid var(--border-color, #e5e7eb);
}

/* The first cell is the row's label (role="rowheader") and carries the series colour,
   so it keeps header weight - the only place this differs from a DataGrid cell, and only
   because this grid has row headers where a DataGrid has none. */
.grid-cell.grid-row-header[b-4pa63xka0k] {
    font-weight: 600;
}

.grid-cell.has-colour-summary[b-4pa63xka0k] {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 4px;
}

.summary-value-line[b-4pa63xka0k] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
}

.summary-percentage[b-4pa63xka0k] {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.summary-colour-bar[b-4pa63xka0k] {
    display: flex;
    height: 5px;
    background-color: var(--bg-tertiary);
    overflow: hidden;
    flex-shrink: 0;
}

.summary-colour-bar > span[b-4pa63xka0k] { height: 100%; flex-shrink: 0; }

.summary-colour-legend[b-4pa63xka0k] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 6px 10px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background-color: var(--bg-card);
}
.summary-legend-item[b-4pa63xka0k] { display: inline-flex; align-items: center; gap: 5px; }
.summary-legend-swatch[b-4pa63xka0k] { width: 10px; height: 10px; flex-shrink: 0; }

.table-empty[b-4pa63xka0k] {
    padding: 24px;
    text-align: center;
    color: var(--text-muted, #6c757d);
}

/* ── Compact ─────────────────────────────────────────────────────────────
   A dashboard tile rather than a page - the same grid with a fraction of the room,
   matching the compact report grids beside it (DataGrid IsCompact). The column
   tracks tighten too; those are set in the markup, not here. */

.data-grid-container.compact .grid-header-cell-template[b-4pa63xka0k] {
    padding: 4px 6px;
    font-size: 12px;
}

.data-grid-container.compact .grid-cell[b-4pa63xka0k] {
    min-height: 28px;
    padding: 3px 6px;
    font-size: 13px;
}

.data-grid-container.compact .table-empty[b-4pa63xka0k] {
    padding: 16px;
}

/* ── Dark mode: DataGrid's own values ────────────────────────────────────
   DataGrid overrides its light rules in dark mode - the row striping and the
   hover fill exist only here, which is why a copy without this block did not
   look like a grid. Kept in step with DataGrid's dark block; both now read the
   app's tokens rather than the retired navy. */
[data-theme="dark"] .data-grid-container[b-4pa63xka0k] {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .data-grid-content[b-4pa63xka0k],
[data-theme="dark"] .table-container[b-4pa63xka0k] {
    background-color: var(--bg-card);
}

/* --bg-tertiary for the same reason as the header row below: in the dark ramp secondary sits
   below card, so a band painted with it disappears into the rows. */
[data-theme="dark"] .data-pane-header[b-4pa63xka0k] {
    background-color: var(--bg-tertiary);
    border-bottom-color: var(--border-color);
}

/* The header band uses --bg-tertiary, not --bg-secondary: in the dark ramp secondary sits
   BELOW card (#0f1524 < #111726), so mapping the old #1a1a2e onto it left the band at 1.02:1
   against the rows - invisible. Tertiary is the step *up* from card in both themes. */
[data-theme="dark"] .grid-header-row[b-4pa63xka0k] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .grid-header-cell[b-4pa63xka0k] {
    border-color: var(--border-color);
}

/* No background-color: the shared .grid-row rule already sets var(--bg-card), which is
   theme-aware. Restating it here put a later rule of equal weight in front of the banding and
   hover rules above, which then lost on source order. */
[data-theme="dark"] .grid-row[b-4pa63xka0k] {
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* No dark override needed: --grid-row-band already resolves to --bg-tertiary in dark, and the
   hover rules mix from it. */

/* The row label is excluded: it carries the chart's series colour and a foreground picked
   to contrast with it, both set inline, and DataGrid's hover rule is !important - which
   beats an inline style and would repaint the label into an unreadable pair. */
[data-theme="dark"] .grid-row:hover[b-4pa63xka0k],
[data-theme="dark"] .grid-row:hover .grid-cell:not(.grid-row-header)[b-4pa63xka0k] {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .grid-cell[b-4pa63xka0k] {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .grid-cell:not(:first-child)[b-4pa63xka0k] {
    border-left-color: var(--border-color);
}

/* ── Drilling in from a row ──────────────────────────────────────────────
   A row of the Data view opens the same drill-down the matching point of the chart
   opens - so it has to look like something to click. The hover fill above already
   moves under the pointer; what was missing is the cursor saying why, and a focus
   ring for the keyboard, since these rows now take focus and answer Enter.

   Only .is-drillable rows get it. A Grand Total row, or a grid shown where no
   drill-down is wired up, keeps the plain treatment rather than offering an action
   that goes nowhere. */
.grid-row.is-drillable[b-4pa63xka0k] {
    cursor: pointer;
}

/* Inset, so the ring is not clipped by the scrolling container the rows sit in. */
.grid-row.is-drillable:focus-visible[b-4pa63xka0k] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: -2px;
}

/* The row label is excluded for the same reason the dark hover rule excludes it: it
   carries the chart's series colour and a foreground picked to contrast with it, both
   set inline, and repainting it would leave an unreadable pair. */
[data-theme="dark"] .grid-row.is-drillable:focus-visible[b-4pa63xka0k],
[data-theme="dark"] .grid-row.is-drillable:focus-visible .grid-cell:not(.grid-row-header)[b-4pa63xka0k] {
    color: var(--text-primary) !important;
}
/* /Components/Chat/AmxChat.razor.rz.scp.css */
/* Ask AMX: clean and flat. One surface, 1px borders from the theme's tokens, 8px radius, no shadows, glows or gradients
   (the AI mark, AmxMark.razor, is the only gradient). AMX-branded everywhere, whatever the tenant theme:
     --amx-blue  everything interactive, in both modes (buttons, links, focus, the chosen mode, the user's messages)
     --amx-gold  AI activity, always a fill with dark text on it (the Auto badge, the Troubleshooting tag, the numbered
                 markers, the tint behind a highlighted setting) - never text or a thin line
   Status tags use the theme's semantic colours. Answers are a MarkupString, so rules for what's inside them use ::deep. */
/* The launcher carries the palette too: in the top bar it is drawn outside the dock. */
.amx-chat-dock[b-q1oi9iarof], .amx-chat-launcher.in-topbar[b-q1oi9iarof] {
    --amx-blue: #3160B6;
    --amx-blue-text: #3160B6;
    --amx-blue-tint: color-mix(in srgb, var(--amx-blue) 8%, var(--bg-card));
    --amx-gold: #FDB813;
    --amx-gold-ink: #1B1B1B;
    --amx-on-blue: #FFFFFF;
    --ac-gold-base: color-mix(in srgb, var(--amx-gold) 16%, transparent);
    --ac-gold-sweep: color-mix(in srgb, var(--amx-gold) 42%, transparent);
}
.amx-chat-dock[b-q1oi9iarof] {
    position: fixed; right: 20px; bottom: 20px; z-index: 1200; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
/* dark: the blue as text and lines is lightened to pass on the dark panel; filled buttons keep AMX Blue */
[data-theme="dark"] .amx-chat-dock[b-q1oi9iarof], [data-theme="dark"] .amx-chat-launcher.in-topbar[b-q1oi9iarof] { --amx-blue-text: #7FA3E6;
    --ac-gold-base: color-mix(in srgb, var(--amx-gold) 9%, transparent);
    --ac-gold-sweep: color-mix(in srgb, var(--amx-gold) 24%, transparent); }

/* Out of the way of what already lives in that corner: the Report Template Designer's AI bubble (56px at 24px) and
   its open panel, and a map's own corner controls (zoom, location, counts). */
body:has(.aiw-bubble) .amx-chat-dock[b-q1oi9iarof] { bottom: 96px; }
body:has(.aiw-panel) .amx-chat-dock[b-q1oi9iarof] { right: 420px; }
body:has(.map-corner-controls) .amx-chat-dock[b-q1oi9iarof] { bottom: 168px; }

/* The launcher: a blue "Ask AMX" pill (a round sparkle button on a narrow screen); a gold dot when an answer finished
   while minimised. Open on a narrow screen, it is the plain minimise button. */
.amx-chat-launcher[b-q1oi9iarof] { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 24px; }
.amx-chat-launcher:hover[b-q1oi9iarof], .amx-chat-launcher.is-open[b-q1oi9iarof] { border-color: var(--amx-blue-text); }
.amx-chat-launcher:has(.ac-launch-mark)[b-q1oi9iarof] { gap: 8px; width: auto; height: 44px; padding: 0 18px 0 14px; color: var(--amx-on-blue); background: var(--amx-blue); border: 0; border-radius: 22px; font: inherit; font-size: .9375rem; font-weight: 600; white-space: nowrap; }
.amx-chat-launcher:has(.ac-launch-mark):hover[b-q1oi9iarof] { outline: 2px solid var(--amx-blue-text); outline-offset: 2px; }
.amx-chat-launcher[b-q1oi9iarof]  .amx-mark.is-glyph { width: 22px; height: 22px; }
.ac-launch-mark[b-q1oi9iarof] { display: contents; }
.ac-unread[b-q1oi9iarof] { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--amx-gold); border: 2px solid var(--bg-card); }
@media (max-width: 600px) {
    .amx-chat-launcher:has(.ac-launch-mark)[b-q1oi9iarof] { width: 48px; height: 48px; padding: 0; border-radius: 24px; }
    .ac-launch-label[b-q1oi9iarof] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .amx-chat-launcher[b-q1oi9iarof]  .amx-mark.is-glyph { width: 26px; height: 26px; }
}

/* In the top bar, after Go Home / Exit Settings: a 32px button to match them, never hidden while the panel is open
   (it shows the panel's state), and down to the round sparkle button when the bar runs tight - at the width Go Home
   drops its label, then at the bar's compact icon size. */
.amx-chat-launcher.in-topbar:has(.ac-launch-mark)[b-q1oi9iarof] { flex: 0 0 auto; height: 32px; padding: 0 12px 0 9px; border-radius: var(--radius-sm, 8px); font-size: .8125rem; gap: 6px; }
.amx-chat-launcher.in-topbar[b-q1oi9iarof]  .amx-mark.is-glyph { width: 18px; height: 18px; }
.amx-chat-launcher.in-topbar.is-open[b-q1oi9iarof] { outline: 2px solid var(--amx-blue-text); outline-offset: 2px; }
.amx-chat-launcher.in-topbar .ac-unread[b-q1oi9iarof] { border-color: var(--bg-card); }
@media (max-width: 1100px) {
    .amx-chat-launcher.in-topbar:has(.ac-launch-mark)[b-q1oi9iarof] { width: var(--amx-compact-icon-size, 32px); height: var(--amx-compact-icon-size, 32px); padding: 0; }
    .amx-chat-launcher.in-topbar .ac-launch-label[b-q1oi9iarof] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* The top bar's sparkles twinkle every now and then: the gold one spins a quarter turn and glints, the white one
   breathes a beat behind. Once as the page loads, then every 12 seconds (the cycle is a 1.6s twinkle and a long rest),
   and again whenever the button is pointed at or focused. Not while the panel is open, and the waiting twinkle
   (AmxMark) takes over while an answer is being written. Still under reduced motion. */
.amx-chat-launcher.in-topbar:not(.is-open)[b-q1oi9iarof]  .amx-mark.is-glyph:not(.is-waiting) .amx-mark-accent { animation: ac-twinkle-gold-b-q1oi9iarof 12s ease-in-out infinite; }
.amx-chat-launcher.in-topbar:not(.is-open)[b-q1oi9iarof]  .amx-mark.is-glyph:not(.is-waiting) .amx-mark-main { animation: ac-twinkle-white-b-q1oi9iarof 12s ease-in-out .4s infinite; }
.amx-chat-launcher.in-topbar:is(:hover, :focus-visible)[b-q1oi9iarof]  .amx-mark.is-glyph:not(.is-waiting) .amx-mark-accent { animation: ac-twinkle-gold-again-b-q1oi9iarof 1.6s ease-in-out 2; }
.amx-chat-launcher.in-topbar:is(:hover, :focus-visible)[b-q1oi9iarof]  .amx-mark.is-glyph:not(.is-waiting) .amx-mark-main { animation: ac-twinkle-white-again-b-q1oi9iarof 1.6s ease-in-out .4s 2; }
/* the periodic twinkle is the first 13% of its cycle (1.6s of 12s); hover and focus use a separate name, which is what
   restarts the twinkle */
@keyframes ac-twinkle-gold-b-q1oi9iarof { 0% { transform: rotate(0) scale(1); opacity: 1; } 4% { transform: rotate(35deg) scale(.55); opacity: .5; } 8% { transform: rotate(70deg) scale(1.2); opacity: 1; } 13%, 100% { transform: rotate(90deg) scale(1); opacity: 1; } }
@keyframes ac-twinkle-gold-again-b-q1oi9iarof { 0% { transform: rotate(0) scale(1); opacity: 1; } 30% { transform: rotate(35deg) scale(.55); opacity: .5; } 60% { transform: rotate(70deg) scale(1.2); opacity: 1; } 100% { transform: rotate(90deg) scale(1); opacity: 1; } }
@keyframes ac-twinkle-white-b-q1oi9iarof { 0%, 13%, 100% { transform: scale(1); opacity: 1; } 6.5% { transform: scale(.86); opacity: .8; } }
@keyframes ac-twinkle-white-again-b-q1oi9iarof { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.86); opacity: .8; } }

/* Focus: a clear 2px ring on everything reachable by Tab. */
.amx-chat-launcher:focus-visible[b-q1oi9iarof], .amx-chat-panel button:focus-visible[b-q1oi9iarof], .amx-chat-panel textarea:focus-visible[b-q1oi9iarof],
.amx-chat-panel [tabindex]:focus-visible[b-q1oi9iarof], .ac-log:focus-visible[b-q1oi9iarof], .ac-sources summary:focus-visible[b-q1oi9iarof] { outline: 2px solid var(--amx-blue-text); outline-offset: 2px; }
.ac-md[b-q1oi9iarof]  a:focus-visible, .ac-md[b-q1oi9iarof]  strong:focus-visible { outline: 2px solid var(--amx-blue-text); outline-offset: 2px; }

/* The panel: ~400px (640 when widened), up to 70% of the window. */
.amx-chat-panel[b-q1oi9iarof] { position: relative; display: flex; flex-direction: column; width: min(400px, calc(100vw - 32px)); height: min(calc(var(--amx-viewport-h, 100vh) * .7), 640px); color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; font-size: .875rem; line-height: 1.6; text-align: left; overflow: hidden; }
.amx-chat-panel.is-wide[b-q1oi9iarof] { width: min(640px, calc(100vw - 32px)); height: min(calc(var(--amx-viewport-h, 100vh) * .8), 800px); }

/* Wide screens: docked as a full-height side panel; the page is pushed left by the component's own <style>. */
@media (min-width: 1280px) {
    .amx-chat-dock.is-open[b-q1oi9iarof] { top: 0; right: 0; bottom: 0; gap: 0; }
    .amx-chat-dock.is-open .amx-chat-panel[b-q1oi9iarof], .amx-chat-dock.is-open .amx-chat-panel.is-wide[b-q1oi9iarof] { width: 400px; height: 100%; border-width: 0 0 0 1px; border-radius: 0; }
    .amx-chat-dock.is-open .amx-chat-launcher[b-q1oi9iarof], .amx-chat-dock.is-open .ac-width[b-q1oi9iarof] { display: none; }
}

.ac-head[b-q1oi9iarof] { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-bottom: 1px solid var(--border-color); }
.ac-head[b-q1oi9iarof]  .amx-mark { width: 32px; height: 32px; }
.ac-titles[b-q1oi9iarof] { flex: 1; min-width: 0; }
.ac-title[b-q1oi9iarof] { margin: 0; font-size: .9375rem; font-weight: 600; line-height: 1.25; }
.ac-subtitle[b-q1oi9iarof] { margin: 0; font-size: .75rem; color: var(--text-secondary); line-height: 1.3; }
.ac-tag[b-q1oi9iarof] { padding: 0 7px; font-size: .6875rem; font-weight: 600; line-height: 18px; color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 8px; }
.ac-new[b-q1oi9iarof] { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px; font: inherit; font-size: .8125rem; color: var(--text-primary); background: transparent; border: 1px solid var(--border-color); border-radius: 8px; white-space: nowrap; }
.ac-new:hover:not(:disabled)[b-q1oi9iarof] { border-color: var(--amx-blue-text); color: var(--amx-blue-text); }
.ac-new:disabled[b-q1oi9iarof] { opacity: .5; cursor: default; }
.ac-icon[b-q1oi9iarof] { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; color: var(--text-secondary); background: transparent; border: 1px solid transparent; border-radius: 8px; }
.ac-icon:hover:not(:disabled)[b-q1oi9iarof] { border-color: var(--border-color); color: var(--text-primary); }

/* Past chats: a count beside the history icon; the list drops below the header, each chat by its first question,
   what it checked and when - opening one swaps it with the current chat. */
.ac-chats[b-q1oi9iarof] { width: auto; gap: 3px; padding: 0 6px; }
.ac-chats.is-on[b-q1oi9iarof] { color: var(--amx-blue-text); border-color: var(--border-color); background: var(--bg-secondary); }
.ac-chats-n[b-q1oi9iarof] { font-size: .6875rem; font-weight: 700; }
.ac-chatlist[b-q1oi9iarof] { max-height: 45%; overflow-y: auto; padding: 8px 10px 10px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); }
.ac-chatlist-head[b-q1oi9iarof] { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px 6px; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.ac-chatlist-head span[b-q1oi9iarof] { font-weight: 400; letter-spacing: 0; text-transform: none; }
.ac-chatlist ul[b-q1oi9iarof] { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ac-chatlist-item[b-q1oi9iarof] { display: flex; align-items: stretch; gap: 2px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; }
.ac-chatlist-item:hover[b-q1oi9iarof] { border-color: color-mix(in srgb, var(--amx-blue-text) 35%, transparent); }
.ac-chatlist-open[b-q1oi9iarof] { flex: 1; min-width: 0; display: grid; gap: 2px; padding: 7px 10px; font: inherit; text-align: left; color: var(--text-primary); background: none; border: 0; border-radius: 8px; }
.ac-chatlist-title[b-q1oi9iarof] { font-size: .8125rem; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-chatlist-meta[b-q1oi9iarof] { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: .71875rem; color: var(--text-secondary); }
.ac-chatlist-where[b-q1oi9iarof] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; color: var(--amx-blue-text); }
.ac-chatlist-x[b-q1oi9iarof] { display: inline-flex; align-items: center; justify-content: center; width: 28px; padding: 0; color: var(--text-secondary); background: none; border: 0; border-radius: 8px; }
.ac-chatlist-x:hover[b-q1oi9iarof] { color: var(--text-primary); }
.ac-chatlist-open:focus-visible[b-q1oi9iarof], .ac-chatlist-x:focus-visible[b-q1oi9iarof] { outline: 2px solid var(--amx-blue-text); outline-offset: -2px; }

/* Line icons (AmxIcon.razor): one 1.5px set, currentColor. */
.amx-chat-dock[b-q1oi9iarof]  .amx-ic { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.ac-banner[b-q1oi9iarof] { margin: 0; padding: 4px 12px; font-size: .8125rem; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); }


/* Bottom-up, so the newest stays in view while the user is at the bottom, and stays put when they've scrolled up.
   overscroll-behavior: the page behind doesn't scroll when the conversation reaches its end. */
.ac-log[b-q1oi9iarof] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column-reverse; overflow-y: auto; overscroll-behavior: contain; }
.ac-log-inner[b-q1oi9iarof] { padding: 14px 12px 8px; }
.ac-turns[b-q1oi9iarof] { margin: 0; padding: 0; list-style: none; }
.ac-turn + .ac-turn[b-q1oi9iarof] { margin-top: 16px; }

/* The empty state: the mark, a greeting, starters as plain text cards. */
.ac-empty[b-q1oi9iarof] { display: flex; flex-direction: column; align-items: flex-start; padding: 4px 2px 8px; }
.ac-empty[b-q1oi9iarof]  .amx-mark { width: 40px; height: 40px; }
.ac-greet[b-q1oi9iarof] { margin: 12px 0 4px; font-size: 1rem; font-weight: 600; }
.ac-greet-sub[b-q1oi9iarof] { margin: 0 0 14px; font-size: .8125rem; color: var(--text-secondary); }
.ac-cards[b-q1oi9iarof] { width: 100%; display: grid; gap: 8px; }
.ac-card[b-q1oi9iarof] { padding: 9px 12px; font: inherit; font-size: .84375rem; text-align: left; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; }
.ac-card:hover[b-q1oi9iarof] { border-color: var(--amx-blue-text); }
.ac-chips[b-q1oi9iarof] { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-chip[b-q1oi9iarof] { padding: 4px 10px; font: inherit; font-size: .8125rem; line-height: 1.4; text-align: left; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; }
.ac-chip:hover[b-q1oi9iarof] { border-color: var(--amx-blue-text); color: var(--amx-blue-text); }
.ac-chip-sm[b-q1oi9iarof] { padding: 2px 8px; font-size: .75rem; }

/* The user's message: right, AMX Blue. The answer: left, full width, no bubble. */
.ac-user[b-q1oi9iarof] { display: flex; justify-content: flex-end; }
.ac-bubble[b-q1oi9iarof] { max-width: 85%; margin: 0; padding: 8px 12px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--amx-on-blue); background: var(--amx-blue); border-radius: 8px; }
.ac-bot[b-q1oi9iarof] { margin-top: 10px; }
.ac-bot-body[b-q1oi9iarof] { min-width: 0; }

/* Answers: comfortable line height, compact lists with solid discs lined up with the text; on-screen names (bold)
   as flat label tags - clickable when the setting is on this page. */
.ac-md[b-q1oi9iarof] { overflow-wrap: anywhere; line-height: 1.6; }
.ac-md[b-q1oi9iarof]  :is(p, ul, ol, pre, h4) { margin: 0 0 8px; }
.ac-md[b-q1oi9iarof]  > :last-child { margin-bottom: 0; }
.ac-md[b-q1oi9iarof]  ul { list-style: disc outside; padding-left: 18px; }
.ac-md[b-q1oi9iarof]  ol { padding-left: 20px; }
.ac-md[b-q1oi9iarof]  li { margin: 0; padding-left: 2px; line-height: 1.5; }
.ac-md[b-q1oi9iarof]  li + li { margin-top: 2px; }
.ac-md[b-q1oi9iarof]  li::marker { color: var(--text-secondary); }
.ac-md[b-q1oi9iarof]  h4 { font-size: .875rem; font-weight: 600; margin-top: 12px; }
.ac-md[b-q1oi9iarof]  strong, .ac-find-text[b-q1oi9iarof]  strong { padding: 0 5px; font-size: .8125rem; font-weight: 600; color: var(--amx-blue-text); background: var(--amx-blue-tint); border: 1px solid var(--border-color); border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ac-md[b-q1oi9iarof]  strong.is-target { cursor: pointer; }
.ac-md[b-q1oi9iarof]  strong.is-target:hover { border-color: var(--amx-blue-text); }
.ac-md[b-q1oi9iarof]  code { padding: 0 4px; font-size: .8125rem; background: var(--bg-tertiary); border-radius: 4px; }
.ac-md[b-q1oi9iarof]  pre { padding: 8px; overflow-x: auto; background: var(--bg-tertiary); border-radius: 8px; }
.ac-md[b-q1oi9iarof]  pre code { padding: 0; background: transparent; }
.ac-md[b-q1oi9iarof]  a { color: var(--amx-blue-text); text-decoration: underline; }
.ac-md.is-note[b-q1oi9iarof] { color: var(--text-secondary); }
.ac-md.is-note[b-q1oi9iarof]  strong { padding: 0; color: inherit; background: none; border: 0; }

/* The typewriter (AmxChat.razor.js): words fade in; a block (a paragraph, a bullet) gets a quick 120ms fade as it starts. */
.ac-md[b-q1oi9iarof]  .tw-w { opacity: 0; }
.ac-md[b-q1oi9iarof]  .tw-w.tw-on { opacity: 1; }
.ac-md[b-q1oi9iarof]  .tw-b { opacity: 0; transition: opacity .12s ease-out; }
.ac-md[b-q1oi9iarof]  .tw-b.tw-in { opacity: 1; }

/* "On this page, under Validation" and the Troubleshooting tag (gold fill, dark text, the Troubleshoot icon). */
.ac-here[b-q1oi9iarof] { display: inline-block; margin-bottom: 8px; padding: 1px 8px; font-size: .75rem; font-weight: 600; color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; }
.ac-badge-trouble[b-q1oi9iarof] { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; padding: 1px 8px 1px 6px; font-size: .75rem; font-weight: 600; color: var(--amx-gold-ink); background: var(--amx-gold); border-radius: 6px; }
.ac-badge-trouble[b-q1oi9iarof]  .amx-ic { width: 14px; height: 14px; }

/* The diagnosis card: a one-line verdict, then findings with a text status tag, gold numbers matching the page. */
.ac-dx[b-q1oi9iarof] { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.ac-verdict[b-q1oi9iarof] { padding: 10px 12px; font-weight: 600; line-height: 1.45; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); }
.ac-findings[b-q1oi9iarof] { margin: 0; padding: 0; list-style: none; }
.ac-find[b-q1oi9iarof] { display: grid; grid-template-columns: 74px 1fr auto; gap: 10px; align-items: start; padding: 9px 12px; border-top: 1px solid var(--border-color); }
.ac-find:first-child[b-q1oi9iarof] { border-top: 0; }
.ac-find.is-link[b-q1oi9iarof] { cursor: pointer; }
.ac-find.is-link:hover[b-q1oi9iarof] { background: var(--bg-secondary); }
.ac-find-text[b-q1oi9iarof] { font-size: .84375rem; line-height: 1.5; }
.ac-find-text[b-q1oi9iarof]  p { margin: 0; }
.ac-st[b-q1oi9iarof] { justify-self: start; margin-top: 2px; padding: 0 6px; font-size: .6875rem; font-weight: 700; line-height: 18px; border-radius: 4px; white-space: nowrap; }
.ac-st.is-cause[b-q1oi9iarof] { color: var(--accent-warning-text); background: color-mix(in srgb, var(--accent-warning) 16%, transparent); }
.ac-st.is-fine[b-q1oi9iarof] { color: var(--accent-success-text); background: color-mix(in srgb, var(--accent-success) 14%, transparent); }
.ac-st.is-cant[b-q1oi9iarof] { color: var(--accent-link); background: color-mix(in srgb, var(--accent-link) 12%, transparent); }
.ac-num[b-q1oi9iarof] { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: .6875rem; font-weight: 800; color: var(--amx-gold-ink); background: var(--amx-gold); }
.ac-dx-foot[b-q1oi9iarof] { padding: 8px 12px; font-size: .75rem; color: var(--text-secondary); border-top: 1px solid var(--border-color); }

/* "Show me": settings on other Settings pages, every page a label is on; when the directions were checked. */
.ac-where[b-q1oi9iarof] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.ac-where-head[b-q1oi9iarof], .ac-asof[b-q1oi9iarof] { flex-basis: 100%; margin: 0; }
.ac-showme[b-q1oi9iarof] { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font: inherit; font-size: .8125rem; color: var(--amx-blue-text); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; }
.ac-showme:hover[b-q1oi9iarof] { border-color: var(--amx-blue-text); }
.ac-showme-page[b-q1oi9iarof] { color: var(--text-secondary); }

/* The screen the answer is about: a small link under it. */
.ac-screen[b-q1oi9iarof] { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 0; font: inherit; font-size: .8125rem; color: var(--amx-blue-text); background: transparent; border: 0; text-decoration: underline; text-align: left; }

/* Actions: on hover or focus, and always on the newest answer (and on touch screens, which have no hover). */
.ac-actions[b-q1oi9iarof] { display: flex; align-items: center; gap: 2px; margin-top: 4px; opacity: 0; }
.ac-turn:hover .ac-actions[b-q1oi9iarof], .ac-turn:focus-within .ac-actions[b-q1oi9iarof], .ac-turn.is-latest .ac-actions[b-q1oi9iarof] { opacity: 1; }
@media (hover: none) { .ac-actions[b-q1oi9iarof] { opacity: 1; } }
.ac-act[b-q1oi9iarof] { display: inline-flex; align-items: center; gap: 4px; min-width: 28px; height: 28px; padding: 0 6px; font: inherit; font-size: .8125rem; color: var(--text-secondary); background: transparent; border: 1px solid transparent; border-radius: 8px; }
.ac-act:hover[b-q1oi9iarof] { border-color: var(--border-color); color: var(--text-primary); }
.ac-act.is-on[b-q1oi9iarof] { color: var(--amx-blue-text); }
.ac-copied[b-q1oi9iarof] { font-size: .75rem; }
.ac-reasons[b-q1oi9iarof] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; }

.ac-muted[b-q1oi9iarof] { color: var(--text-secondary); font-size: .8125rem; }
.ac-note[b-q1oi9iarof], .ac-searched[b-q1oi9iarof] { margin: 8px 0 0; }
.ac-sources[b-q1oi9iarof] { margin-top: 8px; font-size: .8125rem; }
.ac-sources summary[b-q1oi9iarof] { color: var(--amx-blue-text); cursor: pointer; }
.ac-sources ul[b-q1oi9iarof] { margin: 4px 0 0; padding-left: 20px; overflow-wrap: anywhere; }

/* Waiting: the AI mark (its gold accent drifts slowly) beside three gold shimmer lines where the answer will be - the
   shimmer is the one gradient besides the mark. "Still working…" under it after 8 seconds. What it is doing goes to
   screen readers only (the status region). */
.ac-wait[b-q1oi9iarof] { display: flex; align-items: flex-start; gap: 10px; }
.ac-wait[b-q1oi9iarof]  .amx-mark { width: 24px; height: 24px; }
.ac-shimmer[b-q1oi9iarof] { flex: 1; display: grid; gap: 8px; padding-top: 2px; }
.ac-sk[b-q1oi9iarof] { display: block; height: 10px; border-radius: 8px;
         background: linear-gradient(90deg, var(--ac-gold-base) 0%, var(--ac-gold-base) 35%, var(--ac-gold-sweep) 50%, var(--ac-gold-base) 65%, var(--ac-gold-base) 100%);
         background-size: 300% 100%; animation: ac-shimmer-b-q1oi9iarof 1.6s linear infinite; }
.ac-later[b-q1oi9iarof] { font-size: .75rem; color: var(--text-secondary); opacity: 0; animation: ac-show-b-q1oi9iarof 0s linear 8s forwards; }
@keyframes ac-shimmer-b-q1oi9iarof { from { background-position: 100% 0; } to { background-position: 0 0; } }

.ac-error p[b-q1oi9iarof] { margin: 0 0 8px; color: var(--text-secondary); }
.ac-retry[b-q1oi9iarof] { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; font: inherit; font-size: .8125rem; color: var(--amx-blue-text); background: transparent; border: 1px solid var(--border-color); border-radius: 8px; }
.ac-retry:hover[b-q1oi9iarof] { border-color: var(--amx-blue-text); }

/* "Jump to latest": inside the panel, above the box, when the user has scrolled up and something new arrives. */
.ac-jump[b-q1oi9iarof] { position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; font: inherit; font-size: .8125rem; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; }
.ac-jump[hidden][b-q1oi9iarof] { display: none; }
.ac-jump:hover[b-q1oi9iarof] { border-color: var(--amx-blue-text); }

/* Follow-ups sit just above the box. */
.ac-followups[b-q1oi9iarof] { padding: 8px 12px 0; }

/* "Which form?", "Troubleshoot this instead" and the hint, under an answer. */
.ac-choices[b-q1oi9iarof], .ac-bot-body > .ac-chips[b-q1oi9iarof] { margin-top: 8px; }
.ac-hint[b-q1oi9iarof] { margin: 8px 0 0; font-size: .8125rem; color: var(--text-secondary); }

/* Asked back: what Ask AMX needs from the user, as its own card - flat, rounded, a small gold marker (Ask
   AMX is waiting on you), the question, likely answers as full-width rows, then how to answer and "Skip". */
.ac-askback[b-q1oi9iarof] { margin-top: 12px; padding: 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px;
              animation: ac-askback-in-b-q1oi9iarof .2s ease-out; }
.ac-askback-head[b-q1oi9iarof] { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.ac-askback-ic[b-q1oi9iarof] { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--amx-gold-ink); background: var(--amx-gold); }
.ac-askback-ic[b-q1oi9iarof]  .amx-ic { width: 13px; height: 13px; stroke-width: 2.2; }
.ac-askback-q[b-q1oi9iarof] { margin: 0 0 12px; font-size: .9375rem; font-weight: 600; line-height: 1.4; color: var(--text-primary); }
.ac-askback-opts[b-q1oi9iarof] { display: grid; gap: 6px; }
.ac-askback .ac-choices[b-q1oi9iarof] { margin-top: 0; }
/* many forms: the list scrolls inside the card, under a filter */
.ac-askback-opts.is-long[b-q1oi9iarof] { max-height: 320px; overflow-y: auto; padding-right: 2px; }
.ac-askback-filter[b-q1oi9iarof] { width: 100%; margin: 0 0 8px; padding: 6px 10px; font: inherit; font-size: .8125rem; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; }
.ac-askback-filter:focus-visible[b-q1oi9iarof] { outline: 2px solid var(--amx-blue-text); outline-offset: 1px; }
.ac-askback-opt[b-q1oi9iarof] { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px 8px 12px; font: inherit; font-size: .84375rem; line-height: 1.4; text-align: left; color: var(--text-primary); background: var(--bg-secondary); border: 1px solid transparent; border-radius: 8px; transition: background-color .12s, border-color .12s, color .12s; }
.ac-askback-opt[b-q1oi9iarof]  .amx-ic { flex: none; width: 14px; height: 14px; opacity: .45; transition: opacity .12s, transform .12s; }
.ac-askback-opt:hover[b-q1oi9iarof] { color: var(--amx-blue-text); background: color-mix(in srgb, var(--amx-blue) 7%, var(--bg-card)); border-color: color-mix(in srgb, var(--amx-blue-text) 35%, transparent); }
.ac-askback-opt:hover[b-q1oi9iarof]  .amx-ic { opacity: 1; transform: translateX(2px); }
.ac-askback-opt:focus-visible[b-q1oi9iarof], .ac-askback-skip:focus-visible[b-q1oi9iarof] { outline: 2px solid var(--amx-blue-text); outline-offset: 1px; }
.ac-askback-foot[b-q1oi9iarof] { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: .75rem; line-height: 1.4; color: var(--text-secondary); }
.ac-askback-skip[b-q1oi9iarof] { flex: none; padding: 3px 8px; font: inherit; font-weight: 600; color: var(--text-secondary); background: none; border: 0; border-radius: 6px; }
.ac-askback-skip:hover[b-q1oi9iarof] { color: var(--text-primary); background: var(--bg-secondary); }
@keyframes ac-askback-in-b-q1oi9iarof { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ac-askback[b-q1oi9iarof] { animation: none; } .ac-askback-opt[b-q1oi9iarof], .ac-askback-opt[b-q1oi9iarof]  .amx-ic { transition: none; } }

/* What a Troubleshoot question would check, just above the message box; x takes it off. */
.ac-context[b-q1oi9iarof] { display: flex; align-items: center; gap: 6px; margin: 8px 12px 0; padding: 3px 4px 3px 10px; font-size: .75rem; color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; }
.ac-context-text[b-q1oi9iarof] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-context-x[b-q1oi9iarof] { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; color: var(--text-secondary); background: transparent; border: 1px solid transparent; border-radius: 8px; }
.ac-context-x:hover[b-q1oi9iarof] { color: var(--text-primary); border-color: var(--border-color); }
.ac-context.is-off[b-q1oi9iarof] { padding: 0; background: transparent; border: 0; }
.ac-context-on[b-q1oi9iarof] { padding: 3px 10px; font: inherit; font-size: .75rem; color: var(--text-secondary); background: transparent; border: 1px dashed var(--border-color); border-radius: 8px; }
.ac-context-on:hover[b-q1oi9iarof] { color: var(--amx-blue-text); border-color: var(--amx-blue-text); }

/* The message box grows with what's typed; Send, or Stop while an answer is being written. */
.ac-form[b-q1oi9iarof] { position: relative; padding: 8px 12px 12px; }
.ac-input[b-q1oi9iarof] { display: block; width: 100%; min-height: 42px; max-height: 160px; padding: 9px 48px 9px 12px; resize: none; font: inherit; line-height: 1.45; color: var(--text-primary); background: var(--bg-input, var(--bg-card)); border: 1px solid var(--border-color); border-radius: 8px; field-sizing: content; }
.ac-input:focus[b-q1oi9iarof] { border-color: var(--amx-blue-text); }
.ac-input[b-q1oi9iarof]::placeholder { color: var(--text-secondary); opacity: 1; }
.ac-send[b-q1oi9iarof] { position: absolute; right: 18px; bottom: 17px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; color: var(--amx-on-blue); background: var(--amx-blue); border: 1px solid var(--amx-blue); border-radius: 8px; }
.ac-send:disabled[b-q1oi9iarof] { opacity: .45; cursor: default; }
.ac-send.ac-stop[b-q1oi9iarof] { color: var(--text-primary); background: var(--bg-card); border-color: var(--border-color); }

@keyframes ac-show-b-q1oi9iarof { to { opacity: 1; } }

/* Reduced motion: nothing moves (the reveal is skipped in the script, and the mark and launcher are still). */
@media (prefers-reduced-motion: reduce) {
    .ac-md[b-q1oi9iarof]  .tw-b { transition: none; }
    .ac-sk[b-q1oi9iarof] { animation: none; background: var(--ac-gold-base); }   /* static gold-tinted lines */
    .amx-chat-launcher.in-topbar[b-q1oi9iarof]  .amx-mark.is-glyph .amx-mark-accent,
    .amx-chat-launcher.in-topbar[b-q1oi9iarof]  .amx-mark.is-glyph .amx-mark-main { animation: none !important; }
}

/* Narrow screens (and 200% zoom): a full-screen sheet; the page behind doesn't scroll (see the component's <style>). */
@media (max-width: 600px) {
    .amx-chat-dock[b-q1oi9iarof] { right: 12px; }
    body:has(.aiw-panel) .amx-chat-dock[b-q1oi9iarof] { right: 12px; }
    .amx-chat-panel[b-q1oi9iarof], .amx-chat-panel.is-wide[b-q1oi9iarof] { position: fixed; inset: 0; z-index: 1201; width: auto; height: var(--amx-viewport-h, 100vh); border: 0; border-radius: 0; }
    .ac-width[b-q1oi9iarof] { display: none; }
    .ac-new span[b-q1oi9iarof] { display: none; }
}
/* /Components/Chat/AmxChatOpenButton.razor.rz.scp.css */
/* The launcher's pill, smaller, for a window's header: AMX Blue (it's interactive), the white sparkles and the name;
   the sparkles alone on a narrow screen. Flat, like the panel. */
.amx-chat-open[b-ohps04q0i1] { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; font: inherit;
                 font-size: .8125rem; font-weight: 600; line-height: 1; white-space: nowrap; color: #FFFFFF; background: #3160B6;
                 border: 0; border-radius: 16px; }
.amx-chat-open:hover[b-ohps04q0i1] { outline: 2px solid #3160B6; outline-offset: 2px; }
.amx-chat-open:focus-visible[b-ohps04q0i1] { outline: 2px solid #3160B6; outline-offset: 2px; }
.amx-chat-open[b-ohps04q0i1]  .amx-mark { width: 16px; height: 16px; }
@media (max-width: 600px) {
    .amx-chat-open[b-ohps04q0i1] { width: 32px; padding: 0; justify-content: center; }
    .amx-chat-open-label[b-ohps04q0i1] { display: none; }
}
/* /Components/Chat/AmxMark.razor.rz.scp.css */
/* The mark: its only motion is the gold sparkle's slow twinkle while waiting; none under reduced motion. */
.amx-mark[b-027u6w2v8y] { display: block; width: 32px; height: 32px; flex: 0 0 auto; }
.amx-mark-main[b-027u6w2v8y], .amx-mark-accent[b-027u6w2v8y] { transform-box: fill-box; transform-origin: center; }
.amx-mark.is-waiting .amx-mark-accent[b-027u6w2v8y] { animation: amx-mark-twinkle-b-027u6w2v8y 2.4s ease-in-out infinite; }

@keyframes amx-mark-twinkle-b-027u6w2v8y {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(45deg) scale(.78); }
}

@media (prefers-reduced-motion: reduce) {
    .amx-mark.is-waiting .amx-mark-accent[b-027u6w2v8y] { animation: none; }
}
/* /Components/CustomComponents/RadioButtonsView.razor.rz.scp.css */
/* A horizontal group is boxed by the shared .amx-field shell (wwwroot/css/amx-field.css), so
   it matches the text, number and lookup controls around it. Everything here is token-driven:
   the label colour used to be a hard-coded #0f172a, which is near-black - on a dark form that
   left the option text invisible against the navy field. */

.radio-btns-wrapper[b-jfg1avjd63] {
    display: flex;
    align-items: center !important;
    gap: 20px;
    padding: 0.375rem 0.75rem;
    min-height: 35px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Wrap against the field's available width, including when a neighbouring map changes
   size. Keep options together where possible without widening the form's columns. */
.radio-btns-wrapper.is-horizontal[b-jfg1avjd63] {
    flex-wrap: wrap;
    column-gap: var(--space-4, 1rem);
    row-gap: var(--space-2, 0.5rem);
    height: auto;
}

.radio-btns-wrapper.is-vertical[b-jfg1avjd63] {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0;
    padding-left: 0;
}

.radio-item-h[b-jfg1avjd63] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    min-height: 24px;
}

.radio-item-v[b-jfg1avjd63] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
}

.radio-item-v label[b-jfg1avjd63],
.radio-item-h label[b-jfg1avjd63] {
    margin: 0 !important;
    max-width: fit-content;
    color: var(--text-primary, #131826);
    font-size: var(--amx-control-font-size, 0.875rem);
    font-weight: 400;
    cursor: pointer;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* An option carrying its own colours from the form's configuration. The colours themselves come
   in as inline styles - they are data, not theme - so all this adds is the chip shape that makes
   a painted background read as a deliberate treatment rather than a stray highlight. The border
   is what keeps a pale fill visible on a white form and a dark one visible on a dark form. */
.radio-item-v label.is-coloured[b-jfg1avjd63],
.radio-item-h label.is-coloured[b-jfg1avjd63] {
    padding: 2px 8px;
    border: 1px solid var(--border-color, #e4e8f1);
    border-radius: var(--radius-sm, 4px);
}

/* The configured colours win over the muted read-only treatment, exactly as they do in view mode:
   the colour IS the value here, and washing it out would lose it. */
.radio-btns-wrapper.is-readonly .radio-item-v label.is-coloured[b-jfg1avjd63],
.radio-btns-wrapper.is-readonly .radio-item-h label.is-coloured[b-jfg1avjd63] {
    color: inherit;
}

/* Read-only on a form being edited: muted, to sit apart from the controls the user can change.
   View mode is deliberately NOT muted - nothing there is editable, so the selected option is
   simply the value and should read at full strength, like every other view-mode readout. */
.radio-btns-wrapper.is-readonly .radio-item-v label[b-jfg1avjd63],
.radio-btns-wrapper.is-readonly .radio-item-h label[b-jfg1avjd63] {
    color: var(--text-secondary, #5b6577);
}

.radio-btns-wrapper.is-readonly label[b-jfg1avjd63],
.radio-btns-wrapper.is-view label[b-jfg1avjd63] {
    cursor: default;
}

/* Drawn rather than left to the browser, for the same reason as the checkbox: a native radio's
   disabled state washes out so far that the selected option is indistinguishable from the rest -
   and in view mode every radio is disabled, so the one that is selected IS the value. Painting it
   ourselves keeps the dot at full strength whatever the state. */
.radio-btns-wrapper input[type="radio"][b-jfg1avjd63] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    background-color: var(--bg-input, #ffffff);
    /* The app accent rather than a fixed blue, so it follows the theme - and turns green
       inside the designer, where the accent is remapped. */
    border: 1.5px solid var(--border-interactive, #767d8c);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.radio-btns-wrapper input[type="radio"][b-jfg1avjd63]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--text-on-accent, #ffffff);
    transform: scale(0);
    transition: transform 110ms ease;
}

.radio-btns-wrapper input[type="radio"]:checked[b-jfg1avjd63] {
    background-color: var(--accent-primary, #2563eb);
    border-color: var(--accent-primary, #2563eb);
}

.radio-btns-wrapper input[type="radio"]:checked[b-jfg1avjd63]::before {
    transform: scale(1);
}

.radio-btns-wrapper input[type="radio"]:hover:not(:disabled)[b-jfg1avjd63] {
    border-color: var(--accent-primary, #2563eb);
}

/* View mode and read-only. Full opacity deliberately: the affordances go, the value stays -
   an unselected option reads as an empty ring, the selected one keeps its fill. */
.radio-btns-wrapper input[type="radio"]:disabled[b-jfg1avjd63] {
    opacity: 1;
    cursor: default;
    background-color: var(--bg-secondary, #eef1f8);
    border-color: var(--border-color, #e4e8f1);
}

.radio-btns-wrapper input[type="radio"]:disabled:checked[b-jfg1avjd63] {
    background-color: var(--accent-primary, #2563eb);
    border-color: var(--accent-primary, #2563eb);
    /* Just enough off the editable version to read as "not yours to change". */
    filter: saturate(0.8);
}

/* Read-only on a form being edited: the dashed ring and muted dot the checkbox uses, so the
   shape says "locked" and not just the colour (WCAG 1.4.1). */
.radio-btns-wrapper.is-readonly input[type="radio"][b-jfg1avjd63],
.radio-btns-wrapper.is-readonly input[type="radio"]:disabled:checked[b-jfg1avjd63] {
    background-color: var(--bg-secondary, #eef1f8);
    border: 1.5px dashed var(--border-interactive, #767d8c);
    filter: none;
}

.radio-btns-wrapper.is-readonly input[type="radio"][b-jfg1avjd63]::before {
    background-color: var(--text-secondary, #5b6577);
}

.radio-btns-wrapper input[type="radio"]:focus-visible[b-jfg1avjd63] {
    outline: 2px solid var(--accent-primary, #2563eb);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .radio-btns-wrapper input[type="radio"][b-jfg1avjd63],
    .radio-btns-wrapper input[type="radio"][b-jfg1avjd63]::before {
        transition: none;
    }
}
/* /Components/CustomMainToolbar/CustomMainToolbar.razor.rz.scp.css */
.main-toolbar-item-container[b-48pzjp6oi3] {
    padding: 10px 14px;
    gap: 12px;
    justify-content: space-between;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.main-toolbar-left-items-container[b-48pzjp6oi3] {
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

.main-toolbar-right-items-container[b-48pzjp6oi3] {
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-width: fit-content;
}

[b-48pzjp6oi3] .main-toolbar-right-items-container > div > .btn,
[b-48pzjp6oi3] .main-toolbar-left-items-container > div > .btn {
    height: 40px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--radius-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

[b-48pzjp6oi3] .main-toolbar-right-items-container > div > .btn:hover,
[b-48pzjp6oi3] .main-toolbar-left-items-container > div > .btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md);
    filter: brightness(0.97);
}

.vertical-spacer[b-48pzjp6oi3] {
    width: 1px;
    height: 26px;
    background-color: var(--border-color);
    margin: 0 8px;
    align-self: center;
}

.toolbar-text-wide[b-48pzjp6oi3], .toolbar-text-compact[b-48pzjp6oi3] { display: none; }
@media (min-width: 768px) and (max-width: 1199.98px) {
    .toolbar-text-compact[b-48pzjp6oi3] { display: inline; }
}
@media (min-width: 1200px) {
    .toolbar-text-wide[b-48pzjp6oi3] { display: inline; }
}

/* An SVG mark used as a toolbar icon (IconContent). The Ask AMX sparkles fill only part of their
   square, so they take the launcher pill's 22px to read at the weight of the Font Awesome icons. */
[b-48pzjp6oi3] .main-toolbar-right-items-container > div > .btn > .amx-mark,
[b-48pzjp6oi3] .main-toolbar-left-items-container > div > .btn > .amx-mark {
    width: 22px;
    height: 22px;
    margin: 0 -2px;
}

/* A label with a subtitle stacks the two lines inside the 40px button. */
.toolbar-text-stacked[b-48pzjp6oi3] { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.toolbar-subtitle[b-48pzjp6oi3] { font-size: .6875rem; font-weight: 500; opacity: 1; }
/* /Components/CustomToolbar/CustomToolbarItem.razor.rz.scp.css */
/* Toolbar buttons should never wrap their icon and label onto separate lines.
   When space is tight, the label is truncated with an ellipsis instead.
   Parent container (CustomToolbarComponent) keeps overflow-x scrolling so all
   buttons remain accessible. */
button[b-1r4msyf9jb] {
    white-space: nowrap;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 16rem;
}

/* Keep toolbar actions on the accessible green fill in both themes and all states. */
button.btn.dbd-btn.dbd-success[b-1r4msyf9jb],
button.btn.dbd-btn.dbd-success:is(:hover, :focus, :active):not(:disabled)[b-1r4msyf9jb] {
    background: var(--accent-success-fill);
    border-color: var(--accent-success-fill);
    color: var(--text-on-dark);
    filter: none;
}

button.btn.dbd-btn:focus-visible:not(:disabled)[b-1r4msyf9jb],
button.btn.dbd-btn.dbd-success:focus-visible:not(:disabled)[b-1r4msyf9jb] {
    outline: 2px solid var(--border-focus, var(--accent-success-text));
    outline-offset: 2px;
    box-shadow: none;
}

    button > span:last-child[b-1r4msyf9jb] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    /* When the toolbar runs in compact mode (many buttons), buttons that have
       an icon collapse to icon-only. The label text is moved to the title
       attribute so it still appears on hover/long-press. */
    button.toolbar-btn-compact > span.toolbar-btn-text[b-1r4msyf9jb] {
        display: none;
    }

/* /Components/Dashboard/DashboardActionLinksComponent.razor.rz.scp.css */
.dashboard-action-links .btn-outline-dark[b-gekps4oi0n] {
    border-color: #6c757d;
    color: #212529;
}

.dashboard-action-links .btn-outline-dark:hover[b-gekps4oi0n],
.dashboard-action-links .btn-outline-dark:focus[b-gekps4oi0n] {
    border-color: #212529;
    background-color: #212529;
    color: #ffffff;
}

:global([data-theme="dark"]) .dashboard-action-links .btn-outline-dark[b-gekps4oi0n] {
    border-color: #bfc4c9;
    color: #f3f5f7;
}

:global([data-theme="dark"]) .dashboard-action-links .btn-outline-dark:hover[b-gekps4oi0n],
:global([data-theme="dark"]) .dashboard-action-links .btn-outline-dark:focus[b-gekps4oi0n] {
    border-color: #e1e5e8;
    color: #ffffff;
}
/* /Components/Dashboard/DashboardCalendarComponent.razor.rz.scp.css */
/* The tile is just the box AmxCalendar fills — the calendar brings its own chrome. */
.dashboard-calendar[b-gde9aylrug] {
    overflow: hidden;
    height: 100%;
}
/* /Components/Dashboard/DashboardChartComponent.razor.rz.scp.css */
.dashboard-chart-container[b-4agnb8shl7] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: auto;
}

/* Age of a cached result, under the chart. Muted, but still body-text contrast via the token. */
.dashboard-chart-cached[b-4agnb8shl7] {
    flex: 0 0 auto;
    margin: 4px 0 0;
    font-size: 12px;
    text-align: right;
    color: var(--text-muted);
}

/* Screen-reader-only utility for accessible captions/labels. */
.sr-only[b-4agnb8shl7] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* When both chart and data show, stack them vertically. */
.chart-data-layout[b-4agnb8shl7] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.chart-data-layout.split .chart-canvas-container[b-4agnb8shl7] {
    flex: 0 0 auto;
    min-height: 250px;
    margin-bottom: 12px;
}

.chart-canvas-container[b-4agnb8shl7] {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 100px;
}

/* The data grid that used to be styled here is the shared ChartDataGrid component
   (Components/Charts/ChartDataGrid.razor.css) - including the compact variant these tiles use.
   Its rules went with it: a component's scoped sheet is the only thing that can reach its own
   elements, so a copy left behind here would not have applied to anything. */

/* No Data Found — matches DataGrid/ReportData empty-state styling. */
.empty-state[b-4agnb8shl7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 24px 20px;
    text-align: center;
    color: #64748b;
    height: 100%;
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

.empty-icon-badge[b-4agnb8shl7] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.15);
}

.empty-icon[b-4agnb8shl7] {
    font-size: 26px;
    color: #94a3b8;
    margin: 0;
}

.empty-text[b-4agnb8shl7] {
    font-size: 15px;
    font-weight: 600;
    color: #334155;
    letter-spacing: 0.1px;
}

.empty-subtext[b-4agnb8shl7] {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
}

[data-theme="dark"] .empty-state[b-4agnb8shl7] {
    color: #9ca3af;
}

[data-theme="dark"] .empty-icon-badge[b-4agnb8shl7] {
    background: linear-gradient(135deg, var(--bg-hover) 0%, var(--bg-card) 100%);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}

[data-theme="dark"] .empty-icon[b-4agnb8shl7] {
    color: #6b7280;
}

[data-theme="dark"] .empty-text[b-4agnb8shl7] {
    color: #e2e8f0;
}

[data-theme="dark"] .empty-subtext[b-4agnb8shl7] {
    color: var(--text-muted);
}
/* /Components/Dashboard/DashboardPageComponent.razor.rz.scp.css */
.dashboard-report-header[b-2zh6o9oca3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.dashboard-report-title[b-2zh6o9oca3] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-report-header-actions[b-2zh6o9oca3] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Header controls share one height (--dashboard-header-control-height, set on the tile in
   DashboardItemBaseComponent) so every tile's header comes out the same height. */
.dashboard-report-size-selector[b-2zh6o9oca3] {
    box-sizing: border-box;
    height: var(--dashboard-header-control-height, 28px);
    min-width: 78px;
    padding: 2px 26px 2px 10px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background-color: transparent;
    color: inherit;
    font-size: 12px;
    line-height: 1;
    outline: none;
    cursor: pointer;
}

.dashboard-report-size-selector:focus[b-2zh6o9oca3] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.dashboard-report-size-selector option[b-2zh6o9oca3] {
    color: var(--text-primary);
    background-color: var(--bg-input);
}

/* Action button (Load More) — same family as the size selector and the segmented control it shares
   the row with: drawn from currentColor, because in light mode this header takes the tenant's own
   configured colour. A .dbd-btn carries a fixed fill and a 0.9rem type size, so it read as a
   different kind of control dropped into the row. */
.dashboard-report-action-btn[b-2zh6o9oca3] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-sizing: border-box;
    height: var(--dashboard-header-control-height, 28px);
    padding: 0 12px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background-color: transparent;
    color: inherit;
    font-size: 12px;
    font-weight: 550;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.dashboard-report-action-btn i[b-2zh6o9oca3] {
    font-size: 10px;
    opacity: 0.8;
}

.dashboard-report-action-btn:hover:not(:disabled)[b-2zh6o9oca3] {
    text-decoration: underline;
}

.dashboard-report-action-btn:focus-visible[b-2zh6o9oca3] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.dashboard-report-count[b-2zh6o9oca3] {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: var(--dashboard-header-control-height, 28px);
    font-size: 13px;
    text-wrap: nowrap;
    padding: 0 8px;
    border-radius: 1rem;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
}

/* ── Segmented control (Chart/Data, My Events/All Events) ────────────────
   The app's settings segmented control (DESIGN_LANGUAGE §5, Display Settings'
   hour-format toggle): a track with a raised thumb, built on native radios so
   arrow-key navigation, group semantics and the checked state come for free -
   the pair of aria-pressed buttons this replaced announced as two independent
   toggles and gave no sense of one control with two positions.

   Drawn from currentColor rather than the --dbd-* fills the settings copy uses:
   in light mode this sits on the panel header, which takes the tenant's own
   configured colour, so a fixed grey track would clash with it. The selected
   segment fills with the header's foreground and takes its background back as
   text - a contrast pair whatever colour the tenant picked (published by
   DashboardItemBaseComponent as --dashboard-header-fg/-bg; in dark mode the
   header is an ordinary card, so these fall back to the app's tokens). */
.dashboard-segmented[b-2zh6o9oca3] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    box-sizing: border-box;
    height: var(--dashboard-header-control-height, 28px);
    padding: 2px;
    border: 1px solid currentColor;
    border-radius: 8px;
    background-color: transparent;
}

/* Clipped, not display:none - the radios must stay focusable and in the tab order. */
.dashboard-segment-input[b-2zh6o9oca3] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    margin: 0;
}

.dashboard-segment[b-2zh6o9oca3] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    padding: 0 10px;
    border-radius: 6px;
    color: inherit;
    font-size: 12px;
    font-weight: 550;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    opacity: 1;
    transition: background-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

.dashboard-segment:hover[b-2zh6o9oca3] {
    opacity: 1;
    text-decoration: underline;
}

.dashboard-segment-input:checked + .dashboard-segment[b-2zh6o9oca3] {
    opacity: 1;
    font-weight: 600;
    background-color: var(--dashboard-header-fg, var(--text-primary));
    color: var(--dashboard-header-bg, var(--bg-card));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.dashboard-segment-input:focus-visible + .dashboard-segment[b-2zh6o9oca3] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.dashboard-items-container[b-2zh6o9oca3] {
    --column-count: 6;
    --spacing: 8px;
    display: grid;
    grid-template-columns: repeat(var(--column-count), 2fr);
    grid-auto-rows: 55px;
    grid-auto-flow: row;
    gap: var(--spacing);
    width: 100%;
}

.dashboard-item[b-2zh6o9oca3] {
    grid-column-end: span 3;
    grid-row-end: span 1;
    height: 100%;
    min-height: 0;
}

.one-width[b-2zh6o9oca3] {
    grid-column-end: span 1;
}

.two-width[b-2zh6o9oca3] {
    grid-column-end: span 2;
}

.half-width[b-2zh6o9oca3] {
    grid-column-end: span 3;
}

.four-width[b-2zh6o9oca3] {
    grid-column-end: span 4;
}

.five-width[b-2zh6o9oca3] {
    grid-column-end: span 5;
}

.full-width[b-2zh6o9oca3] {
    grid-column: 1 / -1;
}

.smallest[b-2zh6o9oca3],
.dashBoardExtraExtraSmall[b-2zh6o9oca3] {
    grid-row-end: span 2;
}

.dashBoardExtraSmall[b-2zh6o9oca3] {
    grid-row-end: span 3;
}

.dashBoardSmall[b-2zh6o9oca3] {
    grid-row-end: span 4;
}

.dashBoardMedium[b-2zh6o9oca3] {
    grid-row-end: span 6;
}

.dashBoardLarge[b-2zh6o9oca3] {
    grid-row-end: span 8;
}

.dashBoardExtraLarge[b-2zh6o9oca3] {
    grid-row-end: span 10;
}

.dashBoardExtraExtraLarge[b-2zh6o9oca3] {
    grid-row-end: span 15;
}

.dashBoardLargest[b-2zh6o9oca3] {
    grid-row-end: span 18;
}

@media (max-width: 720px) {
    .dashboard-items-container[b-2zh6o9oca3] {
        grid-template-columns: repeat(2, 2fr);
    }

    .dashboard-item[b-2zh6o9oca3] {
        grid-column-end: span 2;
    }
}

.dashboard-title-wrapper[b-2zh6o9oca3] {
    grid-column: 1 / -1;
    grid-row-end: span 1;
    display: flex;
    align-items: flex-end;
}
/* /Components/Dashboard/DashboardRecentAssetsComponent.razor.rz.scp.css */
.recent-assets-items-wrapper[b-3kx2qkio2m] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: auto;
}

.recent-assets-list[b-3kx2qkio2m] {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 4px;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 4px;
}

@media (min-width: 992px) {
    .recent-assets-list-full-width[b-3kx2qkio2m] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Same chrome as the calendar tile's header buttons (.amx-cal-nav-btn / .amx-cal-today-btn) so the
   two dashboard tiles read as one set: a surface fill inside a hairline border, and a hover that
   moves the border as well as the fill. The calendar scopes its own --dbd-* palette; these are the
   app tokens that palette mirrors, so both land on the same colours in light and dark. */
.recent-item[b-3kx2qkio2m] {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    background-color: var(--bg-card);
    color: var(--text-primary);
    transition: background-color 0.1s ease, border-color 0.1s ease;
}

.recent-item:hover[b-3kx2qkio2m] {
    background-color: var(--bg-secondary);
    border-color: var(--border-interactive);
}

/* The card is the click target, so the ring belongs on it rather than on the anchor inside. */
.recent-item:has(.recent-item-main:focus-visible)[b-3kx2qkio2m] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.25);
}

.recent-item-main:focus-visible[b-3kx2qkio2m] {
    outline: none;
}

.recent-item-main[b-3kx2qkio2m] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--text-primary);
    cursor: pointer;
}

.recent-item-icon[b-3kx2qkio2m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--accent-primary);
    font-size: 1rem;
}

.recent-item-body[b-3kx2qkio2m] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.recent-item-name[b-3kx2qkio2m] {
    font-weight: 600;
    font-size: 0.925rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
}

.recent-item-parent[b-3kx2qkio2m] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    max-width: 100%;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
}

.recent-item-parent-icon[b-3kx2qkio2m] {
    transform: rotate(90deg);
    opacity: 0.6;
    font-size: 0.7rem;
}

.recent-item-parent-name[b-3kx2qkio2m] {
    color: var(--accent-primary);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-item-parent:hover .recent-item-parent-name[b-3kx2qkio2m],
.recent-item-parent:focus-visible .recent-item-parent-name[b-3kx2qkio2m] {
    text-decoration: underline;
}

.recent-item-time[b-3kx2qkio2m] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.recent-item-time i[b-3kx2qkio2m] {
    opacity: 0.6;
}

.recent-item-photo[b-3kx2qkio2m] {
    width: 52px;
    height: 52px;
    min-width: 52px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.recent-item-photo[b-3kx2qkio2m]  .photo-wrapper {
    width: 100%;
    height: 100%;
}

.recent-item-photo[b-3kx2qkio2m]  .photo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recent-item-photo[b-3kx2qkio2m]  .amx-photo-zoom-indicator {
    display: none;
}

.recent-item-chevron[b-3kx2qkio2m] {
    flex-shrink: 0;
    color: var(--text-secondary);
    opacity: 0;
    font-size: 0.8rem;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.recent-item:hover .recent-item-chevron[b-3kx2qkio2m] {
    opacity: 0.6;
    transform: translateX(2px);
}

/* Inline loading row shown while a Load More page is fetched. The list itself stays in the
   DOM so the scroll position is preserved; this row just marks the appending at the bottom. */
.recent-assets-loading-more[b-3kx2qkio2m] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    color: var(--text-secondary);
}
/* /Components/Dashboard/DashboardReportGridComponent.razor.rz.scp.css */
.dashboard-report-grid[b-xhcs4gljom]  .data-grid-header {
    display: none;
}

.dashboard-report-grid[b-xhcs4gljom]  .data-grid-content {
    min-height: 0;
}

.dashboard-report-list[b-xhcs4gljom] {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 10px;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.dashboard-report-list-item[b-xhcs4gljom] {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 50px;
    width: 100%;
    padding: 15px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    background: var(--bg-secondary, #f8f9fa);
    color: var(--text-primary, inherit);
    text-align: left;
    cursor: pointer;
}

.dashboard-report-list-item:hover[b-xhcs4gljom],
.dashboard-report-list-item:focus-visible[b-xhcs4gljom] {
    background-color: var(--bg-hover, #eef1f4);
    outline: none;
}

.dashboard-report-list-item:disabled[b-xhcs4gljom] {
    cursor: default;
    opacity: 0.75;
}

.dashboard-report-list-photos[b-xhcs4gljom] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.dashboard-report-list-photo[b-xhcs4gljom] {
    width: 70px;
    height: 70px;
    min-width: 70px;
    border-radius: 6px;
    overflow: hidden;
}

.dashboard-report-list-photo[b-xhcs4gljom]  .photo-wrapper {
    width: 100%;
    height: 100%;
}

.dashboard-report-list-photo[b-xhcs4gljom]  .photo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dashboard-report-list-text[b-xhcs4gljom] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-report-list-offline[b-xhcs4gljom] {
    color: var(--text-secondary, #6c757d);
    margin-left: auto;
}

.dashboard-report-list-truncated[b-xhcs4gljom] {
    margin: 0.5rem 0 0 0;
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    text-align: center;
    color: var(--text-secondary, #6c757d);
}
/* /Components/Dashboard/DashboardReportNodeComponent.razor.rz.scp.css */
.dashboard-report-node-view[b-vke80wf5ud] {
    width: min(760px, 100%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboard-report-node-header[b-vke80wf5ud] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-report-node-view h2[b-vke80wf5ud] {
    margin: 0 0 4px 0;
    font-size: 28px;
    font-weight: 600;
    color: var(--report-node-text);
}

.dashboard-report-node-search[b-vke80wf5ud] {
    min-height: 38px;
    height: 38px;
    border-radius: 8px;
    border-color: var(--report-node-border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.dashboard-report-node-list[b-vke80wf5ud] {
    min-height: 420px;
    padding: 10px;
    border: 1px solid var(--report-node-border);
    border-radius: 10px;
    background: var(--report-node-bg);
    overflow: auto;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.dashboard-report-node-list[b-vke80wf5ud]  .dashboard-report-node-item {
    width: 100%;
}

.dashboard-report-node-list[b-vke80wf5ud]  .dashboard-report-node-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 8px;
    border: 0;
    background: transparent;
    color: var(--report-node-text);
    text-align: left;
    border-radius: 7px;
    outline: none;
    box-shadow: none;
    font: inherit;
}

.dashboard-report-node-list[b-vke80wf5ud]  .dashboard-report-node-row.folder {
    font-weight: 600;
}

.dashboard-report-node-list[b-vke80wf5ud]  .dashboard-report-node-row.report {
    font-weight: 400;
}

.dashboard-report-node-list[b-vke80wf5ud]  .dashboard-report-node-row.clickable {
    cursor: pointer;
}

.dashboard-report-node-list[b-vke80wf5ud]  .dashboard-report-node-row.clickable:hover,
.dashboard-report-node-list[b-vke80wf5ud]  .dashboard-report-node-row:hover {
    background: var(--report-node-hover);
}

.dashboard-report-node-list[b-vke80wf5ud]  .dashboard-report-node-row:focus-visible {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}

.dashboard-report-node-list[b-vke80wf5ud]  .dashboard-report-node-expander {
    width: 16px;
    display: inline-flex;
    justify-content: center;
    color: var(--report-node-muted);
    font-size: 12px;
    flex: 0 0 16px;
}

.dashboard-report-node-list[b-vke80wf5ud]  .dashboard-report-node-text {
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-report-node-list[b-vke80wf5ud]  .dashboard-report-node-children {
    margin-left: 24px;
    padding-left: 10px;
    border-left: 1px solid var(--report-node-border);
}
/* /Components/DataModel/DataModelDiagramView.razor.rz.scp.css */
/* Data model diagram (DataModelDiagramView). Token colours throughout; the three line colours are the
   --diagram-line-* tokens in app.css, which carry their own light and dark values. */
.dm-view[b-htpvmcu7gn] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.dm-empty[b-htpvmcu7gn] {
    margin: 40px auto;
    text-align: center;
    color: var(--text-secondary);
}

.dm-colour-key[b-htpvmcu7gn] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    padding: 6px 10px;
    list-style: none;
    font-size: 0.8rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.dm-colour-key li[b-htpvmcu7gn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dm-swatch[b-htpvmcu7gn] {
    display: inline-block;
    width: 18px;
    height: 4px;
    border-radius: 2px;
}

.dm-swatch--c0[b-htpvmcu7gn] { background: var(--text-secondary); }
.dm-swatch--c1[b-htpvmcu7gn] { background: var(--diagram-line-1); }
.dm-swatch--c2[b-htpvmcu7gn] { background: var(--diagram-line-2); }
.dm-swatch--c3[b-htpvmcu7gn] { background: var(--diagram-line-3); }

.dm-scroll[b-htpvmcu7gn] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: var(--bg-secondary);
}

.dm-svg--fit[b-htpvmcu7gn] {
    display: block;
    height: auto;
}

.dm-box[b-htpvmcu7gn] {
    cursor: pointer;
}

.dm-box:focus[b-htpvmcu7gn] {
    outline: none;
}

.dm-box:focus-visible .dm-box-frame[b-htpvmcu7gn] {
    stroke: var(--accent-link);
    stroke-width: 3;
}

.dm-box-frame[b-htpvmcu7gn] {
    fill: var(--bg-card);
    stroke: var(--border-interactive);
    stroke-width: 1;
}

.dm-box-head[b-htpvmcu7gn] {
    fill: var(--bg-tertiary);
}

.dm-box-strip.dm-swatch--c1[b-htpvmcu7gn] { fill: var(--diagram-line-1); }
.dm-box-strip.dm-swatch--c2[b-htpvmcu7gn] { fill: var(--diagram-line-2); }
.dm-box-strip.dm-swatch--c3[b-htpvmcu7gn] { fill: var(--diagram-line-3); }

.dm-box--root .dm-box-frame[b-htpvmcu7gn],
.dm-box--root .dm-box-head[b-htpvmcu7gn] {
    stroke: var(--accent-primary);
    stroke-width: 2;
}

.dm-box--selected .dm-box-frame[b-htpvmcu7gn] {
    stroke: var(--accent-link);
    stroke-width: 3;
}

[b-htpvmcu7gn] .dm-box-name {
    font-size: 13px;
    font-weight: 700;
    fill: var(--text-primary);
}

[b-htpvmcu7gn] .dm-box-key,
[b-htpvmcu7gn] .dm-field {
    font-size: 11px;
    fill: var(--text-secondary);
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

[b-htpvmcu7gn] .dm-field--pk {
    fill: var(--text-primary);
    font-weight: 700;
}

[b-htpvmcu7gn] .dm-field--more {
    font-style: italic;
    font-family: inherit;
}

/* Lines. The kind sets the dash; the colour slot the stroke. */
.dm-edge[b-htpvmcu7gn] {
    fill: none;
    stroke-width: 1.6;
    stroke: var(--text-primary);
}

.dm-edge--other[b-htpvmcu7gn] { stroke-dasharray: 6 4; }
.dm-edge--onetoone[b-htpvmcu7gn] { stroke-dasharray: 6 4; }
.dm-edge--lookup[b-htpvmcu7gn] { stroke-dasharray: 2 3; }

.dm-edge--c0.dm-edge--other[b-htpvmcu7gn],
.dm-edge--c0.dm-edge--lookup[b-htpvmcu7gn] { stroke: var(--text-secondary); }
.dm-edge--c0.dm-edge--onetoone[b-htpvmcu7gn] { stroke: var(--accent-link); }
.dm-edge--c1[b-htpvmcu7gn] { stroke: var(--diagram-line-1); stroke-width: 2; }
.dm-edge--c2[b-htpvmcu7gn] { stroke: var(--diagram-line-2); stroke-width: 2; }
.dm-edge--c3[b-htpvmcu7gn] { stroke: var(--diagram-line-3); stroke-width: 2; }

/* The arrowhead takes its line's colour; browsers without context-stroke draw it in the text colour. */
.dm-arrowhead[b-htpvmcu7gn] {
    fill: var(--text-primary);
    fill: context-stroke;
}
/* /Components/DataModel/DataModelFocusModal.razor.rz.scp.css */
/* Wider than Bootstrap's modal-xl: a lineage can be several boxes wide. Still a popup. */
.dm-focus[b-5x6p4m6gmr]  .dm-focus-dialog {
    max-width: min(1600px, 95vw);
}

.dm-focus-controls[b-5x6p4m6gmr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.dm-focus-control[b-5x6p4m6gmr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.dm-focus-control select[b-5x6p4m6gmr] {
    width: auto;
    min-width: 7rem;
}

.dm-focus-check[b-5x6p4m6gmr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dm-focus-check label[b-5x6p4m6gmr] {
    margin: 0;
    cursor: pointer;
}

.dm-focus-check input[b-5x6p4m6gmr] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
}

.dm-focus-count[b-5x6p4m6gmr] {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
/* /Components/DataView/ActionTypeAdvanced.razor.rz.scp.css */
.action-type-advanced[b-ig3ldokz8h] { color: var(--text-primary); }
.action-type-advanced p[b-ig3ldokz8h] { color: var(--text-secondary); }
.advanced-section[b-ig3ldokz8h] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-4, 1rem);
    margin-bottom: var(--space-4, 1rem);
}
.advanced-section h3[b-ig3ldokz8h] { margin-bottom: var(--space-3, .75rem); }
.advanced-fields[b-ig3ldokz8h] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4, 1rem); }
.advanced-field[b-ig3ldokz8h] { min-width: 0; }
.advanced-field-wide[b-ig3ldokz8h] { grid-column: 1 / -1; }
.advanced-field label[b-ig3ldokz8h] { display: block; font-weight: 600; margin-bottom: var(--space-2, .5rem); }
.advanced-field :is(.form-select, .form-control)[b-ig3ldokz8h] { width: 100%; background-color: var(--bg-card); color: var(--text-primary); border-color: var(--border-interactive) !important; }
.advanced-browse[b-ig3ldokz8h] { display: flex; align-items: stretch; gap: var(--space-2, .5rem); }
.advanced-browse .form-control[b-ig3ldokz8h] { min-width: 0; flex: 1; }
.advanced-browse button[b-ig3ldokz8h] { flex-shrink: 0; white-space: nowrap; }
.advanced-check[b-ig3ldokz8h] { display: flex; align-items: flex-start; gap: var(--space-2, .5rem); }
.advanced-check input[b-ig3ldokz8h] { flex-shrink: 0; border-color: var(--border-interactive); }
.advanced-check input:checked[b-ig3ldokz8h] { background-color: var(--accent-success-fill); }
.advanced-hint[b-ig3ldokz8h] { font-size: var(--text-sm, .8125rem); margin: var(--space-2, .5rem) 0 0; }
.advanced-sub-entity[b-ig3ldokz8h] { max-width: 32rem; margin-bottom: var(--space-4, 1rem); }
.action-type-advanced :is(input, select, button):focus-visible[b-ig3ldokz8h] { outline: 2px solid var(--accent-success-fill); outline-offset: 2px; }
@media (max-width: 767.98px) { .advanced-fields[b-ig3ldokz8h] { grid-template-columns: minmax(0, 1fr); } }
/* /Components/DataView/AddMultiplePhotosModal.razor.rz.scp.css */
/* Bulk photo upload dialog. Follows DESIGN_LANGUAGE.md: shared AmxModal chrome, flat fills, no
   gradients, hairline seams, a single green accent, and the spacing/radius scale.

   Colours come from the global semantic tokens in wwwroot/app.css, which already carry their
   dark-theme values - so no hard-coded colours and no separate dark-mode rules. */

/* ===== HEADER ===== */

.amp-head[b-bibx7fh32v] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.amp-head__text[b-bibx7fh32v] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.amp-head__title[b-bibx7fh32v] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Quiet caption under the title - says where the batch is going, so the dialog does not have to
   repeat it in the body. */
.amp-head__subtitle[b-bibx7fh32v] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* Local accent-ring / accent-wash values. The global --accent-wash is BLUE, and the design
   language mandates a single GREEN accent - so the focus ring and the drag-over tint are hung off
   the green accent here, the same way dashboard-designer.css defines --dbd-accent-ring. Declared on
   both roots because AmxModal renders header, body and footer as separate subtrees. */
.amp-body[b-bibx7fh32v],
.amp-lookup-body[b-bibx7fh32v] {
    --amp-accent-ring: 0 0 0 3px rgba(21, 128, 61, .25);
    --amp-accent-soft: rgba(21, 128, 61, .10);
}

[data-theme="dark"] .amp-body[b-bibx7fh32v],
[data-theme="dark"] .amp-lookup-body[b-bibx7fh32v] {
    --amp-accent-ring: 0 0 0 3px rgba(34, 197, 94, .35);
    --amp-accent-soft: rgba(34, 197, 94, .14);
}

/* ===== BODY / TWO-PANE LAYOUT ===== */

.amp-body[b-bibx7fh32v] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    color: var(--text-primary);
}

/* Details on the left, the drop zone and its running record on the right. Collapses to one column
   below the breakpoint (and at 200% zoom), where the steps simply stack in order. */
.amp-panes[b-bibx7fh32v] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 900px) {
    .amp-panes[b-bibx7fh32v] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.amp-pane[b-bibx7fh32v] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

/* The seam between the two steps is a hairline, not a card edge - the modal surface is already
   the card. */
@media (min-width: 901px) {
    .amp-pane--upload[b-bibx7fh32v] {
        padding-left: 1.25rem;
        border-left: 1px solid var(--border-color);
    }
}

.amp-pane__head[b-bibx7fh32v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Numbered step marker: the batch is a two-step job and the order matters (details gate the
   picker), so the sequence is stated rather than implied by position alone. */
.amp-step[b-bibx7fh32v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--accent-success-fill);
    /* Literal white, as app.css does on every accent fill: --accent-success-fill is deliberately the
       same value in both themes so the ink on it must not follow the theme. */
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 600;
    flex-shrink: 0;
}

.amp-pane__hint[b-bibx7fh32v] {
    margin: 0.25rem 0 0.75rem 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* ===== FIELDS ===== */

.amp-fields[b-bibx7fh32v] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.amp-field[b-bibx7fh32v] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.amp-field__label[b-bibx7fh32v] {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Spelled out rather than a bare asterisk: colour and punctuation are not the only signal. */
.amp-field__required[b-bibx7fh32v] {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--accent-danger-text);
}

.amp-input[b-bibx7fh32v] {
    width: 100%;
    padding: 0.5rem 0.625rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
    transition: border-color 100ms ease, box-shadow 100ms ease;
}

.amp-input[b-bibx7fh32v]::placeholder {
    color: var(--text-muted);
}

.amp-input:focus-visible[b-bibx7fh32v] {
    outline: none;
    border-color: var(--accent-success-fill);
    box-shadow: var(--amp-accent-ring);
}

.amp-input:disabled[b-bibx7fh32v],
.amp-input[readonly][b-bibx7fh32v] {
    background: var(--bg-secondary);
}

.amp-textarea[b-bibx7fh32v] {
    resize: vertical;
    min-height: 4.5rem;
}

.amp-field.is-invalid .amp-input[b-bibx7fh32v] {
    border-color: var(--accent-danger-text);
}

.amp-field__error[b-bibx7fh32v] {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.75rem;
    color: var(--accent-danger-text);
}

/* Lookup row: read-only value joined to the picker button. */
.amp-lookup[b-bibx7fh32v] {
    display: flex;
    gap: 0.375rem;
}

.amp-lookup__value[b-bibx7fh32v] {
    flex: 1 1 auto;
    min-width: 0;
}

.amp-lookup__btn[b-bibx7fh32v] {
    flex: 0 0 auto;
    min-width: 2.5rem;
}

.amp-check[b-bibx7fh32v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.amp-check__input[b-bibx7fh32v] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--accent-success-fill);
}

.amp-empty-note[b-bibx7fh32v] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0;
    padding: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

/* ===== DROP ZONE ===== */

/* Standing condition, not an action outcome: it stays true until the details are filled in, which
   is exactly what DESIGN_LANGUAGE.md still allows an in-page note to say. */
.amp-blocked[b-bibx7fh32v] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0 0 0.75rem 0;
    padding: 0.6rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm);
}

.amp-drop[b-bibx7fh32v] {
    position: relative;
    border: 2px dashed var(--border-interactive);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    transition: border-color 100ms ease, background 100ms ease;
}

/* The `dragging` class is added by AmxInitFileDropZone while a drag is over the zone. */
.amp-drop.dragging[b-bibx7fh32v] {
    border-color: var(--accent-success-fill);
    background: var(--amp-accent-soft);
}

/* The file input is the focusable control, so the ring belongs on the zone around it. */
.amp-drop:focus-within[b-bibx7fh32v] {
    border-color: var(--accent-success-fill);
    box-shadow: var(--amp-accent-ring);
}

.amp-drop.is-disabled[b-bibx7fh32v] {
    opacity: .5;
}

/* The real <input type="file"> covers the whole zone: clicking anywhere opens the picker, drops
   land on the input itself, and the visible face below is its <label> (so it keeps a real
   accessible name). */
.amp-drop__input[b-bibx7fh32v] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.amp-drop.is-disabled .amp-drop__input[b-bibx7fh32v] {
    cursor: default;
}

.amp-drop__face[b-bibx7fh32v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin: 0;
    padding: 1.75rem 1rem 0.35rem 1rem;
    text-align: center;
    cursor: pointer;
}

.amp-drop.is-disabled .amp-drop__face[b-bibx7fh32v] {
    cursor: default;
}

.amp-drop__icon[b-bibx7fh32v] {
    font-size: 1.5rem;
    color: var(--accent-success-text);
}

.amp-drop__title[b-bibx7fh32v] {
    font-size: 0.875rem;
    font-weight: 550;
    color: var(--text-primary);
}

.amp-drop__hint[b-bibx7fh32v] {
    margin: 0;
    padding: 0 1rem 1.75rem 1rem;
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* ===== PROGRESS ===== */

/* Reserved height so the panel does not jump as the batch starts and finishes. */
.amp-progress-slot[b-bibx7fh32v] {
    min-height: 2.25rem;
    display: flex;
    align-items: center;
    padding-top: 0.75rem;
}

.amp-progress[b-bibx7fh32v] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
}

.amp-progress__label[b-bibx7fh32v] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.amp-progress__track[b-bibx7fh32v] {
    height: 6px;
    width: 100%;
    border-radius: 999px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.amp-progress__fill[b-bibx7fh32v] {
    height: 100%;
    background: var(--accent-success-fill);
    transition: width 150ms ease;
}

/* ===== RESULTS ===== */

.amp-results[b-bibx7fh32v] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.amp-result[b-bibx7fh32v] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
}

/* Status is carried by the icon and the wording as well as the colour. */
.amp-result__icon[b-bibx7fh32v] {
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.amp-result.is-ok .amp-result__icon[b-bibx7fh32v] {
    color: var(--accent-success-text);
}

.amp-result.is-failed .amp-result__icon[b-bibx7fh32v] {
    color: var(--accent-danger-text);
}

.amp-result__text[b-bibx7fh32v] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.amp-result__name[b-bibx7fh32v] {
    font-size: 0.8rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-result__status[b-bibx7fh32v] {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.amp-result.is-failed .amp-result__status[b-bibx7fh32v] {
    color: var(--accent-danger-text);
}

/* ===== LOADING / EMPTY ===== */

.amp-state[b-bibx7fh32v] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    text-align: center;
}

.amp-state__icon[b-bibx7fh32v] {
    font-size: 1.75rem;
    color: var(--text-muted);
}

.amp-state__text[b-bibx7fh32v] {
    margin: 0;
    color: var(--text-secondary);
}

/* ===== FOOTER ===== */

.amp-footer[b-bibx7fh32v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    flex-wrap: wrap;
}

.amp-footer__status[b-bibx7fh32v] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.amp-footer__status .fa-circle-check[b-bibx7fh32v] {
    color: var(--accent-success-text);
}

.amp-footer__actions[b-bibx7fh32v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.amp-footer__actions--full[b-bibx7fh32v] {
    width: 100%;
    justify-content: flex-end;
}

.amp-footer__actions .btn[b-bibx7fh32v] {
    gap: 6px;
}

/* ===== LOOKUP PICKER ===== */

.amp-lookup-body[b-bibx7fh32v] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    min-height: 0;
}

.amp-lookup-search[b-bibx7fh32v] {
    display: flex;
    gap: 0.375rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.amp-lookup-search__input[b-bibx7fh32v] {
    flex: 1 1 auto;
    min-width: 0;
}

.amp-lookup-list[b-bibx7fh32v] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.amp-lookup-row[b-bibx7fh32v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem;
}

/* Label kept for screen readers where the control's purpose is already obvious on screen. */
.amp-visually-hidden[b-bibx7fh32v] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/DataView/AdvancedSettingsSummary.razor.rz.scp.css */
.advanced-summary[b-dmystwaebv] {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-3, .75rem) var(--space-4, 1rem);
    margin: var(--space-2, .5rem) 0;
}
.advanced-summary h2[b-dmystwaebv] { margin-bottom: var(--space-2, .5rem); }
.advanced-summary-items[b-dmystwaebv] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2, .5rem) var(--space-4, 1rem); margin: 0; }
.advanced-summary-item[b-dmystwaebv] { min-width: 0; overflow-wrap: anywhere; }
.advanced-summary-item dt[b-dmystwaebv] { color: var(--text-secondary); font-size: var(--text-sm, .8125rem); font-weight: 600; }
.advanced-summary-item dd[b-dmystwaebv] { margin: 0; }
@media (max-width: 767.98px) { .advanced-summary-items[b-dmystwaebv] { grid-template-columns: minmax(0, 1fr); } }
/* /Components/DataView/AmxButton.razor.rz.scp.css */
.button-wrapper.alert-danger .form-control[b-kbtrocr0wh] {
    background-color: white !important;
}

.form-control[b-kbtrocr0wh] {
    min-height: 44px;
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    transition: all 0.2s ease;
}

    .form-control.readonly[b-kbtrocr0wh] {
        background-color: #f8fafc;
        border-color: #d1d5db;
    }

ul[b-kbtrocr0wh] {
    list-style: none;
    margin: 0 !important;
}

/* ── Link control, not shown as a button ──────────────────────────────
   The shared .amx-field shell (wwwroot/css/amx-field.css) holds the link, so the control
   reads as a field on the form rather than a full-width button. The link itself takes the
   app's link style (.amx-external-link in app.css) without the leaves-the-app icon - most
   of these go somewhere inside the app. */
/* Sized to its content, exactly as the button variant is (see the inline style block):
   a cell spanning two rows shouldn't stretch the box down the whole row. */
.amx-field[b-kbtrocr0wh] {
    height: fit-content;
}

.amx-field-link[b-kbtrocr0wh] {
    justify-content: flex-start;
    border: 0;
    background-color: transparent;
    color: var(--accent-link, #2563eb);
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    cursor: pointer;
}

.amx-field-link:hover[b-kbtrocr0wh] {
    text-decoration-thickness: 2px;
}

.amx-field-link.is-success[b-kbtrocr0wh] {
    color: var(--accent-success-text, #15803d);
}

/* A glyph before the caption, in both the button and the link renderings. */
.amx-btn-icon[b-kbtrocr0wh] {
    margin-right: 0.45rem;
    font-size: 0.95em;
}

.amx-field-link:disabled[b-kbtrocr0wh] {
    opacity: .5;
    cursor: default;
}

/* Inset, so the shell's overflow doesn't clip the ring. */
.amx-field-link:focus-visible[b-kbtrocr0wh] {
    outline: 2px solid var(--accent-primary, #2563eb);
    outline-offset: -2px;
}
/* /Components/DataView/AmxCheckBox.razor.rz.scp.css */
.form-check[b-9ezb8o4ye8] {
    align-items: center;
    display: flex;
    gap: 12px;
    width: 100%;
    height: 100%;
    overflow: auto;
    margin: 0 !important;
    padding: 8px 0;
}

/* Drawn rather than left to the browser. A native checkbox is painted in the browser's own light
   palette whatever theme the app is in, so on a dark form it appeared as a pale widget; and its
   disabled state washes out so far that a reader cannot tell a ticked box from an empty one - which
   matters here, because in view mode the value is the whole point of the control. */
.form-check input[type="checkbox"][b-9ezb8o4ye8] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    display: inline-grid;
    place-content: center;
    width: 20px;
    height: 20px;
    margin: 0 !important;
    padding: 0;
    background-color: var(--bg-input, #ffffff);
    /* --field-border, matching .amx-field in amx-field.css: a form control's resting edge is a
       shade stronger than the app's general --border-interactive outline and is tuned on its own
       token. The weight stays at 1.5px - a 20px box needs it to read at the same strength as the
       1px edge around a 44px field beside it. */
    border: 1.5px solid var(--field-border, #5f6673);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.form-check input[type="checkbox"][b-9ezb8o4ye8]::before {
    content: "";
    width: 12px;
    height: 12px;
    background-color: var(--text-on-accent, #ffffff);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transition: transform 110ms ease;
}

.form-check input[type="checkbox"]:checked[b-9ezb8o4ye8] {
    background-color: var(--accent-primary, #2563eb);
    border-color: var(--accent-primary, #2563eb);
}

.form-check input[type="checkbox"]:checked[b-9ezb8o4ye8]::before {
    transform: scale(1);
}

.form-check input[type="checkbox"]:hover:not(:disabled)[b-9ezb8o4ye8] {
    border-color: var(--accent-primary, #2563eb);
}

.form-check input[type="checkbox"]:focus-visible[b-9ezb8o4ye8] {
    outline: 2px solid var(--accent-primary, #2563eb);
    outline-offset: 2px;
}

/* View mode and read-only fields. Full opacity deliberately: the affordances go, the value stays
   legible. An unticked box reads as an empty well, a ticked one keeps its fill. */
.form-check input[type="checkbox"]:disabled[b-9ezb8o4ye8] {
    opacity: 1;
    /* Bootstrap turns pointer events off on a disabled box, which takes the hover below with them.
       The box stays disabled, so it still cannot be focused, clicked or changed. */
    pointer-events: auto;
    cursor: default;
}

/* View mode. The same edge as the field shell in view mode (.amx-field.is-view in amx-field.css),
   so a checkbox reads as the same kind of thing as the text box beside it: a quiet hairline at rest,
   darkening under the pointer. */
.form-check input[type="checkbox"]:disabled:not(.is-readonly)[b-9ezb8o4ye8] {
    background-color: var(--bg-card, #ffffff);
    /* --field-border-view, the same quiet edge .amx-field.is-view uses. --border-color is the
       hairline every panel, card and divider draws with, which on a readout all but disappears. */
    border-color: var(--field-border-view, #aeb3bd);
}

/* Only the empty box has anywhere to go - a ticked one is already drawn at full strength. */
.form-check input[type="checkbox"]:disabled:not(.is-readonly):hover:not(:checked)[b-9ezb8o4ye8] {
    border-color: var(--field-border, #5f6673);
}

.form-check input[type="checkbox"]:disabled:not(.is-readonly):checked[b-9ezb8o4ye8] {
    background-color: var(--accent-primary, #2563eb);
    border-color: var(--accent-primary, #2563eb);
    filter: none;
}

/* Read-only field on a form that IS being edited. The rule above is tuned for view mode, where
   every control is disabled and there is nothing to compare against; here the box sits next to
   editable ones, and a faintly desaturated tick is not a difference anyone notices. So the
   interactive look goes entirely: a dashed hairline instead of a solid well, and the tick drawn in
   muted ink rather than filled with the accent. The shape carries the meaning, not just the colour
   (WCAG 1.4.1), and the value stays perfectly legible either way. */
.form-check input[type="checkbox"].is-readonly[b-9ezb8o4ye8],
.form-check input[type="checkbox"].is-readonly:checked[b-9ezb8o4ye8] {
    background-color: var(--bg-secondary, #eef1f8);
    /* --field-border, not the faint hairline: on a grey fill a hairline dash is invisible and the
       "locked" signal is lost. Same edge as the editable box, with only the dash pattern changing -
       exactly what .amx-field.is-readonly does. */
    border: 1.5px dashed var(--field-border, #5f6673);
    cursor: not-allowed;
    filter: none;
}

.form-check input[type="checkbox"].is-readonly[b-9ezb8o4ye8]::before {
    background-color: var(--text-secondary, #5b6577);
}

.form-check-label[b-9ezb8o4ye8] {
    opacity: 1 !important;
    margin: 0 !important;
    font-size: 0.875rem;
    color: var(--text-primary, #0f172a);
    font-weight: 400;
    line-height: 1.5;
}

label:not(.form-check-label)[b-9ezb8o4ye8] {
    min-width: 10%;
    width: 100%;
    max-width: 25%;
    text-overflow: ellipsis;
    overflow: auto;
}

@media (prefers-reduced-motion: reduce) {
    .form-check input[type="checkbox"][b-9ezb8o4ye8],
    .form-check input[type="checkbox"][b-9ezb8o4ye8]::before {
        transition: none;
    }
}
/* /Components/DataView/AmxDatePicker.razor.rz.scp.css */
/* The field itself is the shared .amx-field shell (wwwroot/css/amx-field.css). The date and
   time inputs and their quick-set buttons live inside it, so the bordered-box-per-part rules
   that used to be here are gone - along with their hard-coded greys and blue focus ring, which
   never followed the theme. */

/* The time half only needs room for hh:mm, so it does not take an equal share of the row. */
.amx-field-time[b-ga6ny9ee9v] {
    flex: 0 0 auto;
    min-width: 92px;
}

/* Native date/time inputs paint their own picker glyph in the browser's palette; on a dark
   form that leaves a black icon on a dark field. */
[data-theme="dark"] .amx-field-value[b-ga6ny9ee9v]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.65);
}

.amx-field-value[b-ga6ny9ee9v]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
}

.amx-field-value[b-ga6ny9ee9v]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* The bulk-schedule toggle sits beside the field rather than in it. */
.date-button-input[b-ga6ny9ee9v] {
    min-height: var(--amx-field-min-height, 44px);
    height: auto;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    white-space: nowrap;
}
/* /Components/DataView/AmxDiagramView.razor.rz.scp.css */
.photo-box-wrapper .photo-wrapper[b-b9zkyecgfh] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    overflow: hidden;
    gap: 10px;
}

.photo-box-wrapper.diagram-auto-height .photo-wrapper[b-b9zkyecgfh],
.photo-box-wrapper.diagram-auto-height[b-b9zkyecgfh]  .photo-wrapper {
    height: auto;
}

.photo-box-wrapper.diagram-auto-height[b-b9zkyecgfh]  .amx-photo {
    height: auto !important;
}

.photo-box-wrapper.diagram-auto-height[b-b9zkyecgfh]  .amx-photo > img {
    flex-shrink: 0;
}

/* The field border language, the same set .amx-field and .amx-grid-wrapper carry - this control
   is a form control too, and only had Bootstrap's much paler .form-control default, so it read
   as a lighter box among the fields around it.

   !important throughout because app.css's `[data-theme="dark"] .form-control` and
   `.form-control:focus` rules are themselves !important and would otherwise take the dark-mode
   cases out of this file's hands. Order matches amx-field.css so the cascade resolves the same
   way - .is-view after :focus-within, which is what leaves a focused readout with the ring but
   not the accent edge. */
.photo-box-wrapper .photo-wrapper[b-b9zkyecgfh] {
    border: 1px solid var(--field-border, #5f6673) !important;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.photo-box-wrapper .photo-wrapper:hover:not(.is-view)[b-b9zkyecgfh] {
    border-color: var(--accent-primary, #2563eb) !important;
}

.photo-box-wrapper .photo-wrapper:focus-within[b-b9zkyecgfh] {
    border-color: var(--accent-primary, #2563eb) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 37, 99, 235), 0.15);
}

/* View mode: a readout, not a field. Hover lifts it only as far as --field-border - there is no
   edit to invite. */
.photo-box-wrapper .photo-wrapper.is-view[b-b9zkyecgfh] {
    border-color: var(--field-border-view, #aeb3bd) !important;
}

.photo-box-wrapper .photo-wrapper.is-view:hover[b-b9zkyecgfh] {
    border-color: var(--field-border, #5f6673) !important;
}

.photo-box-wrapper .photo-options-wrapper[b-b9zkyecgfh] {
    display: flex;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
}

.photo-box-wrapper .photo-options-wrapper > .btn[b-b9zkyecgfh] {
    max-width: 300px;
}
/* /Components/DataView/AmxElementInspection.razor.rz.scp.css */
.amx-element-inspection-wrapper[b-47xk94f7ge] {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* The table area. It fills the control, and the control is no longer capped at the box its row
   span reserved (see IsContentSizedComponent in DataViewControls), so the inspection grid grows
   down the tab to fit its rows. overflow stays for the horizontal axis - a wide inspection table
   still scrolls sideways. */
.inspection-table-wrapper[b-47xk94f7ge] {
    border: 1px solid #d1d5db;
    width: 100%;
    height: 100%;
    overflow: auto;
}

[b-47xk94f7ge] table {
    border-collapse: collapse;
    width: 100%;
    table-layout: auto;
}

[b-47xk94f7ge] th, [b-47xk94f7ge] td {
    border: 1px solid black !important;
    padding: 8px;
    text-align: left;
}

[b-47xk94f7ge] tr {
    border-bottom: 1px solid black !important; /* Border between rows */
}

[b-47xk94f7ge] tr:hover {
    background-color: #f1f1f1 !important; /* Highlight row on hover */
}

[b-47xk94f7ge] .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

[b-47xk94f7ge] .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

[b-47xk94f7ge] .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #2196F3;
    transition: .4s;
    border-radius: 34px;
}

[b-47xk94f7ge] .slider:before {
    position: absolute;
    content: '';
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

[b-47xk94f7ge] input:checked + .slider {
    background-color: #008000;
}

[b-47xk94f7ge] input:checked + .slider:before {
    transform: translateX(26px);
}

[b-47xk94f7ge] .circular-toggle {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 34px;
}

[b-47xk94f7ge] .circular-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

[b-47xk94f7ge] .circular-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: .4s;
    border-radius: 50%;
}

[b-47xk94f7ge] .circular-slider:before {
    position: absolute;
    content: '';
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    transition: .4s;
    border-radius: 50%;
}

/* The multi-line cell readout. A plain <textarea>, so it needs the browser defaults taken off
   it to sit in a table cell the way the old third-party textbox did: no border or chrome, the
   cell's own font, and no resize grip on what is a read-only display. */
[b-47xk94f7ge] .multi-line-text-area {
    border: none !important;
    padding: 0;
    margin: 0;
    resize: none;
    outline: none;
    font: inherit;
    color: inherit;
    overflow: auto;
    min-height: 100%;
    cursor: inherit;
}

/* Value editor in the Edit Value modal. */
.aei-text-editor[b-47xk94f7ge] {
    width: 100%;
    min-height: 220px;
    padding: 8px 10px;
    border: 1px solid var(--border-color, #d4d4d8);
    border-radius: var(--radius-md, 8px);
    background-color: var(--bg-card, #ffffff);
    color: var(--text-primary, #18181b);
    font: inherit;
    font-size: .875rem;
    resize: vertical;
    transition: border-color 100ms ease, box-shadow 100ms ease;
}

.aei-text-editor:focus[b-47xk94f7ge] {
    outline: none;
    border-color: var(--accent-primary, #15803d);
    box-shadow: 0 0 0 3px rgba(21, 128, 61, .15);
}

.aei-text-editor[b-47xk94f7ge]::placeholder {
    color: var(--text-muted, #71717a);
}

[b-47xk94f7ge] .grid-cell-template {
    height: 50px;
    white-space: nowrap;
    padding: 10px;
    background-color: white;
}

[b-47xk94f7ge] .grid-cell-template .photo-cell-container {
    display: block;
    height: 100%;
    max-height: 70px;
    width: auto;
    overflow: hidden;
}
/* /Components/DataView/AmxFieldContextMenu.razor.rz.scp.css */
/* Right-click menu for a view-mode field readout. Same shape and weights as the grid's row menu
   (DataGrid.razor.css), so the two read as one thing wherever a right-click lands. */

/* The menu sits beside the readout in the DOM, so a selection spanning the field can include
   its labels as well. Keep the actions out of text selection without clearing the field's
   highlight, which "Copy highlighted" still needs. This also covers callers' extra items. */
.field-menu[b-ld8vvdiena],
.field-menu-backdrop[b-ld8vvdiena] {
    -webkit-user-select: none;
    user-select: none;
}

.field-menu-backdrop[b-ld8vvdiena] {
    position: fixed;
    inset: 0;
    /* Under the menu, over everything else - including a DataView hosted in a modal. */
    z-index: 1080;
    background: transparent;
}

.field-menu[b-ld8vvdiena] {
    position: fixed;
    /* Placed by AmxPositionAtPoint once measured; these are the pre-measurement origin. */
    top: 0;
    left: 0;
    z-index: 1081;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* Focused programmatically on open so the arrow keys work straight away; that focus is a landing
   point rather than a control, so it needs no ring of its own. */
.field-menu:focus[b-ld8vvdiena] {
    outline: none;
}

/* ::deep, because a caller's extra items are declared in the caller's markup and so carry its scope
   attribute rather than this component's - without it they would render unstyled beside ours. The
   selector still matches this component's own items, which are plain descendants of .field-menu. */
.field-menu[b-ld8vvdiena]  .field-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    /* Past the 24x24 WCAG 2.2 target minimum. */
    min-height: 32px;
    padding: 8px 10px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    /* An item may be a real anchor - the breadcrumb's "open in a new tab" is a link, not a
       scripted window.open - so the link underline has to come off. */
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.field-menu[b-ld8vvdiena]  .field-menu-item i {
    width: 14px;
    text-align: center;
    color: var(--text-secondary);
}

.field-menu[b-ld8vvdiena]  .field-menu-label {
    flex: 1;
    min-width: 0;
}

.field-menu[b-ld8vvdiena]  .field-menu-item:hover:not(:disabled) {
    background: var(--bg-hover);
}

.field-menu[b-ld8vvdiena]  .field-menu-item:focus-visible {
    background: var(--bg-hover);
    outline: none;
    box-shadow: inset 0 0 0 2px var(--accent-primary);
}

/* Kept in place rather than hidden, so the menu is the same shape whether or not the field holds
   a value - and the reason the item cannot be used is obvious from the field itself. */
.field-menu[b-ld8vvdiena]  .field-menu-item:disabled {
    opacity: 0.5;
    cursor: default;
}

.field-menu[b-ld8vvdiena]  .field-menu-sep {
    height: 1px;
    margin: 4px 0;
    background: var(--border-color);
}
/* /Components/DataView/AmxFieldHistory.razor.rz.scp.css */
/* Field-level change history. Same language as the record-wide audit trail and the raw data modal:
   design tokens only (so light and dark both work), bordered surfaces, muted supporting text and
   the app's `.dbd-btn` buttons. */

/* ── Header ───────────────────────────────────────────────────────────── */
.fh-header[b-2leen5t31l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.fh-title[b-2leen5t31l] {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-width: 0;
}

.fh-title > i[b-2leen5t31l] {
    margin-top: 0.2rem;
    color: var(--accent-primary);
}

.fh-heading[b-2leen5t31l] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.fh-subtitle[b-2leen5t31l] {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
}

.fh-count[b-2leen5t31l] {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ── Page ─────────────────────────────────────────────────────────────── */
.fh-page[b-2leen5t31l] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Loading ──────────────────────────────────────────────────────────── */
.fh-skeleton[b-2leen5t31l] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fh-skeleton-stage[b-2leen5t31l],
.fh-skeleton-track[b-2leen5t31l],
.fh-skeleton-row[b-2leen5t31l] {
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    animation: fh-pulse-b-2leen5t31l 1.4s ease-in-out infinite;
}

.fh-skeleton-stage[b-2leen5t31l] {
    height: 7rem;
}

.fh-skeleton-track[b-2leen5t31l] {
    height: 3rem;
}

.fh-skeleton-row[b-2leen5t31l] {
    height: 2.25rem;
}

@keyframes fh-pulse-b-2leen5t31l {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

/* Respect a reduced-motion preference: the pulse is decoration, not information. */
@media (prefers-reduced-motion: reduce) {
    .fh-skeleton-stage[b-2leen5t31l],
    .fh-skeleton-track[b-2leen5t31l],
    .fh-skeleton-row[b-2leen5t31l] {
        animation: none;
    }
}

/* ── Empty / locked states ────────────────────────────────────────────── */
.fh-empty[b-2leen5t31l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-secondary);
}

.fh-empty > i[b-2leen5t31l] {
    font-size: 1.5rem;
    color: var(--text-muted);
}

.fh-empty small[b-2leen5t31l] {
    color: var(--text-muted);
}

/* ── Archived notice ──────────────────────────────────────────────────── */
.fh-notice[b-2leen5t31l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-warning);
    border-radius: var(--radius-md);
    background-color: var(--bg-card);
}

.fh-notice > i[b-2leen5t31l] {
    color: var(--accent-warning);
}

.fh-notice-body[b-2leen5t31l] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fh-notice-title[b-2leen5t31l] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.fh-notice-body small[b-2leen5t31l] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.fh-notice-toggle[b-2leen5t31l] {
    margin-left: auto;
    margin-bottom: 0;
}

/* ── The value stage ──────────────────────────────────────────────────── */
.fh-stage[b-2leen5t31l] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background-color: var(--bg-card);
}

.fh-stage-head[b-2leen5t31l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fh-stage-label[b-2leen5t31l] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.fh-stage-value[b-2leen5t31l] {
    min-height: 2.25rem;
    max-height: 11rem;
    overflow-y: auto;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-primary);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.fh-value-empty[b-2leen5t31l] {
    font-style: italic;
    color: var(--text-muted);
}

.fh-stage-meta[b-2leen5t31l] {
    display: flex;
    align-items: center;
    gap: 0.25rem 1rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-light);
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.fh-meta-item[b-2leen5t31l] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.fh-meta-item i[b-2leen5t31l] {
    color: var(--text-muted);
}

/* ── From → to ────────────────────────────────────────────────────────── */
.fh-diff[b-2leen5t31l] {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.fh-diff-side[b-2leen5t31l] {
    flex: 1 1 12rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    font-size: 0.85rem;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.fh-diff-label[b-2leen5t31l] {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

/* A left border rather than a fill: the accent stays the one green, and the two sides are told
   apart by position and label rather than by colour alone. */
.fh-diff-old[b-2leen5t31l] {
    border-left: 3px solid var(--border-interactive);
}

.fh-diff-new[b-2leen5t31l] {
    border-left: 3px solid var(--accent-primary);
}

.fh-diff-arrow[b-2leen5t31l] {
    align-self: center;
    color: var(--text-muted);
}

/* ── Track ────────────────────────────────────────────────────────────── */
.fh-track[b-2leen5t31l] {
    padding: 0.6rem 0.85rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background-color: var(--bg-card);
}

.fh-track-controls[b-2leen5t31l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fh-slider[b-2leen5t31l] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0.35rem;
}

.fh-range[b-2leen5t31l] {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
}

.fh-range:focus-visible[b-2leen5t31l] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Ticks sit behind the slider thumb and mark each recorded change. Decorative - the slider, the
   step buttons and the table below are the ways to move. */
.fh-ticks[b-2leen5t31l] {
    position: absolute;
    top: 0.95rem;
    left: 0;
    right: 0;
    height: 0;
    pointer-events: none;
}

.fh-tick[b-2leen5t31l] {
    position: absolute;
    width: 2px;
    height: 8px;
    margin-left: -1px;
    border-radius: 1px;
    background: var(--border-interactive);
}

.fh-tick.is-current[b-2leen5t31l] {
    background: var(--accent-primary);
}

.fh-track-ends[b-2leen5t31l] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* ── The list ─────────────────────────────────────────────────────────── */
.fh-list[b-2leen5t31l] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 0;
}

.fh-list-head[b-2leen5t31l] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.fh-table-wrapper[b-2leen5t31l] {
    max-height: 20rem;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.fh-table[b-2leen5t31l] {
    margin: 0;
    font-size: 0.82rem;
}

.fh-table thead th[b-2leen5t31l] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    white-space: nowrap;
}

.fh-table td[b-2leen5t31l] {
    color: var(--text-primary);
    vertical-align: top;
    overflow-wrap: anywhere;
}

.fh-col-when[b-2leen5t31l],
.fh-col-source[b-2leen5t31l] {
    white-space: nowrap;
}

.fh-row[b-2leen5t31l] {
    cursor: pointer;
}

.fh-row:hover[b-2leen5t31l] {
    background: var(--bg-hover);
}

/* The row's keyboard control. Looks like the cell text it replaces, but is a real button - past the
   24x24 WCAG 2.2 target minimum, with a visible focus ring. */
.fh-jump[b-2leen5t31l] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.fh-jump:hover[b-2leen5t31l] {
    text-decoration: underline;
}

.fh-jump:focus-visible[b-2leen5t31l] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* The selected row is marked by a bar and a tinted fill, not colour alone - it also carries
   aria-current for anyone not seeing either. */
.fh-row.is-selected[b-2leen5t31l] {
    background: var(--accent-wash);
    box-shadow: inset 3px 0 0 0 var(--accent-primary);
}

.fh-cell-old[b-2leen5t31l] {
    color: var(--text-secondary);
}

.fh-dash[b-2leen5t31l] {
    color: var(--text-muted);
}

/* ── Chips ────────────────────────────────────────────────────────────── */
.fh-chip[b-2leen5t31l] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-secondary);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Accent as an outline and a wash, with the text left on the primary token: the vivid accent is
   not a text colour, and the chip still has to clear 4.5:1 in both themes. */
.fh-chip-now[b-2leen5t31l] {
    border-color: var(--accent-primary);
    background: var(--accent-wash);
    color: var(--text-primary);
}

.fh-chip-sensitive[b-2leen5t31l] {
    border-color: var(--accent-warning);
    color: var(--accent-warning-text);
}
/* /Components/DataView/AmxFileBrowser.razor.rz.scp.css */
/* The file browser control: the chosen file in the same .amx-field shell as every other DataView
   control, and a drop zone under it while a file is being chosen. Flat fills, hairline borders and
   the global tokens, as DESIGN_LANGUAGE.md asks; sizes written out because the --space-* scale is
   only declared on the designer pages. */

.afb[b-8km70ed7v5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
}

.afb-value-main[b-8km70ed7v5] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.afb-file-icon[b-8km70ed7v5] {
    flex: 0 0 auto;
    color: var(--text-secondary);
}

.afb-file-text[b-8km70ed7v5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.afb-file-name[b-8km70ed7v5] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.afb-file-meta[b-8km70ed7v5],
.afb-hint[b-8km70ed7v5],
.afb-status[b-8km70ed7v5] {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.afb-hint[b-8km70ed7v5] {
    margin: 0;
}

.afb-chooser[b-8km70ed7v5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.afb-replace-bar[b-8km70ed7v5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.afb-text-btn[b-8km70ed7v5] {
    border: none;
    background: transparent;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    color: var(--accent-success-text);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.afb-text-btn:hover[b-8km70ed7v5] {
    background: var(--bg-hover);
}

.afb-text-btn:focus-visible[b-8km70ed7v5] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 2px;
}

/* The real input covers the zone so a click anywhere, the keyboard and a dropped file reach it;
   the face underneath is only what the eye sees. */
.afb-drop[b-8km70ed7v5] {
    position: relative;
    min-height: 72px;
    border: 1px dashed var(--border-interactive);
    border-radius: 8px;
    background: var(--bg-secondary);
    transition: border-color 100ms ease, background-color 100ms ease;
}

.afb-drop:hover[b-8km70ed7v5],
.afb-drop:focus-within[b-8km70ed7v5] {
    border-color: var(--accent-success-fill);
    background: var(--bg-hover);
}

.afb-drop:focus-within[b-8km70ed7v5] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 2px;
}

.afb-drop.is-uploading[b-8km70ed7v5] {
    opacity: 0.6;
}

/* With a file staged the zone is only the way to swap it, so it drops to a quiet strip. */
.afb-drop.is-staged[b-8km70ed7v5] {
    min-height: 44px;
    border-style: dotted;
    background: transparent;
}

.afb-drop.is-staged .afb-drop-icon[b-8km70ed7v5] {
    display: none;
}

.afb-staged[b-8km70ed7v5] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
}

.afb-staged .afb-file-text[b-8km70ed7v5] {
    flex: 1 1 auto;
}

.afb-drop-input[b-8km70ed7v5] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.afb-drop-input:disabled[b-8km70ed7v5] {
    cursor: default;
}

.afb-drop-face[b-8km70ed7v5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    pointer-events: none;
}

.afb-drop-icon[b-8km70ed7v5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--accent-success-text);
}

.afb-drop-text[b-8km70ed7v5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.afb-drop-title[b-8km70ed7v5] {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.afb-drop-browse[b-8km70ed7v5] {
    color: var(--accent-success-text);
    font-weight: 600;
    text-decoration: underline;
}

.afb-drop-hint[b-8km70ed7v5] {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.afb-progress-row[b-8km70ed7v5] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.afb-progress[b-8km70ed7v5] {
    flex: 1 1 120px;
    height: 8px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.afb-progress-bar[b-8km70ed7v5] {
    height: 100%;
    background: var(--accent-success-fill);
    transition: width 150ms ease;
}

.afb-error[b-8km70ed7v5] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.82rem;
    color: var(--accent-danger-text);
}
/* /Components/DataView/AmxFileUpload.razor.rz.scp.css */
.amx-file-upload-dialog[b-q9dwfh5das] {
    position: fixed;
    max-width: min(24rem, calc(100vw - 2rem));
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.amx-file-upload-dialog[b-q9dwfh5das]::backdrop {
    background: var(--text-primary);
    opacity: 0.45;
}

.amx-file-upload-dialog-content[b-q9dwfh5das] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.amx-file-upload-dialog-content strong[b-q9dwfh5das] {
    font-size: 1rem;
    font-weight: 600;
}

.amx-file-upload-dialog-content span:last-child[b-q9dwfh5das] {
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════
   The file field: upload a file or add a link
   Value row     .amx-field shell (amx-field.css) with flush actions
   Chooser       segmented Upload file / Add link + "What can I add?"
   File mode     drop zone - the real <input type=file> covers it
   Link mode     .amx-field shell with an inline "Add link" action
   Allowed list  popup dialog, grouped extensions + link rules
   Token-driven throughout; dark mode comes from the tokens.
   ═══════════════════════════════════════════════════════════════════════ */

.afu-row[b-q9dwfh5das] {
    flex: 1 1 auto;
    min-height: 0;
}

.afu[b-q9dwfh5das] {
    --afu-accent-soft: rgba(21, 128, 61, .10);
    --afu-accent-ring: 0 0 0 3px rgba(21, 128, 61, .25);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    min-height: 0;
    /* Fits the box it is given: a single row span (about 30px) up to a tall one. The field
       shell's 44px floor and 9px padding are what made it overflow a one-row cell, and the
       stretch below is what makes a taller cell fill instead of leaving the control stuck to
       the top. */
    --amx-field-min-height: 28px;
    --amx-field-padding-y: 2px;
    /* Adapt the compact field to the width of its form column. */
    container-type: inline-size;
}

/* Everything inside takes the height the cell gives it. */
.afu > .afu-value[b-q9dwfh5das],
.afu > .afu-chooser[b-q9dwfh5das] {
    flex: 1 1 auto;
    min-height: 0;
}

[data-theme="dark"] .afu[b-q9dwfh5das] {
    --afu-accent-soft: rgba(34, 197, 94, .14);
    --afu-accent-ring: 0 0 0 3px rgba(34, 197, 94, .35);
}

/* One line: the mode switch, then the drop zone or link field filling the rest. Each part
   carries its own edge, so the chooser needs no box of its own - that box and its padding were
   most of the height. */
.afu-chooser[b-q9dwfh5das] {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
}

.afu-chooser > .afu-drop[b-q9dwfh5das],
.afu-chooser > .afu-link[b-q9dwfh5das] {
    flex: 1 1 0;
    min-width: 0;
}

/* ── The value ───────────────────────────────────────────────────────── */

.afu-value .afu-value-main[b-q9dwfh5das] {
    gap: 0.5rem;
    text-align: left;
    cursor: pointer;
}

.afu-value .afu-value-main:hover .afu-file-name[b-q9dwfh5das] {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* .amx-field-value drops its own ring in favour of the shell's :focus-within, but here the
   shell holds several buttons, so each one marks itself. */
.afu-value .afu-value-main:focus-visible[b-q9dwfh5das],
.afu-value .amx-field-btn:focus-visible[b-q9dwfh5das] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: -3px;
}

.afu-value:focus-within[b-q9dwfh5das] {
    box-shadow: none;
}

.afu-file-icon[b-q9dwfh5das] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.afu-file-text[b-q9dwfh5das] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    line-height: 1.25;
}

.afu-file-name[b-q9dwfh5das] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    flex: 0 1 auto;
    min-width: 3ch;
}

.afu-file-meta[b-q9dwfh5das] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--text-muted);
    flex: 0 100 auto;
}

.afu-value .amx-field-btn:hover:not(:disabled)[b-q9dwfh5das] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.afu-value .afu-remove:hover:not(:disabled)[b-q9dwfh5das] {
    color: var(--accent-danger-text);
}

.afu-value .amx-field-btn:disabled[b-q9dwfh5das] {
    opacity: .5;
    cursor: default;
}

.afu-replace-bar[b-q9dwfh5das] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.5rem;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.afu-text-btn[b-q9dwfh5das] {
    min-height: 24px;
    padding: 2px 4px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--accent-success-text);
    font: inherit;
    font-weight: 550;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.afu-text-btn:focus-visible[b-q9dwfh5das] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: 1px;
}

/* ── Mode switch and help ────────────────────────────────────────────── */

.afu-bar[b-q9dwfh5das] {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    align-self: center;
    gap: 4px;
}

.afu-seg[b-q9dwfh5das] {
    display: inline-flex;
    gap: 2px;
    margin: 0;
    padding: 2px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
}

/* Clipped, not display:none, so the radios keep their tab stop and arrow-key behaviour. */
.afu-seg-input[b-q9dwfh5das] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.afu-seg-label[b-q9dwfh5das] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    margin: 0;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease;
}

.afu-seg-input:checked + .afu-seg-label[b-q9dwfh5das] {
    background: var(--bg-card);
    color: var(--accent-success-text);
    box-shadow: var(--shadow-sm);
}

.afu-seg-input:focus-visible + .afu-seg-label[b-q9dwfh5das] {
    box-shadow: var(--afu-accent-ring);
}

.afu-seg-input:disabled + .afu-seg-label[b-q9dwfh5das] {
    opacity: .5;
    cursor: default;
}

.afu-help[b-q9dwfh5das] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 6px;
    white-space: nowrap;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 550;
    cursor: pointer;
}

.afu-help:hover[b-q9dwfh5das] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.afu-help:focus-visible[b-q9dwfh5das] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: 1px;
}

/* ── File mode: the drop zone ────────────────────────────────────────── */
/* Same pattern as Add Multiple Photos' .amp-drop. */

.afu-drop[b-q9dwfh5das] {
    position: relative;
    display: flex;
    align-items: stretch;
    border: 2px dashed var(--border-interactive);
    border-radius: 8px;
    background: var(--bg-secondary);
    transition: border-color 100ms ease, background 100ms ease;
}

.afu-drop.dragging[b-q9dwfh5das] {
    border-color: var(--accent-success-fill);
    background: var(--afu-accent-soft);
}

/* The file input is the focusable control, so the ring belongs on the zone around it. */
.afu-drop:focus-within[b-q9dwfh5das] {
    border-color: var(--accent-success-fill);
    box-shadow: var(--afu-accent-ring);
}

.afu-drop.is-disabled[b-q9dwfh5das] {
    opacity: .5;
}

/* InputFile renders its own <input>, which carries no scope attribute - hence ::deep. */
.afu-drop[b-q9dwfh5das]  .afu-drop-input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.afu-drop.is-disabled[b-q9dwfh5das]  .afu-drop-input {
    cursor: default;
}

.afu-drop-face[b-q9dwfh5das] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0 0.5rem;
}

.afu-drop-icon[b-q9dwfh5das] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--afu-accent-soft);
    color: var(--accent-success-text);
    font-size: 0.75rem;
}

.afu-drop-text[b-q9dwfh5das] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.25;
}

.afu-drop-title[b-q9dwfh5das] {
    font-size: 0.875rem;
    font-weight: 550;
    color: var(--text-primary);
}

.afu-drop-browse[b-q9dwfh5das] {
    color: var(--accent-success-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.afu-drop-hint[b-q9dwfh5das] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Link mode ───────────────────────────────────────────────────────── */

.afu-link[b-q9dwfh5das] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.afu-link > .amx-field[b-q9dwfh5das] {
    flex: 1 1 auto;
}

/* The format hint would add a line under the field, so it floats below it while the field is
   in use instead. It is still the input's description for assistive technology. */
.afu-link > .afu-hint[b-q9dwfh5das] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    display: none;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.afu-link:focus-within > .afu-hint[b-q9dwfh5das] {
    display: block;
}

.afu-link-affix[b-q9dwfh5das] {
    background: transparent;
    color: var(--text-muted);
    padding-right: 0;
}

.afu-link-affix:first-child[b-q9dwfh5das] {
    border-right: 0;
}

.afu-link .amx-field.is-invalid[b-q9dwfh5das] {
    border-color: var(--accent-danger-fill);
}

/* dbd-success on the element as well: it is the app's green primary, and it is what exempts a
   button from the dark theme's blanket "button text is --text-primary" rule, which would otherwise
   put near-white on this green at 4.1:1. */
.afu-link-add[b-q9dwfh5das] {
    background: var(--accent-success-fill);
    border-left-color: transparent;
    color: var(--text-on-dark);
    font-weight: 550;
    white-space: nowrap;
}

.afu-link-add:hover:not(:disabled)[b-q9dwfh5das] {
    filter: brightness(1.05);
}

.afu-link-add:focus-visible[b-q9dwfh5das] {
    outline: 2px solid var(--text-primary);
    outline-offset: -4px;
}

.afu-link-add:disabled[b-q9dwfh5das] {
    opacity: .6;
    cursor: default;
}

.afu-hint[b-q9dwfh5das] {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.afu-error[b-q9dwfh5das] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    font-size: 0.8rem;
    color: var(--accent-danger-text);
}

/* ── Narrow cells ────────────────────────────────────────────────────── */
/* Drop what is explanatory before what is operable. */
@container (max-width: 460px) {
    .afu-drop-hint[b-q9dwfh5das],
    .afu-file-meta[b-q9dwfh5das] {
        display: none;
    }
}

@container (max-width: 560px) {
    .afu-help[b-q9dwfh5das] {
        font-size: 0;
        gap: 0;
    }

    .afu-help > i:not(:first-child)[b-q9dwfh5das] {
        display: none;
    }

    .afu-help > i:first-child[b-q9dwfh5das] {
        font-size: 0.875rem;
    }
}

@container (max-width: 340px) {
    .afu-seg-label i[b-q9dwfh5das] {
        display: none;
    }

    .afu-replace-bar > span[b-q9dwfh5das] {
        display: none;
    }
}

/* ── [model3d]: a 3D model field ──
   The file row keeps its own height and the model (AmxModelViewer, compact) takes the rest of the
   rows the field spans, like a photo field's image. */
.afu.afu-model[b-q9dwfh5das] {
    flex: 1 1 auto;
    gap: 0.4rem;
}

.afu.afu-model > .afu-value[b-q9dwfh5das] {
    flex: 0 0 auto;
}

.afu-model-note[b-q9dwfh5das] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    border: 1px dashed var(--border-interactive);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8rem;
}

.afu-model-note i[b-q9dwfh5das] {
    margin-top: 0.15rem;
    color: var(--text-secondary);
}

.afu-model-title[b-q9dwfh5das] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    font-weight: 600;
}

.afu-model-title i[b-q9dwfh5das] {
    color: var(--accent-success-text);
}

.afu-model-file[b-q9dwfh5das] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 400;
}
/* /Components/DataView/AmxFileUploadHelp.razor.rz.scp.css */
/* ── What can I add? ─────────────────────────────────────────────────── */

.afu-allowed[b-sog13dbbp7] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem 1.25rem;
}

@media (min-width: 680px) {
    .afu-allowed[b-sog13dbbp7] {
        grid-template-columns: 1.3fr 1fr;
    }
}

.afu-allowed-section[b-sog13dbbp7] {
    min-width: 0;
}

.afu-allowed-heading[b-sog13dbbp7] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 0.375rem;
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.afu-types[b-sog13dbbp7] {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 6px 12px;
    align-items: baseline;
    margin: 0;
}

.afu-types dt[b-sog13dbbp7] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.afu-types dd[b-sog13dbbp7] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
}

.afu-ext[b-sog13dbbp7] {
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font: 500 0.72rem/1 'SF Mono', Consolas, monospace;
}

.afu-rules[b-sog13dbbp7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.afu-allowed-section:last-child .afu-rules[b-sog13dbbp7] {
    margin-top: 0;
}

.afu-rules li[b-sog13dbbp7] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.afu-rules i[b-sog13dbbp7] {
    flex: 0 0 14px;
    text-align: center;
}

.afu-rules code[b-sog13dbbp7] {
    color: var(--text-primary);
    font: 0.75rem 'SF Mono', Consolas, monospace;
    word-break: break-word;
}

.afu-yes[b-sog13dbbp7] {
    color: var(--accent-success-text);
}

.afu-no[b-sog13dbbp7] {
    color: var(--accent-danger-text);
}

.afu-info[b-sog13dbbp7] {
    color: var(--text-muted);
}

/* /Components/DataView/AmxGrid.razor.rz.scp.css */
.amx-grid-wrapper[b-9axyp0fvaw] {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0;
    height: 100%;
    min-height: 0;
    width: 100%;
    padding: 0 !important;
    overflow: hidden;
    background-color: #f9fafb;
    /* The same edge every other data-view control carries: .amx-field draws its shell with
       --field-border, and this one only had Bootstrap's much paler .form-control default,
       so it read as a lighter box among the fields around it.

       !important because app.css sets `[data-theme="dark"] .form-control { border-color: ...
       !important }`, which would otherwise pull this back to the near-invisible --border-color
       hairline in dark mode - exactly where the difference between the two tokens matters most. */
    border: 1px solid var(--field-border, #5f6673) !important;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* The rest of .amx-field's border language, in the same order as amx-field.css so the cascade
   resolves the same way - notably .is-view landing after :focus-within, which is what leaves a
   focused readout with the ring but not the accent edge.

   focus-within rather than focus: the focus lands on the grid's own cells, buttons and search
   box, and the highlight belongs to the control, not to whichever child happens to have it.

   Same !important, and for the same reason as the base border: app.css's
   `[data-theme="dark"] .form-control` and `.form-control:focus` rules are themselves !important
   and would otherwise take the dark-mode cases out of this file's hands. */
.amx-grid-wrapper:hover:not(.is-view)[b-9axyp0fvaw] {
    border-color: var(--accent-primary, #2563eb) !important;
}

.amx-grid-wrapper:focus-within[b-9axyp0fvaw] {
    border-color: var(--accent-primary, #2563eb) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 37, 99, 235), 0.15);
}

/* View mode: a readout, not a field. The quieter --border-color hairline, because nothing on the
   page is editable and a form full of input-looking boxes would say otherwise. Hover lifts it
   only as far as --field-border - there is no edit to invite. */
.amx-grid-wrapper.is-view[b-9axyp0fvaw] {
    border-color: var(--field-border-view, #aeb3bd) !important;
}

.amx-grid-wrapper.is-view:hover[b-9axyp0fvaw] {
    border-color: var(--field-border, #5f6673) !important;
}

.amx-grid-content[b-9axyp0fvaw] {
    min-height: 0;
    width: 100%;
    flex: 1 1 auto;
}

/* Folder mode (hasFolder): tree on the left, grid on the right. The default layout keeps the
   main content inline (display: contents) so non-folder grids are unaffected. */
.amx-grid-main[b-9axyp0fvaw] {
    display: contents;
}

/* Report options (a grid whose report code ends _OPTION1): Active / Archived and the like, as a
   pill segmented control above the grid (DESIGN_LANGUAGE.md §Segmented control). Native radios,
   clipped rather than display:none so they keep the tab order and arrow keys. See
   AmxGrid.LoadReportOptions. */
.amx-grid-report-options[b-9axyp0fvaw] {
    display: inline-flex;
    position: relative;
    flex-wrap: wrap;
    align-self: flex-start;
    gap: 2px;
    margin: 0 0 8px;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background-color: var(--bg-secondary);
    flex: 0 0 auto;
    max-width: 100%;
}

.amx-grid-report-option-input[b-9axyp0fvaw] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.amx-grid-report-option[b-9axyp0fvaw] {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 14px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
}

.amx-grid-report-option:hover[b-9axyp0fvaw] {
    color: var(--text-primary);
    background-color: var(--bg-card);
}

/* The chosen pill: raised on the card colour, with a --border-interactive edge so it reads at 3:1
   without leaning on the text colour alone. */
.amx-grid-report-option-input:checked + .amx-grid-report-option[b-9axyp0fvaw] {
    background-color: var(--bg-card);
    border-color: var(--border-interactive);
    box-shadow: var(--shadow-sm);
    color: var(--accent-link);
    font-weight: 600;
}

.amx-grid-report-option-input:focus-visible + .amx-grid-report-option[b-9axyp0fvaw] {
    outline: 2px solid var(--accent-link);
    outline-offset: 1px;
}

.amx-grid-report-option-input:disabled + .amx-grid-report-option[b-9axyp0fvaw] {
    cursor: default;
    opacity: 0.6;
}

/* --bg-secondary sits below --bg-card on dark, so the track lifts to --bg-tertiary and the chosen
   pill takes the accent wash instead of the (darker) card colour. */
[data-theme="dark"] .amx-grid-report-options[b-9axyp0fvaw] {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .amx-grid-report-option-input:checked + .amx-grid-report-option[b-9axyp0fvaw] {
    background-color: var(--accent-wash);
}

.amx-grid-wrapper.folder-mode[b-9axyp0fvaw] {
    flex-direction: row;
    align-items: stretch;
}

.amx-grid-wrapper.folder-mode .amx-grid-folder-pane[b-9axyp0fvaw] {
    flex: 0 0 auto;
    width: 240px;
    min-width: 180px;
    max-width: 45%;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    /* Let the user drag the pane wider/narrower. */
    resize: horizontal;
}

/* Give the tree more room on large screens where there is space to spare. */
@media (min-width: 1400px) {
    .amx-grid-wrapper.folder-mode .amx-grid-folder-pane[b-9axyp0fvaw] {
        width: 300px;
    }
}

@media (min-width: 1920px) {
    .amx-grid-wrapper.folder-mode .amx-grid-folder-pane[b-9axyp0fvaw] {
        width: 340px;
    }
}

.amx-grid-wrapper.folder-mode .amx-grid-main[b-9axyp0fvaw] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* On narrow screens the tree becomes a shorter top panel rather than a side column. */
@media (max-width: 640px) {
    .amx-grid-wrapper.folder-mode[b-9axyp0fvaw] {
        flex-direction: column;
    }

    .amx-grid-wrapper.folder-mode .amx-grid-folder-pane[b-9axyp0fvaw] {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        max-height: 180px;
        resize: none;
    }
}

[b-9axyp0fvaw] .amx-grid-content .table-container {
    min-height: 0;
    height: 100%;
    width: 100%;
}

[b-9axyp0fvaw] .amx-grid-content .data-grid-container,
[b-9axyp0fvaw] .amx-grid-content .data-grid-wrapper,
[b-9axyp0fvaw] .amx-grid-content .data-grid-content {
    min-height: 0;
    flex: 1 1 auto;
    width: 100%;
}

.amx-grid-wrapper .grid-toolbar-container[b-9axyp0fvaw] {
    display: flex;
    gap: 12px;
    overflow: auto;
    min-height: 61px;
    padding: 8px 12px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

[b-9axyp0fvaw] .data-grid-wrapper .data-grid-table {
    overflow: auto;
}

[b-9axyp0fvaw] .data-grid-wrapper .data-grid-table thead tr > th {
    background: white;
    position: sticky;
    top: 0; /* Don't forget this, required for the stickiness */
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    z-index: 1;
}

[b-9axyp0fvaw] .data-grid-wrapper .data-grid-table tbody tr {
    border-bottom: 1px solid #eee;
    cursor: pointer !important;
}

[b-9axyp0fvaw] .data-pivot-grid td > .cell-chart-container {
    display: flex;
    gap: 3px;
    height: 100%;
    min-height: 2rem;
    width: 100%;
    background-size: 100% 200%;
    background-position-x: 100%;
    background-position-y: 0;
    transition: background-position 0.5s ease-in-out;
    animation: fadeInCellChartBar-b-9axyp0fvaw 1s;
}

[b-9axyp0fvaw] .cell-chart-container .value-pills-container {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

[b-9axyp0fvaw] .cell-chart-container .value-pill {
    background-color: #fafafa;
    border-radius: 20px;
    padding: 0.1rem 0.4rem;
    color: grey !important;
    width: fit-content;
    box-shadow: 0 0 5px 0 grey;
    font-size: 0.7rem;
    white-space: nowrap;
}

[b-9axyp0fvaw] .cell-chart-container .icons-container {
    display: flex;
    flex-direction: column-reverse;
    height: 100%;
    margin-left: auto;
}

[b-9axyp0fvaw] .data-pivot-grid .img-photo {
    /* Match the visible image inside a chart badge (1.8rem minus 0.3rem padding
       on each side), regardless of the pivot cell's width or row height. */
    width: 1.2rem;
    height: 1.2rem;
    object-fit: contain;
}

[b-9axyp0fvaw] .cell-chart-container .img-photo {
    width: 1.8rem;
    height: 1.8rem;
    background-color: #fafafa;
    border-radius: 20px;
    padding: 0.3rem;
    box-shadow: 0 0 5px 0 grey;
    margin-top: auto;
    margin-bottom: 2px;
    transition: margin-bottom 0.2s;
}

[b-9axyp0fvaw] .amx-pivot-table td:not(:hover) .cell-chart-container .img-photo:not(:first-child) {
    margin-bottom: -30%;
}

@keyframes fadeInCellChartBar-b-9axyp0fvaw {
    from {
        background-position: 100% 0;
    }
}

.list-style-items-wrapper[b-9axyp0fvaw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 5px;
}

.list-item-row[b-9axyp0fvaw] {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border: 1px solid #eee;
}

    .list-item-row:nth-child(odd)[b-9axyp0fvaw] {
        background-color: #f5f5f5;
    }

    .list-item-row > span:nth-child(1)[b-9axyp0fvaw] {
        width: 100%;
    }

.list-style-row-items[b-9axyp0fvaw] {
    background-color: #f5f5f5;
}

.liststyle-item .list-style-row-items .list-style-row-item[b-9axyp0fvaw] {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5px;
    align-items: self-start;
}

.displaymodecheck[b-9axyp0fvaw] {
    padding: 5px 5px 0 5px;
}

/* Network Warning */
.network-warning[b-9axyp0fvaw] {
    background-color: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.warning-content[b-9axyp0fvaw] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #92400e;
    font-size: var(--amx-control-font-size, 0.875rem);
    font-weight: 500;
}

    .warning-content i[b-9axyp0fvaw] {
        font-size: calc(var(--amx-control-font-size, 0.875rem) * 1.1428);
        color: #f59e0b;
    }

/* Error Container */
.error-container[b-9axyp0fvaw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    gap: 20px;
    width: 100%;
}

.error-message[b-9axyp0fvaw] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #dc2626;
    font-size: var(--amx-control-font-size, 0.875rem);
    font-weight: 500;
}

    .error-message i[b-9axyp0fvaw] {
        font-size: calc(var(--amx-control-font-size, 0.875rem) * 1.2857);
        color: #dc2626;
    }

.refresh-button[b-9axyp0fvaw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: #f59e0b;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: var(--amx-control-font-size, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .refresh-button:hover[b-9axyp0fvaw] {
        background-color: #d97706;
    }

    .refresh-button i[b-9axyp0fvaw] {
        font-size: calc(var(--amx-control-font-size, 0.875rem) * 1.0);
    }

/* ===== NO-RESULTS SUGGESTIONS =====
   Shown when a search finds nothing and the server offered alternative terms. Mirrors the
   report page's "did you mean" treatment so the two read the same. */

.grid-no-results[b-9axyp0fvaw] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 4px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.grid-no-results__icon[b-9axyp0fvaw] {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--accent-warning);
}

.grid-no-results__body[b-9axyp0fvaw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.grid-no-results__title[b-9axyp0fvaw] {
    color: var(--text-primary);
}

.grid-no-results__text[b-9axyp0fvaw] {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.grid-no-results__chips[b-9axyp0fvaw] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.grid-no-results__chip[b-9axyp0fvaw] {
    padding: 4px 12px;
    font-size: 0.85rem;
    color: var(--accent-primary);
    background-color: var(--bg-card);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.35);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.grid-no-results__chip:hover[b-9axyp0fvaw],
.grid-no-results__chip:focus-visible[b-9axyp0fvaw] {
    color: #fff;
    background-color: var(--accent-primary);
    outline: none;
}

/* ===== SUMMARY VIEW SEARCH =====
   The summary view ([summaryview]) loads every row, so the list scrolls. This row is the scroll
   container's header: it is sticky and opaque so rows pass behind it rather than over it. */

.summary-search[b-9axyp0fvaw] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 6px 0;
    /* Opaque fill is what stops scrolled rows showing through the header. */
    background: var(--bg-card);
}

.summary-search__icon[b-9axyp0fvaw] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.summary-search__input[b-9axyp0fvaw] {
    height: 34px;
    font-size: 0.85rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* WCAG 2.2 target size (2.5.8) for the icon-only clear button. */
.summary-search__clear[b-9axyp0fvaw] {
    display: grid;
    place-items: center;
    min-width: 1.75rem;
    min-height: 1.75rem;
    margin-left: 4px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.summary-search__clear:hover[b-9axyp0fvaw] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.summary-no-matches[b-9axyp0fvaw] {
    padding: 10px 2px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* The summary table sits under the sticky search row, never over it. */
.alternative-grid-summary-table[b-9axyp0fvaw] {
    position: relative;
    z-index: 1;
}
/* /Components/DataView/AmxGuid.razor.rz.scp.css */
/* The field itself is the shared .amx-field shell (wwwroot/css/amx-field.css). What is left
   here is the one thing specific to a Guid: its value is a link to another record. */
ul[b-ungzf0h54e] {
    list-style: none;
    margin: 0 !important;
}

/* Centred, because a linked record reads as an action rather than a typed value - and a real
   button, so it keeps the keyboard and the shell's focus ring. */
.amx-field-link[b-ungzf0h54e] {
    /* safe: a value too long for the field starts at the left edge instead of overflowing
       both sides, which cut off its beginning where nothing could bring it back. */
    justify-content: safe center;
    border: 0;
    background: transparent;
    text-align: center;
    cursor: pointer;
    /* --accent-link, not a fixed blue: the old #0066cc stayed the same against a dark form. */
    color: var(--accent-link, #1d4ed8);
    text-decoration: none;
    transition: color 0.15s ease;
}

.amx-field-link:hover[b-ungzf0h54e] {
    text-decoration: underline;
}

.amx-field-link.is-archived[b-ungzf0h54e] {
    color: var(--accent-danger-text, #c4201f);
}
/* /Components/DataView/AmxInlineGridEditor.razor.rz.scp.css */
/* Sizing only, and deliberately identical to AmxGrid.razor.css: both controls are laid out by
   DataViewControls, which sizes their container from the display item's row span and stretches it
   to fill the rows left over. The control then has to fill that container rather than set a height
   of its own - this one used to pin min/max height from the row span and so ignored the space the
   form had already given it. Keep the two files in step. */
.amx-grid-wrapper[b-letss9zg6k] {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0;
    height: 100%;
    min-height: 0;
    width: 100%;
    padding: 0 !important;
    overflow: hidden;
    background-color: #f9fafb;
    /* The same edge every other data-view control carries: .amx-field draws its shell with
       --field-border, and this one only had Bootstrap's much paler .form-control default,
       so it read as a lighter box among the fields around it.

       !important because app.css sets `[data-theme="dark"] .form-control { border-color: ...
       !important }`, which would otherwise pull this back to the near-invisible --border-color
       hairline in dark mode - exactly where the difference between the two tokens matters most. */
    border: 1px solid var(--field-border, #5f6673) !important;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* The rest of .amx-field's border language, in the same order as amx-field.css so the cascade
   resolves the same way - notably .is-view landing after :focus-within, which is what leaves a
   focused readout with the ring but not the accent edge.

   focus-within rather than focus: the focus lands on the grid's own cells, buttons and search
   box, and the highlight belongs to the control, not to whichever child happens to have it.

   Same !important, and for the same reason as the base border: app.css's
   `[data-theme="dark"] .form-control` and `.form-control:focus` rules are themselves !important
   and would otherwise take the dark-mode cases out of this file's hands. */
.amx-grid-wrapper:hover:not(.is-view)[b-letss9zg6k] {
    border-color: var(--accent-primary, #2563eb) !important;
}

.amx-grid-wrapper:focus-within[b-letss9zg6k] {
    border-color: var(--accent-primary, #2563eb) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 37, 99, 235), 0.15);
}

/* View mode: a readout, not a field. The quieter --border-color hairline, because nothing on the
   page is editable and a form full of input-looking boxes would say otherwise. Hover lifts it
   only as far as --field-border - there is no edit to invite. */
.amx-grid-wrapper.is-view[b-letss9zg6k] {
    border-color: var(--field-border-view, #aeb3bd) !important;
}

.amx-grid-wrapper.is-view:hover[b-letss9zg6k] {
    border-color: var(--field-border, #5f6673) !important;
}

.amx-grid-content[b-letss9zg6k] {
    min-height: 0;
    width: 100%;
    flex: 1 1 auto;
}

[b-letss9zg6k] .amx-grid-content .table-container {
    min-height: 0;
    height: 100%;
    width: 100%;
}

[b-letss9zg6k] .amx-grid-content .data-grid-container,
[b-letss9zg6k] .amx-grid-content .data-grid-content {
    min-height: 0;
    flex: 1 1 auto;
    width: 100%;
}
/* /Components/DataView/AmxLengthInspection.razor.rz.scp.css */
/* Length inspection - follows the AMX Web design language (DESIGN_LANGUAGE.md):
   flat fills, hairline borders, one green accent, shallow shadows. Colours come from the
   global token layer in app.css so light/dark theming is a one-file change; only the
   radius/motion scale from the design language is aliased locally. */
.amx-length-inspection-grid-wrapper[b-wf80kbbbfl] {
    --li-radius-sm: 6px;
    --li-radius-md: 8px;
    --li-radius-lg: 12px;
    --li-transition: 100ms ease;
    --li-accent-soft: color-mix(in srgb, var(--accent-success-fill) 10%, transparent);

    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 154px;
    padding: 1rem;
    overflow: auto;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--li-radius-lg);
    color: var(--text-primary);
    font-size: var(--amx-control-font-size, 0.92rem);
}

/* Loading / error states */

.li-state[b-wf80kbbbfl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    margin: auto;
    text-align: center;
}

.li-notice[b-wf80kbbbfl] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--li-radius-md);
    background-color: var(--bg-card);
    color: var(--text-secondary);
    text-align: left;
}

.li-notice-danger[b-wf80kbbbfl] {
    border-color: var(--accent-danger);
    color: var(--accent-danger-text);
}

.li-notice i[b-wf80kbbbfl] {
    margin-top: 0.15em;
}

/* Panel */

.li-panel[b-wf80kbbbfl] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.li-panel-header[b-wf80kbbbfl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.li-panel-title[b-wf80kbbbfl] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.li-chip[b-wf80kbbbfl] {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background-color: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Cards */

.li-card[b-wf80kbbbfl] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--li-radius-lg);
    box-shadow: var(--shadow-sm);
}

.li-card-header[b-wf80kbbbfl] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.li-card-title[b-wf80kbbbfl] {
    font-size: 1rem;
    font-weight: 600;
}

.li-card-subtitle[b-wf80kbbbfl] {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.li-divider[b-wf80kbbbfl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.li-divider[b-wf80kbbbfl]::before,
.li-divider[b-wf80kbbbfl]::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--border-color);
}

/* Element type selection (setup) */

.li-choice-list[b-wf80kbbbfl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.li-choice[b-wf80kbbbfl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--li-radius-md);
    color: var(--text-primary);
    font-size: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--li-transition), border-color var(--li-transition);
}

.li-choice:hover[b-wf80kbbbfl] {
    background-color: var(--bg-hover);
    border-color: var(--border-interactive);
}

.li-choice.is-selected[b-wf80kbbbfl] {
    background-color: var(--li-accent-soft);
    border-color: var(--accent-success-fill);
    color: var(--accent-success-text);
    font-weight: 600;
}

.li-choice:focus-visible[b-wf80kbbbfl],
.li-record:focus-visible[b-wf80kbbbfl] {
    outline: none;
    border-color: var(--accent-success-fill);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-success-fill) 25%, transparent);
}

.li-choice-check[b-wf80kbbbfl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 1px solid var(--border-interactive);
    border-radius: var(--li-radius-sm);
    background-color: var(--bg-input);
    color: var(--accent-success-text);
    font-size: 0.7rem;
}

.li-choice.is-selected .li-choice-check[b-wf80kbbbfl] {
    border-color: var(--accent-success-fill);
}

.li-choice-text[b-wf80kbbbfl] {
    flex: 1 1 auto;
}

/* Length list */

.li-length-list[b-wf80kbbbfl] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.li-length[b-wf80kbbbfl] {
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.li-length-header[b-wf80kbbbfl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.li-chainage[b-wf80kbbbfl] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background-color: var(--li-accent-soft);
    color: var(--accent-success-text);
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.li-length-actions[b-wf80kbbbfl] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.li-length-empty[b-wf80kbbbfl] {
    margin: 0;
    padding: 0.75rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* Sections and record rows */

.li-section[b-wf80kbbbfl] {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
}

.li-section + .li-section[b-wf80kbbbfl] {
    border-top: 1px solid var(--border-light);
}

.li-section-label[b-wf80kbbbfl] {
    padding-bottom: 0.25rem;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.li-records[b-wf80kbbbfl] {
    display: flex;
    flex-direction: column;
}

.li-record[b-wf80kbbbfl] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.375rem 0.5rem;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--li-radius-sm);
    color: var(--text-primary);
    font-size: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--li-transition);
}

.li-record:not(:disabled):hover[b-wf80kbbbfl] {
    background-color: var(--bg-hover);
}

.li-record.is-static[b-wf80kbbbfl] {
    cursor: default;
}

.li-record-icon[b-wf80kbbbfl] {
    flex: 0 0 auto;
    width: 1rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
    text-align: center;
}

.li-record-text[b-wf80kbbbfl] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.li-record-chevron[b-wf80kbbbfl] {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.75rem;
    opacity: .6;
}

.li-record:not(:disabled):hover .li-record-chevron[b-wf80kbbbfl] {
    opacity: 1;
}
/* /Components/DataView/AmxLocation.razor.rz.scp.css */
/* The location control's readout is the shared .amx-field shell (wwwroot/css/amx-field.css), so
   the border, hover, focus ring and read-only treatment are the same ones every other data-view
   control uses and theme with it. What is left here is the three things the shell has no opinion
   about: how the control sits in its grid cell, the panel the map-view variant renders into, and
   the edit-mode button - which is not a field at all, and so is not the shell's business. */

/* Label-beside-control layout comes from .amx-field-row in app.css, which this wrapper also
   carries; only the height is the control's own. */
.location-box-wrapper[b-ob1a2d60s7] {
    height: 100%;
}

/* ── Map view ────────────────────────────────────────────────────────────
   A panel holding a map, not a field holding a value: it borrows the shell's border, radius
   and surface so it sits in the same family, but none of its interactive states - there is
   nothing here to hover or focus, and a map that lit up like an input would be a lie. */

.map-view-container[b-ob1a2d60s7] {
    min-height: 300px;
    overflow: hidden;
}

.location-map-shell[b-ob1a2d60s7] {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

/* ── The edit affordance ─────────────────────────────────────────────────
   A button, not a field. It sits in a form row alongside .amx-field controls, so it takes
   their height and radius to line up with them - but the fill is what tells the user this
   is something to press rather than something to type in. Beside it, when the record has one,
   is the location itself in the usual field shell. */

.location-edit-row[b-ob1a2d60s7] {
    /* Matches .amx-field's resting height, so a location field lines up with the fields above
       and below it rather than sitting short. The row carries it, not the parts, so the readout
       and the button are the same height whichever of them is taller. */
    min-height: 44px;
}

/* [buttononleft]. Visual order only - see the markup. */
.location-edit-row.is-button-first[b-ob1a2d60s7] {
    flex-direction: row-reverse;
}

/* The coordinates. They take the room the button does not, and truncate rather than pushing it
   off a narrow grid cell; the whole value is still in reach, since clicking it opens the map. */
.location-edit-row .amx-field[b-ob1a2d60s7] {
    flex: 1 1 auto;
    min-width: 0;
}

.location-set-btn[b-ob1a2d60s7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    /* Only what it needs when a readout is beside it; the whole row when it is alone. */
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    white-space: nowrap;
}

.location-set-btn:only-child[b-ob1a2d60s7] {
    flex: 1 1 auto;
}

/* Truncates rather than wrapping the button to two rows; the icon keeps its size beside it. */
.location-set-label[b-ob1a2d60s7] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/DataView/AmxLookupBrowser.razor.rz.scp.css */
ul[b-7xa9v9vft3] {
    list-style: none;
    margin: 0 !important;
}

/* The options menu hangs off the search row rather than being fixed over the page: the app's menu
   band (1080) sits under an open modal, so a fixed menu opened from inside one would be hidden
   behind it. Anchored here it is in the modal's own stacking context, and to the row rather than to
   the whole block - which would drop it below the options underneath the box. */
.lookup-modal-search-row[b-7xa9v9vft3] {
    position: relative;
}

.lookup-modal-search .input-group[b-7xa9v9vft3] {
    flex-wrap: nowrap;
}

/* Square, so the row reads as a search box with one settings control on the end rather than two
   buttons of different weights. */
.lookup-search-options-btn[b-7xa9v9vft3] {
    flex: 0 0 auto;
}

.lookup-search-options-backdrop[b-7xa9v9vft3] {
    position: fixed;
    inset: 0;
    z-index: 1;
}

.lookup-search-options[b-7xa9v9vft3] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: min(320px, 100%);
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* Focused programmatically on open so the arrow keys work straight away; that focus is a landing
   point rather than a control, so it needs no ring of its own. */
.lookup-search-options:focus[b-7xa9v9vft3] {
    outline: none;
}

.lookup-search-options-heading[b-7xa9v9vft3] {
    margin: 2px 8px 4px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lookup-search-option[b-7xa9v9vft3] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    /* Past the 24x24 WCAG 2.2 target minimum. */
    min-height: 32px;
    padding: 8px 10px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.lookup-search-option:hover[b-7xa9v9vft3] {
    background: var(--bg-secondary);
}

.lookup-search-option:focus-visible[b-7xa9v9vft3] {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

/* Kept in the layout when unchecked rather than dropped, so both labels start at the same place. */
.lookup-search-option-tick[b-7xa9v9vft3] {
    flex: 0 0 auto;
    margin-top: 0.2rem;
    color: var(--accent-primary);
    visibility: hidden;
}

.lookup-search-option-tick.is-checked[b-7xa9v9vft3] {
    visibility: visible;
}

.lookup-search-option-text[b-7xa9v9vft3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lookup-search-option-label[b-7xa9v9vft3] {
    font-weight: 550;
}

.lookup-search-option-hint[b-7xa9v9vft3] {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.35;
}

/* Says what the filtering did. Always in the markup, and never display:none - a live region has to
   be in the accessibility tree before its content changes, or the change is not announced. Empty it
   is a block with no line box, so it takes no room. */
.lookup-modal-search-summary[b-7xa9v9vft3] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Spacing only when there is something to space. Kept off :empty { display: none } for the reason
   above - the element has to stay in the tree either way. */
.lookup-modal-search-summary:not(:empty)[b-7xa9v9vft3] {
    margin-top: 0.4rem;
}

/* ── Lookup selection modal ───────────────────────────────────────────
   Body layout for the lookup browser's selection and details modals. Follows
   the same language as the map control modals: theme variables, bordered
   cards, muted supporting text, and the app's `.dbd-btn` buttons. */
.lookup-modal[b-7xa9v9vft3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lookup-modal-title[b-7xa9v9vft3] {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.lookup-modal-title i[b-7xa9v9vft3] {
    margin-top: 0.2rem;
    color: var(--accent-primary);
}

.lookup-modal-heading[b-7xa9v9vft3] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.lookup-modal-subtitle[b-7xa9v9vft3] {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
}

.lookup-modal-search .input-group-text[b-7xa9v9vft3] {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* The current value, so it is obvious what the control already holds. */
.lookup-modal-selection[b-7xa9v9vft3] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--bg-secondary);
}

.lookup-modal-selection > i[b-7xa9v9vft3] {
    flex: 0 0 auto;
    color: var(--accent-success);
}

.lookup-modal-selection-text[b-7xa9v9vft3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lookup-modal-selection-label[b-7xa9v9vft3] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.lookup-modal-selection-value[b-7xa9v9vft3] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.section-dialog-content-container[b-7xa9v9vft3] {
    max-height: clamp(240px, calc(100vh - 360px), 560px);
    overflow-y: auto;
    padding: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--bg-card);
}

.lookup-modal-grid[b-7xa9v9vft3] {
    height: 100%;
    overflow: auto;
}

.lookup-modal-empty[b-7xa9v9vft3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

.lookup-modal-empty i[b-7xa9v9vft3] {
    font-size: 1.5rem;
    opacity: 0.6;
}

.lookup-browser-item-text[b-7xa9v9vft3] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lookup-browser-item.is-selected[b-7xa9v9vft3] {
    font-weight: 600;
}

.lookup-browser-item-check[b-7xa9v9vft3] {
    flex: 0 0 auto;
    color: var(--accent-primary);
}

/* On the row the tree highlights, the tick has to sit on the primary colour, so
   take the row's own contrast colour instead of the accent. */
.lookup-browser-tree[b-7xa9v9vft3]  .node-item.active .lookup-browser-item-check {
    color: inherit;
}

.lookup-browser-tree[b-7xa9v9vft3]  .item-parent-wrapper {
    padding-bottom: 0;
}

.lookup-browser-tree[b-7xa9v9vft3]  .node-item {
    min-height: 32px;
}

.lookup-browser-tree[b-7xa9v9vft3]  .node-item .node-item-content {
    align-items: center;
    min-height: 32px;
    padding: 4px 8px;
}

.lookup-browser-tree[b-7xa9v9vft3]  .node-item .expand-icon-container {
    width: 32px;
    padding: 8px;
}

.lookup-browser-tree[b-7xa9v9vft3]  .node-item-child-container {
    padding: 2px 0 0 6px;
}

.lookup-browser-item[b-7xa9v9vft3] {
    min-height: 28px;
    padding: 3px 5px;
    line-height: 1.2;
}

/* ── Lookup details ("more info") ─────────────────────────────────────
   A quiet list rather than a boxed grid: hairlines between rows carry the
   structure, so the values stand out instead of the borders. Colour comes
   from the app tokens only, so it follows the light and dark themes. */
.lookup-info-list[b-7xa9v9vft3] {
    margin: 0;
    max-height: min(60vh, 26rem);
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-card);
}

.lookup-info-item[b-7xa9v9vft3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "label copy"
        "value copy";
    align-items: center;
    column-gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    transition: background-color 0.12s ease;
}

.lookup-info-item + .lookup-info-item[b-7xa9v9vft3] {
    border-top: 1px solid var(--border-color);
}

.lookup-info-item:hover[b-7xa9v9vft3] {
    background-color: var(--bg-hover);
}

/* The field name reads as a quiet caption over its value, not as a heading. */
.lookup-info-label[b-7xa9v9vft3] {
    grid-area: label;
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}

.lookup-info-value[b-7xa9v9vft3] {
    grid-area: value;
    margin: 0;
    color: var(--text-primary);
    line-height: 1.4;
    overflow-wrap: anywhere;
    user-select: text;
}

/* Same small icon button as the nav trail's copy action. */
.lookup-info-copy[b-7xa9v9vft3] {
    grid-area: copy;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.lookup-info-copy:hover[b-7xa9v9vft3] {
    background-color: var(--bg-hover);
    color: var(--text-secondary);
}

.lookup-info-copy.is-copied[b-7xa9v9vft3] {
    color: var(--accent-success-text, var(--accent-success));
}

.lookup-info-copy:focus-visible[b-7xa9v9vft3] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 2px;
}

/* Hovering the row is already a hint; on a touch screen there is no hover, so the
   button never relies on it to be found. */
.lookup-info-item:hover .lookup-info-copy:not(:hover)[b-7xa9v9vft3] {
    color: var(--text-secondary);
}
/* /Components/DataView/AmxNumber.razor.rz.scp.css */
/* The field itself is the shared .amx-field shell (wwwroot/css/amx-field.css) - including the
   currency symbol, which is now an .amx-field-affix inside the shell rather than a bordered
   block bolted to its left. Only the list reset the validation messages rely on is local. */
ul[b-bq3tocydet] {
    list-style: none;
    margin: 0 !important;
}
/* /Components/DataView/AmxPhotoView.razor.rz.scp.css */
/* Inside a grid editor record card the photo box is one field among many, so it takes a
   ceiling rather than growing with the image and pushing the rest of the record down. */
.ge-record .photo-box-wrapper[b-ruv6ss7uec] {
    min-height: 200px;
    max-height: 300px;
}

.photo-box-wrapper .photo-wrapper[b-ruv6ss7uec] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    gap: 10px;
    border-radius: 8px;
}

/* The field border language, the same set .amx-field and .amx-grid-wrapper carry - this control
   is a form control too, and only had Bootstrap's much paler .form-control default, so it read
   as a lighter box among the fields around it.

   !important throughout because app.css's `[data-theme="dark"] .form-control` and
   `.form-control:focus` rules are themselves !important and would otherwise take the dark-mode
   cases out of this file's hands. Order matches amx-field.css so the cascade resolves the same
   way - .is-view after :focus-within, which is what leaves a focused readout with the ring but
   not the accent edge. */
.photo-box-wrapper .photo-wrapper[b-ruv6ss7uec] {
    border: 1px solid var(--field-border, #5f6673) !important;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.photo-box-wrapper .photo-wrapper:hover:not(.is-view)[b-ruv6ss7uec] {
    border-color: var(--accent-primary, #2563eb) !important;
}

.photo-box-wrapper .photo-wrapper:focus-within[b-ruv6ss7uec] {
    border-color: var(--accent-primary, #2563eb) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 37, 99, 235), 0.15);
}

/* View mode: a readout, not a field. Hover lifts it only as far as --field-border - there is no
   edit to invite. */
.photo-box-wrapper .photo-wrapper.is-view[b-ruv6ss7uec] {
    border-color: var(--field-border-view, #aeb3bd) !important;
}

.photo-box-wrapper .photo-wrapper.is-view:hover[b-ruv6ss7uec] {
    border-color: var(--field-border, #5f6673) !important;
}

/* Kebab (3-dots) overflow menu, top-right of the photo. */
.photo-box-wrapper .photo-menu[b-ruv6ss7uec] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
}

.photo-box-wrapper .photo-menu-backdrop[b-ruv6ss7uec] {
    /* Oversized rather than inset:0 - the app scales the body, and a fixed element under a
       transformed ancestor covers that ancestor's box rather than the screen, leaving a band down
       the edges where a click would not close the menu. */
    position: fixed;
    top: -50vh;
    left: -50vw;
    width: 200vw;
    height: 200vh;
    z-index: 1084;
    background: transparent;
}

.photo-box-wrapper .photo-menu-dropdown[b-ruv6ss7uec] {
    /* Fixed, and placed by amxPopover, so the menu is not clipped by the control it belongs to -
       an absolutely positioned menu is invisible whenever the photo control is smaller than it. */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1085;
    overflow-y: auto;
    min-width: 160px;
    padding: 6px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.photo-box-wrapper .photo-menu-item[b-ruv6ss7uec] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-primary, #1e293b);
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
}

.photo-box-wrapper .photo-menu-item:hover[b-ruv6ss7uec] {
    background: var(--bg-hover, #f1f5f9);
}

.photo-box-wrapper .photo-menu-item i[b-ruv6ss7uec] {
    width: 16px;
    color: var(--accent-primary, #2563eb);
}

/* Delete action, bottom-right of the photo. */
.photo-box-wrapper .photo-delete-btn[b-ruv6ss7uec] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: #fff;
    background: var(--accent-danger, #dc2626);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: background 0.15s ease, transform 0.1s ease;
}

.photo-box-wrapper .photo-delete-btn:hover[b-ruv6ss7uec] {
    background: #b91c1c;
}

.photo-box-wrapper .photo-delete-btn:active[b-ruv6ss7uec] {
    transform: scale(0.94);
}

.photo-box-wrapper .photo-delete-btn:focus-visible[b-ruv6ss7uec] {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.photo-box-wrapper .photo-options-wrapper[b-ruv6ss7uec] {
    display: flex;
    gap: 8px;
    width: 100%;
    flex-wrap: wrap;
}

.photo-box-wrapper .photo-options-wrapper > .btn[b-ruv6ss7uec] {
    max-width: 300px;
}

.markup-wrapper[b-ruv6ss7uec] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #f1f5f9;
    background-color: #ffffff;
}

[b-ruv6ss7uec] .__markerjs2_ {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

[b-ruv6ss7uec] .__markerjs2_ > div {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

#photo-markup-area-div[b-ruv6ss7uec] {
    position: relative;
    height: 100%;
}
#imageAsMap[b-ruv6ss7uec] {
    position: relative;
    height: 100%;
}
.signature-pad-trigger.dbd-success[b-ruv6ss7uec] {
    background: var(--accent-success-fill) !important;
    border-color: var(--accent-success-fill) !important;
    color: var(--text-on-dark) !important;
}

.signature-pad-trigger:focus-visible[b-ruv6ss7uec] {
    outline: 2px solid var(--border-focus, var(--accent-primary)) !important;
    outline-offset: 2px;
}
/* /Components/DataView/AmxProformaCompressed.razor.rz.scp.css */
.pcz-toolbar[b-mdbldkvxtl] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--bg-secondary);
}

.pcz-field[b-mdbldkvxtl] {
    display: flex;
    flex-direction: column;
    flex: 1 1 200px;
    min-width: 150px;
}

.pcz-field > label[b-mdbldkvxtl] {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.pcz-field select[b-mdbldkvxtl],
.pcz-field input[b-mdbldkvxtl] {
    height: 40px;
    width: 100%;
    padding: 6px 10px;
    font-size: 15px;
    border: 1px solid var(--border-interactive);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    box-sizing: border-box;
}

.pcz-field select:focus[b-mdbldkvxtl],
.pcz-field input:focus[b-mdbldkvxtl] {
    outline: 2px solid var(--accent-link);
    outline-offset: 2px;
    border-color: var(--accent-link);

}

.pcz-search[b-mdbldkvxtl] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex: 2 1 320px;
    min-width: 220px;
}

.pcz-search .pcz-field[b-mdbldkvxtl] {
    flex: 1 1 auto;
    min-width: 0;
}

.pcz-search .btn[b-mdbldkvxtl] {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 0 14px;
}

.pcz-key[b-mdbldkvxtl] {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: center;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--border-color);
    font-size: 14px;
    color: var(--text-secondary);
}

.pcz-relevancy[b-mdbldkvxtl] {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    padding-top: 8px;
}

.pcz-relevancy-prompt[b-mdbldkvxtl] {
    font-size: 14px;
    color: var(--text-primary);
}

.pcz-radio[b-mdbldkvxtl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 600;
    cursor: pointer;
}

.pcz-radio input[type="radio"][b-mdbldkvxtl] {
    width: 18px;
    height: 18px;
    margin: 0;
}

@media (max-width: 640px) {
    .pcz-field[b-mdbldkvxtl],
    .pcz-search[b-mdbldkvxtl] {
        flex: 1 1 100%;
        min-width: 0;
    }

    .pcz-search[b-mdbldkvxtl] {
        flex-wrap: wrap;
    }

    .pcz-search .btn[b-mdbldkvxtl] {
        padding: 0 12px;
    }
}

/* Classes emitted by the shared ProformaCompressedService, scoped to this grid. */
.pcz-container[b-mdbldkvxtl] { color: var(--text-primary); min-width: 0; }
.pcz-grid-scroll[b-mdbldkvxtl] { max-width: 100%; overflow-x: auto; }
.pcz-grid[b-mdbldkvxtl] { width: 100%; border-collapse: collapse; }
/* Preserve status fills over the global dark-theme row-hover background. */
.pcz-container .pcz-grid-scroll .pcz-grid td[b-mdbldkvxtl] {
    border: 1px solid var(--border-interactive);
    padding: 4px;
    background: var(--pcz-cell-bg, var(--bg-card)) !important;
}
.pcz-grid .c-dg[b-mdbldkvxtl] { --pcz-cell-bg: var(--bg-tertiary); color: var(--text-primary); }
.pcz-grid .c-lg[b-mdbldkvxtl] { --pcz-cell-bg: var(--bg-secondary); color: var(--text-primary); }
.pcz-grid .c-pg[b-mdbldkvxtl] { --pcz-cell-bg: color-mix(in srgb, var(--accent-success) 18%, var(--bg-card)); color: var(--text-primary); }
.pcz-grid .c-do[b-mdbldkvxtl] { --pcz-cell-bg: color-mix(in srgb, var(--accent-warning) 25%, var(--bg-card)); color: var(--text-primary); }
.pcz-grid .c-lc[b-mdbldkvxtl] { --pcz-cell-bg: color-mix(in srgb, var(--accent-danger) 12%, var(--bg-card)); color: var(--text-primary); }
.pcz-grid .c-r[b-mdbldkvxtl] { --pcz-cell-bg: color-mix(in srgb, var(--accent-danger) 25%, var(--bg-card)); color: var(--text-primary); }
.pcz-grid .c-g[b-mdbldkvxtl] { --pcz-cell-bg: color-mix(in srgb, var(--accent-warning) 15%, var(--bg-card)); color: var(--text-primary); }
.pcz-grid .c-gw[b-mdbldkvxtl] { --pcz-cell-bg: var(--bg-secondary); color: var(--text-primary); }
.pcz-grid .c-sb[b-mdbldkvxtl] { --pcz-cell-bg: color-mix(in srgb, var(--accent-primary) 15%, var(--bg-card)); color: var(--text-primary); }
.pcz-grid .c-w[b-mdbldkvxtl] { --pcz-cell-bg: var(--bg-card); color: var(--text-primary); }
.pcz-grid .is-font[b-mdbldkvxtl] { font-weight: 600; text-align: center; }
.pcz-grid .is-center[b-mdbldkvxtl] { text-align: center; }
.pcz-grid .is-font-l[b-mdbldkvxtl] { font-weight: 600; text-align: left; }
.pcz-grid .is-italic[b-mdbldkvxtl] { font-style: italic; }
.pcz-cell-action[b-mdbldkvxtl] {
    display: block;
    width: 100%;
    min-width: 24px;
    min-height: 24px;
    border: 0;
    padding: 2px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}
.pcz-menu-action[b-mdbldkvxtl] {
    width: 100%;
    min-height: 36px;
    padding: 6px;
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    text-align: left;
}
.pcz-cell-action:hover[b-mdbldkvxtl] { text-decoration: underline; }
.pcz-menu-action:hover[b-mdbldkvxtl] { background: var(--bg-hover); }
.pcz-cell-action:focus-visible[b-mdbldkvxtl],
.pcz-menu-action:focus-visible[b-mdbldkvxtl],
.pcz-grid-scroll:focus-visible[b-mdbldkvxtl],
.pcz-radio input:focus-visible[b-mdbldkvxtl] {
    outline: 2px solid var(--accent-link);
    outline-offset: -2px;
}

.pcz-value-error[b-mdbldkvxtl] { color: var(--accent-danger-text); }
/* /Components/DataView/AmxRichText.razor.rz.scp.css */
/* AmxRichText - rich text DataView control.
   Colour comes from the app tokens only (see DESIGN_LANGUAGE.md), so light and dark themes and any
   future re-skin are a one-file change elsewhere. Flat fills, hairline borders, no gradients. */

/* Label-beside-control layout comes from .amx-field-row in app.css, which this wrapper also
   carries. What is left here is how the wrapper behaves as an item of ITS parent, and its scrolling. */
.amx-rt-wrapper[b-3xljfjlcrz] {
    /* Shares the cell with the validation messages below rather than claiming all of it, and
       min-height:0 lets it shrink into the space the layout gave it. Without that, a flex item
       refuses to go below its content height - which is how an editor ends up taller than its row. */
    flex: 1 1 auto;
    min-height: 0;
    /* Must be a scroll container, not overflow:hidden. A non-scroll overflow box still reports its
       unclipped intrinsic height as max-content, and the tab grid sizes rows as
       minmax(row, max-content) - so a hidden wrapper let the editor's full height push its row
       (and everything below it) down the form. overflow-y:auto makes the box's max-content
       contribution collapse to zero, matching the editor/view, which scroll their own content. */
    overflow-y: auto;
}

.amx-rt-shell[b-3xljfjlcrz] {
    display: flex;
    flex-direction: column;
    /* Takes the space that is left rather than claiming all of it: with the label beside the control
       that is the full height (flex stretches it), and with the label above it is whatever remains
       below the label. height:100% would overflow by the label's height in that second case. */
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    /* See .amx-rt-wrapper: a scroll container so its max-content contribution is zero and the
       toolbar + editor cannot grow the grid row beyond the configured row span. */
    overflow-y: auto;
}

.amx-rt-shell:focus-within[b-3xljfjlcrz] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-wash);
}

/* Toolbar ------------------------------------------------------------------------------------ */

.amx-rt-toolbar[b-3xljfjlcrz] {
    display: flex;
    /* Never compressed: in a short cell the editing area gives up its height, not the toolbar,
       so the buttons stay reachable. */
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.amx-rt-btn[b-3xljfjlcrz] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 100ms ease, color 100ms ease, border-color 100ms ease;
}

.amx-rt-btn:hover[b-3xljfjlcrz] {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.amx-rt-btn:focus-visible[b-3xljfjlcrz],
.amx-rt-file:focus-visible + .amx-rt-file-label[b-3xljfjlcrz] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

/* Active state: a solid accent fill, not a tint.
   The previous wash sat only a shade away from the hover background, so "this is on" and "my
   pointer is here" looked nearly the same. A filled button reads as on at a glance and from across
   a room, and it still says so without colour through aria-pressed and the inset marker below. */
.amx-rt-btn.is-active[b-3xljfjlcrz],
.amx-rt-btn[aria-pressed="true"][b-3xljfjlcrz] {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent, #ffffff);
}

.amx-rt-btn.is-active:hover[b-3xljfjlcrz],
.amx-rt-btn[aria-pressed="true"]:hover[b-3xljfjlcrz] {
    background-color: var(--accent-link);
    border-color: var(--accent-link);
    color: var(--text-on-accent, #ffffff);
}

/* A second, non-colour cue for the same state - colour alone should never be the only signal. */
.amx-rt-btn.is-active[b-3xljfjlcrz]::after,
.amx-rt-btn[aria-pressed="true"][b-3xljfjlcrz]::after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    left: 3px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--text-on-accent, #ffffff);
    opacity: 0.75;
}

/* Related controls sit together, so a separator marks a real boundary rather than arbitrary gaps. */
.amx-rt-group[b-3xljfjlcrz] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.amx-rt-select[b-3xljfjlcrz] {
    height: 30px;
    max-width: 5.5rem;
    padding: 0 4px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--text-xs, 0.6875rem);
    cursor: pointer;
}

.amx-rt-select:focus-visible[b-3xljfjlcrz],
.amx-rt-colour:focus-visible[b-3xljfjlcrz] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

/* A colour input renders as its own swatch; the chrome around it is stripped so it reads as a
   toolbar control rather than a form field. */
.amx-rt-colour[b-3xljfjlcrz] {
    width: 30px;
    height: 30px;
    padding: 2px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.amx-rt-colour[b-3xljfjlcrz]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.amx-rt-colour[b-3xljfjlcrz]::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}

/* Labels the size and colour controls for a screen reader without repeating text on screen. */
.amx-rt-visually-hidden[b-3xljfjlcrz] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.amx-rt-separator[b-3xljfjlcrz] {
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background-color: var(--border-color);
}

/* The file input stays in the tab order and reachable by keyboard - it is only moved out of sight,
   never display:none - while its label provides the visible button. */
.amx-rt-file[b-3xljfjlcrz] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.amx-rt-file-label[b-3xljfjlcrz] {
    cursor: pointer;
}

.amx-rt-status[b-3xljfjlcrz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 0 6px;
    color: var(--text-secondary);
    font-size: var(--text-xs, 0.6875rem);
}

/* Editing surface ---------------------------------------------------------------------------- */

.amx-rt-editor[b-3xljfjlcrz] {
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 10px;
    overflow-y: auto;
    background-color: var(--bg-input);
    color: var(--text-primary);
    font-size: var(--amx-control-font-size, 0.875rem);
    line-height: 1.5;
    outline: none;
    word-break: break-word;
}

.amx-rt-editor:empty[b-3xljfjlcrz]::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
}

/* Read-only rendering ------------------------------------------------------------------------ */

.amx-rt-view[b-3xljfjlcrz] {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 8px 10px;
    overflow-y: auto;
    background-color: var(--bg-input);
    color: var(--text-primary);
    font-size: var(--amx-control-font-size, 0.875rem);
    line-height: 1.5;
    word-break: break-word;
}

.amx-rt-view:focus-visible[b-3xljfjlcrz] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

/* Content ------------------------------------------------------------------------------------ */

.amx-rt-editor[b-3xljfjlcrz]  p,
.amx-rt-view[b-3xljfjlcrz]  p {
    margin: 0 0 0.5rem;
}

.amx-rt-editor[b-3xljfjlcrz]  h1,
.amx-rt-editor[b-3xljfjlcrz]  h2,
.amx-rt-editor[b-3xljfjlcrz]  h3,
.amx-rt-editor[b-3xljfjlcrz]  h4,
.amx-rt-view[b-3xljfjlcrz]  h1,
.amx-rt-view[b-3xljfjlcrz]  h2,
.amx-rt-view[b-3xljfjlcrz]  h3,
.amx-rt-view[b-3xljfjlcrz]  h4 {
    margin: 0.75rem 0 0.5rem;
    font-weight: 600;
    line-height: 1.3;
}

.amx-rt-editor[b-3xljfjlcrz]  h1,
.amx-rt-view[b-3xljfjlcrz]  h1 {
    font-size: 1.125rem;
}

.amx-rt-editor[b-3xljfjlcrz]  h2,
.amx-rt-view[b-3xljfjlcrz]  h2 {
    font-size: 1rem;
}

.amx-rt-editor[b-3xljfjlcrz]  h3,
.amx-rt-editor[b-3xljfjlcrz]  h4,
.amx-rt-view[b-3xljfjlcrz]  h3,
.amx-rt-view[b-3xljfjlcrz]  h4 {
    font-size: 0.9375rem;
}

.amx-rt-editor[b-3xljfjlcrz]  ul,
.amx-rt-editor[b-3xljfjlcrz]  ol,
.amx-rt-view[b-3xljfjlcrz]  ul,
.amx-rt-view[b-3xljfjlcrz]  ol {
    margin: 0 0 0.5rem;
    padding-left: 1.5rem;
}

.amx-rt-editor[b-3xljfjlcrz]  blockquote,
.amx-rt-view[b-3xljfjlcrz]  blockquote {
    margin: 0 0 0.5rem;
    padding: 0.25rem 0 0.25rem 0.75rem;
    border-left: 3px solid var(--border-color);
    color: var(--text-secondary);
}

.amx-rt-editor[b-3xljfjlcrz]  a,
.amx-rt-view[b-3xljfjlcrz]  a {
    color: var(--accent-link);
    text-decoration: underline;
}

.amx-rt-editor[b-3xljfjlcrz]  table,
.amx-rt-view[b-3xljfjlcrz]  table {
    width: auto;
    max-width: 100%;
    margin: 0 0 0.5rem;
    border-collapse: collapse;
}

.amx-rt-editor[b-3xljfjlcrz]  td,
.amx-rt-editor[b-3xljfjlcrz]  th,
.amx-rt-view[b-3xljfjlcrz]  td,
.amx-rt-view[b-3xljfjlcrz]  th {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}

.amx-rt-editor[b-3xljfjlcrz]  img,
.amx-rt-view[b-3xljfjlcrz]  img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

/* An image still on its way to storage; it disappears if the upload fails. */
.amx-rt-editor[b-3xljfjlcrz]  img.amx-rt-image-uploading {
    opacity: 0.55;
    outline: 2px dashed var(--border-interactive);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .amx-rt-btn[b-3xljfjlcrz] {
        transition: none;
    }
}
/* /Components/DataView/AmxSpacer.razor.rz.scp.css */
.spacer-wrapper-div[b-hhatpn58a5] {
    display: flex;
    width: 100%;
    /* min-height, not height: the heading is centred in the slot it was given, but a title that
       wraps past that slot makes the spacer taller instead of spilling out over the next field. */
    min-height: 100%;
    align-items: center;
    border-radius: 8px;
    padding: 0 8px;
}

.spacer-wrapper-div > span[b-hhatpn58a5] {
    width: 100%;
}

.spacer-title[b-hhatpn58a5] {
    overflow-wrap: anywhere;
}

/* Which of the spacer's two colours is used, both of them worked out from whatever colour
   customisation chose and set on the element (see AmxSpacer.razor). Chosen here rather than server
   side so switching theme repaints the spacer at once, with the rest of the page, instead of
   waiting for a re-render that may never come.

   Both rules live in this stylesheet on purpose: a value set in element.style outranks every
   stylesheet rule, so naming the colour on the element would leave the dark rule below with
   nothing it could win. */
.spacer-wrapper-div[b-hhatpn58a5] {
    --amx-spacer-ink: var(--amx-spacer-ink-light);
}

[data-theme="dark"] .spacer-wrapper-div[b-hhatpn58a5] {
    --amx-spacer-ink: var(--amx-spacer-ink-dark);
}
/* /Components/DataView/AmxStockView.razor.rz.scp.css */
/* Stock View / Report (display type 6) - an embedded report with Data and Chart tabs.
   Follows DESIGN_LANGUAGE.md: flat fills, hairline borders, one green accent, underline
   tabs, token-driven so light/dark theming is a one-file change. */

.amx-stockview[b-yd5p6gq4w3] {
    /* Light reference palette. Dark values are re-pointed below - never write per-rule
       dark overrides, only re-point these primitives. */
    --sv-bg: #fafafa;
    --sv-surface: #ffffff;
    --sv-fg: #18181b;
    --sv-muted: #616776;
    --sv-border: #e4e4e7;
    --sv-border-strong: #d4d4d8;
    --sv-subtle: #f4f4f5;
    --sv-accent: #15803d;
    --sv-accent-strong: #166534;
    --sv-accent-soft: #f0fdf4;
    --sv-danger: #c4201f;
    --sv-radius-sm: 6px;
    --sv-radius-md: 8px;
    --sv-radius-lg: 12px;

    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
    color: var(--sv-fg);
    font-size: .875rem;
}

[data-theme="dark"] .amx-stockview[b-yd5p6gq4w3] {
    --sv-bg: #0f1524;
    --sv-surface: #111726;
    --sv-fg: #e6e9f2;
    --sv-muted: #8e98ad;
    --sv-border: #202840;
    --sv-border-strong: #2c3552;
    --sv-subtle: #1a2136;
    --sv-accent: #22c55e;
    --sv-accent-strong: #4ade80;
    --sv-accent-soft: rgba(34, 197, 94, .12);
    --sv-danger: #ef4444;
}

/* ----- Header ----- */

.sv-header[b-yd5p6gq4w3] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--sv-border);
    background: var(--sv-surface);
    flex: 0 0 auto;
}

.sv-title[b-yd5p6gq4w3] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sv-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sv-title.is-bold[b-yd5p6gq4w3] {
    font-weight: 700;
}

.sv-header-actions[b-yd5p6gq4w3] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

/* ----- Buttons ----- */

.sv-btn[b-yd5p6gq4w3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px;
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius-md);
    background: var(--sv-surface);
    color: var(--sv-fg);
    font-size: .8125rem;
    font-weight: 550;
    cursor: pointer;
    transition: background-color 100ms ease, border-color 100ms ease;
}

.sv-btn:hover[b-yd5p6gq4w3] {
    background: var(--sv-subtle);
}

.sv-btn:focus-visible[b-yd5p6gq4w3],
.sv-tab:focus-visible[b-yd5p6gq4w3],
.sv-segment:focus-visible[b-yd5p6gq4w3],
.sv-icon-btn:focus-visible[b-yd5p6gq4w3] {
    outline: 2px solid var(--sv-accent);
    outline-offset: 2px;
}

.sv-btn.is-active[b-yd5p6gq4w3] {
    border-color: var(--sv-accent);
    background: var(--sv-accent-soft);
    color: var(--sv-accent-strong);
}

.sv-btn-primary[b-yd5p6gq4w3] {
    border-color: var(--sv-accent);
    background: var(--sv-accent);
    color: #fff;
}

.sv-btn-primary:hover[b-yd5p6gq4w3] {
    background: var(--sv-accent);
    filter: brightness(1.05);
}

.sv-filter-count[b-yd5p6gq4w3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--sv-accent);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
}

.sv-icon-btn[b-yd5p6gq4w3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--sv-radius-sm);
    background: transparent;
    color: var(--sv-muted);
    cursor: pointer;
}

.sv-icon-btn:hover[b-yd5p6gq4w3] {
    background: var(--sv-subtle);
    color: var(--sv-fg);
}

/* ----- Underline tabs (canonical in-page tab bar) ----- */

.sv-tabbar[b-yd5p6gq4w3] {
    display: flex;
    gap: .25rem;
    padding: 0 .5rem;
    border-bottom: 1px solid var(--sv-border);
    background: var(--sv-surface);
    overflow-x: auto;
    flex: 0 0 auto;
}

.sv-tab[b-yd5p6gq4w3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .6rem 1rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--sv-muted);
    font-size: .8125rem;
    font-weight: 550;
    white-space: nowrap;
    cursor: pointer;
    transition: color 100ms ease, background-color 100ms ease;
}

.sv-tab:hover[b-yd5p6gq4w3] {
    background: var(--sv-subtle);
    color: var(--sv-fg);
}

.sv-tab.is-active[b-yd5p6gq4w3] {
    color: var(--sv-fg);
    font-weight: 600;
    border-bottom-color: var(--sv-accent);
}

.sv-tab.is-active i[b-yd5p6gq4w3] {
    color: var(--sv-accent-strong);
}

/* ----- Panel ----- */

.sv-panel[b-yd5p6gq4w3] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: var(--sv-surface);
}

.sv-data[b-yd5p6gq4w3],
.sv-chart[b-yd5p6gq4w3],
.sv-all[b-yd5p6gq4w3] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.sv-data[b-yd5p6gq4w3] {
    overflow: hidden;
}

.sv-chart[b-yd5p6gq4w3] {
    gap: .5rem;
    padding: .5rem .75rem .75rem;
    overflow: auto;
}

.sv-all[b-yd5p6gq4w3] {
    gap: .75rem;
    padding: .75rem;
    overflow: auto;
}

/* ----- Segmented control (Chart / Data / Both) ----- */

.sv-segmented[b-yd5p6gq4w3] {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border-radius: var(--sv-radius-md);
    background: var(--sv-subtle);
    align-self: flex-start;
    flex: 0 0 auto;
}

.sv-segment[b-yd5p6gq4w3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 2px 12px;
    border: none;
    border-radius: var(--sv-radius-sm);
    background: transparent;
    color: var(--sv-muted);
    font-size: .8125rem;
    font-weight: 550;
    cursor: pointer;
}

.sv-segment:hover[b-yd5p6gq4w3] {
    color: var(--sv-fg);
}

.sv-segment.is-active[b-yd5p6gq4w3] {
    background: var(--sv-surface);
    color: var(--sv-accent-strong);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

/* ----- Chart / data layout ----- */

.sv-chart-layout[b-yd5p6gq4w3] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.sv-canvas-wrap[b-yd5p6gq4w3] {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 260px;
}

.sv-chart-layout.is-split .sv-canvas-wrap[b-yd5p6gq4w3] {
    flex: 0 0 auto;
    min-height: 260px;
    margin-bottom: .75rem;
}

.sv-canvas-wrap canvas[b-yd5p6gq4w3] {
    max-width: 100%;
}

.sv-note[b-yd5p6gq4w3] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: .4rem .6rem;
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-sm);
    background: var(--sv-subtle);
    color: var(--sv-muted);
    font-size: .8125rem;
    flex: 0 0 auto;
}

/* ----- Chart card (All tab) ----- */

.sv-card[b-yd5p6gq4w3] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem;
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-lg);
    background: var(--sv-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.sv-card-title[b-yd5p6gq4w3] {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--sv-fg);
}

.sv-card-empty[b-yd5p6gq4w3] {
    margin: 0;
    padding: 1rem 0;
    color: var(--sv-muted);
    font-size: .8125rem;
    text-align: center;
}

/* ----- Chart data table ----- */

.sv-table-wrap[b-yd5p6gq4w3] {
    width: 100%;
    overflow: auto;
    min-height: 0;
}

.sv-table[b-yd5p6gq4w3] {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
}

.sv-table th[b-yd5p6gq4w3],
.sv-table td[b-yd5p6gq4w3] {
    border: 1px solid var(--sv-border);
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
    color: var(--sv-fg);
}

.sv-table thead th[b-yd5p6gq4w3] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--sv-subtle);
    font-weight: 600;
}

.sv-table tbody th[b-yd5p6gq4w3] {
    background: var(--sv-subtle);
    font-weight: 600;
}

.sv-sr-only[b-yd5p6gq4w3] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ----- Empty / error / loading states ----- */

.sv-state[b-yd5p6gq4w3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin: auto;
    padding: 1.75rem 1.5rem;
    max-width: 420px;
    text-align: center;
}

.sv-state h4[b-yd5p6gq4w3] {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--sv-fg);
}

.sv-state p[b-yd5p6gq4w3] {
    margin: 0 0 .35rem;
    font-size: .8125rem;
    color: var(--sv-muted);
}

.sv-state-icon[b-yd5p6gq4w3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: .35rem;
    border-radius: 50%;
    background: var(--sv-accent-soft);
    color: var(--sv-accent-strong);
    font-size: 1.15rem;
}

.sv-state-icon.is-danger[b-yd5p6gq4w3] {
    background: var(--sv-subtle);
    color: var(--sv-danger);
}

/* The embedded data grid fills the panel rather than sizing to its content. */
[b-yd5p6gq4w3] .sv-data .data-grid-container,
[b-yd5p6gq4w3] .sv-data .data-grid-wrapper,
[b-yd5p6gq4w3] .sv-data .data-grid-content,
[b-yd5p6gq4w3] .sv-data .table-container {
    min-height: 0;
    flex: 1 1 auto;
    width: 100%;
}
/* /Components/DataView/AmxSubTabView.razor.rz.scp.css */
.sub-tabs-container[b-d199hasg5j] {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: max-content;
    overflow: auto;
    background-color: transparent;
    border-radius: var(--radius-lg);
}

#subTabAccordion[b-d199hasg5j]{
    width: 100%;
}
/* /Components/DataView/AmxTextBox.razor.rz.scp.css */
/* The field itself is the shared .amx-field shell (wwwroot/css/amx-field.css); only the
   list reset that the validation messages rely on is specific to this component. */
ul[b-ei6btswq4a] {
    list-style: none;
    margin: 0 !important;
}

.amx-field.is-stretched[b-ei6btswq4a] {
    min-height: 0;
    height: 100%;
}
/* /Components/DataView/AmxTitleView.razor.rz.scp.css */
.title-view-span[b-6lmmwqeyeg] {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0.5rem 0;
    font-weight: bold;
}
/* /Components/DataView/AmxUserRoleHelper.razor.rz.scp.css */
.user-role-helper[b-ulk7rpcg6r] { display: flex; flex-direction: column; gap: var(--space-3, .75rem); width: 100%; min-width: 0; color: var(--text-primary); }
.role-modes[b-ulk7rpcg6r] { display: flex; flex-wrap: wrap; gap: var(--space-3, .75rem); padding: 0; border: 0; margin: 0; }
.role-modes legend[b-ulk7rpcg6r] { font-size: .875rem; font-weight: 600; }
.role-modes label[b-ulk7rpcg6r], .role-common[b-ulk7rpcg6r] { display: inline-flex; align-items: center; gap: var(--space-2, .5rem); margin: 0; }
.role-toolbar[b-ulk7rpcg6r] { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4, 1rem); }
.role-search[b-ulk7rpcg6r] { flex: 1 1 15rem; min-width: 0; }
.role-search label[b-ulk7rpcg6r] { font-size: .8125rem; font-weight: 600; }
.role-search input[b-ulk7rpcg6r] { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-interactive); }
.role-note[b-ulk7rpcg6r] { color: var(--text-secondary); font-size: .8125rem; margin: 0; }
.role-table-scroll[b-ulk7rpcg6r] { overflow: auto; min-width: 0; border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px); }
.role-table[b-ulk7rpcg6r] { width: 100%; border-collapse: collapse; font-size: .8125rem; background: var(--bg-card); color: var(--text-primary); }
.role-table th[b-ulk7rpcg6r], .role-table td[b-ulk7rpcg6r] { padding: var(--space-2, .5rem); border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.role-table thead th[b-ulk7rpcg6r] { background: var(--bg-secondary); font-weight: 600; }
.role-table tbody th[b-ulk7rpcg6r] { font-weight: 500; min-width: 16rem; }
.role-permission[b-ulk7rpcg6r] { text-align: center; }
.role-warning[b-ulk7rpcg6r] { display: block; color: var(--text-secondary); font-size: .75rem; margin-top: var(--space-1, .25rem); }
.role-specific[b-ulk7rpcg6r] { background: var(--bg-secondary); }
.user-role-helper input[type=checkbox][b-ulk7rpcg6r], .user-role-helper input[type=radio][b-ulk7rpcg6r] { width: 24px; height: 24px; flex-shrink: 0; accent-color: var(--accent-success); }
.user-role-helper :focus-visible[b-ulk7rpcg6r] { outline: 2px solid var(--border-focus, var(--accent-success-fill)); outline-offset: 2px; }
/* /Components/DataView/ChildAssetsTree.razor.rz.scp.css */
/* Related assets: an inline blue link that sits under the page-state title, next to the Back
   button. Clicking it opens a dropdown styled to match the recent-assets list
   (Components/Menu/RecentAssetsDropdown.razor) so the two read as the same kind of list.

   Colours come from the global semantic tokens in wwwroot/app.css, which already carry their
   dark-theme values - so no hard-coded colours and no separate dark-mode rules. */

.related-assets[b-0ii10ansk0] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
}

/* ===== INLINE LINK ===== */

.related-assets__link[b-0ii10ansk0],
.related-assets__loading[b-0ii10ansk0] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    min-width: 0;
    padding: 2px 10px;
    border: 0;
    background: transparent;
    font-size: 0.8rem;
    line-height: 1.3;
}

.related-assets__link[b-0ii10ansk0] {
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.related-assets__loading[b-0ii10ansk0] {
    color: var(--text-secondary);
}

.related-assets__icon[b-0ii10ansk0] {
    flex-shrink: 0;
    transform: rotate(90deg);
    opacity: 0.6;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.related-assets__label[b-0ii10ansk0] {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.related-assets__name[b-0ii10ansk0] {
    color: var(--accent-primary);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.related-assets__link:hover .related-assets__name[b-0ii10ansk0] {
    text-decoration: underline;
}

.related-assets__chevron[b-0ii10ansk0] {
    flex-shrink: 0;
    font-size: 0.65rem;
    color: var(--text-secondary);
    transition: transform 0.15s ease;
}

.related-assets__chevron.is-open[b-0ii10ansk0] {
    transform: rotate(180deg);
}

/* Keyboard focus must stay clearly visible (WCAG 2.4.7). */
.related-assets__link:focus-visible[b-0ii10ansk0] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* ===== DROPDOWN ===== */

/* Fixed, not absolute: the toolbar ancestor is overflow:auto and would clip the panel.
   AmxAnchorDropdown sets top/left/max-height against the link on open - the values here are
   the pre-anchor fallback for the frame before that runs. */
.related-assets__dropdown[b-0ii10ansk0] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    width: 440px;
    max-width: 92vw;
    max-height: 640px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: relatedDropdownPop-b-0ii10ansk0 0.15s ease-out;
}

@keyframes relatedDropdownPop-b-0ii10ansk0 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respect a reduced-motion preference (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
    .related-assets__dropdown[b-0ii10ansk0] {
        animation: none;
    }
}

.related-assets__dropdown-header[b-0ii10ansk0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    flex-shrink: 0;
}

.related-assets__dropdown-icon[b-0ii10ansk0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-wash);
    color: var(--accent-primary);
    font-size: 0.95rem;
}

.related-assets__dropdown-title[b-0ii10ansk0] {
    flex: 1;
}

.related-assets__dropdown-count[b-0ii10ansk0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--accent-primary);
    /* Literal white, as in the recent-assets list: this pairs against the accent fill, which is
       a saturated blue in both themes, not against a themed surface. --text-on-accent is named
       in DESIGN_LANGUAGE.md but is not defined in app.css. */
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.related-assets__items[b-0ii10ansk0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 6px;
}

.related-assets__group[b-0ii10ansk0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.related-assets__group-label[b-0ii10ansk0] {
    padding: 6px 6px 2px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}

.related-assets__loading-panel[b-0ii10ansk0] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.related-assets__empty[b-0ii10ansk0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 20px;
    color: var(--text-secondary);
}

.related-assets__empty i[b-0ii10ansk0] {
    font-size: 2rem;
    opacity: 0.45;
}
/* /Components/DataView/CustomUpdateFileContentsModal.razor.rz.scp.css */
.cuf-heading[b-pd6h38ghaz] {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: var(--text-primary);
}

.cuf-heading-icon[b-pd6h38ghaz] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    background: var(--accent-success-fill);
    color: var(--text-on-dark);
}

.cuf-heading-copy[b-pd6h38ghaz] { display: flex; flex-direction: column; min-width: 0; }
.cuf-modal-title[b-pd6h38ghaz] { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.cuf-modal-subtitle[b-pd6h38ghaz] { color: var(--text-secondary); font-size: .8125rem; font-weight: 400; }

.cuf-body[b-pd6h38ghaz] {
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --text-xs: .6875rem;
    --text-sm: .8125rem;
    --text-lg: 1rem;
    --font-mono: 'SF Mono', Consolas, monospace;
    max-height: calc(100vh - 12rem);
    min-height: 13rem;
    overflow-y: auto;
    padding: var(--space-1);
    color: var(--text-primary);
}

.cuf-toolbar[b-pd6h38ghaz], .cuf-section-heading[b-pd6h38ghaz], .cuf-actions[b-pd6h38ghaz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.cuf-toolbar[b-pd6h38ghaz] {
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.cuf-summary[b-pd6h38ghaz] { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
.cuf-actions[b-pd6h38ghaz] { justify-content: flex-start; }
.cuf-body .btn.dbd-btn.dbd-success[b-pd6h38ghaz] { --cuf-action-fill: var(--accent-success-fill); }
.cuf-body .btn.dbd-btn.dbd-danger[b-pd6h38ghaz] { --cuf-action-fill: var(--accent-danger-fill); }
.cuf-body .btn.dbd-btn:is(.dbd-success, .dbd-danger)[b-pd6h38ghaz],
.cuf-body .btn.dbd-btn:is(.dbd-success, .dbd-danger):is(:hover, :focus, :active)[b-pd6h38ghaz] {
    background: var(--cuf-action-fill);
    border-color: var(--cuf-action-fill);
    color: var(--text-on-dark) !important;
}
.cuf-panel[b-pd6h38ghaz] { color: var(--text-primary); }
.cuf-add-panel[b-pd6h38ghaz] {
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.cuf-list-panel[b-pd6h38ghaz] { padding: 0 var(--space-1); }
.cuf-section-heading[b-pd6h38ghaz] { margin-bottom: var(--space-3); }
.cuf-section-heading h3[b-pd6h38ghaz] { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.cuf-count[b-pd6h38ghaz] { color: var(--text-secondary); font-size: var(--text-sm); font-weight: 400; }
.cuf-search[b-pd6h38ghaz] { display: flex; align-items: center; gap: var(--space-2); }
.cuf-search label[b-pd6h38ghaz] { white-space: nowrap; font-size: var(--text-sm); color: var(--text-secondary); }
.cuf-search input[b-pd6h38ghaz] { width: 15rem; }

.cuf-form-grid[b-pd6h38ghaz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.cuf-field[b-pd6h38ghaz] { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.cuf-field label[b-pd6h38ghaz] { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
.cuf-wide[b-pd6h38ghaz] { grid-column: 1 / -1; }
.cuf-textarea[b-pd6h38ghaz] { min-height: 0; resize: vertical; }
.cuf-checkbox[b-pd6h38ghaz] { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }

.cuf-table-scroll[b-pd6h38ghaz] { overflow-x: auto; border: 1px solid var(--border-color); border-radius: 8px; }
.cuf-table[b-pd6h38ghaz] { width: 100%; min-width: 64rem; table-layout: fixed; border-collapse: collapse; font-size: var(--text-sm); }
.cuf-col-id[b-pd6h38ghaz] { width: 5.5rem; }
.cuf-col-priority[b-pd6h38ghaz] { width: 7.5rem; }
.cuf-col-mode[b-pd6h38ghaz] { width: 10rem; }
.cuf-col-key[b-pd6h38ghaz], .cuf-col-column[b-pd6h38ghaz] { width: 7.5rem; }
.cuf-col-action[b-pd6h38ghaz] { width: 7rem; }
.cuf-row-actions[b-pd6h38ghaz] { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.cuf-edit-error[b-pd6h38ghaz] { color: var(--accent-danger-text); font-size: var(--text-sm); }
.cuf-mode[b-pd6h38ghaz], .cuf-key[b-pd6h38ghaz], .cuf-column[b-pd6h38ghaz] { overflow-wrap: anywhere; }
.cuf-table th[b-pd6h38ghaz], .cuf-table td[b-pd6h38ghaz] {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}
.cuf-table th[b-pd6h38ghaz] { color: var(--text-secondary); font-weight: 600; white-space: nowrap; background: var(--bg-secondary); }
.cuf-table tbody tr:nth-child(even)[b-pd6h38ghaz] { background: var(--bg-secondary); }
.cuf-table tbody tr:hover[b-pd6h38ghaz] { background: var(--bg-hover); }
.cuf-table tbody tr:last-child td[b-pd6h38ghaz] { border-bottom: 0; }
.cuf-priority[b-pd6h38ghaz] { width: 5.5rem; min-width: 5.5rem; }
.cuf-sql[b-pd6h38ghaz] { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: inherit; line-height: 1.5; color: var(--text-primary); }
.cuf-details[b-pd6h38ghaz] { overflow-wrap: anywhere; }
.cuf-detail-information[b-pd6h38ghaz] { white-space: pre-wrap; }
.cuf-detail-label[b-pd6h38ghaz] { display: block; margin-bottom: var(--space-1); font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
.cuf-detail-sql + .cuf-detail-information[b-pd6h38ghaz] { margin-top: var(--space-3); }

@media (min-width: 1200px) {
    .cuf-modal-host[b-pd6h38ghaz]  .cuf-contents-dialog { width: calc(100vw / var(--amx-ui-scale, 1) - 3rem); max-width: calc(1600px / var(--amx-ui-scale, 1)); }
}

.cuf-body :is(input, select, textarea)[b-pd6h38ghaz] { border-color: var(--border-interactive); }
.cuf-body .btn.dbd-btn:focus-visible:not(:disabled)[b-pd6h38ghaz],
.cuf-body :is(button, a, input, select, textarea, [tabindex="0"]):focus-visible[b-pd6h38ghaz] {
    outline: 2px solid var(--border-focus, var(--border-interactive));
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .cuf-form-grid[b-pd6h38ghaz] { grid-template-columns: minmax(0, 1fr); }
    .cuf-search[b-pd6h38ghaz] { width: 100%; align-items: flex-start; flex-direction: column; }
    .cuf-search input[b-pd6h38ghaz] { width: 100%; }
}
/* /Components/DataView/DataAccordions/DataAccordion.razor.rz.scp.css */
.accordion-body[b-8v4as51pwi] {
    padding: 0 !important;
}

[b-8v4as51pwi] .tab-list > li {
    width: 100%;
}

.tab-content-wrapper[b-8v4as51pwi] {
    display: flex;
    flex-direction: column;
    background-color: white;
    overflow: auto;
}

.tab-content-wrapper .inner-tab-content-wrapper[b-8v4as51pwi] {
    overflow: auto;
    height: 100%;
    background-color: white;
}

.accordion-button[b-8v4as51pwi] {
    justify-content: flex-start !important;
}

/* Bootstrap 5.1 hard-codes the section header white with near-black text, and has no theme of its
   own to follow. In dark mode that left the header a white bar - and app.css re-colours every
   button's text to --text-primary there, so the title was near-white ON that white bar and all but
   vanished. These put the header on the theme tokens instead. In light mode the tenant's primary
   colour still paints over the top; see the style block in DataAccordion.razor. */
.accordion-item[b-8v4as51pwi] {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Open and closed share a colour: the arrow already says which one it is, and Bootstrap's open
   state is a fixed pale blue that belongs to neither theme. */
.accordion-button[b-8v4as51pwi],
.accordion-button:not(.collapsed)[b-8v4as51pwi] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    box-shadow: none;
}

.accordion-button:hover[b-8v4as51pwi] {
    background-color: var(--bg-hover);
}

/* Bootstrap's focus ring is a fixed blue glow that barely reads on a dark surface. Swapped for the
   app's focus outline, inset so the container's overflow clipping cannot cut it off. */
.accordion-button:focus[b-8v4as51pwi] {
    box-shadow: none;
}

.accordion-button:focus-visible[b-8v4as51pwi] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: -2px;
}

.accordion-button[b-8v4as51pwi]:after {
    display: none !important;
}

.accordion-arrow[b-8v4as51pwi] {
    border: solid var(--text-primary);
    border-width: 0 3px 3px 0;
    display: flex;
    padding: 5px;
    align-items: center;
    margin-right: 10px;
}

.accordion-arrow.right[b-8v4as51pwi] {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transition: 0.3s;
}

.accordion-arrow.down[b-8v4as51pwi] {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transition: 0.3s;
}

.components-wrapper[b-8v4as51pwi] {
    padding: 5px;
}

/* ── Phone width: one column ─────────────────────────────────────────────────────────
   An accordion section lays its fields out on a grid of its own, with the same inline
   grid-template-columns and the same per-field placement as the tab grid outside it - so it needs
   the same collapse, or a section stays three columns wide inside a form that is now one.
   See the matching block in DataViewControls.razor.css for why this is a media query and why
   every declaration is !important. */
@media (max-width: 768px) {
    [b-8v4as51pwi] .d-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-rows: minmax(55px, max-content) !important;
    }

    [b-8v4as51pwi] .d-grid > .component-container {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        max-height: none !important;
    }
}

/* The same collapse when the section's own columns are too narrow for a field - amxFormFit.js sets
   the attribute. See the matching block in DataViewControls.razor.css. */
[b-8v4as51pwi] .d-grid[data-amx-single-column] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: minmax(55px, max-content) !important;
}

[b-8v4as51pwi] .d-grid[data-amx-single-column] > .component-container {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    max-height: none !important;
}

.fa-circle-exclamation[b-8v4as51pwi] {
    color: var(--accent-danger-text) !important;
    padding: 0 10px;
}
/* /Components/DataView/DataAccordions/DataAccordionsComponent.razor.rz.scp.css */
.accordions-page-wrapper[b-glv6tpoyko] {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--bg-card);

    /* Content height, not container height. An expanded section has to open into the form's own
       scroll area; giving this wrapper the container's height and its own scrollbar would put a
       second scroller inside the page and cap how far the sections can open. */
    height: max-content;
    overflow: visible;
}
/* /Components/DataView/DataSelectionModal.razor.rz.scp.css */
/* Multi-select picker dialog. Follows DESIGN_LANGUAGE.md: shared AmxModal chrome, flat fills, a
   single hairline between the toolbar and the list, and the picker shape that document describes
   (search row over a scrollable result list).

   Colours come from the global semantic tokens in wwwroot/app.css, which already carry their
   dark-theme values - so no hard-coded colours and no separate dark-mode rules. */

/* ===== HEADER ===== */

.ds-head[b-v9xk3fgq20] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.ds-head__text[b-v9xk3fgq20] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.ds-head__title[b-v9xk3fgq20] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Quiet caption under the title - the running count, so the header answers "how many?" without
   the eye travelling to the toolbar. */
.ds-head__subtitle[b-v9xk3fgq20] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* ===== BODY ===== */

/* AmxModal's default modal-dialog-scrollable gives the body a fixed height, so the toolbar can
   stay put while only the list scrolls. */
.ds-body[b-v9xk3fgq20] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    min-height: 0;
}

/* ===== TOOLBAR ===== */

.ds-toolbar[b-v9xk3fgq20] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

/* Count reads as a chip rather than a sentence so it survives being scanned at a glance. */
.ds-count[b-v9xk3fgq20] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: var(--accent-wash);
    color: var(--text-primary);
    font-size: 0.8125rem;
}

.ds-count__value[b-v9xk3fgq20] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ds-count__label[b-v9xk3fgq20] {
    color: var(--text-secondary);
}

.ds-toolbar__actions[b-v9xk3fgq20] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ds-toolbar__actions .btn[b-v9xk3fgq20] {
    gap: 6px;
}

/* ===== LIST ===== */

.ds-grid[b-v9xk3fgq20] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* ===== LOADING / EMPTY ===== */

.ds-state[b-v9xk3fgq20] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    text-align: center;
}

.ds-state__icon[b-v9xk3fgq20] {
    font-size: 1.75rem;
    color: var(--text-muted);
}

.ds-state__text[b-v9xk3fgq20] {
    margin: 0;
    color: var(--text-secondary);
}

/* ===== FOOTER ===== */

.ds-footer[b-v9xk3fgq20] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
    flex-wrap: wrap;
}

.ds-footer .btn[b-v9xk3fgq20] {
    gap: 6px;
}
/* /Components/DataView/DataTabs/DataTab.razor.rz.scp.css */
/* Child-level navigation: underlined tabs. Smaller and quieter than the parent section pills,
   and physically attached to the panel they switch, so the hierarchy reads at a glance. */
.data-tab-li[b-uny8xfa5lb] {
    display: flex;
    flex: 0 0 auto;
    padding: 0 !important;
    margin: 0;
}

.tab-btn[b-uny8xfa5lb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 8px 13px;
    border: 1px solid var(--border-color);
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--bg-card);
    color: var(--text-secondary, #495057);
    font-weight: 550;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    line-height: 1.35;
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.tab-btn .tab-btn-icon i[b-uny8xfa5lb] {
    opacity: 0.85;
}

.tab-btn:hover[b-uny8xfa5lb] {
    color: var(--text-primary, #212529);
    background: var(--bg-hover, rgba(13, 110, 253, 0.08));
}

.tab-btn:focus-visible[b-uny8xfa5lb] {
    outline: 2px solid var(--accent-success-text);
    outline-offset: -2px;
}

.tab-btn.active[b-uny8xfa5lb] {
    color: var(--accent-success-text);
    font-weight: 700;
    background: var(--bg-secondary);
    border-bottom-color: var(--accent-success-text);
}

.tab-btn.active:hover[b-uny8xfa5lb] {
    background: var(--bg-hover);
}

.data-tab-li.validation-errors .tab-btn[b-uny8xfa5lb] {
    color: var(--accent-danger-text) !important;
    border-bottom-color: var(--accent-danger-text) !important;
}

.tab-btn .tab-btn-icon.tab-btn-error i[b-uny8xfa5lb] {
    opacity: 1;
}

/* A tab with configured colours sets them inline, which beats the hover and active background
   rules above. Darken on hover instead, and keep the underline for the active state - a border
   an inline background cannot override. */
.tab-btn.has-tab-colours:hover[b-uny8xfa5lb],
.tab-btn.has-tab-colours.active:hover[b-uny8xfa5lb] {
    filter: brightness(0.92);
}

@media (prefers-reduced-motion: reduce) {
    .tab-btn[b-uny8xfa5lb] {
        transition: none;
    }
}

@media (forced-colors: active) {
    .tab-btn.active[b-uny8xfa5lb] {
        border-bottom: 3px solid Highlight;
    }
}
/* /Components/DataView/DataTabs/DataTabsComponent.razor.rz.scp.css */
.data-tab-page-wrapper[b-8qf2232u9o] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
}

/* The banner is the first thing in the tab content and scrolls with it: while it is showing the
   tab content is the one scroller (.has-validation-banner below), so there is no cap or scroller on
   the list itself. */
.validation-banner[b-8qf2232u9o] {
    flex: 0 0 auto;
}

.validation-summary[b-8qf2232u9o] {
    font-size: 0.8125rem;
}

.validation-error-list > li[b-8qf2232u9o] {
    flex-shrink: 0;
}

.validation-error-list:focus-visible[b-8qf2232u9o] {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
}

.validation-field-link[b-8qf2232u9o] {
    background: var(--bg-card);
    color: var(--accent-danger-text);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.validation-field-link:hover[b-8qf2232u9o] {
    background: var(--bg-hover);
    text-decoration: underline;
}

.validation-field-link:focus-visible[b-8qf2232u9o] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Holds the summary panel button and the tab strip on one line. This row is the panel's header
   band: it is tinted a step back from the form below it and carries the only divider, so the
   child tabs read as part of the panel they switch. */
.data-tab-strip-row[b-8qf2232u9o] {
    display: flex;
    align-items: center;
    width: 100%;
    height: max-content;
}

/* Only paint the band when there is something in the row - with a single form the tab strip is
   hidden, and a bare 1px band under the panel's top edge would look like a rendering fault. */
.data-tab-strip-row.has-tabs[b-8qf2232u9o],
.data-tab-strip-row.has-summary-toggle[b-8qf2232u9o] {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--radius-md, 12px) var(--radius-md, 12px) 0 0;
}

.data-tab-strip-row.has-summary-toggle[b-8qf2232u9o] {
    padding-left: 6px;
}

/* The toggle button already provides the left inset. */
.data-tab-strip-row.has-summary-toggle .data-tab-list[b-8qf2232u9o] {
    padding-left: 0 !important;
}

.summary-panel-open[b-8qf2232u9o] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin: 5px 8px 5px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* The border is this control's only boundary, so it needs the >=3:1 token (WCAG 1.4.11). */
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm);
    background-color: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.summary-panel-open:hover[b-8qf2232u9o] {
    background-color: var(--bg-hover);
    color: var(--accent-link);
    border-color: var(--accent-link);
}

.summary-panel-open:focus-visible[b-8qf2232u9o] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 2px;
}

.data-tabs-wrapper[b-8qf2232u9o] {
    display: block;
    width: 100%;
    height: max-content;
    flex: 1 1 auto;
    min-width: 0;
}

.data-tabs-wrapper.hide[b-8qf2232u9o] {
    visibility: hidden !important;
    height: 0 !important;
}

/* Same pairing, and the same reasoning, as .section-tabs-wrapper: the component publishes only
   the customer's colour and the theme decides the rest, so a toggle or a navigation cannot leave
   the strip in the other palette. */
.data-tab-list[b-8qf2232u9o] {
    --tab-accent: var(--tab-accent-primary, var(--accent-primary));
    --tab-accent-contrast: #ffffff;
    list-style: none;
    display: flex;
    gap: 2px;
    height: max-content;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    flex-wrap: wrap;
    background: var(--bg-primary);
}

.data-tab-content-wrapper[b-8qf2232u9o] {
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: 100%;
    background-color: var(--bg-card);
}

.data-tab-content-wrapper .inner-data-tab-content-wrapper[b-8qf2232u9o] {
    overflow: auto;
    height: 100%;
}

/* With the validation banner showing, nothing between the tab content and the fields scrolls on its
   own: the tab content scrolls banner and form together, so the messages sit at the top without a
   second scrollbar and without taking height from the form.

   The form keeps the tab's full height below the banner (height: 100% of the tab content, not
   auto). The form grid is height: 100% with a 1fr track that a "stretch vertically" field fills
   (DataViewControls.GetGridLayoutStyle); with an auto height there was nothing for that 100% to
   resolve against, so the track fell to its minimum and stretched fields shrank the moment a
   validation message appeared, pulling the form out of shape. A form taller than the tab still
   overflows into the one scroller. */
.data-tab-content-wrapper.has-validation-banner > .inner-data-tab-content-wrapper[b-8qf2232u9o] {
    flex: 0 0 auto;
    overflow: visible;
}

.data-tab-content-wrapper.has-validation-banner > .inner-data-tab-content-wrapper[b-8qf2232u9o]  :is(.dataview-controls-wrapper, .components-wrapper) {
    overflow: visible;
}

/* Dark mode uses the lighter blue the rest of the dark theme uses, which needs dark text when
   filled. Selected on the document attribute, not computed server-side - see
   SectionTabsComponent.TabAccentStyle. */
[data-theme="dark"] .data-tab-list[b-8qf2232u9o] {
    --tab-accent: #73adff;
    --tab-accent-contrast: #0f1524;
}

/* ── Phone: the strip gives way to the picker ────────────────────────────────
   The select is in the markup beside the strip and .amx-tab-select in app.css decides when it
   shows; this is the other half of that swap. Hiding rather than not rendering keeps the two in
   step with no viewport detection in C#, and display:none also removes the strip from the
   accessibility tree, so the tabs are offered once. */
@media (max-width: 1000px) {
    .data-tab-strip-row .data-tabs-wrapper[b-8qf2232u9o] {
        display: none;
    }

    /* A gap between the picker and the form below it. The picker sits flush in the band, whose edge
       is the line above the form, so the gap goes inside the band (padding), not outside it. */
    .data-tab-strip-row.has-tabs[b-8qf2232u9o],
    .data-tab-strip-row.has-summary-toggle[b-8qf2232u9o] {
        padding-bottom: 0.5rem;
    }
}
/* /Components/DataView/DataViewControls.razor.rz.scp.css */
.dataview-controls-wrapper[b-xb4bef3l3f] {
    --amx-field-min-height: 35px;
    --amx-field-padding-y: 5px;
    height: 100%;
    overflow: auto;
}

.components-wrapper[b-xb4bef3l3f] {
    display: block;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 10px;
}

[b-xb4bef3l3f] .components-wrapper .component-container {
    padding: 0 5px 0 5px;
    overflow: auto;
    min-height: 0;
}

[b-xb4bef3l3f] .components-wrapper .component-container.grid-component-container {
    overflow: hidden;
}

[b-xb4bef3l3f] .components-wrapper .component-container.diagram-auto-size {
    overflow: visible;
}

/* ── Phone width: one column ─────────────────────────────────────────────────────────
   A form designed in the form designer has a fixed number of columns, and GetGridLayoutStyle()
   writes them onto the grid as an inline style - "34fr 33fr 33fr" for a three-column form - with
   each field placed by grid-column-start / grid-row-start. On a phone that means three ~160px
   columns, which leaves a label about 72px of track: every label wraps to three or four lines and
   the form becomes a thicket.

   Below 768px the columns collapse to one and the fields fall back into document order, which
   ControlTemplate emits row by row (for r { for c }) - so a single column reads in exactly the
   order the designer laid the form out, left to right, top to bottom.

   Everything here is !important because it is competing with an inline style, and nothing else
   beats one. The explicit placement has to go with the columns: leaving grid-row-start in place
   while collapsing to one column would stack three fields into the same row.

   The breakpoint is deliberately on the viewport and not a container query: a container query
   would need container-type: inline-size, which applies `contain` and would make this grid the
   containing block for every popup a field opens inside it. */
@media (max-width: 768px) {
    .components-wrapper > .d-grid[b-xb4bef3l3f] {
        grid-template-columns: minmax(0, 1fr) !important;
        /* The rows were a list as long as the form; one column needs as many rows as there are
           fields, so let them be generated instead. 38px is LayoutRowHeightPx. */
        grid-template-rows: none !important;
        grid-auto-rows: minmax(38px, max-content) !important;
        /* The grid no longer fills the tab - it is as tall as the fields make it, and
           .components-wrapper scrolls. */
        height: auto !important;
    }

    [b-xb4bef3l3f] .components-wrapper > .d-grid > .component-container {
        grid-column: 1 / -1 !important;
        /* Placed in order, but keeping the rows it spans - a four-row text box is still four rows. */
        grid-row: auto / span var(--amx-row-span, 1) !important;
        /* Down each column in turn rather than across the rows - see GetReadingOrder. */
        order: var(--amx-reading-order, 0);
        /* Stretched fields carry max-height: <rowspan>px, which was the height of the rows they
           were given, and a photo is size contained to its rows. In one column a field is as tall
           as it needs to be. */
        max-height: none !important;
        contain: none !important;
    }
}

/* ── Columns too narrow for a field: one column ────────────────────────────────────────
   The same collapse as a phone, for a form on a wide screen whose own columns have got too narrow
   to hold a field even with its label stacked above it - a narrow window, a form in a side panel, a
   high zoom. amxFormFit.js measures the columns and sets the attribute; it is a script rather than
   a container query for the same reason the phone rule is a media query (see above). Before it gets
   that far, a field first stacks its own label above its control (amxFormFit.js again), which costs
   the form far less than losing its columns. */
.components-wrapper > .d-grid[data-amx-single-column][b-xb4bef3l3f] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-rows: minmax(38px, max-content) !important;
    height: auto !important;
}

[b-xb4bef3l3f] .components-wrapper > .d-grid[data-amx-single-column] > .component-container {
    grid-column: 1 / -1 !important;
    grid-row: auto / span var(--amx-row-span, 1) !important;
    order: var(--amx-reading-order, 0);
    max-height: none !important;
    contain: none !important;
}

[b-xb4bef3l3f] .form-control:is(:disabled), [b-xb4bef3l3f] input[class=form-control]:is(:readonly) {
    background-color: #e9ecef;
}

ul[b-xb4bef3l3f] {
    margin: 0 !important;
}

.tablet-layout-table[b-xb4bef3l3f] {
    width: 100%;
    table-layout: fixed;
    overflow: auto;
    position: relative;
}

.tablet-layout-table > tbody tr td[b-xb4bef3l3f] {
    padding: 5px;
}
/* /Components/DataView/DataViewDisplayAreasComponent.razor.rz.scp.css */
.data-view-main-content[b-yjcfkek9ot] {
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
}
/* /Components/DataView/DataViewSessionHost.razor.rz.scp.css */
/* Full screen overlay hosting a nested DataView session.

   Styles only the overlay chrome (the header bar). Everything below .dv-session-body is a
   normal DataView and must inherit the same styles as the DataView page, so nothing here
   uses ::deep.

   Colours come from the global semantic tokens in wwwroot/app.css, which already carry their
   dark-theme values - so no hard-coded colours and no second set of rules for dark mode. */

.dv-session-overlay[b-u60fq2ppar] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    overflow: hidden;
}

/* The overlay is focused on open so keyboard users land inside it; that focus is a programmatic
   landing point rather than a control, so it does not need a visible ring of its own. */
.dv-session-overlay:focus[b-u60fq2ppar] {
    outline: none;
}

.dv-session-header[b-u60fq2ppar] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-width: 0;
    padding: 0.625rem 1rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
    flex-shrink: 0;
}

.dv-session-heading[b-u60fq2ppar] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.dv-session-icon[b-u60fq2ppar] {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.dv-session-heading-text[b-u60fq2ppar] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.dv-session-title[b-u60fq2ppar] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.dv-session-subtitle[b-u60fq2ppar] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* WCAG 2.2 target size (2.5.8): keep the icon-only close button at least 24x24. */
.dv-session-close[b-u60fq2ppar] {
    flex-shrink: 0;
    min-width: 2rem;
    min-height: 2rem;
}

.dv-session-body[b-u60fq2ppar] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

.dv-session-modal-content[b-u60fq2ppar] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
/* /Components/DataView/GridFolderTree/GridFolderTree.razor.rz.scp.css */
.grid-folder-tree[b-q4r378ioio] {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    min-height: 0;
    overflow: auto;
    background-color: var(--amx-surface, #ffffff);
    border-right: 1px solid var(--border-color, #e5e7eb);
    padding: 6px 0;
    box-sizing: border-box;
}

.grid-folder-list[b-q4r378ioio] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.grid-folder-children[b-q4r378ioio] {
    padding-left: 14px;
}

.grid-folder-node[b-q4r378ioio] {
    margin: 0;
}

.grid-folder-row[b-q4r378ioio] {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    border-radius: 4px;
    transition: background-color 120ms ease;
}

.grid-folder-row:hover[b-q4r378ioio] {
    background-color: var(--amx-hover, #f3f4f6);
}

.grid-folder-row.active[b-q4r378ioio] {
    background-color: rgba(var(--accent-primary-rgb, 22, 163, 74), 0.12);
}

.grid-folder-row.active .grid-folder-name[b-q4r378ioio] {
    font-weight: 600;
    color: var(--amx-text, #111827);
}

.grid-folder-toggle[b-q4r378ioio] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--amx-text-muted, #6b7280);
    cursor: pointer;
    padding: 0;
}

.grid-folder-toggle--leaf[b-q4r378ioio] {
    cursor: default;
}

.grid-folder-toggle:focus-visible[b-q4r378ioio] {
    outline: 2px solid var(--accent-primary, #16a34a);
    outline-offset: 1px;
    border-radius: 4px;
}

.grid-folder-label[b-q4r378ioio] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--amx-text, #374151);
    cursor: pointer;
    text-align: left;
    padding: 6px 8px 6px 0;
    font-size: 0.875rem;
}

.grid-folder-label:focus-visible[b-q4r378ioio] {
    outline: 2px solid var(--accent-primary, #16a34a);
    outline-offset: -2px;
    border-radius: 4px;
}

.grid-folder-icon[b-q4r378ioio] {
    flex: 0 0 auto;
    color: var(--accent-primary, #16a34a);
    font-size: 0.8125rem;
}

/* Count is shown as a leading badge so it is never lost to the name's ellipsis truncation. */
.grid-folder-count[b-q4r378ioio] {
    flex: 0 0 auto;
    min-width: 1.5rem;
    padding: 0 5px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--amx-text-muted, #6b7280);
    background-color: var(--amx-hover, #f3f4f6);
    border-radius: 10px;
}

.grid-folder-row.active .grid-folder-count[b-q4r378ioio] {
    color: var(--accent-primary, #16a34a);
    background-color: rgba(var(--accent-primary-rgb, 22, 163, 74), 0.16);
}

.grid-folder-name[b-q4r378ioio] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="dark"] .grid-folder-tree[b-q4r378ioio] {
    background-color: var(--amx-surface, #1f2430);
    border-right-color: var(--border-color, #3a4150);
}

[data-theme="dark"] .grid-folder-count[b-q4r378ioio] {
    color: var(--amx-text-muted, #9ca3af);
    background-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .grid-folder-row.active .grid-folder-name[b-q4r378ioio] {
    color: var(--amx-text, #e5e7eb);
}
/* /Components/DataView/GridPhotoGallery/GridPhotoGallery.razor.rz.scp.css */
/* The grid's photo gallery: a grid of captioned tiles, and a viewer with the photo, its details and a filmstrip.
   Shapes and colours follow DESIGN_LANGUAGE.md (cards, segmented control, buttons). */

.photo-gallery[b-dztqb4zoue] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    min-height: 0;
    outline: none;
}

.photo-gallery-bar[b-dztqb4zoue] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.photo-gallery-count[b-dztqb4zoue] {
    font-size: .8125rem;
    color: var(--text-secondary);
}

/* Segmented control: a --bg-secondary track, the current view raised on the card colour. */
.photo-gallery-views[b-dztqb4zoue] {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 8px;
    background-color: var(--bg-secondary);
}

.photo-gallery-views button[b-dztqb4zoue] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: .8125rem;
    font-weight: 600;
}

.photo-gallery-views button[aria-pressed="true"][b-dztqb4zoue] {
    background-color: var(--bg-card);
    color: var(--accent-success-text);
    box-shadow: var(--shadow-sm);
}

.photo-gallery-views button:focus-visible[b-dztqb4zoue],
.photo-gallery-card:focus-visible[b-dztqb4zoue],
.photo-gallery-chip:focus-visible[b-dztqb4zoue],
.photo-gallery-strip-item:focus-visible[b-dztqb4zoue] {
    outline: 2px solid var(--accent-success-text);
    outline-offset: 2px;
}

/* ── Grid ─────────────────────────────────────────────────────────────── */

.photo-gallery-grid[b-dztqb4zoue] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    align-content: start;
    gap: 12px;
    margin: 0;
    padding: 2px;
    list-style: none;
}

.photo-gallery-card[b-dztqb4zoue] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    overflow: hidden;
    text-align: left;
    color: var(--text-primary);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.photo-gallery-card:hover[b-dztqb4zoue] {
    border-color: var(--border-interactive);
    box-shadow: var(--shadow-md);
}

/* Grey until the thumbnail has arrived and faded in. Every tile is 4:3 - a portrait photo is cropped to it rather
   than standing taller than its row. */
.photo-gallery-card-image[b-dztqb4zoue] {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--bg-secondary);
}

.photo-gallery-card-image img[b-dztqb4zoue] {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-gallery-card-text[b-dztqb4zoue] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 8px 10px 10px;
}

.photo-gallery-card-title[b-dztqb4zoue],
.photo-gallery-card-subtitle[b-dztqb4zoue] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.photo-gallery-card-title[b-dztqb4zoue] {
    font-size: .8125rem;
    font-weight: 600;
}

.photo-gallery-card-subtitle[b-dztqb4zoue] {
    font-size: .75rem;
    color: var(--text-secondary);
}

/* ── Viewer ───────────────────────────────────────────────────────────── */

.photo-gallery-viewer[b-dztqb4zoue] {
    flex: 1 1 auto;
    min-height: 320px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-card);
}

.photo-gallery-stage[b-dztqb4zoue] {
    position: relative;
    min-height: 320px;
    background-color: var(--bg-secondary);
}

/* Stacked in one box: the photo on show and, over it, the one on its way. */
.photo-gallery-image[b-dztqb4zoue] {
    position: absolute;
    inset: 12px;
}

.photo-gallery-image > img[b-dztqb4zoue] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The photo being replaced goes once the new one has faded in over it, so one of another shape does not show
   round its edges. */
.photo-gallery-image:has(> img:last-of-type.is-ready) > img:not(:last-of-type)[b-dztqb4zoue] {
    opacity: 0;
    transition-delay: 180ms;
}

/* Shown (after amx-reveal-wait's delay, which restarts each time this appears) while the photo is on its way. */
.photo-gallery-wait[b-dztqb4zoue] {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: none;
}

.photo-gallery-image:has(> img:last-of-type:not(.is-ready)) > .photo-gallery-wait[b-dztqb4zoue] {
    display: block;
}

/* Buttons over the photo: the card colour, so they read on any picture in either theme. */
.photo-gallery-chip[b-dztqb4zoue] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--text-primary);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
}

.photo-gallery-chip:hover[b-dztqb4zoue] {
    background-color: var(--bg-hover);
}

.photo-gallery-previous[b-dztqb4zoue],
.photo-gallery-next[b-dztqb4zoue] {
    top: 50%;
    transform: translateY(-50%);
}

.photo-gallery-previous[b-dztqb4zoue] {
    left: 16px;
}

.photo-gallery-next[b-dztqb4zoue] {
    right: 16px;
}

.photo-gallery-fullscreen[b-dztqb4zoue] {
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.photo-gallery-position[b-dztqb4zoue] {
    position: absolute;
    left: 16px;
    bottom: 16px;
    padding: 3px 10px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-primary);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 999px;
}

.photo-gallery-details[b-dztqb4zoue] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    overflow: auto;
    padding: 16px;
    border-left: 1px solid var(--border-color);
}

.photo-gallery-label[b-dztqb4zoue] {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.photo-gallery-title[b-dztqb4zoue] {
    margin: 2px 0 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.photo-gallery-fields[b-dztqb4zoue] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 12px;
    margin: 0;
}

.photo-gallery-fields dt[b-dztqb4zoue] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.photo-gallery-fields dd[b-dztqb4zoue] {
    margin: 0;
    font-size: .8125rem;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.photo-gallery-actions[b-dztqb4zoue] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

.photo-gallery-actions .btn[b-dztqb4zoue] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

/* ── Filmstrip ────────────────────────────────────────────────────────── */

.photo-gallery-strip[b-dztqb4zoue] {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 4px;
    overflow-x: auto;
    list-style: none;
}

.photo-gallery-strip li[b-dztqb4zoue] {
    flex: 0 0 auto;
}

.photo-gallery-strip-item[b-dztqb4zoue] {
    display: block;
    width: 72px;
    height: 54px;
    padding: 0;
    overflow: hidden;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.photo-gallery-strip-item[aria-current="true"][b-dztqb4zoue] {
    border-color: transparent;
    outline: 2px solid var(--accent-success-text);
    outline-offset: 1px;
}

.photo-gallery-strip-item img[b-dztqb4zoue] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Narrow: the details go under the photo, and the viewer takes the height it needs (the modal scrolls). */
@media (max-width: 768px) {
    .photo-gallery-viewer[b-dztqb4zoue] {
        flex: 0 0 auto;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    .photo-gallery-stage[b-dztqb4zoue] {
        min-height: 0;
        height: 300px;
    }

    .photo-gallery-details[b-dztqb4zoue] {
        border-left: 0;
        border-top: 1px solid var(--border-color);
    }
}
/* /Components/DataView/GridTabBar/GridTabBarComponent.razor.rz.scp.css */
/* The grid's filter tabs are drawn as the report chart bar's chart track (ReportChartPage,
   DESIGN_LANGUAGE.md "Report chart bar"): a well inside a 6px/8px strip, holding segments that are
   flat until selected. The well is filled as the record view's section tab row is
   (DataViewComponent .section-tab-list): the customer's primary colour, published with its ink by
   GridTabBarComponent, falling back to the theme's filled-control blue. */
.grid-tabs-wrapper[b-ydv7q6qhbd] {
    width: 100%;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    background-color: var(--bg-card);
    font-size: 0.8125rem;
}

.grid-tabs-wrapper.hide[b-ydv7q6qhbd] {
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.grid-tab-list[b-ydv7q6qhbd] {
    --grid-tab-ink: var(--tab-accent-primary-ink, var(--text-on-dark));
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 2px;
    background: var(--tab-accent-primary, var(--accent-primary-fill));
    border: 1px solid transparent;
    border-radius: 7px;
}

.grid-tab-content-wrapper[b-ydv7q6qhbd] {
    display: flex;
    flex-direction: column;
    background-color: white;
    overflow: auto;
}

.grid-tab-content-wrapper .inner-grid-tab-content-wrapper[b-ydv7q6qhbd] {
    overflow: auto;
    height: 100%;
    background-color: white;
}
/* /Components/DataView/GridTabBar/GridTabBarItem.razor.rz.scp.css */
/* A grid filter tab is a chart bar segment (ReportChartPage .chart-seg): 26px and transparent
   until touched; the selected one is raised out of the well as a card. Kept in step with that
   page's rules - change both together. The others are written in the ink published with the
   well's fill (--grid-tab-ink, black or white, whichever reads on the customer's colour). */
.grid-tab-btn[b-v0q2c5ftjk] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 200px;
    height: 26px;
    padding: 0 9px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--grid-tab-ink);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.grid-tab-label[b-v0q2c5ftjk] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The hover fill is the colour a step away from its ink, so hovering only adds contrast. */
.grid-tab-btn:hover:not(.active)[b-v0q2c5ftjk] {
    background: var(--tab-accent-primary-hover, color-mix(in srgb, var(--accent-primary-fill) 88%, #000));
    color: var(--grid-tab-ink);
}

.grid-tab-btn.active[b-v0q2c5ftjk] {
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--border-color), var(--shadow-sm);
}

[data-theme="dark"] .grid-tab-btn.active[b-v0q2c5ftjk] {
    background: var(--bg-tertiary);
}

.grid-tab-btn:focus-visible[b-v0q2c5ftjk] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

/* The blue ring would disappear into the coloured well; ring an unselected tab in its own ink. */
.grid-tab-btn:not(.active):focus-visible[b-v0q2c5ftjk] {
    outline-color: var(--grid-tab-ink);
}

/* app.css's dark-theme `button:not(...)` rule gives every other button body ink and outranks a
   class rule, which would put near-white text on a bright primary colour; restate the ink. */
[data-theme="dark"] .grid-tab-btn:not(.active)[b-v0q2c5ftjk] {
    color: var(--grid-tab-ink) !important;
}

[data-theme="dark"] .grid-tab-btn.active[b-v0q2c5ftjk] {
    color: var(--text-primary) !important;
}

@media (forced-colors: active) {
    .grid-tab-btn.active[b-v0q2c5ftjk] {
        outline: 2px solid Highlight;
    }
}
/* /Components/DataView/LeftPanel/LeftPanelSection.razor.rz.scp.css */
/* Side panel sections: each one a flat rounded card, stacked 8px apart down the panel's column
   (DataViewComponent's .left-panel-body). The panel draws no card or heading of its own, so these
   stand on the page as the section tabs and the form beside them do (DESIGN_LANGUAGE.md "Cards /
   tiles": hairline border, --radius-md, no shadow), and the first one's bar is level with the
   section tabs' row. The heading styling follows DataAccordion.razor.css so the two kinds of
   collapsible section on the page read as one family.

   Sizes are written out rather than taken from the --space-* / --text-* tokens: those are declared
   on the designer pages only, and a var() that resolves to nothing here collapsed the heading's
   gap and padding to zero. */
.left-panel-section[b-t51iyttfdt] {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background-color: var(--bg-card);
}

/* The toggle and any action buttons share one bar, on the same fill, so the actions read as part
   of the heading rather than as a second row. 40px, the height of the section tabs' row beside the
   first one, so the two bars run level. The fill is the customer's primary colour and
   everything on the bar - title, icon, chevron, action buttons, focus rings - is in the ink
   published with it (PrimaryColourStyle: black or white, whichever passes AA on that colour); under
   the pointer it takes the colour's hover shade, which only adds contrast. The ink is !important on
   the buttons because app.css's dark theme recolours every button with a selector no class chain
   here can outrank. */
.left-panel-section-heading-row[b-t51iyttfdt] {
    --heading-ink: var(--app-primary-ink, var(--text-on-dark));
    display: flex;
    align-items: stretch;
    color: var(--heading-ink);
    background-color: var(--app-primary, var(--accent-primary-fill));
}

.left-panel-section-heading[b-t51iyttfdt] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: inherit;
}

.left-panel-section-toggle[b-t51iyttfdt] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    height: 100%;
    min-height: 40px;
    padding: 0 0.85rem;
    border: none;
    background-color: transparent;
    color: var(--heading-ink) !important;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 100ms ease;
}

.left-panel-section-toggle:hover[b-t51iyttfdt] {
    background-color: var(--app-primary-hover, transparent);
}

.left-panel-section-toggle:focus-visible[b-t51iyttfdt] {
    outline: 2px solid var(--heading-ink);
    outline-offset: -2px;
}

/* The heading's own buttons come from the page (DataViewComponent's .map-panel-btn and
   .left-panel-action-link), styled there for a card; on the bar they take its ink. Only those -
   a settings menu opened from one keeps its own card colours. */
.left-panel-section-actions[b-t51iyttfdt]  :is(.map-panel-btn, .left-panel-action-link),
.left-panel-section-actions[b-t51iyttfdt]  :is(.map-panel-btn, .left-panel-action-link):hover {
    color: var(--heading-ink) !important;
}

.left-panel-section-actions[b-t51iyttfdt]  :is(.map-panel-btn, .left-panel-action-link):hover {
    background-color: var(--app-primary-hover, transparent);
}

.left-panel-section-actions[b-t51iyttfdt]  :is(.map-panel-btn, .left-panel-action-link):focus-visible {
    outline-color: var(--heading-ink);
}

.left-panel-section-actions[b-t51iyttfdt] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding-right: 0.35rem;
}

/* The same chevron DataAccordion draws, so an open section looks open the same way everywhere.
   The margin keeps it clear of the icon that follows. */
.left-panel-section-arrow[b-t51iyttfdt] {
    flex: 0 0 auto;
    border: solid var(--heading-ink);
    border-width: 0 2px 2px 0;
    padding: 4px;
    margin: 0 0.5rem 0 0.15rem;
    transition: transform 150ms ease;
}

.left-panel-section-arrow.right[b-t51iyttfdt] {
    transform: rotate(-45deg);
}

.left-panel-section-arrow.down[b-t51iyttfdt] {
    transform: rotate(45deg);
    margin-bottom: 3px;
}

.left-panel-section-icon[b-t51iyttfdt] {
    flex: 0 0 auto;
    width: 1.2rem;
    text-align: center;
    color: inherit;
}

.left-panel-section-title[b-t51iyttfdt] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.left-panel-section-body[b-t51iyttfdt] {
    padding: 0.5rem;
}

.left-panel-section-body.flush[b-t51iyttfdt] {
    padding: 0;
}

.left-panel-section-body[hidden][b-t51iyttfdt] {
    display: none;
}
/* /Components/DataView/RecordLookupPicker.razor.rz.scp.css */
.record-lookup[b-kj21rh8k92] { color: var(--text-primary); background: var(--bg-card); }
.record-lookup form[b-kj21rh8k92] { display: grid; gap: .5rem; }
.record-lookup input[b-kj21rh8k92], .record-lookup select[b-kj21rh8k92], .record-lookup button[b-kj21rh8k92] { color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-interactive); border-radius: .375rem; padding: .5rem .75rem; min-height: 2.25rem; }
.record-lookup button:hover:not(:disabled)[b-kj21rh8k92] { background: var(--bg-hover); }
.record-lookup button:focus-visible[b-kj21rh8k92], .record-lookup input:focus-visible[b-kj21rh8k92], .record-lookup select:focus-visible[b-kj21rh8k92] { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.record-lookup button:disabled[b-kj21rh8k92] { opacity: .65; }
.lookup-fields[b-kj21rh8k92] { display: flex; flex-wrap: wrap; gap: .75rem; }
.lookup-fields > div[b-kj21rh8k92] { display: flex; flex-direction: column; flex: 1 1 10rem; min-width: 0; }
.lookup-fields input[b-kj21rh8k92] { width: 100%; }
.record-lookup fieldset[b-kj21rh8k92] { border: 1px solid var(--border-color); padding: .75rem; }
.record-lookup legend[b-kj21rh8k92] { font-size: 1rem; }
.lookup-actions[b-kj21rh8k92] { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.lookup-results[b-kj21rh8k92] { padding: 0; list-style: none; display: grid; gap: .5rem; }
.lookup-results button[b-kj21rh8k92] { text-align: left; width: 100%; overflow-wrap: anywhere; }
.lookup-map[b-kj21rh8k92] { height: 28rem; min-height: 18rem; position: relative; }
/* /Components/DataView/RecordPresenceIndicator.razor.rz.scp.css */
/* "Someone else is in here." A quiet amber dot beside the record's name, not a banner: it is worth
   noticing, but it is not an error and it does not stop anyone doing anything. */

.record-presence[b-pnrshualcd] {
    /* Aligned with the toolbar buttons it now leads, rather than with a line of text. */
    align-self: center;
    margin-right: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(245, 158, 11, 0.14);
    /* --accent-warning-text, not the vivid fill: this glyph is small and sits on a tinted disc. */
    color: var(--accent-warning-text, #a4490a);
    font-size: 0.7rem;
    cursor: help;
    position: relative;
}

/* The pulse is a ring that grows out of the disc and fades, rather than the icon itself throbbing -
   a moving glyph beside a record name is hard to read past, and this stays legible. */
.record-presence[b-pnrshualcd]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--accent-warning, #f59e0b);
    animation: record-presence-pulse-b-pnrshualcd 2s ease-out infinite;
}

@keyframes record-presence-pulse-b-pnrshualcd {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }

    70% {
        opacity: 0;
        transform: scale(1.6);
    }

    100% {
        opacity: 0;
        transform: scale(1.6);
    }
}

/* The tooltip and the visually-hidden text carry the whole message; the pulse only draws the eye to
   them. Anyone who would rather things held still loses nothing by it stopping. */
@media (prefers-reduced-motion: reduce) {
    .record-presence[b-pnrshualcd]::after {
        animation: none;
        opacity: 0.7;
    }
}

/* Nobody is editing - a colleague reading the record, or the user's own second tab. It still pulses,
   because the point is that the eye finds it at all; what changes is the volume, not the movement.
   Muted palette says "worth a glance", amber says "someone could save over your work". */
.record-presence.is-quiet[b-pnrshualcd] {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
}

.record-presence.is-quiet[b-pnrshualcd]::after {
    border-color: var(--border-color);
}
/* /Components/DataView/RelatedActionScheduleNotice.razor.rz.scp.css */
.related-action-notice[b-5tnhy81tk7] { margin: .5rem; padding: .75rem 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary); }
.related-action-notice strong[b-5tnhy81tk7] { font-weight: 500; }
.related-action-notice p[b-5tnhy81tk7] { margin: .375rem 0 0; color: var(--text-secondary); }
/* /Components/DataView/RelatedAssetRow.razor.rz.scp.css */
/* Matches the recent-assets list row (Components/Menu/RecentAssetsDropdown.razor) so related
   assets and recent assets present identically. */

.related-row[b-vowogw8t9t] {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease;
}

.related-row:hover[b-vowogw8t9t] {
    background-color: var(--bg-hover);
}

.related-row__main[b-vowogw8t9t] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--text-primary);
    cursor: pointer;
}

.related-row__main:focus-visible[b-vowogw8t9t] {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
    border-radius: var(--radius-md);
}

.related-row__icon[b-vowogw8t9t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--accent-primary);
    font-size: 1rem;
}

.related-row__body[b-vowogw8t9t] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.related-row__name[b-vowogw8t9t] {
    font-weight: 600;
    font-size: 0.925rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.related-row__relation[b-vowogw8t9t] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.related-row__chevron[b-vowogw8t9t] {
    flex-shrink: 0;
    color: var(--text-secondary);
    opacity: 0;
    font-size: 0.8rem;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.related-row:hover .related-row__chevron[b-vowogw8t9t] {
    opacity: 0.6;
    transform: translateX(2px);
}
/* /Components/DataView/RoutineActivityTemplateAdvanced.razor.rz.scp.css */
.routine-template-advanced[b-lfbfdr1xyl] {
    color: var(--text-primary);
}

.routine-template-intro[b-lfbfdr1xyl],
.routine-template-note[b-lfbfdr1xyl] {
    color: var(--text-secondary);
    margin-bottom: var(--space-3, 0.75rem);
}

.routine-template-section[b-lfbfdr1xyl] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-4, 1rem);
    margin-bottom: var(--space-4, 1rem);
}

.routine-template-section h3[b-lfbfdr1xyl] {
    color: var(--text-primary);
    margin-bottom: var(--space-3, 0.75rem);
}

.routine-template-report[b-lfbfdr1xyl] {
    margin-top: var(--space-4, 1rem);
}

.routine-template-report label[b-lfbfdr1xyl] {
    display: block;
    color: var(--text-secondary);
    font-size: var(--text-sm, 0.8125rem);
    font-weight: 600;
    margin-bottom: var(--space-2, 0.5rem);
}

.routine-template-report .form-control[b-lfbfdr1xyl] {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-interactive);
}

.routine-template-report .form-control:focus-visible[b-lfbfdr1xyl],
.routine-template-report button:focus-visible[b-lfbfdr1xyl] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: 2px;
}
/* /Components/DataView/Search/FormItemSearchModal.razor.rz.scp.css */
/* DataView "Find a form item" search — a centred command-palette style picker:
   search row on top, scrollable flat result rows below. Follows the app design
   language: flat token-driven surfaces, hairline borders, one accent, no gradients. */
.fis[b-tp8mjbjzg1] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.fis-search[b-tp8mjbjzg1] {
    padding: 0.75rem 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

/* Visible-to-screen-readers-only label: placeholders are not accessible names. */
.fis-label[b-tp8mjbjzg1] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fis-input-wrapper[b-tp8mjbjzg1] {
    position: relative;
    display: flex;
    align-items: center;
}

.fis-input-icon[b-tp8mjbjzg1] {
    position: absolute;
    left: 0.75rem;
    color: var(--text-muted);
    pointer-events: none;
}

.fis-input.form-control[b-tp8mjbjzg1] {
    height: 44px;
    padding-left: 2.25rem;
    padding-right: 2.5rem;
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm);
    background-color: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.95rem;
}

.fis-input.form-control:focus[b-tp8mjbjzg1] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-wash);
}

.fis-clear[b-tp8mjbjzg1] {
    position: absolute;
    right: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
}

.fis-clear:hover[b-tp8mjbjzg1] {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.fis-clear:focus-visible[b-tp8mjbjzg1] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

.fis-status[b-tp8mjbjzg1] {
    margin: 0;
    padding: 0.4rem 0.85rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}

.fis-body[b-tp8mjbjzg1] {
    min-height: 0;
    max-height: min(52vh, 460px);
    overflow-y: auto;
}

.fis-loading[b-tp8mjbjzg1],
.fis-empty[b-tp8mjbjzg1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2.25rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

.fis-empty i[b-tp8mjbjzg1] {
    font-size: 1.4rem;
    opacity: 0.7;
}

/* "Did you mean" chips shown under the empty state when a query matched nothing but is a
   near miss for one or more item titles. */
.fis-suggestions[b-tp8mjbjzg1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.15rem;
}

.fis-suggestions-label[b-tp8mjbjzg1] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.fis-suggestion[b-tp8mjbjzg1] {
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--border-interactive);
    border-radius: 999px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 600;
}

.fis-suggestion:hover[b-tp8mjbjzg1] {
    border-color: var(--accent-primary);
    background-color: var(--bg-hover);
}

.fis-suggestion:focus-visible[b-tp8mjbjzg1] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

.fis-results[b-tp8mjbjzg1] {
    list-style: none;
    margin: 0;
    padding: 0.35rem;
}

.fis-result[b-tp8mjbjzg1] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.fis-result.is-selected[b-tp8mjbjzg1] {
    background-color: var(--bg-hover);
    box-shadow: inset 2px 0 0 0 var(--accent-primary);
}

.fis-result-icon[b-tp8mjbjzg1] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.fis-result.is-selected .fis-result-icon[b-tp8mjbjzg1] {
    color: var(--accent-primary);
}

.fis-result-text[b-tp8mjbjzg1] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1 1 auto;
}

.fis-result-title[b-tp8mjbjzg1] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fis-mark[b-tp8mjbjzg1] {
    padding: 0;
    background-color: transparent;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--accent-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.fis-result-path[b-tp8mjbjzg1] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.fis-result-path-text[b-tp8mjbjzg1],
.fis-result-field[b-tp8mjbjzg1] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fis-result-field[b-tp8mjbjzg1] {
    flex: 0 1 auto;
    padding-left: 0.4rem;
    border-left: 1px solid var(--border-color);
    font-family: 'SF Mono', Consolas, monospace;
}

.fis-chip[b-tp8mjbjzg1] {
    flex: 0 0 auto;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.fis-result-type[b-tp8mjbjzg1] {
    flex: 0 0 auto;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

/* A tab result takes the user somewhere rather than to a control, so its icon is tinted to
   separate the two at a glance. The type label ("Section", "Tab", "Sub tab") says which it is -
   the tint is never the only signal. */
.fis-result.is-tab .fis-result-icon[b-tp8mjbjzg1] {
    background-color: var(--accent-wash, var(--bg-secondary));
    color: var(--accent-primary);
}

.fis-hints[b-tp8mjbjzg1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    padding: 0.5rem 0.85rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.7rem;
    color: var(--text-muted);
}

.fis-hints kbd[b-tp8mjbjzg1] {
    display: inline-block;
    min-width: 18px;
    margin-right: 0.15rem;
    padding: 0.05rem 0.3rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.7rem;
    text-align: center;
}

@media (max-width: 576px) {
    .fis-result-type[b-tp8mjbjzg1],
    .fis-hints[b-tp8mjbjzg1] {
        display: none;
    }
}
/* /Components/DataView/Search/GridSearchModal.razor.rz.scp.css */
/* Grid search popup. Follows DESIGN_LANGUAGE.md: shared AmxModal chrome, a search row over a
   scrollable result list with ellipsis on long values.

   Colours come from the global semantic tokens in wwwroot/app.css, which already carry their
   dark-theme values - so no hard-coded colours and no separate dark-mode rules. */

.grid-search__header[b-ylsocbg5kw] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.grid-search__header-icon[b-ylsocbg5kw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-wash);
    color: var(--accent-primary);
    font-size: 0.95rem;
}

.grid-search[b-ylsocbg5kw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* ===== SEARCH ROW ===== */

.grid-search__field[b-ylsocbg5kw] {
    position: relative;
    display: flex;
    align-items: center;
}

.grid-search__field-icon[b-ylsocbg5kw] {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    pointer-events: none;
    font-size: 0.9rem;
}

.grid-search__input[b-ylsocbg5kw] {
    height: 46px;
    padding-left: 40px;
    padding-right: 40px;
    font-size: 0.95rem;
}

/* WCAG 2.2 target size (2.5.8) for the icon-only clear button. */
.grid-search__field-clear[b-ylsocbg5kw] {
    position: absolute;
    right: 6px;
    display: grid;
    place-items: center;
    min-width: 1.75rem;
    min-height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.grid-search__field-clear:hover[b-ylsocbg5kw] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ===== SUGGESTIONS ===== */

.grid-search__section-label[b-ylsocbg5kw] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}

.grid-search__suggestions[b-ylsocbg5kw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 17rem;
    overflow-y: auto;
}

.grid-search__suggestion[b-ylsocbg5kw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.grid-search__suggestion:hover[b-ylsocbg5kw] {
    background-color: var(--bg-hover);
}

/* Keyboard highlight. Uses a border rather than colour alone so it does not rely on hue to
   carry meaning (WCAG 1.4.1). */
.grid-search__suggestion.is-active[b-ylsocbg5kw] {
    background-color: var(--accent-wash);
    border-color: var(--accent-primary);
}

.grid-search__suggestion-icon[b-ylsocbg5kw] {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.grid-search__suggestion-text[b-ylsocbg5kw] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.grid-search__hint[b-ylsocbg5kw] {
    padding: 10px 2px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ===== FOOTER ===== */

.grid-search__footer[b-ylsocbg5kw] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
/* /Components/DataView/SectionTabs/SectionTab.razor.rz.scp.css */
/* Parent-level navigation: underline tabs (DESIGN_LANGUAGE.md "Underline tabs"), same convention
   as the child data tabs below (DataTab.razor.css) - no pills, no fills. The two levels read as
   one tab system now; parent is told apart from child by being the larger/bolder of the two
   (padding, font-size, font-weight all a step up), not by a different shape. */
.section-tab-li[b-ryld45d0zg] {
    display: flex;
    flex: 0 0 auto;
    padding: 0 !important;
    margin: 0;
}

.section-tab-btn[b-ryld45d0zg] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    padding: 10px 16px;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    line-height: 1.35;
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}

.section-tab-btn .section-tab-icon i[b-ryld45d0zg] {
    opacity: 0.85;
}

.section-tab-btn:hover[b-ryld45d0zg] {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}

.section-tab-btn:focus-visible[b-ryld45d0zg] {
    outline: 2px solid var(--accent-success-text);
    outline-offset: -2px;
}

/* Selected parent: the same highlight the child data tabs use (DataTab.razor.css) - accent text,
   full weight, a 10% wash of the accent behind it, and the accent as the underline - so a
   selected tab is legible at a glance on both levels instead of the parent relying on the 2px
   line alone. Square, though: the child tabs round their top corners because each one is a folder
   tab attached to the panel below it, while these sit inside the strip's own card, and a second
   set of curves inside it reads as clutter.

   The underline is the one thing an inline section colour (see .has-tab-colours below) cannot
   override, since it is a border rather than a background. */
.section-tab-btn.active[b-ryld45d0zg] {
    color: var(--accent-success-text);
    font-weight: 700;
    background: var(--bg-secondary);
    border-bottom-color: var(--accent-success-text);
}

.section-tab-btn.active .section-tab-icon i[b-ryld45d0zg] {
    opacity: 1;
}

/* Fields to fix on one of this section's forms (SectionTab.razor). */
.section-tab-btn .section-tab-icon.section-tab-error[b-ryld45d0zg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--accent-danger-text);
    font-size: 0.8125rem;
}

.section-tab-btn .section-tab-icon.section-tab-error i[b-ryld45d0zg] {
    opacity: 1;
}

.section-tab-btn.active:hover[b-ryld45d0zg] {
    background: var(--bg-hover);
}

/* A section with configured colours sets them inline, which beats --tab-accent above - darken on
   hover instead of relying on the background swap, matching DataTab.razor.css's own handling of
   the same case. */
.section-tab-btn.has-tab-colours:hover[b-ryld45d0zg],
.section-tab-btn.has-tab-colours.active:hover[b-ryld45d0zg] {
    filter: brightness(0.92);
}

@media (prefers-reduced-motion: reduce) {
    .section-tab-btn[b-ryld45d0zg] {
        transition: none;
    }
}

@media (forced-colors: active) {
    .section-tab-btn.active[b-ryld45d0zg] {
        border-bottom: 3px solid Highlight;
    }
}
/* /Components/DataView/SectionTabs/SectionTabsComponent.razor.rz.scp.css */
.section-tab-page-wrapper[b-q9ikn2ba0d] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: auto;
}

/* Underline-tab bar (DESIGN_LANGUAGE.md "Underline tabs"): a flat row of underline tabs -
   no pill, no fill - matching the child data-tab strip below it (DataTab.razor.css). The two
   levels read as one coherent tab system, told apart by size/weight (see SectionTab.razor.css)
   instead of by shape.

   The row sits in its own flat card (DESIGN_LANGUAGE.md "Cards / tiles": --bg-card, 1px
   --border-color, --radius-lg, --shadow-sm at rest), the same shell the panels either side of it
   use - .left-panel and .map-panel on the page, .data-tab-page-wrapper for the form below. It was
   the one bare element between them, reading as a loose rule across the page rather than a
   surface; boxed, the strip is a peer of what it switches. The card's own bottom edge is the
   tabs' baseline, so the active tab's underline still lands on a line rather than floating -
   hence the horizontal-only padding.

   --tab-accent is still published from --tab-accent-primary - the customer's configured colour,
   the one thing SectionTabsComponent sets inline - so the active tab's underline carries the
   customer's branding; the card itself stays on theme tokens. --tab-accent-contrast is unused now
   that nothing is filled with the accent, but stays defined (light mode only touches it here) so
   any other consumer of these custom properties keeps resolving. */
.section-tabs-wrapper[b-q9ikn2ba0d] {
    --tab-accent: var(--tab-accent-primary, var(--accent-primary));
    --tab-accent-contrast: #ffffff;

    display: flex;
    align-items: center;
    width: 100%;
    height: max-content;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    /* Inset to roughly the corner radius: the active tab now carries a filled highlight, and a
       smaller inset would let the card's corner curve shave a visible notch off it. */
    padding: 0 12px;
    /* Keeps the end tabs' fill and the list's scrollbar inside the rounded corners. */
    overflow: hidden;
}

.section-tabs-wrapper:not(.hide)[b-q9ikn2ba0d] {
    margin-bottom: 10px;
}

.section-tabs-wrapper.hide[b-q9ikn2ba0d] {
    visibility: hidden !important;
    height: 0 !important;
    margin-bottom: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.section-tab-list[b-q9ikn2ba0d] {
    list-style: none;
    display: flex;
    gap: 6px;
    height: max-content;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    flex-wrap: nowrap;
    background: transparent;
    scrollbar-width: thin;
}

.section-tab-list[b-q9ikn2ba0d]::-webkit-scrollbar {
    height: 6px;
}

.section-tab-list[b-q9ikn2ba0d]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 999px;
}

.section-tab-content-wrapper[b-q9ikn2ba0d] {
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: 100%;
    border-radius: var(--radius-md, 12px);
}

.section-tab-content-wrapper .inner-section-tab-content-wrapper[b-q9ikn2ba0d] {
    overflow: auto;
    height: 100%;
}

/* Dark mode swaps the customer's configured colour for the lighter blue the rest of the dark
   theme uses (the same colour a filled surface would need dark text for, kept here even though
   nothing is filled any more, so the active tab's underline still reads clearly against a dark
   page). Chosen on the document attribute rather than computed server-side, so the strip cannot
   be left in the other theme's palette. The card's surface, border and shadow are already theme
   tokens in the base rule above, so dark mode only needs to override the accent itself. */
[data-theme="dark"] .section-tabs-wrapper[b-q9ikn2ba0d] {
    --tab-accent: #73adff;
    --tab-accent-contrast: #0f1524;
}

/* ── Phone: the strip gives way to the picker ────────────────────────────────
   See the matching block in DataTabsComponent.razor.css. This is the outer of the two strips;
   below 1000px both are pickers, one row each, instead of four or five rows of tabs. */
@media (max-width: 1000px) {
    .section-tabs-wrapper[b-q9ikn2ba0d] {
        display: none;
    }

    /* A gap between the section picker and whatever follows it (the form picker, then the form). */
    .section-tab-select[b-q9ikn2ba0d] {
        margin-bottom: 0.5rem;
    }
}
/* /Components/DataView/StaffCalendarSelector.razor.rz.scp.css */
.staff-calendar[b-2ioeio48ej] { --staff-calendar-control-size: max(1.5rem, calc(25px / var(--amx-ui-scale, 1))); display: flex; flex-direction: column; height: 100%; min-height: 0; width: 100%; color: var(--text-primary); background: var(--bg-card); }
.staff-calendar-title[b-2ioeio48ej] { display: inline-flex; align-items: center; gap: var(--space-2, .5rem); }
.staff-calendar-filters[b-2ioeio48ej] { display: flex; flex-wrap: wrap; gap: var(--space-3, .75rem); padding: var(--space-2, .5rem) var(--space-3, .75rem); background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); }
.staff-calendar-filters[b-2ioeio48ej] { flex: none; }
.staff-calendar-filters > div[b-2ioeio48ej] { flex: 1 1 20rem; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-2, .5rem); }
.staff-calendar-filters > div > label[b-2ioeio48ej] { margin: 0; white-space: nowrap; }
.staff-calendar-filters .staff-calendar-team-options[b-2ioeio48ej] { grid-column: 2; }
.staff-calendar-filters > .staff-calendar-search[b-2ioeio48ej] { flex: 2 1 28rem; }
.staff-calendar label[b-2ioeio48ej] { font-size: .8125rem; font-weight: 600; margin-bottom: var(--space-1, .25rem); }
.staff-calendar input[b-2ioeio48ej], .staff-calendar select[b-2ioeio48ej] { background-color: var(--bg-input); color: var(--text-primary); border-color: var(--border-interactive) !important; }
.staff-calendar input:is([type=checkbox], [type=radio])[b-2ioeio48ej] { width: var(--staff-calendar-control-size); height: var(--staff-calendar-control-size); flex: none; accent-color: var(--accent-success-fill); }
.staff-calendar-skills[b-2ioeio48ej] { flex: none; min-width: 0; margin: 0; padding: var(--space-2, .5rem) var(--space-3, .75rem); border: 0; border-bottom: 1px solid var(--border-color); }
.staff-calendar-skills legend[b-2ioeio48ej] { float: left; width: auto; margin: 0 var(--space-3, .75rem) 0 0; font-size: .8125rem; font-weight: 600; line-height: 1.5rem; color: var(--text-secondary); }
.staff-calendar-skills ul[b-2ioeio48ej] { clear: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, .5rem) var(--space-4, 1rem); margin: 0; padding: 0; list-style: none; }
.staff-calendar-skills li[b-2ioeio48ej] { min-width: 0; max-width: 100%; }
.staff-calendar-skills label[b-2ioeio48ej] { display: flex; align-items: center; gap: var(--space-2, .5rem); min-height: 1.5rem; margin: 0; overflow-wrap: anywhere; cursor: pointer; }
.staff-calendar-skills:disabled label[b-2ioeio48ej] { cursor: default; }
.staff-calendar-skills label:has(input:disabled)[b-2ioeio48ej] { color: var(--text-secondary); cursor: default; }
.staff-calendar-skills-status[b-2ioeio48ej] { color: var(--text-secondary); font-size: .8125rem; }
.staff-calendar-skills-help[b-2ioeio48ej] { clear: both; margin: var(--space-2, .5rem) 0 0; font-size: .8125rem; color: var(--text-secondary); }
.staff-calendar-role-help[b-2ioeio48ej] { margin: 0; font-size: .8125rem; color: var(--text-secondary); }
.staff-calendar-requirement-groups[b-2ioeio48ej] { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-2, .5rem); max-height: min(30vh, 16rem); overflow: auto; margin-top: var(--space-2, .5rem); padding: var(--space-1, .25rem); }
.staff-calendar-requirement-group[b-2ioeio48ej] { position: relative; flex: 1 1 28rem; min-width: min(100%, 28rem); max-width: 100%; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); align-items: stretch; border: 1px solid var(--border-color); border-radius: var(--radius-sm, 6px); background: var(--bg-card); }
.staff-calendar-requirement-group[data-active=true]:not(:disabled)[b-2ioeio48ej] { border-color: var(--accent-success-text); }
.staff-calendar-requirement-choice[b-2ioeio48ej] { min-width: 0; max-width: 16rem; padding: var(--space-2, .5rem); background: var(--bg-tertiary); border-inline-end: 1px solid var(--border-color); border-start-start-radius: calc(var(--radius-sm, 6px) - 1px); border-end-start-radius: calc(var(--radius-sm, 6px) - 1px); }
.staff-calendar-skills .staff-calendar-requirement-choice[b-2ioeio48ej] { align-items: flex-start; }
.staff-calendar-requirement-group[data-active=true]:not(:disabled) .staff-calendar-requirement-choice[b-2ioeio48ej] { color: var(--accent-success-text); }
.staff-calendar-requirement-choice small[b-2ioeio48ej] { display: block; color: var(--text-secondary); font-weight: 400; }
.staff-calendar-requirement-group ul[b-2ioeio48ej] { min-width: 0; padding: var(--space-2, .5rem) var(--space-3, .75rem); align-content: center; }
.staff-calendar-requirement-group ul label[b-2ioeio48ej] { font-weight: 400; }
.staff-calendar-no-skills[b-2ioeio48ej] { color: var(--text-secondary); font-size: .8125rem; }
.staff-calendar-selected-skills[b-2ioeio48ej] { color: var(--text-secondary); font-size: .75rem; overflow-wrap: anywhere; }
.staff-calendar-coverage-tick[b-2ioeio48ej], .staff-calendar-team-skill[b-2ioeio48ej] { color: var(--accent-success-text) !important; }
.staff-calendar-coverage-tick[b-2ioeio48ej] { margin-inline-start: var(--space-2, .5rem); }
.staff-calendar-footer[b-2ioeio48ej] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, .5rem) var(--space-4, 1rem); width: 100%; min-width: 0; }
.staff-calendar-footer-actions[b-2ioeio48ej] { display: flex; flex-wrap: wrap; gap: var(--space-2, .5rem); margin-inline-start: auto; }
.staff-calendar-coverage[b-2ioeio48ej] { display: flex; flex: 1 1 24rem; align-items: center; gap: var(--space-2, .5rem); min-width: 0; color: var(--text-primary); }
.staff-calendar-coverage > i[b-2ioeio48ej] { flex: none; font-size: 1.25rem; color: var(--text-secondary); }
.staff-calendar-coverage[data-satisfied=true] > i[b-2ioeio48ej] { color: var(--accent-success-text); }
.staff-calendar-coverage > div[b-2ioeio48ej] { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1, .25rem) var(--space-3, .75rem); min-width: 0; }
.staff-calendar-coverage strong[b-2ioeio48ej] { font-size: .875rem; font-weight: 600; }
.staff-calendar-coverage small[b-2ioeio48ej] { color: var(--text-secondary); font-size: .8125rem; }
.staff-calendar-navigation[b-2ioeio48ej], .staff-calendar-date-buttons[b-2ioeio48ej], .staff-calendar-jump[b-2ioeio48ej], .staff-calendar-paging[b-2ioeio48ej] { display: flex; flex-wrap: wrap; gap: var(--space-2, .5rem); align-items: center; }
.staff-calendar-navigation[b-2ioeio48ej] { justify-content: space-between; padding: var(--space-2, .5rem) var(--space-3, .75rem); }
.staff-calendar-range[b-2ioeio48ej] { font-size: .875rem; font-weight: 600; }
.staff-calendar-activity-dates[b-2ioeio48ej] { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-1, .25rem); font-size: .8125rem; color: var(--text-secondary); }
.staff-calendar-schedule-link[b-2ioeio48ej] { border: 0 !important; border-radius: var(--radius-sm, 6px); padding: var(--space-1, .25rem); min-height: 1.75rem; background: transparent !important; color: var(--accent-success-text) !important; text-decoration: underline; text-underline-offset: .2em; font-weight: 600; }
.staff-calendar-schedule-link:hover:not(:disabled)[b-2ioeio48ej] { background: var(--bg-hover) !important; }
.staff-calendar-schedule-link:disabled[b-2ioeio48ej] { opacity: .65; }
.staff-calendar-jump input[b-2ioeio48ej] { width: 10rem; }
.staff-calendar-help[b-2ioeio48ej] { flex: 1 1 28rem; min-width: 0; margin: 0; color: var(--text-secondary); font-size: .8125rem; }
/* Keep absolutely positioned screen-reader text inside this scrollport. Without a
   containing block here it is positioned against .modal-body, extending the outer
   scroll area by all the rows/dates clipped out of the calendar viewport. */
.staff-calendar-table[b-2ioeio48ej] { position: relative; flex: 1 1 auto; min-height: 6rem; max-height: none; overflow: auto; border-block: 1px solid var(--border-color); }
.staff-calendar table[b-2ioeio48ej] { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 73rem; table-layout: fixed; font-size: .8125rem; }
.staff-calendar th[b-2ioeio48ej], .staff-calendar td[b-2ioeio48ej] { padding: var(--space-2, .5rem); border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); min-width: 4rem; vertical-align: middle; background: var(--bg-card); }
.staff-calendar tbody th[b-2ioeio48ej], .staff-calendar tbody td[b-2ioeio48ej] { padding-block: var(--space-1, .25rem); }
.staff-calendar thead th[b-2ioeio48ej] { position: sticky; top: 0; z-index: 2; background: var(--bg-secondary); text-align: center; }
.staff-calendar thead th span[b-2ioeio48ej], .staff-calendar thead th strong[b-2ioeio48ej] { display: block; }
.staff-calendar thead th span[b-2ioeio48ej] { color: var(--text-secondary); font-weight: 400; }
.staff-calendar tr > th:first-child[b-2ioeio48ej] { position: sticky; left: 0; z-index: 1; width: 16rem; min-width: 16rem; max-width: 16rem; border-right: 1px solid var(--border-interactive); }
.staff-calendar thead tr > th:first-child[b-2ioeio48ej] { z-index: 3; text-align: left; }
.staff-calendar .staff-calendar-person[b-2ioeio48ej] { display: flex; align-items: center; gap: var(--space-2, .5rem); min-height: 1.5rem; margin-bottom: 0; overflow-wrap: anywhere; }
.staff-calendar-person > span[b-2ioeio48ej] { min-width: 0; }
.staff-calendar-person small[b-2ioeio48ej] { display: block; }
.staff-calendar-name-line[b-2ioeio48ej] { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1, .25rem); min-width: 0; }
.staff-calendar-name-line strong[b-2ioeio48ej] { overflow-wrap: anywhere; font-size: .8125rem; }
.staff-calendar-assigned[b-2ioeio48ej] { font-size: .6875rem; color: var(--text-secondary); font-weight: 400; white-space: nowrap; }
.staff-calendar-person small[b-2ioeio48ej] { color: var(--text-secondary); font-weight: 400; }
.staff-calendar-person .staff-calendar-name-line[b-2ioeio48ej] { flex-wrap: nowrap; }
.staff-calendar-person .staff-calendar-name-line strong[b-2ioeio48ej] { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.staff-calendar .staff-calendar-skill-trigger[b-2ioeio48ej] { display: block; width: calc(100% - var(--staff-calendar-control-size) - var(--space-2, .5rem)); margin-inline-start: calc(var(--staff-calendar-control-size) + var(--space-2, .5rem)); min-height: calc(25px / var(--amx-ui-scale, 1)); padding: 0; border: 0; border-radius: var(--radius-sm, 6px); background: transparent; color: var(--text-secondary); font: inherit; font-size: .75rem; font-weight: 400; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: .2em; }
.staff-calendar .staff-calendar-skill-trigger:hover:not(:disabled)[b-2ioeio48ej] { color: var(--accent-success-text); }
.staff-calendar .staff-calendar-record-date strong[b-2ioeio48ej] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.staff-calendar .staff-calendar-weekend[b-2ioeio48ej] { background: var(--bg-secondary); }
.staff-calendar .staff-calendar-selected > th[b-2ioeio48ej] { background: var(--bg-hover); }
.staff-calendar .staff-calendar-booking[b-2ioeio48ej] { display: block; width: 100%; text-align: start; font: inherit; min-height: calc(25px / var(--amx-ui-scale, 1)); padding: var(--space-1, .25rem) var(--space-2, .5rem); margin-block: var(--space-1, .25rem); border: 1px solid var(--border-interactive); border-radius: var(--radius-sm, 6px); background: var(--bg-secondary); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staff-calendar-loading[b-2ioeio48ej], .staff-calendar-empty[b-2ioeio48ej] { padding: var(--space-8, 2rem); text-align: center; min-height: 12rem; }
.staff-calendar-paging[b-2ioeio48ej] { padding: var(--space-2, .5rem) var(--space-3, .75rem); }
.staff-calendar-paging > span[b-2ioeio48ej] { margin-right: auto; color: var(--text-secondary); }
.staff-calendar-selection[b-2ioeio48ej] { flex: none; border-top: 1px solid var(--border-color); padding: var(--space-2, .5rem) var(--space-3, .75rem); }
.staff-calendar-selection p[b-2ioeio48ej] { font-size: .8125rem; margin: 0; color: var(--text-secondary); }
.staff-calendar-selection ul[b-2ioeio48ej] { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--space-2, .5rem); padding: 0; list-style: none; max-height: min(24vh, 17rem); overflow: auto; margin: var(--space-2, .5rem) 0 0; }
.staff-calendar-selection li[b-2ioeio48ej] { display: flex; align-items: center; justify-content: space-between; min-width: 0; gap: var(--space-2, .5rem); border: 2px solid var(--border-color); border-radius: var(--radius-md, 8px); padding: var(--space-2, .5rem); background: var(--bg-secondary); }
.staff-calendar-selection li.staff-calendar-admin-selected[b-2ioeio48ej] { border-color: var(--accent-success-text); }
.staff-calendar-selected-person[b-2ioeio48ej] { display: grid; min-width: 0; gap: var(--space-1, .25rem); }
.staff-calendar .staff-calendar-current-booking[b-2ioeio48ej] { border-color: var(--accent-success-text); border-inline-start-width: 3px; }
.staff-calendar-removals[b-2ioeio48ej] { padding-top: var(--space-2, .5rem); }
.staff-calendar-admin-choice[b-2ioeio48ej] { display: flex; align-items: center; min-height: calc(24px / var(--amx-ui-scale, 1)); gap: var(--space-2, .5rem); margin: 0; }
.staff-calendar-admin-selected .staff-calendar-admin-choice[b-2ioeio48ej] { color: var(--accent-success-text); }
.staff-calendar-team-trigger[b-2ioeio48ej] { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: var(--space-2, .5rem); min-height: 2rem; padding: var(--space-2, .5rem) var(--space-3, .75rem); border: 1px solid var(--border-interactive); border-radius: var(--radius-md, 8px); background: var(--bg-input); color: var(--text-primary); text-align: left; }
.staff-calendar-team-trigger > span:first-child[b-2ioeio48ej] { overflow-wrap: anywhere; }
.staff-calendar-team-trigger > span:last-child[b-2ioeio48ej] { flex: none; }
.staff-calendar-team-options[b-2ioeio48ej] { padding: var(--space-3, .75rem); margin-top: var(--space-2, .5rem); border: 1px solid var(--border-interactive); border-radius: var(--radius-md, 8px); background: var(--bg-card); }
.staff-calendar-team-results[b-2ioeio48ej] { display: grid; gap: var(--space-1, .25rem); max-height: 12rem; overflow: auto; margin-top: var(--space-2, .5rem); }
.staff-calendar-team-results button[b-2ioeio48ej] { min-height: 2.25rem; padding: var(--space-2, .5rem); border: 1px solid transparent; border-radius: var(--radius-sm, 6px); background: var(--bg-card); color: var(--text-primary); text-align: left; overflow-wrap: anywhere; }
.staff-calendar-team-results button:hover[b-2ioeio48ej] { background: var(--bg-hover); }
.staff-calendar-team-results button[aria-pressed=true][b-2ioeio48ej] { border-color: var(--accent-success-text); font-weight: 600; text-decoration: underline; }
.staff-calendar-selection li button[b-2ioeio48ej] { min-width: 1.75rem; min-height: 1.75rem; }
.staff-calendar-confirmation[b-2ioeio48ej] { padding: var(--space-4, 1rem); overflow: auto; }
.staff-calendar-confirmation h2[b-2ioeio48ej] { font-size: 1.125rem; }
.staff-calendar-confirmation li[b-2ioeio48ej] { overflow-wrap: anywhere; }
.staff-calendar-error[b-2ioeio48ej] { display: flex; align-items: center; gap: var(--space-3, .75rem); padding: var(--space-4, 1rem); color: var(--accent-danger-text); }
.staff-calendar :is(button, input, select, [tabindex]):focus-visible[b-2ioeio48ej] { outline: 2px solid var(--border-focus, var(--accent-success-fill)); outline-offset: 2px; }
/* The modal is inside the app's scaled body; percentages follow that containing
   block and fill the actual screen, rather than shrinking a vw/vh-sized dialog again. */
.staff-calendar-host[b-2ioeio48ej]  .staff-calendar-dialog { width: calc(100% - 1rem); max-width: none; height: calc(100% - 1rem); margin: .5rem auto; min-height: 0; }
.staff-calendar-host[b-2ioeio48ej]  .staff-calendar-dialog > .modal-content { height: 100%; min-height: 0; }
.staff-calendar-host[b-2ioeio48ej]  .staff-calendar-dialog > .modal-content > .modal-body { display: flex; min-height: 0; overflow: hidden; }
.staff-calendar-host[b-2ioeio48ej]  .staff-calendar-dialog > .modal-content > :is(.modal-header, .modal-footer) { padding: var(--space-2, .5rem) var(--space-3, .75rem); }
.staff-calendar-navigation[b-2ioeio48ej], .staff-calendar-paging[b-2ioeio48ej], .staff-calendar-error[b-2ioeio48ej] { flex: none; }
@media (max-width: 700px) {
    .staff-calendar-requirement-group[b-2ioeio48ej] { grid-template-columns: minmax(0, 1fr); }
    .staff-calendar-requirement-choice[b-2ioeio48ej] { max-width: none; border-inline-end: 0; border-bottom: 1px solid var(--border-color); border-end-start-radius: 0; border-start-end-radius: calc(var(--radius-sm, 6px) - 1px); }
}
@media (max-width: 1100px), (max-height: 750px) {
    .staff-calendar-host[b-2ioeio48ej]  .staff-calendar-dialog > .modal-content > .modal-body { display: block; overflow-y: auto; }
    .staff-calendar[b-2ioeio48ej] { height: auto; min-height: 100%; }
    .staff-calendar-table[b-2ioeio48ej] { flex: none; height: clamp(16rem, 40vh, 26rem); min-height: 16rem; max-height: none; }
}
@media (max-width: 700px) {
    .staff-calendar-filters > div[b-2ioeio48ej] { flex-basis: 100%; }
    .staff-calendar-filters .staff-calendar-team-options[b-2ioeio48ej] { grid-column: 1 / -1; }
}
/* /Components/DataView/Tools/NavigationPopout.razor.rz.scp.css */
.directions-option-container[b-bia2hn581a] {
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    background-color: #ffffff;
    padding: 16px;
    align-items: center;
    justify-content: space-between;
    display: flex;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.directions-option-container:hover[b-bia2hn581a] {
    border-color: #d4d4d4;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.directions-option-container.active-mode[b-bia2hn581a] {
    background-color: #22c55e;
    border-color: #22c55e;
    color: #ffffff !important;
    box-shadow: 0 1px 3px 0 rgba(34, 197, 94, 0.3);
}
/* /Components/DataView/Tools/WeatherPopout.razor.rz.scp.css */
.icon[b-3cjfnrkx9a] {
    font-size: 500%;
}

.btn-primary[b-3cjfnrkx9a] {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border: 1px solid #3b82f6 !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.btn-primary:hover[b-3cjfnrkx9a] {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    transform: translateY(-1px) !important;
}
/* /Components/Dialogs/AmxFileViewer.razor.rz.scp.css */
/* ── Full-screen file viewer ──────────────────────────────────────────────
   A single sheet laid over the app rather than a dialog box. The page behind
   stays visible through frosted glass, and everything below the toolbar is
   given to the file - which is the whole point for PDFs and drawings. */

.viewer-root[b-gb6jpy3yw9] {
    position: fixed;
    inset: 0;
    /* Above every AmxModal (the modal stack starts at 1080) but below the alert
       layer at 1999/2000, so an error raised from here still lands on top. */
    z-index: 1900;
    display: flex;
    animation: viewer-in-b-gb6jpy3yw9 140ms ease-out;
}

/* The docked title bar leaves the underlying form available while retaining
   the preview element and its playback position in the DOM. */
.viewer-root--minimized[b-gb6jpy3yw9] {
    inset: auto 12px 12px auto;
    display: block;
    width: min(420px, calc(100vw - 24px));
}

.viewer-root--minimized .viewer-sheet[b-gb6jpy3yw9] {
    margin: 0;
    box-shadow: var(--shadow-md);
    animation: none;
}

.viewer-root--minimized .viewer-bar[b-gb6jpy3yw9] {
    border-bottom: 0;
}

.viewer-glass[b-gb6jpy3yw9] {
    position: absolute;
    inset: 0;
    background-color: color-mix(in srgb, var(--bg-primary, #000) 55%, transparent);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    cursor: pointer;
}

/* Inset just enough to keep a rim of the blurred page in view: it reads as a
   layer over the app, not a navigation away from it. */
.viewer-sheet[b-gb6jpy3yw9] {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: clamp(8px, 1.6vh, 20px);
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    background-color: var(--bg-card);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
    animation: viewer-sheet-in-b-gb6jpy3yw9 160ms ease-out;
}

/* ── Toolbar ─────────────────────────────────────────────────────────── */

.viewer-bar[b-gb6jpy3yw9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--border-color);
    background-color: color-mix(in srgb, var(--bg-card) 82%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.viewer-glyph[b-gb6jpy3yw9] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 0.95rem;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

.viewer-glyph--danger[b-gb6jpy3yw9] {
    background-color: color-mix(in srgb, var(--accent-danger) 14%, transparent);
    color: var(--accent-danger-text);
}

.viewer-glyph--info[b-gb6jpy3yw9],
.viewer-glyph--primary[b-gb6jpy3yw9] {
    background-color: var(--accent-wash);
    color: var(--accent-link);
}

.viewer-glyph--success[b-gb6jpy3yw9] {
    background-color: color-mix(in srgb, var(--accent-success) 14%, transparent);
    color: var(--accent-success-text);
}

.viewer-glyph--warning[b-gb6jpy3yw9] {
    background-color: color-mix(in srgb, var(--accent-warning) 16%, transparent);
    color: var(--accent-warning-text);
}

.viewer-identity[b-gb6jpy3yw9] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.viewer-name[b-gb6jpy3yw9] {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.viewer-kind[b-gb6jpy3yw9] {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.viewer-tools[b-gb6jpy3yw9] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
    flex: 0 0 auto;
}

.viewer-tool[b-gb6jpy3yw9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.viewer-close[b-gb6jpy3yw9] {
    margin-left: 0.25rem;
}

/* Below ~640px the labels are dropped and the toolbar runs on icons alone,
   which is all that fits next to a file name. */
@media (max-width: 640px) {
    .viewer-tool-text[b-gb6jpy3yw9] {
        display: none;
    }
}

/* ── Stage ───────────────────────────────────────────────────────────── */

.viewer-stage[b-gb6jpy3yw9] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    background-color: var(--bg-tertiary);
}

.viewer-stage[hidden][b-gb6jpy3yw9] {
    display: none;
}

/* `margin: auto` rather than flex centring: an image larger than the stage
   still scrolls to its top-left corner instead of overflowing out of reach. */
.viewer-stage > *[b-gb6jpy3yw9] {
    margin: auto;
}

/* PDFs and video bring their own controls and want every pixel. */
.viewer-stage--fill[b-gb6jpy3yw9] {
    overflow: hidden;
}

.viewer-media[b-gb6jpy3yw9] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Over the stage while the image is still on its way (it is held back until then). */
.viewer-media-wait[b-gb6jpy3yw9] {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    display: none;
    pointer-events: none;
}

.viewer-stage:has(> .viewer-media:not(.is-ready)) > .viewer-media-wait[b-gb6jpy3yw9] {
    display: flex;
}

.viewer-player[b-gb6jpy3yw9] {
    margin: 2rem auto;
    max-width: 100%;
    max-height: 100%;
    background-color: #000;
}

.viewer-message[b-gb6jpy3yw9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 30rem;
    padding: 2rem 1.5rem;
    color: var(--text-primary);
}

.viewer-message-icon[b-gb6jpy3yw9] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--text-muted);
}

.viewer-message-icon--danger[b-gb6jpy3yw9] {
    color: var(--accent-danger);
}

@keyframes viewer-in-b-gb6jpy3yw9 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes viewer-sheet-in-b-gb6jpy3yw9 {
    from {
        transform: scale(0.985);
    }
    to {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .viewer-root[b-gb6jpy3yw9],
    .viewer-sheet[b-gb6jpy3yw9] {
        animation: none;
    }
}
/* /Components/Grid/DataGrid.razor.rz.scp.css */
/* Modern DataGrid Container */
.data-grid-container[b-ownldxs3si] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-card, #ffffff);
    border-radius: 8px;
}

/* The toolbar's native controls - the row-count and select-top lists, the number field's spinner,
   the grid's scrollbars - are drawn by the browser, and without this it keeps drawing them light on
   a dark grid. The row-count list was the visible one: an open dropdown is a white popup, and the
   option text takes the select's own near-white --text-primary, so the choices were white on white
   and the greyed "All - report too large" least readable of all. Same fix, same reason, as
   .rtd-shell and the modals. */
[data-theme="dark"] .data-grid-container[b-ownldxs3si] {
    color-scheme: dark;
}

.data-grid-container.compact[b-ownldxs3si]  .grid-header-cell-template {
    padding: calc(0.25rem * var(--amx-grid-zoom, 1)) calc(0.375rem * var(--amx-grid-zoom, 1));
    font-size: calc(0.75rem * var(--amx-grid-zoom, 1));
}

.data-grid-container.compact[b-ownldxs3si]  .grid-cell {
    min-height: calc(1.75rem * var(--amx-grid-zoom, 1));
    padding: calc(0.2rem * var(--amx-grid-zoom, 1)) calc(0.4rem * var(--amx-grid-zoom, 1));
    font-size: calc(0.84375rem * var(--amx-grid-zoom, 1));
}

.data-grid-container.compact .grid-cell[b-ownldxs3si] {
    padding: calc(0.1875rem * var(--amx-grid-zoom, 1)) calc(0.375rem * var(--amx-grid-zoom, 1));
}

.data-grid-container[b-ownldxs3si]  .grid-file-actions {
    container: grid-file-actions / inline-size;
    width: 100%;
    min-width: 0;
}

.data-grid-container[b-ownldxs3si]  .grid-file-actions-buttons {
    flex-wrap: wrap;
}

.data-grid-container[b-ownldxs3si]  .grid-file-actions-buttons > .btn {
    flex: 0 0 auto;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    white-space: nowrap;
}

@container grid-file-actions (width < 12rem) {
    .data-grid-container[b-ownldxs3si]  .grid-file-action-label {
        display: none;
    }
}

/* Header Section */
.data-grid-header[b-ownldxs3si] {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: stretch;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-card, #ffffff);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    min-width: 0;
}

/* "Select top [10] [records v] ->" - built to the same recipe as the row-count control beside it,
   because the two are a pair: one chooses what you see, the other what you take. Border on the
   wrapper, segments divided by hairlines. */
.grid-select-top[b-ownldxs3si] {
    display: inline-flex;
    align-items: stretch;
    height: 36px;
    /* --field-border, the resting edge every .amx-field uses, not the --border-color hairline:
       that token is decorative separation between surfaces and is far too faint to bound a
       control - 1.33:1 against the toolbar in light and 1.15:1 in dark, where the whole control
       simply dissolved into the bar behind it. See app.css, which says so of its own token. */
    border: 1px solid var(--field-border, #5f6673);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-color: var(--bg-input);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* The same accent edge and ring .amx-field raises on focus. --border-interactive was a step DOWN
   from the resting edge in dark, so reaching the control made it quieter rather than louder. */
.grid-select-top:focus-within[b-ownldxs3si] {
    border-color: var(--accent-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 37, 99, 235), 0.15);
}

.grid-select-top-label[b-ownldxs3si] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    cursor: pointer;
}

.grid-select-top-label i[b-ownldxs3si] {
    font-size: 0.8rem;
}

/* Wide enough for the largest number it will take - the row count can run to five figures - and
   with the browser's spinner arrows taken off. Those reserve a chunk of the content box whether or
   not they are painted, which is what left a typed "100" showing as "1". */
.grid-select-top-value[b-ownldxs3si] {
    width: 4.75rem;
    min-width: 4.75rem;
    flex: none;
    padding: 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-primary);
    background-color: transparent;
    border: 0;
    border-right: 1px solid var(--border-color);
    appearance: textfield;
    -moz-appearance: textfield;
}

.grid-select-top-value[b-ownldxs3si]::-webkit-outer-spin-button,
.grid-select-top-value[b-ownldxs3si]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.grid-select-top-value:focus[b-ownldxs3si] {
    outline: none;
}

.grid-select-top-unit[b-ownldxs3si] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding: 0 1.5rem 0 0.5rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    background-color: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position-x: calc(100% - 0.4rem);
    background-position-y: center;
    border: 0;
    border-right: 1px solid var(--border-color);
    cursor: pointer;
}

.grid-select-top-unit:focus[b-ownldxs3si] {
    outline: none;
}

/* What the setting comes to, when that is not the number typed - a percentage, or a count larger
   than the grid holds. Quieter than the field it explains: it is a readout, not another input. */
.grid-select-top-resolved[b-ownldxs3si] {
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
}

.grid-select-top-apply[b-ownldxs3si] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 0 0.5rem;
    font-size: 0.8rem;
    color: var(--accent-primary);
    background-color: var(--bg-secondary);
    border: 0;
    cursor: pointer;
}

.grid-select-top-apply:hover:not(:disabled)[b-ownldxs3si] {
    background-color: var(--accent-wash);
}

.grid-select-top-apply:disabled[b-ownldxs3si] {
    color: var(--text-muted, var(--text-secondary));
    cursor: default;
    opacity: 0.55;
}

/* The row-count selector reads as one labelled control: "Showing | 50 v". The border lives on
   the wrapper so the label and the select look like halves of a single thing rather than a caption
   that happens to sit next to a dropdown. */
.grid-size-control[b-ownldxs3si] {
    display: inline-flex;
    align-items: stretch;
    height: 36px;
    /* --field-border and the accent focus ring, exactly as .grid-select-top beside it - see the
       note there. The two are a pair and have to read as one kind of thing. */
    border: 1px solid var(--field-border, #5f6673);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-color: var(--bg-input);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.grid-size-control:focus-within[b-ownldxs3si] {
    border-color: var(--accent-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 37, 99, 235), 0.15);
}

.grid-size-label[b-ownldxs3si] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    cursor: pointer;
}

.grid-size-label i[b-ownldxs3si] {
    font-size: 0.8rem;
}

/* What the drawn rows are a slice of. Deliberately plain text, not a pill: the pills beside it
   are counts of things, and this is the denominator of the control to its left. */
.grid-size-of[b-ownldxs3si] {
    font-size: 0.78rem;
    white-space: nowrap;
    color: var(--text-secondary);
}

.grid-search-size[b-ownldxs3si] {
    height: 100%;
    width: auto;
    /* A <select> sizes itself to its WIDEST option, not to the selected one, so the greyed
       "All - report too large" entry would otherwise stretch the closed control by ~110px on every
       large report and shove the toolbar about. Only numbers and "All" are ever displayed here, so
       capping costs nothing; the popup list still lays out to its own content. */
    max-width: 6.5rem;
    min-width: 68px;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding: 0 1.75rem 0 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    background-color: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position-x: calc(100% - 0.5rem);
    background-position-y: center;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.grid-search-size:focus[b-ownldxs3si] {
    outline: none;
}

/* Only drawn when some of the selection is out of sight. */
.grid-load-note[b-ownldxs3si] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.4rem 0.9rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.grid-load-note i[b-ownldxs3si] {
    color: var(--text-muted, var(--text-secondary));
}

[b-ownldxs3si] .report-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    text-wrap: nowrap;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    padding: 0 0.5rem 0 0;
}

.selectors-wrapper[b-ownldxs3si] {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.header-controls[b-ownldxs3si] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
    justify-content: space-between;
    padding: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
}

.header-controls[b-ownldxs3si]::-webkit-scrollbar {
    height: 6px;
}

.header-controls[b-ownldxs3si]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 999px;
}

.report-total-count[b-ownldxs3si] {
    font-size: 0.78rem;
    text-wrap: nowrap;
    color: var(--text-primary);
    font-weight: 600;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--border-color, #eee);
}


/* Content Area */
.data-grid-content[b-ownldxs3si] {
    flex: 1;
    overflow: auto;
    background-color: var(--bg-card, #ffffff);
    padding: 10px;
}

/* Table View */
.table-container[b-ownldxs3si] {
    height: 100%;
    width: 100%;
    overflow: auto;
    /* Round the scrolling viewport, so wide coloured headers keep their corners when panned. */
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    /* An empty reserved gutter leaves the header short of the rounded right edge. */
    scrollbar-gutter: auto;
    /* The anchor for the column drop line, which is placed in this container's coordinates. */
    position: relative;
}

/* CSS Grid-based Table Layout */
.table-container:focus-visible[b-ownldxs3si] {
    outline: 2px solid var(--border-focus, var(--accent-success-text));
    outline-offset: -2px;
}

.grid-header-row[b-ownldxs3si] {
    display: grid;
    position: var(--amx-header-position, sticky);
    top: -1px;
    z-index: 10;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background-color: var(--bg-secondary, #f9fafb);
    background-clip: padding-box;
    color: var(--text-primary, inherit);
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.grid-header-row[b-ownldxs3si],
.grid-row[b-ownldxs3si] {
    grid-template-columns: var(--amx-grid-cols);
}

/* ── Zoom ─────────────────────────────────────────────────────────────
   --amx-grid-zoom is set on .table-container by the grid (see DataGrid.Zoom.cs) and is the ONLY
   thing the zoom control changes. Every size that has to grow with it is written as a multiple of
   it, here and in the rules below; anything that is not written that way simply does not zoom.

   Deliberately not `transform: scale()` or the `zoom` property on the container: both scale the
   scroll container itself, so the grid's own scrollbars, its sticky header and the hit areas of
   the resize handles all end up in a different coordinate space from the pointer. Scaling the
   type and the boxes leaves the layout honest - the grid still fills its area, still scrolls
   normally, and text still reflows and wraps instead of being magnified into blur.

   The fallback is 1 in each calc rather than a declaration on the container, so a cell rendered
   anywhere else (a card, an inline editor) is unaffected. */
.grid-header-cell[b-ownldxs3si] {
    padding: calc(4px * var(--amx-grid-zoom, 1)) calc(8px * var(--amx-grid-zoom, 1));
    text-align: left;
    font-size: calc(0.875rem * var(--amx-grid-zoom, 1));
    font-weight: 600;
    /* Paints the row's own colour rather than letting it show through. The row box is only as
       wide as the scroll container, not as wide as its columns, so a background left to the row
       stops at the fold - see the note on .grid-row. The cells tile the columns exactly, so
       painting them covers the full width whatever the grid is scrolled to. */
    background-color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Anchors the resize handle to the column's trailing edge. */
    position: relative;
}

/* ===========================================
   COLUMN RESIZE / REORDER
   The handle sits wholly INSIDE the column's trailing edge rather than straddling it: the header
   cell is overflow:hidden (it needs that for the title ellipsis), so anything hanging over the
   border would be clipped and only half the grab area would answer the pointer.
   =========================================== */
.columns-customisable .grid-header-cell.data-column[b-ownldxs3si] {
    /* Says "this can be picked up" without waiting for the drag to start. */
    cursor: grab;
}

.columns-customisable .grid-header-row.columns-reordering .grid-header-cell.data-column[b-ownldxs3si] {
    cursor: grabbing;
}

.col-resize-handle[b-ownldxs3si] {
    position: absolute;
    top: 0;
    right: 0;
    /* Wide enough to hit without aiming; the line the user sees is the 2px ::after below. */
    width: 9px;
    height: 100%;
    z-index: 2;
    cursor: col-resize;
    /* Invisible until wanted: a permanent line on every column edge doubles up with the cell
       border that is already there. */
    background: transparent;
    border: 0;
    padding: 0;
    touch-action: none;
}

.col-resize-handle[b-ownldxs3si]::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: var(--accent-primary, #0a84ff);
    opacity: 0;
    transition: opacity 0.12s ease;
}

.col-resize-handle:hover[b-ownldxs3si]::after,
.col-resize-handle:focus-visible[b-ownldxs3si]::after,
.col-resize-handle.col-resize-handle-active[b-ownldxs3si]::after {
    opacity: 1;
}

.col-resize-handle:focus-visible[b-ownldxs3si] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 1px;
}

/* The column being dragged fades, and is outlined as the thing that has been picked up, so it
   stays distinct from the column being dropped onto - which is highlighted in the accent colour
   the moment the pointer reaches it. */
.grid-header-cell.data-column.col-drag-source[b-ownldxs3si] {
    opacity: 0.45;
    outline: 1px dashed var(--text-muted, #6c757d);
    outline-offset: -3px;
}

/* Which column. Naming the target by tinting it is the half of this the user was left to work
   out: with only a hairline on one edge, the column it belonged to - and whether the drop was
   before or after it - had to be inferred from a 2px line. */
.grid-header-cell.data-column.col-drop-target[b-ownldxs3si] {
    background-color: var(--accent-wash, rgba(10, 132, 255, 0.12));
}

/* Which side. An inset box-shadow rather than a border so the line does not shift the header
   text as it appears. Thicker than the tint's edge so the insertion point still reads as the
   sharper of the two. */
.grid-header-cell.data-column.col-drop-before[b-ownldxs3si] {
    box-shadow: inset 3px 0 0 0 var(--accent-primary, #0a84ff);
}

.grid-header-cell.data-column.col-drop-after[b-ownldxs3si] {
    box-shadow: inset -3px 0 0 0 var(--accent-primary, #0a84ff);
}

/* The insertion point, drawn down the whole grid (see showDropLine in blazorHelpers.js). This is
   the gap the column is going into, so it reads as a place rather than as an edge of something.
   Absolutely positioned inside the scroll container (which is `position: relative` for this) and
   placed in content coordinates, so it stays with its columns when the grid is scrolled sideways.

   ::deep, because the line is created in JS and so never carries this stylesheet's scope
   attribute - the scroll container it is appended to does, which is what ::deep matches on. */
[b-ownldxs3si] .col-drop-line {
    position: absolute;
    top: 0;
    width: 3px;
    margin-left: -1px;
    z-index: 11;
    display: none;
    pointer-events: none;
    border-radius: 2px;
    background: var(--accent-primary, #0a84ff);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

[b-ownldxs3si] .col-drop-line.visible {
    display: block;
}

/* A cap at the head of the line, sitting over the header row: at a glance it points at the gap,
   which a bare line running under the header text does not. */
[b-ownldxs3si] .col-drop-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 11px;
    height: 11px;
    transform: translate(-50%, -3px) rotate(45deg);
    border-radius: 2px;
    background: var(--accent-primary, #0a84ff);
}

/* The moving column's name, and where it is about to go, following the cursor. Offset down and
   right of the pointer so it never sits under it, and pointer-events:none so it cannot become the
   drop target itself. */
[b-ownldxs3si] .col-drag-ghost {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 30;
    transform: translate(14px, 14px);
    padding: 4px 10px;
    border-radius: var(--radius-sm, 6px);
    background-color: var(--accent-primary, #0a84ff);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    opacity: 0;
}

[b-ownldxs3si] .col-drag-ghost.visible {
    opacity: 1;
}


/* Dragging a column must not select the header text on the way past. */
.grid-header-row.columns-reordering[b-ownldxs3si] {
    user-select: none;
}

/* A coarse pointer cannot hit a 6px target, and has no hover to reveal it either. Resizing is
   the pointer-precise half of this feature, so on touch the handle steps out of the way and the
   header is left to the drag - which works fine with a finger. */
@media (pointer: coarse) {
    .col-resize-handle[b-ownldxs3si] {
        display: none;
    }
}

.grid-header-cell:not(:first-child)[b-ownldxs3si] {
    /* Decorative separation follows the configured header ink without changing its fill. */
    border-left: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.grid-header-cell.checkbox-column[b-ownldxs3si] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-body[b-ownldxs3si] {
    overflow: visible;
    flex: 1 0 auto;
}

/* Row colours are painted by the cells, which inherit them from here.
   .table-container scrolls sideways and lays its children out in a column flex, so a row is
   stretched to the container's *visible* width - not to the width of its own columns. When the
   columns are wider than that, the cells overflow the row box but a background on the row is
   still only painted across that box, so the highlight stopped short of the right-hand columns
   and drifted further off the further the grid was scrolled. The cells tile the columns exactly
   and have no gaps between them, so painting them instead covers the whole row.
   The colours stay declared here, once, and the cells follow every state - hover, selected,
   focus - through `background-color: inherit`.

   Nothing here transitions, deliberately. Pointing at a row is a question about where the pointer
   is now, and any fade at all answers it late: the row just left is still lit while the row landed
   on has yet to catch up. Running down a grid that reads as lag rather than polish. The same goes
   for the cells' box-shadow, which carries the highlight for rows with colours of their own -
   see .has-own-colour. Hover is state, not motion. */
.grid-row[b-ownldxs3si] {
    /* Selection must tint each row's own zebra surface, including in the Tools report. */
    --grid-row-surface: var(--bg-card);
    display: grid;
    /* VirtualizedGridRow uses this same height for every rendered and unrendered row. Letting
       wrapped text change it makes the measured average and spacer oscillate near the bottom. */
    height: calc(50px * var(--amx-grid-zoom, 1));
    grid-template-rows: minmax(0, 1fr);
    box-sizing: border-box;
    cursor: pointer;
    background-color: var(--bg-card, transparent);
    /* Keep the virtualiser's geometry; the cells paint a single subtle seam instead of two. */
    border-bottom: 1px solid transparent;
}

.data-grid-container.compact .grid-row[b-ownldxs3si] {
    height: calc(36px * var(--amx-grid-zoom, 1));
}

.data-grid-container.has-photo-column .grid-row[b-ownldxs3si] {
    height: calc(80px * var(--amx-grid-zoom, 1));
}

/* Alternating bands, in both themes. Dark had them and light did not, so a light grid was a wall
   of white with nothing to run your eye along - the thing the old web app did with plain white and
   grey rows.

   The class comes from the row's index in the data, not from :nth-child - see IsBandedRow in
   DataGrid.razor. The rows are virtualised, so nth-child parity belongs to the DOM position rather
   than to the record sitting in it, and the banding inverted whenever scrolling slid the window by
   an odd number of rows.

   Declared before the hover, focus and selection rules below, all of which are equally specific and
   so win on source order. */
.grid-row.grid-row-band[b-ownldxs3si] {
    --grid-row-surface: var(--grid-row-band);
    background-color: var(--grid-row-band, #f9fafb);
}

/* Hover and focus, mixed into whichever colour the row already has. One flat hover colour cannot
   be right for both bands - the dark one sat 2/255 from the banded rows, so pointing at those did
   nothing while pointing at the others worked, which reads as the highlight flickering on and off
   down the grid. Same ink and the same amount into each band instead, so the step is the same
   wherever the pointer lands.

   It has to be background-color. Cells are background-color:inherit, so they copy the row's colour
   and paint it over anything layered on the row behind them - a translucent overlay on the row is
   simply covered up.

   Not on selected rows: those have their own pair of rules below that deepen the selection tint
   instead, because a selection has to stay visibly selected while pointed at. */
.grid-row:hover:not(.row-selected)[b-ownldxs3si],
.grid-row:focus-visible:not(.row-selected)[b-ownldxs3si] {
    background-color: color-mix(in srgb,
        var(--grid-row-veil-ink) var(--grid-row-veil-amount), var(--bg-card));
}

.grid-row.grid-row-band:hover:not(.row-selected)[b-ownldxs3si],
.grid-row.grid-row-band:focus-visible:not(.row-selected)[b-ownldxs3si] {
    background-color: color-mix(in srgb,
        var(--grid-row-veil-ink) var(--grid-row-veil-amount), var(--grid-row-band));
}

/* Rows are focusable (Enter activates them), so they need a visible focus indicator.
   Inset so it is not clipped by the scrolling table container. */
.grid-row:focus-visible[b-ownldxs3si] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: -2px;
}

.grid-row.row-selected[b-ownldxs3si] {
    background-color: color-mix(in srgb, var(--accent-primary) 10%, var(--grid-row-surface));
}

/* Selection and hover are two different questions - what the grid is acting on, and where the
   pointer is - so a selected row still has to answer the second one. The plain hover colour cannot:
   it is *lighter* than the selection tint in light theme, so painting it over a selected row reads
   as the selection being lost rather than the row being pointed at. Deepening the selection tint
   with the accent instead keeps the row plainly selected and still moves under the pointer.
   After .row-selected and heavier than it, so it wins while the pointer is on the row. */
.grid-row.row-selected:hover[b-ownldxs3si],
.grid-row.row-selected:focus-visible[b-ownldxs3si] {
    background-color: color-mix(in srgb, var(--accent-primary) 20%, var(--grid-row-surface));
}

/* Paint the hover edge on each cell, not the row: the cells cover the row background and can
   extend past its box when the grid scrolls horizontally. currentColor follows the theme and,
   for customer-coloured cells, the contrasting text colour chosen for that cell. The inset
   shadow leaves row height and the virtualizer's measurements unchanged. */
.grid-row:hover[b-ownldxs3si]  .grid-cell,
.grid-row:focus-visible[b-ownldxs3si]  .grid-cell {
    box-shadow:
        inset 0 2px 0 currentColor,
        inset 0 -2px 0 currentColor,
        inset 2px 0 0 var(--grid-row-left-edge, transparent),
        inset -2px 0 0 var(--grid-row-right-edge, transparent);
}

.grid-row:hover[b-ownldxs3si]  .grid-cell:first-child,
.grid-row:focus-visible[b-ownldxs3si]  .grid-cell:first-child {
    --grid-row-left-edge: currentColor;
}

.grid-row:hover[b-ownldxs3si]  .grid-cell:last-child,
.grid-row:focus-visible[b-ownldxs3si]  .grid-cell:last-child {
    --grid-row-right-edge: currentColor;
}

/* Cells that carry a colour of their own - a status band, a RAG colour - set it inline and
   !important, and are meant to: the colour is information, not decoration, so hover must not
   paint over it and cannot anyway. The row states are laid *over* the cell instead, as an inset
   shadow. A different property, so it is not in the fight with the inline background; it is
   painted above that background but below the cell's own text and controls.

   Two parts, because a tint alone cannot carry this. The veil is mixed out of currentColor, so
   it works from whatever the cell is showing - a light band takes a dark veil, a dark band a
   light one - but that also means it always drags the background *towards* the text, and a band
   dark enough to be obvious at 30% has lost a third of its text contrast and most of the colour
   that made it worth having. So the veil stays at a readable strength and the contrasting edge
   carries the hover signal across the width of the row.

   The rules go on every cell of the row so the line is unbroken across it; the veil only on the
   cells that need it, carried in as a variable that is transparent everywhere else. Rows with no
   colour in them keep the plain background hover above, untouched - hence the :has(). */
[b-ownldxs3si] .grid-cell.has-own-colour {
    --grid-cell-veil: color-mix(in srgb, currentColor 20%, transparent);
    --grid-cell-veil-strong: color-mix(in srgb, currentColor 30%, transparent);
    /* Selected *and* pointed at - the two states stacked, so it is a step past either alone. */
    --grid-cell-veil-strongest: color-mix(in srgb, currentColor 40%, transparent);
}

.grid-row:hover:has(.grid-cell.has-own-colour)[b-ownldxs3si]  .grid-cell,
.grid-row:focus-visible:has(.grid-cell.has-own-colour)[b-ownldxs3si]  .grid-cell {
    box-shadow:
        inset 0 2px 0 0 currentColor,
        inset 0 -2px 0 0 currentColor,
        inset 2px 0 0 var(--grid-row-left-edge, transparent),
        inset -2px 0 0 var(--grid-row-right-edge, transparent),
        inset 0 0 0 100vmax var(--grid-cell-veil, transparent);
}

/* Selection is already indicated by the checkbox and row tint. Only tint the configured
   cells here: drawing selection edges across the row creates repeated heavy rules when
   Tools selects every record. Keep outlines for the row being hovered or keyboard-focused. */
.grid-row.row-selected[b-ownldxs3si]  .grid-cell.has-own-colour {
    box-shadow: inset 0 0 0 100vmax var(--grid-cell-veil-strong, transparent);
}

/* A selected coloured row retains the same hover/focus outline as any other row. */
.grid-row.row-selected:hover:has(.grid-cell.has-own-colour)[b-ownldxs3si]  .grid-cell,
.grid-row.row-selected:focus-visible:has(.grid-cell.has-own-colour)[b-ownldxs3si]  .grid-cell {
    box-shadow:
        inset 0 2px 0 0 currentColor,
        inset 0 -2px 0 0 currentColor,
        inset 2px 0 0 var(--grid-row-left-edge, transparent),
        inset -2px 0 0 var(--grid-row-right-edge, transparent),
        inset 0 0 0 100vmax var(--grid-cell-veil-strongest, transparent);
}

/* The record just opened from this report keeps a green edge after returning. Like the hover
   outline, paint each cell so it covers horizontally scrolled columns and customer cell colours.
   This is separate from checkbox selection and leaves row fills alone. */
.grid-row.row-previously-opened[b-ownldxs3si]  .grid-cell {
    box-shadow:
        inset 0 3px 0 var(--accent-success),
        inset 0 -3px 0 var(--accent-success),
        inset 3px 0 0 var(--grid-opened-left-edge, transparent),
        inset -3px 0 0 var(--grid-opened-right-edge, transparent);
}

.grid-row.row-previously-opened[b-ownldxs3si]  .grid-cell:first-child {
    --grid-opened-left-edge: var(--accent-success);
}

.grid-row.row-previously-opened[b-ownldxs3si]  .grid-cell:last-child {
    --grid-opened-right-edge: var(--accent-success);
}

/* On a customer-coloured row the cell's own fill masks the normal row hover, so retain its
   existing light hover veil while keeping the returned-to marker visible. */
.grid-row.row-previously-opened:hover:has(.grid-cell.has-own-colour)[b-ownldxs3si]  .grid-cell,
.grid-row.row-previously-opened:focus-visible:has(.grid-cell.has-own-colour)[b-ownldxs3si]  .grid-cell {
    box-shadow:
        inset 0 3px 0 var(--accent-success),
        inset 0 -3px 0 var(--accent-success),
        inset 3px 0 0 var(--grid-opened-left-edge, transparent),
        inset -3px 0 0 var(--grid-opened-right-edge, transparent),
        inset 0 0 0 100vmax var(--grid-cell-veil, transparent);
}

.grid-empty-row[b-ownldxs3si] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.checkbox-column[b-ownldxs3si] {
    width: 50px;
}


.checkbox-cell[b-ownldxs3si] {
    text-align: center;
}

.tools-row-link-header[b-ownldxs3si],
.tools-row-link-cell[b-ownldxs3si] {
    justify-content: center;
    text-align: center;
}

.tools-row-link[b-ownldxs3si] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(24px / var(--amx-ui-scale, 1));
    min-height: calc(24px / var(--amx-ui-scale, 1));
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.tools-row-link:hover[b-ownldxs3si] {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.tools-row-link:focus-visible[b-ownldxs3si] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}


/* Checkbox Styling */
.checkbox-cell .datagrid-checkbox-wrapper[b-ownldxs3si] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    height: 100%;
}


[b-ownldxs3si] .datagrid-checkbox-wrapper:hover {
    border-color: #9ca3af;
}


/* List View */
.list-container[b-ownldxs3si] {
    padding: 20px;
}

/* Follows the last card or list item drawn; coming near it draws the next batch
   (DataGrid.Collection.cs). A pixel high so there is something to observe, with no gap. */
.collection-sentinel[b-ownldxs3si] {
    height: 1px;
    margin-top: -1px;
}

/* content-visibility: the browser skips laying out and painting items that are off screen, and
   holds their place at the estimated height (the last laid-out height, once there is one), so a
   long list costs no more to scroll than a short one. Transitions name their properties:
   "all" also animated the layout of every item as a batch was added. */
.list-item[b-ownldxs3si] {
    background-color: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    position: relative;
    content-visibility: auto;
    contain-intrinsic-size: auto var(--amx-list-item-estimate, 320px);
}

.list-item:hover[b-ownldxs3si] {
    border-color: var(--accent-primary, #d1d5db);
    background-color: var(--bg-hover, #f9fafb);
}

/* List items are focusable (Enter activates them), so they need a visible focus indicator. */
.list-item:focus-visible[b-ownldxs3si] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 2px;
    background-color: var(--bg-hover, #f9fafb);
}

.list-item:last-child[b-ownldxs3si] {
    margin-bottom: 0;
}

.list-distance-badge[b-ownldxs3si] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    z-index: 1;
}

.list-distance-badge i[b-ownldxs3si] {
    font-size: 10px;
}

.list-header[b-ownldxs3si] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 8px;
}

.list-checkbox[b-ownldxs3si] {
    flex-shrink: 0;
}

.list-content[b-ownldxs3si] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.list-field[b-ownldxs3si] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.list-field .field-label[b-ownldxs3si] {
    min-width: 120px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.list-field .field-value[b-ownldxs3si] {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary, #374151);
}

.list-photo-wrapper[b-ownldxs3si] {
    max-width: 200px;
    max-height: 150px;
    overflow: hidden;
    border-radius: 6px;
}

.list-photo-wrapper[b-ownldxs3si]  img {
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* Empty States */
.empty-state[b-ownldxs3si] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 24px 20px;
    text-align: center;
    color: #64748b;
    height: 100%;
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

.empty-icon[b-ownldxs3si] {
    font-size: 14px;
    color: #94a3b8;
    margin: 0;
}

.empty-text[b-ownldxs3si] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #334155;
    letter-spacing: 0.1px;
}

.empty-subtext[b-ownldxs3si] {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
}

/* Error States */
.error-state[b-ownldxs3si] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}


.error-icon[b-ownldxs3si] {
    font-size: 48px;
    color: #ef4444;
}

.error-text[b-ownldxs3si] {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary, #374151);
}


/* The title wraps across the full column width and its filter button and sort arrow sit at the
   right of its last line, so a header is as many lines as its title and no more. They used to have
   a row of their own above every title, so a filterable column never took fewer than two lines.

   The title and the controls share one grid cell. The title ends with an invisible copy of the
   controls (.grid-header-actions-spacer, see DataGridRenderHelper.ColumnHeaderTemplate) that holds
   their room on its last line - or takes a line of its own when that line is full, which keeps a
   short title in a narrow column whole rather than shredding "ELR" into "EL / R" - and the real
   controls are laid over it at the bottom right. Both are bottom-aligned, so the titles of a row
   end on one line and every funnel and arrow sits along the bottom of the header.

   The controls stay SECOND in the DOM: a columnheader takes its accessible name from its contents
   in document order, so the column name has to come first or the filter button's label is read
   ahead of the column it belongs to. */
[b-ownldxs3si] .grid-header-cell-template {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: end;
    width: 100%;
    height: 100%;
}

/* .header-text and .column-filters are now <button>s (they were click-handled spans, so
   sorting and filtering were mouse-only). Strip the UA button chrome so they look exactly as
   before, and give them a visible focus ring since they are now in the tab order. */
[b-ownldxs3si] .grid-header-cell-template .header-text {
    grid-area: 1 / 1;
    align-self: end;
    width: 100%;
    text-align: left;
    overflow: visible;
    /* break-word only where a single word genuinely cannot fit; the old word-break shredded
       short titles the moment the box was narrow. */
    overflow-wrap: break-word;
    white-space: normal;
    cursor: pointer;
    appearance: none;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    font-size: calc(1em * var(--amx-header-text-scale, 1));
    line-height: 1.3;
    color: inherit;
    text-align: inherit;
}

/* The non-sortable variant is a <span>, so it must not present itself as clickable. */
[b-ownldxs3si] .grid-header-cell-template span.header-text {
    cursor: default;
}

/* Compact type must not compact hit targets, including at the app's default 90% UI scale. */
[b-ownldxs3si] .grid-header-cell-template button {
    min-height: calc(24px / var(--amx-ui-scale, 1));
    min-width: calc(24px / var(--amx-ui-scale, 1));
}

[b-ownldxs3si] .grid-header-cell-template .header-text:focus-visible,
[b-ownldxs3si] .grid-header-cell-template .column-filters:focus-visible,
[b-ownldxs3si] .grid-header-cell-template .column-filters-active:focus-visible {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 2px;
    border-radius: 3px;
}

[b-ownldxs3si] .grid-header-cell-template .header-text > i {
    padding-right: 5px;
}

/* The controls, over the room the spacer holds for them at the end of the title's last line. */
[b-ownldxs3si] .grid-header-cell-template .grid-header-actions {
    grid-area: 1 / 1;
    justify-self: end;
    align-self: end;
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

/* The spacer is drawn from the same markup as the controls, so it is their size - but as spans,
   inside the title, so it has to be told what the controls get from being buttons, and to undo
   the title's compacting, which the controls beside it do not share. Its text comes from data-text
   so the title's own text stays the column name alone. Middle-aligned, it is taller than the text
   at both ends, so its bottom is the title's bottom - where the controls sit. */
[b-ownldxs3si] .grid-header-cell-template .grid-header-actions-spacer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    vertical-align: middle;
    visibility: hidden;
    font-size: calc(1em / var(--amx-header-text-scale, 1));
    line-height: 1;
}

[b-ownldxs3si] .grid-header-cell-template .grid-header-actions > *,
[b-ownldxs3si] .grid-header-cell-template .grid-header-actions-spacer > * {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[b-ownldxs3si] .grid-header-cell-template .grid-header-actions-spacer > :is(.column-filters, .column-filters-active) {
    min-height: calc(24px / var(--amx-ui-scale, 1));
    min-width: calc(24px / var(--amx-ui-scale, 1));
}

[b-ownldxs3si] .grid-header-cell-template .grid-header-actions-spacer [data-text]::before {
    content: attr(data-text);
}

[b-ownldxs3si] .grid-header-cell-template .sort-indicator {
    flex-shrink: 0;
    font-size: 0.85em;
}

[b-ownldxs3si] .grid-cell {
    height: auto;
    /* The outer .grid-row sets the virtualiser's fixed height; this keeps cell hit areas generous. */
    min-height: calc(40px * var(--amx-grid-zoom, 1));
    padding: calc(0.25rem * var(--amx-grid-zoom, 1)) calc(0.5rem * var(--amx-grid-zoom, 1));
    font-size: calc(var(--amx-control-font-size, 0.875rem) * var(--amx-grid-zoom, 1));
    color: var(--text-primary, #374151);
    /* Inherited, not transparent: see .grid-row. A cell with a colour band of its own sets it
       inline and still wins - and takes its row states from the veil above instead. */
    background-color: inherit;
    font-weight: normal;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    line-height: 1.4;
}

[b-ownldxs3si] .grid-cell .grid-asset-link {
    display: inline-flex;
    align-items: center;
    min-width: calc(24px / var(--amx-ui-scale, 1));
    min-height: calc(24px / var(--amx-ui-scale, 1));
    max-width: 100%;
    /* Keep the cell's contrast-safe ink, including configured report colour bands. */
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .15em;
}

[b-ownldxs3si] .grid-asset-link-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-ownldxs3si] .grid-asset-link:hover {
    text-decoration-thickness: 2px;
}

[b-ownldxs3si] .grid-asset-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

[b-ownldxs3si] .grid-cell:not(:first-child) {
    border-left: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
}

[b-ownldxs3si] .grid-cell.checkbox-cell {
    display: block;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

[b-ownldxs3si] .grid-cell .photo-cell-container {
    display: block;
    height: calc(100px * var(--amx-grid-zoom, 1));
    max-height: calc(70px * var(--amx-grid-zoom, 1));
    min-height: calc(54px * var(--amx-grid-zoom, 1));
    width: stretch;
    overflow: hidden;
}

[b-ownldxs3si] .grid-cell .text-span {
    /* Keep the first two lines inside the fixed row instead of centring a taller block and
       clipping both its top and bottom. The full value is available from the cell tooltip. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: 2.8em;
    width: 100%;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: inherit;
}

[b-ownldxs3si] .grid-cell .text-span:focus-visible {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: -2px;
}

.data-grid-container.compact:not(.has-photo-column)[b-ownldxs3si]  .grid-cell .text-span {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    max-height: 1.4em;
}

[b-ownldxs3si] .grid-header-cell-template .column-filters {
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    color: inherit;
    transition: all 0.2s ease;
    padding: 4px 6px;
    border-radius: 4px;
    appearance: none;
    background: none;
    border: 0;
    font: inherit;
    line-height: 1;
}

[b-ownldxs3si] .grid-header-cell-template .column-filters:hover {
    background-color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

[b-ownldxs3si] .grid-header-cell-template .column-filters-active {
    flex-shrink: 0;
    position: relative;
    color: var(--text-on-bright) !important;
    background-color: #f59e0b !important;
    padding: 4px 6px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    appearance: none;
    border: 0;
    font-size: inherit;
    font-family: inherit;
    line-height: 1;
}

/* Inline beside the funnel, not a badge pinned outside it: the button now sits in the
   bottom-right corner of a header cell that clips its overflow, so anything hanging off the
   button's edge gets cut. It was also positioned against the whole header cell, so it drifted
   as the header grew taller. */
/* The funnel and its label take `font: inherit` from the header cell, so they zoom with it; the
   count is the one size in the header that has to be told separately. */
[b-ownldxs3si] .grid-header-cell-template .column-filters-active .column-filter-count-text {
    margin-left: 3px;
    font-size: calc(10px * var(--amx-grid-zoom, 1));
    font-weight: 700;
    line-height: 1;
}

[b-ownldxs3si] .grid-header-cell-template .column-filters-active:hover {
    background-color: #d97706 !important;
}


.selection-stats-wrapper[b-ownldxs3si] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--text-secondary, #475569);
}

.selection-stats-wrapper .selection-stat-pill[b-ownldxs3si] {
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid rgba(var(--accent-primary-rgb), 0.25);
    color: var(--text-primary);
    background: var(--accent-wash);
}

/* Shared flat utility groups: no nested surface, consistent targets and an explicit active fill. */
.toolbar-btn-group[b-ownldxs3si] {
    display: flex;
    align-items: center;
    /* Group by spacing rather than nesting another bordered surface inside the toolbar. */
    height: 36px;
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 0;
    gap: 2px;
}

/* CustomToolbarComponent brings its own layout - "d-flex w-100 h-100 gap-2" - and inside this
   track that layout is wrong twice over. gap-2 is 0.5rem, so its buttons sat 8px apart in a track
   whose own gap is 2px; and w-100 made the wrapper claim the full width of the track, so its
   buttons packed to the left of a box wider than they are and left the slack as an extra gap in
   front of the search box and the export button. Three different gaps in one track, none of them
   deliberate.

   In here the wrapper is a pass-through, not a container: it takes the track's gap and sizes to
   its buttons, so every gap in the track is the same 2px. overflow is returned to visible because
   the wrapper no longer has a width to scroll inside, and an auto one would clip focus rings.
   !important throughout because Bootstrap's utilities are. */
.toolbar-btn-group[b-ownldxs3si]  .custom-toolbar-items {
    gap: 2px !important;
    width: auto !important;
    overflow: visible !important;
}

/* Every flat button in the track - export and the search/filter buttons - is one button drawn
   in one place.

   It used to be two identical blocks with "change one, change the other" on top, because export
   is this component's own markup and the search/filter buttons come from
   CustomToolbarComponent and need ::deep. They can share a selector list after all: Blazor
   scopes each selector in the list separately, so the ::deep one still compiles correctly. The
   comment was the only thing keeping them together, and comments do not hold. */
.grid-actions-btn[b-ownldxs3si],
.toolbar-btn-group[b-ownldxs3si]  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    min-height: 36px;
    padding: 0 10px;
    min-width: 36px;
    /* !important because Bootstrap's spacing utilities (.me-2 and friends) are !important, and a
       toolbar item is free to arrive carrying one. */
    margin: 0 !important;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    /* Body ink, not secondary: the track's labels read as controls rather than hints. */
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
    filter: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* One hover, and the same on press, for all of them.

   :active as well as :hover because the search/filter buttons carry app.css's .dbd-* classes,
   which paint a fill of their own while the pointer is down (green for dbd-success, blue for
   dbd-primary) - so without this, clicking a button in this track flashes a colour the two
   buttons beside it never show.

   filter: none defeats `.dbd-btn:hover:not(:disabled) { filter: brightness(.97) }` in app.css -
   same reason: the toolbar's buttons carry .dbd-btn and would dim on hover while export did not. */
.grid-actions-btn:hover[b-ownldxs3si],
.grid-actions-btn:active[b-ownldxs3si],
.toolbar-btn-group[b-ownldxs3si]  .btn:hover,
.toolbar-btn-group[b-ownldxs3si]  .btn:active {
    background-color: var(--bg-hover);
    color: var(--text-primary, #475569);
    filter: none;
}

.grid-actions-btn:focus-visible[b-ownldxs3si],
.toolbar-btn-group[b-ownldxs3si]  .btn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: -1px;
}

/* Announces the size to a screen reader when it changes - the grid redrawing says nothing, and
   the button that changed it may have just been disabled and lost focus. Off-screen rather than
   `display: none`, which would take it out of the accessibility tree with everything else. */
.grid-zoom-live[b-ownldxs3si] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The button of an open menu (Export, View) is held in its active state while the menu is up -
   the report toolbar's open fill, in the green accent's text ink - because focus moves into the
   panel and nothing else on screen would say where it came from. As specific as the dark-theme
   hover below, so hovering an open button does not drop it. aria-expanded must be written as
   "true"/"false": Blazor renders a bare true bool as an empty attribute, which this never matches. */
.grid-actions-btn[aria-expanded="true"][b-ownldxs3si],
[data-theme] .grid-actions-btn[aria-expanded="true"]:is(:hover, :active)[b-ownldxs3si] {
    background-color: var(--bg-hover);
    color: var(--accent-success-text);
    box-shadow: inset 0 0 0 1px var(--border-interactive);
}

/* ===== VIEW MENU =====
   How the grid is drawn, behind one button (DataGrid.ViewMenu.cs): the grid's own copy of the
   report toolbar's View button and menu, with the same parts inside (app.css, VIEW OPTIONS).
   The button is a .grid-actions-btn, drawn as Search, Filter and Export are; open, it holds the
   same active state as the export button (.grid-actions-btn[aria-expanded="true"]). Not shrunk: the row scrolls. */
.grid-view-btn[b-ownldxs3si] {
    flex: 0 0 auto;
}

/* Fixed and placed by AmxAnchorDropdown, which right-aligns it to the button by arithmetic - so a
   fixed width, as the export menu has - and caps its height to the room left, so it scrolls. Over
   .grid-context-backdrop, which closes it on any outside click. */
.grid-view-menu[b-ownldxs3si] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1081;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: min(292px, calc(100vw - 16px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 4px 8px;
    text-align: left;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* Focused as it opens so Escape works at once; a landing point, not a control. */
.grid-view-menu:focus[b-ownldxs3si] {
    outline: none;
}

/* An active filter is the same "this one is on" state, kept amber because it is a warning that
   the grid is not showing everything.

   .dbd-warning as well as .btn-warning: the grid's own filter button is styled
   "btn dbd-btn dbd-warning" (AmxGrid, AmxInlineGridEditor), which this rule never matched - so
   the flat-ghost rule above won and a filtered grid's filter button looked exactly like an
   unfiltered one. The amber was there all along; nothing was wearing it. */
.toolbar-btn-group[b-ownldxs3si]  .btn-warning,
.toolbar-btn-group[b-ownldxs3si]  .dbd-warning {
    background-color: var(--bg-card, #ffffff);
    color: var(--accent-warning-text);
    box-shadow: var(--shadow-sm);
}

/* Hover must not take the amber back off - a filter is still on while you are pointing at the
   button that opens it. Same weight as the generic hover above, so it has to come after it. */
.toolbar-btn-group[b-ownldxs3si]  .btn-warning:hover,
.toolbar-btn-group[b-ownldxs3si]  .dbd-warning:hover {
    background-color: rgba(245, 158, 11, 0.2);
    color: var(--accent-warning-text);
    box-shadow: var(--shadow-sm);
    filter: none;
}

/* Inline search uses the same height and radius as the adjacent utility buttons. */
.toolbar-btn-group[b-ownldxs3si]  .search-box {
    height: 36px;
    padding: 0 3px 0 12px;
    border-radius: var(--radius-sm);
    border-color: var(--border-interactive);
    box-shadow: none;
}

.toolbar-btn-group[b-ownldxs3si]  .search-input {
    padding: 0 4px;
}

.toolbar-btn-group[b-ownldxs3si]  .search-submit-btn {
    width: 28px;
    height: 28px;
    border-radius: calc(var(--radius-sm) - 2px);
}

.toolbar-btn-group[b-ownldxs3si]  .search-clear-btn {
    height: 28px;
    padding: 0 8px;
}

/* Clear Search: only present while a search is active, so it has to read as the exception among
   the flat ghost buttons in this group - a soft amber wash with an amber border and label.

   Geometry is identical in every state: same padding, same 1px border, no transform, and the
   transition names only colour properties rather than "all". An earlier version varied the
   border width between rest and hover, which made the button visibly jump.

   Lives here, not in AmxGrid: ".toolbar-btn-group ::deep .btn" above strips border and colour at
   (0,3,0), which a rule scoped to AmxGrid (0,2,0) cannot reach.

   --accent-warning-text, not --accent-warning: the latter is the vivid fill (#f59e0b) and manages
   only 2.15:1 on the light card. The -text token holds 5.4:1 rest / 5.1:1 hover in light and
   6.9:1 / 5.8:1 in dark, over the amber wash below. */
.toolbar-btn-group[b-ownldxs3si]  .grid-clear-search-btn {
    box-sizing: border-box;
    /* Amber wash, matching the .amx-pill.amber treatment in app.css. Translucent so it works
       over both the light and dark card without a second rule. */
    background-color: rgba(245, 158, 11, 0.12);
    border: 1px solid var(--accent-warning-text);
    color: var(--accent-warning-text);
    font-weight: 600;
    box-shadow: none;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.toolbar-btn-group[b-ownldxs3si]  .grid-clear-search-btn:hover {
    /* Deepen the wash only - width, padding and border stay put so nothing shifts. */
    background-color: rgba(245, 158, 11, 0.2);
    color: var(--accent-warning-text);
    box-shadow: var(--shadow-sm);
    /* .dbd-btn:hover:not(:disabled) dims every button; this one carries its own hover. */
    filter: none;
}

.toolbar-btn-group[b-ownldxs3si]  .grid-clear-search-btn:active {
    background-color: rgba(245, 158, 11, 0.28);
}

.toolbar-btn-group[b-ownldxs3si]  .grid-clear-search-btn:focus-visible {
    outline: 2px solid var(--accent-warning-text);
    outline-offset: 2px;
}

/* Left toolbar items: compact, clean styling (keeps existing button colours) */
.main-toolbar-items[b-ownldxs3si] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.main-toolbar-items[b-ownldxs3si]  .btn {
    padding: 0.6rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
    border-radius: var(--radius-sm);
    box-shadow: none;
    gap: 0.3rem;
}

.main-toolbar-items[b-ownldxs3si]  .btn:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
}

.main-toolbar-items[b-ownldxs3si]  .btn i {
    font-size: 0.8rem;
}

/* Improved Card Layout */
.card-grid[b-ownldxs3si] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    padding: 20px;
    align-items: start;
}

/* As .list-item: off-screen cards are skipped until they come near (a collapsed card is about
   200px). No lift on hover - the card moving out from under the pointer made it flicker between
   hovered and not at its lower edge. */
.card-item[b-ownldxs3si] {
    background-color: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
}

    .card-item:hover[b-ownldxs3si] {
        border-color: var(--accent-primary, #cbd5e1);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    /* Cards are focusable (Enter activates them), so they need a visible focus indicator. */
    .card-item:focus-visible[b-ownldxs3si] {
        outline: 2px solid var(--border-focus, var(--accent-primary));
        outline-offset: 2px;
        border-color: var(--accent-primary, #cbd5e1);
    }

    .card-item.expanded[b-ownldxs3si] {
        border-color: #3b82f6;
        box-shadow: 0 4px 12px -1px rgba(59, 130, 246, 0.15);
    }

/* Clean card header */
.datagrid-card-header[b-ownldxs3si] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 12px 20px;
    gap: 12px;
    min-height: 20px;
    background-color: var(--bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--border-color, #f1f5f9);
}

.card-checkbox[b-ownldxs3si] {
    flex-shrink: 0;
}

.distance-badge[b-ownldxs3si] {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

    .distance-badge i[b-ownldxs3si] {
        font-size: 10px;
    }


/* Card content area */
/* .card-content/.list-content are <dl> and .field-label/.field-value are <dt>/<dd>, so the UA
   defaults (dl margin, dd margin-inline-start: 40px) have to be cleared — the div-based markup
   never carried them. */
.card-content[b-ownldxs3si] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}

.card-content > .card-field > .field-label[b-ownldxs3si],
.card-content > .card-field > .field-value[b-ownldxs3si],
.list-content > .list-field > .field-label[b-ownldxs3si],
.list-content > .list-field > .field-value[b-ownldxs3si] {
    margin: 0;
    margin-inline-start: 0;
}

.card-field[b-ownldxs3si] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-ownldxs3si] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.field-value[b-ownldxs3si] {
    font-size: 15px;
    color: var(--text-primary, #1e293b);
    line-height: 1.4;
    word-break: break-word;
    font-weight: 500;
}


/* Photo styling */
.card-photo-wrapper[b-ownldxs3si] {
    max-width: 100%;
    max-height: 200px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    background-color: var(--bg-input, #f8fafc);
}

.card-photo-wrapper.card-header-photo[b-ownldxs3si] {
    max-width: 50px !important;
}

    .card-photo-wrapper[b-ownldxs3si]  img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }

/* Empty and error states */
.empty-state[b-ownldxs3si],
.error-state[b-ownldxs3si] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 24px 20px;
    text-align: center;
    color: #64748b;
    height: 100%;
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

.error-icon[b-ownldxs3si] {
    font-size: 26px;
    margin-bottom: 12px;
    color: #ef4444;
}

.empty-text[b-ownldxs3si],
.error-text[b-ownldxs3si] {
    font-size: 15px;
    font-weight: 600;
    color: #334155;
    letter-spacing: 0.1px;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .data-grid-header[b-ownldxs3si] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 12px;
    }

    .header-controls[b-ownldxs3si] {
        flex-wrap: wrap;
    }

    .card-grid[b-ownldxs3si] {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 16px;
    }

    .datagrid-card-header[b-ownldxs3si] {
        padding: 12px 16px 8px 16px;
    }

    .card-content[b-ownldxs3si] {
        padding: 16px;
    }

}

/* No entrance animation on .card-content: it ran as each card was created - every card on the
   page at once when the view opened, and every new batch as it arrived - and never on expanding,
   which keeps the same element. */

.datagrid-card-title[b-ownldxs3si] {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-header-right[b-ownldxs3si] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-expand-btn[b-ownldxs3si] {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #94a3b8;
    font-size: 14px;
    transition: color 0.15s ease, background-color 0.15s ease;
    border-radius: 4px;
}

    .card-expand-btn:hover[b-ownldxs3si] {
        color: #475569;
        background-color: #f1f5f9;
    }

    .card-expand-btn.expanded[b-ownldxs3si] {
        color: #3b82f6;
    }


/* sizes & layout */
.checkbox-column[b-ownldxs3si], .checkbox-cell[b-ownldxs3si] {
    width: 48px;
    text-align: center;
}

.checkbox-cell .datagrid-checkbox-wrapper[b-ownldxs3si] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    cursor: pointer;
}

.checkbox-cell .datagrid-checkbox-wrapper input[type="checkbox"][b-ownldxs3si] {
    width: 18px;
    height: 18px;
    /* color that matches your theme; supported widely now */
    accent-color: var(--primary, #0a84ff);
    margin: 0;
}

/* Select-all lives in the header row rather than a .checkbox-cell, so none of the rules above
   reach it - it was falling through to the UA default (~13px) and so rendered smaller than the
   row boxes it controls. Sized above them deliberately: it is the one control in this column
   that acts on every row at once.

   22px + 4px padding each side = 30px, which clears the 34px content box the 50px track from
   GridTemplateColumns leaves after .grid-header-cell's 8px side padding. */
.checkbox-column .datagrid-checkbox-wrapper[b-ownldxs3si] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    cursor: pointer;
}

.checkbox-column .datagrid-checkbox-wrapper input[type="checkbox"][b-ownldxs3si] {
    width: 22px;
    height: 22px;
    accent-color: var(--primary, #0a84ff);
    margin: 0;
}

    /* clear focus for keyboard users */
    .datagrid-checkbox-wrapper:has(input:focus-visible)[b-ownldxs3si] {
        outline: 2px solid var(--primary, #0a84ff);
        outline-offset: 2px;
        border-radius: 6px;
    }

/* avoid icons stealing taps/clicks */
.card-checkbox i[b-ownldxs3si], .list-checkbox i[b-ownldxs3si] {
    pointer-events: none;
}

/* ========== DARK MODE STYLES ========== */
[data-theme="dark"] .data-grid-container[b-ownldxs3si] {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .data-grid-header[b-ownldxs3si] {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .report-title[b-ownldxs3si] {
    color: var(--text-primary);
}


[data-theme="dark"] .data-grid-content[b-ownldxs3si] {
    background-color: var(--bg-card);
}

[data-theme="dark"] .table-container[b-ownldxs3si] {
    background-color: var(--bg-card);
}

/* The header band uses --bg-tertiary, not --bg-secondary: in the dark ramp secondary sits
   BELOW card (#0f1524 < #111726), so mapping the old #1a1a2e onto it left the band at 1.02:1
   against the rows - invisible. Tertiary is the step *up* from card in both themes. */
[data-theme="dark"] .grid-header-row[b-ownldxs3si] {
    background-color: var(--bg-tertiary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .grid-header-cell[b-ownldxs3si] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* No background-color: the shared .grid-row rule already sets var(--bg-card), which is
   theme-aware, so restating it here only added a later rule of equal weight to the banding and
   hover rules above - which then lost on source order, taking the dark banding with them. */
[data-theme="dark"] .grid-row[b-ownldxs3si] {
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* No dark override for the band or its hover any more: --grid-row-band carries the per-theme
   colour and the rules above mix from it. */

/* No background-color here any more. It was --bg-hover, which in dark is #1a2338 against the even
   band's #1a2136 - a step of 1.02:1, which is nothing - and being !important it also replaced the
   band before the veil could lift it, so both row colours collapsed to the same flat hover. The
   shared veil rule above now carries hover in both themes; this keeps only the text colour. */
[data-theme="dark"] .grid-row:hover[b-ownldxs3si] {
    color: var(--text-primary) !important;
}

/* Dark needs a stronger selection tint, still mixed over each row's original band. */
[data-theme="dark"] .grid-row.row-selected[b-ownldxs3si] {
    background-color: color-mix(in srgb, var(--accent-primary) 22%, var(--grid-row-surface));
}

/* The blanket hover rule above is !important and would otherwise repaint a selected row with the
   plain hover colour, so in dark a selected row went back to looking unselected the moment you
   pointed at it. Same idea as light: the selection tint, deepened. !important and heavier,
   because that is what it takes to get past that rule. */
[data-theme="dark"] .grid-row.row-selected:hover[b-ownldxs3si],
[data-theme="dark"] .grid-row.row-selected:focus-visible[b-ownldxs3si] {
    background-color: color-mix(in srgb, var(--accent-primary) 32%, var(--grid-row-surface)) !important;
}

/* The cells no longer need their own hover colour here - .grid-cell inherits whatever the row
   is showing, in every theme and for every state (hover, selected, the even-row band above),
   not just this one. */
[data-theme="dark"] .grid-row:hover .grid-cell[b-ownldxs3si] {
    color: var(--text-primary) !important;
}

[data-theme="dark"][b-ownldxs3si]  .grid-cell {
    color: var(--text-primary);
    border-bottom-color: color-mix(in srgb, var(--border-color) 55%, transparent);
}

[data-theme="dark"][b-ownldxs3si]  .grid-cell:not(:first-child) {
    border-left-color: color-mix(in srgb, var(--border-color) 55%, transparent);
}

[data-theme="dark"] .grid-header-cell[b-ownldxs3si] {
    border-color: color-mix(in srgb, currentColor 12%, transparent);
}

/* Card view dark mode */
[data-theme="dark"] .card-grid[b-ownldxs3si] {
    background-color: var(--bg-secondary);
}


[data-theme="dark"] .datagrid-card-header[b-ownldxs3si] {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .datagrid-card-title[b-ownldxs3si] {
    color: var(--text-primary);
}

[data-theme="dark"] .card-content[b-ownldxs3si] {
    background-color: var(--bg-card);
    color: var(--text-primary);
}


[data-theme="dark"] .card-expand-btn[b-ownldxs3si] {
    color: #9ca3af;
}

[data-theme="dark"] .card-expand-btn:hover[b-ownldxs3si] {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}

[data-theme="dark"] .card-expand-btn.expanded[b-ownldxs3si] {
    color: #4d94ff;
}

/* List view dark mode */
[data-theme="dark"] .list-container[b-ownldxs3si] {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .list-item[b-ownldxs3si] {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .list-item:hover[b-ownldxs3si] {
    background-color: var(--bg-hover);
}


/* Empty and error states dark mode */
[data-theme="dark"] .empty-state[b-ownldxs3si],
[data-theme="dark"] .error-state[b-ownldxs3si] {
    color: #9ca3af;
}

[data-theme="dark"] .empty-icon[b-ownldxs3si],
[data-theme="dark"] .error-icon[b-ownldxs3si] {
    color: #6b7280;
}

[data-theme="dark"] .empty-text[b-ownldxs3si],
[data-theme="dark"] .error-text[b-ownldxs3si] {
    color: #e2e8f0;
}

[data-theme="dark"] .empty-subtext[b-ownldxs3si] {
    color: var(--text-muted);
}

/* Keep utility groups transparent in both themes. */
[data-theme="dark"] .toolbar-btn-group[b-ownldxs3si] {
    background-color: transparent;
}

/* Match the specificity of app.css's dark dbd-* hover rules so utility buttons stay neutral. */
[data-theme="dark"] .grid-actions-btn:hover[b-ownldxs3si],
[data-theme="dark"] .grid-actions-btn:active[b-ownldxs3si],
[data-theme="dark"] .toolbar-btn-group[b-ownldxs3si]  .btn:hover,
[data-theme="dark"] .toolbar-btn-group[b-ownldxs3si]  .btn:active {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    filter: none;
}

/* Configure Report stands out in green, as the report page's own Configure Report button
   (ReportTabsComponent's .toolbar-btn.primary). After the neutral hovers above, and as specific
   as their dark-theme forms, so neither theme greys it out on hover. */
.grid-actions-btn.grid-configure-btn[b-ownldxs3si],
[data-theme] .grid-actions-btn.grid-configure-btn[b-ownldxs3si] {
    background-color: var(--accent-success-fill);
    color: var(--text-on-dark);
    font-weight: 600;
}

.grid-actions-btn.grid-configure-btn:hover[b-ownldxs3si],
.grid-actions-btn.grid-configure-btn:active[b-ownldxs3si],
[data-theme] .grid-actions-btn.grid-configure-btn:hover[b-ownldxs3si],
[data-theme] .grid-actions-btn.grid-configure-btn:active[b-ownldxs3si] {
    background-color: color-mix(in srgb, var(--accent-success-fill) 88%, black);
    color: var(--text-on-dark);
}

.grid-actions-btn.grid-configure-btn:focus-visible[b-ownldxs3si] {
    outline-offset: 2px;
}

[data-theme="dark"] .toolbar-btn-group[b-ownldxs3si]  .btn-warning,
[data-theme="dark"] .toolbar-btn-group[b-ownldxs3si]  .btn-warning:hover,
[data-theme="dark"] .toolbar-btn-group[b-ownldxs3si]  .dbd-warning,
[data-theme="dark"] .toolbar-btn-group[b-ownldxs3si]  .dbd-warning:hover {
    background-color: rgba(245, 158, 11, 0.14);
    border-color: transparent;
    color: var(--accent-warning-text);
    box-shadow: none;
    filter: none;
}

/* Clear Search keeps its own amber on dark as well. The dark hover further up is five units and
   would otherwise strip it back to the plain track hover - which is exactly the "one button in
   this group behaves differently" problem, in the other direction. */
[data-theme="dark"] .toolbar-btn-group[b-ownldxs3si]  .grid-clear-search-btn:hover {
    background-color: rgba(245, 158, 11, 0.2);
    color: var(--accent-warning-text);
    box-shadow: var(--shadow-sm);
    filter: none;
}

[data-theme="dark"] .toolbar-btn-group[b-ownldxs3si]  .grid-clear-search-btn:active {
    background-color: rgba(245, 158, 11, 0.28);
    color: var(--accent-warning-text);
    filter: none;
}

/* Photo wrapper dark mode */
[data-theme="dark"] .card-photo-wrapper[b-ownldxs3si] {
    background-color: var(--bg-hover);
    border-color: var(--border-color);
}

/* Checkbox styling dark mode */
[data-theme="dark"] .datagrid-checkbox-wrapper input[type="checkbox"][b-ownldxs3si] {
    accent-color: #4d94ff;
}

/* Column filter icons dark mode */
[data-theme="dark"][b-ownldxs3si]  .grid-header-cell-template .column-filters {
    color: inherit;
}

[data-theme="dark"][b-ownldxs3si]  .grid-header-cell-template .column-filters:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"][b-ownldxs3si]  .grid-header-cell-template .column-filters-active {
    color: #000000 !important;
    background-color: #f59e0b !important;
}

[data-theme="dark"] .report-total-count[b-ownldxs3si] {
    color: var(--text-primary);
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .selection-stats-wrapper .selection-stat-pill[b-ownldxs3si] {
    color: var(--text-primary);
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"][b-ownldxs3si]  .grid-header-cell-template .column-filters-active:hover {
    background-color: #d97706 !important;
}

/* ========== END DARK MODE STYLES ========== */

/* ===== ROW CONTEXT MENU =====
   Opt-in per grid (EnableRowContextMenu). Positioned at the cursor by AmxPositionAtPoint, which
   clamps it into the viewport - the fixed top/left here is only the pre-clamp starting point. */

.grid-context-backdrop[b-ownldxs3si] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: transparent;
}

.grid-context-menu[b-ownldxs3si] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1081;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    /* Wide enough for "Filter by this value" to name a typical value, never wider than the screen. */
    max-width: min(320px, calc(100vw - 16px));
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* Focused programmatically on open so the arrow keys work straight away; that focus is a landing
   point rather than a control, so it needs no ring of its own. */
.grid-context-menu:focus[b-ownldxs3si] {
    outline: none;
}

.grid-context-item[b-ownldxs3si] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    /* Past the 24x24 WCAG 2.2 target minimum. */
    min-height: 32px;
    padding: 8px 10px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.grid-context-item i[b-ownldxs3si] {
    width: 14px;
    text-align: center;
    color: var(--text-secondary);
}

.grid-context-label[b-ownldxs3si] {
    flex: 1;
    min-width: 0;
}

/* An item with a second line saying what it acts on - "Filter by this value" over the column and
   the value. The value can be anything a cell holds, so it is cut short here rather than allowed
   to widen the menu; the item's title has it in full. */
.grid-context-label-stacked[b-ownldxs3si] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.grid-context-detail[b-ownldxs3si] {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.grid-context-item:hover[b-ownldxs3si] {
    background: var(--bg-hover);
}

.grid-context-item:focus-visible[b-ownldxs3si] {
    background: var(--bg-hover);
    outline: none;
    box-shadow: inset 0 0 0 2px var(--accent-primary);
}

.grid-context-sep[b-ownldxs3si] {
    height: 1px;
    margin: 4px 0;
    background: var(--border-color);
}

/* ===== EXPORT MENU =====
   Opt-in per grid (AllowExport). The trigger sits in the search/filter track and is shaped by the
   .grid-actions-btn rule above, which that track's buttons share. The panel reuses .grid-context-menu, so
   the two menus this grid can open are one thing. */

/* A fixed width, not a min-width. The panel is right-aligned to its button by arithmetic -
   left = button's right edge - the panel's width - so the width has to be a known quantity before
   the panel is measured. Left to shrink-wrap its content it is not: the icon webfont loads
   asynchronously, and a measurement taken while the four format glyphs are still their fallbacks
   comes back wider than the panel ends up, which puts it that much too far to the left.

   AmxAnchorDropdown also clamps the panel to the space below (or above) the trigger by setting a
   max-height, so the list has to be able to scroll inside it. */
.grid-actions-menu[b-ownldxs3si] {
    width: 260px;
    overflow-y: auto;
}

/* Disabled items are kept in place rather than hidden, so the menu is the same shape whether or not
   there is anything to export - and the note underneath says why they cannot be used. */
.grid-actions-menu .grid-context-item:disabled[b-ownldxs3si] {
    opacity: 0.5;
    cursor: default;
}

.grid-actions-menu .grid-context-item:disabled:hover[b-ownldxs3si] {
    background: transparent;
}

.grid-actions-note[b-ownldxs3si] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 2px 10px 4px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.35;
}

/* The caveat reads at full strength - it is the part the user has to take in before they open the
   file. The icon repeats what the words already say, so it needs no colour of its own. */
.grid-actions-note-warn[b-ownldxs3si] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--text-primary);
}

.grid-actions-note-warn i[b-ownldxs3si] {
    margin-top: 2px;
    color: var(--text-secondary);
}
/* /Components/Grid/Editor/Components/InlineGridCheckBox.razor.rz.scp.css */
.form-check[b-0bryw2arx7] {
    align-items: center;
    display: flex;
    gap: 12px;
    width: 100%;
    height: 100%;
    overflow: auto;
    margin: 0 !important;
    padding: 8px 0;
}

/* Drawn rather than left to the browser. A native checkbox is painted in the browser's own light
   palette whatever theme the app is in, so on a dark form it appeared as a pale widget; and its
   disabled state washes out so far that a reader cannot tell a ticked box from an empty one - which
   matters here, because in view mode the value is the whole point of the control. */
.form-check input[type="checkbox"][b-0bryw2arx7] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    display: inline-grid;
    place-content: center;
    width: 20px;
    height: 20px;
    margin: 0 !important;
    padding: 0;
    background-color: var(--bg-input, #ffffff);
    border: 1.5px solid var(--border-interactive, #767d8c);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.form-check input[type="checkbox"][b-0bryw2arx7]::before {
    content: "";
    width: 12px;
    height: 12px;
    background-color: var(--text-on-accent, #ffffff);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transition: transform 110ms ease;
}

.form-check input[type="checkbox"]:checked[b-0bryw2arx7] {
    background-color: var(--accent-primary, #2563eb);
    border-color: var(--accent-primary, #2563eb);
}

.form-check input[type="checkbox"]:checked[b-0bryw2arx7]::before {
    transform: scale(1);
}

.form-check input[type="checkbox"]:hover:not(:disabled)[b-0bryw2arx7] {
    border-color: var(--accent-primary, #2563eb);
}

.form-check input[type="checkbox"]:focus-visible[b-0bryw2arx7] {
    outline: 2px solid var(--accent-primary, #2563eb);
    outline-offset: 2px;
}

/* View mode and read-only fields. Full opacity deliberately: the affordances go, the value stays
   legible. An unticked box reads as an empty well, a ticked one keeps its fill. */
.form-check input[type="checkbox"]:disabled[b-0bryw2arx7] {
    opacity: 1;
    cursor: default;
    background-color: var(--bg-secondary, #eef1f8);
    border-color: var(--border-color, #e4e8f1);
}

.form-check input[type="checkbox"]:disabled:checked[b-0bryw2arx7] {
    background-color: var(--accent-primary, #2563eb);
    border-color: var(--accent-primary, #2563eb);
    /* Just enough off the editable version to read as "not yours to change". */
    filter: saturate(0.8);
}

/* Read-only cell in an editable grid. The rule above is tuned for view mode, where every control is
   disabled and there is nothing to compare against; here the box sits next to editable ones, and a
   faintly desaturated tick is not a difference anyone notices. So the interactive look goes
   entirely: a dashed hairline instead of a solid well, and the tick drawn in muted ink rather than
   filled with the accent. The shape carries the meaning, not just the colour (WCAG 1.4.1), and the
   value stays perfectly legible either way. */
.form-check input[type="checkbox"].is-readonly[b-0bryw2arx7],
.form-check input[type="checkbox"].is-readonly:checked[b-0bryw2arx7] {
    background-color: var(--bg-secondary, #eef1f8);
    /* --border-interactive, not the faint hairline: on a grey fill a hairline dash is invisible and
       the "locked" signal is lost. The dash pattern carries the meaning; the weight stays level with
       the editable box so a read-only value is still easy to read. */
    border: 1.5px dashed var(--border-interactive, #767d8c);
    cursor: not-allowed;
    filter: none;
}

.form-check input[type="checkbox"].is-readonly[b-0bryw2arx7]::before {
    background-color: var(--text-secondary, #5b6577);
}

.form-check-label[b-0bryw2arx7] {
    opacity: 1 !important;
    margin: 0 !important;
    font-size: 0.875rem;
    color: var(--text-primary, #0f172a);
    font-weight: 400;
    line-height: 1.5;
}

label:not(.form-check-label)[b-0bryw2arx7] {
    min-width: 10%;
    width: 100%;
    max-width: 25%;
    text-overflow: ellipsis;
    overflow: auto;
}

@media (prefers-reduced-motion: reduce) {
    .form-check input[type="checkbox"][b-0bryw2arx7],
    .form-check input[type="checkbox"][b-0bryw2arx7]::before {
        transition: none;
    }
}
/* /Components/Grid/Editor/Components/InlineGridLookupBrowser.razor.rz.scp.css */
/* The field itself is the shared .amx-field shell (wwwroot/css/amx-field.css), in its dense
   variant for grid cells. What remains here is the selection modal's own layout. */
ul[b-1bt5axqjgg] {
    list-style: none;
    margin: 0 !important;
}

.lookup-search-btn[b-1bt5axqjgg] {
    height: 44px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    color: white !important;
    border: 1px solid var(--border-color, #d1d5db);
}

.clear-lookup-search-btn[b-1bt5axqjgg] {
    height: 44px;
    border: 1px solid var(--border-color, #d1d5db);
}

.section-dialog-content-container[b-1bt5axqjgg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lookup-browser-selection-wrapper[b-1bt5axqjgg] {
    border: 1px solid var(--border-color, #e4e8f1);
    border-radius: 10px;
    padding: 5px;
    background-color: var(--bg-card, #ffffff);
}
/* /Components/Grid/Editor/Components/InlineGridNumber.razor.rz.scp.css */
/* The field itself is the shared .amx-field shell (wwwroot/css/amx-field.css), in its dense
   variant for grid cells - including the currency symbol, which is now an .amx-field-affix
   inside the shell rather than a bordered block bolted to its left. */
ul[b-h8s6g5geby] {
    list-style: none;
    margin: 0 !important;
}
/* /Components/Grid/Editor/Components/InlineGridTextBox.razor.rz.scp.css */
/* The field itself is the shared .amx-field shell (wwwroot/css/amx-field.css), in its dense
   variant for grid cells. The per-component copy of the input rules is gone - it carried
   hard-coded greys, a blue focus ring and a hover lift that none of the other controls had. */
ul[b-bh1a2dm2ai] {
    list-style: none;
    margin: 0 !important;
}

/* A rich text field shown flattened to its text: read-only here, edited on the form itself.
   Kept to one line with an ellipsis so a long document does not stretch the row - the full text
   is on the element's title. */
.inline-grid-rich-text[b-bh1a2dm2ai] {
    display: block;
    width: 100%;
    padding: 12px 16px;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Grid/Editor/InlineGridEditor.razor.rz.scp.css */
/* Empty state - same shape and styling as DataGrid's, so an inline grid and a normal grid
   read identically when they have nothing to show. */
.grid-empty-row[b-vc8a80nbky] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.empty-state[b-vc8a80nbky] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 24px 20px;
    text-align: center;
    color: #64748b;
    height: 100%;
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

.empty-icon[b-vc8a80nbky] {
    font-size: 14px;
    color: #94a3b8;
    margin: 0;
}

.empty-text[b-vc8a80nbky] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #334155;
    letter-spacing: 0.1px;
}

.empty-subtext[b-vc8a80nbky] {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
}

/* Empty state dark mode */
[data-theme="dark"] .empty-state[b-vc8a80nbky] {
    color: #9ca3af;
}

[data-theme="dark"] .empty-icon[b-vc8a80nbky] {
    color: #6b7280;
}

[data-theme="dark"] .empty-text[b-vc8a80nbky] {
    color: #e2e8f0;
}

[data-theme="dark"] .empty-subtext[b-vc8a80nbky] {
    color: var(--text-muted);
}
/* /Components/Grid/GanttChart.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────────────────────────────
   Gantt view of a report grid.

   Every size that depends on the timeline is a multiple of ONE custom property, --gantt-unit-w, set
   on .gantt-scroll from the model: the builder places a bar at "3.42 units" and this turns units
   into pixels, so the two never keep separate copies of a column width.

   Colour is the theme's, from tokens, in both themes. The only colours that are not are the
   report's own bar colours, which are data (DESIGN_LANGUAGE.md, "Configured colours") and arrive as
   --bar-bg / --bar-fg inline, already checked to be hex and given a text colour that reads on them.
   ───────────────────────────────────────────────────────────────────────────────────────────────── */

.gantt[b-relnrt1xe8] {
    --gantt-lane-h: 30px;
    --gantt-label-col-w: 11rem;
    --gantt-group-h: 24px;
    --gantt-unit-h: 26px;
    /* Default bar: the accessible link blue, with the card colour as its ink. Light: white on
       #1d4ed8. Dark: the card's near-black on #60a5fa. Both clear 4.5:1 - white on the dark blue
       would not, which is why the ink is a token and not a literal #fff. */
    --gantt-bar-bg: var(--accent-link);
    --gantt-bar-fg: var(--bg-card);

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    min-width: 0;
    min-height: 0;
    color: var(--text-primary);
    font-size: 0.8125rem;
}

/* ── Toolbar ──────────────────────────────────────────────────────────────────────────────────── */

.gantt-toolbar[b-relnrt1xe8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.gantt-toolbar-group[b-relnrt1xe8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* The segmented track: native radios, clipped rather than display:none so they stay in the tab
   order and keep their arrow keys, with the label drawn as the segment. */
.gantt-segmented[b-relnrt1xe8] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 36px;
    margin: 0;
    padding: 2px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--bg-secondary);
    min-width: 0;
}

[data-theme="dark"] .gantt-segmented[b-relnrt1xe8] {
    background-color: var(--bg-tertiary);
}

.gantt-segment-input[b-relnrt1xe8] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.gantt-segment-label[b-relnrt1xe8] {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 12px;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.gantt-segment-label:hover[b-relnrt1xe8] {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

.gantt-segment-input:checked + .gantt-segment-label[b-relnrt1xe8] {
    background-color: var(--bg-card);
    color: var(--accent-link);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .gantt-segment-input:checked + .gantt-segment-label[b-relnrt1xe8] {
    background-color: var(--accent-wash);
}

.gantt-segment-input:focus-visible + .gantt-segment-label[b-relnrt1xe8] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: -1px;
}

.gantt-btn[b-relnrt1xe8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.gantt-btn:hover:not(:disabled)[b-relnrt1xe8] {
    background-color: var(--bg-hover);
}

.gantt-btn:focus-visible[b-relnrt1xe8] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 1px;
}

.gantt-btn.is-open[b-relnrt1xe8] {
    background-color: var(--bg-hover);
    box-shadow: var(--shadow-sm);
}

.gantt-btn:disabled[b-relnrt1xe8] {
    opacity: 0.45;
    cursor: default;
}

.gantt-summary[b-relnrt1xe8] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

/* ── Options ──────────────────────────────────────────────────────────────────────────────────── */

.gantt-options[b-relnrt1xe8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .gantt-options[b-relnrt1xe8] {
    background-color: var(--bg-tertiary);
}

.gantt-option-fields[b-relnrt1xe8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.75rem;
}

.gantt-option[b-relnrt1xe8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* The same quiet caption the design language gives every field label. */
.gantt-option > label[b-relnrt1xe8] {
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.gantt-option > select[b-relnrt1xe8] {
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border-interactive);
    border-radius: 6px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.82rem;
    min-width: 0;
}

.gantt-option > select:focus-visible[b-relnrt1xe8] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 1px;
}

.gantt-option > select:disabled[b-relnrt1xe8] {
    opacity: 0.55;
}

.gantt-option-note[b-relnrt1xe8] {
    color: var(--text-secondary);
    font-size: 0.72rem;
}

.gantt-option-checks[b-relnrt1xe8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.gantt-check[b-relnrt1xe8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-height: 24px;
    color: var(--text-primary);
    cursor: pointer;
}

.gantt-check > input[b-relnrt1xe8] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent-link);
}

/* ── Key and notes ────────────────────────────────────────────────────────────────────────────── */

.gantt-key[b-relnrt1xe8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.gantt-key > li[b-relnrt1xe8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gantt-key-swatch[b-relnrt1xe8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 12px;
    border-radius: 3px;
    background-color: var(--bar-bg, var(--gantt-bar-bg));
    box-shadow: inset 0 0 0 1px var(--border-interactive);
    font-size: 0.55rem;
    color: var(--bar-fg, var(--gantt-bar-fg));
}

.gantt-key-swatch--complete[b-relnrt1xe8] {
    box-shadow: 0 0 0 2px var(--accent-success-text);
}

.gantt-key-swatch--milestone[b-relnrt1xe8] {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background-color: var(--text-primary);
    box-shadow: none;
    transform: rotate(45deg);
}

.gantt-key-swatch--today[b-relnrt1xe8] {
    width: 2px;
    height: 14px;
    border-radius: 0;
    background-color: var(--accent-danger);
    box-shadow: none;
}

.gantt-note[b-relnrt1xe8] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-sm);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.gantt-unavailable[b-relnrt1xe8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    color: var(--text-secondary);
}

/* ── The chart ────────────────────────────────────────────────────────────────────────────────── */

.gantt-scroll[b-relnrt1xe8] {
    flex: 1 1 auto;
    min-height: 14rem;
    max-height: 80vh;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--bg-card);
    /* Keeps the sticky label column from scrolling the page behind it on a trackpad flick. */
    overscroll-behavior: contain;
}

.gantt-scroll:focus-visible[b-relnrt1xe8] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: -2px;
}

.gantt-table[b-relnrt1xe8] {
    position: relative;
    /* Wide enough for its timeline, and no narrower than the box, so a short Gantt still fills it. */
    width: max-content;
    min-width: 100%;
}

/* A row is the label column(s) and one lane. The lane is exactly --gantt-units wide, so the bars
   inside it can be positioned in units without ever measuring anything. */
.gantt-row[b-relnrt1xe8] {
    display: grid;
    grid-template-columns:
        repeat(var(--gantt-label-cols, 1), var(--gantt-label-col-w))
        calc(var(--gantt-unit-w) * var(--gantt-units));
    min-height: calc(var(--gantt-lane-h) * var(--lanes, 1) + 8px);
    /* Rows off screen are skipped by the browser; a long report is one of these per record. */
    content-visibility: auto;
    contain-intrinsic-size: auto calc(var(--gantt-lane-h) + 8px);
}

.gantt-body .gantt-row:hover > .gantt-label[b-relnrt1xe8],
.gantt-body .gantt-row:hover > .gantt-lane[b-relnrt1xe8] {
    background-color: var(--bg-hover);
}

/* ── Header ───────────────────────────────────────────────────────────────────────────────────── */

.gantt-head[b-relnrt1xe8] {
    position: sticky;
    top: 0;
    z-index: 4;
}

.gantt-row--head[b-relnrt1xe8] {
    min-height: 0;
    content-visibility: visible;
}

.gantt-row--head > .gantt-label[b-relnrt1xe8],
.gantt-row--head > .gantt-lane[b-relnrt1xe8] {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .gantt-row--head > .gantt-label[b-relnrt1xe8],
[data-theme="dark"] .gantt-row--head > .gantt-lane[b-relnrt1xe8] {
    background-color: var(--bg-tertiary);
}

.gantt-row--head > .gantt-label[b-relnrt1xe8] {
    display: flex;
    align-items: center;
    font-weight: 600;
}

.gantt-lane--head[b-relnrt1xe8] {
    display: flex;
    flex-direction: column;
}



.gantt-groups[b-relnrt1xe8],
.gantt-units[b-relnrt1xe8] {
    display: flex;
}

.gantt-group[b-relnrt1xe8] {
    flex: 0 0 calc(var(--gantt-unit-w) * var(--span));
    box-sizing: border-box;
    height: var(--gantt-group-h);
    padding: 0 6px;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: var(--gantt-group-h);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    /* A group wider than the screen keeps its name in view while its columns scroll past. */
    position: relative;
}

.gantt-unit[b-relnrt1xe8] {
    flex: 0 0 var(--gantt-unit-w);
    box-sizing: border-box;
    height: var(--gantt-unit-h);
    border-right: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: var(--gantt-unit-h);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.gantt-unit.is-weekend[b-relnrt1xe8] {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .gantt-unit.is-weekend[b-relnrt1xe8] {
    background-color: var(--bg-card);
}

/* Today in the header: the wash AND weight, so it is not the colour alone that says so. */
.gantt-unit.is-today[b-relnrt1xe8] {
    background-color: var(--accent-wash);
    color: var(--text-primary);
    font-weight: 700;
}

/* ── Labels ───────────────────────────────────────────────────────────────────────────────────── */

/* The label columns stay put while the timeline scrolls under them. Opaque, or the bars show
   through as they slide past. */
.gantt-label[b-relnrt1xe8] {
    position: sticky;
    z-index: 3;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 8px;
    border-right: 1px solid var(--border-color);
    background-color: var(--bg-card);
}

.gantt-label--first[b-relnrt1xe8] {
    left: 0;
}

.gantt-label--second[b-relnrt1xe8] {
    left: var(--gantt-label-col-w);
}

.gantt-label-text[b-relnrt1xe8],
.gantt-row-link[b-relnrt1xe8] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The row's way in for the keyboard: a real button that looks like the text it is. */
.gantt-row-link[b-relnrt1xe8] {
    display: block;
    width: 100%;
    margin: 0;
    padding: 4px 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    /* !important for the same reason as the bar's ink: the dark theme paints every button's text. */
    color: var(--accent-link) !important;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.gantt-row-link:hover[b-relnrt1xe8] {
    text-decoration: underline;
}

.gantt-row-link:focus-visible[b-relnrt1xe8] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 1px;
}

.gantt-row--milestone .gantt-label-text[b-relnrt1xe8] {
    font-weight: 600;
}

/* ── Lane ─────────────────────────────────────────────────────────────────────────────────────── */

/* The rule under a row is an inset shadow rather than a border, so a child of the lane - the today
   line - can run the full height of the lane without a one-pixel break at every row. */
.gantt-body .gantt-label[b-relnrt1xe8],
.gantt-body .gantt-lane[b-relnrt1xe8] {
    box-shadow: inset 0 -1px 0 var(--border-color);
}

.gantt-row--head > .gantt-label[b-relnrt1xe8],
.gantt-row--head > .gantt-lane[b-relnrt1xe8] {
    box-shadow: inset 0 -1px 0 var(--border-color);
}

.gantt-lane[b-relnrt1xe8] {
    position: relative;
    box-sizing: border-box;
    background-color: var(--bg-card);
    /* Three background layers, in this order, all drawn as a background so that nothing sits in
       front of a bar or its text - a pseudo-element or an extra node would, and then a contrast
       checker (or anyone's tooling) cannot say what the bar's text sits on:

         1. today   - a 2px line at --gantt-today units. Transparent unless the chart has today.
         2. weekend - a 7-unit tile shaded for its first two units, shifted so the first shaded
                      unit is the first Saturday on the timeline. Transparent unless the day scale.
         3. hairline- a line at the right of every unit, repeated across the lane: one rule however
                      many columns there are.

       The two hard stops make each a line or a band rather than a gradient in the visual sense the
       design language rules out. */
    background-image:
        var(--gantt-today-layer, linear-gradient(transparent, transparent)),
        var(--gantt-weekend-layer, linear-gradient(transparent, transparent)),
        linear-gradient(to right, transparent calc(var(--gantt-unit-w) - 1px), var(--border-color) calc(var(--gantt-unit-w) - 1px));
    background-repeat: no-repeat, repeat-x, repeat-x;
    background-size:
        2px 100%,
        calc(var(--gantt-unit-w) * 7) 100%,
        var(--gantt-unit-w) 100%;
    background-position:
        calc(var(--gantt-unit-w) * var(--gantt-today, 0) - 1px) 0,
        calc(var(--gantt-unit-w) * var(--gantt-weekend-offset, 0)) 0,
        0 0;
}

.gantt-scroll.has-today[b-relnrt1xe8] {
    --gantt-today-layer: linear-gradient(var(--accent-danger), var(--accent-danger));
}

.gantt-scroll.has-weekends[b-relnrt1xe8] {
    --gantt-weekend-layer: linear-gradient(to right, var(--bg-secondary) calc(var(--gantt-unit-w) * 2), transparent calc(var(--gantt-unit-w) * 2));
}

/* No pattern behind the header: its cells draw their own right-hand borders, and a pattern behind
   text is what stops a contrast checker from being able to say what the text sits on. Written with
   the head row in the selector so it outranks .gantt-lane above. */
.gantt-row--head > .gantt-lane[b-relnrt1xe8] {
    background-image: none;
}

/* ── Bars ─────────────────────────────────────────────────────────────────────────────────────── */

.gantt-bar[b-relnrt1xe8] {
    position: absolute;
    top: calc(var(--lane, 0) * var(--gantt-lane-h) + 4px);
    left: calc(var(--gantt-unit-w) * var(--x));
    width: calc(var(--gantt-unit-w) * var(--w));
    min-width: 8px;
    height: calc(var(--gantt-lane-h) - 6px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0 6px;
    border: 0;
    border-radius: 4px;
    background-color: var(--bar-bg, var(--gantt-bar-bg));
    /* !important because a grouped row's bars are <button>s, and app.css puts near-white on every
       button in the dark theme (and white again on hover) at a specificity nothing here can reach.
       The ink on a bar is chosen for the bar's own colour and must never be the theme's. */
    color: var(--bar-fg, var(--gantt-bar-fg)) !important;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    transition: filter 0.1s ease;
    z-index: 1;
}

.gantt-bar:hover[b-relnrt1xe8] {
    filter: brightness(1.08);
}

.gantt-bar:focus-visible[b-relnrt1xe8] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 2px;
    z-index: 2;
}

/* A bar always has an edge against the card, whatever colour the report gave it: a pale colour on
   a white row, or a dark one on the dark card, would otherwise have none (WCAG 1.4.11). */
.gantt-bar[b-relnrt1xe8] {
    box-shadow: inset 0 0 0 1px var(--border-interactive);
}

.gantt-bar-text[b-relnrt1xe8] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-bar-tick[b-relnrt1xe8] {
    flex: 0 0 auto;
    font-size: 0.65rem;
}

/* Completed: a green frame AND a tick inside the bar, so the state survives anyone who cannot tell
   that green from the bar beneath it. */
.gantt-bar--complete[b-relnrt1xe8] {
    box-shadow: 0 0 0 2px var(--accent-success-text);
}

/* A task with no end, and a milestone: a diamond centred on its day rather than a span. */
.gantt-bar--point[b-relnrt1xe8] {
    top: calc(var(--lane, 0) * var(--gantt-lane-h) + (var(--gantt-lane-h) - 14px) / 2);
    width: 14px;
    min-width: 14px;
    height: 14px;
    margin-left: -7px;
    padding: 0;
    border-radius: 2px;
    transform: rotate(45deg);
    box-shadow: inset 0 0 0 1px var(--border-interactive);
}

.gantt-bar--point.gantt-bar--complete[b-relnrt1xe8] {
    box-shadow: 0 0 0 2px var(--accent-success-text);
}

.gantt-bar--point .gantt-bar-tick[b-relnrt1xe8] {
    display: none;
}

/* The milestone is the plain ink colour, so it is the one mark on the chart that is not a task. */
.gantt-bar--milestone[b-relnrt1xe8] {
    background-color: var(--text-primary);
    cursor: default;
}

.gantt-bar--milestone:hover[b-relnrt1xe8] {
    filter: none;
}

/* ── Empty ────────────────────────────────────────────────────────────────────────────────────── */

.gantt-row--empty[b-relnrt1xe8] {
    display: block;
    min-height: 0;
    border-bottom: 0;
}

.gantt-empty[b-relnrt1xe8] {
    position: sticky;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    color: var(--text-secondary);
}

/* ── Narrow screens ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .gantt[b-relnrt1xe8] {
        --gantt-label-col-w: 8rem;
    }

    /* Two sticky label columns would take most of a phone's width and leave a sliver of timeline.
       The first column is the row's name and stays; the second is a detail the row's own
       accessible name and tooltip still carry. */
    .gantt-row > .gantt-label--second[b-relnrt1xe8] {
        display: none;
    }

    .gantt-row[b-relnrt1xe8] {
        grid-template-columns: var(--gantt-label-col-w) calc(var(--gantt-unit-w) * var(--gantt-units));
    }

    .gantt-summary[b-relnrt1xe8] {
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gantt-segment-label[b-relnrt1xe8],
    .gantt-btn[b-relnrt1xe8],
    .gantt-bar[b-relnrt1xe8] {
        transition: none;
    }
}
/* /Components/Grid/GridItemCheckbox.razor.rz.scp.css */
.checkbox-wrapper[b-2cpbafy60k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.checkbox-selected[b-2cpbafy60k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background-color: #10b981;
    color: white;
}
/* /Components/Grid/SearchWithSuggestions.razor.rz.scp.css */
/* ========== MODERN SEARCH WRAPPER ========== */
.search-wrapper[b-hctzmpwr0d] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 360px;
    min-width: 160px;
    max-width: 100%;
    flex-shrink: 1;
    z-index: 100;
}

/* ========== SEARCH BOX (matches top-bar-main-search) ========== */
.search-box[b-hctzmpwr0d] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--amx-border);
    border-radius: 999px;
    padding: 6px 6px 6px 14px;
    transition: all 0.15s ease;
    box-shadow: var(--shadow-sm);
}

.search-box:hover[b-hctzmpwr0d] {
    border-color: rgba(var(--amx-primary-rgb), 0.45);
    background: var(--bg-input);
}

.search-wrapper.focused .search-box[b-hctzmpwr0d] {
    background: var(--bg-input);
    border-color: var(--amx-primary);
    box-shadow: 0 0 0 4px rgba(var(--amx-primary-rgb), 0.14);
}

.search-wrapper.has-value .search-box[b-hctzmpwr0d] {
    background: var(--bg-input);
    border-color: rgba(var(--amx-primary-rgb), 0.5);
}

/* Search Icon (matches .amx-jump-hint) */
.search-icon[b-hctzmpwr0d] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--amx-primary);
    background: transparent;
    font-size: 0.85rem;
    padding-left: 2px;
    transition: all 0.2s ease;
}

.search-wrapper.focused .search-icon[b-hctzmpwr0d] {
    color: var(--amx-primary);
    background: transparent;
}

/* Search Input (matches .amx-jump-input) */
.search-input[b-hctzmpwr0d] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--amx-text);
    padding: 5px 6px;
    min-width: 0;
}

.search-input[b-hctzmpwr0d]::placeholder {
    color: var(--amx-muted);
    font-weight: 400;
}

/* Clear Button (matches .amx-chip-btn) */
.search-clear-btn[b-hctzmpwr0d] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 10px;
    border: none;
    background: rgba(var(--amx-primary-rgb), 0.12);
    border-radius: 999px;
    color: var(--amx-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    font-size: 0.75rem;
}

.search-clear-btn:hover[b-hctzmpwr0d] {
    background: rgba(var(--amx-primary-rgb), 0.2);
    color: var(--amx-primary);
}

/* Submit Button (matches .amx-search-btn) */
.search-submit-btn[b-hctzmpwr0d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: var(--amx-primary);
    border-radius: 999px;
    color: #ffffff;
    cursor: pointer;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.search-submit-btn:hover[b-hctzmpwr0d] {
    opacity: 0.85;
}

.search-submit-btn:focus-visible[b-hctzmpwr0d] {
    outline: 2px solid var(--amx-primary);
    outline-offset: 2px;
}

.search-submit-text[b-hctzmpwr0d] {
    display: none;
}

.search-submit-icon[b-hctzmpwr0d] {
    font-size: 0.875rem;
}

/* ========== APPLIED FILTER INDICATOR ========== */
.search-applied-indicator[b-hctzmpwr0d] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    font-size: 12px;
    animation: fadeSlideIn-b-hctzmpwr0d 0.2s ease-out;
}

@keyframes fadeSlideIn-b-hctzmpwr0d {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-applied-text[b-hctzmpwr0d] {
    color: #047857;
    flex: 1;
}

.search-applied-text strong[b-hctzmpwr0d] {
    color: #065f46;
}

.search-applied-clear[b-hctzmpwr0d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: #ffffff;
    border-radius: 4px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    font-size: 10px;
}

.search-applied-clear:hover[b-hctzmpwr0d] {
    background: #fef2f2;
    color: #dc2626;
}

/* ========== SUGGESTIONS ========== */
.search-suggestions[b-hctzmpwr0d] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
    z-index: 9999;
    animation: dropdownSlide-b-hctzmpwr0d 0.2s ease-out;
}

@keyframes dropdownSlide-b-hctzmpwr0d {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-suggestions-header[b-hctzmpwr0d] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #f59e0b;
}

.search-suggestions-header i[b-hctzmpwr0d] {
    font-size: 14px;
}

.search-suggestions-list[b-hctzmpwr0d] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.search-suggestion-chip[b-hctzmpwr0d] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 999px;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.search-suggestion-chip:hover[b-hctzmpwr0d] {
    background: #1b8f1b;
    border-color: #1b8f1b;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(27, 143, 27, 0.25);
}

/* ========== DARK MODE ========== */
[data-theme="dark"] .search-box[b-hctzmpwr0d] {
    background: var(--amx-panel);
    border-color: var(--amx-border);
}

[data-theme="dark"] .search-wrapper.focused .search-box[b-hctzmpwr0d] {
    border-color: var(--amx-primary);
    box-shadow: 0 0 0 4px rgba(var(--amx-primary-rgb), 0.14);
}

[data-theme="dark"] .search-wrapper.has-value .search-box[b-hctzmpwr0d] {
    border-color: rgba(var(--amx-primary-rgb), 0.5);
}

[data-theme="dark"] .search-icon[b-hctzmpwr0d] {
    color: var(--amx-primary);
}

[data-theme="dark"] .search-wrapper.focused .search-icon[b-hctzmpwr0d] {
    color: var(--amx-primary);
}

[data-theme="dark"] .search-input[b-hctzmpwr0d] {
    color: var(--amx-text);
}

[data-theme="dark"] .search-input[b-hctzmpwr0d]::placeholder {
    color: var(--amx-muted);
}

[data-theme="dark"] .search-clear-btn[b-hctzmpwr0d] {
    background: rgba(var(--amx-primary-rgb), 0.15);
    color: var(--amx-primary);
}

[data-theme="dark"] .search-clear-btn:hover[b-hctzmpwr0d] {
    background: rgba(var(--amx-primary-rgb), 0.25);
    color: var(--amx-primary);
}

[data-theme="dark"] .search-submit-btn[b-hctzmpwr0d] {
    background: var(--amx-primary);
    color: #ffffff;
}

[data-theme="dark"] .search-submit-btn:hover[b-hctzmpwr0d] {
    opacity: 0.85;
}

[data-theme="dark"] .search-applied-indicator[b-hctzmpwr0d] {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.15) 0%, rgba(39, 174, 96, 0.1) 100%);
    border-color: rgba(46, 204, 113, 0.3);
}

[data-theme="dark"] .search-applied-text[b-hctzmpwr0d] {
    color: #2ecc71;
}

[data-theme="dark"] .search-applied-text strong[b-hctzmpwr0d] {
    color: #58d68d;
}

[data-theme="dark"] .search-applied-clear[b-hctzmpwr0d] {
    background: var(--bg-hover);
    color: #9ca3af;
}

[data-theme="dark"] .search-applied-clear:hover[b-hctzmpwr0d] {
    background: #7f1d1d;
    color: #fca5a5;
}

[data-theme="dark"] .search-suggestions[b-hctzmpwr0d] {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .search-suggestions-header[b-hctzmpwr0d] {
    color: #f59e0b;
}

[data-theme="dark"] .search-suggestion-chip[b-hctzmpwr0d] {
    background: var(--bg-hover);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .search-suggestion-chip:hover[b-hctzmpwr0d] {
    background: #2ecc71;
    border-color: #2ecc71;
    color: var(--text-on-bright);
}
/* /Components/Grid/TreeDiagram.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────────────────────────────
   Tree view (dendrogram) of a report grid.

   The tree is nested lists laid out left to right: an item is a row of [its box][its children], and
   the children are a column. Every box at one depth has the same width, so each level reads as a
   column under its caption, and the depth step is one constant - box width + --tree-gap + --tree-stub.

   The connector lines are borders on pseudo-elements of the lists themselves, not an SVG laid over
   them, so they follow whatever height a branch turns out to be and never sit on top of a box:
     - .tree-group::before    the stub from a parent's box to its children's spine
     - .tree-item::before     this child's share of the spine (half of it on the first and last)
     - .tree-item::after      the stub from the spine to this child's box
   Lines are --border-interactive, which clears 3:1 against the card in both themes (WCAG 1.4.11):
   they carry the structure for a sighted reader, as the nesting does for a screen reader.
   ───────────────────────────────────────────────────────────────────────────────────────────────── */

.tree-view[b-wfa4d1ovrw] {
    --tree-root-w: 10rem;
    --tree-node-w: 13rem;
    --tree-leaf-w: 15rem;
    --tree-gap: 28px;
    --tree-stub: 14px;
    --tree-line: var(--border-interactive);
    --tree-line-w: 1.5px;

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    min-width: 0;
    min-height: 0;
    color: var(--text-primary);
    font-size: 0.8125rem;
}

/* ── Toolbar ──────────────────────────────────────────────────────────────────────────────────── */

.tree-toolbar[b-wfa4d1ovrw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.tree-toolbar-group[b-wfa4d1ovrw],
.tree-levels[b-wfa4d1ovrw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.tree-level[b-wfa4d1ovrw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* The same quiet caption the design language gives every field label. */
.tree-level-caption[b-wfa4d1ovrw] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.tree-level > select[b-wfa4d1ovrw] {
    height: 32px;
    max-width: 14rem;
    padding: 0 8px;
    border: 1px solid var(--border-interactive);
    border-radius: 6px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.82rem;
}

.tree-level > select:focus-visible[b-wfa4d1ovrw] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 1px;
}

.tree-level-sep[b-wfa4d1ovrw] {
    color: var(--text-secondary);
    font-size: 0.7rem;
}

.tree-btn[b-wfa4d1ovrw],
.tree-icon-btn[b-wfa4d1ovrw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.tree-icon-btn[b-wfa4d1ovrw] {
    width: 28px;
    height: 28px;
    padding: 0;
    border-color: transparent;
    background-color: transparent;
    color: var(--text-secondary);
}

.tree-btn:hover:not(:disabled)[b-wfa4d1ovrw],
.tree-icon-btn:hover[b-wfa4d1ovrw] {
    background-color: var(--bg-hover);
}

.tree-btn:focus-visible[b-wfa4d1ovrw],
.tree-icon-btn:focus-visible[b-wfa4d1ovrw] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 1px;
}

/* Ends disable rather than disappear, as the zoom buttons do, so nothing moves under the pointer. */
.tree-btn:disabled[b-wfa4d1ovrw] {
    opacity: 0.45;
    cursor: default;
}

/* Zoom: one bordered track of four, like the grid's zoom group, at the toolbar buttons' height. */
.tree-zoom[b-wfa4d1ovrw] {
    display: inline-flex;
    align-items: stretch;
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--bg-card);
    overflow: hidden;
}

.tree-zoom-btn[b-wfa4d1ovrw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 34px;
    padding: 0 10px;
    border: 0;
    border-right: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.tree-zoom-btn:last-child[b-wfa4d1ovrw] {
    border-right: 0;
}

.tree-zoom-btn:hover:not(:disabled)[b-wfa4d1ovrw] {
    background-color: var(--bg-hover);
}

/* Inset: the track clips anything drawn outside it. */
.tree-zoom-btn:focus-visible[b-wfa4d1ovrw] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: -2px;
}

.tree-zoom-btn:disabled[b-wfa4d1ovrw] {
    opacity: 0.45;
    cursor: default;
}

/* Wide enough for "175%", so the track does not shift as the number changes. */
.tree-zoom-reset[b-wfa4d1ovrw] {
    min-width: 3.75rem;
    font-variant-numeric: tabular-nums;
}

.tree-check[b-wfa4d1ovrw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-height: 24px;
    color: var(--text-primary);
    cursor: pointer;
}

.tree-check > input[b-wfa4d1ovrw] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent-link);
}

/* Expand / collapse and zoom: at the far right, and still right-aligned when they wrap below the levels. */
.tree-toolbar-actions[b-wfa4d1ovrw] {
    margin-left: auto;
}

.tree-note[b-wfa4d1ovrw] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-sm);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.tree-unavailable[b-wfa4d1ovrw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    color: var(--text-secondary);
}

/* ── The tree ─────────────────────────────────────────────────────────────────────────────────── */

/* The frame fills what the grid gives the tree below the toolbar, as the table fills it: it starts
   at 70vh and grows or shrinks to the grid's height, so it neither stops short of a tall report pane
   nor runs past a short one. Where the host has no height of its own it stays at 70vh - a set size,
   never the tree's: the tree is panned about inside it, and the empty canvas round the tree (see
   .tree-sizer) is sized from the frame, so a frame that followed its content would grow every pass.
   Its floor is low on purpose: a record's grid on a form is often only six rows (~250px), and once
   the grid's header and this toolbar have their share, a taller floor pushed the frame out of the
   grid and the grid scrolled round a tree that scrolls - two scroll bars on one view. 4rem is the
   64px the pan keeps in view (AmxTreeZoom's KEEP); only a grid too short even for that scrolls. */
.tree-scroll[b-wfa4d1ovrw] {
    flex: 1 1 auto;
    height: 70vh;
    min-height: 4rem;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--bg-card);
    overscroll-behavior: contain;
}

/* The empty canvas can be dragged to pan (AmxTreeZoom). Boxes keep their own pointer cursor. */
@media (hover: hover) and (pointer: fine) {
    .tree-scroll[b-wfa4d1ovrw] {
        cursor: grab;
    }
}

.tree-scroll.is-panning[b-wfa4d1ovrw],
.tree-scroll.is-panning .tree-node[b-wfa4d1ovrw] {
    cursor: grabbing;
    user-select: none;
}

/* Holds the canvas at its zoomed size: a transform does not change layout, so AmxTreeZoom sets
   this box's width and height to the scaled ones and the scroll area measures those. It also pads
   it with nearly a frame of empty canvas on every side, so the tree can be panned anywhere in the
   frame. Before the script runs it simply wraps the canvas. */
.tree-sizer[b-wfa4d1ovrw] {
    width: max-content;
    overflow: hidden;
}

/* No min-width: 100% here - the sizer's width is derived from this one's, and a percentage of it
   would feed back into itself on every zoom. */
.tree-canvas[b-wfa4d1ovrw] {
    width: max-content;
    padding: 0.75rem 1rem 1rem;
    transform-origin: 0 0;
}

.tree-captions[b-wfa4d1ovrw] {
    display: flex;
    gap: calc(var(--tree-gap) + var(--tree-stub));
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.tree-caption[b-wfa4d1ovrw] {
    flex: none;
    width: var(--tree-node-w);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-caption--root[b-wfa4d1ovrw] {
    width: var(--tree-root-w);
}

.tree-caption--record[b-wfa4d1ovrw] {
    width: var(--tree-leaf-w);
}

/* The records' caption is the pick of the column naming them: a select the width of a record box, so
   it still reads as that column's heading. It is in the canvas, so it pans and zooms with the tree. */
.tree-captions[b-wfa4d1ovrw] {
    align-items: center;
}

.tree-caption--pick[b-wfa4d1ovrw] {
    overflow: visible;
}

.tree-caption--pick > select[b-wfa4d1ovrw] {
    width: 100%;
    height: 26px;
    padding: 0 6px;
    border: 1px solid var(--border-interactive);
    border-radius: 6px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.tree-caption--pick > select:focus-visible[b-wfa4d1ovrw] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 1px;
}

.tree[b-wfa4d1ovrw],
.tree-group[b-wfa4d1ovrw] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tree-item[b-wfa4d1ovrw] {
    position: relative;
    display: flex;
    align-items: center;
}

/* JS owns the roving tab stop; the ring is drawn on the box, not round the whole branch. */
.tree-item:focus[b-wfa4d1ovrw] {
    outline: none;
}

.tree-item:focus-visible > .tree-node[b-wfa4d1ovrw] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 2px;
}

.tree-group[b-wfa4d1ovrw] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: var(--tree-gap);
}

.tree-group[b-wfa4d1ovrw]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--tree-gap);
    border-top: var(--tree-line-w) solid var(--tree-line);
}

.tree-group > .tree-item[b-wfa4d1ovrw] {
    padding: 3px 0 3px var(--tree-stub);
}

.tree-group > .tree-item[b-wfa4d1ovrw]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-left: var(--tree-line-w) solid var(--tree-line);
}

.tree-group > .tree-item:first-child[b-wfa4d1ovrw]::before {
    top: 50%;
}

.tree-group > .tree-item:last-child[b-wfa4d1ovrw]::before {
    bottom: 50%;
}

.tree-group > .tree-item[b-wfa4d1ovrw]::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--tree-stub);
    border-top: var(--tree-line-w) solid var(--tree-line);
}

/* ── Boxes ────────────────────────────────────────────────────────────────────────────────────── */

.tree-node[b-wfa4d1ovrw] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: var(--tree-node-w);
    min-height: 30px;
    padding: 4px 8px;
    border: 1px solid var(--border-interactive);
    border-radius: 6px;
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.tree-node:hover[b-wfa4d1ovrw] {
    background-color: var(--bg-hover);
}

.tree-node--root[b-wfa4d1ovrw] {
    width: var(--tree-root-w);
    background-color: var(--bg-secondary);
    font-weight: 600;
}

[data-theme="dark"] .tree-node--root[b-wfa4d1ovrw] {
    background-color: var(--bg-tertiary);
}

/* A record is a link to it: link colour and underline, and a dashed edge so it is told apart from a
   group by shape as well as by colour. */
.tree-node--record[b-wfa4d1ovrw] {
    width: var(--tree-leaf-w);
    border-style: dashed;
    color: var(--accent-link);
}

.tree-node--record .tree-node-text[b-wfa4d1ovrw] {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tree-node--more[b-wfa4d1ovrw] {
    width: var(--tree-leaf-w);
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
    color: var(--text-secondary);
    font-style: italic;
    cursor: default;
}

.tree-node--more:hover[b-wfa4d1ovrw] {
    background-color: transparent;
}

.tree-node.is-blank .tree-node-text[b-wfa4d1ovrw] {
    color: var(--text-secondary);
    font-style: italic;
}

/* A box painted with the report's cell colours (see NodeStyle). Its background is inline, so the
   hover repaint above cannot show; a veil of its own ink does instead, as on a coloured grid cell.
   The chevron and a blank label take the box's ink - the theme's secondary grey is chosen for the
   theme's surface, not for a customer's colour. */
.tree-node.has-own-colour:hover[b-wfa4d1ovrw] {
    box-shadow: var(--shadow-sm), inset 0 0 0 100vmax color-mix(in srgb, currentColor 15%, transparent);
}

.tree-node.has-own-colour .tree-node-chev[b-wfa4d1ovrw],
.tree-node.has-own-colour.is-blank .tree-node-text[b-wfa4d1ovrw] {
    color: inherit;
}

.tree-node-chev[b-wfa4d1ovrw] {
    flex: none;
    width: 12px;
    color: var(--text-secondary);
    font-size: 0.7rem;
    text-align: center;
}

.tree-node--record .tree-node-chev[b-wfa4d1ovrw] {
    color: inherit;
}

.tree-node-text[b-wfa4d1ovrw] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-node-count[b-wfa4d1ovrw] {
    flex: none;
    padding: 1px 7px;
    border-radius: 999px;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .tree-node-count[b-wfa4d1ovrw] {
    background-color: var(--bg-tertiary);
}

/* ── Narrow screens ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .tree-view[b-wfa4d1ovrw] {
        --tree-root-w: 7rem;
        --tree-node-w: 9.5rem;
        --tree-leaf-w: 11rem;
        --tree-gap: 18px;
        --tree-stub: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tree-node[b-wfa4d1ovrw],
    .tree-btn[b-wfa4d1ovrw],
    .tree-icon-btn[b-wfa4d1ovrw],
    .tree-zoom-btn[b-wfa4d1ovrw] {
        transition: none;
    }
}

/* The root cannot be closed, so it is not drawn as something to press. */
.tree-node--root[b-wfa4d1ovrw],
.tree-node--root:hover[b-wfa4d1ovrw] {
    cursor: default;
}
/* /Components/HomeSection/SectionContextPicker.razor.rz.scp.css */
/* Section and catalogue filters at the top of the sidebar (DESIGN_LANGUAGE.md "Sidebar context
   picker"). Colours are tokens, so dark mode follows app.css. A catalogue bar that is set and the
   selected rows are filled the way the sidebar's selected node is: the customer's primary colour,
   in the ink AuthMainLayout publishes with it on .amx-shell (PrimaryColourStyle - black or white,
   whichever passes AA on that colour), and its hover shade, which only adds contrast. Outside the
   shell they fall back to the primary blue fill. The ink is !important on buttons because app.css's
   dark theme recolours every button with a selector no class chain here can outrank. */

.amx-ctx[b-up1b3dagq0] {
    position: relative;
    --ctx-selected-bg: var(--app-primary, var(--accent-primary-fill));
    --ctx-selected-hover: var(--app-primary-hover, var(--accent-primary-fill));
    --ctx-selected-ink: var(--app-primary-ink, var(--text-on-dark));
}

/* ── The section button ─────────────────────────────────────────────────── */

/* The button and, after it, the sidebar's close button (HeadEnd), one row. */
.amx-ctx-head[b-up1b3dagq0] {
    display: flex;
    gap: 7px;
}

.amx-ctx-button[b-up1b3dagq0] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 9px;
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    padding: 0 11px 0 7px;
    font: inherit;
    text-align: left;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.amx-ctx-button:hover[b-up1b3dagq0] {
    background: var(--bg-hover);
}

.amx-ctx-button.is-open[b-up1b3dagq0],
.amx-ctx-level.is-open .amx-ctx-level-open[b-up1b3dagq0] {
    border-color: var(--accent-success-fill);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-success-fill) 15%, transparent);
}

.amx-ctx-button:focus-visible[b-up1b3dagq0],
.amx-ctx-level-open:focus-visible[b-up1b3dagq0],
.amx-ctx-level-clear:focus-visible[b-up1b3dagq0] {
    outline: 2px solid var(--border-focus, var(--accent-success-text));
    outline-offset: 2px;
}

.amx-ctx-icon[b-up1b3dagq0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 6px;
    background: var(--bg-secondary);
    overflow: hidden;
}

.amx-ctx-icon[b-up1b3dagq0]  img {
    max-width: 18px;
    max-height: 18px;
}

.amx-ctx-name[b-up1b3dagq0] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.amx-ctx-chevron[b-up1b3dagq0],
.amx-ctx-level-clear svg[b-up1b3dagq0],
.amx-ctx-search svg[b-up1b3dagq0],
.amx-ctx-check[b-up1b3dagq0],
.amx-ctx-any[b-up1b3dagq0] {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

/* The dropdown chevron, on the section button and on every catalogue bar alike. */
.amx-ctx-chevron[b-up1b3dagq0] {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    color: var(--text-secondary);
}

/* ── Catalogue bars ─────────────────────────────────────────────────────── */

.amx-ctx-filters[b-up1b3dagq0] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 7px;
}

/* One full-width, one-line bar per level: the level's name then its choice, a cross once something is
   chosen, then the chevron. The bar is the button; the cross and chevron sit over its right-hand padding. */
.amx-ctx-level[b-up1b3dagq0] {
    position: relative;
}

.amx-ctx-level-open[b-up1b3dagq0] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 38px;
    box-sizing: border-box;
    padding: 4px 40px 4px 11px;
    font: inherit;
    text-align: left;
    color: var(--text-primary) !important;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.amx-ctx-level.is-set .amx-ctx-level-open[b-up1b3dagq0] {
    padding-right: 70px;
    color: var(--ctx-selected-ink) !important;
    background: var(--ctx-selected-bg);
    border-color: var(--ctx-selected-bg);
}

.amx-ctx-level-open:hover[b-up1b3dagq0] {
    background: var(--bg-hover);
}

.amx-ctx-level.is-set .amx-ctx-level-open:hover[b-up1b3dagq0] {
    background: var(--ctx-selected-hover);
    border-color: var(--ctx-selected-hover);
}

/* The green ring would vanish into the fill; a set bar and its cross ring in the ink. */
.amx-ctx-level.is-set :is(.amx-ctx-level-open, .amx-ctx-level-clear):focus-visible[b-up1b3dagq0] {
    outline: 2px solid var(--ctx-selected-ink);
    outline-offset: -2px;
}

.amx-ctx-level-key[b-up1b3dagq0],
.amx-ctx-level-value[b-up1b3dagq0] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The name keeps its words until it would crowd the choice out; the choice takes the rest. */
.amx-ctx-level-key[b-up1b3dagq0] {
    flex: 0 1 auto;
    max-width: 55%;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.amx-ctx-level-value[b-up1b3dagq0] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-primary);
}

.amx-ctx-level.is-set .amx-ctx-level-key[b-up1b3dagq0] {
    color: var(--ctx-selected-ink);
}

.amx-ctx-level.is-set .amx-ctx-level-value[b-up1b3dagq0] {
    font-weight: 650;
    color: var(--ctx-selected-ink);
}

.amx-ctx-level-chevron[b-up1b3dagq0] {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    pointer-events: none;
}

.amx-ctx-level.is-set .amx-ctx-level-chevron[b-up1b3dagq0] {
    color: var(--ctx-selected-ink);
}

/* 27px: beside the bar's own button it needs the full 24px target (WCAG 2.5.8) after the
   sidebar's 0.9 UI scale. */
.amx-ctx-level-clear[b-up1b3dagq0] {
    position: absolute;
    top: 50%;
    right: 34px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ctx-selected-ink) !important;
    cursor: pointer;
}

.amx-ctx-level-clear svg[b-up1b3dagq0] {
    width: 12px;
    height: 12px;
    stroke-width: 2.5;
}

/* Only ever shown on a set bar, so it sits on the fill: the hover shade, ringed in the ink so the
   circle reads against the bar it shares. */
.amx-ctx-level-clear:hover[b-up1b3dagq0] {
    background: var(--ctx-selected-hover);
    box-shadow: inset 0 0 0 1px var(--ctx-selected-ink);
}

/* ── The picker ─────────────────────────────────────────────────────────── */

.amx-ctx-backdrop[b-up1b3dagq0] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.amx-ctx-pop[b-up1b3dagq0] {
    position: absolute;
    top: 49px;
    left: 0;
    right: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    max-height: min(560px, calc(100vh - 180px));
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.amx-ctx-steps[b-up1b3dagq0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 8px 8px 0;
}

.amx-ctx-step[b-up1b3dagq0] {
    height: 30px;
    max-width: 100%;
    padding: 0 8px;
    font: inherit;
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--text-secondary) !important;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.amx-ctx-step:hover[b-up1b3dagq0] {
    color: var(--text-primary) !important;
}

.amx-ctx-step.is-on[b-up1b3dagq0] {
    color: var(--text-primary) !important;
    border-bottom-color: var(--accent-success-fill);
}

.amx-ctx-step:focus-visible[b-up1b3dagq0] {
    outline: 2px solid var(--border-focus, var(--accent-success-text));
    outline-offset: -2px;
}

.amx-ctx-sep[b-up1b3dagq0] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.amx-ctx-search[b-up1b3dagq0] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px;
    height: 34px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid var(--border-interactive);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-muted);
}

.amx-ctx-search:focus-within[b-up1b3dagq0] {
    border-color: var(--accent-success-fill);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-success-fill) 15%, transparent);
}

.amx-ctx-search svg[b-up1b3dagq0] {
    width: 16px;
    height: 16px;
    stroke-width: 1.75;
}

.amx-ctx-search input[b-up1b3dagq0] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--text-primary);
}

.amx-ctx-search input[b-up1b3dagq0]::placeholder {
    color: var(--text-muted);
}

.amx-ctx-list[b-up1b3dagq0] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0 6px 6px;
    list-style: none;
    overflow-y: auto;
    min-height: 0;
}

.amx-ctx-opt[b-up1b3dagq0] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 36px;
    box-sizing: border-box;
    padding: 6px 10px;
    font: inherit;
    font-size: 0.84375rem;
    line-height: 1.3;
    text-align: left;
    color: var(--text-primary) !important;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.amx-ctx-opt:hover[b-up1b3dagq0] {
    background: var(--bg-hover);
}

.amx-ctx-opt:focus-visible[b-up1b3dagq0] {
    outline: 2px solid var(--border-focus, var(--accent-success-text));
    outline-offset: -2px;
}

.amx-ctx-opt.is-any:not(.is-selected)[b-up1b3dagq0] {
    color: var(--text-secondary) !important;
}

.amx-ctx-opt.is-selected[b-up1b3dagq0] {
    font-weight: 650;
    color: var(--ctx-selected-ink) !important;
    background: var(--ctx-selected-bg);
}

.amx-ctx-opt.is-selected:hover[b-up1b3dagq0] {
    background: var(--ctx-selected-hover);
}

.amx-ctx-opt.is-selected:focus-visible[b-up1b3dagq0] {
    outline-color: var(--ctx-selected-ink);
}

.amx-ctx-opt-text[b-up1b3dagq0] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.amx-ctx-opt-gap[b-up1b3dagq0] {
    width: 16px;
    flex: 0 0 auto;
}

.amx-ctx-check[b-up1b3dagq0],
.amx-ctx-any[b-up1b3dagq0] {
    width: 16px;
    height: 16px;
}

.amx-ctx-check[b-up1b3dagq0] {
    stroke-width: 2.5;
}

.amx-ctx-any[b-up1b3dagq0] {
    stroke-width: 1.75;
    stroke-dasharray: 3 3;
}

.amx-ctx-opt-icon[b-up1b3dagq0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 6px;
    background: var(--bg-secondary);
    overflow: hidden;
}

.amx-ctx-opt-icon[b-up1b3dagq0]  img {
    max-width: 18px;
    max-height: 18px;
}

.amx-ctx-empty[b-up1b3dagq0] {
    padding: 10px;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.amx-ctx-foot[b-up1b3dagq0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.amx-ctx-clear[b-up1b3dagq0] {
    padding: 4px 0;
    font: inherit;
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--accent-danger-text) !important;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.amx-ctx-clear:disabled[b-up1b3dagq0] {
    opacity: 0.5;
    cursor: default;
}

.amx-ctx-clear:focus-visible[b-up1b3dagq0] {
    outline: 2px solid var(--border-focus, var(--accent-success-text));
    outline-offset: 2px;
}
/* /Components/Inputs/AmxColorPicker.razor.rz.scp.css */
/* Flat, self-contained colour picker so it looks identical wherever it is used
   (independent of Bootstrap's input-group). Children are joined with overlapping
   1px borders; the ends are rounded, inner corners square. */
.amx-color-picker[b-4lg3yg1u39] {
    display: inline-flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.amx-color-picker > *[b-4lg3yg1u39] {
    border-radius: 0 !important;
}

.amx-color-picker > * + *[b-4lg3yg1u39] {
    margin-left: -1px;
}

.amx-color-picker > :first-child[b-4lg3yg1u39] {
    border-top-left-radius: var(--radius-md, 8px) !important;
    border-bottom-left-radius: var(--radius-md, 8px) !important;
}

.amx-color-picker > :first-child .amx-color-picker-text[b-4lg3yg1u39] {
    border-top-left-radius: var(--radius-md, 8px) !important;
    border-bottom-left-radius: var(--radius-md, 8px) !important;
}

.amx-color-picker .amx-color-picker-text[b-4lg3yg1u39] {
    border-radius: 0 !important;
}

.amx-color-picker > :last-child[b-4lg3yg1u39] {
    border-top-right-radius: var(--radius-md, 8px) !important;
    border-bottom-right-radius: var(--radius-md, 8px) !important;
}

/* Hex text field keeps the flexible width. */
.amx-color-picker-field[b-4lg3yg1u39] {
    position: relative;
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
}

.amx-color-picker-text[b-4lg3yg1u39] {
    min-width: 0;
    flex: 1 1 auto;
    font-family: var(--font-mono, 'SF Mono', Consolas, monospace);
    text-transform: lowercase;
}

.amx-color-picker.is-invalid .amx-color-picker-text[b-4lg3yg1u39],
.amx-color-picker-text.is-invalid[b-4lg3yg1u39] {
    border-color: var(--accent-danger) !important;
    padding-right: 2rem;
}

.amx-color-picker-invalid-icon[b-4lg3yg1u39] {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    color: var(--accent-danger);
    pointer-events: none;
    z-index: 3;
}

.amx-color-picker-text:focus[b-4lg3yg1u39] {
    z-index: 2;
}

.amx-color-picker-text[b-4lg3yg1u39]::placeholder {
    color: var(--text-muted);
    opacity: 1;
    text-transform: none;
}

/* Colour swatch: the native input is made invisible and overlays a styled tile so
   we can show the actual colour, or a clear "no colour" state when unset. */
.amx-color-picker-swatch[b-4lg3yg1u39] {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    margin-bottom: 0;
    border: 1px solid var(--border-interactive);
    background: var(--amx-swatch, var(--bg-card));
    cursor: pointer;
    overflow: hidden;
}

/* A neutral choose-colour icon accompanies "Not set"; no coloured mark implies a selection. */
.amx-color-picker-swatch.is-empty[b-4lg3yg1u39] {
    background: var(--bg-card);
    color: var(--text-secondary);
}

.amx-color-picker-empty-icon[b-4lg3yg1u39] {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.amx-color-picker-swatch:focus-within[b-4lg3yg1u39],
.amx-color-picker-reset:focus-visible[b-4lg3yg1u39] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: -3px;
    z-index: 2;
}

.amx-color-picker-swatch input[type="color"][b-4lg3yg1u39] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    opacity: 0;
    cursor: pointer;
}

/* Reset button matches the ghost/outline style of the design language. */
.amx-color-picker-reset[b-4lg3yg1u39] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    padding: 0;
    border: 1px solid var(--border-interactive);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease;
}

.amx-color-picker-reset:hover:not(:disabled)[b-4lg3yg1u39] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.amx-color-picker-reset:disabled[b-4lg3yg1u39] {
    opacity: 0.5;
    cursor: default;
}
/* /Components/Inputs/AmxDateInput.razor.rz.scp.css */
/* ========== AMX DATE INPUT ==========
   Design language §5 (Inputs / selects): hairline border, --radius-md, soft accent focus
   ring. The clear button sits inside the field so the pair reads as one control rather
   than an input with a button bolted on. */

.amx-date[b-1on825eekt] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 4px 0 10px;
    border: 1px solid var(--dbd-border-strong, #d4d4d8);
    border-radius: var(--radius-md, 8px);
    background-color: var(--dbd-surface, #ffffff);
    transition: border-color var(--transition-fast, 100ms ease), box-shadow var(--transition-fast, 100ms ease);
}

.amx-date:hover:not(.is-disabled)[b-1on825eekt] {
    border-color: var(--dbd-accent, #15803d);
}

.amx-date:focus-within[b-1on825eekt] {
    border-color: var(--dbd-accent, #15803d);
    box-shadow: 0 0 0 3px var(--dbd-accent-ring, rgba(21, 128, 61, .15));
}

.amx-date-field[b-1on825eekt] {
    flex: 1;
    /* Browsers give date inputs an intrinsic width that refuses to shrink; without this the
       field pushes its row wider than the grid column. */
    min-width: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--dbd-fg, #18181b);
    font-size: .85rem;
    font-family: inherit;
}

.amx-date-field[b-1on825eekt]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .55;
    transition: opacity var(--transition-fast, 100ms ease);
}

.amx-date-field[b-1on825eekt]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* The picker glyph is drawn by the browser in its own colours, so invert it in dark mode
   rather than leaving a black icon on a dark field. */
[data-theme="dark"] .amx-date-field[b-1on825eekt]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.amx-date-clear[b-1on825eekt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm, 6px);
    color: var(--dbd-muted, #71717a);
    font-size: .75rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--transition-fast, 100ms ease), color var(--transition-fast, 100ms ease);
}

.amx-date-clear:hover[b-1on825eekt] {
    background-color: var(--accent-danger-soft, #fef2f2);
    color: var(--accent-danger, #dc2626);
}

.amx-date-clear:focus-visible[b-1on825eekt] {
    outline: none;
    box-shadow: 0 0 0 3px var(--dbd-accent-ring, rgba(21, 128, 61, .15));
}

.amx-date.is-disabled[b-1on825eekt] {
    opacity: .5;
    background-color: var(--dbd-subtle, #f4f4f5);
}

.amx-date.is-disabled .amx-date-field[b-1on825eekt] {
    cursor: default;
}
/* /Components/Inputs/AmxSelect.razor.rz.scp.css */
/* ========== AMX SELECT ==========
   Design language §5 (Inputs / selects): hairline border, --radius-md, soft accent
   focus ring, flat surface fill. Tokens fall back to the app defaults so the control
   is usable outside a scoped designer page. */

.amx-select[b-2flslf3kpk] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.amx-select-field[b-2flslf3kpk] {
    width: 100%;
    min-width: 0;
    height: 36px;
    /* Room for the chevron on the right. */
    padding: 0 30px 0 10px;
    border: 1px solid var(--dbd-border-strong, var(--border-interactive));
    border-radius: var(--radius-md, 8px);
    background-color: var(--dbd-surface, var(--bg-card));
    color: var(--dbd-fg, var(--text-primary));
    font-size: .85rem;
    line-height: 1.2;
    cursor: pointer;
    /* The chevron is ours, not the platform's. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color var(--transition-fast, 100ms ease), box-shadow var(--transition-fast, 100ms ease);
}

.amx-select-field:hover:not(:disabled)[b-2flslf3kpk] {
    border-color: var(--dbd-accent, #15803d);
}

.amx-select-field:focus[b-2flslf3kpk],
.amx-select-field:focus-visible[b-2flslf3kpk] {
    outline: 2px solid var(--accent-success-text);
    outline-offset: 2px;
    border-color: var(--dbd-accent, #15803d);
    box-shadow: 0 0 0 3px var(--dbd-accent-ring, rgba(21, 128, 61, .15));
}

.amx-select-caret[b-2flslf3kpk] {
    position: absolute;
    right: 10px;
    color: var(--dbd-muted, #71717a);
    font-size: .625rem;
    pointer-events: none;
    transition: color var(--transition-fast, 100ms ease);
}

.amx-select-field:focus + .amx-select-caret[b-2flslf3kpk] {
    color: var(--dbd-accent, #15803d);
}

/* Disabled keeps its size and label — only the ink drops (§5 Buttons). */
.amx-select.is-disabled .amx-select-field[b-2flslf3kpk],
.amx-select-field:disabled[b-2flslf3kpk] {
    opacity: .5;
    cursor: default;
    background-color: var(--dbd-subtle, #f4f4f5);
}

.amx-select.is-disabled .amx-select-caret[b-2flslf3kpk] {
    opacity: .5;
}

/* Native option lists are painted by the platform; give them the surface colours so a
   dark theme does not drop to a white popup. */
.amx-select-field option[b-2flslf3kpk] {
    background-color: var(--dbd-surface, var(--bg-card));
    color: var(--dbd-fg, var(--text-primary));
}
/* /Components/LandOwnerNotifications/LandOwnerNotificationModal.razor.rz.scp.css */
.lon-form[b-2i7hzjolzz] { display: flex; flex-direction: column; gap: 1rem; color: var(--text-primary); }
.lon-description[b-2i7hzjolzz] { margin: 0; color: var(--text-secondary); }
.lon-dates[b-2i7hzjolzz] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.lon-field[b-2i7hzjolzz] { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.lon-field label[b-2i7hzjolzz] { font-weight: 500; }
.lon-required[b-2i7hzjolzz] { color: var(--text-muted); font-size: .875rem; font-weight: 400; }
.lon-input[b-2i7hzjolzz] { width: 100%; min-width: 0; padding: .5rem .75rem; border: 1px solid var(--border-interactive); border-radius: .375rem; background: var(--bg-card); color: var(--text-primary); }
[data-theme="dark"] .lon-input[b-2i7hzjolzz] { color-scheme: dark; }
.lon-input:focus-visible[b-2i7hzjolzz] { outline: 2px solid var(--border-focus, var(--accent-success-text)); outline-offset: 2px; }
.lon-input[aria-invalid="true"][b-2i7hzjolzz] { border-color: var(--accent-danger-text); }
.lon-error[b-2i7hzjolzz] { margin: 0; color: var(--accent-danger-text); font-size: .875rem; }
@media (max-width: 575px) { .lon-dates[b-2i7hzjolzz] { grid-template-columns: minmax(0, 1fr); } }
/* /Components/Maps/BaseMapComponent.razor.rz.scp.css */
.map-div-wrapper[b-k0ke8v8asw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.map-div-wrapper .loading-map-overlay[b-k0ke8v8asw] {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.5);
}

.map-div[b-k0ke8v8asw] {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.map-wrapper[b-k0ke8v8asw] {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.center-point-icon[b-k0ke8v8asw] {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(0,60,136);
    font-size: 3rem;
    pointer-events: none;
}

/* The failed state, in the same place the spinner was and over the same dimmed map. The banner
   inside it is the map's own (.map-zoom-banner), centred rather than tucked into the corner: this
   is not a note about what the map is doing, it is the whole of what there is to say. */
.map-load-failed[b-k0ke8v8asw] {
    background-color: var(--bg-secondary);
}

.map-load-failed .map-load-failed-banner[b-k0ke8v8asw] {
    position: static;
    max-width: min(30rem, calc(100% - 2rem));
}

.map-load-failed .map-zoom-banner-icon[b-k0ke8v8asw] {
    color: var(--accent-warning);
}

.map-fullscreen-wrapper[b-k0ke8v8asw] {
    height: 100%;
    width: 100%;
    /* Positioning context for the heatmap settings panel (position:absolute), which is moved
       into this wrapper alongside the map when the map goes fullscreen. */
    position: relative;
}

[b-k0ke8v8asw] .map-route-planner-btn.hidden {
    display: none !important;
}

/* ── The map toolbar (mapToolbar.js) ─────────────────────────────────────────────────────────

   One labelled bar across the top of the map, replacing the column of identical 36px icon squares
   that used to run down the left - see "Map controls" in DESIGN_LANGUAGE.md. The controls are the
   same ones; each is handed a slot in the bar, or the body of the Show or Tools menu, as its
   OpenLayers target, so their look here comes from where they sit rather than from a rule of their
   own. The bar is the app's own card surface: the map's blue now belongs to the cluster markers
   alone. Its height is --map-toolbar-height (app.css), and anything that has to clear it - the
   zoom banner, the heat map panel, the search-marker link - is placed from --map-toolbar-offset. */
[b-k0ke8v8asw] .amx-map-toolbar {
    position: absolute;
    z-index: 3;
    /* As wide as what is on it, up to the map's width - or less, where two bars share an edge
       (shareEdges in mapToolbar.js sets the share as an inline max-width). */
    max-width: calc(100% - 16px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: var(--map-toolbar-height, 42px);
    padding: 3px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    font-size: 0.8125rem;
    /* The stop-event container it hangs in passes pointer events through to the map; the bar
       takes its own. */
    pointer-events: auto;
}

[b-k0ke8v8asw] .amx-map-toolbar[hidden] {
    display: none;
}

/* ── The bottom bar (the dock in mapToolbar.js) ──
   Copied from the chosen design (Map Bottom Bar, concept A). Every tool and the
   navigation in one bar, 56px tall, along the whole bottom edge of the map, on the card surface with
   a hairline above it - nothing floats over the map's corners. The layout's corners are its groups:
   the left-hand ones at its start, the right-hand ones at its end (the report data switch, by
   default), then the navigation. Each tool is its icon over its word, the way a dock
   reads; the open one is washed green with a notch along its top edge, where the menu or panel it
   opened meets the bar. The groups give up width in their own order (layoutBar) when the map is too
   narrow for them all. */
[b-k0ke8v8asw] .amx-map-dock {
    --dock-accent: var(--accent-success-fill);
    --dock-accent-text: var(--accent-success-text);
    --dock-accent-wash: color-mix(in srgb, var(--accent-success-fill) 11%, transparent);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 2px;
    height: var(--map-dock-height, 56px);
    padding: 0 8px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-top: 1px solid var(--border-color);
    font-size: 0.8125rem;
    pointer-events: auto;
}

[b-k0ke8v8asw] .amx-map-dock-start,
[b-k0ke8v8asw] .amx-map-dock-end {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    height: 100%;
}

/* The start takes what is left and gives way when the map is narrow (into More, then to icons); the
   end - report data - keeps what it needs, so it is never clipped. */
[b-k0ke8v8asw] .amx-map-dock-start {
    flex: 1 1 auto;
}

[b-k0ke8v8asw] .amx-map-dock-end {
    flex: none;
    justify-content: flex-end;
}

[b-k0ke8v8asw] .amx-map-dock-end .amx-map-toolbar {
    flex: none;
}

[b-k0ke8v8asw] .amx-map-dock-tail {
    display: flex;
    align-items: center;
    flex: none;
    height: 100%;
}

/* A group on the bar: its tools in a row, with no surface of its own - the bar is the surface. */
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar {
    position: static;
    flex: 0 1 auto;
    min-width: 0;
    max-width: none;
    height: 100%;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main {
    height: 100%;
    gap: 2px;
}

/* The bar does not fold (setCollapsed in mapToolbar.js), so it has no fold toggle. */
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-slot[data-slot="collapse"] {
    display: none;
}

/* A tool: its icon over its word, 48px tall - as a running tool ("Stop measuring"). Anywhere else on
   the bar it is its icon alone (further down). */
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main > .amx-map-toolbar-slot > .custom-map-control,
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main > .amx-map-toolbar-slot > .toggle-custom-map-control,
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main > .amx-map-toolbar-slot > .amx-map-toolbar-btn {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: auto;
    min-width: 48px;
    height: 48px;
    padding: 4px 5px 3px;
    color: var(--text-secondary);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
}

[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main > .amx-map-toolbar-slot > .custom-map-control i,
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main > .amx-map-toolbar-slot > .toggle-custom-map-control i,
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main > .amx-map-toolbar-slot > .amx-map-toolbar-btn i {
    font-size: 16px;
}

[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main > .amx-map-toolbar-slot > .custom-map-control:hover,
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main > .amx-map-toolbar-slot > .toggle-custom-map-control:hover,
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main > .amx-map-toolbar-slot > .amx-map-toolbar-btn:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

/* The menus open as their own panel above the bar, so their button carries no chevron. */
[b-k0ke8v8asw] .amx-map-dock .amx-map-menu-chevron {
    display: none;
}

/* Open, and on (a toggle on the bar): washed green. Open also gets the notch. */
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main > .amx-map-toolbar-slot > [aria-expanded="true"],
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main > .amx-map-toolbar-slot:not(.amx-map-toolbar-menu-slot) > .custom-map-control.enabled {
    background-color: var(--dock-accent-wash);
    color: var(--dock-accent-text);
}

[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main > .amx-map-toolbar-slot > [aria-expanded="true"]::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: -8px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background-color: var(--dock-accent);
}

/* A count on a tool (the layers switched on): a small green badge on its icon's top-right corner,
   ringed in the bar's colour, the way the main toolbar's messages badge sits on its icon. Scoped to
   the tool itself so it outranks the pill-after-the-word rule for .amx-map-toolbar further down,
   which otherwise drops the count into the column under the word. */
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main > .amx-map-toolbar-slot > .custom-map-control > .map-control-count,
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main > .amx-map-toolbar-slot > .toggle-custom-map-control > .map-control-count,
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main > .amx-map-toolbar-slot > .amx-map-toolbar-btn > .map-control-count {
    position: absolute;
    top: 2px;
    left: calc(50% + 3px);
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background-color: var(--dock-accent);
    color: var(--text-on-dark);
    border: 2px solid var(--bg-card);
    border-radius: 999px;
    font-size: 9.5px;
}

/* Search: a tool like every other on the bar - its full name ("Search the map, including
   What3Words") is its tip. The field it opens is in its panel, so the field's placeholder hint has no
   place here. */
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar .amx-map-toolbar-main > .amx-map-toolbar-slot[data-slot="search"] .map-search-control {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: auto;
    min-width: 48px;
    height: 48px;
    margin-right: 0;
    padding: 4px 5px 3px;
    background-color: transparent;
    color: var(--text-secondary);
    border: 0;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
}

[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar .amx-map-toolbar-main > .amx-map-toolbar-slot[data-slot="search"] .map-search-control:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar .amx-map-toolbar-main > .amx-map-toolbar-slot[data-slot="search"] .map-search-control i {
    font-size: 16px;
}

/* Hidden rather than removed: the button's aria-describedby still reads it out. */
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar .amx-map-toolbar-main > .amx-map-toolbar-slot[data-slot="search"] .map-search-control .amx-map-control-hint {
    display: none;
}

/* Its open state (the Search panel up), as every other tool's: washed green, notched. */
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar .amx-map-toolbar-main > .amx-map-toolbar-slot[data-slot="search"] .map-search-control[aria-expanded="true"] {
    background-color: var(--dock-accent-wash);
    color: var(--dock-accent-text);
}

/* The rule after Tools - or after select by area, a tool of the same group, on a report's map: what
   follows - Pin, Export and Settings by default - is a second group. The select slot is still there,
   empty, on a map without it, so the rule passes over it either way. */
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main > [data-slot="tools"] + .amx-map-toolbar-slot:not([data-slot="select"]):not([data-slot="more"]):not([data-slot="collapse"]),
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main > [data-slot="tools"] + [data-slot="select"] + .amx-map-toolbar-slot:not([data-slot="more"]):not([data-slot="collapse"]) {
    margin-left: 7px;
}

[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main > [data-slot="tools"] + .amx-map-toolbar-slot:not([data-slot="select"]):not([data-slot="more"]):not([data-slot="collapse"])::before,
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main > [data-slot="tools"] + [data-slot="select"] + .amx-map-toolbar-slot:not([data-slot="more"]):not([data-slot="collapse"])::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 50%;
    width: 1px;
    height: 32px;
    transform: translateY(-50%);
    background-color: var(--border-color);
}

/* Report data: the three ways as icons in a segmented switch; each keeps its words for a screen
   reader (clipped, as .is-tight does). */
[b-k0ke8v8asw] .amx-map-dock .map-data-split-control {
    padding: 3px;
    gap: 2px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

[b-k0ke8v8asw] .amx-map-dock .map-data-split-option {
    width: 32px;
    height: 30px;
    padding: 0;
    justify-content: center;
}

[b-k0ke8v8asw] .amx-map-dock .map-data-split-option .amx-map-control-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

[b-k0ke8v8asw] .amx-map-dock .map-data-split-input:checked + .map-data-split-option {
    background-color: var(--bg-card);
    color: var(--dock-accent-text);
    box-shadow: var(--shadow-sm);
}

/* The navigation, after a rule, at the end of the bar. */
[b-k0ke8v8asw] .amx-map-dock .map-corner-bottom {
    position: relative;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    margin-left: 7px;
}

[b-k0ke8v8asw] .amx-map-dock .map-corner-bottom::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 50%;
    width: 1px;
    height: 32px;
    transform: translateY(-50%);
    background-color: var(--border-color);
}

/* The navigation: one bordered group - my location, zoom to fit, full screen, a rule, then zoom out,
   the zoom level and zoom in. */
[b-k0ke8v8asw] .amx-map-dock .amx-map-nav {
    flex-direction: row;
    align-items: center;
    gap: 1px;
    padding: 2px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

[b-k0ke8v8asw] .amx-map-dock .amx-map-nav-group {
    flex-direction: row;
    align-items: center;
    gap: 1px;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

[b-k0ke8v8asw] .amx-map-dock .amx-map-nav-tools:not(:empty) + .amx-map-nav-zoom {
    margin-left: 2px;
    padding-left: 3px;
    border-left: 1px solid var(--border-color);
}

[b-k0ke8v8asw] .amx-map-dock .amx-map-nav-tools .show-user-location-control { order: 1; }
[b-k0ke8v8asw] .amx-map-dock .amx-map-nav-tools .user-location-control { order: 2; }
[b-k0ke8v8asw] .amx-map-dock .amx-map-nav-tools .zoom-to-fit-control { order: 3; }
[b-k0ke8v8asw] .amx-map-dock .amx-map-nav-tools .fullscreen-map-control { order: 4; }

[b-k0ke8v8asw] .amx-map-dock .amx-map-nav .custom-map-control,
[b-k0ke8v8asw] .amx-map-dock .amx-map-nav .ol-zoom button {
    color: var(--text-secondary);
}

[b-k0ke8v8asw] .amx-map-dock .amx-map-nav .custom-map-control:hover,
[b-k0ke8v8asw] .amx-map-dock .amx-map-nav .ol-zoom button:hover {
    color: var(--text-primary);
}

/* In a row, zoom out, the zoom level, then zoom in - smaller to larger, left to right. */
[b-k0ke8v8asw] .amx-map-dock .amx-map-nav .ol-zoom-out { order: 1; }
[b-k0ke8v8asw] .amx-map-dock .amx-map-nav .map-zoom-level-control { order: 2; }
[b-k0ke8v8asw] .amx-map-dock .amx-map-nav .ol-zoom-in { order: 3; }

/* 28px, not 26: the UI scale draws it at 25px, clear of WCAG's 24px target minimum. */
[b-k0ke8v8asw] .amx-map-dock .map-zoom-level-button {
    min-width: 28px;
    height: 32px;
    color: var(--text-primary);
    font-size: 11px;
}


/* ── The side dock: the same tools as floating pills down the map's right-hand edge ──
   Where the map is tall enough (SIDE_DOCK_MIN_HEIGHT in mapToolbar.js) the dock lies over the map
   down its right-hand side, 8px in from the edges, with no surface of its own: each tool is a 36px
   circle on the card surface - its icon alone, hairline border, light shadow, its name sliding out to
   its left on hover and focus (the toolbar's tip) - stacked from the top and right-aligned. The
   report data switch is a pill of its own at the very top, and the navigation sits at the foot as
   pills too. The dock itself takes no pointer events, so the map between the pills is still the map;
   the pills take theirs. Menus and panels open to the dock's left, level with their button; open
   (and on) is the green wash with a green edge. Out of height the least used tools go into More
   first, then the navigation lies across, then the circles wrap into columns. Only a mini map
   (data-mini-map) has the bottom bar. */
[b-k0ke8v8asw] .amx-map-dock.is-side {
    top: 8px;
    left: auto;
    right: 8px;
    bottom: 8px;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: auto;
    height: auto;
    padding: 0;
    background-color: transparent;
    border: 0;
    pointer-events: none;
}

[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-dock-start,
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-dock-end,
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-dock-tail {
    flex-direction: column;
    align-items: flex-end;
    width: auto;
    height: auto;
    min-height: 0;
}

[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-dock-start {
    flex: 1 1 auto;
    justify-content: flex-start;
}

[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-dock-end,
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-dock-tail {
    flex: none;
}

/* The report data switch (the split view: map only, data below, data beside) at the very top,
   above Search - it changes the whole page's layout, not something on the map. */
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-dock-end {
    order: -1;
}

/* A map without the switch (anything but the report's map tab) leaves no gap above Search. The
   switch is all there is at the bar's end; the end's other bar only holds the bottom bar's fold
   toggle, which this dock does not draw. */
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-dock-end:not(:has(.map-data-split-control)) {
    display: none;
}

[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-dock-end .amx-map-toolbar:not(:has(.map-data-split-control)) {
    display: none;
}

[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar {
    flex-direction: column;
    align-items: flex-end;
    flex: 0 1 auto;
    width: auto;
    height: auto;
    min-height: 0;
    max-height: 100%;
    pointer-events: none;
}

/* The pills' shadows and focus rings need room inside the list, which clips what does not fit. */
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 3px 3px 6px 8px;
}

[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-slot {
    flex-direction: column;
    align-items: flex-end;
}

/* A tool: on the card surface, a pill - a circle, its icon alone (below), but for a running tool,
   which keeps its icon beside its words. */
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main > .amx-map-toolbar-slot > .custom-map-control,
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main > .amx-map-toolbar-slot > .toggle-custom-map-control,
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main > .amx-map-toolbar-slot > .amx-map-toolbar-btn,
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar .amx-map-toolbar-main > .amx-map-toolbar-slot[data-slot="search"] .map-search-control {
    flex-direction: row;
    justify-content: flex-start;
    gap: 7px;
    width: auto;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0 14px 0 12px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: var(--shadow-sm), 0 2px 6px rgba(16, 24, 40, 0.08);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: auto;
}

[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main > .amx-map-toolbar-slot > .custom-map-control i,
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main > .amx-map-toolbar-slot > .toggle-custom-map-control i,
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main > .amx-map-toolbar-slot > .amx-map-toolbar-btn i,
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar .amx-map-toolbar-main > .amx-map-toolbar-slot[data-slot="search"] .map-search-control i {
    font-size: 14px;
    color: var(--text-secondary);
}

[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main > .amx-map-toolbar-slot > .custom-map-control:hover,
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main > .amx-map-toolbar-slot > .toggle-custom-map-control:hover,
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main > .amx-map-toolbar-slot > .amx-map-toolbar-btn:hover,
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar .amx-map-toolbar-main > .amx-map-toolbar-slot[data-slot="search"] .map-search-control:hover {
    background-color: var(--bg-hover);
}

/* Open, and on: the green wash on the card, with a green edge - no notch, nothing to meet. */
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main > .amx-map-toolbar-slot > [aria-expanded="true"],
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main > .amx-map-toolbar-slot:not(.amx-map-toolbar-menu-slot) > .custom-map-control.enabled,
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar .amx-map-toolbar-main > .amx-map-toolbar-slot[data-slot="search"] .map-search-control[aria-expanded="true"] {
    background-color: color-mix(in srgb, var(--accent-success-fill) 11%, var(--bg-card));
    color: var(--dock-accent-text);
    border-color: var(--dock-accent-text);
}

[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main > .amx-map-toolbar-slot > [aria-expanded="true"] i,
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main > .amx-map-toolbar-slot:not(.amx-map-toolbar-menu-slot) > .custom-map-control.enabled i {
    color: var(--dock-accent-text);
}

[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main > .amx-map-toolbar-slot > [aria-expanded="true"]::before {
    display: none;
}

/* A count (the layers switched on): the badge on the pill's icon. */
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main > .amx-map-toolbar-slot > .custom-map-control > .map-control-count,
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main > .amx-map-toolbar-slot > .toggle-custom-map-control > .map-control-count,
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main > .amx-map-toolbar-slot > .amx-map-toolbar-btn > .map-control-count {
    top: -7px;
    left: 18px;
}

/* The rule after Tools (or select by area) is a wider gap between pills instead. */
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main > [data-slot="tools"] + .amx-map-toolbar-slot:not([data-slot="select"]):not([data-slot="more"]):not([data-slot="collapse"]),
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main > [data-slot="tools"] + [data-slot="select"] + .amx-map-toolbar-slot:not([data-slot="more"]):not([data-slot="collapse"]) {
    margin-left: 0;
    margin-top: 6px;
}

[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main > [data-slot="tools"] + .amx-map-toolbar-slot:not([data-slot="select"]):not([data-slot="more"]):not([data-slot="collapse"])::before,
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main > [data-slot="tools"] + [data-slot="select"] + .amx-map-toolbar-slot:not([data-slot="more"]):not([data-slot="collapse"])::before {
    display: none;
}

/* Report data: a pill-shaped switch of its own. */
[b-k0ke8v8asw] .amx-map-dock.is-side .map-data-split-control {
    padding: 3px;
    background-color: var(--bg-card);
    border-radius: 999px;
    box-shadow: var(--shadow-sm), 0 2px 6px rgba(16, 24, 40, 0.08);
    pointer-events: auto;
}

[b-k0ke8v8asw] .amx-map-dock.is-side .map-data-split-option {
    border-radius: 999px;
}

[b-k0ke8v8asw] .amx-map-dock.is-side .map-data-split-input:checked + .map-data-split-option {
    background-color: color-mix(in srgb, var(--accent-success-fill) 11%, var(--bg-card));
    box-shadow: none;
}

/* The navigation at the foot, as pills, no rule. */
[b-k0ke8v8asw] .amx-map-dock.is-side .map-corner-bottom {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    margin-left: 0;
}

[b-k0ke8v8asw] .amx-map-dock.is-side .map-corner-bottom::before {
    display: none;
}

/* My location, zoom to fit and full screen in one pill; zoom in, the level and zoom out in another -
   larger at the top, as a vertical zoom reads. */
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-nav {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding: 0;
    border: 0;
}

[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-nav-group {
    flex-direction: column;
    padding: 3px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: var(--shadow-sm), 0 2px 6px rgba(16, 24, 40, 0.08);
    pointer-events: auto;
}

[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-nav-tools:not(:empty) + .amx-map-nav-zoom {
    margin-left: 0;
    padding-left: 3px;
    border-left: 1px solid var(--border-color);
}

[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-nav .custom-map-control,
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-nav .ol-zoom button {
    border-radius: 999px;
}

[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-nav .ol-zoom-in { order: 1; }
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-nav .map-zoom-level-control { order: 2; }
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-nav .ol-zoom-out { order: 3; }

/* A short map (split view, 400% zoom) squeezes the side dock rather than leave it - squeezeSide in
   mapToolbar.js. First the navigation's two pills lie across: zoom out, the level, zoom in, smaller
   to larger as a row reads. */
[b-k0ke8v8asw] .amx-map-dock.is-side.is-squeezed .amx-map-nav-group {
    flex-direction: row;
}

[b-k0ke8v8asw] .amx-map-dock.is-side.is-squeezed .amx-map-nav .ol-zoom-out { order: 1; }
[b-k0ke8v8asw] .amx-map-dock.is-side.is-squeezed .amx-map-nav .map-zoom-level-control { order: 2; }
[b-k0ke8v8asw] .amx-map-dock.is-side.is-squeezed .amx-map-nav .ol-zoom-in { order: 3; }

/* Then the tool circles wrap into columns, right to left, as many rows as the height takes (the
   rows are set by the script). The grid runs right to left; each tool inside it reads as usual. */
[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main.is-wrapped {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 36px;
    gap: 6px;
    justify-items: end;
    direction: rtl;
}

[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar-main.is-wrapped > * {
    direction: ltr;
}

/* The navigation's hints slide out to the left of their button, over the map. */
[b-k0ke8v8asw] .amx-map-dock.is-side .map-control-label {
    top: 50%;
    right: calc(100% + 10px);
    bottom: auto;
    transform: translateY(-50%);
}

/* On the bar every tool is its icon alone - a 40px square along the bottom, a 36px circle down the
   side - and its name slides out beside it on hover and keyboard focus (the toolbar's tip, below), as
   the navigation's buttons' do. Its word stays for a screen reader, and shows in a menu. Not on a
   running tool, which says "Stop ..." in words: that is the one thing it then does. After the side
   dock's and the search tool's rules, and each as specific as the one it has to beat (the side dock's
   search pill, for the circle), so these win. */
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar .amx-map-toolbar-main > .amx-map-toolbar-slot > :is(.custom-map-control, .toggle-custom-map-control, .amx-map-toolbar-btn):not(.active) {
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
}

[b-k0ke8v8asw] .amx-map-dock.is-side .amx-map-toolbar .amx-map-toolbar-main > .amx-map-toolbar-slot > :is(.custom-map-control, .toggle-custom-map-control, .amx-map-toolbar-btn):not(.active) {
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
}

[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar .amx-map-toolbar-main > .amx-map-toolbar-slot > :is(.custom-map-control, .toggle-custom-map-control, .amx-map-toolbar-btn):not(.active) > .amx-map-control-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

[b-k0ke8v8asw] .amx-map-toolbar-main {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

[b-k0ke8v8asw] .amx-map-toolbar-slot {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
}

/* A slot with nothing in it, or a menu with nothing to offer, leaves no gap. */
[b-k0ke8v8asw] .amx-map-toolbar-slot:empty,
[b-k0ke8v8asw] .amx-map-toolbar-slot[hidden] {
    display: none;
}


[b-k0ke8v8asw] .amx-map-toolbar-slot[data-slot="collapse"] {
    margin-left: 2px;
    padding-left: 4px;
    border-left: 1px solid var(--border-color);
}

[b-k0ke8v8asw] .amx-map-toolbar.is-collapsed .amx-map-toolbar-main > :not([data-slot="collapse"]) {
    display: none !important;
}

[b-k0ke8v8asw] .amx-map-toolbar.is-collapsed .amx-map-toolbar-slot[data-slot="collapse"] {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}

/* Every button on the bar: flat until touched, a word beside its icon. */
[b-k0ke8v8asw] .amx-map-toolbar .custom-map-control,
[b-k0ke8v8asw] .amx-map-toolbar .toggle-custom-map-control,
[b-k0ke8v8asw] .amx-map-toolbar-btn {
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto;
    height: 34px;
    margin: 0;
    padding: 0 10px;
    background-color: transparent;
    color: var(--text-primary);
    border: 0;
    border-radius: 6px;
    box-shadow: none;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 550;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

[b-k0ke8v8asw] .amx-map-toolbar .custom-map-control.is-icon-only,
[b-k0ke8v8asw] .amx-map-toolbar .toggle-custom-map-control.is-icon-only,
[b-k0ke8v8asw] .amx-map-toolbar-btn[aria-label] {
    width: 34px;
    padding: 0;
}

[b-k0ke8v8asw] .amx-map-toolbar .custom-map-control:hover,
[b-k0ke8v8asw] .amx-map-toolbar .toggle-custom-map-control:hover,
[b-k0ke8v8asw] .amx-map-toolbar-btn:hover {
    background-color: var(--bg-hover);
}

[b-k0ke8v8asw] .amx-map-toolbar .custom-map-control:focus-visible,
[b-k0ke8v8asw] .amx-map-toolbar .toggle-custom-map-control:focus-visible,
[b-k0ke8v8asw] .amx-map-toolbar-btn:focus-visible {
    outline: 3px solid var(--accent-primary);
    outline-offset: -1px;
}

[b-k0ke8v8asw] .amx-map-toolbar .custom-map-control i,
[b-k0ke8v8asw] .amx-map-toolbar .toggle-custom-map-control i,
[b-k0ke8v8asw] .amx-map-toolbar-btn i {
    flex: none;
    width: 1.1em;
    color: inherit;
    font-size: 14px;
    text-align: center;
    pointer-events: none;
}

[b-k0ke8v8asw] .amx-map-menu-chevron {
    font-size: 9px !important;
    color: var(--text-secondary) !important;
}

/* An open menu's button, a control whose drop-down panel is open, and a control in the bar that is
   on - the key while it is hiding some of the categories. */
[b-k0ke8v8asw] .amx-map-toolbar-btn[aria-expanded="true"],
[b-k0ke8v8asw] .amx-map-toolbar .custom-map-control[aria-expanded="true"],
[b-k0ke8v8asw] .amx-map-toolbar-main > .amx-map-toolbar-slot:not(.amx-map-toolbar-menu-slot) > .custom-map-control.enabled {
    background-color: var(--accent-wash);
    color: var(--accent-link);
}

/* A running tool, lifted out of the Tools menu onto the bar until it is stopped: the stop colour,
   and its label says "Stop ...". */
[b-k0ke8v8asw] .amx-map-toolbar-main > .custom-map-control.active {
    background-color: var(--map-control-stop);
    color: var(--map-control-state-fg);
}

/* A control's line of description: in the menus, under its word (below); in the bar, hidden -
   except the search control's, which makes the entry read as the field it opens. */
[b-k0ke8v8asw] .amx-map-control-hint {
    display: none;
}

/* The words that finish a control's text where there is room for them (mapControlLabels.js's
   TOOLBAR_TEXT_MORE): "Pin" on the bar, "Pin the map" in a menu. */
[b-k0ke8v8asw] .amx-map-control-text-more {
    display: none;
}

[b-k0ke8v8asw] .amx-map-menu .amx-map-control-text-more {
    display: inline;
}

[b-k0ke8v8asw] .amx-map-toolbar-main > .amx-map-toolbar-slot[data-slot="search"] .map-search-control {
    min-width: 240px;
    justify-content: flex-start;
    margin-right: 4px;
    background-color: var(--bg-input);
    border: 1px solid var(--field-border-view);
}

[b-k0ke8v8asw] .amx-map-toolbar-main > .amx-map-toolbar-slot[data-slot="search"] .map-search-control:hover {
    border-color: var(--field-border);
    background-color: var(--bg-input);
}

[b-k0ke8v8asw] .amx-map-toolbar-main > .amx-map-toolbar-slot[data-slot="search"] .map-search-control .amx-map-control-hint {
    display: inline;
    margin-left: 4px;
    color: var(--text-muted);
    font-weight: 400;
}

/* Tight: the search field narrows to its word, and the report data switch to its icons. */
[b-k0ke8v8asw] .amx-map-toolbar.is-tight .amx-map-toolbar-main > .amx-map-toolbar-slot[data-slot="search"] .map-search-control {
    min-width: 0;
}

[b-k0ke8v8asw] .amx-map-toolbar.is-tight .amx-map-toolbar-main > .amx-map-toolbar-slot[data-slot="search"] .map-search-control .amx-map-control-hint,
[b-k0ke8v8asw] .amx-map-toolbar.is-tight .amx-map-toolbar-main > .amx-map-toolbar-slot[data-slot="data"] .amx-map-control-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

[b-k0ke8v8asw] .amx-map-toolbar.is-tight .map-data-split-option {
    padding: 0 8px;
}

[b-k0ke8v8asw] .amx-map-toolbar.is-compact .amx-map-toolbar-main > .amx-map-toolbar-slot[data-slot="search"] .map-search-control {
    min-width: 0;
    margin-right: 0;
    background-color: transparent;
    border-color: transparent;
}

/* The layers count, as a pill after the word rather than a badge on the corner of a square. */
[b-k0ke8v8asw] .amx-map-toolbar .map-control-count {
    position: static;
    box-shadow: none;
}

/* No label of its own on a tool in the toolbar: the bar clips what hangs out of its tools, so it
   names them with its one tip instead (.amx-map-tool-tip), and a menu row has its words. */
[b-k0ke8v8asw] .amx-map-toolbar .map-control-label {
    display: none !important;
}

/* Out of width: the words go from the entries that read well as an icon (they keep their accessible
   name), leaving Show and Tools - the two people look for - spelled out. Past that, entries move
   into More. */
[b-k0ke8v8asw] .amx-map-toolbar.is-compact .amx-map-toolbar-main > .amx-map-toolbar-slot:not(.amx-map-toolbar-menu-slot) .amx-map-control-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

[b-k0ke8v8asw] .amx-map-toolbar.is-compact .amx-map-toolbar-main > .amx-map-toolbar-slot:not(.amx-map-toolbar-menu-slot) .custom-map-control {
    width: 34px;
    padding: 0;
}

/* On a crowded bar the tools pack closer, 36px rather than 40 - Show, Tools and More too on a crammed
   mini map. As specific as the rule that sizes them, and after it. */
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar.is-compact .amx-map-toolbar-main > .amx-map-toolbar-slot:not(.amx-map-toolbar-menu-slot) > .custom-map-control,
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar.is-compact .amx-map-toolbar-main > .amx-map-toolbar-slot:not(.amx-map-toolbar-menu-slot) > .toggle-custom-map-control,
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar.is-compact .amx-map-toolbar-main > .amx-map-toolbar-slot[data-slot="search"] .map-search-control,
[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar.is-crammed .amx-map-toolbar-main > .amx-map-toolbar-slot.amx-map-toolbar-menu-slot > .amx-map-toolbar-btn {
    width: 36px;
    min-width: 36px;
    padding: 0;
}

/* A mini map whose bar still does not fit lifts the navigation off it (squeezeBottom): one row on
   a card, floating just above the bar at the bottom-right, so the bar has its whole width for the
   tools before any essential has to go into More. */
[b-k0ke8v8asw] .amx-map-dock.is-nav-above .amx-map-dock-tail {
    position: absolute;
    right: 8px;
    bottom: calc(100% + 8px);
    height: auto;
}

[b-k0ke8v8asw] .amx-map-dock.is-nav-above .map-corner-bottom {
    margin-left: 0;
}

[b-k0ke8v8asw] .amx-map-dock.is-nav-above .map-corner-bottom::before {
    display: none;
}

[b-k0ke8v8asw] .amx-map-dock.is-nav-above .amx-map-nav {
    background-color: var(--bg-card);
    box-shadow: var(--shadow-md);
}

/* ── Show, Tools and More ──
   Popovers in the top layer, placed by positionMenu, so a small map does not cut them off. */
[b-k0ke8v8asw] .amx-map-menu {
    position: fixed;
    inset: auto;
    box-sizing: border-box;
    min-width: 260px;
    max-width: min(340px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
    margin: 0;
    padding: 6px;
    overflow: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    font-size: 0.8125rem;
    pointer-events: auto;
}

[b-k0ke8v8asw] .amx-map-menu:popover-open {
    display: flex;
}

/* Without the popover API it opens in place, under its button. */
[b-k0ke8v8asw] .amx-map-menu:not([popover]) {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    display: flex;
}

[b-k0ke8v8asw] .amx-map-menu:not([popover])[hidden] {
    display: none;
}

/* A control in a menu is a row: icon, words, and a switch for the ones that toggle. */
[b-k0ke8v8asw] .amx-map-menu .custom-map-control,
[b-k0ke8v8asw] .amx-map-menu .toggle-custom-map-control {
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    height: auto;
    min-height: 34px;
    padding: 6px 8px;
    font-weight: 500;
    text-align: left;
}

[b-k0ke8v8asw] .amx-map-menu .custom-map-control i {
    color: var(--text-secondary);
}

[b-k0ke8v8asw] .amx-map-menu .amx-map-control-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    line-height: 1.25;
}

[b-k0ke8v8asw] .amx-map-menu .amx-map-control-hint {
    display: block;
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 400;
}

/* A group's heading inside a menu - a quiet caption, like the app's field labels. */
[b-k0ke8v8asw] .amx-map-menu-heading {
    padding: 6px 8px 2px;
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[b-k0ke8v8asw] .amx-map-menu-heading[hidden] {
    display: none;
}

[b-k0ke8v8asw] .amx-map-menu .amx-map-menu-heading + .amx-map-menu-heading {
    margin-top: 0;
}

/* The switch: a track, and a knob that slides across it. The fill is the map's "on" green in both
   themes, the same as a control that is on anywhere else on the map. */
[b-k0ke8v8asw] .amx-map-menu .custom-map-control[aria-pressed]::after {
    content: "";
    flex: none;
    width: 30px;
    height: 18px;
    margin-left: auto;
    border-radius: 999px;
    background-color: var(--border-interactive);
    transition: background-color 0.1s ease;
}

[b-k0ke8v8asw] .amx-map-menu .custom-map-control[aria-pressed]::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 22px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 50%;
    background-color: var(--map-control-state-fg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: right 0.1s ease;
}

[b-k0ke8v8asw] .amx-map-menu .custom-map-control[aria-pressed="true"]::after {
    background-color: var(--map-control-on);
}

[b-k0ke8v8asw] .amx-map-menu .custom-map-control[aria-pressed="true"]::before {
    right: 10px;
}

@media (prefers-reduced-motion: reduce) {
    [b-k0ke8v8asw] .amx-map-menu .custom-map-control[aria-pressed]::after,
    [b-k0ke8v8asw] .amx-map-menu .custom-map-control[aria-pressed]::before {
        transition: none;
    }
}

/* A menu's tools are in the order the toolbar puts them (LAYOUT in mapToolbar.js), and each group
   heading sits before the first tool of its group (updateMenus) - nothing here reorders them. The
   second heading in Tools is spaced off the group above it. */
[b-k0ke8v8asw] .amx-map-menu .amx-map-toolbar-slot + .amx-map-menu-heading {
    margin-top: 6px;
}

/* More holds whole slots moved off the bar; their controls are rows like any other menu's. */
[b-k0ke8v8asw] .amx-map-menu .amx-map-toolbar-slot {
    flex-direction: column;
    align-items: stretch;
}

[b-k0ke8v8asw] .amx-map-menu .amx-map-toolbar-slot[data-slot="data"] {
    padding: 4px 8px;
}

/* ── Report data: Map | Data below | Data beside ──
   The app's segmented control on native radios: the inputs clipped (not display:none, which would
   drop them from the tab order), the chosen one drawn from :checked + label. */
[b-k0ke8v8asw] .map-data-split-control {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

[b-k0ke8v8asw] .map-data-split-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

[b-k0ke8v8asw] .map-data-split-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    margin: 0;
    padding: 0 9px;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

[b-k0ke8v8asw] .map-data-split-option:hover {
    color: var(--text-primary);
}

[b-k0ke8v8asw] .map-data-split-input:checked + .map-data-split-option {
    background-color: var(--bg-card);
    color: var(--accent-link);
    box-shadow: var(--shadow-sm);
}

[b-k0ke8v8asw] .map-data-split-input:focus-visible + .map-data-split-option {
    outline: 3px solid var(--accent-primary);
    outline-offset: -1px;
}

/* ── The bottom-right corner ──
   The navigation cluster (createMapNavCluster): zoom in, the
   zoom level and zoom out, and above them zoom to fit, full screen and the location controls. One
   stack, so nothing in it has to know the width of anything beside it - the zoom level's width
   changes with the number. The corner itself passes pointer events through to the map; only its
   buttons take them. */
[b-k0ke8v8asw] .map-corner-controls {
    position: absolute;
    right: 8px;
    /* Clear of a bar in the bottom-right corner only - all the way down when there is none. */
    bottom: var(--map-offset-bottomRight, 8px);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}

[b-k0ke8v8asw] .map-corner-bottom {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
}

[b-k0ke8v8asw] .amx-map-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

[b-k0ke8v8asw] .amx-map-nav-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    pointer-events: auto;
}

[b-k0ke8v8asw] .amx-map-nav-group:empty {
    display: none;
}

[b-k0ke8v8asw] .amx-map-nav-tools .fullscreen-map-control { order: 1; }
[b-k0ke8v8asw] .amx-map-nav-tools .zoom-to-fit-control { order: 2; }
[b-k0ke8v8asw] .amx-map-nav-tools .show-user-location-control { order: 3; }
[b-k0ke8v8asw] .amx-map-nav-tools .user-location-control { order: 4; }

/* A map too short for the column (see SHORT_MAP_HEIGHT in mapToolbar.js) lays the cluster out as
   one row along the bottom, so it never reaches up into the toolbar. */
[b-k0ke8v8asw] .is-short-map .amx-map-nav,
[b-k0ke8v8asw] .is-short-map .amx-map-nav-group {
    flex-direction: row;
}

[b-k0ke8v8asw] .is-short-map .amx-map-nav {
    align-items: flex-end;
}

/* OpenLayers' own zoom buttons, moved in from the top-left. The wrapper steps aside so the two
   buttons and the zoom level between them are laid out as one column. */
[b-k0ke8v8asw] .amx-map-nav .ol-zoom {
    position: static;
    display: contents;
}

[b-k0ke8v8asw] .amx-map-nav .ol-zoom-in { order: 1; }
[b-k0ke8v8asw] .amx-map-nav .map-zoom-level-control { order: 2; }
[b-k0ke8v8asw] .amx-map-nav .ol-zoom-out { order: 3; }

[b-k0ke8v8asw] .amx-map-nav .custom-map-control,
[b-k0ke8v8asw] .amx-map-nav .ol-zoom button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    background-color: transparent;
    color: var(--text-primary);
    border: 0;
    border-radius: 6px;
    box-shadow: none;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

[b-k0ke8v8asw] .amx-map-nav .ol-zoom button {
    font-size: 1.25rem;
    font-weight: 500;
}

[b-k0ke8v8asw] .amx-map-nav .custom-map-control:hover,
[b-k0ke8v8asw] .amx-map-nav .ol-zoom button:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    outline: none;
}

[b-k0ke8v8asw] .amx-map-nav .custom-map-control:focus-visible,
[b-k0ke8v8asw] .amx-map-nav .ol-zoom button:focus-visible {
    outline: 3px solid var(--accent-primary);
    outline-offset: -1px;
}

[b-k0ke8v8asw] .amx-map-nav .custom-map-control i {
    color: inherit;
    font-size: 14px;
    pointer-events: none;
}

/* On - full screen, showing my location. */
[b-k0ke8v8asw] .amx-map-nav .custom-map-control.active,
[b-k0ke8v8asw] .amx-map-nav .custom-map-control.enabled {
    background-color: var(--map-control-on);
    color: var(--map-control-state-fg);
}

/* The zoom level between + and -: the number alone; "Zoom" is in its name. Click to type one. */
[b-k0ke8v8asw] .map-zoom-level-control {
    position: static;
}

/* 24px tall: the smallest target WCAG 2.5.8 allows, and the cluster's rows are 32px. */
[b-k0ke8v8asw] .map-zoom-level-button {
    min-width: 32px;
    height: 24px;
    padding: 0 2px;
    background-color: transparent;
    color: var(--text-secondary);
    border: 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

[b-k0ke8v8asw] .map-zoom-level-button:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

[b-k0ke8v8asw] .map-zoom-level-prefix {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

[b-k0ke8v8asw] .map-zoom-level-input {
    width: 44px;
    height: 26px;
    padding: 0 4px;
    background-color: var(--bg-input);
    color: var(--text-primary);
    color-scheme: light dark;
    border: 1px solid var(--field-border);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

[b-k0ke8v8asw] .map-zoom-level-button:focus-visible,
[b-k0ke8v8asw] .map-zoom-level-input:focus-visible {
    outline: 3px solid var(--accent-primary);
    outline-offset: 1px;
}

/* The rotate control only shows once the map is turned; under the location count, clear of the dock. */
[b-k0ke8v8asw] .ol-rotate {
    top: calc(var(--map-offset-topRight, 8px) + var(--map-count-space, 0px));
    right: var(--map-right-offset, 8px);
}

[b-k0ke8v8asw] .ol-attribution.ol-unselectable {
    position: absolute !important;
    width: fit-content !important;
    height: fit-content !important;
    /* On the bottom bar's top edge, or beside the side dock's foot - never behind it: the base map's
       copyright has to stay in sight. */
    right: calc(var(--map-right-offset, 8px) - 8px) !important;
    left: auto !important;
    bottom: calc(var(--map-bottom-offset, 8px) - 8px) !important;
}

[b-k0ke8v8asw] .custom-map-control.hidden,
[b-k0ke8v8asw] .toggle-custom-map-control.hidden,
[b-k0ke8v8asw] .ol-hidden {
    display: none !important;
}

/* The count of layers currently switched on, after the Layers control's word - see
   updateActiveCount in mapLayerControl.js, which also hides it at zero. */
/* The zoom a toggle's items start to appear from (the nearby assets toggle, showLocalAssetsControl.js):
   "16+" on the icon's corner in the bar, "zoom 16+" after the word in a menu. Outlined and muted rather
   than filled, so it doesn't read as a count. */
[b-k0ke8v8asw] .map-control-zoom {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    height: 16px;
    margin-left: 4px;
    padding: 0 4px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background-color: var(--bg-card);
    color: var(--text-secondary);
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main > .amx-map-toolbar-slot > .custom-map-control > .map-control-zoom {
    position: absolute;
    top: 2px;
    left: calc(50% + 3px);
    margin-left: 0;
}

/* Spaced by margin: a trailing space in a flex item collapses. */
[b-k0ke8v8asw] .map-control-zoom-word {
    margin-right: 3px;
}

[b-k0ke8v8asw] .amx-map-dock .amx-map-toolbar-main > .amx-map-toolbar-slot > .custom-map-control .map-control-zoom-word {
    display: none;
}

[b-k0ke8v8asw] .map-control-count {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background-color: var(--accent-wash);
    color: var(--accent-link);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* display:inline-flex above outranks the browser's own rule for [hidden], so the hidden state has
   to be stated here or a count of zero would still show. */
[b-k0ke8v8asw] .map-control-count[hidden] {
    display: none;
}

/* Hover labels (see mapControlLabels.js), for the icon-only buttons of the navigation cluster.
   Each carries a hidden label that slides out of the side of the button - to the left, since the
   cluster sits against the right-hand edge - on hover or keyboard focus. Positioned absolutely, so
   showing it never reflows the cluster. */
[b-k0ke8v8asw] .map-control-label {
    position: absolute;
    top: 50%;
    right: calc(100% + 8px);
    transform: translateY(-50%);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 28px;
    max-width: 0;
    padding: 0 10px;
    overflow: hidden;
    background-color: var(--text-primary);
    color: var(--bg-card);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 550;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: max-width 0.18s ease, opacity 0.12s ease;
}

/* Only pointer devices get the label on hover - on touch the controls keep the long-press
   tooltip, which a tap-triggered hover state would fight with. */
@media (hover: hover) {
    [b-k0ke8v8asw] .custom-map-control:hover > .map-control-label,
    [b-k0ke8v8asw] .toggle-custom-map-control:hover > .map-control-label {
        max-width: 260px;
        opacity: 1;
    }
}

[b-k0ke8v8asw] .custom-map-control:focus-visible > .map-control-label,
[b-k0ke8v8asw] .toggle-custom-map-control:focus-visible > .map-control-label {
    max-width: 260px;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    [b-k0ke8v8asw] .map-control-label {
        transition: none;
    }
}

/* The toolbar's tip (createTip in mapToolbar.js): the name of the tool on the bar under the pointer
   or the keyboard focus, in the navigation's chip and sliding out the same way - one per map, placed
   by the script beside its tool, to its left down the side dock and above the bar along the bottom.
   In the map element, over everything else in it: the location count and the drop-down panels. */
[b-k0ke8v8asw] .amx-map-tool-tip {
    z-index: 6;
}

[b-k0ke8v8asw] .amx-map-tool-tip[data-placement="above"] {
    transform: none;
}

[b-k0ke8v8asw] .amx-map-tool-tip.is-shown {
    max-width: 260px;
    opacity: 1;
}

/* On the bottom bar the navigation's labels rise above the bar instead, their right edge on their
   button's, so the ones against the map's right-hand edge stay on the map. Sliding out to the left
   they went under the report data switch beside the navigation, and could not be read. */
[b-k0ke8v8asw] .amx-map-dock .map-control-label {
    top: auto;
    right: 0;
    /* The navigation's buttons are 32px in a 56px bar: 12px to its top edge, then a gap above it. */
    bottom: calc(100% + 20px);
    transform: none;
    z-index: 10;
}

/* A control on a map that never built its toolbar - none should, but one that did would otherwise
   be a bare browser button. */
[b-k0ke8v8asw] .custom-map-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* How many of the report's records are on the map - BaseMapComponent's ShowLocationCount, in the
   old web's words: "312 of 4,010 records have a location". A pill in the map's top-right corner,
   beside the toolbar (--map-right-offset): to the left of the Search pill when the tools float down
   the right-hand side, in the corner itself over the bottom bar. A readout, so it takes no pointer
   events; ellipsed rather than crossing a narrow map. What else sits top-right - the zoom banner,
   rotate - stacks under it (--map-count-space). It is the first thing in the map's status row (below),
   the spinner beside it. */
.map-location-count[b-k0ke8v8asw] {
    box-sizing: border-box;
    flex: 0 1 auto;
    min-width: 0;
    height: 38px;
    padding: 0 14px;
    overflow: hidden;
    background-color: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: var(--shadow-sm), 0 2px 6px rgba(16, 24, 40, 0.08);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 36px;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
}

.map-location-count strong[b-k0ke8v8asw] {
    color: var(--text-primary);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.map-div:has(> .map-top-status > .map-location-count)[b-k0ke8v8asw] {
    --map-count-space: 49px;
}

/* The map's status: one row in its top-right corner, beside the side dock - the location count, and
   to its left the spinner while the map loads or works. Level with the report data switch at the
   head of the dock, which is 38px tall and starts 3px down (the dock's tool list's padding); the
   count sat 4px higher, at the dock's own top. A readout, so it takes no pointer events. A mini map's
   tools are along its foot and it has no count, so its spinner is in the top-left corner. */
.map-top-status[b-k0ke8v8asw] {
    position: absolute;
    top: calc(var(--map-toolbar-offset, 8px) + 3px);
    right: var(--map-right-offset, 8px);
    z-index: 2;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - var(--map-right-offset, 8px) - 8px);
    pointer-events: none;
}

.map-div[data-mini-map="true"] > .map-top-status[b-k0ke8v8asw] {
    right: auto;
    left: 8px;
    flex-direction: row;
    max-width: calc(100% - 16px);
}

/* The spinner: a pill the count's height, on the same surface. */
.map-activity[b-k0ke8v8asw] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: var(--shadow-sm), 0 2px 6px rgba(16, 24, 40, 0.08);
}

/* Why the map is not drawing what the user came to see. In the map's own banner language (see
   .map-search-banner below) rather than a Bootstrap alert: it is a state of the map, not a
   warning about a mistake. Capped in width so it explains itself without covering the map, and
   held to the top-right, under the location count and clear of the side dock. */
.map-zoom-banner[b-k0ke8v8asw] {
    position: absolute;
    z-index: 2;
    top: calc(var(--map-offset-topRight, 10px) + var(--map-count-space, 0px));
    right: var(--map-right-offset, 10px);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: min(26rem, calc(100% - 80px));
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    font-size: 0.8125rem;
}

.map-zoom-banner-icon[b-k0ke8v8asw] {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--accent-primary);
}

.map-zoom-banner-text[b-k0ke8v8asw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.map-zoom-banner-title[b-k0ke8v8asw] {
    font-weight: 600;
}

.map-zoom-banner-detail[b-k0ke8v8asw] {
    color: var(--text-secondary);
    line-height: 1.35;
}

.map-zoom-banner-action[b-k0ke8v8asw] {
    flex-shrink: 0;
    align-self: center;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.map-zoom-banner-action:hover[b-k0ke8v8asw],
.map-zoom-banner-action:focus-visible[b-k0ke8v8asw] {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Narrow maps - a record's map panel, a drill-down popup - have no room for a row. */
@media (max-width: 700px) {
    .map-zoom-banner[b-k0ke8v8asw] {
        left: 10px;
        right: var(--map-right-offset, 10px);
        max-width: none;
        flex-wrap: wrap;
    }

    .map-zoom-banner-action[b-k0ke8v8asw] {
        margin-left: auto;
    }
}

/* "Nothing matched" for a select-with-map search: a strip along the bottom of the map the
   user can dismiss, rather than a dialog that has to be answered before the map can be used. */
.map-search-banner[b-k0ke8v8asw] {
    position: absolute;
    z-index: 2;
    left: 10px;
    right: var(--map-right-offset, 10px);
    bottom: var(--map-bottom-offset, 10px);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    font-size: .8125rem;
}

.map-search-banner-icon[b-k0ke8v8asw] {
    flex-shrink: 0;
    color: var(--accent-warning);
}

.map-search-banner-text[b-k0ke8v8asw] {
    flex: 1 1 auto;
    min-width: 0;
}

.map-search-banner-dismiss[b-k0ke8v8asw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: .75rem;
    transition: background-color 100ms ease, color 100ms ease;
}

.map-search-banner-dismiss:hover[b-k0ke8v8asw] {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.map-search-banner-dismiss:focus-visible[b-k0ke8v8asw] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

body.map-rotating .floating-overlay[b-k0ke8v8asw] {
    display: none !important;
}

/* Heatmap settings panel (session-only overlay) */
/* The layers panel pinned into the map (MapLayersPanel, the same content the dialog shows).
   It takes a column beside the map rather than floating over it: the control stack runs down
   the left and wraps into further columns on a short map, so a panel over that corner hides
   controls - which is what it did when it was an overlay. Sharing the width also gives the
   layer list the map's full height instead of a floating box's.

   The map is told to re-measure whenever this appears or goes (updateMapSize).

   Only the column is set up here. The panel inside it is also shown inside the layers dialog,
   which is not a descendant of this component's markup and so is out of reach of ::deep - its
   styles are in app.css. */
.map-wrapper.has-pinned-layers[b-k0ke8v8asw] {
    gap: 8px;
    justify-content: flex-start;
}

.map-wrapper.has-pinned-layers > .map-div[b-k0ke8v8asw] {
    flex: 1 1 auto;
    min-width: 0;

    /* See the dock below: the column each one takes is set here, not by the order they happen to
       be in. */
    order: 1;
}

.map-layers-dock[b-k0ke8v8asw] {
    flex: 0 0 auto;
    display: flex;
    width: min(24rem, 45%);

    /* The panel's own 290px min-width plus this dock's left padding (border-box, so the padding
       comes out of the width) - the column reserves the space rather than squeezing the panel
       until it overflows the dock. */
    min-width: 298px;
    padding: 8px 0 8px 8px;

    /* Let the column shrink to the map's height rather than holding it at the panel's content
       height. On a map embedded in a form (the DataView map view) the host is only as tall as
       the map, and a panel that cannot shrink pushes its own footer - the Restore defaults
       button - past the bottom of the shell, which clips it. The panel's body scrolls instead. */
    min-height: 0;

    /* The left-hand column, always - stated rather than left to the order of the markup, because
       the map element does not stay where it is put: going full screen moves it out to the
       full-screen host and coming back appends it to this wrapper again, which lands it after the
       dock and swapped the two sides over. */
    order: 0;
}

/* Same shrink allowance on the panel inside the dock - a flex item's floor is its content
   height, so without this the panel still refuses to be shorter than its settings. ::deep
   because the panel is rendered by the panel component, not BaseMapComponent, so it does not
   carry this component's scope attribute and a plain child selector would never match it. */
.map-layers-dock[b-k0ke8v8asw]  .map-layers-panel {
    min-height: 0;
}

/* Too narrow to divide: the panel takes the lower half and the map keeps the top, so neither
   ends up a sliver. */
@media (max-width: 700px) {
    .map-wrapper.has-pinned-layers[b-k0ke8v8asw] {
        flex-direction: column;
    }

    .map-wrapper.has-pinned-layers > .map-div[b-k0ke8v8asw] {
        height: auto;

        /* Stacked, the map keeps the top - the panel is the part that can be scrolled to. */
        order: 0;
    }

    .map-layers-dock[b-k0ke8v8asw] {
        width: 100%;

        /* Stacked, the dock is full width and the panel's own min-width is the only floor - the
           column reservation above would only push the page wide on a narrow phone. */
        min-width: 0;
        max-height: 55%;
        padding: 0 8px 8px;
        order: 1;
    }
}

/* The heat map's settings, opened from the Show menu. Rendered inside the map element and held
   to its bounds like the map's own controls: anchored to the bottom-left corner (the navigation
   cluster has the bottom-right), never wider than the map less its 8px insets, and never taller
   than the room under the toolbar - the body scrolls when a short map (a record's map in the
   dataview side panel is 180px tall at its smallest) has less room than the panel needs. Sized
   from the map, not from the window: a viewport media query left a 240px panel hanging off a
   280px map on a wide screen. */
.heatmap-settings-panel[b-k0ke8v8asw] {
    position: absolute;
    left: 8px;
    bottom: var(--map-offset-bottomLeft, 8px);
    z-index: 4;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Clear of the navigation cluster's column on the right: its 40px, and 8px either side. */
    width: min(240px, calc(100% - 64px));
    max-height: calc(100% - var(--map-toolbar-offset, 8px) - var(--map-bottom-offset, 8px));
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* On a short map the cluster is a row along the bottom (40px tall), so the panel takes the width
   above it instead of the corner beside it. */
.map-div.is-short-map .heatmap-settings-panel[b-k0ke8v8asw] {
    bottom: calc(var(--map-offset-bottomLeft, 8px) + 48px);
    width: calc(100% - 16px);
    max-height: calc(100% - var(--map-toolbar-offset, 8px) - var(--map-bottom-offset, 8px) - 48px);
}

/* With the navigation cluster in the bottom-left corner, the panel takes the bottom-right. */
.map-div[data-nav-corner="bottomLeft"] .heatmap-settings-panel[b-k0ke8v8asw] {
    left: auto;
    right: 8px;
    bottom: var(--map-offset-bottomRight, 8px);
}

.heatmap-panel-header[b-k0ke8v8asw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
}

.heatmap-panel-title[b-k0ke8v8asw] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.heatmap-panel-title i[b-k0ke8v8asw] {
    color: var(--accent-success);
    margin-right: 6px;
}

/* In dark this loses its colour to app.css's `[data-theme="dark"] button:not(...)` rule, which
   carries far more specificity than a single class can, so the X reads at --text-primary there.
   Left as it is: that is how every other unclassed button in the app behaves in dark, and
   out-weighting a rule that long to soften one close icon is not worth what it would cost. */
.heatmap-panel-close[b-k0ke8v8asw] {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 2px 6px;
    border-radius: 6px;
    cursor: pointer;
}

.heatmap-panel-close:hover[b-k0ke8v8asw] {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.heatmap-panel-close:focus-visible[b-k0ke8v8asw] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

.heatmap-panel-body[b-k0ke8v8asw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    padding: 12px;
    overflow-y: auto;
}

.heatmap-field-label[b-k0ke8v8asw] {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ── Choosing an area to export ───────────────────────────────────────────
   The overlay is built by mapExportControl.js, so everything here is ::deep. It dims the map
   and takes the pointer, so the only thing that can be dragged while it is up is the box. */
[b-k0ke8v8asw] .map-export-area {
    position: absolute;
    inset: 0;
    z-index: 20;
    cursor: default;
}

[b-k0ke8v8asw] .map-export-area-box {
    position: absolute;
    /* The dim is the box's own shadow spread over everything else, which is what makes the box
       read as a hole cut out of it rather than a rectangle drawn on top. */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    border: 2px dashed #ffffff;
    border-radius: 4px;
    background-color: transparent;
    cursor: move;
}

[b-k0ke8v8asw] .map-export-area-size {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    pointer-events: none;
}

[b-k0ke8v8asw] .map-export-area-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: #ffffff;
    border: 1px solid #2980b9;
    border-radius: 3px;
}

[b-k0ke8v8asw] .map-export-area-handle-nw { top: -7px; left: -7px; cursor: nwse-resize; }
[b-k0ke8v8asw] .map-export-area-handle-n { top: -7px; left: calc(50% - 7px); cursor: ns-resize; }
[b-k0ke8v8asw] .map-export-area-handle-ne { top: -7px; right: -7px; cursor: nesw-resize; }
[b-k0ke8v8asw] .map-export-area-handle-e { top: calc(50% - 7px); right: -7px; cursor: ew-resize; }
[b-k0ke8v8asw] .map-export-area-handle-se { bottom: -7px; right: -7px; cursor: nwse-resize; }
[b-k0ke8v8asw] .map-export-area-handle-s { bottom: -7px; left: calc(50% - 7px); cursor: ns-resize; }
[b-k0ke8v8asw] .map-export-area-handle-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
[b-k0ke8v8asw] .map-export-area-handle-w { top: calc(50% - 7px); left: -7px; cursor: ew-resize; }

[b-k0ke8v8asw] .map-export-area-actions {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.75);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

[b-k0ke8v8asw] .map-export-area-hint {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
}

[b-k0ke8v8asw] .map-export-area-btn {
    padding: 6px 12px;
    border: 0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

[b-k0ke8v8asw] .map-export-area-btn.is-primary {
    background-color: #2980b9;
    color: #ffffff;
}

[b-k0ke8v8asw] .map-export-area-btn.is-secondary {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

[b-k0ke8v8asw] .map-export-area-btn:hover {
    filter: brightness(1.1);
}
/* /Components/Maps/MapToolbarPanel.razor.rz.scp.css */
/* A panel dropped down from the map toolbar - see MapToolbarPanel.razor. Inside the map element,
   beside the side dock and held to the map's bounds (a mini map's floats over the page - below).
   openMapToolbarPanel lines it up with its button; 8px is where it sits until then. */
.map-toolbar-panel[b-78j5d4mfwm] {
    position: absolute;
    top: var(--map-toolbar-offset, 58px);
    left: 8px;
    z-index: 5;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: min(var(--map-toolbar-panel-width, 380px), calc(100% - 16px));
    max-height: calc(100% - var(--map-toolbar-offset, 58px) - var(--map-bottom-offset, 8px));
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    font-size: 0.8125rem;
    overflow: hidden;
}

/* A mini map's panel (floatPanel in mapToolbar.js): fixed, so the map's overflow does not clip it,
   and placed against the window by the script, above its button or below it - as the Show and Tools
   menus are - with the width it has on a large map, up to the window's. Under the app's prompts and
   confirmations (Bootstrap's modals from 1050, AmxModalStack's from 1080), which it opens. */
.map-toolbar-panel[data-floating][b-78j5d4mfwm] {
    position: fixed;
    right: auto;
    bottom: auto;
    z-index: 1045;
    width: min(var(--map-toolbar-panel-width, 380px), calc(100vw - 16px));
    max-height: var(--map-toolbar-panel-max-height, calc(100vh - 16px));
}

/* Opened from a button on the side dock: to the button's left, level with it (both set by
   openMapToolbarPanel - --map-toolbar-panel-right), and held clear of the map's bottom. */
.map-toolbar-panel[data-placement="left"][b-78j5d4mfwm] {
    left: auto;
    right: var(--map-toolbar-panel-right, var(--map-right-offset, 8px));
    width: min(var(--map-toolbar-panel-width, 380px), calc(100% - var(--map-toolbar-panel-right, var(--map-right-offset, 8px)) - 8px));
    max-height: calc(100% - 16px);
}

.map-toolbar-panel-head[b-78j5d4mfwm] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
    padding: 8px 8px 8px 12px;
    border-bottom: 1px solid var(--border-color);
}

.map-toolbar-panel-title[b-78j5d4mfwm] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
}

/* The small solid accent square the app's section cards head with. */
.map-toolbar-panel-icon[b-78j5d4mfwm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background-color: var(--accent-success-fill);
    color: var(--text-on-dark);
    font-size: 11px;
}

.map-toolbar-panel-btn[b-78j5d4mfwm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    background-color: transparent;
    color: var(--text-secondary);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.map-toolbar-panel-btn:hover[b-78j5d4mfwm] {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.map-toolbar-panel-btn:focus-visible[b-78j5d4mfwm] {
    outline: 3px solid var(--accent-primary);
    outline-offset: -1px;
}

.map-toolbar-panel-body[b-78j5d4mfwm] {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* A panel the map can also pin beside itself (MapLayersPanel, MapSettingsPanel) brings its own frame
   for that column. Dropped down here, the frame is this one's: a panel inside a panel reads as a
   mistake. Its actions stay on the bottom edge while its settings scroll under them. */
.map-toolbar-panel-body[b-78j5d4mfwm]  .map-layers-panel {
    min-width: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.map-toolbar-panel-body[b-78j5d4mfwm]  .map-layers-panel > .map-modal {
    padding: 0;
    overflow: visible;
}

/* Map settings' band saying where the settings are kept: edge to edge under the title, as the
   footer is along the bottom, rather than an inset strip inside the body's padding. */
.map-toolbar-panel-body[b-78j5d4mfwm]  .msp-scope {
    margin: -12px -12px 12px;
    padding: 0.5rem 12px;
}

/* Its tabs: on the same left edge as the settings under them, with the same gap, and held at the
   top while the settings scroll. The card-coloured ring covers the body's padding round them so
   nothing shows through as it scrolls past. */
.map-toolbar-panel-body[b-78j5d4mfwm]  .msp-tabs {
    position: sticky;
    top: -12px;
    z-index: 1;
    margin: 0 0 12px;
    box-shadow: 0 0 0 12px var(--bg-card);
}

.map-toolbar-panel-body[b-78j5d4mfwm]  .map-layers-panel-foot {
    position: sticky;
    bottom: -12px;
    z-index: 1;
    margin: 12px -12px -12px;
    padding: 0.6rem 12px;
    background-color: var(--bg-card);
    border-top: 1px solid var(--border-color);
}

@media (prefers-reduced-motion: no-preference) {
    .map-toolbar-panel[b-78j5d4mfwm] {
        animation: map-toolbar-panel-in-b-78j5d4mfwm 0.15s ease;
    }
}

@keyframes map-toolbar-panel-in-b-78j5d4mfwm {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Above its button, it rises out of the bar rather than dropping onto it. */
@media (prefers-reduced-motion: no-preference) {
    .map-toolbar-panel[data-placement="above"][b-78j5d4mfwm] {
        animation-name: map-toolbar-panel-up-b-78j5d4mfwm;
    }
}

@keyframes map-toolbar-panel-up-b-78j5d4mfwm {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}
/* /Components/Maps/StreetViewModal.razor.rz.scp.css */
/* The wrapper is only here for the scoped selector below to reach the dialog. It takes no part in
   layout: the map sits in flex containers with a gap (the data view's location panel), and an
   empty box after the map drew that gap at the bottom even with the dialog closed. */
.street-view-modal[b-x8a2lty8r7] {
    display: contents;
}

/* Wider than Bootstrap's modal-xl (1140px): Street View is a picture to look around in, and the
   more of the screen it has the more useful it is. Still a popup - the page shows round it. */
.street-view-modal[b-x8a2lty8r7]  .street-view-dialog {
    max-width: min(1600px, 95vw);
}

.street-view-modal__header[b-x8a2lty8r7] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.street-view-modal__newtab[b-x8a2lty8r7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    text-decoration: none;
}

.street-view-modal__frame[b-x8a2lty8r7] {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--bg-tertiary);
}
/* /Components/Menu/BookmarksDropdown.razor.rz.scp.css */
/* Bookmarks — top-bar button + popover. Flat, token-driven, no drop shadow (see DESIGN_LANGUAGE.md). */
.bookmarks-container[b-7uy82qoc1d] { position: relative; display: inline-flex; }

/* Top-bar icon button — matches the other .menu-icon buttons (Recent Assets, Nav trail).
   Defined here because the .bookmarks-container wrapper breaks TopMenuBar's `.menu-icon > .btn` rule. */
.bookmarks-container .bookmarks-btn[b-7uy82qoc1d] {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; min-width: 32px; padding: 0;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    box-shadow: none;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.bookmarks-container .bookmarks-btn i[b-7uy82qoc1d] { font-size: 1rem; pointer-events: none; }
/* Plays once whenever the current page's bookmark state changes (add/remove) — the color/fill change
   alone is easy to miss, so this gives the action a visible "it happened" beat. */
.bookmarks-container .bookmarks-btn i.jump[b-7uy82qoc1d] {
    display: inline-block;
    animation: bookmarks-jump-b-7uy82qoc1d .45s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes bookmarks-jump-b-7uy82qoc1d {
    0% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-5px) scale(1.15); }
    55% { transform: translateY(1px) scale(0.92); }
    100% { transform: translateY(0) scale(1); }
}
.bookmarks-container .bookmarks-btn:hover[b-7uy82qoc1d],
.bookmarks-container .bookmarks-btn[aria-expanded="true"][b-7uy82qoc1d] {
    color: var(--accent-primary);
    background: var(--bg-hover);
    border-color: transparent;
}
/* Filled glyph + accent when the page you're on is bookmarked. */
.bookmarks-container .bookmarks-btn.on[b-7uy82qoc1d] {
    color: var(--accent-primary);
}
.bookmarks-container .bookmarks-btn:focus-visible[b-7uy82qoc1d] {
    outline: 2px solid var(--border-focus, var(--accent-primary)); outline-offset: 2px;
}

.bookmarks-pop[b-7uy82qoc1d] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    /* Above modal backdrops/dialogs (AmxModal ~1060), same as the nav trail. */
    z-index: 2000;
    width: 380px;
    max-width: calc(100vw - 24px);
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bookmarks-in-b-7uy82qoc1d .12s ease-out;
}
@keyframes bookmarks-in-b-7uy82qoc1d { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Header */
.bookmarks-head[b-7uy82qoc1d] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--border-color);
}
.bookmarks-title[b-7uy82qoc1d] { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.92rem; }
.bookmarks-title i[b-7uy82qoc1d] { color: var(--accent-primary); font-size: 0.85rem; }
.bookmarks-count[b-7uy82qoc1d] {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px;
    padding: 0 6px; border-radius: 999px; background: var(--bg-tertiary); color: var(--text-secondary);
    font-size: 0.7rem; font-weight: 700;
}
.bookmarks-head-btn[b-7uy82qoc1d] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border: none; background: transparent; color: var(--text-muted);
    cursor: pointer; border-radius: 6px; font-size: 0.78rem;
    transition: background .12s ease, color .12s ease;
}
.bookmarks-head-btn:hover:not(:disabled)[b-7uy82qoc1d] { background: var(--bg-hover); color: var(--text-secondary); }
.bookmarks-head-btn:disabled[b-7uy82qoc1d] { opacity: .4; cursor: default; }
.bookmarks-head-btn:focus-visible[b-7uy82qoc1d] { outline: 2px solid var(--border-focus, var(--accent-primary)); outline-offset: 2px; }

/* Bookmark-this-page strip */
.bookmarks-current[b-7uy82qoc1d] {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary);
}
.bookmarks-add[b-7uy82qoc1d] {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    height: 32px; padding: 0 12px;
    border: 1px solid var(--border-color); border-radius: 8px;
    background: var(--bg-card); color: var(--text-primary);
    font-size: 0.82rem; font-weight: 550; cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.bookmarks-add i[b-7uy82qoc1d] { font-size: 0.75rem; color: var(--accent-primary); }
.bookmarks-add:hover[b-7uy82qoc1d] {
    background: var(--accent-wash); color: var(--accent-primary);
    border-color: rgba(var(--accent-primary-rgb), 0.4);
}
.bookmarks-add.remove:hover[b-7uy82qoc1d] {
    background: var(--bg-hover); color: var(--accent-danger-text, var(--accent-danger));
    border-color: var(--border-color);
}
.bookmarks-add.remove:hover i[b-7uy82qoc1d] { color: var(--accent-danger-text, var(--accent-danger)); }
.bookmarks-add:focus-visible[b-7uy82qoc1d] { outline: 2px solid var(--border-focus, var(--accent-primary)); outline-offset: 2px; }

.bookmarks-current-name[b-7uy82qoc1d] {
    font-size: 0.78rem; color: var(--text-muted); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bookmarks-current-note[b-7uy82qoc1d] {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.8rem; color: var(--text-muted);
}
.bookmarks-current-note i[b-7uy82qoc1d] { font-size: 0.78rem; }

/* Empty state */
.bookmarks-empty[b-7uy82qoc1d] {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 28px 14px; color: var(--text-muted); font-size: 0.84rem;
}
.bookmarks-empty i[b-7uy82qoc1d] { font-size: 1.5rem; opacity: .45; }

/* List — whole row jumps, trailing × removes. */
.bookmarks-list[b-7uy82qoc1d] {
    list-style: none; margin: 0; padding: 6px; max-height: 56vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 1px;
}
.bookmarks-item[b-7uy82qoc1d] {
    display: flex; align-items: center; gap: 2px;
    border-radius: 8px;
}
.bookmarks-item:hover[b-7uy82qoc1d] { background: var(--bg-hover); }

.bookmarks-row[b-7uy82qoc1d] {
    display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; text-align: left;
    border: none; background: transparent; cursor: pointer;
    padding: 8px 9px; border-radius: 8px; color: var(--text-primary);
}
.bookmarks-row:focus-visible[b-7uy82qoc1d] { outline: 2px solid var(--border-focus, var(--accent-primary)); outline-offset: -1px; }

.bookmarks-row-icon[b-7uy82qoc1d] { color: var(--text-muted); font-size: 0.8rem; width: 16px; text-align: center; flex-shrink: 0; }
.bookmarks-item.current .bookmarks-row-icon[b-7uy82qoc1d] { color: var(--accent-primary); }

.bookmarks-row-title[b-7uy82qoc1d] {
    font-size: 0.85rem; font-weight: 550; color: var(--text-primary); flex-shrink: 0; max-width: 55%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bookmarks-row:hover .bookmarks-row-title[b-7uy82qoc1d] { color: var(--accent-link, var(--accent-primary)); }
.bookmarks-item.current .bookmarks-row-title[b-7uy82qoc1d] { color: var(--accent-strong, var(--accent-primary)); }

.bookmarks-row-ctx[b-7uy82qoc1d] {
    font-size: 0.76rem; color: var(--text-muted); min-width: 0; flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* A bookmark whose record has been deleted. Marked three ways — a broken-link glyph, a struck-through
   title and the word "Deleted" — so it does not depend on colour alone. Clicking it offers to remove
   the bookmark rather than opening a page that has nothing on it (see GoTo/HandleGoneBookmark). */
.bookmarks-item.gone .bookmarks-row-title[b-7uy82qoc1d] {
    text-decoration: line-through;
    color: var(--text-muted);
}
.bookmarks-item.gone .bookmarks-row:hover .bookmarks-row-title[b-7uy82qoc1d] { color: var(--text-secondary); }
.bookmarks-item.gone .bookmarks-row-icon[b-7uy82qoc1d] { color: var(--accent-danger-text, var(--accent-danger)); }

.bookmarks-gone[b-7uy82qoc1d] {
    flex-shrink: 0; margin-left: auto; font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--accent-danger-text, var(--accent-danger));
    background: var(--bg-tertiary);
    padding: 2px 7px; border-radius: 999px;
}

.bookmarks-here[b-7uy82qoc1d] {
    flex-shrink: 0; margin-left: auto; font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--accent-primary); background: var(--accent-wash);
    padding: 2px 7px; border-radius: 999px;
}

.bookmarks-remove[b-7uy82qoc1d] {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 26px; height: 26px; margin-right: 4px;
    border: none; background: transparent; color: var(--text-muted);
    border-radius: 6px; font-size: 0.75rem; cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.bookmarks-remove:hover[b-7uy82qoc1d] { background: var(--bg-card); color: var(--accent-danger-text, var(--accent-danger)); }
.bookmarks-remove:focus-visible[b-7uy82qoc1d] { outline: 2px solid var(--border-focus, var(--accent-primary)); outline-offset: 1px; }
/* /Components/Menu/CopyLinkDropdown.razor.rz.scp.css */
.copy-link-container[b-ta0ikq1lxb] { position: relative; display: inline-flex; }

.copy-link-trigger[b-ta0ikq1lxb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    font-size: 1rem;
    color: var(--text-secondary);
    background: transparent;
    /* Borderless, matching every other button on the top bar's icon row (.menu-icon > .btn in
       TopMenuBar, and .add-new-btn / .history-btn / .bookmarks-btn / .ai-models-btn /
       .messages-btn / .voice-command-btn). This one sits inside .copy-link-container, so the row's
       own rule cannot reach it and the whole look is re-stated here - keep it in step with those. */
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    box-shadow: none;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}

/* The row's hover: accent ink on the hover fill, as every other button on the row. */
.copy-link-trigger:hover[b-ta0ikq1lxb],
.copy-link-trigger[aria-expanded="true"][b-ta0ikq1lxb] {
    color: var(--accent-primary);
    background: var(--bg-hover);
    border-color: transparent;
}

.copy-link-trigger:focus-visible[b-ta0ikq1lxb],
.copy-link-popover button:focus-visible[b-ta0ikq1lxb],
.copy-link-popover input:focus-visible[b-ta0ikq1lxb],
.copy-link-popover a:focus-visible[b-ta0ikq1lxb] {
    outline: 2px solid var(--border-focus, var(--accent-success-fill));
    outline-offset: 2px;
}

.copy-link-popover[b-ta0ikq1lxb] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 2000;
    width: 340px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding: 1rem;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: left;
}

.copy-link-heading[b-ta0ikq1lxb] { margin: 0; font-size: 0.9rem; font-weight: 600; }
.copy-link-popover p[b-ta0ikq1lxb] { margin: 0.5rem 0 0.75rem; color: var(--text-secondary); font-size: 0.8rem; }

.copy-link-url[b-ta0ikq1lxb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 40px;
    padding: 0.5rem;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-md);
    text-align: left;
    cursor: pointer;
}

.copy-link-url span[b-ta0ikq1lxb] { min-width: 0; flex: 1; overflow-wrap: anywhere; font-size: 0.78rem; }
.copy-link-url i[b-ta0ikq1lxb] { color: var(--text-secondary); }
.copy-link-url:hover[b-ta0ikq1lxb] { background: var(--bg-hover); }
.copy-link-status[b-ta0ikq1lxb] { min-height: 1.4em; margin-top: 0.25rem; color: var(--text-secondary); font-size: 0.78rem; }

.copy-link-open[b-ta0ikq1lxb] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 32px;
    color: var(--accent-success-text);
    font-size: 0.8rem;
}

.copy-link-qr[b-ta0ikq1lxb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-align: center;
}

.copy-link-qr img[b-ta0ikq1lxb] { display: block; width: min(100%, 200px); height: auto; }

.copy-link-scan[b-ta0ikq1lxb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.copy-link-scan video[b-ta0ikq1lxb] {
    display: block;
    width: 100%;
    max-height: 220px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    object-fit: cover;
}

.copy-link-scan-button[b-ta0ikq1lxb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0.5rem 0.75rem;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.copy-link-scan-button:hover[b-ta0ikq1lxb] { background: var(--bg-hover); }
.copy-link-scan-status[b-ta0ikq1lxb] { color: var(--text-secondary); font-size: 0.78rem; }

.copy-link-paste[b-ta0ikq1lxb] { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.copy-link-paste form[b-ta0ikq1lxb] { display: flex; flex-direction: column; gap: 0.5rem; }
.copy-link-paste label[b-ta0ikq1lxb] { color: var(--text-primary); font-size: 0.8rem; font-weight: 600; }
.copy-link-paste input[b-ta0ikq1lxb] {
    width: 100%;
    min-height: 40px;
    padding: 0.5rem;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-md);
}
.copy-link-paste form > span[b-ta0ikq1lxb] { color: var(--text-secondary); font-size: 0.78rem; }
.copy-link-paste .copy-link-paste-error[b-ta0ikq1lxb] { color: var(--accent-danger-text); }
/* /Components/Menu/HistoryDropdown.razor.rz.scp.css */
/* History popover — "Your flow" and "Recent assets" as two tabs of one top bar button.
   Design language: flat, token-driven, the border defines the edge (no drop shadow). */
.history-container[b-kwzfcgq3aq] { position: relative; display: inline-flex; }

/* Top-bar icon button — matches the other .menu-icon buttons (Messages, Bookmarks).
   Defined here because the .history-container wrapper breaks TopMenuBar's `.menu-icon > .btn` rule. */
.history-container .history-btn[b-kwzfcgq3aq] {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; min-width: 32px; padding: 0;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    box-shadow: none;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.history-container .history-btn i[b-kwzfcgq3aq] { font-size: 1rem; pointer-events: none; }
.history-container .history-btn:hover[b-kwzfcgq3aq],
.history-container .history-btn[aria-expanded="true"][b-kwzfcgq3aq] {
    color: var(--accent-primary);
    background: var(--bg-hover);
    border-color: transparent;
}
.history-container .history-btn:focus-visible[b-kwzfcgq3aq] {
    outline: 2px solid var(--border-focus, var(--accent-primary)); outline-offset: 2px;
}

.history-pop[b-kwzfcgq3aq] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    /* Above modal backdrops/dialogs (AmxModal ~1060) so the trail is reachable while a modal is open. */
    z-index: 2000;
    /* The wider of the two panels it replaced - the recent list carries thumbnails. */
    width: 440px;
    max-width: calc(100vw - 24px);
    max-height: 640px;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: history-in-b-kwzfcgq3aq .12s ease-out;
}
@keyframes history-in-b-kwzfcgq3aq { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Head: tab strip on the left, the open tab's own actions on the right. */
.history-head[b-kwzfcgq3aq] {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px; border-bottom: 1px solid var(--border-color);
}

.history-tabs[b-kwzfcgq3aq] { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }

.history-tab[b-kwzfcgq3aq] {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 11px; border: none; border-radius: 8px;
    background: transparent; color: var(--text-secondary);
    font-size: 0.85rem; font-weight: 600; white-space: nowrap;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.history-tab i[b-kwzfcgq3aq] { font-size: 0.82rem; }
.history-tab:hover[b-kwzfcgq3aq] { background: var(--bg-hover); color: var(--text-primary); }
.history-tab.active[b-kwzfcgq3aq] { background: var(--accent-wash); color: var(--accent-primary); }
.history-tab:focus-visible[b-kwzfcgq3aq] { outline: 2px solid var(--border-focus, var(--accent-primary)); outline-offset: -1px; }

.history-count[b-kwzfcgq3aq] {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px;
    padding: 0 6px; border-radius: 999px; background: var(--bg-tertiary); color: var(--text-secondary);
    font-size: 0.7rem; font-weight: 700;
}
.history-tab.active .history-count[b-kwzfcgq3aq] { background: var(--accent-primary); color: #fff; }

/* Head actions — small icon buttons (copy whole flow, clear). */
.history-head-actions[b-kwzfcgq3aq] { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.history-head-btn[b-kwzfcgq3aq] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border: none; background: transparent; color: var(--text-muted);
    cursor: pointer; border-radius: 6px; font-size: 0.78rem;
    transition: background .12s ease, color .12s ease;
}
.history-head-btn:hover:not(:disabled)[b-kwzfcgq3aq] { background: var(--bg-hover); color: var(--text-secondary); }
.history-head-btn:disabled[b-kwzfcgq3aq] { opacity: .4; cursor: default; }
.history-head-btn.done[b-kwzfcgq3aq] { color: var(--accent-success-text, var(--accent-success)); }
.history-head-btn:focus-visible[b-kwzfcgq3aq] { outline: 2px solid var(--border-focus, var(--accent-primary)); outline-offset: 2px; }

/* ------------------------------------------------------------------ Your flow */

.navtrail-empty[b-kwzfcgq3aq] { padding: 22px 14px; text-align: center; color: var(--text-muted); font-size: 0.84rem; }

.navtrail-list[b-kwzfcgq3aq] {
    list-style: none; margin: 0; padding: 6px; max-height: 56vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 1px;
}
.navtrail-step[b-kwzfcgq3aq] { list-style: none; }

/* Router row — newest first; the whole row is the jump target. Lean: icon · page · light context. */
.navtrail-row[b-kwzfcgq3aq] {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    border: none; background: transparent; cursor: pointer;
    padding: 8px 9px; border-radius: 8px; color: var(--text-primary);
    transition: background .1s ease;
}
.navtrail-row:hover[b-kwzfcgq3aq] { background: var(--bg-hover); }
.navtrail-row:focus-visible[b-kwzfcgq3aq] { outline: 2px solid var(--border-focus, var(--accent-primary)); outline-offset: -1px; }
.navtrail-row.static[b-kwzfcgq3aq] { cursor: default; }

.navtrail-step-icon[b-kwzfcgq3aq] { color: var(--text-muted); font-size: 0.8rem; width: 16px; text-align: center; flex-shrink: 0; }
.navtrail-step.current .navtrail-step-icon[b-kwzfcgq3aq] { color: var(--accent-primary); }

.navtrail-step-title[b-kwzfcgq3aq] {
    font-size: 0.85rem; font-weight: 550; color: var(--text-primary); flex-shrink: 0; max-width: 55%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.navtrail-row:hover .navtrail-step-title[b-kwzfcgq3aq] { color: var(--accent-link, var(--accent-primary)); }
.navtrail-step.current .navtrail-step-title[b-kwzfcgq3aq] { color: var(--accent-strong, var(--accent-primary)); }

.navtrail-step-ctx[b-kwzfcgq3aq] {
    font-size: 0.76rem; color: var(--text-muted); min-width: 0; flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* "here" pill marks the current page (top row). */
.navtrail-here[b-kwzfcgq3aq] {
    flex-shrink: 0; margin-left: auto; font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--accent-primary); background: var(--accent-wash);
    padding: 2px 7px; border-radius: 999px;
}

/* Actions done ON a page ("Opened Inspections tab") — nested under their page with a connector rail,
   lighter and non-navigable, so an action always reads as belonging to the page above it. */
.navtrail-actions[b-kwzfcgq3aq] {
    list-style: none; margin: 0 0 2px; padding: 0 0 0 18px; position: relative;
}
.navtrail-actions[b-kwzfcgq3aq]::before {
    content: ""; position: absolute; left: 15px; top: -2px; bottom: 12px; width: 1px; background: var(--border-color);
}
.navtrail-row.action-row[b-kwzfcgq3aq] { padding: 6px 9px; cursor: default; }
.navtrail-row.action-row .navtrail-step-title[b-kwzfcgq3aq] { font-weight: 500; color: var(--text-secondary); }
.navtrail-row.action-row .navtrail-step-icon[b-kwzfcgq3aq] { color: var(--text-muted); font-size: 0.72rem; }

/* Ancestry of a deep record (great-grandparent → parent) — nested under the current record with a
   connector rail, so a drill-down reads as one branch you can jump into at any level. */
.navtrail-ancestry[b-kwzfcgq3aq] {
    list-style: none; margin: 0 0 2px; padding: 0 0 0 18px; position: relative;
}
.navtrail-ancestry[b-kwzfcgq3aq]::before {
    content: ""; position: absolute; left: 15px; top: -2px; bottom: 12px; width: 1px; background: var(--border-color);
}
.navtrail-row.ancestor[b-kwzfcgq3aq] { padding: 6px 9px; }
.navtrail-row.ancestor .navtrail-step-title[b-kwzfcgq3aq] { font-weight: 500; color: var(--text-secondary); }
.navtrail-row.ancestor .navtrail-step-icon[b-kwzfcgq3aq] { color: var(--text-muted); font-size: 0.7rem; transform: rotate(90deg); }
.navtrail-row.ancestor:hover .navtrail-step-title[b-kwzfcgq3aq] { color: var(--accent-link, var(--accent-primary)); }

/* ------------------------------------------------------------------ Recent assets */

.dropdown-loading[b-kwzfcgq3aq] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.dropdown-empty[b-kwzfcgq3aq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 20px;
    color: var(--text-secondary);
}

.dropdown-empty i[b-kwzfcgq3aq] {
    font-size: 2rem;
    opacity: 0.45;
}

.dropdown-items[b-kwzfcgq3aq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 6px;
}

.recent-item[b-kwzfcgq3aq] {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease;
}

.recent-item:hover[b-kwzfcgq3aq] {
    background-color: var(--bg-hover);
}

.recent-item-main[b-kwzfcgq3aq] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--text-primary);
    cursor: pointer;
}

.recent-item-icon[b-kwzfcgq3aq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--accent-primary);
    font-size: 1rem;
}

.recent-item-body[b-kwzfcgq3aq] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.recent-item-name[b-kwzfcgq3aq] {
    font-weight: 600;
    font-size: 0.925rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-item-parent[b-kwzfcgq3aq] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    max-width: 100%;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.recent-item-parent-icon[b-kwzfcgq3aq] {
    transform: rotate(90deg);
    opacity: 0.6;
    font-size: 0.7rem;
}

.recent-item-parent-name[b-kwzfcgq3aq] {
    color: var(--accent-primary);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-item-parent:hover .recent-item-parent-name[b-kwzfcgq3aq] {
    text-decoration: underline;
}

.recent-item-time[b-kwzfcgq3aq] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.recent-item-time i[b-kwzfcgq3aq] {
    opacity: 0.6;
}

.recent-item-photo[b-kwzfcgq3aq] {
    width: 52px;
    height: 52px;
    min-width: 52px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.recent-item-photo[b-kwzfcgq3aq]  .photo-wrapper {
    width: 100%;
    height: 100%;
}

.recent-item-photo[b-kwzfcgq3aq]  .photo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recent-item-photo[b-kwzfcgq3aq]  .amx-photo-zoom-indicator {
    display: none;
}

.recent-item-chevron[b-kwzfcgq3aq] {
    flex-shrink: 0;
    color: var(--text-secondary);
    opacity: 0;
    font-size: 0.8rem;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.recent-item:hover .recent-item-chevron[b-kwzfcgq3aq] {
    opacity: 0.6;
    transform: translateX(2px);
}

/* Footer / Load More */
.dropdown-footer[b-kwzfcgq3aq] {
    padding: 10px 12px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.dropdown-load-more-btn[b-kwzfcgq3aq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--accent-primary);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dropdown-load-more-btn:hover:not(:disabled)[b-kwzfcgq3aq] {
    background: var(--accent-wash);
    border-color: rgba(var(--accent-primary-rgb), 0.4);
}

.dropdown-load-more-btn:disabled[b-kwzfcgq3aq] {
    opacity: 0.65;
    cursor: default;
}
/* /Components/Modals/AmxModal.razor.rz.scp.css */
.modal-dialog:not(.modal-fullscreen) .modal-content[b-xq1hwt4h1q] {
    border-radius: 1rem;
    overflow: hidden;
}

.modal-backdrop[b-xq1hwt4h1q] {
    background-color: color-mix(in srgb, var(--bg-primary, #000) 60%, transparent);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.modal-backdrop.show[b-xq1hwt4h1q] {
    opacity: 1;
}

/* Docked (see DockInContent): the content area rather than the window. Bootstrap sizes a
   full-screen dialog to the viewport, so the dialog is brought back to its container. The
   z-index sits above the page content it covers and below the layout's own overlays (50) and
   the top bar's menus. */
.modal.amx-modal-docked[b-xq1hwt4h1q] {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    padding: 0;
    z-index: 40;
}

.modal.amx-modal-docked .modal-dialog.modal-fullscreen[b-xq1hwt4h1q] {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
}

/* Header glyph for modals that lead their title with an icon. Lives here rather than in each page's
   style block so the pages do not each define their own near-identical rule. ::deep because the
   icon is supplied by the caller as part of the Header fragment. */
[b-xq1hwt4h1q] .amx-modal-head-icon {
    margin-right: 0.5rem;
    color: var(--dbd-accent, #15803d);
}

.modal-body[tabindex]:focus-visible[b-xq1hwt4h1q] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: -2px;
}
/* /Components/Modals/AmxPickerModal.razor.rz.scp.css */
/* ========== AMX PICKER MODAL ==========
   Design language §5 (Modals / Lists / result rows): a search row above a scrollable list of flat
   rows. Ported from the Dashboard Designer's report/entity/lookup pickers, which the design
   language names as the reference for this pattern. Uses the app's global tokens (with hard
   fallbacks) rather than a page's local vars, so it looks the same wherever it is opened. */

.amx-picker[b-c4l35z3057] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    /* Fills the full-height dialog's body (a column, see the razor): never a short list under empty
       space. The floor keeps it usable on a very short screen, where the body scrolls instead. */
    min-height: 320px;
}

/* ── Search row ───────────────────────────────────────────────── */
.amx-picker-search[b-c4l35z3057] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--border-color, #e4e4e7);
    border-radius: 9px;
    background: var(--bg-card, #ffffff);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.amx-picker-search:focus-within[b-c4l35z3057] {
    border-color: var(--accent-success-fill, #15803d);
    box-shadow: 0 0 0 3px rgba(21, 128, 61, .15);
}

.amx-picker-search i[b-c4l35z3057] {
    color: var(--text-muted, #a1a1aa);
    font-size: .85rem;
    flex-shrink: 0;
}

/* The focus ring belongs to the joined row, not the bare field. */
.amx-picker-search-input[b-c4l35z3057] {
    flex: 1;
    min-width: 0;
    padding: 11px 0;
    border: none;
    background: transparent;
    color: var(--text-primary, #18181b);
    font-size: .85rem;
}

.amx-picker-search-input:focus[b-c4l35z3057],
.amx-picker-search-input:focus-visible[b-c4l35z3057] {
    outline: none;
    box-shadow: none;
}

.amx-picker-search-input[b-c4l35z3057]::placeholder {
    color: var(--text-muted, #a1a1aa);
    opacity: 1;
}

/* ── Results ──────────────────────────────────────────────────── */
.amx-picker-results[b-c4l35z3057] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    /* The rest of the dialog's height, scrolling on its own under the search. */
    min-height: 0;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--border-color, #e4e4e7);
    border-radius: 10px;
    background: var(--bg-secondary, #fafafa);
}

.amx-picker-row[b-c4l35z3057] {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 12px;
    border: none;
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: var(--text-primary, #18181b);
    font-size: .86rem;
    text-align: left;
    cursor: pointer;
    transition: background 100ms ease;
}

.amx-picker-row:hover[b-c4l35z3057] {
    background: var(--accent-wash, rgba(21, 128, 61, .10));
}

.amx-picker-row:focus-visible[b-c4l35z3057] {
    outline: none;
    background: var(--accent-wash, rgba(21, 128, 61, .10));
    box-shadow: 0 0 0 2px var(--accent-success-fill, #15803d);
}

.amx-picker-row.selected[b-c4l35z3057] {
    background: var(--accent-wash, rgba(21, 128, 61, .10));
    color: var(--accent-success-text, #116a33);
    font-weight: 600;
}

.amx-picker-row-ico[b-c4l35z3057] {
    flex-shrink: 0;
    width: 18px;
    color: var(--text-muted, #71717a);
    font-size: .85rem;
    text-align: center;
}

.amx-picker-row:hover .amx-picker-row-ico[b-c4l35z3057],
.amx-picker-row.selected .amx-picker-row-ico[b-c4l35z3057] {
    color: var(--accent-success-text, #116a33);
}

/* Long values truncate on screen but keep their full text as the accessible name (title). */
.amx-picker-row-text[b-c4l35z3057] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amx-picker-row-check[b-c4l35z3057] {
    flex-shrink: 0;
    color: var(--accent-success-text, #116a33);
    font-size: .78rem;
}

/* Loading / empty share one centred state row. */
.amx-picker-state[b-c4l35z3057] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 12px;
    color: var(--text-muted, #a1a1aa);
    font-size: .86rem;
}
/* /Components/Modals/CustomisationAuditUpdatesModal.razor.rz.scp.css */
.audit-updates[b-6oecm64lnq] { color: var(--text-primary); }
.audit-updates h2[b-6oecm64lnq] { font-size: 1.1rem; }
.audit-updates-help[b-6oecm64lnq] { color: var(--text-secondary); font-size: .875rem; }
.audit-updates-error[b-6oecm64lnq], .audit-updates-no[b-6oecm64lnq] { color: var(--accent-danger-text); }
.audit-updates-yes[b-6oecm64lnq] { color: var(--accent-success-text, var(--text-primary)); }
.audit-updates-yes[b-6oecm64lnq], .audit-updates-no[b-6oecm64lnq] { margin-right: .4rem; font-weight: 700; }
.audit-updates-grid[b-6oecm64lnq] { max-height: 45vh; overflow: auto; border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.audit-updates table[b-6oecm64lnq] { width: 100%; border-collapse: collapse; font-size: .875rem; }
.audit-updates th[b-6oecm64lnq], .audit-updates td[b-6oecm64lnq] { padding: .65rem; text-align: left; border-bottom: 1px solid var(--border-color); vertical-align: top; overflow-wrap: anywhere; }
.audit-updates th[b-6oecm64lnq] { background: var(--bg-secondary); }
.audit-updates-grid:focus-visible[b-6oecm64lnq], .audit-updates h2:focus-visible[b-6oecm64lnq] { outline: 2px solid var(--border-focus); outline-offset: 2px; }
/* /Components/Modals/SelectedDataUpdatesModal.razor.rz.scp.css */
.selected-data-updates[b-btisd7idiv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--text-primary);
}

.selected-data-updates p[b-btisd7idiv] { margin: 0; }

/* Keep the entity picker's layout while using the shared accessible theme tokens. */
.selected-data-updates .amx-update-file[b-btisd7idiv] {
    --uf-fg: var(--text-primary);
    --uf-muted: var(--text-muted);
    --uf-label: var(--text-secondary);
    --uf-border: var(--border-interactive);
    --uf-border-hover: var(--border-interactive);
    --uf-surface: var(--bg-card);
    --uf-accent: var(--accent-success-text);
}

.selected-data-updates .amx-update-file-select:focus-visible[b-btisd7idiv],
.selected-data-updates input:focus-visible[b-btisd7idiv] {
    outline: 2px solid var(--accent-success-text);
    outline-offset: 2px;
}

.selected-data-updates input[type="checkbox"][b-btisd7idiv] {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0;
}
/* /Components/ModelLibrary/AssetModelExpanded.razor.rz.scp.css */
/* The heading of the full viewer for an asset's library model: the model's name, then the asset's, muted. */
.ame-title[b-blzlgqvkti] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ame-asset[b-blzlgqvkti] {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-secondary);
}
/* /Components/ModelLibrary/AssetModels.razor.rz.scp.css */
/* The "3D models" control on an asset's form: a header line (title, the model shown, actions) over
   the compact viewer, which fills the rest of the rows the control spans, as the 3D model field does. */
.am[b-p0a83npy5z] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    min-height: 0;
}

.am-header[b-p0a83npy5z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    flex: 0 0 auto;
}

.am-title[b-p0a83npy5z] {
    margin: 0;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--text-primary);
}

.am-title.is-bold[b-p0a83npy5z] {
    font-weight: 700;
}

.am-name[b-p0a83npy5z] {
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Small to start with and grows into the room left, so a form cell keeps the header on one line;
   only a narrow cell puts the actions on a line of their own. */
.am[b-p0a83npy5z]  .am-select {
    flex: 1 1 140px;
    min-width: 120px;
    max-width: 260px;
}

.am-actions[b-p0a83npy5z] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

.am-btn[b-p0a83npy5z] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 10px;
    font-size: 0.78rem;
    font-weight: 550;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
}

/* Library: an icon alone, its name in aria-label and the tip. */
.am-btn-icon[b-p0a83npy5z] {
    justify-content: center;
    width: 30px;
    padding: 0;
}

/* Add model: the control's one green action. */
.am-btn-add[b-p0a83npy5z] {
    color: var(--accent-success-text);
}

.am-btn:hover[b-p0a83npy5z] {
    background: var(--bg-hover);
}

.am-btn:focus-visible[b-p0a83npy5z] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: 1px;
}

.am-body[b-p0a83npy5z] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}

.am-viewer[b-p0a83npy5z] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}

.am-body[b-p0a83npy5z]  .am-state {
    flex: 1 1 auto;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md, 8px);
}
/* /Components/ModelLibrary/AssetModelsSection.razor.rz.scp.css */
/* The side panel's 3D model section: an optional model select over the compact viewer, which is as
   wide as the panel and three quarters as tall (within limits), then the model's category and description. */
.amp[b-4ez6h507yp] {
    display: flex;
    flex-direction: column;
}

.amp-choose[b-4ez6h507yp] {
    padding: 8px 10px 0;
}

.amp[b-4ez6h507yp]  .amp-select {
    width: 100%;
}

.amp-viewer[b-4ez6h507yp] {
    display: flex;
    flex-direction: column;
    aspect-ratio: 4 / 3;
    min-height: 200px;
    max-height: 480px;
    padding: 8px 10px;
}

.amp-meta[b-4ez6h507yp] {
    margin: 0;
    padding: 0 12px 10px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.amp-category[b-4ez6h507yp] {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-success-text);
    background: color-mix(in srgb, var(--accent-success) 12%, var(--bg-card));
    border-radius: 999px;
}

.amp-empty[b-4ez6h507yp] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
/* /Components/ModelLibrary/AssetPickerModal.razor.rz.scp.css */
/* An asset in the picker: its name, and a second line to tell like-named assets apart. */
.ap-text[b-xsdkk6ezfr] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.ap-name[b-xsdkk6ezfr] {
    font-weight: 550;
}

.ap-detail[b-xsdkk6ezfr] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
/* /Components/ModelLibrary/ModelDetailsModal.razor.rz.scp.css */
/* Adding or editing an asset's 3D model from its form: a short stack of labelled fields. */
.mdm[b-lt60ye7fl1] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mdm-intro[b-lt60ye7fl1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.mdm-intro strong[b-lt60ye7fl1] {
    color: var(--text-primary);
}

.mdm-field .form-label[b-lt60ye7fl1] {
    margin-bottom: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mdm-required[b-lt60ye7fl1] {
    color: var(--accent-danger-text);
}

.mdm-current[b-lt60ye7fl1] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.mdm-current-name[b-lt60ye7fl1] {
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

/* The model file: a drop zone, as the file field's (AmxFileUpload), taller for a form of its own.
   The file input covers it, invisible, so the zone is one control for click, keyboard and drop. */
.mdm-drop[b-lt60ye7fl1] {
    position: relative;
    display: flex;
    border: 2px dashed var(--border-interactive);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-secondary);
    transition: border-color 100ms ease, background 100ms ease;
}

.mdm-drop.dragging[b-lt60ye7fl1],
.mdm-drop.has-file[b-lt60ye7fl1] {
    border-color: var(--accent-success-fill);
    background: color-mix(in srgb, var(--accent-success) 8%, var(--bg-card));
}

.mdm-drop.has-file[b-lt60ye7fl1] {
    border-style: solid;
}

/* The input is the focusable control, so the ring belongs on the zone around it. */
.mdm-drop:focus-within[b-lt60ye7fl1] {
    border-color: var(--accent-success-fill);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-success) 25%, transparent);
}

.mdm-drop.is-disabled[b-lt60ye7fl1] {
    opacity: .6;
}

/* InputFile renders its own <input>, which carries no scope attribute - hence ::deep. */
.mdm-drop[b-lt60ye7fl1]  .mdm-drop-input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.mdm-drop.is-disabled[b-lt60ye7fl1]  .mdm-drop-input {
    cursor: default;
}

.mdm-drop-face[b-lt60ye7fl1] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 18px 16px;
    text-align: center;
}

.mdm-drop-icon[b-lt60ye7fl1] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 4px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-success) 14%, var(--bg-card));
    color: var(--accent-success-text);
    font-size: 1rem;
}

.mdm-drop-title[b-lt60ye7fl1] {
    max-width: 100%;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.mdm-drop-browse[b-lt60ye7fl1] {
    color: var(--accent-success-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mdm-drop-hint[b-lt60ye7fl1] {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.mdm-drop-clear[b-lt60ye7fl1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 2px 10px;
    font-size: 0.8125rem;
}

.mdm-help[b-lt60ye7fl1] {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary);
}

.mdm-error[b-lt60ye7fl1] {
    display: block;
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--accent-danger-text);
}

.mdm-alert[b-lt60ye7fl1] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    font-size: 0.875rem;
    color: var(--accent-danger-text);
    background: color-mix(in srgb, var(--accent-danger) 10%, var(--bg-card));
    border: 1px solid var(--accent-danger);
    border-radius: var(--radius-md, 8px);
}
/* /Components/ModelLibrary/ModelLibraryBrowser.razor.rz.scp.css */
/* The 3D model library (DESIGN_LANGUAGE.md "3D model library"): the list of models beside the
   viewer, both flat cards on the page. The pair takes the rest of the page's height under its
   header (ModelLibraryView fills the content area), so the viewer gets the room and the list
   scrolls on its own; on a short window it keeps a usable height and the page scrolls instead. */
.mlib[b-bqszhbzlwr] {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 8px;
    flex: 1 1 0;
    min-height: 520px;
}

/* The list is as wide as the user dragged it (--mlib-list-width), with the drag strip between it
   and the model; folded, a rail with the model's name takes its place. */
.mlib.is-list-open[b-bqszhbzlwr] {
    grid-template-columns: var(--mlib-list-width, 300px) 9px minmax(0, 1fr);
    column-gap: 0;
}

.mlib.is-list-folded[b-bqszhbzlwr] {
    grid-template-columns: 44px minmax(0, 1fr);
}

.mlib-list[hidden][b-bqszhbzlwr] {
    display: none;
}

.mlib-list[b-bqszhbzlwr] {
    position: relative;
}

/* Top right of the list, beside the title; the title leaves it room. */
.mlib-fold[b-bqszhbzlwr] {
    position: absolute;
    top: 10px;
    right: 8px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
}

.mlib-list[b-bqszhbzlwr]  .mlib-page-titles {
    padding-right: 34px;
}

.mlib-fold:hover[b-bqszhbzlwr],
.mlib-rail:hover[b-bqszhbzlwr] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.mlib-fold:focus-visible[b-bqszhbzlwr],
.mlib-rail:focus-visible[b-bqszhbzlwr] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: 1px;
}

.mlib-resizer[b-bqszhbzlwr] {
    position: relative;
    align-self: stretch;
    cursor: col-resize;
    touch-action: none;
}

.mlib-resizer[b-bqszhbzlwr]::after {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 4px;
    width: 1px;
    border-radius: 2px;
    background: var(--border-color);
    transition: background-color 120ms ease, left 120ms ease, width 120ms ease;
}

.mlib-resizer:hover[b-bqszhbzlwr]::after,
.mlib-resizer:focus-visible[b-bqszhbzlwr]::after,
.mlib-resizer.dragging[b-bqszhbzlwr]::after {
    left: 3px;
    width: 3px;
    background: var(--accent-success-fill);
}

.mlib-resizer:focus-visible[b-bqszhbzlwr] {
    outline: none;
}

/* Folded: one button the height of the column, the chosen model's name running up it. */
.mlib-rail[b-bqszhbzlwr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 8px 0;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-sm);
    color: var(--text-secondary);
    font: inherit;
    cursor: pointer;
}

.mlib-rail-icon[b-bqszhbzlwr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
}

.mlib-rail-text[b-bqszhbzlwr] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    max-height: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
}

.mlib-list[b-bqszhbzlwr],
.mlib-detail[b-bqszhbzlwr] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-sm);
}

/* ---- the list ---- */

.mlib-filters[b-bqszhbzlwr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px 0;
}

.mlib-search[b-bqszhbzlwr] {
    position: relative;
}

.mlib-search i[b-bqszhbzlwr] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 0.8rem;
    pointer-events: none;
}

.mlib-search input[b-bqszhbzlwr] {
    width: 100%;
    height: 36px;
    padding: 8px 10px 8px 32px;
    font-size: 0.85rem;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-md, 8px);
}

.mlib-search input[b-bqszhbzlwr]::placeholder {
    color: var(--text-secondary);
}

.mlib-search input:focus-visible[b-bqszhbzlwr] {
    outline: none;
    border-color: var(--accent-success-fill);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-success-fill) 18%, transparent);
}

.mlib-count[b-bqszhbzlwr] {
    margin: 8px 12px 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.mlib-items[b-bqszhbzlwr] {
    list-style: none;
    margin: 0;
    padding: 4px 8px 8px;
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
}

.mlib-item[b-bqszhbzlwr] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px;
    margin: 0 0 2px;
    text-align: left;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 6px);
    transition: background-color var(--transition-fast, 100ms ease);
}

.mlib-item:hover[b-bqszhbzlwr] {
    background: var(--bg-hover);
}

.mlib-item:focus-visible[b-bqszhbzlwr] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: 1px;
}

/* The one accent: green, never the leftover blue of --accent-primary (DESIGN_LANGUAGE.md §1). */
.mlib-item.is-selected[b-bqszhbzlwr] {
    background: color-mix(in srgb, var(--accent-success) 10%, transparent);
    border-color: var(--accent-success-fill);
}

.mlib-thumb[b-bqszhbzlwr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 72px;
    height: 45px;
    overflow: hidden;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border-color);
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.mlib-thumb img[b-bqszhbzlwr] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mlib-item-text[b-bqszhbzlwr] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.mlib-item-name[b-bqszhbzlwr] {
    font-size: 0.85rem;
    font-weight: 550;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mlib-item-meta[b-bqszhbzlwr] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mlib-item.is-selected .mlib-item-name[b-bqszhbzlwr] {
    color: var(--accent-success-text);
}

/* ---- the chosen model ---- */

.mlib-detail-header[b-bqszhbzlwr] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}

.mlib-detail-text[b-bqszhbzlwr] {
    min-width: 0;
}

.mlib-detail-title[b-bqszhbzlwr] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.mlib-detail-meta[b-bqszhbzlwr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 4px 0 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.mlib-chip[b-bqszhbzlwr] {
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-success) 12%, transparent);
    color: var(--accent-success-text);
    font-weight: 600;
}

.mlib-detail-description[b-bqszhbzlwr] {
    margin: 6px 0 0;
    font-size: 0.8125rem;
    color: var(--text-primary);
    white-space: pre-line;
}

.mlib-detail-actions[b-bqszhbzlwr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.mlib-detail-actions .btn[b-bqszhbzlwr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* The viewer takes the rest of the card; AmxModelViewer's full form fills its parent. */
.mlib-viewer[b-bqszhbzlwr] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px;
}

.mlib-detail[b-bqszhbzlwr] >  .amx-empty-state {
    flex: 1 1 auto;
}

/* Narrow: the list above the viewer, each at a height of its own, and the page scrolls. */
@media (max-width: 900px) {
    /* Stacked, the list is above the model at full width: nothing to fold or drag. */
    .mlib-resizer[b-bqszhbzlwr],
    .mlib-rail[b-bqszhbzlwr],
    .mlib-fold[b-bqszhbzlwr] {
        display: none;
    }

    .mlib-list[hidden][b-bqszhbzlwr] {
        display: flex;
    }

    .mlib.is-list-open[b-bqszhbzlwr],
    .mlib.is-list-folded[b-bqszhbzlwr],
    .mlib[b-bqszhbzlwr] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        flex: 0 0 auto;
        min-height: 0;
    }

    .mlib-items[b-bqszhbzlwr] {
        max-height: 300px;
    }

    .mlib-viewer[b-bqszhbzlwr] {
        height: 620px;
        flex: 0 0 auto;
    }

    .mlib-detail-header[b-bqszhbzlwr] {
        flex-direction: column;
    }

    .mlib-detail-actions[b-bqszhbzlwr] {
        justify-content: flex-start;
    }
}

/* ---- whose a model is, over an asset's record ---- */

/* First of the header's actions: as tall as the buttons beside it, and read, not pressed. */
.mlib-role[b-bqszhbzlwr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 2px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    font-size: 0.8125rem;
    color: var(--text-primary);
}

.mlib-asset-icon[b-bqszhbzlwr] {
    color: var(--text-secondary);
}
/* /Components/ModelLibrary/ModelLibraryModal.razor.rz.scp.css */
/* The heading of the library overlay. */
.mlm-title[b-15hykhw3an] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* /Components/ModelLibrary/ModelLibraryWorkspace.razor.rz.scp.css */
/* The library fills its host - the app's content area (.amx-content-scroll, a fixed-height flex
   item) on the node's page, or the overlay's body - so the list and viewer under the header take
   exactly the height that is left. */
.mlib-page[b-g3jdkfi2mi] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* The top of the models list: the library's name (the dashboard header's accent square and title),
   then Add model and Refresh across the list's width. No bar of its own above the library. */
.mlib-list-head[b-g3jdkfi2mi] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 12px 0;
    color: var(--text-primary);
}

/* With no list to head (loading, empty, not set up): the title alone above the state. */
.mlib-list-head.is-alone[b-g3jdkfi2mi] {
    padding: 4px 4px 10px;
}

.mlib-page-titles[b-g3jdkfi2mi] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.mlib-page-icon[b-g3jdkfi2mi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--accent-primary);
    color: var(--text-on-accent, #ffffff);
    font-size: 1rem;
}

.mlib-page-text[b-g3jdkfi2mi] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.mlib-page-title[b-g3jdkfi2mi] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mlib-page-subtitle[b-g3jdkfi2mi] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.mlib-page-actions[b-g3jdkfi2mi] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mlib-page-actions .btn[b-g3jdkfi2mi] {
    flex: 1 1 0;
    justify-content: center;
}

.mlib-page-actions .btn[b-g3jdkfi2mi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Loading and the "nothing to show" states sit in a card where the library would be. */
.mlib-page[b-g3jdkfi2mi]  .mlib-page-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
}

/* In an overlay: under the overlay's own heading, so a quieter header with no mark of its own. */
.mlib-page.is-embedded[b-g3jdkfi2mi] {
    flex: 1 1 auto;
}

.mlib-page.is-embedded .mlib-page-title[b-g3jdkfi2mi] {
    font-size: 1rem;
}

@media (max-width: 900px) {
    .mlib-page:not(.is-embedded)[b-g3jdkfi2mi] {
        height: auto;
    }
}


/* /Components/ModelViewer/AmxModelViewer.razor.rz.scp.css */
/* 3D model viewer (AmxModelViewer): the compact view a [model3d] file field draws under its file
   row, and the full viewer Expand opens. DESIGN_LANGUAGE.md "3D model field" links the renders this
   follows.

   The --mv-* tokens are the scene's colours as well as the component's: modelViewer.js reads them
   off the stage with getComputedStyle and redraws when data-theme flips, so the 3D background,
   grid, clay, wireframe and measuring colours follow the theme like everything else. */

.mv[b-z4a5y7rowg] {
    --mv-stage: var(--bg-secondary);
    --mv-grid-major: var(--border-interactive);
    --mv-grid-minor: #c9cfdb;
    --mv-clay: #b5bcc8;
    --mv-ground: #8a8f99;
    --mv-wire: var(--accent-success-fill);
    --mv-bounds: var(--border-interactive);
    --mv-measure: var(--accent-success-fill);
    --mv-measure-ink: #ffffff;
    --mv-select: var(--accent-success-fill);
    --mv-area: var(--text-secondary);
    /* A part linked to an element: a light wash of the accent (the selection is the same green, stronger). */
    --mv-linked: var(--accent-success);
    /* The assets parts of a site model are marked to, one each (not green: that is linking and
       selection). Each is at least 3:1 on the stage and the card, as a label's border must be. */
    --mv-asset-1: #2563eb;
    --mv-asset-2: #b45309;
    --mv-asset-3: #7c3aed;
    --mv-asset-4: #be185d;
    --mv-asset-5: #0e7490;
    --mv-asset-6: #a16207;
    --mv-seg-rail: var(--bg-secondary);
    --mv-seg-on: var(--bg-card);

    color: var(--text-primary);
}

[data-theme="dark"] .mv[b-z4a5y7rowg] {
    --mv-grid-minor: #2c3552;
    --mv-clay: #8b93a6;
    --mv-ground: #202030;
    --mv-wire: var(--accent-success);
    --mv-measure: var(--accent-success);
    --mv-measure-ink: var(--text-on-bright);
    --mv-select: var(--accent-success);
    --mv-asset-1: #60a5fa;
    --mv-asset-2: #fbbf24;
    --mv-asset-3: #a78bfa;
    --mv-asset-4: #f472b6;
    --mv-asset-5: #22d3ee;
    --mv-asset-6: #fde047;
    /* The rail steps up from the card in dark, and the chosen segment is a green wash: a card-coloured
       one would be darker than the rail around it. */
    --mv-seg-rail: var(--bg-tertiary);
    --mv-seg-on: rgba(34, 197, 94, 0.14);
}

.mv[b-z4a5y7rowg]  .dbd-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    font-size: 0.85rem;
    font-weight: 550;
}

.mv[b-z4a5y7rowg]  .mv-btn-sm {
    height: 28px;
    padding: 0 0.6rem;
    font-size: 0.78rem;
}


/* ---------------------------------------------------------------- compact (form cell) */

/* The form cell decides the height: the view takes exactly what is left under the file row (a
   zero basis, no floor), so the whole model is framed in what can be seen. A floor here made the
   stage taller than a short cell, which clipped it and cut the bottom of the model off. The field
   is never shorter than ModelFieldConvention.MinRowSpan rows, which keeps this usable. */
.mv-compact[b-z4a5y7rowg] {
    position: relative;
    display: flex;
    flex: 1 1 0;
    min-height: 0;
}

.mv-compact .mv-stage[b-z4a5y7rowg] {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.mv-mini-bar[b-z4a5y7rowg] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.mv-mini-bar button[b-z4a5y7rowg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 0.55rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary) !important;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
}

.mv-mini-bar button:hover[b-z4a5y7rowg],
.mv-mini-bar button:active[b-z4a5y7rowg] {
    background: var(--bg-hover);
    color: var(--text-primary) !important;
}

.mv-mini-bar button:focus-visible[b-z4a5y7rowg] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: 1px;
}

.mv-mini-facts[b-z4a5y7rowg] {
    position: absolute;
    left: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* A model that could not be shown, or a browser without WebGL: written over the stage. */
.mv-message[b-z4a5y7rowg] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    background: var(--mv-stage);
    color: var(--text-primary);
    font-size: 0.82rem;
    line-height: 1.45;
}

.mv-message i[b-z4a5y7rowg] {
    flex: 0 0 auto;
    color: var(--accent-warning-text);
}

.mv-message p[b-z4a5y7rowg] {
    margin: 0;
    max-width: 52ch;
}

.mv-message strong[b-z4a5y7rowg] {
    display: block;
    font-weight: 600;
}

/* ---------------------------------------------------------------- full (expanded) */

/* The full viewer fills the height its host gives it (the expanded modal's body): the stage takes
   what the toolbar leaves, and the side panel scrolls within the same height rather than
   stretching the page - so there is no gap under the model, however tall the window. */
.mv-full[b-z4a5y7rowg] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
}

.mv-full > .mv-body[b-z4a5y7rowg] {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
}

.mv-full .mv-viewer[b-z4a5y7rowg] {
    min-height: 0;
}

.mv-full .mv-stage[b-z4a5y7rowg] {
    flex: 1 1 auto;
    height: auto;
    min-height: 320px;
}

.mv-full .mv-panel[b-z4a5y7rowg] {
    min-height: 0;
}

/* ---------------------------------------------------------------- body: viewer + side panel */

.mv-body[b-z4a5y7rowg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1rem;
    align-items: start;
}

.mv-viewer[b-z4a5y7rowg] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.mv-viewer:fullscreen[b-z4a5y7rowg] {
    border: 0;
    border-radius: 0;
}

.mv-toolbar[b-z4a5y7rowg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem;
    border-bottom: 1px solid var(--border-color);
}

.mv-spacer[b-z4a5y7rowg] {
    flex: 1 1 auto;
}

/* A flat track (DESIGN_LANGUAGE.md "Toolbar tracks"): the rail is the frame, the buttons are flat
   until touched, and a pressed one carries the green accent. */
.mv-track[b-z4a5y7rowg] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    min-height: 36px;
    box-sizing: border-box;
    background: var(--mv-seg-rail);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.mv-track button[b-z4a5y7rowg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 0.6rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary) !important;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 100ms ease;
}

.mv-track button:hover[b-z4a5y7rowg],
.mv-track button:active[b-z4a5y7rowg] {
    background: var(--bg-card);
    color: var(--text-primary) !important;
}

.mv-track button[aria-pressed="true"][b-z4a5y7rowg] {
    background: var(--mv-seg-on);
    color: var(--accent-success-text) !important;
    box-shadow: var(--shadow-sm);
}

.mv-track button:focus-visible[b-z4a5y7rowg] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------- the 3D stage */

.mv-stage[b-z4a5y7rowg] {
    position: relative;
    height: clamp(420px, calc(100vh - 230px), 1400px);
    background: var(--mv-stage);
    overflow: hidden;
}

.mv-viewer:fullscreen .mv-stage[b-z4a5y7rowg] {
    height: auto;
    flex: 1 1 auto;
}

.mv-canvas[b-z4a5y7rowg] {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    outline: none;
}

.mv-canvas:focus-visible[b-z4a5y7rowg] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: -4px;
}

.mv-labels[b-z4a5y7rowg] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Select parts: the box being dragged over the model, in the selection's green. */
.mv-labels[b-z4a5y7rowg]  .mv-select-box {
    position: absolute;
    border: 1.5px dashed var(--mv-select);
    background: color-mix(in srgb, var(--mv-select) 10%, transparent);
    border-radius: 2px;
}

.mv-labels[b-z4a5y7rowg]  .mv-measure-label {
    position: absolute;
    transform: translate(-50%, -140%);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1.5px solid var(--mv-measure);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}

.mv-labels[b-z4a5y7rowg]  .mv-measure-label small {
    margin-right: 5px;
    color: var(--text-secondary);
    font-size: inherit;
    font-weight: 600;
}

/* The selected part's floating box takes the foot of the model; the hint gives way. */
.mv-stage.has-float .mv-hint[b-z4a5y7rowg] {
    display: none;
}

.mv-hint[b-z4a5y7rowg] {
    position: absolute;
    left: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    padding: 5px 9px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.74rem;
    box-shadow: var(--shadow-sm);
    pointer-events: none;
}

.mv-banner[b-z4a5y7rowg] {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    /* max-content: a box at left:50% would otherwise shrink to half the stage and wrap. */
    width: max-content;
    max-width: calc(100% - 20px);
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8rem;
    box-shadow: var(--shadow-md);
    pointer-events: none;
}

.mv-banner i[b-z4a5y7rowg] {
    color: var(--accent-success-text);
}

.mv-crosshair[b-z4a5y7rowg] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.mv-crosshair[b-z4a5y7rowg]::before,
.mv-crosshair[b-z4a5y7rowg]::after {
    content: "";
    position: absolute;
    background: var(--text-primary);
    opacity: 0.75;
}

.mv-crosshair[b-z4a5y7rowg]::before {
    left: 10px;
    top: 0;
    width: 2px;
    height: 22px;
}

.mv-crosshair[b-z4a5y7rowg]::after {
    left: 0;
    top: 10px;
    width: 22px;
    height: 2px;
}

.mv-loading[b-z4a5y7rowg] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mv-stage) 70%, transparent);
}

/* ---------------------------------------------------------------- side panel */

.mv-panel[b-z4a5y7rowg] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.mv[b-z4a5y7rowg]  .mv-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.mv[b-z4a5y7rowg]  .mv-card-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--border-color);
}

.mv[b-z4a5y7rowg]  .mv-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--accent-success-fill);
    color: #ffffff;
    font-size: 0.7rem;
}

.mv[b-z4a5y7rowg]  .mv-card-head h2 {
    flex: 1 1 auto;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}


.mv[b-z4a5y7rowg]  .mv-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.75rem 0.85rem;
}

.mv-facts[b-z4a5y7rowg] {
    display: grid;
    /* The value column sizes to its content and the label wraps instead, so a size never breaks. */
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 0.9rem;
    margin: 0;
    font-size: 0.82rem;
}

.mv-facts dt[b-z4a5y7rowg] {
    font-weight: 400;
    color: var(--text-secondary);
}

.mv-facts dd[b-z4a5y7rowg] {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.mv-facts .mv-strong[b-z4a5y7rowg] {
    font-weight: 600;
    white-space: nowrap;
}

.mv-missing[b-z4a5y7rowg] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    border: 1px dashed var(--border-interactive);
    background: var(--bg-secondary);
    font-size: 0.78rem;
}

.mv-missing i[b-z4a5y7rowg] {
    margin-top: 0.15rem;
    color: var(--accent-warning-text);
}

.mv-missing p[b-z4a5y7rowg] {
    margin: 0;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.mv-field[b-z4a5y7rowg] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.mv-label[b-z4a5y7rowg] {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* Segmented control on native radios (DESIGN_LANGUAGE.md "Segmented control"). */
.mv-seg[b-z4a5y7rowg] {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--mv-seg-rail);
}

.mv-seg-input[b-z4a5y7rowg] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.mv-seg-option[b-z4a5y7rowg] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    margin: 0;
    padding: 0 0.5rem;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.mv-seg-option:hover[b-z4a5y7rowg] {
    color: var(--text-primary);
}

.mv-seg-input:checked + .mv-seg-option[b-z4a5y7rowg] {
    background: var(--mv-seg-on);
    color: var(--accent-success-text);
    box-shadow: var(--shadow-sm);
}

.mv-seg-input:focus-visible + .mv-seg-option[b-z4a5y7rowg] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: -1px;
}

/* Checkbox shelf (DESIGN_LANGUAGE.md "Sectioned settings": toggles sit on a light shelf). */
.mv-shelf[b-z4a5y7rowg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.6rem;
    margin: 0;
    padding: 0.6rem 0.7rem;
    border: 0;
    border-radius: 8px;
    background: var(--mv-seg-rail);
    font-size: 0.82rem;
}

.mv-check[b-z4a5y7rowg] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 24px;
    margin: 0;
    cursor: pointer;
}

.mv-check input[b-z4a5y7rowg] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent-success-fill);
    cursor: pointer;
}

.mv-check input:focus-visible[b-z4a5y7rowg] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: 2px;
}

.mv-measures[b-z4a5y7rowg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mv-measure[b-z4a5y7rowg] {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.45rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.mv-measure-n[b-z4a5y7rowg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--mv-measure);
    color: var(--mv-measure-ink);
    font-size: 0.72rem;
    font-weight: 700;
}

.mv-measure-v[b-z4a5y7rowg] {
    font-size: 0.86rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 0;
}

.mv-measure-d[b-z4a5y7rowg] {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
}

.mv-icon-btn[b-z4a5y7rowg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary) !important;
    cursor: pointer;
}

.mv-icon-btn:hover[b-z4a5y7rowg] {
    background: var(--bg-hover);
    color: var(--accent-danger-text) !important;
}

.mv-icon-btn:focus-visible[b-z4a5y7rowg] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: 1px;
}

.mv[b-z4a5y7rowg]  .mv-empty-note {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.mv-pending[b-z4a5y7rowg] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.78rem;
    color: var(--accent-success-text);
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 900px) {
    .mv-body[b-z4a5y7rowg] {
        grid-template-columns: minmax(0, 1fr);
    }

    .mv-stage[b-z4a5y7rowg] {
        height: clamp(320px, 60vh, 640px);
    }

    /* Stacked, the panel follows the model down the page and the page scrolls. */
    .mv-full > .mv-body[b-z4a5y7rowg] {
        grid-template-rows: none;
    }

    .mv-full .mv-stage[b-z4a5y7rowg] {
        flex: none;
        height: clamp(320px, 60vh, 640px);
    }

    .mv-full .mv-tabpanel[b-z4a5y7rowg] {
        overflow-y: visible;
    }

    /* Stacked, the page scrolls: the parts list keeps its own height again. */
    .mv-full[b-z4a5y7rowg]  .mv-el-list {
        flex: none;
        max-height: 280px;
    }

    /* Stacked, the panel is under the model at full width: nothing to fold or drag. */
    .mv-body.is-panel-open[b-z4a5y7rowg],
    .mv-body.is-panel-folded[b-z4a5y7rowg] {
        grid-template-columns: minmax(0, 1fr);
    }

    .mv-panel-resizer[b-z4a5y7rowg],
    .mv-rail[b-z4a5y7rowg],
    .mv-fold-btn[b-z4a5y7rowg] {
        display: none;
    }

    .mv-panel[hidden][b-z4a5y7rowg] {
        display: flex;
    }
}

@media (max-width: 560px) {
    /* Icon-only header and tool buttons; the words stay for screen readers. */
    .mv-btn-label:not(.mv-btn-label-keep)[b-z4a5y7rowg] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .mv-hint[b-z4a5y7rowg] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
        .mv-track button[b-z4a5y7rowg] {
        transition: none;
    }
}

/* Names on the model of drawn areas and linked parts (ModelElements in modelElements.js). A plain
   name is aria-hidden - the Elements card lists them for assistive technology; one that opens
   something is a button (.is-action). */
.mv-labels[b-z4a5y7rowg]  .mv-area-label {
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 2px 7px;
    border-radius: 6px;
    border: 1.5px solid var(--mv-area);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}

/* The name of an asset whose parts these are (the library's site models): bordered, and its building
   coloured, as the asset's parts are tinted. */
.mv-labels[b-z4a5y7rowg]  .mv-area-label.is-asset {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-color: var(--mv-mark, var(--mv-area));
}

.mv-labels[b-z4a5y7rowg]  .mv-area-label.is-asset i {
    color: var(--mv-mark, var(--mv-area));
    font-size: 0.85em;
}

.mv-labels[b-z4a5y7rowg]  .mv-area-label.is-selected {
    border-color: var(--mv-select);
}

/* A linked part's or area's label is its button: it opens the element (and, in the form cell, an
   area not linked yet opens the full viewer on it). Only the label does: a click on the model turns
   or selects it. A linked one leads with a link icon. */
.mv-labels[b-z4a5y7rowg]  .mv-area-label.is-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    pointer-events: auto;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
}

.mv-labels[b-z4a5y7rowg]  .mv-area-label.is-action i {
    color: var(--accent-success-text);
    font-size: 0.85em;
}

.mv-labels[b-z4a5y7rowg]  .mv-area-label.is-action:hover {
    border-color: var(--mv-select);
    background: var(--bg-hover);
}

.mv-labels[b-z4a5y7rowg]  .mv-area-label.is-action:focus-visible {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: 2px;
}

/* Model and Display fold away under the Elements card: the heading holds the disclosure button. */
/* ---------------------------------------------------------------- panel tabs */

/* The side panel is one card: a row of tabs (icon over a short label, so four fit in 300px) and
   the chosen tab's panel. In the full viewer the card fills the column and the panel scrolls
   under the tabs. */
.mv-tabs-card[b-z4a5y7rowg] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.mv-full .mv-tabs-card[b-z4a5y7rowg] {
    flex: 1 1 auto;
}

.mv-tabs-row[b-z4a5y7rowg] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.mv-tabs[b-z4a5y7rowg] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 0 0 4px;
}

/* Folds the panel to its rail, as the app's own side panel does. */
.mv-fold-btn[b-z4a5y7rowg],
.mv-rail-btn[b-z4a5y7rowg] {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
}

.mv-fold-btn[b-z4a5y7rowg] {
    margin: 0 6px 0 2px;
}

.mv-fold-btn:hover[b-z4a5y7rowg],
.mv-rail-btn:hover[b-z4a5y7rowg] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.mv-fold-btn:focus-visible[b-z4a5y7rowg],
.mv-rail-btn:focus-visible[b-z4a5y7rowg] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------- panel width and rail */

/* The panel is as wide as the user dragged it (--mv-panel-width, set on the body), with the drag
   strip between it and the model; folded, a rail of its tabs' icons takes its place. */
.mv-body.is-panel-open[b-z4a5y7rowg] {
    grid-template-columns: minmax(0, 1fr) 9px var(--mv-panel-width, 320px);
    column-gap: 4px;
}

.mv-body.is-panel-folded[b-z4a5y7rowg] {
    grid-template-columns: minmax(0, 1fr) 44px;
}

.mv-panel-resizer[b-z4a5y7rowg] {
    position: relative;
    align-self: stretch;
    min-height: 48px;
    cursor: col-resize;
    touch-action: none;
}

/* The line down the middle of the strip: what the user sees of what they can grab. */
.mv-panel-resizer[b-z4a5y7rowg]::after {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 4px;
    width: 1px;
    border-radius: 2px;
    background: var(--border-color);
    transition: background-color 120ms ease, left 120ms ease, width 120ms ease;
}

.mv-panel-resizer:hover[b-z4a5y7rowg]::after,
.mv-panel-resizer:focus-visible[b-z4a5y7rowg]::after,
.mv-panel-resizer.dragging[b-z4a5y7rowg]::after {
    left: 3px;
    width: 3px;
    background: var(--accent-success-fill);
}

.mv-panel-resizer:focus-visible[b-z4a5y7rowg] {
    outline: none;
}

.mv-rail[b-z4a5y7rowg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: 4px;
    padding: 6px 0;
    min-height: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.mv-rail-rule[b-z4a5y7rowg] {
    width: 20px;
    height: 1px;
    margin: 2px 0;
    background: var(--border-color);
}

.mv-rail-btn.is-current[b-z4a5y7rowg] {
    color: var(--accent-success-text);
}

.mv-rail-count[b-z4a5y7rowg] {
    position: absolute;
    top: -3px;
    right: -5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent-success-fill);
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
}

.mv-panel[hidden][b-z4a5y7rowg] {
    display: none;
}

.mv-tab[b-z4a5y7rowg] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 9px 6px 7px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 550;
    line-height: 1.2;
    cursor: pointer;
}

.mv-tab:hover[b-z4a5y7rowg] {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.mv-tab:focus-visible[b-z4a5y7rowg] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: -2px;
    border-radius: 6px 6px 0 0;
}

.mv-tab[aria-selected="true"][b-z4a5y7rowg] {
    color: var(--text-primary);
    font-weight: 650;
    border-bottom-color: var(--accent-success-fill);
}

.mv-tab-icon[b-z4a5y7rowg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 16px;
    font-size: 0.85rem;
}

.mv-tab[aria-selected="true"] .mv-tab-icon[b-z4a5y7rowg] {
    color: var(--accent-success-text);
}

.mv-tab-count[b-z4a5y7rowg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.65rem;
    font-weight: 650;
}

.mv-tab-label[b-z4a5y7rowg] {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mv-tabpanel[b-z4a5y7rowg] {
    min-height: 0;
}

.mv-full .mv-tabpanel[b-z4a5y7rowg] {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* The chosen panel's body takes the whole height under the tabs, and in Elements the parts list
   takes whatever the assets and filter above it leave (scrolling itself), rather than stopping at
   280px with the panel empty below it. Too short for that, the panel scrolls as a whole. */
.mv-full .mv-tabpanel:not([hidden])[b-z4a5y7rowg] {
    display: flex;
    flex-direction: column;
}

.mv-full .mv-tabpanel > .mv-card-body[b-z4a5y7rowg],
.mv-full .mv-tabpanel[b-z4a5y7rowg] >  .mv-elements,
.mv-full[b-z4a5y7rowg]  .mv-elements > .mv-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.mv-full[b-z4a5y7rowg]  .mv-el-list {
    flex: 1 1 auto;
    min-height: 140px;
    max-height: none;
}

.mv-tabpanel:focus-visible[b-z4a5y7rowg] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: -2px;
}

.mv-tabpanel[hidden][b-z4a5y7rowg] {
    display: none;
}

/* Measurements: the count and Clear all over the list. */
.mv-tab-bar[b-z4a5y7rowg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
}
/* /Components/ModelViewer/ModelElementsCard.razor.rz.scp.css */
/* The Elements card of the expanded 3D viewer. The card shell (.mv-card, head, body) and the small
   buttons come from AmxModelViewer.razor.css; these are the list, the selected item and the
   drawing panel. Selected = the green accent ring and wash, as on the model itself. */

.mv-el-context[b-i97d0qe81d] {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.mv-el-context strong[b-i97d0qe81d] {
    color: var(--text-primary);
    font-weight: 600;
}

/* The library's view of a model: what it shows, and that nothing is changed there. */
.mv-el-viewonly[b-i97d0qe81d] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    line-height: 1.4;
}

.mv-el-viewonly i[b-i97d0qe81d] {
    margin-top: 2px;
    color: var(--text-muted);
}

/* Link changes waiting for the record's Save: the accent, as the form marks an unsaved edit. */
.mv-el-pending[b-i97d0qe81d] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--accent-success-fill);
    border-radius: 8px;
    background: var(--accent-wash, var(--bg-tertiary));
    color: var(--text-primary);
    font-size: 0.78rem;
    line-height: 1.4;
}

.mv-el-pending i[b-i97d0qe81d] {
    margin-top: 2px;
    color: var(--accent-success-text);
}

/* An asset in the assign picker (an AmxPickerModal row): set in by how far it is under this asset. */
.mv-tree-row[b-i97d0qe81d] {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-left: calc(var(--mv-depth, 0) * 18px);
}

.mv-tree-ico[b-i97d0qe81d] {
    flex-shrink: 0;
    width: 18px;
    color: var(--text-muted);
    font-size: .85rem;
    text-align: center;
}

.mv-tree-row .mv-el-swatch[b-i97d0qe81d] {
    margin: 0 3px;
}

.mv-tree-name[b-i97d0qe81d] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mv-tree-note[b-i97d0qe81d] {
    flex: 1;
    min-width: max-content;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 400;
}

/* On the picker's tinted rows (hover, current) the muted note would fall under 4.5:1: it takes the row's ink. */
.amx-picker-row:hover .mv-tree-note[b-i97d0qe81d],
.amx-picker-row.selected .mv-tree-note[b-i97d0qe81d],
.amx-picker-row:focus-visible .mv-tree-note[b-i97d0qe81d] {
    color: inherit;
}

.mv-tree-check[b-i97d0qe81d] {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--accent-success-text);
    font-size: .78rem;
}

.mv-el-filter[b-i97d0qe81d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 32px;
    padding: 0 0.6rem;
    border: 1px solid var(--border-interactive);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-muted);
}

.mv-el-filter:focus-within[b-i97d0qe81d] {
    border-color: var(--accent-success-fill);
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15);
}

.mv-el-filter input[b-i97d0qe81d] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.8rem;
}

.mv-el-list[b-i97d0qe81d] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 280px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

/* The assets a site model's parts are assigned to (the library): a swatch in each one's colour on
   the model, its name and parts, and small icon buttons to act on all of them. */
.mv-el-assets[b-i97d0qe81d] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mv-el-assets-head[b-i97d0qe81d] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.mv-el-assets-count[b-i97d0qe81d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 650;
}

/* Show: a labelled list across the panel, not squeezed beside the heading. */
.mv-el-show[b-i97d0qe81d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mv-el-show-label[b-i97d0qe81d] {
    flex: 0 0 auto;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.mv-el-show[b-i97d0qe81d]  .mv-el-focus {
    flex: 1 1 auto;
    min-width: 0;
}

.mv-el-asset-row.is-shown[b-i97d0qe81d] {
    border-color: var(--accent-success-fill);
}

.mv-icon-btn[aria-pressed="true"][b-i97d0qe81d] {
    background: color-mix(in srgb, var(--accent-success) 14%, var(--bg-card));
    color: var(--accent-success-text) !important;
}

.mv-el-focus-note[b-i97d0qe81d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.mv-el-focus-note strong[b-i97d0qe81d] {
    color: var(--text-primary);
}

.mv-el-focus-note .btn[b-i97d0qe81d] {
    margin-left: auto;
}

.mv-el-assets-title[b-i97d0qe81d] {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.mv-el-assets-list[b-i97d0qe81d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The name across the row (it is what the row is for, and the button that shows the asset alone);
   under it the counts and the actions, so a narrow panel never cuts the name to a few letters. */
.mv-el-asset-row[b-i97d0qe81d] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "name name"
        "meta actions";
    align-items: center;
    column-gap: 0.5rem;
    padding: 0.35rem 0.35rem 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.mv-el-asset-name[b-i97d0qe81d] {
    grid-area: name;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.15rem 0.25rem 0.15rem 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.mv-el-asset-name .mv-el-name[b-i97d0qe81d] {
    overflow: hidden;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

.mv-el-asset-name:hover .mv-el-name[b-i97d0qe81d] {
    text-decoration: underline;
}

.mv-el-asset-name:focus-visible[b-i97d0qe81d] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: 2px;
}

.mv-el-asset-name[aria-pressed="true"] .mv-el-name[b-i97d0qe81d] {
    color: var(--accent-success-text);
}

.mv-el-asset-meta[b-i97d0qe81d] {
    grid-area: meta;
    min-width: 0;
    padding-left: calc(12px + 0.5rem);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mv-el-swatch[b-i97d0qe81d] {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--mv-mark);
}

.mv-el-asset-actions[b-i97d0qe81d] {
    grid-area: actions;
    display: flex;
    flex: 0 0 auto;
    gap: 0;
}

.mv-el-asset-actions .mv-icon-btn[b-i97d0qe81d] {
    width: 28px;
    height: 28px;
}

.mv-icon-btn[b-i97d0qe81d] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary) !important;
    font-size: 0.8rem;
}

.mv-icon-btn:hover:not(:disabled)[b-i97d0qe81d] {
    background: var(--bg-hover);
    color: var(--text-primary) !important;
}

.mv-icon-btn:focus-visible[b-i97d0qe81d] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: 1px;
}

.mv-icon-btn.is-danger:hover:not(:disabled)[b-i97d0qe81d] {
    color: var(--accent-danger-text) !important;
}

.mv-icon-btn:disabled[b-i97d0qe81d] {
    opacity: 0.5;
}

/* Many at once (the library): a tick box before each row, and a bar saying how many are selected
   with what can be done to them all. */
.mv-el-pick[b-i97d0qe81d] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.mv-el-pick .mv-el-check[b-i97d0qe81d] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0 0 0 0.35rem;
    cursor: pointer;
    /* The viewer's own tick boxes (Display): the single green accent. */
    accent-color: var(--accent-success-fill);
}

.mv-el-pick .mv-el-row[b-i97d0qe81d] {
    flex: 1 1 auto;
    min-width: 0;
}

.mv-el-showall[b-i97d0qe81d] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mv-el-multi[b-i97d0qe81d] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
}

.mv-el-multi-count[b-i97d0qe81d] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--text-primary);
}

.mv-el-row[b-i97d0qe81d] {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 40px;
    padding: 0.35rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary) !important;
    text-align: left;
    cursor: pointer;
}

.mv-el-row:hover[b-i97d0qe81d] {
    background: var(--bg-hover);
}

.mv-el-row[aria-pressed="true"][b-i97d0qe81d] {
    border-color: var(--accent-success-fill);
    background: var(--mv-seg-on);
}

[data-theme="dark"] .mv-el-row[aria-pressed="true"][b-i97d0qe81d] {
    background: rgba(34, 197, 94, 0.12);
}

.mv-el-row:focus-visible[b-i97d0qe81d] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: 1px;
}

.mv-el-icon[b-i97d0qe81d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.68rem;
}

.mv-el-text[b-i97d0qe81d] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mv-el-name[b-i97d0qe81d] {
    font-size: 0.82rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mv-el-status[b-i97d0qe81d] {
    font-size: 0.72rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Linked is said in words; the colour only repeats it. */
.mv-el-status.is-linked[b-i97d0qe81d] {
    color: var(--accent-success-text);
}

.mv-el-detail[b-i97d0qe81d] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-color);
}

.mv-el-detail h3[b-i97d0qe81d] {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.mv-el-meta[b-i97d0qe81d],
.mv-el-hint[b-i97d0qe81d] {
    margin: 0;
    font-size: 0.76rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.mv-el-linked[b-i97d0qe81d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--accent-success-fill);
    border-radius: 8px;
    background: var(--bg-secondary);
}

.mv-el-linked > i[b-i97d0qe81d] {
    color: var(--accent-success-text);
}

.mv-el-linked .mv-el-text[b-i97d0qe81d] {
    flex: 1 1 auto;
}

/* The asset a part is marked to (the library only): as the linked element's block, in neutral ink,
   the building in the asset's colour on the model being the link between the two. */
.mv-el-asset[b-i97d0qe81d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border-interactive);
    border-radius: 8px;
    background: var(--bg-secondary);
}

.mv-el-asset > i[b-i97d0qe81d] {
    color: var(--text-secondary);
}

.mv-el-asset .mv-el-text[b-i97d0qe81d] {
    flex: 1 1 auto;
}

.mv-el-actions[b-i97d0qe81d] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mv-el-drawing[b-i97d0qe81d] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.6rem;
    border: 1px dashed var(--accent-success-fill);
    border-radius: 8px;
    background: var(--bg-secondary);
}

.mv-el-drawing-title[b-i97d0qe81d] {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
}

.mv-el-config[b-i97d0qe81d] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    border: 1px dashed var(--border-interactive);
    border-radius: 8px;
    background: var(--bg-secondary);
    font-size: 0.78rem;
    line-height: 1.45;
}

.mv-el-config i[b-i97d0qe81d] {
    margin-top: 0.15rem;
    color: var(--accent-warning-text);
}

.mv-el-config p[b-i97d0qe81d] {
    margin: 0;
    color: var(--text-primary);
}

.mv-el-config strong[b-i97d0qe81d] {
    display: block;
    font-weight: 600;
}


/* "Add to an asset in this model": the assets already on the model, one click each. */
.mv-el-quick[b-i97d0qe81d] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.mv-el-quick-title[b-i97d0qe81d] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

.mv-el-quick-list[b-i97d0qe81d] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mv-el-quick-btn[b-i97d0qe81d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 28px;
    padding: 3px 10px 3px 8px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 550;
    cursor: pointer;
}

.mv-el-quick-btn:hover:not(:disabled)[b-i97d0qe81d] {
    border-color: var(--accent-success-fill);
    background: var(--bg-tertiary);
}

.mv-el-quick-btn:focus-visible[b-i97d0qe81d] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: 2px;
}

.mv-el-quick-btn:disabled[b-i97d0qe81d] {
    opacity: 0.5;
    cursor: default;
}

.mv-el-quick-ico[b-i97d0qe81d] {
    color: var(--text-muted);
    font-size: .75rem;
}

.mv-el-quick-name[b-i97d0qe81d] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mv-el-quick + .mv-el-actions[b-i97d0qe81d] {
    margin-top: 8px;
}

/* ---- the selected part or area, floating along the bottom of the model (AmxModelViewer's outlet) ---- */

.mv-float[b-i97d0qe81d] {
    position: absolute;
    left: 50%;
    bottom: 12px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    width: min(980px, calc(100% - 24px));
    max-height: min(40%, 240px);
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
    animation: mv-float-in-b-i97d0qe81d 160ms ease-out;
}

@keyframes mv-float-in-b-i97d0qe81d {
    from {
        opacity: 0;
        transform: translate(-50%, 8px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.mv-float-head[b-i97d0qe81d] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.4rem 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border-color);
}

.mv-float-icon[b-i97d0qe81d] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Name and "Part · size · faces" on one line - wide and short, over the model's foot. */
.mv-float-titles[b-i97d0qe81d] {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.6rem;
    min-width: 0;
}

.mv-float-title[b-i97d0qe81d] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.mv-float-close[b-i97d0qe81d] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.mv-float-close:hover[b-i97d0qe81d] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.mv-float-close:focus-visible[b-i97d0qe81d] {
    outline: 2px solid var(--accent-success-fill);
    outline-offset: 1px;
}

/* Across, not down: the blocks (asset, element, the quick assets), the hints and the actions sit
   side by side and wrap only when the box runs out of width. */
.mv-float-body[b-i97d0qe81d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    min-height: 0;
    padding: 0.55rem 0.6rem 0.6rem;
    overflow-y: auto;
}

.mv-float-body > .mv-el-asset[b-i97d0qe81d],
.mv-float-body > .mv-el-linked[b-i97d0qe81d] {
    flex: 1 1 240px;
    max-width: 380px;
}

.mv-float-body > .mv-el-quick[b-i97d0qe81d] {
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 0;
}

.mv-float-body > .mv-el-actions[b-i97d0qe81d],
.mv-float-body > .mv-el-quick + .mv-el-actions[b-i97d0qe81d] {
    flex: 0 1 auto;
    margin-top: 0;
}

.mv-float-body > .mv-el-hint[b-i97d0qe81d] {
    flex: 0 1 auto;
}

@media (max-width: 560px) {
    .mv-float[b-i97d0qe81d] {
        bottom: 8px;
        width: calc(100% - 16px);
        max-height: 55%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mv-float[b-i97d0qe81d] {
        animation: none;
    }
}
/* /Components/NewItem/AddNewItem.razor.rz.scp.css */
/* Add new item modal.
   Follows the same language as the other AMX modals: theme tokens (so light and dark
   both work without a separate set of overrides), bordered surfaces, muted supporting
   text and the app's `.dbd-btn` buttons. */

.new-item-header[b-pq4vt2yibu] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.new-item-header-icon[b-pq4vt2yibu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--accent-wash);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.35);
    color: var(--accent-primary);
    font-size: 0.9rem;
}

.new-item-header-text[b-pq4vt2yibu] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.new-item-header-title[b-pq4vt2yibu] {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.new-item-header-subtitle[b-pq4vt2yibu] {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.new-item-header-count[b-pq4vt2yibu] {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background-color: var(--accent-wash);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.35);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-primary);
    white-space: nowrap;
}

.new-item-base-container[b-pq4vt2yibu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    overflow: auto;
}

.new-item-base-container .new-item-content-wrapper[b-pq4vt2yibu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    overflow: auto;
}

.new-item-base-container .new-item-content-wrapper .new-item-content-container[b-pq4vt2yibu] {
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Search plus its options, as one control strip above the list. */
/* Reserve the disclosure column for leaves as well as folders, so a child checkbox
   never moves left when its row has no expand arrow. Keep this local to this picker. */
.lookup-items-tree-container[b-pq4vt2yibu]  .node-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
}

.lookup-items-tree-container[b-pq4vt2yibu]  .node-item > .expand-icon-container {
    grid-column: 1;
    grid-row: 1;
    width: 32px;
    min-height: 32px;
    padding: 0;
}

.lookup-items-tree-container[b-pq4vt2yibu]  .node-item > .node-item-content {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.search-container[b-pq4vt2yibu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.new-item-options[b-pq4vt2yibu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

/* The options are .amx-check-option boxes now (see app.css), which carry their own type. */

.new-item-base-container .new-item-content-wrapper .new-item-content-container .lookup-items-tree-container[b-pq4vt2yibu] {
    overflow: auto;
    height: 100%;
    flex: 1;
    min-height: 0;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-card);
}

.new-item-empty[b-pq4vt2yibu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

.new-item-empty i[b-pq4vt2yibu] {
    font-size: 1.6rem;
    opacity: 0.6;
}

.new-item-empty span[b-pq4vt2yibu] {
    font-weight: 600;
    color: var(--text-secondary);
}

.tree-and-selection-container[b-pq4vt2yibu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

@media (min-width: 992px) {
    .tree-and-selection-container[b-pq4vt2yibu] {
        flex-direction: row;
    }

    .tree-and-selection-container .selected-items-panel[b-pq4vt2yibu] {
        width: 20rem;
        flex-shrink: 0;
        max-height: none;
        margin-top: 0;
    }
}

/* ── Selected items ──────────────────────────────────────────────────── */
.selected-items-panel[b-pq4vt2yibu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 14rem;
    overflow-y: auto;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-secondary);
}

.selected-items-header[b-pq4vt2yibu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    position: sticky;
    top: 0;
}

.selected-items-header h6[b-pq4vt2yibu] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.selected-count-badge[b-pq4vt2yibu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background-color: var(--accent-primary);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
}

.selected-items-list[b-pq4vt2yibu] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.selected-item[b-pq4vt2yibu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.selected-item-name[b-pq4vt2yibu] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qty-stepper[b-pq4vt2yibu] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-color: var(--bg-card);
}

.qty-btn[b-pq4vt2yibu] {
    border: none;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.qty-btn:hover:not(:disabled)[b-pq4vt2yibu] {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.qty-btn:disabled[b-pq4vt2yibu] {
    opacity: 0.5;
    cursor: not-allowed;
}

.qty-input[b-pq4vt2yibu] {
    width: 2.75rem;
    height: 1.75rem;
    border: none;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    background-color: var(--bg-card);
    color: var(--text-primary);
    text-align: center;
    font-size: 0.85rem;
    padding: 0;
    -moz-appearance: textfield;
}

.qty-input[b-pq4vt2yibu]::-webkit-outer-spin-button,
.qty-input[b-pq4vt2yibu]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.remove-selected-btn[b-pq4vt2yibu] {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--accent-danger);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.remove-selected-btn:hover[b-pq4vt2yibu] {
    background-color: rgba(239, 68, 68, 0.12);
}
/* /Components/Oem/ManufacturerInfoModal.razor.rz.scp.css */
.mi-title[b-q1hloicpnu] {
    margin: 0;
}

.mi-body[b-q1hloicpnu] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.mi-message[b-q1hloicpnu] {
    margin: 0;
    color: var(--text-secondary);
}

.mi-set[b-q1hloicpnu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    min-width: 0;
}

.mi-set-title[b-q1hloicpnu] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mi-details[b-q1hloicpnu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px 16px;
    margin: 0;
}

.mi-detail[b-q1hloicpnu] {
    min-width: 0;
}

.mi-detail dt[b-q1hloicpnu] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.mi-detail dd[b-q1hloicpnu] {
    margin: 0;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.mi-match[b-q1hloicpnu],
.mi-nameplate-message[b-q1hloicpnu] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.mi-match-icon[b-q1hloicpnu] {
    color: var(--text-muted);
    flex-shrink: 0;
}

.mi-match-icon--ok[b-q1hloicpnu] {
    color: var(--accent-success-text);
}

.mi-actions[b-q1hloicpnu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.mi-hint[b-q1hloicpnu] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.mi-nameplate[b-q1hloicpnu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    min-width: 0;
}

.mi-table[b-q1hloicpnu] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.mi-table th[b-q1hloicpnu],
.mi-table td[b-q1hloicpnu] {
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.mi-table th[b-q1hloicpnu] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.mi-table td:first-child[b-q1hloicpnu],
.mi-table th:first-child[b-q1hloicpnu] {
    width: 3.5rem;
}
/* /Components/Oem/SerialLookupModal.razor.rz.scp.css */
.sl-title[b-u2wr8ix4zz] {
    margin: 0;
}

.sl-body[b-u2wr8ix4zz] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.sl-form[b-u2wr8ix4zz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px 16px;
    align-items: start;
}

.sl-field[b-u2wr8ix4zz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sl-label[b-u2wr8ix4zz] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sl-help[b-u2wr8ix4zz] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.sl-actions[b-u2wr8ix4zz] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 1 / -1;
}

.sl-error[b-u2wr8ix4zz] {
    margin: 0;
    color: var(--accent-danger-text);
}

.sl-result[b-u2wr8ix4zz] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    min-width: 0;
}

.sl-message[b-u2wr8ix4zz] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    color: var(--text-primary);
}

.sl-icon[b-u2wr8ix4zz] {
    flex-shrink: 0;
    color: var(--text-muted);
}

.sl-icon--ok[b-u2wr8ix4zz] {
    color: var(--accent-success-text);
}

.sl-details[b-u2wr8ix4zz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 16px;
    margin: 0;
}

.sl-detail[b-u2wr8ix4zz] {
    min-width: 0;
}

.sl-detail dt[b-u2wr8ix4zz] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.sl-detail dd[b-u2wr8ix4zz] {
    margin: 0;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
/* /Components/Photo/AmxDiagram.razor.rz.scp.css */
/* Scoped rather than the global <style> block this component used to carry: the diagram sits inside
   a wrapper that has a .photo-wrapper of its own, and the old rules leaked out to every photo on the
   page. The hover affordance and full screen behaviour deliberately mirror AmxPhoto - a diagram and
   a photo are the same thing to look at, so they should read and behave the same. */
.photo-wrapper[b-636kgzhn08] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
}

.photo-wrapper .amx-photo[b-636kgzhn08] {
    /* Containing block for the overlay below. */
    position: relative;
    border-radius: 6px;
}

/* A diagram is drawn to whatever shape it was authored at, so it keeps its own aspect ratio rather
   than being forced into the photo control's 16/9 box. */
.photo-wrapper .amx-photo > img[b-636kgzhn08] {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 700px;
    object-fit: contain;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.photo-wrapper .amx-photo:hover > img[b-636kgzhn08] {
    cursor: pointer !important;
}

/* Hover affordance: a glass wash over the diagram with a single small expand control in the middle.
   Sized as a fixed circle rather than a panel so it stays unobtrusive on a small control. Pure CSS -
   nothing here is driven from script.

   The wash is a pseudo-element and the button carries its own visibility, rather than fading a
   shared parent. That is what lets keyboard focus reveal the button on its own, and it keeps the
   reveal tied to :hover and :focus-visible - :focus-within would leave the overlay stuck on after
   the button was clicked, because closing the viewer puts focus back on it. */
.photo-wrapper .amx-photo .amx-photo-actions[b-636kgzhn08] {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    /* Never swallows a click meant for the diagram underneath; only the button takes pointer input. */
    pointer-events: none;
}

.photo-wrapper .amx-photo .amx-photo-actions[b-636kgzhn08]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: rgba(17, 24, 39, .18);
    backdrop-filter: blur(2px) saturate(115%);
    -webkit-backdrop-filter: blur(2px) saturate(115%);
    opacity: 0;
    transition: opacity 120ms ease;
}

.photo-wrapper .amx-photo:hover .amx-photo-actions[b-636kgzhn08]::before {
    opacity: 1;
}

.photo-wrapper .amx-photo .amx-photo-action[b-636kgzhn08] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .65);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
    color: #111827;
    font-size: 13px;
    cursor: pointer;
    opacity: 0;
    pointer-events: auto;
    transition: opacity 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.photo-wrapper .amx-photo:hover .amx-photo-action[b-636kgzhn08],
.photo-wrapper .amx-photo .amx-photo-action:focus-visible[b-636kgzhn08] {
    opacity: 1;
}

.photo-wrapper .amx-photo .amx-photo-action:hover[b-636kgzhn08] {
    background: rgba(255, 255, 255, .95);
    transform: scale(1.06);
}

.photo-wrapper .amx-photo .amx-photo-action:focus-visible[b-636kgzhn08] {
    outline: 2px solid var(--accent-primary, #3b82f6);
    outline-offset: 2px;
}

/* Touch devices have no hover to reveal it, but washing out the whole picture permanently would be
   worse than useless on a small control - so the control sits quietly in the corner instead. */
@media (pointer: coarse) {
    .photo-wrapper .amx-photo .amx-photo-actions[b-636kgzhn08] {
        inset: auto 6px 6px auto;
    }

    .photo-wrapper .amx-photo .amx-photo-actions[b-636kgzhn08]::before {
        content: none;
    }

    .photo-wrapper .amx-photo .amx-photo-action[b-636kgzhn08] {
        width: 32px;
        height: 32px;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .photo-wrapper .amx-photo .amx-photo-actions[b-636kgzhn08]::before,
    .photo-wrapper .amx-photo .amx-photo-action[b-636kgzhn08] {
        transition: none;
    }

    .photo-wrapper .amx-photo .amx-photo-action:hover[b-636kgzhn08] {
        transform: none;
    }
}

/* Dark theme: the light glass disc reads as a bright blob against a dark form, and its near-black
   glyph fights everything around it. Same treatment, inverted - the wash goes deeper and the disc
   becomes dark with a light icon. */
[data-theme="dark"] .photo-wrapper .amx-photo .amx-photo-actions[b-636kgzhn08]::before {
    background: rgba(0, 0, 0, .38);
}

[data-theme="dark"] .photo-wrapper .amx-photo .amx-photo-action[b-636kgzhn08] {
    background: rgba(17, 24, 39, .72);
    border-color: rgba(255, 255, 255, .22);
    color: var(--text-primary, #e6e9f2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

[data-theme="dark"] .photo-wrapper .amx-photo .amx-photo-action:hover[b-636kgzhn08] {
    background: rgba(17, 24, 39, .92);
}
/* /Components/Photo/AmxPhoto.razor.rz.scp.css */
.photo-wrapper[b-b02mc0askd] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
}

.photo-wrapper .amx-photo[b-b02mc0askd] {
    position: relative;
    border-radius: 6px;
}

.photo-wrapper .amx-photo > img[b-b02mc0askd] {
    display: block;
    height: inherit;
    width: auto;
    max-width: 100%;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
    aspect-ratio: 16/9;
    object-fit: contain;
}

.photo-wrapper .amx-photo:hover > img[b-b02mc0askd] {
    cursor: pointer !important;
}

.fullscreen-image-wrapper[b-b02mc0askd] {
    width: 100%;
    position: relative;
    height: 100%;
}

.fullscreen-image-wrapper .image-fullscreen[b-b02mc0askd] {
    width: 100%;
    height: auto;
    max-width: 100%;
}

.date-taken-stamp[b-b02mc0askd] {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
    padding: 8px;
    background-color: #ffffff;
    border-radius: 6px;
    border: 1px solid #f1f5f9;
}

/* Hover affordance: a glass wash over the photo with a single small expand control in the middle.
   Sized as a fixed circle rather than a panel so it stays unobtrusive on a thumbnail. Pure CSS -
   nothing here is driven from script.

   The wash is a pseudo-element and the button carries its own visibility, rather than fading a
   shared parent. That is what lets keyboard focus reveal the button on its own, and it keeps the
   reveal tied to :hover and :focus-visible - :focus-within would leave the overlay stuck on after
   the button was clicked, because closing the viewer puts focus back on it. */
.photo-wrapper .amx-photo .amx-photo-actions[b-b02mc0askd] {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    /* Never swallows a click meant for the photo underneath; only the button takes pointer input. */
    pointer-events: none;
}

.photo-wrapper .amx-photo .amx-photo-actions[b-b02mc0askd]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: rgba(17, 24, 39, .18);
    backdrop-filter: blur(2px) saturate(115%);
    -webkit-backdrop-filter: blur(2px) saturate(115%);
    opacity: 0;
    transition: opacity 120ms ease;
}

.photo-wrapper .amx-photo:hover .amx-photo-actions[b-b02mc0askd]::before {
    opacity: 1;
}

.photo-wrapper .amx-photo .amx-photo-action[b-b02mc0askd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .65);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
    color: #111827;
    font-size: 13px;
    cursor: pointer;
    opacity: 0;
    pointer-events: auto;
    transition: opacity 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.photo-wrapper .amx-photo:hover .amx-photo-action[b-b02mc0askd],
.photo-wrapper .amx-photo .amx-photo-action:focus-visible[b-b02mc0askd] {
    opacity: 1;
}

.photo-wrapper .amx-photo .amx-photo-action:hover[b-b02mc0askd] {
    background: rgba(255, 255, 255, .95);
    transform: scale(1.06);
}

.photo-wrapper .amx-photo .amx-photo-action:focus-visible[b-b02mc0askd] {
    outline: 2px solid var(--accent-primary, #3b82f6);
    outline-offset: 2px;
}

/* Touch devices have no hover to reveal it, but washing out the whole picture permanently would be
   worse than useless on a thumbnail - so the control sits quietly in the corner instead. */
@media (pointer: coarse) {
    .photo-wrapper .amx-photo .amx-photo-actions[b-b02mc0askd] {
        inset: auto 6px 6px auto;
    }

    .photo-wrapper .amx-photo .amx-photo-actions[b-b02mc0askd]::before {
        content: none;
    }

    .photo-wrapper .amx-photo .amx-photo-action[b-b02mc0askd] {
        width: 32px;
        height: 32px;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .photo-wrapper .amx-photo .amx-photo-actions[b-b02mc0askd]::before,
    .photo-wrapper .amx-photo .amx-photo-action[b-b02mc0askd] {
        transition: none;
    }

    .photo-wrapper .amx-photo .amx-photo-action:hover[b-b02mc0askd] {
        transform: none;
    }
}

/* Dark theme: the light glass disc reads as a bright blob against a dark form, and its near-black
   glyph fights everything around it. Same treatment, inverted - the wash goes deeper and the disc
   becomes dark with a light icon. */
[data-theme="dark"] .photo-wrapper .amx-photo .amx-photo-actions[b-b02mc0askd]::before {
    background: rgba(0, 0, 0, .38);
}

[data-theme="dark"] .photo-wrapper .amx-photo .amx-photo-action[b-b02mc0askd] {
    background: rgba(17, 24, 39, .72);
    border-color: rgba(255, 255, 255, .22);
    color: var(--text-primary, #e6e9f2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

[data-theme="dark"] .photo-wrapper .amx-photo .amx-photo-action:hover[b-b02mc0askd] {
    background: rgba(17, 24, 39, .92);
}
/* /Components/Photo/AmxPhotoAnnotator.razor.rz.scp.css */
.annotator-container[b-19hcb3m9lt] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 12px;
    padding: 12px;
    background-color: #f8f9fa;
}

.annotator-toolbar[b-19hcb3m9lt] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 10px;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.annotator-tool-group[b-19hcb3m9lt] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.annotator-tool-btn[b-19hcb3m9lt] {
    min-width: 38px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.annotator-tool-btn.active[b-19hcb3m9lt] {
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.3);
}

.annotator-color-picker[b-19hcb3m9lt] {
    width: 38px;
    height: 38px;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    padding: 2px;
    cursor: pointer;
    background: none;
}

.annotator-select[b-19hcb3m9lt] {
    height: 38px;
    min-width: 80px;
    border-radius: 6px;
    font-size: 0.85rem;
    padding: 4px 8px;
}

.annotator-text-group[b-19hcb3m9lt] {
    flex: 1;
    min-width: 200px;
}

.annotator-text-hint[b-19hcb3m9lt] {
    flex: 1;
    min-width: 150px;
    font-size: 0.85rem;
    color: #475569;
}

.annotator-canvas-area[b-19hcb3m9lt] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #e9ecef;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    min-height: 0;
}

.annotator-footer[b-19hcb3m9lt] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 8px 0 0 0;
}

/* Dark mode — the annotator uses hard-coded light surfaces; align with the
   app's [data-theme="dark"] palette. Scoped CSS appends the component's scope
   attribute to the target element, and [data-theme] on the ancestor still matches. */
[data-theme="dark"] .annotator-container[b-19hcb3m9lt] {
    background-color: #0f1524;
}

[data-theme="dark"] .annotator-toolbar[b-19hcb3m9lt] {
    background-color: #111726;
    border-color: #202840;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .annotator-color-picker[b-19hcb3m9lt] {
    border-color: #2c3552;
}

[data-theme="dark"] .annotator-text-hint[b-19hcb3m9lt] {
    color: #98a2b8;
}

[data-theme="dark"] .annotator-canvas-area[b-19hcb3m9lt] {
    background-color: #0a0e1a;
    border-color: #202840;
}

/* ── Zoom ────────────────────────────────────────────────────────────────
   The readout doubles as the fit button, so it has to be wide enough that the
   group does not resize as the number goes from 75% to 150% to 1000% - a
   control that moves under the pointer as you press it is its own bug. */

.annotator-zoom-readout[b-19hcb3m9lt] {
    min-width: 62px;
    font-variant-numeric: tabular-nums;
}

/* Pushed to the end of the toolbar: zoom is about looking, not drawing, so it
   sits apart from the tools rather than among them. */
.annotator-zoom-group[b-19hcb3m9lt] {
    margin-left: auto;
}

.annotator-zoom-hint[b-19hcb3m9lt] {
    margin: 4px 0 0;
    font-size: 0.75rem;
    color: #64748b;
    text-align: center;
}

[data-theme="dark"] .annotator-zoom-hint[b-19hcb3m9lt] {
    color: #98a2b8;
}
/* /Components/Photo/AmxSignaturePad.razor.rz.scp.css */
.signature-pad[b-5mnus10mgg] {
    color: var(--text-primary);
}

.signature-pad canvas[b-5mnus10mgg] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    aspect-ratio: 5 / 2;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-md);
    touch-action: none;
    cursor: crosshair;
}

.signature-pad canvas:focus[b-5mnus10mgg] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 2px;
}

.signature-action:focus-visible[b-5mnus10mgg] {
    outline: 2px solid var(--border-focus, var(--accent-primary)) !important;
    outline-offset: 2px;
}

.signature-action.dbd-success[b-5mnus10mgg] {
    background: var(--accent-success-fill) !important;
    border-color: var(--accent-success-fill) !important;
    color: var(--text-on-dark) !important;
}
/* /Components/Print/PrintProgressPanel.razor.rz.scp.css */
/* ── Print progress (PrintProgressPanel) ─────────────────────
   Shared by the Print window and Bulk Print. Flat fill, no stripes or gradient (DESIGN_LANGUAGE §1); the track
   edge uses the same field border as the output buttons so it holds 3:1 against the card in both themes. */
.pp-panel[b-2blecl45vm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--field-border-view);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.pp-panel:focus-visible[b-2blecl45vm] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 2px;
}

.pp-kind[b-2blecl45vm] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.pp-figures[b-2blecl45vm] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}

.pp-percent[b-2blecl45vm] {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.pp-time[b-2blecl45vm] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.pp-track[b-2blecl45vm] {
    height: 8px;
    border-radius: 999px;
    border: 1px solid var(--field-border-view);
    background: color-mix(in srgb, var(--accent-success-fill) 10%, var(--bg-card));
    overflow: hidden;
}

.pp-fill[b-2blecl45vm] {
    height: 100%;
    background: var(--accent-success-fill);
    transition: width 0.35s ease;
}

.pp-stages[b-2blecl45vm] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-stage[b-2blecl45vm] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm, 6px);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pp-stage.current[b-2blecl45vm] {
    background: color-mix(in srgb, var(--accent-success-fill) 10%, var(--bg-card));
    color: var(--text-primary);
}

.pp-stage.done .pp-stage-icon[b-2blecl45vm],
.pp-stage.current .pp-stage-icon[b-2blecl45vm],
.pp-stage.current .pp-stage-title[b-2blecl45vm] {
    color: var(--accent-success-text);
}

.pp-stage.todo .pp-stage-icon i[b-2blecl45vm] {
    font-size: 0.55rem;
    vertical-align: middle;
}

.pp-stage-icon[b-2blecl45vm] {
    flex: 0 0 1rem;
    text-align: center;
    line-height: 1.35rem;
}

.pp-stage-text[b-2blecl45vm] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35rem;
}

.pp-stage.current .pp-stage-title[b-2blecl45vm] {
    font-weight: 600;
}

.pp-stage-detail[b-2blecl45vm] {
    font-size: 0.78rem;
    line-height: 1.25rem;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.pp-stage-time[b-2blecl45vm] {
    flex: 0 0 auto;
    font-size: 0.78rem;
    line-height: 1.35rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.pp-foot[b-2blecl45vm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--field-border-view);
}

.pp-basis[b-2blecl45vm] {
    flex: 1 1 14rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.pp-spin[b-2blecl45vm] {
    animation: pp-spin-b-2blecl45vm 0.9s linear infinite;
}

@keyframes pp-spin-b-2blecl45vm {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pp-spin[b-2blecl45vm] {
        animation: none;
    }

    .pp-fill[b-2blecl45vm] {
        transition: none;
    }
}
/* /Components/Print/PrintTemplateRunner.razor.rz.scp.css */
.ptr-title[b-bj1pwbos1s] {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-width: 0;
}

.ptr-heading[b-bj1pwbos1s] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ptr-subtitle[b-bj1pwbos1s] {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
}
/* /Components/Print/PrintTemplatesModal.razor.rz.scp.css */
/* ── Print ────────────────────────────────────────────────────────────────
   Two labelled steps: choose a template (left), then an output (right). Every
   output is a named button with a one-line description; Open PDF is the one
   green primary. Stacks to one column on narrow screens. Tokens only, so light
   and dark both work. */

/* ── Header ───────────────────────────────────────────────────────────── */
.pt-header[b-sj3cmcuwp8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.pt-title[b-sj3cmcuwp8] {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-width: 0;
}

.pt-heading[b-sj3cmcuwp8] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.pt-subtitle[b-sj3cmcuwp8] {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* ── Layout ───────────────────────────────────────────────────────────── */
.pt-page[b-sj3cmcuwp8] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
    flex: 1;
    min-height: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.pt-pick[b-sj3cmcuwp8],
.pt-act[b-sj3cmcuwp8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    min-width: 0;
    padding: 1rem;
}

.pt-pick[b-sj3cmcuwp8] {
    border-right: 1px solid var(--border-color);
}

.pt-act[b-sj3cmcuwp8] {
    overflow-y: auto;
    background: var(--bg-secondary);
}

@media (max-width: 760px) {
    .pt-page[b-sj3cmcuwp8] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(12rem, 1fr) auto;
        overflow-y: auto;
    }

    .pt-pick[b-sj3cmcuwp8] {
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .pt-act[b-sj3cmcuwp8] {
        overflow: visible;
    }
}

/* Step headings: "1 Choose a template", "2 Choose an output". */
.pt-step[b-sj3cmcuwp8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}

.pt-step-n[b-sj3cmcuwp8] {
    display: inline-grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--accent-success-fill);
    color: var(--text-on-dark);
    font-size: 0.72rem;
}

/* ── Search ───────────────────────────────────────────────────────────── */
.pt-search[b-sj3cmcuwp8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.4rem;
    padding: 0 0.4rem 0 0.75rem;
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-muted);
}

.pt-search:focus-within[b-sj3cmcuwp8] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 1px;
}

.pt-search input[b-sj3cmcuwp8] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
}

.pt-search input[b-sj3cmcuwp8]::placeholder {
    color: var(--text-muted);
}

.pt-search-clear[b-sj3cmcuwp8] {
    display: inline-grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.pt-search-clear:hover[b-sj3cmcuwp8] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ── Scope: all templates / this record only (DESIGN_LANGUAGE §Segmented control) ── */
.pt-scope[b-sj3cmcuwp8] {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 3px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--dbd-subtle);
    min-width: 0;
}

.pt-scope input[b-sj3cmcuwp8] {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.pt-scope label[b-sj3cmcuwp8] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-radius: calc(var(--radius-md) - 2px);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.pt-scope label:hover[b-sj3cmcuwp8] {
    color: var(--text-primary);
}

.pt-scope input:checked + label[b-sj3cmcuwp8] {
    background: var(--dbd-surface);
    box-shadow: var(--shadow-sm);
    color: var(--accent-success-text);
}

.pt-scope input:focus-visible + label[b-sj3cmcuwp8] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 1px;
}

.pt-scope-count[b-sj3cmcuwp8] {
    font-weight: 500;
    color: var(--text-muted);
}

/* ── Template list ────────────────────────────────────────────────────── */
.pt-list[b-sj3cmcuwp8] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    margin: 0 -0.25rem;
    padding: 0 0.25rem 0.25rem;
}

.pt-cat[b-sj3cmcuwp8],
.pt-sub[b-sj3cmcuwp8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.25rem;
    padding: 0.5rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.pt-cat:hover[b-sj3cmcuwp8],
.pt-sub:hover[b-sj3cmcuwp8] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.pt-folder + .pt-folder[b-sj3cmcuwp8] {
    margin-top: 0.25rem;
}

.pt-folder-chevron[b-sj3cmcuwp8] {
    flex: none;
    width: 0.75rem;
    font-size: 0.65rem;
    text-align: center;
}

.pt-folder-icon[b-sj3cmcuwp8] {
    flex: none;
    width: 1rem;
    text-align: center;
}

.pt-folder-name[b-sj3cmcuwp8] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.pt-folder-content[b-sj3cmcuwp8] {
    margin-left: 0.75rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--border-color);
}

.pt-cat-count[b-sj3cmcuwp8] {
    flex: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.pt-sub[b-sj3cmcuwp8] {
    font-size: 0.8rem;
}

.pt-row[b-sj3cmcuwp8] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin-bottom: 2px;
    padding: 0.6rem 0.65rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.pt-row:hover:not(:disabled)[b-sj3cmcuwp8] {
    background: var(--bg-hover);
}

.pt-row:focus-visible[b-sj3cmcuwp8],
.pt-cat:focus-visible[b-sj3cmcuwp8],
.pt-sub:focus-visible[b-sj3cmcuwp8],
.pt-search-clear:focus-visible[b-sj3cmcuwp8],
.pt-output:focus-visible[b-sj3cmcuwp8],
.pt-design:focus-visible[b-sj3cmcuwp8] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 2px;
}

.pt-row:disabled[b-sj3cmcuwp8] {
    cursor: default;
    opacity: 0.6;
}

.pt-row-icon[b-sj3cmcuwp8] {
    width: 1rem;
    text-align: center;
    color: var(--text-muted);
}

.pt-row-text[b-sj3cmcuwp8] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-row-chip[b-sj3cmcuwp8] {
    flex: none;
    padding: 0.05rem 0.45rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent-warning-text);
}

.pt-row-chip--record[b-sj3cmcuwp8] {
    color: var(--accent-success-text);
}

.pt-row-tick[b-sj3cmcuwp8] {
    visibility: hidden;
    color: var(--accent-success-text);
}

.pt-row.selected[b-sj3cmcuwp8] {
    background: color-mix(in srgb, var(--accent-success-fill) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-success-fill) 35%, transparent);
    color: var(--accent-success-text);
    font-weight: 600;
}

.pt-row.selected .pt-row-icon[b-sj3cmcuwp8],
.pt-row.selected .pt-row-tick[b-sj3cmcuwp8] {
    visibility: visible;
    color: var(--accent-success-text);
}

/* ── Output panel ─────────────────────────────────────────────────────── */
.pt-chosen[b-sj3cmcuwp8] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.pt-chosen small[b-sj3cmcuwp8] {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.pt-chosen b[b-sj3cmcuwp8] {
    font-size: 0.98rem;
    overflow-wrap: anywhere;
}

.pt-outputs[b-sj3cmcuwp8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pt-output[b-sj3cmcuwp8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--field-border-view);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.pt-output:hover:not(:disabled)[b-sj3cmcuwp8] {
    border-color: color-mix(in srgb, var(--accent-success-fill) 45%, transparent);
    background: color-mix(in srgb, var(--accent-success-fill) 8%, var(--bg-card));
}

.pt-output:disabled[b-sj3cmcuwp8] {
    cursor: default;
    opacity: 0.65;
}

.pt-output[aria-busy="true"][b-sj3cmcuwp8] {
    opacity: 1;
}

.pt-output-icon[b-sj3cmcuwp8] {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.pt-output-text[b-sj3cmcuwp8] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.pt-output-title[b-sj3cmcuwp8] {
    font-weight: 600;
}

.pt-output-desc[b-sj3cmcuwp8] {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.pt-output.primary[b-sj3cmcuwp8] {
    border-color: var(--accent-success-fill);
    background: var(--accent-success-fill);
    color: var(--text-on-dark);
}

.pt-output.primary .pt-output-icon[b-sj3cmcuwp8] {
    background: color-mix(in srgb, var(--text-on-dark) 18%, transparent);
    color: var(--text-on-dark);
}

.pt-output.primary .pt-output-desc[b-sj3cmcuwp8] {
    color: var(--text-on-dark);
}

.pt-output.primary:hover:not(:disabled)[b-sj3cmcuwp8] {
    border-color: var(--accent-success-fill);
    background: color-mix(in srgb, var(--accent-success-fill) 88%, var(--text-primary));
}

/* Design is not an output, so it sits apart and quieter. */
.pt-design[b-sj3cmcuwp8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    padding: 0.55rem 0.75rem;
    border: 1px dashed var(--field-border-view);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}

.pt-design:hover:not(:disabled)[b-sj3cmcuwp8] {
    background: var(--bg-card);
    color: var(--text-primary);
}

.pt-act-empty[b-sj3cmcuwp8] {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

.pt-act-empty > i[b-sj3cmcuwp8] {
    font-size: 1.25rem;
}

/* ── Reporting period ─────────────────────────────────────────────────── */
.pt-date[b-sj3cmcuwp8] {
    margin: 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.pt-date legend[b-sj3cmcuwp8] {
    float: left;
    width: 100%;
    margin-bottom: 0.5rem;
    font-size: 0.86rem;
    font-weight: 600;
}

.pt-date-fields[b-sj3cmcuwp8] {
    clear: both;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.6rem;
}

.pt-field[b-sj3cmcuwp8] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.pt-error[b-sj3cmcuwp8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--accent-danger-text);
}

/* ── Loading skeleton ─────────────────────────────────────────────────── */
.pt-skeleton[b-sj3cmcuwp8] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
}

.pt-skeleton-row[b-sj3cmcuwp8] {
    display: flex;
    align-items: center;
    height: 1.6rem;
}

/* A flat pulse - no gradient shimmer (DESIGN_LANGUAGE rule 1). */
.pt-skeleton-cell[b-sj3cmcuwp8] {
    width: 70%;
    height: 0.85rem;
    border-radius: 4px;
    background: var(--bg-hover);
    animation: pt-pulse-b-sj3cmcuwp8 1.4s ease-in-out infinite;
}

.pt-skeleton-row:nth-child(even) .pt-skeleton-cell[b-sj3cmcuwp8] {
    width: 55%;
}

@keyframes pt-pulse-b-sj3cmcuwp8 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .pt-skeleton-cell[b-sj3cmcuwp8] {
        animation: none;
    }
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.pt-empty[b-sj3cmcuwp8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

.pt-empty > i[b-sj3cmcuwp8] {
    font-size: 1.75rem;
}

.pt-empty span[b-sj3cmcuwp8] {
    font-weight: 600;
    color: var(--text-secondary);
}
/* /Components/ReportEditor/RelatedReportHelp.razor.rz.scp.css */
.related-report-help[b-jv7m8p9msy] {
    flex-shrink: 0;
    margin: var(--space-2, .5rem) var(--space-3, .75rem) 0;
    padding: var(--space-3, .75rem) var(--space-4, 1rem);
    max-height: 35vh;
    overflow-y: auto;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--text-sm, .8125rem);
    line-height: 1.5;
}

.related-report-help h2[b-jv7m8p9msy] {
    margin: 0 0 var(--space-2, .5rem);
    color: var(--text-primary);
    font-size: var(--text-base, .875rem);
    font-weight: 600;
}

.related-report-help p[b-jv7m8p9msy] {
    margin: 0 0 var(--space-2, .5rem);
}

.related-report-help p:last-child[b-jv7m8p9msy] {
    margin-bottom: 0;
}

.related-report-help ul[b-jv7m8p9msy],
.related-report-help ol[b-jv7m8p9msy] {
    margin: 0 0 var(--space-2, .5rem);
    padding-left: var(--space-6, 1.5rem);
}

.related-report-help ul[b-jv7m8p9msy] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-6, 1.5rem);
}

.related-report-help strong[b-jv7m8p9msy] {
    font-weight: 600;
}

.related-report-help-warning[b-jv7m8p9msy] {
    color: var(--accent-warning-text);
}

.related-report-help:focus-visible[b-jv7m8p9msy] {
    outline: 2px solid var(--border-focus, var(--accent-success-text));
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .related-report-help ul[b-jv7m8p9msy] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/ReportEditor/ReportConfirmedAnomalyChecks.razor.rz.scp.css */
.confirmed-checks[b-6xt0ha4eo9] { min-width: 0; color: var(--text-primary); overflow-wrap: anywhere; white-space: normal; }
.confirmed-checks h2[b-6xt0ha4eo9] { margin: 0 0 var(--space-3); font-size: 1rem; font-weight: 600; }
.confirmed-checks p[b-6xt0ha4eo9] { margin: 0 0 var(--space-3); color: var(--text-secondary); }
.checks-toolbar[b-6xt0ha4eo9] { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.checks-toolbar p[b-6xt0ha4eo9] { margin: 0; }
.confirmed-check[b-6xt0ha4eo9] { margin-bottom: var(--space-3); border: 1px solid var(--border-interactive); border-radius: 8px; background: var(--bg-card); overflow-wrap: anywhere; }
.confirmed-check summary[b-6xt0ha4eo9] { display: list-item; min-height: 44px; padding: var(--space-3); cursor: pointer; font-weight: 600; }
.confirmed-check summary span[b-6xt0ha4eo9] { margin-right: var(--space-3); }
.confirmed-check summary span:not(:first-child)[b-6xt0ha4eo9] { color: var(--text-secondary); font-weight: 400; }
.confirmed-check fieldset[b-6xt0ha4eo9] { min-width: 0; padding: var(--space-3); border: 0; border-top: 1px solid var(--border-color); }
.check-fields[b-6xt0ha4eo9] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.check-fields > div[b-6xt0ha4eo9] { min-width: 0; }
.check-fields label[b-6xt0ha4eo9] { display: block; margin-bottom: var(--space-1); font-weight: 600; }
.check-fields input[b-6xt0ha4eo9] { width: 100%; min-height: 36px; padding: var(--space-2); border: 1px solid var(--border-interactive); border-radius: 6px; background: var(--bg-input); color: var(--text-primary); }
.check-lookup-value[b-6xt0ha4eo9] { display: flex; gap: var(--space-2); }
.check-lookup-value input[b-6xt0ha4eo9] { flex: 1; min-width: 0; }
.check-lookup-value button[b-6xt0ha4eo9] { flex-shrink: 0; }
.check-lookup-picker[b-6xt0ha4eo9] { color: var(--text-primary); min-width: 0; overflow-wrap: anywhere; }
.check-lookup-picker label[b-6xt0ha4eo9] { display: block; margin-bottom: var(--space-1); font-weight: 600; }
.check-lookup-picker input[b-6xt0ha4eo9] { margin-bottom: var(--space-3); }
.check-lookup-tree[b-6xt0ha4eo9] { height: min(50vh, 400px); overflow: auto; border: 1px solid var(--border-interactive); border-radius: 6px; }
.check-lookup-tree[b-6xt0ha4eo9]  .node-item-content { min-height: 36px; display: flex; align-items: center; white-space: normal; overflow-wrap: anywhere; }
.check-lookup-tree[b-6xt0ha4eo9]  .expand-icon-container { min-height: 36px; min-width: 24px; }
.check-lookup-picker :focus-visible[b-6xt0ha4eo9] { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.check-lookup-tree[b-6xt0ha4eo9]  .node-item-content:focus-visible,
.check-lookup-tree[b-6xt0ha4eo9]  .expand-icon-container:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.check-actions[b-6xt0ha4eo9] { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.confirmed-checks .check-error[b-6xt0ha4eo9] { color: var(--accent-danger-text); margin-top: var(--space-1); }
.confirmed-checks :focus-visible[b-6xt0ha4eo9] { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.confirmed-checks summary:focus-visible[b-6xt0ha4eo9] { outline-offset: -3px; }
/* /Components/ReportEditor/ReportEditorDiagram.razor.rz.scp.css */
.report-diagram[b-835qqwhdtj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.report-diagram-help[b-835qqwhdtj] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.report-diagram-viewport[b-835qqwhdtj] {
    max-height: min(70vh, 900px);
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
}

.report-diagram-viewport:focus-visible[b-835qqwhdtj] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.report-diagram-canvas[b-835qqwhdtj] {
    position: relative;
    box-sizing: border-box;
    min-width: 100%;
}

.report-diagram-links[b-835qqwhdtj] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.report-diagram-link[b-835qqwhdtj] {
    fill: none;
    stroke: var(--accent-primary);
    stroke-width: 2.5;
}

.report-diagram-arrowhead[b-835qqwhdtj] {
    fill: var(--accent-primary);
}

.report-diagram-card[b-835qqwhdtj] {
    position: absolute;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.report-diagram-card-main[b-835qqwhdtj] {
    border-color: var(--accent-primary);
}

.report-diagram-card-header[b-835qqwhdtj] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    height: 78px;
    flex: 0 0 78px;
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.report-diagram-card-main .report-diagram-card-header[b-835qqwhdtj] {
    background: var(--dbd-accent-soft);
}

.report-diagram-kicker[b-835qqwhdtj] {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.report-diagram-card-header h4[b-835qqwhdtj] {
    overflow: hidden;
    margin: 2px 0;
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-diagram-entity-name[b-835qqwhdtj] {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-diagram-fields[b-835qqwhdtj] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.report-diagram-empty[b-835qqwhdtj] {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 40px;
    padding: 0 var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.report-diagram-card-footer[b-835qqwhdtj] {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 38px;
    flex: 0 0 38px;
    overflow: hidden;
    padding: 0 var(--space-2);
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/ReportEditor/ReportEditorDiagramField.razor.rz.scp.css */
.report-diagram-field[b-1ng0x20s6t] {
    box-sizing: border-box;
    height: 40px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.report-diagram-field:last-child[b-1ng0x20s6t] {
    border-bottom: 0;
}

.report-diagram-field-content[b-1ng0x20s6t] {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    gap: var(--space-2);
    padding: 0 var(--space-2);
}

.report-diagram-field-action[b-1ng0x20s6t] {
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.report-diagram-field-action:hover[b-1ng0x20s6t] {
    background: var(--bg-hover);
}

.report-diagram-field-action:focus-visible[b-1ng0x20s6t] {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
}

.report-diagram-field-name[b-1ng0x20s6t] {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-diagram-field-code[b-1ng0x20s6t] {
    flex: 0 1 auto;
    max-width: 40%;
    overflow: hidden;
    color: var(--text-secondary);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-diagram-key[b-1ng0x20s6t] {
    flex: 0 0 auto;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 1px var(--space-1);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-weight: 600;
}
/* /Components/ReportEditor/ReportSaveProgress.razor.rz.scp.css */
.report-save-progress[b-fwnjx7dnzb] {
    box-sizing: border-box;
    width: min(24rem, calc(100% - 2rem));
    padding: 2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    color: var(--text-primary);
}

.report-save-progress[b-fwnjx7dnzb]::backdrop {
    background: var(--text-primary);
    opacity: 0.45;
}

.report-save-progress-content[b-fwnjx7dnzb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.report-save-progress h2[b-fwnjx7dnzb] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.report-save-progress p[b-fwnjx7dnzb] {
    margin: 0;
    color: var(--text-secondary);
}
/* /Components/ReportEditor/SaveReportModals/SaveReportModal.razor.rz.scp.css */
/* ===== Heading ===== */
.srm-heading[b-drrc45j6rn] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.srm-heading-icon[b-drrc45j6rn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    /* Flat accent fill — no gradient (DESIGN_LANGUAGE §1). Matches .amx-modal-head-icon's token. */
    background: var(--dbd-accent, #15803d);
    color: #fff;
    font-size: 0.78rem;
}

.srm-heading-text[b-drrc45j6rn] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.srm-heading-text .modal-title[b-drrc45j6rn] {
    font-size: 0.95rem;
    font-weight: 600;
}

.srm-heading-sub[b-drrc45j6rn] {
    font-size: 0.78rem;
    font-weight: 400;
    color: #6b6b73;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="dark"] .srm-heading-sub[b-drrc45j6rn] {
    color: #98a2b8;
}

/* ==========================================================================
   Save Report modal
   --------------------------------------------------------------------------
   Shared design language (DESIGN_LANGUAGE.md): flat surfaces, hairline borders,
   a single green accent. Tokens are scoped to the modal body so nothing leaks.
   ========================================================================== */

.srm-body[b-drrc45j6rn] {
    --srm-surface: #ffffff;
    --srm-subtle: #f4f4f5;
    --srm-fg: #18181b;
    --srm-muted: #6b6b73;
    --srm-border: #e4e4e7;
    --srm-border-strong: #d4d4d8;
    --srm-accent: #15803d;
    --srm-accent-strong: #166534;
    --srm-accent-soft: #f0fdf4;
    --srm-accent-rgb: 21, 128, 61;
    --srm-warn: #b45309;
    --srm-warn-soft: #fffbeb;

    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    color: var(--srm-fg);
}

[data-theme="dark"] .srm-body[b-drrc45j6rn] {
    --srm-surface: #111726;
    --srm-subtle: #1a2136;
    --srm-fg: #e6e9f2;
    --srm-muted: #98a2b8;
    --srm-border: #202840;
    --srm-border-strong: #2c3552;
    --srm-accent: #22c55e;
    --srm-accent-strong: #4ade80;
    --srm-accent-soft: rgba(34, 197, 94, .12);
    --srm-accent-rgb: 34, 197, 94;
    --srm-warn: #fbbf24;
    --srm-warn-soft: rgba(251, 191, 36, .12);
}

.srm-loading[b-drrc45j6rn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2rem 0;
}

/* Standing caveat about the save, not an error — stated once, quietly. */
.srm-note[b-drrc45j6rn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.55rem 0.75rem;
    background: var(--srm-warn-soft);
    border: 1px solid var(--srm-warn);
    border-radius: 8px;
    color: var(--srm-fg);
    font-size: 0.83rem;
}

.srm-note i[b-drrc45j6rn] {
    color: var(--srm-warn);
}

/* ===== Sections ===== */
.srm-section[b-drrc45j6rn] {
    display: flex;
    flex-direction: column;
    background: var(--srm-surface);
    border: 1px solid var(--srm-border);
    border-radius: 12px;
    overflow: hidden;
}

.srm-section-header[b-drrc45j6rn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    background: var(--srm-subtle);
    border-bottom: 1px solid var(--srm-border);
    border-left: 2px solid var(--srm-accent);
}

.srm-section-header h3[b-drrc45j6rn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--srm-muted);
}

.srm-section-header h3 i[b-drrc45j6rn] {
    color: var(--srm-accent);
    font-size: 0.85em;
}

.srm-count[b-drrc45j6rn] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--srm-muted);
}

.srm-section-body[b-drrc45j6rn] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem;
}

/* ===== Fields ===== */
.srm-grid[b-drrc45j6rn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

/* Two controls that are alternatives, with the word between them. */
.srm-grid-or[b-drrc45j6rn] {
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
}

.srm-or[b-drrc45j6rn] {
    padding-bottom: 0.55rem;
    color: var(--srm-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.srm-field[b-drrc45j6rn] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.srm-field > label[b-drrc45j6rn] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--srm-muted);
}

.srm-body .form-control[b-drrc45j6rn] {
    background: var(--srm-surface);
    border: 1px solid var(--srm-border-strong);
    border-radius: 8px;
    color: var(--srm-fg);
    font-size: 0.875rem;
    padding: 8px 10px;
}

.srm-body .form-control:focus[b-drrc45j6rn] {
    outline: none;
    border-color: var(--srm-accent);
    box-shadow: 0 0 0 3px rgba(var(--srm-accent-rgb), .15);
}

.srm-body .form-control:disabled[b-drrc45j6rn] {
    background: var(--srm-subtle);
    color: var(--srm-muted);
}

.srm-hint[b-drrc45j6rn] {
    margin: 0;
    color: var(--srm-muted);
    font-size: 0.8rem;
}

.srm-hint-warn[b-drrc45j6rn] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    color: var(--srm-warn);
}

/* ===== Report type choices ===== */
.srm-choices[b-drrc45j6rn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
}

.srm-choices[b-drrc45j6rn]  .srm-choice,
.srm-choice[b-drrc45j6rn] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.6rem 0.7rem;
    background: var(--srm-subtle);
    border: 1px solid var(--srm-border);
    border-radius: 8px;
    cursor: pointer;
}

.srm-choice:hover[b-drrc45j6rn] {
    border-color: var(--srm-border-strong);
}

.srm-choice span[b-drrc45j6rn] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.srm-choice strong[b-drrc45j6rn] {
    font-size: 0.875rem;
    font-weight: 600;
}

.srm-choice small[b-drrc45j6rn] {
    color: var(--srm-muted);
    font-size: 0.76rem;
}

/* ===== Role sharing ===== */
.srm-roles[b-drrc45j6rn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.srm-role-column[b-drrc45j6rn] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.srm-role-heading[b-drrc45j6rn] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--srm-muted);
}

.srm-role-list[b-drrc45j6rn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 190px;
    overflow-y: auto;
    padding: 4px;
    background: var(--srm-subtle);
    border: 1px solid var(--srm-border);
    border-radius: 8px;
}

.srm-role[b-drrc45j6rn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--srm-fg);
    font-size: 0.83rem;
    text-align: left;
    cursor: pointer;
}

.srm-role:hover[b-drrc45j6rn] {
    background: var(--srm-surface);
    border-color: var(--srm-border);
}

.srm-role:focus-visible[b-drrc45j6rn] {
    outline: none;
    border-color: var(--srm-accent);
    box-shadow: 0 0 0 3px rgba(var(--srm-accent-rgb), .15);
}

.srm-role i[b-drrc45j6rn] {
    flex: 0 0 auto;
    width: 12px;
    font-size: 0.7rem;
    color: var(--srm-muted);
}

.srm-role.is-selected i[b-drrc45j6rn] {
    color: var(--srm-accent-strong);
}

.srm-role span[b-drrc45j6rn] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srm-role-empty[b-drrc45j6rn] {
    padding: 0.5rem;
    color: var(--srm-muted);
    font-size: 0.8rem;
    font-style: italic;
}

/* Read-only "in use by" list on a system report save. Height is counted in whole rows so the list
   never folds mid-line: six rows plus the box's own padding and hairline. */
.srm-usage[b-drrc45j6rn] {
    --srm-usage-row: 22px;

    display: flex;
    flex-direction: column;
    max-height: calc(var(--srm-usage-row) * 6 + 14px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 6px 8px;
    list-style: none;
    background: var(--srm-subtle);
    border: 1px solid var(--srm-border);
    border-radius: 8px;
    font-size: 0.83rem;
}

/* Scrollable, so it is in the tab order (ACCESSIBILITY_LANGUAGE §3) and needs a focus ring. */
.srm-usage:focus-visible[b-drrc45j6rn] {
    outline: none;
    border-color: var(--srm-accent);
    box-shadow: 0 0 0 3px rgba(var(--srm-accent-rgb), .15);
}

/* flex: 0 0 auto is load-bearing: `overflow: hidden` below cancels a flex item's automatic minimum
   size, so without it a long list shrinks every row instead of scrolling and clips the text. */
.srm-usage li[b-drrc45j6rn] {
    flex: 0 0 auto;
    height: var(--srm-usage-row);
    padding: 0 4px;
    line-height: var(--srm-usage-row);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .srm-grid-or[b-drrc45j6rn] {
        grid-template-columns: 1fr;
    }

    .srm-or[b-drrc45j6rn] {
        padding-bottom: 0;
    }

    .srm-roles[b-drrc45j6rn] {
        grid-template-columns: 1fr;
    }
}
/* /Components/ReportPlanning/ReportPlanningModal.razor.rz.scp.css */
.planning-form[b-jtkvvuscqm] { display: flex; flex-direction: column; gap: .875rem; color: var(--text-primary); }
.planning-form p[b-jtkvvuscqm] { margin: 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.planning-field[b-jtkvvuscqm] { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.planning-field label[b-jtkvvuscqm], .planning-items legend[b-jtkvvuscqm] { font-weight: 500; }
.planning-input[b-jtkvvuscqm] { width: 100%; min-width: 0; padding: .5rem .75rem; border: 1px solid var(--border-interactive); border-radius: .375rem; color: var(--text-primary); background: var(--bg-card); }
.planning-check[b-jtkvvuscqm] { display: flex; align-items: flex-start; gap: .625rem; overflow-wrap: anywhere; }
.planning-check input[b-jtkvvuscqm] { flex-shrink: 0; margin-top: .25rem; accent-color: var(--accent-success); }
.planning-input:focus-visible[b-jtkvvuscqm], .planning-check input:focus-visible[b-jtkvvuscqm] { outline: 2px solid var(--border-focus, var(--accent-success-text)); outline-offset: 2px; }
.planning-items[b-jtkvvuscqm] { min-width: 0; display: flex; flex-direction: column; gap: .5rem; border: 1px solid var(--border-interactive); padding: .75rem; border-radius: .375rem; }
.planning-items legend[b-jtkvvuscqm] { font-size: 1rem; float: none; width: auto; padding: 0 .25rem; }
.planning-input[aria-invalid="true"][b-jtkvvuscqm] { border-color: var(--accent-danger-text); }
.planning-form .planning-error[b-jtkvvuscqm] { color: var(--accent-danger-text); }
/* /Components/Reports/ReportAnomaliesPanel.razor.rz.scp.css */
.anomaly-panel[b-8l49v7e2fo] { display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: .5rem 0 .5rem .5rem;
    color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; font-size: .875rem; overflow-wrap: anywhere; overflow: hidden; }
.anomaly-panel header[b-8l49v7e2fo] { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem; border-bottom: 1px solid var(--border-color); }
.anomaly-panel h2[b-8l49v7e2fo] { margin: 0; font-size: 1rem; font-weight: 600; }
.anomaly-panel h3[b-8l49v7e2fo] { font-size: .875rem; font-weight: 600; margin: 1rem 0 .5rem; }
.anomaly-panel p[b-8l49v7e2fo] { margin: 0 0 .75rem; }
.anomaly-close[b-8l49v7e2fo] { display: grid; place-items: center; min-width: 32px; min-height: 32px; flex: none; border: 1px solid var(--border-interactive); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); }
.anomaly-panel-body[b-8l49v7e2fo] { overflow: auto; flex: 1; min-height: 0; padding: .75rem; }
.anomaly-hint[b-8l49v7e2fo] { color: var(--text-secondary); font-size: .8125rem; }
.anomaly-details-link[b-8l49v7e2fo] { display: block; min-height: 32px; margin: 0 0 .75rem; padding: 0; border: 0; background: var(--bg-card); color: var(--accent-success-text); font: inherit; text-align: left; text-decoration: underline; }
.anomaly-check-details[b-8l49v7e2fo] { color: var(--text-primary); font-size: .875rem; line-height: 1.5; }
.anomaly-check-details h3[b-8l49v7e2fo] { font-size: 1rem; margin: 1rem 0 .5rem; }
.anomaly-check-details dt[b-8l49v7e2fo] { font-weight: 600; margin-top: .75rem; }
.anomaly-check-details dd[b-8l49v7e2fo] { margin: .25rem 0 .75rem; }
.anomaly-error[b-8l49v7e2fo] { color: var(--accent-danger-text); }
.anomaly-choices[b-8l49v7e2fo] { display: flex; flex-direction: column; gap: .5rem; }
.anomaly-finding[b-8l49v7e2fo] { min-width: 0; }
.anomaly-field-group[b-8l49v7e2fo] { min-width: 0; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--border-color); }
.anomaly-panel .anomaly-field-heading[b-8l49v7e2fo] { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin: 0 0 .5rem; padding: .5rem;
    border-left: 3px solid var(--accent-success-text); border-radius: 6px; background: var(--bg-hover); color: var(--text-primary); font-size: .875rem; font-weight: 600; }
.anomaly-confirmed[b-8l49v7e2fo] { border-left: 3px solid var(--accent-success-text); padding-left: .5rem; }
.anomaly-badge[b-8l49v7e2fo] { display: inline-block; color: var(--accent-success-text); font-size: .8125rem; font-weight: 600; margin-bottom: .25rem; }
.anomaly-expected-toggle[b-8l49v7e2fo] { margin: 1rem 0 .5rem; min-height: 32px; border: 0; background: var(--bg-card); color: var(--text-primary); text-decoration: underline; text-align: left; }
.anomaly-review[b-8l49v7e2fo] { padding: 0 .75rem .75rem; }
.anomaly-review label[b-8l49v7e2fo] { display: block; color: var(--text-secondary); font-size: .8125rem; margin-bottom: .25rem; }
.anomaly-review select[b-8l49v7e2fo] { width: 100%; min-height: 36px; border: 1px solid var(--border-interactive); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); }
.anomaly-choices[hidden][b-8l49v7e2fo] { display: none; }
.anomaly-choice[b-8l49v7e2fo] { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 44px; padding: .75rem;
    border: 1px solid var(--border-interactive); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); text-align: left; font: inherit; font-weight: 600; }
.anomaly-choice:hover:not(:disabled)[b-8l49v7e2fo], .anomaly-choice[aria-pressed="true"][b-8l49v7e2fo] { background: var(--bg-hover); }
.anomaly-choice[aria-pressed="true"][b-8l49v7e2fo] { box-shadow: inset 3px 0 0 var(--accent-success-text); }
.anomaly-choice > span:first-child[b-8l49v7e2fo] { min-width: 0; flex: 1; }
.anomaly-choice-label[b-8l49v7e2fo] { display: flex; align-items: flex-start; gap: .5rem; }
.anomaly-type-icon[b-8l49v7e2fo] { flex: none; width: 1.125rem; margin-top: .125rem; text-align: center; color: var(--text-secondary); }
.anomaly-count[b-8l49v7e2fo] { color: var(--text-secondary); font-size: .8125rem; font-weight: 400; }
.anomaly-explanation[b-8l49v7e2fo] { padding: .5rem .75rem; color: var(--text-secondary); font-size: .8125rem; }
.anomaly-status[b-8l49v7e2fo] { margin-top: .75rem !important; font-size: .8125rem; }
.anomaly-status .amx-spinner[b-8l49v7e2fo] { margin-right: .375rem; }
.anomaly-panel footer[b-8l49v7e2fo] { flex: none; padding: .75rem; border-top: 1px solid var(--border-color); }
.anomaly-panel footer > div[b-8l49v7e2fo] { display: flex; justify-content: flex-end; gap: .5rem; }
.anomaly-panel :focus-visible[b-8l49v7e2fo] { outline: 2px solid var(--border-focus, var(--accent-success-text)); outline-offset: 2px; }
.anomaly-panel .btn.dbd-btn:focus-visible:not(:disabled)[b-8l49v7e2fo] { outline: 2px solid var(--border-focus, var(--accent-success-text)); outline-offset: 2px; box-shadow: none; }
.anomaly-panel .btn.dbd-btn.dbd-success[b-8l49v7e2fo],
.anomaly-panel .btn.dbd-btn.dbd-success:is(:hover, :focus, :active):not(:disabled)[b-8l49v7e2fo] { background: var(--accent-success-fill); color: var(--text-on-dark); border-color: var(--accent-success-fill); filter: none; }
.anomaly-panel .btn.dbd-btn.dbd-secondary[b-8l49v7e2fo] { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-interactive); }
.anomaly-panel-body:focus-visible[b-8l49v7e2fo] { outline-offset: -2px; }
@container (max-width: 850px) {
    .anomaly-panel[b-8l49v7e2fo] { height: 55vh; max-height: 55vh; margin-right: .5rem; }
}

/* /Components/Reports/ReportAskAiModal.razor.rz.scp.css */
/* Ask AMX (this data / selected data), in Config Helper's style: flat, the user in AMX Blue, the answer beside the AMX
   mark with small actions under it, chips for follow-ups, one box with the send arrow inside it. AMX Blue (#3160B6) is
   for what you press; gold is the AI working. */
.ask-ai[b-7jtryelcb1] { display: flex; flex-direction: column; gap: .625rem; min-height: 0; max-height: min(72vh, 680px); color: var(--text-primary); font-size: .875rem; }
.ask-ai p[b-7jtryelcb1] { margin: 0; }

/* What the AI can see on the left; "New conversation" on the right. */
.ask-ai-bar[b-7jtryelcb1] { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.ask-ai-scope[b-7jtryelcb1] { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.ask-ai-scope li[b-7jtryelcb1] { display: inline-flex; align-items: center; gap: .375rem; padding: 0 .5rem; border-radius: 8px;
    background: var(--bg-secondary); color: var(--text-secondary); font-size: .75rem; line-height: 1.5rem; }
.ask-ai-scope i[b-7jtryelcb1] { color: var(--text-muted); font-size: .7rem; }
.ask-ai-new[b-7jtryelcb1] { display: inline-flex; align-items: center; gap: .375rem; height: 30px; padding: 0 .625rem; font: inherit; font-size: .8125rem;
    color: var(--text-primary); background: transparent; border: 1px solid var(--border-color); border-radius: 8px; white-space: nowrap; }
.ask-ai-new:hover:not(:disabled)[b-7jtryelcb1] { border-color: #3160B6; color: #3160B6; }
[data-theme="dark"] .ask-ai-new:hover:not(:disabled)[b-7jtryelcb1] { border-color: #7FA3E6; color: #7FA3E6; }
.ask-ai-new:disabled[b-7jtryelcb1] { opacity: .5; }
.ask-ai-new.is-on[b-7jtryelcb1] { border-color: #3160B6; color: #3160B6; background: var(--bg-secondary); }
a.ask-ai-new[b-7jtryelcb1] { text-decoration: none; }
.ask-ai-bar-actions[b-7jtryelcb1] { display: inline-flex; align-items: center; gap: .375rem; flex-wrap: wrap; }

/* The chat log: past conversations, each by its first question, the record and when - as Config Helper's past chats. */
.ask-ai-log[b-7jtryelcb1] { max-height: 40%; overflow-y: auto; padding: .5rem .625rem .625rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; }
.ask-ai-log-head[b-7jtryelcb1] { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin: 0 .125rem .375rem;
    font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.ask-ai-log-head span[b-7jtryelcb1] { font-weight: 400; letter-spacing: 0; text-transform: none; }
.ask-ai-log ul[b-7jtryelcb1] { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.ask-ai-log-item[b-7jtryelcb1] { display: flex; align-items: stretch; gap: 2px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; }
.ask-ai-log-item:hover[b-7jtryelcb1] { border-color: #3160B6; }
.ask-ai-log-open[b-7jtryelcb1] { flex: 1; min-width: 0; display: grid; gap: 2px; padding: .4375rem .625rem; font: inherit; text-align: left; color: var(--text-primary);
    background: none; border: 0; border-radius: 8px; }
.ask-ai-log-title[b-7jtryelcb1] { font-size: .8125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-ai-log-meta[b-7jtryelcb1] { display: flex; flex-wrap: wrap; gap: 2px .5rem; font-size: .71875rem; color: var(--text-secondary); }
.ask-ai-log-where[b-7jtryelcb1] { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3160B6; }
[data-theme="dark"] .ask-ai-log-where[b-7jtryelcb1] { color: #7FA3E6; }
.ask-ai-log-x[b-7jtryelcb1] { display: inline-flex; align-items: center; justify-content: center; width: 28px; padding: 0; color: var(--text-secondary);
    background: none; border: 0; border-radius: 8px; }
.ask-ai-log-x:hover[b-7jtryelcb1] { color: var(--text-primary); }

/* Reading another record's conversation: where it's from, and how to carry it on. */
.ask-ai-viewing[b-7jtryelcb1] { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding: .5rem .625rem;
    font-size: .8125rem; color: var(--text-primary); background: var(--bg-secondary); border-radius: 8px; }
.ask-ai-viewing-actions[b-7jtryelcb1] { display: inline-flex; gap: .375rem; }

/* The conversation is the only part that scrolls, so the box never leaves the screen. It runs bottom-up, so the view
   stays on the newest exchange; earlier ones are above it. */
.ask-ai-thread[b-7jtryelcb1] { flex: 1 1 auto; min-height: 12rem; overflow-y: auto; display: flex; flex-direction: column-reverse;
    padding: .25rem .25rem .5rem; overflow-wrap: anywhere; border-top: 1px solid var(--border-color); }
.ask-ai-thread-inner[b-7jtryelcb1] { display: flex; flex-direction: column; gap: .875rem; min-height: 100%; padding-top: .75rem; }

/* Empty: the mark, a greeting, starters as cards - as Config Helper greets. */
.ask-ai-empty[b-7jtryelcb1] { margin: auto 0; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: .5rem .25rem; }
.ask-ai-empty[b-7jtryelcb1]  .amx-mark { width: 40px; height: 40px; }
.ask-ai-empty h2[b-7jtryelcb1] { margin: .25rem 0 0; font-size: 1rem; font-weight: 600; }
.ask-ai-empty p[b-7jtryelcb1] { color: var(--text-secondary); font-size: .8125rem; max-width: 36rem; }
.ask-ai-empty .ask-ai-suggestions[b-7jtryelcb1] { width: 100%; margin-top: .5rem; }
.ask-ai-empty .ask-ai-chips[b-7jtryelcb1] { display: grid; gap: .5rem; }
.ask-ai-empty .ask-ai-chip[b-7jtryelcb1] { width: 100%; padding: .5625rem .75rem; font-size: .84375rem; border-radius: 8px; }

/* The user's question: right, AMX Blue (an earlier one, .ask-ai-asked, looks the same). The answer: left, beside the
   mark, no box. */
.ask-ai-question[b-7jtryelcb1], .ask-ai-asked[b-7jtryelcb1] { align-self: flex-end; max-width: 85%; padding: .5rem .75rem; border-radius: 8px;
    background: #3160B6; color: #FFFFFF; white-space: pre-wrap; }
.ask-ai-answer[b-7jtryelcb1] { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: .625rem; align-items: start; }
.ask-ai-avatar[b-7jtryelcb1] { display: block; width: 24px; height: 24px; margin-top: 1px; }
.ask-ai-avatar[b-7jtryelcb1]  .amx-mark { width: 24px; height: 24px; }
.ask-ai-answer-body[b-7jtryelcb1] { min-width: 0; }
.ask-ai-answer-text[b-7jtryelcb1] { white-space: pre-wrap; line-height: 1.6; }

/* Small actions under an answer, as Config Helper's: copy, then where the answer came from. */
.ask-ai-answer-meta[b-7jtryelcb1] { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .375rem; color: var(--text-secondary); font-size: .75rem; }
.ask-ai-act[b-7jtryelcb1] { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-width: 28px; height: 28px; padding: 0 .375rem;
    font: inherit; font-size: .75rem; color: var(--text-secondary); background: transparent; border: 1px solid transparent; border-radius: 8px; }
.ask-ai-act:hover:not(:disabled)[b-7jtryelcb1] { color: var(--text-primary); border-color: var(--border-color); }
.ask-ai-act.is-labelled[b-7jtryelcb1] { padding: 0 .625rem; color: var(--text-primary); border-color: var(--border-color); }

/* While it works: gold shimmer lines and what it's doing. */
.ask-ai-pending[b-7jtryelcb1] { display: grid; gap: .5rem; padding-top: .25rem; }
.ask-ai-sk[b-7jtryelcb1] { display: block; height: 10px; width: 92%; border-radius: 6px;
    background: linear-gradient(90deg, color-mix(in srgb, #FDB813 16%, transparent) 0%, color-mix(in srgb, #FDB813 16%, transparent) 35%,
        color-mix(in srgb, #FDB813 42%, transparent) 50%, color-mix(in srgb, #FDB813 16%, transparent) 65%, color-mix(in srgb, #FDB813 16%, transparent) 100%);
    background-size: 300% 100%; animation: ask-ai-sweep-b-7jtryelcb1 1.6s ease-in-out infinite; }
.ask-ai-sk.is-short[b-7jtryelcb1] { width: 60%; }
.ask-ai-stage[b-7jtryelcb1] { color: var(--text-secondary); font-size: .75rem; }
@keyframes ask-ai-sweep-b-7jtryelcb1 { from { background-position: 100% 0; } to { background-position: 0 0; } }

.ask-ai-error[b-7jtryelcb1] { display: flex; align-items: flex-start; gap: .5rem; color: var(--accent-danger-text); }
.ask-ai-error i[b-7jtryelcb1] { margin-top: .2rem; }
.ask-ai-error-actions[b-7jtryelcb1] { margin-top: .5rem; }

/* Follow-ups and starters: chips, as in Config Helper. */
.ask-ai-suggestions[b-7jtryelcb1] { display: flex; flex-direction: column; gap: .375rem; padding-left: calc(24px + .625rem); }
.ask-ai-empty .ask-ai-suggestions[b-7jtryelcb1] { padding-left: 0; }
.ask-ai-suggestions-title[b-7jtryelcb1] { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.ask-ai-chips[b-7jtryelcb1] { display: flex; flex-wrap: wrap; gap: .5rem; }
.ask-ai-chip[b-7jtryelcb1] { display: inline-flex; align-items: center; max-width: 100%; padding: .25rem .625rem; font: inherit; font-size: .8125rem; line-height: 1.4;
    text-align: left; white-space: normal; overflow-wrap: anywhere; color: var(--text-primary); background: var(--bg-card);
    border: 1px solid var(--border-color); border-radius: 8px; cursor: pointer; }
.ask-ai-chip:hover:not(:disabled)[b-7jtryelcb1] { border-color: #3160B6; color: #3160B6; }
[data-theme="dark"] .ask-ai-chip:hover:not(:disabled)[b-7jtryelcb1] { border-color: #7FA3E6; color: #7FA3E6; }
.ask-ai-chip:disabled[b-7jtryelcb1] { opacity: .5; cursor: default; }

/* The box: one line, the send arrow inside it (AMX Blue), Enter asks. */
.ask-ai-composer[b-7jtryelcb1] { flex: none; display: flex; align-items: center; gap: .375rem; padding: .25rem .25rem .25rem .75rem;
    background: var(--bg-input, var(--bg-card)); border: 1px solid var(--border-interactive, var(--border-color)); border-radius: 12px; }
.ask-ai-composer:focus-within[b-7jtryelcb1] { border-color: #3160B6; box-shadow: 0 0 0 3px color-mix(in srgb, #3160B6 18%, transparent); }
/* The field itself draws nothing: the box around it shows focus (the app's own input border, shadow and ring would draw
   a second box inside it). Its outline stays solid but transparent - it still shows in Windows high contrast. */
.ask-ai-input[b-7jtryelcb1], .ask-ai-input:focus[b-7jtryelcb1], .ask-ai-input:focus-visible[b-7jtryelcb1] { flex: 1; min-width: 0; height: 36px; padding: 0; font: inherit;
    font-size: .875rem; color: var(--text-primary); background: transparent; border: 0; border-radius: 0; box-shadow: none;
    outline: 2px solid transparent; outline-offset: 0; }
.ask-ai-input[b-7jtryelcb1]::placeholder { color: var(--text-secondary); }
.ask-ai-send[b-7jtryelcb1] { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: #FFFFFF; background: #3160B6;
    border: 0; border-radius: 8px; }
.ask-ai-send:disabled[b-7jtryelcb1] { opacity: .45; cursor: default; }
.ask-ai-composer-hint[b-7jtryelcb1] { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: -.25rem; padding: 0 .25rem;
    color: var(--text-secondary); font-size: .71875rem; }

.ask-ai :focus-visible:not(.ask-ai-input)[b-7jtryelcb1] { outline: 2px solid var(--border-focus, #3160B6); outline-offset: 2px; }
.ask-ai-thread:focus-visible[b-7jtryelcb1] { outline-offset: -2px; }

/* Header: the Ask AMX mark, then the title with what it covers beneath. */
.ask-ai-title[b-7jtryelcb1] { display: inline-flex; align-items: center; gap: .5rem; }
.ask-ai-title[b-7jtryelcb1]  .amx-mark { width: 28px; height: 28px; }
.ask-ai-title > span[b-7jtryelcb1] { display: inline-flex; flex-direction: column; line-height: 1.15; }
.ask-ai-title small[b-7jtryelcb1] { font-size: .75rem; font-weight: 500; color: var(--text-secondary); }

@media (prefers-reduced-motion: reduce) {
    .ask-ai-sk[b-7jtryelcb1] { animation: none; background: color-mix(in srgb, #FDB813 16%, transparent); }
}
/* /Components/Reports/SelectionHelperModal.razor.rz.scp.css */
.selection-helper[b-dax5eyqau6] { display: flex; flex-direction: column; gap: 1rem; color: var(--text-primary); }
.selection-helper fieldset[b-dax5eyqau6] { border: 0; padding: 0; margin: 0; min-width: 0; }
.selection-helper legend[b-dax5eyqau6], .selection-helper label[b-dax5eyqau6] { font-size: .875rem; font-weight: 600; margin-bottom: .35rem; }
.selection-helper-methods[b-dax5eyqau6] { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.selection-helper-methods label[b-dax5eyqau6] { display: flex; align-items: center; gap: .5rem; min-height: 36px; margin: 0; }
.selection-helper-field[b-dax5eyqau6] { display: flex; flex-direction: column; min-width: 0; }
.selection-helper .form-control[b-dax5eyqau6], .selection-helper .form-select[b-dax5eyqau6] { min-height: 36px; border: 1px solid var(--border-interactive); color: var(--text-primary); background-color: var(--bg-input); }
.selection-helper-amount[b-dax5eyqau6] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.selection-helper-preview[b-dax5eyqau6] { padding: .85rem 1rem; border-radius: 6px; background: var(--bg-hover); }
.selection-helper-hint[b-dax5eyqau6] { color: var(--text-secondary); margin: .25rem 0 0; font-size: .8125rem; }
.selection-helper-error[b-dax5eyqau6] { color: var(--accent-danger-text); }
.selection-helper :is(input,select):focus-visible[b-dax5eyqau6] { outline: 2px solid var(--border-focus); outline-offset: 2px; }
@media (max-width: 420px) { .selection-helper-amount[b-dax5eyqau6] { grid-template-columns: 1fr; } }
/* /Components/ReportTemplateDesigner/DocumentCanvas.razor.rz.scp.css */
/* Block layout, not a centring flex: a page wider than the canvas (100% / 125% zoom) must scroll from its left edge. */
.dc-scroll[b-ixt512ejru] { padding: 0 24px 28px; }
.dc-toolbar[b-ixt512ejru] {
    position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    margin: 0 -24px 16px; padding: 10px 24px; background: var(--rtd-canvas, var(--bg-secondary)); border-bottom: 1px solid var(--rtd-border, var(--border-default));
}
.dc-tool[b-ixt512ejru], .dc-zoom-btn[b-ixt512ejru] {
    display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; cursor: pointer;
    color: var(--rtd-text, var(--text-primary)); background: var(--rtd-surface, var(--bg-card)); border: 1px solid var(--rtd-border-strong, var(--border-strong)); padding: 4px 10px;
}
.dc-tool[b-ixt512ejru] { border-radius: 7px; }
.dc-zoom[b-ixt512ejru] { display: inline-flex; }
.dc-zoom-btn[b-ixt512ejru] { border-radius: 0; margin-left: -1px; }
.dc-zoom-btn:first-child[b-ixt512ejru] { border-radius: 7px 0 0 7px; margin-left: 0; }
.dc-zoom-btn:last-child[b-ixt512ejru] { border-radius: 0 7px 7px 0; }
.dc-zoom-btn.on[b-ixt512ejru] { color: var(--accent-success-text); background: color-mix(in srgb, var(--accent-success-fill) 12%, var(--rtd-surface, var(--bg-card))); border-color: var(--accent-success-fill); position: relative; }
.dc-tool:focus-visible[b-ixt512ejru], .dc-zoom-btn:focus-visible[b-ixt512ejru] { outline: 2px solid var(--border-focus, var(--accent-success-fill)); outline-offset: 2px; position: relative; }
.dc-paper[b-ixt512ejru] { font-size: 0.76rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* A4-ish page. The paper is the one part of the designer that does not follow the theme: it stands for the
   printed page, and the node colours drawn on it (a local style's font and background colour, a line's
   colour, the print engine's own defaults) were chosen against white. So the sheet carries a palette of its
   own - the --dcp-* tokens, white with dark ink in both themes - rather than the shell's --rtd-* set, and in
   dark mode it lifts off the dark canvas on a shadow instead of a border. */
.dc-page[b-ixt512ejru] {
    --dcp-bg: #ffffff;
    --dcp-fg: #18181b;
    --dcp-text: #27272a;
    --dcp-soft: #52525b;
    --dcp-muted: var(--text-muted);
    --dcp-faint: #a1a1aa;
    --dcp-ghost: #c4c4c8;
    --dcp-border: #e4e4e7;
    --dcp-border-strong: #d4d4d8;
    --dcp-subtle: #f4f4f5;
    --dcp-hover: #fafafa;
    --dcp-accent: #15803d;
    --dcp-accent-strong: #166534;
    --dcp-accent-soft: #f0fdf4;
    --dcp-accent-border: #bbf7d0;
    --dcp-accent-wash: #dcfce7;
    --dcp-info: #1d4ed8;
    --dcp-info-soft: #eff6ff;
    --dcp-info-border: #bfdbfe;
    --dcp-info-strong: #93c5fd;
    --dcp-info-badge: #dbeafe;
    --dcp-warn: #92400e;
    --dcp-warn-soft: #fffbeb;
    --dcp-warn-border: #b45309;

    /* Width, height and padding (the template's margins) come from DesignerPaper, inline; zoom from the toolbar. */
    box-sizing: border-box; margin: 0 auto; zoom: var(--dc-zoom, 1);
    background: var(--dcp-bg); color: var(--dcp-fg); border: 1px solid var(--dcp-border); border-radius: 6px;
    display: flex; flex-direction: column; gap: 18px;
}
[data-theme="dark"] .dc-page[b-ixt512ejru] { border-color: transparent; box-shadow: 0 2px 14px rgba(0, 0, 0, .5); }

.dc-section[b-ixt512ejru] { display: flex; flex-direction: column; gap: 8px; }
.dc-section-tag[b-ixt512ejru] {
    font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--dcp-ghost);
    border-bottom: 1px dashed var(--dcp-border); padding-bottom: 4px;
}
.dc-empty[b-ixt512ejru] { font-size: 0.82rem; color: var(--dcp-faint); font-style: italic; padding: 6px 0; }

.dc-block[b-ixt512ejru] {
    border-radius: 6px; padding: 4px 6px; cursor: pointer; transition: background .1s ease, box-shadow .1s ease;
    border: 1px solid transparent;
}
.dc-block:hover[b-ixt512ejru] { background: var(--dcp-hover); }
.dc-block.selected[b-ixt512ejru] { background: var(--dcp-accent-soft); box-shadow: inset 0 0 0 1.5px var(--dcp-accent); }

/* Brief flash when scrolled-to from the layer tree */
[b-ixt512ejru] .dc-flash { animation: dc-flash-anim-b-ixt512ejru 0.9s ease; }
@keyframes dc-flash-anim-b-ixt512ejru {
    0% { background: var(--dcp-accent-wash); box-shadow: 0 0 0 3px rgba(22,163,74,.4); }
    100% { background: transparent; box-shadow: none; }
}

.dc-children[b-ixt512ejru] { padding-left: 16px; display: flex; flex-direction: column; gap: 6px; }

.dc-h1[b-ixt512ejru] { font-size: 1.6rem; font-weight: 700; }
.dc-h2[b-ixt512ejru] { font-size: 1.3rem; font-weight: 700; }
.dc-h3[b-ixt512ejru] { font-size: 1.1rem; font-weight: 600; }
.dc-p[b-ixt512ejru] { font-size: 0.92rem; color: var(--dcp-text); line-height: 1.5; }

.dc-chip[b-ixt512ejru] {
    display: inline-flex; align-items: center; font-size: 0.82rem; font-family: monospace;
    background: var(--dcp-info-soft); color: var(--dcp-info); border: 1px solid var(--dcp-info-border); border-radius: 6px; padding: 2px 8px;
}
.dc-data[b-ixt512ejru] { background: var(--dcp-accent-soft); color: var(--dcp-accent-strong); border-color: var(--dcp-accent-border); }

.dc-img[b-ixt512ejru] {
    display: inline-flex; align-items: center; gap: 6px; color: var(--dcp-muted); background: var(--dcp-subtle);
    border: 1px dashed var(--dcp-border-strong); border-radius: 6px; padding: 16px 24px; font-size: 0.84rem;
}
.dc-line[b-ixt512ejru] { display: block; }
.dc-break[b-ixt512ejru] { font-size: 0.74rem; color: var(--dcp-ghost); font-style: italic; }
.dc-pagebreak[b-ixt512ejru] {
    text-align: center; font-size: 0.72rem; color: var(--dcp-faint); letter-spacing: .05em;
    border-top: 2px dashed var(--dcp-border-strong); padding-top: 4px; margin-top: 4px;
}
/* Full-width blocks (grids, reports, display logic...): they take the row and their text wraps rather than clipping. */
.dc-table-ph[b-ixt512ejru], .dc-embed[b-ixt512ejru] {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; width: 100%; box-sizing: border-box; min-width: 0;
    color: var(--dcp-soft); background: var(--dcp-subtle);
    border: 1px solid var(--dcp-border); border-radius: 6px; padding: 10px 16px; font-size: 0.84rem;
    overflow-wrap: anywhere; word-break: break-word;
}
.dc-embed > i[b-ixt512ejru] { flex: 0 0 auto; }
.dc-unknown[b-ixt512ejru] { font-size: 0.82rem; color: var(--dcp-muted); }

/* Paragraph runs rendered inline */
.dc-muted[b-ixt512ejru] { color: var(--dcp-faint); font-style: italic; }
.dc-run[b-ixt512ejru] { cursor: pointer; border-radius: 4px; padding: 0 2px; }
.dc-run:hover[b-ixt512ejru] { background: var(--dcp-subtle); }
.dc-run.selected[b-ixt512ejru] { box-shadow: inset 0 0 0 1.5px var(--dcp-accent); background: var(--dcp-accent-soft); }
/* A field in running text or a cell wraps like the value it stands for, rather than forcing its column wider. */
.dc-chip.dc-run[b-ixt512ejru] { display: inline; margin: 0 2px; white-space: normal; overflow-wrap: anywhere; line-height: 1.7;
    -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Table grid */
/* table-layout:fixed shares width evenly across columns so a wizard table with many columns fits the page
   (columns wrap their content) instead of overflowing the canvas. */
.dc-table[b-ixt512ejru] { width: 100%; border-collapse: collapse; margin: 4px 0; font-size: 0.88rem; table-layout: fixed; }
.dc-cell[b-ixt512ejru] { padding: 6px 8px; vertical-align: top; cursor: pointer; transition: background .1s ease; overflow-wrap: anywhere; word-break: break-word; }
.dc-cell:hover[b-ixt512ejru] { background: var(--dcp-hover); }
.dc-cell.selected[b-ixt512ejru] { box-shadow: inset 0 0 0 1.5px var(--dcp-accent); background: var(--dcp-accent-soft); }
/* A merged cell (a column or row span), drawn as it prints. Flat tint, no gradient (DESIGN_LANGUAGE). */
.dc-cell-merged[b-ixt512ejru] { background: var(--dcp-info-soft); }
/* "Show covered cells": a cell another's span covers, which doesn't print. */
.dc-cell-covered[b-ixt512ejru] { background: var(--dcp-subtle); color: var(--dcp-muted); }
.dc-covered-badge[b-ixt512ejru] {
    display: inline-block; float: right; margin: -2px 0 2px 4px; font-size: 0.62rem; font-weight: 600; line-height: 1;
    color: var(--dcp-soft); background: var(--dcp-bg); border: 1px dashed var(--dcp-border-strong); border-radius: 4px; padding: 2px 4px;
}
.dc-table-tools[b-ixt512ejru] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 2px 0 4px; }
.dc-table-toggle[b-ixt512ejru] {
    display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 600; cursor: pointer;
    color: var(--dcp-soft); background: var(--dcp-bg); border: 1px solid var(--dcp-muted); border-radius: 6px; padding: 3px 8px;
}
.dc-table-toggle:hover[b-ixt512ejru] { background: var(--dcp-hover); }
.dc-table-toggle[aria-pressed="true"][b-ixt512ejru] { color: var(--dcp-accent-strong); background: var(--dcp-accent-soft); border-color: var(--dcp-accent); }
.dc-table-toggle:focus-visible[b-ixt512ejru] { outline: 2px solid var(--dcp-accent); outline-offset: 2px; }
.dc-warn[b-ixt512ejru] {
    display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--dcp-warn);
    background: var(--dcp-warn-soft); border: 1px solid var(--dcp-warn-border); border-radius: 4px; padding: 2px 6px;
}
.dc-warn-cell[b-ixt512ejru] { display: flex; margin-top: 4px; width: fit-content; }
/* Span badge (e.g. "2 rows") on a merged cell. */
.dc-span-badge[b-ixt512ejru] {
    display: inline-block; float: right; margin: -2px 0 2px 4px;
    font-size: 0.62rem; font-weight: 700; line-height: 1;
    color: var(--dcp-info); background: var(--dcp-info-badge); border: 1px solid var(--dcp-info-strong);
    border-radius: 4px; padding: 2px 4px;
}
.dc-tb-all td[b-ixt512ejru] { border: 1px solid var(--dcp-border-strong); }
.dc-tb-outside[b-ixt512ejru] { border: 1px solid var(--dcp-border-strong); }
.dc-tb-none td[b-ixt512ejru] { border: none; }

/* Drag affordances (canvas items drag whole-item, no handle) */
[b-ixt512ejru] .dc-node { cursor: grab; }
[b-ixt512ejru] .dc-node:active { cursor: grabbing; }
.dc-run[b-ixt512ejru] { cursor: grab; }
.dc-table tr[b-ixt512ejru] { cursor: grab; }
[b-ixt512ejru] .amx-drag-ghost { opacity: .35; }
[b-ixt512ejru] .amx-drag-chosen { outline: 1.5px dashed var(--dcp-accent); outline-offset: 1px; }
/* /Components/ReportTemplateDesigner/LayerTree.razor.rz.scp.css */
/* Layer tree. Colours are the designer's --rtd-* tokens, inherited from .rtd-shell, so the tree follows
   the theme with the rest of the designer. */
.lt-root[b-2exe46p1gu] { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--rtd-fg); }

.lt-section[b-2exe46p1gu] { display: flex; flex-direction: column; }
.lt-section-head[b-2exe46p1gu] {
    display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: transparent;
    padding: 6px 6px; cursor: pointer; font-weight: 600; font-size: 0.8rem; color: var(--rtd-fg); text-align: left;
    border-radius: 6px;
}
.lt-section-head:hover[b-2exe46p1gu] { background: var(--rtd-subtle); }
.lt-chev[b-2exe46p1gu] { font-size: 0.66rem; color: var(--rtd-faint); width: 10px; }
.lt-section-icon[b-2exe46p1gu] { color: var(--rtd-accent); font-size: 0.8rem; }
.lt-section-name[b-2exe46p1gu] { flex: 1; }
.lt-count[b-2exe46p1gu] {
    min-width: 20px; text-align: center; font-size: 0.68rem; font-weight: 600;
    background: var(--rtd-accent-soft); color: var(--rtd-accent-strong); border-radius: 999px; padding: 1px 7px;
}

.lt-children[b-2exe46p1gu] { display: flex; flex-direction: column; }
.lt-empty[b-2exe46p1gu] { font-size: 0.76rem; color: var(--rtd-faint); padding: 4px 0 4px 28px; font-style: italic; }

.lt-row[b-2exe46p1gu] {
    display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px; cursor: pointer;
    transition: background .1s ease;
}
.lt-row:hover[b-2exe46p1gu] { background: var(--rtd-subtle); }
.lt-row:hover .lt-row-del[b-2exe46p1gu], .lt-row:focus-within .lt-row-del[b-2exe46p1gu] { opacity: 1; }
.lt-row.selected[b-2exe46p1gu] { background: var(--rtd-accent-soft); box-shadow: inset 2px 0 0 var(--rtd-accent); }
.lt-row.selected .lt-row-label[b-2exe46p1gu] { color: var(--rtd-accent-strong); font-weight: 550; }
/* While searching, ancestors kept only to show the path to a match are dimmed so real hits stand out. */
.lt-row.lt-dim .lt-row-label[b-2exe46p1gu], .lt-row.lt-dim .lt-row-icon[b-2exe46p1gu] { color: var(--rtd-muted); }

.lt-row-chev[b-2exe46p1gu] { border: none; background: transparent; color: var(--rtd-muted); cursor: pointer; min-width: 24px; min-height: 24px; padding: 0; font-size: 0.62rem; }
.lt-row-select[b-2exe46p1gu] { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; min-height: 24px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.lt-row-select:focus-visible[b-2exe46p1gu], .lt-row-chev:focus-visible[b-2exe46p1gu], .lt-row-del:focus-visible[b-2exe46p1gu] { outline: 2px solid var(--rtd-accent-strong); outline-offset: 2px; }
.lt-row-chev-spacer[b-2exe46p1gu] { width: 14px; display: inline-block; }
.lt-row-icon[b-2exe46p1gu] { color: var(--rtd-muted); font-size: 0.78rem; width: 16px; text-align: center; }
.lt-row-label[b-2exe46p1gu] { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-row-del[b-2exe46p1gu] { opacity: 0; border: none; background: transparent; color: var(--rtd-danger); cursor: pointer; min-width: 24px; min-height: 24px; border-radius: 5px; transition: opacity .1s ease; }
.lt-row-del:hover[b-2exe46p1gu] { background: var(--rtd-danger-wash); }

/* Drag handle + drag states */
/* Reveal only — dot-grid visuals/cursor come from the shared .amx-drag-handle (compact .sm here).
   Always faintly visible so the drag affordance is discoverable; lights up on row hover. */
.lt-row-handle[b-2exe46p1gu] { opacity: .35; transition: opacity .1s ease; }
.lt-row:hover .lt-row-handle[b-2exe46p1gu] { opacity: 1; }
.amx-drag-ghost[b-2exe46p1gu] { opacity: .4; }
.amx-drag-ghost .lt-row[b-2exe46p1gu] { background: var(--rtd-accent-soft); box-shadow: inset 2px 0 0 var(--rtd-accent); }
.amx-drag-chosen .lt-row[b-2exe46p1gu] { background: var(--rtd-subtle); }
[b-2exe46p1gu] .lt-node { display: block; }
/* /Components/ReportTemplateDesigner/NodeEditor.razor.rz.scp.css */
/* Node editor (right pane). Colours are the designer's --rtd-* tokens, inherited from .rtd-shell, so the
   pane follows the theme with the rest of the designer. */
.ne-root[b-qajiavkc3n] { display: flex; flex-direction: column; gap: 14px; padding: 14px; overflow-y: auto; overflow-x: hidden; font-size: 0.85rem; color: var(--rtd-fg); min-width: 0; }
/* Everything inside the panel sizes within its width — padding included — so nothing forces a horizontal scroll. */
.ne-root[b-qajiavkc3n], .ne-root *[b-qajiavkc3n] { box-sizing: border-box; }
.ne-root :is(input, select, textarea, .ne-input)[b-qajiavkc3n] { max-width: 100%; }

.ne-field[b-qajiavkc3n] { display: flex; flex-direction: column; gap: 5px; }
.ne-field > label[b-qajiavkc3n], .ne-field > .ne-field-label[b-qajiavkc3n] { font-size: 0.74rem; font-weight: 600; color: var(--rtd-muted); }
.ne-label-hint[b-qajiavkc3n] { font-weight: 400; color: var(--rtd-faint); }
.ne-check[b-qajiavkc3n] { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; cursor: pointer; color: var(--rtd-fg); }
.ne-row2[b-qajiavkc3n] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.ne-input[b-qajiavkc3n] {
    width: 100%; border: 1px solid var(--border-interactive); border-radius: 8px; padding: 8px 10px; font-size: 0.86rem;
    color: var(--rtd-fg); background: var(--rtd-input-bg); outline: none; transition: border-color .15s ease, box-shadow .15s ease;
    resize: vertical;
}
.ne-input:focus[b-qajiavkc3n] { border-color: var(--border-interactive); outline: 2px solid var(--rtd-accent-strong); outline-offset: 2px; box-shadow: 0 0 0 3px var(--rtd-ring); }

.ne-colour[b-qajiavkc3n] { width: 100%; height: 38px; border: 1px solid var(--rtd-border); border-radius: 8px; padding: 2px; background: var(--rtd-input-bg); cursor: pointer; }

.ne-seg[b-qajiavkc3n] { display: inline-flex; background: var(--rtd-subtle); border-radius: 8px; padding: 3px; gap: 3px; flex-wrap: wrap; }
.ne-seg-btn[b-qajiavkc3n] {
    border: none; background: transparent; color: var(--rtd-muted); padding: 6px 12px; border-radius: 6px;
    font-size: 0.8rem; font-weight: 550; cursor: pointer; transition: background .12s ease, color .12s ease;
}
.ne-seg-btn.active[b-qajiavkc3n] { background: var(--rtd-surface); color: var(--rtd-accent-strong); }
.ne-seg-btn.active i[b-qajiavkc3n] { color: var(--rtd-accent); }

.ne-divider[b-qajiavkc3n] { height: 1px; background: var(--rtd-border); margin: 2px 0; }

.ne-hint[b-qajiavkc3n] { display: flex; align-items: flex-start; gap: 8px; font-size: 0.78rem; color: var(--rtd-muted); line-height: 1.4; }
.ne-hint i[b-qajiavkc3n] { color: var(--rtd-faint); margin-top: 2px; }
/* The "stored" tick in an upload hint - a state, so it keeps the accent where the hint's other icons are faint. */
.ne-hint i.ne-ok[b-qajiavkc3n] { color: var(--rtd-accent-bright); }
/* A problem with the node's setup the user should fix (e.g. a summary report with no charts). */
.ne-warn[b-qajiavkc3n] {
    display: flex; align-items: flex-start; gap: 8px; font-size: 0.78rem; line-height: 1.4;
    color: var(--rtd-warn); background: var(--rtd-warn-wash); border: 1px solid var(--rtd-warn-border);
    border-radius: 8px; padding: 8px 10px;
}
.ne-warn i[b-qajiavkc3n] { margin-top: 2px; }

/* Label + "Insert tag" action on one line. The label is nested here, so it can't match `.ne-field > label`. */
.ne-tag-row[b-qajiavkc3n] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ne-tag-row > label[b-qajiavkc3n] { font-size: 0.74rem; font-weight: 600; color: var(--rtd-muted); }

/* Data-field picker button */
.ne-picker-btn[b-qajiavkc3n] {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    border: 1px solid var(--rtd-border); border-radius: 8px; padding: 9px 12px; background: var(--rtd-surface); color: var(--rtd-fg); cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.ne-picker-btn:hover[b-qajiavkc3n] { background: var(--rtd-accent-soft); border-color: var(--rtd-accent-soft-border); }
.ne-picker-btn.empty[b-qajiavkc3n] { color: var(--rtd-muted); gap: 8px; }
.ne-picker-btn.empty i[b-qajiavkc3n] { color: var(--rtd-faint); }
.ne-picker-field[b-qajiavkc3n] { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ne-picker-name[b-qajiavkc3n] { font-weight: 600; color: var(--rtd-accent-strong); font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ne-picker-src[b-qajiavkc3n] { font-size: 0.74rem; color: var(--rtd-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ne-picker-edit[b-qajiavkc3n] { color: var(--rtd-faint); font-size: 0.78rem; }

/* Action bar — wraps so the (up to 5) buttons never force a horizontal scroll in a narrow pane. */
.ne-actionbar[b-qajiavkc3n] { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--rtd-border); margin-bottom: 2px; }
.ne-act[b-qajiavkc3n] {
    display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--rtd-border); background: var(--rtd-surface);
    color: var(--rtd-fg-soft); border-radius: 7px; padding: 6px 10px; font-size: 0.8rem; font-weight: 550; cursor: pointer;
    white-space: nowrap; transition: background .12s ease, border-color .12s ease;
}
.ne-act:hover[b-qajiavkc3n] { background: var(--rtd-subtle); }
.ne-act.danger[b-qajiavkc3n] { color: var(--rtd-danger); }
.ne-act.danger:hover[b-qajiavkc3n] { background: var(--rtd-danger-wash); border-color: var(--rtd-danger-border); }

/* Paragraph runs */
.ne-runs[b-qajiavkc3n] { display: flex; flex-direction: column; gap: 4px; }
.ne-runs-empty[b-qajiavkc3n] { font-size: 0.8rem; color: var(--rtd-faint); font-style: italic; padding: 6px 0; }
.ne-run[b-qajiavkc3n] {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 1px solid var(--rtd-border);
    background: var(--rtd-surface); color: var(--rtd-fg); border-radius: 7px; padding: 7px 10px; cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.ne-run:hover[b-qajiavkc3n] { background: var(--rtd-accent-soft); border-color: var(--rtd-accent-soft-border); }
.ne-run:hover .ne-run-del[b-qajiavkc3n], .ne-run:focus-within .ne-run-del[b-qajiavkc3n] { opacity: 1; }
/* Reveal only — dot-grid visuals/cursor come from the shared .amx-drag-handle (compact .sm).
   Faintly visible at rest so drag is discoverable; lights up on row hover. */
.ne-run-handle[b-qajiavkc3n] { opacity: .35; transition: opacity .1s ease; }
.ne-run:hover .ne-run-handle[b-qajiavkc3n] { opacity: 1; }
.ne-run-icon[b-qajiavkc3n] { color: var(--rtd-muted); font-size: 0.78rem; width: 16px; text-align: center; }
.ne-run-label[b-qajiavkc3n] { flex: 1; font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ne-run-select[b-qajiavkc3n] { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; min-height: 24px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; }
.ne-run-select:focus-visible[b-qajiavkc3n], .ne-run-del:focus-visible[b-qajiavkc3n] { outline: 2px solid var(--rtd-accent-strong); outline-offset: 2px; }
.ne-run-del[b-qajiavkc3n] { opacity: 0; color: var(--rtd-danger); border: 0; background: transparent; min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; transition: opacity .1s ease; }
.ne-run-del:hover[b-qajiavkc3n] { background: var(--rtd-danger-wash); }

.ne-run-actions[b-qajiavkc3n] { display: flex; gap: 8px; margin-top: 4px; }
.ne-add-btn[b-qajiavkc3n] {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px dashed var(--rtd-accent-soft-border);
    background: var(--rtd-accent-soft); color: var(--rtd-accent-strong); border-radius: 8px; padding: 9px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: background .12s ease;
}
.ne-add-btn:hover[b-qajiavkc3n] { background: var(--rtd-accent-wash); }

/* Report picker (stock_report) */
.ne-picked[b-qajiavkc3n] { display: flex; align-items: center; gap: 10px; border: 1px solid var(--rtd-accent-soft-border); background: var(--rtd-accent-soft); border-radius: 8px; padding: 9px 12px; }
.ne-picked-name[b-qajiavkc3n] { flex: 1; font-weight: 600; color: var(--rtd-accent-strong); font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ne-picked-name i[b-qajiavkc3n] { margin-right: 6px; color: var(--rtd-accent); }
.ne-link-btn[b-qajiavkc3n] { border: none; background: none; color: var(--rtd-info); font-size: 0.82rem; cursor: pointer; padding: 2px 4px; }
.ne-link-btn:hover[b-qajiavkc3n] { text-decoration: underline; }
/* "Edit report" + "Preview data" under the Report field. */
.ne-report-actions[b-qajiavkc3n] { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ne-preview-btn[b-qajiavkc3n] {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    border: 1px solid var(--rtd-border-strong); border-radius: 8px; padding: 8px 12px; background: var(--rtd-surface);
    color: var(--rtd-fg); font-size: 0.84rem; font-weight: 550; cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.ne-preview-btn:hover[b-qajiavkc3n] { background: var(--rtd-accent-soft); border-color: var(--rtd-accent-soft-border); }
.ne-preview-btn i[b-qajiavkc3n] { color: var(--rtd-accent-strong); }
.ne-preview-btn:focus-visible[b-qajiavkc3n] { outline: 2px solid var(--border-focus, var(--accent-primary)); outline-offset: 2px; }

/* Table grid-size steppers */
.ne-grid-size[b-qajiavkc3n] { display: flex; gap: 12px; }
.ne-stepper[b-qajiavkc3n] { display: flex; align-items: center; gap: 6px; border: 1px solid var(--rtd-border); border-radius: 8px; padding: 4px 8px; }
.ne-stepper-lbl[b-qajiavkc3n] { font-size: 0.74rem; font-weight: 600; color: var(--rtd-muted); margin-right: 2px; }
.ne-stepper-val[b-qajiavkc3n] { min-width: 18px; text-align: center; font-weight: 600; font-size: 0.86rem; }
.ne-stepper button[b-qajiavkc3n] {
    width: 24px; height: 24px; border: 1px solid var(--rtd-border); background: var(--rtd-surface); border-radius: 6px; color: var(--rtd-fg-soft);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem;
}
.ne-stepper button:hover:not(:disabled)[b-qajiavkc3n] { background: var(--rtd-accent-soft); border-color: var(--rtd-accent-soft-border); }
.ne-stepper button:disabled[b-qajiavkc3n] { opacity: .4; cursor: default; }

/* Apply Local Styles button */
.ne-localstyle-btn[b-qajiavkc3n] {
    display: flex; align-items: center; gap: 8px; width: 100%; justify-content: center;
    border: 1px solid var(--rtd-border); background: var(--rtd-surface); border-radius: 8px; padding: 9px; font-size: 0.84rem;
    font-weight: 600; color: var(--rtd-fg-soft); cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.ne-localstyle-btn:hover[b-qajiavkc3n] { background: var(--rtd-accent-soft); border-color: var(--rtd-accent-soft-border); color: var(--rtd-accent-strong); }
.ne-localstyle-btn.applied[b-qajiavkc3n] { background: var(--rtd-accent-soft); border-color: var(--rtd-accent-soft-border); color: var(--rtd-accent-strong); }
.ne-localstyle-check[b-qajiavkc3n] { color: var(--rtd-accent-bright); margin-left: auto; }

/* Local-style row: Edit + Clear side by side when a local style is applied */
.ne-localstyle-row[b-qajiavkc3n] { display: flex; gap: 8px; align-items: stretch; }
.ne-localstyle-row .ne-localstyle-btn[b-qajiavkc3n] { flex: 1; }
.ne-localstyle-clear[b-qajiavkc3n] {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    border: 1px solid var(--rtd-danger-border); background: var(--rtd-surface); color: var(--rtd-danger); border-radius: 8px; padding: 9px 12px;
    font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background .12s ease;
}
.ne-localstyle-clear:hover[b-qajiavkc3n] { background: var(--rtd-danger-wash); }
/* /Components/ReportTemplateDesigner/NodePalette.razor.rz.scp.css */
/* Side-panel palette. Colours are the designer's --rtd-* tokens, inherited from .rtd-shell. */
.np-root[b-49v846wmnv] { display: flex; flex-direction: column; gap: 14px; padding: 12px; overflow-y: auto; font-size: 0.85rem; color: var(--rtd-fg); }

.np-section-pick[b-49v846wmnv] { display: flex; flex-direction: column; gap: 6px; }
.np-label[b-49v846wmnv] { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--rtd-muted); }
.np-seg[b-49v846wmnv] { display: inline-flex; background: var(--rtd-subtle); border-radius: 8px; padding: 3px; gap: 3px; }
.np-seg-btn[b-49v846wmnv] {
    flex: 1; border: none; background: transparent; color: var(--rtd-muted); padding: 6px 8px; border-radius: 6px;
    font-size: 0.78rem; font-weight: 550; cursor: pointer; transition: background .12s ease, color .12s ease;
}
.np-seg-btn.active[b-49v846wmnv] { background: var(--rtd-surface); color: var(--rtd-accent-strong); }

.np-group[b-49v846wmnv] { display: flex; flex-direction: column; gap: 6px; }
.np-group-label[b-49v846wmnv] { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--rtd-faint); }
.np-items[b-49v846wmnv] { display: flex; flex-direction: column; gap: 4px; }

.np-item[b-49v846wmnv] {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px;
    border: 1px solid var(--rtd-border); background: var(--rtd-surface); color: var(--rtd-fg); cursor: pointer; text-align: left;
    transition: background .12s ease, border-color .12s ease;
}
.np-item:hover[b-49v846wmnv] { background: var(--rtd-accent-soft); border-color: var(--rtd-accent-soft-border); }
.np-item:hover .np-item-plus[b-49v846wmnv] { opacity: 1; color: var(--rtd-accent); }
.np-item-icon[b-49v846wmnv] {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border-radius: 7px; background: var(--rtd-subtle); color: var(--rtd-fg-soft); font-size: 0.82rem; flex-shrink: 0;
}
.np-item-label[b-49v846wmnv] { flex: 1; font-weight: 500; }
.np-item-plus[b-49v846wmnv] { opacity: 0; color: var(--rtd-faint); transition: opacity .12s ease; }
/* /Components/ReportTemplateDesigner/NodePaletteBar.razor.rz.scp.css */
/* Floating "Add item" dock — compact, centered, sits above the canvas at the bottom. Styled to match the
   rest of the designer (see .rtd-menu-pop / .rtd-viewpop): the panel surface, 1px border, app radii, and a soft
   shallow shadow for just enough depth — clean, light, modern. Reads the shared --rtd-* tokens (inherited
   from the .rtd-shell ancestor), which is what carries it into dark mode. */
.npb-dock[b-08odj7oh4p] {
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
    z-index: 40;
    display: flex; align-items: center; gap: 4px;
    background: var(--rtd-surface); border: 1px solid var(--rtd-border); border-radius: 12px;
    padding: 5px; box-shadow: var(--rtd-shadow-sm);
}

.npb-divider[b-08odj7oh4p] { width: 1px; align-self: stretch; background: var(--rtd-border); margin: 5px 3px; }

/* Add-tools row (the palette drag source). */
.npb-tools[b-08odj7oh4p] { display: flex; align-items: center; gap: 2px; }

/* Section-target button reads as a subtle "context" chip, distinct from the add tools. */
.npb-section-btn[b-08odj7oh4p] { color: var(--rtd-muted); }
.npb-section-btn .npb-btn-icon[b-08odj7oh4p] { color: var(--rtd-faint); }

/* Primary tool buttons */
.npb-tool[b-08odj7oh4p] { position: relative; }
.npb-btn[b-08odj7oh4p] {
    display: inline-flex; align-items: center; gap: 7px;
    border: none; background: transparent; color: var(--rtd-fg);
    height: 36px; padding: 0 12px; border-radius: 8px;
    font-size: 0.82rem; font-weight: 550; cursor: pointer; transition: background .12s, color .12s;
}
.npb-btn:hover[b-08odj7oh4p] { background: var(--rtd-subtle); }
.npb-btn.open[b-08odj7oh4p] { background: var(--rtd-subtle); color: var(--rtd-accent-strong); }
.npb-btn-drag[b-08odj7oh4p] { cursor: grab; }
.npb-btn-drag:active[b-08odj7oh4p] { cursor: grabbing; }
.npb-btn-icon[b-08odj7oh4p] { font-size: 0.95rem; color: var(--rtd-muted); }
.npb-btn:hover .npb-btn-icon[b-08odj7oh4p], .npb-btn.open .npb-btn-icon[b-08odj7oh4p] { color: var(--rtd-accent); }
.npb-btn-label[b-08odj7oh4p] { line-height: 1; white-space: nowrap; }
.npb-caret[b-08odj7oh4p] { font-size: 0.58rem; opacity: .5; margin-left: 1px; }
.npb-btn:hover .npb-caret[b-08odj7oh4p], .npb-btn.open .npb-caret[b-08odj7oh4p] { opacity: .8; }

/* Narrow screens: drop the labels, keep icons (dock stays usable, tooltips still name each tool). */
@media (max-width: 820px) {
    .npb-btn-label[b-08odj7oh4p] { display: none; }
    .npb-btn[b-08odj7oh4p] { padding: 0 10px; }
    .npb-btn-icon[b-08odj7oh4p] { color: var(--rtd-fg); }
}

/* Dropup menu — mirrors .rtd-menu-pop. */
.npb-menu[b-08odj7oh4p] {
    position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
    min-width: 208px; padding: 6px;
    background: var(--rtd-surface); border: 1px solid var(--rtd-border); border-radius: 10px;
    box-shadow: var(--rtd-shadow-md);
    display: flex; flex-direction: column; gap: 2px;
    animation: npb-pop-b-08odj7oh4p .12s ease-out;
}
@keyframes npb-pop-b-08odj7oh4p { from { opacity: 0; transform: translate(-50%, 5px); } to { opacity: 1; transform: translate(-50%, 0); } }

.npb-menu-item[b-08odj7oh4p] {
    display: flex; align-items: center; gap: 10px; text-align: left; white-space: nowrap;
    border: none; background: transparent; color: var(--rtd-fg);
    padding: 9px 10px; border-radius: 7px; font-size: 0.84rem; font-weight: 500; cursor: pointer;
    transition: background .1s;
}
/* Click-or-drag: the row is primarily clickable (adds the item), so the ROW shows a pointer.
   The drag affordance lives on the grip (.npb-menu-grip) only — see below. */
.npb-menu-item.npb-menu-drag[b-08odj7oh4p] { cursor: pointer; }
.npb-menu-item:hover[b-08odj7oh4p] { background: var(--rtd-subtle); }
.npb-menu-item.selected[b-08odj7oh4p] { color: var(--rtd-accent); font-weight: 600; }
.npb-menu-check[b-08odj7oh4p] { color: var(--rtd-accent); font-size: 0.72rem; margin-left: auto; }
.npb-menu-icon[b-08odj7oh4p] { width: 16px; text-align: center; color: var(--rtd-muted); font-size: 0.85rem; }
.npb-menu-item:hover .npb-menu-icon[b-08odj7oh4p] { color: var(--rtd-accent); }
.npb-menu-label[b-08odj7oh4p] { line-height: 1; flex: 1; }
/* Drag affordance — subtle until hover, so the menu stays clean but draggability is discoverable. */
/* Grip = the drag affordance for a click-or-drag palette item. Uses the shared .amx-drag-handle
   dot-grid (applied in markup) but shows a grab cursor and stays faintly visible so drag is
   discoverable, brightening on row hover. */
.npb-menu-grip[b-08odj7oh4p] { cursor: grab; opacity: .35; transition: opacity .12s; margin-left: auto; }
.npb-menu-grip:active[b-08odj7oh4p] { cursor: grabbing; }
.npb-menu-item:hover .npb-menu-grip[b-08odj7oh4p] { opacity: 1; }

/* Click-outside backdrop for an open dropup. It sits over the whole viewport to catch a close-click, but
   must NOT block drag-drops onto the canvas: while a SortableJS drag is in progress the body carries a drag
   marker, and we disable the backdrop's pointer events so elementFromPoint resolves to the canvas below. */
.npb-backdrop[b-08odj7oh4p] { position: fixed; inset: 0; z-index: 39; background: transparent; }
body.amx-dragging .npb-backdrop[b-08odj7oh4p] { pointer-events: none; }

/* WCAG: visible keyboard focus on every interactive control. */
.npb-btn:focus-visible[b-08odj7oh4p],
.npb-menu-item:focus-visible[b-08odj7oh4p] {
    outline: 2px solid var(--accent-primary); outline-offset: 2px;
}

/* While dragging a palette item out (SortableJS clone). */
.npb-menu-item.amx-drag-ghost[b-08odj7oh4p] { opacity: .4; }
/* /Components/ReportTemplateDesigner/ReportDataPreviewModal.razor.rz.scp.css */
/* Near full screen: the rows are the point, so give them the room (as the Form Designer's data preview does). */
.rdp-host[b-x3em3z27wg]  .rdp-dialog { width: calc(100vw / var(--amx-ui-scale, 1) - 3rem); max-width: none; }

.rdp-title[b-x3em3z27wg] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rdp-title-main[b-x3em3z27wg] { font-size: 1rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdp-title-main i[b-x3em3z27wg] { color: var(--accent-success-text); margin-right: 6px; }
.rdp-title-sub[b-x3em3z27wg] { font-size: 0.78rem; font-weight: 400; color: var(--text-muted); }

.rdp-body[b-x3em3z27wg] { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.rdp-note[b-x3em3z27wg] {
    display: flex; align-items: flex-start; gap: 8px; flex: none; padding: 10px 18px;
    font-size: 0.8rem; line-height: 1.4; color: var(--text-muted);
    background: var(--bg-secondary); border-bottom: 1px solid var(--border-color);
}
.rdp-note i[b-x3em3z27wg] { margin-top: 2px; color: var(--accent-success-text); }
.rdp-note.approx i[b-x3em3z27wg] { color: var(--accent-warning-text); }
.rdp-grid[b-x3em3z27wg] { flex: 1; min-height: 0; overflow: auto; padding: 0 12px 12px; }
.rdp-state[b-x3em3z27wg] {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 40px 16px;
    font-size: 0.9rem; color: var(--text-muted); text-align: center;
}
/* /Components/ReportTemplateDesigner/StyleLibraryPanel.razor.rz.scp.css */
/* Style library (right pane, Styles tab) and its editor modal. Colours are the designer's --rtd-* tokens,
   inherited from .rtd-shell, so the panel follows the theme with the rest of the designer. */
.slp[b-qja51o5tg5] { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px; }

.slp-head[b-qja51o5tg5] { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.slp-title[b-qja51o5tg5] { font-size: 0.95rem; font-weight: 700; color: var(--rtd-fg); }
.slp-sub[b-qja51o5tg5] { font-size: 0.74rem; color: var(--rtd-faint); margin-top: 2px; line-height: 1.35; }
.slp-new[b-qja51o5tg5] {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--rtd-border);
    background: var(--rtd-surface); color: var(--rtd-accent-bright); cursor: pointer; transition: all .12s ease;
}
.slp-new:hover[b-qja51o5tg5] { background: var(--rtd-accent-soft); border-color: var(--rtd-accent-soft-border); }

.slp-note[b-qja51o5tg5] {
    font-size: 0.74rem; color: var(--rtd-warn); background: var(--rtd-warn-wash); border: 1px solid var(--rtd-warn-border);
    border-radius: 8px; padding: 8px 10px; line-height: 1.4;
}
.slp-note i[b-qja51o5tg5] { margin-right: 4px; }

/* ── AI bar ── */
.slp-ai[b-qja51o5tg5] { display: flex; flex-direction: column; gap: 8px; }
/* A flat purple wash (DESIGN_LANGUAGE.md §1 - no gradients), the assistant's colour throughout the designer. */
.slp-ai-row[b-qja51o5tg5] {
    display: flex; align-items: center; gap: 6px; padding: 4px;
    background: var(--rtd-ai-wash); border: 1px solid var(--rtd-ai-border); border-radius: 10px;
}
.slp-ai-icon[b-qja51o5tg5] { color: var(--rtd-ai); font-size: 0.8rem; margin-left: 6px; }
.slp-ai-input[b-qja51o5tg5] {
    flex: 1; border: none; background: transparent; outline: none; font-size: 0.8rem; color: var(--rtd-fg); padding: 5px 2px;
}
.slp-ai-input[b-qja51o5tg5]::placeholder { color: var(--rtd-ai); opacity: .7; }
.slp-ai-go[b-qja51o5tg5] {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px; border: none; cursor: pointer;
    background: var(--rtd-ai-fill); color: var(--rtd-on-accent); transition: filter .12s ease;
}
.slp-ai-go:hover:not(:disabled)[b-qja51o5tg5] { filter: brightness(1.12); }
.slp-ai-go:disabled[b-qja51o5tg5] { opacity: .5; cursor: default; }
.slp-ai-actions[b-qja51o5tg5] { display: flex; align-items: center; gap: 8px; }
.slp-ai-hint[b-qja51o5tg5] { flex: 1; font-size: 0.74rem; color: var(--rtd-ai-text); font-weight: 600; }
.slp-ai-hint i[b-qja51o5tg5] { margin-right: 4px; }

/* ── list ── */
.slp-empty[b-qja51o5tg5] { font-size: 0.8rem; color: var(--rtd-faint); font-style: italic; padding: 8px 0; }
.slp-list[b-qja51o5tg5] { display: flex; flex-direction: column; gap: 4px; }
.slp-item[b-qja51o5tg5] {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 7px 10px; border-radius: 9px; border: 1px solid transparent; background: var(--rtd-surface); cursor: pointer;
    transition: all .1s ease;
}
.slp-item:hover[b-qja51o5tg5] { background: var(--rtd-hover); border-color: var(--rtd-border); }
.slp-item.active[b-qja51o5tg5] { background: var(--rtd-accent-soft); border-color: var(--rtd-accent-soft-border); box-shadow: inset 0 0 0 1px var(--rtd-accent-soft-border); }
.slp-swatch[b-qja51o5tg5] {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--rtd-border);
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem;
}
.slp-name[b-qja51o5tg5] { flex: 1; font-size: 0.84rem; color: var(--rtd-fg); font-weight: 500; }
.slp-chev[b-qja51o5tg5] { color: var(--rtd-accent-bright); font-size: 0.7rem; }

/* ── editor modal ── */
@keyframes slp-fade-b-qja51o5tg5 { from { opacity: 0; } to { opacity: 1; } }
@keyframes slp-pop-b-qja51o5tg5 { from { transform: translateY(8px) scale(.98); opacity: .6; } to { transform: none; opacity: 1; } }
.slp-modal-title[b-qja51o5tg5] { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--rtd-fg-soft); }
.slp-modal-title strong[b-qja51o5tg5] { color: var(--rtd-fg); }
.slp-modal-swatch[b-qja51o5tg5] {
    width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--rtd-border);
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; flex-shrink: 0;
}
.slp-modal-body[b-qja51o5tg5] { display: flex; flex-direction: column; gap: 14px; padding: 16px; }

/* The preview shows the style as it prints, so like the canvas's paper it is white with dark ink in both
   themes - a style's own colours were chosen against the page, not the app. */
.slp-prev[b-qja51o5tg5] {
    border: 1px dashed var(--rtd-border-strong); border-radius: 8px; padding: 14px; background: #ffffff; color: #18181b;
    font-size: 0.9rem; min-height: 48px;
}

.slp-modal-foot[b-qja51o5tg5] {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 16px; border-top: 1px solid var(--rtd-border); background: var(--rtd-subtle);
}
.slp-modal-foot-right[b-qja51o5tg5] { display: flex; gap: 8px; }
.slp-btn[b-qja51o5tg5] {
    padding: 8px 16px; border-radius: 8px; font-size: 0.82rem; font-weight: 600; cursor: pointer; border: 1px solid transparent;
    display: inline-flex; align-items: center; gap: 6px;
}
.slp-btn.ghost[b-qja51o5tg5] { background: var(--rtd-surface); border-color: var(--rtd-border); color: var(--rtd-fg-soft); }
.slp-btn.ghost:hover[b-qja51o5tg5] { background: var(--rtd-subtle); }
.slp-btn.primary[b-qja51o5tg5] { background: var(--rtd-accent); color: var(--rtd-on-accent); }
.slp-btn.primary:hover[b-qja51o5tg5] { filter: brightness(1.08); }
.slp-btn.danger-ghost[b-qja51o5tg5] { background: var(--rtd-surface); border-color: var(--rtd-danger-border); color: var(--rtd-danger); }
.slp-btn.danger-ghost:hover[b-qja51o5tg5] { background: var(--rtd-danger-wash); }
.slp-btn:disabled[b-qja51o5tg5] { opacity: .6; cursor: default; }

/* reuse the existing local-style control grid look */
[b-qja51o5tg5] .rtd-ls-row { display: flex; gap: 10px; }
[b-qja51o5tg5] .rtd-ls-field { flex: 1; display: flex; flex-direction: column; gap: 4px; }
[b-qja51o5tg5] .rtd-ls-field > label { font-size: 0.72rem; color: var(--rtd-muted); font-weight: 600; }
[b-qja51o5tg5] .rtd-ls-field input, [b-qja51o5tg5] .rtd-ls-field select {
    border: 1px solid var(--rtd-border); border-radius: 7px; padding: 6px 8px; font-size: 0.82rem; background: var(--rtd-input-bg); color: var(--rtd-fg);
}
[b-qja51o5tg5] .rtd-ls-field input[type=color] { padding: 2px; height: 34px; cursor: pointer; }
[b-qja51o5tg5] .rtd-ls-toggles { display: flex; gap: 12px; flex-wrap: wrap; }
[b-qja51o5tg5] .rtd-ls-toggles label { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; cursor: pointer; }
/* /Components/Routing/RouteBuilderOverlay.razor.rz.scp.css */
/* Route overlay - a full-page dialog: directions on the left, map filling the rest.

   Built on the app's global theme tokens (app.css :root and its dark counterpart) rather than
   the --dbd-* set, which is only declared inside the designer pages and would fall back to light
   literals here. Nothing below hard-codes a colour, so both themes come out right. */

.route-overlay[b-oao8iwyyyd] {
    position: fixed;
    inset: 0;
    display: flex;
    background-color: var(--bg-secondary);
    /* z-index comes from AmxModalStack, applied inline, so this sits above anything already open. */
}

.route-overlay:focus[b-oao8iwyyyd] {
    outline: none;
}

/* ---------- Left panel ---------- */

.route-panel[b-oao8iwyyyd] {
    flex: 0 0 380px;
    width: 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-card);
    border-right: 1px solid var(--border-color);
    overflow: hidden;
}

.route-panel__head[b-oao8iwyyyd] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.route-panel__title[b-oao8iwyyyd] {
    flex: 1 1 auto;
    min-width: 0;
}

.route-panel__title h2[b-oao8iwyyyd] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.route-panel__subtitle[b-oao8iwyyyd] {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.route-panel__close[b-oao8iwyyyd] {
    flex: 0 0 auto;
    /* WCAG 2.2 target size (2.5.8). An icon-only close is the one control most likely to fail it. */
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 100ms ease, color 100ms ease;
}

.route-panel__close:hover[b-oao8iwyyyd] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* ---------- Options ---------- */

.route-panel__options[b-oao8iwyyyd] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.route-field[b-oao8iwyyyd] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 130px;
    min-width: 0;
}

.route-field label[b-oao8iwyyyd],
.route-check label[b-oao8iwyyyd] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.route-select[b-oao8iwyyyd] {
    width: 100%;
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    background-color: var(--bg-card);
    /* The border is this control's only boundary, so it needs the 3:1 interactive token. */
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm);
}

.route-select:disabled[b-oao8iwyyyd] {
    background-color: var(--bg-secondary);
    color: var(--text-muted);
}

/* Keeps the two switches on one line as a pair. They are the narrowest items in a wrapping row,
   so without a wrapper of their own they break apart before anything else does. */
.route-checks[b-oao8iwyyyd] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
}

.route-check[b-oao8iwyyyd] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    padding-bottom: 0.375rem;
}

.route-check input[b-oao8iwyyyd] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-success-fill);
}

.route-check label[b-oao8iwyyyd] {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
}

/* ---------- Status, errors, summary ---------- */

.route-panel__status:empty[b-oao8iwyyyd] {
    display: none;
}

.route-status[b-oao8iwyyyd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.route-status--done[b-oao8iwyyyd] {
    /* Announced to assistive tech but not shown - the route drawing itself is the visible
       confirmation, so a "Route ready" line would just be noise on screen. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.route-error[b-oao8iwyyyd] {
    display: flex;
    gap: 0.625rem;
    margin: 0.75rem 1rem;
    padding: 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-danger-fill);
    border-radius: var(--radius-sm);
}

.route-error > i[b-oao8iwyyyd] {
    color: var(--accent-danger-text);
    margin-top: 0.125rem;
}

.route-error p[b-oao8iwyyyd] {
    margin: 0 0 0.5rem;
}

.route-retry[b-oao8iwyyyd] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 32px;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--text-primary);
    background-color: var(--bg-card);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.route-retry:hover[b-oao8iwyyyd] {
    background-color: var(--bg-tertiary);
}

.route-summary[b-oao8iwyyyd] {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.route-summary > div[b-oao8iwyyyd] {
    flex: 1 1 0;
    min-width: 0;
}

.route-summary dt[b-oao8iwyyyd] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.route-summary dd[b-oao8iwyyyd] {
    margin: 0.125rem 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.route-optimised-note[b-oao8iwyyyd] {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    margin: 0.625rem 1rem 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.route-optimised-note > i[b-oao8iwyyyd] {
    color: var(--accent-success-fill);
}

.route-actions[b-oao8iwyyyd] {
    padding: 0.5rem 1rem 0;
}

.route-fit[b-oao8iwyyyd] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 30px;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 550;
    color: var(--text-primary);
    background-color: var(--bg-card);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.route-fit:hover:not(:disabled)[b-oao8iwyyyd] {
    background-color: var(--bg-secondary);
}

.route-fit:disabled[b-oao8iwyyyd] {
    /* Nothing is zoomed into, so there is nothing to come back from. */
    color: var(--text-muted);
    border-color: var(--border-color);
    cursor: default;
}

/* The "too many records" alerts, shown before a build rather than after a refusal. Same shape as
   .route-excluded so the panel keeps one visual language for "read this"; the blocking variant
   takes the danger tokens because nothing can be built until the selection changes. */
.route-limit[b-oao8iwyyyd] {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 1rem 0;
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-warning);
    border-radius: var(--radius-sm);
}

.route-limit > i[b-oao8iwyyyd] {
    color: var(--accent-warning-text);
    margin-top: 0.125rem;
}

.route-limit--blocking[b-oao8iwyyyd] {
    border-left-color: var(--accent-danger-fill);
}

.route-limit--blocking > i[b-oao8iwyyyd] {
    color: var(--accent-danger-text);
}

.route-limit strong[b-oao8iwyyyd] {
    display: block;
    margin-bottom: 0.25rem;
}

.route-limit .route-note-body[b-oao8iwyyyd] {
    margin: 0 0 0.5rem;
}

.route-limit .route-note-body:last-child[b-oao8iwyyyd] {
    margin-bottom: 0;
}

.route-excluded[b-oao8iwyyyd] {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 1rem 0;
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-warning);
    border-radius: var(--radius-sm);
}

.route-excluded > i[b-oao8iwyyyd] {
    color: var(--accent-warning-text);
    margin-top: 0.125rem;
}

.route-excluded strong[b-oao8iwyyyd] {
    display: block;
    margin-bottom: 0.25rem;
}

.route-note-body[b-oao8iwyyyd] {
    margin: 0;
    color: var(--text-secondary);
}

.route-excluded ul[b-oao8iwyyyd] {
    margin: 0;
    padding-left: 1rem;
    color: var(--text-secondary);
}

/* ---------- Directions ---------- */

.route-directions[b-oao8iwyyyd] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.5rem 0 1rem;
}

.route-legs[b-oao8iwyyyd],
.route-steps[b-oao8iwyyyd] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.route-leg[b-oao8iwyyyd] {
    padding: 0.5rem 1rem 0.25rem;
}

.route-leg + .route-leg[b-oao8iwyyyd] {
    border-top: 1px solid var(--border-color);
}

.route-leg__head[b-oao8iwyyyd] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.25rem 0;
}

.route-leg__headings[b-oao8iwyyyd] {
    min-width: 0;
}

.route-leg__head h3[b-oao8iwyyyd] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.route-leg__meta[b-oao8iwyyyd] {
    margin: 0.125rem 0 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.route-leg__via[b-oao8iwyyyd] {
    overflow-wrap: anywhere;
}

/* The numbered badge repeats the pin on the map, so the panel and the map can be read together. */
.route-stop-badge[b-oao8iwyyyd] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    background-color: var(--bg-card);
    border: 2px solid var(--accent-success-fill);
    border-radius: 999px;
}

.route-stop-badge--start[b-oao8iwyyyd] {
    color: #ffffff;
    background-color: var(--accent-success-fill);
    border-color: var(--accent-success-fill);
}

.route-stop-badge--end[b-oao8iwyyyd] {
    color: #ffffff;
    background-color: var(--accent-danger-fill);
    border-color: var(--accent-danger-fill);
}

.route-snap-warning[b-oao8iwyyyd] {
    margin: 0.25rem 0 0 2.125rem;
    font-size: 0.75rem;
    color: var(--accent-warning-text);
}

.route-steps[b-oao8iwyyyd] {
    margin: 0.25rem 0 0 0.75rem;
    border-left: 1px solid var(--border-color);
}

.route-step[b-oao8iwyyyd] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    /* Comfortably over the 24px minimum target, and it is a full-width row. */
    min-height: 32px;
    padding: 0.375rem 0.5rem 0.375rem 0.75rem;
    font-size: 0.8125rem;
    text-align: left;
    color: var(--text-primary);
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 100ms ease;
}

.route-step:hover[b-oao8iwyyyd] {
    background-color: var(--bg-secondary);
}

.route-step.is-selected[b-oao8iwyyyd] {
    background-color: var(--bg-tertiary);
    /* Not colour alone (WCAG 1.4.1): the selected step also carries a solid left marker. */
    box-shadow: inset 3px 0 0 0 var(--accent-primary);
    font-weight: 550;
}

.route-step__icon[b-oao8iwyyyd] {
    flex: 0 0 auto;
    width: 16px;
    margin-top: 0.125rem;
    color: var(--text-secondary);
    text-align: center;
}

.route-step.is-selected .route-step__icon[b-oao8iwyyyd] {
    color: var(--accent-primary);
}

.route-step__text[b-oao8iwyyyd] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.route-step__distance[b-oao8iwyyyd] {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ---------- Map ---------- */

.route-map[b-oao8iwyyyd] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    background-color: var(--bg-secondary);
}

/* BaseMapComponent renders its own wrapper, which has to fill this pane for OpenLayers to
   measure a usable size. Scoped CSS does not cross into a child component, hence ::deep. */
.route-map[b-oao8iwyyyd]  .map-div-wrapper,
.route-map[b-oao8iwyyyd]  .map-container {
    width: 100%;
    height: 100%;
}

/* ---------- Focus ---------- */

.route-panel__close:focus-visible[b-oao8iwyyyd],
.route-select:focus-visible[b-oao8iwyyyd],
.route-check input:focus-visible[b-oao8iwyyyd],
.route-retry:focus-visible[b-oao8iwyyyd],
.route-fit:focus-visible[b-oao8iwyyyd],
.route-step:focus-visible[b-oao8iwyyyd] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 900px) {
    .route-overlay[b-oao8iwyyyd] {
        flex-direction: column-reverse;
    }

    /* Map on top, directions under it: on a phone the list is what gets read and scrolled, so it
       takes the larger share. */
    .route-map[b-oao8iwyyyd] {
        flex: 0 0 40%;
        min-height: 200px;
    }

    .route-panel[b-oao8iwyyyd] {
        flex: 1 1 auto;
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }
}

@media (prefers-reduced-motion: reduce) {
    .route-panel__close[b-oao8iwyyyd],
    .route-retry[b-oao8iwyyyd],
    .route-step[b-oao8iwyyyd] {
        transition: none;
    }
}

/* The two lists in the panel: where the route goes, and how to drive it. */

.route-tabs[b-oao8iwyyyd] {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.route-tab[b-oao8iwyyyd] {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: none;
    border: none;
    /* The underline carries the selected state, so it sits on the element rather than a pseudo
       element - it has to stay put when the label's weight changes. */
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.route-tab:hover[b-oao8iwyyyd] {
    color: var(--text-primary);
}

.route-tab.is-active[b-oao8iwyyyd] {
    color: var(--text-primary);
    border-bottom-color: var(--accent-primary, currentColor);
}

.route-stops[b-oao8iwyyyd] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.route-stop[b-oao8iwyyyd] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    /* 44px min-height: comfortably past the 24px WCAG 2.2 target, and these are tapped in a van. */
    min-height: 44px;
    padding: 0.5rem 1rem;
    text-align: left;
    color: var(--text-primary);
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.route-stop:hover[b-oao8iwyyyd] {
    background-color: var(--bg-secondary);
}

.route-stop.is-selected[b-oao8iwyyyd] {
    background-color: var(--bg-secondary);
}

.route-stop__text[b-oao8iwyyyd] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.route-stop__name[b-oao8iwyyyd] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
}

.route-stop__meta[b-oao8iwyyyd] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
/* /Components/Routing/StopPicker.razor.rz.scp.css */
/* The combobox that picks a start or finish out of the route's stops.

   Matches the option row it sits in - same label treatment, same control height, same tokens - so
   the two pickers read as part of that row rather than as something bolted beside it. */

.stop-picker[b-mbsq7zl2o8] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 180px;
    min-width: 0;
}

.stop-picker__label[b-mbsq7zl2o8] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.stop-picker__control[b-mbsq7zl2o8] {
    position: relative;
    display: flex;
    align-items: center;
}

.stop-picker__input[b-mbsq7zl2o8] {
    width: 100%;
    /* Right padding leaves room for the clear button to sit inside the field. */
    padding: 0.375rem 1.75rem 0.375rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    background-color: var(--bg-card);
    /* The border is this control's only boundary, so it needs the 3:1 interactive token. */
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm);
}

.stop-picker__input:disabled[b-mbsq7zl2o8] {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
}

.stop-picker__clear[b-mbsq7zl2o8] {
    position: absolute;
    right: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 24px square: the smallest target WCAG 2.2 AA accepts without an exception. */
    width: 24px;
    height: 24px;
    padding: 0;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.stop-picker__clear:hover[b-mbsq7zl2o8] {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

.stop-picker__list[b-mbsq7zl2o8] {
    position: absolute;
    /* Below the field, which is the label plus the control. */
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 16rem;
    margin: 0.125rem 0 0;
    padding: 0.25rem;
    overflow-y: auto;
    list-style: none;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}

.stop-picker__option[b-mbsq7zl2o8] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* Keyboard and pointer share one highlight: the active option is the one Enter would take,
   wherever the user's attention came from. */
.stop-picker__option.is-active[b-mbsq7zl2o8] {
    background-color: var(--bg-secondary);
}

.stop-picker__option.is-selected .stop-picker__option-name[b-mbsq7zl2o8] {
    font-weight: 600;
}

.stop-picker__option-name[b-mbsq7zl2o8] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.stop-picker__empty[b-mbsq7zl2o8],
.stop-picker__more[b-mbsq7zl2o8] {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.stop-picker__more[b-mbsq7zl2o8] {
    border-top: 1px solid var(--border-color);
    margin-top: 0.25rem;
}

/* Marks the options that are depots rather than records on the route. */
.stop-picker__option-icon[b-mbsq7zl2o8] {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
/* /Components/Settings/ActionMatrixFilterBuilder.razor.rz.scp.css */
.matrix-filter-builder[b-m5kt1i5z7h] { color: var(--text-primary); }
.matrix-filter-controls[b-m5kt1i5z7h] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.matrix-filter-hint[b-m5kt1i5z7h], .matrix-filter-id[b-m5kt1i5z7h] { color: var(--text-secondary); font-size: .8125rem; }
.matrix-filter-hint[b-m5kt1i5z7h] { margin: .75rem 0; }
.matrix-filter-values[b-m5kt1i5z7h] { max-height: 300px; overflow: auto; border: 1px solid var(--border-interactive); border-radius: var(--radius-md, 8px); padding: .5rem; min-width: 0; }
.matrix-filter-option[b-m5kt1i5z7h] { display: flex; align-items: start; gap: .75rem; padding: .5rem; min-height: 32px; overflow-wrap: anywhere; cursor: pointer; }
.matrix-filter-option input[b-m5kt1i5z7h] { margin-top: .25rem; flex-shrink: 0; }
.matrix-filter-option:hover[b-m5kt1i5z7h] { background: var(--bg-hover); }
.matrix-filter-preview output[b-m5kt1i5z7h] { display: block; overflow-wrap: anywhere; }
.matrix-filter-builder input[b-m5kt1i5z7h], .matrix-filter-builder select[b-m5kt1i5z7h] { background-color: var(--bg-card); color: var(--text-primary); border-color: var(--border-interactive); }
.matrix-filter-builder input:focus-visible[b-m5kt1i5z7h], .matrix-filter-builder select:focus-visible[b-m5kt1i5z7h] { outline: 2px solid var(--border-focus, var(--accent-primary)); outline-offset: 2px; }
@media (max-width: 600px) { .matrix-filter-controls[b-m5kt1i5z7h] { grid-template-columns: minmax(0, 1fr); } }
/* /Components/Settings/AmxApplicabilityRules.razor.rz.scp.css */
/* The readout rows (ReadoutRows): one bordered list, each rule a row of a label column and its pickers. */
.amx-rule-readout-list[b-wj4wcxsbgc] {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
}

.amx-rule-readout[b-wj4wcxsbgc] {
    display: grid;
    grid-template-columns: minmax(9rem, 11rem) minmax(0, 1fr);
    gap: 0.625rem;
    align-items: center;
    padding: 0.625rem 0.75rem;
    border-top: 1px solid var(--border-color);
}

.amx-rule-readout:first-child[b-wj4wcxsbgc] {
    border-top: 0;
}

.amx-rule-kind[b-wj4wcxsbgc] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.amx-rule-kind strong[b-wj4wcxsbgc] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.amx-rule-readout.is-exclusion .amx-rule-kind strong[b-wj4wcxsbgc] {
    color: var(--accent-warning-text);
}

.amx-rule-kind span[b-wj4wcxsbgc] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.amx-rule-pickers[b-wj4wcxsbgc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.amx-rule-picker[b-wj4wcxsbgc] {
    flex: 1 1 11rem;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.375rem;
    padding: 0.1875rem 0.1875rem 0.1875rem 0.625rem;
    border: 1px solid var(--border-interactive);
    border-radius: 8px;
    background: var(--bg-card);
}

.amx-rule-value[b-wj4wcxsbgc],
.amx-rule-empty[b-wj4wcxsbgc] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
}

.amx-rule-value[b-wj4wcxsbgc] {
    color: var(--text-primary);
}

.amx-rule-empty[b-wj4wcxsbgc] {
    color: var(--text-muted);
}

.amx-rule-picker .btn[b-wj4wcxsbgc] {
    flex: none;
}

.amx-rule-readout-options[b-wj4wcxsbgc] {
    padding-top: 0.625rem;
}

@media (max-width: 720px) {
    .amx-rule-readout[b-wj4wcxsbgc] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Settings/CustomisationAuditHistory.razor.rz.scp.css */
.customisation-history[b-vaezrcay6y] { color: var(--text-primary); }
.customisation-history p[b-vaezrcay6y] { color: var(--text-secondary); }
.history-grid[b-vaezrcay6y] { overflow: auto; max-height: 55vh; border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.history-grid table[b-vaezrcay6y] { width: 100%; border-collapse: collapse; background: var(--bg-card); }
.history-grid th[b-vaezrcay6y], .history-grid td[b-vaezrcay6y] { padding: .75rem; text-align: left; border-bottom: 1px solid var(--border-color); overflow-wrap: anywhere; }
.history-grid th[b-vaezrcay6y] { background: var(--bg-secondary); font-weight: 600; }
.history-grid a[b-vaezrcay6y] { color: var(--accent-success-text); text-decoration: underline; display: inline-block; min-height: 24px; }
.history-paging[b-vaezrcay6y] { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; margin-top: 1rem; }
.customisation-history :focus-visible[b-vaezrcay6y] { outline: 2px solid var(--border-focus); outline-offset: 2px; }
/* /Components/Settings/CustomToolsActionsEditor.razor.rz.scp.css */
.cta-editor[b-hc56roirke], .cta-action[b-hc56roirke] { display: flex; flex-direction: column; gap: .75rem; }
.cta-action[b-hc56roirke] { padding: 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); min-width: 0; }
.cta-action legend[b-hc56roirke] { float: none; width: auto; padding: 0 .5rem; font-size: 1rem; font-weight: 600; }
.cta-action label[b-hc56roirke] { font-weight: 600; }
.cta-actions[b-hc56roirke] { display: flex; flex-wrap: wrap; gap: .5rem; }
.cta-editor p[b-hc56roirke] { margin: 0; color: var(--text-primary); }
.cta-editor button[b-hc56roirke] { white-space: normal; overflow-wrap: anywhere; }
.cta-editor input[b-hc56roirke] { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-interactive); }
.cta-editor input:focus-visible[b-hc56roirke] { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.cta-lookup-tree[b-hc56roirke] { height: 22rem; overflow: auto; color: var(--text-primary); }
.cta-lookup-item[b-hc56roirke] { display: flex; align-items: center; gap: .5rem; padding: .35rem; overflow-wrap: anywhere; }
.cta-lookup-tree[b-hc56roirke]  .node-item-content:focus-visible,
.cta-lookup-tree[b-hc56roirke]  .expand-icon-container:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; }
.cta-lookup-tree[b-hc56roirke]  .chevron,
.cta-lookup-tree[b-hc56roirke]  .chevron-collapse { border-color: var(--text-secondary) !important; }
/* /Components/Settings/DataFieldHealthCheck.razor.rz.scp.css */
.field-health[b-x378zwdtcd] { padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font-size: .875rem; }
.field-health-toolbar[b-x378zwdtcd] { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.field-health-toolbar span[b-x378zwdtcd] { color: var(--text-secondary); }
.field-health-button[b-x378zwdtcd] { display: inline-flex; align-items: center; gap: .5rem; min-height: 36px; padding: .5rem .75rem; font: inherit; font-weight: 600; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-interactive); border-radius: 8px; }
.field-health-button:hover:not(:disabled)[b-x378zwdtcd] { background: var(--bg-hover); }
.field-health-button:focus-visible[b-x378zwdtcd] { outline: 2px solid var(--accent-success-text); outline-offset: 3px; }
.field-health-button:disabled[b-x378zwdtcd] { opacity: .5; cursor: default; }
.field-health p[b-x378zwdtcd] { margin: .75rem 0 0; }
.field-health-findings[b-x378zwdtcd] { margin: .75rem 0 0; padding-left: 1.25rem; overflow-wrap: anywhere; }
.field-health-findings li + li[b-x378zwdtcd] { margin-top: .5rem; }
/* /Components/Settings/DataFieldUsageModal.razor.rz.scp.css */
.dfu-header[b-uh6fi7d6vc] { display:flex; align-items:center; gap:10px; }
.dfu-header-icon[b-uh6fi7d6vc] { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:var(--dbd-subtle, #f1f5f2); color:var(--dbd-accent, #15803d); }
.dfu-title[b-uh6fi7d6vc] { font-size:1rem; font-weight:600; }

.dfu-loading[b-uh6fi7d6vc] { display:flex; justify-content:center; align-items:center; min-height:220px; }

.dfu-field-title[b-uh6fi7d6vc] { font-size:1rem; font-weight:600; margin:0 0 18px; color:var(--dbd-fg, #18181b); }

.dfu-section[b-uh6fi7d6vc] { margin-bottom:20px; }
.dfu-section:last-child[b-uh6fi7d6vc] { margin-bottom:0; }
.dfu-section-head[b-uh6fi7d6vc] { display:flex; align-items:center; justify-content:space-between; font-size:.85rem; font-weight:600; color:var(--dbd-fg, #18181b); margin-bottom:8px; }
.dfu-section-head i[b-uh6fi7d6vc] { color:var(--dbd-accent, #15803d); margin-right:6px; }
.dfu-count[b-uh6fi7d6vc] { display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:22px; padding:0 8px; font-size:.75rem; font-weight:600; border-radius:999px; background:var(--dbd-subtle, #f1f5f2); color:var(--dbd-muted, #52525b); }

.dfu-table-wrap[b-uh6fi7d6vc] { max-height:22vh; overflow-y:auto; border:1px solid var(--dbd-border, #e4e4e7); border-radius:8px; }
.dfu-table-wrap thead th[b-uh6fi7d6vc] { position:sticky; top:0; background:var(--dbd-subtle, #f8f9fa); z-index:1; }

.dfu-empty[b-uh6fi7d6vc] { font-size:.8rem; color:var(--dbd-muted, #71717a); padding:6px 2px; }
/* /Components/Settings/DataFieldWorkflowEffects.razor.rz.scp.css */
/* A flat card like the page's section cards: header with the count, then the fields, each opening to say why. */
.field-deps[b-d3o5bl1pzd] {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow-wrap: anywhere;
}

.field-deps-head[b-d3o5bl1pzd] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.field-deps-heading[b-d3o5bl1pzd] {
    flex: 1 1 auto;
    min-width: 0;
}

.field-deps-heading h2[b-d3o5bl1pzd] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.field-deps-heading p[b-d3o5bl1pzd] {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.field-deps-count[b-d3o5bl1pzd] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 0.5625rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.71875rem;
    font-weight: 600;
    white-space: nowrap;
}

.field-deps-count.is-warning[b-d3o5bl1pzd] {
    border-color: color-mix(in srgb, var(--accent-warning) 30%, transparent);
    background: color-mix(in srgb, var(--accent-warning) 14%, transparent);
    color: var(--accent-warning-text);
}

.field-deps-body[b-d3o5bl1pzd] {
    padding: 0.375rem 1.25rem 0.75rem;
}

.field-deps-message[b-d3o5bl1pzd] {
    margin: 0.5rem 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.field-deps-retry[b-d3o5bl1pzd] {
    margin: 0.25rem 0 0.5rem;
}

.field-deps-list[b-d3o5bl1pzd] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.field-deps-item[b-d3o5bl1pzd] {
    border-top: 1px solid var(--border-color);
}

.field-deps-item:first-child[b-d3o5bl1pzd] {
    border-top: 0;
}

.field-deps-entity[b-d3o5bl1pzd] {
    padding: 0.75rem 0;
}

.field-deps-item > details > summary[b-d3o5bl1pzd],
.field-deps-indirect > summary[b-d3o5bl1pzd] {
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0;
    cursor: pointer;
    border-radius: 6px;
}

.field-deps-item > details > summary[b-d3o5bl1pzd]::-webkit-details-marker,
.field-deps-indirect > summary[b-d3o5bl1pzd]::-webkit-details-marker {
    display: none;
}

.field-deps-item > details > summary:hover .field-deps-text strong[b-d3o5bl1pzd],
.field-deps-indirect > summary:hover .field-deps-text strong[b-d3o5bl1pzd] {
    text-decoration: underline;
}

.field-deps-item > details > summary:focus-visible[b-d3o5bl1pzd],
.field-deps-indirect > summary:focus-visible[b-d3o5bl1pzd] {
    outline: 2px solid var(--accent-success-text);
    outline-offset: 2px;
}

.field-deps-text[b-d3o5bl1pzd] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.field-deps-text strong[b-d3o5bl1pzd] {
    font-size: 0.84375rem;
    font-weight: 600;
}

.field-deps-text > span[b-d3o5bl1pzd] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.field-deps-text code[b-d3o5bl1pzd] {
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 0.75rem;
    color: inherit;
}

.field-deps-text > .field-deps-warning[b-d3o5bl1pzd],
.field-deps-warning[b-d3o5bl1pzd] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    height: 22px;
    padding: 0 0.5625rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent-warning) 30%, transparent);
    background: color-mix(in srgb, var(--accent-warning) 14%, transparent);
    color: var(--accent-warning-text);
    font-size: 0.71875rem;
    font-weight: 600;
}

.field-deps-chevron[b-d3o5bl1pzd] {
    flex: none;
    margin-top: 0.1875rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}

details[open] > summary > .field-deps-chevron[b-d3o5bl1pzd] {
    transform: rotate(180deg);
}

.field-deps-reasons[b-d3o5bl1pzd] {
    margin: 0 0 0.75rem;
    padding: 0.625rem 0.75rem 0.625rem 1.75rem;
    border-radius: 8px;
    background: var(--bg-secondary);
    font-size: 0.78125rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.field-deps-reasons .is-warning[b-d3o5bl1pzd] {
    color: var(--accent-warning-text);
}

.field-deps-indirect[b-d3o5bl1pzd] {
    border-top: 1px solid var(--border-color);
}

.field-deps-indirect .field-deps-list[b-d3o5bl1pzd] {
    padding-left: 0.75rem;
}

.field-deps-note[b-d3o5bl1pzd] {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    margin: 0.25rem 0 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    background: var(--bg-secondary);
    font-size: 0.78125rem;
    color: var(--text-secondary);
}

.field-deps-note i[b-d3o5bl1pzd] {
    margin-top: 0.125rem;
}

@media (prefers-reduced-motion: reduce) {
    .field-deps-chevron[b-d3o5bl1pzd] {
        transition: none;
    }
}
/* /Components/Settings/DataTypeRulesModal.razor.rz.scp.css */
.dtr-title[b-6twvtgxfmf], .dtr-section-title[b-6twvtgxfmf] { font-size:1rem; font-weight:600; color:var(--text-primary); }
.dtr-content[b-6twvtgxfmf] { min-width:0; color:var(--text-primary); }
.dtr-help[b-6twvtgxfmf] { font-size:.875rem; color:var(--text-secondary); }
.dtr-mode[b-6twvtgxfmf], .dtr-actions[b-6twvtgxfmf] { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-bottom:1rem; }
.dtr-mode label[b-6twvtgxfmf], .dtr-check[b-6twvtgxfmf] { display:flex; align-items:center; gap:.5rem; min-height:32px; cursor:pointer; }
.dtr-roles[b-6twvtgxfmf] { margin-top:1.25rem; border:1px solid var(--border-interactive); border-radius:8px; overflow:hidden; }
.dtr-roles-header[b-6twvtgxfmf] { padding:1rem; background:var(--bg-secondary); border-bottom:1px solid var(--border-interactive); }
.dtr-roles-header .dtr-section-title[b-6twvtgxfmf] { margin-bottom:.75rem; }
.dtr-roles-body[b-6twvtgxfmf] { padding:.75rem 1rem; background:var(--bg-primary); }
.dtr-roles-body > .dtr-check[b-6twvtgxfmf] { padding-bottom:.5rem; margin-bottom:.5rem; border-bottom:1px solid var(--border-interactive); }
.dtr-role-list[b-6twvtgxfmf] { max-height:220px; overflow:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:.25rem .75rem; }
.dtr-table-wrap[b-6twvtgxfmf] { max-height:50vh; overflow:auto; border:1px solid var(--border-interactive); border-radius:8px; }
.dtr-table[b-6twvtgxfmf] { width:100%; min-width:640px; font-size:.875rem; border-collapse:collapse; }
.dtr-table th[b-6twvtgxfmf], .dtr-table td[b-6twvtgxfmf] { padding:.5rem .75rem; vertical-align:top; border-bottom:1px solid var(--border-interactive); text-align:left; }
.dtr-table th[scope=row][b-6twvtgxfmf] { font-weight:500; }
.dtr-table thead th[b-6twvtgxfmf] { position:sticky; top:0; background:var(--bg-tertiary); z-index:1; }
.dtr-table tbody tr:nth-child(even)[b-6twvtgxfmf] { background:var(--bg-secondary); }
.dtr-table input[type=checkbox][b-6twvtgxfmf], .dtr-check input[b-6twvtgxfmf], .dtr-mode input[b-6twvtgxfmf] { flex-shrink:0; width:24px; height:24px; accent-color:var(--accent-success-fill); }
.dtr-content :focus-visible[b-6twvtgxfmf] { outline:2px solid var(--border-focus, var(--accent-primary)); outline-offset:2px; }
.dtr-table-wrap:focus-visible[b-6twvtgxfmf] { outline:2px solid var(--border-focus, var(--accent-primary)); outline-offset:2px; }
.btn.dbd-btn:focus-visible:not(:disabled)[b-6twvtgxfmf] { outline:2px solid var(--border-focus, var(--accent-primary)); outline-offset:2px; }
.btn.dbd-btn.dbd-success[b-6twvtgxfmf] { background:var(--accent-success-fill); border-color:var(--accent-success-fill); color:var(--text-on-dark); }
.btn.dbd-btn.dbd-success:not(:disabled):is(:hover, :focus, :active)[b-6twvtgxfmf] { background:var(--accent-success-fill); border-color:var(--accent-success-fill); color:var(--text-on-dark); filter:none; }
/* /Components/Settings/DisplaySectionEditor.razor.rz.scp.css */
.display-section-editor[b-rpag1edlfz] { color: var(--text-primary); }
.display-section-editor fieldset[b-rpag1edlfz] { min-width: 0; }
.display-section-editor h3[b-rpag1edlfz] { font-size: 1rem; margin: 1.5rem 0 .5rem; font-weight: 600; }
.section-settings-fields[b-rpag1edlfz] { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 1rem; }
.section-settings-hint[b-rpag1edlfz] { color: var(--text-secondary); font-size: .8125rem; margin: .5rem 0; }
.section-settings-hint code[b-rpag1edlfz] { color: inherit; overflow-wrap: anywhere; }
.section-settings-hint p[b-rpag1edlfz] { margin: .5rem 0; }
.section-matrix-filter-input[b-rpag1edlfz] { display: flex; align-items: start; gap: .5rem; }
.section-matrix-filter-input input[b-rpag1edlfz] { min-width: 0; }
.section-matrix-filter-input button[b-rpag1edlfz] { flex-shrink: 0; }
.section-settings-options[b-rpag1edlfz] { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.section-settings-options label[b-rpag1edlfz] { display: flex; align-items: center; gap: .5rem; min-height: 24px; }
.section-settings-mobile[b-rpag1edlfz] { display: inline-flex; align-items: center; gap: .5rem; }
.section-settings-roles[b-rpag1edlfz] { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; margin: 1rem 0; }
.display-section-editor input[b-rpag1edlfz], .display-section-editor select[b-rpag1edlfz] { color: var(--text-primary); background-color: var(--bg-card); border-color: var(--border-interactive); }
.display-section-editor input:focus-visible[b-rpag1edlfz], .display-section-editor select:focus-visible[b-rpag1edlfz], .display-section-editor button:focus-visible[b-rpag1edlfz] { outline: 2px solid var(--border-focus, var(--accent-primary)); outline-offset: 2px; }
@media (max-width: 600px) { .section-settings-fields[b-rpag1edlfz] { grid-template-columns: minmax(0, 1fr); } .section-matrix-filter-input[b-rpag1edlfz] { flex-direction: column; } }
/* /Components/Settings/FieldImportHelp.razor.rz.scp.css */
code[b-c0bpdg7e82] {
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

caption[b-c0bpdg7e82] {
    color: var(--text-secondary);
}

.table[b-c0bpdg7e82] {
    color: var(--text-primary);
    --bs-table-color: var(--text-primary);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border-color);
}
/* /Components/Settings/LookupEditorBreadcrumb.razor.rz.scp.css */
.lookup-navigation[b-epe5dj17yo] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2, .5rem);
}

ol[b-epe5dj17yo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, .5rem);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
    color: var(--text-primary);
}

li + li[b-epe5dj17yo]::before {
    content: "/";
    margin-right: var(--space-2, .5rem);
    color: var(--text-muted);
}

a[b-epe5dj17yo] {
    color: var(--accent-success-text);
    text-decoration: underline;
    text-underline-offset: .15em;
}

a:focus-visible[b-epe5dj17yo],
.lookup-navigation .btn.dbd-btn:focus-visible:not(:disabled)[b-epe5dj17yo] {
    outline: 2px solid var(--border-focus, var(--accent-success-text));
    outline-offset: 2px;
}
/* /Components/Settings/LookupValueTree.razor.rz.scp.css */
.lookup-value-tree[b-cam01q4szq] { list-style: none; padding: 0; margin: 0; }
li > .lookup-value-tree[b-cam01q4szq] { padding-inline-start: 1.25rem; }
.lookup-value-row[b-cam01q4szq] { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: .25rem; border-radius: 6px; color: var(--text-primary); }
.lookup-value-row.is-selected[b-cam01q4szq] { background: var(--bg-hover); }
.lookup-value-expand[b-cam01q4szq] { grid-column: 1; grid-row: 1; width: 28px; height: 32px; border: 0; background: transparent; color: var(--text-primary); border-radius: 6px; }
.lookup-value-label[b-cam01q4szq] { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: .5rem; padding: .375rem; min-height: 36px; min-width: 0; cursor: pointer; }
.lookup-value-label input[b-cam01q4szq] { flex: 0 0 24px; width: 24px; height: 24px; accent-color: var(--accent-success-fill); }
.lookup-value-label span[b-cam01q4szq] { overflow-wrap: anywhere; }
.lookup-value-label i[b-cam01q4szq] { color: var(--text-secondary); font-size: .75rem; }
.lookup-value-label:has(input:focus-visible)[b-cam01q4szq], .lookup-value-expand:focus-visible[b-cam01q4szq] { outline: 2px solid var(--border-focus); outline-offset: 2px; }
/* /Components/Settings/NodeSettingsIssueNotice.razor.rz.scp.css */
.nss-issue[b-s8200ftmix] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--nss-warn-border);
    border-radius: 8px;
    background: var(--nss-warn-bg);
}

.nss-issue-icon[b-s8200ftmix] {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--nss-warn-fg);
}

.nss-issue-body[b-s8200ftmix] {
    flex: 1 1 auto;
    min-width: 0;
}

.nss-issue-title[b-s8200ftmix] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dbd-fg);
}

.nss-issue-text[b-s8200ftmix] {
    margin: 2px 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--nss-warn-ink);
    overflow-wrap: anywhere;
}

.nss-issue-btn[b-s8200ftmix] {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--nss-warn-edge);
    border-radius: 6px;
    background: var(--dbd-surface);
    color: var(--dbd-fg);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
}

.nss-issue-btn:hover[b-s8200ftmix] {
    background: var(--nss-warn-bg);
}

.nss-issue-btn:focus-visible[b-s8200ftmix] {
    outline: 2px solid var(--dbd-accent);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .nss-issue[b-s8200ftmix] {
        flex-wrap: wrap;
    }

    .nss-issue-btn[b-s8200ftmix] {
        margin-left: 1.4rem;
    }
}
/* /Components/Settings/ReportFilterSummary.razor.rz.scp.css */
.report-filter-summary[b-c3y2qj22k7] {
    min-width: 0;
    color: var(--text-primary);
    font-size: .8125rem;
    overflow-wrap: anywhere;
}

.filter-summary-heading[b-c3y2qj22k7] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem .75rem;
    margin-bottom: .5rem;
}

.filter-summary-heading:not(:first-child)[b-c3y2qj22k7] { margin-top: .75rem; }
.filter-summary-heading > span[b-c3y2qj22k7], .filter-summary-empty[b-c3y2qj22k7] { color: var(--text-secondary); }
.filter-summary-heading strong[b-c3y2qj22k7] { font-weight: 600; }

.filter-summary-list[b-c3y2qj22k7] {
    list-style: none;
    margin: 0;
    padding: .5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-card);
}

.filter-summary-condition[b-c3y2qj22k7] {
    display: block;
    padding: .5rem .75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-secondary);
}

.filter-summary-join[b-c3y2qj22k7] {
    display: block;
    padding: .25rem .75rem;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: .75rem;
}

.filter-summary-advanced[b-c3y2qj22k7] {
    margin: 0;
    padding: .5rem .75rem;
    white-space: pre-wrap;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-secondary);
}

.filter-summary-empty[b-c3y2qj22k7] { margin: 0; }
.filter-summary-sorts[b-c3y2qj22k7] { margin: 0; padding-left: 1.5rem; }
/* /Components/Settings/SelectedFieldsHealthCheck.razor.rz.scp.css */
.selected-health[b-i0wnbd6qcf] { flex: 0 0 100%; min-width: 0; box-sizing: border-box; padding: 1rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font-size: .875rem; }
.selected-health p[b-i0wnbd6qcf] { margin: 0 0 .75rem; }
.selected-health progress[b-i0wnbd6qcf] { width: 100%; accent-color: var(--accent-success-fill); }
.selected-health-hint[b-i0wnbd6qcf] { color: var(--text-secondary); }
.selected-health-list[b-i0wnbd6qcf] { max-height: 24rem; overflow: auto; overflow-wrap: anywhere; padding: .25rem; }
.selected-health-list:focus-visible[b-i0wnbd6qcf] { outline: 2px solid var(--accent-success-text); outline-offset: 2px; }
.selected-health-field + .selected-health-field[b-i0wnbd6qcf] { border-top: 1px solid var(--border-color); padding-top: .75rem; }
.selected-health-field h3[b-i0wnbd6qcf] { margin: 0 0 .5rem; font-size: .875rem; font-weight: 600; }
.selected-health-field ul[b-i0wnbd6qcf] { padding-left: 1.25rem; }
.selected-health-field li + li[b-i0wnbd6qcf] { margin-top: .5rem; }
/* /Components/Settings/SqlFieldImport.razor.rz.scp.css */
code[b-an4u2s4mw8] {
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

caption[b-an4u2s4mw8] {
    color: var(--text-secondary);
}

.table[b-an4u2s4mw8] {
    color: var(--text-primary);
    --bs-table-color: var(--text-primary);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border-color);
}
/* /Components/Settings/UserRoleApplicabilityModal.razor.rz.scp.css */
.role-applicability[b-3krpj01usr] { border: 0; margin: 0; padding: 0; min-width: 0; }
.role-applicability-body:focus-visible[b-3krpj01usr] { outline: 2px solid var(--border-focus, var(--accent-success-fill)); outline-offset: -2px; }
.role-applicability-or[b-3krpj01usr] { display: flex; align-items: center; gap: var(--space-4, 1rem); margin: var(--space-6, 1.5rem) 0; }
.role-applicability-or[b-3krpj01usr]::before, .role-applicability-or[b-3krpj01usr]::after { content: ""; flex: 1; border-top: 1px solid var(--border-interactive); }
.role-applicability-or h3[b-3krpj01usr] { margin: 0; padding: var(--space-2, .5rem) var(--space-4, 1rem); border: 1px solid var(--border-interactive); border-radius: var(--radius-md, 8px); background: var(--bg-secondary); color: var(--text-primary); font-size: 1.125rem; font-weight: 600; }
/* /Components/User/LanguageSelector.razor.rz.scp.css */
.web-language-selector[b-dnco6brg49] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, .5rem);
    padding: var(--space-2, .5rem) var(--space-4, 1rem);
    color: var(--text-primary);
}

.web-language-selector label[b-dnco6brg49] {
    font-size: var(--text-sm, .8125rem);
    font-weight: 600;
}

.web-language-selector select[b-dnco6brg49] {
    width: 100%;
    min-height: 2rem;
    padding: var(--space-1, .25rem) var(--space-2, .5rem);
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm);
    font: inherit;
}

.web-language-selector select:focus-visible[b-dnco6brg49] {
    outline: 2px solid var(--border-interactive);
    outline-offset: 2px;
}

.language-error[b-dnco6brg49] {
    color: var(--accent-danger-text);
    font-size: var(--text-sm, .8125rem);
}
/* /Components/Voice/VoiceCommandButton.razor.rz.scp.css */
/* Voice commands - mic button and its status panel. Colours are design tokens only, so both themes
   follow app.css. The button carries its own top-bar icon button styling, matching TopMenuBar's
   .menu-icon > .btn, because it is also placed in headers that don't render TopMenuBar (Settings). */

.voice-command[b-35ll61qa0n] {
    position: relative;
    display: flex;
    align-items: center;
}

.voice-command-btn[b-35ll61qa0n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    font-size: 1rem;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    box-shadow: none;
    transition: color 0.15s ease, background 0.15s ease;
}

.voice-command-btn:hover[b-35ll61qa0n] {
    color: var(--accent-primary);
    background: var(--bg-hover);
    border-color: transparent;
}

.voice-command-btn:active[b-35ll61qa0n] {
    transform: translateY(1px);
}

.voice-command-btn:focus-visible[b-35ll61qa0n],
.voice-panel-close:focus-visible[b-35ll61qa0n] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Recording state: a red mic is the convention people recognise for "the microphone is live". */
.menu-icon > .voice-command-btn.is-listening[b-35ll61qa0n],
.menu-icon > .voice-command-btn.is-listening:hover[b-35ll61qa0n] {
    color: var(--accent-danger-text);
    background: color-mix(in srgb, var(--accent-danger) 12%, transparent);
    border-color: var(--accent-danger);
    animation: voice-pulse-b-35ll61qa0n 1.4s ease-out infinite;
}

@keyframes voice-pulse-b-35ll61qa0n {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-danger) 45%, transparent); }
    100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent-danger) 0%, transparent); }
}

.voice-panel[b-35ll61qa0n] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1060;
    width: min(340px, calc(100vw - 24px));
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: 0.875rem;
    white-space: normal;
}

.voice-panel-header[b-35ll61qa0n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.voice-panel-title[b-35ll61qa0n] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

.voice-dot[b-35ll61qa0n] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-danger);
    animation: voice-blink-b-35ll61qa0n 1s ease-in-out infinite alternate;
}

@keyframes voice-blink-b-35ll61qa0n {
    from { opacity: 1; }
    to { opacity: 0.35; }
}

.voice-panel-close[b-35ll61qa0n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}

.voice-panel-close:hover[b-35ll61qa0n] {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.voice-heard[b-35ll61qa0n] {
    margin: 0;
    font-style: italic;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.voice-hint[b-35ll61qa0n] {
    margin: 0;
    color: var(--text-secondary);
}

.voice-message[b-35ll61qa0n] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--text-secondary);
}

.voice-message-success[b-35ll61qa0n] { color: var(--accent-success-text); }
.voice-message-warning[b-35ll61qa0n] { color: var(--accent-warning-text); }
.voice-message-error[b-35ll61qa0n] { color: var(--accent-danger-text); }

.voice-help[b-35ll61qa0n] {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
    .menu-icon > .voice-command-btn.is-listening[b-35ll61qa0n],
    .voice-dot[b-35ll61qa0n] {
        animation: none;
    }
}
/* /Layout/AuthMainLayout.razor.rz.scp.css */
#blazor-error-ui[b-p3felyhl4q] {
    color: var(--text-primary);
    background: var(--bg-card);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-p3felyhl4q] {
        cursor: pointer;
        color: var(--text-primary);
        background: transparent;
        border: 0;
        min-width: 24px;
        min-height: 24px;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Layout/PublicMainLayout.razor.rz.scp.css */
#blazor-error-ui[b-in99ypf1nl] {
    color: var(--text-primary);
    background: var(--bg-card);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-in99ypf1nl] {
        cursor: pointer;
        color: var(--text-primary);
        background: transparent;
        border: 0;
        min-width: 24px;
        min-height: 24px;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Pages/Dashboard/DashboardViewLayout.razor.rz.scp.css */
/* Dashboard view header — mirrors the app chrome (.amx-subbar): a flat, full-width block on the
   card/panel surface with a hairline border. Uses the global semantic theme tokens from app.css so
   colour and dark mode track the rest of the shell automatically (no per-component overrides). */
.dashboard-view-header[b-2wxceev7dj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.dashboard-view-header-titles[b-2wxceev7dj] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.dashboard-view-header-icon[b-2wxceev7dj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--accent-primary);
    color: #ffffff;
    font-size: 1rem;
}

.dashboard-view-header-text[b-2wxceev7dj] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.dashboard-view-title[b-2wxceev7dj] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-view-subtitle[b-2wxceev7dj] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.dashboard-view-header-actions[b-2wxceev7dj] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .dashboard-view-header[b-2wxceev7dj] {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-view-header-actions[b-2wxceev7dj] {
        justify-content: flex-end;
    }
}
/* /Pages/DataModel/DataModelPage.razor.rz.scp.css */
/* Data model page. Flat, token colours only (DESIGN_LANGUAGE.md). */
.data-model-page[b-7v6vmckc3d] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    min-height: 0;
    min-width: 0;
    padding: 16px;
    color: var(--text-primary);
}

.data-model-state[b-7v6vmckc3d] {
    margin: auto;
    max-width: 520px;
    text-align: center;
}

.data-model-page:fullscreen[b-7v6vmckc3d] {
    width: 100%;
    height: 100%;
    max-width: none;
    overflow: auto;
    box-sizing: border-box;
    background: var(--bg-primary);
}

.data-model-fullscreen-title[b-7v6vmckc3d] {
    display: none;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.data-model-page:fullscreen .data-model-fullscreen-title[b-7v6vmckc3d] {
    display: block;
}

.data-model-header-actions[b-7v6vmckc3d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.data-model-fullscreen-error[b-7v6vmckc3d] {
    margin: 0;
    color: var(--accent-danger-text);
}

.data-model-header[b-7v6vmckc3d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.data-model-title[b-7v6vmckc3d] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.data-model-subtitle[b-7v6vmckc3d] {
    margin: 2px 0 0;
    color: var(--text-secondary);
}

/* Download: one ordinary button, opening a menu of what can be downloaded. */
.data-model-download-menu[b-7v6vmckc3d] {
    position: relative;
}

.data-model-download-caret[b-7v6vmckc3d] {
    margin-left: 4px;
    font-size: 0.75em;
}

.data-model-menu-backdrop[b-7v6vmckc3d] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.data-model-menu[b-7v6vmckc3d] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1041;
    width: min(340px, calc(100vw - 32px));
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

/* Name above description, with a download icon to the right of both: the icon is what says, at rest,
   that each row downloads something. */
.data-model-menu-item[b-7v6vmckc3d] {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    text-align: left;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.data-model-menu-item:hover:not(:disabled)[b-7v6vmckc3d],
.data-model-menu-item:focus-visible[b-7v6vmckc3d] {
    background: var(--bg-tertiary);
}

.data-model-menu-item:focus-visible[b-7v6vmckc3d] {
    outline: 2px solid var(--accent-link);
    outline-offset: -2px;
}

.data-model-menu-item:disabled[b-7v6vmckc3d] {
    cursor: default;
    opacity: 0.6;
}

.data-model-menu-name[b-7v6vmckc3d] {
    font-weight: 600;
}

.data-model-menu-type[b-7v6vmckc3d] {
    margin-left: 4px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.data-model-menu-name[b-7v6vmckc3d],
.data-model-menu-hint[b-7v6vmckc3d] {
    grid-column: 1;
}

.data-model-menu-icon[b-7v6vmckc3d] {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--text-secondary);
}

.data-model-menu-item:hover:not(:disabled) .data-model-menu-icon[b-7v6vmckc3d],
.data-model-menu-item:focus-visible .data-model-menu-icon[b-7v6vmckc3d] {
    color: var(--accent-link);
}

.data-model-menu-hint[b-7v6vmckc3d] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.data-model-menu-note[b-7v6vmckc3d] {
    margin: 4px 0 0;
    padding: 8px 10px 6px;
    border-top: 1px solid var(--border-color);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* minmax(0, ...) and min-width: 0 below: without them the diagram's own pixel width becomes the
   column's minimum, and the whole page scrolls sideways - title, buttons and options off-screen -
   instead of the diagram scrolling inside its own area. */
.data-model-body[b-7v6vmckc3d] {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
}

.data-model-options-toggle[b-7v6vmckc3d] {
    display: none;
}

@media (max-width: 900px) {
    .data-model-page[b-7v6vmckc3d] {
        height: auto;
        padding: 12px;
    }

    .data-model-body[b-7v6vmckc3d] {
        grid-template-columns: minmax(0, 1fr);
    }

    .data-model-options-toggle[b-7v6vmckc3d] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        justify-self: start;
    }

    /* Collapsed until asked for, so the diagram comes first on a phone. */
    .data-model-panel:not(.is-open)[b-7v6vmckc3d] {
        display: none;
    }

    .data-model-canvas[b-7v6vmckc3d]  .dm-scroll {
        height: 65vh;
        min-height: 300px;
        flex: 0 0 auto;
    }

    .data-model-download-menu[b-7v6vmckc3d] {
        flex: 1 1 100%;
    }
}

.data-model-panel[b-7v6vmckc3d] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.data-model-section[b-7v6vmckc3d] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.data-model-label[b-7v6vmckc3d] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    padding: 0;
}

.data-model-key[b-7v6vmckc3d] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.data-model-chips[b-7v6vmckc3d] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.data-model-chips li[b-7v6vmckc3d] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 10px;
    border-radius: 999px;
    background: var(--accent-wash);
    color: var(--accent-link);
    font-weight: 600;
}

.data-model-chips button[b-7v6vmckc3d] {
    border: 0;
    background: transparent;
    color: inherit;
    padding: 2px 6px;
    border-radius: 999px;
    cursor: pointer;
}

.data-model-chips button:focus-visible[b-7v6vmckc3d],
.data-model-box-focus:focus-visible[b-7v6vmckc3d] {
    outline: 2px solid var(--accent-link);
    outline-offset: 1px;
}

.data-model-entity-list[b-7v6vmckc3d] {
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--border-interactive);
    border-radius: 8px;
}

.data-model-entity-list li[b-7v6vmckc3d],
.data-model-check[b-7v6vmckc3d] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 4px;
}

.data-model-entity-list label[b-7v6vmckc3d],
.data-model-check label[b-7v6vmckc3d] {
    margin: 0;
    cursor: pointer;
    min-width: 0;
}

/* Name above, entity key beneath it: one entry per line, no sideways scroll. */
.data-model-entity-list li[b-7v6vmckc3d] {
    align-items: flex-start;
}

.data-model-entity-list input[b-7v6vmckc3d] {
    margin-top: 3px;
}

.data-model-entity-list label[b-7v6vmckc3d] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.data-model-entity-name[b-7v6vmckc3d] {
    color: var(--text-primary);
}

.data-model-zoom-level[b-7v6vmckc3d] {
    min-width: 3.5em;
    text-align: center;
}

.data-model-zoom button[aria-pressed="true"][b-7v6vmckc3d] {
    background: var(--accent-wash);
    color: var(--accent-link);
}

.data-model-detail-actions[b-7v6vmckc3d] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.data-model-entity-list input[b-7v6vmckc3d],
.data-model-check input[b-7v6vmckc3d] {
    accent-color: var(--accent-primary);
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.data-model-legend div[b-7v6vmckc3d] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.data-model-details-title[b-7v6vmckc3d] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.data-model-fields[b-7v6vmckc3d] {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
}

.data-model-fields th[b-7v6vmckc3d],
.data-model-fields td[b-7v6vmckc3d] {
    padding: 3px 4px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
    word-break: break-word;
}

.data-model-pk[b-7v6vmckc3d] {
    display: inline-block;
    padding: 0 4px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--accent-wash);
    color: var(--accent-link);
}

.data-model-canvas[b-7v6vmckc3d] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.data-model-zoom[b-7v6vmckc3d] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
}

/* The line samples in the side panel's Key. Scoped to the Key: written broadly, these also matched the
   diagram's own lines (DataModelDiagramView) and, loading after its colour rules, painted them black. */
.data-model-legend .dm-edge[b-7v6vmckc3d] {
    fill: none;
    stroke-width: 1.6;
}

.data-model-legend .dm-edge--primary[b-7v6vmckc3d] { stroke: var(--text-primary); }
.data-model-legend .dm-edge--other[b-7v6vmckc3d] { stroke: var(--text-secondary); stroke-dasharray: 6 4; }
.data-model-legend .dm-edge--onetoone[b-7v6vmckc3d] { stroke: var(--accent-link); stroke-dasharray: 6 4; }
.data-model-legend .dm-edge--lookup[b-7v6vmckc3d] { stroke: var(--text-secondary); stroke-dasharray: 2 3; }
/* /Pages/DataView/LcpAddAssets.razor.rz.scp.css */
.lcp-add-assets-grid-selection-container[b-6p1k5f7g54] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.lcp-add-assets-grid-container[b-6p1k5f7g54] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

@media (min-width: 992px) {
    .lcp-add-assets-grid-selection-container[b-6p1k5f7g54] {
        flex-direction: row;
    }

    .lcp-add-assets-grid-selection-container .selected-items-panel[b-6p1k5f7g54] {
        width: 320px;
        flex-shrink: 0;
        max-height: none;
        margin-top: 0;
    }
}

.selected-items-panel[b-6p1k5f7g54] {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 0.75rem;
    background-color: #f8f9fa;
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.selected-items-list[b-6p1k5f7g54] {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.selected-item[b-6p1k5f7g54] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

.selected-item span[b-6p1k5f7g54] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.remove-selected-btn[b-6p1k5f7g54] {
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    line-height: 1;
    flex-shrink: 0;
}

[data-theme="dark"] .selected-items-panel[b-6p1k5f7g54] {
    background-color: #1f2937;
    border-color: #374151;
}

[data-theme="dark"] .selected-item[b-6p1k5f7g54] {
    background-color: #374151;
    color: #e5e7eb;
}
/* /Pages/DataView/PlotPoints.razor.rz.scp.css */
.plot-point-container[b-cqrd7kcydh] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    gap: 10px;
}

.plotting-area[b-cqrd7kcydh] {
    padding: 0 10px 10px;
    position: relative;
    height: 100%;
    width: 100%;
}

.plot-point-toolbar[b-cqrd7kcydh]{
    padding: 0 8px;
}
/* /Pages/DataView/SelectAssetWithMap.razor.rz.scp.css */
/* Asset selection map - follows DESIGN_LANGUAGE.md: flat surfaces, one green accent,
   borders for structure, tokens rather than hex. Tokens are scoped to the page root so
   they cannot leak into the rest of the app. */
.sa-page[b-99lxcfnsvf] {
    --dbd-bg: var(--bg-primary);
    --dbd-surface: var(--bg-card);
    --dbd-fg: var(--text-primary);
    --dbd-muted: var(--text-muted);
    --dbd-border: var(--border-color);
    --dbd-border-strong: var(--border-interactive);
    --dbd-subtle: var(--bg-secondary);
    --dbd-accent: var(--accent-success-fill);
    --dbd-accent-soft: var(--accent-wash);

    --sa-radius-sm: 6px;
    --sa-radius-md: 8px;
    --sa-radius-lg: 12px;
    --sa-shadow-sm: 0 1px 2px rgba(0, 0, 0, .03);
    --sa-shadow-md: 0 2px 8px rgba(0, 0, 0, .06);

    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: var(--dbd-bg);
    color: var(--dbd-fg);
}

.sa-loading[b-99lxcfnsvf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Top bar -------------------------------------------------------------- */
.sa-topbar[b-99lxcfnsvf] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 56px;
    padding: .5rem 1rem;
    background: var(--dbd-surface);
    border-bottom: 1px solid var(--dbd-border);
    flex-wrap: wrap;
}

.sa-mark[b-99lxcfnsvf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--sa-radius-md);
    background: var(--dbd-accent);
    color: var(--text-on-dark);
    font-size: .9rem;
}

.sa-heading[b-99lxcfnsvf] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.sa-title[b-99lxcfnsvf] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--dbd-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sa-subtitle[b-99lxcfnsvf] {
    font-size: .8125rem;
    color: var(--dbd-muted);
    line-height: 1.3;
}

.sa-topbar-actions[b-99lxcfnsvf] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    flex-wrap: wrap;
}

/* Visible to screen readers only - carries the selection count while the dock is hidden. */
.sa-sr-only[b-99lxcfnsvf] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Map / Split / List switch -------------------------------------------
   Segmented control on native radios (clipped, not display:none, so they keep
   their place in the tab order and their arrow-key group semantics). */
.sa-viewswitch[b-99lxcfnsvf] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: var(--sa-radius-md);
    background: var(--dbd-subtle);
}

.sa-viewswitch-input[b-99lxcfnsvf] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.sa-viewswitch-label[b-99lxcfnsvf] {
    min-width: 32px;
    min-height: 32px;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: .3rem .625rem;
    border-radius: var(--sa-radius-sm);
    font-size: .8125rem;
    font-weight: 550;
    color: var(--dbd-muted);
    cursor: pointer;
    transition: background-color 100ms ease, color 100ms ease;
}

.sa-viewswitch-label:hover[b-99lxcfnsvf] {
    color: var(--dbd-fg);
}

.sa-viewswitch-input:checked + .sa-viewswitch-label[b-99lxcfnsvf] {
    background: var(--dbd-surface);
    box-shadow: var(--sa-shadow-sm);
    color: var(--accent-success-text);
    font-weight: 600;
}

.sa-viewswitch-input:focus-visible + .sa-viewswitch-label[b-99lxcfnsvf] {
    outline: 2px solid var(--accent-success-text);
    outline-offset: 2px;
}

/* Icon-only buttons ---------------------------------------------------- */
.sa-icon-btn[b-99lxcfnsvf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--dbd-border);
    border-radius: var(--sa-radius-md);
    background: var(--dbd-surface);
    color: var(--dbd-fg);
    font-size: .85rem;
    transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
}

.sa-icon-btn:hover[b-99lxcfnsvf] {
    background: var(--dbd-subtle);
    border-color: var(--dbd-border-strong);
}

.sa-icon-btn:focus-visible[b-99lxcfnsvf] {
    outline: 2px solid var(--accent-success-text);
    outline-offset: 2px;
    border-color: var(--dbd-accent);
    box-shadow: 0 0 0 3px var(--dbd-accent-soft);
}

.sa-icon-btn-danger:hover[b-99lxcfnsvf] {
    border-color: var(--accent-danger);
    color: var(--accent-danger-text);
}

/* Search strip --------------------------------------------------------- */
/* One card carrying both halves of the row - search to the left, what is selected to the right -
   rather than two bordered boxes sitting next to each other. Same flat card as the surfaces below
   it, so the page reads as a stack of three panels. */
.sa-toolbar[b-99lxcfnsvf] {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    flex: 0 0 auto;
    margin: .75rem 1rem 0;
    padding: .5rem .625rem;
    border: 1px solid var(--dbd-border);
    border-radius: var(--sa-radius-lg);
    background: var(--dbd-surface);
    box-shadow: var(--sa-shadow-sm);
}

.sa-search-controls[b-99lxcfnsvf] {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 1 1 360px;
    min-width: 0;
}

.sa-search[b-99lxcfnsvf] {
    display: flex;
    align-items: center;
    gap: .375rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 .375rem 0 .625rem;
    border: 1px solid var(--dbd-border-strong);
    border-radius: var(--sa-radius-md);
    background: var(--dbd-subtle);
    transition: border-color 100ms ease, box-shadow 100ms ease, background-color 100ms ease;
}

.sa-search:focus-within[b-99lxcfnsvf] {
    border-color: var(--dbd-accent);
    background: var(--dbd-surface);
    box-shadow: 0 0 0 3px var(--dbd-accent-soft);
    outline: 2px solid var(--accent-success-text);
    outline-offset: 2px;
}

.sa-search-icon[b-99lxcfnsvf] {
    color: var(--dbd-muted);
    font-size: .8125rem;
}

.sa-search-input[b-99lxcfnsvf] {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--dbd-fg);
    font-size: .85rem;
}

.sa-search-input:focus[b-99lxcfnsvf] {
    outline: none;
}

.sa-search-input[b-99lxcfnsvf]::placeholder {
    color: var(--dbd-muted);
}

.sa-search-clear[b-99lxcfnsvf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: var(--sa-radius-sm);
    background: transparent;
    color: var(--dbd-muted);
    font-size: .75rem;
    transition: background-color 100ms ease, color 100ms ease;
}

.sa-search-clear:hover[b-99lxcfnsvf] {
    background: var(--dbd-subtle);
    color: var(--dbd-fg);
}

.sa-search-clear:focus-visible[b-99lxcfnsvf] {
    outline: 2px solid var(--accent-success-text);
    outline-offset: 2px;
}

.sa-search-go[b-99lxcfnsvf] {
    flex-shrink: 0;
    height: 28px;
    padding: 0 .625rem;
    font-size: .8125rem;
}

.sa-search-applied[b-99lxcfnsvf] {
    font-size: .8125rem;
    color: var(--dbd-muted);
}

.sa-pin-map[b-99lxcfnsvf] {
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 32px;
    margin: 0;
    font-size: .875rem;
    cursor: pointer;
}

.sa-pin-map input[b-99lxcfnsvf] {
    width: 24px;
    height: 24px;
    accent-color: var(--dbd-accent);
}

.sa-pin-map input:focus-visible[b-99lxcfnsvf] {
    outline: 2px solid var(--accent-success-text);
    outline-offset: 2px;
}

.sa-location-note[b-99lxcfnsvf] {
    margin: 0;
    padding: .625rem .75rem;
    background: var(--dbd-subtle);
    color: var(--text-secondary);
    border-radius: var(--sa-radius-sm);
    font-size: .8125rem;
}

.sa-location-note i[b-99lxcfnsvf] {
    margin-right: .375rem;
}

/* Body ----------------------------------------------------------------- */
.sa-body[b-99lxcfnsvf] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: .75rem 1rem 1rem;
}

/* One surface fills the body; in split they share it. */
.sa-surfaces[b-99lxcfnsvf] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.sa-surfaces.is-split[b-99lxcfnsvf] {
    flex-direction: column;
}

@media (min-width: 992px) {
    .sa-surfaces.is-split[b-99lxcfnsvf] {
        flex-direction: row-reverse;
    }

    .sa-surfaces.is-split > *[b-99lxcfnsvf] {
        flex: 1 1 50%;
        min-width: 0;
    }

    .sa-surfaces.is-split > .sa-grid[b-99lxcfnsvf] {
        flex-basis: 58%;
    }

    .sa-surfaces.is-split > .sa-map[b-99lxcfnsvf] {
        flex-basis: 42%;
    }
}

.sa-grid[b-99lxcfnsvf] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    overflow: auto;
    padding: .5rem;
    border: 1px solid var(--dbd-border);
    border-radius: var(--sa-radius-lg);
    background: var(--dbd-surface);
    box-shadow: var(--sa-shadow-sm);
}

.sa-grid-loading[b-99lxcfnsvf] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.sa-filter-button[b-99lxcfnsvf] {
    flex-shrink: 0;
    min-height: 36px;
    gap: .375rem;
}

.sa-page .sa-filter-active[b-99lxcfnsvf] {
    color: var(--accent-success-text);
    background: var(--bg-card);
    border-color: var(--accent-success-text);
}

.sa-filter-pill[b-99lxcfnsvf] {
    padding: .125rem .375rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .75rem;
    white-space: nowrap;
}

.sa-filter-fields[b-99lxcfnsvf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: .5rem;
    color: var(--text-primary);
}

.sa-filter-panel[b-99lxcfnsvf] {
    flex: 0 0 auto;
    margin: .5rem 1rem 0;
    padding: .75rem;
    max-height: 45vh;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
}

.sa-filter-panel h2[b-99lxcfnsvf] {
    font-size: 1rem;
    margin: 0 0 .75rem;
}

.sa-filter-actions[b-99lxcfnsvf] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}

/* Override the global dark button states, whose bright green fill fails white-text contrast. */
.sa-page .dbd-btn.dbd-success[b-99lxcfnsvf] {
    background: var(--accent-success-fill) !important;
    border-color: var(--accent-success-fill) !important;
    color: var(--text-on-dark) !important;
    filter: none !important;
}

.sa-page .dbd-btn:focus-visible[b-99lxcfnsvf] {
    outline: 2px solid var(--accent-success-text) !important;
    outline-offset: 2px;
}

.sa-filter-fields select[b-99lxcfnsvf] {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    margin-bottom: .5rem;
    padding: .375rem .5rem;
    border: 1px solid var(--border-interactive);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
}

.sa-filter-fields select:focus-visible[b-99lxcfnsvf] {
    outline: 2px solid var(--accent-success-text);
    outline-offset: 2px;
}

/* This picker uses the page search and the count below the grid. */
.sa-grid[b-99lxcfnsvf]  .data-grid-header {
    display: none;
}

.sa-map[b-99lxcfnsvf] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow: hidden;
    border: 1px solid var(--dbd-border);
    border-radius: var(--sa-radius-lg);
    background: var(--dbd-surface);
    box-shadow: var(--sa-shadow-sm);
}

/* The map component's own root is height:100%; as a flex item it needs to be told to fill. */
.sa-map[b-99lxcfnsvf]  > * {
    flex: 1 1 auto;
    min-width: 0;
}

.sa-empty[b-99lxcfnsvf] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem 1rem;
    text-align: center;
    border: 1px solid var(--dbd-border);
    border-radius: var(--sa-radius-lg);
    background: var(--dbd-surface);
    box-shadow: var(--sa-shadow-sm);
}

.sa-empty-icon[b-99lxcfnsvf] {
    font-size: 1.5rem;
    color: var(--dbd-muted);
}

.sa-empty-title[b-99lxcfnsvf] {
    font-size: 1rem;
    font-weight: 600;
}

.sa-empty-hint[b-99lxcfnsvf] {
    max-width: 42ch;
    font-size: .8125rem;
    color: var(--dbd-muted);
}

/* Row under the list: what is loaded on the left, what to load next on the right. */
.sa-grid-more[b-99lxcfnsvf] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: 0 .25rem;
}

.sa-grid-more .btn:first-of-type[b-99lxcfnsvf] {
    margin-left: auto;
}

.sa-grid-note[b-99lxcfnsvf] {
    font-size: .8125rem;
    color: var(--dbd-muted);
}

/* Selection bar -------------------------------------------------------- */
/* The right-hand half of the search strip's card - no card of its own, or the row reads as two
   panels jammed together. It used to run along the bottom of the body, where on the list it
   followed a scrolling grid and could be pushed off screen unread. */
.sa-dock[b-99lxcfnsvf] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
    flex: 0 0 auto;
    margin-left: auto;
}

/* Sized to the search box beside it rather than to the page's default button height. */
.sa-dock .btn[b-99lxcfnsvf] {
    height: 28px;
    padding: 0 .625rem;
    font-size: .8125rem;
}

/* Wrapped onto its own line there is nothing to sit beside, so it starts where the search did and
   takes a rule above it to keep the two halves of the card apart. */
@media (max-width: 767.98px) {
    .sa-dock[b-99lxcfnsvf] {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
        padding-top: .5rem;
        border-top: 1px solid var(--dbd-border);
    }
}

.sa-dock-count[b-99lxcfnsvf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--dbd-accent);
    color: var(--text-on-dark);
    font-size: .75rem;
    font-weight: 600;
}

.sa-dock-label[b-99lxcfnsvf] {
    font-size: .8125rem;
    color: var(--dbd-muted);
    white-space: nowrap;
}

.sa-dock-sep[b-99lxcfnsvf] {
    width: 1px;
    height: 20px;
    background: var(--dbd-border);
}

/* Selected assets modal ------------------------------------------------ */
.sa-selected-list[b-99lxcfnsvf] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sa-selected-row[b-99lxcfnsvf] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .625rem;
    border-radius: var(--sa-radius-sm);
    font-size: .875rem;
    transition: background-color 100ms ease;
}

.sa-selected-row:hover[b-99lxcfnsvf] {
    background: var(--dbd-subtle);
}

.sa-selected-icon[b-99lxcfnsvf] {
    color: var(--dbd-muted);
    font-size: .8125rem;
}

.sa-selected-name[b-99lxcfnsvf] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sa-selected-empty[b-99lxcfnsvf] {
    margin: 0;
    padding: .5rem;
    font-size: .875rem;
    color: var(--dbd-muted);
}

.sa-modal-footer[b-99lxcfnsvf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
}

@media (max-width: 991.98px) {
    .sa-subtitle[b-99lxcfnsvf] {
        display: none;
    }

    .sa-surfaces.is-split > *[b-99lxcfnsvf] {
        min-height: 320px;
    }

    .sa-surfaces.is-split[b-99lxcfnsvf] {
        overflow: auto;
    }
}

@media (max-width: 767.98px) {
    .sa-topbar[b-99lxcfnsvf] {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        gap: .375rem;
        padding: .5rem;
    }

    .sa-mark[b-99lxcfnsvf],
    .sa-add-asset-label[b-99lxcfnsvf] {
        display: none;
    }

    .sa-topbar-actions[b-99lxcfnsvf] {
        display: contents;
    }

    .sa-topbar-actions > .btn:not(.sa-add-asset)[b-99lxcfnsvf] {
        grid-column: 1 / -1;
    }

    .sa-add-asset[b-99lxcfnsvf] {
        width: 44px;
        min-height: 44px;
        padding: 0;
        justify-content: center;
    }
}

@media (max-width: 359.98px) {
    .sa-heading[b-99lxcfnsvf] {
        grid-column: 2 / -1;
    }

    .sa-viewswitch[b-99lxcfnsvf] {
        grid-column: 1 / 4;
        justify-self: end;
    }

    .sa-add-asset[b-99lxcfnsvf] {
        grid-column: 4;
    }
}

@media (max-width: 640px) {
    .sa-viewswitch-label[b-99lxcfnsvf] {
        padding: .25rem;
    }

    /* Retain the native radios' accessible names while displaying only icons. */
    .sa-view-label[b-99lxcfnsvf] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .sa-toolbar[b-99lxcfnsvf] {
        margin: .5rem .5rem 0;
    }

    .sa-search-controls[b-99lxcfnsvf] {
        gap: .5rem;
    }

    .sa-filter-label[b-99lxcfnsvf],
    .sa-search-go-label[b-99lxcfnsvf],
    .sa-search-icon[b-99lxcfnsvf] {
        display: none;
    }

    .sa-filter-button[b-99lxcfnsvf],
    .sa-search-go[b-99lxcfnsvf] {
        min-width: 32px;
        padding: .25rem;
    }

    .sa-search[b-99lxcfnsvf] {
        padding-left: .375rem;
        gap: .125rem;
    }

    .sa-body[b-99lxcfnsvf] {
        padding: .5rem;
    }
}

/* Locate an asset without selecting the report row. */
.sa-locate-asset[b-99lxcfnsvf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: .25rem;
    border: 1px solid var(--border-interactive);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--accent-success-text);
    cursor: pointer;
}
.sa-locate-asset:focus-visible[b-99lxcfnsvf] {
    outline: 2px solid var(--accent-success-text);
    outline-offset: 2px;
}
.sa-locate-asset:disabled[b-99lxcfnsvf] { cursor: wait; opacity: .65; }
.sa-map-focus-status[b-99lxcfnsvf] { margin: 0; padding: .25rem .5rem; font-size: .875rem; color: var(--text-primary); }
.sa-map-focus-status:empty[b-99lxcfnsvf] { padding: 0; }

.sa-map-toast-region[b-99lxcfnsvf] {
    position: fixed;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 11000;
    max-width: calc(100% - 2rem);
    width: max-content;
    pointer-events: none;
}
.sa-map-toast[b-99lxcfnsvf] {
    padding: .75rem 1rem;
    border: 1px solid var(--dbd-border-strong);
    border-radius: var(--sa-radius-sm);
    background: var(--dbd-surface);
    color: var(--dbd-fg);
    box-shadow: var(--sa-shadow-md);
    font-size: .875rem;
}
.sa-grid[b-99lxcfnsvf]  .grid-row > .grid-cell:has(.sa-locate-asset) { padding: 2px; }
/* /Pages/Designer/FormDesignerBulkLabels.razor.rz.scp.css */
.bulk-label-settings[b-ac9fwf46fj] {
    color: var(--text-primary);
    font-size: .875rem;
}

.bulk-label-table[b-ac9fwf46fj] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.bulk-label-table th[b-ac9fwf46fj],
.bulk-label-table td[b-ac9fwf46fj] {
    padding: .75rem .5rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.bulk-label-table thead th[b-ac9fwf46fj] {
    background: var(--bg-secondary);
    font-weight: 600;
}

.bulk-label-table th:first-child[b-ac9fwf46fj],
.bulk-label-table td:first-child[b-ac9fwf46fj] {
    width: 22%;
    text-align: center;
}

.bulk-label-table th:nth-child(2)[b-ac9fwf46fj] { width: 34%; }
.bulk-label-table tbody th[b-ac9fwf46fj] { font-weight: 500; }
.bulk-label-table label[b-ac9fwf46fj] { margin: 0; }
.bulk-label-table fieldset[b-ac9fwf46fj] { margin: 0; padding: 0; border: 0; min-width: 0; }
.bulk-label-table fieldset:disabled[b-ac9fwf46fj] { opacity: .55; }

.bulk-label-table input[type="checkbox"][b-ac9fwf46fj] {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    accent-color: var(--accent-success);
}

.bulk-label-table input:focus-visible[b-ac9fwf46fj] {
    outline: 2px solid var(--border-focus, var(--accent-success));
    outline-offset: 2px;
}

.bulk-label-hint[b-ac9fwf46fj] { color: var(--text-secondary); margin-bottom: 0; }
.bulk-label-error[b-ac9fwf46fj] { color: var(--accent-danger-text); }

@media (max-width: 480px) {
    .bulk-label-table th[b-ac9fwf46fj],
    .bulk-label-table td[b-ac9fwf46fj] { padding: .5rem .25rem; }
}
/* /Pages/Designer/FormDesignerCopyDialog.razor.rz.scp.css */
.copy-form-actions[b-sipz5br651] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    width: 100%;
}

.copy-form-actions button[b-sipz5br651] {
    white-space: normal;
}

.copy-form-actions button:focus-visible[b-sipz5br651] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}
/* /Pages/Designer/FormDesignerCreateDialog.razor.rz.scp.css */
.create-form-fields[b-emua5u99qn] {
    display: grid;
    gap: 1.25rem;
    color: var(--text-primary);
}

.create-form-fields label[b-emua5u99qn] {
    display: block;
    margin-bottom: .5rem;
    font-size: .8125rem;
    font-weight: 600;
}

.create-form-fields input[b-emua5u99qn] {
    width: 100%;
    min-width: 0;
    padding: .5rem .625rem;
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    background: var(--bg-card);
    font-size: .875rem;
}

.create-form-fields input:focus[b-emua5u99qn],
.create-form-fields input:focus-visible[b-emua5u99qn] {
    outline: 2px solid var(--border-focus, var(--accent-success-text));
    outline-offset: 2px;
}

.create-form-fields input[aria-invalid="true"][b-emua5u99qn] { border-color: var(--accent-danger-text); }
.create-form-error[b-emua5u99qn] { margin: .5rem 0 0; font-size: .875rem; color: var(--accent-danger-text); }
.create-form-order[b-emua5u99qn] { display: flex; align-items: center; gap: .5rem; }
.create-form-order input[b-emua5u99qn] { flex: 1; }
.create-form-order button[b-emua5u99qn] { flex-shrink: 0; }
/* /Pages/Designer/FormDesignerFormOrderDialog.razor.rz.scp.css */
.form-order-picker[b-shn6h5n42m] { color: var(--text-primary); font-size: .875rem; }
.form-order-hint[b-shn6h5n42m] { color: var(--text-secondary); }
.form-order-scroll[b-shn6h5n42m] { max-height: 55vh; overflow-y: auto; padding: .25rem; }
.form-order-list[b-shn6h5n42m] { list-style: none; padding: 0; margin: 0; }
.form-order-insert[b-shn6h5n42m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 36px;
    padding: .5rem .75rem;
    border: 1px dashed var(--border-interactive);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    overflow-wrap: anywhere;
    font: inherit;
}
.form-order-insert:hover[b-shn6h5n42m] { background: var(--bg-hover); }
.form-order-insert.selected[b-shn6h5n42m] {
    border-style: solid;
    border-color: var(--accent-success-text);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
}
.form-order-row[b-shn6h5n42m] { display: flex; gap: .75rem; padding: .75rem; }
.form-order-row > div[b-shn6h5n42m] { min-width: 0; }
.form-order-number[b-shn6h5n42m] { min-width: 1.5rem; color: var(--text-secondary); }
.form-order-name[b-shn6h5n42m] { display: block; overflow-wrap: anywhere; }
.form-order-code[b-shn6h5n42m] { display: block; color: var(--text-secondary); font-size: .8125rem; overflow-wrap: anywhere; }
.form-order-insert:focus[b-shn6h5n42m],
.form-order-scroll:focus-visible[b-shn6h5n42m] { outline: 2px solid var(--border-focus, var(--accent-success-text)); outline-offset: 2px; }
/* /Pages/GridEditor/GridEditor.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   Grid Editor — page shell

   The screen was ported from the phone app: a blue breadcrumb strip, a stack
   of full-width buttons, hard-coded white cards with black borders and two
   half-width Previous/Next slabs. On a desktop that wasted the whole width and
   themed nowhere.

   The web layout is a toolbar (title + actions, matching the DataView this is
   opened from), a filter/pager bar, then the record cards, then a pager.

   Per DESIGN_LANGUAGE.md the page declares the --dbd-* tokens at its root, but
   MAPS them onto the app's global light/dark tokens rather than hard-coding
   hex - the pattern dashboard-designer.css follows - so the editor and the
   DataView beside it are the same surface in both themes.
   ═══════════════════════════════════════════════════════════════════════ */

.grid-editor-page[b-eoovjk9m38] {
    --dbd-bg: var(--bg-primary);
    --dbd-surface: var(--bg-card);
    --dbd-fg: var(--text-primary);
    --dbd-muted: var(--text-muted);
    --dbd-border: var(--border-color);
    --dbd-border-strong: var(--border-interactive);
    --dbd-subtle: var(--bg-secondary);
    --dbd-accent: var(--accent-success-fill);
    --dbd-accent-bright: var(--accent-success);
    --dbd-accent-strong: var(--accent-success-text);
    --dbd-accent-soft: rgba(34, 197, 94, 0.10);
    --dbd-danger: var(--accent-danger);
    --dbd-danger-text: var(--accent-danger-text);

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    width: 100%;
    min-height: 0;
    padding: 0.5rem;
    background: var(--dbd-bg);
    color: var(--dbd-fg);
}

.ge-loading[b-eoovjk9m38] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
}

/* ── Toolbar ─────────────────────────────────────────────────────────── */

.ge-toolbar[b-eoovjk9m38] {
    flex: 0 0 auto;
}

.ge-identity[b-eoovjk9m38] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

/* Solid accent square, white glyph - the design language's doc-icon. */
.ge-identity-icon[b-eoovjk9m38] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--dbd-accent);
    color: #ffffff;
    font-size: 0.9rem;
}

.ge-identity-text[b-eoovjk9m38] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 0;
}

.ge-title[b-eoovjk9m38] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--dbd-fg);
}

.ge-subtitle[b-eoovjk9m38] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--dbd-muted);
}

.ge-subtitle-sep[b-eoovjk9m38] {
    color: var(--dbd-border-strong);
}

.ge-action[b-eoovjk9m38] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    white-space: nowrap;
}

.ge-action-sep[b-eoovjk9m38] {
    width: 1px;
    height: 26px;
    background-color: var(--dbd-border);
    align-self: center;
    margin: 0 12px 0 2px;
}

/* ── Filter / pager bar ──────────────────────────────────────────────── */

.ge-filterbar[b-eoovjk9m38] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex: 0 0 auto;
    padding: 0.5rem 0.75rem;
    background: var(--dbd-surface);
    border: 1px solid var(--dbd-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.ge-search[b-eoovjk9m38] {
    flex: 1 1 220px;
    max-width: 360px;
    margin: 0;
}

/* The shared .amx-field shell, so the search reads like every other control. */
.ge-search-field[b-eoovjk9m38] {
    min-height: 36px;
}

.ge-visually-hidden[b-eoovjk9m38] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Pager ───────────────────────────────────────────────────────────── */

.ge-pager[b-eoovjk9m38] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.ge-pager-info[b-eoovjk9m38] {
    font-size: 0.8rem;
    color: var(--dbd-muted);
    white-space: nowrap;
}

.ge-pager-info strong[b-eoovjk9m38] {
    font-weight: 600;
    color: var(--dbd-fg);
}

.ge-pager-btns[b-eoovjk9m38] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ge-page-btn[b-eoovjk9m38] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 0.7rem;
    border: 1px solid var(--dbd-border-strong);
    border-radius: 8px;
    background: var(--dbd-surface);
    color: var(--dbd-fg);
    font-size: 0.8rem;
    font-weight: 550;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.ge-page-btn:hover:not(:disabled)[b-eoovjk9m38] {
    background: var(--dbd-subtle);
}

/* A ring that clears 3:1 against the button and the surface behind it in BOTH themes -
   the darker --dbd-accent does not on a dark card, so the focus ring uses the bright accent. */
.ge-page-btn:focus-visible[b-eoovjk9m38] {
    outline: 2px solid var(--dbd-accent-bright);
    outline-offset: 2px;
    box-shadow: none;
}

.ge-page-btn:disabled[b-eoovjk9m38] {
    opacity: 0.5;
    cursor: default;
}

/* ── Banners ─────────────────────────────────────────────────────────── */
/* A standing condition while the page is open (unsaved validation problems),
   not the outcome of an action - those are toasts and alerts. */

.ge-banner[b-eoovjk9m38] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    flex: 0 0 auto;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--dbd-danger);
    border-radius: var(--radius-md);
    background: rgba(239, 68, 68, 0.10);
    color: var(--dbd-danger-text);
    font-size: 0.85rem;
}

.ge-banner i[b-eoovjk9m38] {
    margin-top: 2px;
    flex: 0 0 auto;
}

/* ── Records ─────────────────────────────────────────────────────────── */

.ge-records[b-eoovjk9m38] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
}

.ge-empty[b-eoovjk9m38] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 3rem 1rem;
    background: var(--dbd-surface);
    border: 1px dashed var(--dbd-border-strong);
    border-radius: var(--radius-lg);
    text-align: center;
}

.ge-empty i[b-eoovjk9m38] {
    font-size: 1.6rem;
    color: var(--dbd-muted);
    margin-bottom: 0.25rem;
}

.ge-empty-title[b-eoovjk9m38] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dbd-fg);
}

.ge-empty-text[b-eoovjk9m38] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--dbd-muted);
}

.ge-footer[b-eoovjk9m38] {
    flex: 0 0 auto;
    padding: 0.5rem 0.75rem;
    background: var(--dbd-surface);
    border: 1px solid var(--dbd-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* On a phone-width window the toolbar actions and the pager stack rather than
   squeeze - the layout is desktop-first but must not break narrow. */
@media (max-width: 700px) {
    .ge-filterbar[b-eoovjk9m38] {
        flex-direction: column;
        align-items: stretch;
    }

    .ge-search[b-eoovjk9m38] {
        max-width: none;
    }

    .ge-pager[b-eoovjk9m38] {
        justify-content: space-between;
    }
}
/* /Pages/GridEditor/GridEditorRow.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   Grid Editor — one record card

   Was a hard-coded white box with a 3px black border and a 30px arrow rail
   down the left, with every field stacked in a single column: a phone form
   repeated N times. Here it is a flat token card with a header (which record,
   what state, what you can do to it) and a responsive field grid, so a wide
   window shows a record across rather than down.

   Colours come from the --dbd-* tokens the page root declares, so the card
   themes with the app rather than needing dark-mode overrides of its own.
   ═══════════════════════════════════════════════════════════════════════ */

.ge-record[b-6k69a9r9zj] {
    display: flex;
    flex-direction: column;
    background: var(--dbd-surface, #ffffff);
    border: 1px solid var(--dbd-border, #e4e8f1);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-sm);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ge-record:hover[b-6k69a9r9zj] {
    border-color: var(--dbd-border-strong, #767d8c);
    box-shadow: var(--shadow-md);
}

/* A record that failed validation, and one queued for deletion, are both states
   the user must be able to spot while scrolling - edge plus a chip, never colour
   on its own (WCAG 1.4.1). */
.ge-record.has-errors[b-6k69a9r9zj],
.ge-record.is-pending-delete[b-6k69a9r9zj] {
    border-color: var(--dbd-danger, #ef4444);
    box-shadow: 0 0 0 1px var(--dbd-danger, #ef4444);
}

/* ── Header ──────────────────────────────────────────────────────────── */

/* Scrolls with its record. It was sticky within the records scroller, which meant that on a
   long list every card's header queued up over the fields the user was actually editing. */
.ge-record-head[b-6k69a9r9zj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--dbd-border, #e4e8f1);
    background: var(--dbd-subtle, #f4f4f5);
    border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
}

.ge-record-ident[b-6k69a9r9zj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.ge-record-number[b-6k69a9r9zj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 26px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--dbd-surface, #ffffff);
    border: 1px solid var(--dbd-border, #e4e8f1);
    color: var(--dbd-muted, #616776);
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ge-record-title[b-6k69a9r9zj] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--dbd-fg, #131826);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ge-record-chip[b-6k69a9r9zj] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    /* 8%, not the 12-14% the app's pills use: this chip sits on the tinted card header, and
       the heavier wash dropped the danger text to 4.47:1 — just under AA. */
    background: rgba(239, 68, 68, 0.08);
    color: var(--dbd-danger-text, #c4201f);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.ge-record-actions[b-6k69a9r9zj] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.ge-record-btn[b-6k69a9r9zj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    min-width: 30px;
    padding: 0 0.6rem;
    border: 1px solid var(--dbd-border-strong, #767d8c);
    border-radius: 8px;
    background: var(--dbd-surface, #ffffff);
    color: var(--dbd-fg, #131826);
    font-size: 0.78rem;
    font-weight: 550;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.ge-record-btn:hover[b-6k69a9r9zj] {
    background: var(--dbd-subtle, #f4f4f5);
}

/* Bright accent, so the ring clears 3:1 on both the light and the dark card. */
.ge-record-btn:focus-visible[b-6k69a9r9zj] {
    outline: 2px solid var(--dbd-accent-bright, #16a34a);
    outline-offset: 2px;
    box-shadow: none;
}

/* Destructive stays quiet until it is reached for. */
.ge-record-btn.is-danger:hover[b-6k69a9r9zj] {
    border-color: var(--dbd-danger, #ef4444);
    background: rgba(239, 68, 68, 0.12);
    color: var(--dbd-danger-text, #c4201f);
}

/* ── Errors ──────────────────────────────────────────────────────────── */

.ge-record-errors[b-6k69a9r9zj] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
    padding: 0.5rem 0.85rem;
    list-style: none;
    border-bottom: 1px solid var(--dbd-border, #e4e8f1);
    background: rgba(239, 68, 68, 0.08);
    color: var(--dbd-danger-text, #c4201f);
    font-size: 0.8rem;
}

.ge-record-errors li[b-6k69a9r9zj]::before {
    content: "•";
    margin-right: 0.4rem;
}

/* ── Body ────────────────────────────────────────────────────────────── */

.ge-record-body[b-6k69a9r9zj] {
    padding: 0.85rem;
}

.ge-record-loading[b-6k69a9r9zj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem 0;
    text-align: center;
}

.ge-record-note[b-6k69a9r9zj] {
    margin: 0;
    padding: 0.5rem 0;
    color: var(--dbd-muted, #616776);
    font-size: 0.85rem;
    text-align: center;
}

.ge-record-note.is-danger[b-6k69a9r9zj] {
    color: var(--dbd-danger-text, #c4201f);
}

/* ── The field grid ──────────────────────────────────────────────────── */
/* As many columns as the window can hold, each wide enough for a label and a
   control. This is the whole difference between the phone port and a web screen.
   Rows stretch so every control in a row can share one baseline (see below). */
.ge-fields[b-6k69a9r9zj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem 1rem;
    align-items: stretch;
}

.ge-field[b-6k69a9r9zj] {
    min-width: 0;
}

/* Editors, pictures, maps and nested grids get the full card width. */
.ge-field.is-wide[b-6k69a9r9zj] {
    grid-column: 1 / -1;
}

/* The control's own root fills the cell, so the stacking below has a height to work with. */
.ge-field[b-6k69a9r9zj] >  * {
    height: 100%;
}

/* ── Label above control, not beside it ──────────────────────────────── */
/* Every shared control ships its own <style> making the label/control wrapper a
   flex ROW - right for a full-width form row, wrong here: in a 260px column the
   label's 200px minimum left the control a sliver, and once the label was allowed
   to shrink instead the titles broke mid-word ("Refere nce", "Materia l").
   Stacking them gives each control the full column and each title a full line.
   The same override the DataView applies in its narrow left panel. */
.ge-field[b-6k69a9r9zj]  :is(div, span):has(> .data-view-label) {
    display: flex !important;
    flex-direction: column !important;
    /* nowrap is the half that matters. The row is a flex container that wraps (so a wide field
       can drop its control under its label), and in a column a wrap breaks the CONTENT INTO A
       SECOND COLUMN as soon as label + control are taller than the cell - which the grid's
       stretched row height makes routine. The control then sat beside its label and spilled
       over the neighbouring field. */
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0.25rem !important;
    height: 100%;
}

/* In a column the flex-basis the shared rules set for a row (200px label, 220px control) is read
   as a HEIGHT. Size both on their content and let the control take what is left. */
.ge-field[b-6k69a9r9zj]  :is(div, span):has(> .data-view-label) > .data-view-label {
    flex: 0 0 auto !important;
}

.ge-field[b-6k69a9r9zj]  :is(div, span):has(> .data-view-label) > :not(.data-view-label) {
    flex: 0 0 auto !important;
    min-width: 0;
}

/* Only a control that is meant to be tall fills the cell: a multi-row text box, a stretched
   field, and the wide controls (photo, diagram, map, rich text). A one-line field stays one
   line high - stretching them all to the tallest neighbour is what made a date box as tall as
   the description beside it. */
.ge-field[b-6k69a9r9zj]  :is(div, span):has(> .data-view-label) > :is(.amx-field.is-multiline, .amx-field.is-stretched),
.ge-field.is-wide[b-6k69a9r9zj]  :is(div, span):has(> .data-view-label) > :not(.data-view-label),
.ge-field.is-wide[b-6k69a9r9zj]  .amx-field-row > :not(.data-view-label) {
    flex: 1 1 auto !important;
}

/* A checkbox (.field-inline) is its own size, not the width of the cell. */
.ge-field[b-6k69a9r9zj]  .amx-field-row.field-inline > :not(.data-view-label) {
    flex: 0 0 auto !important;
}

/* The label takes the column, wraps as many lines as the title needs and is never
   clipped - the 200px minimum it carries for a full-width form row is what broke
   titles mid-word here. */
.ge-field[b-6k69a9r9zj]  .data-view-label {
    min-width: 0;
    width: auto;
    max-width: 100%;
    align-items: flex-start;
    overflow-wrap: anywhere;
    color: var(--text-secondary, #5b6577);
}

/* Undo the shared fit-to-control clamp: stacked here, the title gets as many lines as it needs. */
.ge-field[b-6k69a9r9zj]  .amx-field-row > .data-view-label > span:first-child {
    display: inline;
    -webkit-line-clamp: unset;
    line-clamp: none;
    overflow: visible;
}

/* A bare 16px checkbox under a label reads as a much shorter field than the 44px
   inputs beside it; the margin centres it in the same band instead. */
.ge-field[b-6k69a9r9zj]  .form-check-input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0 0 12px;
    flex: 0 0 auto;
    align-self: flex-start;
}

/* A record queued for deletion: its fields are dimmed so it reads as on its way
   out, while the header stays at full strength so Undo is easy to find. */
.ge-record.is-pending-delete .ge-record-body[b-6k69a9r9zj] {
    opacity: 0.55;
}
/* /Pages/Lifecycle/InvestmentPlanner.razor.rz.scp.css */
/* Investment Planner (EA Life Cycle). Flat, token-driven (DESIGN_LANGUAGE.md); the condition bands are data
   colours, like a map's line colours, and are the only literal colours here. */

.lcp-planner[b-eboay4628v] {
    /* The old Plan Overview's condition colours (report item "Chart Colour": #9bd330 | #e2a33b | #f10a0a). */
    --lcp-c1: #9bd330;
    --lcp-c3: #e2a33b;
    --lcp-c5: #f10a0a;
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
    min-height: 100%;
    padding: 0 var(--space-6, 1.5rem) var(--space-8, 2rem);
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* Top bar */
.lcp-top[b-eboay4628v] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--space-3, .75rem);
    min-height: 56px;
    margin: 0 calc(-1 * var(--space-6, 1.5rem));
    padding: 0 var(--space-6, 1.5rem);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
}

.lcp-doc-icon[b-eboay4628v] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md, 8px);
    background: var(--accent-primary);
    color: var(--text-on-accent, #fff);
}

.lcp-title h1[b-eboay4628v] {
    margin: 0;
    font-size: var(--text-lg, 1rem);
    font-weight: 600;
}

.lcp-title p[b-eboay4628v] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm, .8125rem);
}

.lcp-dot[b-eboay4628v] { color: var(--text-muted); }

.lcp-top-actions[b-eboay4628v] { margin-left: auto; display: flex; gap: var(--space-2, .5rem); }

.lcp-ghost-btn[b-eboay4628v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: 32px;
    height: 32px;
    padding: 0 .5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 8px);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-sm, .8125rem);
    font-weight: 550;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast, 100ms ease);
}

.lcp-ghost-btn:hover[b-eboay4628v] { background: var(--bg-hover); color: var(--text-primary); }
.lcp-text-btn[b-eboay4628v] { border-color: var(--border-color); }

.lcp-ghost-btn:focus-visible[b-eboay4628v],
.lcp-scenario:focus-visible[b-eboay4628v],
.lcp-grid-wrap:focus-visible[b-eboay4628v],
.lcp-search input:focus-visible[b-eboay4628v] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.lcp-state[b-eboay4628v] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: var(--space-6, 1.5rem);
    color: var(--text-secondary);
}

/* Scenario strip */
.lcp-scenario-strip[b-eboay4628v] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 1fr);
    gap: var(--space-3, .75rem);
    overflow-x: auto;
    padding: 2px 2px var(--space-2, .5rem);
}

.lcp-scenario[b-eboay4628v] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    padding: var(--space-3, .75rem) var(--space-4, 1rem);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-card);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast, 100ms ease), background var(--transition-fast, 100ms ease);
}

.lcp-scenario:hover[b-eboay4628v] { border-color: var(--text-muted); }

.lcp-scenario.is-selected[b-eboay4628v] {
    border-color: var(--accent-primary);
    box-shadow: inset 0 0 0 1px var(--accent-primary);
    background: var(--accent-wash, var(--bg-card));
}

.lcp-scenario-tags[b-eboay4628v] { display: flex; flex-wrap: wrap; gap: .25rem; min-height: 1.2rem; }

.lcp-tag[b-eboay4628v] {
    padding: 0 .45rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: var(--text-xs, .6875rem);
    font-weight: 600;
    line-height: 1.15rem;
}

.lcp-tag.is-baseline[b-eboay4628v] { border-color: currentColor; color: var(--accent-link, var(--text-primary)); }
.lcp-tag.is-effective[b-eboay4628v] { border-color: currentColor; color: var(--accent-success-text, var(--accent-primary)); }
.lcp-tag.is-warn[b-eboay4628v] { border-color: currentColor; color: var(--accent-warning-text, var(--accent-warning)); }
.lcp-tag.is-best[b-eboay4628v] { border-color: currentColor; color: var(--accent-success-text, var(--accent-primary)); }

.lcp-scenario-strategy[b-eboay4628v] {
    padding: 0 .4rem;
    border-left: 3px solid var(--lcp-strategy, var(--border-color));
    color: var(--text-secondary);
    font-size: var(--text-xs, .6875rem);
}

.lcp-scenario-sub .is-bad[b-eboay4628v] { color: var(--accent-danger-text, var(--accent-danger)); font-weight: 600; }

.lcp-scenario-name[b-eboay4628v] { font-size: var(--text-sm, .8125rem); font-weight: 600; line-height: 1.3; }
.lcp-scenario-total[b-eboay4628v] { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lcp-scenario-sub[b-eboay4628v] { display: flex; flex-wrap: wrap; gap: .4rem; color: var(--text-secondary); font-size: var(--text-xs, .6875rem); }

.lcp-delta[b-eboay4628v] { font-weight: 600; }
.lcp-delta.is-up[b-eboay4628v] { color: var(--accent-danger-text, var(--accent-danger)); }
.lcp-delta.is-down[b-eboay4628v] { color: var(--accent-success-text, var(--accent-primary)); }

/* KPI tiles */
.lcp-kpis[b-eboay4628v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-3, .75rem);
}

.lcp-kpi[b-eboay4628v] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: var(--space-3, .75rem) var(--space-4, 1rem);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-card);
}

.lcp-kpi-label[b-eboay4628v] {
    color: var(--text-secondary);
    font-size: var(--text-xs, .6875rem);
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.lcp-kpi-value[b-eboay4628v] { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lcp-kpi-sub[b-eboay4628v] { color: var(--text-muted); font-size: var(--text-xs, .6875rem); }

/* Cards and charts */
.lcp-charts[b-eboay4628v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: var(--space-3, .75rem);
}

.lcp-card[b-eboay4628v] {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-card);
    overflow: hidden;
}

.lcp-card-head[b-eboay4628v] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
    padding: var(--space-3, .75rem) var(--space-4, 1rem);
    border-bottom: 1px solid var(--border-color);
}

.lcp-card-head h2[b-eboay4628v] { margin: 0; font-size: var(--text-base, .875rem); font-weight: 600; }
.lcp-card-hint[b-eboay4628v] { color: var(--text-muted); font-size: var(--text-xs, .6875rem); }

.lcp-chart[b-eboay4628v] { position: relative; height: 260px; padding: var(--space-3, .75rem); }

/* Plan overview */
.lcp-overview-head[b-eboay4628v] { align-items: center; }
.lcp-overview-tools[b-eboay4628v] { margin-left: auto; }

.lcp-search[b-eboay4628v] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 32px;
    padding: 0 .6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-input, var(--bg-card));
    color: var(--text-muted);
}

.lcp-search input[b-eboay4628v] {
    width: 14rem;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: var(--text-sm, .8125rem);
}

.lcp-legend[b-eboay4628v] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    padding: var(--space-2, .5rem) var(--space-4, 1rem);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: var(--text-xs, .6875rem);
}

.lcp-legend-item[b-eboay4628v] { display: inline-flex; align-items: center; gap: .35rem; }
.lcp-swatch[b-eboay4628v] { width: .7rem; height: .7rem; border-radius: 2px; }

.lcp-grid-wrap[b-eboay4628v] { max-height: 70vh; overflow: auto; }

.lcp-grid[b-eboay4628v] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm, .8125rem);
}

.lcp-grid thead th[b-eboay4628v] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: .5rem .4rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: var(--text-xs, .6875rem);
    font-weight: 600;
    white-space: nowrap;
}

.lcp-asset-col[b-eboay4628v] {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 15rem;
    max-width: 18rem;
    padding: .4rem .75rem;
    border-right: 1px solid var(--border-color);
    background: var(--bg-card);
    text-align: left;
    font-weight: 400;
}

.lcp-grid thead .lcp-asset-col[b-eboay4628v] { z-index: 3; }

.lcp-asset-ref[b-eboay4628v] { display: block; color: var(--text-muted); font-family: var(--font-mono, monospace); font-size: var(--text-xs, .6875rem); }
.lcp-asset-name[b-eboay4628v] { display: block; overflow: hidden; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.lcp-asset-meta[b-eboay4628v] { display: flex; align-items: center; gap: .35rem; color: var(--text-muted); font-size: var(--text-xs, .6875rem); }
.lcp-missing[b-eboay4628v] { color: var(--accent-warning-text, var(--accent-warning)); }

.lcp-grid tbody tr:hover td[b-eboay4628v],
.lcp-grid tbody tr:hover .lcp-asset-col[b-eboay4628v] { background: var(--bg-hover); }

.lcp-cell[b-eboay4628v] {
    position: relative;
    min-width: 4.5rem;
    height: 3.25rem;
    padding: .25rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: bottom;
}

.lcp-cell.is-empty[b-eboay4628v] { background: var(--bg-secondary, var(--bg-hover)); }

.lcp-bar[b-eboay4628v] {
    position: absolute;
    left: .3rem;
    bottom: .25rem;
    width: .45rem;
    border-radius: 2px;
}

.lcp-cell-icons[b-eboay4628v] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding-left: 1rem;
}

.is-c1[b-eboay4628v] { background: var(--lcp-c1); }
.is-c3[b-eboay4628v] { background: var(--lcp-c3); }
.is-c5[b-eboay4628v] { background: var(--lcp-c5); }
.is-none[b-eboay4628v] { background: transparent; }

[b-eboay4628v] .lcp-type-icon { width: 18px; height: 18px; }
[b-eboay4628v] .lcp-flag-icon { width: 14px; height: 14px; opacity: .9; }

[b-eboay4628v] .lcp-type-chip {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: var(--accent-primary);
    color: var(--text-on-accent, #fff);
    font-size: .625rem;
    font-weight: 700;
}

/* Decades / Years switch */
.lcp-overview-tools[b-eboay4628v] { display: flex; align-items: center; gap: var(--space-2, .5rem); }

.lcp-segmented[b-eboay4628v] {
    display: inline-flex;
    padding: 2px;
    border-radius: 999px;
    background: var(--bg-hover);
}

.lcp-segmented button[b-eboay4628v] {
    height: 28px;
    padding: 0 .8rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-sm, .8125rem);
    font-weight: 550;
    cursor: pointer;
}

.lcp-segmented button[aria-pressed="true"][b-eboay4628v] {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .03));
}

.lcp-segmented button:focus-visible[b-eboay4628v] { outline: 2px solid var(--accent-primary); outline-offset: 1px; }

/* Year view: one narrow cell per year, filled with the condition's band */
.lcp-grid.is-years[b-eboay4628v] { width: auto; }

.lcp-year-col[b-eboay4628v] {
    min-width: 1.35rem;
    padding: .5rem 0 !important;
    font-variant-numeric: tabular-nums;
}

.lcp-year-col span[aria-hidden="true"][b-eboay4628v] {
    display: inline-block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.lcp-year-col.is-decade[b-eboay4628v],
.lcp-ycell.is-decade[b-eboay4628v] { border-left: 1px solid var(--border-color); }

.lcp-ycell[b-eboay4628v] {
    width: 1.35rem;
    min-width: 1.35rem;
    height: 2.75rem;
    padding: 0;
    border-bottom: 1px solid var(--bg-card);
    border-right: 1px solid var(--bg-card);
    text-align: center;
    vertical-align: middle;
}

.lcp-ycell.is-empty[b-eboay4628v] { background: var(--bg-hover); }
.lcp-ycell.is-design-end[b-eboay4628v] { box-shadow: inset 0 -3px 0 var(--text-primary); }
.lcp-ycell.is-eng-end[b-eboay4628v] { box-shadow: inset 0 3px 0 var(--text-primary); }

[b-eboay4628v] .lcp-ycell .lcp-type-icon,
[b-eboay4628v] .lcp-ycell .lcp-type-chip { width: 16px; height: 16px; }

/* The asset name opens its panel */
.lcp-asset-open[b-eboay4628v] {
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-link, var(--text-primary));
    text-align: left;
    cursor: pointer;
}

.lcp-asset-open:hover[b-eboay4628v] { text-decoration: underline; }
.lcp-asset-open:focus-visible[b-eboay4628v] { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

@media (max-width: 720px) {
    .lcp-planner[b-eboay4628v] { padding: 0 var(--space-3, .75rem) var(--space-6, 1.5rem); }
    .lcp-top[b-eboay4628v] { margin: 0 calc(-1 * var(--space-3, .75rem)); padding: 0 var(--space-3, .75rem); }
    .lcp-search input[b-eboay4628v] { width: 9rem; }
}
/* /Pages/Lifecycle/LcpAssetPanel.razor.rz.scp.css */
/* The Investment Planner's asset panel: a side sheet over the page (DESIGN_LANGUAGE.md: flat, token-driven). */

.lcp-panel-backdrop[b-jz9oixw8bq] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, .25);
}

.lcp-panel[b-jz9oixw8bq] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1041;
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
    width: min(760px, 100vw);
    padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
    overflow-y: auto;
    border-left: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.lcp-panel-head[b-jz9oixw8bq] { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3, .75rem); }
.lcp-panel-head h2[b-jz9oixw8bq] { margin: .1rem 0; font-size: var(--text-xl, 1.125rem); font-weight: 600; }
.lcp-panel-head p[b-jz9oixw8bq] { margin: 0; color: var(--text-secondary); font-size: var(--text-sm, .8125rem); }
.lcp-asset-ref[b-jz9oixw8bq] { color: var(--text-muted); font-family: var(--font-mono, monospace); font-size: var(--text-xs, .6875rem); }

.lcp-panel-section[b-jz9oixw8bq] { display: flex; flex-direction: column; gap: var(--space-2, .5rem); }
.lcp-panel-section h3[b-jz9oixw8bq] { margin: 0; font-size: var(--text-base, .875rem); font-weight: 600; }
.lcp-panel-hint[b-jz9oixw8bq] { margin: 0; color: var(--text-muted); font-size: var(--text-xs, .6875rem); }

.lcp-panel-warn[b-jz9oixw8bq] {
    margin: 0;
    padding: .5rem .75rem;
    border: 1px solid currentColor;
    border-radius: var(--radius-md, 8px);
    color: var(--accent-warning-text, var(--accent-warning));
    font-size: var(--text-sm, .8125rem);
}

.lcp-panel-done[b-jz9oixw8bq] { margin: 0; color: var(--accent-success-text, var(--accent-primary)); font-size: var(--text-sm, .8125rem); }

/* Timeline: a slot per year to drop on, a chip per intervention */
.lcp-timeline[b-jz9oixw8bq] {
    position: relative;
    padding: 1.5rem 0 .5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-primary);
}

.lcp-timeline-axis[b-jz9oixw8bq] {
    position: absolute;
    top: .25rem;
    left: 0;
    right: 0;
    height: 1rem;
    color: var(--text-muted);
    font-size: var(--text-xs, .6875rem);
}

.lcp-timeline-axis span[b-jz9oixw8bq] { position: absolute; transform: translateX(-50%); }

.lcp-timeline-track[b-jz9oixw8bq] { position: relative; height: 3.25rem; margin: 0 .5rem; }

.lcp-timeline-slot[b-jz9oixw8bq] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(100% / var(--years));
    transform: translateX(-50%);
    border-radius: 3px;
}

.lcp-timeline-slot.is-target[b-jz9oixw8bq] { background: var(--accent-wash, var(--bg-hover)); box-shadow: inset 0 0 0 1px var(--accent-primary); }

.lcp-chip[b-jz9oixw8bq] {
    position: absolute;
    top: .35rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: .2rem .25rem;
    transform: translateX(-50%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: grab;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .03));
}

.lcp-chip:hover[b-jz9oixw8bq] { border-color: var(--text-muted); }
.lcp-chip.is-chosen[b-jz9oixw8bq] { border-color: var(--accent-primary); box-shadow: inset 0 0 0 1px var(--accent-primary); }
.lcp-chip.is-locked[b-jz9oixw8bq] { border-style: dashed; }
.lcp-chip:focus-visible[b-jz9oixw8bq] { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.lcp-chip-year[b-jz9oixw8bq] { font-size: .625rem; font-variant-numeric: tabular-nums; color: var(--text-secondary); }

[b-jz9oixw8bq] .lcp-chip .lcp-type-icon,
[b-jz9oixw8bq] .lcp-chip .lcp-type-chip { width: 18px; height: 18px; }

/* Move controls */
.lcp-move-bar[b-jz9oixw8bq] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, .5rem); }
.lcp-move-what[b-jz9oixw8bq] { margin-right: auto; font-size: var(--text-sm, .8125rem); }
.lcp-move-year[b-jz9oixw8bq] { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--text-sm, .8125rem); }
.lcp-move-year input[b-jz9oixw8bq] { width: 5.5rem; height: 32px; padding: 0 .5rem; border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px); background: var(--bg-input, var(--bg-card)); color: var(--text-primary); }

.lcp-btn[b-jz9oixw8bq] {
    height: 32px;
    padding: 0 .75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: var(--text-sm, .8125rem);
    font-weight: 550;
    cursor: pointer;
}

.lcp-btn:hover:not(:disabled)[b-jz9oixw8bq] { background: var(--bg-hover); }
.lcp-btn:disabled[b-jz9oixw8bq] { opacity: .55; cursor: not-allowed; }
.lcp-btn.is-primary[b-jz9oixw8bq] { border-color: var(--accent-primary); background: var(--accent-primary); color: var(--text-on-accent, #fff); }
.lcp-btn.is-primary:hover:not(:disabled)[b-jz9oixw8bq] { background: var(--accent-primary); filter: brightness(.95); }
.lcp-btn:focus-visible[b-jz9oixw8bq] { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* What if */
.lcp-whatif[b-jz9oixw8bq] { padding: var(--space-4, 1rem); border: 1px solid var(--border-color); border-radius: var(--radius-lg, 12px); }

.lcp-compare[b-jz9oixw8bq] { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3, .75rem); }
.lcp-compare-item[b-jz9oixw8bq] { display: flex; flex-direction: column; gap: .1rem; }
.lcp-compare-values[b-jz9oixw8bq] { font-variant-numeric: tabular-nums; font-size: var(--text-sm, .8125rem); }
.lcp-kpi-label[b-jz9oixw8bq] { color: var(--text-secondary); font-size: var(--text-xs, .6875rem); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.lcp-delta[b-jz9oixw8bq] { font-size: var(--text-xs, .6875rem); font-weight: 600; }
.lcp-delta.is-up[b-jz9oixw8bq], .is-worse[b-jz9oixw8bq] { color: var(--accent-danger-text, var(--accent-danger)); }
.lcp-delta.is-down[b-jz9oixw8bq], .is-better[b-jz9oixw8bq] { color: var(--accent-success-text, var(--accent-primary)); }

.lcp-curve[b-jz9oixw8bq] { width: 100%; height: 140px; }
.lcp-curve-grid[b-jz9oixw8bq] { stroke: var(--border-color); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lcp-curve-before[b-jz9oixw8bq] { fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.lcp-curve-after[b-jz9oixw8bq] { fill: none; stroke: var(--accent-primary); stroke-width: 2.5; vector-effect: non-scaling-stroke; }

.lcp-curve-key[b-jz9oixw8bq] { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; font-size: var(--text-xs, .6875rem); }
.lcp-key-before[b-jz9oixw8bq], .lcp-key-after[b-jz9oixw8bq] { display: inline-block; width: 1.25rem; height: 0; border-top: 2px dashed var(--text-muted); }
.lcp-key-after[b-jz9oixw8bq] { border-top: 2.5px solid var(--accent-primary); margin-left: .5rem; }

.lcp-panel-actions[b-jz9oixw8bq] { display: flex; gap: var(--space-2, .5rem); }

.lcp-ghost-btn[b-jz9oixw8bq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-md, 8px);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.lcp-ghost-btn:hover[b-jz9oixw8bq] { background: var(--bg-hover); color: var(--text-primary); }
.lcp-ghost-btn:focus-visible[b-jz9oixw8bq] { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
/* /Pages/ModelLibrary/ModelLibraryView.razor.rz.scp.css */
/* The node's page: the library fills the app's content area (.amx-content-scroll, a fixed-height
   flex item); ModelLibraryWorkspace lays out the rest. */
.mlib-host[b-p4pp1vmra3] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

@media (max-width: 900px) {
    .mlib-host[b-p4pp1vmra3] {
        height: auto;
    }
}
/* /Pages/Reports/ReportBaseComponent.razor.rz.scp.css */
/* Centred the way ReportView's own loading spinner is, which this one replaces on screen. */
.report-base-loading[b-1khkpse34o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.report-restore-filters[b-1khkpse34o] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 8px 0;
    padding: 6px 8px 6px 14px;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
}

.report-restore-filters > i[b-1khkpse34o] {
    font-size: 1rem;
    color: var(--text-secondary);
}

.report-restore-filters-text[b-1khkpse34o] {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 2px 8px;
    min-width: 0;
    font-size: var(--text-sm, 0.8125rem);
}

.report-restore-filters-text strong[b-1khkpse34o] {
    color: var(--text-primary);
    font-weight: 600;
}

.report-restore-filters-apply[b-1khkpse34o] {
    flex: none;
    white-space: nowrap;
}

.report-restore-filters-dismiss[b-1khkpse34o] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
}

.report-restore-filters-dismiss:hover[b-1khkpse34o] {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.report-restore-filters-dismiss:focus-visible[b-1khkpse34o],
.report-restore-filters-apply:focus-visible[b-1khkpse34o] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
/* /Pages/Reports/ReportConfiguration/ReportConfiguration.razor.rz.scp.css */
/* ==========================================================================
   Report Designer
   --------------------------------------------------------------------------
   Same shell and design language as the Form Designer (/FormDesigner): a
   full-screen, flat, shadcn-style surface with a single green accent.

   Tokens are declared on .designer-page (NOT :root) so they never leak into
   the rest of the app, and the shared app tokens are re-pointed at them within
   this page's scope only, so every component rendered inside adopts the
   language without per-rule overrides.
   ========================================================================== */

.designer-page[b-rjxoh07akb] {
    /* dbd primitives — single source of truth, mirrors .dbd-shell */
    --dbd-bg: #fafafa;
    --dbd-surface: #ffffff;
    --dbd-fg: #18181b;
    /* #71717a only reaches 4.40:1 on the --dbd-subtle shelves; this clears 4.5:1 on both. */
    --dbd-muted: #6b6b73;
    --dbd-border: #e4e4e7;
    --dbd-border-strong: #d4d4d8;
    --dbd-subtle: #f4f4f5;
    --dbd-accent: #15803d;
    --dbd-accent-bright: #16a34a;
    --dbd-accent-strong: #166534;
    --dbd-accent-soft: #f0fdf4;

    /* Shared app-token overrides (scoped to this page) */
    --bg-secondary: var(--dbd-bg);
    --bg-card: var(--dbd-surface);
    --bg-hover: var(--dbd-subtle);
    --text-primary: var(--dbd-fg);
    --text-secondary: #52525b;
    --text-muted: var(--dbd-muted);
    --border-color: var(--dbd-border);
    --accent-primary: var(--dbd-accent);
    --accent-primary-rgb: 21, 128, 61;
    --accent-success: var(--dbd-accent-bright);
    --accent-warning: #b45309;
    --accent-danger: #dc2626;
    --text-on-accent: #ffffff;

    /* Local surface aliases */
    --bg-primary: var(--dbd-surface);
    --bg-tertiary: var(--dbd-subtle);

    /* Text aliases */
    --text-tertiary: var(--dbd-muted);

    /* Borders */
    --border-default: var(--dbd-border);
    --border-strong: var(--dbd-border-strong);
    --border-focus: var(--dbd-accent);

    /* Accents — the blue family is remapped onto green so "primary" reads green */
    --accent-blue: var(--dbd-accent);
    --accent-green: var(--dbd-accent-bright);
    --accent-amber: #b45309;
    --accent-red: #dc2626;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    /* Typography */
    --text-xs: 0.6875rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-lg: 1rem;

    /* Transitions */
    --transition-fast: 100ms ease;

    /* Radius — dbd scale (inputs/buttons 8, cards 12) */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Shadows — shadcn-flat */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .03);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, .06);
}

/* ── Dark mode ─────────────────────────────────────────────────────────────
   The page is fully token-driven, so re-pointing the primitives reskins it.
   Scoped to .designer-page so nothing leaks. */
[data-theme="dark"] .designer-page[b-rjxoh07akb] {
    --dbd-bg: #0f1524;
    --dbd-surface: #111726;
    --dbd-fg: #e6e9f2;
    --dbd-muted: #98a2b8;
    --dbd-border: #202840;
    --dbd-border-strong: #2c3552;
    --dbd-subtle: #1a2136;
    --dbd-accent: #22c55e;
    --dbd-accent-bright: #4ade80;
    --dbd-accent-strong: #16a34a;
    --dbd-accent-soft: rgba(34, 197, 94, 0.12);

    --text-secondary: #98a2b8;
    --accent-primary-rgb: 34, 197, 94;
    --accent-warning: #fbbf24;
    --accent-danger: #f87171;

    /* The accent brightens here, so white-on-accent drops to 2.28:1. Ink instead
       of paper on solid accent fills: #0f1524 gives 7.99:1 (SC 1.4.3). */
    --text-on-accent: #0f1524;

    --accent-amber: #fbbf24;
    --accent-red: #f87171;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, .5);
}

.designer-page *[b-rjxoh07akb] {
    box-sizing: border-box;
}

/* ==========================================================================
   BASE LAYOUT — the app shell's content area, header over a flexible content area
   --------------------------------------------------------------------------
   Under the app's top bar rather than fixed over the whole window: the layout
   gives this route the bar and nothing else (AuthMainLayout.IsTopBarOnlyPage),
   and .amx-content is positioned, so inset: 0 here is exactly the space
   beneath the bar. Above the content it replaces, below the layout's own
   overlays and the bar's menus.
   ========================================================================== */

.designer-page[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    z-index: 10;
    height: 100%;
    min-height: 0;
    background: var(--dbd-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.designer-loading[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    background: var(--bg-primary);
}

/* The header's Cancel: the app's amber "leave this page" colour (Exit Settings, the Back
   buttons), stated as the literal because this page re-points --accent-warning to a darker
   shade for its own notices, and dbd-warning is a slightly different yellow. Dark text, since
   white fails contrast on it. */
.designer-page .btn.dbd-btn.designer-cancel[b-rjxoh07akb] {
    color: #000;
    background-color: #f59e0b;
    border-color: #f59e0b;
}

.designer-page .btn.dbd-btn.designer-cancel:hover:not(:disabled)[b-rjxoh07akb] {
    color: #000;
    background-color: #f59e0b;
    border-color: #f59e0b;
    filter: brightness(1.06);
}

/* ==========================================================================
   HEADER — flat 56px bar with a single bottom border
   ========================================================================== */

.designer-header[b-rjxoh07akb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    height: 56px;
    padding: 0 16px;
    background: var(--dbd-surface);
    border-bottom: 1px solid var(--dbd-border);
    flex-shrink: 0;
}

.designer-header-title[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.designer-header-title h1[b-rjxoh07akb] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--dbd-fg);
    white-space: nowrap;
}

/* "Doc" icon badge, mirroring the Form Designer's .dbd-doc-icon */
.designer-header-title h1 i[b-rjxoh07akb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    font-size: 0.85rem;
}

.designer-header-area[b-rjxoh07akb] {
    padding-left: 10px;
    border-left: 1px solid var(--border-default);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--accent-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 28ch;
}

.designer-entity-badge[b-rjxoh07akb] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.02em;
    border: 1px solid var(--border-color);
    white-space: nowrap;
}

/* Save status. Each state is carried by its wording, not by colour alone. */
.designer-save-status[b-rjxoh07akb] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.designer-save-status i[b-rjxoh07akb] {
    font-size: 0.55rem;
}

/* Saving shows the app's circle spinner, kept to the size of the status icons around it. */
.designer-save-status .amx-spinner[b-rjxoh07akb] {
    --amx-spinner-size: 0.7rem;
    --amx-spinner-stroke: 1.5px;
}

/* The unsaved dot is the smallest of the icons - it reads as a marker, not a glyph. */
.designer-save-status.is-unsaved i[b-rjxoh07akb] {
    font-size: 0.4rem;
}

.designer-save-status.is-unsaved[b-rjxoh07akb] {
    color: var(--accent-warning);
}

.designer-save-status.is-saving[b-rjxoh07akb],
.designer-save-status.is-new[b-rjxoh07akb] {
    color: var(--text-secondary);
}

/* Settled state sits back: no border, muted, so it does not compete with the actions beside it. */
.designer-save-status.is-saved[b-rjxoh07akb] {
    border-color: transparent;
    color: var(--text-secondary);
}

.designer-header-actions[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    flex-shrink: 1;
}

.designer-action-group[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Header buttons are flex rows so the icon and its label are spaced by the gap rather than
   butting up against each other. */
.designer-header-actions .btn[b-rjxoh07akb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    padding: 0 0.65rem;
    font-size: 0.8rem;
    line-height: 1;
    border-radius: 7px;
    white-space: nowrap;
}

.designer-header-actions .btn i[b-rjxoh07akb] {
    font-size: 0.8rem;
}

/* Segmented strip of icon-only actions. */
.designer-tool-group[b-rjxoh07akb] {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    overflow: hidden;
    background: var(--bg-card);
}

.designer-header-actions .designer-tool-group .btn[b-rjxoh07akb] {
    height: 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.designer-header-actions .designer-tool-group .btn:hover:not(:disabled)[b-rjxoh07akb] {
    background: var(--bg-hover);
}

.designer-header-actions .designer-tool-group .btn + .btn[b-rjxoh07akb] {
    border-left: 1px solid var(--border-color);
}

/* Icon-only actions stay square rather than stretching to label proportions. */
.designer-header-actions .designer-btn-icon[b-rjxoh07akb] {
    width: 30px;
    padding: 0;
    gap: 0;
}

.designer-btn-icon.designer-btn-danger:hover[b-rjxoh07akb] {
    color: var(--accent-danger);
}

.designer-action-divider[b-rjxoh07akb] {
    width: 1px;
    height: 18px;
    background: var(--border-color);
    flex-shrink: 0;
}

/* ==========================================================================
   CONTENT — sidebar + canvas workspace
   ========================================================================== */

.designer-content[b-rjxoh07akb] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Holds the top-level tab bar over whichever section is showing. */
.designer-main[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

/* The top-level bar spans the window under the header, so it reads as the page's sections rather
   than as tabs belonging to the canvas column. */
.designer-main-tabbar[b-rjxoh07akb] {
    flex-shrink: 0;
    padding: 0 var(--space-3);
    background: var(--dbd-surface);
}

.designer-anomalies-pane[b-rjxoh07akb] { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: var(--space-3); }
@media (max-width: 850px) {
    .designer-anomalies-pane[b-rjxoh07akb] { overflow-y: visible; }
}

/* Report-level settings are a form, so they get a readable measure instead of the full width. */
.designer-details-pane[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 880px;
    overflow-y: auto;
    padding: var(--space-3);
}

.designer-details-pane > section[b-rjxoh07akb] {
    flex: 0 0 auto;
}

.designer-workspace[b-rjxoh07akb] {
    display: flex;
    flex: 1;
    min-height: 0;
    width: 100%;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    overflow: hidden;
}

.designer-sidebar[b-rjxoh07akb] {
    flex: 0 0 520px;
    width: 520px;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* The sidebar's single section owns the full column height so its tree — not the
   column — is what scrolls. */
.designer-sidebar > section[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
}

.designer-sidebar-body[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-height: 0;
}

.designer-tabs[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.designer-tabbar[b-rjxoh07akb] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--space-1);
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-default);
}

.designer-tab[b-rjxoh07akb] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 550;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.designer-tab i[b-rjxoh07akb] {
    font-size: var(--text-base);
    color: var(--text-tertiary);
    transition: color var(--transition-fast);
}

.designer-tab:hover[b-rjxoh07akb] {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.designer-tab:focus-visible[b-rjxoh07akb] {
    outline: none;
    color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.15);
    border-radius: var(--radius-sm);
}

.designer-tab.active[b-rjxoh07akb] {
    color: var(--text-primary);
    border-bottom-color: var(--accent-primary);
    font-weight: 600;
}

.designer-tab.active i[b-rjxoh07akb] {
    color: var(--accent-primary);
}

/* Count on a tab — quiet at rest, picking up the accent once that tab is the active one. */
.designer-tab-badge[b-rjxoh07akb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 .3rem;
    border-radius: .6rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
}

.designer-tab.active .designer-tab-badge[b-rjxoh07akb] {
    background: var(--dbd-accent-soft);
    border-color: color-mix(in srgb, var(--accent-primary) 35%, transparent);
    color: var(--accent-success-text);
}

/* The panel host fills the remaining height and scrolls internally. */
.designer-tabpanels[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-1) var(--space-3) 0;
}

.designer-tabpane[b-rjxoh07akb] {
    flex: 0 0 auto;
    margin-bottom: 0;
}

/* The current view is the focal point: it grows to fill the remaining height. */
.designer-canvas-section[b-rjxoh07akb] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 320px;
}

.designer-canvas-body[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.report-editor-diagram-drop-target[b-rjxoh07akb] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--radius-md);
}

.report-editor-diagram-drop-target.is-dragging[b-rjxoh07akb] {
    outline: 2px dashed var(--accent-primary);
    outline-offset: 2px;
}

.report-editor-diagram-drop-hint[b-rjxoh07akb] {
    margin-bottom: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--dbd-accent-soft);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* The scroll container carries padding (from .section-body), and a sticky header pins below
   that padding rather than at the very top of the scrollport - leaving a 1rem strip in which
   scrolled rows stay visible above the header.

   Dropping the top padding puts the header flush with the top edge, which is also its stuck
   position: resting and stuck are the same place, so it never visibly jumps when scrolling
   starts. Rows are clipped behind it either way.

   Scoped with :has() so only the panel showing the grid is affected - the empty state is the
   other branch of the same @if, so it keeps the normal padding without needing a rule. */
.designer-canvas-body:has(.report-editor-grid)[b-rjxoh07akb] {
    padding-top: 0;
}

/* ==========================================================================
   SECTIONS — flat cards with a hairline border and a left accent rule
   ========================================================================== */

.properties-section[b-rjxoh07akb],
.collapsible-section[b-rjxoh07akb],
.preview-section[b-rjxoh07akb],
.controls-toolbar[b-rjxoh07akb] {
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.section-header[b-rjxoh07akb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-default);
    user-select: none;
}

.section-header h3[b-rjxoh07akb] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.section-header h3 i[b-rjxoh07akb] {
    color: var(--text-secondary);
    font-size: var(--text-base);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.section-header-actions[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Buttons anywhere in the designer put a gap between a leading icon and its label. */
.designer-page .btn[b-rjxoh07akb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Icon-only buttons have no label to space away from. */
.designer-page .btn.designer-btn-icon[b-rjxoh07akb] {
    gap: 0;
}

.section-header .designer-btn-icon[b-rjxoh07akb] {
    width: 28px;
    height: 28px;
    padding: 0;
}

.section-body[b-rjxoh07akb] {
    padding: var(--space-4);
}

/* Section accent indicators, matching the Form Designer's roles */
.properties-section .section-header[b-rjxoh07akb],
.collapsible-section .section-header[b-rjxoh07akb] {
    border-left: 2px solid var(--accent-blue);
}

.controls-toolbar .section-header[b-rjxoh07akb],
.controls-toolbar[b-rjxoh07akb] {
    border-left: 2px solid var(--accent-green);
}

.preview-section .section-header[b-rjxoh07akb] {
    border-left: 2px solid var(--accent-amber);
}

/* ==========================================================================
   FIELDS AND SHELVES
   ========================================================================== */

.designer-field-grid[b-rjxoh07akb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.designer-field .form-label[b-rjxoh07akb] {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: var(--space-1);
}

.designer-hint[b-rjxoh07akb] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* Checkbox / radio clusters sit on a subtle shelf so they read as one group. */
.designer-check-shelf[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
}

/* Segmented control (DESIGN_LANGUAGE §5) — a subtle track with the chosen segment lifted onto a
   surface. Built on native radios: the input is clipped rather than hidden so it keeps its place in
   the tab order, and :checked/:focus-visible on it style the label beside it. */
.designer-segmented[b-rjxoh07akb] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    flex-wrap: wrap;
    padding: 3px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.designer-seg-input[b-rjxoh07akb] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.designer-seg-label[b-rjxoh07akb] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 28px;
    margin: 0;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 550;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.designer-seg-label:hover[b-rjxoh07akb] {
    color: var(--text-primary);
}

.designer-seg-input:checked + .designer-seg-label[b-rjxoh07akb] {
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    color: var(--dbd-accent-strong);
    font-weight: 600;
}

.designer-seg-input:focus-visible + .designer-seg-label[b-rjxoh07akb] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

/* How many users or roles the selection holds, so the group says it without a hint line under it. */
.designer-seg-count[b-rjxoh07akb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--border-default);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
}

.designer-seg-input:checked + .designer-seg-label .designer-seg-count[b-rjxoh07akb] {
    background: var(--accent-primary);
    color: var(--text-on-accent);
}

.designer-options-row[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.designer-inline-group[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.designer-inline-actions[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.designer-count-badge[b-rjxoh07akb] {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-2);
    height: 1.35rem;
    border-radius: 0.7rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
}

.designer-page .form-control[b-rjxoh07akb],
.designer-page select.form-control[b-rjxoh07akb],
.designer-page textarea.form-control[b-rjxoh07akb] {
    background: var(--bg-primary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-base);
    padding: 8px 10px;
}

.designer-page .form-control:focus[b-rjxoh07akb] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.15);
    outline: none;
}

.designer-page .form-control[b-rjxoh07akb]::placeholder {
    color: var(--text-muted);
}

/* Bootstrap's .text-muted hardcodes #6c757d !important, which fails 4.5:1 on
   --dbd-bg (#fafafa); re-point it at the token so it inherits the AA-safe colour. */
.designer-page .text-muted[b-rjxoh07akb] {
    color: var(--text-muted) !important;
}

/* ==========================================================================
   EMPTY STATES
   ========================================================================== */

.empty-state-main[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--space-8);
    text-align: center;
    color: var(--text-tertiary);
}

.empty-state-main h3[b-rjxoh07akb] {
    margin: 0 0 var(--space-2) 0;
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--text-lg);
}

.empty-state-main p[b-rjxoh07akb] {
    margin: 0;
    max-width: 46ch;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.designer-empty-panel[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex: 1 1 auto;
    height: 100%;
    min-height: 220px;
    text-align: center;
    color: var(--text-tertiary);
}

.designer-empty-panel-title[b-rjxoh07akb] {
    font-weight: 600;
    color: var(--text-primary);
}

.designer-empty-panel-text[b-rjxoh07akb] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.designer-tree-loading[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 160px;
}

/* ==========================================================================
   DATA FIELD / ENTITY TREES
   ========================================================================== */

.report-editor-tree-panel[b-rjxoh07akb],
.report-editor-entity-tree-panel[b-rjxoh07akb] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: var(--space-2);
}

.report-editor-entity-tree-panel[b-rjxoh07akb] {
    min-height: 320px;
    max-height: 48vh;
}

/* The selectable row and its drag grip sit side by side; the row takes the slack.

   content-visibility hands the culling of off-screen rows to the browser: the whole list is in the DOM,
   so scrolling never waits on the server, but only the rows near the viewport are laid out and painted.
   The fixed height and the matching contain-intrinsic-size are what let the browser size the scrollbar
   correctly for rows it has not rendered yet. */
.report-editor-tree-host[b-rjxoh07akb]  .report-editor-tree-row-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 34px;
    content-visibility: auto;
    contain-intrinsic-size: auto 34px;
}

/* One per level of nesting, ahead of the row. Rows are a flat list rather than nested containers, so
   the guide line each level used to draw is drawn by these instead - stretched to the full row height
   they join up into the same continuous dashed line down the branch. */
.report-editor-tree-host[b-rjxoh07akb]  .report-editor-tree-indent {
    flex: 0 0 var(--space-2);
    align-self: stretch;
    margin-left: var(--space-3);
    border-left: 1px dashed var(--border-default);
}

.report-editor-tree-host[b-rjxoh07akb]  .report-editor-tree-row {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    display: flex;
    gap: var(--space-2);
    min-height: 34px;
    padding: var(--space-1) var(--space-2);
    text-align: left;
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--text-base);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.report-editor-tree-host[b-rjxoh07akb]  .report-editor-tree-row-wrap:hover .report-editor-tree-row {
    background: var(--dbd-accent-soft);
    border-color: var(--border-default);
}

.report-editor-tree-host[b-rjxoh07akb]  .report-editor-tree-row:focus-visible {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.15);
}

.report-editor-tree-host[b-rjxoh07akb]  .report-editor-tree-row.clickable {
    cursor: pointer;
}

.report-editor-tree-host[b-rjxoh07akb]  .report-editor-tree-row.folder {
    font-weight: 600;
}

.report-editor-tree-host[b-rjxoh07akb]  .report-editor-tree-expander {
    color: var(--text-tertiary);
    flex: 0 0 1rem;
    text-align: center;
    font-size: var(--text-sm);
}

.report-editor-tree-host[b-rjxoh07akb]  .report-editor-tree-row:hover .report-editor-tree-expander {
    color: var(--accent-primary);
}

.report-editor-tree-host[b-rjxoh07akb]  .report-editor-tree-text {
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-editor-tree-host[b-rjxoh07akb]  .report-editor-tree-key-match {
    flex: 0 0 auto;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.report-editor-tree-host[b-rjxoh07akb]  .report-editor-tree-description {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Icons are shared by thousands of nodes, so they arrive as one background-image rule per distinct
   icon rather than a base64 data URI inlined into every row. */
.report-editor-tree-host[b-rjxoh07akb]  .report-editor-tree-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Shown when a search matches more rows than one render will build. Lives inside the tree component,
   so it needs ::deep to be reached from the page's scoped stylesheet. */
.report-editor-tree-host[b-rjxoh07akb]  .report-editor-tree-truncated {
    padding: var(--space-2);
    margin-top: var(--space-1);
    border-top: 1px solid var(--border-default);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-align: center;
}

.report-editor-tree-empty[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 100%;
    min-height: 160px;
    text-align: center;
    color: var(--text-tertiary);
    padding: var(--space-4);
}

.report-editor-tree-empty-icon[b-rjxoh07akb] {
    font-size: 1.6rem;
}

.report-editor-tree-empty-title[b-rjxoh07akb] {
    font-weight: 600;
    color: var(--text-primary);
}

.report-editor-tree-empty-text[b-rjxoh07akb] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ==========================================================================
   REPORT TABLE AND LIST BOXES
   ========================================================================== */

/* ==========================================================================
   REPORT COLUMNS — CSS grid, not a table
   ==========================================================================
   A sticky thead inside a scroll container kept losing to the scrolled rows,
   through both the thead-element and the collapsed-border variants of the fix.
   This mirrors DataGrid (Components/Grid/DataGrid.razor.css): a sticky header
   row promoted to its own compositor layer, over plain grid rows. Column
   widths live in one custom property so header and rows cannot drift. */

.report-editor-grid[b-rjxoh07akb] {
    --report-editor-columns: 34px minmax(0, 1fr) 110px minmax(0, 36%) 56px;
    /* Height of the gap rows open up to show where a drop will land. */
    --report-editor-drop-slot: 40px;

    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    font-size: var(--text-base);
    color: var(--text-primary);
}

.report-editor-grid-header[b-rjxoh07akb] {
    display: grid;
    grid-template-columns: var(--report-editor-columns);
    position: sticky;
    /* -1px, as DataGrid does: at some zoom levels a top of 0 leaves a subpixel seam through
       which the row underneath shows as a hairline. */
    top: -1px;
    z-index: 3;
    flex: 0 0 auto;
    background: var(--bg-tertiary);
    background-clip: padding-box;
    border-bottom: 1px solid var(--border-default);
    /* Own compositor layer. This is what actually keeps the header above the rows - the
       positioned-element rules alone were not holding inside this scroll container. */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.report-editor-grid-header-cell[b-rjxoh07akb] {
    padding: var(--space-2) var(--space-3);
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-editor-grid-body[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

.report-editor-grid-row[b-rjxoh07akb] {
    display: grid;
    grid-template-columns: var(--report-editor-columns);
    align-items: center;
    border-top: 1px solid var(--border-default);
    /* Anchors the drop slot drawn by ::before. */
    position: relative;
    transition: padding-top var(--transition-fast);
}

.report-editor-grid-row:first-child[b-rjxoh07akb] {
    border-top: none;
}

/* Cells carry the padding the td rule used to. */
.report-editor-grid-row > [role="cell"][b-rjxoh07akb] {
    padding: var(--space-2) var(--space-3);
    min-width: 0;
}

.report-editor-remove-cell[b-rjxoh07akb] {
    text-align: center;
}

.clickable-row[b-rjxoh07akb] {
    cursor: pointer;
}

.report-editor-grid-row.clickable-row:hover[b-rjxoh07akb] {
    background: var(--bg-tertiary);
}

.report-editor-cell-ellipsis[b-rjxoh07akb] {
    /* min-width, not max-width: the table version used max-width: 0 to force ellipsis under
       table-layout: fixed, which in a grid would collapse the column outright. Grid items
       default to min-width: auto and refuse to shrink, so 0 is what enables the ellipsis. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Two-line field cell: the name, then how the field got onto the report and where it comes from. */
.report-editor-field-cell[b-rjxoh07akb] {
    /* See .report-editor-cell-ellipsis - min-width, not max-width, now this is a grid. */
    min-width: 0;
}

/* A button, not a div: it is how a keyboard user opens the field editor. Reset to look exactly
   like the text it replaced - the affordance is the row, not a button chrome. */
.report-editor-field-title[b-rjxoh07akb] {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 550;
    color: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-editor-field-title:focus-visible[b-rjxoh07akb] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Focus ring for the row's remove button - it had none, so keyboard users could not see where
   they were (WCAG 2.4.7). */
.report-editor-remove-btn:focus-visible[b-rjxoh07akb] {
    outline: 2px solid var(--accent-danger);
    outline-offset: 2px;
}

.report-editor-field-meta[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin-top: 2px;
    min-width: 0;
}

.report-editor-field-source[b-rjxoh07akb] {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Small pill describing a row: related data, filter/sort only, blank, mapping, sort direction.
   Every one carries a word as well as an icon, so none of them relies on colour or shape alone. */
.report-editor-tag[b-rjxoh07akb] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 1px var(--space-2);
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.report-editor-tag i[b-rjxoh07akb] {
    font-size: 0.65em;
}

.report-editor-tag-accent[b-rjxoh07akb] {
    border-color: color-mix(in srgb, var(--accent-primary) 35%, transparent);
    background: var(--dbd-accent-soft);
    color: var(--accent-success-text);
}

/* A tag is a statement about the row rather than a control, so it stays a span and takes no place
   in the tab order - but there is more to say about it than the two words fit, and the cursor is
   how a pointer user finds that out. The pills below (.report-editor-flag) are the other case:
   those are controls, so they are buttons and their tooltip is reachable by keyboard too. */
.report-editor-tag[data-amx-tip][b-rjxoh07akb] {
    cursor: help;
}

/* ── Field option pills ────────────────────────────────────────────────────
   Which of the field editor's ~30 settings are switched on for this column:
   lookup colours, a summary, a running total, where the value is reused on the
   map. None of it was visible from the grid before, so reading a report meant
   opening every field in turn.

   They are buttons rather than labels for two reasons. A tooltip has to be
   reachable without a mouse (WCAG 1.4.13), which needs a focusable trigger; and
   once a pill is focusable it may as well do something, so clicking one opens
   the same field editor the row does - a pill is then a shortcut to the setting
   it names rather than a decoration.

   Deliberately quieter than .report-editor-tag: the tags above them say why the
   field is on the report at all, which is the more important line. */
.report-editor-flags[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-1);
    min-width: 0;
}

.report-editor-flag[b-rjxoh07akb] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    /* 24px clears WCAG 2.2 target size (2.5.8) - the pill is a real control. */
    min-height: 24px;
    padding: 2px var(--space-2);
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast),
        color var(--transition-fast);
}

.report-editor-flag i[b-rjxoh07akb] {
    font-size: 0.75em;
}

.report-editor-flag:hover[b-rjxoh07akb] {
    background: var(--bg-tertiary);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.report-editor-flag:focus-visible[b-rjxoh07akb] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Something that changes how the column is painted or what it counts - the two
   things people come to this grid looking for. The icon and the wording say the
   same thing, so the tint is emphasis and never the only signal (WCAG 1.4.1). */
.report-editor-flag.is-accent[b-rjxoh07akb] {
    border-color: color-mix(in srgb, var(--accent-primary) 35%, transparent);
    background: var(--dbd-accent-soft);
    color: var(--accent-success-text);
}

.report-editor-flag.is-accent:hover[b-rjxoh07akb] {
    border-color: var(--accent-primary);
    color: var(--accent-success-text);
}

/* The column is not doing what the row otherwise suggests: it is hidden, or its
   lookup's colours have been turned off on purpose. */
.report-editor-flag.is-warning[b-rjxoh07akb] {
    border-color: color-mix(in srgb, var(--accent-warning) 40%, transparent);
    background: color-mix(in srgb, var(--accent-warning) 10%, var(--bg-primary));
    color: var(--accent-warning-text);
}

.report-editor-flag.is-warning:hover[b-rjxoh07akb] {
    border-color: var(--accent-warning);
    background: color-mix(in srgb, var(--accent-warning) 18%, var(--bg-primary));
    color: var(--accent-warning-text);
}

/* "Nothing set" in the sort and filter columns. */
.report-editor-none[b-rjxoh07akb] {
    color: var(--text-tertiary);
}

.report-editor-remove-btn[b-rjxoh07akb] {
    line-height: 1;
}

.report-editor-listbox[b-rjxoh07akb] {
    width: 100%;
    min-height: 220px;
    background: var(--bg-primary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-base);
    padding: var(--space-1);
}

.report-editor-listbox:focus[b-rjxoh07akb] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.15);
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
}

.report-editor-listbox option[b-rjxoh07akb] {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.designer-filter-grid[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    gap: var(--space-3);
}

.report-editor-filter-group[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 0 auto;
}

.report-editor-filter-header[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.report-editor-filter-header .form-label[b-rjxoh07akb] {
    margin: 0;
}

.report-editor-filter-join[b-rjxoh07akb] {
    flex-wrap: wrap;
}

.report-editor-filter-group .report-editor-drop-target[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

.report-editor-filter-list[b-rjxoh07akb] {
    flex: 1 0 auto;
    min-height: 100px;
    height: 100px;
    overflow-y: auto;
    margin: 0;
    padding: var(--space-2);
    list-style: none;
    background: var(--bg-primary);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-md);
}

.report-editor-filter-row[b-rjxoh07akb] {
    display: block;
    width: 100%;
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.report-editor-filter-row:hover:not(.is-readonly)[b-rjxoh07akb] {
    background: var(--bg-hover);
    border-color: var(--border-interactive);
}

.report-editor-filter-row:focus-visible[b-rjxoh07akb] {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
}

.report-editor-filter-row.is-readonly[b-rjxoh07akb] {
    cursor: default;
}

.report-editor-filter-connector[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 700;
}

.report-editor-filter-logic[b-rjxoh07akb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.report-editor-summary-filters[b-rjxoh07akb],
.report-editor-summary-filter[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    overflow-wrap: anywhere;
}

.report-editor-summary-filters[b-rjxoh07akb] {
    gap: var(--space-2);
}

.report-editor-filter-group-tag[b-rjxoh07akb] {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
}

.report-editor-filter-connector[b-rjxoh07akb]::before,
.report-editor-filter-connector[b-rjxoh07akb]::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--border-color);
}

.report-editor-advanced-filter[b-rjxoh07akb] {
    flex-wrap: nowrap;
}

.report-editor-advanced-filter .form-control[b-rjxoh07akb],
.report-editor-advanced-filter output[b-rjxoh07akb] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Read-only advanced filter: looks like the input it replaces, but inert. */
.report-editor-readonly-filter[b-rjxoh07akb] {
    display: block;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    padding: 8px 10px;
    min-height: 38px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-editor-footer[b-rjxoh07akb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.report-editor-footer > section[b-rjxoh07akb] {
    flex: 1 1 360px;
    min-width: 0;
}

.report-editor-record-limit .designer-check-shelf[b-rjxoh07akb] {
    flex-wrap: wrap;
}

.report-editor-record-limit .form-check[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-left: 0;
    margin-right: 0;
}

.report-editor-record-limit .form-check-input[b-rjxoh07akb] {
    float: none;
    margin: 0;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-color: var(--border-interactive);
    accent-color: var(--dbd-accent);
}

.report-editor-record-limit input:focus-visible[b-rjxoh07akb] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.report-editor-top-records[b-rjxoh07akb] {
    margin-top: var(--space-3);
}

.report-editor-top-records .form-control[b-rjxoh07akb] {
    border-color: var(--border-interactive);
}

.report-editor-limit-spinner[b-rjxoh07akb] {
    display: flex;
    align-items: stretch;
    gap: var(--space-1);
}

.report-editor-limit-spinner input[b-rjxoh07akb] {
    min-width: 0;
    flex: 1;
    appearance: textfield;
    -moz-appearance: textfield;
}

.report-editor-limit-spinner input[b-rjxoh07akb]::-webkit-inner-spin-button,
.report-editor-limit-spinner input[b-rjxoh07akb]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.report-editor-limit-arrows[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.report-editor-limit-arrows button[b-rjxoh07akb] {
    min-width: 32px;
    min-height: 24px;
    padding: 0 var(--space-2);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
}

.report-editor-limit-arrows button:hover[b-rjxoh07akb] {
    background: var(--bg-hover);
}

.report-editor-limit-arrows button:focus-visible[b-rjxoh07akb] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* ==========================================================================
   ENTITY SELECTION MODAL
   ========================================================================== */

.entity-selection-heading[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.entity-selection-heading-icon[b-rjxoh07akb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    /* Flat accent fill — no gradient (DESIGN_LANGUAGE §1). Matches .amx-modal-head-icon's token. */
    background: var(--dbd-accent, #15803d);
    color: #fff;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.entity-selection-heading-text[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.entity-selection-subtitle[b-rjxoh07akb] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 400;
}

.entity-selection-body[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.entity-selection-search-wrap[b-rjxoh07akb] {
    position: relative;
}

.entity-selection-search-wrap .search-icon[b-rjxoh07akb] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    pointer-events: none;
}

.entities-search-text[b-rjxoh07akb] {
    padding-left: 34px !important;
}

/* ==========================================================================
   RADIUS FILTER MODAL
   ========================================================================== */

.radius-filter-heading[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.radius-filter-icon[b-rjxoh07akb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    /* Flat accent fill — no gradient (DESIGN_LANGUAGE §1). Matches .amx-modal-head-icon's token. */
    background: var(--dbd-accent, #15803d);
    color: #fff;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.radius-filter-subtitle[b-rjxoh07akb] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.radius-filter-body[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.radius-filter-controls[b-rjxoh07akb] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.radius-filter-status-pill[b-rjxoh07akb] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.radius-filter-radius[b-rjxoh07akb] {
    width: 180px;
}

.radius-filter-map[b-rjxoh07akb] {
    height: 420px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1400px) {
    .designer-sidebar[b-rjxoh07akb] {
        flex: 0 0 380px;
        width: 380px;
    }
}

@media (max-width: 1200px) {
    .designer-sidebar[b-rjxoh07akb] {
        flex: 0 0 320px;
        width: 320px;
    }
}

/* ==========================================================================
   DRAG AND DROP — palette field onto the summary, and row reordering
   ========================================================================== */

/* Drag grip at the end of a selectable row. It is the ONLY draggable part, so the row itself keeps a
   pointer cursor; the entity picker renders no grip at all. Revealed on hover so the tree stays quiet
   at rest, and while a drag is in flight so the source row is still visible. */
.report-editor-tree-host[b-rjxoh07akb]  .report-editor-tree-drag {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    align-self: stretch;
    min-height: 28px;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    cursor: grab;
    opacity: 0;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

.report-editor-tree-host[b-rjxoh07akb]  .report-editor-tree-row-wrap:hover .report-editor-tree-drag {
    opacity: 1;
}

.report-editor-tree-host[b-rjxoh07akb]  .report-editor-tree-drag:hover {
    color: var(--accent-primary);
    background: var(--dbd-accent-soft);
}

.report-editor-tree-host[b-rjxoh07akb]  .report-editor-tree-drag:active {
    cursor: grabbing;
}

/* Keep every grip visible during a drag, so the row being dragged does not vanish when the
   pointer leaves it. */
.report-editor-tree-panel.is-dragging[b-rjxoh07akb]  .report-editor-tree-drag {
    opacity: 0.55;
}

/* Fills the panel so the empty space below the last row is still part of the drop target. */
.designer-drop-surface[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 100%;
}

/* While a drag is in flight the whole panel shows it will accept the drop. */
.designer-drop-surface.is-dragging[b-rjxoh07akb] {
    outline: 2px dashed var(--accent-primary);
    outline-offset: -6px;
    border-radius: var(--radius-md);
}

/* Everything below the last row. It always takes the remaining height so the drop area covers the
   whole panel, but stays invisible until a drag is actually in flight. */
.designer-drop-tail[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 48px;
    margin: var(--space-2) var(--space-1) 0;
    padding: var(--space-3);
    border: 1px dashed transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* In flight: the tail reads as an available target straight away. It used to be a grey dashed
   outline, so the drop zone only "appeared" once the pointer happened to enter it. */
.designer-drop-tail.is-active[b-rjxoh07akb] {
    border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent);
    color: var(--dbd-accent-strong);
}

/* Under the pointer: the same target, filled, so it is clear this is where a release lands. */
.designer-drop-tail.is-over[b-rjxoh07akb],
.designer-empty-panel.is-over[b-rjxoh07akb] {
    border-color: var(--accent-primary);
    background: var(--dbd-accent-soft);
    color: var(--dbd-accent-strong);
}

.designer-empty-panel.is-over[b-rjxoh07akb] {
    border: 1px dashed var(--accent-primary);
    border-radius: var(--radius-md);
}

/* The row being dragged fades; the row it will land on gets a top rule marking the
   insertion point. Both cues are shape/position, not colour alone. */
.report-editor-grid-row.row-dragging[b-rjxoh07akb] {
    opacity: 0.45;
}

/* Rows spread apart to open a slot where the dragged item will land, instead of marking the
   insertion point with a hairline that was easy to miss.

   The gap is padding on the target row, not a margin: padding grows the row downwards and leaves
   its top edge where it was, so the row stays under the pointer. A margin would move the row out
   from under the cursor, which flips the target to the next row and makes the slot oscillate. */
.report-editor-grid-row.row-drop-target[b-rjxoh07akb] {
    padding-top: var(--report-editor-drop-slot);
}

@media (prefers-reduced-motion: reduce) {
    .report-editor-grid-row[b-rjxoh07akb] {
        transition: none;
    }
}

.report-editor-grid-row.row-drop-target[b-rjxoh07akb]::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--space-1);
    right: var(--space-1);
    height: calc(var(--report-editor-drop-slot) - var(--space-1));
    margin-top: calc(var(--space-1) / 2);
    border: 2px dashed var(--accent-primary);
    border-radius: var(--radius-md);
    background: var(--accent-wash);
    /* Never intercept the drag events the row itself needs. */
    pointer-events: none;
}

/* Drop targets on the Filters and Sort views. The wrapper carries the cue rather than the
   listbox, so it works for the filter groups (where the select fills the group) and reads the
   same as the summary's drop surface. The read-only third filter group has no wrapper and so
   never lights up. */
.report-editor-drop-target[b-rjxoh07akb] {
    border-radius: var(--radius-md);
    outline: 2px dashed transparent;
    outline-offset: 2px;
}

.report-editor-drop-target.is-dragging[b-rjxoh07akb] {
    outline-color: var(--accent-primary);
}

/* The sort list uses list semantics so each row can hold edit/reorder buttons and the grip and
   the up/down move buttons. It reads as the same box the filters use. */
.report-editor-sort-list[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 220px;
    background: var(--bg-primary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-base);
    padding: var(--space-1);
    outline: 2px dashed transparent;
    outline-offset: 2px;
}

.report-editor-sort-list.is-dragging[b-rjxoh07akb] {
    outline-color: var(--accent-primary);
}

.report-editor-sort-row[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 1px solid transparent;
}

.report-editor-sort-row:hover[b-rjxoh07akb] {
    background: var(--bg-secondary);
}

.report-editor-sort-row:focus-visible[b-rjxoh07akb] {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
}

.report-editor-sort-row.is-selected[b-rjxoh07akb] {
    background: var(--dbd-accent-soft);
    border-color: var(--accent-primary);
}

.report-editor-sort-title[b-rjxoh07akb] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-editor-sort-title:focus-visible[b-rjxoh07akb] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* The sort being dragged fades; the row the drop lands on gets the accent wash, matching the
   summary's row cues. */
.report-editor-sort-row.row-dragging[b-rjxoh07akb] {
    opacity: 0.45;
}

.report-editor-sort-row.row-drop-target[b-rjxoh07akb] {
    background: var(--accent-wash);
    color: var(--dbd-accent-strong);
    box-shadow: inset 0 2px 0 var(--accent-primary);
}

/* Reveal the move arrows on hover/focus, exactly as the summary rows do. */
.report-editor-sort-row .report-editor-move-buttons[b-rjxoh07akb] {
    opacity: 0;
}

.report-editor-sort-row:hover .report-editor-move-buttons[b-rjxoh07akb],
.report-editor-sort-row .report-editor-move-buttons:focus-within[b-rjxoh07akb] {
    opacity: 1;
}

.report-editor-grip-cell[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding-left: var(--space-2) !important;
    padding-right: 0 !important;
}

.report-editor-grip[b-rjxoh07akb] {
    color: var(--text-tertiary);
    cursor: grab;
    font-size: var(--text-sm);
}

.report-editor-grid-row:active .report-editor-grip[b-rjxoh07akb] {
    cursor: grabbing;
}

/* Keyboard equivalent of the drag. Kept compact and revealed on row hover/focus, but
   never display:none — it has to stay reachable by tabbing. */
.report-editor-move-buttons[b-rjxoh07akb] {
    display: inline-flex;
    flex-direction: column;
    margin-left: var(--space-1);
    vertical-align: middle;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.report-editor-grid-row:hover .report-editor-move-buttons[b-rjxoh07akb],
.report-editor-move-buttons:focus-within[b-rjxoh07akb] {
    opacity: 1;
}

.report-editor-move-btn[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 14px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 0.6rem;
    cursor: pointer;
}

.report-editor-move-btn:hover:not(:disabled)[b-rjxoh07akb] {
    color: var(--accent-primary);
}

.report-editor-move-btn:disabled[b-rjxoh07akb] {
    opacity: 0.35;
    cursor: default;
}

.report-editor-move-btn:focus-visible[b-rjxoh07akb] {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
    border-radius: 2px;
}

/* ==========================================================================
   CHARTS TAB
   ========================================================================== */

.report-editor-chart-list[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.report-editor-chart-row[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.report-editor-chart-row:hover[b-rjxoh07akb] {
    border-color: var(--accent-primary);
    background: var(--dbd-accent-soft);
}

.report-editor-chart-row:focus-visible[b-rjxoh07akb] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.15);
}

.report-editor-chart-icon[b-rjxoh07akb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    color: var(--dbd-accent-strong);
}

.report-editor-chart-main[b-rjxoh07akb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.report-editor-chart-title[b-rjxoh07akb] {
    font-weight: 550;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-editor-chart-meta[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    min-width: 0;
}

.report-editor-chart-go[b-rjxoh07akb] {
    flex: 0 0 auto;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}

.report-editor-chart-row:hover .report-editor-chart-go[b-rjxoh07akb] {
    color: var(--accent-primary);
}

/* ==========================================================================
   ROW CONTEXT MENU (right-click)
   ==========================================================================
   Mirrors the Form Designer's canvas menu. Positioned at the cursor by
   AmxPositionAtPoint, which clamps it into the viewport - the fixed
   top/left here is only the pre-clamp starting point. */

.report-context-backdrop[b-rjxoh07akb] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: transparent;
}

.report-context-menu[b-rjxoh07akb] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1081;
    display: flex;
    flex-direction: column;
    min-width: 208px;
    padding: var(--space-2);
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transform-origin: top left;
    animation: report-context-in-b-rjxoh07akb 0.12s ease-out;
}

/* Focused programmatically on open so the arrow keys work straight away; that focus is a
   landing point rather than a control, so it needs no ring of its own. */
.report-context-menu:focus[b-rjxoh07akb] {
    outline: none;
}

@keyframes report-context-in-b-rjxoh07akb {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(-2px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .report-context-menu[b-rjxoh07akb] {
        animation: none;
    }
}

.report-context-header[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    padding: 2px var(--space-2) var(--space-2);
    border-bottom: 1px solid var(--border-default);
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.report-context-header i[b-rjxoh07akb] {
    width: 14px;
    text-align: center;
}

.report-context-title[b-rjxoh07akb] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-context-item[b-rjxoh07akb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    /* Comfortably past the 24x24 WCAG 2.2 target minimum. */
    min-height: 32px;
    padding: var(--space-2);
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.report-context-item i[b-rjxoh07akb] {
    width: 14px;
    text-align: center;
    color: var(--text-tertiary);
}

.report-context-label[b-rjxoh07akb] {
    flex: 1;
    min-width: 0;
}

.report-context-item:hover[b-rjxoh07akb],
.report-context-item:focus-visible[b-rjxoh07akb] {
    background: var(--bg-hover);
    outline: none;
}

.report-context-item:focus-visible[b-rjxoh07akb] {
    /* Keyboard focus needs its own mark - hover colour alone is not a focus indicator. */
    box-shadow: inset 0 0 0 2px var(--accent-primary);
}

.report-context-item:hover i[b-rjxoh07akb],
.report-context-item:focus-visible i[b-rjxoh07akb] {
    color: var(--text-secondary);
}

.report-context-item:disabled[b-rjxoh07akb] {
    opacity: 0.45;
    cursor: default;
}

.report-context-item:disabled:hover[b-rjxoh07akb] {
    background: transparent;
}

.report-context-danger[b-rjxoh07akb],
.report-context-danger i[b-rjxoh07akb] {
    color: var(--accent-danger);
}

.report-context-danger:hover[b-rjxoh07akb],
.report-context-danger:focus-visible[b-rjxoh07akb] {
    background: color-mix(in srgb, var(--accent-danger) 10%, transparent);
    color: var(--accent-danger);
}

.report-context-danger:hover i[b-rjxoh07akb],
.report-context-danger:focus-visible i[b-rjxoh07akb] {
    color: var(--accent-danger);
}

.report-context-sep[b-rjxoh07akb] {
    height: 1px;
    margin: var(--space-1) 0;
    background: var(--border-default);
}

/* Reflow uses the same width/height thresholds as the app shell. Release the
   whole height chain together: keeping even one of these scrollports would
   squeeze the active tab below the palette/header at high browser zoom. */
@media (max-width: 1000px), (max-height: 600px) {
    .report-designer-page[b-rjxoh07akb] {
        position: relative;
        inset: auto;
        height: auto;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .designer-content[b-rjxoh07akb],
    .designer-main[b-rjxoh07akb],
    .designer-workspace[b-rjxoh07akb],
    .designer-sidebar[b-rjxoh07akb],
    .designer-sidebar > section[b-rjxoh07akb],
    .designer-sidebar-body[b-rjxoh07akb],
    .designer-tabs[b-rjxoh07akb],
    .designer-tabpanels[b-rjxoh07akb],
    .designer-details-pane[b-rjxoh07akb],
    .designer-canvas-section[b-rjxoh07akb],
    .designer-canvas-body[b-rjxoh07akb],
    .report-editor-tree-panel[b-rjxoh07akb] {
        flex: 0 0 auto;
        height: auto;
        min-height: 0;
        max-height: none;
        min-width: 0;
        overflow: visible;
    }

    .designer-main[b-rjxoh07akb] {
        width: 100%;
    }

    .designer-tabs[b-rjxoh07akb] {
        flex: 1 1 auto;
    }

    .designer-header[b-rjxoh07akb] {
        height: auto;
        padding: var(--space-2) var(--space-3);
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .designer-header-title[b-rjxoh07akb],
    .designer-header-title h1[b-rjxoh07akb],
    .designer-header-actions .designer-action-group[b-rjxoh07akb],
    .section-header[b-rjxoh07akb],
    .section-header-actions[b-rjxoh07akb],
    .designer-segmented[b-rjxoh07akb],
    .report-editor-advanced-filter[b-rjxoh07akb] {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
    }

    .designer-header-title h1[b-rjxoh07akb],
    .designer-header-area[b-rjxoh07akb],
    .designer-tab[b-rjxoh07akb] {
        white-space: normal;
    }

    .designer-header-area[b-rjxoh07akb] {
        max-width: 100%;
    }

    .designer-tab[b-rjxoh07akb] {
        max-width: 100%;
    }

    .report-editor-filter-list[b-rjxoh07akb] {
        height: auto;
        overflow: visible;
    }

    .report-editor-sort-title[b-rjxoh07akb],
    .report-editor-chart-title[b-rjxoh07akb] {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .report-editor-move-buttons[b-rjxoh07akb] {
        opacity: 1;
    }

    .report-editor-move-btn[b-rjxoh07akb] {
        min-width: 24px;
        min-height: 24px;
    }

    .designer-tab:focus-visible[b-rjxoh07akb] {
        outline: 2px solid var(--border-focus);
        outline-offset: -2px;
    }
}

@media (max-width: 1000px) {
    .designer-workspace[b-rjxoh07akb] {
        flex-direction: column;
    }

    .designer-sidebar[b-rjxoh07akb] {
        width: 100%;
    }

    .designer-field-grid[b-rjxoh07akb] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Stack each summary row's information at phone/zoom widths, retaining the
   table semantics and all edit, reorder and remove controls. */
@media (max-width: 640px) {
    .report-editor-grid-header[b-rjxoh07akb] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .report-editor-grid-row[b-rjxoh07akb] {
        grid-template-columns: 34px minmax(0, 1fr) 48px;
    }

    .report-editor-grip-cell[b-rjxoh07akb] {
        grid-column: 1;
        grid-row: 1;
    }

    .report-editor-field-cell[b-rjxoh07akb] {
        grid-column: 2;
        grid-row: 1;
    }

    .report-editor-remove-cell[b-rjxoh07akb] {
        grid-column: 3;
        grid-row: 1;
    }

    .report-editor-sort-cell[b-rjxoh07akb],
    .report-editor-summary-filters[b-rjxoh07akb] {
        grid-column: 2 / -1;
    }

    .report-editor-sort-cell[b-rjxoh07akb]::before {
        content: "Sort: ";
        font-weight: 600;
    }

    .report-editor-summary-filters[b-rjxoh07akb]::before {
        content: "Filters:";
        font-weight: 600;
    }

    .report-editor-field-title[b-rjxoh07akb],
    .report-editor-field-source[b-rjxoh07akb],
    .report-editor-cell-ellipsis[b-rjxoh07akb],
    .report-editor-readonly-filter[b-rjxoh07akb] {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}
/* /Pages/Reports/ReportFilters/ColumnFilterItem.razor.rz.scp.css */
/* ========== COLUMN FILTER ITEM ==========
   One filter is one row of the modal's list, not a card: field · condition · value · clear.
   Columns come from --rf-cols, declared on the list in ReportFilters.razor.css and inherited
   here, so the rows line up with each other and with the list header. Flat surfaces, hairline
   separators, one green accent (DESIGN_LANGUAGE.md §1/§5). */

/* ---- Theme-aware design-language tokens, scoped to this component's rendered roots ----
   Declared here as well as on the parent modal so the row is self-sufficient wherever
   it is rendered. */
.cf-row[b-k3ol98c4zv],
.cf-lookup-header[b-k3ol98c4zv],
.cf-lookup-footer[b-k3ol98c4zv] {
    --dbd-surface: var(--bg-card);
    --dbd-fg: var(--text-primary);
    --dbd-muted: var(--text-secondary);
    --dbd-border: var(--border-color);
    --dbd-border-strong: var(--border-interactive);
    --dbd-subtle: var(--bg-hover);
    --dbd-accent: var(--accent-success-fill);
    --dbd-accent-strong: var(--accent-success-text);
    --dbd-accent-soft: var(--bg-hover);
    --dbd-accent-ring: var(--border-interactive);
    --accent-danger-soft: var(--bg-hover);
    --accent-warning-soft: var(--bg-hover);

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --transition-fast: 100ms ease;
    --transition-base: 150ms ease;
    --text-xs: .6875rem;
    --text-sm: .8125rem;
    --text-base: .875rem;
}


/* ---- Row ---- */
.cf-row[b-k3ol98c4zv] {
    display: grid;
    grid-template-columns: var(--rf-cols, minmax(160px, 1.1fr) minmax(150px, 1fr) minmax(220px, 1.8fr) 36px);
    align-items: center;
    gap: .5rem .75rem;
    padding: .5rem .75rem;
    /* Separators between rows only — the list itself supplies the outer edges. */
    border-top: 1px solid var(--dbd-border);
    color: var(--dbd-fg);
    transition: background-color var(--transition-fast);
}

.cf-row:first-of-type[b-k3ol98c4zv] {
    border-top: none;
}

.cf-row:hover[b-k3ol98c4zv] {
    background-color: var(--dbd-subtle);
}

/* A set filter is marked by an accent edge and a soft tint — the same "selected" language
   rows and tiles use elsewhere (§5 Lists / result rows). */
.cf-row-active[b-k3ol98c4zv] {
    background-color: var(--dbd-accent-soft);
    box-shadow: inset 2px 0 0 var(--dbd-accent);
}

.cf-row-active:hover[b-k3ol98c4zv] {
    background-color: var(--dbd-accent-soft);
}

.cf-cell[b-k3ol98c4zv] {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.cf-cell-value[b-k3ol98c4zv] {
    flex-wrap: nowrap;
}

.cf-cell-actions[b-k3ol98c4zv] {
    justify-content: flex-end;
}

.cf-field-name[b-k3ol98c4zv] {
    font-size: var(--text-base);
    font-weight: 550;
    color: var(--dbd-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-row-active .cf-field-name[b-k3ol98c4zv] {
    color: var(--dbd-accent-strong);
    font-weight: 600;
}

.cf-required[b-k3ol98c4zv] {
    color: var(--accent-danger-text);
    font-weight: 600;
    flex-shrink: 0;
}

/* Quiet caption used where a control would otherwise sit — "Fixed", "is". */
.cf-note[b-k3ol98c4zv] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    white-space: nowrap;
}

.cf-no-value[b-k3ol98c4zv] {
    font-size: var(--text-sm);
    color: var(--dbd-muted);
    font-style: italic;
}

/* ---- Inputs ---- */
.cf-input[b-k3ol98c4zv] {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--dbd-border-strong);
    border-radius: var(--radius-md);
    background-color: var(--dbd-surface);
    color: var(--dbd-fg);
    font-size: .85rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cf-input:hover:not(:disabled)[b-k3ol98c4zv] {
    border-color: var(--dbd-accent);
}

.cf-input:focus[b-k3ol98c4zv] {
    outline: 2px solid var(--border-interactive);
    outline-offset: 2px;
    border-color: var(--dbd-accent);
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
}

.cf-input[b-k3ol98c4zv]::placeholder {
    color: var(--dbd-muted);
}

.cf-input:disabled[b-k3ol98c4zv] {
    opacity: .6;
    background-color: var(--dbd-subtle);
    cursor: default;
}

/* Values chosen in the picker, shown where the date field would be. */
.cf-picked[b-k3ol98c4zv] {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid var(--dbd-border);
    border-radius: var(--radius-md);
    background-color: var(--dbd-subtle);
    color: var(--dbd-fg);
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Value-picker button: ghost by default; accent-tinted once values are selected, so "this
   filter has picks" reads with the same green as every other active state in the modal. */
.cf-picker-btn[b-k3ol98c4zv] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 36px;
    min-width: 36px;
    padding: 0 9px;
    border: 1px solid var(--dbd-border-strong);
    border-radius: var(--radius-md);
    background-color: var(--dbd-surface);
    color: var(--dbd-fg);
    font-size: .85rem;
    font-weight: 550;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}

.cf-picker-btn:hover[b-k3ol98c4zv] {
    background-color: var(--dbd-subtle);
    border-color: var(--dbd-accent);
}

.cf-picker-btn:focus-visible[b-k3ol98c4zv] {
    outline: 2px solid var(--border-interactive);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
}

.cf-picker-btn.cf-picker-active[b-k3ol98c4zv] {
    background-color: var(--dbd-accent-soft);
    border-color: var(--dbd-accent);
    color: var(--dbd-accent-strong);
}

.cf-picker-count[b-k3ol98c4zv] {
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
}

/* "and" separator between range fields — quiet caption, not a chip: it sits between two
   fields and should read as connective tissue (§3). */
.cf-and[b-k3ol98c4zv] {
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Clear: ghost at rest, red only on hover; disabled keeps its footprint so rows do not
   reflow as values come and go (§5 Buttons). */
.cf-clear-btn[b-k3ol98c4zv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--dbd-muted);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}

.cf-clear-btn:hover:not(:disabled)[b-k3ol98c4zv] {
    background-color: var(--accent-danger-soft);
    color: var(--accent-danger-text);
}

.cf-clear-btn:focus-visible[b-k3ol98c4zv] {
    outline: 2px solid var(--border-interactive);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
}

.cf-clear-btn:disabled[b-k3ol98c4zv] {
    opacity: .3;
    cursor: default;
}

/* ---- Narrow screens ----
   The list header is hidden by the parent at this width, so the row stops pretending to be
   a table: name and clear share a line, condition and value stack under it.
   Breakpoint matches ReportFilters.razor.css. */
@media (max-width: 860px) {
    .cf-row[b-k3ol98c4zv] {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "field actions"
            "condition condition"
            "value value";
        gap: .5rem;
        padding: .75rem;
    }

    .cf-cell-field[b-k3ol98c4zv] {
        grid-area: field;
    }

    .cf-cell-condition[b-k3ol98c4zv] {
        grid-area: condition;
    }

    .cf-cell-value[b-k3ol98c4zv] {
        grid-area: value;
    }

    .cf-cell-actions[b-k3ol98c4zv] {
        grid-area: actions;
    }
}

/* ---- Lookup value-picker modal ---- */
.cf-lookup-header[b-k3ol98c4zv] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
    color: var(--dbd-fg);
}

.cf-lookup-head-row[b-k3ol98c4zv] {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

/* Solid accent square glyph — flat fill, no gradient (§1). */
.cf-lookup-icon[b-k3ol98c4zv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background-color: var(--dbd-accent);
    border-radius: var(--radius-md);
    color: var(--text-on-dark) !important;
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.cf-lookup-title[b-k3ol98c4zv] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.cf-lookup-title strong[b-k3ol98c4zv] {
    font-size: 1rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-lookup-subtitle[b-k3ol98c4zv] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.cf-lookup-search[b-k3ol98c4zv] {
    display: flex;
    gap: .5rem;
    width: 100%;
}

.cf-search-box[b-k3ol98c4zv] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--dbd-border-strong);
    border-radius: var(--radius-md);
    background-color: var(--dbd-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cf-search-box:focus-within[b-k3ol98c4zv] {
    border-color: var(--dbd-accent);
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
}

.cf-search-icon[b-k3ol98c4zv] {
    color: var(--dbd-muted);
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.cf-search-input[b-k3ol98c4zv] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: 2px solid var(--border-interactive);
    outline-offset: 2px;
    background: transparent;
    color: var(--dbd-fg);
    font-size: .85rem;
}

.cf-search-input[b-k3ol98c4zv]::placeholder {
    color: var(--dbd-muted);
}

.cf-lookup-meta[b-k3ol98c4zv] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Count chip (§5 Badges / chips). */
.cf-lookup-count[b-k3ol98c4zv] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background-color: var(--dbd-subtle);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
}

.cf-lookup-count-accent[b-k3ol98c4zv] {
    background-color: var(--dbd-accent-soft);
    color: var(--dbd-accent-strong);
}

/* A standing condition of the list ("there are more values than we can show"), so it stays
   inline in the header rather than becoming a toast (§5 Action outcomes). */
.cf-lookup-warning[b-k3ol98c4zv] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: 2px 8px;
    background-color: var(--accent-warning-soft);
    border: 1px solid var(--accent-warning);
    border-radius: var(--radius-sm);
    color: var(--accent-warning-text);
    font-size: var(--text-xs);
    font-weight: 550;
}

.cf-lookup-error[b-k3ol98c4zv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem 1rem;
    color: var(--accent-danger-text);
    font-size: var(--text-base);
}

.cf-lookup-footer[b-k3ol98c4zv] {
    display: flex;
    gap: .5rem;
    width: 100%;
}

.cf-btn[b-k3ol98c4zv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: .85rem;
    font-weight: 550;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), filter var(--transition-fast);
    white-space: nowrap;
}

.cf-btn:focus-visible[b-k3ol98c4zv] {
    outline: 2px solid var(--border-interactive);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
}

.cf-btn-primary[b-k3ol98c4zv] {
    background-color: var(--dbd-accent);
    border-color: var(--dbd-accent);
    color: var(--text-on-dark) !important;
}

.cf-btn-primary:hover[b-k3ol98c4zv] {
    filter: brightness(1.05);
}

.cf-btn-ghost[b-k3ol98c4zv] {
    background-color: var(--dbd-surface);
    border-color: var(--dbd-border);
    color: var(--dbd-fg);
}

.cf-btn-ghost:hover[b-k3ol98c4zv] {
    background-color: var(--dbd-subtle);
    border-color: var(--dbd-border-strong);
}

.cf-btn-grow[b-k3ol98c4zv] {
    flex: 1;
}

/* ---- Value list ----
   The rows are AmxMultiSelectDialog's rows, reusing its markup and its global styles, so this
   list is the app's multi-select list rather than a copy of it. All that is needed here is to
   get the virtualised tree's own row chrome out of the way, and to restore the dividers the
   dialog gets for free (each row is an only child inside the tree's wrappers, so :last-child
   would otherwise match every one of them). */
.section-dialog-content-container[b-k3ol98c4zv]  .item-parent-wrapper {
    padding-bottom: 0;
}

.section-dialog-content-container[b-k3ol98c4zv]  .node-item,
.section-dialog-content-container[b-k3ol98c4zv]  .node-item:hover {
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
}

.section-dialog-content-container[b-k3ol98c4zv]  .node-item:focus-within {
    outline: 2px solid var(--border-interactive);
    outline-offset: 2px;
}

.section-dialog-content-container[b-k3ol98c4zv]  .node-item .node-item-content {
    display: flex;
    gap: 0;
    padding: 0;
}

.cf-option-list[b-k3ol98c4zv]  .multiselect-row {
    border-bottom: 1px solid var(--ms-border);
}

.cf-option-list[b-k3ol98c4zv]  .item-parent-wrapper:last-child .multiselect-row {
    border-bottom: none;
}

/* The select-all row stays put at the top of the list while the values scroll under it. */
.multiselect-row-selectall[b-k3ol98c4zv] {
    background: var(--ms-bg-hover);
    border-bottom: 2px solid var(--ms-border);
}
/* /Pages/Reports/ReportFilters/ReportFilters.razor.rz.scp.css */
/* ========== REPORT FILTERS ==========
   Follows DESIGN_LANGUAGE.md: flat fills (no gradients), one green accent, borders
   for structure, subtle shadows, token-driven so dark mode is a token re-point
   rather than per-rule overrides. */

/* ---- Theme-aware design-language tokens, scoped to this component's rendered roots ---- */
.rf-header[b-b2waycraba],
.rf-body[b-b2waycraba],
.rf-footer[b-b2waycraba],
.rf-loading[b-b2waycraba],
.rf-empty[b-b2waycraba] {
    --dbd-surface: var(--bg-card);
    --dbd-fg: var(--text-primary);
    --dbd-muted: var(--text-secondary);
    --dbd-border: var(--border-color);
    --dbd-border-strong: var(--border-interactive);
    --dbd-subtle: var(--bg-hover);
    --dbd-accent: var(--accent-success-fill);
    --dbd-accent-bright: var(--accent-success-fill);
    --dbd-accent-strong: var(--accent-success-text);
    --dbd-accent-soft: var(--bg-hover);
    --dbd-accent-ring: var(--border-interactive);
    --accent-danger-soft: var(--bg-hover);

    /* Radius · shadow · motion · type (see §3/§4) */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --transition-fast: 100ms ease;
    --transition-base: 150ms ease;
    --text-xs: .6875rem;
    --text-sm: .8125rem;
    --text-base: .875rem;
    --text-lg: 1rem;
    --text-xl: 1.125rem;
}


/* ---- Header ----
   AmxModal wraps header content in a <strong>, so weight is reset here and set
   deliberately per element instead of inherited. */
.rf-header[b-b2waycraba] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
    font-weight: 400;
}

.rf-header-content[b-b2waycraba] {
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* Solid accent square glyph — flat fill, no gradient or coloured glow (§1). */
.rf-header-icon[b-b2waycraba] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--dbd-accent);
    border-radius: var(--radius-md);
    color: var(--text-on-dark) !important;
    font-size: var(--text-base);
    flex-shrink: 0;
}

.rf-header-text[b-b2waycraba] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.rf-title[b-b2waycraba] {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--dbd-fg);
    letter-spacing: -0.01em;
}

.rf-subtitle[b-b2waycraba] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ---- Toolbar: search + scope ---- */
.rf-toolbar[b-b2waycraba] {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    flex-wrap: wrap;
}

.rf-search-box[b-b2waycraba] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1;
    min-width: 200px;
    height: 36px;
    padding: 0 10px;
    background-color: var(--dbd-surface);
    border: 1px solid var(--dbd-border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Soft accent focus ring, never a hard outline (§5 Inputs). */
.rf-search-box:focus-within[b-b2waycraba] {
    border-color: var(--dbd-accent);
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
}

.rf-search-icon[b-b2waycraba] {
    color: var(--dbd-muted);
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.rf-search-box:focus-within .rf-search-icon[b-b2waycraba] {
    color: var(--dbd-accent);
}

.rf-search-input[b-b2waycraba] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none; /* The enclosing search box supplies the focus-within ring. */
    background: transparent;
    font-size: .85rem;
    color: var(--dbd-fg);
}

.rf-search-input[b-b2waycraba]::placeholder {
    color: var(--dbd-muted);
}

.rf-search-clear[b-b2waycraba] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--dbd-muted);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}

.rf-search-clear:hover[b-b2waycraba] {
    background-color: var(--accent-danger-soft);
    color: var(--accent-danger-text);
}

.rf-search-clear:focus-visible[b-b2waycraba] {
    outline: 2px solid var(--border-interactive);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
}

/* ---- Segmented scope switch (§5 Segmented control) ----
   Real radios, clipped rather than display:none so they keep their place in the tab
   order and their arrow-key behaviour. */
.rf-segmented[b-b2waycraba] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background-color: var(--dbd-subtle);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.rf-seg-input[b-b2waycraba] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.rf-seg-label[b-b2waycraba] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 28px;
    margin: 0;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 550;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.rf-seg-input:checked + .rf-seg-label[b-b2waycraba] {
    background-color: var(--dbd-surface);
    box-shadow: var(--shadow-sm);
    color: var(--dbd-accent-strong);
    font-weight: 600;
}

.rf-seg-input:focus-visible + .rf-seg-label[b-b2waycraba] {
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
}

.rf-seg-count[b-b2waycraba] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background-color: var(--dbd-border);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
}

.rf-seg-input:checked + .rf-seg-label .rf-seg-count[b-b2waycraba] {
    background-color: var(--dbd-accent);
    color: var(--text-on-dark) !important;
}

/* ---- Body ---- */
.rf-body[b-b2waycraba] {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: .75rem;
    color: var(--dbd-fg);
}

/* ---- Filter list ----
   --rf-cols is the shared column template: the header below and every ColumnFilterItem
   row read it, which is what keeps the list aligned across two components. */
.rf-list[b-b2waycraba] {
    --rf-cols: minmax(150px, 1.1fr) minmax(150px, 1fr) minmax(220px, 1.8fr) 36px;

    border: 1px solid var(--dbd-border);
    border-radius: var(--radius-lg);
    background-color: var(--dbd-surface);
    box-shadow: var(--shadow-sm);
}

/* Column captions — quiet uppercase, the same treatment as field labels (§3). Sticky so
   the columns stay named while a long list scrolls inside the modal body. */
.rf-list-head[b-b2waycraba] {
    display: grid;
    grid-template-columns: var(--rf-cols);
    gap: .5rem .75rem;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: .5rem .75rem;
    background-color: var(--dbd-subtle);
    border-bottom: 1px solid var(--dbd-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-secondary);
}

.rf-list.is-empty .rf-list-head[b-b2waycraba] {
    display: none;
}

/* ---- No search / scope matches ---- */
.rf-no-match[b-b2waycraba] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
}

/* ---- Loading ---- */
.rf-loading[b-b2waycraba] {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.rf-loading-text[b-b2waycraba] {
    font-size: var(--text-base);
    color: var(--text-secondary);
    font-weight: 500;
}

/* ---- Empty ---- */
.rf-empty[b-b2waycraba] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    gap: .75rem;
}

.rf-empty-icon[b-b2waycraba] {
    font-size: 40px;
    color: var(--dbd-border-strong);
}

.rf-empty-text[b-b2waycraba] {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin: 0;
}

/* ---- Footer ---- */
.rf-footer[b-b2waycraba] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    flex-wrap: wrap;
}

/* The applied-filter summary can be paragraphs long on a heavily filtered report, so it is
   clamped and carries the full text as a tooltip rather than pushing the buttons off. */
.rf-summary[b-b2waycraba] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex: 1;
    min-width: 240px;
    padding: .5rem .75rem;
    background-color: var(--dbd-subtle);
    border: 1px solid var(--dbd-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--dbd-fg);
    overflow: hidden;
}

/* Quiet caption label (§3 field labels). */
.rf-summary-label[b-b2waycraba] {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.rf-summary-text[b-b2waycraba] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--dbd-accent-strong);
    font-weight: 550;
}

.rf-summary-empty[b-b2waycraba] {
    color: var(--dbd-muted);
    font-style: italic;
}

/* ---- Actions ---- */
.rf-actions[b-b2waycraba] {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
}

.rf-btn[b-b2waycraba] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: .85rem;
    font-weight: 550;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), filter var(--transition-fast);
    white-space: nowrap;
}

.rf-btn:focus-visible[b-b2waycraba] {
    outline: 2px solid var(--border-interactive);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
}

/* Primary: flat accent fill, hover brightens (§5 Buttons). */
.rf-btn-primary[b-b2waycraba] {
    background-color: var(--dbd-accent);
    border-color: var(--dbd-accent);
    color: var(--text-on-dark) !important;
}

.rf-btn-primary:hover[b-b2waycraba] {
    filter: brightness(1.05);
}

/* Ghost: surface + hairline border, hover to the subtle fill. */
.rf-btn-secondary[b-b2waycraba] {
    background-color: var(--dbd-surface);
    border-color: var(--dbd-border-strong);
    color: var(--dbd-fg);
}

.rf-btn-secondary:hover[b-b2waycraba] {
    background-color: var(--dbd-subtle);
    border-color: var(--dbd-border-strong);
}

.rf-btn-count[b-b2waycraba] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background-color: transparent;
    font-size: var(--text-xs);
    font-weight: 600;
}

/* ========== RESPONSIVE ==========
   Breakpoint matches ColumnFilterItem.razor.css, where the rows stop being table-like. */
@media (max-width: 860px) {
    .rf-list-head[b-b2waycraba] {
        display: none;
    }
}

@media (max-width: 640px) {
    .rf-header-content[b-b2waycraba] {
        align-items: flex-start;
    }

    .rf-segmented[b-b2waycraba] {
        width: 100%;
    }

    .rf-seg-label[b-b2waycraba] {
        flex: 1;
        justify-content: center;
    }

    .rf-footer[b-b2waycraba] {
        flex-direction: column;
        align-items: stretch;
    }

    .rf-actions[b-b2waycraba] {
        width: 100%;
    }

    .rf-btn[b-b2waycraba] {
        flex: 1;
    }
}

/* Distinguish saved report rules from the current visit's editable filters. */
.rf-summary[b-b2waycraba] { flex-direction: column; align-items: flex-start; gap: .25rem; min-width: 0; }
.rf-summary-label[b-b2waycraba] { flex-shrink: 1; }
.rf-summary-note[b-b2waycraba] { color: var(--text-secondary); font-size: .75rem; }
/* /Pages/Reports/ReportFilters/ReportFilterSelectionButton.razor.rz.scp.css */
.filter-selection-button[b-qg6ev3icj0] {
    flex-shrink: 0;
    min-height: 36px;
    padding: .5rem .75rem;
    border: 1px solid var(--border-interactive);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}
.filter-selection-button:hover[b-qg6ev3icj0] { background: var(--bg-hover); }
.filter-selection-button:focus-visible[b-qg6ev3icj0] {
    outline: 2px solid var(--border-interactive);
    outline-offset: 2px;
}
/* /Pages/Reports/ReportFilters/ReportFilterSurface.razor.rz.scp.css */
.parameter-filter-page[b-99ldn2ggni] {
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    color: var(--text-primary);
}
.parameter-filter-title[b-99ldn2ggni] { font-size: 1.125rem; margin: 0 0 .5rem; overflow-wrap: anywhere; }
.parameter-filter-title:focus-visible[b-99ldn2ggni] { outline: 2px solid var(--border-focus, var(--accent-primary)); outline-offset: 2px; }
.parameter-filter-help[b-99ldn2ggni] { color: var(--text-secondary); margin: 0 0 1rem; }
.parameter-filter-panel[b-99ldn2ggni] { max-width: 75rem; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card); }
.parameter-filter-header[b-99ldn2ggni], .parameter-filter-body[b-99ldn2ggni], .parameter-filter-footer[b-99ldn2ggni] { padding: 1rem; min-width: 0; }
.parameter-filter-footer[b-99ldn2ggni] { border-top: 1px solid var(--border-color); }
@media (max-width: 480px) {
    .parameter-filter-page[b-99ldn2ggni], .parameter-filter-header[b-99ldn2ggni], .parameter-filter-body[b-99ldn2ggni], .parameter-filter-footer[b-99ldn2ggni] { padding: .5rem; }
}
/* /Pages/Reports/ReportPages/ReportActionOverviewPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   Action overview

   The action matrix laid on its side: assets down, periods across. It reads as a sibling of the
   matrix on purpose - same status colours (--amx-action-*, defined once in app.css), same icons,
   same idea of a "current" period - so a customer moving between an asset's matrix and the whole
   report's overview is looking at one thing from two directions.

   Colour comes from the app tokens only (DESIGN_LANGUAGE.md): flat fills, hairline borders, no
   gradients.
   ═══════════════════════════════════════════════════════════════════════ */

.ao-root[b-3kzwxo4uqp] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background-color: var(--bg-card);
}

/* ── The control bar ─────────────────────────────────────────────────── */

.ao-bar[b-3kzwxo4uqp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
}

.ao-bar-group[b-3kzwxo4uqp] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* The bits that sit hard right - the count and the pager. */
.ao-bar-right[b-3kzwxo4uqp] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.ao-chip[b-3kzwxo4uqp],
.ao-icon-btn[b-3kzwxo4uqp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 0.7rem;
    font-size: 0.8rem;
    color: var(--text-primary);
    background-color: var(--bg-card);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.ao-icon-btn[b-3kzwxo4uqp] {
    width: 32px;
    padding: 0;
}

.ao-chip:hover:not(:disabled)[b-3kzwxo4uqp],
.ao-icon-btn:hover:not(:disabled)[b-3kzwxo4uqp] {
    background-color: var(--bg-hover);
}

.ao-chip:disabled[b-3kzwxo4uqp],
.ao-icon-btn:disabled[b-3kzwxo4uqp] {
    opacity: 0.55;
    cursor: default;
}

.ao-chip:focus-visible[b-3kzwxo4uqp],
.ao-icon-btn:focus-visible[b-3kzwxo4uqp],
.ao-select:focus-visible[b-3kzwxo4uqp],
.ao-asset-btn:focus-visible[b-3kzwxo4uqp],
.ao-chip-action:focus-visible[b-3kzwxo4uqp] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 2px;
}

/* The selected period. aria-pressed carries it for a screen reader; this is the same state seen. */
.ao-chip.is-active[b-3kzwxo4uqp] {
    color: #ffffff;
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.ao-toggle[b-3kzwxo4uqp],
.ao-filter[b-3kzwxo4uqp] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-primary);
    white-space: nowrap;
}

.ao-filter-label[b-3kzwxo4uqp] {
    color: var(--text-secondary);
}

.ao-select[b-3kzwxo4uqp] {
    min-height: 32px;
    padding: 0 0.5rem;
    font-size: 0.8rem;
    color: var(--text-primary);
    background-color: var(--bg-input);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-md, 6px);
}

.ao-progress[b-3kzwxo4uqp] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.ao-count[b-3kzwxo4uqp] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ── States ──────────────────────────────────────────────────────────── */

.ao-state[b-3kzwxo4uqp] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 1rem;
}

.ao-error[b-3kzwxo4uqp] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    max-width: 520px;
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    background-color: var(--bg-card);
    border: 1px solid var(--accent-danger-text);
    border-radius: var(--radius-md, 6px);
}

.ao-error i[b-3kzwxo4uqp] {
    color: var(--accent-danger-text);
}

/* ── The grid ────────────────────────────────────────────────────────── */

.ao-scroll[b-3kzwxo4uqp] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.ao-table[b-3kzwxo4uqp] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8rem;
}

.ao-table th[b-3kzwxo4uqp],
.ao-table td[b-3kzwxo4uqp] {
    border-bottom: 1px solid var(--border-light, var(--border-color));
    border-right: 1px solid var(--border-light, var(--border-color));
}

/* The header stays put while the rows scroll under it, and the asset column while they scroll
   sideways - with the corner pinned in both directions so it never rides over either. */
.ao-table thead th[b-3kzwxo4uqp] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.5rem 0.6rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
    background-clip: padding-box;
}

.ao-asset-head[b-3kzwxo4uqp] {
    left: 0;
    z-index: 3;
    text-align: left !important;
    min-width: 220px;
}

.ao-table thead th.ao-asset-head[b-3kzwxo4uqp] {
    position: sticky;
}

.ao-asset[b-3kzwxo4uqp] {
    position: sticky;
    left: 0;
    z-index: 1;
    padding: 0;
    font-weight: 400;
    text-align: left;
    background-color: var(--bg-card);
    background-clip: padding-box;
}

.ao-asset-btn[b-3kzwxo4uqp] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    padding: 0.4rem 0.6rem;
    text-align: left;
    color: var(--text-primary);
    background: none;
    border: 0;
    cursor: pointer;
}

.ao-asset-btn:hover[b-3kzwxo4uqp] {
    background-color: var(--bg-hover);
}

.ao-asset-name[b-3kzwxo4uqp] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ao-asset-ref[b-3kzwxo4uqp] {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.ao-period[b-3kzwxo4uqp] {
    min-width: 66px;
}

/* The period containing today, on the header and down the column. Not colour alone - the header
   is also bolder, and the column edge is a solid rule. */
.ao-table thead th.ao-period.is-current[b-3kzwxo4uqp] {
    color: var(--accent-primary-text, var(--accent-primary));
    border-bottom: 2px solid var(--accent-primary);
}

.ao-cell[b-3kzwxo4uqp] {
    padding: 0.25rem;
    vertical-align: top;
    text-align: center;
    background-color: var(--bg-card);
}

.ao-cell.is-current[b-3kzwxo4uqp] {
    background-color: var(--bg-secondary);
}

/* Where the next action is expected. The matrix marks this per action type; here it is per asset,
   so it is the cell edge rather than a fill - a fill would fight the current-period band. */
.ao-cell.is-next[b-3kzwxo4uqp] {
    box-shadow: inset 0 0 0 2px var(--amx-action-warn);
}

.ao-next-marker[b-3kzwxo4uqp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    font-size: 0.7rem;
    color: var(--amx-action-warn);
}

/* ── Action chips ────────────────────────────────────────────────────── */

.ao-chip-action[b-3kzwxo4uqp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 22px;
    margin: 1px;
    padding: 0 4px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

.ao-chip-action:hover[b-3kzwxo4uqp] {
    border-color: currentColor;
}

/* How many actions the mark stands for. Plain text in the mark's own colour rather than a filled
   badge: the marks are two to five characters wide, so there is no corner for a badge to sit in,
   and a fill here would need a second colour per status to stay readable. */
.ao-chip-count[b-3kzwxo4uqp] {
    margin-left: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    opacity: 0.85;
}

.ao-chip-count[b-3kzwxo4uqp]::before {
    content: "×";
    margin-right: 1px;
}

/* Shared with the action matrix - see --amx-action-* in app.css. */
.ao-status-ok[b-3kzwxo4uqp] { color: var(--amx-action-ok); }
.ao-status-info[b-3kzwxo4uqp] { color: var(--amx-action-info); }
.ao-status-warn[b-3kzwxo4uqp] { color: var(--amx-action-warn); }
.ao-status-danger[b-3kzwxo4uqp] { color: var(--amx-action-danger); }
.ao-status-muted[b-3kzwxo4uqp] { color: var(--text-secondary); }

/* ── Narrow screens ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .ao-bar[b-3kzwxo4uqp] {
        gap: 0.5rem;
    }

    /* The pager stops being pinned right once the bar wraps, or it ends up orphaned on a line of
       its own with the rest crowded above it. */
    .ao-bar-right[b-3kzwxo4uqp] {
        margin-left: 0;
    }

    .ao-asset-head[b-3kzwxo4uqp] {
        min-width: 150px;
    }
}
/* /Pages/Reports/ReportPages/ReportCalendarPage.razor.rz.scp.css */
/* ========== REPORT CALENDAR PAGE ==========
   Only the page's own loading and failure states — the calendar itself is AmxCalendar and
   brings its own styles. Scoped rather than a page <style> block, which would leak these
   rules to every other screen once this page had loaded (DESIGN_LANGUAGE.md §7). */

.report-calendar-loading[b-o1szutgjva] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
}

/* The date field the events are plotted on is named — and changed — by AmxCalendar's own
   .amx-cal-date-field row, so this page no longer carries a note of its own. */

.report-calendar-empty[b-o1szutgjva] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: auto;
    max-width: 420px;
    padding: 2.5rem;
    height: 100%;
    text-align: center;
}

.report-calendar-empty-icon[b-o1szutgjva] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
    color: var(--accent-danger);
    background: rgba(239, 68, 68, 0.12);
    border-radius: 50%;
}

.report-calendar-empty h3[b-o1szutgjva] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.report-calendar-empty p[b-o1szutgjva] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.report-calendar-retry-btn[b-o1szutgjva] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.55rem 1.2rem;
    font-size: 0.88rem;
    font-weight: 550;
    color: #fff;
    background: var(--accent-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: filter 0.15s ease;
}

.report-calendar-retry-btn:hover[b-o1szutgjva] {
    filter: brightness(1.08);
}
.report-calendar-status:not(:empty)[b-o1szutgjva] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--text-primary);
    background: var(--bg-secondary);
}
.report-calendar-status button[b-o1szutgjva] {
    min-height: 32px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background: var(--bg-input);
}
.report-calendar-status button:focus-visible[b-o1szutgjva] {
    outline: 2px solid var(--border-focus, var(--border-interactive));
    outline-offset: 2px;
}
/* /Pages/Reports/ReportPages/ReportChartPage.razor.rz.scp.css */
/* The chart page's Data view is the shared ChartDataGrid component now
   (Components/Charts/ChartDataGrid.razor.css), and its styles went with it - a component's scoped
   sheet is the only thing that can reach its own elements, and a copy left here would not have
   applied to anything.

   The split layout the two panes sit in is global (.amx-split-* in app.css), and the page's own
   chrome - tabs, toolbar, empty states - is in the page's <style> block. Which leaves nothing for
   this file to say. It is kept rather than deleted so the next person to add a page-level rule has
   the scoped sheet already wired up. */
/* /Pages/Reports/ReportPages/ReportDataPage.razor.rz.scp.css */
.report-data-page-container[b-1y1srgjiyd] {
    height: 100%;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
    background-color: var(--bg-card);
}

.ai-filter-message[b-1y1srgjiyd] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 10px 0;
    padding: 12px 16px;
    color: var(--accent-primary);
    background-color: var(--accent-wash);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.25);
    border-radius: var(--radius-md);
}

.ai-filter-message i[b-1y1srgjiyd] {
    font-size: 1.25rem;
}

.ai-filter-message div[b-1y1srgjiyd] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    color: var(--text-secondary);
}

.ai-filter-message strong[b-1y1srgjiyd] {
    color: var(--text-primary);
}

.did-you-mean-suggestions[b-1y1srgjiyd] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
}

.did-you-mean-chip[b-1y1srgjiyd] {
    padding: 4px 12px;
    font-size: 0.85rem;
    color: var(--accent-primary);
    background-color: var(--bg-card);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.35);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.did-you-mean-chip:hover[b-1y1srgjiyd],
.did-you-mean-chip:focus[b-1y1srgjiyd] {
    color: #fff;
    background-color: var(--accent-primary);
    outline: none;
}

.grid-tools-container[b-1y1srgjiyd] {
    display: inline-flex;
    flex-direction: column;
}

.report-data-page-container[b-1y1srgjiyd]  .data-grid-container {
    border: none !important;
    width: 100%;
    min-width: 0;
    align-self: stretch;
}

/* Share a row when the title and controls fit; wrap to the available report pane width. */
.report-data-page-container[b-1y1srgjiyd]  .data-grid-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
}

.report-data-page-container[b-1y1srgjiyd]  .header-controls {
    flex: 1 1 auto;
}

.report-data-page-container[b-1y1srgjiyd]  .header-controls,
.report-data-page-container[b-1y1srgjiyd]  .selectors-wrapper {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
}

.report-data-page-container[b-1y1srgjiyd]  .selectors-wrapper {
    flex-shrink: 1;
}

.search-wrapper[b-1y1srgjiyd] {
    display: flex;
    gap: 10px;
    max-width: 1000px;
    width: 100%;
}

.grid-search-box[b-1y1srgjiyd] {
    height: 40px;
    width: 100%;
    max-width: 250px;
}

.filters-active[b-1y1srgjiyd] {
    color: #000 !important;
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
}

.report-data-load-fail-container[b-1y1srgjiyd] {
    min-width: 250px;
    max-width: 500px;
    text-align: center;
    width: 100%;
    padding: 30px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: #ffeded;
}

.report-data-load-fail-container .error-icon-wrapper[b-1y1srgjiyd] {
    color: red;
    font-size: 30px;
}

.report-data-loading[b-1y1srgjiyd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    text-align: center;
}

.report-data-empty[b-1y1srgjiyd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 0.5rem;
    margin: auto;
    max-width: 420px;
    padding: 2.5rem;
    text-align: center;
}

.report-data-empty-icon[b-1y1srgjiyd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
    color: var(--accent-primary);
    background: var(--accent-wash);
    border-radius: 50%;
}

.report-data-empty-icon.danger[b-1y1srgjiyd] {
    color: var(--accent-danger);
    background: rgba(239, 68, 68, 0.12);
}

.report-data-empty h2[b-1y1srgjiyd] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.report-data-empty p[b-1y1srgjiyd] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.report-data-retry-btn[b-1y1srgjiyd] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.55rem 1.2rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    background: var(--accent-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: filter 0.15s ease;
}

.report-data-retry-btn:hover[b-1y1srgjiyd] {
    filter: brightness(1.08);
}


/* DataGrid's shared .report-title sets `text-wrap: nowrap`, which suits the short field labels
   the DataView grids pass in but not a report node path
   ("All Live Assets / Aids to Navigation / Beacon"). Left as-is the heading would overflow the
   header and scroll the page sideways, which the accessibility standard forbids (reflow at
   320px). Two classes + the scope attribute so this reliably wins over the ::deep rule. */
.report-title.report-grid-title[b-1y1srgjiyd] {
    text-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* The report's description, one line under the title. Muted and small so the heading still
   leads; the full text is in About this report. */
.report-grid-description[b-1y1srgjiyd] {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--text-secondary, #52525b);
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}
/* /Pages/Reports/ReportPages/ReportMapPage.razor.rz.scp.css */
.report-data-page-container[b-9axahui6c4] {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
}

/* ── Split view panes ────────────────────────────────────────────────────
   The layout, the splitter and the pane sizing are the app's shared split view
   (see the "Split view" block in app.css); these two rules are the part that is
   specific to what this page puts in the panes.

   Both children - BaseMapComponent's .map-div-wrapper and ReportDataPage's own
   container - size themselves with height:100%. That resolves against a pane
   whose height flex has already worked out, but making each pane a flex column
   whose child grows means the panes hold up even where it does not. */
.map-split-pane[b-9axahui6c4],
.data-split-pane[b-9axahui6c4] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.map-split-pane > *[b-9axahui6c4],
.data-split-pane > *[b-9axahui6c4] {
    flex: 1 1 auto;
    min-height: 0;
}

/* Without the data pane this is the whole tab, and the map takes all of it. */
.amx-split-layout:not(.is-split) > .map-split-pane[b-9axahui6c4] {
    flex: 1;
    min-height: 300px;
}

.report-map-loading[b-9axahui6c4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    text-align: center;
}

.report-map-empty[b-9axahui6c4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 0.5rem;
    margin: auto;
    max-width: 420px;
    padding: 2.5rem;
    text-align: center;
}

.report-map-empty-icon[b-9axahui6c4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
    color: var(--accent-primary);
    background: var(--accent-wash);
    border-radius: 50%;
}

.report-map-empty-icon.danger[b-9axahui6c4] {
    color: var(--accent-danger);
    background: rgba(239, 68, 68, 0.12);
}

.report-map-empty h3[b-9axahui6c4] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.report-map-empty p[b-9axahui6c4] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.report-map-retry-btn[b-9axahui6c4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.55rem 1.2rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    background: var(--accent-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: filter 0.15s ease;
}

.report-map-retry-btn:hover[b-9axahui6c4] {
    filter: brightness(1.08);
}
/* /Pages/Reports/ReportPages/ReportSchedulerToolPage.razor.rz.scp.css */
/* ========== SCHEDULER TOOL ==========
   Two panes: the queue of work waiting to be booked, and the timeline it gets booked onto. The
   timeline brings its own styles (AmxResourceTimeline); everything here is the queue and the
   frame around it. Token block matches the calendars so the two panes read as one screen
   (DESIGN_LANGUAGE.md §1/§5/§6). */

.sched[b-wyjut4hooo] {
    --dbd-surface: #ffffff;
    --dbd-bg: #fafafa;
    --dbd-fg: #18181b;
    --dbd-muted: var(--text-muted);
    --dbd-border: #e4e4e7;
    --dbd-border-strong: #d4d4d8;
    --dbd-subtle: #f4f4f5;
    --dbd-accent: #15803d;
    --dbd-accent-strong: #166534;
    --dbd-accent-soft: #f0fdf4;
    --dbd-accent-ring: rgba(21, 128, 61, 0.15);
    --text-secondary: #52525b;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .03);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, .06);
    --transition-fast: 100ms ease;
    --text-xs: .6875rem;
    --text-sm: .8125rem;
    --text-base: .875rem;

    --sched-queue-w: 330px;

    display: flex;
    gap: .75rem;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: .75rem;
    background-color: var(--dbd-bg);
    color: var(--dbd-fg);
}

[data-theme="dark"] .sched[b-wyjut4hooo] {
    --dbd-surface: #111726;
    --dbd-bg: #0c111d;
    --dbd-fg: #e6e9f2;
    --dbd-muted: #98a2b8;
    --dbd-border: #202840;
    --dbd-border-strong: #2c3552;
    --dbd-subtle: #1a2136;
    --dbd-accent: #22c55e;
    --dbd-accent-strong: #4ade80;
    --dbd-accent-soft: rgba(34, 197, 94, 0.12);
    --dbd-accent-ring: rgba(34, 197, 94, 0.25);
    --text-secondary: #98a2b8;
}

/* ---- Queue ---- */
.sched-queue[b-wyjut4hooo] {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--sched-queue-w);
    width: var(--sched-queue-w);
    min-height: 0;
    background-color: var(--dbd-surface);
    border: 1px solid var(--dbd-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.sched-queue-head[b-wyjut4hooo] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .75rem 1rem .5rem;
}

.sched-queue-title[b-wyjut4hooo] {
    margin: 0;
    font-size: var(--text-lg, 1rem);
    font-weight: 600;
}

/* "12 of 340" rather than "12": a filtered queue that only says how many it is showing looks like
   an empty backlog. */
.sched-queue-count[b-wyjut4hooo] {
    margin-left: auto;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ---- Main column: map above timeline ----
   The map is a peer of the timeline, not a view of the queue. Where the work is and who is free
   are two halves of one decision, so both are on screen at once and the queue stays a list you can
   drag from — which is how the legacy planner was laid out. */
.sched-main[b-wyjut4hooo] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.sched-map-pane[b-wyjut4hooo] {
    display: flex;
    flex-direction: column;
    /* A third of the height: enough to place work in its surroundings, not so much that the
       timeline it is being dragged onto goes off-screen. */
    flex: 0 0 34%;
    min-height: 12rem;
    background-color: var(--dbd-surface);
    border: 1px solid var(--dbd-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.sched-pane-head[b-wyjut4hooo] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--dbd-border);
}

.sched-pane-head > i[b-wyjut4hooo] {
    color: var(--dbd-accent);
}

.sched-pane-title[b-wyjut4hooo] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

.sched-pane-hint[b-wyjut4hooo] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.sched-pane-btn[b-wyjut4hooo],
.sched-map-show[b-wyjut4hooo] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .3125rem .625rem;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    background: none;
    border: 1px solid var(--dbd-border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.sched-pane-btn[b-wyjut4hooo] {
    margin-left: auto;
}

.sched-pane-btn:hover[b-wyjut4hooo],
.sched-map-show:hover[b-wyjut4hooo] {
    color: var(--dbd-fg);
    background-color: var(--dbd-subtle);
}

.sched-pane-btn:focus-visible[b-wyjut4hooo],
.sched-map-show:focus-visible[b-wyjut4hooo] {
    outline: 2px solid var(--dbd-accent);
    outline-offset: 1px;
}

/* Collapsed, the map is one line — present enough to be remembered, small enough to ignore. */
.sched-map-show[b-wyjut4hooo] {
    align-self: flex-start;
    flex: 0 0 auto;
    padding: .4375rem .75rem;
    font-size: var(--text-sm);
    background-color: var(--dbd-surface);
}

.sched-map[b-wyjut4hooo] {
    flex: 1 1 auto;
    min-height: 0;
}

.sched-map-empty[b-wyjut4hooo] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
}

.sched-queue-search[b-wyjut4hooo] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 0 1rem .625rem;
    border-bottom: 1px solid var(--dbd-border);
}

.sched-label[b-wyjut4hooo] {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-secondary);
}

.sched-search-field[b-wyjut4hooo] {
    position: relative;
    display: flex;
    align-items: center;
}

.sched-search-icon[b-wyjut4hooo] {
    position: absolute;
    left: .625rem;
    font-size: .75rem;
    color: var(--dbd-muted);
    pointer-events: none;
}

.sched-search-input[b-wyjut4hooo] {
    width: 100%;
    padding: .4375rem .625rem .4375rem 1.875rem;
    font-size: var(--text-sm);
    color: var(--dbd-fg);
    background-color: var(--dbd-surface);
    border: 1px solid var(--dbd-border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.sched-search-input[b-wyjut4hooo]::placeholder {
    color: var(--dbd-muted);
}

.sched-search-input:focus-visible[b-wyjut4hooo] {
    outline: none;
    border-color: var(--dbd-accent);
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
}

.sched-note[b-wyjut4hooo] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0;
    padding: .5rem 1rem;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    background-color: var(--dbd-subtle);
    border-bottom: 1px solid var(--dbd-border);
}

.sched-note i[b-wyjut4hooo] {
    margin-top: .1875rem;
    font-size: .75rem;
    color: var(--dbd-muted);
}

.sched-queue-list[b-wyjut4hooo] {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: .5rem;
    list-style: none;
    overflow-y: auto;
}

/* ---- Queue row ---- */
.sched-item[b-wyjut4hooo] {
    margin-bottom: .375rem;
    border: 1px solid var(--dbd-border);
    border-left: 3px solid var(--sched-item-accent, var(--dbd-accent));
    border-radius: var(--radius-md);
    background-color: var(--dbd-surface);
    /* The row is the drag handle: there is nowhere else on it to grab, and a separate grip on a
       list this dense would be most of the row. */
    cursor: grab;
    touch-action: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.sched-item:hover[b-wyjut4hooo] {
    border-color: var(--dbd-border-strong);
    box-shadow: var(--shadow-md);
}

.sched-item.is-selected[b-wyjut4hooo] {
    border-color: var(--dbd-accent);
    box-shadow: 0 0 0 2px var(--dbd-accent-ring);
}

.sched-item.is-dragging[b-wyjut4hooo] {
    opacity: .4;
}

.sched-item-btn[b-wyjut4hooo] {
    display: flex;
    flex-direction: column;
    gap: .1875rem;
    width: 100%;
    padding: .5rem .625rem;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--radius-md);
    cursor: inherit;
}

.sched-item-btn:focus-visible[b-wyjut4hooo] {
    outline: 2px solid var(--dbd-accent);
    outline-offset: -2px;
}

.sched-item-title[b-wyjut4hooo] {
    font-size: var(--text-sm);
    font-weight: 550;
    line-height: 1.3;
}

.sched-item-meta[b-wyjut4hooo] {
    display: flex;
    align-items: center;
    gap: .375rem;
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.sched-item-est[b-wyjut4hooo] {
    padding: .0625rem .3125rem;
    font-weight: 600;
    background-color: var(--dbd-subtle);
    border-radius: 999px;
}

.sched-item-field[b-wyjut4hooo] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 10rem;
}

.sched-queue-empty[b-wyjut4hooo] {
    padding: 1.5rem .75rem;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-align: center;
}

/* ---- Book panel ----
   The keyboard and single-pointer route to what dragging does (WCAG 2.2 SC 2.5.7). Docked to the
   bottom of the queue so it is next to the row it is booking. */
.sched-book[b-wyjut4hooo] {
    flex: 0 0 auto;
    padding: .75rem 1rem;
    border-top: 1px solid var(--dbd-border);
    background-color: var(--dbd-subtle);
}

.sched-book-title[b-wyjut4hooo] {
    margin: 0 0 .625rem;
    font-size: var(--text-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sched-book-field[b-wyjut4hooo] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-bottom: .625rem;
}

.sched-book-actions[b-wyjut4hooo] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

.sched-btn[b-wyjut4hooo] {
    padding: .375rem .75rem;
    font-size: var(--text-sm);
    font-weight: 550;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.sched-btn:focus-visible[b-wyjut4hooo] {
    outline: 2px solid var(--dbd-accent);
    outline-offset: 1px;
}

.sched-btn-ghost[b-wyjut4hooo] {
    color: var(--text-secondary);
    background: none;
    border: 1px solid var(--dbd-border-strong);
}

.sched-btn-ghost:hover[b-wyjut4hooo] {
    color: var(--dbd-fg);
    background-color: var(--dbd-surface);
}

.sched-btn-primary[b-wyjut4hooo] {
    color: #fff;
    background-color: var(--dbd-accent);
    border: 1px solid var(--dbd-accent);
}

.sched-btn-primary:hover:not(:disabled)[b-wyjut4hooo] {
    background-color: var(--dbd-accent-strong);
    border-color: var(--dbd-accent-strong);
}

.sched-btn-primary:disabled[b-wyjut4hooo] {
    opacity: .5;
    cursor: default;
}

/* ---- Timeline pane ---- */
.sched-timeline[b-wyjut4hooo] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

/* ---- Narrow screens ----
   Below this the two panes cannot sit side by side and still leave the timeline usable, so they
   stack: the queue becomes a short scrolling band above the grid. Dragging between them still
   works, because the drop targets are hit-tested rather than positioned. */
@media (max-width: 1000px) {
    .sched[b-wyjut4hooo] {
        flex-direction: column;
    }

    .sched-queue[b-wyjut4hooo] {
        flex: 0 0 auto;
        width: 100%;
        max-height: 40vh;
    }

    .sched-timeline[b-wyjut4hooo] {
        min-height: 24rem;
    }
}
/* /Pages/Reports/ReportPrint/ReportPrintModal.razor.rz.scp.css */
/* ==========================================================================
   Print Report dialog
   --------------------------------------------------------------------------
   The legacy Data Export screen on the app's design language, inside the
   shared AmxModal chrome: flat section cards, hairline seams, one green
   accent. Colours come from the global semantic tokens, which already carry
   their dark-theme values - so no hard-coded colours and no dark overrides.
   The modal supplies the header, body and footer surfaces; nothing here
   restates them.
   ========================================================================== */

/* ===== HEADER ===== */

.rp-head[b-x8y6pwevy0] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.rp-head__text[b-x8y6pwevy0] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.rp-head__title[b-x8y6pwevy0] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Quiet caption under the title - says which report is being printed. */
.rp-head__subtitle[b-x8y6pwevy0] {
    max-width: 48ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* ===== BODY ===== */

/* Declared on the body root: AmxModal renders header, body and footer as separate subtrees. */
.rp-body[b-x8y6pwevy0] {
    --rp-focus-ring: 0 0 0 3px rgba(21, 128, 61, .25);

    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-primary);
}

[data-theme="dark"] .rp-body[b-x8y6pwevy0] {
    --rp-focus-ring: 0 0 0 3px rgba(34, 197, 94, .35);
}

.rp-state[b-x8y6pwevy0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 320px;
    text-align: center;
}

.rp-state--empty[b-x8y6pwevy0] {
    max-width: 420px;
    margin: 0 auto;
}

.rp-empty-icon[b-x8y6pwevy0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
    color: var(--accent-warning-text);
    background: color-mix(in srgb, #f59e0b 12%, transparent);
    border-radius: 50%;
}

.rp-state h2[b-x8y6pwevy0] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.rp-state p[b-x8y6pwevy0] {
    margin: 0;
    color: var(--text-secondary);
}

.rp-count[b-x8y6pwevy0] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.rp-count strong[b-x8y6pwevy0] {
    color: var(--text-primary);
    font-weight: 600;
}

/* Standing conditions: flat tinted cards with a hairline, never a Bootstrap alert. */
.rp-alert[b-x8y6pwevy0] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    font-size: 0.8125rem;
    color: var(--text-primary);
}

.rp-alert i[b-x8y6pwevy0] {
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.rp-alert div[b-x8y6pwevy0] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.rp-alert strong[b-x8y6pwevy0] {
    font-weight: 600;
}

.rp-alert.warning[b-x8y6pwevy0] {
    border-color: color-mix(in srgb, #f59e0b 45%, var(--border-color));
    background: color-mix(in srgb, #f59e0b 10%, var(--bg-card));
}

.rp-alert.warning i[b-x8y6pwevy0] {
    color: var(--accent-warning-text);
}

.rp-alert.info i[b-x8y6pwevy0] {
    color: var(--text-secondary);
}

/* ===== FOOTER ===== */

/* Close sits at the start of the footer and the three ways to produce the document at the end. */
.rp-close[b-x8y6pwevy0] {
    margin-right: auto;
}

.rp-actions[b-x8y6pwevy0] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.btn.dbd-btn.rp-action[b-x8y6pwevy0],
.btn.dbd-btn.rp-close[b-x8y6pwevy0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 0.85rem;
    font-size: 0.85rem;
    font-weight: 550;
}

.btn.dbd-btn.rp-action:disabled[b-x8y6pwevy0],
.btn.dbd-btn.rp-close:disabled[b-x8y6pwevy0] {
    opacity: 0.5;
    cursor: default;
}

/* ===== COLUMNS AND CARDS ===== */

.rp-columns[b-x8y6pwevy0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 992px) {
    .rp-columns[b-x8y6pwevy0] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rp-right[b-x8y6pwevy0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.rp-card[b-x8y6pwevy0] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.rp-card-head[b-x8y6pwevy0] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.rp-card-head h2[b-x8y6pwevy0] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.rp-card-icon[b-x8y6pwevy0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--accent-success-fill);
    color: #ffffff;
    font-size: 0.75rem;
    flex-shrink: 0;
}

[data-theme="dark"] .rp-card-icon[b-x8y6pwevy0] {
    color: #0f1524;
}

.rp-card-hint[b-x8y6pwevy0] {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.rp-pill[b-x8y6pwevy0] {
    margin-left: auto;
}

.rp-card-body[b-x8y6pwevy0] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}

.rp-settings[b-x8y6pwevy0] {
    gap: 1rem;
}

.rp-note[b-x8y6pwevy0] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.rp-note strong[b-x8y6pwevy0] {
    color: var(--text-primary);
    font-weight: 600;
}

.rp-muted[b-x8y6pwevy0] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* The toggle shelf - a tinted band that separates the switches from the list beneath. */
.rp-shelf[b-x8y6pwevy0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-secondary);
    border-radius: 8px;
}

/* ===== CHECKBOXES AND RADIOS ===== */

.rp-check[b-x8y6pwevy0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 24px;
    list-style: none;
}

.rp-check input[type="checkbox"][b-x8y6pwevy0],
.rp-check input[type="radio"][b-x8y6pwevy0] {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--accent-success-fill);
    cursor: pointer;
}

.rp-check input:focus-visible[b-x8y6pwevy0] {
    outline: none;
    box-shadow: var(--rp-focus-ring);
    border-radius: 3px;
}

.rp-check input:disabled[b-x8y6pwevy0],
.rp-check input:disabled + label[b-x8y6pwevy0] {
    cursor: default;
    opacity: 0.55;
}

.rp-check label[b-x8y6pwevy0] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
    overflow-wrap: anywhere;
}

.rp-list[b-x8y6pwevy0],
.rp-tree[b-x8y6pwevy0],
.rp-tree-children[b-x8y6pwevy0] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The column list is the one region that scrolls inside the dialog's own scrolling body: capped, so
   a report with dozens of columns does not push Page Settings out of reach. */
.rp-list[b-x8y6pwevy0] {
    max-height: 26rem;
    padding: 0.15rem 0.5rem 0.15rem 0.75rem;
    overflow-y: auto;
    border-radius: 6px;
}

.rp-list:focus-visible[b-x8y6pwevy0] {
    outline: none;
    box-shadow: var(--rp-focus-ring);
}

/* ===== FIELDSETS ===== */

.rp-setting[b-x8y6pwevy0],
.rp-fieldset[b-x8y6pwevy0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.rp-setting-row[b-x8y6pwevy0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .rp-setting-row[b-x8y6pwevy0] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rp-label[b-x8y6pwevy0] {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.rp-radios[b-x8y6pwevy0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
}

.rp-fieldset:disabled .rp-label[b-x8y6pwevy0] {
    opacity: 0.55;
}

.rp-select[b-x8y6pwevy0] {
    max-width: 220px;
}

/* An in-sentence link that is a button, so it is keyboard-reachable and announced as an action. */
.rp-link[b-x8y6pwevy0] {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 550;
    color: var(--accent-success-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.rp-link:hover[b-x8y6pwevy0] {
    color: var(--accent-success-fill);
}

.rp-link:focus-visible[b-x8y6pwevy0] {
    outline: none;
    box-shadow: var(--rp-focus-ring);
    border-radius: 4px;
}

.rp-link:disabled[b-x8y6pwevy0] {
    opacity: 0.55;
    cursor: default;
}

/* ===== MARGINS ===== */

.rp-margins[b-x8y6pwevy0] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .rp-margins[b-x8y6pwevy0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.rp-margin[b-x8y6pwevy0] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.rp-margin label[b-x8y6pwevy0] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--text-primary);
}

.rp-input[b-x8y6pwevy0] {
    width: 100%;
    height: 36px;
    padding: 8px 10px;
    font-size: 0.85rem;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-interactive);
    border-radius: 8px;
}

.rp-input[b-x8y6pwevy0]::placeholder {
    color: var(--text-muted);
}

.rp-input:focus[b-x8y6pwevy0] {
    outline: none;
    border-color: var(--accent-success-fill);
    box-shadow: var(--rp-focus-ring);
}

.rp-input:disabled[b-x8y6pwevy0] {
    opacity: 0.55;
    cursor: default;
}

.rp-margin-hint[b-x8y6pwevy0] {
    font-size: 0.75rem;
}

/* ===== CHART TREE ===== */

.rp-charts-toggle[b-x8y6pwevy0] {
    margin-top: 0.25rem;
}

.rp-tree[b-x8y6pwevy0] {
    padding-left: 0.25rem;
}

.rp-tree-item[b-x8y6pwevy0] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rp-tree-row[b-x8y6pwevy0] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.rp-tree-toggle[b-x8y6pwevy0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    flex-shrink: 0;
}

.rp-tree-toggle:hover[b-x8y6pwevy0] {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.rp-tree-toggle:focus-visible[b-x8y6pwevy0] {
    outline: none;
    border-color: var(--accent-success-fill);
    box-shadow: var(--rp-focus-ring);
}

.rp-tree-children[b-x8y6pwevy0] {
    padding-left: 2.6rem;
}

.rp-tree-children[hidden][b-x8y6pwevy0] {
    display: none;
}
/* /Pages/Settings/AdvancedCustomisation/ApplyCustomUpdates.razor.rz.scp.css */
.custom-update-header[b-bo9kzfdzvn] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.custom-update-header p[b-bo9kzfdzvn] { margin: 0; color: var(--text-secondary); }
.custom-update-header a[b-bo9kzfdzvn] { color: var(--accent-success-text); padding: .5rem; }
.custom-update-page[b-bo9kzfdzvn] { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 12px; }
.custom-update-page header[b-bo9kzfdzvn] { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-color); }
.custom-update-page h2[b-bo9kzfdzvn] { margin: 0 0 .5rem; font-size: 1rem; }
.custom-update-page p[b-bo9kzfdzvn] { margin: 0; color: var(--text-secondary); font-size: .875rem; }
.custom-update-body[b-bo9kzfdzvn] { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: 1.25rem; }
.custom-update-field[b-bo9kzfdzvn] { display: flex; flex-direction: column; gap: .5rem; width: 100%; max-width: 40rem; min-width: 0; }
.custom-update-field label[b-bo9kzfdzvn] { font-size: .875rem; font-weight: 600; }
.custom-update-actions[b-bo9kzfdzvn] { display: flex; gap: .5rem; flex-wrap: wrap; }
.custom-update-preview[b-bo9kzfdzvn] { display: inline-flex; align-items: center; gap: .5rem; min-height: 36px; padding: .5rem .85rem; border: 1px solid var(--field-border); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font-weight: 600; }
.custom-update-preview:disabled[b-bo9kzfdzvn] { color: var(--text-secondary); border-color: var(--border-color); cursor: default; }
.custom-update-field input[b-bo9kzfdzvn], .custom-update-field[b-bo9kzfdzvn]  input { width: 100%; min-width: 0; box-sizing: border-box; min-height: 36px; padding: .5rem; border: 1px solid var(--field-border); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); }
.custom-update-apply[b-bo9kzfdzvn] { display: inline-flex; align-items: center; gap: .5rem; min-height: 36px; padding: .5rem .85rem; border: 1px solid var(--accent-success-fill); border-radius: 8px; background: var(--accent-success-fill); color: var(--text-on-dark); font-weight: 600; }
.custom-update-apply:disabled[b-bo9kzfdzvn] { background: var(--bg-hover); color: var(--text-secondary); border-color: var(--border-color); cursor: default; }
.custom-update-page .custom-update-apply > span[b-bo9kzfdzvn] { color: inherit; font: inherit; }
.custom-update-page .custom-update-apply > i[b-bo9kzfdzvn] { color: inherit; }
.custom-update-page :focus-visible[b-bo9kzfdzvn], .custom-update-header a:focus-visible[b-bo9kzfdzvn], .custom-update-field[b-bo9kzfdzvn]  input:focus-visible { outline: 2px solid var(--accent-success-text); outline-offset: 3px; }
.custom-update-progress[b-bo9kzfdzvn] { display: flex; flex-direction: column; gap: .5rem; width: 100%; max-width: 40rem; }
.custom-update-progress progress[b-bo9kzfdzvn] { width: 100%; height: 1rem; accent-color: var(--accent-success-fill); }
/* /Pages/Settings/AdvancedCustomisation/CustomisationHealthCheck.razor.rz.scp.css */
.health-page[b-ldcyr3oknw], .health-header[b-ldcyr3oknw] { color: var(--text-primary); font-size: .875rem; }
.health-page[b-ldcyr3oknw] { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.health-header[b-ldcyr3oknw], .health-toolbar[b-ldcyr3oknw] { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.health-header[b-ldcyr3oknw] { justify-content: space-between; }
.health-header p[b-ldcyr3oknw], .health-section p[b-ldcyr3oknw] { color: var(--text-secondary); margin: 0; }
.health-section[b-ldcyr3oknw] { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; min-width: 0; }
.health-section header[b-ldcyr3oknw] { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-color); }
.health-section h2[b-ldcyr3oknw] { font-size: 1rem; font-weight: 600; margin: 0 0 .25rem; }
.health-icon[b-ldcyr3oknw] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; background: var(--accent-success-fill); color: var(--text-on-dark); }
.health-body[b-ldcyr3oknw] { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; min-width: 0; }
.health-fields[b-ldcyr3oknw] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.health-body label[b-ldcyr3oknw] { display: block; font-weight: 600; font-size: .8125rem; margin-bottom: .25rem; }
.health-body input[b-ldcyr3oknw], .health-body select[b-ldcyr3oknw] { min-height: 36px; width: 100%; padding: .5rem .75rem; border: 1px solid var(--border-interactive); border-radius: 8px; color: var(--text-primary); background: var(--bg-input); }
.health-button[b-ldcyr3oknw] { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 36px; padding: .5rem .75rem; font: inherit; font-weight: 550; border: 1px solid var(--border-interactive); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); text-decoration: none; }
.health-button:hover:not(:disabled)[b-ldcyr3oknw] { background: var(--bg-hover); color: var(--text-primary); }
.health-primary[b-ldcyr3oknw], .health-primary:hover:not(:disabled)[b-ldcyr3oknw] { background: var(--accent-success-fill); color: var(--text-on-dark); }
.health-button:disabled[b-ldcyr3oknw] { opacity: .5; cursor: default; }
.health-button:focus-visible[b-ldcyr3oknw], .health-body input:focus-visible[b-ldcyr3oknw], .health-body select:focus-visible[b-ldcyr3oknw], .health-table-scroll:focus-visible[b-ldcyr3oknw] { outline: 2px solid var(--accent-success-text); outline-offset: 3px; }
.health-status[b-ldcyr3oknw] { min-height: 1.25rem; }
.health-body progress[b-ldcyr3oknw] { width: 100%; height: 1rem; accent-color: var(--accent-success-fill); }
.health-table-scroll[b-ldcyr3oknw] { overflow-x: auto; max-width: 100%; }
.health-body table[b-ldcyr3oknw] { width: 100%; border-collapse: collapse; }
.health-body caption[b-ldcyr3oknw] { text-align: left; color: var(--text-secondary); }
.health-body th[b-ldcyr3oknw], .health-body td[b-ldcyr3oknw] { padding: .75rem; border-bottom: 1px solid var(--border-color); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.health-body th[b-ldcyr3oknw] { background: var(--bg-hover); font-weight: 600; }
.health-body td:nth-child(4)[b-ldcyr3oknw] { min-width: 16rem; }
.health-body th:nth-child(5)[b-ldcyr3oknw], .health-body td:nth-child(5)[b-ldcyr3oknw] { min-width: 7rem; white-space: nowrap; overflow-wrap: normal; }
.health-editor-link[b-ldcyr3oknw] { display: inline-flex; flex-direction: column; min-height: 24px; color: var(--accent-success-text); text-decoration: underline; white-space: nowrap; }
.health-editor-link span[b-ldcyr3oknw] { color: var(--text-secondary); font-size: .75rem; }
.health-editor-link:focus-visible[b-ldcyr3oknw] { outline: 2px solid var(--accent-success-text); outline-offset: 3px; }
.health-input-group[b-ldcyr3oknw] { display: flex; gap: .25rem; }
.health-input-group input[b-ldcyr3oknw] { min-width: 0; }
.health-input-group button[b-ldcyr3oknw] { flex-shrink: 0; }
.health-picker[b-ldcyr3oknw] { width: min(36rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--border-interactive); border-radius: 12px; background: var(--bg-card); color: var(--text-primary); font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", sans-serif); font-size: .875rem; line-height: 1.5; }
.health-picker input[b-ldcyr3oknw] { box-sizing: border-box; font: inherit; }
.health-picker h2[b-ldcyr3oknw] { margin: 0; font-size: 1.125rem; }
.health-picker-list[b-ldcyr3oknw] { display: flex; flex-direction: column; gap: .5rem; max-height: 50dvh; overflow-y: auto; padding: .25rem; }
.health-picker-item[b-ldcyr3oknw] { flex: 0 0 auto; width: 100%; box-sizing: border-box; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .125rem; padding: .625rem .75rem; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.health-picker-item strong[b-ldcyr3oknw] { max-width: 100%; font-size: .8125rem; font-weight: 600; line-height: 1.5; }
.health-picker-item span[b-ldcyr3oknw] { max-width: 100%; color: var(--text-secondary); font-size: .8125rem; font-weight: 400; line-height: 1.5; }
@media (max-width: 480px) { .health-body[b-ldcyr3oknw], .health-section header[b-ldcyr3oknw] { padding: .75rem; } .health-toolbar > div[b-ldcyr3oknw] { width: 100%; } }
/* /Pages/Settings/AdvancedCustomisation/DataFieldUsage.razor.rz.scp.css */
.usage-page[b-vtawxtcadz], .usage-header[b-vtawxtcadz] { color: var(--text-primary); }
.usage-header[b-vtawxtcadz] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.usage-header p[b-vtawxtcadz] { margin: 0; }
.usage-header a[b-vtawxtcadz] { color: var(--text-primary); text-decoration: underline; }
.usage-page[b-vtawxtcadz] { max-width: 70rem; }
.usage-page section[b-vtawxtcadz] { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; }
.usage-page h2[b-vtawxtcadz] { font-size: 1.125rem; margin-top: 0; }
.usage-page p[b-vtawxtcadz] { color: var(--text-secondary); line-height: 1.6; overflow-wrap: anywhere; }
.usage-page fieldset[b-vtawxtcadz] { border: 1px solid var(--border-color); border-radius: 8px; padding: 1rem; margin: 1rem 0; min-width: 0; }
.usage-page legend[b-vtawxtcadz] { font-size: 1rem; font-weight: 600; padding: 0 .5rem; width: auto; float: none; }
.usage-page label[b-vtawxtcadz] { display: block; font-weight: 600; margin-bottom: .5rem; }
.usage-page input:not([type=checkbox])[b-vtawxtcadz], .usage-page select[b-vtawxtcadz] { width: 100%; min-width: 0; min-height: 36px; color: var(--text-primary); background: var(--bg-input); border: 1px solid var(--border-interactive); border-radius: 6px; padding: .5rem; }
.usage-page .usage-check[b-vtawxtcadz] { display: flex; gap: .75rem; align-items: center; }
.usage-check input[b-vtawxtcadz] { width: 24px; height: 24px; flex-shrink: 0; }
.usage-filter[b-vtawxtcadz] { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: end; gap: 1rem; margin-bottom: 1rem; }
.usage-filter > div[b-vtawxtcadz] { min-width: 0; }
.usage-page button[b-vtawxtcadz] { border: 1px solid var(--border-interactive); border-radius: 6px; color: var(--text-primary) !important; background: var(--bg-card); min-height: 36px; padding: .5rem 1rem; cursor: pointer; }
.usage-page button.usage-primary[b-vtawxtcadz], .usage-page button.usage-primary:hover:enabled[b-vtawxtcadz] { background: var(--accent-success-fill); color: var(--text-on-dark) !important; border-color: var(--accent-success-fill); }
.usage-page button:disabled[b-vtawxtcadz] { cursor: default; opacity: .6; }
.usage-page button:hover:enabled[b-vtawxtcadz] { background: var(--bg-hover); color: var(--text-primary); }
.usage-page :is(button, input, select):focus-visible[b-vtawxtcadz], .usage-header a:focus-visible[b-vtawxtcadz] { outline: 2px solid var(--accent-success-text); outline-offset: 3px; }
.usage-actions[b-vtawxtcadz] { display: flex; flex-wrap: wrap; gap: .75rem; }
.usage-status[b-vtawxtcadz] { margin-top: 1rem; }
.usage-status progress[b-vtawxtcadz] { width: 100%; accent-color: var(--accent-success-fill); }
@media (max-width: 700px) { .usage-filter[b-vtawxtcadz] { grid-template-columns: 1fr; } .usage-page section[b-vtawxtcadz] { padding: 1rem; } }
/* /Pages/Settings/AdvancedCustomisation/EntityDetail.razor.rz.scp.css */
/* ---- Design-language tokens (light), scoped to this page's rendered roots ---- */
.entity-detail-layout[b-q34g0iuruq],
.breadcrumb-nav[b-q34g0iuruq],
.loading-container[b-q34g0iuruq] {
    --dbd-bg: #fafafa;
    --dbd-surface: #ffffff;
    --dbd-fg: #18181b;
    --dbd-muted: var(--text-muted);
    --dbd-border: #e4e4e7;
    --dbd-border-strong: #d4d4d8;
    --dbd-subtle: #f4f4f5;
    --dbd-accent: #15803d;
    --dbd-accent-bright: #16a34a;
    --dbd-accent-strong: #166534;
    --dbd-accent-soft: #f0fdf4;
    --text-secondary: #52525b;
    --accent-warning: #b45309;
    --accent-danger: #dc2626;
    --dbd-accent-ring: rgba(21, 128, 61, 0.15);
    /* Card / tile language shared with the main home sidebar */
    --dbd-raised: #ffffff;
    --dbd-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    --dbd-shadow-card: 0 1px 3px rgba(16, 24, 40, 0.06);
    --dbd-radius: 14px;
}

[data-theme="dark"] .entity-detail-layout[b-q34g0iuruq],
[data-theme="dark"] .breadcrumb-nav[b-q34g0iuruq],
[data-theme="dark"] .loading-container[b-q34g0iuruq] {
    --dbd-bg: #0f1524;
    --dbd-surface: #111726;
    --dbd-fg: #e6e9f2;
    --dbd-muted: #98a2b8;
    --dbd-border: #202840;
    --dbd-border-strong: #2c3552;
    --dbd-subtle: #1a2136;
    --dbd-accent: #22c55e;
    --dbd-accent-bright: #4ade80;
    --dbd-accent-strong: #4ade80;
    --dbd-accent-soft: rgba(34, 197, 94, 0.12);
    --text-secondary: #98a2b8;
    --accent-warning: #fbbf24;
    --accent-danger: #f87171;
    --dbd-accent-ring: rgba(34, 197, 94, 0.25);
    --dbd-raised: #161d30;
    --dbd-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    --dbd-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.45);
    --dbd-radius: 14px;
}

/* Layout */
.entity-detail-layout[b-q34g0iuruq] {
    display: flex;
    gap: 0;
    height: 100%;
    min-height: 0;
    color: var(--dbd-fg);
}

.loading-container[b-q34g0iuruq] {
    padding: 2rem;
    text-align: center;
    color: var(--dbd-muted);
}

/* Breadcrumb */
.ed-header[b-q34g0iuruq] {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.ed-header > .breadcrumb-nav[b-q34g0iuruq] {
    flex: 1 1 auto;
}

.ed-header-actions[b-q34g0iuruq] {
    flex: 0 1 auto;
    min-width: 0;
    margin-inline-start: auto;
    justify-content: flex-end;
}

.breadcrumb-nav[b-q34g0iuruq] {
    min-width: 0;
    overflow-x: auto;
    font-size: 0.875rem;
}

.breadcrumb-list[b-q34g0iuruq] {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.breadcrumb-list li[b-q34g0iuruq] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.breadcrumb-link[b-q34g0iuruq] {
    color: var(--dbd-accent);
    text-decoration: none;
    font-weight: 550;
}

.breadcrumb-link:hover[b-q34g0iuruq] {
    text-decoration: underline;
}

.breadcrumb-link:focus-visible[b-q34g0iuruq] {
    outline: none;
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
    border-radius: 4px;
}

.breadcrumb-separator[b-q34g0iuruq] {
    color: var(--dbd-muted);
    margin: 0 0.125rem;
}

.breadcrumb-current[b-q34g0iuruq] {
    color: var(--dbd-fg);
    font-weight: 600;
}

/* Sidebar — card + tile language, mirroring the main home navigation panel */
.sidebar[b-q34g0iuruq] {
    width: 280px;
    min-width: 280px;
    border-right: 1px solid var(--dbd-border);
    overflow-y: auto;
    background-color: var(--dbd-bg);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sidebar-card[b-q34g0iuruq] {
    background-color: var(--dbd-surface);
    border: 1px solid var(--dbd-border);
    border-radius: var(--dbd-radius);
    box-shadow: var(--dbd-shadow-card);
    padding: 0.75rem;
    flex: 0 0 auto;
}

.sidebar-entity-card[b-q34g0iuruq] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.sidebar-entity-icon[b-q34g0iuruq] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dbd-accent-soft);
    color: var(--dbd-accent-strong);
    font-size: 0.875rem;
}

.sidebar-entity-text[b-q34g0iuruq] {
    min-width: 0;
}

.sidebar-title[b-q34g0iuruq] {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
    color: var(--dbd-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-entity-key[b-q34g0iuruq] {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    color: var(--dbd-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-card-title[b-q34g0iuruq] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dbd-muted);
    margin-bottom: 0.5rem;
}

.sidebar-nav[b-q34g0iuruq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.sidebar-item[b-q34g0iuruq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.625rem;
    background-color: var(--dbd-raised);
    border: 1px solid var(--dbd-border);
    border-radius: 12px;
    box-shadow: var(--dbd-shadow);
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--dbd-fg);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sidebar-item:hover[b-q34g0iuruq] {
    background-color: var(--dbd-subtle);
    border-color: var(--dbd-border-strong);
}

.sidebar-item:focus-visible[b-q34g0iuruq] {
    outline: none;
    border-color: var(--dbd-accent);
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
}

.sidebar-item.active[b-q34g0iuruq] {
    background-color: var(--dbd-accent-soft);
    border-color: var(--dbd-accent);
    color: var(--dbd-accent-strong);
    font-weight: 600;
}

.sidebar-item.active:hover[b-q34g0iuruq] {
    background-color: var(--dbd-accent-soft);
}

.sidebar-item-icon[b-q34g0iuruq] {
    flex: 0 0 auto;
    width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dbd-muted);
    font-size: 0.8125rem;
}

.sidebar-item.active .sidebar-item-icon[b-q34g0iuruq],
.sidebar-item.active .sidebar-item-chevron[b-q34g0iuruq] {
    color: var(--dbd-accent-strong);
}

.sidebar-item-text[b-q34g0iuruq] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-item-chevron[b-q34g0iuruq] {
    flex: 0 0 auto;
    font-size: 0.625rem;
}

/* Main Content */
.main-content[b-q34g0iuruq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1rem 1.5rem;
    min-width: 0;
    background-color: var(--dbd-bg);
    color: var(--dbd-fg);
}

.main-content-flex[b-q34g0iuruq] {
    display: flex;
    flex-direction: column;
}

/* Section title stays pinned; the panel below fills remaining height */
.main-content > .section-title[b-q34g0iuruq] {
    flex: 0 0 auto;
}

/* Intro notes / mapping view tabs sit above the grid at a fixed height */
.main-content > .alert[b-q34g0iuruq],
.main-content > .mapping-view-tabs[b-q34g0iuruq],
.main-content > .filter-panel[b-q34g0iuruq] {
    flex: 0 0 auto;
}

/* Single-grid panels span the full available height (grid scrolls internally,
   empty grids show a clear centered "No Data Found" state). */
.main-content > .grid-panel[b-q34g0iuruq] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.main-content > .grid-panel > .filter-panel[b-q34g0iuruq],
.main-content > .grid-panel > .grid-toolbar[b-q34g0iuruq] {
    flex: 0 0 auto;
}

.main-content > .grid-panel > .table-container[b-q34g0iuruq] {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

/* Diagram wrapper already flexes; details panel scrolls if long */
.main-content > .details-panel[b-q34g0iuruq] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Data Fields tab — grid fills remaining height beneath toolbar + filters */
.df-fields-panel[b-q34g0iuruq] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.df-fields-panel > .section-toolbar[b-q34g0iuruq],
.df-fields-panel > .filter-panel[b-q34g0iuruq] {
    flex: 0 0 auto;
}

.df-fields-panel > .grid-panel[b-q34g0iuruq] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.df-fields-panel > .grid-panel > .grid-toolbar[b-q34g0iuruq] {
    flex: 0 0 auto;
}

.df-fields-panel > .grid-panel > .table-container[b-q34g0iuruq] {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

.main-content:focus[b-q34g0iuruq] {
    outline: none;
}

.section-title[b-q34g0iuruq] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--dbd-border);
}

.section-container[b-q34g0iuruq] {
    margin-bottom: 1rem;
}

/* ---- Details tab ---- */
.details-panel[b-q34g0iuruq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.details-panel:focus-visible[b-q34g0iuruq] {
    outline: 2px solid var(--border-interactive);
    outline-offset: -2px;
}

.ed-card[b-q34g0iuruq] {
    background-color: var(--dbd-surface);
    border: 1px solid var(--dbd-border);
    border-radius: var(--dbd-radius);
    box-shadow: var(--dbd-shadow-card);
    overflow: hidden;
    flex: 0 0 auto;
}

.ed-identity-card[b-q34g0iuruq] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.125rem 1.25rem;
}

.ed-identity-icon[b-q34g0iuruq] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dbd-accent-soft);
    color: var(--dbd-accent-strong);
    font-size: 1.125rem;
}

.ed-identity-text[b-q34g0iuruq] {
    flex: 1 1 auto;
    min-width: 0;
}

.ed-identity-name[b-q34g0iuruq] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dbd-fg);
}

.ed-identity-meta[b-q34g0iuruq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.3rem;
}

.ed-identity-plural[b-q34g0iuruq] {
    font-size: 0.75rem;
    color: var(--dbd-muted);
}

.ed-identity-description[b-q34g0iuruq] {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    max-width: 60ch;
}

.ed-identity-badges[b-q34g0iuruq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    flex: 0 1 auto;
    justify-content: flex-end;
    max-width: 24rem;
}

.ed-badge[b-q34g0iuruq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--dbd-border);
    background-color: var(--dbd-subtle);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 550;
    white-space: normal;
}

.ed-badge-on[b-q34g0iuruq] {
    background-color: var(--dbd-accent-soft);
    border-color: var(--dbd-accent);
    color: var(--dbd-accent-strong);
}

.ed-badge-off[b-q34g0iuruq] {
    text-decoration: line-through;
}

.ed-card-head[b-q34g0iuruq] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--dbd-border);
    background-color: var(--dbd-subtle);
}

.ed-card-icon[b-q34g0iuruq] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dbd-accent-soft);
    color: var(--dbd-accent-strong);
    font-size: 0.8125rem;
}

.ed-card-title[b-q34g0iuruq] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dbd-fg);
}

.ed-card-body[b-q34g0iuruq] {
    padding: 1.25rem;
}

.ed-code[b-q34g0iuruq] {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    background-color: var(--dbd-subtle);
    border: 1px solid var(--dbd-border);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* Fact list — label above value, wrapping into columns */
.ed-facts[b-q34g0iuruq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 0.875rem 1.25rem;
    margin: 0;
}

.ed-fact dt[b-q34g0iuruq] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--dbd-muted);
    margin-bottom: 0.25rem;
}

.ed-fact dd[b-q34g0iuruq] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dbd-fg);
    overflow-wrap: anywhere;
}

.ed-enabled-options[b-q34g0iuruq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 0.75rem 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--text-primary);
    font-size: 0.8125rem;
}

.ed-facts + .ed-enabled-options[b-q34g0iuruq] {
    margin-top: 1rem;
}

.ed-enabled-options li[b-q34g0iuruq] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    overflow-wrap: anywhere;
}

.ed-enabled-options i[b-q34g0iuruq] {
    color: var(--accent-success-text);
    flex-shrink: 0;
}

.df-import-group[b-q34g0iuruq] {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
}

.df-import-group > label[b-q34g0iuruq] {
    margin-bottom: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    white-space: normal;
}

.df-import-group[b-q34g0iuruq]  .field-import-help-trigger {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    flex-shrink: 0;
}

.df-import-group[b-q34g0iuruq]  .field-import-help-trigger:focus-visible {
    position: relative;
    z-index: 1;
}

.df-fields-panel .section-toolbar .dbd-btn:focus-visible[b-q34g0iuruq] {
    outline: 2px solid var(--border-focus, var(--accent-success-fill));
    outline-offset: 2px;
}

.section-toolbar[b-q34g0iuruq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.df-fields-panel[b-q34g0iuruq]  .df-import-file:focus + label {
    outline: 2px solid var(--border-interactive);
    outline-offset: 2px;
}

/* Forms grid filters — compact, sits directly above the toolbar */
.forms-filter-panel[b-q34g0iuruq] {
    background-color: var(--dbd-surface);
    border: 1px solid var(--dbd-border);
    border-radius: var(--dbd-radius);
    box-shadow: var(--dbd-shadow-card);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.forms-filter-panel .filter-group[b-q34g0iuruq] {
    flex: 0 1 180px;
    min-width: 140px;
}

.forms-filter-search[b-q34g0iuruq] {
    flex: 2 1 280px !important;
    min-width: 200px;
}

.forms-filter-panel .form-label[b-q34g0iuruq] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--dbd-muted);
    margin-bottom: 0.3rem;
}

.forms-filter-panel .form-control[b-q34g0iuruq] {
    padding: 0.4rem 0.6rem;
    font-size: 0.8125rem;
}

.forms-filter-panel .filter-actions[b-q34g0iuruq] {
    flex: 0 0 auto;
    padding-top: 1.35rem;
}

/* Filter panel */
.filter-panel[b-q34g0iuruq] {
    background-color: var(--dbd-surface);
    border: 1px solid var(--dbd-border);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.filter-row[b-q34g0iuruq] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 0.75rem;
}

.filter-row:last-child[b-q34g0iuruq] {
    margin-bottom: 0;
}

.filter-group[b-q34g0iuruq] {
    flex: 1;
    min-width: 150px;
}

.filter-actions[b-q34g0iuruq] {
    flex: 0;
    padding-top: 1.5rem;
}

.filter-check[b-q34g0iuruq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.filter-check input[type="checkbox"][b-q34g0iuruq] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--dbd-accent);
}

.filter-check input[type="checkbox"]:focus[b-q34g0iuruq] {
    outline: none;
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
}

.filter-check label[b-q34g0iuruq] {
    cursor: pointer;
    font-size: 0.875rem;
}

/* Row selection for Add Selected to Updates */
.grid-select-col[b-q34g0iuruq] {
    width: 2.75rem;
    text-align: center;
    vertical-align: middle;
    cursor: default;
}

.grid-select-col input[type="checkbox"][b-q34g0iuruq] {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    cursor: pointer;
    accent-color: var(--dbd-accent);
}

.grid-select-col input[type="checkbox"]:focus-visible[b-q34g0iuruq] {
    outline: none;
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
}

.grid-batch-count[b-q34g0iuruq] {
    display: inline-block;
    min-width: 1.25rem;
    margin-left: 0.4rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
}

/* Grid panel */
.grid-panel[b-q34g0iuruq] {
    margin-bottom: 1rem;
}

.grid-toolbar[b-q34g0iuruq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    min-height: 2rem;
    margin-bottom: 0.5rem;
}

.grid-count[b-q34g0iuruq] {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 550;
    color: var(--text-secondary);
    background-color: var(--dbd-subtle);
    border: 1px solid var(--dbd-border);
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    white-space: nowrap;
}

.table-container[b-q34g0iuruq] {
    position: relative;
    min-width: 0;
    max-width: 100%;
    border: 1px solid var(--dbd-border);
    border-radius: var(--dbd-radius);
    box-shadow: var(--dbd-shadow-card);
    overflow: auto;
    max-height: 600px;
    display: flex;
    flex-direction: column;
    background-color: var(--dbd-surface);
}

.table-container:focus-visible[b-q34g0iuruq] {
    outline: 2px solid var(--dbd-accent-strong);
    outline-offset: 2px;
}

.data-table[b-q34g0iuruq] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.data-table thead[b-q34g0iuruq] {
    background-color: var(--dbd-subtle);
    position: sticky;
    top: 0;
    z-index: 1;
}

.data-table th[b-q34g0iuruq] {
    padding: 0.625rem 0.5rem;
    text-align: left;
    font-weight: 600;
    color: var(--dbd-fg);
    border-bottom: 1px solid var(--dbd-border-strong);
    white-space: nowrap;
}

.data-table td[b-q34g0iuruq] {
    padding: 0.5rem;
    border-bottom: 1px solid var(--dbd-border);
    color: var(--dbd-fg);
    vertical-align: middle;
}

.grid-sort-button[b-q34g0iuruq] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    min-height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.grid-sort-button:hover[b-q34g0iuruq] {
    text-decoration: underline;
}

.grid-sort-button:focus-visible[b-q34g0iuruq] {
    outline: 2px solid var(--dbd-accent-strong);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.data-table tbody tr[b-q34g0iuruq] {
    transition: background-color 0.1s ease;
}

.data-table tbody tr:hover[b-q34g0iuruq] {
    background-color: var(--dbd-subtle);
}

.data-table tbody tr.clickable-row[b-q34g0iuruq] {
    cursor: pointer;
}

.data-table tbody tr.clickable-row:hover[b-q34g0iuruq] {
    background-color: var(--dbd-accent-soft);
}

.grid-row-link[b-q34g0iuruq] {
    color: inherit;
    text-decoration: none;
}

.grid-row-link:hover[b-q34g0iuruq],
.grid-row-link:focus-visible[b-q34g0iuruq] {
    text-decoration: underline;
}

.grid-row-link:focus-visible[b-q34g0iuruq] {
    outline: 2px solid var(--dbd-accent-strong);
    outline-offset: 2px;
}

/* The shared dark success fill is too bright for its white label on this page. */
[data-theme="dark"] .entity-detail-layout .dbd-btn.dbd-success[b-q34g0iuruq],
[data-theme="dark"] .entity-detail-layout .dbd-btn.dbd-success:hover:not(:disabled)[b-q34g0iuruq],
[data-theme="dark"] .entity-detail-layout .dbd-btn.dbd-success:focus:not(:disabled)[b-q34g0iuruq],
[data-theme="dark"] .entity-detail-layout .dbd-btn.dbd-success:active:not(:disabled)[b-q34g0iuruq] {
    background: var(--accent-success-fill);
    border-color: var(--accent-success-fill);
    color: var(--text-on-dark);
    filter: none;
}

[data-theme="dark"] .entity-detail-layout .dbd-btn.dbd-success:focus-visible[b-q34g0iuruq] {
    outline: 2px solid var(--dbd-accent-strong);
    outline-offset: 2px;
}

.data-table .empty-row[b-q34g0iuruq] {
    text-align: center;
    color: var(--dbd-muted);
    padding: 2rem !important;
}

/* Section loading — fills panel, centers spinner until data is ready */
.section-loading[b-q34g0iuruq] {
    flex: 1 1 auto;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--dbd-muted);
}

/* Clear centered empty state (mirrors DataGrid / AmxGrid) */
.grid-empty-state[b-q34g0iuruq] {
    flex: 1 1 auto;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 2rem;
    text-align: center;
}

.grid-empty-badge[b-q34g0iuruq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    border-radius: 50%;
    background-color: var(--dbd-subtle);
    box-shadow: inset 0 0 0 1px var(--dbd-border);
}

.grid-empty-badge i[b-q34g0iuruq] {
    font-size: 26px;
    color: var(--dbd-muted);
}

.grid-empty-title[b-q34g0iuruq] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dbd-fg);
}

.grid-empty-sub[b-q34g0iuruq] {
    font-size: 0.8125rem;
    color: var(--dbd-muted);
}

.tick-true[b-q34g0iuruq] {
    color: var(--dbd-accent-bright);
}

.tick-false[b-q34g0iuruq] {
    color: var(--accent-danger);
}

/* ---- Forms (display area) grid ---- */
.forms-summary[b-q34g0iuruq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.forms-summary-item[b-q34g0iuruq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 550;
    color: var(--text-secondary);
    background-color: var(--dbd-subtle);
    border: 1px solid var(--dbd-border);
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    white-space: nowrap;
}

.forms-summary-hidden[b-q34g0iuruq] {
    color: var(--accent-warning);
}

.forms-table td[b-q34g0iuruq] {
    vertical-align: top;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.forms-table .forms-col-numeric[b-q34g0iuruq] {
    text-align: center;
    white-space: nowrap;
}

.forms-name[b-q34g0iuruq] {
    font-weight: 600;
    color: var(--dbd-fg);
}

.forms-description[b-q34g0iuruq] {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--dbd-muted);
    max-width: 22rem;
}

.forms-code[b-q34g0iuruq] {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    background-color: var(--dbd-subtle);
    border: 1px solid var(--dbd-border);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.forms-badge-row[b-q34g0iuruq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.forms-badge[b-q34g0iuruq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--dbd-border);
    background-color: var(--dbd-subtle);
    color: var(--dbd-muted);
    font-size: 0.72rem;
    font-weight: 550;
    white-space: nowrap;
}

.forms-badge-on[b-q34g0iuruq] {
    background-color: var(--dbd-accent-soft);
    border-color: var(--dbd-accent);
    color: var(--dbd-accent-strong);
}

.forms-badge-off[b-q34g0iuruq] {
    /* Keep the off state readable in both themes; the strike-through identifies it. */
    color: var(--text-secondary);
    text-decoration: line-through;
}

.forms-badge-active[b-q34g0iuruq] {
    background-color: var(--dbd-accent-soft);
    border-color: var(--dbd-accent);
    color: var(--dbd-accent-strong);
}

.forms-badge-hidden[b-q34g0iuruq] {
    color: var(--accent-warning);
    border-color: var(--accent-warning);
    background-color: transparent;
}

.forms-badge-warning[b-q34g0iuruq] {
    color: var(--accent-danger);
    border-color: var(--accent-danger);
    background-color: transparent;
}

.forms-applicability[b-q34g0iuruq] {
    display: block;
    max-width: 20rem;
    font-size: 0.78rem;
    color: var(--dbd-fg);
}

.forms-muted[b-q34g0iuruq] {
    color: var(--dbd-muted);
    font-size: 0.78rem;
}

.forms-field-count[b-q34g0iuruq] {
    display: inline-block;
    min-width: 1.9rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background-color: var(--dbd-subtle);
    border: 1px solid var(--dbd-border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dbd-fg);
}

.forms-roles[b-q34g0iuruq] {
    display: block;
    max-width: 16rem;
    font-size: 0.78rem;
}

.forms-roles-edit[b-q34g0iuruq] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.2rem;
    max-width: 16rem;
    font-size: 0.72rem;
    color: var(--dbd-muted);
}

.forms-row-hidden .forms-name[b-q34g0iuruq],
.forms-row-hidden .forms-code[b-q34g0iuruq],
.forms-row-hidden .forms-applicability[b-q34g0iuruq] {
    opacity: 0.65;
}

/* Form controls */
.form-label[b-q34g0iuruq] {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 550;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.form-control[b-q34g0iuruq],
#mappingType[b-q34g0iuruq] {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    background-color: var(--dbd-surface);
    color: var(--dbd-fg);
    border: 1px solid var(--border-interactive);
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus[b-q34g0iuruq],
#mappingType:focus[b-q34g0iuruq] {
    border-color: var(--dbd-accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
}

/* Buttons — flat token fills */

.btn-success[b-q34g0iuruq],

.btn-success:hover[b-q34g0iuruq],

.btn-success:focus[b-q34g0iuruq],

/* Alerts */
.alert[b-q34g0iuruq] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.alert-danger[b-q34g0iuruq] {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-info[b-q34g0iuruq] {
    background-color: var(--dbd-subtle);
    color: var(--dbd-fg);
    border: 1px solid var(--dbd-border);
}

/* Explicit colours rather than the page tokens: this banner renders above .entity-detail-layout,
   where the tokens are defined, so the token version came out with no background and no border. */
.alert-success[b-q34g0iuruq] {
    background-color: rgba(21, 128, 61, 0.10);
    color: #166534;
    border: 1px solid rgba(21, 128, 61, 0.45);
}

[data-theme="dark"] .alert-success[b-q34g0iuruq] {
    background-color: rgba(34, 197, 94, 0.14);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.45);
}

[data-theme="dark"] .alert-danger[b-q34g0iuruq] {
    background-color: #3a1e1e;
    color: #f8b4b4;
    border-color: #5c2a2a;
}

.btn-close[b-q34g0iuruq] {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    margin-left: auto;
    opacity: 0.5;
    line-height: 1;
    color: inherit;
}

.btn-close[b-q34g0iuruq]::before {
    content: '\00D7';
}

.btn-close:hover[b-q34g0iuruq],
.btn-close:focus[b-q34g0iuruq] {
    opacity: 1;
}

.btn-close:focus[b-q34g0iuruq] {
    outline: none;
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
    border-radius: 4px;
}

.mt-3[b-q34g0iuruq] {
    margin-top: 1rem;
}

.visually-hidden[b-q34g0iuruq] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

hr[b-q34g0iuruq] {
    border: none;
    border-top: 1px solid var(--dbd-border);
    margin: 1rem 0;
}

.display-sections-panel[b-q34g0iuruq] {
    background: var(--dbd-surface);
    border: 1px solid var(--dbd-border);
    border-radius: var(--radius-md, 8px);
    padding: 1rem;
    margin-bottom: 1rem;
}
.display-sections-toolbar[b-q34g0iuruq], .display-section-actions[b-q34g0iuruq], .display-section-summary[b-q34g0iuruq] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .75rem;
}
.display-section-select[b-q34g0iuruq] { flex: 1 1 240px; min-width: 0; }
.display-section-select select[b-q34g0iuruq] { width: 100%; color: var(--text-primary); background-color: var(--bg-card); border-color: var(--border-interactive); }
.display-section-select select:focus-visible[b-q34g0iuruq], .display-section-actions button:focus-visible[b-q34g0iuruq] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 2px;
}
.display-section-help[b-q34g0iuruq], .forms-add-section-hint[b-q34g0iuruq], .forms-section-name[b-q34g0iuruq] {
    color: var(--text-secondary);
    font-size: .8125rem;
}
.display-section-help[b-q34g0iuruq] { margin: .75rem 0 0; }
.display-section-summary[b-q34g0iuruq] { color: var(--text-primary); font-size: .8125rem; margin-top: .75rem; }
.display-section-summary span[b-q34g0iuruq] { border: 1px solid var(--dbd-border); border-radius: var(--radius-sm, 6px); padding: .25rem .5rem; }

/* High contrast mode */
@media (forced-colors: active) {
    .forms-badge[b-q34g0iuruq] {
        border: 1px solid ButtonBorder;
    }

    .forms-badge-off[b-q34g0iuruq] {
        opacity: 1;
    }

    .sidebar-item.active[b-q34g0iuruq] {
        border: 2px solid Highlight;
    }

    .data-table tbody tr:focus[b-q34g0iuruq],
    .sidebar-item:focus-visible[b-q34g0iuruq],
    .btn:focus[b-q34g0iuruq] {
        outline: 3px solid CanvasText;
    }

    .btn[b-q34g0iuruq] {
        border: 2px solid ButtonText;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .data-table tbody tr[b-q34g0iuruq],
    .sidebar-item[b-q34g0iuruq],
    .btn[b-q34g0iuruq],
    .form-control[b-q34g0iuruq] {
        transition: none;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .ed-identity-card[b-q34g0iuruq] {
        flex-wrap: wrap;
    }

    .ed-identity-badges[b-q34g0iuruq] {
        flex-basis: 100%;
    }

    .entity-detail-layout[b-q34g0iuruq] {
        flex-direction: column;
    }

    .sidebar[b-q34g0iuruq] {
        width: 100%;
        min-width: 0;
        max-height: 240px;
        border-right: none;
        border-bottom: 1px solid var(--dbd-border);
    }

    .sidebar-nav[b-q34g0iuruq] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sidebar-item[b-q34g0iuruq] {
        width: auto;
        flex: 0 0 auto;
    }

    .sidebar-item-text[b-q34g0iuruq] {
        white-space: normal;
    }
}
/* /Pages/Settings/AdvancedCustomisation/EntityEdit.razor.rz.scp.css */
.breadcrumb-nav[b-69bji9j0bu] {
    min-width: 0;
    overflow-x: auto;
    font-size: 0.875rem;
}

.breadcrumb-list[b-69bji9j0bu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb-list li[b-69bji9j0bu] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.breadcrumb-link[b-69bji9j0bu] {
    color: var(--dbd-accent);
    text-decoration: none;
    font-weight: 550;
}

.breadcrumb-link:hover[b-69bji9j0bu] {
    text-decoration: underline;
}

.breadcrumb-link:focus-visible[b-69bji9j0bu] {
    outline: none;
    box-shadow: 0 0 0 3px var(--dbd-accent-ring);
    border-radius: 4px;
}

.breadcrumb-separator[b-69bji9j0bu] {
    margin: 0 0.125rem;
    color: var(--dbd-muted);
}

.breadcrumb-current[b-69bji9j0bu] {
    color: var(--dbd-fg);
    font-weight: 600;
}
/* /Pages/Settings/AdvancedCustomisation/EntityRules.razor.rz.scp.css */
.entity-rules[b-jgcf6gcu54], .entity-rules-header[b-jgcf6gcu54] { color: var(--text-primary); width: 100%; min-width: 0; }
.entity-rules-header[b-jgcf6gcu54] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.entity-rules-subtitle[b-jgcf6gcu54] { margin: 0; color: var(--text-secondary); font-size: .8rem; }
.btn.dbd-btn[b-jgcf6gcu54] { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: 36px; border-radius: 8px; font-size: .85rem; font-weight: 550; }
.btn.dbd-btn.dbd-success[b-jgcf6gcu54], .btn.dbd-btn.dbd-success:is(:hover, :focus, :active)[b-jgcf6gcu54] { background: var(--accent-success-fill); color: var(--text-on-dark); border-color: var(--accent-success-fill); filter: none; }
.btn.dbd-btn.dbd-secondary[b-jgcf6gcu54] { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-interactive); }
.btn.dbd-btn.dbd-secondary:hover[b-jgcf6gcu54] { background: var(--bg-hover); }

/* The same card, toolbar and compact row structure as Home Sections, using shared theme tokens. */
.entity-rules-section[b-jgcf6gcu54] { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; }
.entity-rules-section-head[b-jgcf6gcu54] { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-color); }
.entity-rules-section-icon[b-jgcf6gcu54], .entity-rule-icon[b-jgcf6gcu54] { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; font-size: .85rem; }
.entity-rules-section-icon[b-jgcf6gcu54] { background: var(--accent-success-fill); color: var(--text-on-dark); }
.entity-rules-section-head h2[b-jgcf6gcu54] { margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.3; }
.entity-rules-section-head p[b-jgcf6gcu54] { margin: .25rem 0 0; font-size: .78rem; color: var(--text-secondary); }
.entity-rules-toolbar[b-jgcf6gcu54] { display: flex; align-items: flex-end; flex-wrap: wrap; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); }
.entity-rules-field[b-jgcf6gcu54] { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.entity-rules-search-field[b-jgcf6gcu54] { flex: 0 1 26rem; }
.entity-rules-field > label[b-jgcf6gcu54], .entity-rule-details dt[b-jgcf6gcu54] { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); }
.entity-rules-search[b-jgcf6gcu54] { display: flex; align-items: center; gap: .5rem; height: 36px; padding: 0 .75rem; border: 1px solid var(--border-interactive); border-radius: 8px; background: var(--bg-card); color: var(--text-secondary); }
.entity-rules-search input[b-jgcf6gcu54] { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--text-primary); font-size: .85rem; }
.entity-rules-search input[b-jgcf6gcu54]::placeholder { color: var(--text-muted); opacity: 1; }
.entity-rules-sort-controls[b-jgcf6gcu54] { display: flex; gap: .5rem; }
.entity-rules-sort-controls select[b-jgcf6gcu54], .entity-rules-entity[b-jgcf6gcu54] { min-width: 0; height: 36px; padding: 0 .5rem; border: 1px solid var(--border-interactive); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font-size: .85rem; }
.entity-rules-entity[b-jgcf6gcu54] { width: 100%; max-width: 18rem; text-overflow: ellipsis; }
.entity-rules-direction[b-jgcf6gcu54] { flex: 0 0 36px; padding: 0; }
.entity-rules-clear[b-jgcf6gcu54] { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text-secondary); }
.entity-rules-clear:hover[b-jgcf6gcu54] { background: var(--bg-hover); color: var(--text-primary); }
.entity-rules-count[b-jgcf6gcu54] { margin: 0 0 .5rem auto; color: var(--text-secondary); font-size: .78rem; }
.entity-rules-body[b-jgcf6gcu54] { padding: .5rem; }
.entity-rules-loading[b-jgcf6gcu54] { padding: 2rem; }

.entity-rules-list[b-jgcf6gcu54] { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.entity-rule-row[b-jgcf6gcu54] { position: relative; isolation: isolate; display: flex; align-items: center; gap: .75rem; padding-right: .5rem; border-radius: 6px; }
.entity-rule-row:hover[b-jgcf6gcu54], .entity-rule-row:focus-within[b-jgcf6gcu54] { background: var(--bg-hover); }
.entity-rule-main[b-jgcf6gcu54] { position: static; display: flex; align-items: center; gap: .75rem; flex: 1 1 40%; min-width: 0; padding: .75rem; border: 0; border-radius: 6px; background: transparent; color: inherit; text-align: left; }
/* Stretch the native button across the row, keeping its keyboard action and the separate edit button. */
.entity-rule-main[b-jgcf6gcu54]::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 6px; cursor: pointer; }
.entity-rule-icon[b-jgcf6gcu54] { background: var(--bg-secondary); color: var(--accent-success-text); }
.entity-rule-text[b-jgcf6gcu54] { display: flex; flex-direction: column; gap: .25rem; min-width: 0; overflow-wrap: anywhere; }
.entity-rule-name[b-jgcf6gcu54] { font-size: .85rem; font-weight: 550; }
.entity-rule-key[b-jgcf6gcu54] { color: var(--text-secondary); font-family: var(--font-mono, Consolas, monospace); font-size: .72rem; }
.entity-rule-subject[b-jgcf6gcu54] { color: var(--text-secondary); font-size: .78rem; }
.entity-rule-details[b-jgcf6gcu54] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 60%; gap: 1rem; min-width: 0; margin: 0; padding: .5rem 0; }
.entity-rule-details dd[b-jgcf6gcu54] { margin: .25rem 0 0; color: var(--text-secondary); font-size: .78rem; overflow-wrap: anywhere; }
.btn.dbd-btn.entity-rule-edit[b-jgcf6gcu54] { position: relative; z-index: 2; flex: 0 0 30px; min-height: 30px; padding: 0; font-size: .75rem; }

/* Match the Report Designer entity picker while retaining native keyboard-operable disclosures. */
.entity-selection-heading[b-jgcf6gcu54] { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.entity-selection-heading-icon[b-jgcf6gcu54] { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-success-fill); color: var(--text-on-dark); font-size: .85rem; flex: 0 0 auto; }
.entity-selection-heading-text[b-jgcf6gcu54] { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.entity-selection-heading h2[b-jgcf6gcu54] { margin: 0; font-size: .875rem; font-weight: 600; }
.entity-selection-subtitle[b-jgcf6gcu54] { font-size: .8125rem; color: var(--text-secondary); font-weight: 400; }
.entity-selection-body[b-jgcf6gcu54] { display: flex; flex-direction: column; gap: .75rem; }
.entity-selection-check-shelf[b-jgcf6gcu54] { display: flex; align-items: center; flex-wrap: wrap; padding: .5rem .75rem; border-radius: 8px; background: var(--bg-secondary); font-size: .8125rem; }
.entity-selection-check-shelf .form-check-input[b-jgcf6gcu54] { border-color: var(--border-interactive); background-color: var(--bg-card); }
.entity-selection-check-shelf .form-check-input:checked[b-jgcf6gcu54] { background-color: var(--accent-success-fill); border-color: var(--accent-success-fill); }
.entity-selection-search-wrap[b-jgcf6gcu54] { position: relative; }
.entity-selection-search-wrap > i[b-jgcf6gcu54] { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: .8125rem; pointer-events: none; }
.entity-selection-search-wrap input[b-jgcf6gcu54] { width: 100%; min-width: 0; height: 36px; padding: .5rem .75rem .5rem 2rem; border: 1px solid var(--border-interactive); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font-size: .85rem; }
.entity-selection-search-wrap input[b-jgcf6gcu54]::placeholder { color: var(--text-muted); opacity: 1; }
.entity-rule-picker[b-jgcf6gcu54] { min-height: min(320px, 40vh); max-height: 48vh; overflow: auto; padding: .5rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); }
.entity-rule-picker summary[b-jgcf6gcu54] { display: flex; align-items: center; gap: .5rem; min-height: 34px; padding: .25rem .5rem; border: 1px solid transparent; border-radius: 6px; list-style: none; cursor: pointer; font-size: .875rem; font-weight: 600; }
.entity-rule-picker summary[b-jgcf6gcu54]::-webkit-details-marker { display: none; }
.entity-rule-picker-expander[b-jgcf6gcu54] { flex: 0 0 1rem; color: var(--text-secondary); text-align: center; font-size: .8125rem; }
.entity-rule-picker details[open] > summary .entity-rule-picker-expander > i[b-jgcf6gcu54] { transform: rotate(90deg); }
.entity-rule-picker-icon[b-jgcf6gcu54] { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 16px; width: 16px; height: 16px; }
.entity-rule-picker-icon[b-jgcf6gcu54]  img { max-width: 16px; max-height: 16px; width: 16px; height: 16px; object-fit: contain; }
.entity-rule-picker ul[b-jgcf6gcu54] { list-style: none; margin: 0 0 0 1rem; padding: 0 0 0 .5rem; border-left: 1px dashed var(--border-color); }
.entity-rule-choice[b-jgcf6gcu54] { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 34px; text-align: left; background: transparent; color: var(--text-primary); border: 1px solid transparent; padding: .25rem .5rem; border-radius: 6px; font-size: .875rem; }
.entity-rule-choice-name[b-jgcf6gcu54], .entity-rule-description[b-jgcf6gcu54] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-rule-choice-name[b-jgcf6gcu54] { flex: 0 1 auto; }
.entity-rule-description[b-jgcf6gcu54] { flex: 1 1 0; color: var(--text-secondary); font-size: .8125rem; }
.entity-rule-choice:hover[b-jgcf6gcu54], .entity-rule-picker summary:hover[b-jgcf6gcu54] { background: var(--bg-hover); border-color: var(--border-color); }
.entity-rules button:focus-visible[b-jgcf6gcu54], .entity-rules input:focus-visible[b-jgcf6gcu54], .entity-rules select:focus-visible[b-jgcf6gcu54], .entity-rules summary:focus-visible[b-jgcf6gcu54], .entity-rules-header button:focus-visible[b-jgcf6gcu54] { outline: 2px solid var(--accent-success-text); outline-offset: 2px; }
.entity-rules .btn.dbd-btn:focus-visible:not(:disabled)[b-jgcf6gcu54], .entity-rules-header .btn.dbd-btn:focus-visible:not(:disabled)[b-jgcf6gcu54] { outline: 2px solid var(--accent-success-text); outline-offset: 2px; }
.entity-rules .entity-rule-main:focus-visible[b-jgcf6gcu54] { outline: none; }
.entity-rule-main:focus-visible[b-jgcf6gcu54]::after { outline: 2px solid var(--accent-success-text); outline-offset: 2px; }
.entity-rules .entity-selection-search-wrap input:focus-visible[b-jgcf6gcu54] { outline: none; border-color: var(--accent-success-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-success-text) 15%, transparent); }

@media (max-width: 760px) {
    .entity-rules-search-field[b-jgcf6gcu54] { flex: 1 1 100%; }
    .entity-rule-row[b-jgcf6gcu54] { flex-wrap: wrap; gap: 0 .5rem; padding: .5rem; }
    .entity-rule-main[b-jgcf6gcu54] { flex-basis: calc(100% - 40px); padding: .5rem; }
    .entity-rule-details[b-jgcf6gcu54] { flex-basis: 100%; padding: .5rem; order: 1; }
    .entity-rule-edit[b-jgcf6gcu54] { align-self: flex-start; margin-top: .5rem; }
}
@media (max-width: 400px) {
    .entity-rules-section-head[b-jgcf6gcu54], .entity-rules-toolbar[b-jgcf6gcu54] { padding: .75rem; }
    .entity-rules-count[b-jgcf6gcu54] { flex-basis: 100%; margin: 0; }
    .entity-rule-details[b-jgcf6gcu54] { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
}
/* /Pages/Settings/Customisation/GIS.razor.rz.scp.css */
.gis-settings-page[b-fac4v9buoc] {
    --dbd-surface: var(--bg-card);
    --dbd-fg: var(--text-primary);
    --dbd-muted: var(--text-muted);
    --dbd-border: var(--border-color);
    --dbd-border-strong: var(--border-interactive);
    --dbd-subtle: var(--bg-hover);
    --dbd-accent: var(--accent-success-text);
    --text-secondary: var(--text-muted);
}

.rs-readout-value[b-fac4v9buoc] { white-space: pre-wrap; overflow-wrap: anywhere; }
.rs-subgroup[b-fac4v9buoc] { display: flex; flex-direction: column; gap: 0.6rem; }
.gis-settings-page .rs-subgroup + .rs-subgroup[b-fac4v9buoc] { margin-top: 1.25rem; }
.gis-settings-page .rs-grid.is-bounds[b-fac4v9buoc] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.gis-settings-page .rs-grid[b-fac4v9buoc] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.rs-segmented[b-fac4v9buoc] { flex-wrap: wrap; }
.rs-sublabel[b-fac4v9buoc] { color: var(--text-secondary); font-size: 0.8125rem; }
input:focus-visible[b-fac4v9buoc], textarea:focus-visible[b-fac4v9buoc] {
    outline: 2px solid var(--border-focus, var(--accent-primary));
    outline-offset: 2px;
}

/* Keep the shared header's green actions readable against the global dark-theme button rule. */
.gis-settings-shell[b-fac4v9buoc]  .rs-header .rs-header-actions .btn.dbd-btn.dbd-success {
    background-color: var(--accent-success-fill) !important;
    color: var(--text-on-dark) !important;
    transition: none;
}
/* /Pages/Settings/Customisation/GISExports.razor.rz.scp.css */
.gs-section[b-rky5tfp3nb] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.gs-section-head[b-rky5tfp3nb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.gs-section-icon[b-rky5tfp3nb], .gs-row-icon[b-rky5tfp3nb], .gs-row-chevron[b-rky5tfp3nb] {
    color: var(--text-muted);
    flex-shrink: 0;
}

.gs-section-title[b-rky5tfp3nb] { font-size: 1rem; margin: 0; color: var(--text-primary); }
.gs-section-hint[b-rky5tfp3nb], .gs-row-hint[b-rky5tfp3nb] { color: var(--text-secondary); font-size: 0.8125rem; margin: 0.25rem 0 0; }
.gs-rows[b-rky5tfp3nb] { list-style: none; padding: 0.5rem; margin: 0; }

.gs-row[b-rky5tfp3nb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-primary);
}

.gs-row:hover[b-rky5tfp3nb] { background: var(--bg-hover); }
.gs-row:focus[b-rky5tfp3nb] { outline: 2px solid var(--border-focus, var(--accent-primary)); outline-offset: 2px; }
.gs-row-icon[b-rky5tfp3nb] { width: 1.25rem; text-align: center; }
.gs-row-text[b-rky5tfp3nb] { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gs-row-label[b-rky5tfp3nb] { font-size: 0.875rem; font-weight: 500; }
.gs-row-chevron[b-rky5tfp3nb] { font-size: 0.75rem; }
/* /Pages/Settings/Customisation/LookupSettings.razor.rz.scp.css */
.breadcrumb-nav[b-9bhtfqylnk] {
    min-width: 0;
    overflow-x: auto;
    font-size: 0.875rem;
}

.breadcrumb-list[b-9bhtfqylnk] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}

.breadcrumb-list li[b-9bhtfqylnk] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.breadcrumb-link[b-9bhtfqylnk] {
    color: var(--accent-success-text);
    text-decoration: none;
}

.breadcrumb-link:hover[b-9bhtfqylnk] {
    text-decoration: underline;
}

.breadcrumb-separator[b-9bhtfqylnk] {
    margin: 0 0.125rem;
    color: var(--text-muted);
}

.breadcrumb-current[b-9bhtfqylnk] {
    color: var(--text-primary);
    font-weight: 600;
}

/* ---- Page scope ----
   The design-language primitives, mapped onto the app's global light/dark tokens (the same
   mapping DataField uses), so the page themes with the rest of the app. */
.lookup-page[b-9bhtfqylnk] {
    --dbd-surface: var(--bg-card);
    --dbd-fg: var(--text-primary);
    --dbd-muted: var(--text-muted);
    --dbd-border: var(--border-color);
    --dbd-border-strong: var(--border-interactive);
    --dbd-subtle: var(--bg-secondary);
    --dbd-accent: var(--accent-success-text);
    --dbd-accent-soft: var(--bg-secondary);
    width: 100%;
    max-width: none;
    margin: 0;
    color: var(--dbd-fg);
    /* Fields lay out by the room the page has, not the window: the same markup is a full page
       and a narrower modal. */
    container-type: inline-size;
}

.lookup-loading[b-9bhtfqylnk] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 240px;
}

/* ---- Header (breadcrumb + dirty state on the left, actions on the right) ---- */
.lookup-header[b-9bhtfqylnk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
    width: 100%;
}

.lookup-header-left[b-9bhtfqylnk] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    min-width: 0;
}

.lookup-dirty[b-9bhtfqylnk] {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* In a modal there is no shell bar, so the same actions stick to the top of the body. */
.lookup-embedded-bar[b-9bhtfqylnk] {
    position: sticky;
    top: -1rem;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: -1rem -1rem 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
}

.lookup-embedded-bar .lookup-actions[b-9bhtfqylnk] {
    margin-inline-start: auto;
}

/* ---- Standing alerts ---- */
.lookup-validation[b-9bhtfqylnk],
.lookup-load-error[b-9bhtfqylnk] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.25rem;
    border-radius: 8px;
    /* Token text on a faint danger wash, so it reads in both themes (Bootstrap's pink
       .alert-danger is a light-only fill). */
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: var(--text-primary);
}

.lookup-validation > i[b-9bhtfqylnk],
.lookup-load-error > i[b-9bhtfqylnk] {
    color: var(--accent-danger-text);
}

.lookup-load-error .btn[b-9bhtfqylnk] {
    margin-inline-start: auto;
    flex: 0 0 auto;
}

/* ---- Section cards ---- */
.lookup-fieldset[b-9bhtfqylnk] {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.lookup-section[b-9bhtfqylnk] {
    background: var(--dbd-surface);
    border: 1px solid var(--dbd-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.lookup-section-head[b-9bhtfqylnk] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--dbd-border);
}

.lookup-section-icon[b-9bhtfqylnk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: var(--dbd-accent-soft);
    color: var(--dbd-accent);
    font-size: 0.9rem;
}

.lookup-section-heading[b-9bhtfqylnk] {
    min-width: 0;
}

.lookup-section-title[b-9bhtfqylnk] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--dbd-fg);
}

.lookup-section-hint[b-9bhtfqylnk] {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--dbd-muted);
}

.lookup-section-body[b-9bhtfqylnk] {
    padding: 1.25rem;
}

/* Two columns where there is room, one where there is not (including a narrow modal). */
.lookup-grid[b-9bhtfqylnk] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem 1.25rem;
}

@container (min-width: 620px) {
    .lookup-grid[b-9bhtfqylnk] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.lookup-span[b-9bhtfqylnk] {
    grid-column: 1 / -1;
}

/* ---- Fields ---- */
.lookup-field[b-9bhtfqylnk] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.lookup-field-follow[b-9bhtfqylnk] {
    margin-top: 1rem;
    max-width: 420px;
}

.lookup-label[b-9bhtfqylnk] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.lookup-req[b-9bhtfqylnk] {
    color: var(--accent-danger-text);
}

.lookup-help[b-9bhtfqylnk] {
    margin: 0;
    font-size: 0.78rem;
    color: var(--dbd-muted);
}

/* background-color, not the shorthand, so it never resets a background-image.
   The border colour is !important because app.css pins dark-mode inputs to the hairline
   --border-color (also !important), which is too faint to find a field by and does not match
   the AmxSelect beside it; --border-interactive is the form-control edge. */
.lookup-page .form-control[b-9bhtfqylnk] {
    border: 1px solid var(--dbd-border-strong);
    border-color: var(--dbd-border-strong) !important;
    border-radius: 8px;
    font-size: 0.85rem;
    background-color: var(--dbd-surface);
    color: var(--dbd-fg);
}

.lookup-page .form-control:focus[b-9bhtfqylnk] {
    border-color: var(--dbd-accent) !important;
    box-shadow: 0 0 0 3px rgba(21, 128, 61, .15);
    outline: none;
}

.lookup-page .form-control[aria-invalid="true"][b-9bhtfqylnk] {
    border-color: var(--accent-danger-text) !important;
}

.lookup-page .form-control[b-9bhtfqylnk]::placeholder {
    color: var(--dbd-muted);
}

.lookup-page textarea.form-control[b-9bhtfqylnk] {
    resize: vertical;
    min-height: 4.5rem;
}

.lookup-mono[b-9bhtfqylnk] {
    font-family: var(--font-mono, 'SF Mono', Consolas, monospace);
    font-size: 0.82rem;
}

.lookup-inline[b-9bhtfqylnk],
.lookup-icon-row[b-9bhtfqylnk] {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.lookup-inline .form-control[b-9bhtfqylnk],
.lookup-icon-row .form-control[b-9bhtfqylnk] {
    flex: 1 1 auto;
    min-width: 0;
}

.lookup-inline .btn[b-9bhtfqylnk],
.lookup-icon-row .btn[b-9bhtfqylnk] {
    flex: 0 0 auto;
}

.lookup-icon-row[b-9bhtfqylnk] {
    flex-wrap: wrap;
}

.lookup-icon-row .form-control[b-9bhtfqylnk] {
    flex-basis: 8rem;
}

/* The tile is a fixed size so a missing or slow icon does not shift the row. */
.lookup-icon-tile[b-9bhtfqylnk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid var(--dbd-border);
    border-radius: 8px;
    background: var(--dbd-subtle);
    color: var(--dbd-muted);
}

.lookup-icon-tile[b-9bhtfqylnk]  img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Sort field and direction share a row; the direction stays compact. */
.lookup-sort-row[b-9bhtfqylnk] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 9.5rem);
    gap: 0.5rem;
}

/* Checkboxes sit on a subtle inset shelf, apart from the text inputs. */
.lookup-shelf[b-9bhtfqylnk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
    gap: 0.6rem 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--dbd-border);
    border-radius: 8px;
    background: var(--dbd-subtle);
}

.amx-check-box[b-9bhtfqylnk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .amx-check-box input[type="checkbox"][b-9bhtfqylnk] {
        width: 1rem;
        height: 1rem;
        margin: 0;
        accent-color: var(--accent-success-fill);
    }

    .amx-check-box label[b-9bhtfqylnk] {
        margin: 0;
        font-size: 0.85rem;
        color: var(--dbd-fg);
    }

.lookup-page :focus-visible[b-9bhtfqylnk] {
    outline: 2px solid var(--border-focus, var(--accent-success-fill));
    outline-offset: 2px;
}

.lookup-page .form-control:focus-visible[b-9bhtfqylnk] {
    outline: none;
}

@media (max-width: 575.98px) {
    .lookup-section-head[b-9bhtfqylnk],
    .lookup-section-body[b-9bhtfqylnk] {
        padding: 0.9rem;
    }

    .lookup-sort-row[b-9bhtfqylnk] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lookup-page *[b-9bhtfqylnk] {
        transition: none !important;
    }
}

/* ---- Icon picker (inside AmxModal) ---- */
.icons-grid[b-9bhtfqylnk] {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

    .icons-grid .row[b-9bhtfqylnk] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-right: 0;
        margin-left: 0;
    }

    .icons-grid .col-2[b-9bhtfqylnk] {
        flex: 0 0 calc(16.666% - 0.5rem);
        max-width: calc(16.666% - 0.5rem);
    }

    .icons-grid .icon-item[b-9bhtfqylnk] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0.35rem;
        width: 100%;
        text-align: center;
        padding: 0.5rem;
        border: 1px solid var(--border-interactive);
        border-radius: 0.25rem;
        cursor: pointer;
        transition: all 0.2s;
        background-color: var(--bg-card);
    }

        .icons-grid .icon-item:hover[b-9bhtfqylnk] {
            background-color: var(--bg-hover);
        }

        .icons-grid .icon-item:focus-visible[b-9bhtfqylnk] {
            outline: 2px solid var(--border-focus);
            outline-offset: 2px;
        }

        .icons-grid .icon-item.selected[b-9bhtfqylnk] {
            background-color: var(--accent-success-fill);
            color: var(--text-on-dark);
            border-color: var(--accent-success-fill);
        }

    .icons-grid .icon-image[b-9bhtfqylnk] {
        width: 32px;
        height: 32px;
        object-fit: contain;
    }

    .icons-grid .icon-image--missing[b-9bhtfqylnk] {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        font-weight: 600;
    }

    .icons-grid .icon-name[b-9bhtfqylnk] {
        font-size: 0.75rem;
        word-break: break-all;
    }
/* /Pages/Settings/Customisation/Manufacturers.razor.rz.scp.css */
.mf-page[b-sttrt1g94i] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.mf-intro[b-sttrt1g94i],
.mf-summary[b-sttrt1g94i] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.mf-error[b-sttrt1g94i] {
    margin: 0;
    color: var(--accent-danger-text);
}

.mf-section[b-sttrt1g94i] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    min-width: 0;
}

.mf-section-head[b-sttrt1g94i] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.mf-section-icon[b-sttrt1g94i] {
    color: var(--text-muted);
    flex-shrink: 0;
}

.mf-section-heading[b-sttrt1g94i] {
    flex: 1 1 240px;
    min-width: 0;
}

.mf-section-title[b-sttrt1g94i] {
    font-size: 1rem;
    margin: 0;
    color: var(--text-primary);
}

.mf-section-hint[b-sttrt1g94i],
.mf-help[b-sttrt1g94i] {
    display: block;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    margin: 0.25rem 0 0;
}

.mf-section-body[b-sttrt1g94i] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 1rem;
    min-width: 0;
}

.mf-empty[b-sttrt1g94i] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.mf-editor[b-sttrt1g94i] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.mf-editor-title[b-sttrt1g94i] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mf-fields[b-sttrt1g94i] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 640px;
}

.mf-fields--grid[b-sttrt1g94i] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    max-width: none;
}

.mf-field[b-sttrt1g94i] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mf-label[b-sttrt1g94i] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mf-editor-actions[b-sttrt1g94i],
.mf-add-set[b-sttrt1g94i] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}

.mf-add-set .mf-field[b-sttrt1g94i] {
    flex: 1 1 260px;
    max-width: 360px;
}

.mf-delete[b-sttrt1g94i] {
    margin-left: auto;
}

.mf-suggestions[b-sttrt1g94i] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mf-suggestion-list[b-sttrt1g94i] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mf-suggestion[b-sttrt1g94i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.mf-table-wrap[b-sttrt1g94i] {
    overflow-x: auto;
    min-width: 0;
}

.mf-table[b-sttrt1g94i] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.mf-table th[b-sttrt1g94i],
.mf-table td[b-sttrt1g94i] {
    padding: 8px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.mf-table thead th[b-sttrt1g94i] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.mf-table tbody th[b-sttrt1g94i] {
    font-weight: 500;
}

.mf-row-actions[b-sttrt1g94i] {
    width: 1%;
    white-space: nowrap;
}

.mf-unmatched[b-sttrt1g94i] {
    color: var(--text-secondary);
}

.mf-assign .form-select[b-sttrt1g94i] {
    min-width: 200px;
}

.mf-filter[b-sttrt1g94i] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-primary);
}
/* /Pages/Settings/ReportTemplateDesigner/ReportTemplateDesigner.razor.rz.scp.css */
/* Report template designer — 3-pane app (shadcn/green) filling the app shell's content area.
   It sits under the app's top bar rather than fixed over the whole window: the layout gives this
   route the bar and nothing else (AuthMainLayout.IsTopBarOnlyPage), and .amx-content is
   positioned, so inset: 0 here is exactly the space beneath the bar.

   Token-driven, light and dark (DESIGN_LANGUAGE.md §2): the --rtd-* roles below map onto the app's
   global tokens in app.css, which already flip under [data-theme="dark"], so most of the designer
   follows the theme for free. The roles the app has no token for - the tinted washes, the focus
   ring, the assistant's purple, the elevation - get light literals here and dark values in the
   block that follows. The child components (layer tree, node editor, palettes, style library)
   inherit these through the DOM. The one surface that does not follow the theme is the canvas's
   paper: it is the printed page and stays white in both (see DocumentCanvas.razor.css). */
.rtd-shell[b-zgv4lp7t4z] {
    /* Surfaces */
    --rtd-shell-bg: var(--bg-primary);
    --rtd-surface: var(--bg-card);
    --rtd-subtle: var(--bg-secondary);
    --rtd-hover: var(--bg-hover);
    --rtd-canvas: var(--bg-secondary);
    --rtd-input-bg: var(--bg-input);

    /* Text */
    --rtd-fg: var(--text-primary);
    --rtd-fg-soft: var(--text-secondary);
    --rtd-muted: var(--text-muted);
    /* Hints, placeholders, resting icons - not body text, so a step lighter than the app's muted. */
    --rtd-faint: #a1a1aa;
    --rtd-on-accent: #ffffff;

    /* Borders */
    --rtd-border: var(--border-color);
    --rtd-border-strong: var(--field-border-view);

    /* Accent - the designer's green, through the app's accessible success tokens */
    --rtd-accent: var(--accent-success-fill);
    --rtd-accent-bright: var(--accent-success);
    --rtd-accent-strong: var(--accent-success-text);
    --rtd-accent-soft: rgba(21, 128, 61, .08);
    --rtd-accent-soft-border: rgba(21, 128, 61, .28);
    --rtd-accent-wash: rgba(21, 128, 61, .16);
    --rtd-ring: rgba(22, 163, 74, .15);

    /* Status */
    --rtd-danger: var(--accent-danger-text);
    --rtd-danger-wash: rgba(220, 38, 38, .10);
    --rtd-danger-border: rgba(220, 38, 38, .35);
    --rtd-warn: var(--accent-warning-text);
    --rtd-warn-wash: rgba(245, 158, 11, .12);
    --rtd-warn-border: rgba(245, 158, 11, .40);
    --rtd-info: var(--accent-link);
    --rtd-info-wash: rgba(37, 99, 235, .08);
    --rtd-info-border: rgba(37, 99, 235, .28);

    /* The assistant - purple, so it reads as a different kind of thing from the template's own actions */
    --rtd-ai: #7c3aed;
    --rtd-ai-text: #6d28d9;
    --rtd-ai-fill: #6d28d9;
    --rtd-ai-wash: rgba(124, 58, 237, .07);
    --rtd-ai-border: rgba(124, 58, 237, .28);

    /* Elevation */
    --rtd-shadow-sm: var(--shadow-sm);
    --rtd-shadow-md: var(--shadow-md);
    --rtd-shadow-pop: 0 8px 24px rgba(0, 0, 0, .12);
    --rtd-shadow-modal: 0 12px 32px rgba(0, 0, 0, .14);

    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--rtd-shell-bg);
    color: var(--rtd-fg);
    /* Above the content it replaces, below the layout's own overlays and the top bar's menus. */
    z-index: 10;
    font-size: 0.9rem;
}

/* Dark. The mapped roles flip with the app's tokens; only the literal ones need values of their own.
   color-scheme so the native parts of the form controls - select lists, the colour and number
   pickers, scrollbars - are drawn dark as well, not as white blocks on a dark panel. */
[data-theme="dark"] .rtd-shell[b-zgv4lp7t4z] {
    color-scheme: dark;
    --rtd-faint: #6b7590;
    --rtd-accent-soft: rgba(34, 197, 94, .14);
    --rtd-accent-soft-border: rgba(34, 197, 94, .40);
    --rtd-accent-wash: rgba(34, 197, 94, .24);
    --rtd-ring: rgba(34, 197, 94, .30);
    --rtd-danger-wash: rgba(248, 113, 113, .16);
    --rtd-danger-border: rgba(248, 113, 113, .45);
    --rtd-warn-wash: rgba(245, 158, 11, .18);
    --rtd-warn-border: rgba(245, 158, 11, .50);
    --rtd-info-wash: rgba(96, 165, 250, .16);
    --rtd-info-border: rgba(96, 165, 250, .40);
    --rtd-ai: #a78bfa;
    --rtd-ai-text: #c4b5fd;
    --rtd-ai-wash: rgba(167, 139, 250, .14);
    --rtd-ai-border: rgba(167, 139, 250, .40);
    --rtd-shadow-pop: 0 12px 32px rgba(0, 0, 0, .55);
    --rtd-shadow-modal: 0 16px 40px rgba(0, 0, 0, .6);
}

/* ── Top bar ─────────────────────────────────────────────── */
.rtd-topbar[b-zgv4lp7t4z] {
    display: flex; align-items: center; justify-content: space-between;
    height: 56px; padding: 0 16px; background: var(--rtd-surface); border-bottom: 1px solid var(--rtd-border);
    flex-shrink: 0;
}
.rtd-topbar-left[b-zgv4lp7t4z] { display: flex; align-items: center; gap: 12px; }
.rtd-doc-icon[b-zgv4lp7t4z] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--rtd-accent); color: var(--rtd-on-accent);
}
.rtd-title[b-zgv4lp7t4z] { display: flex; flex-direction: column; line-height: 1.2; }
.rtd-title-name[b-zgv4lp7t4z] { font-weight: 600; font-size: 0.98rem; }
.rtd-title-sub[b-zgv4lp7t4z] { font-size: 0.76rem; color: var(--rtd-muted); }
.rtd-topbar-right[b-zgv4lp7t4z] { display: flex; align-items: center; gap: 10px; }
.rtd-unsaved[b-zgv4lp7t4z] { font-size: 0.76rem; color: var(--rtd-warn); display: inline-flex; align-items: center; gap: 6px; }
.rtd-unsaved i[b-zgv4lp7t4z] { font-size: 0.5rem; }

.rtd-btn[b-zgv4lp7t4z] {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
    border-radius: 8px; font-size: 0.85rem; font-weight: 550; cursor: pointer; border: 1px solid transparent;
    transition: background .12s ease, border-color .12s ease, filter .12s ease, opacity .12s ease;
}
.rtd-btn.primary[b-zgv4lp7t4z] { background: var(--rtd-accent); color: var(--rtd-on-accent); }
.rtd-btn.primary:hover:not(:disabled)[b-zgv4lp7t4z] { filter: brightness(1.05); }
.rtd-btn.primary:disabled[b-zgv4lp7t4z] { opacity: .5; cursor: default; }
.rtd-btn.ghost[b-zgv4lp7t4z] { background: var(--rtd-surface); border-color: var(--rtd-border); color: var(--rtd-fg); }
.rtd-btn.ghost:hover:not(:disabled)[b-zgv4lp7t4z] { background: var(--rtd-subtle); }
.rtd-btn.success[b-zgv4lp7t4z] { background: var(--rtd-accent); color: var(--rtd-on-accent); }
.rtd-btn.success:hover:not(:disabled)[b-zgv4lp7t4z] { filter: brightness(1.08); }
.rtd-btn.success:disabled[b-zgv4lp7t4z] { opacity: .5; cursor: default; }
/* The way back out of the designer. Amber, as the app's other "leave this page" controls are
   (Exit Settings), so it cannot be mistaken for one of the template's own actions - and dark text
   on the amber, since white fails contrast on it. --accent-warning is the app's global token. */
.rtd-btn.back[b-zgv4lp7t4z] {
    background: var(--accent-warning, #f59e0b); border-color: var(--accent-warning, #f59e0b);
    /* Black, and !important: app.css carries a blanket [data-theme="dark"] button:not(...) colour
       rule whose ten :not() arguments put it above anything written here, and it would repaint
       this near-white at rest and white on hover - on amber, in both cases. */
    color: #000 !important; border-radius: 999px; font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.rtd-btn.back:hover:not(:disabled)[b-zgv4lp7t4z] { filter: brightness(1.06); box-shadow: 0 4px 10px rgba(16, 24, 40, .12); }
.rtd-btn.back:active[b-zgv4lp7t4z] { transform: translateY(1px); }
.rtd-btn.back:focus-visible[b-zgv4lp7t4z] { outline: 2px solid var(--accent-primary, #2563eb); outline-offset: 2px; }

.rtd-divider-v[b-zgv4lp7t4z] { width: 1px; height: 24px; background: var(--rtd-border); margin: 0 2px; }

/* More menu */
.rtd-menu[b-zgv4lp7t4z] { position: relative; }
.rtd-menu-pop[b-zgv4lp7t4z] {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 190px;
    background: var(--rtd-surface); border: 1px solid var(--rtd-border); border-radius: 10px; padding: 6px;
    box-shadow: var(--rtd-shadow-pop); display: flex; flex-direction: column; gap: 2px;
}
.rtd-menu-item[b-zgv4lp7t4z] {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: transparent;
    padding: 9px 10px; border-radius: 7px; font-size: 0.86rem; color: var(--rtd-fg); cursor: pointer;
}
.rtd-menu-item:hover[b-zgv4lp7t4z] { background: var(--rtd-subtle); }
.rtd-menu-item.danger[b-zgv4lp7t4z] { color: var(--rtd-danger); }
.rtd-menu-item.danger:hover[b-zgv4lp7t4z] { background: var(--rtd-danger-wash); }
.rtd-menu-item i[b-zgv4lp7t4z] { width: 16px; text-align: center; color: var(--rtd-muted); }
.rtd-menu-item.danger i[b-zgv4lp7t4z] { color: var(--rtd-danger); }
.rtd-menu-hint[b-zgv4lp7t4z] { margin-left: auto; font-size: 0.72rem; color: var(--rtd-faint); }
.rtd-caret[b-zgv4lp7t4z] { font-size: 0.6rem; opacity: .6; }

/* Setup modal extras */
.rtd-ls-divider[b-zgv4lp7t4z] { height: 1px; background: var(--rtd-border); margin: 4px 0; }
.rtd-sub[b-zgv4lp7t4z] { font-size: 0.7rem !important; color: var(--rtd-faint) !important; }
.rtd-ls-field input[type=text][b-zgv4lp7t4z] {
    width: 100%; border: 1px solid var(--rtd-border); border-radius: 8px; padding: 9px 10px; font-size: 0.88rem; outline: none;
    background: var(--rtd-input-bg); color: var(--rtd-fg);
}
.rtd-ls-field input[type=text]:focus[b-zgv4lp7t4z] { border-color: var(--rtd-border-strong); box-shadow: 0 0 0 3px var(--rtd-ring); }
.rtd-seg[b-zgv4lp7t4z] { display: inline-flex; background: var(--rtd-subtle); border-radius: 8px; padding: 3px; gap: 3px; }
.rtd-seg-btn[b-zgv4lp7t4z] { border: none; background: transparent; color: var(--rtd-muted); padding: 7px 14px; border-radius: 6px; font-size: 0.82rem; font-weight: 550; cursor: pointer; }
.rtd-seg-btn.active[b-zgv4lp7t4z] { background: var(--rtd-surface); color: var(--rtd-accent-strong); }

/* View dropdown (Quick View / View with data) */
.rtd-btn.ghost.open[b-zgv4lp7t4z] { background: var(--rtd-subtle); border-color: var(--rtd-border-strong); }
.rtd-viewpop[b-zgv4lp7t4z] {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 320px;
    background: var(--rtd-surface); border: 1px solid var(--rtd-border); border-radius: 12px; padding: 8px;
    box-shadow: var(--rtd-shadow-modal); display: flex; flex-direction: column; gap: 4px;
    animation: rtd-pop-in-b-zgv4lp7t4z .12s ease;
}
@keyframes rtd-pop-in-b-zgv4lp7t4z { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.rtd-viewpop-head[b-zgv4lp7t4z] {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--rtd-faint);
    padding: 6px 8px 4px;
}
.rtd-viewopt[b-zgv4lp7t4z] {
    display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; border: none; background: transparent;
    padding: 10px; border-radius: 9px; cursor: pointer; transition: background .12s ease;
}
.rtd-viewopt:hover[b-zgv4lp7t4z] { background: var(--rtd-accent-soft); }
.rtd-viewopt.disabled[b-zgv4lp7t4z] { opacity: .5; }
.rtd-viewopt.disabled:hover[b-zgv4lp7t4z] { background: var(--rtd-subtle); }
.rtd-viewopt-ico[b-zgv4lp7t4z] {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.92rem; color: var(--rtd-on-accent);
}
/* Flat fills (DESIGN_LANGUAGE.md §1): the quick view's amber is the app's warning token. */
.rtd-viewopt-ico.quick[b-zgv4lp7t4z] { background: var(--accent-warning); }
.rtd-viewopt-ico.data[b-zgv4lp7t4z] { background: var(--rtd-accent); }
.rtd-viewopt-text[b-zgv4lp7t4z] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rtd-viewopt-title[b-zgv4lp7t4z] { font-weight: 600; font-size: 0.9rem; color: var(--rtd-fg); }
.rtd-viewopt-desc[b-zgv4lp7t4z] { font-size: 0.76rem; color: var(--rtd-muted); line-height: 1.35; }
.rtd-caret[b-zgv4lp7t4z] { transition: transform .15s ease; }
.rtd-btn.open .rtd-caret[b-zgv4lp7t4z] { transform: rotate(180deg); }

/* ── Body: 3 panes ───────────────────────────────────────── */
.rtd-loading[b-zgv4lp7t4z] { flex: 1; display: flex; align-items: center; justify-content: center; }
.rtd-body[b-zgv4lp7t4z] { flex: 1; display: grid; grid-template-columns: 280px 1fr 320px; min-height: 0; }
/* On wide screens there's plenty of dead space around the document — give the layer tree more room so deep,
   long node labels aren't cramped. Scales up in two steps; the canvas/properties keep their share. */
@media (min-width: 1500px) { .rtd-body[b-zgv4lp7t4z] { grid-template-columns: 340px 1fr 340px; } }
@media (min-width: 1900px) { .rtd-body[b-zgv4lp7t4z] { grid-template-columns: 380px 1fr 360px; } }
/* Layers panel tucked away: the canvas takes its column. (Two tracks, so the canvas and properties keep their
   places with the panel out of the grid; more specific than the width steps above, so it wins at every width.) */
.rtd-body.rtd-layers-hidden[b-zgv4lp7t4z] { grid-template-columns: minmax(0, 1fr) 320px; }
@media (min-width: 1500px) { .rtd-body.rtd-layers-hidden[b-zgv4lp7t4z] { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (min-width: 1900px) { .rtd-body.rtd-layers-hidden[b-zgv4lp7t4z] { grid-template-columns: minmax(0, 1fr) 360px; } }
.rtd-left[hidden][b-zgv4lp7t4z] { display: none; }

.rtd-left[b-zgv4lp7t4z], .rtd-right[b-zgv4lp7t4z] {
    background: var(--rtd-surface); display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.rtd-left[b-zgv4lp7t4z] { border-right: 1px solid var(--rtd-border); }
.rtd-right[b-zgv4lp7t4z] { border-left: 1px solid var(--rtd-border); }
.rtd-centre[b-zgv4lp7t4z] { overflow: auto; background: var(--rtd-canvas); min-height: 0; }

/* Empty properties hint (nothing selected) */
.rtd-empty-props[b-zgv4lp7t4z] {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 28px; text-align: center; color: var(--rtd-muted);
}
.rtd-empty-props i[b-zgv4lp7t4z] { font-size: 1.6rem; color: var(--rtd-faint); }
.rtd-empty-props p[b-zgv4lp7t4z] { margin: 0; font-size: 0.85rem; line-height: 1.5; max-width: 240px; }

/* Right-panel tab switcher (Build / Styles) */
.rtd-tabs[b-zgv4lp7t4z] {
    display: flex; gap: 4px; padding: 8px 8px 0; border-bottom: 1px solid var(--rtd-border); flex-shrink: 0;
}
.rtd-tab[b-zgv4lp7t4z] {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: none; background: transparent;
    font-size: 0.82rem; font-weight: 600; color: var(--rtd-muted); cursor: pointer; border-radius: 8px 8px 0 0;
    border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s ease, background .12s ease;
}
.rtd-tab:hover[b-zgv4lp7t4z] { color: var(--rtd-fg); background: var(--rtd-hover); }
.rtd-tab.active[b-zgv4lp7t4z] { color: var(--rtd-accent); border-bottom-color: var(--rtd-accent); }
.rtd-tab i[b-zgv4lp7t4z] { font-size: 0.78rem; }

/* The Styles panel scrolls within the right column */
.rtd-style-scroll[b-zgv4lp7t4z] { overflow-y: auto; flex: 1; padding: 12px; }

.rtd-pane-head[b-zgv4lp7t4z] {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    height: 42px; padding: 0 14px; font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--rtd-muted); border-bottom: 1px solid var(--rtd-border); flex-shrink: 0;
}
.rtd-pane-head i[b-zgv4lp7t4z] { color: var(--rtd-accent); }
/* The head's title can be long (e.g. "Edit Data Field · Condition") — truncate it rather than widen the pane. */
.rtd-pane-head > span[b-zgv4lp7t4z] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rtd-tree[b-zgv4lp7t4z] { overflow-y: auto; flex: 1; padding: 6px; }

/* Layers search box - under the "Layers" head, above the tree it filters. The same field
   treatment as the style library's inputs, so it follows the theme with the rest of the pane. */
.rtd-tree-search[b-zgv4lp7t4z] {
    display: flex; align-items: center; gap: 8px; margin: 6px 8px 2px;
    border: 1px solid var(--rtd-border); border-radius: 8px; padding: 6px 9px;
    background: var(--rtd-input-bg); color: var(--rtd-faint);
}
.rtd-tree-search:focus-within[b-zgv4lp7t4z] { border-color: var(--rtd-border-strong); box-shadow: 0 0 0 3px var(--rtd-ring); }
.rtd-tree-search > i[b-zgv4lp7t4z] { font-size: 0.78rem; flex-shrink: 0; }
.rtd-tree-search input[b-zgv4lp7t4z] {
    border: none; outline: none; background: transparent; flex: 1; min-width: 0;
    font-size: 0.82rem; color: var(--rtd-fg);
}
.rtd-tree-search input[b-zgv4lp7t4z]::placeholder { color: var(--rtd-faint); }
.rtd-tree-search-clear[b-zgv4lp7t4z] {
    border: none; background: transparent; color: var(--rtd-muted); cursor: pointer; padding: 2px; font-size: 0.78rem;
    display: inline-flex; border-radius: 4px; flex-shrink: 0;
}
.rtd-tree-search-clear:hover[b-zgv4lp7t4z] { background: var(--rtd-hover); color: var(--rtd-fg); }

.rtd-icon-btn[b-zgv4lp7t4z] {
    border: none; background: transparent; color: var(--rtd-muted); cursor: pointer;
    width: 24px; height: 24px; border-radius: 6px;
}
.rtd-icon-btn:hover[b-zgv4lp7t4z] { background: var(--rtd-subtle); color: var(--rtd-fg); }

/* ── Apply Local Styles modal ── */
.rtd-ls-title[b-zgv4lp7t4z] { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.rtd-ls-title i[b-zgv4lp7t4z] { color: var(--rtd-accent); }
.rtd-ls[b-zgv4lp7t4z] { display: flex; flex-direction: column; gap: 16px; padding: 4px 2px; }
.rtd-ls-note[b-zgv4lp7t4z] {
    display: flex; align-items: flex-start; gap: 8px; font-size: 0.82rem; color: var(--rtd-accent-strong);
    background: var(--rtd-accent-soft); border: 1px solid var(--rtd-accent-soft-border); border-radius: 8px; padding: 10px 12px;
}
.rtd-ls-row[b-zgv4lp7t4z] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rtd-ls-field[b-zgv4lp7t4z] { display: flex; flex-direction: column; gap: 6px; }
.rtd-ls-field > label[b-zgv4lp7t4z] { font-size: 0.78rem; font-weight: 600; color: var(--rtd-muted); }
.rtd-ls-field input[type=color][b-zgv4lp7t4z] {
    width: 100%; height: 40px; border: 1px solid var(--rtd-border); border-radius: 8px; padding: 2px; cursor: pointer;
    background: var(--rtd-input-bg);
}
.rtd-ls-field input[type=number][b-zgv4lp7t4z], .rtd-ls-field select[b-zgv4lp7t4z] {
    width: 100%; border: 1px solid var(--rtd-border); border-radius: 8px; padding: 9px 10px; font-size: 0.88rem; outline: none;
    background: var(--rtd-input-bg); color: var(--rtd-fg);
}
.rtd-ls-field input:focus[b-zgv4lp7t4z], .rtd-ls-field select:focus[b-zgv4lp7t4z] { border-color: var(--rtd-border-strong); box-shadow: 0 0 0 3px var(--rtd-ring); }
.rtd-ls-toggles[b-zgv4lp7t4z] { display: flex; flex-wrap: wrap; gap: 18px; }
.rtd-ls-toggles label[b-zgv4lp7t4z] { display: inline-flex; align-items: center; gap: 7px; font-size: 0.9rem; cursor: pointer; }
.rtd-ls-hint[b-zgv4lp7t4z] { margin: -8px 0 0; font-size: 0.8rem; color: var(--rtd-muted); }

/* ── Choose Report modal ─────────────────────────────────────────── */
.rp[b-zgv4lp7t4z] { display: flex; flex-direction: column; gap: 16px; }

/* Copy vs link — selectable cards (side by side, they have room in the modal) */
.rp-modes[b-zgv4lp7t4z] { display: flex; gap: 10px; }
.rp-mode[b-zgv4lp7t4z] {
    flex: 1; display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
    border: 1px solid var(--rtd-border); border-radius: 10px; padding: 12px 14px; background: var(--rtd-surface);
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.rp-mode:hover[b-zgv4lp7t4z] { border-color: var(--rtd-border-strong); }
.rp-mode.active[b-zgv4lp7t4z] { border-color: var(--rtd-accent-bright); background: var(--rtd-accent-soft); box-shadow: 0 0 0 1px var(--rtd-accent-bright) inset; }
.rp-mode-top[b-zgv4lp7t4z] { font-size: 0.92rem; font-weight: 650; color: var(--rtd-fg); display: inline-flex; align-items: center; gap: 8px; }
.rp-mode.active .rp-mode-top[b-zgv4lp7t4z] { color: var(--rtd-accent-strong); }
.rp-mode.active .rp-mode-top i[b-zgv4lp7t4z] { color: var(--rtd-accent); }
.rp-mode-top i[b-zgv4lp7t4z] { color: var(--rtd-faint); width: 15px; text-align: center; }
.rp-mode-sub[b-zgv4lp7t4z] { font-size: 0.8rem; color: var(--rtd-muted); line-height: 1.4; }

/* Search row */
.rp-search[b-zgv4lp7t4z] { display: flex; align-items: center; gap: 10px; position: relative; }
.rp-search-ico[b-zgv4lp7t4z] { position: absolute; left: 13px; color: var(--rtd-faint); font-size: 0.88rem; pointer-events: none; }
.rp-search-input[b-zgv4lp7t4z] {
    flex: 1; min-width: 0; border: 1px solid var(--rtd-border); border-radius: 9px; padding: 10px 12px 10px 36px;
    font-size: 0.9rem; background: var(--rtd-input-bg); color: var(--rtd-fg); transition: border-color .12s ease, box-shadow .12s ease;
}
.rp-search-input:focus[b-zgv4lp7t4z] { outline: none; border-color: var(--rtd-accent-bright); box-shadow: 0 0 0 3px var(--rtd-ring); }

/* Scope toggle + filter */
.rp-scope[b-zgv4lp7t4z] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rp-check[b-zgv4lp7t4z] { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--rtd-fg); cursor: pointer; }

/* Results list */
.rp-list[b-zgv4lp7t4z] {
    max-height: 360px; overflow-y: auto; border: 1px solid var(--rtd-border); border-radius: 10px; background: var(--rtd-surface); padding: 6px;
}
.rp-state[b-zgv4lp7t4z] { display: flex; align-items: center; justify-content: center; color: var(--rtd-faint); font-size: 0.9rem; padding: 40px 8px; }
.rp-cat[b-zgv4lp7t4z] {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rtd-faint);
    padding: 12px 10px 4px; position: sticky; top: 0; background: var(--rtd-surface); z-index: 1;
}
.rp-item[b-zgv4lp7t4z] {
    display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: none; background: none;
    border-radius: 8px; padding: 10px 10px; cursor: pointer; transition: background .1s ease;
}
.rp-item:hover:not(:disabled)[b-zgv4lp7t4z] { background: var(--rtd-accent-soft); }
.rp-item:disabled[b-zgv4lp7t4z] { opacity: .5; cursor: default; }
.rp-item > i[b-zgv4lp7t4z] { color: var(--rtd-faint); font-size: 0.92rem; width: 18px; text-align: center; flex-shrink: 0; }
.rp-item:hover:not(:disabled) > i[b-zgv4lp7t4z] { color: var(--rtd-accent-bright); }
.rp-item-text[b-zgv4lp7t4z] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp-item-name[b-zgv4lp7t4z] { font-size: 0.9rem; color: var(--rtd-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-item:hover:not(:disabled) .rp-item-name[b-zgv4lp7t4z] { color: var(--rtd-accent-strong); }
.rp-item-code[b-zgv4lp7t4z] {
    font-size: 0.76rem; color: var(--rtd-faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Chart count, shown when the picker is choosing a report for a chart node. */
.rp-item-charts[b-zgv4lp7t4z] { margin-left: auto; flex: none; font-size: 0.76rem; color: var(--rtd-muted); font-variant-numeric: tabular-nums; }
.rp-item-charts.none[b-zgv4lp7t4z] { color: var(--rtd-warn); }

/* ── AI top-bar button + Floating assistant ("little friend") ────── */
.rtd-btn.ai[b-zgv4lp7t4z] { background: var(--rtd-surface); border-color: var(--rtd-ai-border); color: var(--rtd-ai-text); }
.rtd-btn.ai:hover:not(:disabled)[b-zgv4lp7t4z] { background: var(--rtd-ai-wash); border-color: var(--rtd-ai); }
.rtd-btn.ai i[b-zgv4lp7t4z] { color: var(--rtd-ai); }

.aiw-bubble[b-zgv4lp7t4z] {
    position: fixed; right: 24px; bottom: 24px; z-index: 1050;
    width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--rtd-ai-fill); color: var(--rtd-on-accent); font-size: 1.35rem;
    box-shadow: 0 8px 24px rgba(124,58,237,.4); display: inline-flex; align-items: center; justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease;
}
.aiw-bubble:hover[b-zgv4lp7t4z] { transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 30px rgba(124,58,237,.5); }

.aiw-panel[b-zgv4lp7t4z] {
    position: fixed; right: 24px; bottom: 24px; z-index: 1050;
    width: 380px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 120px);
    display: flex; flex-direction: column; background: var(--rtd-surface); border-radius: 16px; overflow: hidden;
    border: 1px solid var(--rtd-border); box-shadow: var(--rtd-shadow-modal);
    animation: aiw-pop-b-zgv4lp7t4z .16s ease-out;
}
@keyframes aiw-pop-b-zgv4lp7t4z { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.aiw-panel-head[b-zgv4lp7t4z] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; background: var(--rtd-ai-fill); color: var(--rtd-on-accent);
}
.aiw-panel-title[b-zgv4lp7t4z] { font-weight: 650; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px; }
.aiw-icon-btn[b-zgv4lp7t4z] { border: none; background: rgba(255,255,255,.15); color: #fff; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.aiw-icon-btn:hover[b-zgv4lp7t4z] { background: rgba(255,255,255,.28); }

/* The thread sits on a faint purple tint of the panel surface, so the messages' own cards lift off it. */
.aiw-chat[b-zgv4lp7t4z] {
    flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px;
    background: color-mix(in srgb, var(--rtd-ai) 4%, var(--rtd-surface));
}

.aiw-welcome[b-zgv4lp7t4z] { color: var(--rtd-fg-soft); font-size: 0.86rem; display: flex; flex-direction: column; gap: 8px; }
.aiw-welcome p[b-zgv4lp7t4z] { margin: 0 0 2px; }
.aiw-welcome-lead[b-zgv4lp7t4z] { line-height: 1.45; }
.aiw-welcome-try[b-zgv4lp7t4z] { font-weight: 600; color: var(--rtd-ai-text); margin-top: 4px; }
.aiw-chip[b-zgv4lp7t4z] {
    text-align: left; border: 1px solid var(--rtd-ai-border); background: var(--rtd-surface); color: var(--rtd-ai-text); border-radius: 10px;
    padding: 8px 11px; font-size: 0.83rem; cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.aiw-chip:hover[b-zgv4lp7t4z] { background: var(--rtd-ai-wash); border-color: var(--rtd-ai); }

.aiw-msg[b-zgv4lp7t4z] { display: flex; gap: 8px; align-items: flex-start; max-width: 100%; }
.aiw-msg.user[b-zgv4lp7t4z] { justify-content: flex-end; }
.aiw-msg-ico[b-zgv4lp7t4z] { color: var(--rtd-ai); font-size: 0.8rem; margin-top: 6px; flex-shrink: 0; }
.aiw-bubble-text[b-zgv4lp7t4z] {
    font-size: 0.87rem; line-height: 1.45; padding: 9px 12px; border-radius: 12px; max-width: 82%;
    white-space: pre-wrap; word-break: break-word;
}
.aiw-msg.ai .aiw-bubble-text[b-zgv4lp7t4z] { background: var(--rtd-surface); border: 1px solid var(--rtd-border); color: var(--rtd-fg); border-top-left-radius: 4px; }
.aiw-msg.user .aiw-bubble-text[b-zgv4lp7t4z] { background: var(--rtd-ai-fill); color: var(--rtd-on-accent); border-top-right-radius: 4px; }
/* Per-change chips under an AI reply — shows what it actually did, with a little pop-in */
.aiw-changes[b-zgv4lp7t4z] { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.aiw-change[b-zgv4lp7t4z] {
    display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
    font-size: 0.78rem; color: var(--rtd-accent-strong); background: var(--rtd-accent-soft); border: 1px solid var(--rtd-accent-soft-border);
    border-radius: 8px; padding: 4px 9px; animation: aiw-change-in-b-zgv4lp7t4z .22s ease-out both;
}
.aiw-change i[b-zgv4lp7t4z] { color: var(--rtd-accent-bright); font-size: 0.74rem; }
@keyframes aiw-change-in-b-zgv4lp7t4z { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* Clickable "did you mean" report suggestions (shown when the AI match is ambiguous) */
.aiw-suggests[b-zgv4lp7t4z] { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.aiw-suggest[b-zgv4lp7t4z] {
    display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left; cursor: pointer;
    font-size: 0.8rem; color: var(--rtd-info); background: var(--rtd-info-wash); border: 1px solid var(--rtd-info-border);
    border-radius: 9px; padding: 8px 10px; transition: background .12s ease, border-color .12s ease;
    animation: aiw-change-in-b-zgv4lp7t4z .22s ease-out both;
}
.aiw-suggest:hover[b-zgv4lp7t4z] { background: color-mix(in srgb, var(--rtd-info) 16%, var(--rtd-surface)); border-color: var(--rtd-info); }
.aiw-suggest > i[b-zgv4lp7t4z] { color: var(--rtd-info); font-size: 0.8rem; flex-shrink: 0; margin-top: 2px; }
.aiw-suggest-body[b-zgv4lp7t4z] { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.aiw-suggest-name[b-zgv4lp7t4z] { font-weight: 600; color: var(--rtd-fg); line-height: 1.25; }
.aiw-suggest-meta[b-zgv4lp7t4z] { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.aiw-suggest-cat[b-zgv4lp7t4z] { font-size: 0.68rem; color: var(--rtd-info); background: var(--rtd-surface); border: 1px solid var(--rtd-info-border); border-radius: 6px; padding: 1px 6px; }
.aiw-suggest-code[b-zgv4lp7t4z] { font-size: 0.66rem; font-family: monospace; color: var(--rtd-muted); background: var(--rtd-subtle); border: 1px solid var(--rtd-border); border-radius: 6px; padding: 1px 6px; }
.aiw-suggest-id[b-zgv4lp7t4z] { font-size: 0.66rem; color: var(--rtd-faint); }

/* Animated "typing" dots while the assistant thinks */
.aiw-typing[b-zgv4lp7t4z] { display: inline-flex; gap: 4px; align-items: center; }
.aiw-typing span[b-zgv4lp7t4z] { width: 7px; height: 7px; border-radius: 50%; background: var(--rtd-ai); animation: aiw-dot-b-zgv4lp7t4z 1s infinite ease-in-out; }
.aiw-typing span:nth-child(2)[b-zgv4lp7t4z] { animation-delay: .15s; }
.aiw-typing span:nth-child(3)[b-zgv4lp7t4z] { animation-delay: .3s; }
@keyframes aiw-dot-b-zgv4lp7t4z { 0%, 80%, 100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }

.aiw-warn[b-zgv4lp7t4z] { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--rtd-warn); background: var(--rtd-warn-wash); border-top: 1px solid var(--rtd-warn-border); padding: 8px 12px; }

.aiw-composer[b-zgv4lp7t4z] { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--rtd-border); background: var(--rtd-surface); }
.aiw-composer-input[b-zgv4lp7t4z] {
    flex: 1; min-width: 0; border: 1px solid var(--rtd-border); border-radius: 10px; padding: 9px 12px; font-size: 0.88rem;
    background: var(--rtd-input-bg); color: var(--rtd-fg); transition: border-color .12s ease, box-shadow .12s ease;
}
.aiw-composer-input:focus[b-zgv4lp7t4z] { outline: none; border-color: var(--rtd-ai); box-shadow: 0 0 0 3px var(--rtd-ai-wash); }
.aiw-send[b-zgv4lp7t4z] {
    flex-shrink: 0; width: 40px; border: none; border-radius: 10px; cursor: pointer; color: var(--rtd-on-accent);
    background: var(--rtd-ai-fill); display: inline-flex; align-items: center; justify-content: center;
}
.aiw-send:hover:not(:disabled)[b-zgv4lp7t4z] { filter: brightness(1.08); }
.aiw-send:disabled[b-zgv4lp7t4z] { opacity: .45; cursor: default; }
/* /Pages/Settings/SystemSettings/IntegrationEndpoints.razor.rz.scp.css */
.integration-header[b-z934k6rti5], .integration-actions[b-z934k6rti5] { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.integration-header[b-z934k6rti5] { justify-content: space-between; }
.integration-header p[b-z934k6rti5] { margin: 0; color: var(--text-secondary); font-size: .875rem; }
.integration-actions[b-z934k6rti5] { gap: .5rem; }
.integration-button[b-z934k6rti5] { min-height: 36px; padding: .5rem 1rem; border: 1px solid var(--border-interactive); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font-size: .875rem; font-weight: 600; }
.integration-button:hover:not(:disabled)[b-z934k6rti5] { background: var(--bg-hover); }
.integration-button.integration-primary[b-z934k6rti5], .integration-button.integration-primary:hover:not(:disabled)[b-z934k6rti5] { background: var(--accent-success-fill); border-color: var(--accent-success-fill); color: var(--text-on-dark); }
.integration-button:disabled[b-z934k6rti5] { opacity: .5; cursor: default; }
.integration-page[b-z934k6rti5] { color: var(--text-primary); display: grid; gap: 1.25rem; }
.integration-section[b-z934k6rti5] { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.25rem; }
.integration-section h2[b-z934k6rti5] { font-size: 1rem; font-weight: 600; margin: 0 0 1rem; }
.integration-fields[b-z934k6rti5] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.integration-wide[b-z934k6rti5] { grid-column: 1 / -1; }
.integration-field[b-z934k6rti5] { min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.integration-label[b-z934k6rti5] { color: var(--text-secondary); font-size: .8125rem; font-weight: 600; margin: 0; }
.integration-field input[b-z934k6rti5] { width: 100%; min-width: 0; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-interactive); border-radius: 8px; }
.integration-help[b-z934k6rti5] { color: var(--text-muted); font-size: .8125rem; margin: 0; }
.integration-clear[b-z934k6rti5] { display: flex; align-items: center; gap: .5rem; }
.integration-clear input[b-z934k6rti5] { width: 24px; height: 24px; accent-color: var(--accent-success-fill); }
.integration-readout[b-z934k6rti5] { display: grid; gap: 1rem; margin: 0; }
.integration-readout dt[b-z934k6rti5] { color: var(--text-secondary); font-size: .8125rem; font-weight: 600; }
.integration-readout dd[b-z934k6rti5] { margin: .25rem 0 0; overflow-wrap: anywhere; }
.integration-page:focus-visible[b-z934k6rti5], .integration-page input:focus-visible[b-z934k6rti5], .integration-header button:focus-visible[b-z934k6rti5] { outline: 2px solid var(--border-focus, var(--border-interactive)); outline-offset: 3px; }
@media (max-width: 640px) { .integration-fields[b-z934k6rti5] { grid-template-columns: minmax(0, 1fr); } }