/* /Components/Accounting/AccountingEntryDetailsDialog.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════
   AccountingEntryDetailsDialog
   Compact, label-on-top form. The GST sub-grid uses the same 35/65 ratio
   used by CustomFieldsDialog so users transitioning between dialogs see
   consistent proportions.
   ════════════════════════════════════════════════════════════════════ */
.acc-entry-dialog[b-bvg8xdlw8x] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.acc-entry-dialog__ledger[b-bvg8xdlw8x] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    background: var(--shell-surface-muted, rgba(0, 120, 215, 0.06));
}

.acc-entry-dialog__ledger-label[b-bvg8xdlw8x] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--shell-text-muted, #6b7280);
}

.acc-entry-dialog__ledger-name[b-bvg8xdlw8x] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--shell-text-primary, #0f172a);
    overflow-wrap: anywhere;
}

.acc-entry-dialog__amount[b-bvg8xdlw8x] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.acc-entry-dialog__amount-label[b-bvg8xdlw8x] {
    font-weight: 600;
    color: var(--shell-text-primary);
    font-size: 0.92rem;
}

.acc-entry-dialog__amount-input[b-bvg8xdlw8x]  .e-input {
    font-size: 1.15rem;
    font-weight: 600;
    text-align: right;
}

.acc-entry-dialog__row[b-bvg8xdlw8x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* GST sub-grid — label/input pairs in a tight 2-col layout. */
.acc-entry-dialog__gst-grid[b-bvg8xdlw8x] {
    display: grid;
    grid-template-columns: 35% 65%;
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.45rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--shell-border-subtle, rgba(15, 23, 42, 0.08));
    border-radius: 6px;
    background: var(--shell-surface-elevated, #fafafa);
}

.acc-entry-dialog__gst-grid label[b-bvg8xdlw8x] {
    font-weight: 500;
    color: var(--shell-text-primary);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    /* On phones drop the GST grid to one column; label sits above input. */
    .acc-entry-dialog__gst-grid[b-bvg8xdlw8x] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Accounting/AccountingMultiEntryDialog.razor.rz.scp.css */
/* Add several accounting lines in one pass. The list can run to a few hundred
   ledgers, so it scrolls inside the dialog while the search box, the totals and
   the actions stay put — the difference has to be readable at all times, which
   is the whole reason this screen exists. */

.amel[b-qk22yswwu3] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    height: 100%;
    min-height: 0;
}

.amel__title[b-qk22yswwu3] { font-weight: 600; }
.amel__intro[b-qk22yswwu3] { margin: 0; }

/* The grid owns its own scrolling, so the wrapper rules the hand-rolled table
   needed are gone. What is left is the cell editors and the footer. */
.amel__searchwrap[b-qk22yswwu3] { max-width: 340px; }
.amel__search[b-qk22yswwu3] { width: 100%; }

.amel__gridhost[b-qk22yswwu3] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.amel__grid[b-qk22yswwu3] { flex: 1 1 auto; min-height: 0; }

/* Cell editors are visibly bordered at rest, not transparent-until-focus. */
.amel__cell[b-qk22yswwu3] { width: 100%; min-width: 0; }
.amel__cell input[b-qk22yswwu3] { text-align: right; font-variant-numeric: tabular-nums; }

/* A side this voucher type does not offer for that account. */
.amel__na[b-qk22yswwu3] {
    color: var(--shell-text-secondary, #5b6a7d);
    opacity: 0.5;
}

/* A row carrying an amount, tinted through RowDataBound so it survives sorting
   and grouping. Cell editors stay transparent over the tint. */
.amel__grid[b-qk22yswwu3]  .amel__row--used .e-rowcell {
    background: var(--shell-accent-soft, rgba(47, 111, 208, .10));
}

.amel__agg-label[b-qk22yswwu3] {
    font-size: 0.78rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.amel__agg-sum[b-qk22yswwu3] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.amel__totals[b-qk22yswwu3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.amel__totals strong[b-qk22yswwu3] {
    color: var(--shell-text, #1c2430);
    font-variant-numeric: tabular-nums;
}

.amel__balanced[b-qk22yswwu3] {
    color: var(--shell-status-success-text, #1d6f42);
    font-weight: 600;
}

.amel__unbalanced[b-qk22yswwu3] {
    color: var(--shell-status-warn-text, #7a4b00);
    font-weight: 600;
}

.amel__count[b-qk22yswwu3] { margin-left: auto; }

.amel__actions[b-qk22yswwu3] {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--shell-border, #d8dee7);
}
/* /Components/Accounting/BillByBillInstallmentDialog.razor.rz.scp.css */
/* Installment plan dialog — theme-variable surfaces only. */

.bbins__title[b-w6xbikynat] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.bbins__subtitle[b-w6xbikynat] {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.75;
    color: var(--shell-text-primary, inherit);
}

.bbins[b-w6xbikynat] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    color: var(--shell-text-primary, inherit);
}

.bbins__error[b-w6xbikynat] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.12);
    color: #c2333f;
    font-size: 0.85rem;
}

.bbins__error-x[b-w6xbikynat] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}

.bbins__f[b-w6xbikynat] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
}

.bbins__f span[b-w6xbikynat] { opacity: 0.8; }

.bbins__f input[b-w6xbikynat],
.bbins__f select[b-w6xbikynat] {
    min-height: 38px;
    font-size: 0.9rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.5rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
}

.bbins__f input[type="number"][b-w6xbikynat] { text-align: right; }

.bbins__f input[readonly][b-w6xbikynat] { opacity: 0.8; background: transparent; }

.bbins__actions[b-w6xbikynat] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.3rem;
}
/* /Components/Accounting/BillByBillTrackingDialog.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   BillByBillTrackingDialog — scoped styles.

   All selectors here are rewritten by Blazor's CSS isolation
   so they only affect this component. Uses the shared theme
   variables defined in app.css so it follows the global look.
   ══════════════════════════════════════════════════════════ */

.bbb-summary[b-6wg0ywbahz] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0 10px;
}

.bbb-summary__pill[b-6wg0ywbahz] {
    background: var(--shell-contrast-surface-bg, var(--shell-panel-background));
    border: 1px solid var(--shell-border);
    border-radius: 999px;
    padding: 6px 14px;
    display: inline-flex;
    flex-direction: column;
    min-width: 120px;
    color: var(--shell-text-primary);
    box-shadow: var(--shell-shadow-subtle, none);
}

.bbb-summary__pill > span[b-6wg0ywbahz] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--shell-text-secondary);
}

.bbb-summary__pill > strong[b-6wg0ywbahz] {
    font-size: 1.02rem;
    font-weight: 700;
}

/* Pill colours route through global --shell-status-* tokens so dark and
   high-contrast themes flip them automatically (see app.css). */
.bbb-summary__pill--warn[b-6wg0ywbahz] {
    background: var(--shell-status-warn-bg);
    border-color: var(--shell-status-warn-border);
    color: var(--shell-status-warn-text);
}

.bbb-summary__pill--warn > span[b-6wg0ywbahz] { color: var(--shell-status-warn-text); }

.bbb-summary__pill--ok[b-6wg0ywbahz] {
    background: var(--shell-status-ok-bg);
    border-color: var(--shell-status-ok-border);
    color: var(--shell-status-ok-text);
}

.bbb-summary__pill--ok > span[b-6wg0ywbahz] { color: var(--shell-status-ok-text); }

/* Horizontal padding mirrors .inv-dialog__actions' 0.5rem inset so toolbar
   buttons ("New Ref" / "Adjustment" / "Advance" / "On Account") align with
   the Save / Cancel bar below. */
.bbb-toolbar[b-6wg0ywbahz] {
    display: flex;
    gap: 6px;
    padding: 2px 0.5rem 8px;
    flex-wrap: wrap;
}

.bbb-status[b-6wg0ywbahz] {
    margin-top: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
}

.bbb-status--error[b-6wg0ywbahz]   { background: var(--shell-status-error-bg); border-left: 3px solid var(--shell-status-error-border); color: var(--shell-status-error-text); }
.bbb-status--warning[b-6wg0ywbahz] { background: var(--shell-status-warn-bg);  border-left: 3px solid var(--shell-status-warn-accent);  color: var(--shell-status-warn-text);  }
.bbb-status--info[b-6wg0ywbahz]    { background: var(--shell-status-info-bg);  border-left: 3px solid var(--shell-status-info-border);  color: var(--shell-status-info-text);  }

/* Inline editors in the allocation grid — tighten padding so the cells stay row-height. */
[b-6wg0ywbahz] .inv-find-grid .e-rowcell .e-input-group,
[b-6wg0ywbahz] .inv-find-grid .e-rowcell .e-control-wrapper {
    margin: 0;
}
[b-6wg0ywbahz] .inv-find-grid .e-rowcell .e-input {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
[b-6wg0ywbahz] .inv-find-grid .bbb-amount input {
    text-align: right;
}

/* ── Grid footer (Total Allocated) ── */
[b-6wg0ywbahz] .inv-find-grid .e-gridfooter {
    background: color-mix(in srgb, var(--shell-button-primary) 14%, var(--shell-panel-background));
    border-top: 2px solid var(--shell-button-primary);
}

[b-6wg0ywbahz] .inv-find-grid .e-summarycell {
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--shell-text-primary);
    padding: 4px 6px !important;
}

.bbb-agg-label[b-6wg0ywbahz] {
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--shell-text-primary);
}

.bbb-agg-sum[b-6wg0ywbahz] {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--shell-button-primary);
}
/* /Components/Accounting/ChequeTrackingDialog.razor.rz.scp.css */
/* Cheque tracking dialog — theme-variable surfaces only. */

.chqtrk__title[b-3lgehr59t2] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.chqtrk__subtitle[b-3lgehr59t2] {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.75;
    color: var(--shell-text-primary, inherit);
}

.chqtrk[b-3lgehr59t2] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--shell-text-primary, inherit);
}

.chqtrk__error[b-3lgehr59t2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.12);
    color: #c2333f;
    font-size: 0.85rem;
}

.chqtrk__error-x[b-3lgehr59t2] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}

.chqtrk__scroll[b-3lgehr59t2] {
    overflow: auto;
    max-height: 52vh;
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
}

.chqtrk__table[b-3lgehr59t2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: var(--shell-panel-background, #fff);
}

.chqtrk__table th[b-3lgehr59t2] {
    position: sticky;
    top: 0;
    background: var(--shell-panel-background, #fff);
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    white-space: normal;
}

.chqtrk__table td[b-3lgehr59t2] {
    padding: 0.3rem 0.45rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.08));
    vertical-align: middle;
}

.chqtrk__table input[b-3lgehr59t2],
.chqtrk__table select[b-3lgehr59t2] {
    min-height: 32px;
    font-size: 0.86rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.4rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    width: 120px;
}

.chqtrk__num[b-3lgehr59t2] { text-align: right; font-variant-numeric: tabular-nums; }
.chqtrk__num input[b-3lgehr59t2] { width: 100px; text-align: right; }
.chqtrk__empty[b-3lgehr59t2] { opacity: 0.7; text-align: center; }

.chqtrk__actions[b-3lgehr59t2] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
/* /Components/Accounting/CostCentreTrackingDialog.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   CostCentreTrackingDialog — scoped styles.
   Mirrors BillByBillTrackingDialog.razor.css for visual consistency.
   ══════════════════════════════════════════════════════════ */

.cc-summary[b-v2b4jsp2wt] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0 10px;
}

.cc-summary__pill[b-v2b4jsp2wt] {
    background: var(--shell-contrast-surface-bg, var(--shell-panel-background));
    border: 1px solid var(--shell-border);
    border-radius: 999px;
    padding: 6px 14px;
    display: inline-flex;
    flex-direction: column;
    min-width: 120px;
    color: var(--shell-text-primary);
    box-shadow: var(--shell-shadow-subtle, none);
}

.cc-summary__pill > span[b-v2b4jsp2wt] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--shell-text-secondary);
}

.cc-summary__pill > strong[b-v2b4jsp2wt] {
    font-size: 1.02rem;
    font-weight: 700;
}

/* Pill colours route through global --shell-status-* tokens so dark / high
   contrast themes flip them automatically. See app.css. */
.cc-summary__pill--warn[b-v2b4jsp2wt] {
    background: var(--shell-status-warn-bg);
    border-color: var(--shell-status-warn-border);
    color: var(--shell-status-warn-text);
}
.cc-summary__pill--warn > span[b-v2b4jsp2wt] { color: var(--shell-status-warn-text); }

.cc-summary__pill--ok[b-v2b4jsp2wt] {
    background: var(--shell-status-ok-bg);
    border-color: var(--shell-status-ok-border);
    color: var(--shell-status-ok-text);
}
.cc-summary__pill--ok > span[b-v2b4jsp2wt] { color: var(--shell-status-ok-text); }

/* Horizontal padding mirrors .inv-dialog__actions' 0.5rem inset so toolbar
   buttons ("New Cost Centre" etc.) align with the Save / Cancel bar below. */
.cc-toolbar[b-v2b4jsp2wt] {
    display: flex;
    gap: 6px;
    padding: 2px 0.5rem 8px;
    flex-wrap: wrap;
}

.cc-status[b-v2b4jsp2wt] {
    margin-top: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
}
.cc-status--error[b-v2b4jsp2wt]   { background: var(--shell-status-error-bg); border-left: 3px solid var(--shell-status-error-border); color: var(--shell-status-error-text); }
.cc-status--warning[b-v2b4jsp2wt] { background: var(--shell-status-warn-bg);  border-left: 3px solid var(--shell-status-warn-accent);  color: var(--shell-status-warn-text);  }
.cc-status--info[b-v2b4jsp2wt]    { background: var(--shell-status-info-bg);  border-left: 3px solid var(--shell-status-info-border);  color: var(--shell-status-info-text);  }

/* Inline editors — same tight padding as BillByBill grid. */
[b-v2b4jsp2wt] .inv-find-grid .e-rowcell .e-input-group,
[b-v2b4jsp2wt] .inv-find-grid .e-rowcell .e-control-wrapper { margin: 0; }
[b-v2b4jsp2wt] .inv-find-grid .e-rowcell .e-input { padding-top: 2px !important; padding-bottom: 2px !important; }
[b-v2b4jsp2wt] .inv-find-grid .cc-rate input,
[b-v2b4jsp2wt] .inv-find-grid .cc-amount input { text-align: right; }

/* Footer aggregate row. */
[b-v2b4jsp2wt] .inv-find-grid .e-gridfooter {
    background: color-mix(in srgb, var(--shell-button-primary) 14%, var(--shell-panel-background));
    border-top: 2px solid var(--shell-button-primary);
}
[b-v2b4jsp2wt] .inv-find-grid .e-summarycell {
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--shell-text-primary);
    padding: 4px 6px !important;
}
.cc-agg-label[b-v2b4jsp2wt] {
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--shell-text-primary);
}
.cc-agg-sum[b-v2b4jsp2wt] {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--shell-button-primary);
}
/* /Components/Accounting/CustomLedgerGroupDialog.razor.rz.scp.css */
/* Quantity-slab entry table (plain table per the grid conventions — headers
   always align with cells, no Syncfusion measurement inside the dialog; the
   old .sp-cell classes were scoped to the parent page and never applied
   here, which left the cells unstyled). */
.qs-dialog[b-f1hu299f1b] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
}

.qs-dialog__tools[b-f1hu299f1b] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.qs-dialog__count[b-f1hu299f1b] {
    font-size: 0.76rem;
    color: #8a93a0;
}

.qs-tablewrap[b-f1hu299f1b] {
    min-height: 185px;   /* ~5 rows visible even when empty (convention) */
    max-height: 46vh;
    overflow: auto;
    border: 1px solid #dbe2ee;
    border-radius: 4px;
}

.qs-table[b-f1hu299f1b] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.qs-table th[b-f1hu299f1b] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f4f6fb;
    text-align: left;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid #dbe2ee;
    white-space: normal;
}

.qs-th--num[b-f1hu299f1b] {
    text-align: right;
}

.qs-table td[b-f1hu299f1b] {
    padding: 0.18rem 0.35rem;
    border-bottom: 1px solid #eef1f6;
}

.qs-td--center[b-f1hu299f1b] {
    text-align: center;
}

/* Native cell editors: the model updates as the operator types, so F5 (which
   never blurs) still saves the cell being edited. */
.qs-cell[b-f1hu299f1b] {
    width: 100%;
    height: 28px;
    padding: 0.15rem 0.4rem;
    font: inherit;
    font-size: 0.84rem;
    color: #1c2b3a;
    background: #fff;
    border: 1px solid #cfd6de;
    border-radius: 4px;
}

.qs-cell--num[b-f1hu299f1b] {
    text-align: right;
}

.qs-cell:focus[b-f1hu299f1b] {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 1px #4f46e5;
}

.qs-cell:disabled[b-f1hu299f1b] {
    background: #f2f4f7;
    color: #98a1ad;
}

.qs-rowbtn[b-f1hu299f1b] {
    font: inherit;
    font-size: 0.76rem;
    padding: 0.22rem 0.55rem;
    color: #a02020;
    background: #fdeeee;
    border: 1px solid #e5b8b8;
    border-radius: 3px;
    cursor: pointer;
}

.qs-rowbtn:hover:not(:disabled)[b-f1hu299f1b] {
    background: #f9dcdc;
}

.qs-rowbtn:disabled[b-f1hu299f1b] {
    opacity: .5;
    cursor: default;
}

/* Per-row product picker (item-to-item variant). */
.qs-product[b-f1hu299f1b] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.qs-product .qs-cell[b-f1hu299f1b] {
    flex: 1 1 auto;
    min-width: 0;
}

.qs-pick[b-f1hu299f1b] {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 0.5rem;
    font: inherit;
    background: #eef1f5;
    border: 1px solid #d6dbe1;
    border-radius: 3px;
    cursor: pointer;
}

/* Name + description head row. */
.clg-head[b-f1hu299f1b] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}
/* /Components/Accounting/EmpScheduledItemsDialog.razor.rz.scp.css */
/* Scheduled earnings and deductions — the post-save subsidiary dialog.
   Same visual language as the cheque-tracking dialog it sits beside in the
   save chain, so the two do not look like they came from different apps. */

.esi[b-47zzct9xj9] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-height: 0;
}

.esi__title[b-47zzct9xj9] {
    font-weight: 600;
}

.esi__subtitle[b-47zzct9xj9] {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    opacity: 0.75;
}

.esi__intro[b-47zzct9xj9] {
    margin: 0;
}

/* The grid is a plain table, not an SfGrid: the row count is the number of
   tracked lines on one voucher — a handful — and a document-shaped table keeps
   the date pickers and combos from fighting a virtualised row template. */
.esi__table[b-47zzct9xj9] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.esi__table th[b-47zzct9xj9],
.esi__table td[b-47zzct9xj9] {
    border: 1px solid var(--shell-border, #d8dee7);
    padding: 4px 6px;
    text-align: left;
    vertical-align: middle;
}

.esi__table th[b-47zzct9xj9] {
    background: var(--shell-item-background-subtle, #f2f4f7);
    font-weight: 600;
    /* Headers wrap rather than truncate — the app-wide rule. */
    white-space: normal;
}

.esi__num[b-47zzct9xj9] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Cell editors are visibly bordered at rest, never transparent-until-focus:
   the operator should see where the typing goes before clicking. */
.esi__cell[b-47zzct9xj9] {
    width: 100%;
    min-width: 0;
}

.esi__cell--num input[b-47zzct9xj9] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.esi__legend[b-47zzct9xj9] {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.esi__actions[b-47zzct9xj9] {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--shell-border, #d8dee7);
}
/* /Components/Accounting/LedgerAltContactsDialog.razor.rz.scp.css */
.lac-body[b-575b5jb75g] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    min-height: 0;
}
.lac-toolbar[b-575b5jb75g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.lac-muted[b-575b5jb75g] { font-size: 0.8rem; opacity: 0.75; }
/* Let the grid take the remaining height and scroll horizontally. */
.lac-body[b-575b5jb75g]  .lac-grid { flex: 1 1 auto; min-height: 0; }
.lac-body[b-575b5jb75g]  .lac-grid .e-rowcell { padding: 0.25rem 0.4rem; }
.lac-actions[b-575b5jb75g] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
/* /Components/Accounting/LedgerBillOpeningDialog.razor.rz.scp.css */
.lbb-body[b-igcpfurxnk] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    min-height: 0;
}
.lbb-summary[b-igcpfurxnk] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    background: var(--shell-panel-background-soft, rgba(0, 0, 0, 0.04));
}
.lbb-toolbar[b-igcpfurxnk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.lbb-muted[b-igcpfurxnk] { font-size: 0.8rem; opacity: 0.75; }
.lbb-body[b-igcpfurxnk]  .lbb-grid { flex: 1 1 auto; min-height: 0; }
.lbb-body[b-igcpfurxnk]  .lbb-grid .e-rowcell { padding: 0.25rem 0.4rem; }
.lbb-actions[b-igcpfurxnk] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
/* /Components/Accounting/LedgerBranchOpeningDialog.razor.rz.scp.css */
.lbo-body[b-mbqib3vwht] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    min-height: 0;
}
.lbo-summary[b-mbqib3vwht] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    background: var(--shell-panel-background-soft, rgba(0, 0, 0, 0.04));
}
.lbo-toolbar[b-mbqib3vwht] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.lbo-muted[b-mbqib3vwht] { font-size: 0.8rem; opacity: 0.75; }
.lbo-body[b-mbqib3vwht]  .lbo-grid { flex: 1 1 auto; min-height: 0; }
.lbo-body[b-mbqib3vwht]  .lbo-grid .e-rowcell { padding: 0.25rem 0.4rem; }
.lbo-actions[b-mbqib3vwht] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
/* /Components/Accounting/LedgerBudgetTargetDialog.razor.rz.scp.css */
.lbt-body[b-ekh1daapfx] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.lbt-grid2[b-ekh1daapfx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.25rem;
    align-items: center;
}
/* Twelve month boxes, three per row. */
.lbt-months[b-ekh1daapfx] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem 1rem;
}
.lbt-subhead[b-ekh1daapfx] {
    margin: 0.75rem 0 0.25rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--shell-border, #e0e0e0);
    font-size: 0.92rem;
    font-weight: 600;
}
.lbt-muted[b-ekh1daapfx] { margin: 0; font-size: 0.8rem; opacity: 0.75; }
.lbt-actions[b-ekh1daapfx] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

@media (max-width: 700px) {
    .lbt-grid2[b-ekh1daapfx] { grid-template-columns: minmax(0, 1fr); }
    .lbt-months[b-ekh1daapfx] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* /Components/Accounting/LedgerContactDialog.razor.rz.scp.css */
/* Two-column field grid (same layout language as the Ledger Account master). */
.lc-body[b-kbbgzcgqc5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.lc-grid2[b-kbbgzcgqc5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.25rem;
    align-items: center;
}
.lc-grid2--full[b-kbbgzcgqc5] { grid-column: 1 / -1; }
.lc-subhead[b-kbbgzcgqc5] {
    margin: 0.75rem 0 0.25rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--shell-border, #e0e0e0);
    font-size: 0.92rem;
    font-weight: 600;
}
.lc-switch[b-kbbgzcgqc5] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.lc-switch label[b-kbbgzcgqc5] { font-weight: 600; font-size: 0.85rem; }
.lc-muted[b-kbbgzcgqc5] { margin: 0; font-size: 0.8rem; opacity: 0.75; }
.lc-actions[b-kbbgzcgqc5] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

@media (max-width: 700px) {
    .lc-grid2[b-kbbgzcgqc5] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Accounting/LedgerCostCentreOpeningDialog.razor.rz.scp.css */
.lcc-body[b-057a0prfi0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    min-height: 0;
}
.lcc-summary[b-057a0prfi0] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    background: var(--shell-panel-background-soft, rgba(0, 0, 0, 0.04));
}
.lcc-toolbar[b-057a0prfi0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.lcc-muted[b-057a0prfi0] { font-size: 0.8rem; opacity: 0.75; }
.lcc-body[b-057a0prfi0]  .lcc-grid { flex: 1 1 auto; min-height: 0; }
.lcc-body[b-057a0prfi0]  .lcc-grid .e-rowcell { padding: 0.25rem 0.4rem; }
.lcc-actions[b-057a0prfi0] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
/* /Components/Accounting/LedgerCreditLimitDialog.razor.rz.scp.css */
.lcl-body[b-ji6zkq3t62] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.lcl-grid2[b-ji6zkq3t62] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.25rem;
    align-items: center;
}
.lcl-muted[b-ji6zkq3t62] { margin: 0; font-size: 0.8rem; opacity: 0.75; }
.lcl-actions[b-ji6zkq3t62] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

@media (max-width: 600px) {
    .lcl-grid2[b-ji6zkq3t62] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Accounting/LedgerDivisionOpeningDialog.razor.rz.scp.css */
.ldo-body[b-gfnp983yyo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    min-height: 0;
}
.ldo-summary[b-gfnp983yyo] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    background: var(--shell-panel-background-soft, rgba(0, 0, 0, 0.04));
}
.ldo-toolbar[b-gfnp983yyo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.ldo-muted[b-gfnp983yyo] { font-size: 0.8rem; opacity: 0.75; }
.ldo-body[b-gfnp983yyo]  .ldo-grid { flex: 1 1 auto; min-height: 0; }
.ldo-body[b-gfnp983yyo]  .ldo-grid .e-rowcell { padding: 0.25rem 0.4rem; }
.ldo-actions[b-gfnp983yyo] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
/* /Components/CRM/CrmCallCard.razor.rz.scp.css */
/* The call pop - a card in the corner while the phone rings. Shell tokens only. */

.crm-pop[b-6fd3r2qyqt] {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 2200;
    width: min(23rem, calc(100vw - 2rem));
    padding: 0.85rem 1rem 0.9rem;
    border: 1px solid var(--shell-border);
    border-left: 4px solid var(--shell-accent, #2563eb);
    border-radius: 12px;
    background: var(--shell-surface, #fff);
    color: var(--shell-text, inherit);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    animation: crm-pop-in-b-6fd3r2qyqt 180ms ease-out;
}

@keyframes crm-pop-in-b-6fd3r2qyqt {
    from { transform: translateY(0.75rem); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .crm-pop[b-6fd3r2qyqt] { animation: none; }
}

.crm-pop__head[b-6fd3r2qyqt] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 0.6rem;
}

.crm-pop__head h3[b-6fd3r2qyqt] {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.crm-pop__eyebrow[b-6fd3r2qyqt] {
    margin: 0 0 0.1rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.8;
}

.crm-pop__ring[b-6fd3r2qyqt] {
    font-size: 1.1rem;
    color: var(--shell-accent, #2563eb);
    animation: crm-pop-ring-b-6fd3r2qyqt 1s ease-in-out infinite;
}

@keyframes crm-pop-ring-b-6fd3r2qyqt {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-12deg); }
    75% { transform: rotate(12deg); }
}

@media (prefers-reduced-motion: reduce) {
    .crm-pop__ring[b-6fd3r2qyqt] { animation: none; }
}

.crm-pop__close[b-6fd3r2qyqt] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0.15rem;
    border-radius: 50%;
    line-height: 1;
}

.crm-pop__close:hover[b-6fd3r2qyqt],
.crm-pop__close:focus-visible[b-6fd3r2qyqt] {
    background: color-mix(in srgb, var(--shell-accent, #2563eb) 14%, transparent);
}

.crm-pop__number[b-6fd3r2qyqt] {
    margin: 0.35rem 0 0.2rem;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.crm-pop__about[b-6fd3r2qyqt] {
    margin: 0.15rem 0 0.4rem;
    font-size: 0.88rem;
    line-height: 1.4;
    opacity: 0.92;
}

.crm-pop__facts[b-6fd3r2qyqt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    font-size: 0.8rem;
    opacity: 0.9;
}

.crm-pop__late[b-6fd3r2qyqt] {
    color: var(--shell-danger, #c62828);
}

.crm-pop__bar[b-6fd3r2qyqt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.crm-pop__error[b-6fd3r2qyqt] {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--shell-danger, #c62828);
}
/* /Components/CRM/CrmCallPanel.razor.rz.scp.css */
/* "Calls" on a lead, contact or deal. Shell tokens only; every block closed. */

.crm-calls__bar[b-pcoxy78361] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.crm-calls__agent[b-pcoxy78361] {
    font-size: 0.85rem;
    opacity: 0.85;
}

.crm-calls__list[b-pcoxy78361] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 22rem;
    overflow-y: auto;
}

.crm-calls__item[b-pcoxy78361] {
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--shell-border);
    border-radius: 8px;
}

.crm-calls__item--missed[b-pcoxy78361] {
    border-left: 3px solid var(--shell-danger, #c62828);
}

.crm-calls__head[b-pcoxy78361] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
}

.crm-calls__who[b-pcoxy78361] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.crm-calls__talk[b-pcoxy78361] {
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    opacity: 0.9;
}

.crm-calls__when[b-pcoxy78361] {
    margin-left: auto;
    font-size: 0.82rem;
    opacity: 0.8;
    white-space: nowrap;
}

.crm-calls__sub[b-pcoxy78361] {
    margin-top: 0.15rem;
    font-size: 0.85rem;
    opacity: 0.9;
    overflow-wrap: anywhere;
}

.crm-calls__actions[b-pcoxy78361] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.2rem;
}

.crm-calls__locked[b-pcoxy78361] {
    font-size: 0.8rem;
    opacity: 0.75;
    align-self: center;
}
/* /Components/CRM/CrmCardList.razor.rz.scp.css */
/* CrmCardList - a record list as cards with a search box. Shell tokens only (both themes). */
.ccl[b-1sqvbyrkpb] { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }

/* search */
.ccl-search[b-1sqvbyrkpb] { display: flex; align-items: center; gap: 0.6rem; }
.ccl-search__box[b-1sqvbyrkpb] { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.ccl-search__icon[b-1sqvbyrkpb] { position: absolute; left: 0.65rem; color: var(--shell-text-secondary, #5b6472); pointer-events: none; font-size: 0.85rem; }
.ccl-search__input[b-1sqvbyrkpb] {
    width: 100%; min-width: 0; height: 2.25rem; padding: 0 2rem 0 2.1rem;
    border: 1px solid var(--shell-input-border, var(--shell-border, #d0d7de)); border-radius: 8px;
    background: var(--shell-input-background, var(--shell-panel-background, #fff)); color: var(--shell-input-text, inherit);
    font: inherit; font-size: 0.9rem;
}
.ccl-search__input[b-1sqvbyrkpb]::placeholder { color: var(--shell-input-text-muted, var(--shell-text-secondary, #6b7280)); }
.ccl-search__input:focus[b-1sqvbyrkpb] { outline: none; border-color: var(--shell-accent, #2563eb); box-shadow: 0 0 0 3px color-mix(in srgb, var(--shell-accent, #2563eb) 18%, transparent); }
.ccl-search__input[b-1sqvbyrkpb]::-webkit-search-cancel-button { display: none; }
.ccl-search__clear[b-1sqvbyrkpb] { position: absolute; right: 0.35rem; border: 0; background: transparent; cursor: pointer; color: var(--shell-text-secondary, #5b6472); padding: 0.25rem; border-radius: 4px; line-height: 1; }
.ccl-search__clear:hover[b-1sqvbyrkpb], .ccl-search__clear:focus-visible[b-1sqvbyrkpb] { color: var(--shell-text-primary, inherit); background: var(--shell-item-hover-background, rgba(127,127,127,.12)); outline: none; }
.ccl-search__count[b-1sqvbyrkpb] { flex: 0 0 auto; font-size: 0.75rem; color: var(--shell-text-secondary, #5b6472); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the cards */
.ccl-scroll[b-1sqvbyrkpb] {
    height: var(--ccl-height, 520px); overflow-y: auto; min-height: 6rem;
    display: flex; flex-direction: column; gap: 0.4rem; padding: 2px 4px 2px 2px;
}
.ccl--grid .ccl-scroll[b-1sqvbyrkpb] { height: auto; max-height: var(--ccl-height, 520px); display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); align-content: start; gap: 0.5rem; }
.ccl-scroll:focus[b-1sqvbyrkpb] { outline: none; }

.ccl-card[b-1sqvbyrkpb] {
    position: relative; padding: 0.6rem 0.75rem; border-radius: 8px; cursor: pointer; min-width: 0;
    border: 1px solid var(--shell-border, #dfe3ea); background: var(--shell-panel-background, #fff);
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.ccl-card:hover[b-1sqvbyrkpb] { border-color: color-mix(in srgb, var(--shell-accent, #2563eb) 45%, var(--shell-border, #dfe3ea)); }
.ccl-card--on[b-1sqvbyrkpb] { border-color: var(--shell-accent, #2563eb); background: color-mix(in srgb, var(--shell-accent, #2563eb) 8%, var(--shell-panel-background, #fff)); box-shadow: 0 0 0 1px var(--shell-accent, #2563eb); }
.ccl-card:focus-visible[b-1sqvbyrkpb] { outline: 2px solid var(--shell-focus-ring, var(--shell-accent, #2563eb)); outline-offset: 2px; }
/* the house status colours: Inactive orange, a failure red */
.ccl-card--muted[b-1sqvbyrkpb] { background: color-mix(in srgb, #ff9f40 16%, var(--shell-panel-background, #fff)); }
.ccl-card--bad[b-1sqvbyrkpb] { background: color-mix(in srgb, #ff5a5a 14%, var(--shell-panel-background, #fff)); }
.ccl-card--muted.ccl-card--on[b-1sqvbyrkpb], .ccl-card--bad.ccl-card--on[b-1sqvbyrkpb] { box-shadow: 0 0 0 1px var(--shell-accent, #2563eb); }
.ccl-card--off[b-1sqvbyrkpb] { cursor: default; opacity: 0.7; }

.ccl-empty[b-1sqvbyrkpb] { padding: 1.25rem 0.75rem; text-align: center; color: var(--shell-text-secondary, #5b6472); font-size: 0.88rem; border: 1px dashed var(--shell-border, #dfe3ea); border-radius: 8px; }

/* helpers for the host's card content */
.ccl[b-1sqvbyrkpb]  .ccl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; min-width: 0; }
.ccl[b-1sqvbyrkpb]  .ccl-title { font-weight: 600; font-size: 0.92rem; overflow-wrap: anywhere; min-width: 0; }
.ccl[b-1sqvbyrkpb]  .ccl-sub { font-size: 0.8rem; color: var(--shell-text-secondary, #5b6472); overflow-wrap: anywhere; margin-top: 0.1rem; }
.ccl[b-1sqvbyrkpb]  .ccl-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin-top: 0.35rem; font-size: 0.76rem; color: var(--shell-text-secondary, #5b6472); font-variant-numeric: tabular-nums; }
.ccl[b-1sqvbyrkpb]  .ccl-meta strong { color: var(--shell-text-primary, inherit); font-weight: 600; }
.ccl[b-1sqvbyrkpb]  .ccl-badges { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; flex: 0 0 auto; }
.ccl[b-1sqvbyrkpb]  .ccl-badge { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; background: var(--shell-surface-muted, rgba(127,127,127,.12)); color: var(--shell-text-secondary, #5b6472); }
.ccl[b-1sqvbyrkpb]  .ccl-badge--ok { background: var(--shell-status-ok-bg, #dafbe1); color: var(--shell-status-ok-text, #1a7f37); }
.ccl[b-1sqvbyrkpb]  .ccl-badge--warn { background: var(--shell-status-warn-bg, #fff8c5); color: var(--shell-status-warn-text, #9a6700); }
.ccl[b-1sqvbyrkpb]  .ccl-badge--bad { background: var(--shell-status-error-bg, #ffebe9); color: var(--shell-status-error-text, #cf222e); }
.ccl[b-1sqvbyrkpb]  .ccl-badge--info { background: var(--shell-status-info-bg, #ddf4ff); color: var(--shell-status-info-text, #0969da); }
.ccl[b-1sqvbyrkpb]  .ccl-badge--accent { background: color-mix(in srgb, var(--shell-accent, #2563eb) 14%, transparent); color: var(--shell-accent, #2563eb); }

@media (prefers-reduced-motion: reduce) { .ccl-card[b-1sqvbyrkpb] { transition: none; } }
@media (max-width: 760px) { .ccl--grid .ccl-scroll[b-1sqvbyrkpb] { grid-template-columns: minmax(0, 1fr); } }
/* /Components/CRM/CrmCommsPanel.razor.rz.scp.css */
/* The record's Communication panel (the CRM communication hub). Shell tokens only. */

.crm-comms__bar[b-jkndihx5dk] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.crm-comms__dnc[b-jkndihx5dk] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-left: auto; font-size: 0.88rem; }
.crm-comms__dncitem[b-jkndihx5dk] { display: inline-flex; align-items: center; }

.crm-comms__list[b-jkndihx5dk] { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }

.crm-comms__item[b-jkndihx5dk] {
    border: 1px solid var(--shell-border);
    border-left: 4px solid var(--shell-border);
    border-radius: 8px;
    background: var(--shell-panel-background);
    min-width: 0;
}
.crm-comms__item--in[b-jkndihx5dk] { border-left-color: var(--shell-accent, #2563eb); }
.crm-comms__item--out[b-jkndihx5dk] { border-left-color: var(--shell-success, #2e7d32); }
.crm-comms__item--unread .crm-comms__who[b-jkndihx5dk],
.crm-comms__item--unread .crm-comms__what[b-jkndihx5dk] { font-weight: 700; }

.crm-comms__head[b-jkndihx5dk] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}
.crm-comms__head:focus-visible[b-jkndihx5dk] { outline: 2px solid var(--shell-accent, #2563eb); outline-offset: -2px; border-radius: 8px; }
.crm-comms__chan[b-jkndihx5dk] { flex: 0 0 auto; opacity: 0.75; }
.crm-comms__who[b-jkndihx5dk] { flex: 0 1 14rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-comms__what[b-jkndihx5dk] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-comms__when[b-jkndihx5dk] { flex: 0 0 auto; font-size: 0.84rem; font-variant-numeric: tabular-nums; }

.crm-comms__body[b-jkndihx5dk] { padding: 0 0.75rem 0.75rem 2.4rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.crm-comms__meta[b-jkndihx5dk] { font-size: 0.84rem; overflow-wrap: anywhere; }
.crm-comms__text[b-jkndihx5dk] { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; max-height: 28rem; overflow-y: auto; }
.crm-comms__error[b-jkndihx5dk] { margin: 0; color: var(--shell-danger, #c62828); font-size: 0.88rem; }
.crm-comms__atts[b-jkndihx5dk], .crm-comms__actions[b-jkndihx5dk] { display: flex; flex-wrap: wrap; gap: 0.4rem; }

@media (max-width: 700px) {
    .crm-comms__head[b-jkndihx5dk] { flex-wrap: wrap; }
    .crm-comms__who[b-jkndihx5dk] { flex-basis: 100%; }
    .crm-comms__body[b-jkndihx5dk] { padding-left: 0.75rem; }
    .crm-comms__dnc[b-jkndihx5dk] { margin-left: 0; }
}
/* /Components/CRM/CrmComposeDialog.razor.rz.scp.css */
/* The CRM compose dialog - e-mail, SMS, WhatsApp. Shell tokens only. */
.crm-compose[b-zcao1e5ver] { display: flex; flex-direction: column; gap: 0.75rem; }
.crm-compose__two[b-zcao1e5ver] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.25rem; }
[b-zcao1e5ver] .crm-compose__sms textarea { min-height: 8rem; }

/* channel switch - a segmented control */
.crm-compose__channels[b-zcao1e5ver] { display: inline-flex; align-self: flex-start; padding: 3px; gap: 2px; border-radius: 8px; background: var(--shell-surface-muted, rgba(127,127,127,.12)); border: 1px solid var(--shell-border, rgba(127,127,127,.25)); }
.crm-compose__channel[b-zcao1e5ver] { display: inline-flex; align-items: center; gap: .4rem; border: 0; background: transparent; color: var(--shell-text-muted, inherit); padding: .35rem .9rem; border-radius: 6px; font: inherit; font-size: .85rem; cursor: pointer; }
.crm-compose__channel:hover[b-zcao1e5ver] { color: var(--shell-text, inherit); }
.crm-compose__channel.is-on[b-zcao1e5ver] { background: var(--shell-surface, #fff); color: var(--shell-accent, #0b5cad); box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight: 600; }
.crm-compose__channel:focus-visible[b-zcao1e5ver] { outline: 2px solid var(--shell-accent, #0b5cad); outline-offset: 1px; }

/* find a lead or contact */
.crm-compose__find[b-zcao1e5ver] { display: flex; align-items: flex-end; gap: .5rem; flex-wrap: wrap; }
.crm-compose__find[b-zcao1e5ver]  .e-input-group { flex: 1 1 16rem; }
.crm-compose__picked[b-zcao1e5ver] { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .4rem .25rem .6rem; border-radius: 999px; background: var(--shell-accent-soft, rgba(11,92,173,.1)); color: var(--shell-text, inherit); font-size: .85rem; }
.crm-compose__results[b-zcao1e5ver] { list-style: none; margin: .35rem 0 0; padding: 0; border: 1px solid var(--shell-border, rgba(127,127,127,.25)); border-radius: 6px; max-height: 13rem; overflow-y: auto; background: var(--shell-surface, #fff); }
.crm-compose__results li + li[b-zcao1e5ver] { border-top: 1px solid var(--shell-border, rgba(127,127,127,.18)); }
.crm-compose__results button[b-zcao1e5ver] { display: flex; align-items: baseline; gap: .6rem; width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; padding: .45rem .7rem; cursor: pointer; }
.crm-compose__results button:hover[b-zcao1e5ver], .crm-compose__results button:focus-visible[b-zcao1e5ver] { background: var(--shell-item-hover-background, rgba(127,127,127,.1)); outline: none; }
.crm-compose__results .crm-muted[b-zcao1e5ver] { margin-left: auto; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-compose__kind[b-zcao1e5ver] { font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--shell-text-muted, inherit); min-width: 3.8rem; }

/* WhatsApp template */
.crm-compose__wa[b-zcao1e5ver] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.crm-compose__params[b-zcao1e5ver] { display: flex; flex-direction: column; gap: .5rem; }
.crm-compose__bubble[b-zcao1e5ver] { position: relative; padding: .7rem .9rem 1rem; border-radius: 10px 10px 10px 2px; background: var(--shell-status-ok-bg, rgba(37,211,102,.14)); border: 1px solid var(--shell-border, rgba(127,127,127,.2)); }
.crm-compose__bubble p[b-zcao1e5ver] { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; line-height: 1.45; }
.crm-compose__bubble-label[b-zcao1e5ver] { display: block; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--shell-text-muted, inherit); margin-bottom: .3rem; }

/* attachments */
.crm-compose__attach[b-zcao1e5ver] { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.crm-compose__attach-btn[b-zcao1e5ver] { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; margin: 0; }
.crm-compose__attach-total[b-zcao1e5ver] { margin-left: auto; font-size: .8rem; font-variant-numeric: tabular-nums; }
.crm-compose__files[b-zcao1e5ver] { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.crm-compose__files li[b-zcao1e5ver] { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .25rem .35rem .25rem .6rem; border-radius: 6px; border: 1px solid var(--shell-border, rgba(127,127,127,.25)); background: var(--shell-surface-muted, rgba(127,127,127,.06)); font-size: .82rem; overflow-wrap: anywhere; }
.crm-compose__files .crm-muted[b-zcao1e5ver] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-compose__x[b-zcao1e5ver] { border: 0; background: transparent; color: var(--shell-text-muted, inherit); font-size: 1.05rem; line-height: 1; padding: 0 .3rem; cursor: pointer; border-radius: 4px; }
.crm-compose__x:hover[b-zcao1e5ver], .crm-compose__x:focus-visible[b-zcao1e5ver] { color: var(--shell-danger, #b42318); background: var(--shell-item-hover-background, rgba(127,127,127,.12)); outline: none; }

@media (max-width: 760px)
{
    .crm-compose__two[b-zcao1e5ver], .crm-compose__wa[b-zcao1e5ver] { grid-template-columns: minmax(0, 1fr); }
    .crm-compose__channels[b-zcao1e5ver] { align-self: stretch; }
    .crm-compose__channel[b-zcao1e5ver] { flex: 1; justify-content: center; }
}
/* /Components/CRM/CrmConditionBuilder.razor.rz.scp.css */
/* The custom condition of a CRM approval workflow - builder and expression. Shell tokens only. */

.crm-cond[b-w61j3kmywc] { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }

.crm-cond__bar[b-w61j3kmywc] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

.crm-cond__modes[b-w61j3kmywc] {
    display: inline-flex;
    border: 1px solid var(--shell-border);
    border-radius: 8px;
    overflow: hidden;
}
.crm-cond__mode[b-w61j3kmywc] {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 0.35rem 0.9rem;
    cursor: pointer;
}
.crm-cond__mode + .crm-cond__mode[b-w61j3kmywc] { border-left: 1px solid var(--shell-border); }
.crm-cond__mode--on[b-w61j3kmywc] { background: var(--shell-accent, #2563eb); color: var(--shell-button-primary-text, #fff); }
.crm-cond__mode:focus-visible[b-w61j3kmywc] { outline: 2px solid var(--shell-accent, #2563eb); outline-offset: -2px; }

.crm-cond__group[b-w61j3kmywc] {
    border: 1px solid var(--shell-border);
    border-left: 4px solid var(--shell-accent, #2563eb);
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}
.crm-cond__group--d1[b-w61j3kmywc] { border-left-color: var(--shell-success, #2e7d32); }
.crm-cond__group--d2[b-w61j3kmywc] { border-left-color: var(--shell-warning, #b26a00); }
.crm-cond__group--d3[b-w61j3kmywc] { border-left-color: var(--shell-danger, #c62828); }

.crm-cond__grouphead[b-w61j3kmywc] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
[b-w61j3kmywc] .crm-cond__groupmode { max-width: 14rem; }
.crm-cond__not[b-w61j3kmywc] { font-size: 0.86rem; }

.crm-cond__rule[b-w61j3kmywc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}
[b-w61j3kmywc] .crm-cond__field { flex: 1 1 13rem; min-width: 11rem; }
[b-w61j3kmywc] .crm-cond__fn { flex: 0 1 11rem; min-width: 9rem; }
[b-w61j3kmywc] .crm-cond__n { flex: 0 0 4.5rem; width: 4.5rem; }
[b-w61j3kmywc] .crm-cond__op { flex: 0 1 11rem; min-width: 9rem; }
[b-w61j3kmywc] .crm-cond__val { flex: 1 1 9rem; min-width: 8rem; }
.crm-cond__today[b-w61j3kmywc] { font-size: 0.84rem; }

.crm-cond__adds[b-w61j3kmywc] { display: flex; gap: 0.4rem; }

.crm-cond__text[b-w61j3kmywc] {
    width: 100%;
    box-sizing: border-box;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--shell-border);
    border-radius: 8px;
    background: var(--shell-panel-background);
    color: var(--shell-text-primary);
    resize: vertical;
}
.crm-cond__text:focus-visible[b-w61j3kmywc] { outline: 2px solid var(--shell-accent, #2563eb); outline-offset: 1px; }

.crm-cond__insert[b-w61j3kmywc] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.crm-cond__check[b-w61j3kmywc] {
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--shell-status-success-border, #2e7d32);
    border-left-width: 4px;
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}
.crm-cond__check code[b-w61j3kmywc] { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.84rem; opacity: 0.85; }
.crm-cond__check ol[b-w61j3kmywc] { margin: 0.25rem 0 0; padding-left: 1.2rem; }
.crm-cond__check--bad[b-w61j3kmywc] { border-color: var(--shell-danger, #c62828); }

.crm-cond__test summary[b-w61j3kmywc] { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.crm-cond__testbar[b-w61j3kmywc] { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 0.5rem; }
.crm-cond__testbar .app-field[b-w61j3kmywc] { flex: 1 1 auto; }
.crm-cond__verdict[b-w61j3kmywc] { margin: 0.5rem 0; padding: 0.4rem 0.6rem; border-radius: 6px; border: 1px solid var(--shell-border); }
.crm-cond__verdict--yes[b-w61j3kmywc] { border-color: var(--shell-success, #2e7d32); }
.crm-cond__verdict--bad[b-w61j3kmywc] { border-color: var(--shell-danger, #c62828); }

.crm-cond__facts[b-w61j3kmywc] { overflow-x: auto; }
.crm-cond__facts table[b-w61j3kmywc] { border-collapse: collapse; font-size: 0.86rem; }
.crm-cond__facts th[b-w61j3kmywc], .crm-cond__facts td[b-w61j3kmywc] { padding: 0.25rem 0.6rem; border-bottom: 1px solid var(--shell-border); text-align: left; }
.crm-cond__facts th[b-w61j3kmywc] { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; }
.crm-cond__used td[b-w61j3kmywc] { font-weight: 700; }
.crm-cond__more[b-w61j3kmywc] { margin-top: 0.4rem; border: 0; background: transparent; color: var(--shell-accent, #2563eb); cursor: pointer; font: inherit; font-size: 0.86rem; padding: 0; }

@media (max-width: 900px) {
    .crm-cond__insert[b-w61j3kmywc] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/CRM/CrmHelpBook.razor.rz.scp.css */
/* The CRM manual on CRM > Getting Started. Shell tokens only; every block closed. */

.crm-book[b-yctka6fgjl] {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 2px solid var(--shell-border);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.crm-book__head h2[b-yctka6fgjl] {
    margin: 0 0 0.25rem;
    font-size: 1.35rem;
}

.crm-book__head p[b-yctka6fgjl] {
    margin: 0;
    opacity: 0.85;
}

.crm-book__toc[b-yctka6fgjl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem 1.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--shell-border);
    border-radius: 8px;
}

.crm-book__toc-title[b-yctka6fgjl] {
    margin: 0 0 0.35rem;
    font-weight: 700;
}

.crm-book__toc ul[b-yctka6fgjl] {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.crm-book__toc-note[b-yctka6fgjl] {
    margin: 0;
    font-size: 0.86rem;
    opacity: 0.8;
}

.crm-book__off[b-yctka6fgjl] {
    margin-left: 0.4rem;
    padding: 0.02rem 0.4rem;
    border: 1px dashed var(--shell-border);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.85;
}

.crm-book__module[b-yctka6fgjl] {
    margin: 1.75rem 0 0.25rem;
    font-size: 1.15rem;
    border-bottom: 1px solid var(--shell-border);
    padding-bottom: 0.3rem;
}

.crm-book__about[b-yctka6fgjl] {
    margin: 0;
    opacity: 0.85;
}

.crm-book__screen[b-yctka6fgjl] {
    margin-top: 1.25rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 10px;
    scroll-margin-top: 5rem;
}

.crm-book__screen-head[b-yctka6fgjl] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.crm-book__screen-head h4[b-yctka6fgjl] {
    margin: 0;
    font-size: 1.1rem;
}

.crm-book__path[b-yctka6fgjl] {
    margin: 0.1rem 0 0;
    font-size: 0.85rem;
    opacity: 0.8;
}

.crm-book__lead[b-yctka6fgjl] {
    margin: 0.6rem 0 0.75rem;
    font-size: 1rem;
}

.crm-book__screen h5[b-yctka6fgjl] {
    margin: 1.1rem 0 0.35rem;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.8;
}

.crm-book__screen p[b-yctka6fgjl] {
    margin: 0 0 0.55rem;
    line-height: 1.5;
}

.crm-book__screen ul[b-yctka6fgjl],
.crm-book__screen ol[b-yctka6fgjl] {
    margin: 0 0 0.6rem;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.crm-book__detail[b-yctka6fgjl] {
    display: block;
    margin-top: 0.15rem;
    opacity: 0.85;
    font-size: 0.92em;
}

.crm-book__group[b-yctka6fgjl] {
    margin: 0.85rem 0 0.25rem;
    font-weight: 700;
}

.crm-book__groupnote[b-yctka6fgjl] {
    margin: 0 0 0.4rem;
    opacity: 0.85;
    font-size: 0.92em;
}

.crm-book__tablewrap[b-yctka6fgjl] {
    overflow-x: auto;
    margin-bottom: 0.6rem;
}

.crm-book__table[b-yctka6fgjl] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    line-height: 1.4;
}

.crm-book__table th[b-yctka6fgjl] {
    text-align: left;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--shell-border);
    white-space: nowrap;
    opacity: 0.85;
}

.crm-book__table td[b-yctka6fgjl] {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--shell-border) 55%, transparent);
    vertical-align: top;
}

.crm-book__table td:first-child[b-yctka6fgjl] {
    white-space: nowrap;
}

.crm-book__table td:nth-child(2)[b-yctka6fgjl] {
    white-space: nowrap;
    font-size: 0.82rem;
    opacity: 0.85;
}

.crm-book__table--keys td:first-child[b-yctka6fgjl] {
    width: 8rem;
}

.crm-book kbd[b-yctka6fgjl] {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--shell-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .crm-book__table td:first-child[b-yctka6fgjl],
    .crm-book__table td:nth-child(2)[b-yctka6fgjl] {
        white-space: normal;
    }
}

/* ── trouble groups in the manual ── */
.crm-book__troublehead[b-yctka6fgjl] {
    margin: 1rem 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--shell-muted, #6b7280);
}
/* /Components/CRM/CrmProviderBadge.razor.rz.scp.css */
/* A provider's logo beside its name in a picker. Scoped to this component. */

.crmlogo[b-zu34wyzm0u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* Both the image and the tile occupy the same box, so a row is the same height
   whether a logo file is there or not - a list that reflows as files appear
   looks broken in a different way. */
.crmlogo__img[b-zu34wyzm0u],
.crmlogo__tile[b-zu34wyzm0u] {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
}

.crmlogo__img[b-zu34wyzm0u] {
    object-fit: contain;
    background: transparent;
}

/* Shown only when the image failed - the markup's own onerror does the swap. */
.crmlogo__tile[b-zu34wyzm0u] {
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    color: hsl(var(--crmlogo-hue, 210) 45% 30%);
    background: hsl(var(--crmlogo-hue, 210) 55% 92%);
    border: 1px solid hsl(var(--crmlogo-hue, 210) 40% 78%);
}

:root:not([data-theme="light"]) .crmlogo__tile[b-zu34wyzm0u],
:root[data-theme="dark"] .crmlogo__tile[b-zu34wyzm0u] {
    color: hsl(var(--crmlogo-hue, 210) 55% 86%);
    background: hsl(var(--crmlogo-hue, 210) 35% 26%);
    border-color: hsl(var(--crmlogo-hue, 210) 30% 38%);
}

/* The name is always there. A logo is a help to recognition, never the label -
   somebody who cannot see it, or whose images are blocked, reads the same list. */
.crmlogo__name[b-zu34wyzm0u] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/CRM/CrmScoreCard.razor.rz.scp.css */
/* The score card on a lead or a deal (phase 7). Scoped to this component:
   the class names do not travel, so everything the markup uses is here. */

.crmscore__top[b-cbj1h0pi5b] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
}

.crmscore__facts[b-cbj1h0pi5b] { flex: 1 1 18rem; min-width: 0; }
.crmscore__actions[b-cbj1h0pi5b] { margin-left: auto; }

/* ── the badge ──────────────────────────────────────────────────────────── */

.crmscore__badge[b-cbj1h0pi5b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: 0.5rem;
    border: 1px solid var(--shell-border, #d0d4dc);
    background: var(--shell-surface-muted, #f4f6f9);
}

.crmscore__number[b-cbj1h0pi5b] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

/* The band WORD, always shown. Colour is never the only signal - a reader who
   cannot tell the greens from the ambers still reads "Hot". */
.crmscore__band[b-cbj1h0pi5b] {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.crmscore__pending[b-cbj1h0pi5b] {
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
}

.crmscore__badge--success[b-cbj1h0pi5b] { border-color: var(--shell-success, #2e7d32); color: var(--shell-success, #2e7d32); }
.crmscore__badge--warning[b-cbj1h0pi5b] { border-color: var(--shell-warning, #b26a00); color: var(--shell-warning, #b26a00); }
.crmscore__badge--danger[b-cbj1h0pi5b]  { border-color: var(--shell-danger,  #c62828); color: var(--shell-danger,  #c62828); }
.crmscore__badge--info[b-cbj1h0pi5b]    { border-color: var(--shell-border,  #d0d4dc); color: inherit; }

.crmscore__asat[b-cbj1h0pi5b] {
    margin: 0 0 0.25rem;
    font-size: 0.78rem;
    opacity: 0.75;
}

.crmscore__aside[b-cbj1h0pi5b] {
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
}

.crmscore__aside .app-field-hint[b-cbj1h0pi5b] { display: block; }

.crmscore__error[b-cbj1h0pi5b] {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    color: var(--shell-danger, #c62828);
}

/* ── the shape over time ────────────────────────────────────────────────── */

.crmscore__trend[b-cbj1h0pi5b] { margin-top: 0.4rem; }

.crmscore__trend svg[b-cbj1h0pi5b] {
    display: block;
    width: 100%;
    max-width: 16rem;
    height: 2.5rem;
    opacity: 0.65;
}

/* ── the reasons ────────────────────────────────────────────────────────── */

.crmscore__why[b-cbj1h0pi5b] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    width: 100%;
    margin-top: 0.9rem;
}

.crmscore__why-col[b-cbj1h0pi5b] { flex: 1 1 16rem; min-width: 0; }

.crmscore__why-col h4[b-cbj1h0pi5b] {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
}

.crmscore__why-col ul[b-cbj1h0pi5b] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.crmscore__why-col li[b-cbj1h0pi5b] {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.15rem 0;
    font-size: 0.88rem;
}

.crmscore__pts[b-cbj1h0pi5b] {
    flex: 0 0 2.6rem;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.crmscore__pts--up[b-cbj1h0pi5b] { color: var(--shell-success, #2e7d32); }
.crmscore__pts--down[b-cbj1h0pi5b] { color: var(--shell-danger, #c62828); }

.crmscore__model-note[b-cbj1h0pi5b] { margin-top: 0.5rem; }

/* ── the suggestion ─────────────────────────────────────────────────────── */

.crmscore__next[b-cbj1h0pi5b] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin-top: 0.9rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.45rem;
    border: 1px solid var(--shell-border, #d0d4dc);
    background: var(--shell-surface-muted, #f4f6f9);
}

.crmscore__next-icon[b-cbj1h0pi5b] { font-size: 1.1rem; opacity: 0.8; }

.crmscore__next-text[b-cbj1h0pi5b] { flex: 1 1 auto; min-width: 0; }
.crmscore__next-text strong[b-cbj1h0pi5b] { display: block; }
.crmscore__next-text .app-field-hint[b-cbj1h0pi5b] { display: block; margin-top: 0.1rem; }

@media (max-width: 720px) {
    .crmscore__actions[b-cbj1h0pi5b] { margin-left: 0; width: 100%; }
}
/* /Components/EwayBillDialog.razor.rz.scp.css */
/* E-way bill dialog — theme-variable surfaces only. */

.eway__title[b-txgj118ewu] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.eway__subtitle[b-txgj118ewu] {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.75;
    color: var(--shell-text-primary, inherit);
}

.eway[b-txgj118ewu] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--shell-text-primary, inherit);
}

.eway__error[b-txgj118ewu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.12);
    color: #c2333f;
    font-size: 0.85rem;
}

.eway__error-x[b-txgj118ewu] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}

.eway__grid[b-txgj118ewu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    max-height: 62vh;
    overflow: auto;
}

.eway__fs[b-txgj118ewu] {
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.15));
    border-radius: 10px;
    padding: 0.5rem 0.7rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.eway__fs legend[b-txgj118ewu] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.8;
    padding: 0 0.3rem;
}

.eway__f[b-txgj118ewu] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
}

.eway__f span[b-txgj118ewu] { flex: 0 0 120px; opacity: 0.8; }

.eway__f input[b-txgj118ewu],
.eway__f select[b-txgj118ewu] {
    flex: 1;
    min-width: 0;
    min-height: 34px;
    font-size: 0.88rem;
    padding: 0.25rem 0.45rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.4rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
}

.eway__f input[type="number"][b-txgj118ewu] { text-align: right; }

.eway__fillbar[b-txgj118ewu] { display: flex; justify-content: flex-end; }

.eway__actions[b-txgj118ewu] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
/* /Components/Fixed Assets/FixedAssetTranDialog.razor.rz.scp.css */
/* FixedAssetTranDialog — register-mode asset cards.

   The list used to be ONE scroller holding all the cards. Mid-scroll you
   were looking at Make / Model / Serial No with nothing to say WHICH asset
   they belonged to, and with the cards butted together their boundaries
   blurred into each other. Now each asset is its own scroll box with its own
   pinned header. */

.fat-cards[b-ufulbanb39] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* The outer list still scrolls when there are more cards than fit, but
       each card is capped below, so this is a scroll over CARDS rather than
       over one long run of fields. */
    max-height: 56vh;
    overflow-y: auto;
    padding-right: 2px;   /* room for the scrollbar, so it never sits on a border */
}

.fat-card[b-ufulbanb39] {
    border: 1px solid #ddd;
    border-radius: 6px;
    /* Clips the body's scroll to the rounded corner and stops the header's
       background bleeding past the edge. */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Never taller than this: past it the card scrolls internally, which is
       what keeps its own header reachable. */
    max-height: 38vh;
    flex: 0 0 auto;
}

.fat-card--invalid[b-ufulbanb39] {
    border-color: rgba(220, 38, 38, 0.45);
}

/* Pinned to the top of the CARD's scroll box — sticky resolves against
   .fat-card__body's overflow, so it stays put while that card's fields
   scroll under it. Opaque, or the fields show through. */
.fat-card__head[b-ufulbanb39] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f5f5f5;
    border-bottom: 1px solid #e5e5e5;
    flex: 0 0 auto;
}

.fat-card__head strong[b-ufulbanb39] {
    font-size: 0.78rem;
    color: #555;
    flex: 0 0 auto;
}

/* The asset's own name in the header, so a scrolled card still says what it
   is — "Asset 2" alone does not help once you have named them. */
.fat-card__name[b-ufulbanb39] {
    font-size: 0.74rem;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 320px;
    padding-left: 8px;
    border-left: 1px solid #ddd;
}

[b-ufulbanb39] .fat-card__remove {
    min-width: 32px;
    padding: 2px 8px;
    line-height: 1;
    font-size: 1rem;
    color: #dc2626;
    flex: 0 0 auto;
}

.fat-card__body[b-ufulbanb39] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px 12px;
    padding: 10px;
    overflow-y: auto;
    min-height: 0;
}
/* /Components/GeneratePODialog.razor.rz.scp.css */
/* Generate PO dialog — theme-variable surfaces only. */

.genpo__title[b-sei8pfsh99] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.genpo__subtitle[b-sei8pfsh99] {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.75;
    color: var(--shell-text-primary, inherit);
}

.genpo[b-sei8pfsh99] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--shell-text-primary, inherit);
}

.genpo__error[b-sei8pfsh99] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.12);
    color: #c2333f;
    font-size: 0.85rem;
}

.genpo__error-x[b-sei8pfsh99] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}

.genpo__filters[b-sei8pfsh99] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: end;
}

.genpo__f[b-sei8pfsh99] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.75rem;
}

.genpo__f span[b-sei8pfsh99] { opacity: 0.8; }

.genpo__f select[b-sei8pfsh99],
.genpo__f input[type="date"][b-sei8pfsh99] {
    min-height: 38px;
    font-size: 0.9rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.5rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    min-width: 120px;
}

.genpo__scroll[b-sei8pfsh99] {
    overflow: auto;
    max-height: 46vh;
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
}

.genpo__table[b-sei8pfsh99] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: var(--shell-panel-background, #fff);
}

.genpo__table th[b-sei8pfsh99] {
    position: sticky;
    top: 0;
    background: var(--shell-panel-background, #fff);
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    white-space: normal;
}

.genpo__table td[b-sei8pfsh99] {
    padding: 0.35rem 0.55rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.08));
    cursor: pointer;
}

.genpo__chk[b-sei8pfsh99] { width: 34px; }
.genpo__chk input[b-sei8pfsh99] { width: 18px; height: 18px; }
.genpo__row--sel td[b-sei8pfsh99] { background: rgba(13, 110, 253, 0.10); }

.genpo__num[b-sei8pfsh99] { text-align: right; font-variant-numeric: tabular-nums; }

.genpo__num input[b-sei8pfsh99] {
    width: 100px;
    min-height: 32px;
    text-align: right;
    font-size: 0.88rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.4rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
}

.genpo__when[b-sei8pfsh99] { white-space: nowrap; }
.genpo__empty[b-sei8pfsh99] { opacity: 0.7; text-align: center; }

.genpo__actions[b-sei8pfsh99] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.genpo__spacer[b-sei8pfsh99] { flex: 1; }
/* /Components/Help/GuideDocument.razor.rz.scp.css */
/* GuideDocument - a module guide inside the shell: contents on the left, the
   text on the right, both full width of the page (panels reach the right edge).
   Shell tokens only, so it follows the theme. */

.gd-bar[b-aelompheg6] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0 0 0.9rem; }
.gd-lead[b-aelompheg6] { margin: 0; max-width: 80ch; font-size: 0.98rem; opacity: 0.85; }

.gd-btn[b-aelompheg6] {
    flex: 0 0 auto;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.45rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}
.gd-btn:hover[b-aelompheg6] { background: var(--shell-panel-background-soft, rgba(127, 127, 127, 0.08)); }
.gd-btn:focus-visible[b-aelompheg6] { outline: 2px solid var(--shell-accent, #2563eb); outline-offset: 2px; }

.gd-body[b-aelompheg6] {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
    width: 100%;
}

.gd-toc[b-aelompheg6] {
    position: sticky;
    top: 0.5rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    padding: 0.9rem 1rem;
    border: 1px solid var(--shell-border);
    border-radius: 12px;
    background: var(--shell-panel-background);
    font-size: 0.88rem;
}
.gd-toc__label[b-aelompheg6] { margin: 0 0 0.5rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }
.gd-toc ol[b-aelompheg6] { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.35rem; }
.gd-toc a[b-aelompheg6] { color: inherit; text-decoration: none; }
.gd-toc a:hover[b-aelompheg6] { text-decoration: underline; }
.gd-toc a:focus-visible[b-aelompheg6] { outline: 2px solid var(--shell-accent, #2563eb); outline-offset: 2px; }

.gd-doc[b-aelompheg6] {
    min-width: 0;
    padding: 0.4rem 1.6rem 1.4rem;
    border: 1px solid var(--shell-border);
    border-radius: 14px;
    background: var(--shell-panel-background);
    color: var(--shell-text-primary);
    line-height: 1.55;
}

.gd-section[b-aelompheg6] { padding-top: 1.1rem; scroll-margin-top: 0.75rem; }
.gd-section + .gd-section[b-aelompheg6] { border-top: 1px solid var(--shell-border); margin-top: 1rem; }
.gd-section h2[b-aelompheg6] { margin: 0 0 0.6rem; font-size: 1.2rem; text-wrap: balance; }
.gd-section h3[b-aelompheg6] { margin: 1rem 0 0.4rem; font-size: 1rem; }
.gd-section p[b-aelompheg6],
.gd-section ul[b-aelompheg6],
.gd-section ol[b-aelompheg6] { max-width: 80ch; margin: 0 0 0.75rem; }
.gd-section ul[b-aelompheg6],
.gd-section ol[b-aelompheg6] { padding-left: 1.35rem; display: flex; flex-direction: column; gap: 0.35rem; }
.gd-steps li[b-aelompheg6]::marker { font-weight: 700; }

.gd-tip[b-aelompheg6] {
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid var(--shell-status-info-border, #1976d2);
    border-left-width: 4px;
    background: var(--shell-status-info-bg, #e3f2fd);
}

.gd-keys[b-aelompheg6],
.gd-table[b-aelompheg6] { border-collapse: collapse; font-size: 0.92rem; margin: 0 0 0.9rem; }
.gd-keys th[b-aelompheg6],
.gd-keys td[b-aelompheg6],
.gd-table th[b-aelompheg6],
.gd-table td[b-aelompheg6] { padding: 0.4rem 0.65rem; border-bottom: 1px solid var(--shell-border); text-align: left; vertical-align: top; }
.gd-keys th[b-aelompheg6] { white-space: nowrap; width: 1%; }
.gd-table thead th[b-aelompheg6] { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; }
.gd-tablewrap[b-aelompheg6] { overflow-x: auto; max-width: 100%; }

kbd[b-aelompheg6] {
    display: inline-block;
    min-width: 2rem;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--shell-border);
    border-bottom-width: 2px;
    border-radius: 0.35rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    color: var(--shell-text-primary) !important;
    background: var(--shell-surface-background, #f1f5fa) !important;
    box-shadow: none;
}

.gd-muted[b-aelompheg6] { opacity: 0.75; font-size: 0.9rem; }
.gd-updated[b-aelompheg6] { margin-top: 1.25rem; }

@media (max-width: 900px) {
    .gd-body[b-aelompheg6] { grid-template-columns: minmax(0, 1fr); }
    .gd-toc[b-aelompheg6] { position: static; max-height: none; }
    .gd-doc[b-aelompheg6] { padding: 0.25rem 1rem 1rem; }
}
/* /Components/Inventory/AmcDetailsDialog.razor.rz.scp.css */
/* AMC agreement dialog — theme-variable surfaces only. */

.amc__title[b-rwz152l02g] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.amc__subtitle[b-rwz152l02g] {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.75;
    color: var(--shell-text-primary, inherit);
}

.amc[b-rwz152l02g] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    color: var(--shell-text-primary, inherit);
}

.amc__error[b-rwz152l02g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.12);
    color: #c2333f;
    font-size: 0.85rem;
}

.amc__error-x[b-rwz152l02g] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}

.amc__f[b-rwz152l02g] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
}

.amc__f span[b-rwz152l02g] { opacity: 0.8; }

.amc__f input[b-rwz152l02g],
.amc__f select[b-rwz152l02g] {
    min-height: 38px;
    font-size: 0.9rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.5rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
}

.amc__f--check[b-rwz152l02g] {
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
    min-height: 38px;
}

.amc__f--check input[b-rwz152l02g] { width: 18px; height: 18px; min-height: 0; }
.amc__f--check span[b-rwz152l02g] { opacity: 1; }

.amc__actions[b-rwz152l02g] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.3rem;
}
/* /Components/Inventory/BomCalculatorDialog.razor.rz.scp.css */
/* BOM calculator dialog — theme-variable surfaces only. */

.bomcal__title[b-jip7frttmg] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.bomcal__subtitle[b-jip7frttmg] {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.75;
    color: var(--shell-text-primary, inherit);
}

.bomcal[b-jip7frttmg] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--shell-text-primary, inherit);
}

.bomcal__error[b-jip7frttmg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.12);
    color: #c2333f;
    font-size: 0.85rem;
}

.bomcal__error-x[b-jip7frttmg] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}

.bomcal__pickbar[b-jip7frttmg] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.bomcal__pickbar select[b-jip7frttmg] {
    flex: 1;
    min-height: 40px;
    font-size: 0.9rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.5rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
}

.bomcal__grids[b-jip7frttmg] {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 0.6rem;
}

.bomcal__pane[b-jip7frttmg] { min-width: 0; }

.bomcal__panehead[b-jip7frttmg] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.8;
    margin-bottom: 0.25rem;
}

.bomcal__scroll[b-jip7frttmg] {
    overflow: auto;
    max-height: 44vh;
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
}

.bomcal__table[b-jip7frttmg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: var(--shell-panel-background, #fff);
}

.bomcal__table th[b-jip7frttmg] {
    position: sticky;
    top: 0;
    background: var(--shell-panel-background, #fff);
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.45rem 0.55rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    white-space: normal;
}

.bomcal__table td[b-jip7frttmg] {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.08));
}

.bomcal__table tfoot td[b-jip7frttmg] {
    border-top: 2px solid var(--shell-border, rgba(0, 0, 0, 0.2));
}

.bomcal__table input[b-jip7frttmg] {
    min-height: 32px;
    font-size: 0.86rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.4rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    width: 95px;
    text-align: right;
}

.bomcal__num[b-jip7frttmg] { text-align: right; font-variant-numeric: tabular-nums; }

.bomcal__actions[b-jip7frttmg] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
/* /Components/Inventory/CostSheetDialog.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   CostSheetDialog — scoped styles.
   Mirrors BillByBill / CostCentre dialog look so the three
   tracking dialogs feel like a single family.
   ══════════════════════════════════════════════════════════ */

.cost-sheet-dialog[b-hnkbk81xq6] {
    min-width: 960px;
}

/* ── Header layout: title flexes, maximize button hugs the right
      (close X is rendered by Syncfusion further right via ShowCloseIcon).
      gap leaves breathing room between the title text and the icon
      buttons so they don't visually merge. ───────────────────────────── */
[b-hnkbk81xq6] .cs-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    /* Push our maximize button to the right edge — Syncfusion's close (X)
       sits OUTSIDE the header template (it's a sibling of <Header>'s
       container), so this margin only affects our button. */
    padding-right: 28px;
}

[b-hnkbk81xq6] .cs-header__title {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Maximize / restore button — flat icon button, hover/focus picks up the
   same light background the close (X) gets so the two affordances feel
   like a pair. */
[b-hnkbk81xq6] .cs-header__maximize {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    padding: 4px 6px;
    margin: 0;
    cursor: pointer;
    color: inherit;        /* matches the header text colour from the theme */
    border-radius: 4px;
    line-height: 1;
    font-size: 16px;       /* sizes the .e-icons span inside */
    transition: background-color 120ms ease;
}

[b-hnkbk81xq6] .cs-header__maximize:hover,
[b-hnkbk81xq6] .cs-header__maximize:focus {
    background: rgba(255, 255, 255, 0.18);
    outline: 0;
}

/* Maximized: stretch the dialog content to the available height so item /
   sundry grids can grow into the new space rather than leaving a tall
   blank gap below them. The wrapper class lives on the SfDialog (root),
   so we target the .e-dialog-content child Syncfusion injects. */
[b-hnkbk81xq6] .cost-sheet-dialog-wrapper--maximized .e-dlg-content {
    /* Subtract approximate header (56px) + footer/action (52px) heights
       from the dialog's computed height. SfDialog passes the Height
       attribute through to the outer .e-dialog, so this calc keeps the
       inner content from overflowing past the dialog box. */
    max-height: calc(95vh - 110px);
    height: calc(95vh - 110px);
    overflow: auto;
}

/* Item / charges grid heights also stretch when maximized so users get
   the value of the extra real estate (more rows visible without scrolling
   inside the grid). */
[b-hnkbk81xq6] .cost-sheet-dialog-wrapper--maximized .cs-tab-content .e-grid {
    /* min-height keeps small datasets from collapsing too tightly. */
    min-height: 320px;
}

.cs-summary[b-hnkbk81xq6] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 0 10px;
}

.cs-summary__pill[b-hnkbk81xq6] {
    background: var(--shell-contrast-surface-bg, var(--shell-panel-background));
    border: 1px solid var(--shell-border);
    border-radius: 999px;
    padding: 6px 14px;
    display: inline-flex;
    flex-direction: column;
    min-width: 130px;
    color: var(--shell-text-primary);
}

.cs-summary__pill > span[b-hnkbk81xq6] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--shell-text-secondary);
}

.cs-summary__pill > strong[b-hnkbk81xq6] {
    font-size: 1rem;
    font-weight: 700;
}

/* Pill colours reference the global --shell-status-* tokens so dark / high-
   contrast themes flip them automatically. See app.css :root and each theme
   override block. */
.cs-summary__pill--warn[b-hnkbk81xq6] {
    background: var(--shell-status-warn-bg);
    border-color: var(--shell-status-warn-border);
    color: var(--shell-status-warn-text);
}
.cs-summary__pill--warn > span[b-hnkbk81xq6] { color: var(--shell-status-warn-text); }

.cs-summary__pill--ok[b-hnkbk81xq6] {
    background: var(--shell-status-ok-bg);
    border-color: var(--shell-status-ok-border);
    color: var(--shell-status-ok-text);
}
.cs-summary__pill--ok > span[b-hnkbk81xq6] { color: var(--shell-status-ok-text); }

/* Horizontal padding mirrors .inv-dialog__actions' 0.5rem right inset so the
   "Bulk Rate Update" / "Add Charge" toolbar buttons sit at the same visual
   gutter as the Save / Cancel action row at the bottom of the dialog.
   Without this, SfButton's theme shadow + ripple container made the left
   edge of those buttons look flush against the section wall. */
.cs-toolbar[b-hnkbk81xq6] {
    display: flex;
    gap: 6px;
    padding: 6px 0.5rem 8px;
    flex-wrap: wrap;
}

.cs-tab-content[b-hnkbk81xq6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[b-hnkbk81xq6] .cs-tabs { margin-top: 4px; }

/* Compact status banner — top of dialog, one line tall.
   padding + font-size are deliberately small so the banner doesn't
   push the grids below down on every Save / Bulk-Update / Print.
   Centre-aligned so short messages ("Bulk rate update applied.")
   still look balanced without stretching the container. */
.cs-status[b-hnkbk81xq6] {
    margin: 0 0 6px 0;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
}
.cs-status--error[b-hnkbk81xq6]   { background: var(--shell-status-error-bg); border-left: 3px solid var(--shell-status-error-border); color: var(--shell-status-error-text); }
.cs-status--warning[b-hnkbk81xq6] { background: var(--shell-status-warn-bg);  border-left: 3px solid var(--shell-status-warn-accent);  color: var(--shell-status-warn-text);  }
.cs-status--info[b-hnkbk81xq6]    { background: var(--shell-status-info-bg);  border-left: 3px solid var(--shell-status-info-border);  color: var(--shell-status-info-text);  }

/* Inline numeric editors — tight padding so rows stay compact. */
[b-hnkbk81xq6] .inv-find-grid .e-rowcell .e-input-group,
[b-hnkbk81xq6] .inv-find-grid .e-rowcell .e-control-wrapper { margin: 0; }
[b-hnkbk81xq6] .inv-find-grid .e-rowcell .e-input { padding-top: 2px !important; padding-bottom: 2px !important; }

/* Right-align rules for .cs-num / .cs-num-txt live in wwwroot/css/dialogs.css
   (global, unscoped). SfDialog renders its markup into a portal on
   document.body, so scoped ::deep rules here can't reach the items grid
   reliably — the global stylesheet is the only cascade that wins for
   portal-rendered dialog content. */

/* Locked-edit cells (Cost (+) / Cost (−)): visually de-emphasise so
   the user can see at a glance they're not editable. No border, muted
   background, no focus ring. Values still selectable for copy/paste. */
[b-hnkbk81xq6] .inv-find-grid .cs-num-readonly .e-input,
[b-hnkbk81xq6] .inv-find-grid .cs-num-readonly input {
    background: transparent !important;
    color: var(--shell-text-secondary, #555) !important;
    cursor: default !important;
}
[b-hnkbk81xq6] .inv-find-grid .cs-num-readonly .e-input-group,
[b-hnkbk81xq6] .inv-find-grid .cs-num-readonly.e-input-group {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Footer aggregates. */
[b-hnkbk81xq6] .inv-find-grid .e-gridfooter {
    background: color-mix(in srgb, var(--shell-button-primary) 14%, var(--shell-panel-background));
    border-top: 2px solid var(--shell-button-primary);
}
[b-hnkbk81xq6] .inv-find-grid .e-summarycell {
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--shell-text-primary);
    padding: 4px 6px !important;
}
.cs-agg-label[b-hnkbk81xq6] {
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--shell-text-primary);
}
.cs-agg-sum[b-hnkbk81xq6] {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--shell-button-primary);
}

/* ── Flat section layout (replaces the old SfTab) ────────────── */
.cs-section[b-hnkbk81xq6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}
.cs-section-head[b-hnkbk81xq6] {
    display: flex;
    align-items: center;
    padding: 4px 2px 2px;
    border-bottom: 1px solid var(--shell-border);
}
.cs-section-title[b-hnkbk81xq6] {
    font-size: 0.86rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--shell-text-primary);
}

/* Source badge (Auto vs Manual) in the charges grid. */
.cs-charge-source[b-hnkbk81xq6] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cs-charge-source--auto[b-hnkbk81xq6] {
    background: color-mix(in srgb, var(--shell-text-secondary) 18%, transparent);
    color: var(--shell-text-secondary);
}
.cs-charge-source--manual[b-hnkbk81xq6] {
    background: color-mix(in srgb, var(--shell-button-primary) 18%, transparent);
    color: var(--shell-button-primary);
}

/* ── Dialog sizing ───────────────────────────────────────────────
   Cap the dialog height so it doesn't stretch the full viewport on
   tall screens. The two grids (items 220px, charges 160px) plus
   summary strip + headers + actions fit comfortably within ~80vh.   */
[b-hnkbk81xq6] .cost-sheet-dialog-wrapper.e-dialog {
    max-height: 80vh;
}
[b-hnkbk81xq6] .cost-sheet-dialog-wrapper .e-dlg-content {
    padding: 10px 14px;
    overflow: auto;
}
.cs-section[b-hnkbk81xq6] { margin-top: 6px; }

/* Suppress spin-button arrows on every numeric input inside this dialog.
   ShowSpinButton="false" on SfNumericTextBox hides Syncfusion's own spin
   nodes; these rules clean up any native type=number spinners that leak
   through via SfTextBox + HtmlAttributes. */
[b-hnkbk81xq6] .cost-sheet-dialog-wrapper .e-spin-up,
[b-hnkbk81xq6] .cost-sheet-dialog-wrapper .e-spin-down {
    display: none !important;
}
[b-hnkbk81xq6] .cost-sheet-dialog-wrapper input[type=number]::-webkit-inner-spin-button,
[b-hnkbk81xq6] .cost-sheet-dialog-wrapper input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
[b-hnkbk81xq6] .cost-sheet-dialog-wrapper input[type=number] {
    -moz-appearance: textfield;
}
/* /Components/Inventory/CustomTableDataEntry.razor.rz.scp.css */
/* Generic Data Entry screen — body layout + dockable Help / User Guide panel.
   Mirrors the Product Master help pattern. */

.custom-entry__body[b-ffctdnx2q3] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.custom-entry__main[b-ffctdnx2q3] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Help / User Guide panel (dockable) ── */
.custom-entry__help[b-ffctdnx2q3] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    align-self: stretch;
    max-height: 100%;
    overflow: auto;
    color: var(--shell-text-primary);
}
.custom-entry__help--docked[b-ffctdnx2q3] {
    flex: 0 0 60px;
    padding: 0.9rem 0.5rem;
    overflow: hidden;
}
.custom-entry__help-dock[b-ffctdnx2q3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    min-height: 100%;
}
.custom-entry__help-dock-label[b-ffctdnx2q3] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}
/* Icon-only: square, and never stretched. The caption used to make this wide
   enough to overlap Close on a narrow dialog, and the docked rule below was
   stretching it to the full panel width. */
.custom-entry__help-toggle[b-ffctdnx2q3] {
    min-width: 0;
    flex: 0 0 auto;
    padding: 0.25rem 0.4rem;
    line-height: 1;
}

.custom-entry__panel-head[b-ffctdnx2q3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.custom-entry__panel-eyebrow[b-ffctdnx2q3] {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}
.custom-entry__help-intro[b-ffctdnx2q3] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}
.custom-entry__help-accordion[b-ffctdnx2q3] { width: 100%; }
.custom-entry__help-content[b-ffctdnx2q3] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    color: var(--shell-text-primary);
    line-height: 1.6;
}
.custom-entry__help-content p[b-ffctdnx2q3] { margin: 0; }
.custom-entry__help-list[b-ffctdnx2q3] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.6rem;
}
.custom-entry__help-list li[b-ffctdnx2q3] { padding-left: 0.15rem; }
.custom-entry__help-content code[b-ffctdnx2q3] {
    font-size: 0.85em;
    padding: 0.05rem 0.3rem;
    border-radius: 0.25rem;
    background: rgba(128, 128, 128, 0.16);
}
[b-ffctdnx2q3] .custom-entry__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .custom-entry__body[b-ffctdnx2q3] { flex-direction: column; }
    .custom-entry__help[b-ffctdnx2q3],
    .custom-entry__help--docked[b-ffctdnx2q3] { flex: 0 0 auto; width: 100%; overflow: visible; }
    .custom-entry__help-dock[b-ffctdnx2q3] { flex-direction: row; }
    .custom-entry__help-dock-label[b-ffctdnx2q3] { writing-mode: horizontal-tb; transform: none; }
}
/* /Components/Inventory/ImportLinesDialog.razor.rz.scp.css */
/* Spreadsheet import dialog — theme-variable surfaces only. */

.imp__title[b-o3ynfzcnvz] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.imp[b-o3ynfzcnvz] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--shell-text-primary, inherit);
}

.imp__error[b-o3ynfzcnvz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.12);
    color: #c2333f;
    font-size: 0.85rem;
}

.imp__error-x[b-o3ynfzcnvz] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}

.imp__pick[b-o3ynfzcnvz] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem;
    border: 1px dashed var(--shell-border, rgba(0, 0, 0, 0.25));
    border-radius: 10px;
}

.imp__busy[b-o3ynfzcnvz] { font-size: 0.82rem; opacity: 0.75; }

.imp__hint[b-o3ynfzcnvz] { margin: 0; font-size: 0.78rem; line-height: 1.5; opacity: 0.8; }

.imp__summary[b-o3ynfzcnvz] {
    font-size: 0.85rem;
    font-weight: 600;
}

.imp__scroll[b-o3ynfzcnvz] {
    overflow: auto;
    max-height: 40vh;
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
}

.imp__table[b-o3ynfzcnvz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: var(--shell-panel-background, #fff);
}

.imp__table th[b-o3ynfzcnvz] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--shell-panel-background, #fff);
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: normal;
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
}

.imp__table td[b-o3ynfzcnvz] {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.08));
}

.imp__num[b-o3ynfzcnvz] { text-align: right; font-variant-numeric: tabular-nums; }

.imp__bad[b-o3ynfzcnvz] { background: rgba(220, 53, 69, 0.08); }
.imp__prob[b-o3ynfzcnvz] { color: #c2333f; font-size: 0.8rem; }

.imp__actions[b-o3ynfzcnvz] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* The two format downloads sit at the far end of the file picker row. */
.imp__formats[b-o3ynfzcnvz] { margin-left: auto; display: inline-flex; gap: 0.5rem; }
/* /Components/Inventory/InventoryAssemblyDialog.razor.rz.scp.css */
/* Inventory Assembly dialog — theme-variable surfaces only. */

.asm__title[b-36fedhxd5f] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.asm__subtitle[b-36fedhxd5f] {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.75;
    color: var(--shell-text-primary, inherit);
}

.asm[b-36fedhxd5f] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--shell-text-primary, inherit);
}

.asm__error[b-36fedhxd5f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.12);
    color: #c2333f;
    font-size: 0.85rem;
}

.asm__error-x[b-36fedhxd5f] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}

.asm__scroll[b-36fedhxd5f] {
    overflow: auto;
    max-height: 52vh;
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
}

.asm__table[b-36fedhxd5f] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
    background: var(--shell-panel-background, #fff);
}

.asm__table th[b-36fedhxd5f] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--shell-panel-background, #fff);
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: normal;
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
}

.asm__table td[b-36fedhxd5f] {
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.08));
}

.asm__item[b-36fedhxd5f] { min-width: 220px; }

.asm__num[b-36fedhxd5f] { text-align: right; font-variant-numeric: tabular-nums; }

.asm__table input[b-36fedhxd5f] {
    width: 100%;
    min-width: 78px;
    min-height: 32px;
    font-size: 0.86rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.4rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
}

.asm__num input[b-36fedhxd5f] { text-align: right; }

.asm__del[b-36fedhxd5f] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    min-width: 32px;
    min-height: 32px;
}

.asm__del:hover[b-36fedhxd5f] { opacity: 1; color: #c2333f; }

.asm__empty[b-36fedhxd5f] { opacity: 0.7; text-align: center; padding: 1rem; }

.asm__totlabel[b-36fedhxd5f] {
    text-align: right;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.8;
}

.asm__tot[b-36fedhxd5f] { font-weight: 700; font-size: 0.95rem; }

.asm__actions[b-36fedhxd5f] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
/* /Components/Inventory/ItemVariantsDialog.razor.rz.scp.css */
/* Per-line variant breakdown. Reuses the division-op pill/grid styles so it
   reads like the other per-line allocation dialogs. */
.item-variants[b-pmhxro1gvw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
}

/* Line qty first, then one pill per attribute in play — the row wraps because
   an item can carry several attributes. */
.item-variants__summary[b-pmhxro1gvw] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Native cell editors — so Apply (F5) commits the cell being typed rather than
   losing it to a control that only writes on blur. */
.iv-cell[b-pmhxro1gvw] {
    width: 100%;
    font: inherit;
    padding: 0.2rem 0.35rem;
    border: 1px solid #c7d2e8;
    border-radius: 3px;
    background: #fff;
}

.iv-cell--num[b-pmhxro1gvw] {
    text-align: right;
}

/* Icon-only per-row remove — square, no room taken for a label that is not
   there. */
[b-pmhxro1gvw] .iv-rowbtn {
    min-width: 0;
    padding: 0.15rem 0.35rem;
    line-height: 1;
}

[b-pmhxro1gvw] .iv-rowbtn .e-btn-icon {
    margin: 0;
    font-size: 0.95rem;
}
/* /Components/Inventory/JobOrderDialog.razor.rz.scp.css */
/* Job-order dialog — theme-variable surfaces only. */

.jobord__title[b-a09ngzxuwg] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.jobord__subtitle[b-a09ngzxuwg] {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.75;
    color: var(--shell-text-primary, inherit);
}

.jobord[b-a09ngzxuwg] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--shell-text-primary, inherit);
}

.jobord__error[b-a09ngzxuwg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.12);
    color: #c2333f;
    font-size: 0.85rem;
}

.jobord__error-x[b-a09ngzxuwg] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}

.jobord__pickbar[b-a09ngzxuwg] { position: relative; }

.jobord__pickbar input[b-a09ngzxuwg] {
    width: 100%;
    min-height: 40px;
    font-size: 0.9rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.5rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
}

.jobord__picklist[b-a09ngzxuwg] {
    position: absolute;
    z-index: 30;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 40vh;
    overflow: auto;
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.15));
    border-radius: 0 0 10px 10px;
    background: var(--shell-panel-background, #fff);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.jobord__pickitem[b-a09ngzxuwg] {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--shell-text-primary, inherit);
    padding: 0.45rem 0.65rem;
    cursor: pointer;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.06));
}

.jobord__pickitem:hover[b-a09ngzxuwg] { background: rgba(13, 110, 253, 0.10); }

.jobord__scroll[b-a09ngzxuwg] {
    overflow: auto;
    max-height: 48vh;
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
}

.jobord__table[b-a09ngzxuwg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: var(--shell-panel-background, #fff);
}

.jobord__table th[b-a09ngzxuwg] {
    position: sticky;
    top: 0;
    background: var(--shell-panel-background, #fff);
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    white-space: normal;
}

.jobord__table td[b-a09ngzxuwg] {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.08));
    vertical-align: middle;
}

.jobord__table input[b-a09ngzxuwg] {
    min-height: 34px;
    font-size: 0.88rem;
    padding: 0.25rem 0.45rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.4rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    width: 130px;
}

.jobord__num[b-a09ngzxuwg] { text-align: right; font-variant-numeric: tabular-nums; }
.jobord__num input[b-a09ngzxuwg] { width: 100px; text-align: right; }
.jobord__desc[b-a09ngzxuwg] { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobord__empty[b-a09ngzxuwg] { opacity: 0.7; text-align: center; }

.jobord__actions[b-a09ngzxuwg] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
/* /Components/Inventory/ManualDocDetailsDialog.razor.rz.scp.css */
/* Manual document details dialog — theme-variable surfaces only. */

.mdoc__title[b-zob361y8sm] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.mdoc__subtitle[b-zob361y8sm] {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.75;
    color: var(--shell-text-primary, inherit);
}

.mdoc[b-zob361y8sm] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--shell-text-primary, inherit);
}

.mdoc__error[b-zob361y8sm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.12);
    color: #c2333f;
    font-size: 0.85rem;
}

.mdoc__error-x[b-zob361y8sm] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}

.mdoc__grid[b-zob361y8sm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
}

.mdoc__f[b-zob361y8sm] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
    min-width: 0;
}

.mdoc__f span[b-zob361y8sm] { opacity: 0.8; }

.mdoc__f input[b-zob361y8sm] {
    min-height: 38px;
    font-size: 0.95rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.5rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
}

.mdoc__hint[b-zob361y8sm] { margin: 0; font-size: 0.76rem; line-height: 1.5; opacity: 0.75; }

.mdoc__actions[b-zob361y8sm] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
/* /Components/Inventory/MfrOperationsDialog.razor.rz.scp.css */
/* Manufacturing operations dialog — theme-variable surfaces only. */

.mfrops__title[b-s5fjla10el] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.mfrops__subtitle[b-s5fjla10el] {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.75;
    color: var(--shell-text-primary, inherit);
}

.mfrops[b-s5fjla10el] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--shell-text-primary, inherit);
}

.mfrops__error[b-s5fjla10el] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.12);
    color: #c2333f;
    font-size: 0.85rem;
}

.mfrops__error-x[b-s5fjla10el] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}

.mfrops__pickbar[b-s5fjla10el] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.mfrops__pickbar select[b-s5fjla10el] {
    flex: 1;
    min-height: 40px;
    font-size: 0.9rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.5rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
}

.mfrops__scroll[b-s5fjla10el] {
    overflow: auto;
    max-height: 52vh;
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
}

.mfrops__table[b-s5fjla10el] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
    background: var(--shell-panel-background, #fff);
}

.mfrops__table th[b-s5fjla10el] {
    position: sticky;
    top: 0;
    background: var(--shell-panel-background, #fff);
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.55rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    white-space: normal;
}

.mfrops__table td[b-s5fjla10el] {
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.08));
    vertical-align: middle;
}

.mfrops__table input[type="text"][b-s5fjla10el],
.mfrops__table input[type="number"][b-s5fjla10el],
.mfrops__table input[type="datetime-local"][b-s5fjla10el] {
    min-height: 32px;
    font-size: 0.85rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.4rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    width: 130px;
}

.mfrops__table input[type="checkbox"][b-s5fjla10el] { width: 18px; height: 18px; }

.mfrops__num[b-s5fjla10el] { text-align: right; font-variant-numeric: tabular-nums; }
.mfrops__num input[b-s5fjla10el] { width: 80px; text-align: right; }
.mfrops__empty[b-s5fjla10el] { opacity: 0.7; text-align: center; }

.mfrops__actions[b-s5fjla10el] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
/* /Components/Inventory/MultilineItemDialog.razor.rz.scp.css */
/* Multiline line-item creator — theme-variable surfaces only. */

.mlin__title[b-iuvo4cslqz] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.mlin[b-iuvo4cslqz] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    color: var(--shell-text-primary, inherit);
}

.mlin__error[b-iuvo4cslqz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.12);
    color: #c2333f;
    font-size: 0.85rem;
}

.mlin__error-x[b-iuvo4cslqz] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}

.mlin__grid[b-iuvo4cslqz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.55rem;
}

.mlin__f[b-iuvo4cslqz] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
    min-width: 0;
}

.mlin__f--wide[b-iuvo4cslqz] { grid-column: span 2; }

.mlin__f span[b-iuvo4cslqz] { opacity: 0.8; }

.mlin__f input[b-iuvo4cslqz] {
    min-height: 38px;
    font-size: 0.9rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.5rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
}

.mlin__section[b-iuvo4cslqz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.7rem;
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
}

.mlin__sechead[b-iuvo4cslqz] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.8;
    font-weight: 700;
}

.mlin__hint[b-iuvo4cslqz] { margin: 0; font-size: 0.76rem; opacity: 0.7; }

.mlin__scroll[b-iuvo4cslqz] {
    overflow: auto;
    max-height: 30vh;
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
}

.mlin__table[b-iuvo4cslqz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
    background: var(--shell-panel-background, #fff);
}

.mlin__table th[b-iuvo4cslqz] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--shell-panel-background, #fff);
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: normal;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
}

.mlin__table td[b-iuvo4cslqz] {
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.08));
}

.mlin__table input[b-iuvo4cslqz] {
    width: 100%;
    min-width: 90px;
    min-height: 32px;
    font-size: 0.86rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.4rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
}

.mlin__num[b-iuvo4cslqz] { text-align: right; font-variant-numeric: tabular-nums; }
.mlin__num input[b-iuvo4cslqz] { text-align: right; }

.mlin__del[b-iuvo4cslqz] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    min-width: 32px;
    min-height: 32px;
}

.mlin__del:hover[b-iuvo4cslqz] { opacity: 1; color: #c2333f; }

.mlin__empty[b-iuvo4cslqz] { opacity: 0.7; text-align: center; padding: 0.8rem; }

.mlin__actions[b-iuvo4cslqz] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
/* /Components/Inventory/OrderDueDialog.razor.rz.scp.css */
/* Order-due schedule dialog — theme-variable surfaces only. */

.orddue__title[b-1uhgkbnyna] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.orddue__subtitle[b-1uhgkbnyna] {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.75;
    color: var(--shell-text-primary, inherit);
}

.orddue[b-1uhgkbnyna] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--shell-text-primary, inherit);
}

.orddue__error[b-1uhgkbnyna] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.12);
    color: #c2333f;
    font-size: 0.85rem;
}

.orddue__error-x[b-1uhgkbnyna] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}

.orddue__scroll[b-1uhgkbnyna] {
    overflow: auto;
    max-height: 46vh;
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
}

.orddue__table[b-1uhgkbnyna] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    background: var(--shell-panel-background, #fff);
}

.orddue__table th[b-1uhgkbnyna] {
    position: sticky;
    top: 0;
    background: var(--shell-panel-background, #fff);
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
}

.orddue__table td[b-1uhgkbnyna] {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.08));
}

.orddue__table tfoot td[b-1uhgkbnyna] {
    border-top: 2px solid var(--shell-border, rgba(0, 0, 0, 0.2));
}

.orddue__table input[b-1uhgkbnyna] {
    min-height: 34px;
    font-size: 0.88rem;
    padding: 0.25rem 0.45rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.4rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    width: 150px;
}

.orddue__num[b-1uhgkbnyna] { text-align: right; font-variant-numeric: tabular-nums; }
.orddue__num input[b-1uhgkbnyna] { width: 110px; text-align: right; }
.orddue__empty[b-1uhgkbnyna] { opacity: 0.7; text-align: center; }

.orddue__actions[b-1uhgkbnyna] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.orddue__spacer[b-1uhgkbnyna] { flex: 1; }

/* What the line still has to schedule. It is not decoration: Enter on a
   quantity reads this to decide whether another row is wanted or the
   schedule is finished, so the operator can see the same thing the
   keyboard is acting on. */
.orddue__balance td[b-1uhgkbnyna] {
    padding-top: 0.15rem;
    font-size: 0.78rem;
    opacity: 0.8;
}

.orddue__balance td:last-child[b-1uhgkbnyna],
.orddue__balance .orddue__num[b-1uhgkbnyna] {
    font-variant-numeric: tabular-nums;
}
/* /Components/Inventory/PriceLevelUpdateDialog.razor.rz.scp.css */
/* Price-level update dialog — theme-variable surfaces only. */

.pxupd__title[b-2dt3tduwbt] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.pxupd__subtitle[b-2dt3tduwbt] {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.75;
    color: var(--shell-text-primary, inherit);
}

.pxupd[b-2dt3tduwbt] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--shell-text-primary, inherit);
}

.pxupd__error[b-2dt3tduwbt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.12);
    color: #c2333f;
    font-size: 0.85rem;
}

.pxupd__error-x[b-2dt3tduwbt] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}

.pxupd__scroll[b-2dt3tduwbt] {
    overflow: auto;
    max-height: 46vh;
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
}

.pxupd__table[b-2dt3tduwbt] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    background: var(--shell-panel-background, #fff);
}

.pxupd__table th[b-2dt3tduwbt] {
    position: sticky;
    top: 0;
    background: var(--shell-panel-background, #fff);
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
}

.pxupd__table td[b-2dt3tduwbt] {
    padding: 0.35rem 0.55rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.08));
}

.pxupd__num[b-2dt3tduwbt] { text-align: right; font-variant-numeric: tabular-nums; }

.pxupd__num input[b-2dt3tduwbt] {
    width: 130px;
    min-height: 34px;
    text-align: right;
    font-size: 0.9rem;
    padding: 0.25rem 0.45rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.4rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
}

.pxupd__empty[b-2dt3tduwbt] { opacity: 0.7; text-align: center; }

.pxupd__actions[b-2dt3tduwbt] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
/* /Components/Inventory/StockReserveDialog.razor.rz.scp.css */
/* Stock reservation dialog — theme-variable surfaces only. */

.stkrsv__title[b-e9eafom8h2] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.stkrsv__subtitle[b-e9eafom8h2] {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.75;
    color: var(--shell-text-primary, inherit);
}

.stkrsv[b-e9eafom8h2] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--shell-text-primary, inherit);
}

.stkrsv__error[b-e9eafom8h2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.12);
    color: #c2333f;
    font-size: 0.85rem;
}

.stkrsv__error-x[b-e9eafom8h2] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}

.stkrsv__scroll[b-e9eafom8h2] {
    overflow: auto;
    max-height: 52vh;
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
}

.stkrsv__table[b-e9eafom8h2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: var(--shell-panel-background, #fff);
}

.stkrsv__table th[b-e9eafom8h2] {
    position: sticky;
    top: 0;
    background: var(--shell-panel-background, #fff);
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    white-space: normal;
}

.stkrsv__table td[b-e9eafom8h2] {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.08));
}

.stkrsv__num[b-e9eafom8h2] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.stkrsv__num input[b-e9eafom8h2] {
    width: 110px;
    min-height: 34px;
    text-align: right;
    font-size: 0.9rem;
    padding: 0.25rem 0.45rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.4rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
}

.stkrsv__empty[b-e9eafom8h2] { opacity: 0.7; text-align: center; }

.stkrsv__actions[b-e9eafom8h2] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.stkrsv__spacer[b-e9eafom8h2] { flex: 1; }
/* /Components/Inventory/VariantAssignmentDialog.razor.rz.scp.css */
/* Per-product variant assignment — one line per attribute. */
.variant-assign[b-5fbvmuln4v] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
}

.variant-assign__summary[b-5fbvmuln4v] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.variant-assign__list[b-5fbvmuln4v] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    min-height: 0;
}

/* Label | picker | clear. The picker takes the slack so long value lists get
   the room, and the label column stays aligned down the dialog. */
.variant-assign__row[b-5fbvmuln4v] {
    display: grid;
    grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.45rem 0.55rem;
    border: 1px solid #e3e8f2;
    border-radius: 4px;
    background: #fbfcfe;
}

/* An edited row is worth spotting before Save. */
.variant-assign__row--changed[b-5fbvmuln4v] {
    border-color: #c7a86b;
    background: #fdf8ee;
}

.variant-assign__label[b-5fbvmuln4v] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.variant-assign__name[b-5fbvmuln4v] {
    font-weight: 600;
}

.variant-assign__desc[b-5fbvmuln4v] {
    font-size: 0.78rem;
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.variant-assign__tag[b-5fbvmuln4v] {
    align-self: flex-start;
    font-size: 0.68rem;
    padding: 0.02rem 0.32rem;
    border-radius: 999px;
    background: #e4ecfb;
    color: #33507f;
}

.variant-assign__picker[b-5fbvmuln4v] {
    min-width: 0;
}
/* /Components/LoadVoucherDialog.razor.rz.scp.css */
/* Load Voucher dialog — theme-variable surfaces only (dark-mode
   convention df926e8); touch targets ≥ 40px. */

.loadvch__title[b-1vfe3metf6] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.loadvch__subtitle[b-1vfe3metf6] {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.75;
    color: var(--shell-text-primary, inherit);
}

.loadvch[b-1vfe3metf6] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    color: var(--shell-text-primary, inherit);
}

.loadvch__error[b-1vfe3metf6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.12);
    color: #c2333f;
    font-size: 0.85rem;
}

.loadvch__error-x[b-1vfe3metf6] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}

.loadvch__filters[b-1vfe3metf6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: end;
}

.loadvch__f[b-1vfe3metf6] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.75rem;
}

.loadvch__f span[b-1vfe3metf6] { opacity: 0.8; }

.loadvch__f select[b-1vfe3metf6],
.loadvch__f input[type="date"][b-1vfe3metf6],
.loadvch__f input[type="number"][b-1vfe3metf6] {
    min-height: 40px;
    font-size: 0.9rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.5rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    min-width: 130px;
}

.loadvch__f input[type="number"][b-1vfe3metf6] { text-align: right; width: 120px; }

.loadvch__f--check[b-1vfe3metf6] {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    min-height: 40px;
}

.loadvch__f--check input[b-1vfe3metf6] { width: 18px; height: 18px; }

.loadvch__empty[b-1vfe3metf6] {
    margin: 0.5rem 0;
    padding: 0.9rem;
    border-radius: 10px;
    background: var(--shell-panel-background, #fff);
    border: 1px dashed var(--shell-border, rgba(0, 0, 0, 0.2));
    font-size: 0.9rem;
    opacity: 0.85;
}

.loadvch__scroll[b-1vfe3metf6] {
    overflow: auto;
    max-height: 46vh;
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
}

.loadvch__table[b-1vfe3metf6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: var(--shell-panel-background, #fff);
}

.loadvch__table th[b-1vfe3metf6] {
    position: sticky;
    top: 0;
    background: var(--shell-panel-background, #fff);
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    white-space: normal;
}

.loadvch__table td[b-1vfe3metf6] {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.08));
    cursor: pointer;
}

.loadvch__table input[type="checkbox"][b-1vfe3metf6] { width: 18px; height: 18px; }

.loadvch__row--sel td[b-1vfe3metf6] { background: rgba(13, 110, 253, 0.10); }

.loadvch__party[b-1vfe3metf6],
.loadvch__narr[b-1vfe3metf6] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loadvch__num[b-1vfe3metf6] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* /Components/Others/AddressBookDialog.razor.rz.scp.css */
/* The address book - one row per person, the source as a coloured badge. */

.abk[b-3hzhw2pr7e] { display: flex; flex-direction: column; gap: .6rem; }

.abk__search[b-3hzhw2pr7e] {
    display: flex;
    align-items: center;
    gap: .45rem;
    height: 2.3rem;
    padding: 0 .7rem;
    border: 1px solid var(--shell-border, #cbd5e1);
    border-radius: .5rem;
    background: var(--shell-surface, #fff);
}

.abk__search:focus-within[b-3hzhw2pr7e] { border-color: var(--shell-accent, #0f766e); box-shadow: 0 0 0 2px rgba(15, 118, 110, .15); }
.abk__search .e-icons[b-3hzhw2pr7e] { opacity: .55; }
.abk__input[b-3hzhw2pr7e] { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; color: inherit; font: inherit; }

.abk__chips[b-3hzhw2pr7e] { display: flex; flex-wrap: wrap; gap: .35rem; }

.abk-chip[b-3hzhw2pr7e] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .65rem;
    border: 1px solid var(--shell-border, #cbd5e1);
    border-radius: 999px;
    background: var(--shell-surface, #fff);
    color: inherit;
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}

.abk-chip--on[b-3hzhw2pr7e] { background: var(--shell-accent, #0f766e); border-color: var(--shell-accent, #0f766e); color: var(--shell-button-primary-text, #fff); }
.abk-chip__n[b-3hzhw2pr7e] { font-size: .72rem; opacity: .75; font-variant-numeric: tabular-nums; }

.abk__list[b-3hzhw2pr7e] {
    height: 46vh;
    overflow-y: auto;
    border: 1px solid var(--shell-border, #e2e8f0);
    border-radius: .5rem;
}

.abk__empty[b-3hzhw2pr7e] { padding: 1rem; }

.abk-row[b-3hzhw2pr7e] {
    display: grid;
    grid-template-columns: 1.2rem 4.6rem minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, .8fr);
    align-items: center;
    gap: .5rem;
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--shell-border, #eef2f7);
    font-size: .85rem;
    cursor: pointer;
}

.abk-row:hover[b-3hzhw2pr7e] { background: var(--shell-surface-hover, rgba(148, 163, 184, .12)); }
.abk-row--on[b-3hzhw2pr7e] { background: rgba(15, 118, 110, .1); }
.abk-row--dnc[b-3hzhw2pr7e] { opacity: .55; cursor: not-allowed; }
.abk-row__who[b-3hzhw2pr7e] { display: flex; flex-direction: column; min-width: 0; }
.abk-row__who strong[b-3hzhw2pr7e],
.abk-row__org[b-3hzhw2pr7e],
.abk-row__addr[b-3hzhw2pr7e],
.abk-row__detail[b-3hzhw2pr7e] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abk-row__org[b-3hzhw2pr7e] { font-size: .76rem; color: var(--shell-text-secondary, #64748b); }
.abk-row__addr[b-3hzhw2pr7e] { color: var(--shell-text-primary, #0f172a); }
.abk-row__detail[b-3hzhw2pr7e] { font-size: .76rem; color: var(--shell-text-secondary, #64748b); }
.abk-row--dnc .abk-row__detail[b-3hzhw2pr7e] { color: #b91c1c; font-weight: 600; }

.abk-badge[b-3hzhw2pr7e] {
    justify-self: start;
    padding: .05rem .45rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.abk-badge--ledger[b-3hzhw2pr7e] { background: rgba(37, 99, 235, .12); color: #1d4ed8; border-color: rgba(37, 99, 235, .3); }
.abk-badge--contact[b-3hzhw2pr7e] { background: rgba(15, 118, 110, .12); color: #0f766e; border-color: rgba(15, 118, 110, .3); }
.abk-badge--lead[b-3hzhw2pr7e] { background: rgba(234, 179, 8, .15); color: #a16207; border-color: rgba(234, 179, 8, .35); }
.abk-badge--user[b-3hzhw2pr7e] { background: rgba(100, 116, 139, .14); color: #475569; border-color: rgba(100, 116, 139, .3); }
.abk-badge--shared[b-3hzhw2pr7e] { background: rgba(147, 51, 234, .12); color: #7e22ce; border-color: rgba(147, 51, 234, .3); }

.abk__actions[b-3hzhw2pr7e] { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.abk__picked[b-3hzhw2pr7e] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
    .abk-row[b-3hzhw2pr7e] { grid-template-columns: 1.2rem 4.6rem minmax(0, 1fr); }
    .abk-row__addr[b-3hzhw2pr7e], .abk-row__detail[b-3hzhw2pr7e] { grid-column: 3; }
}
/* /Components/Others/CommsBooksDialog.razor.rz.scp.css */
/* CommsBooksDialog - a party's or a document's messages. Theme tokens only. */
.cbd__sub[b-zq52k606r8] {
    margin-left: 0.6rem;
    font-weight: 400;
    color: var(--shell-text-muted);
    font-size: 0.9rem;
}

.cbd[b-zq52k606r8] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cbd__list[b-zq52k606r8] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 56vh;
    overflow: auto;
    border: 1px solid var(--shell-border);
    border-radius: 8px;
}

.cbd__list li + li[b-zq52k606r8] { border-top: 1px solid var(--shell-border); }

.cbd__item[b-zq52k606r8] {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 0;
    background: transparent;
    color: var(--shell-text-primary);
    text-align: left;
    cursor: pointer;
}

.cbd__item:hover[b-zq52k606r8], .cbd__item:focus-visible[b-zq52k606r8] { background: var(--shell-surface-hover); outline: none; }

.cbd__ch[b-zq52k606r8] {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--shell-border);
    justify-self: start;
    color: var(--shell-text-secondary);
}

.cbd__main[b-zq52k606r8] { display: flex; flex-direction: column; min-width: 0; gap: 0.1rem; }
.cbd__who[b-zq52k606r8] { font-weight: 600; }
.cbd__subject[b-zq52k606r8], .cbd__snippet[b-zq52k606r8] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbd__snippet[b-zq52k606r8] { color: var(--shell-text-muted); font-size: 0.86rem; }

.cbd__tags[b-zq52k606r8] { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.2rem; }
.cbd__tag[b-zq52k606r8] {
    font-size: 0.72rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--shell-surface-2);
    color: var(--shell-text-secondary);
}

.cbd__side[b-zq52k606r8] { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.cbd__when[b-zq52k606r8] { font-size: 0.78rem; color: var(--shell-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cbd__unread[b-zq52k606r8] {
    min-width: 1.4rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--shell-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.cbd__actions[b-zq52k606r8] { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }
/* /Components/Others/ConditionFilterDialog.razor.rz.scp.css */
/* The shared condition-filter dialog. Shell tokens only. */
.cfd[b-ssz8cygfz1] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 100%;
}

.cfd__note[b-ssz8cygfz1] {
    margin: 0;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--shell-warning, #b26a00);
    border-radius: 6px;
    font-size: 0.86rem;
    color: var(--shell-text-primary);
    background: var(--shell-panel-background);
}

.cfd__objects[b-ssz8cygfz1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.84rem;
}

.cfd__object[b-ssz8cygfz1] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.1rem 0.55rem;
    border: 1px solid var(--shell-border);
    border-radius: 999px;
}

.cfd__object code[b-ssz8cygfz1] { font-size: 0.78rem; opacity: 0.75; }

.cfd__actions[b-ssz8cygfz1] { margin-top: auto; }
/* /Components/Others/ConfirmDialog.razor.rz.scp.css */
/* Shared confirmation dialog — theme-variable surfaces only. */

.confirmdlg__title[b-72iu2j9fzc] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.confirmdlg[b-72iu2j9fzc] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    color: var(--shell-text-primary, inherit);
}

.confirmdlg__message[b-72iu2j9fzc] {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.confirmdlg__actions[b-72iu2j9fzc] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
/* /Components/Others/ControlFinderBox.razor.rz.scp.css */
/* ControlFinderBox — sits in a panel head, so it is sized to ride a heading
   row rather than to be a form field. */

.ctl-finder[b-hd9wmk9b7k] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.3rem;
    border: 1px solid var(--shell-border, #d6dee3);
    border-radius: 0.5rem;
    background: var(--shell-panel-background-soft, #f4f6f8);
    max-width: 100%;
    min-width: 0;
}

.ctl-finder__icon[b-hd9wmk9b7k] {
    font-size: 0.8rem;
    opacity: 0.6;
    flex: 0 0 auto;
}

.ctl-finder__input[b-hd9wmk9b7k] {
    border: 0;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: 0.76rem;
    padding: 0.15rem 0.2rem;
    width: 190px;
    min-width: 0;
    color: var(--shell-text-primary, inherit);
}

/* The browser's own clear affordance would sit next to this component's,
   which reads as a bug. */
.ctl-finder__input[b-hd9wmk9b7k]::-webkit-search-cancel-button {
    display: none;
}

.ctl-finder__count[b-hd9wmk9b7k] {
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: 0.75;
    flex: 0 0 auto;
}

.ctl-finder__count--none[b-hd9wmk9b7k] {
    color: #b45309;
    opacity: 1;
}

.ctl-finder__btn[b-hd9wmk9b7k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 0.2rem;
    border: 1px solid transparent;
    border-radius: 0.35rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
    flex: 0 0 auto;
}

.ctl-finder__btn:hover:not(:disabled)[b-hd9wmk9b7k] {
    background: rgba(0, 0, 0, 0.06);
}

.ctl-finder__btn:disabled[b-hd9wmk9b7k] {
    opacity: 0.35;
    cursor: not-allowed;
}

.ctl-finder__btn .e-icons[b-hd9wmk9b7k] {
    font-size: 0.72rem;
}

/* The current match's caption. Allowed to shrink away entirely before it
   pushes the buttons off the row. */
.ctl-finder__label[b-hd9wmk9b7k] {
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 0 1 auto;
    max-width: 220px;
    padding-left: 0.2rem;
    border-left: 1px solid var(--shell-border, #d6dee3);
}

@media (max-width: 900px) {
    .ctl-finder__input[b-hd9wmk9b7k] { width: 130px; }
    .ctl-finder__label[b-hd9wmk9b7k] { display: none; }
}
/* /Components/Others/CustomFieldsDialog.razor.rz.scp.css */
/* Compact two-column layout — label on the left, input on the right. The
   percentages match the Xamarin ReportParameterPage exactly so users
   transitioning from mobile see the same proportions. */
.custom-fields-grid[b-fk1z0kwv73] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 0.25rem;     /* breathing room next to the scrollbar */
}

.custom-fields-row[b-fk1z0kwv73] {
    display: grid;
    grid-template-columns: 35% 65%;
    align-items: center;
    gap: 0.6rem;
}

.custom-fields-row__label[b-fk1z0kwv73] {
    font-weight: 600;
    color: var(--shell-text-primary);
    font-size: 0.92rem;
    line-height: 1.3;
    overflow-wrap: anywhere;    /* long field names wrap rather than truncate */
}

.custom-fields-row__input[b-fk1z0kwv73] {
    min-width: 0;               /* lets the input flex without overflowing */
}

@media (max-width: 600px) {
    /* On phones drop to one column; label sits above the input. */
    .custom-fields-row[b-fk1z0kwv73] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Others/DataImportPanel.razor.rz.scp.css */
/* The shared importer (Data Import page and the masters' Import dialog). */

.dip[b-oxwzjnpe1a] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dip__group[b-oxwzjnpe1a] {
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.15));
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin: 0;
    min-inline-size: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dip__group legend[b-oxwzjnpe1a] {
    font-weight: 600;
    padding: 0 0.35rem;
}

.dip__group p[b-oxwzjnpe1a] { margin: 0; }

.dip__row[b-oxwzjnpe1a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.dip__row--end[b-oxwzjnpe1a] { justify-content: flex-end; }

.dip__muted[b-oxwzjnpe1a] {
    color: var(--shell-text-muted, #5f6b7a);
    font-size: 0.85rem;
}

.dip__cols summary[b-oxwzjnpe1a] {
    cursor: pointer;
    font-weight: 600;
}

.dip__table[b-oxwzjnpe1a] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.dip__table th[b-oxwzjnpe1a],
.dip__table td[b-oxwzjnpe1a] {
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    padding: 0.3rem 0.5rem;
    text-align: left;
    vertical-align: top;
}

.dip__counts[b-oxwzjnpe1a] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dip__chip[b-oxwzjnpe1a] {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--shell-pill-bg, rgba(0, 0, 0, 0.06));
    color: var(--shell-pill-text, inherit);
}

.dip__chip--new[b-oxwzjnpe1a] {
    background: var(--shell-status-ok-bg, rgba(46, 125, 50, 0.12));
    color: var(--shell-status-ok-text, #2e7d32);
}

.dip__chip--existing[b-oxwzjnpe1a] {
    background: var(--shell-status-warn-bg, rgba(178, 106, 0, 0.12));
    color: var(--shell-status-warn-text, #b26a00);
}

.dip__chip--error[b-oxwzjnpe1a] {
    background: var(--shell-status-error-bg, rgba(198, 40, 40, 0.12));
    color: var(--shell-status-error-text, #c62828);
}

.dip__batch[b-oxwzjnpe1a] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--shell-status-warn-text, #b26a00);
    background: var(--shell-status-warn-bg, rgba(178, 106, 0, 0.06));
    border-radius: 4px;
}

.dip__select[b-oxwzjnpe1a] {
    width: 100%;
    padding: 0.2rem;
    border: 1px solid var(--shell-field-border, rgba(0, 0, 0, 0.25));
    border-radius: 4px;
    background: var(--shell-surface, #fff);
    color: var(--shell-text-primary, inherit);
}

/* ── the editable rows grid ── */
.dip__sep[b-oxwzjnpe1a] { width: 1px; align-self: stretch; background: var(--shell-border, rgba(0, 0, 0, 0.15)); }
.dip__grow[b-oxwzjnpe1a] { flex: 1 1 280px; }
.dip__gridwrap[b-oxwzjnpe1a] { width: 100%; min-width: 0; overflow-x: auto; }

.dip__stale[b-oxwzjnpe1a] {
    margin: 0;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    background: var(--shell-status-warn-bg, rgba(178, 106, 0, 0.08));
    color: var(--shell-status-warn-text, #b26a00);
    font-size: 0.85rem;
}

/* A cell editor, bordered at rest so the operator sees it can be typed in
   (the editable-grid convention). Plain input - see the header note. */
.dip__cell[b-oxwzjnpe1a] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.15rem 0.3rem;
    border: 1px solid var(--shell-field-border, rgba(0, 0, 0, 0.25));
    border-radius: 3px;
    background: var(--shell-surface, #fff);
    color: var(--shell-text-primary, inherit);
    font: inherit;
}

.dip__cell:focus[b-oxwzjnpe1a] {
    outline: none;
    border-color: var(--shell-accent, #0f766e);
    background: var(--shell-surface, #fff);
}

.dip__x[b-oxwzjnpe1a] {
    border: none;
    background: transparent;
    color: var(--shell-status-error-text, #c62828);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 0.3rem;
}

.dip__x:disabled[b-oxwzjnpe1a] { opacity: 0.4; cursor: default; }
.dip__foot[b-oxwzjnpe1a] { font-weight: 600; }
/* /Components/Others/DemoLicenceBadge.razor.rz.scp.css */
/* DEMO marker in the dark header. Amber so it reads as "note this", not as an
   error; the panel drops below it over the page. */
.demo-lic[b-mil2ho4kpm] {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0.6rem;
    vertical-align: middle;
    /* the title line is 1.7rem / 800 / tight tracking - none of it belongs here */
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1.2;
}

.demo-lic__pill[b-mil2ho4kpm] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 196, 87, 0.75);
    background: rgba(255, 196, 87, 0.18);
    color: var(--shell-text-inverse, #fff);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}

.demo-lic__pill:hover[b-mil2ho4kpm],
.demo-lic__pill:focus-visible[b-mil2ho4kpm] {
    background: rgba(255, 196, 87, 0.32);
    outline: none;
}

.demo-lic__tag[b-mil2ho4kpm] {
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #ffd27a;
}

.demo-lic__pill--warn[b-mil2ho4kpm] {
    border-color: rgba(255, 150, 60, 0.9);
    background: rgba(255, 150, 60, 0.28);
}

.demo-lic__pill--expired[b-mil2ho4kpm] {
    border-color: rgba(255, 110, 110, 0.9);
    background: rgba(255, 90, 90, 0.3);
}

.demo-lic__panel[b-mil2ho4kpm] {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    z-index: 1200;
    width: min(360px, 90vw);
    padding: 0.8rem 0.95rem;
    border-radius: 10px;
    border: 1px solid var(--shell-border, #d3dbe3);
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, #1d2733);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    font-size: 0.84rem;
}

.demo-lic__head[b-mil2ho4kpm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.45rem;
}

.demo-lic__close[b-mil2ho4kpm] {
    border: none;
    background: transparent;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
}

.demo-lic__rows[b-mil2ho4kpm] {
    display: grid;
    grid-template-columns: 5.2rem 1fr;
    gap: 0.3rem 0.6rem;
    margin: 0;
}

.demo-lic__rows dt[b-mil2ho4kpm] {
    font-weight: 600;
    color: var(--shell-text-secondary, #5b6776);
}

.demo-lic__rows dd[b-mil2ho4kpm] {
    margin: 0;
}

.demo-lic__mono[b-mil2ho4kpm] {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.78rem;
    word-break: break-all;
}

.demo-lic__note[b-mil2ho4kpm] {
    margin: 0.6rem 0 0;
    font-weight: 600;
}

.demo-lic__foot[b-mil2ho4kpm] {
    margin: 0.6rem 0 0;
    font-size: 0.76rem;
    color: var(--shell-text-secondary, #5b6776);
}
/* /Components/Others/DevSchemaHelp.razor.rz.scp.css */
.dev-schema[b-aywfm0ptae] {
    /* A flex column will not shrink below its widest child unless told to,
       which is how a long table name pushes the whole panel wider. */
    min-width: 0;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--shell-border, #ccc);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.dev-schema__title[b-aywfm0ptae] {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}
.dev-schema__note[b-aywfm0ptae] { margin: 0; font-size: 0.74rem; opacity: 0.7; }
/* A name like EmpPayBillBatch_Trigger_StatusCascade is ONE unbreakable word.
   The help panel is ~300px wide and its pane is overflow-x:hidden, so without
   this the name is silently cut off mid-word with no scrollbar and no way to
   read the rest of it. Wrapping is the fix - a sideways scrollbar inside a
   help panel would be worse. */
.dev-schema__table summary[b-aywfm0ptae] {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.84rem;
    font-family: Consolas, "Courier New", monospace;
    padding: 0.2rem 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.dev-schema__desc[b-aywfm0ptae] {
    margin: 0.25rem 0 0.4rem;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}
.dev-schema__cols[b-aywfm0ptae] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
    line-height: 1.3;
    table-layout: fixed;
}
.dev-schema__cols th[b-aywfm0ptae],
.dev-schema__cols td[b-aywfm0ptae] {
    border: 1px solid var(--shell-border, #ddd);
    padding: 0.2rem 0.35rem;
    text-align: left;
    vertical-align: top;
    overflow-wrap: break-word;
}
.dev-schema__cols th:nth-child(1)[b-aywfm0ptae], .dev-schema__cols td:nth-child(1)[b-aywfm0ptae] { width: 32%; font-family: Consolas, "Courier New", monospace; }
.dev-schema__cols th:nth-child(2)[b-aywfm0ptae], .dev-schema__cols td:nth-child(2)[b-aywfm0ptae] { width: 22%; }

/* Views section heading — same weight as a table summary, a step below the
   panel title. */
.dev-schema__subtitle[b-aywfm0ptae] {
    margin: 0.9rem 0 0.3rem;
    font-size: 0.82rem;
    font-weight: 700;
}
/* /Components/Others/EmailComposeDialog.razor.rz.scp.css */
/* The generic compose window - the web shape of the legacy frmSendEmail. */

.emc-form label[b-7p442252i1] {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    margin: 0.5rem 0 0.2rem;
}

/* A label with a small action at its right - the To line's Contacts pick. */
.emc-labelrow[b-7p442252i1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.emc-labelrow label[b-7p442252i1] { margin-bottom: 0; }

.emc-labelrow[b-7p442252i1]  .emc-labelrow__btn {
    padding: 0.1rem 0.5rem;
    font-size: 0.74rem;
    line-height: 1.4;
}

/* ── Attachments strip ─────────────────────────────────────────────────── */
.emc-attach[b-7p442252i1] {
    margin-top: 0.7rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
}

.emc-attach__head[b-7p442252i1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.emc-attach__title[b-7p442252i1] {
    font-size: 0.78rem;
    font-weight: 700;
    margin-right: auto;
}

/* The file input hides behind a button-styled label - the browser's own
   "Choose files" strip has no place in a dialog. */
.emc-attach__pick[b-7p442252i1] {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.emc-attach__input[b-7p442252i1] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.emc-attach__list[b-7p442252i1] {
    list-style: none;
    margin: 0.45rem 0 0;
    padding: 0;
    max-height: 160px;
    overflow-y: auto;
}

.emc-attach__row[b-7p442252i1] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.22rem 0.15rem;
    border-bottom: 1px solid var(--shell-border, #eceff4);
    font-size: 0.82rem;
    min-width: 0;
}

.emc-attach__row:last-child[b-7p442252i1] { border-bottom: none; }

.emc-attach__row--empty[b-7p442252i1] {
    color: var(--shell-text-secondary, #5b6a7d);
    justify-content: center;
}

.emc-attach__name[b-7p442252i1] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}

.emc-attach__size[b-7p442252i1] {
    color: var(--shell-text-secondary, #5b6a7d);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.emc-attach__tag[b-7p442252i1] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--shell-text-secondary, #5b6a7d);
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 999px;
    padding: 0 0.45rem;
    white-space: nowrap;
}

.emc-attach__remove[b-7p442252i1] {
    border: none;
    background: transparent;
    color: var(--shell-danger, #b02a37);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0 0.2rem;
    line-height: 1;
}

.emc-actions[b-7p442252i1] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

/* ── Document Explorer picker ──────────────────────────────────────────── */
.emc-doc__note[b-7p442252i1] {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.emc-doc__tree[b-7p442252i1] {
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 8px;
    max-height: 320px;
    overflow: auto;
    padding: 0.3rem 0.4rem;
}

.emc-doc__node[b-7p442252i1] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.14rem 0;
    font-size: 0.84rem;
    min-width: 0;
    white-space: nowrap;
}

.emc-doc__toggle[b-7p442252i1] {
    border: none;
    background: transparent;
    cursor: pointer;
    width: 1.1rem;
    padding: 0;
    color: var(--shell-text-secondary, #5b6a7d);
}

.emc-doc__check[b-7p442252i1] { margin: 0 0.1rem 0 1.1rem; }

.emc-doc__name[b-7p442252i1] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emc-doc__name--folder[b-7p442252i1] { cursor: pointer; font-weight: 600; }

.emc-doc__size[b-7p442252i1] {
    margin-left: auto;
    color: var(--shell-text-secondary, #5b6a7d);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    padding-left: 0.6rem;
}

/* ── Contact book rows - name, company, address on one scannable line ──── */
.emc-contacts[b-7p442252i1] { margin-top: 0.45rem; }

.emc-contact[b-7p442252i1] { cursor: pointer; }

.emc-contact__check[b-7p442252i1] { margin-left: 0.1rem !important; }

.emc-contact .emc-doc__name[b-7p442252i1] { flex: 0 1 auto; font-weight: 600; }

.emc-contact__company[b-7p442252i1] {
    color: var(--shell-text-secondary, #5b6a7d);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
}

.emc-contact__email[b-7p442252i1] {
    margin-left: auto;
    padding-left: 0.6rem;
    font-size: 0.78rem;
    color: var(--shell-text-secondary, #5b6a7d);
    white-space: nowrap;
}

/* /Components/Others/HelpAskPanel.razor.rz.scp.css */
/* Ask the software how to do something. Scoped to this component. */

.helpask[b-xn9gf421l4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    min-height: 0;
}

.helpask__intro p[b-xn9gf421l4] {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.85;
}

.helpask__error[b-xn9gf421l4] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--shell-danger, #c62828);
}

/* ── the conversation ───────────────────────────────────────────────────── */

.helpask__thread[b-xn9gf421l4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 6rem;
    max-height: 26rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.helpask__who[b-xn9gf421l4] {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.6;
}

.helpask__q p[b-xn9gf421l4],
.helpask__a p[b-xn9gf421l4] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    white-space: pre-wrap;       /* the answer's own paragraphs and steps survive */
}

.helpask__q[b-xn9gf421l4] {
    align-self: flex-end;
    max-width: 85%;
    padding: 0.5rem 0.7rem;
    border-radius: 0.5rem 0.5rem 0.1rem 0.5rem;
    background: var(--shell-surface-muted, #eef1f5);
}

.helpask__a[b-xn9gf421l4] {
    align-self: flex-start;
    max-width: 95%;
    padding: 0.5rem 0.7rem;
    border-radius: 0.5rem 0.5rem 0.5rem 0.1rem;
    border: 1px solid var(--shell-border, #d9dde3);
}

.helpask__thinking[b-xn9gf421l4] { opacity: 0.7; font-style: italic; }

/* ── where the answer came from ─────────────────────────────────────────── */

.helpask__sources[b-xn9gf421l4] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.78rem;
}

.helpask__sources > span:first-child[b-xn9gf421l4] { opacity: 0.6; }

.helpask__sources a[b-xn9gf421l4],
.helpask__source-plain[b-xn9gf421l4] {
    padding: 0.05rem 0.4rem;
    border-radius: 0.75rem;
    border: 1px solid var(--shell-border, #d9dde3);
    text-decoration: none;
}

.helpask__sources a:hover[b-xn9gf421l4] { border-color: currentColor; }
.helpask__source-plain[b-xn9gf421l4] { opacity: 0.6; }

/* ── the empty state ────────────────────────────────────────────────────── */

.helpask__empty p[b-xn9gf421l4] { margin: 0 0 0.35rem; font-size: 0.82rem; opacity: 0.7; }
.helpask__empty ul[b-xn9gf421l4] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }

.helpask__example[b-xn9gf421l4] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 0.15rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.85;
}

.helpask__example:hover[b-xn9gf421l4] { opacity: 1; }

/* ── asking ─────────────────────────────────────────────────────────────── */

.helpask__ask[b-xn9gf421l4] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.helpask__buttons[b-xn9gf421l4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* /Components/Others/HelpPanel.razor.rz.scp.css */
/* CrmHelpPanel - the CRM Help aside. Shell tokens only; the panel's width and
   docking come from .ct-page__help in app.css. Every block here is closed. */

.crm-help__path[b-8se3prayyq] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.15rem 0 0.35rem;
    font-size: 0.82rem;
    opacity: 0.85;
}

.crm-help__p[b-8se3prayyq] {
    margin: 0 0 0.5rem;
}

.crm-help__lead[b-8se3prayyq] {
    margin: 0.6rem 0 0.25rem;
    font-weight: 600;
    font-size: 0.86rem;
}

.crm-help__group[b-8se3prayyq] {
    margin: 0.85rem 0 0.35rem;
    font-size: 0.88rem;
    font-weight: 700;
    border-bottom: 1px solid var(--shell-border);
    padding-bottom: 0.2rem;
}

.crm-help__detail[b-8se3prayyq] {
    display: block;
    margin-top: 0.15rem;
    opacity: 0.85;
}

.crm-help__list--not li[b-8se3prayyq] {
    opacity: 0.92;
}

/* the field table - it must stay readable inside a narrow docked panel */
.crm-help__fields[b-8se3prayyq] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.82rem;
    line-height: 1.35;
}

.crm-help__fields th[b-8se3prayyq] {
    text-align: left;
    font-weight: 600;
    padding: 0.25rem 0.35rem;
    border-bottom: 1px solid var(--shell-border);
    opacity: 0.85;
}

.crm-help__fields td[b-8se3prayyq] {
    padding: 0.3rem 0.35rem;
    border-bottom: 1px solid color-mix(in srgb, var(--shell-border) 55%, transparent);
    vertical-align: top;
    overflow-wrap: anywhere;
}

.crm-help__fields tr:last-child td[b-8se3prayyq] {
    border-bottom: 0;
}

.crm-help__fields th:first-child[b-8se3prayyq],
.crm-help__fields td:first-child[b-8se3prayyq] {
    width: 34%;
}

.crm-help__keys td:first-child[b-8se3prayyq] {
    width: 22%;
}

.crm-help__field[b-8se3prayyq] {
    display: block;
    font-weight: 600;
}

.crm-help__meta[b-8se3prayyq] {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.95em;
    opacity: 0.85;
}

/* required / optional / automatic - the word, never colour alone */
.crm-help__need[b-8se3prayyq] {
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0.02rem 0.35rem;
    border: 1px solid var(--shell-border);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.85;
}

.crm-help__need--req[b-8se3prayyq] {
    border-color: var(--shell-danger, #c62828);
    color: var(--shell-danger, #c62828);
    opacity: 1;
}

.crm-help__need--cond[b-8se3prayyq] {
    border-color: var(--shell-warning, #b26a00);
    color: var(--shell-warning, #b26a00);
    opacity: 1;
}

.crm-help__need--auto[b-8se3prayyq] {
    border-style: dashed;
}

.crm-help kbd[b-8se3prayyq] {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--shell-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
/* /Components/Others/HelpTroubleList.razor.rz.scp.css */
/* The trouble list: a group heading, then message / why / what to do.
   These styles live here (not in HelpPanel) because scoped CSS follows the
   component that renders the markup - HelpPanel and every hand-written aside
   both draw this list through HelpTroubleList. */

.crm-help__troublehead[b-bgobi5nec4] {
    margin: 0.85rem 0 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--shell-muted, #6b7280);
}

.crm-help__troublehead:first-child[b-bgobi5nec4] {
    margin-top: 0;
}

.crm-help__trouble[b-bgobi5nec4] {
    margin: 0;
}

.crm-help__trouble dt[b-bgobi5nec4] {
    margin-top: 0.5rem;
    font-weight: 600;
    line-height: 1.35;
}

.crm-help__trouble dd[b-bgobi5nec4] {
    margin: 0.15rem 0 0;
    padding-left: 0.7rem;
    border-left: 2px solid var(--shell-border, #e5e7eb);
    line-height: 1.45;
}

.crm-help__fix[b-bgobi5nec4] {
    display: block;
    margin-top: 0.2rem;
}
/* /Components/Others/ManualNotifyDialog.razor.rz.scp.css */
/* Manual notification dialog - theme tokens only, so it follows light/dark. */

.mnotify__title[b-k0j0kzq534] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.mnotify__subtitle[b-k0j0kzq534] {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.75;
    color: var(--shell-text-primary, inherit);
}

.mnotify[b-k0j0kzq534] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    color: var(--shell-text-primary, inherit);
}

.mnotify__f[b-k0j0kzq534] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
}

.mnotify__f > span[b-k0j0kzq534] {
    opacity: 0.8;
    font-weight: 600;
}

.mnotify__f input[type="text"][b-k0j0kzq534],
.mnotify__f textarea[b-k0j0kzq534] {
    font-size: 0.9rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.5rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    font-family: inherit;
}

.mnotify__f input[type="text"]:disabled[b-k0j0kzq534],
.mnotify__f textarea:disabled[b-k0j0kzq534] {
    opacity: 0.6;
}

.mnotify__channels[b-k0j0kzq534] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    padding: 0.35rem 0.1rem;
}

.mnotify__check[b-k0j0kzq534] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    cursor: pointer;
}

/* The notes the server put on the draft: what the original did, why it failed,
   whether the cooldown is running. Advisory, never a refusal - so it reads as
   a note and not as an alarm. */
.mnotify__notes[b-k0j0kzq534] {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    border: 1px dashed var(--shell-border, rgba(0, 0, 0, 0.2));
    background: var(--shell-surface-muted, transparent);
}

.mnotify__notes ul[b-k0j0kzq534] {
    margin: 0;
    padding-left: 1.1rem;
}

/* A setting has closed manual sending. The draft still shows - it is worth
   reading - but nothing here can be typed or sent, and this says why. */
.mnotify__blocked[b-k0j0kzq534] {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.5rem 0.65rem;
    border-radius: 0.5rem;
    border: 1px solid var(--shell-warning-border, #e0b050);
    background: var(--shell-warning-surface, rgba(224, 176, 80, 0.14));
    color: var(--shell-text-primary, inherit);
}

.mnotify__actions[b-k0j0kzq534] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.25rem;
}
/* /Components/Others/NotificationSettingsDialog.razor.rz.scp.css */
/* Notification settings dialog - theme tokens only, so it follows light/dark. */

.nset__title[b-c32gfw9ivr] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.nset__subtitle[b-c32gfw9ivr] {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.75;
    color: var(--shell-text-primary, inherit);
}

.nset[b-c32gfw9ivr] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--shell-text-primary, inherit);
}

.nset__placeholder[b-c32gfw9ivr] {
    font-size: 0.85rem;
    opacity: 0.85;
    margin: 0;
}

.nset__list[b-c32gfw9ivr] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Five rows today, but a settings dialog that grows must scroll inside
       itself rather than push its own buttons off the screen. */
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.nset__card[b-c32gfw9ivr] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 15rem);
    gap: 0.6rem;
    align-items: start;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--shell-border, #d7dee8);
    border-radius: 0.55rem;
    background: var(--shell-panel-background, transparent);
}

.nset__card--dirty[b-c32gfw9ivr] {
    border-color: var(--shell-accent, #3a72c8);
}

.nset__text[b-c32gfw9ivr] {
    min-width: 0;
}

.nset__name[b-c32gfw9ivr] {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 600;
}

.nset__id[b-c32gfw9ivr] {
    font-size: 0.7rem;
    opacity: 0.55;
    margin-left: 0.35rem;
}

.nset__dirty[b-c32gfw9ivr] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 0.4rem;
    color: var(--shell-accent, #3a72c8);
}

.nset__editor[b-c32gfw9ivr] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.nset__editor input[type="text"][b-c32gfw9ivr],
.nset__editor textarea[b-c32gfw9ivr],
.nset__num[b-c32gfw9ivr] {
    width: 100%;
    font-size: 0.88rem;
    padding: 0.32rem 0.5rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.45rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    font-family: inherit;
}

/* App-wide rule: every numeric input is right-aligned. */
.nset__num[b-c32gfw9ivr] {
    text-align: right;
}

.nset__switch[b-c32gfw9ivr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.nset__state[b-c32gfw9ivr] {
    font-size: 0.82rem;
    opacity: 0.8;
}

.nset__chips[b-c32gfw9ivr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.nset__chip[b-c32gfw9ivr] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 999px;
    cursor: pointer;
}

.nset__chip--on[b-c32gfw9ivr] {
    border-color: var(--shell-accent, #3a72c8);
    font-weight: 600;
}

.nset__none[b-c32gfw9ivr] {
    font-size: 0.78rem;
    opacity: 0.7;
}

.nset__foot[b-c32gfw9ivr] {
    font-size: 0.78rem;
    opacity: 0.8;
    margin: 0;
}

.nset__actions[b-c32gfw9ivr] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.25rem;
}
/* /Components/Others/PortalAdminDenied.razor.rz.scp.css */
/* Shared refusal panel for the Customer Portal admin screens. */

.pad-denied[b-kl51lojv48] {
    max-width: 60ch;
    margin: 1.5rem auto;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid var(--inv-border, #e2e6ec);
    border-radius: 10px;
    background: #fff;
}

.pad-denied__icon[b-kl51lojv48] { font-size: 2rem; }

.pad-denied h2[b-kl51lojv48] {
    margin: 0.5rem 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.pad-denied p[b-kl51lojv48] {
    margin: 0.4rem 0;
    font-size: 0.85rem;
    color: #4a5361;
}

.pad-denied__hint[b-kl51lojv48] {
    font-size: 0.78rem !important;
    color: #7b8492 !important;
}
/* /Components/Others/PortalSignInHistoryDialog.razor.rz.scp.css */
/* Sign-in history dialog — read-only audit trail for one portal login. */

.psh__head[b-tvgfx7q4v6] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }

.psh__eyebrow[b-tvgfx7q4v6] {
    margin: 0;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--shell-muted-text, #767676);
}

.psh__title[b-tvgfx7q4v6] { margin: 0; font-size: 1.02rem; display: flex; align-items: baseline; gap: .5rem; }
.psh__title small[b-tvgfx7q4v6] { font-size: .78rem; font-weight: 400; color: var(--shell-muted-text, #767676); }

/* The dialog body is a column: filters and summary take what they need, the
   grid takes the rest. Without the min-height:0 the grid refuses to shrink and
   pushes the footer off the bottom. */
.psh[b-tvgfx7q4v6] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    height: 100%;
    min-height: 0;
}

.psh__filters[b-tvgfx7q4v6] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem .7rem;
}

.psh__apply[b-tvgfx7q4v6] { align-self: flex-end; }

.psh__summary[b-tvgfx7q4v6] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .9rem;
    padding: .4rem .6rem;
    border-radius: .4rem;
    background: #f4f6f8;
    font-size: .8rem;
}

.psh__stat strong[b-tvgfx7q4v6] { font-variant-numeric: tabular-nums; }
.psh__stat--ok strong[b-tvgfx7q4v6] { color: #1c6b3a; }
.psh__stat--fail strong[b-tvgfx7q4v6] { color: #a8202a; }
.psh__stat--quiet[b-tvgfx7q4v6] { color: var(--shell-muted-text, #767676); }

.psh__truncated[b-tvgfx7q4v6] {
    margin: 0;
    font-size: .78rem;
    color: #a86200;
}

/* min-height, not 0: if the dialog's content area ever resolves to auto
   height the grid would collapse to nothing rather than merely be short. */
.psh__gridwrap[b-tvgfx7q4v6] { flex: 1 1 auto; min-height: 240px; }

.psh__empty[b-tvgfx7q4v6],
.psh__foothint[b-tvgfx7q4v6] {
    margin: 0;
    font-size: .78rem;
    color: var(--shell-muted-text, #767676);
}

.psh__muted[b-tvgfx7q4v6] { color: var(--shell-muted-text, #767676); }

/* One line, ellipsis, whole string on the tooltip — a user agent is 150
   characters of noise around the five that matter. */
.psh__agent[b-tvgfx7q4v6] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.psh__chip[b-tvgfx7q4v6] {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}

.psh__chip--ok[b-tvgfx7q4v6] { background: #e6f3ea; color: #1c6b3a; }
.psh__chip--fail[b-tvgfx7q4v6] { background: #fdeceb; color: #a8202a; }

/* Neither good nor bad — an account event. Blue keeps it from reading as
   either a clean sign-in or a refusal. */
.psh__chip--event[b-tvgfx7q4v6] { background: #e8f0f8; color: #0b4a8f; }

.psh__foot[b-tvgfx7q4v6] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

/* The hint sits at the far end so the buttons keep the leading edge, where
   the house style puts the primary action. */
.psh__foothint[b-tvgfx7q4v6] { margin-left: auto; text-align: right; }
/* /Components/Others/PortalSignupRequestsDialog.razor.rz.scp.css */
/* Sign-up request review — queue on the left, the one being read on the right. */

.psr__head[b-1ej1gn0pr1] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; width: 100%; }

.psr__eyebrow[b-1ej1gn0pr1] {
    margin: 0;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--shell-muted-text, #767676);
}

.psr__title[b-1ej1gn0pr1] { margin: 0; font-size: 1.05rem; }

.psr__count[b-1ej1gn0pr1] {
    align-self: center;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: #fff4e5;
    color: #a86200;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.psr[b-1ej1gn0pr1] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    height: 100%;
    min-height: 0;
}

.psr__filters[b-1ej1gn0pr1] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem .7rem; }

/* Queue and detail share the height; each scrolls on its own so a long
   request never pushes the grid off the bottom. */
.psr__split[b-1ej1gn0pr1] {
    flex: 1 1 auto;
    min-height: 320px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: .75rem;
}

@media (max-width: 1000px) {
    .psr__split[b-1ej1gn0pr1] { grid-template-columns: 1fr; }
}

.psr__list[b-1ej1gn0pr1] { min-height: 0; min-width: 0; }

.psr__detail[b-1ej1gn0pr1] {
    min-width: 0;
    overflow-y: auto;
    padding: 0 .2rem 0 .8rem;
    border-left: 1px solid #e6e6e6;
}

@media (max-width: 1000px) {
    .psr__detail[b-1ej1gn0pr1] { border-left: 0; padding-left: .2rem; border-top: 1px solid #e6e6e6; padding-top: .6rem; }
}

.psr__detailhead[b-1ej1gn0pr1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.psr__firm[b-1ej1gn0pr1] { margin: .1rem 0 0; font-size: 1rem; }

/* Label/value pairs, label column fixed so values line up down the panel. */
.psr__facts[b-1ej1gn0pr1] {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: .25rem .7rem;
    margin: .8rem 0 0;
    font-size: .84rem;
}

.psr__facts dt[b-1ej1gn0pr1] { color: var(--shell-muted-text, #767676); font-weight: 600; font-size: .78rem; }
.psr__facts dd[b-1ej1gn0pr1] { margin: 0; overflow-wrap: anywhere; }

.psr__section[b-1ej1gn0pr1] {
    margin: 1.1rem 0 .5rem;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--shell-muted-text, #767676);
}

.psr__grid[b-1ej1gn0pr1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .7rem .8rem;
}

.psr__remarks[b-1ej1gn0pr1] { margin-top: .7rem; width: 100%; }

.psr__check[b-1ej1gn0pr1] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-top: .8rem;
    font-size: .8rem;
    line-height: 1.45;
}

/* A possible duplicate is the one thing on this screen that must not be
   scrolled past, so it gets a panel rather than a line of text. */
.psr__warn[b-1ej1gn0pr1] {
    margin-top: .9rem;
    padding: .6rem .7rem;
    border: 1px solid #f0d5a8;
    border-left: 3px solid #d59b28;
    border-radius: .4rem;
    background: #fffaf0;
    font-size: .82rem;
}

.psr__table[b-1ej1gn0pr1] { width: 100%; border-collapse: collapse; margin-top: .45rem; font-size: .8rem; }

.psr__table th[b-1ej1gn0pr1] {
    text-align: left;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--shell-muted-text, #767676);
    padding: .2rem .4rem;
    border-bottom: 1px solid #ecdcc0;
}

.psr__table td[b-1ej1gn0pr1] { padding: .22rem .4rem; border-bottom: 1px solid #f3e9d8; }

.psr__hint[b-1ej1gn0pr1],
.psr__foothint[b-1ej1gn0pr1],
.psr__muted[b-1ej1gn0pr1] { font-size: .78rem; color: var(--shell-muted-text, #767676); }

.psr__hint[b-1ej1gn0pr1] { margin: .5rem 0 0; }

.psr__closed[b-1ej1gn0pr1] { margin-top: 1rem; font-size: .84rem; }
.psr__closed p[b-1ej1gn0pr1] { margin: .2rem 0; }

.psr__chip[b-1ej1gn0pr1] {
    display: inline-block;
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}

.psr__chip--wait[b-1ej1gn0pr1] { background: #fff4e5; color: #a86200; }
.psr__chip--ok[b-1ej1gn0pr1] { background: #e6f3ea; color: #1c6b3a; }
.psr__chip--no[b-1ej1gn0pr1] { background: #fdeceb; color: #a8202a; }

.psr__dupe[b-1ej1gn0pr1] {
    display: inline-block;
    min-width: 1.35rem;
    padding: .05rem .3rem;
    border-radius: 999px;
    background: #fdeceb;
    color: #a8202a;
    font-size: .74rem;
    font-weight: 700;
}

.psr__foot[b-1ej1gn0pr1] { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.psr__foothint[b-1ej1gn0pr1] { margin-left: auto; text-align: right; max-width: 32rem; }
/* /Components/Others/PortalUserEditor.razor.rz.scp.css */
/* Portal user editor — the right-hand half of Portal Users. */

.pue[b-0uhuol6258] { padding: 0 .25rem .75rem 0; }

.pue__head[b-0uhuol6258] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #e6e6e6;
}

.pue__head h2[b-0uhuol6258] { margin: 0; font-size: 1.05rem; }

.pue__eyebrow[b-0uhuol6258] {
    margin: 0;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--shell-muted-text, #767676);
}

.pue__state[b-0uhuol6258] { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }

.pue__section[b-0uhuol6258] {
    margin: 1.1rem 0 .5rem;
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--shell-muted-text, #767676);
}

.pue__grid[b-0uhuol6258] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem .9rem;
}

/* Remarks runs the full width — an address or a note wants the room. */
.pue__remarks[b-0uhuol6258] { grid-column: 1 / -1; }

.pue__note[b-0uhuol6258],
.pue__hint[b-0uhuol6258] {
    margin: .35rem 0 0;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--shell-muted-text, #767676);
}

.pue__warn[b-0uhuol6258] {
    font-size: .78rem;
    line-height: 1.45;
    color: #a86200;
}

.pue__muted[b-0uhuol6258] { color: var(--shell-muted-text, #767676); }

.pue__label[b-0uhuol6258] {
    display: block;
    font-size: .76rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

/* ── tables ── */
.pue__table[b-0uhuol6258] {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
}

.pue__table th[b-0uhuol6258] {
    text-align: left;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--shell-muted-text, #767676);
    font-weight: 600;
    padding: .3rem .5rem;
    border-bottom: 1px solid #e6e6e6;
}

.pue__table td[b-0uhuol6258] { padding: .32rem .5rem; border-bottom: 1px solid #f0f0f0; }
.pue__table--compact td[b-0uhuol6258], .pue__table--compact th[b-0uhuol6258] { padding: .22rem .4rem; font-size: .78rem; }

/* An ungranted portal stays readable but recedes — it is a row you can turn
   on, not a row that is broken. */
.pue__row--off td[b-0uhuol6258] { opacity: .55; }
.pue__row--fail td[b-0uhuol6258] { color: #a86200; }

/* ── portal tabs ── */
.pue__apptabs[b-0uhuol6258] { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }

.pue__apptab[b-0uhuol6258] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border: 1px solid #d8dde0;
    border-radius: 999px;
    background: #fff;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.pue__apptab--on[b-0uhuol6258] { background: #0b4a8f; border-color: #0b4a8f; color: #fff; }

.pue__apptab-count[b-0uhuol6258] {
    font-size: .7rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .12);
}

.pue__apptab--on .pue__apptab-count[b-0uhuol6258] { background: rgba(255, 255, 255, .25); }

/* ── company blocks ── */
.pue__company[b-0uhuol6258] {
    border: 1px solid #e6e6e6;
    border-radius: .5rem;
    padding: .5rem .65rem;
    margin-bottom: .5rem;
}

.pue__company--on[b-0uhuol6258] { border-color: #bcd4ea; background: rgba(11, 74, 143, .03); }

.pue__company-head[b-0uhuol6258] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .9rem;
}

.pue__inline[b-0uhuol6258] { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; }

.pue__company-body[b-0uhuol6258] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .7rem .9rem;
    margin-top: .6rem;
    padding-top: .55rem;
    border-top: 1px dashed #dbe4ec;
}

.pue__field[b-0uhuol6258] { min-width: 0; }

/* ── chips (branches, roles) ── */
.pue__chips[b-0uhuol6258] { display: flex; flex-wrap: wrap; gap: .3rem; }

.pue__chip[b-0uhuol6258] {
    padding: .22rem .6rem;
    border: 1px solid #d8dde0;
    border-radius: 999px;
    background: #fff;
    font-size: .78rem;
    cursor: pointer;
}

.pue__chip--on[b-0uhuol6258] { background: #e8f0f8; border-color: #0b4a8f; color: #0b4a8f; font-weight: 600; }
.pue__chip:disabled[b-0uhuol6258] { opacity: .5; cursor: default; }

/* Allocated by somebody with wider access — shown so the picture is complete,
   greyed so it is obvious this screen will not touch it. */
.pue__foreign[b-0uhuol6258] {
    margin: .5rem 0;
    padding: .45rem .65rem;
    border-radius: .4rem;
    background: #f4f6f8;
    font-size: .8rem;
    color: #5d6a70;
}

.pue__activity[b-0uhuol6258] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.pue__danger[b-0uhuol6258] {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: .7rem;
    border-top: 1px solid #e6e6e6;
}
/* /Components/Others/QueryPropertiesDialog.razor.rz.scp.css */
/* Query Properties editor (legacy frmPopupSQLProperites). */
.qprops[b-ra8nqngcwj] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    height: 100%;
}

.qprops__label[b-ra8nqngcwj] {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #445;
}

/* Query editor + right-hand rail (Add Variable / special characters). */
.qprops__main[b-ra8nqngcwj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 0.7rem;
    flex: 1 1 auto;
    min-height: 180px;
}

.qprops__querybox[b-ra8nqngcwj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.qprops__querybox > div[b-ra8nqngcwj] {
    flex: 1 1 auto;
    display: flex;
}

.qprops__sql[b-ra8nqngcwj] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 190px;
    resize: vertical;
    padding: 0.45rem 0.55rem;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.82rem;
    line-height: 1.35;
    border: 1px solid #cfd6de;
    border-radius: 4px;
    background: #fff;
}

.qprops__rail[b-ra8nqngcwj] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 1.15rem;   /* aligns with the query box, below its label */
}

.qprops__varbtn[b-ra8nqngcwj] {
    width: 100%;
    min-height: 58px;
    font: inherit;
    font-size: 0.82rem;
    color: #1c2b3a;
    background: #f2f4f7;
    border: 1px solid #cfd6de;
    border-radius: 4px;
    cursor: pointer;
}

.qprops__varbtn:hover:not(:disabled)[b-ra8nqngcwj] {
    background: #e8eef7;
    border-color: #9db4d2;
}

.qprops__varbtn:disabled[b-ra8nqngcwj] {
    color: #98a1ad;
    cursor: default;
}

.qprops__chars[b-ra8nqngcwj] {
    border: 1px solid #e2e7ee;
    border-radius: 4px;
    padding: 0.45rem 0.55rem;
    background: #fafbfd;
}

.qprops__chars-title[b-ra8nqngcwj] {
    margin: 0 0 0.3rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: #445;
}

.qprops__chars ul[b-ra8nqngcwj] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.qprops__chars li[b-ra8nqngcwj] {
    font-size: 0.75rem;
    color: #5a6472;
}

.qprops__chars code[b-ra8nqngcwj] {
    font-family: Consolas, "Courier New", monospace;
    color: #0b57d0;
}

.qprops__chars-note[b-ra8nqngcwj] {
    margin: 0.35rem 0 0;
    font-size: 0.71rem;
    color: #8a93a0;
}

.qprops__field[b-ra8nqngcwj] {
    display: flex;
    flex-direction: column;
}

.qprops__memo[b-ra8nqngcwj] {
    width: 100%;
    min-height: 62px;
    resize: vertical;
    padding: 0.4rem 0.5rem;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.8rem;
    border: 1px solid #cfd6de;
    border-radius: 4px;
    background: #fff;
}

.qprops__hintline[b-ra8nqngcwj] {
    margin: 0.22rem 0 0;
    font-size: 0.72rem;
    color: #8a93a0;
}

.qprops__grid2[b-ra8nqngcwj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.qprops__input[b-ra8nqngcwj] {
    width: 100%;
    height: 30px;
    padding: 0.25rem 0.45rem;
    font-size: 0.84rem;
    border: 1px solid #cfd6de;
    border-radius: 4px;
    background: #fff;
}

/* Numeric convention: right-aligned. */
.qprops__input--num[b-ra8nqngcwj] {
    text-align: right;
}

.qprops__input:disabled[b-ra8nqngcwj],
.qprops__sql:disabled[b-ra8nqngcwj],
.qprops__memo:disabled[b-ra8nqngcwj] {
    background: #f2f4f7;
    color: #98a1ad;
}

.qprops__blank[b-ra8nqngcwj] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #445;
    cursor: pointer;
}

.qprops__blank em[b-ra8nqngcwj] {
    color: #8a93a0;
    font-style: normal;
    font-size: 0.76rem;
}

@media (max-width: 780px) {
    .qprops__main[b-ra8nqngcwj] {
        grid-template-columns: minmax(0, 1fr);
    }

    .qprops__rail[b-ra8nqngcwj] {
        padding-top: 0;
    }

    .qprops__grid2[b-ra8nqngcwj] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Others/ReportHeading.razor.rz.scp.css */
.rpt-heading[b-ghkrbg052f] {
    display: grid;
    justify-items: center;
    gap: 0.15rem;
    padding: 0.2rem 0.5rem 0.35rem;
    text-align: center;
    font-family: var(--shell-font-family, "Segoe UI", Helvetica, Arial, sans-serif);
}

.rpt-heading__title[b-ghkrbg052f] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--shell-text-primary, #1f2a37);
    text-wrap: balance;
}

.rpt-heading__details[b-ghkrbg052f] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* A quiet dot between the items; none before the first on each wrap. */
.rpt-heading__item + .rpt-heading__item[b-ghkrbg052f]::before {
    content: "·";
    margin: 0 0.55em;
    opacity: 0.6;
}
/* /Components/Others/ReportScheduleDialog.razor.rz.scp.css */
/* The scheduled-delivery dialog - shared by the standard and custom report viewers. */
.rsd__list[b-cajsjhsa08] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.8rem;
    font-size: 0.85rem;
}

.rsd__list th[b-cajsjhsa08],
.rsd__list td[b-cajsjhsa08] {
    border-bottom: 1px solid var(--shell-border, #ddd);
    padding: 0.3rem 0.45rem;
    text-align: left;
    vertical-align: top;
}

.rsd__row--off[b-cajsjhsa08] { opacity: 0.55; }
.rsd__rowbtns[b-cajsjhsa08] { white-space: nowrap; }

.rsd__grid[b-cajsjhsa08] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.9rem;
}

.rsd__field[b-cajsjhsa08] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-bottom: 0.35rem;
}

.rsd__field > label[b-cajsjhsa08] {
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.rsd__switch[b-cajsjhsa08] { margin-top: 0; }
/* /Components/Others/SqlVariablePicker.razor.rz.scp.css */
/* SQL / formula placeholder picker (convention). */
.sqlvar[b-ix83spkpkv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
}

.sqlvar__list[b-ix83spkpkv] {
    flex: 1 1 auto;
    min-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    background: #fff;
    border: 1px solid #e7ebf0;
    border-radius: 4px;
    padding: 0.3rem;
}

.sqlvar__item[b-ix83spkpkv] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    font: inherit;
    padding: 0.28rem 0.4rem;
    background: transparent;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.sqlvar__item:hover[b-ix83spkpkv],
.sqlvar__item:focus-visible[b-ix83spkpkv] {
    background: #eaf1fb;
    outline: none;
}

.sqlvar__name[b-ix83spkpkv] {
    flex: 0 0 auto;
    min-width: 180px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.8rem;
    color: #0b57d0;
}

.sqlvar__desc[b-ix83spkpkv] {
    flex: 1 1 auto;
    font-size: 0.78rem;
    color: #5a6472;
}

.sqlvar__empty[b-ix83spkpkv] {
    margin: 0.5rem;
    font-size: 0.8rem;
    color: #8a93a0;
}

.sqlvar__actions[b-ix83spkpkv] {
    display: flex;
    justify-content: flex-end;
}
/* /Components/Others/UnsettledItemsDialog.razor.rz.scp.css */
/* Unsettled Bills dialog — theme-variable surfaces only (dark-mode sweep
   convention df926e8): never hardcode #fff. Touch targets ≥ 40px. */

[b-ssfbxwi48f] .unsett-dialog .e-dlg-header-content {
    background: var(--shell-panel-background, #fff);
}

.unsett__title[b-ssfbxwi48f] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.unsett__subtitle[b-ssfbxwi48f] {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.75;
    color: var(--shell-text-primary, inherit);
}

.unsett[b-ssfbxwi48f] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    color: var(--shell-text-primary, inherit);
}

.unsett__error[b-ssfbxwi48f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.12);
    color: #c2333f;
    font-size: 0.85rem;
}

.unsett__error-x[b-ssfbxwi48f] {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}

.unsett__strip[b-ssfbxwi48f] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.unsett__stat[b-ssfbxwi48f] {
    display: flex;
    flex-direction: column;
    padding: 0.4rem 0.85rem;
    border-radius: 10px;
    background: var(--shell-panel-background, #fff);
    border: 1px solid var(--shell-border-color, rgba(0, 0, 0, 0.12));
}

.unsett__stat span[b-ssfbxwi48f] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

.unsett__stat strong[b-ssfbxwi48f] {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

[b-ssfbxwi48f] .unsett__refresh {
    margin-left: auto;
}

.unsett__empty[b-ssfbxwi48f] {
    margin: 0.5rem 0;
    padding: 0.9rem;
    border-radius: 10px;
    background: var(--shell-panel-background, #fff);
    border: 1px dashed var(--shell-border-color, rgba(0, 0, 0, 0.2));
    font-size: 0.9rem;
    opacity: 0.85;
}

.unsett__scroll[b-ssfbxwi48f] {
    overflow: auto;
    max-height: 55vh;
    border: 1px solid var(--shell-border-color, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
}

.unsett__table[b-ssfbxwi48f] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: var(--shell-panel-background, #fff);
}

.unsett__table th[b-ssfbxwi48f] {
    position: sticky;
    top: 0;
    background: var(--shell-panel-background, #fff);
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--shell-border-color, rgba(0, 0, 0, 0.12));
    white-space: normal;
}

.unsett__table td[b-ssfbxwi48f] {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--shell-border-color, rgba(0, 0, 0, 0.08));
    vertical-align: middle;
}

.unsett__ledger[b-ssfbxwi48f] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unsett__num[b-ssfbxwi48f] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.unsett__num--neg[b-ssfbxwi48f] {
    color: #c2333f;
    font-weight: 600;
}

/* Cancelled rows: red tint, app-wide status colour convention. */
.unsett__row--cancelled td[b-ssfbxwi48f] {
    background: rgba(220, 53, 69, 0.12);
    color: #c2333f;
}

.unsett__actions[b-ssfbxwi48f] {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    white-space: nowrap;
}

[b-ssfbxwi48f] .unsett__btn {
    min-height: 40px;
}

/* The cancel reason, beside the confirm - touch-sized like the buttons. */
.unsett__reason[b-ssfbxwi48f] {
    min-height: 40px;
    min-width: 12rem;
    padding: 0 0.6rem;
    border: 1px solid var(--shell-border, #cdd4df);
    border-radius: 6px;
    background: var(--shell-surface, #fff);
    color: inherit;
    font: inherit;
}
/* /Components/Payroll/EmpLeavePolicyDialog.razor.rz.scp.css */
.elp-body[b-w4wkn8g1av] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    min-height: 0;
}
.elp-toolbar[b-w4wkn8g1av] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.elp-muted[b-w4wkn8g1av] { font-size: 0.8rem; opacity: 0.75; }
.elp-body[b-w4wkn8g1av]  .elp-grid { flex: 1 1 auto; min-height: 0; }
.elp-body[b-w4wkn8g1av]  .elp-grid .e-rowcell { padding: 0.25rem 0.4rem; }
.elp-actions[b-w4wkn8g1av] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
/* /Components/Payroll/EmployeeClaimApprovalDialog.razor.rz.scp.css */
/* Employee claim approval dialog. */
.eca-body[b-tk2qest89j] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.2rem 0.1rem 0.4rem;
}

.eca-state[b-tk2qest89j] {
    margin: 0.4rem 0;
    font-size: 0.88rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.eca-head[b-tk2qest89j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.4rem 1rem;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    background: var(--shell-surface-muted, rgba(0, 0, 0, 0.04));
    font-size: 0.82rem;
}

.eca-head div[b-tk2qest89j] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.eca-head span[b-tk2qest89j] {
    font-size: 0.7rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.eca-narr[b-tk2qest89j],
.eca-note[b-tk2qest89j] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.eca-status[b-tk2qest89j] {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 0.35rem 1rem;
    align-items: start;
}

@media (max-width: 720px) {
    .eca-status[b-tk2qest89j] {
        grid-template-columns: 1fr;
    }
}

.eca-field[b-tk2qest89j] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.eca-gridwrap[b-tk2qest89j] {
    min-width: 0;
}

.eca-num[b-tk2qest89j] {
    display: block;
    text-align: right;
}

/* Cell editors visibly bordered at rest (editable-grid convention). */
.eca-body[b-tk2qest89j]  .eca-cell .e-input-group {
    border: 1px solid var(--shell-border, #c9d2dd) !important;
    border-radius: 4px;
    background: var(--shell-surface, #fff);
}

.eca-body[b-tk2qest89j]  .eca-cell--num input {
    text-align: right;
}

.eca-actions[b-tk2qest89j] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.3rem;
}
/* /Components/Payroll/EmpPaySchemeDialog.razor.rz.scp.css */
.epd-body[b-tv7jk6a26q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    min-height: 0;
}
.epd-toolbar[b-tv7jk6a26q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.epd-muted[b-tv7jk6a26q] { font-size: 0.8rem; opacity: 0.75; }
.epd-body[b-tv7jk6a26q]  .epd-grid { flex: 1 1 auto; min-height: 0; }
.epd-body[b-tv7jk6a26q]  .epd-grid .e-rowcell { padding: 0.25rem 0.4rem; }
.epd-actions[b-tv7jk6a26q] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
/* /Components/Payroll/EmpShiftDialog.razor.rz.scp.css */
.esd-body[b-4bj7en0ek1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    min-height: 0;
}
.esd-toolbar[b-4bj7en0ek1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.esd-muted[b-4bj7en0ek1] { font-size: 0.8rem; opacity: 0.75; }
.esd-body[b-4bj7en0ek1]  .esd-grid { flex: 1 1 auto; min-height: 0; }
.esd-body[b-4bj7en0ek1]  .esd-grid .e-rowcell { padding: 0.25rem 0.4rem; }
.esd-actions[b-4bj7en0ek1] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
/* /Components/Payroll/LeaveBalancePanel.razor.rz.scp.css */
/* LeaveBalancePanel — self-contained styling so every host (Leave Balance
   page, future leave-request screens) renders it identically. Uses the
   --shell-* tokens only (theme convention). */

.lbpn[b-a1ca3yktjk] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.lbpn-head[b-a1ca3yktjk] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.lbpn-head span[b-a1ca3yktjk] {
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.lbpn-cards[b-a1ca3yktjk] {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.lbpn-card[b-a1ca3yktjk] {
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 6px;
    background: var(--shell-panel-background, #fff);
    padding: 0.6rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.lbpn-card-head[b-a1ca3yktjk] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.lbpn-card-head span[b-a1ca3yktjk] {
    font-size: 0.72rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.lbpn-window[b-a1ca3yktjk],
.lbpn-entitle[b-a1ca3yktjk] {
    margin: 0;
    font-size: 0.74rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.lbpn-figures[b-a1ca3yktjk] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.lbpn-figures td[b-a1ca3yktjk] {
    padding: 0.14rem 0.15rem;
    border-bottom: 1px dotted var(--shell-border, #e3e8ef);
}

.lbpn-total td[b-a1ca3yktjk] {
    font-weight: 700;
    border-top: 1px solid var(--shell-border, #d8dee7);
    border-bottom: none;
}

/* Numerics right-align, app-wide convention. */
.lbpn-num[b-a1ca3yktjk] { text-align: right; }

.lbpn-subhead[b-a1ca3yktjk] {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--shell-text-secondary, #5b6a7d);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Wide table scrolls inside its own box; min-height per the editable-grid
   convention keeps a visible working area. */
.lbpn-tablewrap[b-a1ca3yktjk] {
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 4px;
    min-height: 220px;
    max-height: 24rem;
}

.lbpn-table[b-a1ca3yktjk] {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.lbpn-table th[b-a1ca3yktjk],
.lbpn-table td[b-a1ca3yktjk] {
    padding: 0.26rem 0.4rem;
    border-bottom: 1px solid var(--shell-border, #e3e8ef);
    text-align: left;
    vertical-align: middle;
}

/* Headers wrap rather than truncate; the header row stays visible. */
.lbpn-table th[b-a1ca3yktjk] {
    font-size: 0.72rem;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    color: var(--shell-text-secondary, #5b6a7d);
    background: var(--shell-app-background, #f4f6fa);
    position: sticky;
    top: 0;
    z-index: 1;
}

.lbpn-table th.lbpn-num[b-a1ca3yktjk],
.lbpn-table td.lbpn-num[b-a1ca3yktjk] { text-align: right; }

.lbpn-placeholder[b-a1ca3yktjk] {
    margin: 0.6rem 0;
    font-size: 0.85rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.lbpn-error[b-a1ca3yktjk] {
    margin: 0.6rem 0;
    font-size: 0.85rem;
    color: var(--shell-danger, #c0392b);
}
/* /Components/Payroll/LeaveNotifyDialog.razor.rz.scp.css */
/* Leave notification dialog — theme tokens only, so it follows light/dark. */

.lnotify__title[b-ualveoj8f5] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.lnotify__subtitle[b-ualveoj8f5] {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.75;
    color: var(--shell-text-primary, inherit);
}

.lnotify[b-ualveoj8f5] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    color: var(--shell-text-primary, inherit);
}

.lnotify__f[b-ualveoj8f5] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
}

.lnotify__f > span[b-ualveoj8f5] {
    opacity: 0.8;
    font-weight: 600;
}

.lnotify__f input[type="text"][b-ualveoj8f5],
.lnotify__f textarea[b-ualveoj8f5] {
    font-size: 0.9rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.5rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    font-family: inherit;
}

.lnotify__channels[b-ualveoj8f5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    padding: 0.35rem 0.1rem;
}

.lnotify__check[b-ualveoj8f5] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.lnotify__recipients[b-ualveoj8f5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.lnotify__recipients th[b-ualveoj8f5],
.lnotify__recipients td[b-ualveoj8f5] {
    text-align: left;
    padding: 0.3rem 0.45rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    white-space: normal;
    word-break: break-word;
}

.lnotify__recipients th[b-ualveoj8f5] {
    font-weight: 600;
    opacity: 0.75;
}

.lnotify__row--miss[b-ualveoj8f5] {
    opacity: 0.6;
    font-style: italic;
}

.lnotify__notes[b-ualveoj8f5] {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    border: 1px dashed var(--shell-border, rgba(0, 0, 0, 0.2));
    background: var(--shell-surface-muted, transparent);
}

.lnotify__notes ul[b-ualveoj8f5] {
    margin: 0;
    padding-left: 1.1rem;
}

.lnotify__actions[b-ualveoj8f5] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.25rem;
}
/* /Components/Payroll/TimeMgtStatusDialog.razor.rz.scp.css */
/* Change Status dialog shared by the time-management entry screens. */
.tms-body[b-ifyokqmw12] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.2rem 0.1rem 0.4rem;
}

.tms-state[b-ifyokqmw12] {
    margin: 0.4rem 0;
    font-size: 0.88rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.tms-current[b-ifyokqmw12] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin: 0;
    font-size: 0.88rem;
}

.tms-audit[b-ifyokqmw12],
.tms-note[b-ifyokqmw12] {
    margin: -0.3rem 0 0;
    font-size: 0.76rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.tms-field[b-ifyokqmw12] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.tms-actions[b-ifyokqmw12] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.3rem;
}
/* /Components/Pos/TouchPosPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   P3-01 Touch POS terminal.

   Theme-variable surfaces only, so it follows the app's light/dark theme.
   Touch sizing is the hard rule here: nothing tappable under 48px, tiles
   96px+, and Pay is deliberately the largest control on the screen.
   ═══════════════════════════════════════════════════════════════════════ */

.pos[b-cpegb8knfh] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--shell-app-background, #f4f6fa);
    color: var(--shell-text-primary, #16202c);
    -webkit-user-select: none;
    user-select: none;
}

.pos[hidden][b-cpegb8knfh] { display: none; }

/* Named busy strip — floats over the terminal while an operation the
   operator started is still running (e.g. "Applying discount..."). Sits
   above the cart rather than covering it, so the bill stays readable. */
.pos__busy[b-cpegb8knfh] {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, #16202c);
    border: 1px solid var(--shell-border, #d8dee7);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    font-size: 0.95rem;
    font-weight: 600;
    pointer-events: none;
}

.pos__busy-spinner[b-cpegb8knfh] {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    border: 2px solid var(--shell-border, #d8dee7);
    border-top-color: var(--shell-text-primary, #16202c);
    animation: pos-busy-spin-b-cpegb8knfh 0.7s linear infinite;
}

@keyframes pos-busy-spin-b-cpegb8knfh {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pos__busy-spinner[b-cpegb8knfh] { animation-duration: 2.4s; }
}

/* ── Top bar ─────────────────────────────────────────────────────── */
.pos__bar[b-cpegb8knfh] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0.9rem;
    background: var(--shell-panel-background, #fff);
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.1));
    flex: 0 0 auto;
}

.pos__brand[b-cpegb8knfh] { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }

.pos__brand-dot[b-cpegb8knfh] {
    width: 12px; height: 12px; border-radius: 50%;
    background: linear-gradient(135deg, #35c27a, #17a065);
    box-shadow: 0 0 0 4px rgba(53, 194, 122, 0.16);
    flex: 0 0 auto;
}

.pos__brand-title[b-cpegb8knfh] {
    font-size: 1rem; font-weight: 700; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pos__brand-sub[b-cpegb8knfh] { font-size: 0.78rem; opacity: 0.7; }

.pos__scan[b-cpegb8knfh] {
    display: flex; align-items: center; gap: 0.5rem;
    flex: 1 1 auto; max-width: 460px;
    padding: 0 0.7rem;
    min-height: 48px;
    border: 1px solid var(--shell-border, #cfd7e3);
    border-radius: 12px;
    background: var(--shell-app-background, #f4f6fa);
}

/* Search-barcodes button, inside the scan box so it reads as part of it.
   40px keeps it comfortably tappable without making the box taller. */
.pos__scan-find[b-cpegb8knfh] {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 10px;
    background: transparent;
    color: inherit; cursor: pointer;
    opacity: 0.75;
}

.pos__scan-find:hover[b-cpegb8knfh] { background: rgba(0, 0, 0, 0.07); opacity: 1; }

.pos__scan:focus-within[b-cpegb8knfh] {
    border-color: #17a065;
    box-shadow: 0 0 0 3px rgba(23, 160, 101, 0.18);
}

.pos__scan-icon[b-cpegb8knfh] { opacity: 0.55; }

.pos__scan-input[b-cpegb8knfh] {
    flex: 1 1 auto; min-width: 0;
    border: 0; outline: none; background: transparent;
    font-size: 0.98rem;
    color: var(--shell-text-primary, inherit);
}

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

/* ── Header field strip ──────────────────────────────────────────
   Customer / Transaction class / Division. Each can block the save, so
   each is a real control here, and the ones that are required flag
   themselves while empty rather than only failing at Pay. */
/* ── Status message ───────────────────────────────────────────────
   Full-width strip under the top bar. Deliberately louder than the
   classic banner: on a terminal the operator is looking at the tiles
   and the cart, not at page chrome, so a refusal has to interrupt.
   Colour carries the severity, the left rule carries it again for
   anyone who cannot separate the hues. */
.pos__msg[b-cpegb8knfh] {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.1));
    border-left: 5px solid currentColor;
    font-size: 0.9rem; font-weight: 700;
    flex: 0 0 auto;
}

.pos__msg-icon[b-cpegb8knfh] { font-size: 1rem; flex: 0 0 auto; }
.pos__msg-text[b-cpegb8knfh] { flex: 1 1 auto; min-width: 0; }

.pos__msg-close[b-cpegb8knfh] {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px;
    background: transparent; color: inherit;
    font-size: 0.85rem; cursor: pointer; opacity: 0.7;
}

.pos__msg-close:hover[b-cpegb8knfh] { background: rgba(255, 255, 255, 0.18); opacity: 1; }

/* Solid DARK panel, light text — the same in every theme, on purpose.

   Two reasons it is not theme-aware. First contrast: a counter message is
   usually read at arm's length across a lit shop floor, and a tinted-wash
   panel (which is what these were) is exactly the thing that washes out.
   Second correctness: the tinted version keyed its dark variant off
   prefers-color-scheme, i.e. the OPERATING SYSTEM, while this app carries
   its own theme on html[data-theme-appearance]. An OS set to dark under an
   app rendering light therefore got light-blue text on a near-white panel
   — unreadable, and the reason this was reported. Committing to one solid
   appearance removes the disagreement rather than papering over it.

   Colour still carries severity, and the left rule carries it again for
   anyone who cannot separate the hues. */
.pos__msg--error[b-cpegb8knfh]   { color: #ffe3e6; background: #8f1d28; }
.pos__msg--warning[b-cpegb8knfh] { color: #fff4da; background: #7a4a06; }
.pos__msg--success[b-cpegb8knfh] { color: #dcfaec; background: #0f5c3c; }
.pos__msg--info[b-cpegb8knfh]    { color: #dbeeff; background: #143d63; }

.pos__fields[b-cpegb8knfh] {
    display: flex; gap: 0.5rem; flex-wrap: wrap;
    padding: 0.5rem 0.9rem;
    background: var(--shell-panel-background, #fff);
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.1));
    flex: 0 0 auto;
}

.pos__field[b-cpegb8knfh] {
    display: flex; flex-direction: column; gap: 0.1rem;
    min-height: 48px; justify-content: center;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--shell-border, #cfd7e3);
    border-radius: 12px;
    background: var(--shell-app-background, #f4f6fa);
    min-width: 0;
}

.pos__field--grow[b-cpegb8knfh] { flex: 1 1 260px; }

.pos__field.is-missing[b-cpegb8knfh] {
    border-color: #c2333f;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.14);
}

.pos__field-label[b-cpegb8knfh] {
    font-size: 0.62rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.65;
}

.pos__field-input[b-cpegb8knfh] {
    border: 0; outline: none; background: transparent;
    font-size: 0.9rem; font-weight: 600;
    color: var(--shell-text-primary, inherit);
    min-width: 140px; max-width: 100%; cursor: pointer;
}

/* Card-in-force chip. Filled rather than outlined, because unlike the
   action chips beside it this is STATE, not a button — it says something is
   currently true about the bill. Violet keeps it clear of the green
   actions, the amber line discount and the red refusals. */
.pos__cardchip[b-cpegb8knfh] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    min-height: 40px;
    padding: 0 0.35rem 0 0.7rem;
    border-radius: 999px;
    background: #4c2a86;
    color: #f1e7ff;
    font-size: 0.78rem; font-weight: 700;
    max-width: 320px;
}

.pos__cardchip-icon[b-cpegb8knfh] { font-size: 0.9rem; flex: 0 0 auto; }

.pos__cardchip-text[b-cpegb8knfh] {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
}

.pos__cardchip-x[b-cpegb8knfh] {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: transparent; color: inherit;
    font-size: 0.72rem; cursor: pointer; opacity: 0.75;
}

.pos__cardchip-x:hover[b-cpegb8knfh] { background: rgba(255, 255, 255, 0.2); opacity: 1; }

.pos__chip--new[b-cpegb8knfh] { border-color: #17a065; color: #17a065; font-weight: 700; }

.pos__chip[b-cpegb8knfh] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    min-height: 48px; padding: 0 0.9rem;
    border: 1px solid var(--shell-border, #cfd7e3);
    border-radius: 12px;
    background: var(--shell-panel-background, #fff);
    color: inherit; cursor: pointer;
    font-size: 0.86rem; font-weight: 600;
}

.pos__chip:hover[b-cpegb8knfh] { border-color: #17a065; color: #17a065; }

/* ── Body grid ───────────────────────────────────────────────────── */
/* --pos-cart-w is the bill's width and the ONLY thing the splitter drag
   writes. The tile wall takes minmax(0,1fr), i.e. whatever is left, so the
   two panes stay in step without the drag having to size both. */
.pos__body[b-cpegb8knfh] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr) auto var(--pos-cart-w, 380px);
    gap: 0.7rem;
    padding: 0.7rem;
}

/* ── Splitter ────────────────────────────────────────────────────── */
/* 10px of hit area around a 2px rule: thin enough to read as a divider,
   wide enough to grab on a touchscreen without pixel-hunting. */
.pos__splitter[b-cpegb8knfh] {
    width: 10px;
    align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    cursor: col-resize;
    border-radius: 6px;
    touch-action: none;          /* the drag owns the gesture, not the scroller */
    background: transparent;
}

.pos__splitter-grip[b-cpegb8knfh] {
    width: 2px; height: 46px;
    border-radius: 2px;
    background: var(--shell-border, rgba(0, 0, 0, 0.18));
    transition: background 0.12s ease, height 0.12s ease;
}

.pos__splitter:hover .pos__splitter-grip[b-cpegb8knfh],
.pos__splitter:focus-visible .pos__splitter-grip[b-cpegb8knfh],
.pos__splitter.is-dragging .pos__splitter-grip[b-cpegb8knfh] {
    background: #17a065;
    height: 74px;
}

.pos__splitter:focus-visible[b-cpegb8knfh] {
    outline: 2px solid #17a065;
    outline-offset: 1px;
}

/* NOTE: the body.pos-splitter-dragging rule that suppresses text selection
   during a drag CANNOT live here. Scoped CSS appends the scope attribute to
   the last selector element, so it would compile to
   `body.pos-splitter-dragging[b-xxxx]` and never match anything. It lives in
   wwwroot/css/app.css, which is also the honest home for a rule on <body>. */

/* ── Categories ──────────────────────────────────────────────────── */
.pos__cats[b-cpegb8knfh] {
    display: flex; flex-direction: column; gap: 0.4rem;
    overflow-y: auto; min-height: 0;
    padding-right: 0.15rem;
}

.pos__cat[b-cpegb8knfh] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
    min-height: 56px; padding: 0 0.85rem;
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.1));
    border-radius: 12px;
    background: var(--shell-panel-background, #fff);
    color: inherit; cursor: pointer; text-align: left;
    font-size: 0.9rem; font-weight: 600;
}

.pos__cat:hover[b-cpegb8knfh] { border-color: #17a065; }

.pos__cat.is-active[b-cpegb8knfh] {
    background: #17a065; border-color: #17a065; color: #fff;
}

.pos__cat-name[b-cpegb8knfh] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pos__cat-count[b-cpegb8knfh] {
    flex: 0 0 auto;
    font-size: 0.74rem; font-weight: 700;
    padding: 0.1rem 0.45rem; border-radius: 999px;
    background: rgba(0, 0, 0, 0.07);
}

.pos__cat.is-active .pos__cat-count[b-cpegb8knfh] { background: rgba(255, 255, 255, 0.25); }

/* ── Item tiles ──────────────────────────────────────────────────── */
.pos__items[b-cpegb8knfh] { display: flex; flex-direction: column; gap: 0.6rem; min-height: 0; }

.pos__search[b-cpegb8knfh] {
    display: flex; align-items: center; gap: 0.5rem;
    min-height: 48px; padding: 0 0.75rem;
    border: 1px solid var(--shell-border, #cfd7e3);
    border-radius: 12px;
    background: var(--shell-panel-background, #fff);
    flex: 0 0 auto;
}

.pos__search:focus-within[b-cpegb8knfh] {
    border-color: #17a065;
    box-shadow: 0 0 0 3px rgba(23, 160, 101, 0.18);
}

.pos__search-icon[b-cpegb8knfh] { opacity: 0.55; }

.pos__search-input[b-cpegb8knfh] {
    flex: 1 1 auto; min-width: 0;
    border: 0; outline: none; background: transparent;
    font-size: 0.95rem; color: var(--shell-text-primary, inherit);
}

.pos__search-clear[b-cpegb8knfh] {
    border: 0; background: transparent; color: inherit; cursor: pointer;
    min-width: 40px; min-height: 40px; opacity: 0.6;
}

.pos__search-clear:hover[b-cpegb8knfh] { opacity: 1; }

.pos__tiles[b-cpegb8knfh] {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 0.6rem;
    align-content: start;
    padding-right: 0.15rem;
}

.pos__tile[b-cpegb8knfh] {
    display: flex; flex-direction: column; gap: 0.4rem;
    min-height: 118px; padding: 0.7rem;
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.1));
    border-radius: 14px;
    background: var(--shell-panel-background, #fff);
    color: inherit; cursor: pointer; text-align: left;
    transition: transform 0.06s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.pos__tile:hover[b-cpegb8knfh] { border-color: #17a065; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }
.pos__tile:active[b-cpegb8knfh] { transform: scale(0.97); }

.pos__tile-badge[b-cpegb8knfh] {
    width: 38px; height: 38px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 0.85rem;
    flex: 0 0 auto;
}

/* The name must READ. It was flex:1 1 auto inside a fixed-height tile, so
   the badge and the price row squeezed it and -webkit-line-clamp:2 clipped
   the second line through the middle of the glyphs — "Item Has Custom Data"
   came out as "Item Has Custom" over half a "Data".

   Two changes fix it and one keeps it fixed: the name no longer flexes
   (flex:0 0 auto), so it takes the height it needs and the TILE grows;
   min-height is a floor rather than a ceiling, so a long name is allowed
   to push the tile taller than its neighbours; and the clamp box gets an
   explicit max-height of exactly 3 × line-height, so when a very long name
   IS clamped it is cut at a line boundary and ends in an ellipsis rather
   than halfway down a row of letters. */
.pos__tile-name[b-cpegb8knfh] {
    flex: 0 0 auto;
    font-size: 0.86rem; font-weight: 600; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    max-height: calc(3 * 1.3em);
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Description: the tie-breaker between items whose names read alike.
   Deliberately quieter than the name and capped at two lines — it is there
   to disambiguate at a glance, not to be read in full on a tile. */
.pos__tile-desc[b-cpegb8knfh] {
    flex: 0 0 auto;
    font-size: 0.72rem; font-weight: 500; line-height: 1.3; opacity: 0.7;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    max-height: calc(2 * 1.3em);
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Photo occupies the same 38px box as the initials badge, so a catalogue
   with photographs on only some items still grids evenly. */
.pos__tile-photo[b-cpegb8knfh] {
    width: 38px; height: 38px; border-radius: 10px;
    object-fit: cover; flex: 0 0 auto;
    background: var(--shell-app-background, #f4f6fa);
}

/* margin-top:auto pins price + stock to the bottom edge now that the name
   and description size themselves — so the price sits on one line across
   the whole wall even when tiles differ in height. */
.pos__tile-foot[b-cpegb8knfh] {
    margin-top: auto;
    display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem;
}

.pos__tile-price[b-cpegb8knfh] { font-size: 0.95rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* An item with no price at the active price type: a data gap, not a zero
   sale. Reads as "someone must fix the master", not "the screen broke". */
.pos__tile-price--none[b-cpegb8knfh] {
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.01em;
    color: #c2333f;
    background: rgba(220, 53, 69, 0.12);
    padding: 0.08rem 0.4rem; border-radius: 999px;
}

.pos__pricetype[b-cpegb8knfh] {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.68rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.05rem 0.4rem; border-radius: 999px;
    background: rgba(23, 160, 101, 0.16); color: #128050;
}

.pos__tile-stock[b-cpegb8knfh] {
    font-size: 0.72rem; font-weight: 700;
    padding: 0.08rem 0.4rem; border-radius: 999px;
    background: rgba(23, 160, 101, 0.14); color: #12805071;
    color: #128050;
}

.pos__tile-stock.is-out[b-cpegb8knfh] { background: rgba(220, 53, 69, 0.14); color: #c2333f; }

.pos__empty[b-cpegb8knfh] { opacity: 0.65; font-size: 0.9rem; padding: 1.4rem 0.4rem; grid-column: 1 / -1; }
.pos__empty--cart[b-cpegb8knfh] { text-align: center; }

/* ── Cart ────────────────────────────────────────────────────────── */
.pos__cart[b-cpegb8knfh] {
    display: flex; flex-direction: column; gap: 0.55rem;
    min-height: 0;
    padding: 0.75rem;
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.1));
    border-radius: 14px;
    background: var(--shell-panel-background, #fff);
}

.pos__cart-head[b-cpegb8knfh] {
    display: flex; align-items: baseline; justify-content: space-between;
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
    font-weight: 800; opacity: 0.75;
    flex: 0 0 auto;
}

.pos__cart-count[b-cpegb8knfh] { font-size: 0.72rem; letter-spacing: 0; opacity: 0.8; }

.pos__lines[b-cpegb8knfh] { flex: 1 1 auto; min-height: 80px; overflow-y: auto; }

.pos__line[b-cpegb8knfh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto 32px;
    align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.35rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.07));
    border-radius: 8px;
    cursor: pointer;
}

.pos__line.is-selected[b-cpegb8knfh] { background: rgba(23, 160, 101, 0.1); }

/* Flash on the line a tap or scan just landed on. Added by JS
   (revealPosLine) rather than by markup, so it is transient — see the
   comment on the row for why a permanent mark would be worse.

   Green, matching the terminal's other "this worked" signals. It fades to
   nothing so the row ends up looking exactly as it did, with no residue to
   confuse the next scan. */
@keyframes pos-line-flash-b-cpegb8knfh {
    0%   { background: rgba(23, 160, 101, 0.42); }
    100% { background: transparent; }
}

.pos__line.pos-line-flash[b-cpegb8knfh] {
    animation: pos-line-flash-b-cpegb8knfh 0.7s ease-out;
}

/* A selected row keeps its own tint as the flash lands on top, so the flash
   is still visible against it rather than fading into the same colour. */
.pos__line.is-selected.pos-line-flash[b-cpegb8knfh] {
    animation: pos-line-flash-b-cpegb8knfh 0.7s ease-out;
}

/* Someone who has asked for less motion still needs to SEE which line was
   hit — keep the highlight, drop the animation. */
@media (prefers-reduced-motion: reduce) {
    .pos__line.pos-line-flash[b-cpegb8knfh],
    .pos__line.is-selected.pos-line-flash[b-cpegb8knfh] {
        animation: none;
        background: rgba(23, 160, 101, 0.32);
    }
}

.pos__line-main[b-cpegb8knfh] { min-width: 0; }

.pos__line-name[b-cpegb8knfh] {
    display: block; font-size: 0.88rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pos__line-desc[b-cpegb8knfh] {
    display: block; font-size: 0.74rem; opacity: 0.85;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pos__line-meta[b-cpegb8knfh] {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.72rem; opacity: 0.7;
}

.pos__line-tranid[b-cpegb8knfh] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.66rem; font-weight: 700;
    padding: 0.02rem 0.3rem; border-radius: 4px;
    background: rgba(0, 0, 0, 0.07);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px;
}

/* Discount on a bill line. Amber, so it is neither the price (plain dark)
   nor the stock pill (green) — at a counter this is the number a customer
   queries most, so it must be findable without shouting over the line
   total. Rate in a pill, money beside it, both on one row. */
.pos__line-disc[b-cpegb8knfh] {
    display: flex; align-items: baseline; gap: 0.3rem;
    margin-top: 0.12rem;
    font-size: 0.68rem; font-weight: 700;
    color: #8a5a06;
}

.pos__line-disc-rate[b-cpegb8knfh] {
    padding: 0.03rem 0.32rem; border-radius: 999px;
    background: rgba(255, 179, 0, 0.22);
    white-space: nowrap;
}

.pos__line-disc-amt[b-cpegb8knfh] { font-variant-numeric: tabular-nums; white-space: nowrap; }

.pos__line-qty[b-cpegb8knfh] { display: flex; align-items: center; gap: 0.2rem; }

.pos__step[b-cpegb8knfh] {
    width: 34px; height: 34px;
    border: 1px solid var(--shell-border, #cfd7e3);
    border-radius: 9px;
    background: var(--shell-app-background, #f4f6fa);
    color: inherit; cursor: pointer;
    font-size: 1.05rem; font-weight: 700; line-height: 1;
}

.pos__step:hover[b-cpegb8knfh] { border-color: #17a065; color: #17a065; }

.pos__qty[b-cpegb8knfh] {
    min-width: 40px; text-align: center;
    font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

.pos__line-amt[b-cpegb8knfh] {
    font-size: 0.9rem; font-weight: 800; font-variant-numeric: tabular-nums;
    text-align: right; min-width: 74px;
}

.pos__line-del[b-cpegb8knfh] {
    width: 32px; height: 32px;
    border: 0; border-radius: 8px; background: transparent;
    color: inherit; opacity: 0.45; cursor: pointer;
}

.pos__line-del:hover[b-cpegb8knfh] { opacity: 1; color: #c2333f; background: rgba(220, 53, 69, 0.1); }

/* ── Totals ──────────────────────────────────────────────────────── */
.pos__totals[b-cpegb8knfh] {
    flex: 0 0 auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
}

.pos__total-row[b-cpegb8knfh] {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 0.84rem; padding: 0.15rem 0.1rem;
    font-variant-numeric: tabular-nums;
}

.pos__total-row--grand[b-cpegb8knfh] { font-size: 1.35rem; font-weight: 800; padding-top: 0.25rem; }

/* ── Numpad ──────────────────────────────────────────────────────── */
.pos__pad[b-cpegb8knfh] {
    flex: 0 0 auto;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem;
}

.pos__key[b-cpegb8knfh] {
    min-height: 46px;
    border: 1px solid var(--shell-border, #cfd7e3);
    border-radius: 10px;
    background: var(--shell-app-background, #f4f6fa);
    color: inherit; cursor: pointer;
    font-size: 1.05rem; font-weight: 700;
}

.pos__key:hover[b-cpegb8knfh] { border-color: #17a065; color: #17a065; }
.pos__key:active[b-cpegb8knfh] { transform: scale(0.96); }

.pos__pad-hint[b-cpegb8knfh] {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.8rem;
    padding: 0.4rem 0.5rem;
    border-radius: 9px;
    background: rgba(23, 160, 101, 0.12);
}

.pos__pad-apply[b-cpegb8knfh] {
    margin-left: auto;
    min-height: 34px; padding: 0 0.75rem;
    border: 0; border-radius: 8px;
    background: #17a065; color: #fff; cursor: pointer;
    font-weight: 700; font-size: 0.8rem;
}

/* ── Pay ─────────────────────────────────────────────────────────── */
.pos__pay[b-cpegb8knfh] {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    min-height: 68px; padding: 0 1.1rem;
    border: 0; border-radius: 14px;
    background: linear-gradient(135deg, #1fb478, #128050);
    color: #fff; cursor: pointer;
    font-size: 1.1rem; font-weight: 800;
    box-shadow: 0 6px 18px rgba(18, 128, 80, 0.32);
}

.pos__pay:disabled[b-cpegb8knfh] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.pos__pay:not(:disabled):active[b-cpegb8knfh] { transform: scale(0.99); }

.pos__pay-amt[b-cpegb8knfh] { font-size: 1.35rem; font-variant-numeric: tabular-nums; }

/* ── Tablet / portrait ───────────────────────────────────────────── */
@media (max-width: 1180px) {
    /* Narrower default for the bill, but the operator's dragged width still
       wins where they have set one — hence the var, not a fixed 320px. */
    .pos__body[b-cpegb8knfh] { grid-template-columns: 170px minmax(0, 1fr) auto var(--pos-cart-w, 320px); }
    .pos__tiles[b-cpegb8knfh] { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}

@media (max-width: 900px) {
    /* Cart first: on a small terminal the bill matters more than the wall
       of tiles, and categories collapse to a horizontal strip. */
    .pos__body[b-cpegb8knfh] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto minmax(0, 1fr);
    }
    /* Stacked layout: there are no side-by-side panes left to split, and a
       horizontal drag handle in a vertical stack is just a confusing strip.
       The saved width is untouched and comes back on a wider screen. */
    .pos__splitter[b-cpegb8knfh] { display: none; }
    .pos__cats[b-cpegb8knfh] {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }
    .pos__cat[b-cpegb8knfh] { flex: 0 0 auto; min-width: 132px; }
    .pos__cart[b-cpegb8knfh] { max-height: 46vh; }
    .pos__bar[b-cpegb8knfh] { flex-wrap: wrap; }
    .pos__scan[b-cpegb8knfh] { order: 3; max-width: none; flex-basis: 100%; }
}

/* ── Dark theme ──────────────────────────────────────────────────────
   This app carries its OWN theme on html[data-theme-appearance], set by
   applyTheme() in layout.js. The rules here previously keyed off
   :root[data-theme="…"], which matches nothing in this application, so
   only the prefers-color-scheme block below ever applied — meaning these
   colours tracked the OPERATING SYSTEM rather than the theme the operator
   had actually chosen. An OS on dark under an app rendering light was the
   result reported on the message strip.

   The message panel no longer appears here at all: it is a solid dark
   panel in every theme (see .pos__msg--*), which is both the requested
   look and one less thing that can disagree with itself.

   prefers-color-scheme is kept ONLY as a fallback for the moment before
   applyTheme has stamped the attribute; the attribute rules follow it and
   win, so the app's own choice is always the last word. */
@media (prefers-color-scheme: dark) {
    .pos__cat-count[b-cpegb8knfh] { background: rgba(255, 255, 255, 0.12); }
    .pos__tile-stock[b-cpegb8knfh] { background: rgba(31, 180, 120, 0.18); color: #4bd79c; }
    .pos__tile-stock.is-out[b-cpegb8knfh] { background: rgba(220, 53, 69, 0.2); color: #ff8b95; }
}

html[data-theme-appearance="dark"] .pos__cat-count[b-cpegb8knfh] { background: rgba(255, 255, 255, 0.12); }
html[data-theme-appearance="dark"] .pos__tile-stock[b-cpegb8knfh] { background: rgba(31, 180, 120, 0.18); color: #4bd79c; }
html[data-theme-appearance="dark"] .pos__tile-stock.is-out[b-cpegb8knfh] { background: rgba(220, 53, 69, 0.2); color: #ff8b95; }
html[data-theme-appearance="light"] .pos__cat-count[b-cpegb8knfh] { background: rgba(0, 0, 0, 0.07); }
html[data-theme-appearance="light"] .pos__tile-stock[b-cpegb8knfh] { background: rgba(23, 160, 101, 0.14); color: #128050; }
html[data-theme-appearance="light"] .pos__tile-stock.is-out[b-cpegb8knfh] { background: rgba(220, 53, 69, 0.14); color: #c2333f; }

.pos__pay-key[b-cpegb8knfh] {
    margin-left: 0.5rem;
    font-size: 0.66rem; font-weight: 800;
    padding: 0.08rem 0.35rem; border-radius: 5px;
    background: rgba(255, 255, 255, 0.24);
}

@media (prefers-color-scheme: dark) { .pos__line-tranid[b-cpegb8knfh] { background: rgba(255, 255, 255, 0.12); } }
html[data-theme-appearance="dark"] .pos__line-tranid[b-cpegb8knfh] { background: rgba(255, 255, 255, 0.12); }
html[data-theme-appearance="light"] .pos__line-tranid[b-cpegb8knfh] { background: rgba(0, 0, 0, 0.07); }

/* Amber at 0.68rem on a dark cart panel is too dim to read; lift it. */
@media (prefers-color-scheme: dark) { .pos__line-disc[b-cpegb8knfh] { color: #ffc861; } }
html[data-theme-appearance="dark"] .pos__line-disc[b-cpegb8knfh] { color: #ffc861; }
html[data-theme-appearance="light"] .pos__line-disc[b-cpegb8knfh] { color: #8a5a06; }

@media (prefers-color-scheme: dark) { .pos__scan-find:hover[b-cpegb8knfh] { background: rgba(255, 255, 255, 0.14); } }
html[data-theme-appearance="dark"] .pos__scan-find:hover[b-cpegb8knfh] { background: rgba(255, 255, 255, 0.14); }
html[data-theme-appearance="light"] .pos__scan-find:hover[b-cpegb8knfh] { background: rgba(0, 0, 0, 0.07); }
/* /Components/VoucherNotesDialog.razor.rz.scp.css */
/* Voucher notes dialog — theme-variable surfaces only. */

.vnotes__title[b-v4qu0a6dkp] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.vnotes__subtitle[b-v4qu0a6dkp] {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.75;
    color: var(--shell-text-primary, inherit);
}

.vnotes[b-v4qu0a6dkp] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--shell-text-primary, inherit);
}

.vnotes__error[b-v4qu0a6dkp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.12);
    color: #c2333f;
    font-size: 0.85rem;
}

.vnotes__error-x[b-v4qu0a6dkp] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}

.vnotes__scroll[b-v4qu0a6dkp] {
    overflow: auto;
    max-height: 40vh;
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
}

.vnotes__table[b-v4qu0a6dkp] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: var(--shell-panel-background, #fff);
}

.vnotes__table th[b-v4qu0a6dkp] {
    position: sticky;
    top: 0;
    background: var(--shell-panel-background, #fff);
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.12));
    white-space: normal;
}

.vnotes__table td[b-v4qu0a6dkp] {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.08));
    vertical-align: top;
}

.vnotes__user[b-v4qu0a6dkp] { white-space: nowrap; }
.vnotes__when[b-v4qu0a6dkp] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vnotes__text[b-v4qu0a6dkp] { white-space: pre-wrap; }
.vnotes__empty[b-v4qu0a6dkp] { opacity: 0.7; text-align: center; }

.vnotes__f[b-v4qu0a6dkp] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
}

.vnotes__f span[b-v4qu0a6dkp] { opacity: 0.8; }

.vnotes__f textarea[b-v4qu0a6dkp] {
    font-size: 0.9rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.5rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    font-family: inherit;
}

.vnotes__actions[b-v4qu0a6dkp] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
/* /Components/VoucherSendDialog.razor.rz.scp.css */
/* Voucher send dialog — theme-variable surfaces only. */

.vchsend__title[b-4dxaehr3e0] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
}

.vchsend__subtitle[b-4dxaehr3e0] {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.75;
    color: var(--shell-text-primary, inherit);
}

.vchsend[b-4dxaehr3e0] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    color: var(--shell-text-primary, inherit);
}

.vchsend__f[b-4dxaehr3e0] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
}

.vchsend__f span[b-4dxaehr3e0] { opacity: 0.8; }

.vchsend__f input[b-4dxaehr3e0],
.vchsend__f textarea[b-4dxaehr3e0] {
    font-size: 0.9rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.5rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    font-family: inherit;
}

.vchsend__f input[readonly][b-4dxaehr3e0],
.vchsend__f textarea[readonly][b-4dxaehr3e0] {
    opacity: 0.8;
    background: transparent;
}

.vchsend__note[b-4dxaehr3e0] {
    font-size: 0.8rem;
    opacity: 0.75;
    padding: 0.35rem 0.55rem;
    border-radius: 0.5rem;
    border: 1px dashed var(--shell-border, rgba(0, 0, 0, 0.2));
}

.vchsend__actions[b-4dxaehr3e0] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.25rem;
}
/* /Components/Workflow/VoucherWorkflowDialog.razor.rz.scp.css */
/* The workflow panel. Colour is never the only signal: every step carries its
   status as a word as well as a tint, and the one that is open is the one with
   a rule down its left edge. */

.vwf[b-av0ft9fc6u] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 68vh;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.vwf__title[b-av0ft9fc6u] {
    font-weight: 600;
}

.vwf__subtitle[b-av0ft9fc6u] {
    margin-left: 0.5rem;
    opacity: 0.75;
    font-weight: 400;
    font-size: 0.85rem;
}

.vwf__muted[b-av0ft9fc6u] {
    opacity: 0.75;
    margin: 0;
    font-size: 0.85rem;
}

.vwf__banner[b-av0ft9fc6u] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border-radius: 4px;
    border-left: 3px solid transparent;
    font-size: 0.87rem;
}

.vwf__banner--error[b-av0ft9fc6u] {
    background: var(--shell-danger-soft, #fdeaea);
    border-left-color: var(--shell-danger, #c0392b);
    color: var(--shell-danger-text, #7d1f16);
}

.vwf__banner--ok[b-av0ft9fc6u] {
    background: var(--shell-success-soft, #eaf7ee);
    border-left-color: var(--shell-success, #2e7d32);
    color: var(--shell-success-text, #1b5e20);
}

.vwf__banner-x[b-av0ft9fc6u] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0.6;
}

/* ── where it is ─────────────────────────────────────────────────────────── */

.vwf__head[b-av0ft9fc6u] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.vwf__headline[b-av0ft9fc6u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 22rem;
    font-size: 0.95rem;
}

.vwf__chip[b-av0ft9fc6u] {
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.vwf__chip--busy[b-av0ft9fc6u] { background: var(--shell-warning-soft, #fdf3e0); color: var(--shell-warning-text, #8a5a00); }
.vwf__chip--done[b-av0ft9fc6u] { background: var(--shell-success-soft, #eaf7ee); color: var(--shell-success-text, #1b5e20); }
.vwf__chip--stopped[b-av0ft9fc6u] { background: var(--shell-danger-soft, #fdeaea); color: var(--shell-danger-text, #7d1f16); }
.vwf__chip--idle[b-av0ft9fc6u] { background: var(--shell-surface-3, #eceff1); color: inherit; }

.vwf__bar[b-av0ft9fc6u] {
    position: relative;
    flex: 0 0 10rem;
    height: 1.15rem;
    border-radius: 999px;
    background: var(--shell-surface-3, #eceff1);
    overflow: hidden;
}

.vwf__bar-fill[b-av0ft9fc6u] {
    height: 100%;
    background: var(--shell-accent, #1976d2);
    opacity: 0.85;
}

.vwf__bar-text[b-av0ft9fc6u] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 600;
}

/* ── the steps ───────────────────────────────────────────────────────────── */

.vwf__steps[b-av0ft9fc6u] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vwf__step[b-av0ft9fc6u] {
    border: 1px solid var(--shell-border, #dfe3e6);
    border-left-width: 3px;
    border-radius: 4px;
    padding: 0.55rem 0.7rem;
    background: var(--shell-surface-1, #fff);
}

.vwf__step--open[b-av0ft9fc6u] { border-left-color: var(--shell-accent, #1976d2); background: var(--shell-accent-soft, #f3f8fd); }
.vwf__step--done[b-av0ft9fc6u] { border-left-color: var(--shell-success, #2e7d32); }
.vwf__step--bad[b-av0ft9fc6u] { border-left-color: var(--shell-danger, #c0392b); }
.vwf__step--off[b-av0ft9fc6u] { border-left-color: var(--shell-border, #dfe3e6); opacity: 0.65; }
.vwf__step--waiting[b-av0ft9fc6u] { border-left-color: var(--shell-border, #dfe3e6); }

.vwf__step-head[b-av0ft9fc6u] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.vwf__step-no[b-av0ft9fc6u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--shell-surface-3, #eceff1);
    font-size: 0.75rem;
    font-weight: 600;
}

.vwf__step-name[b-av0ft9fc6u] { font-weight: 600; }

.vwf__step-state[b-av0ft9fc6u] {
    margin-left: auto;
    font-size: 0.78rem;
    opacity: 0.8;
}

.vwf__step-desc[b-av0ft9fc6u],
.vwf__step-words[b-av0ft9fc6u],
.vwf__step-policy[b-av0ft9fc6u],
.vwf__step-instructions[b-av0ft9fc6u] {
    font-size: 0.83rem;
    margin-top: 0.2rem;
}

.vwf__step-policy[b-av0ft9fc6u] { opacity: 0.75; }
.vwf__step-instructions[b-av0ft9fc6u] { opacity: 0.85; }

.vwf__people[b-av0ft9fc6u] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.4rem;
    font-size: 0.82rem;
}

.vwf__people td[b-av0ft9fc6u] {
    padding: 0.2rem 0.35rem;
    border-top: 1px solid var(--shell-border, #dfe3e6);
    vertical-align: top;
}

.vwf__me td[b-av0ft9fc6u] { font-weight: 600; }

.vwf__you[b-av0ft9fc6u],
.vwf__tag[b-av0ft9fc6u] {
    margin-left: 0.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--shell-surface-3, #eceff1);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
}

.vwf__p-state[b-av0ft9fc6u] { width: 6.5rem; }
.vwf__p-when[b-av0ft9fc6u] { width: 10rem; white-space: nowrap; opacity: 0.75; }
.vwf__p-remarks[b-av0ft9fc6u] { opacity: 0.85; }

/* ── the actions ─────────────────────────────────────────────────────────── */

.vwf__actions[b-av0ft9fc6u] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding-top: 0.25rem;
}

.vwf__spacer[b-av0ft9fc6u] { flex: 1 1 auto; }

.vwf__ask[b-av0ft9fc6u] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vwf__f[b-av0ft9fc6u] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
}

.vwf__f textarea[b-av0ft9fc6u],
.vwf__f select[b-av0ft9fc6u] {
    width: 100%;
    font: inherit;
    padding: 0.35rem;
    border: 1px solid var(--shell-border, #dfe3e6);
    border-radius: 3px;
    background: var(--shell-surface-1, #fff);
    color: inherit;
}

/* ── history ─────────────────────────────────────────────────────────────── */

.vwf__history summary[b-av0ft9fc6u] {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.2rem 0;
}

.vwf__log[b-av0ft9fc6u] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.vwf__log th[b-av0ft9fc6u],
.vwf__log td[b-av0ft9fc6u] {
    padding: 0.25rem 0.35rem;
    border-bottom: 1px solid var(--shell-border, #dfe3e6);
    text-align: left;
    vertical-align: top;
}

.vwf__log th[b-av0ft9fc6u] {
    font-weight: 600;
    white-space: normal;
}

.vwf__l-when[b-av0ft9fc6u] { width: 10.5rem; white-space: nowrap; opacity: 0.75; }
.vwf__l-remarks[b-av0ft9fc6u] { opacity: 0.9; }

@media (max-width: 760px) {
    .vwf__bar[b-av0ft9fc6u] { flex-basis: 100%; }
    .vwf__p-when[b-av0ft9fc6u],
    .vwf__l-when[b-av0ft9fc6u] { width: auto; white-space: normal; }
}

/* ── the route as a diagram: the Diagram / Steps switch ─────────────────── */

.vwf__viewbar[b-av0ft9fc6u] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.2rem 0 0.4rem; }
.vwf__viewswitch[b-av0ft9fc6u] { display: inline-flex; border: 1px solid var(--shell-border); border-radius: 8px; overflow: hidden; }
.vwf__viewbtn[b-av0ft9fc6u] { display: inline-flex; align-items: center; gap: 0.3rem; border: none; background: var(--shell-panel-background); color: var(--shell-text-secondary);
                font: inherit; font-size: 0.85rem; padding: 0.3rem 0.75rem; cursor: pointer; }
.vwf__viewbtn + .vwf__viewbtn[b-av0ft9fc6u] { border-left: 1px solid var(--shell-border); }
.vwf__viewbtn--on[b-av0ft9fc6u] { background: var(--shell-panel-background-soft); color: var(--shell-text-primary); font-weight: 600; box-shadow: inset 0 -2px 0 var(--shell-accent); }
.vwf__viewbtn:focus-visible[b-av0ft9fc6u] { outline: 2px solid var(--shell-accent); outline-offset: -2px; }
.vwf .app-field-hint[b-av0ft9fc6u] { display: block; margin: 0.3rem 0 0.5rem; }
/* /Components/Workflow/WorkflowConditionBuilder.razor.rz.scp.css */
/* A voucher workflow's condition - builder and expression. Shell tokens only. */

.wfc[b-gla94bl0af] { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }

.wfc__bar[b-gla94bl0af] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.wfc__baractions[b-gla94bl0af] { display: flex; align-items: center; gap: 0.35rem; }

.wfc__modes[b-gla94bl0af] {
    display: inline-flex;
    border: 1px solid var(--shell-border);
    border-radius: 8px;
    overflow: hidden;
}

.wfc__mode[b-gla94bl0af] {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 0.35rem 0.9rem;
    cursor: pointer;
}

.wfc__mode + .wfc__mode[b-gla94bl0af] { border-left: 1px solid var(--shell-border); }
.wfc__mode--on[b-gla94bl0af] { background: var(--shell-accent, #2563eb); color: var(--shell-button-primary-text, #fff); }
.wfc__mode:focus-visible[b-gla94bl0af] { outline: 2px solid var(--shell-accent, #2563eb); outline-offset: -2px; }

.wfc__group[b-gla94bl0af] {
    border: 1px solid var(--shell-border);
    border-left: 4px solid var(--shell-accent, #2563eb);
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.wfc__group--d1[b-gla94bl0af] { border-left-color: var(--shell-success, #2e7d32); }
.wfc__group--d2[b-gla94bl0af] { border-left-color: var(--shell-warning, #b26a00); }
.wfc__group--d3[b-gla94bl0af] { border-left-color: var(--shell-danger, #c62828); }

.wfc__grouphead[b-gla94bl0af] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
[b-gla94bl0af] .wfc__groupmode { max-width: 14rem; }
.wfc__not[b-gla94bl0af] { font-size: 0.86rem; }
.wfc__muted[b-gla94bl0af] { font-size: 0.86rem; opacity: 0.75; margin: 0.25rem 0; }

.wfc__rule[b-gla94bl0af] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; min-width: 0; }
[b-gla94bl0af] .wfc__field { flex: 1 1 15rem; min-width: 12rem; }
[b-gla94bl0af] .wfc__op { flex: 0 1 11rem; min-width: 9rem; }
[b-gla94bl0af] .wfc__val { flex: 1 1 9rem; min-width: 8rem; }
[b-gla94bl0af] .wfc__std { flex: 0 1 9rem; min-width: 8rem; }

/* a value that is a standard variable ($UserID ...): a chip, not a typed value */
.wfc__chip[b-gla94bl0af] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 9rem;
    min-width: 8rem;
    max-width: 100%;
    padding: 0.2rem 0.35rem 0.2rem 0.6rem;
    border: 1px solid var(--shell-accent, #2563eb);
    border-radius: 999px;
    background: var(--shell-panel-background);
    color: var(--shell-text-primary);
    font-size: 0.86rem;
}
.wfc__chipname[b-gla94bl0af] { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 600; color: var(--shell-accent, #2563eb); }
.wfc__chipwhat[b-gla94bl0af] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.75; font-size: 0.8rem; }
.wfc__chipx[b-gla94bl0af] {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.3rem;
    cursor: pointer;
    border-radius: 50%;
}
.wfc__chipx:focus-visible[b-gla94bl0af] { outline: 2px solid var(--shell-accent, #2563eb); }

.wfc__what[b-gla94bl0af] {
    flex: 1 1 12rem;
    min-width: 0;
    font-size: 0.8rem;
    opacity: 0.75;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wfc__adds[b-gla94bl0af] { display: flex; gap: 0.4rem; }

.wfc__text[b-gla94bl0af] {
    width: 100%;
    box-sizing: border-box;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--shell-border);
    border-radius: 8px;
    background: var(--shell-panel-background);
    color: var(--shell-text-primary);
    resize: vertical;
}

.wfc__text:focus-visible[b-gla94bl0af] { outline: 2px solid var(--shell-accent, #2563eb); outline-offset: 1px; }

.wfc__insert[b-gla94bl0af] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }

.wfc__check[b-gla94bl0af] {
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--shell-status-success-border, #2e7d32);
    border-left-width: 4px;
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.wfc__check code[b-gla94bl0af] { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.84rem; opacity: 0.85; }
.wfc__check ol[b-gla94bl0af] { margin: 0.25rem 0 0; padding-left: 1.2rem; }
.wfc__check--bad[b-gla94bl0af] { border-color: var(--shell-danger, #c62828); }
.wfc__notice[b-gla94bl0af] { margin-top: 0.3rem; opacity: 0.85; }
.wfc__notice--bad[b-gla94bl0af] { color: var(--shell-danger, #c62828); opacity: 1; }

.wfc__test summary[b-gla94bl0af] { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.wfc__testbar[b-gla94bl0af] { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 0.5rem; }
.wfc__testbar .app-field[b-gla94bl0af] { flex: 0 1 18rem; }
.wfc__verdict[b-gla94bl0af] { margin: 0.5rem 0; padding: 0.4rem 0.6rem; border-radius: 6px; border: 1px solid var(--shell-border); }
.wfc__verdict--yes[b-gla94bl0af] { border-color: var(--shell-success, #2e7d32); }
.wfc__verdict--bad[b-gla94bl0af] { border-color: var(--shell-danger, #c62828); }

.wfc__facts[b-gla94bl0af] { overflow-x: auto; }
.wfc__facts table[b-gla94bl0af] { border-collapse: collapse; font-size: 0.86rem; }
.wfc__facts th[b-gla94bl0af], .wfc__facts td[b-gla94bl0af] { padding: 0.25rem 0.6rem; border-bottom: 1px solid var(--shell-border); text-align: left; }
.wfc__facts th[b-gla94bl0af] { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; }

@media (max-width: 900px) {
    .wfc__insert[b-gla94bl0af] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Workflow/WorkflowNotificationRules.razor.rz.scp.css */
/* Notification rules - a workflow's or a step's. Shell tokens only. */

.wnr[b-jj9ub0vaof] { display: flex; flex-direction: column; gap: .5rem; min-width: 0; width: 100%; }

.wnr__bar[b-jj9ub0vaof] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.wnr__lead[b-jj9ub0vaof] { flex: 1 1 18rem; min-width: 0; }

.wnr__actions[b-jj9ub0vaof] { display: flex; gap: .5rem; flex-wrap: wrap; }

.wnr__fields[b-jj9ub0vaof] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .75rem 1rem;
    width: 100%;
}

.wnr__field[b-jj9ub0vaof] { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.wnr__field--full[b-jj9ub0vaof] { grid-column: 1 / -1; }

.wnr__field > label[b-jj9ub0vaof],
.wnr__label[b-jj9ub0vaof] {
    font-size: .78rem;
    font-weight: 600;
    color: var(--shell-text-muted, #64748b);
}

.wnr__shared[b-jj9ub0vaof] { color: var(--shell-warning-text, #b45309); }

.wnr__who[b-jj9ub0vaof] { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 1.6rem; align-items: center; }

.wnr__person[b-jj9ub0vaof] {
    border: 1px solid var(--shell-border, #e2e8f0);
    background: var(--shell-surface-2, #f8fafc);
    border-radius: 999px;
    padding: .1rem .6rem;
    font-size: .78rem;
}

/* A role, not a name - known only on the document. */
.wnr__person--role[b-jj9ub0vaof] {
    border-style: dashed;
    font-style: italic;
    color: var(--shell-text-secondary, #475569);
}

.wnr__dialog-actions[b-jj9ub0vaof] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
}
/* /Components/Workflow/WorkflowRouteDiagram.razor.rz.scp.css */
/* WorkflowRouteDiagram - the route drawn. Theme tokens only (shell + status); the
   step colours are the Workflow Manager's own (done green, open blue, late amber,
   rejected red, cancelled grey), so a step reads the same drawn or as a card. */
.wfd[b-4wmb5xgs36] { display: flex; flex-direction: column; flex-shrink: 0; min-height: 240px; border: 1px solid var(--shell-border); border-radius: 10px;
       background: var(--shell-panel-background-soft); overflow: hidden; }
.wfd__bar[b-4wmb5xgs36] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.4rem 0.55rem; border-bottom: 1px solid var(--shell-border); }
.wfd__btn[b-4wmb5xgs36] { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--shell-border); border-radius: 6px;
            background: var(--shell-panel-background); color: var(--shell-text-primary); font: inherit; font-size: 0.82rem;
            padding: 0.2rem 0.55rem; cursor: pointer; }
.wfd__btn:hover:not(:disabled)[b-4wmb5xgs36] { border-color: var(--shell-accent); }
.wfd__btn:focus-visible[b-4wmb5xgs36] { outline: 2px solid var(--shell-accent); outline-offset: 1px; }
.wfd__btn:disabled[b-4wmb5xgs36] { opacity: 0.45; cursor: default; }
.wfd__sep[b-4wmb5xgs36] { width: 1px; align-self: stretch; background: var(--shell-border); margin: 0 0.2rem; }
.wfd__legend[b-4wmb5xgs36] { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 0.75rem; color: var(--shell-text-secondary); }
.wfd__key[b-4wmb5xgs36] { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; margin-left: 0.3rem; vertical-align: middle; border-left: 4px solid; background: var(--shell-panel-background); }
.wfd__key--done[b-4wmb5xgs36] { border-color: #22c55e; }
.wfd__key--open[b-4wmb5xgs36] { border-color: #0ea5e9; }
.wfd__key--late[b-4wmb5xgs36] { border-color: #f59e0b; }
.wfd__key--rejected[b-4wmb5xgs36] { border-color: #ef4444; }
.wfd__key--waiting[b-4wmb5xgs36] { border-color: #94a3b8; }
.wfd__legend-dash[b-4wmb5xgs36] { display: inline-block; width: 1.4rem; border-top: 2px dashed #8b96a8; margin-left: 0.4rem; vertical-align: middle; }
.wfd__hint[b-4wmb5xgs36] { margin: 0.3rem 0.6rem 0; }
.wfd__canvas[b-4wmb5xgs36] { flex: 1 1 auto; min-height: 0; position: relative; }

/* the nodes (HTML templates inside the diagram) */
[b-4wmb5xgs36] .wfd__terminal {
    width: 100%; height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
    border-radius: 999px; border: 1.5px solid var(--shell-border); background: var(--shell-panel-background);
    color: var(--shell-text-secondary); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
[b-4wmb5xgs36] .wfd__node {
    width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; gap: 0.1rem;
    padding: 0.35rem 0.55rem; border-radius: 8px; border: 1px solid var(--shell-border); border-left: 5px solid #94a3b8;
    background: var(--shell-panel-background); color: var(--shell-text-primary); font-size: 0.78rem; line-height: 1.25;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); cursor: pointer;
}
[b-4wmb5xgs36] .wfd__node-head { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
[b-4wmb5xgs36] .wfd__node-order {
    flex: 0 0 auto; min-width: 1.25rem; height: 1.25rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--shell-panel-background-soft); border: 1px solid var(--shell-border); font-size: 0.7rem; font-weight: 700;
}
[b-4wmb5xgs36] .wfd__node-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[b-4wmb5xgs36] .wfd__node-sub, [b-4wmb5xgs36] .wfd__node-people, [b-4wmb5xgs36] .wfd__node-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[b-4wmb5xgs36] .wfd__node-sub { color: var(--shell-text-secondary); }
[b-4wmb5xgs36] .wfd__node-people { color: var(--shell-text-primary); }
[b-4wmb5xgs36] .wfd__node-meta { color: var(--shell-text-muted); font-size: 0.72rem; }
[b-4wmb5xgs36] .wfd__node--done { border-left-color: #22c55e; }
[b-4wmb5xgs36] .wfd__node--open { border-left-color: #0ea5e9; box-shadow: 0 0 0 2px color-mix(in srgb, #0ea5e9 35%, transparent); }
[b-4wmb5xgs36] .wfd__node--late { border-left-color: #f59e0b; box-shadow: 0 0 0 2px color-mix(in srgb, #f59e0b 40%, transparent); }
[b-4wmb5xgs36] .wfd__node--rejected { border-left-color: #ef4444; }
[b-4wmb5xgs36] .wfd__node--cancelled { border-left-color: #94a3b8; opacity: 0.6; text-decoration: line-through; }
[b-4wmb5xgs36] .wfd__node--paused { border-left-color: #a855f7; }
[b-4wmb5xgs36] .wfd__node--waiting { border-left-color: #94a3b8; }
[b-4wmb5xgs36] .wfd__node--design { border-left-color: var(--shell-accent); }

/* the connector lines follow the theme's muted text colour (CSS beats the SVG attribute) */
[b-4wmb5xgs36] .e-diagram-connector path, [b-4wmb5xgs36] [id$='_path'] { stroke: var(--shell-text-muted); }
.wfd__btn--on[b-4wmb5xgs36] { border-color: var(--shell-accent); background: var(--shell-panel-background-soft); font-weight: 600; }
.wfd__connecting[b-4wmb5xgs36] { margin: 0; padding: 0.35rem 0.6rem; font-size: 0.82rem; color: var(--shell-text-primary);
                   background: var(--shell-panel-background); border-bottom: 1px solid var(--shell-border); }
/* /Components/Workflow/WorkflowStepInfoDialog.razor.rz.scp.css */
/* One workflow step as its approver reads it. Shell tokens only. */

.wsi[b-j1hk4h0682] { display: flex; flex-direction: column; gap: .75rem; max-height: 72vh; overflow-y: auto; }

.wsi__sub[b-j1hk4h0682] {
    margin-left: .5rem;
    font-weight: 400;
    font-size: .85rem;
    opacity: .75;
}

.wsi__facts[b-j1hk4h0682] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    font-size: .85rem;
    color: var(--shell-text-secondary, #475569);
}

.wsi__status[b-j1hk4h0682] { font-weight: 600; }

.wsi__card[b-j1hk4h0682] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .7rem .85rem;
    border: 1px solid var(--shell-border, #e2e8f0);
    border-radius: .55rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, .6));
}

.wsi__card h3[b-j1hk4h0682] {
    margin: 0;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--shell-text-muted, #64748b);
}

.wsi__card p[b-j1hk4h0682] { margin: 0; }

.wsi__text[b-j1hk4h0682] { white-space: pre-wrap; line-height: 1.45; }

.wsi__desc[b-j1hk4h0682] { font-size: .85rem; color: var(--shell-text-secondary, #475569); white-space: pre-wrap; }

.wsi__docs[b-j1hk4h0682] { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.wsi__actions[b-j1hk4h0682] { display: flex; justify-content: flex-end; gap: .5rem; }

.wsi[b-j1hk4h0682]  .wsi__rte.e-richtexteditor { border: 0; background: transparent; }
/* /Layout/CompanySelectionLayout.razor.rz.scp.css */
/* A flex column with a REAL height, not a min-height. Both pages on this
   layout - company selection and the create wizard - put a .master-body
   inside, and that clips-and-scrolls-its-panes only when something above it
   has a definite height to hand down. With min-height the chain broke at the
   first link: the body grew to fit, nothing clipped, and the window scrolled
   as one instead of each pane scrolling itself. Owning it here also spares
   the pages guessing the header's height in a calc(). */
.company-selection-layout[b-8d4tbevnwk] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--shell-page-background);
}

.company-selection-layout__header[b-8d4tbevnwk] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3.9rem;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--shell-border);
    background: var(--shell-surface-background);
    backdrop-filter: blur(12px);
}

.company-selection-layout__brand[b-8d4tbevnwk],
.company-selection-layout__user[b-8d4tbevnwk],
.company-selection-layout__theme-picker[b-8d4tbevnwk] {
    display: grid;
    gap: 0.12rem;
}

.company-selection-layout__user[b-8d4tbevnwk] {
    min-width: 6rem;
    align-self: end;
    padding-bottom: 0.08rem;
}

.company-selection-layout__user strong[b-8d4tbevnwk] {
    font-size: 0.96rem;
    line-height: 1.1;
}

.company-selection-layout__user span[b-8d4tbevnwk],
.company-selection-layout__theme-picker span[b-8d4tbevnwk] {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.company-selection-layout__brand strong[b-8d4tbevnwk],
.company-selection-layout__user strong[b-8d4tbevnwk] {
    color: var(--shell-text-primary);
}

.company-selection-layout__brand .app-branding__title[b-8d4tbevnwk],
.company-selection-layout__brand .app-branding__subtitle[b-8d4tbevnwk] {
    color: var(--shell-text-primary);
}

.company-selection-layout__actions[b-8d4tbevnwk] {
    display: grid;
    grid-template-columns: auto minmax(12rem, 14rem) auto auto;
    align-items: end;
    justify-content: end;
    column-gap: 0.65rem;
    row-gap: 0.35rem;
}

.company-selection-layout__theme-picker[b-8d4tbevnwk] {
    min-width: 12rem;
    align-self: end;
    gap: 0.16rem;
}

.company-selection-layout__theme-picker span[b-8d4tbevnwk] {
    padding-left: 0.18rem;
}

.company-selection-layout__theme-picker[b-8d4tbevnwk]  .company-selection-layout__theme-dropdown.e-input-group,
.company-selection-layout__theme-picker[b-8d4tbevnwk]  .company-selection-layout__theme-dropdown.e-control-wrapper {
    min-height: 38px;
    border-radius: 14px;
    border: 1px solid var(--shell-button-secondary-border);
    background: var(--shell-button-secondary-bg);
    color: var(--shell-button-secondary-text);
    box-shadow: none;
}
.company-selection-layout__theme-picker[b-8d4tbevnwk]  .company-selection-layout__theme-dropdown.e-input-group input.e-input,
.company-selection-layout__theme-picker[b-8d4tbevnwk]  .company-selection-layout__theme-dropdown.e-control-wrapper input.e-input {
    min-height: 36px;
    padding: 0.45rem 0.8rem;
    color: var(--shell-button-secondary-text);
    background: transparent;
    font: inherit;
}
.company-selection-layout__theme-picker[b-8d4tbevnwk]  .company-selection-layout__theme-dropdown .e-input-group-icon,
.company-selection-layout__theme-picker[b-8d4tbevnwk]  .company-selection-layout__theme-dropdown .e-ddl-icon,
.company-selection-layout__theme-picker[b-8d4tbevnwk]  .company-selection-layout__theme-dropdown .e-clear-icon {
    color: var(--shell-button-secondary-text);
}
.company-selection-layout__theme-picker[b-8d4tbevnwk]  .company-selection-layout__theme-dropdown.e-input-focus,
.company-selection-layout__theme-picker[b-8d4tbevnwk]  .company-selection-layout__theme-dropdown.e-control-wrapper.e-input-focus,
.company-selection-layout__theme-picker[b-8d4tbevnwk]  .company-selection-layout__theme-dropdown.e-input-group.e-input-focus {
    box-shadow: 0 0 0 0.2rem var(--shell-focus-ring);
    border-color: var(--shell-button-primary);
}
.company-selection-layout__body[b-8d4tbevnwk] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 1rem 1.1rem;
}

[b-8d4tbevnwk] .selection-layout-button.e-btn {
    min-height: 36px;
    border-radius: 999px;
    font-weight: 700;
    padding-inline: 0.95rem;
}

[b-8d4tbevnwk] .selection-layout-button.secondary.e-btn {
    background: var(--shell-button-secondary-bg);
    color: var(--shell-button-secondary-text);
    border: 1px solid var(--shell-button-secondary-border);
}

[b-8d4tbevnwk] .selection-layout-button.secondary.e-btn:hover,
[b-8d4tbevnwk] .selection-layout-button.secondary.e-btn:focus {
    background: color-mix(in srgb, var(--shell-button-secondary-bg) 86%, var(--shell-button-primary) 14%);
    color: var(--shell-button-secondary-text);
}

[b-8d4tbevnwk] .selection-layout-button.primary.e-btn {
    background: var(--shell-button-primary);
    color: #ffffff;
    border: none;
}

[b-8d4tbevnwk] .selection-layout-button.primary.e-btn:hover,
[b-8d4tbevnwk] .selection-layout-button.primary.e-btn:focus {
    background: var(--shell-button-primary-hover);
    color: #ffffff;
}

@media (max-width: 700px) {
    .company-selection-layout__header[b-8d4tbevnwk],
    .company-selection-layout__actions[b-8d4tbevnwk] {
        flex-direction: column;
        align-items: stretch;
    }

    .company-selection-layout__theme-picker[b-8d4tbevnwk] {
        min-width: 100%;
    }

    .company-selection-layout__body[b-8d4tbevnwk] {
        padding-inline: 0.85rem;
    }

    [b-8d4tbevnwk] .selection-layout-button.e-btn {
        width: 100%;
    }
}


/* /Layout/LoginLayout.razor.rz.scp.css */
.login-layout[b-vnkmc1p9qu] {
    min-height: 100vh;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-4vet9za1lx] {
    position: relative;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    --app-sidebar-width: 276px;
    --app-sidebar-offset: 276px;
    --app-mobile-header-height: 3.9rem;
    isolation: isolate;
    background: var(--shell-page-background);
}

.page[b-4vet9za1lx]::before {
    content: "";
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--app-sidebar-offset);
    background: var(--shell-sidebar-background);
    box-shadow: var(--shell-sidebar-shadow);
    transition: width 0.2s ease;
    z-index: 0;
    pointer-events: none;
}

.page-content[b-4vet9za1lx] {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    box-sizing: border-box;
    background: transparent;
    overflow: hidden;
    transition: padding-left 0.2s ease;
}

.page--sidebar-open .page-content[b-4vet9za1lx] {
    padding-left: var(--app-sidebar-offset);
}

.page--sidebar-closed .page-content[b-4vet9za1lx] {
    padding-left: 0;
}

.app-sidebar__surface[b-4vet9za1lx] {
    position: relative;
    z-index: 11;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
    background: var(--shell-sidebar-background) !important;
    pointer-events: auto;
}

[b-4vet9za1lx] .app-sidebar,
[b-4vet9za1lx] .app-sidebar.e-sidebar,
[b-4vet9za1lx] .app-sidebar.e-control,
[b-4vet9za1lx] .app-sidebar.e-left,
[b-4vet9za1lx] .e-sidebar.app-sidebar,
[b-4vet9za1lx] .e-sidebar.app-sidebar.e-open,
[b-4vet9za1lx] .e-sidebar.app-sidebar.e-close {
    position: fixed !important;
    inset: 0 auto 0 0;
    z-index: 40;
    background: var(--shell-sidebar-background) !important;
    height: 100vh;
    overflow-y: auto;
    /* Never sideways. The menu rows nudge right on hover (translateX) and a
       long label could size its column wider than the panel - either one put
       a horizontal scrollbar under the menu. Rows now shrink to the panel
       (NavMenu / MenuTreeNode), and this clips whatever is left. */
    overflow-x: hidden;
    border: none !important;
    box-shadow: var(--shell-sidebar-shadow);
    pointer-events: auto !important;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

[b-4vet9za1lx] .app-sidebar .e-sidebar-content,
[b-4vet9za1lx] .app-sidebar .nav-shell {
    position: relative;
    z-index: 11;
    background: transparent !important;
    pointer-events: auto;
}

[b-4vet9za1lx] .app-sidebar .e-sidebar-content *,
[b-4vet9za1lx] .app-sidebar .nav-shell * {
    pointer-events: auto;
}

.app-sidebar__actions[b-4vet9za1lx] {
    display: grid;
    gap: 0.6rem;
    padding: 0.85rem 0.8rem 0.3rem;
}

.app-sidebar__user[b-4vet9za1lx] {
    display: grid;
    gap: 0.16rem;
    padding: 0.1rem 0.15rem;
}

.app-sidebar__user--link[b-4vet9za1lx] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    padding: 0.4rem 0.5rem;
    transition: background 0.18s ease;
}

.app-sidebar__user--link:hover[b-4vet9za1lx] {
    background: rgba(255, 255, 255, 0.08);
}

.app-sidebar__user--link > span:last-child[b-4vet9za1lx] {
    display: grid;
    gap: 0.16rem;
}

.app-sidebar__label[b-4vet9za1lx] {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--shell-text-muted-inverse);
}

.app-sidebar__user strong[b-4vet9za1lx] {
    color: var(--shell-text-inverse);
}

[b-4vet9za1lx] .mobile-sidebar-scrim.e-btn {
    position: fixed;
    inset: var(--app-mobile-header-height) 0 0 0;
    z-index: 30;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(4, 33, 28, 0.38);
    backdrop-filter: blur(1.5px);
    box-shadow: none;
}

[b-4vet9za1lx] .mobile-sidebar-scrim.e-btn:hover,
[b-4vet9za1lx] .mobile-sidebar-scrim.e-btn:focus {
    background: rgba(4, 33, 28, 0.38);
    box-shadow: none;
}

.app-header__brand-row[b-4vet9za1lx] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
}

.app-header__brand-copy[b-4vet9za1lx] {
    display: grid;
    gap: 0;
}

.top-row[b-4vet9za1lx] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    box-sizing: border-box;
    /* Compact header (user directive 2026-08-09): shortest bar that still
       fits the inline help search, theme picker and user block. */
    min-height: 3rem;
    padding: 0.3rem 1rem;
    background: var(--shell-header-background);
    border-bottom: 1px solid var(--shell-border-strong);
    box-shadow: var(--shell-header-shadow);
}

.app-header[b-4vet9za1lx] {
    position: sticky;
    top: 0;
    z-index: 60;
}

.app-header__brand[b-4vet9za1lx],
.app-user[b-4vet9za1lx] {
    display: grid;
    gap: 0.12rem;
}

.app-header__brand[b-4vet9za1lx] {
    min-width: 0;
}

.app-user[b-4vet9za1lx] {
    min-width: 6rem;
    align-self: center;
    padding-bottom: 0;
}

.app-user--link[b-4vet9za1lx] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    padding: 0.25rem 0.5rem;
    transition: background 0.18s ease;
    cursor: pointer;
}

.app-user--link:hover[b-4vet9za1lx] {
    background: rgba(255, 255, 255, 0.1);
}

.app-user__avatar[b-4vet9za1lx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    flex: 0 0 auto;
    overflow: hidden;
    font-size: 0.85rem;
    color: var(--shell-text-inverse);
}

.app-user__avatar--sidebar[b-4vet9za1lx] {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 0.95rem;
}

.app-user__avatar-img[b-4vet9za1lx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.app-user__text[b-4vet9za1lx] {
    display: grid;
    gap: 0.12rem;
}

.app-user strong[b-4vet9za1lx] {
    font-size: 0.96rem;
    line-height: 1.1;
}

.app-user__label[b-4vet9za1lx],
.app-footer__item span[b-4vet9za1lx],
.theme-picker__label[b-4vet9za1lx] {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--shell-text-muted-inverse);
}

.app-header__brand strong[b-4vet9za1lx],
.app-user strong[b-4vet9za1lx],
.app-footer__item strong[b-4vet9za1lx] {
    color: var(--shell-text-inverse);
}

.app-header__brand .app-branding__title[b-4vet9za1lx],
.app-header__brand .app-branding__subtitle[b-4vet9za1lx] {
    color: var(--shell-text-inverse);
}

.app-header__actions[b-4vet9za1lx] {
    /* Flex (was a 4-column grid): the actions row now carries five items —
       help search, theme, change company, user, power — and flex keeps
       them on one compact line with the user + power pair at the end. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    column-gap: 0.55rem;
    row-gap: 0.25rem;
    min-width: 0;
    justify-self: end;
}

.theme-picker[b-4vet9za1lx] {
    display: grid;
    gap: 0.16rem;
    min-width: 12rem;
    align-self: center;
}

.theme-picker__label[b-4vet9za1lx] {
    padding-left: 0.18rem;
}

.theme-picker[b-4vet9za1lx]  .theme-dropdown.e-input-group,
.theme-picker[b-4vet9za1lx]  .theme-dropdown.e-control-wrapper {
    min-height: 38px;
    border-radius: 14px;
    border: 1px solid var(--shell-button-secondary-border);
    background: var(--shell-button-secondary-bg);
    color: var(--shell-button-secondary-text);
    box-shadow: none;
}
.theme-picker[b-4vet9za1lx]  .theme-dropdown.e-input-group input.e-input,
.theme-picker[b-4vet9za1lx]  .theme-dropdown.e-control-wrapper input.e-input {
    min-height: 36px;
    padding: 0.45rem 0.8rem;
    color: var(--shell-button-secondary-text);
    background: transparent;
    font: inherit;
}
.theme-picker[b-4vet9za1lx]  .theme-dropdown .e-input-group-icon,
.theme-picker[b-4vet9za1lx]  .theme-dropdown .e-ddl-icon,
.theme-picker[b-4vet9za1lx]  .theme-dropdown .e-clear-icon {
    color: var(--shell-button-secondary-text);
}
.theme-picker[b-4vet9za1lx]  .theme-dropdown.e-input-focus,
.theme-picker[b-4vet9za1lx]  .theme-dropdown.e-control-wrapper.e-input-focus,
.theme-picker[b-4vet9za1lx]  .theme-dropdown.e-input-group.e-input-focus {
    box-shadow: 0 0 0 0.2rem var(--shell-focus-ring);
    border-color: var(--shell-button-primary);
}
/*
   content-shell hosts the tab bar + tab host. Needs to be a flex column
   so the tab host can take `flex: 1` and propagate height all the way
   down to the page root via `.app-tabhost__panel`. Without this chain
   any page that sets `height: 100%` (e.g. InventoryTransactionPage with
   its own internal scroll regions) collapses to zero height — the user
   sees only the hero header + toolbar and a blank body.

   Padding moved off this element onto the tab panels / empty-state so
   the tab bar can sit flush against the sticky top with no gutter, while
   the actual page content still gets consistent 1rem 1.15rem insets.
*/
.content-shell[b-4vet9za1lx] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    /* Positioning context for the hidden tab panels. They sit on top of
       each other via `position: absolute; inset: 0;` so their dimensions
       match the active panel's area — essential for Syncfusion charts /
       pivots that measure themselves at mount. Without a positioned
       ancestor they'd escape to the viewport. */
    position: relative;
}

/* ── Multi-tab strip ─────────────────────────────────────────────────
   Horizontal chips across the top of the content area, one per open
   tab. The active chip has a stronger background + primary-colour
   underline so the current document is obvious at a glance. Scrolls
   horizontally when there are more tabs than fit — no overflow menu
   yet (add when tab count justifies it).

   `flex: 0 0 auto` keeps the bar at its natural height while the tab
   host below it flexes to fill. Sticky positioning was needed with the
   old overflow-y:auto content-shell; now that we're flex-column the
   bar is just the first flex item, no sticky juggling required. */
[b-4vet9za1lx] .app-tabbar {
    flex: 0 0 auto;
    /* A row: the scrolling strip, then the actions button pinned at the right
       edge so it stays reachable however many tabs are open. `relative` gives
       the drop-down something to anchor to - without it the menu would resolve
       against the page and float somewhere else entirely. */
    display: flex;
    align-items: center;
    gap: 0.25rem;
    position: relative;
    z-index: 5;
    padding: 0.35rem 0.75rem 0 0.75rem;
    background: var(--shell-panel-background-soft);
    border-bottom: 1px solid var(--shell-border);
    box-shadow: 0 2px 8px rgba(13, 41, 98, 0.04);
}

[b-4vet9za1lx] .app-tabbar__scroll {
    display: flex;
    gap: 0.2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    padding-bottom: 0.1rem;
}
[b-4vet9za1lx] .app-tabbar__scroll { flex: 1 1 auto; min-width: 0; }

[b-4vet9za1lx] .app-tabbar__menu-btn {
    flex: 0 0 auto;
    border: 1px solid transparent;
    background: transparent;
    color: var(--shell-text-secondary, #5b6a7d);
    border-radius: 5px;
    padding: 0.25rem 0.35rem;
    cursor: pointer;
    line-height: 1;
}

[b-4vet9za1lx] .app-tabbar__menu-btn:hover {
    background: color-mix(in srgb, var(--shell-button-primary) 12%, transparent);
    color: var(--shell-text, #1c2430);
}

/* Catches the click that dismisses the menu. Transparent, full-viewport, and
   BELOW the menu so an item click still lands on the item. */
[b-4vet9za1lx] .app-tabbar__backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: transparent;
}

[b-4vet9za1lx] .app-tabbar__menu {
    position: absolute;
    top: 100%;
    right: 0.6rem;
    z-index: 61;
    min-width: 230px;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 7px;
    background: var(--shell-panel-background, #fff);
    box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.45);
}

[b-4vet9za1lx] .app-tabbar__menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--shell-text, #1c2430);
    font-size: 0.84rem;
    text-align: left;
    cursor: pointer;
}

[b-4vet9za1lx] .app-tabbar__menu-item:hover:not(:disabled) {
    background: color-mix(in srgb, var(--shell-button-primary) 14%, transparent);
}

[b-4vet9za1lx] .app-tabbar__menu-item:disabled {
    opacity: 0.45;
    cursor: default;
}

/* The tab's name, or the count the action will affect. Truncates rather than
   widening the menu for a long page title. */
[b-4vet9za1lx] .app-tabbar__menu-sub {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.76rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

[b-4vet9za1lx] .app-tabbar__menu-sep {
    height: 1px;
    margin: 0.15rem 0.2rem;
    background: var(--shell-border, #d8dee7);
}

[b-4vet9za1lx] .app-tabbar__scroll::-webkit-scrollbar { height: 4px; }
[b-4vet9za1lx] .app-tabbar__scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--shell-button-primary) 35%, transparent);
    border-radius: 2px;
}

[b-4vet9za1lx] .app-tabbar__tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 34px;
    padding: 0 0.25rem 0 0.75rem;
    border: 1px solid transparent;
    border-bottom: 3px solid transparent;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: var(--shell-text-secondary);
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
    max-width: 260px;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

[b-4vet9za1lx] .app-tabbar__tab:hover {
    background: color-mix(in srgb, var(--shell-button-primary) 6%, transparent);
    color: var(--shell-text-primary);
}

[b-4vet9za1lx] .app-tabbar__tab--active {
    background: var(--shell-panel-background);
    color: var(--shell-text-primary);
    border-color: var(--shell-border);
    border-bottom-color: var(--shell-button-primary);
    font-weight: 600;
}

[b-4vet9za1lx] .app-tabbar__icon {
    font-size: 0.95rem;
    color: var(--shell-button-primary);
}

[b-4vet9za1lx] .app-tabbar__title {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

[b-4vet9za1lx] .app-tabbar__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: var(--shell-text-secondary);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    user-select: none;
}
[b-4vet9za1lx] .app-tabbar__close:hover {
    background: color-mix(in srgb, var(--shell-status-error-text, #d32f2f) 14%, transparent);
    color: var(--shell-status-error-text, #d32f2f);
}

/* ── Tab content host ─────────────────────────────────────────────
   The host renders every tab's component; only the active one is
   visible. `display: none` on the inactive panels is intentional —
   keeps the DOM so state survives tab switches, but skips layout
   and paint so performance doesn't degrade with many tabs open.

   Height chain (required for pages like InventoryTransactionPage
   that set `.inv-page { height: 100% }` on their root):
     content-shell  (flex column)
       └─ active panel  (flex: 1; min-height: 0; overflow: auto)
            └─ page root  (height: 100% — now resolves correctly)
   Panel overflow is `auto` as a safety net for pages that don't
   manage their own scrolling. Pages with internal scroll regions
   (inv-page has overflow:hidden + its own body scroll) fit exactly
   and don't trigger the panel scrollbar. */
[b-4vet9za1lx] .app-tabhost__panel {
    min-height: 0;
    /* Isolate each panel's layout + paint so 5+ mounted pages can't
       bleed absolutely-positioned popups, tooltip overlays, or CSS
       into each other. `contain: layout style` is the browser hint
       that lets it skip re-layout of the whole shell when one hidden
       panel re-renders internally. */
    contain: layout style;
}

/* Hidden panels: stay mounted for state preservation, but parked WAY
   off-screen so nothing can bleed through.
   Syncfusion components measure themselves at mount time (SfChart,
   SfPivotView, SfGrid) — `display: none` collapses them to 0×0 and
   they render empty forever. `visibility: hidden` alone didn't work
   either: Syncfusion charts paint onto SVG/canvas elements that some
   themes explicitly re-set to `visibility: visible`, which undid our
   inheritance and made chart bars bleed through onto the Voucher List
   page that was supposedly "active".
   Moving the panel to `top: -99999px` keeps it fully measurable (so
   charts compute real widths) but clips it safely outside content-
   shell's overflow: hidden boundary. Combined with pointer-events:
   none to absorb stray focus/click, this gives a clean isolation. */
[b-4vet9za1lx] .app-tabhost__panel--hidden {
    position: absolute;
    top: -99999px;
    left: -99999px;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

[b-4vet9za1lx] .app-tabhost__panel--active {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    /* Block layout (NOT flex) so pages with `margin: 0 auto + max-width`
       such as VoucherTypeListPage centre horizontally the way they did
       before the tab refactor. Flex column parents apply align-items:
       stretch by default, which cancelled the auto-margin centring and
       pushed cards into a full-width single-column layout.
       `.inv-page { height: 100% }` still resolves because the panel has
       a concrete height from its own `flex: 1 1 auto` in content-shell's
       flex column. */
    display: block;
    overflow: auto;         /* fallback scroll for plain pages */
    padding: 1rem 1.15rem;  /* page gutter — replaces the old .content-shell padding */
    z-index: 1;
}

/* Empty-state placeholder when the tab host has nothing to show (user closed
   every open tab). Without this the user would see a blank content area. */
.app-tabhost__empty[b-4vet9za1lx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 240px;
    padding: 2rem;
    color: var(--shell-text-secondary);
    text-align: center;
}
.app-tabhost__empty-icon[b-4vet9za1lx] {
    font-size: 2.25rem;
    color: color-mix(in srgb, var(--shell-button-primary) 60%, transparent);
}
.app-tabhost__empty-title[b-4vet9za1lx] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--shell-text-primary);
}
.app-tabhost__empty-hint[b-4vet9za1lx] {
    font-size: 0.86rem;
    margin: 0;
}

.app-footer[b-4vet9za1lx] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.35rem;
    box-sizing: border-box;
    padding: 0.34rem 0.55rem;
    background: var(--shell-footer-background);
    border-top: 1px solid var(--shell-border-strong);
    box-shadow: 0 -10px 24px rgba(23, 50, 48, 0.2);
    transition: padding 0.2s ease;
}

.app-footer__item[b-4vet9za1lx],
[b-4vet9za1lx] .app-footer__item--button.e-btn {
    display: grid;
    gap: 0.04rem;
    padding: 0.24rem 0.48rem;
    border-radius: 10px;
    background: var(--shell-item-background);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.app-footer__item--link[b-4vet9za1lx],
[b-4vet9za1lx] .app-footer__item--button.e-btn {
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease;
}

[b-4vet9za1lx] .app-footer__item--button.e-btn {
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    appearance: none;
    box-shadow: none;
    text-transform: none;
}

.app-footer__item--link:hover[b-4vet9za1lx],
.app-footer__item--link:focus[b-4vet9za1lx],
[b-4vet9za1lx] .app-footer__item--button.e-btn:hover,
[b-4vet9za1lx] .app-footer__item--button.e-btn:focus {
    background: var(--shell-item-hover-background);
    transform: translateY(-1px);
}

[b-4vet9za1lx] .app-footer__item--button.e-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
}

.app-footer__item strong[b-4vet9za1lx],
[b-4vet9za1lx] .app-footer__item--button.e-btn strong {
    color: var(--shell-text-inverse);
    line-height: 1.1;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-footer__item small[b-4vet9za1lx],
[b-4vet9za1lx] .app-footer__item--button.e-btn small {
    color: var(--shell-text-muted-inverse);
    font-size: 0.68rem;
    line-height: 1.05;
}

.app-footer__item--session[b-4vet9za1lx] {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
}

.app-footer__session-avatar[b-4vet9za1lx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    flex: 0 0 auto;
    overflow: hidden;
    font-size: 0.75rem;
    color: var(--shell-text-inverse);
}

.app-footer__session-info[b-4vet9za1lx] {
    display: grid;
    gap: 0.04rem;
    min-width: 0;
}

.reporting-period-shell[b-4vet9za1lx] {
    display: grid;
    gap: 1rem;
}

.reporting-period-shell__note[b-4vet9za1lx] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.5;
}

.reporting-period-shell__note strong[b-4vet9za1lx] {
    color: var(--shell-button-secondary-text);
}

.reporting-period-shell__error[b-4vet9za1lx] {
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    border: 1px solid var(--shell-error-border);
    background: var(--shell-error-bg);
    color: var(--shell-error-text);
    font-weight: 600;
}

.reporting-period-grid[b-4vet9za1lx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.reporting-period-field[b-4vet9za1lx] {
    display: grid;
    gap: 0.4rem;
}

.reporting-period-field span[b-4vet9za1lx] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--shell-button-secondary-text);
}

[b-4vet9za1lx] .reporting-period-input.e-control-wrapper,
[b-4vet9za1lx] .reporting-period-input.e-control-wrapper.e-float-input {
    min-height: 44px;
    border-radius: 14px;
    border: 1px solid var(--shell-field-border);
    background: var(--shell-contrast-surface-bg);
    box-shadow: none;
}

[b-4vet9za1lx] .reporting-period-input.e-control-wrapper input.e-input,
[b-4vet9za1lx] .reporting-period-input.e-control-wrapper.e-float-input input.e-input {
    min-height: 42px;
    padding: 0.7rem 0.85rem;
    color: var(--shell-contrast-surface-text);
    background: transparent;
    font: inherit;
}

[b-4vet9za1lx] .reporting-period-input.e-control-wrapper.e-input-focus,
[b-4vet9za1lx] .reporting-period-input.e-control-wrapper.e-float-input.e-input-focus {
    box-shadow: 0 0 0 0.2rem var(--shell-focus-ring);
    border-color: var(--shell-button-primary);
}

.reporting-period-shell__actions[b-4vet9za1lx] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

[b-4vet9za1lx] .reporting-period-dialog.e-dialog,
[b-4vet9za1lx] .transaction-date-dialog.e-dialog,
[b-4vet9za1lx] .shell-alert-dialog.e-dialog {
    max-width: calc(100vw - 2rem);
    border-radius: 20px;
    overflow: hidden;
}

[b-4vet9za1lx] .reporting-period-dialog .e-dlg-header-content,
[b-4vet9za1lx] .transaction-date-dialog .e-dlg-header-content,
[b-4vet9za1lx] .shell-alert-dialog .e-dlg-header-content {
    background: var(--shell-header-background);
    color: var(--shell-text-inverse);
    padding: 1rem 1.2rem;
}

[b-4vet9za1lx] .reporting-period-dialog .e-dlg-content,
[b-4vet9za1lx] .transaction-date-dialog .e-dlg-content,
[b-4vet9za1lx] .shell-alert-dialog .e-dlg-content {
    padding: 1.2rem;
    background: var(--shell-panel-background-soft);
}

[b-4vet9za1lx] .header-button.e-btn {
    min-height: 36px;
    border-radius: 999px;
    font-weight: 700;
    padding-inline: 0.95rem;
}

[b-4vet9za1lx] .header-button--icon.e-btn {
    min-width: 36px;
    padding-inline: 0;
}

[b-4vet9za1lx] .header-button.secondary.e-btn {
    background: var(--shell-button-secondary-bg);
    color: var(--shell-button-secondary-text);
    border: 1px solid var(--shell-button-secondary-border);
}

[b-4vet9za1lx] .header-button.secondary.e-btn:hover,
[b-4vet9za1lx] .header-button.secondary.e-btn:focus {
    background: color-mix(in srgb, var(--shell-button-secondary-bg) 86%, var(--shell-button-primary) 14%);
    color: var(--shell-button-secondary-text);
}

[b-4vet9za1lx] .header-button.primary.e-btn {
    background: var(--shell-button-primary);
    color: #ffffff;
    border: none;
}

[b-4vet9za1lx] .header-button.primary.e-btn:hover,
[b-4vet9za1lx] .header-button.primary.e-btn:focus {
    background: var(--shell-button-primary-hover);
    color: #ffffff;
}

@media (max-width: 640.98px) {
    .page[b-4vet9za1lx]::before {
        width: 0;
    }

    .page--sidebar-open .page-content[b-4vet9za1lx],
    .page--sidebar-closed .page-content[b-4vet9za1lx] {
        padding-left: 0;
    }

    .top-row[b-4vet9za1lx],
    .app-header__actions[b-4vet9za1lx],
    .app-footer[b-4vet9za1lx] {
        gap: 0.55rem;
    }

    .top-row[b-4vet9za1lx] {
        grid-template-columns: 1fr;
    }

    .app-header__actions[b-4vet9za1lx] {
        flex-direction: column;
        align-items: stretch;
    }

    .theme-picker[b-4vet9za1lx] {
        min-width: 100%;
    }

    .content-shell[b-4vet9za1lx] {
        padding: 0.85rem;
    }

    /* ── Footer in mobile: one horizontal strip, fits the viewport ───────
       The desktop 6-column grid stacked into 3×2 on phones, costing ~70%
       of the vertical viewport for header chrome that's mostly read-only.
       This collapses to a single line where all six pills SHARE the row
       (flex: 1 1 0 + min-width: 0) — they shrink to fit whatever width
       is available, with overflowing text ellipsing per existing
       white-space:nowrap + text-overflow:ellipsis on .strong. No
       horizontal scrolling needed; users see everything at a glance. */
    .app-footer[b-4vet9za1lx] {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0.25rem;
        padding: 0.3rem 0.4rem;
        /* Defensive — if a future build adds a 7th pill that genuinely
           can't fit, the strip remains scrollable rather than wrapping
           and stealing height. Hidden bar keeps line-height intact. */
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    .app-footer[b-4vet9za1lx]::-webkit-scrollbar { display: none; }

    /* Each pill takes an equal share of the row. flex: 1 1 0 with
       min-width: 0 means flexbox can shrink them below their content
       width — required to actually fit on narrow viewports (text
       ellipses inside the pill instead of pushing the strip wider). */
    .app-footer__item[b-4vet9za1lx],
    [b-4vet9za1lx] .app-footer__item--button.e-btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.25rem 0.4rem;
    }

    /* Tightened typography — every px counts in a 360px viewport with
       6 pills. The .span (label) shrinks the most because it's
       informational, not the primary value. */
    .app-footer__item span[b-4vet9za1lx],
    [b-4vet9za1lx] .app-footer__item--button.e-btn span {
        font-size: 0.58rem;
        letter-spacing: 0;
    }
    .app-footer__item strong[b-4vet9za1lx],
    [b-4vet9za1lx] .app-footer__item--button.e-btn strong {
        font-size: 0.78rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .app-footer__item small[b-4vet9za1lx],
    [b-4vet9za1lx] .app-footer__item--button.e-btn small {
        font-size: 0.55rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Session pill: flex row (avatar + label). The avatar is fixed width
       so the label takes the remaining flex share within the pill. */
    .app-footer__item--session[b-4vet9za1lx] {
        flex: 1 1 0;
        min-width: 0;
        gap: 0.3rem;
    }
    .app-footer__session-avatar[b-4vet9za1lx] {
        width: 1.2rem;
        height: 1.2rem;
        font-size: 0.7rem;
    }
    .app-footer__session-info[b-4vet9za1lx] {
        min-width: 0;
        overflow: hidden;
    }
    .app-footer__session-info span[b-4vet9za1lx],
    .app-footer__session-info strong[b-4vet9za1lx] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    [b-4vet9za1lx] .header-button.e-btn {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .page--mobile .page-content[b-4vet9za1lx],
    .page--mobile.page--sidebar-open .page-content[b-4vet9za1lx],
    .page--mobile.page--sidebar-closed .page-content[b-4vet9za1lx] {
        padding-left: 0;
    }

    .page--mobile .top-row[b-4vet9za1lx] {
        grid-template-columns: minmax(0, 1fr);
        min-height: var(--app-mobile-header-height);
        padding: 0.55rem 0.9rem;
    }

    .page--mobile .app-header__actions[b-4vet9za1lx] {
        display: none;
    }

    .page--mobile .app-header__brand[b-4vet9za1lx],
    .page--mobile .app-header__brand-row[b-4vet9za1lx] {
        position: relative;
        z-index: 61;
    }

    .page--mobile[b-4vet9za1lx]  .app-sidebar,
    .page--mobile[b-4vet9za1lx]  .app-sidebar.e-sidebar,
    .page--mobile[b-4vet9za1lx]  .app-sidebar.e-control,
    .page--mobile[b-4vet9za1lx]  .app-sidebar.e-left,
    .page--mobile[b-4vet9za1lx]  .e-sidebar.app-sidebar,
    .page--mobile[b-4vet9za1lx]  .e-sidebar.app-sidebar.e-open,
    .page--mobile[b-4vet9za1lx]  .e-sidebar.app-sidebar.e-close {
        top: var(--app-mobile-header-height) !important;
        height: calc(100vh - var(--app-mobile-header-height)) !important;
        z-index: 40 !important;
    }

    .page--mobile .app-sidebar__actions[b-4vet9za1lx] {
        padding-top: 0.75rem;
    }

    [b-4vet9za1lx] .page--mobile .mobile-sidebar-scrim.e-btn {
        display: block;
    }

    .reporting-period-grid[b-4vet9za1lx] {
        grid-template-columns: 1fr;
    }

    .reporting-period-shell__actions[b-4vet9za1lx] {
        flex-direction: column;
    }

    [b-4vet9za1lx] .reporting-period-dialog.e-dialog,
[b-4vet9za1lx] .transaction-date-dialog.e-dialog,
[b-4vet9za1lx] .shell-alert-dialog.e-dialog {
        width: calc(100vw - 1.5rem) !important;
    }
}

@media (min-width: 641px) {
    .content-shell[b-4vet9za1lx] {
        padding: 1rem 1.35rem;
    }

    .app-footer[b-4vet9za1lx] {
        padding-inline: 0.75rem 0.9rem;
        grid-template-columns: repeat(6, minmax(110px, 1fr));
    }
}

@media (max-width: 1180px) {
    .page--sidebar-open .top-row[b-4vet9za1lx] {
        grid-template-columns: 1fr;
    }

    .page--sidebar-open .app-header__actions[b-4vet9za1lx] {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        flex: 1 1 100%;
    }

    .page--sidebar-open .app-user[b-4vet9za1lx] {
        justify-items: start;
    }
}









[b-4vet9za1lx] .session-dialog.e-dialog {
    max-width: min(960px, calc(100vw - 2rem));
}

.session-dialog__shell[b-4vet9za1lx] {
    display: grid;
    gap: 1rem;
}

[b-4vet9za1lx] .session-dialog__hero.e-message {
    border: none;
    border-radius: 20px;
    background: var(--shell-hero-background);
    color: var(--shell-text-inverse);
    box-shadow: none;
    padding: 1rem 1.05rem;
}

[b-4vet9za1lx] .session-dialog__hero .e-msg-content,
[b-4vet9za1lx] .session-dialog__hero .e-message-content {
    padding: 0;
}

.session-dialog__hero-content[b-4vet9za1lx] {
    display: grid;
    gap: 0.8rem;
}

[b-4vet9za1lx] .session-dialog__status-chip.e-chip-set {
    display: inline-flex;
    width: fit-content;
}

[b-4vet9za1lx] .session-dialog__status-chip .e-chip {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: var(--shell-text-inverse);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.28rem 0.72rem;
}

.session-dialog__hero-copy[b-4vet9za1lx] {
    display: grid;
    gap: 0.3rem;
}

.session-dialog__hero-copy h2[b-4vet9za1lx] {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.25rem);
    line-height: 1.05;
    color: var(--shell-text-inverse);
}

.session-dialog__hero-copy p[b-4vet9za1lx] {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
}

[b-4vet9za1lx] .session-dialog__chipset.e-chip-set {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

[b-4vet9za1lx] .session-dialog__chipset .e-chip {
    border-radius: 999px;
    background: var(--shell-pill-bg);
    color: var(--shell-pill-text);
    border: 1px solid color-mix(in srgb, var(--shell-pill-text) 14%, transparent);
    font-weight: 700;
    padding: 0.42rem 0.8rem;
}

.session-dialog__grid[b-4vet9za1lx] {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

[b-4vet9za1lx] .session-dialog__input {
    width: 100%;
}

[b-4vet9za1lx] .session-dialog__input.e-control-wrapper,
[b-4vet9za1lx] .session-dialog__input.e-control-wrapper.e-float-input,
[b-4vet9za1lx] .session-dialog__input.e-input-group,
[b-4vet9za1lx] .session-dialog__input.e-input-group.e-control-wrapper,
[b-4vet9za1lx] .session-dialog__input.e-float-input {
    border: 1px solid var(--shell-login-field-border);
    border-radius: 16px;
    box-shadow: none;
    background: var(--shell-login-field-background) !important;
}

[b-4vet9za1lx] .session-dialog__input input,
[b-4vet9za1lx] .session-dialog__input.e-control-wrapper input.e-input,
[b-4vet9za1lx] .session-dialog__input.e-control-wrapper.e-float-input input.e-input,
[b-4vet9za1lx] .session-dialog__input.e-input-group input.e-input,
[b-4vet9za1lx] .session-dialog__input.e-input-group.e-float-input input.e-input {
    min-height: 48px;
    padding: 0.8rem 1rem;
    font-size: 0.96rem;
    color: var(--shell-login-field-text) !important;
    -webkit-text-fill-color: var(--shell-login-field-text) !important;
    background: transparent !important;
}

[b-4vet9za1lx] .session-dialog__input .e-float-text,
[b-4vet9za1lx] .session-dialog__input label.e-float-text,
[b-4vet9za1lx] .session-dialog__input label.e-float-text.e-label-top {
    font-weight: 700;
    color: var(--shell-login-field-text-muted) !important;
}

.session-dialog__actions[b-4vet9za1lx] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

@media (max-width: 800px) {
    .session-dialog__grid[b-4vet9za1lx] {
        grid-template-columns: 1fr;
    }

    .session-dialog__actions[b-4vet9za1lx] {
        flex-direction: column;
    }
}
/* /Layout/MenuTreeNode.razor.rz.scp.css */
/* Every level is one column that may shrink to the sidebar (minmax(0, 1fr))
   and every row keeps its padding INSIDE its width (border-box), so a row is
   never wider than the panel - long labels end in an ellipsis. See NavMenu. */
.menu-tree-node[b-b865gtr7hm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
    min-width: 0;
}

[b-b865gtr7hm] .menu-tree-node__button.e-btn,
.menu-tree-node__link[b-b865gtr7hm] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.85rem;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    min-height: 3rem;
    padding: 0.8rem 0.95rem;
    border-radius: 16px;
    color: var(--shell-text-inverse);
    text-decoration: none;
    background: var(--shell-item-background);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

[b-b865gtr7hm] .menu-tree-node__button.e-btn {
    box-shadow: none;
    font: inherit;
    text-transform: none;
}

[b-b865gtr7hm] .menu-tree-node__button.e-btn:hover,
[b-b865gtr7hm] .menu-tree-node__button.e-btn:focus,
[b-b865gtr7hm] .menu-tree-node__button.e-btn.is-active,
.menu-tree-node__link:hover[b-b865gtr7hm],
.menu-tree-node__link:focus[b-b865gtr7hm],
.menu-tree-node__link.active[b-b865gtr7hm] {
    background: var(--shell-item-hover-background);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    transform: translateX(2px);
}

.menu-tree-node__link--disabled[b-b865gtr7hm] {
    opacity: 0.78;
    cursor: default;
}

.menu-tree-node__main[b-b865gtr7hm] {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.menu-tree-node__icon[b-b865gtr7hm] {
    width: 1rem;
    font-size: 1rem;
    text-align: center;
    color: var(--shell-text-muted-inverse);
    flex: 0 0 auto;
}

.menu-tree-node__text[b-b865gtr7hm] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
    text-align: left;
}

.menu-tree-node__caret[b-b865gtr7hm] {
    width: 0.65rem;
    height: 0.65rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.18s ease;
    opacity: 0.86;
    flex: 0 0 auto;
    margin-left: auto;
}

.menu-tree-node__caret.is-expanded[b-b865gtr7hm] {
    transform: rotate(45deg);
}

.menu-tree-node__children[b-b865gtr7hm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: 0.35rem;
    margin-left: 0.95rem;
    padding-left: 0.95rem;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.menu-tree-node__children[b-b865gtr7hm]  .menu-tree-node__button.e-btn,
.menu-tree-node__children .menu-tree-node__link[b-b865gtr7hm] {
    min-height: 2.7rem;
    padding-block: 0.65rem;
    border-radius: 14px;
    background: var(--shell-item-background-subtle);
}

.menu-tree-node__children .menu-tree-node__text[b-b865gtr7hm] {
    font-size: 0.92rem;
}
/* /Layout/NavMenu.razor.rz.scp.css */
.nav-shell[b-xrxg2ydv6s] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 1.15rem 0.85rem 1.5rem;
    background: transparent;
    color: var(--shell-text-inverse);
}

/* One column that may SHRINK to the panel (minmax(0, 1fr)), not one sized to
   the longest label - a grid's auto column grows to its widest child, which
   made "Customer Portal Administration" push the whole menu sideways. With
   the column capped, a long label ends in an ellipsis instead. */
.nav-shell__section[b-xrxg2ydv6s] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    min-width: 0;
}

.nav-shell__search[b-xrxg2ydv6s] {
    display: grid;
}

.nav-shell__header[b-xrxg2ydv6s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-shell__eyebrow[b-xrxg2ydv6s] {
    padding-inline: 0.25rem;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--shell-text-muted-inverse);
}

.nav-shell__refresh[b-xrxg2ydv6s] {
    background: transparent;
    border: none;
    color: var(--shell-text-muted-inverse);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1;
    transition: color 0.2s, background 0.2s;
}

.nav-shell__refresh:hover[b-xrxg2ydv6s] {
    color: var(--shell-text-inverse);
    background: rgba(255, 255, 255, 0.1);
}

.nav-shell__refresh:disabled[b-xrxg2ydv6s] {
    opacity: 0.4;
    cursor: not-allowed;
}

.nav-shell__links[b-xrxg2ydv6s],
.nav-shell__skeleton[b-xrxg2ydv6s] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    min-width: 0;
}

[b-xrxg2ydv6s] .nav-search {
    width: 100%;
}

[b-xrxg2ydv6s] .nav-search.e-control-wrapper,
[b-xrxg2ydv6s] .nav-search.e-control-wrapper.e-float-input,
[b-xrxg2ydv6s] .nav-search.e-input-group,
[b-xrxg2ydv6s] .nav-search.e-input-group.e-control-wrapper {
    border-radius: 14px;
}

[b-xrxg2ydv6s] .nav-search.e-control-wrapper input.e-input,
[b-xrxg2ydv6s] .nav-search.e-control-wrapper.e-float-input input.e-input,
[b-xrxg2ydv6s] .nav-search.e-input-group input.e-input,
[b-xrxg2ydv6s] .nav-search.e-input-group.e-control-wrapper input.e-input {
    min-height: 40px;
    padding: 0.65rem 0.8rem;
    font-size: 0.94rem;
}

.nav-shell__message[b-xrxg2ydv6s],
.nav-shell__error[b-xrxg2ydv6s] {
    padding: 0.9rem 1rem;
    border-radius: 16px;
    font-size: 0.92rem;
    line-height: 1.5;
}

.nav-shell__message[b-xrxg2ydv6s] {
    color: var(--shell-text-inverse);
    background: var(--shell-item-background);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-shell__error[b-xrxg2ydv6s] {
    color: #fff7f0;
    background: rgba(198, 98, 34, 0.2);
    border: 1px solid rgba(255, 209, 184, 0.2);
}

.nav-shell__skeleton span[b-xrxg2ydv6s] {
    display: block;
    height: 3rem;
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
    background-size: 220% 100%;
    animation: nav-shell-shimmer-b-xrxg2ydv6s 1.1s linear infinite;
}

@keyframes nav-shell-shimmer-b-xrxg2ydv6s {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -40% 0;
    }
}

@media (max-width: 640.98px) {
    .nav-shell[b-xrxg2ydv6s] {
        padding: 1rem 0.75rem 1.25rem;
    }
}

.nav-shell__message--subtle[b-xrxg2ydv6s] {
    background: var(--shell-item-background-subtle);
}

.nav-shell__profile[b-xrxg2ydv6s] {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.nav-shell__profile-link[b-xrxg2ydv6s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 14px;
    text-decoration: none;
    color: var(--shell-text-inverse);
    background: var(--shell-item-background-subtle);
    transition: background 0.18s ease;
}

.nav-shell__profile-link:hover[b-xrxg2ydv6s] {
    background: var(--shell-item-hover-background);
    color: #ffffff;
}

.nav-shell__profile-avatar[b-xrxg2ydv6s] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    font-size: 1rem;
    flex: 0 0 auto;
}

.nav-shell__profile-img[b-xrxg2ydv6s] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.nav-shell__profile-info[b-xrxg2ydv6s] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nav-shell__profile-name[b-xrxg2ydv6s] {
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-shell__profile-role[b-xrxg2ydv6s] {
    font-size: 0.78rem;
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* /Pages/Admin/BranchMasterPage.razor.rz.scp.css */
/* Branch master. Layout only - the controls themselves are styled by the
   shared prod-master / app-textbox rules so this page looks like every other
   master without restating any of it. */

.br-master__body[b-gph6embz71] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.br-master__form[b-gph6embz71] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-right: 0.35rem;
}

.br-detail[b-gph6embz71] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.br-sub[b-gph6embz71] {
    margin: 0.7rem 0 0.15rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.br-sub:first-child[b-gph6embz71] {
    margin-top: 0;
}

/* Fields flow into as many columns as fit. A field and its hint are one unit,
   so the hint can never end up under the wrong control. */
.br-grid[b-gph6embz71] {
    display: grid;
}

.br-field[b-gph6embz71] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.br-field--wide[b-gph6embz71] {
    grid-column: span 2;
}

@media (max-width: 700px) {
    .br-field--wide[b-gph6embz71] {
        grid-column: span 1;
    }
}

/* The live GST verdict, in the hint's own place. */
.br-hint--ok[b-gph6embz71] {
    color: var(--shell-success-text, var(--shell-text-secondary));
}

.br-hint--bad[b-gph6embz71] {
    color: var(--shell-error-text, var(--shell-text-primary));
}

.br-pill[b-gph6embz71] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: var(--shell-pill-bg);
    color: var(--shell-pill-text);
    font-size: 0.76rem;
    font-weight: 700;
}

@media (max-width: 900px) {
    .br-master__body[b-gph6embz71] {
        flex-direction: column;
    }
}

/* ── Neatness pass (2026-08-29) ─────────────────────────────────────────────
   Three things were wrong with the flat layout: nothing grouped the sections,
   so the eye had no structure to hold; the hints varied from one line to three
   and made every row a different height, so nothing lined up; and on a wide
   screen the fields stretched the full width of the window, which reads as
   sprawl rather than as a form.

   The GRID itself becomes the card - a wrapper element would have meant
   restructuring the markup of three pages for a border. */
.br-grid[b-gph6embz71] {
    padding: 0.95rem 1.05rem 1.05rem;
    border: 1px solid var(--shell-border);
    border-radius: 16px;
    background: var(--shell-panel-background-soft);
    box-shadow: var(--shell-shadow);
    /* Fields stop growing at a readable width; the row fills from the left
       rather than stretching four inputs across a 1900px monitor. */
    grid-template-columns: repeat(auto-fit, minmax(230px, 330px));
    justify-content: start;
    gap: 0.85rem 1.1rem;
}

.br-sub[b-gph6embz71] {
    margin: 1.05rem 0 0.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--shell-text-secondary);
}

.br-sub:first-child[b-gph6embz71] {
    margin-top: 0;
}

/* Two lines of hint are reserved on every field, so the controls in a row sit
   on the same baseline whether their hint is one line or two. */
.br-field .app-field-hint[b-gph6embz71] {
    min-height: 2.05rem;
}

/* A switch is a field like any other: same box, same height, label left and
   the toggle hard against the right edge (the app-wide switch rule). */
.br-field.prod-master__switch[b-gph6embz71] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.25rem 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--shell-field-border);
    border-radius: 14px;
    background: var(--shell-contrast-surface-bg);
    align-self: start;
}

.br-field.prod-master__switch > label[b-gph6embz71] {
    grid-column: 1;
    color: var(--shell-contrast-surface-text);
}

.br-field.prod-master__switch .app-field-hint[b-gph6embz71] {
    grid-column: 1 / -1;
    min-height: 0;
}

/* /Pages/Admin/CompanyManagementPage.razor.rz.scp.css */
/* Company Management hub. Every colour is a --shell-* token: the page is
   rendered in whichever theme the user picked, and a literal here would be
   readable in exactly one of them. */

.cm-page__body[b-gz6fh2e68q] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.cm-page__main[b-gz6fh2e68q] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding-right: 0.35rem;
}

.cm-section-head[b-gz6fh2e68q] {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

/* Cards size themselves; three across on a wide screen, one on a narrow one,
   without a breakpoint per layout. */
.cm-cards[b-gz6fh2e68q] {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.cm-card[b-gz6fh2e68q] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.05rem 1.1rem;
    border: 1px solid var(--shell-border);
    border-radius: 18px;
    background: var(--shell-panel-background-soft);
    box-shadow: var(--shell-shadow);
}

.cm-card__top[b-gz6fh2e68q] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.cm-card__icon[b-gz6fh2e68q] {
    font-size: 1.5rem;
    line-height: 1;
    flex: 0 0 auto;
}

.cm-card__top h3[b-gz6fh2e68q] {
    margin: 0 0 0.2rem;
    font-size: 1.02rem;
    color: var(--shell-text-primary);
}

.cm-card__top p[b-gz6fh2e68q] {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.35;
    color: var(--shell-text-secondary);
}

/* Facts read as a row of labelled figures, not a paragraph. */
.cm-card__facts[b-gz6fh2e68q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.4rem;
    margin: 0;
}

.cm-card__facts > div[b-gz6fh2e68q] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.cm-card__facts dt[b-gz6fh2e68q] {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--shell-text-muted, var(--shell-text-secondary));
}

.cm-card__facts dd[b-gz6fh2e68q] {
    margin: 0;
    font-weight: 600;
    color: var(--shell-text-primary);
    overflow-wrap: anywhere;
}

.cm-card__note[b-gz6fh2e68q] {
    margin: 0;
    font-size: 0.83rem;
    line-height: 1.4;
    color: var(--shell-text-secondary);
}

.cm-card__note--warn[b-gz6fh2e68q] {
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    border: 1px solid var(--shell-warning-border, var(--shell-border));
    background: var(--shell-warning-bg, var(--shell-panel-background-soft));
    color: var(--shell-warning-text, var(--shell-text-primary));
}

/* Buttons sit at the bottom of the card whatever the note length above, so a
   row of cards has its actions on one line. */
.cm-card__actions[b-gz6fh2e68q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.2rem;
}

/* ── Subscription panel ── */
.cm-licence[b-gz6fh2e68q] {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    padding: 1.05rem 1.1rem;
    border: 1px solid var(--shell-border);
    border-radius: 18px;
    background: var(--shell-panel-background-soft);
    box-shadow: var(--shell-shadow);
}

.cm-licence__figures[b-gz6fh2e68q] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    align-content: start;
}

.cm-figure[b-gz6fh2e68q] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding: 0.7rem 0.8rem;
    border-radius: 14px;
    border: 1px solid var(--shell-border);
    background: var(--shell-contrast-surface-bg, transparent);
}

.cm-figure span[b-gz6fh2e68q] {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.cm-figure strong[b-gz6fh2e68q] {
    font-size: 1.18rem;
    color: var(--shell-text-primary);
    font-variant-numeric: tabular-nums;
}

.cm-figure small[b-gz6fh2e68q] {
    font-size: 0.74rem;
    color: var(--shell-text-secondary);
}

.cm-licence__label[b-gz6fh2e68q] {
    margin: 0 0 0.45rem;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.cm-chips[b-gz6fh2e68q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.cm-chip[b-gz6fh2e68q] {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--shell-border);
    background: var(--shell-pill-bg);
    color: var(--shell-pill-text);
    font-size: 0.78rem;
    font-weight: 600;
}

.cm-mono[b-gz6fh2e68q] {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .cm-page__body[b-gz6fh2e68q] {
        flex-direction: column;
    }

    .cm-licence[b-gz6fh2e68q] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Admin/DivisionMasterPage.razor.rz.scp.css */
/* Division master - layout only; the controls come from the shared master
   styles so this page matches every other one without restating them. */

.dv-master__body[b-g2jt7bjlky] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.dv-master__form[b-g2jt7bjlky] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-right: 0.35rem;
}

.dv-grid[b-g2jt7bjlky] {
    display: grid;
}

.dv-field[b-g2jt7bjlky] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.dv-field--wide[b-g2jt7bjlky] {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .dv-master__body[b-g2jt7bjlky] {
        flex-direction: column;
    }
}

/* ── Neatness pass (2026-08-29) ─────────────────────────────────────────────
   Three things were wrong with the flat layout: nothing grouped the sections,
   so the eye had no structure to hold; the hints varied from one line to three
   and made every row a different height, so nothing lined up; and on a wide
   screen the fields stretched the full width of the window, which reads as
   sprawl rather than as a form.

   The GRID itself becomes the card - a wrapper element would have meant
   restructuring the markup of three pages for a border. */
.dv-grid[b-g2jt7bjlky] {
    padding: 0.95rem 1.05rem 1.05rem;
    border: 1px solid var(--shell-border);
    border-radius: 16px;
    background: var(--shell-panel-background-soft);
    box-shadow: var(--shell-shadow);
    /* Fields stop growing at a readable width; the row fills from the left
       rather than stretching four inputs across a 1900px monitor. */
    grid-template-columns: repeat(auto-fit, minmax(230px, 330px));
    justify-content: start;
    gap: 0.85rem 1.1rem;
}

.dv-sub[b-g2jt7bjlky] {
    margin: 1.05rem 0 0.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--shell-text-secondary);
}

.dv-sub:first-child[b-g2jt7bjlky] {
    margin-top: 0;
}

/* Two lines of hint are reserved on every field, so the controls in a row sit
   on the same baseline whether their hint is one line or two. */
.dv-field .app-field-hint[b-g2jt7bjlky] {
    min-height: 2.05rem;
}

/* A switch is a field like any other: same box, same height, label left and
   the toggle hard against the right edge (the app-wide switch rule). */
.dv-field.prod-master__switch[b-g2jt7bjlky] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.25rem 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--shell-field-border);
    border-radius: 14px;
    background: var(--shell-contrast-surface-bg);
    align-self: start;
}

.dv-field.prod-master__switch > label[b-g2jt7bjlky] {
    grid-column: 1;
    color: var(--shell-contrast-surface-text);
}

.dv-field.prod-master__switch .app-field-hint[b-g2jt7bjlky] {
    grid-column: 1 / -1;
    min-height: 0;
}

/* /Pages/Admin/GroupCompanyMasterPage.razor.rz.scp.css */
/* Group company master - layout only. */

.gc-master__body[b-umyot9c014] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.gc-master__form[b-umyot9c014] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-right: 0.35rem;
}

.gc-detail[b-umyot9c014] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.gc-sub[b-umyot9c014] {
    margin: 0.7rem 0 0.15rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.gc-sub:first-child[b-umyot9c014] {
    margin-top: 0;
}

.gc-grid[b-umyot9c014] {
    display: grid;
}

.gc-field[b-umyot9c014] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.gc-field--wide[b-umyot9c014] {
    grid-column: span 2;
}

@media (max-width: 700px) {
    .gc-field--wide[b-umyot9c014] {
        grid-column: span 1;
    }
}

/* The child grid's heading keeps its Add button on the same line. */
.gc-branches-head[b-umyot9c014] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.7rem;
}

.gc-hint--ok[b-umyot9c014] {
    color: var(--shell-success-text, var(--shell-text-secondary));
}

.gc-hint--bad[b-umyot9c014] {
    color: var(--shell-error-text, var(--shell-text-primary));
}

/* The row's delete button is an icon, so it does not need button width. */
[b-umyot9c014] .gc-row-remove.e-btn {
    min-width: 2.1rem;
    padding-inline: 0.5rem;
}

@media (max-width: 900px) {
    .gc-master__body[b-umyot9c014] {
        flex-direction: column;
    }
}

/* ── Neatness pass (2026-08-29) ─────────────────────────────────────────────
   Three things were wrong with the flat layout: nothing grouped the sections,
   so the eye had no structure to hold; the hints varied from one line to three
   and made every row a different height, so nothing lined up; and on a wide
   screen the fields stretched the full width of the window, which reads as
   sprawl rather than as a form.

   The GRID itself becomes the card - a wrapper element would have meant
   restructuring the markup of three pages for a border. */
.gc-grid[b-umyot9c014] {
    padding: 0.95rem 1.05rem 1.05rem;
    border: 1px solid var(--shell-border);
    border-radius: 16px;
    background: var(--shell-panel-background-soft);
    box-shadow: var(--shell-shadow);
    /* Fields stop growing at a readable width; the row fills from the left
       rather than stretching four inputs across a 1900px monitor. */
    grid-template-columns: repeat(auto-fit, minmax(230px, 330px));
    justify-content: start;
    gap: 0.85rem 1.1rem;
}

.gc-sub[b-umyot9c014] {
    margin: 1.05rem 0 0.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--shell-text-secondary);
}

.gc-sub:first-child[b-umyot9c014] {
    margin-top: 0;
}

/* Two lines of hint are reserved on every field, so the controls in a row sit
   on the same baseline whether their hint is one line or two. */
.gc-field .app-field-hint[b-umyot9c014] {
    min-height: 2.05rem;
}

/* A switch is a field like any other: same box, same height, label left and
   the toggle hard against the right edge (the app-wide switch rule). */
.gc-field.prod-master__switch[b-umyot9c014] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.25rem 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--shell-field-border);
    border-radius: 14px;
    background: var(--shell-contrast-surface-bg);
    align-self: start;
}

.gc-field.prod-master__switch > label[b-umyot9c014] {
    grid-column: 1;
    color: var(--shell-contrast-surface-text);
}

.gc-field.prod-master__switch .app-field-hint[b-umyot9c014] {
    grid-column: 1 / -1;
    min-height: 0;
}

/* /Pages/Admin/LegalDocPage.razor.rz.scp.css */
/* The published legal document - reached from the sign-in screen, so it
   shares that screen's quiet centered-card look (tokens only: the page
   renders in whichever theme the visitor's browser holds). */

.ld-page[b-5fdtfno4k1] {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 2.5rem 1rem;
    background: var(--shell-body-background);
    color: var(--shell-text-primary);
}

.ld-card[b-5fdtfno4k1] {
    width: min(860px, 100%);
    background: var(--shell-panel-background);
    border: 1px solid var(--shell-border);
    border-radius: 14px;
    overflow: hidden;
    align-self: flex-start;
}

.ld-card__header[b-5fdtfno4k1] {
    padding: 1.4rem 1.75rem 1.1rem;
    border-bottom: 1px solid var(--shell-border);
}

.ld-card__brand[b-5fdtfno4k1] {
    font-size: 0.9rem;
    font-weight: 700;
    opacity: 0.85;
}

.ld-card__version[b-5fdtfno4k1] {
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.9;
}

.ld-card__title[b-5fdtfno4k1] {
    margin: 0.35rem 0 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.ld-card__body[b-5fdtfno4k1] {
    padding: 1.4rem 1.75rem 1.75rem;
    line-height: 1.6;
}

.ld-meta[b-5fdtfno4k1] {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--shell-text-secondary);
}

.ld-muted[b-5fdtfno4k1] {
    color: var(--shell-text-secondary);
}

.ld-section[b-5fdtfno4k1] {
    margin-top: 1.4rem;
}

.ld-section h2[b-5fdtfno4k1] {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.ld-section ul[b-5fdtfno4k1] {
    margin: 0.4rem 0 0.8rem 1.2rem;
    padding: 0;
}

.ld-section li[b-5fdtfno4k1] {
    margin-bottom: 0.3rem;
}

.ld-actions[b-5fdtfno4k1] {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.ld-about[b-5fdtfno4k1] {
    font-size: 0.9rem;
    color: var(--shell-button-primary);
}
/* /Pages/Admin/LoginPage.razor.rz.scp.css */
.login-page[b-dipztty511] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--shell-page-background);
}

.login-card[b-dipztty511] {
    width: min(100%, 470px);
    background: var(--shell-panel-background);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--shell-border);
    box-shadow: var(--shell-shadow-strong);
}

.login-card__header[b-dipztty511] {
    padding: 1.1rem 1.5rem 1rem;
    text-align: center;
    background: var(--shell-hero-background);
    color: var(--shell-text-inverse);
}

.login-card__welcome[b-dipztty511] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.login-card__body[b-dipztty511] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.75rem;
}

.field[b-dipztty511] {
    display: flex;
    flex-direction: column;
}

[b-dipztty511] .field__input {
    width: 100%;
}

[b-dipztty511] .field__input.e-control-wrapper,
[b-dipztty511] .field__input.e-control-wrapper.e-float-input,
[b-dipztty511] .field__input.e-input-group,
[b-dipztty511] .field__input.e-input-group.e-control-wrapper,
[b-dipztty511] .field__input.e-float-input {
    border: 1px solid var(--shell-login-field-border);
    border-radius: 12px;
    box-shadow: none;
    background: var(--shell-login-field-background) !important;
}

[b-dipztty511] .field__input.e-control-wrapper.e-float-input::before,
[b-dipztty511] .field__input.e-control-wrapper.e-float-input::after,
[b-dipztty511] .field__input.e-input-group.e-float-input::before,
[b-dipztty511] .field__input.e-input-group.e-float-input::after {
    background: transparent;
}

[b-dipztty511] .field__input input,
[b-dipztty511] .field__input.e-control-wrapper input.e-input,
[b-dipztty511] .field__input.e-control-wrapper.e-float-input input.e-input,
[b-dipztty511] .field__input.e-input-group input.e-input,
[b-dipztty511] .field__input.e-input-group.e-float-input input.e-input {
    min-height: 46px;
    padding: 0.75rem 0.85rem;
    font-size: 1rem;
    color: var(--shell-login-field-text) !important;
    -webkit-text-fill-color: var(--shell-login-field-text) !important;
    caret-color: var(--shell-login-field-text);
    background: transparent !important;
}

[b-dipztty511] .field__input input::placeholder,
[b-dipztty511] .field__input.e-control-wrapper input.e-input::placeholder,
[b-dipztty511] .field__input.e-control-wrapper.e-float-input input.e-input::placeholder,
[b-dipztty511] .field__input.e-input-group input.e-input::placeholder,
[b-dipztty511] .field__input.e-input-group.e-float-input input.e-input::placeholder {
    color: var(--shell-login-field-text-muted) !important;
    opacity: 1;
}

[b-dipztty511] .field__input.e-control-wrapper.e-float-input label.e-float-text,
[b-dipztty511] .field__input.e-input-group.e-float-input label.e-float-text,
[b-dipztty511] .field__input.e-control-wrapper.e-float-input label.e-float-text.e-label-top,
[b-dipztty511] .field__input.e-input-group.e-float-input label.e-float-text.e-label-top,
[b-dipztty511] .field__input.e-control-wrapper.e-float-input.e-input-focus label.e-float-text,
[b-dipztty511] .field__input.e-input-group.e-float-input.e-input-focus label.e-float-text,
[b-dipztty511] .field__input.e-control-wrapper.e-float-input.e-valid-input label.e-float-text,
[b-dipztty511] .field__input.e-input-group.e-float-input.e-valid-input label.e-float-text {
    color: var(--shell-text-inverse) !important;
    font-weight: 700;
}

[b-dipztty511] .field__input.e-control-wrapper.e-float-input input.e-input:-webkit-autofill,
[b-dipztty511] .field__input.e-input-group.e-float-input input.e-input:-webkit-autofill,
[b-dipztty511] .field__input.e-control-wrapper.e-float-input input.e-input:-webkit-autofill:hover,
[b-dipztty511] .field__input.e-input-group.e-float-input input.e-input:-webkit-autofill:hover,
[b-dipztty511] .field__input.e-control-wrapper.e-float-input input.e-input:-webkit-autofill:focus,
[b-dipztty511] .field__input.e-input-group.e-float-input input.e-input:-webkit-autofill:focus,
[b-dipztty511] .field__input.e-control-wrapper input.e-input:-webkit-autofill,
[b-dipztty511] .field__input.e-input-group input.e-input:-webkit-autofill,
[b-dipztty511] .field__input.e-control-wrapper input.e-input:-webkit-autofill:hover,
[b-dipztty511] .field__input.e-input-group input.e-input:-webkit-autofill:hover,
[b-dipztty511] .field__input.e-control-wrapper input.e-input:-webkit-autofill:focus,
[b-dipztty511] .field__input.e-input-group input.e-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--shell-login-field-text) !important;
    caret-color: var(--shell-login-field-text);
    box-shadow: 0 0 0 1000px var(--shell-login-field-background) inset !important;
    border-radius: 12px;
}

[b-dipztty511] .field__input .e-float-text {
    font-weight: 600;
    color: var(--shell-login-field-text-muted);
}

.remember-row[b-dipztty511] {
    display: flex;
    align-items: center;
}

[b-dipztty511] .remember-checkbox.e-checkbox-wrapper {
    color: var(--shell-text-primary);
    font-weight: 600;
}

[b-dipztty511] .login-button.e-btn {
    min-height: 46px;
    border: none;
    border-radius: 12px;
    background: var(--shell-button-primary);
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
}

[b-dipztty511] .login-button.e-btn:hover,
[b-dipztty511] .login-button.e-btn:focus {
    background: var(--shell-button-primary-hover);
    color: #ffffff;
}

[b-dipztty511] .login-button.e-btn:disabled {
    background: #bcbcbc;
    color: #ffffff;
}

[b-dipztty511] .settings-link.e-btn {
    align-self: center;
    border: none;
    background: transparent;
    color: var(--shell-button-primary);
    font-weight: 700;
    text-decoration: underline;
    box-shadow: none;
    padding-inline: 0;
}

[b-dipztty511] .settings-link.e-btn:hover,
[b-dipztty511] .settings-link.e-btn:focus {
    background: transparent;
    color: var(--shell-button-primary-hover);
}

/* ── Forgot password ──
   Sits inside the card under the link that opens it; quiet panel, one
   input, one button. The message line shows the API's generic answer,
   which doubles as the success state - there is no other confirmation. */
.forgot-panel[b-dipztty511] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem;
    border: 1px solid var(--shell-border);
    border-radius: 10px;
    background: var(--shell-panel-background);
}

.forgot-panel__text[b-dipztty511] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--shell-text-secondary);
}

.forgot-panel__message[b-dipztty511] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--shell-text-primary);
}

[b-dipztty511] .forgot-panel__send.e-btn {
    align-self: flex-end;
}

.login-card__footer[b-dipztty511] {
    padding: 0 1.75rem 1.5rem;
    text-align: center;
}

.footer-link[b-dipztty511] {
    color: var(--shell-text-secondary);
    text-decoration: none;
}

.footer-link:hover[b-dipztty511],
.footer-link:focus[b-dipztty511] {
    color: var(--shell-button-primary);
    text-decoration: underline;
}

.footer-link--brand[b-dipztty511] {
    color: inherit;
    font-weight: inherit;
}

.footer-links[b-dipztty511] {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.footer-links__sep[b-dipztty511] {
    color: var(--shell-text-secondary);
}

/* ── The firm's user-terms acceptance dialog ──
   Same shape as company selection's licence-terms dialog: the document
   scrolls INSIDE the dialog so the Accept row stays in view. ::deep because
   the content renders inside SfDialog's own tree. */
[b-dipztty511] .terms-accept__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    min-height: 0;
}

[b-dipztty511] .terms-accept__meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--shell-text-secondary);
}

[b-dipztty511] .terms-accept__scroll {
    flex: 1;
    min-height: 12rem;
    overflow-y: auto;
    border: 1px solid var(--shell-border);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    line-height: 1.55;
    background: var(--shell-panel-background);
}

[b-dipztty511] .terms-accept__scroll h3 {
    font-size: 1rem;
    margin: 1rem 0 0.4rem;
}

[b-dipztty511] .terms-accept__scroll ul {
    margin: 0.3rem 0 0.7rem 1.2rem;
    padding: 0;
}

[b-dipztty511] .terms-accept__error {
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    background: var(--shell-error-bg);
    color: var(--shell-error-text);
    border: 1px solid var(--shell-error-border);
}

[b-dipztty511] .terms-accept__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.login-card__footer p[b-dipztty511] {
    margin: 0;
    color: var(--shell-text-secondary);
    font-weight: 600;
}

.login-card__footer strong[b-dipztty511] {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.05rem;
    color: var(--shell-text-primary);
}

[b-dipztty511] .login-message.e-message {
    border-radius: 12px;
}

[b-dipztty511] .login-message--error.e-message {
    border: 1px solid var(--shell-error-border);
    background: var(--shell-error-bg);
    color: var(--shell-error-text);
}

[b-dipztty511] .login-message--error.e-message .e-msg-content,
[b-dipztty511] .login-message--error.e-message .e-message-content,
[b-dipztty511] .login-message--error.e-message .e-msg-icon,
[b-dipztty511] .login-message--error.e-message .e-message-icon {
    color: var(--shell-error-text);
}

.busy-overlay[b-dipztty511] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 15, 28, 0.46);
}

[b-dipztty511] .busy-indicator.e-spin-overlay {
    position: static;
    min-width: 200px;
    padding: 1rem 1.2rem;
    border-radius: 20px;
    background: var(--shell-footer-background);
    box-shadow: var(--shell-shadow-strong);
    opacity: 1;
}

[b-dipztty511] .busy-indicator.e-spin-overlay .e-spinner-pane {
    position: static;
    inset: auto;
}

[b-dipztty511] .busy-indicator.e-spin-overlay .e-spinner-inner {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    transform: none;
    color: var(--shell-text-inverse);
}

[b-dipztty511] .busy-indicator.e-spin-overlay .e-spin-label {
    color: var(--shell-text-inverse);
    font-weight: 700;
}

@keyframes spin-b-dipztty511 {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 575.98px) {
    .login-page[b-dipztty511] {
        padding: 1rem;
    }

    .login-card__body[b-dipztty511] {
        padding: 1.25rem;
    }
}

/* The getting-started link above the legal links. */
.login-guide[b-dipztty511] {
    margin: 0.35rem 0 0.25rem;
    font-size: 0.88rem;
}
.footer-link--guide[b-dipztty511] { font-weight: 700; }
/* /Pages/Admin/NotificationLogPage.razor.rz.scp.css */
/* Notification Log — scoped styles. Reuses the master shell (master-page /
   master-shell / master-sticky-top / master-body) and the help dock; only the
   filter strip, the pager, the status chips and the detail panel are local.

   Colours come from the --shell-* tokens, never literals, so the screen keeps
   working in dark mode — the one exception is the two grid ROW tints, which
   repeat the exact values used app-wide for inactive/cancelled rows so this
   grid and the F2 picker read identically. */

.nlg-page__body[b-zgqzwpgn8x] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.nlg-page__main[b-zgqzwpgn8x] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: auto !important;
    padding-bottom: 0.35rem;
}

.nlg-toolbar__note[b-zgqzwpgn8x] {
    margin-left: auto;
    font-size: 0.76rem;
    color: var(--shell-text-secondary);
}

/* ── Header strip: three counters and the two output buttons, ONE LINE ─────
   The global .prod-master__header-meta is a two-column grid capped at 260px,
   which is exactly right for the two cards the convention assumes and exactly
   wrong for three plus buttons — it folded them onto a second row. Here the
   strip is a single non-wrapping flex row: the TILES shrink (min-width 0), the
   buttons keep their size, and if a window is genuinely too narrow for the lot
   the strip scrolls sideways INSIDE ITSELF. The app's rule is that wide content
   scrolls in its own box; the page itself never scrolls horizontally, and this
   row never wraps. */

/* The title block must be allowed to give way, or it squeezes the strip
   before the strip can shrink. */
.nlg-page .prod-master__header > div:first-child[b-zgqzwpgn8x] { min-width: 0; }

.nlg-page .prod-master__header-meta.nlg-headstrip[b-zgqzwpgn8x] {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.5rem;
    width: auto;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    /* Room for the horizontal scrollbar when it appears, so it can never sit
       on top of the tiles' figures. */
    padding-bottom: 0.15rem;
    scrollbar-width: thin;
}

.nlg-page .nlg-headstrip .prod-master__meta-card[b-zgqzwpgn8x] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0.7rem;
    white-space: nowrap;
}

.nlg-page .nlg-headstrip .prod-master__meta-card span[b-zgqzwpgn8x] {
    font-size: 0.62rem;
    letter-spacing: 0.07em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nlg-page .nlg-headstrip .prod-master__meta-card strong[b-zgqzwpgn8x] { font-size: 1.05rem; }

/* Narrow windows: the header itself stacks (global rule at 760px), so the
   strip takes the full width — still one row, still scrolling rather than
   wrapping if it must. */
@media (max-width: 760px) {
    .nlg-page .prod-master__header-meta.nlg-headstrip[b-zgqzwpgn8x] { width: 100%; }
}

/* ── Print ────────────────────────────────────────────────────────────────
   Print takes THIS element's markup and nothing else (see PrintAsync), so the
   filter strip, the pager and the detail panel are excluded by where they sit
   rather than by a rule that could rot. display:contents keeps the wrapper out
   of the layout entirely — it exists only to be an id the printer can find. */
.nlg-print-region[b-zgqzwpgn8x] { display: contents; }

/* What is left inside the grid that is chrome rather than data: the header
   filter funnels and sort arrows mean nothing on paper. */
@media print {
    .nlg-print-region[b-zgqzwpgn8x]  .e-filtermenudiv,
    .nlg-print-region[b-zgqzwpgn8x]  .e-sortfilterdiv,
    .nlg-print-region[b-zgqzwpgn8x]  .e-checkboxfiltertext { display: none !important; }
}

/* ── Filters ─────────────────────────────────────────────────────────────── */

.nlg-filters[b-zgqzwpgn8x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.6rem 0.9rem;
    align-items: start;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.6rem;
    border: 1px solid var(--shell-border);
    border-radius: 8px;
    background: var(--shell-panel-background-soft);
}

.nlg-field[b-zgqzwpgn8x] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nlg-field--wide[b-zgqzwpgn8x] { grid-column: span 2; }
.nlg-field--narrow[b-zgqzwpgn8x] { max-width: 190px; }

@media (max-width: 900px) {
    .nlg-field--wide[b-zgqzwpgn8x] { grid-column: span 1; }
}

/* Rows-per-page is a number, and every numeric input in this application is
   right-aligned. */
.nlg-field[b-zgqzwpgn8x]  .nlg-numeric input { text-align: right; }

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

/* CONVENTION: a data grid keeps a visible body even with no rows, so an empty
   result reads as "nothing matched" and not as a broken page. */
.nlg-grid[b-zgqzwpgn8x] {
    min-height: 220px;
    margin-bottom: 0.5rem;
}

.nlg-grid[b-zgqzwpgn8x]  .e-row { cursor: pointer; }

/* Status row tints — same values as the app-wide lookup tints in app.css.
   Red = it was attempted and refused. Orange = nothing was ever sent.
   A Sent row is deliberately left alone: colouring the normal case is how a
   colour stops meaning anything. Selected cells keep the selection highlight. */
.nlg-grid[b-zgqzwpgn8x]  .e-row.nlg-row--failed .e-rowcell:not(.e-active) {
    background: #ffd2d2;
}

.nlg-grid[b-zgqzwpgn8x]  .e-row.nlg-row--skipped .e-rowcell:not(.e-active) {
    background: #ffe3c2;
}

/* The tints are literal light shades, so the text on them must be dark
   whatever the theme — otherwise a dark theme paints light text on them. */
.nlg-grid[b-zgqzwpgn8x]  .e-row.nlg-row--failed .e-rowcell:not(.e-active),
.nlg-grid[b-zgqzwpgn8x]  .e-row.nlg-row--skipped .e-rowcell:not(.e-active) {
    color: #21252b;
}

/* ── Chips ───────────────────────────────────────────────────────────────── */

.nlg-chip[b-zgqzwpgn8x] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid transparent;
}

.nlg-chip--sent[b-zgqzwpgn8x] {
    background: var(--shell-status-ok-bg);
    border-color: var(--shell-status-ok-border);
    color: var(--shell-status-ok-text);
}

.nlg-chip--failed[b-zgqzwpgn8x] {
    background: var(--shell-status-error-bg);
    border-color: var(--shell-status-error-border);
    color: var(--shell-status-error-text);
}

.nlg-chip--skipped[b-zgqzwpgn8x] {
    background: var(--shell-status-warn-bg);
    border-color: var(--shell-status-warn-border);
    color: var(--shell-status-warn-text);
}

.nlg-chip--queued[b-zgqzwpgn8x] {
    background: var(--shell-status-info-bg);
    border-color: var(--shell-status-info-border);
    color: var(--shell-status-info-text);
}

/* ── Pager ───────────────────────────────────────────────────────────────── */

.nlg-pager[b-zgqzwpgn8x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    padding: 0.45rem 0.2rem 0.7rem;
    font-size: 0.78rem;
    color: var(--shell-text-secondary);
    border-bottom: 1px solid var(--shell-border);
}

.nlg-pager__buttons[b-zgqzwpgn8x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nlg-pager__page[b-zgqzwpgn8x] {
    min-width: 8rem;
    text-align: center;
    font-weight: 600;
    color: var(--shell-text-primary);
}

.nlg-pager__total[b-zgqzwpgn8x] { margin-left: auto; }

/* ── Empty / refusal ─────────────────────────────────────────────────────── */

.nlg-empty[b-zgqzwpgn8x] {
    margin: 0.5rem 0 0.7rem;
    padding: 0.7rem 0.9rem;
    max-width: 80ch;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--shell-text-secondary);
    border: 1px dashed var(--shell-border-strong);
    border-radius: 8px;
    background: var(--shell-panel-background-soft);
}

.nlg-empty code[b-zgqzwpgn8x] {
    font-size: 0.78rem;
    padding: 0 0.25rem;
    border-radius: 4px;
    background: var(--shell-pill-bg);
    color: var(--shell-pill-text);
}

.nlg-denied[b-zgqzwpgn8x] {
    max-width: 58ch;
    margin: 1.5rem auto;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid var(--shell-border);
    border-radius: 10px;
    background: var(--shell-panel-background);
}

.nlg-denied__icon[b-zgqzwpgn8x] { font-size: 2rem; }
.nlg-denied h2[b-zgqzwpgn8x] { margin: 0.5rem 0; font-size: 1.05rem; font-weight: 600; }
.nlg-denied p[b-zgqzwpgn8x] { margin: 0.4rem 0; font-size: 0.85rem; color: var(--shell-text-secondary); }

/* ── Detail panel ────────────────────────────────────────────────────────── */

.nlg-detail[b-zgqzwpgn8x] {
    margin-top: 0.8rem;
    padding: 0.9rem 1rem 1rem;
    border: 1px solid var(--shell-border);
    border-radius: 8px;
    background: var(--shell-panel-background);
}

.nlg-detail__head[b-zgqzwpgn8x] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.nlg-detail__head h2[b-zgqzwpgn8x] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--shell-text-primary);
}

/* The detail panel's own buttons - Resend this message, and Close. They wrap
   under the heading on a narrow window rather than squeezing it. */
.nlg-detail__actions[b-zgqzwpgn8x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: flex-start;
}

.nlg-detail__sub[b-zgqzwpgn8x] {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    color: var(--shell-text-secondary);
}

.nlg-detail__plain[b-zgqzwpgn8x] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--shell-text-secondary);
}

.nlg-detail__facts[b-zgqzwpgn8x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.5rem 1rem;
    margin: 0.85rem 0 0.4rem;
}

.nlg-detail__facts > div[b-zgqzwpgn8x] { min-width: 0; }

.nlg-detail__facts dt[b-zgqzwpgn8x] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--shell-text-secondary);
}

.nlg-detail__facts dd[b-zgqzwpgn8x] {
    margin: 0.1rem 0 0;
    font-size: 0.82rem;
    color: var(--shell-text-primary);
    overflow-wrap: anywhere;
}

.nlg-block[b-zgqzwpgn8x] { margin-top: 0.85rem; }

.nlg-block h3[b-zgqzwpgn8x] {
    margin: 0 0 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--shell-text-secondary);
}

/* The long text: SELECTABLE and SCROLLABLE, never truncated. Somebody reading
   this panel is about to paste the failure into a support ticket, so the whole
   thing has to be reachable and copyable. */
.nlg-text[b-zgqzwpgn8x] {
    margin: 0;
    max-height: 16rem;
    overflow: auto;
    padding: 0.6rem 0.7rem;
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: 0.76rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    user-select: text;
    color: var(--shell-text-primary);
    border: 1px solid var(--shell-border);
    border-radius: 6px;
    background: var(--shell-panel-background-soft);
}

.nlg-text--short[b-zgqzwpgn8x] { max-height: 6rem; }

.nlg-block--error .nlg-text[b-zgqzwpgn8x] {
    border-color: var(--shell-status-error-border);
    background: var(--shell-status-error-bg);
    color: var(--shell-status-error-text);
}

.nlg-block--warn .nlg-text[b-zgqzwpgn8x] {
    border-color: var(--shell-status-warn-border);
    background: var(--shell-status-warn-bg);
    color: var(--shell-status-warn-text);
}

/* The summary tiles keep the whole strip on ONE line on their own now that
   Print/Export moved to the toolbar - tiles shrink and ellipsize first, and
   the strip scrolls sideways rather than wrapping (wide content scrolls in
   its own box, never the page). */

/* /Pages/Admin/SetPasswordPage.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════
   The set-password page.

   IT HAS ITS OWN CSS BECAUSE BLAZOR SCOPES IT. The sign-in page's .login-card
   and friends live in LoginPage.razor.css and only ever apply to LoginPage's
   own markup - reusing the class names here produced a page with no card at
   all, fields running the full width of the screen. Same design language,
   written where this component can use it.

   Tokens only, so both themes work: the viewer's appearance is stamped on
   the root element and a literal colour here would follow only one of them.
   ════════════════════════════════════════════════════════════════════════ */

.sp-page[b-5e1m2a4yci] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--shell-page-background);
}

.sp-card[b-5e1m2a4yci] {
    width: min(100%, 480px);
    background: var(--shell-panel-background);
    border: 1px solid var(--shell-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shell-shadow-strong);
}

.sp-card__header[b-5e1m2a4yci] {
    padding: 1.35rem 1.5rem 1.2rem;
    text-align: center;
    background: var(--shell-hero-background);
    color: var(--shell-text-inverse);
}

/* What the page is for, UNDER the masthead: the name answers "where am I",
   which comes first for somebody arriving from an e-mail; this answers "what
   now". Separated by a hairline so it reads as a caption to the name rather
   than a third line of it. */
.sp-card__state[b-5e1m2a4yci] {
    margin: 0.85rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
}

/* The product name, at the weight the rest of the product gives it
   (.app-branding__title). This is the first screen many people ever see. */
.sp-card__brand[b-5e1m2a4yci] {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

/* The small "v12.0" beside the large name - same rule the app-wide
   masthead uses (.app-branding__version in app.css). */
.sp-card__version[b-5e1m2a4yci] {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: normal;
    opacity: 0.92;
}

.sp-card__tagline[b-5e1m2a4yci] {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
    line-height: 1.3;
    opacity: 0.85;
}

@media (max-width: 480px) {
    .sp-card__brand[b-5e1m2a4yci] { font-size: 1.45rem; }
}

.sp-card__body[b-5e1m2a4yci] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.6rem 1.5rem 1.75rem;
}

/* Who the link is for - the one fact that tells the reader it is really theirs. */
.sp-for[b-5e1m2a4yci] {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--shell-text-secondary);
}

.sp-for strong[b-5e1m2a4yci] {
    color: var(--shell-text-primary);
}

.sp-field[b-5e1m2a4yci] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.sp-field__label[b-5e1m2a4yci] {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--shell-text-secondary);
}

[b-5e1m2a4yci] .sp-input.e-input-group,
[b-5e1m2a4yci] .sp-input.e-control-wrapper,
[b-5e1m2a4yci] .sp-input.e-input-group.e-control-wrapper {
    border: 1px solid var(--shell-login-field-border);
    border-radius: 12px;
    box-shadow: none;
    background: var(--shell-login-field-background) !important;
}

[b-5e1m2a4yci] .sp-input input.e-input,
[b-5e1m2a4yci] .sp-input.e-control-wrapper input.e-input,
[b-5e1m2a4yci] .sp-input.e-input-group input.e-input {
    min-height: 46px;
    padding: 0.72rem 0.85rem;
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: var(--shell-login-field-text) !important;
    -webkit-text-fill-color: var(--shell-login-field-text) !important;
    background: transparent !important;
}

[b-5e1m2a4yci] .sp-input.sp-input--bad.e-input-group,
[b-5e1m2a4yci] .sp-input.sp-input--bad.e-control-wrapper {
    border-color: var(--shell-danger);
}

/* ── The rule, as a checklist that answers while you type ──
   A sentence listing four requirements makes the reader hold four things in
   their head and guess which one they missed. Four lines that tick do not. */
.sp-rules[b-5e1m2a4yci] {
    display: grid;
    gap: 0.28rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-rule[b-5e1m2a4yci] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--shell-text-secondary);
    transition: color 120ms ease;
}

.sp-rule__mark[b-5e1m2a4yci] {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    border: 1px solid var(--shell-border);
    background: transparent;
    color: transparent;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.sp-rule--met[b-5e1m2a4yci] {
    color: var(--shell-text-primary);
}

.sp-rule--met .sp-rule__mark[b-5e1m2a4yci] {
    background: var(--shell-status-success-text, #157347);
    border-color: var(--shell-status-success-text, #157347);
    color: #fff;
}

.sp-note[b-5e1m2a4yci] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--shell-text-secondary);
}

.sp-note--bad[b-5e1m2a4yci] { color: var(--shell-danger); font-weight: 500; }

.sp-error[b-5e1m2a4yci] {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--shell-danger);
}

/* The outcome panels - a dead link and a finished one both end the journey,
   so both get a panel rather than a line of text lost on the card. */
.sp-outcome[b-5e1m2a4yci] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    border: 1px solid var(--shell-border);
    /* panel-background-soft, NOT contrast-surface-bg: the contrast surface is
       defined once, in light, and is meant to stand deliberately against its
       background - used here it produced a bright white block sitting inside a
       dark card. This one is redefined by every theme. */
    background: var(--shell-panel-background-soft);
}

.sp-outcome__title[b-5e1m2a4yci] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--shell-text-primary);
}

.sp-outcome__text[b-5e1m2a4yci] {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--shell-text-secondary);
}

.sp-outcome--ok[b-5e1m2a4yci] { border-color: var(--shell-status-success-border, var(--shell-border)); }
.sp-outcome--bad[b-5e1m2a4yci] { border-color: var(--shell-status-error-border, var(--shell-border)); }

[b-5e1m2a4yci] .sp-submit.e-btn {
    width: 100%;
    min-height: 46px;
    border-radius: 12px;
    font-size: 0.98rem;
    font-weight: 600;
    background: var(--shell-button-primary);
    border-color: transparent;
    color: var(--shell-text-inverse);
}

[b-5e1m2a4yci] .sp-submit.e-btn:hover:not(:disabled),
[b-5e1m2a4yci] .sp-submit.e-btn:focus:not(:disabled) {
    background: var(--shell-button-primary-hover);
}

[b-5e1m2a4yci] .sp-submit.e-btn:disabled { opacity: 0.55; }

[b-5e1m2a4yci] .sp-link.e-btn {
    width: 100%;
    min-height: 42px;
    border-radius: 12px;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--shell-border);
    color: var(--shell-text-primary);
}

.sp-checking[b-5e1m2a4yci] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary);
}

.sp-spinner[b-5e1m2a4yci] {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid var(--shell-border);
    border-top-color: var(--shell-button-primary);
    animation: sp-spin-b-5e1m2a4yci 700ms linear infinite;
}

@keyframes sp-spin-b-5e1m2a4yci { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .sp-spinner[b-5e1m2a4yci] { animation: none; }
    .sp-rule[b-5e1m2a4yci], .sp-rule__mark[b-5e1m2a4yci] { transition: none; }
}
/* /Pages/Admin/SettingsPage.razor.rz.scp.css */
.settings-page[b-vdhzq3l4dj] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--shell-page-background);
}

/* ── Card + User Guide, side by side ────────────────────────────────────────
   .ct-page__help is flex-SIZED globally (flex-basis var(--invnet-help-w)), so
   it needs a flex row around it; this page has no .master-body, so the global
   safety net in app.css cannot supply one. The row stays centred in the
   viewport, and the guide gets its own scroll rather than making a
   vertically-centred card grow off the screen. */
.settings-page__layout[b-vdhzq3l4dj] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    width: min(100%, 1000px);
}

.settings-page__layout > .ct-page__help[b-vdhzq3l4dj] {
    max-height: calc(100vh - 3rem);
    text-align: left;
}

@media (max-width: 900px) {
    /* Matches the global breakpoint where .ct-page__help goes full width. */
    .settings-page__layout[b-vdhzq3l4dj] {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .settings-page__layout > .ct-page__help[b-vdhzq3l4dj] {
        max-height: none;
    }
}

.settings-card[b-vdhzq3l4dj] {
    width: min(100%, 500px);
    background: var(--shell-panel-background);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--shell-border);
    box-shadow: var(--shell-shadow-strong);
}

.settings-card__header[b-vdhzq3l4dj] {
    padding: 1.2rem 1.5rem 1rem;
    background: var(--shell-hero-background);
    color: var(--shell-text-inverse);
}

.settings-card__header h1[b-vdhzq3l4dj] {
    margin: 0;
    font-size: 1.55rem;
}

.settings-card__header p[b-vdhzq3l4dj] {
    margin: 0.35rem 0 0;
    font-size: 0.95rem;
    opacity: 0.9;
}

.settings-card__body[b-vdhzq3l4dj] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
}

.field[b-vdhzq3l4dj] {
    display: flex;
    flex-direction: column;
}

[b-vdhzq3l4dj] .field__input {
    width: 100%;
}

.settings-help[b-vdhzq3l4dj] {
    margin: 0;
    color: var(--shell-text-secondary);
    font-size: 0.92rem;
    word-break: break-word;
}

.message[b-vdhzq3l4dj] {
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    font-size: 0.95rem;
}

.message--error[b-vdhzq3l4dj] {
    background: var(--shell-error-bg);
    color: var(--shell-error-text);
    border: 1px solid var(--shell-error-border);
}

/* The read-only notice shown when the site's appsettings.json fixes the
   address (AllowBrowserOverride off) - informational, not an error. */
.message--info[b-vdhzq3l4dj] {
    background: var(--shell-panel-background);
    color: var(--shell-muted-text, inherit);
    border: 1px solid var(--shell-border);
}

.settings-actions[b-vdhzq3l4dj] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

[b-vdhzq3l4dj] .primary-button.e-btn,
[b-vdhzq3l4dj] .secondary-button.e-btn {
    min-width: 120px;
    min-height: 42px;
    border-radius: 999px;
    font-weight: 700;
}

[b-vdhzq3l4dj] .primary-button.e-btn {
    border: none;
    background: var(--shell-button-primary);
    color: #ffffff;
}

[b-vdhzq3l4dj] .primary-button.e-btn:hover,
[b-vdhzq3l4dj] .primary-button.e-btn:focus {
    background: var(--shell-button-primary-hover);
    color: #ffffff;
}

[b-vdhzq3l4dj] .secondary-button.e-btn {
    border: 1px solid var(--shell-button-secondary-border);
    background: var(--shell-button-secondary-bg);
    color: var(--shell-button-secondary-text);
}

[b-vdhzq3l4dj] .secondary-button.e-btn:hover,
[b-vdhzq3l4dj] .secondary-button.e-btn:focus {
    background: color-mix(in srgb, var(--shell-button-secondary-bg) 86%, var(--shell-button-primary) 14%);
    color: var(--shell-button-secondary-text);
}

[b-vdhzq3l4dj] .primary-button.e-btn:disabled,
[b-vdhzq3l4dj] .secondary-button.e-btn:disabled {
    opacity: 0.6;
}

@media (max-width: 575.98px) {
    .settings-page[b-vdhzq3l4dj] {
        padding: 1rem;
    }

    .settings-card__body[b-vdhzq3l4dj] {
        padding: 1.25rem;
    }

    .settings-actions[b-vdhzq3l4dj] {
        flex-direction: column-reverse;
    }

    [b-vdhzq3l4dj] .primary-button.e-btn,
    [b-vdhzq3l4dj] .secondary-button.e-btn {
        width: 100%;
    }
}
/* /Pages/Admin/UserGroupMaster.razor.rz.scp.css */
/* Two-pane body: form (left, scrolls) + dockable Help panel (right, scrolls). */
.ug-master__body[b-mu7l3k32ou] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.ug-master__form[b-mu7l3k32ou] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    max-height: 100%;
    padding: 0.75rem 1rem 1.25rem;
}
.ug-master__form[b-mu7l3k32ou]  .prod-master__subhead,
.ug-master__detail[b-mu7l3k32ou]  .prod-master__subhead {
    margin: 0.75rem 0 0.25rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--shell-border, #e0e0e0);
    font-size: 0.92rem;
    font-weight: 600;
}
/* Field grid: strict two columns. */
.ug-master[b-mu7l3k32ou]  .ug-grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.25rem;
    align-items: center;
}
/* Description + Inactive share one grid cell. */
.ug-master[b-mu7l3k32ou]  .ug-name-cell {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}
.ug-master[b-mu7l3k32ou]  .ug-name-cell > .e-input-group,
.ug-master[b-mu7l3k32ou]  .ug-name-cell > .e-float-input,
.ug-master[b-mu7l3k32ou]  .ug-name-cell > .e-control-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}
@media (max-width: 700px) {
    .ug-master[b-mu7l3k32ou]  .ug-grid2 { grid-template-columns: minmax(0, 1fr); }
}
.ug-master[b-mu7l3k32ou]  .prod-master__switch {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.ug-master[b-mu7l3k32ou]  .prod-master__switch label { font-weight: 600; font-size: 0.85rem; }

/* Members grid block. */
.ug-master[b-mu7l3k32ou]  .ug-members { display: flex; flex-direction: column; gap: 0.5rem; }
.ug-master[b-mu7l3k32ou]  .ug-members__toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.ug-master[b-mu7l3k32ou]  .ug-muted { font-size: 0.8rem; opacity: 0.75; }
.ug-master[b-mu7l3k32ou]  .ug-members__grid .e-rowcell { padding: 0.25rem 0.4rem; }

/* Embedded dialog: form left, dockable Help panel right. */
.ug-master[b-mu7l3k32ou]  .ug-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
.ug-master[b-mu7l3k32ou]  .ug-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* Help panel (mirrors the Ledger Account help panel). */
.ct-page__help[b-mu7l3k32ou] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-mu7l3k32ou] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-mu7l3k32ou] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-mu7l3k32ou] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-mu7l3k32ou] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-mu7l3k32ou] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-mu7l3k32ou] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-mu7l3k32ou] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-mu7l3k32ou] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-mu7l3k32ou] { padding-left: 0.15rem; }

[b-mu7l3k32ou] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .ug-master__body[b-mu7l3k32ou] { flex-direction: column; }
    .ct-page__help[b-mu7l3k32ou],
    .ct-page__help--docked[b-mu7l3k32ou] { flex: 0 0 auto; width: 100%; overflow: visible; }
}
/* /Pages/Admin/UserManagerPage.razor.rz.scp.css */
/* User Manager - a list beside an editor. Layout only; the controls come from
   the shared master styles so this page matches the rest. */

.um-page__body[b-fsfoe52hux] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.um-page__main[b-fsfoe52hux] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-right: 0.35rem;
}

/* The list keeps a fixed column and the editor takes the rest; below 1100px
   they stack, because two panes of controls in half a screen each is worse
   than scrolling. */
.um-split[b-fsfoe52hux] {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .um-split[b-fsfoe52hux] { grid-template-columns: 1fr; }
}

/* ── The list ── */
.um-list[b-fsfoe52hux] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.9rem;
    border: 1px solid var(--shell-border);
    border-radius: 16px;
    background: var(--shell-panel-background-soft);
    box-shadow: var(--shell-shadow);
    max-height: 70vh;
    overflow-y: auto;
}

.um-list__head[b-fsfoe52hux] {
    margin: 0.7rem 0 0.1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.um-count[b-fsfoe52hux] {
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--shell-pill-bg);
    color: var(--shell-pill-text);
    font-size: 0.72rem;
    letter-spacing: 0;
}

.um-note[b-fsfoe52hux], .um-empty[b-fsfoe52hux] {
    margin: 0 0 0.2rem;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--shell-text-secondary);
}

/* A row is a button: the whole card is the click target, not a link inside it. */
.um-row[b-fsfoe52hux] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--shell-border);
    border-radius: 12px;
    background: var(--shell-contrast-surface-bg);
    color: var(--shell-contrast-surface-text);
    cursor: pointer;
    font: inherit;
}

.um-row:hover[b-fsfoe52hux] { border-color: var(--shell-border-strong, var(--shell-border)); }

.um-row--selected[b-fsfoe52hux] {
    border-color: var(--shell-button-primary);
    box-shadow: inset 0 0 0 1px var(--shell-button-primary);
}

/* Disabled users are tinted the same orange the F2 lookups use for inactive
   rows, so "retired" reads the same everywhere in the product. */
.um-row--disabled[b-fsfoe52hux] { background: var(--shell-inactive-bg, rgba(255, 165, 0, 0.12)); }

.um-row__name[b-fsfoe52hux] { font-weight: 600; }
.um-row__sub[b-fsfoe52hux] { font-size: 0.78rem; color: var(--shell-text-secondary); }
.um-row__tags[b-fsfoe52hux] { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.15rem; }

.um-tag[b-fsfoe52hux] {
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--shell-border);
    background: var(--shell-pill-bg);
    color: var(--shell-pill-text);
    font-size: 0.7rem;
    font-weight: 600;
}

.um-tag--off[b-fsfoe52hux] {
    border-color: var(--shell-warning-border, var(--shell-border));
    background: var(--shell-warning-bg, var(--shell-pill-bg));
    color: var(--shell-warning-text, var(--shell-pill-text));
}

/* ── The editor ── */
.um-detail[b-fsfoe52hux] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.um-detail__head[b-fsfoe52hux] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.2rem;
}

.um-placeholder[b-fsfoe52hux] {
    padding: 2rem 1.2rem;
    border: 1px dashed var(--shell-border);
    border-radius: 16px;
    text-align: center;
    color: var(--shell-text-secondary);
    background: var(--shell-panel-background-soft);
}

.um-sub[b-fsfoe52hux] {
    margin: 0.9rem 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

/* Same card treatment the other admin masters use: the section's grid IS the
   card, fields stop at a readable width, and two lines of hint are reserved so
   rows share a baseline. */
.um-grid[b-fsfoe52hux] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 330px));
    justify-content: start;
    gap: 0.85rem 1.1rem;
    padding: 0.95rem 1.05rem 1.05rem;
    border: 1px solid var(--shell-border);
    border-radius: 16px;
    background: var(--shell-panel-background-soft);
    box-shadow: var(--shell-shadow);
}

.um-field[b-fsfoe52hux] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.um-field .app-field-hint[b-fsfoe52hux] { min-height: 2.05rem; }
.um-field--wide[b-fsfoe52hux] { grid-column: 1 / -1; }

.um-label[b-fsfoe52hux] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--shell-text-secondary);
}

.um-checks[b-fsfoe52hux] { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; padding: 0.2rem 0; }

.um-check[b-fsfoe52hux] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.86rem;
    cursor: pointer;
}

.um-check input[b-fsfoe52hux] { width: 1rem; height: 1rem; accent-color: var(--shell-button-primary); }

.um-facts[b-fsfoe52hux] { display: flex; gap: 0.5rem; margin: 0.6rem 0 0; font-size: 0.8rem; }
.um-facts dt[b-fsfoe52hux] { color: var(--shell-text-secondary); }
.um-facts dd[b-fsfoe52hux] { margin: 0; }

.um-mono[b-fsfoe52hux] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .um-page__body[b-fsfoe52hux] { flex-direction: column; }
}

/* "All" / "None" read as actions, not as buttons competing with the toolbar. */
.um-linkbtn[b-fsfoe52hux] {
    border: 0;
    background: none;
    padding: 0 0.15rem;
    font: inherit;
    font-size: 0.76rem;
    color: var(--shell-button-primary);
    cursor: pointer;
    text-decoration: underline;
}

/* The serial a Global Administrator or Developer is working under. Only those
   two roles ever see this bar; everybody else inherits the serial on their own
   userinfo row. Tinted when nothing is named, because the empty screen behind
   it is deliberate and needs explaining. */
.um-scope[b-fsfoe52hux] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--shell-border);
    border-radius: 12px;
    background: var(--shell-contrast-surface-bg);
}

.um-scope--empty[b-fsfoe52hux] {
    border-color: var(--shell-status-warning-border, var(--shell-border));
    background: var(--shell-status-warning-bg, var(--shell-contrast-surface-bg));
}

.um-scope__label[b-fsfoe52hux] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--shell-contrast-surface-text);
}

.um-scope__input[b-fsfoe52hux] { min-width: 22rem; max-width: 100%; }

.um-scope__note[b-fsfoe52hux] {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--shell-text-secondary);
}
/* /Pages/Admin/UserProfilePage.razor.rz.scp.css */
.profile-page[b-9ylv0kftv0] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 2rem;
    /* Wider than the old 1000px because the User Guide now sits beside the
       panels; the panel column itself still tops out at 1000px below. */
    max-width: 1360px;
    margin: 0 auto;
}

/* ── Panels + User Guide, side by side ──────────────────────────────────────
   .ct-page__help is flex-SIZED globally (flex-basis var(--invnet-help-w)), so
   it needs a flex row around it — this page has no .master-body, so the global
   safety net in app.css cannot supply one. The guide sticks while the panels
   scroll: the page is tall and the help is long, and a guide that scrolls away
   from the field it explains is no use. */
.profile-page__layout[b-9ylv0kftv0] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    min-height: 0;
}

.profile-page__layout > .profile-page__content[b-9ylv0kftv0] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 1000px;
}

.profile-page__layout > .ct-page__help[b-9ylv0kftv0] {
    position: sticky;
    top: 1rem;
    align-self: flex-start;
    max-height: calc(100vh - 2rem);
}

.profile-page__header[b-9ylv0kftv0] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.profile-page__eyebrow[b-9ylv0kftv0] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.profile-page__title[b-9ylv0kftv0] {
    margin: 0.25rem 0 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--shell-text);
}

/* ── Status ── */
.profile-page__status[b-9ylv0kftv0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
}

.profile-page__status--success[b-9ylv0kftv0] {
    background: color-mix(in srgb, var(--shell-success) 15%, transparent);
    color: var(--shell-success);
}

.profile-page__status--error[b-9ylv0kftv0] {
    background: color-mix(in srgb, var(--shell-danger) 15%, transparent);
    color: var(--shell-danger);
}

.profile-page__status--warning[b-9ylv0kftv0] {
    background: color-mix(in srgb, var(--shell-warning) 15%, transparent);
    color: var(--shell-warning);
}

.profile-page__status--info[b-9ylv0kftv0] {
    background: color-mix(in srgb, var(--shell-accent) 15%, transparent);
    color: var(--shell-accent);
}

/* ── Content Grid ── */
.profile-page__content[b-9ylv0kftv0] {
    display: grid;
    grid-template-columns: 260px 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.5rem;
}

/* ── Panel ── */
.profile-page__panel[b-9ylv0kftv0] {
    background: var(--shell-panel-background-soft);
    border: 1px solid var(--shell-border);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shell-shadow);
}

.profile-page__panel-head[b-9ylv0kftv0] {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--shell-border);
}

.profile-page__panel-head h2[b-9ylv0kftv0] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--shell-text);
}

/* ── Avatar Card ── */
.profile-page__panel--avatar[b-9ylv0kftv0] {
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem 1.25rem 1.5rem;
    text-align: center;
}

.profile-page__avatar-wrap[b-9ylv0kftv0] {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 1rem;
    border: 3px solid color-mix(in srgb, var(--shell-accent) 40%, transparent);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--shell-accent) 12%, transparent);
    flex: 0 0 auto;
}

.profile-page__avatar-img[b-9ylv0kftv0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-page__avatar-default[b-9ylv0kftv0] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--shell-accent) 20%, transparent), color-mix(in srgb, var(--shell-accent) 8%, transparent));
    color: var(--shell-accent);
    font-size: 2.8rem;
}

.profile-page__avatar-name[b-9ylv0kftv0] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--shell-text);
    line-height: 1.3;
}

.profile-page__avatar-role[b-9ylv0kftv0] {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.2rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 20px;
    background: color-mix(in srgb, var(--shell-accent) 14%, transparent);
    color: var(--shell-accent);
}

.profile-page__avatar-email[b-9ylv0kftv0] {
    margin-top: 0.65rem;
    font-size: 0.82rem;
    color: var(--shell-text-secondary);
    word-break: break-all;
}

/* ── Info Grid ── */
.profile-page__info-grid[b-9ylv0kftv0] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

.profile-page__info-item[b-9ylv0kftv0] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.profile-page__info-item--icon[b-9ylv0kftv0] {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.65rem;
}

.profile-page__info-item--icon > div[b-9ylv0kftv0] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.profile-page__info-icon[b-9ylv0kftv0] {
    flex: 0 0 auto;
    font-size: 0.95rem;
    margin-top: 0.15rem;
    color: var(--shell-accent);
    opacity: 0.75;
}

.profile-page__info-label[b-9ylv0kftv0] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--shell-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.profile-page__info-value[b-9ylv0kftv0] {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--shell-text);
}

/* ── Password Panel — spans 2 columns ── */
.profile-page__panel--password[b-9ylv0kftv0] {
    grid-column: 2 / 4;
}

.profile-page__form[b-9ylv0kftv0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* The form is a 1rem-gapped flex column, so a hint would otherwise float
   midway between two boxes instead of sitting under the one it explains. */
.profile-page__form .app-field-hint[b-9ylv0kftv0] {
    margin-top: -0.75rem;
}

.profile-page__input[b-9ylv0kftv0] {
    width: 100%;
}

.profile-page__actions[b-9ylv0kftv0] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

[b-9ylv0kftv0] .profile-page__save-btn.e-btn {
    border-radius: 10px;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
}

[b-9ylv0kftv0] .profile-page__dialog .e-dlg-content {
    padding: 1rem 1.5rem;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    /* Matches the global breakpoint where .ct-page__help stops being a
       fixed-width column and goes full width. */
    .profile-page__layout[b-9ylv0kftv0] {
        flex-direction: column;
    }

    .profile-page__layout > .profile-page__content[b-9ylv0kftv0] {
        max-width: none;
        width: 100%;
    }

    .profile-page__layout > .ct-page__help[b-9ylv0kftv0] {
        position: static;
        max-height: none;
    }

    .profile-page__content[b-9ylv0kftv0] {
        grid-template-columns: 1fr 1fr;
    }

    .profile-page__panel--avatar[b-9ylv0kftv0] {
        grid-column: 1 / 3;
        grid-row: auto;
        flex-direction: row;
        gap: 1.25rem;
        padding: 1.25rem 1.5rem;
        text-align: left;
    }

    .profile-page__avatar-wrap[b-9ylv0kftv0] {
        width: 72px;
        height: 72px;
        margin-bottom: 0;
    }

    .profile-page__panel--password[b-9ylv0kftv0] {
        grid-column: 1 / 3;
    }
}

@media (max-width: 600px) {
    .profile-page__content[b-9ylv0kftv0] {
        grid-template-columns: 1fr;
    }

    .profile-page__panel--avatar[b-9ylv0kftv0] {
        grid-column: auto;
        flex-direction: column;
        text-align: center;
    }

    .profile-page__panel--password[b-9ylv0kftv0] {
        grid-column: auto;
    }

    .profile-page[b-9ylv0kftv0] {
        padding: 1rem;
    }
}
/* /Pages/Admin/UserRoleMaster.razor.rz.scp.css */
/* User Roles — scoped styles. Reuses the master shell (master-page /
   master-shell / master-sticky-top / master-body) and the help dock; only the
   two-pane layout and the role checklist are local. */

.url-page__body[b-9y8y4y6ol7] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.url-page__main[b-9y8y4y6ol7] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: auto !important;
    padding-bottom: 0.35rem;
}

/* Roles beside users on a wide screen, stacked when there is not room for
   both to stay readable. */
.url-panes[b-9y8y4y6ol7] {
    display: grid;
    grid-template-columns: minmax(320px, 400px) minmax(420px, 1fr);
    gap: 0.9rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .url-panes[b-9y8y4y6ol7] { grid-template-columns: 1fr; }
}

.url-card[b-9y8y4y6ol7] {
    border: 1px solid var(--inv-border, #e2e6ec);
    border-radius: 8px;
    background: #fff;
    padding: 0.9rem 1rem 1rem;
    min-width: 0;
}

.url-card h2[b-9y8y4y6ol7] {
    margin: 0 0 0.15rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.url-card__head[b-9y8y4y6ol7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.url-card__hint[b-9y8y4y6ol7] {
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
    color: #6a7381;
    max-width: 70ch;
}

.url-card__actions[b-9y8y4y6ol7] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.url-note[b-9y8y4y6ol7] { margin-right: auto; font-size: 0.75rem; }

.url-grid[b-9y8y4y6ol7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.7rem 1rem;
    margin-top: 0.85rem;
}

.url-grid > label[b-9y8y4y6ol7] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.url-grid > label > span[b-9y8y4y6ol7] {
    font-size: 0.76rem;
    font-weight: 600;
    color: #4a5361;
}

.url-grid > label > small[b-9y8y4y6ol7] { font-size: 0.7rem; color: #7b8492; }

.url-filters[b-9y8y4y6ol7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.url-filters[b-9y8y4y6ol7]  .e-input-group { min-width: 190px; }

/* ── assignment ─────────────────────────────────────────────────────────── */

.url-assign[b-9y8y4y6ol7] {
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--inv-border, #e2e6ec);
}

.url-assign__head[b-9y8y4y6ol7] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.url-assign__head h3[b-9y8y4y6ol7] { margin: 0; font-size: 0.92rem; font-weight: 600; }
.url-assign__primary[b-9y8y4y6ol7] { font-size: 0.76rem; color: #6a7381; }

.url-chip[b-9y8y4y6ol7] {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: #eef2f7;
    color: #55606f;
    font-size: 0.68rem;
    font-weight: 600;
}

.url-chip--off[b-9y8y4y6ol7] { background: #fdeaea; color: #a3312a; }

.url-roles[b-9y8y4y6ol7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.4rem 1rem;
    margin-top: 0.7rem;
}

.url-role[b-9y8y4y6ol7] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0.4rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 6px;
}

.url-role:hover[b-9y8y4y6ol7] { background: #f6f8fb; border-color: #e2e6ec; }
.url-role input[b-9y8y4y6ol7] { margin-top: 0.2rem; flex: 0 0 auto; }
.url-role span[b-9y8y4y6ol7] { font-size: 0.84rem; min-width: 0; }
.url-role small[b-9y8y4y6ol7] { display: block; font-size: 0.72rem; color: #7b8492; line-height: 1.3; }
.url-role em[b-9y8y4y6ol7] { color: #7b8492; font-style: normal; font-size: 0.75rem; }
.url-role--inactive[b-9y8y4y6ol7] { opacity: 0.7; }

/* ── refusal ────────────────────────────────────────────────────────────── */

.url-denied[b-9y8y4y6ol7] {
    max-width: 58ch;
    margin: 1.5rem auto;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid var(--inv-border, #e2e6ec);
    border-radius: 10px;
    background: #fff;
}

.url-denied__icon[b-9y8y4y6ol7] { font-size: 2rem; }
.url-denied h2[b-9y8y4y6ol7] { margin: 0.5rem 0; font-size: 1.05rem; font-weight: 600; }
.url-denied p[b-9y8y4y6ol7] { margin: 0.4rem 0; font-size: 0.85rem; color: #4a5361; }
/* /Pages/Admin/UserTermsPage.razor.rz.scp.css */
/* User Terms editor - master-shell page; only this page's own bits here. */

.ut-page__body[b-g3qwpzypwj] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.ut-page__main[b-g3qwpzypwj] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.ut-toolrow[b-g3qwpzypwj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ut-toolrow__label select[b-g3qwpzypwj] {
    margin-left: 0.4rem;
    padding: 0.3rem 0.5rem;
    font: inherit;
    background: var(--shell-panel-background);
    color: var(--shell-text-primary);
    border: 1px solid var(--shell-border);
    border-radius: 8px;
}

[b-g3qwpzypwj] .ut-toolrow__search {
    max-width: 16rem;
}

.ut-field label[b-g3qwpzypwj] {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.ut-field textarea[b-g3qwpzypwj],
.ut-section textarea[b-g3qwpzypwj] {
    width: 100%;
    font: inherit;
    padding: 0.5rem 0.7rem;
    background: var(--shell-panel-background);
    color: var(--shell-text-primary);
    border: 1px solid var(--shell-border);
    border-radius: 8px;
    resize: vertical;
}

.ut-sections-head[b-g3qwpzypwj] {
    font-size: 1.05rem;
    margin: 0.6rem 0 0;
}

.ut-section[b-g3qwpzypwj] {
    border: 1px solid var(--shell-border);
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    background: var(--shell-panel-background);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ut-section__head[b-g3qwpzypwj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ut-section__key[b-g3qwpzypwj],
.ut-section__heading[b-g3qwpzypwj] {
    font: inherit;
    padding: 0.35rem 0.55rem;
    background: var(--shell-body-background);
    color: var(--shell-text-primary);
    border: 1px solid var(--shell-border);
    border-radius: 8px;
}

.ut-section__key[b-g3qwpzypwj] { max-width: 10rem; }
.ut-section__heading[b-g3qwpzypwj] { flex: 1; min-width: 12rem; }

.ut-actions[b-g3qwpzypwj] {
    display: flex;
    gap: 0.6rem;
}

.ut-versions[b-g3qwpzypwj] {
    margin-bottom: 0.85rem;
}

.ut-autofill[b-g3qwpzypwj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ut-autofill__hint[b-g3qwpzypwj] {
    font-size: 0.85rem;
    color: var(--shell-text-secondary);
}

.ut-chip[b-g3qwpzypwj] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.ut-chip--live[b-g3qwpzypwj] { background: var(--shell-success-bg, #e7f5ed); color: var(--shell-success-text, #1a7f4b); }
.ut-chip--draft[b-g3qwpzypwj] { background: var(--shell-warning-bg, #fdf2e2); color: var(--shell-warning-text, #a86200); }

[b-g3qwpzypwj] .ut-publish__switch { margin-top: 0.75rem; }

[b-g3qwpzypwj] .ut-publish__hint {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--shell-text-secondary);
}

.ut-muted[b-g3qwpzypwj] {
    color: var(--shell-text-secondary);
}

.ut-serial[b-g3qwpzypwj] {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.85rem;
    color: var(--shell-text-secondary);
}

.ut-serial code[b-g3qwpzypwj] {
    font-size: 0.8rem;
}

.ut-table-wrap[b-g3qwpzypwj] {
    overflow-x: auto;
}

.ut-table[b-g3qwpzypwj] {
    width: 100%;
    border-collapse: collapse;
}

.ut-table th[b-g3qwpzypwj],
.ut-table td[b-g3qwpzypwj] {
    text-align: left;
    padding: 0.45rem 0.7rem;
    border-bottom: 1px solid var(--shell-border);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .ut-page__body[b-g3qwpzypwj] { flex-direction: column; }
}
/* /Pages/Cashier/CashClosingPage.razor.rz.scp.css */
/* Cash Closing — touch-first: session cards, denomination steppers, live
   totals strip. Shell layout mirrors the other master pages. */

.cl-page__body[b-5cvphv9pmn] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.cl-page__form[b-5cvphv9pmn] {
    flex: 1 1 auto;
    min-width: 0;
}

.cl-form[b-5cvphv9pmn] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cl-section[b-5cvphv9pmn] { display: flex; flex-direction: column; gap: 0.45rem; }
.cl-section__label[b-5cvphv9pmn] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

/* Label + action button on one line (day summary's "Unsettled bills"). */
.cl-section__labelrow[b-5cvphv9pmn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Open-session cards. */
.cl-sessions[b-5cvphv9pmn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.6rem;
}

.cl-session[b-5cvphv9pmn] {
    min-height: 96px;
    border-radius: 0.8rem;
    border: 2px solid var(--shell-border, #c9d1dc);
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    cursor: pointer;
    touch-action: manipulation;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.6rem 0.8rem;
    text-align: left;
    transition: border-color 0.15s ease;
}

.cl-session:hover[b-5cvphv9pmn] { border-color: var(--shell-button-primary, #0d6efd); }
.cl-session__id[b-5cvphv9pmn] { font-size: 0.72rem; opacity: 0.6; }
.cl-session__counter[b-5cvphv9pmn] { font-size: 1.05rem; font-weight: 700; }
.cl-session__meta[b-5cvphv9pmn] { font-size: 0.78rem; opacity: 0.75; }
.cl-empty[b-5cvphv9pmn] { font-size: 0.85rem; opacity: 0.75; margin: 0; grid-column: 1 / -1; }

/* Day-summary stat tiles (readonly). */
.cl-stats[b-5cvphv9pmn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
}

.cl-stat[b-5cvphv9pmn] {
    border: 1px solid var(--shell-border, #d5dbe3);
    border-radius: 0.6rem;
    padding: 0.4rem 0.65rem;
    background: var(--shell-panel-background-soft, #f4f6f9);
    display: flex;
    flex-direction: column;
}

.cl-stat span[b-5cvphv9pmn] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }
.cl-stat strong[b-5cvphv9pmn] { font-size: 1.05rem; text-align: right; font-variant-numeric: tabular-nums; }
.cl-stat--cash[b-5cvphv9pmn] { border-color: var(--shell-button-primary, #0d6efd); }

.cl-grid[b-5cvphv9pmn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.cl-f[b-5cvphv9pmn] { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; min-width: 0; }
.cl-f--wide[b-5cvphv9pmn] { grid-column: 1 / -1; }

.cl-f input[b-5cvphv9pmn] {
    min-height: 46px;
    font-size: 1rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.55rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    width: 100%;
    box-sizing: border-box;
}

.cl-form input[type="number"][b-5cvphv9pmn] { text-align: right; }   /* numeric right-align convention */
.cl-f input:disabled[b-5cvphv9pmn] { background: var(--shell-panel-background-soft, #f2f4f7); }

/* Denomination counter rows — the touch centrepiece. */
.cl-denoms[b-5cvphv9pmn] { display: flex; flex-direction: column; gap: 0.4rem; max-width: 34rem; }

.cl-denom[b-5cvphv9pmn] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--shell-border, #d5dbe3);
    border-radius: 0.7rem;
    padding: 0.35rem 0.6rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
}

.cl-denom__name[b-5cvphv9pmn] { flex: 1 1 auto; font-weight: 600; font-size: 0.9rem; }

.cl-denom__counter[b-5cvphv9pmn] { display: flex; align-items: center; gap: 0.35rem; }
.cl-denom__counter input[b-5cvphv9pmn] {
    width: 5.2rem;
    min-height: 44px;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: right;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.55rem;
    padding: 0.3rem 0.5rem;
}
.cl-denom__counter--free input[b-5cvphv9pmn] { width: 8rem; }
.cl-denom__counter input:disabled[b-5cvphv9pmn] { background: var(--shell-panel-background-soft, #f2f4f7); }

.cl-step[b-5cvphv9pmn] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--shell-border, #c9d1dc);
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}
.cl-step:disabled[b-5cvphv9pmn] { cursor: default; opacity: 0.5; }

.cl-denom__amt[b-5cvphv9pmn] {
    flex: 0 0 7rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Live totals strip. */
.cl-totals[b-5cvphv9pmn] { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.cl-total[b-5cvphv9pmn] {
    flex: 1 1 150px;
    border-radius: 0.7rem;
    border: 1px solid var(--shell-border, #d5dbe3);
    background: var(--shell-panel-background-soft, #f4f6f9);
    padding: 0.5rem 0.8rem;
    display: flex;
    flex-direction: column;
}

.cl-total span[b-5cvphv9pmn] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.7; }
.cl-total strong[b-5cvphv9pmn] { font-size: 1.35rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.cl-total em[b-5cvphv9pmn] { font-size: 0.72rem; font-style: normal; text-align: right; }
.cl-total--main[b-5cvphv9pmn] { border-color: var(--shell-button-primary, #0d6efd); }
.cl-total--ok[b-5cvphv9pmn] { background: #e1f5ee; border-color: #1d9e75; color: #085041; }
.cl-total--ok span[b-5cvphv9pmn], .cl-total--ok em[b-5cvphv9pmn] { color: #0f6e56; opacity: 1; }
.cl-total--bad[b-5cvphv9pmn] { background: #fcebeb; border-color: #e24b4a; color: #791f1f; }
.cl-total--bad span[b-5cvphv9pmn], .cl-total--bad em[b-5cvphv9pmn] { color: #a32d2d; opacity: 1; }

.cl-bills[b-5cvphv9pmn] { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cl-bill[b-5cvphv9pmn] {
    border: 1px solid var(--shell-border, #d5dbe3);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
}

/* Help panel — fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-5cvphv9pmn] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-5cvphv9pmn] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-5cvphv9pmn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-5cvphv9pmn] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-5cvphv9pmn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-5cvphv9pmn] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-5cvphv9pmn] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-5cvphv9pmn] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-5cvphv9pmn] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-5cvphv9pmn] { padding-left: 0.15rem; }

[b-5cvphv9pmn] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .ct-page__help[b-5cvphv9pmn],
    .ct-page__help--docked[b-5cvphv9pmn] { flex: 0 0 auto; width: 100%; overflow: visible; }
    .cl-page__body[b-5cvphv9pmn] { flex-wrap: wrap; }
    .cl-denom__amt[b-5cvphv9pmn] { flex-basis: 5rem; }
}
/* /Pages/Cashier/CashCounterMaster.razor.rz.scp.css */
/* Cash counter master — layout mirrors the other master shells (StatusMaster). */

.su-master__body[b-yq2md8jktq],
.su-master[b-yq2md8jktq]  .su-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.su-master__form[b-yq2md8jktq],
.su-master[b-yq2md8jktq]  .su-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

.su-master__detail[b-yq2md8jktq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.su-grid[b-yq2md8jktq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.su-description[b-yq2md8jktq]  textarea {
    min-height: 4rem;
}

/* Hex code box + native colour swatch editing the same ColorCode value. */
.su-color-row[b-yq2md8jktq] {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
}

.su-color-row .su-color-text[b-yq2md8jktq] {
    flex: 1 1 auto;
    min-width: 0;
}

.su-color-swatch[b-yq2md8jktq] {
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.1rem;
    padding: 0.1rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.35rem;
    background: transparent;
    cursor: pointer;
}

.su-color-swatch:disabled[b-yq2md8jktq] {
    cursor: default;
    opacity: 0.55;
}

.su-switch-row[b-yq2md8jktq] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.su-locked-note[b-yq2md8jktq] {
    margin: -0.35rem 0 0;
    font-size: 0.82rem;
    opacity: 0.8;
}

.su-embedded-toolbar[b-yq2md8jktq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* Help panel — fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-yq2md8jktq] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-yq2md8jktq] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-yq2md8jktq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-yq2md8jktq] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-yq2md8jktq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-yq2md8jktq] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-yq2md8jktq] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-yq2md8jktq] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-yq2md8jktq] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-yq2md8jktq] { padding-left: 0.15rem; }

[b-yq2md8jktq] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .ct-page__help[b-yq2md8jktq],
    .ct-page__help--docked[b-yq2md8jktq] { flex: 0 0 auto; width: 100%; overflow: visible; }
}

@media (max-width: 900px) {
    .su-master__body[b-yq2md8jktq],
    .su-master[b-yq2md8jktq]  .su-embedded-body { flex-wrap: wrap; }
}
/* /Pages/Cashier/CashDiscountAuthorityPage.razor.rz.scp.css */
.cda-page .cda-main[b-y8n7um3175] { flex: 1 1 auto; min-width: 0; }

.cda-tablewrap[b-y8n7um3175] {
    overflow-x: auto;
    border: 1px solid var(--shell-border, #d8dee8);
    border-radius: 8px;
    background: var(--shell-surface, #fff);
}

.cda-table[b-y8n7um3175] { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 1100px; }
.cda-table th[b-y8n7um3175] {
    background: var(--shell-surface-2, #f3f5f9);
    text-align: left;
    padding: 8px 8px;
    border-bottom: 1px solid var(--shell-border, #d8dee8);
    white-space: normal;
    font-size: 0.72rem;
}
.cda-table td[b-y8n7um3175] { padding: 6px 8px; vertical-align: middle; }
.cda-table th.num[b-y8n7um3175], .cda-table td.num[b-y8n7um3175] { text-align: right; }

/* The sentence under each row: the scope in words. */
.cda-scope td[b-y8n7um3175] {
    padding: 0 8px 8px;
    border-bottom: 1px solid var(--shell-border-soft, #e8ecf2);
    font-size: 0.78rem;
    color: var(--shell-muted, #6b7486);
}

/* Inactive rule: orange. */
.cda-row--inactive td[b-y8n7um3175] { background: rgba(245, 140, 30, 0.12); }

.cda-cell[b-y8n7um3175] {
    width: 100%;
    min-width: 0;
    padding: 4px 6px;
    border: 1px solid var(--shell-border, #cdd4df);
    border-radius: 4px;
    background: var(--shell-surface, #fff);
    color: inherit;
    font: inherit;
}
.cda-num[b-y8n7um3175] { text-align: right; font-variant-numeric: tabular-nums; max-width: 7.5rem; }
.cda-cellcombo[b-y8n7um3175] { min-width: 9rem; }
.cda-center[b-y8n7um3175] { text-align: center; }
.cda-rowbtn[b-y8n7um3175] {
    border: 1px solid var(--shell-border, #cdd4df);
    background: transparent;
    color: inherit;
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer;
}
.cda-rowbtn:disabled[b-y8n7um3175] { opacity: 0.5; cursor: default; }
.cda-placeholder[b-y8n7um3175] { text-align: center; color: var(--shell-muted, #8a93a3); padding: 24px; }
.cda-hint[b-y8n7um3175] { color: var(--shell-muted, #6b7486); font-size: 0.82rem; margin: 0 0 8px; }
/* /Pages/Cashier/CashOpeningPage.razor.rz.scp.css */
/* Cash Opening — touch-first: 44px+ targets, counter tiles, cash chips.
   Shell layout mirrors the other master pages. */

.co-page__body[b-t5rjrlix4p] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.co-page__form[b-t5rjrlix4p] {
    flex: 1 1 auto;
    min-width: 0;
}

.co-form[b-t5rjrlix4p] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.co-strip[b-t5rjrlix4p] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.co-f[b-t5rjrlix4p] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
    min-width: 0;
}

.co-f--id[b-t5rjrlix4p] { max-width: 10rem; }

.co-f input[b-t5rjrlix4p],
.co-f select[b-t5rjrlix4p] {
    min-height: 46px;
    font-size: 1rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.55rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    width: 100%;
    box-sizing: border-box;
}

.co-f input[readonly][b-t5rjrlix4p] { background: var(--shell-panel-background-soft, #f2f4f7); }
.co-f input:disabled[b-t5rjrlix4p],
.co-f select:disabled[b-t5rjrlix4p] { background: var(--shell-panel-background-soft, #f2f4f7); color: var(--shell-text-muted, inherit); }
.co-f input[type="number"][b-t5rjrlix4p] { text-align: right; }   /* numeric right-align convention */

.co-section[b-t5rjrlix4p] { display: flex; flex-direction: column; gap: 0.45rem; }
.co-section__label[b-t5rjrlix4p] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

/* Counter tiles — the touch centrepiece. */
.co-tiles[b-t5rjrlix4p] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.6rem;
}

.co-tile[b-t5rjrlix4p] {
    min-height: 72px;
    border-radius: 0.8rem;
    border: 2px solid var(--shell-border, #c9d1dc);
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.5rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.co-tile .e-icons[b-t5rjrlix4p] { font-size: 1.25rem; opacity: 0.6; }

.co-tile--on[b-t5rjrlix4p] {
    background: var(--shell-button-primary, #0d6efd);
    border-color: var(--shell-button-primary, #0d6efd);
    color: #fff;
}
.co-tile--on .e-icons[b-t5rjrlix4p] { opacity: 1; }

.co-tile:disabled[b-t5rjrlix4p] { cursor: default; opacity: 0.75; }

.co-empty[b-t5rjrlix4p] { font-size: 0.85rem; opacity: 0.75; margin: 0; grid-column: 1 / -1; }

/* Opening cash — large amount + denomination chips. */
.co-cash[b-t5rjrlix4p] { display: flex; flex-direction: column; gap: 0.5rem; max-width: 30rem; }
.co-cash__input[b-t5rjrlix4p] {
    min-height: 56px !important;
    font-size: 1.5rem !important;
    font-weight: 700;
    text-align: right;
}

.co-chips[b-t5rjrlix4p] { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.co-chip[b-t5rjrlix4p] {
    min-height: 42px;
    min-width: 66px;
    border-radius: 999px;
    border: 1px solid var(--shell-border, #c9d1dc);
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
}
.co-chip--clear[b-t5rjrlix4p] { background: #fcebeb; border-color: #e24b4a; color: #7a1f1f; }
.co-chip:disabled[b-t5rjrlix4p] { cursor: default; opacity: 0.6; }

.co-grid[b-t5rjrlix4p] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

/* Help panel — fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-t5rjrlix4p] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-t5rjrlix4p] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-t5rjrlix4p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-t5rjrlix4p] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-t5rjrlix4p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-t5rjrlix4p] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-t5rjrlix4p] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-t5rjrlix4p] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-t5rjrlix4p] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-t5rjrlix4p] { padding-left: 0.15rem; }

[b-t5rjrlix4p] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .ct-page__help[b-t5rjrlix4p],
    .ct-page__help--docked[b-t5rjrlix4p] { flex: 0 0 auto; width: 100%; overflow: visible; }
    .co-page__body[b-t5rjrlix4p] { flex-wrap: wrap; }
}
/* /Pages/Cashier/CashReceiptPage.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   CashReceiptPage — the counter's settlement screen.
   Theme-variable surfaces only: every colour comes from a --shell-* token
   that is really defined in wwwroot/css/app.css, so both themes resolve.
   Touch-first, like the collection window: big amounts, big tap targets.
   ══════════════════════════════════════════════════════════════════════════ */

.crc-page[b-5r2xrk8iwm] {
    --crc-gap: 0.85rem;
}

.crc-meta-total strong[b-5r2xrk8iwm] {
    font-variant-numeric: tabular-nums;
    color: var(--shell-accent);
}

/* ── The session strip ────────────────────────────────────────────────── */
.crc-session[b-5r2xrk8iwm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: var(--crc-gap);
    border: 1px solid var(--shell-border);
    border-left: 4px solid var(--shell-accent);
    border-radius: 6px;
    background: var(--shell-panel-background-soft);
}

.crc-session--readonly[b-5r2xrk8iwm] {
    border-left-color: var(--shell-warning);
}

.crc-session__item[b-5r2xrk8iwm] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.crc-session__item--wide[b-5r2xrk8iwm] {
    flex: 1 1 16rem;
}

.crc-session__item span[b-5r2xrk8iwm] {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.crc-session__item strong[b-5r2xrk8iwm] {
    font-size: 0.95rem;
    color: var(--shell-text-primary);
    overflow-wrap: anywhere;
}

/* ── Notices ──────────────────────────────────────────────────────────── */
.crc-notice[b-5r2xrk8iwm] {
    margin: 0 0 var(--crc-gap);
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--shell-warning-border);
    border-radius: 6px;
    background: var(--shell-warning-background);
    color: var(--shell-warning-text);
}

.crc-notice--cancelled[b-5r2xrk8iwm] {
    border-color: var(--shell-status-error-border);
    background: var(--shell-status-error-bg);
    color: var(--shell-status-error-text);
}

.crc-notice a[b-5r2xrk8iwm] {
    color: inherit;
    text-decoration: underline;
}

/* ── Panels ───────────────────────────────────────────────────────────── */
.crc-panel[b-5r2xrk8iwm] {
    margin-bottom: var(--crc-gap);
    border: 1px solid var(--shell-border);
    border-radius: 8px;
    background: var(--shell-panel-background);
}

.crc-panel__head[b-5r2xrk8iwm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--shell-border-subtle);
}

.crc-panel__head h2[b-5r2xrk8iwm] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--shell-text-primary);
}

.crc-scan[b-5r2xrk8iwm] {
    display: flex;
    flex-direction: column;
    min-width: 15rem;
}

.crc-scan label[b-5r2xrk8iwm] {
    font-size: 0.75rem;
    color: var(--shell-text-secondary);
}

/* ── Inputs ───────────────────────────────────────────────────────────── */
.crc-input[b-5r2xrk8iwm] {
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--shell-input-border);
    border-radius: 5px;
    background: var(--shell-input-background);
    color: var(--shell-input-text);
    font: inherit;
}

.crc-input:focus-visible[b-5r2xrk8iwm] {
    outline: 2px solid var(--shell-focus-ring);
    outline-offset: 1px;
}

.crc-input:disabled[b-5r2xrk8iwm] {
    opacity: 0.6;
}

.crc-input.num[b-5r2xrk8iwm] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.crc-input--scan[b-5r2xrk8iwm] {
    font-size: 1.05rem;
}

.crc-input--big[b-5r2xrk8iwm] {
    font-size: 1.2rem;
    padding: 0.5rem 0.6rem;
}

.crc-input--chip[b-5r2xrk8iwm] {
    width: auto;
    min-width: 14rem;
}

.crc-check[b-5r2xrk8iwm] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ── Tables ───────────────────────────────────────────────────────────── */
.crc-tablewrap[b-5r2xrk8iwm] {
    overflow-x: auto;
}

.crc-tablewrap--find[b-5r2xrk8iwm] {
    max-height: 22rem;
    overflow-y: auto;
}

.crc-table[b-5r2xrk8iwm] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.crc-table th[b-5r2xrk8iwm],
.crc-table td[b-5r2xrk8iwm] {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--shell-border-subtle);
    text-align: left;
    vertical-align: top;
}

.crc-table th[b-5r2xrk8iwm] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--shell-panel-background-soft);
    color: var(--shell-text-secondary);
    font-weight: 600;
    white-space: normal;
    font-size: 0.78rem;
}

.crc-table th.num[b-5r2xrk8iwm],
.crc-table td.num[b-5r2xrk8iwm] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.crc-table tfoot td[b-5r2xrk8iwm] {
    background: var(--shell-panel-background-soft);
    font-weight: 600;
    border-bottom: none;
}

.crc-col-tick[b-5r2xrk8iwm] {
    width: 3rem;
    text-align: center;
}

.crc-table td.crc-col-tick[b-5r2xrk8iwm] {
    text-align: center;
}

.crc-note[b-5r2xrk8iwm] {
    color: var(--shell-text-secondary);
    font-size: 0.8rem;
    max-width: 22rem;
}

.crc-row--on[b-5r2xrk8iwm] {
    background: var(--shell-accent-soft);
}

.crc-row--discounted td[b-5r2xrk8iwm] {
    color: var(--shell-success-text);
}

.crc-row--blocked[b-5r2xrk8iwm] {
    background: var(--shell-warning-background);
    color: var(--shell-warning-text);
}

.crc-row--cancelled td[b-5r2xrk8iwm] {
    color: var(--shell-status-error-text);
    text-decoration: line-through;
}

.crc-empty[b-5r2xrk8iwm] {
    padding: 0.9rem;
    margin: 0;
    color: var(--shell-text-secondary);
    text-align: center;
}

/* ── The money side ───────────────────────────────────────────────────── */
.crc-money[b-5r2xrk8iwm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: var(--crc-gap);
    align-items: start;
}

.crc-ladder[b-5r2xrk8iwm] {
    padding: 0.5rem 0.9rem 0.9rem;
}

.crc-ladder__row[b-5r2xrk8iwm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.3rem 0;
}

.crc-ladder__row span[b-5r2xrk8iwm],
.crc-ladder__row label[b-5r2xrk8iwm] {
    color: var(--shell-text-secondary);
}

.crc-ladder__row strong[b-5r2xrk8iwm] {
    font-variant-numeric: tabular-nums;
    color: var(--shell-text-primary);
}

.crc-ladder__row--sub span[b-5r2xrk8iwm] {
    padding-left: 0.75rem;
}

.crc-ladder__row--rule[b-5r2xrk8iwm] {
    border-top: 1px solid var(--shell-border-subtle);
    margin-top: 0.25rem;
    padding-top: 0.5rem;
}

.crc-ladder__row--input .crc-input[b-5r2xrk8iwm] {
    max-width: 9rem;
}

.crc-ladder__row--grand[b-5r2xrk8iwm] {
    margin-top: 0.5rem;
    padding-top: 0.6rem;
    border-top: 2px solid var(--shell-accent);
}

.crc-ladder__row--grand span[b-5r2xrk8iwm] {
    font-weight: 600;
    color: var(--shell-text-primary);
}

.crc-ladder__row--grand strong[b-5r2xrk8iwm] {
    font-size: 1.6rem;
    color: var(--shell-accent);
}

.crc-gifts[b-5r2xrk8iwm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.25rem 0 0.35rem 0.75rem;
}

.crc-chip[b-5r2xrk8iwm] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--shell-border);
    border-radius: 999px;
    background: var(--shell-item-background-subtle);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.crc-chip__x[b-5r2xrk8iwm] {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    color: var(--shell-text-secondary);
    line-height: 1;
}

.crc-chip__x:hover[b-5r2xrk8iwm] {
    color: var(--shell-danger);
}

/* ── Pay modes ────────────────────────────────────────────────────────── */
.crc-modes[b-5r2xrk8iwm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.7rem 0.9rem 0.2rem;
}

.crc-mode[b-5r2xrk8iwm] {
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--shell-border);
    border-radius: 6px;
    background: var(--shell-item-background);
    color: var(--shell-text-primary);
    font: inherit;
    cursor: pointer;
}

.crc-mode:hover:not(:disabled)[b-5r2xrk8iwm] {
    background: var(--shell-item-hover-background);
}

.crc-mode--on[b-5r2xrk8iwm] {
    border-color: var(--shell-accent);
    background: var(--shell-accent);
    color: var(--shell-text-inverse);
    font-weight: 600;
}

.crc-mode:disabled[b-5r2xrk8iwm] {
    opacity: 0.55;
    cursor: default;
}

.crc-payfields[b-5r2xrk8iwm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.6rem 0.9rem;
    padding: 0.7rem 0.9rem 0.9rem;
}

.crc-field[b-5r2xrk8iwm] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.crc-field--wide[b-5r2xrk8iwm] {
    grid-column: 1 / -1;
}

.crc-field label[b-5r2xrk8iwm] {
    font-size: 0.78rem;
    color: var(--shell-text-secondary);
    margin-bottom: 0.15rem;
}

.crc-quick[b-5r2xrk8iwm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    grid-column: 1 / -1;
}

.crc-quick__chip[b-5r2xrk8iwm] {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--shell-border);
    border-radius: 999px;
    background: var(--shell-item-background);
    color: var(--shell-text-primary);
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.crc-quick__chip:hover[b-5r2xrk8iwm] {
    background: var(--shell-item-hover-background);
}

.crc-quick__chip--exact[b-5r2xrk8iwm] {
    border-color: var(--shell-accent);
    color: var(--shell-accent);
}

.crc-change[b-5r2xrk8iwm] {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--shell-border-strong);
    border-radius: 6px;
    background: var(--shell-panel-background-soft);
}

.crc-change strong[b-5r2xrk8iwm] {
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    color: var(--shell-text-primary);
}

.crc-change--due[b-5r2xrk8iwm] {
    border-style: solid;
    border-color: var(--shell-success);
}

.crc-change--due strong[b-5r2xrk8iwm] {
    color: var(--shell-success-text);
}

/* ── Dialogs ──────────────────────────────────────────────────────────── */
.crc-dialog__lead[b-5r2xrk8iwm] {
    margin: 0 0 0.75rem;
    color: var(--shell-text-secondary);
}

.crc-findbar[b-5r2xrk8iwm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.6rem 0.75rem;
    align-items: end;
    margin-bottom: 0.75rem;
}

@media (max-width: 720px) {
    .crc-money[b-5r2xrk8iwm] {
        grid-template-columns: 1fr;
    }

    .crc-session[b-5r2xrk8iwm] {
        gap: 0.4rem 1rem;
    }
}

/* ── Ask for a special discount ───────────────────────────────────────── */
.crc-col-ask[b-5r2xrk8iwm] {
    width: 7rem;
    text-align: center;
}

.crc-table td.crc-col-ask[b-5r2xrk8iwm] {
    text-align: center;
}

.crc-ask[b-5r2xrk8iwm] {
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--shell-accent);
    border-radius: 999px;
    background: transparent;
    color: var(--shell-accent);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.crc-ask:hover[b-5r2xrk8iwm] {
    background: var(--shell-accent-soft);
}

.crc-ask__state[b-5r2xrk8iwm] {
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.crc-ask__state--approved[b-5r2xrk8iwm] {
    color: var(--shell-success-text);
}

.crc-ask__state--pending[b-5r2xrk8iwm] {
    color: var(--shell-warning-text);
}

.crc-ask__state--lapsed[b-5r2xrk8iwm] {
    color: var(--shell-status-error-text);
}

/* ── Send preview ─────────────────────────────────────────────────────── */
.crc-preview[b-5r2xrk8iwm] {
    max-height: 14rem;
    overflow: auto;
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--shell-border);
    border-radius: 6px;
    background: var(--shell-panel-background-soft);
    color: var(--shell-text-primary);
    font-family: inherit;
    font-size: 0.82rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.crc-empty__act[b-5r2xrk8iwm] {
    margin-top: 0.5rem;
}
/* /Pages/Cashier/PettyCashPage.razor.rz.scp.css */
/* Petty Cash — touch-first: session cards, big Receipt/Payout buttons,
   large amount + chips. Shell layout mirrors the other master pages. */

.pc-page__body[b-q2k40a2k4v] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.pc-page__form[b-q2k40a2k4v] {
    flex: 1 1 auto;
    min-width: 0;
}

.pc-form[b-q2k40a2k4v] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pc-strip[b-q2k40a2k4v] { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.pc-section[b-q2k40a2k4v] { display: flex; flex-direction: column; gap: 0.45rem; }
.pc-section__label[b-q2k40a2k4v] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

.pc-f[b-q2k40a2k4v] { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; min-width: 0; }
.pc-f--id[b-q2k40a2k4v] { max-width: 9rem; }
.pc-f--wide[b-q2k40a2k4v] { width: 100%; }

.pc-f input[b-q2k40a2k4v] {
    min-height: 46px;
    font-size: 1rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.55rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    width: 100%;
    box-sizing: border-box;
}

.pc-form input[type="number"][b-q2k40a2k4v] { text-align: right; }   /* numeric right-align convention */
.pc-f input[readonly][b-q2k40a2k4v],
.pc-f input:disabled[b-q2k40a2k4v] { background: var(--shell-panel-background-soft, #f2f4f7); }

/* Open-session cards. */
.pc-sessions[b-q2k40a2k4v] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.6rem;
}

.pc-session[b-q2k40a2k4v] {
    min-height: 86px;
    border-radius: 0.8rem;
    border: 2px solid var(--shell-border, #c9d1dc);
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    cursor: pointer;
    touch-action: manipulation;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.6rem 0.8rem;
    text-align: left;
    transition: border-color 0.15s ease;
}

.pc-session:hover[b-q2k40a2k4v] { border-color: var(--shell-button-primary, #0d6efd); }
.pc-session__id[b-q2k40a2k4v] { font-size: 0.72rem; opacity: 0.6; }
.pc-session__counter[b-q2k40a2k4v] { font-size: 1.05rem; font-weight: 700; }
.pc-session__meta[b-q2k40a2k4v] { font-size: 0.78rem; opacity: 0.75; }
.pc-empty[b-q2k40a2k4v] { font-size: 0.85rem; opacity: 0.75; margin: 0; grid-column: 1 / -1; }

/* Receipt / Payout — the two big buttons. */
.pc-types[b-q2k40a2k4v] { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.pc-type[b-q2k40a2k4v] {
    flex: 1 1 200px;
    min-height: 64px;
    border-radius: 0.8rem;
    border: 2px solid var(--shell-border, #c9d1dc);
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.pc-type .e-icons[b-q2k40a2k4v] { font-size: 1.2rem; }
.pc-type:disabled[b-q2k40a2k4v] { cursor: default; opacity: 0.75; }

.pc-type--in.pc-type--on[b-q2k40a2k4v] { background: #e1f5ee; border-color: #1d9e75; color: #085041; }
.pc-type--out.pc-type--on[b-q2k40a2k4v] { background: #fcebeb; border-color: #e24b4a; color: #791f1f; }

/* Amount — large input + chips. */
.pc-cash[b-q2k40a2k4v] { display: flex; flex-direction: column; gap: 0.5rem; max-width: 28rem; }
.pc-cash__input[b-q2k40a2k4v] {
    min-height: 56px !important;
    font-size: 1.5rem !important;
    font-weight: 700;
    text-align: right;
}

.pc-chips[b-q2k40a2k4v] { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pc-chip[b-q2k40a2k4v] {
    min-height: 42px;
    min-width: 64px;
    border-radius: 999px;
    border: 1px solid var(--shell-border, #c9d1dc);
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
}
.pc-chip--clear[b-q2k40a2k4v] { background: #fcebeb; border-color: #e24b4a; color: #7a1f1f; }
.pc-chip:disabled[b-q2k40a2k4v] { cursor: default; opacity: 0.6; }

/* Help panel — fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-q2k40a2k4v] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-q2k40a2k4v] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-q2k40a2k4v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-q2k40a2k4v] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-q2k40a2k4v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-q2k40a2k4v] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-q2k40a2k4v] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-q2k40a2k4v] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-q2k40a2k4v] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-q2k40a2k4v] { padding-left: 0.15rem; }

[b-q2k40a2k4v] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .ct-page__help[b-q2k40a2k4v],
    .ct-page__help--docked[b-q2k40a2k4v] { flex: 0 0 auto; width: 100%; overflow: visible; }
    .pc-page__body[b-q2k40a2k4v] { flex-wrap: wrap; }
}
/* /Pages/Cashier/SpecialDiscountsPage.razor.rz.scp.css */
/* The desk takes the width beside the help aside (global .master-body flex row). */
.spd-page .spd-main[b-ea2ne3rgzi] { flex: 1 1 auto; min-width: 0; }

.spd-page .spd-tablewrap[b-ea2ne3rgzi] {
    overflow-x: auto;
    border: 1px solid var(--shell-border, #d8dee8);
    border-radius: 8px;
    background: var(--shell-surface, #fff);
}

.spd-table[b-ea2ne3rgzi] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.spd-table th[b-ea2ne3rgzi] {
    background: var(--shell-surface-2, #f3f5f9);
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--shell-border, #d8dee8);
    white-space: normal;
    font-size: 0.72rem;
}
.spd-table td[b-ea2ne3rgzi] { padding: 8px 10px; border-bottom: 1px solid var(--shell-border-soft, #e8ecf2); vertical-align: top; }
.spd-table th.num[b-ea2ne3rgzi], .spd-table td.num[b-ea2ne3rgzi] { text-align: right; font-variant-numeric: tabular-nums; }

/* Status tints - translucent over the theme's own ground (readable in dark
   mode), with a solid edge on the first cell. Same palette as the credit desk:
   amber waiting, green live, grey used / lapsed, red dead end. */
.spd-row--pending td[b-ea2ne3rgzi]   { background: rgba(245, 158, 11, 0.18); }
.spd-row--approved td[b-ea2ne3rgzi]  { background: rgba(40, 167, 69, 0.10); }
.spd-row--used td[b-ea2ne3rgzi]      { background: rgba(120, 128, 140, 0.10); }
.spd-row--cancelled td[b-ea2ne3rgzi] { background: rgba(220, 38, 38, 0.13); }
.spd-row--pending td:first-child[b-ea2ne3rgzi]   { box-shadow: inset 4px 0 0 #d97706; }
.spd-row--approved td:first-child[b-ea2ne3rgzi]  { box-shadow: inset 4px 0 0 #2f9e55; }
.spd-row--used td:first-child[b-ea2ne3rgzi]      { box-shadow: inset 4px 0 0 #7a8290; }
.spd-row--cancelled td:first-child[b-ea2ne3rgzi] { box-shadow: inset 4px 0 0 #dc2626; }
.spd-row--pending td:nth-child(7)[b-ea2ne3rgzi] { font-weight: 700; }

tr.spd-row--focus > td[b-ea2ne3rgzi] {
    box-shadow: inset 0 1px 0 var(--shell-button-primary, #0f6f74), inset 0 -1px 0 var(--shell-button-primary, #0f6f74);
}
tr.spd-row--focus > td:first-child[b-ea2ne3rgzi] {
    box-shadow: inset 4px 0 0 var(--shell-button-primary, #0f6f74), inset 0 1px 0 var(--shell-button-primary, #0f6f74), inset 0 -1px 0 var(--shell-button-primary, #0f6f74);
}

.spd-remarks[b-ea2ne3rgzi] { max-width: 240px; }
.spd-actions[b-ea2ne3rgzi] { white-space: nowrap; }
.spd-actions[b-ea2ne3rgzi]  .e-btn { margin-inline-end: 4px; }
.spd-empty[b-ea2ne3rgzi] { text-align: center; color: var(--shell-muted, #8a93a3); padding: 24px; }
.spd-status[b-ea2ne3rgzi] { color: var(--shell-muted, #55607a); }
.spd-notinstalled[b-ea2ne3rgzi] {
    border: 1px dashed var(--shell-border, #d8dee8);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 12px;
    color: var(--shell-muted, #55607a);
}

.spd-form label[b-ea2ne3rgzi] { display: block; margin-top: 0.6rem; font-size: 0.85rem; }
.spd-form input[b-ea2ne3rgzi] { margin-top: 0.2rem; }
.spd-hint[b-ea2ne3rgzi] { font-size: 0.78rem; color: var(--shell-muted, #8a93a3); margin: 0.25rem 0 0; }
.spd-type[b-ea2ne3rgzi] { display: flex; gap: 1.2rem; margin-top: 0.6rem; }
.spd-type label[b-ea2ne3rgzi] { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; }

.spd-billopt[b-ea2ne3rgzi] { display: grid; grid-template-columns: 7rem 1fr auto; gap: 0.6rem; align-items: baseline; }
.spd-billopt .num[b-ea2ne3rgzi] { font-variant-numeric: tabular-nums; }

/* The live verdict under the value - what the API will decide. */
.spd-preview[b-ea2ne3rgzi] {
    display: grid;
    gap: 0.15rem;
    margin-top: 0.7rem;
    padding: 0.5rem 0.65rem;
    border-radius: 4px;
    font-size: 0.84rem;
}
.spd-preview strong[b-ea2ne3rgzi] { font-variant-numeric: tabular-nums; }
.spd-preview--ok[b-ea2ne3rgzi]      { border-left: 3px solid #2f9e55; background: rgba(40, 167, 69, 0.10); }
.spd-preview--pending[b-ea2ne3rgzi] { border-left: 3px solid #d97706; background: rgba(245, 158, 11, 0.12); }
.spd-preview--over[b-ea2ne3rgzi]    { border-left: 3px solid #dc2626; background: rgba(220, 38, 38, 0.10); }
/* /Pages/CRM/AutoMessagesPage.razor.rz.scp.css */
/* Communications > Automatic Messages. Shared CRM pieces are in app.css (.crm-scope). Shell tokens only. */
.crm-mas__body[b-99nvi17fzr] { display: flex; gap: 1rem; align-items: stretch; min-height: 0; }
.crm-mas__main[b-99nvi17fzr] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.crm-chn__bar[b-99nvi17fzr] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.crm-chn__form[b-99nvi17fzr] { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px dashed var(--shell-border); display: flex; flex-direction: column; gap: 0.75rem; }
.crm-chn__form h3[b-99nvi17fzr] { margin: 0; font-size: 1rem; }
.crm-chn__sub[b-99nvi17fzr] { margin: 0.4rem 0 0; font-size: 0.95rem; }

.amr-tabs[b-99nvi17fzr] { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem 0 0; border-bottom: 1px solid var(--shell-border); }
.amr-tab[b-99nvi17fzr] {
    border: 1px solid transparent; border-bottom: none; background: none; color: var(--shell-text-secondary);
    padding: 0.4rem 0.9rem; border-radius: 6px 6px 0 0; font: inherit; cursor: pointer; margin-bottom: -1px;
}
.amr-tab:hover:not(:disabled)[b-99nvi17fzr] { color: var(--shell-text-primary); }
.amr-tab:focus-visible[b-99nvi17fzr] { outline: 2px solid var(--shell-accent); outline-offset: -2px; }
.amr-tab:disabled[b-99nvi17fzr] { opacity: 0.45; cursor: default; }
.amr-tab--on[b-99nvi17fzr] { color: var(--shell-text-primary); background: var(--shell-panel-background); border-color: var(--shell-border); font-weight: 600; }

.amr-two[b-99nvi17fzr] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.25rem; }
.amr-pair[b-99nvi17fzr] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; }
.amr-checks[b-99nvi17fzr] { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; padding-top: 0.35rem; }
.amr-checks label[b-99nvi17fzr] { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.amr-radios[b-99nvi17fzr] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.amr-radio[b-99nvi17fzr] {
    display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; border: 1px solid var(--shell-border);
    border-radius: 6px; padding: 0.3rem 0.75rem; color: var(--shell-text-primary);
}
.amr-radio--on[b-99nvi17fzr] { border-color: var(--shell-accent); box-shadow: inset 0 0 0 1px var(--shell-accent); }
[b-99nvi17fzr] .amr-body textarea { min-height: 9rem; resize: vertical; font-family: inherit; }

.blk-ph[b-99nvi17fzr] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.4rem; }
.blk-ph__label[b-99nvi17fzr] { font-size: 0.8rem; color: var(--shell-text-secondary); margin-right: 0.25rem; }
.amr-chip[b-99nvi17fzr] {
    font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; cursor: pointer; border: 1px solid var(--shell-border);
    border-radius: 4px; padding: 0.1rem 0.4rem; background: var(--shell-panel-background-soft); color: var(--shell-text-primary);
}
.amr-chip:hover[b-99nvi17fzr], .amr-chip:focus-visible[b-99nvi17fzr] { border-color: var(--shell-accent); outline: none; }

.amr-previewbar[b-99nvi17fzr] { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem; }
.amr-previewbar[b-99nvi17fzr]  .amr-previewbar__no { max-width: 16rem; }
.amr-pv[b-99nvi17fzr] { border: 1px solid var(--shell-border); border-radius: 8px; padding: 0.5rem 0.65rem; display: flex; flex-direction: column; gap: 0.35rem; background: var(--shell-panel-background); }
.amr-pv__head[b-99nvi17fzr] { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.amr-pv__subject[b-99nvi17fzr] { font-weight: 600; padding: 0.3rem 0.5rem; border-left: 3px solid var(--shell-accent); background: var(--shell-panel-background-soft); overflow-wrap: anywhere; }
/* the e-mail is shown as it goes - on white, like a mail program */
.amr-pv__frame[b-99nvi17fzr] { width: 100%; height: 260px; border: 1px solid var(--shell-border); border-radius: 6px; background: #fff; }
.amr-pv__text[b-99nvi17fzr] { white-space: pre-wrap; overflow-wrap: anywhere; padding: 0.5rem 0.65rem; border: 1px solid var(--shell-border); border-radius: 12px 12px 12px 2px; background: var(--shell-panel-background-soft); }
.amr-link[b-99nvi17fzr] { border: none; background: none; padding: 0; font: inherit; color: var(--shell-accent); cursor: pointer; text-decoration: underline; }
.amr-link:disabled[b-99nvi17fzr] { opacity: 0.5; cursor: default; }
.crm-chn__bar[b-99nvi17fzr]  .amr-filter { width: 14rem; }

@media (max-width: 800px) {
    .amr-two[b-99nvi17fzr] { grid-template-columns: minmax(0, 1fr); }
}

/* status rows - skipped / declined orange, failed red (the house status colours) */
[b-99nvi17fzr] .e-row.lookup-row--inactive .e-rowcell:not(.e-active) { background: #ffe3c2; }
[b-99nvi17fzr] .e-row.lookup-row--cancelled .e-rowcell:not(.e-active) { background: #ffd2d2; }
html[data-theme-appearance="dark"] .amr[b-99nvi17fzr]  .e-row.lookup-row--inactive .e-rowcell:not(.e-active) { background: color-mix(in srgb, #ff9f40 22%, transparent); }
html[data-theme-appearance="dark"] .amr[b-99nvi17fzr]  .e-row.lookup-row--cancelled .e-rowcell:not(.e-active) { background: color-mix(in srgb, #ff5a5a 22%, transparent); }
/* /Pages/CRM/BulkCommPage.razor.rz.scp.css */
/* Communications > Bulk Messages. Shared CRM pieces are in app.css (.crm-scope). Shell tokens only. */
.crm-mas__body[b-do7onek8co] { display: flex; gap: 1rem; align-items: stretch; min-height: 0; }
.crm-mas__main[b-do7onek8co] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }

.crm-chn__bar[b-do7onek8co] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.crm-chn__form[b-do7onek8co] { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px dashed var(--shell-border); display: flex; flex-direction: column; gap: 0.75rem; }
.crm-chn__form h3[b-do7onek8co] { margin: 0; font-size: 1rem; }
.crm-chn__two[b-do7onek8co] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.25rem; }
.crm-chn__sub[b-do7onek8co] { margin: 0.4rem 0 0; font-size: 0.95rem; }

/* the view switch under the toolbar */
.blk-tabs[b-do7onek8co] { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem 0 0; border-bottom: 1px solid var(--shell-border); }
.blk-tab[b-do7onek8co] {
    position: relative; border: 1px solid transparent; border-bottom: none; background: none; color: var(--shell-text-secondary);
    padding: 0.4rem 0.9rem; border-radius: 6px 6px 0 0; font: inherit; cursor: pointer; margin-bottom: -1px;
}
.blk-tab:hover:not(:disabled)[b-do7onek8co] { color: var(--shell-text-primary); }
.blk-tab:focus-visible[b-do7onek8co] { outline: 2px solid var(--shell-accent); outline-offset: -2px; }
.blk-tab:disabled[b-do7onek8co] { opacity: 0.45; cursor: default; }
.blk-tab--on[b-do7onek8co] { color: var(--shell-text-primary); background: var(--shell-panel-background); border-color: var(--shell-border); font-weight: 600; }
.blk-tab__dot[b-do7onek8co] { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--shell-accent); margin-left: 0.35rem; vertical-align: middle; }

/* kinds as choice cards */
.blk-kinds[b-do7onek8co] { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.6rem; }
.blk-kind[b-do7onek8co] {
    display: flex; flex-direction: column; gap: 0.25rem; text-align: left; font: inherit; cursor: pointer;
    border: 1px solid var(--shell-border); border-radius: 8px; padding: 0.65rem 0.8rem;
    background: var(--shell-panel-background); color: var(--shell-text-primary);
}
.blk-kind:hover:not(:disabled)[b-do7onek8co] { border-color: var(--shell-accent); }
.blk-kind:focus-visible[b-do7onek8co] { outline: 2px solid var(--shell-accent); outline-offset: 1px; }
.blk-kind--on[b-do7onek8co] { border-color: var(--shell-accent); box-shadow: inset 0 0 0 1px var(--shell-accent); background: var(--shell-panel-background-soft); }
.blk-kind__name[b-do7onek8co] { font-weight: 600; }
.blk-kind__about[b-do7onek8co] { font-size: 0.85rem; color: var(--shell-text-secondary); }
.blk-kind__mod[b-do7onek8co] { font-size: 0.75rem; color: var(--shell-text-muted); letter-spacing: 0.02em; }

/* fields */
.blk-pair[b-do7onek8co] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.blk-find[b-do7onek8co] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: end; }
.blk-hits[b-do7onek8co], .blk-chips[b-do7onek8co] { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.blk-hit[b-do7onek8co] {
    font: inherit; font-size: 0.85rem; cursor: pointer; border: 1px dashed var(--shell-border); border-radius: 999px;
    padding: 0.15rem 0.6rem; background: none; color: var(--shell-text-primary);
}
.blk-hit small[b-do7onek8co] { color: var(--shell-text-muted); margin-left: 0.25rem; }
.blk-hit:hover[b-do7onek8co], .blk-hit--on[b-do7onek8co] { border-style: solid; border-color: var(--shell-accent); }
.blk-chip__x[b-do7onek8co] { border: none; background: none; color: inherit; cursor: pointer; padding: 0 0 0 0.3rem; font-size: 1rem; line-height: 1; }
.blk-days[b-do7onek8co] { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; padding-top: 0.35rem; }
.blk-day[b-do7onek8co] { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }

.blk-channels[b-do7onek8co] { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.1rem; }
.blk-channel[b-do7onek8co] {
    display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; border: 1px solid var(--shell-border);
    border-radius: 6px; padding: 0.3rem 0.75rem; color: var(--shell-text-primary);
}
.blk-channel--on[b-do7onek8co] { border-color: var(--shell-accent); box-shadow: inset 0 0 0 1px var(--shell-accent); }
[b-do7onek8co] .blk-body textarea { min-height: 11rem; resize: vertical; font-family: inherit; }

.blk-ph[b-do7onek8co] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.4rem; }
.blk-ph__label[b-do7onek8co] { font-size: 0.8rem; color: var(--shell-text-secondary); margin-right: 0.25rem; }
.blk-ph__chip[b-do7onek8co] {
    font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; cursor: pointer; border: 1px solid var(--shell-border);
    border-radius: 4px; padding: 0.1rem 0.4rem; background: var(--shell-panel-background-soft); color: var(--shell-text-primary);
}
.blk-ph__chip:hover[b-do7onek8co], .blk-ph__chip:focus-visible[b-do7onek8co] { border-color: var(--shell-accent); outline: none; }

/* preview */
.blk-sum[b-do7onek8co] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-bottom: 0.5rem; }
.blk-num[b-do7onek8co] { font-variant-numeric: tabular-nums; }
.blk-split[b-do7onek8co] { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
.blk-split__list[b-do7onek8co] { min-width: 0; }
.blk-split__view[b-do7onek8co] { min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.blk-view__head[b-do7onek8co] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.blk-view__subject[b-do7onek8co] { font-weight: 600; padding: 0.35rem 0.5rem; border-left: 3px solid var(--shell-accent); background: var(--shell-panel-background-soft); overflow-wrap: anywhere; }
/* the e-mail is shown as it goes - on white, like a mail program */
.blk-view__frame[b-do7onek8co] { width: 100%; height: 400px; border: 1px solid var(--shell-border); border-radius: 6px; background: #fff; }
.blk-view__text[b-do7onek8co] { white-space: pre-wrap; overflow-wrap: anywhere; padding: 0.6rem 0.75rem; border: 1px solid var(--shell-border); border-radius: 12px 12px 12px 2px; background: var(--shell-panel-background-soft); }
.blk-tick[b-do7onek8co] { width: 1rem; height: 1rem; cursor: pointer; }
.blk-tick:disabled[b-do7onek8co] { cursor: not-allowed; }
.blk-link[b-do7onek8co] { border: none; background: none; padding: 0; font: inherit; color: var(--shell-accent); cursor: pointer; text-decoration: underline; }
.blk-link:disabled[b-do7onek8co] { opacity: 0.5; cursor: default; }
.blk-confirm[b-do7onek8co] { white-space: pre-line; }

@media (max-width: 1100px) {
    .blk-split[b-do7onek8co] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
    .crm-chn__two[b-do7onek8co] { grid-template-columns: minmax(0, 1fr); }
    .blk-pair[b-do7onek8co] { grid-template-columns: minmax(0, 1fr); }
}

/* status rows - left out / cancelled orange, failed red (the house status colours) */
[b-do7onek8co] .e-row.lookup-row--inactive .e-rowcell:not(.e-active) { background: #ffe3c2; }
[b-do7onek8co] .e-row.lookup-row--cancelled .e-rowcell:not(.e-active) { background: #ffd2d2; }
html[data-theme-appearance="dark"] .blk[b-do7onek8co]  .e-row.lookup-row--inactive .e-rowcell:not(.e-active) { background: color-mix(in srgb, #ff9f40 22%, transparent); }
html[data-theme-appearance="dark"] .blk[b-do7onek8co]  .e-row.lookup-row--cancelled .e-rowcell:not(.e-active) { background: color-mix(in srgb, #ff5a5a 22%, transparent); }
/* /Pages/CRM/CrmActivitiesPage.razor.rz.scp.css */
/* CRM > My Follow-ups. Shared CRM pieces are in app.css (.crm-scope). */

.crm-act__body[b-hui8tpcbva] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.crm-act__main[b-hui8tpcbva] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.crm-act__filter[b-hui8tpcbva] { flex: 0 1 190px; min-width: 150px; }

/* The grid takes what is left and keeps its pager in sight. */
[b-hui8tpcbva] .crm-act__grid.e-grid {
    flex: 1 1 auto;
    min-height: 360px;
}

[b-hui8tpcbva] .crm-act__row--overdue td.e-rowcell:nth-child(2) {
    color: var(--shell-danger, #c62828);
    font-weight: 600;
}

@media (max-width: 900px) {
    .crm-act__body[b-hui8tpcbva] { flex-direction: column; }
}
/* /Pages/CRM/CrmAdAccountsPage.razor.rz.scp.css */
/* CRM > Ad Accounts. Its own copy of the shell blocks, because scoped CSS
   follows the component that renders the markup - the identical rules in
   CrmCampaignsPage.razor.css do not reach this page. Shell tokens only, and
   every block closed. */
.crm-mas__body[b-ghzyr2wrhj] { display: flex; gap: 1rem; align-items: stretch; min-height: 0; }
.crm-mas__main[b-ghzyr2wrhj] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }

.crm-chn__bar[b-ghzyr2wrhj] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.crm-chn__form[b-ghzyr2wrhj] { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px dashed var(--shell-border); display: flex; flex-direction: column; gap: 0.75rem; }
.crm-chn__form h3[b-ghzyr2wrhj] { margin: 0; font-size: 1rem; }
.crm-chn__two[b-ghzyr2wrhj] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.25rem; }

/* The account list from Meta, and the pull log. Numbers right, headings
   wrapped rather than truncated, and the table scrolls sideways on its own so
   the page never does. */
.crmads-table[b-ghzyr2wrhj] { width: 100%; border-collapse: collapse; font-size: 0.88rem; display: block; overflow-x: auto; }
.crmads-table th[b-ghzyr2wrhj],
.crmads-table td[b-ghzyr2wrhj] { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--shell-border); text-align: left; vertical-align: top; }
.crmads-table th[b-ghzyr2wrhj] { font-weight: 600; white-space: normal; font-size: 0.82rem; }
.crmads-table td code[b-ghzyr2wrhj] { font: 0.82rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }

@media (max-width: 800px) {
    .crm-chn__two[b-ghzyr2wrhj] { grid-template-columns: minmax(0, 1fr); }
}
/* /Pages/CRM/CrmApprovalsPage.razor.rz.scp.css */
/* CRM > Approvals. Shared CRM pieces are in app.css (.crm-scope). */

.crm-mas__body[b-ndp7l72nyv] { display: flex; gap: 1rem; align-items: stretch; min-height: 0; }
.crm-mas__main[b-ndp7l72nyv] { flex: 1 1 auto; min-width: 0; }

.crm-apv__split[b-ndp7l72nyv] {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
    gap: 1rem;
    align-items: start;
}

.crm-mas__list[b-ndp7l72nyv], .crm-mas__form[b-ndp7l72nyv] { min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.crm-apv__facts[b-ndp7l72nyv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
}
.crm-apv__facts > div[b-ndp7l72nyv] { display: flex; flex-direction: column; min-width: 0; }
.crm-apv__facts span[b-ndp7l72nyv] { font-size: 0.78rem; opacity: 0.75; }
.crm-apv__facts strong[b-ndp7l72nyv] { overflow-wrap: anywhere; }

.crm-apv__decide[b-ndp7l72nyv] { border-color: var(--shell-accent, #2563eb); }

.crm-apv__level[b-ndp7l72nyv] {
    border: 1px solid var(--shell-border);
    border-left-width: 4px;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}
.crm-apv__level + .crm-apv__level[b-ndp7l72nyv] { margin-top: 0.5rem; }
.crm-apv__level--complete[b-ndp7l72nyv] { border-left-color: var(--shell-success, #2e7d32); }
.crm-apv__level--open[b-ndp7l72nyv] { border-left-color: var(--shell-warning, #b26a00); }
.crm-apv__level--rejected[b-ndp7l72nyv] { border-left-color: var(--shell-danger, #c62828); }
.crm-apv__levelhead[b-ndp7l72nyv] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

.crm-apv__history[b-ndp7l72nyv] { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.crm-apv__history li > span[b-ndp7l72nyv] { margin-right: 0.4rem; }

[b-ndp7l72nyv] .crm-apv__row--mine td { font-weight: 700; }

@media (max-width: 1200px) { .crm-apv__split[b-ndp7l72nyv] { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
    .crm-mas__body[b-ndp7l72nyv] { flex-direction: column; }
    .crm-apv__facts[b-ndp7l72nyv] { grid-template-columns: minmax(0, 1fr); }
}
.crm-apv__level--skipped[b-ndp7l72nyv] { border-left-color: var(--shell-border); opacity: 0.75; }
.crm-apv__cond[b-ndp7l72nyv] { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.84rem; overflow-wrap: anywhere; }
/* /Pages/CRM/CrmAssignmentPage.razor.rz.scp.css */
/* CRM > Lead Intake / Assignment Rules. Shared CRM pieces are in app.css (.crm-scope). Shell tokens only. */
.crm-mas__body[b-g2egoahxpj] { display: flex; gap: 1rem; align-items: stretch; min-height: 0; }
.crm-mas__main[b-g2egoahxpj] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }

.crm-chn__bar[b-g2egoahxpj] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.crm-chn__form[b-g2egoahxpj] { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px dashed var(--shell-border); display: flex; flex-direction: column; gap: 0.75rem; }
.crm-chn__form h3[b-g2egoahxpj] { margin: 0; font-size: 1rem; }
.crm-chn__two[b-g2egoahxpj] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.25rem; }
.crm-chn__port[b-g2egoahxpj] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.25rem 0.75rem; }
.crm-chn__port .app-field-hint[b-g2egoahxpj] { grid-column: 1 / -1; }

.crm-chn__test[b-g2egoahxpj] { font-size: 0.9rem; padding: 0.25rem 0.6rem; border-radius: 6px; border: 1px solid var(--shell-border); overflow-wrap: anywhere; }
.crm-chn__test--ok[b-g2egoahxpj] { border-color: var(--shell-success, #2e7d32); }
.crm-chn__test--bad[b-g2egoahxpj] { border-color: var(--shell-danger, #c62828); }

@media (max-width: 800px) {
    .crm-chn__two[b-g2egoahxpj] { grid-template-columns: minmax(0, 1fr); }
}

.crm-int__days[b-g2egoahxpj] { display: inline-flex; align-items: end; }
.crm-int__snippet[b-g2egoahxpj] { margin: 0; max-height: 18rem; overflow: auto; padding: 0.75rem; border: 1px solid var(--shell-border); border-radius: 6px;
    background: var(--shell-surface-muted, transparent); font: 0.8rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; }

.crm-asg__wide[b-g2egoahxpj] { grid-column: 1 / -1; }
.crm-asg__times[b-g2egoahxpj] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.25rem 0.75rem; }
.crm-asg__times .app-field-hint[b-g2egoahxpj] { grid-column: 1 / -1; }
.crm-asg__days[b-g2egoahxpj] { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; padding-top: 0.6rem; }
.crm-asg__chips[b-g2egoahxpj] { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.crm-asg__chip[b-g2egoahxpj] { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.3rem 0.15rem 0.6rem; border: 1px solid var(--shell-border); border-radius: 999px; font-size: 0.88rem; }
.crm-asg__chip button[b-g2egoahxpj] { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0.1rem; line-height: 1; border-radius: 50%; }
.crm-asg__chip button:hover:not(:disabled)[b-g2egoahxpj], .crm-asg__chip button:focus-visible[b-g2egoahxpj] { background: color-mix(in srgb, var(--shell-accent, #2563eb) 14%, transparent); }
.crm-asg__chip button:disabled[b-g2egoahxpj] { opacity: 0.35; cursor: default; }
.crm-asg__try[b-g2egoahxpj] { min-width: 12rem; }
.crm-asg__result[b-g2egoahxpj] { margin-top: 0.6rem; padding: 0.6rem 0.8rem; border: 1px solid var(--shell-border); border-radius: 6px; }
.crm-asg__result p[b-g2egoahxpj] { margin: 0 0 0.35rem; }
.crm-asg__result ul[b-g2egoahxpj] { margin: 0.25rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; }
/* /Pages/CRM/CrmBoardPage.razor.rz.scp.css */
/* CRM > Board. Shell tokens only; the shared CRM pieces (chips, muted text, dialogs) are in app.css. */

.crm-board__body[b-3jw5mtov9y] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.crm-board__main[b-3jw5mtov9y] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.crm-board__bar[b-3jw5mtov9y] { align-items: flex-end; }
.crm-board__filter[b-3jw5mtov9y] { flex: 0 1 190px; min-width: 150px; }
.crm-board__filter--search[b-3jw5mtov9y] { flex: 1 1 240px; }

/* The columns scroll sideways in their OWN container - the page never does. */
.crm-board__cols[b-3jw5mtov9y] {
    flex: 1 1 auto;
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    min-height: 0;
}

.crm-board__col[b-3jw5mtov9y] {
    flex: 0 0 290px;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    max-height: calc(100vh - 290px);
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, transparent);
}
.crm-board__col--won[b-3jw5mtov9y] { border-top: 3px solid var(--shell-success, #2e7d32); }
.crm-board__col--lost[b-3jw5mtov9y] { border-top: 3px solid var(--shell-danger, #c62828); }
.crm-board__col--over[b-3jw5mtov9y] {
    outline: 2px dashed var(--shell-accent, #2f7d6b);
    outline-offset: -3px;
}

.crm-board__colhead[b-3jw5mtov9y] {
    flex: 0 0 auto;
    padding: 0.55rem 0.7rem 0.45rem;
    border-bottom: 1px solid var(--shell-border);
}
.crm-board__colname[b-3jw5mtov9y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
}
.crm-board__colfig[b-3jw5mtov9y] {
    display: flex;
    flex-direction: column;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.crm-board__cards[b-3jw5mtov9y] {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.55rem;
}
.crm-board__empty[b-3jw5mtov9y] { padding: 0.4rem 0.2rem; }
[b-3jw5mtov9y] .crm-board__more.e-btn { align-self: center; }

.crm-card[b-3jw5mtov9y] {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--shell-border);
    border-inline-start: 3px solid var(--shell-accent, #2f7d6b);
    border-radius: 0.5rem;
    background: var(--shell-panel-background, var(--shell-surface, #fff));
    color: var(--shell-text-primary);
    font-size: 0.86rem;
    cursor: grab;
}
.crm-card[draggable="false"][b-3jw5mtov9y] { cursor: default; }
.crm-card:focus-visible[b-3jw5mtov9y] {
    outline: 2px solid var(--shell-accent, #2f7d6b);
    outline-offset: 2px;
}
.crm-card--overdue[b-3jw5mtov9y] { border-inline-start-color: var(--shell-danger, #c62828); }
.crm-card--dragging[b-3jw5mtov9y] { opacity: 0.45; }
.crm-card--pending[b-3jw5mtov9y] { opacity: 0.6; cursor: progress; }

.crm-card__top[b-3jw5mtov9y] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.4rem;
}
.crm-card__name[b-3jw5mtov9y] { overflow-wrap: anywhere; }
.crm-card__open[b-3jw5mtov9y] {
    flex: 0 0 auto;
    border: 1px solid var(--shell-border);
    border-radius: 0.35rem;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    padding: 0.15rem 0.35rem;
    cursor: pointer;
}
.crm-card__open:focus-visible[b-3jw5mtov9y] { outline: 2px solid var(--shell-accent, #2f7d6b); }
.crm-card__party[b-3jw5mtov9y] { overflow-wrap: anywhere; }
.crm-card__fig[b-3jw5mtov9y],
.crm-card__meta[b-3jw5mtov9y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.crm-card__fig[b-3jw5mtov9y] { font-weight: 600; font-variant-numeric: tabular-nums; }
.crm-card__meta[b-3jw5mtov9y] { font-size: 0.78rem; }
.crm-card__due--late[b-3jw5mtov9y] { color: var(--shell-danger, #c62828); font-weight: 600; }
.crm-card__wait[b-3jw5mtov9y] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
}
.crm-card__move[b-3jw5mtov9y] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
    color: var(--shell-text-secondary, var(--shell-text-primary));
}
.crm-card__move select[b-3jw5mtov9y] {
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    color: var(--shell-text-primary);
    background: var(--shell-panel-background, transparent);
    border: 1px solid var(--shell-border);
    border-radius: 0.3rem;
    padding: 0.1rem 0.25rem;
}

@media (max-width: 900px) {
    .crm-board__body[b-3jw5mtov9y] { flex-direction: column; }
    .crm-board__col[b-3jw5mtov9y] { flex-basis: 82vw; max-height: none; }
}

@media (prefers-reduced-motion: no-preference) {
    .crm-card[b-3jw5mtov9y] { transition: opacity 0.15s ease; }
}
/* /Pages/CRM/CrmBroadcastsPage.razor.rz.scp.css */
/* CRM > Bulk Messages. Shell tokens only, so both themes work. */
.crm-chn__two[b-0r3bfxia54] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.25rem; }
.crm-chn__bar[b-0r3bfxia54] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }

/* the step number on a fieldset legend - the three steps are a real sequence */
.bc-step[b-0r3bfxia54] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.35rem; height: 1.35rem; margin-right: 0.35rem; border-radius: 50%;
    background: var(--shell-accent, #2563eb); color: var(--shell-text-inverse, #fff);
    font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: 1px;
}

/* channel switch - a segmented control */
.bc-channels[b-0r3bfxia54] { display: inline-flex; padding: 3px; gap: 2px; margin-bottom: 0.75rem; border-radius: 8px; background: var(--shell-surface-muted, rgba(127,127,127,.12)); border: 1px solid var(--shell-border, rgba(127,127,127,.25)); }
.bc-channel[b-0r3bfxia54] { display: inline-flex; align-items: center; gap: .4rem; border: 0; background: transparent; color: var(--shell-text-muted, inherit); padding: .4rem 1rem; border-radius: 6px; font: inherit; font-size: .88rem; cursor: pointer; }
.bc-channel:hover[b-0r3bfxia54] { color: var(--shell-text, inherit); }
.bc-channel.is-on[b-0r3bfxia54] { background: var(--shell-surface, #fff); color: var(--shell-accent, #2563eb); box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight: 600; }
.bc-channel:focus-visible[b-0r3bfxia54] { outline: 2px solid var(--shell-accent, #2563eb); outline-offset: 1px; }

[b-0r3bfxia54] .bc-sms textarea { min-height: 8rem; }

/* WhatsApp template + preview bubble */
.bc-wa[b-0r3bfxia54] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 0.75rem; }
.bc-wa__params[b-0r3bfxia54] { display: flex; flex-direction: column; gap: .5rem; }
.bc-bubble[b-0r3bfxia54] { padding: .7rem .9rem 1rem; border-radius: 10px 10px 10px 2px; background: var(--shell-status-ok-bg, rgba(37,211,102,.14)); border: 1px solid var(--shell-border, rgba(127,127,127,.2)); }
.bc-bubble--doc[b-0r3bfxia54] { border-radius: 8px; background: var(--shell-surface-muted, rgba(127,127,127,.06)); max-height: 16rem; overflow-y: auto; }
.bc-bubble p[b-0r3bfxia54] { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; line-height: 1.45; }
.bc-bubble__label[b-0r3bfxia54] { display: block; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--shell-text-muted, inherit); margin-bottom: .3rem; }

/* attachments */
.bc-attach[b-0r3bfxia54] { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: 0.75rem; }
.bc-attach__btn[b-0r3bfxia54] { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; margin: 0; }
.bc-attach__total[b-0r3bfxia54] { margin-left: auto; font-size: .8rem; font-variant-numeric: tabular-nums; }
.bc-files[b-0r3bfxia54] { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.bc-files li[b-0r3bfxia54] { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .25rem .35rem .25rem .6rem; border-radius: 6px; border: 1px solid var(--shell-border, rgba(127,127,127,.25)); background: var(--shell-surface-muted, rgba(127,127,127,.06)); font-size: .82rem; overflow-wrap: anywhere; }
.bc-x[b-0r3bfxia54] { border: 0; background: transparent; color: var(--shell-text-muted, inherit); font-size: 1.05rem; line-height: 1; padding: 0 .3rem; cursor: pointer; border-radius: 4px; }
.bc-x:hover[b-0r3bfxia54], .bc-x:focus-visible[b-0r3bfxia54] { color: var(--shell-danger, #b42318); background: var(--shell-item-hover-background, rgba(127,127,127,.12)); outline: none; }

/* audience filters - three across, full width */
.bc-filters[b-0r3bfxia54] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem 1.25rem; }

/* the tally above the preview */
.bc-tally[b-0r3bfxia54] { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.75rem; }
.bc-tally__item[b-0r3bfxia54] { display: flex; flex-direction: column; min-width: 8rem; padding: 0.5rem 0.9rem; border-radius: 8px; border: 1px solid var(--shell-border, rgba(127,127,127,.25)); background: var(--shell-surface, #fff); }
.bc-tally__item span[b-0r3bfxia54] { font-size: 0.72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--shell-text-muted, inherit); }
.bc-tally__item strong[b-0r3bfxia54] { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.bc-tally__item--go strong[b-0r3bfxia54] { color: var(--shell-status-ok-text, #1a7f37); }
.bc-tally__item--skip strong[b-0r3bfxia54] { color: var(--shell-status-warn-text, #9a6700); }
.bc-tick[b-0r3bfxia54] { width: 1rem; height: 1rem; cursor: pointer; accent-color: var(--shell-accent, #2563eb); }

/* pills: status, will-it-go, channel */
.bc-pill[b-0r3bfxia54], .bc-chan[b-0r3bfxia54] { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.bc-pill--go[b-0r3bfxia54], .bc-pill--sent[b-0r3bfxia54], .bc-pill--done[b-0r3bfxia54] { background: var(--shell-status-ok-bg, #dafbe1); color: var(--shell-status-ok-text, #1a7f37); }
.bc-pill--skip[b-0r3bfxia54], .bc-pill--skipped[b-0r3bfxia54], .bc-pill--pending[b-0r3bfxia54], .bc-pill--queued[b-0r3bfxia54] { background: var(--shell-status-warn-bg, #fff8c5); color: var(--shell-status-warn-text, #9a6700); }
.bc-pill--failed[b-0r3bfxia54], .bc-pill--cancelled[b-0r3bfxia54] { background: var(--shell-status-error-bg, #ffebe9); color: var(--shell-status-error-text, #cf222e); }
.bc-pill--sending[b-0r3bfxia54] { background: var(--shell-status-info-bg, #ddf4ff); color: var(--shell-status-info-text, #0969da); }
.bc-chan--email[b-0r3bfxia54] { background: color-mix(in srgb, var(--shell-accent, #2563eb) 14%, transparent); color: var(--shell-accent, #2563eb); }
.bc-chan--sms[b-0r3bfxia54] { background: color-mix(in srgb, var(--shell-success, #2e7d32) 16%, transparent); color: var(--shell-success, #2e7d32); }
.bc-chan--whatsapp[b-0r3bfxia54] { background: color-mix(in srgb, #1fa855 18%, transparent); color: color-mix(in srgb, #1fa855 75%, var(--shell-text-primary, #1f2937)); }

/* progress: sent / failed / skipped on one bar */
.bc-progress[b-0r3bfxia54] { display: inline-flex; align-items: center; gap: 0.5rem; width: 100%; }
.bc-progress__bar[b-0r3bfxia54] { display: flex; flex: 1 1 auto; height: 0.5rem; border-radius: 999px; overflow: hidden; background: var(--shell-surface-muted, rgba(127,127,127,.15)); min-width: 5rem; }
.bc-progress__sent[b-0r3bfxia54] { background: var(--shell-success, #2e7d32); }
.bc-progress__failed[b-0r3bfxia54] { background: var(--shell-danger, #cf222e); }
.bc-progress__skipped[b-0r3bfxia54] { background: var(--shell-warning, #b26a00); opacity: 0.6; }
.bc-progress__text[b-0r3bfxia54] { font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--shell-text-muted, inherit); white-space: nowrap; }

/* the detail of one send */
.bc-detail[b-0r3bfxia54] { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.25rem; margin-bottom: 0.9rem; align-items: start; }
.bc-facts[b-0r3bfxia54] { margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.bc-facts div[b-0r3bfxia54] { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 0.5rem; }
.bc-facts dt[b-0r3bfxia54] { font-size: 0.78rem; color: var(--shell-text-muted, inherit); }
.bc-facts dd[b-0r3bfxia54] { margin: 0; overflow-wrap: anywhere; }
.bc-num[b-0r3bfxia54] { font-variant-numeric: tabular-nums; }

/* status rows - Failed / Cancelled red, Skipped orange (the house status colours) */
[b-0r3bfxia54] .e-row.lookup-row--inactive .e-rowcell:not(.e-active) { background: #ffe3c2; }
[b-0r3bfxia54] .e-row.lookup-row--cancelled .e-rowcell:not(.e-active) { background: #ffd2d2; }
html[data-theme-appearance="dark"] .bc-page[b-0r3bfxia54]  .e-row.lookup-row--inactive .e-rowcell:not(.e-active) { background: color-mix(in srgb, #ff9f40 22%, transparent); }
html[data-theme-appearance="dark"] .bc-page[b-0r3bfxia54]  .e-row.lookup-row--cancelled .e-rowcell:not(.e-active) { background: color-mix(in srgb, #ff5a5a 22%, transparent); }

@media (max-width: 1100px) { .bc-filters[b-0r3bfxia54] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)
{
    .crm-chn__two[b-0r3bfxia54], .bc-wa[b-0r3bfxia54], .bc-detail[b-0r3bfxia54], .bc-filters[b-0r3bfxia54] { grid-template-columns: minmax(0, 1fr); }
    .bc-channels[b-0r3bfxia54] { display: flex; }
    .bc-channel[b-0r3bfxia54] { flex: 1; justify-content: center; }
    .bc-facts div[b-0r3bfxia54] { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* the audience condition - the approval workflows' builder */
.bc-cond[b-0r3bfxia54] { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px dashed var(--shell-border, rgba(127,127,127,.3)); display: flex; flex-direction: column; gap: 0.4rem; }
.bc-cond__title[b-0r3bfxia54] { margin: 0; font-size: 0.95rem; }
.bc-cond__title .crm-muted[b-0r3bfxia54] { font-weight: 400; font-size: 0.82rem; }

/* a send card's progress bar */
.bc-card-progress[b-0r3bfxia54] { margin-top: 0.45rem; }
/* /Pages/CRM/CrmCallsPage.razor.rz.scp.css */
/* CRM > Telephony and CRM > Calls. Shared CRM pieces are in app.css (.crm-scope). Shell tokens only. */
.crm-mas__body[b-fq6jv99mbt] { display: flex; gap: 1rem; align-items: stretch; min-height: 0; }
.crm-mas__main[b-fq6jv99mbt] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }

.crm-chn__bar[b-fq6jv99mbt] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.crm-chn__form[b-fq6jv99mbt] { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px dashed var(--shell-border); display: flex; flex-direction: column; gap: 0.75rem; }
.crm-chn__form h3[b-fq6jv99mbt] { margin: 0; font-size: 1rem; }
.crm-chn__two[b-fq6jv99mbt] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.25rem; }
.crm-chn__port[b-fq6jv99mbt] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.25rem 0.75rem; }
.crm-chn__port .app-field-hint[b-fq6jv99mbt] { grid-column: 1 / -1; }

.crm-chn__test[b-fq6jv99mbt] { font-size: 0.9rem; padding: 0.25rem 0.6rem; border-radius: 6px; border: 1px solid var(--shell-border); overflow-wrap: anywhere; }
.crm-chn__test--ok[b-fq6jv99mbt] { border-color: var(--shell-success, #2e7d32); }
.crm-chn__test--bad[b-fq6jv99mbt] { border-color: var(--shell-danger, #c62828); }

@media (max-width: 800px) {
    .crm-chn__two[b-fq6jv99mbt] { grid-template-columns: minmax(0, 1fr); }
}

.crm-tel__wide[b-fq6jv99mbt] { grid-column: 1 / -1; }
.crm-tel__code[b-fq6jv99mbt]  textarea { font: 0.82rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; min-height: 5rem; }

.crm-calls__tally[b-fq6jv99mbt] { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 0.5rem; font-size: 0.9rem; }
.crm-calls__tally strong[b-fq6jv99mbt] { font-variant-numeric: tabular-nums; }
/* /Pages/CRM/CrmCampaignsPage.razor.rz.scp.css */
/* CRM > Campaigns. Shared CRM pieces are in app.css (.crm-scope); these are the
   page's own, because scoped CSS follows the component that renders the markup -
   the same blocks in CrmTelephonyPage.razor.css do not reach this page. Shell
   tokens only, and every block closed (an unclosed one takes the whole scoped
   bundle with it - see 2026-09-22). */
.crm-mas__body[b-rk9dt0215h] { display: flex; gap: 1rem; align-items: stretch; min-height: 0; }
.crm-mas__main[b-rk9dt0215h] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }

.crm-chn__bar[b-rk9dt0215h] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.crm-chn__form[b-rk9dt0215h] { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px dashed var(--shell-border); display: flex; flex-direction: column; gap: 0.75rem; }
.crm-chn__form h3[b-rk9dt0215h] { margin: 0; font-size: 1rem; }
.crm-chn__two[b-rk9dt0215h] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.25rem; }

/* A field that wants the whole width of the two-column grid - notes, mostly. */
.app-field--wide[b-rk9dt0215h] { grid-column: 1 / -1; }

/* The sources, the spend and the day-by-day tables. Numbers right, headings
   wrapped rather than truncated, and the whole thing scrolls sideways on its
   own so the page never does. */
.crmcamp-table[b-rk9dt0215h] { width: 100%; border-collapse: collapse; font-size: 0.88rem; display: block; overflow-x: auto; }
.crmcamp-table th[b-rk9dt0215h],
.crmcamp-table td[b-rk9dt0215h] { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--shell-border); text-align: left; vertical-align: top; }
.crmcamp-table th[b-rk9dt0215h] { font-weight: 600; white-space: normal; font-size: 0.82rem; }
.crmcamp-table td code[b-rk9dt0215h] { font: 0.82rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.crmcamp-table h4[b-rk9dt0215h] { margin: 0.75rem 0 0.25rem; font-size: 0.95rem; }

@media (max-width: 800px) {
    .crm-chn__two[b-rk9dt0215h] { grid-template-columns: minmax(0, 1fr); }
}
/* /Pages/CRM/CrmChannelsPage.razor.rz.scp.css */
/* CRM > Channels. Shared CRM pieces are in app.css (.crm-scope). Shell tokens only. */
.crm-mas__body[b-6isk2x4v88] { display: flex; gap: 1rem; align-items: stretch; min-height: 0; }
.crm-mas__main[b-6isk2x4v88] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }

.crm-chn__bar[b-6isk2x4v88] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.crm-chn__form[b-6isk2x4v88] { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px dashed var(--shell-border); display: flex; flex-direction: column; gap: 0.75rem; }
.crm-chn__form h3[b-6isk2x4v88] { margin: 0; font-size: 1rem; }
.crm-chn__two[b-6isk2x4v88] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.25rem; }
.crm-chn__port[b-6isk2x4v88] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.25rem 0.75rem; }
.crm-chn__port .app-field-hint[b-6isk2x4v88] { grid-column: 1 / -1; }

.crm-chn__test[b-6isk2x4v88] { font-size: 0.9rem; padding: 0.25rem 0.6rem; border-radius: 6px; border: 1px solid var(--shell-border); overflow-wrap: anywhere; }
.crm-chn__test--ok[b-6isk2x4v88] { border-color: var(--shell-success, #2e7d32); }
.crm-chn__test--bad[b-6isk2x4v88] { border-color: var(--shell-danger, #c62828); }

@media (max-width: 800px) {
    .crm-chn__two[b-6isk2x4v88] { grid-template-columns: minmax(0, 1fr); }
}
.crm-chn__sub[b-6isk2x4v88] { margin: 0.9rem 0 0.4rem; font-size: 0.95rem; }
/* status rows of this page's grids - Inactive orange, Rejected / Deleted red (the house status colours) */
[b-6isk2x4v88] .e-row.lookup-row--inactive .e-rowcell:not(.e-active) { background: #ffe3c2; }
[b-6isk2x4v88] .e-row.lookup-row--cancelled .e-rowcell:not(.e-active) { background: #ffd2d2; }
html[data-theme-appearance="dark"] .crm-mas[b-6isk2x4v88]  .e-row.lookup-row--inactive .e-rowcell:not(.e-active) { background: color-mix(in srgb, #ff9f40 22%, transparent); }
html[data-theme-appearance="dark"] .crm-mas[b-6isk2x4v88]  .e-row.lookup-row--cancelled .e-rowcell:not(.e-active) { background: color-mix(in srgb, #ff5a5a 22%, transparent); }
/* /Pages/CRM/CrmContactPage.razor.rz.scp.css */
/* CRM > Contacts - the page's own layout; the shared CRM pieces are in app.css (.crm-scope). */

.crm-con__body[b-3gngx575rr] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.crm-con__form[b-3gngx575rr] {
    flex: 1 1 auto;
    min-width: 0;
}

.crm-con__detail[b-3gngx575rr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

[b-3gngx575rr] .crm-con__notes textarea { min-height: 120px; }

@media (max-width: 900px) {
    .crm-con__body[b-3gngx575rr] { flex-direction: column; }
}
/* /Pages/CRM/CrmCustomerPage.razor.rz.scp.css */
/* CRM > Customer view (360). Shell tokens only; shared CRM pieces are in app.css (.crm-scope). */

.crm360__body[b-pg77snotbp] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.crm360__main[b-pg77snotbp] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.crm360__facts[b-pg77snotbp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.6rem;
}
.crm360__fact[b-pg77snotbp] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.55rem;
    background: var(--shell-panel-background-soft, transparent);
}
.crm360__fact > span[b-pg77snotbp] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--shell-text-secondary, var(--shell-text-primary));
}
.crm360__fact > strong[b-pg77snotbp] { font-variant-numeric: tabular-nums; }
.crm360__fact--late > strong[b-pg77snotbp] { color: var(--shell-danger, #c62828); }
.crm360__fact--warn > strong[b-pg77snotbp] { color: var(--shell-warning, #b26a00); }

.crm360__cols[b-pg77snotbp] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 1rem;
    align-items: start;
}
.crm360__col[b-pg77snotbp] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.crm360__list[b-pg77snotbp] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
/* A row that opens something looks and behaves like a button - it IS one. */
.crm360__row[b-pg77snotbp] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.45rem 0.6rem;
    text-align: start;
    font: inherit;
    font-size: 0.88rem;
    color: var(--shell-text-primary);
    background: transparent;
    border: 1px solid var(--shell-border);
    border-radius: 0.45rem;
    cursor: pointer;
}
.crm360__row:hover[b-pg77snotbp] { background: var(--shell-panel-background-soft, rgba(127, 127, 127, 0.08)); }
.crm360__row:focus-visible[b-pg77snotbp],
.crm360__open:focus-visible[b-pg77snotbp],
.crm360__kind:focus-visible[b-pg77snotbp] { outline: 2px solid var(--shell-accent, #2f7d6b); outline-offset: 2px; }
.crm360__row-main[b-pg77snotbp],
.crm360__row-sub[b-pg77snotbp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.crm360__row-sub[b-pg77snotbp] {
    font-size: 0.8rem;
    color: var(--shell-text-secondary, var(--shell-text-primary));
}
.crm360__num[b-pg77snotbp] { font-variant-numeric: tabular-nums; font-weight: 600; }

.crm360__open[b-pg77snotbp] {
    margin-inline-start: auto;
    border: 1px solid var(--shell-border);
    border-radius: 0.35rem;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    padding: 0.15rem 0.35rem;
    cursor: pointer;
}

.crm360__kinds[b-pg77snotbp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
.crm360__kind[b-pg77snotbp] {
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--shell-border);
    background: transparent;
    color: var(--shell-text-secondary, var(--shell-text-primary));
    cursor: pointer;
}
.crm360__kind--on[b-pg77snotbp] {
    border-color: var(--shell-accent, #2f7d6b);
    color: var(--shell-accent, #2f7d6b);
}
.crm360__kind--on[b-pg77snotbp]::before { content: "\2713\00a0"; }

.crm360__tl--stage[b-pg77snotbp] { border-inline-start-color: var(--shell-warning, #b26a00); }
.crm360__tl--voucher[b-pg77snotbp] { border-inline-start-color: var(--shell-text-secondary, #6b7280); }
.crm360__tl--activity[b-pg77snotbp] { border-inline-start-color: var(--shell-accent, #2f7d6b); }

@media (max-width: 1100px) {
    .crm360__cols[b-pg77snotbp] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .crm360__body[b-pg77snotbp] { flex-direction: column; }
}
/* /Pages/CRM/CrmFollowUpEntryPage.razor.rz.scp.css */
/* CRM > Follow-up Entry. Shared CRM pieces (.crm-group, .crm-grid, .crm-chip,
   .crm-timeline, .crm-muted) live in app.css under .crm-scope. */

.crm-fue__body[b-6muqpf6r9g] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.crm-fue__main[b-6muqpf6r9g] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: auto;
}

/* The picked lead at a glance: label over value, as many columns as fit. */
.crm-fue__facts[b-6muqpf6r9g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.5rem 1rem;
    margin-top: 0.75rem;
}

.crm-fue__facts > div[b-6muqpf6r9g] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.crm-fue__facts span[b-6muqpf6r9g] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--shell-text-muted, #5f6b7a);
}

.crm-fue__facts strong[b-6muqpf6r9g] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-fue__req[b-6muqpf6r9g] {
    margin: 0.75rem 0 0;
}

.crm-fue__req span[b-6muqpf6r9g] {
    font-weight: 600;
}

.crm-fue__open[b-6muqpf6r9g] {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--shell-status-warn-text, #b26a00);
    background: var(--shell-status-warn-bg, rgba(178, 106, 0, 0.06));
    border-radius: 4px;
}

.crm-fue__open-head[b-6muqpf6r9g] {
    margin: 0 0 0.25rem;
    font-weight: 600;
}

.crm-fue__recent[b-6muqpf6r9g] {
    margin-top: 0.75rem;
}

.crm-fue__recent summary[b-6muqpf6r9g] {
    cursor: pointer;
    font-weight: 600;
}

@media (max-width: 900px) {
    .crm-fue__body[b-6muqpf6r9g] { flex-direction: column; }
}
/* /Pages/CRM/CrmInboxPage.razor.rz.scp.css */
/* CRM > Inbox - a mail client's three panes: folder rail, message list, reading pane.
   Shell tokens only, so both themes work; an avatar's hue comes from --ibx-hue (set per person). */

.ibx-body[b-noa0egvv07] { display: flex; gap: 1rem; align-items: stretch; min-height: 0; }

.ibx[b-noa0egvv07] {
    --ibx-sel: color-mix(in srgb, var(--shell-accent, #2563eb) 13%, transparent);
    --ibx-hover: color-mix(in srgb, var(--shell-text-primary, #1f2937) 5%, transparent);
    --ibx-line: var(--shell-border, #dfe3ea);
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: 13.5rem minmax(19rem, 25rem) minmax(0, 1fr);
    height: calc(100dvh - 11.5rem);
    min-height: 32rem;
    border: 1px solid var(--ibx-line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, #1f2937);
    box-shadow: 0 1px 2px color-mix(in srgb, #000 6%, transparent), 0 8px 24px -12px color-mix(in srgb, #000 18%, transparent);
}

/* ── avatars ── */
.ibx-avatar[b-noa0egvv07] {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: hsl(var(--ibx-hue, 210) 52% 44%);
    user-select: none;
}
.ibx-avatar--lg[b-noa0egvv07] { width: 2.75rem; height: 2.75rem; font-size: 0.95rem; }
.ibx-avatar--sm[b-noa0egvv07] { width: 2rem; height: 2rem; font-size: 0.74rem; }

/* ── the folder rail ── */
.ibx-rail[b-noa0egvv07] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.9rem 0.6rem;
    background: var(--shell-panel-background-soft, #f6f8fb);
    border-right: 1px solid var(--ibx-line);
    overflow-y: auto;
    min-width: 0;
}
.ibx-rail__title[b-noa0egvv07] { display: flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; font-weight: 700; padding: 0 0.5rem 0.4rem; }
.ibx-rail__title .e-icons[b-noa0egvv07] { color: var(--shell-accent, #2563eb); }
/* New message - the one filled button of the rail, as in a mail client */
.ibx-rail__actions[b-noa0egvv07] { display: flex; flex-direction: column; gap: 0.3rem; padding: 0 0.1rem 0.5rem; margin-bottom: 0.2rem; border-bottom: 1px solid var(--ibx-line); }
.ibx-newbtn[b-noa0egvv07] {
    display: flex; align-items: center; justify-content: center; gap: 0.45rem;
    border: 0; border-radius: 8px; padding: 0.55rem 0.75rem; cursor: pointer;
    font: inherit; font-size: 0.9rem; font-weight: 600;
    background: var(--shell-button-primary, var(--shell-accent, #2563eb)); color: var(--shell-text-inverse, #fff);
    box-shadow: 0 1px 2px color-mix(in srgb, #000 14%, transparent);
}
.ibx-newbtn:hover[b-noa0egvv07] { background: var(--shell-button-primary-hover, var(--shell-accent, #1d4ed8)); }
.ibx-newbtn:focus-visible[b-noa0egvv07], .ibx-railbtn:focus-visible[b-noa0egvv07] { outline: 2px solid var(--shell-focus-ring, var(--shell-accent, #2563eb)); outline-offset: 2px; }
.ibx-railbtn--sync[b-noa0egvv07] { justify-content: center; border: 1px solid var(--ibx-line); }
.ibx-railbtn:disabled[b-noa0egvv07] { opacity: 0.6; cursor: progress; }
.ibx-folders[b-noa0egvv07] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ibx-folder[b-noa0egvv07] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.92rem;
    text-align: left;
    cursor: pointer;
    position: relative;
}
.ibx-folder:hover:not(:disabled)[b-noa0egvv07] { background: var(--ibx-hover); }
.ibx-folder--on[b-noa0egvv07] { background: var(--ibx-sel); font-weight: 600; }
.ibx-folder--on[b-noa0egvv07]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 3px;
    background: var(--shell-accent, #2563eb);
}
.ibx-folder__icon[b-noa0egvv07] { opacity: 0.75; }
.ibx-folder__name[b-noa0egvv07] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibx-folder__badge[b-noa0egvv07] {
    min-width: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--shell-accent, #2563eb);
    color: var(--shell-button-primary-text, #fff);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.35rem;
    font-variant-numeric: tabular-nums;
}
.ibx-folder__count[b-noa0egvv07] { font-size: 0.8rem; color: var(--shell-text-secondary, #5b6472); font-variant-numeric: tabular-nums; }

.ibx-rail__label[b-noa0egvv07] {
    margin: 0.9rem 0.5rem 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--shell-text-secondary, #5b6472);
}
.ibx-chips[b-noa0egvv07] { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0 0.4rem; }
.ibx-chip[b-noa0egvv07] {
    border: 1px solid var(--ibx-line);
    background: var(--shell-panel-background, #fff);
    color: inherit;
    font: inherit;
    font-size: 0.8rem;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    cursor: pointer;
}
.ibx-chip:hover:not(:disabled)[b-noa0egvv07] { border-color: var(--shell-accent, #2563eb); }
.ibx-chip--on[b-noa0egvv07] { background: var(--shell-accent, #2563eb); border-color: var(--shell-accent, #2563eb); color: var(--shell-button-primary-text, #fff); font-weight: 600; }

.ibx-rail__foot[b-noa0egvv07] { margin-top: auto; padding: 0.75rem 0.4rem 0; border-top: 1px solid var(--ibx-line); display: flex; flex-direction: column; gap: 0.3rem; }
.ibx-railbtn[b-noa0egvv07] {
    display: flex; align-items: center; gap: 0.5rem;
    border: 0; background: transparent; color: inherit; font: inherit; font-size: 0.88rem;
    padding: 0.4rem 0.5rem; border-radius: 8px; cursor: pointer; text-align: left;
}
.ibx-railbtn:hover[b-noa0egvv07] { background: var(--ibx-hover); }
.ibx-rail__hint[b-noa0egvv07] { font-size: 0.75rem; color: var(--shell-text-secondary, #5b6472); padding: 0 0.5rem; }

/* ── the message list ── */
.ibx-list[b-noa0egvv07] { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--ibx-line); }
.ibx-list__top[b-noa0egvv07] { padding: 0.75rem 0.75rem 0.4rem; display: flex; flex-direction: column; gap: 0.5rem; border-bottom: 1px solid var(--ibx-line); }
.ibx-search[b-noa0egvv07] { position: relative; display: flex; align-items: center; }
.ibx-search__icon[b-noa0egvv07] { position: absolute; left: 0.65rem; opacity: 0.55; pointer-events: none; }
.ibx-search__input[b-noa0egvv07] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 2rem 0.5rem 2.1rem;
    border: 1px solid var(--ibx-line);
    border-radius: 8px;
    background: var(--shell-panel-background-soft, #f6f8fb);
    color: inherit;
    font: inherit;
    font-size: 0.9rem;
}
.ibx-search__input:focus[b-noa0egvv07] { outline: none; border-color: var(--shell-accent, #2563eb); box-shadow: 0 0 0 3px color-mix(in srgb, var(--shell-accent, #2563eb) 20%, transparent); background: var(--shell-panel-background, #fff); }
.ibx-search__input[b-noa0egvv07]::-webkit-search-cancel-button { display: none; }
.ibx-search__clear[b-noa0egvv07] { position: absolute; right: 0.3rem; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0.25rem; border-radius: 6px; opacity: 0.7; }
.ibx-search__clear:hover[b-noa0egvv07] { opacity: 1; background: var(--ibx-hover); }
.ibx-list__bar[b-noa0egvv07] { display: flex; align-items: center; gap: 0.6rem; }
.ibx-list__heading[b-noa0egvv07] { flex: 1 1 auto; font-weight: 700; font-size: 0.95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibx-unread[b-noa0egvv07] { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; cursor: pointer; }
.ibx-iconbtn[b-noa0egvv07] { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0.3rem 0.4rem; border-radius: 6px; }
.ibx-iconbtn:hover:not(:disabled)[b-noa0egvv07] { background: var(--ibx-hover); }
.ibx-spin[b-noa0egvv07] { display: inline-block; animation: ibx-spin-b-noa0egvv07 0.9s linear infinite; }
@keyframes ibx-spin-b-noa0egvv07 { to { transform: rotate(360deg); } }

.ibx-list__scroll[b-noa0egvv07] { flex: 1 1 auto; min-height: 0; overflow-y: auto; outline: none; }
.ibx-list__scroll:focus-visible[b-noa0egvv07] { box-shadow: inset 0 0 0 2px var(--shell-focus-ring, var(--shell-accent, #2563eb)); }
.ibx-group[b-noa0egvv07] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.35rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--shell-text-secondary, #5b6472);
    background: var(--shell-panel-background-soft, #f6f8fb);
    border-bottom: 1px solid var(--ibx-line);
}
.ibx-item[b-noa0egvv07] {
    width: 100%;
    display: flex;
    gap: 0.7rem;
    padding: 0.65rem 0.8rem 0.65rem 0.9rem;
    border: 0;
    border-bottom: 1px solid var(--ibx-line);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    position: relative;
}
.ibx-item:hover[b-noa0egvv07] { background: var(--ibx-hover); }
.ibx-item--on[b-noa0egvv07], .ibx-item--on:hover[b-noa0egvv07] { background: var(--ibx-sel); }
.ibx-item--unread[b-noa0egvv07]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--shell-accent, #2563eb);
}
.ibx-item__body[b-noa0egvv07] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.ibx-item__line[b-noa0egvv07] { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.ibx-item__who[b-noa0egvv07] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.93rem; }
.ibx-item__when[b-noa0egvv07] { flex: 0 0 auto; font-size: 0.76rem; color: var(--shell-text-secondary, #5b6472); font-variant-numeric: tabular-nums; }
.ibx-item__subject[b-noa0egvv07] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; }
.ibx-item__count[b-noa0egvv07] { flex: 0 0 auto; font-size: 0.72rem; font-weight: 700; color: var(--shell-accent, #2563eb); }
.ibx-item__snippet[b-noa0egvv07] {
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6472);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
}
.ibx-item--unread .ibx-item__who[b-noa0egvv07], .ibx-item--unread .ibx-item__subject[b-noa0egvv07] { font-weight: 700; }
.ibx-item--unread .ibx-item__subject[b-noa0egvv07], .ibx-item--unread .ibx-item__when[b-noa0egvv07] { color: var(--shell-accent, #2563eb); }
.ibx-item__tags[b-noa0egvv07] { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.2rem; }
.ibx-tag[b-noa0egvv07] {
    font-size: 0.68rem;
    padding: 0.05rem 0.45rem;
    border-radius: 4px;
    background: var(--shell-pill-bg, color-mix(in srgb, var(--shell-text-primary, #1f2937) 7%, transparent));
    color: var(--shell-pill-text, var(--shell-text-secondary, #5b6472));
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ibx-tag--mail[b-noa0egvv07] { background: color-mix(in srgb, var(--shell-accent, #2563eb) 14%, transparent); color: var(--shell-accent, #2563eb); }
.ibx-tag--sms[b-noa0egvv07] { background: color-mix(in srgb, var(--shell-success, #2e7d32) 16%, transparent); color: var(--shell-success, #2e7d32); }
.ibx-tag--wa[b-noa0egvv07] { background: color-mix(in srgb, #1fa855 18%, transparent); color: color-mix(in srgb, #1fa855 75%, var(--shell-text-primary, #1f2937)); }
.ibx-tag--tray[b-noa0egvv07] { background: color-mix(in srgb, var(--shell-warning, #b26a00) 16%, transparent); color: var(--shell-warning, #b26a00); }
.ibx-list__foot[b-noa0egvv07] { padding: 0.35rem 0.8rem; font-size: 0.72rem; color: var(--shell-text-secondary, #5b6472); border-top: 1px solid var(--ibx-line); }

/* ── the reading pane ── */
.ibx-read[b-noa0egvv07] { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; background: var(--shell-panel-background, #fff); }
.ibx-cmdbar[b-noa0egvv07] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
    padding: 0.45rem 0.75rem;
    background: var(--shell-panel-background-soft, #f6f8fb);
    border-bottom: 1px solid var(--ibx-line);
}
.ibx-cmd[b-noa0egvv07] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.86rem;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    cursor: pointer;
}
.ibx-cmd:hover:not(:disabled)[b-noa0egvv07] { background: var(--ibx-hover); border-color: var(--ibx-line); }
.ibx-cmd:disabled[b-noa0egvv07] { opacity: 0.5; cursor: default; }
.ibx-cmd .e-icons[b-noa0egvv07] { font-size: 0.95rem; opacity: 0.85; }
.ibx-cmd--primary[b-noa0egvv07] { background: var(--shell-accent, #2563eb); color: var(--shell-button-primary-text, #fff); font-weight: 600; }
.ibx-cmd--primary:hover:not(:disabled)[b-noa0egvv07] { background: color-mix(in srgb, var(--shell-accent, #2563eb) 88%, #000); border-color: transparent; }
.ibx-cmd--end[b-noa0egvv07] { margin-left: auto; }

.ibx-head[b-noa0egvv07] { padding: 1.1rem 1.4rem 0.6rem; display: flex; flex-direction: column; gap: 0.7rem; }
.ibx-head__subject[b-noa0egvv07] { margin: 0; font-size: 1.35rem; font-weight: 600; line-height: 1.3; text-wrap: balance; overflow-wrap: anywhere; }
.ibx-head__meta[b-noa0egvv07] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.ibx-head__who[b-noa0egvv07] { display: flex; flex-direction: column; min-width: 0; flex: 1 1 14rem; }
.ibx-head__who strong[b-noa0egvv07] { font-size: 1rem; }
.ibx-head__who span[b-noa0egvv07] { font-size: 0.82rem; color: var(--shell-text-secondary, #5b6472); overflow-wrap: anywhere; }
.ibx-head__chips[b-noa0egvv07] { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ibx-head__hint[b-noa0egvv07] { margin: 0; font-size: 0.84rem; color: var(--shell-text-secondary, #5b6472); }
.ibx-pill[b-noa0egvv07] {
    font-size: 0.78rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--ibx-line);
    background: var(--shell-panel-background-soft, #f6f8fb);
    color: inherit;
    font-family: inherit;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ibx-pill--link[b-noa0egvv07] { cursor: pointer; color: var(--shell-accent, #2563eb); border-color: color-mix(in srgb, var(--shell-accent, #2563eb) 40%, transparent); }
.ibx-pill--link:hover[b-noa0egvv07] { background: var(--ibx-sel); }
.ibx-pill--warn[b-noa0egvv07] { color: var(--shell-warning, #b26a00); border-color: color-mix(in srgb, var(--shell-warning, #b26a00) 45%, transparent); }

.ibx-thread[b-noa0egvv07] { list-style: none; margin: 0; padding: 0.4rem 1.4rem 1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.ibx-msg[b-noa0egvv07] { border: 1px solid var(--ibx-line); border-radius: 10px; background: var(--shell-panel-background, #fff); min-width: 0; }
.ibx-msg--out[b-noa0egvv07] { background: color-mix(in srgb, var(--shell-accent, #2563eb) 4%, var(--shell-panel-background, #fff)); }
.ibx-msg--open[b-noa0egvv07] { box-shadow: 0 1px 3px color-mix(in srgb, #000 8%, transparent); }
.ibx-msg__head[b-noa0egvv07] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.85rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 10px;
}
.ibx-msg__head:hover[b-noa0egvv07] { background: var(--ibx-hover); }
.ibx-msg__head:focus-visible[b-noa0egvv07], .ibx-item:focus-visible[b-noa0egvv07], .ibx-folder:focus-visible[b-noa0egvv07], .ibx-chip:focus-visible[b-noa0egvv07], .ibx-cmd:focus-visible[b-noa0egvv07],
.ibx-att:focus-visible[b-noa0egvv07], .ibx-quickreply:focus-visible[b-noa0egvv07], .ibx-pill--link:focus-visible[b-noa0egvv07] {
    outline: 2px solid var(--shell-focus-ring, var(--shell-accent, #2563eb));
    outline-offset: -2px;
}
/* a narrow reading pane: the sender keeps at least 8rem and the status + date wrap under it,
   instead of the name being squeezed to nothing beneath the pill (seen 2026-09-28) */
.ibx-msg__head[b-noa0egvv07] { flex-wrap: wrap; row-gap: 0.25rem; }
.ibx-msg__who[b-noa0egvv07] { flex: 1 1 8rem; min-width: 0; display: flex; flex-direction: column; }
.ibx-msg__who strong[b-noa0egvv07] { font-size: 0.92rem; }
.ibx-msg__to[b-noa0egvv07], .ibx-msg__peek[b-noa0egvv07] { font-size: 0.8rem; color: var(--shell-text-secondary, #5b6472); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibx-msg__side[b-noa0egvv07] { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 0.55rem; }
.ibx-msg__clip[b-noa0egvv07] { opacity: 0.65; }
.ibx-msg__when[b-noa0egvv07] { font-size: 0.78rem; color: var(--shell-text-secondary, #5b6472); font-variant-numeric: tabular-nums; }
.ibx-status[b-noa0egvv07] { font-size: 0.7rem; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 999px; }
.ibx-status--in[b-noa0egvv07] { background: color-mix(in srgb, var(--shell-accent, #2563eb) 12%, transparent); color: var(--shell-accent, #2563eb); }
.ibx-status--sent[b-noa0egvv07] { background: color-mix(in srgb, var(--shell-text-primary, #1f2937) 8%, transparent); color: var(--shell-text-secondary, #5b6472); }
.ibx-status--ok[b-noa0egvv07] { background: color-mix(in srgb, var(--shell-success, #2e7d32) 15%, transparent); color: var(--shell-success, #2e7d32); }
.ibx-status--bad[b-noa0egvv07] { background: color-mix(in srgb, var(--shell-danger, #c62828) 14%, transparent); color: var(--shell-danger, #c62828); }
.ibx-msg__body[b-noa0egvv07] { padding: 0.2rem 1rem 1rem 3.55rem; display: flex; flex-direction: column; gap: 0.7rem; }
.ibx-msg__text[b-noa0egvv07] { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; font-size: 0.93rem; max-width: 72ch; }
.ibx-msg__error[b-noa0egvv07] { margin: 0; padding: 0.4rem 0.6rem; border-radius: 6px; font-size: 0.85rem; color: var(--shell-danger, #c62828); background: color-mix(in srgb, var(--shell-danger, #c62828) 9%, transparent); }
.ibx-atts[b-noa0egvv07] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ibx-att[b-noa0egvv07] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 16rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--ibx-line);
    border-radius: 8px;
    background: var(--shell-panel-background-soft, #f6f8fb);
    color: inherit;
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}
.ibx-att:hover:not(:disabled)[b-noa0egvv07] { border-color: var(--shell-accent, #2563eb); }
.ibx-att:disabled[b-noa0egvv07] { opacity: 0.55; cursor: not-allowed; }
.ibx-att__name[b-noa0egvv07] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibx-att__size[b-noa0egvv07] { flex: 0 0 auto; color: var(--shell-text-secondary, #5b6472); font-size: 0.74rem; }

.ibx-quickreply[b-noa0egvv07] {
    position: sticky;
    bottom: 0;
    margin: auto 1.4rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ibx-line);
    border-radius: 10px;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-secondary, #5b6472);
    font: inherit;
    font-size: 0.92rem;
    text-align: left;
    cursor: text;
    box-shadow: 0 -6px 16px -10px color-mix(in srgb, #000 25%, transparent);
}
.ibx-quickreply:hover:not(:disabled)[b-noa0egvv07] { border-color: var(--shell-accent, #2563eb); color: var(--shell-text-primary, #1f2937); }

/* ── empty states ── */
.ibx-empty[b-noa0egvv07] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; padding: 3rem 1.5rem; text-align: center; color: var(--shell-text-secondary, #5b6472); }
.ibx-empty strong[b-noa0egvv07] { color: var(--shell-text-primary, #1f2937); font-size: 1rem; }
.ibx-empty span:last-child[b-noa0egvv07] { font-size: 0.85rem; max-width: 32ch; }
.ibx-empty__icon[b-noa0egvv07] { font-size: 2.2rem; opacity: 0.35; margin-bottom: 0.3rem; }
.ibx-empty--read[b-noa0egvv07] { flex: 1 1 auto; }

/* ── the link dialog ── */
.crm-inbox__linkbar[b-noa0egvv07] { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 0.75rem; }
.crm-inbox__linklist[b-noa0egvv07] { list-style: none; margin: 0.5rem 0 0; padding: 0; max-height: 18rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.25rem; }
.crm-inbox__hit[b-noa0egvv07] {
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--shell-border);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.crm-inbox__hit--on[b-noa0egvv07] { border-color: var(--shell-accent, #2563eb); box-shadow: inset 3px 0 0 var(--shell-accent, #2563eb); }
.crm-inbox__hit:focus-visible[b-noa0egvv07] { outline: 2px solid var(--shell-accent, #2563eb); outline-offset: 1px; }

/* ── narrower screens ── */
@media (max-width: 1280px) {
    .ibx[b-noa0egvv07] { grid-template-columns: 11.5rem minmax(17rem, 21rem) minmax(0, 1fr); }
}
@media (max-width: 980px) {
    .ibx[b-noa0egvv07] { grid-template-columns: minmax(0, 1fr); height: auto; }
    .ibx-rail[b-noa0egvv07] { flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--ibx-line); }
    .ibx-folders[b-noa0egvv07] { flex-direction: row; flex-wrap: wrap; }
    .ibx-rail__label[b-noa0egvv07], .ibx-rail__foot[b-noa0egvv07], .ibx-rail__title[b-noa0egvv07] { display: none; }
    .ibx-rail__actions[b-noa0egvv07] { flex-direction: row; border-bottom: 0; padding: 0; margin: 0; }
    .ibx-list[b-noa0egvv07] { border-right: 0; border-bottom: 1px solid var(--ibx-line); }
    .ibx-list__scroll[b-noa0egvv07] { max-height: 22rem; }
    .ibx-msg__body[b-noa0egvv07] { padding-left: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .ibx-spin[b-noa0egvv07] { animation: none; } }

/* ── The Communications hub's OUTBOX half (2026-09-27) ─────────────────────
   The same panes as the inbox; these are only what the outbox adds. */
.ibx-rail__hint--top[b-noa0egvv07] { margin: .1rem .35rem .4rem; }
.ibx-mailbox[b-noa0egvv07] { padding: 0 .3rem .35rem; }
.ibx-folder__badge--bad[b-noa0egvv07] { background: #dc2626; }
.ibx-folder__badge--wait[b-noa0egvv07] { background: #ca8a04; }

.ibx-iconbtn--on[b-noa0egvv07] { color: var(--shell-accent, #2563eb); background: var(--ibx-sel); }

.ibx-obfilter[b-noa0egvv07] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem .6rem;
    padding: .6rem;
    border: 1px solid var(--ibx-line);
    border-radius: 8px;
    background: var(--shell-panel-background-soft, #f6f8fb);
}
.ibx-obfilter__field[b-noa0egvv07] { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.ibx-obfilter__field > label[b-noa0egvv07] { font-size: .72rem; font-weight: 600; opacity: .75; }
.ibx-obfilter__actions[b-noa0egvv07] { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .4rem; }

.ibx-arrange[b-noa0egvv07] { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; font-size: .78rem; }
.ibx-arrange__pick[b-noa0egvv07] { display: inline-flex; align-items: center; gap: .3rem; }
.ibx-arrange__pick > span[b-noa0egvv07] { opacity: .7; font-weight: 600; }
.ibx-arrange__dir[b-noa0egvv07] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 1.9rem;
    padding: 0 .55rem;
    border: 1px solid var(--ibx-line);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.ibx-arrange__dir:hover:not(:disabled)[b-noa0egvv07] { background: var(--ibx-hover); }

.ibx-group--btn[b-noa0egvv07] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .35rem;
    border: 0;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.ibx-group--btn .e-icons[b-noa0egvv07] { font-size: .65rem; }
.ibx-group__n[b-noa0egvv07] { margin-left: auto; opacity: .6; font-weight: 600; }

.ibx-item--ob-bad[b-noa0egvv07] { box-shadow: inset 3px 0 0 #ef4444; }
.ibx-item--ob-wait[b-noa0egvv07] { box-shadow: inset 3px 0 0 #eab308; }
.ibx-item--ob-bad .ibx-item__snippet[b-noa0egvv07] { color: #b91c1c; }

.ibx-tag--ok[b-noa0egvv07] { background: rgba(34, 197, 94, .14); color: #15803d; }
.ibx-tag--bad[b-noa0egvv07] { background: rgba(239, 68, 68, .13); color: #b91c1c; }
.ibx-tag--wait[b-noa0egvv07] { background: rgba(234, 179, 8, .16); color: #a16207; }

.ibx-more[b-noa0egvv07] { display: flex; justify-content: center; padding: .6rem 0; }

.ibx-obbar[b-noa0egvv07] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: .5rem 0 .6rem;
    padding: .5rem .7rem;
    border-radius: 8px;
    font-size: .85rem;
    border: 1px solid var(--ibx-line);
}
.ibx-obbar--ok[b-noa0egvv07] { background: rgba(34, 197, 94, .08); border-color: rgba(34, 197, 94, .3); }
.ibx-obbar--bad[b-noa0egvv07] { background: rgba(239, 68, 68, .07); border-color: rgba(239, 68, 68, .3); color: #991b1b; }
.ibx-obbar--wait[b-noa0egvv07] { background: rgba(234, 179, 8, .08); border-color: rgba(234, 179, 8, .3); }

.ibx-obbody[b-noa0egvv07] {
    display: block;
    width: calc(100% - 2rem);
    min-height: 55vh;
    margin: .25rem 1rem 1rem;
    border: 1px solid var(--ibx-line);
    border-radius: 8px;
    background: #fff;
}

.ibx-obresends[b-noa0egvv07] { margin: 0 1rem 1rem; font-size: .85rem; }
.ibx-obresends ul[b-noa0egvv07] { margin: .35rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .25rem; }

/* the books (hub phase 2): a pill that opens its document, and the pill's own un-relate button */
.ibx-pill__link[b-noa0egvv07] {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    color: var(--shell-accent, #2563eb);
    cursor: pointer;
}
.ibx-pill__link:hover[b-noa0egvv07] { text-decoration: underline; }
.ibx-pill__x[b-noa0egvv07] {
    margin-left: 0.3rem;
    border: 0;
    background: transparent;
    padding: 0 0.15rem;
    font: inherit;
    line-height: 1;
    color: var(--shell-text-muted);
    cursor: pointer;
}
.ibx-pill__x:hover:not(:disabled)[b-noa0egvv07] { color: var(--shell-text-primary); }
.ibx-pill__link:focus-visible[b-noa0egvv07], .ibx-pill__x:focus-visible[b-noa0egvv07] { outline: 2px solid var(--shell-accent, #2563eb); outline-offset: 1px; border-radius: 3px; }

/* ── the team inbox (hub 4.2): pending, snooze, the reply clock, tags, notes, canned replies ── */
.ibx-tag--wait[b-noa0egvv07] { background: color-mix(in srgb, var(--shell-warning, #b26a00) 14%, transparent); color: var(--shell-warning, #b26a00); }
.ibx-tag--late[b-noa0egvv07] { background: color-mix(in srgb, var(--shell-danger, #c62828) 16%, transparent); color: var(--shell-danger, #c62828); font-weight: 600; }
.ibx-tag--user[b-noa0egvv07] { background: transparent; border: 1px dashed var(--ibx-line); }
.ibx-pill--bad[b-noa0egvv07] { color: var(--shell-danger, #c62828); border-color: color-mix(in srgb, var(--shell-danger, #c62828) 45%, transparent); font-weight: 600; }
.ibx-pill--tag[b-noa0egvv07] { display: inline-flex; align-items: center; gap: 0.25rem; }
.ibx-pill--add[b-noa0egvv07] { cursor: pointer; border-style: dashed; background: transparent; color: var(--shell-text-secondary, #5b6472); }
.ibx-pill--add:hover:not(:disabled)[b-noa0egvv07] { color: var(--shell-accent, #2563eb); border-color: var(--shell-accent, #2563eb); }
.ibx-tagadd[b-noa0egvv07] { display: inline-flex; }
.ibx-tagadd__input[b-noa0egvv07] {
    font: inherit; font-size: 0.78rem; padding: 0.15rem 0.6rem; border-radius: 999px; width: 10rem;
    border: 1px solid var(--shell-accent, #2563eb); background: var(--shell-panel-background, #fff); color: var(--shell-text-primary, #1f2937);
}
.ibx-tagadd__input:focus[b-noa0egvv07] { outline: 2px solid color-mix(in srgb, var(--shell-accent, #2563eb) 40%, transparent); outline-offset: 1px; }

.ibx-notes[b-noa0egvv07] { margin: 0 1.4rem 0.9rem; padding: 0.6rem 0.75rem; border-radius: 10px; display: flex; flex-direction: column; gap: 0.5rem;
    background: color-mix(in srgb, var(--shell-warning, #b26a00) 6%, var(--shell-panel-background, #fff));
    border: 1px dashed color-mix(in srgb, var(--shell-warning, #b26a00) 40%, transparent); }
.ibx-notes__head[b-noa0egvv07] { display: flex; align-items: center; gap: 0.35rem; font-weight: 600; font-size: 0.86rem; }
.ibx-notes__hint[b-noa0egvv07] { font-weight: 400; font-size: 0.76rem; color: var(--shell-text-secondary, #5b6472); }
.ibx-note[b-noa0egvv07] { display: flex; flex-direction: column; gap: 0.15rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--ibx-line); }
.ibx-note__meta[b-noa0egvv07] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; font-size: 0.78rem; color: var(--shell-text-secondary, #5b6472); }
.ibx-note__meta strong[b-noa0egvv07] { color: var(--shell-text-primary, #1f2937); }
.ibx-note__at[b-noa0egvv07] { color: var(--shell-accent, #2563eb); }
.ibx-note__acts[b-noa0egvv07] { margin-left: auto; display: inline-flex; gap: 0.6rem; }
.ibx-note__text[b-noa0egvv07] { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.88rem; }
.ibx-note-new[b-noa0egvv07] { display: flex; flex-direction: column; gap: 0.35rem; }
.ibx-note-new__text[b-noa0egvv07] {
    font: inherit; font-size: 0.88rem; padding: 0.45rem 0.6rem; border-radius: 8px; resize: vertical; min-height: 3rem;
    border: 1px solid var(--ibx-line); background: var(--shell-panel-background, #fff); color: var(--shell-text-primary, #1f2937);
}
.ibx-note-new__text:focus[b-noa0egvv07] { outline: 2px solid color-mix(in srgb, var(--shell-accent, #2563eb) 40%, transparent); outline-offset: 0; }
.ibx-note-new__bar[b-noa0egvv07] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ibx-note-new__bar[b-noa0egvv07]  .ibx-note-new__at { flex: 1 1 14rem; min-width: 12rem; }
.ibx-linkbtn[b-noa0egvv07] { border: none; background: none; padding: 0; font: inherit; font-size: 0.78rem; color: var(--shell-accent, #2563eb); cursor: pointer; }
.ibx-linkbtn:hover:not(:disabled)[b-noa0egvv07] { text-decoration: underline; }
.ibx-linkbtn:disabled[b-noa0egvv07] { opacity: 0.5; cursor: default; }

.ibx-snooze[b-noa0egvv07] { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.4rem; margin-bottom: 0.75rem; }
.ibx-snooze__opt[b-noa0egvv07] {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; font: inherit; text-align: left; cursor: pointer;
    padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid var(--ibx-line); background: var(--shell-panel-background, #fff); color: var(--shell-text-primary, #1f2937);
}
.ibx-snooze__opt small[b-noa0egvv07] { color: var(--shell-text-secondary, #5b6472); font-size: 0.74rem; }
.ibx-snooze__opt:hover:not(:disabled)[b-noa0egvv07] { border-color: var(--shell-accent, #2563eb); background: var(--ibx-sel); }

.ibx-replies[b-noa0egvv07] { display: flex; flex-direction: column; gap: 0.45rem; max-height: 55vh; overflow-y: auto; margin-bottom: 0.4rem; }
.ibx-reply[b-noa0egvv07] { border: 1px solid var(--ibx-line); border-radius: 8px; padding: 0.45rem 0.6rem; background: var(--shell-panel-background, #fff); }
.ibx-reply--off[b-noa0egvv07] { opacity: 0.6; }
.ibx-reply__head[b-noa0egvv07] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.ibx-reply__head code[b-noa0egvv07] { font-size: 0.78rem; color: var(--shell-accent, #2563eb); }
.ibx-reply__acts[b-noa0egvv07] { margin-left: auto; display: inline-flex; gap: 0.6rem; }
.ibx-reply__body[b-noa0egvv07] { margin-top: 0.25rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.84rem; color: var(--shell-text-secondary, #5b6472); }
.ibx-reply-form[b-noa0egvv07]  .ibx-reply-form__body textarea { min-height: 8rem; }
.ibx-reply-form[b-noa0egvv07] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.25rem; }
@media (max-width: 700px) { .ibx-reply-form[b-noa0egvv07] { grid-template-columns: minmax(0, 1fr); } }
/* the outbox status bar: the word on its chip is never squeezed to "F..." by a long reason beside it */
.ibx-obbar > span:first-child[b-noa0egvv07] { flex: 0 0 auto; }
/* /Pages/CRM/CrmIntakePage.razor.rz.scp.css */
/* CRM > Lead Intake / Assignment Rules. Shared CRM pieces are in app.css (.crm-scope). Shell tokens only. */
.crm-mas__body[b-69o2jczzxs] { display: flex; gap: 1rem; align-items: stretch; min-height: 0; }
.crm-mas__main[b-69o2jczzxs] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }

.crm-chn__bar[b-69o2jczzxs] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.crm-chn__form[b-69o2jczzxs] { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px dashed var(--shell-border); display: flex; flex-direction: column; gap: 0.75rem; }
.crm-chn__form h3[b-69o2jczzxs] { margin: 0; font-size: 1rem; }
.crm-chn__two[b-69o2jczzxs] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.25rem; }
.crm-chn__port[b-69o2jczzxs] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.25rem 0.75rem; }
.crm-chn__port .app-field-hint[b-69o2jczzxs] { grid-column: 1 / -1; }

.crm-chn__test[b-69o2jczzxs] { font-size: 0.9rem; padding: 0.25rem 0.6rem; border-radius: 6px; border: 1px solid var(--shell-border); overflow-wrap: anywhere; }
.crm-chn__test--ok[b-69o2jczzxs] { border-color: var(--shell-success, #2e7d32); }
.crm-chn__test--bad[b-69o2jczzxs] { border-color: var(--shell-danger, #c62828); }

@media (max-width: 800px) {
    .crm-chn__two[b-69o2jczzxs] { grid-template-columns: minmax(0, 1fr); }
}

.crm-int__days[b-69o2jczzxs] { display: inline-flex; align-items: end; }
.crm-int__snippet[b-69o2jczzxs] { margin: 0; max-height: 18rem; overflow: auto; padding: 0.75rem; border: 1px solid var(--shell-border); border-radius: 6px;
    background: var(--shell-surface-muted, transparent); font: 0.8rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; }
/* /Pages/CRM/CrmLeadPage.razor.rz.scp.css */
/* CRM > Leads - layout mirrors the API Providers / Email Templates masters.
   Colours are the shell's tokens only, so both themes hold. */

.crm-lead__body[b-4v270f2rzb] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.crm-lead__form[b-4v270f2rzb] {
    flex: 1 1 auto;
    min-width: 0;
}

.crm-lead__detail[b-4v270f2rzb] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

@media (max-width: 900px) {
    .crm-lead__body[b-4v270f2rzb] { flex-direction: column; }
    .app-field--wide[b-4v270f2rzb] { grid-column: 1 / -1; }
}

/* Rating - three stars for Hot / Warm / Cold, the word beside them */
.crm-rating__label[b-4v270f2rzb] { display: block; font-size: 0.8rem; font-weight: 500; color: var(--shell-text-secondary, #5b6472); margin: 0 0 0.3rem 0.15rem; }
.crm-rating[b-4v270f2rzb] { display: flex; align-items: center; gap: 0.75rem; min-height: 2.25rem; }
.crm-rating[b-4v270f2rzb]  .e-rating-container .e-rating-item-container { font-size: 1.35rem; }
.crm-rating__word[b-4v270f2rzb] { font-size: 0.8rem; font-weight: 600; padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--shell-surface-muted, rgba(127,127,127,.12)); color: var(--shell-text-secondary, #5b6472); }
.crm-rating__word--hot[b-4v270f2rzb] { background: var(--shell-status-error-bg, #ffebe9); color: var(--shell-status-error-text, #cf222e); }
.crm-rating__word--warm[b-4v270f2rzb] { background: var(--shell-status-warn-bg, #fff8c5); color: var(--shell-status-warn-text, #9a6700); }
.crm-rating__word--cold[b-4v270f2rzb] { background: var(--shell-status-info-bg, #ddf4ff); color: var(--shell-status-info-text, #0969da); }

/* lead intake (phase 4): the first-response chip beside the status, and the answers as the person gave them */
.crm-sla[b-4v270f2rzb] { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.55rem; border: 1px solid var(--shell-border); border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; vertical-align: middle; }
.crm-sla--due[b-4v270f2rzb] { border-color: var(--shell-accent, #2563eb); color: var(--shell-accent, #2563eb); }
.crm-sla--over[b-4v270f2rzb] { border-color: var(--shell-danger, #c62828); color: var(--shell-danger, #c62828); }
.crm-sla--late[b-4v270f2rzb] { border-color: var(--shell-warning, #b26a00); color: var(--shell-warning, #b26a00); }
.crm-sla--test[b-4v270f2rzb] { border-style: dashed; color: var(--shell-text-muted, inherit); }
.crm-intake__answers[b-4v270f2rzb] { margin: 0; max-height: 14rem; overflow: auto; padding: 0.6rem 0.75rem; border: 1px solid var(--shell-border); border-radius: 6px; font: inherit; font-size: 0.9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
/* /Pages/CRM/CrmMastersPage.razor.rz.scp.css */
/* CRM > Masters. Shared CRM pieces are in app.css (.crm-scope). */

.crm-mas__body[b-bx4t7kqqbp] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.crm-mas__main[b-bx4t7kqqbp] {
    flex: 1 1 auto;
    min-width: 0;
}

.crm-mas__pick[b-bx4t7kqqbp] { flex: 0 1 230px; min-width: 180px; }

.crm-mas__split[b-bx4t7kqqbp] {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
    gap: 1rem;
    align-items: start;
}

.crm-mas__list[b-bx4t7kqqbp],
.crm-mas__form[b-bx4t7kqqbp] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.crm-mas__fields[b-bx4t7kqqbp] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

@media (max-width: 1100px) {
    .crm-mas__split[b-bx4t7kqqbp] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .crm-mas__body[b-bx4t7kqqbp] { flex-direction: column; }
}
/* /Pages/CRM/CrmOpportunityPage.razor.rz.scp.css */
/* CRM > Opportunities - the page's own layout; the shared CRM pieces are in app.css (.crm-scope). */

.crm-opp__body[b-n88zit575p] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.crm-opp__form[b-n88zit575p] {
    flex: 1 1 auto;
    min-width: 0;
}

.crm-opp__detail[b-n88zit575p] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

@media (max-width: 900px) {
    .crm-opp__body[b-n88zit575p] { flex-direction: column; }
}
/* /Pages/CRM/CrmScoringPage.razor.rz.scp.css */
/* CRM > Scoring (phase 7). Scoped: these class names belong to this page only,
   so everything its markup uses is written out here rather than borrowed. */

.crmsc__bar[b-cb8lygcebv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin: 0.35rem 0 0.75rem;
}

.crmsc__plain[b-cb8lygcebv] {
    margin: 0 0 0.6rem;
    font-size: 0.9rem;
}

.crmsc-table[b-cb8lygcebv] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.crmsc-table--narrow[b-cb8lygcebv] { max-width: 44rem; }

.crmsc-table th[b-cb8lygcebv],
.crmsc-table td[b-cb8lygcebv] {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--shell-border, #e2e5ea);
    text-align: left;
    vertical-align: middle;
}

.crmsc-table th[b-cb8lygcebv] {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
    white-space: normal;      /* headers wrap, never truncate */
}

.crmsc-num[b-cb8lygcebv] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.crmsc-pts--up[b-cb8lygcebv] { color: var(--shell-success, #2e7d32); font-weight: 700; }
.crmsc-pts--down[b-cb8lygcebv] { color: var(--shell-danger, #c62828); font-weight: 700; }

/* A rule switched off is still listed - it is part of the set-up - but it
   should not read as though it is counting. */
.crmsc-off[b-cb8lygcebv] { opacity: 0.55; }

.crmsc__cond[b-cb8lygcebv] {
    margin-top: 0.9rem;
    width: 100%;
}

.crmsc__cond > label[b-cb8lygcebv] {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
}

@media (max-width: 860px) {
    .crmsc-table[b-cb8lygcebv] { font-size: 0.82rem; }
    .crmsc-table th[b-cb8lygcebv], .crmsc-table td[b-cb8lygcebv] { padding: 0.3rem 0.35rem; }
}
/* /Pages/CRM/CrmTeamsPage.razor.rz.scp.css */
/* CRM > Sales Teams. Shared CRM pieces are in app.css (.crm-scope). */

.crm-mas__body[b-j9j5hjha76] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.crm-mas__main[b-j9j5hjha76] {
    flex: 1 1 auto;
    min-width: 0;
}

/* The form carries the members grid, so it takes the wider column here. */
.crm-mas__split[b-j9j5hjha76] {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr);
    gap: 1rem;
    align-items: start;
}

.crm-mas__list[b-j9j5hjha76],
.crm-mas__form[b-j9j5hjha76] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.crm-mas__fields[b-j9j5hjha76] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.crm-team__add[b-j9j5hjha76] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: flex-start;
    margin-bottom: 0.6rem;
}

@media (max-width: 1100px) {
    .crm-mas__split[b-j9j5hjha76] { grid-template-columns: minmax(0, 1fr); }
}
/* /Pages/CRM/CrmTelephonyPage.razor.rz.scp.css */
/* CRM > Telephony and CRM > Calls. Shared CRM pieces are in app.css (.crm-scope). Shell tokens only. */
.crm-mas__body[b-q4p4uozrb6] { display: flex; gap: 1rem; align-items: stretch; min-height: 0; }
.crm-mas__main[b-q4p4uozrb6] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }

.crm-chn__bar[b-q4p4uozrb6] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.crm-chn__form[b-q4p4uozrb6] { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px dashed var(--shell-border); display: flex; flex-direction: column; gap: 0.75rem; }
.crm-chn__form h3[b-q4p4uozrb6] { margin: 0; font-size: 1rem; }
.crm-chn__two[b-q4p4uozrb6] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.25rem; }
.crm-chn__port[b-q4p4uozrb6] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.25rem 0.75rem; }
.crm-chn__port .app-field-hint[b-q4p4uozrb6] { grid-column: 1 / -1; }

.crm-chn__test[b-q4p4uozrb6] { font-size: 0.9rem; padding: 0.25rem 0.6rem; border-radius: 6px; border: 1px solid var(--shell-border); overflow-wrap: anywhere; }
.crm-chn__test--ok[b-q4p4uozrb6] { border-color: var(--shell-success, #2e7d32); }
.crm-chn__test--bad[b-q4p4uozrb6] { border-color: var(--shell-danger, #c62828); }

@media (max-width: 800px) {
    .crm-chn__two[b-q4p4uozrb6] { grid-template-columns: minmax(0, 1fr); }
}

.crm-tel__wide[b-q4p4uozrb6] { grid-column: 1 / -1; }
.crm-tel__code[b-q4p4uozrb6]  textarea { font: 0.82rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; min-height: 5rem; }
/* /Pages/CRM/CrmWorkflowsPage.razor.rz.scp.css */
/* CRM > Approval Workflows. Shared CRM pieces are in app.css (.crm-scope). */

.crm-mas__body[b-vmz6hubqf8] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.crm-mas__main[b-vmz6hubqf8] {
    flex: 1 1 auto;
    min-width: 0;
}

.crm-mas__split[b-vmz6hubqf8] {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.65fr);
    gap: 1rem;
    align-items: start;
}

.crm-mas__list[b-vmz6hubqf8],
.crm-mas__form[b-vmz6hubqf8] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.crm-wf__two[b-vmz6hubqf8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1rem;
}

.crm-wf__full[b-vmz6hubqf8] { grid-column: 1 / -1; }

.crm-wf__switches[b-vmz6hubqf8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1.25rem;
}

.crm-wf__level[b-vmz6hubqf8] {
    border: 1px solid var(--shell-border);
    border-radius: 10px;
    padding: 0.75rem 0.9rem 0.9rem;
    background: var(--shell-surface-background, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.crm-wf__level + .crm-wf__level[b-vmz6hubqf8] { margin-top: 0.75rem; }

.crm-wf__levelhead[b-vmz6hubqf8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.crm-wf__levelno[b-vmz6hubqf8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    font-weight: 700;
    border: 2px solid var(--shell-accent, #2563eb);
    color: var(--shell-accent, #2563eb);
}

.crm-wf__levelhead strong[b-vmz6hubqf8] { flex: 1 1 auto; }

.crm-wf__chips[b-vmz6hubqf8] { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.crm-wf__chip[b-vmz6hubqf8] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.3rem 0.15rem 0.6rem;
    border: 1px solid var(--shell-border);
    border-radius: 999px;
    font-size: 0.86rem;
}

.crm-wf__chip button[b-vmz6hubqf8] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0 0.25rem;
    font-size: 1rem;
    line-height: 1;
}

.crm-wf__chip button:focus-visible[b-vmz6hubqf8] { outline: 2px solid var(--shell-accent, #2563eb); border-radius: 4px; }
.crm-wf__chip--role[b-vmz6hubqf8] { border-style: dashed; }

.crm-wf__add[b-vmz6hubqf8] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 0.6rem;
}

.crm-wf__summary[b-vmz6hubqf8] { margin: 0; font-size: 0.86rem; opacity: 0.85; }

@media (max-width: 1200px) {
    .crm-mas__split[b-vmz6hubqf8] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .crm-mas__body[b-vmz6hubqf8] { flex-direction: column; }
    .crm-wf__two[b-vmz6hubqf8], .crm-wf__switches[b-vmz6hubqf8], .crm-wf__add[b-vmz6hubqf8] { grid-template-columns: minmax(0, 1fr); }
}

/* Level conditions and the fallback approvers (2026-09-22). */
.crm-wf__tag[b-vmz6hubqf8] {
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--shell-accent, #2563eb);
    color: var(--shell-accent, #2563eb);
    white-space: nowrap;
}
.crm-wf__levelcond[b-vmz6hubqf8] {
    border-top: 1px dashed var(--shell-border);
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.crm-wf__levelcond > summary[b-vmz6hubqf8] { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.crm-wf__levelcond[open] > summary[b-vmz6hubqf8] { margin-bottom: 0.4rem; }
.crm-wf__level--fallback[b-vmz6hubqf8] { margin-top: 0.75rem; border-style: dashed; }
.crm-wf__level--fallback .crm-wf__levelno[b-vmz6hubqf8] { border-color: var(--shell-warning, #b26a00); color: var(--shell-warning, #b26a00); }
/* /Pages/Customer Portal/CustomerPortalAdminPage.razor.rz.scp.css */
/* Customer Portal admin area — landing page.
   Reuses the master shell (master-page / master-shell / master-sticky-top /
   master-body); only the tile grid and the denial panel are local. */

/* No `overflow` here: the shell sets `.master-body { overflow: hidden
   !important }`. The tiles scroll inside .cpa-page__main and the Help aside
   inside itself - see the note in the markup. */
.cpa-page__body[b-whj058pkt0] {
    padding-top: 0.25rem;
    padding-bottom: 1rem;
}

/* The tiles and the Help aside sit side by side (the global help rule makes
   this body a flex row with the guide flush right, its own scrollbar and the
   width grip). The tiles scroll on their own, so the guide stays in view. */
.cpa-page__main[b-whj058pkt0] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.15rem;
}

.cpa-cards[b-whj058pkt0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0.9rem;
    align-items: stretch;
}

.cpa-card[b-whj058pkt0] {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    border: 1px solid var(--inv-border, #e2e6ec);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.cpa-card:hover[b-whj058pkt0] {
    transform: translateY(-2px);
    border-color: #b9c6d8;
    box-shadow: 0 10px 20px -14px rgba(0, 0, 0, 0.45);
}

.cpa-card__icon[b-whj058pkt0] {
    font-size: 1.6rem;
    line-height: 1;
    flex: 0 0 auto;
}

.cpa-card__body[b-whj058pkt0] { min-width: 0; }

.cpa-card__body h3[b-whj058pkt0] {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
}

.cpa-card__body p[b-whj058pkt0] {
    margin: 0;
    font-size: 0.8rem;
    color: #6a7381;
    line-height: 1.4;
}

/* Waiting-work badge. Amber rather than red: this is a queue, not a fault. */
.cpa-card__badge[b-whj058pkt0] {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: #fde8c8;
    color: #8a5300;
    font-size: 0.72rem;
    font-weight: 700;
    vertical-align: middle;
}

.cpa-card__badge-label[b-whj058pkt0] {
    margin-top: 0.35rem !important;
    font-size: 0.74rem !important;
    color: #8a5300 !important;
    font-weight: 600;
}

.cpa-foot[b-whj058pkt0] {
    margin: 1rem 0 0;
    font-size: 0.78rem;
    color: #6a7381;
    max-width: 70ch;
}

.cpa-foot__muted[b-whj058pkt0] { color: #9aa3b0; font-style: italic; }

/* Refusal panel — deliberately calm. The user has done nothing wrong; they
   are simply missing a grant, and the text says which one. */
.cpa-denied[b-whj058pkt0] {
    max-width: 60ch;
    margin: 1.5rem auto;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid var(--inv-border, #e2e6ec);
    border-radius: 10px;
    background: #fff;
}

.cpa-denied__icon[b-whj058pkt0] { font-size: 2rem; }

.cpa-denied h2[b-whj058pkt0] {
    margin: 0.5rem 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.cpa-denied p[b-whj058pkt0] {
    margin: 0.4rem 0;
    font-size: 0.85rem;
    color: #4a5361;
}

.cpa-denied__hint[b-whj058pkt0] {
    font-size: 0.78rem !important;
    color: #7b8492 !important;
}

.cpa-denied code[b-whj058pkt0] {
    background: #f2f4f7;
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
}
/* /Pages/Customer Portal/CustomerPortalSettingsPage.razor.rz.scp.css */
/* Customer Portal Settings — scoped styles.
   The page reuses the master shell (prod-master__*, master-*) and the help dock
   (ct-page__help*) wholesale; only the settings-card layout is local. */

.cps-page__tabs[b-v0ty7u73hu] {
    display: inline-flex;
    gap: 0.25rem;
    margin-left: 0.5rem;
}

.cps-page__body[b-v0ty7u73hu] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* The settings form is the scroll surface — master-body itself clips.
   BOTH axes on purpose. The global convention forces overflow-x: hidden on a
   master pane (so an ordinary form never grows a page-wide horizontal bar),
   but this page is a genuinely wide one: seven sections of side-by-side fields
   plus a docked help panel. With overflow-x hidden, the right-hand fields go
   out of reach the moment the window narrows instead of scrolling to. Higher
   specificity + !important is what it takes to beat the global rule. */
.cps-page__body > .cps-page__main[b-v0ty7u73hu] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: auto !important;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    /* Room for the horizontal bar so it never sits on top of the last card. */
    padding-bottom: 0.35rem;
}

/* A floor under the cards, so a narrow pane scrolls sideways rather than
   squeezing the field grid into columns too narrow to read. */
.cps-page__main > .cps-card[b-v0ty7u73hu] {
    min-width: 560px;
}

.cps-card[b-v0ty7u73hu] {
    border: 1px solid var(--inv-border, #e2e6ec);
    border-radius: 8px;
    background: #fff;
    padding: 0.9rem 1rem 1rem;
}

.cps-card h2[b-v0ty7u73hu] {
    margin: 0 0 0.15rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.cps-card__head[b-v0ty7u73hu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.cps-subhead[b-v0ty7u73hu] {
    margin: 1rem 0 0.15rem;
    font-size: 0.85rem;
    font-weight: 600;
}

/* "configured" / "not set" beside a credential label. Never the value. */
.cps-cred[b-v0ty7u73hu] {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.cps-cred--set[b-v0ty7u73hu] { background: #e3f5e9; color: #1b7a43; }
.cps-cred--unset[b-v0ty7u73hu] { background: #f2f4f7; color: #7b8492; }

.cps-card__hint[b-v0ty7u73hu] {
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
    color: #6a7381;
    max-width: 70ch;
}

.cps-card__actions[b-v0ty7u73hu] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.85rem;
}

/* Field grid — settles to one column on a phone, three on a wide screen. */
.cps-grid[b-v0ty7u73hu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.7rem 1rem;
}

.cps-grid > label[b-v0ty7u73hu] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.cps-grid > label > span[b-v0ty7u73hu] {
    font-size: 0.76rem;
    font-weight: 600;
    color: #4a5361;
}

.cps-grid > label > small[b-v0ty7u73hu] {
    font-size: 0.7rem;
    color: #7b8492;
    line-height: 1.3;
}

/* Switch rows follow the app-wide rule: label left, toggle at the right edge. */
.cps-switches[b-v0ty7u73hu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.25rem 1rem;
    margin-bottom: 0.75rem;
}

/* Read-only pricing readout — what the voucher type already says. */
.cps-readout[b-v0ty7u73hu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.35rem 1rem;
    margin: 0 0 0.85rem;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    background: #f5f7fa;
    border: 1px solid #e6eaf0;
}

.cps-readout dt[b-v0ty7u73hu] {
    font-size: 0.72rem;
    color: #6a7381;
}

.cps-readout dd[b-v0ty7u73hu] {
    margin: 0 0 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
}

/* The customer filter row is laid out by the shared `.portal-filters` grid in
   app.css, like every other Customer Portal admin page. Nothing local: a rule
   here would be scoped CSS and would outrank the shared one. */

@media (max-width: 900px) {
    /* Stacked: the body becomes the single scroll surface, so the form pane
       must NOT cap its own height or it would scroll inside a stub. */
    .cps-page__body[b-v0ty7u73hu] {
        flex-direction: column;
        overflow: auto !important;
    }

    .cps-page__body > .cps-page__main[b-v0ty7u73hu] {
        max-height: none !important;
        overflow: visible !important;
    }
}
/* /Pages/Customer Portal/PortalAccessPage.razor.rz.scp.css */
/* Portal Access & Requests — scoped styles. Three stacked cards in one
   scrolling pane; master shell and help dock come from the global stylesheet. */

.pac-page__body[b-c5olmi0zpc] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* <section>, not <div> — the global `.master-body > section` rule is what
   gives this pane its own scrollbar. */
.pac-page__main[b-c5olmi0zpc] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: auto !important;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding-bottom: 0.35rem;
}

.pac-search[b-c5olmi0zpc]  .e-input-group { min-width: 230px; }

.pac-switch[b-c5olmi0zpc] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: #4a5361;
    white-space: nowrap;
}

.pac-toolbar__note[b-c5olmi0zpc] {
    margin-left: auto;
    font-size: 0.78rem;
    color: #6a7381;
}

.pac-muted[b-c5olmi0zpc] { color: #9aa3b0; }

/* ── cards ──────────────────────────────────────────────────────────────── */

.pac-card[b-c5olmi0zpc] {
    border: 1px solid var(--inv-border, #e2e6ec);
    border-radius: 8px;
    background: #fff;
    padding: 0.85rem 1rem 1rem;
}

.pac-card__head[b-c5olmi0zpc] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.pac-card h2[b-c5olmi0zpc] {
    margin: 0 0 0.15rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.pac-card__hint[b-c5olmi0zpc] {
    margin: 0;
    font-size: 0.78rem;
    color: #6a7381;
    max-width: 85ch;
}

.pac-empty[b-c5olmi0zpc] {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border: 1px dashed var(--inv-border, #e2e6ec);
    border-radius: 8px;
    background: #fbfcfe;
    font-size: 0.82rem;
    color: #6a7381;
    max-width: 90ch;
}

.pac-empty code[b-c5olmi0zpc] {
    background: #f2f4f7;
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
}

/* ── chips ──────────────────────────────────────────────────────────────── */

.pac-chip[b-c5olmi0zpc] {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #eef2f7;
    color: #55606f;
}

.pac-chip--on[b-c5olmi0zpc]   { background: #dff3e4; color: #1d6b34; }
.pac-chip--off[b-c5olmi0zpc]  { background: #fdeaea; color: #a3312a; }
.pac-chip--warn[b-c5olmi0zpc] { background: #fde8c8; color: #8a5300; }

/* Row-level action button, sized to sit inside a grid cell. */
.pac-mini[b-c5olmi0zpc] ,
.pac-mini[b-c5olmi0zpc] {
    font-size: 0.74rem;
    padding: 0.1rem 0.5rem;
    min-height: 1.5rem;
}

/* ── selected change request ────────────────────────────────────────────── */

.pac-request[b-c5olmi0zpc] {
    margin-top: 0.8rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid #e6eaf0;
    border-radius: 8px;
    background: #fbfcfe;
}

.pac-request h3[b-c5olmi0zpc] {
    margin: 0 0 0.3rem;
    font-size: 0.9rem;
    font-weight: 600;
}

/* The customer's own words, visibly theirs. */
.pac-request__quote[b-c5olmi0zpc] {
    margin: 0 0 0.5rem;
    padding: 0.4rem 0.7rem;
    border-left: 3px solid #cfd8e5;
    background: #fff;
    font-size: 0.81rem;
    color: #3c4655;
    font-style: italic;
    max-width: 90ch;
}

/* Raw, because it is evidence rather than a form. */
.pac-request__json[b-c5olmi0zpc] {
    margin: 0 0 0.6rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid #e6eaf0;
    border-radius: 6px;
    background: #fff;
    font-size: 0.74rem;
    color: #4a5361;
    max-height: 140px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.pac-request__field[b-c5olmi0zpc] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-width: 70ch;
}

.pac-request__field > span[b-c5olmi0zpc] {
    font-size: 0.76rem;
    font-weight: 600;
    color: #4a5361;
}

.pac-request__remarks[b-c5olmi0zpc]  textarea { min-height: 2.6rem; }

.pac-request__buttons[b-c5olmi0zpc] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.7rem;
}

.pac-request__hint[b-c5olmi0zpc] {
    margin-right: auto;
    font-size: 0.76rem;
    color: #6a7381;
    max-width: 60ch;
}

.pac-request__done[b-c5olmi0zpc] {
    margin: 0;
    font-size: 0.81rem;
    color: #4a5361;
    max-width: 90ch;
}
/* /Pages/Customer Portal/PortalDeliveriesPage.razor.rz.scp.css */
/* Portal Deliveries — scoped styles. Master shell and help dock come from the
   global stylesheet; the filter row, the line table and the decision panel are
   local. */

.pdl-page__body[b-buswwhpslv] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* <section>, not <div> — the global `.master-body > section` rule is what
   gives this pane its own scrollbar. */
.pdl-page__main[b-buswwhpslv] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: auto !important;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 0.35rem;
}

/* The filter row is laid out by the shared `.portal-filters` grid in
   app.css — a 3-column grid for every Customer Portal admin page. Nothing
   local, on purpose: a rule here would be scoped CSS and would outrank
   the shared one, so the eight pages would drift apart. */

.pdl-switch[b-buswwhpslv] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: #4a5361;
    white-space: nowrap;
}

/* The mode switch changes what the page is ASKING, not just what it shows.
   Given its own weight so it does not read as one more filter. */
.pdl-switch--mode[b-buswwhpslv] {
    padding: 0.2rem 0.55rem;
    border: 1px solid #cfd8e5;
    border-radius: 999px;
    background: #f5f8fd;
    font-weight: 600;
}

.pdl-mode[b-buswwhpslv] {
    margin: 0;
    padding: 0.6rem 0.85rem;
    border-left: 3px solid #7f9dd0;
    background: #f2f6fd;
    font-size: 0.81rem;
    color: #34445e;
    max-width: 95ch;
}

.pdl-grid[b-buswwhpslv] { min-height: 240px; }

.pdl-empty[b-buswwhpslv] {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border: 1px dashed var(--inv-border, #e2e6ec);
    border-radius: 8px;
    background: #fbfcfe;
    font-size: 0.82rem;
    color: #6a7381;
    max-width: 80ch;
}

.pdl-toolbar__note[b-buswwhpslv] {
    margin-left: auto;
    font-size: 0.78rem;
    color: #6a7381;
}

.pdl-muted[b-buswwhpslv] { color: #9aa3b0; }
.pdl-qty[b-buswwhpslv] { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }

/* ── chips ──────────────────────────────────────────────────────────────── */

.pdl-chip[b-buswwhpslv] {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #eef2f7;
    color: #55606f;
}

.pdl-chip--short[b-buswwhpslv]    { background: #fdeaea; color: #a3312a; }
.pdl-chip--damaged[b-buswwhpslv]  { background: #f7e3f3; color: #8c2c73; }
.pdl-chip--clean[b-buswwhpslv]    { background: #dff3e4; color: #1d6b34; }
.pdl-chip--open[b-buswwhpslv]     { background: #fde8c8; color: #8a5300; }
.pdl-chip--review[b-buswwhpslv]   { background: #e3ecfb; color: #274b8e; }
.pdl-chip--rejected[b-buswwhpslv] { background: #fdeaea; color: #a3312a; }
.pdl-chip--awaiting[b-buswwhpslv] { background: #eceff3; color: #55606f; }

/* ── detail panel ───────────────────────────────────────────────────────── */

.pdl-detail[b-buswwhpslv] {
    border: 1px solid var(--inv-border, #e2e6ec);
    border-radius: 8px;
    background: #fff;
    padding: 0.9rem 1rem 1rem;
}

.pdl-detail__head[b-buswwhpslv] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
}

.pdl-detail__head h2[b-buswwhpslv] {
    margin: 0 0 0.1rem;
    font-size: 0.98rem;
    font-weight: 600;
}

.pdl-detail__sub[b-buswwhpslv] {
    margin: 0 0 0.15rem;
    font-size: 0.79rem;
    color: #6a7381;
}

/* The customer's own words, visibly theirs. */
.pdl-detail__quote[b-buswwhpslv] {
    margin: 0.4rem 0 0;
    padding: 0.4rem 0.7rem;
    border-left: 3px solid #cfd8e5;
    background: #f7f9fc;
    font-size: 0.81rem;
    color: #3c4655;
    font-style: italic;
    max-width: 90ch;
}

.pdl-detail__plain[b-buswwhpslv] {
    margin: 0.8rem 0 0;
    font-size: 0.81rem;
    color: #6a7381;
    max-width: 90ch;
}

.pdl-detail__linked[b-buswwhpslv] {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.79rem;
    color: #4a5361;
}

/* The money the argument is about, given its own block. */
.pdl-claim[b-buswwhpslv] {
    flex: 0 0 auto;
    min-width: 140px;
    padding: 0.5rem 0.8rem;
    border: 1px solid #f0d6d3;
    border-radius: 8px;
    background: #fdf5f4;
    text-align: right;
}

.pdl-claim span[b-buswwhpslv] { display: block; font-size: 0.72rem; color: #8a5a53; }
.pdl-claim strong[b-buswwhpslv] { display: block; font-size: 1.1rem; color: #a3312a; }
.pdl-claim small[b-buswwhpslv] { display: block; font-size: 0.68rem; color: #9c7a75; }

/* Line table. Read-only, never sorted — a grid here would cost a second
   scrollbar for nothing. */
.pdl-lines[b-buswwhpslv] {
    width: 100%;
    margin-top: 0.85rem;
    border-collapse: collapse;
    font-size: 0.79rem;
}

.pdl-lines th[b-buswwhpslv],
.pdl-lines td[b-buswwhpslv] {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid #eef1f5;
    text-align: left;
    vertical-align: top;
}

.pdl-lines th[b-buswwhpslv] {
    font-weight: 600;
    color: #4a5361;
    background: #f7f9fc;
    white-space: normal;
}

/* Numeric columns right-aligned, app-wide convention. */
.pdl-lines .num[b-buswwhpslv] { text-align: right; }

.pdl-lines__bad td[b-buswwhpslv] { background: #fdf3f2; }

.pdl-lines__part[b-buswwhpslv] {
    display: block;
    font-size: 0.7rem;
    color: #8a93a1;
}

.pdl-detail__grid[b-buswwhpslv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.7rem 1rem;
    margin-top: 0.85rem;
}

.pdl-detail__grid > label[b-buswwhpslv] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.pdl-detail__grid > label > span[b-buswwhpslv] {
    font-size: 0.76rem;
    font-weight: 600;
    color: #4a5361;
}

.pdl-detail__grid > label > small[b-buswwhpslv] {
    font-size: 0.7rem;
    color: #7b8492;
    line-height: 1.35;
}

.pdl-detail__wide[b-buswwhpslv] { grid-column: 1 / -1; }
.pdl-detail__check[b-buswwhpslv] { gap: 0.3rem; }
.pdl-detail__remarks[b-buswwhpslv]  textarea { min-height: 2.6rem; }

.pdl-detail__buttons[b-buswwhpslv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.pdl-detail__hint[b-buswwhpslv] {
    margin-right: auto;
    font-size: 0.76rem;
    color: #6a7381;
}
/* /Pages/Customer Portal/PortalDraftReceiptsPage.razor.rz.scp.css */
/* Portal Draft Receipts — scoped styles. The master shell (master-page /
   master-shell / master-sticky-top / master-body) and the help dock come from
   the global stylesheet; only the filter row, the grid sizing and the action
   panel are local. */

.pdr-page__body[b-iwslrxrsjz] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* A <section> rather than a <div>: the global `.master-body > section` rule is
   what gives this pane its own scrollbar. */
.pdr-page__main[b-iwslrxrsjz] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: auto !important;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 0.35rem;
}

/* The filter row is laid out by the shared `.portal-filters` grid in
   app.css — a 3-column grid for every Customer Portal admin page. Nothing
   local, on purpose: a rule here would be scoped CSS and would outrank
   the shared one, so the eight pages would drift apart. */

.pdr-switch[b-iwslrxrsjz] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: #4a5361;
    white-space: nowrap;
}

.pdr-grid[b-iwslrxrsjz] { min-height: 240px; }

.pdr-empty[b-iwslrxrsjz] {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border: 1px dashed var(--inv-border, #e2e6ec);
    border-radius: 8px;
    background: #fbfcfe;
    font-size: 0.82rem;
    color: #6a7381;
    max-width: 80ch;
}

.pdr-toolbar__note[b-iwslrxrsjz] {
    margin-left: auto;
    font-size: 0.78rem;
    color: #6a7381;
}

.pdr-muted[b-iwslrxrsjz] { color: #9aa3b0; }

/* ── chips ──────────────────────────────────────────────────────────────── */

.pdr-chip[b-iwslrxrsjz] {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #eef2f7;
    color: #55606f;
}

.pdr-chip--pending[b-iwslrxrsjz]   { background: #fde8c8; color: #8a5300; }
.pdr-chip--approved[b-iwslrxrsjz]  { background: #dff3e4; color: #1d6b34; }
.pdr-chip--cancelled[b-iwslrxrsjz] { background: #fdeaea; color: #a3312a; }
.pdr-chip--portal[b-iwslrxrsjz]    { background: #e3ecfb; color: #274b8e; }

/* ── action panel ───────────────────────────────────────────────────────── */

.pdr-action[b-iwslrxrsjz] {
    border: 1px solid var(--inv-border, #e2e6ec);
    border-radius: 8px;
    background: #fff;
    padding: 0.9rem 1rem 1rem;
}

/* An approved draft cannot be changed. The panel says so instead of showing a
   form that the database would refuse. */
.pdr-action--locked[b-iwslrxrsjz] { background: #fbfbfc; }

.pdr-action__head h2[b-iwslrxrsjz] {
    margin: 0 0 0.1rem;
    font-size: 0.98rem;
    font-weight: 600;
}

.pdr-action__sub[b-iwslrxrsjz] {
    margin: 0 0 0.15rem;
    font-size: 0.79rem;
    color: #6a7381;
}

.pdr-action__narration[b-iwslrxrsjz] {
    margin: 0.3rem 0 0;
    font-size: 0.79rem;
    color: #4a5361;
    max-width: 90ch;
}

.pdr-action__grid[b-iwslrxrsjz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.7rem 1rem;
    margin-top: 0.85rem;
}

.pdr-action__grid > label[b-iwslrxrsjz] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.pdr-action__grid > label > span[b-iwslrxrsjz] {
    font-size: 0.76rem;
    font-weight: 600;
    color: #4a5361;
}

.pdr-action__grid > label > small[b-iwslrxrsjz] {
    font-size: 0.7rem;
    color: #7b8492;
    line-height: 1.35;
}

.pdr-action__wide[b-iwslrxrsjz] { grid-column: 1 / -1; }
.pdr-action__remarks[b-iwslrxrsjz]  textarea { min-height: 2.6rem; }

.pdr-action__buttons[b-iwslrxrsjz] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.pdr-action__hint[b-iwslrxrsjz] {
    margin-right: auto;
    font-size: 0.76rem;
    color: #6a7381;
}

.pdr-locked[b-iwslrxrsjz] {
    margin: 0.7rem 0 0;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid #b7c2d1;
    background: #f6f8fb;
    font-size: 0.81rem;
    color: #4a5361;
    max-width: 90ch;
}
/* /Pages/Customer Portal/PortalOrdersPage.razor.rz.scp.css */
/* Portal Orders — scoped styles. Master shell and help dock come from the
   global stylesheet; the filter row, the line table and the decision panel are
   local. */

.pom-page__body[b-9wx1p70ett] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* <section>, not <div> — the global `.master-body > section` rule is what
   gives this pane its own scrollbar. */
.pom-page__main[b-9wx1p70ett] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: auto !important;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 0.35rem;
}

/* The filter row is laid out by the shared `.portal-filters` grid in
   app.css — a 3-column grid for every Customer Portal admin page. Nothing
   local, on purpose: a rule here would be scoped CSS and would outrank
   the shared one, so the eight pages would drift apart. */

.pom-switch[b-9wx1p70ett] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: #4a5361;
    white-space: nowrap;
}

.pom-grid[b-9wx1p70ett] { min-height: 240px; }

.pom-empty[b-9wx1p70ett] {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border: 1px dashed var(--inv-border, #e2e6ec);
    border-radius: 8px;
    background: #fbfcfe;
    font-size: 0.82rem;
    color: #6a7381;
    max-width: 80ch;
}

.pom-toolbar__note[b-9wx1p70ett] {
    margin-left: auto;
    font-size: 0.78rem;
    color: #6a7381;
}

.pom-muted[b-9wx1p70ett] { color: #9aa3b0; }

/* ── chips ──────────────────────────────────────────────────────────────── */

.pom-chip[b-9wx1p70ett] {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #eef2f7;
    color: #55606f;
}

.pom-chip--new[b-9wx1p70ett]       { background: #fde8c8; color: #8a5300; }
.pom-chip--open[b-9wx1p70ett]      { background: #e3ecfb; color: #274b8e; }
.pom-chip--hold[b-9wx1p70ett]      { background: #fdf0d5; color: #8a5300; }
.pom-chip--done[b-9wx1p70ett]      { background: #dff3e4; color: #1d6b34; }
.pom-chip--cancelled[b-9wx1p70ett] { background: #fdeaea; color: #a3312a; }
.pom-chip--short[b-9wx1p70ett]     { background: #fdeaea; color: #a3312a; margin-left: 0.35rem; }

/* ── detail panel ───────────────────────────────────────────────────────── */

.pom-detail[b-9wx1p70ett] {
    border: 1px solid var(--inv-border, #e2e6ec);
    border-radius: 8px;
    background: #fff;
    padding: 0.9rem 1rem 1rem;
}

.pom-detail__head h2[b-9wx1p70ett] {
    margin: 0 0 0.1rem;
    font-size: 0.98rem;
    font-weight: 600;
}

.pom-detail__sub[b-9wx1p70ett] {
    margin: 0 0 0.15rem;
    font-size: 0.79rem;
    color: #6a7381;
}

.pom-detail__note[b-9wx1p70ett] {
    margin: 0.4rem 0 0;
    padding: 0.45rem 0.7rem;
    border-left: 3px solid #e0b45f;
    background: #fdf7ec;
    font-size: 0.77rem;
    color: #6a5326;
    max-width: 90ch;
}

/* Line table. A plain table rather than a second grid: it is read-only,
   never sorted and never filtered, and a grid here would cost a second
   scrollbar for nothing. */
.pom-lines[b-9wx1p70ett] {
    width: 100%;
    margin-top: 0.85rem;
    border-collapse: collapse;
    font-size: 0.79rem;
}

.pom-lines th[b-9wx1p70ett],
.pom-lines td[b-9wx1p70ett] {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid #eef1f5;
    text-align: left;
    vertical-align: top;
}

.pom-lines th[b-9wx1p70ett] {
    font-weight: 600;
    color: #4a5361;
    background: #f7f9fc;
    white-space: normal;
}

/* Numeric columns right-aligned, app-wide convention. */
.pom-lines .num[b-9wx1p70ett] { text-align: right; }

/* A line we cannot fill. Tinted rather than hidden — the clerk needs to see it
   in place, next to what was ordered. */
.pom-lines__short td[b-9wx1p70ett] { background: #fdf3f2; }

.pom-detail__grid[b-9wx1p70ett] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.7rem 1rem;
    margin-top: 0.85rem;
}

.pom-detail__grid > label[b-9wx1p70ett] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.pom-detail__grid > label > span[b-9wx1p70ett] {
    font-size: 0.76rem;
    font-weight: 600;
    color: #4a5361;
}

.pom-detail__grid > label > small[b-9wx1p70ett] {
    font-size: 0.7rem;
    color: #7b8492;
    line-height: 1.35;
}

.pom-detail__wide[b-9wx1p70ett] { grid-column: 1 / -1; }
.pom-detail__remarks[b-9wx1p70ett]  textarea { min-height: 2.6rem; }

.pom-detail__buttons[b-9wx1p70ett] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.pom-detail__hint[b-9wx1p70ett] {
    margin-right: auto;
    font-size: 0.76rem;
    color: #6a7381;
}

/* Invoice-target picker in the toolbar. Only rendered when the ERP offers more
   than one target for the order voucher type. */
.pom-target[b-9wx1p70ett]  .e-input-group { min-width: 190px; }

.pom-target__item[b-9wx1p70ett] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.pom-target__item small[b-9wx1p70ett] {
    font-size: 0.7rem;
    color: #7b8492;
}

/* Invoice dialog. Near-full-screen because the transaction page inside it is a
   full billing form, not a confirmation — the operator works in here. */
[b-9wx1p70ett] .pom-invoice-dialog .e-dlg-content {
    padding: 0.4rem 0.6rem;
    overflow: auto;
}

.pom-invoice-dialog__title[b-9wx1p70ett] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.pom-invoice-dialog__title small[b-9wx1p70ett] {
    font-size: 0.72rem;
    font-weight: 400;
    color: #7b8492;
}
/* /Pages/Customer Portal/PortalPaymentsPage.razor.rz.scp.css */
/* Portal Payments — scoped styles. Master shell and help dock come from the
   global stylesheet; the filter row, the status walk, the bill table and the
   note panel are local. */

.ppy-page__body[b-rc6946g818] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* <section>, not <div> — the global `.master-body > section` rule is what
   gives this pane its own scrollbar. */
.ppy-page__main[b-rc6946g818] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: auto !important;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 0.35rem;
}

/* The filter row is laid out by the shared `.portal-filters` grid in
   app.css — a 3-column grid for every Customer Portal admin page. Nothing
   local, on purpose: a rule here would be scoped CSS and would outrank
   the shared one, so the eight pages would drift apart. */

.ppy-switch[b-rc6946g818] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: #4a5361;
    white-space: nowrap;
}

.ppy-grid[b-rc6946g818] { min-height: 240px; }

.ppy-empty[b-rc6946g818] {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border: 1px dashed var(--inv-border, #e2e6ec);
    border-radius: 8px;
    background: #fbfcfe;
    font-size: 0.82rem;
    color: #6a7381;
    max-width: 80ch;
}

.ppy-toolbar__note[b-rc6946g818] {
    margin-left: auto;
    font-size: 0.78rem;
    color: #6a7381;
}

.ppy-muted[b-rc6946g818] { color: #9aa3b0; }

/* ── chips ──────────────────────────────────────────────────────────────── */

.ppy-chip[b-rc6946g818] {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #eef2f7;
    color: #55606f;
}

.ppy-chip--initiated[b-rc6946g818] { background: #eceff3; color: #55606f; }
/* Paid-but-not-posted is the state that needs a person. Amber, not green. */
.ppy-chip--paid[b-rc6946g818]      { background: #fde8c8; color: #8a5300; }
.ppy-chip--draft[b-rc6946g818]     { background: #fdf0d5; color: #8a5300; }
.ppy-chip--posted[b-rc6946g818]    { background: #dff3e4; color: #1d6b34; }
.ppy-chip--failed[b-rc6946g818]    { background: #fdeaea; color: #a3312a; }

/* ── detail panel ───────────────────────────────────────────────────────── */

.ppy-detail[b-rc6946g818] {
    border: 1px solid var(--inv-border, #e2e6ec);
    border-radius: 8px;
    background: #fff;
    padding: 0.9rem 1rem 1rem;
}

.ppy-detail__head h2[b-rc6946g818] {
    margin: 0 0 0.1rem;
    font-size: 0.98rem;
    font-weight: 600;
}

.ppy-detail__sub[b-rc6946g818] {
    margin: 0 0 0.15rem;
    font-size: 0.79rem;
    color: #6a7381;
}

.ppy-detail__fail[b-rc6946g818] {
    margin: 0.4rem 0 0;
    padding: 0.4rem 0.7rem;
    border-left: 3px solid #d98b84;
    background: #fdf3f2;
    font-size: 0.79rem;
    color: #8a3a32;
    max-width: 90ch;
}

.ppy-detail__plain[b-rc6946g818] {
    margin: 0.8rem 0 0;
    font-size: 0.81rem;
    color: #6a7381;
    max-width: 90ch;
}

/* ── the status walk ────────────────────────────────────────────────────── */

.ppy-walk[b-rc6946g818] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
}

.ppy-walk__step[b-rc6946g818] {
    flex: 1 1 150px;
    min-width: 140px;
    padding: 0.45rem 0.65rem;
    border: 1px solid #e6eaf0;
    border-radius: 8px;
    background: #fbfcfe;
}

.ppy-walk__label[b-rc6946g818] {
    display: block;
    font-size: 0.77rem;
    font-weight: 600;
    color: #98a1ae;
}

.ppy-walk__when[b-rc6946g818] {
    display: block;
    font-size: 0.75rem;
    color: #b0b7c2;
}

/* Reached: this actually happened. */
.ppy-walk__step--done[b-rc6946g818] {
    border-color: #bfe0c8;
    background: #f4fbf6;
}

.ppy-walk__step--done .ppy-walk__label[b-rc6946g818] { color: #1d6b34; }
.ppy-walk__step--done .ppy-walk__when[b-rc6946g818] { color: #4a6b55; }

/* Where it is now — the step a clerk's eye should land on. */
.ppy-walk__step--now[b-rc6946g818] {
    border-color: #e0b45f;
    background: #fdf7ec;
    box-shadow: 0 0 0 1px #f0dcb4 inset;
}

.ppy-walk__step--now .ppy-walk__label[b-rc6946g818] { color: #8a5300; }
.ppy-walk__step--now .ppy-walk__when[b-rc6946g818] { color: #8a6a30; }

/* ── bills ──────────────────────────────────────────────────────────────── */

.ppy-bills[b-rc6946g818] {
    width: 100%;
    margin-top: 0.85rem;
    border-collapse: collapse;
    font-size: 0.79rem;
}

.ppy-bills th[b-rc6946g818],
.ppy-bills td[b-rc6946g818] {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid #eef1f5;
    text-align: left;
}

.ppy-bills th[b-rc6946g818] {
    font-weight: 600;
    color: #4a5361;
    background: #f7f9fc;
    white-space: normal;
}

/* Numeric columns right-aligned, app-wide convention. */
.ppy-bills .num[b-rc6946g818] { text-align: right; }

/* ── note + actions ─────────────────────────────────────────────────────── */

.ppy-detail__actions[b-rc6946g818] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: flex-end;
    margin-top: 0.9rem;
}

.ppy-detail__note[b-rc6946g818] {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.ppy-detail__note > span[b-rc6946g818] {
    font-size: 0.76rem;
    font-weight: 600;
    color: #4a5361;
}

.ppy-detail__remarks[b-rc6946g818]  textarea { min-height: 2.6rem; }

.ppy-detail__buttons[b-rc6946g818] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.ppy-link[b-rc6946g818] {
    font-size: 0.78rem;
    color: #274b8e;
    text-decoration: none;
    white-space: nowrap;
}

.ppy-link:hover[b-rc6946g818] { text-decoration: underline; }
/* /Pages/Customer Portal/PortalProductAccessPage.razor.rz.scp.css */
/* Portal Catalogue — layout mechanics only; the shell and every cosmetic
   token come from app.css. */

.ppa-page[b-zaxvlo99am] { display: block; }

.ppa-page__body[b-zaxvlo99am] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.ppa-page__main[b-zaxvlo99am] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Groups on the left, products on the right. The products half is much wider:
   picking a group is a moment, publishing to it is the work. */
.ppa-split[b-zaxvlo99am] {
    flex: 1 1 auto;
    display: flex;
    gap: 1rem;
    min-height: 0;
    overflow: hidden;
}

.ppa-groups[b-zaxvlo99am] {
    flex: 0 0 20rem;
    max-width: 20rem;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .35rem;
}

.ppa-products[b-zaxvlo99am] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ppa-grid[b-zaxvlo99am] { flex: 1 1 auto; min-height: 280px; }

.ppa-filters[b-zaxvlo99am] { margin-bottom: .75rem; flex: 0 0 auto; }

.ppa-products__empty[b-zaxvlo99am] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    color: var(--shell-muted-text, #767676);
}

.ppa-head[b-zaxvlo99am] {
    margin: .2rem 0 .5rem;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--shell-muted-text, #767676);
}

/* ── group list ── */
.ppa-grouplist[b-zaxvlo99am] { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }

.ppa-group[b-zaxvlo99am] {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    width: 100%;
    text-align: left;
    padding: .5rem .65rem;
    border: 1px solid #e0e0e0;
    border-radius: .5rem;
    background: #fff;
    cursor: pointer;
}

.ppa-group:disabled[b-zaxvlo99am] { opacity: .6; cursor: default; }
.ppa-group--on[b-zaxvlo99am] { border-color: #0b4a8f; background: #eef4fa; }

.ppa-group__name[b-zaxvlo99am] { font-weight: 600; font-size: .88rem; }
.ppa-group__counts[b-zaxvlo99am] { font-size: .76rem; color: var(--shell-muted-text, #767676); }

/* The state worth acting on: these customers can sign in and would find an
   empty portal. Amber, not red — red means cancelled across this app. */
.ppa-group__warn[b-zaxvlo99am] { font-size: .74rem; color: #a86200; }

/* ── who this reaches ── */
.ppa-accounts[b-zaxvlo99am] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }

.ppa-accounts li[b-zaxvlo99am] {
    padding: .3rem .5rem;
    border-radius: .4rem;
    background: #f6f7f9;
}

.ppa-accounts__name[b-zaxvlo99am] { display: block; font-size: .84rem; font-weight: 600; }
.ppa-accounts__meta[b-zaxvlo99am] { display: block; font-size: .74rem; color: var(--shell-muted-text, #767676); }

.ppa-chip[b-zaxvlo99am] {
    display: inline-block;
    margin-left: .3rem;
    padding: 0 .4rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
}

.ppa-chip--login[b-zaxvlo99am] { background: #e8f4ec; color: #1c6b2c; }
.ppa-chip--other[b-zaxvlo99am] { background: #fdf2e2; color: #a86200; }
.ppa-chip[b-zaxvlo99am] { background: #eceff1; color: #5d6a70; }

.ppa-headrow[b-zaxvlo99am] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.ppa-newgroup[b-zaxvlo99am] {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin-bottom: .6rem;
    padding: .55rem .65rem;
    border: 1px solid #bcd4ea;
    border-radius: .5rem;
    background: rgba(11, 74, 143, .03);
}

.ppa-newgroup__hint[b-zaxvlo99am] {
    font-size: .74rem;
    line-height: 1.4;
    color: var(--shell-muted-text, #767676);
}

.ppa-memberedit[b-zaxvlo99am] { display: flex; gap: .35rem; align-items: center; margin-bottom: .45rem; }
.ppa-memberedit .prod-master__input[b-zaxvlo99am] { flex: 1 1 auto; min-width: 0; }

.ppa-accounts--pick li[b-zaxvlo99am] { background: transparent; padding: .15rem 0; }

.ppa-pick[b-zaxvlo99am] { display: flex; align-items: flex-start; gap: .45rem; cursor: pointer; }

.ppa-memberactions[b-zaxvlo99am] { display: flex; gap: .35rem; margin: .5rem 0 .25rem; }

/* The one action here that writes at once and cannot be discarded, so it gets
   a panel of its own rather than being a button that just happens. */
.ppa-confirm[b-zaxvlo99am] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 .6rem;
    padding: .6rem .8rem;
    border: 1px solid #e0b352;
    border-radius: .5rem;
    background: #fffaef;
}

.ppa-confirm__hint[b-zaxvlo99am] {
    display: block;
    margin-top: .2rem;
    font-size: .78rem;
    line-height: 1.45;
    color: #8a6d1f;
}

.ppa-confirm__actions[b-zaxvlo99am] { display: flex; gap: .4rem; flex: 0 0 auto; }

.ppa-note[b-zaxvlo99am],
.ppa-empty[b-zaxvlo99am] {
    margin: .4rem 0 0;
    padding: .5rem .65rem;
    border-radius: .4rem;
    background: #f4f6f8;
    color: #444;
    font-size: .8rem;
    line-height: 1.5;
}

.ppa-toolbar__sep[b-zaxvlo99am] {
    display: inline-block;
    width: 1px;
    align-self: stretch;
    min-height: 1.5rem;
    margin: 0 .35rem;
    background: rgba(0, 0, 0, .12);
}

.ppa-toolbar__note[b-zaxvlo99am] {
    margin-left: auto;
    color: var(--shell-muted-text, #767676);
    font-size: .85rem;
}

/* A tick that differs from what is saved — so it is obvious at a glance what
   Save is about to write. */
.ppa-grid[b-zaxvlo99am]  .ppa-row--changed .e-rowcell:not(.e-active) {
    background-color: #fdf7ec;
    font-weight: 600;
}

.ppa-grid[b-zaxvlo99am]  .ppa-row--inactive .e-rowcell:not(.e-active) {
    color: #8a8a8a;
    font-style: italic;
}

.ppa-grid[b-zaxvlo99am]  .ppa-total {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* /Pages/Customer Portal/PortalTermsPage.razor.rz.scp.css */
/* PortalTermsPage — layout mechanics only; the shell and every cosmetic token
   come from app.css. */

.ptm-page[b-10m3fow6fi] {
    display: block;
}

.ptm-page__body[b-10m3fow6fi] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.ptm-page__main[b-10m3fow6fi] {
    flex: 1 1 auto;
    min-width: 0;
}

.ptm-toolbar__note[b-10m3fow6fi] {
    margin-left: auto;
    color: var(--shell-muted-text, #767676);
    font-size: .85rem;
}

.ptm-versions[b-10m3fow6fi] {
    margin-bottom: .75rem;
}

/* The two banners that explain why the editor is or is not usable. Stated
   before the fields rather than after a failed save. */
.ptm-locked[b-10m3fow6fi],
.ptm-placeholders[b-10m3fow6fi],
.ptm-empty[b-10m3fow6fi] {
    margin: 0 0 .75rem;
    padding: .6rem .8rem;
    border-radius: 6px;
    line-height: 1.5;
}

.ptm-locked[b-10m3fow6fi] {
    background: #e8f1f8;
    color: #123f5e;
}

.ptm-placeholders[b-10m3fow6fi] {
    background: #fdf2e2;
    color: #a86200;
    font-family: Consolas, "Courier New", monospace;
    font-size: .85rem;
}

.ptm-empty[b-10m3fow6fi] {
    background: #f4f6f8;
    color: #444;
}

.ptm-head[b-10m3fow6fi] {
    display: grid;
    gap: .6rem;
    margin-bottom: 1rem;
}

.ptm-preamble[b-10m3fow6fi]  textarea { min-height: 5rem; }

/* ── Sections ── */
.ptm-sections[b-10m3fow6fi] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.ptm-section[b-10m3fow6fi] {
    border: 1px solid var(--shell-border, #e2e6ec);
    border-radius: 8px;
    padding: .6rem;
    background: #fff;
}

.ptm-section__bar[b-10m3fow6fi] {
    display: flex;
    gap: .4rem;
    align-items: center;
    margin-bottom: .5rem;
}

.ptm-section__no[b-10m3fow6fi] {
    flex: 0 0 1.6rem;
    text-align: center;
    font-weight: 600;
    color: var(--shell-muted-text, #767676);
}

.ptm-section__heading[b-10m3fow6fi] { flex: 1 1 auto; min-width: 0; }
.ptm-section__key[b-10m3fow6fi] { flex: 0 0 9rem; }

/* Tall enough to see a clause without scrolling a two-line window — this text
   is read in paragraphs, not typed in one line. */
.ptm-section__body[b-10m3fow6fi]  textarea {
    min-height: 11rem;
    font-family: Consolas, "Courier New", monospace;
    font-size: .85rem;
    line-height: 1.5;
}

/* ── Chips ── */
.ptm-chip[b-10m3fow6fi] {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}

.ptm-chip--live[b-10m3fow6fi] { background: #e7f5ed; color: #1a7f4b; }
.ptm-chip--draft[b-10m3fow6fi] { background: #fdf2e2; color: #a86200; }

.ptm-acceptances[b-10m3fow6fi] { margin-top: 1.25rem; }

.ptm-publish__switch[b-10m3fow6fi] { margin-top: .75rem; }

.ptm-publish__hint[b-10m3fow6fi] {
    margin: .6rem 0 0;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--shell-muted-text, #767676);
}
/* /Pages/Customer Portal/PortalUsersPage.razor.rz.scp.css */
/* Portal Users — layout mechanics only; the shell and every cosmetic token
   come from app.css. */

.pu-page[b-e9pp5i6af5] { display: block; }

.pu-page__body[b-e9pp5i6af5] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.pu-page__main[b-e9pp5i6af5] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pu-filters[b-e9pp5i6af5] { margin-bottom: .75rem; flex: 0 0 auto; }

/* List left, editor right. The editor is the wider half: the list is a way in,
   the editor is the work. */
.pu-split[b-e9pp5i6af5] {
    flex: 1 1 auto;
    display: flex;
    gap: 1rem;
    min-height: 0;
    overflow: hidden;
}

.pu-list[b-e9pp5i6af5] {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.pu-grid[b-e9pp5i6af5] { flex: 1 1 auto; min-height: 260px; }

/* The pane does NOT scroll as a whole — it is the editor inside that scrolls,
   so the section headings stay put rather than sliding away mid-edit. */
.pu-detail[b-e9pp5i6af5] {
    flex: 1.35 1 0;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .35rem;
}

.pu-detail__empty[b-e9pp5i6af5] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    color: var(--shell-muted-text, #767676);
}

.pu-toolbar__sep[b-e9pp5i6af5] {
    display: inline-block;
    width: 1px;
    align-self: stretch;
    min-height: 1.5rem;
    margin: 0 .35rem;
    background: rgba(0, 0, 0, .12);
}

.pu-toolbar__note[b-e9pp5i6af5] {
    margin-left: auto;
    color: var(--shell-muted-text, #767676);
    font-size: .85rem;
}

.pu-empty[b-e9pp5i6af5] {
    margin: 0 0 .75rem;
    padding: .6rem .8rem;
    border-radius: 6px;
    background: #f4f6f8;
    color: #444;
    line-height: 1.5;
}

/* ── The issued token ──
   Deliberately loud and manually dismissed. It is shown once and cannot be
   recovered, so it must not disappear on a redraw the way a banner does. */
.pu-token[b-e9pp5i6af5] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 .6rem;
    padding: .6rem .8rem;
    border: 1px solid #e0b352;
    border-radius: .5rem;
    background: #fffaef;
}

.pu-token code[b-e9pp5i6af5] {
    display: block;
    margin: .3rem 0;
    padding: .35rem .5rem;
    background: #fff;
    border: 1px solid #e6ddc6;
    border-radius: .3rem;
    font-size: .82rem;
    word-break: break-all;
    user-select: all;   /* one click selects the whole token */
}

.pu-token__expiry[b-e9pp5i6af5] { font-size: .78rem; color: #8a6d1f; }

/* ── Set a temporary password ──
   The same amber as the token panel, because it is the same kind of thing: a
   credential on screen that the operator has to act on now. */
.pu-setpw[b-e9pp5i6af5] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 0 0 .6rem;
    padding: .7rem .8rem;
    border: 1px solid #e0b352;
    border-radius: .5rem;
    background: #fffaef;
}

.pu-setpw__body[b-e9pp5i6af5] { flex: 1 1 auto; min-width: 0; }

.pu-setpw__why[b-e9pp5i6af5] {
    margin: .25rem 0 .6rem;
    font-size: .8rem;
    line-height: 1.45;
    color: #6b5a2c;
}

/* Two fields and the Suggest button on one line while there is room; the
   button drops under them rather than squeezing the fields to nothing. */
.pu-setpw__fields[b-e9pp5i6af5] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem;
}

.pu-setpw__fields[b-e9pp5i6af5]  .e-input-group { min-width: 14rem; }

.pu-setpw__error[b-e9pp5i6af5] {
    margin: .5rem 0 0;
    font-size: .8rem;
    color: #a4262c;
}

.pu-setpw__actions[b-e9pp5i6af5] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 0 0 auto;
}

/* ── State chips ──
   Amber for "wants dealing with", grey for switched off. Red stays reserved
   for cancelled across this application. */
.pu-chip[b-e9pp5i6af5] {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}

.pu-chip--active[b-e9pp5i6af5]   { background: #e8f4ec; color: #1c6b2c; }
.pu-chip--invited[b-e9pp5i6af5]  { background: #fdf2e2; color: #a86200; }
.pu-chip--locked[b-e9pp5i6af5]   { background: #fdf2e2; color: #a86200; }
.pu-chip--disabled[b-e9pp5i6af5] { background: #eceff1; color: #5d6a70; }

.pu-grid[b-e9pp5i6af5]  .pu-row--attention .e-rowcell:not(.e-active) {
    background-color: #fdf7ec;
}

.pu-grid[b-e9pp5i6af5]  .pu-total {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* /Pages/Customer Portal/SupportDeskPage.razor.rz.scp.css */
/* SupportDeskPage — queue on the left, conversation on the right, help aside.
   Layout mechanics only; the shell (master-page / master-shell /
   master-sticky-top / master-body) and every cosmetic token come from app.css. */

.sd-page[b-m288494z9c] {
    display: block;
}

/* The help panel is a SIBLING of the main pane, so the body has to be a row.
   Without this rule the body lays out as blocks and the guide drops underneath
   the queue instead of sitting beside it — every other portal admin page
   carries the same rule. */
.sd-page__body[b-m288494z9c] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

/* master-body gives its DIRECT children their own scrollbar. The main pane is
   one of them; the two panes inside it scroll independently again. */
.sd-page__main[b-m288494z9c] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    min-width: 0;
    min-height: 0;
    overflow: hidden;

    /* Without a height of its own the pane collapses to its content and the
       queue shows a header and one row. Grows with the viewport, but never so
       far that the grid outruns the screen. */
    min-height: clamp(460px, 62vh, 820px);
}

.sd-queue[b-m288494z9c],
.sd-thread[b-m288494z9c] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.sd-queue[b-m288494z9c] {
    flex: 1.15 1 0;
}

/* The PANE does not scroll — .sd-messages inside it does. When the whole pane
   was the scroller, the composer scrolled away with the conversation, so
   answering a long ticket meant scrolling past the whole history to find the
   reply box. Header, facts, assignee and composer now hold still and only the
   messages move. */
.sd-thread[b-m288494z9c] {
    flex: 1 1 0;
    overflow: hidden;
    padding-right: .25rem;
}

/* Everything in the pane that is NOT the message list keeps its own height. */
.sd-thread > .prod-master__panel-head[b-m288494z9c],
.sd-thread > .sd-thread__meta[b-m288494z9c],
.sd-thread > .sd-typing[b-m288494z9c],
.sd-thread > .sd-composer[b-m288494z9c] {
    flex: 0 0 auto;
}

/* Every row above the conversation is squeezed deliberately: on a desk pane
   the title, the facts and the assignee were between them taller than the
   messages, and the messages are the reason the pane exists. */
.sd-thread > .prod-master__panel-head[b-m288494z9c] {
    padding-bottom: .3rem;
    margin-bottom: .1rem;
}

.sd-thread > .prod-master__panel-head h2[b-m288494z9c] {
    font-size: 1.02rem;
    line-height: 1.25;
}

/* Nothing open: the conversation pane holds one line of placeholder text, so
   it keeps only enough width to show it and the queue takes the rest. This is
   the state the desk sits in most of the day. */
.sd-page__main--browsing .sd-queue[b-m288494z9c] {
    flex: 3.4 1 0;
}

.sd-page__main--browsing .sd-thread[b-m288494z9c] {
    flex: 1 1 0;
    max-width: 26rem;
}

/* Below this the two panes stack rather than squeeze the grid into a gutter. */
@media (max-width: 1180px) {
    .sd-page__main[b-m288494z9c] {
        flex-direction: column;
        overflow-y: auto;
    }
    .sd-queue[b-m288494z9c] { flex: 0 0 auto; }
    .sd-queue__grid[b-m288494z9c] { height: 360px; }
    .sd-thread[b-m288494z9c] { flex: 0 0 auto; overflow: visible; }

    /* Stacked, .sd-thread has no height to divide up, so the message list
       needs its own ceiling — otherwise it grows to fit every message and
       pushes the composer down the page, which is the thing being fixed. */
    .sd-messages[b-m288494z9c] { flex: 0 0 auto; max-height: 55vh; }

    /* Stacked, the panes share width and split height — so the browsing
       weights (which are horizontal) have to be undone, or they would
       stretch the queue vertically instead. */
    .sd-page__main--browsing .sd-queue[b-m288494z9c] { flex: 0 0 auto; }
    .sd-page__main--browsing .sd-thread[b-m288494z9c] { flex: 0 0 auto; max-width: none; }
}

/* ── Filters ── */
.sd-filters[b-m288494z9c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .6rem .75rem;
    margin-bottom: .75rem;
}

.sd-filters__switches[b-m288494z9c] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
}

/* Compact inline switch: label sits BESIDE the toggle. The app-wide
   right-aligned switch rule is for master form rows (.prod-master__switch);
   these are filter chips, so they opt out deliberately. */
.sd-switch[b-m288494z9c] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    cursor: pointer;
    user-select: none;
}

.sd-switch__ctl[b-m288494z9c] {
    flex: 0 0 auto;
}

/* ── Queue grid ── */
.sd-queue__grid[b-m288494z9c] {
    flex: 1 1 auto;
    min-height: 0;
}

.sd-queue__grid[b-m288494z9c]  .e-row {
    cursor: pointer;
}

/* Status row tints, same values as the app-wide lookup tints in app.css so the
   grid and the F2 picker read identically: red = a customer is waiting on us,
   orange = the ticket is no longer live. Selected cells keep the selection
   highlight. */
[b-m288494z9c] .e-row.sd-row--awaiting .e-rowcell:not(.e-active) {
    background: #ffd2d2;
}

[b-m288494z9c] .e-row.sd-row--closed .e-rowcell:not(.e-active) {
    background: #ffe3c2;
}

/* ── Chips ── */
.sd-chip[b-m288494z9c] {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
}

.sd-chip--open[b-m288494z9c]      { background: #e3f0ff; color: #0b4a8f; border-color: #b9d8ff; }
.sd-chip--progress[b-m288494z9c]  { background: #fff2d6; color: #8a5a00; border-color: #ffdd9e; }
.sd-chip--resolved[b-m288494z9c]  { background: #dff5e3; color: #1c6b2c; border-color: #b4e5bf; }
.sd-chip--closed[b-m288494z9c]    { background: #ececec; color: #555;    border-color: #d6d6d6; }
.sd-chip--awaiting[b-m288494z9c]  { background: #ffd2d2; color: #8c1c1c; border-color: #f5b1b1; }
.sd-chip--internal[b-m288494z9c]  { background: #fff0c2; color: #7a5300; border-color: #f0d68a; }

.sd-muted[b-m288494z9c] {
    color: var(--shell-muted-text, #767676);
    font-size: .8rem;
}

/* ── Thread ── */
.sd-thread__empty[b-m288494z9c] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    color: var(--shell-muted-text, #767676);
}

/* Facts and assignee on ONE row: facts flow and wrap on the left, the
   assignee combo holds a fixed column on the right. */
.sd-thread__meta[b-m288494z9c] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: .3rem .9rem;
    margin: .3rem 0 .5rem;
}

.sd-facts[b-m288494z9c] {
    flex: 1 1 240px;
    display: flex;
    flex-wrap: wrap;
    gap: .1rem .9rem;
    margin: 0;
    min-width: 0;
}

.sd-facts div[b-m288494z9c] {
    display: flex;
    gap: .4rem;
    font-size: .82rem;
    min-width: 0;
}

.sd-facts dt[b-m288494z9c] {
    color: var(--shell-muted-text, #767676);
    flex: 0 0 auto;
}

.sd-facts dd[b-m288494z9c] {
    margin: 0;
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.sd-assign[b-m288494z9c] {
    flex: 0 0 auto;
    width: 240px;
    max-width: 100%;
    margin: 0;
}

/* The one scroller in the pane. min-height:0 is what lets a flex child
   actually shrink and overflow instead of stretching its parent; without it
   the list grows and pushes the composer out of the pane again. */
.sd-messages[b-m288494z9c] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: 1rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .35rem;
}

.sd-msg[b-m288494z9c] {
    border: 1px solid #e0e0e0;
    border-radius: .6rem;
    padding: .55rem .7rem;
    background: rgba(255, 255, 255, .65);
}

/* Customer left-anchored, our messages indented — the thread reads as a
   conversation rather than a log. */
.sd-msg--customer[b-m288494z9c] { border-left: 3px solid #0b4a8f; }
.sd-msg--us[b-m288494z9c]       { border-left: 3px solid #1c6b2c; margin-left: 1.25rem; }
.sd-msg--internal[b-m288494z9c] { border-left: 3px solid #b8860b; margin-left: 1.25rem; background: #fffaef; }

.sd-msg__head[b-m288494z9c] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: .76rem;
    margin-bottom: .3rem;
}

.sd-msg__who[b-m288494z9c] {
    color: var(--shell-muted-text, #767676);
}

.sd-msg__head time[b-m288494z9c] {
    margin-left: auto;
    color: var(--shell-muted-text, #767676);
}

.sd-msg__body[b-m288494z9c] {
    margin: 0;
    font-size: .88rem;
    white-space: pre-wrap;      /* the customer's line breaks are meaning */
    overflow-wrap: anywhere;
}

/* ── Composer ──
   The internal-note state must be impossible to miss: the whole panel turns
   amber, so nobody types a private remark into what they think is a reply. */
.sd-composer[b-m288494z9c] {
    border: 1px solid #e0e0e0;
    border-radius: .7rem;
    padding: .75rem;
    background: rgba(255, 255, 255, .6);
}

.sd-composer--internal[b-m288494z9c] {
    border-color: #e0b352;
    background: #fffaef;
    box-shadow: inset 0 0 0 2px rgba(224, 179, 82, .25);
}

/* nowrap: the status picker belongs BESIDE the switch, not under it. The
   label ellipsises rather than pushing it to a second line — the full
   sentence is on the title attribute. */
.sd-composer__head[b-m288494z9c] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .9rem;
    margin-bottom: .45rem;
}

.sd-composer__head .sd-switch[b-m288494z9c] { min-width: 0; }

.sd-composer__head .sd-switch span[b-m288494z9c] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-composer__status[b-m288494z9c] {
    margin-left: auto;
    flex: 0 0 auto;
    width: 190px;
}

/* Box on the left, its actions stacked down the right. */
.sd-composer__row[b-m288494z9c] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.sd-composer__input[b-m288494z9c] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Tall enough to type a paragraph into, short enough that the two buttons
   beside it are not left floating — they set the floor here. */
.sd-composer__body[b-m288494z9c]  textarea {
    min-height: 96px;
}

.sd-composer__actions[b-m288494z9c] {
    flex: 0 0 auto;
    width: 11rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .4rem;
}

.sd-composer__actions[b-m288494z9c]  .e-btn {
    width: 100%;
    justify-content: center;
}

.sd-composer__count[b-m288494z9c] {
    text-align: right;
    font-size: .74rem;
    line-height: 1.2;
}

/* Narrow pane: back to stacked, where a side-by-side box would be too thin
   to read back what you typed. */
@media (max-width: 720px) {
    .sd-composer__row[b-m288494z9c] { flex-direction: column; align-items: stretch; }
    .sd-composer__actions[b-m288494z9c] { width: auto; flex-direction: row; align-items: center; }
    .sd-composer__count[b-m288494z9c] { margin-left: auto; }
}

/* ── Toolbar ── */
.sd-toolbar__sep[b-m288494z9c] {
    display: inline-block;
    width: 1px;
    align-self: stretch;
    min-height: 1.5rem;
    margin: 0 .35rem;
    background: rgba(0, 0, 0, .12);
}

/* The awaiting-reply figure is the one the desk is judged on — give it the
   emphasis the other counters do not get. */
.prod-master__meta-card--alert strong[b-m288494z9c] {
    color: #b3261e;
}
/* /Pages/Document Management/DocConnectionsPage.razor.rz.scp.css */
/* Two-pane body: form (left, scrolls) + dockable Help panel (right). */
.dc-page__body[b-y4gkq4ryhv] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.dc-page__form[b-y4gkq4ryhv] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    max-height: 100%;
    padding: 0.75rem 1rem 1.25rem;
}
.dc-page__form[b-y4gkq4ryhv]  .prod-master__subhead {
    margin: 0.9rem 0 0.25rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--shell-border, #e0e0e0);
    font-size: 0.92rem;
    font-weight: 600;
}
/* Field grid: strict two columns. */
.dc-page[b-y4gkq4ryhv]  .dc-grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.25rem;
    align-items: center;
}
@media (max-width: 700px) {
    .dc-page[b-y4gkq4ryhv]  .dc-grid2 { grid-template-columns: minmax(0, 1fr); }
}
/* Change-password switch sits beside the User Name cell. */
.dc-page[b-y4gkq4ryhv]  .dc-passwd-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2rem;
}
.dc-page[b-y4gkq4ryhv]  .dc-passwd-toggle label { font-weight: 600; font-size: 0.85rem; }

/* Transfer-option switches on one wrapping row. */
.dc-page[b-y4gkq4ryhv]  .dc-switch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 0.75rem;
}
.dc-page[b-y4gkq4ryhv]  .prod-master__switch {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.dc-page[b-y4gkq4ryhv]  .prod-master__switch label { font-weight: 600; font-size: 0.85rem; }

/* Help panel (mirrors the Ledger Account help panel). */
.ct-page__help[b-y4gkq4ryhv] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-y4gkq4ryhv] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-y4gkq4ryhv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-y4gkq4ryhv] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-y4gkq4ryhv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-y4gkq4ryhv] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-y4gkq4ryhv] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-y4gkq4ryhv] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-y4gkq4ryhv] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-y4gkq4ryhv] { padding-left: 0.15rem; }

[b-y4gkq4ryhv] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .dc-page__body[b-y4gkq4ryhv] { flex-direction: column; }
    .ct-page__help[b-y4gkq4ryhv],
    .ct-page__help--docked[b-y4gkq4ryhv] { flex: 0 0 auto; width: 100%; overflow: visible; }
}
/* /Pages/Document Management/DocPermissionsPage.razor.rz.scp.css */
/* Two-pane body: tree (left, scrolls) + dockable Help panel (right). */
.dp-page__body[b-a2029wos9j] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.dp-page__main[b-a2029wos9j] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem 1.25rem;
}
/* Toolbar: combos + buttons + apply-switch bottom-aligned on one row
   (wraps on narrow screens without being clipped by the sticky top). */
.dp-page[b-a2029wos9j]  .dp-toolbar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.6rem 0.75rem;
    overflow: visible;
}
.dp-page[b-a2029wos9j]  .master-sticky-top { overflow: visible; }
.dp-page[b-a2029wos9j]  .dp-toolbar .e-btn { margin-bottom: 0.15rem; }
.dp-page[b-a2029wos9j]  .dp-apply-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.4rem;
}
.dp-page[b-a2029wos9j]  .dp-apply-switch label {
    font-weight: 600;
    font-size: 0.82rem;
    white-space: nowrap;
}
.dp-page[b-a2029wos9j]  .dp-toolbar .master-busy { padding-bottom: 0.45rem; }

/* Tree grid host — fills the remaining height, its own scroll. */
.dp-tree[b-a2029wos9j] {
    position: relative;   /* anchors the busy overlay */
    flex: 1 1 auto;
    min-height: 320px;
    height: calc(100vh - 330px);
}
/* Busy overlay while the tree expands/collapses or a big cascade applies. */
.dp-tree__overlay[b-a2029wos9j] {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--shell-panel-background, #fff) 60%, transparent);
    backdrop-filter: blur(1px);
    cursor: progress;
}
.dp-page[b-a2029wos9j]  .dp-tree .e-treegrid .e-rowcell {
    padding: 0.15rem 0.4rem;
}
.dp-node[b-a2029wos9j] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}
.dp-node__icon[b-a2029wos9j] { flex: 0 0 auto; }
.dp-node__name[b-a2029wos9j] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Unsaved rows stand out until Save. */
.dp-node__name--dirty[b-a2029wos9j] {
    font-weight: 700;
    color: var(--shell-accent, #0d7377);
}
.dp-chk[b-a2029wos9j] {
    width: 1.05rem;
    height: 1.05rem;
    cursor: pointer;
}

/* Help panel (mirrors the Ledger Account help panel). */
.ct-page__help[b-a2029wos9j] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-a2029wos9j] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-a2029wos9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-a2029wos9j] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-a2029wos9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-a2029wos9j] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-a2029wos9j] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-a2029wos9j] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-a2029wos9j] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-a2029wos9j] { padding-left: 0.15rem; }

[b-a2029wos9j] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .dp-page__body[b-a2029wos9j] { flex-direction: column; }
    .ct-page__help[b-a2029wos9j],
    .ct-page__help--docked[b-a2029wos9j] { flex: 0 0 auto; width: 100%; overflow: visible; }
    .dp-tree[b-a2029wos9j] { height: auto; }
}
/* /Pages/Document Management/FileExplorerPage.razor.rz.scp.css */
/* Two-pane body: explorer (left, fills) + dockable Help panel (right). */
.fx-page__body[b-gt6xs0uu9a] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.fx-page__main[b-gt6xs0uu9a] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem 1.25rem;
}

/* Toolbar: breadcrumb + buttons bottom-aligned, wraps without clipping. */
.fx-page[b-gt6xs0uu9a]  .fx-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.6rem;
    overflow: visible;
}
.fx-page[b-gt6xs0uu9a]  .master-sticky-top { overflow: visible; }
.fx-page[b-gt6xs0uu9a]  .fx-breadcrumb {
    flex: 0 1 auto;
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0 0.4rem;
    direction: rtl;          /* keep the tail (deep path) visible */
    text-align: left;
}
/* Icon-only toolbar buttons — square, glyph centred, meaning in the
   tooltip (title) + aria-label. */
.fx-page[b-gt6xs0uu9a]  .fx-iconbtn {
    min-width: 2.2rem;
    padding: 0.35rem 0.5rem;
    line-height: 1;
}
.fx-page[b-gt6xs0uu9a]  .fx-iconbtn .e-icons {
    font-size: 0.95rem;
    vertical-align: middle;
}
.fx-page[b-gt6xs0uu9a]  .fx-upload-btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.fx-page[b-gt6xs0uu9a]  .fx-upload-btn.e-disabled { pointer-events: none; opacity: 0.5; }
/* In-browser text editor (monospace, fills the dialog). */
[b-gt6xs0uu9a] .fx-editor,
.fx-editor[b-gt6xs0uu9a] {
    width: 100%;
    height: 440px;
    resize: vertical;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.85rem;
    line-height: 1.4;
    padding: 0.6rem;
    border: 1px solid var(--shell-border, #ccc);
    border-radius: 0.4rem;
    white-space: pre;
    overflow: auto;
}

/* ✓/✗ remote-availability column. */
.fx-page[b-gt6xs0uu9a]  .fx-remote { font-weight: 700; font-size: 0.9rem; }
.fx-page[b-gt6xs0uu9a]  .fx-remote--ok { color: #2e9e44; }
.fx-page[b-gt6xs0uu9a]  .fx-remote--missing { color: #c0392b; }
.fx-page[b-gt6xs0uu9a]  .fx-remote--pending { opacity: 0.4; }

/* Plain-HTML confirm modal (delete) — deliberately not SfDialog. */
.fx-modal__backdrop[b-gt6xs0uu9a] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fx-modal[b-gt6xs0uu9a] {
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, #222);
    border-radius: 0.6rem;
    padding: 1.25rem 1.4rem;
    width: 460px;
    max-width: 92vw;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.fx-modal__title[b-gt6xs0uu9a] { margin: 0 0 0.6rem; font-size: 1.05rem; }
.fx-modal__buttons[b-gt6xs0uu9a] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.1rem;
}
.fx-modal__buttons .e-btn[b-gt6xs0uu9a] { cursor: pointer; }

/* Per-row action icon buttons (grid Actions column). */
.fx-page[b-gt6xs0uu9a]  .fx-rowbtns { display: inline-flex; gap: 0.25rem; }
.fx-page[b-gt6xs0uu9a]  .fx-rowbtn {
    min-width: 1.8rem;
    padding: 0.15rem 0.35rem;
    line-height: 1;
}
.fx-page[b-gt6xs0uu9a]  .fx-rowbtn .e-icons { font-size: 0.85rem; }

.fx-page[b-gt6xs0uu9a]  .fx-clipboard-hint {
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.75;
    white-space: nowrap;
}

/* Tree + files behind a draggable SfSplitter. */
.fx-panes[b-gt6xs0uu9a] {
    position: relative;   /* anchors the busy overlay */
    flex: 1 1 auto;
    min-height: 340px;
    height: calc(100vh - 320px);
}
/* Busy overlay while browsing large folders or running an operation
   (delete, rename, move/copy, register, reload). */
.fx-panes__overlay[b-gt6xs0uu9a],
[b-gt6xs0uu9a] .fx-panes__overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--shell-panel-background, #fff) 60%, transparent);
    backdrop-filter: blur(1px);
    cursor: progress;
}
.fx-panes--embedded[b-gt6xs0uu9a] {
    height: 380px;
    min-height: 300px;
}
/* Native CSS split: the tree pane is user-resizable (drag the grip at its
   bottom-right corner); the file pane takes the rest. */
.fx-splitpanes[b-gt6xs0uu9a] {
    display: flex;
    height: 100%;
    width: 100%;
    min-width: 0;
}
.fx-tree[b-gt6xs0uu9a] {
    flex: 0 0 auto;
    width: 320px;
    min-width: 200px;
    max-width: 60%;
    height: 100%;
    resize: horizontal;
    overflow: auto;
    padding-right: 0.15rem;
    border-right: 3px double var(--shell-border, #cfd8dc);
}
.fx-files[b-gt6xs0uu9a] {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding-left: 0.4rem;
}

/* File-drag hover cue on the drop zone (class toggled by
   registerFileDropZone in layout.js). */
.fx-page[b-gt6xs0uu9a]  .fx-files.fx-drop-over {
    outline: 2px dashed var(--shell-accent, #0d7377);
    outline-offset: -4px;
    background: color-mix(in srgb, var(--shell-accent, #0d7377) 8%, transparent);
    cursor: copy;
}

/* Embedded picker chrome. */
[b-gt6xs0uu9a] .fx-pick-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
[b-gt6xs0uu9a] .fx-picked { margin-top: 0.6rem; }
.fx-picked__tab[b-gt6xs0uu9a],
[b-gt6xs0uu9a] .fx-picked__tab {
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.6rem;
    border-bottom: 2px solid var(--shell-accent, #0d7377);
}
.fx-picked__row[b-gt6xs0uu9a],
[b-gt6xs0uu9a] .fx-picked__row {
    display: grid;
    grid-template-columns: 1.4rem minmax(140px, 1fr) minmax(160px, 1.6fr) auto;
    gap: 0.6rem;
    align-items: center;
    font-size: 0.82rem;
}
.fx-page[b-gt6xs0uu9a]  .fx-tree .e-treegrid .e-rowcell,
.fx-page[b-gt6xs0uu9a]  .fx-files .e-grid .e-rowcell {
    padding: 0.15rem 0.4rem;
}
.fx-node[b-gt6xs0uu9a] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}
.fx-node__name[b-gt6xs0uu9a] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Tree node highlighted to match the folder picked in the file grid. Our
   own highlight (single source of truth); the tree's native row-selection
   background is neutralised below so the two never compete. */
.fx-page[b-gt6xs0uu9a]  .fx-node--selected {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--shell-accent, #0d7377);
    color: #fff;
    border-radius: 0.3rem;
    padding: 0 0.4rem;
    margin: -0.05rem 0;
}
.fx-page[b-gt6xs0uu9a]  .fx-tree .e-treegrid .e-row.e-active .e-rowcell,
.fx-page[b-gt6xs0uu9a]  .fx-tree .e-treegrid .e-rowcell.e-selectionbackground {
    background-color: transparent !important;
}

/* Transfer queue (legacy File Transfer tab) — docked under the panes. */
.fx-queue[b-gt6xs0uu9a] {
    flex: 0 0 auto;
    border: 1px solid var(--shell-border, #ddd);
    border-radius: 0.5rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    margin-top: 0.5rem;
}
.fx-queue__head[b-gt6xs0uu9a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0.6rem;
    flex-wrap: wrap;
}
.fx-queue__toggle[b-gt6xs0uu9a] {
    border: none;
    background: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.fx-queue__count[b-gt6xs0uu9a] { font-weight: 600; font-size: 0.75rem; opacity: 0.7; }
.fx-queue__actions[b-gt6xs0uu9a] { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.fx-queue__rows[b-gt6xs0uu9a] {
    max-height: 190px;
    overflow-y: auto;
    border-top: 1px solid var(--shell-border, #eee);
    padding: 0.25rem 0.6rem 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.fx-queue__row[b-gt6xs0uu9a] {
    display: grid;
    grid-template-columns: 1.4rem minmax(120px, 1.4fr) minmax(70px, 0.8fr) minmax(120px, 1fr) minmax(110px, 1.2fr) auto;
    gap: 0.6rem;
    align-items: center;
    font-size: 0.82rem;
}
.fx-queue__name[b-gt6xs0uu9a],
.fx-queue__folder[b-gt6xs0uu9a] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-queue__folder[b-gt6xs0uu9a] { opacity: 0.7; }
.fx-qbar[b-gt6xs0uu9a] {
    height: 0.7rem;
    border-radius: 0.35rem;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
.fx-qbar__fill[b-gt6xs0uu9a] { height: 100%; border-radius: 0.35rem; background: #0d7377; transition: width 0.15s linear; }
.fx-qbar__fill--completed[b-gt6xs0uu9a] { background: #2e9e44; }
.fx-qbar__fill--failed[b-gt6xs0uu9a] { background: #c0392b; }
.fx-qbar__fill--canceled[b-gt6xs0uu9a] { background: #999; }
.fx-queue__status[b-gt6xs0uu9a] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.fx-queue__status--completed[b-gt6xs0uu9a] { color: #2e9e44; }
.fx-queue__status--failed[b-gt6xs0uu9a] { color: #c0392b; }
.fx-queue__status--canceled[b-gt6xs0uu9a] { color: #888; }
.fx-queue__btns[b-gt6xs0uu9a] { display: flex; gap: 0.25rem; }
.fx-queue__btn[b-gt6xs0uu9a] {
    border: 1px solid var(--shell-border, #ccc);
    background: none;
    border-radius: 0.3rem;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1.3;
    padding: 0.05rem 0.35rem;
}
.fx-queue__btn:hover[b-gt6xs0uu9a] { background: rgba(0, 0, 0, 0.06); }

/* Help panel (mirrors the Ledger Account help panel). */
.ct-page__help[b-gt6xs0uu9a] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-gt6xs0uu9a] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-gt6xs0uu9a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-gt6xs0uu9a] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-gt6xs0uu9a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-gt6xs0uu9a] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-gt6xs0uu9a] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-gt6xs0uu9a] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-gt6xs0uu9a] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-gt6xs0uu9a] { padding-left: 0.15rem; }

[b-gt6xs0uu9a] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 1000px) {
    .fx-page__body[b-gt6xs0uu9a] { flex-direction: column; }
    .fx-panes[b-gt6xs0uu9a] { flex-direction: column; height: auto; }
    .fx-tree[b-gt6xs0uu9a] { flex: 0 0 auto; height: 300px; width: 100%; }
    .fx-files[b-gt6xs0uu9a] { height: 420px; }
    .ct-page__help[b-gt6xs0uu9a],
    .ct-page__help--docked[b-gt6xs0uu9a] { flex: 0 0 auto; width: 100%; overflow: visible; }
}
/* /Pages/Help/GettingStartedPage.razor.rz.scp.css */
/* Getting Started - a reading page reached from the sign-in screen, Company
   Selection and the sidebar. Shares the legal page's quiet card look and the
   shell tokens, so it follows whichever theme the visitor's browser holds. */

.gs-page[b-0tusu2pb29] {
    min-height: 100vh;
    padding: 2rem 1rem 3rem;
    background: var(--shell-body-background);
    color: var(--shell-text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.gs-head[b-0tusu2pb29],
.gs-body[b-0tusu2pb29] {
    width: min(1080px, 100%);
}

.gs-head[b-0tusu2pb29] {
    background: var(--shell-panel-background);
    border: 1px solid var(--shell-border);
    border-radius: 14px;
    padding: 1.4rem 1.75rem 1.25rem;
}

.gs-head__brand[b-0tusu2pb29] { font-size: 0.9rem; font-weight: 700; opacity: 0.85; }
.gs-head__version[b-0tusu2pb29] { font-size: 0.75rem; font-weight: 600; opacity: 0.9; }
.gs-head__title[b-0tusu2pb29] { margin: 0.35rem 0 0.25rem; font-size: 1.7rem; line-height: 1.2; text-wrap: balance; }
.gs-head__lead[b-0tusu2pb29] { margin: 0; max-width: 65ch; font-size: 0.98rem; opacity: 0.85; }
.gs-head__actions[b-0tusu2pb29] { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

.gs-btn[b-0tusu2pb29] {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.45rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.gs-btn:hover[b-0tusu2pb29] { background: var(--shell-panel-background-soft, rgba(127, 127, 127, 0.08)); }
.gs-btn:focus-visible[b-0tusu2pb29] { outline: 2px solid var(--shell-accent, #2563eb); outline-offset: 2px; }
.gs-btn:disabled[b-0tusu2pb29] { opacity: 0.5; cursor: default; }
.gs-btn--primary[b-0tusu2pb29] {
    background: var(--shell-button-primary, var(--shell-accent, #2563eb));
    border-color: transparent;
    color: var(--shell-button-primary-text, #fff);
}
.gs-btn--primary:hover[b-0tusu2pb29] { filter: brightness(1.05); background: var(--shell-button-primary, var(--shell-accent, #2563eb)); }

.gs-body[b-0tusu2pb29] {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.gs-toc[b-0tusu2pb29] {
    position: sticky;
    top: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--shell-border);
    border-radius: 12px;
    background: var(--shell-panel-background);
    font-size: 0.9rem;
}
.gs-toc__label[b-0tusu2pb29] { margin: 0 0 0.5rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }
.gs-toc ol[b-0tusu2pb29] { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
.gs-toc a[b-0tusu2pb29] { color: inherit; text-decoration: none; }
.gs-toc a:hover[b-0tusu2pb29] { text-decoration: underline; }

.gs-doc[b-0tusu2pb29] {
    min-width: 0;
    padding: 0.5rem 1.75rem 1.5rem;
    border: 1px solid var(--shell-border);
    border-radius: 14px;
    background: var(--shell-panel-background);
    line-height: 1.55;
}

.gs-section[b-0tusu2pb29] { padding-top: 1.1rem; scroll-margin-top: 1rem; }
.gs-section + .gs-section[b-0tusu2pb29] { border-top: 1px solid var(--shell-border); margin-top: 1rem; }
.gs-section h2[b-0tusu2pb29] { margin: 0 0 0.6rem; font-size: 1.2rem; text-wrap: balance; }
.gs-section p[b-0tusu2pb29],
.gs-section ul[b-0tusu2pb29],
.gs-section ol[b-0tusu2pb29] { max-width: 72ch; margin: 0 0 0.75rem; }
.gs-section ul[b-0tusu2pb29],
.gs-section ol[b-0tusu2pb29] { padding-left: 1.35rem; display: flex; flex-direction: column; gap: 0.35rem; }

.gs-steps li[b-0tusu2pb29]::marker { font-weight: 700; }

.gs-tip[b-0tusu2pb29] {
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid var(--shell-status-info-border, #1976d2);
    border-left-width: 4px;
    background: var(--shell-status-info-bg, #e3f2fd);
}

.gs-keys[b-0tusu2pb29],
.gs-table[b-0tusu2pb29] { border-collapse: collapse; font-size: 0.92rem; margin: 0 0 0.9rem; }
.gs-keys th[b-0tusu2pb29],
.gs-keys td[b-0tusu2pb29],
.gs-table th[b-0tusu2pb29],
.gs-table td[b-0tusu2pb29] { padding: 0.4rem 0.65rem; border-bottom: 1px solid var(--shell-border); text-align: left; vertical-align: top; }
.gs-keys th[b-0tusu2pb29] { white-space: nowrap; width: 1%; }
.gs-table thead th[b-0tusu2pb29] { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; }
.gs-tablewrap[b-0tusu2pb29] { overflow-x: auto; max-width: 100%; }

kbd[b-0tusu2pb29] {
    display: inline-block;
    min-width: 2rem;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--shell-border);
    border-bottom-width: 2px;
    border-radius: 0.35rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    /* The base theme styles <kbd> as white text on a dark chip; set both
       colours from the shell tokens so the key reads in either theme. */
    color: var(--shell-text-primary) !important;
    background: var(--shell-surface-background, #f1f5fa) !important;
    box-shadow: none;
}

.gs-muted[b-0tusu2pb29] { opacity: 0.75; font-size: 0.9rem; }
.gs-updated[b-0tusu2pb29] { margin-top: 1.25rem; }

@media (max-width: 820px) {
    .gs-body[b-0tusu2pb29] { grid-template-columns: minmax(0, 1fr); }
    .gs-toc[b-0tusu2pb29] { position: static; }
    .gs-doc[b-0tusu2pb29] { padding: 0.25rem 1rem 1rem; }
    .gs-head[b-0tusu2pb29] { padding: 1.1rem 1rem; }
}
/* /Pages/Help/HelpDocPage.razor.rz.scp.css */
/* HelpDocPage - the full guide of one area, inside the application shell.
   Shell tokens only, so it follows the theme the user has set. */

.hd-page[b-k3l6glr2c7] {
    height: 100%;
    overflow-y: auto;
    padding: 1.25rem 1.25rem 2.5rem;
    color: var(--shell-text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.hd-head[b-k3l6glr2c7],
.hd-body[b-k3l6glr2c7] { width: min(1180px, 100%); }

.hd-head[b-k3l6glr2c7] {
    background: var(--shell-panel-background);
    border: 1px solid var(--shell-border);
    border-radius: 12px;
    padding: 1.1rem 1.5rem 1rem;
}
.hd-head__eyebrow[b-k3l6glr2c7] { margin: 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }
.hd-head__title[b-k3l6glr2c7] { margin: 0.2rem 0 0.25rem; font-size: 1.5rem; line-height: 1.2; text-wrap: balance; }
.hd-head__lead[b-k3l6glr2c7] { margin: 0; max-width: 75ch; font-size: 0.95rem; opacity: 0.85; }
.hd-head__actions[b-k3l6glr2c7] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.85rem; }

.hd-btn[b-k3l6glr2c7] {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.45rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}
.hd-btn:focus-visible[b-k3l6glr2c7] { outline: 2px solid var(--shell-accent, #2563eb); outline-offset: 2px; }
.hd-btn:disabled[b-k3l6glr2c7] { opacity: 0.5; cursor: default; }
.hd-btn--primary[b-k3l6glr2c7] {
    background: var(--shell-button-primary, var(--shell-accent, #2563eb));
    border-color: transparent;
    color: var(--shell-button-primary-text, #fff);
}

.hd-search[b-k3l6glr2c7] {
    flex: 1 1 220px;
    max-width: 340px;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.45rem;
    background: var(--shell-input-background, var(--shell-panel-background));
    color: var(--shell-text-primary);
    font: inherit;
    font-size: 0.9rem;
}
.hd-search:focus-visible[b-k3l6glr2c7] { outline: 2px solid var(--shell-accent, #2563eb); outline-offset: 1px; }

.hd-body[b-k3l6glr2c7] {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.hd-toc[b-k3l6glr2c7] {
    position: sticky;
    top: 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--shell-border);
    border-radius: 12px;
    background: var(--shell-panel-background);
    font-size: 0.88rem;
}
.hd-toc__label[b-k3l6glr2c7] { margin: 0 0 0.45rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }
.hd-toc ol[b-k3l6glr2c7] { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.3rem; }
.hd-toc a[b-k3l6glr2c7] { color: inherit; text-decoration: none; }
.hd-toc a:hover[b-k3l6glr2c7] { text-decoration: underline; }

.hd-doc[b-k3l6glr2c7] {
    min-width: 0;
    padding: 0.25rem 1.5rem 1.25rem;
    border: 1px solid var(--shell-border);
    border-radius: 12px;
    background: var(--shell-panel-background);
    line-height: 1.55;
    font-size: 0.93rem;
}

.hd-section[b-k3l6glr2c7] { padding-top: 1rem; scroll-margin-top: 0.75rem; }
.hd-section + .hd-section[b-k3l6glr2c7] { border-top: 1px solid var(--shell-border); margin-top: 0.9rem; }
.hd-section h2[b-k3l6glr2c7] { margin: 0 0 0.55rem; font-size: 1.12rem; text-wrap: balance; }
.hd-section p[b-k3l6glr2c7],
.hd-section ul[b-k3l6glr2c7],
.hd-section ol[b-k3l6glr2c7] { max-width: 80ch; margin: 0 0 0.7rem; }
.hd-section ul[b-k3l6glr2c7],
.hd-section ol[b-k3l6glr2c7] { padding-left: 1.35rem; display: flex; flex-direction: column; gap: 0.35rem; }
.hd-steps li[b-k3l6glr2c7]::marker { font-weight: 700; }

.hd-tip[b-k3l6glr2c7] {
    padding: 0.55rem 0.8rem;
    border-radius: 0.5rem;
    border: 1px solid var(--shell-status-info-border, #1976d2);
    border-left-width: 4px;
    background: var(--shell-status-info-bg, #e3f2fd);
    color: var(--shell-status-info-text, inherit);
}

.hd-tablewrap[b-k3l6glr2c7] { overflow-x: auto; max-width: 100%; margin: 0 0 0.85rem; }
.hd-keys[b-k3l6glr2c7],
.hd-table[b-k3l6glr2c7] { border-collapse: collapse; font-size: 0.88rem; width: 100%; }
.hd-keys[b-k3l6glr2c7] { width: auto; margin: 0 0 0.85rem; }
.hd-keys th[b-k3l6glr2c7],
.hd-keys td[b-k3l6glr2c7],
.hd-table th[b-k3l6glr2c7],
.hd-table td[b-k3l6glr2c7] { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--shell-border); text-align: left; vertical-align: top; }
.hd-keys th[b-k3l6glr2c7] { white-space: nowrap; width: 1%; }
.hd-table thead th[b-k3l6glr2c7] { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; }

kbd[b-k3l6glr2c7] {
    display: inline-block;
    min-width: 2rem;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--shell-border);
    border-bottom-width: 2px;
    border-radius: 0.35rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    /* The base theme styles <kbd> white on dark: set both from the shell tokens. */
    color: var(--shell-text-primary) !important;
    background: var(--shell-surface-background, #f1f5fa) !important;
    box-shadow: none;
}

.hd-muted[b-k3l6glr2c7] { opacity: 0.75; font-size: 0.9rem; }
.hd-updated[b-k3l6glr2c7] { margin-top: 1rem; }

@media (max-width: 860px) {
    .hd-body[b-k3l6glr2c7] { grid-template-columns: minmax(0, 1fr); }
    .hd-toc[b-k3l6glr2c7] { position: static; }
    .hd-doc[b-k3l6glr2c7] { padding: 0.25rem 1rem 1rem; }
}
/* /Pages/Manufacturing/BomPage.razor.rz.scp.css */
/* Bill of Materials — body layout + dockable Help / User Guide panel.
   Mirrors the Custom Table / Product Master help pattern. */

.ct-page__body[b-753ks7a5oy] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.ct-page__main[b-753ks7a5oy] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Help / User Guide panel (dockable) ── */
.ct-page__help[b-753ks7a5oy] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    align-self: stretch;
    max-height: 100%;
    overflow: auto;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-753ks7a5oy] {
    flex: 0 0 64px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-753ks7a5oy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    min-height: 100%;
}
.ct-page__help-dock-label[b-753ks7a5oy] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}
.ct-page__help-toggle[b-753ks7a5oy] { min-width: 0; }
.ct-page__help--docked .ct-page__help-toggle[b-753ks7a5oy] { width: 100%; }

.ct-page__panel-head[b-753ks7a5oy] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-753ks7a5oy] {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}
.ct-page__help-intro[b-753ks7a5oy] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}
.ct-page__help-accordion[b-753ks7a5oy] { width: 100%; }
.ct-page__help-content[b-753ks7a5oy] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    color: var(--shell-text-primary);
    line-height: 1.6;
}
.ct-page__help-content p[b-753ks7a5oy] { margin: 0; }
.ct-page__help-list[b-753ks7a5oy] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.6rem;
}
.ct-page__help-list li[b-753ks7a5oy] { padding-left: 0.15rem; }
.ct-page__help-content code[b-753ks7a5oy] {
    font-size: 0.85em;
    padding: 0.05rem 0.3rem;
    border-radius: 0.25rem;
    background: rgba(128, 128, 128, 0.16);
}
[b-753ks7a5oy] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .ct-page__body[b-753ks7a5oy] { flex-direction: column; }
    .ct-page__help[b-753ks7a5oy],
    .ct-page__help--docked[b-753ks7a5oy] { flex: 0 0 auto; width: 100%; overflow: visible; }
    .ct-page__help-dock[b-753ks7a5oy] { flex-direction: row; }
    .ct-page__help-dock-label[b-753ks7a5oy] { writing-mode: horizontal-tb; transform: none; }
}
/* Grid header wrapping is now a global convention in wwwroot/css/app.css
   (.e-grid .e-headercell …) so every grid wraps long captions — no per-page rule. */
/* /Pages/Masters/Accounts/ChequeBookMaster.razor.rz.scp.css */
/* Cheque Books master — layout mirrors the other master shells. */

.ch-master__body[b-suckcpo2cr],
.ch-master[b-suckcpo2cr]  .ch-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.ch-master__form[b-suckcpo2cr],
.ch-master[b-suckcpo2cr]  .ch-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

.ch-master__detail[b-suckcpo2cr] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ch-grid[b-suckcpo2cr] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ch-grid__row[b-suckcpo2cr] {
    display: grid;
    gap: 0.75rem;
}

.ch-grid__row--two[b-suckcpo2cr] {
    grid-template-columns: 2fr 1fr;
}

.ch-grid__row--three[b-suckcpo2cr] {
    grid-template-columns: 1fr 1fr 1fr;
}

.ch-description[b-suckcpo2cr]  textarea {
    min-height: 3.5rem;
}

.ch-embedded-toolbar[b-suckcpo2cr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* Read-only leaves grid under the form (leaves are DB-created). */
.ch-leaves[b-suckcpo2cr] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ch-leaves__caption[b-suckcpo2cr] {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.85;
}

/* Caption + Print button row above the read-only leaf grid. */
.ch-leaves__bar[b-suckcpo2cr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Help panel — fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-suckcpo2cr] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-suckcpo2cr] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-suckcpo2cr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-suckcpo2cr] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-suckcpo2cr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-suckcpo2cr] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-suckcpo2cr] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-suckcpo2cr] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-suckcpo2cr] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-suckcpo2cr] { padding-left: 0.15rem; }

[b-suckcpo2cr] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .ct-page__help[b-suckcpo2cr],
    .ct-page__help--docked[b-suckcpo2cr] { flex: 0 0 auto; width: 100%; overflow: visible; }
}

@media (max-width: 900px) {
    .ch-master__body[b-suckcpo2cr],
    .ch-master[b-suckcpo2cr]  .ch-embedded-body { flex-wrap: wrap; }
    .ch-grid__row--two[b-suckcpo2cr],
    .ch-grid__row--three[b-suckcpo2cr] { grid-template-columns: 1fr; }
}
/* /Pages/Masters/Accounts/CostCentreGroupMaster.razor.rz.scp.css */
/* Cost-Centre Group master — layout mirrors the other master shells. */

.cg-master__body[b-ji15qy43zs],
.cg-master[b-ji15qy43zs]  .cg-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.cg-master__form[b-ji15qy43zs],
.cg-master[b-ji15qy43zs]  .cg-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

.cg-master__detail[b-ji15qy43zs] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cg-grid2[b-ji15qy43zs] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}

.cg-embedded-toolbar[b-ji15qy43zs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* Help panel — fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-ji15qy43zs] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-ji15qy43zs] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-ji15qy43zs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-ji15qy43zs] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-ji15qy43zs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-ji15qy43zs] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-ji15qy43zs] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-ji15qy43zs] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-ji15qy43zs] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-ji15qy43zs] { padding-left: 0.15rem; }

[b-ji15qy43zs] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .ct-page__help[b-ji15qy43zs],
    .ct-page__help--docked[b-ji15qy43zs] { flex: 0 0 auto; width: 100%; overflow: visible; }
}

@media (max-width: 720px) {
    .cg-grid2[b-ji15qy43zs] { grid-template-columns: minmax(0, 1fr); }
    .cg-master__body[b-ji15qy43zs],
    .cg-master[b-ji15qy43zs]  .cg-embedded-body { flex-wrap: wrap; }
}
/* /Pages/Masters/Accounts/CostCentreMaster.razor.rz.scp.css */
/* Cost-Centre master — layout mirrors the other master shells. */

.cc-master__body[b-8ethxgrxtl],
.cc-master[b-8ethxgrxtl]  .cc-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.cc-master__form[b-8ethxgrxtl],
.cc-master[b-8ethxgrxtl]  .cc-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

.cc-master__detail[b-8ethxgrxtl] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cc-grid2[b-8ethxgrxtl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}

/* Opening Balance + Balance Type side by side inside one grid cell. */
.cc-grid2__pair[b-8ethxgrxtl] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 0.75rem 1rem;
    align-items: end;
}

/* Running dr/cr totals — read-only info shown in View mode only. */
.cc-master__totals[b-8ethxgrxtl] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cc-master__total-card[b-8ethxgrxtl] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.5rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    min-width: 150px;
}

.cc-master__total-card span[b-8ethxgrxtl] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}

.cc-master__total-card strong[b-8ethxgrxtl] {
    font-size: 1rem;
    text-align: right;         /* numeric — right-aligned (convention) */
    font-variant-numeric: tabular-nums;
}

.cc-embedded-toolbar[b-8ethxgrxtl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* Help panel — fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-8ethxgrxtl] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-8ethxgrxtl] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-8ethxgrxtl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-8ethxgrxtl] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-8ethxgrxtl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-8ethxgrxtl] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-8ethxgrxtl] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-8ethxgrxtl] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-8ethxgrxtl] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-8ethxgrxtl] { padding-left: 0.15rem; }

[b-8ethxgrxtl] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .ct-page__help[b-8ethxgrxtl],
    .ct-page__help--docked[b-8ethxgrxtl] { flex: 0 0 auto; width: 100%; overflow: visible; }
}

@media (max-width: 720px) {
    .cc-grid2[b-8ethxgrxtl] { grid-template-columns: minmax(0, 1fr); }
    .cc-grid2__pair[b-8ethxgrxtl] { grid-template-columns: minmax(0, 1fr); }
    .cc-master__body[b-8ethxgrxtl],
    .cc-master[b-8ethxgrxtl]  .cc-embedded-body { flex-wrap: wrap; }
}
/* /Pages/Masters/Accounts/LedgerAccountMaster.razor.rz.scp.css */
/* Two-pane body: form (left, scrolls) + dockable Help panel (right, scrolls). */
.la-master__body[b-7byqtaoql8] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.la-master__form[b-7byqtaoql8] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    max-height: 100%;
    padding: 0.75rem 1rem 1.25rem;
}
/* Section headings inside the editor get clear separation. */
.la-master__form[b-7byqtaoql8]  .prod-master__subhead,
.la-master__detail[b-7byqtaoql8]  .prod-master__subhead {
    margin: 0.75rem 0 0.25rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--shell-border, #e0e0e0);
    font-size: 0.92rem;
    font-weight: 600;
}
/* Field grid: strict two columns (legacy General tab layout). */
.la-master[b-7byqtaoql8]  .la-grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.25rem;
    align-items: center;
}
.la-master[b-7byqtaoql8]  .la-grid2--full { grid-column: 1 / -1; }
/* Name + Inactive share one grid cell: textbox grows, switch hugs the right. */
.la-master[b-7byqtaoql8]  .la-name-cell {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}
.la-master[b-7byqtaoql8]  .la-name-cell > .e-input-group,
.la-master[b-7byqtaoql8]  .la-name-cell > .e-float-input,
.la-master[b-7byqtaoql8]  .la-name-cell > .e-control-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}
.la-master[b-7byqtaoql8]  .la-name-cell .prod-master__switch { flex: 0 0 auto; white-space: nowrap; width: auto; justify-content: flex-start; }
@media (max-width: 700px) {
    .la-master[b-7byqtaoql8]  .la-grid2 { grid-template-columns: minmax(0, 1fr); }
}
/* Label left, switch flush to the column's right edge — every switch toggle
   lines up vertically within its grid column. */
.la-master[b-7byqtaoql8]  .prod-master__switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
}
.la-master[b-7byqtaoql8]  .prod-master__switch label { font-weight: 600; font-size: 0.85rem; }

/* Side Actions pane (ProductMaster pattern). */
.la-master__action-pane[b-7byqtaoql8] {
    flex: 0 0 230px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    align-self: flex-start;
    max-height: 100%;
}
.la-master__action-pane-title[b-7byqtaoql8] {
    margin: 0 0 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}
.la-master[b-7byqtaoql8]  .la-master__action-btn { width: 100%; }
.lc-hint[b-7byqtaoql8] { font-size: 0.78rem; opacity: 0.75; }

/* Embedded "create ledger" dialog: actions strip above the form, dockable
   Help panel on the right (mirrors EmployeeMaster's embedded layout). */
.la-master[b-7byqtaoql8]  .la-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
.la-master[b-7byqtaoql8]  .la-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}
.la-master[b-7byqtaoql8]  .la-embedded-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Help panel (mirrors the Custom Table / Ledger Group help panel). */
.ct-page__help[b-7byqtaoql8] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-7byqtaoql8] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-7byqtaoql8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-7byqtaoql8] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-7byqtaoql8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-7byqtaoql8] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-7byqtaoql8] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-7byqtaoql8] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-7byqtaoql8] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-7byqtaoql8] { padding-left: 0.15rem; }

[b-7byqtaoql8] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .la-master__body[b-7byqtaoql8] { flex-direction: column; }
    .la-master__action-pane[b-7byqtaoql8] { flex: 0 0 auto; }
    .ct-page__help[b-7byqtaoql8],
    .ct-page__help--docked[b-7byqtaoql8] { flex: 0 0 auto; width: 100%; overflow: visible; }
}
/* /Pages/Masters/Accounts/LedgerGroupMaster.razor.rz.scp.css */
/* Two-pane body: form (left, scrolls) + dockable Help panel (right, scrolls). */
.lg-master__body[b-dlonzpnyaa] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.lg-master__form[b-dlonzpnyaa] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    max-height: 100%;
    padding: 0.75rem 1rem 1.25rem;
}
/* Section headings inside the editor get clear separation. */
.lg-master__form[b-dlonzpnyaa]  .prod-master__subhead,
.lg-master__detail[b-dlonzpnyaa]  .prod-master__subhead {
    margin: 0.75rem 0 0.25rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--shell-border, #e0e0e0);
    font-size: 0.92rem;
    font-weight: 600;
}
/* Field grid: comfortable auto-fit columns. */
.lg-master[b-dlonzpnyaa]  .prod-master__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.85rem 1rem;
}
.lg-master[b-dlonzpnyaa]  .prod-master__input--wide { grid-column: 1 / -1; }
.lg-master[b-dlonzpnyaa]  .prod-master__switch {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.lg-master[b-dlonzpnyaa]  .prod-master__switch label { font-weight: 600; font-size: 0.85rem; }

/* Help panel (mirrors the Custom Table / Warehouse help panel). */
.ct-page__help[b-dlonzpnyaa] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-dlonzpnyaa] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-dlonzpnyaa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-dlonzpnyaa] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-dlonzpnyaa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-dlonzpnyaa] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-dlonzpnyaa] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-dlonzpnyaa] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-dlonzpnyaa] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-dlonzpnyaa] { padding-left: 0.15rem; }

[b-dlonzpnyaa] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

/* Embedded mode: form left, dockable Help panel right. */
.lg-master[b-dlonzpnyaa]  .lg-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
.lg-master[b-dlonzpnyaa]  .lg-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 900px) {
    .lg-master__body[b-dlonzpnyaa] { flex-direction: column; }
    .ct-page__help[b-dlonzpnyaa],
    .ct-page__help--docked[b-dlonzpnyaa] { flex: 0 0 auto; width: 100%; overflow: visible; }
}
/* /Pages/Masters/Accounts/ProfitCentreMaster.razor.rz.scp.css */
/* Profit-Centre master — layout mirrors the other master shells. */

.pc-master__body[b-o59r8jx485],
.pc-master[b-o59r8jx485]  .pc-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.pc-master__form[b-o59r8jx485],
.pc-master[b-o59r8jx485]  .pc-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

.pc-master__detail[b-o59r8jx485] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pc-grid2[b-o59r8jx485] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}

/* Description spans the full row (legacy multiline box). */
.pc-grid2[b-o59r8jx485]  .pc-description {
    grid-column: 1 / -1;
}

.pc-embedded-toolbar[b-o59r8jx485] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* Help panel — fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-o59r8jx485] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-o59r8jx485] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-o59r8jx485] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-o59r8jx485] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-o59r8jx485] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-o59r8jx485] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-o59r8jx485] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-o59r8jx485] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-o59r8jx485] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-o59r8jx485] { padding-left: 0.15rem; }

[b-o59r8jx485] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .ct-page__help[b-o59r8jx485],
    .ct-page__help--docked[b-o59r8jx485] { flex: 0 0 auto; width: 100%; overflow: visible; }
}

@media (max-width: 720px) {
    .pc-grid2[b-o59r8jx485] { grid-template-columns: minmax(0, 1fr); }
    .pc-master__body[b-o59r8jx485],
    .pc-master[b-o59r8jx485]  .pc-embedded-body { flex-wrap: wrap; }
}
/* /Pages/Masters/Accounts/StdNarrationMaster.razor.rz.scp.css */
/* Standard Narrations master — layout mirrors the other master shells. */

.sn-master__body[b-qzjraoqy2a],
.sn-master[b-qzjraoqy2a]  .sn-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.sn-master__form[b-qzjraoqy2a],
.sn-master[b-qzjraoqy2a]  .sn-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

.sn-master__detail[b-qzjraoqy2a] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sn-grid[b-qzjraoqy2a] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sn-narration[b-qzjraoqy2a]  textarea {
    min-height: 5rem;
}

.sn-embedded-toolbar[b-qzjraoqy2a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* Help panel — fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-qzjraoqy2a] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-qzjraoqy2a] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-qzjraoqy2a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-qzjraoqy2a] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-qzjraoqy2a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-qzjraoqy2a] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-qzjraoqy2a] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-qzjraoqy2a] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-qzjraoqy2a] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-qzjraoqy2a] { padding-left: 0.15rem; }

[b-qzjraoqy2a] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .ct-page__help[b-qzjraoqy2a],
    .ct-page__help--docked[b-qzjraoqy2a] { flex: 0 0 auto; width: 100%; overflow: visible; }
}

@media (max-width: 900px) {
    .sn-master__body[b-qzjraoqy2a],
    .sn-master[b-qzjraoqy2a]  .sn-embedded-body { flex-wrap: wrap; }
}
/* /Pages/Masters/CustomerCard/CustomerCardMaster.razor.rz.scp.css */
/* Customer Card master (legacy frmCustomreCardInfo / frmCustomreCard_Renewal). */
.cc-master__body[b-1qsrofcp0g] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.cc-master__form[b-1qsrofcp0g] {
    flex: 1 1 auto;
    min-width: 0;
}

.cc-master__detail[b-1qsrofcp0g] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Two-column field grid (user directive 2026-07-26 — three across was too
   wide to scan). Wide items (Address etc.) take the full row. */
.cc-grid[b-1qsrofcp0g] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1.25rem;
    align-items: end;
}

.cc-grid__wide[b-1qsrofcp0g] {
    grid-column: 1 / -1;
    min-width: 0;
}

.cc-switch[b-1qsrofcp0g] {
    padding-bottom: 0.35rem;
}

/* Effective-validity card: issued expiry stays put, renewals extend it. */
.cc-validto[b-1qsrofcp0g] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 0.35rem;
    font-size: 0.78rem;
    color: #5a6472;
}

.cc-validto strong[b-1qsrofcp0g] {
    font-size: 0.95rem;
    color: #1c2b3a;
}

.cc-validto em[b-1qsrofcp0g] {
    font-style: normal;
    font-size: 0.72rem;
    color: #8a93a0;
}

.cc-renewals[b-1qsrofcp0g] {
    margin-top: 0.5rem;
}

.cc-renewals__head[b-1qsrofcp0g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.cc-renewform[b-1qsrofcp0g] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.cc-embedded-toolbar[b-1qsrofcp0g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

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

    .cc-grid__wide[b-1qsrofcp0g] {
        grid-column: span 1;
    }

    .cc-master__body[b-1qsrofcp0g] {
        flex-direction: column;
    }
}
/* /Pages/Masters/CustomerCard/CustomerCardRenewalPage.razor.rz.scp.css */
/* Standalone card renewal page (legacy frmCustomreCard_Renewal). */
.ccr-page__body[b-7gmch2c59z] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.ccr-page__form[b-7gmch2c59z] {
    flex: 1 1 auto;
    min-width: 0;
}

.ccr-detail[b-7gmch2c59z] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Two-column field grid (same directive as the card master). Wide items
   (the card picker) take the full row. */
.ccr-grid[b-7gmch2c59z] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1.25rem;
    align-items: end;
}

.ccr-grid__wide[b-7gmch2c59z] {
    grid-column: 1 / -1;
    min-width: 0;
}

.ccr-renew[b-7gmch2c59z] {
    border: 1px solid #dbe2ee;
    border-radius: 6px;
    padding: 0.6rem 0.9rem 0.9rem;
    background: #fbfcfe;
}

.ccr-history[b-7gmch2c59z] {
    margin-top: 0.4rem;
}

/* Valid-To chip turns red once the card has lapsed. */
.ccr-expired[b-7gmch2c59z] {
    color: #c62828;
}

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

    .ccr-grid__wide[b-7gmch2c59z] {
        grid-column: span 1;
    }

    .ccr-page__body[b-7gmch2c59z] {
        flex-direction: column;
    }
}
/* /Pages/Masters/CustomerCard/CustomerPointProfileMaster.razor.rz.scp.css */
/* Loyalty point profile master (legacy frmCustomerPointProfile). */
.pp-master__body[b-qqpab07tvh] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.pp-master__form[b-qqpab07tvh] {
    flex: 1 1 auto;
    min-width: 0;
}

.pp-master__detail[b-qqpab07tvh] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pp-grid[b-qqpab07tvh] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem 1.25rem;
    align-items: end;
}

.pp-grid__wide[b-qqpab07tvh] {
    grid-column: span 2;
    min-width: 0;
}

.pp-switch[b-qqpab07tvh] {
    padding-bottom: 0.35rem;
}

.pp-slabs[b-qqpab07tvh] {
    margin-top: 0.4rem;
}

.pp-slabs__head[b-qqpab07tvh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Native cell editors: the model updates as the operator types, so F5 (which
   never blurs) still saves the cell being edited. */
.pp-cell[b-qqpab07tvh] {
    width: 100%;
    height: 28px;
    padding: 0.15rem 0.4rem;
    font: inherit;
    font-size: 0.84rem;
    color: #1c2b3a;
    background: #fff;
    border: 1px solid #cfd6de;
    border-radius: 4px;
}

/* Numeric convention: right-aligned. */
.pp-cell--num[b-qqpab07tvh] {
    text-align: right;
}

.pp-cell:focus[b-qqpab07tvh] {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 1px #4f46e5;
}

.pp-cell:disabled[b-qqpab07tvh] {
    background: #f2f4f7;
    color: #98a1ad;
}

.pp-embedded-toolbar[b-qqpab07tvh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

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

    .pp-grid__wide[b-qqpab07tvh] {
        grid-column: span 1;
    }

    .pp-master__body[b-qqpab07tvh] {
        flex-direction: column;
    }
}
/* /Pages/Masters/CustomerCard/CustomerPointTransactionPage.razor.rz.scp.css */
/* Manual loyalty-point voucher page (legacy frmCustomerPointTransactions). */
.cpt-page__body[b-fwe5h28iuf] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.cpt-page__form[b-fwe5h28iuf] {
    flex: 1 1 auto;
    min-width: 0;
}

.cpt-detail[b-fwe5h28iuf] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Two-column field grid (same directive as the card master). Wide items
   (card picker, description) take the full row. */
.cpt-grid[b-fwe5h28iuf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1.25rem;
    align-items: end;
}

.cpt-grid__wide[b-fwe5h28iuf] {
    grid-column: 1 / -1;
    min-width: 0;
}

/* Balance panel — legacy "Points Available / Amount Available / Expired". */
.cpt-balance[b-fwe5h28iuf] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cpt-balance__card[b-fwe5h28iuf] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    background: #f4f6fb;
    border: 1px solid #dbe2ee;
    border-radius: 6px;
}

.cpt-balance__card span[b-fwe5h28iuf] {
    font-size: 0.78rem;
    color: #5b6a7d;
}

.cpt-balance__card strong[b-fwe5h28iuf] {
    font-size: 1rem;
    color: #1c2b3a;
    font-variant-numeric: tabular-nums;
}

/* Accounting panel shown for redemptions ('D'). */
.cpt-acc[b-fwe5h28iuf] {
    border: 1px solid #dbe2ee;
    border-radius: 6px;
    padding: 0.6rem 0.9rem 0.9rem;
    background: #fbfcfe;
}

/* Status chip — legacy lblStatus colours. */
.cpt-status--bad[b-fwe5h28iuf] {
    color: #c62828;
}

.cpt-status--good[b-fwe5h28iuf] {
    color: #1b5e20;
}

.cpt-status--hold[b-fwe5h28iuf] {
    color: #ad1457;
}

.cpt-status--open[b-fwe5h28iuf] {
    color: #1a54c7;
}

.cpt-status-form[b-fwe5h28iuf] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

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

    .cpt-grid__wide[b-fwe5h28iuf] {
        grid-column: span 1;
    }

    .cpt-page__body[b-fwe5h28iuf] {
        flex-direction: column;
    }
}
/* /Pages/Masters/Fixed Assets/FixedAssetCategoryMaster.razor.rz.scp.css */
/* Two-pane body: form (left, scrolls) + dockable Help panel (right, scrolls). */
.fa-cat__body[b-9hcq9080mh] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.fa-cat__form[b-9hcq9080mh] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    max-height: 100%;
}

/* Embedded mode: form left, dockable Help panel right. */
.fa-cat[b-9hcq9080mh]  .fa-cat-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
.fa-cat[b-9hcq9080mh]  .fa-cat-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* Help panel (mirrors the Custom Table / BOM help panel). */
.ct-page__help[b-9hcq9080mh] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-9hcq9080mh] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-9hcq9080mh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-9hcq9080mh] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-9hcq9080mh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-9hcq9080mh] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-9hcq9080mh] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-9hcq9080mh] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-9hcq9080mh] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-9hcq9080mh] { padding-left: 0.15rem; }

[b-9hcq9080mh] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .fa-cat__body[b-9hcq9080mh] { flex-direction: column; }
    .ct-page__help[b-9hcq9080mh],
    .ct-page__help--docked[b-9hcq9080mh] { flex: 0 0 auto; width: 100%; overflow: visible; }
}
/* /Pages/Masters/Fixed Assets/FixedAssetOpening.razor.rz.scp.css */
/* Two-pane body: asset form (left, scrolls) + dockable Help panel (right, scrolls). */
.fa-opening__body[b-m2hb4n5n08] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.fa-opening__form[b-m2hb4n5n08] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    max-height: 100%;
    /* Neat vertical rhythm + edge padding so the grid, section headings and the
       detail editor aren't flush against each other or the panel edge. */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.75rem 1rem 1.25rem;
}
/* Section headings inside the asset editor get clear separation. */
.fa-opening__form[b-m2hb4n5n08]  .prod-master__subhead {
    margin: 0.75rem 0 0.25rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--shell-border, #e0e0e0);
    font-size: 0.92rem;
}
/* Field grid inside each section: comfortable row/column gaps. */
.fa-opening__form[b-m2hb4n5n08]  .prod-master__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.85rem 1rem;
}
.fa-opening__form[b-m2hb4n5n08]  .prod-master__input--wide {
    grid-column: 1 / -1;
}
/* Detail editor block spacing. */
.fa-opening__detail[b-m2hb4n5n08] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Embedded mode: form left, dockable Help panel right. */
.fa-opening[b-m2hb4n5n08]  .fa-opening-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
.fa-opening[b-m2hb4n5n08]  .fa-opening-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* Help panel (mirrors the Custom Table / BOM / Category help panel). */
.ct-page__help[b-m2hb4n5n08] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-m2hb4n5n08] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-m2hb4n5n08] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-m2hb4n5n08] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-m2hb4n5n08] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-m2hb4n5n08] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-m2hb4n5n08] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-m2hb4n5n08] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-m2hb4n5n08] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-m2hb4n5n08] { padding-left: 0.15rem; }

[b-m2hb4n5n08] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .fa-opening__body[b-m2hb4n5n08] { flex-direction: column; }
    .ct-page__help[b-m2hb4n5n08],
    .ct-page__help--docked[b-m2hb4n5n08] { flex: 0 0 auto; width: 100%; overflow: visible; }
}
/* /Pages/Masters/Inventory/BatchMaster.razor.rz.scp.css */
.batch-master[b-6wyctfso6v] {
    position: relative;
    display: block;
}

.batch-master__shell[b-6wyctfso6v] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.batch-master__header[b-6wyctfso6v] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-hero-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-inverse);
}

.batch-master__eyebrow[b-6wyctfso6v],
.batch-master__panel-eyebrow[b-6wyctfso6v] {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
}

.batch-master__header h1[b-6wyctfso6v],
.batch-master__panel-head h2[b-6wyctfso6v] {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.1;
}

.batch-master__header p[b-6wyctfso6v] {
    margin: 0.55rem 0 0;
    max-width: 48rem;
    color: var(--shell-text-muted-inverse);
}

.batch-master__header-meta[b-6wyctfso6v] {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 0.75rem;
    width: min(100%, 260px);
}

.batch-master__meta-card[b-6wyctfso6v],
.batch-master__record-badge[b-6wyctfso6v] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--shell-text-inverse);
}

.batch-master__meta-card span[b-6wyctfso6v],
.batch-master__record-badge[b-6wyctfso6v] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.batch-master__meta-card strong[b-6wyctfso6v] {
    font-size: 1.1rem;
}

.batch-master__message[b-6wyctfso6v] {
    width: 100%;
}

.batch-master__toolbar[b-6wyctfso6v] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.batch-master__toolbar-button[b-6wyctfso6v] {
    min-width: 130px;
}

.batch-master__content[b-6wyctfso6v] {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.batch-master__content--help-docked[b-6wyctfso6v] {
    grid-template-columns: minmax(0, 1fr) 88px;
}

.batch-master__panel[b-6wyctfso6v] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-primary);
}

.batch-master__panel--summary[b-6wyctfso6v] {
    background: var(--shell-panel-background-soft);
}

.batch-master__panel--docked[b-6wyctfso6v] {
    padding: 0.9rem 0.55rem;
}

.batch-master__panel-head[b-6wyctfso6v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.batch-master__grid[b-6wyctfso6v] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.batch-master__input[b-6wyctfso6v] {
    width: 100%;
}

.batch-master__input--wide[b-6wyctfso6v] {
    grid-column: 1 / -1;
}

.batch-master__help-intro[b-6wyctfso6v] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}

.batch-master__help-accordion[b-6wyctfso6v] {
    width: 100%;
}

.batch-master__help-content[b-6wyctfso6v] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--shell-text-primary);
    line-height: 1.65;
}

.batch-master__help-content p[b-6wyctfso6v] {
    margin: 0;
}

.batch-master__help-list[b-6wyctfso6v] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.7rem;
    color: var(--shell-text-primary);
}

.batch-master__help-list li[b-6wyctfso6v] {
    padding-left: 0.15rem;
}

.batch-master__help-dock[b-6wyctfso6v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 100%;
}

.batch-master__help-dock-label[b-6wyctfso6v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.batch-master__help-toggle[b-6wyctfso6v] {
    min-width: 0;
}

.batch-master__panel--docked .batch-master__help-toggle[b-6wyctfso6v] {
    width: 100%;
}

.batch-master__busy-overlay[b-6wyctfso6v] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 1.5rem;
    background: rgba(10, 16, 28, 0.28);
    backdrop-filter: blur(4px);
    z-index: 6;
}

.batch-master__busy-indicator[b-6wyctfso6v] {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
}

.batch-master-dialog__content[b-6wyctfso6v] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.batch-master-dialog__muted[b-6wyctfso6v] {
    color: var(--shell-text-secondary);
}

.batch-master-dialog__search[b-6wyctfso6v] {
    width: 100%;
}

.batch-master-dialog__state[b-6wyctfso6v] {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 1rem;
    border: 1px dashed var(--shell-border-strong);
    border-radius: 1rem;
    color: var(--shell-text-secondary);
}

.batch-master-dialog__actions[b-6wyctfso6v] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

[b-6wyctfso6v] .batch-master__toolbar-button.e-btn {
    border-radius: 0.95rem;
}

[b-6wyctfso6v] .batch-master-dialog__grid {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--shell-border);
    background: var(--shell-panel-background-soft);
}

[b-6wyctfso6v] .batch-master__help-accordion .e-acrdn-item {
    border: 1px solid var(--shell-border);
    border-radius: 1rem;
    background: var(--shell-item-background-subtle);
    overflow: hidden;
}

[b-6wyctfso6v] .batch-master__help-accordion .e-acrdn-item + .e-acrdn-item {
    margin-top: 0.75rem;
}

[b-6wyctfso6v] .batch-master__help-accordion .e-acrdn-header {
    min-height: auto;
}

[b-6wyctfso6v] .batch-master__help-accordion .e-acrdn-header .e-acrdn-header-content {
    padding: 0.9rem 1rem;
    color: var(--shell-text-primary);
    font-weight: 700;
}

[b-6wyctfso6v] .batch-master__help-accordion .e-acrdn-content {
    padding: 0 1rem 1rem;
    color: var(--shell-text-primary);
    background: transparent;
}

[b-6wyctfso6v] .batch-master__help-accordion .e-toggle-icon {
    color: var(--shell-text-secondary);
}

[b-6wyctfso6v] .batch-master-dialog__grid .e-gridheader,
[b-6wyctfso6v] .batch-master-dialog__grid .e-headercontent,
[b-6wyctfso6v] .batch-master-dialog__grid .e-gridcontent,
[b-6wyctfso6v] .batch-master-dialog__grid .e-content,
[b-6wyctfso6v] .batch-master-dialog__grid .e-table {
    background: transparent;
}

[b-6wyctfso6v] .batch-master-dialog__grid .e-headercell,
[b-6wyctfso6v] .batch-master-dialog__grid .e-rowcell,
[b-6wyctfso6v] .batch-master-dialog__grid .e-row:hover .e-rowcell,
[b-6wyctfso6v] .batch-master-dialog__grid .e-selectionbackground .e-rowcell {
    color: var(--shell-text-primary);
}

[b-6wyctfso6v] .batch-master-dialog__grid .e-gridpager,
[b-6wyctfso6v] .batch-master-dialog__grid .e-gridpager .e-pagercontainer {
    background: transparent;
}

[b-6wyctfso6v] .danger-action.e-btn {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
}

[b-6wyctfso6v] .danger-action.e-btn:hover,
[b-6wyctfso6v] .danger-action.e-btn:focus {
    background: #d64238;
    border-color: #d64238;
    color: #fff;
}

[b-6wyctfso6v] .danger-action--disabled.e-btn,
[b-6wyctfso6v] .danger-action--disabled.e-btn.e-disabled,
[b-6wyctfso6v] .danger-action--disabled.e-btn:disabled,
[b-6wyctfso6v] .danger-action.e-btn.e-disabled,
[b-6wyctfso6v] .danger-action.e-btn:disabled {
    background: var(--shell-item-background-subtle) !important;
    border-color: var(--shell-border) !important;
    color: var(--shell-text-secondary) !important;
    opacity: 0.7;
    box-shadow: none;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .batch-master__content[b-6wyctfso6v],
    .batch-master__content--help-docked[b-6wyctfso6v] {
        grid-template-columns: 1fr;
    }

    .batch-master__panel--docked[b-6wyctfso6v] {
        min-height: auto;
    }

    .batch-master__help-dock[b-6wyctfso6v] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: auto;
    }

    .batch-master__help-dock-label[b-6wyctfso6v] {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

@media (max-width: 760px) {
    .batch-master__header[b-6wyctfso6v] {
        flex-direction: column;
    }

    .batch-master__header-meta[b-6wyctfso6v] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .batch-master__grid[b-6wyctfso6v] {
        grid-template-columns: 1fr;
    }

    .batch-master__input--wide[b-6wyctfso6v] {
        grid-column: auto;
    }

    .batch-master__toolbar[b-6wyctfso6v] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .batch-master__toolbar[b-6wyctfso6v] {
        grid-template-columns: 1fr;
    }

    .batch-master__header h1[b-6wyctfso6v],
    .batch-master__panel-head h2[b-6wyctfso6v] {
        font-size: 1.4rem;
    }
}
/* /Pages/Masters/Inventory/BranchSerialStockPage.razor.rz.scp.css */
/* Branch-wise serial stock — allocation grid page. */
.bss-page__body[b-jmxwoi61q7] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.bss-page__form[b-jmxwoi61q7] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Search sits in the toolbar and takes the leftover width. */
.bss-page__search[b-jmxwoi61q7] {
    flex: 1 1 240px;
    min-width: 200px;
    max-width: 420px;
}

/* Native numeric cell editor — so F5 saves the cell being typed. */
.bss-cell[b-jmxwoi61q7] {
    width: 100%;
    font: inherit;
    padding: 0.2rem 0.35rem;
    border: 1px solid #c7d2e8;
    border-radius: 3px;
    background: #fff;
}

.bss-cell--num[b-jmxwoi61q7] {
    text-align: right;
}

/* Footer aggregates. */
.bss-page__count[b-jmxwoi61q7] {
    font-weight: 600;
    white-space: nowrap;
}

/* Group caption without the field name. */
.bss-groupcap[b-jmxwoi61q7] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
}

.bss-groupcap__key[b-jmxwoi61q7] {
    font-weight: 600;
}

.bss-groupcap__count[b-jmxwoi61q7] {
    font-size: 0.78rem;
    opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════════════
   "Add serials by item" picker — items on the left, that item's serial
   numbers on the right, branch/qty set once for the whole batch.
   ════════════════════════════════════════════════════════════════════════ */
.bss-pick[b-jmxwoi61q7] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    min-height: 0;
}

.bss-pick__toolbar[b-jmxwoi61q7] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.bss-pick__field[b-jmxwoi61q7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bss-pick__field > span[b-jmxwoi61q7] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Two panes, each scrolling on its own so a long list never grows the dialog. */
.bss-pick__panes[b-jmxwoi61q7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    flex: 1;
    min-height: 0;
}

.bss-pick__pane[b-jmxwoi61q7] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 0;
    border: 1px solid #dde4f0;
    border-radius: 4px;
    padding: 0.6rem;
    background: #fbfcfe;
}

.bss-pick__pane-head[b-jmxwoi61q7] {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
}

.bss-pick__pane-sub[b-jmxwoi61q7] {
    font-weight: 400;
    opacity: 0.65;
}

.bss-pick__list[b-jmxwoi61q7] {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.bss-pick__item[b-jmxwoi61q7] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    font: inherit;
    padding: 0.3rem 0.4rem;
    border: 0;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
}

.bss-pick__item:hover[b-jmxwoi61q7] {
    background: #eef3fb;
}

.bss-pick__item--on[b-jmxwoi61q7] {
    background: #dbe7fb;
    font-weight: 600;
}

.bss-pick__item-name[b-jmxwoi61q7] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* How many serials the item has — right-aligned, like every other count. */
.bss-pick__item-count[b-jmxwoi61q7] {
    flex: none;
    font-variant-numeric: tabular-nums;
    opacity: 0.6;
}

.bss-pick__selectall[b-jmxwoi61q7] {
    display: flex;
    gap: 0.4rem;
}

.bss-pick__serial[b-jmxwoi61q7] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.22rem 0.3rem;
    border-radius: 3px;
    cursor: pointer;
}

.bss-pick__serial:hover[b-jmxwoi61q7] {
    background: #eef3fb;
}

/* Already in the grid for the chosen branch — visible, but not selectable. */
.bss-pick__serial--taken[b-jmxwoi61q7] {
    opacity: 0.55;
    cursor: not-allowed;
}

.bss-pick__tag[b-jmxwoi61q7] {
    font-size: 0.7rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: #f3e6cf;
    color: #7a5a12;
}

.bss-pick__actions[b-jmxwoi61q7] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}

.bss-pick__summary[b-jmxwoi61q7] {
    margin-right: auto;
    font-weight: 600;
}

/* Icon-only per-row remove button — square, sits inside the row without
   stretching it. Syncfusion pads a normal button for a text label; there is
   no label here, so that padding is taken back. */
[b-jmxwoi61q7] .bss-rowbtn {
    min-width: 0;
    padding: 0.15rem 0.35rem;
    line-height: 1;
}

[b-jmxwoi61q7] .bss-rowbtn .e-btn-icon {
    margin: 0;
    font-size: 0.95rem;
}

/* ════════════════════════════════════════════════════════════════════════
   Help / User Guide panel.
   Blazor scoped CSS is per component: these ct-page__* rules live in
   each page that uses the panel, because a copy in another page's
   .razor.css never matches this page's elements. Without them the aside
   renders with no width at all and vanishes beside the 100%-wide grid.
   ════════════════════════════════════════════════════════════════════ */
/* ── Help / User Guide panel (dockable) ── */
.ct-page__help[b-jmxwoi61q7] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    align-self: stretch;
    max-height: 100%;
    overflow: auto;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-jmxwoi61q7] {
    flex: 0 0 64px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-jmxwoi61q7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    min-height: 100%;
}
.ct-page__help-dock-label[b-jmxwoi61q7] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}
.ct-page__help-toggle[b-jmxwoi61q7] { min-width: 0; }
.ct-page__help--docked .ct-page__help-toggle[b-jmxwoi61q7] { width: 100%; }

.ct-page__panel-head[b-jmxwoi61q7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-jmxwoi61q7] {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}
.ct-page__help-intro[b-jmxwoi61q7] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}
.ct-page__help-accordion[b-jmxwoi61q7] { width: 100%; }
.ct-page__help-content[b-jmxwoi61q7] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    color: var(--shell-text-primary);
    line-height: 1.6;
}
.ct-page__help-content p[b-jmxwoi61q7] { margin: 0; }
.ct-page__help-list[b-jmxwoi61q7] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.6rem;
}
.ct-page__help-list li[b-jmxwoi61q7] { padding-left: 0.15rem; }
/* /Pages/Masters/Inventory/BrandMaster.razor.rz.scp.css */
.brand-master[b-62bayunmzw] {
    position: relative;
    display: block;
}

.brand-master__shell[b-62bayunmzw] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.brand-master__header[b-62bayunmzw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-hero-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-inverse);
}

.brand-master__eyebrow[b-62bayunmzw],
.brand-master__panel-eyebrow[b-62bayunmzw] {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
}

.brand-master__header h1[b-62bayunmzw],
.brand-master__panel-head h2[b-62bayunmzw] {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.1;
}

.brand-master__header p[b-62bayunmzw] {
    margin: 0.55rem 0 0;
    max-width: 48rem;
    color: var(--shell-text-muted-inverse);
}

.brand-master__header-meta[b-62bayunmzw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 0.75rem;
    width: min(100%, 260px);
}

.brand-master__meta-card[b-62bayunmzw],
.brand-master__record-badge[b-62bayunmzw] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--shell-text-inverse);
}

.brand-master__meta-card span[b-62bayunmzw],
.brand-master__record-badge[b-62bayunmzw] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.brand-master__meta-card strong[b-62bayunmzw] {
    font-size: 1.1rem;
}

.brand-master__message[b-62bayunmzw] {
    width: 100%;
}

.brand-master__toolbar[b-62bayunmzw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.brand-master__toolbar-button[b-62bayunmzw] {
    min-width: 130px;
}

.brand-master__content[b-62bayunmzw] {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.brand-master__content--help-docked[b-62bayunmzw] {
    grid-template-columns: minmax(0, 1fr) 88px;
}

.brand-master__panel[b-62bayunmzw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-primary);
}

.brand-master__panel--summary[b-62bayunmzw] {
    background: var(--shell-panel-background-soft);
}

.brand-master__panel--docked[b-62bayunmzw] {
    padding: 0.9rem 0.55rem;
}

.brand-master__panel-head[b-62bayunmzw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.brand-master__grid[b-62bayunmzw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.brand-master__input[b-62bayunmzw] {
    width: 100%;
}

.brand-master__input--wide[b-62bayunmzw] {
    grid-column: 1 / -1;
}

.brand-master__help-intro[b-62bayunmzw] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}

.brand-master__help-accordion[b-62bayunmzw] {
    width: 100%;
}

.brand-master__help-content[b-62bayunmzw] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--shell-text-primary);
    line-height: 1.65;
}

.brand-master__help-content p[b-62bayunmzw] {
    margin: 0;
}

.brand-master__help-list[b-62bayunmzw] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.7rem;
    color: var(--shell-text-primary);
}

.brand-master__help-list li[b-62bayunmzw] {
    padding-left: 0.15rem;
}

.brand-master__help-dock[b-62bayunmzw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 100%;
}

.brand-master__help-dock-label[b-62bayunmzw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.brand-master__help-toggle[b-62bayunmzw] {
    min-width: 0;
}

.brand-master__panel--docked .brand-master__help-toggle[b-62bayunmzw] {
    width: 100%;
}

.brand-master__busy-overlay[b-62bayunmzw] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 1.5rem;
    background: rgba(10, 16, 28, 0.28);
    backdrop-filter: blur(4px);
    z-index: 6;
}

.brand-master__busy-indicator[b-62bayunmzw] {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
}

.brand-master-dialog__content[b-62bayunmzw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.brand-master-dialog__muted[b-62bayunmzw] {
    color: var(--shell-text-secondary);
}

.brand-master-dialog__search[b-62bayunmzw] {
    width: 100%;
}

.brand-master-dialog__state[b-62bayunmzw] {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 1rem;
    border: 1px dashed var(--shell-border-strong);
    border-radius: 1rem;
    color: var(--shell-text-secondary);
}

.brand-master-dialog__actions[b-62bayunmzw] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

[b-62bayunmzw] .brand-master__toolbar-button.e-btn {
    border-radius: 0.95rem;
}

[b-62bayunmzw] .brand-master-dialog__grid {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--shell-border);
    background: var(--shell-panel-background-soft);
}

[b-62bayunmzw] .brand-master__help-accordion .e-acrdn-item {
    border: 1px solid var(--shell-border);
    border-radius: 1rem;
    background: var(--shell-item-background-subtle);
    overflow: hidden;
}

[b-62bayunmzw] .brand-master__help-accordion .e-acrdn-item + .e-acrdn-item {
    margin-top: 0.75rem;
}

[b-62bayunmzw] .brand-master__help-accordion .e-acrdn-header {
    min-height: auto;
}

[b-62bayunmzw] .brand-master__help-accordion .e-acrdn-header .e-acrdn-header-content {
    padding: 0.9rem 1rem;
    color: var(--shell-text-primary);
    font-weight: 700;
}

[b-62bayunmzw] .brand-master__help-accordion .e-acrdn-content {
    padding: 0 1rem 1rem;
    color: var(--shell-text-primary);
    background: transparent;
}

[b-62bayunmzw] .brand-master__help-accordion .e-toggle-icon {
    color: var(--shell-text-secondary);
}

[b-62bayunmzw] .brand-master-dialog__grid .e-gridheader,
[b-62bayunmzw] .brand-master-dialog__grid .e-headercontent,
[b-62bayunmzw] .brand-master-dialog__grid .e-gridcontent,
[b-62bayunmzw] .brand-master-dialog__grid .e-content,
[b-62bayunmzw] .brand-master-dialog__grid .e-table {
    background: transparent;
}

[b-62bayunmzw] .brand-master-dialog__grid .e-headercell,
[b-62bayunmzw] .brand-master-dialog__grid .e-rowcell,
[b-62bayunmzw] .brand-master-dialog__grid .e-row:hover .e-rowcell,
[b-62bayunmzw] .brand-master-dialog__grid .e-selectionbackground .e-rowcell {
    color: var(--shell-text-primary);
}

[b-62bayunmzw] .brand-master-dialog__grid .e-gridpager,
[b-62bayunmzw] .brand-master-dialog__grid .e-gridpager .e-pagercontainer {
    background: transparent;
}

[b-62bayunmzw] .danger-action.e-btn {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
}

[b-62bayunmzw] .danger-action.e-btn:hover,
[b-62bayunmzw] .danger-action.e-btn:focus {
    background: #d64238;
    border-color: #d64238;
    color: #fff;
}

[b-62bayunmzw] .danger-action--disabled.e-btn,
[b-62bayunmzw] .danger-action--disabled.e-btn.e-disabled,
[b-62bayunmzw] .danger-action--disabled.e-btn:disabled,
[b-62bayunmzw] .danger-action.e-btn.e-disabled,
[b-62bayunmzw] .danger-action.e-btn:disabled {
    background: var(--shell-item-background-subtle) !important;
    border-color: var(--shell-border) !important;
    color: var(--shell-text-secondary) !important;
    opacity: 0.7;
    box-shadow: none;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .brand-master__content[b-62bayunmzw],
    .brand-master__content--help-docked[b-62bayunmzw] {
        grid-template-columns: 1fr;
    }

    .brand-master__panel--docked[b-62bayunmzw] {
        min-height: auto;
    }

    .brand-master__help-dock[b-62bayunmzw] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: auto;
    }

    .brand-master__help-dock-label[b-62bayunmzw] {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

@media (max-width: 760px) {
    .brand-master__header[b-62bayunmzw] {
        flex-direction: column;
    }

    .brand-master__header-meta[b-62bayunmzw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .brand-master__grid[b-62bayunmzw] {
        grid-template-columns: 1fr;
    }

    .brand-master__input--wide[b-62bayunmzw] {
        grid-column: auto;
    }

    .brand-master__toolbar[b-62bayunmzw] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .brand-master__toolbar[b-62bayunmzw] {
        grid-template-columns: 1fr;
    }

    .brand-master__header h1[b-62bayunmzw],
    .brand-master__panel-head h2[b-62bayunmzw] {
        font-size: 1.4rem;
    }
}
/* /Pages/Masters/Inventory/HSNCodeMaster.razor.rz.scp.css */
.hsn-master[b-4t97z3644y] {
    position: relative;
    display: block;
}

.hsn-master__shell[b-4t97z3644y] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.hsn-master__header[b-4t97z3644y] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-hero-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-inverse);
}

.hsn-master__eyebrow[b-4t97z3644y],
.hsn-master__panel-eyebrow[b-4t97z3644y] {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
}

.hsn-master__header h1[b-4t97z3644y],
.hsn-master__panel-head h2[b-4t97z3644y] {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.1;
}

.hsn-master__header p[b-4t97z3644y] {
    margin: 0.55rem 0 0;
    max-width: 48rem;
    color: var(--shell-text-muted-inverse);
}

.hsn-master__header-meta[b-4t97z3644y] {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 0.75rem;
    width: min(100%, 260px);
}

.hsn-master__meta-card[b-4t97z3644y],
.hsn-master__record-badge[b-4t97z3644y] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--shell-text-inverse);
}

.hsn-master__meta-card span[b-4t97z3644y],
.hsn-master__record-badge[b-4t97z3644y] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hsn-master__meta-card strong[b-4t97z3644y] {
    font-size: 1.1rem;
}

.hsn-master__message[b-4t97z3644y] {
    width: 100%;
}

.hsn-master__toolbar[b-4t97z3644y] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.hsn-master__toolbar-button[b-4t97z3644y] {
    min-width: 130px;
}

.hsn-master__content[b-4t97z3644y] {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.hsn-master__content--help-docked[b-4t97z3644y] {
    grid-template-columns: minmax(0, 1fr) 88px;
}

.hsn-master__panel[b-4t97z3644y] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-primary);
}

.hsn-master__panel--summary[b-4t97z3644y] {
    background: var(--shell-panel-background-soft);
}

.hsn-master__panel--docked[b-4t97z3644y] {
    padding: 0.9rem 0.55rem;
}

.hsn-master__panel-head[b-4t97z3644y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.hsn-master__grid[b-4t97z3644y] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.hsn-master__input[b-4t97z3644y] {
    width: 100%;
}

.hsn-master__input--wide[b-4t97z3644y] {
    grid-column: 1 / -1;
}

.hsn-master__help-intro[b-4t97z3644y] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}

.hsn-master__help-accordion[b-4t97z3644y] {
    width: 100%;
}

.hsn-master__help-content[b-4t97z3644y] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--shell-text-primary);
    line-height: 1.65;
}

.hsn-master__help-content p[b-4t97z3644y] {
    margin: 0;
}

.hsn-master__help-list[b-4t97z3644y] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.7rem;
    color: var(--shell-text-primary);
}

.hsn-master__help-list li[b-4t97z3644y] {
    padding-left: 0.15rem;
}

.hsn-master__help-dock[b-4t97z3644y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 100%;
}

.hsn-master__help-dock-label[b-4t97z3644y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.hsn-master__help-toggle[b-4t97z3644y] {
    min-width: 0;
}

.hsn-master__panel--docked .hsn-master__help-toggle[b-4t97z3644y] {
    width: 100%;
}

.hsn-master__busy-overlay[b-4t97z3644y] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 1.5rem;
    background: rgba(10, 16, 28, 0.28);
    backdrop-filter: blur(4px);
    z-index: 6;
}

.hsn-master__busy-indicator[b-4t97z3644y] {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
}

.hsn-master-dialog__content[b-4t97z3644y] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hsn-master-dialog__muted[b-4t97z3644y] {
    color: var(--shell-text-secondary);
}

.hsn-master-dialog__search[b-4t97z3644y] {
    width: 100%;
}

.hsn-master-dialog__state[b-4t97z3644y] {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 1rem;
    border: 1px dashed var(--shell-border-strong);
    border-radius: 1rem;
    color: var(--shell-text-secondary);
}

.hsn-master-dialog__actions[b-4t97z3644y] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

[b-4t97z3644y] .hsn-master__toolbar-button.e-btn {
    border-radius: 0.95rem;
}

[b-4t97z3644y] .hsn-master-dialog__grid {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--shell-border);
    background: var(--shell-panel-background-soft);
}

[b-4t97z3644y] .hsn-master__help-accordion .e-acrdn-item {
    border: 1px solid var(--shell-border);
    border-radius: 1rem;
    background: var(--shell-item-background-subtle);
    overflow: hidden;
}

[b-4t97z3644y] .hsn-master__help-accordion .e-acrdn-item + .e-acrdn-item {
    margin-top: 0.75rem;
}

[b-4t97z3644y] .hsn-master__help-accordion .e-acrdn-header {
    min-height: auto;
}

[b-4t97z3644y] .hsn-master__help-accordion .e-acrdn-header .e-acrdn-header-content {
    padding: 0.9rem 1rem;
    color: var(--shell-text-primary);
    font-weight: 700;
}

[b-4t97z3644y] .hsn-master__help-accordion .e-acrdn-content {
    padding: 0 1rem 1rem;
    color: var(--shell-text-primary);
    background: transparent;
}

[b-4t97z3644y] .hsn-master__help-accordion .e-toggle-icon {
    color: var(--shell-text-secondary);
}

[b-4t97z3644y] .hsn-master-dialog__grid .e-gridheader,
[b-4t97z3644y] .hsn-master-dialog__grid .e-headercontent,
[b-4t97z3644y] .hsn-master-dialog__grid .e-gridcontent,
[b-4t97z3644y] .hsn-master-dialog__grid .e-content,
[b-4t97z3644y] .hsn-master-dialog__grid .e-table {
    background: transparent;
}

[b-4t97z3644y] .hsn-master-dialog__grid .e-headercell,
[b-4t97z3644y] .hsn-master-dialog__grid .e-rowcell,
[b-4t97z3644y] .hsn-master-dialog__grid .e-row:hover .e-rowcell,
[b-4t97z3644y] .hsn-master-dialog__grid .e-selectionbackground .e-rowcell {
    color: var(--shell-text-primary);
}

[b-4t97z3644y] .hsn-master-dialog__grid .e-gridpager,
[b-4t97z3644y] .hsn-master-dialog__grid .e-gridpager .e-pagercontainer {
    background: transparent;
}

[b-4t97z3644y] .danger-action.e-btn {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
}

[b-4t97z3644y] .danger-action.e-btn:hover,
[b-4t97z3644y] .danger-action.e-btn:focus {
    background: #d64238;
    border-color: #d64238;
    color: #fff;
}

[b-4t97z3644y] .danger-action--disabled.e-btn,
[b-4t97z3644y] .danger-action--disabled.e-btn.e-disabled,
[b-4t97z3644y] .danger-action--disabled.e-btn:disabled,
[b-4t97z3644y] .danger-action.e-btn.e-disabled,
[b-4t97z3644y] .danger-action.e-btn:disabled {
    background: var(--shell-item-background-subtle) !important;
    border-color: var(--shell-border) !important;
    color: var(--shell-text-secondary) !important;
    opacity: 0.7;
    box-shadow: none;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .hsn-master__content[b-4t97z3644y],
    .hsn-master__content--help-docked[b-4t97z3644y] {
        grid-template-columns: 1fr;
    }

    .hsn-master__panel--docked[b-4t97z3644y] {
        min-height: auto;
    }

    .hsn-master__help-dock[b-4t97z3644y] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: auto;
    }

    .hsn-master__help-dock-label[b-4t97z3644y] {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

@media (max-width: 760px) {
    .hsn-master__header[b-4t97z3644y] {
        flex-direction: column;
    }

    .hsn-master__header-meta[b-4t97z3644y] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .hsn-master__grid[b-4t97z3644y] {
        grid-template-columns: 1fr;
    }

    .hsn-master__input--wide[b-4t97z3644y] {
        grid-column: auto;
    }

    .hsn-master__toolbar[b-4t97z3644y] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .hsn-master__toolbar[b-4t97z3644y] {
        grid-template-columns: 1fr;
    }

    .hsn-master__header h1[b-4t97z3644y],
    .hsn-master__panel-head h2[b-4t97z3644y] {
        font-size: 1.4rem;
    }
}
/* /Pages/Masters/Inventory/ItemCategoryMaster.razor.rz.scp.css */
.icat-master[b-qbe2bh3ae7] {
    position: relative;
    display: block;
}

.icat-master__shell[b-qbe2bh3ae7] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.icat-master__header[b-qbe2bh3ae7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-hero-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-inverse);
}

.icat-master__eyebrow[b-qbe2bh3ae7],
.icat-master__panel-eyebrow[b-qbe2bh3ae7] {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
}

.icat-master__header h1[b-qbe2bh3ae7],
.icat-master__panel-head h2[b-qbe2bh3ae7] {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.1;
}

.icat-master__header p[b-qbe2bh3ae7] {
    margin: 0.55rem 0 0;
    max-width: 48rem;
    color: var(--shell-text-muted-inverse);
}

.icat-master__header-meta[b-qbe2bh3ae7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 0.75rem;
    width: min(100%, 260px);
}

.icat-master__meta-card[b-qbe2bh3ae7],
.icat-master__record-badge[b-qbe2bh3ae7] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--shell-text-inverse);
}

.icat-master__meta-card span[b-qbe2bh3ae7],
.icat-master__record-badge[b-qbe2bh3ae7] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.icat-master__meta-card strong[b-qbe2bh3ae7] {
    font-size: 1.1rem;
}

.icat-master__message[b-qbe2bh3ae7] {
    width: 100%;
}

.icat-master__toolbar[b-qbe2bh3ae7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.icat-master__toolbar-button[b-qbe2bh3ae7] {
    min-width: 130px;
}

.icat-master__content[b-qbe2bh3ae7] {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.icat-master__content--help-docked[b-qbe2bh3ae7] {
    grid-template-columns: minmax(0, 1fr) 88px;
}

.icat-master__panel[b-qbe2bh3ae7] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-primary);
}

.icat-master__panel--summary[b-qbe2bh3ae7] {
    background: var(--shell-panel-background-soft);
}

.icat-master__panel--docked[b-qbe2bh3ae7] {
    padding: 0.9rem 0.55rem;
}

.icat-master__panel-head[b-qbe2bh3ae7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.icat-master__grid[b-qbe2bh3ae7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.icat-master__input[b-qbe2bh3ae7] {
    width: 100%;
}

.icat-master__input--wide[b-qbe2bh3ae7] {
    grid-column: 1 / -1;
}

/* Parent Item Group field: combobox + inline create (+) button. */
.icat-master__group-field[b-qbe2bh3ae7] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.icat-master__group-combo[b-qbe2bh3ae7] {
    flex: 1 1 auto;
    min-width: 0;
}

[b-qbe2bh3ae7] .icat-master__group-add.e-btn {
    flex: 0 0 auto;
    min-width: 38px;
    height: 38px;
    border-radius: 0.75rem;
    padding: 0;
}

.icat-master__help-intro[b-qbe2bh3ae7] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}

.icat-master__help-accordion[b-qbe2bh3ae7] {
    width: 100%;
}

.icat-master__help-content[b-qbe2bh3ae7] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--shell-text-primary);
    line-height: 1.65;
}

.icat-master__help-content p[b-qbe2bh3ae7] {
    margin: 0;
}

.icat-master__help-list[b-qbe2bh3ae7] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.7rem;
    color: var(--shell-text-primary);
}

.icat-master__help-list li[b-qbe2bh3ae7] {
    padding-left: 0.15rem;
}

.icat-master__help-dock[b-qbe2bh3ae7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 100%;
}

.icat-master__help-dock-label[b-qbe2bh3ae7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.icat-master__help-toggle[b-qbe2bh3ae7] {
    min-width: 0;
}

.icat-master__panel--docked .icat-master__help-toggle[b-qbe2bh3ae7] {
    width: 100%;
}

.icat-master__busy-overlay[b-qbe2bh3ae7] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 1.5rem;
    background: rgba(10, 16, 28, 0.28);
    backdrop-filter: blur(4px);
    z-index: 6;
}

.icat-master__busy-indicator[b-qbe2bh3ae7] {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
}

.icat-master-dialog__content[b-qbe2bh3ae7] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.icat-master-dialog__muted[b-qbe2bh3ae7] {
    color: var(--shell-text-secondary);
}

.icat-master-dialog__search[b-qbe2bh3ae7] {
    width: 100%;
}

.icat-master-dialog__state[b-qbe2bh3ae7] {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 1rem;
    border: 1px dashed var(--shell-border-strong);
    border-radius: 1rem;
    color: var(--shell-text-secondary);
}

.icat-master-dialog__actions[b-qbe2bh3ae7] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

[b-qbe2bh3ae7] .icat-master__toolbar-button.e-btn {
    border-radius: 0.95rem;
}

[b-qbe2bh3ae7] .icat-master-dialog__grid {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--shell-border);
    background: var(--shell-panel-background-soft);
}

[b-qbe2bh3ae7] .icat-master__help-accordion .e-acrdn-item {
    border: 1px solid var(--shell-border);
    border-radius: 1rem;
    background: var(--shell-item-background-subtle);
    overflow: hidden;
}

[b-qbe2bh3ae7] .icat-master__help-accordion .e-acrdn-item + .e-acrdn-item {
    margin-top: 0.75rem;
}

[b-qbe2bh3ae7] .icat-master__help-accordion .e-acrdn-header {
    min-height: auto;
}

[b-qbe2bh3ae7] .icat-master__help-accordion .e-acrdn-header .e-acrdn-header-content {
    padding: 0.9rem 1rem;
    color: var(--shell-text-primary);
    font-weight: 700;
}

[b-qbe2bh3ae7] .icat-master__help-accordion .e-acrdn-content {
    padding: 0 1rem 1rem;
    color: var(--shell-text-primary);
    background: transparent;
}

[b-qbe2bh3ae7] .icat-master__help-accordion .e-toggle-icon {
    color: var(--shell-text-secondary);
}

[b-qbe2bh3ae7] .icat-master-dialog__grid .e-gridheader,
[b-qbe2bh3ae7] .icat-master-dialog__grid .e-headercontent,
[b-qbe2bh3ae7] .icat-master-dialog__grid .e-gridcontent,
[b-qbe2bh3ae7] .icat-master-dialog__grid .e-content,
[b-qbe2bh3ae7] .icat-master-dialog__grid .e-table {
    background: transparent;
}

[b-qbe2bh3ae7] .icat-master-dialog__grid .e-headercell,
[b-qbe2bh3ae7] .icat-master-dialog__grid .e-rowcell,
[b-qbe2bh3ae7] .icat-master-dialog__grid .e-row:hover .e-rowcell,
[b-qbe2bh3ae7] .icat-master-dialog__grid .e-selectionbackground .e-rowcell {
    color: var(--shell-text-primary);
}

[b-qbe2bh3ae7] .icat-master-dialog__grid .e-gridpager,
[b-qbe2bh3ae7] .icat-master-dialog__grid .e-gridpager .e-pagercontainer {
    background: transparent;
}

[b-qbe2bh3ae7] .danger-action.e-btn {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
}

[b-qbe2bh3ae7] .danger-action.e-btn:hover,
[b-qbe2bh3ae7] .danger-action.e-btn:focus {
    background: #d64238;
    border-color: #d64238;
    color: #fff;
}

[b-qbe2bh3ae7] .danger-action--disabled.e-btn,
[b-qbe2bh3ae7] .danger-action--disabled.e-btn.e-disabled,
[b-qbe2bh3ae7] .danger-action--disabled.e-btn:disabled,
[b-qbe2bh3ae7] .danger-action.e-btn.e-disabled,
[b-qbe2bh3ae7] .danger-action.e-btn:disabled {
    background: var(--shell-item-background-subtle) !important;
    border-color: var(--shell-border) !important;
    color: var(--shell-text-secondary) !important;
    opacity: 0.7;
    box-shadow: none;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .icat-master__content[b-qbe2bh3ae7],
    .icat-master__content--help-docked[b-qbe2bh3ae7] {
        grid-template-columns: 1fr;
    }

    .icat-master__panel--docked[b-qbe2bh3ae7] {
        min-height: auto;
    }

    .icat-master__help-dock[b-qbe2bh3ae7] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: auto;
    }

    .icat-master__help-dock-label[b-qbe2bh3ae7] {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

@media (max-width: 760px) {
    .icat-master__header[b-qbe2bh3ae7] {
        flex-direction: column;
    }

    .icat-master__header-meta[b-qbe2bh3ae7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .icat-master__grid[b-qbe2bh3ae7] {
        grid-template-columns: 1fr;
    }

    .icat-master__input--wide[b-qbe2bh3ae7] {
        grid-column: auto;
    }

    .icat-master__toolbar[b-qbe2bh3ae7] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .icat-master__toolbar[b-qbe2bh3ae7] {
        grid-template-columns: 1fr;
    }

    .icat-master__header h1[b-qbe2bh3ae7],
    .icat-master__panel-head h2[b-qbe2bh3ae7] {
        font-size: 1.4rem;
    }
}
/* /Pages/Masters/Inventory/ItemGroupMaster.razor.rz.scp.css */
.ig-master[b-4l2dryaww1] {
    position: relative;
    display: block;
}

.ig-master__shell[b-4l2dryaww1] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.ig-master__header[b-4l2dryaww1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-hero-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-inverse);
}

.ig-master__eyebrow[b-4l2dryaww1],
.ig-master__panel-eyebrow[b-4l2dryaww1] {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
}

.ig-master__header h1[b-4l2dryaww1],
.ig-master__panel-head h2[b-4l2dryaww1] {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.1;
}

.ig-master__header p[b-4l2dryaww1] {
    margin: 0.55rem 0 0;
    max-width: 48rem;
    color: var(--shell-text-muted-inverse);
}

.ig-master__header-meta[b-4l2dryaww1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 0.75rem;
    width: min(100%, 260px);
}

.ig-master__meta-card[b-4l2dryaww1],
.ig-master__record-badge[b-4l2dryaww1] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--shell-text-inverse);
}

.ig-master__meta-card span[b-4l2dryaww1],
.ig-master__record-badge[b-4l2dryaww1] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ig-master__meta-card strong[b-4l2dryaww1] {
    font-size: 1.1rem;
}

.ig-master__message[b-4l2dryaww1] {
    width: 100%;
}

.ig-master__toolbar[b-4l2dryaww1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ig-master__toolbar-button[b-4l2dryaww1] {
    min-width: 130px;
}

.ig-master__content[b-4l2dryaww1] {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.ig-master__content--help-docked[b-4l2dryaww1] {
    grid-template-columns: minmax(0, 1fr) 88px;
}

.ig-master__panel[b-4l2dryaww1] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-primary);
}

.ig-master__panel--summary[b-4l2dryaww1] {
    background: var(--shell-panel-background-soft);
}

.ig-master__panel--docked[b-4l2dryaww1] {
    padding: 0.9rem 0.55rem;
}

.ig-master__panel-head[b-4l2dryaww1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.ig-master__grid[b-4l2dryaww1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.ig-master__input[b-4l2dryaww1] {
    width: 100%;
}

.ig-master__input--wide[b-4l2dryaww1] {
    grid-column: 1 / -1;
}

.ig-master__price-section[b-4l2dryaww1] {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
    border-top: 1px solid var(--shell-border);
    padding-top: 0.75rem;
}

.ig-master__tab-content[b-4l2dryaww1] {
    padding: 0.5rem 0;
}

.ig-master__price-header[b-4l2dryaww1] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 0.5rem;
}

.ig-master__price-header h3[b-4l2dryaww1] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--shell-text);
}

.ig-price-table[b-4l2dryaww1] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--shell-border);
    border-radius: 6px;
    overflow: hidden;
}

.ig-price-table__th[b-4l2dryaww1] {
    text-align: left;
    padding: 0.5rem 0.6rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--shell-text-secondary);
    background: color-mix(in srgb, var(--shell-panel-background-soft) 80%, transparent);
    border-bottom: 1px solid var(--shell-border);
}

.ig-price-table__td[b-4l2dryaww1] {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--shell-border) 50%, transparent);
    vertical-align: middle;
    font-size: 0.88rem;
}

.ig-price-table__td--action[b-4l2dryaww1] {
    text-align: center;
}

.ig-price-table__row:last-child .ig-price-table__td[b-4l2dryaww1] {
    border-bottom: none;
}

.ig-price-table__empty[b-4l2dryaww1] {
    padding: 1.5rem;
    text-align: center;
    color: var(--shell-text-secondary);
    font-size: 0.88rem;
}

[b-4l2dryaww1] .ig-price-table__combo,
[b-4l2dryaww1] .ig-price-table__input {
    width: 100%;
}

[b-4l2dryaww1] .ig-price-table__combo .e-input-group,
[b-4l2dryaww1] .ig-price-table__input.e-input-group {
    margin: 0;
}

.ig-master__price-picker[b-4l2dryaww1] {
    display: flex;
    flex-direction: column;
}

.ig-master__help-intro[b-4l2dryaww1] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}

.ig-master__help-accordion[b-4l2dryaww1] {
    width: 100%;
}

.ig-master__help-content[b-4l2dryaww1] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--shell-text-primary);
    line-height: 1.65;
}

.ig-master__help-content p[b-4l2dryaww1] {
    margin: 0;
}

.ig-master__help-list[b-4l2dryaww1] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.7rem;
    color: var(--shell-text-primary);
}

.ig-master__help-list li[b-4l2dryaww1] {
    padding-left: 0.15rem;
}

.ig-master__help-dock[b-4l2dryaww1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 100%;
}

.ig-master__help-dock-label[b-4l2dryaww1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.ig-master__help-toggle[b-4l2dryaww1] {
    min-width: 0;
}

.ig-master__panel--docked .ig-master__help-toggle[b-4l2dryaww1] {
    width: 100%;
}

.ig-master__busy-overlay[b-4l2dryaww1] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 1.5rem;
    background: rgba(10, 16, 28, 0.28);
    backdrop-filter: blur(4px);
    z-index: 6;
}

.ig-master__busy-indicator[b-4l2dryaww1] {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
}

.ig-master-dialog__content[b-4l2dryaww1] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ig-master-dialog__muted[b-4l2dryaww1] {
    color: var(--shell-text-secondary);
}

.ig-master-dialog__search[b-4l2dryaww1] {
    width: 100%;
}

.ig-master-dialog__state[b-4l2dryaww1] {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 1rem;
    border: 1px dashed var(--shell-border-strong);
    border-radius: 1rem;
    color: var(--shell-text-secondary);
}

.ig-master-dialog__actions[b-4l2dryaww1] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

[b-4l2dryaww1] .ig-master__toolbar-button.e-btn {
    border-radius: 0.95rem;
}

[b-4l2dryaww1] .ig-master-dialog__grid {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--shell-border);
    background: var(--shell-panel-background-soft);
}

[b-4l2dryaww1] .ig-master__help-accordion .e-acrdn-item {
    border: 1px solid var(--shell-border);
    border-radius: 1rem;
    background: var(--shell-item-background-subtle);
    overflow: hidden;
}

[b-4l2dryaww1] .ig-master__help-accordion .e-acrdn-item + .e-acrdn-item {
    margin-top: 0.75rem;
}

[b-4l2dryaww1] .ig-master__help-accordion .e-acrdn-header {
    min-height: auto;
}

[b-4l2dryaww1] .ig-master__help-accordion .e-acrdn-header .e-acrdn-header-content {
    padding: 0.9rem 1rem;
    color: var(--shell-text-primary);
    font-weight: 700;
}

[b-4l2dryaww1] .ig-master__help-accordion .e-acrdn-content {
    padding: 0 1rem 1rem;
    color: var(--shell-text-primary);
    background: transparent;
}

[b-4l2dryaww1] .ig-master__help-accordion .e-toggle-icon {
    color: var(--shell-text-secondary);
}

[b-4l2dryaww1] .ig-master-dialog__grid .e-gridheader,
[b-4l2dryaww1] .ig-master-dialog__grid .e-headercontent,
[b-4l2dryaww1] .ig-master-dialog__grid .e-gridcontent,
[b-4l2dryaww1] .ig-master-dialog__grid .e-content,
[b-4l2dryaww1] .ig-master-dialog__grid .e-table {
    background: transparent;
}

[b-4l2dryaww1] .ig-master-dialog__grid .e-headercell,
[b-4l2dryaww1] .ig-master-dialog__grid .e-rowcell,
[b-4l2dryaww1] .ig-master-dialog__grid .e-row:hover .e-rowcell,
[b-4l2dryaww1] .ig-master-dialog__grid .e-selectionbackground .e-rowcell {
    color: var(--shell-text-primary);
}

[b-4l2dryaww1] .ig-master-dialog__grid .e-gridpager,
[b-4l2dryaww1] .ig-master-dialog__grid .e-gridpager .e-pagercontainer {
    background: transparent;
}

[b-4l2dryaww1] .danger-action.e-btn {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
}

[b-4l2dryaww1] .danger-action.e-btn:hover,
[b-4l2dryaww1] .danger-action.e-btn:focus {
    background: #d64238;
    border-color: #d64238;
    color: #fff;
}

[b-4l2dryaww1] .danger-action--disabled.e-btn,
[b-4l2dryaww1] .danger-action--disabled.e-btn.e-disabled,
[b-4l2dryaww1] .danger-action--disabled.e-btn:disabled,
[b-4l2dryaww1] .danger-action.e-btn.e-disabled,
[b-4l2dryaww1] .danger-action.e-btn:disabled {
    background: var(--shell-item-background-subtle) !important;
    border-color: var(--shell-border) !important;
    color: var(--shell-text-secondary) !important;
    opacity: 0.7;
    box-shadow: none;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .ig-master__content[b-4l2dryaww1],
    .ig-master__content--help-docked[b-4l2dryaww1] {
        grid-template-columns: 1fr;
    }

    .ig-master__panel--docked[b-4l2dryaww1] {
        min-height: auto;
    }

    .ig-master__help-dock[b-4l2dryaww1] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: auto;
    }

    .ig-master__help-dock-label[b-4l2dryaww1] {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

@media (max-width: 760px) {
    .ig-master__header[b-4l2dryaww1] {
        flex-direction: column;
    }

    .ig-master__header-meta[b-4l2dryaww1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .ig-master__grid[b-4l2dryaww1] {
        grid-template-columns: 1fr;
    }

    .ig-master__input--wide[b-4l2dryaww1] {
        grid-column: auto;
    }

    .ig-master__toolbar[b-4l2dryaww1] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .ig-master__toolbar[b-4l2dryaww1] {
        grid-template-columns: 1fr;
    }

    .ig-master__header h1[b-4l2dryaww1],
    .ig-master__panel-head h2[b-4l2dryaww1] {
        font-size: 1.4rem;
    }
}
/* /Pages/Masters/Inventory/ItemParameterGroupMaster.razor.rz.scp.css */
/* Item parameter groups — allocation grid page. */
.ipg-page__body[b-nb9zv52cin] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.ipg-page__form[b-nb9zv52cin] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Search sits in the toolbar and takes the leftover width. */
.ipg-page__search[b-nb9zv52cin] {
    flex: 1 1 240px;
    min-width: 200px;
    max-width: 420px;
}

/* Native cell editor — so F5 saves the cell being typed. */
.ipg-cell[b-nb9zv52cin] {
    width: 100%;
    font: inherit;
    /* Same height as the Syncfusion in-cell editors (Bootstrap 5.3 control
       height), so native inputs and combo cells sit level in a row. */
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.5rem;
    line-height: 1.5;
    border: 1px solid #c7d2e8;
    border-radius: 3px;
    background: #fff;
}

.ipg-page__count[b-nb9zv52cin] {
    font-weight: 600;
    white-space: nowrap;
}

/* Icon-only per-row remove button — square, sits inside the row without
   stretching it. Syncfusion pads a normal button for a text label; there is
   no label here, so that padding is taken back. */
[b-nb9zv52cin] .ipg-rowbtn {
    min-width: 0;
    padding: 0.15rem 0.35rem;
    line-height: 1;
}

[b-nb9zv52cin] .ipg-rowbtn .e-btn-icon {
    margin: 0;
    font-size: 0.95rem;
}

/* ════════════════════════════════════════════════════════════════════════
   Help / User Guide panel.
   Blazor scoped CSS is per component: these ct-page__* rules live in each
   page that uses the panel, because a copy in another page's .razor.css
   never matches this page's elements. Without them the aside renders with
   no width at all and vanishes beside the 100%-wide grid.
   ════════════════════════════════════════════════════════════════════════ */
.ct-page__help[b-nb9zv52cin] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    align-self: stretch;
    max-height: 100%;
    overflow: auto;
    color: var(--shell-text-primary);
}

.ct-page__help--docked[b-nb9zv52cin] {
    flex: 0 0 64px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}

.ct-page__help-dock[b-nb9zv52cin] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    min-height: 100%;
}

.ct-page__help-dock-label[b-nb9zv52cin] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

/* ::deep — the toggle and the accordion are Syncfusion components, so the
   scope attribute lands on the wrapper, not on the element these rules
   target. */
[b-nb9zv52cin] .ct-page__help-toggle { min-width: 0; }
.ct-page__help--docked[b-nb9zv52cin]  .ct-page__help-toggle { width: 100%; }
[b-nb9zv52cin] .ct-page__help-accordion { width: 100%; }

.ct-page__panel-head[b-nb9zv52cin] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.ct-page__panel-eyebrow[b-nb9zv52cin] {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.ct-page__help-intro[b-nb9zv52cin] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}

.ct-page__help-content[b-nb9zv52cin] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    color: var(--shell-text-primary);
    line-height: 1.6;
}

.ct-page__help-content p[b-nb9zv52cin] { margin: 0; }

.ct-page__help-list[b-nb9zv52cin] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.6rem;
}

.ct-page__help-list li[b-nb9zv52cin] { padding-left: 0.15rem; }
/* /Pages/Masters/Inventory/ItemParameterTemplateMaster.razor.rz.scp.css */
/* Item parameter template — record master with a detail grid. */

/* ── Header form panel ────────────────────────────────────────────────────
   Blazor scoped CSS: prod-master__panel / __grid / __input live in each page
   that uses them (ProductMaster is the reference) — a copy in another page's
   .razor.css never matches this page's elements. Without these the header
   fields stack one per line with no panel around them. */
.prod-master__panel[b-v5mpmj8p7p] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
}

/* Two-column form grid (convention). */
.prod-master__grid[b-v5mpmj8p7p] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
}

.prod-master__input[b-v5mpmj8p7p] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.prod-master__input > label[b-v5mpmj8p7p] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--shell-text-secondary, #666);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.prod-master__input--wide[b-v5mpmj8p7p] {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .prod-master__grid[b-v5mpmj8p7p] { grid-template-columns: minmax(0, 1fr); }
    .prod-master__input--wide[b-v5mpmj8p7p] { grid-column: auto; }
}

.ipt-page__body[b-v5mpmj8p7p] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.ipt-page__form[b-v5mpmj8p7p] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.ipt-page__section-head[b-v5mpmj8p7p] {
    margin: 0.4rem 0 0;
    font-size: 1rem;
}

.ipt-page__toolbar-sep[b-v5mpmj8p7p] {
    flex: 0 0 1px;
    align-self: stretch;
    background: var(--shell-border);
    margin: 0 0.35rem;
}

/* Native cell editor — so F5 saves the cell being typed. */
.ipt-cell[b-v5mpmj8p7p] {
    width: 100%;
    font: inherit;
    /* Same height as the Syncfusion in-cell editors (Bootstrap 5.3 control
       height), so native inputs and combo cells sit level in a row. */
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.5rem;
    line-height: 1.5;
    border: 1px solid #c7d2e8;
    border-radius: 3px;
    background: #fff;
}

.ipt-cell:disabled[b-v5mpmj8p7p] {
    background: transparent;
    border-color: transparent;
    color: inherit;
    resize: none;
}

/* Multiline cells (Selection Values, Calculation Formula) — long lists stay
   readable instead of scrolling sideways in a one-line input. */
.ipt-cell--area[b-v5mpmj8p7p] {
    resize: vertical;
    min-height: calc(3em + 0.75rem + 2px);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ipt-cell--num[b-v5mpmj8p7p] {
    text-align: right;
}

.ipt-page__count[b-v5mpmj8p7p] {
    font-weight: 600;
    white-space: nowrap;
}

/* Footer aggregate cells: labelled value, right-aligned like the column. */
.ipt-page__agg[b-v5mpmj8p7p] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    font-weight: 600;
    white-space: nowrap;
}

.ipt-page__agg em[b-v5mpmj8p7p] {
    font-style: normal;
    font-weight: 400;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--shell-text-secondary);
}

/* Compact in-cell buttons (Popup Query / Rates / Open / Copy). */
[b-v5mpmj8p7p] .ipt-cellbtn {
    min-width: 0;
    padding: 0.15rem 0.5rem;
    font-size: 0.78rem;
    line-height: 1.2;
    white-space: nowrap;
}

/* Icon-only per-row remove button. */
[b-v5mpmj8p7p] .ipt-rowbtn {
    min-width: 0;
    padding: 0.15rem 0.35rem;
    line-height: 1;
}

[b-v5mpmj8p7p] .ipt-rowbtn .e-btn-icon {
    margin: 0;
    font-size: 0.95rem;
}

/* Plain tables used by the Find / Add Parameters / Copy / Rates dialogs. */
.ipt-find[b-v5mpmj8p7p] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.ipt-find th[b-v5mpmj8p7p],
.ipt-find td[b-v5mpmj8p7p] {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--shell-border);
    text-align: left;
    vertical-align: middle;
}

.ipt-find th[b-v5mpmj8p7p] {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--shell-text-secondary);
}

/* Inactive templates in the Find list — the app-wide status tint. */
.ipt-find--inactive td[b-v5mpmj8p7p] {
    color: #b45309;
}

/* Popup-query editor. */
.ipt-sql-editor[b-v5mpmj8p7p] {
    width: 100%;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.82rem;
    padding: 0.5rem;
    border: 1px solid var(--shell-border);
    border-radius: 4px;
    resize: vertical;
}

/* ════════════════════════════════════════════════════════════════════════
   Help / User Guide panel.
   Blazor scoped CSS is per component: these ct-page__* rules live in each
   page that uses the panel, because a copy in another page's .razor.css
   never matches this page's elements. Without them the aside renders with
   no width at all and vanishes beside the 100%-wide grid.
   ════════════════════════════════════════════════════════════════════════ */
.ct-page__help[b-v5mpmj8p7p] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    align-self: stretch;
    max-height: 100%;
    overflow: auto;
    color: var(--shell-text-primary);
}

.ct-page__help--docked[b-v5mpmj8p7p] {
    flex: 0 0 64px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}

.ct-page__help-dock[b-v5mpmj8p7p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    min-height: 100%;
}

.ct-page__help-dock-label[b-v5mpmj8p7p] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

/* ::deep — the toggle and the accordion are Syncfusion components, so the
   scope attribute lands on the wrapper, not on the element these rules
   target. */
[b-v5mpmj8p7p] .ct-page__help-toggle { min-width: 0; }
.ct-page__help--docked[b-v5mpmj8p7p]  .ct-page__help-toggle { width: 100%; }
[b-v5mpmj8p7p] .ct-page__help-accordion { width: 100%; }

.ct-page__panel-head[b-v5mpmj8p7p] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.ct-page__panel-eyebrow[b-v5mpmj8p7p] {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.ct-page__help-intro[b-v5mpmj8p7p] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}

.ct-page__help-content[b-v5mpmj8p7p] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    color: var(--shell-text-primary);
    line-height: 1.6;
}

.ct-page__help-content p[b-v5mpmj8p7p] { margin: 0; }

.ct-page__help-list[b-v5mpmj8p7p] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.6rem;
}

.ct-page__help-list li[b-v5mpmj8p7p] { padding-left: 0.15rem; }
/* /Pages/Masters/Inventory/ItemSubCategoryMaster.razor.rz.scp.css */
.iscat-master[b-th00gws9b5] {
    position: relative;
    display: block;
}

.iscat-master__shell[b-th00gws9b5] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.iscat-master__header[b-th00gws9b5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-hero-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-inverse);
}

.iscat-master__eyebrow[b-th00gws9b5],
.iscat-master__panel-eyebrow[b-th00gws9b5] {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
}

.iscat-master__header h1[b-th00gws9b5],
.iscat-master__panel-head h2[b-th00gws9b5] {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.1;
}

.iscat-master__header p[b-th00gws9b5] {
    margin: 0.55rem 0 0;
    max-width: 48rem;
    color: var(--shell-text-muted-inverse);
}

.iscat-master__header-meta[b-th00gws9b5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 0.75rem;
    width: min(100%, 260px);
}

.iscat-master__meta-card[b-th00gws9b5],
.iscat-master__record-badge[b-th00gws9b5] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--shell-text-inverse);
}

.iscat-master__meta-card span[b-th00gws9b5],
.iscat-master__record-badge[b-th00gws9b5] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.iscat-master__meta-card strong[b-th00gws9b5] {
    font-size: 1.1rem;
}

.iscat-master__message[b-th00gws9b5] {
    width: 100%;
}

.iscat-master__toolbar[b-th00gws9b5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.iscat-master__toolbar-button[b-th00gws9b5] {
    min-width: 130px;
}

.iscat-master__content[b-th00gws9b5] {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.iscat-master__content--help-docked[b-th00gws9b5] {
    grid-template-columns: minmax(0, 1fr) 88px;
}

.iscat-master__panel[b-th00gws9b5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-primary);
}

.iscat-master__panel--summary[b-th00gws9b5] {
    background: var(--shell-panel-background-soft);
}

.iscat-master__panel--docked[b-th00gws9b5] {
    padding: 0.9rem 0.55rem;
}

.iscat-master__panel-head[b-th00gws9b5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.iscat-master__grid[b-th00gws9b5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.iscat-master__input[b-th00gws9b5] {
    width: 100%;
}

.iscat-master__input--wide[b-th00gws9b5] {
    grid-column: 1 / -1;
}

/* Parent Item Group field: combobox + inline create (+) button. */
.iscat-master__group-field[b-th00gws9b5] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.iscat-master__group-combo[b-th00gws9b5] {
    flex: 1 1 auto;
    min-width: 0;
}

[b-th00gws9b5] .iscat-master__group-add.e-btn {
    flex: 0 0 auto;
    min-width: 38px;
    height: 38px;
    border-radius: 0.75rem;
    padding: 0;
}

.iscat-master__help-intro[b-th00gws9b5] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}

.iscat-master__help-accordion[b-th00gws9b5] {
    width: 100%;
}

.iscat-master__help-content[b-th00gws9b5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--shell-text-primary);
    line-height: 1.65;
}

.iscat-master__help-content p[b-th00gws9b5] {
    margin: 0;
}

.iscat-master__help-list[b-th00gws9b5] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.7rem;
    color: var(--shell-text-primary);
}

.iscat-master__help-list li[b-th00gws9b5] {
    padding-left: 0.15rem;
}

.iscat-master__help-dock[b-th00gws9b5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 100%;
}

.iscat-master__help-dock-label[b-th00gws9b5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.iscat-master__help-toggle[b-th00gws9b5] {
    min-width: 0;
}

.iscat-master__panel--docked .iscat-master__help-toggle[b-th00gws9b5] {
    width: 100%;
}

.iscat-master__busy-overlay[b-th00gws9b5] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 1.5rem;
    background: rgba(10, 16, 28, 0.28);
    backdrop-filter: blur(4px);
    z-index: 6;
}

.iscat-master__busy-indicator[b-th00gws9b5] {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
}

.iscat-master-dialog__content[b-th00gws9b5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.iscat-master-dialog__muted[b-th00gws9b5] {
    color: var(--shell-text-secondary);
}

.iscat-master-dialog__search[b-th00gws9b5] {
    width: 100%;
}

.iscat-master-dialog__state[b-th00gws9b5] {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 1rem;
    border: 1px dashed var(--shell-border-strong);
    border-radius: 1rem;
    color: var(--shell-text-secondary);
}

.iscat-master-dialog__actions[b-th00gws9b5] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

[b-th00gws9b5] .iscat-master__toolbar-button.e-btn {
    border-radius: 0.95rem;
}

[b-th00gws9b5] .iscat-master-dialog__grid {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--shell-border);
    background: var(--shell-panel-background-soft);
}

[b-th00gws9b5] .iscat-master__help-accordion .e-acrdn-item {
    border: 1px solid var(--shell-border);
    border-radius: 1rem;
    background: var(--shell-item-background-subtle);
    overflow: hidden;
}

[b-th00gws9b5] .iscat-master__help-accordion .e-acrdn-item + .e-acrdn-item {
    margin-top: 0.75rem;
}

[b-th00gws9b5] .iscat-master__help-accordion .e-acrdn-header {
    min-height: auto;
}

[b-th00gws9b5] .iscat-master__help-accordion .e-acrdn-header .e-acrdn-header-content {
    padding: 0.9rem 1rem;
    color: var(--shell-text-primary);
    font-weight: 700;
}

[b-th00gws9b5] .iscat-master__help-accordion .e-acrdn-content {
    padding: 0 1rem 1rem;
    color: var(--shell-text-primary);
    background: transparent;
}

[b-th00gws9b5] .iscat-master__help-accordion .e-toggle-icon {
    color: var(--shell-text-secondary);
}

[b-th00gws9b5] .iscat-master-dialog__grid .e-gridheader,
[b-th00gws9b5] .iscat-master-dialog__grid .e-headercontent,
[b-th00gws9b5] .iscat-master-dialog__grid .e-gridcontent,
[b-th00gws9b5] .iscat-master-dialog__grid .e-content,
[b-th00gws9b5] .iscat-master-dialog__grid .e-table {
    background: transparent;
}

[b-th00gws9b5] .iscat-master-dialog__grid .e-headercell,
[b-th00gws9b5] .iscat-master-dialog__grid .e-rowcell,
[b-th00gws9b5] .iscat-master-dialog__grid .e-row:hover .e-rowcell,
[b-th00gws9b5] .iscat-master-dialog__grid .e-selectionbackground .e-rowcell {
    color: var(--shell-text-primary);
}

[b-th00gws9b5] .iscat-master-dialog__grid .e-gridpager,
[b-th00gws9b5] .iscat-master-dialog__grid .e-gridpager .e-pagercontainer {
    background: transparent;
}

[b-th00gws9b5] .danger-action.e-btn {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
}

[b-th00gws9b5] .danger-action.e-btn:hover,
[b-th00gws9b5] .danger-action.e-btn:focus {
    background: #d64238;
    border-color: #d64238;
    color: #fff;
}

[b-th00gws9b5] .danger-action--disabled.e-btn,
[b-th00gws9b5] .danger-action--disabled.e-btn.e-disabled,
[b-th00gws9b5] .danger-action--disabled.e-btn:disabled,
[b-th00gws9b5] .danger-action.e-btn.e-disabled,
[b-th00gws9b5] .danger-action.e-btn:disabled {
    background: var(--shell-item-background-subtle) !important;
    border-color: var(--shell-border) !important;
    color: var(--shell-text-secondary) !important;
    opacity: 0.7;
    box-shadow: none;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .iscat-master__content[b-th00gws9b5],
    .iscat-master__content--help-docked[b-th00gws9b5] {
        grid-template-columns: 1fr;
    }

    .iscat-master__panel--docked[b-th00gws9b5] {
        min-height: auto;
    }

    .iscat-master__help-dock[b-th00gws9b5] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: auto;
    }

    .iscat-master__help-dock-label[b-th00gws9b5] {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

@media (max-width: 760px) {
    .iscat-master__header[b-th00gws9b5] {
        flex-direction: column;
    }

    .iscat-master__header-meta[b-th00gws9b5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .iscat-master__grid[b-th00gws9b5] {
        grid-template-columns: 1fr;
    }

    .iscat-master__input--wide[b-th00gws9b5] {
        grid-column: auto;
    }

    .iscat-master__toolbar[b-th00gws9b5] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .iscat-master__toolbar[b-th00gws9b5] {
        grid-template-columns: 1fr;
    }

    .iscat-master__header h1[b-th00gws9b5],
    .iscat-master__panel-head h2[b-th00gws9b5] {
        font-size: 1.4rem;
    }
}
/* /Pages/Masters/Inventory/ItemSubGroupMaster.razor.rz.scp.css */
.isg-master[b-54cxf3k2yr] {
    position: relative;
    display: block;
}

.isg-master__shell[b-54cxf3k2yr] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.isg-master__header[b-54cxf3k2yr] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-hero-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-inverse);
}

.isg-master__eyebrow[b-54cxf3k2yr],
.isg-master__panel-eyebrow[b-54cxf3k2yr] {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
}

.isg-master__header h1[b-54cxf3k2yr],
.isg-master__panel-head h2[b-54cxf3k2yr] {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.1;
}

.isg-master__header p[b-54cxf3k2yr] {
    margin: 0.55rem 0 0;
    max-width: 48rem;
    color: var(--shell-text-muted-inverse);
}

.isg-master__header-meta[b-54cxf3k2yr] {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 0.75rem;
    width: min(100%, 260px);
}

.isg-master__meta-card[b-54cxf3k2yr],
.isg-master__record-badge[b-54cxf3k2yr] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--shell-text-inverse);
}

.isg-master__meta-card span[b-54cxf3k2yr],
.isg-master__record-badge[b-54cxf3k2yr] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.isg-master__meta-card strong[b-54cxf3k2yr] {
    font-size: 1.1rem;
}

.isg-master__message[b-54cxf3k2yr] {
    width: 100%;
}

.isg-master__toolbar[b-54cxf3k2yr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.isg-master__toolbar-button[b-54cxf3k2yr] {
    min-width: 130px;
}

.isg-master__content[b-54cxf3k2yr] {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.isg-master__content--help-docked[b-54cxf3k2yr] {
    grid-template-columns: minmax(0, 1fr) 88px;
}

.isg-master__panel[b-54cxf3k2yr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-primary);
}

.isg-master__panel--summary[b-54cxf3k2yr] {
    background: var(--shell-panel-background-soft);
}

.isg-master__panel--docked[b-54cxf3k2yr] {
    padding: 0.9rem 0.55rem;
}

.isg-master__panel-head[b-54cxf3k2yr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.isg-master__grid[b-54cxf3k2yr] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.isg-master__input[b-54cxf3k2yr] {
    width: 100%;
}

.isg-master__input--wide[b-54cxf3k2yr] {
    grid-column: 1 / -1;
}

/* Parent Item Group field: combobox + inline create (+) button. */
.isg-master__group-field[b-54cxf3k2yr] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.isg-master__group-combo[b-54cxf3k2yr] {
    flex: 1 1 auto;
    min-width: 0;
}

[b-54cxf3k2yr] .isg-master__group-add.e-btn {
    flex: 0 0 auto;
    min-width: 38px;
    height: 38px;
    border-radius: 0.75rem;
    padding: 0;
}

.isg-master__help-intro[b-54cxf3k2yr] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}

.isg-master__help-accordion[b-54cxf3k2yr] {
    width: 100%;
}

.isg-master__help-content[b-54cxf3k2yr] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--shell-text-primary);
    line-height: 1.65;
}

.isg-master__help-content p[b-54cxf3k2yr] {
    margin: 0;
}

.isg-master__help-list[b-54cxf3k2yr] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.7rem;
    color: var(--shell-text-primary);
}

.isg-master__help-list li[b-54cxf3k2yr] {
    padding-left: 0.15rem;
}

.isg-master__help-dock[b-54cxf3k2yr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 100%;
}

.isg-master__help-dock-label[b-54cxf3k2yr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.isg-master__help-toggle[b-54cxf3k2yr] {
    min-width: 0;
}

.isg-master__panel--docked .isg-master__help-toggle[b-54cxf3k2yr] {
    width: 100%;
}

.isg-master__busy-overlay[b-54cxf3k2yr] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 1.5rem;
    background: rgba(10, 16, 28, 0.28);
    backdrop-filter: blur(4px);
    z-index: 6;
}

.isg-master__busy-indicator[b-54cxf3k2yr] {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
}

.isg-master-dialog__content[b-54cxf3k2yr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.isg-master-dialog__muted[b-54cxf3k2yr] {
    color: var(--shell-text-secondary);
}

.isg-master-dialog__search[b-54cxf3k2yr] {
    width: 100%;
}

.isg-master-dialog__state[b-54cxf3k2yr] {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 1rem;
    border: 1px dashed var(--shell-border-strong);
    border-radius: 1rem;
    color: var(--shell-text-secondary);
}

.isg-master-dialog__actions[b-54cxf3k2yr] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

[b-54cxf3k2yr] .isg-master__toolbar-button.e-btn {
    border-radius: 0.95rem;
}

[b-54cxf3k2yr] .isg-master-dialog__grid {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--shell-border);
    background: var(--shell-panel-background-soft);
}

[b-54cxf3k2yr] .isg-master__help-accordion .e-acrdn-item {
    border: 1px solid var(--shell-border);
    border-radius: 1rem;
    background: var(--shell-item-background-subtle);
    overflow: hidden;
}

[b-54cxf3k2yr] .isg-master__help-accordion .e-acrdn-item + .e-acrdn-item {
    margin-top: 0.75rem;
}

[b-54cxf3k2yr] .isg-master__help-accordion .e-acrdn-header {
    min-height: auto;
}

[b-54cxf3k2yr] .isg-master__help-accordion .e-acrdn-header .e-acrdn-header-content {
    padding: 0.9rem 1rem;
    color: var(--shell-text-primary);
    font-weight: 700;
}

[b-54cxf3k2yr] .isg-master__help-accordion .e-acrdn-content {
    padding: 0 1rem 1rem;
    color: var(--shell-text-primary);
    background: transparent;
}

[b-54cxf3k2yr] .isg-master__help-accordion .e-toggle-icon {
    color: var(--shell-text-secondary);
}

[b-54cxf3k2yr] .isg-master-dialog__grid .e-gridheader,
[b-54cxf3k2yr] .isg-master-dialog__grid .e-headercontent,
[b-54cxf3k2yr] .isg-master-dialog__grid .e-gridcontent,
[b-54cxf3k2yr] .isg-master-dialog__grid .e-content,
[b-54cxf3k2yr] .isg-master-dialog__grid .e-table {
    background: transparent;
}

[b-54cxf3k2yr] .isg-master-dialog__grid .e-headercell,
[b-54cxf3k2yr] .isg-master-dialog__grid .e-rowcell,
[b-54cxf3k2yr] .isg-master-dialog__grid .e-row:hover .e-rowcell,
[b-54cxf3k2yr] .isg-master-dialog__grid .e-selectionbackground .e-rowcell {
    color: var(--shell-text-primary);
}

[b-54cxf3k2yr] .isg-master-dialog__grid .e-gridpager,
[b-54cxf3k2yr] .isg-master-dialog__grid .e-gridpager .e-pagercontainer {
    background: transparent;
}

[b-54cxf3k2yr] .danger-action.e-btn {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
}

[b-54cxf3k2yr] .danger-action.e-btn:hover,
[b-54cxf3k2yr] .danger-action.e-btn:focus {
    background: #d64238;
    border-color: #d64238;
    color: #fff;
}

[b-54cxf3k2yr] .danger-action--disabled.e-btn,
[b-54cxf3k2yr] .danger-action--disabled.e-btn.e-disabled,
[b-54cxf3k2yr] .danger-action--disabled.e-btn:disabled,
[b-54cxf3k2yr] .danger-action.e-btn.e-disabled,
[b-54cxf3k2yr] .danger-action.e-btn:disabled {
    background: var(--shell-item-background-subtle) !important;
    border-color: var(--shell-border) !important;
    color: var(--shell-text-secondary) !important;
    opacity: 0.7;
    box-shadow: none;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .isg-master__content[b-54cxf3k2yr],
    .isg-master__content--help-docked[b-54cxf3k2yr] {
        grid-template-columns: 1fr;
    }

    .isg-master__panel--docked[b-54cxf3k2yr] {
        min-height: auto;
    }

    .isg-master__help-dock[b-54cxf3k2yr] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: auto;
    }

    .isg-master__help-dock-label[b-54cxf3k2yr] {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

@media (max-width: 760px) {
    .isg-master__header[b-54cxf3k2yr] {
        flex-direction: column;
    }

    .isg-master__header-meta[b-54cxf3k2yr] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .isg-master__grid[b-54cxf3k2yr] {
        grid-template-columns: 1fr;
    }

    .isg-master__input--wide[b-54cxf3k2yr] {
        grid-column: auto;
    }

    .isg-master__toolbar[b-54cxf3k2yr] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .isg-master__toolbar[b-54cxf3k2yr] {
        grid-template-columns: 1fr;
    }

    .isg-master__header h1[b-54cxf3k2yr],
    .isg-master__panel-head h2[b-54cxf3k2yr] {
        font-size: 1.4rem;
    }
}
/* /Pages/Masters/Inventory/ParameterTemplateNameMaster.razor.rz.scp.css */
/* Parameter template names — allocation grid page. */
.ptn-page__body[b-kb3141wy7v] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.ptn-page__form[b-kb3141wy7v] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Search sits in the toolbar and takes the leftover width. */
.ptn-page__search[b-kb3141wy7v] {
    flex: 1 1 240px;
    min-width: 200px;
    max-width: 420px;
}

/* Native cell editor — so F5 saves the cell being typed. */
.ptn-cell[b-kb3141wy7v] {
    width: 100%;
    font: inherit;
    /* Same height as the Syncfusion in-cell editors (Bootstrap 5.3 control
       height), so native inputs and combo cells sit level in a row. */
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.5rem;
    line-height: 1.5;
    border: 1px solid #c7d2e8;
    border-radius: 3px;
    background: #fff;
}

.ptn-page__count[b-kb3141wy7v] {
    font-weight: 600;
    white-space: nowrap;
}

/* Icon-only per-row remove button — square, sits inside the row without
   stretching it. Syncfusion pads a normal button for a text label; there is
   no label here, so that padding is taken back. */
[b-kb3141wy7v] .ptn-rowbtn {
    min-width: 0;
    padding: 0.15rem 0.35rem;
    line-height: 1;
}

[b-kb3141wy7v] .ptn-rowbtn .e-btn-icon {
    margin: 0;
    font-size: 0.95rem;
}

/* ════════════════════════════════════════════════════════════════════════
   Help / User Guide panel.
   Blazor scoped CSS is per component: these ct-page__* rules live in each
   page that uses the panel, because a copy in another page's .razor.css
   never matches this page's elements. Without them the aside renders with
   no width at all and vanishes beside the 100%-wide grid.
   ════════════════════════════════════════════════════════════════════════ */
.ct-page__help[b-kb3141wy7v] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    align-self: stretch;
    max-height: 100%;
    overflow: auto;
    color: var(--shell-text-primary);
}

.ct-page__help--docked[b-kb3141wy7v] {
    flex: 0 0 64px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}

.ct-page__help-dock[b-kb3141wy7v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    min-height: 100%;
}

.ct-page__help-dock-label[b-kb3141wy7v] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

/* ::deep — the toggle and the accordion are Syncfusion components, so the
   scope attribute lands on the wrapper, not on the element these rules
   target. */
[b-kb3141wy7v] .ct-page__help-toggle { min-width: 0; }
.ct-page__help--docked[b-kb3141wy7v]  .ct-page__help-toggle { width: 100%; }
[b-kb3141wy7v] .ct-page__help-accordion { width: 100%; }

.ct-page__panel-head[b-kb3141wy7v] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.ct-page__panel-eyebrow[b-kb3141wy7v] {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.ct-page__help-intro[b-kb3141wy7v] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}

.ct-page__help-content[b-kb3141wy7v] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    color: var(--shell-text-primary);
    line-height: 1.6;
}

.ct-page__help-content p[b-kb3141wy7v] { margin: 0; }

.ct-page__help-list[b-kb3141wy7v] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.6rem;
}

.ct-page__help-list li[b-kb3141wy7v] { padding-left: 0.15rem; }

/* Read-only usage counter — right-aligned like any other number. */
/* Link-styled count that opens the products-behind-the-count dialog. */
button.ptn-page__usage--link[b-kb3141wy7v] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    color: var(--shell-button-primary, #2563eb);
    text-decoration: underline;
    opacity: 1;
    width: 100%;
}

button.ptn-page__usage--link:hover[b-kb3141wy7v] {
    text-decoration: none;
}

/* The dialog's product table. */
.ptn-usage[b-kb3141wy7v] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.ptn-usage th[b-kb3141wy7v],
.ptn-usage td[b-kb3141wy7v] {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--shell-border);
    text-align: left;
    vertical-align: middle;
}

.ptn-usage th[b-kb3141wy7v] {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--shell-text-secondary);
}

/* Inactive templates — the app-wide status tint. */
.ptn-usage--inactive td[b-kb3141wy7v] {
    color: #b45309;
}

/* Compact in-cell button (the usage dialog's Open action). ::deep works here
   because the button's <td> ancestor carries this component's scope attribute
   even after Syncfusion portals the dialog to <body>. */
[b-kb3141wy7v] .ptn-cellbtn {
    min-width: 0;
    padding: 0.15rem 0.5rem;
    font-size: 0.78rem;
    line-height: 1.2;
    white-space: nowrap;
}

.ptn-page__usage[b-kb3141wy7v] {
    display: block;
    text-align: right;
    white-space: nowrap;
    opacity: 0.85;
}
/* /Pages/Masters/Inventory/PriceCategoryMaster.razor.rz.scp.css */
.pcat-master[b-xo6f7clguv] {
    position: relative;
    display: block;
}

.pcat-master__shell[b-xo6f7clguv] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.pcat-master__header[b-xo6f7clguv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-hero-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-inverse);
}

.pcat-master__eyebrow[b-xo6f7clguv],
.pcat-master__panel-eyebrow[b-xo6f7clguv] {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
}

.pcat-master__header h1[b-xo6f7clguv],
.pcat-master__panel-head h2[b-xo6f7clguv] {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.1;
}

.pcat-master__header p[b-xo6f7clguv] {
    margin: 0.55rem 0 0;
    max-width: 48rem;
    color: var(--shell-text-muted-inverse);
}

.pcat-master__header-meta[b-xo6f7clguv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 0.75rem;
    width: min(100%, 260px);
}

.pcat-master__meta-card[b-xo6f7clguv],
.pcat-master__record-badge[b-xo6f7clguv] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--shell-text-inverse);
}

.pcat-master__meta-card span[b-xo6f7clguv],
.pcat-master__record-badge[b-xo6f7clguv] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pcat-master__meta-card strong[b-xo6f7clguv] {
    font-size: 1.1rem;
}

.pcat-master__message[b-xo6f7clguv] {
    width: 100%;
}

.pcat-master__toolbar[b-xo6f7clguv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pcat-master__toolbar-button[b-xo6f7clguv] {
    min-width: 130px;
}

.pcat-master__content[b-xo6f7clguv] {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.pcat-master__content--help-docked[b-xo6f7clguv] {
    grid-template-columns: minmax(0, 1fr) 88px;
}

.pcat-master__panel[b-xo6f7clguv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-primary);
}

.pcat-master__panel--summary[b-xo6f7clguv] {
    background: var(--shell-panel-background-soft);
}

.pcat-master__panel--docked[b-xo6f7clguv] {
    padding: 0.9rem 0.55rem;
}

.pcat-master__panel-head[b-xo6f7clguv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.pcat-master__grid[b-xo6f7clguv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.pcat-master__input[b-xo6f7clguv] {
    width: 100%;
}

.pcat-master__input--wide[b-xo6f7clguv] {
    grid-column: 1 / -1;
}

.pcat-master__help-intro[b-xo6f7clguv] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}

.pcat-master__help-accordion[b-xo6f7clguv] {
    width: 100%;
}

.pcat-master__help-content[b-xo6f7clguv] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--shell-text-primary);
    line-height: 1.65;
}

.pcat-master__help-content p[b-xo6f7clguv] {
    margin: 0;
}

.pcat-master__help-list[b-xo6f7clguv] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.7rem;
    color: var(--shell-text-primary);
}

.pcat-master__help-list li[b-xo6f7clguv] {
    padding-left: 0.15rem;
}

.pcat-master__help-dock[b-xo6f7clguv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 100%;
}

.pcat-master__help-dock-label[b-xo6f7clguv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.pcat-master__help-toggle[b-xo6f7clguv] {
    min-width: 0;
}

.pcat-master__panel--docked .pcat-master__help-toggle[b-xo6f7clguv] {
    width: 100%;
}

.pcat-master__busy-overlay[b-xo6f7clguv] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 1.5rem;
    background: rgba(10, 16, 28, 0.28);
    backdrop-filter: blur(4px);
    z-index: 6;
}

.pcat-master__busy-indicator[b-xo6f7clguv] {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
}

.pcat-master-dialog__content[b-xo6f7clguv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pcat-master-dialog__muted[b-xo6f7clguv] {
    color: var(--shell-text-secondary);
}

.pcat-master-dialog__search[b-xo6f7clguv] {
    width: 100%;
}

.pcat-master-dialog__state[b-xo6f7clguv] {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 1rem;
    border: 1px dashed var(--shell-border-strong);
    border-radius: 1rem;
    color: var(--shell-text-secondary);
}

.pcat-master-dialog__actions[b-xo6f7clguv] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

[b-xo6f7clguv] .pcat-master__toolbar-button.e-btn {
    border-radius: 0.95rem;
}

[b-xo6f7clguv] .pcat-master-dialog__grid {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--shell-border);
    background: var(--shell-panel-background-soft);
}

[b-xo6f7clguv] .pcat-master__help-accordion .e-acrdn-item {
    border: 1px solid var(--shell-border);
    border-radius: 1rem;
    background: var(--shell-item-background-subtle);
    overflow: hidden;
}

[b-xo6f7clguv] .pcat-master__help-accordion .e-acrdn-item + .e-acrdn-item {
    margin-top: 0.75rem;
}

[b-xo6f7clguv] .pcat-master__help-accordion .e-acrdn-header {
    min-height: auto;
}

[b-xo6f7clguv] .pcat-master__help-accordion .e-acrdn-header .e-acrdn-header-content {
    padding: 0.9rem 1rem;
    color: var(--shell-text-primary);
    font-weight: 700;
}

[b-xo6f7clguv] .pcat-master__help-accordion .e-acrdn-content {
    padding: 0 1rem 1rem;
    color: var(--shell-text-primary);
    background: transparent;
}

[b-xo6f7clguv] .pcat-master__help-accordion .e-toggle-icon {
    color: var(--shell-text-secondary);
}

[b-xo6f7clguv] .pcat-master-dialog__grid .e-gridheader,
[b-xo6f7clguv] .pcat-master-dialog__grid .e-headercontent,
[b-xo6f7clguv] .pcat-master-dialog__grid .e-gridcontent,
[b-xo6f7clguv] .pcat-master-dialog__grid .e-content,
[b-xo6f7clguv] .pcat-master-dialog__grid .e-table {
    background: transparent;
}

[b-xo6f7clguv] .pcat-master-dialog__grid .e-headercell,
[b-xo6f7clguv] .pcat-master-dialog__grid .e-rowcell,
[b-xo6f7clguv] .pcat-master-dialog__grid .e-row:hover .e-rowcell,
[b-xo6f7clguv] .pcat-master-dialog__grid .e-selectionbackground .e-rowcell {
    color: var(--shell-text-primary);
}

[b-xo6f7clguv] .pcat-master-dialog__grid .e-gridpager,
[b-xo6f7clguv] .pcat-master-dialog__grid .e-gridpager .e-pagercontainer {
    background: transparent;
}

[b-xo6f7clguv] .danger-action.e-btn {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
}

[b-xo6f7clguv] .danger-action.e-btn:hover,
[b-xo6f7clguv] .danger-action.e-btn:focus {
    background: #d64238;
    border-color: #d64238;
    color: #fff;
}

[b-xo6f7clguv] .danger-action--disabled.e-btn,
[b-xo6f7clguv] .danger-action--disabled.e-btn.e-disabled,
[b-xo6f7clguv] .danger-action--disabled.e-btn:disabled,
[b-xo6f7clguv] .danger-action.e-btn.e-disabled,
[b-xo6f7clguv] .danger-action.e-btn:disabled {
    background: var(--shell-item-background-subtle) !important;
    border-color: var(--shell-border) !important;
    color: var(--shell-text-secondary) !important;
    opacity: 0.7;
    box-shadow: none;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .pcat-master__content[b-xo6f7clguv],
    .pcat-master__content--help-docked[b-xo6f7clguv] {
        grid-template-columns: 1fr;
    }

    .pcat-master__panel--docked[b-xo6f7clguv] {
        min-height: auto;
    }

    .pcat-master__help-dock[b-xo6f7clguv] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: auto;
    }

    .pcat-master__help-dock-label[b-xo6f7clguv] {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

@media (max-width: 760px) {
    .pcat-master__header[b-xo6f7clguv] {
        flex-direction: column;
    }

    .pcat-master__header-meta[b-xo6f7clguv] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .pcat-master__grid[b-xo6f7clguv] {
        grid-template-columns: 1fr;
    }

    .pcat-master__input--wide[b-xo6f7clguv] {
        grid-column: auto;
    }

    .pcat-master__toolbar[b-xo6f7clguv] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .pcat-master__toolbar[b-xo6f7clguv] {
        grid-template-columns: 1fr;
    }

    .pcat-master__header h1[b-xo6f7clguv],
    .pcat-master__panel-head h2[b-xo6f7clguv] {
        font-size: 1.4rem;
    }
}
/* /Pages/Masters/Inventory/PriceListMaster.razor.rz.scp.css */
/* Price List Manager — header form + item grid. */
.pl-master__body[b-2vo2tbq7w6] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.pl-master__form[b-2vo2tbq7w6] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.pl-master__detail[b-2vo2tbq7w6] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

/* Two-column header (convention). Bottom-aligned so the inputs in a row share
   a baseline even when one of them is the taller multiline Remarks box. */
.pl-grid2[b-2vo2tbq7w6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}

/* Footer aggregates. */
.pl-page__count[b-2vo2tbq7w6] {
    font-weight: 600;
    white-space: nowrap;
}

/* Group caption without the field name. */
.pl-groupcap[b-2vo2tbq7w6] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
}

.pl-groupcap__key[b-2vo2tbq7w6] {
    font-weight: 600;
}

.pl-groupcap__count[b-2vo2tbq7w6] {
    font-size: 0.78rem;
    opacity: 0.7;
}

.pl-grid2__wide[b-2vo2tbq7w6] {
    grid-column: 1 / -1;
}

.pl-switch[b-2vo2tbq7w6] {
    align-self: end;
}

.pl-items[b-2vo2tbq7w6] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pl-items__head[b-2vo2tbq7w6] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Native cell editors: the model updates as the operator types, so F5 (which
   never blurs) still saves the cell being edited. */
.pl-cell[b-2vo2tbq7w6] {
    width: 100%;
    height: 28px;
    padding: 0.15rem 0.4rem;
    font: inherit;
    font-size: 0.84rem;
    color: #1c2b3a;
    background: #fff;
    border: 1px solid #cfd6de;
    border-radius: 4px;
}

.pl-cell--num[b-2vo2tbq7w6] {
    text-align: right;
}

.pl-cell:focus[b-2vo2tbq7w6] {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 1px #4f46e5;
}

.pl-cell:disabled[b-2vo2tbq7w6] {
    background: #f2f4f7;
    color: #98a1ad;
}

.pl-rowbtn[b-2vo2tbq7w6] {
    font: inherit;
    font-size: 0.76rem;
    padding: 0.22rem 0.55rem;
    color: #a02020;
    background: #fdeeee;
    border: 1px solid #e5b8b8;
    border-radius: 3px;
    cursor: pointer;
}

.pl-rowbtn:hover:not(:disabled)[b-2vo2tbq7w6] {
    background: #f9dcdc;
}

.pl-rowbtn:disabled[b-2vo2tbq7w6] {
    opacity: .5;
    cursor: default;
}

/* Embedded-dialog toolbar. */
.pl-embedded-toolbar[b-2vo2tbq7w6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

@media (max-width: 900px) {
    .pl-grid2[b-2vo2tbq7w6] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Masters/Inventory/ProductBrowserPage.razor.rz.scp.css */
/* Product Browser — full-width item list. */
.pb-page__body[b-lgnfnkop0n] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.pb-page__form[b-lgnfnkop0n] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Search sits in the toolbar and takes the leftover width. */
.pb-page__search[b-lgnfnkop0n] {
    flex: 1 1 260px;
    min-width: 220px;
    max-width: 460px;
}

/* Footer row count. */
.pb-page__count[b-lgnfnkop0n] {
    font-weight: 600;
    white-space: nowrap;
}

/* Group caption without the field name: "KGS   5 items". */
.pb-groupcap[b-lgnfnkop0n] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
}

.pb-groupcap__key[b-lgnfnkop0n] {
    font-weight: 600;
}

.pb-groupcap__count[b-lgnfnkop0n] {
    font-size: 0.78rem;
    opacity: 0.7;
}

/* Virtualized rows must all be the same height — matches RowHeight on the
   grid, so the scrollbar and the rendered window stay in step. */
.pb-page[b-lgnfnkop0n]  .e-grid .e-row,
.pb-page[b-lgnfnkop0n]  .e-grid .e-rowcell {
    height: 34px;
}
/* /Pages/Masters/Inventory/ProductMaster.razor.rz.scp.css */
.prod-master[b-m02bbgr401] {
    position: relative;
    display: block;
}

.prod-master__shell[b-m02bbgr401] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.prod-master__header[b-m02bbgr401] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-hero-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-inverse);
}

.prod-master__eyebrow[b-m02bbgr401],
.prod-master__panel-eyebrow[b-m02bbgr401] {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
}

.prod-master__header h1[b-m02bbgr401],
.prod-master__panel-head h2[b-m02bbgr401] {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.1;
}

.prod-master__header p[b-m02bbgr401] {
    margin: 0.55rem 0 0;
    max-width: 48rem;
    color: var(--shell-text-muted-inverse);
}

/* Mirrors the global rule in app.css (keep both in sync): one ROW of cards,
   however many the page defines. */
.prod-master__header-meta[b-m02bbgr401] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(110px, 1fr);
    gap: 0.75rem;
    width: auto;
    max-width: min(100%, 420px);
}

.prod-master__meta-card[b-m02bbgr401],
.prod-master__record-badge[b-m02bbgr401] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--shell-text-inverse);
}

.prod-master__meta-card span[b-m02bbgr401],
.prod-master__record-badge[b-m02bbgr401] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.prod-master__meta-card strong[b-m02bbgr401] {
    font-size: 1.1rem;
}

.prod-master__message[b-m02bbgr401] {
    width: 100%;
}

.prod-master__toolbar[b-m02bbgr401] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.prod-master__toolbar-button[b-m02bbgr401] {
    min-width: 130px;
}

.prod-master__content[b-m02bbgr401] {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.prod-master__content--help-docked[b-m02bbgr401] {
    grid-template-columns: minmax(0, 1fr) 88px;
}

.prod-master__panel[b-m02bbgr401] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    /* Soft translucent tone — same ambient background the Ledger Account /
       Ledger Group masters use (their form panes sit on the shell background). */
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    color: var(--shell-text-primary);
}

.prod-master__panel--summary[b-m02bbgr401] {
    background: var(--shell-panel-background-soft);
}

.prod-master__panel--docked[b-m02bbgr401] {
    padding: 0.9rem 0.55rem;
}

.prod-master__panel-head[b-m02bbgr401] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.prod-master__grid[b-m02bbgr401] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.prod-master__input[b-m02bbgr401] {
    width: 100%;
}

.prod-master__input--wide[b-m02bbgr401] {
    grid-column: 1 / -1;
}

.prod-master__help-intro[b-m02bbgr401] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}

.prod-master__help-accordion[b-m02bbgr401] {
    width: 100%;
}

.prod-master__help-content[b-m02bbgr401] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--shell-text-primary);
    line-height: 1.65;
}

.prod-master__help-content p[b-m02bbgr401] {
    margin: 0;
}

.prod-master__help-list[b-m02bbgr401] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.7rem;
    color: var(--shell-text-primary);
}

.prod-master__help-list li[b-m02bbgr401] {
    padding-left: 0.15rem;
}

.prod-master__help-dock[b-m02bbgr401] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 100%;
}

.prod-master__help-dock-label[b-m02bbgr401] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.prod-master__help-toggle[b-m02bbgr401] {
    min-width: 0;
}

.prod-master__panel--docked .prod-master__help-toggle[b-m02bbgr401] {
    width: 100%;
}

.prod-master__busy-overlay[b-m02bbgr401] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 1.5rem;
    background: rgba(10, 16, 28, 0.28);
    backdrop-filter: blur(4px);
    z-index: 6;
}

.prod-master__busy-indicator[b-m02bbgr401] {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
}

.prod-master-dialog__content[b-m02bbgr401] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.prod-master-dialog__muted[b-m02bbgr401] {
    color: var(--shell-text-secondary);
}

.prod-master-dialog__search[b-m02bbgr401] {
    width: 100%;
}

.prod-master-dialog__state[b-m02bbgr401] {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 1rem;
    border: 1px dashed var(--shell-border-strong);
    border-radius: 1rem;
    color: var(--shell-text-secondary);
}

.prod-master-dialog__actions[b-m02bbgr401] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

[b-m02bbgr401] .prod-master__toolbar-button.e-btn {
    border-radius: 0.95rem;
}

[b-m02bbgr401] .prod-master-dialog__grid {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--shell-border);
    background: var(--shell-panel-background-soft);
}

[b-m02bbgr401] .prod-master__help-accordion .e-acrdn-item {
    border: 1px solid var(--shell-border);
    border-radius: 1rem;
    background: var(--shell-item-background-subtle);
    overflow: hidden;
}

[b-m02bbgr401] .prod-master__help-accordion .e-acrdn-item + .e-acrdn-item {
    margin-top: 0.75rem;
}

[b-m02bbgr401] .prod-master__help-accordion .e-acrdn-header {
    min-height: auto;
}

[b-m02bbgr401] .prod-master__help-accordion .e-acrdn-header .e-acrdn-header-content {
    padding: 0.9rem 1rem;
    color: var(--shell-text-primary);
    font-weight: 700;
}

[b-m02bbgr401] .prod-master__help-accordion .e-acrdn-content {
    padding: 0 1rem 1rem;
    color: var(--shell-text-primary);
    background: transparent;
}

[b-m02bbgr401] .prod-master__help-accordion .e-toggle-icon {
    color: var(--shell-text-secondary);
}

[b-m02bbgr401] .prod-master-dialog__grid .e-gridheader,
[b-m02bbgr401] .prod-master-dialog__grid .e-headercontent,
[b-m02bbgr401] .prod-master-dialog__grid .e-gridcontent,
[b-m02bbgr401] .prod-master-dialog__grid .e-content,
[b-m02bbgr401] .prod-master-dialog__grid .e-table {
    background: transparent;
}

[b-m02bbgr401] .prod-master-dialog__grid .e-headercell,
[b-m02bbgr401] .prod-master-dialog__grid .e-rowcell,
[b-m02bbgr401] .prod-master-dialog__grid .e-row:hover .e-rowcell,
[b-m02bbgr401] .prod-master-dialog__grid .e-selectionbackground .e-rowcell {
    color: var(--shell-text-primary);
}

[b-m02bbgr401] .prod-master-dialog__grid .e-gridpager,
[b-m02bbgr401] .prod-master-dialog__grid .e-gridpager .e-pagercontainer {
    background: transparent;
}

[b-m02bbgr401] .danger-action.e-btn {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
}

[b-m02bbgr401] .danger-action.e-btn:hover,
[b-m02bbgr401] .danger-action.e-btn:focus {
    background: #d64238;
    border-color: #d64238;
    color: #fff;
}

[b-m02bbgr401] .danger-action--disabled.e-btn,
[b-m02bbgr401] .danger-action--disabled.e-btn.e-disabled,
[b-m02bbgr401] .danger-action--disabled.e-btn:disabled,
[b-m02bbgr401] .danger-action.e-btn.e-disabled,
[b-m02bbgr401] .danger-action.e-btn:disabled {
    background: var(--shell-item-background-subtle) !important;
    border-color: var(--shell-border) !important;
    color: var(--shell-text-secondary) !important;
    opacity: 0.7;
    box-shadow: none;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .prod-master__content[b-m02bbgr401],
    .prod-master__content--help-docked[b-m02bbgr401] {
        grid-template-columns: 1fr;
    }

    .prod-master__panel--docked[b-m02bbgr401] {
        min-height: auto;
    }

    .prod-master__help-dock[b-m02bbgr401] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: auto;
    }

    .prod-master__help-dock-label[b-m02bbgr401] {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

@media (max-width: 760px) {
    .prod-master__header[b-m02bbgr401] {
        flex-direction: column;
    }

    .prod-master__header-meta[b-m02bbgr401] {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: 100%;
    }

    .prod-master__grid[b-m02bbgr401] {
        grid-template-columns: 1fr;
    }

    .prod-master__input--wide[b-m02bbgr401] {
        grid-column: auto;
    }

    .prod-master__toolbar[b-m02bbgr401] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .prod-master__toolbar[b-m02bbgr401] {
        grid-template-columns: 1fr;
    }

    .prod-master__header h1[b-m02bbgr401],
    .prod-master__panel-head h2[b-m02bbgr401] {
        font-size: 1.4rem;
    }
}

/* ── Product master: tabs, switches, price grid (Phase 1+2) ── */
[b-m02bbgr401] .prod-master__tabs { margin-top: 0.5rem; }
[b-m02bbgr401] .prod-master__switch {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; padding: 0.4rem 0.6rem;
    border: 1px solid var(--shell-input-border); border-radius: 0.5rem;
}
[b-m02bbgr401] .prod-master__switch label { font-size: 0.85rem; color: var(--shell-input-text-muted); }
[b-m02bbgr401] .prod-master__price-grid { margin-top: 1rem; }
[b-m02bbgr401] .prod-master__price-grid h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
[b-m02bbgr401] .prod-master__muted { color: var(--shell-input-text-muted); font-size: 0.85rem; }
[b-m02bbgr401] .prod-master__price-table { width: 100%; border-collapse: collapse; }
[b-m02bbgr401] .prod-master__price-table th,
[b-m02bbgr401] .prod-master__price-table td { padding: 0.35rem 0.5rem; text-align: left; border-bottom: 1px solid rgba(128,128,128,.2); }
[b-m02bbgr401] .prod-master__price-table th { font-size: 0.8rem; color: var(--shell-input-text-muted); font-weight: 600; }
[b-m02bbgr401] .prod-master__price-table td:nth-child(2),
[b-m02bbgr401] .prod-master__price-table td:nth-child(3) { width: 140px; }

[b-m02bbgr401] .prod-master__price-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
[b-m02bbgr401] .prod-master__price-head h3 { margin: 0; }

/* General tab: fields stacked first, the product image centered at the bottom. */
.prod-master__general-layout[b-m02bbgr401] { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.prod-master__general-main[b-m02bbgr401] { min-width: 0; }
.prod-master__general-image[b-m02bbgr401] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    justify-self: center;
    width: 220px;
    padding-top: 0.5rem;
    border-top: 1px solid var(--shell-border);
}
[b-m02bbgr401] .prod-master__image-tab { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
[b-m02bbgr401] .prod-master__image-preview {
    width: 220px; height: 220px; border: 1px dashed rgba(128,128,128,.4); border-radius: 0.5rem;
    display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(128,128,128,.05);
}
[b-m02bbgr401] .prod-master__image-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
[b-m02bbgr401] .prod-master__image-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
[b-m02bbgr401] .prod-master__upload { cursor: pointer; padding: 0.45rem 0.9rem; border-radius: 0.4rem; display: inline-flex; align-items: center; }

/* Lookup fields whose "create the master" action lives in the combo's own
   popup footer. The wrapper stays — its id is the focus-restore target after a
   create dialog closes — but the combo now takes the full column width, since
   there is no longer a "+" button beside it. */
[b-m02bbgr401] .prod-master__create-field { display: flex; align-items: flex-end; }
[b-m02bbgr401] .prod-master__create-field .prod-master__input { flex: 1 1 auto; min-width: 0; }

/* Right-align numeric inputs (scalar numeric fields + price grid cells). */
[b-m02bbgr401] .prod-master__input--num input,
[b-m02bbgr401] .prod-master__input--num .e-input { text-align: right; }
[b-m02bbgr401] .prod-master__price-table td .e-input { text-align: right; }
/* First column holds the account/name combobox — keep its text left-aligned
   even though the blanket rule above right-aligns numeric cells. */
[b-m02bbgr401] .prod-master__price-table td:first-child .e-input { text-align: left; }

/* Two-pane body: the form on the left, a fixed action pane on the right.
   `.master-body` (global) supplies flex:1 + overflow:hidden and makes its
   direct <section>/<aside> children independent scroll surfaces; here we just
   lay them out in a row. */
.prod-master__body[b-m02bbgr401] { display: flex; gap: 1rem; }
.prod-master__body-form[b-m02bbgr401] { flex: 1 1 auto; min-width: 0; }
.prod-master__action-pane[b-m02bbgr401] {
    flex: 0 0 230px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    align-self: flex-start;
    max-height: 100%;
}
.prod-master__action-pane-title[b-m02bbgr401] {
    margin: 0 0 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}
.prod-master__action-btn[b-m02bbgr401] { width: 100%; }

/* ── Help / User Guide panel (dockable, same pattern as Item Group) ── */
.prod-master__help[b-m02bbgr401] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    align-self: stretch;
    max-height: 100%;
    overflow: auto;
    color: var(--shell-text-primary);
}
.prod-master__help--docked[b-m02bbgr401] {
    flex: 0 0 64px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.prod-master__help-dock[b-m02bbgr401] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    min-height: 100%;
}
.prod-master__help-dock-label[b-m02bbgr401] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}
.prod-master__help-toggle[b-m02bbgr401] { min-width: 0; }
.prod-master__help--docked .prod-master__help-toggle[b-m02bbgr401] { width: 100%; }
.prod-master__help-intro[b-m02bbgr401] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}
.prod-master__help-accordion[b-m02bbgr401] { width: 100%; }
.prod-master__help-content[b-m02bbgr401] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    color: var(--shell-text-primary);
    line-height: 1.6;
}
.prod-master__help-content p[b-m02bbgr401] { margin: 0; }
.prod-master__help-list[b-m02bbgr401] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.6rem;
}
.prod-master__help-list li[b-m02bbgr401] { padding-left: 0.15rem; }
[b-m02bbgr401] .prod-master__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .prod-master__body[b-m02bbgr401] { flex-direction: column; }
    .prod-master__action-pane[b-m02bbgr401] { flex: 0 0 auto; }
    .prod-master__help[b-m02bbgr401],
    .prod-master__help--docked[b-m02bbgr401] { flex: 0 0 auto; width: 100%; overflow: visible; }
    .prod-master__help-dock[b-m02bbgr401] { flex-direction: row; }
    .prod-master__help-dock-label[b-m02bbgr401] { writing-mode: horizontal-tb; transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MODERN UI LAYER — pilot for the app-wide refresh (this page only).
   Appended so it overrides the rules above at equal specificity and can be
   rolled back by deleting this block. Everything keys off the shell variables,
   so the theme families keep working.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens (page-local) ── */
.prod-master[b-m02bbgr401] {
    --pm-radius-lg: 1.25rem;   /* hero, panels   */
    --pm-radius:    0.85rem;   /* cards, buttons */
    --pm-radius-sm: 0.6rem;    /* inputs, chips  */
    --pm-accent: var(--shell-button-primary, #0d6efd);
    --pm-ring: color-mix(in srgb, var(--pm-accent) 22%, transparent);
    --pm-surface: var(--shell-surface-background, rgba(255, 255, 255, 0.9));
    --pm-ease: cubic-bezier(0.2, 0, 0, 1);
    --pm-speed: 150ms;
}

/* One motion language for everything interactive. */
.prod-master[b-m02bbgr401]  .e-btn,
.prod-master .prod-master__meta-card[b-m02bbgr401],
.prod-master[b-m02bbgr401]  .prod-master__switch,
.prod-master[b-m02bbgr401]  .app-textbox {
    transition: background-color var(--pm-speed) var(--pm-ease),
                border-color     var(--pm-speed) var(--pm-ease),
                box-shadow       var(--pm-speed) var(--pm-ease),
                transform        var(--pm-speed) var(--pm-ease);
}

@media (prefers-reduced-motion: reduce) {
    .prod-master[b-m02bbgr401]  * { transition: none !important; }
}

/* ── Hero header: tighter, layered, with a top light-edge ── */
.prod-master__header[b-m02bbgr401] {
    position: relative;
    overflow: hidden;
    padding: 1.15rem 1.35rem;
    border: none;
    border-radius: var(--pm-radius-lg);
    box-shadow: 0 12px 32px rgba(13, 41, 98, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.prod-master__header[b-m02bbgr401]::after {
    /* Soft highlight sweep in the corner — depth without an image. */
    content: "";
    position: absolute;
    inset: -40% -10% auto auto;
    width: 55%;
    height: 160%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), transparent);
    pointer-events: none;
}

.prod-master__header h1[b-m02bbgr401] {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.prod-master__header p[b-m02bbgr401] { font-size: 0.9rem; }

/* Meta cards as frosted stat chips. */
.prod-master__meta-card[b-m02bbgr401] {
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--pm-radius);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.prod-master__meta-card:hover[b-m02bbgr401] { transform: translateY(-1px); }
.prod-master__meta-card strong[b-m02bbgr401] { font-size: 1.25rem; font-weight: 700; }
.prod-master__meta-card span[b-m02bbgr401] { opacity: 0.85; }

/* ── Toolbar: a floating glass bar with pill buttons ── */
.prod-master__toolbar[b-m02bbgr401] {
    gap: 0.5rem;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--shell-border);
    border-radius: var(--pm-radius);
    background: color-mix(in srgb, var(--pm-surface) 86%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(13, 41, 98, 0.08);
}

[b-m02bbgr401] .prod-master__toolbar-button.e-btn {
    min-width: 0;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.2;
    box-shadow: none;
}

[b-m02bbgr401] .prod-master__toolbar-button.e-btn .e-btn-icon {
    font-size: 0.9rem;
    margin-right: 0.45rem;
}

/* Secondary = quiet ghost; colour arrives on hover. */
[b-m02bbgr401] .prod-master__toolbar-button.secondary-action.e-btn {
    background: transparent;
    border: 1px solid var(--shell-border-strong);
    color: var(--shell-text-primary);
}

[b-m02bbgr401] .prod-master__toolbar-button.secondary-action.e-btn:hover:not(:disabled):not(.e-disabled) {
    background: color-mix(in srgb, var(--pm-accent) 8%, transparent);
    border-color: var(--pm-accent);
    color: var(--pm-accent);
    transform: translateY(-1px);
}

/* Primary = gradient pill with lift. */
[b-m02bbgr401] .prod-master__toolbar-button.primary-action.e-btn {
    background: linear-gradient(135deg, var(--pm-accent) 0%, var(--shell-button-primary-hover, #0b5ed7) 100%);
    border: none;
    color: #fff;
    box-shadow: 0 6px 16px var(--pm-ring);
}

[b-m02bbgr401] .prod-master__toolbar-button.primary-action.e-btn:hover:not(:disabled):not(.e-disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px var(--pm-ring);
}

/* Danger keeps its meaning; same pill geometry (colour rules further up). */
[b-m02bbgr401] .danger-action.e-btn { border-radius: 999px; }

/* Keyboard focus is part of the design, not an afterthought. */
[b-m02bbgr401] .prod-master__toolbar-button.e-btn:focus-visible,
.prod-master[b-m02bbgr401]  .e-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--pm-ring);
}

[b-m02bbgr401] .prod-master__toolbar-button.e-btn:disabled,
[b-m02bbgr401] .prod-master__toolbar-button.e-btn.e-disabled {
    opacity: 0.45;
    transform: none;
    box-shadow: none;
}

/* ── Panels: clean cards with an accent section head ── */
.prod-master__panel[b-m02bbgr401] {
    border-radius: var(--pm-radius-lg);
    border: 1px solid var(--shell-border);
    background: var(--pm-surface);
    box-shadow: 0 2px 10px rgba(13, 41, 98, 0.05);
}

.prod-master__panel-head[b-m02bbgr401] {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--shell-border);
}

.prod-master__panel-head h2[b-m02bbgr401] {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.prod-master__panel-eyebrow[b-m02bbgr401] { color: var(--pm-accent); opacity: 1; }

/* Record badge as an accent chip. */
.prod-master__record-badge[b-m02bbgr401] {
    flex-direction: row;
    align-items: center;
    padding: 0.35rem 0.8rem;
    border: none;
    border-radius: 999px;
    background: var(--shell-pill-bg, #e7f0ff);
    color: var(--shell-pill-text, var(--pm-accent));
    letter-spacing: 0.06em;
}

/* ── Tabs: underline style instead of boxed headers ── */
[b-m02bbgr401] .prod-master__tabs .e-tab-header {
    background: transparent;
    border-bottom: 1px solid var(--shell-border);
}

[b-m02bbgr401] .prod-master__tabs .e-tab-header .e-toolbar-item .e-tab-wrap {
    padding: 0.55rem 1rem;
    border-radius: var(--pm-radius-sm) var(--pm-radius-sm) 0 0;
}

[b-m02bbgr401] .prod-master__tabs .e-tab-header .e-toolbar-item .e-tab-text {
    font-weight: 600;
    font-size: 0.86rem;
    text-transform: none;
    color: var(--shell-text-secondary);
}

[b-m02bbgr401] .prod-master__tabs .e-tab-header .e-toolbar-item:hover .e-tab-text {
    color: var(--shell-text-primary);
}

[b-m02bbgr401] .prod-master__tabs .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: var(--pm-accent);
    font-weight: 700;
}

[b-m02bbgr401] .prod-master__tabs .e-tab-header .e-indicator {
    background: var(--pm-accent);
    height: 3px;
    border-radius: 3px 3px 0 0;
}

/* ── Inputs: unified radius + focus ring ── */
.prod-master[b-m02bbgr401]  .app-textbox.e-input-group,
.prod-master[b-m02bbgr401]  .app-textbox.e-input-group.e-control-wrapper {
    border-radius: var(--pm-radius-sm) !important;
}

.prod-master[b-m02bbgr401]  .app-textbox.e-input-group.e-input-focus,
.prod-master[b-m02bbgr401]  .app-textbox.e-input-group.e-control-wrapper.e-input-focus {
    border-color: var(--pm-accent) !important;
    box-shadow: 0 0 0 3px var(--pm-ring) !important;
}

/* ── Switch rows: quiet until hovered ── */
[b-m02bbgr401] .prod-master__switch {
    border: 1px solid transparent;
    border-radius: var(--pm-radius-sm);
    background: var(--shell-item-background-subtle, rgba(13, 110, 253, 0.03));
}

[b-m02bbgr401] .prod-master__switch:hover {
    border-color: var(--shell-border);
    background: color-mix(in srgb, var(--pm-accent) 5%, transparent);
}

/* ── Price table: modern data table ── */
[b-m02bbgr401] .prod-master__price-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--shell-text-secondary);
    border-bottom: 2px solid var(--shell-border-strong);
}

[b-m02bbgr401] .prod-master__price-table td { border-bottom: 1px solid var(--shell-border); }
[b-m02bbgr401] .prod-master__price-table tbody tr:hover td {
    background: color-mix(in srgb, var(--pm-accent) 4%, transparent);
}

/* ── Action pane: card with dot-labelled title, ghost buttons ── */
.prod-master__action-pane[b-m02bbgr401] {
    border-radius: var(--pm-radius-lg);
    background: var(--pm-surface);
    box-shadow: 0 2px 10px rgba(13, 41, 98, 0.05);
}

.prod-master__action-pane-title[b-m02bbgr401] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
}

.prod-master__action-pane-title[b-m02bbgr401]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pm-accent);
}

[b-m02bbgr401] .prod-master__action-btn.e-btn {
    justify-content: flex-start;
    border-radius: var(--pm-radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--shell-text-primary);
    font-weight: 600;
    font-size: 0.84rem;
    padding: 0.5rem 0.7rem;
}

[b-m02bbgr401] .prod-master__action-btn.e-btn:hover:not(:disabled):not(.e-disabled) {
    background: color-mix(in srgb, var(--pm-accent) 8%, transparent);
    border-color: var(--shell-border);
    color: var(--pm-accent);
}

/* ── Help panel: match the card language ── */
.prod-master__help[b-m02bbgr401] {
    border-radius: var(--pm-radius-lg);
    background: var(--pm-surface);
    box-shadow: 0 2px 10px rgba(13, 41, 98, 0.05);
}

[b-m02bbgr401] .prod-master__help-accordion .e-acrdn-item {
    border-radius: var(--pm-radius);
    border-color: var(--shell-border);
}

/* ── Slim scrollbars inside this page's scroll surfaces ── */
.prod-master[b-m02bbgr401]  *::-webkit-scrollbar { width: 8px; height: 8px; }
.prod-master[b-m02bbgr401]  *::-webkit-scrollbar-track { background: transparent; }
.prod-master[b-m02bbgr401]  *::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--pm-accent) 25%, transparent);
    border-radius: 999px;
}
.prod-master[b-m02bbgr401]  *::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--pm-accent) 45%, transparent);
}
/* /Pages/Masters/Inventory/ProductParameterMaster.razor.rz.scp.css */
/* Product parameters — allocation grid page. */
.ipm-page__body[b-96ic73fn89] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.ipm-page__form[b-96ic73fn89] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Search sits in the toolbar and takes the leftover width. */
.ipm-page__search[b-96ic73fn89] {
    flex: 1 1 240px;
    min-width: 200px;
    max-width: 420px;
}

/* Native cell editor — so F5 saves the cell being typed. */
.ipm-cell[b-96ic73fn89] {
    width: 100%;
    font: inherit;
    /* Same height as the Syncfusion in-cell editors (Bootstrap 5.3 control
       height), so native inputs and combo cells sit level in a row. */
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.5rem;
    line-height: 1.5;
    border: 1px solid #c7d2e8;
    border-radius: 3px;
    background: #fff;
}

.ipm-page__count[b-96ic73fn89] {
    font-weight: 600;
    white-space: nowrap;
}

/* Icon-only per-row remove button — square, sits inside the row without
   stretching it. Syncfusion pads a normal button for a text label; there is
   no label here, so that padding is taken back. */
[b-96ic73fn89] .ipm-rowbtn {
    min-width: 0;
    padding: 0.15rem 0.35rem;
    line-height: 1;
}

[b-96ic73fn89] .ipm-rowbtn .e-btn-icon {
    margin: 0;
    font-size: 0.95rem;
}

/* ════════════════════════════════════════════════════════════════════════
   Help / User Guide panel.
   Blazor scoped CSS is per component: these ct-page__* rules live in each
   page that uses the panel, because a copy in another page's .razor.css
   never matches this page's elements. Without them the aside renders with
   no width at all and vanishes beside the 100%-wide grid.
   ════════════════════════════════════════════════════════════════════════ */
.ct-page__help[b-96ic73fn89] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    align-self: stretch;
    max-height: 100%;
    overflow: auto;
    color: var(--shell-text-primary);
}

.ct-page__help--docked[b-96ic73fn89] {
    flex: 0 0 64px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}

.ct-page__help-dock[b-96ic73fn89] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    min-height: 100%;
}

.ct-page__help-dock-label[b-96ic73fn89] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

/* ::deep — the toggle and the accordion are Syncfusion components, so the
   scope attribute lands on the wrapper, not on the element these rules
   target. */
[b-96ic73fn89] .ct-page__help-toggle { min-width: 0; }
.ct-page__help--docked[b-96ic73fn89]  .ct-page__help-toggle { width: 100%; }
[b-96ic73fn89] .ct-page__help-accordion { width: 100%; }

.ct-page__panel-head[b-96ic73fn89] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.ct-page__panel-eyebrow[b-96ic73fn89] {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.ct-page__help-intro[b-96ic73fn89] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}

.ct-page__help-content[b-96ic73fn89] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    color: var(--shell-text-primary);
    line-height: 1.6;
}

.ct-page__help-content p[b-96ic73fn89] { margin: 0; }

.ct-page__help-list[b-96ic73fn89] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.6rem;
}

.ct-page__help-list li[b-96ic73fn89] { padding-left: 0.15rem; }

/* Right-align numeric cells (app-wide convention). */
.ipm-cell--num[b-96ic73fn89] {
    text-align: right;
}

/* Native select cells — the browser's own dropdown, skinned like the text
   cells. Replaced the per-row Syncfusion combos: four of those per row made
   a long list slow to render and slower to group. */
select.ipm-cell[b-96ic73fn89] {
    appearance: auto;
}

/* Multiline cells (Selection Values, Calculation Formula) — long CSVs and
   formulas wrap instead of hiding past the first line; drag to grow. */
.ipm-cell--area[b-96ic73fn89] {
    resize: vertical;
    min-height: calc(3em + 0.75rem + 2px);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ipm-cell:disabled[b-96ic73fn89] {
    background: transparent;
    border-color: transparent;
    color: inherit;
    resize: none;
}

/* Group caption without the field name. */
.ipm-groupcap[b-96ic73fn89] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
}

.ipm-groupcap__key[b-96ic73fn89] { font-weight: 600; }
.ipm-groupcap__count[b-96ic73fn89] { font-size: 0.78rem; opacity: 0.7; }

/* Compact in-cell button (the popup-query editor launcher). */
[b-96ic73fn89] .ipm-cellbtn {
    min-width: 0;
    padding: 0.15rem 0.5rem;
    line-height: 1.2;
    font-size: 0.78rem;
}

/* Popup-query editor — monospaced, because the value is XML. */
.ipm-sql-editor[b-96ic73fn89] {
    width: 100%;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-size: 0.82rem;
    line-height: 1.45;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.4rem;
    resize: vertical;
}
/* /Pages/Masters/Inventory/ProductStyleMaster.razor.rz.scp.css */
.pstyle-master[b-vr7vr2n6sk] {
    position: relative;
    display: block;
}

.pstyle-master__shell[b-vr7vr2n6sk] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.pstyle-master__header[b-vr7vr2n6sk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-hero-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-inverse);
}

.pstyle-master__eyebrow[b-vr7vr2n6sk],
.pstyle-master__panel-eyebrow[b-vr7vr2n6sk] {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
}

.pstyle-master__header h1[b-vr7vr2n6sk],
.pstyle-master__panel-head h2[b-vr7vr2n6sk] {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.1;
}

.pstyle-master__header p[b-vr7vr2n6sk] {
    margin: 0.55rem 0 0;
    max-width: 48rem;
    color: var(--shell-text-muted-inverse);
}

.pstyle-master__header-meta[b-vr7vr2n6sk] {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 0.75rem;
    width: min(100%, 260px);
}

.pstyle-master__meta-card[b-vr7vr2n6sk],
.pstyle-master__record-badge[b-vr7vr2n6sk] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--shell-text-inverse);
}

.pstyle-master__meta-card span[b-vr7vr2n6sk],
.pstyle-master__record-badge[b-vr7vr2n6sk] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pstyle-master__meta-card strong[b-vr7vr2n6sk] {
    font-size: 1.1rem;
}

.pstyle-master__message[b-vr7vr2n6sk] {
    width: 100%;
}

.pstyle-master__toolbar[b-vr7vr2n6sk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pstyle-master__toolbar-button[b-vr7vr2n6sk] {
    min-width: 130px;
}

.pstyle-master__content[b-vr7vr2n6sk] {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.pstyle-master__content--help-docked[b-vr7vr2n6sk] {
    grid-template-columns: minmax(0, 1fr) 88px;
}

.pstyle-master__panel[b-vr7vr2n6sk] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-primary);
}

.pstyle-master__panel--summary[b-vr7vr2n6sk] {
    background: var(--shell-panel-background-soft);
}

.pstyle-master__panel--docked[b-vr7vr2n6sk] {
    padding: 0.9rem 0.55rem;
}

.pstyle-master__panel-head[b-vr7vr2n6sk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.pstyle-master__grid[b-vr7vr2n6sk] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.pstyle-master__input[b-vr7vr2n6sk] {
    width: 100%;
}

.pstyle-master__input--wide[b-vr7vr2n6sk] {
    grid-column: 1 / -1;
}

.pstyle-master__help-intro[b-vr7vr2n6sk] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}

.pstyle-master__help-accordion[b-vr7vr2n6sk] {
    width: 100%;
}

.pstyle-master__help-content[b-vr7vr2n6sk] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--shell-text-primary);
    line-height: 1.65;
}

.pstyle-master__help-content p[b-vr7vr2n6sk] {
    margin: 0;
}

.pstyle-master__help-list[b-vr7vr2n6sk] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.7rem;
    color: var(--shell-text-primary);
}

.pstyle-master__help-list li[b-vr7vr2n6sk] {
    padding-left: 0.15rem;
}

.pstyle-master__help-dock[b-vr7vr2n6sk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 100%;
}

.pstyle-master__help-dock-label[b-vr7vr2n6sk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.pstyle-master__help-toggle[b-vr7vr2n6sk] {
    min-width: 0;
}

.pstyle-master__panel--docked .pstyle-master__help-toggle[b-vr7vr2n6sk] {
    width: 100%;
}

.pstyle-master__busy-overlay[b-vr7vr2n6sk] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 1.5rem;
    background: rgba(10, 16, 28, 0.28);
    backdrop-filter: blur(4px);
    z-index: 6;
}

.pstyle-master__busy-indicator[b-vr7vr2n6sk] {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
}

.pstyle-master-dialog__content[b-vr7vr2n6sk] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pstyle-master-dialog__muted[b-vr7vr2n6sk] {
    color: var(--shell-text-secondary);
}

.pstyle-master-dialog__search[b-vr7vr2n6sk] {
    width: 100%;
}

.pstyle-master-dialog__state[b-vr7vr2n6sk] {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 1rem;
    border: 1px dashed var(--shell-border-strong);
    border-radius: 1rem;
    color: var(--shell-text-secondary);
}

.pstyle-master-dialog__actions[b-vr7vr2n6sk] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

[b-vr7vr2n6sk] .pstyle-master__toolbar-button.e-btn {
    border-radius: 0.95rem;
}

[b-vr7vr2n6sk] .pstyle-master-dialog__grid {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--shell-border);
    background: var(--shell-panel-background-soft);
}

[b-vr7vr2n6sk] .pstyle-master__help-accordion .e-acrdn-item {
    border: 1px solid var(--shell-border);
    border-radius: 1rem;
    background: var(--shell-item-background-subtle);
    overflow: hidden;
}

[b-vr7vr2n6sk] .pstyle-master__help-accordion .e-acrdn-item + .e-acrdn-item {
    margin-top: 0.75rem;
}

[b-vr7vr2n6sk] .pstyle-master__help-accordion .e-acrdn-header {
    min-height: auto;
}

[b-vr7vr2n6sk] .pstyle-master__help-accordion .e-acrdn-header .e-acrdn-header-content {
    padding: 0.9rem 1rem;
    color: var(--shell-text-primary);
    font-weight: 700;
}

[b-vr7vr2n6sk] .pstyle-master__help-accordion .e-acrdn-content {
    padding: 0 1rem 1rem;
    color: var(--shell-text-primary);
    background: transparent;
}

[b-vr7vr2n6sk] .pstyle-master__help-accordion .e-toggle-icon {
    color: var(--shell-text-secondary);
}

[b-vr7vr2n6sk] .pstyle-master-dialog__grid .e-gridheader,
[b-vr7vr2n6sk] .pstyle-master-dialog__grid .e-headercontent,
[b-vr7vr2n6sk] .pstyle-master-dialog__grid .e-gridcontent,
[b-vr7vr2n6sk] .pstyle-master-dialog__grid .e-content,
[b-vr7vr2n6sk] .pstyle-master-dialog__grid .e-table {
    background: transparent;
}

[b-vr7vr2n6sk] .pstyle-master-dialog__grid .e-headercell,
[b-vr7vr2n6sk] .pstyle-master-dialog__grid .e-rowcell,
[b-vr7vr2n6sk] .pstyle-master-dialog__grid .e-row:hover .e-rowcell,
[b-vr7vr2n6sk] .pstyle-master-dialog__grid .e-selectionbackground .e-rowcell {
    color: var(--shell-text-primary);
}

[b-vr7vr2n6sk] .pstyle-master-dialog__grid .e-gridpager,
[b-vr7vr2n6sk] .pstyle-master-dialog__grid .e-gridpager .e-pagercontainer {
    background: transparent;
}

[b-vr7vr2n6sk] .danger-action.e-btn {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
}

[b-vr7vr2n6sk] .danger-action.e-btn:hover,
[b-vr7vr2n6sk] .danger-action.e-btn:focus {
    background: #d64238;
    border-color: #d64238;
    color: #fff;
}

[b-vr7vr2n6sk] .danger-action--disabled.e-btn,
[b-vr7vr2n6sk] .danger-action--disabled.e-btn.e-disabled,
[b-vr7vr2n6sk] .danger-action--disabled.e-btn:disabled,
[b-vr7vr2n6sk] .danger-action.e-btn.e-disabled,
[b-vr7vr2n6sk] .danger-action.e-btn:disabled {
    background: var(--shell-item-background-subtle) !important;
    border-color: var(--shell-border) !important;
    color: var(--shell-text-secondary) !important;
    opacity: 0.7;
    box-shadow: none;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .pstyle-master__content[b-vr7vr2n6sk],
    .pstyle-master__content--help-docked[b-vr7vr2n6sk] {
        grid-template-columns: 1fr;
    }

    .pstyle-master__panel--docked[b-vr7vr2n6sk] {
        min-height: auto;
    }

    .pstyle-master__help-dock[b-vr7vr2n6sk] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: auto;
    }

    .pstyle-master__help-dock-label[b-vr7vr2n6sk] {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

@media (max-width: 760px) {
    .pstyle-master__header[b-vr7vr2n6sk] {
        flex-direction: column;
    }

    .pstyle-master__header-meta[b-vr7vr2n6sk] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .pstyle-master__grid[b-vr7vr2n6sk] {
        grid-template-columns: 1fr;
    }

    .pstyle-master__input--wide[b-vr7vr2n6sk] {
        grid-column: auto;
    }

    .pstyle-master__toolbar[b-vr7vr2n6sk] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .pstyle-master__toolbar[b-vr7vr2n6sk] {
        grid-template-columns: 1fr;
    }

    .pstyle-master__header h1[b-vr7vr2n6sk],
    .pstyle-master__panel-head h2[b-vr7vr2n6sk] {
        font-size: 1.4rem;
    }
}
/* /Pages/Masters/Inventory/ProductUserAllocationPage.razor.rz.scp.css */
/* Product Allocation to Users — page + allocate dialog. */
.pua-page__body[b-4qibtf0068] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.pua-page__form[b-4qibtf0068] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
    overflow-x: hidden;
}

/* User picker + its note. */
.pua-page__pick[b-4qibtf0068] {
    display: grid;
    grid-template-columns: minmax(260px, 420px) 1fr;
    gap: 0.75rem;
    align-items: start;
}

.pua-page__gridhead[b-4qibtf0068] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.82rem;
}

.pua-page__gridhead label[b-4qibtf0068] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

/* Allocate dialog. */
.pua-alloc[b-4qibtf0068] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    height: 100%;
    min-height: 0;
}

.pua-alloc__tools[b-4qibtf0068] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pua-alloc__tools label[b-4qibtf0068] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.pua-alloc__tablewrap[b-4qibtf0068] {
    flex: 1 1 auto;
    min-height: 240px;
    overflow: auto;
    border: 1px solid #dbe2ee;
    border-radius: 4px;
}

@media (max-width: 900px) {
    .pua-page__pick[b-4qibtf0068] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Masters/Inventory/RackMaster.razor.rz.scp.css */
.rack-master[b-m7z1qqigbb] {
    position: relative;
    display: block;
}

.rack-master__shell[b-m7z1qqigbb] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.rack-master__header[b-m7z1qqigbb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-hero-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-inverse);
}

.rack-master__eyebrow[b-m7z1qqigbb],
.rack-master__panel-eyebrow[b-m7z1qqigbb] {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
}

.rack-master__header h1[b-m7z1qqigbb],
.rack-master__panel-head h2[b-m7z1qqigbb] {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.1;
}

.rack-master__header p[b-m7z1qqigbb] {
    margin: 0.55rem 0 0;
    max-width: 48rem;
    color: var(--shell-text-muted-inverse);
}

.rack-master__header-meta[b-m7z1qqigbb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 0.75rem;
    width: min(100%, 260px);
}

.rack-master__meta-card[b-m7z1qqigbb],
.rack-master__record-badge[b-m7z1qqigbb] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--shell-text-inverse);
}

.rack-master__meta-card span[b-m7z1qqigbb],
.rack-master__record-badge[b-m7z1qqigbb] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.rack-master__meta-card strong[b-m7z1qqigbb] {
    font-size: 1.1rem;
}

.rack-master__message[b-m7z1qqigbb] {
    width: 100%;
}

.rack-master__toolbar[b-m7z1qqigbb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.rack-master__toolbar-button[b-m7z1qqigbb] {
    min-width: 130px;
}

.rack-master__content[b-m7z1qqigbb] {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.rack-master__content--help-docked[b-m7z1qqigbb] {
    grid-template-columns: minmax(0, 1fr) 88px;
}

.rack-master__panel[b-m7z1qqigbb] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-primary);
}

.rack-master__panel--summary[b-m7z1qqigbb] {
    background: var(--shell-panel-background-soft);
}

.rack-master__panel--docked[b-m7z1qqigbb] {
    padding: 0.9rem 0.55rem;
}

.rack-master__panel-head[b-m7z1qqigbb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.rack-master__grid[b-m7z1qqigbb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.rack-master__input[b-m7z1qqigbb] {
    width: 100%;
}

.rack-master__input--wide[b-m7z1qqigbb] {
    grid-column: 1 / -1;
}

.rack-master__help-intro[b-m7z1qqigbb] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}

.rack-master__help-accordion[b-m7z1qqigbb] {
    width: 100%;
}

.rack-master__help-content[b-m7z1qqigbb] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--shell-text-primary);
    line-height: 1.65;
}

.rack-master__help-content p[b-m7z1qqigbb] {
    margin: 0;
}

.rack-master__help-list[b-m7z1qqigbb] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.7rem;
    color: var(--shell-text-primary);
}

.rack-master__help-list li[b-m7z1qqigbb] {
    padding-left: 0.15rem;
}

.rack-master__help-dock[b-m7z1qqigbb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 100%;
}

.rack-master__help-dock-label[b-m7z1qqigbb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.rack-master__help-toggle[b-m7z1qqigbb] {
    min-width: 0;
}

.rack-master__panel--docked .rack-master__help-toggle[b-m7z1qqigbb] {
    width: 100%;
}

.rack-master__busy-overlay[b-m7z1qqigbb] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 1.5rem;
    background: rgba(10, 16, 28, 0.28);
    backdrop-filter: blur(4px);
    z-index: 6;
}

.rack-master__busy-indicator[b-m7z1qqigbb] {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
}

.rack-master-dialog__content[b-m7z1qqigbb] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rack-master-dialog__muted[b-m7z1qqigbb] {
    color: var(--shell-text-secondary);
}

.rack-master-dialog__search[b-m7z1qqigbb] {
    width: 100%;
}

.rack-master-dialog__state[b-m7z1qqigbb] {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 1rem;
    border: 1px dashed var(--shell-border-strong);
    border-radius: 1rem;
    color: var(--shell-text-secondary);
}

.rack-master-dialog__actions[b-m7z1qqigbb] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

[b-m7z1qqigbb] .rack-master__toolbar-button.e-btn {
    border-radius: 0.95rem;
}

[b-m7z1qqigbb] .rack-master-dialog__grid {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--shell-border);
    background: var(--shell-panel-background-soft);
}

[b-m7z1qqigbb] .rack-master__help-accordion .e-acrdn-item {
    border: 1px solid var(--shell-border);
    border-radius: 1rem;
    background: var(--shell-item-background-subtle);
    overflow: hidden;
}

[b-m7z1qqigbb] .rack-master__help-accordion .e-acrdn-item + .e-acrdn-item {
    margin-top: 0.75rem;
}

[b-m7z1qqigbb] .rack-master__help-accordion .e-acrdn-header {
    min-height: auto;
}

[b-m7z1qqigbb] .rack-master__help-accordion .e-acrdn-header .e-acrdn-header-content {
    padding: 0.9rem 1rem;
    color: var(--shell-text-primary);
    font-weight: 700;
}

[b-m7z1qqigbb] .rack-master__help-accordion .e-acrdn-content {
    padding: 0 1rem 1rem;
    color: var(--shell-text-primary);
    background: transparent;
}

[b-m7z1qqigbb] .rack-master__help-accordion .e-toggle-icon {
    color: var(--shell-text-secondary);
}

[b-m7z1qqigbb] .rack-master-dialog__grid .e-gridheader,
[b-m7z1qqigbb] .rack-master-dialog__grid .e-headercontent,
[b-m7z1qqigbb] .rack-master-dialog__grid .e-gridcontent,
[b-m7z1qqigbb] .rack-master-dialog__grid .e-content,
[b-m7z1qqigbb] .rack-master-dialog__grid .e-table {
    background: transparent;
}

[b-m7z1qqigbb] .rack-master-dialog__grid .e-headercell,
[b-m7z1qqigbb] .rack-master-dialog__grid .e-rowcell,
[b-m7z1qqigbb] .rack-master-dialog__grid .e-row:hover .e-rowcell,
[b-m7z1qqigbb] .rack-master-dialog__grid .e-selectionbackground .e-rowcell {
    color: var(--shell-text-primary);
}

[b-m7z1qqigbb] .rack-master-dialog__grid .e-gridpager,
[b-m7z1qqigbb] .rack-master-dialog__grid .e-gridpager .e-pagercontainer {
    background: transparent;
}

[b-m7z1qqigbb] .danger-action.e-btn {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
}

[b-m7z1qqigbb] .danger-action.e-btn:hover,
[b-m7z1qqigbb] .danger-action.e-btn:focus {
    background: #d64238;
    border-color: #d64238;
    color: #fff;
}

[b-m7z1qqigbb] .danger-action--disabled.e-btn,
[b-m7z1qqigbb] .danger-action--disabled.e-btn.e-disabled,
[b-m7z1qqigbb] .danger-action--disabled.e-btn:disabled,
[b-m7z1qqigbb] .danger-action.e-btn.e-disabled,
[b-m7z1qqigbb] .danger-action.e-btn:disabled {
    background: var(--shell-item-background-subtle) !important;
    border-color: var(--shell-border) !important;
    color: var(--shell-text-secondary) !important;
    opacity: 0.7;
    box-shadow: none;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .rack-master__content[b-m7z1qqigbb],
    .rack-master__content--help-docked[b-m7z1qqigbb] {
        grid-template-columns: 1fr;
    }

    .rack-master__panel--docked[b-m7z1qqigbb] {
        min-height: auto;
    }

    .rack-master__help-dock[b-m7z1qqigbb] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: auto;
    }

    .rack-master__help-dock-label[b-m7z1qqigbb] {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

@media (max-width: 760px) {
    .rack-master__header[b-m7z1qqigbb] {
        flex-direction: column;
    }

    .rack-master__header-meta[b-m7z1qqigbb] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .rack-master__grid[b-m7z1qqigbb] {
        grid-template-columns: 1fr;
    }

    .rack-master__input--wide[b-m7z1qqigbb] {
        grid-column: auto;
    }

    .rack-master__toolbar[b-m7z1qqigbb] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .rack-master__toolbar[b-m7z1qqigbb] {
        grid-template-columns: 1fr;
    }

    .rack-master__header h1[b-m7z1qqigbb],
    .rack-master__panel-head h2[b-m7z1qqigbb] {
        font-size: 1.4rem;
    }
}

/* Structure tree sits under the record form. */
[b-m7z1qqigbb] .rack-master__tree-head {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: .9rem 0 .3rem;
}

[b-m7z1qqigbb] .rack-master__muted {
    font-size: .78rem;
    opacity: .7;
}
/* /Pages/Masters/Inventory/RackStockPage.razor.rz.scp.css */
/* Rack-wise stock — allocation grid page. */
.rst-page__body[b-yhachr16uz] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.rst-page__form[b-yhachr16uz] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Search sits in the toolbar and takes the leftover width. */
.rst-page__search[b-yhachr16uz] {
    flex: 1 1 240px;
    min-width: 200px;
    max-width: 420px;
}

/* Native numeric cell editor — so F5 saves the cell being typed. */
.rst-cell[b-yhachr16uz] {
    width: 100%;
    font: inherit;
    padding: 0.2rem 0.35rem;
    border: 1px solid #c7d2e8;
    border-radius: 3px;
    background: #fff;
}

.rst-cell--num[b-yhachr16uz] {
    text-align: right;
}

/* Footer aggregates. */
.rst-page__count[b-yhachr16uz] {
    font-weight: 600;
    white-space: nowrap;
}

/* Group caption without the field name. */
.rst-groupcap[b-yhachr16uz] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
}

.rst-groupcap__key[b-yhachr16uz] {
    font-weight: 600;
}

.rst-groupcap__count[b-yhachr16uz] {
    font-size: 0.78rem;
    opacity: 0.7;
}


/* Icon-only per-row remove button — square, sits inside the row without
   stretching it. Syncfusion pads a normal button for a text label; there is
   no label here, so that padding is taken back. */
[b-yhachr16uz] .rst-rowbtn {
    min-width: 0;
    padding: 0.15rem 0.35rem;
    line-height: 1;
}

[b-yhachr16uz] .rst-rowbtn .e-btn-icon {
    margin: 0;
    font-size: 0.95rem;
}

/* ════════════════════════════════════════════════════════════════════════
   Help / User Guide panel.
   Blazor scoped CSS is per component: these ct-page__* rules live in
   each page that uses the panel, because a copy in another page's
   .razor.css never matches this page's elements. Without them the aside
   renders with no width at all and vanishes beside the 100%-wide grid.
   ════════════════════════════════════════════════════════════════════ */
/* ── Help / User Guide panel (dockable) ── */
.ct-page__help[b-yhachr16uz] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    align-self: stretch;
    max-height: 100%;
    overflow: auto;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-yhachr16uz] {
    flex: 0 0 64px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-yhachr16uz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    min-height: 100%;
}
.ct-page__help-dock-label[b-yhachr16uz] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}
.ct-page__help-toggle[b-yhachr16uz] { min-width: 0; }
.ct-page__help--docked .ct-page__help-toggle[b-yhachr16uz] { width: 100%; }

.ct-page__panel-head[b-yhachr16uz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-yhachr16uz] {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}
.ct-page__help-intro[b-yhachr16uz] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}
.ct-page__help-accordion[b-yhachr16uz] { width: 100%; }
.ct-page__help-content[b-yhachr16uz] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    color: var(--shell-text-primary);
    line-height: 1.6;
}
.ct-page__help-content p[b-yhachr16uz] { margin: 0; }
.ct-page__help-list[b-yhachr16uz] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.6rem;
}
.ct-page__help-list li[b-yhachr16uz] { padding-left: 0.15rem; }
/* /Pages/Masters/Inventory/SerialNoMaster.razor.rz.scp.css */
.serial-master[b-9oo76h1pgm] {
    position: relative;
    display: block;
}

.serial-master__shell[b-9oo76h1pgm] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.serial-master__header[b-9oo76h1pgm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-hero-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-inverse);
}

.serial-master__eyebrow[b-9oo76h1pgm],
.serial-master__panel-eyebrow[b-9oo76h1pgm] {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
}

.serial-master__header h1[b-9oo76h1pgm],
.serial-master__panel-head h2[b-9oo76h1pgm] {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.1;
}

.serial-master__header p[b-9oo76h1pgm] {
    margin: 0.55rem 0 0;
    max-width: 48rem;
    color: var(--shell-text-muted-inverse);
}

.serial-master__header-meta[b-9oo76h1pgm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 0.75rem;
    width: min(100%, 260px);
}

.serial-master__meta-card[b-9oo76h1pgm],
.serial-master__record-badge[b-9oo76h1pgm] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--shell-text-inverse);
}

.serial-master__meta-card span[b-9oo76h1pgm],
.serial-master__record-badge[b-9oo76h1pgm] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.serial-master__meta-card strong[b-9oo76h1pgm] {
    font-size: 1.1rem;
}

.serial-master__message[b-9oo76h1pgm] {
    width: 100%;
}

.serial-master__toolbar[b-9oo76h1pgm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.serial-master__toolbar-button[b-9oo76h1pgm] {
    min-width: 130px;
}

.serial-master__content[b-9oo76h1pgm] {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.serial-master__content--help-docked[b-9oo76h1pgm] {
    grid-template-columns: minmax(0, 1fr) 88px;
}

.serial-master__panel[b-9oo76h1pgm] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-primary);
}

.serial-master__panel--summary[b-9oo76h1pgm] {
    background: var(--shell-panel-background-soft);
}

.serial-master__panel--docked[b-9oo76h1pgm] {
    padding: 0.9rem 0.55rem;
}

.serial-master__panel-head[b-9oo76h1pgm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.serial-master__grid[b-9oo76h1pgm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.serial-master__input[b-9oo76h1pgm] {
    width: 100%;
}

.serial-master__input--wide[b-9oo76h1pgm] {
    grid-column: 1 / -1;
}

.serial-master__help-intro[b-9oo76h1pgm] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}

.serial-master__help-accordion[b-9oo76h1pgm] {
    width: 100%;
}

.serial-master__help-content[b-9oo76h1pgm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--shell-text-primary);
    line-height: 1.65;
}

.serial-master__help-content p[b-9oo76h1pgm] {
    margin: 0;
}

.serial-master__help-list[b-9oo76h1pgm] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.7rem;
    color: var(--shell-text-primary);
}

.serial-master__help-list li[b-9oo76h1pgm] {
    padding-left: 0.15rem;
}

.serial-master__help-dock[b-9oo76h1pgm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 100%;
}

.serial-master__help-dock-label[b-9oo76h1pgm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.serial-master__help-toggle[b-9oo76h1pgm] {
    min-width: 0;
}

.serial-master__panel--docked .serial-master__help-toggle[b-9oo76h1pgm] {
    width: 100%;
}

.serial-master__busy-overlay[b-9oo76h1pgm] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 1.5rem;
    background: rgba(10, 16, 28, 0.28);
    backdrop-filter: blur(4px);
    z-index: 6;
}

.serial-master__busy-indicator[b-9oo76h1pgm] {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
}

.serial-master-dialog__content[b-9oo76h1pgm] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.serial-master-dialog__muted[b-9oo76h1pgm] {
    color: var(--shell-text-secondary);
}

.serial-master-dialog__search[b-9oo76h1pgm] {
    width: 100%;
}

.serial-master-dialog__state[b-9oo76h1pgm] {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 1rem;
    border: 1px dashed var(--shell-border-strong);
    border-radius: 1rem;
    color: var(--shell-text-secondary);
}

.serial-master-dialog__actions[b-9oo76h1pgm] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

[b-9oo76h1pgm] .serial-master__toolbar-button.e-btn {
    border-radius: 0.95rem;
}

[b-9oo76h1pgm] .serial-master-dialog__grid {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--shell-border);
    background: var(--shell-panel-background-soft);
}

[b-9oo76h1pgm] .serial-master__help-accordion .e-acrdn-item {
    border: 1px solid var(--shell-border);
    border-radius: 1rem;
    background: var(--shell-item-background-subtle);
    overflow: hidden;
}

[b-9oo76h1pgm] .serial-master__help-accordion .e-acrdn-item + .e-acrdn-item {
    margin-top: 0.75rem;
}

[b-9oo76h1pgm] .serial-master__help-accordion .e-acrdn-header {
    min-height: auto;
}

[b-9oo76h1pgm] .serial-master__help-accordion .e-acrdn-header .e-acrdn-header-content {
    padding: 0.9rem 1rem;
    color: var(--shell-text-primary);
    font-weight: 700;
}

[b-9oo76h1pgm] .serial-master__help-accordion .e-acrdn-content {
    padding: 0 1rem 1rem;
    color: var(--shell-text-primary);
    background: transparent;
}

[b-9oo76h1pgm] .serial-master__help-accordion .e-toggle-icon {
    color: var(--shell-text-secondary);
}

[b-9oo76h1pgm] .serial-master-dialog__grid .e-gridheader,
[b-9oo76h1pgm] .serial-master-dialog__grid .e-headercontent,
[b-9oo76h1pgm] .serial-master-dialog__grid .e-gridcontent,
[b-9oo76h1pgm] .serial-master-dialog__grid .e-content,
[b-9oo76h1pgm] .serial-master-dialog__grid .e-table {
    background: transparent;
}

[b-9oo76h1pgm] .serial-master-dialog__grid .e-headercell,
[b-9oo76h1pgm] .serial-master-dialog__grid .e-rowcell,
[b-9oo76h1pgm] .serial-master-dialog__grid .e-row:hover .e-rowcell,
[b-9oo76h1pgm] .serial-master-dialog__grid .e-selectionbackground .e-rowcell {
    color: var(--shell-text-primary);
}

[b-9oo76h1pgm] .serial-master-dialog__grid .e-gridpager,
[b-9oo76h1pgm] .serial-master-dialog__grid .e-gridpager .e-pagercontainer {
    background: transparent;
}

[b-9oo76h1pgm] .danger-action.e-btn {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
}

[b-9oo76h1pgm] .danger-action.e-btn:hover,
[b-9oo76h1pgm] .danger-action.e-btn:focus {
    background: #d64238;
    border-color: #d64238;
    color: #fff;
}

[b-9oo76h1pgm] .danger-action--disabled.e-btn,
[b-9oo76h1pgm] .danger-action--disabled.e-btn.e-disabled,
[b-9oo76h1pgm] .danger-action--disabled.e-btn:disabled,
[b-9oo76h1pgm] .danger-action.e-btn.e-disabled,
[b-9oo76h1pgm] .danger-action.e-btn:disabled {
    background: var(--shell-item-background-subtle) !important;
    border-color: var(--shell-border) !important;
    color: var(--shell-text-secondary) !important;
    opacity: 0.7;
    box-shadow: none;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .serial-master__content[b-9oo76h1pgm],
    .serial-master__content--help-docked[b-9oo76h1pgm] {
        grid-template-columns: 1fr;
    }

    .serial-master__panel--docked[b-9oo76h1pgm] {
        min-height: auto;
    }

    .serial-master__help-dock[b-9oo76h1pgm] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: auto;
    }

    .serial-master__help-dock-label[b-9oo76h1pgm] {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

@media (max-width: 760px) {
    .serial-master__header[b-9oo76h1pgm] {
        flex-direction: column;
    }

    .serial-master__header-meta[b-9oo76h1pgm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .serial-master__grid[b-9oo76h1pgm] {
        grid-template-columns: 1fr;
    }

    .serial-master__input--wide[b-9oo76h1pgm] {
        grid-column: auto;
    }

    .serial-master__toolbar[b-9oo76h1pgm] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .serial-master__toolbar[b-9oo76h1pgm] {
        grid-template-columns: 1fr;
    }

    .serial-master__header h1[b-9oo76h1pgm],
    .serial-master__panel-head h2[b-9oo76h1pgm] {
        font-size: 1.4rem;
    }
}
/* /Pages/Masters/Inventory/StockGroupMaster.razor.rz.scp.css */
.sgrp-master[b-fd3ds76aca] {
    position: relative;
    display: block;
}

.sgrp-master__shell[b-fd3ds76aca] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.sgrp-master__header[b-fd3ds76aca] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-hero-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-inverse);
}

.sgrp-master__eyebrow[b-fd3ds76aca],
.sgrp-master__panel-eyebrow[b-fd3ds76aca] {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
}

.sgrp-master__header h1[b-fd3ds76aca],
.sgrp-master__panel-head h2[b-fd3ds76aca] {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.1;
}

.sgrp-master__header p[b-fd3ds76aca] {
    margin: 0.55rem 0 0;
    max-width: 48rem;
    color: var(--shell-text-muted-inverse);
}

.sgrp-master__header-meta[b-fd3ds76aca] {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 0.75rem;
    width: min(100%, 260px);
}

.sgrp-master__meta-card[b-fd3ds76aca],
.sgrp-master__record-badge[b-fd3ds76aca] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--shell-text-inverse);
}

.sgrp-master__meta-card span[b-fd3ds76aca],
.sgrp-master__record-badge[b-fd3ds76aca] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sgrp-master__meta-card strong[b-fd3ds76aca] {
    font-size: 1.1rem;
}

.sgrp-master__message[b-fd3ds76aca] {
    width: 100%;
}

.sgrp-master__toolbar[b-fd3ds76aca] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.sgrp-master__toolbar-button[b-fd3ds76aca] {
    min-width: 130px;
}

.sgrp-master__content[b-fd3ds76aca] {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.sgrp-master__content--help-docked[b-fd3ds76aca] {
    grid-template-columns: minmax(0, 1fr) 88px;
}

.sgrp-master__panel[b-fd3ds76aca] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-primary);
}

.sgrp-master__panel--summary[b-fd3ds76aca] {
    background: var(--shell-panel-background-soft);
}

.sgrp-master__panel--docked[b-fd3ds76aca] {
    padding: 0.9rem 0.55rem;
}

.sgrp-master__panel-head[b-fd3ds76aca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.sgrp-master__grid[b-fd3ds76aca] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.sgrp-master__input[b-fd3ds76aca] {
    width: 100%;
}

.sgrp-master__input--wide[b-fd3ds76aca] {
    grid-column: 1 / -1;
}

.sgrp-master__help-intro[b-fd3ds76aca] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}

.sgrp-master__help-accordion[b-fd3ds76aca] {
    width: 100%;
}

.sgrp-master__help-content[b-fd3ds76aca] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--shell-text-primary);
    line-height: 1.65;
}

.sgrp-master__help-content p[b-fd3ds76aca] {
    margin: 0;
}

.sgrp-master__help-list[b-fd3ds76aca] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.7rem;
    color: var(--shell-text-primary);
}

.sgrp-master__help-list li[b-fd3ds76aca] {
    padding-left: 0.15rem;
}

.sgrp-master__help-dock[b-fd3ds76aca] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 100%;
}

.sgrp-master__help-dock-label[b-fd3ds76aca] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.sgrp-master__help-toggle[b-fd3ds76aca] {
    min-width: 0;
}

.sgrp-master__panel--docked .sgrp-master__help-toggle[b-fd3ds76aca] {
    width: 100%;
}

.sgrp-master__busy-overlay[b-fd3ds76aca] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 1.5rem;
    background: rgba(10, 16, 28, 0.28);
    backdrop-filter: blur(4px);
    z-index: 6;
}

.sgrp-master__busy-indicator[b-fd3ds76aca] {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
}

.sgrp-master-dialog__content[b-fd3ds76aca] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sgrp-master-dialog__muted[b-fd3ds76aca] {
    color: var(--shell-text-secondary);
}

.sgrp-master-dialog__search[b-fd3ds76aca] {
    width: 100%;
}

.sgrp-master-dialog__state[b-fd3ds76aca] {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 1rem;
    border: 1px dashed var(--shell-border-strong);
    border-radius: 1rem;
    color: var(--shell-text-secondary);
}

.sgrp-master-dialog__actions[b-fd3ds76aca] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

[b-fd3ds76aca] .sgrp-master__toolbar-button.e-btn {
    border-radius: 0.95rem;
}

[b-fd3ds76aca] .sgrp-master-dialog__grid {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--shell-border);
    background: var(--shell-panel-background-soft);
}

[b-fd3ds76aca] .sgrp-master__help-accordion .e-acrdn-item {
    border: 1px solid var(--shell-border);
    border-radius: 1rem;
    background: var(--shell-item-background-subtle);
    overflow: hidden;
}

[b-fd3ds76aca] .sgrp-master__help-accordion .e-acrdn-item + .e-acrdn-item {
    margin-top: 0.75rem;
}

[b-fd3ds76aca] .sgrp-master__help-accordion .e-acrdn-header {
    min-height: auto;
}

[b-fd3ds76aca] .sgrp-master__help-accordion .e-acrdn-header .e-acrdn-header-content {
    padding: 0.9rem 1rem;
    color: var(--shell-text-primary);
    font-weight: 700;
}

[b-fd3ds76aca] .sgrp-master__help-accordion .e-acrdn-content {
    padding: 0 1rem 1rem;
    color: var(--shell-text-primary);
    background: transparent;
}

[b-fd3ds76aca] .sgrp-master__help-accordion .e-toggle-icon {
    color: var(--shell-text-secondary);
}

[b-fd3ds76aca] .sgrp-master-dialog__grid .e-gridheader,
[b-fd3ds76aca] .sgrp-master-dialog__grid .e-headercontent,
[b-fd3ds76aca] .sgrp-master-dialog__grid .e-gridcontent,
[b-fd3ds76aca] .sgrp-master-dialog__grid .e-content,
[b-fd3ds76aca] .sgrp-master-dialog__grid .e-table {
    background: transparent;
}

[b-fd3ds76aca] .sgrp-master-dialog__grid .e-headercell,
[b-fd3ds76aca] .sgrp-master-dialog__grid .e-rowcell,
[b-fd3ds76aca] .sgrp-master-dialog__grid .e-row:hover .e-rowcell,
[b-fd3ds76aca] .sgrp-master-dialog__grid .e-selectionbackground .e-rowcell {
    color: var(--shell-text-primary);
}

[b-fd3ds76aca] .sgrp-master-dialog__grid .e-gridpager,
[b-fd3ds76aca] .sgrp-master-dialog__grid .e-gridpager .e-pagercontainer {
    background: transparent;
}

[b-fd3ds76aca] .danger-action.e-btn {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
}

[b-fd3ds76aca] .danger-action.e-btn:hover,
[b-fd3ds76aca] .danger-action.e-btn:focus {
    background: #d64238;
    border-color: #d64238;
    color: #fff;
}

[b-fd3ds76aca] .danger-action--disabled.e-btn,
[b-fd3ds76aca] .danger-action--disabled.e-btn.e-disabled,
[b-fd3ds76aca] .danger-action--disabled.e-btn:disabled,
[b-fd3ds76aca] .danger-action.e-btn.e-disabled,
[b-fd3ds76aca] .danger-action.e-btn:disabled {
    background: var(--shell-item-background-subtle) !important;
    border-color: var(--shell-border) !important;
    color: var(--shell-text-secondary) !important;
    opacity: 0.7;
    box-shadow: none;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .sgrp-master__content[b-fd3ds76aca],
    .sgrp-master__content--help-docked[b-fd3ds76aca] {
        grid-template-columns: 1fr;
    }

    .sgrp-master__panel--docked[b-fd3ds76aca] {
        min-height: auto;
    }

    .sgrp-master__help-dock[b-fd3ds76aca] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: auto;
    }

    .sgrp-master__help-dock-label[b-fd3ds76aca] {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

@media (max-width: 760px) {
    .sgrp-master__header[b-fd3ds76aca] {
        flex-direction: column;
    }

    .sgrp-master__header-meta[b-fd3ds76aca] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .sgrp-master__grid[b-fd3ds76aca] {
        grid-template-columns: 1fr;
    }

    .sgrp-master__input--wide[b-fd3ds76aca] {
        grid-column: auto;
    }

    .sgrp-master__toolbar[b-fd3ds76aca] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .sgrp-master__toolbar[b-fd3ds76aca] {
        grid-template-columns: 1fr;
    }

    .sgrp-master__header h1[b-fd3ds76aca],
    .sgrp-master__panel-head h2[b-fd3ds76aca] {
        font-size: 1.4rem;
    }
}
/* /Pages/Masters/Inventory/TaxClassMaster.razor.rz.scp.css */
.tax-master[b-fwkbh39gmq] {
    position: relative;
    display: block;
}

.tax-master__shell[b-fwkbh39gmq] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.tax-master__header[b-fwkbh39gmq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-hero-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-inverse);
}

.tax-master__eyebrow[b-fwkbh39gmq],
.tax-master__panel-eyebrow[b-fwkbh39gmq] {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
}

.tax-master__header h1[b-fwkbh39gmq],
.tax-master__panel-head h2[b-fwkbh39gmq] {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.1;
}

.tax-master__header p[b-fwkbh39gmq] {
    margin: 0.55rem 0 0;
    max-width: 48rem;
    color: var(--shell-text-muted-inverse);
}

.tax-master__header-meta[b-fwkbh39gmq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 0.75rem;
    width: min(100%, 260px);
}

.tax-master__meta-card[b-fwkbh39gmq],
.tax-master__record-badge[b-fwkbh39gmq] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--shell-text-inverse);
}

.tax-master__meta-card span[b-fwkbh39gmq],
.tax-master__record-badge[b-fwkbh39gmq] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tax-master__meta-card strong[b-fwkbh39gmq] {
    font-size: 1.1rem;
}

.tax-master__message[b-fwkbh39gmq] {
    width: 100%;
}

.tax-master__toolbar[b-fwkbh39gmq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tax-master__toolbar-button[b-fwkbh39gmq] {
    min-width: 130px;
}

.tax-master__content[b-fwkbh39gmq] {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.tax-master__content--help-docked[b-fwkbh39gmq] {
    grid-template-columns: minmax(0, 1fr) 88px;
}

.tax-master__panel[b-fwkbh39gmq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-primary);
}

.tax-master__panel--summary[b-fwkbh39gmq] {
    background: var(--shell-panel-background-soft);
}

.tax-master__panel--docked[b-fwkbh39gmq] {
    padding: 0.9rem 0.55rem;
}

.tax-master__panel-head[b-fwkbh39gmq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.tax-master__grid[b-fwkbh39gmq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.tax-master__input[b-fwkbh39gmq] {
    width: 100%;
}

.tax-master__input--wide[b-fwkbh39gmq] {
    grid-column: 1 / -1;
}

.tax-master__help-intro[b-fwkbh39gmq] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}

.tax-master__help-accordion[b-fwkbh39gmq] {
    width: 100%;
}

.tax-master__help-content[b-fwkbh39gmq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--shell-text-primary);
    line-height: 1.65;
}

.tax-master__help-content p[b-fwkbh39gmq] {
    margin: 0;
}

.tax-master__help-list[b-fwkbh39gmq] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.7rem;
    color: var(--shell-text-primary);
}

.tax-master__help-list li[b-fwkbh39gmq] {
    padding-left: 0.15rem;
}

.tax-master__help-dock[b-fwkbh39gmq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 100%;
}

.tax-master__help-dock-label[b-fwkbh39gmq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.tax-master__help-toggle[b-fwkbh39gmq] {
    min-width: 0;
}

.tax-master__panel--docked .tax-master__help-toggle[b-fwkbh39gmq] {
    width: 100%;
}

.tax-master__busy-overlay[b-fwkbh39gmq] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 1.5rem;
    background: rgba(10, 16, 28, 0.28);
    backdrop-filter: blur(4px);
    z-index: 6;
}

.tax-master__busy-indicator[b-fwkbh39gmq] {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
}

.tax-master-dialog__content[b-fwkbh39gmq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tax-master-dialog__muted[b-fwkbh39gmq] {
    color: var(--shell-text-secondary);
}

.tax-master-dialog__search[b-fwkbh39gmq] {
    width: 100%;
}

.tax-master-dialog__state[b-fwkbh39gmq] {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 1rem;
    border: 1px dashed var(--shell-border-strong);
    border-radius: 1rem;
    color: var(--shell-text-secondary);
}

.tax-master-dialog__actions[b-fwkbh39gmq] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

[b-fwkbh39gmq] .tax-master__toolbar-button.e-btn {
    border-radius: 0.95rem;
}

[b-fwkbh39gmq] .tax-master-dialog__grid {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--shell-border);
    background: var(--shell-panel-background-soft);
}

[b-fwkbh39gmq] .tax-master__help-accordion .e-acrdn-item {
    border: 1px solid var(--shell-border);
    border-radius: 1rem;
    background: var(--shell-item-background-subtle);
    overflow: hidden;
}

[b-fwkbh39gmq] .tax-master__help-accordion .e-acrdn-item + .e-acrdn-item {
    margin-top: 0.75rem;
}

[b-fwkbh39gmq] .tax-master__help-accordion .e-acrdn-header {
    min-height: auto;
}

[b-fwkbh39gmq] .tax-master__help-accordion .e-acrdn-header .e-acrdn-header-content {
    padding: 0.9rem 1rem;
    color: var(--shell-text-primary);
    font-weight: 700;
}

[b-fwkbh39gmq] .tax-master__help-accordion .e-acrdn-content {
    padding: 0 1rem 1rem;
    color: var(--shell-text-primary);
    background: transparent;
}

[b-fwkbh39gmq] .tax-master__help-accordion .e-toggle-icon {
    color: var(--shell-text-secondary);
}

[b-fwkbh39gmq] .tax-master-dialog__grid .e-gridheader,
[b-fwkbh39gmq] .tax-master-dialog__grid .e-headercontent,
[b-fwkbh39gmq] .tax-master-dialog__grid .e-gridcontent,
[b-fwkbh39gmq] .tax-master-dialog__grid .e-content,
[b-fwkbh39gmq] .tax-master-dialog__grid .e-table {
    background: transparent;
}

[b-fwkbh39gmq] .tax-master-dialog__grid .e-headercell,
[b-fwkbh39gmq] .tax-master-dialog__grid .e-rowcell,
[b-fwkbh39gmq] .tax-master-dialog__grid .e-row:hover .e-rowcell,
[b-fwkbh39gmq] .tax-master-dialog__grid .e-selectionbackground .e-rowcell {
    color: var(--shell-text-primary);
}

[b-fwkbh39gmq] .tax-master-dialog__grid .e-gridpager,
[b-fwkbh39gmq] .tax-master-dialog__grid .e-gridpager .e-pagercontainer {
    background: transparent;
}

[b-fwkbh39gmq] .danger-action.e-btn {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
}

[b-fwkbh39gmq] .danger-action.e-btn:hover,
[b-fwkbh39gmq] .danger-action.e-btn:focus {
    background: #d64238;
    border-color: #d64238;
    color: #fff;
}

[b-fwkbh39gmq] .danger-action--disabled.e-btn,
[b-fwkbh39gmq] .danger-action--disabled.e-btn.e-disabled,
[b-fwkbh39gmq] .danger-action--disabled.e-btn:disabled,
[b-fwkbh39gmq] .danger-action.e-btn.e-disabled,
[b-fwkbh39gmq] .danger-action.e-btn:disabled {
    background: var(--shell-item-background-subtle) !important;
    border-color: var(--shell-border) !important;
    color: var(--shell-text-secondary) !important;
    opacity: 0.7;
    box-shadow: none;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .tax-master__content[b-fwkbh39gmq],
    .tax-master__content--help-docked[b-fwkbh39gmq] {
        grid-template-columns: 1fr;
    }

    .tax-master__panel--docked[b-fwkbh39gmq] {
        min-height: auto;
    }

    .tax-master__help-dock[b-fwkbh39gmq] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: auto;
    }

    .tax-master__help-dock-label[b-fwkbh39gmq] {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

@media (max-width: 760px) {
    .tax-master__header[b-fwkbh39gmq] {
        flex-direction: column;
    }

    .tax-master__header-meta[b-fwkbh39gmq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .tax-master__grid[b-fwkbh39gmq] {
        grid-template-columns: 1fr;
    }

    .tax-master__input--wide[b-fwkbh39gmq] {
        grid-column: auto;
    }

    .tax-master__toolbar[b-fwkbh39gmq] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .tax-master__toolbar[b-fwkbh39gmq] {
        grid-template-columns: 1fr;
    }

    .tax-master__header h1[b-fwkbh39gmq],
    .tax-master__panel-head h2[b-fwkbh39gmq] {
        font-size: 1.4rem;
    }
}
/* /Pages/Masters/Inventory/UnitMaster.razor.rz.scp.css */
.unit-master[b-g543k8gdok] {
    position: relative;
    display: block;
}

.unit-master__shell[b-g543k8gdok] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.unit-master__header[b-g543k8gdok] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-hero-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-inverse);
}

.unit-master__eyebrow[b-g543k8gdok],
.unit-master__panel-eyebrow[b-g543k8gdok] {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
}

.unit-master__header h1[b-g543k8gdok],
.unit-master__panel-head h2[b-g543k8gdok] {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.1;
}

.unit-master__header p[b-g543k8gdok] {
    margin: 0.55rem 0 0;
    max-width: 48rem;
    color: var(--shell-text-muted-inverse);
}

.unit-master__header-meta[b-g543k8gdok] {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 0.75rem;
    width: min(100%, 260px);
}

.unit-master__meta-card[b-g543k8gdok],
.unit-master__record-badge[b-g543k8gdok] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--shell-text-inverse);
}

.unit-master__meta-card span[b-g543k8gdok],
.unit-master__record-badge[b-g543k8gdok] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.unit-master__meta-card strong[b-g543k8gdok] {
    font-size: 1.1rem;
}

.unit-master__message[b-g543k8gdok] {
    width: 100%;
}

.unit-master__toolbar[b-g543k8gdok] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.unit-master__toolbar-button[b-g543k8gdok] {
    min-width: 130px;
}

.unit-master__content[b-g543k8gdok] {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.unit-master__content--help-docked[b-g543k8gdok] {
    grid-template-columns: minmax(0, 1fr) 88px;
}

.unit-master__panel[b-g543k8gdok] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-primary);
}

.unit-master__panel--summary[b-g543k8gdok] {
    background: var(--shell-panel-background-soft);
}

.unit-master__panel--docked[b-g543k8gdok] {
    padding: 0.9rem 0.55rem;
}

.unit-master__panel-head[b-g543k8gdok] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.unit-master__grid[b-g543k8gdok] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.unit-master__input[b-g543k8gdok] {
    width: 100%;
}

.unit-master__input--wide[b-g543k8gdok] {
    grid-column: 1 / -1;
}

.unit-master__help-intro[b-g543k8gdok] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}

.unit-master__help-accordion[b-g543k8gdok] {
    width: 100%;
}

.unit-master__help-content[b-g543k8gdok] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--shell-text-primary);
    line-height: 1.65;
}

.unit-master__help-content p[b-g543k8gdok] {
    margin: 0;
}

.unit-master__help-list[b-g543k8gdok] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.7rem;
    color: var(--shell-text-primary);
}

.unit-master__help-list li[b-g543k8gdok] {
    padding-left: 0.15rem;
}

.unit-master__help-dock[b-g543k8gdok] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 100%;
}

.unit-master__help-dock-label[b-g543k8gdok] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.unit-master__help-toggle[b-g543k8gdok] {
    min-width: 0;
}

.unit-master__panel--docked .unit-master__help-toggle[b-g543k8gdok] {
    width: 100%;
}

.unit-master__busy-overlay[b-g543k8gdok] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 1.5rem;
    background: rgba(10, 16, 28, 0.28);
    backdrop-filter: blur(4px);
    z-index: 6;
}

.unit-master__busy-indicator[b-g543k8gdok] {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
}

.unit-master-dialog__content[b-g543k8gdok] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.unit-master-dialog__muted[b-g543k8gdok] {
    color: var(--shell-text-secondary);
}

.unit-master-dialog__search[b-g543k8gdok] {
    width: 100%;
}

.unit-master-dialog__state[b-g543k8gdok] {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 1rem;
    border: 1px dashed var(--shell-border-strong);
    border-radius: 1rem;
    color: var(--shell-text-secondary);
}

.unit-master-dialog__actions[b-g543k8gdok] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

[b-g543k8gdok] .unit-master__toolbar-button.e-btn {
    border-radius: 0.95rem;
}

[b-g543k8gdok] .unit-master-dialog__grid {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--shell-border);
    background: var(--shell-panel-background-soft);
}

[b-g543k8gdok] .unit-master__help-accordion .e-acrdn-item {
    border: 1px solid var(--shell-border);
    border-radius: 1rem;
    background: var(--shell-item-background-subtle);
    overflow: hidden;
}

[b-g543k8gdok] .unit-master__help-accordion .e-acrdn-item + .e-acrdn-item {
    margin-top: 0.75rem;
}

[b-g543k8gdok] .unit-master__help-accordion .e-acrdn-header {
    min-height: auto;
}

[b-g543k8gdok] .unit-master__help-accordion .e-acrdn-header .e-acrdn-header-content {
    padding: 0.9rem 1rem;
    color: var(--shell-text-primary);
    font-weight: 700;
}

[b-g543k8gdok] .unit-master__help-accordion .e-acrdn-content {
    padding: 0 1rem 1rem;
    color: var(--shell-text-primary);
    background: transparent;
}

[b-g543k8gdok] .unit-master__help-accordion .e-toggle-icon {
    color: var(--shell-text-secondary);
}

[b-g543k8gdok] .unit-master-dialog__grid .e-gridheader,
[b-g543k8gdok] .unit-master-dialog__grid .e-headercontent,
[b-g543k8gdok] .unit-master-dialog__grid .e-gridcontent,
[b-g543k8gdok] .unit-master-dialog__grid .e-content,
[b-g543k8gdok] .unit-master-dialog__grid .e-table {
    background: transparent;
}

[b-g543k8gdok] .unit-master-dialog__grid .e-headercell,
[b-g543k8gdok] .unit-master-dialog__grid .e-rowcell,
[b-g543k8gdok] .unit-master-dialog__grid .e-row:hover .e-rowcell,
[b-g543k8gdok] .unit-master-dialog__grid .e-selectionbackground .e-rowcell {
    color: var(--shell-text-primary);
}

[b-g543k8gdok] .unit-master-dialog__grid .e-gridpager,
[b-g543k8gdok] .unit-master-dialog__grid .e-gridpager .e-pagercontainer {
    background: transparent;
}

[b-g543k8gdok] .danger-action.e-btn {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
}

[b-g543k8gdok] .danger-action.e-btn:hover,
[b-g543k8gdok] .danger-action.e-btn:focus {
    background: #d64238;
    border-color: #d64238;
    color: #fff;
}

[b-g543k8gdok] .danger-action--disabled.e-btn,
[b-g543k8gdok] .danger-action--disabled.e-btn.e-disabled,
[b-g543k8gdok] .danger-action--disabled.e-btn:disabled,
[b-g543k8gdok] .danger-action.e-btn.e-disabled,
[b-g543k8gdok] .danger-action.e-btn:disabled {
    background: var(--shell-item-background-subtle) !important;
    border-color: var(--shell-border) !important;
    color: var(--shell-text-secondary) !important;
    opacity: 0.7;
    box-shadow: none;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .unit-master__content[b-g543k8gdok],
    .unit-master__content--help-docked[b-g543k8gdok] {
        grid-template-columns: 1fr;
    }

    .unit-master__panel--docked[b-g543k8gdok] {
        min-height: auto;
    }

    .unit-master__help-dock[b-g543k8gdok] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: auto;
    }

    .unit-master__help-dock-label[b-g543k8gdok] {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

@media (max-width: 760px) {
    .unit-master__header[b-g543k8gdok] {
        flex-direction: column;
    }

    .unit-master__header-meta[b-g543k8gdok] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .unit-master__grid[b-g543k8gdok] {
        grid-template-columns: 1fr;
    }

    .unit-master__input--wide[b-g543k8gdok] {
        grid-column: auto;
    }

    .unit-master__toolbar[b-g543k8gdok] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .unit-master__toolbar[b-g543k8gdok] {
        grid-template-columns: 1fr;
    }

    .unit-master__header h1[b-g543k8gdok],
    .unit-master__panel-head h2[b-g543k8gdok] {
        font-size: 1.4rem;
    }
}
/* /Pages/Masters/Inventory/VariantAttributeMaster.razor.rz.scp.css */
/* Product Attributes — master-detail allocation grids. */
.vat-page__body[b-aq62fia67c] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.vat-page__form[b-aq62fia67c] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Search sits in the toolbar and takes the leftover width. */
.vat-page__search[b-aq62fia67c] {
    flex: 1 1 220px;
    min-width: 180px;
    max-width: 380px;
}

.vat-page__section-head[b-aq62fia67c] {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    font-weight: 700;
}

/* Which attribute the value grid belongs to — de-emphasised so the heading
   still reads as one line. */
.vat-page__section-sub[b-aq62fia67c] {
    font-weight: 400;
    opacity: 0.75;
}

/* Native cell editors — so F5 saves the cell being typed rather than losing it
   to a control that commits on blur. */
.vat-cell[b-aq62fia67c] {
    width: 100%;
    font: inherit;
    padding: 0.2rem 0.35rem;
    border: 1px solid #c7d2e8;
    border-radius: 3px;
    background: #fff;
}

.vat-page__count[b-aq62fia67c] {
    font-weight: 600;
}

/* Icon-only per-row remove button — square, sits inside the row without
   stretching it. Syncfusion pads a normal button for a text label; there is no
   label here, so that padding is taken back. */
[b-aq62fia67c] .vat-rowbtn {
    min-width: 0;
    padding: 0.15rem 0.35rem;
    line-height: 1;
}

[b-aq62fia67c] .vat-rowbtn .e-btn-icon {
    margin: 0;
    font-size: 0.95rem;
}


/* ════════════════════════════════════════════════════════════════════════
   Help / User Guide panel.
   Blazor scoped CSS is per component: these ct-page__* rules must live in
   every page that uses the panel. Without them the aside renders with no
   width at all and vanishes beside the 100%-wide grids.
   ════════════════════════════════════════════════════════════════════ */
/* ── Help / User Guide panel (dockable) ── */
.ct-page__help[b-aq62fia67c] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    align-self: stretch;
    max-height: 100%;
    overflow: auto;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-aq62fia67c] {
    flex: 0 0 64px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-aq62fia67c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    min-height: 100%;
}
.ct-page__help-dock-label[b-aq62fia67c] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}
.ct-page__help-toggle[b-aq62fia67c] { min-width: 0; }
.ct-page__help--docked .ct-page__help-toggle[b-aq62fia67c] { width: 100%; }

.ct-page__panel-head[b-aq62fia67c] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-aq62fia67c] {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}
.ct-page__help-intro[b-aq62fia67c] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}
.ct-page__help-accordion[b-aq62fia67c] { width: 100%; }
.ct-page__help-content[b-aq62fia67c] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    color: var(--shell-text-primary);
    line-height: 1.6;
}
.ct-page__help-content p[b-aq62fia67c] { margin: 0; }
.ct-page__help-list[b-aq62fia67c] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.6rem;
}
.ct-page__help-list li[b-aq62fia67c] { padding-left: 0.15rem; }
/* /Pages/Masters/Inventory/WarehouseMaster.razor.rz.scp.css */
/* Two-pane body: form (left, scrolls) + dockable Help panel (right, scrolls). */
.wh-master__body[b-v7q7d8nu8o] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.wh-master__form[b-v7q7d8nu8o] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    max-height: 100%;
    padding: 0.75rem 1rem 1.25rem;
}
/* Section headings inside the editor get clear separation. */
.wh-master__form[b-v7q7d8nu8o]  .prod-master__subhead,
.wh-master__detail[b-v7q7d8nu8o]  .prod-master__subhead {
    margin: 0.75rem 0 0.25rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--shell-border, #e0e0e0);
    font-size: 0.92rem;
    font-weight: 600;
}
/* Field grid: comfortable auto-fit columns. */
.wh-master[b-v7q7d8nu8o]  .prod-master__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.85rem 1rem;
}
.wh-master[b-v7q7d8nu8o]  .prod-master__input--wide { grid-column: 1 / -1; }

/* Embedded mode: form left, dockable Help panel right. */
.wh-master[b-v7q7d8nu8o]  .wh-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
.wh-master[b-v7q7d8nu8o]  .wh-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* Help panel (mirrors the Custom Table / Category help panel). */
.ct-page__help[b-v7q7d8nu8o] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-v7q7d8nu8o] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-v7q7d8nu8o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-v7q7d8nu8o] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-v7q7d8nu8o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-v7q7d8nu8o] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-v7q7d8nu8o] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-v7q7d8nu8o] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-v7q7d8nu8o] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-v7q7d8nu8o] { padding-left: 0.15rem; }

[b-v7q7d8nu8o] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .wh-master__body[b-v7q7d8nu8o] { flex-direction: column; }
    .ct-page__help[b-v7q7d8nu8o],
    .ct-page__help--docked[b-v7q7d8nu8o] { flex: 0 0 auto; width: 100%; overflow: visible; }
}
/* /Pages/Masters/Others/BillSundriesMaster.razor.rz.scp.css */
/* Bill of Sundries master — layout mirrors the other master shells. */

.bs-master__body[b-k32m32xw5p],
.bs-master[b-k32m32xw5p]  .bs-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.bs-master__form[b-k32m32xw5p],
.bs-master[b-k32m32xw5p]  .bs-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

.bs-master__detail[b-k32m32xw5p] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.bs-grid2[b-k32m32xw5p] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}

.bs-grid1[b-k32m32xw5p] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

.bs-switch-row[b-k32m32xw5p] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    padding: 0.25rem 0;
}

.bs-exp[b-k32m32xw5p]  textarea {
    min-height: 3rem;
}

.bs-exp-row[b-k32m32xw5p] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.bs-exp-row .bs-exp[b-k32m32xw5p] {
    flex: 1 1 auto;
}

.bs-toolbar[b-k32m32xw5p] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bs-muted[b-k32m32xw5p] {
    color: var(--shell-text-secondary);
    font-size: 0.85rem;
}

.bs-grid[b-k32m32xw5p] {
    margin-top: 0.25rem;
}

.bs-embedded-toolbar[b-k32m32xw5p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* Help panel — fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-k32m32xw5p] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-k32m32xw5p] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-k32m32xw5p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-k32m32xw5p] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-k32m32xw5p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-k32m32xw5p] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-k32m32xw5p] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-k32m32xw5p] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-k32m32xw5p] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-k32m32xw5p] { padding-left: 0.15rem; }

[b-k32m32xw5p] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .ct-page__help[b-k32m32xw5p],
    .ct-page__help--docked[b-k32m32xw5p] { flex: 0 0 auto; width: 100%; overflow: visible; }
}

@media (max-width: 720px) {
    .bs-grid2[b-k32m32xw5p] { grid-template-columns: minmax(0, 1fr); }
    .bs-master__body[b-k32m32xw5p],
    .bs-master[b-k32m32xw5p]  .bs-embedded-body { flex-wrap: wrap; }
}
/* /Pages/Masters/Others/CompanySelectionPage.razor.rz.scp.css */
/* A flex COLUMN that takes its height from the layout (which owns it now)
   rather than guessing the header's with a calc. Everything below depends on
   the body having a definite one: without it .master-body grows to fit its
   content, its overflow:hidden never bites, and the two panes cannot scroll
   separately - the whole window scrolls instead. */
.selection-page[b-uta6ok4twt] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0 0;
}

/* Fill that height and clip; the global master-body rules then give the shell
   and the guide beside it a scrollbar each. */
.selection-page > .master-body[b-uta6ok4twt] {
    flex: 1 1 auto;
    min-height: 0;
}

/* align-content:start is what keeps the hero the size of its own contents.
   A grid whose container is taller than its rows hands the slack to those
   rows - and once the shell fills the viewport height there is always slack,
   so the header card grew to several times its natural height with nothing
   in the extra space. The slack belongs to the scroll container, not to a
   heading. */
.selection-shell[b-uta6ok4twt] {
    display: grid;
    gap: 1.25rem;
    align-content: start;
}

.selection-shell__header[b-uta6ok4twt] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 24px;
    background: var(--shell-hero-background);
    color: var(--shell-text-inverse);
    box-shadow: var(--shell-shadow-strong);
}

.selection-shell__header h1[b-uta6ok4twt] {
    margin: 0.2rem 0 0.35rem;
}

.selection-shell__header p:last-child[b-uta6ok4twt] {
    margin: 0;
    max-width: 42rem;
    opacity: 0.92;
}

.selection-shell__eyebrow[b-uta6ok4twt],
.selection-panel__eyebrow[b-uta6ok4twt] {
    margin: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.82;
}

.selection-grid[b-uta6ok4twt] {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.selection-panel[b-uta6ok4twt] {
    display: grid;
    gap: 1rem;
    align-content: start;
    padding: 1.5rem;
    border-radius: 24px;
    background: var(--shell-panel-background-soft);
    border: 1px solid var(--shell-border);
    box-shadow: var(--shell-shadow);
}

.selection-panel__head[b-uta6ok4twt],
.detail-block__head[b-uta6ok4twt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.selection-panel__head h2[b-uta6ok4twt],
.detail-block__head h3[b-uta6ok4twt] {
    margin: 0.18rem 0 0;
    color: var(--shell-text-primary);
}

.selection-count[b-uta6ok4twt],
.selection-company-pill[b-uta6ok4twt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.2rem 0.85rem;
    border-radius: 999px;
    background: var(--shell-pill-bg);
    color: var(--shell-pill-text);
    font-weight: 700;
}

.selection-company-pill[b-uta6ok4twt] {
    max-width: 14rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-block[b-uta6ok4twt] {
    display: grid;
    gap: 0.85rem;
}

.selection-list[b-uta6ok4twt],
.chip-list[b-uta6ok4twt] {
    display: grid;
    gap: 0.85rem;
}

.chip-list[b-uta6ok4twt] {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.chip-list--compact[b-uta6ok4twt] {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

[b-uta6ok4twt] .selection-input {
    width: 100%;
}

[b-uta6ok4twt] .selection-input.e-control-wrapper,
[b-uta6ok4twt] .selection-input.e-control-wrapper.e-float-input {
    border: 1px solid var(--shell-field-border);
    border-radius: 14px;
    background: var(--shell-contrast-surface-bg);
    box-shadow: none;
}

[b-uta6ok4twt] .selection-input.e-control-wrapper input.e-input,
[b-uta6ok4twt] .selection-input.e-control-wrapper.e-float-input input.e-input {
    min-height: 46px;
    padding: 0.8rem 0.9rem;
    color: var(--shell-contrast-surface-text);
}

[b-uta6ok4twt] .selection-input .e-float-text {
    color: var(--shell-contrast-surface-text-muted);
    font-weight: 700;
}

[b-uta6ok4twt] .selection-card.e-btn,
[b-uta6ok4twt] .selection-chip.e-btn {
    width: 100%;
    text-align: left;
    border-radius: 18px;
    border: 1px solid var(--shell-border);
    background: var(--shell-contrast-surface-bg-strong);
    color: var(--shell-contrast-surface-text);
    box-shadow: none;
    padding: 0;
}

[b-uta6ok4twt] .selection-card.e-btn .e-btn-content,
[b-uta6ok4twt] .selection-chip.e-btn .e-btn-content {
    display: block;
    width: 100%;
    color: inherit;
}

[b-uta6ok4twt] .selection-card.e-btn:hover,
[b-uta6ok4twt] .selection-card.e-btn:focus,
[b-uta6ok4twt] .selection-chip.e-btn:hover,
[b-uta6ok4twt] .selection-chip.e-btn:focus {
    background: color-mix(in srgb, var(--shell-contrast-surface-bg-strong) 85%, var(--shell-button-primary) 15%);
    color: var(--shell-contrast-surface-text);
}

/* The keyboard's cursor: the focused card carries a visible ring so the
   arrows always show where Enter will land - the same treatment the
   launcher card pages carry. */
[b-uta6ok4twt] .selection-card.e-btn:focus,
[b-uta6ok4twt] .selection-chip.e-btn:focus {
    outline: none;
    border-color: var(--shell-button-primary, #0d6efd);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--shell-button-primary, #0d6efd) 40%, transparent);
}

[b-uta6ok4twt] .selection-card--selected.e-btn,
[b-uta6ok4twt] .selection-chip--selected.e-btn {
    border-color: var(--shell-border-strong);
    background: color-mix(in srgb, var(--shell-contrast-surface-bg-strong) 78%, var(--shell-button-primary) 22%);
    box-shadow: inset 0 0 0 1px var(--shell-border-strong);
}

.selection-card__content[b-uta6ok4twt],
.selection-chip__content[b-uta6ok4twt] {
    display: grid;
    gap: 0.2rem;
    width: 100%;
    padding: 1rem 1.05rem;
}

.selection-card__content strong[b-uta6ok4twt],
.selection-chip__content strong[b-uta6ok4twt] {
    font-size: 1rem;
    color: var(--shell-contrast-surface-text);
}

.selection-card__content span[b-uta6ok4twt],
.selection-chip__content span[b-uta6ok4twt] {
    color: var(--shell-contrast-surface-text-muted);
    font-size: 0.92rem;
}

.selection-state[b-uta6ok4twt] {
    padding: 1rem 1.05rem;
    border-radius: 16px;
    background: var(--shell-panel-background-soft);
    border: 1px dashed var(--shell-border);
    color: var(--shell-text-secondary);
}

.selection-state--muted[b-uta6ok4twt] {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.selection-loader[b-uta6ok4twt] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.05rem;
    border-radius: 16px;
    background: var(--shell-loader-bg);
    border: 1px solid var(--shell-loader-border);
    color: var(--shell-text-secondary);
}

.selection-loader--compact[b-uta6ok4twt] {
    padding-block: 0.85rem;
}

.selection-loader__spinner[b-uta6ok4twt] {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 3px solid var(--shell-loader-border);
    border-top-color: var(--shell-loader-spinner);
    animation: selection-loader-spin-b-uta6ok4twt 0.8s linear infinite;
}

.selection-loader__text[b-uta6ok4twt] {
    display: grid;
    gap: 0.15rem;
}

.selection-loader__text strong[b-uta6ok4twt] {
    color: var(--shell-button-secondary-text);
    font-size: 0.96rem;
}

.selection-loader__text span[b-uta6ok4twt] {
    color: var(--shell-text-secondary);
    font-size: 0.9rem;
}

.message-banner[b-uta6ok4twt] {
    display: grid;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    border: 1px solid var(--shell-error-border);
    background: var(--shell-error-bg);
    color: var(--shell-error-text);
    font-weight: 600;
}

.message-banner__text[b-uta6ok4twt] {
    line-height: 1.45;
}

.message-banner__actions[b-uta6ok4twt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.selection-actions[b-uta6ok4twt] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.35rem;
}

[b-uta6ok4twt] .toolbar-button.e-btn,
[b-uta6ok4twt] .primary-action.e-btn,
[b-uta6ok4twt] .secondary-action.e-btn {
    min-height: 44px;
    border-radius: 999px;
    font-weight: 700;
}

[b-uta6ok4twt] .toolbar-button.e-btn,
[b-uta6ok4twt] .secondary-action.e-btn {
    background: var(--shell-button-secondary-bg);
    color: var(--shell-button-secondary-text);
    border: 1px solid var(--shell-button-secondary-border);
}

[b-uta6ok4twt] .toolbar-button.e-btn:hover,
[b-uta6ok4twt] .toolbar-button.e-btn:focus,
[b-uta6ok4twt] .secondary-action.e-btn:hover,
[b-uta6ok4twt] .secondary-action.e-btn:focus {
    background: color-mix(in srgb, var(--shell-button-secondary-bg) 86%, var(--shell-button-primary) 14%);
    color: var(--shell-button-secondary-text);
}

[b-uta6ok4twt] .primary-action.e-btn {
    background: var(--shell-button-primary);
    color: #ffffff;
    border: none;
}

[b-uta6ok4twt] .primary-action.e-btn:hover,
[b-uta6ok4twt] .primary-action.e-btn:focus {
    background: var(--shell-button-primary-hover);
    color: #ffffff;
}

@keyframes selection-loader-spin-b-uta6ok4twt {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 900px) {
    .selection-grid[b-uta6ok4twt] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .selection-page[b-uta6ok4twt] {
        padding-top: 1rem;
    }

    .selection-shell__header[b-uta6ok4twt],
    .selection-panel[b-uta6ok4twt] {
        padding: 1.1rem;
    }

    .selection-shell__header[b-uta6ok4twt],
    .selection-actions[b-uta6ok4twt] {
        flex-direction: column;
    }

    [b-uta6ok4twt] .toolbar-button.e-btn,
    [b-uta6ok4twt] .primary-action.e-btn,
    [b-uta6ok4twt] .secondary-action.e-btn {
        width: 100%;
    }
}

/* Header actions. Create Company sits beside Refresh and appears only for an
   Administrator, so the row has to survive having one child or two. */
.selection-shell__actions[b-uta6ok4twt] { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* ── Fill the width; help docks at the right edge ───────────────────────────
   .master-body turns into a flex row when it directly contains a
   .ct-page__help aside (global rule in app.css), and the aside holds a fixed
   basis - 56px docked, --invnet-help-w open. The shell beside it is a GRID,
   and a grid's default flex basis is its own content width, so it stopped
   short of the viewport: the two panels hugged the left edge and the help
   rail sat stranded in the middle of the canvas with dead space beyond it.

   Growing the shell fixes both halves at once - the panels take everything
   the help panel is not using, which pushes the rail out to the right edge.
   min-width:0 because a flex item's automatic minimum is its content size,
   and without it a long database name inside a card would refuse to let the
   shell shrink on a narrow screen. */
.selection-shell[b-uta6ok4twt] {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 0.35rem;
}

/* -- Terms of Use acceptance dialog (once per licence holder) ------------- */
/* ::deep because the dialog content renders inside SfDialog's own tree.    */

[b-uta6ok4twt] .terms-accept__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    min-height: 0;
}

[b-uta6ok4twt] .terms-accept__meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--shell-text-secondary);
}

/* The document scrolls INSIDE the dialog so the Accept row stays in view -
   a person must never have to hunt for the button under a long clause. */
[b-uta6ok4twt] .terms-accept__scroll {
    flex: 1;
    min-height: 12rem;
    overflow-y: auto;
    border: 1px solid var(--shell-border);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    line-height: 1.55;
    background: var(--shell-panel-background);
}

[b-uta6ok4twt] .terms-accept__scroll h3 {
    font-size: 1rem;
    margin: 1rem 0 0.4rem;
}

[b-uta6ok4twt] .terms-accept__scroll ul {
    margin: 0.3rem 0 0.7rem 1.2rem;
    padding: 0;
}

[b-uta6ok4twt] .terms-accept__error {
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    background: var(--shell-error-bg);
    color: var(--shell-error-text);
    border: 1px solid var(--shell-error-border);
}

[b-uta6ok4twt] .terms-accept__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* -- Licence expiry banner ------------------------------------------------
   Amber while warning, red once expired. Its own class rather than the
   message banner: this one persists while the company stays picked. */
.licence-expiry-banner[b-uta6ok4twt] {
    margin-bottom: 0.9rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    line-height: 1.5;
    background: var(--shell-warning-bg, #fdf2e2);
    color: var(--shell-warning-text, #a86200);
    border: 1px solid var(--shell-warning-border, #f0d9b0);
}

.licence-expiry-banner--expired[b-uta6ok4twt] {
    background: var(--shell-error-bg);
    color: var(--shell-error-text);
    border-color: var(--shell-error-border);
}

/* "Getting started" - a plain link shaped like the toolbar buttons. */
.selection-shell__guide[b-uta6ok4twt] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.1rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    background: var(--shell-button-secondary-bg);
    color: var(--shell-button-secondary-text);
    border: 1px solid var(--shell-button-secondary-border);
}
.selection-shell__guide:hover[b-uta6ok4twt],
.selection-shell__guide:focus-visible[b-uta6ok4twt] {
    background: color-mix(in srgb, var(--shell-button-secondary-bg) 86%, var(--shell-button-primary) 14%);
}
/* /Pages/Masters/Others/CountryMasterPage.razor.rz.scp.css */
/* Country master — layout mirrors the other master shells. */

.co-master__body[b-yp8800z6l2],
.co-master[b-yp8800z6l2]  .co-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.co-master__form[b-yp8800z6l2],
.co-master[b-yp8800z6l2]  .co-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

.co-master__detail[b-yp8800z6l2] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.co-grid[b-yp8800z6l2] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* The ISO-2 code is 2 characters — keep the box compact. */
.co-code[b-yp8800z6l2] {
    max-width: 220px;
}

.co-embedded-toolbar[b-yp8800z6l2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* Help panel — fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-yp8800z6l2] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-yp8800z6l2] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-yp8800z6l2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-yp8800z6l2] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-yp8800z6l2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-yp8800z6l2] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-yp8800z6l2] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-yp8800z6l2] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-yp8800z6l2] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-yp8800z6l2] { padding-left: 0.15rem; }

[b-yp8800z6l2] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .ct-page__help[b-yp8800z6l2],
    .ct-page__help--docked[b-yp8800z6l2] { flex: 0 0 auto; width: 100%; overflow: visible; }
}

@media (max-width: 900px) {
    .co-master__body[b-yp8800z6l2],
    .co-master[b-yp8800z6l2]  .co-embedded-body { flex-wrap: wrap; }
}
/* /Pages/Masters/Others/CurrencyMaster.razor.rz.scp.css */
/* Currency master — layout mirrors the other master shells. */

.cu-master__body[b-u9q3x6ymwk],
.cu-master[b-u9q3x6ymwk]  .cu-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.cu-master__form[b-u9q3x6ymwk],
.cu-master[b-u9q3x6ymwk]  .cu-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

.cu-master__detail[b-u9q3x6ymwk] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Two-column field grid; single column on narrow screens. */
.cu-grid2[b-u9q3x6ymwk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
    align-items: start;
}

/* Name + Inactive switch share the first cell. */
.cu-name-cell[b-u9q3x6ymwk] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.prod-master__switch[b-u9q3x6ymwk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.prod-master__switch label[b-u9q3x6ymwk] {
    font-size: 0.85rem;
    font-weight: 600;
}

.cu-embedded-toolbar[b-u9q3x6ymwk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* Help panel — fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-u9q3x6ymwk] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-u9q3x6ymwk] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-u9q3x6ymwk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-u9q3x6ymwk] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-u9q3x6ymwk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-u9q3x6ymwk] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-u9q3x6ymwk] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-u9q3x6ymwk] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-u9q3x6ymwk] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-u9q3x6ymwk] { padding-left: 0.15rem; }

[b-u9q3x6ymwk] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .ct-page__help[b-u9q3x6ymwk],
    .ct-page__help--docked[b-u9q3x6ymwk] { flex: 0 0 auto; width: 100%; overflow: visible; }
}

@media (max-width: 900px) {
    .cu-master__body[b-u9q3x6ymwk],
    .cu-master[b-u9q3x6ymwk]  .cu-embedded-body { flex-wrap: wrap; }
    .cu-grid2[b-u9q3x6ymwk] { grid-template-columns: 1fr; }
}
/* /Pages/Masters/Others/CustomTableBrowser.razor.rz.scp.css */
/* Custom Table Browser — body layout + dockable Help / User Guide panel.
   Mirrors the Custom Table designer / Product Master help pattern. */

.ct-page__body[b-4o19wwee4h] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.ct-page__main[b-4o19wwee4h] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Help / User Guide panel (dockable) ── */
.ct-page__help[b-4o19wwee4h] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    align-self: stretch;
    max-height: 100%;
    overflow: auto;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-4o19wwee4h] {
    flex: 0 0 64px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-4o19wwee4h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    min-height: 100%;
}
.ct-page__help-dock-label[b-4o19wwee4h] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}
.ct-page__help-toggle[b-4o19wwee4h] { min-width: 0; }
.ct-page__help--docked .ct-page__help-toggle[b-4o19wwee4h] { width: 100%; }

.ct-page__panel-head[b-4o19wwee4h] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-4o19wwee4h] {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}
.ct-page__help-intro[b-4o19wwee4h] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}
.ct-page__help-accordion[b-4o19wwee4h] { width: 100%; }
.ct-page__help-content[b-4o19wwee4h] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    color: var(--shell-text-primary);
    line-height: 1.6;
}
.ct-page__help-content p[b-4o19wwee4h] { margin: 0; }
.ct-page__help-list[b-4o19wwee4h] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.6rem;
}
.ct-page__help-list li[b-4o19wwee4h] { padding-left: 0.15rem; }
[b-4o19wwee4h] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .ct-page__body[b-4o19wwee4h] { flex-direction: column; }
    .ct-page__help[b-4o19wwee4h],
    .ct-page__help--docked[b-4o19wwee4h] { flex: 0 0 auto; width: 100%; overflow: visible; }
    .ct-page__help-dock[b-4o19wwee4h] { flex-direction: row; }
    .ct-page__help-dock-label[b-4o19wwee4h] { writing-mode: horizontal-tb; transform: none; }
}
/* /Pages/Masters/Others/CustomTableMaster.razor.rz.scp.css */
/* Custom Table designer — body layout + dockable Help / User Guide panel.
   Mirrors the Product Master / Item Group help pattern. */

.ct-page__body[b-7tjnpj3gck] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.ct-page__main[b-7tjnpj3gck] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Help / User Guide panel (dockable) ── */
.ct-page__help[b-7tjnpj3gck] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    align-self: stretch;
    max-height: 100%;
    overflow: auto;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-7tjnpj3gck] {
    flex: 0 0 64px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-7tjnpj3gck] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    min-height: 100%;
}
.ct-page__help-dock-label[b-7tjnpj3gck] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}
.ct-page__help-toggle[b-7tjnpj3gck] { min-width: 0; }
.ct-page__help--docked .ct-page__help-toggle[b-7tjnpj3gck] { width: 100%; }

.ct-page__panel-head[b-7tjnpj3gck] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-7tjnpj3gck] {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}
.ct-page__help-intro[b-7tjnpj3gck] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}
.ct-page__help-accordion[b-7tjnpj3gck] { width: 100%; }
.ct-page__help-content[b-7tjnpj3gck] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    color: var(--shell-text-primary);
    line-height: 1.6;
}
.ct-page__help-content p[b-7tjnpj3gck] { margin: 0; }
.ct-page__help-list[b-7tjnpj3gck] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.6rem;
}
.ct-page__help-list li[b-7tjnpj3gck] { padding-left: 0.15rem; }
.ct-page__help-content code[b-7tjnpj3gck] {
    font-size: 0.85em;
    padding: 0.05rem 0.3rem;
    border-radius: 0.25rem;
    background: rgba(128, 128, 128, 0.16);
}
[b-7tjnpj3gck] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .ct-page__body[b-7tjnpj3gck] { flex-direction: column; }
    .ct-page__help[b-7tjnpj3gck],
    .ct-page__help--docked[b-7tjnpj3gck] { flex: 0 0 auto; width: 100%; overflow: visible; }
    .ct-page__help-dock[b-7tjnpj3gck] { flex-direction: row; }
    .ct-page__help-dock-label[b-7tjnpj3gck] { writing-mode: horizontal-tb; transform: none; }
}
/* /Pages/Masters/Others/DashBoardPage.razor.rz.scp.css */
.dashboard-page[b-nkaqiuf23b] {
    display: grid;
    gap: 1.25rem;
    min-height: 100%;
    padding: 0.25rem 0 0;
}

.dashboard-shell[b-nkaqiuf23b] {
    display: grid;
    gap: 1rem;
}

.dashboard-shell__header[b-nkaqiuf23b] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    border-radius: 24px;
    background: var(--shell-hero-background);
    color: var(--shell-text-inverse);
    box-shadow: var(--shell-shadow-strong);
}

.dashboard-shell__copy[b-nkaqiuf23b] {
    display: grid;
    gap: 0.28rem;
    max-width: 52rem;
}

.dashboard-shell__copy h1[b-nkaqiuf23b] {
    margin: 0;
    font-size: 1.85rem;
    line-height: 1.05;
}

.dashboard-shell__copy p:last-child[b-nkaqiuf23b] {
    margin: 0;
    color: var(--shell-text-muted-inverse);
}

.dashboard-shell__eyebrow[b-nkaqiuf23b] {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.82;
}

.dashboard-shell__toolbar[b-nkaqiuf23b] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}

.dashboard-summary[b-nkaqiuf23b] {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.dashboard-summary__item[b-nkaqiuf23b] {
    display: grid;
    gap: 0.12rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    background: var(--shell-panel-background-soft);
    border: 1px solid var(--shell-border);
    box-shadow: var(--shell-shadow);
}

.dashboard-summary__item span[b-nkaqiuf23b] {
    color: var(--shell-text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.dashboard-summary__item strong[b-nkaqiuf23b] {
    color: var(--shell-text-primary);
    font-size: 1.55rem;
    line-height: 1.05;
}

/* Support-desk tile. The other summary items are read-only counters; this one
   navigates, so it is a <button> and has to look clickable without breaking the
   row's alignment. */
.dashboard-summary__item--action[b-nkaqiuf23b] {
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1), box-shadow 150ms cubic-bezier(0.2, 0, 0, 1);
}

.dashboard-summary__item--action:hover[b-nkaqiuf23b] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.dashboard-summary__item--action:focus-visible[b-nkaqiuf23b] {
    outline: 2px solid var(--shell-button-primary, #0d6efd);
    outline-offset: 2px;
}

/* Somebody is waiting on us — the tile says so at a glance. */
.dashboard-summary__item--alert[b-nkaqiuf23b] {
    border-color: #f5b1b1;
    background: #fff5f5;
}

.dashboard-summary__item--alert strong[b-nkaqiuf23b] {
    color: #b3261e;
}

.dashboard-summary__note[b-nkaqiuf23b] {
    color: #b3261e;
    font-size: .72rem;
    font-style: normal;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-summary__item--action[b-nkaqiuf23b] { transition: none; }
    .dashboard-summary__item--action:hover[b-nkaqiuf23b] { transform: none; }
}

[b-nkaqiuf23b] .dashboard-status.e-message {
    border-radius: 18px;
    box-shadow: var(--shell-shadow);
}

.dashboard-state[b-nkaqiuf23b] {
    display: grid;
    place-items: center;
    min-height: 280px;
    padding: 2rem;
    border-radius: 24px;
    background: var(--shell-panel-background-soft);
    border: 1px solid var(--shell-border);
    box-shadow: var(--shell-shadow);
    text-align: center;
}

.dashboard-state--empty[b-nkaqiuf23b] {
    gap: 0.35rem;
}

.dashboard-state--empty h2[b-nkaqiuf23b],
.dashboard-state--empty p[b-nkaqiuf23b] {
    margin: 0;
}

.dashboard-state--empty p[b-nkaqiuf23b] {
    color: var(--shell-text-secondary);
}

.dashboard-grid[b-nkaqiuf23b] {
    display: grid;
    gap: 1rem;
    /* Fixed 4-column layout on desktop per user spec — predictable,
       chart-friendly card sizing instead of auto-fit's variable column
       count. grid-auto-rows enforces consistent row height so a row of
       4 stays visually uniform regardless of each card's content. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(340px, auto);
    grid-auto-flow: dense;
}

/* ── SfDashboardLayout panel styling ── */
[b-nkaqiuf23b] .e-dashboard-layout.e-control .e-panel {
    border-radius: 12px;
    background: var(--shell-panel-background-soft);
    border: 1px solid var(--shell-border);
    box-shadow: var(--shell-shadow);
    overflow: visible;
}

[b-nkaqiuf23b] .e-dashboard-layout.e-control .e-panel .e-panel-header {
    padding: 0.35rem 0.65rem 0.15rem;
    border-bottom: 1px solid color-mix(in srgb, var(--shell-border) 60%, transparent);
    cursor: move;
    height: 32px;
    min-height: 32px;
}

[b-nkaqiuf23b] .e-dashboard-layout.e-control .e-panel .e-panel-content {
    padding: 0;
    overflow: visible;
    height: calc(100% - 32px) !important;
}

/* Clip chart/grid content but allow pivot dialogs to overflow */
[b-nkaqiuf23b] .e-dashboard-layout .e-panel-content .dashboard-card {
    overflow: hidden;
}

/* Allow pivot wrap to show FieldList dialog above the panel */
[b-nkaqiuf23b] .e-dashboard-layout .e-panel-content .dc-pivot-wrap {
    overflow: visible !important;
}

/* Ensure PivotView FieldList/dialogs render above other panels */
[b-nkaqiuf23b] .e-dashboard-layout.e-control .e-panel:has(.dc-pivot-wrap) {
    z-index: 10;
}

[b-nkaqiuf23b] .dc-pivot-wrap .e-pivotfieldlist-wrapper,
[b-nkaqiuf23b] .dc-pivot-wrap .e-dialog {
    z-index: 1000 !important;
}

[b-nkaqiuf23b] .e-dashboard-layout .e-panel-content .dc-chart-wrap,
[b-nkaqiuf23b] .e-dashboard-layout .e-panel-content .dc-grid-wrap {
    overflow: hidden;
    max-height: 100%;
}

[b-nkaqiuf23b] .e-dashboard-layout.e-control .e-panel .e-resize {
    color: var(--shell-text-secondary);
}

.dc-panel-header[b-nkaqiuf23b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0;
}

.dc-panel-header__title[b-nkaqiuf23b] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--shell-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.dc-panel-header__actions[b-nkaqiuf23b] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* ── Card title inside panel body ── */

.dc-card-title[b-nkaqiuf23b] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid color-mix(in srgb, var(--shell-border) 40%, transparent);
}

.dc-card-title__text[b-nkaqiuf23b] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--shell-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.dc-card-title__meta[b-nkaqiuf23b] {
    font-size: 0.68rem;
    color: var(--shell-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.dashboard-card[b-nkaqiuf23b] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.dashboard-card--chart[b-nkaqiuf23b] {
    background: linear-gradient(180deg, color-mix(in srgb, var(--shell-panel-background-soft) 84%, var(--shell-button-primary) 16%) 0%, var(--shell-panel-background-soft) 100%);
}

.dashboard-card--error[b-nkaqiuf23b] {
    border-color: var(--shell-error-border);
}

.dashboard-card--loading[b-nkaqiuf23b] {
    min-height: 12rem;
}

/* ── Icon toolbar (ucDashboardGrid style) ── */

.dc-toolbar[b-nkaqiuf23b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--shell-border) 60%, transparent);
    flex-shrink: 0;
}

.dc-toolbar__buttons[b-nkaqiuf23b] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-wrap: wrap;
}

.dc-toolbar__separator[b-nkaqiuf23b] {
    display: inline-block;
    width: 1px;
    height: 1.15rem;
    margin: 0 0.25rem;
    background: color-mix(in srgb, var(--shell-border) 70%, transparent);
}

.dc-toolbar__pill[b-nkaqiuf23b] {
    display: inline-flex;
    align-items: center;
    min-height: 1.2rem;
    padding: 0.06rem 0.4rem;
    border-radius: 999px;
    background: var(--shell-pill-bg);
    color: var(--shell-pill-text);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.dc-toolbar__heading[b-nkaqiuf23b] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--shell-text-secondary);
}

.dc-icon-btn[b-nkaqiuf23b] {
    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(--shell-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-size: 0.78rem;
}

.dc-icon-btn:hover[b-nkaqiuf23b] {
    background: color-mix(in srgb, var(--shell-button-primary) 12%, transparent);
    color: var(--shell-text-primary);
    border-color: color-mix(in srgb, var(--shell-border) 50%, transparent);
}

.dc-icon-btn:active[b-nkaqiuf23b] {
    background: color-mix(in srgb, var(--shell-button-primary) 20%, transparent);
}

.dc-icon-btn[disabled][b-nkaqiuf23b] {
    opacity: 0.4;
    pointer-events: none;
}

.dc-icon-btn--primary[b-nkaqiuf23b] {
    color: var(--shell-button-primary);
}

.dc-icon-btn--primary:hover[b-nkaqiuf23b] {
    background: color-mix(in srgb, var(--shell-button-primary) 18%, transparent);
    color: var(--shell-button-primary-hover, var(--shell-button-primary));
}

/* ── Heading ── */

.dc-heading[b-nkaqiuf23b] {
    display: grid;
    gap: 0.25rem;
    padding-bottom: 0.3rem;
    text-align: center;
    border-bottom: 1px solid color-mix(in srgb, var(--shell-border) 72%, transparent);
}

.dc-heading h2[b-nkaqiuf23b] {
    margin: 0;
    color: var(--shell-text-primary);
    font-size: 1.05rem;
    line-height: 1.3;
}

.dc-heading__meta[b-nkaqiuf23b] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    flex-shrink: 0;
    color: var(--shell-text-secondary);
    font-size: 0.82rem;
}

/* ── Loading overlay ── */

.dc-loading-overlay[b-nkaqiuf23b] {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 1.5rem;
    border-radius: 18px;
    background: var(--shell-item-background-subtle);
    border: 1px dashed var(--shell-border);
    color: var(--shell-text-secondary);
}

/* ── Error state ── */

.dc-error[b-nkaqiuf23b] {
    display: grid;
    place-items: center;
    gap: 0.5rem;
    min-height: 110px;
    padding: 1.5rem;
    border-radius: 18px;
    background: color-mix(in srgb, var(--shell-error-border) 8%, var(--shell-item-background-subtle) 92%);
    border: 1px solid var(--shell-error-border);
    text-align: center;
    color: var(--shell-text-primary);
}

.dc-error__icon[b-nkaqiuf23b] {
    font-size: 1.5rem;
    color: var(--shell-error-border);
}

.dc-error p[b-nkaqiuf23b] {
    margin: 0;
    font-size: 0.88rem;
}

/* ── Empty state ── */

.dc-empty[b-nkaqiuf23b] {
    display: grid;
    place-items: center;
    min-height: 110px;
    padding: 1rem;
    border-radius: 18px;
    background: var(--shell-item-background-subtle);
    border: 1px dashed var(--shell-border);
    color: var(--shell-text-secondary);
    text-align: center;
}

/* ── Chart wrapper ── */

.dc-chart-wrap[b-nkaqiuf23b] {
    min-width: 0;
    flex: 1;
    padding: 0.35rem 0.25rem 0;
    border-radius: 20px;
    background: color-mix(in srgb, var(--shell-item-background-subtle) 88%, var(--shell-button-primary) 12%);
    border: 1px solid var(--shell-border);
}

.dc-chart-wrap--detail[b-nkaqiuf23b] {
    padding: 0.75rem;
}

[b-nkaqiuf23b] .dc-chart-wrap .e-chart,
[b-nkaqiuf23b] .dc-chart-wrap .e-accumulationchart {
    border-radius: 20px;
}

/* ── Grid wrapper ── */

.dc-grid-wrap[b-nkaqiuf23b] {
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

/* ── PivotGrid wrapper ── */

.dc-pivot-wrap[b-nkaqiuf23b] {
    min-width: 0;
    width: 100%;
    overflow: visible;
    justify-self: stretch;
    align-self: stretch;
}

.dc-pivot-wrap--detail[b-nkaqiuf23b] {
    min-height: 400px;
}

[b-nkaqiuf23b] .dc-pivot-wrap .e-pivotview {
    width: 100% !important;
    min-width: 100% !important;
    border: 1px solid var(--shell-border);
    border-radius: 16px;
    overflow: hidden;
    box-sizing: border-box;
}

[b-nkaqiuf23b] .dc-pivot-wrap .e-pivotview .e-grid {
    border-radius: 0;
}

[b-nkaqiuf23b] .dc-pivot-wrap .e-pivotview .e-pivot-toolbar {
    border-bottom: 1px solid var(--shell-border);
}

[b-nkaqiuf23b] .dc-pivot-wrap .e-pivotview .e-group-bar {
    border-bottom: 1px solid var(--shell-border);
}

/* PivotView grid table clips but toolbar dialogs escape */
[b-nkaqiuf23b] .dc-pivot-wrap .e-pivotview .e-grid {
    overflow: auto;
}

[b-nkaqiuf23b] .dc-pivot-wrap .e-pivotview {
    overflow: visible !important;
}

[b-nkaqiuf23b] .dc-pivot-wrap .e-pivotview .e-headercell,
[b-nkaqiuf23b] .dc-pivot-wrap .e-pivotview .e-rowcell,
[b-nkaqiuf23b] .dc-pivot-wrap .e-pivotview .e-summarycell {
    color: var(--shell-contrast-surface-text);
}

[b-nkaqiuf23b] .dc-pivot-wrap .e-pivotview .e-gtot,
[b-nkaqiuf23b] .dc-pivot-wrap .e-pivotview .e-colstot {
    font-weight: 700;
}

[b-nkaqiuf23b] .dc-grid.e-grid,
[b-nkaqiuf23b] .dc-detail-grid.e-grid {
    border-radius: 20px;
    border: 1px solid var(--shell-border);
    background: var(--shell-contrast-surface-bg);
    box-shadow: none;
}

[b-nkaqiuf23b] .dc-grid .e-gridheader,
[b-nkaqiuf23b] .dc-detail-grid .e-gridheader {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background: color-mix(in srgb, var(--shell-contrast-surface-bg) 90%, var(--shell-button-primary) 10%);
}

[b-nkaqiuf23b] .dc-grid .e-headercell,
[b-nkaqiuf23b] .dc-detail-grid .e-headercell,
[b-nkaqiuf23b] .dc-grid .e-rowcell,
[b-nkaqiuf23b] .dc-detail-grid .e-rowcell,
[b-nkaqiuf23b] .dc-grid .e-summarycell,
[b-nkaqiuf23b] .dc-detail-grid .e-summarycell {
    color: var(--shell-contrast-surface-text);
}

[b-nkaqiuf23b] .dc-grid .e-groupcaption,
[b-nkaqiuf23b] .dc-detail-grid .e-groupcaption {
    color: var(--shell-contrast-surface-text);
}

[b-nkaqiuf23b] .dc-grid .e-gridfooter,
[b-nkaqiuf23b] .dc-detail-grid .e-gridfooter {
    background: color-mix(in srgb, var(--shell-contrast-surface-bg) 84%, var(--shell-button-primary) 16%);
    border-top: 2px solid var(--shell-button-primary);
}

[b-nkaqiuf23b] .dc-grid .e-summaryrow,
[b-nkaqiuf23b] .dc-detail-grid .e-summaryrow {
    background: transparent;
}

[b-nkaqiuf23b] .dc-grid .e-summarycell,
[b-nkaqiuf23b] .dc-detail-grid .e-summarycell {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--shell-text-primary);
}

[b-nkaqiuf23b] .dc-grid .e-gridfooter .e-summaryrow:last-child,
[b-nkaqiuf23b] .dc-detail-grid .e-gridfooter .e-summaryrow:last-child {
    background: color-mix(in srgb, var(--shell-contrast-surface-bg) 76%, var(--shell-button-primary) 24%);
}

/* ── Metrics ── */

.dashboard-metrics[b-nkaqiuf23b] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.dashboard-metric[b-nkaqiuf23b] {
    display: grid;
    gap: 0.2rem;
    padding: 0.85rem 0.9rem;
    border-radius: 18px;
    background: var(--shell-item-background-subtle);
    border: 1px solid var(--shell-border);
}

.dashboard-metric span[b-nkaqiuf23b] {
    color: var(--shell-text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dashboard-metric strong[b-nkaqiuf23b] {
    color: var(--shell-text-primary);
    font-size: 1.05rem;
}

/* ── Series info ── */

.dashboard-series[b-nkaqiuf23b] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.dashboard-series__item[b-nkaqiuf23b] {
    display: grid;
    gap: 0.14rem;
    padding: 0.85rem 0.9rem;
    border-radius: 18px;
    background: color-mix(in srgb, var(--shell-item-background-subtle) 72%, var(--shell-button-primary) 28%);
    border: 1px solid var(--shell-border);
}

.dashboard-series__item strong[b-nkaqiuf23b] {
    color: var(--shell-text-primary);
    font-size: 0.96rem;
}

.dashboard-series__item span[b-nkaqiuf23b] {
    color: var(--shell-text-secondary);
    font-size: 0.84rem;
}

/* ── Dialog ── */

[b-nkaqiuf23b] .dashboard-dialog.e-dialog,
[b-nkaqiuf23b] .dashboard-dialog .e-dlg-header-content,
[b-nkaqiuf23b] .dashboard-dialog .e-dlg-content,
[b-nkaqiuf23b] .dashboard-dialog .e-footer-content {
    background: var(--shell-panel-background-soft);
    color: var(--shell-text-primary);
}

[b-nkaqiuf23b] .dashboard-dialog.e-dialog {
    border-radius: 24px;
    overflow: visible;
    box-shadow: var(--shell-shadow-strong);
}

[b-nkaqiuf23b] .dashboard-dialog--wide.e-dialog {
    max-width: 1400px;
}

[b-nkaqiuf23b] .dashboard-dialog .e-dlg-header-content,
[b-nkaqiuf23b] .dashboard-dialog .e-footer-content {
    border-color: var(--shell-border);
}

.dashboard-dialog__content[b-nkaqiuf23b] {
    display: grid;
    gap: 1rem;
}

.dashboard-dialog__actions[b-nkaqiuf23b] {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
}

.dashboard-dialog__actions--detail[b-nkaqiuf23b] {
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--shell-border);
}

.dashboard-dialog__state[b-nkaqiuf23b] {
    display: grid;
    place-items: center;
    min-height: 110px;
    padding: 1rem;
    border-radius: 18px;
    background: var(--shell-item-background-subtle);
    border: 1px dashed var(--shell-border);
    color: var(--shell-text-secondary);
    text-align: center;
}

/* ── Parameter dialog ── */

.dashboard-parameter-grid[b-nkaqiuf23b] {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.dashboard-parameter-field[b-nkaqiuf23b] {
    min-width: 0;
}

[b-nkaqiuf23b] .dashboard-parameter-field .e-control-wrapper,
[b-nkaqiuf23b] .dashboard-parameter-field .e-input-group,
[b-nkaqiuf23b] .dashboard-parameter-field .e-ddl,
[b-nkaqiuf23b] .dashboard-parameter-field .e-datepicker {
    width: 100%;
}

/* ── Buttons ── */

[b-nkaqiuf23b] .dashboard-dialog .primary-action.e-btn,
[b-nkaqiuf23b] .dashboard-dialog .secondary-action.e-btn,
[b-nkaqiuf23b] .dashboard-shell .toolbar-button.e-btn,
[b-nkaqiuf23b] .dashboard-card .primary-action.e-btn,
[b-nkaqiuf23b] .dashboard-card .secondary-action.e-btn {
    min-height: 40px;
    border-radius: 999px;
    font-weight: 700;
}

[b-nkaqiuf23b] .dashboard-dialog .secondary-action.e-btn,
[b-nkaqiuf23b] .dashboard-shell .secondary-action.e-btn,
[b-nkaqiuf23b] .dashboard-card .secondary-action.e-btn {
    background: var(--shell-button-secondary-bg);
    color: var(--shell-button-secondary-text);
    border: 1px solid var(--shell-button-secondary-border);
}

[b-nkaqiuf23b] .dashboard-dialog .secondary-action.e-btn:hover,
[b-nkaqiuf23b] .dashboard-shell .secondary-action.e-btn:hover,
[b-nkaqiuf23b] .dashboard-card .secondary-action.e-btn:hover {
    background: color-mix(in srgb, var(--shell-button-secondary-bg) 86%, var(--shell-button-primary) 14%);
    color: var(--shell-button-secondary-text);
}

[b-nkaqiuf23b] .dashboard-dialog .primary-action.e-btn,
[b-nkaqiuf23b] .dashboard-shell .primary-action.e-btn,
[b-nkaqiuf23b] .dashboard-card .primary-action.e-btn {
    background: var(--shell-button-primary);
    color: #ffffff;
    border: none;
}

[b-nkaqiuf23b] .dashboard-dialog .primary-action.e-btn:hover,
[b-nkaqiuf23b] .dashboard-shell .primary-action.e-btn:hover,
[b-nkaqiuf23b] .dashboard-card .primary-action.e-btn:hover {
    background: var(--shell-button-primary-hover);
    color: #ffffff;
}

/* ── Footer metrics ── */

.dashboard-grid-footer-panel[b-nkaqiuf23b] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--shell-border);
    border-top: none;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    background: color-mix(in srgb, var(--shell-contrast-surface-bg) 88%, var(--shell-button-primary) 12%);
}

.dashboard-grid-footer-panel--detail[b-nkaqiuf23b] {
    margin-top: -0.25rem;
}

.dashboard-grid-footer-metric[b-nkaqiuf23b] {
    display: grid;
    gap: 0.12rem;
}

.dashboard-grid-footer-metric span[b-nkaqiuf23b] {
    color: var(--shell-contrast-surface-text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-grid-footer-metric strong[b-nkaqiuf23b] {
    color: var(--shell-contrast-surface-text);
    font-size: 0.94rem;
}

/* ── Detail grid surface ── */

.dashboard-detail-grid-surface[b-nkaqiuf23b] {
    display: grid;
    gap: 0;
}

.dashboard-detail-grid-wrap[b-nkaqiuf23b] {
    display: grid;
    gap: 0;
}

/* ── Detail tabs ── */

.dashboard-detail-tabs[b-nkaqiuf23b] {
    min-width: 0;
}

[b-nkaqiuf23b] .dashboard-detail-tabs .e-tab-header {
    border-bottom: 1px solid var(--shell-border);
}

[b-nkaqiuf23b] .dashboard-detail-tabs .e-toolbar-item .e-tab-wrap {
    border-radius: 999px;
}

/* ── Responsive ── */

@media (min-width: 1200px) {
    .dashboard-card--chart[b-nkaqiuf23b] {
        grid-column: span 2;
    }
}

/* Tablet: 2 cols keeps cards readable between the 4-col desktop grid
   and the 1-col mobile stack. 1100 → 900 is the "typical tablet" band.
   Below 900 collapses fully to mobile's one-per-row stack per spec. */
@media (max-width: 1100px) {
    .dashboard-grid[b-nkaqiuf23b] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .dashboard-grid[b-nkaqiuf23b] {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;     /* content-sized on mobile — no forced 340px empty space per card */
    }
}

@media (max-width: 820px) {
    .dashboard-shell__header[b-nkaqiuf23b] {
        flex-direction: column;
    }

    .dashboard-shell__toolbar[b-nkaqiuf23b] {
        width: 100%;
        justify-content: flex-start;
    }

    .dc-toolbar[b-nkaqiuf23b] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 575.98px) {
    .dashboard-page[b-nkaqiuf23b] {
        padding-top: 0;
    }

    .dashboard-shell__header[b-nkaqiuf23b],
    .dashboard-card[b-nkaqiuf23b] {
        padding: 1rem;
        border-radius: 20px;
    }

    .dashboard-parameter-grid[b-nkaqiuf23b],
    .dashboard-metrics[b-nkaqiuf23b],
    .dashboard-series[b-nkaqiuf23b] {
        grid-template-columns: 1fr;
    }

    .dashboard-dialog__actions[b-nkaqiuf23b] {
        flex-direction: column-reverse;
    }

    [b-nkaqiuf23b] .dashboard-dialog.e-dialog {
        max-width: calc(100vw - 1.2rem);
    }
}

/* The detail dialog's view switch - Graph / Analyse / Pivot. */
.dc-viewswitch[b-nkaqiuf23b] {
    display: inline-flex;
    gap: 0.3rem;
    margin: 0.2rem 0 0.5rem;
}

.dc-viewswitch[b-nkaqiuf23b]  .dc-viewswitch__btn {
    white-space: nowrap;
}
/* /Pages/Masters/Others/Home.razor.rz.scp.css */
.home-page[b-69h2i98x6u] {
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.25rem;
}

.home-card[b-69h2i98x6u] {
    width: min(100%, 940px);
    background: var(--shell-panel-background);
    border: 1px solid var(--shell-border);
    border-radius: 24px;
    box-shadow: var(--shell-shadow-strong);
    overflow: hidden;
}

.home-card__header[b-69h2i98x6u] {
    padding: 1.2rem 1.35rem 0;
    background: var(--shell-hero-background);
}

[b-69h2i98x6u] .home-hero-message.e-message {
    border: none;
    border-radius: 22px 22px 0 0;
    background: transparent;
    box-shadow: none;
    color: var(--shell-text-inverse);
    padding: 0.1rem 0 1rem;
}

[b-69h2i98x6u] .home-hero-message .e-msg-content,
[b-69h2i98x6u] .home-hero-message .e-message-content {
    padding: 0;
}

.home-hero-message__content[b-69h2i98x6u] {
    display: grid;
    gap: 0.85rem;
}

[b-69h2i98x6u] .home-status-chip.e-chip-set {
    display: inline-flex;
    width: fit-content;
}

[b-69h2i98x6u] .home-status-chip .e-chip {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: var(--shell-text-inverse);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.28rem 0.75rem;
}

.home-hero-message__copy[b-69h2i98x6u] {
    display: grid;
    gap: 0.35rem;
}

.home-hero-message__copy h1[b-69h2i98x6u] {
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.55rem);
    line-height: 1.02;
    color: var(--shell-text-inverse);
}

.home-hero-message__copy p[b-69h2i98x6u] {
    margin: 0;
    max-width: 42rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1rem;
    line-height: 1.45;
}

.home-card__body[b-69h2i98x6u] {
    display: grid;
    gap: 1rem;
    padding: 1.3rem 1.35rem 1.45rem;
}

[b-69h2i98x6u] .home-info-message.e-message {
    border-radius: 18px;
    border: 1px solid var(--shell-border);
    background: color-mix(in srgb, var(--shell-panel-background-soft) 84%, var(--shell-button-primary) 16%);
    color: var(--shell-text-primary);
    box-shadow: none;
}

.home-info-message__content[b-69h2i98x6u] {
    display: grid;
    gap: 0.35rem;
    line-height: 1.5;
}

.home-info-message__content strong[b-69h2i98x6u] {
    color: var(--shell-button-secondary-text);
}

[b-69h2i98x6u] .home-redirect-message.e-message {
    width: min(100%, 460px);
    margin: 1rem auto 0;
    border-radius: 18px;
}

@media (max-width: 575.98px) {
    .home-card__header[b-69h2i98x6u],
    .home-card__body[b-69h2i98x6u] {
        padding-inline: 1.1rem;
    }

    .home-card__header[b-69h2i98x6u] {
        padding-top: 1rem;
    }

    .home-hero-message__copy h1[b-69h2i98x6u] {
        font-size: 1.85rem;
    }
}
/* /Pages/Masters/Others/LocationMaster.razor.rz.scp.css */
/* Location / Area master — layout mirrors the other master shells. */

.lo-master__body[b-13c55egsn8],
.lo-master[b-13c55egsn8]  .lo-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.lo-master__form[b-13c55egsn8],
.lo-master[b-13c55egsn8]  .lo-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

.lo-master__detail[b-13c55egsn8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lo-grid2[b-13c55egsn8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}

.lo-embedded-toolbar[b-13c55egsn8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* Help panel — fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-13c55egsn8] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-13c55egsn8] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-13c55egsn8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-13c55egsn8] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-13c55egsn8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-13c55egsn8] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-13c55egsn8] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-13c55egsn8] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-13c55egsn8] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-13c55egsn8] { padding-left: 0.15rem; }

[b-13c55egsn8] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .ct-page__help[b-13c55egsn8],
    .ct-page__help--docked[b-13c55egsn8] { flex: 0 0 auto; width: 100%; overflow: visible; }
}

@media (max-width: 720px) {
    .lo-grid2[b-13c55egsn8] { grid-template-columns: minmax(0, 1fr); }
    .lo-master__body[b-13c55egsn8],
    .lo-master[b-13c55egsn8]  .lo-embedded-body { flex-wrap: wrap; }
}
/* /Pages/Masters/Others/NotFound.razor.rz.scp.css */
.not-found-page[b-bfdjgfz066] {
    min-height: calc(100vh - 3.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0;
}

.not-found-card[b-bfdjgfz066] {
    width: min(100%, 520px);
    padding: 2rem;
    border-radius: 24px;
    background: linear-gradient(145deg, #ffffff 0%, #fff6ef 100%);
    border: 1px solid rgba(239, 108, 0, 0.16);
    box-shadow: 0 22px 52px rgba(52, 14, 34, 0.12);
    text-align: center;
}

.not-found-card__eyebrow[b-bfdjgfz066] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #ef6c00;
}

.not-found-card h1[b-bfdjgfz066] {
    margin: 0.45rem 0;
}

.not-found-card p:last-of-type[b-bfdjgfz066] {
    margin: 0 0 1.4rem;
    color: #555555;
}

[b-bfdjgfz066] .not-found-button.e-btn {
    min-width: 180px;
    min-height: 44px;
    border-radius: 999px;
    background: #ef6c00;
    color: #ffffff;
    border: none;
    font-weight: 700;
}

[b-bfdjgfz066] .not-found-button.e-btn:hover,
[b-bfdjgfz066] .not-found-button.e-btn:focus {
    background: #d35f00;
    color: #ffffff;
}
/* /Pages/Masters/Others/PortCodeMasterPage.razor.rz.scp.css */
/* Port Codes master — layout mirrors the other master shells. */

.po-master__body[b-9xpq2ur619],
.po-master[b-9xpq2ur619]  .po-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.po-master__form[b-9xpq2ur619],
.po-master[b-9xpq2ur619]  .po-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

.po-master__detail[b-9xpq2ur619] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Code + name side by side (mirrors lo-grid2 on the Location master). */
.po-grid[b-9xpq2ur619] {
    display: grid;
    grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
    gap: 0.75rem;
}

@media (max-width: 720px) {
    .po-grid[b-9xpq2ur619] { grid-template-columns: minmax(0, 1fr); }
}

.po-embedded-toolbar[b-9xpq2ur619] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* Help panel — fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-9xpq2ur619] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-9xpq2ur619] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-9xpq2ur619] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-9xpq2ur619] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-9xpq2ur619] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-9xpq2ur619] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-9xpq2ur619] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-9xpq2ur619] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-9xpq2ur619] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-9xpq2ur619] { padding-left: 0.15rem; }

[b-9xpq2ur619] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .ct-page__help[b-9xpq2ur619],
    .ct-page__help--docked[b-9xpq2ur619] { flex: 0 0 auto; width: 100%; overflow: visible; }
}

@media (max-width: 900px) {
    .po-master__body[b-9xpq2ur619],
    .po-master[b-9xpq2ur619]  .po-embedded-body { flex-wrap: wrap; }
}
/* /Pages/Masters/Others/ShortCloseReasonMasterPage.razor.rz.scp.css */
/* Short-Close Reasons master - layout mirrors the other master shells. */

.scr-master__body[b-0jprtarfmw] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.scr-master__form[b-0jprtarfmw] {
    flex: 1 1 auto;
    min-width: 0;
}

.scr-master__detail[b-0jprtarfmw] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-width: 640px;
}

.scr-field[b-0jprtarfmw] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.scr-field--narrow[b-0jprtarfmw] {
    max-width: 220px;
}

.scr-used[b-0jprtarfmw] {
    margin: 0;
    font-size: 0.86rem;
    opacity: 0.85;
}

/* Help panel - fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-0jprtarfmw] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-0jprtarfmw] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-0jprtarfmw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-0jprtarfmw] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-0jprtarfmw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-0jprtarfmw] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-0jprtarfmw] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-0jprtarfmw] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-0jprtarfmw] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-0jprtarfmw] { padding-left: 0.15rem; }

[b-0jprtarfmw] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .scr-master__body[b-0jprtarfmw] { flex-wrap: wrap; }
    .ct-page__help[b-0jprtarfmw],
    .ct-page__help--docked[b-0jprtarfmw] { flex: 0 0 auto; width: 100%; overflow: visible; }
}
/* /Pages/Masters/Others/StateCodeMaster.razor.rz.scp.css */
/* State Codes master — layout mirrors the other master shells. */

.st-master__body[b-3o4fi0ptr4],
.st-master[b-3o4fi0ptr4]  .st-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.st-master__form[b-3o4fi0ptr4],
.st-master[b-3o4fi0ptr4]  .st-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

.st-master__detail[b-3o4fi0ptr4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.st-grid[b-3o4fi0ptr4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.st-grid__row[b-3o4fi0ptr4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.st-embedded-toolbar[b-3o4fi0ptr4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* Help panel — fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-3o4fi0ptr4] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-3o4fi0ptr4] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-3o4fi0ptr4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-3o4fi0ptr4] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-3o4fi0ptr4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-3o4fi0ptr4] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-3o4fi0ptr4] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-3o4fi0ptr4] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-3o4fi0ptr4] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-3o4fi0ptr4] { padding-left: 0.15rem; }

[b-3o4fi0ptr4] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .ct-page__help[b-3o4fi0ptr4],
    .ct-page__help--docked[b-3o4fi0ptr4] { flex: 0 0 auto; width: 100%; overflow: visible; }
}

@media (max-width: 900px) {
    .st-master__body[b-3o4fi0ptr4],
    .st-master[b-3o4fi0ptr4]  .st-embedded-body { flex-wrap: wrap; }

    .st-grid__row[b-3o4fi0ptr4] { grid-template-columns: 1fr; }
}
/* /Pages/Masters/Others/TransactionClassMaster.razor.rz.scp.css */
/* Transaction Class master — layout mirrors the other master shells. */

.tc-master__body[b-9mdjjtffhc],
.tc-master[b-9mdjjtffhc]  .tc-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.tc-master__form[b-9mdjjtffhc],
.tc-master[b-9mdjjtffhc]  .tc-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

.tc-master__detail[b-9mdjjtffhc] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tc-grid2[b-9mdjjtffhc] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}

/* Head row — Name stretched + Is Active beside it (legacy title bar). */
.tc-headrow[b-9mdjjtffhc] {
    display: flex;
    gap: 1.25rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.tc-headrow__name[b-9mdjjtffhc] {
    flex: 1 1 320px;
}

/* Two-column body — the legacy form layout. */
.tc-cols[b-9mdjjtffhc] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
    align-items: start;
}
.tc-col[b-9mdjjtffhc] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

/* Vertical switch stacks (legacy checkbox columns). */
.tc-switch-stack[b-9mdjjtffhc] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.tc-switch-stack .prod-master__switch[b-9mdjjtffhc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Boxed sub-panels (legacy GroupControl / pnlRCM / pnlTDS). */
.tc-box[b-9mdjjtffhc] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.5rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.35));
}
.tc-box__title[b-9mdjjtffhc] {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.75;
}

.tc-desc[b-9mdjjtffhc]  textarea {
    min-height: 2.6rem;
}

.tc-switch-row[b-9mdjjtffhc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 2rem;
    padding: 0.25rem 0;
}

.tc-toolbar[b-9mdjjtffhc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.tc-muted[b-9mdjjtffhc] {
    color: var(--shell-text-secondary);
    font-size: 0.85rem;
}

/* Grids keep a working minimum width and scroll horizontally inside their
   wrapper instead of squeezing the cell editors. */
.tc-grid-wrap[b-9mdjjtffhc] {
    overflow-x: auto;
}
.tc-grid[b-9mdjjtffhc] {
    margin-top: 0.25rem;
    min-width: 980px;
}
.tc-grid[b-9mdjjtffhc]  td .e-control-wrapper,
.tc-grid[b-9mdjjtffhc]  td .e-input-group {
    min-width: 110px;
}

.tc-filter-cell[b-9mdjjtffhc] {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.tc-filter-cell[b-9mdjjtffhc]  .e-input-group {
    flex: 1 1 auto;
}

.tc-embedded-toolbar[b-9mdjjtffhc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    width: 100%;
}

/* Page toolbar is a full-width flex row so margin-left:auto can push the
   Duplicate button to the right edge of the screen. */
.prod-master__toolbar[b-9mdjjtffhc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 100%;
}

/* Help panel — fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-9mdjjtffhc] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-9mdjjtffhc] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-9mdjjtffhc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-9mdjjtffhc] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-9mdjjtffhc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-9mdjjtffhc] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-9mdjjtffhc] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-9mdjjtffhc] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-9mdjjtffhc] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-9mdjjtffhc] { padding-left: 0.15rem; }

[b-9mdjjtffhc] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .ct-page__help[b-9mdjjtffhc],
    .ct-page__help--docked[b-9mdjjtffhc] { flex: 0 0 auto; width: 100%; overflow: visible; }
}

@media (max-width: 720px) {
    .tc-grid2[b-9mdjjtffhc] { grid-template-columns: minmax(0, 1fr); }
    .tc-cols[b-9mdjjtffhc] { grid-template-columns: minmax(0, 1fr); }
    .tc-master__body[b-9mdjjtffhc],
    .tc-master[b-9mdjjtffhc]  .tc-embedded-body { flex-wrap: wrap; }
}
/* /Pages/Masters/Payroll/AttendanceTypeMaster.razor.rz.scp.css */
/* Attendance Type — page-specific layout only. The header banner, help panel,
   toolbar, switch and input styling are GLOBAL (app.css: prod-master__*,
   ct-page__help*, master-*), so nothing here duplicates them. */

.at-master[b-0bcw719ysz] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.at-master__shell[b-0bcw719ysz] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.at-master__toolbar[b-0bcw719ysz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.at-master__panel[b-0bcw719ysz] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.at-master__detail[b-0bcw719ysz] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 1100px;
}

/* Field grids — three fields to a row, collapsing on narrow screens rather
   than scrolling sideways. */
.at-grid3[b-0bcw719ysz] {
    display: grid;
    gap: 0.35rem 1rem;
    align-items: end;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 760px) {
    .at-grid3[b-0bcw719ysz] { grid-template-columns: 1fr; }
}

.at-master__hint[b-0bcw719ysz] {
    margin: 0.1rem 0 0.2rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--shell-text-secondary, #5b6a7d);
}

.at-master__redirect[b-0bcw719ysz] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* The lone branch-wise switch should not stretch across the page. */
.at-master__switch-narrow[b-0bcw719ysz] {
    max-width: 340px;
}

/* ── Standard rate grid ── */
.at-master__tools[b-0bcw719ysz] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.at-master__count[b-0bcw719ysz] {
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* Wide table scrolls inside its own box; the page never scrolls sideways.
   Minimum height (convention for editable grids): an empty or one-row grid
   keeps a visible working area instead of collapsing to its header. */
.at-tablewrap[b-0bcw719ysz] {
    overflow-x: auto;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 4px;
    min-height: 220px;
}

.at-table[b-0bcw719ysz] {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.at-table th[b-0bcw719ysz],
.at-table td[b-0bcw719ysz] {
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid var(--shell-border, #e3e8ef);
    text-align: left;
    vertical-align: middle;
}

/* Headers wrap rather than truncate, like every other grid in the app. */
.at-table th[b-0bcw719ysz] {
    font-size: 0.72rem;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    color: var(--shell-text-secondary, #5b6a7d);
    background: var(--shell-app-background, #f4f6fa);
}

.at-td--center[b-0bcw719ysz] { text-align: center; }

/* Cell editors stay VISIBLY bordered at rest (convention: an operator must
   see where to type without focusing each cell first); focus brightens the
   border instead of revealing it. */
.at-cell[b-0bcw719ysz] {
    width: 100%;
    min-width: 0;
    padding: 0.25rem 0.35rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: var(--shell-panel-background, #fff);
    color: inherit;
    font: inherit;
}

.at-cell:focus[b-0bcw719ysz] {
    border-color: var(--shell-accent, #4b6bfb);
    outline: none;
}

.at-cell:disabled[b-0bcw719ysz] {
    border-color: transparent;
    background: transparent;
}

/* Numbers right-aligned, per the app-wide rule. */
.at-cell--num[b-0bcw719ysz] {
    text-align: right;
}

.at-rowbtn[b-0bcw719ysz] {
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: transparent;
    color: #b3261e;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.at-rowbtn:disabled[b-0bcw719ysz] {
    opacity: 0.5;
    cursor: default;
}

/* Embedded mode — editor left, help right. */
.at-embedded-body[b-0bcw719ysz] {
    display: flex;
    gap: 1rem;
    min-height: 0;
    height: 100%;
}

.at-embedded-main[b-0bcw719ysz] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
}

/* The help aside docks on the RIGHT: .ct-page__help is flex-sized globally
   (flex-basis var(--invnet-help-w)), which only works when its parent is a
   flex row - .master-body alone is not one. Same rule the other masters
   carry in their scoped CSS (LeavePolicyMaster's .lp-master__body). */
.at-master__body[b-0bcw719ysz],
.at-master[b-0bcw719ysz]  .at-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
/* /Pages/Masters/Payroll/BatchAssignmentPage.razor.rz.scp.css */
/* Batch Assignment — page-specific layout only. The header banner, help
   panel, toolbar and input styling are GLOBAL (app.css: prod-master__*,
   ct-page__help*, master-*), so nothing here duplicates them. */

.bab-page[b-awe2bu4icu] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.bab-shell[b-awe2bu4icu] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.bab-toolbar[b-awe2bu4icu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.bab-panel[b-awe2bu4icu] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.bab-form[b-awe2bu4icu] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 1200px;
}

.bab-grid[b-awe2bu4icu] {
    display: grid;
    gap: 0.55rem 1rem;
    align-items: end;
    grid-template-columns: repeat(auto-fit, minmax(240px, 340px));
}

.bab-grid--three[b-awe2bu4icu] { grid-template-columns: repeat(auto-fit, minmax(180px, 240px)); }
.bab-grid--dates[b-awe2bu4icu] { grid-template-columns: minmax(180px, 240px) auto; }
.bab-grid--filters[b-awe2bu4icu] { grid-template-columns: repeat(auto-fit, minmax(170px, 220px)); }

/* Plain-input fields (numerics and the date) share the bordered-cell look of
   the app's editable grids. */
.bab-field[b-awe2bu4icu] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    font-size: 0.78rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.bab-cell[b-awe2bu4icu] {
    width: 100%;
    min-width: 0;
    padding: 0.32rem 0.4rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    font: inherit;
    font-size: 0.86rem;
}

.bab-cell:focus[b-awe2bu4icu] {
    border-color: var(--shell-accent, #4b6bfb);
    outline: none;
}

.bab-cell:disabled[b-awe2bu4icu] {
    opacity: 0.55;
}

/* Numerics right-align, app-wide convention. */
.bab-num[b-awe2bu4icu] { text-align: right; }

.bab-check[b-awe2bu4icu] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.83rem;
    color: var(--shell-text-primary, inherit);
    padding-bottom: 0.35rem;
    cursor: pointer;
}

.bab-tools[b-awe2bu4icu] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.bab-count[b-awe2bu4icu] {
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.bab-placeholder[b-awe2bu4icu] {
    margin: 1rem;
    font-size: 0.85rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.bab-table th[b-awe2bu4icu],

.bab-notes[b-awe2bu4icu] {
    font-size: 0.82rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.bab-notes ul[b-awe2bu4icu] {
    margin: 0.3rem 0 0;
    padding-left: 1.2rem;
}

.bab-redirect[b-awe2bu4icu] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* The help aside docks on the RIGHT: .ct-page__help is flex-sized globally
   (flex-basis var(--invnet-help-w)), which only works when its parent is a
   flex row — .master-body alone is not one. Same rule the other masters
   carry in their scoped CSS. */
.bab-body[b-awe2bu4icu] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

/* Load Employees sits in the last cell of the filter grid, so it matches the
   height of the combo boxes beside it rather than the toolbar buttons above. */
[b-awe2bu4icu] .bab-loadbtn {
    width: 100%;
    justify-content: center;
    min-height: 34px;
}

/* Employee grid: cells sized for scanning a long list rather than editing it. */
[b-awe2bu4icu] .bab-grid-emp .e-rowcell {
    padding: 3px 8px;
    font-size: 0.85rem;
}

[b-awe2bu4icu] .bab-grid-emp .e-headercell {
    background: var(--shell-item-background-subtle, #f2f4f7);
}
/* /Pages/Masters/Payroll/ClaimTypeMaster.razor.rz.scp.css */
/* Claim Types — page-specific layout only. Header, help panel, toolbar
   and inputs are GLOBAL (app.css: prod-master__*, ct-page__help*, master-*). */

.cty[b-tiz7krtdq9] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cty__shell[b-tiz7krtdq9] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.cty__toolbar[b-tiz7krtdq9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.cty__panel[b-tiz7krtdq9] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.cty__detail[b-tiz7krtdq9] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 720px;
}

.cty-field[b-tiz7krtdq9] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.cty-grid2[b-tiz7krtdq9],
.cty-grid3[b-tiz7krtdq9] {
    display: grid;
    gap: 0.35rem 1rem;
    align-items: start;
}

.cty-grid2[b-tiz7krtdq9] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cty-grid3[b-tiz7krtdq9] { grid-template-columns: 0.6fr 1fr 0.8fr; }

@media (max-width: 720px) {
    .cty-grid2[b-tiz7krtdq9],
    .cty-grid3[b-tiz7krtdq9] {
        grid-template-columns: 1fr;
    }
}

.cty-status[b-tiz7krtdq9] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.9rem;
}

.cty-status__label[b-tiz7krtdq9] {
    font-size: 0.72rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.cty-audit[b-tiz7krtdq9] {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--shell-text-secondary, #5b6a7d);
}

.cty-frozen[b-tiz7krtdq9] {
    color: var(--shell-danger, #c0392b);
    font-weight: 600;
}

.cty__redirect[b-tiz7krtdq9] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.cty-embedded-body[b-tiz7krtdq9] {
    display: flex;
    gap: 1rem;
    min-height: 0;
    height: 100%;
}

.cty-embedded-main[b-tiz7krtdq9] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
}

.cty__body[b-tiz7krtdq9],
.cty[b-tiz7krtdq9]  .cty-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.cty-usage[b-tiz7krtdq9] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
}
/* /Pages/Masters/Payroll/DepartmentMaster.razor.rz.scp.css */
/* Department — page-specific layout only. The header banner, help panel,
   toolbar and input styling are GLOBAL (app.css: prod-master__*, ct-page__help*,
   master-*), so nothing here duplicates them. */

.dept-master[b-kyftovr6wt] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dept-master__shell[b-kyftovr6wt] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.dept-master__toolbar[b-kyftovr6wt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.dept-master__panel[b-kyftovr6wt] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.dept-master__detail[b-kyftovr6wt] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 640px;
}

/* Two fields per row on desktop; stacked once there is no room. */
.dept-grid2[b-kyftovr6wt] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1rem;
    align-items: end;
}

@media (max-width: 720px) {
    .dept-grid2[b-kyftovr6wt] {
        grid-template-columns: 1fr;
    }
}

.dept-master__hint[b-kyftovr6wt] {
    margin: 0.1rem 0 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--shell-text-secondary, #5b6a7d);
}

.dept-master__redirect[b-kyftovr6wt] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* Embedded mode — editor left, help right, matching the other dual-mode
   masters. */
.dept-embedded-body[b-kyftovr6wt] {
    display: flex;
    gap: 1rem;
    min-height: 0;
    height: 100%;
}

.dept-embedded-main[b-kyftovr6wt] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
}

/* Numeric field: right-aligned like every other number in the app. The global
   rule targets input.e-numerictextbox, which this deliberately is not. */
.dept-master__num input[b-kyftovr6wt] {
    text-align: right;
}

/* The help aside docks on the RIGHT: .ct-page__help is flex-sized globally
   (flex-basis var(--invnet-help-w)), which only works when its parent is a
   flex row - .master-body alone is not one. Same rule the other masters
   carry in their scoped CSS (CashCounterMaster's .su-master__body). */
.dept-master__body[b-kyftovr6wt],
.dept-master[b-kyftovr6wt]  .dept-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
/* /Pages/Masters/Payroll/DesignationMaster.razor.rz.scp.css */
/* Designation — page-specific layout only. The header banner, help panel,
   toolbar and input styling are GLOBAL (app.css: prod-master__*, ct-page__help*,
   master-*), so nothing here duplicates them. */

.desig-master[b-7oyteupzoy] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.desig-master__shell[b-7oyteupzoy] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.desig-master__toolbar[b-7oyteupzoy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.desig-master__panel[b-7oyteupzoy] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.desig-master__detail[b-7oyteupzoy] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 640px;
}

/* Two fields per row on desktop; stacked once there is no room. */
.desig-grid2[b-7oyteupzoy] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1rem;
    align-items: end;
}

@media (max-width: 720px) {
    .desig-grid2[b-7oyteupzoy] {
        grid-template-columns: 1fr;
    }
}

.desig-master__hint[b-7oyteupzoy] {
    margin: 0.1rem 0 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--shell-text-secondary, #5b6a7d);
}

.desig-master__redirect[b-7oyteupzoy] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* Embedded mode — editor left, help right, matching the other dual-mode
   masters. */
.desig-embedded-body[b-7oyteupzoy] {
    display: flex;
    gap: 1rem;
    min-height: 0;
    height: 100%;
}

.desig-embedded-main[b-7oyteupzoy] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
}

/* The help aside docks on the RIGHT: .ct-page__help is flex-sized globally
   (flex-basis var(--invnet-help-w)), which only works when its parent is a
   flex row - .master-body alone is not one. Same rule the other masters
   carry in their scoped CSS (CashCounterMaster's .su-master__body). */
.desig-master__body[b-7oyteupzoy],
.desig-master[b-7oyteupzoy]  .desig-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
/* /Pages/Masters/Payroll/EmployeeGroupMaster.razor.rz.scp.css */
/* Employee Group — page-specific layout only. The header banner, help panel,
   toolbar and input styling are GLOBAL (app.css: prod-master__*, ct-page__help*,
   master-*), so nothing here duplicates them. */

.egrp-master[b-13q943r2b7] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.egrp-master__shell[b-13q943r2b7] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.egrp-master__toolbar[b-13q943r2b7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.egrp-master__panel[b-13q943r2b7] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.egrp-master__detail[b-13q943r2b7] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 640px;
}

/* Two fields per row on desktop; stacked once there is no room. */
.egrp-grid2[b-13q943r2b7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1rem;
    align-items: end;
}

@media (max-width: 720px) {
    .egrp-grid2[b-13q943r2b7] {
        grid-template-columns: 1fr;
    }
}

.egrp-master__hint[b-13q943r2b7] {
    margin: 0.1rem 0 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--shell-text-secondary, #5b6a7d);
}

.egrp-master__redirect[b-13q943r2b7] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* Embedded mode — editor left, help right, matching the other dual-mode
   masters. */
.egrp-embedded-body[b-13q943r2b7] {
    display: flex;
    gap: 1rem;
    min-height: 0;
    height: 100%;
}

.egrp-embedded-main[b-13q943r2b7] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
}

/* The help aside docks on the RIGHT: .ct-page__help is flex-sized globally
   (flex-basis var(--invnet-help-w)), which only works when its parent is a
   flex row - .master-body alone is not one. Same rule the other masters
   carry in their scoped CSS (CashCounterMaster's .su-master__body). */
.egrp-master__body[b-13q943r2b7],
.egrp-master[b-13q943r2b7]  .egrp-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
/* /Pages/Masters/Payroll/EmployeeMaster.razor.rz.scp.css */
/* Two-pane body: form (left, scrolls) + Actions + dockable Help panel. */
.em-master__body[b-icd8x0b2mz] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.em-master__form[b-icd8x0b2mz] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    max-height: 100%;
    padding: 0.75rem 1rem 1.25rem;
}
.em-master__form[b-icd8x0b2mz]  .prod-master__subhead,
.em-master__detail[b-icd8x0b2mz]  .prod-master__subhead {
    margin: 0.75rem 0 0.25rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--shell-border, #e0e0e0);
    font-size: 0.92rem;
    font-weight: 600;
}
/* Field grid: strict two columns (legacy tab layout). */
.em-master[b-icd8x0b2mz]  .em-grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.25rem;
    align-items: center;
}
.em-master[b-icd8x0b2mz]  .em-grid2--full { grid-column: 1 / -1; }
/* Two inputs sharing one grid cell. */
.em-master[b-icd8x0b2mz]  .em-name-cell {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}
.em-master[b-icd8x0b2mz]  .em-name-cell > .e-input-group,
.em-master[b-icd8x0b2mz]  .em-name-cell > .e-float-input,
.em-master[b-icd8x0b2mz]  .em-name-cell > .e-control-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}
@media (max-width: 700px) {
    .em-master[b-icd8x0b2mz]  .em-grid2 { grid-template-columns: minmax(0, 1fr); }
}
.em-master[b-icd8x0b2mz]  .prod-master__switch {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.em-master[b-icd8x0b2mz]  .prod-master__switch label { font-weight: 600; font-size: 0.85rem; }
/* Behaviour switches flow in a wrapping row across the full grid width. */
.em-master[b-icd8x0b2mz]  .em-switch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

/* Side Actions pane (Ledger Account pattern). */
.em-master__action-pane[b-icd8x0b2mz] {
    flex: 0 0 230px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    align-self: flex-start;
    max-height: 100%;
}
.em-master__action-pane-title[b-icd8x0b2mz] {
    margin: 0 0 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}
.em-master[b-icd8x0b2mz]  .em-master__action-btn { width: 100%; }
.lc-hint[b-icd8x0b2mz] { font-size: 0.78rem; opacity: 0.75; }
/* Embedded mode: the same action buttons in a wrapping strip above the form. */
.em-master[b-icd8x0b2mz]  .em-embedded-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
/* Embedded mode: form left, dockable Help panel right. */
.em-master[b-icd8x0b2mz]  .em-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
.em-master[b-icd8x0b2mz]  .em-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* Help panel (mirrors the Ledger Account help panel). */
.ct-page__help[b-icd8x0b2mz] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-icd8x0b2mz] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-icd8x0b2mz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-icd8x0b2mz] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-icd8x0b2mz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-icd8x0b2mz] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-icd8x0b2mz] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-icd8x0b2mz] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-icd8x0b2mz] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-icd8x0b2mz] { padding-left: 0.15rem; }

[b-icd8x0b2mz] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .em-master__body[b-icd8x0b2mz] { flex-direction: column; }
    .em-master__action-pane[b-icd8x0b2mz] { flex: 0 0 auto; }
    .ct-page__help[b-icd8x0b2mz],
    .ct-page__help--docked[b-icd8x0b2mz] { flex: 0 0 auto; width: 100%; overflow: visible; }
}
/* /Pages/Masters/Payroll/HolidayMaster.razor.rz.scp.css */
/* Holiday Settings — page-specific layout only. The header banner, help panel,
   toolbar and input styling are GLOBAL (app.css: prod-master__*, ct-page__help*,
   master-*), so nothing here duplicates them. */

.hol-master[b-i3jtiq1p55] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hol-master__shell[b-i3jtiq1p55] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.hol-master__toolbar[b-i3jtiq1p55] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.hol-master__panel[b-i3jtiq1p55] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.hol-master__detail[b-i3jtiq1p55] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 640px;
}

/* Two fields per row on desktop; stacked once there is no room. */
.hol-grid2[b-i3jtiq1p55] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1rem;
    align-items: end;
}

@media (max-width: 720px) {
    .hol-grid2[b-i3jtiq1p55] {
        grid-template-columns: 1fr;
    }
}

.hol-master__hint[b-i3jtiq1p55] {
    margin: 0.1rem 0 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--shell-text-secondary, #5b6a7d);
}

.hol-master__redirect[b-i3jtiq1p55] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* Embedded mode — editor left, help right, matching the other dual-mode
   masters. */
.hol-embedded-body[b-i3jtiq1p55] {
    display: flex;
    gap: 1rem;
    min-height: 0;
    height: 100%;
}

.hol-embedded-main[b-i3jtiq1p55] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
}

/* The help aside docks on the RIGHT: .ct-page__help is flex-sized globally
   (flex-basis var(--invnet-help-w)), which only works when its parent is a
   flex row - .master-body alone is not one. Same rule the other masters
   carry in their scoped CSS (CashCounterMaster's .su-master__body). */
.hol-master__body[b-i3jtiq1p55],
.hol-master[b-i3jtiq1p55]  .hol-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
/* /Pages/Masters/Payroll/LeaveAccrualProcessingPage.razor.rz.scp.css */
/* Leave Accrual Processing — page-specific layout only. Header banner, help
   panel, toolbar and input styling are GLOBAL (app.css: prod-master__*,
   ct-page__help*, master-*). */

.lap-page[b-hjwfxeae27] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.lap-shell[b-hjwfxeae27] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.lap-toolbar[b-hjwfxeae27] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.lap-panel[b-hjwfxeae27] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.lap-form[b-hjwfxeae27] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 1200px;
}

.lap-grid[b-hjwfxeae27] {
    display: grid;
    gap: 0.55rem 1rem;
    align-items: end;
    grid-template-columns: repeat(auto-fit, minmax(240px, 340px));
}

/* Plain-input fields share the bordered-cell look of the app's editable
   grids (always visible, never transparent-until-focus). */
.lap-field[b-hjwfxeae27] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    font-size: 0.78rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.lap-cell[b-hjwfxeae27] {
    width: 100%;
    min-width: 0;
    padding: 0.32rem 0.4rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    font: inherit;
    font-size: 0.86rem;
}

.lap-cell:focus[b-hjwfxeae27] {
    border-color: var(--shell-accent, #4b6bfb);
    outline: none;
}

.lap-cell:disabled[b-hjwfxeae27] { opacity: 0.55; }

/* Numerics right-align, app-wide convention. */
.lap-num[b-hjwfxeae27] { text-align: right; }

.lap-check[b-hjwfxeae27] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.83rem;
    color: var(--shell-text-primary, inherit);
    cursor: pointer;
    max-width: 720px;
}

.lap-check input[b-hjwfxeae27] { margin-top: 0.2rem; }

.lap-tools[b-hjwfxeae27] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.lap-count[b-hjwfxeae27] {
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* Wide table scrolls inside its own box; min-height per the editable-grid
   convention keeps a visible working area. */
.lap-tablewrap[b-hjwfxeae27] {
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 4px;
    min-height: 220px;
    max-height: 28rem;
}

.lap-placeholder[b-hjwfxeae27] {
    margin: 1rem;
    font-size: 0.85rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.lap-table[b-hjwfxeae27] {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.lap-table th[b-hjwfxeae27],
.lap-table td[b-hjwfxeae27] {
    padding: 0.28rem 0.4rem;
    border-bottom: 1px solid var(--shell-border, #e3e8ef);
    text-align: left;
    vertical-align: middle;
}

.lap-table th.lap-num[b-hjwfxeae27],
.lap-table td.lap-num[b-hjwfxeae27] { text-align: right; }

/* Headers wrap rather than truncate; the header row stays visible. */
.lap-table th[b-hjwfxeae27] {
    font-size: 0.72rem;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    color: var(--shell-text-secondary, #5b6a7d);
    background: var(--shell-app-background, #f4f6fa);
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Row states: due = accent tint, posted = muted, projected = italic muted. */
.lap-row--due td[b-hjwfxeae27] {
    background: color-mix(in srgb, var(--shell-accent, #4b6bfb) 7%, transparent);
}

.lap-row--posted td[b-hjwfxeae27] { opacity: 0.6; }

.lap-row--projected td[b-hjwfxeae27] {
    font-style: italic;
    color: var(--shell-text-secondary, #5b6a7d);
}

.lap-row--skipped td[b-hjwfxeae27] {
    color: var(--shell-text-secondary, #5b6a7d);
}

.lap-notes[b-hjwfxeae27] {
    font-size: 0.82rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.lap-notes ul[b-hjwfxeae27] {
    margin: 0.3rem 0 0;
    padding-left: 1.2rem;
}

/* The help panel's vocabulary table. */
.lap-help-table[b-hjwfxeae27] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    margin: 0.4rem 0;
}

.lap-help-table th[b-hjwfxeae27],
.lap-help-table td[b-hjwfxeae27] {
    padding: 0.2rem 0.35rem;
    border: 1px solid var(--shell-border, #e3e8ef);
    text-align: left;
}

.lap-redirect[b-hjwfxeae27] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* The help aside docks on the RIGHT (flex-basis works only in a flex row). */
.lap-body[b-hjwfxeae27] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
/* /Pages/Masters/Payroll/LeaveApprovalRuleMaster.razor.rz.scp.css */
/* Leave Approval Rules — page-specific layout only. Header banner, help
   panel, toolbar and input styling are GLOBAL (app.css: prod-master__*,
   ct-page__help*, master-*). */

.larm-page[b-ko6il9ri7q] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.larm-shell[b-ko6il9ri7q] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.larm-toolbar[b-ko6il9ri7q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.larm-panel[b-ko6il9ri7q] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.larm-form[b-ko6il9ri7q] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.larm-hint[b-ko6il9ri7q] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
    max-width: 860px;
}

.larm-tools[b-ko6il9ri7q] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.larm-count[b-ko6il9ri7q] {
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* Wide table scrolls inside its own box; min-height per the editable-grid
   convention keeps a visible working area for an empty grid. */
.larm-tablewrap[b-ko6il9ri7q] {
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 4px;
    min-height: 220px;
    max-height: 28rem;
}

.larm-placeholder[b-ko6il9ri7q] {
    margin: 1rem;
    font-size: 0.85rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.larm-table[b-ko6il9ri7q] {
    width: 100%;
    min-width: 1420px;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.larm-table th[b-ko6il9ri7q],
.larm-table td[b-ko6il9ri7q] {
    padding: 0.28rem 0.4rem;
    border-bottom: 1px solid var(--shell-border, #e3e8ef);
    text-align: left;
    vertical-align: middle;
}

/* Headers wrap rather than truncate; the header row stays visible. */
.larm-table th[b-ko6il9ri7q] {
    font-size: 0.72rem;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    color: var(--shell-text-secondary, #5b6a7d);
    background: var(--shell-app-background, #f4f6fa);
    position: sticky;
    top: 0;
    z-index: 1;
}

.larm-table th.larm-num[b-ko6il9ri7q] { text-align: right; }

/* Cell editors visibly bordered AT REST (never transparent-until-focus) —
   the editable-grid convention. */
.larm-cell[b-ko6il9ri7q] {
    width: 100%;
    min-width: 0;
    padding: 0.32rem 0.4rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    font: inherit;
    font-size: 0.86rem;
}

.larm-cell:focus[b-ko6il9ri7q] {
    border-color: var(--shell-accent, #4b6bfb);
    outline: none;
}

.larm-cell:disabled[b-ko6il9ri7q] { opacity: 0.55; }

/* Numerics right-align, app-wide convention. */
.larm-num[b-ko6il9ri7q] { text-align: right; }

.larm-td--center[b-ko6il9ri7q] { text-align: center; }

/* In-grid Syncfusion combo sized like the plain cells. */
[b-ko6il9ri7q] .larm-cellcombo {
    width: 100%;
    min-width: 150px;
}

.larm-rowbtn[b-ko6il9ri7q] {
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-secondary, #5b6a7d);
    font-size: 0.78rem;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
}

.larm-rowbtn:hover:not(:disabled)[b-ko6il9ri7q] {
    color: var(--shell-danger, #c0392b);
    border-color: var(--shell-danger, #c0392b);
}

.larm-rowbtn:disabled[b-ko6il9ri7q] { opacity: 0.55; cursor: default; }

/* ── The condition sub-row of a COMPLEX rule ──────────────────────────────
   A full-width row under its rule: an expression needs several lines and
   reads far better here than squeezed into one more narrow cell. */
.larm-condrow > td[b-ko6il9ri7q] {
    background: var(--shell-app-background, #f4f6fa);
    padding: 0.45rem 0.6rem 0.6rem;
}

.larm-cond[b-ko6il9ri7q] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 1000px;
}

.larm-cond__head[b-ko6il9ri7q] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.larm-cond__label[b-ko6il9ri7q] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--shell-text-secondary, #5b6a7d);
}

.larm-cond__editor[b-ko6il9ri7q] {
    width: 100%;
    resize: vertical;
    min-height: 2.6rem;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-size: 0.82rem;
    line-height: 1.35;
}

/* ── The on-page condition crib (under the condition editor) ──────────────
   Collapsed by default so the grid stays tidy; a panel-coloured card so it
   reads as its own thing against the sub-row's app background. */
.larm-ref[b-ko6il9ri7q] {
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 4px;
    background: var(--shell-panel-background, #fff);
    overflow: hidden;
}

.larm-ref__toggle[b-ko6il9ri7q] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.3rem 0.5rem;
    border: none;
    background: transparent;
    color: var(--shell-text-secondary, #5b6a7d);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.larm-ref__toggle:hover[b-ko6il9ri7q] { color: var(--shell-accent, #4b6bfb); }

.larm-ref__chevron[b-ko6il9ri7q] {
    font-size: 0.7rem;
    line-height: 1;
}

.larm-ref__count[b-ko6il9ri7q] {
    margin-left: auto;
    font-weight: 400;
    opacity: 0.8;
}

.larm-ref__body[b-ko6il9ri7q] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem 0.5rem;
    border-top: 1px solid var(--shell-border, #e3e8ef);
}

/* Long list — scrolls inside its own box rather than pushing the grid down. */
.larm-ref__tablewrap[b-ko6il9ri7q] {
    overflow: auto;
    max-height: 18rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 4px;
}

/* Group headings inside the variable tables (Request / Employee / Balance /
   Approval-time) — a full-width band, so ~60 names read as four short lists
   rather than one wall. */
.larm-reftable__grouprow th[b-ko6il9ri7q] {
    background: var(--shell-app-background, #eef2f7);
    color: var(--shell-text-primary, inherit);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: left;
    padding: 0.22rem 0.4rem;
    position: static;
    border-bottom: 1px solid var(--shell-border, #d8dee7);
}

/* Shares .larm-helptable (wrapping headers, small type); only the name column
   differs — it is a click target, so it must not wrap mid-name. */
.larm-reftable th[b-ko6il9ri7q] {
    position: sticky;
    top: 0;
    z-index: 1;
}

.larm-reftable td:first-child[b-ko6il9ri7q] { white-space: nowrap; }

.larm-ref__pill[b-ko6il9ri7q] {
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: var(--shell-app-background, #f4f6fa);
    color: var(--shell-text-primary, inherit);
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-size: 0.74rem;
    padding: 0.08rem 0.35rem;
    cursor: pointer;
}

.larm-ref__pill:hover:not(:disabled)[b-ko6il9ri7q] {
    border-color: var(--shell-accent, #4b6bfb);
    color: var(--shell-accent, #4b6bfb);
}

.larm-ref__pill:disabled[b-ko6il9ri7q] { opacity: 0.55; cursor: default; }

.larm-ref__pill--wide[b-ko6il9ri7q] {
    display: inline-block;
    max-width: 100%;
    text-align: left;
    white-space: normal;
    word-break: break-word;
}

.larm-ref__subhead[b-ko6il9ri7q] {
    margin: 0.35rem 0 0;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--shell-text-secondary, #5b6a7d);
}

.larm-ref__crib[b-ko6il9ri7q] {
    display: grid;
    grid-template-columns: minmax(6.5rem, auto) 1fr;
    gap: 0.12rem 0.6rem;
    margin: 0;
    font-size: 0.76rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.larm-ref__crib dt[b-ko6il9ri7q] {
    font-weight: 600;
    color: var(--shell-text-primary, inherit);
}

.larm-ref__crib dd[b-ko6il9ri7q] {
    margin: 0;
    min-width: 0;
    word-break: break-word;
}

.larm-ref__crib code[b-ko6il9ri7q],
.larm-ref__gloss code[b-ko6il9ri7q] {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-size: 0.74rem;
}

.larm-ref__examples[b-ko6il9ri7q] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}

.larm-ref__examples li[b-ko6il9ri7q] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
}

.larm-ref__gloss[b-ko6il9ri7q] {
    font-size: 0.74rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* ── Test dialog ──────────────────────────────────────────────────────── */
.larm-test[b-ko6il9ri7q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.larm-test__legend[b-ko6il9ri7q] {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--shell-text-secondary, #5b6a7d);
}

.larm-test__legendrow[b-ko6il9ri7q] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* The catalogue is long — the inputs scroll inside the dialog, so the
   condition box and the footer buttons stay put. */
.larm-test__vars[b-ko6il9ri7q] {
    overflow-y: auto;
    max-height: 42vh;
    padding-right: 0.2rem;
}

.larm-test__group[b-ko6il9ri7q] {
    margin: 0.6rem 0 0.25rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--shell-text-primary, inherit);
    border-bottom: 1px solid var(--shell-border, #e3e8ef);
    padding-bottom: 0.15rem;
}

.larm-test__grouphint[b-ko6il9ri7q] {
    font-weight: 400;
    font-size: 0.72rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.larm-test__grid[b-ko6il9ri7q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.55rem 0.9rem;
}

.larm-test__field[b-ko6il9ri7q] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.larm-test__field label[b-ko6il9ri7q] {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--shell-text-secondary, #5b6a7d);
}

.larm-test__type[b-ko6il9ri7q] {
    font-weight: 400;
    opacity: 0.75;
}

/* ── The condition help section ───────────────────────────────────────── */
.larm-help-subhead[b-ko6il9ri7q] {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--shell-text-primary, inherit);
}

/* ── The variable table in the help panel ─────────────────────────────── */
.larm-helptablewrap[b-ko6il9ri7q] {
    overflow: auto;
    max-height: 26rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 4px;
}

.larm-helptable[b-ko6il9ri7q] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
}

.larm-helptable th[b-ko6il9ri7q],
.larm-helptable td[b-ko6il9ri7q] {
    padding: 0.2rem 0.4rem;
    border-bottom: 1px solid var(--shell-border, #e3e8ef);
    text-align: left;
    vertical-align: top;
    white-space: normal;
    word-break: break-word;
}

.larm-helptable th[b-ko6il9ri7q] {
    font-weight: 600;
    color: var(--shell-text-secondary, #5b6a7d);
    background: var(--shell-app-background, #f4f6fa);
}

.larm-redirect[b-ko6il9ri7q] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* The help aside docks on the RIGHT (flex-basis works only in a flex row). */
.larm-body[b-ko6il9ri7q] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
/* /Pages/Masters/Payroll/LeaveApprovalsPage.razor.rz.scp.css */
/* Leave Approvals — page-specific layout only. Header banner, help panel,
   toolbar, switch and input styling are GLOBAL (app.css: prod-master__*,
   ct-page__help*, master-*). */

.lapp-page[b-4ngpr8mll7] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.lapp-shell[b-4ngpr8mll7] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.lapp-toolbar[b-4ngpr8mll7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.lapp-panel[b-4ngpr8mll7] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

/* Wide table scrolls inside its own box. */
.lapp-tablewrap[b-4ngpr8mll7] {
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 4px;
    min-height: 220px;
    max-height: 22rem;
}

.lapp-placeholder[b-4ngpr8mll7] {
    margin: 1rem;
    font-size: 0.85rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.lapp-table[b-4ngpr8mll7] {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.lapp-table th[b-4ngpr8mll7],
.lapp-table td[b-4ngpr8mll7] {
    padding: 0.3rem 0.45rem;
    border-bottom: 1px solid var(--shell-border, #e3e8ef);
    text-align: left;
    vertical-align: middle;
}

/* Headers wrap rather than truncate; the header row stays visible. */
.lapp-table th[b-4ngpr8mll7] {
    font-size: 0.72rem;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    color: var(--shell-text-secondary, #5b6a7d);
    background: var(--shell-app-background, #f4f6fa);
    position: sticky;
    top: 0;
    z-index: 1;
}

.lapp-table th.lapp-num[b-4ngpr8mll7] { text-align: right; }

/* Numerics right-align, app-wide convention. */
.lapp-num[b-4ngpr8mll7] { text-align: right; }

.lapp-row[b-4ngpr8mll7] { cursor: pointer; }

.lapp-row--open td[b-4ngpr8mll7] {
    background: color-mix(in srgb, var(--shell-accent, #4b6bfb) 8%, transparent);
}

.lapp-loadrow[b-4ngpr8mll7] {
    display: flex;
    align-items: end;
    gap: 0.6rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.lapp-detailhead[b-4ngpr8mll7] { margin-top: 1rem; }

.lapp-detail[b-4ngpr8mll7] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* Request vs decision, side by side. */
.lapp-compare[b-4ngpr8mll7] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    max-width: 1100px;
}

.lapp-card[b-4ngpr8mll7] {
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 6px;
    padding: 0.7rem 0.9rem 0.9rem;
    background: var(--shell-panel-background, #fff);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.lapp-card h3[b-4ngpr8mll7] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.lapp-dl[b-4ngpr8mll7] {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.8rem;
    font-size: 0.86rem;
}

.lapp-dl dt[b-4ngpr8mll7] {
    color: var(--shell-text-secondary, #5b6a7d);
    font-size: 0.78rem;
}

.lapp-dl dd[b-4ngpr8mll7] { margin: 0; }

.lapp-switch[b-4ngpr8mll7] { max-width: 100%; }

.lapp-editgrid[b-4ngpr8mll7] {
    display: grid;
    gap: 0.55rem 0.8rem;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    align-items: end;
}

.lapp-field[b-4ngpr8mll7] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.lapp-field--inline[b-4ngpr8mll7] { max-width: 420px; }

.lapp-input[b-4ngpr8mll7] {
    padding: 0.36rem 0.45rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    font: inherit;
    font-size: 0.86rem;
}

.lapp-input:focus[b-4ngpr8mll7] {
    border-color: var(--shell-accent, #4b6bfb);
    outline: none;
}

.lapp-input:disabled[b-4ngpr8mll7] { opacity: 0.55; }

.lapp-actions[b-4ngpr8mll7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

[b-4ngpr8mll7] .lapp-danger .e-btn-icon,
[b-4ngpr8mll7] .lapp-danger {
    color: var(--shell-danger, #c0392b);
}

/* The trail timeline. */
.lapp-trail[b-4ngpr8mll7] {
    margin: 0 0 0.5rem 1.1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.82rem;
}

.lapp-trail li[b-4ngpr8mll7] { line-height: 1.35; }

.lapp-trail__meta[b-4ngpr8mll7],
.lapp-trail__values[b-4ngpr8mll7],
.lapp-trail__remarks[b-4ngpr8mll7] {
    display: inline-block;
    margin-left: 0.5rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.lapp-trail__remarks[b-4ngpr8mll7] { font-style: italic; }

.lapp-redirect[b-4ngpr8mll7] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* The help aside docks on the RIGHT (flex-basis works only in a flex row). */
.lapp-body[b-4ngpr8mll7] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
/* /Pages/Masters/Payroll/LeaveBalancePage.razor.rz.scp.css */
/* Leave Balance — page-specific layout only; the balance rendering itself is
   the LeaveBalancePanel component's own scoped CSS. Header banner, help
   panel, toolbar and input styling are GLOBAL (app.css). */

.lbp-page[b-lqnvhkxgp3] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.lbp-shell[b-lqnvhkxgp3] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.lbp-toolbar[b-lqnvhkxgp3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.lbp-panel[b-lqnvhkxgp3] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.lbp-form[b-lqnvhkxgp3] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 1200px;
}

.lbp-grid[b-lqnvhkxgp3] {
    display: grid;
    gap: 0.55rem 1rem;
    align-items: end;
    grid-template-columns: repeat(auto-fit, minmax(260px, 380px));
}

.lbp-redirect[b-lqnvhkxgp3] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* The help aside docks on the RIGHT (flex-basis works only in a flex row). */
.lbp-body[b-lqnvhkxgp3] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
/* /Pages/Masters/Payroll/LeavePolicyMaster.razor.rz.scp.css */
/* Leave Policy — page-specific layout only. The header banner, help panel,
   toolbar, switch and input styling are GLOBAL (app.css: prod-master__*,
   ct-page__help*, master-*), so nothing here duplicates them. */

.lp-master[b-gtm78oyo7o] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.lp-master__shell[b-gtm78oyo7o] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.lp-master__toolbar[b-gtm78oyo7o] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.lp-master__panel[b-gtm78oyo7o] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.lp-master__detail[b-gtm78oyo7o] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 1100px;
}

/* Field grids — three fields to a row, two for the wide switch labels, both
   collapsing on narrow screens rather than scrolling sideways. */
.lp-grid2[b-gtm78oyo7o],
.lp-grid3[b-gtm78oyo7o] {
    display: grid;
    gap: 0.35rem 1rem;
    /* Cells start at the top: every cell is now a control PLUS its hint line
       (.lp-field), and hints wrap to different heights — bottom-aligning would
       stagger the controls. */
    align-items: start;
}

/* One field = the control with its .app-field-hint sitting directly under it
   (the app-wide hint convention; type styling is global, the stacking is here). */
.lp-field[b-gtm78oyo7o] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lp-grid2[b-gtm78oyo7o] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-grid3[b-gtm78oyo7o] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 760px) {
    .lp-grid2[b-gtm78oyo7o],
    .lp-grid3[b-gtm78oyo7o] { grid-template-columns: 1fr; }
}

/* The band-grid explanation is a section-level hint: same muted type as the
   per-control hints (.app-field-hint, global) but with breathing room above
   the table it introduces. */
.app-field-hint + .lp-master__tools[b-gtm78oyo7o],
.prod-master__subhead + .app-field-hint[b-gtm78oyo7o] {
    margin-top: 0.2rem;
}

.lp-master__redirect[b-gtm78oyo7o] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* ── Eligibility band grid ── */
.lp-master__tools[b-gtm78oyo7o] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.lp-master__count[b-gtm78oyo7o] {
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* Wide table scrolls inside its own box; the page never scrolls sideways.
   Minimum height (convention for editable grids): an empty or one-row grid
   keeps a visible working area instead of collapsing to its header. */
.lp-tablewrap[b-gtm78oyo7o] {
    overflow-x: auto;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 4px;
    min-height: 220px;
}

.lp-table[b-gtm78oyo7o] {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.lp-table th[b-gtm78oyo7o],
.lp-table td[b-gtm78oyo7o] {
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid var(--shell-border, #e3e8ef);
    text-align: left;
    vertical-align: middle;
}

/* Headers wrap rather than truncate, like every other grid in the app. */
.lp-table th[b-gtm78oyo7o] {
    font-size: 0.72rem;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    color: var(--shell-text-secondary, #5b6a7d);
    background: var(--shell-app-background, #f4f6fa);
}

/* Sentinel note under a header caption (0 = unlimited, -1 = entire balance):
   the legacy packed these into the caption itself; a quieter second line keeps
   the header readable without losing the meaning. */
.lp-table th .lp-th-note[b-gtm78oyo7o] {
    display: block;
    font-weight: 400;
    font-size: 0.66rem;
    opacity: 0.85;
}

.lp-td--center[b-gtm78oyo7o] { text-align: center; }

/* Cell editors stay VISIBLY bordered at rest (convention: an operator must
   see where to type without focusing each cell first); focus brightens the
   border instead of revealing it. */
.lp-cell[b-gtm78oyo7o] {
    width: 100%;
    min-width: 0;
    padding: 0.25rem 0.35rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: var(--shell-panel-background, #fff);
    color: inherit;
    font: inherit;
}

.lp-cell:focus[b-gtm78oyo7o] {
    border-color: var(--shell-accent, #4b6bfb);
    outline: none;
}

.lp-cell:disabled[b-gtm78oyo7o] {
    border-color: transparent;
    background: transparent;
}

/* Numbers right-aligned, per the app-wide rule. */
.lp-cell--num[b-gtm78oyo7o] {
    text-align: right;
}

.lp-rowbtn[b-gtm78oyo7o] {
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: transparent;
    color: #b3261e;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.lp-rowbtn:disabled[b-gtm78oyo7o] {
    opacity: 0.5;
    cursor: default;
}

/* Embedded mode — editor left, help right. */
.lp-embedded-body[b-gtm78oyo7o] {
    display: flex;
    gap: 1rem;
    min-height: 0;
    height: 100%;
}

.lp-embedded-main[b-gtm78oyo7o] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
}

/* The help aside docks on the RIGHT: .ct-page__help is flex-sized globally
   (flex-basis var(--invnet-help-w)), which only works when its parent is a
   flex row - .master-body alone is not one. Same rule the other masters
   carry in their scoped CSS (ShiftMaster's .shift-master__body). */
.lp-master__body[b-gtm78oyo7o],
.lp-master[b-gtm78oyo7o]  .lp-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
/* /Pages/Masters/Payroll/LeaveRequestPage.razor.rz.scp.css */
/* Leave Request — page-specific layout only. Header banner, help panel,
   toolbar, switch and input styling are GLOBAL (app.css: prod-master__*,
   ct-page__help*, master-*). */

.lreq-page[b-7yle01mvyx] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.lreq-shell[b-7yle01mvyx] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.lreq-toolbar[b-7yle01mvyx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.lreq-panel[b-7yle01mvyx] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.lreq-form[b-7yle01mvyx] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 1200px;
}

.lreq-grid[b-7yle01mvyx] {
    display: grid;
    gap: 0.55rem 1rem;
    align-items: end;
    grid-template-columns: repeat(auto-fit, minmax(220px, 320px));
}

.lreq-grid--wide[b-7yle01mvyx] {
    grid-template-columns: repeat(auto-fit, minmax(300px, 480px));
}

.lreq-switch[b-7yle01mvyx] {
    max-width: 480px;
}

.lreq-field[b-7yle01mvyx] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.lreq-input[b-7yle01mvyx] {
    padding: 0.36rem 0.45rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    font: inherit;
    font-size: 0.86rem;
}

.lreq-input:focus[b-7yle01mvyx] {
    border-color: var(--shell-accent, #4b6bfb);
    outline: none;
}

.lreq-input:disabled[b-7yle01mvyx] { opacity: 0.55; }

/* Numerics right-align, app-wide convention. */
.lreq-num[b-7yle01mvyx] { text-align: right; }

.lreq-hint[b-7yle01mvyx] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
    max-width: 860px;
}

/* Wide table scrolls inside its own box. */
.lreq-tablewrap[b-7yle01mvyx] {
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 4px;
    min-height: 220px;
    max-height: 26rem;
}

.lreq-placeholder[b-7yle01mvyx] {
    margin: 1rem;
    font-size: 0.85rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.lreq-table[b-7yle01mvyx] {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.lreq-table th[b-7yle01mvyx],
.lreq-table td[b-7yle01mvyx] {
    padding: 0.3rem 0.45rem;
    border-bottom: 1px solid var(--shell-border, #e3e8ef);
    text-align: left;
    vertical-align: middle;
}

/* Headers wrap rather than truncate; the header row stays visible. */
.lreq-table th[b-7yle01mvyx] {
    font-size: 0.72rem;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    color: var(--shell-text-secondary, #5b6a7d);
    background: var(--shell-app-background, #f4f6fa);
    position: sticky;
    top: 0;
    z-index: 1;
}

.lreq-table th.lreq-num[b-7yle01mvyx] { text-align: right; }

.lreq-row[b-7yle01mvyx] { cursor: pointer; }

.lreq-row--open td[b-7yle01mvyx] {
    background: color-mix(in srgb, var(--shell-accent, #4b6bfb) 8%, transparent);
}

/* Status chips — colors echo the app-wide status row tints. */
.lreq-status[b-7yle01mvyx] {
    display: inline-block;
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--shell-app-background, #eef1f6);
    color: var(--shell-text-secondary, #5b6a7d);
}

.lreq-status--submitted[b-7yle01mvyx],
.lreq-status--recommended[b-7yle01mvyx] {
    background: color-mix(in srgb, var(--shell-accent, #4b6bfb) 14%, transparent);
    color: var(--shell-accent, #3552d3);
}

.lreq-status--approved[b-7yle01mvyx] {
    background: color-mix(in srgb, #2e9e5b 16%, transparent);
    color: #23824a;
}

.lreq-status--rejected[b-7yle01mvyx],
.lreq-status--cancelled[b-7yle01mvyx] {
    background: color-mix(in srgb, var(--shell-danger, #c0392b) 14%, transparent);
    color: var(--shell-danger, #c0392b);
}

/* The trail timeline inside the expanded row. */
.lreq-trailrow td[b-7yle01mvyx] {
    background: var(--shell-app-background, #f7f9fc);
}

.lreq-trail[b-7yle01mvyx] {
    margin: 0.4rem 0 0.5rem 1.1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.82rem;
}

.lreq-trail li[b-7yle01mvyx] { line-height: 1.35; }

.lreq-trail__meta[b-7yle01mvyx],
.lreq-trail__values[b-7yle01mvyx],
.lreq-trail__remarks[b-7yle01mvyx] {
    display: inline-block;
    margin-left: 0.5rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.lreq-trail__remarks[b-7yle01mvyx] { font-style: italic; }

.lreq-redirect[b-7yle01mvyx] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* The help aside docks on the RIGHT (flex-basis works only in a flex row). */
.lreq-body[b-7yle01mvyx] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

/* Row-level "Send" (manual notification) in My Requests — a quiet secondary
   control, sized to sit inside a table row without stretching it. */
.lreq-rowbtn[b-7yle01mvyx] {
    font: inherit;
    font-size: 0.75rem;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--shell-border, #c9d1dc);
    border-radius: 0.4rem;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    cursor: pointer;
}

.lreq-rowbtn:hover:not(:disabled)[b-7yle01mvyx] {
    border-color: var(--shell-accent, #3b6fd4);
    color: var(--shell-accent, #3b6fd4);
}

.lreq-rowbtn:disabled[b-7yle01mvyx] {
    opacity: 0.5;
    cursor: default;
}
/* /Pages/Masters/Payroll/ManualLeavePostingPage.razor.rz.scp.css */
/* Manual Leave Posting — page-specific layout only. Header banner, help
   panel, toolbar and input styling are GLOBAL (app.css: prod-master__*,
   ct-page__help*, master-*). */

.mlp-page[b-wwjqucsdp3] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mlp-shell[b-wwjqucsdp3] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.mlp-toolbar[b-wwjqucsdp3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.mlp-panel[b-wwjqucsdp3] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.mlp-form[b-wwjqucsdp3] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 1200px;
}

.mlp-grid[b-wwjqucsdp3] {
    display: grid;
    gap: 0.55rem 1rem;
    align-items: end;
    grid-template-columns: repeat(auto-fit, minmax(260px, 380px));
}

.mlp-hint[b-wwjqucsdp3] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
    max-width: 860px;
}

.mlp-tools[b-wwjqucsdp3] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.mlp-count[b-wwjqucsdp3] {
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* Wide table scrolls inside its own box; min-height per the editable-grid
   convention keeps a visible working area for an empty grid. */
.mlp-tablewrap[b-wwjqucsdp3] {
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 4px;
    min-height: 220px;
    max-height: 26rem;
}

.mlp-placeholder[b-wwjqucsdp3] {
    margin: 1rem;
    font-size: 0.85rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.mlp-table[b-wwjqucsdp3] {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.mlp-table th[b-wwjqucsdp3],
.mlp-table td[b-wwjqucsdp3] {
    padding: 0.28rem 0.4rem;
    border-bottom: 1px solid var(--shell-border, #e3e8ef);
    text-align: left;
    vertical-align: middle;
}

/* Headers wrap rather than truncate; the header row stays visible. */
.mlp-table th[b-wwjqucsdp3] {
    font-size: 0.72rem;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    color: var(--shell-text-secondary, #5b6a7d);
    background: var(--shell-app-background, #f4f6fa);
    position: sticky;
    top: 0;
    z-index: 1;
}

.mlp-table th.mlp-num[b-wwjqucsdp3] { text-align: right; }

/* Cell editors visibly bordered AT REST (never transparent-until-focus) —
   the editable-grid convention. */
.mlp-cell[b-wwjqucsdp3] {
    width: 100%;
    min-width: 0;
    padding: 0.32rem 0.4rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    font: inherit;
    font-size: 0.86rem;
}

.mlp-cell:focus[b-wwjqucsdp3] {
    border-color: var(--shell-accent, #4b6bfb);
    outline: none;
}

.mlp-cell:disabled[b-wwjqucsdp3] { opacity: 0.55; }

/* Numerics right-align, app-wide convention. */
.mlp-num[b-wwjqucsdp3] { text-align: right; }

.mlp-td--center[b-wwjqucsdp3] { text-align: center; }

/* In-grid Syncfusion combo sized like the plain cells. */
[b-wwjqucsdp3] .mlp-cellcombo {
    width: 100%;
    min-width: 160px;
}

.mlp-rowbtn[b-wwjqucsdp3] {
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-secondary, #5b6a7d);
    font-size: 0.78rem;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
}

.mlp-rowbtn:hover:not(:disabled)[b-wwjqucsdp3] {
    color: var(--shell-danger, #c0392b);
    border-color: var(--shell-danger, #c0392b);
}

.mlp-rowbtn:disabled[b-wwjqucsdp3] { opacity: 0.55; cursor: default; }

.mlp-redirect[b-wwjqucsdp3] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* The help aside docks on the RIGHT (flex-basis works only in a flex row). */
.mlp-body[b-wwjqucsdp3] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
/* /Pages/Masters/Payroll/PayHeadMaster.razor.rz.scp.css */
/* Pay Head master — layout mirrors the Employee master shell. */

.ph-master__body[b-h33fhdwaf7] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.ph-master__form[b-h33fhdwaf7] {
    flex: 1 1 auto;
    min-width: 0;
}

.ph-master__detail[b-h33fhdwaf7] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Two-column form grid (same rhythm as em-grid2). */
.ph-grid2[b-h33fhdwaf7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}

@media (max-width: 720px) {
    .ph-grid2[b-h33fhdwaf7] { grid-template-columns: minmax(0, 1fr); }
}

.ph-switch-row[b-h33fhdwaf7] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    padding: 0.25rem 0;
}

.ph-formula-row[b-h33fhdwaf7] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.ph-formula-row .ph-formula[b-h33fhdwaf7] {
    flex: 1 1 auto;
}

.ph-formula-row[b-h33fhdwaf7]  textarea {
    min-height: 3.2rem;
}

.ph-toolbar[b-h33fhdwaf7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ph-muted[b-h33fhdwaf7] {
    color: var(--shell-text-secondary);
    font-size: 0.85rem;
}

.ph-grid[b-h33fhdwaf7] {
    margin-top: 0.25rem;
}

/* Employer-contribution / mode side-note pane in the embedded dialog. */
.ph-master__action-pane[b-h33fhdwaf7] {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.08));
    border-radius: 0.6rem;
}

.ph-master__action-pane-title[b-h33fhdwaf7] {
    margin: 0 0 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.ph-mode-badge[b-h33fhdwaf7] {
    font-weight: 600;
    font-size: 0.95rem;
}

/* Embedded dialog: form left, Mode pane, dockable Help far right. */
.ph-master[b-h33fhdwaf7]  .ph-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.ph-master[b-h33fhdwaf7]  .ph-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* Toolbar sits ON TOP of the embedded form (master-shell convention) and
   stays pinned while the dialog content scrolls under it. */
.ph-master[b-h33fhdwaf7]  .ph-embedded-toolbar {
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--shell-surface-background, #fff);
    padding: 0.4rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--shell-border, #dbe3ee);
}

@media (max-width: 1100px) {
    .ph-master__action-pane[b-h33fhdwaf7] { flex: 0 0 auto; }
    .ph-master__body[b-h33fhdwaf7],
    .ph-master[b-h33fhdwaf7]  .ph-embedded-body { flex-wrap: wrap; }
}
/* /Pages/Masters/Payroll/PayrollSettingsPage.razor.rz.scp.css */
/* Payroll Settings — page-specific layout only. The header banner, help
   panel, toolbar and input styling are GLOBAL (app.css: prod-master__*,
   ct-page__help*, master-*), so nothing here duplicates them. */

.pset-page[b-qab1wb2ryx] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pset-shell[b-qab1wb2ryx] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.pset-toolbar[b-qab1wb2ryx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.pset-panel[b-qab1wb2ryx] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.pset-form[b-qab1wb2ryx] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-width: 1100px;
}

/* Themed sections: one heading per group (the grouping is a static ID map on
   the API — tblSettingsV2 has no group column), cards stacked under it. */
.pset-group[b-qab1wb2ryx] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.pset-group + .pset-group[b-qab1wb2ryx] {
    margin-top: 0.7rem;
}

.pset-group__head[b-qab1wb2ryx] {
    margin: 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--shell-border, #d8dee7);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--shell-text-secondary, #5b6a7d);
}

.pset-group__count[b-qab1wb2ryx] {
    margin-left: 0.4rem;
    font-weight: 400;
    font-size: 0.72rem;
}

/* One card per setting: caption + description on the left, the editor the
   row's metadata picked docked at the right. */
.pset-card[b-qab1wb2ryx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 6px;
    background: var(--shell-panel-background, #fff);
}

.pset-card--dirty[b-qab1wb2ryx] {
    border-color: var(--shell-accent, #4b6bfb);
    background: color-mix(in srgb, var(--shell-accent, #4b6bfb) 5%, var(--shell-panel-background, #fff));
}

.pset-card__text[b-qab1wb2ryx] {
    flex: 1 1 auto;
    min-width: 0;
}

.pset-card__name[b-qab1wb2ryx] {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--shell-text-primary, inherit);
    overflow-wrap: break-word;
}

.pset-card__id[b-qab1wb2ryx] {
    margin-left: 0.35rem;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--shell-text-secondary, #5b6a7d);
}

.pset-card__dirty-tag[b-qab1wb2ryx] {
    margin-left: 0.45rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--shell-accent, #4b6bfb);
}

.pset-card__desc[b-qab1wb2ryx] {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* The editor column: wide enough for a combo, flush right (switch-right-align
   convention: the control sits at the card's right edge). */
.pset-card__editor[b-qab1wb2ryx] {
    flex: 0 0 auto;
    width: min(20rem, 45%);
    display: flex;
    justify-content: flex-end;
}

.pset-card__editor > *[b-qab1wb2ryx] {
    width: 100%;
}

/* Switches keep their natural size, docked right, current state labelled. */
.pset-switch[b-qab1wb2ryx] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
}

.pset-switch__state[b-qab1wb2ryx] {
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
    min-width: 1.8rem;
    text-align: right;
}

/* Plain inputs share the bordered-cell look of the app's editable grids. */
.pset-cell[b-qab1wb2ryx] {
    width: 100%;
    min-width: 0;
    padding: 0.32rem 0.4rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    font: inherit;
    font-size: 0.86rem;
}

.pset-cell:focus[b-qab1wb2ryx] {
    border-color: var(--shell-accent, #4b6bfb);
    outline: none;
}

.pset-cell:disabled[b-qab1wb2ryx] {
    opacity: 0.55;
}

/* Numerics right-align, app-wide convention. */
.pset-num[b-qab1wb2ryx] { text-align: right; }

/* Multi-pick popup rows (week-off days): one checkbox chip per option,
   wrapping; the picked chips tint. */
.pset-chips[b-qab1wb2ryx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: flex-end;
}

.pset-chip[b-qab1wb2ryx] {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.18rem 0.5rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--shell-text-primary, inherit);
    background: var(--shell-panel-background, #fff);
    cursor: pointer;
    white-space: nowrap;
}

.pset-chip--on[b-qab1wb2ryx] {
    border-color: var(--shell-accent, #4b6bfb);
    background: color-mix(in srgb, var(--shell-accent, #4b6bfb) 12%, transparent);
}

.pset-chip input[b-qab1wb2ryx] {
    margin: 0;
}

.pset-placeholder[b-qab1wb2ryx],
.pset-redirect[b-qab1wb2ryx] {
    margin: 1rem;
    font-size: 0.85rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* The help aside docks on the RIGHT: .ct-page__help is flex-sized globally
   (flex-basis var(--invnet-help-w)), which only works when its parent is a
   flex row — .master-body alone is not one. Same rule the other masters
   carry in their scoped CSS. */
.pset-body[b-qab1wb2ryx] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

/* Narrow screens: the editor drops under the caption instead of squeezing. */
@media (max-width: 720px) {
    .pset-card[b-qab1wb2ryx] {
        flex-direction: column;
        align-items: stretch;
    }

    .pset-card__editor[b-qab1wb2ryx] {
        width: 100%;
        justify-content: flex-start;
    }

    .pset-chips[b-qab1wb2ryx] {
        justify-content: flex-start;
    }
}
/* /Pages/Masters/Payroll/PayTemplateAllocationPage.razor.rz.scp.css */
/* Pay Template Allocation — page-specific layout only. The header banner,
   help panel, toolbar and input styling are GLOBAL (app.css: prod-master__*,
   ct-page__help*, master-*, app-mc-*), so nothing here duplicates them. */

.pta-page[b-zc12c5qvb3] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pta-shell[b-zc12c5qvb3] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.pta-toolbar[b-zc12c5qvb3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.pta-panel[b-zc12c5qvb3] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.pta-detail[b-zc12c5qvb3] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 1100px;
}

/* Template selector row — the combo does not need the whole width. */
.pta-templaterow[b-zc12c5qvb3] {
    display: grid;
    gap: 0.35rem 1rem;
    align-items: end;
    grid-template-columns: minmax(0, 520px);
}

.pta-hint[b-zc12c5qvb3] {
    margin: 0.1rem 0 0.2rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--shell-text-secondary, #5b6a7d);
}

.pta-redirect[b-zc12c5qvb3] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* ── Allocation grid ── */
.pta-tools[b-zc12c5qvb3] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.pta-count[b-zc12c5qvb3] {
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* Wide table scrolls inside its own box; the page never scrolls sideways.
   Minimum height (convention for editable grids): an empty or one-row grid
   keeps a visible working area instead of collapsing to its header. */
.pta-tablewrap[b-zc12c5qvb3] {
    overflow-x: auto;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 4px;
    min-height: 220px;
}

.pta-placeholder[b-zc12c5qvb3] {
    margin: 1rem;
    font-size: 0.85rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.pta-table[b-zc12c5qvb3] {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.pta-table th[b-zc12c5qvb3],
.pta-table td[b-zc12c5qvb3] {
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid var(--shell-border, #e3e8ef);
    text-align: left;
    vertical-align: middle;
}

/* Headers wrap rather than truncate, like every other grid in the app. */
.pta-table th[b-zc12c5qvb3] {
    font-size: 0.72rem;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    color: var(--shell-text-secondary, #5b6a7d);
    background: var(--shell-app-background, #f4f6fa);
}

.pta-td--center[b-zc12c5qvb3] { text-align: center; }

/* The employee combo column gets the room. */
.pta-td--emp[b-zc12c5qvb3] { min-width: 260px; }

/* Cell editors stay VISIBLY bordered at rest (convention: an operator must
   see where to type without focusing each cell first); focus brightens the
   border instead of revealing it. */
.pta-cell[b-zc12c5qvb3] {
    width: 100%;
    min-width: 0;
    padding: 0.25rem 0.35rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: var(--shell-panel-background, #fff);
    color: inherit;
    font: inherit;
}

.pta-cell:focus[b-zc12c5qvb3] {
    border-color: var(--shell-accent, #4b6bfb);
    outline: none;
}

.pta-cell:disabled[b-zc12c5qvb3] {
    border-color: transparent;
    background: transparent;
}

/* Numbers right-aligned, per the app-wide rule. */
.pta-cell--num[b-zc12c5qvb3] {
    text-align: right;
}

.pta-check[b-zc12c5qvb3] {
    width: 1rem;
    height: 1rem;
}

.pta-rowbtn[b-zc12c5qvb3] {
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: transparent;
    color: #b3261e;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.pta-rowbtn:disabled[b-zc12c5qvb3] {
    opacity: 0.5;
    cursor: default;
}

/* The help aside docks on the RIGHT: .ct-page__help is flex-sized globally
   (flex-basis var(--invnet-help-w)), which only works when its parent is a
   flex row — .master-body alone is not one. Same rule the other masters
   carry in their scoped CSS. */
.pta-body[b-zc12c5qvb3] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
/* /Pages/Masters/Payroll/PayTemplateMaster.razor.rz.scp.css */
/* Pay Template — page-specific layout only. The header banner, help panel,
   toolbar, switch and input styling are GLOBAL (app.css: prod-master__*,
   ct-page__help*, master-*), so nothing here duplicates them. */

.pt-master[b-gusxemdjud] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pt-master__shell[b-gusxemdjud] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.pt-master__toolbar[b-gusxemdjud] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.pt-master__panel[b-gusxemdjud] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.pt-master__detail[b-gusxemdjud] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 1100px;
}

/* Header fields — two to a row, collapsing on narrow screens rather than
   scrolling sideways. */
.pt-grid2[b-gusxemdjud] {
    display: grid;
    gap: 0.35rem 1rem;
    align-items: end;
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
}

@media (max-width: 760px) {
    .pt-grid2[b-gusxemdjud] { grid-template-columns: 1fr; }
}

.pt-master__hint[b-gusxemdjud] {
    margin: 0.1rem 0 0.2rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--shell-text-secondary, #5b6a7d);
}

.pt-master__redirect[b-gusxemdjud] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* ── Template line grid ── */
.pt-master__tools[b-gusxemdjud] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.pt-master__count[b-gusxemdjud] {
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* Wide table scrolls inside its own box; the page never scrolls sideways.
   Minimum height (convention for editable grids): an empty or one-row grid
   keeps a visible working area instead of collapsing to its header. */
.pt-tablewrap[b-gusxemdjud] {
    overflow-x: auto;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 4px;
    min-height: 220px;
}

.pt-table[b-gusxemdjud] {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.pt-table th[b-gusxemdjud],
.pt-table td[b-gusxemdjud] {
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid var(--shell-border, #e3e8ef);
    text-align: left;
    vertical-align: middle;
}

/* Headers wrap rather than truncate, like every other grid in the app. */
.pt-table th[b-gusxemdjud] {
    font-size: 0.72rem;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    color: var(--shell-text-secondary, #5b6a7d);
    background: var(--shell-app-background, #f4f6fa);
}

.pt-td--center[b-gusxemdjud] { text-align: center; }

/* Cell editors stay VISIBLY bordered at rest (convention: an operator must
   see where to type without focusing each cell first); focus brightens the
   border instead of revealing it. */
.pt-cell[b-gusxemdjud] {
    width: 100%;
    min-width: 0;
    padding: 0.25rem 0.35rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: var(--shell-panel-background, #fff);
    color: inherit;
    font: inherit;
}

.pt-cell:focus[b-gusxemdjud] {
    border-color: var(--shell-accent, #4b6bfb);
    outline: none;
}

.pt-cell:disabled[b-gusxemdjud] {
    border-color: transparent;
    background: transparent;
}

/* Numbers right-aligned, per the app-wide rule. */
.pt-cell--num[b-gusxemdjud] {
    text-align: right;
}

.pt-check[b-gusxemdjud] {
    width: 1rem;
    height: 1rem;
}

.pt-rowbtn[b-gusxemdjud] {
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: transparent;
    color: #b3261e;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.pt-rowbtn:disabled[b-gusxemdjud] {
    opacity: 0.5;
    cursor: default;
}

/* Embedded mode — editor left, help right. */
.pt-embedded-body[b-gusxemdjud] {
    display: flex;
    gap: 1rem;
    min-height: 0;
    height: 100%;
}

.pt-embedded-main[b-gusxemdjud] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
}

/* The help aside docks on the RIGHT: .ct-page__help is flex-sized globally
   (flex-basis var(--invnet-help-w)), which only works when its parent is a
   flex row - .master-body alone is not one. Same rule the other masters
   carry in their scoped CSS (AttendanceTypeMaster's .at-master__body). */
.pt-master__body[b-gusxemdjud],
.pt-master[b-gusxemdjud]  .pt-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
/* /Pages/Masters/Payroll/ShiftAssignmentPage.razor.rz.scp.css */
/* Shift Assignment — page-specific layout only. The header banner, help
   panel, toolbar and input styling are GLOBAL (app.css: prod-master__*,
   ct-page__help*, master-*, app-mc-*), so nothing here duplicates them. */

.esa-page[b-xxm9dczlwn] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.esa-shell[b-xxm9dczlwn] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.esa-toolbar[b-xxm9dczlwn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.esa-panel[b-xxm9dczlwn] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.esa-detail[b-xxm9dczlwn] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 1100px;
}

/* Employee selector row — the combo does not need the whole width. */
.esa-emprow[b-xxm9dczlwn] {
    display: grid;
    gap: 0.35rem 1rem;
    align-items: end;
    grid-template-columns: minmax(0, 520px);
}

.esa-hint[b-xxm9dczlwn] {
    margin: 0.1rem 0 0.2rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--shell-text-secondary, #5b6a7d);
}

.esa-redirect[b-xxm9dczlwn] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* ── Shift-history grid ── */
.esa-tools[b-xxm9dczlwn] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.esa-count[b-xxm9dczlwn] {
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* Wide table scrolls inside its own box; the page never scrolls sideways.
   Minimum height (convention for editable grids): an empty or one-row grid
   keeps a visible working area instead of collapsing to its header. */
.esa-tablewrap[b-xxm9dczlwn] {
    overflow-x: auto;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 4px;
    min-height: 220px;
}

.esa-placeholder[b-xxm9dczlwn] {
    margin: 1rem;
    font-size: 0.85rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.esa-table[b-xxm9dczlwn] {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.esa-table th[b-xxm9dczlwn],
.esa-table td[b-xxm9dczlwn] {
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid var(--shell-border, #e3e8ef);
    text-align: left;
    vertical-align: middle;
}

/* Headers wrap rather than truncate, like every other grid in the app. */
.esa-table th[b-xxm9dczlwn] {
    font-size: 0.72rem;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    color: var(--shell-text-secondary, #5b6a7d);
    background: var(--shell-app-background, #f4f6fa);
}

.esa-td--center[b-xxm9dczlwn] { text-align: center; }

/* The shift combo column gets the room; the date keeps a sane minimum. */
.esa-td--shift[b-xxm9dczlwn] { min-width: 220px; }
.esa-td--date[b-xxm9dczlwn] { min-width: 150px; }

/* Cell editors stay VISIBLY bordered at rest (convention: an operator must
   see where to type without focusing each cell first); focus brightens the
   border instead of revealing it. */
.esa-cell[b-xxm9dczlwn] {
    width: 100%;
    min-width: 0;
    padding: 0.25rem 0.35rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: var(--shell-panel-background, #fff);
    color: inherit;
    font: inherit;
}

.esa-cell:focus[b-xxm9dczlwn] {
    border-color: var(--shell-accent, #4b6bfb);
    outline: none;
}

.esa-cell:disabled[b-xxm9dczlwn] {
    border-color: transparent;
    background: transparent;
}

.esa-rowbtn[b-xxm9dczlwn] {
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: transparent;
    color: #b3261e;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.esa-rowbtn:disabled[b-xxm9dczlwn] {
    opacity: 0.5;
    cursor: default;
}

/* The help aside docks on the RIGHT: .ct-page__help is flex-sized globally
   (flex-basis var(--invnet-help-w)), which only works when its parent is a
   flex row — .master-body alone is not one. Same rule the other masters
   carry in their scoped CSS. */
.esa-body[b-xxm9dczlwn] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
/* /Pages/Masters/Payroll/ShiftMaster.razor.rz.scp.css */
/* Shift Details — page-specific layout only. The header banner, help panel,
   toolbar, switch and input styling are GLOBAL (app.css: prod-master__*,
   ct-page__help*, master-*), so nothing here duplicates them. */

.shift-master[b-1jpwykh2ek] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.shift-master__shell[b-1jpwykh2ek] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.shift-master__toolbar[b-1jpwykh2ek] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.shift-master__panel[b-1jpwykh2ek] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.shift-master__detail[b-1jpwykh2ek] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 1100px;
}

/* Field grids — the form has a lot of small fields, so it packs three or four
   to a row and collapses on narrow screens rather than scrolling sideways. */
.shift-grid3[b-1jpwykh2ek],
.shift-grid4[b-1jpwykh2ek] {
    display: grid;
    gap: 0.35rem 1rem;
    align-items: end;
}

.shift-grid3[b-1jpwykh2ek] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shift-grid4[b-1jpwykh2ek] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
    .shift-grid4[b-1jpwykh2ek] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .shift-grid3[b-1jpwykh2ek],
    .shift-grid4[b-1jpwykh2ek] { grid-template-columns: 1fr; }
}

/* Native time / number field with a floating-style label above it, so these
   sit level with the Syncfusion inputs beside them. */
.shift-field[b-1jpwykh2ek] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.shift-field__label[b-1jpwykh2ek] {
    font-size: 0.72rem;
    line-height: 1.2;
    color: var(--shell-text-secondary, #5b6a7d);
}

.shift-field__input[b-1jpwykh2ek] {
    width: 100%;
    min-width: 0;
    padding: 0.32rem 0.45rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 4px;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, #16202c);
    font: inherit;
    font-size: 0.88rem;
}

.shift-field__input:disabled[b-1jpwykh2ek] {
    opacity: 0.7;
}

/* Numbers right-aligned, per the app-wide rule. */
.shift-field__input--num[b-1jpwykh2ek] {
    text-align: right;
}

.shift-master__hint[b-1jpwykh2ek] {
    margin: 0.1rem 0 0.2rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--shell-text-secondary, #5b6a7d);
}

.shift-master__redirect[b-1jpwykh2ek] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* ── Attendance-type rule grid ── */
.shift-master__tools[b-1jpwykh2ek] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.shift-master__count[b-1jpwykh2ek] {
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* Wide table scrolls inside its own box; the page never scrolls sideways.
   Minimum height (convention for editable grids): an empty or one-row grid
   keeps a visible working area instead of collapsing to its header. */
.shift-tablewrap[b-1jpwykh2ek] {
    overflow-x: auto;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 4px;
    min-height: 220px;
}

.shift-table[b-1jpwykh2ek] {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.shift-table th[b-1jpwykh2ek],
.shift-table td[b-1jpwykh2ek] {
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid var(--shell-border, #e3e8ef);
    text-align: left;
    vertical-align: middle;
}

/* Headers wrap rather than truncate, like every other grid in the app. */
.shift-table th[b-1jpwykh2ek] {
    font-size: 0.72rem;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    color: var(--shell-text-secondary, #5b6a7d);
    background: var(--shell-app-background, #f4f6fa);
}

.shift-td--center[b-1jpwykh2ek] { text-align: center; }

/* Cell editors stay VISIBLY bordered at rest (convention: an operator must
   see where to type without focusing each cell first); focus brightens the
   border instead of revealing it. */
.shift-cell[b-1jpwykh2ek] {
    width: 100%;
    min-width: 0;
    padding: 0.25rem 0.35rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: var(--shell-panel-background, #fff);
    color: inherit;
    font: inherit;
}

.shift-cell:focus[b-1jpwykh2ek] {
    border-color: var(--shell-accent, #4b6bfb);
    outline: none;
}

.shift-cell:disabled[b-1jpwykh2ek] {
    border-color: transparent;
    background: transparent;
}

.shift-rowbtn[b-1jpwykh2ek] {
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 3px;
    background: transparent;
    color: #b3261e;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.shift-rowbtn:disabled[b-1jpwykh2ek] {
    opacity: 0.5;
    cursor: default;
}

/* Embedded mode — editor left, help right. */
.shift-embedded-body[b-1jpwykh2ek] {
    display: flex;
    gap: 1rem;
    min-height: 0;
    height: 100%;
}

.shift-embedded-main[b-1jpwykh2ek] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
}

/* The help aside docks on the RIGHT: .ct-page__help is flex-sized globally
   (flex-basis var(--invnet-help-w)), which only works when its parent is a
   flex row - .master-body alone is not one. Same rule the other masters
   carry in their scoped CSS (CashCounterMaster's .su-master__body). */
.shift-master__body[b-1jpwykh2ek],
.shift-master[b-1jpwykh2ek]  .shift-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
/* /Pages/Masters/Payroll/TimeDeviceMaster.razor.rz.scp.css */
/* Time Devices — page-specific layout only (shell pieces are global). */

.tdm[b-yln1zyzeni] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tdm__shell[b-yln1zyzeni] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.tdm__toolbar[b-yln1zyzeni] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.tdm__panel[b-yln1zyzeni] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.tdm__detail[b-yln1zyzeni] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 900px;
}

.tdm-field[b-yln1zyzeni] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.tdm-grid2[b-yln1zyzeni],
.tdm-grid3[b-yln1zyzeni],
.tdm-grid4[b-yln1zyzeni] {
    display: grid;
    gap: 0.35rem 1rem;
    align-items: start;
}

.tdm-grid2[b-yln1zyzeni] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tdm-grid3[b-yln1zyzeni] { grid-template-columns: 0.5fr 1fr 1fr; }
.tdm-grid4[b-yln1zyzeni] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tdm-span2[b-yln1zyzeni] { grid-column: span 2; }

@media (max-width: 900px) {
    .tdm-grid3[b-yln1zyzeni],
    .tdm-grid4[b-yln1zyzeni] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .tdm-grid2[b-yln1zyzeni],
    .tdm-grid3[b-yln1zyzeni],
    .tdm-grid4[b-yln1zyzeni] {
        grid-template-columns: 1fr;
    }
    .tdm-span2[b-yln1zyzeni] { grid-column: auto; }
}

.tdm-sdk[b-yln1zyzeni] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tdm-test[b-yln1zyzeni] {
    margin-top: 0.4rem;
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--shell-border, #c9d2dd);
    font-size: 0.82rem;
    line-height: 1.45;
}

.tdm-test p[b-yln1zyzeni] {
    margin: 0 0 0.3rem;
}

.tdm-test--ok[b-yln1zyzeni] {
    border-color: rgba(30, 126, 52, 0.5);
    background: rgba(30, 126, 52, 0.07);
}

.tdm-test--fail[b-yln1zyzeni] {
    border-color: rgba(192, 57, 43, 0.5);
    background: rgba(192, 57, 43, 0.07);
}

.tdm-test__head[b-yln1zyzeni] {
    font-weight: 700;
    display: flex;
    justify-content: space-between;
}

.tdm-test__head span[b-yln1zyzeni] {
    font-weight: 400;
    color: var(--shell-text-secondary, #5b6a7d);
}

.tdm-test__facts[b-yln1zyzeni] {
    margin: 0.2rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.2rem 1rem;
}

.tdm-test__facts em[b-yln1zyzeni] {
    font-style: normal;
    font-weight: 600;
    margin-right: 0.3rem;
}

.tdm__redirect[b-yln1zyzeni] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.tdm__body[b-yln1zyzeni] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
/* /Pages/Masters/Schemes/CustomRateDiscountMaster.razor.rz.scp.css */
/* Custom rate & discount schemes (legacy frmCustomRateAndDiscount). */
.sp-master__body[b-qdwjn5r18c] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.sp-master__form[b-qdwjn5r18c] {
    flex: 1 1 auto;
    min-width: 0;
}

.sp-master__detail[b-qdwjn5r18c] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Scheme header — three columns. */
.sp-grid[b-qdwjn5r18c] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem 1.25rem;
    align-items: end;
}

.sp-grid--invoice[b-qdwjn5r18c] {
    margin-bottom: 0.5rem;
}

.sp-grid__wide[b-qdwjn5r18c] {
    grid-column: span 2;
    min-width: 0;
}

.sp-switch[b-qdwjn5r18c] {
    padding-bottom: 0.35rem;
}

.sp-tabs[b-qdwjn5r18c] {
    margin-top: 0.3rem;
}

.sp-tab__tools[b-qdwjn5r18c] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0.35rem 0;
}

.sp-tab__count[b-qdwjn5r18c] {
    font-size: 0.76rem;
    color: #8a93a0;
}

/* Native cell editors: the model updates as the operator types, so F5 (which
   never blurs) still saves the cell being edited. */
.sp-cell[b-qdwjn5r18c] {
    width: 100%;
    height: 28px;
    padding: 0.15rem 0.4rem;
    font: inherit;
    font-size: 0.84rem;
    color: #1c2b3a;
    background: #fff;
    border: 1px solid #cfd6de;
    border-radius: 4px;
}

/* Numeric convention: right-aligned. */
.sp-cell--num[b-qdwjn5r18c] {
    text-align: right;
}

.sp-cell:focus[b-qdwjn5r18c] {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 1px #4f46e5;
}

.sp-cell:disabled[b-qdwjn5r18c] {
    background: #f2f4f7;
    color: #98a1ad;
}

/* Product cell = display/search box + picker button. */
.sp-product[b-qdwjn5r18c] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sp-pick[b-qdwjn5r18c] {
    flex: 0 0 auto;
    width: 26px;
    height: 28px;
    font: inherit;
    line-height: 1;
    color: #0b57d0;
    background: #f2f4f7;
    border: 1px solid #cfd6de;
    border-radius: 4px;
    cursor: pointer;
}

.sp-pick:hover:not(:disabled)[b-qdwjn5r18c] {
    background: #eaf1fb;
    border-color: #9db4d2;
}

.sp-pick:disabled[b-qdwjn5r18c] {
    color: #98a1ad;
    cursor: default;
}

.sp-embedded-toolbar[b-qdwjn5r18c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

@media (max-width: 1000px) {
    .sp-grid[b-qdwjn5r18c] {
        grid-template-columns: minmax(0, 1fr);
    }

    .sp-grid__wide[b-qdwjn5r18c] {
        grid-column: span 1;
    }

    .sp-master__body[b-qdwjn5r18c] {
        flex-direction: column;
    }
}

/* Slab / band editor launcher in the rate and item-to-item grids. */
.sp-slabbtn[b-qdwjn5r18c] {
    font: inherit;
    font-size: 0.76rem;
    padding: 0.2rem 0.5rem;
    color: #0b57d0;
    background: transparent;
    border: 1px solid #cfd6de;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.sp-slabbtn:hover:not(:disabled)[b-qdwjn5r18c] {
    background: #eaf1fb;
    border-color: #9db4d2;
}

.sp-slabbtn:disabled[b-qdwjn5r18c] {
    color: #98a1ad;
    cursor: default;
}

/* Native per-row Remove button (a Syncfusion button per row is a component
   init × every row on seven tabs). */
.sp-rowbtn[b-qdwjn5r18c] {
    font: inherit;
    font-size: 0.76rem;
    padding: 0.22rem 0.55rem;
    color: #a02020;
    background: #fdeeee;
    border: 1px solid #e5b8b8;
    border-radius: 3px;
    cursor: pointer;
}

.sp-rowbtn:hover:not(:disabled)[b-qdwjn5r18c] {
    background: #f9dcdc;
}

.sp-rowbtn:disabled[b-qdwjn5r18c] {
    opacity: .5;
    cursor: default;
}

/* Batch Add dialog: search + plain selectable table (perf at catalog size). */
.sp-batch[b-qdwjn5r18c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
}

.sp-batch__tools[b-qdwjn5r18c] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sp-batch__tablewrap[b-qdwjn5r18c] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid #dbe2ee;
    border-radius: 4px;
}

.sp-batch__table[b-qdwjn5r18c] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.sp-batch__table th[b-qdwjn5r18c] {
    position: sticky;
    top: 0;
    background: #f4f6fb;
    text-align: left;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid #dbe2ee;
    white-space: normal;
}

.sp-batch__table td[b-qdwjn5r18c] {
    padding: 0.28rem 0.5rem;
    border-bottom: 1px solid #eef1f6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

/* Read-only Tax Class cell on the Custom Rate tab. */
.sp-taxclass[b-qdwjn5r18c] {
    display: block;
    padding: 0.15rem 0.4rem;
    color: #47525f;
}

/* Legacy-style two-column header. */
.sp-hdr[b-qdwjn5r18c] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.35rem 2rem;
    align-items: start;
    margin-bottom: 0.5rem;
}

.sp-hdr__col[b-qdwjn5r18c] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
    align-content: start;
}

.sp-hdr__row2[b-qdwjn5r18c] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1rem;
    align-items: end;
}

.sp-hdr__hint[b-qdwjn5r18c] {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #5b6a7d;
}

/* "View members of this custom group" — a text action under the Selection
   combo, deliberately quieter than a button so it reads as a lookup, not
   as something that changes the scheme. */
.sp-hdr__inline-link[b-qdwjn5r18c] {
    align-self: start;
    margin: 0.25rem 0 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.78rem;
    color: #0f6d78;
    text-decoration: underline;
    cursor: pointer;
}

.sp-hdr__inline-link:hover[b-qdwjn5r18c],
.sp-hdr__inline-link:focus-visible[b-qdwjn5r18c] {
    color: #0a4f57;
}

/* Batch pricing row (source / price to copy / variation). */
.sp-batch__pricing[b-qdwjn5r18c] {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 0.6fr;
    gap: 0.35rem 1rem;
    align-items: end;
}

@media (max-width: 900px) {
    .sp-hdr[b-qdwjn5r18c] {
        grid-template-columns: minmax(0, 1fr);
    }
    .sp-batch__pricing[b-qdwjn5r18c] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Bulk Rate Settings — legacy two-grid layout: available items | Add/Remove
   rail | chosen items. */
.sp-batch__panes[b-qdwjn5r18c] {
    display: flex;
    gap: 0.6rem;
    align-items: stretch;
    min-height: 0;
    flex: 1 1 auto;
}

.sp-batch__pane[b-qdwjn5r18c] {
    flex: 1.5 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.sp-batch__pane--chosen[b-qdwjn5r18c] {
    flex: 1 1 0;
}

.sp-batch__pane .sp-batch__tablewrap[b-qdwjn5r18c] {
    flex: 1 1 auto;
    min-height: 240px;
}

.sp-batch__mid[b-qdwjn5r18c] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
}

.sp-batch__panehead[b-qdwjn5r18c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
}

.sp-batch__panehead label[b-qdwjn5r18c] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

/* "Price Options" panel of the bulk-rate dialog (legacy pgPriceOptions). */
.sp-batch__priceopts[b-qdwjn5r18c] {
    border: 1px solid #dbe2ee;
    border-radius: 4px;
    padding: 0.5rem 0.75rem 0.75rem;
    margin: 0 0 0.5rem;
}

.sp-batch__priceopts legend[b-qdwjn5r18c] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #4a5568;
    padding: 0 0.35rem;
}

.sp-batch__var[b-qdwjn5r18c] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    min-width: 0;
}

.sp-batch__var .e-numerictextbox[b-qdwjn5r18c],
.sp-batch__var .e-control-wrapper[b-qdwjn5r18c] {
    min-width: 0;
}

.sp-batch__varhint[b-qdwjn5r18c] {
    font-size: 0.72rem;
    color: #8a93a0;
    line-height: 1.25;
    padding-bottom: 0.35rem;
}
/* /Pages/Masters/Schemes/GiftVoucherMaster.razor.rz.scp.css */
/* Gift Voucher master (legacy frmGiftVoucher). */
.gv-master__body[b-8att8sl38o] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.gv-master__form[b-8att8sl38o] {
    flex: 1 1 auto;
    min-width: 0;
}

.gv-master__detail[b-8att8sl38o] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Book header — three columns, matching the legacy field order. */
.gv-grid[b-8att8sl38o] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem 1.25rem;
    align-items: end;
}

.gv-grid__wide[b-8att8sl38o] {
    grid-column: 1 / -1;
}

.gv-leafcount[b-8att8sl38o] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 0.35rem;
    font-size: 0.78rem;
    color: #5a6472;
}

.gv-leafcount strong[b-8att8sl38o] {
    font-size: 0.95rem;
    color: #1c2b3a;
}

/* Leaf grid block. */
.gv-leaves[b-8att8sl38o] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.gv-leaves__head[b-8att8sl38o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.gv-leaves__tools[b-8att8sl38o] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.gv-leaves__count[b-8att8sl38o] {
    font-size: 0.76rem;
    color: #8a93a0;
}

.gv-search[b-8att8sl38o] {
    height: 30px;
    width: 200px;
    padding: 0.2rem 0.5rem;
    font-size: 0.85rem;
    border: 1px solid #cfd6de;
    border-radius: 4px;
}

/* Native cell inputs: the model updates as the operator types, so F5 (which
   never blurs) still saves the cell being edited. */
/* Native per-row Remove button (Syncfusion buttons cost a component init per
   row — too heavy at hundreds of leaves). */
.gv-rowbtn[b-8att8sl38o] {
    font: inherit;
    font-size: 0.76rem;
    padding: 0.22rem 0.55rem;
    color: #a02020;
    background: #fdeeee;
    border: 1px solid #e5b8b8;
    border-radius: 3px;
    cursor: pointer;
}

.gv-rowbtn:hover:not(:disabled)[b-8att8sl38o] {
    background: #f9dcdc;
}

.gv-rowbtn:disabled[b-8att8sl38o] {
    opacity: .5;
    cursor: default;
}

/* Status row tints: Inactive orange, Cancelled red. The in-cell editors go
   transparent on tinted rows so the colour reads across the whole row. */
[b-8att8sl38o] .e-row.gv-row--inactive .e-rowcell {
    background: #ffe3c2;
}

[b-8att8sl38o] .e-row.gv-row--cancelled .e-rowcell {
    background: #ffd2d2;
}

[b-8att8sl38o] .e-row.gv-row--inactive .gv-cell,
[b-8att8sl38o] .e-row.gv-row--cancelled .gv-cell {
    background: transparent;
}

.gv-cell[b-8att8sl38o] {
    width: 100%;
    height: 28px;
    padding: 0.15rem 0.4rem;
    font: inherit;
    font-size: 0.84rem;
    color: #1c2b3a;
    background: #fff;
    border: 1px solid #cfd6de;
    border-radius: 4px;
}

/* Numeric convention: right-aligned. */
.gv-cell--num[b-8att8sl38o] {
    text-align: right;
}

.gv-cell:focus[b-8att8sl38o] {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 1px #4f46e5;
}

.gv-cell:disabled[b-8att8sl38o] {
    background: #f2f4f7;
    color: #98a1ad;
}

.gv-embedded-toolbar[b-8att8sl38o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

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

    .gv-master__body[b-8att8sl38o] {
        flex-direction: column;
    }
}
/* /Pages/Masters/Schemes/ItemToItemSlabDialog.razor.rz.scp.css */
/* Quantity-slab entry table (plain table per the grid conventions — headers
   always align with cells, no Syncfusion measurement inside the dialog; the
   old .sp-cell classes were scoped to the parent page and never applied
   here, which left the cells unstyled). */
.qs-dialog[b-daurq1pbuz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
}

.qs-dialog__tools[b-daurq1pbuz] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.qs-dialog__count[b-daurq1pbuz] {
    font-size: 0.76rem;
    color: #8a93a0;
}

.qs-tablewrap[b-daurq1pbuz] {
    min-height: 185px;   /* ~5 rows visible even when empty (convention) */
    max-height: 46vh;
    overflow: auto;
    border: 1px solid #dbe2ee;
    border-radius: 4px;
}

.qs-table[b-daurq1pbuz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.qs-table th[b-daurq1pbuz] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f4f6fb;
    text-align: left;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid #dbe2ee;
    white-space: normal;
}

.qs-th--num[b-daurq1pbuz] {
    text-align: right;
}

.qs-table td[b-daurq1pbuz] {
    padding: 0.18rem 0.35rem;
    border-bottom: 1px solid #eef1f6;
}

.qs-td--center[b-daurq1pbuz] {
    text-align: center;
}

/* Native cell editors: the model updates as the operator types, so F5 (which
   never blurs) still saves the cell being edited. */
.qs-cell[b-daurq1pbuz] {
    width: 100%;
    height: 28px;
    padding: 0.15rem 0.4rem;
    font: inherit;
    font-size: 0.84rem;
    color: #1c2b3a;
    background: #fff;
    border: 1px solid #cfd6de;
    border-radius: 4px;
}

.qs-cell--num[b-daurq1pbuz] {
    text-align: right;
}

.qs-cell:focus[b-daurq1pbuz] {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 1px #4f46e5;
}

.qs-cell:disabled[b-daurq1pbuz] {
    background: #f2f4f7;
    color: #98a1ad;
}

.qs-rowbtn[b-daurq1pbuz] {
    font: inherit;
    font-size: 0.76rem;
    padding: 0.22rem 0.55rem;
    color: #a02020;
    background: #fdeeee;
    border: 1px solid #e5b8b8;
    border-radius: 3px;
    cursor: pointer;
}

.qs-rowbtn:hover:not(:disabled)[b-daurq1pbuz] {
    background: #f9dcdc;
}

.qs-rowbtn:disabled[b-daurq1pbuz] {
    opacity: .5;
    cursor: default;
}

/* Per-row product picker (item-to-item variant). */
.qs-product[b-daurq1pbuz] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.qs-product .qs-cell[b-daurq1pbuz] {
    flex: 1 1 auto;
    min-width: 0;
}

.qs-pick[b-daurq1pbuz] {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 0.5rem;
    font: inherit;
    background: #eef1f5;
    border: 1px solid #d6dbe1;
    border-radius: 3px;
    cursor: pointer;
}
/* /Pages/Masters/Schemes/QtySlabDialog.razor.rz.scp.css */
/* Quantity-slab entry table (plain table per the grid conventions — headers
   always align with cells, no Syncfusion measurement inside the dialog; the
   old .sp-cell classes were scoped to the parent page and never applied
   here, which left the cells unstyled). */
.qs-dialog[b-613hyvwjbh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
}

.qs-dialog__tools[b-613hyvwjbh] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.qs-dialog__count[b-613hyvwjbh] {
    font-size: 0.76rem;
    color: #8a93a0;
}

.qs-tablewrap[b-613hyvwjbh] {
    min-height: 185px;   /* ~5 rows visible even when empty (convention) */
    max-height: 46vh;
    overflow: auto;
    border: 1px solid #dbe2ee;
    border-radius: 4px;
}

.qs-table[b-613hyvwjbh] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.qs-table th[b-613hyvwjbh] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f4f6fb;
    text-align: left;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid #dbe2ee;
    white-space: normal;
}

.qs-th--num[b-613hyvwjbh] {
    text-align: right;
}

.qs-table td[b-613hyvwjbh] {
    padding: 0.18rem 0.35rem;
    border-bottom: 1px solid #eef1f6;
}

.qs-td--center[b-613hyvwjbh] {
    text-align: center;
}

/* Native cell editors: the model updates as the operator types, so F5 (which
   never blurs) still saves the cell being edited. */
.qs-cell[b-613hyvwjbh] {
    width: 100%;
    height: 28px;
    padding: 0.15rem 0.4rem;
    font: inherit;
    font-size: 0.84rem;
    color: #1c2b3a;
    background: #fff;
    border: 1px solid #cfd6de;
    border-radius: 4px;
}

.qs-cell--num[b-613hyvwjbh] {
    text-align: right;
}

.qs-cell:focus[b-613hyvwjbh] {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 1px #4f46e5;
}

.qs-cell:disabled[b-613hyvwjbh] {
    background: #f2f4f7;
    color: #98a1ad;
}

.qs-rowbtn[b-613hyvwjbh] {
    font: inherit;
    font-size: 0.76rem;
    padding: 0.22rem 0.55rem;
    color: #a02020;
    background: #fdeeee;
    border: 1px solid #e5b8b8;
    border-radius: 3px;
    cursor: pointer;
}

.qs-rowbtn:hover:not(:disabled)[b-613hyvwjbh] {
    background: #f9dcdc;
}

.qs-rowbtn:disabled[b-613hyvwjbh] {
    opacity: .5;
    cursor: default;
}

/* Per-row product picker (item-to-item variant). */
.qs-product[b-613hyvwjbh] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.qs-product .qs-cell[b-613hyvwjbh] {
    flex: 1 1 auto;
    min-width: 0;
}

.qs-pick[b-613hyvwjbh] {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 0.5rem;
    font: inherit;
    background: #eef1f5;
    border: 1px solid #d6dbe1;
    border-radius: 3px;
    cursor: pointer;
}
/* /Pages/Masters/VoucherMgr/BranchNumberingDialog.razor.rz.scp.css */
/* Branch Numbering sub-dialog. */
.bn-dialog[b-5sccyuu98z] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.bn-dialog__row[b-5sccyuu98z] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    align-items: end;
}

.bn-dialog__row > *[b-5sccyuu98z] {
    flex: 1 1 200px;
    min-width: 0;
}

.bn-dialog__switch[b-5sccyuu98z] {
    flex: 1 1 220px;
    padding-bottom: 0.4rem;
}

.bn-dialog__actions[b-5sccyuu98z] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

/* Prefix / suffix cell — native input so the model updates as the operator
   types (F5 saves without blurring). Styled to match the Syncfusion editors
   beside it. */
.bn-cell[b-5sccyuu98z] {
    width: 100%;
    height: 30px;
    padding: 0.2rem 0.45rem;
    font: inherit;
    font-size: 0.85rem;
    color: #1c2b3a;
    background: #fff;
    border: 1px solid #cfd6de;
    border-radius: 4px;
}

.bn-cell:focus[b-5sccyuu98z] {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 1px #4f46e5;
}

.bn-cell:disabled[b-5sccyuu98z] {
    background: #f2f4f7;
    color: #98a1ad;
}
/* /Pages/Masters/VoucherMgr/BranchPricingDialog.razor.rz.scp.css */
/* Branch Pricing sub-dialog. */
.bp-dialog[b-lkw1vgbjki] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.bp-dialog__toolbar[b-lkw1vgbjki] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bp-dialog__actions[b-lkw1vgbjki] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Give the templated editors room inside cells. */
.bp-grid[b-lkw1vgbjki]  .e-rowcell {
    padding: 4px 6px;
    overflow: visible;
}
/* /Pages/Masters/VoucherMgr/ColPropertiesDialog.razor.rz.scp.css */
/* Column Properties sub-dialog. */
.cp-dialog[b-6u70uixj0m] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.cp-dialog__toolbar[b-6u70uixj0m] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cp-dialog__actions[b-6u70uixj0m] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

/* Plain entry table (no SfGrid) — the column template runs to ~90 rows and the
   grid layer made the dialog take a minute to open. */
.cp-table-wrap[b-6u70uixj0m] {
    max-height: 60vh;
    overflow: auto;
    border: 1px solid #dfe4ea;
    border-radius: 4px;
    background: #fff;
}

.cp-table[b-6u70uixj0m] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8rem;
}

.cp-table thead th[b-6u70uixj0m] {
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    color: #3b4553;
    white-space: normal;
    background: #f1f4f8;
    border-bottom: 1px solid #dfe4ea;
    padding: 5px 6px;
}

.cp-table tbody td[b-6u70uixj0m] {
    padding: 2px 5px;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: middle;
}

.cp-table tbody tr:hover td[b-6u70uixj0m] {
    background: #f7fafd;
}

.cp-td--center[b-6u70uixj0m] { text-align: center; }

.cp-th--id[b-6u70uixj0m] { width: 150px; }
.cp-th--cap[b-6u70uixj0m] { width: 150px; }
.cp-th--chk[b-6u70uixj0m] { width: 62px; text-align: center; }
.cp-th--num[b-6u70uixj0m] { width: 78px; }
.cp-th--sel[b-6u70uixj0m] { width: 105px; }
.cp-th--fmt[b-6u70uixj0m] { width: 100px; }
.cp-th--ex[b-6u70uixj0m] { width: 170px; }
.cp-th--act[b-6u70uixj0m] { width: 100px; }

.cp-table__empty[b-6u70uixj0m] {
    padding: 0.8rem;
    color: #8a93a0;
    text-align: center;
}

.cp-search[b-6u70uixj0m] {
    flex: 0 1 260px;
    font: inherit;
    font-size: 0.8rem;
    padding: 4px 7px;
    border: 1px solid #d6dbe1;
    border-radius: 3px;
}

.cp-search:focus[b-6u70uixj0m] {
    outline: none;
    border-color: #3f7fd6;
    box-shadow: 0 0 0 2px rgba(63, 127, 214, 0.15);
}

/* Native cell editors — Syncfusion components per cell were the cause of the
   ~1 minute render on the 60–100 row column template. */
.cp-cell[b-6u70uixj0m] {
    width: 100%;
    box-sizing: border-box;
    padding: 3px 5px;
    font: inherit;
    font-size: 0.8rem;
    color: #2f3640;
    background: #fff;
    border: 1px solid #d6dbe1;
    border-radius: 3px;
}

.cp-cell:focus[b-6u70uixj0m] {
    outline: none;
    border-color: #3f7fd6;
    box-shadow: 0 0 0 2px rgba(63, 127, 214, 0.15);
}

.cp-cell:disabled[b-6u70uixj0m] {
    background: #f2f4f6;
    color: #8a93a0;
}

.cp-cell--num[b-6u70uixj0m] {
    text-align: right;
}

.cp-cell--sel[b-6u70uixj0m] {
    padding: 2px 4px;
}

.cp-chk[b-6u70uixj0m] {
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.cp-rowbtn[b-6u70uixj0m] {
    font: inherit;
    font-size: 0.72rem;
    padding: 0.22rem 0.45rem;
    color: #2f3640;
    background: #eef1f5;
    border: 1px solid #d6dbe1;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}

.cp-rowbtn:hover:not(:disabled)[b-6u70uixj0m] {
    background: #e2e8f0;
}

.cp-rowbtn--danger[b-6u70uixj0m] {
    color: #a02121;
    background: #fdeeee;
    border-color: #f0c8c8;
}

.cp-rowbtn--danger:hover:not(:disabled)[b-6u70uixj0m] {
    background: #fadcdc;
}

.cp-rowbtn:disabled[b-6u70uixj0m] {
    opacity: 0.5;
    cursor: default;
}

/* Advanced editor. */
.cp-adv[b-6u70uixj0m] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.cp-adv__row[b-6u70uixj0m] {
    display: flex;
    gap: 1rem;
}

.cp-adv__row > *[b-6u70uixj0m] {
    flex: 1 1 0;
    min-width: 0;
}

.cp-adv__memo[b-6u70uixj0m]  textarea {
    min-height: 56px;
}

.cp-adv__memo--tall[b-6u70uixj0m]  textarea {
    min-height: 96px;
}

/* "Insert variable…" link under the formula / popup-SQL editors. */
.cp-adv__varbtn[b-6u70uixj0m] {
    align-self: flex-start;
    font: inherit;
    font-size: 0.75rem;
    padding: 0.15rem 0.3rem;
    margin: -0.35rem 0 0.1rem;
    color: #0b57d0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.cp-adv__varbtn:hover[b-6u70uixj0m] {
    text-decoration: underline;
}

.cp-adv__btnrow[b-6u70uixj0m] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.cp-adv__help[b-6u70uixj0m] {
    font-size: 0.78rem;
    color: #5a6472;
    border: 1px solid #e7ebf0;
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
}

.cp-adv__help summary[b-6u70uixj0m] {
    cursor: pointer;
    font-weight: 600;
}
/* /Pages/Masters/VoucherMgr/DiscountPropertiesDialog.razor.rz.scp.css */
/* Discount column properties (legacy frmDiscountProperties). */
.dp-dialog[b-9mf0qvbvgw] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.dp-dialog__actions[b-9mf0qvbvgw] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
/* /Pages/Masters/VoucherMgr/LinkedTranPropertiesDialog.razor.rz.scp.css */
/* Linked Transaction Properties sub-dialog. */
.ltp-dialog[b-0rqu59sxmo] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.ltp-dialog__cols[b-0rqu59sxmo] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.ltp-dialog__box[b-0rqu59sxmo] {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    border: 1px solid #dfe4ea;
    border-radius: 6px;
    padding: 0.55rem;
    background: #fafbfc;
}

.ltp-dialog__title[b-0rqu59sxmo] {
    margin: 0 0 0.15rem;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5a6472;
}

.ltp-dialog__switch[b-0rqu59sxmo] {
    justify-content: space-between;
    width: 100%;
}

.ltp-dialog__memo[b-0rqu59sxmo]  textarea {
    min-height: 64px;
}

/* "Insert variable…" link under a SQL editor. */
.ltp-dialog__varbtn[b-0rqu59sxmo] {
    align-self: flex-start;
    font: inherit;
    font-size: 0.75rem;
    padding: 0.15rem 0.3rem;
    margin: -0.15rem 0 0.2rem;
    color: #0b57d0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.ltp-dialog__varbtn:hover:not(:disabled)[b-0rqu59sxmo] {
    text-decoration: underline;
}

.ltp-dialog__varbtn:disabled[b-0rqu59sxmo] {
    opacity: 0.5;
    cursor: default;
}

.ltp-dialog__actions[b-0rqu59sxmo] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
/* /Pages/Masters/VoucherMgr/LoadVoucherPropertiesDialog.razor.rz.scp.css */
/* Load Voucher Properties sub-dialog. */
.lv-dialog[b-cg44i2hymp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lv-dialog__switch[b-cg44i2hymp] {
    justify-content: space-between;
    width: 100%;
}

.lv-dialog__actions[b-cg44i2hymp] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
/* /Pages/Masters/VoucherMgr/QualityOrderCreationDialog.razor.rz.scp.css */
/* Quality Order creation settings (legacy frmQualityOrderCreationSettings). */
.qoc-dialog[b-pnlzvvm7j7] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.qoc-dialog__memo[b-pnlzvvm7j7]  textarea {
    min-height: 90px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.82rem;
}

.qoc-dialog__varbtn[b-pnlzvvm7j7] {
    align-self: flex-start;
    font: inherit;
    font-size: 0.75rem;
    padding: 0.15rem 0.3rem;
    margin: -0.25rem 0 0;
    color: #0b57d0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.qoc-dialog__varbtn:hover:not(:disabled)[b-pnlzvvm7j7] {
    text-decoration: underline;
}

.qoc-dialog__varbtn:disabled[b-pnlzvvm7j7] {
    color: #98a1ad;
    cursor: default;
}

.qoc-dialog__hintline[b-pnlzvvm7j7] {
    margin: 0;
    font-size: 0.73rem;
    color: #8a93a0;
}

.qoc-dialog__hintline code[b-pnlzvvm7j7] {
    font-family: Consolas, "Courier New", monospace;
    color: #0b57d0;
}

.qoc-dialog__actions[b-pnlzvvm7j7] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
/* /Pages/Masters/VoucherMgr/QualityOrderSettingsDialog.razor.rz.scp.css */
/* Quality Order settings dialog (legacy frmQualityOrderSettings). */
.qo-dialog[b-6jwq77v93w] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.qo-dialog__actions[b-6jwq77v93w] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
/* /Pages/Masters/VoucherMgr/SelectionGroupDialog.razor.rz.scp.css */
/* Selection Group sub-dialog — two check-list panels. */
.sg-dialog[b-s9imcvgm68] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    height: 100%;
}

.sg-dialog__panels[b-s9imcvgm68] {
    display: flex;
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 0;
}

.sg-dialog__panel[b-s9imcvgm68] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border: 1px solid #dfe4ea;
    border-radius: 6px;
    padding: 0.55rem;
    background: #fafbfc;
}

.sg-dialog__panel-title[b-s9imcvgm68] {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #38414d;
}

.sg-dialog__panel-tools[b-s9imcvgm68] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sg-dialog__panel-tools[b-s9imcvgm68]  .e-input-group {
    flex: 1 1 auto;
}

.sg-dialog__list[b-s9imcvgm68] {
    flex: 1 1 auto;
    min-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: #fff;
    border: 1px solid #e7ebf0;
    border-radius: 4px;
    padding: 0.35rem;
}

.sg-dialog__item[b-s9imcvgm68] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    padding: 0.12rem 0.25rem;
    cursor: pointer;
}

.sg-dialog__item:hover[b-s9imcvgm68] {
    background: #f2f6fb;
}

.sg-dialog__actions[b-s9imcvgm68] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}
/* /Pages/Masters/VoucherMgr/StatusPermissionsDialog.razor.rz.scp.css */
/* Status-based permissions dialog (legacy frmVchStatusPermission). */
.sp-dialog[b-qh8hhknirs] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
}

.sp-dialog__toolbar[b-qh8hhknirs] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.sp-search[b-qh8hhknirs] {
    flex: 0 1 280px;
    height: 30px;
    padding: 0.2rem 0.5rem;
    font-size: 0.85rem;
    border: 1px solid #cfd6de;
    border-radius: 4px;
}

.sp-dialog__bulk[b-qh8hhknirs] {
    font: inherit;
    font-size: 0.78rem;
    padding: 0.22rem 0.6rem;
    color: #0b57d0;
    background: transparent;
    border: 1px solid #cfd6de;
    border-radius: 4px;
    cursor: pointer;
}

.sp-dialog__bulk:hover:not(:disabled)[b-qh8hhknirs] {
    background: #eaf1fb;
}

.sp-dialog__bulk:disabled[b-qh8hhknirs] {
    color: #98a1ad;
    cursor: default;
}

.sp-tablewrap[b-qh8hhknirs] {
    flex: 1 1 auto;
    min-height: 200px;
    overflow: auto;
    border: 1px solid #e2e7ee;
    border-radius: 4px;
    background: #fff;
}

.sp-table[b-qh8hhknirs] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.sp-table thead th[b-qh8hhknirs] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.35rem 0.4rem;
    background: #f4f6f9;
    border-bottom: 1px solid #dfe4ea;
    font-size: 0.72rem;
    font-weight: 600;
    color: #445;
    text-align: center;
    /* Convention: grid headers wrap, never truncate. */
    white-space: normal;
    line-height: 1.15;
}

.sp-table tbody td[b-qh8hhknirs] {
    padding: 0.22rem 0.4rem;
    border-bottom: 1px solid #eef1f5;
    text-align: center;
}

.sp-table tbody tr:hover[b-qh8hhknirs] {
    background: #f7fafd;
}

.sp-table__status[b-qh8hhknirs] {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 170px;
    max-width: 240px;
    background: #fff;
    text-align: left !important;
    font-weight: 600;
    color: #1c2b3a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid #eef1f5;
}

.sp-table thead .sp-table__status[b-qh8hhknirs] {
    z-index: 3;
    background: #f4f6f9;
}

.sp-table input[type="checkbox"][b-qh8hhknirs] {
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.sp-table__empty[b-qh8hhknirs] {
    padding: 0.8rem;
    color: #8a93a0;
    text-align: left !important;
}

.sp-dialog__actions[b-qh8hhknirs] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
/* /Pages/Masters/VoucherMgr/TouchPosPropertiesDialog.razor.rz.scp.css */
/* TouchPOS Properties dialog (legacy frmvchTouchPosProperies). */
.tp-dialog[b-e51ec3ucsr] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tp-dialog__grid[b-e51ec3ucsr] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1.25rem;
}

.tp-dialog__memo[b-e51ec3ucsr]  textarea {
    min-height: 70px;
}

.tp-dialog__hintline[b-e51ec3ucsr] {
    margin: 0.15rem 0 0;
    font-size: 0.74rem;
    color: #8a93a0;
}

.tp-dialog__hintline code[b-e51ec3ucsr] {
    font-family: Consolas, "Courier New", monospace;
    color: #0b57d0;
}

/* Font editor — family / size / style + live preview. */
.tp-dialog__font[b-e51ec3ucsr] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: 0.2rem;
}

.tp-dialog__fontlabel[b-e51ec3ucsr] {
    font-size: 0.76rem;
    font-weight: 600;
    color: #445;
}

.tp-dialog__fontrow[b-e51ec3ucsr] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.4fr);
    gap: 0.75rem;
    align-items: end;
}

.tp-dialog__preview[b-e51ec3ucsr] {
    display: block;
    padding: 0.28rem 0.5rem;
    border: 1px dashed #cfd6de;
    border-radius: 4px;
    background: #fafbfd;
    color: #1c2b3a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-dialog__switch[b-e51ec3ucsr] {
    max-width: 560px;
}

.tp-dialog__actions[b-e51ec3ucsr] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

@media (max-width: 700px) {
    .tp-dialog__grid[b-e51ec3ucsr],
    .tp-dialog__fontrow[b-e51ec3ucsr] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Pages/Masters/VoucherMgr/TranClassSelectionDialog.razor.rz.scp.css */
/* Transaction Class selection sub-dialog. */
.tc-dialog[b-erdtk474yl] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    height: 100%;
}

.tc-dialog__tools[b-erdtk474yl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tc-dialog__tools[b-erdtk474yl]  .e-input-group {
    flex: 1 1 auto;
}

.tc-dialog__list[b-erdtk474yl] {
    flex: 1 1 auto;
    min-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: #fff;
    border: 1px solid #e7ebf0;
    border-radius: 4px;
    padding: 0.35rem;
}

.tc-dialog__item[b-erdtk474yl] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    padding: 0.12rem 0.25rem;
    cursor: pointer;
}

.tc-dialog__item:hover[b-erdtk474yl] {
    background: #f2f6fb;
}

.tc-dialog__actions[b-erdtk474yl] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}
/* /Pages/Masters/VoucherMgr/VchCustomFieldsDialog.razor.rz.scp.css */
/* Custom Fields sub-dialog. */
.cf-dialog[b-owvxe4yzud] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.cf-dialog__toolbar[b-owvxe4yzud] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cf-dialog__actions[b-owvxe4yzud] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.cf-grid[b-owvxe4yzud]  .e-rowcell {
    padding: 3px 5px;
    overflow: visible;
}

.cf-grid__rowactions[b-owvxe4yzud] {
    display: flex;
    gap: 0.3rem;
    justify-content: center;
}

.cf-grid__rowactions[b-owvxe4yzud]  .e-btn {
    font-size: 0.72rem;
    padding: 0.25rem 0.45rem;
}

.cf-adv[b-owvxe4yzud] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.cf-adv__memo[b-owvxe4yzud]  textarea {
    min-height: 72px;
}
/* /Pages/Masters/VoucherMgr/VoucherManagerMaster.razor.rz.scp.css */
/* Voucher Manager master — layout mirrors the other master shells
   (TransactionClassMaster is the reference). */

.vm-master__body[b-b0ky0n5fs1],
.vm-master[b-b0ky0n5fs1]  .vm-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.vm-master__form[b-b0ky0n5fs1],
.vm-master[b-b0ky0n5fs1]  .vm-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

.vm-master__detail[b-b0ky0n5fs1] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Header block — two-column grid (plain-div cells so scoped CSS applies:
   Syncfusion roots don't get the isolation attribute). */
.vm-headgrid[b-b0ky0n5fs1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.2rem 1.5rem;
    align-items: end;
}
.vm-headgrid__cell[b-b0ky0n5fs1] { min-width: 0; }

/* Detail area = form + side action panel (legacy grpButton launcher bar). */
.vm-detail-flex[b-b0ky0n5fs1] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.vm-detail-main[b-b0ky0n5fs1] {
    flex: 1 1 auto;
    min-width: 0;
}
.vm-actions[b-b0ky0n5fs1] {
    flex: 0 0 180px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    position: sticky;
    top: 0.5rem;
    border: 1px solid #dfe4ea;
    border-radius: 6px;
    padding: 0.55rem;
    background: #fafbfc;
}
.vm-actions__title[b-b0ky0n5fs1] {
    margin: 0 0 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5a6472;
}
.vm-actions[b-b0ky0n5fs1]  .e-btn {
    width: 100%;
    text-align: left;
    font-size: 0.76rem;
    padding: 0.3rem 0.5rem;
}
.vm-actions[b-b0ky0n5fs1]  .vm-actions__soon {
    opacity: 0.55;
}
.vm-actions__note[b-b0ky0n5fs1] {
    margin: 0.25rem 0 0;
    font-size: 0.72rem;
    color: #8a93a0;
}
@media (max-width: 900px) {
    .vm-detail-flex[b-b0ky0n5fs1] { flex-direction: column; }
    .vm-actions[b-b0ky0n5fs1] { position: static; flex-basis: auto; width: 100%; }
}
.vm-headgrid__switch[b-b0ky0n5fs1] { padding-bottom: 0.5rem; }
@media (max-width: 700px) {
    .vm-headgrid[b-b0ky0n5fs1] { grid-template-columns: minmax(0, 1fr); }
}

/* Uppercase display for the PK name (data is uppercased in the setter too). */
.vm-upper[b-b0ky0n5fs1]  input { text-transform: uppercase; }

/* Tab content + column layout. */
.vm-tabs[b-b0ky0n5fs1] { margin-top: 0.25rem; }
.vm-tab-content[b-b0ky0n5fs1] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 0.15rem;
}
.vm-cols[b-b0ky0n5fs1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    align-items: start;
}

/* Boxed sub-panels (legacy group boxes). */
.vm-box[b-b0ky0n5fs1] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.5rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.35));
    min-width: 0;
}
.vm-box__title[b-b0ky0n5fs1] {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.75;
}

/* Switch rows: label left, toggle flush right (global convention markup). */
.vm-box .prod-master__switch[b-b0ky0n5fs1],
.vm-headrow .prod-master__switch[b-b0ky0n5fs1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.vm-memo[b-b0ky0n5fs1]  textarea { min-height: 3.2rem; }

/* Numbering field row. */
.vm-numrow[b-b0ky0n5fs1] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem 1.25rem;
    align-items: end;
}

.vm-grid-toolbar[b-b0ky0n5fs1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.vm-muted[b-b0ky0n5fs1] {
    color: var(--shell-text-secondary);
    font-size: 0.85rem;
}

/* Grids keep a working minimum width and scroll horizontally inside their
   wrapper instead of squeezing the cell editors. */
.vm-grid-wrap[b-b0ky0n5fs1] { overflow-x: auto; }
.vm-grid[b-b0ky0n5fs1] {
    margin-top: 0.25rem;
    min-width: 560px;
}
.vm-grid[b-b0ky0n5fs1]  td .e-control-wrapper,
.vm-grid[b-b0ky0n5fs1]  td .e-input-group {
    min-width: 110px;
}

.vm-embedded-toolbar[b-b0ky0n5fs1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    width: 100%;
}

/* Page toolbar is a full-width flex row so margin-left:auto can push the
   Duplicate button to the right edge of the screen. */
.prod-master__toolbar[b-b0ky0n5fs1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 100%;
}

/* Help panel — fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-b0ky0n5fs1] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-b0ky0n5fs1] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-b0ky0n5fs1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-b0ky0n5fs1] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-b0ky0n5fs1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-b0ky0n5fs1] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-b0ky0n5fs1] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-b0ky0n5fs1] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-b0ky0n5fs1] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-b0ky0n5fs1] { padding-left: 0.15rem; }

[b-b0ky0n5fs1] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 1100px) {
    .vm-cols[b-b0ky0n5fs1] { grid-template-columns: minmax(0, 1fr); }
    .vm-numrow[b-b0ky0n5fs1] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .ct-page__help[b-b0ky0n5fs1],
    .ct-page__help--docked[b-b0ky0n5fs1] { flex: 0 0 auto; width: 100%; overflow: visible; }
}

@media (max-width: 720px) {
    .vm-numrow[b-b0ky0n5fs1] { grid-template-columns: minmax(0, 1fr); }
    .vm-master__body[b-b0ky0n5fs1],
    .vm-master[b-b0ky0n5fs1]  .vm-embedded-body { flex-wrap: wrap; }
}

/* NF-03: the panel head now carries the control finder between the title
   and the record badge, so it needs to lay out as three items rather than
   two and to let the finder shrink before anything wraps.

   STICKY, and that is the point rather than a flourish: the finder is only
   useful while you are scrolling THROUGH the form looking for the field it
   just ringed, and a box that scrolls away takes Next/Previous with it. The
   scroll surface here is the form <section> (see master-body > section in
   app.css), so top:0 pins this to the top of that pane. The record title and
   ID ride along, which is a second small win — on a long form you can always
   see which voucher type you are editing.

   An opaque background is not optional on a sticky row: without it the form
   controls scroll visibly THROUGH the heading. z-index stays low — it only
   has to beat the fields in the same pane, and Syncfusion renders its popups
   in a body-level portal far above this. */
.vm-master__panel-head[b-b0ky0n5fs1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--shell-panel-background);
    /* Pulled out to the pane's edges so the background covers the full width
       as content passes under it, then padded back to keep the text aligned
       with everything below. */
    margin-inline: -0.35rem;
    padding-inline: 0.35rem;
    padding-top: 0.35rem;
}

.vm-master__panel-head > :first-child[b-b0ky0n5fs1] {
    flex: 0 1 auto;
    min-width: 0;
}

/* the voucher type's lead filter, read-only under the lead switches */
.vm-leadfilter[b-b0ky0n5fs1] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.35rem 0.55rem;
    border: 1px dashed var(--shell-border);
    border-radius: 6px;
    font-size: 0.84rem;
}
.vm-leadfilter__label[b-b0ky0n5fs1] { font-weight: 600; }
.vm-leadfilter__btn[b-b0ky0n5fs1] { margin-left: auto; }
.vm-leadfilter__none[b-b0ky0n5fs1] { opacity: 0.75; }
.vm-leadfilter__text[b-b0ky0n5fs1] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.8rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    min-width: 0;
}
.vm-hint--warn[b-b0ky0n5fs1] { color: var(--shell-warning, #b26a00); }
/* /Pages/Masters/VoucherMgr/VoucherSharingDialog.razor.rz.scp.css */
/* Voucher Sharing sub-dialog. */
.vs-dialog[b-4rfcfbxdzf] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.vs-dialog__switch[b-4rfcfbxdzf] {
    justify-content: space-between;
    width: 100%;
}

.vs-dialog__memo[b-4rfcfbxdzf]  textarea {
    min-height: 64px;
}

.vs-dialog__actions[b-4rfcfbxdzf] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
/* /Pages/Masters/VoucherMgr/WorkFlowSettingsDialog.razor.rz.scp.css */
/* Work-flow settings dialog (legacy frmVCHWorkFlowSettings). */
.wf-dialog[b-yihzisld38] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wf-dialog__toolbar[b-yihzisld38] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.wf-dialog__actions[b-yihzisld38] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
/* /Pages/Navigation/MenuGroupPage.razor.rz.scp.css */
/* MenuGroupPage shares VoucherTypeListPage's visual language. The vt-*
   classes are duplicated here because Blazor CSS isolation scopes each
   component's .razor.css to its own markup — the VoucherTypeListPage
   styles don't reach this page. The mg-group rules add the per-GroupName
   section headers that are unique to this page. */

.vt-page[b-t615qgtpqh] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem 1rem 0.75rem 2rem;
}

/* ── Body: card list + User Guide ──
   Laid out by the global list-split rules (app.css): the cards scroll on
   their own, the guide sits at the right edge and scrolls inside itself.
   The padding keeps the lifted/ringed top-row card from being clipped by
   the list pane's scroll edge. */
.mg-page__main[b-t615qgtpqh] {
    gap: 1rem;
}

.mg-page__cards[b-t615qgtpqh] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0.5rem 0.75rem 1rem 0.25rem;
}

/* ── Header ── */
.vt-page__header[b-t615qgtpqh] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.vt-page__header-text[b-t615qgtpqh] {
    flex: 1;
}

.vt-page__eyebrow[b-t615qgtpqh] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.vt-page__title[b-t615qgtpqh] {
    margin: 0.25rem 0 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--shell-text);
}

/* ── Refresh Button ── */
.vt-page__refresh-btn[b-t615qgtpqh] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--shell-border);
    border-radius: 10px;
    background: var(--shell-panel-background-soft);
    color: var(--shell-text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
    white-space: nowrap;
    margin-top: 0.25rem;
}

.vt-page__refresh-btn:hover:not(:disabled)[b-t615qgtpqh] {
    border-color: var(--shell-accent);
    background: color-mix(in srgb, var(--shell-accent) 10%, transparent);
}

.vt-page__refresh-btn:disabled[b-t615qgtpqh] {
    opacity: 0.5;
    cursor: not-allowed;
}

.vt-spin[b-t615qgtpqh] {
    animation: vt-spin-anim-b-t615qgtpqh 0.8s linear infinite;
}

@keyframes vt-spin-anim-b-t615qgtpqh {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Search Bar ── */
.vt-page__search-bar[b-t615qgtpqh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    background: var(--shell-panel-background-soft);
    border: 1px solid var(--shell-border);
    border-radius: 12px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.vt-page__search-bar:focus-within[b-t615qgtpqh] {
    border-color: var(--shell-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--shell-accent) 15%, transparent);
}

.vt-page__search-icon[b-t615qgtpqh] {
    font-size: 0.9rem;
    color: var(--shell-text-secondary);
    flex: 0 0 auto;
}

.vt-page__search-input[b-t615qgtpqh] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--shell-text);
    min-width: 0;
}

.vt-page__search-input[b-t615qgtpqh]::placeholder {
    color: var(--shell-text-secondary);
    opacity: 0.7;
}

.vt-page__search-clear[b-t615qgtpqh] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--shell-text-secondary) 15%, transparent);
    color: var(--shell-text-secondary);
    font-size: 0.65rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
}

.vt-page__search-clear:hover[b-t615qgtpqh] {
    background: color-mix(in srgb, var(--shell-danger) 18%, transparent);
    color: var(--shell-danger);
}

.vt-page__loading[b-t615qgtpqh],
.vt-page__empty[b-t615qgtpqh] {
    padding: 2rem;
    text-align: center;
    color: var(--shell-text-secondary);
    font-size: 0.95rem;
}

/* ── Group section ── */
.mg-group[b-t615qgtpqh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mg-group__title[b-t615qgtpqh] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--shell-text);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--shell-border);
    letter-spacing: 0.01em;
}

/* ── Card Grid ── */
.vt-page__grid[b-t615qgtpqh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}

/* ── Card Tile ── */
.vt-card[b-t615qgtpqh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    background: var(--shell-panel-background-soft);
    border: 1px solid var(--shell-border);
    border-radius: 12px;
    box-shadow: var(--shell-shadow);
    outline: none;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}

.vt-card:hover[b-t615qgtpqh] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* The keyboard's cursor: the focused card lifts like a hovered one and
   carries a visible ring, so the arrows always show where Enter will land. */
.vt-card:focus[b-t615qgtpqh] {
    transform: translateY(-2px);
    border-color: var(--shell-button-primary, #0d6efd);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--shell-button-primary, #0d6efd) 35%, transparent),
                0 6px 20px rgba(0, 0, 0, 0.08);
}

.vt-card__icon-wrap[b-t615qgtpqh] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.05rem;
    transition: transform 0.18s ease;
}

.vt-card:hover .vt-card__icon-wrap[b-t615qgtpqh] {
    transform: scale(1.08);
}

.vt-card__info[b-t615qgtpqh] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.vt-card__title[b-t615qgtpqh] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--shell-text);
    /* Wrap onto multiple lines instead of clipping when the name is too long
       for the tile; break very long unbroken words rather than overflowing. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.vt-card__meta[b-t615qgtpqh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.vt-card__meta-item[b-t615qgtpqh] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--shell-text-secondary);
}

.vt-card__desc[b-t615qgtpqh] {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--shell-text-secondary);
    /* Wrap the description instead of clipping it when it doesn't fit the tile. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.vt-card__arrow[b-t615qgtpqh] {
    flex: 0 0 auto;
    font-size: 0.85rem;
    color: var(--shell-text-secondary);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.vt-card:hover .vt-card__arrow[b-t615qgtpqh] {
    opacity: 1;
    transform: translateX(0);
}

/* ── Color Themes ── */
.vt-card--blue:hover[b-t615qgtpqh]  { border-color: #3b82f6; }
.vt-card--green:hover[b-t615qgtpqh] { border-color: #22c55e; }
.vt-card--teal:hover[b-t615qgtpqh]  { border-color: #14b8a6; }
.vt-card--orange:hover[b-t615qgtpqh] { border-color: #f97316; }
.vt-card--purple:hover[b-t615qgtpqh] { border-color: #a855f7; }
.vt-card--rose:hover[b-t615qgtpqh]   { border-color: #f43f5e; }
.vt-card--amber:hover[b-t615qgtpqh]  { border-color: #f59e0b; }
.vt-card--indigo:hover[b-t615qgtpqh] { border-color: #6366f1; }
.vt-card--cyan:hover[b-t615qgtpqh]   { border-color: #06b6d4; }
.vt-card--slate:hover[b-t615qgtpqh]  { border-color: #64748b; }

.vt-card__icon-wrap--blue[b-t615qgtpqh]   { background: rgba(59,130,246,0.12); color: #3b82f6; }
.vt-card__icon-wrap--green[b-t615qgtpqh]  { background: rgba(34,197,94,0.12);  color: #22c55e; }
.vt-card__icon-wrap--teal[b-t615qgtpqh]   { background: rgba(20,184,166,0.12); color: #14b8a6; }
.vt-card__icon-wrap--orange[b-t615qgtpqh] { background: rgba(249,115,22,0.12); color: #f97316; }
.vt-card__icon-wrap--purple[b-t615qgtpqh] { background: rgba(168,85,247,0.12); color: #a855f7; }
.vt-card__icon-wrap--rose[b-t615qgtpqh]   { background: rgba(244,63,94,0.12);  color: #f43f5e; }
.vt-card__icon-wrap--amber[b-t615qgtpqh]  { background: rgba(245,158,11,0.12); color: #f59e0b; }
.vt-card__icon-wrap--indigo[b-t615qgtpqh] { background: rgba(99,102,241,0.12); color: #6366f1; }
.vt-card__icon-wrap--cyan[b-t615qgtpqh]   { background: rgba(6,182,212,0.12);  color: #06b6d4; }
.vt-card__icon-wrap--slate[b-t615qgtpqh]  { background: rgba(100,116,139,0.12);color: #64748b; }

/* ── Responsive ── */
@media (max-width: 640px) {
    .vt-page[b-t615qgtpqh] {
        padding: 1rem;
    }

    .vt-page__grid[b-t615qgtpqh] {
        grid-template-columns: 1fr;
    }
}

/* ── Waiting-work count on approval cards (the APPRL group only) ──────────
   Amber rather than red: a queue, not a fault - the same reading as the
   Portal Administration cards. Theme status tokens, so it holds in dark mode.
   Only drawn when there is work. */
.mg-badge[b-t615qgtpqh] {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--shell-status-warn-border, #f0cf9a);
    background: var(--shell-status-warn-bg, #fde8c8);
    color: var(--shell-status-warn-text, #8a5300);
    font-size: 0.72rem;
    font-weight: 700;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.mg-badge-label[b-t615qgtpqh] {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--shell-status-warn-text, #8a5300);
}
/* /Pages/Navigation/VoucherTypeListPage.razor.rz.scp.css */
/* ── Page row: card list + help panel at the right edge ──
   Laid out by the global list-split rules (app.css): the list pane scrolls
   on its own, the guide scrolls inside itself. */
.vt-layout[b-qo1gqria3u] {
    flex-direction: row;
    padding: 0 1rem 0.75rem 0;
}

.vt-page[b-qo1gqria3u] {
    gap: 1.25rem;
    padding: 1.5rem 0.75rem 0 2rem;
}

.vt-page__cards[b-qo1gqria3u] {
    padding: 0.5rem 0.5rem 1rem 0.25rem;
}

/* ── Header ── */
.vt-page__header[b-qo1gqria3u] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.vt-page__header-text[b-qo1gqria3u] {
    flex: 1;
}

.vt-page__eyebrow[b-qo1gqria3u] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.vt-page__title[b-qo1gqria3u] {
    margin: 0.25rem 0 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--shell-text);
}

/* ── Refresh Button ── */
.vt-page__refresh-btn[b-qo1gqria3u] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--shell-border);
    border-radius: 10px;
    background: var(--shell-panel-background-soft);
    color: var(--shell-text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
    white-space: nowrap;
    margin-top: 0.25rem;
}

.vt-page__refresh-btn:hover:not(:disabled)[b-qo1gqria3u] {
    border-color: var(--shell-accent);
    background: color-mix(in srgb, var(--shell-accent) 10%, transparent);
}

.vt-page__refresh-btn:disabled[b-qo1gqria3u] {
    opacity: 0.5;
    cursor: not-allowed;
}

.vt-spin[b-qo1gqria3u] {
    animation: vt-spin-anim-b-qo1gqria3u 0.8s linear infinite;
}

@keyframes vt-spin-anim-b-qo1gqria3u {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Search Bar ── */
.vt-page__search-bar[b-qo1gqria3u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    background: var(--shell-panel-background-soft);
    border: 1px solid var(--shell-border);
    border-radius: 12px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.vt-page__search-bar:focus-within[b-qo1gqria3u] {
    border-color: var(--shell-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--shell-accent) 15%, transparent);
}

.vt-page__search-icon[b-qo1gqria3u] {
    font-size: 0.9rem;
    color: var(--shell-text-secondary);
    flex: 0 0 auto;
}

.vt-page__search-input[b-qo1gqria3u] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--shell-text);
    min-width: 0;
}

.vt-page__search-input[b-qo1gqria3u]::placeholder {
    color: var(--shell-text-secondary);
    opacity: 0.7;
}

.vt-page__search-clear[b-qo1gqria3u] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--shell-text-secondary) 15%, transparent);
    color: var(--shell-text-secondary);
    font-size: 0.65rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
}

.vt-page__search-clear:hover[b-qo1gqria3u] {
    background: color-mix(in srgb, var(--shell-danger) 18%, transparent);
    color: var(--shell-danger);
}

/* ── Status ── */
.vt-page__status[b-qo1gqria3u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
}

.vt-page__status--success[b-qo1gqria3u] {
    background: color-mix(in srgb, var(--shell-success) 15%, transparent);
    color: var(--shell-success);
}

.vt-page__status--error[b-qo1gqria3u] {
    background: color-mix(in srgb, var(--shell-danger) 15%, transparent);
    color: var(--shell-danger);
}

.vt-page__status--info[b-qo1gqria3u] {
    background: color-mix(in srgb, var(--shell-accent) 15%, transparent);
    color: var(--shell-accent);
}

.vt-page__loading[b-qo1gqria3u],
.vt-page__empty[b-qo1gqria3u] {
    padding: 2rem;
    text-align: center;
    color: var(--shell-text-secondary);
    font-size: 0.95rem;
}

/* ── Card Grid — denser, more horizontal layout ──
   minmax 320 → 240 widens the grid to ~5 columns at a typical 1200 px
   content width (vs. ~3 before). Combined with the tighter per-card
   paddings / icon / padding below, the page reads as a horizontal
   picker strip instead of a stack of fat rows. */
.vt-page__grid[b-qo1gqria3u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}

/* ── Card Tile — more compact ── */
.vt-card[b-qo1gqria3u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    background: var(--shell-panel-background-soft);
    border: 1px solid var(--shell-border);
    border-radius: 12px;
    box-shadow: var(--shell-shadow);
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}

.vt-card:hover[b-qo1gqria3u] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* The keyboard's cursor: the focused card lifts like a hovered one and
   carries a visible ring, so the arrows always show where Enter will land. */
.vt-card:focus[b-qo1gqria3u] {
    outline: none;
    transform: translateY(-2px);
    border-color: var(--shell-button-primary, #0d6efd);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--shell-button-primary, #0d6efd) 35%, transparent),
                0 6px 20px rgba(0, 0, 0, 0.08);
}

/* ── Icon Circle — sized down to keep cards compact ── */
.vt-card__icon-wrap[b-qo1gqria3u] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.05rem;
    transition: transform 0.18s ease;
}

.vt-card:hover .vt-card__icon-wrap[b-qo1gqria3u] {
    transform: scale(1.08);
}

/* ── Info Section ── */
.vt-card__info[b-qo1gqria3u] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.vt-card__title[b-qo1gqria3u] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--shell-text);
    /* Wrap onto multiple lines instead of clipping when the name is too long
       for the tile; break very long unbroken words rather than overflowing. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.vt-card__meta[b-qo1gqria3u] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.vt-card__meta-item[b-qo1gqria3u] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--shell-text-secondary);
}

.vt-card__meta-item .e-icons[b-qo1gqria3u] {
    font-size: 0.72rem;
    opacity: 0.65;
}

/* ── Arrow ── */
.vt-card__arrow[b-qo1gqria3u] {
    flex: 0 0 auto;
    font-size: 0.85rem;
    color: var(--shell-text-secondary);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.vt-card:hover .vt-card__arrow[b-qo1gqria3u] {
    opacity: 1;
    transform: translateX(0);
}

/* ── Color Themes ── */
.vt-card--blue:hover[b-qo1gqria3u]  { border-color: #3b82f6; }
.vt-card--green:hover[b-qo1gqria3u] { border-color: #22c55e; }
.vt-card--teal:hover[b-qo1gqria3u]  { border-color: #14b8a6; }
.vt-card--orange:hover[b-qo1gqria3u] { border-color: #f97316; }
.vt-card--purple:hover[b-qo1gqria3u] { border-color: #a855f7; }
.vt-card--rose:hover[b-qo1gqria3u]   { border-color: #f43f5e; }
.vt-card--amber:hover[b-qo1gqria3u]  { border-color: #f59e0b; }
.vt-card--indigo:hover[b-qo1gqria3u] { border-color: #6366f1; }
.vt-card--cyan:hover[b-qo1gqria3u]   { border-color: #06b6d4; }
.vt-card--slate:hover[b-qo1gqria3u]  { border-color: #64748b; }

.vt-card__icon-wrap--blue[b-qo1gqria3u]   { background: rgba(59,130,246,0.12); color: #3b82f6; }
.vt-card__icon-wrap--green[b-qo1gqria3u]  { background: rgba(34,197,94,0.12);  color: #22c55e; }
.vt-card__icon-wrap--teal[b-qo1gqria3u]   { background: rgba(20,184,166,0.12); color: #14b8a6; }
.vt-card__icon-wrap--orange[b-qo1gqria3u] { background: rgba(249,115,22,0.12); color: #f97316; }
.vt-card__icon-wrap--purple[b-qo1gqria3u] { background: rgba(168,85,247,0.12); color: #a855f7; }
.vt-card__icon-wrap--rose[b-qo1gqria3u]   { background: rgba(244,63,94,0.12);  color: #f43f5e; }
.vt-card__icon-wrap--amber[b-qo1gqria3u]  { background: rgba(245,158,11,0.12); color: #f59e0b; }
.vt-card__icon-wrap--indigo[b-qo1gqria3u] { background: rgba(99,102,241,0.12); color: #6366f1; }
.vt-card__icon-wrap--cyan[b-qo1gqria3u]   { background: rgba(6,182,212,0.12);  color: #06b6d4; }
.vt-card__icon-wrap--slate[b-qo1gqria3u]  { background: rgba(100,116,139,0.12);color: #64748b; }

/* ── Responsive ── */
@media (max-width: 640px) {
    .vt-page[b-qo1gqria3u] {
        padding: 1rem;
    }

    .vt-page__grid[b-qo1gqria3u] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Reports/CustomReportViewerPage.razor.rz.scp.css */
/* A flex COLUMN filling the tab: a slim header, then the data view takes
   every remaining pixel (user call 2026-09-11). It was a grid with
   min-height 100%, whose rows shared the spare height - the header grew
   into a tall empty banner. */
.report-viewer-page[b-ut3k6fgdsx] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    height: 100%;
    min-height: 0;
    padding: 0.15rem 0 0;
}

.report-viewer-page > *[b-ut3k6fgdsx] {
    flex: 0 0 auto;
}

/* ── Header ── */

.rv-header[b-ut3k6fgdsx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.3rem 0.6rem 0.3rem 0.9rem;
    border-radius: 12px;
    background: var(--shell-hero-background);
    color: var(--shell-text-inverse);
    box-shadow: var(--shell-shadow-strong);
}

.rv-header__copy[b-ut3k6fgdsx] {
    flex: 1 1 auto;
    min-width: 0;
}

.rv-header__copy h1[b-ut3k6fgdsx] {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-header__eyebrow[b-ut3k6fgdsx] {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.82;
}

.rv-header__toolbar[b-ut3k6fgdsx] {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.35rem;
}

.dc-icon-btn[b-ut3k6fgdsx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-size: 0.92rem;
}

.dc-icon-btn:hover[b-ut3k6fgdsx] {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.28);
}

.dc-icon-btn:active[b-ut3k6fgdsx] {
    background: rgba(255, 255, 255, 0.28);
}

.dc-icon-btn[disabled][b-ut3k6fgdsx] {
    opacity: 0.35;
    pointer-events: none;
}

/* ── Grid wrap ── */

.report-viewer-page > .rv-grid-wrap[b-ut3k6fgdsx] {
    flex: 1 1 auto;
}

.rv-grid-wrap[b-ut3k6fgdsx] {
    min-height: 240px;
    border-radius: 12px;
    background: var(--shell-panel-background-soft);
    border: 1px solid var(--shell-border);
    box-shadow: var(--shell-shadow);
    overflow: hidden;
    padding: 0.25rem;
}

[b-ut3k6fgdsx] .rv-grid.e-grid {
    border-radius: 20px;
    border: 1px solid var(--shell-border);
    background: var(--shell-contrast-surface-bg);
    box-shadow: none;
}

[b-ut3k6fgdsx] .rv-grid .e-gridheader {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background: color-mix(in srgb, var(--shell-contrast-surface-bg) 90%, var(--shell-button-primary) 10%);
}

[b-ut3k6fgdsx] .rv-grid .e-headercell,
[b-ut3k6fgdsx] .rv-grid .e-rowcell,
[b-ut3k6fgdsx] .rv-grid .e-summarycell {
    color: var(--shell-contrast-surface-text);
}

[b-ut3k6fgdsx] .rv-grid .e-gridfooter {
    background: color-mix(in srgb, var(--shell-contrast-surface-bg) 84%, var(--shell-button-primary) 16%);
    border-top: 2px solid var(--shell-button-primary);
}

[b-ut3k6fgdsx] .rv-grid .e-summarycell {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--shell-text-primary);
}

[b-ut3k6fgdsx] .rv-grid .e-gridcontent .e-content {
    overflow-x: auto !important;
}

[b-ut3k6fgdsx] .rv-grid .e-toolbar {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

[b-ut3k6fgdsx] .rv-grid .e-pager {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* ── Buttons in header ── */

[b-ut3k6fgdsx] .rv-header .e-btn {
    min-height: 28px;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

[b-ut3k6fgdsx] .rv-header .secondary-action.e-btn {
    border-radius: 999px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

[b-ut3k6fgdsx] .rv-header .secondary-action.e-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

/* ── Status ── */

[b-ut3k6fgdsx] .report-status.e-message {
    border-radius: 18px;
    box-shadow: var(--shell-shadow);
}

/* ── Loading / Empty ── */

.report-list-state[b-ut3k6fgdsx] {
    display: grid;
    place-items: center;
    min-height: 200px;
    padding: 2rem;
    border-radius: 12px;
    background: var(--shell-panel-background-soft);
    border: 1px solid var(--shell-border);
    box-shadow: var(--shell-shadow);
    text-align: center;
}

.report-list-state--empty[b-ut3k6fgdsx] {
    gap: 0.35rem;
}

.report-list-state--empty h2[b-ut3k6fgdsx],
.report-list-state--empty p[b-ut3k6fgdsx] {
    margin: 0;
}

.report-list-state--empty p[b-ut3k6fgdsx] {
    color: var(--shell-text-secondary);
}

/* ── Responsive ── */

@media (max-width: 820px) {
    .rv-header[b-ut3k6fgdsx] {
        flex-direction: column;
        align-items: stretch;
    }

    .rv-header__toolbar[b-ut3k6fgdsx] {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .rv-header[b-ut3k6fgdsx],
    .rv-grid-wrap[b-ut3k6fgdsx] {
        border-radius: 10px;
    }
}

/* ── Grid / Pivot / Graph (CustomReportViewerPage.Views.cs) ── */
/* The view switch holds the left of the bar; the tools line up on the right. */
.rv-viewswitch[b-ut3k6fgdsx] {
    display: inline-flex;
    gap: 0.3rem;
    margin-right: auto;
}

/* Chart text in the app's font - Syncfusion's own default fell back to a
   serif here (axis labels, legend, data labels). A CSS font-family beats
   the SVG attribute; the export-only title carries its own FontFamily. */
.rv-chart-wrap[b-ut3k6fgdsx]  svg text {
    font-family: var(--shell-font-family, "Segoe UI", Helvetica, Arial, sans-serif) !important;
}

.rv-viewswitch[b-ut3k6fgdsx]  .rv-viewswitch__btn {
    white-space: nowrap;
}

/* The pivot and the chart fill the page the way the grid does. */
.report-viewer-page > .rv-pivot-wrap[b-ut3k6fgdsx],
.report-viewer-page > .rv-chart-wrap[b-ut3k6fgdsx] {
    flex: 1 1 auto;
}

.rv-pivot-wrap[b-ut3k6fgdsx],
.rv-chart-wrap[b-ut3k6fgdsx] {
    min-height: 320px;
    height: auto;
    max-width: 100%;
    overflow: hidden;
}

.rv-chartbar[b-ut3k6fgdsx] {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
    padding: 0.1rem 0;
}

.rv-chartpick[b-ut3k6fgdsx] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.rv-chartpick > label[b-ut3k6fgdsx] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--shell-text-secondary, #5b6a7d);
}

.rv-chartpick[b-ut3k6fgdsx]  .rv-chartcombo {
    width: 190px !important;
    flex: 0 0 auto;
}

.rv-chartpick[b-ut3k6fgdsx]  .rv-chartmulti {
    width: 300px !important;
    min-width: 300px;
    flex: 0 0 auto;
}

/* The view hints sit under the data in one quiet line. */
.report-viewer-page > .app-field-hint[b-ut3k6fgdsx] {
    margin: 0;
    font-size: 0.72rem;
}


/* The view-switch indicator: a chip over the page, up before the pivot / graph
   build starts (the browser paints nothing while that runs). */
.rv-switching[b-ut3k6fgdsx] {
    position: fixed;
    inset-block-start: 40%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.1rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--shell-text, #1f2a37);
    background: var(--shell-panel-background, #fff);
    border: 1px solid var(--shell-border, #d8dee7);
    box-shadow: var(--shell-shadow, 0 8px 24px rgba(0, 0, 0, 0.18));
}

.rv-switching__spin[b-ut3k6fgdsx] {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid var(--shell-border, #d8dee7);
    border-top-color: var(--shell-accent, #2f7d6b);
    animation: rv-switching-spin-b-ut3k6fgdsx 0.9s linear infinite;
}

@keyframes rv-switching-spin-b-ut3k6fgdsx { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { .rv-switching__spin[b-ut3k6fgdsx] { animation: none; } }

@media print { .rv-switching[b-ut3k6fgdsx] { display: none; } }

.rv-loading__spin[b-ut3k6fgdsx] { display: inline-block; width: 1.6rem; height: 1.6rem; border-width: 3px; }

.rv-runtime[b-ut3k6fgdsx] { margin: 0.1rem 0 0.35rem; text-align: center; }

@media print { .rv-runtime[b-ut3k6fgdsx] { display: none; } }
/* /Pages/Reports/ReportLauncherPage.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   Report launcher. Everything reads from --shell-* tokens, so the page
   follows whichever theme the app is wearing.
   ══════════════════════════════════════════════════════════════════════════ */

/* The card list takes the row's free width and scrolls on its own
   (app.css gives every direct section of master-body overflow-y:auto);
   the guide beside it is sized by the global ct-page__help rules. */
.rptl-list[b-0j7nfxo8f0] {
    flex: 1 1 auto;
    min-width: 0;
}

.rptl-toolbar[b-0j7nfxo8f0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0 0.75rem;
}

.rptl-toolbar[b-0j7nfxo8f0]  .rptl-search { max-width: 420px; }

.rptl-count[b-0j7nfxo8f0] {
    font-size: 0.85rem;
    color: var(--shell-text-muted, #5a6675);
    white-space: nowrap;
}

/* Category headings: quiet dividers, not shouting banners - the cards are
   what the eye is looking for. */
.rptl-cat[b-0j7nfxo8f0] {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--shell-text-muted, #5a6675);
    margin: 1.4rem 0 0.6rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--shell-border, #d8dee7);
}
.rptl-cat:first-of-type[b-0j7nfxo8f0] { margin-top: 0.4rem; }

/* One card per report, laid out by the grid rather than by per-card margins,
   so the gaps stay equal however many land on a row. */
.rptl-grid[b-0j7nfxo8f0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.rptl-card[b-0j7nfxo8f0] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    text-align: left;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 8px;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text, #1b2a41);
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.rptl-card:hover[b-0j7nfxo8f0] {
    border-color: var(--shell-accent, #0d6efd);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.rptl-card:focus-visible[b-0j7nfxo8f0],
.rptl-card:focus[b-0j7nfxo8f0] {
    outline: 2px solid var(--shell-accent, #0d6efd);
    outline-offset: 2px;
}

.rptl-card__title[b-0j7nfxo8f0] { font-weight: 700; font-size: 0.95rem; }

.rptl-card__desc[b-0j7nfxo8f0] {
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--shell-text-muted, #5a6675);
}

/* Listed but not openable. Dimmed and un-hoverable, with the reason spelled
   out - a report that simply vanished would be read as a fault. */
.rptl-card--denied[b-0j7nfxo8f0] { opacity: 0.55; cursor: not-allowed; }
.rptl-card--denied:hover[b-0j7nfxo8f0] { border-color: var(--shell-border, #d8dee7); box-shadow: none; transform: none; }

.rptl-card__denied[b-0j7nfxo8f0] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--shell-danger, #c0392b);
}

.rptl-empty[b-0j7nfxo8f0],
.rptl-error[b-0j7nfxo8f0] {
    padding: 1rem 0;
    color: var(--shell-text-muted, #5a6675);
}
.rptl-error[b-0j7nfxo8f0] { color: var(--shell-danger, #c0392b); }

@media (prefers-reduced-motion: reduce) {
    .rptl-card[b-0j7nfxo8f0] { transition: none; }
    .rptl-card:hover[b-0j7nfxo8f0] { transform: none; }
}
/* /Pages/Reports/ReportListPage.razor.rz.scp.css */
.report-list-page[b-79gqwy3g3y] {
    gap: 1.25rem;
    padding: 0.25rem 0 0.75rem;
    position: relative;
}

/* The shell fills the page below nothing: header on top, then the
   list-split row taking the rest of the height (app.css). */
.report-list-shell[b-79gqwy3g3y] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.report-list-shell__header[b-79gqwy3g3y] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    border-radius: 24px;
    background: var(--shell-hero-background);
    color: var(--shell-text-inverse);
    box-shadow: var(--shell-shadow-strong);
}

.report-list-shell__copy[b-79gqwy3g3y] {
    display: grid;
    gap: 0.28rem;
    max-width: 52rem;
}

.report-list-shell__copy h1[b-79gqwy3g3y] {
    margin: 0;
    font-size: 1.85rem;
    line-height: 1.05;
}

.report-list-shell__copy p:last-child[b-79gqwy3g3y] {
    margin: 0;
    color: var(--shell-text-muted-inverse);
}

.report-list-shell__eyebrow[b-79gqwy3g3y] {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.82;
}

.report-list-shell__toolbar[b-79gqwy3g3y] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}

[b-79gqwy3g3y] .report-status.e-message {
    border-radius: 18px;
    box-shadow: var(--shell-shadow);
}

/* ── Content + Help / User Guide ──
   Laid out by the global list-split rules (app.css): the tree scrolls on its
   own, the guide sits at the right edge and scrolls inside itself. */
.report-list-main[b-79gqwy3g3y] {
    display: grid;
    gap: 1rem;
    align-content: start;
    padding-right: 0.25rem;
}

.report-list-state[b-79gqwy3g3y] {
    display: grid;
    place-items: center;
    min-height: 280px;
    padding: 2rem;
    border-radius: 24px;
    background: var(--shell-panel-background-soft);
    border: 1px solid var(--shell-border);
    box-shadow: var(--shell-shadow);
    text-align: center;
}

.report-list-state--empty[b-79gqwy3g3y] {
    gap: 0.35rem;
}

.report-list-state--empty h2[b-79gqwy3g3y],
.report-list-state--empty p[b-79gqwy3g3y] {
    margin: 0;
}

.report-list-state--empty p[b-79gqwy3g3y] {
    color: var(--shell-text-secondary);
}

.report-list-content[b-79gqwy3g3y] {
    display: grid;
    gap: 1rem;
    padding: 1.2rem;
    border-radius: 24px;
    background: var(--shell-panel-background-soft);
    border: 1px solid var(--shell-border);
    box-shadow: var(--shell-shadow);
}

.report-list-search[b-79gqwy3g3y] {
    max-width: 400px;
}

/* THE SEARCH BOX STAYS PUT; ONLY THE TREE SCROLLS (user call 2026-09-20).
   The card fills its pane, the search row keeps its height, and the tree takes
   the rest with a scrollbar of its own - so the box is still under the hand
   however far down a long report list has been scrolled. */
.report-list-content[b-79gqwy3g3y] {
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    grid-template-rows: auto minmax(0, 1fr);
}

.report-tree-wrap[b-79gqwy3g3y] {
    min-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

@media (max-width: 900px) {
    /* Stacked layout: the page itself scrolls, so the box sticks instead. */
    .report-list-content[b-79gqwy3g3y] { height: auto; grid-template-rows: none; }
    .report-tree-wrap[b-79gqwy3g3y] { overflow: visible; }
    .report-list-search[b-79gqwy3g3y] {
        position: sticky;
        top: 0;
        z-index: 2;
        max-width: none;
        padding-block: 0.35rem;
        background: var(--shell-panel-background, var(--shell-surface, #fff));
    }
}

[b-79gqwy3g3y] .report-tree.e-treeview {
    background: transparent;
}

[b-79gqwy3g3y] .report-tree .e-list-item {
    color: var(--shell-text-primary);
}

[b-79gqwy3g3y] .report-tree .e-list-item.e-active {
    background: color-mix(in srgb, var(--shell-button-primary) 12%, transparent);
    color: var(--shell-button-primary);
    border-radius: 8px;
}

[b-79gqwy3g3y] .report-tree .e-list-item:hover {
    background: color-mix(in srgb, var(--shell-button-primary) 6%, transparent);
    border-radius: 8px;
}

[b-79gqwy3g3y] .report-tree .e-text-content {
    padding: 0.35rem 0.5rem;
}

[b-79gqwy3g3y] .report-tree .e-icons {
    color: var(--shell-text-secondary);
}

/* ── Tree lines ── */
[b-79gqwy3g3y] .report-tree.e-treeview.e-linedtree .e-ul {
    border-color: var(--shell-border);
}

[b-79gqwy3g3y] .report-tree.e-treeview.e-linedtree .e-list-item::before {
    border-color: var(--shell-border);
}

.report-loading-overlay[b-79gqwy3g3y] {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.35);
    z-index: 9999;
    text-align: center;
    color: #ffffff;
}

.report-loading-overlay p[b-79gqwy3g3y] {
    margin-top: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

/* ── Buttons ── */

[b-79gqwy3g3y] .report-list-shell__header .secondary-action.e-btn {
    min-height: 40px;
    border-radius: 999px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

[b-79gqwy3g3y] .report-list-shell__header .secondary-action.e-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

/* ── Responsive ── */



@media (max-width: 820px) {
    .report-list-shell__header[b-79gqwy3g3y] {
        flex-direction: column;
    }

    .report-list-shell__toolbar[b-79gqwy3g3y] {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .report-list-shell__header[b-79gqwy3g3y],
    .report-list-content[b-79gqwy3g3y] {
        padding: 1rem;
        border-radius: 20px;
    }
}
/* /Pages/Reports/ReportViewerPage.razor.rz.scp.css */
/* The one viewer every standard report runs in. The table is a DOCUMENT -
   it prints through printElementById - so it is plain HTML, not a grid
   component; the row KINDS carry the visual structure. */

.rpt-body[b-7gwol9xjul] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    /* Without this the table's max-content width propagates up the flex
       chain and the PAGE grows sideways instead of the report scrolling. */
    min-width: 0;
    max-width: 100%;
}

.rpt-main[b-7gwol9xjul] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* THE bug that buried the horizontal scrollbar: .rpt-main is a DIV, so
       it misses app.css's .master-body > section scroll rules - it grew
       TALLER than the clipped .master-body and the scroll container's
       bottom edge (horizontal bar included) fell below the clip line,
       invisible and unreachable. Cap it and let the RESULT panel flex. */
    max-height: 100%;
    min-height: 0;
    /* Vertical auto (not hidden): when a floor-height panel - the analysis
       grid's 340px - exceeds a short viewport, the pane scrolls instead of
       cutting the panel off. Horizontal stays hidden: the buried-scrollbar
       fix above depends on the PANEL owning sideways scrolling. */
    overflow-y: auto;
    overflow-x: hidden;
}

.rpt-panel[b-7gwol9xjul] {
    background: var(--shell-panel-background, #fff);
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    /* The scroll container inside must be the thing that scrolls - the
       panel itself never grows past its column. */
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.rpt-toolbar[b-7gwol9xjul] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ── The filter panel: LEFT, dockable, one control under another - the
   REPORT convention. Docked, it collapses to a slim rail whose button
   brings it back; the choice is remembered per report. ───────────────── */
.rpt-filters[b-7gwol9xjul] {
    flex: 0 0 280px;
    background: var(--shell-panel-background, #fff);
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    align-self: flex-start;
    max-height: 80vh;
    overflow-y: auto;
}

.rpt-filters--docked[b-7gwol9xjul] {
    flex: 0 0 44px;
    padding: 0.5rem 0.25rem;
    overflow: hidden;
}

.rpt-filters__dock[b-7gwol9xjul] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.rpt-filters__dock-label[b-7gwol9xjul] {
    writing-mode: vertical-rl;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* Small screens: .rpt-body flips to a column (app.css does the flip via
   the shared :has(> .ct-page__help) rule) - the filter panel then spans
   the width, and its docked state becomes a slim horizontal bar. */
@media (max-width: 900px) {
    /* Stacked, the BODY is the vertical scroller - panels take natural
       heights instead of fighting over one clipped viewport (the result
       panel was left a sliver under a full-height filter panel). The
       table keeps its own bounded scroll so its head and totals stay
       reachable without a mile-long page. */
    /* app.css flips the body to a scrolling column; the main pane and the
       result panel then take natural heights instead of shrinking away. */
    .rpt-main[b-7gwol9xjul] { flex: 0 0 auto; max-height: none; overflow: visible; }
    /* Stacked, the analysis grid and the chart need a REAL height - their
       100% children collapse against an auto-height parent. */
    /* Never shorter than a chart can be read at: on a short window 65vh came to
       under 300px, and slanted party names took nearly all of it (2026-09-20).
       The page scrolls instead. */
    .rpt-gridwrap[b-7gwol9xjul], .rpt-chartwrap[b-7gwol9xjul], .rpt-pivotwrap[b-7gwol9xjul] { flex: 0 0 auto; height: max(65vh, 460px); }
    .rpt-panel--result[b-7gwol9xjul] { flex: 0 0 auto; }
    .rpt-scroll[b-7gwol9xjul] { max-height: 65vh; }
    .rpt-filters[b-7gwol9xjul] {
        flex: 0 0 auto;
        align-self: stretch;
        max-height: 45vh;
    }
    .rpt-filters--docked[b-7gwol9xjul] {
        padding: 0.4rem 0.9rem;
    }
    .rpt-filters__dock[b-7gwol9xjul] {
        flex-direction: row;
        justify-content: space-between;
    }
    .rpt-filters__dock-label[b-7gwol9xjul] {
        writing-mode: horizontal-tb;
    }
}

.rpt-filters__head[b-7gwol9xjul] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.rpt-filters__head .prod-master__subhead[b-7gwol9xjul] { margin: 0; }

/* One control under another - a filter panel reads top to bottom. */
.rpt-filters__list[b-7gwol9xjul] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.rpt-field[b-7gwol9xjul] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* An option waiting on its master switch (EnabledWhen) - the control is
   disabled by the component; the label and hint dim with it so the whole
   field reads as dormant, not broken. */
.rpt-field--disabled > label[b-7gwol9xjul],
.rpt-field--disabled .app-field-hint[b-7gwol9xjul] {
    opacity: 0.55;
}

/* ── The preset strip: combo + save + delete on one line ─────────────── */
.rpt-presets__row[b-7gwol9xjul] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.rpt-presets__row > :first-child[b-7gwol9xjul] { flex: 1 1 auto; min-width: 0; }
.rpt-presets__btn[b-7gwol9xjul] { flex: 0 0 auto; }

/* ── The column chooser popover, anchored to its button ──────────────── */
.rpt-colchooser[b-7gwol9xjul] { position: relative; }
.rpt-colchooser__pop[b-7gwol9xjul] {
    position: absolute;
    top: calc(100% + 0.3rem);
    right: 0;
    z-index: 30;
    min-width: 240px;
    max-height: 340px;
    overflow-y: auto;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--shell-border, #ccc);
    border-radius: 6px;
    background: var(--shell-surface, #fff);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.rpt-colchooser__item[b-7gwol9xjul] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.15rem 0;
    cursor: pointer;
    white-space: nowrap;
}
.rpt-colchooser__foot[b-7gwol9xjul] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

/* ── The drag-to-reorder list under an IsOrdered MultiSelect ─────────── */
.rpt-order[b-7gwol9xjul] {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.rpt-order__item[b-7gwol9xjul] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 6px;
    background: var(--shell-panel-background, #fff);
    cursor: grab;
    font-size: 0.8rem;
}

.rpt-order__item--dragging[b-7gwol9xjul] {
    opacity: 0.45;
}

/* Where the drop will land. */
.rpt-order__item--over[b-7gwol9xjul] {
    border-color: var(--shell-button-primary, #0f766e);
    box-shadow: inset 0 2px 0 var(--shell-button-primary, #0f766e);
}

.rpt-order__grip[b-7gwol9xjul] {
    color: var(--shell-text-secondary, #5b6a7d);
    cursor: grab;
}

.rpt-order__num[b-7gwol9xjul] {
    min-width: 1.1rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--shell-text-secondary, #5b6a7d);
}

.rpt-order__name[b-7gwol9xjul] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rpt-order__btn[b-7gwol9xjul] {
    border: 1px solid var(--shell-border, #d8dee7);
    background: transparent;
    color: var(--shell-text-primary);
    border-radius: 4px;
    line-height: 1;
    padding: 0.1rem 0.25rem;
    cursor: pointer;
}

.rpt-order__btn:disabled[b-7gwol9xjul] {
    opacity: 0.35;
    cursor: default;
}

.rpt-order__hint[b-7gwol9xjul] {
    margin-top: 0.2rem;
}

.rpt-field > label[b-7gwol9xjul] {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.rpt-switch[b-7gwol9xjul] { margin-top: 0; }

.rpt-filters__run[b-7gwol9xjul] {
    margin-top: 0.4rem;
    align-self: stretch;
}

/* ── The report itself ─────────────────────────────────────────────────── */
.rpt-placeholder[b-7gwol9xjul] {
    color: var(--shell-text-secondary, #5b6a7d);
    margin: 0.5rem 0;
}

/* The RESULT panel flexes to the remaining height and the scroll area
   fills it exactly - so the horizontal bar sits at the VISIBLE bottom of
   the report, never past a clip line, whatever the row count. */
.rpt-panel--result[b-7gwol9xjul] {
    flex: 1 1 auto;
    min-height: 160px;
    display: flex;
    flex-direction: column;
}

.rpt-scroll[b-7gwol9xjul] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: scroll;
    max-width: 100%;
}

/* The document view sits inside a wrapper so the ANALYSIS GRID mode can
   hide it while it stays mounted as the PRINT SOURCE - printElementById
   clones the scroll element's outerHTML, so the hidden class must live on
   this wrapper, never on the printed element itself. */
.rpt-docwrap[b-7gwol9xjul] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.rpt-docwrap--hidden[b-7gwol9xjul] {
    display: none;
}

/* The analysis grid fills the result panel the same way the scroll does.
   The 340px floor keeps it WORKABLE on a short viewport - the drop area,
   header, filter row and Sum footer eat ~140px before the first data row;
   below the floor the main pane scrolls (its overflow-y) instead of
   crushing the rows to a sliver. */
.rpt-gridwrap[b-7gwol9xjul] {
    flex: 1 1 auto;
    min-height: 340px;
    max-width: 100%;
    overflow: hidden;
}

.rpt-gridwrap[b-7gwol9xjul]  .e-grid {
    height: 100%;
}

.rpt-viewtoggle[b-7gwol9xjul] {
    white-space: nowrap;
}

.rpt-viewswitch[b-7gwol9xjul] {
    display: inline-flex;
    gap: 0.3rem;
}

.rpt-agg[b-7gwol9xjul] {
    font-weight: 700;
}

/* ── The graphical view ─────────────────────────────────────────────── */
.rpt-chartbar[b-7gwol9xjul] {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
    padding: 0.4rem 0;
}

.rpt-chartpick[b-7gwol9xjul] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.rpt-chartpick > label[b-7gwol9xjul] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* !important and flex:0 0 auto both matter: Syncfusion's own wrapper rule
   ties on specificity and loads later, and a flex item with only a width
   still SHRINKS - which collapsed the Figure picker to a 16px pill showing
   nothing but its clear (x). */
.rpt-chartpick[b-7gwol9xjul]  .rpt-chartcombo {
    width: 190px !important;
    flex: 0 0 auto;
}

/* Several ticked figures need room for their chips. */
.rpt-chartpick[b-7gwol9xjul]  .rpt-chartmulti {
    width: 300px !important;
    min-width: 300px;
    flex: 0 0 auto;
}

.rpt-chartnote[b-7gwol9xjul] {
    margin: 0 0 0.4rem;
}

/* The gadget strip - the figure column read five ways. */
.rpt-stats[b-7gwol9xjul] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding-bottom: 0.4rem;
}

.rpt-statcard[b-7gwol9xjul] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 8px;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    min-width: 110px;
}

.rpt-statcard > span[b-7gwol9xjul] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--shell-text-secondary, #5b6a7d);
}

.rpt-statcard > strong[b-7gwol9xjul] {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* A per-FIGURE card when several are compared: the figure's name on top,
   its total, and its average underneath. */
.rpt-statcard--series[b-7gwol9xjul] {
    min-width: 150px;
}

.rpt-statcard--series > span[b-7gwol9xjul] {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color: var(--shell-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rpt-statcard--series > em[b-7gwol9xjul] {
    font-style: normal;
    font-size: 0.72rem;
    text-align: right;
    color: var(--shell-text-secondary, #5b6a7d);
    font-variant-numeric: tabular-nums;
}

.rpt-chartwrap[b-7gwol9xjul] {
    flex: 1 1 auto;
    min-height: 460px;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* The chart draws its OWN scrollbar (ChartZoomSettings) when the categories
   outrun the window - it must not be clipped by the wrapper. */
.rpt-chartwrap[b-7gwol9xjul]  .e-chart {
    height: 100%;
}

/* A scrollbar one can actually SEE - the first cut was pale-on-pale. */
.rpt-scroll[b-7gwol9xjul]::-webkit-scrollbar { height: 14px; width: 12px; }
.rpt-scroll[b-7gwol9xjul]::-webkit-scrollbar-thumb {
    background: var(--shell-text-secondary, #5b6a7d);
    border-radius: 7px;
    border: 3px solid var(--shell-panel-background, #fff);
}
.rpt-scroll[b-7gwol9xjul]::-webkit-scrollbar-track {
    background: var(--shell-panel-background-soft, #e8edf4);
    border-top: 1px solid var(--shell-border, #d8dee7);
}
/* Firefox names its own knobs. */
.rpt-scroll[b-7gwol9xjul] { scrollbar-width: auto; scrollbar-color: var(--shell-text-secondary, #5b6a7d) var(--shell-panel-background-soft, #e8edf4); }

/* The fixed strip between the title row and the scrolling rows. */
.rpt-headlines[b-7gwol9xjul] {
    flex: 0 0 auto;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--shell-border, #d8dee7);
    margin-bottom: 0.25rem;
}

.rpt-headline[b-7gwol9xjul] {
    margin: 0 0 0.15rem;
    font-size: 0.82rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.rpt-table[b-7gwol9xjul] {
    /* max-content lets the table GROW past the pane - that growth is what
       makes the horizontal scrollbar exist; min-width keeps it filling the
       pane when it is narrower. */
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.rpt-table th[b-7gwol9xjul] {
    position: sticky;
    top: 0;
    background: var(--shell-panel-background-soft, #f6f8fb);
    border-bottom: 2px solid var(--shell-border, #d8dee7);
    padding: 0.4rem 0.55rem;
    text-align: left;
    white-space: nowrap;
    z-index: 1;
    /* Native column resize: drag the grip at a header's bottom-right
       corner. resize needs overflow to bite. */
    resize: horizontal;
    overflow: hidden;
}

.rpt-table td[b-7gwol9xjul] {
    border-bottom: 1px solid var(--shell-border, #eceff4);
    padding: 0.3rem 0.55rem;
    vertical-align: top;
    /* One line per cell; a runaway narration ellipsizes at arm's length
       instead of stretching the row to a paragraph. */
    white-space: nowrap;
    max-width: 480px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rpt-num[b-7gwol9xjul] { text-align: right; font-variant-numeric: tabular-nums; }

/* The columns the eye scans a register by - dates, voucher numbers, money. */
.rpt-bold[b-7gwol9xjul] { font-weight: 700; }

/* Row kinds: a voucher's first line separates the group; day subtotals and
   the grand total stand out; a break is just air. */
.rpt-row--head td[b-7gwol9xjul] { border-top: 2px solid var(--shell-border, #d8dee7); }
.rpt-row--subtotal td[b-7gwol9xjul] {
    background: var(--shell-panel-background-soft, #f6f8fb);
    font-weight: 600;
}
.rpt-row--grand td[b-7gwol9xjul] {
    background: var(--shell-panel-background-soft, #eef2f8);
    font-weight: 700;
    border-top: 2px solid var(--shell-border, #b9c2d0);
}

/* The accountant's rules under the figures: a group balance carries a single
   line beneath its amounts, a grand total a double one - the way the desktop
   and every hand-ruled book drew them (user call 2026-09-07). On the amounts
   only; the caption cell stays clean. */
.rpt-row--subtotal td.rpt-num[b-7gwol9xjul] { border-bottom: 1px solid var(--shell-text-muted, #5a6675); }
.rpt-row--grand td.rpt-num[b-7gwol9xjul] { border-bottom: 3px double var(--shell-text, #1b2a41); }
/* A detail row FLAGGED as a group balance (the legacy TB's sub-group net
   lines) takes the same single rule without becoming a subtotal. */
.rpt-row--ruled td.rpt-num[b-7gwol9xjul] { border-bottom: 1px solid var(--shell-text-muted, #5a6675); }

/* A dedicated group-total COLUMN (the legacy balance sheet's 'Grp. Tot')
   rules each value it actually holds; its blanks stay clean. */
td.rpt-cell--ruledval[b-7gwol9xjul] { border-bottom: 1px solid var(--shell-text-muted, #5a6675); font-weight: 600; }
.rpt-row--break td[b-7gwol9xjul] { border-bottom: none; height: 0.6rem; padding: 0; }

/* Batch and serial sub-rows: the same line said in more detail, so they read
   as a continuation of the row above rather than as rows in their own right -
   quieter, smaller, and the hairline between them dropped so a run of ten
   serial numbers looks like one block hanging off its parent. */
.rpt-row--sub td[b-7gwol9xjul] {
    font-size: 0.82em;
    color: var(--shell-text-muted, #5a6675);
    border-bottom-color: transparent;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}
.rpt-row--sub + .rpt-row:not(.rpt-row--sub) td[b-7gwol9xjul] { border-top: 1px solid var(--shell-border, #d8dee7); }

/* STRONG SEPARATION for the breakout block (user call 2026-09-10).
   A run of sub-rows is a different KIND of statement from the ledger it hangs
   off - "what this movement was made of", not "what happened next" - and a run
   of ten that shares the ledger's ground reads as ten more movements. So the
   run gets its own ground, a rule above it, and an accent bar down its left
   edge that starts where the indent starts. The rule BELOW it already existed;
   this is the other three sides of the same box. */
tr.rpt-row--sub td[b-7gwol9xjul] { background: var(--shell-item-background-subtle, #f4f6f9); }
.rpt-row:not(.rpt-row--sub) + .rpt-row--sub td[b-7gwol9xjul] { border-top: 1px solid var(--shell-border, #d8dee7); }
/* The bar sits on the SECOND cell: the first is the drill-icon gutter, and a
   bar in the gutter would line up with nothing. */
tr.rpt-row--sub td:nth-child(2)[b-7gwol9xjul] { box-shadow: inset 3px 0 0 0 var(--shell-button-primary, #0f6f74); }
/* The indent that says "this belongs to the line above". Text cells only -
   a figure indented away from its column would stop lining up. */
.rpt-row--sub td:not(.rpt-num):not(.rpt-drillcol)[b-7gwol9xjul] { padding-left: 1.9rem; }
/* A serial list is the one cell in the system meant to be READ IN FULL - it is
   the answer to "which ones", and half an answer ellipsized at the column edge
   is no answer. So sub-rows opt out of the one-line rule and wrap, breaking
   after the comma between numbers rather than inside one. */
.rpt-row--sub td[b-7gwol9xjul] {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.45;
}

/* A row whose subject is WRONG - stock past its expiry date. The app-wide
   error colour, which is theme-aware, so it stays legible on the dark ground
   instead of turning into unreadable dark red on dark grey.
   
   AFTER the row-kind rules and one step more specific than them on purpose:
   an alert is ORTHOGONAL to whether a row is a detail, a subtotal or a
   sub-row, so it has to beat whatever colour that kind chose. Sitting above
   them with equal specificity, it lost to `.rpt-row--sub td` and the expired
   lots came out the same grey as everything else.
   
   Colour is not the only signal - the row also says "EXPIRED" in words -
   because a colour alone is no use to a colour-blind reader or on a
   monochrome printout. */
tr.rpt-row--alert td[b-7gwol9xjul],
tr.rpt-row--alert td.rpt-num[b-7gwol9xjul] { color: var(--shell-status-error-text, #b71c1c); }

.rpt-row:hover td[b-7gwol9xjul] { background: var(--shell-item-hover-background, rgba(13, 110, 253, 0.05)); }

/* ── Drill ─────────────────────────────────────────────────────────────── */
/* First column: the row's handle sits where reading starts, and it stays
   put while the table scrolls sideways. */
.rpt-drillcol[b-7gwol9xjul] {
    width: 34px;
    min-width: 34px;
    text-align: center;
    position: sticky;
    left: 0;
    background: var(--shell-panel-background, #fff);
    z-index: 1;
}

.rpt-table th.rpt-drillcol[b-7gwol9xjul] { z-index: 2; }

.rpt-drill[b-7gwol9xjul] {
    border: 1px solid var(--shell-border, #d8dee7);
    background: var(--shell-panel-background, #fff);
    color: var(--shell-button-primary, #0d6efd);
    border-radius: 6px;
    cursor: pointer;
    padding: 0 0.35rem;
    line-height: 1.4;
}

/* ── The inline cleared-date editor (reconciliation rows) ─────────────── */
.rpt-inline-edit[b-7gwol9xjul] {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 4px;
    padding: 0.15rem 0.35rem;
    font: inherit;
    font-size: 0.82rem;
    background: var(--shell-panel-background, #fff);
    color: inherit;
    box-sizing: border-box;
}

/* An edit not yet saved says so - the same amber every pending state uses. */
.rpt-inline-edit--dirty[b-7gwol9xjul] {
    border-color: var(--shell-warning, #b7791f);
    background: color-mix(in srgb, var(--shell-warning, #b7791f) 10%, var(--shell-panel-background, #fff));
}

/* Quantities key right-aligned, like every figure on the page. */
.rpt-inline-edit--qty[b-7gwol9xjul] {
    text-align: right;
}

/* The count sheet's live variance - a computed figure, not an input. */
.rpt-live-variance[b-7gwol9xjul] {
    font-weight: 600;
    color: var(--shell-warning, #b7791f);
}

.rpt-savebar[b-7gwol9xjul] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.75rem;
    margin: 0 0 0.4rem;
    border: 1px solid var(--shell-warning, #b7791f);
    border-radius: 8px;
    background: color-mix(in srgb, var(--shell-warning, #b7791f) 8%, var(--shell-panel-background, #fff));
    font-size: 0.85rem;
}

/* On paper the inputs become plain text - a printed statement carries no
   editors. */
@media print {
    .rpt-savebar[b-7gwol9xjul] { display: none; }

    .rpt-inline-edit[b-7gwol9xjul] {
        border: none;
        background: none;
        padding: 0;
    }
}

/* The drill affordances are screen furniture, not report content. */
@media print {
    .rpt-drillcol[b-7gwol9xjul], .rpt-drill[b-7gwol9xjul] { display: none; }
}

/* ── E-mail dialog ─────────────────────────────────────────────────────── */
.rpt-emailform label[b-7gwol9xjul] {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    margin: 0.5rem 0 0.2rem;
}

.rpt-emailform__actions[b-7gwol9xjul] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

/* ── Search within the result ──────────────────────────────────────────── */
.rpt-resulthead[b-7gwol9xjul] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.rpt-resulthead .prod-master__subhead[b-7gwol9xjul] { margin: 0; }

/* The head tools ride at the RIGHT edge in EVERY view - the view switch
   must not shift sideways when the find box (document view only) comes
   and goes, so the auto margin lives on the CLUSTER, not on the box. */
.rpt-headtools[b-7gwol9xjul] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

.rpt-searchwrap[b-7gwol9xjul] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.rpt-search[b-7gwol9xjul] { width: 260px; }

.rpt-searchcount[b-7gwol9xjul] {
    font-size: 0.78rem;
    color: var(--shell-text-secondary, #5b6a7d);
    white-space: nowrap;
}

/* The selected row - click one, walk with the arrows, Enter drills. */
.rpt-row--selected td[b-7gwol9xjul] {
    background: var(--shell-pill-bg, #e7f0ff) !important;
    box-shadow: inset 0 0 0 1px var(--shell-button-primary, #0d6efd);
}

/* The table region shows it holds the keyboard. */
.rpt-scroll:focus[b-7gwol9xjul] {
    outline: 2px solid var(--shell-button-primary, #0d6efd);
    outline-offset: -2px;
}

/* ── Loading ───────────────────────────────────────────────────────────── */
/* First run: a centred block holds the stage. The spinner itself is the
   global master-busy one, just larger here. */
.rpt-loading[b-7gwol9xjul] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    min-height: 160px;
    color: var(--shell-text-secondary, #5b6a7d);
    font-size: 0.9rem;
    font-weight: 600;
}

.rpt-loading__spinner[b-7gwol9xjul] {
    width: 2rem;
    height: 2rem;
    border-width: 3px;
}

/* Re-run: the stale rows dim under the busy chip instead of vanishing. */
.rpt-scroll--busy[b-7gwol9xjul] {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.15s ease-in;
}

/* ── Find - marks and jumps, never filters ─────────────────────────────── */
/* Every matching row glows faintly; the CURRENT match stands out and the
   pane scrolls to it. Alpha tints hold up on light and dark grounds. */
.rpt-row--find td[b-7gwol9xjul] { background: rgba(255, 200, 60, 0.14); }
.rpt-row--find-current td[b-7gwol9xjul] {
    background: rgba(255, 190, 40, 0.32) !important;
    box-shadow: inset 0 0 0 1px rgba(200, 140, 0, 0.55);
}

/* The found text itself. */
.rpt-table mark[b-7gwol9xjul] {
    background: rgba(255, 200, 40, 0.65);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

.rpt-findnav[b-7gwol9xjul] {
    padding: 0.1rem 0.45rem !important;
    font-size: 0.7rem !important;
    line-height: 1.4 !important;
}

/* A figure with vouchers behind it - looks like the number it is, but
   answers the pointer. Underlined on hover rather than styled as a button,
   so a matrix of them still reads as a table of figures and not as a wall
   of controls; print sees plain text because the button keeps no chrome. */
.rpt-cellDrill[b-7gwol9xjul] {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
    width: 100%;
}

/* An openable figure SAYS so at rest - a dotted underline the reader can
   discover without hovering (user-caught 2026-09-08: the T-form's drills
   were invisible). Hover and focus firm the line up. */
.rpt-cellDrill[b-7gwol9xjul] {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    text-decoration-color: var(--shell-text-muted, #8a94a5);
}
.rpt-cellDrill:hover[b-7gwol9xjul],
.rpt-cellDrill:focus-visible[b-7gwol9xjul] {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: currentColor;
}
/* The per-side drill marker on a T-form's NAME cells - each side of the
   pair announces its own opener. */
.rpt-drillglyph[b-7gwol9xjul] { opacity: 0.55; margin-right: 0.3rem; font-size: 0.85em; }

/* The keyboard's cell cursor. An inset outline rather than a background so
   the figure stays legible and the mark survives both themes; the drill
   underline joins in so an openable cell says so while it is the cursor. */
.rpt-cell--active[b-7gwol9xjul] {
    outline: 2px solid var(--shell-button-primary);
    outline-offset: -2px;
    border-radius: 2px;
}

.rpt-cell--active .rpt-cellDrill[b-7gwol9xjul] {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── The pivot view ─────────────────────────────────────────────────── */
/* Fills the result panel like the chart and the analysis grid; the same
   340px floor keeps the grouping bar, headers and a few rows workable. */
.rpt-pivotwrap[b-7gwol9xjul] {
    flex: 1 1 auto;
    min-height: 340px;
    max-width: 100%;
    overflow: hidden;
}

.rpt-pivotwrap[b-7gwol9xjul]  .e-pivotview {
    height: 100%;
}

/* A layout name reads longer than a chart type. */
.rpt-chartpick[b-7gwol9xjul]  .rpt-pivotcombo {
    width: 260px !important;
}

/* The chart's print source (figure cards + chart) - a box for Print to find,
   invisible to the flex layout the chart panel relies on. */
.rpt-chartprint[b-7gwol9xjul] {
    display: contents;
}

/* Chart text in the app's font - Syncfusion's own default fell back to a
   serif (axis labels, legend, data labels). A CSS font-family beats the SVG
   attribute; the export-only title carries its own FontFamily. */
.rpt-chartwrap[b-7gwol9xjul]  svg text {
    font-family: var(--shell-font-family, "Segoe UI", Helvetica, Arial, sans-serif) !important;
}

/* ── The document's window pager (large reports) ───────────────────────── */
.rpt-rowload[b-7gwol9xjul] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.82rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 6px;
    background: var(--shell-surface-alt, rgba(127, 127, 127, 0.08));
}

.rpt-rowload progress[b-7gwol9xjul] {
    flex: 1 1 8rem;
    min-width: 6rem;
    height: 0.5rem;
    accent-color: var(--shell-accent, #2f7d6b);
}

.rpt-rowload__spin[b-7gwol9xjul] {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    border: 2px solid var(--shell-border, #d8dee7);
    border-top-color: var(--shell-accent, #2f7d6b);
    animation: rpt-rowload-spin-b-7gwol9xjul 0.9s linear infinite;
}

@keyframes rpt-rowload-spin-b-7gwol9xjul { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { .rpt-rowload__spin[b-7gwol9xjul] { animation: none; } }

@media print { .rpt-rowload[b-7gwol9xjul] { display: none; } }

.rpt-docpager[b-7gwol9xjul] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    padding: 0.3rem 0.1rem 0.4rem;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--shell-border, #d8dee7);
    margin-bottom: 0.25rem;
}
.rpt-docpager .app-field-hint[b-7gwol9xjul] { flex: 1 1 320px; margin: 0; }

/* ── The document's total stays in sight (2026-09-20) ─────────────────────
   The foot of the table sticks to the bottom of the scrolling pane, so the
   report's total is readable wherever the rows are scrolled to and on every
   page of a large report. On paper it goes back to the end of the table -
   a sticky foot would otherwise repeat on every printed sheet. */
/* The FOOT as a whole sticks, not each cell: a foot of two rows (a ledger's
   Total over its Closing Balance) then stays stacked instead of both rows
   landing on the same bottom line. */
.rpt-table tfoot[b-7gwol9xjul] {
    position: sticky;
    bottom: 0;
    z-index: 1;
}
.rpt-table tfoot td[b-7gwol9xjul] {
    background: var(--shell-panel-background-soft, #eef2f8);
}
/* THE RULED LINES TRAVEL WITH THE FOOT (user 2026-09-20). The table collapses
   its borders, and a collapsed border belongs to the table's grid, not to the
   cell - so when the foot sticks to the bottom of the pane its borders stay
   behind where the rows "really" are: the totals showed WITHOUT their lines on
   every page but the last. Inside the sticky foot the same rules are therefore
   drawn as inset shadows, which are part of the cell and move with it:
     - the line above the foot,
     - the single rule under a total's figures,
     - the double rule under the closing / grand total's figures. */
@media screen { .rpt-table tfoot td[b-7gwol9xjul] { border-top-color: transparent; border-bottom-color: transparent; } }
.rpt-table tfoot tr:first-child td[b-7gwol9xjul] {
    box-shadow: inset 0 2px 0 var(--shell-border, #b9c2d0);
}
.rpt-table tfoot tr.rpt-row--subtotal td.rpt-num[b-7gwol9xjul],
.rpt-table tfoot tr.rpt-row--ruled td.rpt-num[b-7gwol9xjul] {
    box-shadow: inset 0 -1px 0 var(--shell-text-muted, #5a6675);
}
.rpt-table tfoot tr:first-child.rpt-row--subtotal td.rpt-num[b-7gwol9xjul],
.rpt-table tfoot tr:first-child.rpt-row--ruled td.rpt-num[b-7gwol9xjul] {
    box-shadow: inset 0 2px 0 var(--shell-border, #b9c2d0), inset 0 -1px 0 var(--shell-text-muted, #5a6675);
}
.rpt-table tfoot tr.rpt-row--grand td[b-7gwol9xjul] { padding-bottom: 0.45rem; }
.rpt-table tfoot tr.rpt-row--grand td.rpt-num[b-7gwol9xjul] {
    box-shadow: inset 0 -1px 0 var(--shell-text, #1b2a41),
                inset 0 -2px 0 var(--shell-panel-background-soft, #eef2f8),
                inset 0 -3px 0 var(--shell-text, #1b2a41);
}
.rpt-table tfoot tr:first-child.rpt-row--grand td[b-7gwol9xjul] { box-shadow: inset 0 2px 0 var(--shell-border, #b9c2d0); }
.rpt-table tfoot tr:first-child.rpt-row--grand td.rpt-num[b-7gwol9xjul] {
    box-shadow: inset 0 2px 0 var(--shell-border, #b9c2d0),
                inset 0 -1px 0 var(--shell-text, #1b2a41),
                inset 0 -2px 0 var(--shell-panel-background-soft, #eef2f8),
                inset 0 -3px 0 var(--shell-text, #1b2a41);
}
/* On paper the foot is an ordinary part of the table again - its real borders
   come back and the shadows go. */
@media print {
    .rpt-table tfoot[b-7gwol9xjul] { display: table-row-group; position: static; }
    .rpt-table tfoot td[b-7gwol9xjul] { box-shadow: none !important; }
}

/* The Analyse grid's Sum footer is part of the grid's fixed frame; keep it on
   screen above the pager whatever the page size. */
.rpt-gridwrap[b-7gwol9xjul]  .e-grid { display: flex; flex-direction: column; }
.rpt-gridwrap[b-7gwol9xjul]  .e-grid .e-gridcontent { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.rpt-gridwrap[b-7gwol9xjul]  .e-grid .e-gridcontent .e-content { height: 100% !important; }
.rpt-gridwrap[b-7gwol9xjul]  .e-grid .e-gridheader,
.rpt-gridwrap[b-7gwol9xjul]  .e-grid .e-gridfooter,
.rpt-gridwrap[b-7gwol9xjul]  .e-grid .e-gridpager,
.rpt-gridwrap[b-7gwol9xjul]  .e-grid .e-toolbar,
.rpt-gridwrap[b-7gwol9xjul]  .e-grid .e-groupdroparea { flex: 0 0 auto; }

.rpt-docpager__goto[b-7gwol9xjul] { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.rpt-docpager__goto input[b-7gwol9xjul] {
    width: 4.5rem; height: 1.7rem; padding: 0 0.35rem; text-align: right;
    border: 1px solid var(--shell-border, #c9d2de); border-radius: 6px;
    background: var(--shell-input-background, #fff); color: inherit; font-size: 0.82rem;
}
[b-7gwol9xjul] .rpt-pagebtn.e-btn { min-width: 2rem; padding: 0.15rem 0.4rem !important; }
[b-7gwol9xjul] .rpt-pagebtn.e-btn .e-btn-icon { font-size: 0.85rem; }

/* ── A built view, kept until the next Run (2026-09-20) ───────────────────
   The pane of the view on screen takes the result area as its children did
   before. A PARKED pane keeps its full size - so a grid, chart or pivot inside
   it never measures itself against a collapsed box - but is out of sight, out
   of the tab order and out of the layout flow. */
.rpt-viewpane[b-7gwol9xjul] {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.rpt-viewpane--parked[b-7gwol9xjul] {
    position: absolute;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
}
.rpt-panel--result[b-7gwol9xjul] { position: relative; }
@media print { .rpt-viewpane--parked[b-7gwol9xjul] { display: none; } }
/* /Pages/Reports/StockAvailabilityPage.razor.rz.scp.css */
/* Stock Availability — layout mechanics only; the shell and every cosmetic
   token come from app.css. */

.sav-page[b-uqr6fexmoz] { display: block; }

.sav-page__body[b-uqr6fexmoz] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.sav-page__main[b-uqr6fexmoz] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sav-toolbar__note[b-uqr6fexmoz] {
    margin-left: auto;
    color: var(--shell-muted-text, #767676);
    font-size: .85rem;
}

.sav-filters[b-uqr6fexmoz] { margin-bottom: .75rem; }

/* The grid takes what is left under the filters rather than a fixed height,
   so a long list uses the window it is given. */
.sav-grid[b-uqr6fexmoz] { flex: 1 1 auto; min-height: 320px; }

.sav-empty[b-uqr6fexmoz] {
    margin: 0 0 .75rem;
    padding: .6rem .8rem;
    border-radius: 6px;
    background: #f4f6f8;
    color: #444;
    line-height: 1.5;
}

/* Net Available is the answer the report exists to give — it carries the
   weight so the eye finds it among four numeric columns. */
.sav-grid[b-uqr6fexmoz]  .sav-net { font-weight: 700; }

/* Nothing left to promise. Amber, not red: red means cancelled everywhere
   else in this application and should keep meaning only that. */
.sav-grid[b-uqr6fexmoz]  .sav-row--short .e-rowcell:not(.e-active) {
    background-color: #fdf2e2;
    color: #a86200;
}

/* Footer and group-footer totals. Tabular figures so the four quantity
   columns line up digit for digit against the rows above them. */
.sav-grid[b-uqr6fexmoz]  .sav-total {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sav-grid[b-uqr6fexmoz]  .sav-total--qty { display: block; text-align: right; }

/* The total of the column the report exists for, carrying the same weight
   in the footer that .sav-net carries in the rows. */
.sav-grid[b-uqr6fexmoz]  .sav-total--net { font-weight: 700; }

.sav-unitnote[b-uqr6fexmoz] {
    flex: 0 0 auto;
    margin: .4rem 0 0;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--shell-muted-text, #767676);
}
/* /Pages/Settings/AiSettingsPage.razor.rz.scp.css */
/* Settings > AI Assistance. Scoped to this page. */

/* The plain statement of what this feature does with customers' words. It is
   deliberately not a subtle hint: it is the first thing on the page, and it
   sits above the switch that turns any of it on. */
.crmai__notice[b-8nthkkd8em] {
    width: 100%;
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.5rem;
    border: 1px solid var(--shell-border, #d0d4dc);
    background: var(--shell-surface-muted, #f4f6f9);
}

.crmai__notice h3[b-8nthkkd8em] {
    margin: 0 0 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.8;
}

.crmai__notice ul[b-8nthkkd8em] {
    margin: 0;
    padding-left: 1.1rem;
}

.crmai__notice li[b-8nthkkd8em] {
    margin: 0.2rem 0;
    font-size: 0.88rem;
}

.crmai__tasks[b-8nthkkd8em] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    margin-top: 0.5rem;
}

.crmai__task[b-8nthkkd8em] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
}

.crmai__task .app-field-hint[b-8nthkkd8em] {
    display: block;
    margin-top: 0.1rem;
}

.crmai-table[b-8nthkkd8em] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.crmai-table th[b-8nthkkd8em],
.crmai-table td[b-8nthkkd8em] {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--shell-border, #e2e5ea);
    text-align: left;
    vertical-align: top;
}

.crmai-table th[b-8nthkkd8em] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
    white-space: normal;
}

.crmai-num[b-8nthkkd8em] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
    .crmai-table[b-8nthkkd8em] { font-size: 0.8rem; }
    .crmai-table th[b-8nthkkd8em], .crmai-table td[b-8nthkkd8em] { padding: 0.25rem 0.35rem; }
}

/* Where this service is used. Quiet, at the foot: these are neighbours, and
   naming one of them loudly in the toolbar was what made this page look like
   a CRM screen. */
.crmai__related[b-8nthkkd8em] {
    width: 100%;
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    opacity: 0.8;
}

.crmai__related a[b-8nthkkd8em] {
    margin: 0 0.15rem;
    text-decoration: underline;
    text-underline-offset: 0.15rem;
}
/* /Pages/Settings/ApiProfilesPage.razor.rz.scp.css */
/* API Profiles - master-detail: definition fieldsets above, header grid below. */

.app2__body[b-enrhhe4qfy] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.app2__form[b-enrhhe4qfy] {
    flex: 1 1 auto;
    min-width: 0;
}

.app2__detail[b-enrhhe4qfy] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    min-width: 0;
}

.app2__group[b-enrhhe4qfy] {
    margin: 0;
    padding: 0.85rem 1rem 1rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.app2__group > legend[b-enrhhe4qfy] {
    padding: 0 0.4rem;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--shell-text-secondary, var(--shell-text-primary));
}

.app2__grid[b-enrhhe4qfy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.9rem 1rem;
}

.app2-field[b-enrhhe4qfy] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.app2-field--wide[b-enrhhe4qfy] { grid-column: span 2; }
.app2-field--full[b-enrhhe4qfy] { grid-column: 1 / -1; }

.app2__label[b-enrhhe4qfy] { font-size: 0.8rem; font-weight: 600; }

.app2__line[b-enrhhe4qfy] { display: flex; align-items: flex-end; gap: 0.5rem; min-width: 0; }
.app2__line > :first-child[b-enrhhe4qfy] { flex: 1 1 auto; min-width: 0; }

.app2__body-head[b-enrhhe4qfy],
.app2__grid-head[b-enrhhe4qfy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.app2__actions[b-enrhhe4qfy] { display: flex; gap: 0.5rem; flex-wrap: wrap; }

[b-enrhhe4qfy] .app2__mono input,
[b-enrhhe4qfy] .app2__mono textarea,
[b-enrhhe4qfy] .app2__body-text textarea {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.86rem;
}
[b-enrhhe4qfy] .app2__body-text textarea {
    min-height: 240px;
    max-height: 520px;
    resize: vertical;
    line-height: 1.45;
    white-space: pre;
    overflow: auto;
}

.app2__note[b-enrhhe4qfy] { margin: 0; font-size: 0.8rem; opacity: 0.85; }
.app2__ok[b-enrhhe4qfy] { color: var(--shell-success, #15803d); }
.app2__bad[b-enrhhe4qfy] { color: var(--shell-danger, #b91c1c); }

.app2-option[b-enrhhe4qfy] { display: flex; align-items: baseline; gap: 0.6rem; text-align: left; min-width: 0; }
.app2-option span[b-enrhhe4qfy] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app2-option small[b-enrhhe4qfy] { opacity: 0.7; white-space: nowrap; }

/* Header grid */
.app2__grid-host[b-enrhhe4qfy] { min-width: 0; overflow-x: auto; }
.app2__num[b-enrhhe4qfy] { font-variant-numeric: tabular-nums; opacity: 0.75; }
.app2__num--drag[b-enrhhe4qfy] {
    display: inline-block;
    min-width: 1.6rem;
    padding: 0.1rem 0.3rem;
    border: 1px dashed var(--shell-border);
    border-radius: 0.3rem;
    cursor: grab;
    opacity: 1;
}
.app2__num--drag:active[b-enrhhe4qfy] { cursor: grabbing; }
.app2__num--drag:hover[b-enrhhe4qfy] { border-color: var(--shell-accent, #2563eb); }
.app2__cell-line[b-enrhhe4qfy] { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.app2__cell-line > :first-child[b-enrhhe4qfy] { flex: 1 1 auto; min-width: 0; }
.app2__row-actions[b-enrhhe4qfy] { display: inline-flex; gap: 0.25rem; }
[b-enrhhe4qfy] .app2__icon.e-btn { padding: 0.2rem 0.4rem; min-width: 0; }

.app2__state[b-enrhhe4qfy] {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    white-space: normal;
}
.app2__state--bad[b-enrhhe4qfy] { color: var(--shell-danger, #b91c1c); }
.app2__state--new[b-enrhhe4qfy] { color: var(--shell-accent, #2563eb); }
.app2__state--mod[b-enrhhe4qfy] { color: var(--shell-warning, #b45309); }

[b-enrhhe4qfy] .app2__headers .e-row.app2-row--bad td {
    box-shadow: inset 0 -1px 0 var(--shell-danger, #b91c1c);
}
[b-enrhhe4qfy] .app2__headers .e-rowcell { vertical-align: middle; }

.app2__audit[b-enrhhe4qfy] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Preview */
.app2-preview[b-enrhhe4qfy] { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.app2-preview__req[b-enrhhe4qfy] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.45rem;
}
.app2-preview__line[b-enrhhe4qfy] { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; }
.app2-preview__line code[b-enrhhe4qfy] { overflow-wrap: anywhere; }
.app2-preview__method[b-enrhhe4qfy] {
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.45rem;
    border-radius: 0.3rem;
    border: 1px solid currentColor;
    color: var(--shell-accent, #2563eb);
}
.app2-preview__meta[b-enrhhe4qfy] { display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; font-size: 0.82rem; }
.app2-preview__h[b-enrhhe4qfy] {
    margin: 0.3rem 0 0;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.app2-preview__table[b-enrhhe4qfy] { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.app2-preview__table th[b-enrhhe4qfy],
.app2-preview__table td[b-enrhhe4qfy] {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--shell-border);
    text-align: left;
    vertical-align: top;
}
.app2-preview__table th[b-enrhhe4qfy] { width: 30%; font-weight: 600; white-space: nowrap; }
.app2-preview__table code[b-enrhhe4qfy] { overflow-wrap: anywhere; }
.app2-preview__body[b-enrhhe4qfy] {
    margin: 0;
    max-height: 360px;
    overflow: auto;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.45rem;
    background: var(--shell-panel-background-soft, rgba(0,0,0,.04));
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.82rem;
}

/* Help panel - fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-enrhhe4qfy] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-enrhhe4qfy] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-enrhhe4qfy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-enrhhe4qfy] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-enrhhe4qfy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-enrhhe4qfy] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-enrhhe4qfy] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-enrhhe4qfy] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-enrhhe4qfy] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-enrhhe4qfy] { padding-left: 0.15rem; }

[b-enrhhe4qfy] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .app2__body[b-enrhhe4qfy] { flex-wrap: wrap; }
    .ct-page__help[b-enrhhe4qfy],
    .ct-page__help--docked[b-enrhhe4qfy] { flex: 0 0 auto; width: 100%; overflow: visible; }
}

@media (max-width: 700px) {
    .app2-field--wide[b-enrhhe4qfy] { grid-column: 1 / -1; }
}
/* /Pages/Settings/ApiProvidersPage.razor.rz.scp.css */
/* API Providers - layout mirrors the Email Templates master. */

.app-prov__body[b-gp6gntyo9l] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.app-prov__form[b-gp6gntyo9l] {
    flex: 1 1 auto;
    min-width: 0;
}

.app-prov__detail[b-gp6gntyo9l] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.app-prov__group[b-gp6gntyo9l] {
    margin: 0;
    padding: 0.85rem 1rem 1rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    min-width: 0;
}
.app-prov__group > legend[b-gp6gntyo9l] {
    padding: 0 0.4rem;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--shell-text-secondary, var(--shell-text-primary));
}

.app-prov__grid[b-gp6gntyo9l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.9rem 1rem;
}

.app-field[b-gp6gntyo9l] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.app-field--wide[b-gp6gntyo9l] { grid-column: span 2; }
.app-field--full[b-gp6gntyo9l] { grid-column: 1 / -1; }
.app-prov__group > .app-field + .app-field[b-gp6gntyo9l] { margin-top: 0.9rem; }

.app-prov__note[b-gp6gntyo9l] {
    margin: 0 0 0.8rem;
    font-size: 0.84rem;
    opacity: 0.85;
}

[b-gp6gntyo9l] .app-prov__mono input,
[b-gp6gntyo9l] .app-prov__mono textarea {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.85rem;
}
[b-gp6gntyo9l] .app-prov__body-text textarea { min-height: 180px; }

/* A credential box with its Clear button and state chip. */
.app-secret[b-gp6gntyo9l] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}
.app-secret > :first-child[b-gp6gntyo9l] { flex: 1 1 auto; min-width: 0; }
.app-secret__state[b-gp6gntyo9l] {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--shell-border);
}
.app-secret__state--set[b-gp6gntyo9l] { color: var(--shell-success, #15803d); border-color: currentColor; }
.app-secret__state--none[b-gp6gntyo9l] { opacity: 0.7; }
.app-secret__state--new[b-gp6gntyo9l] { color: var(--shell-accent, #2563eb); border-color: currentColor; }
.app-secret__state--clear[b-gp6gntyo9l] { color: var(--shell-danger, #b91c1c); border-color: currentColor; }

.app-prov__used[b-gp6gntyo9l] {
    margin: 0;
    font-size: 0.86rem;
    opacity: 0.9;
}

/* Help panel - fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-gp6gntyo9l] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-gp6gntyo9l] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-gp6gntyo9l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-gp6gntyo9l] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-gp6gntyo9l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-gp6gntyo9l] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-gp6gntyo9l] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-gp6gntyo9l] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-gp6gntyo9l] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-gp6gntyo9l] { padding-left: 0.15rem; }

[b-gp6gntyo9l] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .app-prov__body[b-gp6gntyo9l] { flex-wrap: wrap; }
    .ct-page__help[b-gp6gntyo9l],
    .ct-page__help--docked[b-gp6gntyo9l] { flex: 0 0 auto; width: 100%; overflow: visible; }
}

@media (max-width: 700px) {
    .app-field--wide[b-gp6gntyo9l] { grid-column: 1 / -1; }
}
/* /Pages/Settings/EmailTemplatesPage.razor.rz.scp.css */
/* Email Templates - layout mirrors the other master shells. */

.etp__body[b-l3f60g6u1p] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.etp__form[b-l3f60g6u1p] {
    flex: 1 1 auto;
    min-width: 0;
}

.etp__detail[b-l3f60g6u1p] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.etp__group[b-l3f60g6u1p] {
    margin: 0;
    padding: 0.85rem 1rem 1rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    min-width: 0;
}
.etp__group > legend[b-l3f60g6u1p] {
    padding: 0 0.4rem;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--shell-text-secondary, var(--shell-text-primary));
}

.etp__grid[b-l3f60g6u1p] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.9rem 1rem;
}

.etp-field[b-l3f60g6u1p] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.etp-field--wide[b-l3f60g6u1p] { grid-column: span 2; }
.etp-field--full[b-l3f60g6u1p] { grid-column: 1 / -1; }
.etp__group > .etp-field + .etp-field[b-l3f60g6u1p] { margin-top: 0.9rem; }

.etp__line[b-l3f60g6u1p] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}
.etp__line > :first-child[b-l3f60g6u1p] { flex: 1 1 auto; min-width: 0; }

.etp__body-head[b-l3f60g6u1p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.etp__label[b-l3f60g6u1p] { font-size: 0.8rem; font-weight: 600; }
.etp__body-actions[b-l3f60g6u1p] { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.etp__editor[b-l3f60g6u1p] { min-width: 0; }

.etp-option[b-l3f60g6u1p] {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.6rem;
    min-width: 0;
    text-align: left;
}
.etp-option span[b-l3f60g6u1p] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etp-option small[b-l3f60g6u1p] { opacity: 0.7; white-space: nowrap; }

.etp__files[b-l3f60g6u1p] { display: flex; flex-direction: column; gap: 0.5rem; overflow-x: auto; }
.etp__empty[b-l3f60g6u1p] { margin: 0; font-size: 0.86rem; opacity: 0.8; }
.etp__file-table[b-l3f60g6u1p] { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.etp__file-table th[b-l3f60g6u1p] {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid var(--shell-border);
}
.etp__file-table td[b-l3f60g6u1p] { padding: 0.3rem 0.4rem; vertical-align: middle; border-bottom: 1px solid var(--shell-border); }
.etp__file-table td:first-child[b-l3f60g6u1p] { min-width: 220px; }
.etp__file-name[b-l3f60g6u1p] { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etp__num[b-l3f60g6u1p] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.etp__file-actions[b-l3f60g6u1p] { white-space: nowrap; text-align: right; }
.etp__file-actions[b-l3f60g6u1p]  .e-btn + .e-btn { margin-left: 0.35rem; }

.etp__add-file[b-l3f60g6u1p] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.8rem;
    border: 1px dashed var(--shell-border);
    border-radius: 0.4rem;
    cursor: pointer;
    font-size: 0.86rem;
}
.etp__add-file:focus-within[b-l3f60g6u1p] { outline: 2px solid var(--shell-accent, #3b82f6); outline-offset: 2px; }
.etp__add-file[b-l3f60g6u1p]  input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.etp__audit[b-l3f60g6u1p] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    font-size: 0.82rem;
    opacity: 0.85;
}

/* Help panel - fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-l3f60g6u1p] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-l3f60g6u1p] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-l3f60g6u1p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-l3f60g6u1p] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-l3f60g6u1p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-l3f60g6u1p] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-l3f60g6u1p] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-l3f60g6u1p] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-l3f60g6u1p] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-l3f60g6u1p] { padding-left: 0.15rem; }

[b-l3f60g6u1p] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .etp__body[b-l3f60g6u1p] { flex-wrap: wrap; }
    .ct-page__help[b-l3f60g6u1p],
    .ct-page__help--docked[b-l3f60g6u1p] { flex: 0 0 auto; width: 100%; overflow: visible; }
}

@media (max-width: 700px) {
    .etp-field--wide[b-l3f60g6u1p] { grid-column: 1 / -1; }
    .etp__line[b-l3f60g6u1p] { flex-wrap: wrap; }
}
/* /Pages/Settings/GeneralSettingsPage.razor.rz.scp.css */
/* General Settings - the one tblSettings row, cards of switches. */

.gset-body[b-qhqakqzvkv] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-width: 0;
}

.gset-main[b-qhqakqzvkv] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* The pane scrolls, not the page (a plain div misses app.css's
       .master-body > section rules - the report viewer's lesson). */
    max-height: 100%;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.gset-toolbar[b-qhqakqzvkv] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}


.gset-card[b-qhqakqzvkv] {
    background: var(--shell-panel-background, #fff);
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 10px;
    padding: 0.9rem 1rem;
}

.gset-card h3[b-qhqakqzvkv] {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
}

.gset-cardnote[b-qhqakqzvkv] {
    margin: -0.35rem 0 0.6rem;
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* Two columns of fields; a wide field (paths, connection strings) spans. */
.gset-grid[b-qhqakqzvkv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0.8rem 1.4rem;
}

.gset-field[b-qhqakqzvkv] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.gset-field--wide[b-qhqakqzvkv] { grid-column: 1 / -1; }

.gset-field > label[b-qhqakqzvkv] {
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.gset-denied[b-qhqakqzvkv] {
    margin: 0.4rem 0;
    color: var(--shell-text-secondary, #5b6a7d);
}

.gset-helpbody h3[b-qhqakqzvkv] {
    margin: 0.9rem 0 0.25rem;
    font-size: 0.88rem;
}

.gset-helpbody p[b-qhqakqzvkv] {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    line-height: 1.55;
}
/* /Pages/Settings/LocalPrintingPage.razor.rz.scp.css */
/* Local Printing - connection panel over the saved-settings table, help on the right. */

.lpp-body[b-j9r72iee5z] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.lpp-main[b-j9r72iee5z] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lpp-panel[b-j9r72iee5z] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--shell-border);
    border-radius: 1rem;
}

.lpp-form[b-j9r72iee5z] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem 1rem;
}

.lpp-field[b-j9r72iee5z] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.lpp-printers[b-j9r72iee5z],
.lpp-empty[b-j9r72iee5z] {
    margin: 0;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.lpp-empty[b-j9r72iee5z] {
    padding: 1rem;
    border: 1px dashed var(--shell-border);
    border-radius: 0.75rem;
}

.lpp-table-wrap[b-j9r72iee5z] {
    overflow-x: auto;
}

.lpp-table[b-j9r72iee5z] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.lpp-table th[b-j9r72iee5z] {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--shell-border);
    white-space: normal;
}

.lpp-table td[b-j9r72iee5z] {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--shell-border);
    vertical-align: middle;
}

.lpp-num[b-j9r72iee5z] {
    text-align: right;
}

.lpp-select[b-j9r72iee5z],
.lpp-number[b-j9r72iee5z] {
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.4rem;
    background: transparent;
    color: inherit;
    font: inherit;
    max-width: 100%;
}

.lpp-number[b-j9r72iee5z] {
    width: 4.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
    .lpp-body[b-j9r72iee5z] {
        flex-direction: column;
    }
}

/* Install commands and paths in the help panel wrap instead of overflowing it. */
.lpp-page[b-j9r72iee5z]  .ct-page__help-content code {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.lpp-page[b-j9r72iee5z]  .ct-page__help-content p {
    margin: 0 0 0.5rem;
}
/* /Pages/Settings/MailAccountsPage.razor.rz.scp.css */
/* Mail Accounts — layout mechanics only; the shell and every cosmetic token
   come from app.css. */

.mac-page[b-i6cxxv29r2] { display: block; }

.mac-page__body[b-i6cxxv29r2] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.mac-page__main[b-i6cxxv29r2] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Profiles on the left, the one being edited on the right. */
.mac-split[b-i6cxxv29r2] {
    flex: 1 1 auto;
    display: flex;
    gap: 1rem;
    min-height: 0;
    overflow: hidden;
}

.mac-list[b-i6cxxv29r2] {
    flex: 0 0 19rem;
    max-width: 19rem;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .35rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

/* The editor scrolls, not the pane, so the section headings stay put mid-edit. */
.mac-detail[b-i6cxxv29r2] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .35rem;
}

.mac-detail__empty[b-i6cxxv29r2] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    color: var(--shell-muted-text, #767676);
}

.mac-item[b-i6cxxv29r2] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    width: 100%;
    text-align: left;
    padding: .5rem .65rem;
    border: 1px solid #e0e0e0;
    border-radius: .5rem;
    background: #fff;
    cursor: pointer;
}

.mac-item:disabled[b-i6cxxv29r2] { opacity: .6; cursor: default; }
.mac-item--on[b-i6cxxv29r2] { border-color: #0b4a8f; background: #eef4fa; }

.mac-item__name[b-i6cxxv29r2] { font-weight: 600; font-size: .88rem; }
.mac-item__addr[b-i6cxxv29r2] { font-size: .8rem; }
.mac-item__meta[b-i6cxxv29r2] { font-size: .74rem; color: var(--shell-muted-text, #767676); }

/* Cannot send. Amber, not red — red means cancelled across this application. */
.mac-item__warn[b-i6cxxv29r2] { font-size: .73rem; color: #a86200; }

.mac-chip[b-i6cxxv29r2] {
    display: inline-block;
    margin-left: .35rem;
    padding: 0 .4rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
}

.mac-chip--default[b-i6cxxv29r2] { background: #e8f4ec; color: #1c6b2c; }

.mac-head[b-i6cxxv29r2] {
    margin: 1rem 0 .5rem;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--shell-muted-text, #767676);
}

.mac-head:first-child[b-i6cxxv29r2] { margin-top: .2rem; }

.mac-grid[b-i6cxxv29r2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem .9rem;
}

.mac-desc[b-i6cxxv29r2] { grid-column: 1 / -1; }

/* ── scopes: which app or module sends through this profile ── */
.mac-scopeband[b-i6cxxv29r2] {
    margin: .7rem 0 .3rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--shell-muted-text, #767676);
}

.mac-scopes[b-i6cxxv29r2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .35rem .6rem;
}

/* Stacked, so the description gets the full width of the tile. Side by side,
   the name and the "where it goes today" note fought over one line and left
   the description a column three words wide. */
.mac-scope[b-i6cxxv29r2] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
    padding: .45rem .55rem;
    border: 1px solid #e6e6e6;
    border-radius: .45rem;
}

.mac-scope--on[b-i6cxxv29r2] { border-color: #bcd4ea; background: rgba(11, 74, 143, .03); }

.mac-scope__pick[b-i6cxxv29r2] {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    cursor: pointer;
}

/* min-width:0 lets a long module name wrap instead of forcing the tile wider
   than its grid column, which is what pushed the two halves into each other. */
.mac-scope__name[b-i6cxxv29r2] {
    min-width: 0;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.mac-scope__meta[b-i6cxxv29r2] {
    display: block;
    font-size: .72rem;
    line-height: 1.4;
    color: var(--shell-muted-text, #767676);
    overflow-wrap: anywhere;
}

.mac-scope__foot[b-i6cxxv29r2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    min-width: 0;
    margin-top: .1rem;
}

.mac-scope__def[b-i6cxxv29r2] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .74rem;
    cursor: pointer;
}

/* Where this scope's mail goes TODAY — so an unticked row reads as "handled
   elsewhere" rather than "not set up". */
.mac-scope__resolved[b-i6cxxv29r2] {
    min-width: 0;
    font-size: .71rem;
    color: var(--shell-muted-text, #767676);
    overflow-wrap: anywhere;
}

.mac-scope__none[b-i6cxxv29r2] { font-size: .71rem; color: #a86200; }

.mac-scopeactions[b-i6cxxv29r2] { display: flex; gap: .35rem; margin-top: .6rem; }

/* ── sharing: who may send by hand ── */
.mac-shareedit[b-i6cxxv29r2] { display: flex; gap: .5rem; align-items: center; margin: .5rem 0 .45rem; }
.mac-shareedit .prod-master__input[b-i6cxxv29r2] { flex: 1 1 auto; min-width: 0; max-width: 18rem; }
.mac-shareedit .mac-note[b-i6cxxv29r2] { margin: 0; flex: 0 0 auto; }

.mac-shares[b-i6cxxv29r2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .3rem .5rem;
    max-height: 15rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .25rem;
}

.mac-share[b-i6cxxv29r2] {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    padding: .3rem .45rem;
    border: 1px solid #e6e6e6;
    border-radius: .4rem;
    cursor: pointer;
}

.mac-share--on[b-i6cxxv29r2] { border-color: #bcd4ea; background: rgba(11, 74, 143, .03); }

.mac-share__name[b-i6cxxv29r2] {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.mac-share__role[b-i6cxxv29r2] {
    display: block;
    font-size: .7rem;
    color: var(--shell-muted-text, #767676);
}

.mac-test[b-i6cxxv29r2] { display: flex; gap: .45rem; align-items: center; }
.mac-test .prod-master__input[b-i6cxxv29r2] { flex: 1 1 auto; min-width: 0; max-width: 22rem; }

.mac-note[b-i6cxxv29r2] {
    margin: .35rem 0 0;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--shell-muted-text, #767676);
}

.mac-warn[b-i6cxxv29r2],
.mac-empty[b-i6cxxv29r2] {
    margin: 0 0 .75rem;
    padding: .6rem .8rem;
    border-radius: .5rem;
    line-height: 1.5;
}

.mac-empty[b-i6cxxv29r2] { background: #f4f6f8; color: #444; }
.mac-warn[b-i6cxxv29r2] { background: #fffaef; border: 1px solid #e0b352; color: #8a6d1f; }

.mac-danger[b-i6cxxv29r2] {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1.2rem;
    padding-top: .8rem;
    border-top: 1px solid #e6e6e6;
}

.mac-confirm[b-i6cxxv29r2] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    font-size: .8rem;
    color: #8a6d1f;
}

.mac-toolbar__note[b-i6cxxv29r2] {
    margin-left: auto;
    color: var(--shell-muted-text, #767676);
    font-size: .85rem;
}
/* /Pages/Settings/MessageProfilesPage.razor.rz.scp.css */
/* SMS/WhatsApp Profiles - master shell like Email Templates, with a placeholder panel. */

.mpp__body[b-gcjkijjwmw] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.mpp__form[b-gcjkijjwmw] {
    flex: 1 1 auto;
    min-width: 0;
}

.mpp__layout[b-gcjkijjwmw] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1rem;
    align-items: start;
}

.mpp__detail[b-gcjkijjwmw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.mpp__group[b-gcjkijjwmw] {
    margin: 0;
    padding: 0.85rem 1rem 1rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.mpp__group > legend[b-gcjkijjwmw] {
    padding: 0 0.4rem;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--shell-text-secondary, var(--shell-text-primary));
}

.mpp__grid[b-gcjkijjwmw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.9rem 1rem;
}

.mpp-field[b-gcjkijjwmw] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.mpp-field--wide[b-gcjkijjwmw] { grid-column: span 2; }
.mpp-field--full[b-gcjkijjwmw] { grid-column: 1 / -1; }

.mpp__label[b-gcjkijjwmw] { font-size: 0.8rem; font-weight: 600; }

[b-gcjkijjwmw] .mpp__mono input,
[b-gcjkijjwmw] .mpp__mono textarea {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.86rem;
}
[b-gcjkijjwmw] .mpp__message textarea {
    min-height: 220px;
    max-height: 420px;
    resize: vertical;
    line-height: 1.45;
}

/* Live counter */
.mpp__counter-row[b-gcjkijjwmw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.mpp-counter[b-gcjkijjwmw] {
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--shell-border);
}
.mpp-counter--warn[b-gcjkijjwmw] { color: var(--shell-warning, #b45309); border-color: currentColor; }
.mpp-counter--bad[b-gcjkijjwmw] { color: var(--shell-danger, #b91c1c); border-color: currentColor; font-weight: 600; }

.mpp__note[b-gcjkijjwmw] { font-size: 0.8rem; opacity: 0.85; }
.mpp__note--warn[b-gcjkijjwmw] { color: var(--shell-warning, #b45309); opacity: 1; }

.mpp__unknown[b-gcjkijjwmw] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.45rem;
    border: 1px solid var(--shell-warning, #b45309);
    font-size: 0.82rem;
}
.mpp__unknown code[b-gcjkijjwmw], .mpp__token code[b-gcjkijjwmw] { font-size: 0.82rem; }

.mpp__radios[b-gcjkijjwmw] { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

.mpp__secret[b-gcjkijjwmw] { display: flex; align-items: flex-end; gap: 0.5rem; }
.mpp__secret > :first-child[b-gcjkijjwmw] { flex: 1 1 auto; min-width: 0; }
.mpp__chip[b-gcjkijjwmw] {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--shell-border);
}

.mpp__used[b-gcjkijjwmw] { margin: 0; font-size: 0.86rem; opacity: 0.9; }

.mpp-option[b-gcjkijjwmw] { display: flex; align-items: baseline; gap: 0.6rem; text-align: left; min-width: 0; }
.mpp-option span[b-gcjkijjwmw] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpp-option small[b-gcjkijjwmw] { opacity: 0.7; white-space: nowrap; }

/* Placeholder panel */
.mpp__tokens[b-gcjkijjwmw] {
    position: sticky;
    top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    max-height: calc(100vh - 220px);
    min-width: 0;
}
.mpp__tokens-head[b-gcjkijjwmw] { display: flex; flex-direction: column; gap: 0.15rem; }
.mpp__token-list[b-gcjkijjwmw] { overflow-y: auto; display: flex; flex-direction: column; gap: 0.15rem; min-height: 0; }
.mpp__token-group[b-gcjkijjwmw] {
    margin-top: 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.75;
}
.mpp__token[b-gcjkijjwmw] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    width: 100%;
    padding: 0.3rem 0.45rem;
    border: 1px solid transparent;
    border-radius: 0.35rem;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.mpp__token:hover:not(:disabled)[b-gcjkijjwmw],
.mpp__token:focus-visible[b-gcjkijjwmw] { border-color: var(--shell-border); background: var(--shell-panel-background-soft, rgba(0,0,0,.04)); }
.mpp__token:focus-visible[b-gcjkijjwmw] { outline: 2px solid var(--shell-accent, #2563eb); outline-offset: 1px; }
.mpp__token:disabled[b-gcjkijjwmw] { cursor: default; opacity: 0.6; }
.mpp__token small[b-gcjkijjwmw] { font-size: 0.72rem; opacity: 0.75; overflow-wrap: anywhere; }
.mpp__token[draggable="true"][b-gcjkijjwmw] { cursor: grab; }
.mpp__token[draggable="true"]:active[b-gcjkijjwmw] { cursor: grabbing; }
.mpp__token.is-dragging[b-gcjkijjwmw] { opacity: 0.55; border-style: dashed; border-color: var(--shell-accent, #2563eb); }

/* The box a dragged placeholder is over (set by registerTokenDragAndDrop). */
[b-gcjkijjwmw] input.is-drop-target,
[b-gcjkijjwmw] textarea.is-drop-target {
    outline: 2px dashed var(--shell-accent, #2563eb);
    outline-offset: 1px;
}

/* Preview */
.mpp-phone[b-gcjkijjwmw] { display: flex; flex-direction: column; gap: 0.5rem; }
.mpp-phone__bubble[b-gcjkijjwmw] {
    align-self: flex-start;
    max-width: 100%;
    padding: 0.65rem 0.8rem;
    border-radius: 1rem 1rem 1rem 0.25rem;
    border: 1px solid var(--shell-border);
    background: var(--shell-panel-background-soft, rgba(0,0,0,.04));
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.45;
}
.mpp-phone__token[b-gcjkijjwmw] {
    padding: 0 0.2rem;
    border-radius: 0.25rem;
    border: 1px dashed var(--shell-accent, #2563eb);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.85em;
}
.mpp-phone__token--bad[b-gcjkijjwmw] { border-color: var(--shell-danger, #b91c1c); color: var(--shell-danger, #b91c1c); }

/* Help panel - fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-gcjkijjwmw] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-gcjkijjwmw] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-gcjkijjwmw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-gcjkijjwmw] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-gcjkijjwmw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-gcjkijjwmw] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-gcjkijjwmw] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-gcjkijjwmw] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-gcjkijjwmw] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-gcjkijjwmw] { padding-left: 0.15rem; }

[b-gcjkijjwmw] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .mpp__body[b-gcjkijjwmw] { flex-wrap: wrap; }
    .ct-page__help[b-gcjkijjwmw],
    .ct-page__help--docked[b-gcjkijjwmw] { flex: 0 0 auto; width: 100%; overflow: visible; }
}

@media (max-width: 1100px) {
    .mpp__layout[b-gcjkijjwmw] { grid-template-columns: minmax(0, 1fr); }
    .mpp__tokens[b-gcjkijjwmw] { position: static; max-height: 360px; }
}

@media (max-width: 700px) {
    .mpp-field--wide[b-gcjkijjwmw] { grid-column: 1 / -1; }
}
/* /Pages/Settings/StatusMaster.razor.rz.scp.css */
/* Status master — layout mirrors the other master shells. */

.su-master__body[b-8stphq5rq5],
.su-master[b-8stphq5rq5]  .su-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.su-master__form[b-8stphq5rq5],
.su-master[b-8stphq5rq5]  .su-embedded-main {
    flex: 1 1 auto;
    min-width: 0;
}

.su-master__detail[b-8stphq5rq5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.su-grid[b-8stphq5rq5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.su-description[b-8stphq5rq5]  textarea {
    min-height: 4rem;
}

/* Hex code box + native colour swatch editing the same ColorCode value. */
.su-color-row[b-8stphq5rq5] {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
}

.su-color-row .su-color-text[b-8stphq5rq5] {
    flex: 1 1 auto;
    min-width: 0;
}

.su-color-swatch[b-8stphq5rq5] {
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.1rem;
    padding: 0.1rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.35rem;
    background: transparent;
    cursor: pointer;
}

.su-color-swatch:disabled[b-8stphq5rq5] {
    cursor: default;
    opacity: 0.55;
}

.su-switch-row[b-8stphq5rq5] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.su-locked-note[b-8stphq5rq5] {
    margin: -0.35rem 0 0;
    font-size: 0.82rem;
    opacity: 0.8;
}

.su-embedded-toolbar[b-8stphq5rq5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* Help panel — fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-8stphq5rq5] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-8stphq5rq5] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-8stphq5rq5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-8stphq5rq5] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-8stphq5rq5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-8stphq5rq5] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-8stphq5rq5] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-8stphq5rq5] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-8stphq5rq5] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-8stphq5rq5] { padding-left: 0.15rem; }

[b-8stphq5rq5] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .ct-page__help[b-8stphq5rq5],
    .ct-page__help--docked[b-8stphq5rq5] { flex: 0 0 auto; width: 100%; overflow: visible; }
}

@media (max-width: 900px) {
    .su-master__body[b-8stphq5rq5],
    .su-master[b-8stphq5rq5]  .su-embedded-body { flex-wrap: wrap; }
}
/* /Pages/Tools/CloseTransactionPeriodPage.razor.rz.scp.css */
/* Close Transaction Period - form over list, dockable help on the right. */

.ctp-body[b-jut58kfadh] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.ctp-main[b-jut58kfadh] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ctp-panel[b-jut58kfadh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--shell-border);
    border-radius: 1rem;
    background: var(--shell-panel-background, transparent);
}

.ctp-form[b-jut58kfadh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem 1rem;
    align-items: start;
}

.ctp-field[b-jut58kfadh] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ctp-field--wide[b-jut58kfadh] {
    grid-column: 1 / -1;
}

.ctp-selected[b-jut58kfadh] {
    align-self: center;
    font-size: 0.8rem;
    color: var(--shell-text-secondary, inherit);
    overflow-wrap: anywhere;
}

.ctp-empty[b-jut58kfadh] {
    margin: 0;
    padding: 1rem;
    border: 1px dashed var(--shell-border);
    border-radius: 0.75rem;
    color: var(--shell-text-secondary, inherit);
}

/* A reopened period reads like any inactive record: the app-wide orange. */
.ctp-grid[b-jut58kfadh]  .e-row.ctp-row--reopened .e-rowcell:not(.e-active) {
    background: #ffe3c2;
    color: #21252b;
}

.ctp-chip[b-jut58kfadh] {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ctp-chip--closed[b-jut58kfadh] {
    background: var(--shell-status-error-bg);
    border-color: var(--shell-status-error-border);
    color: var(--shell-status-error-text);
}

.ctp-chip--open[b-jut58kfadh] {
    background: var(--shell-status-warn-bg);
    border-color: var(--shell-status-warn-border);
    color: var(--shell-status-warn-text);
}

.ctp-confirm-note[b-jut58kfadh] {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--shell-status-warn-text);
}

.ctp-dialog-actions[b-jut58kfadh] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

@media (max-width: 760px) {
    .ctp-body[b-jut58kfadh] {
        flex-direction: column;
    }
}
/* /Pages/Tools/DataImportPage.razor.rz.scp.css */
/* Tools & Utilities > Data Import. */

.dimp__body[b-xzfrazqlui] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.dimp__main[b-xzfrazqlui] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dimp__layout[b-xzfrazqlui] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* The kinds, as record cards (the set-up page convention). */
.dimp__kinds[b-xzfrazqlui] {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dimp__card[b-xzfrazqlui] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-align: left;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.15));
    border-radius: 10px;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-primary, inherit);
    cursor: pointer;
}

.dimp__card span[b-xzfrazqlui] {
    font-size: 0.8rem;
    color: var(--shell-text-muted, #5f6b7a);
}

.dimp__card em[b-xzfrazqlui] {
    font-size: 0.78rem;
    color: var(--shell-status-warn-text, #b26a00);
    font-style: normal;
}

.dimp__card--on[b-xzfrazqlui] {
    border-color: var(--shell-accent, #0f766e);
    box-shadow: 0 0 0 2px var(--shell-focus-ring, rgba(15, 118, 110, 0.25));
}

.dimp__card--off[b-xzfrazqlui] { opacity: 0.7; }

.dimp__card:focus-visible[b-xzfrazqlui] {
    outline: 2px solid var(--shell-focus-ring, #0f766e);
    outline-offset: 2px;
}

.dimp__panel[b-xzfrazqlui] {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 900px) {
    .dimp__body[b-xzfrazqlui], .dimp__layout[b-xzfrazqlui] { flex-direction: column; }
    .dimp__kinds[b-xzfrazqlui] { flex: 0 0 auto; width: 100%; }
}
/* /Pages/Transactions/ApprovalsInboxPage.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   ApprovalsInboxPage — the working surface for approvals.

   Component-scoped, unlike the bell's flyout: nothing here is portaled to
   <body>, so it can stay with the page it belongs to.

   Surfaces take --shell-panel-background, never --shell-contrast-surface-bg.
   The latter is the LIGHT contrast surface meant to carry DARK text; paired
   with --shell-text-primary it renders near-white on near-white in the dark
   theme, which is how the figures on three opening dialogs became unreadable.
   ════════════════════════════════════════════════════════════════════════════ */

.apx-main[b-bapfjp48ig] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Filter strip ─────────────────────────────────────────────────────── */
.apx-filters[b-bapfjp48ig] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: var(--shell-panel-background);
    border: 1px solid var(--shell-border);
    border-radius: 0.5rem;
}
.apx-filter[b-bapfjp48ig] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.apx-filter > span[b-bapfjp48ig] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--shell-text-secondary);
}
.apx-date[b-bapfjp48ig] {
    background: var(--shell-input-background, transparent);
    color: var(--shell-text-primary);
    border: 1px solid var(--shell-border);
    border-radius: 0.25rem;
    padding: 0.3rem 0.4rem;
    font: inherit;
    font-size: 0.85rem;
}
.apx-filter__clear[b-bapfjp48ig] { align-self: flex-end; }

/* ── The grid ─────────────────────────────────────────────────────────── */
/* Wide content scrolls inside its own container; the page body never
   scrolls sideways. */
.apx-tablewrap[b-bapfjp48ig] {
    overflow-x: auto;
    border: 1px solid var(--shell-border);
    border-radius: 0.5rem;
    background: var(--shell-panel-background);
}
.apx-table[b-bapfjp48ig] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.apx-table thead th[b-bapfjp48ig] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--shell-panel-background);
    border-bottom: 2px solid var(--shell-border);
    padding: 0.5rem 0.6rem;
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--shell-text-secondary);
    /* Headers WRAP rather than truncate - the house rule. */
    white-space: normal;
}
.apx-table td[b-bapfjp48ig] {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--shell-border);
    vertical-align: top;
}
.apx-table tbody tr[b-bapfjp48ig] { cursor: pointer; }
.apx-table tbody tr:hover[b-bapfjp48ig] { background: rgba(127, 127, 127, 0.10); }
.apx-table tbody tr:focus-visible[b-bapfjp48ig] {
    outline: 2px solid var(--shell-button-primary);
    outline-offset: -2px;
}
.apx-table .num[b-bapfjp48ig] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.apx-table small[b-bapfjp48ig] { color: var(--shell-text-secondary); }
.apx-remark[b-bapfjp48ig] { font-style: italic; }

.apx-row--unread td[b-bapfjp48ig] { font-weight: 600; }
/* A pending request past three days gets a rail, not a wash: the row must
   stay readable while still catching the eye. */
.apx-row--late td:first-child[b-bapfjp48ig] {
    box-shadow: inset 3px 0 0 0 var(--shell-status-error-text);
}

.apx-empty[b-bapfjp48ig] {
    text-align: center;
    padding: 1.8rem 1rem;
    color: var(--shell-text-secondary);
}

/* ── Ageing: the column that carries the page ─────────────────────────── */
/* Same bands as the outstanding reports, so the shape is already familiar.
   Only a PENDING row ages - colouring a decided one would be shouting about
   work that is already done. */
.apx-age[b-bapfjp48ig] {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.apx-age--fresh[b-bapfjp48ig] {
    background: var(--shell-status-ok-bg);
    color: var(--shell-status-ok-text);
}
.apx-age--due[b-bapfjp48ig] {
    background: var(--shell-status-warn-bg);
    color: var(--shell-status-warn-text);
}
.apx-age--late[b-bapfjp48ig] {
    background: var(--shell-status-error-bg);
    color: var(--shell-status-error-text);
}
.apx-age--done[b-bapfjp48ig] {
    background: transparent;
    color: var(--shell-text-secondary);
    font-weight: 500;
}

/* ── Status ───────────────────────────────────────────────────────────── */
/* The glyph travels with the word, so colour is never the only signal. */
.apx-status[b-bapfjp48ig] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-weight: 600;
    white-space: nowrap;
}
.apx-status--ok[b-bapfjp48ig] { color: var(--shell-status-ok-text); }
.apx-status--bad[b-bapfjp48ig] { color: var(--shell-status-error-text); }
.apx-status--warn[b-bapfjp48ig] { color: var(--shell-status-warn-text); }
.apx-status--muted[b-bapfjp48ig] { color: var(--shell-text-secondary); }

.apx-more[b-bapfjp48ig] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--shell-text-secondary);
    font-size: 0.85rem;
}

/* ── Deciding from the row itself ───────────────────────────────────────── */

.apx-act[b-bapfjp48ig] { display: flex; gap: .3rem; flex-wrap: nowrap; }

/* The voucher panel's own three, in the row. The COLOUR is the theme's -
   these carry primary-action / secondary-action, the same classes the voucher
   screen's buttons do - so the page adds only the pill shape and a size that
   sits inside a grid row. */
[b-bapfjp48ig] .apx-act__btn {
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    padding: .18rem .8rem;
    white-space: nowrap;
    line-height: 1.5;
}

[b-bapfjp48ig] .apx-act__btn .e-btn-icon { font-size: .8rem; }

.apx-dialog-actions[b-bapfjp48ig] { display: flex; gap: .5rem; margin-top: .9rem; }
.apx-note[b-bapfjp48ig] { font-size: .86rem; opacity: .85; }

/* ── What an approver reads before deciding ───────────────────────────────
   Quiet squares under the decision buttons - the Workflow Manager's own
   shape, so the same verb looks the same on both screens. */
.apx-tools[b-bapfjp48ig] {
    display: flex;
    flex-wrap: nowrap;
    gap: .15rem;
    margin-top: .3rem;
}

.apx-tool[b-bapfjp48ig] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: .4rem;
    background: transparent;
    color: var(--shell-text-secondary, #475569);
    cursor: pointer;
}

.apx-tool .e-icons[b-bapfjp48ig] { font-size: .82rem; line-height: 1; }
.apx-tool:hover:not(:disabled)[b-bapfjp48ig] {
    background: var(--shell-surface-hover, rgba(148, 163, 184, .16));
    border-color: var(--shell-border, #e2e8f0);
    color: var(--shell-text-primary, #0f172a);
}
.apx-tool:focus-visible[b-bapfjp48ig] { outline: 2px solid var(--shell-accent, #2563eb); outline-offset: 1px; }
.apx-tool:disabled[b-bapfjp48ig] { opacity: .32; cursor: default; }

/* The right-click menu. */
.apx-menu-backdrop[b-bapfjp48ig] { position: fixed; inset: 0; z-index: 1090; }

.apx-menu[b-bapfjp48ig] {
    position: fixed;
    z-index: 1091;
    min-width: 15rem;
    padding: .3rem;
    border: 1px solid var(--shell-border, #e2e8f0);
    border-radius: .55rem;
    background: var(--shell-surface, #fff);
    color: var(--shell-text-primary, #0f172a);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
    display: flex;
    flex-direction: column;
}

.apx-menu__item[b-bapfjp48ig] {
    display: grid;
    grid-template-columns: 1.2rem 1fr auto;
    align-items: center;
    gap: .55rem;
    padding: .4rem .55rem;
    border: 0;
    border-radius: .4rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .86rem;
    text-align: left;
    cursor: pointer;
}

.apx-menu__item:hover:not(:disabled)[b-bapfjp48ig],
.apx-menu__item:focus-visible[b-bapfjp48ig] { background: var(--shell-surface-hover, rgba(148, 163, 184, .16)); outline: none; }
.apx-menu__item:disabled[b-bapfjp48ig] { opacity: .4; cursor: default; }
.apx-menu__item kbd[b-bapfjp48ig] {
    font: inherit;
    font-size: .72rem;
    padding: .05rem .35rem;
    border: 1px solid var(--shell-border, #e2e8f0);
    border-radius: .3rem;
    color: var(--shell-text-muted, #64748b);
}
.apx-menu__sep[b-bapfjp48ig] { height: 1px; margin: .25rem .2rem; background: var(--shell-border, #e2e8f0); }
/* /Pages/Transactions/AttendanceEntryPage.razor.rz.scp.css */
/* Attendance / Leave / Production Entry — page-specific LAYOUT only.
   The header banner, toolbar, help panel, status banner, field hints, combo
   popups and grid-header wrapping are all GLOBAL (app.css: prod-master__*,
   master-*, ct-page__help*, app-field-hint, app-mc-*), so nothing here
   duplicates them.

   Every colour goes through a --shell-* token with a light fallback, so the
   page follows the theme instead of pinning itself to one. */

.ate-page[b-17x7ke23gp] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ate-shell[b-17x7ke23gp] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.ate-toolbar[b-17x7ke23gp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

/* The help aside docks on the RIGHT: .ct-page__help is flex-sized globally
   (flex-basis var(--invnet-help-w)), which only works when its parent is a
   flex row — .master-body alone is not one. */
.ate-body[b-17x7ke23gp] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

/* The editing column scrolls; the grid card grows into whatever is left. */
.ate-panel[b-17x7ke23gp] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    overflow-y: auto;
    padding: 0.8rem 1rem 1.2rem;
}

.ate-redirect[b-17x7ke23gp] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* ── Cards ─────────────────────────────────────────────────────────────────
   One surface per idea: the voucher, the loaders, the lines. Compact padding
   so all three fit above the fold on a laptop. */
.ate-card[b-17x7ke23gp] {
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 6px;
    background: var(--shell-panel-background, #fff);
    padding: 0.7rem 0.9rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.ate-card--lines[b-17x7ke23gp] {
    flex: 1 1 auto;
    min-height: 0;
}

.ate-card__head[b-17x7ke23gp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.ate-card__head h2[b-17x7ke23gp] {
    margin: 0;
    font-size: 1rem;
}

/* ── Header fields ─────────────────────────────────────────────────────── */
.ate-grid4[b-17x7ke23gp] {
    display: grid;
    gap: 0.3rem 1rem;
    align-items: start;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ate-field--wide3[b-17x7ke23gp] {
    grid-column: span 3;
}

@media (max-width: 1100px) {
    .ate-grid4[b-17x7ke23gp] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ate-field--wide3[b-17x7ke23gp] { grid-column: span 2; }
}

@media (max-width: 640px) {
    .ate-grid4[b-17x7ke23gp] { grid-template-columns: 1fr; }
    .ate-field--wide3[b-17x7ke23gp] { grid-column: span 1; }
}

.ate-field[b-17x7ke23gp] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Native date/time inputs need the float-label look the Syncfusion boxes get
   for free. */
.ate-label[b-17x7ke23gp] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--shell-text-secondary, #5b6a7d);
    margin-bottom: 0.15rem;
}

.ate-input[b-17x7ke23gp] {
    width: 100%;
    min-width: 0;
    padding: 0.32rem 0.4rem;
    border: 1px solid var(--shell-input-border, #d8dee7);
    border-radius: 4px;
    background: var(--shell-input-background, #fff);
    color: var(--shell-input-text, inherit);
    font: inherit;
}

.ate-input:focus[b-17x7ke23gp] {
    border-color: var(--shell-button-primary, #4b6bfb);
    outline: none;
}

.ate-input:disabled[b-17x7ke23gp] {
    background: var(--shell-item-background-subtle, #f4f6fa);
    color: var(--shell-text-secondary, #5b6a7d);
}

.ate-switch[b-17x7ke23gp] {
    min-width: 260px;
}

/* ── Status / provenance chips ─────────────────────────────────────────── */
.ate-badges[b-17x7ke23gp] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    align-items: center;
}

.ate-chip[b-17x7ke23gp] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}
.ate-chip--system[b-17x7ke23gp]    { background: #ffe3c2; color: #7a4b00; border-color: #f0cf9a; }
.ate-chip--paid[b-17x7ke23gp]      { background: var(--shell-item-background-subtle, #eceff4); color: var(--shell-text-secondary, #4a5566); border-color: var(--shell-border, #d8dee7); }
/* The one-sentence explanation of why a voucher is locked, right under the
   card head where the operator is already looking. */
.ate-lock[b-17x7ke23gp] {
    margin: 0;
    padding: 0.4rem 0.6rem;
    border-left: 3px solid #f0a03a;
    border-radius: 3px;
    background: var(--shell-status-warn-bg, #fff4e0);
    color: var(--shell-status-warn-text, #7a4b00);
    font-size: 0.8rem;
    line-height: 1.35;
}

/* ── Tool rows ─────────────────────────────────────────────────────────── */
.ate-tools[b-17x7ke23gp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* A loader this database can not run is a labelled note, never a button that
   only fails. */
.ate-placeholder[b-17x7ke23gp] {
    padding: 0.25rem 0.5rem;
    border: 1px dashed var(--shell-border, #d8dee7);
    border-radius: 4px;
    font-size: 0.76rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* ── Live summary strip ────────────────────────────────────────────────────
   Sits between the header and the grid so the total being checked is never a
   scroll away. */
.ate-summary[b-17x7ke23gp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ate-summary__item[b-17x7ke23gp] {
    display: flex;
    flex-direction: column;
    min-width: 92px;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 5px;
    background: var(--shell-item-background-subtle, #f4f6fa);
}

.ate-summary__item span[b-17x7ke23gp] {
    font-size: 0.67rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--shell-text-secondary, #5b6a7d);
}

.ate-summary__item strong[b-17x7ke23gp] {
    font-size: 0.95rem;
    line-height: 1.2;
}

.ate-summary__item--system[b-17x7ke23gp] { background: #fff4e5; border-color: #f0cf9a; }
.ate-summary__item--paid[b-17x7ke23gp]   { background: var(--shell-item-background, #eceff4); }

/* ── Line grid ─────────────────────────────────────────────────────────────
   Wide content scrolls inside its own box; the page never scrolls sideways.
   Minimum height (convention for editable grids): an empty or one-row grid
   keeps a visible working area instead of collapsing to its header. */
[b-17x7ke23gp] .ate-grid tr.ate-row--system > td {
    background: #fff4e5;
    box-shadow: inset 3px 0 0 0 #f0a03a;
}

[b-17x7ke23gp] .ate-grid tr.ate-row--paid > td {
    background: var(--shell-item-background-subtle, #eef1f5);
    box-shadow: inset 3px 0 0 0 #98a4b5;
}

.ate-rowbadge[b-17x7ke23gp] {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0 0.35rem;
    border-radius: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: help;
}

.ate-rowbadge--system[b-17x7ke23gp] { background: #f0a03a; color: #3a2400; }
.ate-rowbadge--paid[b-17x7ke23gp]   { background: #98a4b5; color: #1c2430; }

.ate-empty-note[b-17x7ke23gp] {
    margin: 0;
    padding: 1rem 0.8rem;
    text-align: center;
    color: var(--shell-text-secondary, #5b6a7d);
    font-size: 0.83rem;
}

/* ── Status audit line (who set the status, when, and why) ──────────────────
   Sits under the chips: the chip says WHAT the status is, this says who put
   it there. Tokens only, so it reads in both themes. */
.ate-statusline[b-17x7ke23gp] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.ate-statusline .e-icons[b-17x7ke23gp] {
    font-size: 0.8rem;
    color: var(--shell-accent, #2f6fd0);
}

/* ── Change Status dialog ───────────────────────────────────────────────── */
.ate-dialog__body[b-17x7ke23gp] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 0.2rem 0.1rem 0;
}

.ate-dialog__state[b-17x7ke23gp] {
    margin: 0;
    padding: 0.9rem 0;
    text-align: center;
    color: var(--shell-text-secondary, #5b6a7d);
    font-size: 0.85rem;
}

.ate-dialog__current[b-17x7ke23gp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 6px;
    background: var(--shell-item-background-subtle, #f5f7fa);
    font-size: 0.82rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.ate-dialog__current strong[b-17x7ke23gp] {
    color: var(--shell-text, #1c2430);
    font-size: 0.86rem;
}

.ate-dialog__note[b-17x7ke23gp] {
    margin: 0;
    font-size: 0.76rem;
    font-style: italic;
    color: var(--shell-text-secondary, #5b6a7d);
}

.ate-dialog__actions[b-17x7ke23gp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--shell-border, #d8dee7);
}

/* ── The printable voucher ──────────────────────────────────────────────────
   Only ever seen on paper: printElementById copies these rules into the print
   iframe along with the rest of the page's CSS. Plain black on white — a
   printed voucher is a document, not a screenshot of the form. */
.ate-print[b-17x7ke23gp] {
    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    color: #111;
    font-size: 11px;
}

.ate-print__head[b-17x7ke23gp] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
}

.ate-print__head td[b-17x7ke23gp] {
    border: 1px solid #ccc;
    padding: 4px 6px;
    vertical-align: top;
    width: 25%;
}

.ate-print__head span[b-17x7ke23gp] {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #666;
}

.ate-print__head strong[b-17x7ke23gp] { font-size: 11px; }

.ate-print__narr[b-17x7ke23gp] {
    margin: 0 0 6px;
    font-size: 11px;
}

.ate-print__lines[b-17x7ke23gp] {
    width: 100%;
    border-collapse: collapse;
}

.ate-print__lines th[b-17x7ke23gp],
.ate-print__lines td[b-17x7ke23gp] {
    border: 1px solid #ccc;
    padding: 3px 6px;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
}

.ate-print__lines th[b-17x7ke23gp] {
    background: #f0f0f0;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ate-print__lines tfoot td[b-17x7ke23gp] {
    font-weight: 700;
    background: #f7f7f7;
}

/* Numbers right-aligned on paper too (app convention). */
.ate-print__num[b-17x7ke23gp] { text-align: right; }
.ate-print__no[b-17x7ke23gp]  { width: 30px; text-align: right; }

/* Posting-status chips. Posted reads as a settled state, unposted as neutral
   — never as an error, because unposted is the normal state of a new entry. */
/* ── Syncfusion grid (convention) ────────────────────────────────────────────
   Editable cells LOOK like cells at rest rather than appearing on focus, the
   wrapper keeps a working height when empty, and the row tint reads through
   the editors because they stay transparent over it. */
/* The grid carries Height="320": it holds that block of space at a minimum and
   scrolls beyond it, header and totals row staying put outside the scroll. */
.ate-gridwrap[b-17x7ke23gp] {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

[b-17x7ke23gp] .ate-grid .e-gridcontent {
    border-bottom: 1px solid var(--shell-border, #d8dee7);
}

[b-17x7ke23gp] .ate-grid .e-rowcell {
    padding: 3px 6px;
    vertical-align: middle;
}

[b-17x7ke23gp] .ate-grid .e-headercell {
    background: var(--shell-item-background-subtle, #f2f4f7);
}

[b-17x7ke23gp] .ate-grid .e-input-group,
[b-17x7ke23gp] .ate-grid .e-numeric.e-input-group,
[b-17x7ke23gp] .ate-grid .e-date-wrapper,
[b-17x7ke23gp] .ate-grid .e-time-wrapper {
    margin: 0;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 4px;
    background: var(--shell-input-background, #fff);
}

[b-17x7ke23gp] .ate-grid .e-input-group input.e-input {
    padding: 0.2rem 0.4rem;
    font-size: 0.85rem;
    height: auto;
}

[b-17x7ke23gp] .ate-grid .e-input-group.e-disabled,
[b-17x7ke23gp] .ate-grid .e-input-group input.e-input:disabled {
    background: var(--shell-item-background-subtle, #f2f4f7);
    color: var(--shell-text-secondary, #5b6a7d);
}

/* A protected row keeps its colour: the cell editors sit transparent on top
   so the tint is not painted over. */
[b-17x7ke23gp] .ate-grid tr.ate-row--system .e-input-group,
[b-17x7ke23gp] .ate-grid tr.ate-row--paid .e-input-group {
    background: transparent;
}

[b-17x7ke23gp] .ate-grid .e-summaryrow .e-summarycell {
    background: var(--shell-item-background-subtle, #f2f4f7);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ate-rowno[b-17x7ke23gp] {
    color: var(--shell-text-secondary, #5b6a7d);
    font-variant-numeric: tabular-nums;
}

/* ── Load Employees dialog ───────────────────────────────────────────────────
   Two-column filter grid that collapses to one on a narrow viewport. */
.ate-al__lead[b-17x7ke23gp] {
    margin: 0 0 1rem;
    color: var(--shell-text-secondary, #5b6a7d);
    font-size: 0.85rem;
    line-height: 1.5;
}

.ate-al__grid[b-17x7ke23gp] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 1rem;
}

@media (max-width: 640px) {
    .ate-al__grid[b-17x7ke23gp] { grid-template-columns: minmax(0, 1fr); }
}

/* The "how many will this add" line — the answer before committing. */
.ate-al__count[b-17x7ke23gp] {
    margin: 0.9rem 0;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: var(--shell-item-background-subtle, #f2f4f7);
    border-left: 3px solid var(--shell-accent, #2f6fdb);
    font-size: 0.85rem;
    color: var(--shell-text, #1f2933);
}

.ate-al__count strong[b-17x7ke23gp] {
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
}

/* Nothing matched: say so in the warning colour rather than showing a bare 0. */
.ate-al__count--none[b-17x7ke23gp] {
    border-left-color: var(--shell-warning, #b7791f);
    background: var(--shell-warning-subtle, #fdf6e3);
}

/* Icon-only row button: square, so the trash sits centred rather than in a
   box still shaped for the caption it used to carry. */
[b-17x7ke23gp] .ate-rowbtn {
    min-width: 0;
    padding: 0.2rem 0.35rem;
}
/* /Pages/Transactions/BatchPayBillPage.razor.rz.scp.css */
/* Batch pay bill preparation. The shell (master-page / master-sticky-top /
   master-body) is the app-wide one; only what is specific to this screen. */
.bpb-page[b-cncakv7do0] { display: flex; flex-direction: column; min-height: 0; }
/* A ROW: the panels on the left, the user guide docked on the right. A
   flex-direction of column here would push the guide underneath, which is
   what the global .master-body:has(> .ct-page__help) floor rule exists to
   prevent - a scoped rule beats it, so this one has to agree with it. */
.bpb-body[b-cncakv7do0] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    min-height: 0;
}

/* Everything that is not the guide.

   It scrolls ON ITS OWN, like the guide beside it. The global rule that does
   this for panes (`.master-body > section, .master-body > aside`) matches only
   direct section/aside children, and this is a wrapper div - without the three
   lines below the column simply runs off the bottom of the clipped body with
   no scrollbar to reach it. */
.bpb-main[b-cncakv7do0] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    /* Vertical only: overflow-y:auto quietly implies overflow-x:auto, which
       would put a sideways scrollbar under the form. */
    overflow-x: hidden;
    padding-bottom: 0.35rem;
}

.bpb-toolbar[b-cncakv7do0] { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

.bpb-panel[b-cncakv7do0] {
    background: var(--shell-panel-background, #fff);
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 8px;
    padding: 0.9rem 1rem;
}

.bpb-grid[b-cncakv7do0] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem 0.9rem;
}

.bpb-grid--filters[b-cncakv7do0] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.bpb-field[b-cncakv7do0] { display: flex; flex-direction: column; min-width: 0; }
.bpb-field--wide[b-cncakv7do0] { grid-column: 1 / -1; }
/* A switch sits lower than an input under a floating label. */
.bpb-field--switch[b-cncakv7do0] { justify-content: flex-end; }

.bpb-tools[b-cncakv7do0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.8rem;
}

.bpb-count[b-cncakv7do0] { font-size: 0.85rem; color: var(--shell-text-secondary, #5b6a7d); }

.bpb-placeholder[b-cncakv7do0] {
    margin: 0;
    padding: 0.9rem;
    border-radius: 6px;
    background: var(--shell-item-background-subtle, #f2f4f7);
    color: var(--shell-text-secondary, #5b6a7d);
    font-size: 0.87rem;
}

/* Run log: a failed employee must be findable by colour in a list of hundreds. */
[b-cncakv7do0] .bpb-loggrid .e-rowcell,
[b-cncakv7do0] .bpb-billgrid .e-rowcell { padding: 3px 8px; font-size: 0.85rem; }

[b-cncakv7do0] .bpb-loggrid .e-headercell,
[b-cncakv7do0] .bpb-billgrid .e-headercell { background: var(--shell-item-background-subtle, #f2f4f7); }

[b-cncakv7do0] .bpb-log--error .e-rowcell { background: var(--shell-status-error-bg, #ffd2d2); color: var(--shell-status-error-text, #7a1b16); }
[b-cncakv7do0] .bpb-log--warn  .e-rowcell { background: var(--shell-status-warn-bg, #fff4e0); color: var(--shell-status-warn-text, #7a4b00); }

[b-cncakv7do0] .bpb-rowbtn { min-width: 0; padding: 0.2rem 0.35rem; }

/* ── The salary register: a DOCUMENT, printed through printElementById ────── */
.bpb-registerwrap[b-cncakv7do0] { display: flex; flex-direction: column; min-height: 0; }
.bpb-registerscroll[b-cncakv7do0] { overflow: auto; max-height: 66vh; }

.bpb-register[b-cncakv7do0] {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.bpb-register th[b-cncakv7do0],
.bpb-register td[b-cncakv7do0] {
    border: 1px solid var(--shell-border, #d8dee7);
    padding: 3px 7px;
    white-space: nowrap;
}

.bpb-register thead th[b-cncakv7do0] {
    background: var(--shell-item-background-subtle, #f2f4f7);
    position: sticky;
    top: 0;
    z-index: 1;
}

.bpb-register tfoot td[b-cncakv7do0] {
    background: var(--shell-item-background-subtle, #f2f4f7);
    font-weight: 600;
}

.bpb-num[b-cncakv7do0] { text-align: right; }

@media (max-width: 1100px) {
    .bpb-grid[b-cncakv7do0], .bpb-grid--filters[b-cncakv7do0] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .bpb-grid[b-cncakv7do0], .bpb-grid--filters[b-cncakv7do0] { grid-template-columns: minmax(0, 1fr); }
}

/* -- Change Batch Status dialog --------------------------------------------
   Same shape as the single pay bill's status dialog, with one thing that has
   no counterpart there: the list of bills the cascade will NOT reach. It is
   given a warning tint because it is the difference between what the operator
   asked for and what will happen. */
.bpb-dialog__body[b-cncakv7do0] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 0.2rem 0.1rem 0;
}

.bpb-dialog__current[b-cncakv7do0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 6px;
    background: var(--shell-item-background-subtle, #f5f7fa);
    font-size: 0.82rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.bpb-dialog__current strong[b-cncakv7do0] {
    color: var(--shell-text, #1c2430);
    font-size: 0.86rem;
}

.bpb-dialog__note[b-cncakv7do0] {
    margin: 0;
    font-size: 0.78rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.bpb-dialog__skipped[b-cncakv7do0] {
    max-height: 190px;
    overflow-y: auto;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--shell-warning-border, #e5c07b);
    border-radius: 6px;
    background: var(--shell-warning-background, #fdf6e6);
}

.bpb-dialog__skipped .prod-master__subhead[b-cncakv7do0] {
    margin-top: 0;
}

.bpb-dialog__skipped li[b-cncakv7do0] {
    font-size: 0.78rem;
    line-height: 1.45;
}

.bpb-dialog__actions[b-cncakv7do0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--shell-border, #d8dee7);
}

@media (max-width: 900px) {
    /* Too narrow for two columns: the guide goes back under the form. */
    .bpb-body[b-cncakv7do0] { flex-direction: column; }
}

/* -- The header card ------------------------------------------------------
   Same shape as the single Pay Bill's: what this record IS on the left, what
   STATE it is in on the right, then the lines that say who put it in that
   state and when. The chip answers "what"; the lines under it answer "who,
   when and why". */
.bpb-headcard[b-cncakv7do0] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.bpb-headcard__head[b-cncakv7do0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.bpb-headcard__head h2[b-cncakv7do0] {
    margin: 0;
    font-size: 1.02rem;
    color: var(--shell-text, #1c2430);
}

.bpb-badges[b-cncakv7do0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

/* The batch number reads as a fact, not a field. */
.bpb-voucherid[b-cncakv7do0] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--shell-text-secondary, #5b6a7d);
}

.bpb-voucherid strong[b-cncakv7do0] {
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--shell-text, #1c2430);
    font-variant-numeric: tabular-nums;
}

.bpb-chip--bills[b-cncakv7do0] {
    background: var(--shell-accent-soft, rgba(47, 111, 208, .12));
    color: var(--shell-text, #1c2430);
    border-color: var(--shell-border, #d8dee7);
}

/* Why the form below is read-only. */
.bpb-lock[b-cncakv7do0] {
    margin: 0;
    padding: 0.5rem 0.7rem;
    border-left: 3px solid var(--shell-status-warn-border, #f0cf9a);
    background: var(--shell-status-warn-bg, #fff4e0);
    color: var(--shell-status-warn-text, #7a4b00);
    border-radius: 0 5px 5px 0;
    font-size: 0.83rem;
}

.bpb-statusline[b-cncakv7do0] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.bpb-statusline .e-icons[b-cncakv7do0] {
    font-size: 0.8rem;
    color: var(--shell-accent, #2f6fd0);
}

/* -- Additional pay-head entries -----------------------------------------
   Cell editors are visibly bordered AT REST, not transparent-until-focus:
   an operator should see where the typing goes before clicking. */
.bpb-extras__intro[b-cncakv7do0] { margin: 0 0 0.5rem; }

/* Add sits ABOVE the grid - the action that makes a row belongs before the
   rows, not under the totals. */
.bpb-extras__head[b-cncakv7do0] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0 0 0.4rem;
}

.bpb-extras__foot[b-cncakv7do0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.5rem 0 0.2rem;
}

.bpb-extragrid .e-rowcell[b-cncakv7do0] {
    padding: 4px 6px;
}

.bpb-cell[b-cncakv7do0] {
    width: 100%;
    min-width: 0;
}

.bpb-cell--num input[b-cncakv7do0] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bpb-rownum[b-cncakv7do0] {
    font-variant-numeric: tabular-nums;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* ── Projected register ──────────────────────────────────────────────────
   A projection must never be mistakable for the real register - on screen or
   on paper. The banner is INSIDE the printed element so it travels; the
   watermark is screen-only decoration on top of that. */
.bpb-projected-banner[b-cncakv7do0] {
    border: 2px dashed var(--shell-status-warn-text, #7a4b00);
    background: var(--shell-status-warn-bg, #fdf3e0);
    color: var(--shell-status-warn-text, #7a4b00);
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.45rem 0.75rem;
    margin-bottom: 0.6rem;
    text-align: center;
}

.bpb-registerscroll--projected[b-cncakv7do0] { position: relative; }
.bpb-registerscroll--projected[b-cncakv7do0]::after {
    content: "PROJECTED";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: var(--shell-status-warn-text, #7a4b00);
    opacity: 0.07;
    transform: rotate(-24deg);
    pointer-events: none;
}

.bpb-projected-hint[b-cncakv7do0] {
    align-self: center;
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
    margin-right: auto;
}

/* ── Run progress ────────────────────────────────────────────────────────
   Fills as employees complete once the first poll lands; shimmers before
   that so the screen never looks hung, even in the first second. */
.bpb-progress[b-cncakv7do0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.4rem 0 0.2rem;
}

.bpb-progress__track[b-cncakv7do0] {
    flex: 1 1 auto;
    height: 10px;
    border-radius: 5px;
    background: var(--shell-border, #d8dee7);
    overflow: hidden;
    position: relative;
}

.bpb-progress__fill[b-cncakv7do0] {
    height: 100%;
    border-radius: 5px;
    background: var(--shell-accent, #2f6fd0);
    transition: width 0.6s ease;
}

.bpb-progress__fill--indeterminate[b-cncakv7do0] {
    position: absolute;
    width: 30%;
    animation: bpb-progress-slide-b-cncakv7do0 1.2s ease-in-out infinite;
}

@keyframes bpb-progress-slide-b-cncakv7do0 {
    0%   { left: -30%; }
    100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .bpb-progress__fill--indeterminate[b-cncakv7do0] { animation: none; left: 0; width: 100%; opacity: 0.4; }
}

.bpb-progress__text[b-cncakv7do0] {
    flex: 0 0 auto;
    max-width: 55%;
    font-size: 0.82rem;
    color: var(--shell-text-secondary, #5b6a7d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

/* ── Bills-grid footer ─────────────────────────────────────────────────── */
.bpb-agg-label[b-cncakv7do0] {
    font-size: 0.78rem;
    color: var(--shell-text-secondary, #5b6a7d);
    white-space: nowrap;
}

.bpb-agg-sum[b-cncakv7do0] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* /Pages/Transactions/Claims/EmployeeClaimApprovalsPage.razor.rz.scp.css */
/* Employee Claim Approvals — page-specific layout only (shell pieces are global). */

.eca[b-9ozfbgav21] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.eca__shell[b-9ozfbgav21] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.eca__toolbar[b-9ozfbgav21] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.eca__panel[b-9ozfbgav21] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.eca-filters[b-9ozfbgav21] {
    display: grid;
    grid-template-columns: 0.6fr 1.6fr 0.8fr 0.8fr;
    gap: 0.35rem 1rem;
    align-items: end;
}

@media (max-width: 980px) {
    .eca-filters[b-9ozfbgav21] {
        grid-template-columns: 1fr 1fr;
    }
}

.eca-field[b-9ozfbgav21] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.eca-switch[b-9ozfbgav21] {
    padding-bottom: 1.6rem;
}

.eca-empinfo[b-9ozfbgav21] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    margin: 0;
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.eca-empinfo em[b-9ozfbgav21] {
    font-style: normal;
    font-weight: 600;
    margin-right: 0.3rem;
    color: var(--shell-text, #1f2a37);
}

.eca-inactive[b-9ozfbgav21] {
    color: var(--shell-warning, #b7791f);
    font-weight: 600;
}

.eca-gridwrap[b-9ozfbgav21] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.eca-placeholder[b-9ozfbgav21] {
    margin: 0.6rem 0;
    font-size: 0.86rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.eca-totals[b-9ozfbgav21] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.3rem;
    margin: 0;
    padding: 0.45rem 0.7rem;
    border-radius: 6px;
    font-size: 0.8rem;
    background: var(--shell-surface-muted, rgba(0, 0, 0, 0.04));
}

.eca-totals em[b-9ozfbgav21] {
    font-style: normal;
    font-weight: 600;
    margin-right: 0.3rem;
}

.eca-totals__note[b-9ozfbgav21] {
    margin-left: auto;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* Row tints: an unsaved tick, a frozen day (attendance generated), a day
   with a single punch (missing In or Out). */
.eca[b-9ozfbgav21]  .eca-row--dirty td {
    background: rgba(255, 193, 7, 0.12);
}

.eca[b-9ozfbgav21]  .eca-row--frozen td {
    color: var(--shell-text-secondary, #5b6a7d);
}

.eca[b-9ozfbgav21]  .eca-row--single td {
    background: rgba(220, 53, 69, 0.07);
}

.eca-cancel[b-9ozfbgav21] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.2rem 0.1rem 0.4rem;
}

.eca-cancel__what[b-9ozfbgav21] {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
}

.eca-cancel__actions[b-9ozfbgav21] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.3rem;
}

.eca__redirect[b-9ozfbgav21] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.eca__body[b-9ozfbgav21] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.eca-filters[b-9ozfbgav21] {
    grid-template-columns: 0.8fr 0.8fr 0.8fr;
}

.eca[b-9ozfbgav21]  .eca-row--cancelled td {
    color: var(--shell-danger, #c0392b);
}

.eca[b-9ozfbgav21]  .eca-row--approved td {
    color: var(--shell-success, #1e7e34);
}

/* The status editor is visibly bordered at rest (editable-grid convention). */

.eca-agg[b-9ozfbgav21] {
    font-weight: 600;
}

.eca-filters[b-9ozfbgav21] {
    grid-template-columns: 0.7fr 0.7fr 1.4fr 0.8fr;
}

.eca[b-9ozfbgav21]  .eca-row--refused td { color: var(--shell-danger, #c0392b); }
.eca[b-9ozfbgav21]  .eca-row--hold td { color: var(--shell-warning, #b7791f); }
.eca[b-9ozfbgav21]  .eca-row--altered td { background: rgba(255, 193, 7, 0.08); }
/* /Pages/Transactions/Claims/EmployeeClaimPage.razor.rz.scp.css */
/* Employee Claim Request — page-specific layout only (shell pieces are global). */

.ecl[b-sck5r0t1nj] { display: flex; flex-direction: column; height: 100%; }
.ecl__shell[b-sck5r0t1nj] { display: flex; flex-direction: column; min-height: 0; height: 100%; }

.ecl__toolbar[b-sck5r0t1nj] { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.ecl__toolbar-gap[b-sck5r0t1nj] { flex: 0 0 0.6rem; }

.ecl__panel[b-sck5r0t1nj] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ecl-header[b-sck5r0t1nj] { display: flex; flex-direction: column; gap: 0.5rem; }

.ecl-grid2[b-sck5r0t1nj],
.ecl-grid4[b-sck5r0t1nj] { display: grid; gap: 0.35rem 1rem; align-items: start; }
.ecl-grid2[b-sck5r0t1nj] { grid-template-columns: 1fr 1.3fr; }
.ecl-grid4[b-sck5r0t1nj] { grid-template-columns: 0.5fr 1fr 0.8fr 1fr; }

@media (max-width: 980px) {
    .ecl-grid4[b-sck5r0t1nj] { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .ecl-grid2[b-sck5r0t1nj], .ecl-grid4[b-sck5r0t1nj] { grid-template-columns: 1fr; }
}

.ecl-field[b-sck5r0t1nj] { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.ecl-audit[b-sck5r0t1nj] {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--shell-text-secondary, #5b6a7d);
}

.ecl-lines-head[b-sck5r0t1nj] { display: flex; align-items: center; gap: 0.8rem; }
.ecl-lines-head .prod-master__subhead[b-sck5r0t1nj] { margin: 0; }
.ecl-lines-count[b-sck5r0t1nj] { font-size: 0.8rem; color: var(--shell-text-secondary, #5b6a7d); }

.ecl-gridwrap[b-sck5r0t1nj] { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.ecl-rownum[b-sck5r0t1nj] { display: block; text-align: right; color: var(--shell-text-secondary, #5b6a7d); }
.ecl-num[b-sck5r0t1nj] { display: block; text-align: right; }
.ecl-empty[b-sck5r0t1nj] { margin: 0; font-size: 0.82rem; color: var(--shell-text-secondary, #5b6a7d); }

/* Cell editors visibly bordered at rest (editable-grid convention). */
.ecl[b-sck5r0t1nj]  .ecl-cell .e-input-group {
    border: 1px solid var(--shell-border, #c9d2dd) !important;
    border-radius: 4px;
    background: var(--shell-surface, #fff);
}
.ecl[b-sck5r0t1nj]  .ecl-cell--num input { text-align: right; }
.ecl[b-sck5r0t1nj]  .ecl-rowbtn { min-width: 0; padding: 0.15rem 0.4rem; }

.ecl[b-sck5r0t1nj]  .ecl-row--approved td { background: rgba(30, 126, 52, 0.07); }
.ecl[b-sck5r0t1nj]  .ecl-row--refused td { background: rgba(192, 57, 43, 0.06); }

.ecl[b-sck5r0t1nj]  .app-mc-row--inactive span { color: var(--shell-warning, #b7791f); }

.ecl__redirect[b-sck5r0t1nj] { margin: 1rem; font-size: 0.9rem; color: var(--shell-text-secondary, #5b6a7d); }
.ecl__body[b-sck5r0t1nj] { display: flex; gap: 1rem; align-items: stretch; min-height: 0; }

/* ── Print (cloned into the print iframe by printElementById) ── */
.ecl-print[b-sck5r0t1nj] { font-family: "Segoe UI", Helvetica, Arial, sans-serif; color: #111; font-size: 11px; }
.ecl-print__head[b-sck5r0t1nj] { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.ecl-print__head td[b-sck5r0t1nj] { border: 1px solid #ccc; padding: 4px 6px; vertical-align: top; width: 25%; }
.ecl-print__head span[b-sck5r0t1nj] { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: #666; }
.ecl-print__head strong[b-sck5r0t1nj] { font-size: 11px; }
.ecl-print__narr[b-sck5r0t1nj] { margin: 0 0 6px; font-size: 11px; }
.ecl-print__lines[b-sck5r0t1nj] { width: 100%; border-collapse: collapse; }
.ecl-print__lines th[b-sck5r0t1nj],
.ecl-print__lines td[b-sck5r0t1nj] { border: 1px solid #ccc; padding: 3px 6px; text-align: left; white-space: normal; word-wrap: break-word; }
.ecl-print__lines th[b-sck5r0t1nj] { background: #f0f0f0; font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; }
.ecl-print__lines tfoot td[b-sck5r0t1nj] { font-weight: 700; background: #f7f7f7; }
.ecl-print__num[b-sck5r0t1nj] { text-align: right; }
.ecl-print__no[b-sck5r0t1nj] { width: 30px; text-align: right; }
.ecl-print__sign[b-sck5r0t1nj] { width: 100%; border-collapse: collapse; margin-top: 36px; }
.ecl-print__sign td[b-sck5r0t1nj] { width: 33%; border-top: 1px solid #333; padding-top: 4px; text-align: center; font-size: 10px; }
/* /Pages/Transactions/CreditApprovalsPage.razor.rz.scp.css */
/* The board takes the leftover width beside the help aside (the global
   .master-body:has(> .ct-page__help) rule turns the body into a flex row;
   this is the content half of that bargain). */
.cra-page .cra-main[b-s94khy3tpx] {
    flex: 1 1 auto;
    min-width: 0;
}

.cra-page .cra-tablewrap[b-s94khy3tpx] {
    overflow-x: auto;
    border: 1px solid var(--shell-border, #d8dee8);
    border-radius: 8px;
    background: var(--shell-surface, #fff);
}

.cra-table[b-s94khy3tpx] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.cra-table th[b-s94khy3tpx] {
    background: var(--shell-surface-2, #f3f5f9);
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--shell-border, #d8dee8);
    white-space: normal;
    font-size: 0.72rem;
}

.cra-table td[b-s94khy3tpx] {
    padding: 8px 10px;
    border-bottom: 1px solid var(--shell-border-soft, #e8ecf2);
    vertical-align: top;
}

.cra-table th.num[b-s94khy3tpx],
.cra-table td.num[b-s94khy3tpx] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Status tints. TRANSLUCENT on purpose: they sit on the theme's own ground,
   so the row text keeps whatever colour the theme gives it and stays readable
   in light, dark and high-contrast alike - a solid pastel would put light text
   on a light block in dark mode. Each carries a solid edge on the first cell so
   the state still reads where a tint is faint (a projector, a dim screen).

   Pending      amber   - waiting for somebody: the rows that need attention
   Approved     green   - a live grant
   Exhausted    indigo  - a grant that has run its course; history, not work
   Cancelled /
   Rejected     red     - the app-wide dead-end colour */
.cra-row--pending td[b-s94khy3tpx]   { background: rgba(245, 158, 11, 0.18); }
.cra-row--approved td[b-s94khy3tpx]  { background: rgba(40, 167, 69, 0.10); }
.cra-row--exhausted td[b-s94khy3tpx] { background: rgba(99, 102, 241, 0.12); }
.cra-row--cancelled td[b-s94khy3tpx] { background: rgba(220, 38, 38, 0.13); }

.cra-row--pending td:first-child[b-s94khy3tpx]   { box-shadow: inset 4px 0 0 #d97706; }
.cra-row--approved td:first-child[b-s94khy3tpx]  { box-shadow: inset 4px 0 0 #2f9e55; }
.cra-row--exhausted td:first-child[b-s94khy3tpx] { box-shadow: inset 4px 0 0 #6366f1; }
.cra-row--cancelled td:first-child[b-s94khy3tpx] { box-shadow: inset 4px 0 0 #dc2626; }

/* Unanswered work should not need reading to be found. */
.cra-row--pending td:nth-child(3)[b-s94khy3tpx] { font-weight: 700; }

.cra-remarks[b-s94khy3tpx] { max-width: 220px; }

.cra-actions[b-s94khy3tpx] { white-space: nowrap; }
.cra-actions[b-s94khy3tpx]  .e-btn { margin-inline-end: 4px; }

.cra-empty[b-s94khy3tpx] {
    text-align: center;
    color: var(--shell-muted, #8a93a3);
    padding: 24px;
}

.cra-notinstalled[b-s94khy3tpx] {
    border: 1px dashed var(--shell-border, #d8dee8);
    border-radius: 8px;
    padding: 18px 22px;
    color: var(--shell-muted, #55607a);
}

.cra-status[b-s94khy3tpx] { color: var(--shell-muted, #55607a); }

.cra-decide label[b-s94khy3tpx] { display: block; margin-top: 0.6rem; font-size: 0.85rem; }
.cra-decide input[b-s94khy3tpx] { margin-top: 0.2rem; }

.cra-hint[b-s94khy3tpx] {
    font-size: 0.78rem;
    color: var(--shell-muted, #8a93a3);
    margin: 0.25rem 0 0;
}

/* The party moved between request and decision - the approver is granting a
   different figure from the one asked for, so say so rather than silently
   changing the number under them. */
.cra-decide__moved[b-s94khy3tpx] {
    margin-top: 0.6rem;
    padding: 0.45rem 0.6rem;
    border-left: 3px solid #d08700;
    border-radius: 3px;
    background: var(--shell-app-background, rgba(208, 135, 0, 0.08));
    font-size: 0.82rem;
}

/* The row a notification pointed at. An accent bar and a lift off the ground -
   never a colour that competes with the status colours already on this row,
   because "which ticket you clicked" and "what state it is in" are two
   different things and the second one matters more. */
tr.cra-row--focus > td[b-s94khy3tpx] {
    /* No background of its own: it would paint over the status tint, and the
       state of the ticket you followed an alert to is the thing you came for. */
    box-shadow: inset 0 1px 0 var(--shell-button-primary, #0f6f74),
                inset 0 -1px 0 var(--shell-button-primary, #0f6f74);
}
tr.cra-row--focus > td:first-child[b-s94khy3tpx] {
    box-shadow: inset 4px 0 0 var(--shell-button-primary, #0f6f74),
                inset 0 1px 0 var(--shell-button-primary, #0f6f74),
                inset 0 -1px 0 var(--shell-button-primary, #0f6f74);
}

/* ── The picked party's credit position, in the raise dialog ──────────────
   Theme tokens throughout: the dialog paints on the theme's own panel, and a
   hard white box would glare in dark mode. Figures right-aligned and tabular,
   the house numeric rule. */
.cra-credit[b-s94khy3tpx] {
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--shell-border, #d8dee8);
    border-radius: 6px;
    background: var(--shell-item-background-subtle, rgba(127, 127, 127, 0.05));
    font-size: 0.84rem;
}
.cra-credit__head[b-s94khy3tpx] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.cra-credit__cat[b-s94khy3tpx] {
    font-size: 0.74rem;
    color: var(--shell-muted, #6a7381);
}
.cra-credit__grid[b-s94khy3tpx] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 1rem;
    margin: 0;
}
.cra-credit__grid dt[b-s94khy3tpx] {
    color: var(--shell-muted, #55607a);
    font-weight: 500;
}
.cra-credit__grid dd[b-s94khy3tpx] {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.cra-credit__sub[b-s94khy3tpx] {
    display: block;
    font-size: 0.74rem;
    color: var(--shell-muted, #6a7381);
}
.cra-credit__ok[b-s94khy3tpx]   { color: var(--shell-status-success-text, #1d6b37); font-weight: 600; }
.cra-credit__over[b-s94khy3tpx] { color: var(--shell-status-error-text, #b3261e); font-weight: 700; }
.cra-credit__warn[b-s94khy3tpx],
.cra-credit__note[b-s94khy3tpx] {
    margin: 0.45rem 0 0;
    padding: 0.35rem 0.5rem;
    border-radius: 3px;
    font-size: 0.8rem;
}
.cra-credit__warn[b-s94khy3tpx] { border-left: 3px solid #dc2626; background: rgba(220, 38, 38, 0.08); }
.cra-credit__note[b-s94khy3tpx] { border-left: 3px solid #d97706; background: rgba(245, 158, 11, 0.10); }
/* /Pages/Transactions/InventoryTransactionPage.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   InventoryTransactionPage – Theme-Aware Modern Design
   ══════════════════════════════════════════════════════════ */

/* ── Page Shell ── */
.inv-page[b-a9ybu40oe8] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0;
    overflow: hidden;
    position: relative;
}

/* Boot cover — hides the page until it knows whether it is the classic
   screen or the POS terminal. Opaque and above everything inside .inv-page
   (which is position:relative), so nothing underneath is ever seen. */
.inv-page__boot[b-a9ybu40oe8] {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--shell-app-background, #f4f6fa);
}

.inv-page__boot-spin[b-a9ybu40oe8] {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 3px solid var(--shell-border, rgba(0, 0, 0, 0.14));
    border-top-color: #17a065;
    animation: inv-page-boot-spin-b-a9ybu40oe8 0.7s linear infinite;
}

@keyframes inv-page-boot-spin-b-a9ybu40oe8 { to { transform: rotate(360deg); } }

/* Respect a reduced-motion preference: hold the ring still rather than
   spinning it. The cover still does its job. */
@media (prefers-reduced-motion: reduce) {
    .inv-page__boot-spin[b-a9ybu40oe8] { animation: none; }
}

/* ── Hero Header ── */
/* Deliberately shallow: this strip is a label, not a landing banner, and
   every pixel it takes is a pixel off the item grid — which is the part of
   the screen the operator actually works in. The title block runs on ONE
   line (see .inv-page__header-copy) so the meta cards, not the copy, set
   the height; padding is trimmed to the point where the cards still have
   breathing room against the edge. */
.inv-page__header[b-a9ybu40oe8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.85rem;
    padding: 0.3rem 0.75rem;
    background: var(--shell-hero-background);
    color: var(--shell-text-inverse);
    box-shadow: var(--shell-shadow-strong);
    flex: 0 0 auto;
    transition: background 0.3s ease;
}

.inv-page__header--saving[b-a9ybu40oe8] {
    animation: inv-pulse-b-a9ybu40oe8 1.8s ease-in-out infinite;
}

@keyframes inv-pulse-b-a9ybu40oe8 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.88; }
}

/* Caption above title, as it reads best — and at these font sizes it is
   FREE: the stack comes to ~32px, still under the meta cards' ~34.6px, so
   the cards remain what sets the strip's height and nothing is paid for
   the second line. (It was the OLD sizes that made stacking expensive: a
   1.6rem title and a third row took the block to ~49px, well past the
   cards.) The voucher number stays inline with the title rather than
   taking a third row.
   min-width:0 keeps the h1's ellipsis working when the voucher name is
   long and the meta strip is competing for width. */
.inv-page__header-copy[b-a9ybu40oe8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    flex: 0 1 auto;
    min-width: 0;
}

/* Title + voucher number share the second row. */
.inv-page__header-titleline[b-a9ybu40oe8] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.45rem;
    min-width: 0;
    max-width: 100%;
}

.inv-page__eyebrow[b-a9ybu40oe8] {
    margin: 0;
    font-size: 0.58rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.72;
    /* Never squeezed and never wrapped — it is a fixed caption, so any
       width pressure is taken by the title's ellipsis instead. */
    flex: 0 0 auto;
    white-space: nowrap;
}

.inv-page__header h1[b-a9ybu40oe8] {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.inv-page__header-vchno[b-a9ybu40oe8] {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.75;
    letter-spacing: 0.03em;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ── Header Meta Cards ──
   7-8 cards laid out on ONE row (no wrap). Each card shrinks to fit the
   available width via flex: 1 1 0 with min-width: 0 so its ellipsis can
   engage when content overflows. The Voucher Amount card grows a bit
   more to keep the number readable. */
.inv-page__header-meta[b-a9ybu40oe8] {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* Label stays ABOVE the value rather than beside it. Side by side would be
   shorter still, but with seven cards on one row it costs width the values
   do not have to spare — "DEMO COMPANY" and the amount would ellipsis away.
   Height instead comes from tighter padding and line-heights: the two lines
   are now set solid enough that the card is ~28px rather than ~37px. */
.inv-page__meta-card[b-a9ybu40oe8] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 0.2rem 0.45rem;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 0.45rem;
    background: rgba(255,255,255,0.08);
    min-width: 0;
}

.inv-page__meta-card span[b-a9ybu40oe8] {
    font-size: 0.54rem;
    line-height: 1.15;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-page__meta-card strong[b-a9ybu40oe8] {
    font-size: 0.78rem;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Clickable meta-card (currently the Status card in View mode).
   Differentiated three ways so the affordance reads without hover:
     1. Amber-tinted background that sits clearly above the neutral cards
     2. A left accent stripe drawn with an inset box-shadow
     3. An edit-pencil hint glyph next to the value (rendered in the
        razor markup as .inv-page__meta-card__hint)
   On hover the tint deepens and the card lifts; on press it sinks. */
.inv-page__meta-card--clickable[b-a9ybu40oe8] {
    cursor: pointer;
    background: rgba(245, 158, 11, 0.22);          /* amber-500 @ 22% */
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow: inset 3px 0 0 0 rgba(252, 211, 77, 0.95);
    transition: background 0.2s ease, border-color 0.2s ease,
                transform 0.15s ease, box-shadow 0.2s ease;
}

.inv-page__meta-card--clickable:hover[b-a9ybu40oe8] {
    background: rgba(245, 158, 11, 0.34);
    border-color: rgba(252, 211, 77, 0.85);
    box-shadow: inset 3px 0 0 0 #fde68a,
                0 4px 14px -6px rgba(245, 158, 11, 0.55);
    transform: translateY(-1px);
}

.inv-page__meta-card--clickable:active[b-a9ybu40oe8] {
    transform: translateY(0);
    background: rgba(245, 158, 11, 0.40);
    box-shadow: inset 3px 0 0 0 #fde68a;
}

/* ── Items-grid Prod_Cat cell ────────────────────────────────────────
   Stock-group cell renders as plain text when read-only and as a
   click-to-pick chip when the page is editing AND the row's product
   has bProdCat enabled. The chip styling stays subtle so the grid
   doesn't look "busy" when several rows have stock groups. */
.inv-prodcat-cell[b-a9ybu40oe8] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-prodcat-cell--clickable[b-a9ybu40oe8] {
    cursor: pointer;
    padding: 0.1rem 0.45rem;
    border-radius: 0.55rem;
    border: 1px dashed color-mix(in srgb, var(--shell-button-primary) 45%, transparent);
    background: color-mix(in srgb, var(--shell-button-primary) 8%, transparent);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.inv-prodcat-cell--clickable:hover[b-a9ybu40oe8] {
    background: color-mix(in srgb, var(--shell-button-primary) 16%, transparent);
    border-color: color-mix(in srgb, var(--shell-button-primary) 70%, transparent);
}

.inv-prodcat-cell__icon[b-a9ybu40oe8] {
    font-size: 0.6rem;
    opacity: 0.7;
    flex: 0 0 auto;
}

.inv-prodcat-cell--clickable:hover .inv-prodcat-cell__icon[b-a9ybu40oe8] {
    opacity: 1;
}


/* ── Entry-panel Prod_Cat multi-column combobox ─────────────────────
   Replaces the plain text input for the stock-group field with a
   5-column dropdown: Prod_Cat / Created / Expiry / Price / MRP.
   Column widths are kept in sync between the header and item rows
   via the --name / --date / --num modifiers below — change one and
   the other lines up automatically. */
.inv-prodcat-combo__header[b-a9ybu40oe8],
.inv-prodcat-combo__row[b-a9ybu40oe8] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.18rem 0.55rem;
    width: 100%;
}

.inv-prodcat-combo__header[b-a9ybu40oe8] {
    font-weight: 700;
    background: color-mix(in srgb, var(--shell-button-primary) 10%, var(--shell-panel-background-soft));
    border-bottom: 1px solid var(--shell-border);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--shell-text-secondary, #666);
}

.inv-prodcat-combo__row[b-a9ybu40oe8] {
    font-size: 0.82rem;
}

.inv-prodcat-combo__col[b-a9ybu40oe8] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inv-prodcat-combo__col--name[b-a9ybu40oe8] {
    flex: 0 0 28%;
}

.inv-prodcat-combo__col--date[b-a9ybu40oe8] {
    flex: 0 0 16%;
    color: var(--shell-text-secondary, #666);
}

.inv-prodcat-combo__col--num[b-a9ybu40oe8] {
    flex: 0 0 18%;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Edit-pencil hint glyph — sits to the right of the status value,
   muted so it doesn't compete with the value itself. Brightens on
   hover to confirm the card is the click target. */
.inv-page__meta-card__hint[b-a9ybu40oe8] {
    font-size: 0.6rem;
    margin-left: 0.25rem;
    opacity: 0.75;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.inv-page__meta-card--clickable:hover .inv-page__meta-card__hint[b-a9ybu40oe8] {
    opacity: 1;
    transform: scale(1.1);
}

/* Customer card in force — the classic screen's copy of the POS terminal's
   chip, sitting in the toolbar beside Apply Card. Same violet fill and
   shape on purpose: it is the same fact about the voucher, so it should
   look the same wherever the operator happens to be working. Filled rather
   than outlined because, unlike the buttons around it, this is STATE and
   not something to press. Sized a little smaller to sit level with the
   toolbar buttons rather than the terminal's 48px touch targets. */
.inv-page__cardchip[b-a9ybu40oe8] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    height: 30px;
    padding: 0 0.25rem 0 0.6rem;
    border-radius: 999px;
    background: #4c2a86;
    color: #f1e7ff;
    font-size: 0.74rem; font-weight: 700;
    max-width: 300px;
    flex: 0 0 auto;
}

.inv-page__cardchip-icon[b-a9ybu40oe8] { font-size: 0.82rem; flex: 0 0 auto; }

.inv-page__cardchip-text[b-a9ybu40oe8] {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
}

.inv-page__cardchip-x[b-a9ybu40oe8] {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: transparent; color: inherit;
    font-size: 0.64rem; cursor: pointer; opacity: 0.75;
}

.inv-page__cardchip-x:hover[b-a9ybu40oe8] { background: rgba(255, 255, 255, 0.22); opacity: 1; }

.inv-page__meta-card--amount[b-a9ybu40oe8] {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.3);
    flex: 1.3 1 0;   /* a little extra room so big amounts don't ellipsize */
}

/* The amount is the one value worth keeping bigger than its neighbours,
   but it also sets the tallest line in the strip — so it stays only
   slightly ahead of the rest rather than a full notch. */
.inv-page__meta-card--amount strong[b-a9ybu40oe8] {
    font-size: 0.85rem;
    letter-spacing: -0.01em;
}

/* Branch names are typically the longest free-text label in this row
   (e.g. "Head Office - Mumbai"), and they're informational — not a
   primary data point. Drop the font another notch so the full name
   has the best chance of fitting without ellipsis. */
.inv-page__meta-card--branch strong[b-a9ybu40oe8] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0;
}

/* ── Mode meta-card icon ─────────────────────────────────────────────
   The mode card pairs RowStateDisplay with a Syncfusion glyph (RowStateIcon).
   The icon sits in a tinted pill to its left so the eye picks up the row
   state at a glance — green for Add, amber for Modify, blue spinner for
   Saving, neutral for View. */
.inv-page__meta-card strong[b-a9ybu40oe8] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* Sized just under the value's line box. At 1.05rem the pill was TALLER
   than the text beside it and became what set the card's height, so the
   whole strip paid for it — now the text governs and the pill fits inside. */
.inv-page__meta-icon[b-a9ybu40oe8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.88rem;
    height: 0.88rem;
    border-radius: 999px;
    font-size: 0.55rem;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.28);
    flex: 0 0 auto;
}

.inv-page__meta-card--mode-add .inv-page__meta-icon[b-a9ybu40oe8] {
    background: rgba(34, 197, 94, 0.28);  /* emerald-500 @ 28% */
    border-color: rgba(34, 197, 94, 0.55);
    color: #ecfdf5;
}

.inv-page__meta-card--mode-modify .inv-page__meta-icon[b-a9ybu40oe8] {
    background: rgba(249, 168, 37, 0.30); /* amber-500 @ 30% */
    border-color: rgba(249, 168, 37, 0.55);
    color: #fff7ed;
}

.inv-page__meta-card--mode-saving .inv-page__meta-icon[b-a9ybu40oe8] {
    background: rgba(59, 130, 246, 0.30); /* blue-500 @ 30% */
    border-color: rgba(59, 130, 246, 0.55);
    color: #eff6ff;
}

.inv-page__meta-card--mode-unchanged .inv-page__meta-icon[b-a9ybu40oe8] {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.32);
    color: #ffffff;
}

/* Posting Status — emerald for Posted, muted slate for Unposted.
   Keeps the same pill shape as the Mode icon for visual consistency. */
.inv-page__meta-card--posting-posted .inv-page__meta-icon[b-a9ybu40oe8] {
    background: rgba(34, 197, 94, 0.28);
    border-color: rgba(34, 197, 94, 0.55);
    color: #ecfdf5;
}

.inv-page__meta-card--posting-unposted .inv-page__meta-icon[b-a9ybu40oe8] {
    background: rgba(148, 163, 184, 0.28); /* slate-400 @ 28% */
    border-color: rgba(148, 163, 184, 0.50);
    color: #f1f5f9;
}

/* Branch / Created By — neutral metadata, lighter pill so the card
   reads as informational rather than state-indicating. */
.inv-page__meta-card--neutral .inv-page__meta-icon[b-a9ybu40oe8] {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.24);
    color: #ffffff;
}

/* Saving spinner — keep it subtle so it doesn't draw the eye away from
   the rest of the header while a request is in flight. */
.inv-page__meta-icon--spin[b-a9ybu40oe8] {
    animation: inv-page-spin-b-a9ybu40oe8 0.9s linear infinite;
}

@keyframes inv-page-spin-b-a9ybu40oe8 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Status card while NOT in view mode — neutered click affordance.
   Cursor stays default, hover does nothing, and the card dims slightly
   to communicate "not available right now". */
.inv-page__meta-card--disabled[b-a9ybu40oe8] {
    cursor: not-allowed;
    opacity: 0.55;
}

/* ── Status Message ── */
.inv-page__message[b-a9ybu40oe8] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    font-size: 0.82rem;
    font-weight: 600;
    flex: 0 0 auto;
}

.inv-page__message .e-icons[b-a9ybu40oe8] {
    font-size: 0.92rem;
    flex: 0 0 auto;
    margin-top: 0.1rem;
}

/* A long save error (trigger messages quote amounts, voucher numbers and the
   transaction class) WRAPS onto further lines instead of clipping at the
   page edge — the flex text cell must be allowed to shrink for that. */
.inv-page__message span:last-child[b-a9ybu40oe8] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.inv-page__message--info[b-a9ybu40oe8] {
    background: color-mix(in srgb, var(--shell-button-primary) 10%, var(--shell-panel-background-soft) 90%);
    color: var(--shell-button-primary);
    border-bottom: 2px solid color-mix(in srgb, var(--shell-button-primary) 30%, transparent);
}

.inv-page__message--success[b-a9ybu40oe8] {
    background: color-mix(in srgb, #22c55e 10%, var(--shell-panel-background-soft) 90%);
    color: #16a34a;
    border-bottom: 2px solid color-mix(in srgb, #22c55e 30%, transparent);
}

.inv-page__message--warning[b-a9ybu40oe8] {
    background: color-mix(in srgb, #f59e0b 10%, var(--shell-panel-background-soft) 90%);
    color: #d97706;
    border-bottom: 2px solid color-mix(in srgb, #f59e0b 30%, transparent);
}

.inv-page__message--error[b-a9ybu40oe8] {
    background: color-mix(in srgb, var(--shell-error-border) 10%, var(--shell-panel-background-soft) 90%);
    color: var(--shell-error-text, #dc2626);
    border-bottom: 2px solid color-mix(in srgb, var(--shell-error-border) 30%, transparent);
}

/* ── Toolbar ── */
/* Thirteen buttons plus a picker have to share this row before it wraps to
   a second line, so the gap is kept small — the buttons are already visually
   separated by their own fills and borders, and a wide gap here buys nothing
   but a higher chance of wrapping. */
.inv-page__toolbar[b-a9ybu40oe8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.6rem;
    background: var(--shell-panel-background-soft);
    border-bottom: 1px solid var(--shell-border);
    flex: 0 0 auto;
}

/* Narrower and shorter: the horizontal padding was 0.85rem a side, which on
   thirteen buttons is ~9rem of pure air. The label still governs the width
   (white-space:nowrap), so nothing truncates — the buttons just stop
   carrying so much padding around it. The smaller radius keeps them
   looking deliberate rather than like shrunken pills. */
[b-a9ybu40oe8] .inv-page__toolbar-button.e-btn {
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.72rem;
    padding: 0.22rem 0.5rem;
    min-height: 27px;
    white-space: nowrap;
    transition: all 0.18s ease;
}

/* Syncfusion sets its own icon margin inside .e-btn; left alone it is wider
   than the gap now used between the icon and its label. */
[b-a9ybu40oe8] .inv-page__toolbar-button.e-btn .e-btn-icon {
    font-size: 0.8rem;
    margin-right: 0.25rem;
}

[b-a9ybu40oe8] .inv-page__toolbar-button.secondary-action.e-btn {
    background: var(--shell-button-secondary-bg);
    color: var(--shell-button-secondary-text);
    border: 1px solid var(--shell-button-secondary-border);
}

[b-a9ybu40oe8] .inv-page__toolbar-button.secondary-action.e-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--shell-button-secondary-bg) 86%, var(--shell-button-primary) 14%);
    color: var(--shell-button-secondary-text);
}

[b-a9ybu40oe8] .inv-page__toolbar-button.primary-action.e-btn {
    background: var(--shell-button-primary);
    color: #fff;
    border: none;
}

[b-a9ybu40oe8] .inv-page__toolbar-button.primary-action.e-btn:hover:not(:disabled) {
    background: var(--shell-button-primary-hover);
    color: #fff;
}

[b-a9ybu40oe8] .inv-page__toolbar-button.danger-action.e-btn {
    background: #b3261e;
    color: #fff;
    border: none;
}

[b-a9ybu40oe8] .inv-page__toolbar-button.danger-action.e-btn:hover:not(:disabled) {
    background: #d64238;
}

[b-a9ybu40oe8] .inv-page__toolbar-button.e-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

.inv-page__toolbar-button--end[b-a9ybu40oe8] {
    margin-left: auto;
}

/* Toolbar Price-Type picker — sized to fit the toolbar height alongside
   the action buttons. The wrapper carries the right-align (--end)
   modifier; the inner combo fills it. */
.inv-page__toolbar-pricetype[b-a9ybu40oe8] {
    width: 148px;
    display: inline-flex;
    align-items: center;
}

.inv-page__toolbar-pricetype__combo[b-a9ybu40oe8] {
    width: 100%;
}

/* ── Scrollable Body ── */
.inv-page__body[b-a9ybu40oe8] {
    /* Flex ROW now: left side is the scrollable main content, right side is
       the action rail. Overflow is moved to .inv-page__body-main so the rail
       stays docked while the content scrolls. */
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    background: var(--shell-page-background);
}

.inv-page__body-main[b-a9ybu40oe8] {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

/* ── Right-side Action Rail ─────────────────────────────────────────
   Fixed-width, vertically scrollable panel. Future voucher-level actions
   (view lookups, reports, exports, drill-downs) should be added here so
   they don't crowd the main toolbar. Buttons stack vertically with
   consistent sizing. */
.inv-page__action-rail[b-a9ybu40oe8] {
    flex: 0 0 210px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--shell-panel-background);
    border: 1px solid var(--shell-border);
    border-radius: 12px;
    box-shadow: var(--shell-shadow-subtle, 0 1px 3px rgba(0,0,0,0.05));
    overflow: hidden;
}

.inv-page__action-rail-head[b-a9ybu40oe8] {
    padding: 0.55rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--shell-text-secondary);
    border-bottom: 1px solid var(--shell-border);
    background: color-mix(in srgb, var(--shell-button-primary) 6%, var(--shell-panel-background));
    flex: 0 0 auto;
}

.inv-page__action-rail-scroll[b-a9ybu40oe8] {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.6rem;
}

[b-a9ybu40oe8] .inv-page__action-rail-button {
    width: 100%;
    min-height: 38px;
    justify-content: flex-start;
    padding: 0.45rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 0.55rem;
    background: var(--shell-panel-background-soft, var(--shell-panel-background));
    color: var(--shell-text-primary);
    border: 1px solid var(--shell-border);
    transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    /* Allow long labels (e.g. "Cost-Center Allocation") to wrap onto a second
       line instead of overflowing or getting clipped. Syncfusion's default
       SfButton style forces nowrap, so we override explicitly here. */
    white-space: normal;
    text-align: left;
    word-break: break-word;
}

/* Syncfusion wraps button content in an inner span — that span also inherits
   the theme's nowrap style and needs the same override. */
[b-a9ybu40oe8] .inv-page__action-rail-button .e-btn-icon + * ,
[b-a9ybu40oe8] .inv-page__action-rail-button > span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

[b-a9ybu40oe8] .inv-page__action-rail-button:hover:not([disabled]) {
    background: color-mix(in srgb, var(--shell-button-primary) 10%, var(--shell-panel-background));
    color: var(--shell-button-primary);
    box-shadow: 0 1px 4px rgba(13, 110, 253, 0.15);
}

[b-a9ybu40oe8] .inv-page__action-rail-button[disabled],
[b-a9ybu40oe8] .inv-page__action-rail-button.e-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Narrow screens: collapse the rail to a horizontal strip above the
   content so the grid keeps breathing room. Buttons sit side-by-side,
   horizontally scrollable if there are too many to fit.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .inv-page__body[b-a9ybu40oe8] {
        flex-direction: column;
    }

    /* Rail collapses to an auto-height horizontal strip above content. */
    .inv-page__action-rail[b-a9ybu40oe8] {
        flex: 0 0 auto;
        order: -1;
        height: auto;
        max-height: none;
    }

    /* Header strip + scroll strip stacked vertically (still column); the
       INNER scroll container then lays buttons out horizontally. */
    .inv-page__action-rail-scroll[b-a9ybu40oe8] {
        /* Don't try to fill remaining vertical space — there is none. Size
           to the button row and allow horizontal scrolling instead. */
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        overflow-y: visible;
        padding: 0.55rem 0.6rem;
        gap: 0.5rem;
    }

    [b-a9ybu40oe8] .inv-page__action-rail-button {
        /* Each button is intrinsically sized to its label and pinned — no
           stretching, no shrinking. min-height keeps the touch target
           comfortable on mobile. */
        flex: 0 0 auto;
        width: auto;
        min-height: 36px;
        padding: 0.4rem 0.85rem;
        white-space: nowrap;
    }
}

/* ── Form Panel ── */
.inv-page__panel[b-a9ybu40oe8] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--shell-border);
    border-radius: 1rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-primary);
}

.inv-page__panel-head[b-a9ybu40oe8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.9rem;
}

.inv-page__panel-eyebrow[b-a9ybu40oe8] {
    margin: 0;
    font-size: 0.6rem;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.inv-page__panel-head h2[b-a9ybu40oe8] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 800;
    color: var(--shell-text-primary);
}

.inv-page__record-badge[b-a9ybu40oe8] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--shell-pill-bg);
    color: var(--shell-pill-text);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* ── Form Grid ──
   FOUR columns rather than three. The panel is full-width, and at three
   columns a plain Sale left the third column of the second row empty while
   Narration took a whole row of its own below it — the fields fitted the
   width but not the rows. With four, a typical voucher lays out as:
       Voucher No | Ref. No | [Tran Date | Stk Date + Post-dated]
       Party      | Tran Class | Narration (half width, buttons beside)
   i.e. two rows instead of four. Configurations with the optional fields
   (Warehouse, Profit Centre, Employee, Currency, Exchange Rate, Linked
   Transaction) simply fit more per row for the same reason. */
.inv-page__form-grid[b-a9ybu40oe8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.55rem 0.7rem;
    align-items: end;
}

.inv-page__input[b-a9ybu40oe8] {
    width: 100%;
}

/* P1-13 lblPartyBalance: small bold figure under the party combo. */
.inv-page__party-balance[b-a9ybu40oe8] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: right;
    opacity: 0.8;
    color: var(--shell-text-primary, inherit);
    font-variant-numeric: tabular-nums;
}

.inv-page__input--span2[b-a9ybu40oe8] {
    grid-column: span 2;
}

/* The two dates plus the post-dated tick, on ONE line. Flex rather than a
   fixed grid because the stock-updation date is conditional — with it the
   two dates share the space, without it the single date simply takes more,
   and the tick keeps its natural width either way. */
.inv-page__date-pair[b-a9ybu40oe8] {
    grid-column: span 2;
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.inv-page__date-pair > div[b-a9ybu40oe8] {
    flex: 1 1 0;
    min-width: 0;
}

/* P1-18 post-dated tick, now BESIDE the transaction date rather than under
   it. Bottom-aligned so it sits on the same baseline as the date inputs
   rather than floating against their floating labels. */
[b-a9ybu40oe8] .inv-page__postdated {
    flex: 0 0 auto;
    margin-bottom: 0.3rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Narration: half the row, with its two buttons to the right of the box. */
.inv-page__input--narration[b-a9ybu40oe8] {
    grid-column: span 2;
}

.inv-page__narration-row[b-a9ybu40oe8] {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
}

/* Everything that ISN'T the button stack grows. Deliberately not written as
   `> .e-control-wrapper` — Syncfusion decides its own wrapper markup, and if
   it emits anything else the box would collapse to its content width instead
   of filling the cell. Matching by exclusion cannot miss. */
.inv-page__narration-row > *:not(.inv-page__narration-actions)[b-a9ybu40oe8] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Icon-only, stacked in the space beside the box. Kept short enough that the
   pair is no taller than the two-row textarea, so they ride along in the
   row's height rather than setting it. */
.inv-page__narration-actions[b-a9ybu40oe8] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 0 0 auto;
}

[b-a9ybu40oe8] .inv-page__narration-actions .e-btn {
    min-width: 28px;
    padding: 0.1rem 0.4rem;
    min-height: 22px;
    line-height: 1;
    border-radius: 0.4rem;
}

/* P1-14 price-history / stock info strip inside the raw entry panel. */
.inv-page__iteminfo[b-a9ybu40oe8] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    /* A line of its own, the full width of the panel, directly under the
       first field - which is Item Name, because the Sl. column is skipped in
       the entry panel. It wraps to a second line rather than being clipped. */
    flex: 1 0 100%;
    min-width: 0;
    margin-top: 0;
    border-top: 1px solid var(--shell-border, #d5dbe3);
    border-radius: 0 0 0.6rem 0.6rem;
    padding: 0.35rem 0.65rem;
    background: var(--shell-panel-background-soft, #f4f6f9);
    font-size: 0.76rem;
    color: var(--shell-text-primary, inherit);
}

.inv-page__iteminfo-group[b-a9ybu40oe8] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.inv-page__iteminfo-group strong[b-a9ybu40oe8] { font-variant-numeric: tabular-nums; }

.inv-page__iteminfo-title[b-a9ybu40oe8] {
    font-weight: 700;
    color: #8b2635;   /* legacy maroon item caption; readable on both themes */
}

.inv-page__iteminfo-cost[b-a9ybu40oe8],
.inv-page__iteminfo-cost strong[b-a9ybu40oe8] {
    color: #b23b3b;   /* legacy DarkRed cost figures */
}

.inv-page__iteminfo-actions[b-a9ybu40oe8] {
    margin-left: auto;
    display: flex;
    gap: 0.3rem;
    white-space: nowrap;
}

/* The buttons that moved out of the strip and in beside their own field.
   The empty label keeps them on the same baseline as the inputs either
   side; the field itself takes only the width its buttons need. */
.inv-page__edit-panel__field--companion[b-a9ybu40oe8] {
    min-width: 0 !important;
    width: auto !important;
    flex: 0 0 auto;
}

.inv-page__edit-panel__field--companion > label[b-a9ybu40oe8] {
    visibility: hidden;
}

.inv-page__field-companions[b-a9ybu40oe8] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    min-height: 32px;
}

.inv-page__field-companions .e-btn[b-a9ybu40oe8] {
    padding-inline: 0.45rem;
}

.inv-page__input--wide[b-a9ybu40oe8] {
    grid-column: 1 / -1;
}

/* ── Section (Items / Sundries / Accounting) ── */
.inv-page__section[b-a9ybu40oe8] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.8rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
}

/* The title row is a caption over a grid, so it is sized as one. Its own
   buttons set the height — the rule is to keep the padding under them
   rather than let it double the strip. */
.inv-page__section-head[b-a9ybu40oe8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid color-mix(in srgb, var(--shell-border) 60%, transparent);
}

.inv-page__section-title[b-a9ybu40oe8] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.inv-page__section-title .e-icons[b-a9ybu40oe8] {
    font-size: 0.88rem;
    color: var(--shell-button-primary);
    flex: 0 0 auto;
}

.inv-page__section-title h3[b-a9ybu40oe8] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.25;
    font-weight: 800;
    color: var(--shell-text-primary);
    white-space: nowrap;
}

/* The head's action buttons ride the same compact metrics as the toolbar's,
   so the strip is as tall as a button and no taller. */
[b-a9ybu40oe8] .inv-page__section-head .e-btn {
    font-size: 0.72rem;
    padding: 0.22rem 0.55rem;
    min-height: 26px;
    border-radius: 0.5rem;
}

[b-a9ybu40oe8] .inv-page__section-head .e-btn .e-btn-icon {
    font-size: 0.8rem;
    margin-right: 0.25rem;
}

.inv-page__section-badge[b-a9ybu40oe8] {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: var(--shell-pill-bg);
    color: var(--shell-pill-text);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Sundry amount cell — flex layout that places the numeric value on the
   left and the +/− type badge flush against the cell's right edge. The
   grid column itself is right-aligned, so width:100% lets the inner flex
   container span the full cell and `justify-content:flex-end` keeps the
   pair right-anchored even when the column is wider than the content. */
[b-a9ybu40oe8] .inv-sundry-amt-cell {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    gap: 8px;
}

[b-a9ybu40oe8] .inv-sundry-amt-cell__value {
    /* Tabular numerals keep decimals aligned across rows even with a
       trailing badge of varying glyph width. */
    font-variant-numeric: tabular-nums;
}

/* Sundry-row type indicator — small circular badge rendered alongside the
   amount value so the user can scan + (additive) vs - (deductive) at a
   glance instead of reading a separate Type column. Two states share the
   sizing/typography; only color shifts between the variants. */
[b-a9ybu40oe8] .inv-sundry-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
    color: #fff;
}

[b-a9ybu40oe8] .inv-sundry-type-badge--plus {
    background: #2e7d32; /* green 800 — additive (charge) */
}

[b-a9ybu40oe8] .inv-sundry-type-badge--minus {
    background: #c62828; /* red 800 — deductive (discount / less-side) */
}

.inv-page__section-actions[b-a9ybu40oe8] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
}

/* ── Tab Component ── */
[b-a9ybu40oe8] .inv-page__tabs.e-tab {
    background: transparent;
    border: none;
    box-shadow: none;
}

[b-a9ybu40oe8] .inv-page__tabs .e-tab-header {
    background: var(--shell-panel-background);
    border: 1px solid var(--shell-border);
    border-radius: 0.8rem 0.8rem 0 0;
    padding: 0.15rem 0.4rem 0;
}

/* Syncfusion pins a FIXED 42px height (and matching min-height) on five
   separate elements of the tab strip — the header, the items wrapper, each
   item, the tab wrap and the text wrap. Trimming padding alone changes
   nothing: any one of those left at 42px holds the whole strip open. All
   five are released here.
   `:not(.e-separator)` is carried on the item selector deliberately — the
   theme's own rule uses it, which lifts it to the same specificity as this
   one, and matching it keeps the outcome decided by load order (the scoped
   bundle is last in index.html) rather than by a tie this rule would lose.
   No !important anywhere in the theme's tab rules, so no need for one here. */
[b-a9ybu40oe8] .inv-page__tabs .e-tab-header,
[b-a9ybu40oe8] .inv-page__tabs .e-tab-header .e-toolbar-items,
[b-a9ybu40oe8] .inv-page__tabs .e-tab-header .e-toolbar-item:not(.e-separator),
[b-a9ybu40oe8] .inv-page__tabs .e-tab-header .e-toolbar-item .e-tab-wrap,
[b-a9ybu40oe8] .inv-page__tabs .e-tab-header .e-toolbar-item .e-text-wrap {
    height: auto;
    min-height: 0;
}

[b-a9ybu40oe8] .inv-page__tabs .e-tab-header .e-toolbar-item .e-tab-wrap {
    padding: 0.3rem 0.7rem;
    border-radius: 0.55rem 0.55rem 0 0;
    font-weight: 700;
    font-size: 0.76rem;
    color: var(--shell-text-secondary);
    transition: all 0.2s ease;
}

/* The tab's label and icon carry their own line-height/margins that keep the
   wrap taller than its padding implies. */
[b-a9ybu40oe8] .inv-page__tabs .e-tab-header .e-toolbar-item .e-tab-text {
    line-height: 1.25;
}

[b-a9ybu40oe8] .inv-page__tabs .e-tab-header .e-toolbar-item .e-tab-icon {
    font-size: 0.85rem;
    line-height: 1.25;
}

[b-a9ybu40oe8] .inv-page__tabs .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    color: var(--shell-button-primary);
    background: color-mix(in srgb, var(--shell-button-primary) 8%, transparent);
    border-bottom: 2px solid var(--shell-button-primary);
}

[b-a9ybu40oe8] .inv-page__tabs .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
    color: var(--shell-text-primary);
    background: color-mix(in srgb, var(--shell-button-primary) 5%, transparent);
}

[b-a9ybu40oe8] .inv-page__tabs .e-tab-header .e-indicator {
    display: none;
}

[b-a9ybu40oe8] .inv-page__tabs .e-content {
    background: transparent;
    border: none;
    padding: 0;
}

[b-a9ybu40oe8] .inv-page__tabs .e-content > .e-item {
    background: transparent;
    padding: 0;
}

/* ── BOM Selection Bar ──
   Lives inside the basic-details form grid as a full-width row right
   above Narration. Combo takes the flex space; Add + Refresh buttons
   hug the right. .inv-page__input--wide already gives the row full
   width inside the form-grid; this rule layers a flex layout on top
   so the three controls sit on a single line. */
.inv-page__bom-bar[b-a9ybu40oe8] {
    display: flex;
    align-items: end;
    gap: 0.5rem;
}

.inv-page__bom-bar__combo[b-a9ybu40oe8] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Lock Raw Materials toggle on the Finished Goods tab — sits in the
   section-actions row alongside the action buttons. SfSwitch + a small
   text label. The wrapper centres the two so they align with the
   neighbouring SfButton heights. */
.inv-page__fg-lock-toggle[b-a9ybu40oe8] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.6rem;
}

.inv-page__fg-lock-toggle__label[b-a9ybu40oe8] {
    font-size: 0.85rem;
    color: var(--shell-text-primary);
    user-select: none;
}

/* ── Tab Content Wrapper ── */
.inv-page__tab-content[b-a9ybu40oe8] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 0.75rem 0 0;
}

/* ── Flat Section (inside tabs, no outer card chrome) ── */
.inv-page__section--flat[b-a9ybu40oe8] {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0.5rem 0;
}

.inv-page__section--flat + .inv-page__section--flat[b-a9ybu40oe8] {
    border-top: 1px solid var(--shell-border);
    padding-top: 0.9rem;
}

/* ── Flat Summary Panel (inside tabs) ── */
.inv-page__summary-panel--flat[b-a9ybu40oe8] {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0.5rem 0;
}

/* ── Grid Styling ── */
[b-a9ybu40oe8] .inv-page__grid.e-grid {
    border-radius: 1rem;
    border: 1px solid var(--shell-border);
    background: var(--shell-contrast-surface-bg, var(--shell-panel-background));
    box-shadow: none;
    overflow: hidden;
}

[b-a9ybu40oe8] .inv-page__grid .e-gridheader {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    background: color-mix(in srgb, var(--shell-contrast-surface-bg, var(--shell-panel-background)) 90%, var(--shell-button-primary) 10%);
}

[b-a9ybu40oe8] .inv-page__grid .e-headercell {
    color: var(--shell-contrast-surface-text, var(--shell-text-primary));
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    line-height: 1.3;
    padding: 6px 4px !important;
}

[b-a9ybu40oe8] .inv-page__grid .e-headercell .e-headercelldiv {
    justify-content: center;
    text-align: center;
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
}

[b-a9ybu40oe8] .inv-page__grid .e-gridheader .e-columnheader {
    height: auto !important;
    min-height: 44px;
}

[b-a9ybu40oe8] .inv-page__grid .e-rowcell {
    color: var(--shell-contrast-surface-text, var(--shell-text-primary));
}

[b-a9ybu40oe8] .inv-page__grid .e-gridfooter {
    background: color-mix(in srgb, var(--shell-contrast-surface-bg, var(--shell-panel-background)) 84%, var(--shell-button-primary) 16%);
    border-top: 2px solid var(--shell-button-primary);
}

[b-a9ybu40oe8] .inv-page__grid .e-summaryrow {
    background: transparent;
}

[b-a9ybu40oe8] .inv-page__grid .e-summarycell {
    font-weight: 800;
    font-size: 0.84rem;
    color: var(--shell-text-primary);
}

[b-a9ybu40oe8] .inv-page__grid .e-gridfooter .e-summaryrow:last-child {
    background: color-mix(in srgb, var(--shell-contrast-surface-bg, var(--shell-panel-background)) 76%, var(--shell-button-primary) 24%);
}

/* ── Negative Stock / Warning Row ── */
[b-a9ybu40oe8] .inv-page__row--neg-stock,
[b-a9ybu40oe8] .inv-page__row--neg-stock td.e-rowcell {
    background-color: #d32f2f !important;
    color: #fff !important;
}

/* ── Summary Panel (Tax Breakup) ── */
.inv-page__summary-panel[b-a9ybu40oe8] {
    padding: 0.85rem 1rem;
    border: 1px solid var(--shell-border);
    border-radius: 1.35rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow);
}

.inv-page__summary-grid[b-a9ybu40oe8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.6rem;
}

.inv-page__summary-item[b-a9ybu40oe8] {
    display: grid;
    gap: 0.1rem;
    padding: 0.6rem 0.75rem;
    border-radius: 1rem;
    background: var(--shell-item-background-subtle, var(--shell-panel-background-soft));
    border: 1px solid var(--shell-border);
    text-align: right;
}

.inv-page__summary-item span[b-a9ybu40oe8] {
    color: var(--shell-text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.inv-page__summary-item strong[b-a9ybu40oe8] {
    color: var(--shell-text-primary);
    font-size: 1rem;
    line-height: 1.1;
}

/* ── Busy Overlay ── */
.inv-page__busy-overlay[b-a9ybu40oe8] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 1.5rem;
    background: rgba(10, 16, 28, 0.28);
    backdrop-filter: blur(4px);
    z-index: 6;
}

.inv-page__busy-indicator[b-a9ybu40oe8] {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow-strong);
}

/* ── Dialog Styling ──
   Moved to wwwroot/css/dialogs.css (global / unscoped) because SfDialog
   renders its DOM to a portal on document.body, so scoped `::deep` rules
   from this page don't reliably reach it. The global file themes `.inv-dialog`
   and every `.inv-dialog__*` content primitive from any host page. */

/* ── Item Selection Qty Controls ── */
.inv-qty-cell[b-a9ybu40oe8] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Qty stepper buttons — now backed by SfButton (renders <button class="e-btn
   e-lib inv-qty-cell__btn">). Syncfusion's .e-btn sets larger default
   padding / min-width / border-radius which would blow out the round
   24px stepper shape, so we need !important on the visuals that the
   .e-btn baseline would clobber. ::deep lets us reach the SfButton's
   root element from this page's scoped CSS. */
[b-a9ybu40oe8] .inv-qty-cell__btn,
.inv-qty-cell__btn[b-a9ybu40oe8] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    border: 1px solid var(--shell-border) !important;
    background: var(--shell-panel-background-soft);
    color: var(--shell-text-primary);
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
    padding: 0 !important;
    text-transform: none;
    box-shadow: none;
}

[b-a9ybu40oe8] .inv-qty-cell__btn:hover,
.inv-qty-cell__btn:hover[b-a9ybu40oe8] {
    background: var(--shell-button-primary) !important;
    color: #fff !important;
    border-color: var(--shell-button-primary) !important;
}

[b-a9ybu40oe8] .inv-qty-cell__btn:active,
.inv-qty-cell__btn:active[b-a9ybu40oe8] {
    transform: scale(0.92);
}

.inv-qty-cell__input[b-a9ybu40oe8] {
    width: 50px;
    text-align: center;
    font-weight: 700;
    font-size: 0.84rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.45rem;
    background: var(--shell-panel-background);
    color: var(--shell-text-primary);
    padding: 0.2rem 0.15rem;
    outline: none;
    transition: border-color 0.15s ease;
    -moz-appearance: textfield;
}

.inv-qty-cell__input[b-a9ybu40oe8]::-webkit-inner-spin-button,
.inv-qty-cell__input[b-a9ybu40oe8]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.inv-qty-cell__input:focus[b-a9ybu40oe8] {
    border-color: var(--shell-button-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--shell-button-primary) 20%, transparent);
}

/* ── Item Selection Summary Bar ── */
.inv-dialog__summary-bar[b-a9ybu40oe8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--shell-button-primary) 8%, var(--shell-panel-background-soft));
    border: 1px solid color-mix(in srgb, var(--shell-button-primary) 20%, transparent);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--shell-text-primary);
}

.inv-dialog__summary-bar strong[b-a9ybu40oe8] {
    color: var(--shell-button-primary);
}

/* ── Responsive ── */
@media (max-width: 820px) {
    /* Title above, meta strip below — but both stay single-line, so the
       stack costs one extra row rather than the three the old copy block
       would have added. */
    .inv-page__header[b-a9ybu40oe8] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.3rem;
    }

    .inv-page__header-copy[b-a9ybu40oe8] {
        flex: 0 0 auto;
    }

    /* Hero meta cards collapse to a single horizontal strip — same
       pattern as the global footer in mobile. The desktop 4-column
       grid stacked into 2×2 (~120px tall) on phones, eating viewport
       above the actual transaction form. flex 1 1 0 + min-width 0
       lets the four cards share whatever width is available, with
       text-overflow:ellipsis on the .strong inside each card already
       handling values that don't fit. */
    .inv-page__header-meta[b-a9ybu40oe8] {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        gap: 0.4rem;
        /* Defensive overflow — if a future card is added the strip
           degrades to scrollable rather than wrapping. Hidden bar
           keeps the strip flush with the title above. */
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    .inv-page__header-meta[b-a9ybu40oe8]::-webkit-scrollbar { display: none; }

    /* Narrow screens keep the desktop's compact card metrics. The older,
       roomier values here were sized against a header that was already
       tall; re-inflating them now would hand back most of the height the
       stacked layout is trying to save. */
    .inv-page__meta-card[b-a9ybu40oe8] {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.2rem 0.45rem;
        gap: 0;
    }
    .inv-page__meta-card span[b-a9ybu40oe8] {
        font-size: 0.54rem;
        letter-spacing: 0.06em;
    }
    .inv-page__meta-card strong[b-a9ybu40oe8] {
        font-size: 0.78rem;
    }
    .inv-page__meta-card--amount strong[b-a9ybu40oe8] {
        font-size: 0.85rem;
    }

    .inv-page__section-head[b-a9ybu40oe8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

@media (max-width: 760px) {
    .inv-page__form-grid[b-a9ybu40oe8] {
        grid-template-columns: 1fr 1fr;
    }

    .inv-page__input--span2[b-a9ybu40oe8] {
        grid-column: 1 / -1;
    }

    /* Two columns total, so the date pair and the narration each take the
       whole row rather than trying to span two of two. */
    .inv-page__date-pair[b-a9ybu40oe8],
    .inv-page__input--narration[b-a9ybu40oe8] {
        grid-column: 1 / -1;
    }

    /* These used to be the TIGHT values relative to a roomier desktop
       toolbar. Desktop is now tighter than they are, so left alone they
       would make the toolbar grow on small screens. Narrow keeps the
       desktop metrics and only trims the outer padding further. */
    .inv-page__toolbar[b-a9ybu40oe8] {
        gap: 0.25rem;
        padding: 0.25rem 0.45rem;
    }

    /* Was 0.85rem/1.3rem — a leftover from the tall header, and at ≤760px it
       silently undid the compaction on exactly the screens with the least
       vertical room to give. */
    .inv-page__header[b-a9ybu40oe8] {
        padding: 0.3rem 0.6rem;
    }

    .inv-page__header h1[b-a9ybu40oe8] {
        font-size: 0.95rem;
    }

    .inv-page__body[b-a9ybu40oe8] {
        padding: 0.7rem 0.65rem;
        gap: 0.7rem;
    }

    .inv-page__panel[b-a9ybu40oe8],
    .inv-page__section[b-a9ybu40oe8],
    .inv-page__summary-panel[b-a9ybu40oe8] {
        padding: 0.85rem 0.9rem;
        border-radius: 1rem;
    }

    .inv-page__section--flat[b-a9ybu40oe8],
    .inv-page__summary-panel--flat[b-a9ybu40oe8] {
        padding: 0.5rem 0;
        border-radius: 0;
    }

    /* Desktop is now tighter than these once-"narrow" values, so they only
       trim the outer padding and leave the tab metrics to the desktop rule. */
    [b-a9ybu40oe8] .inv-page__tabs .e-tab-header {
        border-radius: 0.7rem 0.7rem 0 0;
        padding: 0.12rem 0.25rem 0;
    }

    .inv-page__summary-grid[b-a9ybu40oe8] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .inv-page__form-grid[b-a9ybu40oe8] {
        grid-template-columns: 1fr;
    }

    .inv-page__input--span2[b-a9ybu40oe8],
    .inv-page__input--wide[b-a9ybu40oe8],
    .inv-page__input--narration[b-a9ybu40oe8],
    .inv-page__date-pair[b-a9ybu40oe8] {
        grid-column: auto;
    }

    /* Single column: the dates and the tick stack rather than compete for a
       width that isn't there. */
    .inv-page__date-pair[b-a9ybu40oe8] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
    }

    [b-a9ybu40oe8] .inv-page__postdated {
        margin-bottom: 0;
    }

    .inv-page__toolbar[b-a9ybu40oe8] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .inv-page__toolbar-button--end[b-a9ybu40oe8] {
        margin-left: 0;
        grid-column: 1 / -1;
    }

    .inv-page__header h1[b-a9ybu40oe8] {
        font-size: 1.15rem;
    }

    /* Header-meta is flex-row at all breakpoints now; no grid override
       needed here. Keep the meta-card strong size override so the row
       remains legible on very narrow screens. */
    .inv-page__meta-card strong[b-a9ybu40oe8] {
        font-size: 0.78rem;
    }

    .inv-page__summary-grid[b-a9ybu40oe8] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Inline Item Edit Panel (horizontal scrollable strip) ── */
.inv-page__edit-panel[b-a9ybu40oe8] {
    display: flex;
    flex-direction: row;
    /* The fields and the F7/Esc block share the first line; the price/stock
       info strip is a THIRD child and wraps onto a line of its own beneath
       them. Without this it was laid out as a third COLUMN, squeezed to
       whatever was left and then cut off by the panel's overflow:hidden -
       which is why "Last net-cost" used to end mid-number. */
    flex-wrap: wrap;
    margin-top: 0.5rem;
    border: 2px solid color-mix(in srgb, var(--shell-button-primary) 40%, var(--shell-border));
    border-radius: 0.75rem;
    background: var(--shell-panel-background);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* The single horizontal row that scrolls — stops before the buttons */
.inv-page__edit-panel__strip[b-a9ybu40oe8] {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1 1 0;
    min-width: 0;
}

/* Each field: fixed width column, label on top, control below */
.inv-page__edit-panel__field[b-a9ybu40oe8] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 0 0 auto;
}

.inv-page__edit-panel__field > label[b-a9ybu40oe8] {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--shell-text-secondary, #666);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* ── Popup-trigger field variant ──
   Applied when the column has a PopupSQL configured. Switches the field
   from a vertical stack to a 2-column grid so the input + popup button
   sit side-by-side. The label spans both columns above. Anything that's
   neither <label> nor the popup button (i.e. whichever input variant
   the dynamic loop rendered — SfTextBox / SfComboBox / SfNumericTextBox /
   SfCheckBox / native input) lands in column 1; the button lands in
   column 2. */
.inv-page__edit-panel__field--popup[b-a9ybu40oe8] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 0.25rem;
    align-items: end;
}

.inv-page__edit-panel__field--popup > label[b-a9ybu40oe8] {
    grid-column: 1 / span 2;
    grid-row: 1;
}

.inv-page__edit-panel__field--popup > *:not(label):not(.inv-page__edit-panel__field-popup-btn)[b-a9ybu40oe8] {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
}

[b-a9ybu40oe8] .inv-page__edit-panel__field-popup-btn.e-btn {
    grid-column: 2;
    grid-row: 2;
    min-width: 32px;
    padding: 0.25rem 0.45rem;
    /* Match the input height — Syncfusion input controls render at
       around 32px tall by default. */
    height: 32px;
    align-self: end;
}

/* Action buttons — fixed panel on the right, outside the scroll area */
.inv-page__edit-panel__field--actions[b-a9ybu40oe8] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 0.6rem;
    background: var(--shell-panel-background);
    border-left: 1px solid var(--shell-border);
}

/* ── Barcode scan row ─────────────────────────────────────────────────
   Houses the scan input + a small primary submit button side-by-side so
   touch-only users can commit a scan without an Enter key. The input takes
   the remaining space (flex:1) and the button hugs the right edge.
   Used only when the voucher's TranID column is in scan mode (USE - MANUAL
   / USE - MANUAL (NO GROUPING)). */
.inv-tran-panel__scan-row[b-a9ybu40oe8] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
}

.inv-tran-panel__scan-row .inv-tran-panel__scan-input[b-a9ybu40oe8] {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    border: 1px solid var(--shell-field-border, var(--shell-border));
    border-radius: 6px;
    padding: 0 0.55rem;
    font-size: 0.92rem;
    /* Slightly bolder than other panel inputs so the user clearly sees this
       is the scan target. */
    font-weight: 600;
    background: var(--shell-input-background, var(--shell-panel-background));
    color: var(--shell-input-text, var(--shell-text-primary));
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.inv-tran-panel__scan-row .inv-tran-panel__scan-input:focus[b-a9ybu40oe8] {
    border-color: var(--shell-button-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--shell-button-primary) 22%, transparent);
}

/* Submit button — square-ish, primary colour, icon-only.
   Sized to match the input height so the whole row reads as one control. */
[b-a9ybu40oe8] .inv-tran-panel__scan-row .inv-tran-panel__scan-submit {
    flex: 0 0 auto;
    min-width: 36px !important;
    height: 32px;
    padding: 0 0.5rem !important;
}

/* ── ItemName + TranID-picker row ─────────────────────────────────────
   Mirrors the scan-row pattern but pairs the ItemName combo with a small
   icon button that opens GenericDataLookupDialog over the TranIDs for the
   selected item. The button only appears when TranID is visible on the
   voucher; it's disabled until ItemName is filled (the picker query
   filters by O.Name = ItemName and an empty filter would dump every
   barcode in the company). */
.inv-tran-panel__item-row[b-a9ybu40oe8] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
}

[b-a9ybu40oe8] .inv-tran-panel__item-row .inv-tran-panel__item-combo {
    flex: 1 1 auto;
    min-width: 0;
}

[b-a9ybu40oe8] .inv-tran-panel__item-row .inv-tran-panel__tranid-lookup {
    flex: 0 0 auto;
    min-width: 36px !important;
    height: 32px;
    padding: 0 0.5rem !important;
}

.inv-page__edit-panel__btns[b-a9ybu40oe8] {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}

/* Horizontal scrollbar styling */
.inv-page__edit-panel__strip[b-a9ybu40oe8]::-webkit-scrollbar {
    height: 8px;
}

.inv-page__edit-panel__strip[b-a9ybu40oe8]::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--shell-text-secondary) 35%, transparent);
    border-radius: 4px;
}

.inv-page__edit-panel__strip[b-a9ybu40oe8]::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--shell-text-secondary) 55%, transparent);
}

.inv-page__edit-panel__strip[b-a9ybu40oe8]::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--shell-border) 30%, transparent);
    border-radius: 4px;
}

/* ── Billing Info Tab ── */
.inv-page__billing-field[b-a9ybu40oe8] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.inv-page__billing-field > label[b-a9ybu40oe8] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--shell-text-secondary, #666);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ════════════════════════════════════════════════════════════════════════
   Help / User Guide panel — third column of .inv-page__body, right of the
   action rail.
   Blazor scoped CSS is per component: these ct-page__* rules have to live
   in EVERY page that mounts the panel, because a copy in another page's
   .razor.css never matches this page's elements. Without them the aside
   gets no width and disappears beside the full-width grids.
   ════════════════════════════════════════════════════════════════════════ */
.ct-page__help[b-a9ybu40oe8] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 12px;
    background: var(--shell-panel-background);
    box-shadow: var(--shell-shadow-subtle, 0 1px 3px rgba(0,0,0,0.05));
    align-self: stretch;
    min-height: 0;
    overflow: auto;
    color: var(--shell-text-primary);
}

.ct-page__help--docked[b-a9ybu40oe8] {
    flex: 0 0 64px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}

.ct-page__help-dock[b-a9ybu40oe8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    min-height: 100%;
}

.ct-page__help-dock-label[b-a9ybu40oe8] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

/* ::deep — the toggle and the accordion are Syncfusion components, so the
   scope attribute lands on the wrapper, not on the button/accordion element
   these rules target. */
[b-a9ybu40oe8] .ct-page__help-toggle { min-width: 0; }
.ct-page__help--docked[b-a9ybu40oe8]  .ct-page__help-toggle { width: 100%; }
[b-a9ybu40oe8] .ct-page__help-accordion { width: 100%; }

.ct-page__panel-head[b-a9ybu40oe8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.ct-page__panel-eyebrow[b-a9ybu40oe8] {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--shell-text-secondary);
}

.ct-page__help-intro[b-a9ybu40oe8] {
    margin: 0;
    color: var(--shell-text-secondary);
    line-height: 1.6;
}

.ct-page__help-content[b-a9ybu40oe8] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    color: var(--shell-text-primary);
    line-height: 1.6;
}

.ct-page__help-content p[b-a9ybu40oe8] { margin: 0; }

.ct-page__help-list[b-a9ybu40oe8] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.6rem;
}

.ct-page__help-list li[b-a9ybu40oe8] { padding-left: 0.15rem; }

/* ── Licence refusal cover ──────────────────────────────────────────────────
   Drawn over the whole entry page when the voucher's module is not licensed.
   Opaque on purpose: a half-visible form invites the operator to try. */
.inv-page__licence[b-a9ybu40oe8] {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 1.5rem;
    background: var(--shell-page-background, #f4f6fa);
}

.inv-page__licence-card[b-a9ybu40oe8] {
    max-width: 560px;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-left: 4px solid var(--shell-danger, #c0392b);
    border-radius: 8px;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text, #1b2a41);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

.inv-page__licence-card h2[b-a9ybu40oe8] {
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shell-danger, #c0392b);
}

.inv-page__licence-card p[b-a9ybu40oe8] { margin: 0 0 0.6rem; line-height: 1.5; font-size: 0.9rem; }
.inv-page__licence-note[b-a9ybu40oe8] { color: var(--shell-text-muted, #5a6675); font-size: 0.85rem; }

/* -- Credit-limit block -> approval-ticket prompt --
   A plain overlay (NOT SfDialog): it opens right after the Confirm Save
   dialog closes, and a Syncfusion modal opened during another modal's
   close animation wedges half-open. Deterministic markup instead. */
.credit-block-overlay[b-a9ybu40oe8] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}

.credit-block-modal[b-a9ybu40oe8] {
    width: min(560px, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    border-radius: 8px;
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.14));
    background: var(--shell-surface, #ffffff);
    color: var(--shell-text, #1c2430);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.credit-block-modal__header[b-a9ybu40oe8] {
    padding: 0.85rem 1.1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--shell-border, rgba(0, 0, 0, 0.14));
}

.credit-block-modal__body[b-a9ybu40oe8] {
    padding: 0.9rem 1.1rem 1.1rem;
}

.credit-block-modal__body input[type="text"][b-a9ybu40oe8] {
    background: var(--shell-app-background, #f4f6fa);
    color: var(--shell-text, #1c2430);
    border: 1px solid var(--shell-border, rgba(0, 0, 0, 0.2));
    border-radius: 4px;
    padding: 0.35rem 0.5rem;
}

.credit-block-modal__actions[b-a9ybu40oe8] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ── Print dialog: direct printing (Local Printing, this computer) ── */
.inv-print-direct[b-a9ybu40oe8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0 0.25rem;
    padding: 0.75rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.75rem;
}

.inv-print-direct__row[b-a9ybu40oe8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: flex-start;
}

.inv-print-direct__field[b-a9ybu40oe8] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.inv-print-direct__field--grow[b-a9ybu40oe8] {
    flex: 1 1 220px;
}

.inv-print-direct__field--narrow[b-a9ybu40oe8] {
    flex: 0 0 90px;
}

.inv-print-direct__label[b-a9ybu40oe8] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--shell-text-secondary, inherit);
}

.inv-print-direct__number[b-a9ybu40oe8] {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.4rem;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.inv-print-direct__check[b-a9ybu40oe8] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    padding-top: 0.35rem;
}

.inv-print-direct__note[b-a9ybu40oe8] {
    margin: 0;
    font-size: 0.78rem;
    color: var(--shell-text-secondary, inherit);
    overflow-wrap: anywhere;
}
/* /Pages/Transactions/ManageLinkedTransactionsPage.razor.rz.scp.css */
/* Manage Linked Transactions - list + help layout, tables, dialogs. */

.mlt-body[b-k5k7pwh7e4] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.mlt-main[b-k5k7pwh7e4] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* The pane scrolls when the filters + grid do not fit, so the grid's
       footer and horizontal scroll bar are never clipped off the bottom. */
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Filters ── */
.mlt-filters[b-k5k7pwh7e4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem 1rem;
    align-items: start;
}

.mlt-field[b-k5k7pwh7e4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--shell-text-primary);
}

.mlt-field > span:first-child[b-k5k7pwh7e4] {
    letter-spacing: 0.02em;
}

.mlt-field--action[b-k5k7pwh7e4] {
    justify-content: flex-end;
    padding-top: 1.15rem;
}

.mlt-field--wide[b-k5k7pwh7e4] {
    grid-column: 1 / -1;
}

.mlt-input[b-k5k7pwh7e4] {
    width: 100%;
    min-width: 0;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.35rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 400;
}

textarea.mlt-input[b-k5k7pwh7e4] {
    resize: vertical;
}

/* ── Tables ── */
.mlt-tablewrap[b-k5k7pwh7e4] {
    overflow: auto;
    border: 1px solid var(--shell-border);
    border-radius: 0.5rem;
    max-height: calc(100vh - 360px);
    min-height: 160px;
}

.mlt-tablewrap--dialog[b-k5k7pwh7e4] {
    max-height: 320px;
    min-height: 0;
}

.mlt-table[b-k5k7pwh7e4] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.mlt-table th[b-k5k7pwh7e4],
.mlt-table td[b-k5k7pwh7e4] {
    padding: 0.4rem 0.55rem;
    border-bottom: 1px solid var(--shell-border);
    text-align: left;
    vertical-align: top;
}

.mlt-table thead th[b-k5k7pwh7e4] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--shell-panel-background-soft, rgba(127, 127, 127, 0.08));
    font-size: 0.72rem;
    font-weight: 600;
    white-space: normal;
}

.mlt-table .num[b-k5k7pwh7e4] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mlt-check[b-k5k7pwh7e4] {
    width: 2rem;
    text-align: center;
}

.mlt-actions[b-k5k7pwh7e4] {
    white-space: nowrap;
    text-align: right;
}

.mlt-remarks[b-k5k7pwh7e4] {
    min-width: 12rem;
    white-space: pre-wrap;
}

.mlt-unit[b-k5k7pwh7e4] {
    opacity: 0.7;
}

.mlt-empty[b-k5k7pwh7e4] {
    padding: 1.25rem !important;
    text-align: center !important;
    opacity: 0.75;
}

/* A line past its required-by date - the red the app uses for trouble. */
.mlt-row--overdue td[b-k5k7pwh7e4] {
    background: rgba(220, 38, 38, 0.08);
}
.mlt-row--overdue td:first-child[b-k5k7pwh7e4] {
    box-shadow: inset 3px 0 0 rgba(220, 38, 38, 0.75);
}

/* ── Dialogs ── */
.mlt-dialog[b-k5k7pwh7e4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mlt-dialog__form[b-k5k7pwh7e4] {
    display: grid;
    grid-template-columns: minmax(220px, 1fr);
    gap: 0.75rem;
}

.mlt-muted[b-k5k7pwh7e4] {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.8;
}

.mlt-summary[b-k5k7pwh7e4] {
    margin: 0;
    font-size: 0.86rem;
}

/* ── Toolbar ── */
.mlt-toolbar[b-k5k7pwh7e4] { flex-wrap: wrap; }
.mlt-seg[b-k5k7pwh7e4] { display: inline-flex; gap: 0.25rem; margin-right: 0.35rem; }

.mlt-field--types[b-k5k7pwh7e4] { grid-column: span 2; font-weight: 400; }
.mlt-field--switch[b-k5k7pwh7e4] { font-weight: 400; }

/* ── The focused row's actions (the desktop's right-click menu) ── */
.mlt-actionbar[b-k5k7pwh7e4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.5rem;
    background: var(--shell-panel-background-soft, rgba(127, 127, 127, 0.06));
    font-size: 0.84rem;
    min-height: 2.75rem;
}
.mlt-actionbar__hint[b-k5k7pwh7e4] { opacity: 0.8; }
.mlt-actionbar__what[b-k5k7pwh7e4] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; min-width: 0; }
.mlt-actionbar__buttons[b-k5k7pwh7e4] { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; margin-left: auto; }

.mlt-chip[b-k5k7pwh7e4] {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border: 1px solid var(--shell-border);
    border-radius: 999px;
    font-size: 0.74rem;
    white-space: nowrap;
}

/* ── Status: whole-row colours, as on the desktop ── */
.mlt-status[b-k5k7pwh7e4] { font-weight: 600; }
.mlt-status.mlt-st--approved[b-k5k7pwh7e4] { color: var(--shell-success, #1b5e20); }
.mlt-status.mlt-st--cancelled[b-k5k7pwh7e4] { color: var(--shell-danger, #b71c1c); text-decoration: line-through; }
.mlt-status.mlt-st--rejected[b-k5k7pwh7e4] { color: var(--shell-danger, #b71c1c); }
.mlt-status.mlt-st--altered[b-k5k7pwh7e4] { color: var(--shell-status-info-text, #0d47a1); }
.mlt-status.mlt-st--hold[b-k5k7pwh7e4] { color: #a21caf; }

[b-k5k7pwh7e4] .mlt-sources .e-row.mlt-st--approved td { color: var(--shell-success, #1b5e20); font-weight: 600; }
[b-k5k7pwh7e4] .mlt-sources .e-row.mlt-st--cancelled td { color: var(--shell-danger, #b71c1c); text-decoration: line-through; }
[b-k5k7pwh7e4] .mlt-sources .e-row.mlt-st--rejected td { color: var(--shell-danger, #b71c1c); }
[b-k5k7pwh7e4] .mlt-sources .e-row.mlt-st--altered td { color: var(--shell-status-info-text, #0d47a1); }
[b-k5k7pwh7e4] .mlt-sources .e-row.mlt-st--hold td { color: #a21caf; }
[b-k5k7pwh7e4] .mlt-sources .e-rowcell.mlt-bold { font-weight: 700; }
[b-k5k7pwh7e4] .mlt-sources .e-rowcell input[type="checkbox"],
[b-k5k7pwh7e4] .mlt-sources .e-headercell input[type="checkbox"] { width: 1rem; height: 1rem; cursor: pointer; }

/* ── Grid on wide screens, cards on phones ── */
/* The grid fills what is left of the pane (never below 360px): its footer
   (count and totals) and its horizontal scroll bar sit on screen. */
.mlt-grid[b-k5k7pwh7e4] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 360px;
    display: flex;
    flex-direction: column;
}
.mlt-grid[b-k5k7pwh7e4]  .e-grid { flex: 1 1 auto; min-height: 0; }
[b-k5k7pwh7e4] .mlt-sources .e-gridcontent .e-content { overflow-x: auto !important; }
.mlt-cards[b-k5k7pwh7e4] { display: none; flex-direction: column; gap: 0.5rem; }

.mlt-card[b-k5k7pwh7e4] {
    display: flex;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.5rem;
    background: var(--shell-surface-background, transparent);
    cursor: pointer;
}
.mlt-card--focused[b-k5k7pwh7e4] { outline: 2px solid var(--shell-accent, #2563eb); outline-offset: 1px; }
.mlt-card__tick[b-k5k7pwh7e4] { display: flex; align-items: flex-start; padding-top: 0.15rem; }
.mlt-card__tick input[b-k5k7pwh7e4] { width: 1.15rem; height: 1.15rem; }
.mlt-card__body[b-k5k7pwh7e4] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.mlt-card__head[b-k5k7pwh7e4] { display: flex; justify-content: space-between; gap: 0.5rem; }
.mlt-card__amt[b-k5k7pwh7e4] { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.mlt-card__line[b-k5k7pwh7e4] { font-size: 0.84rem; overflow-wrap: anywhere; }
.mlt-card__meta[b-k5k7pwh7e4] { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: center; opacity: 0.9; }
.mlt-card.mlt-st--cancelled .mlt-card__head[b-k5k7pwh7e4] { text-decoration: line-through; }

/* Before the first Apply. */
.mlt-empty--start[b-k5k7pwh7e4] {
    margin: 0;
    padding: 2.5rem 1rem !important;
    border: 1px dashed var(--shell-border);
    border-radius: 0.5rem;
}

/* Grid footers (whole list and per group): count and totals. */
.mlt-foot[b-k5k7pwh7e4] { font-variant-numeric: tabular-nums; }
[b-k5k7pwh7e4] .mlt-sources .e-summaryrow .e-summarycell,
[b-k5k7pwh7e4] .mlt-sources .e-groupfooterrow .e-summarycell { font-weight: 600; }

/* What Print sends - never on screen. */
.mlt-print-src[b-k5k7pwh7e4] { display: none; }

/* ── Dialog contents ── */
.mlt-list[b-k5k7pwh7e4] { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.2rem; }
.mlt-targets[b-k5k7pwh7e4] { display: flex; flex-direction: column; gap: 0.4rem; }
.mlt-table--click tbody tr[b-k5k7pwh7e4] { cursor: pointer; }
.mlt-table--click tbody tr:hover td[b-k5k7pwh7e4],
.mlt-table--click tbody tr:focus-visible td[b-k5k7pwh7e4] { background: var(--shell-panel-background-soft, rgba(127, 127, 127, 0.08)); }
.mlt-table tfoot td[b-k5k7pwh7e4] { font-weight: 700; border-top: 2px solid var(--shell-border); }
.mlt-step[b-k5k7pwh7e4] { display: inline-block; }
.mlt-pivot[b-k5k7pwh7e4] { min-width: 0; overflow-x: auto; }

/* ── Auto Set-Off preview: one card per party voucher ── */
.mlt-auto-list[b-k5k7pwh7e4] { display: flex; flex-direction: column; gap: 0.6rem; max-height: 55vh; overflow: auto; padding-right: 0.15rem; }
.mlt-auto[b-k5k7pwh7e4] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--shell-border);
    border-left: 4px solid var(--shell-status-ok-border, #81c784);
    border-radius: 0.5rem;
}
.mlt-auto--problem[b-k5k7pwh7e4] { border-left-color: var(--shell-status-warn-border, #ffb74d); }
.mlt-auto--out[b-k5k7pwh7e4] { opacity: 0.55; border-left-color: var(--shell-border); }
.mlt-auto__head[b-k5k7pwh7e4] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; }
.mlt-auto__include[b-k5k7pwh7e4] { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.mlt-auto__include input[b-k5k7pwh7e4] { width: 1rem; height: 1rem; }
.mlt-auto__refs[b-k5k7pwh7e4] { font-size: 0.8rem; opacity: 0.8; overflow-wrap: anywhere; }
.mlt-auto__net[b-k5k7pwh7e4] { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.mlt-auto__problem[b-k5k7pwh7e4] { margin: 0; font-size: 0.84rem; color: var(--shell-status-warn-text, #bf360c); }
.mlt-auto__answers[b-k5k7pwh7e4] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem 1rem; }
.mlt-auto__answers:empty[b-k5k7pwh7e4] { display: none; }
.mlt-auto__lines summary[b-k5k7pwh7e4],
.mlt-auto__skipped summary[b-k5k7pwh7e4] { cursor: pointer; font-size: 0.84rem; }

/* Help panel - fixed-width sidebar (mirrors the reference masters). */
.ct-page__help[b-k5k7pwh7e4] {
    flex: 0 0 var(--invnet-help-w, 300px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.6rem;
    background: var(--shell-panel-background-soft, rgba(255, 255, 255, 0.6));
    overflow-y: auto;
    max-height: 100%;
    color: var(--shell-text-primary);
}
.ct-page__help--docked[b-k5k7pwh7e4] {
    flex: 0 0 56px;
    padding: 0.9rem 0.55rem;
    overflow: hidden;
}
.ct-page__help-dock[b-k5k7pwh7e4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ct-page__help-dock-label[b-k5k7pwh7e4] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ct-page__panel-head[b-k5k7pwh7e4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ct-page__panel-eyebrow[b-k5k7pwh7e4] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.ct-page__help-intro[b-k5k7pwh7e4] { margin: 0; font-size: 0.9rem; }
.ct-page__help-content[b-k5k7pwh7e4] { font-size: 0.86rem; line-height: 1.35; }
.ct-page__help-list[b-k5k7pwh7e4] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ct-page__help-list li[b-k5k7pwh7e4] { padding-left: 0.15rem; }

[b-k5k7pwh7e4] .ct-page__help-accordion .e-acrdn-header .e-acrdn-header-content {
    font-weight: 600;
}

@media (max-width: 900px) {
    .mlt-body[b-k5k7pwh7e4] { flex-wrap: wrap; }
    .ct-page__help[b-k5k7pwh7e4],
    .ct-page__help--docked[b-k5k7pwh7e4] { flex: 0 0 auto; width: 100%; overflow: visible; }
    .mlt-tablewrap[b-k5k7pwh7e4] { max-height: none; }
    .mlt-field--types[b-k5k7pwh7e4] { grid-column: 1 / -1; }
}

/* Phones: the grid gives way to cards, the action bar stacks, dialogs fill
   the screen. Nothing scrolls the page sideways. */
@media (max-width: 767px) {
    .mlt-grid[b-k5k7pwh7e4] { display: none; }
    .mlt-cards[b-k5k7pwh7e4] { display: flex; }
    .mlt-actionbar__buttons[b-k5k7pwh7e4] { margin-left: 0; }
    [b-k5k7pwh7e4] .mlt-dlg.e-dialog { width: 100vw !important; max-width: 100vw !important; height: 100% !important; max-height: 100% !important; top: 0 !important; left: 0 !important; border-radius: 0; }
}
/* /Pages/Transactions/PayBillPage.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   PayBillPage — pay bill preparation.

   Same shell as the attendance entry screen (master-page / master-shell /
   master-sticky-top / master-body), so the two payroll entry screens feel
   like one application. Everything below is tokens only: a hardcoded colour
   here would break dark mode, which this page inherits rather than defines.
   ════════════════════════════════════════════════════════════════════════════ */

.pbl-page[b-jz0rex3juh] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pbl-shell[b-jz0rex3juh] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pbl-toolbar[b-jz0rex3juh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.pbl-body[b-jz0rex3juh] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    min-height: 0;
}

.pbl-panel[b-jz0rex3juh] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.pbl-redirect[b-jz0rex3juh] {
    padding: 1.4rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.pbl-card[b-jz0rex3juh] {
    background: var(--shell-panel-background, #fff);
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 8px;
    padding: 0.9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.pbl-card__head[b-jz0rex3juh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.pbl-card__head h2[b-jz0rex3juh] {
    margin: 0;
    font-size: 1.02rem;
    color: var(--shell-text, #1c2430);
}

.pbl-tools[b-jz0rex3juh] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* ── Header fields ───────────────────────────────────────────────────────── */
.pbl-grid4[b-jz0rex3juh] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem 0.9rem;
}

.pbl-field[b-jz0rex3juh] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pbl-field--wide2[b-jz0rex3juh] { grid-column: span 2; }
.pbl-field--wide4[b-jz0rex3juh] { grid-column: 1 / -1; }

.pbl-label[b-jz0rex3juh] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--shell-text-secondary, #5b6a7d);
    margin-bottom: 0.2rem;
}

.pbl-input[b-jz0rex3juh] {
    width: 100%;
    padding: 0.42rem 0.55rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 5px;
    background: var(--shell-input-background, #fff);
    color: var(--shell-text, #1c2430);
    font-size: 0.88rem;
}

.pbl-input:focus[b-jz0rex3juh] {
    outline: none;
    border-color: var(--shell-accent, #2f6fd0);
    box-shadow: 0 0 0 2px var(--shell-accent-soft, rgba(47, 111, 208, .18));
}

.pbl-input:disabled[b-jz0rex3juh] {
    background: var(--shell-item-background-subtle, #f2f4f7);
    color: var(--shell-text-secondary, #5b6a7d);
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.pbl-badges[b-jz0rex3juh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.pbl-chip[b-jz0rex3juh] {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.71rem;
    font-weight: 600;
    white-space: nowrap;
}
.pbl-chip--system[b-jz0rex3juh]    { background: #ffe3c2; color: #7a4b00; border-color: #f0cf9a; }
.pbl-lock[b-jz0rex3juh] {
    margin: 0;
    padding: 0.5rem 0.7rem;
    border-left: 3px solid var(--shell-status-warn-border, #f0cf9a);
    background: var(--shell-status-warn-bg, #fff4e0);
    color: var(--shell-status-warn-text, #7a4b00);
    border-radius: 0 5px 5px 0;
    font-size: 0.83rem;
}

/* ── Summary strip ───────────────────────────────────────────────────────────
   The numbers anyone actually checks, between the header and the grids so
   they are never a scroll away. Scrolls sideways rather than wrapping. */
.pbl-summary[b-jz0rex3juh] {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
}

.pbl-summary__item[b-jz0rex3juh] {
    flex: 1 1 0;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 7px;
    background: var(--shell-item-background-subtle, #f5f7fa);
}

.pbl-summary__item span[b-jz0rex3juh] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--shell-text-secondary, #5b6a7d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pbl-summary__item strong[b-jz0rex3juh] {
    font-size: 1.02rem;
    color: var(--shell-text, #1c2430);
    font-variant-numeric: tabular-nums;
}

.pbl-summary__item--plus[b-jz0rex3juh]  { border-color: var(--shell-status-success-border, #b4dfc2); background: var(--shell-status-success-bg, #e4f5e9); }
.pbl-summary__item--minus[b-jz0rex3juh] { border-color: #f2b4b0; background: #fdeceb; }
.pbl-summary__item--net[b-jz0rex3juh]   { border-color: var(--shell-accent, #2f6fd0); background: var(--shell-accent-soft, rgba(47, 111, 208, .12)); }
.pbl-summary__item--net strong[b-jz0rex3juh] { font-size: 1.14rem; }

/* ── Auto Load notes ─────────────────────────────────────────────────────────
   What could NOT be done. Deliberately prominent: a note nobody reads is the
   same as a silently wrong bill. */
.pbl-notes[b-jz0rex3juh] {
    border: 1px solid var(--shell-status-warn-border, #f0cf9a);
    background: var(--shell-status-warn-bg, #fff4e0);
    border-radius: 7px;
    padding: 0.6rem 0.8rem;
}

.pbl-notes__head[b-jz0rex3juh] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--shell-status-warn-text, #7a4b00);
    font-size: 0.86rem;
}

.pbl-notes__close[b-jz0rex3juh] {
    margin-left: auto;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0.15rem 0.3rem;
    border-radius: 4px;
}

.pbl-notes__close:hover[b-jz0rex3juh] { background: rgba(0, 0, 0, .07); }

.pbl-notes__list[b-jz0rex3juh] {
    margin: 0.4rem 0 0;
    padding-left: 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: var(--shell-status-warn-text, #7a4b00);
    font-size: 0.83rem;
}

/* ── Row tags and buttons (the grids are SfGrid; the old hand-rolled
   table rules went with them) ─────────────────────────────────────────── */
.pbl-rowbtn[b-jz0rex3juh] {
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 4px;
    background: var(--shell-panel-background, #fff);
    color: var(--shell-text-secondary, #5b6a7d);
    font-size: 0.76rem;
    cursor: pointer;
}

.pbl-rowbtn:hover:not(:disabled)[b-jz0rex3juh] {
    border-color: #f2b4b0;
    color: #7a1b16;
}

.pbl-rowbtn:disabled[b-jz0rex3juh] { opacity: 0.5; cursor: default; }

.pbl-tag[b-jz0rex3juh] {
    display: inline-block;
    padding: 0 0.35rem;
    border-radius: 3px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.25rem;
}

.pbl-tag--plus[b-jz0rex3juh]  { background: var(--shell-status-success-bg, #e4f5e9); color: var(--shell-status-success-text, #1d6b37); }

.pbl-tag--minus[b-jz0rex3juh] { background: #fdeceb; color: #7a1b16; }

.pbl-tag--calc[b-jz0rex3juh]  { background: var(--shell-status-info-bg, #e8f0fe); color: var(--shell-status-info-text, #1a4b8c); cursor: help; }

.pbl-empty td[b-jz0rex3juh] {
    padding: 1.4rem 0.8rem;
    text-align: center;
    color: var(--shell-text-secondary, #5b6a7d);
    font-size: 0.83rem;
}

@media (max-width: 1100px) {
    .pbl-grid4[b-jz0rex3juh] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pbl-field--wide2[b-jz0rex3juh], .pbl-field--wide4[b-jz0rex3juh] { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .pbl-body[b-jz0rex3juh] { flex-direction: column; }
}

/* ── Status / posting audit lines ────────────────────────────────────────────
   Under the chips: the chip says WHAT, these say WHO, WHEN and WHY. */
.pbl-statusline[b-jz0rex3juh] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.pbl-statusline .e-icons[b-jz0rex3juh] {
    font-size: 0.8rem;
    color: var(--shell-accent, #2f6fd0);
}

/* ── Change Status dialog ─────────────────────────────────────────────────── */
.pbl-dialog__body[b-jz0rex3juh] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 0.2rem 0.1rem 0;
}

.pbl-dialog__state[b-jz0rex3juh] {
    margin: 0;
    padding: 0.9rem 0;
    text-align: center;
    color: var(--shell-text-secondary, #5b6a7d);
    font-size: 0.85rem;
}

.pbl-dialog__current[b-jz0rex3juh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 6px;
    background: var(--shell-item-background-subtle, #f5f7fa);
    font-size: 0.82rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.pbl-dialog__current strong[b-jz0rex3juh] {
    color: var(--shell-text, #1c2430);
    font-size: 0.86rem;
}

.pbl-dialog__note[b-jz0rex3juh] {
    margin: 0;
    font-size: 0.76rem;
    font-style: italic;
    color: var(--shell-text-secondary, #5b6a7d);
}

.pbl-dialog__actions[b-jz0rex3juh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--shell-border, #d8dee7);
}

/* ── The printable pay bill ──────────────────────────────────────────────────
   Only ever seen on paper: printElementById copies these rules into the print
   iframe with the rest of the page's CSS. Black on white — a printed pay bill
   is a document, not a screenshot of the form. */
.pbl-print[b-jz0rex3juh] {
    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    color: #111;
    font-size: 11px;
}

.pbl-print__head[b-jz0rex3juh] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
}

.pbl-print__head td[b-jz0rex3juh] {
    border: 1px solid #ccc;
    padding: 4px 6px;
    vertical-align: top;
    width: 25%;
}

.pbl-print__head span[b-jz0rex3juh] {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #666;
}

.pbl-print__head strong[b-jz0rex3juh] { font-size: 11px; }

.pbl-print__narr[b-jz0rex3juh] { margin: 0 0 6px; font-size: 11px; }

.pbl-print__lines[b-jz0rex3juh] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.pbl-print__lines th[b-jz0rex3juh],
.pbl-print__lines td[b-jz0rex3juh] {
    border: 1px solid #ccc;
    padding: 3px 6px;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
}

.pbl-print__lines th[b-jz0rex3juh] {
    background: #f0f0f0;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pbl-print__lines tfoot td[b-jz0rex3juh] {
    font-weight: 700;
    background: #f7f7f7;
}

.pbl-print__net td[b-jz0rex3juh] {
    background: #e8e8e8;
    font-size: 12px;
}

/* Numbers right-aligned on paper too. */
.pbl-print__num[b-jz0rex3juh] { text-align: right; }
.pbl-print__no[b-jz0rex3juh]  { width: 30px; text-align: right; }

/* ── Header strip on ONE line ────────────────────────────────────────────────
   The shared .prod-master__header-meta is a 2-column grid with a 260px cap,
   which wraps three cards onto two rows. Flex instead: the cards shrink and
   ellipsize, and the strip scrolls sideways rather than wrapping. */
[b-jz0rex3juh] .prod-master__header-meta.pbl-headmeta {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    max-width: none;
    overflow-x: auto;
}

[b-jz0rex3juh] .prod-master__header-meta.pbl-headmeta .prod-master__meta-card {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 240px;
}

[b-jz0rex3juh] .prod-master__header-meta.pbl-headmeta .prod-master__meta-card span,
[b-jz0rex3juh] .prod-master__header-meta.pbl-headmeta .prod-master__meta-card strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* ── Grid pick-lists ─────────────────────────────────────────────────────────
   A cell combo has to look like the other cells: bordered at rest, same
   height, no Syncfusion default margin pushing the row taller. */
.pbl-cellcombo[b-jz0rex3juh] { min-width: 170px; }

[b-jz0rex3juh] .pbl-cellcombo.e-input-group {
    margin: 0;
    border-radius: 4px;
    border: 1px solid var(--shell-border, #d8dee7);
    background: var(--shell-input-background, #fff);
}

[b-jz0rex3juh] .pbl-cellcombo.e-input-group input.e-input {
    padding: 0.24rem 0.4rem;
    font-size: 0.85rem;
    height: auto;
}

/* ── Header strip on ONE line ────────────────────────────────────────────────
   The shared .prod-master__header-meta is a 2-column grid with a 260px cap,
   which wraps three cards onto two rows. Flex instead: the cards shrink and
   ellipsize, and the strip scrolls sideways rather than wrapping. */
[b-jz0rex3juh] .prod-master__header-meta.pbl-headmeta {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    max-width: none;
    overflow-x: auto;
}

[b-jz0rex3juh] .prod-master__header-meta.pbl-headmeta .prod-master__meta-card {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 240px;
}

[b-jz0rex3juh] .prod-master__header-meta.pbl-headmeta .prod-master__meta-card span,
[b-jz0rex3juh] .prod-master__header-meta.pbl-headmeta .prod-master__meta-card strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* ── Grid pick-lists ─────────────────────────────────────────────────────────
   A cell combo has to look like the other cells: bordered at rest, same
   height, no Syncfusion default margin pushing the row taller. */
.pbl-cellcombo[b-jz0rex3juh] { min-width: 170px; }

[b-jz0rex3juh] .pbl-cellcombo.e-input-group {
    margin: 0;
    border-radius: 4px;
    border: 1px solid var(--shell-border, #d8dee7);
    background: var(--shell-input-background, #fff);
}

[b-jz0rex3juh] .pbl-cellcombo.e-input-group input.e-input {
    padding: 0.24rem 0.4rem;
    font-size: 0.85rem;
    height: auto;
}

/* ── Syncfusion grids ────────────────────────────────────────────────────────
   Editable cells must LOOK like cells at rest, not appear on focus, and the
   wrapper keeps a working height even when the grid is empty (convention).

   The grid itself carries Height="320" so it holds that block of space at a
   minimum and scrolls beyond it, with the header and the totals row staying
   put outside the scrolling region. */
.pbl-gridwrap[b-jz0rex3juh] {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

[b-jz0rex3juh] .pbl-grid .e-rowcell {
    padding: 3px 6px;
    vertical-align: middle;
}

[b-jz0rex3juh] .pbl-grid .e-headercell {
    background: var(--shell-item-background-subtle, #f2f4f7);
}

/* Cell editors: bordered at rest, same height as one another, and no
   Syncfusion default margin pushing the row taller. */
[b-jz0rex3juh] .pbl-grid .e-input-group,
[b-jz0rex3juh] .pbl-grid .e-numeric.e-input-group {
    margin: 0;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 4px;
    background: var(--shell-input-background, #fff);
}

[b-jz0rex3juh] .pbl-grid .e-input-group input.e-input {
    padding: 0.2rem 0.4rem;
    font-size: 0.85rem;
    height: auto;
}

[b-jz0rex3juh] .pbl-grid .e-input-group.e-disabled,
[b-jz0rex3juh] .pbl-grid .e-input-group input.e-input:disabled {
    background: var(--shell-item-background-subtle, #f2f4f7);
    color: var(--shell-text-secondary, #5b6a7d);
}

/* The scroll region carries a hairline so it reads as a fixed block of rows
   rather than a table that happens to be cut off. */
[b-jz0rex3juh] .pbl-grid .e-gridcontent {
    border-bottom: 1px solid var(--shell-border, #d8dee7);
}

[b-jz0rex3juh] .pbl-grid .e-summaryrow .e-summarycell {
    background: var(--shell-item-background-subtle, #f2f4f7);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pbl-rowno[b-jz0rex3juh] {
    color: var(--shell-text-secondary, #5b6a7d);
    font-variant-numeric: tabular-nums;
}

/* Totals the grid cannot aggregate itself (template-only columns). */
.pbl-gridfoot[b-jz0rex3juh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    align-items: baseline;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 6px;
    background: var(--shell-item-background-subtle, #f2f4f7);
    font-size: 0.82rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.pbl-gridfoot strong[b-jz0rex3juh] {
    color: var(--shell-text, #1c2430);
    font-variant-numeric: tabular-nums;
    margin-left: 0.25rem;
}

.pbl-gridfoot--net[b-jz0rex3juh] {
    margin-left: auto;
    padding: 0.05rem 0.5rem;
    border-radius: 5px;
    background: var(--shell-accent-soft, rgba(47, 111, 208, .12));
    color: var(--shell-text, #1c2430);
}

/* The internal number reads as a fact, not a field. */
.pbl-voucherid[b-jz0rex3juh] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--shell-text-secondary, #5b6a7d);
}

.pbl-voucherid strong[b-jz0rex3juh] {
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--shell-text, #1c2430);
    font-variant-numeric: tabular-nums;
}

/* The employee/period row carries Auto Load as a fifth slot, sized to the
   button rather than to a quarter of the row. */
.pbl-grid4--action[b-jz0rex3juh] { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }

/* The button sits UNDER an empty label, so its top edge lines up with the top
   of Period To's input rather than with the top of that field's label. Content
   flows from the top - flex-end would push it down against the hint instead. */
.pbl-field--action[b-jz0rex3juh] { justify-content: flex-start; }

[b-jz0rex3juh] .pbl-autoload {
    white-space: nowrap;
    /* Match the Syncfusion input height beside it so the two line up top AND
       bottom, not just at the top. */
    height: 34px;
    padding-top: 0;
    padding-bottom: 0;
}

@media (max-width: 900px) {
    /* Stacked layout: the button spans the row like the wide fields do. */
    .pbl-grid4--action[b-jz0rex3juh] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pbl-field--action[b-jz0rex3juh] { grid-column: 1 / -1; }
}

/* Icon-only row button: square, so the trash sits centred rather than in a
   box still shaped for the caption it used to carry. */
[b-jz0rex3juh] .pbl-rowbtn {
    min-width: 0;
    padding: 0.2rem 0.35rem;
}

/* -- Embedded in a host's dialog ------------------------------------------
   The dialog supplies the frame, so the page shell's full-height flex chain
   is not there to size the body. These three rules give the content its own
   height and its own scroll, which is what the .master-body rules do on the
   routed page. */
.pbl-embedded[b-jz0rex3juh] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    height: 100%;
    min-height: 0;
}

.pbl-embedded__toolbar[b-jz0rex3juh] {
    flex: 0 0 auto;
}

.pbl-embedded__body[b-jz0rex3juh] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.pbl-embedded__body > section[b-jz0rex3juh],
.pbl-embedded__body > aside[b-jz0rex3juh] {
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* the CRM lead: the caption, Pick and Clear on one line */
.pbl-lead[b-jz0rex3juh] { display: flex; align-items: flex-end; gap: 0.35rem; min-width: 0; }
.pbl-lead[b-jz0rex3juh]  .e-input-group, .pbl-lead[b-jz0rex3juh]  .e-float-input { flex: 1 1 auto; min-width: 0; }
/* /Pages/Transactions/PayrollNotificationPage.razor.rz.scp.css */
/* Payroll notifications - who gets told, over what, with what words. */

.pnp-body[b-vxajusrhhk] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.pnp-main[b-vxajusrhhk] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pnp-panel[b-vxajusrhhk] {
    background: var(--shell-surface, #fff);
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 10px;
    padding: 0.9rem 1rem;
}

.pnp-form[b-vxajusrhhk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}

.pnp-field label[b-vxajusrhhk] {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.pnp-field--wide[b-vxajusrhhk] { grid-column: span 2; }
.pnp-field--btn[b-vxajusrhhk] { align-self: end; }

.pnp-channelrow[b-vxajusrhhk] {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    min-height: 2.2rem;
}

.pnp-check[b-vxajusrhhk] {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    margin: 0 !important;
}

/* The report rows say what happened by colour as well as words. */
.pnp-grid[b-vxajusrhhk]  .pnp-row--sent .e-rowcell { background: var(--shell-status-success-bg, rgba(29, 111, 66, .08)); }
.pnp-grid[b-vxajusrhhk]  .pnp-row--fail .e-rowcell { background: var(--shell-status-error-bg, rgba(214, 69, 69, .10)); }
.pnp-grid[b-vxajusrhhk]  .pnp-row--skip .e-rowcell { background: var(--shell-status-warn-bg, rgba(122, 75, 0, .08)); }

.pnp-cell[b-vxajusrhhk] { width: 100%; min-width: 0; }
.pnp-rowbtn[b-vxajusrhhk] { padding: 0.15rem 0.4rem; }
/* /Pages/Transactions/SalaryPaymentPage.razor.rz.scp.css */
/* Salary Payment - the web flow over the legacy EmpSalaryPayment tables.
   Shares the master shell; what is scoped here is the record strip, the
   two-panel body and the lines grid's cells. */

.slp-body[b-garriv1olu] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.slp-main[b-garriv1olu] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.slp-panel[b-garriv1olu] {
    background: var(--shell-surface, #fff);
    border: 1px solid var(--shell-border, #d8dee7);
    border-radius: 10px;
    padding: 0.9rem 1rem;
}

.slp-toolbar[b-garriv1olu] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ── The record strip ──────────────────────────────────────────────────── */
.slp-record[b-garriv1olu] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    padding: 0.35rem 0.2rem 0.5rem;
    font-size: 0.85rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.slp-record__no strong[b-garriv1olu],
.slp-record__link strong[b-garriv1olu] { color: var(--shell-text, #1c2430); }
.slp-record__period[b-garriv1olu] { margin-left: auto; }

/* ── Form ────────────────────────────────────────────────────────────────
   The batch page's convention: a FIXED four-column grid with top-aligned
   flex-column fields, so every control sits on the same line and hints of
   different lengths hang below without pushing anything around. align-items
   was 'end' at first - each control sank to its cell's bottom and the hint's
   length decided the control's height. */
.slp-form[b-garriv1olu] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem 1rem;
}

.slp-field[b-garriv1olu] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.slp-field label[b-garriv1olu] {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.slp-field--wide[b-garriv1olu] { grid-column: span 2; }

/* The Prepare button has no label above it - the padding stands in for one,
   so the button sits level with the controls beside it. */
.slp-field--btn[b-garriv1olu] {
    justify-content: flex-start;
    padding-top: 1.35rem;
}

@media (max-width: 1100px) {
    .slp-form[b-garriv1olu] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.slp-notes[b-garriv1olu] {
    margin: 0.7rem 0 0;
    padding-left: 1.2rem;
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* ── Lines grid ────────────────────────────────────────────────────────── */
.slp-gridhost[b-garriv1olu] { min-height: 0; }

.slp-cell[b-garriv1olu] { width: 100%; min-width: 0; }

/* ::deep, because the <input> is rendered by Syncfusion, not by this
   component - a scoped selector without it never reaches the element and
   the amounts sat left-aligned. */
.slp-gridhost[b-garriv1olu]  .slp-cell--num input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.slp-grid[b-garriv1olu]  .slp-row--cancelled .e-rowcell {
    background: var(--shell-status-error-bg, rgba(214, 69, 69, .10));
    color: var(--shell-status-error-text, #a33);
}

.slp-cancelled-chip[b-garriv1olu] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--shell-status-error-text, #a33);
}

.slp-rowbtn[b-garriv1olu] { padding: 0.15rem 0.4rem; }

.slp-agg-label[b-garriv1olu] {
    font-size: 0.78rem;
    color: var(--shell-text-secondary, #5b6a7d);
    white-space: nowrap;
}

.slp-agg-sum[b-garriv1olu] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Decision dialog ───────────────────────────────────────────────────── */
.slp-decision label[b-garriv1olu] {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    margin: 0.5rem 0 0.2rem;
}

.slp-decision__actions[b-garriv1olu] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

.slp-danger[b-garriv1olu] { color: var(--shell-status-error-text, #a33); }

/* The totals strip sits flush under the grid and reads as its footer. */
.slp-linesfooter[b-garriv1olu] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--shell-border, #d8dee7);
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: var(--shell-surface-alt, #f6f8fb);
    font-size: 0.82rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.slp-linesfooter strong[b-garriv1olu] {
    color: var(--shell-text, #1c2430);
    font-variant-numeric: tabular-nums;
}

.slp-linesfooter__count[b-garriv1olu] { margin-right: auto; }
/* /Pages/Transactions/TimeMgt/DeviceLogProcessingPage.razor.rz.scp.css */
/* Device Log Processing — page-specific layout only (shell pieces are global). */

.dlp[b-2lhjcp2c1p] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dlp__shell[b-2lhjcp2c1p] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.dlp__toolbar[b-2lhjcp2c1p] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.dlp__panel[b-2lhjcp2c1p] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.dlp-sdk[b-2lhjcp2c1p] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dlp-setup[b-2lhjcp2c1p] {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 0.5rem 1.5rem;
    align-items: start;
}

@media (max-width: 980px) {
    .dlp-setup[b-2lhjcp2c1p] {
        grid-template-columns: 1fr;
    }
}

.dlp-devicelist[b-2lhjcp2c1p] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.dlp-device[b-2lhjcp2c1p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.8rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--shell-border, #c9d2dd);
    border-radius: 6px;
}

.dlp-device__meta[b-2lhjcp2c1p] {
    font-size: 0.76rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.dlp-device__result[b-2lhjcp2c1p] {
    flex-basis: 100%;
    font-size: 0.76rem;
    padding-left: 1.6rem;
}

.dlp-device__result--ok[b-2lhjcp2c1p] { color: var(--shell-success, #1e7e34); }
.dlp-device__result--fail[b-2lhjcp2c1p] { color: var(--shell-danger, #c0392b); }

.dlp-grid2[b-2lhjcp2c1p] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1rem;
    align-items: start;
}

.dlp-field[b-2lhjcp2c1p] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.dlp-switch[b-2lhjcp2c1p] {
    margin-top: 0.4rem;
}

.dlp-placeholder[b-2lhjcp2c1p] {
    margin: 0.4rem 0;
    font-size: 0.86rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.dlp-gridwrap[b-2lhjcp2c1p] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.dlp-summary[b-2lhjcp2c1p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8rem;
}

.dlp-summary__note[b-2lhjcp2c1p] {
    color: var(--shell-text-secondary, #5b6a7d);
}

.dlp[b-2lhjcp2c1p]  .dlp-row--dup td {
    color: var(--shell-text-secondary, #5b6a7d);
}

.dlp[b-2lhjcp2c1p]  .dlp-row--unmatched td {
    background: rgba(255, 193, 7, 0.12);
}

.dlp-result[b-2lhjcp2c1p] {
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    border: 1px solid rgba(30, 126, 52, 0.5);
    background: rgba(30, 126, 52, 0.07);
    font-size: 0.82rem;
    line-height: 1.45;
}

.dlp-result p[b-2lhjcp2c1p] { margin: 0 0 0.3rem; }
.dlp-result ul[b-2lhjcp2c1p] { margin: 0.2rem 0 0 1.1rem; padding: 0; }
.dlp-result__head[b-2lhjcp2c1p] { font-weight: 700; }

.dlp__redirect[b-2lhjcp2c1p] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.dlp__body[b-2lhjcp2c1p] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
/* /Pages/Transactions/TimeMgt/ExtraWorkApprovalsPage.razor.rz.scp.css */
/* Extra-Work Approvals — page-specific layout only (shell pieces are global). */

.ewa[b-msqwbp7vaf] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ewa__shell[b-msqwbp7vaf] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.ewa__toolbar[b-msqwbp7vaf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.ewa__panel[b-msqwbp7vaf] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ewa-filters[b-msqwbp7vaf] {
    display: grid;
    grid-template-columns: 0.6fr 1.6fr 0.8fr 0.8fr;
    gap: 0.35rem 1rem;
    align-items: end;
}

@media (max-width: 980px) {
    .ewa-filters[b-msqwbp7vaf] {
        grid-template-columns: 1fr 1fr;
    }
}

.ewa-field[b-msqwbp7vaf] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.ewa-switch[b-msqwbp7vaf] {
    padding-bottom: 1.6rem;
}

.ewa-empinfo[b-msqwbp7vaf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    margin: 0;
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.ewa-empinfo em[b-msqwbp7vaf] {
    font-style: normal;
    font-weight: 600;
    margin-right: 0.3rem;
    color: var(--shell-text, #1f2a37);
}

.ewa-inactive[b-msqwbp7vaf] {
    color: var(--shell-warning, #b7791f);
    font-weight: 600;
}

.ewa-gridwrap[b-msqwbp7vaf] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ewa-placeholder[b-msqwbp7vaf] {
    margin: 0.6rem 0;
    font-size: 0.86rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.ewa-totals[b-msqwbp7vaf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.3rem;
    margin: 0;
    padding: 0.45rem 0.7rem;
    border-radius: 6px;
    font-size: 0.8rem;
    background: var(--shell-surface-muted, rgba(0, 0, 0, 0.04));
}

.ewa-totals em[b-msqwbp7vaf] {
    font-style: normal;
    font-weight: 600;
    margin-right: 0.3rem;
}

.ewa-totals__note[b-msqwbp7vaf] {
    margin-left: auto;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* Row tints: an unsaved tick, a frozen day (attendance generated), a day
   with a single punch (missing In or Out). */
.ewa[b-msqwbp7vaf]  .ewa-row--dirty td {
    background: rgba(255, 193, 7, 0.12);
}

.ewa[b-msqwbp7vaf]  .ewa-row--frozen td {
    color: var(--shell-text-secondary, #5b6a7d);
}

.ewa[b-msqwbp7vaf]  .ewa-row--single td {
    background: rgba(220, 53, 69, 0.07);
}

.ewa-cancel[b-msqwbp7vaf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.2rem 0.1rem 0.4rem;
}

.ewa-cancel__what[b-msqwbp7vaf] {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
}

.ewa-cancel__actions[b-msqwbp7vaf] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.3rem;
}

.ewa__redirect[b-msqwbp7vaf] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.ewa__body[b-msqwbp7vaf] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.ewa-filters[b-msqwbp7vaf] {
    grid-template-columns: 0.8fr 0.8fr 0.8fr;
}

.ewa[b-msqwbp7vaf]  .ewa-row--cancelled td {
    color: var(--shell-danger, #c0392b);
}

.ewa[b-msqwbp7vaf]  .ewa-row--approved td {
    color: var(--shell-success, #1e7e34);
}

/* The status editor is visibly bordered at rest (editable-grid convention). */
.ewa[b-msqwbp7vaf]  .ewa-cellcombo .e-input-group {
    border: 1px solid var(--shell-border, #c9d2dd) !important;
    border-radius: 4px;
    background: var(--shell-surface, #fff);
}

.ewa-agg[b-msqwbp7vaf] {
    font-weight: 600;
}
/* /Pages/Transactions/TimeMgt/ExtraWorkEntryPage.razor.rz.scp.css */
/* Extra Work Entry — page-specific layout only. Header, help panel, toolbar
   and inputs are GLOBAL (app.css: prod-master__*, ct-page__help*, master-*). */

.ewe[b-crnm9duse9] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ewe__shell[b-crnm9duse9] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.ewe__toolbar[b-crnm9duse9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.ewe__panel[b-crnm9duse9] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.ewe__detail[b-crnm9duse9] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 720px;
}

.ewe-field[b-crnm9duse9] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.ewe-grid2[b-crnm9duse9],
.ewe-grid3[b-crnm9duse9] {
    display: grid;
    gap: 0.35rem 1rem;
    align-items: start;
}

.ewe-grid2[b-crnm9duse9] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ewe-grid3[b-crnm9duse9] { grid-template-columns: 0.6fr 1fr 0.8fr; }

@media (max-width: 720px) {
    .ewe-grid2[b-crnm9duse9],
    .ewe-grid3[b-crnm9duse9] {
        grid-template-columns: 1fr;
    }
}

.ewe-status[b-crnm9duse9] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.9rem;
}

.ewe-status__label[b-crnm9duse9] {
    font-size: 0.72rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.ewe-audit[b-crnm9duse9] {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--shell-text-secondary, #5b6a7d);
}

.ewe-frozen[b-crnm9duse9] {
    color: var(--shell-danger, #c0392b);
    font-weight: 600;
}

.ewe__redirect[b-crnm9duse9] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.ewe-embedded-body[b-crnm9duse9] {
    display: flex;
    gap: 1rem;
    min-height: 0;
    height: 100%;
}

.ewe-embedded-main[b-crnm9duse9] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
}

.ewe__body[b-crnm9duse9],
.ewe[b-crnm9duse9]  .ewe-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.ewe-grid3b[b-crnm9duse9] {
    display: grid;
    grid-template-columns: 1.2fr 0.6fr 0.8fr;
    gap: 0.35rem 1rem;
    align-items: start;
}

@media (max-width: 720px) {
    .ewe-grid3b[b-crnm9duse9] {
        grid-template-columns: 1fr;
    }
}

.ewe-approval-note[b-crnm9duse9] {
    margin: 0;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1.4;
    background: var(--shell-surface-muted, rgba(0, 0, 0, 0.04));
    color: var(--shell-text-secondary, #5b6a7d);
}
/* /Pages/Transactions/TimeMgt/ManualTimeEntryPage.razor.rz.scp.css */
/* Manual Time Entry — page-specific layout only. Header, help panel, toolbar
   and inputs are GLOBAL (app.css: prod-master__*, ct-page__help*, master-*). */

.mte[b-g34tzr0xax] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mte__shell[b-g34tzr0xax] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.mte__toolbar[b-g34tzr0xax] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.mte__panel[b-g34tzr0xax] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.mte__detail[b-g34tzr0xax] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 720px;
}

.mte-field[b-g34tzr0xax] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.mte-grid2[b-g34tzr0xax],
.mte-grid3[b-g34tzr0xax] {
    display: grid;
    gap: 0.35rem 1rem;
    align-items: start;
}

.mte-grid2[b-g34tzr0xax] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mte-grid3[b-g34tzr0xax] { grid-template-columns: 0.6fr 1fr 0.8fr; }

@media (max-width: 720px) {
    .mte-grid2[b-g34tzr0xax],
    .mte-grid3[b-g34tzr0xax] {
        grid-template-columns: 1fr;
    }
}

.mte-status[b-g34tzr0xax] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.9rem;
}

.mte-status__label[b-g34tzr0xax] {
    font-size: 0.72rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.mte-audit[b-g34tzr0xax] {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--shell-text-secondary, #5b6a7d);
}

.mte-frozen[b-g34tzr0xax] {
    color: var(--shell-danger, #c0392b);
    font-weight: 600;
}

.mte__redirect[b-g34tzr0xax] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.mte-embedded-body[b-g34tzr0xax] {
    display: flex;
    gap: 1rem;
    min-height: 0;
    height: 100%;
}

.mte-embedded-main[b-g34tzr0xax] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
}

.mte__body[b-g34tzr0xax],
.mte[b-g34tzr0xax]  .mte-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
/* /Pages/Transactions/TimeMgt/OvertimeAssignmentPage.razor.rz.scp.css */
/* Overtime Assignment — page-specific layout only. Header, help panel, toolbar
   and inputs are GLOBAL (app.css: prod-master__*, ct-page__help*, master-*). */

.ota[b-lpke9bjmu2] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ota__shell[b-lpke9bjmu2] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.ota__toolbar[b-lpke9bjmu2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.ota__panel[b-lpke9bjmu2] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
}

.ota__detail[b-lpke9bjmu2] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 720px;
}

.ota-field[b-lpke9bjmu2] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.ota-grid2[b-lpke9bjmu2],
.ota-grid3[b-lpke9bjmu2] {
    display: grid;
    gap: 0.35rem 1rem;
    align-items: start;
}

.ota-grid2[b-lpke9bjmu2] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ota-grid3[b-lpke9bjmu2] { grid-template-columns: 0.6fr 1fr 0.8fr; }

@media (max-width: 720px) {
    .ota-grid2[b-lpke9bjmu2],
    .ota-grid3[b-lpke9bjmu2] {
        grid-template-columns: 1fr;
    }
}

.ota-status[b-lpke9bjmu2] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.9rem;
}

.ota-status__label[b-lpke9bjmu2] {
    font-size: 0.72rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.ota-audit[b-lpke9bjmu2] {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--shell-text-secondary, #5b6a7d);
}

.ota-frozen[b-lpke9bjmu2] {
    color: var(--shell-danger, #c0392b);
    font-weight: 600;
}

.ota__redirect[b-lpke9bjmu2] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.ota-embedded-body[b-lpke9bjmu2] {
    display: flex;
    gap: 1rem;
    min-height: 0;
    height: 100%;
}

.ota-embedded-main[b-lpke9bjmu2] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
}

.ota__body[b-lpke9bjmu2],
.ota[b-lpke9bjmu2]  .ota-embedded-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.ota-approval-note[b-lpke9bjmu2] {
    margin: 0;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1.4;
    background: var(--shell-surface-muted, rgba(0, 0, 0, 0.04));
    color: var(--shell-text-secondary, #5b6a7d);
}
/* /Pages/Transactions/TimeMgt/TimeLogManagerPage.razor.rz.scp.css */
/* Time Log Manager — page-specific layout only (shell pieces are global). */

.tlm[b-ie9xvmetow] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tlm__shell[b-ie9xvmetow] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.tlm__toolbar[b-ie9xvmetow] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.tlm__panel[b-ie9xvmetow] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tlm-filters[b-ie9xvmetow] {
    display: grid;
    grid-template-columns: 0.6fr 1.6fr 0.8fr 0.8fr;
    gap: 0.35rem 1rem;
    align-items: end;
}

@media (max-width: 980px) {
    .tlm-filters[b-ie9xvmetow] {
        grid-template-columns: 1fr 1fr;
    }
}

.tlm-field[b-ie9xvmetow] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.tlm-switch[b-ie9xvmetow] {
    padding-bottom: 1.6rem;
}

.tlm-empinfo[b-ie9xvmetow] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    margin: 0;
    font-size: 0.8rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.tlm-empinfo em[b-ie9xvmetow] {
    font-style: normal;
    font-weight: 600;
    margin-right: 0.3rem;
    color: var(--shell-text, #1f2a37);
}

.tlm-inactive[b-ie9xvmetow] {
    color: var(--shell-warning, #b7791f);
    font-weight: 600;
}

.tlm-gridwrap[b-ie9xvmetow] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tlm-placeholder[b-ie9xvmetow] {
    margin: 0.6rem 0;
    font-size: 0.86rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.tlm-totals[b-ie9xvmetow] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.3rem;
    margin: 0;
    padding: 0.45rem 0.7rem;
    border-radius: 6px;
    font-size: 0.8rem;
    background: var(--shell-surface-muted, rgba(0, 0, 0, 0.04));
}

.tlm-totals em[b-ie9xvmetow] {
    font-style: normal;
    font-weight: 600;
    margin-right: 0.3rem;
}

.tlm-totals__note[b-ie9xvmetow] {
    margin-left: auto;
    color: var(--shell-text-secondary, #5b6a7d);
}

/* Row tints: an unsaved tick, a frozen day (attendance generated), a day
   with a single punch (missing In or Out). */
.tlm[b-ie9xvmetow]  .tlm-row--dirty td {
    background: rgba(255, 193, 7, 0.12);
}

.tlm[b-ie9xvmetow]  .tlm-row--frozen td {
    color: var(--shell-text-secondary, #5b6a7d);
}

.tlm[b-ie9xvmetow]  .tlm-row--single td {
    background: rgba(220, 53, 69, 0.07);
}

.tlm-cancel[b-ie9xvmetow] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.2rem 0.1rem 0.4rem;
}

.tlm-cancel__what[b-ie9xvmetow] {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
}

.tlm-cancel__actions[b-ie9xvmetow] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.3rem;
}

.tlm__redirect[b-ie9xvmetow] {
    margin: 1rem;
    font-size: 0.9rem;
    color: var(--shell-text-secondary, #5b6a7d);
}

.tlm__body[b-ie9xvmetow] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}
/* /Pages/Workflow/WorkflowManagerPage.razor.rz.scp.css */
/* Workflow Manager - the list on the left, the route on the right, help after
   it. FLEX, not grid: app.css forces display:flex on a master-body holding a
   help panel, at a specificity a scoped rule cannot beat. */

.wfm[b-5bu9kf00ad] {
    display: block;
    width: 100%;
}

/* The panel's own inset - app.css gives .prod-master__panel no padding. */
.wfm .prod-master__panel[b-5bu9kf00ad] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
}

.wfm__body[b-5bu9kf00ad] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

/* The list is what the splitter sizes; the route takes whatever is left.
   width: var(), NOT flex-basis: var() - flex-basis does not track a custom
   property, and a splitter written that way moves nothing. */
.wfm__list[b-5bu9kf00ad] {
    flex: 0 0 auto;
    width: var(--wfm-list-w, 720px);
    box-sizing: border-box;
    min-width: 0;
}

.wfm__detail[b-5bu9kf00ad] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* The handle. Wider than it looks: the grip is 4px but the hit area is the
   whole 10px column, because a 4px target is a target nobody can hit. */
.wfm__splitter[b-5bu9kf00ad] {
    flex: 0 0 10px;
    width: 10px;
    align-self: stretch;
    min-height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: col-resize;
    touch-action: none;
    border-radius: .25rem;
}

.wfm__splitter-grip[b-5bu9kf00ad] {
    width: 4px;
    height: 3rem;
    border-radius: 999px;
    background: var(--shell-border, #e2e8f0);
    transition: background .12s ease, height .12s ease;
}

.wfm__splitter:hover .wfm__splitter-grip[b-5bu9kf00ad],
.wfm__splitter:focus-visible .wfm__splitter-grip[b-5bu9kf00ad],
.wfm__splitter.is-dragging .wfm__splitter-grip[b-5bu9kf00ad] {
    background: var(--shell-accent, #0f766e);
    height: 5rem;
}

.wfm__splitter:focus-visible[b-5bu9kf00ad] {
    outline: 2px solid var(--shell-accent, #0f766e);
    outline-offset: 1px;
}

/* Narrow: the two stack, and a splitter between stacked panes means nothing. */
@media (max-width: 1100px) {
    .wfm__body[b-5bu9kf00ad] {
        flex-direction: column;
    }

    .wfm__list[b-5bu9kf00ad] {
        flex: 1 1 auto;
        width: auto;
    }

    .wfm__detail[b-5bu9kf00ad] {
        flex: 1 1 auto;
    }

    .wfm__splitter[b-5bu9kf00ad] {
        display: none;
    }
}

@media print {
    .wfm__splitter[b-5bu9kf00ad] { display: none !important; }
}

/* ONE LINE: the three fields share what is going, the buttons take only
   what they need, and the summary sits underneath them all. A grid of equal
   columns put the buttons in a 200px cell and stacked them. */
.wfm__filters[b-5bu9kf00ad] {
    display: flex;
    flex-wrap: wrap;
    /* TOPS together. Every cell is label / control / hint, so aligning the
       tops aligns the controls - and the hints, which differ in length, stop
       deciding where anything sits. */
    align-items: flex-start;
    gap: .5rem .9rem;
}

.wfm__field[b-5bu9kf00ad] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.wfm__field > label[b-5bu9kf00ad] {
    font-size: .78rem;
    font-weight: 600;
    color: var(--shell-text-muted, #64748b);
}

.wfm__dialog-actions[b-5bu9kf00ad] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
}

/* ── The progress bar. The same shape in the grid cell and on the panel, so
   a document reads the same in both. ── */
.wfm__bar[b-5bu9kf00ad] {
    position: relative;
    height: 1.1rem;
    border-radius: 999px;
    background: var(--shell-surface-2, #f1f5f9);
    border: 1px solid var(--shell-border, #e2e8f0);
    overflow: hidden;
}

.wfm__bar--big[b-5bu9kf00ad] {
    height: 1.5rem;
}

.wfm__bar-fill[b-5bu9kf00ad] {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--shell-accent, #0f766e);
    opacity: .28;
}

.wfm__bar-fill--done[b-5bu9kf00ad] {
    opacity: .5;
}

.wfm__bar-text[b-5bu9kf00ad] {
    position: relative;
    display: block;
    text-align: center;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.1rem;
}

.wfm__bar--big .wfm__bar-text[b-5bu9kf00ad] {
    line-height: 1.5rem;
    font-size: .8rem;
}

.wfm__progress[b-5bu9kf00ad] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.wfm__headline-meta[b-5bu9kf00ad] {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.wfm__chip[b-5bu9kf00ad] {
    border: 1px solid var(--shell-border, #e2e8f0);
    background: var(--shell-surface-2, #f8fafc);
    border-radius: 999px;
    padding: .1rem .6rem;
    font-size: .74rem;
    white-space: nowrap;
}

.wfm__chip--done[b-5bu9kf00ad] {
    border-color: var(--shell-success-border, #86efac);
}

.wfm__chip--open[b-5bu9kf00ad] {
    border-color: var(--shell-accent, #0f766e);
}

.wfm__chip--late[b-5bu9kf00ad] {
    border-color: var(--shell-warning-border, #fed7aa);
}

/* ── The route. One card per step, in its own state, with its people under
   it - the picture the desktop's grid never gave. ── */
.wfm__route[b-5bu9kf00ad] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.wfm__step[b-5bu9kf00ad] {
    border: 1px solid var(--shell-border, #e2e8f0);
    border-left: 4px solid var(--shell-border, #e2e8f0);
    border-radius: .5rem;
    padding: .55rem .7rem;
    background: var(--shell-surface, #fff);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.wfm__step--on[b-5bu9kf00ad] {
    outline: 2px solid var(--shell-accent, #0f766e);
    outline-offset: 1px;
}

/* The five states, told apart by the left edge. */
.wfm__step--done[b-5bu9kf00ad] { border-left-color: #22c55e; }
.wfm__step--open[b-5bu9kf00ad] { border-left-color: #0ea5e9; }
.wfm__step--bad[b-5bu9kf00ad]  { border-left-color: #ef4444; }
.wfm__step--off[b-5bu9kf00ad]  { border-left-color: #f59e0b; }
.wfm__step--late[b-5bu9kf00ad] { border-left-color: #f59e0b; }
.wfm__step--idle[b-5bu9kf00ad] { border-left-color: #cbd5e1; }

.wfm__step-head[b-5bu9kf00ad] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.wfm__step-order[b-5bu9kf00ad] {
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--shell-surface-2, #f1f5f9);
    border: 1px solid var(--shell-border, #e2e8f0);
    font-size: .72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wfm__step-name[b-5bu9kf00ad] {
    font-weight: 600;
    flex: 1 1 auto;
    min-width: 0;
}

.wfm__step-status[b-5bu9kf00ad] {
    font-size: .74rem;
    color: var(--shell-text-muted, #64748b);
}

.wfm__step-desc[b-5bu9kf00ad],
.wfm__step-note[b-5bu9kf00ad] {
    font-size: .78rem;
    color: var(--shell-text-muted, #64748b);
}

.wfm__step-note[b-5bu9kf00ad] {
    border-left: 2px solid var(--shell-border, #e2e8f0);
    padding-left: .5rem;
    font-style: italic;
}

.wfm__step-meta[b-5bu9kf00ad] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    font-size: .74rem;
    color: var(--shell-text-muted, #64748b);
}

.wfm__late[b-5bu9kf00ad] {
    color: #b45309;
    font-weight: 600;
}

.wfm__people[b-5bu9kf00ad] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.wfm__person[b-5bu9kf00ad] {
    border: 1px solid var(--shell-border, #e2e8f0);
    background: var(--shell-surface-2, #f8fafc);
    border-radius: 999px;
    padding: .1rem .55rem;
    font-size: .74rem;
    cursor: pointer;
    display: inline-flex;
    gap: .35rem;
    align-items: baseline;
}

.wfm__person--on[b-5bu9kf00ad] {
    outline: 2px solid var(--shell-accent, #0f766e);
    outline-offset: 1px;
}

.wfm__person--done[b-5bu9kf00ad] { border-color: #22c55e; }
.wfm__person--bad[b-5bu9kf00ad]  { border-color: #ef4444; }
.wfm__person--off[b-5bu9kf00ad]  { border-color: #f59e0b; }

.wfm__person-status[b-5bu9kf00ad] {
    font-size: .68rem;
    color: var(--shell-text-muted, #64748b);
}

.wfm__empty[b-5bu9kf00ad] {
    border: 1px dashed var(--shell-border, #e2e8f0);
    border-radius: .5rem;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--shell-text-muted, #64748b);
}

.wfm__empty h2[b-5bu9kf00ad] {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
}

/* Row colouring, the house status convention: orange for overdue. ::deep,
   because the grid renders its own rows. */
.wfm[b-5bu9kf00ad]  tr.wfm-row--late td {
    color: #b45309;
}

.wfm[b-5bu9kf00ad]  tr.wfm-row--done td {
    opacity: .75;
}

/* ── The reading dialogs ─────────────────────────────────────────────────── */

.wfm__table[b-5bu9kf00ad] { overflow: auto; max-height: 52vh; }

.wfm__table table[b-5bu9kf00ad] { width: 100%; border-collapse: collapse; font-size: 0.86rem; }

.wfm__table th[b-5bu9kf00ad],
.wfm__table td[b-5bu9kf00ad] {
    padding: 0.3rem 0.6rem;
    border-bottom: 1px solid var(--shell-border);
    text-align: left;
    vertical-align: top;
}

.wfm__table th[b-5bu9kf00ad] {
    position: sticky;
    top: 0;
    background: var(--shell-panel-background);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

.wfm__table .wfm__num[b-5bu9kf00ad] { text-align: right; font-variant-numeric: tabular-nums; }

.wfm__instructions[b-5bu9kf00ad] {
    white-space: pre-wrap;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--shell-border);
    border-radius: 8px;
    background: var(--shell-panel-background);
    max-height: 50vh;
    overflow: auto;
}

@media (max-width: 900px) {
    .wfm__actionlabel[b-5bu9kf00ad] { flex: 1 1 100%; }
}

/* ── The verbs, where the things they act on are ─────────────────────────────
   One button shape for both homes: a quiet square that only colours when it is
   hovered or means something strong (go / stop). In a grid cell they sit in a
   row; on a step card they sit in labelled clusters. */

.wfm-acts[b-5bu9kf00ad] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem;
    min-width: 0;
}

.wfm-acts__label[b-5bu9kf00ad] {
    flex: 0 0 auto;
    margin-right: .15rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .6;
}

.wfm-acts__gap[b-5bu9kf00ad] {
    width: 1px;
    height: 1.1rem;
    margin: 0 .2rem;
    background: var(--shell-border, #e2e8f0);
}

.wfm-acts--cell[b-5bu9kf00ad] { justify-content: center; flex-wrap: nowrap; gap: .15rem; }

.wfm-act[b-5bu9kf00ad] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: .4rem;
    background: transparent;
    color: var(--shell-text-secondary, #475569);
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.wfm-act .e-icons[b-5bu9kf00ad] { font-size: .82rem; line-height: 1; }

.wfm-act:hover:not(:disabled)[b-5bu9kf00ad] {
    background: var(--shell-surface-hover, rgba(148, 163, 184, .16));
    border-color: var(--shell-border, #e2e8f0);
    color: var(--shell-text-primary, #0f172a);
}

.wfm-act:focus-visible[b-5bu9kf00ad] {
    outline: 2px solid var(--shell-accent, #2563eb);
    outline-offset: 1px;
}

.wfm-act:active:not(:disabled)[b-5bu9kf00ad] { transform: translateY(1px); }

.wfm-act:disabled[b-5bu9kf00ad] { opacity: .32; cursor: default; }

.wfm-act--go:hover:not(:disabled)[b-5bu9kf00ad] {
    background: rgba(34, 197, 94, .14);
    border-color: rgba(34, 197, 94, .5);
    color: #15803d;
}

.wfm-act--stop:hover:not(:disabled)[b-5bu9kf00ad] {
    background: rgba(239, 68, 68, .12);
    border-color: rgba(239, 68, 68, .45);
    color: #b91c1c;
}

/* The card's own strip: separated from the step's facts by a hairline, and
   held back until the step is hovered or picked, so a route of six steps is
   still a route and not a wall of buttons. */
.wfm__stepacts[b-5bu9kf00ad] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-top: .15rem;
    padding-top: .4rem;
    border-top: 1px dashed var(--shell-border, #e2e8f0);
    opacity: .55;
    transition: opacity .12s ease;
}

.wfm__step:hover .wfm__stepacts[b-5bu9kf00ad],
.wfm__step--on .wfm__stepacts[b-5bu9kf00ad],
.wfm__stepacts:focus-within[b-5bu9kf00ad] { opacity: 1; }

/* Nothing here belongs on paper. */
@media print {
    .wfm-acts[b-5bu9kf00ad], .wfm__stepacts[b-5bu9kf00ad] { display: none !important; }
}

/* ── The filter bar's own cell, and the list's footer ────────────────────── */

/* 10rem, not 13: three fields and the two buttons then still share ONE line
   when the list pane is dragged in to 700px. They grow to fill whatever is
   going, so a wide pane loses nothing by it. */
.wfm__filters > .wfm__field[b-5bu9kf00ad] {
    flex: 1 1 10rem;
    min-width: 0;
}

/* Written to BEAT the rule above it - `.wfm__filters > .wfm__field` is two
   classes and would otherwise win the flex. It stays a COLUMN like every other
   field (spacer label, then its controls); the buttons sit in a row of their
   own inside it. */
.wfm__filters > .wfm__field--apply[b-5bu9kf00ad] {
    flex: 0 0 auto;
}

.wfm__field-spacer[b-5bu9kf00ad] {
    /* Same line box as a real label - it is one - so the row below it starts
       exactly where the inputs do. */
    user-select: none;
}

.wfm__field-buttons[b-5bu9kf00ad] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: .4rem;
}

.wfm__filters-note[b-5bu9kf00ad] {
    flex: 1 1 100%;
    margin-top: -.35rem;
}

.wfm__foot[b-5bu9kf00ad] { font-weight: 700; font-size: .84rem; }
.wfm__foot--num[b-5bu9kf00ad] { font-variant-numeric: tabular-nums; }

/* ── Health check (phase 9) ── */
.wfm__health td[b-5bu9kf00ad] { vertical-align: top; }
.wfm__health td:first-child[b-5bu9kf00ad] { width: 3.5rem; text-align: center; }

.wfm-sev[b-5bu9kf00ad] {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--shell-border);
}
.wfm-sev--error[b-5bu9kf00ad] { color: #b91c1c; background: rgba(239, 68, 68, .10); border-color: rgba(239, 68, 68, .40); }
.wfm-sev--warn[b-5bu9kf00ad]  { color: #b45309; background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .45); }
.wfm-sev--info[b-5bu9kf00ad]  { color: var(--shell-text-secondary); background: var(--shell-surface-2); }
.wfm-sev--ok[b-5bu9kf00ad]    { color: #15803d; background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .45); }

.wfm__health-counts[b-5bu9kf00ad] {
    margin: 0.75rem 0 0;
    padding-left: 1.1rem;
    color: var(--shell-text-muted);
    font-size: 0.86rem;
}

/* the route: Diagram / Steps switch and the round picker (2026-09-28) */
.wfm__viewbar[b-5bu9kf00ad] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0.6rem 0 0.4rem; }
.wfm__viewswitch[b-5bu9kf00ad] { display: inline-flex; border: 1px solid var(--shell-border); border-radius: 8px; overflow: hidden; }
.wfm__viewbtn[b-5bu9kf00ad] { display: inline-flex; align-items: center; gap: 0.3rem; border: none; background: var(--shell-panel-background); color: var(--shell-text-secondary);
                font: inherit; font-size: 0.85rem; padding: 0.3rem 0.75rem; cursor: pointer; }
.wfm__viewbtn + .wfm__viewbtn[b-5bu9kf00ad] { border-left: 1px solid var(--shell-border); }
.wfm__viewbtn--on[b-5bu9kf00ad] { background: var(--shell-panel-background-soft); color: var(--shell-text-primary); font-weight: 600; box-shadow: inset 0 -2px 0 var(--shell-accent); }
.wfm__viewbtn:focus-visible[b-5bu9kf00ad] { outline: 2px solid var(--shell-accent); outline-offset: -2px; }
.wfm__round[b-5bu9kf00ad] { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--shell-text-secondary); }
.wfm__round select[b-5bu9kf00ad] { font: inherit; padding: 0.15rem 0.4rem; border: 1px solid var(--shell-border); border-radius: 6px;
                     background: var(--shell-panel-background); color: var(--shell-text-primary); }
/* /Pages/Workflow/WorkflowSetupPage.razor.rz.scp.css */
/* Work-Flow Set-up - the definition editor. Three columns: the work-flow
   cards, the form, and the help panel. Every panel runs the full width of the
   form column (the house rule); the fields inside it sit two or three across
   and fall back to one on a narrow screen. */

/* NO padding on the page root. The gutter is the shell's: MainLayout's
   tab-host panel pads `1rem 1.15rem`, and .master-sticky-top and
   .master-sticky-toolbar bleed -1.15rem so their backgrounds span it. Padding
   here as well double-pads the page and pushes the sticky header past the
   window edge - measured at 1442px against a 1440px viewport. */
.wfs[b-gs8zvm5zr5] {
    display: block;
    width: 100%;
}

/* THE PANEL'S OWN INSET. app.css gives .prod-master__panel its border, radius
   and background but NO padding - the 1.1rem 1.15rem that looks like it comes
   with the class actually belongs to .ct-page__help a few rules above it. So
   every page declares this for itself, and a page that leaves it out gets
   fields sitting on the panel's border. */
.wfs .prod-master__panel[b-gs8zvm5zr5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
}

/* list | splitter | form | help.

   FLEX, NOT GRID, and not by preference. app.css carries
       .master-body:not(.master-body--scroll):has(> .ct-page__help)
           { display: flex; gap: 1rem; align-items: stretch; }
   which is specificity (0,3,0) - higher than a scoped .wfs__body[b-xxx] at
   (0,2,0). Any grid-template-columns written here is simply never applied, so
   a first draft that sized the list as a grid column looked right and did
   nothing. The panes size themselves with flex-basis instead, which is what
   the help panel beside them already does (--invnet-help-w, same idea).

   The list's width is a custom property so the splitter can set it without
   touching the rule; the form takes what is left, and min-width:0 on both is
   what stops a long condition or the step grid pushing the page sideways. */
.wfs__body[b-gs8zvm5zr5] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

/* WIDTH, not flex-basis. app.css sizes a master-body's sections with
       :where(.master-body:not(.master-body--scroll)) > :where(section:not(.wizard))
           { flex: 1 1 auto; min-width: 0 }
   and a flex-basis carrying a var() does not survive against it - measured in
   the browser: the basis computed to `auto` and the pane stayed content-sized,
   which is exactly "the splitter moves but nothing happens". An explicit width
   does track the variable. flex: 0 0 auto then stops the pane growing or
   shrinking away from that width, and border-box makes the number the splitter
   writes the width actually seen. */
.wfs__list[b-gs8zvm5zr5] {
    flex: 0 0 auto;
    width: var(--wfs-list-w, 320px);
    box-sizing: border-box;
}

.wfs__form[b-gs8zvm5zr5] {
    flex: 1 1 auto;
}

/* Collapsed: the rail takes the list's place. The list is HIDDEN rather than
   unrendered, so its search text and scroll position are still there when it
   comes back. */
.wfs__body--collapsed .wfs__list[b-gs8zvm5zr5] {
    display: none;
}

.wfs__rail[b-gs8zvm5zr5] {
    flex: 0 0 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: .5rem 0;
    align-self: flex-start;
    border: 1px solid var(--shell-border, #e2e8f0);
    border-radius: .5rem;
    background: var(--shell-surface-2, #f8fafc);
}

.wfs__rail-label[b-gs8zvm5zr5] {
    writing-mode: vertical-rl;
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--shell-text-muted, #64748b);
}

.wfs__rail-count[b-gs8zvm5zr5] {
    font-size: .72rem;
    font-weight: 600;
}

.wfs__list-toggle[b-gs8zvm5zr5],
.wfs__rail-toggle[b-gs8zvm5zr5] {
    min-width: 1.9rem;
    padding: .15rem .3rem;
}

/* The handle. Wider than it looks: the grip is 4px but the hit area is the
   whole 10px column, because an 4px target is a target nobody can hit. */
.wfs__splitter[b-gs8zvm5zr5] {
    flex: 0 0 10px;
    width: 10px;
    align-self: stretch;
    min-height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: col-resize;
    touch-action: none;
    border-radius: .25rem;
}

.wfs__splitter-grip[b-gs8zvm5zr5] {
    width: 4px;
    height: 3rem;
    border-radius: 999px;
    background: var(--shell-border, #e2e8f0);
    transition: background .12s ease, height .12s ease;
}

.wfs__splitter:hover .wfs__splitter-grip[b-gs8zvm5zr5],
.wfs__splitter:focus-visible .wfs__splitter-grip[b-gs8zvm5zr5],
.wfs__splitter.is-dragging .wfs__splitter-grip[b-gs8zvm5zr5] {
    background: var(--shell-accent, #0f766e);
    height: 5rem;
}

.wfs__splitter:focus-visible[b-gs8zvm5zr5] {
    outline: 2px solid var(--shell-accent, #0f766e);
    outline-offset: 1px;
}

.wfs__list[b-gs8zvm5zr5],
.wfs__form[b-gs8zvm5zr5] {
    min-width: 0;
}

.wfs__form[b-gs8zvm5zr5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* The fields of a panel. --wide takes two tracks, --full the whole panel, so a
   condition or a set of instructions is not typed into a thumbnail. */
.wfs__fields[b-gs8zvm5zr5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .75rem 1rem;
    width: 100%;
}

.wfs__field[b-gs8zvm5zr5] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.wfs__field > label[b-gs8zvm5zr5] {
    font-size: .78rem;
    font-weight: 600;
    color: var(--shell-text-muted, #64748b);
}

.wfs__field--wide[b-gs8zvm5zr5] {
    grid-column: span 2;
}

.wfs__field--full[b-gs8zvm5zr5] {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    /* Stacked: the splitter has nothing to split, so it goes away rather than
       sitting in the flow as a stray 10px strip, and the list gives up its
       fixed width. */
    .wfs__body[b-gs8zvm5zr5] {
        flex-direction: column;
    }

    .wfs__list[b-gs8zvm5zr5],
    .wfs__form[b-gs8zvm5zr5] {
        flex: 1 1 auto;
    }

    .wfs__splitter[b-gs8zvm5zr5],
    .wfs__rail[b-gs8zvm5zr5] {
        display: none;
    }

    .wfs__field--wide[b-gs8zvm5zr5] {
        grid-column: 1 / -1;
    }
}

/* A control with a button beside it - the step picker and its New step name. */
.wfs__with-button[b-gs8zvm5zr5] {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.wfs__with-button > :first-child[b-gs8zvm5zr5] {
    flex: 1 1 auto;
    min-width: 0;
}

.wfs__row-actions[b-gs8zvm5zr5] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .25rem;
}

.wfs__dialog-actions[b-gs8zvm5zr5] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
}

.wfs__empty[b-gs8zvm5zr5] {
    border: 1px dashed var(--shell-border, #e2e8f0);
    border-radius: .5rem;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--shell-text-muted, #64748b);
}

.wfs__empty h2[b-gs8zvm5zr5] {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
}

/* Who a step's two lists came out as, as read back from the database. */
.wfs__people[b-gs8zvm5zr5] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.wfs__person[b-gs8zvm5zr5] {
    border: 1px solid var(--shell-border, #e2e8f0);
    background: var(--shell-surface-2, #f8fafc);
    border-radius: 999px;
    padding: .1rem .6rem;
    font-size: .78rem;
}

/* The step window is tall; let it scroll rather than run off the screen. */
.wfs-step-dialog[b-gs8zvm5zr5]  .e-dlg-content {
    max-height: 70vh;
    overflow-y: auto;
}

/* ── The step window, grouped ────────────────────────────────────────────
   The legacy window puts the two policies in their own boxes and leaves the
   rest loose. Here every part is a card with a heading and one line saying
   what it decides, so a setting can be found without reading the whole
   window - and the two policies sit side by side, because they are read
   against each other. */
.wfs-step[b-gs8zvm5zr5] {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

/* The form and the window's own guide side by side. The guide keeps to the
   top of the scrolling content, so it is in view wherever the form is. */
.wfs-step-shell[b-gs8zvm5zr5] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    min-width: 0;
}

.wfs-step-shell__form[b-gs8zvm5zr5] {
    flex: 1 1 auto;
    min-width: 0;
}

.wfs-step-shell__help[b-gs8zvm5zr5] {
    position: sticky;
    top: 0;
    max-height: calc(70vh - 2rem);
    align-self: flex-start;
}

@media (max-width: 900px) {
    .wfs-step-shell[b-gs8zvm5zr5] { flex-direction: column; align-items: stretch; }
    .wfs-step-shell__help[b-gs8zvm5zr5] { position: static; max-height: none; }
}

.wfs-step__group[b-gs8zvm5zr5] {
    border: 1px solid var(--shell-border, #e2e8f0);
    border-radius: .65rem;
    background: var(--shell-surface, #fff);
    padding: .9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 0;
}

.wfs-step__group-head h3[b-gs8zvm5zr5] {
    margin: 0;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.wfs-step__group-head p[b-gs8zvm5zr5] {
    margin: .15rem 0 0;
    font-size: .78rem;
    color: var(--shell-text-muted, #64748b);
}

/* A hairline in the section's own colour, so completion and rejection are
   told apart at a glance rather than by reading the headings. */
.wfs-step__group--ok[b-gs8zvm5zr5] {
    border-top: 3px solid var(--shell-success-border, #86efac);
}

.wfs-step__group--bad[b-gs8zvm5zr5] {
    border-top: 3px solid var(--shell-danger-border, #fecaca);
}

/* Side by side on a wide dialog, stacked when there is no room. */
.wfs-step__policies[b-gs8zvm5zr5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: .85rem;
    align-items: start;
}

@media (max-width: 760px) {
    .wfs-step__policies[b-gs8zvm5zr5] {
        grid-template-columns: 1fr;
    }
}

/* ── Step details: the step as plain text ───────────────────────────────── */

.wfs-view[b-gs8zvm5zr5] { display: flex; flex-direction: column; gap: .9rem; max-height: 62vh; overflow: auto; }

.wfs-view section[b-gs8zvm5zr5] { min-width: 0; }

.wfs-view h3[b-gs8zvm5zr5] {
    margin: 0 0 .35rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--shell-text-muted, #64748b);
}

.wfs-view dl[b-gs8zvm5zr5] {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: .25rem .9rem;
    margin: 0;
    font-size: .88rem;
}

.wfs-view dt[b-gs8zvm5zr5] { color: var(--shell-text-muted, #64748b); }
.wfs-view dd[b-gs8zvm5zr5] { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.wfs-view__long[b-gs8zvm5zr5] { white-space: pre-wrap; }

@media (max-width: 720px) {
    .wfs-view dl[b-gs8zvm5zr5] { grid-template-columns: minmax(0, 1fr); }
    .wfs-view dt[b-gs8zvm5zr5] { margin-top: .35rem; font-weight: 600; }
}

/* ── the route designer: Diagram / Table switch ───────────────────────────── */

.wfs__viewbar[b-gs8zvm5zr5] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.2rem 0 0.5rem; }
.wfs__viewswitch[b-gs8zvm5zr5] { display: inline-flex; border: 1px solid var(--shell-border); border-radius: 8px; overflow: hidden; }
.wfs__viewbtn[b-gs8zvm5zr5] { display: inline-flex; align-items: center; gap: 0.3rem; border: none; background: var(--shell-panel-background); color: var(--shell-text-secondary);
                font: inherit; font-size: 0.85rem; padding: 0.3rem 0.75rem; cursor: pointer; }
.wfs__viewbtn + .wfs__viewbtn[b-gs8zvm5zr5] { border-left: 1px solid var(--shell-border); }
.wfs__viewbtn--on[b-gs8zvm5zr5] { background: var(--shell-panel-background-soft); color: var(--shell-text-primary); font-weight: 600; box-shadow: inset 0 -2px 0 var(--shell-accent); }
.wfs__viewbtn:focus-visible[b-gs8zvm5zr5] { outline: 2px solid var(--shell-accent); outline-offset: -2px; }
.wfs__pending[b-gs8zvm5zr5] { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--shell-text-secondary); }
.wfs__pending .e-icons[b-gs8zvm5zr5] { color: #d97706; }
.wfs__note[b-gs8zvm5zr5] { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0 0 0.5rem; padding: 0.4rem 0.6rem; font-size: 0.84rem;
             border: 1px solid var(--shell-border); border-left-width: 4px; border-radius: 6px; background: var(--shell-panel-background); color: var(--shell-text-primary); }
.wfs__note span[b-gs8zvm5zr5] { flex: 1 1 auto; }
.wfs__note--info[b-gs8zvm5zr5] { border-left-color: #0ea5e9; }
.wfs__note--warn[b-gs8zvm5zr5] { border-left-color: #d97706; }
.wfs__note--error[b-gs8zvm5zr5] { border-left-color: #ef4444; }
.wfs__note-x[b-gs8zvm5zr5] { border: none; background: transparent; color: var(--shell-text-secondary); cursor: pointer; font: inherit; padding: 0 0.2rem; }
/* /Pages/Workflow/WorkflowStepMasterPage.razor.rz.scp.css */
/* Workflow Steps - the step master. Same shape as Workflow Set-up beside it:
   the step list, a splitter, the form, the help panel.

   FLEX, NOT GRID: app.css carries
       .master-body:not(.master-body--scroll):has(> .ct-page__help)
           { display: flex; gap: 1rem; align-items: stretch; }
   at specificity (0,3,0), which beats a scoped .wfsm__body[b-xxx] at (0,2,0).
   Grid columns written here would never be applied. The list is sized with
   WIDTH rather than flex-basis for the same reason - a flex-basis carrying a
   var() loses to app.css's `flex: 1 1 auto` on a master-body's sections. */

/* NO padding on the page root. The gutter is the shell's: MainLayout's
   tab-host panel pads `1rem 1.15rem`, and .master-sticky-top and
   .master-sticky-toolbar bleed -1.15rem so their backgrounds span it. Padding
   here as well double-pads the page and pushes the sticky header past the
   window edge - measured at 1442px against a 1440px viewport. */
.wfsm[b-0b4n1ae5vo] {
    display: block;
    width: 100%;
}

/* THE PANEL'S OWN INSET. app.css gives .prod-master__panel its border, radius
   and background but NO padding - the 1.1rem 1.15rem that looks like it comes
   with the class actually belongs to .ct-page__help a few rules above it. So
   every page declares this for itself (ProductMaster and the rest all carry
   the same block), and a page that leaves it out gets fields sitting on the
   panel's border, which is what this one did. */
.wfsm .prod-master__panel[b-0b4n1ae5vo] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
}

.wfsm__body[b-0b4n1ae5vo] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.wfsm__list[b-0b4n1ae5vo] {
    flex: 0 0 auto;
    width: var(--wfsm-list-w, 320px);
    box-sizing: border-box;
    min-width: 0;
}

.wfsm__form[b-0b4n1ae5vo] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wfsm__body--collapsed .wfsm__list[b-0b4n1ae5vo] {
    display: none;
}

.wfsm__rail[b-0b4n1ae5vo] {
    flex: 0 0 2.5rem;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: .5rem 0;
    border: 1px solid var(--shell-border, #e2e8f0);
    border-radius: .5rem;
    background: var(--shell-surface-2, #f8fafc);
}

.wfsm__rail-label[b-0b4n1ae5vo] {
    writing-mode: vertical-rl;
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--shell-text-muted, #64748b);
}

.wfsm__rail-count[b-0b4n1ae5vo] {
    font-size: .72rem;
    font-weight: 600;
}

.wfsm__list-toggle[b-0b4n1ae5vo],
.wfsm__rail-toggle[b-0b4n1ae5vo] {
    min-width: 1.9rem;
    padding: .15rem .3rem;
}

.wfsm__splitter[b-0b4n1ae5vo] {
    flex: 0 0 10px;
    width: 10px;
    align-self: stretch;
    min-height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: col-resize;
    touch-action: none;
    border-radius: .25rem;
}

.wfsm__splitter-grip[b-0b4n1ae5vo] {
    width: 4px;
    height: 3rem;
    border-radius: 999px;
    background: var(--shell-border, #e2e8f0);
    transition: background .12s ease, height .12s ease;
}

.wfsm__splitter:hover .wfsm__splitter-grip[b-0b4n1ae5vo],
.wfsm__splitter:focus-visible .wfsm__splitter-grip[b-0b4n1ae5vo],
.wfsm__splitter.is-dragging .wfsm__splitter-grip[b-0b4n1ae5vo] {
    background: var(--shell-accent, #0f766e);
    height: 5rem;
}

.wfsm__splitter:focus-visible[b-0b4n1ae5vo] {
    outline: 2px solid var(--shell-accent, #0f766e);
    outline-offset: 1px;
}

/* Fields: two or three across, one on a narrow screen. */
.wfsm__fields[b-0b4n1ae5vo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .75rem 1rem;
    width: 100%;
}

.wfsm__field[b-0b4n1ae5vo] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.wfsm__field > label[b-0b4n1ae5vo] {
    font-size: .78rem;
    font-weight: 600;
    color: var(--shell-text-muted, #64748b);
}

.wfsm__field--wide[b-0b4n1ae5vo] {
    grid-column: span 2;
}

.wfsm__field--full[b-0b4n1ae5vo] {
    grid-column: 1 / -1;
}

.wfsm__tabs[b-0b4n1ae5vo] {
    width: 100%;
}

/* Embedded in a dialog: the form only - no card list, no toolbar, no help
   panel. It gets the panel inset itself, since there is no page around it. */
.wfsm__embedded-body[b-0b4n1ae5vo] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 62vh;
    overflow-y: auto;
    padding-right: .25rem;
}

.wfsm-embedded[b-0b4n1ae5vo]  .e-dlg-content {
    padding-top: .75rem;
}

/* Inside a tab: VERTICAL padding only. The panel around it already insets by
   1.15rem, so a horizontal padding here would push the tab's content to 36px
   while the fields in the panel above sit at 18px - measured. Nothing lines up
   with anything after that. */
.wfsm__tabbody[b-0b4n1ae5vo] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1rem 0 .25rem;
}

/* Syncfusion's own content pane, which is what actually wraps the tab body. */
.wfsm__tabs[b-0b4n1ae5vo]  .e-content {
    padding: 0;
}

.wfsm__row-actions[b-0b4n1ae5vo] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}

.wfsm__dialog-actions[b-0b4n1ae5vo] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
}

/* The instructions editor is the SAME control in both modes - read-only in
   View. Only its chrome changes, so a reader is not looking at a different
   thing from the writer. ::deep, because the editor renders its own tree. */
.wfsm__editor[b-0b4n1ae5vo]  .e-rte-content {
    background: var(--shell-surface, #fff);
}

.wfsm__editor.e-rte-readonly[b-0b4n1ae5vo]  .e-rte-content,
.wfsm__editor[b-0b4n1ae5vo]  .e-rte-content[contenteditable="false"] {
    background: var(--shell-surface-2, #f8fafc);
}

/* Kept for the legacy-worksheet note and anything else read as a document. */
.wfsm__readonly-doc[b-0b4n1ae5vo] {
    border: 1px solid var(--shell-border, #e2e8f0);
    border-radius: .5rem;
    padding: .9rem 1rem;
    background: var(--shell-surface, #fff);
    min-height: 8rem;
    max-height: 26rem;
    overflow-y: auto;
}

.wfsm__docs[b-0b4n1ae5vo] {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

/* The name takes the room, the note follows it, Remove sits at the far right
   so a column of them lines up however long the names are. */
.wfsm__doc[b-0b4n1ae5vo] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.wfsm__doc-name[b-0b4n1ae5vo] {
    font-weight: 600;
}

.wfsm__doc-note[b-0b4n1ae5vo] {
    color: var(--shell-text-muted, #64748b);
    flex: 1 1 auto;
    min-width: 0;
}

.wfsm__doc-remove[b-0b4n1ae5vo] {
    margin-left: auto;
    padding: .15rem .6rem;
    font-size: .78rem;
}

/* A control with a button beside it - the parent picker and its New step. */
.wfsm__with-button[b-0b4n1ae5vo] {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.wfsm__with-button > :first-child[b-0b4n1ae5vo] {
    flex: 1 1 auto;
    min-width: 0;
}

/* The desktop's worksheet, kept but not written. */
.wfsm__legacy[b-0b4n1ae5vo] {
    border: 1px dashed var(--shell-border, #e2e8f0);
    border-radius: .5rem;
    padding: .75rem 1rem;
    background: var(--shell-surface-2, #f8fafc);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: flex-start;
}

.wfsm__legacy p[b-0b4n1ae5vo] {
    margin: 0;
    font-size: .84rem;
}

.wfsm__empty[b-0b4n1ae5vo] {
    border: 1px dashed var(--shell-border, #e2e8f0);
    border-radius: .5rem;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--shell-text-muted, #64748b);
}

.wfsm__empty h2[b-0b4n1ae5vo] {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
}

.wfsm__people[b-0b4n1ae5vo] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.wfsm__person[b-0b4n1ae5vo] {
    border: 1px solid var(--shell-border, #e2e8f0);
    background: var(--shell-surface-2, #f8fafc);
    border-radius: 999px;
    padding: .1rem .6rem;
    font-size: .78rem;
}

@media (max-width: 900px) {
    .wfsm__body[b-0b4n1ae5vo] {
        flex-direction: column;
    }

    .wfsm__list[b-0b4n1ae5vo],
    .wfsm__form[b-0b4n1ae5vo] {
        flex: 1 1 auto;
        width: auto;
    }

    .wfsm__splitter[b-0b4n1ae5vo],
    .wfsm__rail[b-0b4n1ae5vo] {
        display: none;
    }

    .wfsm__field--wide[b-0b4n1ae5vo] {
        grid-column: 1 / -1;
    }
}