/* ============================================================================
   erp-ui.css — общий слой оформления ERP.
   Заменяет inline-стили (style="...") в Razor-представлениях и скриптах.

   Соглашения:
   - Именование BEM с префиксом erp-: erp-block__element--modifier.
   - Состояния выносятся в отдельные классы erp-is-*.
   - Значения, вычисляемые на сервере или в JS (цвета условного форматирования,
     координаты, проценты), передаются ТОЛЬКО через CSS Custom Properties
     (--erp-*), см. раздел "Динамические значения" внизу файла.
   - Классы erp-grid-* / erp-pivot-* живут в erp-grid.css / erp-pivot.css и
     сохраняют исторически сложившуюся схему именования.
   ========================================================================== */

/* Перенесено из inline-блока <style> в _LayoutNew.cshtml. */
@font-face {
    font-family: Montserrat;
    src: url("../fonts/Montserrat.ttf");
}

:root {
    /* Палитра статусов. Значения взяты 1:1 из вытесняемых inline-стилей. */
    --erp-color-danger: red;
    --erp-color-danger-strong: firebrick;
    --erp-color-success: green;
    --erp-color-success-soft: yellowgreen;
    --erp-color-info: royalblue;
    --erp-color-link: blue;
    --erp-color-muted: gray;
    --erp-color-inverse: white;
    --erp-color-warning-soft: darksalmon;
    --erp-color-hint: lightblue;
    --erp-color-ink: black;
    --erp-color-alert: #bd362f;

    /* Статусы планирования старта проекта (Views/Planning/List.cshtml).
       Набор закрытый, значения взяты 1:1 из вытесняемых inline-стилей. */
    --erp-color-status-opened: #E1D928;
    --erp-color-status-cancelled: #B20000;
    --erp-color-status-production: #007F46;

    /* Кадровые отчёты: «лучше среднего» / «хуже среднего» и сроки испытательного
       срока. Значения взяты 1:1 из вытесняемых inline-стилей. */
    --erp-color-tenure-above: #009B65;
    --erp-color-tenure-below: #D1343A;
    --erp-color-probation-overdue: #D50800;
    --erp-color-probation-soon: #00A867;

    /* Фоны-подсветки. */
    --erp-surface-plain: white;
    --erp-surface-muted: lightgrey;
    --erp-surface-smoke: whitesmoke;
    --erp-surface-warning: yellow;
    --erp-surface-danger: lightpink;
    --erp-surface-accent: #C9DAF8;
    --erp-surface-accent-strong: #4F81BD;
    --erp-surface-sand: #efe5af;
    --erp-surface-stone: #C3C3C3;
    --erp-surface-sky: aliceblue;
    --erp-surface-salmon: lightsalmon;
    --erp-surface-info-soft: #D9EDF7;
    --erp-surface-ash: #D9D9D9;
    --erp-surface-success: green;
    --erp-surface-attention: darkorange;
    --erp-surface-error: red;
    --erp-surface-conflict: #FF7775;
    --erp-surface-pending: rgba(255, 140, 0, 0.1);
    --erp-surface-lilac: rgba(217, 210, 233, 0.5);
    --erp-surface-haze: rgba(173, 216, 230, 0.2);
    --erp-surface-verdant: rgba(0, 128, 0, 0.1);

    /* Направления в плане стартов проектов: мобильная и заказная разработка. */
    --erp-surface-frost: #D8ECFF;
    --erp-surface-cantaloupe: #FFE1C1;

    /* Статусы заявок на подбор персонала и заявок по кандидатам.
       Наборы закрытые, значения взяты 1:1 из вытесняемых inline-стилей. */
    --erp-surface-lemon: #FFFFA8;
    --erp-surface-mint: #ABFF99;
    --erp-surface-silver: #C0C0C0;
    --erp-surface-blush: #FFB9B5;
    --erp-surface-cream: #FFF7C4;
    --erp-surface-peach: #FFEAD1;
    --erp-surface-apricot: #FFBC7A;
    --erp-surface-rose: #FF999E;
    --erp-surface-lime: #DCFFCE;

    /* Типографика. */
    --erp-font-size-micro: 8px;
    --erp-font-size-tiny: 9px;
    --erp-font-size-small: 11px;
    --erp-font-size-base: 12px;
    --erp-font-size-medium: 14px;
    --erp-font-size-large: 20px;
    --erp-font-size-caption: 9pt;
    --erp-font-size-note: 11pt;
    --erp-font-size-subtitle: 12pt;
    --erp-font-size-title: 15pt;

    /* Вертикальный ритм. */
    --erp-space-xs: 3px;
    --erp-space-sm: 5px;
    --erp-space-md: 8px;
    --erp-space-lg: 10px;
    --erp-space-xl: 15px;
    --erp-space-2xl: 20px;
    --erp-space-3xl: 30px;
    --erp-space-4xl: 40px;
}

