/* ---------------------------------------------------------------------- */
/*  modern-ui.css — «современный скин» поверх старой темы (lyt6-theme-2)
/*
/*  Подключается ПОСЛЕДНИМ в layout.jsp и layout-login.jsp.
/*  Разметку JSP не трогает: перекрывает только внешний вид тех классов,
/*  которые уже используются (panel-white, btn, form-control, table, label-*).
/*
/*  Палитра сохранена 1:1 со старой темой — меняются только форма,
/*  плотность, тени, типографика и состояния (hover/focus).
/*  Чтобы полностью отключить скин — убрать одну строку <link> в layout.
/* ---------------------------------------------------------------------- */

/* ---------------------------------------------------------------------- */
/*  Inter — self-hosted (без CDN: продакшен может быть в закрытой сети).
/*  Вариативный woff2: один файл покрывает 400–700, поэтому файлов всего 4.
/*  Кириллица — 18 КБ, включая № (U+2116).
/*  Обновление: скачать подмножества с fonts.googleapis.com/css2?family=Inter
/* ---------------------------------------------------------------------- */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter/inter-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter/inter-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* --- фирменные цвета: те же, что в themes/lyt6-theme-2.css --- */
    --mu-primary: #00a5ec;
    --mu-primary-dark: #008ac7;
    --mu-primary-soft: rgba(0, 165, 236, .10);
    --mu-primary-ring: rgba(0, 165, 236, .22);

    --mu-btn-primary: #58748B;
    --mu-success: #5cb85c;
    --mu-danger: #d43f3a;
    --mu-warning: #eea236;
    --mu-info: #46b8da;
    --mu-orange: #F18636;

    /* --- сайдбар: цвета старой темы --- */
    --mu-sidebar: #1F2B3D;
    --mu-sidebar-hover: #17212F;
    --mu-sidebar-sub: #121a25;
    --mu-sidebar-text: #a7b1c2;

    /* --- поверхности --- */
    --mu-bg: #F0F3F4;
    --mu-surface: #ffffff;
    --mu-border: #e5e9ee;
    --mu-border-strong: #d6dce3;

    /* --- текст. Вернуть «как было» — поставить #8e8e93 --- */
    --mu-text: #3d4450;
    --mu-text-muted: #8a9099;

    /* --- форма и тени --- */
    --mu-radius: 10px;
    --mu-radius-sm: 8px;
    --mu-radius-xs: 6px;
    --mu-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --mu-shadow-sm: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
    --mu-shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04);
    --mu-shadow-lg: 0 12px 32px rgba(16, 24, 40, .14), 0 4px 8px rgba(16, 24, 40, .06);

    /* Inter — отличная кириллица и разборчивость в мелком кегле.
       Откатиться на старый шрифт: Helvetica, Arial, sans-serif */
    --mu-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
    --mu-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ====================================================================== */
/*  1. Типографика и базовый фон                                          */
/* ====================================================================== */

body {
    font-family: var(--mu-font);
}

/* форм-элементы не наследуют шрифт по умолчанию — включаем явно.
   Только селекторы по тегу: класс .fa на <button>/<a> обязан выигрывать. */
input, select, textarea, button {
    font-family: inherit;
}

/* Страховка: иконочные шрифты возвращаем принудительно. В этом проекте
   .fa нередко стоит на самой кнопке (<a class="btn ... fa fa-times">),
   поэтому любое наше правило на .btn ломало бы глифы. */
.fa {
    font-family: FontAwesome;
}

[class^="ti-"], [class*=" ti-"] {
    font-family: 'themify';
}

.glyphicon {
    font-family: 'Glyphicons Halflings';
}

