/* inline.css — inline cell editors, dirty cells and the pending-changes bar (stream A2, main §4.3).
   Linked by the layout (WP0c). Colours come from the app.css tokens, so dark mode follows. */

/* The cell editor replaces the cell text while open (td.is-editing; core CSS hides the cell's .fk-link). */
.grid td.is-editing { padding: 2px 4px; }
.cell-editor { display: flex; align-items: flex-start; gap: .25rem; }
.cell-editor .cell-input {
  min-width: 12ch;
  max-width: 40ch;
  margin: 0;
  padding: .2rem .35rem;
  font: inherit;
  color: var(--fg);
  background: var(--panel-alt);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
}
.cell-editor textarea.cell-input { width: 40ch; min-height: 2.4em; resize: vertical; white-space: pre-wrap; }
.cell-editor.is-null .cell-input { opacity: .5; }
.cell-null {
  min-width: 24px;
  min-height: 24px;
  padding: 0 .35rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.cell-null[aria-pressed="true"] { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }

/* A queued change: tint plus a corner marker (a shape, not only a colour) and a visually-hidden "changed from …". */
.grid td.is-dirty { position: relative; background: var(--warn-soft); }
.grid td.is-dirty::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 9px 9px 0;
  border-color: transparent var(--warn) transparent transparent;
  pointer-events: none;
}
.grid tr.pending-failed > td { box-shadow: inset 0 0 0 2px var(--bad); }

/* The pending bar: sticky at the bottom of the browse page, a full-width bottom sheet at <= 480 px. A1's
   grid-select.js keeps --bulkbar-h = the selection bar's height (0px while it is hidden), so the two bars stack
   instead of sitting on top of each other; A1's bulk.css adds the page's bottom padding from --bars-h. */
.pending-bar {
  position: sticky;
  bottom: var(--bulkbar-h, 0px);
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin: 1rem 0 0;
  padding: .6rem 1rem;
  background: var(--panel-alt);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.pending-bar[hidden] { display: none; }
.pending-summary { margin: 0; }
.pending-offpage { color: var(--muted); font-size: 13px; }
.pending-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.pending-error {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
  color: var(--bad);
  background: var(--bad-soft);
  border-left: 3px solid var(--bad);
  border-radius: var(--radius-sm);
}
.pending-error[hidden] { display: none; }
.pending-error-text { margin: 0; }
.inline-report-summary { margin: 0 0 .5rem; }

@media (max-width: 480px) {
  .pending-bar { margin: 1rem -16px 0; border-radius: 0; border-left: 0; border-right: 0; }
  .pending-actions { width: 100%; margin-left: 0; }
  .pending-actions button { flex: 1 1 auto; }
  .cell-editor textarea.cell-input { width: 70vw; }
}