/* ============================================================================
   PharmaTrace — Mobil ve uygulama içi (WebView) düzeltmeleri
   ============================================================================

   Bu dosya main.css / pages.css'i DEĞİŞTİRMEZ, üzerine yazar. Böylece
   masaüstü görünümü olduğu gibi kalırken telefonda ve Capacitor
   sarmalayıcısı içinde doğru davranış elde ediliyor.

   Neden ayrı dosya: mevcut CSS'ler 50 KB ve 150 KB; içlerine dokunmak
   çalışan onlarca ekranı riske atardı. Ayrı katman, geri alması da kolay.

   ÇÖZÜLEN SOMUT SORUNLAR:

   1) iOS'ta forma dokununca sayfa ZIPLIYORDU.
      Safari, yazı boyutu 16px'in ALTINDA olan bir alana odaklanıldığında
      sayfayı otomatik büyütür. Panelin .form-control'ü 0.84rem (~13px)
      olduğu için her alan girişinde ekran zıplıyor ve kullanıcı elle
      geri küçültmek zorunda kalıyordu. Telefonda 16px'e çıkarılıyor —
      masaüstünde eski boyut korunuyor.

   2) ÇENTİK (notch) ve ALT ÇUBUK içeriği kesiyordu.
      Depo paneli safe-area boşluklarını hiç kullanmıyordu. Tarayıcıda
      sorun değil ama tam ekran çalışan uygulama içinde üst bar saatin,
      alt içerik home göstergesinin altında kalıyor.

   3) DOKUNMA HEDEFLERİ küçüktü.
      .btn yüksekliği ~30px. Apple ve Google 44px öneriyor; depoda
      eldivenli parmakla kullanılan bir ekran için bu daha da önemli.

   4) Menü açıkken ARKA PLAN hâlâ tıklanabiliyordu.
      Yan menü mobilde üste kayıyor ama arkasındaki sayfa aktif kalıyordu;
      menüyü kapatmak için tam olarak menü butonuna basmak gerekiyordu.
      Artık karartma katmanı var, her yere dokunmak kapatıyor.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. GÜVENLİ ALAN (safe area) — çentik ve alt çubuk
   --------------------------------------------------------------------------- */

:root {
  --pt-safe-top: env(safe-area-inset-top, 0px);
  --pt-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pt-safe-left: env(safe-area-inset-left, 0px);
  --pt-safe-right: env(safe-area-inset-right, 0px);
}

/* Üst bar çentiğin altına inmeli. Sadece uygulama içinde ve tam ekran
   tarayıcıda etkili; normal tarayıcıda env() 0 döner ve hiçbir şey
   değişmez. */
.topbar {
  padding-top: calc(var(--pt-safe-top) + 0px);
}

.page-content {
  padding-bottom: calc(24px + var(--pt-safe-bottom));
}

.sidebar {
  padding-top: var(--pt-safe-top);
  padding-bottom: var(--pt-safe-bottom);
}

/* Uygulama içindeyken gövde arka planı çentik bölgesinde de dolu olsun;
   aksi halde kaydırırken beyaz bir şerit görünüyor. */
