html, body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ══════════════════════════════════════════════════════
   WMS Compact Mode — FluentUI-like density for MudBlazor
   ══════════════════════════════════════════════════════ */

/* ── Input fields: 36px height instead of 56px ── */
.mud-input.mud-input-outlined {
    margin-top: 0 !important;
}
.mud-input-control {
    margin-top: 0 !important;
}
/* Unified font size for all input controls */
.mud-input.mud-input-outlined .mud-input-slot,
.mud-input.mud-input-outlined input,
.mud-input.mud-input-outlined textarea,
.mud-input input,
.mud-input textarea,
.mud-input .mud-input-slot {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 0.875rem !important;
}

/* Unified height for every outlined control (TextField / Select / DatePicker
   / Autocomplete / NumericField / TimePicker). Selects and pickers set
   min-height via their own slot rules — textfields only had padding, so
   they looked a bit shorter. Force the same min-height everywhere. */
.mud-input.mud-input-outlined .mud-input-slot,
.mud-input.mud-input-outlined input,
.mud-input.mud-input-outlined textarea {
    min-height: 24px !important;
    box-sizing: content-box;
}
.mud-input.mud-input-outlined {
    min-height: 36px;
}
/* Label: always shrunk (above the field) to prevent overlap with value text */
.mud-input-label {
    font-size: 0.875rem !important;
}
.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-input-label-inputcontrol.mud-shrink {
    transform: translate(14px, -9px) scale(0.85) !important;
    background: var(--mud-palette-surface);
    padding: 0 4px;
}

/* ── MudPicker popover sizing ──
   MudBlazor 9.1 default `.mud-picker-popover-paper` has min-width:16px and
   overflow-x:hidden, so the popover inherits the trigger input's width — in a
   narrow MudItem (md=2 ≈ 150px) the calendar gets clipped to ~150×408.
   Force a calendar-fit min-width and unhide overflow. Same fix covers Dialog
   variant since it also uses .mud-picker-popover-paper as the inner paper. */
.mud-picker-popover-paper {
    min-width: 340px !important;
    width: max-content !important;
    max-width: 95vw !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}
.mud-overlay-content .mud-picker-popover-paper {
    width: auto !important;
}
.mud-picker-content {
    min-width: 320px !important;
}

/* ── Select: compact dropdown ── */
.mud-select .mud-input-slot {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: 24px !important;
    font-size: 0.875rem !important;
}
.mud-select .mud-input-adornment {
    margin-top: 0 !important;
}
.mud-list-item {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    min-height: 32px !important;
    font-size: 0.8125rem;
}

/* ── NumericField: same compact sizing ── */
.mud-input-control .mud-input-adornment {
    margin-top: 0 !important;
}

/* ── Buttons: 32px height ── */
.mud-button-root:not(.mud-icon-button):not(.mud-fab) {
    padding: 4px 12px !important;
    min-height: 32px !important;
    font-size: 0.8rem;
}
.mud-button-root.mud-button-filled,
.mud-button-root.mud-button-outlined {
    min-height: 32px !important;
}

/* ── Chips: compact ── */
.mud-chip {
    height: 24px !important;
    font-size: 0.75rem !important;
}
.mud-chip .mud-chip-content {
    padding: 0 8px !important;
}

/* ── Dialog: less padding ── */
.mud-dialog .mud-dialog-content {
    padding: 12px 20px !important;
}
.mud-dialog .mud-dialog-title {
    padding: 12px 20px 8px !important;
}
.mud-dialog .mud-dialog-actions {
    padding: 8px 20px 12px !important;
}

/* ── Table cells: already dense from MudTable Dense=true, make tighter ── */
.mud-table-cell {
    padding: 4px 8px !important;
    font-size: 0.8rem;
    text-align: left;
}
.mud-table-head .mud-table-cell {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 8px !important;
    text-align: left;
}
/* MudBlazor 9 wraps sortable headers in MudTableSortLabel (flex container).
   Pin its content to flex-start so headers don't drift right while data
   sits left in non-sortable cells. */
.mud-table-head .mud-table-sort-label {
    justify-content: flex-start;
}

/* ── DataGrid: compact rows ── */
.mud-table-row {
    height: auto !important;
}

/* ── Toolbar / AppBar items: compact ── */
.mud-toolbar {
    min-height: 36px !important;
    padding: 4px 8px !important;
}

/* ── Card: less padding ── */
.mud-card-content {
    padding: 12px !important;
}
.mud-card-header {
    padding: 8px 12px !important;
}
.mud-card-actions {
    padding: 4px 12px 8px !important;
}

