/* ==========================================================================
   DataXing Admin - Mobile-friendly responsive utilities
   Non-invasive overrides applied globally via public/index.html
   Breakpoints align with Bootstrap 4.6 / Material-UI (sm=576, md=768/960, lg=992/1280)
   ========================================================================== */

/* ---- Tables: horizontal scroll on small screens ------------------------- */
/* Apply by wrapping a table in <div class="table-responsive-wrap"> … */
.table-responsive-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Safety net: any table directly inside the admin content area gets a
   horizontal scroll on narrow viewports without needing a wrapper. */
@media (max-width: 767.98px) {
  .MuiTableContainer-root,
  table.table,
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---- Main panel should not overflow viewport on mobile ------------------ */
@media (max-width: 959.98px) {
  /* Material-UI makeStyles class names are hashed, so target structural
     descendants instead. Keeps padding tight on small devices. */
  #root > div > div > div[class*="mainPanel"],
  #root > div > div > div:last-child {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  /* Content padding reduced on mobile for more usable width */
  div[class*="makeStyles-content"],
  .content {
    padding: 15px 10px !important;
  }
}

/* ---- Forms: stack vertically below md ---------------------------------- */
@media (max-width: 767.98px) {
  /* Bootstrap form-row / form-inline fallbacks */
  .form-row > [class*="col-"],
  .form-inline > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 10px;
  }

  .form-inline {
    display: block;
  }

  .form-inline .form-control,
  .form-inline .input-group {
    width: 100%;
    margin-bottom: 8px;
  }

  /* MUI Grid items inside forms: keep half-width grids single-column on mobile */
  .MuiGrid-item.MuiGrid-grid-sm-6,
  .MuiGrid-item.MuiGrid-grid-md-6,
  .MuiGrid-item.MuiGrid-grid-md-4,
  .MuiGrid-item.MuiGrid-grid-md-3 {
    max-width: 100% !important;
    flex-basis: 100% !important;
  }

  /* Common button rows should wrap, not overflow */
  .button-row,
  .btn-group-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .button-row .btn,
  .btn-group-responsive .btn {
    flex: 1 1 auto;
  }
}

/* ---- Navbar/AppBar tweaks for mobile ----------------------------------- */
@media (max-width: 767.98px) {
  header.MuiAppBar-root .MuiToolbar-root {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* ---- Generic images / cards / modals never overflow -------------------- */
img,
.card,
.MuiCard-root {
  max-width: 100%;
}

@media (max-width: 575.98px) {
  .modal-dialog,
  .MuiDialog-paper {
    margin: 8px !important;
    max-width: calc(100% - 16px) !important;
  }
}