/* ============================================================
   LEOS page system (lx-*) -- global stylesheet for every MudBlazor page,
   dialog and menu, linked from MainLayout and PublicLayout via
   Components/LxStyles.razor. Moved out of wwwroot/css/leos-lx.css so
   PublicLayout pages can share it.

   Selectors use .leos-page[class] / .leos-overlays[class]: the [class]
   attribute keeps the same specificity the scoped-CSS attribute gave
   these rules before the move, so they still win ties against
   MudBlazor's own rules.
   ============================================================ */

.leos-page[class] {
    --lx-line: var(--mud-palette-lines-default);
    --lx-text: var(--mud-palette-text-primary);
    --lx-muted: var(--mud-palette-text-secondary);
    --lx-accent: var(--mud-palette-primary);
    --lx-card: var(--mud-palette-surface);
    --lx-head-bg: color-mix(in srgb, var(--mud-palette-text-primary) 3%, var(--mud-palette-surface));
}

/* ---- Page header: breadcrumb kicker, title, optional subtitle, actions ---- */
.leos-page[class] .lx-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 16px;
}
.leos-page[class] .lx-page-head-main { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.leos-page[class] .lx-page-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.leos-page[class] .lx-crumb {
    font-size: 13px;
    font-weight: 500;
    color: var(--lx-accent);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    align-self: flex-start;
}
.leos-page[class] a.lx-crumb:hover, .leos-page[class] button.lx-crumb:hover { text-decoration: underline; }
.leos-page[class] .lx-title { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 700; color: var(--lx-text); }
.leos-page[class] .lx-subtitle { margin: 0; font-size: 14px; font-weight: 500; color: var(--lx-accent); }
.leos-page[class] .lx-page-sub { margin: 0; font-size: 14px; color: var(--lx-muted); }
.leos-page[class] .lx-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---- Toolbar row of secondary actions + helper text ---- */
.leos-page[class] .lx-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.leos-page[class] .lx-hint { display: block; margin-top: 8px; font-size: 13px; color: var(--lx-muted); }
.leos-page[class] .lx-section { margin-bottom: 16px; }

/* ---- Filter bar: search + selects on one line ---- */
.leos-page[class] .lx-filters {
    display: grid;
    grid-template-columns: minmax(260px, 1.25fr) repeat(auto-fit, minmax(200px, 1fr));
    align-items: end;
    gap: 12px;
    margin-bottom: 16px;
}
.leos-page[class] .lx-filters .mud-input-control { margin: 0; }

/* ---- Card container (tables, panels) ---- */
.leos-page[class] .lx-card {
    background: var(--lx-card);
    /* Own text color so cards stay readable on dark portal backdrops. */
    color: var(--lx-text);
    border: 1px solid var(--lx-line);
    border-radius: 10px;
    overflow: hidden;
}
.leos-page[class] .lx-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--lx-line);
}
.leos-page[class] .lx-card-title { margin: 0; font-size: 16px; font-weight: 650; color: var(--lx-text); }
.leos-page[class] .lx-card-count { font-weight: 500; color: var(--lx-muted); }
.leos-page[class] .lx-card-body { padding: 16px; }

/* MudTable inside an lx-card: flat, hairline rows, quiet header. */
.leos-page[class] .lx-card .mud-table { background: transparent; box-shadow: none; border-radius: 0; }
/* Cell sizing, header and hover live in "Tight, clean tables" below. */
.leos-page[class] .lx-strong { font-weight: 650; }
.leos-page[class] .lx-dim { color: var(--lx-muted); }

/* ---- Tight, clean tables (every MudTable / MudDataGrid / MudSimpleTable
   on every page, dense or not) ----
   ~36px rows, 13px text, hairline row dividers only, quiet sticky-ready
   header, compact row-action icons and pills, compact pager. */
.leos-page[class] .mud-table-root { border-collapse: separate; border-spacing: 0; }
.leos-page[class] .mud-table .mud-table-cell,
.leos-page[class] .mud-simple-table table * tr > td,
.leos-page[class] .mud-simple-table table * tr > th {
    padding: 7px 12px;
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: 0;
    border-bottom: 1px solid var(--lx-line);
    vertical-align: middle;
}
.leos-page[class] .mud-table .mud-table-cell:first-child,
.leos-page[class] .mud-simple-table table * tr > :first-child { padding-left: 16px; }
.leos-page[class] .mud-table .mud-table-cell:last-child,
.leos-page[class] .mud-simple-table table * tr > :last-child { padding-right: 16px; }

