/*
 * Shared presentation for multi-step create/edit forms.
 * The application remains visible as context, while the active form owns the
 * viewport and scrolls internally. This keeps headers and action footers in a
 * predictable place across every wizard.
 */

:root{
  --form-modal-width:895px;
  --form-modal-gap:24px;
  --form-modal-radius:26px;
  --form-modal-overlay:rgba(13,32,68,.68);
  --form-modal-shadow:0 26px 80px rgba(8,27,61,.35);
}

/* Every modal form exposes the same real SVG close action. */
.page-heading,
.broker-edit-page > header,
.supplier-edit-page > header,
.product-edit-page > header,
.client-edit-shell > header,
.user-edit-modal > header,
.container-wizard-head,
.deposit-wizard-header,
.ibc-dialog-header,
.ops-pagebar{position:relative!important}
.form-modal-close{
  position:absolute;
  top:18px;
  right:20px;
  z-index:12;
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  padding:0!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.06)!important;
  color:#fff!important;
  text-decoration:none!important;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.form-modal-close:hover,.form-modal-close:focus-visible{
  border-color:rgba(255,255,255,.5)!important;
  background:rgba(255,255,255,.15)!important;
  transform:translateY(-1px);
}
.form-modal-close svg{width:20px;height:20px;stroke:currentColor;pointer-events:none}
.ops-pagebar > .form-modal-close{
  display:grid!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  line-height:0!important;
}
.ops-pagebar > .form-modal-close svg{
  display:block!important;
  width:20px!important;
  height:20px!important;
  margin:0!important;
}
.ibc-dialog-header .ibc-dialog-close{
  position:static!important;
  flex:0 0 auto;
  margin-left:auto!important;
  border-color:#c9d6e8!important;
  background:#f4f7fc!important;
  color:#173b7d!important;
}
.ibc-dialog-header .ibc-dialog-close:hover,
.ibc-dialog-header .ibc-dialog-close:focus-visible{
  border-color:#8eabd2!important;
  background:#e8eff9!important;
  color:#0f2f69!important;
}
.client-invite-wizard{position:relative}
.client-invite-close{top:18px;right:18px}
.product-edit-close,.ops-form-close{position:fixed!important;z-index:1115!important}
.product-edit-close{top:42px;right:max(42px,calc((100vw - 895px)/2 + 18px))}
.ops-form-close{top:max(42px,calc(50vh - 300px + 18px));right:max(42px,calc((100vw - 760px)/2 + 18px))}

/* Every modal form exposes both exits: Close in the header and Cancel in its action bar. */
[data-form-modal-cancel]{order:-20;margin-right:auto!important;text-decoration:none!important;white-space:nowrap}
.wizard-actions [data-prev],
.client-step-footer [data-client-back],
.container-wizard-foot .container-back{order:-10;margin-right:auto}
.wizard-actions:has([data-prev]) [data-form-modal-cancel],
.client-step-footer:has([data-client-back]) [data-form-modal-cancel],
.container-wizard-foot:has(.container-back) [data-form-modal-cancel]{margin-right:0!important}
.wizard-actions,.client-step-footer,.container-wizard-foot,.deposit-wizard-footer,.form-actions,form>footer{column-gap:12px}

/* Container create/edit wizard: use the same viewport treatment as deposits. */
.container-wizard-page{
  position:fixed!important;
  inset:0!important;
  z-index:1100!important;
  min-height:0!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  padding:var(--form-modal-gap)!important;
}
.container-wizard-backdrop{
  position:absolute!important;
  inset:0!important;
  background:var(--form-modal-overlay)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}
.container-wizard{
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  width:min(var(--form-modal-width),100%)!important;
  max-height:calc(100vh - (var(--form-modal-gap) * 2))!important;
  overflow:hidden!important;
  border:1px solid #dce5f1!important;
  border-radius:var(--form-modal-radius)!important;
  box-shadow:var(--form-modal-shadow)!important;
}
.container-wizard-panels{
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
}
.container-wizard-head,.container-wizard-foot{flex:0 0 auto}

