/* /Pages/ManualMenuCost/ManualMenuCostSetup.razor.rz.scp.css */
/* Manual Menu Cost Setup — feature-scoped styles only (Blazor CSS
   isolation). REDESIGN (2026-09-08): a real visual recomposition, not an
   incremental polish pass — four clearly separated layers (header / KPI
   cards / toolbar / table workspace), the real Deyafa brand accents
   (yellow primary CTA, violet secondary — the same colors site.css's own
   global .btn-primary/.btn-info already use for the rest of the Portal,
   not invented here), and an executive-KPI card language instead of
   generic Bootstrap boxes. Still built entirely from existing Portal
   tokens (--text-1/2/3, --surface, --border, --bg, --green/--red,
   --radius-*, --shadow-*, defined in wwwroot/css/site.css and already
   theme-aware) — no new design system beyond the two named Deyafa brand
   colors below, which are direct copies of site.css's own .btn-primary/
   .btn-info values. No business logic, @code, or data binding was
   touched — every class below styles the exact same markup/bindings
   that were already there. */

.mmc-page[b-efoc3nsb20] {
    /* Deyafa brand accents — copied verbatim from site.css's own global
       .btn-primary (yellow) / .btn-info (violet) rules, so "Save" and
       "Bulk Edit" match the REST of the Portal's real primary/secondary
       action language instead of a generic blue. Scoped to this page
       only; nothing here changes the global .btn-primary/.btn-info rules
       themselves. */
    --mmc-yellow: #FFD23F;
    --mmc-yellow-dark: #F2B705;
    --mmc-yellow-darker: #D4A017;
    --mmc-yellow-ink: #251B74;
    --mmc-violet: #5B5FEF;
    --mmc-violet-dark: #3D35B3;

    padding: 20px 28px 40px;
}

