/*
 | Слой стилей портала HOME-HUB поверх Metronic 8.2.1 demo48 (HH-014: стиль OSMO,
 | палитра Metronic, базовый шрифт Metronic). Порядок: основа (чернила, правки
 | Metronic, цифры, фокус) → каркас и левое меню → тёмная тема → печать.
 | Шкалы цветов — palette.css; стили одного раздела — файлом раздела (@push('styles')).
 | Источники: OSMO osmo-design.css (общая часть), osmo-fix.css, osmo-sidebar.css.
 */

/* Логотип текстом: своего SVG у портала пока нет */
.portal-logo { letter-spacing: -.02em; white-space: nowrap; }


/* =================================================================== Основа */

/* ------------------------------------------------------------ Чернила
 | Оттенки для текста, читаемые на белой карточке и на кремовой подложке
 | (не ниже 4.5:1). Базовые цвета темы (--bs-primary и т. д.) не меняются:
 | ими залиты кнопки, значки и плашки — там хватает 3:1. */

:root:not([data-bs-theme="dark"]) {
    --portal-ink-muted: #636E8C;      /* Metronic #99A1B7: 2.6:1 → 5.1:1 на белом */
    --portal-ink-soft: #5B6580;       /* #78829D: 3.8:1 → 5.8:1 */
    --portal-ink-primary: #0069E4;    /* 3.6:1 → 5.1:1 */
    --portal-ink-primary-hover: #0053B8;
    --portal-ink-success: #0F7F35;    /* 2.3:1 → 5.1:1 */
    --portal-ink-danger: #DC073A;     /* 3.9:1 → 5.1:1 */
    --portal-ink-warning: #9B6103;    /* жёлтый Metronic на белом 2.4:1 → 5.1:1 */
    --portal-ink-info: #6A2FE0;

    --bs-text-muted: var(--portal-ink-muted);
    --bs-text-gray-500: var(--portal-ink-muted);
    --bs-text-gray-600: var(--portal-ink-soft);
    --bs-text-primary: var(--portal-ink-primary);
    --bs-text-success: var(--portal-ink-success);
    --bs-text-danger: var(--portal-ink-danger);
    --bs-text-warning: var(--portal-ink-warning);
    --bs-text-info: var(--portal-ink-info);

    --bs-link-color: var(--portal-ink-primary);
    --bs-link-color-rgb: 0, 105, 228;
    --bs-link-hover-color: var(--portal-ink-primary-hover);
    --bs-link-hover-color-rgb: 0, 83, 184;
}

/* В тёмной теме зелёный и жёлтый Metronic и так светлые — чернила равны им;
   синий, красный, фиолетовый и приглушённый темнее нужного — для них свои */
[data-bs-theme="dark"] {
    --bs-text-muted: #8C90A4;         /* было #636674: 3.1:1 → 5.7:1 */
    --bs-text-gray-500: #8C90A4;
    --bs-text-primary: #4DA3FF;
    --bs-text-danger: #FF6B8A;
    --bs-text-info: #A97BFF;
    --bs-code-color: #E88BD0;
    --bs-link-color: #4DA3FF;
    --bs-link-color-rgb: 77, 163, 255;
    --bs-link-hover-color: #7AB9FF;
    --bs-link-hover-color-rgb: 122, 185, 255;
    /* text-dark Metronic в тёмной теме остаётся тёмным (#272A34) — текст пропадал бы */
    --bs-text-dark: var(--bs-gray-900);

    --portal-ink-muted: var(--bs-text-muted);
    --portal-ink-soft: var(--bs-text-gray-600);
    --portal-ink-primary: #4DA3FF;
    --portal-ink-primary-hover: #7AB9FF;
    --portal-ink-success: var(--bs-success);
    --portal-ink-danger: #FF6B8A;
    --portal-ink-warning: var(--bs-warning);
    --portal-ink-info: #A97BFF;
}

