/* ==========================================================================
   Toastr — Nexus design-system reskin
   Rewritten from the stock CodeSeven/toastr stylesheet to read as a
   first-party dashboard component (see wwwroot/css/design-system/tokens.css
   for the --ds-* tokens this file consumes). Structure kept compatible with
   the bundled wwwroot/js/toastr.min.js — no vendor JS fork required:
     #toast-container > div.toast.toast-{success|error|warning|info}
       > .toast-title (optional), .toast-message, .toast-progress
   Sections: 1 Variables · 2 Reset/Container · 3 Position classes ·
   4 Card layout · 5 Type variants · 6 Close button · 7 Progress bar ·
   8 Animations · 9 Responsive · 10 Accessibility
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   Local --toast-* tokens map onto the shared --ds-* design tokens so this
   file has one place to retune the component; fallbacks let toastr.css keep
   working if ever loaded on a page without design-system/tokens.css.
   -------------------------------------------------------------------------- */
#toast-container {
    --toast-gap: var(--space-2, 8px);
    --toast-width: 280px;
    --toast-radius: var(--radius-md, 12px);
    --toast-shadow: var(--ds-shadow-lg, 0 10px 24px rgba(28, 26, 46, 0.14)), var(--ds-shadow-sm, 0 1px 2px rgba(28, 26, 46, 0.08));
    --toast-surface: var(--ds-surface, #ffffff);
    --toast-border: var(--ds-border, #ECEDF3);
    --toast-text: var(--ds-text, #14142B);
    --toast-text-muted: var(--ds-text-muted, #6b7280);
    --toast-duration: 220ms;
    --toast-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. Reset / container
   -------------------------------------------------------------------------- */
#toast-container {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
}

#toast-container * {
    box-sizing: border-box;
}

/* Grid, not flex: toastr.js's fixed DOM order is
   ::before(icon), .toast-close-button, .toast-title, .toast-message — as a
   flex row that put the close button between the icon and the title, and
   left the title sitting beside the message instead of above it. The grid
   below pins icon/title to row 1 and lets .toast-message span the full
   row-2 width underneath (which is also what makes a wide toastr-table
   inside it actually reach the card's edges).

   The close button is intentionally taken OUT of grid flow and pinned with
   position: absolute at the card's own top-end corner (inset-inline-end
   mirrors correctly for RTL) — a 3rd grid track sized "at the end" is only
   guaranteed to sit at the visual edge when every other track's content
   fills its available space; an empty/short title (many toastr.success()/
   .info() calls pass no title at all) could otherwise leave the button
   short of the true edge. Absolute positioning has no such dependency. */
#toast-container > div {
    position: relative;
    display: grid;
    grid-template-columns: 16px 1fr;
    align-items: start;
    column-gap: var(--space-2, 8px);
    pointer-events: auto;
    overflow: hidden;
    width: var(--toast-width);
    margin: 0 0 var(--toast-gap);
    padding: 10px 32px 10px 14px;
    border-radius: var(--toast-radius);
    /* Translucent border instead of a solid --toast-border — a solid-color
       border around a see-through card breaks the glass illusion (reads as
       a normal card with a blur filter bolted on). Subtle — this is meant to
       read as a clean frosted-glass card, not a heavy neon-edge effect. */
    border: 1px solid color-mix(in srgb, var(--toast-border) 65%, transparent);
    /* Genuine glass morphism (Phase 13) — same recipe as the sidebar's glass
       surface (shell.css), generalized via the --ds-glass-* tokens in
       tokens.css. Previously this was a fully OPAQUE --toast-surface with a
       backdrop-filter: blur(12px) that had nothing translucent to blur —
       the blur was silently a no-op. color-mix here is what actually makes
       the page behind the toast show (and blur) through it. Kept fairly
       opaque (--ds-glass-opacity ~70-74%) and lightly blurred on purpose —
       high clarity over heavy blur/see-through reads as a professional
       frosted-glass panel rather than a distracting effect. */
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 40%),
        color-mix(in srgb, var(--toast-surface) var(--ds-glass-opacity, 74%), transparent);
    box-shadow: var(--toast-shadow), inset 0 1px 0 rgba(255, 255, 255, .08);
    color: var(--toast-text);
    opacity: 1;
    font-family: var(--ds-font, inherit);
    -webkit-backdrop-filter: blur(var(--ds-glass-blur, 14px)) saturate(1.3);
    backdrop-filter: blur(var(--ds-glass-blur, 14px)) saturate(1.3);
}

