@charset "UTF-8"; /*# The coding page CSS */
/**
 * =============================================================================
 * @encoding UTF-8
 * @author [Zerohold](//zerohold.sd1.su)
 * @project [Telega FM](//telega.fm)
 * @summary Стили для портала документации
 * @created 2025-10
 * @modified 2026-03
 *
 * @file D:/controls-psr/telega.fm/cdn.telega.fm/css/docs.css
 * @link https://cdn.telega.fm/css/docs.css
 *
 * @remarks
 * - Стили для документации
 * =============================================================================
 */

/* Определение цветовых переменных (в темах) */
/* ОСНОВНЫЕ ПЕРЕМЕННЫЕ ТЕМЫ */
:root[data-theme="telega"]
{
  /* Базовые цвета (base colors) */
  --color-primary: rgb(2, 124, 100);
  --color-primary-hover: rgb(2, 107, 86);
  --color-primary-dark: rgb(1, 90, 71);
  --color-secondary: rgb(107, 114, 128);
  --color-secondary-hover: rgb(75, 85, 99);
  --color-success: rgb(16, 185, 129);
  --color-success-hover: rgb(5, 150, 105);
  --color-warning: rgb(245, 158, 11);
  --color-warning-hover: rgb(217, 119, 6);
  --color-danger: rgb(239, 68, 68);
  --color-danger-hover: rgb(220, 38, 38);
  --color-info: rgb(6, 182, 212);
  --color-info-hover: rgb(8, 145, 178);

  /* Цвета фона (background colors) */
  --color-bg-primary: rgb(255, 255, 255);
  --color-bg-secondary: rgb(240, 240, 240);
  --color-bg-tertiary: rgb(248, 248, 248);
  --color-bg-accent: rgb(229, 221, 213);

  /* Цвета текста (text colors) */
  --color-text-primary: rgb(0, 0, 0);
  --color-text-secondary: rgb(71, 85, 105);
  --color-text-muted: rgb(160, 160, 160);
  --color-text-inverse: rgb(255, 255, 255);

  /* Цвета границ (border colors) */
  --color-border: rgb(224, 224, 224);
  --color-border-hover: rgb(2, 124, 100);

  /* Цвета Header & Footer */
  --header-footer-bg-color: rgb(240, 240, 240);
  --header-footer-bg-image: none;
  --header-footer-border-color: rgb(224, 224, 224);

  /* Main background */
  --color-bg-main: rgb(242, 243, 247);

  /* Card background */
  --color-bg-card: rgb(255, 255, 255);

  /* Цвета для Header компонентов */
  --color-bg-header: rgb(255, 255, 255);
  --color-bg-feed: rgb(255, 255, 255);
  --color-bg-date: rgb(229, 221, 213);
  --text-header: rgb(0, 0, 0);
  --text-meta: rgb(100, 116, 139);
  --text-channel: rgb(2, 124, 100);
  --text-post: rgb(0, 0, 0);
  --text-link: rgb(5, 103, 250);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  /* Цвета теней (shadow colors) */
  --shadow-color: rgba(0, 0, 0, 0.1);

  /* Хлебные крошки (breadcrumbs) */
  --breadcrumb-bg-start: rgb(248, 248, 248);
  --breadcrumb-bg-end: rgb(224, 224, 224);
  --breadcrumb-border: rgb(203, 213, 225);
  --breadcrumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --breadcrumb-color: rgb(71, 85, 105);
  --breadcrumb-link-color: rgb(2, 124, 100);
  --breadcrumb-link-hover-color: rgb(2, 107, 86);
  --breadcrumb-link-hover-bg: rgba(2, 124, 100, 0.1);
  --breadcrumb-divider-color: rgb(100, 116, 139);

  /* Цвета уведомлений (Alert Colors) */
  --alert-blue-bg: rgb(224, 242, 254);
  --alert-blue-border: rgb(125, 211, 252);
  --alert-blue-text: rgb(12, 74, 110);
  --alert-yellow-bg: rgb(254, 249, 195);
  --alert-yellow-border: rgb(253, 224, 71);
  --alert-yellow-text: rgb(133, 77, 14);
  --alert-green-bg: rgb(220, 252, 231);
  --alert-green-border: rgb(134, 239, 172);
  --alert-green-text: rgb(22, 101, 52);
  --alert-purple-bg: rgb(245, 208, 254);
  --alert-purple-border: rgb(240, 171, 252);
  --alert-purple-text: rgb(112, 26, 117);
  --alert-indigo-bg: rgb(224, 231, 255);
  --alert-indigo-border: rgb(165, 180, 252);
  --alert-indigo-text: rgb(55, 48, 163);
  --alert-gray-bg: rgb(243, 244, 246);
  --alert-gray-border: rgb(209, 213, 219);
  --alert-gray-text: rgb(55, 65, 81);
  --alert-red-bg: rgb(254, 226, 226);
  --alert-red-border: rgb(252, 165, 165);
  --alert-red-text: rgb(153, 27, 27);

  /* Содержание статьи (supply) */
  --supply-bg: rgb(248, 248, 248);
  --supply-border-color: rgb(224, 224, 224);
  --supply-header-text-color: rgb(0, 0, 0);
  --supply-indicator-color: rgb(2, 124, 100);
  --supply-link-color: rgb(71, 85, 105);
  --supply-link-hover-color: rgb(2, 124, 100);
  --supply-link-hover-bg: rgba(2, 124, 100, 0.1);
  --supply-number-color: rgb(2, 124, 100);
  --supply-sub-number-color: rgb(100, 116, 139);
}

