/* ============================================================
   Тема Zveno для админки обменника.
   ============================================================

   Слой поверх AdminLTE: подключается последним и переопределяет цвета,
   скругления и шрифты. Вёрстку не трогаем вообще — десятки экранов с
   таблицами, select2 и duallistbox переписывать дорого, а выигрыш чисто
   внешний. Откат — снять одну строку подключения в шаблоне.

   Цвета — те же токены, что на сайте (src/app/globals.css). Меняются только
   вместе с дизайном.

   У White Label акцент свой: переменные ниже переопределяются файлом
   tenant-accent.css, если он есть.
   ============================================================ */

:root {
    --z-page: #14121f;
    --z-shell: #1c1a2b;
    --z-bar: #161522;
    --z-surface: #232135;
    --z-control: #312e47;
    --z-line: rgba(255, 255, 255, 0.09);

    --z-ink: #f0eef7;
    --z-ink-2: #d5d0e4;
    --z-ink-3: #a59fc0;
    --z-ink-5: #8b85a6;

    --z-accent: #a855d8;
    --z-accent-light: #c78ce8;
    --z-up: #6ee7a8;
    --z-down: #f2849e;

    --z-radius: 12px;
    --z-radius-sm: 9px;
}

/* ——— Общее ——— */

body,
.wrapper {
    background: var(--z-page);
    color: var(--z-ink-2);
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a {
    color: var(--z-accent-light);
}

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

/* ——— Шапка ——— */

.main-header.navbar {
    background: var(--z-bar) !important;
    border-bottom: 1px solid var(--z-line) !important;
}

.main-header .nav-link,
.main-header .navbar-nav .nav-link {
    color: var(--z-ink-2) !important;
}

.main-header .nav-link:hover {
    color: var(--z-accent-light) !important;
}

/* ——— Боковое меню ——— */

.main-sidebar,
.main-sidebar .sidebar {
    background: var(--z-bar);
}

.brand-link {
    background: var(--z-bar);
    border-bottom: 1px solid var(--z-line);
    color: var(--z-ink);
}

.nav-sidebar .nav-link {
    color: var(--z-ink-3);
    border-radius: var(--z-radius-sm);
    margin: 2px 8px;
}

.nav-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--z-ink);
}

/* Активный пункт — фирменной заливкой, а не синим по умолчанию. */
.nav-sidebar .nav-link.active,
.nav-sidebar > .nav-item > .nav-link.active {
    background: rgba(168, 85, 216, 0.18);
    color: var(--z-ink);
    box-shadow: none;
}

/* ——— Содержимое ——— */

.content-wrapper {
    background: var(--z-page);
}

.content-header h1,
.content-wrapper h1,
.content-wrapper h2,
.content-wrapper h3,
.content-wrapper h4,
.content-wrapper h5 {
    color: var(--z-ink);
}

.card,
.small-box,
.info-box,
.modal-content {
    background: var(--z-surface);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius);
    box-shadow: none;
    color: var(--z-ink-2);
}

.card-header,
.modal-header,
.modal-footer {
    background: transparent;
    border-color: var(--z-line);
    color: var(--z-ink);
}

.card-title {
    color: var(--z-ink);
}

/* ——— Кнопки ——— */

.btn {
    border-radius: var(--z-radius-sm);
}

.btn-primary {
    background: var(--z-accent);
    border-color: var(--z-accent);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--z-accent-light);
    border-color: var(--z-accent-light);
    color: #fff;
}

.btn-secondary,
.btn-default {
    background: var(--z-control);
    border-color: var(--z-line);
    color: var(--z-ink-2);
}

.btn-success {
    background: #1d7a4d;
    border-color: #1d7a4d;
}

.btn-danger {
    background: #a33449;
    border-color: #a33449;
}

.btn-link {
    color: var(--z-accent-light);
}

/* ——— Поля ——— */

.form-control,
.custom-select,
.select2-container--bootstrap4 .select2-selection {
    background: var(--z-shell);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius-sm);
    color: var(--z-ink);
}

.form-control:focus,
.custom-select:focus {
    background: var(--z-shell);
    border-color: var(--z-accent);
    box-shadow: 0 0 0 2px rgba(168, 85, 216, 0.2);
    color: var(--z-ink);
}

.form-control::placeholder {
    color: var(--z-ink-5);
}

.input-group-text {
    background: var(--z-control);
    border-color: var(--z-line);
    color: var(--z-ink-3);
}

label,
.col-form-label {
    color: var(--z-ink-3);
}

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

.table {
    color: var(--z-ink-2);
}