/* Slim accent bar on the leading edge — a quick-glance severity cue that
   doesn't rely on the small icon alone, common to Linear/Vercel-style toast
   stacks. Mirrors for RTL via inset-inline. */
#toast-container > div::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--toast-accent, var(--ds-primary));
}

[dir="rtl"] #toast-container > div,
#toast-container > div.rtl {
    padding: 10px 14px 10px 32px;
}

#toast-container > div::before { grid-column: 1; grid-row: 1; margin-top: 2px; }
.toast-title { grid-column: 2; grid-row: 1; }
.toast-close-button {
    position: absolute;
    top: 7px;
    inset-inline-end: 7px;
}
.toast-message { grid-column: 1 / -1; grid-row: 2; margin-top: var(--space-1, 4px); }

#toast-container > div:hover {
    box-shadow: var(--ds-shadow-lg, 0 12px 32px rgba(28, 26, 46, 0.2));
    cursor: pointer;
}

#toast-container > div.rtl {
    direction: rtl;
}

/* --------------------------------------------------------------------------
   3. Position classes
   -------------------------------------------------------------------------- */
.toast-top-right {
    top: var(--toast-gap, 12px);
    right: var(--toast-gap, 12px);
}

.toast-bottom-right {
    bottom: var(--toast-gap, 12px);
    right: var(--toast-gap, 12px);
}

.toast-top-left {
    top: var(--toast-gap, 12px);
    left: var(--toast-gap, 12px);
}

.toast-bottom-left {
    bottom: var(--toast-gap, 12px);
    left: var(--toast-gap, 12px);
}

.toast-top-center,
.toast-top-full-width {
    top: var(--toast-gap, 12px);
    right: 0;
    width: 100%;
}

.toast-bottom-center,
.toast-bottom-full-width {
    bottom: var(--toast-gap, 12px);
    right: 0;
    width: 100%;
}

#toast-container.toast-top-center > div,
#toast-container.toast-bottom-center > div {
    width: var(--toast-width);
    margin-left: auto;
    margin-right: auto;
}

#toast-container.toast-top-full-width > div,
#toast-container.toast-bottom-full-width > div {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------------------
   4. Card layout — status icon | title + message (+ optional timestamp) | close
   -------------------------------------------------------------------------- */
#toast-container > div::before {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background-color: var(--toast-accent, var(--ds-info));
    -webkit-mask-image: var(--toast-icon);
    mask-image: var(--toast-icon);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Primary title — 18px/SemiBold per the Nexus header spec, was 14px/700
   (same weight as a table cell). .toast-meta (barcode/etc., appended to the
   title string at the call site since toastr only exposes one title slot)
   is the secondary/muted metadata line underneath it. */
.toast-title {
    margin: 0 0 2px;
    font-size: .9375rem; /* 15px */
    font-weight: 600;
    line-height: 1.3;
    color: var(--toast-text);
}

.toast-meta {
    display: block;
    margin-top: 1px;
    font-size: .75rem; /* 12px */
    font-weight: 500;
    color: var(--toast-text-muted);
}

