/* =========================================================================
   console-ui.css — единый слой оформления консоли.

   Подключается ПОСЛЕ material-dashboard.css и переопределяет его там, где
   нужно: плотная строгая подача вместо витринных градиентов, единые отступы,
   типографика и цвета, нормальное поведение на телефоне.

   Всё построено на CSS-переменных. Светлая тема живёт в :root, тёмная — в
   .dark-version (класс ставится на body, как и раньше, и хранится у
   пользователя в БД). Чтобы поменять акцент во всей консоли, достаточно
   двух строк здесь.

   Файл собран руками и не проходит через npm: в этом проекте ассеты лежат
   в public/ и коммитятся, сборки на сервере нет.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Токены
   ------------------------------------------------------------------------- */

:root {
    /* Поверхности и текст */
    --c-ground:     #eef1f3;
    --c-surface:    #ffffff;
    --c-surface-2:  #f4f7f8;
    --c-surface-3:  #e9eef0;
    --c-ink:        #151b1e;
    --c-ink-2:      #46555b;
    --c-muted:      #5c6e75;
    --c-line:       #dbe1e4;
    --c-line-2:     #c6d0d4;

    /* Акцент */
    --c-accent:      #0f6d7c;
    --c-accent-ink:  #0b5766;
    --c-accent-soft: #e0eef0;
    --c-accent-line: #b6d6db;

    /* Текст поверх заливки кнопки. В тёмной теме заливка светлая — см. ниже. */
    --c-on-fill: #ffffff;

    /* Семантика статусов */
    --c-ok:        #2e7150;
    --c-ok-soft:   #e2f0e8;
    --c-warn:      #8a6212;
    --c-warn-soft: #f6ecd6;
    --c-danger:      #a93a30;
    --c-danger-soft: #f7e3e1;
    --c-info:      #2b5f8a;
    --c-info-soft: #e2ecf5;

    /* Тёмный сайдбар — один и тот же в обеих темах */
    --c-nav-bg:      #131b1f;
    --c-nav-ink:     #cdd8dc;
    --c-nav-ink-dim: #8ea0a7;
    --c-nav-line:    #243136;
    --c-nav-active:  #0f6d7c;

    /* Размеры */
    --sidebar-w: 260px;
    --topbar-h: 56px;
    --radius: 6px;
    --radius-sm: 4px;

    /* Тени — скупо: только то, что действительно всплывает над страницей */
    --shadow-pop: 0 6px 24px -8px rgba(21, 27, 30, .28);
    --shadow-panel: -8px 0 32px -12px rgba(21, 27, 30, .35);

    /* Шрифты */
    --f-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

body.dark-version {
    --c-ground:     #0f1416;
    --c-surface:    #161d20;
    --c-surface-2:  #1c2529;
    --c-surface-3:  #232e33;
    --c-ink:        #e4ebed;
    --c-ink-2:      #aebbc0;
    --c-muted:      #83959c;
    --c-line:       #263236;
    --c-line-2:     #34434a;

    --c-accent:      #4fb3c4;
    --c-accent-ink:  #7bc9d6;
    --c-accent-soft: #14343a;
    --c-accent-line: #2a5a63;

    --c-on-fill: #0d1416;

    --c-ok:        #6dbb8e;
    --c-ok-soft:   #16291f;
    --c-warn:      #d3a656;
    --c-warn-soft: #2b2415;
    --c-danger:      #e08a80;
    --c-danger-soft: #2e1d1b;
    --c-info:      #8ab4dc;
    --c-info-soft: #182634;

    --c-nav-bg:      #0c1113;
    --c-nav-line:    #1d2629;

    --shadow-pop: 0 6px 24px -8px rgba(0, 0, 0, .6);
    --shadow-panel: -8px 0 32px -12px rgba(0, 0, 0, .7);
}

/* -------------------------------------------------------------------------
   2. База
   ------------------------------------------------------------------------- */

body.hold-transition {
    background-color: var(--c-ground) !important;
    color: var(--c-ink);
    font-family: var(--f-ui);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body.hold-transition h1,
body.hold-transition h2,
body.hold-transition h3,
body.hold-transition h4,
body.hold-transition h5,
body.hold-transition h6 {
    font-family: var(--f-ui);
    color: var(--c-ink);
    font-weight: 600;
    letter-spacing: -.01em;
    margin-bottom: 0;
}

body.hold-transition h4 { font-size: 18px; }
body.hold-transition h5 { font-size: 16px; }
body.hold-transition h6 { font-size: 14px; }

.text-muted { color: var(--c-muted) !important; }
.text-dark { color: var(--c-ink) !important; }

hr, .horizontal { background-color: var(--c-line) !important; border-color: var(--c-line) !important; opacity: 1; }

a { color: var(--c-accent-ink); }
a:hover { color: var(--c-accent); }

/* Цифры в колонку: суммы, id, даты */
.table td, .table th,
.ui-num, .stat-value { font-variant-numeric: tabular-nums; }

::selection { background: var(--c-accent-soft); color: var(--c-ink); }

*:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 1px;
}

/* -------------------------------------------------------------------------
   3. Каркас страницы
   ------------------------------------------------------------------------- */

/*
 * Селектор повторяет тот, которым Material Dashboard задаёт отступ под
 * сайдбар (.sidenav.fixed-start + .main-content). Без этого его правило
 * оказывается специфичнее и наш отступ не применяется.
 */
.main-content,
.sidenav.fixed-start + .main-content,
body.dark-version .main-content {
    margin-left: var(--sidebar-w);
    background-color: var(--c-ground) !important;
    min-height: 100vh;
    transition: margin-left .18s ease;
}

.ui-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
}

