/* UZZAP shared alert-bar component (webapp/alerts.css). Included by every page
   that shows user notices (reset.html, index.html, admin.html) via a single
   absolute <link href="/app/alerts.css"> — /app/ is the whole webapp/ folder,
   mounted as static files in app/main.py, so the path resolves from any route.

   Colors fall back through each page's OWN existing tokens (--pos/--neu/--neg
   where defined, else --acc2/--gold) so the bars automatically pick up
   whichever palette + light/dark theme that page already has, without any
   page needing to redefine variables for this component. --info is the one
   genuinely new token (no page had a blue accent), so it's defined here. */
:root{--info:#4FA8F0}
html[data-theme="dark"]{--info:#6FBBF5}

.ua-alert{display:flex;align-items:flex-start;gap:12px;padding:14px 40px 14px 16px;border-radius:11px;margin:10px 0;font-size:14.5px;line-height:1.5;position:relative;font-family:var(--body,inherit)}
.ua-alert b{font-weight:600}
.ua-alert .ua-x{position:absolute;top:10px;right:10px;cursor:pointer;opacity:.55;font-size:13px;background:none;border:none;color:inherit;line-height:1;padding:4px}
.ua-alert .ua-x:hover{opacity:.9}

.ua-alert.ua-danger{background:color-mix(in srgb,var(--neg) 14%,var(--paper,var(--card,#fff)));border-left:3px solid var(--neg);color:color-mix(in srgb,var(--neg) 60%,var(--ink,#222))}
.ua-alert.ua-success{background:color-mix(in srgb,var(--pos,var(--acc2,#84990F)) 16%,var(--paper,var(--card,#fff)));border-left:3px solid var(--pos,var(--acc2,#84990F));color:color-mix(in srgb,var(--pos,var(--acc2,#84990F)) 55%,var(--ink,#222))}
.ua-alert.ua-warning{background:color-mix(in srgb,var(--neu,var(--gold,#E8951C)) 16%,var(--paper,var(--card,#fff)));border-left:3px solid var(--neu,var(--gold,#E8951C));color:color-mix(in srgb,var(--neu,var(--gold,#E8951C)) 55%,var(--ink,#222))}
.ua-alert.ua-info{background:color-mix(in srgb,var(--info) 14%,var(--paper,var(--card,#fff)));border-left:3px solid var(--info);color:color-mix(in srgb,var(--info) 60%,var(--ink,#222))}

/* Floating variant (index.html's toast) — same bar, fixed position, auto-hide
   handled in JS (alerts.js), manual "x" also available. */
.ua-toast-wrap{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);z-index:999;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;max-width:min(90vw,480px)}
.ua-toast-wrap.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.ua-toast-wrap .ua-alert{margin:0;box-shadow:0 8px 30px -10px rgba(0,0,0,.35)}