/* ============================================================================
   1. Состояния

   Уже есть в site.css и НЕ дублируются здесь:
   .hided (display:none), .pointer (cursor:pointer), .div-cleared (clear:both),
   .center-div (text-align:center), .table-full (width:100% !important).
   ========================================================================== */

.erp-is-dimmed {
    opacity: 0.5;
}

.erp-is-scrollable {
    overflow: auto;
}

.erp-is-inline {
    display: inline;
}

.erp-is-block {
    display: block;
}

/* Подложка в левом нижнем углу под основным содержимым. */
.erp-underlay {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: -1;
    text-align: center;
}

/* ============================================================================
   2. Типографика
   ========================================================================== */

.erp-text--micro {
    font-size: var(--erp-font-size-micro);
}

.erp-text--tiny {
    font-size: var(--erp-font-size-tiny);
}

.erp-text--small {
    font-size: var(--erp-font-size-small);
}

.erp-text--base {
    font-size: var(--erp-font-size-base);
}

.erp-text--medium {
    font-size: var(--erp-font-size-medium);
}

.erp-text--large {
    font-size: var(--erp-font-size-large);
}

.erp-text--strong {
    font-weight: bold;
}

.erp-text--normal {
    font-weight: normal;
}

.erp-text--italic {
    font-style: italic;
}

.erp-text--nowrap {
    white-space: nowrap;
}

.erp-text--strike {
    text-decoration: line-through;
}

.erp-text--left {
    text-align: left;
}

.erp-text--center {
    text-align: center;
}

.erp-text--right {
    text-align: right;
}

/* Смысловые цвета текста. */
.erp-text--danger {
    color: var(--erp-color-danger);
}

.erp-text--danger-strong {
    color: var(--erp-color-danger-strong);
}

.erp-text--success {
    color: var(--erp-color-success);
}

.erp-text--success-soft {
    color: var(--erp-color-success-soft);
}

.erp-text--info {
    color: var(--erp-color-info);
}

.erp-text--link {
    color: var(--erp-color-link);
}

.erp-text--inverse {
    color: var(--erp-color-inverse);
}

.erp-text--warning {
    color: var(--erp-color-warning-soft);
}

.erp-text--hint {
    color: var(--erp-color-hint);
}

/* Явно заданный базовый цвет текста. Нужен там, где цвет переключается между
   чёрным и красным и «просто не задавать цвет» нельзя: строку могут
   перекрасить обратно из JS. */
.erp-text--ink {
    color: var(--erp-color-ink);
}

/* Просроченное событие проекта (Views/ProjectEvent/EventList.cshtml). Отдельный токен,
   а не .colorRed из site.css: там #9d261d, а здесь было #bd362f. */
.erp-text--alert {
    color: var(--erp-color-alert);
}

/* Статус строки в плане стартов проектов: открыт / отменён / в продакшене.
   Значение по умолчанию (#000000) покрывается .erp-text--ink. */
.erp-status--opened {
    color: var(--erp-color-status-opened);
}

.erp-status--cancelled {
    color: var(--erp-color-status-cancelled);
}

.erp-status--production {
    color: var(--erp-color-status-production);
}

/* Незаполненная дата проекта (DateTime.MinValue) в списке проектов: текст
   «01.01.0001» схлопывается до нулевого кегля, а не убирается из разметки. */