.ui-topbar__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-ink-2);
    font-size: 16px;
    cursor: pointer;
    flex: none;
}
.ui-topbar__burger:hover { background: var(--c-surface-2); color: var(--c-ink); }

.ui-topbar__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-ink);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.ui-topbar__spacer { flex: 1 1 auto; min-width: 0; }

.ui-topbar__user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-ink-2);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.ui-topbar__user:hover { background: var(--c-surface-2); color: var(--c-ink); }

.ui-page {
    padding: 20px 16px 56px;
    max-width: 1600px;
}

/* Шапка раздела: заголовок слева, действия справа, на телефоне — в столбик */
.ui-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 16px;
}
.ui-page-head__title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.015em;
    margin: 0;
    color: var(--c-ink);
}
.ui-page-head__sub {
    font-size: 13px;
    color: var(--c-muted);
    margin: 2px 0 0;
    width: 100%;
}
.ui-page-head__actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* -------------------------------------------------------------------------
   4. Сайдбар
   ------------------------------------------------------------------------- */

.sidenav,
aside.sidenav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--c-nav-line) !important;
    background: var(--c-nav-bg) !important;
    background-image: none !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    /* .navbar из Bootstrap ставит flex-wrap: wrap — длинное меню уходило бы
       второй колонкой вправо вместо прокрутки. */
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    z-index: 60;
    transition: transform .18s ease;
}

.sidenav-header {
    height: var(--topbar-h);
    flex: none;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--c-nav-line);
}
.sidenav-header a,
.ui-nav__brand {
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 !important;
    margin: 0 !important;
}

.ui-nav__close {
    display: none;
    margin-left: auto;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--c-nav-ink-dim);
    font-size: 18px;
    cursor: pointer;
}
.ui-nav__close:hover { color: #fff; }

.sidenav .navbar-collapse,
#sidenav-collapse-main {
    height: auto !important;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0 24px;
    display: block !important;
}

.sidenav .navbar-nav { height: auto !important; padding: 0 8px; }

.sidenav .nav-link,
.sidenav a.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px !important;
    margin: 1px 0;
    border-radius: var(--radius-sm);
    color: var(--c-nav-ink) !important;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
    background-image: none !important;
    box-shadow: none !important;
    transition: background-color .12s ease, color .12s ease;
}
.sidenav .nav-link:hover { background-color: rgba(255, 255, 255, .06); color: #fff !important; }

.sidenav .nav-link i {
    width: 18px;
    font-size: 14px;
    text-align: center;
    color: var(--c-nav-ink-dim);
    flex: none;
}
.sidenav .nav-link:hover i { color: #fff; }

/* Активный пункт: заливка акцентом вместо градиента Material Dashboard */
.sidenav .nav-link.active,
.sidenav .nav-link.active.bg-gradient-primary {
    background-color: var(--c-nav-active) !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: none !important;
}
.sidenav .nav-link.active i { color: #fff; }

/* Подпись группы пунктов */
.ui-nav__section {
    padding: 16px 10px 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--c-nav-ink-dim);
    opacity: .75;
    list-style: none;
}
.ui-nav__section:first-child { padding-top: 8px; }

.ui-nav__divider {
    height: 1px;
    background: var(--c-nav-line);
    margin: 12px 10px;
    list-style: none;
}

/* Вложенные списки разделов */
.sidenav .collapse ul,
.sidenav .list-unstyled {
    padding-left: 26px;
    margin: 2px 0 6px;
    border-left: 1px solid var(--c-nav-line);
    margin-left: 18px;
}
.sidenav .collapse .nav-link {
    font-size: 13px;
    font-weight: 400;
    padding: 6px 10px !important;
    color: var(--c-nav-ink-dim) !important;
}
.sidenav .collapse .nav-link:hover { color: #fff !important; }

/* Заголовок сворачиваемой группы: стрелка справа */
.sidenav [data-bs-toggle="collapse"] { position: relative; padding-right: 26px !important; }
.sidenav [data-bs-toggle="collapse"]::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    opacity: .55;
    transition: transform .15s ease;
}
.sidenav [data-bs-toggle="collapse"][aria-expanded="true"]::after {
    transform: translateY(-30%) rotate(-135deg);
}

/* Затемнение под выехавшим меню (только на узких экранах) */
.ui-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 17, .5);
    z-index: 55;
    opacity: 0;
    transition: opacity .18s ease;
}
.ui-nav-overlay.is-visible { opacity: 1; }

/* --- Меню: поиск, разделы-аккордеон, закреплённые (27.10.2026) --- */
.ui-nav__search {
    flex: none;
    position: relative;
    display: flex;
    align-items: center;
    margin: 10px 12px 2px;
}
.ui-nav__search > i {
    position: absolute;
    left: 10px;
    font-size: 12px;
    color: var(--c-nav-ink-dim);
    pointer-events: none;
}
.ui-nav__search input {
    width: 100%;
    height: 34px;
    padding: 0 30px 0 30px;
    border: 1px solid var(--c-nav-line);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .05);
    color: #fff;
    font-size: 13px;
    outline: none;
    -webkit-appearance: none;
}
.ui-nav__search input::placeholder { color: var(--c-nav-ink-dim); opacity: 1; }
.ui-nav__search input:focus { border-color: var(--c-nav-active); background: rgba(255, 255, 255, .08); }
.ui-nav__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ui-nav__kbd {
    position: absolute;
    right: 8px;
    min-width: 18px;
    padding: 1px 5px;
    border: 1px solid var(--c-nav-line);
    border-radius: 3px;
    background: transparent;
    color: var(--c-nav-ink-dim);
    font: 500 11px/1.4 var(--f-mono);
    text-align: center;
    box-shadow: none;
    pointer-events: none;
}
.ui-nav__search input:focus ~ .ui-nav__kbd,
.ui-nav__search input:not(:placeholder-shown) ~ .ui-nav__kbd { display: none; }
@media (hover: none) { .ui-nav__kbd { display: none; } }

