/*
 * TIPM toast styling.
 *
 * Overrides toastr's 2012-era look without touching the library or any of the
 * 140 toastr() calls in the controllers — they emit the same markup, this just
 * restyles it. Loaded AFTER toastr.min.css so these rules win.
 */

#toast-container > div {
    /* toastr sets an opacity and a background image sprite; clear both. */
    opacity: 1 !important;
    background-image: none !important;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06) !important;

    position: relative;
    width: 360px;
    max-width: calc(100vw - 2rem);
    padding: 1rem 2.4rem 1rem 3.25rem;
    margin: 0 0 .75rem;
    border: 1px solid #eef1f5;
    border-left: 4px solid var(--toast-accent, #9b324a);
    border-radius: .7rem;
    background-color: #fff;
    color: #1f2937;
    font-family: inherit;
}

#toast-container > div:hover {
    box-shadow: 0 14px 38px rgba(16, 24, 40, .16) !important;
}

/* The coloured dot + glyph on the left. */
#toast-container > div::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 1.05rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--toast-accent, #9b324a) no-repeat center / 12px 12px;
}

#toast-container > .toast-success  { --toast-accent: #16a34a; }
#toast-container > .toast-error    { --toast-accent: #dc2626; }
#toast-container > .toast-warning  { --toast-accent: #d97706; }
#toast-container > .toast-info     { --toast-accent: #2563eb; }

/* White glyphs, inlined so no extra request is made. */
#toast-container > .toast-success::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}
#toast-container > .toast-error::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}
#toast-container > .toast-warning::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z'/%3E%3C/svg%3E");
}
#toast-container > .toast-info::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M11 7h2v2h-2V7zm0 4h2v6h-2v-6zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/%3E%3C/svg%3E");
}

#toast-container .toast-title {
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: .15rem;
    color: #111827;
}

#toast-container .toast-message {
    font-size: .83rem;
    line-height: 1.5;
    color: #4b5563;
    word-break: break-word;
}

/* A title with no message, and vice versa, should still sit level with the icon. */
#toast-container .toast-title:empty,
#toast-container .toast-message:empty { display: none; }

#toast-container .toast-close-button {
    position: absolute;
    top: .55rem;
    right: .6rem;
    width: 22px;
    height: 22px;
    font-size: 0;
    line-height: 0;
    opacity: .45;
    text-shadow: none;
    color: transparent;
    background: no-repeat center / 11px 11px
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    border-radius: 4px;
}
#toast-container .toast-close-button:hover,
#toast-container .toast-close-button:focus {
    opacity: 1;
    background-color: #f3f4f6;
}

#toast-container .toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    opacity: 1;
    background: var(--toast-accent, #9b324a);
    border-bottom-left-radius: .7rem;
}

/* Clear of the fixed header, and comfortable on a phone. */
#toast-container.toast-top-right {
    top: 5rem;
    right: 1rem;
}

@media (max-width: 575.98px) {
    #toast-container.toast-top-right,
    #toast-container.toast-top-left,
    #toast-container.toast-bottom-right,
    #toast-container.toast-bottom-left {
        top: auto;
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        width: auto;
    }
    #toast-container > div { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    #toast-container > div { transition: none !important; }
}