@charset "UTF-8"; /*# The coding page CSS */
/**
 * =============================================================================
 * @encoding UTF-8
 * @author [Zerohold](//zerohold.sd1.su)
 * @project [Telega FM](//telega.fm)
 * @summary Единый стиль для проектов (Mobile version).
 * @created 2026-01
 * @modified 2026-01
 *
 * @file D:/controls-psr/telega.fm/cdn.telega.fm/css/styles-project-mobile-telega.css
 * @link https://cdn.telega.fm/css/styles-project-mobile-telega.css
 *
 * @remarks
 * - Стандарты CSS3 2025
 * - Поддержка тем
 * - Inline комментарии запрещены
 * - Использование `@media (max-width: 768px)` внутри файла избыточно, так как сам файл подключается по этому условию.
 * - Стили под проект Telega.fm для автономной работы.
 *
 * @example
 * <link rel="stylesheet" href="https://cdn.telega.fm/css/styles-standard-project-mobile-telega.min.css" media="screen and (max-width: 768px)">
 *
 * =============================================================================
 */

/* --- АДАПТИВНЫЕ УТИЛИТЫ (RESPONSIVE UTILITIES) */

/* Скрытие/Отображение на разных размерах экрана (Hide/Show on different screen sizes) */
.d-sm-none
{
  display: none !important;
}

.d-md-block
{
  display: block !important;
}

.d-lg-block
{
  display: block !important;
}

/* Адаптация шапки и подвала (Header & Footer Mobile Adaptation) */
.header-actions
{
  gap: var(--spacing-xs);
}

/* Скрываем заголовок на очень маленьких экранах (Hide title on very small screens) */
.header-title
{
  /* Пока так нужно (Needed for now) */
  /* display: none; */
}

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

.footer-links
{
  gap: var(--spacing-md);
}

/* Адаптация хлебных крошек (Breadcrumbs Mobile Adaptation) */
.breadcrumb
{
  padding: 0.25rem 0;
  margin: 0.125rem 0;
  font-size: 0.75rem;
}

/* Убираем скрытие промежуточных элементов - оставляем все видимыми (Remove hiding of intermediate elements - leave all visible) */
.breadcrumb span[itemprop="itemListElement"]
{
  font-size: 0.65rem;
}

.breadcrumb a[itemprop="item"]
{
  padding: 0.15rem 0.3rem;
  font-size: 0.65rem;
}

.breadcrumb .divider::before
{
  margin: 0 0.15rem;
  font-size: 0.6rem;
}

/* Адаптация таблиц (Tables Mobile Adaptation) */
/* Компенсация зафиксированного header для мобильных (Compensation for fixed header on mobile) */
body
{
  padding-top: 60px !important;
}

.header
{
  padding: 0.5rem 0;
}

/* Горизонтальная прокрутка для таблиц на мобильных (Horizontal scrolling for tables on mobile) */
.table-responsive
{
  overflow-x: auto;
  margin-bottom: 0.5rem;
  border-radius: var(--border-radius);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.param-table
{
  min-width: 376px;
  margin-bottom: 0;
  font-size: calc(var(--font-size-base) * 0.8);
}

.param-table.table-compact
{
  min-width: 320px;
  font-size: calc(var(--font-size-sm) * 0.8);
}

.param-table td,
.param-table th
{
  padding: 0.375rem 0.5rem;
  white-space: nowrap;
  border-right: 1px solid var(--color-border);
}

.param-table td:last-child,
.param-table th:last-child
{
  border-right: none;
}

.param-table.table-compact td,
.param-table.table-compact th
{
  padding: 0.25rem 0.375rem;
  font-size: calc(var(--font-size-xs) * 1.1);
}

/* Уменьшение отступов для основных элементов в 2 раза (Halving margins for main elements) */
.container
{
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.card
{
  margin-bottom: calc(var(--spacing-lg) / 2);
}

.form-group
{
  margin-bottom: calc(var(--spacing-xl) / 2);
}

.btn
{
  padding: calc(var(--spacing-md) / 2) calc(var(--spacing-xl) / 2);
  margin: calc(var(--spacing-xs) / 2);
}

.card-body
{
  padding: calc(var(--spacing-xl) / 2);
}

.card-header,
.card-footer
{
  padding: calc(var(--spacing-lg) / 2) calc(var(--spacing-xl) / 2);
}

/* Дополнительные отступы для секций (Additional margins for sections) */
section
{
  padding: calc(var(--spacing-lg) / 2) 0;
}

h1,
h2,
h3,
h4,
h5,
h6
{
  margin-bottom: calc(1.125rem / 2);
}

p
{
  margin-bottom: calc(var(--spacing-md) / 2);
}

/* Адаптация оглавления статьи (Supply (Article TOC) Mobile Adaptation) */
.supply
{
  margin: calc(var(--spacing-xl) / 2) 0;
}

.supply-header
{
  padding: calc(var(--spacing-lg) / 2) calc(var(--spacing-xl) / 2);
  font-size: var(--font-size-sm);
}

.supply-content
{
  padding: calc(var(--spacing-lg) / 2);
}

.supply ul
{
  padding-left: calc(var(--spacing-lg) / 2);
}

.supply ul li
{
  padding-left: calc(var(--spacing-xl) / 2);
  font-size: var(--font-size-sm);
}

.supply ul ul li
{
  font-size: var(--font-size-xs);
}

.supply-indicator
{
  width: 20px;
  height: 20px;
}

.supply-indicator::before
{
  font-size: var(--font-size-sm);
}