body.pt-native {
  background: var(--bg, #f1f5f9);
}

/* ---------------------------------------------------------------------------
   2. MOBİL DÜZELTMELERİ
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {

  /* iOS zıplamasını engelleyen tek şey budur: 16px veya üstü.
     15.9px bile yetmiyor. */
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="search"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Dokunma hedefleri */
  .btn {
    min-height: 44px;
    padding: 11px 18px;
  }

  .btn-sm {
    min-height: 38px;
    padding: 8px 14px;
  }

  .sidebar-item {
    min-height: 46px;
  }

  .topbar-btn {
    min-width: 42px;
    min-height: 42px;
  }

  /* Tablolar: mobilde yatay kaydırma, sayfayı kırmasınlar.
     Panelin bazı tabloları 8-9 sütun; küçültmek yerine kaydırmak
     doğru çözüm — rakamlar okunabilir kalıyor. */
  .table-wrapper,
  .card > table,
  .set-table-card {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }

  table {
    min-width: 640px;
  }

  /* KPI kartları tek sıra sığmıyor */
  .kpi-grid,
  .cust-kpi-grid,
  .sup-kpis,
  .qs-counters {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Modal'lar ekranı taşırmasın */
  .modal,
  .cust-popup,
  .popup-box,
  .sup-modal-box {
    max-height: calc(100dvh - var(--pt-safe-top) - var(--pt-safe-bottom) - 24px);
    overflow-y: auto;
  }

  /* Sayfa başlıkları alt alta */
  .page-header {
    gap: 10px;
  }

  .page-title {
    font-size: 1.25rem;
  }
}

@media (max-width: 560px) {

  .kpi-grid,
  .cust-kpi-grid,
  .sup-kpis,
  .qs-counters {
    grid-template-columns: 1fr !important;
  }

  /* Form ızgaraları tek sütun */
  .form-grid,
  .form-grid-2,
  .qs-grid,
  .sup-form-grid,
  .vat-grid {
    grid-template-columns: 1fr !important;
  }

  .page-content {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ---------------------------------------------------------------------------
   3. YAN MENÜ KARARTMASI
   --------------------------------------------------------------------------- */

.pt-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, .45);
  z-index: 90;
  display: none;
  /* Kaydırma menünün arkasına geçmesin */
  touch-action: none;
}

.pt-sidebar-backdrop.show {
  display: block;
}

@media (max-width: 768px) {
  .sidebar {
    z-index: 100;
  }
}

/* ---------------------------------------------------------------------------
   4. UYGULAMA İÇİ (Capacitor) DAVRANIŞ
   --------------------------------------------------------------------------- */

body.pt-native {
  /* Aşağı çekince sayfanın "esneyip" beyaz alan göstermesi, uygulamayı
     web sitesi gibi hissettiriyor. Kapatıyoruz. */
  overscroll-behavior-y: none;

  /* Uzun basınca çıkan metin seçme balonu, buton ve kart üzerinde
     istenmiyor. Girdi alanlarında aşağıda geri açılıyor. */
  -webkit-user-select: none;
  user-select: none;

  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body.pt-native input,
body.pt-native textarea,
body.pt-native select,
body.pt-native [contenteditable],
body.pt-native .bubble,
body.pt-native code {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Uygulama içinde tarayıcıya özgü öğeleri gizle */
body.pt-native .pt-web-only {
  display: none !important;
}

/* Sadece uygulamada görünmesi gerekenler */
.pt-native-only {
  display: none;
}

body.pt-native .pt-native-only {
  display: block;
}

/* ---------------------------------------------------------------------------
   5. BİYOMETRİK GİRİŞ BUTONU (login ekranları)
   --------------------------------------------------------------------------- */

.pt-bio-btn {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  padding: 13px 18px;
  border-radius: 14px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  font-weight: 800;
  font-size: .92rem;
  cursor: pointer;
  min-height: 48px;
}

.pt-bio-btn.show {
  display: flex;
}

.pt-bio-btn:active {
  background: #f1f5f9;
}

.pt-bio-btn svg {
  flex: 0 0 auto;
}

.pt-bio-hint {
  display: none;
  margin-top: 10px;
  font-size: .78rem;
  color: #64748b;
  text-align: center;
  line-height: 1.5;
}

.pt-bio-hint.show {
  display: block;
}


/* Güvensiz bağlamda (http) mikrofon butonu — görünür ama pasif izlenimi versin,
   basınca sebebini söylüyor. Gizlemek yerine açıklamak, "neden yok bu buton"
   sorusunu ortadan kaldırıyor. */
.mic-btn.insecure {
  opacity: .45;
}

/* ============================================================================
   6. AÇILIR LİSTELER (dropdown)
   ============================================================================

   İKİ AYRI ŞEY VAR, İKİSİ DE BURADA:

   A) Yerleşik <select>. Tarayıcının kendi açtığı liste (iOS'ta alttan çıkan
      tekerlek, Android'de ortadaki pencere) CSS ile BİÇİMLENDİRİLEMEZ — bu
      bir tarayıcı kısıtı, aşmanın yolu yok. Biçimlendirilebilen KAPALI hâli
      ve buna dokunmak zaten sorunun büyük kısmını çözüyor: panelde selectler
      tarayıcının gri varsayılan görünümünde kalıyordu, yanındaki input'larla
      aynı görünmüyordu ve mobilde bariz duruyordu.

   B) Kendi yazdığımız açılır paneller (ürün arama, tedarikçi arama, müşteri
      arama). Bunlar gerçekten HTML, dolayısıyla tam kontrol bizde. Mobilde
      küçük bir kutu içinde 50 satır göstermek yerine ALTTAN AÇILAN sayfa
      (bottom sheet) hâline getiriliyor — telefonda alışılmış olan bu ve
      parmakla seçmesi çok daha kolay.
   ============================================================================ */

/* --- A) Yerleşik select: kapalı hâli tasarımla aynı --- */

select,
select.form-control,
.sa-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Ok işareti SVG olarak arka plana gömülü; ayrı bir eleman gerektirmiyor,
     dolayısıyla mevcut hiçbir sayfanın HTML'ine dokunmak gerekmedi. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;

  /* Ok ile metnin çakışmaması için sağdan boşluk */
  padding-right: 36px !important;

  /* Safari'de select'in kendi yuvarlaması farklı; eşitliyoruz */
  border-radius: 10px;
  background-color: #fff;
  cursor: pointer;
}

select:disabled {
  background-color: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 1;
}

select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
}

/* Süper admin konsolu koyu temalı değil ama kendi ölçüleri var */
.sa-select {
  background-position: right 10px center;
  padding-right: 32px !important;
}

/* Çoklu seçim ve boyutlu listelerde ok anlamsız */
select[multiple],
select[size]:not([size="1"]) {
  background-image: none;
  padding-right: 12px !important;
}

@media (max-width: 900px) {
  select,
  select.form-control {
    min-height: 44px;
    background-position: right 14px center;
  }
}

/* --- B) Kendi açılır panellerimiz --- */

.pt-combo-list,
.product-autocomplete,
.autocomplete-box,
.customer-box {
  border-radius: 14px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .16);
  background: #fff;
}

