/* =============================================================================
 * tree-view-item.css — PROTOTYPE-ONLY component for run PL_Report.
 * Host: .umag-tree-view-item (parity with the eventual DS selector umag-tree-view-item).
 * Matched to Figma `TreeViewItem` (file oxVeydrVMJy9Y3CSu0Zv2C, node 5057-8175).
 *
 * A single P&L report tree row: [name block (chevron? + label)] … [amount + ₸].
 * Three levels (indent 0/16/32), two types (actionable / readonly), the actionable
 * row toggles opened/closed via the real DS angle-right ↔ angle-down glyphs.
 *
 * BOUNDARIES: Layer-2 tokens ONLY (DesignSystem/assets/styles/tokens.css). NO raw hex,
 * NO rgb(), NO Layer-1 primitive. Layout-only bare px (16/32/400/16-icon) is allowed.
 * Typography comes from the real DS .text-m / .text-m-strong classes in ds.css — NOT
 * reconstructed here (anti-fabrication; see interactive-prototyper doctrine).
 *
 * Prototype-only: promoted to the DS later only on explicit human say-so. Open items
 * (result/summary row treatment; radius 6↔8 token naming) are documented in README.md.
 * ========================================================================== */

/* ---- Row container (one tree row) ----------------------------------------- */
.umag-tree-view-item {
  display: flex;
  align-items: center;
  gap: var(--space-4x);                 /* 16 — between name block and amount */
  overflow: hidden;
  width: 100%;                          /* row fills its container */
  padding: var(--space-2x);             /* 8 — top/right/bottom/left → height ≈ 34px */
  border-radius: var(--radius-1x);      /* token = 6px (Figma symbol shows 8 — see README divergence) */
  background: var(--bg-primary-default); /* white */
}
/* Collapsed rows: tree-view-item.js sets [hidden]; this attribute selector out-specifies
 * the .umag-tree-view-item{display:flex} rule above so the UA [hidden]→display:none takes effect. */
.umag-tree-view-item[hidden] { display: none; }

/* ---- Left name block: chevron (actionable) + label, indented by level ----- */
.tvi-name {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2x);                 /* 8 — between chevron and label */
  overflow: hidden;
}
/* LEVEL INDENT — 16px step, L3 is the cap (children of an L3 do NOT indent further). */
.umag-tree-view-item.lvl-1 .tvi-name { padding-left: var(--space-0); }    /* 0  */
.umag-tree-view-item.lvl-2 .tvi-name { padding-left: var(--space-4x); }   /* 16 */
.umag-tree-view-item.lvl-3 .tvi-name { padding-left: var(--space-8x); }   /* 32 */

/* ---- Chevron (ACTIONABLE rows only) — 16×16, real DS angle glyph ---------- */
.tvi-chevron {
  flex: none;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-primary-default);
}
.tvi-chevron svg { width: 16px; height: 16px; display: block; }
/* The chevron is present only on .is-actionable rows; readonly rows have none. */
.umag-tree-view-item:not(.is-actionable) .tvi-chevron { display: none; }

/* ---- Label — flexes, truncates with ellipsis ------------------------------ */
.tvi-label {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  color: var(--text-primary-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* NON-ACTIONABLE rows compensate the missing 16px chevron + 8px gap (= space-6x/24)
 * so their labels line up with actionable rows at the same level. */
.umag-tree-view-item:not(.is-actionable) .tvi-label { padding-left: var(--space-6x); }

/* ---- Amount block: value + tenge symbol, right-aligned, never wraps ------- */
.tvi-amount {
  display: flex;
  align-items: center;
  gap: var(--space-1x);                 /* 4 — between value and ₸ */
  padding-right: var(--space-1x);       /* 4 */
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
  color: var(--text-primary-default);
}

/* ---- Hover / actionable affordance ---------------------------------------- */
/* Real :hover applies ONLY to actionable rows. */
.umag-tree-view-item.is-actionable { cursor: pointer; }
.umag-tree-view-item.is-actionable:hover { background: var(--bg-primary-hover); }
/* .is-hover is the forced-state class used by the static 15-variant matrix to
 * SIMULATE :hover (matrix rows must not depend on the pointer). */
.umag-tree-view-item.is-actionable.is-hover { background: var(--bg-primary-hover); }

/* Readonly rows: default cursor, no hover (covered by the :not(.is-actionable) selectors). */
.umag-tree-view-item:not(.is-actionable) { cursor: default; }