/**
 * PWA UI KIT v1.0.0
 * Профессиональный UI Kit для современных веб-приложений
 * 
 * Использование:
 * <link rel="stylesheet" href="css/uikit.css">
 * 
 * @author PWA Team
 * @version 1.0.0
 * @date 2026
 */

/* ===== ИМПОРТ БАЗОВЫХ СТИЛЕЙ ===== */
@import url('base.css');

/* ===== ИМПОРТ ВСЕХ КОМПОНЕНТОВ ===== */
@import url('components/buttons.css');
@import url('components/forms.css');
@import url('components/modal.css');
@import url('components/notifications.css');
@import url('components/accordion.css');
@import url('components/bottom-panel.css');
@import url('components/bottom-menu.css');
@import url('components/header-balance.css');
@import url('components/toggle-switch.css');
@import url('components/cards.css');
@import url('components/pricing-cards.css');
@import url('components/activity-list.css');
@import url('components/stats-card.css');
@import url('components/options-list.css');
@import url('components/feature-cards.css');

/* ===== БАЗОВЫЕ CSS ПЕРЕМЕННЫЕ ===== */
:root {
    /* Основные цвета */
    --kit-primary: #3B82F6;
    --kit-primary-hover: #2266b0;
    --kit-success: #3D9966;
    --kit-success-hover: #3da336;
    --kit-error: #DC4E41;
    --kit-error-hover: #c43d35;
    --kit-warning: #f59e0b;
    --kit-warning-hover: #d97706;
    --kit-info: #3b82f6;
    
    /* Фоновые цвета */
    --kit-bg-primary: #121417;
    --kit-bg-secondary: #16181C;
    --kit-bg-tertiary: #272729;
    --kit-bg-quaternary: #2e3033;
    
    /* Цвета текста */
    --kit-text-primary: #ffffff;
    --kit-text-secondary: #DCDDE0;
    --kit-text-tertiary: #84858A;
    --kit-text-muted: #727272;
    
    /* Радиусы скругления */
    --kit-radius-sm: 12px;
    --kit-radius-md: 18px;
    --kit-radius-lg: 22px;
    --kit-radius-xl: 24px;
    --kit-radius-round: 25px;
    --kit-radius-circle: 50%;
    
    /* Тени */
    --kit-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --kit-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    --kit-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
    
    /* Анимации */
    --kit-transition-fast: 0.15s ease;
    --kit-transition-normal: 0.3s ease;
    --kit-transition-slow: 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Отступы */
    --kit-spacing-xs: 4px;
    --kit-spacing-sm: 8px;
    --kit-spacing-md: 12px;
    --kit-spacing-lg: 16px;
    --kit-spacing-xl: 24px;
    --kit-spacing-2xl: 32px;
    
    /* Z-индексы */
    --kit-z-dropdown: 1000;
    --kit-z-modal: 10000;
    --kit-z-notification: 10000;
}

/* ===== СБРОС СТИЛЕЙ ===== */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--kit-bg-primary);
    color: var(--kit-text-primary);
}

/* ===== УТИЛИТАРНЫЕ КЛАССЫ ===== */

/* Отступы (Margin) */
.kit-m-0 { margin: 0; }
.kit-mt-1 { margin-top: var(--kit-spacing-sm); }
.kit-mt-2 { margin-top: var(--kit-spacing-md); }
.kit-mt-3 { margin-top: var(--kit-spacing-lg); }
.kit-mt-4 { margin-top: var(--kit-spacing-xl); }

.kit-mb-1 { margin-bottom: var(--kit-spacing-sm); }
.kit-mb-2 { margin-bottom: var(--kit-spacing-md); }
.kit-mb-3 { margin-bottom: var(--kit-spacing-lg); }
.kit-mb-4 { margin-bottom: var(--kit-spacing-xl); }

.kit-ml-1 { margin-left: var(--kit-spacing-sm); }
.kit-ml-2 { margin-left: var(--kit-spacing-md); }
.kit-ml-3 { margin-left: var(--kit-spacing-lg); }

.kit-mr-1 { margin-right: var(--kit-spacing-sm); }
.kit-mr-2 { margin-right: var(--kit-spacing-md); }
.kit-mr-3 { margin-right: var(--kit-spacing-lg); }

/* Отступы (Padding) */
.kit-p-0 { padding: 0; }
.kit-p-1 { padding: var(--kit-spacing-sm); }
.kit-p-2 { padding: var(--kit-spacing-md); }
.kit-p-3 { padding: var(--kit-spacing-lg); }
.kit-p-4 { padding: var(--kit-spacing-xl); }

.kit-px-2 { padding-left: var(--kit-spacing-md); padding-right: var(--kit-spacing-md); }
.kit-px-3 { padding-left: var(--kit-spacing-lg); padding-right: var(--kit-spacing-lg); }
.kit-py-2 { padding-top: var(--kit-spacing-md); padding-bottom: var(--kit-spacing-md); }
.kit-py-3 { padding-top: var(--kit-spacing-lg); padding-bottom: var(--kit-spacing-lg); }

/* Flexbox утилиты */
.kit-flex { display: flex; }
.kit-flex-column { flex-direction: column; }
.kit-flex-row { flex-direction: row; }
.kit-flex-wrap { flex-wrap: wrap; }
.kit-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.kit-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.kit-flex-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.kit-flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.kit-align-center { align-items: center; }
.kit-align-start { align-items: flex-start; }
.kit-align-end { align-items: flex-end; }
.kit-justify-center { justify-content: center; }
.kit-justify-between { justify-content: space-between; }
.kit-justify-around { justify-content: space-around; }
.kit-flex-1 { flex: 1; }

