/* TableKit — единый вид таблиц сервиса (С68).
 * Снят с таблицы «Финансов», чтобы новые разделы выглядели так же, а не
 * каждый по-своему. Подключается вместе с shared/static/js/tablekit.js.
 */

/* Обёртка: горизонтальная прокрутка для широких таблиц, вертикальная — для
   длинных. Страница целиком по горизонтали не едет. */
.tk-wrap { overflow: auto; max-height: 70vh; border: 1px solid #eef0f6; border-radius: 8px; }

.tk-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tk-table th, .tk-table td {
    padding: .36rem .5rem; text-align: right; white-space: nowrap;
    border-bottom: 1px solid #f0f1f6;
}
.tk-table th {
    color: #8a8a9a; font-weight: 600; font-size: .72rem; text-transform: uppercase;
    position: sticky; top: 0; background: #fff; z-index: 2;
}
.tk-table td.l, .tk-table th.l { text-align: left; }
.tk-table tbody tr:hover td { background: #fafbff; }
.tk-table tr[data-pin] td { background: #f7f8fc; font-weight: 700; }

/* сортировка по клику на заголовок */
.tk-sortable { cursor: pointer; user-select: none; }
.tk-sortable:hover { color: #667eea; }
.tk-table th[data-sort="desc"]::after { content: ' ↓'; color: #667eea; }
.tk-table th[data-sort="asc"]::after  { content: ' ↑'; color: #667eea; }

/* пагинация */
.tk-pager { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
            margin-top: .7rem; font-size: .85rem; color: #555; }
.tk-pager select { padding: .25rem .4rem; border: 1px solid #ddd; border-radius: 6px;
                   font-family: inherit; font-size: .85rem; }
.tk-pageinfo { color: #8a8a9a; }
.tk-pagenav { display: inline-flex; gap: .2rem; margin-left: auto; }
.tk-pagebtn { min-width: 28px; padding: .2rem .45rem; border: 1px solid #dfe2ef;
              background: #fff; border-radius: 6px; cursor: pointer;
              font-family: inherit; font-size: .82rem; color: #555; }
.tk-pagebtn:hover:not(:disabled):not(.active) { background: #eef0fa; }
.tk-pagebtn.active { background: linear-gradient(135deg, #667eea, #9d6ee0);
                     color: #fff; border-color: transparent; font-weight: 600; }
.tk-pagebtn:disabled { opacity: .4; cursor: default; }
.tk-pageell { color: #a0a4b4; padding: 0 .2rem; }

/* фильтры над таблицей — один вид на весь сервис */
.tk-filters { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center;
              margin: .2rem 0 .9rem; font-size: .85rem; }
.tk-filters label { color: #666; }
.tk-filters select, .tk-filters input[type=text] {
    padding: .25rem .4rem; border: 1px solid #ccc; border-radius: 6px;
    font-size: .85rem; font-family: inherit;
}
.tk-check { display: inline-flex; align-items: center; gap: .25rem; cursor: pointer; }

/* значения */
.tk-pos { color: #1e7e34; font-weight: 700; }
.tk-neg { color: #c0392b; font-weight: 700; }
.tk-mut { color: #a0a4b4; }

/* бейджи: один смысл — один цвет во всём сервисе */
.tk-badge { display: inline-block; border-radius: 6px; padding: .08rem .45rem;
            font-size: .72rem; font-weight: 700; }
.tk-ok    { background: #d4edda; color: #1e7e34; }   /* работает, всё хорошо */
.tk-warn  { background: #ffe0b2; color: #a35200; }   /* внимание, управляет не человек */
.tk-off   { background: #f0f1f4; color: #a0a4b4; }   /* выключено, действия не было */
.tk-bad   { background: #f8d7da; color: #a02128; }   /* теряем деньги */
.tk-info  { background: #e7f1fd; color: #2d5fa8; }   /* ручной режим, наблюдение */

/* Ручка изменения ширины столбца (С68, Наталья 17.08: «дай возможность
   изменять ширину таблицы и сохранять настройки»). Узкая полоска у правой
   границы заголовка: видна при наведении, тянется мышью, двойной щелчок —
   вернуть автоподбор. Ширины хранятся в браузере. */
.tk-grip {
    position: absolute;
    top: 0;
    /* Строго внутри ячейки: при right:-3px ручка последней колонки торчала
       за край и давала таблице лишние 3px горизонтальной прокрутки. */
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 2;
}
.tk-grip::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 2px;
    width: 1px;
    height: 60%;
    background: transparent;
    transition: background .12s;
}
.tk-grip:hover::after { background: #667eea; }
/* Столбцы с заданной шириной обрезают длинный текст, а не ломают сетку. */
table[style*="table-layout: fixed"] td,
table[style*="table-layout: fixed"] th { overflow: hidden; text-overflow: ellipsis; }

/* Поля фильтров в шапке не должны распирать таблицу: своей минимальной
   шириной они добавляли лишние пиксели, и появлялась горизонтальная
   прокрутка на ровном месте (Наталья 17.08 — «пусть таблица влезает»). */
.tk-table thead input, .tk-table thead select {
    width: 100%; min-width: 0; box-sizing: border-box;
}