.ui-nav__group,
.ui-nav__pinned,
.ui-nav__empty { list-style: none; }
.ui-nav__items { list-style: none; margin: 0 0 4px; padding: 0; }
.ui-nav__items[hidden],
.ui-nav__group[hidden],
.ui-nav__item[hidden] { display: none !important; }

/* Заголовок раздела — кнопка */
.ui-nav__group-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1px 0;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--c-nav-ink);
    font: 600 13px/1.35 var(--f-ui);
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.ui-nav__group-head:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.ui-nav__group-head:focus-visible { outline: 2px solid var(--c-nav-active); outline-offset: -2px; }
.ui-nav__group-head > i { width: 18px; font-size: 14px; text-align: center; color: var(--c-nav-ink-dim); flex: none; }
.ui-nav__group-title { flex: 1 1 auto; min-width: 0; }
.ui-nav__count {
    flex: none;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: var(--c-nav-ink-dim);
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
}
.ui-nav__group.is-open .ui-nav__count { visibility: hidden; }
.ui-nav__chevron {
    flex: none;
    width: 7px;
    height: 7px;
    margin: 0 2px 3px 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .55;
    transition: transform .15s ease;
}
.ui-nav__group.is-open .ui-nav__chevron { transform: rotate(-135deg); margin-bottom: -3px; }
/* Раздел текущей страницы — заметнее, даже если свёрнут */
.ui-nav__group.has-current > .ui-nav__group-head,
.ui-nav__group.has-current > .ui-nav__group-head > i { color: #fff; }

/* Пункты внутри раздела: отступ под иконку раздела и тонкая линия слева */
.ui-nav__group .ui-nav__items {
    margin-left: 18px;
    padding-left: 8px;
    border-left: 1px solid var(--c-nav-line);
}
.ui-nav__item { position: relative; }
.ui-nav__item .nav-link { padding-right: 32px !important; }
.ui-nav__group .ui-nav__item .nav-link { font-weight: 400; }
.ui-nav__group .ui-nav__item .nav-link > i { display: none; }
.ui-nav__pinned .ui-nav__item .nav-link > i { display: inline-block; }

/* Material Dashboard даёт пунктам width: 100% и ссылкам margin: 0 1rem —
   во вложенном списке пункт вылезал за край меню вместе со звёздочкой. */
.sidenav .navbar-nav .nav-item { width: auto !important; margin-top: 0 !important; }
.sidenav .navbar-nav .nav-item > .nav-link { margin: 1px 0 !important; }
.sidenav .navbar-nav .nav-item > .nav-link > i { min-width: 0; width: 18px; font-size: 14px; line-height: 1; }

/* Звёздочка «закрепить»: видна при наведении, у закреплённых — всегда */
.ui-nav__pin {
    position: absolute;
    top: 50%;
    right: 4px;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--c-nav-ink-dim);
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, color .12s ease;
}
.ui-nav__item:hover .ui-nav__pin,
.ui-nav__pin:focus-visible,
.ui-nav__pin[aria-pressed="true"] { opacity: 1; }
.ui-nav__pin:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.ui-nav__pin[aria-pressed="true"] { color: #e2b74a; }
.ui-nav__item .nav-link.active ~ .ui-nav__pin { color: rgba(255, 255, 255, .85); }
@media (hover: none) { .ui-nav__pin { opacity: .6; } }

.ui-nav__pinned { padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--c-nav-line); }
.ui-nav__pinned .ui-nav__pin { opacity: 0; }
.ui-nav__pinned .ui-nav__item:hover .ui-nav__pin { opacity: 1; }

