/* ============================================================
   BuhayAhente — Phase 2.1 UI/UX Polish
   Component: Toast Notifications
   ------------------------------------------------------------
   Pairs with js/components/toast.js (window.toast API).
   Desktop: stacks top-right. Mobile (<576px): stacks top-center,
   full-width with side gutters.
   ============================================================ */

.ba-toast-region {
    position: fixed;
    top: var(--ba-space-4, 1rem);
    right: var(--ba-space-4, 1rem);
    z-index: 10600; /* above Bootstrap modals (1055) and upgrade modal */
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: 340px;
    max-width: calc(100vw - 2rem);
    pointer-events: none;
}
@media (max-width: 575.98px) {
    .ba-toast-region {
        top: var(--ba-space-3, .75rem);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: calc(100vw - 1.5rem);
    }
}

.ba-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    background: var(--ba-surface, #fff);
    border-radius: var(--ba-radius-md, .75rem);
    box-shadow: var(--ba-shadow-lg, 0 .75rem 2rem rgba(15,27,45,.16));
    border-left: 4px solid var(--ba-info, #0a58ca);
    padding: .8rem .9rem;
    font-size: .875rem;
    color: var(--ba-text-700, #333);
    opacity: 0;
    transform: translateX(16px);
    animation: ba-toast-in .22s var(--ba-ease-out, ease) forwards;
}
@media (max-width: 575.98px) {
    .ba-toast { transform: translateY(-12px); animation-name: ba-toast-in-mobile; }
}
@keyframes ba-toast-in {
    to { opacity: 1; transform: translateX(0); }
}
@keyframes ba-toast-in-mobile {
    to { opacity: 1; transform: translateY(0); }
}
.ba-toast.is-leaving {
    animation: ba-toast-out .18s var(--ba-ease-standard, ease) forwards;
}
@keyframes ba-toast-out {
    to { opacity: 0; transform: translateY(-6px) scale(.98); }
}

.ba-toast-icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem;
    margin-top: .05rem;
}
.ba-toast-body { flex: 1; min-width: 0; }
.ba-toast-title { font-weight: 700; margin-bottom: .1rem; display: block; }
.ba-toast-message { color: var(--ba-text-600, #444b57); word-break: break-word; }
.ba-toast-close {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: var(--ba-text-400, #94a3b8);
    line-height: 1;
    padding: .15rem;
    border-radius: 50%;
    transition: background-color .15s ease, color .15s ease;
}
.ba-toast-close:hover { background: var(--ba-surface-muted, #eef0f3); color: var(--ba-text-700, #333); }

/* Auto-dismiss progress bar */
.ba-toast-progress {
    position: absolute;
    left: 0; bottom: 0;
    height: 3px;
    width: 100%;
    background: currentColor;
    opacity: .18;
    border-radius: 0 0 var(--ba-radius-md, .75rem) var(--ba-radius-md, .75rem);
    transform-origin: left;
    animation-name: ba-toast-progress;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes ba-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.ba-toast { position: relative; overflow: hidden; }

/* Type variants */
.ba-toast-success { border-left-color: var(--ba-success, #1e7e34); }
.ba-toast-success .ba-toast-icon { background: var(--ba-success-bg, #e8f6ec); color: var(--ba-success, #1e7e34); }
.ba-toast-success .ba-toast-progress { color: var(--ba-success, #1e7e34); }

.ba-toast-error { border-left-color: var(--ba-danger, #c0392b); }
.ba-toast-error .ba-toast-icon { background: var(--ba-danger-bg, #fdecea); color: var(--ba-danger, #c0392b); }
.ba-toast-error .ba-toast-progress { color: var(--ba-danger, #c0392b); }

.ba-toast-warning { border-left-color: var(--ba-warning, #b8860b); }
.ba-toast-warning .ba-toast-icon { background: var(--ba-warning-bg, #fff8e6); color: var(--ba-warning, #b8860b); }
.ba-toast-warning .ba-toast-progress { color: var(--ba-warning, #b8860b); }

.ba-toast-info { border-left-color: var(--ba-info, #0a58ca); }
.ba-toast-info .ba-toast-icon { background: var(--ba-info-bg, #eaf2ff); color: var(--ba-info, #0a58ca); }
.ba-toast-info .ba-toast-progress { color: var(--ba-info, #0a58ca); }

@media (prefers-reduced-motion: reduce) {
    .ba-toast { animation: none; opacity: 1; transform: none; }
    .ba-toast.is-leaving { animation: none; }
    .ba-toast-progress { animation: none; }
}