/* AutosaveForm.js indicator and dirty-field marker.
   See ADR-008 and docs/superpowers/specs/2026-05-01-autosave-upsert-forms-design.md. */

.autosave-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid transparent;
    background: transparent;
    color: var(--bs-secondary, #6c757d);
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.4s;
}

.autosave-indicator .icon { display: inline-flex; }
.autosave-indicator .label { white-space: nowrap; }
.autosave-indicator .action { padding: 0; line-height: 1; }

/* States */

.autosave-indicator.state-idle {
    color: var(--bs-success, #198754);
    opacity: 0;          /* fade out when idle */
    pointer-events: none;
}

.autosave-indicator.state-saving {
    color: var(--bs-secondary, #6c757d);
    opacity: 1;
}

.autosave-indicator.state-saved {
    color: var(--bs-success, #198754);
    opacity: 1;
}

.autosave-indicator.state-validation {
    color: var(--bs-warning-text-emphasis, #997404);
    background-color: var(--bs-warning-bg-subtle, #fff3cd);
    border-color: var(--bs-warning-border-subtle, #ffe69c);
    opacity: 1;
    cursor: pointer;
}

.autosave-indicator.state-error,
.autosave-indicator.state-conflict {
    color: var(--bs-danger-text-emphasis, #58151c);
    background-color: var(--bs-danger-bg-subtle, #f8d7da);
    border-color: var(--bs-danger-border-subtle, #f1aeb5);
    opacity: 1;
}

/* Spinner for saving state */

.autosave-indicator.state-saving .icon i {
    animation: autosave-spin 0.9s linear infinite;
}

@keyframes autosave-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Dirty-field marker (left border on the input) */

.autosave-dirty {
    box-shadow: inset 3px 0 0 var(--bs-warning, #ffc107);
}

/* Tab error badges */

.nav-link[data-autosave-tab-errors] .badge.error-count {
    margin-left: 0.4rem;
}