/* =========================================================
   SAPALI - CREATE PLASTIC BOM
   COMPACT AUTHORING UI
   ========================================================= */

#plFormulaCards{
    display:block!important;
}

/* =========================
   FORMULA CONTROLLED
   ========================= */

.plastic-control-block{
    border:1px solid #b9e3d8;
    border-radius:12px;
    background:#f5fcfa;
    overflow:hidden;
}

.plastic-control-title,
.plastic-variable-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:11px 14px 9px;
}

.plastic-control-title span,
.plastic-variable-title span{
    display:block;
    font-size:9px;
    font-weight:800;
    letter-spacing:.11em;
    opacity:.62;
}

.plastic-control-title b,
.plastic-variable-title b{
    display:block;
    margin-top:2px;
    font-size:14px;
    line-height:1.2;
}

.plastic-control-title b{
    color:#096552;
}

.plastic-control-title em,
.plastic-variable-title em{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 9px;
    border-radius:999px;
    font-size:9px;
    font-weight:800;
    font-style:normal;
    white-space:nowrap;
}

.plastic-control-title em{
    color:#07705a;
    background:#e8f8f2;
    border:1px solid #c3eadf;
}

.plastic-variable-title em{
    color:#23658c;
    background:#edf7fd;
    border:1px solid #cee6f4;
}

.plastic-control-values{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid rgba(44,126,106,.12);
}

.plastic-control-values > div{
    position:relative;
    padding:11px 10px 12px;
    text-align:center;
}

.plastic-control-values > div:not(:last-child){
    border-right:1px solid rgba(44,126,106,.12);
}

.plastic-control-values span{
    display:block;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.035em;
    color:#6b8190;
}

.plastic-control-values strong{
    display:block;
    margin-top:4px;
    font-size:16px;
    line-height:1.1;
    color:#08705a;
}

.plastic-control-values small{
    display:block;
    margin-top:3px;
    font-size:9px;
    color:#8395a0;
}

/* =========================
   BOM SPECIFIC
   ========================= */

.plastic-variable-block{
    margin-top:8px;
    border:1px solid #ccdeec;
    border-radius:12px;
    background:#f7fbfe;
    overflow:hidden;
}

.plastic-variable-fields{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    padding:0 14px 13px;
}

.plastic-variable-fields label{
    display:block;
}

.plastic-variable-fields label > span{
    display:block;
    margin-bottom:5px;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    color:#526d82;
}

.plastic-number-input{
    display:flex;
    align-items:center;
    height:38px;
    border:1px solid #bdd4e5;
    border-radius:8px;
    background:#fff;
    overflow:hidden;
    transition:
      border-color .15s ease,
      box-shadow .15s ease;
}

.plastic-number-input:focus-within{
    border-color:#38aeca;
    box-shadow:0 0 0 3px rgba(56,174,202,.11);
}

.plastic-number-input input{
    width:100%;
    min-width:0;
    height:100%;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    padding:0 10px!important;
    text-align:right!important;
    font-size:14px!important;
    font-weight:800!important;
}

.plastic-number-input small{
    display:flex;
    align-items:center;
    align-self:stretch;
    padding:0 10px;
    border-left:1px solid #e0ebf2;
    color:#72899a;
    font-size:9px;
    font-weight:700;
    white-space:nowrap;
}

/* =========================
   RAW MATERIAL RECIPE
   ========================= */

#plLinesTable,
.plastic-lines-table{
    border-radius:10px!important;
    overflow:hidden!important;
}

#plLinesTable th,
.plastic-lines-table th{
    padding-top:9px!important;
    padding-bottom:9px!important;
    font-size:10px!important;
}

#plLinesTable td,
.plastic-lines-table td{
    padding-top:7px!important;
    padding-bottom:7px!important;
    vertical-align:middle!important;
}

/* compact recipe inputs */

#plLinesTable input,
.plastic-lines-table input{
    min-height:34px!important;
}

/* =========================
   EMPTY
   ========================= */

.plastic-config-empty{
    padding:12px 14px;
    border:1px solid #efd59d;
    border-radius:10px;
    background:#fff9eb;
}

.plastic-config-empty b,
.plastic-config-empty span{
    display:block;
}

.plastic-config-empty span{
    margin-top:3px;
    font-size:11px;
    opacity:.7;
}

/* =========================
   RESPONSIVE
   ========================= */

@media(max-width:900px){

    .plastic-control-values{
        grid-template-columns:1fr;
    }

    .plastic-control-values > div:not(:last-child){
        border-right:0;
        border-bottom:1px solid rgba(44,126,106,.12);
    }

    .plastic-variable-fields{
        grid-template-columns:1fr;
    }

}


/* =========================================================
   PLASTIC CREATE V4 - HORIZONTAL CONTROL / BOM COST
   ========================================================= */

/* Formula + BOM-specific cost on ONE row */
#plFormulaCards{
    display:grid!important;
    grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr)!important;
    gap:12px!important;
    align-items:stretch!important;
}

/* Remove old vertical spacing */
#plFormulaCards .plastic-control-block,
#plFormulaCards .plastic-variable-block{
    margin:0!important;
    min-width:0!important;
    height:100%!important;
}

/* Formula section becomes compact */
#plFormulaCards .plastic-control-title,
#plFormulaCards .plastic-variable-title{
    padding:10px 12px 8px!important;
}

#plFormulaCards .plastic-control-values{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