.erp-date--empty {
    font-size: 0;
}

/* То же в списке сотрудников. Селектор с .table-personals намеренно длиннее:
   правило .table-personals tbody td { font-size: 13px } из site.css имеет
   специфичность (0,1,2) и перебило бы одиночную утилиту .erp-date--empty. */
.table-personals tbody td.erp-date--empty {
    font-size: 0;
}

/* Отчёт «Жизненный цикл сотрудника»: срок работы в отделе выше или ниже
   среднего по отделу. */
.erp-tenure--above {
    color: var(--erp-color-tenure-above);
}

.erp-tenure--below {
    color: var(--erp-color-tenure-below);
}

/* Список сотрудников на испытательном сроке: срок уже истёк / истекает
   в ближайшие две недели. */
.erp-probation--overdue {
    color: var(--erp-color-probation-overdue);
}

.erp-probation--soon {
    color: var(--erp-color-probation-soon);
}

/* Часто повторяющаяся комбинация «неакцентный подзаголовок». */
.erp-subtitle {
    font-weight: normal;
    font-size: var(--erp-font-size-caption);
    color: var(--erp-color-muted);
}

/* Тот же кегль, но цвет наследуется от контекста. */
.erp-subtitle--plain {
    color: inherit;
}

.erp-subtitle--bold {
    font-weight: bolder;
}

.erp-subtitle--note {
    font-weight: normal;
    font-size: var(--erp-font-size-note);
}

/* Заголовок группы строк в таблице. */
.erp-subtitle--group {
    font-size: var(--erp-font-size-subtitle);
    color: inherit;
}

.erp-subtitle--section {
    font-weight: lighter;
    font-size: var(--erp-font-size-title);
}

/* ============================================================================
   3. Поверхности и подсветка
   ========================================================================== */

.erp-surface--plain {
    background-color: var(--erp-surface-plain);
}

.erp-surface--muted {
    background-color: var(--erp-surface-muted);
}

.erp-surface--smoke {
    background-color: var(--erp-surface-smoke);
}

.erp-surface--warning {
    background-color: var(--erp-surface-warning);
}

.erp-surface--danger {
    background-color: var(--erp-surface-danger);
}

.erp-surface--accent {
    background-color: var(--erp-surface-accent);
}

.erp-surface--accent-strong {
    background-color: var(--erp-surface-accent-strong);
}

.erp-surface--sand {
    background-color: var(--erp-surface-sand);
}

.erp-surface--stone {
    background-color: var(--erp-surface-stone);
}

.erp-surface--sky {
    background-color: var(--erp-surface-sky);
}

/* Подсветка строк уровня «направление» в отчёте «Часы-сводная» (#FFA07A). */
.erp-surface--salmon {
    background-color: var(--erp-surface-salmon);
}

/* Строка сработавшего риска в таблицах рисков (bootstrap-овский info-фон). */
.erp-surface--info-soft {
    background-color: var(--erp-surface-info-soft);
}

/* Строки блоков «Новые риски после старта проекта» и «Черновики». */
.erp-surface--ash {
    background-color: var(--erp-surface-ash);
}

.erp-surface--success {
    background-color: var(--erp-surface-success);
}

.erp-surface--attention {
    background-color: var(--erp-surface-attention);
}

.erp-surface--error {
    background-color: var(--erp-surface-error);
}

/* Конфликт данных в строке таблицы (например, заявка на пересмотр зарплаты
   сразу по нескольким направлениям). */
.erp-surface--conflict {
    background-color: var(--erp-surface-conflict);
}

/* Строка со сменёнными данными, ожидающая подтверждения
   (Views/VacationConfirm/VacationConfirmListTablePartial.cshtml). Полупрозрачный
   фон, чтобы подсветка при наведении оставалась заметной. */
.erp-surface--pending {
    background-color: var(--erp-surface-pending);
}

/* Фон строки в списке отпусков (PersonVacationItemViewModel.ItemBackgroundCssClass).
   Красим именно ячейки: так правило переигрывает .table-striped (оно красит tr)
   ровно так же, как это делал вытесненный inline-стиль на <tr>, и при этом
   не мешает :hover из .table-hover. */