@media (max-width: 992px) {
    .mmc-page[b-efoc3nsb20] { padding: 14px 16px 28px; }
}
@media (max-width: 576px) {
    .mmc-page[b-efoc3nsb20] { padding: 10px 12px 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   LAYER A — Header
   Compact, not a hero banner: the same plain surface-card language
   as the other three layers, so all four read as one deliberate
   system rather than one section being "special".
   ═══════════════════════════════════════════════════════════════ */
.mmc-header[b-efoc3nsb20] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 26px;
    padding: 16px 20px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.mmc-header-titlewrap[b-efoc3nsb20] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mmc-header-actions[b-efoc3nsb20] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mmc-header-icon[b-efoc3nsb20] {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: #fff;
    background: linear-gradient(155deg, var(--mmc-violet), var(--mmc-violet-dark));
    box-shadow: 0 4px 10px rgba(91,95,239,.35);
}

.mmc-title[b-efoc3nsb20] {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-1);
    margin: 0 0 2px;
    letter-spacing: -.01em;
    line-height: 1.25;
}

.mmc-subtitle[b-efoc3nsb20] {
    font-size: .82rem;
    color: var(--text-2);
    margin: 0;
    max-width: 560px;
    line-height: 1.5;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.mmc-btn[b-efoc3nsb20] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    padding: 9px 16px;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .15s ease, color .12s ease, border-color .12s ease;
    white-space: nowrap;
}
.mmc-btn:disabled[b-efoc3nsb20] { opacity: .45; cursor: not-allowed; transform: none !important; }
.mmc-btn:focus-visible[b-efoc3nsb20] { outline: 2px solid var(--mmc-violet); outline-offset: 2px; }

/* Bulk Edit — the Deyafa violet "info/mode" action, deliberately
   distinct from Save's yellow "commit" action below, so the two
   different KINDS of action (toggle a view vs. write data) are never
   visually confusable. */
.mmc-btn-primary[b-efoc3nsb20] {
    background: var(--mmc-violet);
    color: #fff;
    box-shadow: 0 3px 10px rgba(91,95,239,.28);
}
.mmc-btn-primary:hover:not(:disabled)[b-efoc3nsb20] { background: var(--mmc-violet-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(91,95,239,.35); }
.mmc-btn-primary:active:not(:disabled)[b-efoc3nsb20] { transform: translateY(0); }
.mmc-btn-hero[b-efoc3nsb20] { padding: 11px 22px; font-size: .87rem; }

/* Save — the Deyafa yellow primary CTA, identical formula to site.css's
   own global .btn-primary (the Portal's established "this writes data"
   color), reused HERE instead of blue precisely so this page's most
   important action matches the rest of Deyafa's product. */
.mmc-btn-save[b-efoc3nsb20] {
    background: linear-gradient(135deg, var(--mmc-yellow), var(--mmc-yellow-dark));
    color: var(--mmc-yellow-ink);
    box-shadow: 0 3px 10px rgba(255,210,63,.35);
}
.mmc-btn-save:hover:not(:disabled)[b-efoc3nsb20] {
    background: linear-gradient(135deg, var(--mmc-yellow-dark), var(--mmc-yellow-darker));
    box-shadow: 0 5px 14px rgba(255,210,63,.5);
    transform: translateY(-1px);
}
.mmc-btn-save:active:not(:disabled)[b-efoc3nsb20] { transform: translateY(0); }

.mmc-btn-outline[b-efoc3nsb20] {
    background: transparent;
    border-color: var(--border);
    color: var(--text-2);
}
.mmc-btn-outline:hover:not(:disabled)[b-efoc3nsb20] { background: var(--bg); color: var(--text-1); border-color: var(--text-3); }
.mmc-btn-sm[b-efoc3nsb20] { padding: 6px 12px; font-size: .78rem; }
.mmc-btn-xs[b-efoc3nsb20] { padding: 5px 12px; font-size: .74rem; border-radius: 7px; }

/* ═══════════════════════════════════════════════════════════════
   LAYER B — KPI cards (executive dashboard language, not Bootstrap)
   Solid-filled icon badge (not a pale tint), a colored left rail
   instead of a top hairline, a big bold number, and a small-caps
   label — four distinct accent colors so the row reads as a real KPI
   strip rather than four identical boxes.
   ═══════════════════════════════════════════════════════════════ */
.mmc-cards[b-efoc3nsb20] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}
@media (max-width: 992px) { .mmc-cards[b-efoc3nsb20] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mmc-cards[b-efoc3nsb20] { grid-template-columns: 1fr; } }

.mmc-card[b-efoc3nsb20] {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px 22px 20px 26px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-height: 116px;
    overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease;
}
.mmc-card[b-efoc3nsb20]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--blue);
}
.mmc-card:hover[b-efoc3nsb20] { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.mmc-card:has(.mmc-icon-good)[b-efoc3nsb20]::before { background: var(--green); }
.mmc-card:has(.mmc-icon-missing)[b-efoc3nsb20]::before { background: var(--red); }
.mmc-card:has(.mmc-icon-neutral)[b-efoc3nsb20]::before { background: var(--blue); }
.mmc-card:has(.mmc-icon-accent)[b-efoc3nsb20]::before { background: var(--mmc-violet); }

.mmc-card-icon[b-efoc3nsb20] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    color: #fff;
}
.mmc-icon-neutral[b-efoc3nsb20] { background: linear-gradient(155deg, var(--blue), var(--blue-light, var(--blue))); }
.mmc-icon-good[b-efoc3nsb20] { background: linear-gradient(155deg, var(--green), #16A34A); }
.mmc-icon-missing[b-efoc3nsb20] { background: linear-gradient(155deg, var(--red), #DC2626); }
.mmc-icon-accent[b-efoc3nsb20] { background: linear-gradient(155deg, var(--mmc-violet), var(--mmc-violet-dark)); }

.mmc-card-label[b-efoc3nsb20] {
    font-size: .72rem;
    color: var(--text-2);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.mmc-card-value[b-efoc3nsb20] {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-1);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    margin: 4px 0 3px;
}
.mmc-card-sub[b-efoc3nsb20] { font-size: .74rem; color: var(--text-3); }

/* ═══════════════════════════════════════════════════════════════
   LAYER C — Filter / action toolbar
   Search dominates in both width AND height — a deliberate size
   hierarchy, not four uniform boxes.
   ═══════════════════════════════════════════════════════════════ */
.mmc-toolbar[b-efoc3nsb20] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 14px 16px;
}

.mmc-search[b-efoc3nsb20] {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 260px;
    flex: 2 1 340px;
}
.mmc-search i[b-efoc3nsb20] {
    position: absolute;
    inset-inline-start: 16px;
    color: var(--text-3);
    font-size: .82rem;
    pointer-events: none;
}
.mmc-search input[b-efoc3nsb20] {
    width: 100%;
    height: 46px;
    padding-inline-start: 40px;
    padding-inline-end: 14px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-1);
    font-size: .88rem;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.mmc-search input[b-efoc3nsb20]::placeholder { color: var(--text-3); }
.mmc-search input:focus-visible[b-efoc3nsb20],
.mmc-search input:focus[b-efoc3nsb20] {
    outline: none;
    border-color: var(--mmc-violet);
    background: var(--surface);
    box-shadow: 0 0 0 4px rgba(91,95,239,.14);
}

.mmc-toolbar-filters[b-efoc3nsb20] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    padding-inline-start: 14px;
    border-inline-start: 1px solid var(--border);
}
@media (max-width: 700px) {
    .mmc-toolbar-filters[b-efoc3nsb20] { padding-inline-start: 0; border-inline-start: none; flex-wrap: wrap; width: 100%; }
}
.mmc-toolbar-filters .mmc-select[b-efoc3nsb20] { flex: 0 1 172px; }

.mmc-select[b-efoc3nsb20], .mmc-input[b-efoc3nsb20] {
    height: 40px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text-1);
    font-size: .82rem;
    padding: 0 12px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.mmc-select:focus-visible[b-efoc3nsb20], .mmc-select:focus[b-efoc3nsb20],
.mmc-input:focus-visible[b-efoc3nsb20], .mmc-input:focus[b-efoc3nsb20] {
    outline: none;
    border-color: var(--mmc-violet);
    background: var(--surface);
    box-shadow: 0 0 0 4px rgba(91,95,239,.14);
}
.mmc-input-sm[b-efoc3nsb20] { height: 34px; padding: 0 10px; font-size: .78rem; width: 100px; }
.mmc-input-cost[b-efoc3nsb20] { width: 132px; background: var(--surface); }
.mmc-input-cost[b-efoc3nsb20]::placeholder { color: var(--text-3); font-style: italic; opacity: .85; }

.mmc-bulk-bar[b-efoc3nsb20] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: rgba(91,95,239,.06);
    border: 1px dashed var(--mmc-violet);
    border-radius: var(--radius-sm);
    padding: 9px 14px;
    width: 100%;
}
.mmc-bulk-bar label[b-efoc3nsb20] { font-size: .78rem; color: var(--text-2); margin: 0; font-weight: 600; }

.mmc-bulk-results[b-efoc3nsb20] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    max-height: 160px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
}
.mmc-bulk-result-ok[b-efoc3nsb20] { color: var(--green); font-size: .78rem; }
.mmc-bulk-result-fail[b-efoc3nsb20] { color: var(--red); font-size: .78rem; }

