/**
 * Omnex Pages — pages/menu-manager.css (ADR-0009 / MN-4)
 * Menü Yöneticisi: İSİMLİ MENÜ listesi (oluştur/kopyala/ata/sil) + sürükle-sırala
 * ağaç + canlı önizleme. ADR-0008'in "kapsam seçici" bloğu (.mm-scope*) KALDIRILDI;
 * yerine .mm-menus/.mm-list geldi (menü artık bir NESNE, kapsam adresi değil).
 * Tümü --ox-* token'ları üstünde (tema/dark-light adaptif); mobil <=768px tek kolon.
 */

/* ---- Sol grid: menüler ---- */
.mm-menus { position: sticky; top: var(--ox-space-4); }
.mm-menus__empty {
  margin: var(--ox-space-3) 0 0; font-size: var(--ox-text-xs);
  color: var(--ox-fg-muted); line-height: 1.5;
}
/* "Yeni Menü" listenin BAŞINDA, tam genişlik: oluşturma listenin bağlamında. */
.mm-new { width: 100%; justify-content: center; margin-bottom: var(--ox-space-3); }
.mm-list { display: flex; flex-direction: column; gap: var(--ox-space-2); }

/* Satır = seçilebilir menü. DİKEY yığın (ürün sahibi: "üçüncü satır gibi yap,
   birbirine çakışmasın"): 1) ad  2) hedef rozeti  3) aksiyonlar.
   Yatay dizilimde 250px kolonda ikonlar adın ve rozetin üstüne biniyordu. */
