/**
 * Проектный слой поверх Tabler.
 *
 * Здесь только то, чего в дизайн-системе нет: адаптеры сторонних виджетов,
 * состояния строк кампаний, индикатор загрузки графика и пара мест, где
 * шрифтовая иконка расходится с svg-разметкой Tabler. Всё остальное —
 * компоненты и утилиты Tabler.
 *
 * Размеры, цвета и отступы берутся из токенов --tblr-*, чтобы значения
 * не расползались по файлу магическими числами.
 *
 * Правила оформления ссылок намеренно НЕ задаются: у Tabler своя развитая
 * каскадная логика (a:hover подчёркивает, а .btn/.nav-link/.dropdown-item/
 * .page-link/.navbar-brand/.card-link — нет). Любое своё правило вроде
 * `a:not(.btn):hover` перебивает её по специфичности и подчёркивает иконки
 * в меню.
 *
 * Файлы в portal/assets/tabler/ — копии пакета байт-в-байт, руками не правятся
 * (их публикует app\assets\TablerAsset). Всё, что нужно переопределить, живёт
 * здесь: site.css подключается последним, при равной специфичности выигрывает.
 */

/* ─── Адаптеры сторонних виджетов ─────────────────────────────────────────── */

/* Select2 (kartik) собран на хексах эпохи Bootstrap 5 (#fff, #ced4da, #212529)
   и в тёмной теме остаётся светлым. Привязываем его к токенам — виджет
   не трогаем, только перекрашиваем. */
.select2-dropdown,
.select2-container--krajee-bs5 .select2-selection {
    background-color: var(--tblr-bg-forms);
    border-color: var(--tblr-border-color);
    color: var(--tblr-body-color);
}

.select2-container--krajee-bs5 .select2-selection--single .select2-selection__rendered,
.select2-container--krajee-bs5 .select2-selection__clear,
.select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--tblr-body-color);
}

.select2-container--krajee-bs5 .select2-selection--single .select2-selection__placeholder,
.select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__placeholder,
.select2-container--krajee-bs5 .select2-search__field::placeholder,
.select2-container--krajee-bs5 .select2-results__option[aria-disabled=true] {
    color: var(--tblr-secondary-color);
}

.select2-container--krajee-bs5 .select2-search--dropdown .select2-search__field {
    background: var(--tblr-bg-forms);
    border-color: var(--tblr-border-color);
    color: var(--tblr-body-color);
}

.select2-container--krajee-bs5 .select2-results__option[aria-selected] {
    background-color: var(--tblr-bg-forms);
    color: var(--tblr-body-color);
}

.select2-container--krajee-bs5 .select2-results__option.select2-results__option--selected,
.select2-container--krajee-bs5 .select2-results__option[aria-selected=true] {
    background-color: var(--tblr-active-bg);
    color: var(--tblr-body-color);
}

.select2-container--krajee-bs5 .select2-results__option--highlighted[aria-selected] {
    background-color: var(--tblr-primary);
    color: var(--tblr-primary-fg);
}

.select2-container--krajee-bs5 .select2-results__group {
    background-color: var(--tblr-bg-surface-secondary);
    border-color: var(--tblr-border-color);
    color: var(--tblr-body-color);
}

.select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__choice {
    background-color: var(--tblr-bg-surface-secondary);
    border-color: var(--tblr-border-color);
    color: var(--tblr-body-color);
}

.select2-container--krajee-bs5.select2-container--disabled .select2-selection,
.select2-container--krajee-bs5.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
    background-color: var(--tblr-bg-forms-disabled);
}

.select2-container--krajee-bs5.select2-container--open:not(.select2-container--disabled) .select2-selection,
.select2-container--krajee-bs5:not(.select2-container--disabled) .select2-selection:focus,
.select2-container--krajee-bs5:not(.select2-container--disabled) .select2-dropdown {
    border-color: var(--tblr-primary);
}

/* Каретка — картинка с зашитой тёмной обводкой (#343a40), на тёмном фоне её не видно */
[data-bs-theme=dark] .select2-container--krajee-bs5 .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme=dark] .select2-container--krajee-bs5.select2-container--open .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 11l-6-6-6 6'/%3e%3c/svg%3e");
}

/* FileInput (kartik) рисует рамки, фон прогресса и плашки хексами эпохи Bootstrap 3
   (#ddd, #aaa, #eee) — в тёмной теме это светлые линии и прямоугольники.
   Привязываем к токенам, сам виджет не трогаем. */
.file-preview,
.krajee-default .file-preview-text,
.krajee-default .file-preview-html,
.krajee-default.file-preview-frame,
.krajee-default.file-preview-frame:not(.file-preview-error):hover,
.file-drop-zone {
    border-color: var(--tblr-border-color);
}