/* ═══════════════════════════════════════════════════════════════
   LAYER D — Table workspace
   The primary surface of the page: one substantial elevated card.
   Financial columns get bolder numeric weight; the editable New
   Cost cell reads as a clean white input, not a muted/disabled one.
   ═══════════════════════════════════════════════════════════════ */
.mmc-table-wrapper[b-efoc3nsb20] {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 68vh;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.mmc-table[b-efoc3nsb20] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .84rem;
    white-space: nowrap;
}

.mmc-table thead th[b-efoc3nsb20] {
    background: var(--bg);
    color: var(--text-2);
    font-weight: 700;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .045em;
    text-align: start;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1;
    box-shadow: 0 1px 0 var(--border);
}

.mmc-table tbody td[b-efoc3nsb20] {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-1);
    vertical-align: middle;
}
.mmc-table tbody tr[b-efoc3nsb20] { transition: background .1s ease; }
.mmc-table tbody tr:hover td[b-efoc3nsb20] { background: rgba(91,95,239,.045); }
.mmc-table tbody tr:last-child td[b-efoc3nsb20] { border-bottom: none; }

.mmc-item-name[b-efoc3nsb20] { font-weight: 650; }
.mmc-muted[b-efoc3nsb20] { color: var(--text-3); font-size: .78rem; }

/* ═══════════════════════════════════════════════════════════════
   Frozen MENU ITEM column (2026-09-14) -- horizontal scroll, no data/
   calculation change. .mmc-table-wrapper already had overflow-x:auto
   and .mmc-table thead th already had position:sticky/top:0 for the
   vertical (sticky-header) case; this adds LEFT stickiness to the Menu
   Item header/body cells only, on top of that existing top-stickiness
   (a "frozen corner" cell), so it stays put through both scroll axes.

   Optional checkbox column (.mmc-th-check/.mmc-td-check, Bulk Edit mode
   only) is frozen too, ahead of Menu Item, using the exact same
   mechanism -- otherwise Bulk Edit's row checkboxes would scroll away
   while the item name stayed, which would read as broken/disconnected.
   The `~` sibling selectors below shift Menu Item's own sticky offset
   to sit right after the checkbox column ONLY when that column is
   actually present in the DOM (Bulk Edit on) -- when it's absent (the
   normal case), Menu Item is the true first column and sticks at 0,
   entirely via CSS, no JS measurement. ═══════════════════════════════════════════════════════════════ */
.mmc-th-check[b-efoc3nsb20] {
    width: 44px;
}
.mmc-th-check[b-efoc3nsb20],
.mmc-td-check[b-efoc3nsb20],
.mmc-th-item[b-efoc3nsb20],
.mmc-item-name[b-efoc3nsb20] {
    position: sticky;
    left: 0;
    background: var(--surface); /* opaque -- scrolling columns never show through underneath */
}
[dir="rtl"] .mmc-th-check[b-efoc3nsb20],
[dir="rtl"] .mmc-td-check[b-efoc3nsb20],
[dir="rtl"] .mmc-th-item[b-efoc3nsb20],
[dir="rtl"] .mmc-item-name[b-efoc3nsb20] {
    left: auto;
    right: 0;
}
.mmc-th-check ~ .mmc-th-item[b-efoc3nsb20],
.mmc-td-check ~ .mmc-item-name[b-efoc3nsb20] {
    left: 44px;
}
[dir="rtl"] .mmc-th-check ~ .mmc-th-item[b-efoc3nsb20],
[dir="rtl"] .mmc-td-check ~ .mmc-item-name[b-efoc3nsb20] {
    left: auto;
    right: 44px;
}
/* Header cells: already z-index:1 for top-stickiness (base .mmc-table
   thead th rule below) -- bumped to 2 here so the frozen header corner
   also renders above every OTHER (top-sticky-only) header cell while
   the table is scrolled horizontally, and stays opaque (var(--bg),
   matching the rest of the header row) instead of falling back to
   .mmc-table-wrapper's white --surface. */
.mmc-table thead th.mmc-th-check[b-efoc3nsb20],
.mmc-table thead th.mmc-th-item[b-efoc3nsb20] {
    background: var(--bg);
    z-index: 2;
}
/* Body cells: z-index:1 is enough to sit above sibling (non-sticky)
   body cells scrolling underneath within the same row. */
.mmc-table tbody td.mmc-td-check[b-efoc3nsb20],
.mmc-table tbody td.mmc-item-name[b-efoc3nsb20] {
    z-index: 1;
}
/* Row hover must still tint the frozen cell like the rest of the row --
   otherwise it would look "stuck"/disconnected from its own row's
   highlight while everything else responds to hover. */