body {
    font-size: 13px;
    line-height: 1.5;
    color: var(--mu-text);
    background: var(--mu-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.main-content {
    background: var(--mu-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--mu-font);
    color: #1f2733;
    font-weight: 600;
    letter-spacing: -.01em;
}

h4.mainTitle,
.mainTitle {
    font-size: 19px;
    font-weight: 600;
    color: #1f2733;
    letter-spacing: -.015em;
}

a {
    color: var(--mu-primary);
    transition: color .15s var(--mu-ease);
}

a:hover, a:focus {
    color: var(--mu-primary-dark);
    text-decoration: none;
}

.text-bold, .bold {
    font-weight: 600;
}

/* Заголовок страницы — не «панель с рамкой», а лёгкая шапка */
.breadcrumb-wrapper {
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    padding: 22px 30px 6px;
}

@media (max-width: 991px) {
    .breadcrumb-wrapper {
        padding: 16px 15px 4px;
    }
}

.breadcrumb-wrapper .breadcrumb {
    background: transparent;
    padding-left: 0;
    font-size: 12.5px;
    color: var(--mu-text-muted);
}

/* ====================================================================== */
/*  2. Поверхности: панели-карточки                                       */
/* ====================================================================== */

.panel-white,
.panel-default {
    background: var(--mu-surface);
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius);
    box-shadow: var(--mu-shadow-sm);
    color: var(--mu-text);
    transition: box-shadow .2s var(--mu-ease);
}

.panel-body {
    padding: 22px 24px;
}

@media (max-width: 767px) {
    .panel-body {
        padding: 16px;
    }
}

/* вложенная панель внутри панели — без второй тени и рамки */
.panel-white .panel-white {
    box-shadow: none;
    border-color: var(--mu-border);
    background: #fbfcfd;
}

.panel-white > .panel-heading,
.panel-default > .panel-heading {
    background: transparent;
    border-bottom: 1px solid var(--mu-border);
    border-radius: var(--mu-radius) var(--mu-radius) 0 0;
    padding: 16px 24px;
    font-weight: 600;
    color: #1f2733;
}

.panel-white > .panel-footer,
.panel-default > .panel-footer {
    background: #fafbfc;
    border-top: 1px solid var(--mu-border);
    border-radius: 0 0 var(--mu-radius) var(--mu-radius);
    padding: 14px 24px;
}

.container-fluid.container-fullw {
    background: transparent;
    padding-top: 12px;
}

.well {
    background: #fafbfc;
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius-sm);
    box-shadow: none;
}

hr {
    border-top-color: var(--mu-border);
}

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

.btn {
    border-radius: var(--mu-radius-sm);
    border-width: 1px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.5;
    box-shadow: var(--mu-shadow-xs) !important;
    transition: background-color .15s var(--mu-ease),
    border-color .15s var(--mu-ease),
    box-shadow .15s var(--mu-ease),
    transform .15s var(--mu-ease),
    color .15s var(--mu-ease) !important;
}

.btn.no-radius,
.no-radius .btn {
    border-radius: 0;
}

.btn:hover {
    box-shadow: var(--mu-shadow-sm) !important;
    transform: translateY(-1px);
}

.btn:active,
.btn.active {
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, .12) !important;
}

.btn:focus,
.btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--mu-primary-ring) !important;
}

.btn[disabled],
.btn.disabled,
fieldset[disabled] .btn {
    opacity: .55;
    box-shadow: none !important;
    transform: none;
    cursor: not-allowed;
}

.btn-xs {
    padding: 3px 10px;
    font-size: 11.5px;
    border-radius: var(--mu-radius-xs);
}

.btn-sm {
    padding: 5px 13px;
    font-size: 12.5px;
    border-radius: var(--mu-radius-xs);
}

.btn-lg {
    padding: 11px 24px;
    font-size: 15px;
    border-radius: var(--mu-radius);
}

.btn-wide {
    min-width: 120px;
}

/* фирменные цвета кнопок — прежние, меняется только подача */
.btn-default {
    background-color: var(--mu-surface);
    border-color: var(--mu-border-strong);
    color: #545b66;
}

.btn-default:hover,
.btn-default:focus {
    background-color: #f6f8fa !important;
    border-color: #c3ccd6 !important;
    color: #2b3440 !important;
}

.btn-primary {
    background-color: #58748B;
    border-color: #58748B;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #4a6377 !important;
    border-color: #4a6377 !important;
}

.btn-success {
    background-color: var(--mu-success);
    border-color: var(--mu-success);
}

.btn-success:hover,
.btn-success:focus {
    background-color: #4ca64c !important;
    border-color: #4ca64c !important;
}

.btn-danger {
    background-color: var(--mu-danger);
    border-color: var(--mu-danger);
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #bf3631 !important;
    border-color: #bf3631 !important;
}

.btn-warning {
    background-color: var(--mu-warning);
    border-color: var(--mu-warning);
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #dc9124 !important;
    border-color: #dc9124 !important;
}

.btn-info {
    background-color: var(--mu-info);
    border-color: var(--mu-info);
}

.btn-info:hover,
.btn-info:focus {
    background-color: #31a7ca !important;
    border-color: #31a7ca !important;
}

.btn-orange {
    background-color: var(--mu-orange);
    border-color: var(--mu-orange);
}

/* контурные кнопки (btn-o) — тоньше и спокойнее */
.btn-o {
    background: transparent;
    border-width: 1px;
    font-weight: 500;
}

.btn-o:hover {
    background-color: rgba(0, 0, 0, .03);
}

.btn-transparent,
.btn-transparent-white {
    box-shadow: none !important;
}

.btn-group > .btn {
    box-shadow: none !important;
    transform: none !important;
}