.erp-row--plain > td {
    background-color: var(--erp-surface-plain);
}

.erp-row--pending > td {
    background-color: var(--erp-surface-pending);
}

.erp-row--lilac > td {
    background-color: var(--erp-surface-lilac);
}

.erp-row--haze > td {
    background-color: var(--erp-surface-haze);
}

.erp-row--verdant > td {
    background-color: var(--erp-surface-verdant);
}

/* Подсветка строки по направлению в плане стартов проектов. */
.erp-surface--frost {
    background-color: var(--erp-surface-frost);
}

.erp-surface--cantaloupe {
    background-color: var(--erp-surface-cantaloupe);
}

/* Подсветка строки по статусу заявки на подбор персонала
   (Views/RecruitmentRequest/List.cshtml): новая / в работе / закрыта / приостановлена. */
.erp-surface--lemon {
    background-color: var(--erp-surface-lemon);
}

.erp-surface--mint {
    background-color: var(--erp-surface-mint);
}

.erp-surface--silver {
    background-color: var(--erp-surface-silver);
}

.erp-surface--blush {
    background-color: var(--erp-surface-blush);
}

/* Подсветка строки по статусу заявки по кандидату
   (Views/RecruitmentRequest/CandidateRequestList.cshtml): отправлена /
   собеседование / повторное / отказ / вышел на работу. */
.erp-surface--cream {
    background-color: var(--erp-surface-cream);
}

.erp-surface--peach {
    background-color: var(--erp-surface-peach);
}

.erp-surface--apricot {
    background-color: var(--erp-surface-apricot);
}

.erp-surface--rose {
    background-color: var(--erp-surface-rose);
}

.erp-surface--lime {
    background-color: var(--erp-surface-lime);
}

/* Серая строка в полосатой таблице (вложенное оборудование в
   Views/Equipment/List.cshtml). Красим ячейки, а не сам <tr>: правило
   .table-striped > tbody > tr:nth-of-type(odd) имеет специфичность (0,2,2) и
   перебило бы одиночный класс на строке. */
.erp-row--muted > td {
    background-color: var(--erp-surface-muted);
}

/* ============================================================================
   4. Раскладка
   ========================================================================== */

/* Панель действий над таблицей/формой. */
.erp-toolbar {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
}

.erp-toolbar--center {
    justify-content: center;
    align-items: center;
}

/* Тот же тулбар внутри блока действий строки таблицы. Селектор повторяет
   .table-editable tr td div.action-not-opacity (0,2,3) из site.css: то правило задаёт
   display: table и перебило бы одиночную утилиту .erp-toolbar. */
.table-editable tr td div.action.erp-toolbar,
.table-editable tr td div.action-not-opacity.erp-toolbar,
.table-editable tr td div.action-visible.erp-toolbar {
    display: flex;
}

.erp-float--left {
    float: left;
}

.erp-float--right {
    float: right;
}

.erp-float--none {
    float: none;
}

/* Bootstrap-контейнер во всю ширину (ViewBag.ContainerTile). */
.container.erp-container--full {
    width: 100%;
}

.erp-block--flush {
    margin: 0;
    padding: 0;
}

.erp-block--relative {
    position: relative;
}

/* Отступы.
   ВНИМАНИЕ: site.css уже содержит .margin-top5/10/15/20/25, .margin-left5/10/15,
   .margin-right5, .margin-bottom10 и .margin-10 — их НЕ дублируем, используем как
   есть. Ниже только ступени, которых в site.css нет. Именование по значению:
   erp-mt (margin-top), erp-mr, erp-ml, erp-mb, erp-m, erp-p; neg = отрицательное. */
.erp-mt--2 {
    margin-top: 2px;
}

.erp-mt--3 {
    margin-top: var(--erp-space-xs);
}

.erp-mt--8 {
    margin-top: var(--erp-space-md);
}

.erp-mt--22 {
    margin-top: 22px;
}

.erp-mt--23 {
    margin-top: 23px;
}

