/* _content/ERP.Client/Client/App.razor.rz.scp.css */
[b-r53cnvexm4] :root {
    --mud-appbar-height: 52px !important;
}

/* Required asterisk in red */
[b-r53cnvexm4] .mud-input-label-required::after {
    content: " *" !important;
    color: #EF4444 !important;
}

[b-r53cnvexm4] html, [b-r53cnvexm4] body {
    overflow-x: hidden;
}

/* Pulse Green Animation for Active Status */
[b-r53cnvexm4] .pulse-green {
    width: 10px;
    height: 10px;
    background-color: #10B981;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulsing-g-b-r53cnvexm4 1.8s infinite;
}

@keyframes pulsing-g-b-r53cnvexm4 {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Pulse Grey Animation for Inactive Status */
[b-r53cnvexm4] .pulse-grey {
    width: 10px;
    height: 10px;
    background-color: #94A3B8;
    border-radius: 50%;
    display: inline-block;
}

/* Premium Table Customizations
   Data cells default to MudBlazor's Typo.body2 size (0.875rem) —
   use the token instead of hard-coding so it always matches the theme.
   Row height: a page opts in through PremiumTable.RowHeight (the table root then carries the
   --premium-row-height variable); the `auto` fallback keeps the padding-driven look of before. */
[b-r53cnvexm4] .premium-table,
[b-r53cnvexm4] .mud-table.premium-table {
    min-height: 480px;
    display: flex !important;
    flex-direction: column !important;
}

[b-r53cnvexm4] .premium-table .mud-table-container,
[b-r53cnvexm4] .mud-table.premium-table .mud-table-container {
    flex: 1 1 auto;
    min-height: 380px;
}

[b-r53cnvexm4] .premium-table .mud-table-cell {
    padding: 14px 16px !important;
    font-size: var(--mud-typography-body2-size) !important;
    height: var(--premium-row-height, auto);
}

[b-r53cnvexm4] .premium-table .mud-table-head .mud-table-cell {
    font-weight: 600 !important;
    color: var(--mud-palette-text-primary) !important;
    background-color: var(--mud-palette-background-grey) !important;
    border-bottom: 2px solid var(--mud-palette-divider) !important;
    /* Column names do NOT wrap (applies to every .premium-table).
       Note: this rule uses !important so it overrides inline styles on <MudTh> —
       to change the header color/spacing, edit here, not inline in the .razor. */
    white-space: nowrap !important;
}

/* ── Per-column line count (PremiumTableColumn.MaxLines) ──────────────────
   Single axis for cell line count; `MaxLines = 1` is the default.
   0 (unlimited, marker `premium-cell-wrap`, DATA cell only): re-enables `white-space: normal`, because the shared
   header contract above is `white-space: nowrap !important`. MaxLines never reaches the <th> (the header marker was
   removed) ⇒ column NAMES never wrap, no matter how many lines the cell shows.
   The marker is emitted by PremiumColumnDefinition.CellLinesClass. */
[b-r53cnvexm4] .premium-table .mud-table-cell.premium-cell-wrap {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* `MaxLines = 1` (default): ONE line plus a text ellipsis. The marker goes on the DATA cell ONLY — an
   `overflow: hidden` on the <th> would clip the absolutely positioned sort arrow (see the sort contract at the
   top of this file), and the header is already `nowrap` through `.premium-table .mud-table-head .mud-table-cell`. */
[b-r53cnvexm4] .premium-table .mud-table-cell.premium-cell-lines-1 {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

[b-r53cnvexm4] .premium-table .mud-table-cell.premium-cell-lines-1 p.mud-typography,
[b-r53cnvexm4] .premium-table .mud-table-cell.premium-cell-lines-1 .item-title-clickable {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* `MaxLines = N` (N > 1) clamp wrapper rendered by PremiumTableDataRow when PremiumColumnDefinition.ClampWrapper
   is true. `-webkit-line-clamp` only works with `display: -webkit-box`, and that display CANNOT live on the <td>:
   a cell with its own display leaves the table layout and every column width collapses (PremiumTableStylesTests
   forbids display/position on cell markers). The line count therefore travels as the `--premium-cell-lines`
   custom property set inline by PremiumColumnDefinition.ClampStyle. */
[b-r53cnvexm4] .premium-cell-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--premium-cell-lines, 1);
    line-clamp: var(--premium-cell-lines, 1);
    overflow: hidden;
}

/* ── Column gap (PremiumTableColumn.Gap) ──────────────────────────────────
   ABSOLUTE space between a column and the column BEFORE it, applied as `padding-left` on the <th> AND the <td>;
   the value REPLACES the shared 16px cell padding, so it can also TIGHTEN the spacing (None = 0px,
   L = 16px = the default look). The space must live on the CELL: a flex/gap utility on a wrapper inside the
   cell only spaces the children of that ONE cell, so a single-control cell never moved at all.
   Class names come from PremiumColumnGap.ToCellClass() and the exact px values are locked by
   PremiumTableStylesTests (C# mapping ⇄ CSS). */
[b-r53cnvexm4] .premium-table .mud-table-cell.premium-cell-gap-0 {
    padding-left: 0px !important;
}

[b-r53cnvexm4] .premium-table .mud-table-cell.premium-cell-gap-4 {
    padding-left: 4px !important;
}

[b-r53cnvexm4] .premium-table .mud-table-cell.premium-cell-gap-8 {
    padding-left: 8px !important;
}

[b-r53cnvexm4] .premium-table .mud-table-cell.premium-cell-gap-12 {
    padding-left: 12px !important;
}

[b-r53cnvexm4] .premium-table .mud-table-cell.premium-cell-gap-16 {
    padding-left: 16px !important;
}

[b-r53cnvexm4] .premium-table .mud-table-cell.premium-cell-gap-24 {
    padding-left: 24px !important;
}

[b-r53cnvexm4] .premium-table .mud-table-cell.premium-cell-gap-32 {
    padding-left: 32px !important;
}

/* ── Slack-absorbing column (PremiumTableColumn.Fill) ────────────────────────
   MudBlazor's `.mud-table-root { width: 100% }` + the auto table layout makes the browser spread the UNUSED
   width over EVERY column in proportion to its content, so the widest column swallows most of it and the gaps
   between the (content-sized) columns look random. Exactly ONE column per table opts in to absorb that
   leftover (the classic auto-layout flex column) — every other column then hugs its content.
   The marker is put on the <th> AND the <td> and may ONLY carry `width`: any layout property
   (`display`/`position`) would pull the cell out of the table layout and collapse every column width. */
[b-r53cnvexm4] .premium-table .mud-table-head .mud-table-cell.premium-cell-fill,
[b-r53cnvexm4] .premium-table .mud-table-cell.premium-cell-fill {
    width: 100% !important;
}

/* ── Sticky columns (PremiumTableColumn.Pin) ──────────────────────────────
   position/left|right/z-index/background-color are inline because the offset is page-specific
   (PremiumColumnDefinition.StickyOffset); this rule only adds the separator shadow that shows a pinned
   column is "above" the columns scrolling underneath it. */
[b-r53cnvexm4] .premium-table .mud-table-cell.premium-pin-left {
    box-shadow: 6px 0 6px -6px rgba(0, 0, 0, 0.16);
}

[b-r53cnvexm4] .premium-table .mud-table-cell.premium-pin-right {
    box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.16);
}

/* ── Horizontal scroll opt-in (PremiumTable.HorizontalScroll) ─────────────
   MudTable squeezes its columns into the available width by default; sticky columns (and wide tables)
   need the container to scroll sideways instead. */
[b-r53cnvexm4] .premium-table-scroll-x .mud-table-container {
    overflow-x: auto !important;
}

/* ── Sortable column headers (MudTableSortLabel) ──────────────────────────
   MudBlazor renders the sort label as <span class="mud-button-root mud-table-sort-label">
   + <MudIcon class="mud-table-sort-label-icon">. Not scoped to .premium-table because
   the Popups page uses UsePremiumStyle=false but still has sortable headers.
   Note: .mud-table-sort-label is excluded from the .mud-button-root rule (see end of file)
   so it is not forced to height 40px. */
[b-r53cnvexm4] .mud-table-sort-label {
    color: inherit !important;
    font: inherit !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: none !important;
    /* Containing block of the sort arrow: the arrow is absolutely positioned (see the
       `.mud-table-sort-label-icon` rule) so it stops reserving space inside the header text. */
    position: relative;
    cursor: pointer;
    user-select: none;
}

[b-r53cnvexm4] .mud-table-sort-label:hover {
    color: var(--mud-palette-primary) !important;
}

[b-r53cnvexm4] .mud-table-sort-label .mud-table-sort-label-icon {
    font-size: 1rem !important;
    /* The arrow is taken OUT of the label's flow. In flow it reserves ~22px (18px icon + MudBlazor's
       own left/right margins), which pushes the header TEXT away from the aligned side: a right-aligned
       header ended up ~22px left of its right-aligned values and a centred one ~11px off -- the reported
       misalignment of the numeric columns on the invoice detail table (unit price / quantity / line total).
       MudBlazor solves this with its `.mud-table-cell-align-*` class (the class makes the label inherit
       `flex-direction: row-reverse`), but this project emits the alignment as an INLINE `text-align`
       instead of that class, so the root cause is fixed here: the label box shrinks to the text width --
       the text then lines up with the data cells -- and the arrow lives in the cell's trailing padding.
       The vertical centre uses `top: 50%` plus a negative half-height margin, NOT `transform`: MudBlazor
       rotates the descending arrow with `transform: rotate(180deg)` at the same specificity and this
       stylesheet loads later, so a `transform` here would win and point that arrow the wrong way. */
    position: absolute;
    top: 50%;
    left: 100%;
    margin-left: 2px;
    margin-right: 0;
    margin-top: -0.5rem;
    /* EVERY sort arrow is hidden — an UNSORTED column AND a SORTED one (a sorted column keeps NO
       permanently visible arrow; the arrow only appears while its header is hovered, see below).
       `!important` is required here: MudBlazor's own CSS ships a rule that forces a SORTED column's arrow
       back to `opacity: 1` at the SAME specificity (0,3,0) as this rule, so without `!important` the sorted
       arrow would stay permanently visible. (That selector is deliberately NOT named in this comment:
       TableSortingTests parses this file block by block and every block whose selector targets a directional
       arrow must be hover-scoped.)
       DO NOT bring back a permanently visible/dim arrow either (the project's old rule: opacity .45):
       MudBlazor uses the SAME ArrowUpward glyph for both "unsorted" and "ascending", so a permanently
       dim unsorted arrow made the first click (None → Ascending) look like it did NOTHING and users
       reported "must click twice to sort". Locked in by
       TableSortingTests.SortArrowCss_Should_HideEveryArrow_UntilItsHeaderIsHovered. */
    opacity: 0 !important;
}

/* Hovering a header ⇒ its arrow appears. An UNSORTED column gets a DIM arrow (.5 — a hint that the
   header is clickable, intentionally < 1 so it is not confused with the sorted state); a SORTED column
   gets a SOLID arrow (1) + primary color, so hovering it does NOT "downgrade" it to the hint level.
   The sorted rule carries one extra class ⇒ higher specificity, so the two rules are order-independent.
   `!important` on both: they must beat the `opacity: 0 !important` rule above. Wrapped in the same
   @media as MudBlazor's own CSS (.mud-table-sort-label:hover{...icon{opacity:.8}}) so touch devices do
   not get a "sticky hover". */
@media (hover: hover) and (pointer: fine) {
    [b-r53cnvexm4] .mud-table-sort-label:hover .mud-table-sort-label-icon {
        opacity: .5 !important;
        color: var(--mud-palette-primary);
    }

    [b-r53cnvexm4] .mud-table-sort-label:hover .mud-table-sort-label-icon.mud-direction-asc,
    [b-r53cnvexm4] .mud-table-sort-label:hover .mud-table-sort-label-icon.mud-direction-desc {
        opacity: 1 !important;
        color: var(--mud-palette-primary);
    }
}

/* Drawer Sticky Footer */
[b-r53cnvexm4] .drawer-footer {
    position: sticky;
    bottom: 0;
    background-color: var(--mud-palette-background-grey);
    border-top: 1px solid var(--mud-palette-divider);
    z-index: 10;
}



/* Responsive Drawer */
[b-r53cnvexm4] .mud-drawer.premium-drawer-responsive {
    max-width: 100vw !important;
}

@media (max-width: 600px) {
    [b-r53cnvexm4] .mud-drawer.premium-drawer-responsive {
        width: 100% !important;
        border-radius: 0 !important;
    }
}

@media (min-width: 601px) and (max-width: 960px) {
    [b-r53cnvexm4] .mud-drawer.premium-drawer-responsive {
        width: 80% !important;
    }
}

[b-r53cnvexm4] .mud-drawer.premium-drawer-responsive .mud-drawer-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Premium Toolbar and MudTable Toolbar Responsive */
@media (max-width: 960px) {
    [b-r53cnvexm4] .premium-toolbar .border-y {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    [b-r53cnvexm4] .premium-toolbar .ml-auto {
        margin-left: 0 !important;
        width: 100% !important;
    }
    [b-r53cnvexm4] .premium-toolbar .ml-auto > div {
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }
}

@media (max-width: 600px) {
    [b-r53cnvexm4] .mud-popover {
        max-width: 90vw !important;
    }

    [b-r53cnvexm4] .premium-toolbar .ml-auto > div {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    [b-r53cnvexm4] .premium-toolbar .ml-auto > div > div {
        width: 100% !important;
        min-width: 100% !important;
    }

    [b-r53cnvexm4] .premium-table .mud-table-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        height: auto !important;
        padding: 12px 16px !important;
        gap: 12px !important;
    }
    [b-r53cnvexm4] .premium-table .mud-table-toolbar .mud-spacer {
        display: none !important;
    }
    [b-r53cnvexm4] .premium-table .mud-table-toolbar .premium-table-search {
        flex: 1 1 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* The filter row wraps so the dropdown + "Reset" are not squashed */
    [b-r53cnvexm4] .custom-toolbar-container {
        flex-wrap: wrap !important;
    }
    [b-r53cnvexm4] .premium-table .mud-table-toolbar .d-flex.align-center.gap-2 {
        width: auto !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }
}

/* Pulsing collapse/expand icon */
[b-r53cnvexm4] .pulsing-icon {
    box-shadow: 0 0 0 0 rgba(89, 74, 226, 0.4);
    animation: pulse-icon-anim-b-r53cnvexm4 2s infinite;
}

@keyframes pulse-icon-anim-b-r53cnvexm4 {
    0% {
        box-shadow: 0 0 0 0 rgba(89, 74, 226, 0.5);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(89, 74, 226, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(89, 74, 226, 0);
    }
}

/* ══ CONTROL-HEIGHT CONTRACT — THE SINGLE SOURCE FOR THE WHOLE APP ══════════════════
   Every BLOCK button (Filled/Outlined) and every SINGLE-LINE input/select/dropdown
   is exactly --erp-control-height (40px) tall.

   ⚠ Do NOT declare the token with `::deep :root`: CSS isolation compiles it to
   `[b-hash] :root` (see obj/Debug/net8.0/scopedcss/Client/App.razor.rz.scp.css)
   so it NEVER matches (`:root` cannot be its own descendant). The token must be
   declared on the DOM root wrapping the content; also every rule always includes the fallback
   `var(--erp-control-height, 40px)` so it does not depend on stylesheet order.

   40px = exactly MudBlazor's original geometry for an Outlined + Margin.Dense field
   (padding 10.5px + 19px line + 10.5px) so the 113 existing fields do NOT change.

   Font size follows the same principle: a SINGLE source — --erp-control-font-size
   (0.875rem = Typo.body2, matching the PremiumTable data-cell size) for every
   SINGLE-LINE input/select/dropdown. Previously each place had its own size (MudBlazor's
   default 16px subtitle1, 14px in layout-fixes/tenant-profile, 13px in the filter pill) so the
   text in the filter row was misaligned. To change the size ⇒ edit the token, do NOT hard-code it again. */
[b-r53cnvexm4] .mud-layout,
[b-r53cnvexm4] .mud-dialog-provider,
[b-r53cnvexm4] .mud-popover-provider,
[b-r53cnvexm4] .mud-snackbar-provider {
    --erp-control-height: 40px;
    --erp-control-font-size: 0.875rem;
    --erp-control-hint-font-size: 0.75rem;

    /* Switch: ONE shared size for every <MudSwitch> in the app (baseline = Size.Small).
       This is the single source for the switch geometry — NO page passes Size anymore. */
    --erp-switch-span-width: 44px;
    --erp-switch-span-height: 24px;
    --erp-switch-span-padding: 7px;
    --erp-switch-base-padding: 5px;
    --erp-switch-thumb-size: 14px;
    --erp-switch-checked-shift: 20px;
    --erp-switch-label-font-size: 0.8125rem;
}

/* ── Block buttons (Filled/Outlined) ─────────────────────────────────────────
   Excluded: icon buttons (⋮ ↻ ← in tables/nav/dialogs), FAB, toggle-icon buttons,
   link-style buttons (Variant.Text: the sort / add-attribute / resend-code actions) and
   the sort header label (.mud-table-sort-label — MudBlazor renders it as a <span
   class="mud-button-root mud-table-sort-label">, not a real button; without this
   exclusion EVERY column header would be forced to height 40px, misaligning the header row). */
[b-r53cnvexm4] .mud-button-root:where(:not(.mud-icon-button, .mud-fab, .mud-button-text, .mud-toggle-icon-button, .mud-table-sort-label)) {
    height: var(--erp-control-height, 40px) !important;
    min-height: var(--erp-control-height, 40px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ── PageHeader action buttons — [Chỉnh sửa] and [Quay lại] MUST be the SAME height ──────
   The two block buttons of a detail/edit header (PageHeader's Edit slot + Action slot) are
   declared in different slots but have to line up exactly. The design-system tokens
   `.tp-primary-btn` (Filled ⇒ Chỉnh sửa) and `.tp-secondary-btn` (Outlined ⇒ Quay lại) live
   in the hand-versioned global `wwwroot/css/tenant-profile.css`, so a browser holding a stale
   copy of THAT file (it once pinned `height: 36px` on .tp-primary-btn) shrank only the
   Filled button while the Outlined one already followed this token.
   Pinning both here — THIS bundle is cache-busted automatically
   (ERP.Client.styles.css?v=@ScopedCssVersion) and the selector beats any `.tp-*` rule —
   makes the parity independent of what the browser cached. Icon buttons stay excluded
   (the rule above) so a header's ↻ refresh action keeps its own 36px size. */
[b-r53cnvexm4] .page-header button.mud-button-root:where(:not(.mud-icon-button, .mud-fab, .mud-button-text, .mud-toggle-icon-button)) {
    height: var(--erp-control-height, 40px) !important;
    min-height: var(--erp-control-height, 40px) !important;
}

/* ── Single-line inputs (TextField/Select/Autocomplete/Numeric/Mask/Picker) ───
   The height is forced on the INPUT BOX (input container) rather than .mud-input-control:
   the control is left auto so MudBlazor's helper/error text still has room right below
   the field instead of overflowing. */
[b-r53cnvexm4] .mud-input-control > .mud-input-control-input-container {
    height: var(--erp-control-height, 40px) !important;
    min-height: var(--erp-control-height, 40px) !important;
    flex: 0 0 auto !important;
}

/* Restore the natural height for anything that is NOT a single-line input:
   textarea (Lines > 1), radio/checkbox/switch groups, file upload. */
[b-r53cnvexm4] .mud-input-control:is(:has(textarea), :has(.mud-radio-group), :has(.mud-checkbox), :has(.mud-switch), .ro-group, .ro-radio, .mud-file-upload),
[b-r53cnvexm4] .mud-input-control:is(:has(textarea), :has(.mud-radio-group), :has(.mud-checkbox), :has(.mud-switch), .ro-group, .ro-radio, .mud-file-upload) > .mud-input-control-input-container {
    height: auto !important;
    min-height: 0 !important;
}

/* Inside: stretch the content to fill the box + remove vertical padding/margin ⇒ the text always sits at the
   center of the 40px box. `:not(textarea)` keeps multi-line fields intact (MudBlazor's textarea
   also carries the mud-input-slot + mud-input-root classes but does NOT have the
   "multiline" class); `flex-shrink: 0` stops a margin (e.g. .aligned-field in
   PostForm) from squeezing the input's height.
   NOTE: do NOT set display on `div.mud-input-slot` — MudBlazor uses those divs
   as hidden slots (inline style display:none) so `!important` would make them appear. */
[b-r53cnvexm4] .mud-input-control .mud-input {
    height: 100% !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
}

[b-r53cnvexm4] .mud-input-control :is(input.mud-input-root, .mud-input-slot):not([class*="multiline"]):not(textarea) {
    height: 100% !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ── The single FONT SIZE for every input/select/dropdown ─────────────────
   Overrides the default 16px (MudBlazor puts .mud-typography-subtitle1 on
   .mud-input). Applies to the value, the placeholder (hint) and the select's
   display text ⇒ the filter row and search box match the table's data-cell text.
   MULTI-LINE fields share the same size because the textarea inherits from the .mud-input wrapper
   — only their HEIGHT is outside the 40px contract (see the :has(textarea) opt-out). */
[b-r53cnvexm4] .mud-input-control :is(.mud-input, input.mud-input-root, .mud-select-input, .mud-input-slot):not([class*="multiline"]):not(textarea) {
    font-size: var(--erp-control-font-size, 0.875rem) !important;
}

/* Helper/error text under a field: its own token, smaller than the text inside the box. */
[b-r53cnvexm4] .mud-input-control .mud-input-helper-text {
    font-size: var(--erp-control-hint-font-size, 0.75rem) !important;
    white-space: normal !important;
    word-break: break-word;
}

/* ── TEXT INSIDE A SELECT BOX is always VERTICALLY CENTERED (closed box only) ────────────────────
   A Select with MudSelectItem renders the value in a div.mud-input-slot with inline
   style display:inline (the real input is hidden by MudBlazor = type="hidden"), so the
   height:100% rule above stretches the div to fill the box while the text still sticks to the TOP edge.
   This targets only the VISIBLE div ([style*="display:inline"]) so the accessibility
   div (style display:none) is not revealed; the open dropdown popup is NOT touched. */
[b-r53cnvexm4] .mud-input-control .mud-select-input > .mud-input-slot[style*="display:inline"] {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* Label when NOT floated: pinned to the center of the 40px box for variants that are not already correct
   (Outlined + Margin.Dense is already correct at 12px per MudBlazor so it is skipped so the
   113 existing fields do not change; multi-line fields are also skipped so the label sits at the
   top of the textarea as originally). No !important is used and it is gated before
   :has(.mud-shrink)/:focus-within so MudBlazor's own float state
   (translate + scale 0.75) still wins. */
[b-r53cnvexm4] .mud-input-control:not(.mud-input-control-margin-dense):not(:has(textarea)):where(:not(:has(.mud-shrink), :focus-within)) .mud-input-label-outlined {
    transform: translate(14px, 12px) scale(1);
}

[b-r53cnvexm4] .mud-input-control:not(:has(textarea)):where(:not(:has(.mud-shrink), :focus-within)) .mud-input-label-inputcontrol:not(.mud-input-label-outlined):not(.mud-input-label-filled) {
    transform: translate(0, 12px) scale(1);
}

/* PremiumTable filter row: controls always sit centered in the row, not offset vs the buttons in the same row
   by the Normal/Dense margin (8px/4px). */
[b-r53cnvexm4] .custom-toolbar-container .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ══ READ-ONLY (DETAIL) FORM — NOTHING MAY LOOK "INTERACTIVE" ═══════════════════════════
   A detail page renders the very same form with ReadOnly=true (DetailEditPageBase + the
   `erp-form-readonly` marker class on <MudForm>). MudBlazor's ReadOnly only sets the HTML
   `readonly` attribute on the child inputs — it does NOT touch the OUTLINED field's
   interactive visuals, so a read-only input still painted MudBlazor's focus/hover frame
   (`.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border` = 2px in
   --mud-palette-primary), turned its floating label primary blue and kept the select /
   autocomplete arrow looking clickable.
   Every rule below is scoped by the marker class, so EDIT mode keeps the normal behaviour.
   Goal: a NEUTRAL field — 1px neutral frame even while focused, secondary label, no colour
   sweep, greyed adornments (arrow/calendar icons) and no "hand" cursor hinting a dropdown
   that cannot be opened anyway (MudBlazor ITSELF refuses to open a Select/Autocomplete/Picker
   while MudForm.ReadOnly — locked by the behaviour tests in FormReadOnlyContractTests). */
[b-r53cnvexm4] .erp-form-readonly .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border,
[b-r53cnvexm4] .erp-form-readonly .mud-input.mud-input-outlined:focus-within .mud-shrink .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs) !important;
    border-width: 1px !important;
}

/* Hover must not suggest "clickable" either (MudBlazor darkens the frame on hover). */
[b-r53cnvexm4] .erp-form-readonly .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs) !important;
}

/* Floating label: MudBlazor turns it primary while focused — keep it neutral. */
[b-r53cnvexm4] .erp-form-readonly .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: var(--mud-palette-text-secondary) !important;
}

/* Filled/underline variants: no colour sweep along the bottom edge. */
[b-r53cnvexm4] .erp-form-readonly .mud-input:focus-within.mud-input-underline:after {
    transform: scaleX(0) !important;
}

/* Adornments (select/autocomplete arrow, calendar, search/person icons) go grey. The layout is
   NOT changed (vs hiding it) so text does not shift when switching detail ⇄ edit. */
[b-r53cnvexm4] .erp-form-readonly .mud-input-adornment,
[b-r53cnvexm4] .erp-form-readonly .mud-input-adornment .mud-svg-icon,
[b-r53cnvexm4] .erp-form-readonly .mud-input-adornment .mud-icon-root {
    color: var(--mud-palette-text-disabled) !important;
}

/* A dropdown in a read-only form cannot open: MudSelect, MudAutocomplete and MudDatePicker all
   refuse to open while MudForm.ReadOnly is set (behaviour tests in FormReadOnlyContractTests).
   What is left over is the VISUAL hint: MudBlazor paints the clickable hand cursor on the select
   (`.mud-select .mud-select-input{cursor:pointer}`) ⇒ neutralise it. Autocomplete fields are
   excluded on purpose: MudBlazor gives them `cursor:text` like every other text field, so a
   read-only autocomplete still reads as text (see the adornment rule above for its hint). */
[b-r53cnvexm4] .erp-form-readonly .mud-select:not(.mud-autocomplete) .mud-select-input,
[b-r53cnvexm4] .erp-form-readonly .mud-picker input.mud-input-root,
[b-r53cnvexm4] .erp-form-readonly .mud-picker .mud-input-adornment-icon-button {
    cursor: default !important;
}

/* ── REQUIRED MARKER inside an own-label row: keep the row at the LABEL's line box ────────────────
   Every form draws its own label as <MudText Typo="subtitle2"> and then appends the required marker
   <span class="ml-1" style="color: #ef4444;">*</span> (9 forms / 17 places — grep `#ef4444`).
   The label's line box is 0.875rem × 1.43 = 20.02px, but the marker is plain 1rem body text with
   line-height 1.5 ⇒ 24px, so a flex row with the marker is ~4px TALLER and pushes that very field
   4px below the field next to it (exactly the display-order numeric field vs the parent-category
   select in CategoryForm). Pinning the marker to the label's font size + line-height:1 keeps every
   label row at 20.02px, with or without the marker. No `!important`: the span only inherits from
   <body>, and this rule sets its own value. */
[b-r53cnvexm4] .d-flex.align-center > span.ml-1[style*="#ef4444"] {
    font-size: var(--erp-control-font-size, 0.875rem);
    line-height: 1;
}

/* ── SWITCH: ONE SINGLE SIZE FOR THE WHOLE APP (baseline = Size.Small) ──────────
   Previously each place passed `Size="Size.Small|Medium|Large"` so switches in tables,
   dialogs and forms differed in size. From now on NO place passes Size: the switch
   geometry is forced to MudBlazor's Small geometry
   (span 44×24 / padding 7, base padding 5, thumb 14, label 0.8125rem).

   The `[class*="mud-switch-…-"]` selector covers small/medium/large (the size class is
   generated by MudBlazor from the Size parameter) so the rule beats whatever value is passed in.
   ⚠ To change the size ⇒ edit the token in the declaration block above, do NOT hard-code it again. */
[b-r53cnvexm4] .mud-switch [class*="mud-switch-span-"] {
    width: var(--erp-switch-span-width, 44px) !important;
    height: var(--erp-switch-span-height, 24px) !important;
    padding: var(--erp-switch-span-padding, 7px) !important;
}

[b-r53cnvexm4] .mud-switch [class*="mud-switch-base-"] {
    padding: var(--erp-switch-base-padding, 5px) !important;
}

/* The same shift when ON ⇒ every switch lines up in both states. */
[b-r53cnvexm4] .mud-switch [class*="mud-switch-base-"].mud-checked {
    transform: translateX(var(--erp-switch-checked-shift, 20px)) !important;
}

[b-r53cnvexm4] .mud-switch [class*="mud-switch-thumb-"] {
    width: var(--erp-switch-thumb-size, 14px) !important;
    height: var(--erp-switch-thumb-size, 14px) !important;
}

[b-r53cnvexm4] .mud-switch [class*="mud-switch-label-"] {
    font-size: var(--erp-switch-label-font-size, 0.8125rem) !important;
}

/* ── Failed media: a video still shows the default image behind its poster ────────────
   (js/media-fallback.js adds this class when the <video src> fails to load;
   the script swaps <img> to the default image entirely, so no background is needed.) */
[b-r53cnvexm4] video.media-fallback-applied {
    background: #F1F5F9 url('/images/media-fallback.svg') center / contain no-repeat;
}


/* _content/ERP.Client/Client/Pages/Auth/Login.razor.rz.scp.css */
/* Legacy demo helpers (kept: the login page still uses these utility classes). */
.text-muted[b-ohp9wqqsou] {
    color: #64748B !important;
}

.truncate[b-ohp9wqqsou] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Login shell — dark ambient canvas (dot grid + blurred glows) from the mockup.
   The white card keeps every MudBlazor control bound to the global
   --erp-control-height contract (40px); only the raw OTP boxes are custom sized.
   ───────────────────────────────────────────────────────────────────────────── */
.login-page[b-ohp9wqqsou] {
    position: fixed;
    inset: 0;
    /* No z-index on purpose: this dark shell must NOT stack above MudBlazor's overlays
       (popover 1200 / dialog 1400 / snackbar 1500). With z-index: 2000 it covered them,
       so every snackbar raised on /login rendered invisibly under the page. */
    overflow-y: auto;
    background-color: #020617;
    background-image: radial-gradient(rgba(148, 163, 184, 0.16) 1px, transparent 1px);
    background-size: 24px 24px;
    font-family: 'Plus Jakarta Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color: #E2E8F0;
}

.login-glow[b-ohp9wqqsou] {
    position: fixed;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}

.login-glow--top[b-ohp9wqqsou] {
    top: -190px;
    left: -130px;
    background: rgba(37, 99, 235, 0.24);
}

.login-glow--bottom[b-ohp9wqqsou] {
    right: -150px;
    bottom: -230px;
    background: rgba(79, 70, 229, 0.20);
}

/* ── Main / card ─────────────────────────────────────────────────────────── */
/* Vertical centring that never clips: the auto margins of .login-card / .login-footer below
   absorb the free space (card + footer land dead centre) and collapse to 0 as soon as the
   content is taller than the viewport, so the card stays reachable by scrolling. */
.login-main[b-ohp9wqqsou] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
    padding: 40px 16px;
}

.login-card[b-ohp9wqqsou] {
    width: 100%;
    max-width: 460px;
    margin-top: auto;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
}

.login-card__accent[b-ohp9wqqsou] {
    height: 6px;
    background: linear-gradient(90deg, #2563EB 0%, #4F46E5 50%, #3B82F6 100%);
}

.login-card__body[b-ohp9wqqsou] {
    padding: 32px 32px 24px;
}

.login-card__footer[b-ohp9wqqsou] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 32px;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
}

.login-card__footer-item[b-ohp9wqqsou] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #64748B;
}

/* The SSL lock is the only green accent in the card footer (matches the design). */
.login-card__footer-item--secure svg[b-ohp9wqqsou] {
    color: #16A34A;
}

/* ── Brand ───────────────────────────────────────────────────────────────── */
.login-brand[b-ohp9wqqsou] {
    text-align: center;
    margin-bottom: 24px;
}

.login-brand__logo[b-ohp9wqqsou] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 14px;
    border-radius: 20px;
    color: #2563EB;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    font-size: 34px;
}

.login-brand__title[b-ohp9wqqsou] {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #0F172A;
}

.login-brand__subtitle[b-ohp9wqqsou] {
    margin: 4px 0 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #94A3B8;
}

[b-ohp9wqqsou] .login-brand__logo svg {
    width: 34px;
    height: 34px;
}

/* ── Tenant context badge (shared component: Components/TenantBadge.razor) ── */
.login-tenant[b-ohp9wqqsou] {
    margin-bottom: 24px;
}

/* ── Loading ─────────────────────────────────────────────────────────────── */
.login-loading[b-ohp9wqqsou] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px 0;
}

