/* ---------------------------------------------------------------------- */
/*  modern-ui-dark.css — тёмная тема поверх modern-ui.css
/*
/*  Подключается в layout.jsp сразу после modern-ui.css. Все правила
/*  начинаются с html[data-theme="dark"], поэтому в светлой теме файл
/*  ничего не меняет. Атрибут ставит скрипт в <head> layout.jsp по
/*  значению localStorage['billing.theme'], переключает — js/theme.js.
/*
/*  Устройство:
/*    1. Переопределяем --mu-* переменные — это перекрашивает всё, что
/*       в modern-ui.css уже написано через var().
/*    2. Ниже — точечные правила для мест, где цвет задан литералом:
/*       в modern-ui.css, styles.css, теме lyt6-theme-2 и плагинах.
/*  Акцентный цвет (#00a5ec) и цвета статусов не меняются.
/*
/*  !important ставим только там, где его уже ставит перекрываемое правило.
/* ---------------------------------------------------------------------- */

html[data-theme="dark"] {
    color-scheme: dark;

    --mu-primary: #1fb2f2;
    --mu-primary-dark: #5cc8f7;
    --mu-primary-soft: rgba(31, 178, 242, .14);
    --mu-primary-ring: rgba(31, 178, 242, .32);

    --mu-sidebar: #111823;
    --mu-sidebar-hover: #19222f;
    --mu-sidebar-sub: #0c121b;
    --mu-sidebar-text: #9aa6b8;

    --mu-bg: #0d131c;
    --mu-surface: #161e2a;
    --mu-border: #253042;
    --mu-border-strong: #33415a;

    --mu-text: #d5dbe4;
    --mu-text-muted: #8a95a7;

    /* свои токены тёмной темы */
    --mu-heading: #eef2f7;
    --mu-surface-2: #1b2433; /* шапки панелей и таблиц, футеры */
    --mu-surface-3: #222d3e; /* hover, вложенные элементы */
    --mu-input: #111924; /* поля ввода — чуть глубже карточки */
    --mu-text-soft: #b3bcc9; /* подписи полей, второстепенный текст */

    --mu-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --mu-shadow-sm: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
    --mu-shadow-md: 0 6px 16px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .3);
    --mu-shadow-lg: 0 16px 40px rgba(0, 0, 0, .6), 0 4px 10px rgba(0, 0, 0, .35);
}

/* ====================================================================== */
/*  1. Каркас: фон, шапка, футер                                          */
/* ====================================================================== */

html[data-theme="dark"],
html[data-theme="dark"] body {
    background: var(--mu-bg);
    color: var(--mu-text);
}

/* в теме lyt6-theme-2 фон каркаса — #F0F3F4 !important */
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .app-content,
html[data-theme="dark"] #app > footer {
    background: var(--mu-bg) !important;
    background-color: var(--mu-bg) !important;
}

html[data-theme="dark"] #app > footer {
    color: var(--mu-text-muted);
    border-top: 1px solid var(--mu-border);
}

html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .h1, html[data-theme="dark"] .h2, html[data-theme="dark"] .h3,
html[data-theme="dark"] .h4, html[data-theme="dark"] .h5, html[data-theme="dark"] .h6,
html[data-theme="dark"] .mainTitle,
html[data-theme="dark"] h4.mainTitle {
    color: var(--mu-heading);
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .small {
    color: var(--mu-text-muted);
}

html[data-theme="dark"] .breadcrumb-wrapper {
    background: transparent;
}

html[data-theme="dark"] .breadcrumb > li + li:before {
    color: var(--mu-text-muted);
}

/* верхняя панель */
html[data-theme="dark"] .navbar.navbar-static-top {
    background: var(--mu-surface);
    box-shadow: 0 1px 0 var(--mu-border);
}

html[data-theme="dark"] .navbar .navbar-collapse {
    background: var(--mu-surface) !important;
}

/* блок с логотипом: фирменный синий в тёмной теме слепит — делаем
   его продолжением сайдбара, белый логотип читается и так */
html[data-theme="dark"] .navbar .navbar-header {
    background: var(--mu-sidebar) !important;
    border-right: 1px solid var(--mu-border) !important;
}

html[data-theme="dark"] .navbar .navbar-collapse .nav > li > a,
html[data-theme="dark"] .navbar .navbar-collapse .nav > li > a i,
html[data-theme="dark"] .navbar .navbar-collapse .nav > li > a .time {
    color: var(--mu-text-soft) !important;
}

html[data-theme="dark"] .navbar .navbar-collapse .nav > li > a:hover i {
    color: var(--mu-primary) !important;
}

/* часы в шапке подкрашены инлайном #00a5ec */
html[data-theme="dark"] #current-time {
    color: var(--mu-primary) !important;
}