/* ── Alert: compact ── */
.mud-alert {
    padding: 4px 12px !important;
    font-size: 0.8rem;
}

/* ── Tabs: compact ── */
.mud-tab {
    min-width: auto !important;
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
}

/* ── Grid spacing: tighter ── */
.mud-grid-spacing-xs-3 > .mud-grid-item {
    padding: 6px !important;
}

/* Dark mode preload — prevents flash of light theme on page load */
html.wms-dark-preload {
    background-color: #121212;
    color: #fff;
}

/* ── AppBar always full width over drawer ── */
.mud-appbar.mud-appbar-fixed-top {
    left: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    z-index: 1300;
}

/* ── Sidebar Drawer — flush with AppBar, no gap ──
   2026-05-17 visual audit: между AppBar (48px Dense fixed-top) и Drawer
   видна 1-2px щель — комбинация бэкграунда AppBar primary-green +
   Drawer.Variant=Persistent default border-top + elevation shadow.
   Жёстко прибиваем drawer к bottom-edge AppBar без зазоров. */
.wms-drawer {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: var(--mud-appbar-height, 48px) !important;
    height: calc(100vh - var(--mud-appbar-height, 48px)) !important;
    z-index: 1200;
    border-top: none !important;
    /* Доп. защита: если у MudDrawer.Variant=Persistent появится свой transform-origin, не сместит */
    transform-origin: top left;
}
.wms-drawer.mud-drawer--open,
.wms-drawer.mud-drawer-pos-left {
    top: var(--mud-appbar-height, 48px) !important;
}

/* Eliminate gap between AppBar and Drawer/Content */
.mud-appbar + .mud-drawer-container .mud-drawer {
    border-top: none !important;
}

.mud-layout .mud-main-content {
    margin-top: 0;
}

/* Remove any default spacing MudBlazor adds between appbar and drawer */
.mud-layout .mud-drawer-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* AppBar fixed-top: убираем border + elevation shadow, чтобы их «полоска»
   не выглядела как щель между AppBar и Drawer. Тонкая граница между ними
   и так читается из-за разных бэкграундов (зелёный AppBar / белый Drawer). */
