/* lmg-shared/mobile.css — shared responsive layer for all ERP panels + hub.
   Targets the common design-system classes: .shell .side .main .topbar .stats / hub .top .controls */

#lmgm-burger{display:none}

@media (max-width:820px){
  /* ---------- panel shell ---------- */
  .shell{grid-template-columns:1fr !important}
  .main{min-width:0 !important}

  /* sidebar becomes an off-canvas drawer */
  .side{position:fixed !important; top:0; left:0; width:82vw; max-width:300px; height:100vh !important;
        z-index:300; transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
        box-shadow:0 0 60px rgba(0,0,0,.55); overflow-y:auto}
  body.lmgm-open .side{transform:none}
  #lmgm-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:290; opacity:0; visibility:hidden; transition:.25s}
  body.lmgm-open #lmgm-backdrop{opacity:1; visibility:visible}

  /* hamburger (injected by mobile.js into .topbar) */
  #lmgm-burger{display:inline-flex !important; align-items:center; justify-content:center; width:42px; height:42px;
    border:1px solid var(--line,rgba(255,255,255,.14)); border-radius:11px; background:transparent; color:inherit;
    cursor:pointer; flex:0 0 auto; order:-1}
  #lmgm-burger svg{width:20px; height:20px}

  /* topbar wraps instead of overflowing */
  .topbar{flex-wrap:wrap !important; height:auto !important; min-height:0 !important;
    row-gap:8px !important; column-gap:8px !important; padding:10px 12px !important; justify-content:flex-start !important}
  .topbar > *{flex-shrink:1; min-width:0}

  /* wide tables scroll horizontally (wrapper added by mobile.js too) */
  .lmgm-tw{overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%}
  table{min-width:520px}

  /* stack any multi-column grids */
  .stats,.kpis,.two-col,.g3,.g4,.dash3,.three,.grid-2,.grid-3{grid-template-columns:1fr !important}

  /* generous padding trim */
  .main > *{padding-left:14px; padding-right:14px}

  /* ---------- hub (index.html: .top + .controls + panel cards) ---------- */
  .top{flex-wrap:wrap !important; height:auto !important; gap:10px !important; padding:12px 14px !important}
  .top .controls{flex-wrap:wrap !important; gap:8px !important; justify-content:flex-start !important}
  .top .brand .sub{display:none}              /* drop the "· PANEL HUB" subtitle on tiny screens */
}

@media (max-width:480px){
  .topbar .seg, .topbar .brandbar, .top .controls .label{font-size:12px}
  table{min-width:460px}
}

@media (max-width:820px){
  .tbl-wrap,.table-wrap,.tablewrap{overflow-x:auto !important;-webkit-overflow-scrolling:touch}
  .tbl-wrap table,.table-wrap table{min-width:600px}
  .topbar{flex-wrap:wrap !important}
  .topbar .tb-right,.topbar .tb-left{flex-wrap:wrap !important;min-width:0}
}

@media (max-width:820px){
  .side{display:flex !important; flex-direction:column !important}
}

@media (max-width:820px){
  .side{transform:translateX(-100%) !important}
  body.lmgm-open .side{transform:translateX(0) !important}
}

/* ══════ TAM MOBİL CİLA (iPhone / iPhone Pro) — konfor + yağ gibi akış ══════ */
@media (max-width:820px){
  /* iOS: input font-size < 16px odakta otomatik zoom yapar → engelle */
  input,select,textarea{font-size:16px !important}
  /* dokunma temizliği + momentum scroll */
  *{-webkit-tap-highlight-color:transparent}
  .tablewrap,.tbl-wrap,.table-wrap,.twrap,.lmgm-tw{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
  /* alt güvenli alan (home indicator) boşluğu */
  .main,.wrap,.content{padding-bottom:calc(48px + env(safe-area-inset-bottom)) !important}
  /* dokunma hedefleri en az 40px (konfor) */
  button,.btn,.ibtn,.chip,.pchk,.icon-btn{min-height:40px}
  .pchk{min-height:0;width:22px;height:22px}
  /* sticky başlıklar çentik altında kalmasın */
  .top,.topbar{padding-top:calc(10px + env(safe-area-inset-top)) !important}
}
@media (max-width:480px){
  h1{font-size:24px !important}
  .wrap,.content,.main > *{padding-left:14px !important;padding-right:14px !important}
  /* bayi/kalite kartları tam genişlik, rahat */
  .pgroup,.card,.po{border-radius:14px}
}
/* güvenli alan için body arka planı çentiğe taşsın */
@supports(padding:max(0px)){
  body{min-height:100dvh}
}

/* ── MÜŞTERİ PORTAL header — mobilde kompakt (taşma önleme) ── */
@media (max-width:600px){
  .top{flex-wrap:wrap !important; row-gap:8px !important; padding:12px 16px !important}
  .top .brand .sub{display:none !important}         /* alt başlık gizle */
  .lmg-prof .meta{max-width:110px; overflow:hidden}
  .lmg-prof .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px}
  .lmg-prof .rl{display:none}                        /* "Müşteri" rol satırını gizle */
  .top .ibtn{height:38px; padding:0 11px}
  .top .tb-right{flex-wrap:wrap; gap:7px}            /* sağ grup gerekirse alt satıra sarsın */
}