html, body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    /* Резервируем место под вертикальный скроллбар: его появление/исчезание
       (авто-фит гридов, диалоги) не должно менять ширину страницы — иначе
       весь layout дёргается влево-вправо. */
    scrollbar-gutter: stable;
}

/* ══════════════════════════════════════════════════════
   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;
}

body { margin: 0; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }

/* Полноэкранные диалоги карточек (приход/заказ): шапка фиксирована, содержимое скроллится */
.cab-dialog-fill { display: flex; flex-direction: column; overflow: hidden !important; min-height: 0; padding: 0; }
.cab-dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 12px; }
.cab-stat-tile { min-width: 150px; flex: 1 1 150px; }
.mud-tabs-panels { padding: 8px; }

/* Drawer / AppBar (Dense 48px), как в веб-портале */
.mud-appbar.mud-appbar-fixed-top { z-index: 1300; }
.cab-drawer { top: 48px !important; height: calc(100vh - 48px) !important; z-index: 1200; border-top: none !important; }
.cab-brand { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Диалоги карточек документов (П3): Large, фикс. высота; на xs — на весь экран */
.cab-doc-dialog { height: 90vh; max-height: 90vh; }
@media (max-width: 600px) {
    .cab-doc-dialog { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0; }
}
/* П4: страницы-списки по паттерну веб-портала. Фильтры авто-высоты сверху, таблица забирает остаток,
   скролл внутри таблицы. 100vh - AppBar Dense 48 - pa-4 (16+16). */
.wms-page-fill { height: calc(100vh - 80px); display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: hidden; }
.wms-fill { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.wms-grid-fill { flex: 1 1 auto; min-height: 0; display: flex !important; flex-direction: column; }
.wms-grid-fill > .mud-table-container { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: auto; }
.wms-grid-fill > .mud-table-pagination { flex: none; }
.wms-page-fill .mud-table-cell { padding: 4px 8px; }
@media (max-width: 599.98px) {
    .wms-page-fill { height: auto; overflow: visible; }
    .wms-fill { flex: none; overflow: visible; }
    .wms-grid-fill { display: block !important; }
    .wms-grid-fill > .mud-table-container { overflow: visible; }
}