/* moliri-toast — styles for the toast notifications created by moliri-toast.js.
   Colours use CSS variables with fallbacks so a tenant theme can override them. */

.moliri-toast-region {
    position: fixed;
    z-index: 100000;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 420px;
    max-width: calc(100vw - 40px);
    pointer-events: none; /* let clicks fall through the empty region; toasts re-enable it */
}

.moliri-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 8px;
    border-left: 4px solid var(--moliri-toast-accent, #1a5c5b);
    background-color: var(--moliri-toast-bg, #ffffff);
    color: var(--moliri-toast-text, var(--mainDarkColor, #1f2933));
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    font-family: var(--fontFamily, var(--defaultFont, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
    font-size: 15px;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.moliri-toast--visible {
    opacity: 1;
    transform: translateY(0);
}

.moliri-toast--leaving {
    opacity: 0;
    transform: translateY(12px);
}

.moliri-toast__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    background-color: var(--moliri-toast-accent, #1a5c5b);
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
}

.moliri-toast__message {
    flex: 1 1 auto;
    word-break: break-word;
}

.moliri-toast__close {
    flex: 0 0 auto;
    margin: -4px -6px -4px 0;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
}

.moliri-toast__close:hover,
.moliri-toast__close:focus-visible {
    opacity: 1;
}

.moliri-toast__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Type accents */
.moliri-toast--success { --moliri-toast-accent: #2e7d32; }
.moliri-toast--error   { --moliri-toast-accent: #c62828; }
.moliri-toast--warning { --moliri-toast-accent: #ed6c02; }
.moliri-toast--info    { --moliri-toast-accent: var(--primaryColorWeb, #1a5c5b); }

.moliri-toast--success .moliri-toast__icon::before { content: "\2713"; } /* check */
.moliri-toast--error   .moliri-toast__icon::before { content: "\0021"; } /* ! */
.moliri-toast--warning .moliri-toast__icon::before { content: "\0021"; } /* ! */
.moliri-toast--info    .moliri-toast__icon::before { content: "\0069"; } /* i */

@media (max-width: 600px) {
    .moliri-toast-region {
        left: 16px;
        right: 16px;
        bottom: 16px;
        width: auto;
        max-width: none;
    }
}

/* Desktop and up — make the toast more prominent so it isn't easy to miss. */
@media (min-width: 601px) {
    .moliri-toast {
        padding: 16px 18px;
        font-size: 16px;
    }
}

/* Large screens — scale up further so it stays visible on big monitors. */
@media (min-width: 1280px) {
    .moliri-toast-region {
        width: 500px;
        gap: 14px;
        bottom: 28px;
        right: 28px;
    }
    .moliri-toast {
        padding: 18px 20px;
        font-size: 20px;
        gap: 14px;
    }
    .moliri-toast__icon {
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 15px;
    }
    .moliri-toast__close {
        font-size: 22px;
    }
}

@media (prefers-color-scheme: dark) {
    .moliri-toast {
        --moliri-toast-bg: #24303a;
        --moliri-toast-text: #f4f6f8;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .moliri-toast {
        transition: opacity 0.15s ease;
        transform: none;
    }
    .moliri-toast--leaving,
    .moliri-toast--visible {
        transform: none;
    }
}