html[data-theme="dark"] .navbar .navbar-left > li.sidebar-toggler-wrapper .btn,
html[data-theme="dark"] .navbar .navbar-left > li > a.toggle-fullscreen {
    color: var(--mu-text-soft);
    background: transparent;
}

html[data-theme="dark"] .navbar .navbar-left > li.sidebar-toggler-wrapper .btn:hover {
    color: var(--mu-primary);
    background: var(--mu-primary-soft) !important;
}

html[data-theme="dark"] .mu-theme-toggle {
    background: var(--mu-surface-2);
    border-color: var(--mu-border-strong);
    color: #f5c451;
}

html[data-theme="dark"] .mu-theme-toggle:hover {
    background: var(--mu-surface-3);
    border-color: var(--mu-border-strong);
    color: #ffd36b;
}

/* ====================================================================== */
/*  2. Сайдбар                                                            */
/* ====================================================================== */

html[data-theme="dark"] #sidebar {
    border-right: 1px solid var(--mu-border);
}

html[data-theme="dark"] #sidebar .nav-user-wrapper {
    background: var(--mu-sidebar) !important;
    border-bottom-color: var(--mu-border);
}

html[data-theme="dark"] #sidebar > div nav > ul > li.active > a,
html[data-theme="dark"] #sidebar > div nav > ul > li.active > a i {
    color: #ffffff !important;
}

html[data-theme="dark"] #sidebar > div nav .navbar-title {
    color: #5f6d82;
}

html[data-theme="dark"] ul.sub-menu > li > a {
    color: #8e9aad;
}

html[data-theme="dark"] #sidebar ::-webkit-scrollbar-thumb {
    background-color: #2a3647;
}

/* ====================================================================== */
/*  3. Панели, вкладки, well                                              */
/* ====================================================================== */

html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-white,
html[data-theme="dark"] .panel-default {
    background: var(--mu-surface);
    border-color: var(--mu-border);
    color: var(--mu-text);
}

html[data-theme="dark"] .panel-white .panel-white {
    background: var(--mu-surface-2);
}

html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .panel-white > .panel-heading,
html[data-theme="dark"] .panel-default > .panel-heading {
    background: transparent;
    color: var(--mu-heading);
    border-bottom-color: var(--mu-border);
}

html[data-theme="dark"] .panel-title {
    color: var(--mu-heading);
}

html[data-theme="dark"] .panel-footer,
html[data-theme="dark"] .panel-white > .panel-footer,
html[data-theme="dark"] .panel-default > .panel-footer {
    background: var(--mu-surface-2);
    border-top-color: var(--mu-border);
}

html[data-theme="dark"] .well {
    background: var(--mu-surface-2);
    border-color: var(--mu-border);
    color: var(--mu-text);
}

html[data-theme="dark"] .panel-tabs,
html[data-theme="dark"] .tabbable {
    background-color: transparent;
}

html[data-theme="dark"] .panel-tabs .panel-heading {
    background: var(--mu-surface-2);
}

html[data-theme="dark"] .tab-content {
    background-color: var(--mu-surface);
    color: var(--mu-text);
}

html[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--mu-border);
}

html[data-theme="dark"] .nav-tabs > li > a {
    color: var(--mu-text-soft);
    background: transparent;
}

html[data-theme="dark"] .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs > li.active > a:hover,
html[data-theme="dark"] .nav-tabs > li.active > a:focus,
html[data-theme="dark"] .nav-tabs > .active a {
    background: transparent;
    color: var(--mu-primary);
    box-shadow: none;
}

html[data-theme="dark"] .nav-pills > li > a {
    color: var(--mu-text-soft);
}

html[data-theme="dark"] .nav > li > a:hover,
html[data-theme="dark"] .nav > li > a:focus {
    background-color: var(--mu-surface-3);
}

html[data-theme="dark"] .list-group-item {
    background-color: var(--mu-surface);
    border-color: var(--mu-border);
    color: var(--mu-text);
}

html[data-theme="dark"] a.list-group-item:hover,
html[data-theme="dark"] a.list-group-item:focus {
    background-color: var(--mu-surface-3);
    color: var(--mu-heading);
}

html[data-theme="dark"] hr {
    border-top-color: var(--mu-border);
}

/* styles.css: fieldset { background: #ffffff }, а legend наследует фон
   (inherit) и висит на рамке — ей хватает смены фона у fieldset */
html[data-theme="dark"] fieldset {
    background: var(--mu-surface);
    border-color: var(--mu-border);
    color: var(--mu-text);
}

