html, body {
font-family: Vazirmatn, Tahoma, sans-serif;
}
/* Only what the «Mizan Panel» design needs and MudBlazor parameters, theme or utility
classes cannot express. Everything is under mz- so it never touches MudBlazor itself,
except the dense-input rules under Density. */
/* Accent colours; MainLayout overrides them with the accent picked in the header. */
/* Light defaults; MainLayout sets them per accent and mode (AppTheme.CssVariables). */
:root {
--mz-banner: #173b75; --mz-bar: #a7bde0; --mz-icon-bg: #edf2fa; --mz-active-bg: #e5edf9;
--mz-subtle: #f8f9f7; --mz-hover: #f2f5f1; --mz-bar-empty: #e9ece7;
--mz-segment: #ffffff; --mz-segment-shadow: 0 1px 2px rgba(0, 0, 0, .08);
--mz-good: #11683a; --mz-good-bg: #e6f2ea; --mz-warn: #8a5d00; --mz-warn-bg: #fbf3df; --mz-bad: #a3342a; --mz-bad-bg: #fbeae8; --mz-box-line: #b6c0b8;
}
/* ── Density ──────────────────────────────────────────── */
/* The one switch for control height. Every input, select, combo, button, toggle and table row below is
its design height minus --mz-shrink: 0px is the design, 4px makes all of them 4px shorter.
The App* inputs (Components/Inputs/AppInputs.cs) are MudBlazor outlined inputs with Margin.Dense, so
their padding and resting label follow it here; at 0px these are MudBlazor's own values. This is the
one place this file styles MudBlazor's classes directly. */
:root { --mz-shrink: 0px; }
.mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
padding-top: calc(10.5px - var(--mz-shrink) / 2);
padding-bottom: calc(10.5px - var(--mz-shrink) / 2);
}
.mud-input-label-outlined.mud-input-label-margin-dense { transform: translate(14px, calc(12px - var(--mz-shrink) / 2)) scale(1); }
.mud-application-layout-rtl .mud-input-label-outlined.mud-input-label-margin-dense { transform: translate(-14px, calc(12px - var(--mz-shrink) / 2)) scale(1); }
.mz-min-w-0 { min-width: 0; }
.mz-nowrap { white-space: nowrap; }
.mz-ellipsis { overflow: hidden; text-overflow: ellipsis; }
.mz-semibold { font-weight: 600 !important; }
/* ── Header ───────────────────────────────────────────── */
/* Bottom line drawn inside the 76px, so the header ends exactly where the sidebar logo area does. */
.mz-appbar.mud-appbar { box-shadow: inset 0 -1px 0 var(--mud-palette-lines-default); }
.mz-page-title { font-size: 16px !important; font-weight: 700 !important; overflow: hidden; text-overflow: ellipsis; }
.mz-square-button.mud-icon-button {
width: calc(40px - var(--mz-shrink));
height: calc(40px - var(--mz-shrink));
padding: 0;
border-radius: 10px;
border-color: var(--mud-palette-lines-default);
color: var(--mud-palette-text-primary);
}
.mz-header-search { flex: 0 1 300px; min-width: 120px; margin: 0 !important; }
.mz-header-search .mud-input-outlined { background: var(--mz-subtle); border-radius: 10px; font-size: 13px; }
.mz-accent-button.mud-button-root { height: calc(40px - var(--mz-shrink)); min-width: 0; padding: 0 10px; border-radius: 10px; border-color: var(--mud-palette-lines-default); color: var(--mud-palette-text-primary); }
.mz-accent-list { min-width: 220px; }
/* The signed-in user (UserMenu): a text button that opens «خروج», with the design's divider before it. */
.mz-header-user.mud-button-root { padding: 4px 12px 4px 8px; border-radius: 0; border-inline-start: 1px solid var(--mud-palette-lines-default);
text-transform: none; letter-spacing: normal; font-weight: inherit; color: var(--mud-palette-text-primary); text-align: right; }
.mz-avatar.mud-avatar { background: var(--mz-icon-bg); color: var(--mud-palette-primary); font-weight: 700; font-size: 14px; }
/* ── Sidebar ──────────────────────────────────────────── */
/* Same 76px as the header and the 52px footers: the borders line up across the page. */
.mz-brand.mud-drawer-header { height: 76px; display: flex; align-items: center; min-height: 76px; padding: 0 18px; box-sizing: border-box; overflow: hidden; flex-shrink: 0; }
.mz-brand.mz-brand-compact.mud-drawer-header { padding: 0 16px; }
.mz-sidebar-footer { height: 52px; padding: 0 16px; box-sizing: border-box; flex-shrink: 0; }
.mz-footer.mud-paper { height: 52px; padding: 0 24px; box-sizing: border-box; display: flex; align-items: center; flex-shrink: 0; overflow: hidden; }
.mz-brand-title { font-size: 17px !important; font-weight: 800 !important; }
.mz-nav .mud-nav-link { padding: 10px 12px; font-size: 14px; font-weight: 500; }
/* As specific as MudBlazor's own .mud-navmenu-primary .mud-nav-link.active rule, and later. */
.mz-nav.mud-navmenu.mud-navmenu-primary .mud-nav-link.active:not(.mud-nav-link-disabled) {
background-color: var(--mz-active-bg);
font-weight: 700 !important;
}
.mz-nav .mud-nav-link:hover:not(.active) { background-color: var(--mz-hover); }
/* Sub-items hang off a thin guide line, indented under their group. */
.mz-nav .mud-navgroup-collapse .mud-navmenu {
margin: 2px 22px 6px 0;
padding-inline-start: 12px;
border-inline-start: 1px solid var(--mud-palette-lines-default);
}
/* A group inside a group indents less, so third-level titles keep to one line. */
.mz-nav .mud-navgroup-collapse .mud-navgroup-collapse .mud-navmenu { margin-right: 6px; }
.mz-nav .mud-navgroup-collapse .mud-nav-link { padding: 8px 12px; font-size: 13px; color: var(--mud-palette-text-secondary); }
.mz-nav.mud-navmenu.mud-navmenu-primary .mud-navgroup-collapse .mud-nav-link.active:not(.mud-nav-link-disabled) { color: var(--mud-palette-primary); }
/* ── Dashboard ────────────────────────────────────────── */
.mz-card.mud-paper { border-radius: 14px; }
.mz-welcome.mud-paper { background: var(--mz-banner); color: #fff; border-radius: 16px; }
.mz-welcome .mz-welcome-subtitle { color: rgba(255, 255, 255, .8); }
.mz-welcome-outline.mud-button-root { color: #fff; border-color: rgba(255, 255, 255, .35); }
.mz-welcome-solid.mud-button-root { background: #fff; color: var(--mz-banner); font-weight: 700; }
.mz-kpi-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--mz-icon-bg); color: var(--mud-palette-primary); }
.mz-kpi-value { font-size: 26px !important; font-weight: 800 !important; line-height: 1.2 !important; }
.mz-range.mud-toggle-group { background: var(--mud-palette-background); border: 0; padding: 4px; border-radius: 9px; }
.mz-range .mud-toggle-item { border: 0 !important; border-radius: 7px !important; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.mz-range .mud-toggle-item-selected { background: var(--mz-segment) !important; color: var(--mud-palette-primary) !important; font-weight: 700; box-shadow: var(--mz-segment-shadow); }
.mz-chart { display: flex; align-items: flex-end; gap: 10px; height: 220px; padding-top: 10px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.mz-chart-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.mz-chart-bar { width: 100%; max-width: 34px; border-radius: 6px 6px 0 0; transition: height .3s ease; }
.mz-chart-labels { display: flex; gap: 10px; }
.mz-chart-labels > span { flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-quick.mud-button-root { border-radius: 12px; padding: 14px 12px; justify-content: flex-start; border-color: var(--mud-palette-lines-default); color: var(--mud-palette-text-primary); }
.mz-quick.mud-button-root:hover { border-color: var(--mud-palette-primary); background: var(--mz-icon-bg); }
.mz-quick .mud-button-label { flex-direction: column; align-items: flex-start; gap: 10px; }
.mz-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.mz-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mz-status-paid { background: var(--mz-good-bg); color: var(--mz-good); }
.mz-status-pending { background: var(--mz-warn-bg); color: var(--mz-warn); }
.mz-status-overdue { background: var(--mz-bad-bg); color: var(--mz-bad); }
.mz-section-title { font-size: 15px !important; font-weight: 700 !important; }
.mz-bills .mud-table-head { background: var(--mz-subtle); }
/* The emblem always sits on white, in dark mode too. */
.mz-logo-box.mud-paper { background: #fff; }
.mz-bills .mud-table-head .mud-table-cell { font-size: 12px; font-weight: 600; color: var(--mud-palette-text-secondary); }
/* ── Roles and permissions ────────────────────────────── */
.mz-bold { font-weight: 700 !important; }
.mz-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 11px !important; }
.mz-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mz-dot-warn { background: var(--mz-warn); }
.mz-dot-good { background: var(--mz-good); }
.mz-text-warn { color: var(--mz-warn); }
.mz-text-good { color: var(--mz-good); }
/* MudStack renders no mud-stack class, so these hang off the mz- class alone. */
.mz-roles { flex-wrap: nowrap; }
.mz-roles-aside { flex: 1 1 260px; max-width: 340px; position: sticky; top: 92px; overflow: hidden; }
.mz-roles-main { flex: 999 1 560px; min-width: 0; }
.mz-roles-list { max-height: calc(100vh - 300px); overflow: auto; }
@media (max-width: 1100px) {
.mz-roles { flex-wrap: wrap; }
.mz-roles-aside { max-width: none; position: static; }
.mz-roles-list { max-height: none; }
}
.mz-role-item.mud-button-root { padding: 10px; border-radius: 11px; color: var(--mud-palette-text-primary); text-align: right; }
.mz-role-item .mud-button-label { justify-content: flex-start; }
.mz-role-item.mud-button-root:hover { background: var(--mz-subtle); }
.mz-role-item-on.mud-button-root, .mz-role-item-on.mud-button-root:hover { background: var(--mz-icon-bg); }
.mz-role-item-on .mz-semibold { color: var(--mud-palette-primary); font-weight: 700 !important; }
.mz-role-avatar.mud-avatar { width: 38px; height: 38px; border-radius: 10px; background: var(--mz-subtle); color: var(--mud-palette-text-secondary); font-weight: 800; font-size: 15px; }
.mz-role-item-on .mz-role-avatar.mud-avatar { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.mz-role-badge { width: 50px; height: 50px; flex-shrink: 0; border-radius: 13px; background: var(--mz-banner); color: #fff; }
.mz-role-title { font-size: 19px !important; font-weight: 800 !important; }
.mz-stat { font-size: 18px !important; font-weight: 800 !important; }
/* ── Sample pages (Pages/Samples) ─────────────────────── */
.mz-samples { max-width: 1100px; }
.mz-sample-num.mud-avatar { width: 28px; height: 28px; background: var(--mz-icon-bg); color: var(--mud-palette-primary); font-size: 13px; font-weight: 800; }
.mz-sample-text { line-height: 1.9 !important; }
.mz-sample-demo.mud-paper { padding: 14px 16px; border: 1px dashed var(--mud-palette-lines-default); border-radius: 12px; background: var(--mz-subtle); }
.mz-sample-code.mud-paper { border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; background: var(--mz-subtle); overflow-x: auto; }
.mz-sample-code pre { margin: 0; padding: 14px 16px; direction: ltr; text-align: left; white-space: pre; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.7; color: var(--mud-palette-text-primary); }
.mz-inline-code { direction: ltr; unicode-bidi: isolate; padding: 1px 6px; border-radius: 6px; background: var(--mz-subtle); border: 1px solid var(--mud-palette-lines-default); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--mud-palette-text-primary); }
/* ── Org structure (ساختار سازمانی) ───────────────────── */
/* Sizes and colours are the design's (Org Structure v2); its border is lines-default, its row line table-lines. */
.mz-org { flex-wrap: nowrap; max-width: 1600px; }
.mz-org-aside { flex: 1 1 280px; max-width: 320px; position: sticky; top: 92px; overflow: hidden; }
.mz-org-main { flex: 999 1 640px; min-width: 0; }
.mz-org-list { max-height: calc(100vh - 330px); overflow: auto; padding: 6px 8px 10px; gap: 2px !important; }
.mz-org-list > * { flex-shrink: 0; }
.mz-org-cities { flex: 1 1 300px; max-width: 360px; min-width: 0; overflow: hidden; }
.mz-org-hozes { flex: 999 1 420px; min-width: 0; }
@media (max-width: 1100px) {
.mz-org { flex-wrap: wrap; }
.mz-org-aside { max-width: none; position: static; }
.mz-org-list { max-height: 300px; }
.mz-org-cities { max-width: none; }
}
.mz-org-card.mud-paper { border-radius: 16px; }
.mz-org-title { font-size: 20px !important; font-weight: 800 !important; }
.mz-org-subtitle { font-size: 14px !important; font-weight: 700 !important; }
.mz-org-heading { font-size: 15px !important; font-weight: 800 !important; }
.mz-org-hint { font-size: 12px !important; }
.mz-org-path { font-size: 11.5px !important; }
.mz-org-num { font-size: 11px !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Header stats: three cells with a row line between them. */
.mz-org-stats.mud-paper { border-radius: 12px; overflow: hidden; }
.mz-org-stat { padding: 12px 16px !important; }
.mz-org-stat + .mz-org-stat { border-right: 1px solid var(--mud-palette-table-lines); }
.mz-org-stat-label { font-size: 11.5px !important; }
.mz-org-stat-value { font-size: 20px !important; font-weight: 800 !important; }
/* Text buttons used as list rows and cards: MudBlazor's padding, height and centring off. */
.mz-org-row.mud-button-root, .mz-org-bld.mud-button-root, .mz-org-hoze.mud-button-root {
min-width: 0; text-transform: none; letter-spacing: normal; line-height: normal; text-align: right;
font-weight: inherit; color: var(--mud-palette-text-primary);
}
.mz-org-row .mud-button-label, .mz-org-bld .mud-button-label, .mz-org-hoze .mud-button-label { display: block; }
.mz-org-row.mud-button-root { padding: 8px 10px; border-radius: 10px; }
.mz-org-row.mud-button-root:hover { background: var(--mz-subtle); }
.mz-org-row-name { font-size: 13px !important; font-weight: 500 !important; }
.mz-org-row-on.mud-button-root, .mz-org-row-on.mud-button-root:hover { background: var(--mz-icon-bg); }
.mz-org-row-on .mz-org-row-name { color: var(--mud-palette-primary); font-weight: 700 !important; }
/* A شهر: a tinted header band, then its buildings on a guide line, a dashed rule before the next شهر. */
.mz-org-city-group + .mz-org-city-group { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--mud-palette-lines-default); }
.mz-org-city { padding: 8px 10px; border-radius: 10px; background: var(--mz-subtle); border: 1px solid var(--mud-palette-lines-default); }
.mz-org-city-avatar.mud-avatar { width: 32px; height: 32px; border-radius: 9px; background: var(--mz-banner); color: #fff; }
.mz-org-city-name { font-size: 14px !important; font-weight: 800 !important; }
.mz-org-city-meta { font-size: 11.5px !important; }
.mz-org-city-blds { margin-right: 15px; padding-right: 12px; border-right: 2px solid var(--mud-palette-lines-default); }
.mz-org-icon.mud-icon-root { font-size: 16px; color: var(--mud-palette-text-secondary); }
.mz-org-bld.mud-button-root {
width: 100%; padding: 10px 12px; border-radius: 10px;
border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface);
}
.mz-org-bld.mud-button-root:hover { border-color: var(--mud-palette-primary); background: var(--mud-palette-surface); }
.mz-org-bld-name { font-size: 13px !important; font-weight: 600 !important; }
.mz-org-bld-on.mud-button-root, .mz-org-bld-on.mud-button-root:hover { border-color: var(--mud-palette-primary); background: var(--mz-icon-bg); }
.mz-org-bld-on .mz-org-bld-name { color: var(--mud-palette-primary); font-weight: 700 !important; }
.mz-org-bld-on .mz-org-icon.mud-icon-root { color: var(--mud-palette-primary); }
.mz-org-bld-count { font-size: 11.5px !important; font-weight: 700 !important; white-space: nowrap; }
.mz-org-bld-off { font-size: 11px !important; white-space: nowrap; }
/* The building's share of حوزه: a 5px bar, primary for the chosen building. */
.mz-org-bar.mud-progress-linear { height: 5px !important; border-radius: 999px; }
.mz-org-bar.mud-progress-linear::before { background: var(--mz-bar-empty) !important; opacity: 1 !important; }
.mz-org-bar .mud-progress-linear-bar { background: var(--mz-bar) !important; border-radius: 999px; }
.mz-org-bld-on .mz-org-bar .mud-progress-linear-bar { background: var(--mud-palette-primary) !important; }
/* Count pills with a dot. */
.mz-org-pill.mud-chip { height: 28px; margin: 0; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
background: var(--mz-tone-bg) !important; color: var(--mz-tone) !important; }
.mz-org-pill.mud-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-left: 6px; }
.mz-org-pill-ink { --mz-tone: var(--mud-palette-text-primary); --mz-tone-bg: var(--mz-subtle); }
/* «نمایش غیرفعالها»: an outlined button with a checkbox mark, as in the design. */
/* As tall as the search input beside it (the design makes them equal). */
.mz-org-toggle.mud-button-root { height: calc(40px - var(--mz-shrink)); padding: 0 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600;
text-transform: none; letter-spacing: normal; white-space: nowrap;
border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); }
/* The design's toggle doesn't change on hover. */
.mz-org-toggle.mud-button-root:hover { background: var(--mud-palette-surface); }
.mz-org-toggle .mud-button-label { gap: 8px; }
.mz-org-toggle-on.mud-button-root, .mz-org-toggle-on.mud-button-root:hover { background: var(--mz-icon-bg); border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }
.mz-org-check { width: 16px; height: 16px; flex-shrink: 0; box-sizing: border-box; border-radius: 5px; border: 1.5px solid var(--mz-box-line);
display: flex; align-items: center; justify-content: center; color: var(--mud-palette-primary-text); }
.mz-org-check .mud-icon-root { font-size: 13px; }
.mz-org-toggle-on .mz-org-check { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary); }
/* حوزه cards: as many 150px+ columns as fit. MudGrid has no auto-fill, hence the CSS grid. */
.mz-org-hoze-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 14px; }
.mz-org-hoze.mud-button-root { padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); }
.mz-org-hoze.mud-button-root:hover { border-color: var(--mud-palette-primary); background: var(--mud-palette-surface); }
.mz-org-hoze-off.mud-button-root, .mz-org-hoze-off.mud-button-root:hover { background: var(--mz-subtle); }
.mz-org-hoze-on.mud-button-root, .mz-org-hoze-on.mud-button-root:hover { border-color: var(--mud-palette-primary); background: var(--mz-icon-bg); }
.mz-org-hoze-code { font-size: 15px !important; font-weight: 800 !important; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.mz-org-hoze-off .mz-org-hoze-code { text-decoration: line-through; color: var(--mud-palette-text-secondary); }
.mz-org-hoze-status { font-size: 11px !important; }
.mz-org-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--mz-good); }
.mz-org-hoze-off .mz-org-dot { background: var(--mz-box-line); }
/* The حوزه drawer. */
.mz-org-sheet-title { font-size: 18px !important; font-weight: 800 !important; }
.mz-org-sheet-close.mud-icon-button { width: 34px; height: 34px; border-radius: 9px; background: var(--mz-subtle); color: var(--mud-palette-text-secondary); }
.mz-org-parts { display: grid; grid-template-columns: 2fr 2fr 1fr 1fr; gap: 6px; }
.mz-org-part.mud-paper { padding: 12px 6px; border-radius: 10px; background: var(--mz-icon-bg); color: var(--mud-palette-primary); text-align: center; }
.mz-org-part-value { font-size: 24px !important; font-weight: 800 !important; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.mz-org-status.mud-chip { height: auto; margin: 0; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
background: var(--mz-tone-bg) !important; color: var(--mz-tone) !important; }
.mz-org-status.mud-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-left: 6px; }
.mz-org-field-label { font-size: 11.5px !important; }
.mz-org-field-value { font-size: 13.5px !important; font-weight: 600 !important; overflow-wrap: anywhere; }
.mz-svc-tab.mud-button-root { height: 100%; padding: 16px 20px 14px; border-radius: 0; background: var(--mz-subtle); color: var(--mud-palette-text-primary); text-align: right; border-inline-end: 1px solid var(--mud-palette-table-lines); }
.mz-svc-tab .mud-button-label { display: block; }
.mz-svc-tab-on.mud-button-root { background: var(--mud-palette-surface); box-shadow: inset 0 -3px 0 var(--mud-palette-primary); }
.mz-svc-name { font-size: 15px !important; font-weight: 800 !important; letter-spacing: .6px; }
.mz-svc-tab-on .mz-svc-name { color: var(--mud-palette-primary); }
.mz-progress { display: flex; height: 4px; border-radius: 999px; background: var(--mz-bar-empty); overflow: hidden; }
.mz-progress > div { height: 100%; border-radius: 999px; background: var(--mz-bar); transition: width .2s; }
.mz-svc-tab-on .mz-progress > div { background: var(--mud-palette-primary); }
.mz-grant-search.mud-input-control { margin: 0 !important; }
.mz-field-grant { flex: 1 1 220px; }
.mz-tool-button.mud-button-root { height: calc(36px - var(--mz-shrink)); padding: 0 12px; border-radius: 9px; border-color: var(--mud-palette-lines-default); color: var(--mud-palette-text-primary); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.mz-tool-button.mud-button-root:hover { border-color: var(--mud-palette-primary); background: transparent; }
.mz-only-toggle { height: calc(36px - var(--mz-shrink)); padding: 0 12px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--mud-palette-lines-default); border-radius: 9px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font-family: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.mz-only-toggle-on { border-color: var(--mud-palette-primary); background: var(--mz-icon-bg); color: var(--mud-palette-primary); }
.mz-only-toggle:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.mz-only-track { position: relative; width: 28px; height: 16px; flex-shrink: 0; border-radius: 999px; background: var(--mz-box-line); transition: background .15s; }
.mz-only-toggle-on .mz-only-track { background: var(--mud-palette-primary); }
.mz-only-knob { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: right .15s; }
.mz-only-toggle-on .mz-only-knob { right: 14px; }
.mz-grant-group.mud-paper { border-radius: 13px; overflow: hidden; }
.mz-grant-group-head { padding: 12px 14px; background: var(--mz-subtle); }
.mz-grant-group-toggle { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; cursor: pointer; border-radius: 8px; }
.mz-chevron .mud-icon-root { transition: transform .18s; }
.mz-chevron-open .mud-icon-root { transform: rotate(-90deg); }
.mz-grant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--mud-palette-table-lines); }
.mz-grant { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; background: var(--mud-palette-surface); cursor: pointer; }
.mz-grant-on { background: var(--mz-icon-bg); border-color: transparent; }
.mz-grant:hover { border-color: var(--mud-palette-primary); }
.mz-grant:focus-visible, .mz-grant-group-toggle:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.mz-box { flex-shrink: 0; color: var(--mz-box-line); }
.mz-box.mud-primary-text { color: var(--mud-palette-primary); }
.mz-empty.mud-paper { border-style: dashed; border-radius: 13px; }
.mz-roles-footer { position: sticky; bottom: 0; padding: 14px 22px; background: var(--mud-palette-surface); border-top: 1px solid var(--mud-palette-lines-default); border-radius: 0 0 14px 14px; }
.mz-roles-footer-msg { flex: 1; min-width: 180px; font-size: 13px; font-weight: 600; }
.mz-footer-discard.mud-button-root, .mz-footer-save.mud-button-root { height: calc(40px - var(--mz-shrink)); border-radius: 10px; font-size: 13.5px; }
.mz-footer-discard.mud-button-root { padding: 0 16px; border-color: var(--mud-palette-lines-default); color: var(--mud-palette-text-primary); font-weight: 400; }
.mz-footer-save.mud-button-root { padding: 0 22px; font-weight: 700; box-shadow: none; }
/* With nothing to save the design keeps both buttons in their colours, only faded. */
.mz-footer-discard.mud-button-root:disabled { opacity: .5; border-color: var(--mud-palette-lines-default); color: var(--mud-palette-text-primary); }
.mz-footer-save.mud-button-filled:disabled { opacity: .5; background-color: var(--mud-palette-primary) !important; color: var(--mud-palette-primary-text); }
/* ── Users ────────────────────────────────────────────── */
.mz-muted { color: var(--mud-palette-text-secondary); }
/* Status tones: the stat cards, status pills and their filters share them. */
.mz-tone-primary { --mz-tone: var(--mud-palette-primary); --mz-tone-bg: var(--mz-icon-bg); }
.mz-tone-good { --mz-tone: var(--mz-good); --mz-tone-bg: var(--mz-good-bg); }
.mz-tone-muted { --mz-tone: var(--mud-palette-text-secondary); --mz-tone-bg: var(--mz-subtle); }
.mz-tone-warn { --mz-tone: var(--mz-warn); --mz-tone-bg: var(--mz-warn-bg); }
.mz-user-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.mz-user-stat-skeleton { border-radius: 16px; }
.mz-user-stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--mud-palette-lines-default); border-radius: 16px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font-family: inherit; text-align: right; cursor: pointer; }
.mz-user-stat-on { border-color: var(--mz-tone); }
.mz-user-stat:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.mz-user-stat-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--mz-tone-bg); color: var(--mz-tone); }
.mz-user-stat-text { display: flex; flex-direction: column; gap: 2px; }
.mz-user-stat-label { font-size: 12px; color: var(--mud-palette-text-secondary); }
.mz-user-stat-value { font-size: 22px; font-weight: 800; line-height: 1.4; }
.mz-users.mud-paper { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
/* Every MudDataGrid: HorizontalScrollbar makes its table max-content wide (rows on one line, scrolling when too
wide); it still fills the card when its content is narrower. */
.mud-data-grid .mud-table-root { min-width: 100%; }
/* Every MudDataGrid marks its sorted column with a small ▲ (SortIcon; ▼ once MudBlazor turns it for descending) and
shows it and the title in the primary colour. */
.mud-data-grid .mud-table-cell .column-header .column-options .sort-direction-icon:is(.mud-direction-asc, .mud-direction-desc),
.mud-data-grid th:has(.sort-direction-icon.mud-direction-asc, .sort-direction-icon.mud-direction-desc) .sortable-column-header { color: var(--mud-palette-primary); }
.mz-users-head { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.mz-users-title { font-size: 16px !important; font-weight: 800 !important; }
/* Each filter is a FormField (label above), so the row sizes the fields and lines them up at the bottom. */
.mz-users-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.mz-users-filters > .mz-form-field { flex: 1 1 200px; }
.mz-users-filters > .mz-field-name { flex: 1.4 1 220px; }
.mz-users-filters > .mz-field-hoze { flex: 1 1 180px; }
.mz-users-filters > .mz-field-status { flex: none; }
.mz-field-wide { flex: 0 1 320px; }
.mz-filter.mud-input-control { min-width: 0; margin: 0 !important; }
.mz-filter .mud-input.mud-input-outlined { height: calc(40px - var(--mz-shrink)); border-radius: 10px; font-size: 13px; background: var(--mud-palette-surface); }
.mz-filter .mud-input-outlined-border { border-radius: 10px; border-color: var(--mud-palette-lines-default); }
.mz-filter .mud-input-adornment .mud-icon-root { font-size: 17px; color: var(--mud-palette-text-secondary); }
/* AppSelectExtended: the list is at least 300px wide, so long names stay on one line next to a narrow field. */
.mz-select-pop { min-width: 300px; max-width: min(460px, calc(100vw - 32px)); }
/* MudSelectExtended zeroes its text's right padding inline, the side its arrow takes in a left-to-right page.
Here the arrow is on the left, so without this the value and placeholder touch the right border. */
[dir="rtl"] .mud-select-input-extended.mud-input-slot { padding-right: 14px !important; }
/* حوزه codes are digits: typed left to right, kept to the right edge next to the icon. */
.mz-filter-hoze .mud-input > input.mud-input-root { direction: ltr; text-align: right; letter-spacing: .5px; font-variant-numeric: tabular-nums; padding-right: 0; padding-left: 14px; }
.mz-range-boxed.mud-toggle-group { gap: 2px; padding: 3px; border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; background: var(--mz-subtle); }
.mz-range-boxed .mud-toggle-item { height: calc(32px - var(--mz-shrink)); padding: 0 12px; border-radius: 8px !important; white-space: nowrap; }
.mz-user-cell { display: flex; align-items: center; gap: 12px; }
.mz-user-avatar { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; background: var(--mz-icon-bg); color: var(--mud-palette-primary); }
.mz-user-avatar-off { background: var(--mz-subtle); color: var(--mud-palette-text-secondary); }
.mz-user-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mz-user-name { font-size: 13.5px; font-weight: 700; }
.mz-user-name-off { color: var(--mud-palette-text-secondary); }
.mz-user-login { font-size: 11.5px; color: var(--mud-palette-text-secondary); text-align: right; font-variant-numeric: tabular-nums; }
.mz-user-sso { font-size: 12px; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.mz-hoze-code { padding: 3px 8px; border-radius: 6px; background: var(--mz-icon-bg); color: var(--mud-palette-primary); font-size: 13px; font-weight: 700; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.mz-user-unit { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; color: var(--mud-palette-text-secondary); }
.mz-user-roles { display: flex; align-items: center; gap: 4px; font-size: 11.5px; }
.mz-role-chip { padding: 2px 8px; border-radius: 999px; background: var(--mz-icon-bg); color: var(--mud-palette-primary); font-size: 11.5px; font-weight: 600; }
.mz-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--mz-tone-bg); color: var(--mz-tone); font-size: 12px; font-weight: 700; white-space: nowrap; }
.mz-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mud-table-body td.mud-table-cell.mz-user-last { font-size: 12px; color: var(--mud-palette-text-secondary); }
.mz-row-actions { display: flex; gap: 2px; justify-content: flex-end; }
.mz-row-action.mud-icon-button { width: calc(34px - var(--mz-shrink)); height: calc(34px - var(--mz-shrink)); padding: 0; border-radius: 9px; color: var(--mud-palette-text-secondary); }
.mz-row-action .mud-icon-root { font-size: 18px; }
.mz-row-action.mud-icon-button:hover { background: var(--mz-subtle); color: var(--mud-palette-primary); }
.mz-row-action-view.mud-icon-button:hover { color: var(--mud-palette-text-primary); }
.mz-row-action-lock.mud-icon-button:hover { background: var(--mz-bad-bg); color: var(--mz-bad); }
.mz-row-action-unlock.mud-icon-button:hover { background: var(--mz-good-bg); color: var(--mz-good); }
.mz-pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--mud-palette-lines-default); background: var(--mz-subtle); font-size: 12px; color: var(--mud-palette-text-secondary); }
.mz-pager-size { display: flex; align-items: center; gap: 6px; }
.mz-pager-select { position: relative; display: flex; }
.mz-pager-select select { height: calc(30px - var(--mz-shrink)); padding: 0 8px 0 22px; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font-family: inherit; font-size: 12px; font-weight: 700; outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
.mz-pager-select .mud-icon-root { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); font-size: 15px; pointer-events: none; color: var(--mud-palette-text-secondary); }
.mz-pager-range { flex: 1; min-width: 120px; }
.mz-pager-pages { display: flex; align-items: center; gap: 4px; }
.mz-pager-gap { min-width: 22px; text-align: center; }
.mz-pager-step, .mz-page { height: calc(30px - var(--mz-shrink)); border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font-family: inherit; font-size: 12px; cursor: pointer; }
.mz-pager-step { padding: 0 12px; }
.mz-pager-step:disabled { opacity: .5; cursor: default; }
.mz-page { min-width: 30px; padding: 0 6px; }
.mz-page:hover { border-color: var(--mud-palette-primary); }
.mz-page-on { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); font-weight: 700; }
/* User details: a sheet over the page from the left edge (the sidebar is on the right). */
.mz-sheet-backdrop { position: fixed; inset: 0; z-index: 1400; background: rgba(8, 12, 10, .35); }
.mz-sheet { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1401; width: min(480px, 100%); display: flex; flex-direction: column; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); border-right: 1px solid var(--mud-palette-lines-default); box-shadow: 16px 0 48px rgba(0, 0, 0, .2); outline: none; }
.mz-sheet-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.mz-sheet-avatar { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--mz-banner); color: #fff; font-size: 19px; font-weight: 800; }
.mz-sheet-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mz-sheet-name { font-size: 17px; font-weight: 800; }
.mz-sheet-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mz-sheet-tags .mz-pill { padding: 2px 10px; font-size: 11.5px; }
.mz-sheet-title { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.mz-sheet-close.mud-icon-button { width: calc(34px - var(--mz-shrink)); height: calc(34px - var(--mz-shrink)); padding: 0; flex-shrink: 0; border-radius: 9px; background: var(--mz-subtle); color: var(--mud-palette-text-secondary); }
.mz-sheet-body { flex: 1; overflow: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 20px; }
.mz-sheet-note { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; background: var(--mz-subtle); font-size: 12px; color: var(--mud-palette-text-secondary); text-wrap: pretty; }
.mz-sheet-note .mud-icon-root { flex-shrink: 0; font-size: 16px; }
.mz-sheet-section { display: flex; flex-direction: column; gap: 12px; }
.mz-sheet-section-title { font-size: 13px; font-weight: 700; }
.mz-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; padding: 14px; border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; }
.mz-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mz-field-full { grid-column: 1 / -1; }
.mz-field-label { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.mz-field-value { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; text-align: right; }
.mz-field-ltr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mz-field-empty { color: var(--mud-palette-text-secondary); }
.mz-sheet-hoze-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mz-sheet-hoze { padding: 3px 10px; border-radius: 7px; background: var(--mz-icon-bg); color: var(--mud-palette-primary); font-size: 14px; font-weight: 800; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.mz-sheet-hoze-none { background: var(--mz-subtle); color: var(--mud-palette-text-secondary); }
.mz-sheet-hoze-path { padding: 0 2px; font-size: 12px; color: var(--mud-palette-text-secondary); }
.mz-sheet-foot { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--mud-palette-lines-default); background: var(--mz-subtle); }
.mz-sheet-roles.mud-button-root { height: calc(40px - var(--mz-shrink)); padding: 0 16px; border-radius: 10px; border-color: var(--mud-palette-lines-default); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font-size: 13.5px; font-weight: 600; }
.mz-sheet-roles.mud-button-root:hover { border-color: var(--mud-palette-primary); background: var(--mud-palette-surface); }
.mz-sheet-done.mud-button-root { height: calc(40px - var(--mz-shrink)); padding: 0 20px; border-radius: 10px; font-size: 13.5px; font-weight: 700; box-shadow: none; }
/* ── User access (roles, extra permissions, حوزه) ─────── */
.mz-faded { opacity: .5; }
.mz-text-bad { color: var(--mz-bad); }
.mz-ua-head.mud-paper { overflow: hidden; }
.mz-ua-user { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 22px; }
.mz-ua-back.mud-icon-button:hover { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); background: transparent; }
.mz-ua-avatar { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--mz-banner); color: #fff; font-size: 20px; font-weight: 800; }
.mz-ua-who { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.mz-ua-name { font-size: 19px; font-weight: 800; }
.mz-ua-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.mz-ua-login { font-size: 12px; font-variant-numeric: tabular-nums; }
.mz-ua-hoze { color: var(--mud-palette-text-primary); font-variant-numeric: tabular-nums; }
.mz-ua-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.mz-ua-stat { display: flex; flex-direction: column; gap: 1px; padding: 8px 14px; border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; background: var(--mz-subtle); }
.mz-ua-stat > span { font-size: 11px; color: var(--mud-palette-text-secondary); }
.mz-ua-stat > b { font-size: 17px; font-weight: 800; }
.mz-ua-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 1px solid var(--mud-palette-lines-default); }
.mz-ua-tab { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border: 0; border-inline-end: 1px solid var(--mud-palette-table-lines); background: var(--mz-subtle); color: var(--mud-palette-text-primary); font-family: inherit; text-align: right; cursor: pointer; }
.mz-ua-tab:hover { background: var(--mz-hover); }
.mz-ua-tab-on, .mz-ua-tab-on:hover { background: var(--mud-palette-surface); box-shadow: inset 0 -3px 0 var(--mud-palette-primary); }
.mz-ua-tab:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.mz-ua-tab-label { font-size: 15px; font-weight: 800; }
.mz-ua-tab-on .mz-ua-tab-label { color: var(--mud-palette-primary); }
.mz-ua-tab-count { font-size: 12px; color: var(--mud-palette-text-secondary); }
.mz-ua-svc-tabs { border-radius: 14px 14px 0 0; overflow: hidden; }
/* تخصیص نقش */
.mz-assign-form { margin: 18px 22px 0; display: flex; flex-direction: column; border: 1.5px solid var(--mud-palette-primary); border-radius: 14px; background: var(--mz-subtle); }
.mz-assign-form-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 0; }
.mz-assign-form-title { flex: 1; font-size: 15px; font-weight: 800; }
.mz-assign-close.mud-icon-button { width: calc(32px - var(--mz-shrink)); height: calc(32px - var(--mz-shrink)); padding: 0; border-radius: 8px; color: var(--mud-palette-text-secondary); }
.mz-assign-form-body { display: flex; flex-direction: column; gap: 18px; padding: 14px 18px 18px; }
.mz-assign-field { display: flex; flex-direction: column; gap: 8px; }
.mz-optional { padding: 1px 8px; border: 1px dashed var(--mud-palette-lines-default); border-radius: 999px; font-size: 11px; font-weight: 500; }
.mz-role-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.mz-role-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--mud-palette-lines-default); border-radius: 11px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font-family: inherit; text-align: right; cursor: pointer; }
.mz-role-option-on { border-color: var(--mud-palette-primary); background: var(--mz-icon-bg); }
.mz-role-option:disabled { opacity: .45; cursor: not-allowed; }
.mz-role-option:focus-visible, .mz-end-chip:focus-visible, .mz-hz-pick:focus-visible, .mz-pick-all:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.mz-radio { width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid var(--mz-box-line); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.mz-radio > span { width: 8px; height: 8px; border-radius: 50%; }
.mz-role-option-on .mz-radio { border-color: var(--mud-palette-primary); }
.mz-role-option-on .mz-radio > span { background: var(--mud-palette-primary); }
.mz-role-option-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mz-role-option-name { font-size: 13px; font-weight: 700; }
.mz-role-option-meta { font-size: 11px; color: var(--mud-palette-text-secondary); }
.mz-role-pick-grants { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--mud-palette-text-secondary); }
.mz-area-chip { display: flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--mud-palette-lines-default); border-radius: 999px; background: var(--mud-palette-surface); }
.mz-area-chip > b { font-weight: 800; color: var(--mud-palette-text-primary); }
.mz-assign-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.mz-date-field.mud-input-control { margin: 0 !important; }
.mz-date-field .mud-input.mud-input-outlined { height: calc(42px - var(--mz-shrink)); border-radius: 10px; background: var(--mud-palette-surface); font-size: 14px; letter-spacing: .5px; }
.mz-date-field .mud-input-outlined-border { border-radius: 10px; border-color: var(--mud-palette-lines-default); }
.mz-date-field .mud-input-adornment .mud-icon-root { font-size: 17px; color: var(--mud-palette-text-secondary); }
.mz-end-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.mz-end-chip { height: 28px; padding: 0 10px; border: 1px solid var(--mud-palette-lines-default); border-radius: 999px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font-family: inherit; font-size: 11.5px; cursor: pointer; }
.mz-end-chip:hover { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }
.mz-assign-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.mz-assign-msg { flex: 1; min-width: 200px; font-size: 12.5px; font-weight: 600; color: var(--mud-palette-text-secondary); }
.mz-assign-msg.mz-text-bad { color: var(--mz-bad); }
.mz-assign-cancel.mud-button-root, .mz-assign-save.mud-button-root, .mz-assign-new.mud-button-root { height: calc(38px - var(--mz-shrink)); border-radius: 10px; font-size: 13px; white-space: nowrap; box-shadow: none; }
.mz-assign-cancel.mud-button-root { padding: 0 14px; border-color: var(--mud-palette-lines-default); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font-weight: 600; }
.mz-assign-save.mud-button-root { padding: 0 20px; font-weight: 700; }
.mz-assign-new.mud-button-root { padding: 0 14px; font-weight: 700; }
.mz-assign-list { display: flex; flex-direction: column; gap: 12px; padding: 18px 22px 22px; }
.mz-assign-list-head { display: flex; align-items: center; gap: 10px; }
.mz-assign-list-head .mz-section-title { font-size: 14px !important; }
.mz-assign-count { font-size: 12px; }
.mz-assignment { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 14px 16px; border: 1px solid var(--mud-palette-lines-default); border-radius: 13px; background: var(--mud-palette-surface); }
.mz-assignment-confirm { border-color: transparent; background: var(--mz-bad-bg); }
.mz-assignment-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--mz-icon-bg); color: var(--mud-palette-primary); }
.mz-assignment-icon .mud-icon-root { font-size: 19px; }
.mz-assignment-role { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mz-assignment-name { font-size: 14px; font-weight: 700; }
.mz-assignment-grants { font-size: 12px; color: var(--mud-palette-text-secondary); }
.mz-assignment-period { flex: 1 1 220px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.mz-assignment-period > div { display: flex; flex-direction: column; gap: 2px; }
.mz-assignment-period span { font-size: 11px; color: var(--mud-palette-text-secondary); }
.mz-assignment-period b { font-weight: 600; }
.mz-assignment-period .mud-icon-root { font-size: 16px; flex-shrink: 0; }
.mz-assignment .mz-pill { padding: 4px 10px; }
.mz-assignment-ask { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.mz-ask-no, .mz-ask-yes { height: calc(32px - var(--mz-shrink)); border-radius: 8px; font-family: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.mz-ask-no { padding: 0 10px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); }
.mz-ask-yes { padding: 0 12px; border: 0; background: var(--mz-bad); color: #fff; font-weight: 700; }
.mz-ask-yes:disabled { opacity: .6; cursor: default; }
.mz-ask-sm { height: 28px; padding: 0 10px; border-radius: 7px; }
.mz-assign-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 16px; border: 1px dashed var(--mud-palette-lines-default); border-radius: 13px; text-align: center; font-size: 13px; color: var(--mud-palette-text-secondary); }
.mz-assign-empty .mz-tool-button.mud-button-root { height: calc(38px - var(--mz-shrink)); padding: 0 14px; border-radius: 10px; font-size: 13px; }
/* دسترسی تکمیلی: what a role grants is shown on, but locked. */
.mz-lock-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mud-palette-text-secondary); text-wrap: pretty; }
.mz-lock-note .mud-icon-root { font-size: 15px; flex-shrink: 0; }
.mz-grant-locked { cursor: default; }
.mz-grant-locked:hover { border-color: transparent; }
.mz-box.mz-box-locked { color: var(--mud-palette-primary); opacity: .55; }
.mz-lock-chip { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 2px 7px; border: 1px solid var(--mud-palette-lines-default); border-radius: 999px; background: var(--mz-subtle); font-size: 10.5px; font-weight: 600; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.mz-lock-chip .mud-icon-root { font-size: 12px; }
/* دسترسی به حوزهها */
.mz-hz { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.mz-hz-panel.mud-paper { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.mz-hz-head { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.mz-hz-title-row { display: flex; align-items: center; gap: 8px; }
.mz-hz-title-row .mz-section-title { font-size: 14px !important; }
.mz-hz-count, .mz-hz-hint { font-size: 12px; }
.mz-hz-head .mz-filter .mud-input.mud-input-outlined { height: calc(38px - var(--mz-shrink)); border-radius: 9px; font-size: 12.5px; }
.mz-hz-head .mz-filter .mud-input-outlined-border { border-radius: 9px; }
.mz-hz-search .mud-input.mud-input-outlined { background: var(--mz-subtle); }
.mz-hz-places { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.mz-hz-places > .mz-form-field { flex: 1 1 150px; min-width: 0; }
.mz-hz-places .mud-select-input-extended.mud-input-slot > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-hz-places .mud-placeholder-extended { font-size: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-hz-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.mz-hz-tools > .mz-form-field { flex: 1 1 180px; }
.mz-pick-all { height: calc(38px - var(--mz-shrink)); padding: 0 12px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--mud-palette-lines-default); border-radius: 9px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font-family: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.mz-pick-all:disabled { opacity: .45; cursor: default; }
/* A drawn checkbox: ticked, part-ticked (a dash) or empty. */
.mz-check { position: relative; width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid var(--mz-box-line); border-radius: 5px; }
.mz-check-on, .mz-check-part { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary); }
.mz-check-on::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 8px; border: solid var(--mud-palette-primary-text); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mz-check-part::after { content: ""; position: absolute; left: 4px; top: 6.5px; width: 7px; height: 2px; border-radius: 2px; background: var(--mud-palette-primary-text); }
.mz-hz-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-content: start; gap: 5px; min-height: 200px; max-height: 340px; padding: 8px; overflow: auto; }
.mz-hz-skeleton { border-radius: 9px; }
.mz-hz-pick { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1.5px solid var(--mud-palette-lines-default); border-radius: 9px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font-family: inherit; text-align: right; cursor: pointer; }
.mz-hz-pick-on { border-color: var(--mud-palette-primary); background: var(--mz-icon-bg); }
.mz-hz-pick-has { background: var(--mz-subtle); cursor: default; }
.mz-hz-pick-has .mz-check-on { border-color: var(--mz-box-line); background: var(--mz-box-line); }
.mz-hz-pick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mz-hz-code { font-size: 12.5px; font-weight: 800; letter-spacing: .5px; text-align: right; font-variant-numeric: tabular-nums; }
.mz-hz-code-off { color: var(--mud-palette-text-secondary); text-decoration: line-through; }
.mz-hz-note { font-size: 10px; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-hz-more { grid-column: 1 / -1; padding: 10px 12px; text-align: center; font-size: 12px; color: var(--mud-palette-text-secondary); }
.mz-hz-none { padding: 40px 12px; font-size: 12.5px; }
.mz-hz-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--mud-palette-lines-default); background: var(--mz-subtle); }
.mz-hz-sel { flex: 1; min-width: 140px; font-size: 12.5px; }
.mz-hz-btn.mud-button-root { height: calc(38px - var(--mz-shrink)); padding: 0 14px; font-weight: 400; }
.mz-hz-add.mud-button-root { height: calc(38px - var(--mz-shrink)); padding: 0 16px; border-radius: 9px; font-size: 13px; font-weight: 700; box-shadow: none; }
.mz-hz-groups { display: flex; flex-direction: column; gap: 10px; min-height: 240px; max-height: 520px; padding: 12px; overflow: auto; }
.mz-hz-group { border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.mz-hz-group-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--mz-subtle); }
.mz-hz-group-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mz-hz-group-name > b { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-hz-group-name > span { font-size: 11px; color: var(--mud-palette-text-secondary); }
.mz-hz-group-n { font-size: 11.5px; white-space: nowrap; }
.mz-hz-remove-all { height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--mz-bad); font-family: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.mz-hz-remove-all:hover { background: var(--mz-bad-bg); }
/* A building with many حوزه scrolls on its own, inside the list's scroll; the half row at the bottom shows there is more. */
.mz-hz-chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; max-height: 176px; padding: 10px; overflow-y: auto; overscroll-behavior: contain; }
.mz-hz-chip { display: inline-flex; align-items: center; gap: 4px; height: calc(30px - var(--mz-shrink)); padding-inline: 10px 4px; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; background: var(--mud-palette-surface); }
.mz-hz-chip-own { border-color: var(--mud-palette-primary); background: var(--mz-icon-bg); }
.mz-hz-chip-code { font-size: 12.5px; font-weight: 700; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.mz-hz-own { padding: 1px 6px; border-radius: 999px; background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); font-size: 10px; font-weight: 700; white-space: nowrap; }
.mz-hz-chip-x.mud-icon-button { width: 22px; height: 22px; padding: 0; border-radius: 6px; color: var(--mud-palette-text-secondary); }
.mz-hz-chip-x .mud-icon-root { font-size: 14px; }
.mz-hz-chip-x.mud-icon-button:hover { background: var(--mz-bad-bg); color: var(--mz-bad); }
.mz-hz-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 16px; border: 1px dashed var(--mud-palette-lines-default); border-radius: 12px; text-align: center; }
.mz-hz-empty > b { font-size: 13px; font-weight: 600; }
.mz-hz-empty > span { font-size: 12px; }
/* ── Bills (قبوض مالیاتی) ─────────────────────────────── */
.mz-tone-bad { --mz-tone: var(--mz-bad); --mz-tone-bg: var(--mz-bad-bg); }
.mz-pop-backdrop { position: fixed; inset: 0; z-index: 30; }
.mz-soon { padding: 1px 7px; border: 1px solid var(--mud-palette-lines-default); border-radius: 999px; background: var(--mz-subtle); color: var(--mud-palette-text-secondary); font-size: 10.5px; font-weight: 700; }
.mz-flip { transform: rotate(180deg); }
.mz-bills-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.mz-bills-heading { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.mz-bills-title { font-size: 20px; font-weight: 800; }
.mz-new-bill { position: relative; }
.mz-new-bill-btn { display: flex; align-items: center; gap: 10px; height: calc(44px - var(--mz-shrink)); padding: 0 18px 0 14px; border: 0; border-radius: 11px; background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px -10px var(--mud-palette-primary); }
.mz-new-bill-btn:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.mz-new-bill-btn .mud-icon-root { font-size: 19px; }
.mz-new-bill-sep { width: 1px; height: 20px; background: rgba(255, 255, 255, .35); }
.mz-new-bill-caret.mud-icon-root { transition: transform .15s; }
.mz-new-bill-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 31; width: 300px; max-width: calc(100vw - 48px); display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; background: var(--mud-palette-surface); box-shadow: 0 16px 40px rgba(0, 0, 0, .18); }
.mz-new-bill-option { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--mud-palette-text-primary); text-align: right; text-decoration: none; }
a.mz-new-bill-option:hover { background: var(--mz-subtle); text-decoration: none; color: var(--mud-palette-text-primary); }
.mz-new-bill-option-soon { opacity: .6; cursor: default; }
.mz-new-bill-icon { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--mz-icon-bg); color: var(--mud-palette-primary); }
.mz-new-bill-icon .mud-icon-root { font-size: 19px; }
.mz-new-bill-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mz-new-bill-label { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; }
.mz-new-bill-desc { font-size: 11.5px; line-height: 1.7; color: var(--mud-palette-text-secondary); }
.mz-bq.mud-paper { display: flex; flex-direction: column; }
.mz-bq-head { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; border-bottom: 1px solid var(--mud-palette-lines-default); font-size: 12px; }
.mz-bq-title { font-size: 16px; font-weight: 800; }
.mz-bq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 16px; padding: 18px 20px; }
.mz-form-field { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mz-form-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--mud-palette-text-secondary); }
.mz-form-help { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.mz-form-label-text { display: inline-flex; align-items: center; gap: 4px; }
.mz-required { color: var(--mz-bad); }
.mz-form-aside { margin-inline-start: auto; font-size: 11.5px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Inside a FormField the label sets the spacing, not MudBlazor's own input margin. */
.mz-form-field > .mud-input-control { margin: 0 !important; }
.mz-form-control { position: relative; display: flex; }
.mz-form-input { width: 100%; height: calc(40px - var(--mz-shrink)); padding: 0 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font-family: inherit; font-size: 13.5px; outline: none; }
.mz-form-input:focus { border-color: var(--mud-palette-primary); }
.mz-form-input:disabled { opacity: .5; cursor: not-allowed; }
.mz-form-input::placeholder { color: var(--mud-palette-text-secondary); opacity: .8; }
.mz-form-num { letter-spacing: .5px; text-align: right; font-variant-numeric: tabular-nums; }
.mz-form-num::placeholder { letter-spacing: normal; }
.mz-form-input-icon { padding-left: 40px; }
.mz-form-icon.mud-icon-root { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--mud-palette-text-secondary); pointer-events: none; }
.mz-bq-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--mud-palette-lines-default); border-radius: 0 0 14px 14px; background: var(--mz-subtle); }
.mz-bq-chips { flex: 1; min-width: 200px; display: flex; flex-wrap: wrap; gap: 6px; }
.mz-bq-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding-inline: 10px 4px; border-radius: 999px; background: var(--mz-icon-bg); color: var(--mud-palette-primary); font-size: 12px; font-weight: 600; }
.mz-bq-chip button { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.mz-bq-chip button:hover { background: rgba(var(--mud-palette-primary-rgb), .12); }
.mz-bq-chip .mud-icon-root { font-size: 13px; }
.mz-bq-reset.mud-button-root, .mz-bq-search.mud-button-root { height: calc(40px - var(--mz-shrink)); border-radius: 10px; font-size: 13.5px; box-shadow: none; }
.mz-bq-reset.mud-button-root { padding: 0 16px; border-color: var(--mud-palette-lines-default); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font-weight: 600; }
.mz-bq-search.mud-button-root { padding: 0 22px; font-weight: 700; }
.mz-results.mud-paper { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.mz-results-progress { position: absolute; top: 0; left: 0; right: 0; }
.mz-results-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--mud-palette-lines-default); font-size: 12.5px; }
.mz-results-count { flex: 1; font-size: 14px; font-weight: 700; }
.mz-results-sum { font-weight: 800; color: var(--mud-palette-text-primary); }
.mz-bill-cell-no { font-size: 13px; font-weight: 800; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.mz-bill-payer { display: flex; flex-direction: column; gap: 2px; }
.mz-bill-payer > b { max-width: 220px; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.mz-bill-payer > .mz-muted { font-size: 11.5px; text-align: right; font-variant-numeric: tabular-nums; }
.mz-bill-source { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.mud-table-body td.mud-table-cell.mz-bill-amount-cell { font-weight: 800; }
.mud-table-body .mud-table-row td.mud-table-cell.mz-bill-view:last-child { padding: 0 10px; text-align: center; }
/* Bill details: the user details sheet, a little wider. */
.mz-sheet-wide { width: min(520px, 100%); }
.mz-sheet-wide .mz-sheet-head { padding: 18px 22px; }
.mz-sheet-wide .mz-sheet-heading { gap: 6px; }
.mz-bill-kicker { font-size: 12px; }
.mz-bill-no { font-size: 20px; font-weight: 800; letter-spacing: 1.5px; text-align: right; font-variant-numeric: tabular-nums; }
.mz-bill-amount { font-size: 13px; }
.mz-bill-amount > b { font-size: 14px; font-weight: 800; color: var(--mud-palette-text-primary); }
.mz-sheet-wide .mz-sheet-tags { gap: 10px; }
.mz-sheet-wide .mz-sheet-tags .mz-pill { padding: 3px 10px; font-size: 12px; }
.mz-bill-body { padding: 18px 22px; gap: 16px; }
.mz-bill-section { gap: 8px; }
.mz-bill-section .mz-sheet-section-title { font-size: 12.5px; font-weight: 800; }
.mz-bill-section .mz-fields { gap: 12px 16px; }
.mz-bill-section .mz-field-value { line-height: 1.7; }
.mz-field-num { font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.mz-bill-items-head { display: flex; justify-content: space-between; font-size: 12px; }
.mz-bill-items { overflow: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; }
.mz-bill-items table { width: 100%; min-width: 440px; border-collapse: collapse; font-size: 12.5px; }
.mz-bill-items th { height: calc(34px - var(--mz-shrink)); padding: 0 8px; text-align: left; font-size: 11.5px; font-weight: 700; color: var(--mud-palette-text-secondary); background: var(--mz-subtle); border-bottom: 1px solid var(--mud-palette-lines-default); white-space: nowrap; }
.mz-bill-items td { height: calc(38px - var(--mz-shrink)); padding: 0 8px; text-align: left; border-bottom: 1px solid var(--mud-palette-table-lines); white-space: nowrap; }
.mz-bill-items th:first-child, .mz-bill-items td:first-child { text-align: right; }
.mz-bill-items td:first-child { font-weight: 600; }
.mz-bill-items td:last-child { font-weight: 800; }
.mz-bill-items tbody tr:last-child td { border-bottom: 0; }
.mz-bill-foot { justify-content: flex-end; }
/* ── Issue bill (صدور قبض › قبض نقدی) ─────────────────── */
/* The design's page padding is 16px 24px; the layout gives 24px all round. */
.mz-ib { display: flex; flex-wrap: nowrap; gap: 16px; align-items: flex-start; max-width: 1480px; margin: -8px 0; }
.mz-ib-main { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.mz-ib-card.mud-paper { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px; border-radius: 14px; }
.mz-ib-dim.mud-paper { opacity: .55; }
.mz-ib-step { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--mz-icon-bg); color: var(--mud-palette-primary); font-size: 12px; font-weight: 800; }
.mz-ib-step-title { font-size: 14px !important; font-weight: 800 !important; }
.mz-ib .mz-form-field { gap: 5px; }
.mz-ib .mz-form-label { height: 18px; line-height: 18px; font-size: 12px; }
/* Inputs: selects 38px with radius 10, the year/period and amount cells 34px with radius 8. */
.mz-ib .mud-input-outlined-border { border-radius: 10px; border-color: var(--mud-palette-lines-default); }
.mz-ib .mud-input { font-size: 13.5px; }
/* At 13.5px a line is 16px tall, so 11px above and below make the design's 38px. One line, cut with «…». */
.mz-ib-bill-grid div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense { padding-top: calc(11px - var(--mz-shrink) / 2); padding-bottom: calc(11px - var(--mz-shrink) / 2); white-space: nowrap; }
.mz-ib-bill-grid .mud-input-adornment .mud-icon-root { font-size: 20px; color: var(--mud-palette-text-secondary); }
.mz-ib-payer-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.mz-ib-type { flex: 0 1 340px; min-width: 240px; }
.mz-ib-id { flex: 1 1 380px; max-width: 560px; }
.mz-seg.mud-toggle-group { display: flex; gap: 4px; height: calc(40px - var(--mz-shrink)); padding: 3px; border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; background: var(--mz-subtle); box-sizing: border-box; }
.mz-seg .mud-toggle-item { flex: 1; min-height: 0; height: 100%; padding: 0; border: 0 !important; border-radius: 7px !important; font-size: 13px; font-weight: 500; color: var(--mud-palette-text-secondary); }
.mz-seg .mud-toggle-item-selected { background: var(--mz-segment) !important; color: var(--mud-palette-primary) !important; font-weight: 700; box-shadow: var(--mz-segment-shadow); }
.mz-ib-id-row { display: flex; gap: 8px; }
.mz-ib-id-row > .mud-input-control { flex: 1; min-width: 0; margin: 0 !important; }
.mz-ib-id-input .mud-input-outlined-border { border-width: 1.5px; border-radius: 11px; }
.mz-ib-id-input .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense { padding-top: calc(12px - var(--mz-shrink) / 2); padding-bottom: calc(12px - var(--mz-shrink) / 2); }
.mz-ib-id-input .mud-input > input.mud-input-root { direction: ltr; text-align: right; font-size: 15px; font-weight: 700; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.mz-ib-id-input .mud-input > input.mud-input-root::placeholder { font-weight: 400; }
.mz-ib-id-input .mud-input-adornment-text { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.mz-ib-id-locked .mud-input { background: var(--mz-subtle); border-radius: 11px; }
.mz-ib-id-locked .mud-input-outlined-border { border-color: var(--mz-good) !important; }
.mz-ib-id-locked .mud-input-adornment .mud-icon-button { width: 32px; height: 32px; border-radius: 8px; color: var(--mud-palette-text-secondary); }
.mz-ib-id-locked .mud-input-adornment .mud-icon-button:hover { background: var(--mz-bad-bg); color: var(--mz-bad); }
.mz-ib-id-locked .mud-input-adornment .mud-icon-root { font-size: 15px; }
.mz-ib-inquire.mud-button-root { flex-shrink: 0; height: calc(40px - var(--mz-shrink)); padding: 0 20px; gap: 8px; border-radius: 11px; font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: none; }
.mz-ib-inquire.mud-button-root:disabled { background: var(--mud-palette-primary) !important; color: var(--mud-palette-primary-text) !important; opacity: .5; }
.mz-ib-inquire-pending.mud-button-root { opacity: .6; }
.mz-ib-spin.mud-progress-circular { width: 16px !important; height: 16px !important; color: currentColor; }
.mz-ib-error.mud-typography { font-size: 12px; font-weight: 600; color: var(--mz-bad); }
.mz-ib-found.mud-paper { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 8px 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 11px; background: var(--mz-icon-bg); }
.mz-ib-found-icon.mud-avatar { width: 36px; height: 36px; border-radius: 10px; background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.mz-ib-found-icon .mud-icon-root { font-size: 19px; }
.mz-ib-found > .mud-stack { min-width: 200px; gap: 2px; }
.mz-ib-found-name.mud-typography { font-size: 15px; font-weight: 800; }
.mz-ib-found-chip.mud-chip { height: auto; margin: 0; padding: 2px 9px; gap: 5px; border-radius: 999px; background: var(--mud-palette-surface); color: var(--mz-good); font-size: 11.5px; font-weight: 700; }
.mz-ib-found-chip .mud-chip-icon { margin: 0; font-size: 11px; color: inherit; }
.mz-ib-found-meta { row-gap: 4px !important; column-gap: 14px !important; font-size: 12px; color: var(--mud-palette-text-secondary); }
.mz-ib-found-meta b { color: var(--mud-palette-text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.mz-ib-info-btn.mud-button-root { height: calc(34px - var(--mz-shrink)); padding: 0 14px; gap: 8px; border-color: var(--mud-palette-lines-default); border-radius: 10px; background: var(--mud-palette-surface); color: var(--mud-palette-primary); font-size: 13px; font-weight: 700; white-space: nowrap; }
.mz-ib-info-btn.mud-button-root:hover { border-color: var(--mud-palette-primary); background: var(--mud-palette-surface); }
.mz-ib-bill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 12px; }
/* The chosen واحد drawn over the select's own text: its code in bold primary, then the building and city. */
.mz-ib-hoze { position: relative; }
.mz-ib-hoze .mud-input-outlined-border { border-width: 1.5px; }
.mz-ib-hoze div.mud-input-slot { color: transparent; }
.mz-ib-hoze-value { position: absolute; top: 0; bottom: 0; right: 12px; left: 40px; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.mz-ib-hoze-value > b { flex-shrink: 0; font-size: 14px; font-weight: 800; letter-spacing: .5px; color: var(--mud-palette-primary); font-variant-numeric: tabular-nums; }
.mz-ib-hoze-value > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--mud-palette-text-secondary); }
.mz-ib-hoze-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mz-ib-hoze-item > b { flex-shrink: 0; font-size: 13px; font-weight: 700; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.mz-ib-hoze-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--mud-palette-text-secondary); }
/* The year/period rows: the design's table inside a 12px-rounded frame. */
.mz-ib-items.mud-table { border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; overflow: hidden; background: transparent; }
.mz-ib-items .mud-table-root { min-width: 820px; }
.mz-ib-items .mud-table-head .mud-table-cell { height: calc(32px - var(--mz-shrink)); padding: 0 6px; background: var(--mz-subtle); border-bottom: 1px solid var(--mud-palette-lines-default); font-size: 11.5px; font-weight: 700; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.mz-ib-items .mud-table-body .mud-table-cell { height: calc(44px - var(--mz-shrink)); padding: 0 6px; border-bottom: 1px solid var(--mud-palette-table-lines); vertical-align: middle; }
.mz-ib-items .mud-table-body .mud-table-row:hover { background: transparent; }
.mz-ib-items .mud-table-body .mz-ib-dup { background: var(--mz-bad-bg) !important; }
.mz-ib-items .mud-table-foot .mud-table-cell { height: calc(36px - var(--mz-shrink)); padding: 0 6px; background: var(--mz-subtle); border: 0; font-size: 12.5px; font-weight: 700; }
.mz-ib-items .mz-ib-col-n { width: 34px; text-align: center; }
.mz-ib-items .mz-ib-col-year { width: 110px; }
.mz-ib-items .mz-ib-col-period { width: 130px; }
.mz-ib-items .mz-ib-col-del { width: 42px; text-align: center; }
.mz-ib-items .mz-ib-col-amount, .mz-ib-items .mz-ib-col-sum { text-align: left; }
.mz-ib-items .mud-table-head .mz-ib-col-amount, .mz-ib-items .mud-table-head .mz-ib-col-sum { text-align: right; }
.mz-ib-items .mud-table-foot .mz-ib-col-n { position: relative; }
.mz-ib-foot-count { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); white-space: nowrap; }
.mz-ib-n { font-size: 12px; font-weight: 700; color: var(--mud-palette-text-secondary); }
.mz-ib-sum { font-size: 13px; font-weight: 800; white-space: nowrap; }
.mz-ib-foot-total { font-size: 13.5px; font-weight: 800; color: var(--mud-palette-primary); white-space: nowrap; }
.mz-ib-cell-input.mud-input-control { margin: 0 !important; }
.mz-ib-cell-input .mud-input { font-size: 13px; }
.mz-ib-cell-input .mud-input-outlined-border { border-radius: 8px; }
.mz-ib-cell-input .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
.mz-ib-cell-input div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense { padding-top: calc(9.5px - var(--mz-shrink) / 2); padding-bottom: calc(9.5px - var(--mz-shrink) / 2); }
.mz-ib-amount .mud-input > input.mud-input-root { direction: ltr; text-align: left; padding-left: 10px; padding-right: 10px; }
.mz-ib-del.mud-icon-button { width: 30px; height: 30px; padding: 0; border-radius: 8px; color: var(--mz-bad); }
.mz-ib-del.mud-icon-button:disabled { color: var(--mz-bad); opacity: .3; }
.mz-ib-add.mud-button-root { height: calc(34px - var(--mz-shrink)); padding: 0 14px; gap: 6px; border: 1px dashed var(--mud-palette-primary); border-radius: 10px; background: var(--mz-icon-bg); color: var(--mud-palette-primary); font-size: 13px; font-weight: 700; }
.mz-ib-add.mud-button-root:hover { background: var(--mz-icon-bg); }
.mz-ib-add .mud-button-icon-start { margin: 0; }
/* Summary: sticky beside the form when wide, under it when not. */
.mz-ib-aside.mud-paper { flex: 1 1 300px; max-width: 340px; position: sticky; top: 88px; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; }
.mz-ib-total { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; background: var(--mz-banner); color: #fff; }
.mz-ib-total-label { font-size: 12.5px; color: rgba(255, 255, 255, .8); }
.mz-ib-total-row { display: flex; align-items: baseline; gap: 8px; }
.mz-ib-total-value { font-size: 24px; font-weight: 800; letter-spacing: .5px; }
.mz-ib-total-unit { font-size: 13px; color: rgba(255, 255, 255, .8); }
.mz-ib-total-words { font-size: 11.5px; line-height: 1.8; color: rgba(255, 255, 255, .75); text-wrap: pretty; }
.mz-ib-break { gap: 7px !important; padding: 12px 18px; }
.mz-ib-break-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.mz-ib-break-label { color: var(--mud-palette-text-secondary); }
.mz-ib-break-value { font-weight: 700; }
.mz-ib-muted { color: var(--mud-palette-text-secondary); }
.mz-ib-checks { gap: 6px !important; padding: 10px 18px; border-top: 1px solid var(--mud-palette-lines-default); }
.mz-ib-checks-title.mud-typography { font-size: 12px; font-weight: 700; color: var(--mud-palette-text-secondary); }
.mz-ib-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.mz-ib-check-ok { color: var(--mud-palette-text-primary); }
.mz-ib-check-dot { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--mz-subtle); color: var(--mz-good); }
.mz-ib-check-ok .mz-ib-check-dot { background: var(--mz-good-bg); }
.mz-ib-check-dot .mud-icon-root { font-size: 12px; }
.mz-ib-actions { display: flex; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--mud-palette-lines-default); background: var(--mz-subtle); }
.mz-ib-back.mud-button-root { height: calc(40px - var(--mz-shrink)); padding: 0 18px; border-color: var(--mud-palette-lines-default); border-radius: 11px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font-size: 14px; font-weight: 600; }
.mz-ib-back.mud-button-root:hover { border-color: var(--mud-palette-primary); background: var(--mud-palette-surface); }
.mz-ib-issue.mud-button-root { flex: 1; height: calc(40px - var(--mz-shrink)); border-radius: 11px; font-size: 14.5px; font-weight: 800; box-shadow: none; }
.mz-ib-issue.mud-button-root:disabled { background: var(--mud-palette-primary) !important; color: var(--mud-palette-primary-text) !important; opacity: .5; }
@media (max-width: 1100px) {
.mz-ib { flex-wrap: wrap; }
.mz-ib-aside.mud-paper { position: static; max-width: none; }
}
/* Inquiry result: the user details sheet at the design's 460px. */
.mz-ib-sheet { width: min(460px, 100%); }
.mz-ib-sheet-icon { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--mz-banner); color: #fff; }
.mz-ib-sheet .mz-sheet-heading { gap: 4px; }
.mz-ib-sheet-kicker { font-size: 12px; }
.mz-ib-sheet-id { font-size: 13px; letter-spacing: 1px; text-align: right; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.mz-ib-sheet-body { gap: 18px; }
.mz-ib-sheet-fields { gap: 16px 18px; padding: 16px; }
.mz-ib-sheet-fields .mz-field-value { line-height: 1.8; }
.mz-ib-sheet-note { font-size: 11.5px; line-height: 1.9; color: var(--mud-palette-text-secondary); }
.mz-ib-sheet-foot { justify-content: flex-end; }
/* The bill-issued dialog. */
.mz-ib-done.mud-dialog { max-width: 460px; border: 1px solid var(--mud-palette-lines-default); border-radius: 18px; box-shadow: 0 24px 64px rgba(0, 0, 0, .28); overflow: hidden; }
.mz-ib-done .mud-dialog-content { padding: 0; }
.mz-ib-done-head { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 24px 20px; text-align: center; }
.mz-ib-done-ok { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--mz-good-bg); color: var(--mz-good); }
.mz-ib-done-ok .mud-icon-root { font-size: 30px; }
.mz-ib-done-title { font-size: 18px; font-weight: 800; }
.mz-ib-done-payer { font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.mz-ib-done-box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin: 0 24px; padding: 16px; border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; background: var(--mz-subtle); }
.mz-ib-done-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mz-ib-done-number { grid-column: 1 / -1; align-items: center; gap: 4px; }
.mz-ib-done-no { font-size: 22px; font-weight: 800; letter-spacing: 2px; color: var(--mud-palette-primary); font-variant-numeric: tabular-nums; }
.mz-ib-done-value { font-size: 13.5px; font-weight: 700; }
.mz-ib-done-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px 24px; }
.mz-ib-done-actions .mud-button-root { height: calc(44px - var(--mz-shrink)); border-radius: 11px; font-size: 13.5px; box-shadow: none; }
.mz-ib-done-same.mud-button-root { flex: 1 1 100%; gap: 8px; border-color: var(--mud-palette-primary); background: var(--mz-icon-bg); color: var(--mud-palette-primary); font-weight: 700; }
.mz-ib-done-same.mud-button-root:hover { background: var(--mz-icon-bg); }
.mz-ib-done-new.mud-button-root { flex: 1; min-width: 140px; border-color: var(--mud-palette-lines-default); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font-weight: 600; }
.mz-ib-done-list.mud-button-root { flex: 1; min-width: 140px; font-weight: 700; }
/* ── Login (AuthLayout) ───────────────────────────────── */
.mz-login { display: flex; min-height: 100vh; background: var(--mud-palette-background); }
.mz-login-main { flex: 1 1 440px; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; padding: 32px clamp(20px, 5vw, 64px); }
.mz-login-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 0; }
.mz-login-form { width: 100%; max-width: 400px; }
.mz-login-logo.mud-paper { width: 60px; height: 60px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--mud-palette-lines-default), 0 6px 18px rgba(0, 0, 0, .06); }
.mz-login-title { font-size: 26px !important; font-weight: 800 !important; line-height: 1.5 !important; }
/* FocusOnNavigate puts focus on the h1 for screen readers; no ring is needed there. */
.mz-login-title:focus { outline: none; }
.mz-login-lead { line-height: 1.9 !important; text-wrap: pretty; }
.mz-login-alert.mud-alert { border-radius: 12px; font-weight: 600; }
.mz-login-label { font-size: 13px !important; font-weight: 700 !important; }
.mz-login-field.mud-input-control { margin: 0 !important; }
.mz-login-field .mud-input.mud-input-outlined { height: 50px; border-radius: 12px; background: var(--mud-palette-surface); color: var(--mud-palette-text-secondary); }
.mz-login-field .mud-input-outlined-border { border-width: 1.5px; border-radius: 12px; }
.mz-login-field .mud-input.mud-input-outlined:focus-within { box-shadow: 0 0 0 4px rgba(var(--mud-palette-primary-rgb), .13); }
/* User names and passwords are Latin: typed left to right, but kept to the right edge like the label. */
.mz-login-field input { direction: ltr; text-align: right; font-size: 15px; color: var(--mud-palette-text-primary); }
/* MudBlazor pads the start side, which direction: ltr turns into the left; the text sits on the right. */
.mz-login-field .mud-input > input.mud-input-root-adorned-end { padding-right: 14px; }
.mz-login-caps { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--mz-warn); }
.mz-login-caps[hidden] { display: none; }
/* Password block: label and «فراموشی رمز عبور» on one row, the field under them. The link comes after the field in
the markup so Tab goes user name → password; the grid puts it back on the label's row. */
.mz-login-pass { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label forgot" "field field"; align-items: center; row-gap: 8px; }
.mz-login-pass-label { grid-area: label; }
.mz-login-pass-forgot { grid-area: forgot; }
.mz-login-pass-field { grid-area: field; }
.mz-login-pass-caps { grid-column: 1 / -1; }
.mz-login-remember.mud-input-control { margin: 0 !important; align-self: flex-start; }
.mz-login-submit.mud-button-root { height: 52px; border-radius: 12px; font-size: 15px; font-weight: 800; box-shadow: 0 8px 20px -8px var(--mud-palette-primary); }
.mz-login-submit.mud-button-root:hover { filter: brightness(1.08); }
/* Brand panel: grid and rings drawn behind the text, on the accent's banner colour. */
.mz-login-brand { flex: 1 1 440px; min-height: 100vh; position: relative; overflow: hidden; flex-direction: column; justify-content: space-between; padding: 48px clamp(28px, 5vw, 72px); background: var(--mz-banner); color: #fff; }
.mz-login-brand > * { position: relative; }
.mz-login-brand > .mz-login-grid, .mz-login-brand > .mz-login-ring { position: absolute; pointer-events: none; }
.mz-login-grid {
inset: 0;
background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%);
}
.mz-login-ring { border-radius: 50%; }
.mz-login-ring-lg { width: 520px; height: 520px; left: -180px; bottom: -200px; border: 1px solid rgba(255, 255, 255, .12); }
.mz-login-ring-sm { width: 360px; height: 360px; left: -100px; bottom: -120px; border: 1px solid rgba(255, 255, 255, .16); }
.mz-login-live { width: 8px; height: 8px; border-radius: 50%; background: #7fe0a8; box-shadow: 0 0 0 4px rgba(127, 224, 168, .2); }
.mz-login-faded { color: rgba(255, 255, 255, .8); }
.mz-login-pitch { max-width: 480px; }
.mz-login-headline { font-size: clamp(28px, 3.2vw, 40px) !important; font-weight: 800 !important; line-height: 1.55 !important; text-wrap: balance; }
.mz-login-rule { width: 56px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .55); }
/* ── Loading screen ───────────────────────────────────── */
/* Components/LoadingScreen.razor: covers the page while WebAssembly downloads. Its colours (--mz-load-*)
come from the app theme per mode and accent; js/loading.js fills the ring and removes it. */
.mz-loading {
position: fixed; inset: 0; z-index: 2000; overflow-y: auto;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px;
padding: 32px 20px; text-align: center;
background: var(--mz-load-bg); color: var(--mz-load-text);
transition: opacity .25s ease;
}
.mz-loading-done { opacity: 0; pointer-events: none; }
.mz-loading-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mz-loading-logo {
width: 76px; height: 76px; margin-bottom: 10px; border-radius: 18px; background: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .08);
}
.mz-loading-logo img { display: block; width: 60px; height: 60px; }
.mz-loading-title { font-size: 24px; font-weight: 800; }
.mz-loading-sub { max-width: 320px; font-size: 13px; line-height: 1.8; color: var(--mz-load-muted); text-wrap: pretty; }
.mz-loading-progress { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.mz-loading-ring { position: relative; width: 128px; height: 128px; }
/* Starts at the top and fills counter-clockwise, as the design does for right-to-left. */
.mz-loading-ring svg { display: block; width: 128px; height: 128px; transform: rotate(-90deg) scaleY(-1); }
.mz-loading-ring circle { fill: none; stroke-width: 8; stroke: var(--mz-load-track); }
.mz-loading-ring .mz-loading-arc { stroke: var(--mz-load-primary); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray .25s ease; }
.mz-loading-pct { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mz-loading-pct span { font-size: 28px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mz-loading-pct small, .mz-loading-step small { font-size: 11px; color: var(--mz-load-muted); }
.mz-loading-step { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; }
.mz-loading-step span { font-size: 14px; font-weight: 600; }
.mz-loading-step small { font-size: 12px; }
/* Before Blazor's first progress report: a short arc going round, no number. */
.mz-loading-waiting .mz-loading-ring .mz-loading-arc { stroke-dasharray: 25 75; transition: none; animation: mz-loading-spin 1.1s linear infinite; }
.mz-loading-waiting .mz-loading-pct { visibility: hidden; }
@keyframes mz-loading-spin { to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) {
.mz-loading-waiting .mz-loading-ring .mz-loading-arc { animation: none; }
}
.mz-loading-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mz-load-muted); }
.mz-loading-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }