/* ==========================================================================
   Темы интерфейса.

   Пять палитр: светлая (значения :root ниже — текущий вид hyper), тёмная,
   тёплая, высокий контраст, монохромная. Тема — это переопределение
   переменных --ob-* на html[data-ob-theme="…"] и правила оболочки hyper,
   которые действуют только при НЕ светлой палитре.

   Атрибут ставится inline-скриптом в <head> до первой отрисовки
   (LayoutVertical/LayoutHorizontal/IFrame), выбор хранится в localStorage.
   Без выбора атрибута нет — оболочка остаётся ровно такой, какой её рисует
   hyper. Настройка ОС (prefers-color-scheme) не учитывается.
   ========================================================================== */

:root {
  --ob-primary: #006196;
  --ob-primary-hover: #00507E;
  --ob-link: #1B6E9C;
  --ob-link-hover: #2D8DC1;
  --ob-primary-soft: #E5F1F8;
  --ob-primary-soft-bg: #F4FAFD;
  --ob-primary-soft-line: #CFE2EE;
  --ob-primary-soft-line-hover: #9FC9E0;

  --ob-text: #2A2C31;
  --ob-text-sub: #64717E;
  --ob-text-muted: #64717E;

  --ob-bg: #EEF4F8;
  --ob-surface: #FFFFFF;
  --ob-surface-alt: #F7FAFC;
  --ob-surface-hover: #FAFCFD;
  --ob-nav-hover: #F6F9FB;

  --ob-line: #E4E9F0;
  --ob-line-soft: #EAEFF4;

  --ob-success: #52C41A;
  --ob-warn: #FAAD14;
  --ob-danger: #FF4D4F;

  --ob-on-accent: #FFFFFF;
  --ob-on-ghost: #FFFFFF;
  --ob-ghost: #2D8DC1;
  --ob-ghost-hover: #2680B2;
  --ob-info-tx: #1E6E9C;
  --ob-ok-bg: #EAF7E4;  --ob-ok-tx: #2F7A0D;  --ob-ok-ln: #CDEBD6;
  --ob-wn-bg: #FFF6E0;  --ob-wn-tx: #9A6B00;  --ob-wn-ln: #F5DFA8;
  --ob-dn-bg: #FFECEC;  --ob-dn-tx: #D4383A;  --ob-dn-ln: #F5C6C7;
  --ob-nu-bg: #F1F5F9;

  --ob-shadow-card: 0 0 35px 0 rgba(154, 161, 171, .15);
}

/* --------------------------------------------------------------------------
   1. Тёмная: работа в темноте. Акценты СВЕТЛЕЕ фона, поэтому текст на
   цветных кнопках и бейджах тёмный (--ob-on-accent), а роль теней берут
   границы — светящаяся тень на тёмном фоне выглядит грязью.
   -------------------------------------------------------------------------- */
html[data-ob-theme="dark"] {
  --ob-primary: #7FC2E8;
  --ob-primary-hover: #A3D5F2;
  --ob-link: #8CCAEC;
  --ob-link-hover: #A8D8F3;
  --ob-primary-soft: #1B2C38;
  --ob-primary-soft-bg: #16232E;
  --ob-primary-soft-line: #2E4A5E;
  --ob-primary-soft-line-hover: #3D5F76;

  --ob-text: #E6EAF0;
  --ob-text-sub: #A3B0BE;
  --ob-text-muted: #A3B0BE;

  --ob-bg: #12161B;
  --ob-surface: #1A1F26;
  --ob-surface-alt: #20262E;
  --ob-surface-hover: #232A33;
  --ob-nav-hover: #273039;

  --ob-line: #2C3540;
  --ob-line-soft: #262E38;

  --ob-success: #7DD65A;
  --ob-warn: #F0C05A;
  --ob-danger: #F08183;

  --ob-on-accent: #0C1116;
  --ob-on-ghost: #E6EAF0;
  --ob-ghost: #2E4A5E;
  --ob-ghost-hover: #3D5F76;
  --ob-info-tx: #8CCAEC;
  --ob-ok-bg: #172A16;  --ob-ok-tx: #96E07A;  --ob-ok-ln: #26401F;
  --ob-wn-bg: #2E2410;  --ob-wn-tx: #EFC875;  --ob-wn-ln: #3A2C10;
  --ob-dn-bg: #301A1B;  --ob-dn-tx: #F0999B;  --ob-dn-ln: #4A2426;
  --ob-nu-bg: #232A33;

  --ob-shadow-card: 0 0 0 1px rgba(255, 255, 255, .06);
}

/* --------------------------------------------------------------------------
   2. Тёплая: меньше синего света. Акцент — тёплый коричневый: синяя
   первичная кнопка свела бы смысл темы на нет на самом заметном элементе.
   -------------------------------------------------------------------------- */
html[data-ob-theme="warm"] {
  --ob-primary: #8A5518;
  --ob-primary-hover: #6E4211;
  --ob-link: #8A5518;
  --ob-link-hover: #A86A25;
  --ob-primary-soft: #F1E3CB;
  --ob-primary-soft-bg: #F7EEDE;
  --ob-primary-soft-line: #DCC7A4;
  --ob-primary-soft-line-hover: #C9AF85;

  --ob-text: #332B20;
  --ob-text-sub: #6B5D48;
  --ob-text-muted: #6B5D48;

  --ob-bg: #F2EAD8;
  --ob-surface: #FCF8EE;
  --ob-surface-alt: #F6EFE0;
  --ob-surface-hover: #F9F3E6;
  --ob-nav-hover: #F3EBDA;

  --ob-line: #E0D3B8;
  --ob-line-soft: #E8DCC5;

  --ob-success: #4E7A1F;
  --ob-warn: #9A6B00;
  --ob-danger: #A83C2A;

  --ob-on-accent: #FDF8ED;
  --ob-on-ghost: #FDF8ED;
  --ob-ghost: #A86A25;
  --ob-ghost-hover: #8A5518;
  --ob-info-tx: #8A5518;
  --ob-ok-bg: #E8EFD5;  --ob-ok-tx: #3F6416;  --ob-ok-ln: #CFDCB0;
  --ob-wn-bg: #F5E6C4;  --ob-wn-tx: #7A5300;  --ob-wn-ln: #EBD5A0;
  --ob-dn-bg: #F5DED6;  --ob-dn-tx: #8E3020;  --ob-dn-ln: #E0BCAF;
  --ob-nu-bg: #F0E7D6;
}

