/* ==========================================================================
   Toast Component
   Reusable notification toasts with auto-dismiss and countdown bar.
   Pairs with static/js/toast.js
   ========================================================================== */

/* Container — stacks toasts at top or bottom of viewport */
.toast-container {
    position: fixed;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    padding: 1rem;
    max-width: min(480px, calc(100vw - 2rem));
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.toast-container--top {
    top: 0;
}

.toast-container--bottom {
    bottom: 0;
    flex-direction: column-reverse;
}

/* Individual toast */
.toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--border-radius, 0.5rem);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
    pointer-events: auto;
    overflow: hidden;
    border: 1px solid transparent;
    opacity: 0;
    transform: translateY(-1rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

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

.toast--exiting {
    opacity: 0;
    transform: translateY(-1rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Toast variants using theme variables */
.toast--success {
    background: var(--success-bg, #dcfce7);
    color: var(--success-text, #155724);
    border-color: var(--success-border, #c3e6cb);
}

.toast--error {
    background: var(--error-bg, #fee2e2);
    color: var(--error-text, #721c24);
    border-color: var(--error-border, #f5c6cb);
}

.toast--warning {
    background: var(--warning-bg, #fef3c7);
    color: var(--warning-text, #856404);
    border-color: var(--warning-border, #ffeeba);
}

.toast--info {
    background: var(--info-bg, #E8EDE6);
    color: var(--info-text, #3A4238);
    border-color: var(--info-border, #9CA998);
}

/* Toast icon */
.toast__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-top: 0.125rem;
}

/* Toast content */
.toast__content {
    flex: 1;
    min-width: 0;
}

.toast__message {
    font-size: 0.9rem;
    line-height: 1.5;
    word-break: break-word;
}

/* Close button */
.toast__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: inherit;
    opacity: 0.6;
    border-radius: var(--border-radius-sm, 0.25rem);
    min-width: 28px;
    min-height: 28px;
    transition: opacity var(--transition-fast, 0.15s ease);
}

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

.toast__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Countdown bar */
.toast__countdown {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.toast__countdown-bar {
    height: 100%;
    width: 100%;
    background: currentColor;
    opacity: 0.3;
    transform-origin: left;
    animation: toast-countdown linear forwards;
}

@keyframes toast-countdown {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 600px) {
    .toast-container {
        padding: 0.5rem;
        max-width: 100vw;
    }

    .toast {
        padding: 0.75rem;
        gap: 0.5rem;
        border-radius: var(--border-radius-sm, 0.25rem);
    }

    .toast__message {
        font-size: 0.85rem;
    }
}

/* Mobile: position toasts above the bottom nav bar (Material Snackbar pattern).
   Avoids status bar / notch / Dynamic Island overlap on both Android and iOS. */
@media (max-width: 1023px) {
    .toast-container--top {
        top: auto;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        flex-direction: column-reverse;
    }

    .toast {
        transform: translateY(1rem);
    }

    .toast--entering {
        transform: translateY(0);
    }

    .toast--exiting {
        transform: translateY(1rem);
    }
}
}