/* =================== Конструктор создан Kolobdur при использовании СhatGpt / The constructor was created by Kolobdur using ChatGPT =================== */

/* =================== Стиль конструктора. Вкладки. =================== */

/* === Standard Vertical Tabs (strict)
   Работает с разметкой BBCode → .tabs / .tabcontent
   Также поддержаны алиасы .bb-tabs / .bb-tab-panes
*/

/* ──────────────────────────────────────────────────────────────
   ХОСТ И ПЕРЕМЕННЫЕ ТЕМЫ
   Переопределяй переменные на .tabs / .bb-tabs точечно в нужном месте.
   Пример: .tabs { --vt-w: 200px; --vt-accent: #0b57d0; }
   ────────────────────────────────────────────────────────────── */
.tabs, .bb-tabs {
  /* Ширина левой колонки (список вкладок). Рекомендуемый диапазон: 160–300px */
  --vt-w: 100%;

  /* Цвет тонких разделительных границ и рамок панелей (монохром) */
  --vt-border: #d6d6d6;

  /* Фон области списка вкладок (левая колонка) */
  --vt-bg: #f6f7f8;

  /* Фон пункта вкладок при наведении курсора */
  --vt-hover: #eef1f3;

  /* Фон активной вкладки (сама строка в списке) */
  --vt-active-bg: #ffffff;

  /* Акцентный цвет: полоса слева у активной вкладки, обводка при фокусе */
  --vt-accent: #2b76d2;

  /* Базовый цвет текста для вкладок и контента */
  --vt-text: #222;

  /* Базовая вёрстка левой колонки */
  display: inline-block;
  vertical-align: top;
  width: var(--vt-w);
  background: var(--vt-bg);
  border-right: 1px solid var(--vt-border);
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--vt-text);
  box-sizing: border-box;
}

/* ──────────────────────────────────────────────────────────────
   ЭЛЕМЕНТЫ ВКЛАДОК (левая колонка)
   ────────────────────────────────────────────────────────────── */
.tabs .tab,
.tabs [role="tab"],
.tabs .tabs__item,
.tabs a,
.tabs button,
.bb-tabs .tab,
.bb-tabs [role="tab"],
.bb-tabs .tabs__item,
.bb-tabs a,
.bb-tabs button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-left: 3px solid transparent; /* полоса-акцент появится у активной */
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  box-sizing: border-box;
}

.tabs .tab:hover,
.tabs [role="tab"]:hover,
.tabs .tabs__item:hover,
.tabs a:hover,
.tabs button:hover,
.bb-tabs .tab:hover,
.bb-tabs [role="tab"]:hover,
.bb-tabs .tabs__item:hover,
.bb-tabs a:hover,
.bb-tabs button:hover {
  background: var(--vt-hover); /* фон строки при наведении */
}

/* Активное/выбранное состояние вкладки */
.tabs .tab.active,
.tabs .tab.is-active,
.tabs [role="tab"][aria-selected="true"],
.tabs .tabs__item.active,
.tabs a.active,
.tabs button.active,
.bb-tabs .tab.active,
.bb-tabs .tab.is-active,
.bb-tabs [role="tab"][aria-selected="true"],
.bb-tabs .tabs__item.active,
.bb-tabs a.active,
.bb-tabs button.active {
  background: var(--vt-active-bg);
  border-left-color: var(--vt-accent); /* акцентная полоса слева */
  font-weight: 600;
  color: #111;
}

/* Видимая клавиатурная обводка по акцентному цвету */
.tabs .tab:focus-visible,
.tabs [role="tab"]:focus-visible,
.tabs .tabs__item:focus-visible,
.tabs a:focus-visible,
.tabs button:focus-visible,
.bb-tabs .tab:focus-visible,
.bb-tabs [role="tab"]:focus-visible,
.bb-tabs .tabs__item:focus-visible,
.bb-tabs a:focus-visible,
.bb-tabs button:focus-visible {
  outline: 2px solid var(--vt-accent);
  outline-offset: -2px;
}

/* ──────────────────────────────────────────────────────────────
   ПРАВАЯ КОЛОНКА (контент вкладок)
   ────────────────────────────────────────────────────────────── */
.tabcontent, .bb-tab-panes {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - var(--vt-w)); /* ширина контента = остальная часть */
  padding-left: 16px;               /* отступ от левой колонки */
  color: var(--vt-text);
  box-sizing: border-box;
}

/* Панели содержимого (каждая вкладка) по умолчанию скрыты */
.tabcontent .pane,
.tabcontent [role="tabpanel"],
.tabcontent .tabs__pane,
.bb-tab-panes .pane,
.bb-tab-panes [role="tabpanel"],
.bb-tab-panes .tabs__pane {
  display: none;
  background: #fff;
  border: 1px solid var(--vt-border);
  padding: 12px 14px;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Отображаем только активную панель */
.tabcontent .pane.active,
.tabcontent .pane.is-active,
.tabcontent [role="tabpanel"][aria-hidden="false"],
.tabcontent .tabs__pane.active,
.tabcontent .tabs__pane.is-active,
.bb-tab-panes .pane.active,
.bb-tab-panes .pane.is-active,
.bb-tab-panes [role="tabpanel"][aria-hidden="false"],
.bb-tab-panes .tabs__pane.active,
.bb-tab-panes .tabs__pane.is-active {
  display: block;
}

/* Убрать подчёркивание у ссылок в ЛЕВОЙ колонке вкладок */
.tabs a,
.bb-tabs a {
  text-decoration: none !important;
}
.tabs a:hover,
.tabs a:focus,
.tabs a:active,
.bb-tabs a:hover,
.bb-tabs a:focus,
.bb-tabs a:active {
  text-decoration: none !important;
}

/* ──────────────────────────────────────────────────────────────
   АДАПТИВНОСТЬ: на узких экранах складываем в «почти горизонтальные»
   ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .tabs, .bb-tabs {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--vt-border);
  }
  .tabcontent, .bb-tab-panes {
    width: 100%;
    padding-left: 0;
    margin-top: 10px;
  }
  .tabs .tab,
  .tabs [role="tab"],
  .tabs .tabs__item,
  .tabs a,
  .tabs button,
  .bb-tabs .tab,
  .bb-tabs [role="tab"],
  .bb-tabs .tabs__item,
  .bb-tabs a,
  .bb-tabs button {
    display: inline-block;
    border-left: none;                 /* убираем вертикальную полосу */
    border-bottom: 2px solid transparent; /* подчёркивание для активной */
  }
  .tabs .tab.active,
  .tabs .tab.is-active,
  .tabs [role="tab"][aria-selected="true"],
  .tabs .tabs__item.active,
  .tabs a.active,
  .tabs button.active,
  .bb-tabs .tab.active,
  .bb-tabs .tab.is-active,
  .bb-tabs [role="tab"][aria-selected="true"],
  .bb-tabs .tabs__item.active,
  .bb-tabs a.active,
  .bb-tabs button.active {
    border-bottom-color: var(--vt-accent); /* акцент под активной вкладкой */
  }
}