/*
 * RiseUXCore - Autosave-Statusanzeige (RiseUXRuntime.saveStatus).
 *
 *   ✓ Gespeichert  ->  ● Änderungen  ->  ⟳ Speichert …  ->  ✓ Gespeichert
 *
 * Nur Motion-Tokens und die Keyframes aus motion.css - keine eigenen
 * Animationen. Unter prefers-reduced-motion sind die Tokens 0 ms; Icon,
 * Farbe und Text zeigen den Status weiterhin vollstaendig.
 */

.rise-save-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    color: #4b5563;
    background: transparent;
    transition: color var(--rise-motion-normal) var(--rise-ease-standard),
        background-color var(--rise-motion-normal) var(--rise-ease-standard);
}

.rise-save-status:empty {
    display: none;
}

.rise-save-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    font-size: 12px;
    line-height: 1;
}

.rise-save-status.is-changing .rise-save-status-label {
    animation: rise-motion-fade-in var(--rise-motion-normal) var(--rise-ease-enter) 1;
}

/* Ausgangszustand bewusst zurueckhaltend: nur ein leises Häkchen. */
.rise-save-status.is-clean {
    color: #6b7280;
    font-weight: 500;
}

.rise-save-status.is-clean .rise-save-status-icon,
.rise-save-status.is-saved .rise-save-status-icon {
    color: #16a34a;
}

.rise-save-status.is-saved {
    color: #166534;
}

/* Nach ~1,8 s tritt "✓ Gespeichert" zurueck auf die ruhige Clean-Optik. */
.rise-save-status.is-saved.is-settled {
    color: #6b7280;
    font-weight: 500;
    transition-duration: var(--rise-motion-slow);
}

.rise-save-status.is-saved.is-changing .rise-save-status-icon {
    animation: rise-motion-pop var(--rise-motion-slow) var(--rise-ease-enter) 1;
}

.rise-save-status.is-dirty {
    color: #92400e;
}

.rise-save-status.is-dirty .rise-save-status-icon {
    font-size: 9px;
    color: #d97706;
}

.rise-save-status.is-saving {
    color: #264153;
}

/* Spinner ohne eigenes Markup: das leere Icon wird zum Ring. */
.rise-save-status.is-saving .rise-save-status-icon {
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: rise-motion-spin .8s linear infinite;
}

.rise-save-status.is-error {
    color: #b3261e;
    background: #fef2f2;
}

.rise-save-status.is-error .rise-save-status-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #b3261e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .rise-save-status.is-changing .rise-save-status-label,
    .rise-save-status.is-saved.is-changing .rise-save-status-icon {
        animation: none !important;
    }

    /* Kein Drehen, der offene Ring zeigt "laeuft" auch still. */
    .rise-save-status.is-saving .rise-save-status-icon {
        animation: none !important;
    }
}