.leos-page[class] .mud-table-head .mud-table-cell,
.leos-page[class] .mud-simple-table thead th {
    padding-top: 8px;
    padding-bottom: 8px;
    background: var(--lx-head-bg);
    color: var(--lx-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.leos-page[class] .mud-table-head .mud-table-sort-label,
.leos-page[class] .mud-table-head .mud-button-root { font-size: 12px; font-weight: 600; color: var(--lx-muted); }
.leos-page[class] .mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: 0; }
.leos-page[class] .mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) .mud-table-cell { background: transparent; }
.leos-page[class] .mud-table-hover .mud-table-body .mud-table-row:hover .mud-table-cell,
.leos-page[class] .mud-simple-table.mud-table-hover tbody tr:hover > td {
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

/* Compact controls inside cells so they don't stretch row height. */
.leos-page[class] .mud-table-cell .mud-icon-button,
.leos-page[class] .mud-simple-table td .mud-icon-button { padding: 4px; }
.leos-page[class] .mud-table-cell .mud-icon-button .mud-icon-root,
.leos-page[class] .mud-simple-table td .mud-icon-button .mud-icon-root { font-size: 18px; }
.leos-page[class] .mud-table-cell .mud-button-root.mud-button-size-small,
.leos-page[class] .mud-table-cell .mud-button-root:not(.mud-icon-button) { padding-top: 2px; padding-bottom: 2px; min-height: 26px; }
.leos-page[class] .mud-table-cell .mud-checkbox .mud-button-root { padding: 2px; }
.leos-page[class] .mud-table-cell .mud-chip { height: 22px; margin: 0 4px 0 0; font-size: 12px; }
.leos-page[class] .mud-table-cell .lx-pill { height: 20px; font-size: 11.5px; }

/* Compact pager. */
.leos-page[class] .mud-table-pagination-toolbar {
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    border-top: 1px solid var(--lx-line);
    border-bottom: 0;
    font-size: 13px;
}
.leos-page[class] .mud-table-pagination-toolbar .mud-icon-button { padding: 6px; }

/* ---- Status pills ---- */
.leos-page[class] .lx-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}
.leos-page[class] .lx-pill .mud-icon-root { font-size: 14px; }
.leos-page[class] .lx-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.leos-page[class] .lx-pill-good { background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent); color: color-mix(in srgb, var(--mud-palette-success) 65%, var(--mud-palette-text-primary)); }
.leos-page[class] .lx-pill-warn { background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent); color: color-mix(in srgb, var(--mud-palette-warning) 60%, var(--mud-palette-text-primary)); }
.leos-page[class] .lx-pill-bad { background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent); color: color-mix(in srgb, var(--mud-palette-error) 65%, var(--mud-palette-text-primary)); }
.leos-page[class] .lx-pill-info { background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent); color: color-mix(in srgb, var(--mud-palette-info) 65%, var(--mud-palette-text-primary)); }
.leos-page[class] .lx-pill-neutral { background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent); color: var(--lx-muted); }