/* Селекторы дословно как в Bootstrap 3: guard :not(.dropdown-toggle) нужен,
   потому что одиночная кнопка-дропдаун — тоже :first-child:not(:last-child)
   (следом идёт <ul class="dropdown-menu">), и без guard ей срезает угол. */
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
}

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* иконка в кнопке — ровный отступ */
.btn > i.fa + span,
.btn > i.fa {
    vertical-align: baseline;
}

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

input.form-control,
select.form-control,
textarea.form-control {
    height: 36px;
    padding: 6px 12px !important;
    line-height: 1.5 !important;
    background-color: var(--mu-surface) !important;
    border: 1px solid var(--mu-border-strong);
    border-radius: var(--mu-radius-sm);
    box-shadow: none !important;
    transition: border-color .15s var(--mu-ease), box-shadow .15s var(--mu-ease);
}

/* кегль полей оставляем прежним (14px из styles.css) — не воюем с !important */

textarea.form-control {
    height: auto;
    min-height: 80px;
}

input.form-control:hover,
select.form-control:hover,
textarea.form-control:hover {
    border-color: #c3ccd6 !important;
}

input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: var(--mu-primary) !important;
    /* styles.css гасит тень через box-shadow:none !important — иначе кольца нет */
    box-shadow: 0 0 0 3px var(--mu-primary-ring) !important;
    /* и подсвечивает фокус серым #F8F8F8 — возвращаем белый */
    background-color: var(--mu-surface) !important;
    outline: none;
}

/* !important обязателен: и styles.css (#FFFFFF !important), и наше общее
   правило для полей красят фон принудительно — без этого отключённое поле
   выглядит как обычное, белое. В старом дизайне оно было #f7f7f8. */
.form-control[disabled],
fieldset[disabled] .form-control {
    background-color: #f4f6f8 !important;
    color: #8a9099 !important;
    cursor: not-allowed;
}

/* readonly — это НЕ disabled: поле фокусируется, текст выделяется и
   копируется, а у дат по клику открывается календарь. Bootstrap намеренно
   не ставит сюда not-allowed, и мы тоже — иначе курсор «запрещено»
   появляется над полем, которое на самом деле редактируется. */
.form-control[readonly] {
    cursor: auto;
}

/* поле даты только для чтения заполняется календарём — показываем это курсором */
input.form-control.datepicker[readonly],
input.form-control[readonly].datepicker {
    cursor: pointer;
}

.form-control::-webkit-input-placeholder {
    color: #aab1ba;
}

.form-control::placeholder {
    color: #aab1ba;
}

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

label,
.control-label {
    font-weight: 500;
    color: #4a515c;
    font-size: 13px;
    margin-bottom: 6px;
}

.form-horizontal .control-label {
    padding-top: 8px;
}

.required,
.form-group .required {
    color: var(--mu-danger);
}

/* группы полей */
/* Важно: :not([class*="bg-"]) — иначе серый цвет текста перебивает белый
   у .bg-primary (styles.css:5175) и надпись «с:/до:» тонет в синей плашке. */
.input-group-addon:not([class*="bg-"]) {
    background-color: #f6f8fa;
    border: 1px solid var(--mu-border-strong);
    border-radius: var(--mu-radius-sm);
    color: #6b727c;
}

.input-group-addon[class*="bg-"] {
    border: 1px solid transparent;
    border-radius: var(--mu-radius-sm);
    color: #ffffff;
    font-weight: 500;
}

/* bootstrap-datepicker3 вешает аддонам text-shadow: 0 1px 0 #fff — он рассчитан
   на светлую плашку, а на цветной размазывает белый текст («кривой шрифт»). */
.input-daterange .input-group-addon,
.input-group-addon[class*="bg-"] {
    text-shadow: none;
}

/* в .input-daterange аддоны стоят между полями с отрицательными полями —
   скругляем только внешние края группы, середину держим прямой */
.input-daterange .input-group-addon:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* сообщения валидации */
.has-error .form-control {
    border-color: var(--mu-danger);
}

.has-error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(212, 63, 58, .2);
}

.has-error .control-label,
.has-error .help-block,
.error,
label.error {
    color: var(--mu-danger);
    font-weight: 500;
}

.has-success .form-control {
    border-color: var(--mu-success);
}

/* чекбоксы / радио темы clip-check */
.checkbox, .radio {
    margin-top: 6px;
    margin-bottom: 6px;
}

.clip-check input[type="checkbox"] + label:before,
.clip-radio input[type="radio"] + label:before {
    border-radius: 5px;
    border-color: var(--mu-border-strong);
    transition: all .15s var(--mu-ease);
}

.clip-radio input[type="radio"] + label:before {
    border-radius: 50%;
}

.clip-check.check-primary input[type="checkbox"]:checked + label:before {
    background-color: var(--mu-primary);
    border-color: var(--mu-primary);
}

