/**
 * Omnex Layout — layouts/mobile.css
 * PWA/mobil kabuk katmanı. AYRI uygulama DEĞİLDİR: aynı shell, mobilde kenar çubuğu
 * yerine ALT SEKME NAVİGASYONU (BottomNav.js) kullanır.
 * KAPI artık GENİŞLİK değil CİHAZ: `html:not([data-device="desktop"])` = telefon + tablet
 * (dokunmatik). Tek kaynak core/Device.js + index.html inline classifier. Aynı genişlikteki
 * fare'li PC masaüstü kalır; iPad/geniş tablet app kabuğu alır.
 * Bileşenlerin kendi mobil kuralları css/mobile/* içindedir.
 * 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: masaüstü varsayılanı GİZLİ; aşağıdaki cihaz kuralları açar.
   Cihaz seçicisi (0,2,x) taban seçiciyi (0,1,x) özgüllükle ezer — sıra hassasiyeti yok. */
.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 (dokunmatik: telefon + tablet) =====================
   Bileşen yoğunluğu: telefon css/mobile/* + tablet css/mobile/tablet.css. */

/* ---------- Kabuk: kenar çubuğu gider, tek kolon ---------- */
html:not([data-device="desktop"]) .ox-shell { grid-template-columns: 1fr !important; }
html:not([data-device="desktop"]) .ox-sidebar { display: none !important; }
html:not([data-device="desktop"]) #oxSidebarToggle { display: none !important; }
html:not([data-device="desktop"]) .ox-topnav { display: none !important; }
html:not([data-device="desktop"]) .ox-footer { display: none; }
html:not([data-device="desktop"]) .ox-progress { display: none; } /* sabit konumu iki satırlı header'la uyumsuz */

/* İçerik alt navın altında kalmasın */
html:not([data-device="desktop"]) .ox-content {
  padding-bottom: calc(var(--ox-bottomnav-h) + env(safe-area-inset-bottom) + var(--ox-space-4));
}

/* ---------- Topbar: app başlığı — hamburger + LOGO + arama/firma/şube/dil/zil ----------
   TEK SATIR sözleşmesi (kullanıcı kararı 2026-09-06): header'da yalnız SEÇİM ve BİLDİRİM
   kalır. Tema özelleştirici ve Hızlı Araçlar PROFİL alt-sayfasına taşındı, yardım tümden
   kalktı — üçü de header'ı ikinci satıra taşırıyordu. Telefon ve tablet AYNI davranır. */
html:not([data-device="desktop"]) #oxNavBack,
html:not([data-device="desktop"]) #oxNavFwd,
html:not([data-device="desktop"]) #oxLayoutQuick,
html:not([data-device="desktop"]) #oxFullscreen,
html:not([data-device="desktop"]) #oxThemeQuick,
html:not([data-device="desktop"]) #oxQtBtn,
html:not([data-device="desktop"]) #oxHelpBtn { display: none !important; }

/* Arama: ikon-only (komut paletini açar) */
html:not([data-device="desktop"]) #oxSearchBtn span,
html:not([data-device="desktop"]) #oxSearchBtn kbd { display: none; }
html:not([data-device="desktop"]) .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-md);
  color: inherit;
  cursor: pointer;
}
html:not([data-device="desktop"]) .ox-topbar__search:active { background: var(--ox-surface-2); }
html:not([data-device="desktop"]) .ox-topbar__search .ox-icon { width: 17px; height: 17px; }
/* Profil SARMALAYICISI tümden gizli (yalnız buton değil): buton gizliyken boş .ox-dropdown
   help'ten sonra hayalet flex-gap bırakıyordu → "yardım ikonu sağında bir ikon boşluk". Avatar alt barda. */
html:not([data-device="desktop"]) .ox-topbar__profwrap { display: none !important; }
html:not([data-device="desktop"]) .ox-topbar__profile { display: none !important; }  /* avatar alt barda (en sağ) */
/* ---- Seçiciler: header'da İKON-ONLY açılır menü (firma · şube · dil) ----
   Üçü de metin taşıyınca header ikinci satıra taşıyordu. Tetikleyicide yalnız
   görsel işaret kalır (logo · küre · bayrak); menü içeriği DEĞİŞMEZ, tam adlar
   orada okunur. Firma seçici zaten yalnız platform süperadmin'de dropdown olur
   (CompanySelector.js: canSwitch) — statik hâli gizli kalır. */
