/**
 * Styles for the spec tables the oc-machine-catalog plugin renders on Model
 * pages (see oc_wrap_machine_table() in machine-spec-tables.php, which emits
 * the classes used here). The parent's tailwind.config.js never scans this
 * theme, so Tailwind classes wouldn't be compiled — plain CSS instead.
 */

/* table-layout: fixed + a fixed-width first <col> (see the <colgroup>
   emitted by oc_wrap_machine_table()) keeps every panel's table using the
   exact same column widths — otherwise each <table> sizes its own columns
   from its own content (table-layout: auto default) and panels with longer
   row labels drift out of alignment with the others. Adjust
   --machine-spec-label-width to taste. */
.machine-spec-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  font-size: 0.875rem;
}

.machine-spec-table col:first-child {
  width: var(--machine-spec-label-width, 12rem);
}

.machine-spec-table th,
.machine-spec-table td {
  border: 1px solid var(--oc-border);
  padding: 0.5rem 0.75rem;
  text-align: center;
  overflow-wrap: break-word;
}

.machine-spec-table thead th {
  background: var(--oc-surface);
  font-weight: var(--font-weight-semibold);
}

.machine-spec-table tbody th {
  text-align: left;
  font-weight: var(--font-weight-semibold);
  background: var(--oc-surface-alt);
}

.machine-spec-table td.has-value {
  color: #1a7a3c;
  font-weight: var(--font-weight-semibold);
}

.machine-spec-table td.no-value {
  color: #bbb;
}

/* Solution Finder deep link (?machineID=) highlight — generalizes the
   legacy site's mespackcpt.php column-selected mechanism. */
.machine-spec-table th.column-selected {
  background: #ffe9b3;
  outline: 1px solid var(--oc-highlight);
  outline-offset: 2px;
}

.machine-spec-table td.column-selected {
  background: #fff6e0;
}