/* =============================================================================
 * vsuite — vautosave.css (geteilte UX-Komponente, vsuite/assets/)
 *
 * Feldnaher, dezenter Speicher-Indikator + kurzer Sicher-Blitz. Gehoert zu
 * vautosave.js. Branding per CSS-Var --vt-accent (sonst Bootstrap-Primary).
 * ========================================================================== */

.vautosave-anchor { position: relative; }
.vautosave-wrap   { display: block; }

/* Kleiner Status-Badge oben rechts an der Feldzelle. */
.vautosave-status {
    position: absolute;
    top: .15rem;
    right: .4rem;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .05rem .3rem;
    border-radius: .5rem;
    font-size: .68rem;
    line-height: 1.25;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-.1rem);
    transition: opacity .16s ease, transform .16s ease;
}
.vautosave-status.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.vautosave-status > .bi { font-size: .8rem; }
.vautosave-status .vautosave-label { font-weight: 500; }

.vautosave-status.is-saving {
    color: var(--vt-accent, #0d6efd);
    background: color-mix(in srgb, var(--vt-accent, #0d6efd) 10%, transparent);
}
.vautosave-status.is-saved {
    color: #198754;
    background: rgba(25, 135, 84, .1);
}
.vautosave-status.is-error {
    color: #dc3545;
    background: rgba(220, 53, 69, .12);
    pointer-events: auto;   /* Titel-Tooltip erreichbar */
}

/* Auf sehr schmalen Feldern nur das Icon zeigen (Label wuerde ueberlappen). */
@media (max-width: 480px) {
    .vautosave-status .vautosave-label { display: none; }
}

.vautosave-spin {
    display: inline-block;
    animation: vautosave-spin 0.9s linear infinite;
}
@keyframes vautosave-spin { to { transform: rotate(360deg); } }

/* Kurzer gruener Rahmen-Blitz auf dem gesicherten Feld. */
.vautosave-flash {
    animation: vautosave-flash 0.9s ease-out;
}
@keyframes vautosave-flash {
    0%   { box-shadow: 0 0 0 0 rgba(25, 135, 84, .0); }
    18%  { box-shadow: 0 0 0 .18rem rgba(25, 135, 84, .35); }
    100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

/* Reduzierte Bewegung respektieren. */
@media (prefers-reduced-motion: reduce) {
    .vautosave-spin { animation: none; }
    .vautosave-flash { animation: none; }
    .vautosave-status { transition: none; }
}