/**
 * Tree View Styles
 * @countermeasure/web-components
 *
 * Hierarchical tree view with expand/collapse, search, and selection.
 */

/* ============================================================================
   TREE VIEW CONTAINER
   ============================================================================ */
.cmm-tree-view {
  position: relative;
  overflow-y: auto;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
}

.cmm-tree-view__search {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.5rem;
  background-color: hsl(var(--card));
  border-bottom: 1px solid hsl(var(--border));
}

.cmm-tree-view__search-input {
  width: 100%;
  padding: 0.375rem 0.625rem 0.375rem 2rem;
  font-size: 0.8125rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.5rem center;
  transition: border-color var(--transition-fast, 150ms);
}

.cmm-tree-view__search-input::placeholder {
  color: hsl(var(--muted-foreground));
}

.cmm-tree-view__search-input:focus {
  outline: 2px solid hsl(var(--focus-ring));
  outline-offset: -1px;
  border-color: transparent;
}

/* ============================================================================
   TREE NODE
   ============================================================================ */
.cmm-tree-node {
  --cmm-tree-depth: 0;
  padding-left: calc(var(--cmm-tree-depth) * 1.25rem);
}

.cmm-tree-node__row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast, 150ms);
}

.cmm-tree-node__row:hover {
  background-color: hsl(var(--accent) / 0.5);
}

/* ============================================================================
   TOGGLE BUTTON
   ============================================================================ */
.cmm-tree-node__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: transform var(--transition-fast, 150ms),
              color var(--transition-fast, 150ms);
}

.cmm-tree-node__toggle:hover {
  color: hsl(var(--foreground));
  background-color: hsl(var(--accent));
}

.cmm-tree-node__toggle svg,
.cmm-tree-node__toggle::after {
  transition: transform var(--transition-fast, 150ms);
}

/* Arrow indicator via pseudo-element fallback */
.cmm-tree-node__toggle::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transform: rotate(0deg);
}

.cmm-tree-node--expanded > .cmm-tree-node__row > .cmm-tree-node__toggle::after {
  transform: rotate(90deg);
}

.cmm-tree-node--expanded > .cmm-tree-node__row > .cmm-tree-node__toggle svg {
  transform: rotate(90deg);
}

/* Placeholder for leaf nodes (no toggle) */
.cmm-tree-node__toggle--hidden {
  visibility: hidden;
}

/* ============================================================================
   NODE ICON
   ============================================================================ */
.cmm-tree-node__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: hsl(var(--muted-foreground));
}

.cmm-tree-node__icon svg {
  width: 100%;
  height: 100%;
}

/* ============================================================================
   NODE LABEL
   ============================================================================ */
.cmm-tree-node__label {
  flex: 1;
  min-width: 0;
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  color: hsl(var(--foreground));
  transition: background-color var(--transition-fast, 150ms),
              color var(--transition-fast, 150ms);
}

.cmm-tree-node__label:hover {
  background-color: hsl(var(--accent));
}

.cmm-tree-node__label--selected {
  background-color: hsl(var(--info) / 0.15);
  color: hsl(var(--info));
  font-weight: 500;
}

.cmm-tree-node__label--selected:hover {
  background-color: hsl(var(--info) / 0.2);
}

/* ============================================================================
   TYPE BADGE
   ============================================================================ */
.cmm-tree-node__type {
  flex-shrink: 0;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  background-color: hsl(var(--secondary));
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* ============================================================================
   CHILDREN CONTAINER
   ============================================================================ */
.cmm-tree-node__children {
  display: none;
  overflow: hidden;
}

.cmm-tree-node--expanded > .cmm-tree-node__children {
  display: block;
  animation: cmm-tree-expand var(--transition-fast, 150ms) ease-out;
}

@keyframes cmm-tree-expand {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   EMPTY STATE
   ============================================================================ */
.cmm-tree-view__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}
