/* =====================================================================
   Перекомпоновка перегруженных страниц панели.

   ПОЧЕМУ файл нужен: замечания владельца — «полей много, кнопок много,
   нагромождено», «кнопки построчно стоят», «создать счёт непонятно что
   это ссылка/кнопка». Разбирать это инлайновыми style="" в каждом
   .cshtml — снова получить кашу, поэтому правила собраны здесь.

   Все селекторы начинаются с bd-* и вешаются вручную на конкретные
   страницы: ничего из общего оформления (main.css, admin-theme.css,
   bootstrap) файл не перекрывает, соседние страницы не задевает.
   Плотность и тон — те же, что у бокового меню в admin-theme.css
   (скругление 10px, отступы ~.5rem .65rem, переходы .15s).
   ===================================================================== */

/* ---------------------------------------------------------------
   Горизонтальные поля страницы
   ПОЧЕМУ здесь: поля давал только бутстраповский container-fluid, который
   ставится в разметке рядом с bd-page. На пяти страницах при перекомпоновке
   его потеряли, и таблица прижималась к краю блока — замечание Заказчика
   от 17.08.2026 (список справочников, дополнительные работы, работы,
   позиции калькулятора, регистрация поставщика).
   Дописывать класс обратно в разметку — значит ждать, когда его забудут
   снова, поэтому поля заданы здесь. Только для случая, когда container
   отсутствует: иначе они сложились бы с бутстраповскими и стали вдвое
   больше, чем на остальных 34 страницах панели.
   Значение — то же, что у container-fluid: половина отступа сетки, 1.5rem/2.
   --------------------------------------------------------------- */
.bd-page:not(.container):not(.container-fluid) {
    padding-left: .75rem;
    padding-right: .75rem;
}

/* ---------------------------------------------------------------
   Кнопки страницы
   ПОЧЕМУ здесь: на клиентском макете (страницы бухгалтера) фирменным
   выкрашен только .btn-success, а .btn-primary остаётся синим бутстрапом —
   на фоне тёмно-сланцевой панели это выглядит чужеродно. Красим главную
   кнопку в фирменный цвет только внутри перекомпонованных страниц.
   --------------------------------------------------------------- */
.bd-page .btn-primary {
    background-color: var(--bd-primary);
    border-color: var(--bd-primary);
    color: #fff;
}
.bd-page .btn-primary:hover,
.bd-page .btn-primary:focus {
    background-color: var(--bd-primary-700);
    border-color: var(--bd-primary-700);
    color: #fff;
}
.bd-page .btn-outline-primary {
    color: var(--bd-primary);
    border-color: var(--bd-primary);
}
.bd-page .btn-outline-primary:hover {
    background-color: var(--bd-primary);
    border-color: var(--bd-primary);
    color: #fff;
}

/* ---------------------------------------------------------------
   Общее: шапка страницы, карточки, подписи
   --------------------------------------------------------------- */

/* Шапка: «Назад» слева, заголовок, ОДНО главное действие справа.
   Раньше заголовок растягивался на всю ширину (flex-grow-1 + text-center),
   и кнопки уезжали к самым краям экрана — их не связывали с заголовком. */
.bd-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin: .25rem 0 1rem;
}
.bd-head__title {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--bd-ink);
}
.bd-head__spacer { flex: 1 1 auto; }
.bd-head__actions { display: flex; align-items: center; gap: .4rem; }

.bd-card {
    background: var(--bd-surface);
    border: 1px solid var(--bd-line);
    border-radius: var(--bd-radius);
    box-shadow: var(--bd-shadow-sm);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}
.bd-card__title {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--bd-ink);
    margin: 0 0 .8rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--bd-line);
}

/* Подпись поля. ПОЧЕМУ не h4, как было: заголовочные размеры у каждой
   подписи кричали громче самих данных и растягивали страницу в ленту. */
.bd-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--bd-muted);
    margin-bottom: .25rem;
    letter-spacing: .2px;
}
.bd-hint {
    display: block;
    font-size: .78rem;
    color: var(--bd-muted);
    margin-top: .3rem;
}
.bd-muted { color: var(--bd-muted); }
.bd-dim { color: var(--bd-muted); opacity: .75; }

/* Короткие поля (суммы, даты, номера) не должны тянуться во всю ширину. */
.bd-field-narrow { max-width: 22rem; }

