/* =====================================================================
   GÜBRE RAFI  (fertilizer_shelf.js)

   Üstte "içindekiler" kart ızgarası (tanktaki / optimizasyondaki gübreler:
   tam ad · miktar + birim · çıkar), altında "Gübre ekle"; ortak gübre havuzu
   ortalanmış pencerede kart ızgarası olarak açılır.
   Etkileşim rengi her yerde tek vurgu rengidir (--blue); tank kimlik rengi
   yalnız tank harflerinde (sekme rozeti ve kartlardaki tank etiketi) kullanılır.
   ===================================================================== */

/* İç boşluk ve aralık iki bölümde ortaktır (workspace_components.css). */
.shelf {
  --shelf-ease: cubic-bezier(.2, .85, .25, 1);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Tank ve havuz kartlarının ortak sütun alt sınırı: kısa ürün adı ve
   "0.00 kg" miktar alanı sığar; telefonda iki, geniş telefonda üç sütun açılır. */
:root { --fertilizer-card-min: 7.5rem; }

.shelf-icon { display: inline-grid; place-items: center; flex: none; }
.shelf-icon svg { width: 18px; height: 18px; }

/* ---------- İçindekiler: minimalist kartlar ----------
   Sütunlar alanın genişliğinden, yükseklik kullanılabilir ekrandan türetilir.
   Az gübrede alan içeriği kadar büyür; sınır aşılınca yalnız ızgara kayar. */

.shelf-list {
  /* Dinamik sütun: alt sınır kısa ürün adı ile "0.00 kg" miktar alanına göre
     ölçülür; sığan kadar sütun açılır ve kartlar satırı eşit paylaşır, sağda
     boşluk kalmaz. Genişlik hiçbir zaman iki alt sınırı aşmaz (o zaman yeni
     sütun açılır). auto-fill az gübrede boş sütunları korur, kartlar şişmez. */
  margin: 0;
  padding: 3px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--fertilizer-card-min)), 1fr));
  list-style: none;
  max-height: var(--shelf-list-space, none);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  align-content: start;
}

.shelf-item {
  position: relative;
  min-width: 0;
  padding: 5px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  gap: 4px;
  /* Köşe, zemin ve gölgesiz düz yüzey ortaktır (workspace_components.css). */
  border: 1px solid var(--line);
}

/* Reçete Hesapla kartında miktar yok: boş kontrol satırı ve aralığı oluşmaz. */
.shelf-item:has(> .shelf-controls:empty) { grid-template-rows: auto 1fr; }

.shelf-item > .shelf-identity { grid-column: 1; grid-row: 1; align-items: center; align-self: center; }
.shelf-item > .shelf-remove { grid-column: 2; grid-row: 1; align-self: start; }
.shelf-item > .shelf-name { grid-column: 1 / -1; grid-row: 2; }
.shelf-item > .shelf-controls { grid-column: 1 / -1; grid-row: 3; }

.shelf-controls { min-width: 0; }
.shelf-controls:empty { display: none; }

.shelf-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.shelf-logo {
  width: 28px;
  height: 28px;
  flex: none;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.shelf-logo.is-placeholder {
  display: grid;
  place-items: center;
  color: var(--text-2);
  font-size: .78rem;
  font-weight: 750;
}

.shelf-name { min-width: 0; flex: 1; }

/* Yazı ölçüsü ve ağırlığı workspace_components.css'te (havuz ve raf ayrı). */
.shelf-name strong {
  display: block;
  color: var(--text);
  overflow-wrap: break-word;
}

.shelf-name small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: .66rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Miktar + birim: tek çerçeveli giriş grubu */
.shelf-amount {
  min-width: 0;
  display: flex;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.shelf-amount:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}

.shelf-amount:has([aria-invalid="true"]) { border-color: var(--danger); }

.shelf-amount .amount-input,
.shelf-amount .unit-select {
  min-height: var(--control-h);
  border: 0;
  border-radius: 0;
  outline: none;
}

.shelf-amount .amount-input {
  flex: 1;
  padding: 4px;
  background: transparent;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-data);
  font-weight: 600;
}

.shelf-amount .amount-input::placeholder { color: var(--icon); font-weight: 500; }

/* Birim: alanın içinde küçük, soluk bir etiket (150 kg ⌄). Sayıyla birlikte okunur;
   tıklanınca birim listesi açılır. Ayrı gri blok yok. */
.shelf-amount .unit-select {
  width: auto;
  min-height: 0;
  height: 24px;
  flex: none;
  align-self: center;
  margin-right: 2px;
  padding: 0 13px 0 3px;
  border-radius: 6px;
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) right 9px center / 4px 4px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) right 5px center / 4px 4px no-repeat,
    var(--sunken);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  transition: background-color .15s ease, color .15s ease;
}
.shelf-amount .unit-select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* Çıkar: köşede sade çarpı */
.shelf-remove {
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--icon);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}

