/* ============================================================================
 * mobile-navbar.css — Mobil GEZİNME ÇUBUĞU (iOS "navigation bar" grameri)
 * ============================================================================
 * ⚠️ TAMAMI `lg` (1024px) ALTINA KAPSANMIŞTIR. Masaüstü etkilenmez.
 *
 * TASARIM GEREKÇESİ
 * Ölçüm (chrome-audit.js): liste sayfalarında ilk veri satırı ORTALAMA 550px'de
 * başlıyor; ekran 844px. Yeri yiyen üç şey:
 *   1. Üstte MARKA LOGOSU — kullanıcı zaten uygulamanın içinde, logo bilgi
 *      taşımıyor. iOS'ta çubuk NEREDE OLDUĞUNU yazar.
 *   2. Başlık altındaki açıklama paragrafı (ort. 95 karakter, 41px) — yerleşik
 *      uygulamalar ekranı ANLATMAZ, gösterir.
 *   3. Yan yana 3-5 eylem düğmesi 2-3 satıra yayılıyor (124-167px) — iOS'ta
 *      çubukta TEK birincil eylem durur, gerisi `⋯` menüsündedir.
 *
 * ÇÖZÜM: tek bir çubuk — [☰] [Sayfa adı] [birincil eylem] [⋯]
 * Büyük başlık altta kalır ve kaydırınca çubuğa "çöker" (iOS Large Title).
 * ========================================================================= */

