/* Notifications and dialogs, portal-wide.

   Every toast and every SweetAlert in the application renders through here. Both libraries append
   their container to <body>, outside whichever page element carries the palette class, so
   global-notifications.js stamps that class onto the container as it appears — which is why the
   rules below can use the same --portal-* tokens as the rest of the portal and follow the staff,
   customer and admin palettes without a second copy of any colour.

   What this replaces: Metronic's stock toastr (solid --bs-success / --bs-danger blocks with
   base64 icons) and stock SweetAlert (Bootstrap blue buttons, 16px radius, LTR button order),
   neither of which shares a single value with the portal's own surfaces.

   Nothing here is per-page. A dialog opened from an invoice, an order or a form is the same
   dialog; the only thing a page supplies is its text. */


/* ============================================================
   Tones

   Named by meaning. The dark block re-points them once for both
   libraries.
   ============================================================ */

.rased-notify {
    --nx-ok: #1f6b45;
    --nx-ok-surface: #e7f4ec;
    --nx-ok-line: #c6e5d3;

    --nx-bad: #a8442f;
    --nx-bad-surface: #fdeceb;
    --nx-bad-line: #f6d6d3;

    --nx-warn: var(--portal-gold-emphasis);
    --nx-warn-surface: var(--portal-gold-surface);
    --nx-warn-line: var(--portal-gold-line);

    --nx-info: var(--portal-accent);
    --nx-info-surface: color-mix(in srgb, var(--portal-accent) 10%, var(--portal-paper));
    --nx-info-line: color-mix(in srgb, var(--portal-accent) 24%, transparent);

    --nx-radius: 16px;
    --nx-radius-sm: 11px;
    --nx-shadow: 0 18px 44px color-mix(in srgb, var(--portal-ink) 22%, transparent);
    --nx-font: IRANYekanX, IRANYekan, sans-serif;
}

html[data-bs-theme="dark"] .rased-notify {
    --nx-ok: #8fd3ab;
    --nx-ok-surface: #1d3a2c;
    --nx-ok-line: #2d5741;

    --nx-bad: #f0a595;
    --nx-bad-surface: #3d241f;
    --nx-bad-line: #5c352d;
}


/* ============================================================
   Toasts

   A paper card with a tone-coloured rail and icon rather than a
   saturated block: the same surface language as every panel in
   the portal, and legible against both themes.
   ============================================================ */

#toastr-container.rased-notify {
    inset-inline-start: 18px;
    inset-block-end: 18px;
    inset-inline-end: auto;
    z-index: 100000;
}

/* Drawer forms keep their submit controls at the bottom. Put notifications on the
   opposite side on desktop, and above the form on narrow screens, so errors do
   not prevent the user from retrying the preserved draft. */
body:has(.offcanvas.show) #toastr-container.rased-notify {
    inset-inline-start: auto;
    inset-inline-end: 18px;
}

@media (max-width: 767.98px) {
    body:has(.offcanvas.show) #toastr-container.rased-notify {
        inset-block-start: 18px;
        inset-block-end: auto;
    }
}

#toastr-container.rased-notify > div.toastr {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    /* The plugin's own layout is a background-image icon with 4.5rem of padding reserved for it.
       The icon is drawn as a real element below, so that reservation is undone here. */
    padding: 14px 16px !important;
    background-image: none !important;

    inline-size: 340px;
    max-inline-size: calc(100vw - 36px);
    margin: 0 0 10px;

    border: 1px solid var(--portal-line) !important;
    border-inline-start: 4px solid var(--portal-line) !important;
    border-radius: var(--nx-radius-sm) !important;

    background-color: var(--portal-paper) !important;
    color: var(--portal-ink) !important;

    box-shadow: 0 12px 28px color-mix(in srgb, var(--portal-ink) 16%, transparent) !important;
    opacity: 1 !important;

    font-family: var(--nx-font);
    direction: rtl;
    text-align: start;
}

#toastr-container.rased-notify > div.toastr:hover {
    box-shadow: 0 16px 34px color-mix(in srgb, var(--portal-ink) 22%, transparent) !important;
}

