/* ============================================================
   Универсальный табличный компонент просмотра сущностей (table-view)
   Тёмная тема: графит #1a1a1a + золото #aa9974 (unionsk.ru)
   Наследует .event-modal и CSS-переменные из base.css/forms.css;
   сетка — как в bulk.css (таблица «как в Excel» со скроллом).
   ============================================================ */

/* Оверлей — на весь экран поверх карты; наследует .event-modal.
   Модалка шире мастера события (таблица с несколькими колонками). */
.table-view-modal.open {
    display: flex;
}

.table-view-box {
    width: 92%;
    max-width: 94vw;
    max-height: 92vh;
}

.table-view-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
}

/* Панель инструментов над таблицей: добавление, колонки, обновление,
   сортировка. Вниз — панель фильтров (см. .table-view-filters). */
.table-view-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    /* Контекст позиционирования выпадающей панели колонок: панель
       (position: absolute) открывается ПОД кнопкой «Колонки» внутри
       тулбара, а не под всей модалкой. */
    position: relative;
}

/* Обёртка кнопки «Колонки» + панели селектора: контекст позиционирования
   выпадающей панели — чтобы она раскрывалась ПОД кнопкой (left: 0 панели
   привязан к левому краю обёртки, равному левому краю кнопки). */
.table-view-columns-wrap {
    position: relative;
}

.table-view-toolbar .table-view-columns-toggle {
    /* Акцентная кнопка «Колонки» — золотая, как .sort-btn.active */
    background: var(--brand);
    border-color: var(--brand);
    color: #1a1a1a;
    font-weight: 600;
}

/* Кнопка «Колонки» в активном состоянии (панель открыта) — визуальный
   отклик на клик: подсветка рамки/фона, как .sort-btn.active */
.table-view-toolbar .table-view-columns-toggle.active {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    box-shadow: 0 0 0 2px rgba(170, 153, 116, 0.35);
}

/* Кнопка «Добавить объекты» — золотая акцентная (первичное действие,
   как .sort-btn.active / «Колонки»), слева в тулбаре. */
.table-view-add {
    background: var(--brand);
    border-color: var(--brand);
    color: #1a1a1a;
    font-weight: 600;
}

.table-view-add:hover {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
}

/* Выпадающий список сортировки — единый стиль с полями форм (forms.css) */
.table-view-sort {
    padding: 6px 8px;
    font-size: 12px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    cursor: pointer;
    max-width: 240px;
}

.table-view-sort:focus {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}

/* Поле поиска — первое в строке фильтров (.table-view-filters-row), слева от
   фильтра «Контрагент»; единый стиль с .table-view-sort и полями форм. */
.table-view-search {
    padding: 6px 8px;
    font-size: 12px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    width: 200px;
    max-width: 220px;
    min-width: 0;
    flex: 0 0 auto;
}

/* Строка фильтров: статическое поле поиска + панель фильтров в одном флекс-ряду */
.table-view-filters-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.table-view-search:focus {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}

@media (max-width: 700px) {
    .table-view-search {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }
}

/* Панель фильтров (выпадающие списки над таблицей, строка с wrap) */
.table-view-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.table-view-filter {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.table-view-filter-select {
    padding: 4px 6px;
    font-size: 12px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    cursor: pointer;
}

.table-view-filter-select:focus {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}

/* --- Панель «Колонки» (селектор видимых колонок) --- */
.table-view-columns {
    position: absolute;
    top: 30px;
    left: 0;
    z-index: 100;
    background: #2a2a2a;
    border: 1px solid #555;
    border-radius: var(--radius);
    padding: 10px;
    min-width: 160px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65);
}

.table-view-columns[hidden] {
    display: none;
}

.table-column-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text);
    cursor: pointer;
    padding: 3px 2px;
    border-radius: var(--radius-sm);
}

.table-column-option:hover {
    background: var(--surface-hover);
}

.table-column-option input[type="checkbox"] {
    flex-shrink: 0;
}

/* Кнопки «Все» / «Сбросить» — в ряд */
.table-view-columns-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #444;
}

