/* ============================================================================
   Komponenten — Design-System (Phase 9)
   ----------------------------------------------------------------------------
   Konsumiert AUSSCHLIESSLICH Tokens aus theme-tokens.css. Keine
   Hard-Coded-Farben, keine Hard-Coded-Radii. Theme-Switch wirkt automatisch.

   Reihenfolge:  Skeletons → Toasts → Confirm-Dialog → Empty-State → KPI-Card.
   Diese Komponenten sind systemweit (Public + Admin) verwendbar.
============================================================================ */

/* ---------- Skeletons (Loading-Placeholder) ---------- */
.skel {
    background: linear-gradient(90deg,
                                  var(--c-surface-alt) 0%,
                                  var(--c-border) 50%,
                                  var(--c-surface-alt) 100%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
    color: transparent !important;
    user-select: none;
}
.skel--line { height: 12px; margin: 8px 0; }
.skel--card { height: 120px; border-radius: var(--radius-md); }
.skel--row  { height: 36px; margin: 6px 0; }
.skel--circle { width: 40px; height: 40px; border-radius: 50%; }
@keyframes skel-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Toast-System ---------- */
.toast-stack {
    position: fixed;
    bottom: 20px; right: 20px;
    display: flex; flex-direction: column; gap: 8px;
    z-index: 2000; pointer-events: none;
    max-width: 360px;
}
.toast {
    pointer-events: auto;
    background: var(--c-surface);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-info);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: var(--text-sm);
    display: flex; gap: 10px; align-items: flex-start;
    animation: toast-in 0.24s ease;
}
.toast--success { border-left-color: var(--c-success); }
.toast--warning { border-left-color: var(--c-warning); }
.toast--error   { border-left-color: var(--c-danger); }
.toast--info    { border-left-color: var(--c-info); }
.toast__close {
    margin-left: auto; cursor: pointer; opacity: 0.5;
    background: none; border: 0; color: inherit; font-size: 18px; line-height: 1;
}
.toast__close:hover { opacity: 1; }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Confirm-Dialog ---------- */
.dialog-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 1500; padding: 20px;
    animation: dialog-fade 0.16s ease;
}
.dialog {
    background: var(--c-surface); color: var(--c-text);
    border-radius: var(--radius-lg);
    max-width: 440px; width: 100%;
    box-shadow: var(--shadow-lg);
    padding: 22px 24px;
    border: 1px solid var(--c-border);
}
.dialog__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl); font-weight: 600;
    margin: 0 0 6px;
}
.dialog__body { color: var(--c-text-muted); margin-bottom: 16px; line-height: var(--leading-relaxed); }
.dialog__actions {
    display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
}
@keyframes dialog-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------- Empty-State ---------- */
.empty-state {
    text-align: center;
    padding: var(--space-10) var(--space-6);
    color: var(--c-text-muted);
}
.empty-state__icon {
    font-size: 36px; opacity: 0.5; margin-bottom: var(--space-3);
}
.empty-state__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--c-text);
    margin: 0 0 var(--space-2);
}
.empty-state__text { font-size: var(--text-sm); max-width: 380px; margin: 0 auto var(--space-4); }
.empty-state__cta { display: inline-block; }

/* ---------- KPI-Card ---------- */
.kpi-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}
.kpi-card__value {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--c-text);
    line-height: 1.2;
}
.kpi-card__label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-text-muted);
    margin-top: 4px;
}
.kpi-card__trend--up    { color: var(--c-success); font-size: var(--text-sm); }
.kpi-card__trend--down  { color: var(--c-danger);  font-size: var(--text-sm); }

/* ---------- Sichtbare Fokus-Styles für Accessibility ---------- */
:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}