.erp-mt--30 {
    margin-top: var(--erp-space-3xl);
}

.erp-mt--neg8 {
    margin-top: -8px;
}

.erp-mt--neg15 {
    margin-top: -15px;
}

.erp-mt--neg20 {
    margin-top: -20px;
}

.erp-mt--neg40 {
    margin-top: -40px;
}

.erp-mr--10 {
    margin-right: var(--erp-space-lg);
}

.erp-mr--15 {
    margin-right: var(--erp-space-xl);
}

.erp-mr--20 {
    margin-right: var(--erp-space-2xl);
}

.erp-mr--40 {
    margin-right: var(--erp-space-4xl);
}

.erp-mr--50 {
    margin-right: 50px;
}

.erp-ml--0 {
    margin-left: 0;
}

.erp-ml--20 {
    margin-left: var(--erp-space-2xl);
}

.erp-ml--45 {
    margin-left: 45px;
}

.erp-ml--650 {
    margin-left: 650px;
}

.erp-ml--neg15 {
    margin-left: -15px;
}

.erp-mb--0 {
    margin-bottom: 0;
}

.erp-mb--12 {
    margin-bottom: 12px;
}

.erp-m--0 {
    margin: 0;
}

.erp-m--20 {
    margin: var(--erp-space-2xl);
}

.erp-m--40 {
    margin: var(--erp-space-4xl);
}

.erp-m--auto {
    margin: auto;
}

/* Блок отчёта, выровненный по левому краю панели. */
.erp-m--report {
    margin: var(--erp-space-2xl) 0 var(--erp-space-2xl) -15px;
}

.erp-p--0 {
    padding: 0;
}

.erp-pt--0 {
    padding-top: 0;
}

.erp-pr--25 {
    padding-right: 25px;
}

/* Та же отбивка в ячейке bootstrap-таблицы. Отдельный селектор нужен потому,
   что .table > tbody > tr > td { padding: 8px } (0,1,3) и
   .table-condensed > tbody > tr > td { padding: 5px } (0,2,3) — сокращённая
   запись padding — перебивают одиночную утилиту (0,1,0). */
.table > tbody > tr > td.erp-pr--25,
.table > tbody > tr > th.erp-pr--25 {
    padding-right: 25px;
}

/* Иконка-действие в шапке панели (экспорт в Excel и т.п.):
   прижата вправо и поднята к базовой линии заголовка. */
.erp-panel-heading__action {
    float: right;
    margin-top: -17.5px;
}

/* Вариант с меньшим подъёмом (шапка без второй строки фильтров). */
.erp-panel-heading__action--tight {
    margin-top: -15px;
}

/* Всплывающий блок, координаты которому выставляет JS (jQuery .offset()). */
.erp-popup {
    display: none;
    position: absolute;
}

/* Маленькая иконка-действие рядом с текстом («детализация» и т.п.). */
.erp-inline-action {
    margin: 0 0 0 var(--erp-space-sm);
    padding: 0;
}

.erp-inline-action--tight {
    margin-left: 4px;
}

/* Заголовок группы в составе команды проекта. Отдельный класс, а не пара
   утилит, потому что у <p> нужно одновременно задать верхний отступ и погасить
   нижний margin из bootstrap. */
.erp-team-group__title {
    margin: var(--erp-space-lg) 0 0 0;
    font-weight: bold;
}

/* Кнопка «Добавить комментарий» в окне обработки CR: белый текст.
   Селектор из двух классов и с псевдоклассами: правило
   .reply-mainlink:hover в site.css имеет специфичность (0,2,0) и перебило бы
   одиночную утилиту .erp-text--inverse. */
.reply-mainlink.erp-comment-button,
.reply-mainlink.erp-comment-button:visited,
.reply-mainlink.erp-comment-button:hover {
    color: var(--erp-color-inverse);
}

/* ============================================================================
   5. Таблицы
   ========================================================================== */

.erp-align--middle,
.erp-table__cell--middle {
    vertical-align: middle;
}