/* select2 — под общий стиль полей */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    height: 36px;
    /* select2.min.css ставит боксу padding-top:3px — обнуляем, иначе текст уезжает вниз */
    padding-top: 0;
    border: 1px solid var(--mu-border-strong);
    border-radius: var(--mu-radius-sm);
    transition: border-color .15s var(--mu-ease), box-shadow .15s var(--mu-ease);
}

/* 36px высоты − 2px рамок = 34px строки: текст ровно по центру */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px;
    color: #5b5b60;
    padding-left: 12px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
    top: 0;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--mu-primary);
    box-shadow: 0 0 0 3px var(--mu-primary-ring);
}

.select2-dropdown {
    border-color: var(--mu-border-strong);
    border-radius: var(--mu-radius-sm);
    box-shadow: var(--mu-shadow-md);
    overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--mu-primary);
}

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

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--mu-border-strong);
    border-radius: var(--mu-radius-xs);
    padding: 6px 10px;
}

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

.table {
    font-size: 13px;
}

.table > thead > tr > th {
    border-bottom: 1px solid var(--mu-border) !important;
    border-top: none;
    padding: 11px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #737b86;
    background: #fafbfc;
    /* без nowrap: у таблиц на 14 колонок длинные подписи заголовков
       («Начисления в текущем периоде») иначе растягивают таблицу вширь */
    vertical-align: middle;
}

.table > tbody > tr > td {
    padding: 11px 14px;
    border-top: 1px solid #eef1f4 !important;
    color: #3d4450;
    vertical-align: middle;
}

.table > tbody > tr:first-child > td {
    border-top: none !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fcfdfd;
}

.table-hover > tbody > tr {
    transition: background-color .12s var(--mu-ease);
}

.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > td {
    background-color: var(--mu-primary-soft) !important;
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border-color: var(--mu-border) !important;
}

/* сортировка заголовков (csstag:sorting) */
.table > thead > tr > th a {
    color: inherit;
}

.table > thead > tr > th a:hover {
    color: var(--mu-primary);
}

/* обёртка таблицы внутри панели — без лишних краёв */
.table-responsive {
    border: none;
    border-radius: var(--mu-radius-sm);
}

/* DataTables */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--mu-border-strong);
    border-radius: var(--mu-radius-sm);
    padding: 5px 10px;
    height: 32px;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--mu-primary);
    box-shadow: 0 0 0 3px var(--mu-primary-ring);
    outline: none;
}

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

/* ====================================================================== */
/*  6. Бейджи (label-*), алерты, badge                                    */
/* ====================================================================== */

.label {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.4;
}

.label-default {
    background-color: #eef1f4;
    color: #5c646e;
}

.label-primary {
    background-color: rgba(88, 116, 139, .12);
    color: #4a6377;
}

.label-success {
    background-color: rgba(92, 184, 92, .14);
    color: #3d8b3d;
}

.label-danger {
    background-color: rgba(212, 63, 58, .13);
    color: #b02f2a;
}

.label-warning {
    background-color: rgba(238, 162, 54, .16);
    color: #b4771a;
}

.label-info {
    background-color: rgba(70, 184, 218, .15);
    color: #2a8dab;
}

.badge {
    border-radius: 999px;
    font-weight: 600;
    padding: 3px 9px;
}

.alert {
    border: 1px solid transparent;
    border-radius: var(--mu-radius-sm);
    box-shadow: var(--mu-shadow-xs);
    padding: 13px 16px;
}

.alert-success {
    background-color: rgba(92, 184, 92, .10);
    border-color: rgba(92, 184, 92, .30);
    color: #3d8b3d;
}

.alert-danger, .alert-error {
    background-color: rgba(212, 63, 58, .09);
    border-color: rgba(212, 63, 58, .28);
    color: #b02f2a;
}

.alert-warning {
    background-color: rgba(238, 162, 54, .11);
    border-color: rgba(238, 162, 54, .32);
    color: #b4771a;
}

.alert-info {
    background-color: rgba(0, 165, 236, .09);
    border-color: rgba(0, 165, 236, .28);
    color: #0480b6;
}

.progress {
    height: 8px;
    border-radius: 999px;
    box-shadow: none;
    background-color: #eef1f4;
}

.progress-bar {
    border-radius: 999px;
    box-shadow: none;
}

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

#sidebar,
#sidebar .sidebar-container {
    background: var(--mu-sidebar) !important;
}

#sidebar > div nav > ul > li {
    border-bottom: none !important;
    margin: 1px 10px;
    border-radius: var(--mu-radius-sm);
    overflow: hidden;
    transition: background-color .15s var(--mu-ease);
}

