/*
 * ERP Notification System — modern toast styles.
 * Paired with public/js/notifications.js (window.toastr / window.Notify).
 *
 * All behavioural config (colours, icons, duration, position, sounds) lives in
 * the CONFIG object at the top of notifications.js. This file only controls the
 * visual appearance. Colours below are kept in sync with CONFIG.types.*.accent.
 */

/* ---- Stacking containers (one per screen position) ---------------------- */
.erp-toast-container {
    position: fixed;
    z-index: 999999;              /* above modals, sidebars, sticky headers   */
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 380px;
    width: calc(100% - 40px);
    pointer-events: none;         /* let clicks pass through empty gaps        */
    box-sizing: border-box;
}

.erp-toast-container--top-right    { top: 20px;    right: 20px; }
.erp-toast-container--top-left     { top: 20px;    left: 20px; }
.erp-toast-container--bottom-right { bottom: 20px; right: 20px; flex-direction: column-reverse; }
.erp-toast-container--bottom-left  { bottom: 20px; left: 20px;  flex-direction: column-reverse; }
.erp-toast-container--top-center {
    top: 20px; left: 50%; transform: translateX(-50%);
}
.erp-toast-container--bottom-center {
    bottom: 20px; left: 50%; transform: translateX(-50%);
    flex-direction: column-reverse;
}

/* ---- Toast card --------------------------------------------------------- */
.erp-toast {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;                       /* rounded corners             */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18),
                0 2px 6px rgba(0, 0, 0, 0.12);  /* soft shadow                 */
    color: #fff;
    overflow: hidden;
    font-family: inherit;
    line-height: 1.4;
    opacity: 0;
    transform: translateX(120%);
    transition: transform .3s cubic-bezier(.21, 1.02, .73, 1),
                opacity .3s ease;
    will-change: transform, opacity;
}

/* Left/right entry depending on container side */
.erp-toast-container--top-left  .erp-toast,
.erp-toast-container--bottom-left .erp-toast { transform: translateX(-120%); }
.erp-toast-container--top-center .erp-toast,
.erp-toast-container--bottom-center .erp-toast { transform: translateY(-24px); }

/* Visible state (added on next frame by JS) */
.erp-toast.notif-in  { opacity: 1; transform: translateX(0); }
.erp-toast-container--top-center .erp-toast.notif-in,
.erp-toast-container--bottom-center .erp-toast.notif-in { transform: translateY(0); }

/* Exit state */
.erp-toast.notif-out {
    opacity: 0;
    transform: translateX(120%) scale(.96);
}
.erp-toast-container--top-left  .erp-toast.notif-out,
.erp-toast-container--bottom-left .erp-toast.notif-out { transform: translateX(-120%) scale(.96); }
.erp-toast-container--top-center .erp-toast.notif-out,
.erp-toast-container--bottom-center .erp-toast.notif-out { transform: translateY(-24px) scale(.96); }

/* ---- Contextual colours (Bootstrap-aligned gradients) ------------------- */
.erp-toast--success { background: linear-gradient(135deg, #2ecc71 0%, #28a745 100%); }
.erp-toast--error   { background: linear-gradient(135deg, #e74c3c 0%, #dc3545 100%); }
.erp-toast--info    { background: linear-gradient(135deg, #17a2b8 0%, #138496 100%); }
/* Every toast now renders white text (see the contrast note below), so warning
   uses a deeper amber->orange than the old pale yellow, which white could not be
   read against. It stays in the orange/yellow family. */
.erp-toast--warning { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); }

/* ---- Text colour -------------------------------------------------------- *
 * Every part of a toast is white on all four types.
 *
 * `color: #fff` on .erp-toast alone is NOT enough: the title and message are
 * <p> elements, and the theme (assets/css/all.css) styles `p { color: #515365 }`
 * directly. A rule that targets an element beats an inherited value regardless
 * of specificity, so the theme won and the text rendered dark grey. These rules
 * set the colour on the children themselves, which does beat it.
 * The icons draw with `currentColor`, so colouring the badge covers them too. */
.erp-toast__title,
.erp-toast__message,
.erp-toast__icon,
.erp-toast__close {
    color: #ffffff;
}

/* ---- Icon badge --------------------------------------------------------- */
.erp-toast__icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    margin-top: 1px;
}
.erp-toast__icon svg { width: 16px; height: 16px; display: block; }

/* ---- Body --------------------------------------------------------------- */
.erp-toast__body {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 4px;
}
.erp-toast__title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 2px;
    letter-spacing: .1px;
}
.erp-toast__message {
    font-size: 13px;
    font-weight: 400;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    opacity: .96;
}

/* ---- Close button ------------------------------------------------------- */
.erp-toast__close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    opacity: .7;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    margin: -2px -4px 0 0;
    transition: opacity .15s ease;
}
.erp-toast__close:hover { opacity: 1; }

/* ---- Progress bar ------------------------------------------------------- */
.erp-toast__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.85);
    transform-origin: left;
    border-bottom-left-radius: 12px;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 480px) {
    .erp-toast-container {
        left: 12px !important;
        right: 12px !important;
        max-width: none;
        width: auto;
        transform: none !important;
    }
    .erp-toast { border-radius: 10px; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .erp-toast { transition: opacity .2s ease; transform: none !important; }
}

/* ---- Print -------------------------------------------------------------- *
 * Receipts/invoices print with window.print() on the same document (POS
 * finalize -> __print_receipt in functions.js), so a toast that is still on
 * screen would be captured into the printed page / saved PDF. app.css already
 * hides the legacy toastr `#toast-container` in print; this covers ours. */
@media print {
    .erp-toast-container { display: none !important; }
}

/* ---- Header bell dropdown: "Clear All" ---------------------------------- */
/* Items sweep out one after another (staggered from app.js), then the empty
   state fades in, so clearing reads as an action instead of a blank refresh. */
.notification-item {
    transition: opacity .28s ease, transform .28s ease, max-height .28s ease,
        padding .28s ease, margin .28s ease;
    max-height: 120px;
    overflow: hidden;
}

.notification-item-clearing {
    opacity: 0;
    transform: translateX(28px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    pointer-events: none;
}

.notifications_empty-in {
    animation: erp-notif-empty-in .32s ease both;
}

@keyframes erp-notif-empty-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* Clear All while the request is in flight */
.clear_all_notifications.clearing {
    opacity: .5;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .notification-item { transition: opacity .2s ease; }
    .notification-item-clearing { transform: none; max-height: none; }
    .notifications_empty-in { animation: none; }
}