/* Цифры — моноширинные и по правому краю, чтобы столбец сумм читался. */
.bd-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Длинное значение (адрес, название) — переносим и обрезаем двумя
   строками с подсказкой в title, а не ломаем ширину колонки. */
.bd-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* То же обрезание, но БЕЗ разрыва посреди слова. Для адреса разрыв где
   угодно оправдан (одно длинное слово без пробелов иначе распирает
   колонку), а название раздела сметы так читать нельзя: получалось
   «Подготовительн ые работы». */
.bd-clamp--words { overflow-wrap: normal; word-break: normal; }

.bd-empty {
    color: var(--bd-muted);
    font-size: .85rem;
    padding: .35rem 0;
}

/* ---------------------------------------------------------------
   Таблицы списков
   --------------------------------------------------------------- */
/* Узкий экран: таблица прокручивается внутри своей рамки, а не давит
   колонки до нечитаемого («Москва, ул. …») и не тянет вбок всю страницу. */
.bd-table-wrap {
    overflow-x: auto;
    background: var(--bd-surface);
    border: 1px solid var(--bd-line);
    border-radius: var(--bd-radius);
}
/* Рамка и скругление — на обёртке, а не на самой таблице. Раньше здесь
   стоял overflow:hidden ради скругления, и он же ломал прилипание колонки
   действий: таблица становилась собственной областью прокрутки. */
.bd-table {
    width: 100%;
    min-width: 62rem;
    background: var(--bd-surface);
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9rem;
}
/* Список заказов: девять колонок с подписями, суммой и четырьмя метками
   этапов. В общие 62rem они не помещаются — браузер сжимал «Заказчика»
   и «Этапы» до одного слова в строке, а колонка документов заезжала под
   прилипшие действия. Даём таблице её настоящую ширину, а прокрутку
   берёт на себя рамка .bd-table-wrap: страница вбок при этом не уезжает. */
.bd-table--orders { min-width: 70rem; }

/* Подписи колонок здесь переносятся по словам. В общем правиле они стоят
   в одну строку, и «ХАРАКТЕРИСТИКА ОБЪЕКТА» с «ДОКУМЕНТЫ ПО ЗАКАЗУ» сами
   раздвигали свои колонки до 210 и 191 px — шире, чем нужно данным.
   Из-за этого таблица не помещалась в рамку, и вправо уезжала как раз
   колонка документов, которую заказчик просил видеть в строке.

   Оба класса в селекторе — не украшение: у общего правила
   «.bd-table thead th» та же вескость, и оно стоит ниже по файлу, поэтому
   с одним классом переопределения не выходит. */
.bd-table.bd-table--orders thead th { white-space: normal; }

.bd-table thead th {
    background: rgba(var(--awi-deep-navy-rgb),.045);
    color: var(--bd-muted);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: .6rem .7rem;
    border-bottom: 1px solid var(--bd-line);
    white-space: nowrap;
}
.bd-table td {
    padding: .6rem .7rem;
    border-top: 1px solid var(--bd-line);
    vertical-align: top;
}
.bd-table tbody tr:first-child td { border-top: none; }
.bd-table tbody tr.bd-row:hover > td { background: rgba(var(--awi-deep-navy-rgb),.03); }

/* Колонка действий прилипает к правому краю рамки. ПОЧЕМУ: на экране 1280
   под таблицу остаётся ~980 px (250 забирает боковое меню), таблица шире —
   и без этого главная кнопка «Открыть» уезжала бы за границу прокрутки. */
.bd-table th.bd-sticky-actions,
.bd-table td.bd-sticky-actions {
    position: sticky;
    right: 0;
    background: var(--bd-surface);
    /* Волосок вместо тени: на широком экране, где прокрутки нет, тень
       выглядела бы обрывом страницы, а волосок читается как разделитель. */
    border-left: 1px solid var(--bd-line);
}
.bd-table thead th.bd-sticky-actions { background: var(--bd-bg); }

/* Строка-подвал с деталями раскрывается под своей строкой заказа.
   Верхнюю границу убираем, чтобы деталь читалась как продолжение строки. */
.bd-table td.bd-detail-cell {
    padding: 0;
    border-top: none;
    background: rgba(var(--awi-deep-navy-rgb),.025);
}
.bd-detail-inner { padding: .9rem 1rem 1rem; }

