/* static/css/layout-standards.css - СТАНДАРТЫ ОТСТУПОВ И РАЗМЕРОВ */

:root {
    /* КОНТЕЙНЕРЫ И ШИРИНЫ */
    --container-max-width: 1280px; /* 7xl в Tailwind */
    --content-max-width: 1024px;   /* 4xl в Tailwind */
    --sidebar-width: 256px;        /* 64 в Tailwind (16 * 4) */
    
    /* ОТСТУПЫ ОСНОВНЫЕ */
    --page-padding: 1.5rem;        /* 6 в Tailwind (p-6) */
    --section-margin: 2rem;        /* 8 в Tailwind (mb-8) */
    --card-padding: 1.5rem;        /* 6 в Tailwind (p-6) */
    --stat-card-padding: 1.5rem;   /* 6 в Tailwind */
    
    /* ОТСТУПЫ В СЕТКАХ */
    --grid-gap: 1.5rem;           /* 6 в Tailwind (gap-6) */
    --grid-gap-small: 1rem;       /* 4 в Tailwind (gap-4) */
    --grid-gap-large: 2rem;       /* 8 в Tailwind (gap-8) */
    
    /* РАЗМЕРЫ ЭЛЕМЕНТОВ */
    --header-height: 4rem;         /* h-16 */
    --stat-card-icon: 3rem;        /* w-12 h-12 */
    --action-icon: 4rem;           /* w-16 h-16 */
    --empty-state-icon: 5rem;      /* w-20 h-20 */
    
    /* КНОПКИ И ФОРМЫ */
    --button-padding-x: 1rem;      /* px-4 */
    --button-padding-y: 0.5rem;    /* py-2 */
    --button-padding-large-x: 2rem; /* px-8 */
    --button-padding-large-y: 0.75rem; /* py-3 */
    
    /* РАДИУСЫ */
    --radius-small: 0.5rem;        /* rounded-lg */
    --radius-medium: 0.75rem;      /* rounded-xl */
    --radius-large: 1rem;          /* rounded-2xl */
    --radius-icon: 0.75rem;        /* rounded-lg для иконок */
    
    /* ТЕНИ И ЭФФЕКТЫ */
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.2);
    --shadow-button: 0 8px 25px rgba(102, 126, 234, 0.4);
}

/* ===== ОСНОВНЫЕ КОНТЕЙНЕРЫ ===== */

/* Главный контейнер страницы */
.page-container {
    min-height: 100vh;
    padding: var(--page-padding);
}

/* Контейнер содержимого */
.content-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
}

/* Узкий контейнер для форм */
.content-container-narrow {
    max-width: var(--content-max-width);
    margin: 0 auto;
}

/* ===== ЗАГОЛОВКИ СТРАНИЦ ===== */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--section-margin);
}

.page-title {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700;
    background: linear-gradient(to right, #60a5fa, #a855f7);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.page-subtitle {
    color: #9ca3af; /* gray-400 */
    margin-top: 0.5rem;
}

/* ===== СЕТКИ СТАТИСТИКИ ===== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--grid-gap);
    margin-bottom: var(--section-margin);
}

.stats-grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--grid-gap);
    margin-bottom: var(--section-margin);
}

/* Для мобильных всегда одна колонка */
@media (max-width: 768px) {
    .stats-grid,
    .stats-grid-4 {
        grid-template-columns: 1fr;
        gap: var(--grid-gap-small);
    }
}

/* ===== КАРТОЧКИ ===== */

.content-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-medium);
    padding: var(--card-padding);
    margin-bottom: var(--section-margin);
    box-shadow: var(--glass-shadow);
    transition: all 0.3s ease;
}

.content-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}