/* Alerts screen — segmented tabs, alert rows, rule rows, toast. */
.al-seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 2px; }
.al-seg.sm { border-radius: var(--r-sm); }
.al-seg-btn {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  color: var(--text-3); font-size: var(--fs-sm); font-weight: 500;
  padding: 6px 14px; border-radius: var(--r-sm); transition: background var(--t-fast), color var(--t-fast);
}
.al-seg.sm .al-seg-btn { padding: 4px 11px; font-size: var(--fs-xs); }
.al-seg-btn:hover { color: var(--text-1); }
.al-seg-btn.active { background: var(--bg-4); color: var(--text-1); }

.al-empty {
  padding: 48px 16px; text-align: center; color: var(--text-3);
  font-size: var(--fs-sm); display: flex; flex-direction: column; align-items: center; gap: 4px;
}

.alert-row:last-child { border-bottom: 0 !important; }
.alert-row:hover { background: var(--hover); }

.al-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--bg-4); color: var(--text-1); border: 1px solid var(--border-strong);
  padding: 10px 16px; border-radius: var(--r-md); font-size: var(--fs-sm);
  box-shadow: var(--shadow-pop); z-index: 1000;
  animation: al-toast-in var(--t-med) var(--ease-out);
}
@keyframes al-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Nav bell badge (unacked count). */
.nav-alert-dot {
  margin-left: auto; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--live); color: #fff;
  font-size: var(--fs-2xs); font-weight: 700; font-family: var(--font-mono);
  display: inline-flex; align-items: center; justify-content: center;
}

/* Global alert pause switch. */
.al-pause-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  margin-right: 8px; user-select: none;
}
.al-pause-toggle input { display: none; }
.al-pause-track {
  width: 38px; height: 21px; border-radius: 999px; background: var(--bg-4);
  border: 1px solid var(--border-strong); position: relative; transition: background var(--t-fast);
}
.al-pause-knob {
  position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--success); transition: transform var(--t-fast), background var(--t-fast);
}
.al-pause-toggle.on .al-pause-track { background: var(--warning-soft); border-color: var(--warning); }
.al-pause-toggle.on .al-pause-knob { transform: translateX(17px); background: var(--warning); }
.al-pause-label { font-size: var(--fs-sm); font-weight: 550; color: var(--text-3); min-width: 40px; }
.al-pause-toggle.on .al-pause-label { color: var(--warning); }

.al-paused-banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--warning-soft); border: 1px solid var(--warning);
  color: var(--text-1); padding: 10px 14px; border-radius: var(--r-md);
  margin-bottom: 14px; font-size: var(--fs-sm);
}
.al-paused-banner > span { flex: 1; }