/* ============================================================
   TOAST SYSTEM – Admin (FINAL CSS) — FUNDO SÓLIDO GARANTIDO
   - Bottom-right
   - Stack controlado por JS via --toast-stack-y
   - Fundo 100% opaco (SEM transparência)
   - Progress bar interna
   - Dark / Light automático
   ============================================================ */


/* ============================================================
   TOKENS OBRIGATÓRIOS (AUTO-CONTIDO)
   ============================================================ */

:root {
    /* fallback seguro caso o tema não defina */
    --bg-alt-solid: #ffffff;
}

html.dark {
    --bg-alt-solid: #0f172a;
}


/* ------------------------------------------------------------
   Container (posição)
------------------------------------------------------------ */

.toast-container {
    position: fixed;
    right: 24px;
    bottom: 24px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;

    pointer-events: none;
    z-index: 99980;
}


/* ------------------------------------------------------------
   Toast base
------------------------------------------------------------ */

.toast {
    pointer-events: auto;

    min-width: 300px;
    max-width: 420px;

    /* ✅ FUNDO TOTALMENTE OPACO */
    background-color: var(--bg-alt-solid);
    color: var(--fg);

    border-radius: 14px;

    /* mantém progress bar dentro */
    overflow: hidden;

    padding: 14px 16px;

    box-shadow:
        0 12px 28px rgba(0,0,0,0.14),
        0 2px 10px rgba(0,0,0,0.08);

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

    position: relative;

    /* ❌ SEM glass / blur */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    /* stack controlado por JS */
    --toast-stack-y: 0px;

    opacity: 0;
    transform: translateY(calc(var(--toast-stack-y) + 14px)) scale(0.98);
    transition:
        opacity .25s ease,
        transform .25s ease;
}

.toast.show {
    opacity: 1;
    transform: translateY(var(--toast-stack-y)) scale(1);
}

.toast.hide {
    opacity: 0;
    transform: translateY(calc(var(--toast-stack-y) + 14px)) scale(0.98);
}


/* ------------------------------------------------------------
   Header / Body
------------------------------------------------------------ */

.toast-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    font-size: 14px;
    font-weight: 700;
}

.toast-body {
    font-size: 13px;
    line-height: 1.45;
    color: var(--fg-muted);
}


/* segurança: esconder qualquer botão antigo */
.toast-close {
    display: none !important;
}


/* ------------------------------------------------------------
   Progress bar (interna)
------------------------------------------------------------ */

.toast-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;
    width: 100%;

    pointer-events: none;
}


/* cores por tipo */
.toast-success .toast-progress { background: #22c55e; }
.toast-error   .toast-progress { background: #ef4444; }
.toast-warning .toast-progress { background: #f59e0b; }
.toast-info    .toast-progress { background: var(--accent); }


/* ------------------------------------------------------------
   Tipos (borda lateral)
------------------------------------------------------------ */

.toast-success { border-left: 4px solid #22c55e; }
.toast-error   { border-left: 4px solid #ef4444; }
.toast-warning { border-left: 4px solid #f59e0b; }
.toast-info    { border-left: 4px solid var(--accent); }


/* ------------------------------------------------------------
   Dark mode
------------------------------------------------------------ */

html.dark .toast {
    box-shadow:
        0 14px 34px rgba(0,0,0,0.55),
        0 4px 14px rgba(0,0,0,0.35);
}

html.dark .toast-body {
    color: var(--fg-muted);
}


/* ------------------------------------------------------------
   Responsivo
------------------------------------------------------------ */

@media (max-width: 640px) {
    .toast-container {
        right: 16px;
        bottom: 16px;
    }

    .toast {
        min-width: 260px;
        max-width: calc(100vw - 32px);
    }
}