/* mobile.css — Traven shared mobile/responsive optimizations */

* { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* Make any wide table scroll horizontally instead of breaking layout */
table { width: 100%; }
.table-responsive, .table-scroll { -webkit-overflow-scrolling: touch; }

@media (max-width: 768px) {
  .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
  .settings-container { margin: 14px auto !important; }

  /* Stack flex toolbars on small screens */
  .d-flex.justify-content-between { flex-wrap: wrap; gap: 8px; }

  /* Wide tables scroll */
  table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Cards & headings breathe less on mobile */
  .card-header { padding: 14px !important; }
  h1, .h1 { font-size: 1.6rem; }
  h2, .h2 { font-size: 1.4rem; }
  h3, .h3 { font-size: 1.2rem; }

  /* Tabs wrap instead of overflowing */
  .nav-tabs { flex-wrap: wrap; }
  .nav-tabs .nav-link { padding: 6px 10px; font-size: .85rem; }

  /* Modals fit small screens */
  .modal-dialog { margin: 10px; }

  /* Buttons in toolbars are easier to tap */
  .btn-sm { padding: .35rem .6rem; }

  /* iframes (admin VIP monitor etc.) fit height better */
  iframe { height: 70vh !important; }

  /* Floating invite button smaller */
  .invite-btn { right: 14px; bottom: 14px; }
}

/* Avoid 16px-zoom on iOS by keeping inputs >= 16px */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}