/* Alerts overlay styles (Alerts and notifications, 2026-09-30). Not part of the compiled Angular bundle.
   Uses the app's --ap-* tokens (apple-theme.css) with fallbacks; dark mode follows body.dark. Everything is prefixed alr-.
   Rollback: remove the alerts.css line from index.html. */
:root { --alr-blue: var(--ap-blue, #007aff); --alr-green: var(--ap-green, #34c759); --alr-red: var(--ap-red, #ff3b30); --alr-orange: var(--ap-orange, #ff9500);
  --alr-surface: var(--ap-surface, #fff); --alr-surface-2: var(--ap-surface-2, #fafafc); --alr-text: var(--ap-text, #1d1d1f); --alr-text-2: var(--ap-text-2, #6e6e73);
  --alr-hair: var(--ap-hair, rgba(60,60,67,.14)); --alr-fill: var(--ap-fill, rgba(120,120,128,.12)); --alr-shadow: 0 12px 40px rgba(0,0,0,.18);
  --alr-font: var(--ap-font, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif); --alr-ease: cubic-bezier(.2,.8,.2,1); --alr-warn: #b26a00; }
body.dark, body.theme-black, body.theme-dark { --alr-surface: var(--ap-surface, #1c1c1e); --alr-surface-2: var(--ap-surface-2, #242426); --alr-text: var(--ap-text, #f5f5f7);
  --alr-text-2: var(--ap-text-2, #a1a1a6); --alr-hair: var(--ap-hair, rgba(84,84,88,.55)); --alr-fill: var(--ap-fill, rgba(120,120,128,.28)); --alr-shadow: 0 16px 48px rgba(0,0,0,.6); --alr-warn: #ffb340; }

/* bell badge and dot */
.alr-bell { position: relative; }
.alr-badge { position: absolute; top: -3px; right: -9px; z-index: 1; box-sizing: border-box; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--alr-red); color: #fff; font: 600 10px/16px var(--alr-font); text-align: center; pointer-events: none; }
.alr-badge.alr-zero { display: none; }
.alr-dot { position: absolute; top: auto; bottom: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--alr-text-2); pointer-events: none; }
.alr-dot.on { background: var(--alr-green); }
.alr-dot.off { background: var(--alr-red); }
.alr-hidden-demo { display: none !important; }

/* panel */
.alr-panel { position: fixed; top: var(--alr-top, 64px); right: 12px; width: 400px; max-width: calc(100vw - 24px); max-height: calc(100vh - var(--alr-top, 64px) - 16px); display: flex; flex-direction: column; background: var(--alr-surface); color: var(--alr-text); border: 1px solid var(--alr-hair); border-radius: 12px; box-shadow: var(--alr-shadow); z-index: 1300; font-family: var(--alr-font); font-size: 13px; overflow: hidden; }
.alr-panel[hidden] { display: none; }
.alr-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--alr-hair); }
.alr-head h3 { margin: 0; font-size: 14px; font-weight: 600; flex: 1; }
.alr-head .alr-status { font-size: 11px; color: var(--alr-text-2); display: inline-flex; align-items: center; gap: 5px; }
.alr-head .alr-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--alr-red); display: inline-block; }
.alr-head .alr-status.on i { background: var(--alr-green); }
.alr-btn { border: 1px solid var(--alr-hair); background: var(--alr-surface-2); color: var(--alr-text); border-radius: 8px; padding: 4px 9px; font: 500 12px var(--alr-font); cursor: pointer; }
.alr-btn:hover { background: var(--alr-fill); }
.alr-btn.alr-primary { background: var(--alr-blue); border-color: var(--alr-blue); color: #fff; }
.alr-btn.alr-x { padding: 2px 7px; font-size: 15px; line-height: 1; }
.alr-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 12px; border-bottom: 1px solid var(--alr-hair); }
.alr-chip { border: 1px solid var(--alr-hair); border-radius: 999px; padding: 2px 9px; font-size: 11.5px; cursor: pointer; background: transparent; color: var(--alr-text-2); }
.alr-chip.on { background: var(--alr-blue); border-color: var(--alr-blue); color: #fff; }
.alr-list { overflow: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.alr-empty { padding: 28px 12px; text-align: center; color: var(--alr-text-2); }
.alr-item { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--alr-hair); cursor: pointer; }
.alr-item:hover { background: var(--alr-fill); }
.alr-item.unread { background: color-mix(in srgb, var(--alr-blue) 7%, transparent); }
.alr-item.unread .alr-title { font-weight: 600; }
.alr-sev { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--alr-text-2); }
.alr-sev.warning { background: var(--alr-orange); }
.alr-sev.error, .alr-sev.critical { background: var(--alr-red); }
.alr-sev.info { background: var(--alr-blue); }
.alr-sev.recovered { background: var(--alr-green); }
.alr-title { line-height: 1.3; word-break: break-word; }
.alr-meta { margin-top: 3px; font-size: 11px; color: var(--alr-text-2); display: flex; flex-wrap: wrap; gap: 4px 8px; }
.alr-meta .alr-tag { border: 1px solid var(--alr-hair); border-radius: 5px; padding: 0 5px; }
.alr-meta .alr-tag.state-open { color: var(--alr-warn); border-color: currentColor; }
.alr-meta .alr-tag.state-recovered { color: var(--alr-green); border-color: currentColor; }
.alr-time { font-size: 11px; color: var(--alr-text-2); white-space: nowrap; }
.alr-detail { grid-column: 1 / -1; background: var(--alr-surface-2); border-radius: 8px; padding: 8px 10px; font-size: 12px; }
.alr-detail dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; }
.alr-detail dt { color: var(--alr-text-2); }
.alr-detail dd { margin: 0; word-break: break-word; }
.alr-detail .alr-next { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--alr-hair); }
.alr-detail .alr-ref { font-family: var(--ap-mono, ui-monospace, Menlo, monospace); color: var(--alr-text-2); }
.alr-foot { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--alr-hair); align-items: center; }
.alr-foot a { color: var(--alr-blue); text-decoration: none; font-size: 12px; }
.alr-foot .alr-spacer { flex: 1; }

