/* Universal transient-message (toast) styling. Paired with public/javascripts/toast.js.

   CANONICAL SEVERITY PALETTE for the whole app. toast.css is loaded globally (layout.scala.html), so
   these --sev-* variables are available everywhere; message/status-badge surfaces reference them instead
   of re-declaring the hex. Retune a severity here and every consumer follows. (Consumers on pages that do
   NOT load this file — e.g. the standalone login — keep their own literals.) */
:root {
    --sev-info-bg:#d1ecf1;    --sev-info-fg:#0c5460;    --sev-info-bd:#bee5eb;
    --sev-success-bg:#d4edda; --sev-success-fg:#155724; --sev-success-bd:#c3e6cb;
    --sev-warning-bg:#fff3cd; --sev-warning-fg:#856404; --sev-warning-bd:#ffeeba;
    --sev-error-bg:#f8d7da;   --sev-error-fg:#721c24;   --sev-error-bd:#f5c6cb;
}

/* Fixed region pinned under the nav (top set by JS), centered, stacking downward. The container is
   click-through; each toast re-enables pointer events so clicks/hover land on the message, not the page. */
#toast-region {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1090;                       /* Bootstrap toast tier — above content + sticky nav */
    width: min(600px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast-msg {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 13.5px;
    line-height: 1.45;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
}
.toast-msg.in  { opacity: 1; transform: none; }
.toast-msg.out { opacity: 0; transform: translateY(-6px); }

.toast-info    { background: var(--sev-info-bg);    color: var(--sev-info-fg);    border-color: var(--sev-info-bd); }
.toast-success { background: var(--sev-success-bg); color: var(--sev-success-fg); border-color: var(--sev-success-bd); }
.toast-warning { background: var(--sev-warning-bg); color: var(--sev-warning-fg); border-color: var(--sev-warning-bd); }
.toast-error   { background: var(--sev-error-bg);   color: var(--sev-error-fg);   border-color: var(--sev-error-bd); }

.toast-text { flex: 1 1 auto; }

.toast-close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .55;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}
.toast-close:hover { opacity: 1; }
.toast-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .toast-msg { transition: none; }
}