/* Только страница статистики: таблица. Больше в файле ничего нет - шапка страницы, секция
   и переключатель видов собраны из .hm-phead, .hm-sec и .hm-tabs, то есть из готового.

   Таблица здесь, а не в ui.css, потому что второй таблицы на сайте нет: остальные страницы
   показывают данные карточками. Понадобится вторая - компонент переезжает в ui.css вместе
   с подъёмом обеих версий, как это было с .hm-steps и .hm-tabs (раздел 9 UI-GUIDE.md). */

/* Рамка и скругление живут на обёртке, а не на самой таблице: у таблицы border-radius не
   работает при border-collapse: collapse - углы рисуют ячейки, а не она.

   overflow-x нужен ради телефона: колонок четыре, и числа в них длинные (14 006 687), в
   360px они не встают. Прокрутка вбок честнее, чем спрятанная колонка: цифра, которой не
   видно, - это цифра, которой нет. Вертикальную прокрутку это не приводит: по спецификации
   вторая ось становится auto, но высота у блока своя собственная, переполнять нечего. */
.hm-stat__box {
    margin-top: 28px;
    overflow-x: auto;
    background: var(--hm-surface);
    border: 1px solid var(--hm-border);
    border-radius: 11px;
}

/* border-collapse и max-width заданы явно, хотя ровно это же сейчас приходит голой table
   от main.css. Тот же случай, что и с box-sizing из раздела 10: расчёт не должен
   развалиться в день, когда main.css отцепят. */
.hm-stat {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
}

/* nowrap на всей таблице, а не только на числах: в ячейках лежат артикулы (SM-A600FN,
   RMX3690) и имена операторов, а перенос рвёт их посреди слова - «SM-» на одной строке,
   «A600FN» на другой. Артикул, разорванный пополам, не гуглится и не сравнивается
   глазом с соседним.

   Ширину таблицы это отдаёт содержимому, и на телефоне она вылезает за экран - на то у
   обёртки и прокрутка. На десктопе в 1080px всё встаёт и без неё: width: 100% выше
   раздаёт остаток колонкам. */
.hm-stat th,
.hm-stat td {
    padding: 11px 16px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--hm-border);
}

/* Шапка таблицы. Не липкая намеренно: sticky внутри .hm-stat__box прилип бы к обёртке,
   а не к окну, - обёртка из-за overflow-x стала контейнером прокрутки. Липкой она станет,
   если однажды строк станет столько, что это начнёт мешать, - и тогда её придётся делать
   не здесь, а на уровне раскладки страницы. */
.hm-stat thead th {
    position: relative;
    background: var(--hm-surface-2);
    border-bottom: 1px solid var(--hm-border-strong);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hm-ink-2);
}

/* Производителя и второстепенные ячейки приглушаем, название устройства - основной цвет:
   в строке ищут глазами именно его. */
.hm-stat td {
    color: var(--hm-ink-2);
}

.hm-stat__name {
    font-weight: 600;
    color: var(--hm-ink);
}

/* Цифры: моноширинные и по правому краю - так соседние числа сравниваются взглядом, а не
   пересчётом разрядов. tabular-nums на всякий случай остаётся и здесь: у моноширинного
   шрифта из фолбэка цифры могут оказаться пропорциональными.

   nowrap обязателен: разряды разделены обычным пробелом (см. content.twig), и без него
   «14 006 687» переносится на две строки посреди числа.

   width: 1% - это «по содержимому»: без него ширину колонки задаёт заголовок «Отправлено
   сообщений», и число уезжает от названия устройства на полстраницы. Проценты потому, что
   у таблицы ширина 100%: браузер раздаёт остаток колонкам без своей ширины.

   Пара классов, а не голый .hm-stat__num: сброс выравнивания выше - это (0,1,1), а голый
   класс (0,1,0), и text-align в нём молча проиграл бы - числа остались бы по левому краю.
   Ровно та ловушка из раздела 10, на которой уже обожглись .hm-api__lbl. */
.hm-stat .hm-stat__num {
    width: 1%;
    font-family: var(--hm-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
    color: var(--hm-ink);
}

/* Шапке моноширинный ни к чему - это слова, а не цифры. */
.hm-stat thead .hm-stat__num {
    font-family: var(--hm-font);
}

.hm-stat tbody tr:last-child td {
    border-bottom: 0;
}

/* Подсветка строки: колонок четыре, и взгляд на длинной таблице теряет строку между
   названием и цифрой. */
.hm-stat tbody tr:hover td {
    background: var(--hm-surface-2);
}

.hm-stat__empty {
    margin-top: 28px;
    font-size: 15px;
    color: var(--hm-ink-2);
}

@media (max-width: 768px) {
    .hm-stat {
        font-size: 13px;
    }
    .hm-stat th,
    .hm-stat td {
        padding: 9px 12px;
    }
}

@media (max-width: 620px) {
    .hm-stat__box {
        margin-top: 22px;
    }
}