/* --------------------------------------------------------------------------
   3. Высокий контраст: солнце, дешёвый монитор, слабое зрение. Границы
   намеренно тёмные — рамка видна, а не угадывается; пары текст/фон ≥7:1.
   -------------------------------------------------------------------------- */
html[data-ob-theme="contrast"] {
  --ob-primary: #00456B;
  --ob-primary-hover: #003452;
  --ob-link: #00456B;
  --ob-link-hover: #00354F;
  --ob-primary-soft: #D8E9F4;
  --ob-primary-soft-bg: #E8F2F9;
  --ob-primary-soft-line: #00456B;
  --ob-primary-soft-line-hover: #00456B;

  --ob-text: #000000;
  --ob-text-sub: #2B333D;
  --ob-text-muted: #2B333D;

  --ob-bg: #FFFFFF;
  --ob-surface: #FFFFFF;
  --ob-surface-alt: #F2F4F6;
  --ob-surface-hover: #F7F8FA;
  --ob-nav-hover: #EDEFF2;

  --ob-line: #5A6472;
  --ob-line-soft: #7C8794;

  --ob-success: #1B6E00;
  --ob-warn: #7A4E00;
  --ob-danger: #A5060A;

  --ob-on-accent: #FFFFFF;
  --ob-on-ghost: #FFFFFF;
  --ob-ghost: #00456B;
  --ob-ghost-hover: #003452;
  --ob-info-tx: #00456B;
  --ob-ok-bg: #DCF0D2;  --ob-ok-tx: #14520A;  --ob-ok-ln: #1B6E00;
  --ob-wn-bg: #F7E6BE;  --ob-wn-tx: #5C3B00;  --ob-wn-ln: #7A4E00;
  --ob-dn-bg: #F8D7D8;  --ob-dn-tx: #7A0407;  --ob-dn-ln: #A5060A;
  --ob-nu-bg: #E4E7EB;
}

/* --------------------------------------------------------------------------
   4. Монохромная: цвет не отвлекает от цифр; цветовая слепота; проверка
   перед печатью.
   -------------------------------------------------------------------------- */
html[data-ob-theme="mono"] {
  --ob-primary: #2E3236;
  --ob-primary-hover: #16181A;
  --ob-link: #33383D;
  --ob-link-hover: #4A5055;
  --ob-primary-soft: #E4E5E7;
  --ob-primary-soft-bg: #F1F2F3;
  --ob-primary-soft-line: #C4C7CA;
  --ob-primary-soft-line-hover: #A8ACB1;

  --ob-text: #16181A;
  --ob-text-sub: #55595E;
  --ob-text-muted: #55595E;

  --ob-bg: #F0F1F2;
  --ob-surface: #FFFFFF;
  --ob-surface-alt: #F5F6F7;
  --ob-surface-hover: #FAFAFB;
  --ob-nav-hover: #F0F1F2;

  --ob-line: #CBCDD1;
  --ob-line-soft: #DCDEE1;

  --ob-success: #3F4448;
  --ob-warn: #5E656B;
  --ob-danger: #16181A;

  --ob-on-accent: #FFFFFF;
  --ob-on-ghost: #FFFFFF;
  --ob-ghost: #4A5055;
  --ob-ghost-hover: #33383D;
  --ob-info-tx: #33383D;
  --ob-ok-bg: #E7E8EA;  --ob-ok-tx: #2A2E31;  --ob-ok-ln: #CFD1D4;
  --ob-wn-bg: #EDEEF0;  --ob-wn-tx: #3A3E42;  --ob-wn-ln: #CFD1D4;
  --ob-dn-bg: #E4E5E7;  --ob-dn-tx: #16181A;  --ob-dn-ln: #B5B9BD;
  --ob-nu-bg: #EBECEE;
}

/* --------------------------------------------------------------------------
   5. Переключатель темы в шапке: активная тема помечена галочкой, иконка
   кнопки показывает выбранную тему. Глиф ставится по html[data-ob-theme],
   поэтому правильная иконка видна сразу после загрузки.
   Коды из unicons.css: sun, moon, coffee, adjust-half, circle-layer.
   -------------------------------------------------------------------------- */
.ob-theme-toggle-icon { font-size: 17px; }

.ob-theme-toggle-icon::before { content: '\eb9d'; }
html[data-ob-theme="light"] .ob-theme-toggle-icon::before { content: '\eb9d'; }
html[data-ob-theme="dark"] .ob-theme-toggle-icon::before { content: '\eacc'; }
html[data-ob-theme="warm"] .ob-theme-toggle-icon::before { content: '\e909'; }
html[data-ob-theme="contrast"] .ob-theme-toggle-icon::before { content: '\e80f'; }
html[data-ob-theme="mono"] .ob-theme-toggle-icon::before { content: '\e8cb'; }

[data-ob-theme-pick] { position: relative; padding-right: 34px; }
[data-ob-theme-pick].is-active::after {
  content: '\2713';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--ob-primary);
}

