/* Partner portal — shared Bootstrap 5 overrides.
   Lived as a <style> block inside components/partials/head.blade.php and so
   was re-sent, uncacheable, with every page of the cabinet. Same rule as the
   admin panel's filament-custom.css: shared styles belong in a stylesheet,
   not inlined in a Blade partial. */

/* ⚠️ Знак тенге берём из системного шрифта, и берём ПЕРВЫМ.

   В Fira Code глифа ₸ (U+20B8) нет. Браузер шёл в запасное семейство
   `Fira Code Static`, скачивал его в каждом весе, где встретился знак, не
   находил глиф и там — и всё равно рисовал тенге системным моноширинным. На
   «Моих заказах» это 310 КБ (Regular + SemiBold + Bold) поверх вариативного
   файла, ради одного символа, который стоит рядом с самым важным числом на
   экране и набран другой гарнитурой.

   `local()` без `src`-файла: ищем ₸ только среди уже установленных шрифтов,
   ничего не качая. Семейство подставляется первым в стек (см. fira-code.css). */
@font-face {
    font-family: 'Tenge';
    src: local('Noto Sans'), local('Segoe UI'), local('Roboto'), local('DejaVu Sans'), local('Arial');
    unicode-range: U+20B8;
}

/* Alpine hides x-cloak elements only once it has booted; without this rule
   they flash on screen first. */
[x-cloak] { display: none !important; }

body { font-family: 'Fira Code', monospace; }

/* Bootstrap красит .text-secondary в #6c757d: на карточках кабинета это
   4,41:1 при норме 4,5:1. Промах пограничный, но им набраны заголовки секций
   формы рецепта («1 — Рецепт»), подписи в «Предварительном счёте» и почти весь
   ориентирующий текст кабинета.

   Правим саму утилиту, а не переменную: `.text-secondary` у Bootstrap собран из
   --bs-secondary-rgb, а та же переменная красит .btn-secondary и .bg-secondary —
   сдвинув её, мы бы заодно перекрасили кнопки. Файл подключается после
   bootstrap.min.css, поэтому при равной специфичности и обоюдном !important
   выигрывает это правило. */
.text-secondary {
    color: #5c646c !important;
}

[data-bs-theme="dark"] .text-secondary {
    color: #a9b2ba !important;
}

/* ── Шапка и подвал ──────────────────────────────────────────────────
   Навбар и подвал держат фон тела, чтобы тема переключалась без правок
   разметки; раньше фон стоял инлайновым style на самом <nav>. */
.cami-navbar {
    background: var(--bs-body-bg);

    /* Своё место в стопке — выше липких блоков страницы.
       У Bootstrap `.sticky-top` это z-index 1020, а у `.dropdown-menu` — 1000,
       и «Предварительный счёт» на /recipe (он как раз `.sticky-top`)
       закрашивал раскрытое меню «Профиль» сверху. z-index работает только на
       позиционированном элементе, поэтому здесь же position: relative. */
    position: relative;
    z-index: 1030;
}

.nav-link.nav-active {
    color: var(--bs-primary) !important;
    font-weight: 600;
}

/* В тёмной теме `--bs-primary` на фоне шапки даёт 3.4 : 1 — ниже AA на
   пункте, который отмечает, где человек находится. Светлый оттенок той же
   синей (`--bs-primary-text-emphasis`) даёт больше 4.5. */
[data-bs-theme="dark"] .nav-link.nav-active {
    color: var(--bs-primary-text-emphasis) !important;
}

/* Под xl навбар свёрнут в гамбургер: развёрнутый список получает отступ
   снизу, иначе последняя кнопка липнет к границе шапки. */
@media (max-width: 1199.98px) {
    .cami-navbar .navbar-collapse {
        padding-bottom: .75rem;
    }
}

/* ── Корзина, видимая на любой ширине ────────────────────────────────
   Кнопка лежит в разметке между брендом и гамбургером, то есть ВНЕ
   .navbar-collapse — иначе ниже xl она сворачивалась в меню вместе со всем
   остальным, и добавление товара не давало на экране никакого следа.

   Контейнер навбара — flex, поэтому на xl порядок задаём `order`: collapse
   растягивается и уводит корзину к правому краю, на её привычное место в
   личной группе. Ниже xl порядок исходный (корзина слева от гамбургера),
   и правило не нужно. */
