/*
 * Tree view kind (Views module) — org-style top-down hierarchy.
 * Level 1 roots centred; level 2 horizontal; level 3 vertical; level 4+ vertical
 * + left indent. Node cards match the .card surface system (surface / border-soft /
 * --r-md / --sp-3 padding). Control heights use --control-h. Spacing follows the
 * ui.md rhythm. See docs/architecture/ui.md and docs/architecture/views.md.
 */

.view-tree-scroll {
  overflow: auto;
  padding: var(--sp-4) 0;
}

.vtree {
  width: max-content;
  min-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-5) var(--sp-4);
}

/* A node = its card, an optional connector, then its child level.
   Deeper nodes left-align (outline); only the root centres its horizontal row. */
.vtree__node {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.vtree__level--root > .vtree__node {
  align-items: center;
}

/* Vertical drop from a parent card into its centred horizontal child row. */
.vtree__connector {
  align-self: center;
  height: var(--sp-4);
  border-left: 1px solid var(--border);
}

/* Root row + level-2 row: centred horizontal cluster (org-chart head). */
.vtree__level--root,
.vtree__level--h {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-4);
}

/* Level 3+: a left-railed vertical outline. Nesting indents each deeper level,
   so level 4 sits further right than level 3 automatically. */
.vtree__level--v {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  margin-left: var(--vtree-indent);
  padding-left: var(--sp-4);
  border-left: 1px solid var(--border);
}

/* Elbow tick from the rail to each card (aligns to the card's label row). */
.vtree__level--v > .vtree__node::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-4));
  top: calc(var(--sp-3) + var(--sp-2));
  width: var(--sp-4);
  border-top: 1px solid var(--border);
}

.vtree__level--v > .vtree__node {
  position: relative;
}

/* Node card — same surface language as .card / .tcard. */
.vtree__card {
  box-sizing: border-box;
  width: var(--vtree-node-w);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  cursor: grab;
  transition: border-color 0.12s;
}

.vtree__card:hover {
  border-color: var(--border);
}

.vtree__card:active {
  cursor: grabbing;
}

.vtree__card.is-dragging {
  opacity: 0.5;
}

.vtree__card.is-drop {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.vtree__card-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
  flex: 1;
}

.vtree__label {
  font-size: var(--fs-base);
  color: var(--text);
  cursor: text;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vtree__type {
  align-self: flex-start;
}

.vtree__type.is-editable {
  cursor: pointer;
}

/* Actions reserve their space (reveal on hover, no reflow). */
.vtree__actions {
  display: flex;
  gap: var(--sp-1);
  flex-shrink: 0;
}

.vtree__actions .iconbtn {
  opacity: 0;
  transition: opacity 0.12s;
}

.vtree__card:hover .vtree__actions .iconbtn,
.vtree__actions .iconbtn:focus-visible {
  opacity: 1;
}

/* Draft node: a stacked mini-form inside a card-width surface. */
.vtree__card--draft {
  flex-direction: column;
  align-items: stretch;
  cursor: default;
  border-style: dashed;
  border-color: var(--accent);
}

.vtree__card--draft .vtree__actions {
  justify-content: flex-end;
}

.vtree__card--draft .vtree__actions .iconbtn {
  opacity: 1;
}

.vtree__label-editor {
  width: 100%;
  height: var(--control-h);
}

.vtree__draft-input,
.vtree__draft-select {
  width: 100%;
  height: var(--control-h);
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0 var(--sp-2);
  outline: none;
}

.vtree__draft-input:focus,
.vtree__draft-select:focus {
  border-color: var(--accent);
}

.vtree__draft-select {
  appearance: none;
  cursor: pointer;
}