/* ==========================================================================
   MyBGBilling — тема «lighthru»
   Современный адаптивный дизайн в светло-голубых тонах.
   Референс композиции: habr.ru (карточная сетка, спокойная типографика,
   белый сайдбар, много воздуха, минимум рамок).

   Порядок загрузки (важно для каскада):
     1. lighthru/theme.css            ← этот файл  (содержит @import bootstrap)
     2. lighthru/custom.css           ← мелкие правки оператора
     3. lighthru/layout-override.css  ← сетка и адаптив, грузится ПОСЛЕДНИМ
   Благодаря тому, что layout-override подключён последним, общие файлы
   layout.css / layout-override.css вендора не трогаются и не мешают.
   ========================================================================== */

/* Полный Bootstrap 3.3.5 из static/ — сетка, .panel, .table, формы и прочее.
   Путь относительный от /javax.faces.resource/lighthru/theme.css → /static/... */
@import url("../../static/bootstrap-3.3.5/css/bootstrap.css");


/* ==========================================================================
   1. ТОКЕНЫ
   --------------------------------------------------------------------------
   Все цвета темы задаются здесь. Тёмная вариация перекрывает тот же
   набор переменных в разделе 1.1 — компоненты ниже ничего не знают
   о светлом/тёмном и переключаются целиком.
   ========================================================================== */
:root {
  /* синий */
  --lk-b50:  #f0f7fd;
  --lk-b100: #dcebf9;
  --lk-b200: #c2ddf2;
  --lk-b300: #93c3e8;
  --lk-b400: #5da3da;
  --lk-b500: #2f86c9;   /* основной */
  --lk-b600: #1c6ba8;
  --lk-b700: #145487;
  --lk-b800: #0e3d63;

  /* текст */
  --lk-ink:   #16232e;
  --lk-ink-2: #4a5b6b;
  --lk-ink-3: #7b8a99;
  --lk-ink-4: #a3b0bd;

  /* поверхности */
  --lk-bg:    #f4f8fc;
  --lk-card:  #ffffff;
  --lk-line:  #dde7f0;
  --lk-line-2:#eaf0f6;
  --lk-hover: #f0f7fd;   /* фон наведения в списках */
  --lk-active:#dcebf9;   /* фон выбранного элемента */

  /* статусы: заливка + текст на ней */
  --lk-ok:        #17a673;
  --lk-ok-bg:     #dff5ec;
  --lk-ok-fg:     #0e6b4b;
  --lk-warn:      #e8a33d;
  --lk-warn-bg:   #fdf1dc;
  --lk-warn-fg:   #8a5a10;
  --lk-err:       #e05252;
  --lk-err-bg:    #fbe4e4;
  --lk-err-fg:    #9c2626;
  --lk-info-bg:   #f0f7fd;
  --lk-info-fg:   #0e3d63;

  /* текст на цветных заливках (кнопки, акцентные плашки) */
  --lk-on-accent: #ffffff;

  /* фокус и тени */
  --lk-focus:      #5da3da;
  --lk-focus-ring: rgba(93,163,218,.25);
  --lk-shadow:    0 1px 2px rgba(22,35,46,.06);
  --lk-shadow-md: 0 2px 8px rgba(22,35,46,.08);
  --lk-shadow-lg: 0 8px 24px rgba(22,35,46,.12);

  /* фон страницы входа (включая прозрачные варианты для градиента) */
  --lk-login-1:   #d8ecfb;
  --lk-login-1-a: rgba(216,236,251,0);
  --lk-login-2:   #e4f1fc;
  --lk-login-2-a: rgba(228,241,252,0);

  /* геометрия */
  --lk-nav-h: 60px;
  --lk-side-w: 250px;
  --lk-r:      8px;   /* скругление карточек */
  --lk-r-sm:   6px;   /* скругление контролов */
}


/* ==========================================================================
   1.1. ТЁМНАЯ ВАРИАЦИЯ
   Перекрывает только токены. Применяется классом на <html>/<body>.
   ========================================================================== */
