/* Styles for the primitives in static/js/ui.js.

   Its own file rather than part of style.css, because the pages that need it
   are not the same set as the pages that load style.css: patient_profile_edit
   calls showToast and loads no site stylesheet at all, so its toast would have
   rendered as an unstyled div. Anything that links ui.js links this too.

   Templates that still carry their own toast rules override these by source
   order, which is deliberate: vhv_training_capture and vhv_upload_guided size
   their toasts in px "so browser/OS text-zoom doesn't inflate them".
*/
#globalToastContainer {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 1060;
  max-width: 420px;
  pointer-events: none;
}
.toast-vhv {
  background: white;
  border-left: 4px solid #0f857c;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: gToastIn 0.3s ease;
  pointer-events: auto;
}
.toast-vhv.success { border-left-color: #28a745; }
.toast-vhv.warning { border-left-color: #ffc107; }
.toast-vhv.error   { border-left-color: #dc3545; }
.toast-vhv.info    { border-left-color: #0d6efd; }
.toast-vhv-icon { font-size: 1.4rem; }
.toast-vhv.success .toast-vhv-icon { color: #28a745; }
.toast-vhv.warning .toast-vhv-icon { color: #ffc107; }
.toast-vhv.error   .toast-vhv-icon { color: #dc3545; }
.toast-vhv.info    .toast-vhv-icon { color: #0d6efd; }
.toast-vhv-content { flex: 1; font-size: 0.95rem; color: #343a40; }
.toast-vhv-close {
  background: none; border: none; font-size: 1.2rem;
  color: #6c757d; cursor: pointer; padding: 0; line-height: 1;
}
@keyframes gToastIn {
  from { transform: translateX(420px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}