/* BRIEF #83 — Chip "Sauvegardé il y a Ns" */
.save-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  background: var(--color-bg-soft, #F3F4F6);
  color: var(--color-text-muted, #6B7280);
  border: 1px solid var(--color-border, #E5E7EB);
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
  user-select: none;
  white-space: nowrap;
  cursor: default;
}

.save-indicator .save-ind-icon {
  font-size: 13px;
  line-height: 1;
}

.save-indicator-idle {
  background: var(--color-bg-soft, #F3F4F6);
  color: var(--color-text-muted, #6B7280);
}

.save-indicator-dirty {
  background: var(--gray-100, #F3F4F6);
  color: var(--color-text, #374151);
  border-color: var(--gray-300, #D1D5DB);
}

.save-indicator-saving {
  background: var(--blue-50, #EFF6FF);
  color: var(--blue-700, #1D4ED8);
  border-color: var(--blue-200, #BFDBFE);
}

.save-indicator-saved {
  background: var(--green-50, #ECFDF5);
  color: var(--green-700, #047857);
  border-color: var(--green-200, #A7F3D0);
}

.save-indicator-error {
  background: var(--red-50, #FEF2F2);
  color: var(--red-700, #B91C1C);
  border-color: var(--red-200, #FECACA);
}

.save-indicator-offline {
  background: var(--amber-50, #FFFBEB);
  color: var(--amber-700, #B45309);
  border-color: var(--amber-200, #FDE68A);
}

/* Host : positionné en haut à droite du pg-dossier, sticky pour rester visible
   au scroll. On laisse le markup parent absolu/relative arbitrer. */
#save-indicator-host {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  margin-bottom: -28px; /* ne décale pas le layout */
}
#save-indicator-host .save-indicator {
  pointer-events: auto;
  margin-top: 2px;
}

/* Dark mode */
body.dark .save-indicator-idle,
body.dark .save-indicator-dirty {
  background: #2D3748;
  color: #CBD5E0;
  border-color: #4A5568;
}
body.dark .save-indicator-saving {
  background: #1E3A5F;
  color: #93C5FD;
  border-color: #2B6CB0;
}
body.dark .save-indicator-saved {
  background: #14532D;
  color: #A7F3D0;
  border-color: #166534;
}
body.dark .save-indicator-error {
  background: #4A1414;
  color: #FCA5A5;
  border-color: #7F1D1D;
}
body.dark .save-indicator-offline {
  background: #4A3211;
  color: #FCD34D;
  border-color: #92400E;
}

/* Mobile compact */
@media (max-width: 640px) {
  .save-indicator {
    font-size: 11px;
    padding: 0 9px;
    height: 24px;
    border-radius: 12px;
  }
  .save-indicator .save-ind-icon { font-size: 12px; }
}