.table thead th {
    border-color: var(--z-line);
    color: var(--z-ink-3);
    font-weight: 600;
}

.table td,
.table th {
    border-color: var(--z-line);
}

.table-hover tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--z-ink);
}

.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.02);
}

/* DataTables рисует свои элементы управления мимо Bootstrap. */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .paginate_button {
    color: var(--z-ink-3) !important;
}

.page-link {
    background: var(--z-surface);
    border-color: var(--z-line);
    color: var(--z-ink-2);
}

.page-item.active .page-link {
    background: var(--z-accent);
    border-color: var(--z-accent);
    color: #fff;
}

/* ——— Плашки и подписи ——— */

.badge-success,
.text-success {
    color: var(--z-up) !important;
}

.badge-danger,
.text-danger {
    color: var(--z-down) !important;
}

.text-muted {
    color: var(--z-ink-5) !important;
}

.alert {
    border-radius: var(--z-radius);
    border-color: var(--z-line);
}

.dropdown-menu {
    background: var(--z-surface);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius);
}

.dropdown-item {
    color: var(--z-ink-2);
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--z-ink);
}

/* ——— Экран входа ——— */

.login-page,
.register-page {
    background: var(--z-page);
}

.login-logo a {
    color: var(--z-ink);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.login-card-body {
    background: var(--z-surface);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius);
    color: var(--z-ink-2);
}

.login-box-msg {
    color: var(--z-ink-3);
}

.login-box .card {
    background: transparent;
    border: 0;
}

/* ============================================================
   Второй заход: то, что осталось светлым.
   ============================================================

   Bootstrap-классов оказалось мало — таблицы красит собственный CSS
   DataTables, а он ставит `background-color:#ffffff` прямо на строку и на
   ячейки отсортированной колонки. Специфичность там выше нашей, поэтому
   ниже !important: без него белые полосы остаются.
   ============================================================ */

/* ——— Таблицы DataTables ——— */

table.dataTable tbody tr,
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even {
    background-color: transparent !important;
    color: var(--z-ink-2);
}

/* Чередование — не белым по тёмному, а двумя близкими тонами: строка
   должна отделяться от соседней, а не выпрыгивать со страницы. */
table.dataTable tbody tr.odd,
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.035) !important;
}

table.dataTable tbody tr:hover,
table.dataTable tbody tr.odd:hover,
table.dataTable tbody tr.even:hover {
    background-color: rgba(168, 85, 216, 0.1) !important;
}

/* Ячейки колонки, по которой идёт сортировка, DataTables красит отдельно. */
table.dataTable tbody tr > .sorting_1,
table.dataTable tbody tr > .sorting_2,
table.dataTable tbody tr > .sorting_3,
table.dataTable tbody tr.odd > .sorting_1,
table.dataTable tbody tr.odd > .sorting_2,
table.dataTable tbody tr.odd > .sorting_3,
table.dataTable tbody tr.even > .sorting_1,
table.dataTable tbody tr.even > .sorting_2,
table.dataTable tbody tr.even > .sorting_3 {
    background-color: transparent !important;
}

table.dataTable thead th,
table.dataTable tfoot th,
table.dataTable thead td,
table.dataTable tfoot td {
    background: transparent;
    border-color: var(--z-line) !important;
    color: var(--z-ink-3) !important;
}

.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--z-line) !important;
}

/* ——— Постраничная навигация ——— */

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dt-buttons .dt-button {
    background: var(--z-surface) !important;
    border: 1px solid var(--z-line) !important;
    border-radius: var(--z-radius-sm) !important;
    color: var(--z-ink-2) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dt-buttons .dt-button:hover {
    background: var(--z-control) !important;
    border-color: var(--z-line) !important;
    color: var(--z-ink) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--z-accent) !important;
    border-color: var(--z-accent) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--z-shell) !important;
    border: 1px solid var(--z-line) !important;
    border-radius: var(--z-radius-sm);
    color: var(--z-ink) !important;
}

/* ——— Светлые заливки Bootstrap ——— */

.bg-white,
.bg-light,
.bg-gray-light,
.card.bg-light,
.info-box.bg-light,
.callout {
    background: var(--z-surface) !important;
    color: var(--z-ink-2) !important;
}

.text-dark,
.text-black {
    color: var(--z-ink) !important;
}

/* Цветные шапки карточек глушим: на тёмном фоне сплошная заливка синим
   перетягивает внимание с содержимого на рамку. */
