/* ============================================================
   MudBlazor → наш дизайн. Грузится ПІСЛЯ MudBlazor.min.css.
   Ціль: підтягнути Material-дефолти Mud до нашого щільного оригіналу
   (13px текст, радіуси 10–14px, тонкі хайрлайни var(--hair/--border),
   без UPPERCASE/ripple/важких тіней, шрифт Manrope). Палітру задає
   MudThemeProvider(AppTheme) — тут геометрія/щільність/оздоблення.
   УВАГА: клас .mud-ripple висить на САМІЙ кнопці — не можна display:none
   на .mud-ripple (сховає кнопку); гасимо лише дочірній ripple-шар.
   ============================================================ */

:root { --sh-card: 0 1px 2px rgba(27, 24, 20, .05); }

/* ── Body-шрифт. MudBlazor.min.css задає body{font-family:var(--mud-typography-default-family)},
      а ця змінна порожня (провайдер її не емитить) → браузер падав у Times (serif).
      Повертаємо наш шрифт ПІСЛЯ Mud-правила. ── */
body { font-family: var(--font-sans, 'Manrope', system-ui, -apple-system, sans-serif); }

/* ── Шрифт + базовый кегль (наш 13.5px вместо ~14–16 Material) ── */
.mud-typography,
.mud-input, .mud-input-control, .mud-input-slot,
.mud-button-root, .mud-button-label,
.mud-table, .mud-table-cell,
.mud-chip, .mud-select, .mud-list-item, .mud-tabs, .mud-nav-link, .mud-tooltip {
    font-family: var(--font-sans, "Manrope"), system-ui, -apple-system, sans-serif;
}
.mud-typography-body1, .mud-typography-body2,
.mud-input, .mud-input-control,
.mud-table-cell, .mud-select-input, .mud-list-item-text {
    font-size: 13px;
}

/* ── Кнопки: наш регистр/вес/радиус, плоско, без ripple-кляксы ── */
.mud-button-root {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 700;
    font-size: 13px;
    border-radius: 10px;
    min-height: 0;
}
.mud-button-filled, .mud-button-filled:hover, .mud-button-filled:focus { box-shadow: none; }
.mud-button-text, .mud-button-filled, .mud-button-outlined { padding: 9px 16px; }
.mud-button-root > .mud-ripple,
.mud-icon-button > .mud-ripple,
.mud-ripple > .mud-ripple-element { display: none !important; }