/* КОМПОНЕНТЫ */

/* Уведомления (Alerts) */
:root[data-theme="telega"] .alert-success
{
  color: rgb(22, 101, 52);
  background-color: rgb(220, 252, 231);
  border-color: rgb(134, 239, 172);
}

:root[data-theme="telega"] .alert-warning
{
  color: rgb(133, 77, 14);
  background-color: rgb(254, 249, 195);
  border-color: rgb(253, 224, 71);
}

:root[data-theme="telega"] .alert-danger
{
  color: rgb(153, 27, 27);
  background-color: rgb(254, 226, 226);
  border-color: rgb(252, 165, 165);
}

:root[data-theme="telega"] .alert-info
{
  color: rgb(12, 74, 110);
  background-color: rgb(224, 242, 254);
  border-color: rgb(125, 211, 252);
}

/* Оверлей загрузки (Loading Overlay) */
:root[data-theme="telega"] .loading-overlay
{
  background-color: rgba(255, 255, 255, 0.8);
}

/* Кнопки прокрутки (Scroll Controls) */
:root[data-theme="telega"] .scroll-control
{
  background-color: rgba(240, 240, 240, 0.9);
}

:root[data-theme="telega"] .scroll-control:hover
{
  background-color: rgb(240, 240, 240);
}

:root[data-theme="telega"] .scroll-btn:hover
{
  background-color: rgb(229, 221, 213);
}