.mmc-table tbody tr:hover td.mmc-td-check[b-efoc3nsb20],
.mmc-table tbody tr:hover td.mmc-item-name[b-efoc3nsb20] {
    background: rgba(91,95,239,.045);
}

/* Right-edge separator (mirrored in RTL) -- a thin border plus a soft
   fade shadow makes it visually obvious the column is frozen once the
   table is actually scrolled, without relying on color alone. */
.mmc-th-item[b-efoc3nsb20], .mmc-item-name[b-efoc3nsb20] {
    box-shadow: 1px 0 0 var(--border), 6px 0 8px -6px rgba(0,0,0,.15);
}
[dir="rtl"] .mmc-th-item[b-efoc3nsb20], [dir="rtl"] .mmc-item-name[b-efoc3nsb20] {
    box-shadow: -1px 0 0 var(--border), -6px 0 8px -6px rgba(0,0,0,.15);
}

/* Sensible responsive width for the frozen column -- long item names
   ellipsize instead of forcing the frozen column itself to grow
   (the table already relies on white-space:nowrap + horizontal scroll
   for every OTHER column; this caps only the frozen one so it can never
   dominate a narrow phone viewport). */
.mmc-th-item[b-efoc3nsb20], .mmc-item-name[b-efoc3nsb20] {
    min-width: 140px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 576px) {
    .mmc-th-item[b-efoc3nsb20], .mmc-item-name[b-efoc3nsb20] { min-width: 120px; max-width: 150px; }
}

/* Financial columns carry the page's core numbers — a touch more
   weight than a plain read-only cell, tabular figures so they line up
   as a column, never as loose text. */
.mmc-financial[b-efoc3nsb20] { font-weight: 650; font-variant-numeric: tabular-nums; }
.mmc-financial-muted[b-efoc3nsb20] { color: var(--text-3); font-variant-numeric: tabular-nums; }

.mmc-sortable[b-efoc3nsb20] { cursor: pointer; user-select: none; transition: color .12s ease; }
.mmc-sortable:hover[b-efoc3nsb20] { color: var(--text-1); }
.mmc-sortable i[b-efoc3nsb20] { margin-inline-start: 5px; font-size: .68rem; transition: opacity .15s ease; }
.mmc-sortable i.mmc-sort-neutral[b-efoc3nsb20] { opacity: 0; }
.mmc-sortable:hover i.mmc-sort-neutral[b-efoc3nsb20] { opacity: .4; }
.mmc-sortable i:not(.mmc-sort-neutral)[b-efoc3nsb20] { opacity: 1; color: var(--mmc-violet); }

.mmc-chip[b-efoc3nsb20] {
    display: inline-block;
    background: rgba(37,99,235,.08);
    border: 1px solid rgba(37,99,235,.18);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--blue);
}

/* Editable cell (New Cost) — clean white/surface input with a visible
   border and a strong focus ring, so it reads as clearly interactive
   rather than a muted/disabled-looking field. */
.mmc-input-cost:focus-visible[b-efoc3nsb20], .mmc-input-cost:focus[b-efoc3nsb20] {
    border-color: var(--mmc-violet);
    box-shadow: 0 0 0 4px rgba(91,95,239,.16);
}

/* ── Status pills ────────────────────────────────────────────── */
.mmc-pill[b-efoc3nsb20] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .01em;
}
.mmc-pill[b-efoc3nsb20]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.mmc-pill-missing[b-efoc3nsb20] { background: rgba(239,68,68,.12); color: var(--red); }
.mmc-pill-available[b-efoc3nsb20] { background: rgba(34,197,94,.12); color: var(--green); }
.mmc-pill-good[b-efoc3nsb20] { background: rgba(34,197,94,.12); color: var(--green); }
.mmc-pill-neutral[b-efoc3nsb20] { background: var(--bg); color: var(--text-3); border: 1px solid var(--border); }

.mmc-actions[b-efoc3nsb20] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mmc-actions .mmc-btn-outline[b-efoc3nsb20] { color: var(--text-3); border-color: var(--border-light); font-weight: 600; }
.mmc-actions .mmc-btn-outline:hover:not(:disabled)[b-efoc3nsb20] { color: var(--text-1); border-color: var(--text-3); }

/* ── Empty / loading / alerts ────────────────────────────────── */
.mmc-empty[b-efoc3nsb20] {
    text-align: center;
    padding: 48px 16px;
    color: var(--text-3);
    font-size: .88rem;
}
.mmc-loading[b-efoc3nsb20] { padding: 40px; display: flex; justify-content: center; }

.mmc-alert[b-efoc3nsb20] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.3);
    color: var(--red);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: .85rem;
}
.mmc-alert-detail[b-efoc3nsb20] { font-size: .74rem; opacity: .85; margin-top: 4px; }

/* 2026-09-14 -- Automatic-from-Deyafa banner spacing fix (mobile cramping).
   Scoped to this NEW class, added alongside the existing .mmc-alert +
   inline-style color override on THAT banner only -- .mmc-alert/
   .mmc-alert-detail's own base rules (also used by the unrelated red
   error banner elsewhere on this page) are untouched, and this banner's
   colors are still set entirely by its existing inline style; only
   spacing/line-height/wrapping change. */