/* ── Поля ввода: наш хайрлайн/радиус (11px), плотнее ── */
.mud-input-outlined-border {
    border-color: var(--hair, var(--border, #E3DDCD)) !important;
    border-width: 1px !important;
    border-radius: 10px;
}
.mud-input.mud-input-outlined.mud-shrink .mud-input-outlined-border { border-width: 1.5px !important; }
/* Текст інпутів — ЛІВОРУЧ (не центрувати). */
.mud-input-slot,
.mud-input-root,
input.mud-input-slot { text-align: left; }

/* Висота поля. Mud-дефолт outlined = 18.5px вертикального паддингу → коробка ~53px,
   текст «плаває» тонкою смугою у напівпорожній коробці (наш оригінал ~42-44px) —
   звідси скарга «на всю строку місце виділено, а сам інпут не на все місце».
   Тиснемо паддинг СИМЕТРИЧНО (top=bottom), тож текст лишається по центру, а плаваючий
   лейбл/адорнменти не чіпаємо (longhand лише по вертикалі). Селектор повторює Mud-овий
   1-в-1 → та сама специфічність, але mud-overrides.css вантажиться ПІСЛЯ → виграє.
   .mud-input-root-margin-dense (10.5px, вища специфічність) лишається тіснішим — ок. */
.mud-input > input.mud-input-root-outlined,
div.mud-input-slot.mud-input-root-outlined {
    padding-top: 12.5px;
    padding-bottom: 12.5px;
}
.mud-input > textarea.mud-input-root-outlined {
    margin-top: 12.5px;
    padding-bottom: 12.5px;
}

/* ── Таблица/DataGrid: прозрачный фон, тесные строки, наш header (мелкий uppercase muted).
      Специфичность ≥ (0,3,0): Mud задаёт шрифт шапки через .mud-table-root .mud-table-head
      .mud-table-cell (subtitle2 14px/500), а паддинги — через .mud-table-dense * .mud-table-row
      .mud-table-cell; при равной специфичности выигрывает этот файл (грузится после Mud). ── */
.mud-table-root, .mud-table, .mud-data-grid, .mud-table-container { background: transparent; box-shadow: none; }
.mud-table .mud-table-row .mud-table-cell {
    font-size: 13px;
    padding: 10px 18px;
    border-color: var(--hair, var(--border, #E3DDCD));
}
.mud-table .mud-table-head .mud-table-cell {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-3, var(--ink-3, #8A8170));
    background: var(--card-2, var(--surface, #F3F0E8));
    padding: 11px 18px;
}
.mud-table .mud-table-row:hover > .mud-table-cell { background: var(--card-2, var(--surface, #F3F0E8)); }

/* Пейджер таблиць — mono 12 приглушений, як футер картки з дизайну */
.mud-table-pagination { border-top: none; }
.mud-table-pagination-caption,
.mud-table-pagination-select,
.mud-table-page-number-information,
.mud-table-pagination .mud-select .mud-input-root {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    color: var(--text-3, var(--ink-3, #8A8170));
}
.mud-table-pagination-toolbar { min-height: 0; padding-top: 2px; padding-bottom: 2px; }

/* Воронки-фільтри в шапці гріда: у дизайні шапка текстова — іконки притлумлюємо,
   повна видимість лише на hover шапки або коли фільтр активний */
.mud-table .mud-table-head .mud-icon-button {
    color: var(--text-4, var(--ink-4, #B8B09C));
    padding: 2px;
}
.mud-table .mud-table-head .mud-icon-button .mud-icon-root { font-size: 15px; width: 15px; height: 15px; }
.mud-table .mud-table-head .mud-icon-button:not(.filtered) { opacity: .4; }
.mud-table .mud-table-head .mud-icon-button:hover { opacity: 1; color: var(--text, var(--ink, #1B1814)); }
.mud-table .mud-table-head .filter-button.filtered { opacity: 1; color: var(--acc, var(--info, #2F5DAB)); }

/* Шапка MudDataGrid: іконки впритул до тексту (як у старому гриді), .ta-r — вправо */
.dir-grid .column-header { justify-content: flex-start; gap: 2px; }
.dir-grid .column-header .sortable-column-header { width: auto; }
.dir-grid th.ta-r .column-header { justify-content: flex-end; }

/* Сорт-іконка: 14px, завжди трохи видима (як трикутник старого грида), акцент при активній */
.dir-grid .column-header .sort-direction-icon { font-size: 14px; margin-left: 2px; opacity: .28; color: var(--text-3, var(--ink-3, #8A8170)); }
.dir-grid .column-header:hover .sort-direction-icon { opacity: .8; }
.dir-grid .column-header .sort-direction-icon.mud-direction-asc,
.dir-grid .column-header .sort-direction-icon.mud-direction-desc { opacity: 1; color: var(--acc, var(--info, #2F5DAB)); }
.dir-grid .column-header .mud-sort-index { display: none; }

/* ── MudDataGrid (.dir-grid — спільний DataGrid поверх MudDataGrid) ── */
/* Картка таблиці з дизайну: card-фон, hairline, r14; сам .mud-data-grid прозорий (правило вище). */
.dir-grid.mud-table {
    background: var(--card, #FFFFFF);
    border: 1px solid var(--hair, var(--border, #E3DDCD));
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--sh-card, 0 1px 2px rgba(27, 24, 20, .05));
}

/* Фіксована розкладка: ширини з colgroup (px + calc-частки), таблиця ніколи не ширша за
   контейнер — без горизонтального скролу на повній ширині. Довгий неразривний вміст
   (фіскальні номери тощо) обрізається ellipsis. На вузьких екранах — скрол контейнера
   від min-width, як у старого грида. */
.dir-grid .mud-table-root {
    width: 100%;
    table-layout: fixed;
    min-width: 760px;
}

.dir-grid .mud-table-body .mud-table-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dir-grid .mud-table-head .mud-table-cell { overflow: hidden; }

/* Шапка 1:1 з дизайну (10.5px, uppercase на surface) + sticky поверх рядків при скролі */
.dir-grid .mud-table-head .mud-table-cell {
    font-size: 10.5px;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* FixedHeader (mud-table-sticky-header): наш surface замість Mud-palette, без кутових радіусів */
.dir-grid.mud-table-sticky-header .mud-table-head .mud-table-cell {
    background: var(--card-2, var(--surface, #F3F0E8));
    border-radius: 0;
    top: 0;
}

/* Прогрес завантаження — під нашою шапкою (10.5px×1.4 + 2×11 pad ≈ 37px), не Material-59px.
   Специфічність (0,5,0) — щоб перебити Mud .mud-table-sticky-header * .mud-table-root … */
.dir-grid .mud-table-head .mud-table-loading,
.dir-grid.mud-table-sticky-header .mud-table-root .mud-table-head .mud-table-loading {
    position: sticky;
    top: 37px;
    background: transparent;
    z-index: 1;
}

/* Рядок 1:1 з дизайну: 13px, pad 10×18 вже дає загальне правило .mud-table вище;
   останній рядок — без нижньої межі (межу футера дає пейджер) */
.dir-grid .mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: none; }

/* Порожній стан (без Material-відступу внутрішнього div.my-3) */
.dir-grid .mud-table-empty-row {
    text-align: center;
    color: var(--text-3, var(--ink-3, #8A8170));
    font-size: 13px;
    padding: 48px 18px;
}

.dir-grid .mud-table-empty-row > div { margin: 0; }

/* Скелетон завантаження в порожньому рядку — без «порожньо»-паддингів, вирівнювання зліва */
.dir-grid .mud-table-empty-row:has(.dir-skeleton) {
    padding: 0;
    text-align: left;
}

/* Клікабельні рядки (DataGrid.RowClicked — навігація на деталь) */
.dir-grid tr.row-click { cursor: pointer; }

/* Мягко видалені рядки (RowCssClass="row-deleted") */
.dir-grid tr.row-deleted { opacity: .55; }
.dir-grid tr.row-deleted:hover { opacity: .85; }
.dir-grid tr.row-deleted .ci-name { text-decoration: line-through; text-decoration-color: var(--hair-strong, #CCC4AD); }

/* Вибраний Z-звіт у списку режиму каси (сторінка деталі точки) */
.dir-grid tr.css-z-selected > .mud-table-cell { background: var(--acc-soft, #DDE6F6); }

/* Рядки сторінки «Регіони»: підсвітка області з чернетки карти + притлумлення успадкованих
   (RowCssClass="reg-row-hl"/"reg-row-inh"; глобально — tr рендерить MudDataGrid) */
.dir-grid tr.reg-row-hl > .mud-table-cell { background: var(--acc-soft, #DDE6F6); }
.dir-grid tr.reg-row-inh > .mud-table-cell { background: color-mix(in srgb, var(--card-2, #F3F0E8) 55%, transparent); }
.dir-grid tr.reg-row-inh.reg-row-hl > .mud-table-cell { background: var(--acc-soft, #DDE6F6); }

/* Пейджер — компактний mono-футер картки з дизайну: «Рядків: N … ← 1–50 / N →»
   (селектор розміру сторінки лишаємо; підпис «Rows per page» і кнопки first/last — ховаємо) */
.dir-grid .mud-table-pagination { border-top: 1px solid var(--hair, var(--border, #E3DDCD)); overflow: visible; }
.dir-grid .mud-table-pagination-toolbar { height: auto; min-height: 0; padding: 5px 10px 5px 0; }
.dir-grid .mud-table-pagination-caption:empty { display: none; }
.dir-grid .mud-table-pagination-caption { padding-left: 6px; padding-right: 6px; }
.dir-grid .mud-table-pagination-select { margin: 0 4px; min-width: 44px; }
.dir-grid .mud-table-pagination-actions { margin-left: 4px; display: flex; align-items: center; }
.dir-grid .mud-table-pagination-actions .mud-icon-button { padding: 4px; }
.dir-grid .mud-table-pagination-actions .mud-icon-button:first-child,
.dir-grid .mud-table-pagination-actions .mud-icon-button:last-child { display: none; }

/* ── Чипы/бейджи: маленькая пилюля, наш кегль ── */
.mud-chip { border-radius: 999px; font-size: 11px; font-weight: 700; height: auto; min-height: 0; padding: 3px 10px; }

/* ── MudTabs → сегмент-таби дизайну: контейнер-пілюля на surface (r11, pad 3),
      активний пункт — темна пілюля ink зі світлим текстом (r8), без Material-слайдера ── */
.mud-tabs .mud-tabs-tabbar { background: transparent; }
.mud-tabs .mud-tabs-tabbar-inner { min-height: 0; }
.mud-tabs .mud-tabs-tabbar-wrapper {
    background: var(--card-2, var(--surface, #F3F0E8));
    border: 1px solid var(--hair, var(--border, #E3DDCD));
    border-radius: 11px;
    padding: 3px;
    gap: 2px;
}
.mud-tabs .mud-tab {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 16px;
    min-width: 0 !important; /* Mud ставить min-width:160px інлайном */
    min-height: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    border-radius: 8px;
    color: var(--text-3, var(--ink-3, #8A8170));
    transition: background .14s, color .14s;
}
.mud-tabs .mud-tab:hover { background: transparent; color: var(--text, var(--ink, #1B1814)); }
.mud-tabs .mud-tab.mud-tab-active {
    background: var(--ink-btn, var(--ink, #1B1814));
    color: var(--on-ink, #FFFFFF);
}
.mud-tabs .mud-tab-slider { display: none; }
/* Іконка таба (svg із класом mud-tab-icon-text) — 17px, в рядок із текстом */
.mud-tabs .mud-tab .mud-icon-root { font-size: 17px; width: 17px; height: 17px; margin: 0; }

/* ── Карточки/папки/оверлеи: наш радиус + мягкая тень (без Material-elevation) ── */
.mud-paper, .mud-card { border-radius: 14px; }
.mud-elevation-1, .mud-elevation-2, .mud-elevation-3, .mud-elevation-4 { box-shadow: var(--sh-card); }
.mud-dialog { border-radius: 18px; }
.mud-popover, .mud-snackbar { border-radius: 14px; }
.mud-dialog { box-shadow: 0 24px 60px rgba(20, 17, 12, .28); }
.mud-popover-provider .mud-popover, .mud-snackbar {
    box-shadow: 0 4px 14px rgba(27, 24, 20, .07);
}

/* ── Поповер фільтра колонки MudDataGrid (.column-filter-popup). Глобально: MudPopover
      телепортирует контент в корень страницы. De-Material убрал фон у .mud-popover —
      возвращаем карточную поверхность нашего дизайна. ── */
.mud-popover.column-filter-popup {
    min-width: 260px;
    max-width: 320px;
    background: var(--card);
    border: 1px solid var(--hair);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(22, 20, 15, .20), 0 2px 8px rgba(22, 20, 15, .10);
}

/* ── FocusOnNavigate фокусит h1 (tabindex=-1) — гасим видимый outline на программном фокусе ── */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible,
h1:focus, h1:focus-visible { outline: none !important; }