/* ============================================================================
   SDToast — shared notification popup styling.

   Deliberately the same .toast-notification / .toast-content / .toast-icon
   markup that children.css and appointments.css already style, so this is the
   established look rather than a new one. Those two files scope it per-page;
   this one is loaded globally from base.html so any page can show a toast, and
   so the pages that had nothing stop falling back to window.alert().

   Colours are literals rather than the var(--success) / var(--danger) those
   files use: those custom properties are declared per-page and are not defined
   on every template, so a global rule referencing them would render an
   invisible border on the pages that need this most. Values match the product
   palette (CLAUDE.md).
   ========================================================================= */

.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 10000;
    min-width: 320px;
    max-width: 500px;
    opacity: 0;
    transform: translateX(400px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-family: 'Poppins', sans-serif;
}

.toast-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.toast-icon { font-size: 1.25rem; flex-shrink: 0; }

.toast-message {
    color: #15212e;
    font-weight: 500;
    font-size: 0.92rem;
    line-height: 1.4;
    overflow-wrap: anywhere;   /* a long server message must not overflow */
}

.toast-close {
    background: transparent;
    border: 0;
    color: #5b6875;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    /* 44px target: the glyph is small, the hit area must not be */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
}
.toast-close:hover { color: #15212e; background: rgba(0, 0, 0, 0.04); }
.toast-close:focus-visible { outline: 2px solid #1d9a8a; outline-offset: 2px; }

.toast-success { border-left: 4px solid #25b581; }
.toast-success .toast-icon { color: #25b581; }
.toast-error   { border-left: 4px solid #ef4444; }
.toast-error   .toast-icon { color: #ef4444; }
.toast-warning { border-left: 4px solid #ffc107; }
.toast-warning .toast-icon { color: #b8860b; }
.toast-info    { border-left: 4px solid #1d9a8a; }
.toast-info    .toast-icon { color: #1d9a8a; }

/* Phone: full width at the top, where a right-anchored 320px card would
   otherwise sit half off-screen. */
@media (max-width: 520px) {
    .toast-notification {
        top: 12px;
        right: 12px;
        left: 12px;
        min-width: 0;
        max-width: none;
        transform: translateY(-140%);
    }
    .toast-notification.show { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .toast-notification { transition-duration: 1ms; }
}