html[data-theme="dark"] legend {
    color: var(--mu-heading);
    border-color: var(--mu-border);
}

html[data-theme="dark"] fieldset legend {
    color: #8fb2cf;
}

/* утилиты фона и текста из styles.css (там все с !important) */
html[data-theme="dark"] .bg-white {
    background: var(--mu-surface) !important;
}

html[data-theme="dark"] .bg-light-grey {
    background: var(--mu-surface-2) !important;
}

html[data-theme="dark"] .text-dark {
    color: var(--mu-text) !important;
}

html[data-theme="dark"] .text-light {
    color: var(--mu-text-muted) !important;
}

html[data-theme="dark"] .text-primary {
    color: #8fb2cf !important;
}

html[data-theme="dark"] .border-right,
html[data-theme="dark"] .border-left,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .panel-white .border-light {
    border-color: var(--mu-border) !important;
}

/* ====================================================================== */
/*  4. Кнопки                                                             */
/* ====================================================================== */

html[data-theme="dark"] .btn-default {
    background-color: var(--mu-surface-2);
    border-color: var(--mu-border-strong);
    color: var(--mu-text);
}

html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-default:focus,
html[data-theme="dark"] .btn-default.active,
html[data-theme="dark"] .btn-default:active,
html[data-theme="dark"] .open > .dropdown-toggle.btn-default {
    background-color: var(--mu-surface-3) !important;
    border-color: #41506b !important;
    color: var(--mu-heading) !important;
}

/* фирменный серо-синий #58748B на тёмном фоне почти сливается.
   Контурные .btn-o не трогаем: у них фон прозрачный, им — свой блок ниже */
html[data-theme="dark"] .btn-primary:not(.btn-o) {
    background-color: #4d6a82;
    border-color: #4d6a82;
    color: #ffffff;
}

html[data-theme="dark"] .btn-primary:not(.btn-o):hover,
html[data-theme="dark"] .btn-primary:not(.btn-o):focus {
    background-color: #5b7a94 !important;
    border-color: #5b7a94 !important;
}

/* контурные кнопки: прозрачный фон, светлее контур и подпись */
html[data-theme="dark"] .btn-o {
    background-color: transparent;
}

html[data-theme="dark"] .btn-o.btn-primary {
    border-color: #5b7a94;
    color: #a9c3da;
}

html[data-theme="dark"] .btn-o.btn-primary:hover,
html[data-theme="dark"] .btn-o.btn-primary:focus,
html[data-theme="dark"] .open > .btn-o.btn-primary.dropdown-toggle {
    background-color: rgba(122, 156, 186, .16) !important;
    border-color: #7a9cba !important;
    color: #d3e2ef !important;
}

html[data-theme="dark"] .btn-o.btn-default {
    background-color: transparent;
}

html[data-theme="dark"] .btn-o:hover {
    background-color: rgba(255, 255, 255, .05);
}

html[data-theme="dark"] .btn-transparent {
    color: var(--mu-text-soft);
}

html[data-theme="dark"] .btn-transparent:hover {
    color: var(--mu-primary);
}

html[data-theme="dark"] .close {
    color: var(--mu-text);
    text-shadow: none;
    opacity: .6;
}

html[data-theme="dark"] .close:hover {
    color: #ffffff;
    opacity: .9;
}

/* ====================================================================== */
/*  5. Формы                                                              */
/* ====================================================================== */

html[data-theme="dark"] label,
html[data-theme="dark"] .control-label {
    color: var(--mu-text-soft);
}

/* styles.css красит ВСЕ текстовые поля, select и textarea в белый фон и
   #5b5b60 с !important (и подсвечивает фокус #F8F8F8) — перебиваем так же.
   Список типов повторяет styles.css; checkbox/radio/file сюда не входят. */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="datetime"],
html[data-theme="dark"] input[type="daterange"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="month"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="week"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"] {
    background-color: var(--mu-input) !important;
    border-color: var(--mu-border-strong);
    color: var(--mu-text) !important;
}

html[data-theme="dark"] .form-control:hover,
html[data-theme="dark"] textarea:hover,
html[data-theme="dark"] select:hover,
html[data-theme="dark"] input[type="text"]:hover,
html[data-theme="dark"] input[type="password"]:hover,
html[data-theme="dark"] input[type="number"]:hover,
html[data-theme="dark"] input[type="email"]:hover,
html[data-theme="dark"] input[type="search"]:hover,
html[data-theme="dark"] input[type="tel"]:hover {
    border-color: #45556f !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] input[type="text"]:focus,
html[data-theme="dark"] input[type="password"]:focus,
html[data-theme="dark"] input[type="number"]:focus,
html[data-theme="dark"] input[type="email"]:focus,
html[data-theme="dark"] input[type="search"]:focus,
html[data-theme="dark"] input[type="tel"]:focus,
html[data-theme="dark"] input[type="date"]:focus,
html[data-theme="dark"] input[type="time"]:focus {
    background-color: var(--mu-input) !important;
    border-color: var(--mu-primary) !important;
    color: var(--mu-heading) !important;
}

html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
    background-color: var(--mu-surface-2);
    color: var(--mu-text);
}

