@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css';

/* /Modules/Budget/Pages/Dashboard/Page.razor.rz.scp.css */
.bdg-tabs[b-nqkpccn3us] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.bdg-kpis[b-nqkpccn3us] {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
    grid-template-columns: 1fr;
}

@media (min-width: 560px) {
    .bdg-kpis[b-nqkpccn3us] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1100px) {
    .bdg-kpis[b-nqkpccn3us] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.bdg-kpi[b-nqkpccn3us] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.bdg-kpi__label[b-nqkpccn3us] {
    font-size: .8rem;
    line-height: 1.2;
    min-height: 2.4em;
    color: var(--colorNeutralForeground3);
}

.bdg-kpi__value[b-nqkpccn3us] {
    margin-top: 2px;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

.bdg-kpi__note[b-nqkpccn3us] {
    margin-top: auto;
    padding-top: 8px;
    font-size: .72rem;
    line-height: 1.2;
    color: var(--colorNeutralForeground3);
}

.bdg-kpi__note:empty[b-nqkpccn3us] {
    display: none;
}

.bdg-balance[b-nqkpccn3us] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.bdg-balance th[b-nqkpccn3us],
.bdg-balance td[b-nqkpccn3us] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
    text-align: start;
}

.bdg-balance thead th[b-nqkpccn3us],
.bdg-balance tbody th[b-nqkpccn3us] {
    font-weight: 600;
    color: var(--colorNeutralForeground3);
}

.bdg-balance tbody td[b-nqkpccn3us] {
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bdg-balance tbody tr:last-child th[b-nqkpccn3us],
.bdg-balance tbody tr:last-child td[b-nqkpccn3us] {
    border-bottom: none;
}

.bdg-charts[b-nqkpccn3us] {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

@media (min-width: 1100px) {
    .bdg-charts[b-nqkpccn3us] {
        grid-template-columns: 1fr 1fr;
    }
}

.bdg-panel-head[b-nqkpccn3us] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.bdg-panel-loading[b-nqkpccn3us] {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* /Modules/Main/Components/Launcher.razor.rz.scp.css */
/* App launcher — a grid of module tiles. Fluent 2 tokens throughout (elevation, spacing, type, color,
   motion) so it stays theme- and RTL-consistent. */

.launcher[b-3c817wq0cv] {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacingVerticalXXXL, 32px) var(--spacingHorizontalXXL, 24px);
}

.launcher__inner[b-3c817wq0cv] {
    max-width: 1200px;
    width: 100%;
}

.launcher__header[b-3c817wq0cv] {
    text-align: center;
    margin-bottom: var(--spacingVerticalXXL, 24px);
}

.launcher__title[b-3c817wq0cv] {
    margin: 0;
    font-size: var(--fontSizeBase600, 20px);
    line-height: var(--lineHeightBase600, 28px);
    font-weight: var(--fontWeightSemibold, 600);
    color: var(--colorNeutralForeground1);
}

.launcher__subtitle[b-3c817wq0cv] {
    margin: var(--spacingVerticalXS, 4px) 0 0;
    font-size: var(--fontSizeBase300, 14px);
    line-height: var(--lineHeightBase300, 20px);
    color: var(--colorNeutralForeground3);
}

.launcher__grid[b-3c817wq0cv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 1fr;
    gap: var(--spacingHorizontalL, 16px);
}

/* --- Card --------------------------------------------------------------------------------------- */
.launcher-card[b-3c817wq0cv] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: var(--spacingVerticalXS, 4px);
    padding: var(--spacingVerticalXXL, 24px) var(--spacingHorizontalL, 16px);
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusLarge, 6px);
    box-shadow: var(--shadow2);
    cursor: pointer;
    /* Fluent motion tokens for the elevation lift. */
    transition: box-shadow var(--durationNormal, 200ms) var(--curveEasyEase, ease),
                transform var(--durationNormal, 200ms) var(--curveEasyEase, ease);
}

.launcher-card:hover[b-3c817wq0cv] {
    box-shadow: var(--shadow8);
    transform: translateY(-2px);
}

.launcher-card:active[b-3c817wq0cv] {
    box-shadow: var(--shadow4);
    transform: none;
}

.launcher-card:focus-visible[b-3c817wq0cv] {
    outline: var(--strokeWidthThick, 2px) solid var(--colorStrokeFocus2, #000);
    outline-offset: 2px;
}

/* Icon tile — a soft, app-tinted rounded square (Fluent app-launcher look). The tint is derived from
   the per-app --app-color; the flat colour is the fallback where color-mix is unsupported. */
.launcher-card__icon[b-3c817wq0cv] {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-bottom: var(--spacingVerticalXS, 4px);
    border-radius: var(--borderRadiusLarge, 6px);
    background: var(--colorNeutralBackground3);
    background: color-mix(in srgb, var(--app-color) 14%, var(--colorNeutralBackground1));
}

.launcher-card__title[b-3c817wq0cv] {
    font-size: var(--fontSizeBase400, 16px);
    line-height: var(--lineHeightBase400, 22px);
    font-weight: var(--fontWeightSemibold, 600);
    color: var(--colorNeutralForeground1);
}

.launcher-card__desc[b-3c817wq0cv] {
    font-size: var(--fontSizeBase300, 14px);
    line-height: var(--lineHeightBase300, 20px);
    color: var(--colorNeutralForeground3);
    /* Keep card heights even regardless of description length. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Locked / coming-soon ----------------------------------------------------------------------- */
.launcher-card--locked[b-3c817wq0cv] {
    cursor: default;
    box-shadow: none;
}

.launcher-card--locked:hover[b-3c817wq0cv] {
    box-shadow: none;
    transform: none;
}

.launcher-card--locked .launcher-card__icon[b-3c817wq0cv] {
    background: var(--colorNeutralBackground3);
}

.launcher-card--locked .launcher-card__title[b-3c817wq0cv] {
    color: var(--colorNeutralForeground3);
}

.launcher-card__badge[b-3c817wq0cv] {
    margin-top: var(--spacingVerticalXS, 4px);
    padding: 2px var(--spacingHorizontalS, 8px);
    font-size: var(--fontSizeBase200, 12px);
    line-height: var(--lineHeightBase200, 16px);
    color: var(--colorNeutralForeground3);
    background: var(--colorNeutralBackground3);
    border-radius: var(--borderRadiusCircular, 9999px);
}

@media (prefers-reduced-motion: reduce) {
    .launcher-card[b-3c817wq0cv] {
        transition: none;
    }

    .launcher-card:hover[b-3c817wq0cv] {
        transform: none;
    }
}
/* /Shared/Components/Charts/Chart.razor.rz.scp.css */
/* Chrome around the canvas. Values come from the Fluent v9 design tokens the library publishes at
   runtime, matching DataGrid — the chart's own ink and gridlines are set in erp-chart.js, which reads
   the same tokens (canvas paints cannot reference CSS custom properties). */

.erp-chart[b-ptc0e0hmrg] {
    position: relative;
    width: 100%;
    color: var(--colorNeutralForeground1);
}

/* Chart.js sizes the canvas to this box, so the box must carry a real height — with
   maintainAspectRatio:false and no height here the canvas grows unbounded inside a flex parent. The
   height itself is inline, from the Height parameter.

   Two constraints come from the library, not from taste: the box must be positioned (it is what
   Chart.js observes for resize) and it must be dedicated to the canvas — hence the empty state is a
   sibling of this element rather than a child. */
.erp-chart__canvas[b-ptc0e0hmrg] {
    position: relative;
    width: 100%;
}

/* Deliberately no width/height on the canvas. Chart.js writes both as inline styles on every resize,
   and a stylesheet rule of our own pins it to the size it had when it was first drawn — the chart then
   never follows its container again (a window resize, a tab becoming visible, a dialog opening). */
.erp-chart__canvas > canvas[b-ptc0e0hmrg] {
    display: block;
}

/* Matches the grid's empty state, minus the card chrome — a chart is normally already inside one. */
.erp-chart__empty[b-ptc0e0hmrg] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacingVerticalM) var(--spacingHorizontalM);
    color: var(--colorNeutralForeground3);
    font-size: var(--fontSizeBase300);
    line-height: var(--lineHeightBase300);
}
/* /Shared/Components/DataGrid/DataGrid.razor.rz.scp.css */
/* Chrome around FluentDataGrid. Every colour, radius, spacing and type value comes from the Fluent
   v9 design tokens the library publishes at runtime, so this wrapper matches the official FluentUI
   look and follows the active theme instead of pinning its own palette. */

.erp-grid[b-v57p8a74jq] {
    background: var(--colorNeutralBackground1);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusLarge);
    padding: var(--spacingVerticalM) var(--spacingHorizontalM);
    color: var(--colorNeutralForeground1);
}