.leos-mode-light .leos-page[class] .lx-pill-good { background: #e8f1ea; color: #245c39; }
.leos-mode-light .leos-page[class] .lx-pill-warn { background: #fbf1de; color: #7a5314; }
.leos-mode-light .leos-page[class] .lx-pill-bad { background: #f7e7e8; color: #8c2f34; }
.leos-mode-light .leos-page[class] .lx-pill-info { background: #e7eef7; color: #1b4f86; }
.leos-mode-light .leos-page[class] .lx-pill-neutral { background: #eef1f4; color: #4a525c; }
.leos-mode-light .leos-page[class] .lx-pill-warn.lx-pill-strong { background: #fbe3b0; }

/* ---- MudChip readability in light mode ----
   Filled chips put dark text on solid amber/green, and text/outlined chips
   put amber/green text straight on white -- both hard to read. In light
   mode every colored MudChip uses the same tint + dark ink as lx-pill, so
   chips not yet converted to LxPill read the same. Dark mode is unchanged. */
.leos-mode-light .leos-page[class] .mud-chip.mud-chip-color-success { background-color: #e8f1ea; color: #245c39; border-color: #bcd9c5; --mud-ripple-color: #245c39 !important; }
.leos-mode-light .leos-page[class] .mud-chip.mud-chip-color-warning { background-color: #fbf1de; color: #7a5314; border-color: #ecd3a3; --mud-ripple-color: #7a5314 !important; }
.leos-mode-light .leos-page[class] .mud-chip.mud-chip-color-error { background-color: #f7e7e8; color: #8c2f34; border-color: #e7b9bc; --mud-ripple-color: #8c2f34 !important; }
.leos-mode-light .leos-page[class] .mud-chip.mud-chip-color-info,
.leos-mode-light .leos-page[class] .mud-chip.mud-chip-color-primary { background-color: #e7eef7; color: #1b4f86; border-color: #bcd3ff; --mud-ripple-color: #1b4f86 !important; }
.leos-mode-light .leos-page[class] .mud-chip.mud-chip-color-secondary,
.leos-mode-light .leos-page[class] .mud-chip.mud-chip-color-tertiary { background-color: #e3f3f5; color: #0b5f69; border-color: #b4dde2; --mud-ripple-color: #0b5f69 !important; }
.leos-mode-light .leos-page[class] .mud-chip.mud-chip-color-default { background-color: #eef1f4; color: #4a525c; border-color: #d8dde5; }
.leos-mode-light .leos-page[class] .mud-chip .mud-chip-icon,
.leos-mode-light .leos-page[class] .mud-chip .mud-icon-root { color: inherit; }

/* ---- Row actions (open / edit / delete icon buttons) ---- */
.leos-page[class] .lx-row-actions { display: flex; justify-content: flex-end; gap: 2px; }
.leos-page[class] .lx-row-actions .mud-icon-button { color: var(--lx-muted); }
.leos-page[class] .lx-row-actions .mud-icon-button:hover { color: var(--lx-accent); }
.leos-page[class] .lx-row-actions .lx-danger.mud-icon-button { color: var(--mud-palette-error); }

/* ---- Info panel rows (label / value) ---- */
.leos-page[class] .lx-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px; }
.leos-page[class] .lx-info-label { display: block; font-size: 12px; font-weight: 600; color: var(--lx-muted); margin-bottom: 2px; }
.leos-page[class] .lx-info-value { font-size: 14px; color: var(--lx-text); overflow-wrap: anywhere; }

/* ---- Small helpers requested during the Phase 1 page conversions ---- */
.leos-page[class] .lx-hint-inline { margin-top: 0; }
.leos-page[class] .lx-card-foot {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-top: 1px solid var(--lx-line);
}
.leos-page[class] .lx-section-title { margin: 0 0 8px; font-size: 14px; font-weight: 650; color: var(--lx-text); }
/* lx-danger on outlined/text buttons (Deactivate, Reject, Remove...),
   not just row-action icons. */
.leos-page[class] .mud-button-root.lx-danger:not(.mud-icon-button) {
    color: var(--mud-palette-error);
    border-color: color-mix(in srgb, var(--mud-palette-error) 50%, transparent);
}

/* ---- Detail-page helpers requested during the Phase 2 conversions ---- */
.leos-page[class] .lx-info-wide { grid-column: 1 / -1; }
.leos-page[class] .lx-info-value.lx-pre { white-space: pre-wrap; }
.leos-page[class] .lx-meta { font-size: 12px; color: var(--lx-muted); }
.leos-page[class] .lx-num { font-variant-numeric: tabular-nums; }
.leos-page[class] .lx-empty { padding: 16px; color: var(--lx-muted); font-size: 13px; }
/* Padded block with a hairline top border, for content under a table in a card. */
.leos-page[class] .lx-card-section { padding: 12px 16px; border-top: 1px solid var(--lx-line); }
/* ---- Phase 3 helpers ---- */
.leos-page[class] .lx-pre { white-space: pre-wrap; }
/* Equal-height cards in a grid row (LxCard Stretch="true"). */
.leos-page[class] .lx-card-stretch { height: 100%; display: flex; flex-direction: column; }
.leos-page[class] .lx-card-stretch > .lx-card-body { flex: 1 1 auto; }
/* Toolbar with items pushed to both ends. */
.leos-page[class] .lx-toolbar-between { justify-content: space-between; }
/* Hairline-divided list rows inside a card (non-table lists: receipts,
   checklist items, todo rows, channel rails). */
.leos-page[class] .lx-list-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; border-bottom: 1px solid var(--lx-line);
    color: var(--lx-text); text-decoration: none;
}
.leos-page[class] .lx-list-item:last-child { border-bottom: 0; }
.leos-page[class] .lx-list-item.is-clickable { cursor: pointer; }
.leos-page[class] .lx-list-item.is-clickable:hover { background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent); }
.leos-page[class] .lx-list-item.is-active { background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); box-shadow: inset 3px 0 0 var(--lx-accent); }
/* lx-list-item rendered as a real <button> (keyboard focusable): undo
   MudBlazor's global centered inline-flex button rule. */
.leos-page[class] button.lx-list-item {
    display: flex; justify-content: flex-start; align-items: center;
    width: 100%; margin: 0;
    background: transparent; border: 0; border-bottom: 1px solid var(--lx-line); border-radius: 0;
    font: inherit; text-align: left; cursor: pointer;
}
.leos-page[class] button.lx-list-item:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: -2px; }
.leos-page[class] .lx-block { display: block; }
.leos-page[class] .lx-list-item.is-stacked { flex-direction: column; align-items: stretch; gap: 4px; }
.leos-page[class] .lx-card-section.is-first { border-top: 0; }
.leos-page[class] .lx-card-intro { padding: 8px 16px; font-size: 12px; color: var(--lx-muted); border-bottom: 1px solid var(--lx-line); }
.leos-page[class] .lx-toolbar-end { justify-content: flex-end; }
.leos-page[class] .lx-mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px; }

/* Clickable KPI tiles (quick filters) and their selected state. */
.leos-page[class] .lx-kpi.is-clickable { cursor: pointer; text-align: left; font: inherit; transition: border-color .15s; }
.leos-page[class] .lx-kpi.is-clickable:hover { border-color: var(--lx-accent); }
.leos-page[class] .lx-kpi.is-selected { border-color: var(--lx-accent); box-shadow: inset 0 0 0 1px var(--lx-accent); }

/* ---- Phase 5 helpers ---- */
/* Sentence-length status text in a pill. */
.leos-page[class] .lx-pill.is-wrap { white-space: normal; height: auto; padding: 2px 9px; line-height: 1.35; }
/* KPI tile whose value is a name rather than a number. */
.leos-page[class] .lx-kpi-value.is-text { font-size: 16px; line-height: 1.3; }

/* Underline tabs for pages that use their own tab buttons. */
.leos-page[class] .lx-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--lx-line); }
.leos-page[class] .lx-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 12px; margin-bottom: -1px;
    background: none; border: 0; border-bottom: 2px solid transparent;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--lx-muted); cursor: pointer;
}
.leos-page[class] .lx-tab:hover { color: var(--lx-text); }
.leos-page[class] .lx-tab.is-active { color: var(--lx-accent); border-bottom-color: var(--lx-accent); }

/* ---- KPI tile strip (lx-kpi) for the summary tiles many pages carry.
   <div class="lx-kpi-row"><div class="lx-kpi"><span class="lx-kpi-label">Open</span>
   <span class="lx-kpi-value">12</span><span class="lx-kpi-sub">…</span></div></div> ---- */
.leos-page[class] .lx-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.leos-page[class] .lx-kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    background: var(--lx-card);
    border: 1px solid var(--lx-line);
    border-radius: 10px;
    min-width: 0;
}
.leos-page[class] .lx-kpi-label { font-size: 13px; font-weight: 500; color: var(--lx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leos-page[class] .lx-kpi-value { font-size: 24px; line-height: 1.1; font-weight: 700; color: var(--lx-text); font-variant-numeric: tabular-nums; }
.leos-page[class] .lx-kpi-sub { font-size: 12px; color: var(--lx-muted); }

/* ---- Full-height tables ----
   A page holding an .lx-card-fill becomes a viewport-tall flex column (the
   app bar is 64px, MudContainer pa-4 adds 32px), the fill card takes the
   remaining height, and its MudTable scrolls inside with the pager pinned
   at the bottom. Pages without a fill card are untouched (:has). */
.leos-page[class]:has(.lx-card-fill) {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 96px);
    min-height: 480px;
}
.leos-page[class] .lx-card-fill { flex: 1 1 auto; min-height: 320px; display: flex; flex-direction: column; margin-bottom: 0; }
.leos-page[class] .lx-card-fill .lx-card-head { flex: 0 0 auto; }
.leos-page[class] .lx-card-fill .mud-table { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.leos-page[class] .lx-card-fill .mud-table .mud-table-container { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; }
.leos-page[class] .lx-card-fill .mud-table .mud-table-pagination { flex: 0 0 auto; margin-top: auto; }
.leos-page[class] .lx-card-fill .mud-table-head .mud-table-cell { position: sticky; top: 0; z-index: 1; }

/* ---- Larger action buttons get a softer corner (small buttons keep the
   default so dense rows stay tight) ---- */
.leos-page[class] .mud-button-filled:not(.mud-button-filled-size-small),
.leos-page[class] .mud-button-outlined:not(.mud-button-outlined-size-small) {
    border-radius: 8px;
}

/* ---- Dialogs (rendered under .leos-overlays, see MainLayout.razor) ---- */
.leos-overlays[class] .mud-dialog {
    border-radius: 12px;
    border: 1px solid var(--lx-line);
    box-shadow: 0 12px 40px rgba(15, 23, 42, .18);
}
.leos-overlays[class] .mud-dialog .mud-dialog-title {
    padding: 16px 20px;
    border-bottom: 1px solid var(--lx-line);
    font-size: 17px;
    font-weight: 650;
}
.leos-overlays[class] .mud-dialog .mud-dialog-title .mud-typography { font-size: 17px; font-weight: 650; }
.leos-overlays[class] .mud-dialog .mud-dialog-content { padding: 16px 20px; }
.leos-overlays[class] .mud-dialog .mud-dialog-actions {
    padding: 12px 20px;
    gap: 8px;
    border-top: 1px solid var(--lx-line);
}
.leos-overlays[class] .mud-popover { border-radius: 10px; }

@media (max-width: 640px) {
    .leos-page[class]:has(.lx-card-fill) { height: auto; }
    .leos-page[class] .lx-title { font-size: 21px; }
    .leos-page[class] .lx-filters { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   FLAT SAP LAYER -- keeps boxes to a minimum.
   Only containers that hold a table (the page's data) stay boxed.
   Every other LxCard (facts, forms, charts, lists, nested cards)
   renders as a flat section: title + hairline, no box, no fill.
   KPI tiles become one divided strip. Driven purely by content
   (:has), so no page markup changes; delete this block to revert.
   ============================================================ */

/* Boxed data containers: plainer, tighter. */
.leos-page[class] .lx-card { border-radius: 4px; }
.leos-page[class] .lx-card-head { min-height: 44px; padding: 6px 16px; }
.leos-page[class] .lx-card-title { font-size: 14px; font-weight: 650; }

/* Flat sections: any card without a table inside, and any card nested in another card. */
.leos-page[class] .lx-card:not(:has(.mud-table, .mud-simple-table, .mud-data-grid)),
.leos-page[class] .lx-card .lx-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    padding-top: 4px;
}
.leos-page[class] .lx-card:not(:has(.mud-table, .mud-simple-table, .mud-data-grid)) > .lx-card-head,
.leos-page[class] .lx-card .lx-card > .lx-card-head {
    min-height: 0;
    padding: 0 0 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--lx-line);
}
.leos-page[class] .lx-card:not(:has(.mud-table, .mud-simple-table, .mud-data-grid)) > .lx-card-body,
.leos-page[class] .lx-card .lx-card > .lx-card-body { padding: 0 0 8px; }
.leos-page[class] .lx-card:not(:has(.mud-table, .mud-simple-table, .mud-data-grid)) .lx-card-section { padding: 12px 0; }
.leos-page[class] .lx-card:not(:has(.mud-table, .mud-simple-table, .mud-data-grid)) .lx-card-foot { padding: 8px 0; }
.leos-page[class] .lx-card:not(:has(.mud-table, .mud-simple-table, .mud-data-grid)) .lx-card-intro { padding: 0 0 8px; border-bottom: 0; }
.leos-page[class] .lx-card:not(:has(.mud-table, .mud-simple-table, .mud-data-grid)) .lx-empty { padding: 4px 0 12px; }
.leos-page[class] .lx-card:not(:has(.mud-table, .mud-simple-table, .mud-data-grid)) .lx-list-item { padding-left: 8px; padding-right: 8px; }
/* Nested cards inside a boxed table card keep their content inset. */
.leos-page[class] .lx-card:has(.mud-table, .mud-simple-table, .mud-data-grid) > .lx-card-body .lx-card > .lx-card-head { padding-top: 0; }

/* KPI tiles -> one divided strip. */
.leos-page[class] .lx-kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: var(--lx-card);
    border: 1px solid var(--lx-line);
    border-radius: 4px;
    overflow: hidden;
}
.leos-page[class] .lx-kpi {
    flex: 1 1 140px;
    gap: 2px;
    padding: 10px 20px;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--lx-line);
    border-radius: 0;
}
.leos-page[class] .lx-kpi:first-child { border-left: 0; }
.leos-page[class] .lx-kpi-label { font-size: 12px; }
.leos-page[class] .lx-kpi-value { font-size: 20px; font-weight: 600; }
/* Strip inside a section/card: no second frame. */
.leos-page[class] .lx-card .lx-kpi-row { background: transparent; border-width: 1px 0; border-radius: 0; }
.leos-page[class] .lx-kpi.is-clickable:hover { border-color: var(--lx-line); background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent); }
.leos-page[class] .lx-kpi.is-selected { box-shadow: inset 0 -2px 0 var(--lx-accent); border-color: var(--lx-line); }

/* Charts: compact. */
.leos-page[class] .mud-chart { max-height: 240px; }

/* ============================================================
   FIORI BUILDING BLOCKS -- list/detail "flexible column layout" pages.
   Reference page: Pages/PMManagerFieldOps.razor.
   ============================================================ */

/* Header facets: key figures as inline label / value pairs (no tiles). */
.leos-page[class] .lx-facets { display: flex; flex-wrap: wrap; gap: 6px 32px; margin-top: 8px; }
.leos-page[class] .lx-facet { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.leos-page[class] .lx-facet-label { font-size: 12px; color: var(--lx-muted); white-space: nowrap; }
.leos-page[class] .lx-facet-value { font-size: 16px; font-weight: 600; color: var(--lx-text); font-variant-numeric: tabular-nums; }
.leos-page[class] .lx-facet-value.is-good { color: var(--mud-palette-success); }
.leos-page[class] .lx-facet-value.is-warn { color: var(--mud-palette-warning); }
.leos-page[class] .lx-facet-value.is-bad { color: var(--mud-palette-error); }

/* Flexible column layout: master list | detail, filling the viewport.
   Each column scrolls on its own. */
.leos-page[class]:has(> .lx-fcl) {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 96px);
    min-height: 480px;
}
.leos-page[class] .lx-fcl {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    border-top: 1px solid var(--lx-line);
}
.leos-page[class] .lx-fcl-master {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--lx-line);
}
.leos-page[class] .lx-fcl-master-head { flex: 0 0 auto; padding: 12px 12px 8px 0; }
.leos-page[class] .lx-fcl-master-head .mud-input-control { margin: 0; }
.leos-page[class] .lx-fcl-master-title { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; font-size: 13px; font-weight: 650; color: var(--lx-text); }
.leos-page[class] .lx-fcl-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.leos-page[class] .lx-fcl-list .lx-list-item { padding: 10px 12px 10px 10px; align-items: flex-start; }
.leos-page[class] .lx-fcl-detail { min-height: 0; overflow-y: auto; padding: 0 0 24px 24px; }