.shelf-remove svg { width: 14px; height: 14px; }

/* Tanka giriş / çıkış hareketi */
.shelf-item.is-new { animation: shelf-drop-in .4s var(--shelf-ease); }
.shelf-item.is-leaving { animation: shelf-leave .17s ease-in forwards; pointer-events: none; }

@keyframes shelf-drop-in {
  0% { opacity: 0; transform: scale(.94); box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 40%, transparent); }
  60% { opacity: 1; transform: scale(1.01); }
  100% { transform: none; box-shadow: 0 0 0 8px transparent; }
}

@keyframes shelf-leave {
  to { opacity: 0; transform: scale(.94); }
}

/* ---------- Geri al ----------
   Uygulama genelinde aynı sakin görünüm (gübre havuzu, Optimizasyon, Reçetelerim):
   açık mavi zemin, koyu yazı; "Geri al" beyaz zeminli ikincil düğme. Koyu şerit yok. */

.shelf-undo {
  padding: 6px 6px 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--text-2);
  font-size: .76rem;
  font-weight: 600;
  animation: shelf-undo-in .22s var(--shelf-ease);
}

.shelf-undo-button {
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--line));
  border-radius: 8px;
  background: var(--surface);
  color: var(--blue-dark);
  font-size: .76rem;
  font-weight: 750;
  cursor: pointer;
}

.shelf-pool > .shelf-undo { flex: none; margin: 0 16px 10px; }

@keyframes shelf-undo-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ---------- "Gübre ekle" yuvası ---------- */