/* One compact automatic notice. It never takes a click/tap from the ticket beneath it; details live in the bell. */
.alr-toasts { position: fixed; right: 12px; bottom: 12px; width: 320px; max-width: calc(100vw - 24px); z-index: 1350; font-family: var(--alr-font); pointer-events: none; }
.alr-toast, .alr-toast * { pointer-events: none; }
.alr-toast { background: var(--alr-surface); color: var(--alr-text); border: 1px solid var(--alr-hair); border-left: 4px solid var(--alr-blue); border-radius: 10px; box-shadow: var(--alr-shadow); padding: 8px 12px; display: grid; gap: 3px; animation: alr-in .25s var(--alr-ease); font-size: 13px; }
.alr-toast.warning { border-left-color: var(--alr-orange); }
.alr-toast.error, .alr-toast.critical { border-left-color: var(--alr-red); }
.alr-toast.recovered { border-left-color: var(--alr-green); }
.alr-toast .alr-title { font-weight: 600; }
.alr-toast .alr-title, .alr-toast .alr-sub, .alr-toast .alr-local-failure { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 18px; }
.alr-toast .alr-sub, .alr-toast .alr-hint { font-size: 11.5px; color: var(--alr-text-2); }
.alr-toast .alr-local-failure { font-size: 11.5px; color: var(--alr-warn); }
.alr-toast .alr-local-failure[hidden] { display: none; }
.alr-toast .alr-hint { line-height: 16px; }
@keyframes alr-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .alr-toast { animation: none; } }

/* floating bell for detached windows (no header there) */
.alr-fab { position: fixed; left: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--alr-surface); border: 1px solid var(--alr-hair); box-shadow: var(--alr-shadow); z-index: 1300; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--alr-text); }
.alr-fab svg { width: 20px; height: 20px; }
.alr-fab .alr-badge { top: -4px; right: -4px; }

@media (max-width: 600px) {
  .alr-panel { right: 6px; left: 6px; width: auto; max-width: none; }
  .alr-toasts { right: 6px; left: 6px; width: auto; bottom: 12px; }
}