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;
}

/* ==============================
   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;
}

/* Wrapper */
.writer-template-table {
  max-width: 100%;
}

/* Force the DataTables table to fit its container.
   !important is needed to beat the inline style="width:100%" that
   DataTables applies, combined with table-layout: fixed so long URLs
   can't stretch the table past the wrapper. */
.writer-template-table table.sheetTable {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

/* Override the inherited white-space: nowrap on cells.
   Without this, nothing will wrap no matter what else you try. */
.writer-template-table table.sheetTable th,
.writer-template-table table.sheetTable td {
  white-space: normal !important;
  vertical-align: top;
}

/* URL column (2nd column) — break at any character since URLs
   have no spaces to break on. */
.writer-template-table table.sheetTable th:nth-child(2),
.writer-template-table table.sheetTable td:nth-child(2) {
  word-break: break-all;
  overflow-wrap: anywhere;
}