.toast-message {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .8125rem; /* 13px */
    font-weight: 500;
    line-height: 1.4;
    color: var(--toast-text-muted);
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

.toast-message:not(:only-child) {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   4b. Data-table toasts — some views (Purchase/Index, ReturnForm, etc.) push
   a whole "<div class="table-scroll"><table class="toastr-table">…" into
   toastr.info() as the message, instead of plain text. .table-scroll and
   .toastr-table had no rules at all, so the table only took its own
   content width and never filled the (often full-width) toast card, and
   the icon/close button crowded whatever line the title happened to be on.

   Surface hierarchy (Phase 9): title/header reads at the card's own
   --toast-surface; the table wrapper sits one step back (Surface 2) so it
   reads as its own region, bordered with the shared --toast-border token.
   -------------------------------------------------------------------------- */
.toast-message .table-scroll {
    width: 100%;
    max-width: 100%;
    max-height: 25vh;
    overflow: auto;
    border: 1px solid var(--toast-border);
    border-radius: var(--radius-md, 12px);
    background-color: var(--ds-surface-2, var(--toast-surface));
    /* Thin, theme-aware scrollbar (Phase 12) instead of the OS default. */
    scrollbar-width: thin;
    scrollbar-color: var(--toast-border) transparent;
}

.toast-message .table-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.toast-message .table-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.toast-message .table-scroll::-webkit-scrollbar-thumb {
    background-color: var(--toast-border);
    border-radius: var(--radius-sm, 8px);
}

.toast-message .table-scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--toast-text-muted);
}

/* Safety net: .table-scroll is meant to wrap the <table> as its own <div>
   (see the markup comment above). At least one view (StoreToRepayee/Add)
   put the class directly ON the <table>/<tbody> instead — max-height/
   overflow do nothing on a `display: table` element, so that toast grew to
   the full row count and covered the page (no scrollbar at all). Force the
   box model that makes the height cap actually apply regardless of which
   element the class ends up on, so a future copy-paste of the same mistake
   still scrolls instead of silently breaking. */
.toast-message table.table-scroll,
.toast-message tbody.table-scroll {
    display: block;
    max-height: 25vh;
    overflow: auto;
}