/* Object page header (inside the detail column). */
.leos-page[class] .lx-object-head { padding: 14px 0 0; }
.leos-page[class] .lx-object-title-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; }
.leos-page[class] .lx-object-title { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 650; color: var(--lx-text); }
.leos-page[class] .lx-object-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 13px; color: var(--lx-muted); }

/* Small breadcrumb above an object title. */
.leos-page[class] .lx-breadcrumb { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; font-size: 13px; color: var(--lx-muted); }
.leos-page[class] .lx-breadcrumb button { background: none; border: 0; padding: 0; font: inherit; color: var(--lx-accent); cursor: pointer; }
.leos-page[class] .lx-breadcrumb button:hover { text-decoration: underline; }

/* Anchor / icon-tab bar under an object header; sticks while the column scrolls. */
.leos-page[class] .lx-anchor-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 14px 0 16px;
    background: var(--mud-palette-background);
}
.leos-page[class] .lx-tab .lx-tab-count { margin-left: 2px; font-weight: 500; color: var(--lx-muted); }

/* Object page section heading. */
.leos-page[class] .lx-subsection { margin-bottom: 20px; }
.leos-page[class] .lx-subsection-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.leos-page[class] .lx-subsection-head h3 { margin: 0; font-size: 14px; font-weight: 650; color: var(--lx-text); }

