/* ===========================================================================
   mobile.css — iPhone / mobil katmanı
   ---------------------------------------------------------------------------
   KURAL 1: Bu dosya app.css'ten SONRA yüklenir. Sırası değişirse .content
            padding'leri app.css'teki shorthand tarafından ezilir ve güvenli
            alan dolguları hiç uygulanmaz.
   KURAL 2: Masaüstünü (>=1101px) hiçbir kural etkilemez. Medya sorgusu dışında
            kalan kurallar yalnızca yeni sınıflara (.tabbar, .nav-back,
            .btn-etiket, .ios-install-hint) veya dokunmatik cihaza
            (hover: none) bağlıdır.
   =========================================================================== */

:root {
  /* iOS güvenli alanları. viewport-fit=cover olmadan hepsi 0px döner;
     masaüstü tarayıcılarda da 0px'tir, yani kurallar zararsızca geçerlidir. */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --tabbar-h: 56px;
}

/* Yeni bileşenler varsayılan olarak gizli; yalnızca mobil kırılımda açılır. */
.tabbar { display: none; }
.nav-back { display: none; }
.btn-etiket { display: none; }
.ios-install-hint[hidden] { display: none !important; }

/* ===========================================================================
   iOS KURULUM IPUCU — gorsel kurallar GLOBAL seviyededir.
   Gerekce: iPad Pro yatayda viewport 1366px olur ve iOS tespiti tutar, yani
   ipucu gosterilir. Kurallar mobil medya sorgusunun icinde kalsaydi ipucu
   hicbir stil almaz, sayfanin dibinde bicimsiz bir blok olarak akardi.
   Taban alt bosluk .tabbar'i VARSAYMAZ (login/sifre sayfalarinda tabbar yoktur);
   tabbar'in gorundugu genislikte deger yukaridaki medya blogunda yukseltilir.
   =========================================================================== */
.ios-install-hint {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(var(--sab) + 12px);
  z-index: 1035;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 40px 14px 14px;
  border-radius: 16px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
  font-size: 13.5px; line-height: 1.45;
}
.ios-install-close {
  position: absolute; top: 6px; right: 10px;
  border: 0; background: transparent; color: inherit;
  font-size: 22px; padding: 4px 8px;
}
/* Giris/sifre sayfalarinda tabbar yok -> taban deger gecerli kalsin. */
.auth-page .ios-install-hint,
.login-body .ios-install-hint { bottom: calc(var(--sab) + 12px); }


/* Dokunmatikte her dokunuşta çıkan gri kare parlaması ve Safari'nin yatay
   modda yazıyı büyütmesi (tabular-nums hizasını bozuyordu) kapatılır. */
