/* v2 additions — new UI pieces only, built from the existing tokens in app.css. */

/* ---------- Framework error bar ---------- */
#blazor-error-ui {
  display: none;
  position: fixed;
  inset-inline: 16px;
  bottom: 16px;
  z-index: 1000;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-2);
  font-size: 14px;
}
#blazor-error-ui a { color: var(--on-primary); font-weight: 700; margin-inline: 8px; }
#blazor-error-ui .dismiss { cursor: pointer; float: inline-end; }

/* ---------- Centered status pages (not found / error) ---------- */
.v2-center-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-container) 100%);
}
.v2-center-card {
  max-width: 440px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--surface-highest);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 34px 30px;
  text-align: center;
}
.v2-center-card h1 { font-size: 24px; color: var(--primary); }
.v2-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 14px;
}

/* ---------- Skeleton placeholders (streaming rendering) ---------- */
.skeleton {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--surface-container) 0%, var(--surface-high) 50%, var(--surface-container) 100%);
  background-size: 200% 100%;
  animation: v2-shimmer 1.2s ease-in-out infinite;
}
.skeleton-line { height: 14px; margin: 8px 0; }
.skeleton-tile { height: 92px; }
.skeleton-block { height: 220px; }
@keyframes v2-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Toasts (admin actions) ---------- */
.toast-host {
  position: fixed;
  inset-inline-end: 20px;
  bottom: 20px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(380px, calc(100vw - 40px));
}
.toast {
  padding: 12px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--surface-highest);
  border-inline-start: 4px solid var(--secondary);
  box-shadow: var(--shadow-2);
  font-size: 14px;
  color: var(--on-surface);
  animation: v2-toast-in 180ms ease-out;
}
.toast.ok { border-inline-start-color: #1c5e26; }
.toast.err { border-inline-start-color: var(--error); }
@keyframes v2-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Page transitions (enhanced navigation) ---------- */
.admin-main > *, .launcher { animation: v2-fade 140ms ease-out; }
@keyframes v2-fade { from { opacity: 0.4; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Login: demo credentials ---------- */
.login-demo {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-low);
  border: 1px solid var(--surface-highest);
  font-size: 13px;
}
.login-demo-title { font-weight: 700; color: var(--primary); margin-bottom: 6px; }
.login-demo-row { display: flex; flex-direction: column; padding: 4px 0; }
.login-demo-row + .login-demo-row { border-top: 1px solid var(--surface-highest); }
.login-demo-role { color: var(--on-surface-variant); font-size: 12px; text-transform: capitalize; }
.login-demo code { font-size: 12px; }
.login-demo p { margin: 8px 0 0; font-size: 12px; }

/* ---------- Admin: AI provider failing ---------- */
.ai-health a { margin-inline-start: 8px; font-weight: 700; }