#plFormulaCards .plastic-control-values > div{
    padding:10px 7px!important;
    min-height:58px!important;
}

/* BOM edit area compact */
#plFormulaCards .plastic-variable-fields{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    padding:0 12px 12px!important;
}

#plFormulaCards .plastic-number-input{
    height:36px!important;
}

/* Clear visual distinction */
#plFormulaCards .plastic-control-block{
    background:#f4fcf9!important;
    border-color:#afe0d3!important;
}

#plFormulaCards .plastic-variable-block{
    background:#f6faff!important;
    border-color:#c7ddee!important;
}

@media(max-width:1100px){
    #plFormulaCards{
        grid-template-columns:1fr!important;
    }
}



/* SAPALI_PLASTIC_MATERIAL_SUGGEST_CSS_V1 */

#plasticMaterialSuggestionPortal{
  position:fixed;
  display:none;
  z-index:999999;
  max-height:310px;
  overflow:auto;
  padding:5px;
  border:1px solid #c7d9e8;
  border-radius:10px;
  background:#fff;
  box-shadow:
    0 14px 36px rgba(22,48,76,.18);
}

#plasticMaterialSuggestionPortal.show{
  display:block;
}

#plasticMaterialSuggestionPortal button{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  width:100%;
  border:0;
  border-radius:7px;
  padding:8px 10px;
  background:#fff;
  text-align:left;
  cursor:pointer;
}

#plasticMaterialSuggestionPortal button:hover,
#plasticMaterialSuggestionPortal button.active{
  background:#eef8fc;
}

.plastic-suggest-main{
  min-width:0;
}

.plastic-suggest-main b,
.plastic-suggest-main small{
  display:block;
}

.plastic-suggest-main b{
  color:#075d80;
  font-size:12px;
}

.plastic-suggest-main small{
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#687d8e;
  font-size:10px;
}

.plastic-suggest-price{
  min-width:82px;
  text-align:right;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}

.plastic-suggest-price.ready{
  color:#08765a;
}

.plastic-suggest-price.missing{
  color:#a56a00;
}

.plastic-material-suggest-loading,
.plastic-material-suggest-empty{
  padding:11px 12px;
  color:#6d8191;
  font-size:11px;
}

/*
  Plastic workflow buttons remain visible while
  the user edits a long recipe.
*/
#plasticAuthoringModal .modal-actions{
  position:sticky;
  bottom:0;
  z-index:30;
  margin-top:8px;
  padding-top:10px;
  padding-bottom:10px;
  background:
    linear-gradient(
      180deg,
      rgba(247,251,255,.92),
      #f7fbff 35%
    );
  border-top:1px solid #d9e5ee;
}

/* END_SAPALI_PLASTIC_MATERIAL_SUGGEST_CSS_V1 */







/* SAPALI_PLASTIC_PRODUCT_STYLE_FOOTER_V3 */

/*
  Footer belongs to the Plastic BOM modal,
  NOT to the browser viewport.
*/
#plasticAuthoringModal .plastic-product-style-footer{
  position:sticky!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:0!important;

  z-index:60!important;

  width:auto!important;
  min-height:66px!important;
  box-sizing:border-box!important;

  margin:14px -1px -1px!important;
  padding:11px 16px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;

  border-top:1px solid #d5e3ee!important;
  border-left:0!important;
  border-right:0!important;
  border-bottom:0!important;

  border-radius:0 0 16px 16px!important;

  background:
    linear-gradient(
      180deg,
      rgba(249,252,255,.97) 0%,
      #f5faff 35%,
      #f5faff 100%
    )!important;

  box-shadow:
    0 -8px 18px rgba(26,56,86,.07)!important;

  backdrop-filter:blur(8px);
}

/* No floating explanatory text */
#plasticAuthoringModal
.plastic-product-style-footer
.action-context{
  display:none!important;
}

/* Product-BOM-like button sizing */
#plasticAuthoringModal
.plastic-product-style-footer
button{
  position:static!important;

  min-width:132px!important;
  height:42px!important;

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

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

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

  font-size:12px!important;
  font-weight:750!important;
}

/* Secondary actions */
#plasticAuthoringCancel,
#plasticValidate,
#plasticSaveDraft{
  background:#fff!important;
}

/* Main approval action */
#plasticSubmitApproval{
  min-width:158px!important;

  color:#fff!important;
  border-color:#28c4d5!important;
  background:
    linear-gradient(
      90deg,
      #2abce0,
      #26d4c8
    )!important;

  box-shadow:
    0 6px 16px rgba(38,193,207,.16)!important;
}

/* Delete Draft only for an actual saved Draft */
#plasticDeleteDraft.hidden{
  display:none!important;
}

#plasticDeleteDraft:not(.hidden){
  margin-right:auto!important;
}

/*
  Reserve a little breathing room at bottom,
  but do NOT create the giant gap from the old fixed footer.
*/
#plasticAuthoringModal.plastic-product-footer-enabled{
  padding-bottom:0!important;
}

/* Mobile / narrow modal */
@media(max-width:900px){

  #plasticAuthoringModal
  .plastic-product-style-footer{
    gap:6px!important;
    padding:9px!important;
  }

  #plasticAuthoringModal
  .plastic-product-style-footer
  button{
    min-width:0!important;
    flex:1 1 auto!important;
    padding:0 7px!important;
    font-size:10px!important;
  }

}

/* END_SAPALI_PLASTIC_PRODUCT_STYLE_FOOTER_V3 */