/* ======================================================================
 * Мелкие правки органов управления поверх темы.
 *
 * Здесь то, что относится не к одной странице, а к элементу вообще, и что
 * нельзя чинить правкой style.css: он собран сборщиком и переписывается
 * целиком.
 * ====================================================================== */

/* Кнопка внутри цветной плашки.
 *
 * Плашки в этой теме сплошные и задают своему содержимому цвет текста: белый
 * на синей, тёмный на жёлтой. Кнопка же приносила свой фон — у btn-default он
 * почти белый, — и белый текст плашки ложился на белую кнопку: подпись
 * «Скачать файл выплаты» на светлой теме была не видна вовсе.
 *
 * Поэтому кнопка не приносит своих цветов, а берёт цвет плашки: contour в
 * currentColor контрастен фону по построению, на любой плашке и в любой теме.
 * Подсветка при наведении — нейтральная серая: она читается и на светлом, и
 * на тёмном фоне. */
.alert .btn-default,
.alert .btn-light,
.alert .btn-secondary,
.alert .btn-outline-secondary,
.alert .btn-outline-light,
.card .alert .btn-default.btn-flat,
.card .alert .btn-light.btn-flat {
    background-color: transparent;
    /* !important — единственный способ перебить `.card .btn-flat`, где рамка
       объявлена с ним же и почти прозрачным коричневым. */
    border: 1px solid currentColor !important;
    color: inherit;
    text-shadow: none;
    box-shadow: none;
}

.alert .btn-default:hover,
.alert .btn-light:hover,
.alert .btn-secondary:hover,
.alert .btn-outline-secondary:hover,
.alert .btn-outline-light:hover,
.alert .btn-default:focus,
.alert .btn-light:focus {
    background-color: rgba(127, 127, 127, .22);
    border-color: currentColor;
    color: inherit;
}

/* ======================================================================
 * Обсуждение под карточкой
 *
 * Раньше это была лента строк во всю ширину: подпись автора у левого края,
 * время у правого, между ними тысяча пикселей пустоты, а сами реплики
 * разделены сплошной чертой. Читать такое приходилось зигзагом.
 *
 * Теперь каждая реплика — карточка своей ширины: аватар, шапка с автором и
 * временем рядом, текст под ней. Системные отметки (переотправка, ответ
 * службы) отличаются оформлением — это не разговор, и мешать их с репликами
 * людей без различия нельзя.
 * ====================================================================== */

.cmt-list { display: flex; flex-direction: column; gap: 14px; }
.cmt-list__items { display: flex; flex-direction: column; gap: 10px; }

.cmt {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    max-width: 760px;
}

.cmt__avatar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: #eef1f4;
}

.cmt__body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px 9px;
    border: 1px solid #e4e9ee;
    border-radius: 8px;
    background: #fff;
}

.cmt__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 3px;
}

.cmt__author { font-weight: 600; font-size: .86rem; }

.cmt__when {
    font-size: .74rem;
    color: #8a949e;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin-left: auto;
}

.cmt__text { font-size: .88rem; line-height: 1.5; word-break: break-word; }

/* Мелкое действие в строке таблицы - «Отменить» у заказа в списках доставок
   (shipping/partials/cancel_button): контурная кнопка под размер текста строки,
   цвета - от .btn-outline-* темы, в тёмной они свои. */
.btn-row-action {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: .15rem .5rem;
    font-size: .75rem;
    line-height: 1.4;
    border-radius: 4px;
    white-space: nowrap;
}

.btn-row-action .fa {
    font-size: .7rem;
}

/* Значок кнопки внутри предупреждения. Тема отодвигает любой значок в .alert
   (.alert i: margin-right 1.25rem, line-height .5), и у «Вернуть в очередь»,
   «Обновить данные доставки», кнопок разбора расхождений значок уезжал от
   подписи. Свой значок предупреждения (.alert > h5 > .icon) это не задевает. */
.alert .btn i {
    margin-right: 0;
    line-height: 1;
    vertical-align: baseline;
}


/* Пара действий в строке - «Принять статус» и «Отклонить статус» у заказа с
   расхождением статусов (shipping/partials/status_check_buttons). В колонке
   списка доставок - столбиком одной ширины: колонка узкая, а кнопки разной
   длины друг под другом смотрелись лесенкой. В карточке заказа - в ряд
   (order-card.css). */