/* ---------- Toolbar ---------- */
.erp-grid__toolbar[b-v57p8a74jq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacingHorizontalM);
    flex-wrap: wrap;
    margin-bottom: var(--spacingHorizontalMNudge);
}

.erp-grid__toolbar-title[b-v57p8a74jq] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalMNudge);
    flex-wrap: wrap;
}

.erp-grid__title[b-v57p8a74jq] {
    font-size: var(--fontSizeBase400);
    line-height: var(--lineHeightBase300);
    font-weight: var(--fontWeightSemibold);
    color: var(--colorNeutralForeground1);
}

.erp-grid__count[b-v57p8a74jq] {
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase200);
    color: var(--colorNeutralForeground3);
}

.erp-grid__toolbar-actions[b-v57p8a74jq] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.erp-grid__selected[b-v57p8a74jq] {
    font-size: var(--fontSizeBase200);
    color: var(--colorBrandForeground1);
    font-weight: var(--fontWeightSemibold);
}

/* Selection chip: state the user can see and undo in one place. Active filters are surfaced by the
   count badge on the Filters toggle instead, so they need no second chip here. */
.erp-grid__selected[b-v57p8a74jq] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Shrink the FluentButton chrome down to a bare inline dismiss affordance.
   Two gotchas, both of which silently kill the rule otherwise: fluent-button exposes only a "content"
   part (so ::part(control) matches nothing), and CSS isolation does not stamp its scope attribute onto
   a child component's root element — hence ::deep from an element that does carry the scope. */