/* Поиск: первый найденный — откроется по Enter */
.sidenav.is-searching .ui-nav__item.is-first > .nav-link:not(.active) { background-color: rgba(255, 255, 255, .08); color: #fff !important; }
.ui-nav__empty { padding: 10px; font-size: 13px; color: var(--c-nav-ink-dim); }

/* -------------------------------------------------------------------------
   5. Карточки
   ------------------------------------------------------------------------- */

.card {
    background-color: var(--c-surface) !important;
    background-image: none !important;
    border: 1px solid var(--c-line) !important;
    border-radius: var(--radius) !important;
    box-shadow: none !important;
    margin-bottom: 16px;
}

.card-header {
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: 1px solid var(--c-line) !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    position: static !important;
    z-index: auto !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}
.card-header h6,
.card-header h5,
.card-header h4,
.card-header .card-title {
    font-size: 14px !important;
    font-weight: 600;
    color: var(--c-ink) !important;
    margin: 0 !important;
}

/*
 * Material Dashboard вытаскивал цветную плашку заголовка за пределы карточки
 * (mt-n4 mx-3 z-index-2 + bg-gradient-*). Плашка гасится: заголовок садится
 * в карточку, как в обычной таблице. Классы в разметке при этом можно не
 * трогать — страницы остаются рабочими.
 */
.card > .card-header.p-0 { padding: 0 !important; border-bottom: 1px solid var(--c-line) !important; }
.card > .card-header.mt-n4 { margin-top: 0 !important; }

/*
 * Гасим ТОЛЬКО плашку-обёртку заголовка. Кнопки и метки, которые лежат в той
 * же шапке (например «Опубликовать выбранные» на отзывах), под это правило
 * попадать не должны: у них градиент — это их собственный фон, и без него
 * остаётся белый текст на белом.
 */
.card > .card-header [class*="bg-gradient-"]:not(.btn):not(.badge):not(button):not(a) {
    background-image: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
    width: 100%;
}
.card > .card-header [class*="bg-gradient-"] h6,
.card > .card-header [class*="bg-gradient-"] h5,
.card > .card-header [class*="bg-gradient-"] h4 {
    color: var(--c-ink) !important;
    padding-left: 0 !important;
}

/* Градиент бывает и на самой шапке, а не на вложенной плашке */
.card > .card-header[class*="bg-gradient-"] {
    background-image: none !important;
    background-color: transparent !important;
}

/* …и на самой карточке — так сделаны плитки на статистике клиентов */
.card[class*="bg-gradient-"] {
    background-image: none !important;
    background-color: var(--c-surface) !important;
}

/*
 * Белый текст на светлой поверхности.
 *
 * В разметке класс text-white ставился под цветную подложку. Подложек больше
 * нет, поэтому внутри карточек, шапок, модалок и боковой панели белый текст
 * гарантированно нечитаем — перекрашиваем в основной. Кнопки исключены: у них
 * свой цветной фон, и белый текст на нём как раз правильный.
 */
.card.text-white,
.card.text-white *:not(.btn),
.card-header.text-white,
.card-header.text-white *:not(.btn),
.card .text-white:not(.btn),
.card-body .text-white:not(.btn),
#right-menu .text-white:not(.btn),
.modal-content .text-white:not(.btn) {
    color: var(--c-ink) !important;
}

/* Белая метка на белой шапке сливалась в пятно */
.card .badge.bg-white,
.card-header .badge.bg-white {
    background-color: var(--c-surface-2) !important;
    border: 1px solid var(--c-line);
    color: var(--c-ink) !important;
}

.card-body { padding: 16px !important; background-image: none !important; }
.card-footer {
    background-color: var(--c-surface-2) !important;
    border-top: 1px solid var(--c-line) !important;
    padding: 12px 16px !important;
}

/* Плитка с числом — для сводок наверху страниц */
.ui-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    height: 100%;
}
.ui-stat__label {
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-muted);
    font-weight: 500;
}
.ui-stat__value {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
}
.ui-stat__hint { font-size: 12px; color: var(--c-muted); }
.ui-stat--ok .ui-stat__value { color: var(--c-ok); }
.ui-stat--warn .ui-stat__value { color: var(--c-warn); }
.ui-stat--danger .ui-stat__value { color: var(--c-danger); }

/* -------------------------------------------------------------------------
   6. Таблицы
   ------------------------------------------------------------------------- */

.table {
    color: var(--c-ink-2);
    margin-bottom: 0;
    font-size: 13.5px;
    --bs-table-bg: transparent;
}

.table > thead > tr > th,
.table thead th {
    background: var(--c-surface-2);
    color: var(--c-ink-2) !important;
    font-family: var(--f-ui);
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 9px 12px !important;
    border-bottom: 1px solid var(--c-line-2) !important;
    vertical-align: middle;
    opacity: 1;
}

.table > tbody > tr > td,
.table tbody td {
    padding: 9px 12px !important;
    border-bottom: 1px solid var(--c-line) !important;
    vertical-align: middle;
    color: var(--c-ink-2);
    font-size: 13.5px;
}

.table > tbody > tr:last-child > td { border-bottom: 0 !important; }
.table tbody tr:hover > td { background-color: var(--c-surface-2); }

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: transparent;
    box-shadow: none;
    color: var(--c-ink-2);
}
.table-striped > tbody > tr:nth-of-type(even) > * { background-color: var(--c-surface-2); }

.table-bordered > :not(caption) > * > * { border-color: var(--c-line) !important; }

.table tfoot td,
.table tfoot th {
    background: var(--c-surface-2) !important;
    border-top: 1px solid var(--c-line-2) !important;
    font-weight: 600;
    color: var(--c-ink) !important;
    padding: 10px 12px !important;
}

/* Ссылки в таблицах — акцентом, а не розовым из старого слоя */
.table a { color: var(--c-accent-ink) !important; font-weight: 500; }
.table a:hover { color: var(--c-accent) !important; text-decoration: underline; }

/* Обёртка со скроллом: таблица едет вбок сама, страница — нет */
.table-responsive,
.ui-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* Липкая шапка на длинных таблицах */
.ui-table-sticky thead th,
.ui-table-scroll--sticky table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Фильтры в шапке таблицы: убираем растянутые инпуты */
.table thead .form-control,
.table thead .custom-select,
.table thead select {
    height: 30px;
    min-height: 30px;
    padding: 3px 8px;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
}

