/* public/css/mobile-safety.css */
/* Additive, non-breaking mobile fixes */
html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }
*{ min-width:0; } /* prevents flex overflow */
img,video,canvas,svg{ max-width:100%; height:auto; } /* media scales on small screens */

/* Minimal utility subset (Tailwind-like) to make appended classes effective */
.w-full{ width:100% !important; }
.min-w-full{ min-width:100% !important; }
.h-40{ height:10rem !important; }
.object-cover{ object-fit:cover !important; }
.grid{ display:grid !important; }
.grid-cols-1{ grid-template-columns: repeat(1,minmax(0,1fr)); }
.gap-4{ gap:1rem !important; }
@media (min-width:640px){
  .sm\:w-auto{ width:auto !important; }
  .sm\:grid-cols-2{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px){
  .lg\:grid-cols-3{ grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* Helper classes (pure CSS; safe to use anywhere) */
.safe-wrap{
  width:100%; max-width:72rem; /* ~max-w-screen-xl */
  margin-left:auto; margin-right:auto;
  padding-left:1rem; padding-right:1rem;
}
@media (min-width:640px){ .safe-wrap{ padding-left:1.5rem; padding-right:1.5rem; } }

.table-scroll{
  overflow-x:auto;
  margin-left:-1rem; margin-right:-1rem;
  padding-left:1rem; padding-right:1rem;
}
.card-mobile{ width:100%; max-width:100%; border-radius:1rem; }
.break-any{ word-break:break-word; overflow-wrap:anywhere; }

.hidden-scrollbar{
  scrollbar-width:none; -ms-overflow-style:none;
}
.hidden-scrollbar::-webkit-scrollbar{ display:none; }