/* Form grid inside object pages: two columns of outlined fields. */
.leos-page[class] .lx-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.leos-page[class] .lx-form-grid .mud-input-control { margin: 0; }
.leos-page[class] .lx-form-grid .lx-info-wide { grid-column: 1 / -1; }

@media (max-width: 960px) {
    .leos-page[class]:has(> .lx-fcl) { height: auto; }
    .leos-page[class] .lx-fcl { grid-template-columns: minmax(0, 1fr); }
    .leos-page[class] .lx-fcl-master { border-right: 0; border-bottom: 1px solid var(--lx-line); max-height: 40vh; }
    .leos-page[class] .lx-fcl-detail { padding-left: 0; }
    .leos-page[class] .lx-form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Context bar: slim row above the page header for record pickers
   (Customer / Site dropdowns) with the breadcrumb on the left. ---- */
.leos-page[class] .lx-context-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 8px;
}
.leos-page[class] .lx-context-crumb { display: flex; align-items: center; gap: 4px; min-width: 0; }
.leos-page[class] .lx-context-selects { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.leos-page[class] .lx-context-select { width: 240px; margin: 0; }
.leos-page[class] .lx-context-select .mud-input-control { margin: 0; }

/* ---- Section splits for object pages. ---- */
.leos-page[class] .lx-split-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; }
.leos-page[class] .lx-split-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px; }