/* Ряд действий стоит справа от разделов: collapse растягивается и уводит его к
   правому краю. Порядок внутри ряда задаёт разметка — все шесть кнопок соседи в
   одном флекс-контейнере, поэтому его и хватает. */
@media (min-width: 1200px) {
    .cami-navbar .navbar-collapse { order: 2; }
    .cami-navbar .nav-actions     { order: 3; margin-left: .5rem; }
}

/* Ниже xl ряд прижат к гамбургеру — дать ему воздуха и отодвинуть от бренда. */
@media (max-width: 1199.98px) {
    .cami-navbar .nav-actions { margin-left: auto; margin-right: .5rem; }
}

/* ⚠️ Ниже sm у бренда остаётся логотип без подписи. «CamiCRM / Партнёрский
   кабинет» стоит 125 px — ровно столько не хватало ряду действий, чтобы шесть
   кнопок поместились рядом с гамбургером на 360–390 px. По логотипу бренд
   узнают, а подпись на своей же странице ничего не сообщает. */
@media (max-width: 575.98px) {
    .cami-navbar .navbar-brand > div {
        display: none;
    }
}

.cami-footer {
    background: var(--bs-body-bg);
}

/* Ссылки подвала были #6c757d на #212529 — 3.28 : 1 при требуемых по AA
   4.5 : 1 на кегле 14 px. `link-secondary` берёт цвет из переменной Bootstrap,
   поэтому правим её здесь, в области подвала, а не перекрашиваем каждую
   ссылку: тот же серый уместен на подписях, где он не ссылка. */
.cami-footer .link-secondary {
    --bs-link-color-rgb: 108, 117, 125;
    color: var(--bs-body-color) !important;
    opacity: .85;
}

.cami-footer .link-secondary:hover,
.cami-footer .link-secondary:focus-visible {
    opacity: 1;
    text-decoration: underline !important;
}