.erp-grid__toolbar-title[b-v57p8a74jq]  .erp-grid__chip-clear {
    min-width: 20px;
    /* min-height too: the component floors itself at 32px, which would otherwise win over height. */
    min-height: 0;
    height: 20px;
    padding: 0;
}

/* Count badge on the filter toggle, so active filters are visible while the row is collapsed. */
/* Wraps the icon-only Filters button so the count can float over its corner. */
.erp-grid__filter-toggle[b-v57p8a74jq] {
    position: relative;
    display: inline-flex;
}

/* Active-filter count: a small overlay on the button's corner, so it never widens the button. */
.erp-grid__badge[b-v57p8a74jq] {
    position: absolute;
    top: -2px;
    inset-inline-end: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--borderRadiusCircular);
    background: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand);
    font-size: var(--fontSizeBase200);
    font-weight: var(--fontWeightSemibold);
    line-height: 1;
    pointer-events: none;
}

/* Pressed state for the toolbar toggles (filters / columns / density), using Fluent's
   subtle-brand selected treatment. ::deep for the same reason as above. */
.erp-grid__toolbar-actions[b-v57p8a74jq]  .erp-grid__toggle--on {
    background: var(--colorBrandBackground2);
    color: var(--colorBrandForeground1);
    border-radius: var(--borderRadiusMedium);
}

/* ---------- Search ---------- */
.erp-grid__search[b-v57p8a74jq] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.erp-grid__search[b-v57p8a74jq]  .erp-grid__search-clear {
    min-width: 24px;
    min-height: 0;
    height: 24px;
    padding: 0;
}

/* ---------- Column chooser ---------- */
.erp-grid__chooser[b-v57p8a74jq] {
    position: relative;
}

/* Transparent, full-viewport catch layer so a click outside the chooser panel dismisses it.
   Sits just below the panel (z-index 20) and above the rest of the page. */
.erp-grid__backdrop[b-v57p8a74jq] {
    position: fixed;
    inset: 0;
    z-index: 19;
}

.erp-grid__chooser-panel[b-v57p8a74jq] {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 4px);
    z-index: 20;
    min-width: 200px;
    background: var(--colorNeutralBackground1);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    box-shadow: var(--shadow16);
    padding: var(--spacingHorizontalS);
}

.erp-grid__chooser-head[b-v57p8a74jq] {
    font-weight: var(--fontWeightSemibold);
    font-size: var(--fontSizeBase200);
    padding: 4px 6px var(--spacingHorizontalS);
    color: var(--colorNeutralForeground3);
}

.erp-grid__chooser-row[b-v57p8a74jq] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
    padding: 4px 6px;
    border-radius: var(--borderRadiusMedium);
    cursor: pointer;
    font-size: var(--fontSizeBase300);
    color: var(--colorNeutralForeground1);
}

.erp-grid__chooser-row:hover[b-v57p8a74jq] {
    background: var(--colorSubtleBackgroundHover);
}

/* ---------- Filter row ---------- */
.erp-grid__filters[b-v57p8a74jq] {
    display: flex;
    flex-wrap: wrap;
    /* Top-align, not bottom: a custom filter editor (e.g. FluentSelect renders a fluent-dropdown) can
       be a couple of pixels taller than the text inputs, and bottom-aligning then pushes its label off
       the shared baseline. Every FluentField puts its label in the first row, so aligning tops lines up
       all labels AND all control boxes regardless of small height differences below them. */
    align-items: flex-start;
    gap: var(--spacingHorizontalMNudge);
    padding: var(--spacingHorizontalMNudge) var(--spacingHorizontalM);
    margin-bottom: var(--spacingHorizontalMNudge);
    background: var(--colorNeutralBackground2);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke3);
    border-radius: var(--borderRadiusMedium);
}

