/* ============================================================
   RWB.UI - Toast
   Desenvolvido por RWB Software
============================================================ */

/* As cores abaixo priorizam os tokens do RWB.UI Theme (--rwb-color-*, ver
   ThemeWeb/ThemeRenderer) quando o app usa services.AddRwbTheme(...). Sem
   Theme configurado, os valores literais aqui servem de fallback e o Toast
   funciona sozinho, exatamente como antes. */
:root {
    --toast-width: 380px;
    --toast-radius: 12px;
    --toast-shadow: 0 10px 35px rgba(0,0,0,.25);
    --toast-success: var(--rwb-color-success, #16a34a);
    --toast-info: var(--rwb-color-info, #2563eb);
    --toast-warning: var(--rwb-color-warning, #f59e0b);
    --toast-error: var(--rwb-color-error, #dc2626);
    --toast-question: var(--rwb-color-question, #7c3aed);
    --toast-background: var(--rwb-color-surface, #1f2937);
    --toast-color: var(--rwb-color-on-surface, #ffffff);
    --toast-muted: var(--rwb-color-on-surface-muted, rgba(255,255,255,.75));
    --toast-transition: .35s ease;
}

@media (prefers-color-scheme: light) {

    :root {
        --toast-shadow: 0 10px 35px rgba(0,0,0,.12);
        --toast-background: var(--rwb-color-surface, #ffffff);
        --toast-color: var(--rwb-color-on-surface, #111827);
        --toast-muted: var(--rwb-color-on-surface-muted, rgba(17,24,39,.65));
    }
}

/* ============================================================
    Containers
============================================================ */

#rwb-toast-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999999;
}

/* ============================================================
    Positions
============================================================ */

.rwb-toast-stack {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.rwb-top-left {
    top: 20px;
    left: 20px;
}

.rwb-top-center {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.rwb-top-right {
    top: 20px;
    right: 20px;
}

.rwb-center-left {
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
}

.rwb-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.rwb-center-right {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.rwb-bottom-left {
    bottom: 20px;
    left: 20px;
}

.rwb-bottom-center {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.rwb-bottom-right {
    bottom: 20px;
    right: 20px;
}

/* ============================================================
    Toast
============================================================ */

.rwb-toast {
    width: var(--toast-width);
    background: var(--toast-background);
    color: var(--toast-color);
    border-radius: var(--toast-radius);
    overflow: hidden;
    pointer-events: auto;
    box-shadow: var(--toast-shadow);
    display: flex;
    flex-direction: column;
    animation: rwb-toast-show .35s ease forwards;
    touch-action: pan-y;
}

    .rwb-toast.hide {
        animation: rwb-toast-hide .30s ease forwards;
    }

/* ============================================================
    Header
============================================================ */

.rwb-toast-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 6px 16px;
}

.rwb-toast-icon {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.rwb-toast-title {
    font-size: 15px;
    font-weight: 700;
    flex: 1;
}

.rwb-toast-close {
    background: transparent;
    border: none;
    color: var(--toast-color);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    margin-left: auto;
    transition: .2s;
    flex-shrink: 0;
}

    .rwb-toast-close:hover {
        transform: scale(1.15);
    }

/* ============================================================
    Body
============================================================ */

.rwb-toast-message {
    padding: 0 16px 14px;
    font-size: 14px;
    line-height: 1.5;
}

.rwb-toast-action {
    margin: 0 16px 14px;
    align-self: flex-start;
    font-size: 13px;
    font-weight: 700;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .rwb-toast-action:hover {
        opacity: .85;
    }

/* ============================================================
    Progress
============================================================ */

.rwb-toast-progress {
    height: 4px;
    width: 100%;
    transform-origin: left;
    animation-name: rwb-progress;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

/* ============================================================
    Types
============================================================ */

.rwb-toast.success {
    border-left: 5px solid var(--toast-success);
}

    .rwb-toast.success .rwb-toast-progress {
        background: var(--toast-success);
    }

.rwb-toast.info {
    border-left: 5px solid var(--toast-info);
}

    .rwb-toast.info .rwb-toast-progress {
        background: var(--toast-info);
    }

.rwb-toast.warning {
    border-left: 5px solid var(--toast-warning);
}

    .rwb-toast.warning .rwb-toast-progress {
        background: var(--toast-warning);
    }

.rwb-toast.error {
    border-left: 5px solid var(--toast-error);
}

    .rwb-toast.error .rwb-toast-progress {
        background: var(--toast-error);
    }

.rwb-toast.question {
    border-left: 5px solid var(--toast-question);
}

    .rwb-toast.question .rwb-toast-progress {
        background: var(--toast-question);
    }

/* ============================================================
    Animations
============================================================ */

@keyframes rwb-toast-show {

    from {
        opacity: 0;
        transform: translateY(20px) scale(.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes rwb-toast-hide {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translateY(20px) scale(.95);
    }
}

@keyframes rwb-progress {

    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .rwb-toast,
    .rwb-toast.hide {
        animation: none;
        transition: opacity .2s ease;
    }

    .rwb-toast-progress {
        animation: none;
    }
}

/* ============================================================
    Responsive
============================================================ */

@media (max-width: 600px) {

    .rwb-toast {
        width: calc(100vw - 30px);
    }

    .rwb-top-left,
    .rwb-top-center,
    .rwb-top-right,
    .rwb-center-left,
    .rwb-center,
    .rwb-center-right,
    .rwb-bottom-left,
    .rwb-bottom-center,
    .rwb-bottom-right {
        left: 15px;
        right: 15px;
        transform: none;
    }
}