/* readonly здесь не трогаем: как и в светлой теме, оно выглядит обычным
   полем (даты с календарём, вычисляемые значения) */
html[data-theme="dark"] .form-control[disabled],
html[data-theme="dark"] fieldset[disabled] .form-control,
html[data-theme="dark"] input[disabled],
html[data-theme="dark"] select[disabled],
html[data-theme="dark"] textarea[disabled] {
    background-color: #19212d !important;
    border-color: var(--mu-border) !important;
    color: var(--mu-text-muted) !important;
}

html[data-theme="dark"] .form-control::-webkit-input-placeholder {
    color: #5f6b7d;
}

html[data-theme="dark"] .form-control::placeholder {
    color: #5f6b7d;
}

html[data-theme="dark"] .input-group-addon:not([class*="bg-"]) {
    background-color: var(--mu-surface-2);
    border-color: var(--mu-border-strong);
    color: var(--mu-text-soft);
}

html[data-theme="dark"] .help-block {
    color: var(--mu-text-muted);
}

html[data-theme="dark"] .has-error .help-block,
html[data-theme="dark"] .has-error .control-label,
html[data-theme="dark"] .error,
html[data-theme="dark"] label.error {
    color: #f07470;
}

/* чекбоксы / радио clip-check */
html[data-theme="dark"] .clip-check label,
html[data-theme="dark"] .clip-radio label,
html[data-theme="dark"] .checkbox label,
html[data-theme="dark"] .radio label {
    color: var(--mu-text);
}

html[data-theme="dark"] .clip-check label:before,
html[data-theme="dark"] .clip-radio label:before {
    background-color: var(--mu-input);
    border-color: var(--mu-border-strong);
}

html[data-theme="dark"] .clip-radio input[type="radio"]:checked + label:before {
    background-color: var(--mu-input);
}

/* select2 */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--mu-input);
    border-color: var(--mu-border-strong);
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--mu-text);
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #5f6b7d;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--mu-text-muted);
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--mu-surface-3);
    border-color: var(--mu-border-strong);
    color: var(--mu-text);
}

html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single,
html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: #19212d;
}

html[data-theme="dark"] .select2-dropdown {
    background-color: var(--mu-surface-2);
    border-color: var(--mu-border-strong);
    color: var(--mu-text);
}

html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field,
html[data-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field {
    background-color: var(--mu-input);
    border-color: var(--mu-border-strong);
    color: var(--mu-text);
}

html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--mu-primary-soft);
    color: var(--mu-primary-dark);
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #0a8fd0;
    color: #ffffff;
}

/* bootstrap-touchspin, bootstrap-show-password и прочие .btn в input-group */
html[data-theme="dark"] .input-group-btn > .btn-default {
    background-color: var(--mu-surface-2);
}

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

html[data-theme="dark"] .table {
    color: var(--mu-text);
    background-color: transparent;
}

html[data-theme="dark"] .table > thead > tr > th {
    background: var(--mu-surface-2);
    color: #95a1b3;
    border-bottom-color: var(--mu-border) !important;
}

html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tfoot > tr > td,
html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] .table > tfoot > tr > th {
    color: var(--mu-text);
    border-top-color: #212b3b !important;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, .018);
}

html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > thead > tr > th,
html[data-theme="dark"] .table-bordered > tbody > tr > td,
html[data-theme="dark"] .table-bordered > tfoot > tr > td {
    border-color: var(--mu-border) !important;
}

html[data-theme="dark"] .table > tbody > tr > td.alignright,
html[data-theme="dark"] .table > tbody > tr > td.text-right {
    color: var(--mu-heading);
}

/* контекстные строки bootstrap — приглушённые подложки вместо пастели */
html[data-theme="dark"] .table > tbody > tr.success > td,
html[data-theme="dark"] .table > tbody > tr > td.success,
html[data-theme="dark"] .table > tbody > tr.success {
    background-color: rgba(92, 184, 92, .12);
}

html[data-theme="dark"] .table > tbody > tr.danger > td,
html[data-theme="dark"] .table > tbody > tr > td.danger,
html[data-theme="dark"] .table > tbody > tr.danger {
    background-color: rgba(212, 63, 58, .14);
}

