/* toast.css — the Toast notification cards (js/components/notifications.js).
 *
 * Its own file so the standalone pages (used-bikes/add.html, repairs/new.html),
 * which don't load components.css, can use the same toasts. Reads tokens.css.
 */
#toast-container {
    position: fixed; bottom: 1.5rem; right: 1.5rem;
    z-index: 9999; display: flex; flex-direction: column-reverse; gap: 0.6rem;
    pointer-events: none;
}
.toast {
    --toast-tone: var(--accent); --toast-soft: var(--accent-soft);
    position: relative; overflow: hidden; pointer-events: auto;
    display: flex; align-items: flex-start; gap: 0.75rem;
    width: 360px; max-width: calc(100vw - 3rem);
    padding: 0.85rem 0.75rem 0.95rem 1rem;
    background: var(--surface-raised); color: var(--text);
    border: 1px solid var(--border); border-left: 4px solid var(--toast-tone);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    font-size: 0.875rem; line-height: 1.4;
    animation: toast-slide-in 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.toast-success { --toast-tone: var(--success); --toast-soft: var(--success-soft); }
.toast-error   { --toast-tone: var(--danger);  --toast-soft: var(--danger-soft); }
.toast-warning { --toast-tone: var(--warning); --toast-soft: var(--warning-soft); }
.toast-info    { --toast-tone: var(--accent);  --toast-soft: var(--accent-soft); }
.toast-icon {
    flex-shrink: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--toast-soft); color: var(--toast-tone);
}
.toast-icon svg { width: 1.1rem; height: 1.1rem; }
.toast-body { flex: 1; min-width: 0; padding-top: 0.1rem; }
.toast-title { font-weight: 650; color: var(--text-strong); margin-bottom: 0.1rem; }
/* A long list (a Purchase Orders confirm with 17 warnings) scrolls inside the
 * card: the stack grows up from the bottom, so an uncapped one pushed its own
 * close button off the top of the screen. */
.toast-msg {
    color: var(--text-muted); overflow-wrap: anywhere;
    max-height: 60vh; overflow-y: auto;
}
.toast-clickable { cursor: pointer; }
.toast-clickable:hover { background: var(--bg-hover); }
.toast-dismiss {
    flex-shrink: 0; display: grid; place-items: center;
    width: 1.6rem; height: 1.6rem; margin: -0.15rem -0.1rem 0 0;
    background: none; border: none; border-radius: var(--radius-sm);
    color: var(--text-muted); cursor: pointer; padding: 0;
}
.toast-dismiss svg { width: 0.9rem; height: 0.9rem; }
.toast-dismiss:hover { background: var(--bg-hover); color: var(--text); }
.toast-progress {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
    background: var(--toast-tone); opacity: 0.55; transform-origin: left;
    animation: toast-countdown linear forwards;
}
@media (max-width: 768px) {
    #toast-container { right: 1rem; left: 1rem; bottom: 1rem; }
    .toast { width: auto; max-width: none; }
}
.toast-leaving { animation: toast-slide-out 0.18s ease forwards; }
@keyframes toast-slide-in {
    from { transform: translateX(1.5rem); opacity: 0; }
    to   { transform: translateX(0);      opacity: 1; }
}
@keyframes toast-slide-out {
    to { transform: translateX(1.5rem); opacity: 0; }
}
@keyframes toast-countdown { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
    .toast, .toast-leaving { animation-duration: 0.01ms; }
    .toast-progress { display: none; }
}