/* Mobile polish — app.css ke upar extra mobile fixes. Hatana ho to layout.php se mobile.css wali line hata do. */
html,body{overflow-x:clip}
img,video{max-width:100%;height:auto}
pre{overflow-x:auto}

/* iPhone app (home screen) mein notch / status bar ke neeche content na chhupe */
.mtop{padding-top:env(safe-area-inset-top)}
@media (max-width:860px){
  .mtop{height:calc(54px + env(safe-area-inset-top))}
  .side{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);width:min(280px,86vw)}
  .side nav a{padding:12px 12px}
  .icomp{padding-bottom:calc(8px + env(safe-area-inset-bottom))}

  /* iPhone pe input tap karte hi zoom na ho (16px se chhota font zoom karta hai) */
  input,select,textarea{font-size:16px}

  /* Tables: jo table wrapper ke bina hai woh bhi side-scroll ho, page na toote */
  :not(.tbl-wrap) > .tbl, :not(.tbl-wrap) > .kv{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .tbl th,.tbl td{padding:9px 10px}
  .tbl-wrap{-webkit-overflow-scrolling:touch}

  /* Cards, headings, buttons */
  .card{padding:14px;margin-bottom:14px}
  .card.flush{padding:0}
  .page-h{align-items:flex-start;margin-bottom:14px}
  .page-h h1{font-size:1.35rem}
  .btn{min-height:40px}
  .pager{flex-wrap:wrap;justify-content:center}

  /* Popup / modal: screen mein fit, neeche se sheet ki tarah */
  .modal{padding:10px;align-items:flex-end}
  .modal-box{max-height:calc(100dvh - 20px);padding:16px;border-radius:16px}

  /* Pipeline (kanban): column screen ke hisaab se, swipe karke agla column */
  .kb-cols .kb-col{flex-basis:84vw;max-width:320px;scroll-snap-align:start}
  .kb-cols{scroll-snap-type:x proximity;padding:12px}
  .kb-top{padding:8px 12px}
}
@media (max-width:600px){
  .wrap{padding:12px}
  /* Form rows: chhoti screen pe har field poori width le */
  .row>*{min-width:100%}
  .row>[style*="min-width"]{min-width:100%!important}
  .row>.btn{min-width:0;flex:1 1 auto}
  .actions .btn{flex:1 1 auto}
  .stat b{font-size:1.45rem}
  .tabs{-webkit-overflow-scrolling:touch;scrollbar-width:none}
}

/* Test (20 pages @390px) ke baad: inbox filters aur automation cards screen se bahar ja rahe the */
@media (max-width:860px){
  .ifilters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ifilters::-webkit-scrollbar{display:none}
  .ifilters>*{flex:none}
  .grid>*{min-width:0}
  .card table:not(.tbl):not(.kv){display:block;overflow-x:auto;max-width:100%}
  .card input[type=time]{min-width:0}
}