/* ============================================================
   Table Hover Controls — Word-style insert / delete handles
   ============================================================ */

/* Positioning context + gutter space for handles */
.table-canvas {
  position: relative;
  padding-left: var(--app-table-canvas-gutter, 32px);
  padding-top: var(--app-table-canvas-gutter, 32px);
}

/* Overlay container: covers the full table-canvas area */
.thc-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: visible;
}

/* ── Generic handle (circular button) ──────────────────── */
.thc-handle {
  pointer-events: auto;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--app-green-600, #2f8a64);
  background: #ffffff;
  color: var(--app-green-600, #2f8a64);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 150ms ease, transform 150ms ease, background-color 120ms ease;
  box-shadow: 0 2px 8px rgba(11, 17, 29, 0.12);
  padding: 0;
  outline: none;
}

.thc-handle:hover {
  background: var(--app-green-600, #2f8a64);
  color: #ffffff;
  transform: scale(1.15);
  box-shadow: 0 4px 16px rgba(47, 138, 100, 0.3);
}

.thc-handle.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Insert guide line ─────────────────────────────────── */
.thc-guide {
  position: absolute;
  background: var(--app-green-600, #2f8a64);
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;
  z-index: 1;
}

.thc-guide--horizontal {
  height: 2px;
  left: var(--app-table-canvas-gutter, 32px);
  right: 0;
}

.thc-guide--vertical {
  width: 2px;
  top: var(--app-table-canvas-gutter, 32px);
  bottom: 0;
}

/* Show guide when its sibling handle is visible or hovered */
.thc-handle.is-visible + .thc-guide {
  opacity: 0.35;
}

.thc-handle:hover + .thc-guide {
  opacity: 0.7;
}

/* ── Delete handle (red tint) ──────────────────────────── */
.thc-handle--delete {
  border-color: #dc3545;
  color: #dc3545;
}

.thc-handle--delete:hover {
  background: #dc3545;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(220, 53, 69, 0.3);
}

.thc-handle--delete.thc-disabled {
  border-color: #bbb;
  color: #bbb;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Append handles (dashed border) ────────────────────── */
.thc-handle--append {
  border-style: dashed;
}

/* ── Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .thc-handle,
  .thc-guide {
    transition: none;
  }
}