/* -------------------------------------------------------------------------
   7. Таблица → карточки на телефоне

   Работает для таблиц с классом .ui-table-cards, у которых в ячейках
   проставлен data-label. Разметка при этом остаётся обычной таблицей:
   на десктопе ничего не меняется.
   ------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .ui-table-cards,
    .ui-table-cards thead,
    .ui-table-cards tbody,
    .ui-table-cards tr,
    .ui-table-cards td,
    .ui-table-scroll--cards table,
    .ui-table-scroll--cards thead,
    .ui-table-scroll--cards tbody,
    .ui-table-scroll--cards tr,
    .ui-table-scroll--cards td {
        display: block;
        width: 100%;
    }

    .ui-table-cards thead { display: none; }

    .ui-table-cards tbody tr {
        background: var(--c-surface);
        border: 1px solid var(--c-line);
        border-radius: var(--radius);
        padding: 10px 12px;
        margin-bottom: 10px;
    }
    .ui-table-cards tbody tr:hover > td { background: transparent; }

    .ui-table-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 5px 0 !important;
        border: 0 !important;
        text-align: right;
    }

    .ui-table-cards tbody td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        text-align: left;
        font-size: 11px;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--c-muted);
        font-weight: 600;
    }

    /* Ячейка без подписи (кнопки действий) занимает всю ширину */
    .ui-table-cards tbody td:not([data-label]) {
        justify-content: flex-start;
        text-align: left;
        padding-top: 8px !important;
        margin-top: 6px;
        border-top: 1px solid var(--c-line) !important;
    }
    .ui-table-cards tbody td:not([data-label])::before { content: none; }

    .ui-table-cards tfoot { display: block; }
    .ui-table-cards tfoot tr { display: block; border-radius: var(--radius); }
    .ui-table-cards tfoot td { display: flex; justify-content: space-between; }

    /* Те же правила для таблицы внутри <x-data-table cards> */
    .ui-table-scroll--cards { overflow-x: visible; }
    .ui-table-scroll--cards thead { display: none; }
    .ui-table-scroll--cards tbody tr {
        background: var(--c-surface);
        border: 1px solid var(--c-line);
        border-radius: var(--radius);
        padding: 10px 12px;
        margin-bottom: 10px;
    }
    .ui-table-scroll--cards tbody tr:hover > td { background: transparent; }
    .ui-table-scroll--cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 5px 0 !important;
        border: 0 !important;
        text-align: right;
    }
    .ui-table-scroll--cards tbody td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        text-align: left;
        font-size: 11px;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--c-muted);
        font-weight: 600;
    }
    .ui-table-scroll--cards tbody td:not([data-label]) {
        justify-content: flex-start;
        text-align: left;
        padding-top: 8px !important;
        margin-top: 6px;
        border-top: 1px solid var(--c-line) !important;
    }
    .ui-table-scroll--cards tbody td:not([data-label])::before { content: none; }
    .ui-table-scroll--cards tfoot { display: block; }
    .ui-table-scroll--cards tfoot tr { display: block; border-radius: var(--radius); }
    .ui-table-scroll--cards tfoot td { display: flex; justify-content: space-between; }
}

/* -------------------------------------------------------------------------
   8. Формы
   ------------------------------------------------------------------------- */

.form-control,
.form-select,
.custom-select,
textarea.form-control {
    background-color: var(--c-surface) !important;
    border: 1px solid var(--c-line-2) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--c-ink) !important;
    font-size: 13.5px;
    padding: 7px 11px;
    min-height: 38px;
    box-shadow: none !important;
    transition: border-color .12s ease, box-shadow .12s ease;
}
textarea.form-control { min-height: 90px; }

.form-control::placeholder { color: var(--c-muted); opacity: 1; }

.form-control:focus,
.form-select:focus,
.custom-select:focus {
    border-color: var(--c-accent) !important;
    box-shadow: 0 0 0 3px var(--c-accent-soft) !important;
}

.form-control:disabled,
.form-control[readonly] { background-color: var(--c-surface-3) !important; color: var(--c-muted) !important; }

label,
.form-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--c-ink-2);
    margin-bottom: 4px;
}

.form-group { margin-bottom: 14px; }

.invalid-feedback, .text-danger { color: var(--c-danger) !important; }
.is-invalid, .form-control.is-invalid { border-color: var(--c-danger) !important; }

.form-check-input:checked { background-color: var(--c-accent); border-color: var(--c-accent); }

/* Полоса фильтров над таблицей */
.ui-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    margin-bottom: 16px;
}
.ui-filters .form-group { margin-bottom: 0; }
.ui-filters__field { display: flex; flex-direction: column; min-width: 150px; flex: 1 1 150px; }
.ui-filters__actions { display: flex; gap: 8px; margin-left: auto; }

/* -------------------------------------------------------------------------
   9. Кнопки
   ------------------------------------------------------------------------- */

