/* ==========================================================================
   grid.css — the sheet: table, headers, selection overlays, cell editor.

   --z is the zoom factor (set on .grid-scroll by js/grid/render.js);
   sizes that must scale with the zoom are multiplied by it.
   ========================================================================== */

.grid-scroll {
  --z: 1;
  --cell-font-size: 13px;
  position: absolute;
  inset: 0;
  overflow: auto;
  background: var(--grid-bg);
  outline: none;
  overscroll-behavior: contain;
}

.grid-content {
  position: relative;
  width: max-content;
  z-index: 0; /* own stacking context: overlays sit between cells and headers */
}

.grid {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-family: var(--font-ui);
  font-size: calc(var(--cell-font-size) * var(--z));
  color: var(--grid-text);
  user-select: none;
  -webkit-user-select: none;
  font-variant-numeric: tabular-nums;
}

/* ---- Cells (default: centred both ways) ---------------------------------- */

.grid td {
  padding: 0 calc(4px * var(--z));
  border-right: 1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  text-align: center;
  vertical-align: middle;
  line-height: 1.2;
  cursor: cell;
}
.grid td.err { color: var(--grid-error); }

/* Filler cells after the last column / in the "add rows" line */
.grid td.pad { border: 0; background: transparent; cursor: default; }

/* ---- Headers (sticky) -------------------------------------------------------- */

.grid th {
  position: sticky;
  padding: 0;
  background: var(--grid-header-bg);
  color: var(--grid-header-text);
  font-weight: 500;
  font-size: calc(11px * var(--z));
  border-right: 1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
  white-space: nowrap;
  overflow: visible;
}
.grid thead th { top: 0; z-index: 3; }
.grid th.row-h { left: 0; z-index: 2; }
.grid th.corner { left: 0; top: 0; z-index: 4; cursor: cell; }
.grid th.col-h { cursor: s-resize; }
.grid th.row-h { cursor: e-resize; }
.grid th.hl { color: var(--grid-header-hl-text); }

/* Highlighted headers: translucent accent painted over the opaque header colour
   (sticky headers must stay opaque so cells don't show through) */
.grid th.hl {
  background-image: linear-gradient(var(--grid-header-hl-bg), var(--grid-header-hl-bg));
  background-color: var(--grid-header-bg);
}

/* Resize handles on header edges */
.col-resize {
  position: absolute;
  top: 0;
  right: -3px;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 1;
}
.row-resize {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 6px;
  cursor: row-resize;
  z-index: 1;
}
.col-resize:hover, .row-resize:hover { background: var(--accent); opacity: 0.6; }

/* "+" buttons after the last column / row */
.grid th.add-cell {
  background: var(--grid-bg);
  border: 0;
}
.add-btn {
  width: calc(24px * var(--z));
  height: calc(20px * var(--z));
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-faint);
  font-size: calc(15px * var(--z));
  line-height: 1;
}
.add-btn:hover { border-color: var(--accent); color: var(--accent-text); border-style: solid; }

/* ---- Overlay layer -------------------------------------------------------- */

.grid-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* above cells, below sticky headers */
}
.grid-layer [hidden] { display: none; }

.sel-fill {
  position: absolute;
  background: var(--grid-selection-fill);
}

.sel-box {
  position: absolute;
  border: 2px solid var(--grid-selection-border);
}

/* Invisible strips along the selection border: drag to move the cells */
.sel-edge { position: absolute; pointer-events: auto; cursor: move; }
.sel-edge-top { top: -4px; left: -4px; right: -4px; height: 6px; }
.sel-edge-bottom { bottom: -4px; left: -4px; right: 6px; height: 6px; }
.sel-edge-left { left: -4px; top: -4px; bottom: -4px; width: 6px; }
.sel-edge-right { right: -4px; top: -4px; bottom: 6px; width: 6px; }

.fill-handle {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border: 1px solid var(--grid-bg);
  pointer-events: auto;
  cursor: crosshair;
}

.preview-box {
  position: absolute;
  border: 2px dashed var(--grid-preview);
}

.cut-box {
  position: absolute;
  border: 2px dashed var(--accent);
  animation: cut-pulse 1s ease-in-out infinite alternate;
}
@keyframes cut-pulse { from { opacity: 1; } to { opacity: 0.45; } }

.ref-box {
  position: absolute;
  border: 2px solid var(--ref-color);
  background: color-mix(in srgb, var(--ref-color) 12%, transparent);
}

/* ---- Cell editor ------------------------------------------------------------- */

.cell-editor {
  position: absolute;
  z-index: 5;
  margin: 0;
  padding: 0 calc(4px * var(--z));
  border: 2px solid var(--accent);
  background: var(--grid-editor-bg);
  color: var(--grid-text);
  font-family: var(--font-ui);
  font-size: calc(var(--cell-font-size) * var(--z));
  outline: none;
  pointer-events: auto;
  box-shadow: 0 4px 16px hsl(0 0% 0% / 0.3);
}