/* ABOUTME: Styles for the SLD bottom panel — BOM + Topology views. */

.sld-panel {
  margin-top: 8px;
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
}

.sld-tabs {
  display: flex; align-items: center; gap: 4px;
  padding: 0 0 6px;
  border-bottom: 2px solid var(--ind-ink);
  margin-bottom: 8px;
}
.sld-tab {
  padding: 4px 10px;
  background: #fff; color: var(--ind-ink);
  border: 2px solid var(--ind-ink); border-radius: 0;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer; margin: 0;
}
.sld-tab.active { background: var(--ind-ink); color: #fff; }
.sld-tab-meta {
  margin-left: auto;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ind-ink-soft);
}

.sld-view { flex: 1; min-height: 0; overflow: auto; }
.sld-empty {
  padding: 16px; text-align: center; color: var(--ind-ink-soft);
  font-size: 12px;
}

/* ── BOM view ──────────────────────────────────────────────────────── */
.sld-view-bom {
  columns: 2; column-gap: 12px; column-fill: balance;
}
.sld-bom-container {
  break-inside: avoid;
  margin-bottom: 10px;
  border: 2px solid; background: #fff;
}
.sld-bom-head {
  display: flex; align-items: baseline; gap: 6px;
  padding: 4px 8px;
  color: #fff;
  font-size: 12px;
}
.sld-bom-head-name { font-weight: 800; }
.sld-bom-head-type { font-size: 10px; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.04em; }
.sld-bom-head-attrs {
  font-size: 10px; opacity: 0.85; margin-left: auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sld-bom-bus {
  padding: 3px 8px;
  font-size: 10px; color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sld-bom-child {
  display: grid;
  grid-template-columns: 32px 70px 90px 1fr;
  align-items: baseline;
  gap: 6px;
  padding: 3px 8px;
  font-size: 11px;
  border-top: 1px solid #eee;
}
.sld-bom-child:nth-child(even) { background: var(--ind-paper-alt); }
.sld-bom-qty { font-variant-numeric: tabular-nums; color: var(--ind-ink-soft); font-weight: 700; }
.sld-bom-type { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.sld-bom-name { font-weight: 700; }
.sld-bom-attrs { color: var(--ind-ink-soft); font-size: 10px; }

/* ── Topology tree ─────────────────────────────────────────────────── */
.sld-tree-frame {
  height: 100%; min-height: 320px;
  background: var(--ind-paper-alt);
  border: 1px solid var(--ind-gray);
  position: relative;
  overflow: hidden;
}
.sld-tree-svg {
  width: 100%; height: 100%; display: block;
  cursor: grab;
}
.sld-tree-svg:active { cursor: grabbing; }