/**
 * Toastr Theme - design-token driven
 *
 * Neutral card surface + colored type accent (left bar + icon).
 * Every color, radius, shadow, spacing and font value is sourced from the
 * design tokens in web/css/variables.css, so toasts match the rest of the app
 * and auto-adapt to light/dark via the [data-theme] token values (no per-theme
 * overrides needed here).
 *
 * Type -> accent:
 *   success -> --color-success-500
 *   error   -> --color-error-500
 *   warning -> --color-warning-500
 *   info    -> --color-primary-500 (brand primary)
 */

/* -----------------------------------------------------------------------------
   Container position: push top-anchored stacks below the fixed header
   ----------------------------------------------------------------------------- */
#toast-container.toast-top-right,
#toast-container.toast-top-left,
#toast-container.toast-top-center,
#toast-container.toast-top-full-width {
    top: calc(var(--header-height, 64px) + 16px);
}

@media (max-width: 767.98px) {
    #toast-container.toast-top-right,
    #toast-container.toast-top-left,
    #toast-container.toast-top-center,
    #toast-container.toast-top-full-width {
        top: calc(var(--header-height-mobile, 56px) + 12px);
    }
}

/* -----------------------------------------------------------------------------
   Base toast: neutral card surface
   ----------------------------------------------------------------------------- */
#toast-container > div {
    /* Default accent (overridden per type below) */
    --toast-accent: var(--color-primary-500);

    width: 340px;
    max-width: calc(100vw - 32px);
    margin: 0 0 var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-12);

    /* Longhand (not the `background` shorthand) so we don't reset
       background-repeat back to `repeat` - that tiled toastr's PNG icon. */
    background-color: var(--card-bg);
    background-repeat: no-repeat;
    color: var(--text-primary);

    border: var(--border-width-thin) solid var(--card-border);
    border-inline-start: var(--border-width-heavy) solid var(--toast-accent);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-lg);
    opacity: 1;

    font-family: var(--font-family-body);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);

    transition: var(--transition-shadow);
}

#toast-container > div:hover {
    box-shadow: var(--shadow-xl);
    opacity: 1;
}

/* -----------------------------------------------------------------------------
   Type icon: Font Awesome glyph tinted with the accent token
   ----------------------------------------------------------------------------- */
#toast-container > div::before {
    content: "\f05a";                           /* info-circle (default) */
    position: absolute;
    inset-inline-start: var(--space-4);
    top: 50%;
    transform: translateY(-50%);

    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: var(--font-size-lg);
    line-height: 1;
    color: var(--toast-accent);
}

/* Remove toastr's default PNG type icons (replaced by the ::before glyph above).
   `div.toast-*` (1,1,1) outranks toastr's `> .toast-*` (1,1,0) regardless of load order. */
#toast-container > div.toast-success,
#toast-container > div.toast-error,
#toast-container > div.toast-warning,
#toast-container > div.toast-info {
    background-image: none !important;
}

#toast-container > .toast-success { --toast-accent: var(--color-success-500); }
#toast-container > .toast-success::before { content: "\f058"; }   /* circle-check */

#toast-container > .toast-error { --toast-accent: var(--color-error-500); }
#toast-container > .toast-error::before { content: "\f057"; }     /* times-circle */

#toast-container > .toast-warning { --toast-accent: var(--color-warning-500); }
#toast-container > .toast-warning::before { content: "\f071"; }   /* triangle-exclamation */

#toast-container > .toast-info { --toast-accent: var(--color-primary-500); }
#toast-container > .toast-info::before { content: "\f05a"; }      /* info-circle */

/* -----------------------------------------------------------------------------
   Title + message
   ----------------------------------------------------------------------------- */
#toast-container > div .toast-title {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

#toast-container > div .toast-message {
    color: var(--text-primary);
}

#toast-container > div .toast-message a,
#toast-container > div .toast-message label {
    color: var(--toast-accent);
    text-decoration: underline;
}

#toast-container > div .toast-message a:hover {
    color: var(--toast-accent);
    opacity: var(--opacity-hover);
}

/* -----------------------------------------------------------------------------
   Close button
   ----------------------------------------------------------------------------- */
#toast-container .toast-close-button {
    color: var(--text-tertiary);
    text-shadow: none;
    opacity: 1;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-normal);
}

#toast-container .toast-close-button:hover,
#toast-container .toast-close-button:focus {
    color: var(--text-primary);
    opacity: 1;
}

/* -----------------------------------------------------------------------------
   Progress bar: tinted with the accent token
   ----------------------------------------------------------------------------- */
#toast-container > div .toast-progress {
    height: 3px;
    background-color: var(--toast-accent);
    opacity: var(--opacity-50);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}