.login-loading__text[b-ohp9wqqsou] {
    font-size: 13px;
    color: #64748B;
}

/* ── Step content ────────────────────────────────────────────────────────── */
.login-step__title[b-ohp9wqqsou] {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #0F172A;
}

.login-step__desc[b-ohp9wqqsou] {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.5;
    color: #64748B;
}

.login-label[b-ohp9wqqsou] {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #334155;
}

.login-label--center[b-ohp9wqqsou] {
    text-align: center;
}

.login-label__required[b-ohp9wqqsou] {
    margin-left: 4px;
    color: #EF4444;
    font-size: var(--erp-control-font-size, 0.875rem);
    line-height: 1;
}

.login-error[b-ohp9wqqsou] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #B91C1C;
    background: #FEF2F2;
    border: 1px solid #FECACA;
}

[b-ohp9wqqsou] .login-input {
    margin-bottom: 20px;
}

[b-ohp9wqqsou] .login-input .mud-input-outlined-border {
    border-color: #CBD5E1;
    border-radius: 10px;
}

[b-ohp9wqqsou] .login-input .mud-input-adornment {
    color: #94A3B8;
}

/* ── CTA buttons (global control-height contract still governs height) ───── */
[b-ohp9wqqsou] .login-cta {
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px;
    border-radius: 10px !important;
    box-shadow: none !important;
}