html:not([data-device="desktop"]) .ox-compsel--static { display: none; }   /* aktif firma profil alt-sayfasında */
/* DİKKAT: gizleme YALNIZ TETİKLEYİCİ İÇİNDE. `.ox-org-context-name` aynı sınıfla açılır
   menünün HER SATIRINDA da kullanılıyor (OrganizationContext.js satır 37/40) — sınıfa göre
   global gizlemek menüyü ikon yığınına çeviriyordu (2026-09-06 kullanıcı raporu). */
html:not([data-device="desktop"]) .ox-compsel__trigger .ox-compsel__label,
html:not([data-device="desktop"]) .ox-compsel__trigger > svg:last-child,
html:not([data-device="desktop"]) .ox-org-context-select .ox-org-context-name,
html:not([data-device="desktop"]) .ox-org-context-select > svg:last-child,
html:not([data-device="desktop"]) .ox-langsel__btn .ox-langsel__code { display: none !important; }
html:not([data-device="desktop"]) .ox-compsel__trigger,
html:not([data-device="desktop"]) .ox-org-context-select,
html:not([data-device="desktop"]) .ox-langsel__btn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  gap: 0;
  justify-content: center;
}

html:not([data-device="desktop"]) .ox-topbar__hamburger { display: inline-flex !important; }
html:not([data-device="desktop"]) .ox-topbar__brand { display: inline-flex !important; }
html:not([data-device="desktop"]) .ox-topbar__brand-name { display: none; }  /* yalnız logo işareti */
html:not([data-device="desktop"]) .ox-topbar__title { display: none; }       /* sayfa bilgisi alt şeritte */

/* TEK SATIR header: sol grup tamamen gizli (içindekiler zaten gizliydi ama
   kapladığı alan logoyu ortalayıp ikonları alta itiyordu — telefon raporu);
   logo hamburger'in hemen sağında, ikon grubu aynı satırın sağında, sarmaz. */
html:not([data-device="desktop"]) .ox-topbar__left { display: none !important; }
html:not([data-device="desktop"]) .ox-topbar__brand { margin-right: auto; }
html:not([data-device="desktop"]) .ox-topbar__right { flex-wrap: nowrap; flex: none; gap: 2px; }
/* İkon kutuları 44 -> 36 px: 5 ikon + hamburger + logo tek satırda kalsın (375 px tabanı). */
html:not([data-device="desktop"]) .ox-topbar__right > .ox-btn--icon,
html:not([data-device="desktop"]) .ox-topbar__right .ox-notif__bell {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
}
html:not([data-device="desktop"]) .ox-topbar > .ox-topbar__hamburger,
html:not([data-device="desktop"]) .ox-topbar > .ox-topbar__brand,
html:not([data-device="desktop"]) .ox-topbar__right { min-height: var(--ox-topbar-h); align-items: center; }

/* İ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). */
html:not([data-device="desktop"]) .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 katman yalnız açar (cihaz-tabanlı — dar-masaüstü
   1280 bloğu ile karışmaz) */
html:not([data-device="desktop"]) .ox-topbar__msub { display: flex; }

/* ---------- Alt sekme navigasyonu ---------- */
html:not([data-device="desktop"]) .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);
}

html:not([data-device="desktop"]) .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;
}
html:not([data-device="desktop"]) .ox-bottomnav__tab span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:not([data-device="desktop"]) .ox-bottomnav__tab.is-active { color: var(--ox-primary); }
html:not([data-device="desktop"]) .ox-bottomnav__tab:active .ox-icon { transform: scale(0.9); }
html:not([data-device="desktop"]) .ox-bottomnav__tab .ox-icon { transition: transform var(--ox-transition-fast); }

/* Profil sekmesi: avatar (EN SAĞDA — PWA sözleşmesi) */
html:not([data-device="desktop"]) .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 */
html:not([data-device="desktop"]) .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);
}
html:not([data-device="desktop"]) .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);
}
html:not([data-device="desktop"]) .ox-mobprofile__meta { display: flex; flex-direction: column; }
html:not([data-device="desktop"]) .ox-mobprofile__meta small { color: var(--ox-fg-muted); }