/* То же выравнивание внутри bootstrap-таблицы. Отдельный селектор нужен потому,
   что правило .table > tbody > tr > td { vertical-align: top } из bootstrap имеет
   специфичность (0,1,3) и перебило бы одиночную утилиту (0,1,0). */
.table > thead > tr > th.erp-align--middle,
.table > thead > tr > th.erp-table__cell--middle,
.table > tbody > tr > td.erp-align--middle,
.table > tbody > tr > td.erp-table__cell--middle,
.table > tbody > tr > th.erp-align--middle,
.table > tbody > tr > th.erp-table__cell--middle {
    vertical-align: middle;
}

.erp-table__cell--top {
    vertical-align: top;
}

/* Выравнивание по нижней границе текста — используется и в ячейках таблиц,
   и для подписей рядом с чекбоксами в панелях фильтров. */
.erp-align--baseline {
    vertical-align: text-bottom;
}

/* Центрированная подпись внутри ячейки отчёта (частая пара text-align + сброс margin). */
.erp-cell-note {
    margin: 0;
    text-align: center;
}

/* Вариант «данных нет». */
.erp-cell-note--muted {
    text-align: center;
    color: var(--erp-color-muted);
}

/* Ячейка-заголовок группы строк, растянутая на всю ширину таблицы через colspan
   (Views/Buying/Index.cshtml): подпись по центру, правая граница убрана.
   !important повторяет вытесненный inline-стиль: правило
   .table-bordered > tbody > tr > td из bootstrap задаёт границу со
   специфичностью (0,2,3). */
.erp-table__group-cell {
    text-align: center;
    border-right: none !important;
}

/* Отчёт «Расхождение План/Факт» (Views/ResourcePlan/DifferenceResource.cshtml).
   Селекторы намеренно привязаны к .main-table: правила
   .main-table tr th:first-child и .main-table tr td:first-child из site.css
   имеют специфичность (0,2,2) и раньше перебивались вытесненным inline-стилем.
   Остальные свойства первой колонки (min/max-width, обрезка текста) сохраняются. */
.main-table tr th.erp-report__col--employee {
    width: 400px;
}

/* Групповая строка сотрудника: серый фон должен лечь и на первую ячейку. */
.main-table tr.erp-report__row--group > td {
    background-color: var(--erp-surface-muted);
}

/* Ячейка-заголовок с названием подразделения в «Сводном отчёте»
   (Views/Outsource/ConsolidatedReport.cshtml). Селектор привязан к .main-table и
   стоит после правила групповой строки: оба они (0,2,2), как и
   .main-table tr td:first-child { background: white } из site.css. */
.main-table tr td.erp-report__cell--highlight {
    background-color: var(--erp-surface-warning);
}

/* Заголовки колонок «платформа» и «комментарий» в таблице оценки
   (Views/Estimations/MakeEstimation.cshtml, View.cshtml). Специфичность повторяет
   site.css: .table-estimation thead tr th.table-estimation-platform (0,2,3) задаёт
   width: 50px, а .table-estimation thead tr (0,1,2) — white-space: nowrap;
   одиночные утилиты обоим правилам проиграли бы. */
.table-estimation thead tr th.erp-estimation__col--platform {
    width: 200px;
    white-space: normal;
    vertical-align: top;
}

.table-estimation thead tr th.erp-estimation__col--comment {
    width: 300px;
    white-space: normal;
    vertical-align: top;
}

/* Строка-заглушка «оценка загружается» — текст по центру. Селектор с tbody:
   .table-estimation tbody td { text-align: justify } из site.css имеет
   специфичность (0,1,2) и перебил бы .center-div. */
.table-estimation tbody td.table-estimation-loader-row {
    text-align: center;
}

/* Первая колонка (номер заявки) в списке заявок по кандидатам
   (Views/RecruitmentRequest/CandidateRequestList.cshtml). Перебивает
   .main-table tr td:first-child { width/min-width: 250px } (0,2,2) из site.css;
   max-width: 250px оттуда сохраняется, как и было с inline-стилем. */
.main-table tr td.erp-recruitment__cell--request {
    width: 50px;
    min-width: 50px;
}