/* ── Back link ───────────────────────────────────────────────────────────── */
.login-back[b-ohp9wqqsou] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
    padding: 0;
    border: none;
    background: none;
    font-size: 12.5px;
    font-weight: 700;
    color: #2563EB;
    cursor: pointer;
}

.login-back:hover[b-ohp9wqqsou] {
    color: #1D4ED8;
    text-decoration: underline;
}

/* ── OTP boxes (raw inputs: intentionally exempt from the 40px control contract) ── */
.otp-row[b-ohp9wqqsou] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 4px 0 14px;
}

.otp-box[b-ohp9wqqsou] {
    width: 100%;
    min-width: 0;
    height: 56px;
    padding: 0;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    color: #0F172A;
    background: #F8FAFC;
    border: 1.5px solid #CBD5E1;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.otp-box:focus[b-ohp9wqqsou] {
    background: #FFFFFF;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.otp-box[b-ohp9wqqsou]::selection {
    background: rgba(37, 99, 235, 0.2);
}

@media (max-width: 420px) {
    .otp-box[b-ohp9wqqsou] {
        height: 48px;
        font-size: 18px;
        border-radius: 10px;
    }

    .otp-row[b-ohp9wqqsou] {
        gap: 6px;
    }

    .login-card__body[b-ohp9wqqsou] {
        padding: 24px 20px 20px;
    }

    .login-card__footer[b-ohp9wqqsou] {
        padding: 12px 20px;
    }
}

