/*
 * Kiln · backend · таблица.
 *
 * Колонки объявляются данными, а не разметкой: их ширину и выравнивание
 * задаёт описание колонки, а не класс на ячейке.
 */
.table {
    width: 100%;
    min-width: var(--native-table-min-width);
    border-collapse: collapse;
    /*
     * fixed обязателен: при auto длинное название растягивает колонку по
     * содержимому, и колонка даты уезжает за край вместо обрезки текста.
     */
    table-layout: fixed;
    text-align: left;
}

/*
 * Шапка липнет к верху колонки: при прокрутке длинного списка названия
 * колонок остаются на месте. Подложка полупрозрачная с размытием, чтобы
 * строки просвечивали под ней, как в нативном окне.
 */
.table > thead {
    position: sticky;
    z-index: 10;
    top: 0;
    background: color-mix(in srgb, var(--native-chrome) 95%, transparent);
    color: var(--native-label-tertiary);
    font-size: var(--native-text-section);
    backdrop-filter: blur(8px);
}

.table > thead th {
    padding: var(--native-cell-space-head) var(--native-cell-gutter);
    border-bottom: var(--native-line) solid var(--native-separator);
    font-weight: normal;
}

.table > tbody {
    font-size: var(--native-text);
}

/*
 * Курсор обычный, а не палец: строка таблицы в нативном окне выделяется,
 * а не открывается по щелчку, как ссылка.
 */
.table > tbody tr {
    cursor: default;
}

/*
 * Чётные строки получают едва заметную подложку: так глаз держит строку
 * при чтении вширь. Линий между строками при этом нет — они разбили бы
 * список на клетки.
 */
.table > tbody tr:nth-child(2n) {
    background: var(--native-stripe);
}

.table td {
    /*
     * max-width: 0 вместе с table-layout: fixed заставляет ячейку
     * обрезать текст по своей доле ширины. Без него длинное значение
     * распирает колонку, и обрезка не наступает никогда.
     */
    max-width: 0;
    padding: var(--native-cell-space) var(--native-cell-gutter);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Ведущая ячейка: значок типа. Ширина по значку, а не по доле таблицы.
 *
 * Правого поля у неё нет: расстояние до названия задаёт левое поле
 * соседней ячейки. Иначе поля складываются, и название уезжает вправо
 * дальше, чем в дереве, где значок стоит внутри той же ячейки.
 */
.table .leading {
    width: calc(var(--native-cell-gutter) + var(--native-icon));
    padding-right: 0;
}

/* Название идёт сразу за значком, своего поля слева ему не нужно. */
.table .leading + td,
.table .leading + th {
    padding-left: var(--native-node-gap);
}

/*
 * Значок в ячейке. Своего размера у svg может не быть — тогда он берёт
 * заводские 300×150 и растягивает строку.
 */
.table .leading > svg {
    width: var(--native-icon);
    height: var(--native-icon);
}

/*
 * Выделенная строка заливается акцентом целиком, как в Finder: и ячейки,
 * и полоска чётной строки под ними.
 */
.table > tbody tr.selected,
.table > tbody tr.selected:nth-child(2n) {
    background: var(--native-accent);
    color: var(--native-accent-foreground);
}

/*
 * Внутри выделенной строки приглушённый текст остаётся приглушённым, но
 * относительно акцента, а не подложки окна: серый на синем читался бы
 * хуже, чем полупрозрачный белый.
 */
.table > tbody tr.selected .secondary {
    color: color-mix(
        in srgb,
        var(--native-accent-foreground) 85%,
        transparent
    );
}

/* Второстепенное поле: дата, размер. Приглушено, но читаемо. */
.table .secondary {
    color: var(--native-label-tertiary);
}

/*
 * Числа и даты выравниваются по правому краю и набираются цифрами одной
 * ширины: иначе столбец дат дёргается по вертикали от строки к строке.
 */
.table .numeric {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/*
 * Пустая таблица: сообщение по центру свободного места, а не строкой в
 * шапке. Ростом не меньше экрана в четверть, иначе оно липнет к панели.
 */
.table-empty {
    display: grid;
    min-height: var(--native-table-empty-height);
    place-items: center;
    text-align: center;
}