/* Колонка с прикреплёнными файлами там же: длинные имена файлов рвём по
   символам. Селектор (0,2,1) перебивает
   .main-table td, .main-table th { white-space: nowrap } (0,1,1) из site.css. */
.main-table td.erp-recruitment__cell--files {
    width: 250px;
    max-width: 250px;
    white-space: normal;
    word-break: break-all;
}

/* Колонка «Отделы» в отчёте «Часы-сводная» (Views/Productivity/HoursReport.cshtml).
   Перебивает .hours-report-table th { min-width: 100px } из site.css. */
th.erp-report__col--departments {
    min-width: 180px;
}

/* Зелёная иконка «Отправить» в блоке действий строки таблицы.
   Специфичность намеренно высокая: правило
   .table-editable tr td div.action i { color: #333 } в site.css имеет (0,2,4)
   и перебило бы одиночную утилиту .erp-text--success. */
.table-editable tr td div.action i.erp-action-icon--success,
.table-editable tr td div.action-visible i.erp-action-icon--success,
.table-editable tr td div.action-not-opacity i.erp-action-icon--success {
    color: var(--erp-color-success);
}

/* Ячейка «Сотрудник» в списках персонала: аватар и ФИО в одну строку, белый фон
   перекрывает полосатость и подсветку строки. Отдельный класс, а не .a-person
   из site.css: у того есть переопределение в медиазапросе (white-space: normal;
   min-width: 160px), которого у вытесняемого inline-стиля не было. */
.erp-person-cell {
    white-space: nowrap;
    background-color: var(--erp-surface-plain);
}

/* Подпись дня недели в шапке календарных таблиц. */
.erp-calendar__weekday {
    margin-left: 9px;
    text-align: center;
}

/* Блок условных обозначений под календарём/отчётом. */
.erp-legend {
    margin: var(--erp-space-2xl);
}

/* Ширины колонок задаются классом на уровне таблицы, а не инлайном.
   Это намеренно утилитарный слой: фиксированные ширины в этом приложении
   назначаются точечно и семантического имени не имеют, поэтому шкала
   именуется по значению. Добавлять новые ступени только по факту нужды. */
.erp-w--15 {
    width: 15px;
}

.erp-w--20 {
    width: 20px;
}

.erp-w--25 {
    width: 25px;
}

.erp-w--30 {
    width: 30px;
}

.erp-w--40 {
    width: 40px;
}

.erp-w--50 {
    width: 50px;
}

.erp-w--70 {
    width: 70px;
}

.erp-w--80 {
    width: 80px;
}

.erp-w--90 {
    width: 90px;
}

.erp-w--100 {
    width: 100px;
}

.erp-w--110 {
    width: 110px;
}

.erp-w--120 {
    width: 120px;
}

.erp-w--130 {
    width: 130px;
}

.erp-w--150 {
    width: 150px;
}

.erp-w--180 {
    width: 180px;
}

.erp-w--200 {
    width: 200px;
}

.erp-w--220 {
    width: 220px;
}

.erp-w--250 {
    width: 250px;
}

.erp-w--260 {
    width: 260px;
}

.erp-w--300 {
    width: 300px;
}

.erp-w--350 {
    width: 350px;
}

.erp-w--400 {
    width: 400px;
}

.erp-w--500 {
    width: 500px;
}

.erp-w--pct5 {
    width: 5%;
}

.erp-w--pct30 {
    width: 30%;
}

.erp-w--pct35 {
    width: 35%;
}

.erp-w--pct50 {
    width: 50%;
}

.erp-w--pct55 {
    width: 55%;
}

.erp-w--full {
    width: 100%;
}

.erp-minw--25 {
    min-width: 25px;
}

.erp-minw--40 {
    min-width: 40px;
}

.erp-minw--100 {
    min-width: 100px;
}

.erp-minw--150 {
    min-width: 150px;
}

.erp-minw--210 {
    min-width: 210px;
}

.erp-minw--270 {
    min-width: 270px;
}

.erp-minw--300 {
    min-width: 300px;
}

.erp-maxw--100 {
    max-width: 100px;
}

.erp-maxw--150 {
    max-width: 150px;
}

