/* ============================================================================
   RIGHT-SIDE DRAWERS

   Every popup in the application opens as a panel that slides in from the
   right edge, the way the Packing Queue on the order screen always has
   (Components/Order/Pages/Order/PackingQueue.razor). They used to be boxes
   dropped into the middle of the screen, each family with its own size, its
   own "pop" animation and its own idea of a corner radius.

   Why one stylesheet rather than editing each dialog
   --------------------------------------------------
   There are about a dozen families of dialog markup (stock-modal, the
   order-screen overlays, Bootstrap .modal, host-admin, dashboard drill-down,
   help, shortcuts...) across some thirty-five components. Their markup and
   behaviour are unchanged: each one still has a full-screen SCRIM element
   with a PANEL inside it (or, for two families, a panel and a scrim that are
   siblings). This file only re-docks those two elements:

     - the scrim becomes a right-aligned flex container with no padding;
     - the panel becomes a full-height column on the right edge, with the
       Packing Queue's border, side shadow and slide curve.

   Geometry is asserted with !important because the rules it replaces live in
   component <style> blocks and in stock.css / host-admin.css, all of which
   load after this file. Colours, typography and everything inside the panels
   are left to the existing rules.

   Closing: most dialogs are removed from the DOM the moment they close (an
   @if in Razor), which no CSS can animate. wwwroot/js/drawer.js plays the
   slide-out on an inert copy of the panel as the real one is removed - see
   .drawer-leaving below.

   Widths: three sizes, chosen by what the panel holds, and every one of them
   narrower than the centred dialog it replaces.
     sm  - a question and two buttons (confirmations, merge/change table)
     md  - an ordinary form, help and shortcut lists
     lg  - content that is genuinely wide: the item menu with its cart,
           checkout, split bill, order details, reports, drill-downs
   stock-modal boxes keep the width each page already gives them inline
   (440-640px; the recipe editor's ingredient table, 880px).
   ========================================================================== */

:root {
    --drawer-sm: 440px;
    --drawer-md: 560px;
    --drawer-lg: 880px;

    /* Same scrim and curve as the Packing Queue. */
    --drawer-scrim: rgba(17, 24, 39, 0.35);
    --drawer-ease: cubic-bezier(0.2, 0, 0.2, 1);
    --drawer-in: 0.24s;
    --drawer-out: 0.18s;
    --drawer-shadow: -14px 0 38px -18px rgba(17, 24, 39, 0.4);
}

/* ---- Scrims ------------------------------------------------------------- */

.modal-overlay,
.rpt-overlay,
.tbl-act-overlay,
.app-overlay,
.stock-modal,
.host-modal-backdrop,
.sc-overlay,
.oh-overlay,
.poup-overlay,
.od-overlay,
.split-overlay,
.co-overlay,
.modal.show.d-block {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--drawer-scrim) !important;
    backdrop-filter: none !important;
    animation: drawer-scrim-in var(--drawer-in) ease both !important;
}

/* The two families whose scrim is a sibling of the panel, not its parent. */
.odb-modal-backdrop,
.hh-modal-backdrop {
    background: var(--drawer-scrim) !important;
    animation: drawer-scrim-in var(--drawer-in) ease both !important;
}

/* ---- Panels ------------------------------------------------------------- */

.modal-container,
.rpt-dialog,
.tbl-act-dialog,
.stock-modal__box,
.host-modal,
.sc-dialog,
.oh-dialog,
.poup-dialog,
.od-dialog,
.split-dialog,
.co-dialog,
.modal.show.d-block > .modal-dialog,
.odb-modal,
.hh-modal {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    max-width: 100vw !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    background: var(--c-surface, #fff);
    border: 0 !important;
    border-left: 1px solid var(--c-line, #eae4dd) !important;
    border-radius: 0 !important;
    box-shadow: var(--drawer-shadow) !important;
    animation: drawer-in var(--drawer-in) var(--drawer-ease) both !important;
}

/* Panels that position themselves rather than sitting in a scrim. */
.odb-modal,
.hh-modal {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    transform: none;
}

/* ---- Widths ------------------------------------------------------------- */

.tbl-act-dialog,
.modal#ConfirmationPopUp > .modal-dialog {
    width: min(var(--drawer-sm), 100vw) !important;
}

.host-modal,
.sc-dialog,
.oh-dialog,
.modal.show.d-block > .modal-dialog {
    width: min(var(--drawer-md), 100vw) !important;
}

.modal-container,
.rpt-dialog,
.poup-dialog,
.od-dialog,
.split-dialog,
.co-dialog,
.odb-modal,
.hh-modal,
.modal.show.d-block > .modal-dialog.modal-lg,
.modal.show.d-block > .modal-dialog.modal-xl {
    width: min(var(--drawer-lg), 100vw) !important;
}

/* stock-modal boxes bring their own width inline; only cap it. */
.stock-modal__box { max-width: 100vw !important; }

/* The one exception to "narrower than the dialog it replaces": the item picker
   in Packing mode is a work surface, not a side question. Staff use it to put
   a whole takeaway order together, and at 880px it showed four menu items a
   row beside a cramped cart. It takes the whole screen instead
   (PoupSearchItem.razor, .poup-dialog--full). Two classes beat the one above,
   so this wins without reordering anything. */
.poup-dialog.poup-dialog--full {
    width: 100vw !important;
    border-left: 0 !important;
}

/* ---- What is inside a panel --------------------------------------------- */

/* Wrappers that used to carry the dialog's own height cap, border and
   rounding now just fill the panel, so the body inside them is what scrolls -
   exactly as before, only taller. */
.modal-container > .modal-content-custom,
.poup-dialog > .poup-content,
.modal.show.d-block > .modal-dialog > .modal-content,
.modal.show.d-block > .modal-dialog > .mform-head {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: none !important;
}

/* Any panel whose content sits in a single wrapper (Split Bill's
   .split-panel, for one) lets that wrapper take the full height, so its
   footer lands at the bottom of the drawer rather than half way down. */
:is(.modal-container, .rpt-dialog, .tbl-act-dialog, .stock-modal__box, .host-modal,
    .sc-dialog, .oh-dialog, .poup-dialog, .od-dialog, .split-dialog, .co-dialog,
    .modal.show.d-block > .modal-dialog, .odb-modal, .hh-modal) > :only-child {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
}

/* A Bootstrap modal's body takes the slack and scrolls. */
.modal.show.d-block > .modal-dialog > .modal-content > .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: none !important;
}

