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

   1. переменные --tblr-* (45 штук, опись 28.09) смотрят на токены
      дизайн-системы;
   2. классы Tabler, которых нет в Bootstrap и в дизайн-системе (36 штук);
   3. оформление содержимого из brand.css (курсы, уроки, вход, выбор цвета)
      лежит рядом, в brand-content.css, и подключается отсюда.

   Когда страниц на старых именах не останется, файл уйдёт целиком.
   ========================================================================== */
@import url("brand-content.b35e7b29d801.css");

/* ------------------------------------------------------ 1. переменные */
:root,
[data-bs-theme] {
  --tblr-primary: var(--bs-primary);
  --tblr-primary-rgb: var(--bs-primary-rgb);
  --tblr-primary-fg: var(--primary-contrast);
  --tblr-primary-lt: color-mix(in srgb, var(--bs-primary) var(--tint), var(--paper));
  /* У Tabler «secondary» это приглушённый текст, а не серая кнопка */
  --tblr-secondary: var(--bs-secondary-color);
  --tblr-secondary-rgb: var(--bs-secondary-rgb);
  --tblr-muted: var(--bs-secondary-color);
  --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-color-translucent: var(--bs-border-color-translucent);
  --tblr-border-radius: var(--bs-border-radius);
  --tblr-border-radius-sm: var(--bs-border-radius-sm);
  --tblr-border-radius-lg: var(--bs-border-radius-lg);
  --tblr-border-radius-xl: var(--bs-border-radius-xl);
  --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-font-weight-medium: var(--fw-medium);
  --tblr-box-shadow-sm: var(--bs-box-shadow-sm);
  --tblr-box-shadow-card: var(--bs-box-shadow);
  --tblr-shadow-dropdown: var(--bs-box-shadow-lg);
  --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;
  --tblr-yellow-rgb: 245, 159, 0;
  /* Фирменные из brand.css, на них ссылается оформление содержимого */
  --brand-ink: #0a0f17;
  --brand-blue: #0088ff;
  --brand-blue-deep: #0071d6;
  --brand-mute: #c4c6cf;
  --brand-lime: #c1f742;
  --brand-lime-deep: #567312;
  --brand-surface: var(--gray-50);
}

/* ------------------------------------------------------ 2. классы Tabler */
.row-cards { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
.row-deck > .col, .row-deck > [class*="col-"] { display: flex; align-items: stretch; }
.row-deck > .col > .card, .row-deck > [class*="col-"] > .card { flex: 1 1 auto; }
.w-1 { width: 1% !important; }
.progress-sm { height: 0.25rem; }
.subheader {
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.4px;
  line-height: 1.375;
  text-transform: uppercase;
}
.form-footer { margin-top: 1.5rem; }
.page-center { display: flex; flex-direction: column; justify-content: center; min-height: 100%; }
.container-tight { width: 100%; max-width: 30rem; margin-inline: auto; padding-inline: var(--gutter); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.btn-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.icon { width: 1.25rem; height: 1.25rem; stroke-width: 1.75; vertical-align: -0.2em; }
.card-md > .card-body { padding: 2rem; }
.card-status-top { position: absolute; inset-inline: 0; top: 0; height: 2px; border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0; }
.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: #fff !important; }
.bg-green { background-color: var(--success-fill) !important; color: #fff !important; }
.bg-azure { background-color: var(--info-fill) !important; color: #fff !important; }
.bg-purple-lt { background-color: color-mix(in srgb, #7c3aed var(--tint), var(--paper)) !important; color: #6d28d9 !important; }
.bg-dark-lt { background-color: color-mix(in srgb, var(--base) 10%, var(--paper)) !important; color: var(--bs-heading-color) !important; }
[data-bs-theme="dark"] .bg-purple-lt { color: #c4a5fb !important; }
.text-green { color: var(--bs-success-text-emphasis) !important; }
.text-orange { color: var(--bs-warning-text-emphasis) !important; }

/* Сетка «подпись — значение» (Tabler datagrid) */
.datagrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.25rem 1.5rem; }
.datagrid-title {
  margin-bottom: 0.25rem;
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Состояние точкой с подписью (Tabler status) */
.status {
  --status-color: var(--bs-secondary-color);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.5rem;
  padding: 0 0.625rem;
  border-radius: 50rem;
  background: color-mix(in srgb, var(--status-color) var(--tint), var(--paper));
  color: var(--status-color);
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
}
.status-lite { padding: 0; background: transparent; color: var(--bs-body-color); }
.status::before { content: none; }
.status-lite::before,
.status > .status-dot:only-child { content: ""; }
.status-green { --status-color: var(--bs-success-text-emphasis); }
.status-yellow { --status-color: var(--bs-warning-text-emphasis); }
.status-secondary { --status-color: var(--bs-secondary-color); }
.status-lite::before {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--status-color);
}

/* Поле со значком внутри (Tabler input-icon) */
.input-icon { position: relative; }
.input-icon .form-control:not(:first-child) { padding-inline-start: 2.5rem; }
.input-icon .form-control:not(:last-child) { padding-inline-end: 2.5rem; }
.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: 0.5rem; 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 1rem;
  border: 1px solid var(--input-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--paper);
  color: var(--bs-heading-color);
  font-size: 0.9375rem;
  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: 0 0 0 0.2rem var(--ring); }
.form-selectgroup-pills .form-selectgroup-label { border-radius: 50rem; }
.form-selectgroup-boxes .form-selectgroup-label { padding: 1rem; text-align: start; }
.form-selectgroup-boxes .form-selectgroup-input:checked + .form-selectgroup-label { color: inherit; }
.form-selectgroup-check {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  border: 2px solid var(--gray-600);
  border-radius: 0.267em;
  vertical-align: middle;
}
.form-selectgroup-input[type="radio"] + .form-selectgroup-label .form-selectgroup-check { border-radius: 50%; }
.form-selectgroup-input:checked + .form-selectgroup-label .form-selectgroup-check {
  border-color: var(--bs-primary);
  background: var(--bs-primary) var(--check-img) center / 80% no-repeat;
}

/* Значки 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: 0.5rem; }

/* Размер аватара из старой разметки (core/_avatar.html: avatar-md) */
.avatar-md { --initial: 0.8125rem; width: 2.25rem; height: 2.25rem; font-size: 0.8125rem; }
.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-white):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: 1rem; }
.card-sm > .card-header, .card-sm > .card-footer { padding: 0.75rem 1rem; }

/* Полоса прогресса курса без цвета курса была невидимой */
.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: 0 0 0 0.2rem var(--ring); }
.form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 0.2rem var(--ring); }

/* Значки из 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: 0.125rem; color: var(--bs-secondary-color); font-size: 0.8125rem; }