/* v299: shared dropdown geometry. Keep closed controls and open lists inside their
   fields; viewport placement is owned by the shared overlay in app.js. */
body.system-v286 #appShell #main .choices,
body.system-v286 #modalOverlay .modal .choices,
body.system-v286 #appShell #main .choices .choices__inner,
body.system-v286 #modalOverlay .modal .choices .choices__inner,
body.system-v286 #appShell #main .choices .choices__input--cloned,
body.system-v286 #modalOverlay .modal .choices .choices__input--cloned {
  box-sizing:border-box!important;min-width:0!important;width:100%!important;max-width:100%!important;
}
body.system-v286 #appShell #main select,
body.system-v286 #modalOverlay .modal select {min-width:0!important;max-width:100%!important;box-sizing:border-box!important;}
body.system-v286 #appShell #main .choices .choices__list--single,
body.system-v286 #modalOverlay .modal .choices .choices__list--single {min-width:0!important;max-width:100%!important;}
body.system-v286 #appShell #main .choices .choices__list--single .choices__item,
body.system-v286 #modalOverlay .modal .choices .choices__list--single .choices__item {overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
/* A persistent animation transform would make a fixed list relative to the card
   or modal instead of the viewport, and let the form scroller clip its border. */
body.system-v286 #appShell #main .page:has(.choices),
body.system-v286 #appShell #main .pos-pro-shell:has(.choices),
body.system-v286 #appShell #main .business-settings-section:has(.choices),
body.system-v286 #appShell #main .card:has(.choices),
body.system-v286 #modalOverlay .modal,
body.system-v286 #modalOverlay .modal .card:has(.choices) {transform:none!important;animation-fill-mode:backwards!important;}
/* Never switch a form/table from scrolling to overflow:visible on opening.
   Product/PO style classes and the legacy :has(.is-open) rules used to do that. */
body.system-v286 #modalOverlay .modal .modal-body,
body.system-v286 #modalOverlay .modal .modal-body:has(.choices.is-open) {overflow-y:auto!important;overflow-x:hidden!important;}
body.system-v286 #appShell #main .table-wrap:has(.choices),
body.system-v286 #modalOverlay .modal .table-wrap:has(.choices) {overflow:auto!important;max-width:100%!important;}
body.system-v286 #appShell #main .choices.is-open .choices__list--dropdown,
body.system-v286 #modalOverlay .modal .choices.is-open .choices__list--dropdown {
  position:fixed!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
  box-sizing:border-box!important;min-width:0!important;margin:0!important;
  z-index:var(--z-dropdown-in-modal,300)!important;overflow:hidden!important;
}
body.system-v286 #appShell #main .choices__list--dropdown:not(.v277-placed),
body.system-v286 #modalOverlay .modal .choices__list--dropdown:not(.v277-placed) {opacity:0!important;pointer-events:none!important;}
body.system-v286 .choices__list--dropdown > .choices__list {overscroll-behavior:contain;}

/* Labels must not set an intrinsic minimum width on automatic table columns. */
body.system-v286 #appShell #main .choices,
body.system-v286 #modalOverlay .modal .choices {contain:inline-size;}
@media(max-width:600px){
  /* Table column minima remain scrollable, but the product control itself must
     fit the visible part of the nested item card at the table's left edge. */
  body.system-v286 #modalOverlay .modal .purchase-items-wrap .choices,
  body.system-v286 #modalOverlay .modal .pb-product-cell .choices {
    max-width:min(100%,calc(100vw - 100px))!important;
  }
}

/* v301: lift the owning card only. Raising the shell/grid made POS titles
   paint over the sticky topbar and placed page controls above modal dialogs. */
body.system-v286 #appShell #main .card:has(.choices.is-open),
body.system-v286 #modalOverlay .modal .card:has(.choices.is-open) {position:relative!important;z-index:5!important;}
body.system-v286 .choices.is-focused:not(.is-open) {z-index:1!important;}