/**
 * Диагностика оптики — таблица точек ветвления.
 *
 * Общее мобильное правило раскладывает таблицы данных в столбик карточкой. Здесь
 * это не работает: строка — не карточка объекта, а ряд чисел, который читается
 * только рядом с соседними рядами (выше точка живая, ниже мёртвая — значит рвёт
 * между ними). Поэтому на телефоне таблица остаётся таблицей и прокручивается
 * вбок внутри своей обёртки, а не разъезжается страницей.
 */
.erpds-optic-diag__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.erpds-optic-diag__filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 16px;
}

/* Подпись OLT длинная (модель, адрес, hostname, число портов и ONU), и селект
   растягивается под самый длинный вариант — до выезда страницы вбок. Ширину
   режем здесь, а не укорачиванием подписи: по ней оператор отличает четыре
   одинаковых OLT в одной серверной. */
.erpds-optic-diag__filter label {
    display: flex;
    gap: 6px;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.erpds-optic-diag__filter select {
    max-width: 100%;
    min-width: 0;
}

.erpds-optic-diag__filter label:first-child select {
    width: 520px;
}

/* Шапка шага: где оператор находится и что читать в таблице. */
.erpds-optic-diag__step {
    margin: 4px 0 12px;
}

.erpds-optic-diag__step-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: baseline;
}

.erpds-optic-diag__step-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--erpds-text, #1F2430);
}

.erpds-optic-diag__hint {
    margin: 4px 0 0;
    max-width: 72ch;
    font-size: 13px;
    line-height: 1.45;
    color: var(--erpds-text-muted, #525A66);
}

.erpds-optic-diag__found {
    margin: 0 0 8px;
    font-weight: 600;
    color: var(--erpds-danger, #C0392B);
}

/* Числа читаются столбцом, а не строкой: один и тот же разряд должен стоять
   под тем же разрядом соседней строки, иначе «12» и «9» не сравнить взглядом. */
.erpds-optic-diag__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    /* Иначе прижатое вправо число стоит впритык к соседней колонке и читается
       как часть её значения. */
    padding-right: 6px;
}

/* Само число не переносится, а заголовок над ним — переносится: заголовки здесь
   длинные («ONU с данными опроса»), и в одну строку они растягивают таблицу. */
td.erpds-optic-diag__num {
    white-space: nowrap;
}

/* Колонкам с текстом — запас ширины: иначе адрес сооружения рассыпается по
   одному слову в строку, а колонки чисел при этом пустуют. */
.erpds-optic-diag__wide {
    min-width: 130px;
    /* Общий стиль таблиц центрирует ячейки. Здесь левый край колонки точек — это
       шкала вложенности: центрированные подписи съедают отступ, и дерево
       превращается в плоский список. */
    text-align: left;
}

.erpds-optic-diag__out,
.erpds-optic-diag__same {
    color: var(--erpds-text-muted, #525A66);
}

/* «Выход делителя 5» не переносится: номер, оторванный от подписи, читается
   как отдельная строка таблицы. */
.erpds-optic-diag__out {
    white-space: nowrap;
}

/* Верхняя точка участка, похожего на обрыв — единственное место, где экран
   говорит «копать здесь», поэтому выделяется строкой, а не только словами. */
.erpds-optic-diag__row--break > td {
    background: var(--erpds-danger-bg, #FDECEA);
}

.erpds-optic-diag__break {
    font-weight: 600;
    white-space: nowrap;
    color: var(--erpds-danger, #C0392B);
}

/* Возраст опроса под датой: дата отвечает «когда», возраст — «давно ли». */
.erpds-optic-diag__age {
    font-size: 11px;
    white-space: nowrap;
    color: var(--erpds-text-muted, #525A66);
}

.erpds-optic-diag__age--stale {
    font-weight: 600;
    color: var(--erpds-danger, #C0392B);
}

/* Врезка «кому звонить» под помеченной точкой. */
.erpds-optic-diag__row--people > td {
    background: var(--erpds-bg-2, #F2F4F7);
    text-align: left;
}

/* Абоненты OLT без коммутаций — отдельный блок под таблицей портов, а не её строка:
   порт для них неизвестен. */
.erpds-optic-diag__uncommuted {
    margin-top: 16px;
}

.erpds-optic-diag__people-title {
    margin-bottom: 4px;
    font-weight: 600;
}

.erpds-optic-diag__people {
    margin: 0;
    padding-left: 18px;
    columns: 2;
}

.erpds-optic-diag__person-info {
    color: var(--erpds-text-muted, #525A66);
}

@media (max-width: 900px) {
    .erpds-optic-diag__people {
        columns: 1;
    }
}

/* Пунктир под заголовком: видно, что у колонки есть объяснение по наведению. */
.erpds-optic-diag__hinted {
    border-bottom: 1px dotted var(--erpds-border-strong, #AAB2BF);
    cursor: help;
}

@media (max-width: 600px) {
    table.table_list_data.erpds-optic-diag,
    table.table_list_data.erpds-optic-diag tbody,
    table.table_list_data.erpds-optic-diag tr {
        display: revert !important;
        width: auto !important;
    }

    /* Шапку на телефоне общий стиль прячет: в карточной раскладке она не нужна.
       Здесь таблица осталась таблицей, и без шапки колонки цифр безымянны. */
    table.table_list_data.erpds-optic-diag thead,
    table.table_list_data.erpds-optic-diag thead tr {
        display: revert !important;
    }

    table.table_list_data.erpds-optic-diag td,
    table.table_list_data.erpds-optic-diag th {
        display: table-cell !important;
        width: auto !important;
    }

    table.table_list_data.erpds-optic-diag {
        /* Ниже этой ширины колонки схлопываются в нечитаемые столбики букв. */
        min-width: 760px;
    }

    /* Врезка с абонентами живёт внутри широкой таблицы, а читать её надо целиком:
       имя, адрес и телефон — то, ради чего экран открыли. Держим её у левого
       края при прокрутке таблицы вбок и вписываем в ширину экрана. */
    .erpds-optic-diag__row--people > td {
        position: sticky;
        left: 0;
        white-space: normal;
    }

    /* Ширину режем у содержимого, а не у ячейки: ячейка с colspan растягивается
       по таблице, и max-width на ней не работает. */
    /* Селектор с `.table_list_data` — не для области, а ради веса: в
       `tables-redesign.css` на этой же ширине стоит `.table_list_data td > *`
       с `max-width: 100%`, и 100% считается от ширины широкой таблицы. */
    .table_list_data .erpds-optic-diag__people,
    .table_list_data .erpds-optic-diag__people-title {
        max-width: 90vw;
    }
}

/* Плашка о старом опросе стоит перед шапкой шага — без отбивки она липнет
   к заголовку и читается как его часть. */
.erpds-optic-diag__stale {
    margin-bottom: 12px;
}