/* ── Passcode step: reveal toggle + switch-to-OTP link ───────────────────── */
.login-attempts[b-ohp9wqqsou] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 12.5px;
    color: #64748B;
}

/* Shared by the "Hiện/Ẩn mã PIN" reveal and the "Dùng mã OTP thay thế" shortcut. */
.login-switch-link[b-ohp9wqqsou] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: none;
    font-size: 12.5px;
    font-weight: 700;
    color: #2563EB;
    cursor: pointer;
}

.login-switch-link:hover[b-ohp9wqqsou] {
    color: #1D4ED8;
    text-decoration: underline;
}

.login-alt[b-ohp9wqqsou] {
    margin-top: 16px;
    text-align: center;
}

/* ── Resend countdown / link ─────────────────────────────────────────────── */
.otp-resend[b-ohp9wqqsou] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    margin-bottom: 18px;
    font-size: 12.5px;
    color: #64748B;
}

.otp-resend__countdown strong[b-ohp9wqqsou] {
    color: #2563EB;
}

.otp-resend__link[b-ohp9wqqsou] {
    padding: 0;
    border: none;
    background: none;
    font-size: 12.5px;
    font-weight: 700;
    color: #2563EB;
    cursor: pointer;
}

.otp-resend__link:hover[b-ohp9wqqsou] {
    color: #1D4ED8;
    text-decoration: underline;
}

/* ── Page footer ─────────────────────────────────────────────────────────── */
.login-footer[b-ohp9wqqsou] {
    margin-top: 40px;
    margin-bottom: auto;
    text-align: center;
    font-size: 11.5px;
    color: #64748B;
}

/* ── Animation ───────────────────────────────────────────────────────────── */
.fade-in-quick[b-ohp9wqqsou] {
    animation: fadeInQuick-b-ohp9wqqsou 0.25s ease-out forwards;
}

@keyframes fadeInQuick-b-ohp9wqqsou {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Fullscreen Blocking Loading Overlay ────────────────── */
.login-loading-overlay[b-ohp9wqqsou] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 6, 23, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: wait;
    user-select: none;
    padding: 24px;
}

.login-loading-content[b-ohp9wqqsou] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 24px;
    padding: 36px 44px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    text-align: center;
    min-width: 300px;
    max-width: 420px;
    width: 100%;
}

.login-loading-spinner[b-ohp9wqqsou] {
    margin-bottom: 20px;
    color: #2563EB !important;
}

.login-loading-title[b-ohp9wqqsou] {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #0F172A;
    margin-bottom: 8px;
}

.login-loading-desc[b-ohp9wqqsou] {
    font-size: 13.5px;
    line-height: 1.5;
    color: #64748B;
}
/* _content/ERP.Client/Client/Pages/Categories/CategoryForm.razor.rz.scp.css */
.media-preview-container[b-vno9cceio0] {
    width: 100%;
    border: 1px solid rgba(0,0,0,0.08);
    background: #fff;
    padding: 4px;
}
/* _content/ERP.Client/Client/Pages/Customers/CustomerEdit.razor.rz.scp.css */
.customer-page-container[b-g07w50gly0] {
    width: 100%;
}

.customer-page-header[b-g07w50gly0]  .tp-primary-btn,
.customer-page-header[b-g07w50gly0]  .tp-secondary-btn {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
}

.required-star[b-g07w50gly0] {
    color: #ef4444;
    font-weight: 600;
}

.contact-link[b-g07w50gly0] {
    color: #1976d2;
    text-decoration: none;
    transition: color 0.15s ease;
}

.contact-link:hover[b-g07w50gly0] {
    color: #1565c0;
    text-decoration: underline;
}

/* Recent-order cells that open the invoice detail — same affordance as the invoice pages'
   cross-entity links (blue text, underline on hover). Scoped CSS cannot be shared across components,
   so the rule is re-declared here (mirror of InvoiceDetail.razor.css). */
.invoice-actor-link[b-g07w50gly0] {
    color: #2486f7;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease-in-out;
}