.mmc-alert-costsource[b-efoc3nsb20] {
    padding: 14px 16px;
    gap: 12px;
    align-items: flex-start;
}
.mmc-alert-costsource i[b-efoc3nsb20] {
    margin-top: 3px;
    flex-shrink: 0;
}
.mmc-alert-costsource strong[b-efoc3nsb20] {
    display: block;
    line-height: 1.4;
    margin-bottom: 6px;
}
.mmc-alert-costsource .mmc-alert-detail[b-efoc3nsb20] {
    line-height: 1.65;
    margin-top: 0;
    white-space: normal; /* explicit -- natural wrapping, never nowrap */
}
@media (max-width: 576px) {
    .mmc-alert-costsource[b-efoc3nsb20] { padding: 14px 14px; gap: 10px; }
    .mmc-alert-costsource strong[b-efoc3nsb20] { margin-bottom: 8px; }
    .mmc-alert-costsource .mmc-alert-detail[b-efoc3nsb20] { line-height: 1.7; }
}

/* ═══════════════════════════════════════════════════════════════
   Cost Source control (2026-09-14) — client-configurable Manual vs
   Automatic from Deyafa. Built entirely from the same existing Portal
   tokens/--mmc-violet accent as the rest of this page — no new design
   system. Desktop: two options side by side; mobile (<=576px): stacked.
   RTL/LTR: flex/gap-based, no left/right-specific properties, so it
   mirrors automatically the same way every other layer on this page
   already does (see the [dir] convention noted at the top of this file).
   ═══════════════════════════════════════════════════════════════ */
.mmc-costsource-card[b-efoc3nsb20] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    padding: 16px 18px;
    margin-bottom: 18px;
}
.mmc-costsource-title[b-efoc3nsb20] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 12px;
}
.mmc-costsource-title i[b-efoc3nsb20] { color: var(--mmc-violet); }

.mmc-costsource-options[b-efoc3nsb20] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.mmc-costsource-option[b-efoc3nsb20] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1 1 240px;
    min-width: 220px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.mmc-costsource-option:has(input:disabled)[b-efoc3nsb20] { cursor: not-allowed; opacity: .7; }
.mmc-costsource-option-active[b-efoc3nsb20] { border-color: var(--mmc-violet); background: rgba(91,95,239,.06); }
.mmc-costsource-option input[type="radio"][b-efoc3nsb20] { margin-top: 3px; accent-color: var(--mmc-violet); flex-shrink: 0; cursor: inherit; }
.mmc-costsource-option-label[b-efoc3nsb20] { display: block; font-size: .85rem; font-weight: 700; color: var(--text-1); }
.mmc-costsource-option-desc[b-efoc3nsb20] { display: block; font-size: .74rem; color: var(--text-3); margin-top: 2px; line-height: 1.4; }

.mmc-costsource-readonly[b-efoc3nsb20] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .85rem; }
.mmc-costsource-readonly-label[b-efoc3nsb20] { color: var(--text-3); font-weight: 600; }
.mmc-costsource-readonly-value[b-efoc3nsb20] { color: var(--text-1); font-weight: 700; }

.mmc-costsource-readonly-note[b-efoc3nsb20],
.mmc-costsource-explain[b-efoc3nsb20] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .76rem;
    color: var(--text-3);
    margin-top: 10px;
    line-height: 1.5;
}
.mmc-costsource-explain[b-efoc3nsb20] { color: var(--mmc-violet-dark); }
.mmc-costsource-readonly-note i[b-efoc3nsb20], .mmc-costsource-explain i[b-efoc3nsb20] { margin-top: 2px; flex-shrink: 0; }

@media (max-width: 576px) {
    .mmc-costsource-options[b-efoc3nsb20] { flex-direction: column; }
    .mmc-costsource-option[b-efoc3nsb20] { flex-basis: auto; }
}

/* ── Pagination ──────────────────────────────────────────────── */
.mmc-pagination[b-efoc3nsb20] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-bottom: 4px;
}
.mmc-pagination-info[b-efoc3nsb20] { font-size: .78rem; color: var(--text-3); }
.mmc-pagination-controls[b-efoc3nsb20] { display: flex; align-items: center; gap: 4px; }

.mmc-pagesize[b-efoc3nsb20] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.mmc-pagesize label[b-efoc3nsb20] {
    font-size: .78rem;
    color: var(--text-2);
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
}
.mmc-select-sm[b-efoc3nsb20] {
    height: 32px;
    padding: 0 10px;
    font-size: .8rem;
    width: auto;
}
@media (max-width: 700px) {
    .mmc-pagination[b-efoc3nsb20] { justify-content: center; }
    .mmc-pagination-info[b-efoc3nsb20], .mmc-pagination-controls[b-efoc3nsb20], .mmc-pagesize[b-efoc3nsb20] { flex-basis: 100%; justify-content: center; }
}
.mmc-page-btn[b-efoc3nsb20] {
    min-width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.mmc-page-btn:hover:not(:disabled)[b-efoc3nsb20] { background: var(--bg); color: var(--text-1); }
.mmc-page-btn:disabled[b-efoc3nsb20] { opacity: .4; cursor: not-allowed; }
.mmc-page-btn-active[b-efoc3nsb20] {
    background: var(--mmc-violet);
    border-color: var(--mmc-violet);
    color: #fff;
    box-shadow: 0 2px 8px rgba(91,95,239,.4);
}

/* ── History modal ───────────────────────────────────────────── */
.mmc-modal-layer[b-efoc3nsb20] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mmc-modal-backdrop[b-efoc3nsb20] {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.55);
}
.mmc-modal-dialog[b-efoc3nsb20] {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: min(640px, 92vw);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mmc-modal-head[b-efoc3nsb20] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.mmc-modal-head h5[b-efoc3nsb20] { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-1); }
.mmc-modal-close[b-efoc3nsb20] {
    border: none;
    background: transparent;
    color: var(--text-3);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
}
.mmc-modal-close:hover[b-efoc3nsb20] { color: var(--text-1); }
.mmc-modal-body[b-efoc3nsb20] { padding: 18px 20px; overflow-y: auto; }
.mmc-modal-dialog-wide[b-efoc3nsb20] { width: min(920px, 94vw); }