/* ==========================================================================
   6. Оболочка hyper в НЕ светлой палитре.

   Селектор html[data-ob-theme]:not([data-ob-theme="light"]) — светлая
   палитра (и отсутствие выбора) оболочку не трогает. Для голых тегов
   (a, h1…h6) обёртка :where() — чтобы правило не перебивало классы
   компонентов, а только заменяло цвет по умолчанию.
   ========================================================================== */

/* 6.1 Фон страницы, шапка, текст */
html[data-ob-theme]:not([data-ob-theme="light"]) body,
html[data-ob-theme]:not([data-ob-theme="light"]) .content-page {
  background: var(--ob-bg);
  color: var(--ob-text);
}

html[data-ob-theme]:not([data-ob-theme="light"]) .navbar-custom {
  background: var(--ob-surface);
  box-shadow: none;
  border-bottom: 1px solid var(--ob-line);
}

html[data-ob-theme]:not([data-ob-theme="light"]) .project-nav-text,
html[data-ob-theme]:not([data-ob-theme="light"]) .navbar-custom .nav-link,
html[data-ob-theme]:not([data-ob-theme="light"]) .noti-icon,
html[data-ob-theme]:not([data-ob-theme="light"]) .account-user-name {
  color: var(--ob-text);
}

html[data-ob-theme]:not([data-ob-theme="light"]) .account-position { color: var(--ob-text-muted); }

html[data-ob-theme]:not([data-ob-theme="light"]) .nav-user {
  background-color: var(--ob-surface-alt);
  border-color: var(--ob-line);
}

:where(html[data-ob-theme]:not([data-ob-theme="light"])) a { color: var(--ob-link); }
:where(html[data-ob-theme]:not([data-ob-theme="light"])) a:hover { color: var(--ob-link-hover); }

:where(html[data-ob-theme]:not([data-ob-theme="light"])) :is(h1, h2, h3, h4, h5, h6) { color: var(--ob-text); }