html[data-theme="dark"] .table > tbody > tr.warning > td,
html[data-theme="dark"] .table > tbody > tr > td.warning,
html[data-theme="dark"] .table > tbody > tr.warning {
    background-color: rgba(238, 162, 54, .13);
}

html[data-theme="dark"] .table > tbody > tr.info > td,
html[data-theme="dark"] .table > tbody > tr > td.info,
html[data-theme="dark"] .table > tbody > tr.info {
    background-color: rgba(70, 184, 218, .13);
}

html[data-theme="dark"] .table > tbody > tr.active > td,
html[data-theme="dark"] .table > tbody > tr > td.active {
    background-color: var(--mu-surface-3);
}

/* тестовые договоры подсвечены инлайном style="background: skyblue"
   (ajax-contracts-table.jsp, ajax-user-access-to-contracts-contracts-table.jsp).
   На тёмном фоне светлый текст по голубому не читается — приглушаем. */
html[data-theme="dark"] .table > tbody > tr[style*="skyblue"] {
    background: rgba(70, 184, 218, .16) !important;
}

html[data-theme="dark"] .table > tbody > tr[style*="skyblue"] > td {
    color: #cdeefa;
}

/* приостановленный объект: в customer-services-tab-header.jsp строка
   залита #F8BB86 — светлый текст на ней не читается */
html[data-theme="dark"] .table-striped > tbody > tr.suspended-object {
    background: rgba(241, 134, 54, .2);
}

html[data-theme="dark"] .table > tbody > tr.suspended-object > td {
    color: #ffd2ad;
}

/* закреплённые колонки (секция 13 modern-ui.css) */
html[data-theme="dark"] .table-responsive .table > thead > tr > th:last-child,
html[data-theme="dark"] #table-contracts > thead > tr > th:nth-last-child(2),
html[data-theme="dark"] #table-contracts > thead > tr > th:first-child {
    background-color: var(--mu-surface-2);
}

/* полоска строки полупрозрачная, поэтому у непрозрачной закреплённой
   ячейки её рисуем слоем поверх фона ячейки — так она совпадёт со строкой
   и в обычной панели, и во вложенной (фон там светлее) */
html[data-theme="dark"] .table-responsive .table-striped > tbody > tr:nth-of-type(odd) > td:last-child,
html[data-theme="dark"] #table-contracts.table-striped > tbody > tr:nth-of-type(odd) > td:nth-last-child(2),
html[data-theme="dark"] #table-contracts.table-striped > tbody > tr:nth-of-type(odd) > td:first-child {
    background-color: var(--mu-surface);
    background-image: linear-gradient(rgba(255, 255, 255, .018), rgba(255, 255, 255, .018));
}

/* во вложенной панели фон светлее — закреплённые ячейки под него */
html[data-theme="dark"] .panel-white .panel-white .table-responsive .table > tbody > tr > td:last-child,
html[data-theme="dark"] .panel-white .panel-white .table-responsive .table-striped > tbody > tr:nth-of-type(odd) > td:last-child {
    background-color: var(--mu-surface-2);
}

html[data-theme="dark"] .table-responsive .table-hover > tbody > tr:hover > td:last-child,
html[data-theme="dark"] #table-contracts.table-hover > tbody > tr:hover > td:nth-last-child(2),
html[data-theme="dark"] #table-contracts.table-hover > tbody > tr:hover > td:first-child {
    background-color: #17303f !important;
}

/* DataTables */
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--mu-input);
    border-color: var(--mu-border-strong);
    color: var(--mu-text);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--mu-text) !important;
}

html[data-theme="dark"] table.dataTable thead .sorting,
html[data-theme="dark"] table.dataTable thead .sorting_asc,
html[data-theme="dark"] table.dataTable thead .sorting_desc {
    background-color: var(--mu-surface-2);
}

html[data-theme="dark"] table.dataTable tbody tr {
    background-color: transparent;
}

/* ====================================================================== */
/*  7. Бейджи, алерты, прогресс                                           */
/* ====================================================================== */

html[data-theme="dark"] .label-default {
    background-color: #2a3546;
    color: #c2cad6;
}

html[data-theme="dark"] .label-primary {
    background-color: rgba(122, 156, 186, .2);
    color: #a9c3da;
}

html[data-theme="dark"] .label-success {
    background-color: rgba(92, 184, 92, .18);
    color: #7fd27f;
}

html[data-theme="dark"] .label-danger {
    background-color: rgba(230, 82, 77, .2);
    color: #ff8a85;
}

html[data-theme="dark"] .label-warning {
    background-color: rgba(238, 162, 54, .2);
    color: #f3be6b;
}

