/* NARIA_SUPPLY2_PRO_ACTIONS_V2 */

#s2DetailPane{
  --s2-action-w: 190px;
  --s2-action-h: 38px;
  --s2-gap: 8px;
}

/* =========================
   BUTTON SYSTEM
   ========================= */

#s2DetailPane button.btn,
#s2NewRunModal button.btn{
  box-sizing:border-box !important;

  width:var(--s2-action-w) !important;
  min-width:var(--s2-action-w) !important;
  max-width:var(--s2-action-w) !important;

  height:var(--s2-action-h) !important;
  min-height:var(--s2-action-h) !important;

  margin:0 !important;
  padding:0 14px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-size:12px !important;
  font-weight:700 !important;
  line-height:1 !important;

  border-radius:9px !important;
  white-space:nowrap !important;

  box-shadow:none !important;
  transition:
    background .15s ease,
    border-color .15s ease,
    transform .1s ease !important;
}

#s2DetailPane button.btn:hover:not(:disabled){
  transform:translateY(-1px);
}

#s2DetailPane button.btn:disabled{
  opacity:.45 !important;
  cursor:not-allowed !important;
  transform:none !important;
}


/* =========================
   PURE ACTION GROUPS
   3 equal buttons per row
   ========================= */

:is(
  #s2ForecastBox,
  #s2NeedBox,
  #s2FinalBox,
  #s2OrdersBox,
  #s2ConfirmBox,
  #s2ReceiveBox
)
div:has(> button.btn):not(:has(> input)):not(:has(> select)):not(:has(> textarea)){
  display:grid !important;

  grid-template-columns:
    repeat(3, var(--s2-action-w)) !important;

  gap:var(--s2-gap) !important;

  align-items:center !important;
  justify-content:start !important;

  width:100% !important;
}


/* =========================
   STEP 5 — CONFIRM
   force consistent layout
   ========================= */

#s2ConfirmBox
div:has(> button[id^="s2c"])
:not(:has(> input))
:not(:has(> select)){
  display:grid !important;
  grid-template-columns:repeat(3,190px) !important;
  gap:8px !important;
  justify-content:start !important;
  align-items:center !important;

  padding:10px !important;
  margin:10px 0 !important;

  background:#fff !important;
  border:1px solid #eadfce !important;
  border-radius:12px !important;
}


/* =========================
   MIXED TOOLBARS
   search / select + buttons
   ========================= */

:is(
  #s2FinalBox,
  #s2OrdersBox,
  #s2ConfirmBox,
  #s2ReceiveBox
)
div:has(> button.btn):has(> input),

:is(
  #s2FinalBox,
  #s2OrdersBox,
  #s2ConfirmBox,
  #s2ReceiveBox
)
div:has(> button.btn):has(> select){

  display:flex !important;
  flex-wrap:wrap !important;

  gap:8px !important;
  align-items:center !important;

  padding:10px !important;
  margin-bottom:10px !important;

  background:#fff !important;
  border:1px solid #eadfce !important;
  border-radius:12px !important;
}


/* =========================
   INPUT / SELECT SYSTEM
   ========================= */

:is(
  #s2FinalBox,
  #s2OrdersBox,
  #s2ConfirmBox,
  #s2ReceiveBox
) input,

:is(
  #s2FinalBox,
  #s2OrdersBox,
  #s2ConfirmBox,
  #s2ReceiveBox
) select{

  box-sizing:border-box !important;
  height:38px !important;
  min-height:38px !important;

  border:1px solid #ddd1c0 !important;
  border-radius:9px !important;

  background:#fff !important;

  padding:0 11px !important;
  font-size:12px !important;
}


/* Search fields */
:is(
  #s2FinalBox,
  #s2OrdersBox,
  #s2ConfirmBox,
  #s2ReceiveBox
) input[id*="Search"]{
  min-width:260px !important;
  flex:1 1 300px !important;
}


/* Dropdowns */
:is(
  #s2FinalBox,
  #s2OrdersBox,
  #s2ConfirmBox,
  #s2ReceiveBox
) select{
  min-width:180px !important;
}


/* =========================
   SECONDARY ACTIONS
   ========================= */

#s2DetailPane .btn.secondary{
  background:#fff !important;
  color:#6f4b23 !important;

  border:1px solid #d7c3a7 !important;
}

#s2DetailPane .btn.secondary:hover:not(:disabled){
  background:#faf6ef !important;
  border-color:#b99870 !important;
}


/* =========================
   PRIMARY FINAL ACTIONS
   ========================= */

:is(
  #s2fpFinalize,
  #s2fpFinalizeTop,
  #s2oFinalizeTop,
  #s2oFinalizeBottom,
  #s2cFinalizeTop,
  #s2cFinalizeBottom,
  #s2rSave
){
  font-weight:800 !important;
}


