/**
 * DS-07: Unified Empty State System
 * Consistent SaaS-style empty states with SVG illustrations
 */

/* ========================================
 * Base Empty State
 * ======================================== */

.bb-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-xxxl, 48px) var(--space-lg, 24px);
  color: var(--text-muted, rgba(255, 255, 255, 0.6));
  min-height: 300px;
}

/* ========================================
 * Illustration (SVG)
 * ======================================== */

.bb-empty-state__illustration {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-lg, 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  filter: drop-shadow(var(--shadow-card, 0 2px 8px rgba(0, 0, 0, 0.1)));
}

.bb-empty-state__svg {
  width: 100%;
  height: 100%;
  color: var(--color-icon-muted, rgba(255, 255, 255, 0.5));
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

/* Alternative size: smaller (56px) */
.bb-empty-state--small .bb-empty-state__illustration {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-md, 16px);
}

/* ========================================
 * Typography
 * ======================================== */

.bb-empty-state__title {
  font-size: var(--type-subtitle-size, 18px);
  font-weight: 600;
  color: var(--text, #ffffff);
  margin: 0 0 var(--space-xs, 8px) 0;
  line-height: var(--type-subtitle-line, 1.35);
  max-width: 500px;
}

.bb-empty-state__subtitle {
  font-size: var(--type-body-size, 16px);
  font-weight: 400;
  color: var(--text-muted, rgba(255, 255, 255, 0.6));
  margin: 0;
  line-height: var(--type-body-line, 1.5);
  max-width: 400px;
}

/* ========================================
 * Call-to-Action
 * ======================================== */

.bb-empty-state__cta {
  margin-top: var(--space-lg, 24px);
}

.bb-empty-state__cta a,
.bb-empty-state__cta button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs, 8px);
  padding: var(--space-sm, 12px) var(--space-lg, 24px);
  background: var(--accent, #C47E42);
  color: white;
  border: none;
  border-radius: var(--radius-button, 6px);
  font-size: var(--type-body-size, 16px);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition-base, 0.2s ease),
              box-shadow var(--transition-base, 0.2s ease),
              background var(--transition-base, 0.2s ease);
  line-height: var(--type-body-line, 1.5);
}

.bb-empty-state__cta a:hover,
.bb-empty-state__cta button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-button-hover, 0 4px 12px rgba(0, 0, 0, 0.15));
  background: var(--accent-dark, #B36E3A);
}

.bb-empty-state__cta a:active,
.bb-empty-state__cta button:active {
  transform: translateY(0);
}

.bb-empty-state__cta a:focus,
.bb-empty-state__cta button:focus {
  outline: 2px solid var(--accent, #C47E42);
  outline-offset: 2px;
}

/* ========================================
 * Variants
 * ======================================== */

/* Compact variant (for smaller sections) */
.bb-empty-state--compact {
  padding: var(--space-xl, 32px) var(--space-md, 16px);
  min-height: 200px;
}

.bb-empty-state--compact .bb-empty-state__illustration {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-md, 16px);
}

.bb-empty-state--compact .bb-empty-state__title {
  font-size: var(--type-body-size, 16px);
}

.bb-empty-state--compact .bb-empty-state__subtitle {
  font-size: var(--type-caption-size, 14px);
}

/* Inline variant (for cards/sections) */
.bb-empty-state--inline {
  padding: var(--space-lg, 24px) var(--space-md, 16px);
  min-height: 150px;
}

.bb-empty-state--inline .bb-empty-state__illustration {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-sm, 12px);
}

.bb-empty-state--inline .bb-empty-state__title {
  font-size: var(--type-body-size, 16px);
  margin-bottom: var(--space-xxs, 4px);
}

.bb-empty-state--inline .bb-empty-state__subtitle {
  font-size: var(--type-caption-size, 14px);
}

/* ========================================
 * Theme Support
 * ======================================== */

/* Light theme adjustments */
[data-ui-theme="aperium"][data-bar-mode="light"] .bb-empty-state__svg,
.theme-aperium.mode-light .bb-empty-state__svg {
  color: var(--color-icon-muted, rgba(0, 0, 0, 0.4));
}

[data-ui-theme="aperium"][data-bar-mode="light"] .bb-empty-state__title,
.theme-aperium.mode-light .bb-empty-state__title {
  color: var(--text, #1a1a1a);
}

[data-ui-theme="aperium"][data-bar-mode="light"] .bb-empty-state__subtitle,
.theme-aperium.mode-light .bb-empty-state__subtitle {
  color: var(--text-muted, rgba(0, 0, 0, 0.6));
}

/* ========================================
 * Mobile Responsive
 * ======================================== */

@media (max-width: 768px) {
  .bb-empty-state {
    padding: var(--space-xl, 32px) var(--space-md, 16px);
    min-height: 250px;
  }

  .bb-empty-state__illustration {
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-md, 16px);
  }

  .bb-empty-state__title {
    font-size: var(--type-body-size, 16px);
    max-width: 100%;
  }

  .bb-empty-state__subtitle {
    font-size: var(--type-caption-size, 14px);
    max-width: 100%;
  }
}