/*
    Notification Center Styles

    Add project-specific styling to Bootstrap 5 Toast notifications.

    This file does:
    - position notification center above normal content
    - size notification toasts
    - apply contextual success/info/warning/error colors
    - preserve line breaks in notification messages

    Required HTML:
    - #notification-center
    - .notification-toast
    - .notification-toast-body
*/

#notification-center {
    z-index: 1080;
}

.notification-toast {
    min-width: min(250px, 70vw);
    max-width: min(450px, 90vw);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

/*
    Notification messages may contain "\n" from JavaScript.
    pre-line displays those line breaks without requiring HTML injection.
*/
.notification-toast-body {
    white-space: pre-line;
}

/* Contextual variants */
.notification-toast-success .toast-header {
    color: #0f5132;
    background-color: #d1e7dd;
    border-bottom-color: #badbcc;
}

.notification-toast-success .toast-body {
    color: #0f5132;
    background-color: #d1e7dd;
}

.notification-toast-info .toast-header {
    color: #055160;
    background-color: #cff4fc;
    border-bottom-color: #b6effb;
}

.notification-toast-info .toast-body {
    color: #055160;
    background-color: #cff4fc;
}

.notification-toast-warning .toast-header {
    color: #664d03;
    background-color: #fff3cd;
    border-bottom-color: #ffecb5;
}

.notification-toast-warning .toast-body {
    color: #664d03;
    background-color: #fff3cd;
}

.notification-toast-error .toast-header,
.notification-toast-danger .toast-header {
    color: #842029;
    background-color: #f8d7da;
    border-bottom-color: #f5c2c7;
}

.notification-toast-error .toast-body,
.notification-toast-danger .toast-body {
    color: #842029;
    background-color: #f8d7da;
}

.notification-toast-secondary .toast-header {
    color: #41464b;
    background-color: #e2e3e5;
    border-bottom-color: #d3d6d8;
}

.notification-toast-secondary .toast-body {
    color: #41464b;
    background-color: #e2e3e5;
}

/* Pin button */
.notification-toast-pin,
.notification-toast-copy {
    color: inherit;
    line-height: 1;
    padding: 0.125rem 0.375rem;
    margin-right: 0.5rem;
    border: 0;
}

.notification-toast-pin:hover,
.notification-toast-pin:focus,
.notification-toast-copy:hover,
.notification-toast-copy:focus {
    color: inherit;
    opacity: 0.75;
}

.notification-toast-pin:focus-visible,
.notification-toast-copy:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.notification-toast-pin.is-pinned {
    opacity: 1;
    font-weight: 700;
}

/* Copy button */
.notification-toast-copy {
    color: inherit;
    line-height: 1;
    padding: 0.125rem 0.375rem;
    margin-right: 0.5rem;
    border: 0;
}

.notification-toast-copy:hover,
.notification-toast-copy:focus {
    color: inherit;
    opacity: 0.75;
}

.notification-toast-copy:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}