.btn {
    font-family: var(--f-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    min-height: 38px;
    box-shadow: none !important;
    background-image: none !important;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { transform: none !important; }

.btn-primary,
.btn.bg-gradient-primary,
.btn.bg-gradient-info,
.btn.bg-gradient-dark {
    background-color: var(--c-accent) !important;
    border: 1px solid var(--c-accent) !important;
    color: var(--c-on-fill) !important;
}
.btn-primary:hover,
.btn.bg-gradient-primary:hover,
.btn.bg-gradient-info:hover,
.btn.bg-gradient-dark:hover { background-color: var(--c-accent-ink) !important; border-color: var(--c-accent-ink) !important; }

.btn-success, .btn.bg-gradient-success {
    background-color: var(--c-ok) !important;
    border: 1px solid var(--c-ok) !important;
    color: var(--c-on-fill) !important;
}
.btn-danger, .btn.bg-gradient-danger {
    background-color: var(--c-danger) !important;
    border: 1px solid var(--c-danger) !important;
    color: var(--c-on-fill) !important;
}
.btn-warning, .btn.bg-gradient-warning {
    background-color: var(--c-warn) !important;
    border: 1px solid var(--c-warn) !important;
    color: var(--c-on-fill) !important;
}

.btn-secondary, .btn-default, .btn-light {
    background-color: var(--c-surface) !important;
    border: 1px solid var(--c-line-2) !important;
    color: var(--c-ink-2) !important;
}
.btn-secondary:hover, .btn-default:hover, .btn-light:hover {
    background-color: var(--c-surface-2) !important;
    color: var(--c-ink) !important;
}

/*
 * Синий btn-info из бутстрапа встречается на 28 кнопках и выпадал из палитры.
 * Ведём его туда же, куда primary: в консоли одна главная кнопка, а не две
 * разного цвета с одинаковым смыслом.
 */
.btn-info {
    background-color: var(--c-accent) !important;
    border: 1px solid var(--c-accent) !important;
    color: var(--c-on-fill) !important;
}
.btn-info:hover { background-color: var(--c-accent-ink) !important; border-color: var(--c-accent-ink) !important; }

.btn-dark {
    background-color: var(--c-ink) !important;
    border: 1px solid var(--c-ink) !important;
    color: var(--c-surface) !important;
}

.btn-link {
    background: transparent !important;
    border: 0 !important;
    color: var(--c-accent-ink) !important;
    text-decoration: none;
    padding-left: 4px;
    padding-right: 4px;
}
.btn-link:hover { color: var(--c-accent) !important; text-decoration: underline; }

/* Все контурные кнопки — один стиль; цвет задаёт только смысловой вариант */
.btn-outline-primary,
.btn-outline-info,
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-danger,
.btn-outline-success {
    background: transparent !important;
    border: 1px solid var(--c-line-2) !important;
    color: var(--c-ink-2) !important;
}
.btn-outline-primary,
.btn-outline-info { border-color: var(--c-accent-line) !important; color: var(--c-accent-ink) !important; }
.btn-outline-danger { border-color: var(--c-danger) !important; color: var(--c-danger) !important; }
.btn-outline-success { border-color: var(--c-ok) !important; color: var(--c-ok) !important; }

.btn-outline-primary:hover,
.btn-outline-info:hover { background: var(--c-accent-soft) !important; }
.btn-outline-secondary:hover,
.btn-outline-dark:hover { background: var(--c-surface-2) !important; color: var(--c-ink) !important; }
.btn-outline-danger:hover { background: var(--c-danger-soft) !important; }
.btn-outline-success:hover { background: var(--c-ok-soft) !important; }

.btn-sm { padding: 5px 10px; min-height: 30px; font-size: 12px; }
.btn-xs { padding: 3px 8px; min-height: 26px; font-size: 11.5px; }
.btn-lg { padding: 10px 18px; min-height: 44px; font-size: 14px; }

/* Иконка-кнопка в строке таблицы */
.ui-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border: 1px solid var(--c-line-2);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-ink-2);
    font-size: 13px;
}
.ui-icon-btn:hover { background: var(--c-surface-2); color: var(--c-ink); }
.ui-icon-btn--danger:hover { border-color: var(--c-danger); color: var(--c-danger); }

/* Группа действий в строке */
.ui-row-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   10. Статусы и метки
   ------------------------------------------------------------------------- */

.badge,
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--f-ui);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    padding: 3px 8px;
    border-radius: 100px;
    background-image: none !important;
}

.ui-badge--ok      { background: var(--c-ok-soft);     color: var(--c-ok); }
.ui-badge--warn    { background: var(--c-warn-soft);   color: var(--c-warn); }
.ui-badge--danger  { background: var(--c-danger-soft); color: var(--c-danger); }
.ui-badge--info    { background: var(--c-info-soft);   color: var(--c-info); }
.ui-badge--muted   { background: var(--c-surface-3);   color: var(--c-muted); }
.ui-badge--accent  { background: var(--c-accent-soft); color: var(--c-accent-ink); }

.badge.bg-gradient-success, .badge.bg-success { background: var(--c-ok-soft) !important; color: var(--c-ok) !important; }
.badge.bg-gradient-danger,  .badge.bg-danger  { background: var(--c-danger-soft) !important; color: var(--c-danger) !important; }
.badge.bg-gradient-warning, .badge.bg-warning { background: var(--c-warn-soft) !important; color: var(--c-warn) !important; }
.badge.bg-gradient-info,    .badge.bg-info    { background: var(--c-info-soft) !important; color: var(--c-info) !important; }
.badge.bg-gradient-secondary, .badge.bg-secondary { background: var(--c-surface-3) !important; color: var(--c-muted) !important; }

/*
 * Смысловые цвета текста. Бутстраповские значения на тёмной теме уходили в
 * невнятный тусклый оттенок — привязываем их к тем же токенам, что и
 * остальную семантику, чтобы контраст держался в обеих темах.
 */
.text-primary, .text-info { color: var(--c-accent-ink) !important; }
.text-success { color: var(--c-ok) !important; }
.text-warning { color: var(--c-warn) !important; }
.text-danger  { color: var(--c-danger) !important; }
.text-secondary { color: var(--c-muted) !important; }

/* Сообщения об операции */
.alert {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-size: 13.5px;
    margin-bottom: 16px;
}
.alert-success { background: var(--c-ok-soft) !important;     border-color: var(--c-ok) !important;     color: var(--c-ok) !important; }
.alert-danger  { background: var(--c-danger-soft) !important; border-color: var(--c-danger) !important; color: var(--c-danger) !important; }
.alert-warning { background: var(--c-warn-soft) !important;   border-color: var(--c-warn) !important;   color: var(--c-warn) !important; }
.alert-info    { background: var(--c-info-soft) !important;   border-color: var(--c-info) !important;   color: var(--c-info) !important; }

/* Всплывающие уведомления рисуются из JS со своим фоном — их не трогаем */
#notification-block .alert { border: 0; }

