/* TUR34 — MANTIKLI GRUPLAMA VE SIRALAMA (24 Nisan 2026)
   Butonlar index.html'de yeniden sıralandı; CSS default 5 satıra çıkarıldı ki
   14 item 3 sütuna bölünsün. Column-first flow sayesinde her grup bir sütunda
   alt alta dizilir:
     - Col 1 (5 item): CARİ & TİCARİ — Cari Kartlar, Cari Tipler, Grup Kodları,
                       Sevk Adresleri, Para Birimleri
     - Col 2 (5 item): STOK & İŞ AKIŞI — Stok Kartları, Lokasyonlar,
                       İş & Süreç, Karar Destek, Gantt Ayarları
     - Col 3 (4 item): SİSTEM & ARAYÜZ — Kullanıcı Tan., Email, Renk, Boyut Ayr.
*/

/* ═══════════════════════════════════════════════════════════════
   TUR32 — TANIMLAR MENÜSÜ GRID LAYOUT
   24 Nisan 2026

   Sorun: 01-13-rapor-kartlar.css içindeki
     .m-top-row .mmg { display: flex; overflow: auto; ... }
   kuralı, tanımlar menüsünü tek satırlık yatay-scrollable bir
   şerit yapıyordu. 14 buton ekranın sağına doğru kaçıyor ve
   ancak scroll ile görünüyorlardı.

   Çözüm (kullanıcı tercihi):
     - Layout akışı: column-first (soldan aşağı, dolunca sağa)
       → referans WBS diyagramına benzer blok görünüm
     - Buton boyutu: kompakt (48px min yükseklik, 120px min genişlik)
     - Sütun sayısı: 4 satır fixed → 14 item için 4 sütun oluşur.
       Dar ekranda satır sayısı artırılıp sütun sayısı düşer.

   Sadece #mm-menu altındaki .mmg etkilenir (ana tanımlar menüsü).
   Alt-menüler (renk teması vs.) eski davranışta kalır.
   ═══════════════════════════════════════════════════════════════ */

#mm-menu .mmg {
  /* Flex yerine grid, column-first akış */
  display: grid !important;
  grid-template-rows: repeat(5, minmax(48px, auto)) !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(120px, 1fr) !important;
  gap: 6px !important;

  /* Horizontal scroll ve 800px genişlik sınırını iptal */
  max-width: none !important;
  overflow: visible !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  flex: none !important;
}

/* Buton boyutu — kullanıcı tercihi: kompakt */
#mm-menu .mmb {
  min-height: 48px !important;
  min-width: 120px !important;
  padding: 8px 10px !important;
  font-size: 11px !important;
  line-height: 1.2;
  /* Çok uzun etiket varsa kırılmasın */
  white-space: normal;
}
#mm-menu .mmb span:first-child {
  font-size: 13px;
}

/* Adaptif sütun sayısı — ekran daraldıkça satır sayısı artar,
   sütun sayısı düşer. 14 item her zaman görünür.
   TUR34: Gruplar korunsun diye ara boy ekranda da column-first tutuyoruz */
@media (max-width: 1100px) {
  #mm-menu .mmg {
    grid-template-rows: repeat(7, minmax(48px, auto)) !important;
    /* 7 satır × 2 sütun = 14 slot. İlk 7 = Cari+Stok başı, sonraki 7 = İş+Sistem */
  }
}
@media (max-width: 780px) {
  #mm-menu .mmg {
    grid-template-rows: repeat(14, minmax(44px, auto)) !important;
    /* Tek sütun dikey — tüm item'lar tek sıra hâlinde, grup sıralaması korunur */
  }
}
@media (max-width: 500px) {
  #mm-menu .mmg {
    grid-template-rows: auto !important;
    grid-auto-flow: row !important;
    grid-template-columns: 1fr !important;
    /* Telefon: tek sütun dikey */
  }
}

/* m-band'in üstündeki "m-top-row" padding'ini de nötrle ki grid
   tüm kullanılabilir genişliği alsın */
#pg-master #mm-menu .m-top-row,
#pg-master .m-top-row {
  padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   TUR33 — TANIMLAR BUTONLARI: OKUNAKLI MAVİ PALET
   24 Nisan 2026

   Kaynak: Küresel renk tercih araştırmaları (YouGov 2015 - 10 ülke,
   ColorLib 2026 verisi, Joe Hallock çalışması) — %40+ oranla MAVİ
   dünyada en çok tutulan renk. Ayrıca güven/profesyonellik çağrışımı
   yaptığı için ERP "Tanımlar" paneli ile uyumlu.

   Tasarım kararları:
     - Koyu "TANIMLAR" bandı üzerinde AÇIK MAVİ kartlar → yüksek kontrast
     - Metin rengi: deep professional blue (#1e3a8a)
     - Hover'da lift + parlak mavi glow
     - Aktif (.on) durumunda: dolgun mavi arkaplan + beyaz metin
   ═══════════════════════════════════════════════════════════════ */

#mm-menu .mmb {
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%) !important;
  color: #1e40af !important;
  border: 1px solid #93c5fd !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(30, 58, 138, 0.06) !important;
  transition: background 0.15s ease, border-color 0.15s ease,
              transform 0.15s ease, box-shadow 0.15s ease !important;
}

/* İkon (ilk span) — mavi tona uyumlu */
#mm-menu .mmb span:first-child {
  filter: none;
  /* Emoji'nin kendi rengi korunur */
}

/* Metin (ikinci span) — deep blue */
#mm-menu .mmb span:nth-child(2) {
  color: #1e3a8a;
  font-weight: 600;
}

/* Hover: hafif yukarı, parlak mavi border + gölge */
#mm-menu .mmb:hover {
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-color: #3b82f6 !important;
  color: #1e3a8a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.22),
              0 0 0 3px rgba(59, 130, 246, 0.08) !important;
}

#mm-menu .mmb:hover span:nth-child(2) {
  color: #1e3a8a;
}

/* Active / basılı durumda hafif bas */
#mm-menu .mmb:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(30, 58, 138, 0.15) !important;
}

/* Seçili (aktif modül) — dolgun mavi + beyaz */
#mm-menu .mmb.on {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border-color: #1e40af !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
#mm-menu .mmb.on span:nth-child(2) {
  color: #ffffff !important;
}
#mm-menu .mmb.on:hover {
  background: linear-gradient(180deg, #2563eb 0%, #1e40af 100%) !important;
  border-color: #1e40af !important;
}

/* Focus (klavye erişilebilirliği) */
#mm-menu .mmb:focus-visible {
  outline: none;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4),
              0 4px 12px rgba(59, 130, 246, 0.22) !important;
}