/* Заголовок заказа в первой колонке */
.bd-row__id { font-weight: 600; font-size: .95rem; color: var(--bd-ink); }
.bd-row__sub { font-size: .8rem; color: var(--bd-muted); margin-top: .1rem; }

/* Ссылка должна выглядеть ссылкой. AdminLTE снимает подчёркивание со всех
   ссылок, из-за чего телефон и почта читались как обычный текст. */
.bd-row__sub a,
.bd-phone,
.bd-group__val a,
.bd-file__name {
    color: var(--bd-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bd-row__sub a:hover,
.bd-phone:hover,
.bd-group__val a:hover,
.bd-file__name:hover { color: var(--bd-primary-700); }

/* ---------------------------------------------------------------
   Счётчики документов в строке (вместо простыни ссылок)
   --------------------------------------------------------------- */
.bd-counts { display: flex; flex-wrap: wrap; gap: .3rem; }
.bd-count {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(var(--awi-deep-navy-rgb),.07);
    color: var(--bd-primary);
    border-radius: 7px;
    padding: .12rem .45rem;
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
}
/* Требует внимания — акцентный Sand Gold. Золотом писать нельзя (2,2:1 на белом),
   поэтому золото в заливке, а надпись тёмно-синяя. */
.bd-count--warn { background: rgba(var(--awi-sand-gold-rgb),.24); color: var(--bd-ink); }

/* ---------------------------------------------------------------
   Метка состояния в строке списка
   ПОЧЕМУ отдельная метка, а не просто слово: в списке по десятку строк,
   и глазами нужно ловить «отменён» и «на модерации» без чтения. Цвета —
   те же по смыслу, что у меток заказов на главной панели (IndexV2):
   новое — фирменный синий (Electric Blue), в работе — фирменный золотой
   (Sand Gold). Зелёного «завершено» в брендбуке нет, поэтому он оставлен
   прежним — придумывать фирменный зелёный нельзя.
   Отменённое красим приглушённо-серым: это конец истории, а не
   предупреждение, и краснотой список пестрить не должен.
   --------------------------------------------------------------- */
.bd-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .12rem .5rem;
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(var(--awi-deep-navy-rgb),.07);
    color: var(--bd-primary);
}
/* Новое, ещё никем не взято */
.bd-status--new { background: rgba(var(--awi-electric-blue-rgb),.12); color: var(--bd-link); }
/* Идёт работа / отправлено на модерацию — требует внимания */
.bd-status--work { background: rgba(var(--awi-sand-gold-rgb),.26); color: var(--bd-ink); }
/* Завершено, опубликовано, согласовано */
.bd-status--done { background: rgba(46,107,69,.13); color: #2E6B45; }
/* Черновик, ещё не показан никому */
.bd-status--draft { background: rgba(var(--awi-deep-navy-rgb),.08); color: var(--bd-muted); }
/* Отменено */
.bd-status--off { background: rgba(var(--awi-deep-navy-rgb),.06); color: var(--bd-muted); }

/* Пояснение под меткой: этап, автор, счётчик файлов. */
.bd-status + .bd-row__sub { margin-top: .25rem; }

/* ---------------------------------------------------------------
   Действия
   --------------------------------------------------------------- */
.bd-actions { display: flex; align-items: center; gap: .3rem; justify-content: flex-end; }

/* Кнопка «Ещё»: одинаковая на всех трёх страницах, чтобы человек
   узнавал её как «здесь спрятано остальное». */
.bd-more {
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .55rem;
    --bs-btn-font-size: .82rem;
}

/* Кнопка-переключатель подписывает своё действие: закрытая панель — «Ещё»,
   раскрытая — «Свернуть». Раньше подпись не менялась, и по кнопке нельзя было
   понять, что тем же нажатием панель закрывается. Состояние берём из
   aria-expanded — его проставляет сам Bootstrap. */
.bd-toggle .bd-toggle__close { display: none; }
.bd-toggle[aria-expanded="true"] .bd-toggle__open { display: none; }
.bd-toggle[aria-expanded="true"] .bd-toggle__close { display: inline; }

/* Подвал раскрытой панели: «Свернуть» под всеми блоками. */
.bd-detail-foot {
    display: flex;
    justify-content: flex-end;
    padding-top: .7rem;
}

/* Мелкая кнопка-значок внутри раскрытой панели. Раньше это были голые
   иконки-ссылки: непонятно, что нажимается. */
.bd-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 8px;
    border: 1px solid var(--bd-line);
    background: var(--bd-surface);
    color: var(--bd-muted);
    font-size: .8rem;
    line-height: 1;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bd-icon-btn:hover {
    background: rgba(var(--awi-deep-navy-rgb),.07);
    color: var(--bd-primary);
    border-color: var(--bd-primary);
}
.bd-icon-btn--danger:hover { background: rgba(var(--awi-signal-red-rgb),.10); color: var(--bd-danger); border-color: var(--bd-danger); }

/* ---------------------------------------------------------------
   Раскрытая панель заказа: документы, сгруппированные по смыслу
   --------------------------------------------------------------- */
.bd-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .85rem;
    /* Пустые блоки не растягиваются под высоту соседей: иначе «Доп. работ
       пока нет» занимало столько же места, сколько список из пяти счетов. */
    align-items: start;
}
.bd-group {
    background: var(--bd-surface);
    border: 1px solid var(--bd-line);
    border-radius: 10px;
    padding: .6rem .7rem .7rem;
}
.bd-group__title {
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--bd-muted);
    margin-bottom: .45rem;
}
.bd-group__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .22rem 0;
}
.bd-group__row + .bd-group__row { border-top: 1px dashed var(--bd-line); }
.bd-group__name {
    font-size: .84rem;
    color: var(--bd-ink);
    margin-right: auto;
    overflow-wrap: anywhere;
}
.bd-group__val { font-size: .86rem; color: var(--bd-ink); overflow-wrap: anywhere; }