/* Элементы форм (Form Controls) */
:root[data-theme="telega"] .form-select
{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

:root[data-theme="telega"] .form-input:focus,
:root[data-theme="telega"] .form-textarea:focus,
:root[data-theme="telega"] .form-select:focus,
:root[data-theme="telega"] .form-input.focus
{
  border-color: rgb(2, 124, 100);
  box-shadow: 0 0 0 2px rgba(2, 124, 100, 0.25);
}

/* Фокус кнопок (Button Focus) */
:root[data-theme="telega"] .btn:focus
{
  box-shadow: 0 0 0 2px rgba(2, 124, 100, 0.25);
}

/* Модальное окно (Modal) */
:root[data-theme="telega"] .modal
{
  background-color: rgba(0, 0, 0, 0.5);
}

/* Зона для перетаскивания файлов (Drop Zone) */
:root[data-theme="telega"] .drop-zone:hover
{
  border-color: rgb(2, 124, 100);
}

:root[data-theme="telega"] .drop-zone.dragover
{
  border-color: rgb(2, 124, 100);
  background-color: rgba(2, 124, 100, 0.05);
  color: rgb(2, 124, 100);
}

/* Переключатель тем (Theme Switcher) */
:root[data-theme="telega"] .theme-option:hover
{
  background-color: rgb(229, 221, 213);
}

:root[data-theme="telega"] .theme-option.active
{
  background-color: rgb(2, 124, 100);
  color: rgb(255, 255, 255);
}

:root[data-theme="telega"] .theme-switcher-modal .theme-option:hover
{
  background-color: rgb(229, 221, 213);
}

:root[data-theme="telega"] .theme-switcher-modal .theme-option.active
{
  background-color: rgb(2, 124, 100);
  color: rgb(255, 255, 255);
}

/* Спиннер (Spinner) */
:root[data-theme="telega"] .spinner
{
  border-color: rgb(224, 224, 224);
  border-top-color: rgb(2, 124, 100);
}

/* Кнопки в шапке (Header Buttons) */
:root[data-theme="telega"] .header-btn:hover
{
  background-color: rgba(2, 124, 100, 0.1);
}

/* Элементы карточек (Card Elements) */
:root[data-theme="telega"] .card-header,
:root[data-theme="telega"] .card-footer
{
  background-color: rgb(248, 248, 248);
  background-image: none;
  border-color: rgb(224, 224, 224);
  color: rgb(0, 0, 0);
}

:root[data-theme="telega"] .card-header
{
  border-bottom-color: rgb(224, 224, 224);
}

:root[data-theme="telega"] .card-footer
{
  border-top-color: rgb(224, 224, 224);
}

/* Элементы модального окна (Modal Elements) */
:root[data-theme="telega"] .modal-header,
:root[data-theme="telega"] .modal-footer
{
  background-color: rgb(240, 240, 240);
  background-image: none;
  border-color: rgb(224, 224, 224);
  color: rgb(0, 0, 0);
}

:root[data-theme="telega"] .modal-header
{
  border-bottom-color: rgb(224, 224, 224);
}

:root[data-theme="telega"] .modal-footer
{
  border-top-color: rgb(224, 224, 224);
}

/* Хлебные крошки (Breadcrumbs) */
:root[data-theme="telega"] .breadcrumb-item a
{
  color: rgb(2, 124, 100);
}

:root[data-theme="telega"] .breadcrumb-item a:hover
{
  color: rgb(2, 107, 86);
}

:root[data-theme="telega"] .breadcrumb-item.active
{
  color: rgb(160, 160, 160);
}

:root[data-theme="telega"] .breadcrumb-arrow .breadcrumb-item:not(:last-child)::after
{
  color: rgb(2, 124, 100);
}

:root[data-theme="telega"] .breadcrumb-pills .breadcrumb-item a
{
  background-color: rgb(248, 248, 248);
  color: rgb(71, 85, 105);
}

:root[data-theme="telega"] .breadcrumb-pills .breadcrumb-item a:hover
{
  background-color: rgba(2, 124, 100, 0.1);
}

:root[data-theme="telega"] .breadcrumb-pills .breadcrumb-item.active
{
  background-color: rgb(2, 124, 100);
  color: rgb(255, 255, 255);
}

/* Таблицы (Tables) */
:root[data-theme="telega"] .param-table
{
  background-color: rgb(255, 255, 255);
  border-color: rgb(224, 224, 224);
}

:root[data-theme="telega"] .param-table th
{
  background-color: rgb(248, 248, 248);
  color: rgb(0, 0, 0);
  border-color: rgb(224, 224, 224);
}

:root[data-theme="telega"] .param-table td
{
  border-color: rgb(224, 224, 224);
  color: rgb(0, 0, 0);
}

:root[data-theme="telega"] .param-table tbody tr:hover
{
  background-color: rgb(240, 240, 240);
}

:root[data-theme="telega"] .param-table tbody tr:nth-child(even)
{
  background-color: rgb(248, 248, 248);
}

/* Эффект мерцания (Shimmer Effect) */
:root[data-theme="telega"] .shimmer
{
  background-image: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
}

/* Основные стили страницы */
body
{
  padding-top: 100px !important;

  font-family: "Inter", sans-serif;

  background-color: var(--color-bg-main);
}

/* Header стили */
.header
{
  position: sticky;
  top: 0;
  z-index: 10;

  color: var(--text-header);

  background-color: var(--color-bg-header);
  box-shadow: var(--shadow);
}

.header-container
{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left
{
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-logo
{
  flex-shrink: 0;
  width: 32px;
  height: 32px;

  background-repeat: no-repeat;
  background-size: contain;
}

.header-title
{
  display: flex;
  flex-direction: column;

  text-decoration: none;
  color: var(--text-header);
}

.header-title:hover
{
  opacity: 0.8;
}

.header-title-main
{
  font-size: 20px;
  font-weight: 700;
  color: var(--text-header);
}

.header-subtitle
{
  display: block;
  margin-top: -2px;

  font-size: 12px;
  color: var(--text-meta);
}

.header-actions
{
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-btn
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  cursor: pointer;

  background-color: transparent;

  transition: background-color 0.2s ease-in-out;
}

.header-btn:hover
{
  background-color: rgba(0, 0, 0, 0.1);
}

/* Иконки для кнопок в header (из styles-assets.css) */
.header-btn .icon
{
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Иконка настроек */
.header-btn[data-modal-target="modal-settings"] .icon
{
  /* noinspection CssUnresolvedCustomProperty */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94s-.02-.64-.07-.94l2.03-1.58a.5.5 0 0 0 .12-.61l-1.92-3.32a.5.5 0 0 0-.61-.22l-2.49 1a9.6 9.6 0 0 0-1.65-.94L14.05 2.5a.5.5 0 0 0-.5-.5h-3.8c-.28 0-.5.22-.5.5l-.34 2.67a9.6 9.6 0 0 0-1.65.94l-2.49-1a.5.5 0 0 0-.61.22l-1.92 3.32a.5.5 0 0 0 .12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.5.5 0 0 0-.12.61l1.92 3.32a.5.5 0 0 0 .61.22l2.49-1c.52.4 1.08.73 1.65.94l.34 2.67a.5.5 0 0 0 .5.5h3.8c.28 0 .5-.22.5.5l.34-2.67c.57-.2 1.13-.54 1.65-.94l2.49 1a.5.5 0 0 0 .61-.22l1.92-3.32a.5.5 0 0 0-.12-.61l-2.03-1.58zM12 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Иконка уведомлений */
.header-btn[data-modal-target="modal-notifications"] .icon
{
  /* noinspection CssUnresolvedCustomProperty */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Иконка помощи */
.header-btn[data-modal-target="modal-help"] .icon
{
  /* noinspection CssUnresolvedCustomProperty */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Иконка профиля */
.header-btn[data-modal-target="modal-profile"] .icon
{
  /* noinspection CssUnresolvedCustomProperty */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Основная область контента */
main
{
  min-height: calc(100vh - 140px);
  padding: 16px 0;
  background-color: var(--color-bg-main);
}

/* Footer */
.footer
{
  padding: 16px 0;

  font-size: 12px;
  color: var(--text-meta);
  text-align: center;

  background-color: var(--color-bg-header);
}

/* Адаптивность */
@media (max-width: 768px)
{
  .header-container
  {
    padding: 0 16px;
  }

  .header-title-main
  {
    font-size: 18px;
  }

  .header-subtitle
  {
    font-size: 11px;
  }

  .header-actions
  {
    gap: 4px;
  }

  .header-btn
  {
    width: 36px;
    height: 36px;
  }

  .container
  {
    padding: 0 12px;
  }
}

/* Переключение тем */
.theme-btn
{
  border: 1px solid var(--text-meta);

  opacity: 0.7;

  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.theme-btn.active
{
  transform: scale(1.2);

  opacity: 1;

  box-shadow: 0 0 5px 2px var(--text-channel);
}

.header-logo
{
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23229ED9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/%3e%3cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3e%3cline x1='12' y1='19' x2='12' y2='23'/%3e%3cline x1='8' y1='23' x2='16' y2='23'/%3e%3c/svg%3e");
}