.mmc-history-table[b-efoc3nsb20] { width: 100%; border-collapse: collapse; font-size: .82rem; }
.mmc-history-table th[b-efoc3nsb20] {
    text-align: start;
    color: var(--text-2);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
}
.mmc-history-table td[b-efoc3nsb20] { padding: 9px 12px; border-bottom: 1px solid var(--border-light); color: var(--text-1); }
.mmc-history-current td[b-efoc3nsb20] { background: rgba(34,197,94,.06); font-weight: 600; }

.text-end[b-efoc3nsb20] { text-align: end; }
/* /Shared/Alerts/LoginErrorModal.razor.rz.scp.css */
/* Login error popup redesign (2026-07-31) — matches Login.razor's own
   .lp-card / .lp-btn-login styling exactly (dark indigo glass card,
   yellow CTA gradient). CSS-isolated to this component only — cannot
   leak into or be affected by any other page's styles. */

.lem-overlay[b-1p4j65i49t] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(8, 6, 20, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    outline: none;
    animation: lem-fade-in-b-1p4j65i49t .18s ease-out;
}

@keyframes lem-fade-in-b-1p4j65i49t {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lem-card[b-1p4j65i49t] {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: rgba(22, 18, 55, 0.92);
    border: 1px solid rgba(129, 140, 248, 0.18);
    border-radius: 20px;
    padding: 2.2rem 1.8rem 1.8rem;
    text-align: center;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 0 0 1px rgba(129, 140, 248, .08),
        0 20px 60px rgba(0, 0, 0, .55),
        0 0 80px rgba(79, 70, 229, .10);
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    animation: lem-pop-in-b-1p4j65i49t .18s ease-out;
}

@keyframes lem-pop-in-b-1p4j65i49t {
    from { opacity: 0; transform: scale(.96) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.lem-close[b-1p4j65i49t] {
    position: absolute;
    top: .9rem;
    right: .9rem;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .5);
    font-size: .85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.lem-close:hover[b-1p4j65i49t] {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.lem-icon-wrap[b-1p4j65i49t] {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.35);
    box-shadow: 0 0 36px rgba(239, 68, 68, .30);
}
.lem-icon[b-1p4j65i49t] {
    font-size: 1.6rem;
    color: #F87171;
}

.lem-title[b-1p4j65i49t] {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.01em;
    margin-bottom: .5rem;
}

.lem-desc[b-1p4j65i49t] {
    font-size: .86rem;
    color: rgba(255, 255, 255, .55);
    margin-bottom: .2rem;
}
.lem-desc-ar[b-1p4j65i49t] {
    color: rgba(255, 255, 255, .4);
    font-size: .8rem;
    margin-bottom: 1.4rem;
}

.lem-btn-retry[b-1p4j65i49t] {
    width: 100%;
    height: 46px;
    margin-top: .6rem;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #FACC15 0%, #F59E0B 100%);
    color: #1E1B4B;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s, filter .2s;
    box-shadow: 0 4px 20px rgba(250, 204, 21, .28);
}
.lem-btn-retry:hover[b-1p4j65i49t] {
    filter: brightness(1.06);
    box-shadow: 0 6px 28px rgba(250, 204, 21, .40);
    transform: translateY(-1px);
}
.lem-btn-retry:active[b-1p4j65i49t] { transform: translateY(0); }

/* ── Responsive ── */
@media (max-width: 480px) {
    .lem-card[b-1p4j65i49t] {
        max-width: 100%;
        padding: 1.9rem 1.4rem 1.5rem;
        border-radius: 16px;
    }
    .lem-icon-wrap[b-1p4j65i49t] { width: 56px; height: 56px; }
    .lem-title[b-1p4j65i49t] { font-size: 1.15rem; }
}
/* /Shared/Diagnostics/TesterDiagnosticModal.razor.rz.scp.css */
/* Tester Diagnostic popup (2026-08-19, re-architected) — TEST-only
   technical modal. Mounted once in MainLayout.razor (sibling of
   <HelpDrawer />, outside @Body) specifically so it is never a descendant
   of a page-local transformed container — see TesterDiagnosticModal.razor's
   own doc comment for the full root-cause explanation. CSS-isolated to this
   component only (Blazor scoped CSS).

   Structure (per the diagnosed fix): an outer viewport-fixed layer that
   itself contributes NOTHING to document height, containing a full-bleed
   backdrop and a centered, independently max-height'd dialog. */

.tester-diagnostic-layer[b-ptigexs92h] {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    outline: none;
    /* Belt-and-suspenders against any future ancestor regression: even if
       something upstream again creates a stray containing block, this
       layer itself never establishes one for ITS OWN children beyond the
       fixed positioning above — no transform/filter/perspective/contain
       here, so nothing here can trap a nested fixed element either. */
}

.tester-diagnostic-backdrop[b-ptigexs92h] {
    position: absolute;
    inset: 0;
    background: rgba(8, 6, 20, 0.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: tdiag-fade-in-b-ptigexs92h .15s ease-out;
}

@keyframes tdiag-fade-in-b-ptigexs92h {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.tester-diagnostic-dialog[b-ptigexs92h] {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: rgba(20, 17, 46, 0.97);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 16px;
    box-shadow:
        0 0 0 1px rgba(239, 68, 68, .10),
        0 24px 70px rgba(0, 0, 0, .55),
        0 0 90px rgba(220, 38, 38, .12);
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    animation: tdiag-pop-in-b-ptigexs92h .16s ease-out;
    overflow: hidden;
}

@keyframes tdiag-pop-in-b-ptigexs92h {
    from { opacity: 0; transform: scale(.97) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.tdiag-head[b-ptigexs92h] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: 1.2rem 1.4rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.tdiag-badge[b-ptigexs92h] {
    display: inline-block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: #FCA5A5;
    background: rgba(220, 38, 38, .16);
    border: 1px solid rgba(220, 38, 38, .40);
    border-radius: 999px;
    padding: .18rem .6rem;
    margin-bottom: .5rem;
}

.tdiag-title[b-ptigexs92h] {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.01em;
    margin: 0 0 .2rem;
}

.tdiag-kpi-name[b-ptigexs92h] {
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .55);
}

.tdiag-close[b-ptigexs92h] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .55);
    font-size: .9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.tdiag-close:hover[b-ptigexs92h] {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.tdiag-body[b-ptigexs92h] {
    overflow-y: auto;
    padding: 1.1rem 1.4rem 1.4rem;
}

.tdiag-section[b-ptigexs92h] {
    margin-bottom: 1.05rem;
}
.tdiag-section:last-child[b-ptigexs92h] { margin-bottom: 0; }

.tdiag-section-title[b-ptigexs92h] {
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .01em;
    color: #A5B4FC;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .35rem;
}
.tdiag-section-title i[b-ptigexs92h] { font-size: .72rem; }

.tdiag-section-text[b-ptigexs92h] {
    font-size: .86rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
    white-space: pre-line;
}

.tdiag-formula[b-ptigexs92h] {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: .78rem;
    line-height: 1.6;
    color: #FDE68A;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: .75rem .9rem;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

.tdiag-section-notes .tdiag-section-text[b-ptigexs92h] {
    color: rgba(252, 211, 77, .90);
}

/* Row context (2026-08-19) — the clicked row's Item/Warehouse/Category/
   Branch/Sales Channel. Visually distinct (a filled chip strip) so it reads
   as "this popup is about THIS row" at a glance, before the row-independent
   static content below it. */
.tdiag-context[b-ptigexs92h] {
    background: rgba(91, 95, 239, .10);
    border: 1px solid rgba(91, 95, 239, .28);
    border-radius: 10px;
    padding: .65rem .8rem;
}
.tdiag-context-grid[b-ptigexs92h] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .9rem;
}
.tdiag-context-item[b-ptigexs92h] {
    font-size: .82rem;
}
.tdiag-context-label[b-ptigexs92h] {
    font-weight: 700;
    color: #C7D2FE;
    margin-inline-end: .3rem;
}
.tdiag-context-value[b-ptigexs92h] {
    color: #fff;
    font-weight: 600;
}

/* Cocinero Source sections (2026-08-19) — the PRIMARY content this popup
   exists for, per the "Cocinero provenance is primary, cloud pipeline is
   secondary" requirement. A thin left accent bar is enough to visually mark
   these as the section group Support should read first, without a heavier
   treatment that would fight the section titles' own hierarchy. */
.tdiag-section-cocinero[b-ptigexs92h] {
    padding-inline-start: .65rem;
    border-inline-start: 2px solid rgba(165, 180, 252, .35);
}

/* Deyafa Dashboard Calculation (2026-08-19) — deliberately styled like
   .tdiag-formula (monospace, dark well) but with a distinct accent color so
   it never reads as "the same thing" as the Final Formula section below it
   — this is the step-by-step post-Cocinero transformation narrative, the
   Final Formula section is the succinct end result. */
.tdiag-section-calc .tdiag-formula[b-ptigexs92h] {
    color: #93C5FD;
}

/* Cloud pipeline footer (2026-08-19) — intentionally small and muted;
   Uploaded-table/cloud-pipeline detail is secondary information here, never
   the popup's primary focus (see the Cocinero Source sections above). */
.tdiag-footer[b-ptigexs92h] {
    margin-top: 1.1rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.tdiag-flow[b-ptigexs92h],
.tdiag-footer-uploaded[b-ptigexs92h] {
    font-size: .72rem;
    font-weight: 600;
    color: rgba(196, 181, 253, .65);
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    line-height: 1.5;
}
.tdiag-footer-uploaded[b-ptigexs92h] {
    margin-top: .35rem;
    color: rgba(255, 255, 255, .38);
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .tester-diagnostic-dialog[b-ptigexs92h] {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: 85vh;
        border-radius: 14px;
    }
    .tdiag-head[b-ptigexs92h] { padding: 1rem 1.1rem .8rem; }
    .tdiag-body[b-ptigexs92h] { padding: 1rem 1.1rem 1.2rem; }
}
/* /Shared/Diagnostics/TesterDiagnosticTrigger.razor.rz.scp.css */
/* Layout transparency (2026-08-19) — the wrapping div this component adds
   must never change how its wrapped content lays out. Several Inventory
   Dashboard containers (.bp-chips, .pm-summary-strip, .inv-legend-row) rely
   on their DIRECT children carrying their own flex sizing (flex: 0 0 auto,
   flex: 1, min-width, etc.) — inserting an unstyled block-level div between
   that container and its child would silently break that sizing. `display:
   contents` removes this div's own box from layout entirely while keeping
   it in the DOM, so its children participate in the parent's flex/grid
   exactly as if this wrapper didn't exist. Click handling is unaffected —
   the click event still bubbles up through this element in the DOM tree
   regardless of `display: contents`, which is what @onclick relies on. */
.tester-diag-zone[b-9gjlu5m7ja] {
    display: contents;
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-dwoemqxsac] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main[b-dwoemqxsac] {
    flex: 1;
}

.sidebar[b-dwoemqxsac] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-dwoemqxsac] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-dwoemqxsac]  a, .top-row .btn-link[b-dwoemqxsac] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-dwoemqxsac] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-dwoemqxsac] {
        display: none;
    }

    .top-row.auth[b-dwoemqxsac] {
        justify-content: space-between;
    }

    .top-row a[b-dwoemqxsac], .top-row .btn-link[b-dwoemqxsac] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-dwoemqxsac] {
        flex-direction: row;
    }

    .sidebar[b-dwoemqxsac] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-dwoemqxsac] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .main > div[b-dwoemqxsac] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-6jaleihj4j] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-6jaleihj4j] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-6jaleihj4j] {
    font-size: 1.1rem;
}

