/* Brands (admin) — full-bleed center column */

.brands-view {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.brands-view > .pane-chrome {
  justify-content: space-between;
}

.brand-create {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
  justify-content: flex-end;
  max-width: 28rem;
}

.brand-create-field {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.brand-create-field input {
  height: var(--control-h);
}

.brands-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  box-sizing: border-box;
  min-height: var(--pane-chrome-height);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg);
}

.brand-search {
  flex: 1;
  min-width: 10rem;
  margin: 0;
}

.brand-search input {
  height: var(--control-h);
}

.brand-row-badges,
.entity-row__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  flex-shrink: 0;
}

/* Meta columns — width set on `.entity-list` via `--entity-meta-slot-w`
   (widest slot in the roster) so badges line up across rows.
   Alignment tokens: text/date → start; number → end (atomics). */
.entity-row__meta-slot {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 var(--entity-meta-slot-w, max-content);
  align-items: center;
  justify-content: flex-start;
  width: var(--entity-meta-slot-w, max-content);
  min-width: var(--entity-meta-slot-w, max-content);
  text-align: var(--align-text, left);
}

.entity-row__meta-slot[data-align="start"] {
  justify-content: flex-start;
  text-align: var(--align-text, left);
}

.entity-row__meta-slot[data-align="end"] {
  justify-content: flex-end;
  text-align: var(--align-number, right);
}

.entity-row__meta-slot[data-align="end"] .badge,
.entity-row__meta-slot[data-align="end"] .muted {
  font-variant-numeric: tabular-nums;
}

.entity-row__meta-slot .muted {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status pills must show the full word — never ellipsis (`allowe…`). */
.entity-row__meta-slot .badge {
  max-width: none;
  overflow: visible;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Sparse column placeholder — keeps width via the slot; no visible chrome. */
.entity-row__meta-empty {
  display: block;
  width: 0;
  height: 1em;
  overflow: hidden;
}

.entity-row__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
}

.entity-row__trailing {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.entity-row__shell {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  /* Shell owns the hairline so it runs under the trailing ellipsis. */
  border-bottom: 1px solid var(--border-subtle);
}

.entity-row__shell > .entity-row {
  flex: 1;
  min-width: 0;
  border-bottom: none;
}

.entity-row__shell:hover {
  background: var(--bg-elevated);
}

.entity-row__shell:hover > .entity-row,
.entity-row__shell:hover > .entity-row:hover {
  background: transparent;
}

.entity-row__shell:has(> .entity-row.selected) {
  background: var(--selection);
  box-shadow: inset 4px 0 0 var(--accent);
}

.entity-row__shell:has(> .entity-row.selected) > .entity-row.selected {
  background: transparent;
  box-shadow: none;
}

.entity-row__shell > .entity-row__trailing {
  padding-right: var(--list-pad-x);
}

.entity-row__shell:has(> .entity-row.selected) .entity-row__menu-btn:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.entity-row__meta + .entity-row__trailing {
  margin-left: 0;
}

.entity-row__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--text-muted, var(--muted-foreground, inherit));
  cursor: pointer;
}

.entity-row__menu-btn:hover {
  background: var(--bg-elevated, var(--secondary));
  color: var(--text, inherit);
}

.ui-context-menu {
  width: max-content;
  min-width: var(--ui-menu-min, 10.5rem);
  max-width: min(18rem, calc(100vw - 24px));
}

.ui-context-menu__check {
  display: inline-flex;
  width: 0.85em;
  flex-shrink: 0;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.ui-context-menu--submenu {
  min-width: var(--ui-menu-min, 10.5rem);
}

.brands-scroll {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Roster panes: list fills the column; body is the scrollport (sticky groups). */
.brands-scroll > .entity-list {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.brands-scroll .entity-list__body-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

.brands-scroll .entity-list__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.brand-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.brand-empty {
  margin: 0;
  padding: var(--space-3);
  color: var(--text-muted);
}

.brand-edit-field {
  flex: 1;
  min-width: 0;
}

/* Selectable roster rows (brands / users). Keep .brand-row for e2e. */
.entity-row,
.brand-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--row-h);
  margin: 0;
  padding: var(--space-2) var(--list-pad-x);
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.entity-row:hover,
.brand-row:hover {
  background: var(--bg-elevated);
}

.entity-row.selected,
.brand-row.selected {
  background: var(--selection);
  box-shadow: inset 4px 0 0 var(--accent);
  color: var(--text);
}

.entity-row--static {
  cursor: default;
  padding: var(--space-2) 0;
  width: 100%;
  justify-content: flex-start;
}

.entity-row--static:hover {
  background: transparent;
}

/* Inspector entity header — no list rule, hug content */
.entity-row--header {
  border-bottom: none;
  padding: 0;
  width: 100%;
}

.entity-row--header .entity-row__text {
  flex: 1;
  min-width: 0;
}

.entity-row--header .hover-rename {
  min-width: 0;
  max-width: 100%;
}