/*
 * Bootstrap 5.2 задаёт этими классами и фон, и цвет текста разом. На тёмной
 * теме получалось чёрное по тёмному (контраст 1.2), поэтому переводим их на
 * ту же семантику, что и остальные метки.
 */
.badge.text-bg-success   { background-color: var(--c-ok-soft) !important;     color: var(--c-ok) !important; }
.badge.text-bg-danger    { background-color: var(--c-danger-soft) !important; color: var(--c-danger) !important; }
.badge.text-bg-warning   { background-color: var(--c-warn-soft) !important;   color: var(--c-warn) !important; }
.badge.text-bg-info      { background-color: var(--c-info-soft) !important;   color: var(--c-info) !important; }
.badge.text-bg-primary   { background-color: var(--c-accent-soft) !important; color: var(--c-accent-ink) !important; }
.badge.text-bg-secondary,
.badge.text-bg-light,
.badge.text-bg-dark      { background-color: var(--c-surface-3) !important;   color: var(--c-ink-2) !important; }

/* Точка-индикатор перед текстом статуса */
.ui-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* Моноширинные значения: id, суммы, адреса, токены */
.ui-mono { font-family: var(--f-mono); font-size: 12.5px; }

/* Пустое состояние вместо голой строки «нет данных» */
.ui-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 20px;
    text-align: center;
    color: var(--c-muted);
}
.ui-empty__title { font-size: 14px; font-weight: 600; color: var(--c-ink-2); }
.ui-empty__text { font-size: 13px; max-width: 42ch; }

/* -------------------------------------------------------------------------
   11. Выезжающая панель (right-menu)
   ------------------------------------------------------------------------- */

/*
 * Ширина панели раньше выставлялась из JS инлайновым стилем. Теперь это
 * класс: поведение то же, но на телефоне панель разворачивается во весь
 * экран, а не торчит полоской в 400px за краем.
 */
#right-menu {
    background-image: none !important;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 0;
    opacity: 0;
    overflow: auto;
    z-index: 70;
    background-color: var(--c-surface) !important;
    box-shadow: var(--shadow-panel) !important;
    border-left: 1px solid var(--c-line);
    display: flex;
    flex-direction: column;
    transition: width .2s ease, opacity .2s ease;
}
#right-menu.is-open { width: 400px; opacity: 1; }

/*
 * В тёмной теме панель заливалась фиолетовым: правило .dark-version #right-menu
 * в material-dashboard.css специфичнее одиночного #right-menu и стоит с
 * !important. Перебиваем его равной специфичностью, чтобы панель осталась в
 * общей палитре.
 */
body.dark-version #right-menu {
    background-color: var(--c-surface) !important;
    background-image: none !important;
}

#notification-block { transition: right .2s ease; }
body.ui-panel-open #notification-block { right: 410px; }
#right-menu .card-header {
    border-bottom: 1px solid var(--c-line) !important;
    padding: 14px 16px !important;
    flex: none;
}
#right-menu .card-header i { color: var(--c-muted) !important; }
#right-menu #right-menu-title { font-size: 15px; font-weight: 600; color: var(--c-ink); }
#right-menu-body { padding: 16px !important; flex: 1 1 auto; }
#right-menu hr { display: none; }

/* -------------------------------------------------------------------------
   12. Плагины: DataTables, Select2, модалки
   ------------------------------------------------------------------------- */

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { font-size: 12.5px; color: var(--c-muted); }

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    height: 32px;
    min-height: 32px;
    border: 1px solid var(--c-line-2);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-ink);
    padding: 4px 8px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--radius-sm) !important;
    border: 1px solid transparent !important;
    color: var(--c-ink-2) !important;
    padding: 4px 10px !important;
    margin: 0 2px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--c-surface-2) !important;
    border-color: var(--c-line-2) !important;
    color: var(--c-ink) !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    height: 38px !important;
    min-height: 38px;
    border: 1px solid var(--c-line-2) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--c-surface) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--c-ink) !important;
    line-height: 36px !important;
    padding-left: 10px;
    padding-top: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; }
.select2-dropdown { border: 1px solid var(--c-line-2) !important; border-radius: var(--radius-sm) !important; }
.select2-results__option { color: var(--c-ink) !important; font-size: 13.5px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--c-accent) !important; }

.modal-content {
    background: var(--c-surface);
    background-image: none !important;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
}
.modal-header, .modal-footer { border-color: var(--c-line); padding: 14px 16px; }
.modal-body { padding: 16px; }

.dropdown-menu {
    background: var(--c-surface);
    background-image: none !important;
    border: 1px solid var(--c-line) !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    padding: 6px;
    font-size: 13.5px;
}
.dropdown-item {
    border-radius: var(--radius-sm);
    color: var(--c-ink-2);
    padding: 8px 10px;
}
.dropdown-item:hover { background: var(--c-surface-2); color: var(--c-ink); }

/* -------------------------------------------------------------------------
   12a. Полосы-показатели: воронки, разбивки, доли (27.10.2026)

   Раньше полосы рисовались бледной заливкой «-soft» по бледной дорожке —
   на светлой теме почти сливались. Теперь заливка сплошная, дорожка
   заметная, число стоит рядом и под ним доля.
   ------------------------------------------------------------------------- */

.ui-meters { display: grid; gap: 12px; }

.ui-meter {
    display: grid;
    grid-template-columns: minmax(150px, 250px) minmax(0, 1fr) 104px;
    gap: 16px;
    align-items: center;
}
.ui-meter__label { min-width: 0; font-size: 13.5px; line-height: 1.3; color: var(--c-ink); }
.ui-meter__label small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--c-muted); }