/* unavailable / destructive */
#s2cBulkUnavailable{
  background:#fff !important;
  color:#9b2c2c !important;
  border:1px solid #e2bcbc !important;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width:760px){

  #s2DetailPane{
    --s2-action-w: 100%;
  }

  #s2DetailPane button.btn{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  :is(
    #s2ForecastBox,
    #s2NeedBox,
    #s2FinalBox,
    #s2OrdersBox,
    #s2ConfirmBox,
    #s2ReceiveBox
  )
  div:has(> button.btn)
  :not(.nothing){
    max-width:100%;
  }

  #s2ConfirmBox
  div:has(> button[id^="s2c"])
  :not(.nothing){
    max-width:100%;
  }

  #s2ConfirmBox
  div:has(> button[id^="s2c"])
  {
    grid-template-columns:1fr !important;
  }
}

/* Supplier card actions must fit the card, independently of toolbar widths. */
#s2ConfirmBox .s2cOrderGrid .s2cOrderAction{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  width:100%!important;min-width:0;gap:8px!important;
  box-sizing:border-box;
}
#s2ConfirmBox .s2cOrderCard .s2cOrderAction > button.btn{
  width:100%!important;min-width:0!important;max-width:100%!important;
  height:auto!important;white-space:normal!important;overflow-wrap:anywhere;
  box-sizing:border-box;line-height:1.5;
}
#s2ConfirmBox .s2cOrderBulk:has(>button.btn){
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))!important;
  min-width:0;box-sizing:border-box;
}
#s2ConfirmBox .s2cOrderBulk > button.btn{
  min-width:0!important;width:100%!important;max-width:100%!important;
  height:auto!important;white-space:normal!important;box-sizing:border-box;
}