#sidebar > div nav > ul > li > a {
    color: var(--mu-sidebar-text);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .005em;
    padding-top: 10px;
    padding-bottom: 10px;
    transition: color .15s var(--mu-ease);
}

#sidebar > div nav > ul > li > a i {
    transition: color .15s var(--mu-ease);
}

#sidebar > div nav > ul > li:hover,
#sidebar > div nav > ul > li.open {
    background: var(--mu-sidebar-hover) !important;
}

#sidebar > div nav > ul > li.active {
    background: rgba(0, 165, 236, .14) !important;
    position: relative;
}

#sidebar > div nav > ul > li.active > a,
#sidebar > div nav > ul > li.active > a i {
    color: #ffffff !important;
}

#sidebar > div nav > ul > li.active:before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--mu-primary);
}

#sidebar > div nav .navbar-title {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #6b7a90;
    padding-left: 24px;
}

ul.sub-menu {
    background: var(--mu-sidebar-sub) !important;
}

ul.sub-menu > li > a {
    font-size: 12.5px;
    color: #96a1b2;
    transition: color .15s var(--mu-ease), background-color .15s var(--mu-ease);
}

ul.sub-menu > li > a:hover,
ul.sub-menu > li.active > a {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .04);
}

#sidebar .nav-user-wrapper {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* ====================================================================== */
/*  8. Верхняя панель                                                     */
/* ====================================================================== */

.navbar.navbar-static-top {
    border: none;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}

.navbar .navbar-collapse {
    background: var(--mu-surface) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.navbar .navbar-header {
    box-shadow: none !important;
}

.navbar .navbar-collapse .nav > li > a {
    color: #5c646e;
    transition: color .15s var(--mu-ease), background-color .15s var(--mu-ease);
}

.navbar .navbar-collapse .nav > li > a:hover {
    color: var(--mu-primary);
    background: var(--mu-primary-soft);
}

/* разделители-градиенты между пунктами верхнего меню — убрать */
@media (min-width: 768px) {
    .navbar .navbar-collapse .navbar-left > li:before,
    .navbar .navbar-collapse .navbar-right > li:before {
        display: none;
    }
}

/* ====================================================================== */
/*  9. Выпадающие меню, модальные окна, вкладки                           */
/* ====================================================================== */

.dropdown-menu {
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius-sm);
    box-shadow: var(--mu-shadow-md);
    padding: 6px;
    margin-top: 6px;
}

.dropdown-menu > li > a {
    border-radius: var(--mu-radius-xs);
    padding: 8px 12px;
    color: #4a515c;
    transition: background-color .12s var(--mu-ease), color .12s var(--mu-ease);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--mu-primary-soft);
    color: var(--mu-primary-dark);
}

.dropdown-menu .divider {
    background-color: var(--mu-border);
    margin: 5px 0;
}

.modal-content {
    border: none;
    border-radius: var(--mu-radius);
    box-shadow: var(--mu-shadow-lg);
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--mu-border);
    padding: 18px 24px;
}

.modal-header .modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2733;
}

.modal-body {
    padding: 22px 24px;
}

.modal-footer {
    border-top: 1px solid var(--mu-border);
    padding: 14px 24px;
    background: #fafbfc;
}

.modal-backdrop.in {
    opacity: .4;
}

.nav-tabs {
    border-bottom: 1px solid var(--mu-border);
}

.nav-tabs > li > a {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: #6b727c;
    font-weight: 500;
    padding: 10px 16px;
    margin-right: 2px;
    transition: color .15s var(--mu-ease), border-color .15s var(--mu-ease);
}

.nav-tabs > li > a:hover {
    background: transparent;
    border-color: transparent transparent var(--mu-border-strong);
    color: var(--mu-primary);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--mu-primary);
    color: var(--mu-primary);
    font-weight: 600;
}

/* пагинация */
.pagination > li > a,
.pagination > li > span {
    border: 1px solid var(--mu-border);
    color: #5c646e;
    margin: 0 2px;
    border-radius: var(--mu-radius-xs) !important;
    min-width: 32px;
    text-align: center;
    transition: all .15s var(--mu-ease);
}

.pagination > li > a:hover {
    background-color: var(--mu-primary-soft);
    border-color: var(--mu-primary);
    color: var(--mu-primary-dark);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background-color: var(--mu-primary);
    border-color: var(--mu-primary);
    color: #fff;
}

/* тултипы и поповеры */
.tooltip-inner {
    background-color: #1f2733;
    border-radius: var(--mu-radius-xs);
    padding: 6px 10px;
    font-size: 12px;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #1f2733;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #1f2733;
}

.tooltip.left .tooltip-arrow {
    border-left-color: #1f2733;
}