.status-badge-pending  { background: rgba(234,179,8,.15);  color: #eab308; border: 1px solid rgba(234,179,8,.3); }
.status-badge-verified { background: rgba(34,197,94,.15);  color: #22c55e; border: 1px solid rgba(34,197,94,.3); }
.status-badge-rejected { background: rgba(239,68,68,.15);  color: #ef4444; border: 1px solid rgba(239,68,68,.3); }

.avatar-circle {
    width: 80px; height: 80px;
    border-radius: 50%; object-fit: cover;
    border: 2px solid var(--bs-border-color);
}
.avatar-placeholder {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--bs-secondary-bg);
    border: 2px solid var(--bs-border-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: var(--bs-secondary-color);
}
.section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: .5rem;
}

.form-control::placeholder {
    color: var(--bs-tertiary-color);
    opacity: 1;
}

/* Bootstrap 5.3 re-themes --bs-secondary-color for dark mode but leaves
   --bs-secondary-rgb at gray-600, and .text-secondary reads the latter —
   so muted text stayed #6c757d, 3.3:1 against the dark body (WCAG AA wants
   4.5:1). .text-body-secondary is the themed utility, but .text-secondary
   is what the portal actually uses, so retint it here. */
[data-bs-theme="dark"] .text-secondary {
    --bs-secondary-rgb: 173, 181, 189;
}

/* Same gap in the outline buttons: their --bs-btn-color is the raw brand
   colour, unthemed, so the resting label sits at ~3.3:1 on the dark body.
   Bootstrap's own dark link/emphasis tints clear 4.5:1. */
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #adb5bd;
}

[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-link {
    --bs-btn-color: #6ea8fe;
}

[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color: #ea868f;
}

/* И та же история у смысловых цветов текста: --bs-success/-danger это
   насыщенные цвета кнопок, на тёмном фоне они дают ~3:1. Подставляем
   собственные тёмные тона Bootstrap (-text-emphasis), которые проходят
   4.5:1: ими набраны суммы оплат и задолженности в «Документах». */
[data-bs-theme="dark"] .text-success {
    --bs-success-rgb: 117, 183, 152;
}

[data-bs-theme="dark"] .text-danger {
    --bs-danger-rgb: 234, 134, 143;
}

/* ── Цели нажатия на телефоне ─────────────────────────────────────────
   Поиск, фильтры, «Сброс», кнопки в шапке — всё это `-sm` из Bootstrap, то есть
   31 px в высоту. Apple HIG требует 44×44 pt, Material — 48 dp, WCAG 2.5.5 —
   44 px; формальный минимум WCAG 2.2 (24 px) соблюдался, но промахи по
   31-пиксельной цели человек с линзой в одной руке и телефоном в другой
   чувствует как «сайт тормозит».

   Правим размер, а не классы в шаблонах: `-sm` расставлен по всему кабинету, и
   вычищать его вручную значит менять и десктоп, где он к месту. */
/* Поле по бокам — 16 px на любой ширине. У Bootstrap контейнер берёт
   половину `--bs-gutter-x` (1.5rem), то есть 12 px: на 360 текст карточек и
   кнопки вставали почти вплотную к краю, где палец промахивается. */
.cami-app .container,
.cami-app .container-fluid {
    --bs-gutter-x: 2rem;
}

@media (max-width: 991.98px) {
    .cami-app .btn,
    .cami-app .form-control,
    .cami-app .form-select {
        min-height: 44px;
    }

    /* Кнопка-иконка остаётся квадратной: вытянутая по вертикали читается как
       сломанная вёрстка. */
    .cami-app .btn-icon {
        min-width: 44px;
    }
}

/* --- Техподдержка ------------------------------------------------------- */
/* Пузыри переписки. Цвета через токены Bootstrap, а не хардкодом: портал
   переключает тему через data-bs-theme, и фиксированные значения давали бы
   тёмный текст на тёмном фоне ровно так же, как это было с .text-secondary. */

/* Высота карточки переписки — правилом, а не классом `h-100` в разметке: у
   Bootstrap это `height: 100% !important`, и мобильное правило ниже его уже не
   переопределит.

   ⚠️ Порядок важен: правило стоит ДО медиазапросов. Специфичность у него та же,
   что у `.support-pane--thread`, поэтому стоя после него оно выигрывало бы по
   порядку и высота экрана на мобильном не применялась бы вовсе. */
.support-pane {
    height: 100%;
}

/* Обе колонки одной высоты на десктопе: список прокручивается внутри себя,
   переписка — внутри себя, страница целиком не едет. */
@media (min-width: 992px) {
    .support-list,
    .support-scroll {
        max-height: 60vh;
    }

    .support-scroll {
        min-height: 22rem;
    }
}

/* Ниже lg на экране только одна из двух колонок (см. support-chat.blade.php),
   поэтому список больше не жмём по высоте: прокручивать под ним нечего.

   Карточка с перепиской занимает остаток экрана и раскладывается в колонку:
   шапка и поле ввода на местах, лента прокручивается между ними. Раньше высота
   ленты была 55vh, а поле ввода стояло внизу ДОКУМЕНТА — то есть после ленты и
   перед подвалом сайта: чтобы ответить, приходилось прокрутить всю переписку.

   ⚠️ dvh, а не vh: на мобильных браузерах адресная строка съедает часть vh, и
   поле ввода уезжало бы под неё ровно на её высоту. Вычитаемое — шапка сайта с
   отступом плюс заголовок страницы. */
@media (max-width: 991.98px) {
    .support-pane--thread {
        height: calc(100dvh - 9.5rem);
        min-height: 20rem;
    }

    .support-pane--thread .support-body {
        min-height: 0;
    }
}

/* Лента и кнопка «Новое сообщение» лежат в одном card-body: кнопка прижата к
   низу ленты и не уезжает вместе с её прокруткой. */
.support-body {
    position: relative;
    display: flex;
    padding: 0;
}

.support-body .support-scroll {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

/* Кнопка зовёт наверх, к свежему, — поэтому и висит у верхнего края ленты. */
.support-jump {
    position: absolute;
    left: 0;
    right: 0;
    top: .75rem;
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 3;
}

.support-jump .btn {
    pointer-events: auto;
}

.support-thread {
    min-height: 8rem;
}

/* Разделитель дня в переписке. Линия через всю ленту с подписью посередине —
   тот же приём, что в мессенджерах: он отделяет группы, а не украшает их. */
.support-day {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1rem 0 .75rem;
    color: var(--bs-secondary-color);
    font-size: .75rem;
}

.support-day::before,
.support-day::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--bs-border-color);
}

.support-day span {
    flex: none;
}

/* Первый разделитель стоит у самого верха ленты — верхний отступ ему не нужен. */
.support-thread > .support-day:first-child {
    margin-top: 0;
}

.support-bubble {
    max-width: 78%;
    padding: .5rem .75rem;
    border-radius: .75rem;
    font-size: .875rem;
    word-break: break-word;
}

/* Содержимое пузыря — размеченный HTML из редактора. Сбрасываем внешние
   отступы блоков (иначе первый абзац отрывает текст от подписи) и приводим
   таблицу к габаритам пузыря: её ширину задаёт автор сообщения, а пузырь
   ограничен 78% колонки. */
.support-bubble-text > :first-child {
    margin-top: 0;
}

.support-bubble-text > :last-child {
    margin-bottom: 0;
}

.support-bubble-text p,
.support-bubble-text ul,
.support-bubble-text ol,
.support-bubble-text blockquote {
    margin-bottom: .5rem;
}

.support-bubble-text ul,
.support-bubble-text ol {
    padding-left: 1.25rem;
}

.support-bubble-text blockquote {
    padding-left: .625rem;
    border-left: 3px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
}

.support-bubble-text pre,
.support-bubble-text code {
    font-size: .8125rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Широкую таблицу прокручиваем внутри пузыря, а не растягиваем страницу. */
.support-bubble-text table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin-bottom: .5rem;
    font-size: .8125rem;
}

/* Рамка от цвета текста, а не от --bs-border-color: тот светло-серый и на
   голубом фоне собственного пузыря практически исчезает — таблицу вставляли
   ровно ради сетки, а её не было видно. currentColor заодно сам
   переворачивается в тёмной теме. */
.support-bubble-text th,
.support-bubble-text td {
    border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
    padding: .25rem .5rem;
}

.support-bubble-text th {
    font-weight: 600;
    background: color-mix(in srgb, currentColor 10%, transparent);
}

/* Пустая ячейка схлопывается в полоску и ломает сетку. */
.support-bubble-text td:empty::after,
.support-bubble-text th:empty::after {
    content: '\00a0';
}

.support-bubble-text a {
    word-break: break-word;
}

.support-bubble-mine {
    background: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle);
    border-bottom-right-radius: .25rem;
}

