/* Таблица: выбор колонок и своя прокрутка (28.09) - files/table-cols.js, ГОСТ DESIGN_SYSTEM.md
   раздел «Таблица: выбор колонок и своя прокрутка». Только токены темы - светлая тема сама. */

/* Кнопка «Колонки» - того же вида, что фильтры рядом (select в sec-header). */
.tc-host{position:relative;display:inline-flex}
.tc-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);
  padding:5px 10px;font-size:12px;line-height:1.35;cursor:pointer;display:inline-flex;align-items:center;white-space:nowrap}
.tc-btn:hover{border-color:var(--border-strong)}
.tc-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tc-btn__n{color:var(--muted)}

/* Список колонок - плавающий над страницей (единственный объект «над», поэтому с тенью). */
.tc-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:240px;max-height:min(440px,70vh);overflow:auto;
  background:var(--bg2);border:1px solid var(--border-strong);border-radius:10px;padding:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.4),0 16px 32px rgba(0,0,0,.5)}
.tc-item{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:6px;font-size:12.5px;color:var(--text);
  cursor:pointer;user-select:none}
.tc-item:hover{background:var(--bg3)}
.tc-item input{margin:0;accent-color:var(--green);cursor:pointer}
.tc-item input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tc-item--req{color:var(--muted);cursor:default}
.tc-item--req input{cursor:default}
.tc-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);margin-top:4px;padding:7px 8px 3px}
.tc-foot__n{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.tc-link{background:none;border:0;padding:0;color:var(--blue);font-size:12px;cursor:pointer}
.tc-link:hover{text-decoration:underline}
.tc-link:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Своя прокрутка длинной широкой таблицы: область высотой в экран - горизонтальная полоса всегда
   видна у нижнего края окна, шапка, первая колонка (госномер/месяц) и итог закреплены. */
/* max(360px, ...) - на низком окне (ноутбук с лупой, телефон боком) область не схлопывается. */
.tbl-viewport{max-height:max(360px, calc(100vh - 140px));overflow:auto;overscroll-behavior-x:contain}
.tbl-viewport .tbl thead th{position:sticky;top:0;z-index:3;background:var(--bg2)}
.tbl-viewport .tbl tbody td:first-child,
.tbl-viewport .tbl tfoot td:first-child{position:sticky;left:0;z-index:2;background:var(--bg2)}
.tbl-viewport .tbl thead th:first-child{left:0;z-index:4}
.tbl-viewport .tbl tr:hover td:first-child{background:var(--bg3)}
.tbl-viewport .tbl tfoot td{position:sticky;bottom:0;z-index:3;background:var(--bg3)}
.tbl-viewport .tbl tfoot td:first-child{z-index:4;background:var(--bg3)}
/* Плавающая полоса прокрутки вбок у нижнего края окна - пока родная полоса таблицы ниже экрана
   (files/table-cols.js, attachFloat). На сенсорных экранах не нужна - там таблицу листают пальцем. */
.tc-float{position:fixed;bottom:0;z-index:40;display:none;overflow-x:auto;overflow-y:hidden;
  background:var(--bg2);border-top:1px solid var(--border);border-radius:6px 6px 0 0}
.tc-float__w{height:1px}
@media (hover:none){.tc-float{display:none !important}}

/* Тонкая граница у закреплённой колонки - видно, что под ней уезжают остальные. */
.tbl-viewport .tbl tbody td:first-child,.tbl-viewport .tbl thead th:first-child,.tbl-viewport .tbl tfoot td:first-child{
  box-shadow:inset -1px 0 0 var(--border)}