/* Shared UI primitives (js/core/ui.js). Added 2026-09-02 replacing native browser
   dialogs. The .rcp-toast rules mirror the crew app's existing toast so the look does not
   left alone entirely: these rules use .rcp-toast, which only the element this module
   creates ever carries, so a page that already has a toast keeps exactly what it had. Variables fall back
   to literals because the admin console and the store define a smaller token set. */

.rcp-toast {
  position: fixed; bottom: 80px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface, #111f2e);
  border: 1px solid var(--border, #1a2d45);
  border-left: 3px solid var(--ok, #3a7a50);
  color: var(--text, #b8cce0);
  padding: 12px 18px; border-radius: 8px;
  font-size: 13px; line-height: 1.45; max-width: min(520px, calc(100vw - 32px));
  box-shadow: 0 8px 26px rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  z-index: 2147483001;
}
.rcp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.rcp-toast.warn { border-left-color: var(--warn, #b8860b); }
.rcp-toast.err  { border-left-color: var(--danger, #8c3a3a); }

.rcp-confirm-back {
  position: fixed; inset: 0; z-index: 2147483002;
  background: rgba(4, 9, 18, .62);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.rcp-confirm {
  width: 100%; max-width: 400px;
  background: var(--surface, #111f2e);
  border: 1px solid var(--border, #1a2d45);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  padding: 20px 20px 16px;
  color: var(--text, #b8cce0);
}
.rcp-confirm-msg { font-size: 14px; line-height: 1.55; margin-bottom: 18px; }
.rcp-confirm-row { display: flex; gap: 10px; justify-content: flex-end; }
.rcp-confirm-row button {
  min-height: 44px; padding: 0 18px; border-radius: 8px;
  font: 600 14px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  cursor: pointer; border: 1px solid var(--border, #1a2d45);
}
.rcp-confirm-no  { background: transparent; color: var(--text, #b8cce0); }
.rcp-confirm-yes { background: #0077cc; border-color: #0077cc; color: #fff; }
.rcp-confirm-yes.danger { background: #a33; border-color: #a33; }
.rcp-confirm-row button:focus-visible { outline: 2px solid #7eccff; outline-offset: 2px; }

body.day .rcp-confirm { background: #fff; color: #1a2030; border-color: #d0d6e0; }
body.day .rcp-confirm-no { color: #1a2030; border-color: #d0d6e0; }
body.day .rcp-toast { background: #fff; color: #1a2030; border-color: #d0d6e0; }