.table-view-columns-actions button {
    font-size: 12px;
    padding: 4px 12px;
    cursor: pointer;
    background: #3a3a3a;
    color: var(--text);
    border: 1px solid #555;
    border-radius: var(--radius-sm);
}

.table-view-columns-actions button:hover {
    background: #4a4a4a;
}

/* Обёртка таблицы: горизонтальный и вертикальный скролл.
   Позиционирование relative — для выпадающей панели колонок. */
.table-view-wrap {
    position: relative;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 62vh;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.table-view {
    border-collapse: collapse;
    width: 100%;
    table-layout: auto;        /* A2: ширина по содержимому, не фиксированная */
    min-width: 100%;
    font-size: 13px;
    color: var(--text);
}

.table-view th,
.table-view td {
    border: 1px solid var(--border);
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
    white-space: normal;       /* A2: перенос текста */
    overflow-wrap: break-word; /* A2: перенос длинных слов */
    word-break: break-word;    /* A2: поддержка переноса */
    max-width: 15%;            /* A2: верхний предел, при котором срабатывает перенос */
}

.table-view th {
    background: var(--surface-2);
    color: #e0e0e0;
    font-weight: 600;
    font-size: 12px;
}

.table-view thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Строки таблицы */
.table-view tbody tr {
    transition: background 0.12s;
}

.table-view tbody tr:hover {
    background: var(--surface-hover);
}

/* Кликабельные строки (передаётся onRowClick) — подсказка курсора */
.table-view tbody tr.clickable {
    cursor: pointer;
}

/* Архивные записи — приглушены */
.table-view tbody tr.archived td {
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.12);
}

/* Пустая таблица */
.table-view td.table-view-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 24px;
    white-space: normal;
}

/* --- Встроенная колонка «№» (Правка 3) --- */
.table-view-col-num,
.table-view-row-num {
    width: 46px;
    max-width: 46px !important;   /* override 15% — фиксированная узкая ширина */
    min-width: 36px;
    text-align: center;
    color: #777;
    font-weight: normal;
    font-size: 12px;
    white-space: nowrap;         /* A2: никакого переноса для номера */
}

.table-view-row-num {
    font-variant-numeric: tabular-nums;
}

/* Раскраска ячейки «Приоритет» события цветом приоритета
   (единый источник цветов — APS.PRIORITY_COLORS в constants.js). */
.table-view td.priority-cell-high {
    background: #ff1900;
    color: #fff;
}

.table-view td.priority-cell-medium {
    background: #f15a0f;
    color: #fff;
}

.table-view td.priority-cell-low {
    background: #fbff00;
    color: #1a1a1a;
}

/* Восстановительное событие («Закрыто») — зелёная ячейка вместо жёлтой
   «Низкий»: цвет #2ecc71 (как «Восстановление» в каталоге event_types),
   тёмный текст (читается на зелёном лучше белого). */
.table-view td.priority-cell-closed {
    background: #2ecc71;
    color: #1a1a1a;
}

/* --- Узкая колонка «по содержимому» (Правка 5) —
   применяется к колонкам Дата/Приоритет/Статус/Завершено схемы events.
   При table-layout: auto вместе с width: 1% и white-space: nowrap колонка
   сжимается до содержимого; заголовок не переносится; max-width: 15% не мешает. */
.table-view th.table-view-col-narrow,
.table-view td.table-view-col-narrow {
    white-space: nowrap;
    width: 1%;
}

/* --- Фон ячейки приоритета у ЗАВЕРШЁННЫХ событий — нейтральный серый.
   .is-archived добавляется рядом с priority-cell-* в cellClass схемы events.
   Ранее здесь был ослабленный оттенок приоритета (color-mix с #2a2a2a):
   приоритет завершённого события уже неактуален, поэтому цветовая кодировка
   снимается полностью (требование «фон завершённых — серый, не оттенок
   приоритета»), включая восстановительные (priority-cell-closed): активные
   восстановительные остаются зелёными, завершённые — серые.
   Серый #3a3a3a на тёмной теме читается как «неактивная» ячейка; текст —
   rgba(255,255,255,0.75) (контраст к #3a3a3a ≈ 7.4:1, WCAG AA/AAA). */
