/* ============================================================================
   MoneyHub — тема Tabulator в стилистике LiquidGlass.
   Грид намеренно НЕ использует backdrop-filter на строках: на 10k строк это
   съедает кадр. Стекло живёт в рамке-контейнере, тело таблицы — плотный фон.
   ============================================================================ */

.mh-grid-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: var(--mh-r-lg);
    overflow: hidden;
}

/* Грид виден по умолчанию: появление — анимацией на классе готовности, а не
   переходом из opacity:0. Иначе сбой JS или неприход события tableBuilt
   оставлял бы пользователя перед пустым прямоугольником. */
.mh-grid {
    min-height: 0;
}

.mh-grid.mh-grid--ready {
    animation: mh-fade-in var(--mh-dur) var(--mh-ease);
}

/* ------------------------------------------------------------- Контейнер */
.tabulator {
    background: transparent;
    border: none;
    font-family: var(--mh-font);
    font-size: var(--mh-fs-sm);
    color: var(--mh-text);
    overflow: hidden;
}

.tabulator[tabulator-layout="fitDataFill"] .tabulator-tableholder .tabulator-table {
    min-width: 100%;
}

/* Базовая тема Tabulator красит .tabulator-table в белый (#fff) и текст в #333.
   На тёмной теме это давало белую подложку под незакреплёнными колонками —
   строки выглядели выцветшими, а закреплённые (со своим фоном) читались нормально. */
.tabulator .tabulator-tableholder .tabulator-table,
.tabulator .tabulator-table {
    background: transparent;
    color: var(--mh-text);
}

/* ----------------------------------------------------------------- Шапка */
.tabulator .tabulator-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .05));
    border-bottom: 1px solid var(--mh-glass-brd-hi);
    color: var(--mh-text-2);
    font-weight: 600;
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
}

.tabulator .tabulator-header .tabulator-col {
    background: transparent;
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.tabulator .tabulator-header .tabulator-col:last-child {
    border-right: none;
}

.tabulator .tabulator-header .tabulator-col-content {
    padding: 7px 9px;
}

.tabulator .tabulator-header .tabulator-col-title {
    font-size: var(--mh-fs-xs);
    text-transform: uppercase;
    letter-spacing: .045em;
    font-weight: 650;
    color: var(--mh-text-2);
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
    background: rgba(255, 255, 255, .07);
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter .tabulator-arrow {
    border-bottom-color: var(--mh-text-3);
}

.tabulator .tabulator-header .tabulator-col[aria-sort="asc"] .tabulator-arrow,
.tabulator .tabulator-header .tabulator-col[aria-sort="desc"] .tabulator-arrow {
    border-bottom-color: var(--mh-accent);
}

.tabulator .tabulator-header .tabulator-col[aria-sort="asc"] .tabulator-col-title,
.tabulator .tabulator-header .tabulator-col[aria-sort="desc"] .tabulator-col-title {
    color: var(--mh-accent-soft);
}

/* Группы колонок */
.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
    border-top: 1px solid rgba(255, 255, 255, .07);
}

/* -------------------------------------------------------- Фильтры в шапке */
.tabulator .tabulator-header .tabulator-header-filter {
    padding: 0 0 5px;
}

.tabulator .tabulator-header .tabulator-header-filter input,
.tabulator .tabulator-header .tabulator-header-filter select,
.mh-hf-input {
    width: 100%;
    min-width: 0;
    height: 25px;
    padding: 2px 7px;
    font-family: var(--mh-font);
    font-size: var(--mh-fs-xs);
    font-weight: 400;
    color: var(--mh-text);
    background: rgba(0, 0, 0, .26);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--mh-r-xs);
    outline: none;
    text-transform: none;
    letter-spacing: 0;
}

.tabulator .tabulator-header .tabulator-header-filter input:focus,
.mh-hf-input:focus {
    border-color: var(--mh-accent);
    box-shadow: 0 0 0 2px var(--mh-accent-glow);
}

.tabulator .tabulator-header .tabulator-header-filter input::placeholder,
.mh-hf-input::placeholder {
    color: var(--mh-text-3);
    opacity: .7;
}

.mh-hf-range {
    display: flex;
    gap: 3px;
}