.ui-dark {
  --lk-b50:  #16222e;
  --lk-b100: #1b2c3a;
  --lk-b200: #223847;
  --lk-b300: #2d4d61;
  --lk-b400: #3d7396;
  --lk-b500: #4d97cc;   /* основной */
  --lk-b600: #6fb3dd;
  --lk-b700: #93cbe8;
  --lk-b800: #c2e2f5;

  --lk-ink:   #e7eef5;
  --lk-ink-2: #b8c6d2;
  --lk-ink-3: #8b9aa8;
  --lk-ink-4: #63717d;

  --lk-bg:    #0f1820;
  --lk-card:  #17222c;
  --lk-line:  #263442;
  --lk-line-2:#1e2b37;
  --lk-hover: #1c2a35;
  --lk-active:#223847;

  --lk-ok:        #2bbb8b;
  --lk-ok-bg:     #14332a;
  --lk-ok-fg:     #62d3aa;
  --lk-warn:      #e8b45e;
  --lk-warn-bg:   #3a2e18;
  --lk-warn-fg:   #edc982;
  --lk-err:       #e57373;
  --lk-err-bg:    #3b2020;
  --lk-err-fg:    #f09b9b;
  --lk-info-bg:   #16222e;
  --lk-info-fg:   #93cbe8;

  --lk-on-accent: #0f1820;

  --lk-focus:     #4d97cc;
  --lk-focus-ring: rgba(77,151,204,.32);
  --lk-shadow:    0 1px 2px rgba(0,0,0,.35);
  --lk-shadow-md: 0 2px 10px rgba(0,0,0,.42);
  --lk-shadow-lg: 0 10px 30px rgba(0,0,0,.55);

  --lk-login-1:   #14212c;
  --lk-login-1-a: rgba(20,33,44,0);
  --lk-login-2:   #0f1820;
  --lk-login-2-a: rgba(15,24,32,0);
}


/* ==========================================================================
   2. БАЗА И ТИПОГРАФИКА
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", "Open Sans", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--lk-ink);
  background-color: var(--lk-bg);
  /* убираем «прыжок» при клике по якорю под фиксированной шапкой */
  scroll-padding-top: calc(var(--lk-nav-h) + 12px);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--lk-ink);
  font-weight: 600;
  letter-spacing: -.01em;
}

h1, .h1 { font-size: 26px; line-height: 1.25; margin: 0 0 4px; }
h2, .h2 { font-size: 21px; line-height: 1.3;  margin: 0 0 4px; }
h3, .h3 { font-size: 18px; line-height: 1.35; margin: 0 0 4px; }
h4, .h4 { font-size: 16px; line-height: 1.4;  margin: 0 0 4px; }
h5, .h5 { font-size: 15px; }
h6, .h6 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--lk-ink-3); }

a, a:visited          { color: var(--lk-b500); text-decoration: none; }
a:hover, a:focus      { color: var(--lk-b700); text-decoration: none; }
a:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
a.btn:focus-visible {
  outline: 2px solid var(--lk-b400);
  outline-offset: 2px;
}

p { margin: 0 0 12px; }
small, .small { font-size: 13px; }
.text-muted    { color: var(--lk-ink-3) !important; }
.text-muted a  { color: var(--lk-ink-3); }

hr { border-top: 1px solid var(--lk-line-2); }

code, pre {
  background: var(--lk-b50);
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-sm);
  color: var(--lk-b800);
}
pre { padding: 12px 14px; }


/* ==========================================================================
   3. КАРТОЧКИ (панели → карточки, как на habr)
   ========================================================================== */
.panel {
  background: var(--lk-card);
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r);
  box-shadow: var(--lk-shadow);
  margin-bottom: 16px;
  overflow: hidden;          /* чтобы скругление прижимало .panel-heading */
}

.panel-heading {
  background: transparent;
  color: var(--lk-ink);
  border-bottom: 1px solid var(--lk-line-2);
  padding: 14px 18px;
}
.panel-heading .panel-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--lk-ink);
}
.panel-title { margin: 0; }

/* Первичная панель не должна заливаться синим — habr это не любит */
.panel-primary > .panel-heading {
  background: transparent;
  color: var(--lk-ink);
  border-bottom-color: var(--lk-line-2);
}

.panel-body { padding: 18px; }
.panel-footer {
  background: var(--lk-b50);
  border-top: 1px solid var(--lk-line-2);
  padding: 12px 18px;
}

.panel-group .panel { border-radius: var(--lk-r); }


/* ==========================================================================
   4. ТАБЛИЦЫ
   ========================================================================== */
.table {
  background: transparent;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0;
  color: var(--lk-ink);
}

.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
  /* вертикального выравнивания по умолчанию нет — прижимаем к верху */
  vertical-align: top;
  padding: 10px 12px;
  border-top: 1px solid var(--lk-line-2);
  line-height: 1.45;
}

