// RenameRule.less
.rename-rule-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  .rename-rule-card-preview {
    display: flex;
    .left {
      width: 200px;
    }
  }
  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }

  .ant-card-head {
    background: linear-gradient(135deg, #1890ff, #36cfc9);
    border-radius: 8px 8px 0 0;

    .ant-card-head-title {
      color: white;
      font-weight: 600;
    }

    .ant-card-extra {
      .ant-btn {
        border-radius: 6px;
        transition: all 0.3s ease;

        &:hover {
          background: rgba(255, 255, 255, 0.3) !important;
          transform: translateY(-1px);
        }

        &:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
      }
    }
  }

  .ant-card-body {
    padding: 24px;
  }

  // 输入框样式
  .ant-input,
  .ant-input-number,
  .ant-select-selector {
    border-radius: 6px;
    transition: all 0.3s ease;

    &:focus,
    &.ant-select-focused {
      border-color: #40a9ff;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }
  }

  // 行间距
  .ant-row {
    align-items: center;

    .ant-col {
      display: flex;
      align-items: center;
    }
  }

  // 预览信息样式
  .preview-info {
    background: #f6f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 8px;

    .ant-typography {
      margin: 0;
    }
  }

  // Checkbox 样式
  .ant-checkbox-wrapper {
    .ant-checkbox {
      &.ant-checkbox-checked {
        .ant-checkbox-inner {
          background-color: #1890ff;
          border-color: #1890ff;
        }
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .ant-card-body {
      padding: 16px;
    }

    .ant-row {
      margin-bottom: 16px;

      .ant-col {
        margin-bottom: 8px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .ant-card-extra {
      .ant-space {
        flex-direction: column;
        width: 100%;

        .ant-btn {
          width: 100%;
        }
      }
    }
  }

  // 暗色主题
  @media (prefers-color-scheme: dark) {
    background: #1f1f1f;
    border-color: #303030;

    .ant-card-head {
      background: linear-gradient(135deg, #1668dc, #13c2c2);
    }

    .preview-info {
      background: #262626;
      border-color: #434343;
    }
  }

  // 动画效果
  .ant-space-item {
    transition: all 0.3s ease;
  }

  // 禁用状态
  .ant-input:disabled,
  .ant-input-number:disabled {
    background-color: #f5f5f5;
    opacity: 0.6;
    cursor: not-allowed;
  }
}

// 全局动画
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rename-rule-card {
  animation: fadeIn 0.3s ease-out;
}