/* Floating mini badge styles unified for connection + offline sync status */
.mini-floating-badge {
  position: fixed;
  right: 20px;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  z-index: 8888;
  color: #fff;
  background: #4b5563; /* default gray */
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: .3px;
  transition: all .3s ease;
  backdrop-filter: blur(4px);
}

/* Stack positioning using CSS variable */
.mini-floating-badge[data-stack] { bottom: calc(15px + (var(--stack-index, 0) * 15px)); }

.mini-floating-badge.online { background: #10B981; }
.mini-floating-badge.offline { background: #F59E0B; }
.mini-floating-badge.pending { background: #1e3a8a; }
.mini-floating-badge.sync-ok { background: #16a34a; }
.mini-floating-badge.sync-error { background: #dc2626; }
.mini-floating-badge.sync-warn { background: #ca8a04; }

.mini-floating-badge.clickable { cursor: pointer; pointer-events: auto; }
.connection-status { pointer-events: none; }

/* Fade-out helper */
.mini-floating-badge.fade-out { opacity: 0; transform: translateY(4px); }
@media (max-width: 640px) {
  .mini-floating-badge { right: 12px; left: auto; }
  .mini-floating-badge[data-stack] { bottom: calc(15px + (var(--stack-index, 0) * 15px)); }
}