/* шапка — компактная, «как в редакторе» */
.table > thead > tr > th {
  background: var(--lk-b50);
  color: var(--lk-ink-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-top: 0;
  border-bottom: 1px solid var(--lk-line);
  white-space: nowrap;
  vertical-align: middle;
}
.table > thead > tr > th a { color: inherit; }

.table > tbody > tr > td:first-child,
.table > thead > tr > th:first-child { padding-left: 18px; }
.table > tbody > tr > td:last-child,
.table > thead > tr > th:last-child  { padding-right: 18px; }

.table-hover > tbody > tr:hover > td,
.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--lk-b50);
}
.table-striped > tbody > tr:nth-of-type(even) > td { background-color: transparent; }
.table-hover > tbody > tr:hover > td { background-color: var(--lk-b100); }

.table > tbody > tr > td .btn { margin-bottom: 0; }
.table td input[type="radio"],
.table td input[type="checkbox"] { margin-top: 6px; }

/* числовые колонки читаются лучше, когда выровнены по правому краю */
.table td.num,
.table th.num,
.table .text-right { text-align: right; font-variant-numeric: tabular-nums; }

.table-responsive { border: 0; }

/* раскрывающиеся строки (например, детализация сессии) */
.table tbody tr.active > td { background: var(--lk-b100); }


/* ==========================================================================
   5. ФОРМЫ
   ========================================================================== */
.form-control {
  background: var(--lk-card);
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-sm);
  color: var(--lk-ink);
  font-size: 14px;
  height: 38px;
  padding: 8px 12px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: var(--lk-ink-4); }

.form-control:hover:not(:disabled):not(:readonly) { border-color: var(--lk-b300); }

.form-control:focus {
  border-color: var(--lk-b400);
  box-shadow: 0 0 0 3px var(--lk-focus-ring);
  outline: none;
}

.form-control:disabled,
.form-control[readonly] {
  background: var(--lk-b50);
  color: var(--lk-ink-3);
  cursor: not-allowed;
}

select.form-control,
select[size] {
  height: 38px;
  /* jsf ставит size="1"; принудительно НЕ растягиваем селекты */
  padding: 8px 12px;
}

select[multiple],
select[size='2'], select[size='3'], select[size='4'], select[size='5'],
select[size='6'], select[size='7'], select[size='8'] {
  height: auto;
  padding: 4px;
}

.form-control-static { padding-top: 8px; padding-bottom: 8px; }

label {
  font-weight: 500;
  color: var(--lk-ink-2);
  margin-bottom: 4px;
}
.help-block {
  color: var(--lk-ink-3);
  font-size: 12.5px;
  margin-top: 4px;
  margin-bottom: 0;
}

.form-group { margin-bottom: 14px; }
.has-error .form-control { border-color: var(--lk-err); }
.has-error .help-block   { color: var(--lk-err); }

.input-group-addon {
  background: var(--lk-b50);
  border-color: var(--lk-line);
  color: var(--lk-ink-2);
}

.form-inline .form-control { display: inline-block; width: auto; }
.form-inline .form-group  { display: inline-block; margin-right: 10px; vertical-align: middle; }


/* ==========================================================================
   6. КНОПКИ
   ========================================================================== */
.btn {
  background: var(--lk-card);
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-sm);
  color: var(--lk-ink-2);
  font-size: 14px;
  font-weight: 500;
  /* убираем вендорский UPPERCASE — это признак старого дизайна */
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.6;
  padding: 8px 16px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  box-shadow: none;
}

.btn:hover, .btn:focus {
  background: var(--lk-b50);
  border-color: var(--lk-b300);
  color: var(--lk-b700);
}
.btn:active { background: var(--lk-b100); box-shadow: none; }

.btn-primary {
  background: var(--lk-b500);
  border-color: var(--lk-b500);
  color: var(--lk-on-accent);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--lk-b600);
  border-color: var(--lk-b600);
  color: var(--lk-on-accent);
}
.btn-primary:active { background: var(--lk-b700); border-color: var(--lk-b700); }

.btn-success { background: var(--lk-ok);   border-color: var(--lk-ok);   color: var(--lk-on-accent); }
.btn-warning { background: var(--lk-warn); border-color: var(--lk-warn); color: var(--lk-on-accent); }
.btn-danger  { background: var(--lk-err);  border-color: var(--lk-err);  color: var(--lk-on-accent); }
.btn-info    { background: var(--lk-b400); border-color: var(--lk-b400); color: var(--lk-on-accent); }