.tooltip.right .tooltip-arrow {
    border-right-color: #1f2733;
}

.popover {
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius-sm);
    box-shadow: var(--mu-shadow-md);
}

/* датапикеры */
.datepicker,
.bootstrap-datetimepicker-widget.dropdown-menu {
    border-radius: var(--mu-radius-sm);
    box-shadow: var(--mu-shadow-md);
    border: 1px solid var(--mu-border);
    padding: 8px;
}

.datepicker table tr td,
.datepicker table tr th {
    border-radius: var(--mu-radius-xs);
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active {
    background-color: var(--mu-primary) !important;
    background-image: none !important;
    color: #fff !important;
    text-shadow: none;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background-color: var(--mu-primary-soft) !important;
    background-image: none !important;
    color: var(--mu-primary-dark) !important;
}

/* ====================================================================== */
/*  10. Экран входа                                                       */
/* ====================================================================== */

/* фон остаётся светлым: логотип login (logo-new.png) — тёмная версия */
body.login {
    background: radial-gradient(1200px 600px at 50% -10%, #ffffff 0%, var(--mu-bg) 60%);
}

body.login .box-login {
    border-radius: 14px;
    box-shadow: var(--mu-shadow-lg);
    border: 1px solid var(--mu-border);
    padding: 26px 24px;
}

body.login .box-login .form-control {
    height: 40px;
}

body.login .box-login .btn {
    padding: 9px 18px;
}

body.login .lang .btn-language {
    border-radius: var(--mu-radius-xs);
    box-shadow: none !important;
}

/* ====================================================================== */
/*  11. Скроллбары и мелочи                                               */
/* ====================================================================== */

* {
    scrollbar-width: thin;
    scrollbar-color: #c7ced6 transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #c7ced6;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #aab3bd;
    background-clip: content-box;
}

#sidebar ::-webkit-scrollbar-thumb {
    background-color: #39485e;
    background-clip: content-box;
}

::selection {
    background: var(--mu-primary-soft);
    color: inherit;
    text-shadow: none;
}

::-moz-selection {
    background: var(--mu-primary-soft);
    color: inherit;
    text-shadow: none;
}

/* доступность: видимый фокус на клавиатуре */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--mu-primary);
    outline-offset: 2px;
}

/* уважать системную настройку «меньше анимации» */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* печать: без теней и фонов */
@media print {
    .panel,
    .panel-white {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* ====================================================================== */
/*  12. Полировка                                                         */
/* ====================================================================== */

/* --- Цифры в колонку. Для биллинга это главное: суммы выравниваются
       разряд в разряд, колонка перестаёт «плясать». Inter умеет tnum. --- */
.table > tbody > tr > td,
.table > tfoot > tr > td,
.alignright,
.text-right,
.label,
.pagination > li > a,
.dataTables_wrapper .dataTables_info {
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
}

/* суммы — чуть плотнее и контрастнее, чтобы читались как данные */
.table > tbody > tr > td.alignright,
.table > tbody > tr > td.text-right {
    font-weight: 500;
    color: #2b3440;
    /* иначе в узкой колонке сумма рвётся на две строки: «12 450 / 000,00» */
    white-space: nowrap;
}

/* --- Шапка страницы: заголовок крупнее, под ним волосяная линия --- */
.breadcrumb-wrapper {
    padding: 24px 30px 14px;
    margin-bottom: 4px;
}

h4.mainTitle,
.mainTitle {
    font-size: 21px;
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.25;
}

.mainTitle small {
    font-size: 13px;
    font-weight: 400;
    color: var(--mu-text-muted);
    margin-top: 6px;
}

/* заголовки секций внутри панелей */
.panel-white h4,
.panel-white h5 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
}

/* --- Панели: чуть мягче углы и живая тень при наведении --- */
.panel-white,
.panel-default {
    border-radius: 12px;
}

/* --- Сайдбар: пункты-«пилюли», ровные иконки, спокойная типографика --- */
#sidebar > div nav > ul > li {
    margin: 2px 10px;
    border-radius: 9px;
}

#sidebar > div nav > ul > li > a {
    font-weight: 450;
    letter-spacing: .002em;
}

#sidebar > div nav > ul > li > a i {
    width: 18px;
    text-align: center;
    margin-right: 2px;
}

#sidebar > div nav > ul > li.active {
    background: linear-gradient(90deg, rgba(0, 165, 236, .20) 0%, rgba(0, 165, 236, .10) 100%) !important;
}

#sidebar > div nav > ul > li.active > a {
    font-weight: 600;
}

ul.sub-menu > li > a {
    border-radius: 7px;
    margin: 1px 8px;
    padding-left: 38px;
}

