/* ============================================================================
   Shared toast — a transient message that slides in from the right edge, holds,
   and slides back out. Paired with core_data/js/toast.js, which emits exactly
   this markup and owns every class flip below.

   WHY NOT BOOTSTRAP'S TOAST
   -------------------------
   Nothing here may be called `.toast`, `.toast-container`, `.showing` or
   `.hiding`. Bootstrap 5.3.8 is loaded globally (styling_dependencies.html) and
   its `.toast { opacity: 0 }` plus the `.showing`/`.hide` machinery would fight
   every rule in this file — a card that never appears, and no error to explain
   it. The prefix is `samfony-toast-` for that reason alone.

   WHY transition AND NOT @keyframes
   ---------------------------------
   core_data/css/buttons.css animates its "✓ Sparad" pill with @keyframes,
   because that pill only ever plays once, start to finish. A toast's enter and
   leave have to be reversible mid-flight: a replace-by-key swap can land while
   the card is still sliding in, and an @keyframes enter cannot be interrupted
   into a leave without restarting from the keyframe origin. Two transitions on
   the same two properties can.

   Z-INDEX: 1210
   -------------
   Continues the inventory in onboarding_tour.css (see the block at the top of
   that file, which this row was added to). Above the Bootstrap modals Min sida
   opens (1050/1055), above .daily-report-overlay (1090) and
   .daily-report-btn__tip (1200) — a toast reports the outcome of an action, so
   it has to be legible over whatever that action was performed on. Below the
   onboarding tour (1300+), which owns the top deliberately: its blocker
   swallows interaction, so nothing can fire a toast during a tour, and a card
   punching through the dim would read as a bug.

   Bootstrap's own $zindex-toast (1090) is NOT usable — agent_report.css already
   claims 1090/1091.
   ========================================================================= */

