/* =====================================================================
   InQueue toast — first-party, CSP-strict replacement for the ToastMagic
   vendor package (Aug 2026). ToastMagic rendered a decorative SVG with a
   style="" attribute, which forced a style-src-attr 'unsafe-inline'
   concession on every console page. This owns the toast end-to-end with
   classes and keyframes only (no runtime style attributes), so the
   concession can be dropped everywhere except the ApexCharts dashboards.

   Markup: partials in resources/views/components/iq-toasts.blade.php,
   driven by the session('iq_toasts') queue (see helpers-ui.php iq_toast()).
   Behaviour: assets/backend/js/iq-toast.js (classList only).
   ===================================================================== */

.iq-toasts{
    position:fixed;
    right:16px;
    bottom:16px;
    z-index:1090;              /* above Bootstrap modals (~1055) */
    display:flex;
    flex-direction:column;
    gap:10px;
    width:auto;
    max-width:calc(100vw - 32px);
    pointer-events:none;       /* the stack is transparent to clicks; toasts opt back in */
}

.iq-toast{
    pointer-events:auto;
    display:flex;
    align-items:flex-start;
    gap:12px;
    width:360px;
    max-width:100%;
    padding:13px 14px;
    background:#fff;
    color:var(--iq-ink, #15171C);
    border:1px solid var(--iq-border, #E7E3DB);
    border-left:4px solid var(--iq-muted, #8C887F);
    border-radius:12px;
    box-shadow:0 12px 30px -12px rgba(0,0,0,.35);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    /* entrance/exit state — toggled by iq-toast.js via classes only */
    opacity:0;
    transform:translateX(120%);
    transition:opacity .22s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
.iq-toast.is-in{ opacity:1; transform:translateX(0); }
.iq-toast.is-out{ opacity:0; transform:translateX(120%); }

.iq-toast__ico{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.iq-toast__ico svg{ width:20px; height:20px; }

.iq-toast__body{ flex:1 1 auto; min-width:0; }
.iq-toast__title{ margin:0 0 2px; font-size:13.5px; font-weight:700; letter-spacing:-.01em; }
.iq-toast__msg{ margin:0; font-size:12.5px; line-height:1.45; color:var(--iq-muted-text, #6B6862); word-wrap:break-word; }

.iq-toast__action{
    display:inline-block;
    margin-top:8px;
    padding:5px 11px;
    font-size:12px;
    font-weight:600;
    color:#fff;
    background:var(--iq-coral-action, #CF4931);
    border-radius:7px;
    text-decoration:none;
}
.iq-toast__action:hover{ filter:brightness(.96); color:#fff; }

.iq-toast__close{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    padding:0;
    margin:-2px -2px 0 0;
    background:transparent;
    border:0;
    border-radius:6px;
    color:var(--iq-muted, #8C887F);
    cursor:pointer;
}
.iq-toast__close:hover{ background:var(--iq-tint, #F6F4F0); color:var(--iq-ink, #15171C); }
.iq-toast__close svg{ width:15px; height:15px; }

/* Type accents — left border + icon colour. Semantic status hues, matching
   the presence/pill palette used elsewhere in the console. */
.iq-toast--success{ border-left-color:#3B8C5A; }
.iq-toast--success .iq-toast__ico{ color:#3B8C5A; }
.iq-toast--error{ border-left-color:#C0392B; }
.iq-toast--error .iq-toast__ico{ color:#C0392B; }
.iq-toast--warning{ border-left-color:#C9A227; }
.iq-toast--warning .iq-toast__ico{ color:#C9A227; }
.iq-toast--info{ border-left-color:#3B6FB0; }
.iq-toast--info .iq-toast__ico{ color:#3B6FB0; }

@media (max-width:640px){
    .iq-toasts{ left:16px; right:16px; bottom:16px; }
    .iq-toast{ width:100%; }
}

@media (prefers-reduced-motion: reduce){
    .iq-toast{ transition:opacity .12s linear; transform:none; }
    .iq-toast.is-in{ transform:none; }
    .iq-toast.is-out{ transform:none; }
}