/* The tone disc. A mask rather than an <img> so one shape can be recoloured per tone. */
#toastr-container.rased-notify > div.toastr::before {
    content: "";
    flex: 0 0 auto;
    inline-size: 26px;
    block-size: 26px;
    margin-block-start: 1px;
    border-radius: 50%;
    background-color: var(--portal-muted);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 26px 26px;
    mask-size: 26px 26px;
}

#toastr-container.rased-notify > div.toastr-success {
    border-color: var(--nx-ok-line) !important;
    border-inline-start-color: var(--nx-ok) !important;
    background-color: var(--nx-ok-surface) !important;
    color: var(--portal-ink) !important;
}

#toastr-container.rased-notify > div.toastr-success::before {
    background-color: var(--nx-ok);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.3-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.3-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z'/></svg>");
}

#toastr-container.rased-notify > div.toastr-error {
    border-color: var(--nx-bad-line) !important;
    border-inline-start-color: var(--nx-bad) !important;
    background-color: var(--nx-bad-surface) !important;
    color: var(--portal-ink) !important;
}

#toastr-container.rased-notify > div.toastr-error::before {
    background-color: var(--nx-bad);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/></svg>");
}

#toastr-container.rased-notify > div.toastr-warning {
    border-color: var(--nx-warn-line) !important;
    border-inline-start-color: var(--nx-warn) !important;
    background-color: var(--nx-warn-surface) !important;
    color: var(--portal-ink) !important;
}

#toastr-container.rased-notify > div.toastr-warning::before {
    background-color: var(--nx-warn);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/></svg>");
}

#toastr-container.rased-notify > div.toastr-info {
    border-color: var(--nx-info-line) !important;
    border-inline-start-color: var(--nx-info) !important;
    background-color: var(--nx-info-surface) !important;
    color: var(--portal-ink) !important;
}

#toastr-container.rased-notify > div.toastr-info::before {
    background-color: var(--nx-info);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/></svg>");
}

#toastr-container.rased-notify .toastr-title {
    color: var(--portal-ink);
    font-size: 12.5px;
    font-weight: 800;
}

#toastr-container.rased-notify .toastr-message {
    color: var(--portal-ink);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

/* The PWA update notice's action.
   Not scoped to .rased-notify: that class is stamped by global-notifications.js, which the two
   sign-in layouts do not load, and a deployment can land while somebody is sitting on the
   sign-in page. Every colour therefore carries a literal fallback, so the control is legible
   with or without the portal tokens. */
.pwa-update-action {
    display: block;
    inline-size: 100%;
    margin-block-start: 10px;
    min-block-size: 38px;
    padding-inline: 14px;
    border: 0;
    border-radius: 9px;
    background: var(--portal-accent, #1f4b61);
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.pwa-update-action:hover:not(:disabled) { filter: brightness(1.1); }

.pwa-update-action:disabled { opacity: .6; cursor: progress; }

.pwa-update-action:focus-visible {
    outline: 2px solid var(--portal-ink, #17313d);
    outline-offset: 2px;
}

/* Inside a portal toast the same control takes the area's own accent rather than the fallback. */
#toastr-container.rased-notify .pwa-update-action {
    background: var(--portal-accent);
    color: var(--portal-paper, #fff);
}

#toastr-container.rased-notify .toastr-close-button {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    inline-size: 16px;
    block-size: 16px;
    opacity: .45;
    background-color: var(--portal-ink) !important;
    -webkit-mask-size: 10px 10px;
    mask-size: 10px 10px;
}

#toastr-container.rased-notify .toastr-close-button:hover { opacity: .9; }

#toastr-container.rased-notify .toastr-progress {
    block-size: 3px;
    background-color: currentColor;
    opacity: .28;
}

/* On a phone the toast spans the width and sits above the thumb rather than under it. */
@media (max-width: 575.98px) {
    #toastr-container.rased-notify {
        inset-inline: 12px;
        inset-block-end: 12px;
    }

    #toastr-container.rased-notify > div.toastr {
        inline-size: 100%;
        max-inline-size: none;
    }
}


/* ============================================================
   Dialogs

   SweetAlert, wearing the portal's surfaces. Call sites keep
   passing Bootstrap button classes — dozens of them across the
   application do — so both the plugin's own buttons and those
   are restyled here rather than every call site being rewritten.
   ============================================================ */

