/* ---------------------------------------------------------------------------
   Layout for the input/output parameter tables
   --------------------------------------------------------------------------- */

/* The table scrolls inside this box rather than overflowing the page. Capping
   the height keeps the horizontal scrollbar directly beneath the visible rows -
   previously it belonged to the page body, so reaching it meant scrolling past
   every row in the table. */
.table-container {
  width: 100%;
  max-width: 100%;
  max-height: 75vh;
  overflow: auto;
}

/* Material wraps every table in its own .md-typeset__scrollwrap, which scrolls
   horizontally but is as tall as the whole table - so its scrollbar sits below the
   last row, which is what made the tables look cut off with no way to scroll short
   of jumping to the bottom of the page. Neutralise it and let .table-container be
   the only scroller. */
.table-container .md-typeset__scrollwrap {
  margin: 0;
  overflow: visible;
}

.table-container .md-typeset__table {
  display: block;
  padding: 0;
  overflow: visible;
}

.table-container .md-typeset__table table {
  display: table;
  margin: 0;
}

#vehicleTable, #scenarioTable, #ledgerTable, #configTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* Column widths below are honoured exactly */
  /* Material sets overflow:hidden on tables, which would make the table itself the
     sticky headers' scroll container and stop them sticking to .table-container. */
  overflow: visible;
}

#vehicleTable th, #vehicleTable td, #scenarioTable th, #scenarioTable td, #ledgerTable th, #ledgerTable td, #configTable th, #configTable td {
  border: 1px solid var(--md-default-fg-color--lightest);
  padding: 10px;
  text-align: left;
  vertical-align: top;
  white-space: normal; /* Allows text wrapping */
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Column widths. Each table's percentages must add up to exactly 100% - when
   they summed to more (scenario was 110%, ledger 105%) the table overflowed its
   container and was cut off at the right edge. */

/* Vehicle: Parameter | Full Form | Units | Description | Powertrain | Data Type */
#vehicleTable th:nth-child(1) { width: 18%; }
#vehicleTable th:nth-child(2) { width: 22%; }
#vehicleTable th:nth-child(3) { width: 10%; }
#vehicleTable th:nth-child(4) { width: 30%; }
#vehicleTable th:nth-child(5) { width: 10%; }
#vehicleTable th:nth-child(6) { width: 10%; }

/* Scenario: Parameter | Full Form | Units | Description | Powertrains | T3CO Component | Data Type */
#scenarioTable th:nth-child(1) { width: 16%; }
#scenarioTable th:nth-child(2) { width: 20%; }
#scenarioTable th:nth-child(3) { width: 8%; }
#scenarioTable th:nth-child(4) { width: 26%; }
#scenarioTable th:nth-child(5) { width: 10%; }
#scenarioTable th:nth-child(6) { width: 12%; }
#scenarioTable th:nth-child(7) { width: 8%; }

/* Ledger: Parameter | Category | Full Form | Units | Description | Data Type */
#ledgerTable th:nth-child(1) { width: 18%; }
#ledgerTable th:nth-child(2) { width: 12%; }
#ledgerTable th:nth-child(3) { width: 18%; }
#ledgerTable th:nth-child(4) { width: 8%; }
#ledgerTable th:nth-child(5) { width: 34%; }
#ledgerTable th:nth-child(6) { width: 10%; }

/* Config: Parameter | Full Form | Units | Description | Data Type */
#configTable th:nth-child(1) { width: 20%; }
#configTable th:nth-child(2) { width: 24%; }
#configTable th:nth-child(3) { width: 10%; }
#configTable th:nth-child(4) { width: 34%; }
#configTable th:nth-child(5) { width: 12%; }

/* Sticky headers - relative to .table-container, so they stay put while rows scroll */
#vehicleTable th, #scenarioTable th, #ledgerTable th, #configTable th {
  background-color: var(--md-default-bg-color);
  box-shadow: inset 0 -1px 0 var(--md-default-fg-color--lightest);
  cursor: pointer;
  position: sticky;
  top: 0;
  z-index: 2;
}