.mud-appbar.mud-appbar-fixed-top {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* In dark mode AppBar and Drawer share #1E1E2E. The default elevation
   shadow falls onto the drawer's top edge and darkens it, which reads
   as a gap because there's no color contrast to mask it. Swap the drop
   shadow for a 1px highlight line so the transition is visible but no
   strip gets darkened. */
.mud-theme-dark .mud-appbar.mud-appbar-fixed-top,
html.mud-dark .mud-appbar.mud-appbar-fixed-top {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Drawer overlay — no gap on top */
.mud-drawer {
    border-top: none !important;
}

.wms-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.nav-drawer-header {
    flex-shrink: 0;
}

.nav-drawer-menu {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    padding-bottom: 80px; /* space for TabBar + last item fully visible */
}

.nav-drawer-menu::-webkit-scrollbar {
    width: 4px;
}

.nav-drawer-footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.nav-drawer-toggle {
    width: 100%;
    border-radius: 0 !important;
}

.nav-search-results {
    max-height: 200px;
    overflow-y: auto;
}

.nav-favorites .mud-nav-link {
    font-size: 0.82rem;
}

/* Drawer nav items — compact */
.wms-drawer .mud-nav-link {
    padding: 4px 16px !important;
    min-height: 32px !important;
    font-size: 0.82rem;
}

.wms-drawer .mud-navgroup .mud-nav-link {
    padding-left: 24px !important;
}

.wms-drawer .mud-navgroup-title {
    font-size: 0.82rem;
    font-weight: 600;
}

/* Active nav link highlight */
.wms-drawer .mud-nav-link:hover {
    background: var(--mud-palette-action-default-hover);
}

/* Mobile — drawer as overlay */
@media (max-width: 960px) {
    .wms-drawer {
        position: fixed !important;
        z-index: 1300;
    }
}

/* ── Compact tables ── */
.mud-table-cell {
    padding: 4px 8px !important;
}

/* ── KPI Cards ── */
.kpi-card {
    transition: transform 0.15s ease-in-out;
}
.kpi-card:hover {
    transform: scale(1.02);
}

/* ── Clickable rows ── */
.cursor-pointer {
    cursor: pointer;
}

/* ── ConfigurableMudTable (shared list table) ──
   Convention 2026-05-06: Dense + Bordered, FixedHeader/FixedFooter, full-page
   height with internal scroll, no footer checkbox in MultiSelection mode. */
.wms-no-footer-check tfoot tr td:first-child .mud-checkbox,
.wms-no-footer-check tfoot tr td:first-child input[type="checkbox"] {
    display: none !important;
}
.wms-cfg-table .mud-table-container {
    overflow: auto;
}

/* ── Tab Bar ── */
.wms-tab-bar {
    position: fixed;
    bottom: 0;
    left: var(--wms-drawer-width, 56px);
    right: 0;
    height: 40px;
    background: var(--mud-palette-surface);
    border-top: 2px solid var(--mud-palette-primary);
    display: flex;
    align-items: stretch;
    z-index: 1100;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
    transition: left 0.2s ease;
}

.wms-tab-list {
    display: flex;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    /* Hide scrollbar — visible 3px bar appeared on hover near the tab
       counter at the right edge and was visually distracting. Wheel +
       swipe scrolling still works. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wms-tab-list::-webkit-scrollbar {
    display: none;
}

.wms-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    min-width: 100px;
    max-width: 200px;
    cursor: pointer;
    border-right: 1px solid var(--mud-palette-lines-default);
    font-size: 0.78rem;
    white-space: nowrap;
    transition: background-color 0.15s, box-shadow 0.15s;
    user-select: none;
    position: relative;
}

/* No drawer — no first-tab offset needed */

.wms-tab:hover {
    background: var(--mud-palette-action-default-hover);
}

.wms-tab--active {
    background: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    font-weight: 600;
    box-shadow: inset 0 3px 0 var(--mud-palette-secondary);
}

.wms-tab--active .wms-tab__icon,
.wms-tab--active .wms-tab__close {
    color: var(--mud-palette-primary-text) !important;
}

.wms-tab__icon {
    flex-shrink: 0;
    font-size: 16px !important;
}

.wms-tab__title {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.wms-tab__close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.15s, background-color 0.15s;
    color: inherit;
}

.wms-tab__close:hover {
    opacity: 1;
    background: rgba(255,255,255,0.2);
}

.wms-tab-bar__info {
    display: flex;
    align-items: center;
    border-left: 1px solid var(--mud-palette-lines-default);
    padding: 0 4px;
    flex-shrink: 0;
}

/* Main content offset: top for fixed AppBar (48px Dense), bottom for tab bar
   (40px high fixed) + 16px buffer чтобы последний row контента не подлезал
   под TabBar (visual audit 2026-05-17: empty-state иконка/текст обрезались). */
.mud-main-content {
    padding-top: 48px !important;
    padding-bottom: 64px !important;
}

/* ── Compact toolbar on small screens ── */
@media (max-width: 960px) {
    .wms-tab-bar {
        height: 36px;
    }
}

/* ── Status badge hover tooltip ── */
.mud-chip:hover {
    opacity: 0.9;
}

/* ── Menu card headers ── */
.menu-card-header {
    padding: 8px 12px;
    color: white;
}
.menu-card-header--operations { background: #2E7D32; }
.menu-card-header--services { background: #0277BD; }
.menu-card-header--inbound { background: #1565C0; }
.menu-card-header--outbound { background: #E65100; }
.menu-card-header--warehouse { background: #6A1B9A; }
.menu-card-header--monitoring { background: #37474F; }
.menu-card-header--reports { background: #00838F; }
.menu-card-header--ai { background: #7B1FA2; }
.menu-card-header--references { background: #4E342E; }
.menu-card-header--admin { background: #263238; }

.menu-card-header .mud-icon-root,
.menu-card-header .mud-typography {
    color: white !important;
}

/* ── Login page ── */
.login-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 8vh;
    min-height: 100vh;
}

.login-card {
    width: 420px;
    max-width: 95vw;
    padding: 2rem;
    border-radius: 12px !important;
}

.login-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-logo {
    font-size: 3rem !important;
}

.login-field {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-field:focus-within {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.2);
}

.login-field__icon {
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: var(--mud-palette-text-secondary);
}

.login-input {
    flex: 1;
    padding: 14px 12px 14px 0;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    background: transparent;
    color: var(--mud-palette-text-primary);
    width: 100%;
    box-sizing: border-box;
}

.login-input::placeholder {
    color: var(--mud-palette-text-secondary);
}

.login-input--password {
    padding-right: 44px;
}

.login-field__toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    color: var(--mud-palette-text-secondary);
    transition: background-color 0.15s;
}

.login-field__toggle:hover {
    background: var(--mud-palette-action-default-hover);
}

.login-submit {
    width: 100%;
    padding: 14px;
    background: var(--mud-palette-primary);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, box-shadow 0.2s;
    margin-top: 8px;
}

.login-submit:hover {
    filter: brightness(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.login-submit:active {
    filter: brightness(0.95);
}

.login-submit:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ── Command Palette ── */
.cmd-palette {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1501;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 80px;
    pointer-events: none;
}

.cmd-palette__panel {
    width: 520px;
    max-width: 90vw;
    max-height: 50vh;
    display: flex;
    flex-direction: column;
    border-radius: 12px !important;
    overflow: hidden;
    pointer-events: auto;
}

.cmd-palette__input {
    padding: 8px 12px 4px;
}

.cmd-palette__results {
    overflow-y: auto;
    max-height: 320px;
}

.cmd-palette__results .mud-list {
    padding: 0 !important;
}

.cmd-palette__results .mud-list-item {
    min-height: 36px !important;
}

.cmd-palette__footer {
    padding: 6px 12px;
    text-align: center;
}

.cmd-palette__footer kbd {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.7rem;
    font-family: inherit;
}

/* ── Notification bell popover ── */
.notification-unread {
    background: rgba(var(--mud-palette-primary-rgb), 0.06) !important;
}

/* ── Favorites bar (legacy, kept for AppBar if needed) ── */
.wms-favorites-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid rgba(255,255,255,0.2);
}

.wms-favorites-bar__item {
    color: rgba(255,255,255,0.8) !important;
    transition: color 0.15s;
}

.wms-favorites-bar__item:hover {
    color: white !important;
}

/* ── Session timeout warning ── */
.wms-session-warning {
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    border-radius: 8px !important;
}

/* ── Responsive AppBar ── */
@media (max-width: 600px) {
    .appbar-brand {
        display: none;
    }

    .wms-favorites-bar {
        display: none;
    }

    .mud-appbar .mud-chip {
        display: none;
    }

    .mud-appbar .mud-menu:not(:last-child) {
        display: none;
    }

    /* Keep notification bell + user menu + theme toggle visible */
}

@media (max-width: 960px) {
    .cmd-palette__panel {
        width: 95vw;
    }
}

/* ── Tab transition ── */
.mud-main-content > div[aria-hidden="false"] {
    animation: wms-tab-fadein 0.15s ease-out;
}

@keyframes wms-tab-fadein {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── KPI Card tooltips ── */
.kpi-card .mud-tooltip-root {
    width: 100%;
}

/* ── Print styles ── */
@media print {
    .wms-tab-bar,
    .mud-appbar,
    .mud-drawer,
    .mud-snackbar-provider,
    .mud-dialog-provider,
    .mud-popover-provider,
    .no-print {
        display: none !important;
    }

    .mud-main-content {
        padding: 0 !important;
        margin: 0 !important;
        padding-bottom: 0 !important;
    }

    .mud-table {
        box-shadow: none !important;
    }

    .mud-paper {
        box-shadow: none !important;
        border: 1px solid #ddd;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    a[href]::after {
        content: none;
    }
}

/* ── Accessibility: Focus indicators ── */
:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.mud-button:focus-visible,
.mud-icon-button:focus-visible,
.mud-nav-link:focus-visible,
.wms-tab:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Screen reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ── Dark mode contrast — chip readability ── */
.mud-theme-dark .mud-chip-outlined { border-width: 1.5px; }
.mud-theme-dark .mud-chip { font-weight: 500; }

/* ── Responsive — tablet KPI cards ── */
@media (max-width: 1024px) {
    .kpi-card { padding: 12px !important; }
    .kpi-card .mud-typography-h4 { font-size: 1.5rem !important; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .live-dot,
    .kpi-value-flash {
        animation: none !important;
    }

    .kpi-card:hover {
        transform: none !important;
    }

    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ──────────────────────────────────────────────────────────────────
   Uniform table style across the app (UX request 2026-04-30)
   - Kill zebra-striping that some inline MudSimpleTable / MudDataGrid
     instances still set explicitly via Striped="true".
   - Add a thin row separator + outer border for every table the app
     renders (MudTable, MudSimpleTable, MudDataGrid).
   ConfigurableMudTable already opts into Bordered/no-Striped via its
   own defaults; this stylesheet covers the inline tables that bypass
   that wrapper. !important is intentional — overrides per-table
   props that were set in razor before this rule landed.
   ────────────────────────────────────────────────────────────────── */
.mud-table-striped tbody > tr:nth-of-type(even),
.mud-data-grid-striped tbody > tr:nth-of-type(even) {
    background-color: transparent !important;
}

.mud-table:not(.mud-table-bordered) > .mud-table-container > table,
.mud-data-grid > .mud-table-container > table {
    border: 1px solid var(--mud-palette-table-lines, rgba(0, 0, 0, .10));
}

.mud-table > .mud-table-container > table > tbody > tr > td,
.mud-table > .mud-table-container > table > thead > tr > th,
.mud-data-grid > .mud-table-container > table > tbody > tr > td,
.mud-data-grid > .mud-table-container > table > thead > tr > th {
    border-bottom: 1px solid var(--mud-palette-table-lines, rgba(0, 0, 0, .08));
}

/* ══════════════════════════════════════════════════════
   MudNumericField — compact 36px (match TextField) + proportional ▲▼.
   MudBlazor 9.1 real class is `.mud-input-numeric-spin` (position:absolute,
   right:0, top/bottom:0, justify-content:space-between). With our 36px
   input height, each button gets ~18px half — icons must shrink or the
   bottom arrow gets pushed off-center by overflowing into the input pad.
   Burned 2026-05-17 (was 56px-override, looked oversized).
   ══════════════════════════════════════════════════════ */

/* Right-pad input so the value doesn't run under the arrows */
.mud-input-control.mud-input-number-control .mud-input-slot,
.mud-input-control.mud-input-number-control input {
    padding-right: 24px !important;
}

/* Spin container — auto height (= sum of two buttons), centered vertically
   in the input row. Stock rule has top:0/bottom:0 which makes the container
   span the entire control INCLUDING label area, so the buttons end up at
   the very top (over the label) and very bottom (under the helper text).
   Override by collapsing height and centering. */
.mud-input-control.mud-input-number-control .mud-input-numeric-spin {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
    height: auto !important;
    padding: 0 !important;
    gap: 1px;
}

/* Spin buttons — fixed 16px × 22px slots. Override stock `.mud-icon-button`
   padding:12px and `.mud-button-root` size classes with !important + multi-class
   specificity so neither one wins. */
.mud-input-control.mud-input-number-control .mud-input-numeric-spin button,
.mud-input-control.mud-input-number-control .mud-input-numeric-spin button.mud-button-root,
.mud-input-control.mud-input-number-control .mud-input-numeric-spin button.mud-icon-button {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    flex: 0 0 16px !important;
}

/* ▲▼ glyph — 12px so it fits the 16px button with breathing room */
.mud-input-control.mud-input-number-control .mud-input-numeric-spin .mud-icon-root,
.mud-input-control.mud-input-number-control .mud-input-numeric-spin svg {
    width: 12px !important;
    height: 12px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

/* ══════════════════════════════════════════════════════
   WCAG AA color-contrast fixes (axe-core audit 2026-05-17)
   Theme.Secondary=#FF6F00 — оригинальный brand-оранжевый. Когда применён
   как ТЕКСТ на белой поверхности (MudText Color="Color.Secondary") даёт
   contrast 2.79 (нужно 4.5). Заменяем ТОЛЬКО для текстовых классов на
   Material Deep Orange 900 (#BF360A) — contrast 6.31 на белом, бренд
   читаем. Кнопки/AppBar с Secondary остаются исходным цветом.
   ══════════════════════════════════════════════════════ */
/* Light-only: яркий #FF6F00 secondary даёт 2.79 contrast на белом.
   В dark-теме MudBlazor уже использует Lighten(secondary), не трогаем —
   там оригинальный #FF6F00 на чёрном фоне читается с contrast 5.9+.
   Без html.mud-light scope правило раньше делало dark-secondary темно-красным. */
html:not(.mud-dark) .mud-secondary-text,
.mud-theme-light .mud-secondary-text {
    color: #BF360A !important;
}
/* Error text caption ("Offline") на светло-сером бэкграунде — только light.
   default #F44336 даёт 3.37 → используем Material Red 700 (#D32F2F) = 5.07 */
html:not(.mud-dark) .mud-error-text,
.mud-theme-light .mud-error-text {
    color: #D32F2F !important;
}
/* MudAlert Success: текст "Всё в порядке" имеет
   #00A344 на #E6F2EB (filled-success style) = 2.88 → Material Green 900 */
.mud-alert.mud-alert-success .mud-alert-message,
.mud-alert-filled-success .mud-alert-message,
.mud-alert.mud-alert-success {
    color: #1B5E20 !important;
}