.ui-meter__track {
    height: 12px;
    border-radius: 999px;
    background: var(--c-surface-3);
    box-shadow: inset 0 0 0 1px var(--c-line);
    overflow: hidden;
}
.ui-meter__fill {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: 999px;
    background: var(--c-accent);
}
.ui-meter--ok .ui-meter__fill     { background: var(--c-ok); }
.ui-meter--warn .ui-meter__fill   { background: var(--c-warn); }
.ui-meter--danger .ui-meter__fill { background: var(--c-danger); }
.ui-meter--muted .ui-meter__fill  { background: var(--c-muted); }

.ui-meter__value {
    text-align: right;
    font-size: 14.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--c-ink);
}
.ui-meter__value small { display: block; font-size: 11.5px; font-weight: 400; color: var(--c-muted); }
.ui-meter--danger .ui-meter__value { color: var(--c-danger); }

.ui-meter--sub .ui-meter__label { padding-left: 20px; font-size: 13px; color: var(--c-ink-2); }
.ui-meter--sub .ui-meter__track { height: 8px; }
.ui-meter--sub .ui-meter__value { font-size: 13.5px; }

.ui-meters__split { height: 1px; background: var(--c-line); margin: 2px 0; }

/* Узкая колонка: подпись и число в строку, полоса под ними */
.ui-meters--stacked .ui-meter { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; }
.ui-meters--stacked .ui-meter__track { grid-column: 1 / -1; grid-row: 2; }
.ui-meters--stacked .ui-meter__value small { display: inline; margin-left: 6px; }

@media (max-width: 640px) {
    .ui-meter { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
    .ui-meter__track { grid-column: 1 / -1; grid-row: 2; }
    .ui-meter__value small { display: inline; margin-left: 6px; }
}

/* Маленькая полоса в ячейке таблицы: <span class="ui-minibar"><span style="width: 40%"></span></span> */
.ui-minibar {
    display: inline-block;
    flex: none;
    width: 64px;
    height: 8px;
    border-radius: 999px;
    background: var(--c-surface-3);
    box-shadow: inset 0 0 0 1px var(--c-line);
    overflow: hidden;
    vertical-align: middle;
}
.ui-minibar > span { display: block; height: 100%; min-width: 3px; border-radius: 999px; background: var(--c-muted); }
.ui-minibar--accent > span { background: var(--c-accent); }
.ui-minibar--warn > span   { background: var(--c-warn); }
.ui-minibar--danger > span { background: var(--c-danger); }

/* -------------------------------------------------------------------------
   13. Адаптив
   ------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    :root { --sidebar-w: 232px; }
}

@media (max-width: 991.98px) {
    /* Сайдбар уезжает за край и открывается кнопкой в топбаре */
    .sidenav,
    aside.sidenav {
        transform: translateX(-100%);
        width: 280px;
        box-shadow: none !important;
    }
    body.ui-nav-open .sidenav,
    body.ui-nav-open aside.sidenav {
        transform: translateX(0);
        box-shadow: var(--shadow-pop) !important;
    }

    body.ui-nav-open { overflow: hidden; }
    body.ui-nav-open .ui-nav-overlay { display: block; }

    .main-content,
    .sidenav.fixed-start + .main-content,
    body.dark-version .main-content { margin-left: 0 !important; }

    .ui-topbar__burger { display: inline-flex; }
    .ui-nav__close { display: inline-flex; }

    .ui-page { padding: 16px 12px 48px; }

    /*
     * Таблицы DataTables занимают всю ширину экрана и на телефоне вылезали
     * за край страницы. Обёртку, которую плагин строит сам, пускаем в
     * горизонтальный скролл — так уезжает вбок только таблица, а не вся
     * страница. Разметку самих страниц при этом трогать не нужно.
     */
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .dataTables_wrapper > table.table,
    .dataTables_wrapper table.dataTable { min-width: 640px; }

    /* Панель занимает почти весь экран, а не торчит полоской */
    #right-menu.is-open { width: min(420px, 100%) !important; }
    body.ui-panel-open #notification-block { right: 10px; }
}

@media (max-width: 767.98px) {
    body.hold-transition { font-size: 14px; }

    .ui-page { padding: 14px 10px 44px; }
    .ui-page-head__title { font-size: 18px; }
    .ui-page-head__actions { margin-left: 0; width: 100%; }
    .ui-page-head__actions .btn { flex: 1 1 auto; }

    .card { border-radius: var(--radius); margin-bottom: 12px; }
    .card-body { padding: 12px !important; }
    .card-header { padding: 10px 12px !important; }

    .ui-filters { padding: 12px; }
    .ui-filters__field { flex: 1 1 100%; min-width: 0; }
    .ui-filters__actions { margin-left: 0; width: 100%; }
    .ui-filters__actions .btn { flex: 1 1 auto; }

    /* Формы и кнопки — крупнее для пальца */
    .form-control, .form-select, .custom-select { min-height: 42px; font-size: 15px; }
    .btn { min-height: 42px; }
    .btn-sm { min-height: 34px; }

    /* Модалки — во всю ширину */
    .modal-dialog { margin: 8px; }

    /* Таблицы DataTables: подписи над таблицей в столбик */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter { float: none !important; text-align: left !important; width: 100%; }
    .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; }

    #right-menu.is-open { width: 100% !important; }
}

/* Печать: без навигации и панелей */
@media print {
    .sidenav, .ui-topbar, .ui-nav-overlay, #right-menu, .ui-page-head__actions { display: none !important; }
    .main-content { margin-left: 0 !important; }
    .card { border: 1px solid #ccc !important; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}