@media (max-width: 1023.98px) {

  /* ── Çubuk ─────────────────────────────────────────────────────────────
     Mevcut mobil üst çubuk yeniden kullanılır; içeriği JS ile değişir. */
  /* Sayfa adı ÇUBUKTA HER ZAMAN görünür.
     DENENDİ VE GERİ ALINDI: iOS'un "büyük başlık kaydırınca çubuğa çöker"
     davranışı burada ÇALIŞMADI — iOS'ta çubuk kısa ve büyük başlık hemen
     altındadır, tek parça okunur. Bizde çubuk 56px beyaz, başlık 100px
     aşağıda gri zeminde: üstteki çubuk BOŞ ve bozuk görünüyordu. */
  .mnav-title {
    min-width: 0; flex: 1 1 auto;
    font-size: 17px; font-weight: 900; letter-spacing: -.015em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Çubukta sayfa adı varken büyük başlık TEKRARDIR — görsel olarak kaldırılır.
     DOM'dan silinmez: ekran okuyucular ve sayfa yapısı için <h1> korunur. */
  body.mnav-has-title main > div > h1,
  body.mnav-has-title main h1.mnav-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* Logo yalnız SAYFA ADI YOKKEN görünür (ana sayfa gibi) — ve orada BÜYÜK. */
  body.mnav-has-title .mnav-brand { display: none; }
  .mnav-brand img { height: 40px; max-width: 190px; }

  /* Çubuktaki eylemler */
  .mnav-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
  .mnav-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; min-width: 36px; padding: 0 10px;
    border-radius: 11px; border: 0;
    font-size: 13px; font-weight: 800; line-height: 1;
    background: transparent; color: rgb(63 63 70);
  }
  html.dark .mnav-btn { color: rgb(228 228 231); }
  .mnav-btn--primary { background: rgb(79 70 229); color: #fff; }
  .mnav-btn:active { opacity: .7; }
  .mnav-btn svg, .mnav-btn i { width: 18px; height: 18px; flex: none; }

  /* Çubuktaki düğme ASLA sarmaz ve çubuğu ele geçirmez.
     "Yeni Personel" iki satıra sarıp 56px yükseklik yapıyordu. */
  .mnav-actions .mnav-btn {
    white-space: nowrap; max-width: 42vw; overflow: hidden;
  }
  /* Dar ekranda birincil eylem SADECE İKON (iOS'ta çubuktaki ＋ gibi).
     ⚠️ YALNIZCA İKONU OLAN düğmede. `:has()` olmadan yazılmıştı ve ikonsuz
     düğmelerin metnini de gizliyordu → çubukta BOMBOŞ mavi bir dikdörtgen
     kalıyordu (/admin/school-schedule, ekran görüntüsüyle yakalandı). */
  @media (max-width: 430px) {
    .mnav-actions .mnav-btn--primary:has(svg, i) {
      padding: 0 11px; font-size: 0;
    }
    .mnav-actions .mnav-btn--primary:has(svg, i) > *:not(svg):not(i) { display: none; }
    .mnav-actions .mnav-btn--primary svg,
    .mnav-actions .mnav-btn--primary i { width: 19px; height: 19px; }
    /* İkonsuz düğme metniyle kalır ama çubuğu ele geçirmesin. */
    .mnav-actions .mnav-btn--primary:not(:has(svg, i)) {
      max-width: 38vw; font-size: 12.5px;
    }
  }

  /* Tema düğmesi mobil çubuktan ÇIKAR.
     Gerekçe: her ekranın gezinme çubuğunda durması gereken bir ayar değil;
     çubuk 6 öğeye çıkıp sayfa adına yer kalmıyordu. Kenar çubuğunda (menü)
     zaten erişilebilir. */
  body.mnav-has-title #darkToggleMobile { display: none; }

  /* ÖLÜ KURAL KALDIRILDI (kod taramasıyla bulundu):
       main h1 { font-size: 28px; … }
     Özgüllüğü (0,0,2); Tailwind Play CDN v3.4.17 `@layer` kullanmadan düz CSS
     üretiyor, dolayısıyla `.text-2xl`/`.text-xl`/`.text-3xl` (0,1,0) yükleme
     sırasından bağımsız olarak HER ZAMAN kazanıyordu. 215 <h1>'in tamamına
     yakınında böyle bir sınıf var → kural hiçbir yerde etki etmedi.
     Zaten "Large Title" tasarımı geri alındı (bkz. yukarıdaki not): başlık
     çubukta gösteriliyor, sayfadaki <h1> JS ile görsel olarak gizleniyor. */

  /* Başlık altındaki açıklama paragrafı: yerleşik uygulamada ekran ANLATILMAZ.
     Tamamen silmek bilgi kaybı olur → 2 satıra kırpılır, dokununca açılır. */
  .mnav-desc {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 12.5px; line-height: 1.45;
  }
  .mnav-desc.is-open { -webkit-line-clamp: unset; }

  /* ── Taşma menüsü (⋯) — alttan açılan yaprak ───────────────────────── */
  .mnav-sheet { position: fixed; inset: 0; z-index: 60; display: none; }
  .mnav-sheet.is-open { display: block; }
  .mnav-sheet__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .42); }
  .mnav-sheet__panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-height: 80vh; overflow-y: auto;
    background: #fff; border-radius: 22px 22px 0 0;
    padding: 10px 12px calc(14px + max(env(safe-area-inset-bottom), 0px));
    animation: mektepaSheetUp .26s cubic-bezier(.32, .72, 0, 1);
  }
  html.dark .mnav-sheet__panel { background: rgb(24 24 27); }
  .mnav-sheet__panel::before {
    content: ""; display: block; width: 38px; height: 4px;
    margin: 0 auto 10px; border-radius: 999px; background: rgb(212 212 216);
  }
  html.dark .mnav-sheet__panel::before { background: rgb(63 63 70); }

  /* Yaprağa taşınan eylemler tam genişlik satırlara dönüşür (iOS action sheet). */
  .mnav-sheet__panel > * {
    display: flex !important; align-items: center; gap: 10px;
    width: 100%; min-height: 52px; margin: 0 0 4px !important;
    padding: 0 14px !important;
    border: 0 !important; border-radius: 14px !important;
    background: transparent !important; color: inherit !important;
    font-size: 15px !important; font-weight: 700 !important;
    justify-content: flex-start !important;
    box-shadow: none !important;
  }
  .mnav-sheet__panel > *:active { background: rgb(244 244 245) !important; }
  html.dark .mnav-sheet__panel > *:active { background: rgb(39 39 42) !important; }
}