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

/* 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 {
    padding: var(--spacing-lg);
}

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

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

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

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

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

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

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

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

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

/* Для SVG в модалах - фиксированная ширина */
.modal .gc-empty-state-image.svg-theme-adaptive,
.modal .gc-empty-state-image[src$=".svg"] {
    width: 120px !important;
    height: auto !important;
}

/* Responsive */
@media (max-width: 576px) {
    .gc-empty-state {
        padding: var(--spacing-lg);
    }
    
    .gc-empty-state-image {
        max-height: 100px;
    }
    
    .gc-empty-state-icon {
        font-size: 2.5rem;
    }
    
    .modal .gc-empty-state-image {
        max-height: 100px !important;
    }
}