/* ---- Grouped facets (many figures): small group titles over facet rows. ---- */
.leos-page[class] .lx-facet-groups { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; padding: 12px 0 14px; border-top: 1px solid var(--lx-line); border-bottom: 1px solid var(--lx-line); }
.leos-page[class] .lx-facet-group-title { margin: 0 0 2px; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--lx-muted); }
.leos-page[class] .lx-facet-groups .lx-facets { margin-top: 0; }

/* ---- Small neutral meta pills under a list row. ---- */
.leos-page[class] .lx-meta-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.leos-page[class] .lx-meta-pills .lx-pill { height: 20px; font-size: 11.5px; font-weight: 500; }

/* ---- Photo grid (flat thumbnails with a caption row). ---- */
.leos-page[class] .lx-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.leos-page[class] .lx-photo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.leos-page[class] .lx-photo img { display: block; width: 100%; height: 130px; object-fit: cover; border-radius: 4px; border: 1px solid var(--lx-line); }
.leos-page[class] .lx-photo-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; }

/* Disabled (non-actionable) list-row buttons look like plain rows. */
.leos-page[class] button.lx-list-item:disabled { cursor: default; color: inherit; opacity: 1; }
.leos-page[class] button.lx-list-item.is-stacked { flex-direction: column; align-items: stretch; }