/* Значки остаются яркими: это сигнал, а не текст */
:is(i, svg)[class*="fa-"]:is(.text-primary) { color: var(--bs-primary) !important; }
:is(i, svg)[class*="fa-"]:is(.text-danger) { color: var(--bs-danger) !important; }
:is(i, svg)[class*="fa-"]:is(.text-warning) { color: var(--bs-warning) !important; }
:is(i, svg)[class*="fa-"]:is(.text-info) { color: var(--bs-info) !important; }

/* Светлые плашки: подложка прежняя, текст — чернилами */
.badge.badge-light-primary, .badge.bg-light-primary.text-primary { color: var(--portal-ink-primary) !important; }
.badge.badge-light-success, .badge.bg-light-success.text-success { color: var(--portal-ink-success) !important; }
.badge.badge-light-danger, .badge.bg-light-danger.text-danger { color: var(--portal-ink-danger) !important; }
.badge.badge-light-warning, .badge.bg-light-warning.text-warning { color: var(--portal-ink-warning) !important; }
.badge.badge-light-info, .badge.bg-light-info.text-info { color: var(--portal-ink-info) !important; }

/* Прозрачные ступени palette.css на плашке теряют контраст — там текст в полную силу */
.badge:is(.text-primary-500, .text-primary-600, .text-primary-700, .text-primary-800) { color: var(--portal-ink-primary) !important; }
.badge:is(.text-success-500, .text-success-600, .text-success-700, .text-success-800) { color: var(--portal-ink-success) !important; }
.badge:is(.text-danger-500, .text-danger-600, .text-danger-700, .text-danger-800) { color: var(--portal-ink-danger) !important; }
.badge:is(.text-warning-500, .text-warning-600, .text-warning-700, .text-warning-800) { color: var(--portal-ink-warning) !important; }
.badge:is(.text-info-500, .text-info-600, .text-info-700, .text-info-800) { color: var(--portal-ink-info) !important; }

/* Светлые кнопки в покое: текст чернилами (наведение — заливкой, как у Metronic) */
.btn.btn-light-primary:not(:hover):not(:focus):not(:active):not(.active):not(.show) { color: var(--portal-ink-primary); }
.btn.btn-light-success:not(:hover):not(:focus):not(:active):not(.active):not(.show) { color: var(--portal-ink-success); }
.btn.btn-light-danger:not(:hover):not(:focus):not(:active):not(.active):not(.show) { color: var(--portal-ink-danger); }
.btn.btn-light-warning:not(:hover):not(:focus):not(:active):not(.active):not(.show) { color: var(--portal-ink-warning); }
.btn.btn-light-info:not(:hover):not(:focus):not(:active):not(.active):not(.show) { color: var(--portal-ink-info); }
/* Отмеченная .btn-check кнопка залита цветом — текст обратно белым, как у Metronic */
.btn-check:is(:checked, :active) + .btn.btn-light-primary { color: var(--bs-primary-inverse); }
.btn-check:is(:checked, :active) + .btn.btn-light-success { color: var(--bs-success-inverse); }
.btn-check:is(:checked, :active) + .btn.btn-light-danger { color: var(--bs-danger-inverse); }
.btn-check:is(:checked, :active) + .btn.btn-light-warning { color: var(--bs-warning-inverse); }
.btn-check:is(:checked, :active) + .btn.btn-light-info { color: var(--bs-info-inverse); }

/* alert-* у Metronic — базовый цвет по светлой подложке, 2.4–3.5:1 */
.alert.alert-primary, .alert.alert-primary .alert-link { color: var(--portal-ink-primary); }
.alert.alert-success, .alert.alert-success .alert-link { color: var(--portal-ink-success); }
.alert.alert-danger, .alert.alert-danger .alert-link { color: var(--portal-ink-danger); }
.alert.alert-warning, .alert.alert-warning .alert-link { color: var(--portal-ink-warning); }
.alert.alert-info, .alert.alert-info .alert-link { color: var(--portal-ink-info); }

.text-secondary { color: var(--portal-ink-soft) !important; }