/* Строка документа: номер — действия — статус */
.bd-doc {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
    padding: .25rem 0;
}
.bd-doc + .bd-doc { border-top: 1px dashed var(--bd-line); }
.bd-doc__no { font-size: .82rem; font-weight: 600; min-width: 3.2rem; }
.bd-doc__status { font-size: .74rem; color: var(--bd-muted); width: 100%; }

/* ---------------------------------------------------------------
   Формы: сетка полей
   --------------------------------------------------------------- */
/* Короткие поля — по два-четыре в ряд, длинные — на всю ширину.
   Раньше все пять полей счёта стояли одной узкой колонкой слева,
   а две трети экрана пустовали. */
.bd-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: .75rem 1rem;
}
.bd-col-3  { grid-column: span 3; }
.bd-col-4  { grid-column: span 4; }
.bd-col-6  { grid-column: span 6; }
.bd-col-8  { grid-column: span 8; }
.bd-col-12 { grid-column: span 12; }

/* До планшета короткие поля идут по два в ряд, ниже — по одному.
   Четыре коротких поля в ряд держатся вплоть до 992 px: даже в админ-панели
   с боковым меню при экране 1280 на них остаётся ~230 px каждому. */
@media (max-width: 991.98px) {
    .bd-col-3 { grid-column: span 6; }
}
@media (max-width: 767.98px) {
    .bd-col-3, .bd-col-4, .bd-col-6, .bd-col-8 { grid-column: span 12; }
}

/* ---------------------------------------------------------------
   Плитки файлов (дизайн-проект)
   --------------------------------------------------------------- */
.bd-thumbs { display: flex; flex-wrap: wrap; gap: .6rem; }
.bd-thumb {
    position: relative;
    width: 150px;
    height: 150px;
    border: 1px solid var(--bd-line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bd-bg);
}
.bd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-thumb__actions {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    gap: 4px;
    background: rgba(255,255,255,.9);
    border-radius: 8px;
    padding: 2px;
}
.bd-thumb__actions .bd-icon-btn { width: 1.6rem; height: 1.6rem; border-color: transparent; }

/* Маленький снимок прямо в строке таблицы (список услуг). Раньше картинка
   вставлялась с width="50" в разметке и, если файл не подгрузился, строка
   прыгала по высоте. Размер и рамку задаём здесь, высота строки постоянная. */
.bd-mini-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    display: block;
    border: 1px solid var(--bd-line);
    border-radius: 8px;
    background: var(--bd-bg);
}

/* Имя приложенного файла в раскрытой панели. Люди выкладывают файлы с
   именами в сотню знаков («specialist-s-zapisyu-v-nrs-kto-ehto-i-zachem…»),
   и такое имя целиком распирало блок на пол-экрана. Показываем одной
   строкой с многоточием, полное имя — в подсказке. */
.bd-file-link {
    display: block;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .84rem;
}
.bd-file-link + .bd-file-link { margin-top: .15rem; }