/* Header and footer bands rounded their own corners to match a rounded
   dialog. A drawer is square. */
.modal-header-compact,
.modal-footer-compact,
.rpt-header,
.rpt-footer,
.tbl-act-header,
.tbl-act-footer,
.od-header,
.poup-header,
.split-header,
.co-header,
.stock-modal__head,
.stock-modal__foot,
.odb-modal__head,
.odb-modal__foot,
.modal.show.d-block .modal-header,
.modal.show.d-block .modal-footer {
    border-radius: 0 !important;
}

/* Order Details has eleven columns. At 12px a side they came to ~900px,
   just over the large drawer, which pushed the delete button off the edge;
   9px fits them with room to spare. */
.od-dialog .od-table th,
.od-dialog .od-table td {
    padding-left: 9px !important;
    padding-right: 9px !important;
}

/* A drawer's header stays put while its body scrolls. */
.stock-modal__head,
.stock-modal__foot { flex: 0 0 auto; }

.stock-modal__body { flex: 1 1 auto; min-height: 0; }

/* ---- Closing ------------------------------------------------------------ */

/* The inert copy drawer.js leaves behind while the real panel is removed. */
.drawer-ghost,
.drawer-ghost * { pointer-events: none !important; }

.drawer-leaving {
    animation: drawer-scrim-out var(--drawer-out) ease forwards !important;
}

.drawer-leaving :is(.modal-container, .rpt-dialog, .tbl-act-dialog, .stock-modal__box,
                    .host-modal, .sc-dialog, .oh-dialog, .poup-dialog, .od-dialog,
                    .split-dialog, .co-dialog, .modal-dialog),
.drawer-leaving:is(.odb-modal, .hh-modal) {
    animation: drawer-out var(--drawer-out) var(--drawer-ease) forwards !important;
}

/* ---- Motion ------------------------------------------------------------- */

@keyframes drawer-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes drawer-out {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}

@keyframes drawer-scrim-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawer-scrim-out { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .modal-overlay, .rpt-overlay, .tbl-act-overlay, .app-overlay, .stock-modal,
    .host-modal-backdrop, .sc-overlay, .oh-overlay, .poup-overlay, .od-overlay,
    .split-overlay, .co-overlay, .modal.show.d-block, .odb-modal-backdrop,
    .hh-modal-backdrop, .modal-container, .rpt-dialog, .tbl-act-dialog,
    .stock-modal__box, .host-modal, .sc-dialog, .oh-dialog, .poup-dialog,
    .od-dialog, .split-dialog, .co-dialog, .modal.show.d-block > .modal-dialog,
    .odb-modal, .hh-modal {
        animation: none !important;
    }
}

/* ---- Small screens ------------------------------------------------------ */

/* On a phone every drawer is the full width: a 440px panel on a 375px
   screen would otherwise leave a sliver of scrim nobody can tap. */
@media (max-width: 575.98px) {
    .modal-container, .rpt-dialog, .tbl-act-dialog, .stock-modal__box,
    .host-modal, .sc-dialog, .oh-dialog, .poup-dialog, .od-dialog,
    .split-dialog, .co-dialog, .modal.show.d-block > .modal-dialog,
    .odb-modal, .hh-modal {
        width: 100vw !important;
        border-left: 0 !important;
    }
}