/* ==========================================================================
   Global toast / snackbar notifications
   --------------------------------------------------------------------------
   Transient confirmation/feedback messages that slide down from the top,
   centered over the main content area, stack vertically, and either
   auto-dismiss (success/info) or persist until the user clicks the × (error).
   Replaces the old permanent inline .error / .confirmation banners. Driven by
   js/toast.js (window.showToast).

   Design: dark outline + light fill + a soft radiating glow (box-shadow),
   colour-coded by type while staying within the brand palette.
   ========================================================================== */

/* Fixed stack centered horizontally over the main content area. The left edge
   is inset by the side-menu width (mirroring the body's padding-left), and
   right:0 spans to the viewport edge, so align-items:center centers each toast
   in the content region — not the whole screen — disregarding the side menu.
   The inset follows the sidebar open/collapsed state below.
   pointer-events:none on the container so it never blocks clicks on the page
   behind the gaps between toasts; each toast re-enables pointer events for its
   own close button / links.
   z-index 9000: above the watchlist filter flash bubble (1100) but below the
   full-page loader overlay (99999), so a navigation "Loading…" cleanly
   covers any stale toasts. */
#toast-container {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    transition: left 0.5s ease;
}

/* On pages with the fixed side menu, inset the centering region by the menu
   width (mirroring body's padding-left) so toasts center over the content
   area, not the whole screen. toast.js adds this class when a #sidebar_nav is
   present; full-width centering is used on pages without a side menu. */
#toast-container.toast-container--with-sidebar {
    left: var(--nav-width-collapsed, 0px);
}

/* Follow the sidebar when it expands, matching body.sidebar-open's padding. */
body.sidebar-open #toast-container.toast-container--with-sidebar {
    left: var(--nav-width-expanded, 0px);
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 420px;
    padding: 12px 14px;
    border: 2px solid;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Slide-down / fade-in resting state (toggled by toast.js). */
.toast.toast--visible {
    opacity: 1;
    transform: translateY(0);
}

/* The message body. Links inside (e.g. "Go to Watchlist") inherit the
   toast's type colour so they read as part of the message. */
.toast__msg {
    flex: 1 1 auto;
}

.toast__msg a {
    color: inherit;
    text-decoration: underline;
}

/* Close cross, pinned to the far right. */
.toast__close {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.toast__close:hover {
    opacity: 1;
}

/* --- Type variants: dark outline / light fill / matching glow ------------- */

.toast--error {
    border-color: #8B1A1A;            /* dark red outline */
    background-color: #FDE7E7;        /* light red fill */
    color: #8B1A1A;
    box-shadow: 0 0 14px rgba(139, 26, 26, 0.45);
}

.toast--success {
    border-color: #1B5E20;            /* dark green outline */
    background-color: #E6F4EA;        /* light green fill */
    color: #1B5E20;
    box-shadow: 0 0 14px rgba(27, 94, 32, 0.45);
}

.toast--info {
    border-color: #002B5C;            /* brand navy outline */
    background-color: #D2E2ED;        /* light blue fill */
    color: #002B5C;
    box-shadow: 0 0 14px rgba(0, 43, 92, 0.45);
}