/* =====================================================================
   POINT URETIM PORTALI - MOBIL UYUM
   ---------------------------------------------------------------------
   Sayfalar masaustu penceresine gore tasarlandi (sabit genislikli yan
   paneller, cok sutunlu grid'ler, genis tablolar). Bu dosya telefon ve
   tablette o yerlesimi tek sutuna indirir.

   KURAL: Bu dosya SADECE dar ekranda devreye girer (@media). Masaustu
   gorunumu hicbir sekilde degismez.

   Yuklenme: her sayfanin <head>'inde, kendi <style> blogundan SONRA
   gelmeli ki ezebilsin.
   ===================================================================== */

/* ---------- 1) TABLET VE ALTI (<= 1024px) ---------- */
@media (max-width: 1024px) {

  /* Kabuk serbest: yukseklik icerige gore buyusun, sayfa kaysin */
  html, body { height: auto !important; min-height: 100% !important; overflow: visible !important; }

  /* SEVKIYAT: main = "460px 1fr" grid + overflow:hidden. Dar pencerede sol
     panel 460px'te sabit kalip sagdaki alani eziyor, alt kismi da kirpiliyordu.
     Tek sutuna indir ve kirpmayi kaldir. (aside = sevkiyatin kenar cubugu) */
  main {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    overflow: visible !important;
  }
  aside {
    width: auto !important;
    min-width: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }

  /* Sac yerlesim: 3 sutunlu grid (parcalar | tuval | saclar) -> alt alta */
  main:has(#side) {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    height: auto !important;
    overflow: visible !important;
  }
  #side, #sheet-panel, aside {
    width: auto !important;
    min-width: 0 !important;
    max-height: 50vh;              /* kendi icinde kaysin, sayfayi germesin */
    overflow: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }

  /* Is emri: 460px sabit kenar cubugu -> tam genislik, ustte */
  .sidebar {
    width: auto !important;
    min-width: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
  .main, .layout, .app, .wrap {
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
  }
  .content { height: auto !important; overflow: visible !important; }

  /* ---- DAR PENCERE (yarim ekran) BASLIK COKMESI ----
     Ekran genis ama PENCERE dar oldugunda (yarim ekran ~960px) baslik cubugu
     tek satirda kalmaya calisip ogeler ic ice giriyordu: baslik yazisi
     "MODÜL SEÇİMİ" butonunun altina biniyordu. Sarmayi burada da ac. */
  header, .header, .topbar, .toolbar {
    flex-wrap: wrap !important;
    height: auto !important;
    row-gap: 8px !important;
  }
  header h1, .header h1 {
    font-size: 16px !important;
    letter-spacing: .5px !important;
    min-width: 0 !important;
  }
  /* Uc sutunlu grid baslik (is emri) dar pencerede tek sutuna insin */
  .header { grid-template-columns: 1fr !important; text-align: center; }
  .header-left, .header-center, .header-right {
    justify-self: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .header-info { display: none !important; }
  /* Buton ve etiketler kucul, tasma yerine sarsin */
  .btn-back, .btn-theme-select, .theme-btn, .btn-module-back {
    padding: 7px 11px !important;
    font-size: 11.5px !important;
    white-space: nowrap;
  }
  .hdr-right { flex-wrap: wrap !important; justify-content: flex-end; }
}

/* ---------- 2) TELEFON (<= 720px) ---------- */
@media (max-width: 720px) {

  /* ---------------------------------------------------------------
     EN ONEMLI KURAL — SAYFA KABUGUNU SERBEST BIRAK
     Sayfalar masaustu uygulamasi gibi kurulmus: html/body 100vh ve
     overflow:hidden; ic paneller kendi icinde kayiyor. Telefonda icerik
     alt alta dizilince bu kabuk tasan kismi KESIYOR ve hicbir yere
     kaydirilamiyor ("bazi yerleri goremiyorum" sorunu).
     Cozum: kabugun yuksekligini ve overflow'unu serbest birak; sayfa
     uzasin, dokumanin kendisi normal sekilde kaysin.
     DIKKAT: burada overflow-x:hidden KULLANMA — tasan icerigi gizler,
     kullanici oraya ulasamaz. Kaydirilabilir birak.
     --------------------------------------------------------------- */
  html, body {
    height: auto !important;
    min-height: 100% !important;
    max-width: 100%;
    overflow: visible !important;
  }
  /* Masaustu kabuk katmanlari: kirpma yapmasinlar */
  main, .main, .layout, .app, .wrap, .content, .sidebar,
  #side, aside, .tab-pane, .panel-body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* Gercekten kendi icinde kaymasi gerekenler (tuval, listeler) */
  #canvas-area, #sheet-list, .history-list, .pg-liste, .parts-list, #parts-list {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  * { min-width: 0; }

  /* iOS: 16px altindaki inputlara odaklaninca sayfayi zoomlar. Engelle. */
  input, select, textarea, button {
    font-size: 16px !important;
  }

  /* Dokunma hedefleri buyusun */
  button, .btn, .btn-mini, a.back, .theme-btn {
    min-height: 40px;
  }

  /* ----- Ortak baslik cubugu (markalama, kayitlar, sac yerlesim) ----- */
  header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  header h1 {
    font-size: 15px !important;
    order: 3;
    width: 100%;
    letter-spacing: .5px !important;
  }
  header h1 small { display: block; margin-left: 0 !important; font-size: 11px !important; }
  header .brand img { height: 30px !important; }
  .hdr-right { margin-left: auto; }
  .theme-btn { padding: 7px 10px !important; font-size: 11px !important; }
  .theme-btn span { display: none; }   /* sadece renk noktasi kalsin */

  /* ----- IS EMRI baslik cubugu (.header = 3 sutunlu GRID) -----
     Masaustunde 'logo | baslik | butonlar' seklinde 1fr auto 1fr.
     Telefonda orta sutun tasip yanlardakilerin USTUNE biniyordu.
     Cozum: tek sutuna indir, her sey alt alta ve ortali. */
  .header {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    text-align: center;
  }
  .header-left, .header-center, .header-right {
    justify-self: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .header-center {
    flex-direction: column !important;
    gap: 6px !important;
  }
  .header-center .header-text { text-align: center !important; }
  .header h1 {
    font-size: 17px !important;
    letter-spacing: .5px !important;
    line-height: 1.25 !important;
  }
  .header-sub { font-size: 10.5px !important; letter-spacing: .5px !important; margin-top: 2px !important; }
  .header-left img, .header-logo-link img { height: 30px !important; width: auto !important; }
  .header-info { display: none !important; }   /* surum yazisi telefonda yer kaplamasin */
  .btn-back, .btn-theme-select { padding: 7px 11px !important; font-size: 11px !important; }

  /* ----- Kayan "İLETİŞİM" butonu form alanlarinin ustune biniyordu ----- */
  #point-comm-fab {
    right: 10px !important;
    bottom: 10px !important;
    padding: 9px 12px !important;
    font-size: 11px !important;
    letter-spacing: .5px !important;
    opacity: .93;
  }
  /* Sayfanin en altindaki icerik butonun altinda kalmasin */
  body { padding-bottom: 64px !important; }

  /* Sayfa altindaki dev logo telefonda yer kaplamasin */
  .bigbrand { padding: 24px 0 4px !important; }
  .bigbrand img { max-width: 70% !important; }

  /* ----- Modul secim ekrani: kartlar tek sutun ----- */
  .module-card {
    width: 100% !important;
    max-width: 420px;
    padding: 18px !important;
  }
  .module-card h3 { font-size: 17px !important; }
  .module-card p  { font-size: 12.5px !important; }
  #picker { padding: 12px !important; overflow-y: auto !important; }

  /* ----- Giris ekrani ----- */
  .login-card, .card, .box {
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 18px !important;
  }

  /* ----- Tablolar: yatay kaydirilabilir olsun, sayfayi germesin ----- */
  .sarma, .table-wrap, .tablo-sarma {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  table { font-size: 12.5px !important; }
  th, td { padding: 8px 8px !important; }

  /* ----- KAYITLAR: tablo -> kart gorunumu ----- */
  /* Telefonda 6 sutunlu tablo okunmaz; her satiri karta cevir. */
  body:has(#govde) thead { display: none; }
  body:has(#govde) table, body:has(#govde) tbody,
  body:has(#govde) tr,    body:has(#govde) td { display: block; width: 100%; }
  body:has(#govde) tbody tr {
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--bg-panel);
  }
  body:has(#govde) tbody td {
    border: none !important;
    padding: 3px 0 !important;
  }
  body:has(#govde) .islem { justify-content: flex-start !important; margin-top: 8px; }
  body:has(#govde) .btn-mini { padding: 8px 14px !important; }
  .filtreler { gap: 8px !important; }
  .sekmeler { width: 100%; }
  .sekmeler button { flex: 1; padding: 10px 8px !important; font-size: 12px !important; }
  .ara { width: 100%; }

  /* ----- Markalama sayfalari (panel/filtre/palet) ----- */
  main { padding: 16px 12px 28px !important; }
  .drop { padding: 30px 14px !important; }
  .drop .ic { font-size: 40px !important; }
  .drop .t  { font-size: 15px !important; }
  .picks { flex-direction: column; }
  .picks button { width: 100%; }
  .kodbox { flex-direction: column; align-items: stretch !important; }
  .kodbox input { min-width: 0 !important; width: 100%; }
  .bar { flex-direction: column; align-items: stretch !important; }
  .bar .btn { width: 100%; }

  /* ----- Sac yerlesim ----- */
  #side { max-height: 55vh !important; }
  .toolbar, #toolbar, .topbar, header + div[class*="bar"] {
    flex-wrap: wrap !important;
    height: auto !important;
    padding: 8px !important;
    gap: 8px !important;
  }
  #canvas-area { padding: 10px !important; min-height: 55vh; }

  /* ----- Is emri ----- */
  .sidebar { padding: 12px !important; }
  .content { padding: 12px !important; }
  .tab-btn { padding: 9px 12px !important; font-size: 12.5px !important; }
  /* Sekme seridi: ALT SATIRA GECSIN, yana kaydirma isteme.
     (Once nowrap+scroll denendi; sekmeler sagdan kesildi ve kullanici
      son sekmeye ulasamadi. Telefonda sarmak dogru davranis.) */
  .tabs, .tab-bar, .tab-buttons, .sidebar-tabs {
    flex-wrap: wrap !important;
    overflow: visible !important;
    padding: 8px 10px 0 !important;
    gap: 6px !important;
  }
  .tab-btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    padding: 9px 10px !important;
    font-size: 11.5px !important;
    letter-spacing: 0 !important;
  }

  /* ----- Pencereler (modal) tam ekrana yakin ----- */
  .history-panel, .pg-kutu, .modal-box, .theme-modal-box {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 88vh !important;
  }
  .theme-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- 3) DAR TELEFON (<= 420px) ---------- */
@media (max-width: 420px) {
  header h1 { font-size: 14px !important; }
  .sekmeler button { font-size: 11px !important; padding: 9px 5px !important; }
  .theme-grid { grid-template-columns: 1fr !important; }
}

/* ---------- 4) MASAUSTU MODULLERI ICIN UYARI ---------- */
/* Cizim programi ve sevkiyat planlayici telefonda kullanilabilir degil
   (CAD tuvali / 3B sahne). Gizlemiyoruz ama kullaniciyi uyariyoruz. */
.mobil-uyari { display: none; }
@media (max-width: 720px) {
  .mobil-uyari {
    display: block;
    background: color-mix(in srgb, var(--accent2) 18%, var(--bg-panel));
    border: 1px solid var(--accent2);
    color: var(--text);
    border-radius: 10px;
    padding: 11px 14px;
    margin: 10px 12px;
    font-size: 12.5px;
    line-height: 1.5;
  }
  .mobil-uyari b { color: var(--accent2); }
}
