/* Duo bar toasts — extracted for RO + Admin layouts (UI_Template/component-toasts.html) */
.toast:not(.show) {
  display: none;
}

.toast.toast-bar {
  font-family: Inter, Roboto, sans-serif;
  opacity: 1 !important;
  position: fixed;
  z-index: 9999;
  border: none;
  transition: all 350ms ease;
  left: 50%;
  width: min(320px, calc(100vw - 24px));
  margin-left: 0;
  transform: translateX(-50%) translateY(-200px);
  background-color: transparent;
  box-shadow: none;
  padding: 5px;
  display: none;
  align-items: center;
}

.toast.toast-bar:not(.show) {
  display: none !important;
}

.toast.toast-bar.show {
  display: flex !important;
  transform: translateX(-50%) translateY(0);
  transition: all 250ms ease;
}

.toast.toast-top {
  top: calc(16px + env(safe-area-inset-top, 0px));
}

.toast.toast-bar.bg-green-dark,
.toast.toast-bar.bg-red-dark,
.toast.toast-bar.bg-yellow-dark,
.toast.toast-bar.bg-blue-dark {
  border-radius: 12px;
  padding: 10px 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.toast.toast-bar.bg-green-dark { background: #8cc152 !important; }
.toast.toast-bar.bg-red-dark { background: #da4453 !important; }
.toast.toast-bar.bg-yellow-dark { background: #f6b73e !important; }
.toast.toast-bar.bg-blue-dark { background: #4a89dc !important; }

.toast.toast-bar .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  /* Duo .icon-s uses line-height:42px — keep the glyph box from stretching the bar */
  line-height: 1 !important;
  flex-shrink: 0;
}

.toast.toast-bar .bg-green-light { background: rgba(255, 255, 255, 0.25); }
.toast.toast-bar .bg-blue-light { background: rgba(255, 255, 255, 0.25); }
.toast.toast-bar .color-white { color: #fff; }
.toast.toast-bar .btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); }

/*
 * Duo demos use mb-n2/mt-n1 to tuck a single-line body under the title.
 * On wrapped bodies that overlap makes line 2 look widely spaced — use a real stack instead.
 */
.toast.toast-bar .ro-toast-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  line-height: 1.25;
}

.toast.toast-bar [data-ro-toast-title],
.toast.toast-bar [data-ro-toast-message] {
  display: block;
  margin: 0 !important;
  line-height: 1.25;
}

.toast.toast-bar [data-ro-toast-message] {
  white-space: normal;
  word-break: break-word;
}