/* ======================================================
   UI TOPBAR – STATUS & ACTIONS
   ====================================================== */

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  height: 36px;
  padding: 0 14px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;

  font-size: 13px;
  font-weight: 500;

  cursor: pointer;
}

/* ================= SUPPORT VPN ================= */

.support-vpn-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.support-switch {
  background: none;
  border: none;
  font-size: 13px;
  text-transform: uppercase;
  color: #ffb74d;
  cursor: pointer;
}

.support-switch.on {
  color: var(--green);
}

.support-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ffb74d;
}

.support-dot.on {
  background: var(--green);
}

/* ================= ALARM STATUS ================= */

#alarmStatusBar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#alarmStatusBar .alarm-dot.ok {
  background: var(--green);
}

#alarmStatusBar .alarm-dot.critical {
  background: var(--red);
}

#alarmStatusBar .alarm-text.ok {
  color: var(--green);
}

#alarmStatusBar .alarm-text.critical {
  color: var(--red);
  font-weight: 700;
}

/* ======================================================
 * TOPBAR – CRITICAL ALARM BLINK / PULSE (AUTHORITATIVE)
 * ====================================================== */

/* Critical visual state */
#alarmStatusBar.critical {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.6);
}

#alarmStatusBar.critical .alarm-dot {
  background: var(--red);
}

#alarmStatusBar.critical .alarm-text {
  color: var(--red);
  font-weight: 700;
}

/* Pulse animation */
@keyframes alarmPulse {
  0% {
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,0.3),
      0 0 0 0 rgba(239,68,68,0.45);
  }

  50% {
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,0.4),
      0 0 14px 4px rgba(239,68,68,0.85);
  }

  100% {
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,0.3),
      0 0 0 0 rgba(239,68,68,0.45);
  }
}

/* Apply pulse ONLY when JS adds .pulse */
#alarmStatusBar.pulse {
  animation: alarmPulse 1.8s ease-in-out infinite;
}

/* ================= ACK / RESOLVE ================= */

.alarm-actions {
  display: flex;
  gap: 8px;
}

.alarm-actions button {
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
}
/* ======================================================
 * TOPBAR – ALARM STATUS HOVER / CLICK AFFORDANCE
 * ====================================================== */

#alarmStatusBar {
  cursor: pointer;
}

#alarmStatusBar:hover {
  background: rgba(255,255,255,0.07);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.18),
    0 2px 8px rgba(0,0,0,0.45);
}

/* subtle text glow on hover */
#alarmStatusBar:hover .alarm-text {
  text-shadow: 0 0 6px rgba(255,255,255,0.35);
}