/* =====================================================================
   UniMate Component — Empty States v1.0
   Custom SVG illustrations with animations and contextual CTAs
   ===================================================================== */

/* ── Base Empty State Container ──────────────────────────────────────── */
.um-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--um-space-12) var(--um-space-6);
  text-align: center;
  animation: um-fade-in-up var(--um-duration-slower) var(--um-ease-smooth) both;
}

.um-empty--compact {
  padding: var(--um-space-8) var(--um-space-4);
}

/* ── Illustration ────────────────────────────────────────────────────── */
.um-empty__illustration {
  width: 180px;
  height: 180px;
  margin-bottom: var(--um-space-6);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.um-empty--compact .um-empty__illustration {
  width: 120px;
  height: 120px;
  margin-bottom: var(--um-space-4);
}

.um-empty__illustration svg {
  width: 100%;
  height: 100%;
}

/* ── Floating animation for illustrations ────────────────────────────── */
@keyframes um-empty-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.um-empty__illustration--animated {
  animation: um-empty-float 4s var(--um-ease-in-out) infinite;
}

/* ── Title ────────────────────────────────────────────────────────────── */
.um-empty__title {
  font-family: var(--um-font-display);
  font-size: var(--um-text-xl);
  font-weight: var(--um-weight-bold);
  color: var(--um-text);
  letter-spacing: var(--um-tracking-tight);
  margin: 0 0 var(--um-space-2);
  line-height: var(--um-leading-tight);
}

.um-empty--compact .um-empty__title {
  font-size: var(--um-text-lg);
}

/* ── Description ─────────────────────────────────────────────────────── */
.um-empty__text {
  font-size: var(--um-text-base);
  color: var(--um-text-secondary);
  line-height: var(--um-leading-relaxed);
  max-width: 380px;
  margin: 0 0 var(--um-space-6);
}

.um-empty--compact .um-empty__text {
  font-size: var(--um-text-sm);
  max-width: 320px;
  margin-bottom: var(--um-space-4);
}

/* ── Action Buttons ──────────────────────────────────────────────────── */
.um-empty__actions {
  display: flex;
  align-items: center;
  gap: var(--um-space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* =====================================================================
   SVG Illustrations — Inline styles for each empty state
   Each illustration uses the brand palette for cohesive look
   ===================================================================== */

/* ── Dashboard (no data) — student with laptop ──────────────────────── */
.um-empty-illust-dashboard {
  --illust-primary: var(--um-brand-500);
  --illust-primary-light: var(--um-brand-100);
  --illust-accent: var(--um-accent-400);
  --illust-bg: var(--um-brand-50);
  --illust-skin: #fcc89b;
  --illust-hair: #3b3047;
}

/* ── No deadlines — relaxed character ────────────────────────────────── */
.um-empty-illust-deadlines {
  --illust-primary: var(--um-success);
  --illust-primary-light: var(--um-success-light);
  --illust-accent: var(--um-brand-400);
  --illust-bg: #f4f4f5;
}

/* ── No grades — book with stars ─────────────────────────────────────── */
.um-empty-illust-grades {
  --illust-primary: var(--um-warning);
  --illust-primary-light: var(--um-warning-light);
  --illust-accent: var(--um-brand-400);
  --illust-bg: #fffbeb;
}

/* ── AI chat empty — robot greeting ──────────────────────────────────── */
.um-empty-illust-ai {
  --illust-primary: var(--um-secondary-500);
  --illust-primary-light: var(--um-secondary-100);
  --illust-accent: var(--um-brand-400);
  --illust-bg: var(--um-secondary-50);
}

/* ── No friends — two characters ─────────────────────────────────────── */
.um-empty-illust-friends {
  --illust-primary: var(--um-info);
  --illust-primary-light: var(--um-info-light);
  --illust-accent: var(--um-accent-400);
  --illust-bg: #ecfeff;
}

/* ── No schedule — calendar ──────────────────────────────────────────── */
.um-empty-illust-schedule {
  --illust-primary: var(--um-brand-500);
  --illust-primary-light: var(--um-brand-100);
  --illust-accent: var(--um-accent-400);
  --illust-bg: var(--um-brand-50);
}

/* ── No notes — notebook ─────────────────────────────────────────────── */
.um-empty-illust-notes {
  --illust-primary: var(--um-brand-600);
  --illust-primary-light: var(--um-brand-100);
  --illust-accent: var(--um-success);
  --illust-bg: var(--um-brand-50);
}

/* ── No files — cloud ────────────────────────────────────────────────── */
.um-empty-illust-files {
  --illust-primary: var(--um-secondary-500);
  --illust-primary-light: var(--um-secondary-100);
  --illust-accent: var(--um-brand-400);
  --illust-bg: var(--um-secondary-50);
}

/* ── Generic empty ───────────────────────────────────────────────────── */
.um-empty-illust-generic {
  --illust-primary: var(--um-brand-500);
  --illust-primary-light: var(--um-brand-100);
  --illust-accent: var(--um-text-muted);
  --illust-bg: var(--um-neutral-100);
}

/* ── Dark Theme Illustration Overrides ───────────────────────────────── */
.theme-dark .um-empty-illust-dashboard,
.theme-dark .um-empty-illust-deadlines,
.theme-dark .um-empty-illust-grades,
.theme-dark .um-empty-illust-ai,
.theme-dark .um-empty-illust-friends,
.theme-dark .um-empty-illust-schedule,
.theme-dark .um-empty-illust-notes,
.theme-dark .um-empty-illust-files,
.theme-dark .um-empty-illust-generic {
  --illust-bg: rgba(255, 255, 255, 0.04);
  opacity: 0.9;
}