/* kws-layout.css — Tüm masaüstü sayfalar için ortak yerleşim
 * v=20260425-90width
 *
 * Gereksinim:
 *   • Sayfa içeriği ekran genişliğinin %90'ı (orantılı, vw birimi).
 *   • Sol boşluk %3, sağ boşluk %7  → toplam %10 boş.
 *   • Sağ alttaki navigasyon dock'u (kws-floating-bar.js) sağ %7 boşluğa
 *     yatay olarak ORTALANIR; buton genişliği yaklaşık sayfanın %6'sı
 *     (boşluktan %10 daha dar).
 *   • Yapay Zeka panel'i (sağdan slide-in, 420px) açıldığında içerik sola
 *     kayar; nav butonları panel'in soluna geçer; hiçbir öğe binmez.
 *   • MOBİL (≤768px) cihazlarda bu kurallar bypass edilir — mobil özel
 *     temaya (kws-mobile-*.js) dokunmaz.
 *
 * Notlar:
 *   • Body kullanıyoruz çünkü tüm sayfalarda ortak wrapper class yok.
 *     Kuralları !important ile vurguluyoruz; mevcut sayfa özel CSS'leri
 *     ezilebilsin diye.
 *   • Vw birimi sayesinde tüm masaüstü genişliklerde ORANTILI çalışır.
 *   • box-sizing: border-box → padding genişliğin İÇİNDE sayılır.
 */

@media (min-width: 769px) {
  html, body {
    box-sizing: border-box !important;
  }

  /* 🆕 PATCH 48 (2026-05-03): html arkaplanı şeffaf — böylece body'nin rengi
     CSS spec gereği viewport canvas'a propagate olur ve html ile body
     "tek parça" görünür. Sayfa-spesifik tema farklılıkları (invoice-list
     #f5f7fa, fatura-detay #fff vb.) artık otomatik uyumlu. */
  html {
    background: transparent !important;
  }

  /* ── Ana içerik kuşağı: sol %3, sağ %7 — toplam %10 boşluk ── */
  body:not(.kws-no-layout):not(.invoices-loading) {
    padding-left: 3vw !important;
    padding-right: 7vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Sayfaların kendi body'sinde varsa width:100% / max-width gibi kuralları
     etkilemez — biz sadece padding yönetiyoruz. İçerideki container'lar
     "width:100%" iken body padding'iyle %90 ekran genişliği sağlanır. */

  /* ── Yapay Zeka paneli AÇIKKEN ──
     floating-bar.js zaten body'yi position:fixed yapıyor ve right:420px
     veriyor. Biz sadece padding-right'ı SIFIRA çekeriz çünkü panelin yer
     kapladığı 420px zaten boşluk yerine geçer; aksi halde içerik sağdan
     7vw + 420px kayardı (gereksiz dar). Sol padding (%3) korunur ki
     içerik tam sola yapışmasın. */
  html.kws-ai-open body:not(.kws-no-layout):not(.invoices-loading) {
    padding-left: 3vw !important;
    padding-right: 0 !important;
  }
}

/* ── MOBİL (≤768px) — tüm kurallar pasif ──
   Mobil için ayrı tema var (kws-mobile-invoice.js, kws-mobile-* css).
   Kuralları açıkça sıfırlayarak çakışma riskini engelliyoruz. */
@media (max-width: 768px) {
  body:not(.kws-no-layout):not(.invoices-loading) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   🆕 PATCH 45 (2026-04-29) — ULTRAWIDE LETTERBOX (≥16:9 oranlı ekranlar)
   • 21:9, 32:9 gibi ultrawide monitörlerde içerik 16:9 alanına SIKIŞIR.
   • Body kutusunun max-width = 100vh * 16/9; margin:auto ile YATAY ORTALI.
   • Sol %3 / Sağ %7 padding oranı KORUNUR (sayfa görünümü 16:9 ekrandaki
     gibi kalır, sadece bütün sayfa ortalanır → soldan/sağdan letterbox boşluk).
   • Sağ üst nav ve sağ alt dock'un hizalaması JS tarafında letterbox-aware
     yeniden hesaplanır (kws-floating-bar.js + fatura-detay alignToRightFAB).
   • Print modunda aktif değil (ekran-only).
   • Mobil ve tablet (≤768px) etkilenmez.
   ────────────────────────────────────────────────────────────────── */
@media screen and (min-width: 769px) and (min-aspect-ratio: 16/9) {
  /* (PATCH 47: html bg artık üst kuralda her ≥769px ekranda uygulanıyor — 
      bu blok sadece body'nin 16:9 kutuya sıkıştırılması için.) */
  body:not(.kws-no-layout):not(.invoices-loading) {
    /* 16:9 oranlı kutu — yatay ortalı */
    max-width: calc(100vh * 16 / 9) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* Padding oranı korunsun: sol = body genişliğinin %3'ü, sağ = %7
       (vw yerine kendi genişliğine göre — calc içinde min() ile) */
    padding-left: calc(min(100vw, 100vh * 16 / 9) * 0.03) !important;
    padding-right: calc(min(100vw, 100vh * 16 / 9) * 0.07) !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.04);  /* hafif kenar (opsiyonel) */
  }
  /* AI panel açıkken: body fixed + right:420px — letterbox kuralı geçici devre dışı.
     (Floating-bar JS html.kws-ai-open class'ını body'ye uyguladığında letterbox
     bozulmasın diye AI moduna girince max-width'i kaldırıyoruz.) */
  html.kws-ai-open body:not(.kws-no-layout):not(.invoices-loading) {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
@media print {
  body:not(.kws-no-layout):not(.invoices-loading) {
    max-width: none !important;
    margin: 0 !important;
  }
}