/* ==========================================================================
 * HIZIRBEY DESIGN SYSTEM - EMPTY STATE COMPONENT
 * ==========================================================================
 * Proje: HIZIRBEY Portal
 * Paket: HIZIRBEY Design System
 * Bileşen: EmptyState
 * Dosya: themes/default/assets/css/hds/components/empty-state/base.css
 * Açıklama: Ortak boş durum yüzeyi, içerik ve responsive action düzeni.
 * Yazar: Mehmet Kalli
 * Oluşturuldu: 10.08.2026
 * Ownership: Public HDS EmptyState component presentation
 * Root: .hds-empty-state
 * Children: icon, content, title, description, actions
 * Dependency: HDS Button actions
 * Güncellendi: 12.08.2026
 * Sürüm: 1.0.0
 * ========================================================================== */

/* =========================================================================
 * >>> Empty State Surface
 * ========================================================================= */

.hds-empty-state {
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  color: var(--hds-studio-text, #243947);
  text-align: center;
  overflow-wrap: anywhere;
  background: var(--hds-studio-surface, #fff);
  border: 1px dashed var(--hds-studio-border, #c8d5de);
  border-radius: var(--hds-studio-radius-sm, 0.55rem);
}

.hds-empty-state--compact {
  gap: 0.6rem;
  padding: 1.15rem;
}

/* <<< Empty State Surface */

/* =========================================================================
 * >>> Icon and Content
 * ========================================================================= */

.hds-empty-state__icon {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--hds-studio-text-soft, #657985);
  background: color-mix(in srgb, currentColor 8%, transparent);
  border-radius: 50%;
  font-size: 1.15rem;
  line-height: 1;
}

.hds-empty-state--compact .hds-empty-state__icon {
  width: 2rem;
  height: 2rem;
  font-size: 0.9rem;
}

.hds-empty-state__content {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  max-width: 34rem;
  min-width: 0;
}

.hds-empty-state__title {
  margin: 0;
  color: var(--hds-studio-text, #243947);
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  font-weight: 750;
  line-height: 1.3;
}

.hds-empty-state__description {
  margin: 0;
  color: var(--hds-studio-text-soft, #657985);
  font-size: 0.82rem;
  line-height: 1.55;
}

.hds-empty-state--compact .hds-empty-state__title {
  font-size: 0.88rem;
}

.hds-empty-state--compact .hds-empty-state__description {
  font-size: 0.75rem;
}

/* <<< Icon and Content */

/* =========================================================================
 * >>> Actions
 * ========================================================================= */

.hds-empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  min-width: 0;
}

/* <<< Actions */

/* =========================================================================
 * >>> Responsive
 * ========================================================================= */

@media (max-width: 30rem) {
  .hds-empty-state {
    padding: 1.25rem 1rem;
  }

  .hds-empty-state__actions {
    display: grid;
    width: min(100%, 18rem);
  }

  .hds-empty-state__actions .hds-button {
    justify-content: center;
    width: 100%;
  }
}

/* <<< Responsive */