* { -webkit-tap-highlight-color: transparent; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body { overscroll-behavior-y: contain; }

/* iOS'ta :hover dokunulan ögeye "yapışır" ve parmak çekildikten sonra da
   kalır. .table-hover satırı kalıcı soluk, menü maddesi kalıcı vurgulu
   görünüyordu. Hover yalnızca gerçek imleçli cihazlarda açık. */
@media (hover: none) {
  .table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: initial;
    --bs-table-color-state: initial;
  }
  .menu a.active { background: rgba(255, 255, 255, .12); color: #fff; }
}
@media (hover: hover) and (pointer: fine) {
  .menu a:hover, .menu a.active { background: rgba(255, 255, 255, .12); color: #fff; }
}

/* ===========================================================================
   MOBİL KIRILIM — app.css:348 ve app.js'teki matchMedia eşiğiyle birebir aynı
   =========================================================================== */
@media (max-width: 1100px) {

  /* --- Durum çubuğu şeridi -------------------------------------------------
     apple-mobile-web-app-status-bar-style=black-translucent, saat/pil/sinyal
     metnini HER ZAMAN beyaza sabitler; iOS bu modda otomatik kontrast
     uygulamaz. Panel açık temada çalışabildiği (ve ilk açılan /login ekranı
     zaten açık zeminli olduğu) için beyaz üzerine beyaz yazı oluşuyordu.
     Çözüm: üst güvenli alan şeridini her iki temada da koyu boyamak. */
  body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--sat);
    background: #0e1620;
    z-index: 1100;
    pointer-events: none;
  }

  /* --- Güvenli alan dolguları --------------------------------------------- */
  .content {
    padding-top: calc(var(--sat) + 12px);
    padding-right: max(16px, var(--sar));
    padding-left: max(16px, var(--sal));
    /* Alt sekme çubuğu + home indicator için rezerv */
    padding-bottom: calc(var(--tabbar-h) + var(--sab) + 16px);
  }

  .app-shell { min-height: 100vh; min-height: 100dvh; }

  .sidebar {
    height: 100vh;
    height: 100dvh; /* iOS'ta 100vh görünür alandan büyüktür: son menü maddesi erişilemiyordu */
    padding: calc(var(--sat) + 14px) 14px calc(var(--sab) + 18px) max(14px, var(--sal));
    overscroll-behavior: contain; /* drawer kaydırması arka sayfaya zincirlenmesin */
  }

  /* --- Alt sekme çubuğu ----------------------------------------------------
     z-index 1030: Bootstrap modal (1055), modal-backdrop (1050) ve
     drawer (1050) ALTINDA kalır — yoksa açık modal'ın düğmeleri tıklanamazdı. */
  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1030;
    height: calc(var(--tabbar-h) + var(--sab));
    padding-bottom: var(--sab);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--line);
  }
  [data-theme="dark"] .tabbar {
    background: rgba(18, 27, 38, .92);
    border-top-color: #29343f;
  }
  .tabbar .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
  }
  .tabbar .tab i { font-size: 21px; line-height: 1; }
  .tabbar .tab.is-active { color: var(--primary); }
  .tabbar .tab:active { opacity: .55; }
  body.sidebar-open .tabbar { opacity: 0; pointer-events: none; transition: opacity .2s ease; }

  /* --- Geri düğmesi (standalone'da swipe-back yok) ------------------------- */
  .nav-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 26px;
    line-height: 1;
  }
  /* PWA kapsamı dışına çıkan link mobilde gizlenir; masaüstünde kalır. */
  .topbar-actions .btn-home-public { display: none; }

  /* --- Yapışkan Kaydet çubuğu ---------------------------------------------
     Sekme çubuğunun ve home indicator'ın üstüne itilir. */
  .settings-actions {
    bottom: calc(var(--tabbar-h) + var(--sab));
    padding: 12px 0 calc(12px + var(--sab));
  }
  .settings-actions .btn { width: 100%; min-height: 48px; font-weight: 700; }

  /* --- iOS otomatik zoom'u ------------------------------------------------
     16px'in ALTINDAKİ bir girdiye odaklanınca iOS sayfayı zoomlar ve geri
     çıkmaz. user-scalable=no ile çözmek erişilebilirliği bozardı. */
  input, select, textarea,
  .form-control, .form-select,
  .form-control-sm, .form-select-sm { font-size: 16px; }

  /* --- 44pt dokunma hedefleri --------------------------------------------- */
  .form-control, .form-select { min-height: 44px; }
  .btn { min-height: 44px; }
  .table .btn-sm, td .btn-sm, .row-actions .btn {
    min-width: 44px; min-height: 44px;
    padding: .5rem .75rem;
    font-size: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .row-actions { gap: 10px; }
  .js-statement-preview.btn-link {
    min-height: 44px;
    padding: .6rem 0 !important;
    display: inline-flex; align-items: center; gap: .4rem;
  }
  .modal-header .btn-close {
    min-width: 44px; min-height: 44px;
    padding: .75rem;
    background-size: 1.1em;
  }
  .menu a { min-height: 44px; display: flex; align-items: center; padding: 12px 14px; font-size: 15px; }
  .menu { gap: 6px; }
  .form-check.switch-line { padding-top: 0; min-height: 48px; display: flex; align-items: center; gap: .6rem; }
  .form-check.switch-line .form-check-input { width: 24px; height: 24px; margin: 0; float: none; }
  input[type="file"].form-control { min-height: 48px; padding: .6rem .75rem; }

  /* iOS tarih alanının dikey hizası */
  input[type="date"].form-control::-webkit-date-and-time-value {
    text-align: left; min-height: 1.5em; line-height: 1.5; margin: 0;
  }

  /* --- Izgara taşması -----------------------------------------------------
     Izgara hücresinde min-width varsayılanı auto (= min-content). Dashboard'da
     geniş tablo hücreyi şişiriyor, .table-responsive'in clientWidth'i ile
     scrollWidth'i eşitleniyor ve Tutar kolonu ne görünüyor ne kaydırılabiliyordu. */
  .two-col section { min-width: 0; }
  .estimate-summary > * { min-width: 0; }
  .summary-grid > * { min-width: 0; }

  /* --- Kart moduna alınmayan tablolar için kaydırma ipucu ------------------ */
  .table-responsive {
    position: relative;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .table-responsive::-webkit-scrollbar { height: 4px; -webkit-appearance: none; }
  .table-responsive::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 2px; }
  .modal-body { overscroll-behavior: contain; }

  /* --- İkincil kolonları gizleme ------------------------------------------ */
  [data-oncelik="dusuk"] { display: none !important; }

  /* Alt sekme cubugu YALNIZCA burada gorunur; ipucu onun uzerine ciksin. */
  .ios-install-hint { bottom: calc(var(--tabbar-h) + var(--sab) + 12px); }
}