.erp-maxw--200 {
    max-width: 200px;
}

.erp-maxw--300 {
    max-width: 300px;
}

.erp-maxw--500 {
    max-width: 500px;
}

.erp-maxw--600 {
    max-width: 600px;
}

.erp-minh--36 {
    min-height: 36px;
}

.erp-minh--55 {
    min-height: 55px;
}

.erp-h--20 {
    height: 20px;
}

.erp-h--30 {
    height: 30px;
}

.erp-h--100 {
    height: 100px;
}

.erp-h--400 {
    height: 400px;
}

.erp-h--45em {
    height: 45em;
}

/* Иконка-указатель «двойной отпуск» и подобные — поворот вместо inline-transform. */
.erp-icon--rotate90 {
    transform: rotate(90deg);
}

/* Укороченное многострочное поле в форме риска. Селектор с именем тега,
   потому что bootstrap задаёт textarea.form-control { height: auto } с
   большей специфичностью (0,1,1), чем одиночная утилита. */
textarea.erp-textarea--compact {
    height: 72px;
}

/* ============================================================================
   6. Динамические значения (исключение п.4 регламента)

   Значение вычисляется на сервере или в JS и передаётся ТОЛЬКО как
   CSS Custom Property. Сами свойства оформления остаются здесь.
   Пример: <td class="erp-cell--tinted" style="--erp-cell-bg: @cell.Color">
   ========================================================================== */

.erp-text--tinted {
    color: var(--erp-text-color);
}

.erp-cell--tinted {
    background-color: var(--erp-cell-bg);
}

/* Ячейка с произвольной заливкой, вычисленной на сервере: либо сплошной цвет,
   либо linear-gradient (несколько типов отпуска в одном периоде). Поэтому здесь
   краткая форма background, а не background-color. */
.erp-cell--painted {
    background: var(--erp-cell-paint);
}

/* Подсветка строки таблицы. Красим именно ячейки: так правило переигрывает
   .table-striped (оно красит tr) ровно так же, как это делал вытесненный
   inline-стиль на <tr>, и при этом не мешает :hover из .table-hover. */
.erp-row--tinted > td {
    background: var(--erp-row-bg);
}

.erp-cell--tinted-text {
    color: var(--erp-text-color);
    background-color: var(--erp-cell-bg);
}

/* Диагональная заливка «половина ячейки» для календарных отметок. */
.erp-cell--split {
    background-image: linear-gradient(to bottom right, var(--erp-split-from, white) 50%, var(--erp-split-to) 50%);
}

.erp-cell--split-up {
    background-image: linear-gradient(to top right, var(--erp-split-from) 50%, var(--erp-split-to) 50%);
}

/* Те же заливки, но для ячеек таблиц.

   Бандл DataTables (dt-1.11.5/fc-4.0.2) подключается в _LayoutNew ПОСЛЕ
   erp-ui.css и содержит правила
       tr.even td { background-color: #fff }
       tr.odd  td { background-color: #f9f9f9 }
   со специфичностью (0,1,2). Inline-стиль, который мы вытеснили, переигрывал их
   автоматически, а одиночная утилита (0,1,0) проигрывает — ячейка остаётся
   белой. Поэтому для табличного случая те же свойства повторяются со
   специфичностью (0,1,3). */
tbody > tr > td.erp-cell--tinted,
tbody > tr > th.erp-cell--tinted {
    background-color: var(--erp-cell-bg);
}

tbody > tr > td.erp-cell--tinted-text,
tbody > tr > th.erp-cell--tinted-text {
    background-color: var(--erp-cell-bg);
}

tbody > tr > td.erp-cell--painted,
tbody > tr > th.erp-cell--painted {
    background: var(--erp-cell-paint);
}

tbody > tr.erp-row--tinted > td,
tbody > tr.erp-row--tinted > th {
    background: var(--erp-row-bg);
}

/* Квадратик-образец цвета в легендах отчётов. */
.erp-swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid black;
    background-color: var(--erp-swatch-color);
}

.erp-swatch--bare {
    background-color: var(--erp-swatch-color);
}