/* FluentField wraps each filter input and carries 12px block margins. Flex aligns margin boxes, so
   align-items:flex-end sat the Clear button on the margin-box bottom — 12px below the inputs it should
   be level with — and inflated the row. Dropping them lets the row's own gap handle spacing and puts
   every control on one baseline. */
.erp-grid__filters[b-v57p8a74jq]  fluent-field {
    margin-block: 0;
}

/* The row top-aligns its items (so labels line up), but the Clear button has no label above it. Drop it
   by the label row's height (label line-box + the field's 2px row-gap) so it sits level with the filter
   controls rather than up at the labels. */
.erp-grid__filters[b-v57p8a74jq]  .erp-grid__filters-clear {
    align-self: flex-start;
    margin-block-start: 22px;
}

/* ---------- States ---------- */
/* Positioning context for the loading overlay, which dims the table in place rather than
   replacing it (a swap collapses the card and jumps the page on every refresh). */
.erp-grid__body[b-v57p8a74jq] {
    position: relative;
    min-height: 60px;
}

.erp-grid__body--loading > *:not(.erp-grid__overlay)[b-v57p8a74jq] {
    opacity: .45;
    /* Block interaction with stale rows while the refresh is in flight. */
    pointer-events: none;
}

.erp-grid__overlay[b-v57p8a74jq] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Theme-aware scrim: the dimmed table stays visible underneath, preserving context and height. */
    background: color-mix(in srgb, var(--colorNeutralBackground1) 45%, transparent);
    z-index: 5;
}

/* No border/background of its own — it already sits inside the bordered grid card. */
.erp-grid__empty[b-v57p8a74jq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacingVerticalM);
    color: var(--colorNeutralForeground3);
    font-size: var(--fontSizeBase300);
    line-height: var(--lineHeightBase300);
    padding: 32px var(--spacingHorizontalM);
    text-align: center;
}

.erp-grid__empty[b-v57p8a74jq]  .erp-grid__empty-action {
    flex: 0 0 auto;
}

/* ---------- Grid scroll container ---------- */
/* Keeps a wide table scrolling inside the card instead of overflowing the page (esp. under RTL).
   Vertical scrolling is what gives FluentDataGrid's sticky header something to stick to — the
   inline max-height comes from the MaxHeight parameter. */
.erp-grid__scroll[b-v57p8a74jq] {
    width: 100%;
    overflow: auto;
}

/* Only rows are clickable when OnRowClick is set — not the header (a grid-wide cursor:pointer
   wrongly implies the header navigates too). */
.erp-grid__scroll[b-v57p8a74jq]  .erp-grid__row--clickable {
    cursor: pointer;
}

/* A text button used as cell content (e.g. an "Open" link into a sub-page) carries FluentButton's own
   host padding (12px) and a 96px min-width, so its label sits indented from the column header and the
   column reads as misaligned. Flushing both lines the label up with the header text. Styled on the host
   because fluent-button exposes only a "content" part — ::part(control) matches nothing.
   Opt in from the call site with Class="erp-grid__cell-link". */
.erp-grid__scroll[b-v57p8a74jq]  .erp-grid__cell-link {
    padding-inline: 0;
    min-width: 0;
}

/* A sticky header needs an opaque background to occlude the rows scrolling under it, and the library
   paints it --colorNeutralBackground4 (#f0f0f0) — visibly greyer than FluentDataGrid's stock header,
   which has no background at all. Repaint to the card surface so the header keeps its original
   FluentUI appearance while still occluding. Header/row hover is deliberately left to the library. */
.erp-grid__scroll[b-v57p8a74jq]  tr[row-type=sticky-header] > th {
    background-color: var(--colorNeutralBackground1);
}

/* ---------- Mixed-script (bidi) cell content ----------
   Under Arabic the page direction is RTL, but most of this data is inherently LTR: imputation
   codes (3-11-02-02), amounts, ISO dates and Latin-script supplier names. Inheriting direction:rtl
   into those cells mis-renders them — trailing punctuation jumps to the front ("No." shows as
   ".No") and the ellipsis truncates the *start* of a name ("...IE TELECOM" instead of "ALGERIE
   TE..."). `plaintext` derives each cell's base direction from its own first strong character, so
   Latin/numeric cells lay out LTR and Arabic cells stay RTL. Applied to descendants too: the header
   title sits in a nested element that would otherwise keep its own RTL bidi context.
   It does NOT keep the column edges uniform on its own — see the alignment block below. */
