/* Статусные строки таблиц (Devices, Groups, Notifiers, Alarm actions,
   Scheduler, Zone aliases, URL converter, URL shortener).

   БЫЛО: сплошная заливка именованными цветами Plum/Gray с !important.
   Проблемы: залитая строка убивала читаемость текста; именованные константы
   ничего не знают о тёмной теме (белый текст на Plum давал контраст ниже нормы,
   а Gray съедал и текст, и иконки); статус передавался ТОЛЬКО цветом и для
   дальтоников не читался вовсе.

   СТАЛО: левая цветная полоса 3px + очень слабая (8%) заливка акцентом.
   Цвета берутся из переменных палитры MudBlazor, поэтому тёмная тема
   подхватывается автоматически. Текстовый дубль статуса («Alarm», «MCU absent»)
   добавлен чипами в самих страницах — статус читается и без различения цветов.

   !important больше НЕ НУЖЕН. Заливка задаётся через background-image
   (linear-gradient из одного цвета), а полосатость (.mud-table-striped) и
   подсветка при наведении красят background-color. Это разные слои одного и
   того же элемента: background-image всегда рисуется поверх background-color,
   поэтому спор специфичности исчез, а hover-подсветка при этом сохранилась.

   Полоса слева вешается на первую ячейку строки, а не на сам <tr>:
   у таблиц border-collapse: collapse, и box-shadow на <tr> в этом режиме
   отрисовывается браузерами непоследовательно. */

/* --- Тревога: устройство/оповещатель сейчас сработали ---

   Заливка была 8 % и полоса 3 px: по отзыву с проверки строку в тревоге трудно было
   отличить от спокойной, особенно на светлой теме, где полосатость таблицы даёт свой
   собственный оттенок примерно той же силы. Подняли до 18 % и 5 px — цвет по-прежнему
   берётся из палитры, поэтому обе темы остаются согласованными. */
.mud-table-row.row-alarm,
.mud-table-row.row-device-active,   /* legacy-имя, оставлено для совместимости */
.mud-table-row.row-notifier-active {
    background-image: linear-gradient(rgba(var(--mud-palette-error-rgb), 0.18),
                                      rgba(var(--mud-palette-error-rgb), 0.18));
}

.mud-table-row.row-alarm > td:first-child,
.mud-table-row.row-device-active > td:first-child,
.mud-table-row.row-notifier-active > td:first-child {
    box-shadow: inset 5px 0 0 var(--mud-palette-error);
}

/* --- Авария оборудования: MCU не отвечает (zone aliases) --- */
.mud-table-row.row-fault {
    background-image: linear-gradient(rgba(var(--mud-palette-warning-rgb), 0.08),
                                      rgba(var(--mud-palette-warning-rgb), 0.08));
}

.mud-table-row.row-fault > td:first-child {
    box-shadow: inset 3px 0 0 var(--mud-palette-warning);
}

/* --- Выключено (Enabled = false) --- */
.mud-table-row.row-disabled,
.mud-table-row.row-device-disabled,   /* legacy-имя, оставлено для совместимости */
.mud-table-row.row-notifier-disabled {
    background-image: linear-gradient(var(--mud-palette-action-disabled-background),
                                      var(--mud-palette-action-disabled-background));
}

.mud-table-row.row-disabled > td:first-child,
.mud-table-row.row-device-disabled > td:first-child,
.mud-table-row.row-notifier-disabled > td:first-child {
    box-shadow: inset 3px 0 0 var(--mud-palette-lines-default);
}

/* Текст выключенной строки приглушаем — ещё один некрасочный признак статуса.
   text-secondary остаётся в пределах нормы по контрасту в обеих темах. */
.mud-table-row.row-disabled > td,
.mud-table-row.row-device-disabled > td,
.mud-table-row.row-notifier-disabled > td {
    color: var(--mud-palette-text-secondary);
}

/* --- Перенос длинных значений в ячейках ---

   В системе есть неразрывные строки: BaseName вида 7206101187676757515332
   и перечисления зон 80-95-61-F2/33-66-C7-E8/64-8E-29-56/1B-CA-63-99.
   Без переноса такая ячейка задаёт минимальную ширину колонки, таблица
   растягивается за край окна и появляется горизонтальная прокрутка страницы.

   Именно overflow-wrap: anywhere, а не break-word: только anywhere учитывается
   при расчёте min-content, то есть реально позволяет колонке сузиться.

   Правило намеренно только для <td>: если разрешить перенос и в заголовках,
   их min-content тоже станет в один символ, и браузер сожмёт колонки до
   «Bas e Na me». Заголовки остаются неразрывными и задают минимум ширины,
   а длинное значение в теле переносится внутри этой ширины. */