/* ---------- "Menü" çekmecesi (alt sayfa) ---------- */
html:not([data-device="desktop"]) .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);
}
html:not([data-device="desktop"]) .ox-mobmenu-backdrop.is-open { opacity: 1; pointer-events: auto; }

html:not([data-device="desktop"]) .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);
}
html:not([data-device="desktop"]) .ox-mobmenu.is-open { transform: translateY(0); }

/* Bildirim menüsü: zil ikonunun altında dengeli konum (sola yapışma
   düzeltmesi) — bir ikon genişliği sağa kayar, ekrandan taşmaz */
html:not([data-device="desktop"]) .ox-notif .ox-dropdown__menu--right {
  right: -44px;
  width: min(320px, calc(100vw - 16px));
}

/* PTR izolasyonu: sayfa kaydırma/yenileme jestleri alt-sayfaya karışmaz */
html:not([data-device="desktop"]) .ox-mobmenu { touch-action: none; overscroll-behavior: contain; }
html:not([data-device="desktop"]) .ox-mobmenu__body { touch-action: pan-y; overscroll-behavior: contain; }

html:not([data-device="desktop"]) .ox-mobmenu__grip {
  width: 36px;
  height: 4px;
  margin: 10px auto 4px;
  border-radius: 2px;
  background: var(--ox-border-strong);
  flex: none;
}
html:not([data-device="desktop"]) .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));
}
html:not([data-device="desktop"]) .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);
}
html:not([data-device="desktop"]) .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-md);
  background: transparent;
  font: inherit;
  font-size: var(--ox-text-base);
  color: var(--ox-fg);
  text-align: left;
  cursor: pointer;
}
html:not([data-device="desktop"]) .ox-mobmenu__item:active { background: var(--ox-surface-2); }
html:not([data-device="desktop"]) .ox-mobmenu__item.is-active { color: var(--ox-primary); background: var(--ox-primary-subtle); }
html:not([data-device="desktop"]) .ox-mobmenu__item .ox-icon { color: var(--ox-fg-muted); flex: none; }
html:not([data-device="desktop"]) .ox-mobmenu__item.is-active .ox-icon { color: var(--ox-primary); }
html:not([data-device="desktop"]) .ox-mobmenu__item--child { padding-left: calc(var(--ox-space-3) + 27px); }

/* Alt-menü AKORDEON (PWA cila): ebeveyn caret + katlanır alt-liste (varsayılan kapalı) */
html:not([data-device="desktop"]) .ox-mobmenu__group { display: flex; flex-direction: column; }
html:not([data-device="desktop"]) .ox-mobmenu__item--parent .ox-mobmenu__label { flex: 1 1 auto; }
html:not([data-device="desktop"]) .ox-mobmenu__caret { flex: none; display: inline-flex; color: var(--ox-fg-faint); transition: transform 0.22s ease; }
html:not([data-device="desktop"]) .ox-mobmenu__group.is-open > .ox-mobmenu__item--parent .ox-mobmenu__caret { transform: rotate(180deg); }
html:not([data-device="desktop"]) .ox-mobmenu__sub { max-height: 0; overflow: hidden; transition: max-height 0.24s ease; }
html:not([data-device="desktop"]) .ox-mobmenu__group.is-open > .ox-mobmenu__sub { max-height: 60vh; }

html:not([data-device="desktop"]) .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 ---------- */
/* Sağ duvar FAB'ları PWA'da YOK — görünüm özelleştirici ve Hızlı Araçlar PROFİL alt-sayfasında
   (2026-09-06: header'dan kaldırıldı, bkz. yukarıdaki TEK SATIR sözleşmesi). */
html:not([data-device="desktop"]) .ox-tp-fab,
html:not([data-device="desktop"]) .ox-qt-fab { display: none !important; }

/* PWA kurulum pili (dokunmatik: alt navın üstünde) */
html:not([data-device="desktop"]) .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: masaüstünde İÇERİK ALANINDA (.ox-main) ortalı, footer üstünde. Pwa.js pili
   .ox-main'e (position:relative) iliştirir -> sidebar açık/kapalı fark etmeksizin içerik
   merkezinde durur. Mobil kural (aşağıda) fixed'e çevirir + alt-nav üstüne alır. */
.ox-pwa-pill {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--ox-footer-h, 32px) + var(--ox-space-2));
  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); }