.gridLayout {
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gridLayer {
  display: grid;
  /* Base layer styles - minimal defaults */
  /* Specific styles applied dynamically in GridLayout.tsx based on positionMode */
}

.gridLayer[data-resizable="true"] {
  position: relative;
  pointer-events: none;
}

.gridLayer[data-draggable="true"] {
  border-radius: var(--node-editor-radius-md);
  box-shadow: var(--node-editor-card-box-shadow);
  transition: box-shadow var(--node-editor-transition-duration);
  overflow: hidden;
}

.gridLayer[data-draggable="true"]:hover {
  box-shadow: var(--node-editor-card-hover-box-shadow);
}

.resizeHandleVertical {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  pointer-events: auto;
}

.resizeHandleHorizontal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: auto;
}

/* Touch-action for drag prevention */
.gridLayout[data-dragging="true"],
.gridLayout[data-dragging="true"] * {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}