/* Generic Yii wizards: heading and form become one centered modal surface. */
body:has(.content > .page-heading + form.wizard) .content{
  position:fixed!important;
  inset:0!important;
  z-index:1100!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  width:100vw!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  padding:var(--form-modal-gap)!important;
  overflow:hidden!important;
  background:var(--form-modal-overlay)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}
body:has(.content > .page-heading + form.wizard) .content > .page-heading{
  flex:0 0 auto;
  width:min(var(--form-modal-width),100%);
  margin:0!important;
  padding:25px 32px 20px!important;
  border:1px solid #dce5f1;
  border-bottom:0;
  border-radius:var(--form-modal-radius) var(--form-modal-radius) 0 0;
  background:#142f67;
  color:#fff;
}
body:has(.content > .page-heading + form.wizard) .content > .page-heading .eyebrow,
body:has(.content > .page-heading + form.wizard) .content > .page-heading p{color:#ccd8ec!important}
body:has(.content > .page-heading + form.wizard) .content > form.wizard{
  display:flex;
  flex:0 1 auto;
  width:min(var(--form-modal-width),100%);
  max-height:calc(100vh - 166px);
  min-height:0;
  margin:0!important;
  padding:22px 32px 0;
  flex-direction:column;
  overflow-x:hidden;
  overflow-y:scroll;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:auto;
  scrollbar-color:#173b7d #dbe4ef;
  border:1px solid #dce5f1;
  border-top:0;
  border-radius:0 0 var(--form-modal-radius) var(--form-modal-radius);
  background:#fff;
  box-shadow:var(--form-modal-shadow);
}
body:has(.content > .page-heading + form.wizard) form.wizard > .wizard-progress{flex:0 0 auto}
body:has(.content > .page-heading + form.wizard) form.wizard > .wizard-step.active{
  flex:0 0 auto;
  width:100%;
  max-width:none;
  margin:0;
  overflow:visible!important;
  border:0;
  border-radius:0;
  box-shadow:none;
}
body:has(.content > .page-heading + form.wizard) form.wizard::-webkit-scrollbar{width:14px}
body:has(.content > .page-heading + form.wizard) form.wizard::-webkit-scrollbar-track{border-left:1px solid #c6d2e1;background:#dbe4ef}
body:has(.content > .page-heading + form.wizard) form.wizard::-webkit-scrollbar-thumb{border:3px solid #dbe4ef;border-radius:999px;background:#173b7d}
body:has(.content > .page-heading + form.wizard) form.wizard::-webkit-scrollbar-thumb:hover{background:#0d285b}
body:has(.content > .page-heading + form.wizard) form.wizard.form-modal-custom-scroll{scrollbar-width:none}
body:has(.content > .page-heading + form.wizard) form.wizard.form-modal-custom-scroll::-webkit-scrollbar{width:0;height:0}
.form-modal-scrollbar{
  position:fixed;
  z-index:1112;
  width:13px;
  padding:2px;
  border:1px solid #aab9cd;
  border-radius:999px;
  background:#d5dfeb;
  box-shadow:0 1px 4px rgba(16,37,81,.22),inset 0 0 0 1px rgba(255,255,255,.55);
  cursor:pointer;
  touch-action:none;
}
.form-modal-scrollbar[hidden]{display:none}
.form-modal-scrollbar-thumb{
  width:100%;
  min-height:48px;
  border-radius:999px;
  background:#173b7d;
  box-shadow:0 1px 3px rgba(8,25,57,.35);
}
.form-modal-scrollbar:hover .form-modal-scrollbar-thumb,
.form-modal-scrollbar:focus-visible .form-modal-scrollbar-thumb{background:#0b2455}
.form-modal-scrollbar:focus-visible{outline:3px solid rgba(49,92,168,.3);outline-offset:2px}

/* Product wizard has its own outer element, but follows the same contract. */
.product-create-page{
  position:fixed!important;
  inset:0!important;
  z-index:1100!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:0!important;
  margin:0!important;
  padding:var(--form-modal-gap)!important;
  overflow:hidden!important;
  background:var(--form-modal-overlay)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}
.product-create-page > .page-heading{
  flex:0 0 auto;
  width:min(var(--form-modal-width),100%);
  margin:0!important;
  padding:25px 32px 20px!important;
  border:1px solid #dce5f1;
  border-bottom:0;
  border-radius:var(--form-modal-radius) var(--form-modal-radius) 0 0;
  background:#142f67;
  color:#fff;
}
.product-create-page > .page-heading .eyebrow,.product-create-page > .page-heading p{color:#ccd8ec!important}
.product-create-page > form.wizard{
  display:flex;
  width:min(var(--form-modal-width),100%);
  max-height:calc(100vh - 166px);
  min-height:0;
  margin:0!important;
  padding:22px 32px 0;
  flex-direction:column;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  border:1px solid #dce5f1;
  border-top:0;
  border-radius:0 0 var(--form-modal-radius) var(--form-modal-radius);
  background:#fff;
  box-shadow:var(--form-modal-shadow);
}
.product-create-page form.wizard > .wizard-step.active{width:100%;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none}

/* The invitation flow already has the right card; only normalize the overlay. */
body:has(.content > form.client-invite-wizard) .content{
  position:fixed!important;
  inset:0!important;
  z-index:1100!important;
  display:grid!important;
  place-items:center!important;
  width:100vw!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  padding:var(--form-modal-gap)!important;
  overflow:auto!important;
  background:var(--form-modal-overlay)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}
body:has(.content > form.client-invite-wizard) form.client-invite-wizard{
  width:min(650px,100%);
  max-height:calc(100vh - (var(--form-modal-gap) * 2));
  margin:0!important;
  overflow:auto;
  border-radius:22px;
  box-shadow:var(--form-modal-shadow);
}

/*
 * Dedicated edit screens.  These views were built at different moments and
 * use different class names, but they all follow the same modal contract:
 * backdrop -> fixed header -> internally scrolling form -> fixed actions.
 */
body:has(.content > .user-edit-nav + .broker-edit-page) .content,
body:has(.content > .supplier-edit-page) .content,
body:has(.content > .product-edit-page) .content,
body:has(.content > .client-edit-page) .content,
body:has(.content > .user-edit-nav + .user-edit-backdrop) .content,
body:has(.content > .edit-navbar + .page-heading + form.entity-form) .content,
body:has(.content > .edit-navbar + .page-heading + form.price-list-editor) .content{
  position:fixed!important;
  inset:0!important;
  z-index:1100!important;
  display:grid!important;
  place-items:center!important;
  min-width:0!important;
  width:100vw!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  padding:var(--form-modal-gap)!important;
  overflow:hidden!important;
  background:var(--form-modal-overlay)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}

/* Breadcrumbs remain available through the close/cancel controls in-dialog. */
body:has(.content > .user-edit-nav + .broker-edit-page) .content > .user-edit-nav,
body:has(.content > .user-edit-nav + .user-edit-backdrop) .content > .user-edit-nav,
body:has(.content > .edit-navbar + .page-heading + form.entity-form) .content > .edit-navbar,
body:has(.content > .edit-navbar + .page-heading + form.price-list-editor) .content > .edit-navbar{
  display:none!important;
}

.broker-edit-page,
.supplier-edit-page,
.product-edit-page,
.client-edit-page,
.user-edit-backdrop{
  width:min(var(--form-modal-width),100%)!important;
  max-height:calc(100vh - (var(--form-modal-gap) * 2))!important;
  min-height:0!important;
  margin:0!important;
  border:1px solid #dce5f1!important;
  border-radius:var(--form-modal-radius)!important;
  box-shadow:var(--form-modal-shadow)!important;
}

.broker-edit-page,
.supplier-edit-page,
.product-edit-page,
.client-edit-page{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  background:#fff!important;
}

.broker-edit-page > header,
.supplier-edit-page > header,
.product-edit-page > header,
.client-edit-shell > header,
.user-edit-modal > header{
  flex:0 0 auto!important;
  margin:0!important;
  padding:24px 30px 20px!important;
  border:0!important;
  border-radius:0!important;
  background:#142f67!important;
  color:#fff!important;
}
.broker-edit-page > header p,
.supplier-edit-page > header p,
.product-edit-page > header p,
.client-edit-shell > header p,
.user-edit-modal > header p,
.user-edit-modal > header span{color:#ccd8ec!important}

.broker-edit-form,
.supplier-edit-form,
.product-edit-form,
.client-edit-form,
.user-edit-form{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow:hidden!important;
}
.broker-edit-scroll,
.supplier-edit-content,
.product-edit-form > main,
.client-edit-form > main,
.user-edit-scroll{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
}
.broker-edit-form > footer,
.supplier-edit-form > footer,
.product-edit-form > footer,
.client-edit-form > footer,
.user-edit-form > footer{
  position:static!important;
  flex:0 0 auto!important;
  margin:0!important;
  background:#f8fafc!important;
  border-top:1px solid #dce5f1!important;
}

/* Supplier's back link lives inside the card, so hide only that duplicate. */
.supplier-edit-page > .supplier-edit-nav,
.product-edit-page > nav,
.client-edit-page > .client-edit-back{display:none!important}

/* Client and user screens have an additional historical wrapper. */
.client-edit-shell,
.user-edit-modal{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:inherit!important;
  box-shadow:none!important;
  background:#fff!important;
}
.user-edit-backdrop{
  display:flex!important;
  padding:0!important;
  overflow:hidden!important;
  background:#fff!important;
}

/* Generic entity and price-list editors: visually join heading and form. */
body:has(.content > .edit-navbar + .page-heading + form.entity-form) .content > .page-heading,
body:has(.content > .edit-navbar + .page-heading + form.price-list-editor) .content > .page-heading{
  width:min(var(--form-modal-width),100%)!important;
  margin:0!important;
  padding:24px 30px 20px!important;
  border:1px solid #dce5f1!important;
  border-bottom:0!important;
  border-radius:var(--form-modal-radius) var(--form-modal-radius) 0 0!important;
  background:#142f67!important;
  color:#fff!important;
}
body:has(.content > .edit-navbar + .page-heading + form.entity-form) .page-heading p,
body:has(.content > .edit-navbar + .page-heading + form.entity-form) .page-heading .eyebrow,
body:has(.content > .edit-navbar + .page-heading + form.price-list-editor) .page-heading p,
body:has(.content > .edit-navbar + .page-heading + form.price-list-editor) .page-heading .eyebrow{color:#ccd8ec!important}
body:has(.content > .edit-navbar + .page-heading + form.entity-form) form.entity-form,
body:has(.content > .edit-navbar + .page-heading + form.price-list-editor) form.price-list-editor{
  width:min(var(--form-modal-width),100%)!important;
  max-height:calc(100vh - 166px)!important;
  min-height:0!important;
  margin:0!important;
  padding:26px 30px 0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  border:1px solid #dce5f1!important;
  border-top:0!important;
  border-radius:0 0 var(--form-modal-radius) var(--form-modal-radius)!important;
  box-shadow:var(--form-modal-shadow)!important;
  background:#fff!important;
}
body:has(.content > .edit-navbar + .page-heading + form.entity-form) form.entity-form > .form-actions,
body:has(.content > .edit-navbar + .page-heading + form.price-list-editor) form.price-list-editor > .form-actions{
  position:sticky!important;
  bottom:0!important;
  z-index:3;
  margin:24px -30px 0!important;
  padding:16px 30px!important;
  background:#f8fafc!important;
  border-top:1px solid #dce5f1!important;
}

/* Operational create/edit forms (ports and dispatch templates). */
.ops-page.narrow:has(> .ops-pagebar + .ops-card form),
.ops-page.narrow:has(> form.ops-card){
  position:fixed!important;
  inset:0!important;
  z-index:1100!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  margin:0!important;
  padding:var(--form-modal-gap)!important;
  overflow:hidden!important;
  background:var(--form-modal-overlay)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}
.ops-page.narrow:has(> .ops-pagebar + .ops-card form) > .ops-pagebar,
.ops-page.narrow:has(> form.ops-card) > .ops-pagebar{
  width:min(760px,100%)!important;
  margin:0!important;
  padding:22px 28px!important;
  border:1px solid #dce5f1!important;
  border-bottom:0!important;
  border-radius:var(--form-modal-radius) var(--form-modal-radius) 0 0!important;
  background:#142f67!important;
  color:#fff!important;
}
.ops-page.narrow:has(> .ops-pagebar + .ops-card form) > .ops-pagebar > a:first-child,
.ops-page.narrow:has(> form.ops-card) > .ops-pagebar > a:first-child{
  display:none!important;
}
.ops-page.narrow:has(> .ops-pagebar + .ops-card form) > .ops-card,
.ops-page.narrow:has(> form.ops-card) > form.ops-card{
  width:min(760px,100%)!important;
  max-height:calc(100vh - 130px)!important;
  min-height:0!important;
  margin:0!important;
  padding:26px 28px!important;
  overflow:auto!important;
  border:1px solid #dce5f1!important;
  border-top:0!important;
  border-radius:0 0 var(--form-modal-radius) var(--form-modal-radius)!important;
  box-shadow:var(--form-modal-shadow)!important;
  background:#fff!important;
}

/* IBC already was a dialog; align its dimensions and backdrop. */
.ibc-create-page{padding:var(--form-modal-gap)!important}
.ibc-create-backdrop{background:var(--form-modal-overlay)!important;backdrop-filter:blur(7px)!important;-webkit-backdrop-filter:blur(7px)!important}
.ibc-create-dialog{
  width:min(512px,100%)!important;
  max-height:calc(100vh - (var(--form-modal-gap) * 2))!important;
  border-radius:var(--form-modal-radius)!important;
  box-shadow:var(--form-modal-shadow)!important;
}

@media(max-width:700px){
  :root{--form-modal-gap:10px;--form-modal-radius:20px}
  .container-wizard{height:calc(100vh - 20px)!important;max-height:none!important}
  body:has(.content > .page-heading + form.wizard) .content,
  .product-create-page{justify-content:stretch!important}
  body:has(.content > .page-heading + form.wizard) .content > .page-heading,
  .product-create-page > .page-heading{padding:20px 18px 16px!important}
  body:has(.content > .page-heading + form.wizard) .content > form.wizard,
  .product-create-page > form.wizard{flex:1;max-height:none;padding:16px 18px 0}
  body:has(.content > form.client-invite-wizard) form.client-invite-wizard{max-height:calc(100vh - 20px)}
  .broker-edit-page,.supplier-edit-page,.product-edit-page,.client-edit-page,.user-edit-backdrop{height:calc(100vh - 20px)!important;max-height:none!important}
  body:has(.content > .edit-navbar + .page-heading + form.entity-form) .content > .page-heading,
  body:has(.content > .edit-navbar + .page-heading + form.price-list-editor) .content > .page-heading{padding:20px 18px 16px!important}
  body:has(.content > .edit-navbar + .page-heading + form.entity-form) form.entity-form,
  body:has(.content > .edit-navbar + .page-heading + form.price-list-editor) form.price-list-editor{max-height:calc(100vh - 130px)!important;padding:20px 18px 0!important}
  body:has(.content > .edit-navbar + .page-heading + form.entity-form) form.entity-form > .form-actions,
  body:has(.content > .edit-navbar + .page-heading + form.price-list-editor) form.price-list-editor > .form-actions{margin:20px -18px 0!important;padding:14px 18px!important}
}

@media(prefers-reduced-motion:reduce){
  .container-wizard-backdrop,
  body:has(.content > .page-heading + form.wizard) .content,
  .product-create-page,
  body:has(.content > form.client-invite-wizard) .content,
  body:has(.content > .user-edit-nav + .broker-edit-page) .content,
  body:has(.content > .supplier-edit-page) .content,
  body:has(.content > .product-edit-page) .content,
  body:has(.content > .client-edit-page) .content,
  body:has(.content > .user-edit-nav + .user-edit-backdrop) .content,
  body:has(.content > .edit-navbar + .page-heading + form.entity-form) .content,
  body:has(.content > .edit-navbar + .page-heading + form.price-list-editor) .content,
  .ops-page.narrow:has(> .ops-pagebar + .ops-card form),
  .ops-page.narrow:has(> form.ops-card){backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}