.card-header.bg-primary,
.card-primary:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header,
.card-success:not(.card-outline) > .card-header,
.card-warning:not(.card-outline) > .card-header,
.card-danger:not(.card-outline) > .card-header {
    background: rgba(168, 85, 216, 0.14) !important;
    border-bottom: 1px solid var(--z-line);
    color: var(--z-ink) !important;
}

.card-primary.card-outline {
    border-top: 3px solid var(--z-accent);
}

/* ——— Кнопки, оставшиеся светлыми ——— */

.btn-light,
.btn-outline-light,
.btn-outline-secondary,
.btn-outline-dark {
    background: var(--z-surface);
    border-color: var(--z-line);
    color: var(--z-ink-2);
}

.btn-light:hover,
.btn-outline-light:hover,
.btn-outline-secondary:hover,
.btn-outline-dark:hover {
    background: var(--z-control);
    border-color: var(--z-line);
    color: var(--z-ink);
}

.badge-light {
    background: var(--z-control);
    color: var(--z-ink-2);
}

/* ——— Полосы прогресса и служебные блоки ——— */

.progress {
    background: var(--z-control);
}

.info-box {
    background: var(--z-surface) !important;
}

.info-box-text,
.info-box-number {
    color: var(--z-ink-2) !important;
}

pre,
code,
kbd {
    background: var(--z-shell);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius-sm);
    color: var(--z-ink-2);
}

.alert-info {
    background: rgba(168, 85, 216, 0.12);
    color: var(--z-ink-2);
}

.alert-danger {
    background: rgba(242, 132, 158, 0.12);
    color: var(--z-down);
}

.alert-success {
    background: rgba(110, 231, 168, 0.12);
    color: var(--z-up);
}

/* ——— Выпадающие списки select2 ——— */

.select2-container--bootstrap4 .select2-dropdown,
.select2-container--default .select2-dropdown {
    background: var(--z-surface);
    border-color: var(--z-line);
    color: var(--z-ink-2);
}

.select2-container--bootstrap4 .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--highlighted {
    background: rgba(168, 85, 216, 0.18) !important;
    color: var(--z-ink) !important;
}

.select2-container--bootstrap4 .select2-selection__rendered {
    color: var(--z-ink) !important;
}

/* ============================================================
   Третий заход: остатки белого и лиловый текст в таблицах.
   ============================================================ */

/* ——— Выключенные кнопки навигации ———
   Bootstrap красит их отдельным правилом с большей специфичностью, поэтому
   «Предыдущая» на первой странице и «…» оставались белыми. */

.page-item.disabled .page-link,
.page-link:disabled {
    background: var(--z-surface);
    border-color: var(--z-line);
    color: var(--z-ink-5);
}

.page-link:hover {
    background: var(--z-control);
    border-color: var(--z-line);
    color: var(--z-ink);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: var(--z-surface) !important;
    color: var(--z-ink-5) !important;
}

/* ——— Пояснительные блоки ———
   AdminLTE задаёт .callout сплошной белый фон; на тёмном экране это яркий
   прямоугольник посреди страницы. Оставляем цветную полосу слева — она и
   несёт смысл, — а фон делаем своим. */

.callout,
.callout-info,
.callout-warning,
.callout-danger,
.callout-success {
    background: var(--z-surface) !important;
    box-shadow: none !important;
    color: var(--z-ink-2) !important;
}

.callout a,
.callout a:hover {
    color: var(--z-accent-light) !important;
}

.callout-info {
    border-left-color: var(--z-accent) !important;
}

.callout-warning {
    border-left-color: #d9a441 !important;
}

.callout-danger {
    border-left-color: var(--z-down) !important;
}

.callout-success {
    border-left-color: var(--z-up) !important;
}

/* ——— Текст в таблицах и карточках ———
   Строки таблиц почти сплошь ссылки: при акцентном цвете ссылок весь список
   становился лиловым и читался как одна сплошная подсветка. Внутри данных
   ссылка выглядит как обычный текст, а акцент оставляем наведению — так
   видно, что кликабельно, и не рябит. */

.table a,
.table td,
.table th,
table.dataTable a,
table.dataTable td,
table.dataTable th,
td a,
th a,
.card-body a:not(.btn):not(.nav-link),
.callout .text-primary {
    color: var(--z-ink) !important;
}

.table a:hover,
table.dataTable a:hover,
td a:hover,
.card-body a:not(.btn):not(.nav-link):hover {
    color: var(--z-accent-light) !important;
}

/* Заголовки колонок остаются приглушёнными: они подпись, а не данные. */
.table thead th,
table.dataTable thead th,
table.dataTable tfoot th {
    color: var(--z-ink-3) !important;
}