.samfony-toast-container {
    position: fixed;
    /* Clears #content > .navbar, which is position:fixed (top-nav.css). */
    top: calc(var(--brand-space-6, 2rem) + 56px);
    right: var(--brand-space-4, 1rem);
    z-index: 1210;
    width: min(380px, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    gap: var(--brand-space-2, 0.5rem);
    /* The container spans a fixed box whether or not it holds anything, so it
       must never intercept clicks on the page behind it. The cards re-enable
       pointer events for themselves. */
    pointer-events: none;
    /* The leave transform travels past the viewport's right edge. `clip` rather
       than `hidden` because it is legal paired with overflow-y: visible — the
       cards' drop shadows still paint above and below, but no horizontal
       scrollbar can appear on iOS/Safari. */
    overflow-x: clip;
    overflow-y: visible;
}

.samfony-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--brand-space-3, 0.75rem);
    padding: var(--brand-space-3, 0.75rem) var(--brand-space-4, 1rem);
    background: var(--brand-color-surface, #ffffff);
    color: var(--brand-color-text, #122033);
    border: 1px solid var(--brand-color-border, rgba(18, 32, 51, 0.12));
    /* Overridden per variant below — the accent stripe is the whole colour
       coding, so the card body stays a neutral surface and the text stays at
       full contrast. */
    border-left: 4px solid var(--brand-color-accent, #0f88f2);
    border-radius: var(--brand-radius-sm, 0.5rem);
    box-shadow: var(--brand-shadow-soft, 0 18px 40px rgba(17, 28, 45, 0.12));
    font-size: var(--brand-font-size-sm, 0.9375rem);
    line-height: var(--brand-line-height-body, 1.65);

    /* Rest state = offscreen right. toast.js adds .is-visible on the second
       animation frame after insertion, which is what plays the enter. */
    opacity: 0;
    transform: translateX(calc(100% + var(--brand-space-5, 1.5rem)));
    transition:
        opacity 0.28s ease-out,
        transform 0.28s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.samfony-toast.is-visible {
    opacity: 1;
    transform: none;
}

/* Leaving is quicker than arriving, and eases in rather than out: the card is
   on its way somewhere the reader no longer needs to follow. */
.samfony-toast.is-leaving {
    opacity: 0;
    transform: translateX(calc(100% + var(--brand-space-5, 1.5rem)));
    transition-duration: 0.22s;
    transition-timing-function: ease-in;
}

/* ---- Variants ------------------------------------------------------------
   Tokens only — --brand-color-success / -danger / -accent already exist in
   design-tokens.css. Do not add new --brand-* values for this component. */
.samfony-toast--success {
    border-left-color: var(--brand-color-success, #18824f);
}

.samfony-toast--success .samfony-toast-icon {
    color: var(--brand-color-success, #18824f);
}

.samfony-toast--error {
    border-left-color: var(--brand-color-danger, #b4453c);
}

.samfony-toast--error .samfony-toast-icon {
    color: var(--brand-color-danger, #b4453c);
}

.samfony-toast--info {
    border-left-color: var(--brand-color-accent, #0f88f2);
}

.samfony-toast--info .samfony-toast-icon {
    color: var(--brand-color-accent, #0f88f2);
}

/* ---- Parts --------------------------------------------------------------- */

.samfony-toast-icon {
    flex: 0 0 auto;
    /* Optical alignment with the first line of text rather than the box top,
       which matters because the message routinely wraps to two or three lines. */
    line-height: var(--brand-line-height-body, 1.65);
    font-size: 1rem;
}

/* The stacking column between the icon and the close button. min-width: 0 is
   what lets a long unbroken word wrap instead of forcing the card wider — a
   flex item's default min-width is auto, which refuses to shrink below its
   content. */
.samfony-toast-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* A lead line ("Visste du?") — what kind of card this is, read before the text. */
.samfony-toast-title {
    margin: 0;
    font-weight: var(--brand-font-weight-semibold, 600);
}

.samfony-toast-message {
    margin: 0;
    overflow-wrap: anywhere;
}

/* One line per thing reported. Tight leading between items and a small indent:
   the bullets are a list of facts, not prose, and should scan vertically. */
.samfony-toast-list {
    margin: 0;
    padding-left: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.samfony-toast-list li {
    overflow-wrap: anywhere;
}

/* Muted and slightly smaller so it reads as a footnote to the list rather than
   another entry in it. em, not rem — it tracks the card's own font size. */
.samfony-toast-note {
    margin: 0;
    color: var(--brand-color-text-muted, #5d6c80);
    font-size: 0.9em;
    overflow-wrap: anywhere;
}

/* One or more actions side by side; wraps on a narrow card. */
.samfony-toast-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.15rem;
}

/* The thing the reader does after reading the card — a real button, sized to be
   hit on a phone, not a link buried in the sentence. */
.samfony-toast-action {
    align-self: flex-start;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--brand-color-accent, #0f88f2);
    border-radius: 999px;
    background: transparent;
    color: var(--brand-color-accent-strong, #1157bf);
    font-family: inherit;
    font-size: 0.82em;
    font-weight: var(--brand-font-weight-semibold, 600);
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.samfony-toast-action:hover {
    background: var(--brand-color-accent-soft, rgba(15, 136, 242, 0.12));
}

/* The secondary choice: present, but not competing with the primary one. */
.samfony-toast-action--quiet {
    border-color: transparent;
    color: var(--brand-color-text-muted, #5d6c80);
    font-weight: var(--brand-font-weight-regular, 400);
}

.samfony-toast-action--quiet:hover {
    background: transparent;
    color: var(--brand-color-text, #122033);
    text-decoration: underline;
}

.samfony-toast-action:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-color-accent-soft, rgba(15, 136, 242, 0.12));
}

.samfony-toast-close {
    flex: 0 0 auto;
    padding: 0;
    background: none;
    border: 0;
    color: var(--brand-color-text-muted, #5d6c80);
    line-height: 1;
    cursor: pointer;
    border-radius: var(--brand-radius-sm, 0.5rem);
    transition: color 0.16s ease;
}

.samfony-toast-close:hover {
    color: var(--brand-color-text, #122033);
}

/* The only focusable thing in the component, so it gets a real visible ring —
   :focus-visible rather than :focus, matching personalpage.css and app_base.css. */
.samfony-toast-close:focus-visible {
    outline: 2px solid var(--brand-color-accent, #0f88f2);
    outline-offset: 2px;
}

/* ---- Narrow viewports ----------------------------------------------------
   Full-bleed with gutters. A 380px card pinned right reads as clipped on a
   360px phone. */
@media (max-width: 575.98px) {
    .samfony-toast-container {
        left: var(--brand-space-3, 0.75rem);
        right: var(--brand-space-3, 0.75rem);
        width: auto;
        top: calc(var(--brand-space-4, 1rem) + 56px);
    }
}

/* ---- Reduced motion ------------------------------------------------------
   Same bargain buttons.css strikes: keep the feedback, drop the travel.

   The opacity transition MUST survive. toast.js removes a card on
   `transitionend` filtered to propertyName === "opacity"; kill that and every
   toast would fall through to the timeout safety net instead, which works but
   leaves the card on screen for the full fallback window. */
@media (prefers-reduced-motion: reduce) {
    .samfony-toast,
    .samfony-toast.is-visible,
    .samfony-toast.is-leaving {
        transform: none;
        transition: opacity 0.2s linear;
    }
}