/* ============================================================
   Shared connection-status badge - public/js/connection-monitor.js
   Self-contained (no dependency on --db-* tokens from design-tokens.css)
   so it renders identically whether or not that file is loaded on a
   given layout (e.g. the POS fullscreen layout doesn't load it).
   ============================================================ */

.connection-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.connection-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.connection-online {
    background-color: #ecfdf3;
    color: #16a34a;
}

.connection-online .connection-dot {
    background-color: #16a34a;
}

.connection-poor,
.connection-reconnecting {
    background-color: #fffaeb;
    color: #b45309;
}

.connection-poor .connection-dot,
.connection-reconnecting .connection-dot {
    background-color: #b45309;
    animation: connection-pulse 1.4s infinite;
}

.connection-offline {
    background-color: #fef3f2;
    color: #dc2626;
}

.connection-offline .connection-dot {
    background-color: #dc2626;
}

@keyframes connection-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.35;
    }
}