.oi[b-6jaleihj4j] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-6jaleihj4j] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-6jaleihj4j] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-6jaleihj4j] {
        padding-bottom: 1rem;
    }

    .nav-item[b-6jaleihj4j]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-6jaleihj4j]  a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item[b-6jaleihj4j]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-6jaleihj4j] {
        display: none;
    }

    .collapse[b-6jaleihj4j] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}
/* /Shared/Permissions/ModuleAccessDenied.razor.rz.scp.css */
.mag-denied[b-0gdhiw1xfq] {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.25rem;
}

.mag-icon[b-0gdhiw1xfq] {
    width: 64px;
    height: 64px;
    margin-bottom: 1.1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(91, 95, 239, .12);
    color: #5B5FEF;
    font-size: 1.5rem;
}

.mag-title[b-0gdhiw1xfq] {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-1, #1E1B4B);
    margin-bottom: .5rem;
}

.mag-text[b-0gdhiw1xfq] {
    font-size: .9rem;
    color: var(--text-3, #6B7280);
    max-width: 420px;
    margin: 0;
}
/* /Shared/ResponsiveList/MobileRecordCards.razor.rz.scp.css */
/* Mobile responsive fix (2026-07-31) — AreasList/CurrenciesList/UsersList.
   ::deep reaches into MobileRecordField's own markup (a separate
   component, so plain Blazor CSS isolation wouldn't otherwise scope to
   it) and into each page's own Fields/Actions RenderFragment content. */

.mrc-list[b-6exruv2x26] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.mrc-empty[b-6exruv2x26] {
    text-align: center;
    padding: 2rem 1rem;
    color: #6c757d;
    font-size: .9rem;
}

.mrc-card[b-6exruv2x26] {
    border: 1px solid #e3e6ef;
    border-radius: 10px;
    padding: .85rem 1rem;
    background: #fff;
}

.mrc-fields[b-6exruv2x26] {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

[b-6exruv2x26] .mrc-field {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    font-size: .88rem;
}

[b-6exruv2x26] .mrc-field-label {
    color: #6c757d;
    font-weight: 600;
    flex-shrink: 0;
    min-width: 38%;
}

[b-6exruv2x26] .mrc-field-value {
    text-align: end;
    word-break: break-word;
    color: #212529;
}

.mrc-actions[b-6exruv2x26] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .7rem;
    padding-top: .6rem;
    border-top: 1px solid #eef0f5;
}

[b-6exruv2x26] .mrc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #dcdfe6;
    background: #f8f9fb;
    color: #495057;
}

[b-6exruv2x26] .mrc-btn:active {
    background: #eef0f5;
}

[b-6exruv2x26] .mrc-btn-danger {
    color: #c0392b;
    border-color: #f0d3d0;
}

.mrc-pager[b-6exruv2x26] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding-top: .5rem;
    font-size: .85rem;
}

.mrc-pager-btn[b-6exruv2x26] {
    min-width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #dcdfe6;
    background: #fff;
    color: #495057;
}

.mrc-pager-btn:disabled[b-6exruv2x26] {
    opacity: .4;
}

.mrc-pager-label[b-6exruv2x26] {
    color: #495057;
    padding: 0 .3rem;
}