/* Shared confirmation appearance. Behavior remains owned by each module. */
:root {
    --crm-modal-surface: radial-gradient(ellipse at 15% 0%, #ffffffb8, transparent 58%), linear-gradient(165deg, #f6fcffdc 0%, #e8f5ffc9 48%, #abd6f3d9 100%);
    --crm-modal-shadow: inset 0 2px 2px #fff, inset 1px 0 2px #ffffffb3, inset 0 -3px 8px #72b7e54d, 0 24px 64px #103b6852;
}

/* All centered dialogs share the approved surface; drawers keep their own shell. */
.order-modal > :is(.order-modal-card, .purchase-delete-modal-card, .final-status-modal-card):not(.purchase-receive-card) {
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 24px 32px 28px;
    border: 0;
    border-radius: 22px;
    background: var(--crm-modal-surface);
    backdrop-filter: blur(28px) saturate(1.15);
    box-shadow: var(--crm-modal-shadow);
    color: #173c70;
    font-family: var(--crm-font);
    font-size: var(--crm-text-size);
    font-weight: 400;
}
.order-modal :is(p, .ttn-modal-text) { font-weight: 400; line-height: 1.5; }
.order-modal :is(.purchase-delete-modal-actions, .final-status-modal-actions) > button:disabled { opacity: .4; cursor: default; }
.order-modal :is(label, .template-modal-label) { font-size: var(--crm-text-size); font-weight: 500; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal, #clientTypeModal, #ttnModal) .template-modal-label { font-weight: 500; }
.order-modal > .order-modal-card:not(.purchase-receive-card) > .order-modal-header {
    flex-shrink: 0;
    justify-content: center;
    padding-inline: 32px;
    text-align: center;
}
.order-modal > .order-modal-card:not(.purchase-receive-card) > .order-modal-header strong {
    color: #173c70;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.order-modal > .order-modal-card:not(.purchase-receive-card) > .order-modal-header > .crm-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
}
@media (max-width: 480px) {
    .order-modal > :is(.order-modal-card, .purchase-delete-modal-card, .final-status-modal-card):not(.purchase-receive-card) { padding-inline: 20px; }
}

:is(.crm-confirm-dialog,#clientDeleteModal,#orderDeleteModal,#unsavedChangesModal,#purchaseDeleteModal,#purchaseConfirmModal,#purchaseAttentionModal,#shipAssembledModal,#blockedShipModal,#finalStatusModal,#templateDeleteModal,#templateDiscardModal,#noteDiscardModal,#clientTypeModal,#clientDiscountModal) > :is(.purchase-delete-modal-card,.final-status-modal-card) { box-sizing: border-box; position: relative; width: min(420px,calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 24px 32px 28px; border: 0; border-radius: 22px; background: var(--crm-modal-surface); box-shadow: var(--crm-modal-shadow); color: #173c70; text-align: center; }
:is(.crm-confirm-dialog,#clientDeleteModal,#orderDeleteModal,#unsavedChangesModal,#purchaseDeleteModal,#purchaseConfirmModal,#purchaseAttentionModal,#shipAssembledModal,#blockedShipModal,#finalStatusModal,#templateDeleteModal,#templateDiscardModal,#noteDiscardModal,#clientTypeModal,#clientDiscountModal) :is(.purchase-delete-modal-icon,.final-status-modal-icon) { display: block; width: 120px; height: 120px; min-width: 120px; margin: 0 auto 16px; object-fit: contain; mix-blend-mode: normal; filter: none; border: 0; box-shadow: none; border-radius: 0; }
:is(.crm-confirm-dialog,#clientDeleteModal,#orderDeleteModal,#unsavedChangesModal,#purchaseDeleteModal,#purchaseConfirmModal,#purchaseAttentionModal,#shipAssembledModal,#blockedShipModal,#finalStatusModal,#templateDeleteModal,#templateDiscardModal,#noteDiscardModal,#clientTypeModal,#clientDiscountModal) .final-status-modal-icon { font-size: 0; background: url('/icons/modal-warning-style4.png') center / contain no-repeat; }
#finalStatusModal .final-status-modal-card--cancel .final-status-modal-icon { background-image: url('/icons/modal-delete-alert-style4.png'); }
:is(.crm-confirm-dialog,#clientDeleteModal,#orderDeleteModal,#unsavedChangesModal,#purchaseDeleteModal,#purchaseConfirmModal,#purchaseAttentionModal,#shipAssembledModal,#blockedShipModal,#finalStatusModal,#templateDeleteModal,#templateDiscardModal,#noteDiscardModal,#clientTypeModal,#clientDiscountModal) [hidden] { display: none !important; }
:is(.crm-confirm-dialog,#clientDeleteModal,#orderDeleteModal,#unsavedChangesModal,#purchaseDeleteModal,#purchaseConfirmModal,#purchaseAttentionModal,#shipAssembledModal,#blockedShipModal,#finalStatusModal,#templateDeleteModal,#templateDiscardModal,#noteDiscardModal,#clientTypeModal,#clientDiscountModal) h3 { font-size: 22px; font-weight: 800; color: #173c70; text-align: center; }
:is(.crm-confirm-dialog,#clientDeleteModal,#orderDeleteModal,#unsavedChangesModal,#purchaseDeleteModal,#purchaseConfirmModal,#purchaseAttentionModal,#shipAssembledModal,#blockedShipModal,#finalStatusModal,#templateDeleteModal,#templateDiscardModal,#noteDiscardModal,#clientTypeModal,#clientDiscountModal) p { font-weight: 400; max-width: none; color: #355273; font-size: var(--crm-text-size); line-height: 1.5; overflow-wrap: anywhere; }
:is(.crm-confirm-dialog,#clientDeleteModal,#orderDeleteModal,#unsavedChangesModal,#purchaseDeleteModal,#purchaseConfirmModal,#purchaseAttentionModal,#shipAssembledModal,#blockedShipModal,#finalStatusModal,#templateDeleteModal,#templateDiscardModal,#noteDiscardModal,#clientTypeModal,#clientDiscountModal) :is(.purchase-delete-modal-actions,.final-status-modal-actions) { display: flex; justify-content: center; align-items: flex-start; gap: 32px; margin-top: 24px; }
:is(.crm-confirm-dialog,#clientDeleteModal,#orderDeleteModal,#unsavedChangesModal,#purchaseDeleteModal,#purchaseConfirmModal,#purchaseAttentionModal,#shipAssembledModal,#blockedShipModal,#finalStatusModal,#templateDeleteModal,#templateDiscardModal,#noteDiscardModal,#clientTypeModal,#clientDiscountModal) :is(.purchase-delete-modal-actions,.final-status-modal-actions) > button { --confirm-art: url('/icons/modal-confirm-style4.png'); --confirm-art-size:70px 70px; --confirm-base:none; display: flex; flex-direction: column; align-items: center; flex: 0 1 130px; width: 130px; min-width: 0; max-width: 130px; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #173c70; font-size: var(--crm-text-size); font-weight: 600; line-height: 1.3; gap: 8px; }
:is(.crm-confirm-dialog,#clientDeleteModal,#orderDeleteModal,#unsavedChangesModal,#purchaseDeleteModal,#purchaseConfirmModal,#purchaseAttentionModal,#shipAssembledModal,#blockedShipModal,#finalStatusModal,#templateDeleteModal,#templateDiscardModal,#noteDiscardModal,#clientTypeModal,#clientDiscountModal) :is(.purchase-delete-modal-actions,.final-status-modal-actions) > button:first-child { --confirm-art: url('/icons/modal-cancel-style4.png'); --confirm-art-size:70px 70px; --confirm-base:none; }
:is(.crm-confirm-dialog,#clientDeleteModal,#orderDeleteModal,#unsavedChangesModal,#purchaseDeleteModal,#purchaseConfirmModal,#purchaseAttentionModal,#shipAssembledModal,#blockedShipModal,#finalStatusModal,#templateDeleteModal,#templateDiscardModal,#noteDiscardModal,#clientTypeModal,#clientDiscountModal) :is(.purchase-delete-modal-actions,.final-status-modal-actions) > button::before { content: ''; display: block; flex: 0 0 70px; width: 70px; height: 70px; background: var(--confirm-art) center top / var(--confirm-art-size, 70px 70px) no-repeat, var(--confirm-base, none) center bottom / 70px auto no-repeat; transition: transform 160ms ease,filter 160ms ease; }
:is(.crm-confirm-dialog,#clientDeleteModal,#orderDeleteModal,#unsavedChangesModal,#purchaseDeleteModal,#purchaseConfirmModal,#purchaseAttentionModal,#shipAssembledModal,#blockedShipModal,#finalStatusModal,#templateDeleteModal,#templateDiscardModal,#noteDiscardModal,#clientTypeModal,#clientDiscountModal) :is(.purchase-delete-modal-actions,.final-status-modal-actions) > button:hover { background: transparent; box-shadow: none; transform: none; }
:is(.crm-confirm-dialog,#clientDeleteModal,#orderDeleteModal,#unsavedChangesModal,#purchaseDeleteModal,#purchaseConfirmModal,#purchaseAttentionModal,#shipAssembledModal,#blockedShipModal,#finalStatusModal,#templateDeleteModal,#templateDiscardModal,#noteDiscardModal,#clientTypeModal,#clientDiscountModal) :is(.purchase-delete-modal-actions,.final-status-modal-actions) > button:not(:disabled):hover::before { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 3px 3px #1e40af26); }
:is(.crm-confirm-dialog,#clientDeleteModal,#orderDeleteModal,#unsavedChangesModal,#purchaseDeleteModal,#purchaseConfirmModal,#purchaseAttentionModal,#shipAssembledModal,#blockedShipModal,#finalStatusModal,#templateDeleteModal,#templateDiscardModal,#noteDiscardModal,#clientTypeModal,#clientDiscountModal) :is(.purchase-delete-modal-actions,.final-status-modal-actions) > button:not(:disabled):active::before { transform: translateY(1px) scale(.96); filter: none; }
:is(.crm-confirm-dialog,#clientDeleteModal,#orderDeleteModal,#unsavedChangesModal,#purchaseDeleteModal,#purchaseConfirmModal,#purchaseAttentionModal,#shipAssembledModal,#blockedShipModal,#finalStatusModal,#templateDeleteModal,#templateDiscardModal,#noteDiscardModal,#clientTypeModal,#clientDiscountModal) .template-button-art { display: none !important; }
#finalStatusModal .final-status-modal-card:not(.final-status-modal-card--cancel) #confirmFinalStatus { --confirm-art: url('/icons/modal-confirm-style4.png'); --confirm-art-size:70px 70px; --confirm-base:none; }
:is(.crm-confirm-dialog,#clientDeleteModal,#orderDeleteModal,#unsavedChangesModal,#purchaseDeleteModal,#purchaseConfirmModal,#purchaseAttentionModal,#shipAssembledModal,#blockedShipModal,#finalStatusModal,#templateDeleteModal,#templateDiscardModal,#noteDiscardModal,#clientTypeModal,#clientDiscountModal) > :is(.purchase-delete-modal-card,.final-status-modal-card) > button[aria-label="Закрити"] { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: #174672; font-size: 28px; box-shadow: none; }
:is(#templateModal,#clientNoteModal) .template-editor-symbol { width: 120px; height: 120px; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { :is(.crm-confirm-dialog,#clientDeleteModal,#orderDeleteModal,#unsavedChangesModal,#purchaseDeleteModal,#purchaseConfirmModal,#purchaseAttentionModal,#shipAssembledModal,#blockedShipModal,#finalStatusModal,#templateDeleteModal,#templateDiscardModal,#noteDiscardModal,#clientTypeModal,#clientDiscountModal) button::before { transition: none !important; } }

/* Navigation from an attention dialog to its saved card. */
:is(#attentionModal,#purchaseAttentionModal) :is(#openAttentionOrder,#openPurchaseFromAttention)::before { content:none; }
.crm-confirm-dialog .crm-dialog-open-art { position:relative; display:block; flex:0 0 70px; width:70px; height:70px; transition:transform 160ms ease,filter 160ms ease; }
.crm-confirm-dialog .crm-dialog-open-art img:first-child { position:absolute; top:0; left:0; width:62px; height:62px; object-fit:contain; }
.crm-confirm-dialog .crm-dialog-open-art img:last-child { position:absolute; right:0; bottom:0; width:36px; height:36px; object-fit:contain; transform:scaleX(-1); }
.crm-confirm-dialog button:not(:disabled):hover .crm-dialog-open-art { transform:translateY(-2px) scale(1.06); filter:drop-shadow(0 3px 3px #1e40af26); }
.crm-confirm-dialog button:not(:disabled):active .crm-dialog-open-art { transform:translateY(1px) scale(.96); filter:none; }
@media(prefers-reduced-motion:reduce) { .crm-confirm-dialog .crm-dialog-open-art { transition:none; } }

/* Shared sapphire close icon; modal layouts retain their own button positioning. */
/* Cancel artwork is a standalone side-view icon. */
.order-modal .template-button-art:has(> img[src="/icons/modal-cancel-style4.png"])::before { content:none; }
:is(#templateModal,#clientNoteModal,#purchaseCommentModal,#commentModal) .template-button-art > img[src="/icons/modal-cancel-style4.png"] { position:absolute; left:0; bottom:0; width:100%; height:100%; object-fit:contain; object-position:center; }

:where(button.crm-modal-close) { position: relative; }
button.crm-modal-close {
    width: 36px !important; min-width: 36px !important; height: 36px !important;
    flex: 0 0 36px; padding: 0 !important; border: 0 !important;
    font-size: 0 !important; background: transparent !important; box-shadow: none !important;
    cursor: pointer; transition: transform 160ms ease, filter 160ms ease;
}
button.crm-modal-close::before, button.crm-modal-close::after {
    content: ''; position: absolute; top: 8px; left: 15px; width: 6px; height: 21px;
    border-radius: 3px;
    background: linear-gradient(90deg, #123c79, #4faaff 40%, #1464bf 65%, #082e68);
    box-shadow: 0 1px 1px #fff, 0 2px 3px #12356855;
    transform: rotate(45deg);
}
button.crm-modal-close::after { transform: rotate(-45deg); }
button.crm-modal-close:hover { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 3px 3px #1e40af26); }
button.crm-modal-close:active { transform: translateY(1px) scale(.96); filter: none; }
@media (prefers-reduced-motion: reduce) { button.crm-modal-close { transition: none; } }

#finalStatusModal .final-status-modal-card:not(.final-status-modal-card--cancel) .final-status-modal-icon { background-image: url('/icons/notification-success-round.webp'); }
#finalStatusModal:is([data-action="Комплектується"], [data-action="Повернути у Відправлено"]) .final-status-modal-card:not(.final-status-modal-card--cancel) .final-status-modal-icon { background-image: url('/icons/modal-warning-style4.png'); }
#purchaseAttentionModal.has-urgent .purchase-delete-modal-icon { filter: none; }
#purchaseConfirmModal.purchase-receive-discard .purchase-delete-modal-actions { display: flex; gap: 32px; }
#purchaseConfirmModal.purchase-receive-discard :is(#purchaseConfirmCancel,#purchaseConfirmOk) { flex: 0 1 130px; width: 130px; min-height: 0; padding: 0; font-size: var(--crm-text-size); }

#purchaseConfirmModal { z-index: calc(var(--crm-z-modal) + 3); }

/* These actions save editable fields rather than confirm an operation. */
:is(#clientDiscountModal, #orderDiscountModal) .purchase-delete-modal-actions > :is(#saveClientDiscount, #saveOrderDiscount) {
    --confirm-art: url('/icons/template-save-style4.png');
    --confirm-art-size: 70px 70px;
    --confirm-base: none;
}
/* Keep narrow confirmations readable without shrinking text or artwork. */
@media (max-width: 480px) {
    :is(.crm-confirm-dialog, #clientDeleteModal, #orderDeleteModal, #unsavedChangesModal, #purchaseDeleteModal, #purchaseConfirmModal, #purchaseAttentionModal, #shipAssembledModal, #blockedShipModal, #finalStatusModal, #templateDeleteModal, #templateDiscardModal, #noteDiscardModal, #clientTypeModal, #clientDiscountModal) > :is(.purchase-delete-modal-card, .final-status-modal-card) { padding-inline: 20px; }
}

crm-confirm-dialog:not(:defined), crm-confirm-dialog[hidden] { display: none !important; }
crm-confirm-dialog.order-modal .purchase-delete-modal-actions > button { --confirm-art-size: 70px 70px !important; --confirm-base: none !important; }