/* =========================================
   UI Kit - Empty State
   ========================================= */

/*
 * Иллюстрации: <x-ui.empty-state-illustration variant="…" /> + config empty_state_assets.
 * Стек в панели: <x-ui.empty-state-stacked> (иллюстрация, copy, CTA в контенте панели).
 * Крупная иллюстрация над заголовком: .gc-panel > .gc-panel-header-hero (styles.css).
 * Действие: <x-ui.empty-state-cta> — обёртка над gc-btn gc-btn-outline gc-btn-sm (buttons.css).
 *
 * variant: brief | empty_brief | weapon | invite | activity | events | events_divider | vehicle | location
 */

/* Container */
.gc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-2xl);
    text-align: center;
}

.gc-empty-state-sm {
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
}

.gc-empty-state-lg {
    gap: var(--spacing-lg);
    padding: var(--spacing-4xl);
}

.gc-empty-state-fullpage {
    min-height: 60vh;
}

/* Icon color modifiers */
.gc-empty-state-icon-success {
    color: var(--success-color);
    opacity: 1;
}

.gc-empty-state-icon-danger {
    color: var(--danger-color);
    opacity: 1;
}

.gc-empty-state-icon-warning {
    color: var(--warning-color);
    opacity: 1;
}

.gc-empty-state-icon-primary {
    color: var(--font-primary);
    opacity: 1;
}

/* Image/Icon */
.gc-empty-state-image {
    width: 7.5rem;
    max-width: 100%;
    max-height: 7.5rem;
    height: auto;
    opacity: 0.8;
    margin: 0; /* Отступами управляет gap родителя */
}

.gc-empty-state-sm .gc-empty-state-image {
    width: 5rem;
    max-height: 5rem;
}

.gc-empty-state-lg .gc-empty-state-image {
    width: 9.5rem;
    max-height: 9.5rem;
}

.gc-empty-state-icon {
    font-size: 3rem;
    color: var(--font-secondary);
    opacity: 0.5;
    margin: 0; /* Отступами управляет gap родителя */
}

.gc-empty-state-icon-sm {
    font-size: 2rem;
}

/* Content */
.gc-empty-state-content {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.gc-empty-state-sm .gc-empty-state-content {
    max-width: 20rem;
    gap: var(--spacing-sm);
}

.gc-empty-state-sm .gc-empty-state-title {
    font-size: var(--font-size-sm);
    font-weight: 400;
}

.gc-empty-state-lg .gc-empty-state-content {
    max-width: 34rem;
    gap: var(--spacing-lg);
}

.gc-empty-state-copy {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.gc-empty-state-title {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--font-secondary);
    margin: 0; /* Отступами управляет gap родителя */
    line-height: 1.5;
}

.gc-empty-state-title-primary {
    color: var(--font-primary);
}

.gc-empty-state-lg .gc-empty-state-title {
    font-size: var(--font-size-md);
}

.gc-empty-state-description {
    font-size: var(--font-size-sm);
    color: var(--font-secondary);
    line-height: 1.5;
    margin: 0; /* Отступами управляет gap родителя */
}

/* ─── Стек в панели: иллюстрация + текст + CTA с обводкой в теле (не в header) ─── */

.gc-empty-state--stacked {
    gap: 0;
    padding: 0;
    max-width: 100%;
}

.gc-panel-content > .gc-empty-state--stacked {
    padding: 0;
}

.gc-empty-state-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 40rem;
    margin-inline: auto;
    gap: var(--spacing-mdl);
    text-align: center;
    padding: var(--spacing-md);
}

.gc-empty-state--stacked .gc-empty-state-image {
    width: 5rem;
    max-width: 100%;
    max-height: 5rem;
    height: auto;
    opacity: 1;
    flex-shrink: 0;
}

.gc-empty-state--stacked .gc-empty-state-copy {
    gap: var(--spacing-3xs);
}

.gc-empty-state--stacked .gc-empty-state-title {
    color: var(--font-primary);
}

.gc-empty-state--stacked .gc-empty-state-description {
    font-size: var(--font-size-sm);
}

/* Длинные подписи на outline-кнопке в узкой колонке */
.gc-empty-state--stacked .gc-empty-state-inner > .gc-btn {
    white-space: normal;
    text-align: center;
}

@media (max-width: 576px) {
    .gc-empty-state--stacked .gc-empty-state-image {
        width: 6rem;
        max-height: 6rem;
    }
}

/* Action button */
.gc-empty-state-action {
    margin: 0; /* Отступами управляет gap родителя */
}

/* Кнопки внутри контента заглушки - убираем margin, ритм управляется контейнерами */
.gc-empty-state-content .gc-btn,
.gc-empty-state--stacked .gc-empty-state-inner > .gc-btn {
    margin: 0;
}

/* В модалах ограничиваем размер заглушки */
.modal .gc-empty-state-image {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
}

/* Responsive */
@media (max-width: 576px) {
    .gc-empty-state {
        padding: var(--spacing-lg);
    }

    .gc-empty-state--stacked {
        padding: 0;
    }
    
    .gc-empty-state-image {
        width: 6rem;
        max-height: 6rem;
    }

    .gc-empty-state-sm .gc-empty-state-image {
        width: 4.5rem;
        max-height: 4.5rem;
    }

    .gc-empty-state-lg .gc-empty-state-image {
        width: 7rem;
        max-height: 7rem;
    }
    
    .gc-empty-state-icon {
        font-size: 2.5rem;
    }
}