.toastr-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    color: var(--toast-text);
    font-size: 11px;
}

    .toastr-table th,
    .toastr-table td {
        padding: var(--space-1, 4px) var(--space-2, 8px);
        border-bottom: 1px solid var(--toast-border);
        border-inline-end: 1px solid transparent; /* minimize column noise — no vertical rules */
        white-space: nowrap;
        text-align: start; /* mirrors correctly for Arabic/Kurdish RTL */
        transition: background-color 150ms ease;
    }

    /* Numeric columns (Phase 6) — right-aligned, tabular figures, by fixed
       column position. Different toastr.info call sites across the app
       build .toastr-table with different column counts/orders (Purchase's
       16-column buying-detail table vs. e.g. StoreToRepayee's 13-column
       return table vs. TestInventory's 3-column one), so a blanket
       nth-child rule on every .toastr-table would right-align the WRONG
       column on every shape except Purchase's. Scoped to an explicit
       .toastr-table--money-cols modifier class instead — added only where
       the column order is verified (Purchase/Index, Edit, EditAfterPurchace)
       — everyone else safely keeps the neutral text-align: start above. */
    .toastr-table.toastr-table--money-cols td:nth-child(6),
    .toastr-table.toastr-table--money-cols td:nth-child(11),
    .toastr-table.toastr-table--money-cols td:nth-child(12),
    .toastr-table.toastr-table--money-cols td:nth-child(13),
    .toastr-table.toastr-table--money-cols td:nth-child(14),
    .toastr-table.toastr-table--money-cols td:nth-child(16) {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    [dir="rtl"] .toastr-table.toastr-table--money-cols td:nth-child(6),
    [dir="rtl"] .toastr-table.toastr-table--money-cols td:nth-child(11),
    [dir="rtl"] .toastr-table.toastr-table--money-cols td:nth-child(12),
    [dir="rtl"] .toastr-table.toastr-table--money-cols td:nth-child(13),
    [dir="rtl"] .toastr-table.toastr-table--money-cols td:nth-child(14),
    [dir="rtl"] .toastr-table.toastr-table--money-cols td:nth-child(16) {
        text-align: left; /* numeric columns stay left-aligned even in RTL */
    }

    .toastr-table thead th {
        position: sticky;
        top: 0;
        background-color: var(--ds-bg, #f8f9fb);
        color: var(--toast-text-muted);
        font-size: 10px;
        text-transform: uppercase;
        font-weight: 700;
    }

    .toastr-table tbody tr:nth-child(even) {
        background-color: var(--ds-bg, #f8f9fb);
    }

    .toastr-table tbody tr:hover {
        background-color: var(--ds-hover);
    }

/* Density (Phase 7) — reuses the app-wide Density setting (data-ds-density
   on <html>, same attribute the rest of the design system reads) rather
   than a second, disconnected density control for just this table. */
:root[data-ds-density="compact"] .toastr-table th,
:root[data-ds-density="compact"] .toastr-table td {
    padding: var(--space-1, 4px) var(--space-2, 8px);
}

/* -- Footer KPI strip (Phase 8) — Store Qty / Final Cost / Discount / Qty
   Bounce, same four values as before, restructured as label-over-value
   blocks instead of one "Label: value" text run per <h6>. -------------- */
.toast-kpis {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    margin-top: var(--space-1, 4px);
    padding-top: var(--space-1, 4px);
    border-top: 1px solid var(--toast-border);
}

.toast-kpi {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.toast-kpi-label {
    font-size: .625rem; /* 10px */
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--toast-text-muted);
}

.toast-kpi-value {
    font-size: .75rem; /* 12px */
    font-weight: 600;
    color: var(--toast-text);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   4c. Legacy footer pattern — every other toastr.info(buyingDetailTable)
   call site across the app (ReturnForm, RealInventory, Reports/ItemOrderNew,
   Selling, etc.) still builds its summary row as
   <span class="d-flex justify-content-between align-items-center"><h6>Label:
   value</h6>...</span> instead of the .toast-kpis markup above. Rather than
   editing every one of those call sites' JS, style that exact structure here
   so all of them pick up the same modernized look automatically: full-width,
   truly space-between (Bootstrap's own .d-flex/.justify-content-between
   utilities apply the property, but the span never stretched to the card's
   full width, so "space between" had no room to actually spread across),
   with typography matching the new KPI values.
   -------------------------------------------------------------------------- */
.toast-message > span.d-flex.justify-content-between {
    width: 100%;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin-top: var(--space-1, 4px);
    padding-top: var(--space-1, 4px);
    border-top: 1px solid var(--toast-border);
}

.toast-message > span.d-flex.justify-content-between h6 {
    margin: 0;
    font-size: .75rem;
    font-weight: 600;
    color: var(--toast-text);
    font-variant-numeric: tabular-nums;
}

.toast-message a,
.toast-message label {
    color: var(--ds-primary, #6D5CE0);
    font-weight: 600;
}

.toast-message a:hover {
    text-decoration: underline;
}

/* Optional timestamp row — opt-in: append `<span class="toast-timestamp">…</span>`
   inside the message (e.g. via toastr.options.onShown) to get the
   "Just now" caption from the layout spec; toastr renders fine without it. */
.toast-timestamp {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 500;
    color: var(--toast-text-muted);
    opacity: .8;
}

/* --------------------------------------------------------------------------
   5. Type variants — accent color + icon per severity
   -------------------------------------------------------------------------- */
.toast-success {
    --toast-accent: var(--ds-success, #16A34A);
    --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    border-color: color-mix(in srgb, var(--toast-accent) 25%, var(--toast-border));
    background-color: color-mix(in srgb, var(--toast-accent) 6%, var(--toast-surface));
}

.toast-error {
    --toast-accent: var(--ds-danger, #DC2626);
    --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='14.5' y1='9.5' x2='9.5' y2='14.5'/%3E%3Cline x1='9.5' y1='9.5' x2='14.5' y2='14.5'/%3E%3C/svg%3E");
    border-color: color-mix(in srgb, var(--toast-accent) 25%, var(--toast-border));
    background-color: color-mix(in srgb, var(--toast-accent) 6%, var(--toast-surface));
}

.toast-warning {
    --toast-accent: var(--ds-warning, #D97706);
    --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
    border-color: color-mix(in srgb, var(--toast-accent) 25%, var(--toast-border));
    background-color: color-mix(in srgb, var(--toast-accent) 6%, var(--toast-surface));
}

.toast-info {
    --toast-accent: var(--ds-info, #5B93FF);
    --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='16' x2='12' y2='11.5'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
    border-color: color-mix(in srgb, var(--toast-accent) 25%, var(--toast-border));
    background-color: color-mix(in srgb, var(--toast-accent) 6%, var(--toast-surface));
}

/* Opt-in variant for pending/sync work — pass `{iconClass: 'toast-loading'}`
   in the toastr options override (kept as toast-info's color so it reads as
   neutral/in-progress rather than success or failure). */
.toast-loading::before {
    --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 1 1-9 9'/%3E%3C/svg%3E");
    animation: toast-spin 900ms linear infinite;
}

/* --------------------------------------------------------------------------
   6. Close button
   -------------------------------------------------------------------------- */
/* 32px clickable box (was 20px) — a clear step toward the 44px touch-target
   guideline without the button visually dominating a compact toast card;
   the icon glyph itself stays 12px, centered, via ::before below. */
.toast-close-button {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm, 8px);
    background-color: transparent;
    color: var(--toast-text-muted);
    opacity: .7;
    cursor: pointer;
    line-height: 1;
    font-size: 0; /* hide the default "&times;" glyph in favor of the mask icon */
    transition: background-color 150ms ease, opacity 150ms ease, color 150ms ease, transform 150ms ease;
    -webkit-appearance: none;
}

.toast-close-button::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 10px;
    height: 10px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}

.toast-close-button:hover,
.toast-close-button:focus-visible {
    opacity: 1;
    color: var(--toast-text);
    background-color: var(--ds-hover, rgba(0, 0, 0, 0.06));
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .toast-close-button { transition: none; }
    .toast-close-button:hover, .toast-close-button:focus-visible { transform: none; }
}

.toast-close-button:focus-visible {
    outline: 2px solid var(--ds-primary, #6D5CE0);
    outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   7. Progress bar
   -------------------------------------------------------------------------- */
.toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    border-radius: 0 0 0 2px;
    background-image: linear-gradient(90deg, var(--toast-accent, var(--ds-primary)), color-mix(in srgb, var(--toast-accent, var(--ds-primary)) 55%, white));
    opacity: .9;
    transform-origin: left center;
}

/* --------------------------------------------------------------------------
   8. Animations
   toastr drives show/hide via jQuery fadeIn/fadeOut on opacity; the
   transform/scale motion is layered on top via this CSS animation so no
   toastr.options change is required to get the modern entry/exit. -------- */
@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: no-preference) {
    #toast-container > div {
        animation: toast-in var(--toast-duration) var(--toast-easing);
    }
}

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    #toast-container {
        --toast-width: 22em;
    }
}

@media (max-width: 480px) {
    #toast-container {
        --toast-width: calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    }

    #toast-container > div {
        padding: 10px 40px 10px 14px;
    }

    [dir="rtl"] #toast-container > div,
    #toast-container > div.rtl {
        padding: 10px 14px 10px 40px;
    }

    .toast-top-right,
    .toast-top-left,
    .toast-bottom-right,
    .toast-bottom-left {
        left: max(12px, env(safe-area-inset-left, 12px));
        right: max(12px, env(safe-area-inset-right, 12px));
    }

    /* Mobile touch targets grow, not shrink — still bigger than the 24px
       desktop button despite the overall card shrinking. */
    .toast-close-button {
        width: 32px;
        height: 32px;
        top: 5px;
        inset-inline-end: 5px;
    }

    .toast-close-button::before {
        width: 12px;
        height: 12px;
    }
}

/* --------------------------------------------------------------------------
   10. Accessibility
   toastr already sets aria-live="polite|assertive" per type at runtime, so
   this section only covers what CSS is responsible for.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #toast-container > div {
        animation: none;
    }

    .toast-loading::before {
        animation: none;
    }
}

@media (prefers-contrast: more) {
    #toast-container > div {
        border-width: 2px;
    }
}