html[data-theme="dark"] .label-info {
    background-color: rgba(70, 184, 218, .2);
    color: #7fd0ea;
}

/* фон задан в разметке (статус «Начальный» в control-select-static.tag) —
   он остаётся насыщенным, поэтому текст белый, как в светлой теме */
html[data-theme="dark"] .label[style*="background"] {
    color: #fff;
}

html[data-theme="dark"] .alert-success {
    background-color: rgba(92, 184, 92, .12);
    border-color: rgba(92, 184, 92, .32);
    color: #8fd88f;
}

html[data-theme="dark"] .alert-danger,
html[data-theme="dark"] .alert-error {
    background-color: rgba(230, 82, 77, .12);
    border-color: rgba(230, 82, 77, .34);
    color: #ff9893;
}

html[data-theme="dark"] .alert-warning {
    background-color: rgba(238, 162, 54, .12);
    border-color: rgba(238, 162, 54, .34);
    color: #f3c27a;
}

html[data-theme="dark"] .alert-info {
    background-color: rgba(31, 178, 242, .11);
    border-color: rgba(31, 178, 242, .32);
    color: #7fd0f5;
}

html[data-theme="dark"] .alert .alert-link {
    color: inherit;
}

html[data-theme="dark"] .progress {
    background-color: var(--mu-surface-3);
}

/* только нейтральный бейдж: цветные (badge-danger, bg-*) несут смысл */
html[data-theme="dark"] .badge:not([class*="badge-"]):not([class*="bg-"]) {
    background-color: #4d6a82;
    color: #ffffff;
}

html[data-theme="dark"] code {
    background: var(--mu-surface-3);
    color: #ff9893;
}

html[data-theme="dark"] pre {
    background: var(--mu-input);
    border-color: var(--mu-border);
    color: var(--mu-text);
}

/* ====================================================================== */
/*  8. Выпадающие меню, модалки, пагинация, подсказки                     */
/* ====================================================================== */

html[data-theme="dark"] .dropdown-menu {
    background-color: var(--mu-surface-2);
    border-color: var(--mu-border-strong);
    color: var(--mu-text);
}

html[data-theme="dark"] .dropdown-menu > li > a {
    color: var(--mu-text);
}

html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus {
    background-color: var(--mu-primary-soft);
    color: var(--mu-primary-dark);
}

html[data-theme="dark"] .dropdown-menu > .disabled > a,
html[data-theme="dark"] .dropdown-menu > .disabled > a:hover {
    color: #5f6b7d;
}

html[data-theme="dark"] .dropdown-menu .divider {
    background-color: var(--mu-border);
}

html[data-theme="dark"] .dropdown-header {
    color: var(--mu-text-muted);
}

/* меню-шестерёнки (.dropdown-light): белый хвостик-стрелка и разделители */
html[data-theme="dark"] .dropdown-menu.dropdown-light li a,
html[data-theme="dark"] .dropdown-menu.dropdown-light-top li a {
    border-bottom-color: var(--mu-border);
}

html[data-theme="dark"] .dropdown-menu.dropdown-light:after,
html[data-theme="dark"] .dropdown-menu.dropdown-light-top:after {
    border-bottom-color: var(--mu-surface-2);
}

html[data-theme="dark"] .dropdown-menu.dropdown-light:before,
html[data-theme="dark"] .dropdown-menu.dropdown-light-top:before {
    border-bottom-color: var(--mu-border-strong);
}

html[data-theme="dark"] .modal-content {
    background-color: var(--mu-surface);
    color: var(--mu-text);
    border: 1px solid var(--mu-border);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--mu-border);
}

html[data-theme="dark"] .modal-header .modal-title {
    color: var(--mu-heading);
}

html[data-theme="dark"] .modal-footer {
    background: var(--mu-surface-2);
}

html[data-theme="dark"] .modal-backdrop.in {
    opacity: .65;
}

html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span {
    background-color: var(--mu-surface);
    border-color: var(--mu-border);
    color: var(--mu-text);
}

html[data-theme="dark"] .pagination > li > a:hover,
html[data-theme="dark"] .pagination > li > span:hover {
    background-color: var(--mu-primary-soft);
    border-color: var(--mu-primary);
    color: var(--mu-primary-dark);
}

html[data-theme="dark"] .pagination > .active > a,
html[data-theme="dark"] .pagination > .active > span,
html[data-theme="dark"] .pagination > .active > a:hover,
html[data-theme="dark"] .pagination > .active > span:hover {
    background-color: #0a8fd0;
    border-color: #0a8fd0;
    color: #ffffff;
}