.support-bubble-theirs {
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-bottom-left-radius: .25rem;
}

.support-bubble-meta {
    margin-top: .25rem;
    font-size: 10px;
    text-align: right;
    color: var(--bs-secondary-color);
}

/* Миниатюра вложения. Ограничиваем обе стороны: снимок с телефона —
   3000 px по длинной стороне, и без потолка он растягивает пузырь на всю
   колонку. `height:auto` держит пропорции. */
.support-attachment-img {
    max-width: 100%;
    max-height: 14rem;
    width: auto;
    height: auto;
    border-radius: .375rem;
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.support-file {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    color: inherit;
}

.support-file:hover {
    border-color: var(--bs-primary-border-subtle);
}

/* «Печатает»: три точки, гаснущие по очереди. Анимация короткая и без
   трансформаций — строка живёт в ленте, которая переписывается опросом. */
.support-dots span {
    animation: support-dot 1.2s infinite;
}

.support-dots span:nth-child(2) {
    animation-delay: .2s;
}

.support-dots span:nth-child(3) {
    animation-delay: .4s;
}

@keyframes support-dot {
    0%, 60%, 100% { opacity: .2; }
    30% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .support-dots span {
        animation: none;
        opacity: 1;
    }
}

/* ── Кнопки действий в строке списка ──────────────────────────────────
   Правка, отключение, скачивание PDF: были 28–31 px по одной стороне и
   23 px по другой — ниже минимума WCAG 2.2 AA (24 × 24), и стояли вплотную
   друг к другу, так что послабление «по расстоянию» тоже не работало.
   Промах стоит дорого: отключается не тот сотрудник, гаснет не та точка.

   ⚠️ Класс общий на кабинет — сотрудники, точки, мастерские, документы.
   Заводить его копию на раздел значит развести размеры обратно: они уже
   разъезжались, когда каждый список набирал `py-0 px-2` по своему вкусу. */
.row-action {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
}

/* Соседние кнопки не должны склеиваться: цена промаха между «править» и
   «отключить» — не опечатка, а действие над чужой строкой. */
.row-action + .row-action { margin-left: 0.5rem; }

/* Страница не должна ехать под открытым модальным окном кабинета. Класс свой:
   в Bootstrap 5 правила `.modal-open` в CSS нет — `overflow` ставит его
   JS-помощник, а окна кабинета собраны без `bootstrap.Modal` (Livewire
   перерисовывает разметку, и экземпляр окна теряется). */
body.has-open-modal {
    overflow: hidden;
}

/* Заголовок страницы кабинета. Тег — h1 (у страниц не было заголовка первого
   уровня вовсе), а кегль остаётся прежним, h5: страница не статья, крупная
   строка забирала бы место у содержимого. */
.page-header__title {
    font-size: 1.25rem;
}

/* ── Полоса вкладок ───────────────────────────────────────────────────
   Шесть вкладок профиля переносились на телефоне в три рваных ряда по
   два и съедали 250 px до содержимого. Одна прокручиваемая полоса держит
   их в ряд и занимает высоту одной кнопки.

   Неактивные вкладки при этом получают рамку: раньше они были обычным
   серым текстом и рядом с яркой активной читались как подписи, а не как
   «другие вкладки». */
.tab-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* Тень фокуса кнопки не должна срезаться краем прокрутки. */
    padding: 2px;
    margin-left: -2px;
    margin-right: -2px;
}

