/* ================================================================
   Circle Ledger — components/toast.css
   Toast notifications: success, error, info, warning, undo.
   Managed by utils/toast.js.
   z-index 9000 — above sheets (8001) and backdrops (8000).
================================================================ */

/* ── Container ── */
.toast_container {
    position: fixed;
    top: var(--toast-top);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
    width: calc(100% - var(--space-8));
    max-width: var(--toast-max-w);
}

/* ── Individual toast ── */
.toast {
    background: var(--slate-900);
    color: #fff;
    padding: var(--toast-py) var(--toast-px);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    pointer-events: auto;
    cursor: pointer;
    opacity: 0;
    transform: translateY(var(--space-4));
    transition: opacity .2s ease, transform .2s ease;
}
.toast.visible {
    opacity: 1;
    transform: translateY(0);
}
.toast.hiding {
    opacity: 0;
    transform: translateY(calc(-1 * var(--space-2)));
}

/* ── Toast icon ── */
.toast_icon {
    font-size: var(--icon-lg);
    flex-shrink: 0;
}

/* ── Toast message ── */
.toast_msg {
    flex: 1;
    line-height: 1.4;
}

/* ── Undo action inside toast ── */
.toast_undo {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--amber-300);
    padding: 0;
    margin-left: var(--space-2);
    white-space: nowrap;
    transition: color var(--t);
    flex-shrink: 0;
}
.toast_undo:hover { color: var(--amber-200); text-decoration: underline; }

/* ── Variants ── */
.toast_success { background: var(--green-700); }
.toast_error   { background: var(--red-700); }
.toast_info    { background: var(--teal-700); }
.toast_warn    { background: var(--amber-600); color: var(--teal-900); }
.toast_warn .toast_undo { color: var(--teal-800); }

/* ── Dismiss (×) button ── */
.toast_dismiss {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,.6);
    font-size: var(--icon-sm);
    display: flex;
    align-items: center;
    padding: 0;
    margin-left: auto;
    flex-shrink: 0;
    transition: color var(--t);
}
.toast_dismiss:hover { color: #fff; }
.toast_warn .toast_dismiss { color: rgba(0,0,0,.4); }
.toast_warn .toast_dismiss:hover { color: var(--teal-900); }

/* ── Progress bar (auto-dismiss timer) ── */
.toast_progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: var(--space-0-5);
    background: rgba(255,255,255,.35);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    animation: toast-progress linear forwards;
}
@keyframes toast-progress {
    from { width: 100%; }
    to   { width: 0%; }
}