/* Liste doluyken de boşken de solda kompakt ekleme eylemi. */
.shelf-open {
  min-height: var(--control-h);
  padding: 4px 8px;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed var(--line-strong);
  border-radius: 9px;
  background: transparent;
  color: var(--blue);
  font-size: var(--fs-label);
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.shelf-open .shelf-icon svg { width: 16px; height: 16px; }

/* Boş tankta da ekleme eylemi içeriği kadar, sola yaslı kalır. */
.shelf[data-count="0"] .shelf-open { width: fit-content; }

/* ---------- Gübre havuzu penceresi (ortalanmış; perde overlay_scrim.css) ---------- */

.shelf-dialog {
  width: min(860px, calc(100vw - 24px));
  height: fit-content;
  max-height: calc(100dvh - var(--scrim-top, 0px) - var(--scrim-bottom, 0px) - 24px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(var(--shadow-rgb), .28);
}

.shelf-dialog[open] { animation: shelf-dialog-in .2s var(--shelf-ease, ease); }

@keyframes shelf-dialog-in {
  from { opacity: 0; transform: scale(.97); }
  to { opacity: 1; transform: none; }
}

.shelf-pool {
  --shelf-ease: cubic-bezier(.2, .85, .25, 1);
  max-height: inherit;
  display: flex;
  flex-direction: column;
}

.shelf-pool-head {
  padding: 8px 10px 8px 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.shelf-pool-title { min-width: 0; margin-right: auto; display: grid; gap: 2px; }
.shelf-pool-title h2 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.shelf-pool-context { color: var(--muted); font-size: .76rem; font-weight: 650; }

.shelf-tools {
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.shelf-search { position: relative; min-width: 220px; flex: 1; display: block; }
.shelf-search .shelf-icon { position: absolute; top: 50%; left: 11px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.shelf-search .shelf-icon svg { width: 16px; height: 16px; }
.shelf-search input { min-height: 40px; padding-left: 36px; border-radius: 10px; background: var(--surface); }

.shelf-chips { padding: 3px; display: flex; gap: 2px; border-radius: 10px; background: var(--sunken); }

/* Tümünü seç / Tümünü bırak: tek düğme, satırlardaki seçim kutusuyla aynı dil.
   Kutu: boş = hiçbiri, çizgi = bir kısmı, mavi tik = hepsi seçili. */
.shelf-bulk {
  min-width: 142px;
  min-height: 40px;
  padding: 4px 12px 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-2);
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.shelf-bulk-box {
  width: 20px;
  height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.shelf-bulk-box svg { width: 14px; height: 14px; stroke-width: 3; }
.shelf-bulk[data-state="some"] .shelf-bulk-box,
.shelf-bulk[data-state="all"] .shelf-bulk-box { border-color: var(--blue); background: var(--blue); color: var(--on-accent); }
.shelf-bulk[data-state="all"] { color: var(--blue-dark); }
.shelf-bulk:disabled { opacity: .45; cursor: default; }

.shelf-chip {
  min-height: 34px;
  padding: 3px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
}

.shelf-chip[aria-pressed="true"] { background: var(--surface); color: var(--blue-dark); box-shadow: 0 1px 3px rgba(var(--shadow-rgb), .14); }

.shelf-pool-list {
  min-height: 0;
  flex: 0 1 auto;
  margin: 0;
  padding: 8px 12px;
  display: grid;
  /* Tank kartlarıyla aynı dinamik sütun: telefonda tek sütunluk uzun liste oluşmaz. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--fertilizer-card-min)), 1fr));
  gap: 6px;
  align-content: start;
  overflow: auto;
  overscroll-behavior: contain;
  list-style: none;
}

/* Tank kartıyla aynı düzen: üstte logo (seçim işareti köşesinde) ve "⋯" menüsü,
   altta tam genişlikte ad ve marka/bileşim satırı. Dar sütunda ad için yer kalır. */
.shelf-pool-item {
  position: relative;
  min-width: 0;
  padding: 7px 4px 7px 9px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: start; /* satırdaki uzun adlı kart yüzünden logo aşağı kaymaz */
  align-items: start;
  gap: 4px;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.shelf-pool-item .shelf-identity { display: contents; }
.shelf-pool-item .shelf-mark { grid-column: 1; grid-row: 1; justify-self: start; align-self: center; }
.shelf-pool-item .shelf-item-tools { grid-column: 2; grid-row: 1; }
.shelf-pool-item .shelf-name { grid-column: 1 / -1; grid-row: 2; }
.shelf-pool-item .shelf-name small { font-size: .7rem; }
/* Seçim işareti: logonun sol üst köşesinde küçük daire (kartın tamamı da tıklanır). */
.shelf-pool-item .shelf-mark .shelf-toggle {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 17px;
  height: 17px;
  border-width: 1.5px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surface);
}
.shelf-pool-item .shelf-mark .shelf-toggle svg { width: 11px; height: 11px; }
.shelf-pool-item.is-in .shelf-mark .shelf-toggle { box-shadow: 0 0 0 2px var(--blue-soft); }
/* Seçili değilken işaret görünmez (kartın tamamına dokunmak seçer); fareyle ya da klavyeyle belirir. */
.shelf-pool-item:not(.is-in) .shelf-mark .shelf-toggle { opacity: 0; transition: opacity .15s ease; }
.shelf-pool-item:not(.is-in) .shelf-mark .shelf-toggle:focus-visible { opacity: 1; }
.shelf-more { width: 28px; height: 28px; flex: none; }
.shelf-menu {
  position: absolute;
  top: calc(100% - 6px);
  right: 6px;
  z-index: 5;
  min-width: 150px;
  padding: 4px;
  display: grid;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(var(--shadow-rgb), .18);
}
.shelf-menu-item {
  min-height: 34px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  font-size: .76rem;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.shelf-menu-item svg { width: 15px; height: 15px; }
.shelf-menu-item.is-danger { color: var(--danger); }

.shelf-pool-item.is-in {
  border-color: color-mix(in srgb, var(--blue) 40%, var(--line));
  background: var(--blue-soft);
}

/* Seçim kutusu: boş kare = seçili değil, mavi tik = tankta / optimizasyonda */
.shelf-toggle {
  width: 22px;
  height: 22px;
  padding: 0;
  flex: none;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.shelf-toggle svg { width: 15px; height: 15px; stroke-width: 3; }
/* Kutu küçük görünür ama dokunma alanı geniştir; satırın tamamı da tıklanır. */
.shelf-toggle { position: relative; }
.shelf-toggle::after { content: ""; position: absolute; inset: -9px; }
.shelf-toggle[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: var(--on-accent); }
.shelf-pool-item.is-popped .shelf-toggle { animation: shelf-pop .32s var(--shelf-ease); }

@keyframes shelf-pop {
  0% { transform: scale(.75); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.shelf-item-tools { display: flex; flex: none; align-items: center; gap: 2px; }

.shelf-icon-button {
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--icon);
  cursor: pointer;
}

.shelf-icon-button svg { width: 16px; height: 16px; }

.shelf-pool-empty { grid-column: 1 / -1; padding: 28px 12px; color: var(--muted); font-size: .84rem; text-align: center; cursor: default; }

/* Ayak: diğer pencerelerle aynı düğmeler (styles.css .text-button / .quiet-button / .primary). */
.shelf-pool-foot {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.shelf-create .shelf-icon svg { width: 16px; height: 16px; }
.shelf-pool-spacer { flex: 1; }

/* ---------- Tank kartı içinde ---------- */

/* Gübrenin bulunduğu (diğer) tank(lar): havuzda ve rafta aynı etiket */
.shelf-note {
  min-width: 22px;
  flex: none;
  margin-right: 2px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--sunken);
  color: var(--text-2);
  font-size: .68rem;
  font-weight: 800;
  text-align: center;
}

/* Tek tankı gösteren etiket sekmedeki rozetin rengini soluk zeminde taşır. */
.shelf-note[data-tone] {
  background: color-mix(in srgb, var(--tank-accent) 14%, var(--surface));
  color: var(--tank-accent);
}

/* Kısa ürün adı ayrı satırda; logo ve tank harfleri aynı üst sırada. */
.shelf-item .shelf-identity { flex-direction: row; gap: var(--workspace-gap); }
.shelf-item .shelf-logo,
.shelf-pool-item .shelf-logo { width: 24px; height: 24px; }
.shelf-item .shelf-note {
  display: inline-block;
  margin: 0;
  padding: 0 5px;
  min-width: 18px;
  font-size: var(--fs-meta);
  line-height: 1.5;
  vertical-align: 1px;
}

/* Miktar + birim kartın alt kenarında; ad için kalan yükseklik serbesttir. */
.shelf-item .shelf-amount { width: 100%; }
.shelf-amount .amount-input { min-width: 0; padding-right: 3px; }
.shelf-item .shelf-amount .amount-input { min-height: var(--control-h); }

/* Rafta tank etiketi logonun sağ alt köşesinde küçük rozet. */
.shelf-mark { position: relative; flex: none; display: inline-grid; }
.shelf-mark .shelf-note {
  position: absolute;
  right: -6px;
  bottom: -5px;
  min-width: 15px;
  margin: 0;
  padding: 0 3px;
  border: 1.5px solid var(--surface);
  border-radius: 5px;
  font-size: .56rem;
  line-height: 1.35;
}


/* ---------- Fare ile gezinme ---------- */

@media (hover: hover) and (pointer: fine) {
  .shelf-remove:hover { background: var(--danger-soft); color: var(--danger); }
  .shelf-amount .unit-select:hover { background-color: var(--blue-soft); color: var(--blue-dark); }
  .shelf-open:hover { border-color: var(--blue); background: var(--blue-soft); }
  .shelf-amount:hover:not(:focus-within) { border-color: var(--icon); }
  .shelf-pool-item:hover { border-color: color-mix(in srgb, var(--blue) 28%, var(--line)); }
  .shelf-icon-button:hover { background: var(--sunken); color: var(--text); }
  .shelf-icon-button.is-danger:hover { background: var(--danger-soft); color: var(--danger); }
  .shelf-menu-item:hover { background: var(--sunken); color: var(--text); }
  .shelf-menu-item.is-danger:hover { background: var(--danger-soft); color: var(--danger); }
  .shelf-chip:hover:not([aria-pressed="true"]) { color: var(--text); }
  .shelf-bulk:hover:not(:disabled) { border-color: var(--blue); color: var(--text); }
  .shelf-pool-item:hover .shelf-toggle:not([aria-pressed="true"]) { border-color: var(--blue); }
  .shelf-pool-item:not(.is-in):hover .shelf-mark .shelf-toggle { opacity: 1; }
  .shelf-undo-button:hover { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 6%, var(--surface)); }
}

/* ---------- Dokunmatik ekran ---------- */

@media (pointer: coarse) {
  .shelf-open { min-height: 44px; }
  .shelf-chip { min-height: 38px; padding-inline: 14px; }
  .shelf-icon-button { width: 38px; height: 38px; }
  .shelf-toggle { width: 26px; height: 26px; }
  .shelf-pool-item .shelf-mark .shelf-toggle { width: 19px; height: 19px; }
  .shelf-more { width: 32px; height: 32px; }
  .shelf-remove { width: 40px; height: 40px; }
  .shelf-amount .amount-input,
  .shelf-item .shelf-amount .amount-input { min-height: 44px; font-size: 1rem; }
  .shelf-amount .unit-select { height: 28px; }
}

/* ---------- Dar ekran ---------- */

@media (max-width: 600px) {
  .shelf-dialog { width: calc(100vw - 16px); border-radius: 16px; }
  .shelf-pool-head { padding: 8px 10px 8px 12px; }
  .shelf-tools,
  .shelf-pool-list,
  .shelf-pool-foot { padding-inline: 12px; }
  .shelf-search { min-width: 100%; }
  .shelf-chips { flex: 1; }
  .shelf-chip { flex: 1; }
  .shelf-bulk { min-width: 0; padding-inline: 10px 12px; }
  .shelf-pool-foot { flex-wrap: wrap; }
  .shelf-pool-spacer { display: none; }
  .shelf-pool-foot .text-button { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .shelf-item.is-new,
  .shelf-item.is-leaving,
  .shelf-undo,
  .shelf-dialog[open],
  .shelf-pool-item.is-popped .shelf-toggle { animation: none !important; }
  .shelf-remove,
  .shelf-open,
  .shelf-amount,
  .shelf-toggle,
  .shelf-pool-item { transition: none; }
}