/* ============================================================
   mobile.css — Fiko ortak mobil uyumluluk katmanı
   Tüm sayfalara </head> öncesinde dahil edilir (mobile.js ile).
   Kural: yalnızca @media içinde, düşük özgüllük, desktop'a etkisiz.
   ============================================================ */

/* ── Tablo kaydırma wrapper'ı (mobile.js ekler) ── */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tbl-scroll::-webkit-scrollbar{height:6px}
.tbl-scroll::-webkit-scrollbar-thumb{background:#c9c9c9;border-radius:3px}

/* ════════════ TABLET (≤900px) ════════════ */
@media (max-width:900px){
  html,body{overflow-x:hidden}
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* cost_kontrol.php */
  .recete-layout{grid-template-columns:1fr}
  .upload-grid{grid-template-columns:1fr}
  .sk-sup-grid{grid-template-columns:1fr}

  /* genel_dashboard2 / cost_patron_ozet yardımcıları */
  .mid-row{grid-template-columns:1fr}
}

/* ════════════ TABLET DAR / BÜYÜK TELEFON (≤768px) ════════════ */
@media (max-width:768px){
  /* Nav / header — panel sayfaları (admin/patron) */
  .panel-nav{
    grid-template-columns:1fr auto 1fr !important;
    grid-template-areas:"logo meta cikis" !important;
    padding:max(8px,env(safe-area-inset-top,0px)) 12px 10px !important;
    min-height:0 !important;height:auto !important;
    gap:6px 8px !important;align-items:center !important;
  }
  .panel-nav-logo{grid-area:logo !important;justify-self:start !important;align-self:center !important}
  .panel-nav-meta{
    grid-area:meta !important;justify-self:center !important;align-self:center !important;
    display:flex !important;flex-direction:column !important;align-items:center !important;gap:2px !important;
    min-width:0 !important;max-width:100% !important;
    padding:0 !important;border:none !important;border-radius:0 !important;background:transparent !important;
  }
  .panel-nav-meta .nav-info-line{
    display:inline-flex !important;align-items:baseline !important;justify-content:center !important;gap:6px !important;
    min-width:0 !important;max-width:100% !important;line-height:1.2 !important;flex-wrap:nowrap !important;
  }
  .panel-nav-meta .nav-user{
    font-size:12px !important;flex:0 1 auto !important;min-width:0 !important;line-height:1.2 !important;
    overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;
    padding:0 !important;border:none !important;background:transparent !important;
  }
  .panel-nav-meta .nav-tarih-full{display:none !important}
  .panel-nav-meta .nav-tarih-short{
    display:inline !important;font-size:11px !important;flex:0 0 auto !important;
    line-height:1.2 !important;white-space:nowrap !important;
    padding:0 !important;border:none !important;background:transparent !important;
  }
  .panel-nav-meta .nav-greet-inline{display:none !important}
  .panel-nav-meta .nav-greeting{
    display:block !important;font-size:10px !important;font-weight:600 !important;opacity:.9 !important;
    line-height:1.2 !important;text-align:center !important;
    padding:0 !important;border:none !important;background:transparent !important;
  }
  .panel-nav-cikis{
    grid-area:cikis !important;justify-self:end !important;align-self:center !important;
    padding:6px 10px !important;font-size:11px !important;
  }
  .panel-nav .logo-img{height:34px !important}
  .panel-nav-meta .nav-rol{display:none}
  header > nav:not(.panel-nav){
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    align-items:center;
    padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;
    height:auto;
    min-height:52px;
    gap:6px 10px;
  }
  header > nav > a:first-of-type{
    grid-column:1;
    grid-row:1;
    justify-self:start;
    align-self:center;
  }
  header > nav > .btn-cikis{
    grid-column:2;
    grid-row:1;
    justify-self:end;
    align-self:center;
    flex-shrink:0;
    white-space:nowrap;
    padding:6px 12px;
    font-size:12px;
  }
  header > nav > .nav-center{
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex-wrap:nowrap;
    padding:6px 10px;
    font-size:12px;
  }
  header > nav .nav-user{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    flex:1 1 auto;
    font-size:12px;
  }
  header > nav .nav-tarih,
  header > nav .nav-date{
    flex-shrink:0;
    white-space:nowrap;
    font-size:11px;
  }
  header > nav .nav-rol{display:none}

  /* Diğer sayfalar — genel nav (panel header dışı) */
  body > nav,
  .wrap > nav,
  main > nav{
    flex-wrap:wrap;row-gap:6px;padding-left:12px;padding-right:12px;height:auto;min-height:52px;
  }
  .logo-img{height:38px}
  .nav-user{font-size:12px}

  /* Ortak .hdr başlığı (cost, dashboard, harita, ai_asistan sayfaları) */
  .hdr{height:auto;min-height:52px;flex-wrap:wrap;padding:6px 12px;row-gap:4px}
  .hdr-title{font-size:13px}
  .hdr-user{gap:6px}
  .hdr-user .btn-link{padding:5px 10px;font-size:12px}

  /* cost_kontrol ikinci sticky nav — mobilde statik (header ile çakışmasın) */
  .main-nav{position:static}
  .mnav-btn{padding:10px 14px;font-size:13px}
  .snav-btn{padding:6px 12px;font-size:12px}

  /* Genel container'lar */
  .container,.container-wide,.main,.wrap,main{padding-left:12px;padding-right:12px}
  .card{padding:14px}

  /* Formlar — iOS otomatik zoom'u engelle */
  input.fi,select.fi,textarea.fi,.fi{font-size:16px}
  input[type=text],input[type=number],input[type=date],input[type=email],
  input[type=password],select,textarea{max-width:100%}

  /* Sekme barları yatay kaydırılabilir */
  .sec-tabs,.main-nav-inner,.tabs,.tab-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .sec-tab,.tab-btn,.btab{white-space:nowrap;flex-shrink:0}

  /* KPI / kart grid'leri 2 kolona in */
  .kpi-row,.kpi-grid,.mopt-grid{grid-template-columns:repeat(2,1fr)}

  /* cost_kontrol ana içerik */
  .main{padding-top:16px;padding-bottom:24px}
  .rn-header{flex-direction:column;align-items:flex-start;gap:10px}

  /* ai_asistan */
  .model-grid{grid-template-columns:1fr 1fr}
  .bub{max-width:100%}
  .msg-row{max-width:100%}

  /* idari_isler */
  .bildirim-grid{grid-template-columns:1fr}

  /* Modallar ekrana sığsın */
  .modal{width:auto;max-width:94vw;max-height:90vh;overflow-y:auto}

  /* Filtre / aksiyon barları alt alta */
  .range-bar,.filter-bar{flex-wrap:wrap;gap:8px}
}

/* ════════════ TELEFON (≤640px) ════════════ */
@media (max-width:640px){
  body{font-size:14px}
  .card{padding:12px}
  h1,.page-title{font-size:20px}
  h2{font-size:17px}

  /* Butonlar dokunmatik hedef boyutu */
  .btn-gold,button[type=submit],.btn-submit{min-height:40px}

  /* Tablolar sıkışık */
  .tbl th,.tbl td,table th,table td{padding:7px 8px;font-size:12.5px}

  /* Paneller (admin/patron) — kart grid tek kolon */
  .grid{grid-template-columns:1fr}
  .hero-stats{gap:8px}

  /* Form grid'leri tek kolon */
  .form-grid,.form-grid.three,.form-cols,.detail-grid{grid-template-columns:1fr}
}

/* ════════════ KÜÇÜK TELEFON (≤480px) ════════════ */
@media (max-width:480px){
  header > nav{padding-left:8px;padding-right:8px}
  body > nav,
  .wrap > nav,
  main > nav{padding-left:8px;padding-right:8px}
  .logo-img{height:34px}
  header > nav > .btn-cikis{padding:5px 10px;font-size:11px}
  header > nav > .nav-center{padding:5px 8px;font-size:11px}
  header > nav .nav-tarih,
  header > nav .nav-date{font-size:10px}
  .nav-date,.nav-sube{display:none}
  .container,.container-wide,.main,.wrap,main{padding-left:8px;padding-right:8px}

  .kpi-row,.kpi-grid,.mopt-grid{grid-template-columns:1fr}
  .model-grid{grid-template-columns:1fr}

  .tbl th,.tbl td,table th,table td{padding:6px 6px;font-size:12px}
}