/* Keep the counter beside the clock, using the application's controls and palette. */
#headerAlerts{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;align-self:center}
#headerAlerts[hidden],#headerAlerts button[hidden]{display:none!important}
#headerAlerts .header-alerts-count{display:inline-flex;align-items:center;gap:7px;height:40px!important;min-height:40px!important;padding:10px 14px;font-size:14px;white-space:nowrap}
#headerAlerts strong{font-size:15px;font-variant-numeric:tabular-nums;min-width:2ch;text-align:center}
#headerAlerts .header-alerts-exceeded{color:var(--status-bad,#b42318)!important;background:var(--status-bad-bg,#fee4e2)!important;border-color:currentColor!important;animation:header-alerts-pulse 1.6s ease-in-out infinite}
@keyframes header-alerts-pulse{0%,100%{opacity:1}50%{opacity:.45}}
#headerAlertsDialog{width:min(440px,calc(100vw - 24px));padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--panel,#fff);color:var(--ink)}
#headerAlertsDialog::backdrop{background:rgba(0,0,0,.4)}
#headerAlertsDialog h2{font-size:20px;margin:0 0 16px}
#headerAlertsDialog label{display:block;margin:16px 0 8px}
#headerAlertsDialog input{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--panel,#fff);color:var(--ink)}
#headerAlertsDialog .header-alerts-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
@media(max-width:760px){#headerAlerts{order:-1}}
@media(prefers-reduced-motion:reduce){#headerAlerts .header-alerts-exceeded{animation:none;outline:2px solid currentColor}}