.table-view td.priority-cell-high.is-archived,
.table-view td.priority-cell-medium.is-archived,
.table-view td.priority-cell-low.is-archived,
.table-view td.priority-cell-closed.is-archived {
    background: #3a3a3a;
    color: rgba(255, 255, 255, 0.75);
}

/* Карточки и меню ПОВЕРХ универсальной таблицы (table-view-modal z-index 1400,
   bulk-add-modal 1500): карточки открываются по клику/ПКМ из таблицы.
   #event-info-modal и #event-modal были 1400 (равны таблице, но в DOM идут
   РАНЬШЕ #table-view-modal → таблица перекрывала бы их); #object-card-popup
   был 1300, #contractors-card-popup — 1300 (sidebar.css). Поднятие до 1700
   чинит и мастер события «Создать событие» из таблицы, и карточку контрагента
   по ЛКМ на строке таблицы контрагентов. */
#event-info-modal.open,
#event-modal.open,
#object-card-popup.open,
#contractors-card-popup.open {
    z-index: 1700;
}

/* Диалог архива контрагента открывается из карточки/таблицы контрагентов
   (показывается через hidden=false, без класса .open; базовый z-index 1200
   в sidebar.css) — поднят поверх #table-view-modal (1400). */
#contractors-archive-dialog {
    z-index: 1700;
}

/* Статус под таблицей (загрузка/обновление/ошибка).
   Контейнер хранит ДВА независимых узла: текст статуса и пейджер —
   запись в один не затирает другой. */
.table-view-status {
    min-height: 18px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Текст статуса («Загрузка...», «Обновлено: N записей», ошибки) */
.table-view-status-text.error {
    color: var(--danger, #e05252);
}

/* Пейджер — отдельный узел внутри статус-контейнера */
.table-view-status-pager:empty {
    display: none;
}

/* --- Пейджер пагинации (20 записей/страница, ядро table-view.js) ---
   Строка вида «Показано 1–20 из 137 · стр. 1 2 3 … 7». */
.table-view-status-pager {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted, #888);
}

.table-view-status-pager .pager-sep {
    color: #555;
}

.table-view-status-pager .pager-caption {
    margin-right: 2px;
}

/* Номер страницы-ссылки: золото, клик → переход */
.table-view-status-pager .pager-link {
    color: #aa9974;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 3px;
}

.table-view-status-pager .pager-link:hover {
    color: #d0bd94;
    text-decoration: underline;
}

/* Текущая страница */
.table-view-status-pager .pager-current {
    color: #fff;
    font-weight: bold;
    background: #444;
    border-radius: 3px;
    padding: 0 4px;
}

/* Многоточие-разрыв в нумерации страниц */
.table-view-status-pager .pager-gap {
    color: #777;
    padding: 0 2px;
}

/* --- Пейджер журнала событий в карточке объекта (object-card.js) ---
   Инлайн-строка под списком событий #events-feed. Стили чисел/активной
   страницы переиспользуются из .table-view-status-pager (выше). */
.events-pager {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Бейдж числа активных событий в колонке «Название» (UI-1) ---
   Имя XSS-safe выводится через textContent (renderCell в table-configs.js),
   бейдж — кружок с числом, цвет по приоритету (как .object-event-count в
   sidebar.css): цифра чёрная, фон задаётся inline из APS.PRIORITY_COLORS.
   A1: бейдж ПЕРВЫЙ (flex-order), чтобы был в начале; A2: текст переносится,
   бейдж не рвётся. */
.name-cell-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

/* Имя объекта — переносится (white-space: normal от td), flex-схлопывание
   при нехватке ширины — бейдж остаётся, имя переносится. */
.name-cell-wrap .name-cell-text {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;               /* разрешает схлопывание flex-элемента */
    flex: 1 1 auto;
}

.table-view-event-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    background: #555;
    white-space: nowrap;        /* бейдж не рвётся */
}

/* Правка 2: строки больше не окрашиваются по приоритету.
   Классы priority-high/priority-medium УДАЛЕНЫ из renderBody.
   Ячейка-бейдж приоритета (priority-cell-*) остаётся. */