/* Файл-строка (чертежи): имя слева, действие справа — раньше значок
   удаления стоял отдельно от файла и в него было легко не попасть. */
.bd-file {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--bd-line);
    border-radius: 10px;
    padding: .4rem .5rem;
    background: var(--bd-surface);
    max-width: 30rem;
}
.bd-file + .bd-file { margin-top: .4rem; }
.bd-file__name { font-size: .85rem; overflow-wrap: anywhere; margin-right: auto; }
.bd-file__icon { width: 22px; height: 22px; flex: 0 0 auto; }

/* ---------------------------------------------------------------
   Нижняя панель сохранения
   --------------------------------------------------------------- */
.bd-formbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-top: 1px solid var(--bd-line);
    padding-top: .9rem;
    margin-top: .25rem;
}
.bd-formbar__spacer { flex: 1 1 auto; }

/* =====================================================================
   Дизайн-проект: дорожка статусов, область загрузки, липкая полоса.
   Добавлено по замечаниям владельца к первой перекомпоновке.
   ===================================================================== */

/* --- Дорожка статусов: одно место вместо двух механизмов --- */
.bd-track {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: stretch;
}
.bd-track__step {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 12rem;
    min-width: 12rem;
    padding: .6rem .75rem;
    border: 1px solid var(--bd-line);
    border-radius: 10px;
    background: #fff;
}
.bd-track__step--now { border-color: var(--bd-primary); box-shadow: inset 2px 0 0 var(--bd-primary); }
.bd-track__step--done { opacity: .72; }
.bd-track__dot {
    width: .55rem; height: .55rem; border-radius: 50%;
    background: var(--bd-line); flex: none;
}
.bd-track__step--now .bd-track__dot { background: var(--bd-primary); }
.bd-track__step--done .bd-track__dot { background: var(--bd-secondary); }
.bd-track__label { font-weight: 600; font-size: .92rem; color: var(--bd-ink); }
.bd-track__badge {
    margin-left: auto; font-size: .75rem; color: var(--bd-muted);
    background: var(--bd-bg); border-radius: 999px; padding: .1rem .5rem;
}
.bd-track__btn { margin-left: auto; }

