/* Reçete › Çözelti hazırlama (dosing.js) ve gübre miktarları: iki Reçete sekmesinde aynı
   düzen. Besin Çözeltisi stoktan, Optimizasyon doğrudan hazırlar; tank görselinde mavi su,
   turuncu stok çözelti payı (doğrudan hazırlamada suda çözünmüş gübre tonu). */
.recipe-prep,
.recipe-amounts {
  grid-column: 1 / -1;
  padding: 10px 14px 12px;
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
}
.recipe-prep[hidden], .recipe-amounts[hidden] { display: none; }
.dosing-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.dosing-title { margin: 0; color: var(--text); font-size: var(--fs-label); font-weight: 750; }
.dosing-method { color: var(--muted); font-size: var(--fs-meta); font-weight: 650; }
.dosing-step { margin: 0; color: var(--text-2); font-size: var(--fs-label); font-weight: 650; line-height: 1.45; }
.dosing-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 22px; }
.dosing-volume { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: var(--fs-label); font-weight: 650; }
.dosing-volume label { cursor: pointer; white-space: nowrap; }
.dosing-volume input[aria-invalid="true"] { color: var(--danger); }
.dosing-transfer { min-width: 0; max-width: 100%; display: grid; gap: 5px; }
.dosing-guide { margin: 0; color: var(--muted); font-size: .72rem; font-weight: 650; }
.dosing-list {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}
.dosing-list li {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  min-height: 32px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  border-radius: 8px;
  background: var(--surface-soft);
  font-size: .74rem;
}
.dosing-list li > span { color: var(--text-2); font-weight: 700; overflow-wrap: anywhere; }
.dosing-list .dosing-icon { color: var(--icon); font-weight: 500; }
.dosing-action { color: var(--muted); font-size: .7rem; }
.dosing-list strong { color: var(--blue-dark); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dosing-list strong small { margin-left: 3px; color: var(--icon); font-size: .64rem; font-weight: 650; }
.dosing-list .is-short strong { color: var(--danger, #b42318); }
.dosing-list .dosing-empty { background: none; padding-inline: 0; color: var(--muted); font-weight: 650; }
.dosing-note { margin: 0; color: var(--danger, #b42318); font-size: .7rem; font-weight: 650; }
.dosing-note[hidden] { display: none; }
.dosing-mixture { margin: 0; padding-left: 16px; border-left: 1px solid var(--line); display: flex; align-items: center; gap: 10px; min-width: 0; }
.dosing-mixture[hidden] { display: none; }
/* Görsel açıklayıcı ama küçük: reçetenin önüne geçmez. */
.dosing-vessel {
  width: 44px;
  height: 60px;
  flex: 0 0 44px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--line-strong);
  border-radius: 10px 10px 18px 18px;
  box-shadow: inset 0 0 0 2px var(--surface);
}
.dosing-fill-stock { height: var(--stock-share, 0%); flex-shrink: 0; background: #efa54c; }
.dosing-fill-water { position: relative; flex: 1; background: #79bce8; }
.dosing-vessel[data-has-stock="true"] .dosing-fill-water::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background: linear-gradient(to bottom, rgba(239, 165, 76, .9), rgba(239, 165, 76, .6) 30%, rgba(239, 165, 76, .25) 65%, rgba(239, 165, 76, 0));
  pointer-events: none;
}
.dosing-mixture-caption { display: grid; gap: 5px; min-width: 0; font-size: .72rem; }
.dosing-mixture-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--text-2); }
.dosing-mixture-row > span { min-width: 0; overflow-wrap: anywhere; }
.dosing-mixture-row strong { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dosing-mixture-stock > span::before, .dosing-mixture-water > span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 2px;
  background: #efa54c;
}
.dosing-mixture-water > span::before { background: #79bce8; }
.dosing-mixture-total { border-top: 1px solid var(--line); padding-top: 5px; font-weight: 750; }

@media (max-width: 600px) {
  .recipe-prep, .recipe-amounts { padding-inline: 12px; }
  .dosing-body { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .dosing-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  .dosing-list li { justify-content: space-between; }
  .dosing-list .dosing-empty { grid-column: 1 / -1; }
  .dosing-mixture { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}