/* ═══════════════════════════════════════════════════════════════════════
   oms-rd-panels.css — ONE slide animation for every large side panel,
   on all three portals (admin, factory, customer). Final factory round.

   The owner: "When clicking to view a product there's no slide-out
   animation like the merchant has; it just appears. Fix this GLOBALLY so
   all big side bars animate out nicely, consistent across all platforms."

   Two kinds of panel exist, and each needs its own mechanism:

   1. Panels that are ALWAYS rendered and move between an off-screen and an
      on-screen position (.vw-shell.open, .side-panel.open, .msg-drawer,
      #fxm, #rdf-sw). They already transition both ways; this file only
      gives them the shared timing below and the reduced-motion opt-out.

   2. Panels whose OVERLAY toggles display (.modal-overlay.show, [hidden]):
      the product and customer records, the sub-group drawer, the PO quick
      views. A transition cannot run from display:none, so they get the
      rdPanelIn keyframe on open. Closing is handled by
      /js/oms-rd-panels.js, which holds the overlay on screen for the length
      of rdPanelOut (class .rd-panel-closing) and then lets it go.

   ⚠️ fill-mode is BACKWARDS, never forwards/both: a finished animation
   leaves NO transform behind. A transform on the panel would make it the
   containing block for its own position:fixed children (row menus,
   dropdowns, popovers), which is why #product-workspace / #customer-workspace
   carry transform:none in the first place.
   Linked LAST-ish on each portal; bump ?v= on every edit.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --rd-panel-dur: 240ms;
    --rd-panel-out: 200ms;
    --rd-panel-ease: cubic-bezier(.22, .61, .36, 1);
    --rd-panel-ease-out: cubic-bezier(.55, 0, .75, .2);
}

@keyframes rdPanelIn  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes rdPanelOut { from { transform: translateX(0); }    to { transform: translateX(100%); } }
/* Floating panels sit 20px in from the edge, so they travel a little further. */
@keyframes rdPanelInF  { from { transform: translateX(calc(100% + 32px)); } to { transform: translateX(0); } }
@keyframes rdPanelOutF { from { transform: translateX(0); } to { transform: translateX(calc(100% + 32px)); } }
@keyframes rdBackIn  { from { background-color: rgba(15, 23, 42, 0); } }
@keyframes rdBackOut { to   { background-color: rgba(15, 23, 42, 0); } }

/* ── 2. Display-toggled panels: slide in on open ─────────────────────── */
/* admin */
#product-modal.show > #product-workspace,
#customer-modal.show > #customer-workspace,
#sub-customer-modal.show > .cws-drawer,
/* factory */
#rdf-prod-ov.show > #rdf-prod-ws {
    animation: rdPanelIn var(--rd-panel-dur) var(--rd-panel-ease) backwards;
}
#product-modal.show, #customer-modal.show, #sub-customer-modal.show, #rdf-prod-ov.show {
    animation: rdBackIn var(--rd-panel-dur) ease backwards;
}
/* the PO quick views (admin #po-qv, factory #fpo-qv) float 20px off the edge */
#po-qv:not([hidden]),
#fpo-qv.open {
    animation: rdPanelInF var(--rd-panel-dur) var(--rd-panel-ease) backwards;
}

/* ── …and out on close (oms-rd-panels.js holds them up meanwhile) ───── */
.modal-overlay.rd-panel-closing { display: flex; pointer-events: none; }
#product-modal.rd-panel-closing, #customer-modal.rd-panel-closing,
#sub-customer-modal.rd-panel-closing, #rdf-prod-ov.rd-panel-closing {
    animation: rdBackOut var(--rd-panel-out) ease forwards;
}
#product-modal.rd-panel-closing > #product-workspace,
#customer-modal.rd-panel-closing > #customer-workspace,
#sub-customer-modal.rd-panel-closing > .cws-drawer,
#rdf-prod-ov.rd-panel-closing > #rdf-prod-ws {
    animation: rdPanelOut var(--rd-panel-out) var(--rd-panel-ease-out) forwards;
}
#fpo-qv.rd-panel-closing {
    display: flex; pointer-events: none;
    animation: rdPanelOutF var(--rd-panel-out) var(--rd-panel-ease-out) forwards;
}

/* ── 1. Always-rendered panels: the shared timing ─────────────────────── */
.vw-shell { transition-duration: var(--rd-panel-dur); transition-timing-function: var(--rd-panel-ease); }

/* ── Reduced motion: every panel simply appears ───────────────────────── */
/* !important here only: the panels' own transitions live in id-scoped rules
   across a dozen sheets (and two inline <style> blocks), and this must beat
   every one of them for a person who has asked for no motion. */
@media (prefers-reduced-motion: reduce) {
    #product-modal, #customer-modal, #sub-customer-modal, #rdf-prod-ov,
    #product-workspace, #customer-workspace, #sub-customer-modal .cws-drawer, #rdf-prod-ws,
    #po-qv, #fpo-qv {
        animation: none !important;
    }
    .vw-overlay, .vw-shell, .side-panel, .msg-drawer, .cart-drawer, #fxm, #rdf-sw-overlay, #rdf-sw,
    #panel.side-panel, #cart-drawer.cart-drawer, #overlay, #cart-overlay {
        transition: none !important;
    }
}