/* 
 * 表单设计器样式
 */

/* 设计器容器 */
.form-designer {
  height: calc(100vh - 150px); /* 默认高度，适应带导航的页面 */
  min-height: 600px;
  display: flex;
  flex-direction: column;
}

.form-designer-header {
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.form-designer-title {
  font-size: 16px;
  font-weight: 600;
}

.form-designer-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 组件面板 */
.form-designer-component-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid #e8e8e8;
}

.form-designer-component-panel-header {
  padding: 16px;
  border-bottom: 1px solid #e8e8e8;
  background: #fff;
  flex-shrink: 0;
}

.form-designer-component-panel-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.form-designer-component-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px;
}

.form-designer-component-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: move;
  transition: all 0.2s ease;
  background: #fff;
  user-select: none;
  font-size: 13px;
  min-height: 36px;
}

.form-designer-component-item:hover {
  border-color: #1890ff;
  background: #f0f5ff;
  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.15);
  transform: translateY(-1px);
}

.form-designer-component-item:active {
  transform: translateY(0);
}

/* 设计画布 */
.form-designer-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  height: 100%;
}

.form-designer-canvas-header {
  padding: 16px 24px;
  border-bottom: 1px solid #e8e8e8;
  background: #fafafa;
}

.form-designer-canvas-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  min-height: 500px;
}

.form-designer-canvas-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #8c8c8c;
  font-size: 14px;
  background: #fafafa;
}

.form-designer-field-list {
  max-width: 900px;
  margin: 0 auto;
}

/* 字段项 */
.form-designer-field-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  margin-bottom: 16px;
  transition: all 0.2s ease;
  cursor: pointer;
}

/* 栅格布局字段项特殊样式 - 更大的间距 */
.form-designer-field-item:has(.ant-row) {
  margin-bottom: 24px;
  padding: 20px;
}

.form-designer-field-item:hover {
  border-color: #1890ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
}

.form-designer-field-item.selected {
  border-color: #1890ff;
  background: #f0f5ff;
}

/* 字段名冲突样式 */
.form-designer-field-item.duplicate-name {
  border-color: #ff4d4f !important;
  background: #fff1f0 !important;
  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.15) !important;
}

.form-designer-field-item.duplicate-name:hover {
  border-color: #ff4d4f !important;
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.25) !important;
}

.form-designer-field-drag-handle {
  color: #8c8c8c;
  font-size: 16px;
  cursor: move;
  padding: 4px;
}

.form-designer-field-drag-handle:hover {
  color: #1890ff;
}

.form-designer-field-content {
  flex: 1;
}

.form-designer-field-actions {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.form-designer-field-item:hover .form-designer-field-actions {
  opacity: 1;
}

/* 属性面板 */
.form-designer-property-panel {
  width: 320px;
  background: #fff;
  border-left: 1px solid #e8e8e8;
  overflow-y: auto;
  flex-shrink: 0;
}

/* 辅助类 */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-move {
  cursor: move;
}

/* 栅格拖拽占位符 */
.form-designer-grid-drop-zone {
  min-height: 100px;
  border: 2px dashed #d9d9d9;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8c8c8c;
  font-size: 12px;
  transition: all 0.2s ease;
}

.form-designer-grid-drop-zone.active {
  border-color: #1890ff;
  background: #f0f5ff;
  color: #1890ff;
}

/* 栅格列的拖拽区域 */
.form-designer-grid-column {
  min-height: 80px;
  position: relative;
}

/* 栅格列内的字段项 - 移除外部间距，让栅格的 gutter 控制间距 */
.form-designer-grid-column .form-designer-field-item {
  margin-bottom: 8px;
}

.form-designer-grid-column .form-designer-field-item:last-child {
  margin-bottom: 0;
}

/* 栅格的拖拽提示 */
.form-designer-grid-hint {
  padding: 8px;
  text-align: center;
  color: #8c8c8c;
  font-size: 12px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  background: #fafafa;
}

/* === 紧凑模式 === */
/* 通用样式 */
.form-container-padding {
  padding: 24px;
}

/* 表单渲染器和预览器的紧凑间距样式 */
.form-renderer-compact .ant-form-item {
  margin-bottom: 8px !important;
}

.form-preview-compact .ant-form-item {
  margin-bottom: 8px !important;
}

/* 栅格内部的字段间距也需要调整 */
.form-renderer-compact .ant-row .ant-form-item {
  margin-bottom: 8px !important;
}

.form-preview-compact .ant-row .ant-form-item {
  margin-bottom: 8px !important;
}

/* 布局组件的间距 */
.form-renderer-compact > div > div,
.form-preview-compact > div > div {
  margin-bottom: 8px;
}

/* 通用内边距类 */
.form-container-padding {
  padding: 24px 40px;
}

.form-empty-state {
  padding: 40px;
  text-align: center;
  color: #8c8c8c;
}

.form-data-display {
  margin-top: 24px;
  padding: 16px;
  background: #f5f5f5;
  border-radius: 4px;
}

.form-property-panel-empty {
  padding: 24px;
  text-align: center;
  color: #8c8c8c;
}

.form-property-panel-content {
  padding: 16px;
}

.form-property-info-box {
  padding: 8px 12px;
  background: #f0f5ff;
  border-radius: 4px;
  margin-bottom: 16px;
}

.form-property-nested-indent {
  padding: 0 0 0 16px;
}

.form-empty-list-hint {
  padding: 24px 0;
  text-align: center;
  color: #8c8c8c;
  font-size: 12px;
}

/* === 只读状态样式 === */
/* 对于 readonly 字段，使用灰色背景并禁用光标 */
input.ant-input[readonly],
input.ant-input:read-only,
textarea.ant-input[readonly],
textarea.ant-input:read-only {
  background-color: #f5f5f5 !important;
  cursor: not-allowed !important;
  color: #00000040 !important;
}

/* ===== 🎯 表单错误提示不占用空间 =====  */
/* 使用绝对定位，避免表单抖动 */
.ant-form-item-explain-error {
  position: absolute !important;
  z-index: 1000;
  background: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin-top: 2px;
  font-size: 12px;
  max-width: 300px;
  word-wrap: break-word;
  white-space: normal;
}

/* 确保 Form.Item 不为错误提示预留空间 */
.ant-form-item-explain, 
.ant-form-item-extra {
  min-height: 0 !important;
}
