/* ==========================================================================
   Совместимость с именами Tabler
   --------------------------------------------------------------------------
   Страницы кабинета и стили разделов (crm.css, bots/*.css, video/*.css,
   lesson.css) написаны под Tabler. Этот файл учит новую основу тому,
   на что они опираются:

   1. переменные --tblr-* смотрят на токены дизайн-системы (таблица
      «Имена старого вида» в uborka: скругления на --radius-*, а не на
      Bootstrap-двойников);
   2. классы Tabler, которых нет в Bootstrap и в дизайн-системе;
   3. оформление содержимого (курсы, уроки, выбор цвета) лежит рядом,
      в brand-content.css. Страницы грузят его своей ссылкой перед этим
      файлом, а не импортом отсюда: тот стоил лишнего круга до сервера
      перед первой отрисовкой (apps/ui2/test_compat_import.py).

   Со снятием старого вида слой не ушёл: на нём стоят живые страницы.
   Лишнее вычищено в ноябре 2026, новых имён сюда не добавлять. Когда
   страниц на старых именах не останется, файл уйдёт целиком.
   ========================================================================== */

/* ------------------------------------------------------ 1. переменные */
:root,
[data-bs-theme] {
  --tblr-primary: var(--bs-primary);
  --tblr-primary-rgb: var(--bs-primary-rgb);
  --tblr-primary-fg: var(--primary-contrast);
  /* У Tabler «secondary» это приглушённый текст, а не серая кнопка */
  --tblr-secondary: var(--bs-secondary-color);
  --tblr-secondary-rgb: var(--bs-secondary-rgb);
  --tblr-body-color: var(--bs-body-color);
  --tblr-body-color-rgb: var(--bs-body-color-rgb);
  --tblr-body-bg: var(--bs-body-bg);
  --tblr-bg-surface: var(--paper);
  --tblr-bg-surface-secondary: var(--gray-50);
  --tblr-bg-surface-tertiary: var(--gray-75);
  --tblr-bg-forms: var(--paper);
  --tblr-border-color: var(--bs-border-color);
  --tblr-border-color-dark: var(--input-border-color);
  --tblr-border-radius: var(--radius-md);
  --tblr-border-radius-sm: var(--radius-sm);
  --tblr-border-radius-lg: var(--radius-lg);
  --tblr-link-color: var(--bs-link-color);
  --tblr-font-sans-serif: var(--bs-font-sans-serif);
  --tblr-font-monospace: var(--bs-font-monospace);
  --tblr-font-weight-bold: 600;
  --tblr-box-shadow-sm: var(--bs-box-shadow-sm);
  --tblr-box-shadow-card: var(--bs-box-shadow);
  --tblr-card-cap-padding-x: 1.5rem;
  --tblr-success: var(--bs-success);
  --tblr-success-rgb: var(--bs-success-rgb);
  --tblr-danger: var(--bs-danger);
  --tblr-danger-rgb: var(--bs-danger-rgb);
  --tblr-warning: var(--bs-warning);
  --tblr-warning-rgb: var(--bs-warning-rgb);
  --tblr-warning-text: var(--bs-warning-text-emphasis);
  --tblr-warning-text-emphasis: var(--bs-warning-text-emphasis);
  --tblr-info: var(--bs-info);
  --tblr-dark: var(--bs-heading-color);
  --tblr-light: var(--gray-50);
  /* Именованные цвета Tabler: те же оттенки, что у него */
  --tblr-blue: #066fd1;
  --tblr-azure: #4299e1;
  --tblr-purple: #ae3ec9;
  --tblr-orange: #f76707;
  --tblr-green: #2fb344;
  --tblr-red: #d63939;
  --tblr-yellow: #f59f00;
  /* Фирменные, на них ссылается оформление содержимого */
  --brand-ink: #0a0f17;
  --brand-blue: #0088ff;
  --brand-blue-deep: #0071d6;
  --brand-lime: #c1f742;
}

/* ------------------------------------------------------ 2. классы Tabler */
.row-cards { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
.w-1 { width: 1% !important; }
.progress-sm { height: 0.25rem; }
.subheader {
  color: var(--bs-secondary-color);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.4px;
  line-height: 1.375;
  text-transform: uppercase;
}
.btn-ghost-light { color: var(--paper); background: transparent; border-color: transparent; }
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.12); color: var(--paper); }