.mh-hf-range .mh-hf-input {
    width: 50%;
}

/* Список значений (list-фильтр) */
.tabulator-edit-list {
    background: rgba(12, 28, 52, .98);
    border: 1px solid var(--mh-glass-brd);
    border-radius: var(--mh-r-sm);
    box-shadow: var(--mh-sh-3);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 4px;
    max-height: 320px;
}

.tabulator-edit-list .tabulator-edit-list-item {
    color: var(--mh-text-2);
    padding: 5px 9px;
    border-radius: var(--mh-r-xs);
    font-size: var(--mh-fs-sm);
}

.tabulator-edit-list .tabulator-edit-list-item:hover,
.tabulator-edit-list .tabulator-edit-list-item.active,
.tabulator-edit-list .tabulator-edit-list-item.focused {
    background: rgba(76, 141, 255, .22);
    color: var(--mh-text);
}

/* ----------------------------------------------------------------- Строки */
.tabulator .tabulator-tableholder {
    background: rgba(8, 20, 38, .55);
}

.tabulator .tabulator-tableholder:focus {
    outline: none;
}

.tabulator .tabulator-row {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .045);
    min-height: 32px;
    color: var(--mh-text);
}

.tabulator .tabulator-row.tabulator-row-even {
    background: rgba(255, 255, 255, .022);
}

.tabulator .tabulator-row:hover {
    background: rgba(76, 141, 255, .1);
}

.tabulator .tabulator-row.tabulator-selected {
    background: rgba(76, 141, 255, .2);
}

.tabulator .tabulator-row.tabulator-selected:hover {
    background: rgba(76, 141, 255, .27);
}

/* Селектор намеренно длинный: базовая тема Tabulator задаёт свой цвет текста
   ячейки, и при равной специфичности выигрывает та таблица стилей, что подключена
   позже. Порядок подключения мы контролируем, но подстраховываемся специфичностью —
   иначе строки грида теряют контраст (были почти нечитаемы). */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell,
.tabulator .tabulator-row .tabulator-cell {
    padding: 5px 9px;
    color: var(--mh-text);
    border-right: 1px solid rgba(255, 255, 255, .04);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row,
.tabulator .tabulator-row.tabulator-selectable {
    color: var(--mh-text);
}

.tabulator .tabulator-row .tabulator-cell:last-child {
    border-right: none;
}

.tabulator .tabulator-row .tabulator-cell.tabulator-editing {
    border: 1px solid var(--mh-accent);
    padding: 4px 8px;
    background: rgba(0, 0, 0, .3);
}

.tabulator .tabulator-row .tabulator-cell.tabulator-editing input,
.tabulator .tabulator-row .tabulator-cell.tabulator-editing select {
    color: var(--mh-text);
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--mh-font);
    font-size: var(--mh-fs-sm);
    width: 100%;
}

/* Замороженные колонки — чтобы не «просвечивали» строки под ними */
.tabulator .tabulator-row .tabulator-frozen,
.tabulator .tabulator-header .tabulator-frozen {
    background: rgba(10, 24, 45, .97);
}

.tabulator .tabulator-header .tabulator-frozen {
    background: rgba(16, 34, 60, .98);
}

.tabulator .tabulator-row.tabulator-selected .tabulator-frozen {
    background: rgba(31, 60, 104, .98);
}

.tabulator .tabulator-frozen.tabulator-frozen-left {
    border-right: 1px solid var(--mh-glass-brd);
}

.tabulator .tabulator-frozen.tabulator-frozen-right {
    border-left: 1px solid var(--mh-glass-brd);
}

/* --------------------------------------------------------------- Группы */
.tabulator .tabulator-row.tabulator-group {
    background: linear-gradient(90deg, rgba(76, 141, 255, .18), rgba(76, 141, 255, .05));
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: var(--mh-text);
    font-weight: 600;
    padding: 6px 9px;
    min-height: 30px;
}

.tabulator .tabulator-row.tabulator-group:hover {
    background: linear-gradient(90deg, rgba(76, 141, 255, .26), rgba(76, 141, 255, .08));
}

.tabulator .tabulator-row.tabulator-group .tabulator-arrow {
    border-left-color: var(--mh-accent-soft);
}

