/*
 * MinIO Console — mobile-responsive overrides
 * Mobile-first: base styles for phones (<600px), desktop override via media query.
 * Targets MUI class names used by MinIO Console (React + MUI).
 */

/* ── Global: tighten padding on mobile ── */
.MuiContainer-root,
#root .MuiBox-root {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* ── Sidebar: collapse on mobile ── */
#root nav,
.MuiDrawer-root .MuiDrawer-paper {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: none !important;
}

/* Let main content fill full width when sidebar is collapsed */
#root > .MuiBox-root > .MuiBox-root:last-child,
.MuiBox-root[class*="mainContainer"],
main,
#root main {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
}

/* ── Top bar: compact ── */
.MuiToolbar-root {
  min-height: 48px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* ── Bucket list: stack cards vertically ── */
.MuiGrid-container {
  flex-direction: column !important;
}

.MuiGrid-container > .MuiGrid-item {
  max-width: 100% !important;
  flex-basis: 100% !important;
}

/* ── Tables (object browser, access keys): horizontal scroll ── */
.MuiTableContainer-root {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.MuiTable-root {
  min-width: 500px;
}

/* Hide low-priority table columns on mobile */
.MuiTableCell-root:nth-child(n+4) {
  display: none !important;
}

.MuiTableCell-root {
  padding: 6px 8px !important;
  font-size: 0.8125rem !important;
}

/* ── Action buttons: full-width on mobile ── */
.MuiButton-root {
  font-size: 0.8125rem !important;
}

/* ── Dialogs: full-screen on mobile ── */
.MuiDialog-paper {
  margin: 8px !important;
  max-width: calc(100vw - 16px) !important;
  width: 100% !important;
}

/* ── Object browser breadcrumb: wrap ── */
.MuiBreadcrumbs-root {
  flex-wrap: wrap;
}

.MuiBreadcrumbs-ol {
  flex-wrap: wrap;
}

/* ── Desktop: restore defaults ── */
@media (min-width: 600px) {
  .MuiContainer-root,
  #root .MuiBox-root {
    padding-left: revert !important;
    padding-right: revert !important;
  }

  #root nav,
  .MuiDrawer-root .MuiDrawer-paper {
    width: revert !important;
    min-width: revert !important;
    overflow: revert !important;
    padding: revert !important;
    border: revert !important;
  }

  #root > .MuiBox-root > .MuiBox-root:last-child,
  .MuiBox-root[class*="mainContainer"],
  main,
  #root main {
    margin-left: revert !important;
    width: revert !important;
    max-width: revert !important;
  }

  .MuiToolbar-root {
    min-height: revert !important;
    padding-left: revert !important;
    padding-right: revert !important;
  }

  .MuiGrid-container {
    flex-direction: revert !important;
  }

  .MuiGrid-container > .MuiGrid-item {
    max-width: revert !important;
    flex-basis: revert !important;
  }

  .MuiTableCell-root:nth-child(n+4) {
    display: revert !important;
  }

  .MuiTableCell-root {
    padding: revert !important;
    font-size: revert !important;
  }

  .MuiButton-root {
    font-size: revert !important;
  }

  .MuiDialog-paper {
    margin: revert !important;
    max-width: revert !important;
    width: revert !important;
  }
}