.swal2-container.rased-notify { z-index: 100010; }

.swal2-container.rased-notify .swal2-popup {
    padding: 26px 26px 20px;
    border: 1px solid var(--portal-line);
    border-radius: var(--nx-radius);
    background: var(--portal-paper);
    box-shadow: var(--nx-shadow);
    color: var(--portal-ink);
    font-family: var(--nx-font);
    direction: rtl;
    text-align: start;
}

.swal2-container.rased-notify .swal2-title {
    padding: 0;
    color: var(--portal-ink);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.9;
    text-align: center;
}

.swal2-container.rased-notify .swal2-html-container {
    margin: 12px 0 0;
    padding: 0;
    color: var(--portal-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.95;
    overflow-wrap: anywhere;

    /* The plugin caps this at 200px, which suits a sentence and not a form. The dialogs that
       collect something — a status change with a target, a recipient and a note — were scrolling
       inside a 200px window with half the screen unused beneath them. Still capped, against the
       viewport rather than a constant. */
    max-block-size: min(62vh, 480px);
}

.swal2-container.rased-notify .swal2-html-container ul {
    margin: 0;
    padding-inline-start: 18px;
    text-align: start;
}

/* ---------------------------------------------------------- icon */

.swal2-container.rased-notify .swal2-icon {
    inline-size: 62px;
    block-size: 62px;
    margin: 4px auto 6px;
    border-width: 3px;
}

.swal2-container.rased-notify .swal2-icon.swal2-success {
    border-color: var(--nx-ok-line);
    color: var(--nx-ok);
}

.swal2-container.rased-notify .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--nx-ok); }
.swal2-container.rased-notify .swal2-icon.swal2-success .swal2-success-ring { border-color: var(--nx-ok-line); }

.swal2-container.rased-notify .swal2-icon.swal2-error {
    border-color: var(--nx-bad-line);
    color: var(--nx-bad);
}

.swal2-container.rased-notify .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--nx-bad); }

.swal2-container.rased-notify .swal2-icon.swal2-warning {
    border-color: var(--nx-warn-line);
    background: var(--nx-warn-surface);
    color: var(--nx-warn);
}

.swal2-container.rased-notify .swal2-icon.swal2-info,
.swal2-container.rased-notify .swal2-icon.swal2-question {
    border-color: var(--nx-info-line);
    background: var(--nx-info-surface);
    color: var(--nx-info);
}

/* ---------------------------------------------------------- fields */

.swal2-container.rased-notify :is(.swal2-input, .swal2-textarea, .swal2-select, .form-control, .form-select) {
    inline-size: 100%;
    margin: 0;
    padding: 10px 13px;
    border: 1px solid var(--portal-line);
    border-radius: var(--nx-radius-sm);
    background: var(--portal-paper);
    box-shadow: none;
    color: var(--portal-ink);
    font-family: var(--nx-font);
    font-size: 13px;
}

.swal2-container.rased-notify :is(.swal2-input, .swal2-textarea, .form-control, .form-select):focus {
    border-color: var(--portal-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--portal-accent) 14%, transparent);
}

.swal2-container.rased-notify .swal2-validation-message {
    margin: 14px 0 0;
    padding: 10px 13px;
    border: 1px solid var(--nx-bad-line);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-bad-surface);
    color: var(--nx-bad);
    font-size: 12px;
    font-weight: 700;
}

.swal2-container.rased-notify .swal2-validation-message::before { display: none; }

/* ---------------------------------------------------------- buttons

   Two shapes of call site, one look: the plugin's own .swal2-styled
   buttons, and the Bootstrap classes passed by the many screens
   that use buttonsStyling:false. */

.swal2-container.rased-notify .swal2-actions {
    gap: 10px;
    margin: 22px 0 0;
    flex-direction: row-reverse;
}