/* --- Верхняя панель: выше и спокойнее --- */
/* Тема центрирует элементы навбара через line-height:60px при нулевых
   вертикальных отступах (styles.css:856) — высота панели тоже 60px.
   Любой вертикальный padding/margin ломает выравнивание и выталкивает
   элемент за панель. Держим тот же ритм: 10 + 40 + 10 = 60. */
.navbar .navbar-collapse .nav > li > a {
    height: 40px;
    line-height: 40px;
    margin: 10px 2px;
    padding: 0 12px;
    border-radius: 8px;
}

/* --- Появление меню и модалок --- */
/* Намеренно без opacity: если анимация не проиграется до конца (меню было
   display:none, перерисовка таблицы, reduced-motion), элемент останется
   на opacity:0 и будет «просвечивать» сквозь таблицу. Двигаем только сдвиг —
   худший случай тогда просто отсутствие анимации, а не невидимое меню. */
@keyframes mu-pop {
    from {
        transform: translateY(-6px);
    }
    to {
        transform: none;
    }
}

.dropdown-menu {
    animation: mu-pop .14s var(--mu-ease);
    transform-origin: top;
}

.modal.fade .modal-dialog {
    transform: translateY(-16px) scale(.99);
    transition: transform .2s var(--mu-ease);
}

.modal.in .modal-dialog {
    transform: none;
}

/* каретка дропдауна — тоньше */
.caret {
    border-top-width: 5px;
    border-right-width: 4px;
    border-left-width: 4px;
    opacity: .7;
}

/* --- Оверлей загрузки (jquery.blockUI) --- */
.blockUI.blockOverlay {
    background: rgba(31, 39, 51, .32) !important;
    opacity: 1 !important;
}

.blockUI.blockMsg {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: var(--mu-shadow-lg) !important;
    padding: 18px 26px !important;
    color: #1f2733 !important;
    font-weight: 500;
}

/* --- Пустая таблица --- */
.dataTables_empty,
td.dataTables_empty {
    color: var(--mu-text-muted) !important;
    padding: 32px 14px !important;
    text-align: center;
    font-style: normal;
}

/* --- Чуть больше воздуха вокруг контента --- */
@media (min-width: 992px) {
    .container-fluid.container-fullw {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* --- Мелочи --- */
.tooltips {
    cursor: pointer;
}

code, kbd, pre, samp {
    font-family: "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace;
    font-size: 12.5px;
    border-radius: var(--mu-radius-xs);
}

code {
    background: #f4f6f8;
    color: #b02f2a;
    padding: 2px 6px;
    border: none;
}

/* ====================================================================== */
/*  13. Закреплённые колонки в широких таблицах                            */
/*                                                                        */
/*  Таблица договоров — 14 колонок, по ширине не помещается, и колонка     */
/*  действий уезжает за правый край. Bootstrap уже даёт .table-responsive  */
/*  { overflow-x: auto } на всех разрешениях, поэтому контейнер прокрутки  */
/*  есть и position:sticky работает без правки разметки.                   */
/*                                                                        */
/*  Если прокрутки нет — sticky ничего не меняет, правила безопасны.       */
/* ====================================================================== */

:root {
    /* ширина колонки «переход на карту» — от неё считается сдвиг соседней */
    --mu-col-action: 72px;
}

/* --- Общее правило: последняя колонка липнет к правому краю --- */
.table-responsive .table > thead > tr > th:last-child,
.table-responsive .table > tbody > tr > td:last-child {
    position: -webkit-sticky;
    position: sticky;
    right: 0;
    z-index: 2;
    background-color: var(--mu-surface);
    border-left: 1px solid var(--mu-border);
}

.table-responsive .table > thead > tr > th:last-child {
    z-index: 3;
    background-color: #fafbfc;
}

/* полосатость под закреплённой колонкой не видна — возвращаем её явно */
.table-responsive .table-striped > tbody > tr:nth-of-type(odd) > td:last-child {
    background-color: #fcfdfd;
}

/* --- Договоры: закрепляем обе колонки действий (шестерёнка + карта)
       и ID слева, чтобы при любой прокрутке было видно и «какая строка»,
       и «что с ней сделать». --- */
#table-contracts > thead > tr > th:last-child,
#table-contracts > tbody > tr > td:last-child {
    width: var(--mu-col-action);
    min-width: var(--mu-col-action);
    max-width: var(--mu-col-action);
}

#table-contracts > thead > tr > th:nth-last-child(2),
#table-contracts > tbody > tr > td:nth-last-child(2) {
    position: -webkit-sticky;
    position: sticky;
    right: var(--mu-col-action);
    z-index: 2;
    background-color: var(--mu-surface);
    border-left: 1px solid var(--mu-border);
}

#table-contracts > thead > tr > th:nth-last-child(2) {
    z-index: 3;
    background-color: #fafbfc;
}

