/* SCAD - Toast: folha canônica do componente ui/toast.js */
/* ═══════════════════════════════════════════════════════════════
   SCAD · TOAST (host + cartão + ícone + texto + barra de duração)
   Unica folha de visual de toast do projeto: carregada por todas as
   telas que usam window.SCAD.toast.
   ─────────────────────────────────────────────────────────────
   A folha é autossuficiente: os tokens que ela consome estão pinados
   aqui, com o valor do :root de css/tokens.css, e não vêm do :root da
   página. Uma custom property definida no próprio elemento vence a
   herdada naquela subárvore, então o cartão fica idêntico nas cinco
   telas sem que nenhuma folha de página precise ser tocada.
   A paridade com css/tokens.css é travada por teste
   (tests/unit/css/toast-tokens-pinados.test.js): mudar um token lá e
   esquecer aqui não é mais silêncio.
   ═══════════════════════════════════════════════════════════════ */

/* ── Container de toasts (host único) ──────────────────────── */
#scad-toast-host {
    position: fixed; top: 18px; right: 18px; z-index: 9000;
    display: flex; flex-direction: column; gap: 10px;
    width: 340px; max-width: 92vw; pointer-events: none;

    /* Tokens consumidos abaixo, pinados 1:1 de css/tokens.css :root.
       --d não está aqui: é setado no cartão por ui/toast.js. */
    --bg-card: #ffffff;
    --line: #e2e9e6;
    --line-soft: #f3f7f5;
    --txt: #13241c;
    --txt2: #46594f;
    --txt3: #8aa094;
    --g: #00843d;
    --g-soft: #1f9d57;
    --gl: #e7f4ec;
    --red: #cf3f39;
    --red-l: #fbe2e0;
    --amber: #c9820a;
    --amber-l: #fbf0d4;
    --blue: #2563c9;
    --blue-l: #e6eefb;
    --rs: 11px;
    --sh-lg: 0 16px 48px rgba(0,40,24,.13), 0 4px 14px rgba(0,0,0,.06);
    --tr: all .22s cubic-bezier(.4,0,.2,1);
    --disp: 'Sora', sans-serif;
    --mono: 'JetBrains Mono', monospace;
}

/* Só os nomes que css/tokens.css redefine no tema escuro. Ancorado no
   cartão, não no host: o host já tem um seletor por ID nesta folha e um
   segundo subiria a dívida CSS_seletor_por_ID. Os var() todos vivem no
   cartão ou em descendentes dele, então a subárvore é a mesma. */
[data-theme="dark"] .toast {
    --bg-card: #121b16;
    --line: rgba(255,255,255,.08);
    --line-soft: rgba(255,255,255,.035);
    --txt: #e7f1ea;
    --txt2: #9fb3a8;
    --txt3: #69806f;
    --gl: rgba(0,132,61,.15);
    --red-l: rgba(207,63,57,.18);
    --amber-l: rgba(201,130,10,.18);
    --blue-l: rgba(37,99,201,.2);
    --sh-lg: 0 16px 48px rgba(0,0,0,.6);
}

/* ── Cartão de toast ───────────────────────────────────────── */
.toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-left: 4px solid var(--g);
    border-radius: var(--rs);
    box-shadow: var(--sh-lg);
    padding: 14px 30px 14px 16px;
    overflow: hidden;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(24px) scale(.97);
    transition: opacity .3s cubic-bezier(.34,1.26,.64,1),
                transform .3s cubic-bezier(.34,1.26,.64,1);
}

.toast.in  { opacity: 1; transform: translateX(0) scale(1); }
.toast.out { opacity: 0; transform: translateX(24px) scale(.97); }

.toast.error { border-left-color: var(--red); }
.toast.warn  { border-left-color: var(--amber); }
.toast.info  { border-left-color: var(--blue); }

.toast .ti {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    background: var(--gl);
    color: var(--g);
}

.toast.error .ti { background: var(--red-l); color: var(--red); }
.toast.warn  .ti { background: var(--amber-l); color: var(--amber); }
.toast.info  .ti { background: var(--blue-l); color: var(--blue); }

.toast .tc {
    flex: 1;
    min-width: 0;
}

.toast .tt {
    font-family: var(--disp);
    font-size: 13px;
    font-weight: 800;
    color: var(--txt);
    letter-spacing: -.2px;
}

.toast .tm {
    font-size: 12px;
    color: var(--txt2);
    line-height: 1.45;
    margin-top: 3px;
}

/* Segmentos de mensagem emitidos por ui/toast.js (array {text,cls}).
   Os 9 sítios que passam cls:'mono' estão em modules/cadastro/, onde só
   esta regra dava monoespaçado — sem ela o markup silencioso quebra. */
.toast .tm .mono { font-family: var(--mono); color: var(--g-soft); }
.toast .tm b     { font-weight: 700; }

.toast .tx {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--txt3);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--tr);
}

.toast .tx:hover {
    background: var(--line-soft);
    color: var(--txt);
}

.toast .tbar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--g);
    transform-origin: left;
    animation: toastShrink var(--d, 4200ms) linear forwards;
}

.toast.error .tbar { background: var(--red); }
.toast.warn  .tbar { background: var(--amber); }
.toast.info  .tbar { background: var(--blue); }

@keyframes toastShrink {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ── Responsividade (mobile) ──────────────────────────────── */
@media (max-width: 480px) {
    #scad-toast-host {
        top: 10px; right: 10px; left: 10px;
        width: auto; max-width: none;
    }
}