/* ---- Compact dropdown / menu lists everywhere (MudSelect, MudMenu,
   MudAutocomplete popovers render under .leos-overlays). ---- */
.leos-overlays[class] .mud-popover .mud-list { padding-top: 4px; padding-bottom: 4px; }
.leos-overlays[class] .mud-popover .mud-list-item {
    min-height: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
}
.leos-overlays[class] .mud-popover .mud-list-item .mud-list-item-text,
.leos-overlays[class] .mud-popover .mud-list-item .mud-typography,
.leos-overlays[class] .mud-popover .mud-menu-item-text { font-size: 13px; line-height: 1.35; }
.leos-overlays[class] .mud-popover .mud-list-item-icon { min-width: 30px; }
.leos-overlays[class] .mud-popover .mud-list-item-icon .mud-icon-root { font-size: 18px; }
.leos-overlays[class] .mud-popover .mud-list-item.mud-selected-item { font-weight: 600; }

@media (max-width: 960px) {
    .leos-page[class] .lx-split-2, .leos-page[class] .lx-split-3 { grid-template-columns: minmax(0, 1fr); }
    .leos-page[class] .lx-context-select { width: 100%; }
    .leos-page[class] .lx-context-selects { width: 100%; }
}

/* ---- List report helpers (step B) ---- */
/* Clickable facets acting as quick filters (Work Packages). */
.leos-page[class] button.lx-facet { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 0 2px; font: inherit; text-align: left; cursor: pointer; }
.leos-page[class] button.lx-facet:hover .lx-facet-label { color: var(--lx-accent); }
.leos-page[class] button.lx-facet.is-selected { border-bottom-color: var(--lx-accent); }
.leos-page[class] button.lx-facet:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: 2px; }
/* Disabled section tab (e.g. Order Detail before an order is picked). */
.leos-page[class] .lx-tab:disabled { opacity: .45; cursor: default; }
/* Hint directly under a filter bar sits close to it. */
.leos-page[class] .lx-filters + .lx-hint { margin-top: -8px; margin-bottom: 12px; }
/* Compact scrolling flat list (short lists inside a section). */
.leos-page[class] .lx-list-compact { max-height: 200px; overflow-y: auto; border-top: 1px solid var(--lx-line); }