.btn-default:hover, .btn-default:focus { background: var(--lk-b50); }

.btn-link { color: var(--lk-b500); }
.btn-link:hover { color: var(--lk-b700); background: transparent; }

.btn-lg  { padding: 10px 20px; font-size: 15px; border-radius: var(--lk-r-sm); }
.btn-sm  { padding: 5px 10px;  font-size: 13px; border-radius: 4px; }
.btn-xs  { padding: 2px 8px;   font-size: 12px; border-radius: 4px; }

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-block { display: block; width: 100%; }


/* ==========================================================================
   7. НАВИГАЦИЯ: ШАПКА
   ВАЖНО: геометрия шапки (позиционирование, flex, высота) задана в
   layout-override.css — он подключается последним. Здесь только цвета.
   Не задавать здесь height/line-height для .navbar-brand: вендор
   позиционирует его абсолютно и такая высота ломала раскладку.
   ========================================================================== */
.navbar-default {
  background: var(--lk-card);
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
  box-shadow: none;          /* тень задаёт layout-override */
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus { color: var(--lk-b600); }

.navbar-brand-lk         { color: var(--lk-b600) !important; }
.navbar-brand-customer   { color: var(--lk-ink) !important; font-weight: 500; }

.navbar-top-links > li > a:hover,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background: var(--lk-b50);
  color: var(--lk-b700);
}

.navbar-default .navbar-toggle:hover { background: var(--lk-b50); }
.navbar-default .navbar-toggle .icon-bar { background-color: var(--lk-ink-2); }

.dropdown-menu {
  background: var(--lk-card);
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r);
  box-shadow: var(--lk-shadow-lg);
  padding: 6px 0;
  margin-top: 2px;
  font-size: 14px;
}
.dropdown-menu > li > a,
.dropdown-user > li > a {
  color: var(--lk-ink-2);
  padding: 8px 18px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
  background: var(--lk-b50);
  color: var(--lk-b700);
}
.dropdown-menu .divider { background-color: var(--lk-line-2); }
.dropdown-menu > .disabled > a { color: var(--lk-ink-4); }


/* ==========================================================================
   8. НАВИГАЦИЯ: САЙДБАР (белый, как на habr)
   ========================================================================== */
.sidebar,
.sidebar-nav {
  background: var(--lk-card);
  border: 0;
}

.sidebar a { color: var(--lk-ink-2); }
.sidebar a:hover,
.sidebar a:focus {
  color: var(--lk-b700);
  background: var(--lk-b50);
}

#side-menu { margin: 0; padding: 0; }

#side-menu > li > a,
.sidebar-nav > ul > li > a {
  display: block;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--lk-ink-2);
  border-left: 3px solid transparent;
  transition: background-color .12s ease, color .12s ease;
}
#side-menu > li > a:hover,
#side-menu > li.active > a {
  background: var(--lk-b50);
  color: var(--lk-b700);
  border-left-color: var(--lk-b500);
}

/* раскрытая группа: заголовок остаётся спокойным */
#side-menu > li > a .fa.arrow { color: var(--lk-ink-4); }
#side-menu > li.active > a .fa.arrow { color: var(--lk-b500); }

#side-menu > li > .treeview-menu,
#side-menu .nav-second-level,
#side-menu .nav-third-level {
  background: var(--lk-b50);
  border: 0;
  border-left: 3px solid var(--lk-b100);
  margin: 0;
  padding: 4px 0;
}

#side-menu .nav-second-level > li > a,
#side-menu .nav-third-level > li > a {
  display: block;
  padding: 7px 18px 7px 30px;
  font-size: 13.5px;
  color: var(--lk-ink-2);
}
#side-menu .nav-third-level > li > a { padding-left: 44px; }

#side-menu .nav-second-level > li > a:hover,
#side-menu .nav-third-level > li > a:hover { background: var(--lk-b100); }

/* активный пункт — единственное место с заливкой */
#side-menu .nav-second-level > li > a.active,
#side-menu .nav-third-level > li > a.active,
#side-menu ul li a.active {
  background: var(--lk-b100);
  color: var(--lk-b800);
  font-weight: 600;
}

#side-menu .dropdown-header {
  color: var(--lk-ink-4);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 8px 18px 4px 30px;
}

.sidebar .fa-fw { width: 1.9em; }

.sidebar .badge,
#side-menu .badge {
  background: var(--lk-b500);
  color: var(--lk-on-accent);
  border-radius: 10px;
  padding: 2px 7px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  margin-left: 6px;
  vertical-align: middle;
}