td.mud-table-cell {
    overflow-wrap: anywhere;
}

/* Заголовки колонок не переносятся вовсе.
   Правило выше запрещает перенос по буквам только в <td>; в <th> перенос по словам
   всё равно давал «Base / Name» и раздувал шапку в две-три строки, а при нескольких
   узких колонках браузер ломал заголовки почти по слогам. Неразрывный заголовок
   задаёт колонке честный минимум ширины: не поместилось — таблица прокручивается
   внутри своего контейнера, а не сминается в нечитаемую кашу.
   Селектор намеренно только по <thead>: заголовки групп (GroupHeaderTemplate)
   тоже рисуются тегом <th>, но живут в <tbody> и переносить их можно и нужно.

   И только внутри .ems-table-responsive: там колонки умеют уходить при нехватке
   ширины, поэтому неразрывный заголовок ничего не ломает. В таблице, которая
   прятать колонки не умеет, тот же запрет просто добавил бы ей прокрутки. */
.ems-table-responsive thead.mud-table-head th.mud-table-cell {
    white-space: nowrap;
}

/* ---------- Таблица, которая умеет ужиматься ----------

   Ширина считается от КОНТЕЙНЕРА таблицы, а не от окна браузера: слева стоит
   выдвижное меню, и при одном и том же окне 1280 таблице достаётся то ~980 px
   (меню раскрыто), то ~1230 px (свёрнуто). Медиазапрос по окну этой разницы
   не видит и прятал бы колонки не вовремя — то рано, то поздно.

   Порядок, в котором колонки уходят, — от наименее нужного в списке к нужному.
   На устройствах: сперва свободный текст Description, затем сырой идентификатор
   Base Name, затем Last Zone (последние два не пропадают, а переезжают второй
   строкой под именем). На оповещателях: Auto cancel, затем RF Name, затем Text.
   Колонка имени и колонка действий не прячутся никогда. */
.ems-table-responsive {
    container-type: inline-size;
    container-name: emstable;
}

/* Второй строкой под именем показываем то, чему не хватило своей колонки: данные
   не пропадают, а переезжают. Контейнер стоит всегда (пустой flex не даёт высоты),
   показываются только те его части, чьи колонки в текущей ширине скрыты. */
.ems-cell-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    font-size: .75rem;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
}

.ems-cell-sub > * {
    display: none;
}

@container emstable (max-width: 1150px) {
    .ems-col-description,
    .ems-col-autocancel {
        display: none;
    }

    /* Миниатюра — первое, чем жертвуем: она украшает строку, но не опознаёт её,
       а забирала ~90 px, из-за которых название устройства переносилось в три строки */
    .ems-cell-thumb {
        display: none;
    }
}

@container emstable (max-width: 900px) {
    .ems-col-basename,
    .ems-col-rfname {
        display: none;
    }

    /* Base Name из скрытой колонки — под именем устройства: идентификатор нужен,
       чтобы сопоставить строку с наклейкой на самом устройстве */
    .ems-sub-basename {
        display: inline;
    }

    /* Поля ячеек 16 px на сторону — это ~160 px пустоты на пять колонок; на планшете
       они отбираются у названия устройства, которое иначе переносится по слогам */
    .ems-table-responsive th.mud-table-cell,
    .ems-table-responsive td.mud-table-cell {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* кнопки строки тоже поджимаются: сама иконка остаётся прежнего размера,
       уменьшается только воздух вокруг неё */
    .ems-col-actions .mud-icon-button {
        padding: 6px;
    }
}

@container emstable (max-width: 780px) {
    .ems-col-lastzone,
    .ems-col-text {
        display: none;
    }

    .ems-sub-lastzone {
        display: inline;
    }
}

/* Колонка действий не переносится и не сжимается: до неё нужно доставать всегда */
.ems-col-actions {
    white-space: nowrap;
    width: 1%;
}

/* Свободное место достаётся имени, а не колонке кнопок: при table-layout: auto
   браузер иначе раздаёт остаток поровну, и «Actions» из трёх иконок оказывалась
   шире колонки с названием устройства */
.ems-col-name {
    width: 100%;
}

/* Чип-подпись статуса в строке: не должен раздувать высоту плотной таблицы */
.row-status-chip.mud-chip {
    margin: 0 0 0 8px;
    height: 20px;
}

/* Своя строка в таблице пользователей: удаление или понижение себе роли выбрасывает
   на страницу входа, поэтому строка выделена полосой слева, как и прочие статусы. */
.mud-table-row.row-self > td:first-child {
    box-shadow: inset 3px 0 0 var(--mud-palette-info);
}

.mud-table-row.row-self {
    background-image: linear-gradient(var(--mud-palette-action-default-hover),
                                      var(--mud-palette-action-default-hover));
}