/* ═══════════════════════════════════════════════════════════
   WAVBASE SHARED COMPONENTS
   Dialog, Spinner, Scrollbar, Shared Animations.
   Importiert zusammen mit wavbase-tokens.css in jeder Seite.
   ═══════════════════════════════════════════════════════════ */

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--muted)); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)); }

/* ─── Dialog/Modal ─── */
.dialog-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 300; align-items: center; justify-content: center; backdrop-filter: blur(3px); }
.dialog-overlay.open { display: flex; }
.dialog { background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 16px; width: 90%; max-width: 480px; animation: dialogIn 0.2s ease; box-shadow: var(--shadow-card-sheet-hover, 0 12px 32px rgba(0,0,0,0.18)); }
.dialog-head { padding: 1.25rem 1.5rem; border-bottom: 1px solid hsl(var(--border)); display: flex; align-items: center; justify-content: space-between; }
.dialog-head h3 { font-size: 1rem; font-weight: 600; }
.dialog-body { padding: 1.5rem; max-height: 70vh; overflow-y: auto; }
.dialog-footer { padding: 1rem 1.5rem; border-top: 1px solid hsl(var(--border)); display: flex; justify-content: flex-end; gap: 0.5rem; }

/* ─── Spinner ─── */
.spinner { width: 14px; height: 14px; border: 2px solid hsl(var(--border)); border-top-color: hsl(var(--gold)); border-radius: 50%; animation: spin 0.6s linear infinite; }
.spinner-md { width: 24px; height: 24px; }
.spinner-lg { width: 32px; height: 32px; }

/* ─── Empty/Loading States ─── */
.empty-state { text-align: center; padding: 3rem 1.5rem; color: hsl(var(--muted-foreground)); }
.empty-icon { font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.2; }
.empty-text { font-size: 0.82rem; line-height: 1.6; }
.loading-state { display: flex; align-items: center; justify-content: center; padding: 3rem; color: hsl(var(--muted-foreground)); font-size: 0.78rem; gap: 0.5rem; }

/* ─── Shared Animations ─── */
@keyframes dialogIn { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }