.admin-categories-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary); }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; flex: 1; }
select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color, #d3dad9); border-radius: 10px; }
.check { display: inline-flex; align-items: center; gap: 6px; }
.actions { display: flex; gap: 10px; align-items: center; }
tr.deleted { opacity: 0.55; }
.skeleton-rows { display: grid; gap: 8px; }

// scope="row" on the title cell (a11y row header) must render identically to a
// plain <td> - only the semantics change, not the visuals.
tbody th[scope='row'] { font-weight: inherit; color: inherit; text-align: left; vertical-align: middle; }
tbody tr:last-child th[scope='row'] { border-bottom: none; }
@media (max-width: 640px) { .filters { flex-direction: column; align-items: stretch; } .actions { flex-direction: column; align-items: stretch; } }

.bulk-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar__view-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.view-toggle { display: flex; gap: 2px; }
.columns-panel { display: flex; flex-wrap: wrap; gap: 12px; }
.health-cell { min-width: 140px; }
.admin-categories-card__guide { margin: 0; text-align: center; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); }
.density-compact td, .density-compact th { padding: 4px 8px; }

.category-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-width: 100%; overflow-x: auto; }
.category-tree__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);

  &:hover { background: var(--bg-tertiary); }
  &:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -2px; }
}
.category-tree__row--deleted { opacity: 0.55; }
.category-tree__row-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.category-tree__toggle { all: unset; cursor: pointer; width: 18px; text-align: center; color: var(--text-secondary); }
.category-tree__toggle-spacer { width: 18px; display: inline-block; }
.category-tree__icon { font-size: var(--font-size-lg, 1rem); }
.category-tree__title { font-weight: var(--font-weight-semibold, 600); color: var(--text-primary); }
.category-tree__items { font-size: var(--font-size-xs, 0.75rem); color: var(--text-light); }
.category-tree__actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.category-tree__reorder-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}
.category-tree__reorder-btn:hover:not(:disabled) { background: var(--bg-tertiary); }
.category-tree__reorder-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 1px; }
.category-tree__reorder-btn:disabled { color: var(--text-light); cursor: not-allowed; opacity: 0.5; }

.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.category-grid--compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.category-grid__item { position: relative; display: grid; gap: 6px; }
.category-grid__select { position: absolute; top: 8px; left: 8px; z-index: 1; }
.category-grid__image { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-tertiary); }
.category-grid__image--placeholder { display: flex; align-items: center; justify-content: center; font-size: var(--font-size-3xl, 1.5rem); }
.category-grid__name { margin: 0; font-size: var(--font-size-sm, 0.8125rem); font-weight: var(--font-weight-bold, 700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-grid__items { margin: 0; font-size: var(--font-size-xs, 0.75rem); color: var(--text-secondary, #5f6e6a); }
.category-grid__actions { display: flex; gap: 6px; flex-wrap: wrap; }

.dialog-body { display: grid; gap: 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