.erp-grid__scroll[b-v57p8a74jq]  td,
.erp-grid__scroll[b-v57p8a74jq]  th,
.erp-grid__scroll[b-v57p8a74jq]  td *,
.erp-grid__scroll[b-v57p8a74jq]  th * {
    unicode-bidi: plaintext;
}

/* ---------- Column alignment under plaintext ----------
   `plaintext` also changes how `text-align: start|end` is resolved: per line, against the element's
   own base direction rather than the column's `direction`. FluentDataGrid aligns cells with exactly
   those logical keywords (td[col-justify=end] / [col-justify=end] [col-title]), so under RTL an
   Arabic header resolved `end` to the left while its numeric cells — no strong character, hence an
   LTR base — resolved the same `end` to the right, and the two ended up on opposite edges of one
   column. The default `start` columns broke the same way; it only showed on wide columns.
   (Compounding it: `td *` makes .erp-grid__cell-text a bidi isolate, which the parent td sees as a
   neutral, so a td wrapping only that span has no strong character at all and always resolves LTR.)
   Alignment belongs to the column, not to what a given row happens to contain — so pin it to a
   physical edge per page direction and leave `plaintext` governing bidi order alone. `center` is
   direction-independent and restated only so all three cases read together; the sortable-header
   case is handled separately below, because those headers are positioned by flex rather than
   text-align.

   The direction test is `:dir()` on the cell rather than a `[dir=rtl]` ancestor, because the app
   carries `dir` on three nested elements (App.razor's <html>, Routes.razor's provider wrapper and
   LayoutScaffold's shell). An ancestor selector would match BOTH blocks the moment any of them
   disagreed — equal specificity, so the ltr block would win on source order and invert every
   column, which is the bug this block exists to fix. `:dir()` resolves to the cell's own nearest
   direction, so exactly one block can ever apply. The select column is excluded for the same
   reason Fluent writes `td:not([col-select=true])`: its checkbox is not text and must keep the
   library's own centring. */
.erp-grid__scroll[b-v57p8a74jq]  td:dir(rtl):not([col-select=true]),
.erp-grid__scroll[b-v57p8a74jq]  [col-title]:dir(rtl) {
    text-align: right;
}

.erp-grid__scroll[b-v57p8a74jq]  td[col-justify=center]:dir(rtl):not([col-select=true]),
.erp-grid__scroll[b-v57p8a74jq]  th[col-justify=center] [col-title]:dir(rtl) {
    text-align: center;
}

/* No `end` rule under RTL, deliberately: `Align.End` marks the amount columns, and an amount is
   read down its right edge in Arabic just as it is in French — flush with the text columns rather
   than banished to the far side of the row. So `end` keeps the base right alignment above, and
   `DataGridCellAlignment.End` means the physical right in both directions. Fluent's own
   `td[col-justify=end]{text-align:end}` is outranked by the base rule (0,4,1 vs 0,2,1).
   The one case the base rule cannot reach: a sortable header is a flex FluentButton positioned by
   `justify-content`, which text-align does not touch, so Fluent's `justify-content:end` would leave
   the amount's *header* on the left while its figures sat right — the misalignment this whole block
   exists to prevent. flex-start resolves to the right here because the button's `direction` is
   still rtl (`plaintext` changes base direction, never `direction`). */
.erp-grid__scroll[b-v57p8a74jq]  th[col-justify=end] [col-sort-button]:dir(rtl) {
    justify-content: flex-start;
}

/* Fluent also wraps every header cell in a flex div carrying an *inline* `justify-content` derived
   from Align (`flex-end` for an end column), and `flex-end` is the left under RTL. A sortable header
   hides this, because its sort button is width:100% and so fills the wrapper — the rule above is
   what positions that label. A non-sortable header has no button, so [col-title] shrink-wraps and
   the wrapper's inline value is what places it. `!important` is the only thing that outranks an
   inline style, and flex-start resolves to the right here. LTR needs no override: `flex-end` is
   already the right. */
.erp-grid__scroll[b-v57p8a74jq]  th[col-justify=end] > div:dir(rtl) {
    justify-content: flex-start !important;
}

.erp-grid__scroll[b-v57p8a74jq]  td:dir(ltr):not([col-select=true]),
.erp-grid__scroll[b-v57p8a74jq]  [col-title]:dir(ltr) {
    text-align: left;
}

.erp-grid__scroll[b-v57p8a74jq]  td[col-justify=center]:dir(ltr):not([col-select=true]),
.erp-grid__scroll[b-v57p8a74jq]  th[col-justify=center] [col-title]:dir(ltr) {
    text-align: center;
}

.erp-grid__scroll[b-v57p8a74jq]  td[col-justify=end]:dir(ltr):not([col-select=true]),
.erp-grid__scroll[b-v57p8a74jq]  th[col-justify=end] [col-title]:dir(ltr) {
    text-align: right;
}

