.data-grid-wrap {
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  overflow: auto;
  max-height: 420px;
  background: var(--ui-bg);
  /* This wrapper is deliberately focused via JS (cell selection, keyboard
     shortcuts) rather than by the user tabbing to it, so the browser's
     default focus ring would show up uninvited around normal clicks —
     individual cell selection is already indicated by its own highlight. */
  outline: none;
}

.data-grid {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--text-sm);
}

.data-grid th, .data-grid td {
  border: 1px solid var(--ui-border);
  padding: 0;
  min-width: 104px;
}

.data-grid thead th {
  background: var(--color-primary-light);
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 7px var(--space-2);
  vertical-align: top;
  border-bottom: 2px solid var(--color-secondary);
}

.data-grid__col-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  border: none;
  background: transparent;
  width: 100%;
  padding: 2px 0;
  margin-bottom: 4px;
}
.data-grid__col-name:focus { outline: none; border-bottom: 1px solid var(--color-primary); }

.data-grid td.data-grid__rownum,
.data-grid th.data-grid__rownum {
  /* `.data-grid th, .data-grid td` above sets a generic 104px min-width for
     every cell — a plain `.data-grid__rownum` class selector has lower
     specificity than that element+class combo and silently lost to it,
     which is why this column wasn't actually narrow despite the width
     rules below appearing to ask for it. */
  background: var(--ui-bg-subtle);
  color: var(--ui-text-muted);
  text-align: center;
  font-size: var(--text-xs);
  width: 22px;
  min-width: 22px;
  max-width: 22px;
  /* Also the containing block for .data-grid__rownum-del's absolute
     positioning below — sticky already establishes that the same way
     relative would, so there's no need for a second position rule (a
     previous duplicate `position: relative` here silently overrode this
     sticky, which is why the row-number column wasn't actually sticking to
     the left edge on horizontal scroll despite the CSS appearing to ask for
     it). */
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 0 2px;
}
/* The corner cell is sticky on BOTH axes at once (top from `.data-grid
   thead th`, left from the rule above) — it needs to sit above the other
   sticky header cells (which only stick to top) and the other sticky
   row-number cells (which only stick to left) so neither visually clips
   through it while scrolling, and it needs the header's blue background,
   not the row-number column's grey — `.data-grid th.data-grid__rownum`
   above otherwise wins that fight (two classes beats `.data-grid thead th`'s
   one class + two elements), leaving the corner a mismatched grey that reads
   as "not actually part of the sticky header." */
.data-grid thead th.data-grid__rownum {
  background: var(--color-primary-light);
  z-index: 2;
}
.data-grid__rownum-label {
  display: inline-block;
}
.data-grid__rownum-del {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid var(--ui-border-strong);
  box-shadow: var(--shadow-sm);
  padding: 3px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.data-grid__rownum-del:hover {
  background: var(--color-negative);
  border-color: var(--color-negative);
}
.data-grid__rownum-del:hover svg path { stroke: #fff; }
.data-grid__rownum:hover .data-grid__rownum-label { visibility: hidden; }
.data-grid__rownum:hover .data-grid__rownum-del { display: inline-flex; }

.data-grid__cell {
  padding: 0;
  min-height: 36px;
  outline: none;
  cursor: cell;
  position: relative;
  /* A drag across cells should highlight the cell range, not the browser's
     native text selection running underneath it. */
  user-select: none;
}
.data-grid__cell-display {
  padding: 9px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.data-grid__cell-input {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  border: none;
  outline: none;
  font-size: var(--text-sm);
  font-family: inherit;
  background: transparent;
  user-select: text; /* the active edit field itself keeps normal text selection */
}
/* Declared first so selecting/editing a flagged cell (rules below, same
   specificity, later wins) still shows clearly — the red ring alone stays
   visible as a quieter "this one's flagged" marker underneath either state,
   rather than the red background hiding which cell is actually selected. */
.data-grid__cell--error { box-shadow: inset 0 0 0 1px var(--color-negative); background: #FFECEC; }
.data-grid__cell--selected { background: var(--color-primary-light); }
.data-grid__cell--editing { background: #fff; box-shadow: inset 0 0 0 2px var(--color-primary); z-index: 1; }
.data-grid__cell--number .data-grid__cell-display { text-align: right; }
.data-grid__cell--number .data-grid__cell-input { text-align: right; }

.data-grid__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.data-grid__footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2);
}

.data-grid__shortcuts-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--ui-text-muted);
  background: none;
  border: none;
  padding: 0;
}
.data-grid__shortcuts-hint:hover { color: var(--ui-text-secondary); }
.data-grid__shortcuts-hint .shortcut-key {
  min-width: 18px;
  height: 18px;
  font-size: 10px;
  padding: 0 4px;
}

/* Deliberately quiet — a plain underline-on-hover text link, not a button
   or banner, so it reads as a low-priority "by the way" rather than
   competing with the grid for attention. */
.data-grid__transpose-hint {
  display: block;
  margin-top: 6px;
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-xs);
  color: var(--ui-text-muted);
  text-align: left;
}
.data-grid__transpose-hint:hover { color: var(--color-primary); text-decoration: underline; }

.data-grid__add-col {
  min-width: 40px;
  text-align: center;
  color: var(--ui-text-muted);
}