/* ===========================================================================
   KART MODU — asıl eylem tabloları <=680px'te yığılmış karta çevrilir.
   Hücre etiketleri app.js tarafından thead'den üretilip data-etiket olarak
   yazılır; şablonlarda tek tek data-label yazılmaz.
   =========================================================================== */
@media (max-width: 680px) {
  table.mobil-kart thead { display: none; }
  table.mobil-kart,
  table.mobil-kart tbody,
  table.mobil-kart tr,
  table.mobil-kart td { display: block; width: 100%; }
  table.mobil-kart { border: 0; margin-bottom: 0; }

  table.mobil-kart tbody tr {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
  }
  table.mobil-kart td {
    display: flex; flex-wrap: wrap;
    align-items: baseline; justify-content: space-between;
    gap: 2px 10px;
    min-height: 40px;
    padding: 8px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(128, 128, 128, .18) !important;
  }
  table.mobil-kart td:last-child { border-bottom: 0 !important; }
  table.mobil-kart td::before {
    content: attr(data-etiket);
    flex: 0 0 auto;
    min-width: 92px; max-width: 45%;
    color: var(--muted);
    font-size: 12px; font-weight: 650;
  }
  /* Renkli satırlarda (ödendi/gecikti/kısmi) yazı beyaz olduğu için etiket de açılır. */
  table.mobil-kart tr.paid-row td::before,
  table.mobil-kart tr.due-row td::before,
  table.mobil-kart tr.partial-row td::before { color: rgba(255, 255, 255, .8); }

  /* "Kayıt yok" gibi colspan'lı tek hücreler */
  table.mobil-kart td[data-bos] { display: block; text-align: center; }
  table.mobil-kart td[data-bos]::before { content: none; }

  /* Masaüstü için konmuş sabit genişlikler kart içinde taşmaya yol açıyor. */
  table.mobil-kart .source-cell,
  table.mobil-kart .source-cell.compact,
  table.mobil-kart .money-cell .amount { min-width: 0; }

  /* due-today satırının 4px sol şeridi kart kenarlığıyla çakışıyordu. */
  table.mobil-kart tr.due-today { box-shadow: inset 4px 0 0 var(--danger); }
  table.mobil-kart tr.due-today td:first-child { border-left: 0 !important; }

  /* İşlem hücresi: 34x31px ikon düğmeleri tam genişlikte 44px şeride dönüşür. */
  table.mobil-kart td[data-islem] { justify-content: flex-start; gap: 8px; }
  table.mobil-kart td[data-islem]::before { display: none; }
  table.mobil-kart td[data-islem] > form { flex: 1 1 120px; display: flex; }
  table.mobil-kart td[data-islem] .btn {
    flex: 1 1 120px; width: 100%;
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  }
  table.mobil-kart td[data-islem] .btn-etiket { display: inline; }

  /* --- Topbar: app.css:372'deki width:100% kuralını ezer ------------------- */
  .topbar-actions { justify-content: flex-end; }
  .topbar-actions .btn { width: auto; min-height: 44px; padding-inline: 1rem; }
  .theme-toggle { width: 44px; min-width: 44px; padding: 0; display: inline-grid; place-items: center; }

  /* --- Nakit akis tablosu --------------------------------------------------
     Kart moduna ALINMAZ (90 gune kadar satir uretebiliyor, sayfa ~18.000px
     olurdu). Bunun yerine hucreler sikistirilir: aksi halde raporun tek amaci
     olan "Ihtiyac" kolonu ilk ekranda 27px kirpik kaliyordu. */
  .cashflow-table { font-size: 13px; }
  .cashflow-table th,
  .cashflow-table td { padding-left: .3rem; padding-right: .3rem; }
  .cashflow-table .money-cell .amount,
  .cashflow-table .amount { min-width: 0; }

  .estimate-detail table { font-size: 13px; }
  .estimate-detail th, .estimate-detail td { padding: 8px 6px; }
}

/* ===========================================================================
   MODAL — klavye açılınca gönder düğmesi klavyenin altında kalıyordu
   =========================================================================== */
@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down .modal-footer {
    position: sticky; bottom: 0;
    background: var(--bs-modal-bg);
    padding-bottom: calc(.75rem + var(--sab));
  }
  .modal-footer .btn { flex: 1 1 0; min-height: 48px; }
  .modal-dialog { padding-bottom: var(--sab); }
}

/* ===========================================================================
   GİRİŞ / ŞİFRE SAYFALARI — viewport-fit=cover sonrası kart çentik altına
   kaymasın. app.css:408-413 ve :312'yi ezer.
   =========================================================================== */
.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(2rem, calc(var(--sat) + 1rem)) max(.9rem, var(--sar))
           max(2rem, calc(var(--sab) + 1rem)) max(.9rem, var(--sal));
}
.login-body {
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(20px, calc(var(--sat) + 12px)) max(20px, var(--sar))
           max(20px, calc(var(--sab) + 12px)) max(20px, var(--sal));
}