/* ---------- Header / cell gutter ----------
   Fluent insets body cells by 18px but builds the header gutter from a 2px th plus the title's own
   12px (and a sortable header adds the sort FluentButton's chrome on top), so header text sits 2px —
   3px when sortable — inside its own column's data. Small, but it is visible on a right-aligned
   amount column where the eye reads down a single edge. These two values are measured against the
   rendered grid rather than derived, because the sortable path's overhead comes from the button's
   shadow DOM: both land the header text on exactly the cells' 18px. Re-measure if Fluent changes
   the header chrome. */
.erp-grid__scroll[b-v57p8a74jq]  [col-title] {
    padding-inline: 10px;
}

.erp-grid__scroll[b-v57p8a74jq]  [col-sort-button] {
    padding-inline: 9px;
}

/* ---------- Long text in cells ----------
   FluentDataGrid clips every body cell to a single ellipsized line, which hides data in any grid with
   a descriptive column (program/nomenclature titles, third-party names, notes). Instead let cells wrap
   and clamp the text to two lines — enough to identify a row — with the full value on the hover tooltip
   (the `title` set on .erp-grid__cell-text). Short numeric/code/date cells never reach two lines, so
   their columns are unaffected and the digits stay aligned. One rule for every grid, not per page. */
.erp-grid__scroll[b-v57p8a74jq]  td {
    white-space: normal;
}

.erp-grid__scroll[b-v57p8a74jq]  .erp-grid__cell-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
}

/* ---------- Pager ---------- */
.erp-grid__pager[b-v57p8a74jq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacingHorizontalM);
    flex-wrap: wrap;
    margin-top: var(--spacingVerticalM);
}

.erp-grid__pagesize[b-v57p8a74jq] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
    /* Matches the paginator text on the other side of the footer row. */
    font-size: var(--fontSizeBase300);
    color: var(--colorNeutralForeground3);
}

/* Sized to Fluent's medium control metrics (32px tall, 14px text) so it lines up with the paginator
   buttons and search field beside it — a shorter box read as a different control. Width stays
   content-sized, since the widest option is three digits. */
.erp-grid__pagesize-select[b-v57p8a74jq] {
    height: 32px;
    padding: 0 var(--spacingHorizontalS);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    font-size: var(--fontSizeBase300);
    font-family: inherit;
    cursor: pointer;
}

.erp-grid__pagesize-select:hover[b-v57p8a74jq] {
    background: var(--colorNeutralBackground1Hover);
}

.erp-grid__pagesize-select:focus-visible[b-v57p8a74jq] {
    outline: 2px solid var(--colorBrandForeground1);
    outline-offset: 1px;
}
/* /Shared/Components/TrialBanner.razor.rz.scp.css */
/* Evaluation-copy strip, the first row of the shell above the navbar. Amber-on-dark rather than a
   bright yellow bar: it sits directly on top of the navy navbar and should read as part of the
   chrome, not as an error. The faint diagonal hatch echoes the watermark it announces. Colours are
   pinned rather than taken from the Fluent tokens because this band belongs to the dark header
   stack, which sets its own palette the same way .erp-nav does. */

.erp-trial[b-4fqeov1jsq] {
    --trial-bg: #32270a;
    --trial-fg: #ffd97a;
    --trial-chip-bg: #f6c453;
    --trial-chip-fg: #2a2007;
    --trial-line: rgba(246, 196, 83, 0.45);

    /* Fixed-height row in the layout's flex column — never squeezed by a tall body. */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    background:
        repeating-linear-gradient(-45deg,
            rgba(246, 196, 83, 0.07) 0 12px,
            transparent 12px 24px),
        var(--trial-bg);
    color: var(--trial-fg);
    border-bottom: 2px solid var(--trial-line);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}

/* Urgency. The band keeps its shape and only restates its colour variables, so the hatch, the chip
   and the border move together.

   Last fortnight: the same dark-header family pushed towards orange. Still chrome, not an alarm. */
.erp-trial--warn[b-4fqeov1jsq] {
    --trial-bg: #3d2309;
    --trial-fg: #ffc48a;
    --trial-chip-bg: #f59e42;
    --trial-chip-fg: #2e1a05;
    --trial-line: rgba(245, 158, 66, 0.55);
}

/* Final two days and after: the app is about to stop, or already has. */
.erp-trial--critical[b-4fqeov1jsq] {
    --trial-bg: #3f1412;
    --trial-fg: #ffc9c4;
    --trial-chip-bg: #e04a3f;
    --trial-chip-fg: #ffffff;
    --trial-line: rgba(224, 74, 63, 0.6);

    font-weight: 600;
}

