/* ================================================================
   SuppTech custom toast notifications (wwwroot/js/toast.js)

   Replaces the old SweetAlert2 "toast: true" popups. Those anchored
   top-right and needed a hand-tuned padding-top to clear the fixed
   admin topbar plus whatever header card a given page happened to
   render right below it, and that number was wrong again on every
   new page shape (see the git history on this file for two failed
   attempts at that). Anchoring bottom-right instead means there is
   no topbar or page header to clear in the first place, so there is
   nothing left to get wrong per page.

   Colours reuse this app's own --st-* design tokens (theme.css), so
   the toast already matches both the light and dark theme without
   a separate dark-mode block here.
   ================================================================ */

#st-toast-container {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
    width: calc(100% - 40px);
    pointer-events: none;
}

.st-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--st-surface, #fff);
    color: var(--st-text-hi, #1e2941);
    border-radius: 12px;
    box-shadow: var(--st-shadow-lg, 0 20px 60px rgba(0,0,0,.18));
    border-left: 5px solid var(--st-primary, #3563a9);
    padding: 14px 14px 16px 16px;
    font-size: 14px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(14px) scale(.97);
    transition: opacity .25s ease, transform .25s ease;
}

.st-toast-show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.st-toast-hide {
    opacity: 0;
    transform: translateY(8px) scale(.96);
}

.st-toast-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

.st-toast-message {
    flex: 1;
    line-height: 1.45;
    font-weight: 600;
    padding-top: 5px;
    word-break: break-word;
}

.st-toast-close {
    background: none;
    border: none;
    color: var(--st-text-faint, #9ca3af);
    cursor: pointer;
    font-size: 12px;
    padding: 6px;
    margin: -6px -6px 0 0;
    line-height: 1;
    flex-shrink: 0;
    border-radius: 6px;
}
.st-toast-close:hover { color: var(--st-text, #374151); background: var(--st-row-hover, #f8f9fa); }

.st-toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: currentColor;
    opacity: .5;
    transform: scaleX(1);
    transform-origin: left;
}

/* Type accents */
.st-toast-success { border-left-color: #198754; }
.st-toast-success .st-toast-icon { background: rgba(25,135,84,.14); color: #198754; }
.st-toast-success .st-toast-progress { color: #198754; }

.st-toast-error { border-left-color: #e63757; }
.st-toast-error .st-toast-icon { background: rgba(230,55,87,.14); color: #e63757; }
.st-toast-error .st-toast-progress { color: #e63757; }

.st-toast-warning { border-left-color: #d97706; }
.st-toast-warning .st-toast-icon { background: rgba(217,119,6,.14); color: #d97706; }
.st-toast-warning .st-toast-progress { color: #d97706; }

.st-toast-info { border-left-color: var(--st-primary, #3563a9); }
.st-toast-info .st-toast-icon { background: rgba(53,99,169,.14); color: var(--st-primary, #3563a9); }
.st-toast-info .st-toast-progress { color: var(--st-primary, #3563a9); }

@media (max-width: 480px) {
    #st-toast-container { right: 12px; left: 12px; bottom: 12px; max-width: none; width: auto; }
}