/* ============================================================
   MudBlazor → наш дизайн. Грузится ПОСЛЕ MudBlazor.min.css.
   Цель: подтянуть Material-дефолты Mud к нашему ПЛОТНОМУ оригиналу
   (13.5px текст, радиусы 11–14px, тонкие хайрлайны var(--hair/--border),
   без UPPERCASE/ripple/тяжёлых теней, шрифт Manrope). Палитру задаёт
   MudThemeProvider(AppTheme) — здесь геометрия/плотность/отделка.
   ВНИМАНИЕ: класс .mud-ripple висит на САМОЙ кнопке — нельзя display:none
   на .mud-ripple (скроет кнопку); гасим только дочерний ripple-слой.
   ============================================================ */

:root { --sh-card: 0 1px 2px rgba(22, 20, 15, .06); }

/* ── Шрифт + базовый кегль (наш 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: 13.5px;
}

/* ── Кнопки: наш регистр/вес/радиус, плоско, без ripple-кляксы ── */
.mud-button-root {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 700;
    font-size: 13px;
    border-radius: 11px;
    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: 8px 14px; }
.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, #e6e3dc)) !important;
    border-width: 1px !important;
    border-radius: 11px;
}
.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) ── */
.mud-table-root, .mud-table, .mud-data-grid, .mud-table-container { background: transparent; box-shadow: none; }
.mud-table-cell {
    font-size: 13.5px;
    padding: 9px 14px;
    border-color: var(--hair, var(--border, #e6e3dc));
}
.mud-table-head .mud-table-cell {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-3, var(--ink-3, #8b867a));
}
.mud-table-row:hover > .mud-table-cell { background: var(--card-2, var(--surface, #f7f6f3)); }

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

/* ── Карточки/папки/оверлеи: наш радиус + мягкая тень (без 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, .mud-popover, .mud-snackbar { border-radius: 14px; }
.mud-dialog, .mud-popover-provider .mud-popover, .mud-snackbar {
    box-shadow: 0 8px 28px rgba(22, 20, 15, .14), 0 2px 6px rgba(22, 20, 15, .08);
}

/* ── Поповер фильтра грида (DataGrid). Глобально, т.к. MudPopover телепортирует контент в корень
      страницы — scoped .razor.css до него не достаёт, а класс dg-filter-pop доезжает.
      De-Material убрал фон у .mud-popover → контролы «висели» над таблицей; возвращаем карточную
      поверхность нашего дизайна и раскладку фильтра. ── */
.mud-popover.dg-filter-pop {
    padding: 14px;
    min-width: 240px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    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);
}

.dg-filter-pop .dg-filter-pop-title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--text-3);
    text-transform: uppercase;
}

.dg-filter-pop .dg-filter-op,
.dg-filter-pop .dg-filter-val { width: 100%; }

.dg-filter-pop .dg-filter-check-row {
    display: flex;
    align-items: center;
    padding: 1px 0;
}

.dg-filter-pop .dg-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid var(--hair);
}

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