.tab-strip::-webkit-scrollbar {
    display: none;
}

.tab-strip .nav-item {
    flex: 0 0 auto;
}

.tab-strip .nav-link {
    white-space: nowrap;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    min-height: 40px;
}

.tab-strip .nav-link.active {
    border-color: transparent;
    color: #fff;
}

@media (min-width: 768px) {
    .tab-strip {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

/* ── Контраст мелкого текста в светлой теме ───────────────────────────
   Умолчания Bootstrap рассчитаны на белый фон, а карточки кабинета стоят
   на `--bs-secondary-bg`: на нём `text-success` даёт 3.82 : 1, а серый
   контур кнопки — 3.95 : 1 при требуемых по AA 4.5 : 1 для кегля 14 px.
   Обе роли несут деньги и действия, крупным текстом они не бывают.
   Только светлая тема: в тёмной те же цвета читаются с запасом. */
[data-bs-theme="light"] .text-success {
    color: #146c43 !important;
}

[data-bs-theme="light"] .btn-outline-secondary {
    --bs-btn-color: #565e64;
    --bs-btn-border-color: #868e96;
}

/* Бейджи-контуры (`.orders-badge`) берут цвет из палитры Bootstrap, а та
   рассчитана на заливку, не на текст 12 px по тёмному фону: «основная» давала
   3.43 : 1 при минимуме 4.5. В тёмной теме берём осветлённые тона той же
   палитры — Bootstrap держит их как `*-text-emphasis`. Светлую тему не
   трогаем: там те же цвета читаются с запасом. */
[data-bs-theme="dark"] .orders-badge.text-primary {
    color: #6ea8fe !important;
    border-color: #6ea8fe !important;
}

[data-bs-theme="dark"] .orders-badge.text-danger {
    color: #ea868f !important;
    border-color: #ea868f !important;
}

[data-bs-theme="dark"] .orders-badge.text-success {
    color: #75b798 !important;
    border-color: #75b798 !important;
}

/* Сумма долга на пункте «Документы». Мелкий кегль и запрет переноса — иначе
   бейдж уезжает под текст, строка меню становится двухэтажной и шапка растёт
   с 56 до 87 px на всех страницах кабинета. */
.nav-debt {
    font-size: .65rem;
    font-weight: 600;
    padding: .2em .45em;
}

/* ── Ряд разделов в шапке ─────────────────────────────────────────────
   Семь пунктов и правая группа (колокольчик, бонусы, поддержка, тема,
   профиль) делят один ряд, и делают это впритык: на 1280 px лишние 30 px
   выдавливают правую группу на вторую строку, а шапка вырастает с 57 до
   126 px — на каждой странице кабинета. Поэтому здесь свой кегль и свои
   поля, а не утилиты Bootstrap: `small` + `px-2` + `gap-2` не помещались.
   Меняешь что-то в этом ряду — проверяй на 1200 и 1280, не только на
   своём мониторе. */
@media (min-width: 1200px) {
    .cami-navbar .navbar-nav {
        gap: 0.125rem;
    }

    .cami-navbar .navbar-nav > .nav-item > .nav-link {
        font-size: 0.8125rem;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    .cami-navbar .navbar-nav > .nav-item > .nav-link > .fa-solid {
        margin-right: 0.2rem;
    }
}

/* ⚠️ Кегль крупнее — только с 1400 px, и порог здесь не про монитор, а про
   контейнер Bootstrap: до 1400 он 1140 px, с 1400 — 1320. Те же 1rem и 0.6rem
   на 1140 дают ряд шириной 756 px, правой группе остаётся меньше нужного, она
   переносится, и шапка становится 126 px вместо 57 — на 1366 (обычная ширина
   ноутбука) и на 1200 это видно сразу. Меняешь кегль — меряй на 1200, 1366 и
   1440, между ними меняется не только ширина окна. */
@media (min-width: 1400px) {
    .cami-navbar .navbar-nav > .nav-item > .nav-link {
        font-size: 1rem;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
}

/* Ниже xl ряд уезжает в раскрывающееся меню — там наоборот нужен воздух
   под палец, а не экономия ширины. */
@media (max-width: 1199.98px) {
    .cami-navbar .navbar-nav > .nav-item > .nav-link {
        font-size: 0.875rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    .cami-navbar .navbar-nav > .nav-item > .nav-link > .fa-solid {
        margin-right: 0.4rem;
    }
}

/* ── Чекбоксы и радио: курсор-палец ──────────────────────────────────
   Bootstrap ставит pointer самому input'у, но не подписи, а кликают
   чаще по ней: подпись шире и это второй тач-таргет поля. Курсор-стрелка
   над ней читается как «здесь не нажимается». */
.form-check-input:not(:disabled),
.form-check-input:not(:disabled) ~ .form-check-label,
.form-check-label:has(> .form-check-input:not(:disabled)) {
    cursor: pointer;
}

/* ── Плашки уведомлений в тёмной теме ────────────────────────────────
   У Bootstrap *-bg-subtle в тёмной теме — густой пигмент (#332701 у
   warning, #2c0b0e у danger). На тёмном фоне это читается грязным
   пятном: цвета столько же, сколько в светлой теме, а света под ним
   нет. Тот же оттенок, но как тонкая заливка поверх фона тела —
   насыщенность несут текст и грань, а не подложка.

   Правится переменными, а не правилами на .bg-*-subtle: их держат и
   бейджи, и строки таблиц, и плашки — вторая палитра разошлась бы с
   первой. Текстовые -text-emphasis не трогаем: они и так проходят
   4.5:1, а на более тёмном фоне контраст только растёт. */
[data-bs-theme="dark"] {
    --bs-warning-bg-subtle: color-mix(in srgb, #ffda6a 12%, var(--bs-body-bg));
    --bs-warning-border-subtle: color-mix(in srgb, #ffda6a 32%, var(--bs-body-bg));
    --bs-danger-bg-subtle: color-mix(in srgb, #ea868f 12%, var(--bs-body-bg));
    --bs-danger-border-subtle: color-mix(in srgb, #ea868f 32%, var(--bs-body-bg));
    --bs-success-bg-subtle: color-mix(in srgb, #75b798 12%, var(--bs-body-bg));
    --bs-success-border-subtle: color-mix(in srgb, #75b798 32%, var(--bs-body-bg));
    --bs-info-bg-subtle: color-mix(in srgb, #6edff6 12%, var(--bs-body-bg));
    --bs-info-border-subtle: color-mix(in srgb, #6edff6 32%, var(--bs-body-bg));
}