/* Nirogi shared toast component - one file for the patient/storefront, pharmacy panel, and Super Admin sides (loaded on all three; see templates/base.html, templates/pharmacies/base.html and config/settings.py's UNFOLD["STYLES"]). Framework-independent plain CSS on purpose - the three sides don't share a CSS variable system or even the same Tailwind setup (admin's is a fixed precompiled bundle missing most color families; pharmacy/patient don't use Tailwind at all or use the live CDN build), so hardcoded values here are the only thing guaranteed to render the same everywhere. Dark mode: all three sides toggle a `dark` class on (confirmed), so one `html.dark` block below covers all of them - no per-side variants needed. */ .nirogi-toasts { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.6rem; max-width: min(380px, calc(100vw - 2rem)); pointer-events: none; } .nirogi-toast { position: relative; pointer-events: auto; display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 2.25rem 0.75rem 0.9rem; border-radius: 12px; font-size: 0.875rem; font-weight: 500; line-height: 1.4; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .15), 0 4px 6px -4px rgba(0, 0, 0, .1); border: 1px solid transparent; background: #fff; color: #1e293b; opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; } .nirogi-toast.is-visible { opacity: 1; transform: translateY(0); } .nirogi-toast.is-leaving { opacity: 0; transform: translateY(-8px); } .nirogi-toast-success { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; } .nirogi-toast-error { background: #fef2f2; color: #b91c1c; border-color: #fecaca; } .nirogi-toast-warning { background: #fffbeb; color: #b45309; border-color: #fde68a; } .nirogi-toast-info, .nirogi-toast-debug { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; } html.dark .nirogi-toast { background: #1e293b; color: #f1f5f9; border-color: #334155; } html.dark .nirogi-toast-success { background: rgba(21, 128, 61, .2); color: #4ade80; border-color: rgba(21, 128, 61, .4); } html.dark .nirogi-toast-error { background: rgba(185, 28, 28, .2); color: #f87171; border-color: rgba(185, 28, 28, .4); } html.dark .nirogi-toast-warning { background: rgba(180, 83, 9, .2); color: #fbbf24; border-color: rgba(180, 83, 9, .4); } html.dark .nirogi-toast-info, html.dark .nirogi-toast-debug { background: rgba(29, 78, 216, .2); color: #60a5fa; border-color: rgba(29, 78, 216, .4); } .nirogi-toast-text { flex: 1 1 auto; } .nirogi-toast-close { position: absolute; top: 0.35rem; right: 0.5rem; border: none; background: transparent; color: inherit; opacity: .6; font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0.15rem 0.3rem; } .nirogi-toast-close:hover { opacity: 1; } /* Super Admin (django-unfold) side: the items are Unfold's own
  • /color partial markup, kept exactly as shipped (see templates/unfold/helpers/messages.html) so its styling and dark-mode support keep tracking Unfold itself - only repositioned + given the same enter/leave animation here, never recolored. */ #nirogi-toast-messages { position: fixed; top: 1rem; right: 1rem; z-index: 9999; max-width: min(380px, calc(100vw - 2rem)); } #nirogi-toast-messages > li { opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; } #nirogi-toast-messages > li.is-visible { opacity: 1; transform: translateY(0); } #nirogi-toast-messages > li.is-leaving { opacity: 0; transform: translateY(-8px); } #nirogi-toast-messages .nirogi-toast-admin-item { position: relative; padding-right: 2.25rem !important; } @media (max-width: 480px) { .nirogi-toasts, #nirogi-toast-messages { left: 1rem; right: 1rem; max-width: none; } }