/* Текст */
.kit-text-center { text-align: center; }
.kit-text-left { text-align: left; }
.kit-text-right { text-align: right; }

.kit-text-xs { font-size: 10px; }
.kit-text-sm { font-size: 12px; }
.kit-text-md { font-size: 14px; }
.kit-text-base { font-size: 16px; }
.kit-text-lg { font-size: 18px; }
.kit-text-xl { font-size: 20px; }
.kit-text-2xl { font-size: 24px; }

.kit-font-light { font-weight: 300; }
.kit-font-normal { font-weight: 400; }
.kit-font-medium { font-weight: 500; }
.kit-font-semibold { font-weight: 600; }
.kit-font-bold { font-weight: 700; }

/* Цвета текста */
.kit-text-primary { color: var(--kit-text-primary); }
.kit-text-secondary { color: var(--kit-text-secondary); }
.kit-text-tertiary { color: var(--kit-text-tertiary); }
.kit-text-muted { color: var(--kit-text-muted); }
.kit-text-success { color: var(--kit-success); }
.kit-text-error { color: var(--kit-error); }
.kit-text-warning { color: var(--kit-warning); }
.kit-text-info { color: var(--kit-info); }

/* Фоновые цвета */
.kit-bg-primary { background-color: var(--kit-bg-primary); }
.kit-bg-secondary { background-color: var(--kit-bg-secondary); }
.kit-bg-tertiary { background-color: var(--kit-bg-tertiary); }
.kit-bg-success { background-color: var(--kit-success); }
.kit-bg-error { background-color: var(--kit-error); }
.kit-bg-warning { background-color: var(--kit-warning); }
.kit-bg-info { background-color: var(--kit-info); }

/* Радиусы скругления */
.kit-rounded-none { border-radius: 0; }
.kit-rounded-sm { border-radius: var(--kit-radius-sm); }
.kit-rounded-md { border-radius: var(--kit-radius-md); }
.kit-rounded-lg { border-radius: var(--kit-radius-lg); }
.kit-rounded-xl { border-radius: var(--kit-radius-xl); }
.kit-rounded-full { border-radius: var(--kit-radius-circle); }

/* Тени */
.kit-shadow-none { box-shadow: none; }
.kit-shadow-sm { box-shadow: var(--kit-shadow-sm); }
.kit-shadow-md { box-shadow: var(--kit-shadow-md); }
.kit-shadow-lg { box-shadow: var(--kit-shadow-lg); }

/* Анимации */
.kit-transition-fast { transition: all var(--kit-transition-fast); }
.kit-transition-normal { transition: all var(--kit-transition-normal); }
.kit-transition-slow { transition: all var(--kit-transition-slow); }

/* Отображение */
.kit-hidden { display: none !important; }
.kit-block { display: block; }
.kit-inline { display: inline; }
.kit-inline-block { display: inline-block; }
.kit-invisible { visibility: hidden; }
.kit-visible { visibility: visible; }

/* Позиционирование */
.kit-relative { position: relative; }
.kit-absolute { position: absolute; }
.kit-fixed { position: fixed; }
.kit-sticky { position: sticky; }

/* Курсор */
.kit-pointer { cursor: pointer; }
.kit-not-allowed { cursor: not-allowed; }
.kit-default { cursor: default; }

/* Размеры */
.kit-w-full { width: 100%; }
.kit-w-auto { width: auto; }
.kit-w-half { width: 50%; }
.kit-h-full { height: 100%; }
.kit-h-auto { height: auto; }
.kit-min-h-screen { min-height: 100vh; }

/* Overflow */
.kit-overflow-hidden { overflow: hidden; }
.kit-overflow-auto { overflow: auto; }
.kit-overflow-scroll { overflow: scroll; }
.kit-overflow-x-auto { overflow-x: auto; }
.kit-overflow-y-auto { overflow-y: auto; }

/* Gap (для flex и grid) */
.kit-gap-1 { gap: var(--kit-spacing-sm); }
.kit-gap-2 { gap: var(--kit-spacing-md); }
.kit-gap-3 { gap: var(--kit-spacing-lg); }
.kit-gap-4 { gap: var(--kit-spacing-xl); }

/* Дополнительные утилиты */
.kit-no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.kit-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.kit-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kit-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kit-line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== БАЗОВЫЕ КОМПОНЕНТЫ ===== */

/* Карточка */
.kit-card {
    background-color: var(--kit-bg-secondary);
    border-radius: var(--kit-radius-xl);
    padding: var(--kit-spacing-lg);
    box-shadow: var(--kit-shadow-sm);
}

/* Разделитель */
.kit-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.08);
    margin: var(--kit-spacing-lg) 0;
}

/* Бейдж */
.kit-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: var(--kit-radius-sm);
    font-size: 12px;
    font-weight: 500;
}

.kit-badge-primary { background-color: var(--kit-primary); color: white; }
.kit-badge-success { background-color: var(--kit-success); color: white; }
.kit-badge-error { background-color: var(--kit-error); color: white; }
.kit-badge-warning { background-color: var(--kit-warning); color: white; }
.kit-badge-info { background-color: var(--kit-info); color: white; }

/* Контейнер */
.kit-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--kit-spacing-lg);
}

/* Сетка */
.kit-grid {
    display: grid;
    gap: var(--kit-spacing-lg);
}

.kit-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.kit-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.kit-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Адаптивность */
@media (max-width: 768px) {
    .kit-grid-cols-2,
    .kit-grid-cols-3,
    .kit-grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

/* Спиннер загрузки */
.kit-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: kit-spin 0.6s linear infinite;
}

@keyframes kit-spin {
    to { transform: rotate(360deg); }
}

/* ===== СКРОЛЛБАР ===== */
/* Кастомный скроллбар (Webkit) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}