/* Solid chip against the dark band — the part that has to catch the eye. */
.erp-trial__badge[b-4fqeov1jsq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--trial-chip-bg);
    color: var(--trial-chip-fg);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* FluentIcon's svg is a child component's own markup, so it never carries this component's scope
   attribute — hence ::deep from the badge, which does. It ships its own fill; follow the chip. */
.erp-trial__badge[b-4fqeov1jsq]  svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.erp-trial__text[b-4fqeov1jsq] {
    opacity: 0.95;
}

/* Narrow screens: stack rather than squeeze the sentence to one word a line. */
@media (max-width: 640px) {
    .erp-trial[b-4fqeov1jsq] {
        flex-direction: column;
        gap: 5px;
        padding: 9px 12px;
        font-size: 0.875rem;
    }
}

/* The strip is screen chrome; a printed page carries the watermark instead. */
@media print {
    .erp-trial[b-4fqeov1jsq] {
        display: none;
    }
}
/* /Shared/Components/TrialExpiredDialog.razor.rz.scp.css */
/* The end-of-trial lockout. It explains why nothing works AND makes the full version the obvious
   next step, so the card is warmer than an error dialog: red is confined to the lock badge and the
   heading, and the body is the offer.

   One spacing scale and one set of colour tokens (below) rather than ad-hoc numbers, so the four
   blocks share a rhythm. Logical properties throughout, so it mirrors itself in the RTL shell. */

.erp-trialend[b-rm8a2uwban] {
    /* Spacing scale. Every margin and gap below is one of these. */
    --tl-gap-xs: 6px;
    --tl-gap-sm: 10px;
    --tl-gap-md: 14px;
    --tl-gap-lg: 22px;

    --tl-radius: 10px;
    --tl-border: #e1e5ec;
    --tl-accent: #2f6fd0;
    --tl-accent-soft: #eef3fb;
    --tl-accent-ink: #1b3f7a;
    --tl-danger: #b3261e;

    position: fixed;
    inset: 0;
    /* Above LicenseDialog's 2000: when a licence warning and the lockout coincide, the lockout is
       the one the user can actually act on. */
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 14, 24, 0.78);
    /* No dismiss handler anywhere: the card is the only thing the user can interact with. */
    overflow-y: auto;
}

.erp-trialend__card[b-rm8a2uwban] {
    width: 100%;
    /* Wide enough for the three deployment options to sit side by side and be compared at a glance,
       which is the whole reason they are shown together. */
    max-width: 820px;
    background: var(--colorNeutralBackground1, #fff);
    color: var(--colorNeutralForeground1, #242424);
    border-radius: 12px;
    padding: 26px 28px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
    border-top: 4px solid var(--tl-danger);
}

/* ---- the bad news ---- */

.erp-trialend__head[b-rm8a2uwban] {
    display: flex;
    align-items: flex-start;
    gap: var(--tl-gap-md);
    /* Ruled off: everything below the line is the offer, not more bad news. */
    padding-bottom: 18px;
    margin-bottom: var(--tl-gap-lg);
    border-bottom: 1px solid var(--tl-border);
}

.erp-trialend__icon[b-rm8a2uwban] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fdecea;
    color: var(--tl-danger);
}

/* FluentIcon renders its own svg, which never carries this component's scope attribute — hence
   ::deep from the wrapper, which does. Each ships a fill of its own; follow the text colour. */
.erp-trialend__icon[b-rm8a2uwban]  svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.erp-trialend__title[b-rm8a2uwban] {
    margin: 2px 0 var(--tl-gap-xs);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--tl-danger);
    line-height: 1.35;
}

.erp-trialend__since[b-rm8a2uwban] {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    opacity: 0.85;
}

/* ---- the offer ---- */

.erp-trialend__offer[b-rm8a2uwban] {
    border-radius: var(--tl-radius);
    padding: 16px 18px;
    margin-bottom: var(--tl-gap-lg);
    background: linear-gradient(135deg, #f3f7ff, var(--tl-accent-soft));
    /* Leading edge only, so the accent follows the reading direction in both scripts. */
    border-inline-start: 3px solid var(--tl-accent);
}

.erp-trialend__offer-title[b-rm8a2uwban] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--tl-accent-ink);
}

.erp-trialend__offer-title[b-rm8a2uwban]  svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.erp-trialend__offer-body[b-rm8a2uwban] {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #22365c;
}

/* One treatment for both "choose a deployment" and "get in touch", so the two halves of the offer
   are visibly the same kind of thing. */
.erp-trialend__section-label[b-rm8a2uwban] {
    margin: 0 0 var(--tl-gap-sm);
    font-size: 0.875rem;
    font-weight: 700;
    opacity: 0.75;
}