#vehicleTable tr:hover, #scenarioTable tr:hover, #ledgerTable tr:hover, #configTable tr:hover {
  background-color: var(--md-default-fg-color--lightest);
}

/* DataTables' search box is moved above .table-container by datatables.js so it
   does not scroll away with the rows. */
.dataTables_filter {
  float: right;
  margin-bottom: .4rem;
}

/* ---------------------------------------------------------------------------
   Filter controls
   --------------------------------------------------------------------------- */

.filter-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  margin-bottom: .6rem;
}

/* Each label travels with its control, so the row wraps between filters rather
   than stranding a label on one line and its dropdown on the next. */
.filter-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}

.filter-item select {
  max-width: 14rem;
}

.filter-label {
  white-space: nowrap;
}

.button-container {
  display: flex;
  justify-content: flex-end;
  flex-grow: 1;
}

#downloadTemplateBtn {
  background-color: #3F51B5; /* MkDocs Material indigo color */
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#downloadTemplateBtn:hover {
  background-color: #303F9F; /* Darker shade for hover effect */
}

/* ---------------------------------------------------------------------------
   Multi-select rendered as a collapsed checkbox dropdown (see datatables.js).
   Without JavaScript the native <select multiple> is shown instead.
   --------------------------------------------------------------------------- */

.ms-dropdown {
  position: relative;
  display: inline-block;
}

.ms-dropdown__native {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ms-dropdown__toggle {
  min-width: 11rem;
  padding: .3rem .6rem;
  font-size: .75rem;
  text-align: left;
  cursor: pointer;
  color: var(--md-default-fg-color);
  background-color: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: 4px;
}

.ms-dropdown__toggle::after {
  content: " ▾";
  float: right;
}

.ms-dropdown__panel {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 10;
  min-width: 100%;
  max-height: 16rem;
  overflow-y: auto;
  padding: .3rem;
  background-color: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}

.ms-dropdown__option {
  display: block;
  padding: .2rem .3rem;
  font-size: .75rem;
  white-space: nowrap;
  cursor: pointer;
}

.ms-dropdown__option:hover {
  background-color: var(--md-default-fg-color--lightest);
}

/* ---------------------------------------------------------------------------
   Horizontal scrolling for wide tables
   --------------------------------------------------------------------------- */

/* Keep columns readable on narrower windows. Below these widths the table box
   scrolls sideways instead of squeezing the columns until words break mid-word. */
#configTable   { min-width: 900px; }
#vehicleTable  { min-width: 1100px; }
#ledgerTable   { min-width: 1200px; }
#scenarioTable { min-width: 1300px; }

/* Scrollbar mirrored above each table box. datatables.js creates it, keeps it in
   step with the box, and hides it while the table fits. */
.table-top-scrollbar {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

.table-top-scrollbar > div {
  height: 1px;
}

.table-top-scrollbar[hidden] {
  display: none;
}

/* macOS hides scrollbars until the user scrolls, which would leave the top bar
   invisible. Styling the WebKit scrollbar keeps both bars drawn in Chrome and
   Safari; Firefox takes the standard properties instead. */
.table-top-scrollbar::-webkit-scrollbar,
.table-container::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.table-top-scrollbar::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb {
  background-color: var(--md-default-fg-color--lighter);
  border-radius: 5px;
}

.table-top-scrollbar::-webkit-scrollbar-track,
.table-container::-webkit-scrollbar-track {
  background-color: var(--md-default-fg-color--lightest);
}

@supports not selector(::-webkit-scrollbar) {
  .table-top-scrollbar,
  .table-container {
    scrollbar-width: thin;
    scrollbar-color: var(--md-default-fg-color--lighter) var(--md-default-fg-color--lightest);
  }
}