/* Blue UX enhancements — additive, global. Loaded once from layouts/blue/app.
   Bundles: toasts, copy-to-clipboard affordance, count-up (no extra CSS),
   scroll-to-top button, sticky table headers (JS-gated to long tables).
   Reversible: remove the <link> in layouts/blue/app.blade.php. (2026-06-04) */

/* ---------- Toasts ---------- */
.ux-toasts{position:fixed;z-index:9999;left:50%;bottom:24px;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;max-width:92vw}
.ux-toast{pointer-events:auto;display:flex;align-items:center;gap:9px;
  font-family:var(--font-mono,monospace);font-size:.8rem;line-height:1.3;
  color:var(--ink,#16202a);background:var(--surface,#fff);
  border:var(--hairline,1px solid rgba(20,32,42,.12));border-left:3px solid #0a7d56;
  border-radius:10px;padding:10px 14px;box-shadow:0 8px 28px rgba(16,32,42,.16);
  max-width:min(440px,90vw);opacity:0;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease}
.ux-toast.is-in{opacity:1;transform:translateY(0)}
.ux-toast--error{border-left-color:#c0492a}
.ux-toast--info{border-left-color:#e8724a}
.ux-toast__x{margin-left:4px;border:0;background:transparent;cursor:pointer;
  color:var(--slate,#5b6b78);font-size:.95rem;line-height:1;padding:0 2px}

/* ---------- Copy-to-clipboard affordance ---------- */
.ux-copy-btn{border:0;background:transparent;cursor:pointer;padding:0 4px;margin-left:4px;
  color:var(--slate,#5b6b78);font-size:.82em;line-height:1;border-radius:6px;
  vertical-align:baseline;transition:color .15s ease,background .15s ease}
.ux-copy-btn:hover{color:#0a7d56;background:color-mix(in oklab,#0a7d56 14%,transparent)}
.ux-copy-btn.is-done{color:#0a7d56}
[data-copy]{cursor:pointer}

/* ---------- Scroll-to-top ---------- */
.ux-totop{position:fixed;right:20px;bottom:22px;z-index:60;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
  border:var(--hairline,1px solid rgba(20,32,42,.14));background:var(--surface,#fff);
  color:var(--ink,#16202a);box-shadow:0 6px 20px rgba(16,32,42,.16);font-size:1rem;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s}
.ux-totop.is-show{opacity:1;visibility:visible;transform:translateY(0)}
.ux-totop:hover{border-color:#e8724a;color:#e8724a}
@media(max-width:680px){.ux-totop{right:14px;bottom:16px}}

/* ---------- Sticky table headers (only tables tagged .ux-sticky-head by JS) ---------- */
.ux-sticky-head thead th{position:sticky;top:0;z-index:3;
  background:var(--surface,#fff);box-shadow:inset 0 -1px 0 rgba(20,32,42,.12)}

/* ---------- Command palette (⌘K) ---------- */
.ux-pal{position:fixed;inset:0;z-index:10000}
.ux-pal[hidden]{display:none}
.ux-pal__bd{position:absolute;inset:0;background:rgba(16,24,32,.45)}
.ux-pal__box{position:relative;max-width:560px;margin:12vh auto 0;background:var(--surface,#fff);
  border:var(--hairline,1px solid rgba(20,32,42,.12));border-radius:14px;box-shadow:0 24px 70px rgba(16,32,42,.3);overflow:hidden}
.ux-pal__in{width:100%;box-sizing:border-box;border:0;border-bottom:var(--hairline,1px solid rgba(20,32,42,.12));
  padding:15px 18px;font-family:var(--font-display,sans-serif);font-size:1rem;color:var(--ink,#16202a);background:transparent;outline:none}
.ux-pal__list{max-height:52vh;overflow:auto}
.ux-pal__item{display:flex;align-items:center;gap:10px;padding:10px 18px;cursor:pointer;
  font-family:var(--font-display,sans-serif);font-size:.9rem;color:var(--ink,#16202a)}
.ux-pal__item.is-on{background:color-mix(in oklab,#e8724a 12%,transparent)}
.ux-pal__g{font-family:var(--font-mono,monospace);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate,#5b6b78);border:var(--hairline,1px solid rgba(20,32,42,.12));border-radius:6px;padding:2px 6px}
.ux-pal__empty{padding:16px 18px;color:var(--slate,#5b6b78);font-family:var(--font-mono,monospace);font-size:.8rem}
.ux-pal__ft{padding:8px 18px;border-top:var(--hairline,1px solid rgba(20,32,42,.12));font-family:var(--font-mono,monospace);font-size:.62rem;color:var(--slate,#5b6b78)}
.ux-pal__ft kbd{background:color-mix(in oklab,var(--slate) 16%,transparent);border-radius:4px;padding:1px 5px;margin:0 1px}

/* ---------- Notification bell dropdown ---------- */
.ux-bell__menu{position:absolute;right:0;top:calc(100% + 8px);width:340px;max-width:88vw;z-index:70;
  background:var(--surface,#fff);border:var(--hairline,1px solid rgba(20,32,42,.12));border-radius:12px;
  box-shadow:0 16px 44px rgba(16,32,42,.2);overflow:hidden}
.ux-bell__menu[hidden]{display:none}
.ux-bell__hd{padding:10px 14px;border-bottom:var(--hairline,1px solid rgba(20,32,42,.12));font-family:var(--font-mono,monospace);
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate,#5b6b78)}
.ux-bell__list{max-height:60vh;overflow:auto}
.ux-bell__sos{padding:11px 14px;border-bottom:var(--hairline,1px solid rgba(20,32,42,.12));border-left:3px solid #e8724a;
  font-family:var(--font-mono,monospace);font-size:.74rem;color:#c0492a}
.ux-bell__item{padding:10px 14px;border-bottom:1px solid color-mix(in oklab,var(--slate) 12%,transparent)}
.ux-bell__t{font:600 .8rem/1.2 var(--font-display,sans-serif);color:var(--ink,#16202a)}
.ux-bell__m{font-family:var(--font-mono,monospace);font-size:.7rem;color:var(--slate,#5b6b78);margin-top:2px}
.ux-bell__time{font-family:var(--font-mono,monospace);font-size:.6rem;color:var(--slate,#5b6b78);margin-top:3px;opacity:.8}
.ux-bell__empty{padding:16px 14px;color:var(--slate,#5b6b78);font-family:var(--font-mono,monospace);font-size:.76rem}
.ux-bell__badge{position:absolute;top:-3px;right:-3px;min-width:7px;height:7px;border-radius:99px;background:#c0492a}
.ux-bell__more{display:block;padding:10px 14px;border-top:var(--hairline,1px solid rgba(20,32,42,.12));font-family:var(--font-mono,monospace);font-size:.7rem;color:#0a7d56;text-decoration:none}
.ux-bell__more:hover{background:color-mix(in oklab,#0a7d56 8%,transparent)}
.ux-palbtn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;background:transparent;
  border:var(--hairline,1px solid rgba(20,32,42,.14));border-radius:99px;padding:5px 10px;color:var(--slate,#5b6b78);
  font-family:var(--font-mono,monospace);font-size:.72rem}
.ux-palbtn:hover{border-color:#e8724a;color:#e8724a}
.ux-palbtn kbd{background:color-mix(in oklab,var(--slate) 16%,transparent);border-radius:4px;padding:1px 5px;font-size:.62rem}
@media(max-width:880px){.ux-palbtn__lbl{display:none}}

@media (prefers-reduced-motion: reduce){
  .ux-toast,.ux-totop{transition:none}
}