@media (max-width: 760px) {

  /* Mobilde alttan açılan sayfa: küçük bir kutuya sıkıştırmak yerine
     ekranın altını kullanıyoruz. Liste uzun olduğunda parmakla kaydırmak
     ve dokunmak belirgin şekilde kolaylaşıyor. */
  .pt-combo-list.show,
  .product-autocomplete.show,
  .autocomplete-box.show,
  .customer-box.show {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-height: 62vh;
    border-radius: 20px 20px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding-bottom: var(--pt-safe-bottom);
    z-index: 99998;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, .22);
    animation: ptSheetUp .18s ease-out;
  }

  @keyframes ptSheetUp {
    from { transform: translateY(14px); opacity: .6 }
    to   { transform: translateY(0);    opacity: 1 }
  }

  /* Alttan açılan listede satırlar parmak için büyütülüyor */
  .pt-combo-item,
  .product-autocomplete-item,
  .autocomplete-item {
    padding: 14px 16px;
    min-height: 52px;
  }

  .pt-combo-item-title {
    font-size: .95rem;
  }

  .pt-combo-item-sub {
    font-size: .8rem;
  }
}

/* ============================================================================
   7. KUR ŞERİDİ (topbar)
   ============================================================================ */

.fx-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 6px 11px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Bayat kur sarı: gizlemek yerine işaretlemek. Eski bir rakamı taze gibi
   göstermek, yanlış fiyattan fatura kesilmesine yol açabilir. */
.fx-strip.stale {
  background: #fffbeb;
  border-color: #fcd34d;
}

.fx-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fx-code {
  font-weight: 800;
  color: #94a3b8;
  font-size: 11px;
}

.fx-val {
  font-weight: 700;
  color: #0f172a;
}

/* Dar ekranda önce GBP, sonra tüm şerit gizlenir — topbar'ı kırmasın. */
@media (max-width: 1180px) {
  .fx-chip:nth-child(3) { display: none; }
}

@media (max-width: 900px) {
  .fx-strip { display: none; }
}