html[data-theme="dark"] .pagination > .disabled > a,
html[data-theme="dark"] .pagination > .disabled > span {
    background-color: var(--mu-surface);
    border-color: var(--mu-border);
    color: #5f6b7d;
}

html[data-theme="dark"] .tooltip-inner {
    background-color: #2b3749;
    color: #eef2f7;
}

html[data-theme="dark"] .tooltip.top .tooltip-arrow {
    border-top-color: #2b3749;
}

html[data-theme="dark"] .tooltip.bottom .tooltip-arrow {
    border-bottom-color: #2b3749;
}

html[data-theme="dark"] .tooltip.left .tooltip-arrow {
    border-left-color: #2b3749;
}

html[data-theme="dark"] .tooltip.right .tooltip-arrow {
    border-right-color: #2b3749;
}

html[data-theme="dark"] .popover {
    background-color: var(--mu-surface-2);
    border-color: var(--mu-border-strong);
    color: var(--mu-text);
}

html[data-theme="dark"] .popover-title {
    background-color: var(--mu-surface-3);
    border-bottom-color: var(--mu-border);
    color: var(--mu-heading);
}

html[data-theme="dark"] .popover.top > .arrow:after {
    border-top-color: var(--mu-surface-2);
}

html[data-theme="dark"] .popover.bottom > .arrow:after {
    border-bottom-color: var(--mu-surface-3);
}

html[data-theme="dark"] .popover.left > .arrow:after {
    border-left-color: var(--mu-surface-2);
}

html[data-theme="dark"] .popover.right > .arrow:after {
    border-right-color: var(--mu-surface-2);
}

/* ====================================================================== */
/*  9. Календари                                                          */
/* ====================================================================== */

/* div.datepicker — у полей ввода тоже бывает класс .datepicker */
html[data-theme="dark"] div.datepicker,
html[data-theme="dark"] .datepicker-dropdown,
html[data-theme="dark"] .bootstrap-datetimepicker-widget.dropdown-menu {
    background-color: var(--mu-surface-2);
    border-color: var(--mu-border-strong);
    color: var(--mu-text);
}

html[data-theme="dark"] .datepicker-dropdown:after,
html[data-theme="dark"] .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
    border-bottom-color: var(--mu-surface-2);
}

html[data-theme="dark"] .datepicker-dropdown.datepicker-orient-top:after,
html[data-theme="dark"] .bootstrap-datetimepicker-widget.dropdown-menu.top:after {
    border-top-color: var(--mu-surface-2);
}

html[data-theme="dark"] .datepicker table tr td,
html[data-theme="dark"] .datepicker table tr th,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table th {
    color: var(--mu-text);
}

html[data-theme="dark"] .datepicker table tr td.old,
html[data-theme="dark"] .datepicker table tr td.new,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.old,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.new {
    color: #5f6b7d;
}

html[data-theme="dark"] .datepicker table tr td.day:hover,
html[data-theme="dark"] .datepicker table tr td.focused,
html[data-theme="dark"] .datepicker table tr td span:hover,
html[data-theme="dark"] .datepicker table tr td span.focused,
html[data-theme="dark"] .datepicker .datepicker-switch:hover,
html[data-theme="dark"] .datepicker .prev:hover,
html[data-theme="dark"] .datepicker .next:hover,
html[data-theme="dark"] .datepicker tfoot tr th:hover,
html[data-theme="dark"] .bootstrap-datetimepicker-widget td.day:hover,
html[data-theme="dark"] .bootstrap-datetimepicker-widget td.hour:hover,
html[data-theme="dark"] .bootstrap-datetimepicker-widget td.minute:hover,
html[data-theme="dark"] .bootstrap-datetimepicker-widget td span:hover,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background: var(--mu-surface-3);
    color: var(--mu-heading);
}

html[data-theme="dark"] .datepicker table tr td.disabled,
html[data-theme="dark"] .datepicker table tr td.disabled:hover,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.disabled {
    color: #4a5466;
    background: transparent;
}

html[data-theme="dark"] .datepicker table tr td.range,
html[data-theme="dark"] .datepicker table tr td.range:hover {
    background: var(--mu-primary-soft);
    color: var(--mu-heading);
}

/* ====================================================================== */
/*  10. Плагины: blockUI, bootbox, sweetalert, switchery, ladda            */
/* ====================================================================== */

html[data-theme="dark"] .blockUI.blockOverlay {
    background: rgba(0, 0, 0, .55) !important;
}

html[data-theme="dark"] .blockUI.blockMsg {
    background: var(--mu-surface-2) !important;
    color: var(--mu-heading) !important;
}