html[data-ob-theme]:not([data-ob-theme="light"]) .page-title,
html[data-ob-theme]:not([data-ob-theme="light"]) .page-title-box .page-title,
html[data-ob-theme]:not([data-ob-theme="light"]) .breadcrumb-item,
html[data-ob-theme]:not([data-ob-theme="light"]) .breadcrumb-item a,
html[data-ob-theme]:not([data-ob-theme="light"]) label {
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .breadcrumb { background-color: transparent; }

html[data-ob-theme]:not([data-ob-theme="light"]) .text-muted { color: var(--ob-text-muted) !important; }
html[data-ob-theme]:not([data-ob-theme="light"]) .text-dark,
html[data-ob-theme]:not([data-ob-theme="light"]) .text-body { color: var(--ob-text) !important; }
html[data-ob-theme]:not([data-ob-theme="light"]) .text-primary { color: var(--ob-primary) !important; }
html[data-ob-theme]:not([data-ob-theme="light"]) .text-success { color: var(--ob-ok-tx) !important; }
html[data-ob-theme]:not([data-ob-theme="light"]) .text-warning { color: var(--ob-wn-tx) !important; }
html[data-ob-theme]:not([data-ob-theme="light"]) .text-danger { color: var(--ob-dn-tx) !important; }
html[data-ob-theme]:not([data-ob-theme="light"]) .text-info { color: var(--ob-info-tx) !important; }

/* Мобильная верхняя полоса остаётся светлой (#f2f3f8) — там тёмный текст
   и тёмный логотип по-прежнему единственно читаемые. */
html[data-ob-theme]:not([data-ob-theme="light"]) .mobile-topbar .text-dark { color: #313a46 !important; }

/* 6.2 Левое меню. В разметке data-leftbar-theme="dark", но hyper app.js
   по data-layout-config ("leftSideBarTheme":"light") переключает его
   в светлое: белая панель, шапка логотипа `#fff !important`, виден
   .logo-dark (тёмные чернила). Красим панель в палитру во всех не-светлых
   темах. */
html[data-ob-theme]:not([data-ob-theme="light"]) .left-side-menu {
  background: var(--ob-surface);
  border-right: 1px solid var(--ob-line);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .left-side-menu .logo {
  background: var(--ob-surface) !important;
}

html[data-ob-theme]:not([data-ob-theme="light"]) .side-nav .side-nav-link,
html[data-ob-theme]:not([data-ob-theme="light"]) .side-nav .side-nav-title,
html[data-ob-theme]:not([data-ob-theme="light"]) .side-nav-second-level li a,
html[data-ob-theme]:not([data-ob-theme="light"]) .side-nav-third-level li a,
html[data-ob-theme]:not([data-ob-theme="light"]) .side-nav-forth-level li a {
  color: var(--ob-text-sub);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .side-nav .side-nav-link:hover,
html[data-ob-theme]:not([data-ob-theme="light"]) .side-nav .side-nav-link:focus,
html[data-ob-theme]:not([data-ob-theme="light"]) .side-nav-second-level li a:hover,
html[data-ob-theme]:not([data-ob-theme="light"]) .side-nav-third-level li a:hover,
html[data-ob-theme]:not([data-ob-theme="light"]) .side-nav-forth-level li a:hover {
  color: var(--ob-primary);
}
/* У hyper у активного пункта !important — перебиваем тем же флагом. */
html[data-ob-theme]:not([data-ob-theme="light"]) .side-nav .mm-active > a {
  color: var(--ob-primary) !important;
}
html[data-ob-theme]:not([data-ob-theme="light"]) .metismenu ul {
  background-color: var(--ob-surface-alt);
}

/* QR-блок Telegram внизу панели: hyper заливает его #e5f1f8. */
html[data-ob-theme]:not([data-ob-theme="light"]) .left-side-menu .help-box {
  background-color: var(--ob-primary-soft);
  color: var(--ob-text-muted);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .left-side-menu .help-box a { color: var(--ob-link); }

/* Логотип в тёмной теме: показываем светлый вариант (.logo-light,
   alcotrack-light.svg — белые чернила) вместо .logo-dark. Остальные
   палитры светлые, там тёмные чернила верны. */
html[data-ob-theme="dark"] .left-side-menu .logo.logo-dark { display: none !important; }
html[data-ob-theme="dark"] .left-side-menu .logo.logo-light { display: block !important; }

/* Горизонтальный layout: верхнее меню под шапкой. */
html[data-ob-theme]:not([data-ob-theme="light"]) .topnav {
  background: var(--ob-surface);
  border-bottom: 1px solid var(--ob-line);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .topnav .navbar-nav .nav-link,
html[data-ob-theme]:not([data-ob-theme="light"]) .topnav .navbar-nav .dropdown-item { color: var(--ob-text-sub); }
html[data-ob-theme]:not([data-ob-theme="light"]) .topnav .navbar-nav .nav-link.active,
html[data-ob-theme]:not([data-ob-theme="light"]) .topnav .navbar-nav .nav-link:hover,
html[data-ob-theme]:not([data-ob-theme="light"]) .topnav .navbar-nav .dropdown-item.active { color: var(--ob-primary); }

/* Логотип с тёмными чернилами на потемневшей шапке/подвале: перекрашиваем
   фильтром в белый, а не подменой файла — путь пакета до Theme не зависит
   от того, как сервер раздаёт ui-packages. Мобильная полоса остаётся
   светлой, там тёмный логотип не трогаем. */
html[data-ob-theme="dark"] .navbar-custom .logo-alcotrack-dark,
html[data-ob-theme="dark"] .footer-logo-lg-img.logo-alcotrack-dark {
  filter: brightness(0) invert(1);
}
html[data-ob-theme="dark"] .navbar-custom .logo-alcotrack-dark-text::before { color: var(--ob-text); }
html[data-ob-theme="dark"] .navbar-custom .menu-logo-container { background-color: transparent; }

/* 6.3 Карточки, выпадающие меню, модальные окна, списки */
html[data-ob-theme]:not([data-ob-theme="light"]) .card,
html[data-ob-theme]:not([data-ob-theme="light"]) .dropdown-menu,
html[data-ob-theme]:not([data-ob-theme="light"]) .modal-content,
html[data-ob-theme]:not([data-ob-theme="light"]) .popover,
html[data-ob-theme]:not([data-ob-theme="light"]) .list-group-item {
  background: var(--ob-surface);
  color: var(--ob-text);
  border-color: var(--ob-line);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .card,
html[data-ob-theme]:not([data-ob-theme="light"]) .dropdown-menu,
html[data-ob-theme]:not([data-ob-theme="light"]) .modal-content {
  box-shadow: var(--ob-shadow-card);
}

html[data-ob-theme]:not([data-ob-theme="light"]) .card-header,
html[data-ob-theme]:not([data-ob-theme="light"]) .card-footer {
  background-color: var(--ob-surface-alt);
  border-color: var(--ob-line);
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .card-header a[data-toggle="collapse"],
html[data-ob-theme]:not([data-ob-theme="light"]) .card-header .header-title,
html[data-ob-theme]:not([data-ob-theme="light"]) .card-header .text-dark {
  color: var(--ob-text) !important;
}

html[data-ob-theme]:not([data-ob-theme="light"]) .modal-header,
html[data-ob-theme]:not([data-ob-theme="light"]) .modal-footer {
  border-color: var(--ob-line);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .close {
  color: var(--ob-text);
  text-shadow: none;
  opacity: .7;
}

html[data-ob-theme]:not([data-ob-theme="light"]) .dropdown-item,
html[data-ob-theme]:not([data-ob-theme="light"]) .dropdown-header { color: var(--ob-text); }
html[data-ob-theme]:not([data-ob-theme="light"]) .dropdown-item:hover,
html[data-ob-theme]:not([data-ob-theme="light"]) .dropdown-item:focus {
  background: var(--ob-nav-hover);
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .dropdown-divider { border-top-color: var(--ob-line); }

html[data-ob-theme]:not([data-ob-theme="light"]) hr,
html[data-ob-theme]:not([data-ob-theme="light"]) .border,
html[data-ob-theme]:not([data-ob-theme="light"]) .border-top,
html[data-ob-theme]:not([data-ob-theme="light"]) .border-bottom,
html[data-ob-theme]:not([data-ob-theme="light"]) .border-left,
html[data-ob-theme]:not([data-ob-theme="light"]) .border-right {
  border-color: var(--ob-line) !important;
}

/* Полоса локальных задач: в разметке у неё bg-white с !important. Класс
   .bg-white целиком не перекрашиваем — им же залита подложка QR-кода
   eGov Mobile в окне подписи, коду нужно белое поле. */
html[data-ob-theme]:not([data-ob-theme="light"]) .nav-local-tasks.bg-white {
  background-color: var(--ob-surface) !important;
}
html[data-ob-theme]:not([data-ob-theme="light"]) .nav-local-tasks > li > a { color: var(--ob-text-sub); }
html[data-ob-theme]:not([data-ob-theme="light"]) .nav-local-tasks > li > a.active {
  background-color: var(--ob-primary);
  color: var(--ob-on-accent);
}

/* .bg-light — светлая подложка: плитки файлов, <pre> и чаще всего
   readonly-поля — ядро рисует их `<div class='form-control bg-light'>`. */
html[data-ob-theme]:not([data-ob-theme="light"]) .bg-light {
  background-color: var(--ob-primary-soft) !important;
  color: var(--ob-text);
}

/* 6.4 Поля форм */
html[data-ob-theme]:not([data-ob-theme="light"]) .form-control,
html[data-ob-theme]:not([data-ob-theme="light"]) .custom-select {
  background-color: var(--ob-surface);
  border-color: var(--ob-line);
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .form-control:focus,
html[data-ob-theme]:not([data-ob-theme="light"]) .custom-select:focus {
  border-color: var(--ob-primary-soft-line-hover);
  box-shadow: 0 0 0 .15rem var(--ob-primary-soft);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .form-control::placeholder { color: var(--ob-text-muted); opacity: 1; }

/* Недоступные поля: hyper гасит их до почти невидимого серого. */
html[data-ob-theme]:not([data-ob-theme="light"]) .form-control:disabled,
html[data-ob-theme]:not([data-ob-theme="light"]) .form-control[readonly],
html[data-ob-theme]:not([data-ob-theme="light"]) .custom-select:disabled {
  background-color: var(--ob-surface-alt);
  color: var(--ob-text);
  opacity: 1;
}

html[data-ob-theme]:not([data-ob-theme="light"]) .input-group-text {
  background-color: var(--ob-surface-alt);
  border-color: var(--ob-line);
  color: var(--ob-text-sub);
}

html[data-ob-theme]:not([data-ob-theme="light"]) .custom-control-label::before {
  background-color: var(--ob-surface);
  border-color: var(--ob-line-soft);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--ob-primary);
  border-color: var(--ob-primary);
}

/* select2 (обе темы: default и bootstrap) */
html[data-ob-theme]:not([data-ob-theme="light"]) .select2-container .select2-selection,
html[data-ob-theme]:not([data-ob-theme="light"]) .select2-container--default .select2-selection--single,
html[data-ob-theme]:not([data-ob-theme="light"]) .select2-container--default .select2-selection--multiple,
html[data-ob-theme]:not([data-ob-theme="light"]) .select2-container--bootstrap .select2-selection {
  background-color: var(--ob-surface);
  border-color: var(--ob-line);
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .select2-container .select2-selection__rendered,
html[data-ob-theme]:not([data-ob-theme="light"]) .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .select2-container .select2-selection__placeholder { color: var(--ob-text-muted); }
html[data-ob-theme]:not([data-ob-theme="light"]) .select2-container--disabled .select2-selection,
html[data-ob-theme]:not([data-ob-theme="light"]) .select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: var(--ob-surface-alt);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .select2-container .select2-selection__choice {
  background-color: var(--ob-primary-soft);
  border-color: var(--ob-primary-soft-line);
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .select2-dropdown {
  background-color: var(--ob-surface);
  border-color: var(--ob-line);
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .select2-search__field,
html[data-ob-theme]:not([data-ob-theme="light"]) .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--ob-surface);
  border-color: var(--ob-line);
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .select2-results__option[aria-selected="true"],
html[data-ob-theme]:not([data-ob-theme="light"]) .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--ob-primary-soft);
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .select2-results__option--highlighted,
html[data-ob-theme]:not([data-ob-theme="light"]) .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--ob-primary);
  color: var(--ob-on-accent);
}

/* 6.5 Кнопки: в тёмной теме акцент светлее фона, текст на нём тёмный. */
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-primary {
  background-color: var(--ob-primary);
  border-color: var(--ob-primary);
  color: var(--ob-on-accent);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-primary:hover,
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-primary:focus,
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-primary:active {
  background-color: var(--ob-primary-hover);
  border-color: var(--ob-primary-hover);
  color: var(--ob-on-accent);
}

html[data-ob-theme]:not([data-ob-theme="light"]) .btn-info {
  background-color: var(--ob-ghost);
  border-color: var(--ob-ghost);
  color: var(--ob-on-ghost);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-info:hover,
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-info:focus {
  background-color: var(--ob-ghost-hover);
  border-color: var(--ob-ghost-hover);
  color: var(--ob-on-ghost);
}

html[data-ob-theme]:not([data-ob-theme="light"]) .btn-success {
  background-color: var(--ob-success);
  border-color: var(--ob-success);
  color: var(--ob-on-accent);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-warning {
  background-color: var(--ob-warn);
  border-color: var(--ob-warn);
  color: var(--ob-on-accent);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-danger {
  background-color: var(--ob-danger);
  border-color: var(--ob-danger);
  color: var(--ob-on-accent);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-success:hover,
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-warning:hover,
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-danger:hover {
  filter: brightness(.92);
  color: var(--ob-on-accent);
}

html[data-ob-theme]:not([data-ob-theme="light"]) .btn-secondary,
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-light,
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-white,
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-default {
  background-color: var(--ob-surface-alt);
  border-color: var(--ob-line);
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-secondary:hover,
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-light:hover,
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-white:hover,
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-default:hover {
  background-color: var(--ob-nav-hover);
  border-color: var(--ob-primary-soft-line-hover);
  color: var(--ob-text);
}

html[data-ob-theme]:not([data-ob-theme="light"]) .btn-outline-primary,
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-outline-info {
  background-color: transparent;
  border-color: var(--ob-primary);
  color: var(--ob-primary);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-outline-primary:hover,
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-outline-info:hover {
  background-color: var(--ob-primary);
  color: var(--ob-on-accent);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-outline-secondary,
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-outline-dark,
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-outline-light {
  background-color: transparent;
  border-color: var(--ob-line-soft);
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-outline-secondary:hover,
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-outline-dark:hover,
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-outline-light:hover {
  background-color: var(--ob-nav-hover);
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-outline-success { border-color: var(--ob-success); color: var(--ob-ok-tx); }
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-outline-warning { border-color: var(--ob-warn); color: var(--ob-wn-tx); }
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-outline-danger { border-color: var(--ob-danger); color: var(--ob-dn-tx); }
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-outline-success:hover { background-color: var(--ob-ok-bg); color: var(--ob-ok-tx); }
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-outline-warning:hover { background-color: var(--ob-wn-bg); color: var(--ob-wn-tx); }
html[data-ob-theme]:not([data-ob-theme="light"]) .btn-outline-danger:hover { background-color: var(--ob-dn-bg); color: var(--ob-dn-tx); }

html[data-ob-theme]:not([data-ob-theme="light"]) .btn-link { color: var(--ob-link); }

html[data-ob-theme]:not([data-ob-theme="light"]) .btn:disabled,
html[data-ob-theme]:not([data-ob-theme="light"]) .btn.disabled { opacity: .55; }

/* 6.6 Бейджи и алерты (включая hyper-варианты -lighten) */
html[data-ob-theme]:not([data-ob-theme="light"]) .badge-primary,
html[data-ob-theme]:not([data-ob-theme="light"]) .badge-primary-lighten,
html[data-ob-theme]:not([data-ob-theme="light"]) .badge-info,
html[data-ob-theme]:not([data-ob-theme="light"]) .badge-info-lighten { background-color: var(--ob-primary-soft); color: var(--ob-info-tx); }
html[data-ob-theme]:not([data-ob-theme="light"]) .badge-success,
html[data-ob-theme]:not([data-ob-theme="light"]) .badge-success-lighten { background-color: var(--ob-ok-bg); color: var(--ob-ok-tx); }
html[data-ob-theme]:not([data-ob-theme="light"]) .badge-warning,
html[data-ob-theme]:not([data-ob-theme="light"]) .badge-warning-lighten { background-color: var(--ob-wn-bg); color: var(--ob-wn-tx); }
html[data-ob-theme]:not([data-ob-theme="light"]) .badge-danger-lighten { background-color: var(--ob-dn-bg); color: var(--ob-dn-tx); }
html[data-ob-theme]:not([data-ob-theme="light"]) .badge-secondary,
html[data-ob-theme]:not([data-ob-theme="light"]) .badge-secondary-lighten,
html[data-ob-theme]:not([data-ob-theme="light"]) .badge-light,
html[data-ob-theme]:not([data-ob-theme="light"]) .badge-light-lighten,
html[data-ob-theme]:not([data-ob-theme="light"]) .badge-dark-lighten { background-color: var(--ob-nu-bg); color: var(--ob-text-sub); }

html[data-ob-theme]:not([data-ob-theme="light"]) .alert-primary,
html[data-ob-theme]:not([data-ob-theme="light"]) .alert-info { background-color: var(--ob-primary-soft); border-color: var(--ob-primary-soft-line); color: var(--ob-info-tx); }
html[data-ob-theme]:not([data-ob-theme="light"]) .alert-success { background-color: var(--ob-ok-bg); border-color: var(--ob-ok-ln); color: var(--ob-ok-tx); }
html[data-ob-theme]:not([data-ob-theme="light"]) .alert-warning { background-color: var(--ob-wn-bg); border-color: var(--ob-wn-ln); color: var(--ob-wn-tx); }
html[data-ob-theme]:not([data-ob-theme="light"]) .alert-danger { background-color: var(--ob-dn-bg); border-color: var(--ob-dn-ln); color: var(--ob-dn-tx); }
html[data-ob-theme]:not([data-ob-theme="light"]) .alert-secondary,
html[data-ob-theme]:not([data-ob-theme="light"]) .alert-light { background-color: var(--ob-nu-bg); border-color: var(--ob-line); color: var(--ob-text); }

/* Сообщение после сохранения (#postback-message в layout-ах) и прочие алерты,
   размеченные `alert … bg-white` — у bg-white !important, поэтому перебиваем
   тем же флагом и красим как обычный alert-info. */
html[data-ob-theme]:not([data-ob-theme="light"]) #postback-message,
html[data-ob-theme]:not([data-ob-theme="light"]) .alert.bg-white {
  background-color: var(--ob-primary-soft) !important;
  border-color: var(--ob-primary-soft-line) !important;
  color: var(--ob-info-tx) !important;
}

/* 6.7 Таблицы */
html[data-ob-theme]:not([data-ob-theme="light"]) .table { color: var(--ob-text); }
html[data-ob-theme]:not([data-ob-theme="light"]) .table th,
html[data-ob-theme]:not([data-ob-theme="light"]) .table td,
html[data-ob-theme]:not([data-ob-theme="light"]) .table thead th {
  border-color: var(--ob-line-soft);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .table thead th,
html[data-ob-theme]:not([data-ob-theme="light"]) .table .thead-light th,
html[data-ob-theme]:not([data-ob-theme="light"]) .table-centered thead th {
  background-color: var(--ob-surface-alt);
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .table-striped tbody tr:nth-of-type(odd) { background-color: var(--ob-surface-alt); }
html[data-ob-theme]:not([data-ob-theme="light"]) .table-hover tbody tr:hover {
  background-color: var(--ob-surface-hover);
  color: var(--ob-text);
}

/* 6.8 Пагинация, вкладки */
html[data-ob-theme]:not([data-ob-theme="light"]) .page-link {
  background-color: var(--ob-surface);
  border-color: var(--ob-line);
  color: var(--ob-link);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .page-link:hover { background-color: var(--ob-nav-hover); color: var(--ob-link-hover); }
html[data-ob-theme]:not([data-ob-theme="light"]) .page-item.active .page-link {
  background-color: var(--ob-primary);
  border-color: var(--ob-primary);
  color: var(--ob-on-accent);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .page-item.disabled .page-link {
  background-color: var(--ob-surface);
  border-color: var(--ob-line);
  color: var(--ob-text-muted);
}

html[data-ob-theme]:not([data-ob-theme="light"]) .nav-tabs { border-bottom-color: var(--ob-line); }
html[data-ob-theme]:not([data-ob-theme="light"]) .nav-tabs .nav-link { color: var(--ob-text-sub); }
html[data-ob-theme]:not([data-ob-theme="light"]) .nav-tabs .nav-link:hover { border-color: var(--ob-line-soft); }
html[data-ob-theme]:not([data-ob-theme="light"]) .nav-tabs .nav-link.active,
html[data-ob-theme]:not([data-ob-theme="light"]) .nav-tabs .nav-item.show .nav-link {
  background-color: var(--ob-surface);
  border-color: var(--ob-line) var(--ob-line) var(--ob-surface);
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .nav-pills .nav-link { color: var(--ob-text-sub); }
html[data-ob-theme]:not([data-ob-theme="light"]) .nav-pills .nav-link.active,
html[data-ob-theme]:not([data-ob-theme="light"]) .nav-pills .show > .nav-link {
  background-color: var(--ob-primary);
  color: var(--ob-on-accent);
}

/* --------------------------------------------------------------------------
   6.8.1 Шаги wizard (Yoda Wizard → hyper .form-wizard-header). Подложка
   шапки — #eef2f7 из wizard-form.css, в не-светлой палитре на ней терялся
   текст неактивных шагов. Активный шаг — акцент, пройденные/доступные —
   обычный текст, недоступные — приглушённый.
   -------------------------------------------------------------------------- */
html[data-ob-theme]:not([data-ob-theme="light"]) .form-wizard-header {
  background-color: var(--ob-surface-alt);
  border: 1px solid var(--ob-line);
  border-radius: .25rem;
}
html[data-ob-theme]:not([data-ob-theme="light"]) .form-wizard-header .nav-link,
html[data-ob-theme]:not([data-ob-theme="light"]) .form-wizard-header li > a {
  background-color: transparent;
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .form-wizard-header .nav-link:hover,
html[data-ob-theme]:not([data-ob-theme="light"]) .form-wizard-header li > a:hover {
  background-color: var(--ob-nav-hover);
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .form-wizard-header .nav-link.disabled,
html[data-ob-theme]:not([data-ob-theme="light"]) .form-wizard-header .disabled > a,
html[data-ob-theme]:not([data-ob-theme="light"]) .form-wizard-header .nav-link:not([href]) {
  background-color: transparent;
  color: var(--ob-text-muted);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .form-wizard-header .nav-link.active,
html[data-ob-theme]:not([data-ob-theme="light"]) .form-wizard-header .active > a,
html[data-ob-theme]:not([data-ob-theme="light"]) .form-wizard-header .show > .nav-link {
  background-color: var(--ob-primary);
  color: var(--ob-on-accent);
  font-weight: 600;
}
html[data-ob-theme]:not([data-ob-theme="light"]) .form-wizard-header .nav-link.active i,
html[data-ob-theme]:not([data-ob-theme="light"]) .form-wizard-header .active > a i { color: inherit; }

/* Аккордеоны форм: hyper-fix красит шапку `#fff !important`, текст же
   по 6.3 светлый — перебить можно только тем же !important. */
html[data-ob-theme]:not([data-ob-theme="light"]) .custom-accordion .card-header {
  background-color: var(--ob-surface-alt) !important;
  color: var(--ob-text);
}

/* --------------------------------------------------------------------------
   6.8.2 SearchTextField (custom/ui-packages/search-text-field). Список
   подсказок приходит с сервера со style="background:#fff", а пункты
   получают фон наведения/выбора инлайном из JS — поэтому !important.
   -------------------------------------------------------------------------- */
html[data-ob-theme]:not([data-ob-theme="light"]) .search-text-field-options,
html[data-ob-theme]:not([data-ob-theme="light"]) .search-tf-suggest {
  background-color: var(--ob-surface) !important;
  border-color: var(--ob-line) !important;
  color: var(--ob-text);
  box-shadow: var(--ob-shadow-card) !important;
}
html[data-ob-theme]:not([data-ob-theme="light"]) .search-text-field-option,
html[data-ob-theme]:not([data-ob-theme="light"]) .search-tf-suggest-item {
  background-color: transparent !important;
  border-bottom-color: var(--ob-line-soft) !important;
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .search-text-field-option:hover,
html[data-ob-theme]:not([data-ob-theme="light"]) .search-tf-suggest-item:hover {
  background-color: var(--ob-nav-hover) !important;
}
html[data-ob-theme]:not([data-ob-theme="light"]) .search-text-field-option.is-active {
  background-color: var(--ob-primary-soft) !important;
}
html[data-ob-theme]:not([data-ob-theme="light"]) .search-text-field-loading {
  border-color: var(--ob-line);
  border-top-color: var(--ob-primary);
}

/* --------------------------------------------------------------------------
   6.9 Нативные контролы (чекбоксы, календарь input[type=date], скроллбары)
   браузер рисует по color-scheme — в тёмной палитре они должны быть тёмными.
   -------------------------------------------------------------------------- */
html[data-ob-theme="dark"] { color-scheme: dark; }

/* ==========================================================================
   6.10 custom-table (UiCorePackages/custom/ui-packages/custom-table).

   Контейнер приходит с сервера как `#ct-container.bg-white` (у bg-white
   !important), а custom-table.js вшивает свои <style> с #fff / #f8f9fa /
   #e9ecef для sticky-шапки, строки итогов, мультиселекта и окна колонок.
   Перекрашиваем те же роли в палитру.
   ========================================================================== */
html[data-ob-theme]:not([data-ob-theme="light"]) #ct-container,
html[data-ob-theme]:not([data-ob-theme="light"]) #ct-container.bg-white {
  background-color: var(--ob-surface) !important;
  color: var(--ob-text);
}

/* Таблица: тело, sticky-шапка, sticky-итоги, рамка скролла. */
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-table-scroll {
  border-color: var(--ob-line);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-table,
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-table tbody td {
  background-color: var(--ob-surface);
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-table-scroll .ct-table thead th,
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-table thead th {
  background-color: var(--ob-surface-alt);
  color: var(--ob-text);
  border-color: var(--ob-line);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-table-scroll .ct-table tfoot td,
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-table .ct-sum-row,
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-table .ct-sum-row > td {
  background-color: var(--ob-nu-bg);
  color: var(--ob-text);
  border-color: var(--ob-line);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-table.table-bordered,
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-table.table-bordered th,
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-table.table-bordered td {
  border-color: var(--ob-line);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-table tbody tr:hover > td { background-color: var(--ob-surface-hover); }

/* Дочерние строки (bg-light → primary-soft по 6.3) — оставляем отличимыми
   от родительских, текст в них тот же. */
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-table .ct-child-row > td {
  background-color: var(--ob-primary-soft);
  color: var(--ob-text);
}

html[data-ob-theme]:not([data-ob-theme="light"]) .ct-table a { color: var(--ob-link); }
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-table a:hover { color: var(--ob-link-hover); }
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-expand-icon,
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-expand-icon i { color: var(--ob-primary); }

/* Панель фильтров и кнопок. */
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-filter-panel .form-label,
html[data-ob-theme]:not([data-ob-theme="light"]) #ct-container .form-check,
html[data-ob-theme]:not([data-ob-theme="light"]) #ct-container .form-check label {
  color: var(--ob-text-sub);
}

/* Мультиселект фильтра. */
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-ms-trigger {
  background-color: var(--ob-surface);
  border-color: var(--ob-line);
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-ms-trigger:hover { border-color: var(--ob-primary-soft-line-hover); }
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-ms-trigger::after { border-top-color: var(--ob-text-muted); }
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-ms-drop {
  background-color: var(--ob-surface);
  border-color: var(--ob-line);
  color: var(--ob-text);
  box-shadow: var(--ob-shadow-card);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-ms-drop::before { border-bottom-color: var(--ob-line); }
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-ms-item { color: var(--ob-text); }
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-ms-item:hover { background-color: var(--ob-nav-hover); }

/* Панель пагинации (bg-light + border). */
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-pagination-bar {
  background-color: var(--ob-surface-alt) !important;
  border-color: var(--ob-line) !important;
  color: var(--ob-text);
}

/* Окно выбора колонок. */
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-columns-modal,
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-columns-modal.bg-white {
  background-color: var(--ob-surface) !important;
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-columns-dnd-col { border-color: var(--ob-line); }
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-columns-dnd-col-title {
  background-color: var(--ob-surface-alt);
  border-bottom-color: var(--ob-line);
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-columns-dnd-item {
  background-color: var(--ob-surface);
  border-color: var(--ob-line-soft);
  color: var(--ob-text);
}
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-columns-dnd-list.ct-drop-over { background-color: var(--ob-primary-soft); }

/* Ручки ресайза колонок: синий bootstrap-5 заменяем акцентом палитры. */
html[data-ob-theme]:not([data-ob-theme="light"]) .ct-col-resize-handle {
  background: var(--ob-primary-soft);
  border-right-color: var(--ob-primary-soft-line-hover);
}

/* --------------------------------------------------------------------------
   7. Печать — всегда в светлой палитре, какая бы тема ни была выбрана.
   -------------------------------------------------------------------------- */
@media print {
  html[data-ob-theme] {
    --ob-primary: #006196;
    --ob-primary-hover: #00507E;
    --ob-link: #1B6E9C;
    --ob-link-hover: #2D8DC1;
    --ob-primary-soft: #E5F1F8;
    --ob-primary-soft-bg: #F4FAFD;
    --ob-primary-soft-line: #CFE2EE;
    --ob-primary-soft-line-hover: #9FC9E0;

    --ob-text: #2A2C31;
    --ob-text-sub: #64717E;
    --ob-text-muted: #64717E;

    --ob-bg: #FFFFFF;
    --ob-surface: #FFFFFF;
    --ob-surface-alt: #F7FAFC;
    --ob-surface-hover: #FAFCFD;
    --ob-nav-hover: #F6F9FB;

    --ob-line: #E4E9F0;
    --ob-line-soft: #EAEFF4;

    --ob-success: #52C41A;
    --ob-warn: #FAAD14;
    --ob-danger: #FF4D4F;

    --ob-on-accent: #FFFFFF;
    --ob-on-ghost: #FFFFFF;
    --ob-ghost: #2D8DC1;
    --ob-ghost-hover: #2680B2;
    --ob-info-tx: #1E6E9C;
    --ob-ok-bg: #EAF7E4;  --ob-ok-tx: #2F7A0D;  --ob-ok-ln: #CDEBD6;
    --ob-wn-bg: #FFF6E0;  --ob-wn-tx: #9A6B00;  --ob-wn-ln: #F5DFA8;
    --ob-dn-bg: #FFECEC;  --ob-dn-tx: #D4383A;  --ob-dn-ln: #F5C6C7;
    --ob-nu-bg: #F1F5F9;

    --ob-shadow-card: none;
  }

  html[data-ob-theme] body,
  html[data-ob-theme] .content-page,
  html[data-ob-theme] .card,
  html[data-ob-theme] .table {
    background: #FFFFFF !important;
    color: #000000 !important;
  }
}