/* =====================================================================
   Shared modal look (behaviour: assets/js/modal.js).
   One backdrop for every modal: dark overlay + 6px blur, a short
   fade / scale (~150ms), no page scroll behind, clean print.
   ===================================================================== */

html:not([data-theme="dark"]) {
    --cfm-backdrop: rgba(0, 0, 0, 0.45);
    --cfm-backdrop-solid: rgba(0, 0, 0, 0.6);
    --cfm-line: var(--cfl-border-soft, #F2EBE0);
    --cfm-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] {
    --cfm-backdrop: rgba(0, 0, 0, 0.55);
    --cfm-backdrop-solid: rgba(0, 0, 0, 0.7);
    --cfm-line: var(--cf-border-soft, rgba(255, 255, 255, 0.07));
    --cfm-shadow: 0 24px 60px -14px rgba(0, 0, 0, 0.7);
}

/* ---------- sizes ----------
   .cf-modal-lg: every large modal (Profile, Notifications, Settings,
   Manage Staff, Stock History) — one size, always centred, the header
   (and tabs / filters) fixed, only the content scrolls.
   .cf-modal-sm: confirm dialogs and the receipt — small, as tall as the
   content. Content inside large modals uses --cf-modal-pad on the sides. */
:root {
    --cf-modal-pad: 24px;
}

.cf-modal-lg {
    width: 960px;
    max-width: 92vw;
    height: min(640px, 85vh);
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: var(--cfm-shadow);
}

.cf-modal-head {
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px 0 var(--cf-modal-pad);
    border-bottom: 1px solid var(--cfm-line);
}

.cf-modal-title {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--cf-font, "Plus Jakarta Sans", system-ui, sans-serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

/* (html … outranks receipt.css, which loads later in the page) */
html .cf-confirm,
html #receipt-modal .rv-box {
    width: 100%;
    max-width: 440px;
    border-radius: 18px;
    box-shadow: var(--cfm-shadow);
}

html #receipt-modal .rv-head {
    box-sizing: border-box;
    height: 60px;
    padding: 0 16px 0 var(--cf-modal-pad);
    border-bottom: 1px solid var(--cfm-line);
}

html #receipt-modal .rv-title {
    font-size: 18px;
}

/* Phones: large modals fill the screen; small ones stay small, centred. */
@media (max-width: 720px) {
    :root {
        --cf-modal-pad: 16px;
    }

    .cf-modal-lg {
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
    }

    html .cf-confirm,
    html #receipt-modal .rv-box {
        max-width: calc(100vw - 32px);
    }
}

/* html:root body … outranks the older per-theme overlay colours (cacaoflow-dark.css) */
html:root body .modal,
html:root body #receipt-modal,
html:root body .rec-modal-overlay,
html:root body .sh-overlay,
html:root body .account-modal-overlay,
html:root body .cf-confirm-backdrop {
    background: var(--cfm-backdrop) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* No blur support: a darker overlay instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html:root body .modal,
    html:root body #receipt-modal,
    html:root body .rec-modal-overlay,
    html:root body .sh-overlay,
    html:root body .account-modal-overlay,
    html:root body .cf-confirm-backdrop {
        background: var(--cfm-backdrop-solid) !important;
    }
}

/* Open: fade the backdrop, lift the box a little. */
.modal.show,
#receipt-modal.show,
.rec-modal-overlay.show,
.sh-overlay.show {
    animation: cfm-fade-in 0.15s ease both;
}

.modal.show > .modal-box,
#receipt-modal.show > .rv-box,
.rec-modal-overlay.show > .rec-modal-box,
.sh-overlay.show > .sh-box {
    animation: cfm-pop-in 0.15s ease both;
}

/* Close: stays on screen for the fade-out (modal.js adds .cf-closing). */
.modal.cf-closing,
#receipt-modal.cf-closing,
.rec-modal-overlay.cf-closing,
.sh-overlay.cf-closing {
    display: flex !important;
    pointer-events: none;
    animation: cfm-fade-out 0.15s ease both;
}

.modal.cf-closing > .modal-box,
#receipt-modal.cf-closing > .rv-box,
.rec-modal-overlay.cf-closing > .rec-modal-box,
.sh-overlay.cf-closing > .sh-box {
    animation: cfm-pop-out 0.15s ease both;
}

/* The page behind does not scroll while a modal is open. */
html.cf-modal-open,
html.cf-modal-open body,
html.cf-modal-open #page-content {
    overflow: hidden !important;
}

@keyframes cfm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cfm-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes cfm-pop-in { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes cfm-pop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(4px) scale(0.98); } }

@media (prefers-reduced-motion: reduce) {
    .modal.show, #receipt-modal.show, .rec-modal-overlay.show, .sh-overlay.show,
    .modal.show > .modal-box, #receipt-modal.show > .rv-box, .rec-modal-overlay.show > .rec-modal-box, .sh-overlay.show > .sh-box,
    .modal.cf-closing, #receipt-modal.cf-closing, .rec-modal-overlay.cf-closing, .sh-overlay.cf-closing {
        animation: none !important;
    }
}

/* Print: no blur, no overlay, nothing of the page — only the open modal
   (the receipt has its own, stricter print rules in receipt.css). */
@media print {
    html:root body .modal,
    html:root body #receipt-modal,
    html:root body .rec-modal-overlay,
    html:root body .sh-overlay,
    html:root body .account-modal-overlay,
    html:root body .cf-confirm-backdrop {
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        animation: none !important;
    }

    .modal > .modal-box,
    .rec-modal-overlay > .rec-modal-box,
    .sh-overlay > .sh-box {
        box-shadow: none !important;
        animation: none !important;
    }

    html.cf-modal-open body * {
        visibility: hidden !important;
    }

    html.cf-modal-open .cf-top,
    html.cf-modal-open .cf-top * {
        visibility: visible !important;
    }

    html.cf-modal-open .cf-top {
        position: absolute !important;
        inset: 0 auto auto 0 !important;
        width: 100% !important;
    }
}