/* table.css — подэтап D.3: таблица данных (design-plan.md §1–§2).
   Заголовок 12px третичный, строки 36px, первая ячейка вес 500, ховер/выбор,
   ресайз столбца, правка ячейки. Ни одного hex — только var(--…).
   Классы (.data-table, .select-column, .open-column, .resizable .resizer,
   .editable-cell, .editing, .edit-error, .cell-editor-*) — из table.js
   и cell-editors.js; id и имена не меняются. */

/* ── Обёртка: карточка таблицы ──────────────────────────────────────── */
/* Карточка облегает таблицу (ширина = ширина таблицы), но не шире окна:
   при переполнении — внутренний горизонтальный скролл. Прижата к левому краю. */
.table-container {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
  vertical-align: top;
}

/* ── Таблица ───────────────────────────────────────────────────────── */
/* Ширина = сумма ширин столбцов (<col>), а НЕ ширина окна: таблица прижата к левому краю,
   справа не растягивается. При изменении ширины столбца остальные не меняют свою ширину,
   а лишь сдвигаются. Если суммарная ширина больше окна — горизонтальный скролл контейнера. */
.data-table {
  width: auto;
  max-width: none;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--fs-14);
  color: var(--text);
}

/* Заголовок: третичный 12px, 500, линия снизу — как в Notion */
.data-table th {
  position: relative;
  padding: var(--space-2) var(--space-3);
  background-color: transparent;
  color: var(--text-3);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  text-align: left;
  white-space: nowrap;
  border-bottom: var(--line-1) solid var(--border);
  cursor: move;
  user-select: none;
}

.data-table th .column-title {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.data-table th:hover {
  background-color: var(--bg-hover);
  color: var(--text-2);
}

/* Служебные колонки: выбор строк и кнопка карточки — узкие, только под элемент. */
.data-table th.select-column,
.data-table td.select-column {
  width: 32px;
  padding-left: var(--space-1);
  padding-right: var(--space-1);
  text-align: center;
  cursor: default;
}

.data-table .open-column {
  width: 32px;
  padding-left: var(--space-1);
  padding-right: var(--space-1);
  text-align: center;
}

/* ── Строки: минимум 36px, первая ячейка вес 500 ─────────────────────
   Если текст не помещается в ширину столбца, строка растёт вниз (перенос
   по словам), а не обрезается многоточием. `height` — минимум строки. */
.data-table td {
  height: var(--row-height);
  padding: var(--space-1) var(--space-3);
  border-bottom: var(--line-1) solid var(--border);
  vertical-align: top;
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--text);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Служебные узкие колонки (чекбокс, «раскрыть») — по центру и без переноса */
.data-table td.select-column,
.data-table td.open-column {
  white-space: nowrap;
}

/* Ячейку правим кликом — курсор-текст и мягкая подсветка при наведении */
.data-table td.editable-cell {
  cursor: text;
  position: relative;
}

/* ── Кнопка «Копировать» в ячейке с текстом ─────────────────────────
   Видна только при наведении на строку, в правом верхнем углу ячейки.
   Клик по ней не открывает редактор (stopPropagation в JS). */
.cell-copy-btn {
  position: absolute;
  top: var(--radius-xs);
  right: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-button);
  height: var(--icon-button);
  padding: 0;
  color: var(--text-3);
  background-color: var(--bg);
  border: var(--line-1) solid var(--border);
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}

.data-table tbody tr:hover .cell-copy-btn,
.data-table td.editable-cell:hover .cell-copy-btn {
  opacity: 1;
  pointer-events: auto;
}

.cell-copy-btn:hover {
  color: var(--accent);
  background-color: var(--accent-soft);
  border-color: var(--accent);
}

/* В режиме правки ячейки кнопку скрываем — она мешала бы полю ввода */
.data-table td.editing .cell-copy-btn {
  display: none;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr {
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.data-table tbody tr:hover {
  background-color: var(--bg-hover);
}

/* Первичное поле — название записи: 500, как в Notion */
.data-table td.primary-cell {
  font-weight: var(--fw-medium);
}

/* Выбранная (чекбоксом) строка */
.data-table tbody tr.selected {
  background-color: var(--bg-selected);
}

.data-table tbody tr.selected:hover {
  background-color: var(--bg-selected);
}

/* Числа — разрядами ровно */
.data-table td[data-column-key] {
  font-variant-numeric: var(--font-variant-numeric);
}

/* Плашки select/status/multiselect внутри ячейки: чуть ниже строки, чтобы не раздувать её.
   Сам вид плашки — в badges.css (.pill); цвета приходят из палитры (БД). */
.data-table td .pill {
  line-height: 22px;
}

/* Пустое состояние таблицы описано общим компонентом .empty-text (components.css, D.7). */

/* ── Изменение ширины столбца: ручка справа в заголовке ────────────── */
.data-table th .resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  background: transparent;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.data-table th .resizer:hover,
.data-table th:active .resizer {
  background-color: var(--accent);
  opacity: 0.5;
}

/* Пока тянем ширину — курсор col-resize по всему экрану и без выделения текста. */
body.col-resizing {
  cursor: col-resize;
  user-select: none;
}

/* ── Кнопка «Открыть карточку» в строке ────────────────────────────── */
.row-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-button);
  height: var(--icon-button);
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-13);
  line-height: 1;
  color: var(--text-3);
  background: transparent;
  border: var(--line-1) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.data-table tbody tr:hover .row-open-btn {
  color: var(--accent);
}