.swal2-container.rased-notify .swal2-actions button,
.swal2-container.rased-notify .swal2-styled {
    min-inline-size: 118px;
    margin: 0;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: var(--nx-radius-sm);
    box-shadow: none;
    font-family: var(--nx-font);
    font-size: 13px;
    font-weight: 750;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.swal2-container.rased-notify .swal2-actions button:focus-visible {
    outline: 3px solid var(--portal-accent);
    outline-offset: 2px;
    box-shadow: none;
}

/* The affirmative. One accent for the whole portal, whichever palette is in play. */
.swal2-container.rased-notify :is(.swal2-confirm, .btn-primary, .btn-success) {
    background-color: var(--portal-accent) !important;
    border-color: var(--portal-accent) !important;
    color: var(--portal-on-accent) !important;
}

.swal2-container.rased-notify :is(.swal2-confirm, .btn-primary, .btn-success):hover {
    background-color: var(--portal-action-hover) !important;
    border-color: var(--portal-action-hover) !important;
}

/* Destructive, and the deny slot, which is only ever used for one. */
.swal2-container.rased-notify :is(.swal2-deny, .btn-danger) {
    background-color: var(--nx-bad) !important;
    border-color: var(--nx-bad) !important;
    color: var(--portal-on-accent) !important;
}

.swal2-container.rased-notify :is(.swal2-deny, .btn-danger):hover {
    background-color: color-mix(in srgb, var(--nx-bad) 85%, #000) !important;
    border-color: color-mix(in srgb, var(--nx-bad) 85%, #000) !important;
}

/* A dialog whose confirm is destructive says so on the button rather than in the text alone. */
.swal2-container.rased-notify.is-destructive .swal2-confirm {
    background-color: var(--nx-bad) !important;
    border-color: var(--nx-bad) !important;
}

.swal2-container.rased-notify.is-destructive .swal2-confirm:hover {
    background-color: color-mix(in srgb, var(--nx-bad) 85%, #000) !important;
    border-color: color-mix(in srgb, var(--nx-bad) 85%, #000) !important;
}

/* The way out. Quiet, and never the thing the eye lands on first. */
.swal2-container.rased-notify :is(.swal2-cancel, .btn-light, .btn-secondary, .btn-active-light-primary) {
    background-color: var(--portal-soft) !important;
    border-color: var(--portal-line) !important;
    color: var(--portal-ink) !important;
}

.swal2-container.rased-notify :is(.swal2-cancel, .btn-light, .btn-secondary, .btn-active-light-primary):hover {
    border-color: var(--portal-accent) !important;
    color: var(--portal-accent) !important;
}

.swal2-container.rased-notify .swal2-actions button :is(i, .svg-icon, .spinner-border) {
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .swal2-container.rased-notify .swal2-actions button { transition: none; }
}

/* Bootstrap's own margin utilities are passed by several call sites and fight the gap above. */
.swal2-container.rased-notify .swal2-actions :is(.ms-3, .me-3) { margin: 0 !important; }

.swal2-container.rased-notify .swal2-close {
    inline-size: 34px;
    block-size: 34px;
    color: var(--portal-muted);
    font-size: 26px;
}

.swal2-container.rased-notify .swal2-close:hover { color: var(--nx-bad); background: transparent; }

.swal2-container.rased-notify .swal2-timer-progress-bar { background: var(--portal-accent); }

.swal2-container.rased-notify.swal2-backdrop-show {
    background: color-mix(in srgb, var(--portal-ink) 45%, transparent);
}

/* On a phone the dialog uses the width it has, and its buttons stack full-width so neither is a
   small target next to the other. */
@media (max-width: 575.98px) {
    .swal2-container.rased-notify .swal2-popup {
        inline-size: calc(100vw - 28px);
        padding: 22px 18px 18px;
    }

    .swal2-container.rased-notify .swal2-actions {
        flex-direction: column-reverse;
        inline-size: 100%;
    }

    .swal2-container.rased-notify .swal2-actions button,
    .swal2-container.rased-notify .swal2-styled {
        inline-size: 100%;
        min-inline-size: 0;
    }
}

/* Document-signing confirmation (js/shared/signing-confirm.js). */
.rased-signing-confirm { text-align: start; font-size: 13px; line-height: 2; }
.rased-signing-summary { margin: 0 0 12px; padding: 10px 14px; list-style: none; border: 1px solid rgba(127, 127, 127, .25); border-radius: 10px; overflow-wrap: anywhere; }
.rased-signing-note { display: block; margin: 0; font-weight: 700; }