/* ---- Object page with a side column (step C) ----
   Main sections on the left, a persistent side column (activity / chat /
   timeline) on the right that scrolls on its own. Fills the viewport when
   it is a direct child of the page root. */
.leos-page[class]:has(> .lx-object-split) { display: flex; flex-direction: column; height: calc(100vh - 96px); min-height: 480px; }
.leos-page[class] .lx-object-split {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    border-top: 1px solid var(--lx-line);
}
.leos-page[class] .lx-object-main { min-height: 0; overflow-y: auto; padding: 0 24px 24px 0; }
.leos-page[class] .lx-object-side { min-height: 0; overflow-y: auto; padding: 12px 0 24px 20px; border-left: 1px solid var(--lx-line); }
.leos-page[class] .lx-object-side-title { margin: 0 0 8px; font-size: 13px; font-weight: 650; color: var(--lx-text); }
/* Overflow ("More") menu sits with header actions. */
.leos-page[class] .lx-page-actions .mud-menu { display: inline-flex; }
@media (max-width: 1100px) {
    .leos-page[class]:has(> .lx-object-split) { height: auto; }
    .leos-page[class] .lx-object-split { grid-template-columns: minmax(0, 1fr); }
    .leos-page[class] .lx-object-main { padding-right: 0; }
    .leos-page[class] .lx-object-side { border-left: 0; border-top: 1px solid var(--lx-line); padding-left: 0; }
}

/* Section bar directly above an object split: one hairline, not two, and
   breathing room at the top of the main column. */
.leos-page[class] .lx-anchor-bar:has(+ .lx-object-split) { margin-bottom: 0; }
.leos-page[class] .lx-anchor-bar + .lx-object-split { border-top: 0; }
.leos-page[class] .lx-object-main { padding-top: 16px; }
/* Side column with a scrolling body and a pinned footer (chat composer). */
.leos-page[class] .lx-object-side.has-foot { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.leos-page[class] .lx-object-side.has-foot > .lx-object-side-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.leos-page[class] .lx-object-side.has-foot > .lx-object-side-foot { flex: 0 0 auto; padding: 10px 0 14px; border-top: 1px solid var(--lx-line); }

/* ---- Settings / form helpers promoted from Settings.razor.css so any
   page can use them (Settings keeps its own set-* copies). ---- */
/* Small uppercase group label in an lx-fcl master column. */
.leos-page[class] .lx-fcl-group-title { padding: 12px 10px 4px; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--lx-muted); }
/* Setting rows: label + description left, control right, hairline between. */
.leos-page[class] .lx-setting-rows { border-top: 1px solid var(--lx-line); }
.leos-page[class] .lx-setting-rows.is-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.leos-page[class] .lx-setting-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 0; border-bottom: 1px solid var(--lx-line); }
.leos-page[class] .lx-setting-row-text { display: flex; flex-direction: column; flex: 1 1 160px; min-width: 0; }
.leos-page[class] .lx-setting-row .mud-input-control { margin: 0; flex: 0 1 auto; width: auto; }
/* Three-column form grid and a facet sub-value. */
.leos-page[class] .lx-form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.leos-page[class] .lx-form-grid-3 .mud-input-control { margin: 0; }
.leos-page[class] .lx-facet-sub { font-size: 12px; font-weight: 500; color: var(--lx-muted); }
/* Small progress bar under a facet value. */
.leos-page[class] .lx-facet-bar { height: 4px; border-radius: 2px; background: var(--lx-track, var(--lx-line)); overflow: hidden; margin-top: 3px; }
.leos-page[class] .lx-facet-bar > span { display: block; height: 100%; background: var(--lx-accent); }
@media (max-width: 960px) {
    .leos-page[class] .lx-setting-rows.is-2, .leos-page[class] .lx-form-grid-3 { grid-template-columns: minmax(0, 1fr); }
}