/* ==========================================================================
   cs-modal.css - the shared modal builder's variants
   Added 2026-10-17 (P-019 step 3, [MA3]).

   WHAT THIS STYLES
   Markup from CS_modal_block / CS_modal_ensure in core\cornerstone.utilities.js, and nothing
   else. A modal that is not built by that builder must not borrow these classes (D-080).

   .cs-modal--card    variant: 'card'. Navy blurred scrim, 16px white card, eyebrow + navy
                      title, round close, grey footer bar. Geometry taken from the New Task
                      modal (cs-tasks.js, .cs-tasks-*) so that modal can convert onto it.
                      Where cs-tasks.js uses a hex with no token, the nearest token is used:
                      see DESIGN_SYSTEM_USAGE.md section 8 D7.

   The standard modal (no variant) takes its look from cornerstone.css. This file adds one
   correction to it, the header row ([MA56], below). Geometry is px on purpose: html is
   font-size 82%, the design is 16px.
   ========================================================================== */

/* Standard variant header - title beside a fixed close [MA56]
   cornerstone.css stacks `.modal-header .btn-close { margin: -1.5rem -1.5rem -1.5rem auto }`
   and `.modal-header .close { margin-top: 1px }`, so the builder's `btn-close close` sat ~10px
   below the title and on the header's right edge (measured: header top 30, close top 56).
   Keyed on [data-cs-modal-title] as a direct child, which only the standard branch of
   CS_modal_block (JS and its PHP twin) emits: PG's own modals and the card variant (title
   inside .cs-modal-heading) are not matched. Nor is the drawer variant (data-cs-modal-variant=
   "drawer"): `.modal-sidebar button.close` fixes its close to the viewport corner, and the old
   margins are part of where it lands, so the drawers keep the header they always had. */
.modal:not([data-cs-modal-variant]) .modal-header > .modal-title[data-cs-modal-title] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.modal:not([data-cs-modal-variant]) .modal-header > .modal-title[data-cs-modal-title] + .btn-close {
    flex: 0 0 auto;
    float: none;
    margin: 0 0 0 16px;
}

/* Drawer variant title - room for the fixed close [MA94]
   `.modal-sidebar button.close` (cornerstone.css) is position:fixed at top 15px / right 55px,
   out of the header's flow, so a title long enough to wrap ran under it (measured on the admin
   change-password drawer: title right edge 1900, close 1868-1884). 40px keeps an 8px gap. The
   header's flex layout and the close's position are left as they are. */
.modal[data-cs-modal-variant="drawer"] .modal-header > .modal-title[data-cs-modal-title] {
    padding-right: 40px;
}

/* Full-screen size step - sizeClass 'modal-fullscreen' [MA75]
   cornerstone.css has BS5's `.modal-fullscreen { margin: 0 }` and then, later and at the same
   specificity, the BS3-era `.modal-dialog { margin: 30px auto }`, which wins: the dialog sat 30px
   down at full viewport height, so its bottom 30px fell off-screen and the modal's own scrollbar
   took 15px of width (measured on the template preview: dialog 0,30,1905,889 in a 1920x889
   viewport). First user: the HACCP template preview (P-019 #10). */
.modal-dialog.modal-fullscreen {
    margin: 0;
}

/* Wide size step - sizeClass 'cs-modal-wide' (860px) [MA68]
   The builder had only the 600px default and full width (`modal-lg` / `-xl` are full width
   here, [MA47]). Rob chose 860px for the HACCP hazard editor, whose six tabs do not fit 600.
   `width: auto` because the BS3-era `.modal-dialog { width: 600px }` would otherwise hold it;
   below 860px of viewport it shrinks with the dialog's own margins. Works with the card
   variant (`.cs-modal--card .modal-dialog` keeps its 52px margin). */
.modal-dialog.cs-modal-wide {
    width: auto;
    max-width: 860px;
}

/* The same step on a drawer (P-078, the PG insert/copy form modals). `.modal-sidebar` is
   position:absolute, so the `width: auto` above shrinks it to its content (471px measured);
   a drawer takes the step's width outright. */
.modal-dialog.modal-sidebar.cs-modal-wide {
    width: 860px;
    max-width: 100%;
}

/* The MRP document forms (purchase / sales order) were laid out for the old 1820px sheet and
   cramp at 860px; pgui.modal_operation_link.js swaps their drawer to this step (P-078, Rob). */
.modal-dialog.modal-sidebar.cs-modal-full {
    width: 90vw;
    max-width: 100%;
}

/* A form drawer keeps Save in view: the drawer's .modal-content is the scroller, so the form
   footer (forms/modal_form.tpl) sticks to its bottom edge. The old top sheet pinned it with
   is-fixed-bottom. Since 2026-11-03 (P-019, B-1798 [MV7-a]) every drawer built by the builder
   does the same: `.modal-content` is the scroller there too (measured), so a long drawer no
   longer pushes Save below the fold. A drawer with footer: false has nothing to pin. */
.modal-sidebar.cs-form-modal .modal-footer,
.modal[data-cs-modal-variant="drawer"] > .modal-sidebar .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--cs-white);
}

/* Scrim - the backdrop is a sibling of the modal, tagged by CS_modal_applyStacking */
.modal-backdrop.cs-modal-backdrop--card {
    background-color: color-mix(in srgb, var(--cs-navy) 50%, transparent);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.modal-backdrop.cs-modal-backdrop--card.show,
.modal-backdrop.cs-modal-backdrop--card.in {
    opacity: 1;
}

/* Dialog - centred, 52px clear top and bottom as the New Task overlay */
.cs-modal--card .modal-dialog {
    margin: 52px auto;
}
.cs-modal--card .modal-dialog-centered {
    min-height: calc(100% - 104px);
}

/* Card */
.cs-modal--card .modal-content {
    background-color: var(--surface-card);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(16, 43, 59, 0.28);
    max-height: calc(100vh - 104px);
    overflow: hidden;
}

/* Header */
.cs-modal--card .modal-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 24px 14px;
    background-color: var(--surface-card);
    border-bottom: 1px solid var(--cs-gray-100);
    border-radius: 0;
}
.cs-modal--card .cs-modal-heading {
    flex: 1;
    min-width: 0;
}
.cs-modal--card .cs-modal-eyebrow {
    font-size: var(--fs-overline);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-overline);
    text-transform: uppercase;
    color: var(--cs-blue);
    margin-bottom: 4px;
}
.cs-modal--card .cs-modal-eyebrow:empty {
    display: none;
}
.cs-modal--card .modal-title {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: 20px;
    line-height: var(--lh-snug);
    letter-spacing: -0.01em;
    color: var(--cs-navy);
    margin: 0;
}

/* Round close */
.cs-modal--card .cs-modal-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--cs-gray-100);
    color: var(--cs-navy);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.cs-modal--card .cs-modal-close:hover {
    background-color: var(--cs-gray-200);
}
.cs-modal--card .cs-modal-close:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* Body scrolls, header and footer stay put */
.cs-modal--card .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 24px;
}

/* Grey footer bar */
.cs-modal--card .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 24px;
    background-color: var(--cs-gray-50);
    border-top: 1px solid var(--cs-gray-100);
    border-radius: 0;
}
.cs-modal--card .modal-footer > * {
    margin: 0;
}

/* Phone width - 16px gutter */
@media (max-width: 575.98px) {
    .cs-modal--card .modal-dialog {
        margin: 16px;
    }
    .cs-modal--card .modal-dialog-centered {
        min-height: calc(100% - 32px);
    }
    .cs-modal--card .modal-content {
        max-height: calc(100vh - 32px);
    }
}