/**
 * Omnex Layout — layouts/mobile.css
 * F3 mobil kabuk katmanı (<=768px). AYRI uygulama değildir: aynı shell,
 * mobilde kenar çubuğu yerine ALT SEKME NAVİGASYONU (BottomNav.js) kullanır.
 * Kit bileşenlerine dokunmaz — onların kendi responsive kuralları geçerlidir
 * (kalıcı uyum sözleşmesi: her yeni bileşen <=640px davranışını tanımlar).
 * Safe-area disiplini: env(safe-area-inset-*) — çentikli cihazlar.
 */

/* Alt nav yüksekliği token'ı tokens.css'ten gelir (--ox-bottomnav-h). */

/* PWA-only öğeler: temel gizli, aşağıdaki media bloğu açar.
   DİKKAT: bu satırlar media bloğundan ÖNCE kalmalı — sonra yazılırsa
   aynı özgüllükte media kuralını ezer (2026-07-12'de canlıda görüldü). */
.ox-bottomnav { display: none; }
.ox-topbar__hamburger { display: none; }
.ox-topbar__qt { display: none; }
/* .ox-topbar__msub temel gizlemesi ve stili topbar.css'te yaşar
   (dar-masaüstü bandı da aynı şeridi kullanır) */

/* PWA KABUK BANDI: telefon + telefon-yatay + tablet (dikey/yatay).
   İki kapı: (a) genişlik <=1024px; (b) DOKUNMATİK cihaz (pointer: coarse)
   <=1400px — iPad Pro yatay (1366px) gibi geniş tabletler de app kabuğu
   alır, aynı genişlikteki fare'li PC'ler ALMAZ. Bileşen yoğunluğu:
   telefon css/mobile/* (<=768), tablet css/mobile/tablet.css. */