/* «Погашенные» нули в списках: #F9F9F9 Metronic на белом не виден совсем */
.text-light-secondary { color: var(--bs-gray-500) !important; }

/* ------------------------------------------------------------ Правки Metronic */

/* Поля -solid: у Metronic серая заливка без рамки сливается с серыми карточками */
.form-control.form-control-solid { border-color: var(--bs-gray-300); background-color: var(--bs-body-bg); }
.form-select.form-select-solid { border-color: var(--bs-gray-300); background-color: var(--bs-body-bg); }
.form-check.form-check-solid .form-check-input:not(:checked) { border: 1px solid var(--bs-gray-300); background-color: var(--bs-body-bg); }
/* Недоступное и только для чтения поле — серой заливкой и приглушённым текстом:
   с белым фоном выше его было не отличить от поля, которое ждёт ввода */
:is(.form-control.form-control-solid, .form-select.form-select-solid):is(:disabled, [readonly]) {
    background-color: var(--bs-gray-100);
    color: var(--bs-gray-600);
}

/* badge-light-secondary у Metronic — текст цвета подложки (#F9F9F9 на #F9F9F9) */
.badge.badge-light-secondary { color: var(--bs-gray-700); }

/* Вкладки-линии: неактивные были gray-500 (2.6:1) */
.nav-line-tabs .nav-item .nav-link { color: var(--portal-ink-muted); }
.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item .nav-link:hover:not(.disabled),
.nav-line-tabs .nav-item.show .nav-link { color: var(--portal-ink-primary) !important; }

.card + .card { margin-top: 1rem; }
.card .card-header { min-height: 50px; padding: 0 1.25rem; }

.btn.btn-light-secondary i { color: var(--bs-gray-600); }

/* Кнопки-переключатели: выбранная видна рамкой своего цвета, а не только тоном */
.btn-active-light-dark:not(.active):hover, .btn-active-light-dark.active { border-color: var(--bs-dark) !important; }
.btn-active-light-success:not(.active):hover, .btn-active-light-success.active { border-color: var(--bs-success) !important; }
.btn-active-light-danger:not(.active):hover, .btn-active-light-danger.active { border-color: var(--bs-danger) !important; }
.btn-active-light-warning:not(.active):hover, .btn-active-light-warning.active { border-color: var(--bs-warning) !important; }

/* .btn-light при наведении — тёмная заливка и белый текст, как в OSMO. Селектор
   тот же, что у Metronic, файл позже; цвет с !important — иначе text-* на кнопке
   и её значке остались бы тёмными на тёмном */
.btn.btn-light:hover:not(.btn-active) {
    color: var(--bs-white) !important;
    border-color: var(--bs-dark);
    background-color: var(--bs-dark) !important;
}
.btn.btn-light:hover:not(.btn-active) i,
.btn.btn-light:hover:not(.btn-active) .svg-icon,
.btn.btn-light:hover:not(.btn-active).dropdown-toggle:after { color: var(--bs-white) !important; }

/* ------------------------------------------------------------ Цифры
 | Табличные цифры: суммы в столбце встают разряд под разряд. */

