/* app/static/css/system_messages.css */
/* Unified system messages (toast/pill) – works in BOTH light and dark theme.
   Used by: base_saas.html + base_client_pwa.html + quick-order inline banners.
*/

.sys-toast-container{
  position: fixed;
  top: calc(var(--sys-toast-top, 12px) + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 720px);
  z-index: 9999;

  display: flex;
  flex-direction: column;
  gap: 10px;

  pointer-events: none; /* only the toast itself is clickable */
}

.sys-toast{
  pointer-events: auto;

  display: flex;
  align-items: center; /* centered dot + x */
  gap: 12px;

  padding: 14px 14px;
  border-radius: 16px;

  /* Variables are set by tone classes; fallbacks are safe defaults */
  background: var(--sys-toast-bg, #ffffff);
  border: 1px solid var(--sys-toast-border, rgba(0, 0, 0, 0.08));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);

  color: #111827;

  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.sys-toast.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.sys-toast.is-hiding,
.sys-toast.hide-banner{
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.sys-toast__dot{
  width: 10px;
  height: 10px;
  border-radius: 9999px;

  background: var(--sys-toast-dot, #6b7280);
  flex: 0 0 10px;

  align-self: center;
}

.sys-toast__content{
  flex: 1 1 auto;
  min-width: 0;
}

/* When templates use .sys-toast__text directly (not inside .sys-toast__content),
   this makes the text grow and push the close button to the far right. */
.sys-toast > .sys-toast__text{
  flex: 1 1 auto;
  min-width: 0;
}

.sys-toast__text{
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  word-break: break-word;
}

/* Link looks like normal text (no underline), just slightly emphasized */
.sys-toast__link{
  font-weight: 800;
  text-decoration: none;
  color: inherit;
}

.sys-toast__close{
  margin-left: 6px;
  align-self: center;

  border: none;
  background: transparent;
  cursor: pointer;

  color: rgba(17, 24, 39, 0.55);
  font-size: 18px;
  line-height: 1;

  padding: 2px 8px;
  border-radius: 10px;

  flex: 0 0 auto; /* never shrink */
}

.sys-toast__close:hover{
  background: rgba(17, 24, 39, 0.06);
  color: rgba(17, 24, 39, 0.75);
}

/* --- Tones (Light theme defaults) --- */
.sys-toast--success{
  --sys-toast-bg: #ecfdf5;
  --sys-toast-border: #bbf7d0;
  --sys-toast-dot: #22c55e;
}

.sys-toast--error{
  --sys-toast-bg: #fef2f2;
  --sys-toast-border: #fecaca;
  --sys-toast-dot: #ef4444;
}

/* Alias (some templates use --danger) */
.sys-toast--danger{
  --sys-toast-bg: #fef2f2;
  --sys-toast-border: #fecaca;
  --sys-toast-dot: #ef4444;
}

.sys-toast--warning{
  --sys-toast-bg: #fffbeb;
  --sys-toast-border: #fde68a;
  --sys-toast-dot: #f59e0b;
}

.sys-toast--info{
  --sys-toast-bg: #eff6ff;
  --sys-toast-border: #bfdbfe;
  --sys-toast-dot: #3b82f6;
}

/* --- Dark theme overrides (matches Theme v3 dark panels) ---
   Important: project uses ONLY light/dark (no system theme).
   We support multiple selectors just in case (PWA, desktop, supplier).
*/
html.dark .sys-toast,
body.dark .sys-toast,
.dark .sys-toast,
[data-theme="dark"] .sys-toast,
[data-bs-theme="dark"] .sys-toast{
  /* Prefer Theme v3 tokens if present; fallback to slate panel color */
  --sys-toast-bg: rgb(var(--c-panel2, 15 23 42));
  --sys-toast-border: rgba(148, 163, 184, 0.22);
  color: rgba(226, 232, 240, 0.92);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

html.dark .sys-toast__close,
body.dark .sys-toast__close,
.dark .sys-toast__close,
[data-theme="dark"] .sys-toast__close,
[data-bs-theme="dark"] .sys-toast__close{
  color: rgba(226, 232, 240, 0.60);
}

html.dark .sys-toast__close:hover,
body.dark .sys-toast__close:hover,
.dark .sys-toast__close:hover,
[data-theme="dark"] .sys-toast__close:hover,
[data-bs-theme="dark"] .sys-toast__close:hover{
  background: rgba(148, 163, 184, 0.16);
  color: rgba(226, 232, 240, 0.92);
}

/* Slightly more punchy dots in dark mode (optional, tasteful) */
html.dark .sys-toast--success, body.dark .sys-toast--success, .dark .sys-toast--success,
[data-theme="dark"] .sys-toast--success, [data-bs-theme="dark"] .sys-toast--success{
  --sys-toast-dot: #34d399;
}
html.dark .sys-toast--info, body.dark .sys-toast--info, .dark .sys-toast--info,
[data-theme="dark"] .sys-toast--info, [data-bs-theme="dark"] .sys-toast--info{
  --sys-toast-dot: #60a5fa;
}
html.dark .sys-toast--warning, body.dark .sys-toast--warning, .dark .sys-toast--warning,
[data-theme="dark"] .sys-toast--warning, [data-bs-theme="dark"] .sys-toast--warning{
  --sys-toast-dot: #fbbf24;
}
html.dark .sys-toast--error, body.dark .sys-toast--error, .dark .sys-toast--error,
[data-theme="dark"] .sys-toast--error, [data-bs-theme="dark"] .sys-toast--error,
html.dark .sys-toast--danger, body.dark .sys-toast--danger, .dark .sys-toast--danger,
[data-theme="dark"] .sys-toast--danger, [data-bs-theme="dark"] .sys-toast--danger{
  --sys-toast-dot: #fb7185;
}

@media (prefers-reduced-motion: reduce){
  .sys-toast{
    transition: none;
    transform: none;
  }
  .sys-toast.is-visible{
    transform: none;
  }
}

@media (max-width: 480px){
  .sys-toast-container{
    width: min(94vw, 720px);
  }
  .sys-toast__text{
    font-size: 14.5px;
  }
}