/* ===========================================================================
   Josex Panel — mobil uyumluluk katmanı
   theme.css'ten SONRA yüklenir. theme.css içinde birbirini ezen birkaç
   katman olduğu için buradaki kurallar bilinçli olarak !important kullanır.
   =========================================================================== */

/* --- 1. Katman/z-index düzeni ------------------------------------------------
   theme.css: .bottomnav z-index:120, .app-footer z-index:115, .modal-back:100
   Bu yüzden modal, alt navigasyon ve footer'ın ALTINDA kalıyordu; modalın en
   altındaki "Oluştur" butonu tıklanamıyordu. Modal artık en üstte.            */
.modal-back {
  z-index: 1000 !important;
  align-items: center;
  overscroll-behavior: contain;
}
.toast-stack { z-index: 1200 !important; }
.progress-stack { z-index: 900 !important; }

/* --- 2. Ortak dokunma hedefi / taşma korumaları ---------------------------- */
img, video, canvas { max-width: 100%; }
.card, .stat-tile, .modal { min-width: 0; }
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.table-scroll > .table { min-width: 560px; }

@media (max-width: 900px) {

  :root {
    --nav-h: 56px;
    --footer-h: 32px;
    --safe-b: env(safe-area-inset-bottom, 0px);
  }

  /* --- 3. YAN MENÜ (hamburger) ---------------------------------------------
     Asıl hata: .bottomnav üzerinde `backdrop-filter: blur(16px)` +
     `overflow: hidden` vardı. backdrop-filter, position:fixed çocuklar için
     yeni bir "containing block" yaratır — bu yüzden menü paneli 56px'lik
     çubuğun içine hapsolup kırpılıyor, ekranda hiç görünmüyordu.            */
  .bottomnav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    overflow: visible !important;
    contain: none !important;
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--footer-h) + var(--safe-b)) !important;
    width: auto !important;
    height: var(--nav-h) !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .16) !important;
  }

  .bottomnav-links {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(280px, 86vw) !important;
    max-width: 86vw !important;
    height: 100% !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 10px calc(var(--safe-b) + var(--footer-h) + 18px) !important;
    background: #050505 !important;
    border-right: 1px solid rgba(255, 255, 255, .18) !important;
    box-shadow: 12px 0 44px rgba(0, 0, 0, .7) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    transform: translateX(-102%) !important;
    transition: transform 280ms cubic-bezier(.16, 1, .3, 1) !important;
    pointer-events: none;
    z-index: 5 !important;
  }

  body.sidebar-open .bottomnav-links {
    transform: translateX(0) !important;
    pointer-events: auto;
  }

  .mobile-overlay {
    display: block !important;
    z-index: 90 !important;
    background: rgba(0,0,0,.55) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.sidebar-open { overflow: hidden; }

  .nav-item {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 13.5px !important;
    justify-content: flex-start !important;
  }
  .nav-item.active::after { display: none !important; }
  .nav-svg { width: 18px !important; height: 18px !important; }
  .nav-sep { width: 100% !important; height: 1px !important; margin: 6px 0 !important; }

  /* --- 4. Alt çubuk (hamburger + marka + sağ aksiyonlar) ------------------- */
  .bottomnav-bar {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 0 10px !important;
    height: var(--nav-h) !important;
  }
  .brand {
    order: 1;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .brand strong { font-size: 15px !important; }
  /* 44x44 dokunma alanı, içerik kutusu 22x16 kalsın ki theme.css'teki
     "X" animasyonu (translateY(7px)) hizasını korusun. */
  .hamburger {
    display: flex !important;
    order: 0;
    width: 44px !important;
    height: 44px !important;
    padding: 14px 11px !important;
    margin-left: -6px;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: space-between;
    background: transparent;
  }
  .hamburger span { height: 2px !important; }
  .bottomnav-right {
    order: 2;
    width: auto !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }
  .bottomnav-right .btn {
    width: auto !important;
    min-height: 36px !important;
    padding: 6px 12px !important;
  }
  .user-chip { width: auto !important; padding: 3px !important; }
  .user-chip span:not(.avatar) { display: none !important; }
  .status-pills { display: none !important; }
  .lang-switch { display: none !important; }

  /* --- 5. Sayfa iskeleti ---------------------------------------------------- */
  .app,
  .shell {
    height: 100vh;
    height: 100dvh;
  }

  .app-layout {
    display: flex !important;
    flex-direction: column !important;
    padding-right: 0 !important;
    padding-bottom: calc(var(--nav-h) + var(--footer-h) + var(--safe-b)) !important;
  }

  .workspace-body { min-height: 0; }

  /* Alt çubuk + footer için boşluk .app-layout padding-bottom'ında ayrıldı,
     burada tekrar eklemeye gerek yok. */
  .main {
    padding: 14px 12px 20px !important;
    overflow-x: hidden !important;
  }

  .subhead {
    height: auto !important;
    min-height: 44px;
    padding: 8px 12px !important;
  }
  .page-title { font-size: 15px !important; }

  /* Trend rayı: telefonda yatay şerit, ekranın çoğunu yemesin */
  .trendbar {
    height: auto !important;
    max-height: 118px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .16) !important;
  }
  .trendbar.collapsed { max-height: 44px !important; }
  .trendbar-head {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 7px 12px !important;
  }
  .trendbar-search { display: none !important; }
  .trendbar .trend-list {
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px 12px !important;
  }
  .trendbar .trend-item { min-width: 180px !important; width: auto !important; }

  .app-footer {
    left: 0 !important;
    right: 0 !important;
    height: calc(var(--footer-h) + var(--safe-b)) !important;
    padding: 0 12px var(--safe-b) !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 11px !important;
  }
  .app-footer span:nth-child(2) { display: none; }

  /* --- 6. MODAL — "Oluştur" butonuna basılamama sorunu -------------------- */
  .modal-back {
    align-items: end !important;
    justify-items: stretch !important;
    padding: 0 !important;
  }
  .modal,
  .modal.wide,
  .dress-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 16px 14px calc(var(--safe-b) + 20px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    animation: slideUpSheet 280ms cubic-bezier(.16, 1, .3, 1) !important;
  }
  /* Sürükleme çubuğu — sheet olduğu belli olsun */
  .modal::before {
    content: "";
    display: block;
    flex: 0 0 4px;          /* .dress-modal flex-column olduğu için ezilmesin */
    width: 38px;
    height: 4px;
    margin: -6px auto 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
  }
  /* Uzun modallarda kapatma (×) her zaman erişilebilir kalsın.
     box-shadow, modalın üst padding boşluğunu da kapatır (blur 0). */
  .modal-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #050505;
    box-shadow: 0 -20px 0 0 #050505;
  }
  .modal-head .x { width: 36px !important; height: 36px !important; font-size: 22px !important; }
  .modal-foot {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }
  .modal-foot .btn { width: 100% !important; min-width: 0 !important; }
  .modal .btn.full,
  .modal-foot .btn.primary {
    min-height: 48px !important;
    font-size: 15px !important;
  }
  .modal .row,
  .modal .row-3,
  .modal-grid,
  .dress-modal .dress-opts { grid-template-columns: 1fr !important; }

  /* --- 7. Form / buton dokunma hedefleri ---------------------------------- */
  .btn {
    min-height: 38px;
    padding: 8px 13px;
  }
  .btn.sm { min-height: 34px; }
  .btn.xs { min-height: 28px; }

  /* iOS Safari 16px altındaki inputlarda otomatik zoom yapar */
  .input,
  .field input,
  .field textarea,
  .field select,
  select.input {
    font-size: 16px !important;
    padding: 11px 12px !important;
  }
  .input.sm { font-size: 15px !important; padding: 8px 26px 8px 10px !important; }
  input[type="checkbox"],
  input[type="radio"] { width: 20px !important; height: 20px !important; }

  .row, .row-3 { grid-template-columns: 1fr !important; }
  .card { padding: 14px !important; }
  .card-head {
    flex-wrap: wrap;
    gap: 8px;
  }
  .card-head .actions,
  .card-head .flex { flex-wrap: wrap; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .stat-tile { padding: 13px !important; }

  /* --- 8. Tablolar — yatay kaydırma ---------------------------------------- */
  .table-scroll > .table { min-width: 620px; }
  .table { font-size: 12px; }
  .table thead th { padding: 8px 9px; }
  .table tbody td { padding: 9px 9px; }

  /* theme.css: .account-actions { min-width: 360px } → satırı taşırıyordu */
  .account-actions {
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  .cy-search { flex-wrap: wrap; }
  .cy-search .input { flex: 1 1 100%; }
  .cy-filters { gap: 8px; }
  .cy-bulkbar-inner { flex-direction: column; align-items: stretch; }
  .cy-bulkbar-actions { flex-wrap: wrap; }
  .cy-bulkbar-actions .btn { flex: 1 1 auto; }

  /* --- 9. Toast / progress ------------------------------------------------- */
  .toast-stack,
  .progress-stack {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(var(--nav-h) + var(--footer-h) + var(--safe-b) + 10px) !important;
    align-items: stretch;
  }
  .toast,
  .progress-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .fab { bottom: calc(var(--nav-h) + var(--footer-h) + var(--safe-b) + 14px) !important; }

  /* --- 10. Giriş ekranı ---------------------------------------------------- */
  .auth-shell { grid-template-columns: 1fr !important; }
  .auth-side { display: none !important; }
  .auth-main { padding: 24px 16px !important; }
  .auth-card, .login-card, .gate-card { padding: 24px 18px !important; }
  .auth-page { min-height: 100dvh; }
}

/* --- 11. Küçük telefonlar ------------------------------------------------- */
@media (max-width: 560px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .page-breadcrumb { display: none !important; }
  .modal { padding-left: 12px !important; padding-right: 12px !important; }
  .table-scroll > .table { min-width: 560px; }
  .app-footer span:first-child { display: none; }
}

@media (max-width: 400px) {
  .stats-grid { grid-template-columns: 1fr !important; }
  .brand strong { display: none; }
}

/* --- 12. Yatay mod: alt çubuk ekranı yemesin ------------------------------ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .trendbar { display: none !important; }
  .modal { max-height: 96dvh !important; }
}

/* ===========================================================================
   iOS SAFARI EKSTRA DÜZELTMELERİ v2
   - 3 çizgi menü açılmıyor sorunu (z-index + transform)
   - Görev oluşturma modalında buton tıklanmıyor
   - Dokunma hedefleri çok küçük
   =========================================================================== */

/* iOS'ta 300ms tap delay'i tamamen kaldır */
button, .btn, .nav-item, .hamburger, [role="button"], [onclick],
.modal-foot .btn, .modal .btn, .card-head .btn, input, select, textarea, label,
.status-dot, .live-dot, .trend-item, .fab {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Hamburger menü — iOS'ta transform/position sorununu kesin çöz */
@media (max-width: 900px) {
  /* Hamburger butonu kesin görünür ve tıklanabilir */
  .hamburger {
    position: relative !important;
    z-index: 1001 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
  }
  .hamburger span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #fff !important;
    border-radius: 1px !important;
    transition: transform 250ms ease, opacity 200ms ease !important;
  }
  body.sidebar-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  body.sidebar-open .hamburger span:nth-child(2) { opacity: 0 !important; }
  body.sidebar-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

  /* Menü paneli — iOS'ta translateX sorunu: position:fixed + left/right garanti */
  .bottomnav-links {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    width: min(280px, 86vw) !important;
    max-width: 86vw !important;
    height: 100dvh !important;
    transform: translate3d(-100%, 0, 0) !important;
    transition: transform 280ms cubic-bezier(.16, 1, .3, 1) !important;
    will-change: transform;
  }
  body.sidebar-open .bottomnav-links {
    transform: translate3d(0, 0, 0) !important;
  }

  /* Overlay — tıklanınca menü kapansın, iOS'ta sayfa scroll'unu engelle */
  .mobile-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.6) !important;
    z-index: 999 !important;
    display: none;
    opacity: 0;
    transition: opacity 200ms ease;
  }
  body.sidebar-open .mobile-overlay {
    display: block !important;
    opacity: 1;
  }
  body.sidebar-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }

  /* Modal — iOS'ta "Oluştur" butonuna basılamama */
  .modal-back {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    -webkit-overflow-scrolling: touch;
  }
  .modal {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 20px) !important;
  }
  .modal-foot {
    padding-bottom: env(safe-area-inset-bottom, 10px) !important;
  }
  .modal-foot .btn,
  .modal .btn.primary,
  .modal .btn.full {
    min-height: 50px !important;
    font-size: 16px !important;
    touch-action: manipulation !important;
  }

  /* Dokunma hedefi garantisi */
  .btn { min-height: 44px !important; min-width: 44px !important; }
  .btn.sm { min-height: 38px !important; }
  .nav-item { min-height: 48px !important; }

  /* iOS input zoom'ı engelle (16px altında zoom yapar) */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Hover efektleri mobilde takılı kalmasın */
  @media (hover: none) {
    .btn:hover, .nav-item:hover, .card:hover, .trend-item:hover {
      transform: none !important;
      filter: none !important;
      box-shadow: inherit !important;
    }
    .btn:active, .nav-item:active {
      opacity: .7 !important;
      transform: scale(.97) !important;
      transition: none !important;
    }
  }
}