tbody tr td:first-of-type {
  font-weight: 800;
}

/* ==============================
   1. Stack top nav, main row, bottom nav
============================== */
#ipsLayout_contentArea {
  display: flex;
  flex-direction: column; /* stack vertically */
  width: 100%;
  box-sizing: border-box;
}

/* Top nav */
#ipsLayout_contentArea > nav:first-of-type,
#ipsLayout_contentArea > nav:last-of-type {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* ==============================
   2. Main row: content + sidebar
============================== */
#ipsLayout_mainRow {
  display: flex;           /* row: main + sidebar */
  flex-direction: row;
  width: 100%;
  flex: 1 1 auto;
  box-sizing: border-box;
  overflow: hidden;        /* prevent page scroll from mainRow */
}

/* Main content area */
#ipsLayout_mainArea {
  flex: 1 1 auto;          /* fill available space */
  min-width: 0;            /* allow shrinking in flex */
  overflow-x: auto;        /* horizontal scroll for table */
  box-sizing: border-box;
}

/* Sidebar */
#ipsLayout_sidebar {
  flex: 0 0 auto;          /* fixed width */
  width: 250px;            /* adjust as needed */
  max-width: 250px;
  padding-left: 15px;
  box-sizing: border-box;
}

@media only screen and (max-width: 767px) {
  #ipsLayout_sidebar {
    display: none;
  }
}

/* ==============================
   3. DataTables horizontal scrolling
============================== */
.sheet-embed {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  box-sizing: border-box;
}

.sheet-embed .dt-scroll-body {
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
}

.sheet-embed table.dataTable {
  table-layout: auto !important;  /* natural column widths */
  width: max-content !important;  /* table can exceed container */
  white-space: nowrap;
  box-sizing: border-box;
}

.sheet-embed table.dataTable colgroup col {
  width: auto !important;
}