.row-open-btn:hover {
  color: var(--accent);
  background-color: var(--accent-soft);
}

/* ── Ячейка, доступная для правки ──────────────────────────────────── */
/* Наведение подсвечиваем НЕ рамкой-прямоугольником на всю ячейку (острые углы,
   «квадрат» на весь td), а мягким скруглённым фоном внутри контента. */
.data-table td.editable-cell:hover {
  background-color: var(--bg-hover);
}

/* Режим правки: ячейка — поле с мягкой скруглённой рамкой вокруг редактора,
   а не прямоугольная обводка на весь td. Сама рамка фокуса — у .cell-editor-input. */
.data-table td.editing {
  padding: 0;
  background-color: var(--bg);
}

.data-table td.edit-error .cell-editor {
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 var(--line-2) var(--danger);
}

/* ── Редакторы ячейки (cell-editors.js) ────────────────────────────── */
.cell-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-1);
}

.cell-editor-input {
  width: 100%;
  min-width: 60px;
  height: var(--control-height);
  padding: 0 var(--space-2);
  font-family: inherit;
  font-size: var(--fs-13);
  color: var(--text);
  background-color: var(--bg);
  border: var(--line-1) solid var(--accent);
  border-radius: var(--radius-sm);
  outline: none;
}

/* Фокус в редакторе: одна аккуратная скруглённая рамка акцента вокруг поля
   (без второго прямоугольного кольца на всю ячейку). */
.cell-editor-input:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.cell-editor-input.invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px var(--danger-soft);
}

.cell-editor-date .cell-editor-input {
  width: auto;
  flex: 1 1 120px;
}

.cell-editor-multiline .cell-editor-input {
  height: auto;
  min-height: 60px;
  padding: var(--space-1) var(--space-2);
  resize: vertical;
}

.cell-editor-multiselect {
  flex-direction: column;
  align-items: stretch;
  gap: var(--radius-xs);
  min-width: 160px;
  padding: var(--space-2);
  background-color: var(--bg);
  border: var(--line-1) solid var(--accent);
  border-radius: var(--radius-sm);
}

.cell-editor-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-13);
  color: var(--text);
  cursor: pointer;
}

.cell-editor-actions {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.cell-editor-save,
.cell-editor-cancel {
  height: var(--icon-button);
  padding: 0 var(--space-2);
  font-family: inherit;
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--text);
  background-color: var(--bg);
  border: var(--line-1) solid var(--border-field);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.cell-editor-save {
  color: var(--text-inverse);
  background-color: var(--accent);
  border-color: var(--accent);
}

.cell-editor-save:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

.cell-editor-cancel:hover {
  background-color: var(--bg-hover);
}

.cell-editor-readonly {
  padding: var(--space-1) var(--space-2);
  font-size: var(--fs-12);
  color: var(--text-3);
  outline: none;
}

/* ── Оверлей загрузки поверх таблицы ───────────────────────────────── */
.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background-color: var(--bg);
  opacity: 0.9;
  z-index: var(--z-sticky);
}

.loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Узкий экран: плотнее отступы, ширина столбцов из colgroup ─────── */
@media (max-width: 760px) {
  .data-table th,
  .data-table td {
    padding: var(--space-1) var(--space-2);
  }

  .data-table th.select-column,
  .data-table th.open-column,
  .data-table td.select-column,
  .data-table td.open-column {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
  }

  .data-table {
    font-size: var(--fs-13);
  }

/* ── Под таблицей слева: кнопка «Добавить» ──────────────────────────────
   Вид полностью наследуется от .action-button (как кнопки тулбара, в т.ч.
   «История»); здесь только выравнивание в строке подвала и запрет переноса. */
.table-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-2) 0;
}

.table-add-btn {
  white-space: nowrap;
}

/* Отключённое состояние — как у активной кнопки тулбара (белый фон, та же рамка),
   приглушён только текст: так «Добавить» не выглядит серым квадратом рядом с «Историей». */
.table-add-btn:disabled {
  color: var(--text-3);
  background-color: var(--bg);
  box-shadow: var(--shadow-sm);
  cursor: not-allowed;
}
}

/* ── Тёмная тема: сплошные панели без стекла ────────────────────── */
[data-theme="dark"] .table-container {
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--border);
}
[data-theme="dark"] .data-table th {
  background-color: var(--bg-panel);
}
[data-theme="dark"] .data-table th:hover {
  background-color: var(--bg-hover);
}
[data-theme="dark"] .loading-overlay {
  background-color: var(--bg);
}