.file-drop-zone.clickable:hover,
.file-drop-zone.clickable:focus,
.file-highlighted {
    border-color: var(--tblr-primary);
}

.file-highlighted {
    background-color: var(--tblr-active-bg);
}

.file-drop-zone-title,
.krajee-default .file-footer-caption,
.file-loading:before {
    color: var(--tblr-secondary-color);
}

.krajee-default .file-thumb-progress .progress,
.kv-upload-progress .progress {
    background-color: var(--tblr-border-color);
}

.file-caption-disabled {
    background-color: var(--tblr-bg-forms-disabled);
}

.file-error-message {
    color: var(--tblr-danger);
    background-color: var(--tblr-danger-lt);
    border-color: var(--tblr-danger);
}

/* ─── Таблицы ─────────────────────────────────────────────────────────────── */

/* Служебная колонка — по содержимому: порядковый номер, ID, кнопки действий.
   width:1% + nowrap заставляет браузер ужать её до минимума, а освободившееся
   место уходит колонкам с данными (иначе авторазметка отдаёт номеру 90px
   под одну цифру, а кнопкам — треть таблицы).
   Фиксированные px не годятся: на последней странице номер четырёхзначный,
   а кнопок в колонке бывает и три, и четыре. */
.grid-col-fit {
    width: 1%;
    white-space: nowrap;
}

/* ─── Проектные состояния ─────────────────────────────────────────────────── */

/* Действие недоступно из-за привязанных сущностей: по клику ничего не делает,
   но остаётся наводимым — на hover висит попап с причиной. Поэтому .disabled
   (pointer-events: none) не подходит. Гасим прозрачностью: так класс работает
   и на сплошной кнопке, и на ghost-иконке, не трогая её цвет. */
.btn-blocked {
    opacity: var(--tblr-btn-disabled-opacity);
    cursor: not-allowed;
    --tblr-btn-hover-bg: transparent;
    --tblr-btn-hover-border-color: transparent;
    --tblr-btn-hover-color: var(--tblr-btn-color);
}

/* ─── Баннеры рекламной кампании (views/ad-campaign) ──────────────────────── */

/* Превью баннера: одинаковая высота, чтобы карточки в ряду не разъезжались,
   и contain — логотипы и фото нельзя обрезать по краям. */
.banner-thumb {
    height: 140px;
    object-fit: contain;
    background-color: var(--tblr-bg-surface-secondary);
}

/* То же место, когда картинки у баннера нет */
.banner-thumb-empty {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--tblr-spacer-6);
    color: var(--tblr-secondary-color);
    background-color: var(--tblr-bg-surface-secondary);
}

/* Плитка «Добавить баннер» — обычная карточка, но с пунктирной рамкой */
.banner-add {
    border-style: dashed;
    cursor: pointer;
}

.banner-add:hover {
    border-color: var(--tblr-primary);
    background-color: var(--tblr-active-bg);
}

/* Иконка в пункте меню: Tabler рассчитан на svg фиксированного размера,
   у шрифтовой иконки размер задаётся font-size */
.nav-link-icon > .ti {
    display: block;
    font-size: var(--tblr-nav-link-icon-height, 1.25rem);
}

/* То же для кнопок-иконок (колонка действий в таблицах и т.п.).
   --tblr-btn-icon-size меньше у .btn-sm, поэтому размер подстраивается сам */
.btn-icon > .ti {
    display: block;
    font-size: var(--tblr-btn-icon-size, 1.25rem);
}

/* Карточка поля в редакторе темы (views/_fields/{color,text,select}). Раньше ширина
   и размеры задавались инлайном в каждом из трёх шаблонов и разъехались:
   max-width 200px против 220px, подпись 11px против 12px. */
.field-card {
    max-width: 14rem;
}

/* <input type="color"> — системный контрол, вне темы выглядит иначе, чем form-control.
   2.75rem — та же высота, что была в инлайне (44px), но выражена шагами темы. */
.field-card .form-control-color {
    width: 100%;
    height: calc(var(--tblr-spacer-3) * 2.75);
    padding: var(--tblr-spacer-1);
}

/* Выключенные строки в таблицах — приглушённый текст, кроме колонки действий */
tr.campaign-disabled td:not(:last-child),
tr.campaign-disabled td:not(:last-child) a {
    color: var(--tblr-secondary-color) !important;
}

/* Активные кампании — еле заметный зелёный фон + полоска слева */
tr.campaign-active td:first-child {
    border-left: 3px solid var(--tblr-success);
}

tr.campaign-active td {
    background-color: rgba(var(--tblr-success-rgb), 0.08);
}

/* Во время загрузки данных график блюрится, поверх виден спиннер */
[data-stats-wrap].loading > div:first-child {
    filter: blur(3px);
    opacity: 0.55;
    transition: filter .15s ease, opacity .15s ease;
}