/* ════════════════════════════════════════════════════════════════════════
   empty-state.css — Reusable empty states (batch D, additive & opt-in)
   ────────────────────────────────────────────────────────────────────────
   The `.empty-state` primitive (+ hyphenated children `.empty-state-icon/-title/
   -text/-action` and `.halo`) already lives in ui-kit.css. This file:
     1. exposes BEM ALIASES (`.empty-state__icon/__title/__text/__action`)
        for the views/partials/empty-state.ejs partial, without breaking anything;
     2. adds subtle brand decoration (desaturated blue halo in the background);
     3. refines the line-art SVG icon (thin stroke, color through the tokens).
   Uses only the app.css tokens. Dark variants inherited from
   tokens. reduced-motion honored (no heavy animation here).
   ════════════════════════════════════════════════════════════════════════ */

/* Container — reuses the ui-kit primitive; this only ensures centering
   and a subtle card background when the empty state is used alone (outside .app-card). */
.empty-state {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: clamp(2rem, 6vw, 3.5rem) 1.5rem;
  overflow: hidden;
}

/* Soft brand halo behind the pictogram (decorative, intercepts nothing).
   Added via ::before so no extra .halo markup is required. */
.empty-state::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(420px, 90%);
  height: 220px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(60% 80% at 50% 0%,
              var(--brand-sig-halo, rgba(94,127,168,0.14)) 0%, transparent 70%);
}
.empty-state > * { position: relative; z-index: 1; }

/* ─── BEM aliases (__) → match the rendering of ui-kit's hyphenated children ─── */
.empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-xl, 18px);
  background: var(--fill-secondary);
  color: var(--tint, #0f2544);
}
.empty-state__icon svg { width: 30px; height: 30px; }

.empty-state__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--label-primary);
}

.empty-state__text {
  margin: 0;
  max-width: 38ch;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--label-secondary);
}

.empty-state__action { margin-top: 0.75rem; }

/* In dark mode, the icon gets more readable contrast (navy becomes less
   visible against a dark background). */
:root[data-theme="dark"] .empty-state__icon { color: var(--label-primary); }
:root[data-theme="dark"] .empty-state-icon  { color: var(--label-primary); }

/* Compact variant (empty states in a narrow, single-column card). */
.empty-state--compact { padding: clamp(1.25rem, 4vw, 2rem) 1rem; }
.empty-state--compact .empty-state__icon,
.empty-state--compact .empty-state-icon { width: 52px; height: 52px; }
.empty-state--compact .empty-state__icon svg,
.empty-state--compact .empty-state-icon svg { width: 26px; height: 26px; }

/* ─── Adaptive height ───────────────────────────────────────────────────
   In a grid, a card whose content is an empty state is stretched
   (default grid behavior), but its content remained stuck at the top,
   leaving a large empty space under the text. Here, the container becomes a
   flex column and the empty state takes up the remaining height, centring itself.
   Additive: applies only to containers that have an empty state as a direct
   child. */
.app-card:has(> .empty-state),
.compo-panel:has(> .empty-state) {
  display: flex;
  flex-direction: column;
}
.app-card > .empty-state,
.compo-panel > .empty-state {
  flex: 1 1 auto;
  justify-content: center;
}