/* ============================================================
   KsyGrid — Data Grid
   ============================================================ */

.ksy-grid {
    --kg-border:        var(--ksy-border, #e2e8f0);
    --kg-bg:            var(--ksy-card, #fff);
    /* Раньше сидели на var(--ksy-bg) — работало, пока фон страницы был сероватым.
       После того как страницу осветлили почти до белого (#fdfeff), шапка и чётные
       строки перестали отличаться от обычных белых — тон теперь считается от
       текста поверх фона грида, независимо от того, каким сделают фон страницы. */
    --kg-bg-header:     color-mix(in srgb, var(--ksy-text, #1e293b) 8%, var(--kg-bg));
    --kg-bg-alt:        color-mix(in srgb, var(--ksy-text, #1e293b) 4%, var(--kg-bg));
    --kg-bg-hover:      color-mix(in srgb, var(--kg-text) 3%, transparent);
    --kg-bg-selected:   color-mix(in srgb, var(--kg-accent) 8%, transparent);
    --kg-text:          var(--ksy-text, #1e293b);
    --kg-text-muted:    var(--ksy-text-muted, #64748b);
    --kg-accent:        var(--ksy-blue, #007aff);
    --kg-red:           var(--ksy-red, #e74c3c);
    --kg-radius:        var(--ksy-radius, 8px);
    --kg-cell-pad:      8px 14px;
    --kg-font-size:     12px;
    --kg-row-h:         44px;
    --kg-head-h:        40px;
    --kg-cols:          1fr;

    position: relative;
    display: flex;
    flex-direction: column;
    /* gap: 0 обязателен: в manager.css есть УТИЛИТА раскладки с тем же именем
       (`.ksy-grid { display: grid; gap: 24px }`, секция «GRID SYSTEM»). display компонент
       перебивал, а gap — нет, и внутри рамки каждой таблицы админки висели белые полосы
       между тулбаром, шапкой и пагинацией. Одноимённые классы — беда, но переименовывать
       утилиту дороже: она раскидана по всей админке. */
    gap: 0;
    border: 1px solid var(--kg-border);
    border-radius: var(--kg-radius);
    background: var(--kg-bg);
    font-size: var(--kg-font-size);
    color: var(--kg-text);
    font-family: var(--ksy-font, 'Manrope', sans-serif);
    /* overflow: hidden убран — он обрезал dropdown'ы KsySelect.
       border-radius задаётся явно на крайних дочерних элементах */
}

/* ── Toolbar ─────────────────────────────────────────────── */

.ksy-grid__toolbar {
    border-radius: var(--kg-radius) var(--kg-radius) 0 0; /* верхние углы грида */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--kg-border);
    background: var(--kg-bg);
    flex-shrink: 0;
}

/* ksy-input-wrap из manager.css — используем как базу */
.ksy-grid__search-wrap {
    flex: 1;
    max-width: 320px;
}

.ksy-grid__search {
    height: 34px;
    font-size: 13px;
}

.ksy-grid__toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.ksy-grid__export-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

/* ── Scroll container ─────────────────────────────────────── */

.ksy-grid__scroll {
    flex: 1;
    overflow-y: auto;
    /* auto, не hidden: если колонки шире экрана (часто на мобильных — узкий вьюпорт, много
       колонок), таблица иначе просто обрезалась без какой-либо возможности докрутить до
       конца. Раньше это чинили точечным переопределением на каждой такой странице отдельным
       CSS-правилом — почти нигде так и не сделали (см. /bank-statements), лучше сразу
       по умолчанию: auto показывает скролл ТОЛЬКО когда контент реально не помещается,
       на узких таблицах никакой лишней полосы не появляется. */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    min-height: 120px;
    position: relative;
    /* Если toolbar скрыт — scroll получает верхние скругления */
}

.ksy-grid__inner {
    min-width: 100%;
    width: max-content;
}

/* ── Header ───────────────────────────────────────────────── */

.ksy-grid__header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--kg-bg-header);
}

/* ── Rows ─────────────────────────────────────────────────── */

.ksy-grid__row {
    display: grid;
    grid-template-columns: var(--kg-cols);
}

.ksy-grid__row--header .ksy-grid__cell {
    height: var(--kg-head-h);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--kg-text-muted);
    background: var(--kg-bg-header);
    border-bottom: 1px solid var(--kg-border);
    user-select: none;
    position: relative;
}

.ksy-grid__body .ksy-grid__row {
    transition: background 0.12s;
}

.ksy-grid__body .ksy-grid__row:nth-child(even) .ksy-grid__cell {
    background: var(--kg-bg-alt);
}

/* overflow:hidden на .ksy-grid снят (см. комментарий у .ksy-grid выше) — при
   toolbar:false/pagination:false шапка и последняя строка становятся видимым
   верхним/нижним краем грида, и их квадратные углы вылезают за скруглённую
   границу контейнера. Тулбар/пагинация всегда в DOM (просто display:none), от
   :first-child/:last-child толку нет — поэтому радиус включается по модификатору,
   который выставляет grid.js, когда эти блоки реально не рендерятся. */
.ksy-grid--no-toolbar .ksy-grid__row--header .ksy-grid__cell:first-child { border-top-left-radius: var(--kg-radius); }
.ksy-grid--no-toolbar .ksy-grid__row--header .ksy-grid__cell:last-child { border-top-right-radius: var(--kg-radius); }
.ksy-grid--no-pagination .ksy-grid__body .ksy-grid__row:last-child .ksy-grid__cell:first-child { border-bottom-left-radius: var(--kg-radius); }
.ksy-grid--no-pagination .ksy-grid__body .ksy-grid__row:last-child .ksy-grid__cell:last-child { border-bottom-right-radius: var(--kg-radius); }

.ksy-grid__body .ksy-grid__row:hover .ksy-grid__cell {
    background: var(--kg-bg-hover);
}

.ksy-grid__body .ksy-grid__row.is-selected .ksy-grid__cell {
    background: var(--kg-bg-selected) !important;
}

/* ── Cells ────────────────────────────────────────────────── */

.ksy-grid__cell {
    display: flex;
    align-items: center;
    padding: var(--kg-cell-pad);
    /* min-height, а не height: содержимое выше строки (двух-трёхстрочные ячейки вроде
       «поставщик + склад + срок») раньше обрезалось ПОПОЛАМ — строка текста расползалась
       по границе строки и таблица выглядела кашей. Теперь строка растёт под содержимое. */
    min-height: var(--kg-row-h);
    border-right: 1px solid var(--kg-border);
    border-bottom: 1px solid var(--kg-border);
    overflow: hidden;
    min-width: 0;
    box-sizing: border-box;
    background: var(--kg-bg);
}

/* Денежные и числовые колонки прижимаются вправо — так принято в финансовых
   документах: разряды выстраиваются друг под другом и суммы легко сравнивать глазом.
   Ставится колонке через `cellClass` и `headerClass` (заголовок должен ехать вместе
   со значениями, иначе он повисает над пустотой). */
.ksy-grid__cell--money {
    justify-content: flex-end;
    text-align: right;
}

.ksy-grid__cell--money.ksy-grid__cell--header {
    /* У заголовка справа живёт иконка сортировки — она должна остаться за текстом. */
    justify-content: flex-end;
}

/* Длинный текст в ячейке НЕ переносится — обрезается многоточием: перенос в узкой колонке
   ломает высоту строки и соседние колонки. Нужен перенос — колонке задаётся
   `cellClass: 'ksy-grid__cell--wrap'` (см. ниже). */
.ksy-grid__body .ksy-grid__cell {
    white-space: nowrap;
}

.ksy-grid__body .ksy-grid__cell > * {
    min-width: 0;
    max-width: 100%;
}

.ksy-grid__body .ksy-grid__cell div,
.ksy-grid__body .ksy-grid__cell span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Осознанный перенос: теги, длинные перечисления */
.ksy-grid__body .ksy-grid__cell--wrap,
.ksy-grid__body .ksy-grid__cell--wrap * {
    white-space: normal;
}

.ksy-grid__cell:last-child {
    border-right: none;
}

.ksy-grid__cell--chk {
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.ksy-grid__cell-txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ksy-grid__empty-cell {
    color: var(--kg-text-muted);
}

/* ── Sorting ──────────────────────────────────────────────── */

.ksy-grid__cell--header.is-sortable {
    cursor: pointer;
}

.ksy-grid__cell--header.is-sortable:hover {
    background: color-mix(in srgb, var(--kg-text) 4%, transparent);
    color: var(--kg-text);
}

.ksy-grid__cell--header.is-sorted {
    color: var(--kg-text);
}

.ksy-grid__sort-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-left: 4px;
    color: var(--kg-accent);
}

/* ── Row drag handle ──────────────────────────────────────── */

.ksy-grid__cell--drag {
    justify-content: center;
    padding: 0;
    cursor: grab;
    flex-shrink: 0;
}

.ksy-grid__drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--kg-text-muted);
    opacity: 0;
    transition: opacity .15s;
}

.ksy-grid__row:hover .ksy-grid__drag-handle {
    opacity: 1;
}

.ksy-grid__row--dragging {
    background: var(--kg-bg-selected) !important;
    opacity: .9;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

.ksy-grid__row--drag-ghost {
    opacity: .4;
}

.ksy-grid__row--dragging * { pointer-events: none; }

/* ── Column resize ────────────────────────────────────────── */

.ksy-grid__resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    z-index: 1;
}

.ksy-grid__resize-handle::after {
    content: '';
    position: absolute;
    right: 1px;
    top: 20%;
    bottom: 20%;
    width: 2px;
    border-radius: 1px;
    background: var(--kg-border);
    opacity: 0;
    transition: opacity 0.15s;
}

.ksy-grid__cell--header:hover .ksy-grid__resize-handle::after {
    opacity: 1;
}

.ksy-grid-resizing * { cursor: col-resize !important; user-select: none !important; }

/* ── Checkbox ─────────────────────────────────────────────── */

.ksy-grid__chk {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--kg-accent);
    flex-shrink: 0;
}

/* ── Editable cell ────────────────────────────────────────── */

.ksy-grid__cell.is-editable {
    cursor: text;
}

.ksy-grid__cell.is-editable:hover {
    outline: 1px dashed var(--kg-border);
    outline-offset: -2px;
}

.ksy-grid__cell.is-editing {
    padding: 4px 6px;
    overflow: visible;
    z-index: 2;
}

.ksy-grid__editor {
    width: 100%;
    height: 100%;
    padding: 6px 10px;
    border: 2px solid var(--kg-accent) !important;
    border-radius: calc(var(--kg-radius) - 2px);
    font-size: inherit;
    font-family: inherit;
    background: var(--kg-bg);
    outline: none;
    box-sizing: border-box;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kg-accent) 18%, transparent);
}

/* Select — триггер в ячейке */
.ksy-grid__sel-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Select — floating panel в body */
.ksy-grid__sel-panel {
    position: fixed;
    z-index: 100000;
    background: var(--ksy-card, #fff);
    border: 1px solid var(--ksy-border, #e2e8f0);
    border-radius: var(--ksy-radius, 8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 5px;
    max-height: 280px;
    overflow-y: auto;
}

.ksy-grid__sel-option {
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ksy-text, #1e293b);
    cursor: pointer;
    transition: background .12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ksy-grid__sel-option:hover     { background: color-mix(in srgb, var(--ksy-text) 5%, transparent); color: var(--ksy-blue, #007aff); }
.ksy-grid__sel-option.is-active { background: color-mix(in srgb, var(--ksy-blue) 8%, transparent); color: var(--ksy-blue, #007aff); }

[data-theme-dark="true"] .ksy-grid__sel-panel {
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

/* ── Единый стиль редакторов в ячейке (как datepicker: одна синяя рамка) ── */

/* KsyNumber */
.ksy-grid__cell.is-editing .ksy-number {
    width: 100% !important;
    height: 100% !important;
    min-height: unset !important;
    margin: 0 !important;
    border: 2px solid var(--kg-accent) !important;
    border-radius: calc(var(--kg-radius) - 2px) !important;
}

.ksy-grid__cell.is-editing .ksy-number__btn {
    height: 100% !important;
    border: none !important;           /* убираем внутренние разделители */
}

.ksy-grid__cell.is-editing .ksy-number__input {
    height: 100% !important;
    font-size: var(--kg-font-size) !important;
    min-width: 40px;
    border: none !important;       /* убираем рамку ksy-grid__editor на внутреннем input */
    box-shadow: none !important;
    padding: 0 6px !important;
}

/* KsySelect */
.ksy-grid__cell.is-editing .ksy-select {
    width: 100% !important;
    height: 100% !important;
    min-height: unset !important;
    margin: 0 !important;
    border: 2px solid var(--kg-accent) !important;
    border-radius: calc(var(--kg-radius) - 2px) !important;
    outline: none !important;
    box-shadow: none !important;
}

.ksy-grid__cell.is-editing .ksy-select__trigger {
    height: 100% !important;
    min-height: unset !important;
    padding: 0 10px !important;
    font-size: var(--kg-font-size) !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;           /* убираем внутреннюю рамку триггера */
}

/* KsyDatePicker в ячейке-редакторе */
.ksy-grid__editor--date {
    cursor: pointer;
}

/* ── Overlays ─────────────────────────────────────────────── */

.ksy-grid__overlay {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: color-mix(in srgb, var(--kg-bg) 88%, transparent);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 10;
    color: var(--kg-text-muted);
    font-size: 14px;
}

/* Лоадер — используем KsyLoader через .ksy-grid__loader-wrap.
   Размер задаём здесь, KsyLoader добавляет spinner через ::after */
.ksy-grid__loader-wrap {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Pagination ───────────────────────────────────────────── */

.ksy-grid__pagination {
    border-radius: 0 0 var(--kg-radius) var(--kg-radius); /* нижние углы грида */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-top: 1px solid var(--kg-border);
    background: var(--kg-bg);
    flex-shrink: 0;
    /* Без flex-wrap — всё в одну строку */
}

.ksy-grid__page-info {
    flex: 1;  /* занимает оставшееся место слева */
    font-size: 12px;
    color: var(--kg-text-muted);
    white-space: nowrap;
}

.ksy-grid__page-btns { flex-shrink: 0; }

/* ksy-pagination из admin.css — компактная версия для грида (база у нас 34px;
   в kam.ru 30px стали базой в manager.css и этот блок там убран). */
.ksy-grid__pagination .ksy-pagination { gap: 4px; }
.ksy-grid__pagination .ksy-pagination__item {
    width: 30px;
    height: 30px;
    font-size: 12px;
}
.ksy-grid__pagination .ksy-pagination__prev,
.ksy-grid__pagination .ksy-pagination__next { padding: 0 6px; width: auto; }

/* Size selector — KsySelect компактный */
.ksy-grid__size-wrap { flex-shrink: 0; }
.ksy-grid__size-wrap .ksy-select { margin-bottom: 0 !important; }
.ksy-grid__size-wrap .ksy-select__trigger { height: 30px !important; min-height: unset !important; font-size: 12px !important; }
.ksy-grid__size-wrap .ksy-select__dropdown { min-width: 100px; }

@media (max-width: 768px) {
    .ksy-grid__pagination { flex-wrap: wrap; }
    .ksy-grid__page-info  { width: 100%; flex: none; }
}

/* ── Context menu ─────────────────────────────────────────── */

/* Меню аппендится в body — НЕ наследует --kg-* переменные.
   Используем глобальные переменные админки напрямую. */
.ksy-grid-ctx {
    position: fixed;
    background: var(--ksy-card, #ffffff);
    border: 1px solid var(--ksy-border, #e2e8f0);
    border-radius: var(--kg-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    min-width: 180px;
    padding: 5px;
    z-index: 100000;
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
    transform-origin: top left;
    transition: opacity 0.12s, transform 0.12s;
}

.ksy-grid-ctx.is-open {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.ksy-grid-ctx__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
    color: var(--ksy-text, #1e293b);
}

.ksy-grid-ctx__item:hover {
    background: color-mix(in srgb, var(--ksy-text) 5%, transparent);
    color: var(--ksy-blue, #007aff);
}

.ksy-grid-ctx__item.is-danger { color: var(--ksy-red, #e74c3c); }
.ksy-grid-ctx__item.is-danger:hover { background: color-mix(in srgb, var(--ksy-red) 7%, transparent); color: var(--ksy-red, #e74c3c); }
.ksy-grid-ctx__item.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.ksy-grid-ctx__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--ksy-text-muted, #64748b);
}
.ksy-grid-ctx__item.is-danger .ksy-grid-ctx__icon { color: var(--ksy-red, #e74c3c); }

.ksy-grid-ctx__sep {
    height: 1px;
    background: var(--ksy-border, #e2e8f0);
    margin: 4px 0;
}

/* ── Scrollbar ────────────────────────────────────────────── */

.ksy-grid__scroll::-webkit-scrollbar { width: 7px; height: 7px; }
.ksy-grid__scroll::-webkit-scrollbar-track { background: transparent; }
.ksy-grid__scroll::-webkit-scrollbar-thumb { background: var(--kg-border); border-radius: 4px; }
.ksy-grid__scroll::-webkit-scrollbar-thumb:hover { background: var(--kg-text-muted); }

/* ── Row Detail / Expand ──────────────────────────────────── */

/* Кнопка раскрытия */
.ksy-grid__cell--expand {
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.ksy-grid__expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--kg-text-muted);
    transition: background .12s, color .12s;
}

.ksy-grid__expand-btn:hover { background: color-mix(in srgb, var(--kg-text) 7%, transparent); color: var(--kg-accent); }

.ksy-grid__expand-btn svg {
    transition: transform .2s ease;
    flex-shrink: 0;
}

.ksy-grid__expand-btn.is-open svg { transform: rotate(90deg); }

/* Detail row — span всех колонок */
.ksy-grid__detail-row {
    grid-column: 1 / -1;
    display: none;
    background: var(--kg-bg);
    border-bottom: 1px solid var(--kg-border);
}

.ksy-grid__detail-row.is-expanded {
    display: block;
    animation: ksy-detail-in .2s ease;
}

@keyframes ksy-detail-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ksy-grid__detail-inner {
    padding: 20px 24px;
}

.ksy-grid__detail-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

/* ── 1. Column pinning ────────────────────────────────────── */

.ksy-grid__cell.is-pinned-left {
    position: sticky;
    z-index: 1;
    background: var(--kg-bg);    /* фон чтобы не просвечивали ячейки при скролле */
}

.ksy-grid__row--header .ksy-grid__cell.is-pinned-left {
    z-index: 3;                  /* выше sticky header + выше обычных pinned cells */
    background: var(--kg-bg-header);
}

/* Тень-разделитель после последней pinned колонки */
.ksy-grid__cell.is-pinned-left.is-last-pinned {
    border-right: 2px solid var(--kg-border);
    box-shadow: 2px 0 6px rgba(0,0,0,.06);
}

/* --kg-bg-alt/hover/selected в тёмной теме — полупрозрачные (тонкая подсветка поверх карточки,
   см. :root тёмного блока), для обычной ячейки это ОК: под ней всегда сплошной --kg-bg.
   У sticky pinned-ячейки под ней при горизонтальном скролле — не фон таблицы, а сами
   проскроллившие мимо соседние ячейки: полупрозрачный фон просвечивал их текстом.
   linear-gradient(...), var(--kg-bg) — тот же тон, но уже непрозрачный (сплошной слой
   --kg-bg снизу, поверх него тот же полупрозрачный тон, браузер сводит в один непрозрачный
   цвет один раз при отрисовке САМОЙ ячейки — не зависит от того, что под ней при скролле). */
.ksy-grid__body .ksy-grid__row:nth-child(even) .ksy-grid__cell.is-pinned-left {
    background: linear-gradient(var(--kg-bg-alt), var(--kg-bg-alt)), var(--kg-bg);
}

.ksy-grid__body .ksy-grid__row:hover .ksy-grid__cell.is-pinned-left {
    background: linear-gradient(var(--kg-bg-hover), var(--kg-bg-hover)), var(--kg-bg);
}

.ksy-grid__body .ksy-grid__row.is-selected .ksy-grid__cell.is-pinned-left {
    background: linear-gradient(var(--kg-bg-selected), var(--kg-bg-selected)), var(--kg-bg) !important;
}

/* Зеркально для pinned: 'right' (напр. колонка действий, всегда видна без горизонтального
   скролла) — те же правила, только сторона и порядок последней/первой колонки. */
.ksy-grid__cell.is-pinned-right {
    position: sticky;
    z-index: 1;
    background: var(--kg-bg);
}

.ksy-grid__row--header .ksy-grid__cell.is-pinned-right {
    z-index: 3;
    background: var(--kg-bg-header);
}

.ksy-grid__cell.is-pinned-right.is-first-pinned-right {
    border-left: 2px solid var(--kg-border);
    box-shadow: -2px 0 6px rgba(0,0,0,.06);
}

.ksy-grid__body .ksy-grid__row:nth-child(even) .ksy-grid__cell.is-pinned-right {
    background: linear-gradient(var(--kg-bg-alt), var(--kg-bg-alt)), var(--kg-bg);
}

.ksy-grid__body .ksy-grid__row:hover .ksy-grid__cell.is-pinned-right {
    background: linear-gradient(var(--kg-bg-hover), var(--kg-bg-hover)), var(--kg-bg);
}

.ksy-grid__body .ksy-grid__row.is-selected .ksy-grid__cell.is-pinned-right {
    background: linear-gradient(var(--kg-bg-selected), var(--kg-bg-selected)), var(--kg-bg) !important;
}

/* ── 2. Column visibility toggle ─────────────────────────── */

.ksy-grid__col-toggle-wrap { position: relative; }

.ksy-grid__col-panel {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--ksy-card, #fff);
    border: 1px solid var(--ksy-border, #e2e8f0);
    border-radius: var(--ksy-radius, 8px);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    min-width: 180px;
    padding: 8px;
    z-index: 10000;
}

.ksy-grid__col-panel.is-open { display: block; }

.ksy-grid__col-check {
    display: flex;
    align-items: center;
    gap: 0;   /* ksy-checkbox уже задаёт gap */
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: background .12s;
}

.ksy-grid__col-check:hover { background: color-mix(in srgb, var(--ksy-text) 5%, transparent); }

.ksy-grid__col-check-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ksy-text, #1e293b);
    margin-left: 4px;
}

/* ── 3. Column filters row ────────────────────────────────── */

.ksy-grid__row--filters { background: var(--kg-bg-header); border-bottom: 1px solid var(--kg-border); }

.ksy-grid__cell--filter        { padding: 4px 6px; height: 36px; }
.ksy-grid__cell--filter-select,
.ksy-grid__cell--filter-badges { padding: 4px 6px; height: 36px; }
.ksy-grid__cell--filter-date   { height: auto; min-height: 36px; padding: 4px 6px; }
.ksy-grid__cell--filter-empty  { height: 36px; }

.ksy-grid__filter-input {
    width: 100%;
    height: 26px;
    padding: 0 8px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
}

/* KsySelect в строке фильтров — компактный */
.ksy-grid__cell--filter .ksy-select,
.ksy-grid__cell--filter-select .ksy-select,
.ksy-grid__cell--filter-badges .ksy-select {
    margin: 0 !important;
    width: 100% !important;
}

.ksy-grid__cell--filter .ksy-select__trigger,
.ksy-grid__cell--filter-select .ksy-select__trigger,
.ksy-grid__cell--filter-badges .ksy-select__trigger {
    height: 26px !important;
    min-height: unset !important;
    font-size: 12px !important;
    padding: 0 8px !important;
}

/* Date range — один инпут, KsyDatePicker mode:range */
.ksy-grid__filter-date-range {
    width: 100%;
    cursor: pointer;
}

/* ── 4. Summary row ───────────────────────────────────────── */

.ksy-grid__summary { border-top: 2px solid var(--kg-border); position: sticky; bottom: 0; z-index: 1; }

.ksy-grid__row--summary .ksy-grid__cell {
    background: var(--kg-bg-header);
    font-weight: 700;
    font-size: 12px;
    color: var(--ksy-text, #1e293b);
    height: 36px;
}

.ksy-grid__row--summary .ksy-grid__cell.is-pinned-left {
    background: var(--kg-bg-header);
    z-index: 3;
}

.ksy-grid__summary-val { color: var(--kg-accent); }

/* ── 5. Keyboard navigation — focused cell ────────────────── */

/* Отключено: синяя рамка при клике на ячейку не нужна */
/*.ksy-grid__cell.is-focused {
    outline: 2px solid var(--kg-accent);
    outline-offset: -2px;
}*/

/* Sort number badge for multi-sort */
.ksy-grid__sort-num {
    font-size: 9px;
    font-weight: 800;
    color: var(--kg-accent);
    line-height: 1;
}

/* ── Dark theme ───────────────────────────────────────────── */

[data-theme-dark="true"] .ksy-grid {
    --kg-bg:          var(--ksy-card);
    --kg-bg-header:   var(--ksy-bg);
    --kg-bg-alt:      rgba(255,255,255,.02);
    --kg-bg-hover:    rgba(255,255,255,.04);
    --kg-bg-selected: color-mix(in srgb, var(--kg-accent) 18%, transparent);
    --kg-border:      var(--ksy-border);
    --kg-text:        var(--ksy-text);
    --kg-text-muted:  var(--ksy-text-muted);
}

[data-theme-dark="true"] .ksy-grid__overlay {
    background: rgba(0,0,0,.5);
}

[data-theme-dark="true"] .ksy-grid-ctx {
    background: var(--ksy-card) !important;
    border-color: var(--ksy-border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

[data-theme-dark="true"] .ksy-grid-ctx__item {
    color: var(--ksy-text);
}

[data-theme-dark="true"] .ksy-grid-ctx__item:hover {
    background: rgba(255,255,255,.06);
}

/* ── Mobile ───────────────────────────────────────────────── */

@media (max-width: 768px) {
    /* Чуть мельче шрифт и горизонтальные отступы ячейки — на узком экране это одна из
       причин, почему колонки не помещались; высоту строки (tap target) не трогаем. */
    .ksy-grid { --kg-font-size: 11.5px; }
    .ksy-grid__cell {
        padding: 8px 8px;
        height: 48px; /* больше tap target на мобайле */
    }
    .ksy-grid__row--header .ksy-grid__cell {
        height: 44px;
    }
    .ksy-grid__pagination {
        justify-content: center;
        gap: 6px;
    }
    .ksy-grid__page-info { width: 100%; text-align: center; }
    .ksy-grid__page-nav { margin-left: 0; }
    .ksy-grid__toolbar {
        flex-wrap: wrap;
    }
    .ksy-grid__search-wrap { max-width: 100%; width: 100%; }
}

/* Колонка с картинкой (логотип, миниатюра товара). Обычные отступы ячейки — 10px 14px,
   то есть 28px по горизонтали: в узкой колонке 44px картинке 28×28 не оставалось места,
   и она прижималась к краю. Здесь отступы минимальные, содержимое по центру.
   Ставится через cellClass в описании колонки. */
.ksy-grid__cell--media {
    padding: 4px 6px;
    justify-content: center;
}