/* Canonical Flow C-018 toast styles and referenced tokens, scoped for the public Hubtrip host.
 * Source: flowtrip/css/flow-ds-2026.css, 2026-10-15. Runtime: exact copy of js/flow-utils.js. */
#flowtoast-container {
  --blue-50: #eef8fd;
  --border-subtle: var(--grey-200);
  --danger-500: #e0403f;
  --dur-base: 220ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --flow-navy: #0f172a;
  --flow-white: #ffffff;
  --fs-body-sm: 13px;
  --fs-caption: 12px;
  --fw-bold: 700;
  --grey-100: #eceff3;
  --grey-200: #dde2e8;
  --grey-400: #9aa4af;
  --grey-500: #6b7683;
  --grey-700: #343a40;
  --icon-lg: 24px;
  --icon-md: 20px;
  --info-500: #2286c0;
  --layer-toast: 1400;
  --lh-body: 1.55;
  --lh-snug: 1.35;
  --radius-lg: 12px;
  --radius-sm: 6px;
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --success-500: #16a34a;
  --surface-card: var(--flow-white);
  --surface-sunken: var(--grey-100);
  --text-primary: var(--grey-700);
  --text-secondary: var(--grey-500);
  --text-tertiary: var(--grey-400);
  --warning-500: #e8912a;
}
#flowtoast-container,
.flow-toast-container {
  position: fixed;
  z-index: var(--layer-toast);
  inset-block-start: calc(72px + env(safe-area-inset-top));
  inset-inline-end: max(var(--space-4), env(safe-area-inset-right));
  display: flex;
  width: min(400px, calc(100vw - 32px));
  max-height: calc(100dvh - 96px);
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

.flowtoast {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-inline-start: 4px solid var(--info-500);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  opacity: 0;
  pointer-events: auto;
  transform: translate3d(var(--space-3), 0, 0);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.flowtoast.show {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.flowtoast.hide {
  opacity: 0;
  transform: translate3d(var(--space-3), 0, 0);
}

.flowtoast.success {
  border-inline-start-color: var(--success-500);
}

.flowtoast.warning {
  border-inline-start-color: var(--warning-500);
}

.flowtoast.danger {
  border-inline-start-color: var(--danger-500);
}

.flowtoast.push {
  border-inline-start-color: var(--flow-navy);
  background: var(--blue-50);
}

.flowtoast__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-4);
}

.flowtoast__content,
.flowtoast__body > div:nth-child(2) {
  min-width: 0;
}

.flowtoast__icon {
  display: grid;
  width: var(--icon-lg);
  height: var(--icon-lg);
  place-items: center;
  color: var(--info-500);
}

.flowtoast.success .flowtoast__icon {
  color: var(--success-500);
}

.flowtoast.warning .flowtoast__icon {
  color: var(--warning-500);
}

.flowtoast.danger .flowtoast__icon {
  color: var(--danger-500);
}

.flowtoast.push .flowtoast__icon {
  color: var(--flow-navy);
  font-size: var(--icon-md);
}

.flowtoast.push .flowtoast__desc {
  white-space: pre-line;
}

/* Contexto do atendimento dentro do lembrete de tarefa: cliente e periodo da viagem.
   O icone e apoio visual — o dado sozinho ja se explica, porque nome de pessoa e data
   nao dependem de rotulo para serem lidos. */
.flow-reminder-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: .82rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.flow-reminder-meta > i {
  flex: none;
  width: 12px;
  font-size: .74rem;
  color: var(--text-tertiary);
  text-align: center;
}

.flowtoast__icon svg {
  display: block;
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.flowtoast__title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.flowtoast__desc {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
}

.flowtoast__close {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  place-items: center;
}

.flowtoast__close:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.flowtoast__bar {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  overflow: hidden;
  background: var(--grey-100);
}

.flowtoast__bar > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--info-500);
  transform: translateX(0);
  transform-origin: left center;
}

.flowtoast.success .flowtoast__bar > span {
  background: var(--success-500);
}

.flowtoast.warning .flowtoast__bar > span {
  background: var(--warning-500);
}

.flowtoast.danger .flowtoast__bar > span {
  background: var(--danger-500);
}

.flowtoast.push .flowtoast__bar > span {
  background: var(--flow-navy);
}

.flowtoast--persistent .flowtoast__body {
  padding-bottom: var(--space-3);
}


@media(prefers-reduced-motion:reduce){.flowtoast{transition:none}}