#table-contracts.table-striped > tbody > tr:nth-of-type(odd) > td:nth-last-child(2) {
    background-color: #fcfdfd;
}

/* ID — к левому краю */
#table-contracts > thead > tr > th:first-child,
#table-contracts > tbody > tr > td:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--mu-surface);
    border-right: 1px solid var(--mu-border);
}

#table-contracts > thead > tr > th:first-child {
    z-index: 3;
    background-color: #fafbfc;
}

#table-contracts.table-striped > tbody > tr:nth-of-type(odd) > td:first-child {
    background-color: #fcfdfd;
}

/* подсветка строки должна доходить и до закреплённых ячеек */
.table-responsive .table-hover > tbody > tr:hover > td:last-child,
#table-contracts.table-hover > tbody > tr:hover > td:nth-last-child(2),
#table-contracts.table-hover > tbody > tr:hover > td:first-child {
    background-color: #e6f5fd !important;
}

/* выпадающее меню шестерёнки должно быть поверх соседней закреплённой колонки */
.table-responsive .table > tbody > tr > td .dropdown-menu {
    z-index: 1060;
}

/* Ячейка с открытым меню обязана быть выше закреплённых ячеек соседних
   строк. У всех закреплённых ячеек z-index:2, а строки ниже идут позже
   в DOM — и перекрывали правую часть выпавшего меню.
   Специфичность важна: правила закрепления начинаются с #table-contracts,
   поэтому здесь добавлен .table — иначе id перевесит и z-index останется 2. */
.table-responsive .table > tbody > tr > td:has(.open),
#table-contracts.table > tbody > tr > td:has(.open) {
    z-index: 20;
}

/* Без :has() поднять нужную ячейку нечем, и меню будет перекрыто.
   В таком браузере просто не закрепляем колонку с шестерёнкой —
   карта и ID остаются закреплёнными, меню перестаёт резаться. */
@supports not selector(:has(*)) {
    #table-contracts > thead > tr > th:nth-last-child(2),
    #table-contracts > tbody > tr > td:nth-last-child(2) {
        position: static;
    }
}

/* ====================================================================== */
/*  14. Выпадающее меню в таблицах: не обрезать и не промахиваться         */
/*                                                                        */
/*  .table-responsive имеет overflow-x:auto, из-за чего браузер обрезает   */
/*  контейнер и по вертикали — меню шестерёнки у нижних строк срезалось.   */
/*  JSP обходит это, переворачивая меню вверх жёстким top:-427px (и ещё    */
/*  семью разными числами в 10 файлах). Числа подобраны под старую высоту  */
/*  строки, поэтому после смены типографики промахиваются.                 */
/*                                                                        */
/*  Привязываем меню к низу кнопки: верно при любой высоте строки и        */
/*  любом числе пунктов, магические числа больше ни на что не влияют.      */
/* ====================================================================== */

.dropdown-menu.dropdown-light-top {
    /* !important — перебиваем инлайновый style="top:-427px" из JSP */
    top: auto !important;
    bottom: 100%;
    margin-bottom: 8px;
}

/* хвостик-стрелка у перевёрнутого меню смотрит вниз */
.dropdown-menu.dropdown-light-top:before,
.dropdown-menu.dropdown-light-top:after {
    top: auto;
    bottom: -11px;
    transform: rotate(180deg);
}

/* Подстраховка с padding-bottom на открытом меню намеренно не делается:
   она убирает обрезание ценой скачка макета на ~280px при каждом клике,
   а замеры показали, что после привязки к кнопке обрезания и так нет. */

/* ====================================================================== */
/*  15. Тулбары: кнопки не должны разрываться на две строки                */
/*                                                                        */
/*  Поля ввода с новыми отступами шире прежних, поэтому последней ячейке   */
/*  в строке фильтров достаётся меньше места и пара «Применить/Очистить»   */
/*  съезжала вниз. Порог переноса сдвинулся с ~1750px до ~1900px.          */
/*  Паттерн общий: 23 страницы с id="table-filters", 28 файлов с           */
/*  ячейками align="right". Вместо сужения полей запрещаем перенос —       */
/*  при нехватке места таблица прокрутится, как и задумано.                */
/* ====================================================================== */

#table-filters > td[align="right"],
#table-filters > td:last-child {
    white-space: nowrap;
}

/* тулбары вне строки фильтров: ячейка, прямой потомок которой — кнопка */
.table td[align="right"]:has(> .btn),
.table td.center:has(> .btn + .btn) {
    white-space: nowrap;
}

/* сами кнопки в тулбаре не переносят подпись */
#table-filters .btn,
.table td[align="right"] > .btn {
    white-space: nowrap;
}