.sidebar-header { height: 16px; }


/* ==========================================================================
   9. ЗАГОЛОВКИ И СЛУЖЕБНЫЕ БЛОКИ СТРАНИЦЫ
   ========================================================================== */
.content-header {
  background: transparent;
  padding: 0 0 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--lk-line-2);
}
.content-header h1 {
  font-size: 26px;
  font-weight: 600;
  color: var(--lk-ink);
  margin: 0;
  line-height: 1.25;
}
.content-header h1 small {
  color: var(--lk-ink-3);
  font-size: 15px;
  font-weight: 400;
}

.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0 0 6px;
  font-size: 13px;
}
.breadcrumb > li + li:before { content: "/"; color: var(--lk-ink-4); }
.breadcrumb > li.active { color: var(--lk-ink-3); }

/* панель фильтров над таблицей */
.filter {
  background: var(--lk-b50);
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.filter .form-control { background: var(--lk-card); }

/* подвал */
.about {
  color: var(--lk-ink-4);
  font-size: 12px;
  padding: 20px 4px 24px;
  text-align: left;
}
.about a { color: var(--lk-ink-3); }


/* ==========================================================================
   10. МЕТКИ, БЕЙДЖИ, АЛЕРТЫ
   ========================================================================== */
.label {
  display: inline-block;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 20px;
  text-transform: none;
  letter-spacing: 0;
}
.label-primary { background: var(--lk-b100); color: var(--lk-b800); }
.label-success { background: var(--lk-ok-bg);   color: var(--lk-ok-fg); }
.label-warning { background: var(--lk-warn-bg); color: var(--lk-warn-fg); }
.label-danger  { background: var(--lk-err-bg);  color: var(--lk-err-fg); }
.label-info    { background: var(--lk-info-bg); color: var(--lk-info-fg); }
.label-default { background: var(--lk-line-2);  color: var(--lk-ink-2); }

.badge {
  background: var(--lk-b500);
  color: var(--lk-on-accent);
  font-weight: 600;
  border-radius: 10px;
  padding: 3px 8px;
}

.alert {
  border: 1px solid transparent;
  border-radius: var(--lk-r);
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: var(--lk-shadow);
}
.alert-info    { background: var(--lk-info-bg); border-color: var(--lk-b200); color: var(--lk-info-fg); }
.alert-success { background: var(--lk-ok-bg);   border-color: var(--lk-ok);   color: var(--lk-ok-fg); }
.alert-warning { background: var(--lk-warn-bg); border-color: var(--lk-warn); color: var(--lk-warn-fg); }
.alert-danger  { background: var(--lk-err-bg);  border-color: var(--lk-err);  color: var(--lk-err-fg); }
.alert .close  { color: inherit; opacity: .45; }
.alert .close:hover { opacity: .8; }


/* ==========================================================================
   11. ВКЛАДКИ, СПИСКИ, ПРОГРЕСС
   ========================================================================== */
.nav-tabs {
  border-bottom-color: var(--lk-line);
  margin-bottom: 0;
}
.nav-tabs > li > a {
  color: var(--lk-ink-2);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin: 0 2px;
  padding: 10px 16px;
  font-weight: 500;
}
.nav-tabs > li > a:hover { background: transparent; color: var(--lk-b600); border-bottom-color: var(--lk-b200); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--lk-b600);
  border-bottom-color: var(--lk-b500);
  background: transparent;
}

.list-group { border-color: var(--lk-line); border-radius: var(--lk-r); box-shadow: var(--lk-shadow); }
.list-group-item { border-color: var(--lk-line-2); padding: 12px 16px; color: var(--lk-ink); }
.list-group-item:first-child { border-top-left-radius: var(--lk-r); border-top-right-radius: var(--lk-r); }
.list-group-item:last-child  { border-bottom-left-radius: var(--lk-r); border-bottom-right-radius: var(--lk-r); }
a.list-group-item:hover, a.list-group-item:focus { background: var(--lk-b50); color: var(--lk-b700); border-color: var(--lk-line-2); }

.progress {
  background: var(--lk-line-2);
  border-radius: 20px;
  height: 8px;
  box-shadow: none;
  margin-bottom: 0;
}
.progress-bar { background: var(--lk-b500); border-radius: 20px; font-size: 11px; line-height: 8px; }
.progress-bar-success { background: var(--lk-ok); }
.progress-bar-info    { background: var(--lk-b400); }
.progress-bar-warning { background: var(--lk-warn); }
.progress-bar-danger  { background: var(--lk-err); }


