/*
 * SESAM DataTables styling.
 *
 * Loaded globally by base_application.html so individual app templates do
 * not need their own <link rel="stylesheet" ... tables.css">.
 */

table.dataTable thead tr {
  cursor: default;
  background-color: var(--sesam-light-blue);
  color: var(--sesam-blue);
}

/* DataTables 2.x sets border-collapse: separate by default, which can leave
   1px gaps between cells (visible as thin white seams). Force collapsed
   borders so adjacent cells share their edges seamlessly. */
table.dataTable {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

tr {
  cursor: pointer;
}

table.dataTable tbody tr.selected {
  background-color: var(--sesam-blue) !important;
  color: white;
}

thead th,
thead td {
  padding: 10px 18px;
  box-sizing: border-box;
}

th.dt-center,
td.dt-center { text-align: center; }

th.dt-left,
td.dt-left { text-align: left; }

/* DataTables 2.x auto-detects date columns and right-aligns them. Override
   to keep date columns left-aligned, which matches the rest of the app. */
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-date {
  text-align: left;
}

tbody td {
  padding: 8px 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

/* Striped rows for any `.table-striped` (Bootstrap or DataTables). Bootstrap
   5.3 applies the stripe via an `inset 9999px` box-shadow trick, and
   DataTables 2.x overrides that shadow with its own `--dt-row-stripe` recipe.
   Both end up invisible against the SESAM card surface, so set the row
   background-color directly to the SESAM stripe token. Higher specificity
   than DataTables' own rule (`table.table.dataTable.table-striped > tbody
   > tr:nth-of-type(2n+1) > *`) is not needed because we paint the row, not
   the cell. */
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--sesam-table-striped-bg);
}

/* Shared column rules for scenario / simulation list tables.
   - `sesam-col-created-at`: centered header, left-aligned body cells.
     DataTables auto-tags date columns with `dt-type-date` and forces them
     to `text-align: right`, so match its specificity to win.
   - `sesam-col-comment`: capped to ~1/6 of the table width and truncated
     so a long comment can never blow up the layout. */
table.dataTable thead th.sesam-col-created-at,
table th.sesam-col-created-at { text-align: center; }
table.dataTable tbody td.sesam-col-created-at,
table td.sesam-col-created-at { text-align: left; }

table th.sesam-col-comment,
table td.sesam-col-comment {
  max-width: 16.6667%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#edgesTable,
#tripsTable {
  margin-top: 0 !important;
}

/* ***************************************************
   DataTables 2.x header / footer layout fixes for the
   new .dt-info / .dt-search / .dt-paging markup.
   *************************************************** */

.dt-container .dt-info,
.dt-container .dt-search,
.dt-container .dt-paging,
.dt-container .dt-length {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

.dt-container .dt-search label {
  display: none;
}

.dt-container .dt-search input {
  min-width: 220px;
}

.dt-container > .row:last-child > div {
  padding-bottom: 0.3rem;
}

/* Vertical spacing when the footer row wraps on narrow tables. */
.dt-container > .row:last-child > div > * {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}