.app-content table { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ Фокус
 | С клавиатуры видно, где фокус; мышью — без обводки.
 | !important — у Metronic .btn и .menu-link { outline: 0 !important }. */

:is(a, button, .btn, [role="button"], .nav-link, .page-link, .form-check-input):focus-visible {
    outline: 2px solid var(--bs-primary) !important;
    outline-offset: 2px;
}

/* ------------------------------------------------------------ Движение
 | Кто попросил систему не анимировать — не анимируем (кроме индикаторов
 | загрузки: без вращения их не отличить от застывшей страницы). */

@media (prefers-reduced-motion: reduce) {
    *:not(.spinner-border):not(.spinner-grow):not(.fa-spin):not(.fa-spin-pulse),
    *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================ Левое меню */

/*
 |--------------------------------------------------------------------------
 | Левое меню (app-sidebar)
 |--------------------------------------------------------------------------
 |
 | В бандле demo48 меню находится в шапке, поэтому стилей app-sidebar в
 | style.bundle.css нет. Здесь — светлое левое меню: логотип, профиль с
 | подменю, плоский список разделов. Верхнего бара нет: действия — в профиле.
 |
 */

:root {
    --portal-sidebar-width: 300px;
    --portal-sidebar-width-min: 88px;
    --portal-sidebar-gap: 16px;             /* отступ вокруг меню — сверху и снизу одинаковый */

    --portal-sidebar-bg: #ffffff;
    --portal-sidebar-border: #e9ecf2;
    --portal-sidebar-text: #4b5675;
    --portal-sidebar-text-hover: #1b1b29;
    --portal-sidebar-hover-bg: #f4f6fa;
    --portal-sidebar-heading: #6b7591;      /* #99a1b7 давал 2.6:1, этот 4.6:1 */

    --portal-sidebar-font: 1.0625rem;       /* пункты меню */
    --portal-sidebar-font-heading: .9375rem;/* подписи групп */
}

/* ------------------------------------------------------------------ Каркас */

/*
 * Гасим собственную геометрию Metronic: в бандле есть правила для
 * app-wrapper / app-main / app-header, рассчитанные на его переменные ширины
 * сайдбара. Без этого отступы складываются и контент уезжает вправо.
 */
.app-wrapper,
.app-header,
.app-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.app-wrapper { padding-top: 0 !important; padding-left: 0 !important; }
.app-main { max-width: 100%; overflow-x: hidden; }
#kt_app_content_container { min-width: 0; max-width: 100%; }

.app-sidebar {
    background-color: var(--portal-sidebar-bg);
    border: 1px solid var(--portal-sidebar-border);
    border-radius: .75rem;
    box-shadow: 0 2px 12px rgba(16, 24, 40, .04);
    width: var(--portal-sidebar-width);
    position: fixed;
    top: var(--portal-sidebar-gap);
    bottom: var(--portal-sidebar-gap);
    left: var(--portal-sidebar-gap);
    margin-top: 0 !important;
    z-index: 101;
    display: flex;
    overflow: hidden;
    transition: width .3s ease, left .3s ease;
}

.app-main { min-width: 0; } /* широкие таблицы не растягивают разметку */

/* Мобильная полоса с бургером */
.app-header-mobile {
    height: 56px;
    background: var(--bs-app-bg-color, #fff);
    border-bottom: 1px solid var(--bs-gray-200);
    position: sticky;
    top: 0;
    z-index: 99;
}

@media (min-width: 992px) {
    .app-main {
        margin-left: calc(var(--portal-sidebar-width) + var(--portal-sidebar-gap) * 2) !important;
        padding-right: var(--portal-sidebar-gap);
    }

    body[data-kt-app-sidebar-minimize="on"] .app-sidebar { width: var(--portal-sidebar-width-min); }
    body[data-kt-app-sidebar-minimize="on"] .app-main {
        margin-left: calc(var(--portal-sidebar-width-min) + var(--portal-sidebar-gap) * 2) !important;
    }
}

@media (max-width: 991.98px) {
    .app-sidebar {
        top: 0;
        bottom: 0;
        left: calc(-1 * (var(--portal-sidebar-width) + var(--portal-sidebar-gap) * 2));
        border-radius: 0;
        border-left: 0;
        border-top: 0;
        border-bottom: 0;
    }
    .app-sidebar.drawer-on { left: 0; }
}

/* --------------------------------------------------- Отступы главной области */

/*
 * Горизонтальные отступы у toolbar, content и footer одинаковые —
 * заданы одной переменной, чтобы заголовок и контент были в одну линию.
 */
:root { --portal-content-pad-x: 0px; }

#kt_app_content { margin-top: 5px; padding-top: 0; padding-bottom: 1.5rem; }

#kt_app_toolbar,
#kt_app_content > .app-container,
#kt_app_footer > .app-container {
    padding-left: var(--portal-content-pad-x) !important;
    padding-right: var(--portal-content-pad-x) !important;
}

@media (max-width: 991.98px) {
    :root { --portal-content-pad-x: 1rem; }
}

/* --------------------------------------------------------------- Логотип */

.app-sidebar-logo {
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-bottom: 1px solid var(--portal-sidebar-border);
}
.app-sidebar-logo-minimize { display: none; }

.app-sidebar-toggle {
    background-color: var(--portal-sidebar-hover-bg);
    color: var(--portal-sidebar-text);
    border-radius: 8px;
}
.app-sidebar-toggle:hover { background-color: var(--bs-primary-light); color: var(--bs-primary); }
.app-sidebar-toggle i { transition: transform .3s ease; }
body[data-kt-app-sidebar-minimize="on"] .app-sidebar-toggle i { transform: rotate(180deg); }

@media (max-width: 991.98px) {
    /* .btn.btn-icon из Metronic задаёт display — без второго класса не перебить */
    .app-sidebar-toggle.btn { display: none; }
}

/* --------------------------------------------------------------- Профиль */

.app-sidebar-user {
    padding-top: 1rem;
    padding-bottom: 1rem;
    flex-shrink: 0;
    border-bottom: 1px solid var(--portal-sidebar-border);
}
.app-sidebar-user-name { color: var(--portal-sidebar-text-hover); font-size: 1rem; }
.app-sidebar-user-email { color: var(--portal-sidebar-heading); }
.app-sidebar-user-caret { color: var(--portal-sidebar-heading); }
.app-sidebar-user:hover .app-sidebar-user-name { color: var(--bs-primary); }

/* Выход — кнопка формы POST: снимаем фон и рамку браузера, ховер — общий для пунктов */
.app-sidebar-user button.menu-link { background-color: transparent; border: 0; }

/* --------------------------------------------------------------- Пункты */

.app-sidebar .menu-item .menu-link {
    color: var(--portal-sidebar-text);
    font-size: var(--portal-sidebar-font);
    padding: .7rem .85rem;
    border-radius: .5rem;
}
.app-sidebar .menu-item .menu-link .menu-title { color: inherit; font-size: inherit; }
.app-sidebar .menu-item .menu-link .menu-icon i { color: var(--portal-sidebar-heading); font-size: 1.15rem; }

.app-sidebar .menu-item .menu-link:hover:not(.disabled):not(.active),
.app-sidebar .menu-item.show > .menu-link {
    color: var(--portal-sidebar-text-hover);
    background-color: var(--portal-sidebar-hover-bg);
    transition: none;
}
.app-sidebar .menu-item .menu-link:hover .menu-title,
.app-sidebar .menu-item.show > .menu-link .menu-title { color: var(--portal-sidebar-text-hover); }
.app-sidebar .menu-item .menu-link:hover .menu-icon i,
.app-sidebar .menu-item.show > .menu-link .menu-icon i { color: var(--portal-sidebar-text-hover); }

/* Активный пункт: фон + ОБЯЗАТЕЛЬНО видимый текст */
.app-sidebar .menu-item .menu-link.active,
.app-sidebar .menu-item .menu-link.active:hover {
    color: var(--bs-primary) !important;
    background-color: var(--bs-primary-light) !important;
    font-weight: 600;
}
.app-sidebar .menu-item .menu-link.active .menu-title,
.app-sidebar .menu-item .menu-link.active:hover .menu-title { color: var(--portal-ink-primary) !important; } /* 3.2 → 4.5:1 */
.app-sidebar .menu-item .menu-link.active .menu-icon i,
.app-sidebar .menu-item .menu-link.active:hover .menu-icon i { color: var(--bs-primary) !important; }
.app-sidebar .menu-item .menu-link.active .bullet { background-color: var(--bs-primary) !important; }

.app-sidebar .menu-icon { width: 2rem; justify-content: flex-start; }

/* Подпись группы разделов (nav-small-cap в MaterialPro) */
.app-sidebar .menu-content { padding-left: 0; padding-right: 0; }
.app-sidebar .menu-content .menu-heading {
    color: var(--portal-sidebar-text-hover);
    font-size: var(--portal-sidebar-font-heading);
    letter-spacing: .4px;
    padding: .5rem 0 .25rem;
    display: block;
}

.app-sidebar .bullet { background-color: #c4cada; }

/* Скролл меню */
.app-sidebar-menu { min-height: 0; }
.app-sidebar-wrapper { overflow-y: auto; padding-bottom: .75rem; }
.app-sidebar-wrapper::-webkit-scrollbar { width: 5px; }
.app-sidebar-wrapper::-webkit-scrollbar-thumb { background: #dfe3ec; border-radius: 4px; }

/* ------------------------------------------------- Свёрнутое состояние */

@media (min-width: 992px) {
    body[data-kt-app-sidebar-minimize="on"] .app-sidebar-logo { justify-content: center; }
    body[data-kt-app-sidebar-minimize="on"] .app-sidebar-logo-default { display: none; }
    body[data-kt-app-sidebar-minimize="on"] .app-sidebar-logo-minimize { display: inline-block; }

    body[data-kt-app-sidebar-minimize="on"] .app-sidebar-user { justify-content: center; }
    body[data-kt-app-sidebar-minimize="on"] .app-sidebar-user .symbol { margin-right: 0 !important; }
    body[data-kt-app-sidebar-minimize="on"] .app-sidebar-user-info,
    body[data-kt-app-sidebar-minimize="on"] .app-sidebar-user-caret { display: none; }
    body[data-kt-app-sidebar-minimize="on"] .app-sidebar-user > div { justify-content: center; }

    /* Только список разделов: подменю профиля тоже внутри .app-sidebar,
       и общий селектор оставил бы его без подписей */
    body[data-kt-app-sidebar-minimize="on"] #kt_app_sidebar_menu .menu-title,
    body[data-kt-app-sidebar-minimize="on"] #kt_app_sidebar_menu .menu-content { display: none; }

    body[data-kt-app-sidebar-minimize="on"] #kt_app_sidebar_menu .menu-link { justify-content: center; padding-left: 0; padding-right: 0; }
    body[data-kt-app-sidebar-minimize="on"] #kt_app_sidebar_menu .menu-icon { width: auto; justify-content: center; }
}

/* ----------------------------------------------------------- Тёмная тема */

[data-bs-theme="dark"] {
    --portal-sidebar-bg: #1e1e2d;
    --portal-sidebar-border: #2b2b40;
    --portal-sidebar-text: #b5b7c8;
    --portal-sidebar-text-hover: #ffffff;
    --portal-sidebar-hover-bg: #2b2b40;
    --portal-sidebar-heading: #8c90a4;
}
[data-bs-theme="dark"] .app-sidebar { box-shadow: none; }
[data-bs-theme="dark"] .app-sidebar-wrapper::-webkit-scrollbar-thumb { background: #35354f; }
[data-bs-theme="dark"] .app-header-mobile {
    background-color: var(--bs-app-bg-color, #1e1e2d);
    border-bottom-color: #2b2b40;
}

/* Общие компоненты: правила OSMO без привязки к его страницам */
[data-bs-theme="dark"] .form-control.form-control-solid,
[data-bs-theme="dark"] .form-select.form-select-solid { background-color: var(--bs-gray-100); border-color: var(--bs-gray-300); }
[data-bs-theme="dark"] .form-check.form-check-solid .form-check-input:not(:checked) { background-color: var(--bs-gray-100); }
[data-bs-theme="dark"] :is(table, .tab-content, .table-responsive, .accordion-button, .list-group-item).bg-white { background-color: var(--bs-body-bg) !important; }
[data-bs-theme="dark"] .list-group-item { background-color: transparent; }

/* Тёмный текст на жёлтой заливке — она и в тёмной теме светлая */
[data-bs-theme="dark"] .bg-warning.text-dark { color: #1E2129 !important; }

/* Плашки «dark» и «secondary» сливались с фоном */
[data-bs-theme="dark"] .badge:is(.badge-light-dark, .badge-light-secondary) { color: var(--bs-gray-800) !important; }
[data-bs-theme="dark"] .badge.badge-light:not(.text-white) { color: var(--bs-gray-700) !important; }
[data-bs-theme="dark"] .btn.btn-light-dark:not(:hover):not(:active):not(.active):not(.show) { color: var(--bs-gray-800); }

/* Ступени «тёмного» из palette.css в тёмной теме — светлым серым */
[data-bs-theme="dark"] :is(.text-dark-400, .text-dark-500) { color: var(--bs-gray-600) !important; }
[data-bs-theme="dark"] :is(.text-dark-600, .text-dark-700, .text-dark-800, .text-dark-900) { color: var(--bs-gray-700) !important; }
/* Наведение на .btn-light: --bs-dark в тёмной теме светлый, и белый текст на нём пропадал */
[data-bs-theme="dark"] .btn.btn-light:hover:not(.btn-active) {
    color: var(--bs-gray-900) !important;
    border-color: var(--bs-gray-400);
    background-color: var(--bs-gray-300) !important;
}
[data-bs-theme="dark"] .btn.btn-light:hover:not(.btn-active) i,
[data-bs-theme="dark"] .btn.btn-light:hover:not(.btn-active) .svg-icon { color: var(--bs-gray-900) !important; }

/* Подписи графиков ApexCharts: по умолчанию тёмно-серые (#373d3f) */
[data-bs-theme="dark"] .apexcharts-legend-text { color: var(--bs-gray-700) !important; }
[data-bs-theme="dark"] :is(.apexcharts-xaxis-label, .apexcharts-yaxis-label, .apexcharts-title-text) { fill: var(--bs-gray-600); }



/* --------------------------------------------------------------- Печать */

@media print {
    .app-sidebar, .app-header-mobile, .app-toolbar, .app-footer { display: none !important; }
    .app-main { margin-left: 0 !important; padding-right: 0 !important; }
}

/* ------------------------------------------------------------ Попапы box()
 | Затемнение на время загрузки формы — выше модалок, чтобы второй клик
 | не открыл тот же попап дважды. */

#boxLoader { position: fixed; inset: 0; z-index: 20000; background: rgba(0, 0, 0, .35); }

/* Форма x-ui.modal оборачивает шапку, тело и подвал. Без contents она встаёт
   лишним flex-потомком .modal-content, и modal-dialog-scrollable не крутит тело */
.modal-content > .modal-form { display: contents; }

/* ------------------------------------------------------------ Карточка-таблица
 | «Поле …… значение» (x-ui.card-table, из FIN app.css). Подложка подписи и
 | значения закрывает пунктир под текстом; цвета — от темы. */

.card-table .tr { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--bs-gray-300); }
.card-table .th,
.card-table .td { background: var(--bs-body-bg); margin-bottom: -7px; }
.card-table .th { padding-right: 5px; color: var(--bs-gray-700); }
.card-table .td { padding-left: 5px; text-align: right; }
.card-table .tr + .tr { margin-top: 12px; }
.card-table { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ Графики x-ui
 | Подписи оси X не выходят за график; лишние прячет portal.js, если тесно. */

.ui-axis-x { min-width: 0; overflow: hidden; }
.ui-axis-x > * { flex: 1 1 0 !important; min-width: 0 !important; white-space: nowrap; text-align: center; }
.ui-axis-x > .ui-axis-skip { visibility: hidden; }

/* ===== История настройки (HH-017) =====
 | Вертикальная линия между значками записей: от низа значка до следующей записи. */

.setting-history-line { position: absolute; left: 14px; top: 32px; bottom: 0; width: 2px; background: var(--bs-gray-300); }