/* ==========================================================================
   Toast notifications - theme skin for toastr

   toastr.min.css only supplies the container and positioning; everything a
   user sees (surface, accent, icon, close button, progress) is restyled here
   so every toastr.success/error/warning/info call across the app matches the
   rest of the UI. Behaviour defaults live in assets/js/toast.js.

   Flat colours only - the type is carried by a left accent bar and a tinted
   icon, the card itself stays white.
   ========================================================================== */

:root {
    --toast-surface: #fff;
    --toast-border: #e4e7ec;
    --toast-title: #101828;
    --toast-text: #475467;
    --toast-radius: .625rem;
    --toast-shadow: 0 12px 24px -6px rgba(16, 24, 40, .16), 0 4px 8px -4px rgba(16, 24, 40, .08);

    --toast-success: #198754;
    --toast-error: #b42318;
    --toast-warning: #b45309;
    --toast-info: #175cd3;
}

#toast-container.toast-top-right {
    top: 16px;
    right: 16px;
}

#toast-container > div.toast {
    --toast-accent: var(--toast-info);

    display: block;
    width: 360px;
    max-width: calc(100vw - 32px);
    margin: 0 0 10px;
    padding: 14px 40px 14px 58px;
    border: 1px solid var(--toast-border);
    border-left: 4px solid var(--toast-accent);
    border-radius: var(--toast-radius);
    background-color: var(--toast-surface);
    background-position: 16px 14px;
    background-repeat: no-repeat;
    background-size: 28px 28px;
    box-shadow: var(--toast-shadow);
    color: var(--toast-text);
    font-family: inherit;
    font-size: .875rem;
    line-height: 1.45;
    opacity: 1;
    filter: none;
}

#toast-container > div.toast:hover {
    box-shadow: 0 16px 32px -8px rgba(16, 24, 40, .22), 0 4px 8px -4px rgba(16, 24, 40, .1);
    opacity: 1;
    cursor: pointer;
}

#toast-container > div.toast.rtl {
    padding: 14px 58px 14px 40px;
    border-left-width: 1px;
    border-right: 4px solid var(--toast-accent);
    background-position: right 16px top 14px;
}

#toast-container > div.toast-success { --toast-accent: var(--toast-success); }
#toast-container > div.toast-error   { --toast-accent: var(--toast-error); }
#toast-container > div.toast-warning { --toast-accent: var(--toast-warning); }
#toast-container > div.toast-info    { --toast-accent: var(--toast-info); }

/* Icons: tinted disc + glyph in the accent colour. !important because
   toastr.min.css pins its own white PNG icons with !important. */
#toast-container > div.toast-success {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23198754' fill-opacity='.12'/%3E%3Cpath d='M9 14.5l3.2 3.2L19 11' fill='none' stroke='%23198754' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

#toast-container > div.toast-error {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23b42318' fill-opacity='.12'/%3E%3Cpath d='M10.5 10.5l7 7M17.5 10.5l-7 7' fill='none' stroke='%23b42318' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

#toast-container > div.toast-warning {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23b45309' fill-opacity='.12'/%3E%3Cpath d='M14 8.5v7' fill='none' stroke='%23b45309' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='14' cy='19.3' r='1.3' fill='%23b45309'/%3E%3C/svg%3E") !important;
}

#toast-container > div.toast-info {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23175cd3' fill-opacity='.12'/%3E%3Cpath d='M14 12.5v7' fill='none' stroke='%23175cd3' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='14' cy='8.7' r='1.3' fill='%23175cd3'/%3E%3C/svg%3E") !important;
}

#toast-container > div.toast .toast-title {
    margin-bottom: 2px;
    color: var(--toast-title);
    font-size: .9rem;
    font-weight: 600;
}

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

/* A message without a title is the headline itself - give it the weight. */
#toast-container > div.toast .toast-message:first-child,
#toast-container > div.toast .toast-close-button + .toast-message {
    color: var(--toast-title);
    font-weight: 500;
}

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

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

#toast-container > div.toast .toast-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: #98a2b3;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    text-shadow: none;
    opacity: 1;
    filter: none;
    transition: background-color .15s ease, color .15s ease;
}

#toast-container > div.toast .toast-close-button:hover,
#toast-container > div.toast .toast-close-button:focus-visible {
    background-color: #f2f4f7;
    color: var(--toast-title);
    opacity: 1;
}

#toast-container > div.toast.rtl .toast-close-button {
    right: auto;
    left: 10px;
}

#toast-container > div.toast .toast-progress {
    height: 3px;
    background-color: var(--toast-accent);
    opacity: .35;
    filter: none;
}

@media (max-width: 480px) {
    #toast-container.toast-top-right {
        top: 10px;
        right: 10px;
        left: 10px;
    }

    #toast-container > div.toast {
        width: auto;
        max-width: none;
        padding: 12px 38px 12px 54px;
        background-position: 14px 12px;
    }

    #toast-container > div.toast.rtl {
        padding: 12px 54px 12px 38px;
        background-position: right 14px top 12px;
    }
}