/* ==========================================================================
   12. ПОСТРАНИЧНАЯ НАВИГАЦИЯ
   ========================================================================== */
.pagination { margin: 0; }
.pagination > li > a,
.pagination > li > span {
  border-color: var(--lk-line);
  color: var(--lk-ink-2);
  border-radius: var(--lk-r-sm) !important;
  margin: 0 2px;
  padding: 7px 12px;
  float: left;
}
.pagination > li > a:hover {
  background: var(--lk-b50);
  border-color: var(--lk-b300);
  color: var(--lk-b700);
}
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
  background: var(--lk-b500);
  border-color: var(--lk-b500);
  color: var(--lk-on-accent);
}
.pagination > .disabled > a,
.pagination > .disabled > a:hover { color: var(--lk-ink-4); background: transparent; }

.pagination-top    { text-align: right; margin-bottom: 12px; }
.pagination-bottom { margin-top: 16px; }
.pagination-sm > li > a > span { font-size: 12.5px; }


/* ==========================================================================
   13. БЛОК ОПЛАТЫ
   ========================================================================== */
.paymentBlocks { display: flex; flex-wrap: wrap; gap: 12px; }
.paymentBlocks .btn { margin: 0; text-transform: none; }
.paymentBlockLogo {
  width: 150px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r);
  padding: 8px;
  background-color: var(--lk-card);
}
.autopaymentSum { text-align: right; font-variant-numeric: tabular-nums; }


/* ==========================================================================
   14. КАЛЕНДАРЬ (bootstrap-datepicker)
   ========================================================================== */
.datepicker {
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r);
  box-shadow: var(--lk-shadow-lg);
  padding: 6px;
}
.datepicker table tr th,
.datepicker table tr td { border-radius: var(--lk-r-sm); }
.datepicker table tr td span {
  border-radius: var(--lk-r-sm);
  height: 34px;
  line-height: 34px;
}
.datepicker table tr td.old,
.datepicker table tr td.new { color: var(--lk-ink-4); }
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled:hover {
  background: var(--lk-b500);
  border-color: var(--lk-b500);
  color: var(--lk-on-accent);
}
.datepicker table tr td span.today,
.datepicker table tr td span.today:hover { background: var(--lk-b100); color: var(--lk-b800); }
.datepicker thead tr:first-child th,
.datepicker thead tr:first-child th:hover { color: var(--lk-b600); }


/* ==========================================================================
   15. ВСПЛЫВАЮЩИЕ ПОДСКАЗКИ И МОДАЛЬНЫЕ ОКНА
   ========================================================================== */
.tooltip-inner {
  background: var(--lk-b800);
  border-radius: 4px;
  font-size: 12.5px;
  padding: 6px 10px;
}
.tooltip.top .tooltip-arrow::before { border-top-color: var(--lk-b800); }

.modal-content {
  border: 0;
  border-radius: var(--lk-r);
  box-shadow: var(--lk-shadow-lg);
}
.modal-header {
  border-bottom: 1px solid var(--lk-line-2);
  padding: 16px 20px;
}
.modal-title { font-size: 17px; font-weight: 600; }
.modal-footer { border-top: 1px solid var(--lk-line-2); padding: 14px 20px; }


/* ==========================================================================
   16. ЭЛЕМЕНТЫ ТАРИФОВ И ДЕТАЛИЗАЦИИ
   ========================================================================== */
#tariffOptionActivate td label { vertical-align: middle; }
.balanceInformer { text-align: right; }
.comment, .commentFont { color: var(--lk-ink-3); font-size: 13px; font-style: italic; }

/* числовые значения — моноширинные цифры, колонки не «прыгают» */
.balanceList td:last-child,
.table td.num,
.numeric { font-variant-numeric: tabular-nums; }

/* негативный остаток подсвечиваем, но спокойно */
.text-danger  { color: var(--lk-err) !important; }
.text-success { color: var(--lk-ok) !important; }
.text-warning { color: var(--lk-warn) !important; }


/* ==========================================================================
   17. ПЕЧАТЬ
   ========================================================================== */
@media print {
  .navbar, .sidebar, .about, .filter, .pagination,
  .pagination-top, .pagination-bottom, .btn { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .panel { box-shadow: none; border: 1px solid #999; }
  #page-wrapper { margin-left: 0 !important; }
  a[href]:after { content: ""; }
}