/* VitaCore - Create Recipe row layout hotfix */

/* ---------- Desktop ---------- */

.formulation-page .ingredient-table {
  width: 100%;
  overflow: visible;
}

.formulation-page .ingredient-head {
  display: grid !important;
  grid-template-columns:
    minmax(300px, 2.3fr)
    minmax(170px, 1fr)
    minmax(180px, 1fr)
    46px !important;
  gap: 14px !important;
  align-items: center;
  padding-inline: 58px 12px !important;
}

.formulation-page .ingredient-row {
  position: relative;
  display: grid !important;
  grid-template-columns:
    44px
    minmax(300px, 2.3fr)
    minmax(170px, 1fr)
    minmax(180px, 1fr)
    46px !important;
  gap: 14px !important;
  align-items: center !important;
  width: 100%;
  min-height: 76px;
  padding: 10px 12px !important;
  box-sizing: border-box;
}

/* Number */
.formulation-page .ingredient-number {
  width: 44px;
  min-width: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Material + Unit custom selects */
.formulation-page .ingredient-material-select,
.formulation-page .ingredient-unit-select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* Main clickable control inside custom selects */
.formulation-page .ingredient-material-select [role="combobox"],
.formulation-page .ingredient-unit-select [role="combobox"],
.formulation-page .ingredient-material-select > button,
.formulation-page .ingredient-unit-select > button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  justify-content: space-between !important;
  text-align: start !important;
}

/* Do not turn long item names into tiny circles */
.formulation-page .ingredient-material-select [role="combobox"] *,
.formulation-page .ingredient-unit-select [role="combobox"] *,
.formulation-page .ingredient-material-select > button *,
.formulation-page .ingredient-unit-select > button * {
  min-width: 0;
}

/* Quantity */
.formulation-page .ingredient-row > input[type="number"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 52px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Delete button: only the direct row button */
.formulation-page .ingredient-row > button {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  justify-self: center;
}

/* ---------- Arabic RTL ---------- */

html[dir="rtl"] .formulation-page .ingredient-row,
[dir="rtl"] .formulation-page .ingredient-row {
  direction: rtl;
}

html[dir="rtl"] .formulation-page .ingredient-material-select,
html[dir="rtl"] .formulation-page .ingredient-unit-select,
[dir="rtl"] .formulation-page .ingredient-material-select,
[dir="rtl"] .formulation-page .ingredient-unit-select {
  text-align: right;
}

/* ---------- Medium screens ---------- */

@media (max-width: 1100px) {
  .formulation-page .ingredient-row {
    grid-template-columns:
      38px
      minmax(230px, 2fr)
      minmax(140px, 1fr)
      minmax(145px, 1fr)
      42px !important;
    gap: 10px !important;
  }

  .formulation-page .ingredient-head {
    grid-template-columns:
      minmax(230px, 2fr)
      minmax(140px, 1fr)
      minmax(145px, 1fr)
      42px !important;
    gap: 10px !important;
    padding-inline: 50px 10px !important;
  }
}

/* ---------- Mobile / narrow workspace ---------- */

@media (max-width: 760px) {
  .formulation-page .ingredient-head {
    display: none !important;
  }

  .formulation-page .ingredient-row {
    grid-template-columns: 38px 1fr 42px !important;
    gap: 10px !important;
    padding: 14px 10px !important;
  }

  .formulation-page .ingredient-number {
    grid-column: 1;
    grid-row: 1;
  }

  .formulation-page .ingredient-material-select {
    grid-column: 2;
    grid-row: 1;
  }

  .formulation-page .ingredient-row > button {
    grid-column: 3;
    grid-row: 1;
  }

  .formulation-page .ingredient-row > input[type="number"] {
    grid-column: 2;
    grid-row: 2;
  }

  .formulation-page .ingredient-unit-select {
    grid-column: 2;
    grid-row: 3;
  }
}

/* ===== Recipe row width refinement ===== */

@media (min-width: 1101px) {

  .formulation-page .ingredient-row {
    grid-template-columns:
      40px
      minmax(220px, 1.65fr)
      minmax(155px, 0.9fr)
      minmax(135px, 0.72fr)
      40px !important;

    gap: 10px !important;
    padding-inline: 8px !important;
  }

  .formulation-page .ingredient-head {
    grid-template-columns:
      minmax(220px, 1.65fr)
      minmax(155px, 0.9fr)
      minmax(135px, 0.72fr)
      40px !important;

    gap: 10px !important;
    padding-inline: 58px 8px !important;
  }

  .formulation-page .ingredient-material-select {
    max-width: 100% !important;
  }

  .formulation-page .ingredient-unit-select {
    max-width: 155px !important;
    width: 100% !important;
    justify-self: stretch !important;
  }

  .formulation-page .ingredient-row > input[type="number"] {
    max-width: 100% !important;
  }
}

/* Prevent custom controls from escaping the recipe box */
.formulation-page .ingredient-row {
  overflow: visible;
}

.formulation-page .ingredient-row > * {
  min-width: 0 !important;
  max-width: 100%;
}

.formulation-page .ingredient-material-select,
.formulation-page .ingredient-unit-select {
  box-sizing: border-box !important;
}