.invoice-actor-link:hover[b-g07w50gly0] {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.customer-orders-card[b-g07w50gly0] {
    min-height: 250px;
}

.orders-list-link[b-g07w50gly0] {
    display: inline-flex;
    align-items: center;
    color: #1976d2;
    font-size: 15px;
    font-weight: 600;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease;
}

.orders-list-link:hover[b-g07w50gly0] {
    color: #1565c0;
    text-decoration: underline;
}

/* Status Badges */
.status-badge[b-g07w50gly0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.status-dot[b-g07w50gly0] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.status-badge.status-success[b-g07w50gly0] {
    background-color: #ecfdf5;
    color: #059669;
}
.status-badge.status-success .status-dot[b-g07w50gly0] {
    background-color: #10b981;
}

.status-badge.status-processing[b-g07w50gly0] {
    background-color: #eff6ff;
    color: #2563eb;
}
.status-badge.status-processing .status-dot[b-g07w50gly0] {
    background-color: #3b82f6;
}

.status-badge.status-warning[b-g07w50gly0] {
    background-color: #fffbeb;
    color: #d97706;
}
.status-badge.status-warning .status-dot[b-g07w50gly0] {
    background-color: #f59e0b;
}

.status-badge.status-error[b-g07w50gly0] {
    background-color: #fef2f2;
    color: #dc2626;
}
.status-badge.status-error .status-dot[b-g07w50gly0] {
    background-color: #ef4444;
}

.status-badge.status-default[b-g07w50gly0] {
    background-color: #f1f5f9;
    color: #64748b;
}
.status-badge.status-default .status-dot[b-g07w50gly0] {
    background-color: #94a3b8;
}

/* Customer Statistics Card */
.customer-stats-card[b-g07w50gly0] {
    background-color: var(--mud-palette-surface);
}

.stats-grid[b-g07w50gly0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 900px) {
    .stats-grid[b-g07w50gly0] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.stat-card[b-g07w50gly0] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.stat-card:hover[b-g07w50gly0] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.stat-icon-wrapper[b-g07w50gly0] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-content[b-g07w50gly0] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stat-label[b-g07w50gly0] {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-value[b-g07w50gly0] {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

.stat-unit[b-g07w50gly0] {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
}

/* Modern Gradient Accents */
.stat-card--blue[b-g07w50gly0] {
    background: linear-gradient(135deg, #f0f7ff 0%, #e0effe 100%);
}
.stat-card--blue .stat-icon-wrapper[b-g07w50gly0] {
    background: #0284c7;
    color: #ffffff;
}
.stat-card--blue .stat-value[b-g07w50gly0] {
    color: #0369a1;
}

.stat-card--emerald[b-g07w50gly0] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}
.stat-card--emerald .stat-icon-wrapper[b-g07w50gly0] {
    background: #10b981;
    color: #ffffff;
}
.stat-card--emerald .stat-value[b-g07w50gly0] {
    color: #047857;
}

.stat-card--purple[b-g07w50gly0] {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
}
.stat-card--purple .stat-icon-wrapper[b-g07w50gly0] {
    background: #8b5cf6;
    color: #ffffff;
}
.stat-card--purple .stat-value[b-g07w50gly0] {
    color: #6d28d9;
}

.time-filter-select[b-g07w50gly0] {
    background-color: var(--mud-palette-surface);
}

.time-filter-select[b-g07w50gly0]  .mud-input {
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
}
/* _content/ERP.Client/Client/Pages/Invoices/InvoiceCreate.razor.rz.scp.css */
.invoice-create-container[b-q42ir7rtnb] {
    width: 100%;
    min-width: min(100%, 1000px);
    max-width: 1400px;
    margin: 0 auto;
}

/* Switch typography matching .input-label */
[b-q42ir7rtnb] .walk-in-switch .mud-switch-label,
[b-q42ir7rtnb] .walk-in-switch .mud-typography {
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
}

.invoice-search-wrapper[b-q42ir7rtnb] {
    position: relative;
    width: 100%;
}

.invoice-product-dropdown[b-q42ir7rtnb] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    max-height: 380px;
    overflow-y: auto;
    margin-top: 4px;
}

.product-dropdown-item[b-q42ir7rtnb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-divider);
    transition: background-color 0.15s ease-in-out;
}

.product-dropdown-item:last-child[b-q42ir7rtnb] {
    border-bottom: none;
}

.product-dropdown-item:hover[b-q42ir7rtnb] {
    background-color: var(--mud-palette-action-default-hover);
}

.product-item-thumb-slot[b-q42ir7rtnb] {
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}

.product-item-thumb-slot .thumbnail-icon[b-q42ir7rtnb] {
    width: 28px !important;
    height: 28px !important;
    font-size: 24px !important;
}

.table-product-thumb-slot[b-q42ir7rtnb] {
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    margin: 0 auto;
}

.table-product-thumb-slot .thumbnail-icon[b-q42ir7rtnb] {
    width: 32px !important;
    height: 32px !important;
    font-size: 26px !important;
}

.customer-info-box[b-q42ir7rtnb] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background-color: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}

.quantity-control[b-q42ir7rtnb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.quantity-field[b-q42ir7rtnb] {
    width: 65px !important;
}

[b-q42ir7rtnb] .quantity-field input {
    text-align: center !important;
    font-size: 13px !important;
    padding: 4px 6px !important;
}

.invoice-order-summary[b-q42ir7rtnb] {
    background-color: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 16px;
}

[b-q42ir7rtnb] .invoice-order-summary .mud-input.mud-input-outlined {
    background-color: #ffffff;
}

[b-q42ir7rtnb] .invoice-order-summary input {
    font-size: 13px !important;
}

.invoice-customer-link[b-q42ir7rtnb],
.invoice-product-link[b-q42ir7rtnb] {
    color: var(--mud-palette-primary) !important;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease-in-out, text-decoration 0.15s ease-in-out;
}

.invoice-customer-link:hover[b-q42ir7rtnb],
.invoice-product-link:hover[b-q42ir7rtnb] {
    color: #1d4ed8 !important;
    text-decoration: underline !important;
}

[b-q42ir7rtnb] .location-picker-trigger input {
    cursor: pointer !important;
}

.location-trigger-wrapper[b-q42ir7rtnb] {
    cursor: pointer;
}

.shipping-address-summary[b-q42ir7rtnb] {
    background-color: var(--mud-palette-background-grey, #f8fafc);
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0);
}

.invoice-table-wrapper[b-q42ir7rtnb] {
    width: 100%;
    overflow-x: auto;
}

[b-q42ir7rtnb] .invoice-table-wrapper .mud-table-root {
    min-width: 980px;
}

.invoice-variant-select[b-q42ir7rtnb] {
    width: 100%;
    min-width: 160px;
}

[b-q42ir7rtnb] .invoice-variant-select .mud-input-outlined {
    background-color: var(--mud-palette-surface, #ffffff);
    font-size: 13px !important;
}

[b-q42ir7rtnb] .invoice-variant-select .mud-select-input {
    font-size: 13px !important;
}

/* _content/ERP.Client/Client/Pages/Invoices/InvoiceDetail.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Order detail page (/ta/invoices/{id}) — "Grid Cards" layout:
   horizontal navbar (44px) → chip row → full-width timeline (64px)
   → MudGrid 2 columns md=8 (left) / md=4 (right) → "Danger zone".

   Scoped CSS: the `invoice-card--*` classes are passed to the <FormGroup> component's
   `Class` parameter (rendered as <MudPaper>), so that element does NOT carry the page's
   scope-id ⇒ it can only be styled through `::deep`.
   Minimum height uses `min-height` (NOT `height`) so a card grows with its content
   while still keeping the minimum frame when data is short.

   The 2-COLUMN GUTTER is handled by this file: `<MudGrid>` is set to `Spacing="0"` so
   MudBlazor does NOT emit `.mud-grid-spacing-xs-6` (that rule includes `margin-left:-24px`,
   `> .mud-grid-item{padding-left:24px}` and `width:calc(100% + 24px)`); with the default 6
   the card would be indented 24px vs the timeline above because `Class="ma-0"` only kills the negative margin.
   ═══════════════════════════════════════════════════════════════════════════ */

.invoice-detail[b-tyxnxx0w3f] {
    /* Minimum height of each block — declared in ONE place, used by both columns. */
    --invoice-navbar-min-height: 44px;
    --invoice-timeline-min-height: 64px;
    --invoice-card-items-min-height: 150px;
    --invoice-card-payment-min-height: 130px;
    --invoice-card-payments-min-height: 150px;
    --invoice-card-customer-min-height: 220px;
    --invoice-card-note-min-height: 80px;
    --invoice-card-extra-min-height: 150px;
}

/* ─── Horizontal navbar, full width ──────────────────────────────────────────
   Keeps the `page-header` class (shared page hook/style) + `invoice-navbar`
   (this page's own style). */
.invoice-detail .invoice-navbar[b-tyxnxx0w3f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    min-height: var(--invoice-navbar-min-height);
    margin-bottom: 1rem;
    padding: .5rem .75rem;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

.invoice-navbar-main[b-tyxnxx0w3f] {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.invoice-navbar-title[b-tyxnxx0w3f] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

/* A long invoice code must not break the navbar. */
.invoice-nav-code[b-tyxnxx0w3f] {
    overflow-wrap: anywhere;
}

/* Action + Reload buttons always hug the right edge, even when the navbar wraps. */
.invoice-navbar-actions[b-tyxnxx0w3f] {
    margin-left: auto;
}

/* ─── Two columns ─────────────────────────────────────────────────────────── */
.invoice-col[b-tyxnxx0w3f] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.invoice-col-left[b-tyxnxx0w3f] {
    /* Half gutter (1.5rem/2) because `<MudGrid Spacing="0">` no longer emits MudBlazor padding. */
    padding-right: .75rem;
}

.invoice-col-right[b-tyxnxx0w3f] {
    /* The right column shrinks to content: cards stack vertically, not stretched to the left column's height. */
    height: fit-content;
    /* Half gutter, plus the left column's padding-right = 1.5rem between the two columns. */
    padding-left: .75rem;
}

/* ─── Minimum height of each card ───────────────────────────────────────────
   The element carrying the class is the <MudPaper> rendered by <FormGroup> ⇒ `::deep` is required. */
[b-tyxnxx0w3f] .invoice-card--timeline { min-height: var(--invoice-timeline-min-height); }
[b-tyxnxx0w3f] .invoice-card--items { min-height: var(--invoice-card-items-min-height); }
[b-tyxnxx0w3f] .invoice-card--payment { min-height: var(--invoice-card-payment-min-height); }
[b-tyxnxx0w3f] .invoice-card--payments { min-height: var(--invoice-card-payments-min-height); }
[b-tyxnxx0w3f] .invoice-card--customer { min-height: var(--invoice-card-customer-min-height); }
[b-tyxnxx0w3f] .invoice-card--note { min-height: var(--invoice-card-note-min-height); }
[b-tyxnxx0w3f] .invoice-card--extra { min-height: var(--invoice-card-extra-min-height); }

/* The invoice item table stays within its card; long product names wrap inside their assigned column. */
[b-tyxnxx0w3f] .invoice-items-table .mud-table-container {
    width: 100%;
    overflow-x: hidden !important;
}

[b-tyxnxx0w3f] .invoice-items-table .mud-table-root {
    width: 100%;
    table-layout: fixed;
}

[b-tyxnxx0w3f] .invoice-items-table .mud-table-cell {
    min-width: 0;
    overflow-wrap: anywhere;
}

[b-tyxnxx0w3f] .invoice-items-table .mud-table-head .mud-table-cell {
    white-space: normal !important;
    overflow-wrap: anywhere;
}

[b-tyxnxx0w3f] .invoice-items-table .invoice-item-product {
    width: 100%;
    min-width: 0;
}

[b-tyxnxx0w3f] .invoice-items-table .invoice-item-product-copy {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Spacing between cards in a column is handled by the column's `gap` ⇒ cards add no margin themselves. */
[b-tyxnxx0w3f] .invoice-col .invoice-card {
    width: 100%;
    margin-bottom: 0;
}

/* ─── "Customer" block: 5 segments stacked vertically (name / phone / email / customer id / address) ── */
.invoice-customer-grid[b-tyxnxx0w3f] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.invoice-customer-seg[b-tyxnxx0w3f] {
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

/* The address is the only long content in the card, so allow wrapping instead of horizontal overflow. */
.invoice-customer-seg--address .mud-typography[b-tyxnxx0w3f] {
    overflow-wrap: anywhere;
}

/* ─── "Note" block: content on the left, edit button hugging the right edge ───────────────── */
.invoice-note-body[b-tyxnxx0w3f] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ─── "Additional info" block: 4 label/value rows stacked vertically ────────────────── */
.invoice-info-grid[b-tyxnxx0w3f] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.invoice-info-row[b-tyxnxx0w3f] {
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.invoice-info-row .invoice-actor-name[b-tyxnxx0w3f] {
    overflow-wrap: anywhere;
}

/* ─── Cross-entity links inside the cards (customer name / actor names) ─────────────────
   Same affordance as the list pages' name cells: blue text, underline on hover. Both classes sit on
   elements OWNED by this component (the MudText inside the customer link inherits the colour), so plain
   scoped selectors are enough — no ::deep. */
.invoice-customer-link[b-tyxnxx0w3f],
.invoice-actor-link[b-tyxnxx0w3f] {
    color: #2486f7;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease-in-out;
}

.invoice-customer-link:hover[b-tyxnxx0w3f],
.invoice-actor-link:hover[b-tyxnxx0w3f] {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}


/* ─── "Danger zone" (full width, end of page) ───────────────── */
.invoice-danger-zone[b-tyxnxx0w3f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .75rem 1rem;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-error);
}

.invoice-danger-zone-text[b-tyxnxx0w3f] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 720px;
}

/* ─── Narrow screens (< 960px = MudBlazor md breakpoint): the 2 columns stack vertically ────────── */
@media (max-width: 959.98px) {
    .invoice-col-left[b-tyxnxx0w3f],
    .invoice-col-right[b-tyxnxx0w3f] {
        padding: 0;
    }

    .invoice-col-right[b-tyxnxx0w3f] {
        margin-top: 1rem;
    }

    /* Danger zone: the button drops below the description instead of sitting inline. */
    .invoice-danger-zone[b-tyxnxx0w3f] {
        flex-direction: column;
        align-items: stretch;
    }

    .invoice-danger-zone-actions[b-tyxnxx0w3f] {
        justify-content: flex-start;
    }
}
/* _content/ERP.Client/Client/Pages/Invoices/LocationPickerDialog.razor.rz.scp.css */
.location-dialog-header[b-96k15jwyzg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e2e8f0);
}

.header-icon-box[b-96k15jwyzg] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dialog-title-text[b-96k15jwyzg] {
    color: var(--mud-palette-text-primary, #1e293b);
    font-size: 1.05rem;
    line-height: 1.3;
}

.dialog-subtitle-text[b-96k15jwyzg] {
    font-size: 0.8rem;
    color: #64748b;
}

/* Stepper Bar */
.location-stepper[b-96k15jwyzg] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: var(--mud-palette-background-grey, #f8fafc);
    border-bottom: 1px solid var(--mud-palette-lines-default, #e2e8f0);
    gap: 12px;
}

.stepper-step[b-96k15jwyzg] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
    transition: all 0.2s ease;
}

.stepper-step.active[b-96k15jwyzg] {
    color: #2563eb;
    font-weight: 600;
    background: rgba(37, 99, 235, 0.08);
}

.stepper-step.completed[b-96k15jwyzg] {
    color: #10b981;
    cursor: pointer;
}

.stepper-step.completed:hover[b-96k15jwyzg] {
    background: rgba(16, 185, 129, 0.08);
}

.step-num[b-96k15jwyzg] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    background: #e2e8f0;
    color: #64748b;
    transition: all 0.2s;
}

.stepper-step.active .step-num[b-96k15jwyzg] {
    background: #2563eb;
    color: #ffffff;
}

.stepper-step.completed .step-num[b-96k15jwyzg] {
    background: #10b981;
    color: #ffffff;
}

.stepper-divider[b-96k15jwyzg] {
    flex: 0 0 36px;
    height: 2px;
    background: #e2e8f0;
    transition: background 0.3s ease;
}

.stepper-divider.active[b-96k15jwyzg] {
    background: #2563eb;
}

/* Slider Track */
.location-slider-viewport[b-96k15jwyzg] {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.location-slider-track[b-96k15jwyzg] {
    display: flex;
    width: 200%;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.location-slider-track.slide-to-step1[b-96k15jwyzg] {
    transform: translateX(0);
}

.location-slider-track.slide-to-step2[b-96k15jwyzg] {
    transform: translateX(-50%);
}

.location-pane[b-96k15jwyzg] {
    width: 50%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 16px 20px 20px 20px;
}

.pane-search-bar[b-96k15jwyzg] {
    margin-bottom: 12px;
}

.location-scroll-list[b-96k15jwyzg] {
    height: 380px;
    overflow-y: auto;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.location-scroll-list[b-96k15jwyzg]::-webkit-scrollbar {
    width: 6px;
}

.location-scroll-list[b-96k15jwyzg]::-webkit-scrollbar-track {
    background: transparent;
}

.location-scroll-list[b-96k15jwyzg]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.location-scroll-list[b-96k15jwyzg]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Row items */
.location-row-item[b-96k15jwyzg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.18s ease;
    border: 1px solid transparent;
    user-select: none;
}

.location-row-item:hover[b-96k15jwyzg] {
    background: rgba(37, 99, 235, 0.06);
    border-color: rgba(37, 99, 235, 0.18);
    transform: translateY(-1px);
}

.location-row-item.is-selected[b-96k15jwyzg] {
    background: rgba(37, 99, 235, 0.1);
    border-color: #2563eb;
}

.row-icon-circle[b-96k15jwyzg] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(100, 116, 139, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    flex-shrink: 0;
}

.row-main-title[b-96k15jwyzg] {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary, #1e293b);
}

.row-sub-title[b-96k15jwyzg] {
    font-size: 0.75rem;
    color: #64748b;
}

.row-arrow-icon[b-96k15jwyzg] {
    color: #94a3b8;
    transition: transform 0.18s ease;
}

.location-row-item:hover .row-arrow-icon[b-96k15jwyzg] {
    transform: translateX(2px);
    color: #2563eb;
}

/* Ward specific */
.ward-row-item[b-96k15jwyzg] {
    gap: 12px;
}

.district-badge[b-96k15jwyzg] {
    display: inline-block;
    font-size: 0.75rem;
    color: #475569;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 500;
}

.ward-row-item:hover .district-badge[b-96k15jwyzg] {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

.select-indicator[b-96k15jwyzg] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all 0.18s ease;
    flex-shrink: 0;
}

.ward-row-item:hover .select-indicator[b-96k15jwyzg] {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

/* States */
.location-loading-state[b-96k15jwyzg],
.location-empty-state[b-96k15jwyzg] {
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* _content/ERP.Client/Client/Pages/Popups/Popups.razor.rz.scp.css */
.thumbnail-wrapper[b-q0p5xpdq5w] {
    width: 90px;
    height: 60px;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background-grey);
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-thumbnail[b-q0p5xpdq5w] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease-in-out;
}

.popup-thumbnail:hover[b-q0p5xpdq5w] {
    transform: scale(1.1);
}

.date-text[b-q0p5xpdq5w] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.add-popup-button[b-q0p5xpdq5w] {
    background-color: #2486f7 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.add-popup-button:hover[b-q0p5xpdq5w] {
    background-color: #1479ed !important;
    box-shadow: none !important;
}
/* _content/ERP.Client/Client/Pages/Roles/RoleEdit.razor.rz.scp.css */
.invoice-danger-zone[b-munvpxs85r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-error);
}

.invoice-danger-zone-text[b-munvpxs85r] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 720px;
}

@media (max-width: 959.98px) {
    .invoice-danger-zone[b-munvpxs85r] {
        flex-direction: column;
        align-items: stretch;
    }

    .invoice-danger-zone-actions[b-munvpxs85r] {
        justify-content: flex-start;
    }
}
/* _content/ERP.Client/Client/Pages/Roles/RolePermissionTree.razor.rz.scp.css */
.role-permission-tree-container[b-s468pqggz4] {
    width: 100%;
}

/* ══════════════════════════════════════════════════════════
   BASE & LIGHT THEME STYLES
   ══════════════════════════════════════════════════════════ */
.role-perm-master-card[b-s468pqggz4] {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    transition: all 0.2s ease;
}

.app-theme-light .role-perm-master-card[b-s468pqggz4] {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}

.role-perm-shield-icon[b-s468pqggz4] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: rgba(36, 134, 247, 0.12);
    color: #2486f7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.role-perm-title[b-s468pqggz4] {
    color: #0F172A;
    font-size: 16px;
}

.app-theme-light .role-perm-title[b-s468pqggz4] {
    color: #0F172A !important;
}

.role-perm-caption[b-s468pqggz4] {
    color: #64748B;
}

.app-theme-light .role-perm-caption[b-s468pqggz4] {
    color: #64748B !important;
}

.role-perm-switch-label[b-s468pqggz4] {
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
}

.app-theme-light .role-perm-switch-label[b-s468pqggz4] {
    color: #334155 !important;
}

.role-perm-toolbar[b-s468pqggz4] {
    border-top: 1px dashed #E2E8F0;
}

.app-theme-light .role-perm-toolbar[b-s468pqggz4] {
    border-color: #E2E8F0 !important;
}

.role-perm-search-box[b-s468pqggz4] {
    flex: 1;
    min-width: 240px;
    max-width: 420px;
}

.role-perm-subtext[b-s468pqggz4] {
    color: #64748B;
    font-size: 12.5px;
}

.app-theme-light .role-perm-subtext[b-s468pqggz4] {
    color: #64748B !important;
}

.role-perm-module-card[b-s468pqggz4] {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    transition: all 0.15s ease;
    overflow: hidden;
}

.app-theme-light .role-perm-module-card[b-s468pqggz4] {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}

.role-perm-module-card:hover[b-s468pqggz4] {
    border-color: #CBD5E1;
}

.role-perm-module-card.is-expanded[b-s468pqggz4] {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.role-perm-module-header[b-s468pqggz4] {
    background-color: transparent;
    user-select: none;
    transition: background-color 0.15s ease;
}

.role-perm-module-header:hover[b-s468pqggz4] {
    background-color: #F8FAFC;
}

.app-theme-light .role-perm-module-header:hover[b-s468pqggz4] {
    background-color: #F8FAFC !important;
}

.role-perm-module-icon[b-s468pqggz4] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: rgba(15, 23, 42, 0.04);
    color: #0284c7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.role-perm-module-name[b-s468pqggz4] {
    color: #0F172A;
    font-size: 14.5px;
}

.app-theme-light .role-perm-module-name[b-s468pqggz4] {
    color: #0F172A !important;
}

.role-perm-actions-list[b-s468pqggz4] {
    border-top: 1px solid #F1F5F9;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-color: #F8FAFC;
}

.app-theme-light .role-perm-actions-list[b-s468pqggz4] {
    background-color: #F8FAFC !important;
    border-color: #F1F5F9 !important;
}

.role-perm-action-row[b-s468pqggz4] {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    transition: all 0.15s ease;
}

.app-theme-light .role-perm-action-row[b-s468pqggz4] {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}

.role-perm-action-row:hover[b-s468pqggz4] {
    background-color: #F1F5F9;
    border-color: #CBD5E1;
}

.role-perm-action-row.is-action-granted[b-s468pqggz4] {
    border-color: rgba(36, 134, 247, 0.35);
    background-color: rgba(36, 134, 247, 0.04);
}

.role-perm-action-name[b-s468pqggz4] {
    color: #1E293B;
    font-size: 13.5px;
}

.app-theme-light .role-perm-action-name[b-s468pqggz4] {
    color: #1E293B !important;
}

.role-perm-action-code[b-s468pqggz4] {
    color: #64748B;
    font-size: 11.5px;
    letter-spacing: -0.2px;
}

.app-theme-light .role-perm-action-code[b-s468pqggz4] {
    color: #64748B !important;
}

/* ══════════════════════════════════════════════════════════
   DARK THEME STYLES
   ══════════════════════════════════════════════════════════ */
.app-theme-dark .role-perm-master-card[b-s468pqggz4] {
    background-color: #111C2E !important;
    border-color: #1E2D4A !important;
}

.app-theme-dark .role-perm-shield-icon[b-s468pqggz4] {
    background-color: rgba(56, 189, 248, 0.15) !important;
    color: #38BDF8 !important;
}

.app-theme-dark .role-perm-title[b-s468pqggz4] {
    color: #FFFFFF !important;
}

.app-theme-dark .role-perm-caption[b-s468pqggz4] {
    color: #94A3B8 !important;
}

.app-theme-dark .role-perm-switch-label[b-s468pqggz4] {
    color: #FFFFFF !important;
}

.app-theme-dark .role-perm-toolbar[b-s468pqggz4] {
    border-color: #1E2D4A !important;
}

.app-theme-dark .role-perm-subtext[b-s468pqggz4] {
    color: #94A3B8 !important;
}

.app-theme-dark .role-perm-module-card[b-s468pqggz4] {
    background-color: #111C2E !important;
    border-color: #1E2D4A !important;
}

.app-theme-dark .role-perm-module-card:hover[b-s468pqggz4] {
    border-color: #2D4166 !important;
}

.app-theme-dark .role-perm-module-card.is-expanded[b-s468pqggz4] {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}

.app-theme-dark .role-perm-module-header:hover[b-s468pqggz4] {
    background-color: #17243B !important;
}

.app-theme-dark .role-perm-module-icon[b-s468pqggz4] {
    background-color: rgba(56, 189, 248, 0.15) !important;
    color: #38BDF8 !important;
}

.app-theme-dark .role-perm-module-name[b-s468pqggz4] {
    color: #FFFFFF !important;
}

.app-theme-dark .role-perm-actions-list[b-s468pqggz4] {
    background-color: #0B1320 !important;
    border-color: #1E2D4A !important;
}

.app-theme-dark .role-perm-action-row[b-s468pqggz4] {
    background-color: #111C2E !important;
    border-color: #1E2D4A !important;
}

.app-theme-dark .role-perm-action-row:hover[b-s468pqggz4] {
    background-color: #17243B !important;
    border-color: #2D4166 !important;
}

.app-theme-dark .role-perm-action-row.is-action-granted[b-s468pqggz4] {
    border-color: rgba(56, 189, 248, 0.4) !important;
    background-color: rgba(56, 189, 248, 0.08) !important;
}

.app-theme-dark .role-perm-action-name[b-s468pqggz4] {
    color: #FFFFFF !important;
}

.app-theme-dark .role-perm-action-code[b-s468pqggz4] {
    color: #94A3B8 !important;
}
/* _content/ERP.Client/Client/Pages/Users/UserEdit.razor.rz.scp.css */
/* Contact links in the read-only detail card. Scoped CSS cannot be shared across components,
   so this mirrors the rule declared in CustomerEdit.razor.css. */
.contact-link[b-6326rn4gcc] {
    color: #1976d2;
    text-decoration: none;
    transition: color 0.15s ease;
}

.contact-link:hover[b-6326rn4gcc] {
    color: #1565c0;
    text-decoration: underline;
}

/* Slightly larger avatar for the detail header card. The class lands on the MudAvatar root,
   which is rendered by a child component ⇒ ::deep is required for the scoped selector to match. */
[b-6326rn4gcc] .user-detail-avatar {
    width: 64px;
    height: 64px;
    font-size: 24px;
}
/* _content/ERP.Client/Components/DateRangeMenu.razor.rz.scp.css */
/* DateRangeMenu — scoped CSS.
   The picker is rendered IN PLACE by this component (see the note in DateRangeMenu.razor), so the wrapper
   below is our own markup and a plain scoped selector is enough. The picker's own markup is NOT ours (it is
   rendered by MudDateRangePicker), so every rule that reaches inside it must use ::deep. */

.date-range-menu[b-xp59hlf44i] {
    /* Fixed width token so the filter row does not jump when a day is picked and so the control keeps the
       same footprint as the filter pills next to it (see .segment-filter-group in wwwroot/css/layout-fixes.css).
       200px = the footprint of the narrow "order code" pill in the same row (Invoices.razor) and just enough for
       the two SHORT per-end day hints set by the pages (start/end). It used to be 256px only because ONE long
       hint had to fit in BOTH day inputs. */
    --erp-date-range-width: 200px;

    /* The filter row is a flex container: keep the control at its token width but allow it to shrink on
       narrow screens instead of pushing the status filter and the Reset button out of the row. */
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
}

/* The two day inputs sit inside the picker's own .mud-input-control. Pin it to the token: without this the
   control sizes itself to the two placeholder hints and changes width as soon as a date is displayed. */
.date-range-menu[b-xp59hlf44i]  .mud-input-control {
    width: var(--erp-date-range-width) !important;
    min-width: var(--erp-date-range-width) !important;
    margin: 0 !important;
}

.date-range-menu[b-xp59hlf44i]  .custom-date-picker .mud-input {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
}

.date-range-menu[b-xp59hlf44i]  .custom-date-picker input.mud-input-slot {
   width: 100%;
   min-width: 0;
   padding: 0;
   text-align: center;
}

.date-range-menu[b-xp59hlf44i]  .custom-date-picker .mud-range-input-separator {
   visibility: visible;
   margin: 0;
}

.date-range-menu[b-xp59hlf44i]  .custom-date-picker .mud-input-underline::before,
.date-range-menu[b-xp59hlf44i]  .custom-date-picker .mud-input-underline::after {
   display: none !important;
   border-bottom: none !important;
}

/* Same frame as the filter pills: 1px #d0d7de + 6px radius. MudBlazor draws the outlined frame as
   <fieldset class="mud-input-outlined-border">; `!important` is required because MudBlazor's own
   (.mud-input.mud-input-outlined .mud-input-outlined-border) has the SAME specificity (0,2,0) and the
   bundled MudBlazor.min.css can be loaded after ERP.Client.styles.css. */
.date-range-menu[b-xp59hlf44i]  .mud-input-outlined-border {
    border: 1px solid #d0d7de !important;
    border-radius: 6px !important;
}
/* _content/ERP.Client/Components/FieldHint.razor.rz.scp.css */
/*
    Contract: the hint must NOT change the height of the label row it is added to.
    The label is a `MudText Typo="body2|subtitle2"` line box (0.875rem * 1.43 ≈ 20px), so the icon is pinned
    to 14px — smaller than the line box ⇒ the inline box of the hint never pushes the line taller (compare
    with the required-field marker, which is pinned the same way in Client/App.razor.css).
    Only size/colour/spacing live here: a `height`/`line-height` on the wrapper would break when the user
    zooms or switches font, which is exactly what Rule 5 forbids.
*/

.field-hint[b-vv8df4kuve] {
    /* The trigger is a <button> (click + keyboard). Every user-agent default is reset so it still looks like
       a hint: no box, no background, no padding, and `font: inherit` keeps the inherited line-height and
       font-size (using `height`/`line-height` here would break at another zoom level — Rule 5). */
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    display: inline-flex;
    align-items: center;
    /* 4px gap after the label text (or after the required "*") without touching the label's own margin. */
    margin-left: 4px;
    margin-bottom: 2px;
    vertical-align: middle;
    cursor: pointer;
}

/* Keyboard users must see where they are before the popup opens (the browser default ring is removed by
   the padding/border reset above). */
.field-hint:focus-visible[b-vv8df4kuve] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
    border-radius: 3px;
}

.field-hint[b-vv8df4kuve]  .field-hint-icon {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: #94a3b8;
    /* The hint opens a popup: the pointer signals "clickable" instead of the old "there is a tooltip". */
    cursor: pointer;
}

/* Hover makes the trigger obvious (the icon is muted most of the time, like the secondary text). */
.field-hint:hover[b-vv8df4kuve]  .field-hint-icon {
    color: var(--mud-palette-primary);
}

/* _content/ERP.Client/Components/PopupDialog.razor.rz.scp.css */
/*
    Popup shell layout.

    The accent color is NEVER declared here: PopupDialog.razor sets the `--popup-accent` custom property inline
    from the PopupDialogType mapping, so this file stays type-agnostic and follows the active theme palette.
    (.mud-dialog-content already carries `padding: 0 24px` + `margin: 8px 0`, .mud-dialog-actions `padding: 8px`.)
*/

.popup-dialog[b-fz9eop6ff0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 4px;
}

.popup-dialog__header[b-fz9eop6ff0] {
    display: flex;
    align-items: center;
    gap: 12px;
}

[b-fz9eop6ff0] .popup-dialog__actions {
    gap: 8px;
    padding: 0 24px 4px;
}

/* Tinted rounded badge: the ::before layer paints the accent at 12% while the icon keeps full opacity. */
.popup-dialog__icon[b-fz9eop6ff0] {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--popup-accent, var(--mud-palette-primary));
}

.popup-dialog__icon[b-fz9eop6ff0]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: currentColor;
    opacity: .12;
}

.popup-dialog__icon .mud-icon-root[b-fz9eop6ff0] {
    position: relative;
    font-size: 22px;
}

.popup-dialog__heading[b-fz9eop6ff0] {
    flex: 1 1 auto;
    min-width: 0;
}

.popup-dialog__title[b-fz9eop6ff0] {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
}

.popup-dialog__caption[b-fz9eop6ff0] {
    margin-top: 2px;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.popup-dialog__close[b-fz9eop6ff0] {
    flex: 0 0 auto;
    margin-top: -4px;
    margin-right: -8px;
}

.popup-dialog__body[b-fz9eop6ff0] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.popup-dialog__message[b-fz9eop6ff0] {
    font-size: .875rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    white-space: pre-line;
}

.popup-dialog__note[b-fz9eop6ff0] {
    margin-top: 4px;
}
/* _content/ERP.Client/Components/PremiumDrawer.razor.rz.scp.css */
.premium-drawer-backdrop[b-4rgrdravku] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    z-index: 1399;
    animation: mud-overlay-fade-in-b-4rgrdravku 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-drawer-panel[b-4rgrdravku] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    min-height: 0;
    background-color: var(--mud-palette-background);
    z-index: 1400;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 16px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

.premium-drawer-panel.open[b-4rgrdravku] {
    transform: translateX(0);
}

.premium-drawer-content[b-4rgrdravku] {
    height: 100%;
    max-height: 100vh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.premium-drawer-header[b-4rgrdravku] {
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
    background-color: var(--mud-palette-surface);
}

.premium-drawer-body[b-4rgrdravku] {
    flex: 1 1 auto;
    height: 0;
    min-height: 0;
    position: relative;
    padding: 20px 24px;
    overflow-y: auto !important;
    overflow-x: hidden;
    overscroll-behavior: contain;
    overflow-anchor: none;
    touch-action: pan-y;
}

.premium-drawer-footer[b-4rgrdravku] {
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
    background-color: var(--mud-palette-surface);
}

@keyframes mud-overlay-fade-in-b-4rgrdravku {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* On mobile, make it full width */
@media (max-width: 600px) {
    .premium-drawer-panel[b-4rgrdravku] {
        width: 100vw !important;
    }
}
/* _content/ERP.Client/Components/StatusTimeline.razor.rz.scp.css */
/*
    Isolated styles for Components/StatusTimeline.razor (scoped CSS — Blazor adds the scope attribute itself).
    Uses MudBlazor color tokens (--mud-palette-*) so it follows the app's light/dark theme automatically.

    Shape: HORIZONTAL STEPPER "dot left – content right" — each step = [36px dot] + [.status-timeline-body
    stacked, left-aligned: label then timestamp/caption]; between two steps is a 3px connector that is a SIBLING of the
    step (margin-top = dot center). Narrow screens: keep the horizontal form and scroll horizontally instead of squashing the text.
*/

.status-timeline[b-y5lz0jzzvd] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;    /* stepper căn trái: phần dư nằm ở các đoạn nối (flex-grow) */
    flex-wrap: nowrap;
    width: 100%;
    gap: 0;
    /* padding 8px so the focus ring (6px box-shadow) of the current step's dot is not clipped: the dot now sits at the
       top/left EDGE of the step, and the container has overflow-x: auto (which clips both axes). */
    padding: 8px;
    overflow-x: auto;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* Edge cũ */
}

.status-timeline[b-y5lz0jzzvd]::-webkit-scrollbar {
    display: none;              /* Chromium/Safari */
}

/* ── One step: dot on the LEFT + body (label / timestamp) on the RIGHT ─────── */

.status-timeline[b-y5lz0jzzvd]  .status-timeline-step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 132px;
    text-align: left;
}

/* A step's body: label → timestamp → caption, stacked and left-aligned.
   align-items: flex-start so the lines (block MudText) shrink to their content instead of stretching to the body's full width. */
.status-timeline[b-y5lz0jzzvd]  .status-timeline-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

/* The connector is a SIBLING of the step (between two dots on the same flex row), no longer on a track.
   margin-top = dot center ⇒ perfectly aligned with the dot center: (dot diameter − connector thickness) / 2. */
.status-timeline[b-y5lz0jzzvd]  .status-timeline-connector {
    flex: 1 1 40px;
    min-width: 24px;    /* <span> rỗng có min-content = 0 ⇒ chặn co về 0 làm mất hẳn đường nối */
    height: 3px;
    border-radius: 2px;
    margin-top: calc((36px - 3px) / 2);
    background-color: var(--mud-palette-lines-default);
}

.status-timeline[b-y5lz0jzzvd]  .status-timeline-dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
    color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
}

/* The index of a not-yet-reached step (text — do NOT use an icon so the dot contains no <svg>). */
.status-timeline[b-y5lz0jzzvd]  .status-timeline-index {
    color: var(--mud-palette-text-secondary);
}

/* Label: line-height = dot diameter ⇒ the FIRST LINE's center always aligns with the dot center (18px), even when the
   label wraps. nowrap so the column is not distorted — the container's overflow-x: auto handles the horizontal overflow. */
.status-timeline[b-y5lz0jzzvd]  .status-timeline-label {
    line-height: 36px;
    white-space: nowrap;
}

/* ── Connector: its color follows the NEXT step (the class is set by the component) ───────── */

.status-timeline[b-y5lz0jzzvd]  .status-timeline-connector.is-done {
    background-color: var(--mud-palette-success);
}

.status-timeline[b-y5lz0jzzvd]  .status-timeline-connector.is-pending {
    background-color: var(--mud-palette-lines-default);
}

/* ── A REACHED step (including the current one): green circle + white check mark ── */

.status-timeline[b-y5lz0jzzvd]  .status-timeline-step.is-done .status-timeline-dot {
    border-color: var(--mud-palette-success);
    background-color: var(--mud-palette-success);
}

.status-timeline[b-y5lz0jzzvd]  .status-timeline-step.is-done .status-timeline-label {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

/* ── The current step (declared AFTER is-done to win by source order): a primary
      circle + a 2-layer focus ring (inner layer in the background color to create a gap, outer layer primary) ── */

.status-timeline[b-y5lz0jzzvd]  .status-timeline-step.is-current .status-timeline-dot {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 4px var(--mud-palette-surface),
                0 0 0 6px var(--mud-palette-primary);
}

.status-timeline[b-y5lz0jzzvd]  .status-timeline-step.is-current .status-timeline-label {
    color: var(--mud-palette-primary);
    font-weight: 700;
}

/* ── A not-yet-reached step: empty circle + dim index, dim label ──────────────── */

.status-timeline[b-y5lz0jzzvd]  .status-timeline-step.is-pending .status-timeline-dot {
    border-color: var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
}

.status-timeline[b-y5lz0jzzvd]  .status-timeline-step.is-pending .status-timeline-label {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}

/* ── Timestamp ──────────────────────────────────────────────────────── */

.status-timeline[b-y5lz0jzzvd]  .status-timeline-time,
.status-timeline[b-y5lz0jzzvd]  .status-timeline-caption {
    color: #637381;
    line-height: 1.2;
}

.status-timeline[b-y5lz0jzzvd]  .status-timeline-time {
    font-size: 0.75rem;
}

.status-timeline[b-y5lz0jzzvd]  .status-timeline-caption {
    font-size: 0.6875rem;
}

/* ── Narrow screens: shrink the circle but KEEP the horizontal form (scroll horizontally if space runs out) ── */

@media (max-width: 600px) {
    .status-timeline[b-y5lz0jzzvd]  .status-timeline-step {
        min-width: 104px;
    }

    .status-timeline[b-y5lz0jzzvd]  .status-timeline-label {
        line-height: 32px;
    }

    .status-timeline[b-y5lz0jzzvd]  .status-timeline-dot {
        width: 32px;
        height: 32px;
    }

    .status-timeline[b-y5lz0jzzvd]  .status-timeline-connector {
        margin-top: calc((32px - 3px) / 2);
    }
}
/* _content/ERP.Client/Components/SupportCenterDialog.razor.rz.scp.css */
/*
    Support centre rows — one full-row anchor per channel (hotline / Zalo / e-mail).

    Only theme variables are used so dark mode keeps working, and no rule targets an element owned by
    MudBlazor (the icon box is this component's own <span>), which is why no ::deep selector is needed here.
*/

.support-center__intro[b-3rnloo3558] {
    color: var(--mud-palette-text-secondary);
}

.support-center__row[b-3rnloo3558] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default, #e4e7eb);
    border-radius: 10px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.support-center__row:hover[b-3rnloo3558] {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-action-default-hover, rgba(0, 0, 0, .04));
}

.support-center__icon[b-3rnloo3558] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary-hover, rgba(89, 74, 226, .12));
}

.support-center__text[b-3rnloo3558] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.support-center__label[b-3rnloo3558] {
    font-size: .75rem;
    line-height: 1.4;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.support-center__value[b-3rnloo3558] {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.5;
    word-break: break-all;
}
/* _content/ERP.Client/Components/TenantBadge.razor.rz.scp.css */
/* Scoped styles of the shared workspace badge. Tokens are the design contract of the /login shell:
   avatar #0F172A, workspace chip #F1F5F9 monospace with ellipsis, verified icon #16A34A.
   The badge is NOT allowed to carry its own outer margin: the page that hosts it owns the spacing
   (e.g. .login-tenant on /login), otherwise the app-bar copy would be pushed around. */

.tenant-badge[b-kun70saa28] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
}

/* App-bar variant: the MudAppBar is 64px tall, so the 12px vertical padding of the card variant would be
   clipped. Same design, tighter padding. */
.tenant-badge--compact[b-kun70saa28] {
    padding: 6px 12px;
}

.tenant-badge__avatar[b-kun70saa28] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    background: #0F172A;
}

.tenant-badge__meta[b-kun70saa28] {
    flex: 1 1 auto;
    min-width: 0;
}

.tenant-badge__label[b-kun70saa28] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #94A3B8;
}

/* No name/verified row here: the WAF only exposes the tenant id (already shown in the chip), so an
   invented display name would be fake data. The green "verified" token lives in the shell footer. */

.tenant-badge__slug[b-kun70saa28] {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 48%;
    overflow: hidden;
    padding: 4px 10px;
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #475569;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
}

/* In the app bar the badge shares the row with the account menu ⇒ cap the chip so a long tenant id
   can never push the menu off screen. */
.tenant-badge--compact .tenant-badge__slug[b-kun70saa28] {
    max-width: 240px;
}