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

/* 设计器容器 */
.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: #fafafa;
  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;
  padding: 8px 6px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  transition: all 0.3s ease;
  user-select: none;
  cursor: move;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  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;
  min-height: 400px;
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  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: 12px;
  padding: 16px;
  margin-bottom: 20px;
  background: #fff;
  border: 2px solid #e8e8e8;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 栅格布局字段项特殊样式 - 更大的间距 */
.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;
}

/* 确保所有表单组件高度一致 */
.ant-form-item .ant-input:not(textarea),
.ant-form-item .ant-input-number,
.ant-form-item .ant-input-number-input-wrap,
.ant-form-item .ant-select-selector,
.ant-form-item .ant-picker {
  min-height: 32px !important;
  height: 32px !important;
}

/* textarea 使用 auto 高度以支持多行 */
.ant-form-item textarea.ant-input {
  height: auto !important;
  min-height: auto !important;
}

.ant-form-item .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
  height: 32px !important;
  display: flex;
  align-items: center;
  padding: 0 11px !important;
}

.ant-form-item .ant-select-selection-search-input {
  height: 30px !important;
}

.ant-form-item .ant-input-number-input {
  height: 30px !important;
}

/* 中等尺寸 */
.ant-form-middle .ant-input:not(textarea),
.ant-form-middle .ant-input-number,
.ant-form-middle .ant-input-number-input-wrap,
.ant-form-middle .ant-select-selector,
.ant-form-middle .ant-picker {
  min-height: 32px !important;
  height: 32px !important;
}

.ant-form-middle textarea.ant-input {
  height: auto !important;
  min-height: auto !important;
}

.ant-form-middle .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
  height: 32px !important;
}

/* 大尺寸 */
.ant-form-large .ant-input:not(textarea),
.ant-form-large .ant-input-number,
.ant-form-large .ant-input-number-input-wrap,
.ant-form-large .ant-select-selector,
.ant-form-large .ant-picker {
  min-height: 40px !important;
  height: 40px !important;
}

.ant-form-large textarea.ant-input {
  height: auto !important;
  min-height: auto !important;
}

.ant-form-large .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
  height: 40px !important;
}

/* 小尺寸 */
.ant-form-small .ant-input:not(textarea),
.ant-form-small .ant-input-number,
.ant-form-small .ant-input-number-input-wrap,
.ant-form-small .ant-select-selector,
.ant-form-small .ant-picker {
  min-height: 24px !important;
  height: 24px !important;
}

.ant-form-small textarea.ant-input {
  height: auto !important;
  min-height: auto !important;
}

.ant-form-small .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
  height: 24px !important;
}

/* 插入指示器脉冲动画 */
@keyframes dropIndicatorPulse {
  0%, 100% {
    opacity: 0.8;
    box-shadow: 0 0 0 0 rgba(24, 144, 255, 0.4);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 0 4px rgba(24, 144, 255, 0.1);
  }
}

