/* Keep data tables compact and centred within their cards. */
.table-wrap {
  display: flex;
  justify-content: center;
}

.table-wrap > table {
  width: max-content;
  max-width: 100%;
}

.table-wrap > table th,
.table-wrap > table td {
  padding: 10px 12px;
}

/* Category/allocation tables: text is in column two; the remaining data is numeric. */
.table-wrap > table:not(#opsTable) th:first-child,
.table-wrap > table:not(#opsTable) td:first-child,
.table-wrap > table:not(#opsTable) th:nth-child(n + 3),
.table-wrap > table:not(#opsTable) td:nth-child(n + 3) {
  text-align: center;
}

/* The planner projection has a text category column followed by numeric data. */
#planner-result .table-wrap > table th:not(:first-child),
#planner-result .table-wrap > table td:not(:first-child) {
  text-align: center;
}

/* Operation titles remain left-aligned; quantity, amount and currency are centred. */
#opsTable th:nth-child(4),
#opsTable th:nth-child(5),
#opsTable th:nth-child(6),
#opsTable td:nth-child(4),
#opsTable td:nth-child(5),
#opsTable td:nth-child(6) {
  text-align: center;
}

@media (max-width: 800px) {
  .table-wrap {
    justify-content: flex-start;
  }
}