/* Цвета Tabler по именам: заливка и подложка */
.bg-red { background-color: var(--danger-fill) !important; color: var(--danger-on) !important; }
.bg-green { background-color: var(--success-fill) !important; color: var(--success-on) !important; }
.bg-azure { background-color: var(--info-fill) !important; color: var(--info-on) !important; }
.bg-purple-lt { background-color: color-mix(in srgb, #7c3aed var(--tint), var(--paper)) !important; color: #6d28d9 !important; }
[data-bs-theme="dark"] .bg-purple-lt { color: #c4a5fb !important; }
.text-green { color: var(--bs-success-text-emphasis) !important; }

/* Поле со значком внутри (Tabler input-icon) */
.input-icon { position: relative; }
.input-icon .form-control:not(:first-child) { padding-inline-start: var(--sp-10); }
.input-icon .form-control:not(:last-child) { padding-inline-end: var(--sp-10); }
.input-icon-addon {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  color: var(--bs-secondary-color);
  pointer-events: none;
}
.input-icon-addon:last-child { inset-inline: auto 0; }

/* Выбор плитками (Tabler form-selectgroup) */
.form-selectgroup { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; }
.form-selectgroup-item { position: relative; display: block; margin: 0; cursor: pointer; }
.form-selectgroup-input { position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; }
.form-selectgroup-label {
  position: relative;
  display: block;
  min-width: calc(1.5rem + 1.25rem);
  margin: 0;
  padding: 0.4375rem var(--sp-4);
  border: 1px solid var(--input-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--paper);
  color: var(--bs-heading-color);
  font-size: var(--fs-base);
  line-height: 1.375;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.form-selectgroup-label:hover { border-color: var(--input-hover-border-color, var(--bs-primary)); }
.form-selectgroup-input:checked + .form-selectgroup-label {
  border-color: var(--bs-primary);
  background: color-mix(in srgb, var(--bs-primary) var(--tint), var(--paper));
  color: var(--primary-text);
}
.form-selectgroup-input:focus-visible + .form-selectgroup-label { box-shadow: var(--focus-shadow); }
.form-selectgroup-pills .form-selectgroup-label { border-radius: var(--radius-pill); }

/* Значки Tabler, вставленные разметкой (core/_icon.html) */
.lms-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; vertical-align: -0.25em; }
.btn .lms-icon { width: 1.125rem; height: 1.125rem; }

/* Шапка страницы (Tabler page-header, page-pretitle, page-title) */
.page-header { margin-top: 0; }
.page-header .row { --bs-gutter-y: 0.75rem; }
.page-title { display: flex; align-items: center; gap: var(--sp-2); }

/* Размер аватара Tabler (avatar-md) */
.avatar-md { --initial: var(--fs-sm); width: 2.25rem; height: 2.25rem; font-size: var(--fs-sm); }
.avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

/* Шапка страницы на разметке Tabler: внутри ряд (.row > .col + .col-auto).
   У дизайн-системы шапка сама гибкая, поэтому ряд растягиваем на всю
   ширину, иначе кнопка действия прилипает к заголовку. */
.page-header > .row,
.page-header > .container-xl > .row,
.page-header > .container > .row { flex: 1 1 100%; margin-inline: calc(var(--bs-gutter-x) * -0.5); }
.page-header > .container-xl, .page-header > .container { flex: 1 1 100%; padding: 0; max-width: none; }

/* Голая кнопка class="btn" без цвета: её создают скрипты разделов
   (bots/editor.js, simulator.js и другие). У Tabler она была серой
   с рамкой, у Bootstrap это просто текст. Даём вид мягкой серой.
   Отбор по классам цвета через [class*="-…"]: так мимо проходят и
   btn-primary, и btn-soft-primary, и btn-outline-danger, а btn-sm и
   btn-icon (размер и форма) правило не выключают. */
.btn:where(:not([class*="-primary"]):not([class*="-secondary"]):not([class*="-success"]):not([class*="-info"]):not([class*="-warning"]):not([class*="-danger"]):not([class*="-light"]):not([class*="-dark"]):not(.btn-link):not(.btn-close)) {
  --bs-btn-color: var(--bs-heading-color);
  --bs-btn-bg: color-mix(in srgb, var(--base) 7%, var(--paper));
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-heading-color);
  --bs-btn-hover-bg: color-mix(in srgb, var(--base) 12%, var(--paper));
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--bs-heading-color);
  --bs-btn-active-bg: color-mix(in srgb, var(--base) 14%, var(--paper));
  --bs-btn-active-border-color: transparent;
  --ripple: var(--base);
}

/* Кружок с инициалами (core/_avatar.html): как у Vuexy, подложка 16 %
   цвета и буквы тем же цветом, притемнённым ради контраста. Цвет по имени
   считает core/avatars.py (восемь средних тонов). */
.avatar-initials {
  background: color-mix(in srgb, var(--avatar-color, var(--bs-secondary-color)) 16%, var(--paper));
  /* 78 % давали 3.9:1 у жёлтого и зелёного; 62 % дают от 4.8:1 */
  color: color-mix(in srgb, var(--avatar-color, var(--bs-secondary-color)) 62%, #000);
}
[data-bs-theme="dark"] .avatar-initials {
  background: color-mix(in srgb, var(--avatar-color, var(--bs-secondary-color)) 24%, var(--paper));
  /* 70 % цвета давали 3.2:1 у фиолетового; 45 % дают от 5:1 у всех восьми */
  color: color-mix(in srgb, var(--avatar-color, var(--bs-secondary-color)) 45%, #fff);
}

/* Фиолетовый Tabler (метки ИИ в продажах) в тёмной теме светлее:
   #ae3ec9 на тёмной бумаге 2.7:1 */
[data-bs-theme="dark"] { --tblr-purple: #dc9cec; }

/* Редактор Quill: значки панели зашиты цветом #444 и в тёмной теме не
   видны (1.3:1). Красим их цветом текста, под мышью и выбранные цветом
   школы, как остальные кнопки. */
/* [data-ui] поднимает вес: quill.snow.css подключается после и красит #444 */
[data-ui] .ql-snow.ql-toolbar button, [data-ui] .ql-snow .ql-picker, [data-ui] .ql-snow .ql-picker-label { color: var(--bs-body-color); }
.ql-snow .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-picker-label.ql-active .ql-stroke, .ql-snow .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-picker-item.ql-selected .ql-stroke { stroke: currentColor; }
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-picker-label:hover .ql-fill,
.ql-snow .ql-picker-label.ql-active .ql-fill { fill: currentColor; }
.ql-snow.ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-picker-label:hover, .ql-snow .ql-picker-label.ql-active,
.ql-snow .ql-picker-item:hover, .ql-snow .ql-picker-item.ql-selected { color: var(--primary-text); }
.ql-snow .ql-picker-options { background: var(--paper); border-color: var(--bs-border-color); }
.ql-snow .ql-editor.ql-blank::before, .ql-editor.ql-blank::before { color: var(--bs-secondary-color); }

/* Значки из core/_icon.html в пунктах меню и квадратных кнопках */
.dropdown-item .lms-icon { width: 1.375rem; height: 1.375rem; }
.btn-icon .lms-icon { width: 1.25rem; height: 1.25rem; }
.btn-icon.btn-sm .lms-icon { width: 1.125rem; height: 1.125rem; }

/* Маленькая карточка Tabler (card-sm): её создаёт lesson_editor.js у
   блоков видео, картинки, файла и теста */
.card-sm > .card-body { padding: var(--sp-4); }
.card-sm > .card-header, .card-sm > .card-footer { padding: var(--sp-3) var(--sp-4); }

/* Полоса прогресса курса без цвета курса была невидимой */
.progress-course .progress-bar { background-color: var(--course-color, var(--bs-primary)); }

/* Ползунок (form-range): у Bootstrap бегунок синий литералом */
.form-range::-webkit-slider-thumb { background-color: var(--bs-primary); }
.form-range::-moz-range-thumb { background-color: var(--bs-primary); }
.form-range::-webkit-slider-runnable-track { background-color: color-mix(in srgb, var(--base) 12%, var(--paper)); }
.form-range::-moz-range-track { background-color: color-mix(in srgb, var(--base) 12%, var(--paper)); }
.form-range:focus::-webkit-slider-thumb { box-shadow: var(--focus-shadow); }
.form-range:focus::-moz-range-thumb { box-shadow: var(--focus-shadow); }

/* Значки из core/_icon.html внутри деталей дизайн-системы */
.avatar .lms-icon { width: 50%; height: 50%; }
.empty-icon .lms-icon { width: 2rem; height: 2rem; }
.alert-icon .lms-icon { width: 1.25rem; height: 1.25rem; }

/* Подпись под флажком или переключателем (Tabler form-check-description) */
.form-check-description { display: block; margin-top: var(--sp-0-5); color: var(--bs-secondary-color); font-size: var(--fs-sm); }