/* Receive workspace: explicit form layout, independent of generic action grids. */
#s2DetailPane #s2ReceiveBox{min-width:0;line-height:1.65}
#s2DetailPane #s2ReceiveBox button.btn{
 width:auto!important;min-width:0!important;max-width:100%!important;
 height:auto!important;min-height:42px!important;padding:10px 16px!important;
 white-space:normal!important;line-height:1.55!important;box-sizing:border-box;
}
#s2DetailPane #s2ReceiveBox div:has(>button.btn){
 display:flex!important;flex-wrap:wrap!important;grid-template-columns:none!important;
 min-width:0;box-sizing:border-box;
}
#s2DetailPane #s2ReceiveBox .s2rBatchPanel{
 display:block!important;padding:20px!important;margin-bottom:16px;border-radius:16px;
 border:1px solid #e8ddce;background:#fff;
}
#s2DetailPane #s2ReceiveBox .s2rPanelHead{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px}
#s2DetailPane #s2ReceiveBox .s2rStepNumber{display:flex;align-items:center;justify-content:center;flex:0 0 34px;height:34px;border-radius:10px;background:#f5ecdf;color:#765024;font-weight:800}
#s2DetailPane #s2ReceiveBox .s2rPanelHead strong{font-size:16px}
#s2DetailPane #s2ReceiveBox .s2rPanelHead p{margin:5px 0 0;font-size:12px;line-height:1.9;color:#827466}
#s2DetailPane #s2ReceiveBox .s2rBatchFields{display:grid!important;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:16px;min-width:0}
#s2DetailPane #s2ReceiveBox .s2rBatchFields label,
#s2DetailPane #s2ReceiveBox .s2ReceiveToolbarMain label{display:flex;flex-direction:column;gap:7px;min-width:0;color:#665545;font-size:12px;font-weight:700}
#s2DetailPane #s2ReceiveBox .s2rBatchFields input,
#s2DetailPane #s2ReceiveBox .s2rBatchFields select,
#s2DetailPane #s2ReceiveBox .s2ReceiveToolbarMain input,
#s2DetailPane #s2ReceiveBox .s2ReceiveToolbarMain select{
 width:100%!important;min-width:0!important;max-width:100%!important;height:44px!important;font-size:13px!important;
}
#s2DetailPane #s2ReceiveBox .s2rBatchSubmit{justify-content:space-between!important;align-items:center!important;gap:16px!important;margin-top:20px;padding-top:16px;border-top:1px solid #f0e8df}
#s2DetailPane #s2ReceiveBox .s2rBatchSubmit span{font-size:12px;color:#827466}
#s2DetailPane #s2ReceiveBox .s2ReceiveToolbar{display:block!important;position:static;padding:20px!important;background:#fff;border-radius:16px;margin-bottom:14px}
#s2DetailPane #s2ReceiveBox .s2ReceiveToolbarMain{display:grid!important;grid-template-columns:1fr 1.5fr .7fr;gap:16px;align-items:end}
#s2DetailPane #s2ReceiveBox .s2ReceiveToolbarActions{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:12px!important;margin-top:20px;padding-top:16px;border-top:1px solid #f0e8df}
#s2DetailPane #s2ReceiveBox .s2rSelectionActions{display:flex!important;gap:8px!important;flex-wrap:wrap!important;width:auto!important}
#s2DetailPane #s2ReceiveBox .s2rSelectionActions .btn{padding:8px 12px!important;font-size:11px!important;background:#faf7f2!important;border-color:#e8ddce!important}
#s2DetailPane #s2ReceiveBox .s2rCompletion{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:12px!important;margin-top:18px;padding-top:16px;border-top:1px dashed #e4d9cb}
#s2DetailPane #s2ReceiveBox .s2rCompletion strong,#s2DetailPane #s2ReceiveBox .s2rCompletion span{display:block}
#s2DetailPane #s2ReceiveBox .s2rCompletion strong{font-size:12px;color:#6c5d4f}
#s2DetailPane #s2ReceiveBox .s2rCompletion span{font-size:11px;color:#8b7c6d;margin-top:3px}
#s2DetailPane #s2ReceiveBox .s2rFindBar{display:grid!important;grid-template-columns:auto minmax(160px,1fr) auto;gap:10px!important;padding:16px!important;align-items:center!important}
#s2DetailPane #s2ReceiveBox #s2rFindCode{min-width:0!important;width:100%!important;height:44px!important}
#s2DetailPane #s2ReceiveBox #s2rFindStatus{grid-column:2;font-size:11px}
#s2DetailPane #s2ReceiveBox #s2rFindAll{grid-column:3;grid-row:1}
#s2DetailPane #s2ReceiveBox button:focus-visible,#s2DetailPane #s2ReceiveBox input:focus-visible,#s2DetailPane #s2ReceiveBox select:focus-visible{outline:2px solid #997038;outline-offset:3px}
@media(max-width:900px){
 #s2DetailPane #s2ReceiveBox .s2rBatchFields{grid-template-columns:repeat(2,minmax(0,1fr))}
 #s2DetailPane #s2ReceiveBox .s2ReceiveToolbarMain{grid-template-columns:repeat(2,minmax(0,1fr))}
 #s2DetailPane #s2ReceiveBox .s2ReceiveToolbarMain label:nth-child(2){grid-column:1/-1;grid-row:1}
}
@media(max-width:600px){
 #s2DetailPane #s2ReceiveBox .s2rBatchPanel,#s2DetailPane #s2ReceiveBox .s2ReceiveToolbar{padding:14px!important}
 #s2DetailPane #s2ReceiveBox .s2rBatchFields{grid-template-columns:minmax(0,1fr)}
 #s2DetailPane #s2ReceiveBox .s2rBatchSubmit button,#s2DetailPane #s2ReceiveBox #s2rSave,#s2DetailPane #s2ReceiveBox #s2rFinalize{width:100%!important}
 #s2DetailPane #s2ReceiveBox .s2rSelectionActions{width:100%!important}
 #s2DetailPane #s2ReceiveBox .s2rSelectionActions button{flex:1 1 120px!important}
 #s2DetailPane #s2ReceiveBox .s2rFindBar{grid-template-columns:minmax(0,1fr)!important}
 #s2DetailPane #s2ReceiveBox .s2rFindBar>*{grid-column:1!important;grid-row:auto!important;width:100%!important}
}
/* Keep the receiving fields within each product card at every width. */
#s2DetailPane #s2ReceiveBox .s2rAggregateMode #s2ReceiveTable tr{
 grid-template-columns:28px repeat(3,minmax(0,1fr));gap:16px;padding:16px;
}
#s2DetailPane #s2ReceiveBox .s2rAggregateMode #s2ReceiveTable td:nth-child(1){grid-column:1;grid-row:1}
#s2DetailPane #s2ReceiveBox .s2rAggregateMode #s2ReceiveTable td:nth-child(2){grid-column:2/-1;grid-row:1}
#s2DetailPane #s2ReceiveBox .s2rAggregateMode #s2ReceiveTable td:nth-child(3){grid-column:2;grid-row:2}
#s2DetailPane #s2ReceiveBox .s2rAggregateMode #s2ReceiveTable td:nth-child(4){grid-column:3;grid-row:2}
#s2DetailPane #s2ReceiveBox .s2rAggregateMode #s2ReceiveTable td:nth-child(5){grid-column:4;grid-row:2}
#s2DetailPane #s2ReceiveBox .s2rAggregateMode #s2ReceiveTable td:nth-child(6){grid-column:2/-1;grid-row:3}
#s2DetailPane #s2ReceiveBox .s2rAggregateMode #s2ReceiveTable td:nth-child(7){grid-column:2/-1;grid-row:4}
#s2DetailPane #s2ReceiveBox .s2rReceiveInputs{min-width:0;grid-template-columns:minmax(0,1fr) minmax(60px,.6fr)}
#s2DetailPane #s2ReceiveBox .s2rReceiveInputs label{min-width:0}
#s2DetailPane #s2ReceiveBox .s2rStatusGrid{min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){
 #s2DetailPane #s2ReceiveBox .s2rAggregateMode #s2ReceiveTable tr{grid-template-columns:24px minmax(0,1fr);gap:12px}
 #s2DetailPane #s2ReceiveBox .s2rAggregateMode #s2ReceiveTable td:nth-child(n+3){grid-column:1/-1;grid-row:auto}
}