/* Searchable BOM parts table — themed for Material (light + dark aware).
   Markup is generated by generate_bom_hook.py; all styling lives here so the
   table inherits the site theme via Material's CSS custom properties. */

.parts-table-container {
  margin: 1.2em 0;
}

/* --- Filter bar ----------------------------------------------------------- */
.parts-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.2rem;
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  background: var(--md-default-fg-color--lightest);
  border-radius: 0.3rem;
  font-size: 0.72rem;
}

.parts-filters label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.parts-filters input[type="text"],
.parts-filters select {
  padding: 0.35rem 0.5rem;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font-size: 0.72rem;
}

.parts-filters input[type="text"] {
  min-width: 16rem;
}

.parts-filters input:focus,
.parts-filters select:focus {
  outline: none;
  border-color: var(--md-accent-fg-color);
}

#partsCount {
  margin-left: auto;
  color: var(--md-default-fg-color--light);
  font-weight: 600;
}

/* --- Table ---------------------------------------------------------------- */
.parts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.parts-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  padding: 0.6rem 0.7rem;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.parts-table thead th:hover {
  filter: brightness(1.08);
}

.parts-table th.num,
.parts-table td.num {
  text-align: right;
}

.parts-table tbody td {
  padding: 0.45rem 0.7rem;
  border-bottom: 0.05rem solid var(--md-default-fg-color--lightest);
  vertical-align: top;
}

.parts-table tbody tr:nth-child(odd) {
  background: var(--md-default-fg-color--lightest);
}

.parts-table tbody tr:hover {
  background: var(--md-default-fg-color--lighter);
}

.parts-table .mono {
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.9em;
  color: var(--md-code-fg-color);
}

/* --- Status / criticality badges ----------------------------------------- */
.bom-badge {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 0.8rem;
  font-size: 0.92em;
  font-weight: 600;
  white-space: nowrap;
}

.bom-badge--green { background: rgba(76, 175, 80, 0.16);  color: #2e7d32; }
.bom-badge--amber { background: rgba(255, 152, 0, 0.16);  color: #b26a00; }
.bom-badge--red   { background: rgba(244, 67, 54, 0.16);  color: #c62828; }
.bom-badge--blue  { background: rgba(33, 150, 243, 0.16); color: #1565c0; }
.bom-badge--grey  { background: rgba(158, 158, 158, 0.18); color: #5c5c5c; }

/* Lighten badge text on the dark (slate) scheme if a palette toggle is added */
[data-md-color-scheme="slate"] .bom-badge--green { color: #81c784; }
[data-md-color-scheme="slate"] .bom-badge--amber { color: #ffb74d; }
[data-md-color-scheme="slate"] .bom-badge--red   { color: #e57373; }
[data-md-color-scheme="slate"] .bom-badge--blue  { color: #64b5f6; }
[data-md-color-scheme="slate"] .bom-badge--grey  { color: #bdbdbd; }

@media screen and (max-width: 45em) {
  .parts-filters input[type="text"] { min-width: 0; width: 100%; }
  .parts-table { font-size: 0.68rem; }
}