/**
 * 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ı ----
   İMLEÇ: `move` — İŞLETİM SİSTEMİNİN kendi imleci (ürün sahibi kararı 2026-07-31).
   NEDEN `grab` DEĞİL: Windows imleç şemasında "açık avuç" YOKTUR; CSS `grab`/`grabbing`
   karşılığı OS'ta bulunmadığı için Chromium KENDİ görselini çizer. O görsel ince dış
   hatlı olduğundan AÇIK TEMADA soluk kalıyor ve Windows'un imleç ayarlarını da takip
   etmiyordu. `move` ise OS şemasından gelir -> normal ok kadar net, her iki temada da
   okunur, renk uydurmaya gerek kalmaz.
   ⚠️ ÖZEL İMLEÇ (cursor: url(...)) DENENDİ ve REDDEDİLDİ — buraya eklenmez. */
.mm-item {
  display: flex; align-items: center; gap: var(--ox-space-2);
  padding: 7px 8px; border-radius: var(--ox-radius-md); background: var(--ox-surface);
  cursor: move;
  border: 1px solid var(--ox-border); 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); }

/* ALT ÖĞE satırı: girintili + sol bağlantı çizgisi (ebeveyne ait olduğu görünsün).
   Sürüklenebilir ama YALNIZ kardeşleri arasında (drop() kapsamı zorlar). */
.mm-item--child {
  margin-left: var(--ox-space-6);
  border-style: dashed;
}
.mm-item--child::before {
  content: ''; position: absolute; left: calc(var(--ox-space-6) * -1 + 6px);
  width: 10px; height: 1px; background: var(--ox-border-strong);
}
.mm-item { position: relative; }
/* Yüzey rozeti: yalnız varsayılandan sapma varsa çıkar (ADR-0033). */
.mm-item__surf { flex-shrink: 0; white-space: nowrap; }
.mm-item.is-drag { opacity: 0.45; cursor: move; }
/* 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; }

/* Tutamaç: nötr renk + satırla AYNI `move` imleci (OS şeması). */
.mm-item__grip {
  display: grid; place-items: center; flex: none;
  color: var(--ox-fg-faint); cursor: move;
}
.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-md); 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; }
/* Değişiklik noktası: GÖRSEL boyut 6px kalır ama HOVER HEDEFİ 16px'e büyür
   (padding + background-clip: content-box). 6px'lik hedefte `title` ipucu pratikte
   yakalanamıyordu -> "ipucu yok" sanılıyordu. */
.mm-item__dot {
  width: 6px; height: 6px; border-radius: var(--ox-radius-full);
  background: var(--ox-primary); background-clip: content-box;
  padding: 5px; box-sizing: content-box; 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-md); 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; }
}

/* ---- Mobil satır düzeni (DataTable PWA deseni) ----
   Sorun: ad + ikon + numara + 4 aksiyon dar ekranda AYNI satıra sığmıyordu; etiket
   numara kutusunun ALTINA taşıp üst üste biniyordu. Çözüm: satırda YALNIZ ad + sıra
   (numara + ok'lar) kalır; ikincil eylemler "⋮" ile alt-sayfada açılır.
   KAPSAM: YALNIZ TELEFON (`html[data-device="phone"]`). TABLETE DOKUNULMAZ — ne dikey ne
   yatay (kullanıcı kararı 2026-07-30). Tablet bugün telefon düzenini miras alsa da
   (`mobile/tablet.css` bilinçli STUB), bu ekranın satırı tablet genişliğine SIĞIYOR;
   `:not([data-device="desktop"])` yazmak tableti de daraltır ve gereksiz gerileme olurdu.
   Cihaz sınıfı TEK KAYNAK `html[data-device]` (genişlik @media değil) — kapı 21 gereği
   yukarıdaki genişlik bloğuyla AYNI sınıf+property tekrar edilmez. */
.mm-item__more { display: none; }

/* Satır TEK SATIR kalır ve ESKİ STİL korunur:
   [vurgulu ikon] [menü adı] ......... [yukarı] [aşağı] [⋮]
   İkon GİZLENMEZ (tasarımın parçası); ad taşarsa üç noktayla kırpılır. */
html[data-device="phone"] .mm-item__lbl {
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-device="phone"] .mm-item__more { display: inline-flex; }
/* Mobil VARSAYILAN görünürden çıkanlar: sıra numarası + onay tuşu (ok'lar yeterli) ve
   ikincil eylemler (yüzey · göster/gizle · sıfırla · rozet) -> "⋮ diğer eylemler". */
