/* =====================================================================
   Kiteworks — Shared states: EMPTY STATE + TOAST
   ---------------------------------------------------------------------
   .estate  — reusable "nothing here yet / first run" block (orb · headline ·
              body · actions). Rendered via the estate() macro in
              components/macros.html.
   .toast   — flash confirmation after a state-changing action, pinned to the
              top inline-end corner (mirrors to the inline-start corner under
              [dir="rtl"] via logical insets). Server-rendered into
              #toast-region from the `flash` query param (see template_context);
              app.js wires close + auto-dismiss + icon render.

   Token-driven (--kw-* from tokens.css); only literals are the rebrand's status
   tints. The empty-state orb is self-contained (no .icon-orb primitive exists),
   matching dialog.css. Themed via html.dark (public) / html.light (admin).

   NOTE: the toast entrance animates TRANSFORM ONLY; resting opacity is 1.
   Do NOT animate opacity 0→1 — with `both` fill + reduced-motion the toast
   would stay invisible forever. (Same gotcha as the dialog + language picker.)
   ===================================================================== */

/* ============================================================
   EMPTY STATE — shared (orb · headline · body · actions)
   ============================================================ */
.estate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 56px 24px; }
/* hidden attr must actually hide (Tailwind's :where([hidden]) reset loses to the
   display:flex above) — the catalog empty state toggles via this attribute. */
.estate[hidden] { display: none !important; }
.estate__title { font-size: 18px; font-weight: 700; color: var(--kw-fg); letter-spacing: -0.01em; }
.estate__body { font-size: 14px; color: var(--kw-fg-muted); max-width: 380px; line-height: 1.55; }
.estate__actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.estate--bordered { border: 1px dashed var(--kw-border-color); border-radius: var(--kw-radius-xl); }
html.dark .estate--bordered { border-color: var(--kw-glass-stroke); }

/* self-contained orb (mirrors .dlg__orb): glass + white glyph on dark,
   solid brand blue + white glyph on light */
.estate__orb {
  position: relative; width: 60px; height: 60px; margin-bottom: 12px;
  display: grid; place-items: center; overflow: hidden;
  border-radius: var(--kw-radius-md);
  background: var(--kw-glass-fill);
  border: 1px solid var(--kw-glass-stroke);
  color: #fff;
}
.estate__orb::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(221, 214, 251, 0.45), rgba(221, 214, 251, 0));
}
.estate__orb > * { position: relative; }
.estate__orb [data-lucide], .estate__orb svg { width: 30px; height: 30px; }
html.dark .estate__orb { box-shadow: var(--kw-glow-glass); }
html.light .estate__orb { background: var(--kw-blue); border-color: var(--kw-blue); color: #fff; }
html.light .estate__orb::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)); }

/* The empty-state CTAs sit inline (auto width), not as block buttons. */
.estate__actions .kw-btn-primary,
.estate__actions .kw-btn-secondary { width: auto; min-width: 0; }

/* ============================================================
   TOAST — shared (success · error · info), top-right stack
   ============================================================ */
.toast-region { position: fixed; top: 16px; inset-inline-end: 16px; z-index: 300; display: flex; flex-direction: column; gap: 10px; width: 360px; max-width: calc(100vw - 32px); pointer-events: none; }
.toast { display: flex; gap: 11px; align-items: flex-start; padding: 13px 14px; border-radius: var(--kw-radius-md); pointer-events: auto; box-shadow: 0 16px 40px -12px rgba(11, 14, 36, 0.4); }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: kw-toast-in 220ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  [dir="rtl"] .toast { animation-name: kw-toast-in-rtl; }
}
@keyframes kw-toast-in { from { transform: translateX(12px); } to { transform: none; } }
@keyframes kw-toast-in-rtl { from { transform: translateX(-12px); } to { transform: none; } }
html.light .toast { background: #fff; border: 1px solid var(--kw-border-color); }
html.dark .toast { background: rgba(13, 15, 49, 0.96); border: 1px solid rgba(77, 96, 251, 0.3); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.toast__ico { width: 30px; height: 30px; border-radius: var(--kw-radius-sm); display: grid; place-items: center; flex-shrink: 0; }
.toast__ico [data-lucide], .toast__ico svg { width: 17px; height: 17px; }
.toast--success .toast__ico { background: rgba(43, 182, 115, 0.16); color: #1B8E5A; }
html.dark .toast--success .toast__ico { color: #43D693; }
.toast--error .toast__ico { background: rgba(229, 69, 69, 0.14); color: #C23434; }
html.dark .toast--error .toast__ico { color: #FF8A8A; }
.toast--info .toast__ico { background: rgba(77, 96, 251, 0.14); color: var(--kw-blue); }
html.dark .toast--info .toast__ico { color: var(--kw-soft-lavender); }
.toast__body { flex: 1; min-width: 0; padding-top: 1px; }
.toast__title { font-size: 14px; font-weight: 600; color: var(--kw-fg); }
.toast__msg { font-size: 13px; color: var(--kw-fg-muted); margin-top: 2px; line-height: 1.4; }
.toast__close { flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: var(--kw-radius-sm); background: transparent; color: var(--kw-fg-subtle); cursor: pointer; }
.toast__close:hover { background: var(--kw-bg-subtle); color: var(--kw-fg); }
.toast__close [data-lucide], .toast__close svg { width: 15px; height: 15px; }
.toast__accent { width: 3px; align-self: stretch; border-radius: 3px; flex-shrink: 0; }
.toast--success .toast__accent { background: var(--kw-teal); }
.toast--error .toast__accent { background: var(--kw-red); }
.toast--info .toast__accent { background: var(--kw-blue); }