/*
 * Chart of accounts — a columnar table. The tree is flattened into rows so every
 * column (number, balance, taxonomy, actions) lines up; only the name cell indents
 * by depth, via the `--depth` custom property each row carries. The two fixed
 * top-level statement headers (Income Statement / Balance) render large, like a
 * page heading, in the name column.
 */

@layer components {
  .chart-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs); /* 12px — denser now the type + VAT columns are shown, still readable */
  }

  .chart-table thead th {
    padding: var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-body);
    text-align: left;
  }

  .chart-row > td {
    padding: var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--color-border);
    vertical-align: baseline;
  }

  /* Columns: number, balance and taxonomy stay narrow; name takes the slack; the
     actions column hugs its icons on the far right. */
  .chart-row__number   { width: 6rem; color: var(--color-text-body); font-variant-numeric: tabular-nums; }
  .chart-row__type     { width: 6rem; color: var(--color-text-body); }
  .chart-row__balance  { width: 7rem; color: var(--color-text-body); }
  .chart-row__taxonomy { width: 8rem; }
  .chart-row__vat      { width: 5rem; color: var(--color-text-body); font-variant-numeric: tabular-nums; }
  .chart-row__actions  { width: 4.5rem; text-align: right; white-space: nowrap; }

  /* The one place the tree shows: the name cell indents by its depth. */
  .chart-row__name { padding-left: calc(var(--space-2) + var(--depth, 0) * var(--space-4)); }

  .chart-header {
    display: inline-block;
    font-size: var(--text-2xl);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--color-text-heading);
  }

  .chart-row--header > td { border-bottom: none; padding-top: var(--space-3); }

  /* Edit / delete icon controls. `button_to` renders a form, so keep it inline. */
  .chart-node__form { display: inline; margin: 0; }

  .chart-action {
    display: inline-flex;
    padding: var(--space-1);
    border: none;
    background: none;
    color: var(--color-text-body);
    cursor: pointer;
    border-radius: var(--radius-sm);
  }

  .chart-action:hover           { color: var(--color-text-heading); background: var(--color-slate-100); }
  .chart-action--danger:hover   { color: var(--color-danger); }
  .chart-action__icon           { width: 1.05rem; height: 1.05rem; }
}