@media (max-width: 1024px), (pointer: coarse) and (max-width: 1400px) {

  /* ---------- Kabuk: kenar çubuğu gider, tek kolon ---------- */

  .ox-shell { grid-template-columns: 1fr !important; }
  .ox-sidebar { display: none !important; }
  #oxSidebarToggle { display: none !important; }
  .ox-topnav { display: none !important; }
  .ox-footer { display: none; }
  .ox-progress { display: none; } /* sabit konumu iki satırlı header'la uyumsuz */

  /* İçerik alt navın altında kalmasın */
  .ox-content {
    padding-bottom: calc(var(--ox-bottomnav-h) + env(safe-area-inset-bottom) + var(--ox-space-4));
  }

  /* ---------- Topbar: app başlığı — hamburger + LOGO + tema/hızlı/yardım/zil ---------- */

  #oxNavBack, #oxNavFwd, #oxLayoutQuick, #oxFullscreen { display: none !important; }

  /* Arama: ikon-only (komut paletini açar) */
  #oxSearchBtn span, #oxSearchBtn kbd { display: none; }
  .ox-topbar__search {
    border: 0;
    background: transparent;
    padding: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ox-radius);
    color: inherit;
    cursor: pointer;
  }
  .ox-topbar__search:active { background: var(--ox-surface-2); }
  .ox-topbar__search .ox-icon { width: 17px; height: 17px; }
  .ox-topbar__profile { display: none !important; }  /* avatar alt barda (en sağ) */
  .ox-compsel { display: none; }   /* aktif firma profil alt-sayfasında görünür */
  .ox-langsel { display: none; }   /* dil, Menü/Profil alt-sayfasında */

  .ox-topbar__hamburger { display: inline-flex !important; }
  .ox-topbar__qt { display: inline-flex !important; }   /* hızlı işlemler */
  .ox-topbar__brand { display: inline-flex !important; }
  .ox-topbar__brand-name { display: none; }  /* yalnız logo işareti */
  .ox-topbar__title { display: none; }       /* sayfa bilgisi alt şeritte */

  /* İki satırlı header: ana satır + alt şerit (ileri/geri + sayfa bilgisi).
     Yapışkan: kaydırırken hep üstte görünür (PWA sözleşmesi). */
  .ox-topbar {
    height: auto;
    flex-wrap: wrap;
    row-gap: 0;
    position: sticky;
    top: 0;
    z-index: var(--ox-z-nav, 20);
  }
  /* Şerit stili topbar.css'te; bu bant yalnız açar (dokunmatik 1281-1400
     dahil — topbar.css'in 1280 bloğu oraya erişemez) */
  .ox-topbar__msub { display: flex; }

  /* ---------- Alt sekme navigasyonu ---------- */

  .ox-bottomnav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--ox-z-nav, 20);
    height: calc(var(--ox-bottomnav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--ox-surface);
    border-top: 1px solid var(--ox-border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
  }

  .ox-bottomnav__tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    background: transparent;
    font-family: var(--ox-font-sans);
    font-size: 10px;
    font-weight: var(--ox-weight-medium);
    color: var(--ox-fg-faint);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--ox-transition-fast);
    min-width: 0;
  }
  .ox-bottomnav__tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ox-bottomnav__tab.is-active { color: var(--ox-primary); }
  .ox-bottomnav__tab:active .ox-icon { transform: scale(0.9); }
  .ox-bottomnav__tab .ox-icon { transition: transform var(--ox-transition-fast); }

  /* Profil sekmesi: avatar (EN SAĞDA — PWA sözleşmesi) */
  .ox-bottomnav__avatar {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--ox-radius-full);
    background: var(--ox-primary);
    color: var(--ox-primary-fg, #fff);
    font-size: 10px;
    font-weight: var(--ox-weight-semibold);
  }

  /* Profil alt-sayfası başlık bloğu */
  .ox-mobprofile {
    display: flex;
    align-items: center;
    gap: var(--ox-space-3);
    padding: var(--ox-space-2) var(--ox-space-2) var(--ox-space-4);
    border-bottom: 1px solid var(--ox-border);
    margin-bottom: var(--ox-space-2);
  }
  .ox-mobprofile__avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--ox-radius-full);
    background: linear-gradient(135deg, var(--ox-primary), var(--ox-primary-active));
    color: #fff;
    font-weight: var(--ox-weight-semibold);
  }
  .ox-mobprofile__meta { display: flex; flex-direction: column; }
  .ox-mobprofile__meta small { color: var(--ox-fg-muted); }

  /* ---------- "Menü" çekmecesi (alt sayfa) ---------- */

  .ox-mobmenu-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--ox-z-drawer, 40);
    background: var(--ox-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ox-transition);
  }
  .ox-mobmenu-backdrop.is-open { opacity: 1; pointer-events: auto; }

  .ox-mobmenu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--ox-z-drawer, 40) + 1);
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    background: var(--ox-surface);
    border-radius: var(--ox-radius-lg) var(--ox-radius-lg) 0 0;
    border: 1px solid var(--ox-border);
    border-bottom: 0;
    box-shadow: var(--ox-shadow-overlay);
    transform: translateY(100%);
    transition: transform var(--ox-transition);
  }
  .ox-mobmenu.is-open { transform: translateY(0); }

  .ox-mobmenu__grip {
    width: 36px;
    height: 4px;
    margin: 10px auto 4px;
    border-radius: 2px;
    background: var(--ox-border-strong);
    flex: none;
  }
  .ox-mobmenu__body {
    overflow-y: auto;
    padding: var(--ox-space-2) var(--ox-space-4)
      calc(var(--ox-space-6) + env(safe-area-inset-bottom));
  }
  .ox-mobmenu__section {
    padding: var(--ox-space-4) var(--ox-space-2) 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);
  }
  .ox-mobmenu__item {
    display: flex;
    align-items: center;
    gap: var(--ox-space-3);
    width: 100%;
    padding: 12px var(--ox-space-3);
    border: 0;
    border-radius: var(--ox-radius);
    background: transparent;
    font: inherit;
    font-size: var(--ox-text-base);
    color: var(--ox-fg);
    text-align: left;
    cursor: pointer;
  }
  .ox-mobmenu__item:active { background: var(--ox-surface-2); }
  .ox-mobmenu__item.is-active { color: var(--ox-primary); background: var(--ox-primary-subtle); }
  .ox-mobmenu__item .ox-icon { color: var(--ox-fg-muted); flex: none; }
  .ox-mobmenu__item.is-active .ox-icon { color: var(--ox-primary); }
  .ox-mobmenu__item--child { padding-left: calc(var(--ox-space-3) + 27px); }

  .ox-mobmenu__quick {
    display: flex;
    gap: var(--ox-space-2);
    padding: var(--ox-space-3) var(--ox-space-2) 0;
    border-top: 1px solid var(--ox-border);
    margin-top: var(--ox-space-3);
  }

  /* ---------- Yüzen öğeler alt navın üstüne ---------- */

  .ox-tp-fab {
    bottom: calc(var(--ox-bottomnav-h) + env(safe-area-inset-bottom) + 72px) !important;
  }
  .ox-qt-fab {
    bottom: calc(var(--ox-bottomnav-h) + env(safe-area-inset-bottom) + 124px) !important;
  }

  /* PWA kurulum pili */
  .ox-pwa-pill {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--ox-bottomnav-h) + env(safe-area-inset-bottom) + var(--ox-space-4));
    z-index: var(--ox-z-sticky, 30);
  }
}

/* Kurulum pili (tüm ekranlar; masaüstünde sağ altta) */
.ox-pwa-pill {
  position: fixed;
  right: var(--ox-space-6);
  bottom: var(--ox-space-6);
  z-index: var(--ox-z-sticky, 30);
  display: inline-flex;
  align-items: center;
  gap: var(--ox-space-2);
  padding: 10px 16px;
  border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-full);
  background: var(--ox-surface);
  color: var(--ox-fg);
  font-family: var(--ox-font-sans);
  font-size: var(--ox-text-sm);
  font-weight: var(--ox-weight-medium);
  box-shadow: var(--ox-shadow-lg);
  cursor: pointer;
}
.ox-pwa-pill:hover { background: var(--ox-surface-2); }
.ox-pwa-pill .ox-pwa-pill__x {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--ox-radius-full);
  color: var(--ox-fg-faint);
}
.ox-pwa-pill .ox-pwa-pill__x:hover { background: var(--ox-surface-2); color: var(--ox-fg); }