/* --- Область загрузки вместо голого поля выбора файла --- */
.bd-drop {
    display: block;
    border: 1px dashed var(--bd-line);
    border-radius: 10px;
    padding: .9rem 1rem;
    background: var(--bd-bg);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.bd-drop:hover { border-color: var(--bd-secondary); }
.bd-drop--over { border-color: var(--bd-primary); background: #fff; }
.bd-drop--filled { border-style: solid; background: #fff; }
.bd-drop__title { display: block; font-size: .9rem; color: var(--bd-ink); }
.bd-drop__hint { display: block; font-size: .8rem; color: var(--bd-muted); margin-top: .15rem; }
.bd-drop__chosen:not(:empty) {
    display: block; margin-top: .4rem; font-size: .85rem;
    color: var(--bd-primary); word-break: break-word;
}

/* --- Полоса сохранения липнет к низу: страница длинная --- */
.bd-formbar--sticky {
    position: sticky;
    bottom: 0;
    z-index: 5;
    border-top: 1px solid var(--bd-line);
    box-shadow: 0 -6px 18px -12px rgba(var(--awi-deep-navy-rgb),.35);
}

/* ---------------------------------------------------------------
   Поиск и разбивка длинных списков

   ПОЧЕМУ появилось: справочники отдавались одной страницей целиком.
   «Товары» — 5725 строк и 2,7 МБ разметки на один запрос, прайс доп.
   работ — 571 КБ. Такая страница долго грузится, а нужную позицию
   в ней ищут прокруткой. Теперь у списка есть поиск по названию и
   страницы, а разметка приходит порциями.
   --------------------------------------------------------------- */
.bd-search {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}
.bd-search__input {
    flex: 1 1 18rem;
    max-width: 26rem;
    padding: .4rem .65rem;
    font-size: .9rem;
    color: var(--bd-ink);
    background: var(--bd-surface);
    border: 1px solid var(--bd-line);
    border-radius: 8px;
}
.bd-search__input:focus {
    outline: none;
    border-color: var(--bd-primary);
    box-shadow: 0 0 0 3px rgba(var(--awi-deep-navy-rgb),.10);
}
.bd-search__found {
    font-size: .82rem;
    color: var(--bd-muted);
    margin-left: auto;
    white-space: nowrap;
}

.bd-pager {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    margin-top: .75rem;
}
.bd-pager__info {
    font-size: .82rem;
    color: var(--bd-muted);
    margin-right: auto;
    white-space: nowrap;
}
.bd-pager__link {
    display: inline-block;
    min-width: 2.1rem;
    padding: .25rem .5rem;
    text-align: center;
    font-size: .85rem;
    color: var(--bd-ink);
    background: var(--bd-surface);
    border: 1px solid var(--bd-line);
    border-radius: 8px;
    text-decoration: none;
}
.bd-pager__link:hover {
    border-color: var(--bd-primary);
    color: var(--bd-primary);
    text-decoration: none;
}
/* Текущая страница — не ссылка: некуда вести. */
.bd-pager__link--now {
    background: var(--bd-primary);
    border-color: var(--bd-primary);
    color: #fff;
    font-weight: 600;
    cursor: default;
}
.bd-pager__link--now:hover { color: #fff; border-color: var(--bd-primary); }
.bd-pager__gap { color: var(--bd-muted); padding: 0 .15rem; }

/* ---------------------------------------------------------------
   Вкладки раздела
   ПОЧЕМУ: раздел заказов состоит из трёх непересекающихся наборов
   (активные / завершённые / отменённые), но на самой странице списка
   не было видно ни того, какой набор открыт, ни того, что есть другие:
   переключаться можно было только через боковое меню. Вкладка — самый
   короткий способ показать и то и другое сразу.
   --------------------------------------------------------------- */
.bd-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin: 0 0 .9rem;
    border-bottom: 1px solid var(--bd-line);
    padding-bottom: .45rem;
}
.bd-tab {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 500;
    color: var(--bd-ink);
    background: transparent;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bd-tab:hover {
    background: rgba(var(--awi-deep-navy-rgb),.06);
    color: var(--bd-primary);
    text-decoration: none;
}
.bd-tab.is-active {
    background: var(--bd-primary);
    border-color: var(--bd-primary);
    color: #fff;
    font-weight: 600;
}
.bd-tab.is-active:hover { background: var(--bd-primary-700); color: #fff; }

/* Счётчик на вкладке. Приглушаем, чтобы цифра не спорила с названием. */
.bd-tab__count {
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    opacity: .7;
}
.bd-tab.is-active .bd-tab__count { opacity: .85; }

/* Вкладка-переход со сводной страницы панели: это не раздел заказов,
   а отдельная выборка, и она не должна выглядеть равной трём основным. */
.bd-tab--extra { font-style: italic; }

/* ---------------------------------------------------------------
   Четыре этапа заказа
   ПОЧЕМУ метки, а не текст: заказчик просил «сверху сублимация, ниже
   развёртка» — то есть в строке нужен слепок всех четырёх этапов, а не
   рассказ. Четыре коротких слова с цветом состояния читаются одним
   взглядом, подробности — в подсказке и в раскрытии.
   --------------------------------------------------------------- */
.bd-stages { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.bd-stages__sum { margin-top: 0; }

.bd-stage {
    display: inline-flex;
    align-items: center;
    border-radius: 7px;
    padding: .1rem .4rem;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: help;
}
/* Закрыт */
.bd-stage--done { background: rgba(46,107,69,.13); color: #2E6B45; }
/* Идёт — единственное состояние, которое требует внимания */
.bd-stage--work { background: rgba(var(--awi-sand-gold-rgb),.26); color: var(--bd-ink); }
/* Не начат: знаем, что работа по этапу не пошла */
.bd-stage--idle { background: rgba(var(--awi-deep-navy-rgb),.07); color: var(--bd-muted); }
/* Данных нет — определять этап не по чему. Приглушаем сильнее «не начат»:
   это разные вещи, и путать их нельзя. */
.bd-stage--none {
    background: transparent;
    color: var(--bd-muted);
    opacity: .6;
    border: 1px dashed var(--bd-line);
}

/* Развёртка этапа в раскрытой панели: состояние — название — чем определено. */
.bd-group--wide { grid-column: 1 / -1; }

/* ---------------------------------------------------------------
   Карточка человека: блоки колонками, а не строгими рядами.

   Было на широком экране: блоки выстраивались в ряд, под ними тянулись две
   почти пустые полосы во всю ширину («Снимки и работы», «Паспорт и счета»),
   а в последнем ряду оставался одинокий блок и пустота справа. Читалось
   редко и рвано.

   Стало: колонки набираются сверху вниз и выравниваются по высоте, поэтому
   дыр в конце не остаётся, а блоки разной высоты (три строки и десять)
   ложатся плотно. Ширина колонки задана, а не их число, — раскладка сама
   подстраивается под 1280, 1440 и 1920.

   Отдельный класс, а не правка общей раскладки: ту же .bd-groups используют
   раскрытые панели списка заказов, и там сетка выверена под своё.
   --------------------------------------------------------------- */
.bd-groups--card {
    display: block;
    column-width: 16rem;
    column-gap: .85rem;
}
.bd-groups--card > .bd-group {
    /* Блок не разрывается между колонками: половина «Паспорта» в одной
       колонке, половина в другой читалась бы как два разных блока. */
    break-inside: avoid;
    margin-bottom: .85rem;
}
/* Блоку с картинками нужна вся ширина — он выходит из колонок. */
.bd-groups--card > .bd-group--wide { column-span: all; }
.bd-stage-row {
    display: grid;
    grid-template-columns: 6rem minmax(10rem, 1fr) minmax(12rem, 2fr);
    align-items: baseline;
    gap: .4rem;
    padding: .3rem 0;
}
.bd-stage-row + .bd-stage-row { border-top: 1px dashed var(--bd-line); }
.bd-stage-row__name { font-size: .84rem; color: var(--bd-ink); }
.bd-stage-row__detail { font-size: .8rem; color: var(--bd-muted); }
/* На узком экране колонки складываются в строки, иначе название этапа
   («Проектно-сметная и дизайнерская документация») сжимается в столбик. */
@media (max-width: 62rem) {
    .bd-stage-row { grid-template-columns: 1fr; gap: .15rem; }
}

/* ---------------------------------------------------------------
   Документы по заказу в строке
   ПОЧЕМУ ссылками, а не счётчиками: заказчик просил, чтобы смета, график
   и договор открывались прямо отсюда и чтобы рядом стояла их дата —
   «договор там от такого-то числа, ткнул — открывается сам договор».
   --------------------------------------------------------------- */
.bd-docs { display: flex; flex-direction: column; gap: .1rem; align-items: flex-start; }
.bd-doclink {
    font-size: .82rem;
    color: var(--bd-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bd-doclink:hover { color: var(--bd-primary-700); }

/* ---------------------------------------------------------------
   Блоки главной панели (AdminPanel/IndexV2)
   ПОЧЕМУ отдельная обвязка, а не карточка AdminLTE: на главной рядом
   стоят таблица заказов и переписка, и у карточки AdminLTE заголовок,
   рамка и тень заданы своим набором цветов. Здесь тот же вид, что у
   переработанных списков — рамка и скругление из токенов панели.
   --------------------------------------------------------------- */
/* Две половины главной: заказы и переписка. На широком экране рядом, на узком
   друг под другом — таблице заказов нужно не меньше 44rem, и в трети экрана
   она бы прокручивалась вбок.

   ПОЧЕМУ своя раскладка, а не сетка бутстрапа: в панели поверх бутстрапа лежит
   AdminLTE со своей, более старой сеткой, и подключён он НИЖЕ. Его правило для
   «.col-12» гасит «.col-xxl-8» — при любой ширине обе колонки получались во всю
   ширину и вставали друг под друга. Проверено в браузере при 1440. */
.bd-dash {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
/* Порог именно 1500, а не «широкий экран вообще»: при 1400 боковое меню забирает
   250 px, таблице заказов остаётся 744 при нужных ей 770 — и она начинала
   прокручиваться вбок внутри своей рамки. Проверено в браузере. */
@media (min-width: 1500px) {
    .bd-dash { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.bd-panel {
    background: var(--bd-surface);
    border: 1px solid var(--bd-line);
    border-radius: var(--bd-radius);
    box-shadow: var(--bd-shadow-sm);
    overflow: hidden;
    height: 100%;
}
.bd-panel__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--bd-line);
}
.bd-panel__title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--bd-ink);
    margin: 0;
}
/* Подпись у заголовка объясняет, что именно в блоке: «в работе, не более 12»,
   «по последним заказам». Без неё блок обещает весь список, а показывает часть. */
.bd-panel__note { font-size: .78rem; color: var(--bd-muted); }
.bd-panel__link {
    font-size: .82rem;
    color: var(--bd-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.bd-panel__link:hover { color: var(--bd-primary-700); }
.bd-panel__empty { padding: 1.1rem .9rem; font-size: .85rem; color: var(--bd-muted); }
/* Рамку таблице внутри блока снимаем: она уже есть у самого блока. */
.bd-panel__table { border: none; border-radius: 0; }

/* Таблицы главной: четыре-шесть колонок вместо девяти в списке заказов, поэтому
   и минимальная ширина меньше общей — иначе таблица прокручивалась бы вбок даже
   там, где помещается целиком. Один и тот же класс на всех таблицах главной:
   заказы, заявки, услуги, акты, счета, поставки. */
.bd-table--dash { min-width: 46rem; }

/* ---------------------------------------------------------------
   Переписка на главной: список разговоров
   ПОЧЕМУ списком, а не окном разговора: сам разговор уже сделан во
   вкладке «Переписка» карточки заказа. Здесь видно только, где говорили
   последними и где ждут непрочитанные, — и переход туда.
   --------------------------------------------------------------- */
.bd-chats { display: flex; flex-direction: column; }
.bd-chat {
    display: block;
    padding: .6rem .9rem;
    border-top: 1px solid var(--bd-line);
    color: var(--bd-ink);
    text-decoration: none;
}
.bd-chats .bd-chat:first-child { border-top: none; }
.bd-chat:hover { background: rgba(var(--awi-deep-navy-rgb),.03); color: var(--bd-ink); }
.bd-chat__top { display: flex; align-items: center; gap: .4rem; }
.bd-chat__name { font-weight: 600; font-size: .88rem; }
.bd-chat__time { font-size: .76rem; color: var(--bd-muted); margin-left: auto; }
/* Непрочитанные — акцентный Sand Gold заливкой, надпись тёмная: белым по
   золоту 2,3:1, не читается. Зелёного и красного здесь быть не должно —
   непрочитанное это не ошибка и не успех. */
.bd-chat__unread {
    background: var(--bd-secondary);
    color: var(--bd-ink);
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1;
    padding: .2rem .42rem;
    min-width: 1.35rem;
    text-align: center;
}
.bd-chat__who { font-size: .8rem; color: var(--bd-muted); margin-top: .1rem; }
/* Последняя реплика — две строки с многоточием: разговор в списке нужен
   для узнавания, а не для чтения целиком. */
.bd-chat__last {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-size: .82rem;
    color: var(--bd-ink);
    margin-top: .2rem;
}
.bd-chat__author { color: var(--bd-muted); }

/* ---------------------------------------------------------------
   Дизайн-проекты внутри дизайн-работы: плитка с обложкой

   ПОЧЕМУ не .bd-thumbs: там квадрат 150×150 под голый снимок (паспорт,
   визуализация). Здесь у плитки есть содержание — название, состояние,
   сколько снимков и правок, — а обложка нужна, чтобы узнать проект
   в лицо, и по ней же в него переходят.

   ПОЧЕМУ не строка таблицы: у дизайн-проекта обложка и есть главное.
   В таблице она сжималась бы до значка, по которому ничего не узнать.
   --------------------------------------------------------------- */
.bd-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .85rem;
    align-items: start;
}
.bd-tile {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bd-line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bd-surface);
}
/* Обложка одной высоты у всех: снимки разнокалиберные, иначе ряд рвётся. */
.bd-tile__cover {
    display: block;
    height: 8.5rem;
    background: var(--bd-bg);
    border-bottom: 1px solid var(--bd-line);
}
.bd-tile__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Проект, к которому ничего не приложено: не пустая рамка, а слова. */
.bd-tile__cover--none {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: .5rem;
    font-size: .78rem;
    color: var(--bd-muted);
}
.bd-tile__body {
    padding: .6rem .7rem .7rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.bd-tile__name {
    font-size: .9rem;
    font-weight: 600;
    color: var(--bd-ink);
    overflow-wrap: anywhere;
}
.bd-tile__no { font-size: .78rem; font-weight: 400; color: var(--bd-muted); }
/* Описание — две строки с многоточием: в плитке оно для узнавания,
   а читают его целиком уже в самом проекте. */
.bd-tile__text {
    font-size: .82rem;
    color: var(--bd-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.bd-tile__foot { margin-top: .15rem; }