/* ═══════════════════════════════════════════════════════════════════════
   Единая геометрия панели.

   Панель собрана на DaisyUI + утилитах Tailwind, и радиусы задавались
   тремя способами сразу: темой DaisyUI (--rounded-btn / --rounded-box),
   классами rounded / rounded-md / rounded-lg в разметке и умолчаниями
   компонентов. Из-за этого рядом оказывались углы 4, 6, 8 и 16 px —
   часть элементов выглядела квадратной, часть круглой.

   Здесь одна шкала на всё:
     10px — то, с чем взаимодействуют: кнопки, поля, вкладки, join-группы;
     14px — контейнеры: карточки, модалки, выпадающие списки, таблицы;
     999px — только бейджи и аватары (это метки, а не элементы управления).

   Переменные DaisyUI трогаем в первую очередь: тогда согласованными
   становятся и составные компоненты (join, dropdown, input-group), где
   углы гасятся по краям и ручная правка ломала бы стыки.
   ═══════════════════════════════════════════════════════════════════════ */

:root,
[data-theme] {
  --rounded-btn: 10px;    /* кнопки, поля ввода, select, join */
  --rounded-box: 14px;    /* карточки, модалки, dropdown, alert */
  --rounded-badge: 999px; /* бейджи-метки */
  --tab-radius: 10px;
}

/* Утилиты Tailwind в разметке. Селектор с `html` поднимает специфичность
   до 0-1-1 — иначе Tailwind, который подключается скриптом и добавляет
   свои правила позже нашего <link>, перебивал бы их. */
html .rounded,
html .rounded-md,
html .rounded-lg { border-radius: 10px; }

html .rounded-xl,
html .rounded-2xl,
html .rounded-3xl,
html .rounded-box { border-radius: 14px; }

html .rounded-full { border-radius: 999px; }
html .rounded-none { border-radius: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   Ширина столбцов: тянется мышью и запоминается (js/common.js).

   Захват — узкая полоса у правого края заголовка. Она поверх текста, но
   всего 8 px: по самому заголовку по-прежнему можно выделять и копировать.
   ═══════════════════════════════════════════════════════════════════════ */

table.col-resizable { table-layout: fixed; }

/* Содержимое не должно распирать столбец шире заданного. */
table.col-resizable th,
table.col-resizable td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Ячейки, которым перенос нужен по смыслу, оставляем как были. */
table.col-resizable td.wrap,
table.col-resizable th.wrap { white-space: normal; overflow: visible; }

table.col-resizable th { position: relative; }

.col-grip {
  position: absolute; top: 0; right: 0; bottom: 0; width: 12px;
  cursor: col-resize; user-select: none; touch-action: none;
  z-index: 2;
}
/* Разделитель виден ВСЕГДА — иначе его приходится искать наощупь. На
   наведении он темнеет и толстеет, при перетаскивании подсвечен цветом
   акцента: видно и то, что схватить, и то, что тянешь прямо сейчас. */
.col-grip::after {
  content: ''; position: absolute; top: 15%; bottom: 15%; right: 4px; width: 2px;
  background: currentColor; opacity: .28; border-radius: 2px;
  transition: opacity .12s ease, width .12s ease, background .12s ease;
}
.col-grip:hover::after { opacity: .75; width: 3px; right: 3px; }
.col-grip.on::after {
  opacity: 1; width: 3px; right: 3px;
  background: var(--fallback-p, oklch(var(--p) / 1));   /* акцент темы DaisyUI */
}
/* Подложка под курсором: понятно, что зона живая, а не просто полоска. */
.col-grip:hover { background: currentColor; }
.col-grip:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

/* Пока таблица активна, разделители чуть заметнее — подсказка, что ширину
   можно менять, без отдельной надписи. */
table.col-resizable thead:hover .col-grip::after { opacity: .45; }

/* Пока тянем — курсор один на всю страницу, и ничего не выделяется. */
body.col-resizing { cursor: col-resize; }
body.col-resizing * { user-select: none !important; }

/* Столбец с кнопками: по умолчанию — по содержимому, чтобы кнопки были видны
   целиком. Но ручку ему теперь даём: это чаще всего ПОСЛЕДНИЙ столбец, и без
   неё его нельзя было расширить вовсе.

   width: auto здесь больше нет: при table-layout: fixed ширину задаёт <col>,
   а auto на ячейке спорил с ней и столбец «прыгал». */
table.col-resizable th.col-actions,
table.col-resizable td.col-actions {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

/* min-width: 100% здесь БЫЛ и его пришлось убрать.

   При table-layout: fixed браузер раздаёт лишнюю ширину между столбцами
   пропорционально. Пока таблица растягивалась до ширины контейнера, сужение
   одного столбца отдавало его место соседям — со стороны выглядело так, будто
   другие столбцы «хотят занять место». Теперь ширина таблицы равна сумме
   столбцов ровно, и каждый меняется сам по себе.

   Пустота справа на широком экране — осознанный размен: предсказуемое
   поведение при перетаскивании важнее заполненного фона. */