.status-check-actions {
    display: inline-grid;
    gap: .3rem;
    margin-top: .35rem;
}

/* Подсказки (Bootstrap; main.js включает их для всего, у чего есть title).
   Тема держала их ниже фиксированной шапки и окон (z-index 1029): у значков
   шапки верх подсказки со стрелкой уходил под неё, в окне заказа подсказки не
   было бы видно вовсе. 1070 - как у самого Bootstrap. Цвета - переменными: в
   тёмной теме подложка светлее страницы, иначе подсказка сливается с фоном.
   Цветные варианты темы (.tooltip-primary и др.) специфичнее и остаются. */
.tooltip { z-index: 1070; }
.tooltip.show { opacity: 1; }
.tooltip-inner {
    max-width: 280px;
    padding: .35rem .6rem;
    border-radius: 4px;
    background-color: var(--tip-bg, #2b333d);
    color: var(--tip-ink, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    line-height: 1.4;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: var(--tip-bg, #2b333d); }
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: var(--tip-bg, #2b333d); }
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--tip-bg, #2b333d); }
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: var(--tip-bg, #2b333d); }

/* Подсветка в тексте (<mark>): драйверы курьерок выделяют ею несовпавшие части
   адреса - в ленте заказа и в списке доставок. Мягкий маркер вместо жёлтой
   плашки шаблона: цвет текста свой, чтобы читалось и в моноширинной системной
   записи. Цвета - переменными, тёмная тема (theme-dark.css) задаёт свои;
   clone - чтобы перенос строки не обрезал подложку. */
mark,
.mark {
    padding: 0 .2em;
    border-radius: 3px;
    background-color: var(--mark-bg, #fdefb8);
    color: var(--mark-ink, #5a4300);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Системная отметка: не реплика, а запись самой системы. Отсюда и приглушённый
   фон, и моноширинный шрифт — в таких записях номера, а не слова. */
.cmt--system .cmt__body {
    background: #f7f9fb;
    border-color: #e7ecf1;
    border-left: 3px solid #c3ced9;
}

.cmt--system .cmt__author { color: #6c757d; }

.cmt--system .cmt__text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    line-height: 1.45;
    color: #4a555f;
}

/* Внутренняя запись: её видят только те, у кого есть доступ в админский
   раздел, клиент - нет. Тёплая кромка и отметка - чтобы сотрудник не принял
   её за то, что читает клиент. */
.cmt--internal .cmt__body {
    background: #fffaf0;
    border-color: #f0e3c4;
    border-left: 3px solid #e0b252;
}

.cmt__mark {
    padding: 1px 7px;
    border-radius: 10px;
    background: #fdf0cf;
    color: #8a6100;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

.cmt-list__empty {
    margin: 0;
    padding: 12px 14px;
    border: 1px dashed #dfe4e9;
    border-radius: 8px;
    font-size: .85rem;
    color: #8a949e;
}

.cmt-form {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 760px;
    padding-top: 4px;
}

.cmt-form .send-comment { flex: 1 1 auto; }


/* Подпись единиц измерения рядом с полем — «кг», «см».
 *
 * В style.css у .input-group-append .input-group-text задан цвет #c9c8c8:
 * светло-серый по светло-серой подложке #e9ecef, то есть почти невидимый.
 * В разметке это лечили инлайновым color:#000, а инлайн бьёт любое правило
 * темы — и в тёмной подпись становилась чёрной по тёмному, то есть невидимой
 * уже там. Инлайны убраны, цвет задаётся здесь; тёмная тема перекрывает его
 * своим правилом на .input-group-text, оно специфичнее. */
.input-group-append .input-group-text,
.input-group-prepend .input-group-text { color: #495057; }

/* Текст, окрашенный цветом статуса.
 *
 * Цвет приходит из базы и подбирался под белый фон: из восемнадцати статусов
 * одиннадцать на тёмной подложке не читаются, «Отмененная доставка» (#2a2a2a)
 * даёт 1,10:1. Хелпер status_ink() отдаёт оба цвета переменными, а выбор
 * делает CSS — на сервере это решить нельзя, тему ещё и скрипт в шапке ставит
 * из локального хранилища. */
.st-ink { color: var(--c-light); }

/* Кнопка очистки одиночного select2.
 *
 * Тема ставит крестик абсолютно у левого края поля (left: 10px), а текст
 * значения начинается там же: крестик налезал на первую букву и читался как
 * часть значения - «×BeePharm». Кнопка очистки включена у всех select2
 * кабинета (main.js), так что это было у любого выбранного значения. Ставим
 * крестик справа, перед стрелкой, где его и держит сам select2, а тексту
 * оставляем место, чтобы длинное значение обрезалось раньше крестика. Место -
 * только когда крестик показан: у пустого поля он не рисуется.
 */
.select2-container .select2-selection--single .select2-selection__clear {
    left: auto;
    right: 30px;
    padding: 0 4px;
    opacity: .55;
}

.select2-container .select2-selection--single .select2-selection__clear:hover {
    opacity: 1;
}

.select2-container .select2-selection--single:has(.select2-selection__clear) .select2-selection__rendered {
    padding-right: 52px;
}

/* Множественный select2 - в лад с одиночным.
 *
 * Кнопку «очистить всё» select2.min.css темы рисует серой плашкой (#a1a1a1,
 * 29x38, с отступами): рядом с полупрозрачным крестиком одиночного поля она
 * выглядела чужой и сталкивала выбранное на вторую строку. Делаем её таким же
 * крестиком.
 *
 * Выбранные значения тема красит по кругу в пять ярких цветов (nth-child): цвет
 * ничего не значит, а пестрит. Чипы - нейтральные, как в строке применённых
 * фильтров (--f-chip-*, filters.css); :nth-child(n) - чтобы перебить
 * специфичность тех правил. Тёмная тема задаёт свои (theme-dark.css). */
/* Крестик - справа по центру поля, как у одиночного, и место под него: в
   потоке он занимал первую строку, и длинное значение уходило под него. */
.select2-container--default .select2-selection--multiple { position: relative; }
.select2-container--default .select2-selection--multiple:has(.select2-selection__clear) { padding-right: 30px; }

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    float: none;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-weight: 700;
    line-height: 1;
    opacity: .55;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear:hover { opacity: 1; }

.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(n) {
    border: 1px solid var(--f-chip-border);
    background: var(--f-chip-bg);
    color: var(--f-chip-ink);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove { color: var(--f-chip-muted); }
.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover { color: var(--f-chip-ink); }

/* Подсказка пустого множественного поля. select2 ставит полю поиска ширину по
 * тексту подсказки в момент запуска, и если поле было скрыто (свёрнутая панель
 * фильтров, неактивная вкладка), ширина оставалась нулевой - подсказки не было
 * видно вовсе. Пока ничего не выбрано, поле - во всю ширину. Цвет подсказки -
 * как у одиночного поля. Когда выбранное есть, select2 оставляет placeholder=""
 * - а Chrome считает и такое поле «показывающим подсказку»: пустой текст
 * исключаем явно. */
.select2-container--default .select2-selection--multiple .select2-search--inline:has(.select2-search__field:placeholder-shown:not([placeholder=""])),
.select2-container--default .select2-selection--multiple .select2-search__field:placeholder-shown:not([placeholder=""]) {
    width: 100% !important;
}

/* Когда выбранное есть, а список не в фокусе, поле поиска сворачивается в
   точку: иначе оно переносилось на свою строку (за длинным чипом - даже узкой
   полоской), и под чипами оставалась пустая. Само поле остаётся в разметке и
   принимает фокус; в фокусе и при открытом списке - как обычно. */
.select2-container--default:not(.select2-container--focus):not(.select2-container--open) .select2-selection--multiple .select2-search--inline:not(:has(.select2-search__field:placeholder-shown:not([placeholder=""]))) {
    width: 1px;
    height: 0;
    margin: 0;
    overflow: hidden;
}

.select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
    color: var(--f-field-placeholder);
    opacity: 1;
}

/* Плашка защиты подтверждённого движения склада (stock/partials/movement_lock):
   пояснение слева, кнопка разблокировки или блокировки справа; на узком
   экране кнопка уходит под текст. */
.movement-lock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.movement-lock__text {
    flex: 1 1 20rem;
    min-width: 0;
}

.movement-lock__form {
    margin: 0;
}