/* ---- the three ways to deploy ---- */

/* auto-fit rather than fixed columns: three across on a desktop, two on a tablet, one on a phone,
   with no breakpoint to keep in step with the number of tiers. The default stretch keeps them all
   the same height however long the text runs. */
.erp-trialend__tiers[b-rm8a2uwban] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--tl-gap-sm);
    margin-bottom: var(--tl-gap-lg);
}

/* Outlined, not filled: three filled panels under the blue offer would turn the dialog into stripes.
   These are options to compare, so they are deliberately equal in weight — none is "recommended". */
.erp-trialend__tier[b-rm8a2uwban] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius);
    padding: 16px 14px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.erp-trialend__tier:hover[b-rm8a2uwban] {
    border-color: var(--tl-accent);
    box-shadow: 0 2px 10px rgba(47, 111, 208, 0.12);
}

.erp-trialend__tier-icon[b-rm8a2uwban] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--tl-gap-sm);
    border-radius: var(--tl-radius);
    background: var(--tl-accent-soft);
    color: var(--tl-accent);
}

.erp-trialend__tier-icon[b-rm8a2uwban]  svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Two lines reserved: the titles differ in length, and without this the short one starts its body
   a line higher than the others. */
.erp-trialend__tier-title[b-rm8a2uwban] {
    display: flex;
    align-items: flex-start;
    min-height: 2.8em;
    margin: 0 0 var(--tl-gap-xs);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.4;
}

.erp-trialend__tier-body[b-rm8a2uwban] {
    /* Takes the slack, so every card's border ends level even though the text does not. */
    flex: 1 1 auto;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.65;
    opacity: 0.78;
}

/* ---- how to reach us ---- */

/* Three across on the wide card, matching the tiers above and keeping the contact block one row
   deep; collapses as the room runs out. */
.erp-trialend__contacts[b-rm8a2uwban] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--tl-gap-sm);
}

/* Each contact is a real link — tel:, mailto:, https: — so one tap acts on it. (The phone row is a
   div, since it holds more than one link and links cannot nest.) */
.erp-trialend__row[b-rm8a2uwban] {
    display: flex;
    align-items: center;
    gap: var(--tl-gap-sm);
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--tl-border);
    background: var(--colorNeutralBackground1, #fff);
    color: inherit;
    text-decoration: none;
    font-size: 0.9375rem;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.erp-trialend__row:hover[b-rm8a2uwban],
.erp-trialend__row:focus-visible[b-rm8a2uwban] {
    background: #f5f8fd;
    border-color: var(--tl-accent);
}

.erp-trialend__row[b-rm8a2uwban]  svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: var(--tl-accent);
}

/* Label above value: three contacts share one row, leaving each about 230px — not enough for a
   label and an address side by side. min-width:0 lets the column shrink inside the flex row. */
.erp-trialend__row-text[b-rm8a2uwban] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.erp-trialend__row-label[b-rm8a2uwban] {
    font-size: 0.75rem;
    opacity: 0.65;
}

/* Always LTR: an RTL paragraph would reorder these into something undialable. */
.erp-trialend__row-value[b-rm8a2uwban] {
    font-weight: 600;
    unicode-bidi: isolate;
    overflow-wrap: anywhere;
}

/* Side by side with a divider; stacking would make this row taller than the two beside it. */
.erp-trialend__phones[b-rm8a2uwban] {
    display: inline-flex;
    align-items: center;
    gap: var(--tl-gap-sm);
    flex-wrap: wrap;
}

.erp-trialend__phone[b-rm8a2uwban] {
    color: inherit;
    text-decoration: none;
}

.erp-trialend__phone:hover[b-rm8a2uwban],
.erp-trialend__phone:focus-visible[b-rm8a2uwban] {
    text-decoration: underline;
}

/* Divider between numbers, drawn rather than typed so it is not read out as content. */
.erp-trialend__phone + .erp-trialend__phone[b-rm8a2uwban] {
    padding-inline-start: var(--tl-gap-sm);
    border-inline-start: 1px solid #d6dae2;
}

/* Stacked by auto-fit at this width, so the reserved title lines would just be a gap. */
@media (max-width: 560px) {
    .erp-trialend__card[b-rm8a2uwban] {
        padding: 22px 18px;
    }

    .erp-trialend__tier[b-rm8a2uwban] {
        padding: 14px 12px;
    }

    .erp-trialend__tier-title[b-rm8a2uwban] {
        min-height: 0;
    }
}

/* The lockout is screen chrome; it must never appear on a printed page. */
@media print {
    .erp-trialend[b-rm8a2uwban] {
        display: none;
    }
}