/* Цветные статусы в ячейках — исключение: цвет там и есть смысл. */
.table .text-success,
.table .badge-success,
table.dataTable .text-success {
    color: var(--z-up) !important;
}

.table .text-danger,
.table .badge-danger,
table.dataTable .text-danger {
    color: var(--z-down) !important;
}

.table .text-muted,
table.dataTable .text-muted {
    color: var(--z-ink-5) !important;
}

/* Ссылки-кнопки внутри таблиц (правка, удаление) остаются белыми на заливке. */
.table a.btn,
table.dataTable a.btn {
    color: #fff;
}

/* Служебные цвета Bootstrap на тёмном читаются плохо. */
.text-primary,
.text-info {
    color: var(--z-ink-2) !important;
}

/* ——— Селекты select2 во всех вариантах ———
   Первое правило накрывало только тему bootstrap4 и одиночный выбор.
   Поля множественного выбора («Одну или несколько записей») рисуются другим
   классом и оставались белыми. Перечисляем обе темы и оба вида. */

.select2-container .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--bootstrap4 .select2-selection--single,
.select2-container--bootstrap4 .select2-selection--multiple,
.select2-container--default .select2-search--inline .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--z-shell) !important;
    border: 1px solid var(--z-line) !important;
    border-radius: var(--z-radius-sm) !important;
    color: var(--z-ink) !important;
}

.select2-container--default .select2-selection__placeholder,
.select2-container--bootstrap4 .select2-selection__placeholder {
    color: var(--z-ink-5) !important;
}

.select2-container--default .select2-selection__rendered,
.select2-container--default .select2-selection__arrow b {
    color: var(--z-ink) !important;
}

/* Выбранные значения-плашки в поле множественного выбора. */
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    background: rgba(168, 85, 216, 0.18) !important;
    border: 1px solid var(--z-line) !important;
    color: var(--z-ink) !important;
}

/* ——— Двойные списки и прочие поля, оставшиеся светлыми ——— */

.bootstrap-duallistbox-container select,
.bootstrap-duallistbox-container .btn-group .btn,
select.form-control,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="datetime-local"] {
    background: var(--z-shell);
    border: 1px solid var(--z-line);
    color: var(--z-ink);
}

input::placeholder,
textarea::placeholder {
    color: var(--z-ink-5);
}

/* ============================================================
   Четвёртый заход: остальные поверхности Bootstrap с белым фоном.
   ============================================================

   Хватит ловить по одной. Ниже перечислены все компоненты, которым
   Bootstrap и AdminLTE задают background-color:#fff по умолчанию, —
   включая те экраны, которых я не видел.
   ============================================================ */

.list-group,
.list-group-item,
.list-group-item-action,
blockquote,
.blockquote,
.timeline > div > .timeline-item,
.direct-chat-text,
.popover,
.toast,
.toast-header,
.custom-file-label,
.custom-file-label::after,
.jumbotron,
.breadcrumb,
.nav-tabs .nav-link.active,
.tab-content,
.accordion > .card,
.dropdown-divider + *,
.datepicker,
.daterangepicker,
.ui-widget-content,
.ui-datepicker,
.note-editor,
.note-editable,
.CodeMirror {
    background-color: var(--z-surface) !important;
    border-color: var(--z-line) !important;
    color: var(--z-ink-2) !important;
}

/* Цитата: полосу слева оставляем, она отделяет пояснение от списка. */
blockquote,
.blockquote {
    border-left: 4px solid var(--z-accent) !important;
    border-radius: var(--z-radius-sm);
    padding: 12px 16px;
}

.list-group-item.active {
    background-color: rgba(168, 85, 216, 0.18) !important;
    border-color: var(--z-line) !important;
    color: var(--z-ink) !important;
}

.nav-tabs {
    border-bottom-color: var(--z-line);
}

.nav-tabs .nav-link {
    color: var(--z-ink-3);
}

.nav-tabs .nav-link.active {
    border-color: var(--z-line) var(--z-line) transparent !important;
    color: var(--z-ink) !important;
}

/* Модальные окна и всплывающие подсказки. */
.modal-body,
.modal-content {
    background-color: var(--z-surface) !important;
    color: var(--z-ink-2) !important;
}

.tooltip-inner {
    background: var(--z-control);
    color: var(--z-ink);
}

/* Отключённые поля Bootstrap подсвечивает светло-серым. */
.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
    background-color: var(--z-bar) !important;
    color: var(--z-ink-5) !important;
}