.mh-grp {
    font-size: var(--mh-fs-sm);
}

.mh-grp__n {
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: var(--mh-r-pill);
    background: rgba(255, 255, 255, .12);
    font-size: var(--mh-fs-xs);
    font-weight: 600;
    color: var(--mh-text-2);
}

/* ----------------------------------------------------------- Итоги / низ */
.tabulator .tabulator-footer {
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .085));
    border-top: 1px solid var(--mh-glass-brd);
    color: var(--mh-text-2);
    font-size: var(--mh-fs-xs);
    padding: 4px 8px;
}

.tabulator .tabulator-footer .tabulator-page {
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--mh-glass-brd);
    border-radius: var(--mh-r-xs);
    color: var(--mh-text-2);
    padding: 3px 9px;
    margin: 0 2px;
    font-size: var(--mh-fs-xs);
}

.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
    background: rgba(76, 141, 255, .25);
    color: #fff;
}

.tabulator .tabulator-footer .tabulator-page.active {
    background: var(--mh-accent);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}

.tabulator .tabulator-footer .tabulator-page.disabled {
    opacity: .35;
}

.tabulator .tabulator-footer .tabulator-page-size {
    background: rgba(0, 0, 0, .3);
    color: var(--mh-text);
    border: 1px solid var(--mh-glass-brd);
    border-radius: var(--mh-r-xs);
    padding: 2px 6px;
}

/* Строка итогов. !important здесь оправдан: базовая тема Tabulator задаёт
   светлый фон холдера инлайновым по специфичности правилом, и без него итоги
   выглядят белой полосой поверх тёмного грида. */
.tabulator .tabulator-footer .tabulator-calcs-holder,
.tabulator .tabulator-calcs-holder {
    background: rgba(10, 24, 45, .96) !important;
    border-top: 1px solid var(--mh-glass-brd);
    border-bottom: none;
}

.tabulator .tabulator-calcs-holder .tabulator-row.tabulator-calcs,
.tabulator .tabulator-row.tabulator-calcs.tabulator-calcs-bottom,
.tabulator .tabulator-row.tabulator-calcs.tabulator-calcs-top,
.tabulator .tabulator-row.tabulator-calcs,
.tabulator .tabulator-calcs-holder .tabulator-row {
    background: rgba(30, 58, 100, .96) !important;
    font-weight: 650;
    border-bottom: none;
    color: var(--mh-text) !important;
}

.tabulator .tabulator-row.tabulator-calcs .tabulator-cell,
.tabulator .tabulator-calcs-holder .tabulator-row .tabulator-cell {
    color: var(--mh-text) !important;
}

/* Чекбоксы выбора строк — тот же язык, что у MhCheckbox, но нативным контролом:
   Tabulator рисует их сам, подменить разметку нельзя. */
.tabulator .tabulator-row .tabulator-cell input[type="checkbox"],
.tabulator .tabulator-header .tabulator-col input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    margin: 0;
    border: 1.5px solid var(--mh-glass-brd-hi);
    border-radius: 4px;
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}

.tabulator input[type="checkbox"]:checked {
    background: linear-gradient(150deg, var(--mh-accent), #2f6fe0);
    border-color: transparent;
}

.tabulator input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.tabulator input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--mh-accent);
    outline-offset: 1px;
}

/* ---------------------------------------------------------- Плейсхолдер */
.tabulator .tabulator-placeholder {
    background: transparent;
}

/* Подсветка строки не должна съедать читаемость текста */
.tabulator .tabulator-row.mh-row--danger .tabulator-cell,
.tabulator .tabulator-row.mh-row--warn .tabulator-cell,
.tabulator .tabulator-row.mh-row--ok .tabulator-cell,
.tabulator .tabulator-row.mh-row--info .tabulator-cell {
    color: var(--mh-text);
}

.tabulator .tabulator-placeholder .tabulator-placeholder-contents {
    color: var(--mh-text-3);
    font-size: var(--mh-fs-md);
    font-weight: 500;
}

/* ------------------------------------------------------ Ячейки-примитивы */
.mh-cell-num {
    font-family: var(--mh-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--mh-fs-xs);
}

.mh-cell-link {
    color: var(--mh-accent-soft);
    text-decoration: none;
}

