/* pages/admin/org-browser.css – OE-specific tokens & component styles.
   Grid, panel containers, turbo frames, empty states, and responsive
   breakpoints are now in layouts/three-panel.css via .panel-layout. */

/* ── OE-specific tokens ── */
.org-browser {
  --ob-border: var(--border-default);
  --ob-border-subtle: var(--border-subtle);
  --ee-border-subtle: var(--border-subtle);
  --ob-tree-node-height: 28px;
  --ob-tree-active-bar: 3px;
}

/* ── Tree header ── */
.org-browser__tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--panel-header-height);
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--ob-border-subtle);
  flex-shrink: 0;
}
.org-browser__tree-title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.org-browser__tree-actions { display: flex; gap: var(--space-1); }
.org-browser__tree-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2) 0;
}
.org-browser__tree-body:has(.tree-node) > .empty-state { display: none; }

/* ── Editor panel: width controlled by panel-layout grid ── */

/* ══════════════════════════════════════════════════════════════════
   Tree node styles — mirrors experience_editor/tree.css exactly
   Scoped to .org-browser instead of .experience-editor
   ══════════════════════════════════════════════════════════════════ */

.org-browser .tree-node {
  --indent: 0px; /* zero indent — depth tinting is the primary visual cue */
}

/* ── Depth tinting: compounding neutral wash per nesting level ── */
.org-browser .tree-node__children {
  background: rgba(0, 0, 0, 0.02);
}

/* ── Node row ── */
.org-browser .tree-node__row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--ob-tree-node-height);
  padding: 0 var(--space-3);
  padding-left: calc(var(--indent) + var(--space-3));
  position: relative;
  transition: background var(--duration-fast) var(--ease-out);
}
/* Semi-transparent hover so depth tint shows through */
.org-browser .tree-node__row:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* ── Active node: left accent bar + semi-transparent selected bg ── */
.org-browser .tree-node__row--active {
  background: var(--accent-subtle);
  font-weight: 500;
}
.org-browser .tree-node__row--active::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--ob-tree-active-bar);
  background: var(--accent-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ── Toggle + spacer (auto-visibility via :has) ── */
.org-browser .tree-node__toggle {
  display: none; /* shown by :has() when children exist */
  align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: none; background: none;
  color: var(--text-tertiary);
  cursor: pointer; padding: 0; flex-shrink: 0;
}
.org-browser .tree-node:has(> .tree-node__children > .tree-node) > .tree-node__row > .tree-node__toggle,
.org-browser .tree-node:has(> .tree-node__row .tree-node__count:not([hidden])) > .tree-node__row > .tree-node__toggle {
  display: flex;
}
.org-browser .tree-node:has(> .tree-node__children > .tree-node) > .tree-node__row > .tree-node__spacer,
.org-browser .tree-node:has(> .tree-node__row .tree-node__count:not([hidden])) > .tree-node__row > .tree-node__spacer {
  display: none;
}
.org-browser .tree-node__arrow {
  font-size: 14px;
  transition: transform var(--duration-fast) var(--ease-out);
}
.org-browser .tree-node__toggle[aria-expanded="true"] .tree-node__arrow {
  transform: rotate(90deg);
}
.org-browser .tree-node__spacer { width: 18px; flex-shrink: 0; }

/* ── Link + badge + name ── */
.org-browser .tree-node__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1; min-width: 0;
  text-decoration: none;
  color: var(--text-primary);
}
.org-browser .tree-node__badge {
  display: flex;
  align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: var(--accent-primary);
  color: var(--text-on-accent);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.org-browser .tree-node__badge .material-symbols-rounded { font-size: 16px; }
.org-browser .tree-node__name {
  font-size: var(--text-xs);
  line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Child count badge ── */
.org-browser .tree-node__count {
  font-size: 10px;
  line-height: 1;
  color: var(--text-tertiary);
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* ── Membership nodes: secondary name color to distinguish from org nodes ── */
.org-browser .tree-node[data-node-type="membership"] .tree-node__name {
  color: var(--text-secondary);
}

/* ── No drag handles in org browser ── */
.org-browser .tree-node__drag-handle {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════
   Tree search — mirrors experience_editor/tree-interactions.css
   ══════════════════════════════════════════════════════════════════ */

.org-browser .tree-search {
  display: flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--ob-border-subtle);
}
.org-browser .tree-search__icon { font-size: 16px; color: var(--text-tertiary); flex-shrink: 0; }
.org-browser .tree-search__input {
  flex: 1; min-width: 0; padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs); border: none; background: none;
}
.org-browser .tree-search__input:focus { box-shadow: none; outline: none; }
.org-browser .tree-search__clear { opacity: 0; transition: opacity var(--duration-fast); }
.org-browser .tree-search:focus-within .tree-search__clear { opacity: 1; }
.org-browser .tree-search mark {
  background: var(--accent-muted); color: var(--accent-primary);
  border-radius: 2px; padding: 0 1px;
}

/* ── Picker group headers (non-selectable org headers in relationship modal) ── */
.ee-picker__option--header {
  pointer-events: none; cursor: default;
  font-size: var(--text-xs); font-weight: 600;
  color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: 0.03em;
  gap: var(--space-1); padding-top: var(--space-2);
}
.ee-picker__option--header:hover { background: none; }
.ee-picker__option--header + .ee-picker__option--header { padding-top: var(--space-2); }