html[data-theme="dark"] .bootbox .modal-body,
html[data-theme="dark"] .bootbox .bootbox-body {
    color: var(--mu-text);
}

html[data-theme="dark"] .sweet-alert {
    background-color: var(--mu-surface);
    color: var(--mu-text);
}

html[data-theme="dark"] .sweet-alert h2 {
    color: var(--mu-heading);
}

html[data-theme="dark"] .sweet-alert p {
    color: var(--mu-text-soft);
}

html[data-theme="dark"] .switchery {
    background-color: var(--mu-surface-3) !important;
    border-color: var(--mu-border-strong) !important;
}

/* рамка фото и пустое превью загрузки (Bootstrap .thumbnail, профиль пользователя) */
html[data-theme="dark"] .thumbnail {
    background-color: var(--mu-surface-2);
    border-color: var(--mu-border);
}

/* ====================================================================== */
/*  10a. Партнёрские заявки: шкала прогресса, блок оплаты, операции        */
/*  (styles.css, раздел T-25a; доска сотрудника и экран партнёра)          */
/* ====================================================================== */

html[data-theme="dark"] {
    --order-stepper-done: #34b553;
    --order-stepper-current: #3d9be9;
    --order-stepper-future: #3a465a;
    --order-stepper-future-label: #7d899b;
}

html[data-theme="dark"] .order-stepper__dot {
    background: var(--mu-surface);
}

html[data-theme="dark"] .order-stepper__step.is-done .order-stepper__label {
    color: var(--mu-text-soft);
}

html[data-theme="dark"] .order-detail__whatToDo-label,
html[data-theme="dark"] .order-payment__hint,
html[data-theme="dark"] .order-detail__attributes dt {
    color: var(--mu-text-muted);
}

html[data-theme="dark"] .order-detail__whatToDo-waiting {
    color: #e0b232;
}

html[data-theme="dark"] .order-payment,
html[data-theme="dark"] .order-detail__operation-form {
    background: var(--mu-surface-2);
    border-color: var(--mu-border);
}

html[data-theme="dark"] .order-payment__title {
    color: var(--mu-heading);
}

html[data-theme="dark"] .order-payment__invoice {
    color: var(--mu-text-soft);
}

html[data-theme="dark"] .order-payment__unavailable {
    color: #ff8a85;
}

html[data-theme="dark"] .order-detail__refund {
    background: rgba(238, 162, 54, .1);
    border-color: rgba(238, 162, 54, .3);
}

html[data-theme="dark"] #partner-order-detail .table-responsive thead th,
html[data-theme="dark"] #partner-order-detail .table-responsive thead th:last-child {
    background: var(--mu-surface-2);
}

/* ====================================================================== */
/*  10b. Экран входа (layout-login.jsp: вход, PIN/OTP, восстановление)     */
/*  Карточки, поля и кнопки перекрашиваются общими правилами выше —        */
/*  здесь только фон-подсветка, как у светлого body.login в modern-ui.css. */
/*  Логотип меняет theme.js по атрибуту data-src-dark у <img>.            */
/* ====================================================================== */

html[data-theme="dark"] body.login {
    background: radial-gradient(1200px 600px at 50% -10%, #1a2534 0%, var(--mu-bg) 60%);
}

html[data-theme="dark"] body.login .box-login {
    border-color: var(--mu-border);
}

/* password-done.jsp задаёт свою пастельную .alert-success */
html[data-theme="dark"] body.login .alert-success {
    background-color: rgba(92, 184, 92, .12);
    border-color: rgba(92, 184, 92, .32);
    color: #8fd88f;
}

/* ====================================================================== */
/*  11. Скроллбары, выделение                                             */
/* ====================================================================== */

html[data-theme="dark"] * {
    scrollbar-color: #354257 transparent;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: #354257;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: #46556d;
}

html[data-theme="dark"] ::selection {
    background: rgba(31, 178, 242, .35);
    color: #ffffff;
}

html[data-theme="dark"] ::-moz-selection {
    background: rgba(31, 178, 242, .35);
    color: #ffffff;
}

/* картинки-логотипы на тёмном фоне не трогаем; иконки-картинки в таблицах
   (png с прозрачностью) обычно тёмные — им чуть поднимаем яркость */
html[data-theme="dark"] .table img:not(.img-circle):not([src*="logo"]) {
    filter: brightness(1.15);
}

/* печать всегда светлая */
@media print {
    html[data-theme="dark"],
    html[data-theme="dark"] body,
    html[data-theme="dark"] .main-content,
    html[data-theme="dark"] .panel,
    html[data-theme="dark"] .panel-white {
        background: #ffffff !important;
        color: #000000 !important;
    }
}