/**
 * Samtrygg Design System — Empty State Component
 * Version: 1.2 · April 2026
 *
 * Depends on: _tokens.css
 *
 * Usage:
 *   <div class="empty-state">
 *     <div class="empty-state__icon">
 *       <svg>...</svg>
 *     </div>
 *     <h3 class="empty-state__title">No saved homes</h3>
 *     <p class="empty-state__text">Tap the heart icon on any listing to save it here.</p>
 *     <a href="/search" class="btn btn--primary">Find a home</a>
 *   </div>
 *
 * Variants:
 *   .empty-state--compact    tighter, for use inside panels
 *   .empty-state--page       full page empty state (center of viewport)
 *
 * Rules (from governance document):
 *   - Always include: icon, heading, one-sentence explanation, primary CTA
 *   - Icon: monochrome, 48–56px, --text-secondary colour
 *   - Heading: --text-lg, font-weight 700
 *   - Never show during loading — use skeleton instead
 *   - Never use for error states — use alert instead
 *   - Product surfaces: centred within list area
 *   - Brand surfaces: full-section with generous spacing
 */


/* ── Base ─────────────────────────────────────────────────────────── */

.empty-state {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        var(--s-8) var(--s-5);
  gap:            0;
}


/* ── Icon container ───────────────────────────────────────────────── */

.empty-state__icon {
  width:            56px;
  height:           56px;
  border-radius:    50%;
  background:       var(--surface-raised);
  border:           1px solid var(--border-default);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  margin-bottom:    var(--s-3);
  flex-shrink:      0;
}

.empty-state__icon svg {
  width:        26px;
  height:       26px;
  stroke:       var(--text-secondary);
  fill:         none;
  stroke-width: 1.6;
}


/* ── Text ─────────────────────────────────────────────────────────── */

.empty-state__title {
  font-size:    var(--text-lg);
  font-weight:  700;
  margin:       0 0 var(--s-2);
  color:        var(--text-primary);
  letter-spacing: -0.01em;
  max-width:    36ch;
}

.empty-state__text {
  font-size:   var(--text-base);
  color:       var(--text-secondary);
  margin:      0 0 var(--s-4);
  max-width:   42ch;
  line-height: 1.6;
}


/* ── Actions ──────────────────────────────────────────────────────── */

.empty-state__actions {
  display:   flex;
  gap:       var(--s-2);
  flex-wrap: wrap;
  justify-content: center;
}


/* ── Compact variant (inside a panel or list area) ───────────────── */

.empty-state--compact {
  padding: var(--s-6) var(--s-4);
}

.empty-state--compact .empty-state__icon {
  width:  44px;
  height: 44px;
  margin-bottom: var(--s-2);
}

.empty-state--compact .empty-state__icon svg {
  width:  20px;
  height: 20px;
}

.empty-state--compact .empty-state__title {
  font-size: var(--text-md);
}

.empty-state--compact .empty-state__text {
  font-size: var(--text-sm);
  margin-bottom: var(--s-3);
}


/* ── Page variant (centred in viewport) ──────────────────────────── */

.empty-state--page {
  min-height:     60vh;
  justify-content: center;
  padding:        var(--s-8) var(--s-5);
}

.empty-state--page .empty-state__icon {
  width:  72px;
  height: 72px;
  margin-bottom: var(--s-4);
}

.empty-state--page .empty-state__icon svg {
  width:  34px;
  height: 34px;
}

.empty-state--page .empty-state__title {
  font-size: var(--text-2xl);
}

.empty-state--page .empty-state__text {
  font-size: var(--text-md);
}


/* ── Skeleton loader ──────────────────────────────────────────────── */
/*
 * Use skeleton instead of empty-state while content is loading.
 * Skeleton maintains the same layout as the loaded content.
 * Apply .skel to elements that should shimmer while loading.
 */

@keyframes skel-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.skel {
  background: linear-gradient(
    90deg,
    var(--sam-light) 25%,
    color-mix(in oklab, var(--sam-light) 60%, white) 50%,
    var(--sam-light) 75%
  );
  background-size: 200% auto;
  border-radius:   var(--radius-sm);
  animation:       skel-shimmer 1.6s linear infinite;
  color:           transparent !important;
  pointer-events:  none;
  user-select:     none;
}

.skel * {
  visibility: hidden;
}

/* Common skeleton sizes */
.skel-text    { height: 14px; border-radius: var(--radius-sm); }
.skel-title   { height: 22px; border-radius: var(--radius-sm); }
.skel-thumb   { border-radius: var(--radius-md); }
.skel-avatar  { border-radius: 50%; }
.skel-btn     { height: 44px; border-radius: var(--radius-pill); }
.skel-badge   { height: 22px; width: 80px; border-radius: var(--radius-pill); display: inline-block; }


/* ── Composite skeleton patterns ──────────────────────────────────── */
/*
 * Self-contained block patterns matching the layout of common content.
 * Use as drop-in placeholders inside a [data-state="loading"] container.
 * Markup is intentionally simple — copy and tune per page if needed.
 */

/* Generic stack of rows (table/list) */
.skel-rows {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.skel-rows__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  align-items: center;
  border-bottom: 1px solid var(--border-default);
}
.skel-rows__row:last-child { border-bottom: none; }

/* Card skeleton (agreement / listing card) */
.skel-card {
  background: var(--sam-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-3);
}

.skel-card + .skel-card { margin-top: var(--s-3); }

.skel-card__head {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}

.skel-card__actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .skel-card__head { grid-template-columns: 1fr 1fr; }
}

/* Listing card skeleton (image + meta) */
.skel-listing {
  background: var(--sam-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.skel-listing__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  border-radius: 0;
}

.skel-listing__body {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* Chat thread skeleton (avatar + name + preview) */
.skel-thread {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  align-items: center;
  border-bottom: 1px solid var(--border-default);
}

.skel-thread__avatar {
  width: 40px;
  height: 40px;
}

.skel-thread__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Stat / KPI card skeleton (Overview dashboard) */
.skel-stat {
  background: var(--sam-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}


/* ── State-host: toggle visibility based on data-state ────────────── */
/*
 * Wrap a list area with [data-state-host] and provide three child blocks:
 *   <div data-state="loaded"> ... real content ...</div>
 *   <div data-state="loading"> ...skeletons... </div>
 *   <div data-state="empty"> ...empty state... </div>
 *
 * _states.js reads ?state=loading|empty|loaded (default loaded) and adds
 * .is-state-loaded|loading|empty to the host. CSS below shows only the
 * active block.
 */

[data-state-host] > [data-state] { display: none !important; }
[data-state-host].is-state-loaded > [data-state="loaded"] { display: revert !important; }
[data-state-host].is-state-loading > [data-state="loading"] { display: revert !important; }
[data-state-host].is-state-empty   > [data-state="empty"]   { display: revert !important; }


/* ── Demo state-switcher (only visible on prototype, top-right) ───── */
/*
 * Auto-injected by _states.js. Lets reviewers cycle through states
 * without editing the URL.
 */
.state-demo {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1000;
  background: var(--sam-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: 4px;
  display: inline-flex;
  gap: 2px;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
  font-size: 12px;
}

.state-demo__btn {
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  min-height: 28px;
}

.state-demo__btn.is-on {
  background: var(--sam-dark);
  color: #fff;
}

@media (max-width: 480px) {
  .state-demo { bottom: 8px; right: 8px; }
  .state-demo__btn { padding: 5px 10px; font-size: 11px; }
}