/* admin-mobile.css — phone layout fixes for the console, loaded last.
   Styling only: no markup or script of any panel changes.

   1. Section tab rows (Mentorship, Reports, Remedy): they scroll sideways and
      no longer bounce up and down when touched (iOS gives an overflow-x:auto
      row a vertical scroll too). On phones Refresh gets its own line, so it
      never sits on top of a tab name, and a soft fade shows there is more.
   2. Batch selector: never wider than its card.
   3. Any sideways-scrolling chip row in the console: sideways only. */

html body :is(#pPmp,#pReports,#pRemedy) .sec-tabs,
html body :is(#pPmp,#pReports) .pmp-tabs{
  overflow-y:hidden;overscroll-behavior:contain;touch-action:pan-x;-webkit-overflow-scrolling:touch}

/* batch bar: the select shrinks to the card */
html body .bbar{min-width:0;max-width:100%}
html body .bbar-main{min-width:0}
html body .bbar-ctl{min-width:0;max-width:100%}
html body .bbar-ctl select{max-width:100%;min-width:0;text-overflow:ellipsis}

@media (max-width:700px){
  html body :is(#pPmp,#pReports,#pRemedy) .sec-bar{display:flex;flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap}
  html body :is(#pPmp,#pReports,#pRemedy) .sec-acts{order:-1;margin:0 0 6px;padding:0;justify-content:flex-end;flex-wrap:wrap}
  html body :is(#pPmp,#pReports,#pRemedy) .sec-tabs{width:100%;max-width:100%;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    padding-right:24px}
  html body :is(#pPmp,#pReports,#pRemedy) .sec-tabs button{padding:12px 12px 13px;font-size:14px}
  html body .bbar{display:flex;flex-direction:column;align-items:stretch}
  html body .bbar-ctl{width:100%;display:flex;flex-direction:column;gap:8px}
  html body .bbar-ctl select{width:100%}
}