# Back Office — Table columns control

1:1 build of **table-columns-control-spec.md**. Pill trigger → dropdown panel with a
draggable, toggleable column list + reset row. Design-system tokens only; icons exact.

## Anatomy
`tc-stage` (357px, pad 16) → `tc-btn` (pill trigger, right) → `tc-modal` (325px panel, right)
→ `tc-list` (`tc-row` × n: `tc-inner` = `tc-icons` [drag handle + checkbox] + `tc-label`)
→ `tc-reset` («Reset all changes»).

## Pill trigger `.tc-btn`
36×36 · `radius-pill` · bg `#F2F4F7` / hover `#E5E5EA` / active `#D1D1D6` · pad 8 · border 0 ·
`margin-left:auto` · flex center · icon 20×20 `display:block` (`#333333` table-columns SVG) ·
`aria-label="Sütunları göstər"`.

## Dropdown panel `.tc-modal`
325px · `margin-top:2px` · `margin-left:auto` · bg `--t-bg-white` · r8 · shadow `0 0 4px 0 rgba(0,0,0,.1)` ·
pad `8px 0` · flex column `gap:8` · `[hidden]{display:none}`.

## Column row `.tc-row` (draggable)
h40 · pad `8px 32px 8px 8px` (index 6 longest → `padding-right:16px`) · bg white / hover `--t-grey-100` ·
`cursor:grab` · `.dragging{opacity:.4}` · drag-over `.over{background:--t-grey-200}`.
- **`.tc-inner`** flex center gap8 h24 flex1 min-width0.
- **`.tc-icons`** flex center gap4 width52 flex-shrink0.
  - **drag handle** `.tc-drag` 24×24 `#5F6774` — 6-dot grip SVG.
  - **checkbox** `.tc-check` 24×24 button — ON fill `#2684FF` + white tick / OFF outline `#D1D1D6`.
- **`.tc-label`** `400 16px/1.5` ls `-.007em` · on `#333333` / off `--t-text-secondary` · nowrap + ellipsis.

## Reset row `.tc-reset`
h36 · pad `7.5px 16px` · `margin-top:8` · top border `1px solid #F2F4F5` · `400 14px/1.5` ls `-.005em` ·
default `#030303` / hover `--t-primary` / disabled `--t-text-disabled` (cursor default) · left-aligned ·
label «Reset all changes». **Disabled when all columns are on.**

## Default data (8 rows)
Ümumi məlumat · Ümumi məlumat · Çox satılan məhsullar · Ən çox satış edən işçilər ·
Ən çox satılan kateqoriyalar · Ödəmə üsuluna görə gəlir · Kategoriya növünə görə məxaric *(padding-right:16px)* · Hesablar.

## Behavior
- **Toggle** — click `.tc-check` flips on/off; label ink `#333` ↔ `--t-text-secondary`; icon fill ↔ outline.
- **Reset** — restores all columns to on; disables itself when nothing is changed (all on).
- **Open/close** — trigger toggles `modal.hidden`; default on load: **open**.
- **Drag reorder** — HTML5 DnD: `dragstart` marks source `.dragging`; `dragover` highlights `.over`;
  `drop` splices the `state` array source → target and re-renders.

## Radius note
Smallest chrome radius is 8px (panel). Pill uses `--radius-pill`. Checkbox rects (rx 5/6) are inside
the icon artwork, not chrome, so they stay as drawn.