/* Small additions on top of Bootswatch Flatly (Bootstrap 5.3). */
/* !important: Bootstrap's table-cell colour rules are more specific than these helpers */
.ok { color: var(--bs-success) !important; }
.bad { color: var(--bs-danger) !important; }
.warn { color: var(--bs-warning) !important; }
.muted { color: var(--bs-secondary-color) !important; }
code { font-size: .8em; word-break: break-all; }

.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
  border-radius: 50rem; padding: .1rem .65rem; margin: 0 .35rem .35rem 0; font-size: .875rem;
}
.chip form { display: inline; margin: 0; }
.chip button { border: 0; background: none; color: var(--bs-secondary-color); padding: 0 0 0 .15rem; line-height: 1; cursor: pointer; }
.chip button:hover { color: var(--bs-danger); }

.bulkbar { position: sticky; bottom: 0; z-index: 5; background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); padding: .6rem 0; margin-top: .5rem; }

#drop { border: 2px dashed var(--bs-border-color); border-radius: .5rem; padding: 2.5rem 1rem; text-align: center; }
#drop.over { border-color: var(--bs-primary); background: var(--bs-tertiary-bg); }

/* bulk bar: buttons in one row, the open panel appears under them */
.bulkbar .btn.active { background: var(--bs-primary); color: #fff; }
.bulkpanel { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; padding: .6rem; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; }
.bulkpanel[hidden] { display: none; }
.bulkpanel > div { flex-basis: 100%; }

/* lineage diagram */
.lineage-wrap { overflow-x: auto; border: 1px solid var(--bs-border-color); border-radius: .375rem; background: var(--bs-body-bg); }
svg.lineage { display: block; margin: 0 auto; }
.lin-edge { fill: none; stroke: var(--bs-secondary); stroke-width: 1.5; }
.lin-arrow { fill: var(--bs-secondary); }
.lin-node rect { fill: var(--bs-tertiary-bg); stroke: var(--bs-border-color); stroke-width: 1.5; }
.lin-node:hover rect { stroke: var(--bs-primary); }
.lin-node.seed rect { fill: #e8f5f1; stroke: var(--bs-success); }
.lin-node.focus rect { fill: var(--bs-primary); stroke: var(--bs-primary); }
.lin-node.deleted rect { stroke-dasharray: 5 3; opacity: .7; }
.lin-id { font-weight: 700; font-size: 14px; fill: var(--bs-body-color); }
.lin-name { font-size: 11px; fill: var(--bs-secondary-color); }
.lin-node.focus .lin-id, .lin-node.focus .lin-name { fill: #fff; }
.lin-node a, a:hover .lin-id { text-decoration: none; }