/**
 * ===================================
 * UI Kit - Utilities
 * ===================================
 * 
 * Утилитарные классы для быстрого применения стилей
 */

/* Cursor */
.cursor-pointer {
    cursor: pointer !important;
}

.cursor-default {
    cursor: default !important;
}

.cursor-not-allowed {
    cursor: not-allowed !important;
}

/* Text Selection */
.user-select-none {
    user-select: none !important;
}

.user-select-all {
    user-select: all !important;
}

.user-select-auto {
    user-select: auto !important;
}

/* Pointer Events */
.pointer-events-none {
    pointer-events: none !important;
}

.pointer-events-auto {
    pointer-events: auto !important;
}

/* Overflow */
.overflow-hidden {
    overflow: hidden !important;
}

.overflow-auto {
    overflow: auto !important;
}

.overflow-scroll {
    overflow: scroll !important;
}

.overflow-visible {
    overflow: visible !important;
}

/* Hide scrollbar but keep functionality */
.hide-scrollbar {
    -ms-overflow-style: none !important;  /* IE and Edge */
    scrollbar-width: none !important;  /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
    display: none !important;  /* Chrome, Safari and Opera */
}

/* Text Overflow */
.text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Text Alignment */
.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

/* Object Fit */
.object-fit-contain {
    object-fit: contain !important;
}

.object-fit-cover {
    object-fit: cover !important;
}

.object-fit-fill {
    object-fit: fill !important;
}

.object-fit-none {
    object-fit: none !important;
}

.object-fit-scale-down {
    object-fit: scale-down !important;
}

/* Flex Utilities */
.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.flex-shrink-1 {
    flex-shrink: 1 !important;
}

.flex-grow-0 {
    flex-grow: 0 !important;
}

.flex-grow-1 {
    flex-grow: 1 !important;
}

/* Min Width/Height */
.min-width-0 {
    min-width: 0 !important;
}

.min-height-0 {
    min-height: 0 !important;
}

/* ===================================
   SVG Theme Adaptation
   =================================== */

/**
 * Класс для SVG изображений, которые нужно инвертировать в светлой теме
 * Используйте для SVG, которые изначально светлые (для темной темы)
 * 
 * Пример:
 * <img src="icon-light.svg" class="svg-theme-adaptive" alt="Icon">
 */
.svg-theme-adaptive {
    transition: filter var(--transition-base);
}

/* В светлой теме - инвертируем светлые SVG */
[data-theme="light"] .svg-theme-adaptive {
    filter: invert(1) brightness(0.9);
}

/* В темной теме - оставляем как есть */
[data-theme="dark"] .svg-theme-adaptive {
    filter: none;
}

/* Переключение логотипа в зависимости от темы */
.logo-dark {
    display: block;
}

.logo-light {
    display: none;
}

[data-theme="light"] .logo-dark {
    display: none;
}

[data-theme="light"] .logo-light {
    display: block;
}

/**
 * Альтернативный класс для SVG, которые нужно затемнить в светлой теме
 * Используйте для SVG с белым/светлым fill
 */
.svg-theme-darken {
    transition: filter var(--transition-base);
}

[data-theme="light"] .svg-theme-darken {
    filter: brightness(0.2);
}

[data-theme="dark"] .svg-theme-darken {
    filter: none;
}

/**
 * Для inline SVG - можно использовать CSS переменные
 * Применяйте класс к <svg> элементу
 */
.svg-theme-fill {
    fill: var(--font-primary);
    transition: fill var(--transition-base);
}

.svg-theme-stroke {
    stroke: var(--font-primary);
    transition: stroke var(--transition-base);
}

/* ===================================
   Section Divider (Разделитель секций)
   =================================== */

/**
 * Универсальные разделители секций с модификаторами
 * 
 * Варианты использования:
 * 1. Базовый (центр): <div class="gc-divider"><span>Прошедшие сезоны</span></div>
 *    Визуально: ────────── ПРОШЕДШИЕ СЕЗОНЫ ──────────
 * 
 * 2. Слева: <div class="gc-divider gc-divider-left"><span>Август 2025</span></div>
 *    Визуально: АВГУСТ 2025 ─────────────────────────
 * 
 * 3. Плашка (Telegram): <div class="gc-divider gc-divider-badge"><span>Сегодня</span></div>
 *    Визуально:          [ СЕГОДНЯ ]
 */
.gc-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: var(--spacing-md) 0;
}

.gc-divider::before,
.gc-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-primary);
}

.gc-divider span {
    padding: 0 var(--spacing-xs);
    color: var(--font-secondary);
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Модификатор: разделитель с выравниванием текста слева */
.gc-divider-left {
    justify-content: flex-start;
}

.gc-divider-left::before {
    display: none;
}

.gc-divider-left span {
    padding-left: 0;
}

/* Модификатор: разделитель в стиле Telegram (плашка по центру) */
.gc-divider-badge {
    margin: var(--spacing-lg) 0;
}.gc-divider-badge::before,
.gc-divider-badge::after {
    display: none; /* Убираем линии */
}

.gc-divider-badge span {
    background: var(--bg-content-main);
    border-radius: var(--radius-md);
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--font-tertiary);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* На мобильных добавляем боковые отступы, чтобы бадж не врезался в края экрана */
@media (max-width: 575px) {
    .gc-divider-badge {
        padding: 0 var(--spacing-sm);
    }
}

/* ===================================
   Stack Layout - вертикальное стекирование с gap
   =================================== */

.gc-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.gc-stack-sm {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}