.mm-row {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: var(--ox-space-2) var(--ox-space-3); border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-md); background: var(--ox-surface);
  transition: border-color .15s, background .15s;
}
.mm-row:hover { border-color: var(--ox-border-strong); }
.mm-row.is-active {
  border-color: var(--ox-accent);
  background: color-mix(in srgb, var(--ox-accent) 7%, var(--ox-surface));
  box-shadow: inset 3px 0 0 var(--ox-accent);
}
.mm-row__pick {
  min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit;
}
.mm-row__name {
  max-width: 100%; font-size: var(--ox-text-sm); font-weight: var(--ox-weight-semibold);
  color: var(--ox-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Hedef = menünün KİMLİĞİ -> tek rozet (kaldırılabilir çip değil). */
.mm-row__tgt { display: flex; max-width: 100%; }
.mm-row__tgt .ox-badge { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 3. satır: ayrı, ayırıcı çizgiyle. Hover'da gizlemiyoruz -> dokunmatikte de erişilir
   ve satır yüksekliği zıplamaz. */
.mm-row__acts {
  display: flex; align-items: center; justify-content: flex-end; gap: 2px;
  padding-top: 5px; border-top: 1px solid var(--ox-border);
}
.mm-list__hint {
  display: flex; align-items: flex-start; gap: 6px; margin: var(--ox-space-3) var(--ox-space-4) var(--ox-space-4);
  font-size: var(--ox-text-xs); color: var(--ox-fg-faint); line-height: 1.5;
}
.mm-list__hint svg { flex: none; margin-top: 2px; }

/* Platform şablonu = salt-okunur uyarısı */
.mm-ro {
  display: flex; align-items: center; gap: 6px; margin: 0 0 var(--ox-space-3);
  padding: var(--ox-space-2) var(--ox-space-3); border-radius: var(--ox-radius-sm);
  background: color-mix(in srgb, var(--ox-info) 10%, var(--ox-surface));
  color: var(--ox-info); font-size: var(--ox-text-xs);
}
.mm-ro svg { flex: none; }

/* ---- ÜÇ kolon: menüler | ağaç | önizleme (ürün sahibi kararı) ---- */
.mm-grid {
  display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px;
  gap: var(--ox-space-4); align-items: start;
}
/* Ara genişlikte önce ÖNİZLEME feda edilir (altına iner), menü listesi kalır:
   düzenleme için liste zorunlu, önizleme yardımcıdır. */
@media (max-width: 1200px) {
  .mm-grid { grid-template-columns: 230px minmax(0, 1fr); }
  .mm-side { grid-column: 1 / -1; position: static; }
}
.mm-tree__hint { font-size: var(--ox-text-xs); color: var(--ox-fg-faint); }
.mm-side { position: sticky; top: var(--ox-space-4); }
/* Önizleme gözü seçicisi: KENDİ satırında (başlıkla aynı satırda select kırpılıyordu). */
.mm-side__as {
  display: flex; align-items: center; gap: var(--ox-space-2); flex-wrap: wrap;
  padding: var(--ox-space-2) var(--ox-space-4);
  border-bottom: 1px solid var(--ox-border);
}
.mm-side__as label { font-size: var(--ox-text-xs); color: var(--ox-fg-faint); flex: none; }
.mm-side__as .ox-select { flex: 1 1 auto; min-width: 0; }
/* Hangi gözle bakıldığı AÇIKÇA yazılır -> önizleme sessizce yanıltmasın. */
.mm-side__eff {
  flex: 1 1 100%; font-size: var(--ox-text-xs); color: var(--ox-fg-muted); line-height: 1.45;
}

/* ---- Bölüm ---- */
.mm-sec + .mm-sec { margin-top: var(--ox-space-4); }
.mm-sec__hd {
  display: flex; align-items: center; gap: 7px; padding: 0 2px var(--ox-space-2);
  font-size: var(--ox-text-xs); font-weight: var(--ox-weight-semibold);
  letter-spacing: var(--ox-tracking-label); text-transform: uppercase; color: var(--ox-fg-faint);
}
.mm-sec__body {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px dashed var(--ox-border); border-radius: var(--ox-radius-md); padding: 6px;
  min-height: 44px; transition: border-color var(--ox-transition-fast), background-color var(--ox-transition-fast);
}

/* ---- Öğe satırı ---- */
.mm-item {
  display: flex; align-items: center; gap: var(--ox-space-2);
  padding: 7px 8px; border-radius: var(--ox-radius); background: var(--ox-surface);
  border: 1px solid var(--ox-border); cursor: grab; user-select: none;
  transition: background-color var(--ox-transition-fast), border-color var(--ox-transition-fast),
    opacity var(--ox-transition-fast), transform var(--ox-transition-fast);
}
.mm-item:hover { border-color: var(--ox-border-strong); background: var(--ox-surface-2); }
.mm-item.is-drag { opacity: 0.45; cursor: grabbing; }
/* Sürüklerken NEREYE düşeceği belli olsun: imlecin bulunduğu yarıya göre
   satırın üst ya da alt kenarında kalın ekleme çizgisi. */
.mm-item.is-over-top { box-shadow: 0 -3px 0 0 var(--ox-primary); border-color: var(--ox-primary); }
.mm-item.is-over-bottom { box-shadow: 0 3px 0 0 var(--ox-primary); border-color: var(--ox-primary); }

/* Sıra kontrolleri: numara + uygula + ok tuşları (drag'e mecbur kalma) */
.mm-item__ord { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.mm-item__no {
  width: 46px; height: 26px; padding: 0 4px; text-align: center;
  font-size: var(--ox-text-xs); font-variant-numeric: tabular-nums;
  color: var(--ox-fg); background: var(--ox-surface-2);
  border: 1px solid var(--ox-border); border-radius: var(--ox-radius-sm);
}
.mm-item__no:focus-visible { outline: none; box-shadow: var(--ox-focus-ring); border-color: var(--ox-primary); }
.mm-item__ob {
  display: grid; place-items: center; width: 24px; height: 26px; cursor: pointer;
  color: var(--ox-fg-muted); background: transparent;
  border: 1px solid transparent; border-radius: var(--ox-radius-sm);
  transition: color var(--ox-transition-fast), background-color var(--ox-transition-fast);
}
.mm-item__ob:hover:not(:disabled) { color: var(--ox-primary); background: var(--ox-primary-subtle); }
.mm-item__ob:disabled { opacity: 0.28; cursor: default; }
.mm-item__ob:focus-visible { outline: none; box-shadow: var(--ox-focus-ring); }
.mm-item.is-touched { border-left: 3px solid var(--ox-primary); }
.mm-item.is-hidden { opacity: 0.55; }
.mm-item.is-hidden .mm-item__lbl { text-decoration: line-through; }

.mm-item__grip { display: grid; place-items: center; color: var(--ox-fg-faint); cursor: grab; flex: none; }
.mm-item__icon {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border: 1px solid var(--ox-border); border-radius: var(--ox-radius); background: var(--ox-surface-2);
  color: var(--ox-accent); cursor: pointer;
  transition: border-color var(--ox-transition-fast), background-color var(--ox-transition-fast);
}
.mm-item__icon:hover { border-color: var(--ox-primary); background: var(--ox-primary-subtle); }
.mm-item__icon:focus-visible { outline: none; box-shadow: var(--ox-focus-ring); }
.mm-item__lbl { font-size: var(--ox-text-sm); font-weight: var(--ox-weight-medium); color: var(--ox-fg); min-width: 0; }
.mm-item__hid { flex: none; }
.mm-item__dot { width: 6px; height: 6px; border-radius: var(--ox-radius-full); background: var(--ox-primary); flex: none; }
.mm-item__sp { flex: 1 1 auto; }
.mm-item__rst:disabled { opacity: 0.3; cursor: default; }

/* ---- Önizleme (mini sidebar) ---- */
.mm-prev {
  border: 1px solid var(--ox-border); border-radius: var(--ox-radius-md);
  background: var(--ox-bg); padding: var(--ox-space-2); max-height: 420px; overflow: auto;
}
.mm-prev__sec {
  font-size: 10px; font-weight: var(--ox-weight-semibold); letter-spacing: var(--ox-tracking-label);
  text-transform: uppercase; color: var(--ox-fg-faint); padding: var(--ox-space-2) 6px 4px;
}
.mm-prev__it {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--ox-radius-sm);
  font-size: var(--ox-text-sm); color: var(--ox-fg);
}
.mm-prev__it:hover { background: var(--ox-surface-2); }
.mm-prev__it svg { flex: none; color: var(--ox-fg-muted); }

.mm-note {
  display: flex; align-items: flex-start; gap: 6px; margin: var(--ox-space-3) 0 0;
  font-size: var(--ox-text-xs); line-height: 1.45; color: var(--ox-fg-faint);
}
.mm-note svg { flex: none; margin-top: 2px; }

/* ---- İkon seçici modal ---- */
.mm-iconmodal { max-width: 520px; }
.mm-iconsearch { margin-bottom: var(--ox-space-3); }
.mm-icongrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px;
  max-height: 320px; overflow: auto;
}
.mm-icongrid__b {
  display: grid; place-items: center; height: 44px; cursor: pointer;
  border: 1px solid var(--ox-border); border-radius: var(--ox-radius); background: var(--ox-surface);
  color: var(--ox-fg); transition: border-color var(--ox-transition-fast), background-color var(--ox-transition-fast);
}
.mm-icongrid__b:hover { border-color: var(--ox-primary); background: var(--ox-primary-subtle); color: var(--ox-primary); }
.mm-icongrid__b:focus-visible { outline: none; box-shadow: var(--ox-focus-ring); }

/* ---- Mobil: tek kolon, önizleme altta (sticky kapalı) ---- */
@media (max-width: 768px) {
  .mm-grid { grid-template-columns: 1fr; }
  .mm-side { position: static; }
  .mm-menus { position: static; }
  .mm-tree__hint { display: none; }
  .mm-item__grip { display: none; }          /* mobilde sürükleme yok -> tutamaç gizli */
  .mm-prev { max-height: 260px; }
  /* Dokunmatikte hover yok -> satır aksiyonları HEP görünür. */
  .mm-row__acts { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-item { transition: none; }
}