html[data-device="phone"] .mm-item__no,
html[data-device="phone"] .mm-item [data-act="apply"],
html[data-device="phone"] .mm-item [data-act="surf"],
html[data-device="phone"] .mm-item [data-act="eye"],
html[data-device="phone"] .mm-item [data-act="reset"],
html[data-device="phone"] .mm-item__surf { display: none; }
html[data-device="phone"] .mm-item--child { margin-left: var(--ox-space-4); }
/* Alt-sayfa MERKEZİ DataTable desenini kullanır (ox-dt-msheet) -> burada EK STİL YOK;
   ton/ikon/tipografi tek yerden gelir (kendi panelini uydurmak sapma üretiyordu). */

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

/* Sayfaya ozgu iskelet (2026-09-06): gercek satir/bolum kabuklari + merkezi .ox-skeleton cubuklari;
   cubuk yuksekligi gercek metin ogesinin satir kutusundan gelir -> veri gelince kayma olmaz. */
.mm-row--skel { pointer-events: none; }
.mm-row--skel .mm-row__pick { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; width: 100%; }
.mm-sec--skel .mm-sec__hd { display: block; }
.mm-prev__it--skel { pointer-events: none; display: flex; align-items: center; gap: var(--ox-space-2); }
.mm-prev__it--skel .ox-skeleton--icon { width: 16px; height: 16px; min-height: 0; flex: none; }
.mm-prev__it--skel .ox-skel-fill { flex: 1; }

/* ============================================================================
   AGAC GORUNUMU — katlanabilir + gorsel hiyerarsi (2026-09-07, kullanici karari)
   TESHIS (telefon 375 olcumu): 43 oge (25 ust + 18 alt) = 3375 px = 4,2 EKRAN.
   Alt oge satiri 52 px, ust oge satiri 52 px — BIREBIR AYNI agirlik; girinti yalniz
   16 px; katlama yok. Hiyerarsiyi tasiyan tek sey kesikli cerceve kaliyordu.
   ============================================================================ */

/* --- Ac/kapa dugmesi (her cihazda; salt-okunur menude de calisir) --- */
.mm-item__tgl {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: var(--ox-radius-sm);
  background: transparent; color: var(--ox-fg-muted); cursor: pointer;
  transition: transform var(--ox-transition-fast), background-color var(--ox-transition-fast);
}
.mm-item__tgl:hover { background: var(--ox-surface-2); color: var(--ox-fg); }
.mm-item.is-collapsed .mm-item__tgl { transform: rotate(-90deg); }

/* Alt oge sayisi: ebeveynin kac cocugu oldugu KATLIYKEN de gorunsun. */
.mm-item__cnt {
  flex: none;
  min-width: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--ox-surface-2); color: var(--ox-fg-muted);
  font-size: var(--ox-text-xs); font-weight: var(--ox-weight-semibold);
  text-align: center;
}

/* --- Katlanabilir sarmalayici + DIKEY DAL CIZGISI --- */
.mm-kids { position: relative; }
.mm-kids.is-closed { display: none; }
/* Dikey omurga: ebeveynin ac/kapa okunun altindan son cocuga kadar iner.
   `bottom` degeri son cocugun ortasinda biter -> "L" donusu dogru okunur. */
.mm-kids::before {
  content: '';
  position: absolute;
  top: 0; bottom: calc(50% - 1px);
  left: var(--mm-branch, 19px);
  width: 1px;
  background: var(--ox-border-strong);
}

/* ============================================================================
   TELEFON + TABLET: alt ogeler IKINCIL agirliga iner (kullanici kapsami "mobil")
   ============================================================================ */
html:not([data-device="desktop"]) .mm-kids { padding-left: var(--ox-space-6); }
html:not([data-device="desktop"]) .mm-kids::before { left: 11px; }
/* Cocuk: kart DEGIL — cercevesiz, seffaf, daha kisa satir. Ebeveyn kart olarak
   grubun basligi gibi okunur; girinti 16 -> 24 px'e cikar (yatay dal ile birlikte). */
html:not([data-device="desktop"]) .mm-item--child {
  margin-left: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  padding-block: 3px;
}
html:not([data-device="desktop"]) .mm-item--child:hover { background: var(--ox-surface-2); }
/* Yatay dal: dikey omurgadan cocugun ikonuna uzanir. */
html:not([data-device="desktop"]) .mm-item--child::before {
  left: calc(var(--ox-space-6) * -1 + 11px);
  width: 12px;
}
html:not([data-device="desktop"]) .mm-item--child .mm-item__icon { width: 26px; height: 26px; }
html:not([data-device="desktop"]) .mm-item--child .mm-item__lbl { font-size: var(--ox-text-sm); }