.mh-cell-link:hover {
    text-decoration: underline;
}

.mh-cell-copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-family: var(--mh-font-mono);
    font-size: var(--mh-fs-xs);
    max-width: 100%;
}

.mh-cell-copy__txt {
    overflow: hidden;
    text-overflow: ellipsis;
}

.mh-cell-copy svg {
    flex: none;
    opacity: 0;
    color: var(--mh-text-3);
    transition: opacity var(--mh-dur-fast) var(--mh-ease);
}

.tabulator-row:hover .mh-cell-copy svg {
    opacity: 1;
}

.mh-cell-copy--done svg {
    opacity: 1;
    color: var(--mh-ok);
}

.mh-cell-img {
    height: 26px;
    width: auto;
    border-radius: var(--mh-r-xs);
    cursor: zoom-in;
    vertical-align: middle;
    border: 1px solid var(--mh-glass-brd);
}

.mh-cell-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mh-cell-bar {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    height: 16px;
    border-radius: var(--mh-r-pill);
    background: rgba(255, 255, 255, .09);
    overflow: hidden;
}

.mh-cell-bar i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--mh-accent), var(--mh-cyan));
}

.mh-cell-bar b {
    position: relative;
    margin: 0 auto;
    font-size: 10px;
    font-weight: 600;
    font-family: var(--mh-font-mono);
}

/* ------------------------------------------------- Подсветка строк (rules) */
.tabulator .tabulator-row.mh-row--ok {
    box-shadow: inset 3px 0 0 var(--mh-ok);
    background: rgba(52, 211, 153, .07);
}

.tabulator .tabulator-row.mh-row--warn {
    box-shadow: inset 3px 0 0 var(--mh-warn);
    background: rgba(251, 191, 36, .07);
}

.tabulator .tabulator-row.mh-row--danger {
    box-shadow: inset 3px 0 0 var(--mh-danger);
    background: rgba(248, 113, 113, .08);
}

.tabulator .tabulator-row.mh-row--info {
    box-shadow: inset 3px 0 0 var(--mh-info);
    background: rgba(96, 165, 250, .07);
}

.tabulator .tabulator-row.mh-row--muted {
    opacity: .55;
}

/* --------------------------------------- Подсветка отдельных ячеек (CellRules) */
.tabulator .tabulator-row .tabulator-cell.mh-cell--ok {
    color: var(--mh-ok);
    background: rgba(52, 211, 153, .10);
}

.tabulator .tabulator-row .tabulator-cell.mh-cell--warn {
    color: var(--mh-warn);
    background: rgba(251, 191, 36, .10);
}

.tabulator .tabulator-row .tabulator-cell.mh-cell--danger {
    color: var(--mh-danger);
    background: rgba(248, 113, 113, .10);
}

.tabulator .tabulator-row .tabulator-cell.mh-cell--info {
    color: var(--mh-info);
    background: rgba(96, 165, 250, .10);
}

.tabulator .tabulator-row .tabulator-cell.mh-cell--accent {
    color: var(--mh-accent-soft);
    background: rgba(76, 141, 255, .10);
}

.tabulator .tabulator-row .tabulator-cell.mh-cell--muted {
    color: var(--mh-text-3);
}

/* -------------------------------------------------------- Панель тулбара */
.mh-grid-bar {
    display: flex;
    align-items: center;
    gap: var(--mh-s-2);
    padding: var(--mh-s-2) var(--mh-s-3);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    flex-wrap: wrap;
    background: rgba(255, 255, 255, .03);
}

.mh-grid-bar__count {
    font-size: var(--mh-fs-xs);
    color: var(--mh-text-3);
    font-family: var(--mh-font-mono);
}

/* ------------------------------------------------------------ Компактность */
.mh-grid--dense .tabulator .tabulator-row {
    min-height: 26px;
}

.mh-grid--dense .tabulator .tabulator-row .tabulator-cell {
    padding: 2px 7px;
}

/* Мобильная адаптация: горизонтальный скролл только внутри грида */
@media (max-width: 720px) {
    .mh-grid-wrap {
        border-radius: var(--mh-r-md);
    }

    .tabulator .tabulator-row .tabulator-cell {
        padding: 5px 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mh-grid {
        transition: none;
    }
}